msb-public
/
50projects50days
mirror of https://github.com/bradtraversy/50projects50days
1
0
Code Issues Projects Releases Wiki Activity

add pixel art website

Browse Source
pull/173/head
George Dallas 2 years ago committed by GitHub
parent 236f68461b
commit be49de4401
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 257 additions and 0 deletions
Show Stats Download Patch File Download Diff File

3
Pixel-Art-Maker/README.md
Unescape View File

@ -0,0 +1,3 @@
# Pixel-Art-Maker-Website
Description
A website for drawing pixel art on an adjustable size canvas, with the ability to extract drawings into PNG images too using only html, css and javascript.

74
Pixel-Art-Maker/css/style.css
Unescape View File

@ -0,0 +1,74 @@
body{
font-family: 'Saira', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
margin:0;
padding: 0;
background-color: aqua;
}
h1{text-align: center;}
.draw{
border:2px solid grey;
user-select: none;
display:flex;
flex-direction: column;
height: 500px;
width: 500px;
background-color: white ;
}
.buttonrow{
margin: 0.2%;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
button{
margin: 1%;
width: 8%;
background-color: rgb(252, 252, 127);
border-color: grey;
border-radius: 15%;
font-size: medium;
}
#selectcol{
margin-right:1%;
border-radius: 30%;
border-width: 1px;
background-color: rgb(252, 252, 127);
}
#download{
width:20%;
}
input{
background-color: rgb(252, 252, 127);
}
@media only screen and (max-width: 500px){
.draw{
height: 300px;
width: 300px;
}
.buttonrow{
margin: 2%;
}
button{
width: 20%;
}
#download{
width:40%;
}
}

34
Pixel-Art-Maker/index.html
Unescape View File

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pixel Art Drawing</title>
<link rel='stylesheet' href='css/style.css'>
<script src='js/script.js' defer></script>
<script src="https://www.xarg.org/download/pnglib.js"></script>
</head>
<body>
<h1>Pixel Art Maker</h1>
<dev class="draw">
</dev>
<dev class="buttonrow">
<button id="clear">Clear</button>
<button id="backfill">Filler</button>
<button id="border">Grid:On</button>
</dev>
<dev class="buttonrow">
<input type="color" id="selectcol"></input>
<input id="size" placeholder="example: 16x16 (square)">
<button id="sizesubmit">Submit</button>
</dev>
<dev class="buttonrow"> <button id='download'>Download</button></dev>
</body>
</html>

146
Pixel-Art-Maker/js/script.js
Unescape View File

@ -0,0 +1,146 @@
const box=document.getElementsByClassName("draw")[0];
let x=16; //Default Sizes
let y=16;
let boxsize=1/x*100;
let selectedcolor="rgb(0,0,0)"; //Default Selected Color
let mousedown = false //Help variable that informs if the left mouse button is pressed.
document.body.onmousedown = () => (mousedown = true)
document.body.onmouseup = () => (mousedown = false)
function clearscr(){ //Function for clearing the canvas
const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
pixel.style.backgroundColor='rgb(255,255,255)';});
}
function inpcolor(e){ //Function that changes the selected color.
selectedcolor = e.target.value;
}
function submitfun(){ //function that gets called when you press the submit button to change the canvas size.
sizeinp=document.getElementById('size');
textsize = sizeinp.value;
let textarray= textsize.split("x");
x=parseInt(textarray[0]);
y=parseInt(textarray[0]);
if(x>150){x=150;
y=150;}
boxsize=1/x*100;
removegridelements(box); //update canvas with new sizes.
CreateGrid();
clearscr();
}
function gridbuttonfun(e){ //function that turns the pixels grid on and off.s
if (e.target.innerHTML == "Grid:On"){
const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
pixel.style.outline='none';
e.target.innerHTML = "Grid:Off"});}
else if (e.target.innerHTML=="Grid:Off"){
const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
pixel.style.outline='1px solid grey';
e.target.innerHTML = "Grid:On"});
}
}
function createpng(){ //function that creates a png image of the canvas.
const pixelarray=document.getElementsByClassName("pixel");
var p = new PNGlib(x, x, 256);
for (var i = 0; i < x; i++){
for (var j = 0; j < x; j++){
var getpix = pixelarray[j*x+i];
var colorpix=getpix.style.backgroundColor.split('rgb(');
colorpix=colorpix[1];
var colorarray= (colorpix).split(',');
p.buffer[p.index(i, j)] = p.color(parseInt(colorarray[0]),parseInt(colorarray[1]),parseInt(colorarray[2]));}
}
document.write('<a href="data:image/png;base64,' + p.getBase64() + '" download="download"> click to download </a>');
}
function fillbackground(){ //function that changes every pixel in the canvas into the selected color.
const pixels = document.querySelectorAll('.pixel');
pixels.forEach((pixel) => {
pixel.style.backgroundColor=selectedcolor;});
}
function removegridelements(e){ //function that removes all the pixels of the canvas.
while (e.firstChild) {
e.removeChild(e.firstChild);
}
}
function changeColor(e) { //function that changes the color of a pixel.
if (e.type === 'mouseover' && !mousedown) return
e.target.style.backgroundColor = selectedcolor;
}
function CreateGrid(){ //function that creates the pixel in the canvas.
for (let i=0;i<x;i++){
let devrow = document.createElement("dev");
devrow.classList.add("row");
devrow.style.display="flex";
devrow.style.height= `${boxsize}%`;
devrow.style.width="100%";
for (let j=0;j<y;j++){
let devbox = document.createElement("dev");
devbox.classList.add("pixel");
devbox.style.height=`100%`;
devbox.style.width= `${boxsize}%`;
devbox.style.outline="1px solid grey";
devbox.style.outline.offset= "-1px";
devbox.addEventListener('mouseover', changeColor);
devbox.addEventListener('mousedown', changeColor);
devrow.appendChild(devbox) ;
}
box.appendChild(devrow);
}}
CreateGrid(); //default creation of the canvas.
clearscr();
//A list of event listeners for user inputs.
const clear = document.getElementById('clear');
clear.addEventListener('click',clearscr);
const filler = document.getElementById("backfill");
filler.addEventListener('click',fillbackground);
const colorpicker = document.getElementById("selectcol");
colorpicker.addEventListener("input", inpcolor);
const gridbutton = document.getElementById("border");
gridbutton.addEventListener("click",gridbuttonfun);
const sizesubmit = document.getElementById('sizesubmit');
sizesubmit.addEventListener("click",submitfun);
const downloadbut = document.getElementById('download');
downloadbut.addEventListener("click",createpng);
Write Preview
Loading…
Cancel
Save