From be49de440179123ccc25210c2e6735fa449ad9d6 Mon Sep 17 00:00:00 2001 From: George Dallas <104156999+dallasGeorge@users.noreply.github.com> Date: Thu, 28 Dec 2023 19:47:26 +0200 Subject: [PATCH] add pixel art website --- Pixel-Art-Maker/README.md | 3 + Pixel-Art-Maker/css/style.css | 74 +++++++++++++++++ Pixel-Art-Maker/index.html | 34 ++++++++ Pixel-Art-Maker/js/script.js | 146 ++++++++++++++++++++++++++++++++++ 4 files changed, 257 insertions(+) create mode 100644 Pixel-Art-Maker/README.md create mode 100644 Pixel-Art-Maker/css/style.css create mode 100644 Pixel-Art-Maker/index.html create mode 100644 Pixel-Art-Maker/js/script.js diff --git a/Pixel-Art-Maker/README.md b/Pixel-Art-Maker/README.md new file mode 100644 index 0000000..01d448e --- /dev/null +++ b/Pixel-Art-Maker/README.md @@ -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. \ No newline at end of file diff --git a/Pixel-Art-Maker/css/style.css b/Pixel-Art-Maker/css/style.css new file mode 100644 index 0000000..bdf7a8e --- /dev/null +++ b/Pixel-Art-Maker/css/style.css @@ -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%; + } +} diff --git a/Pixel-Art-Maker/index.html b/Pixel-Art-Maker/index.html new file mode 100644 index 0000000..b21af21 --- /dev/null +++ b/Pixel-Art-Maker/index.html @@ -0,0 +1,34 @@ + + + + + + + + Pixel Art Drawing + + + + + + +

Pixel Art Maker

+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Pixel-Art-Maker/js/script.js b/Pixel-Art-Maker/js/script.js new file mode 100644 index 0000000..233f2c6 --- /dev/null +++ b/Pixel-Art-Maker/js/script.js @@ -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(' click to download '); +} + + +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