Very early pixel-art thingy...

-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0\|545\|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> Very early pixel-art thingy...
Thu, 14 Jun 2018, 03:27
spinal	Very early pixel-art thingy... I started a pixelart thingy in html/javascript partly because I want one, partly to practice javascript. <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } #myCanvas{ border:1px solid black; width:320px; height:320px; padding:0; margin:0; } #paint { width:320px; height:320px; padding:0; margin:0; } #pal { padding-left:24px; } </style> </head> <body> <div id="paint"> <canvas id="myCanvas"></canvas> </div> <select id="pal" onchange="useColor()"> </select> <script> palette = new Array(256); // create palette var i = 0; var select = document.getElementById("pal"); for(var b=0; b<=5; b++){ for(var g=0; g<=6; g++){ for(var r=0; r<=5; r++){ palette[i] = "rgb(" + r51 + "," + g40 + "," + b51 + ")"; select.options[select.options.length] = new Option(palette[i]); i++; } } } function useColor() { var _data = document.getElementById("pal"); var _selectedData=""; for(i=0; i<document.getElementById("pal").length; i++) { var _listElement = document.getElementById("pal")[i]; if(_listElement.selected) { var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = _listElement.value; //_selectedData = _selectedData + _listElement.value + "\n"; } } } var pixelSize = 20; var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); var painting = document.getElementById('paint'); var paint_style = getComputedStyle(painting); canvas.width = parseInt(paint_style.getPropertyValue('width')); canvas.height = parseInt(paint_style.getPropertyValue('height')); var mouse = {x: 0, y: 0}; canvas.addEventListener('mousemove', function(e) { mouse.x = e.pageX - this.offsetLeft; mouse.y = e.pageY - this.offsetTop; }, false); ctx.lineWidth = 1; ctx.lineJoin = 'square'; ctx.lineCap = 'square'; ctx.strokeStyle = '#000'; ctx.translate(0.5, 0.5); // remove bluring for (var x = pixelSize; x < 320; x += pixelSize) { ctx.moveTo(x, 0); ctx.lineTo(x, 320); } for (var y = pixelSize; y < 320; y += pixelSize) { ctx.moveTo(0, y); ctx.lineTo(320, y); } ctx.stroke(); ctx.lineWidth = pixelSize-1; ctx.lineJoin = 'square'; ctx.lineCap = 'square'; ctx.strokeStyle = '#000'; canvas.addEventListener('mousedown', function(e) { ctx.beginPath(); mx=parseInt(mouse.x/pixelSize)pixelSize; my=parseInt(mouse.y/pixelSize)pixelSize; ctx.moveTo(mx+(pixelSize/2), my+(pixelSize/2)); canvas.addEventListener('mousemove', onPaint, false); }, false); canvas.addEventListener('mouseup', function() { canvas.removeEventListener('mousemove', onPaint, false); }, false); var onPaint = function() { mx=parseInt(mouse.x/pixelSize)pixelSize; my=parseInt(mouse.y/pixelSize)*pixelSize; ctx.moveTo(mx+(pixelSize/2), my+(pixelSize/2)); ctx.lineTo(mx+(pixelSize/2), my+(pixelSize/2)); ctx.stroke(); }; </script> </body> </html> --v -=-=- Check out my excellent homepage!
Thu, 14 Jun 2018, 03:43
Jayenkai	Suggestion (Assuming it's going to stay Monochrome) When you first "click", remember the opposite colour of what is already there... eg, if you click on a white tile, draw in black, and if you click on a black tile, draw in white. That way you can draw and undraw without needing any extra buttons. I'm interested to see what you make with such a tool. (*remembers he once started one, with the intention of putting it on the SoCoder frontpage.. .. Whatever happened to that?!?) -=-=- ''Load, Next List!''
Thu, 14 Jun 2018, 05:08
spinal	It'll be 8bit. Just trying to think up a nice way to show the palette -=-=- Check out my excellent homepage!
Thu, 14 Jun 2018, 12:54
cyangames	Reminds me of this old javascript tool I made way back when to create zx81 images online View on YouTube Glad a friend made a video of all the pics! -=-=- Web / Game Dev, occasionally finishes off coding games also!