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);