PALETTES

N30N Night

Game Boy

CODE

<!-- Code by M4TTBIT - m4ttbit.dev - 2021 -->

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/npm/p5@1.6.0/lib/p5.min.js"></script>
	</head>
	
	<body>
		<div style="width:90%; margin: auto; padding: 2em 0em 0em 0em;">
			<!-- Script below is under 'JS' -->
        	<script src="sketch.js"></script>
            <div id="draw-area">
            	<div id="drawing"></div>
				<div id="grid-lines"></div>
            </div>
                            
            <div id="button-container" style="margin: auto; display: flex; flex-wrap: wrap; justify-content: center; padding: 8px 0px 0px 0px;">
		        <div id="colorPicker" style="padding: 8px"></div>
		        <div id="showGrid" style="padding: 8px"></div>
		        <div id="clear" style="padding: 8px"></div>
		        <div id="gridSize" style="padding: 8px"></div>
		        <div id="download" style="padding: 8px"></div>
        	</div>
        </div>
	</body>
</html>

/* Code by M4TTBIT - m4ttbit.dev - 2021 */

canvas {
	border-style: solid;
	border-width: 0.25px;
	margin: auto;
	display: block;
}

#drawing, #grid-lines {
	height: 100%;
	width: 100%;
	margin: auto;
}

#grid-lines {
	position: absolute;
	top: 2em;
	left: 0px;
}

// Code by M4TTBIT - m4ttbit.dev - 2021

let show = false;
let grid;

let sketch = function(p){
	p.setup = function(){
		drawArea = document.getElementById('drawing');
		drawWidth = drawArea.offsetWidth;
  		if (drawWidth > 512){
    		canvas = p.createCanvas(512, 512);
		}else{
 			canvas = p.createCanvas(drawWidth, drawWidth);
		}
		canvas.parent('drawing');
		canvas.background(240);
		
		colorPicker = p.createColorPicker('#49DFFD');
		colorPicker.id('colorPicker');
		colorPicker.parent('colorPicker');
		
		clearButton = p.createButton('CLEAR');
		clearButton.parent('clear');
		clearButton.id('clear');
		clearButton.mousePressed(p.clean);
		
		saveButton = p.createButton('DOWNLOAD PNG');
		saveButton.parent('download');
		saveButton.id('download');
		saveButton.mousePressed(p.download);
		
		grid = canvas.width / 16;
	}
	
	p.draw = function(){
		if (p.mouseIsPressed){
			let x = p.snap(p.mouseX);
			let y = p.snap(p.mouseY);
			p.noStroke();
			p.fill(colorPicker.color());
			p.square(x, y, grid);
		}
	}
	
	p.snap = function(z){
		// subtract offset (to center lines)
		// divide by grid to get row/column
		// round to snap to the closest one
		let cell = Math.round((z - (grid / 2)) / grid);
		// multiply back to grid scale
		// add offset to center
		return cell * grid;
	}
	
	p.clean = function(){
		canvas.clear();
		canvas.background(240);
	}

	p.download = function(){
		saveCanvas('myPixelArt', 'png');
	}
}

let gridLines = function(g){
	g.setup = function(){
		gridArea = document.getElementById('grid-lines');
		gridWidth = gridArea.offsetWidth;
		if (gridWidth > 512){
			gCanvas = g.createCanvas(512, 512);
		}else{
			gCanvas = g.createCanvas(drawWidth, drawWidth);
		}
		gCanvas.parent('grid-lines');
		gCanvas.style.backgroundColor = "transparent";
		
		button = g.createButton('SHOW GRID');
		button.parent('showGrid');
		button.id('show-grid');
		button.size(116, 'relative');
		button.mousePressed(g.turnOnGrid);
		
		gridSizeButton = g.createButton('8X8');
		gridSizeButton.parent('gridSize');
		gridSizeButton.id('grid-size');
		gridSizeButton.size(72, 'relative');
		gridSizeButton.mousePressed(g.gridControl);
	}
	
	g.createGrid = function(){
		let l = 0;
		g.strokeWeight(1);
		g.stroke(150);
		while (l < g.width || l < g.height) {
			g.line(0, l, g.width, l);
			g.line(l, 0, l, g.height);
			l += grid;
		}
	}

	g.removeGrid = function(){
		gCanvas.clear();
		gCanvas.style.backgroundColor = "transparent";
	}
	
	g.turnOnGrid = function(){
		if (show == false){
			g.createGrid();
			document.getElementById('show-grid').innerHTML = 'HIDE GRID';
			show = true;
		}else{
			g.removeGrid();
			document.getElementById('show-grid').innerHTML = 'SHOW GRID';
			show = false;
		}
	}
	
	g.gridControl = function(){
		if (grid == gCanvas.width / 8){
			if (show == true){
				g.removeGrid();
				document.getElementById('show-grid').innerHTML = 'SHOW GRID';
				show = false;
			}
			grid = gCanvas.width / 16;
			document.getElementById('grid-size').innerHTML = '8X8';
		}else{
			if (show == true){
				g.removeGrid();
				document.getElementById('show-grid').innerHTML = 'SHOW GRID';
				show = false;
			}
			grid = gCanvas.width / 8;
			document.getElementById('grid-size').innerHTML = '16X16';
		}
	}
}

let drawingSpace = new p5(sketch);
let helperGrid = new p5(gridLines);