129 lines
2.9 KiB
JavaScript
129 lines
2.9 KiB
JavaScript
// -- https://stackoverflow.com/a/46722645
|
|
// history.scrollRestoration = "manual";
|
|
|
|
// -- https://stackoverflow.com/a/39577640
|
|
function dataURLtoBlob(dataURL) {
|
|
let array, binary, i, len;
|
|
binary = atob(dataURL.split(",")[1]);
|
|
array = [];
|
|
i = 0;
|
|
len = binary.length;
|
|
while (i < len) {
|
|
array.push(binary.charCodeAt(i));
|
|
i++;
|
|
}
|
|
return new Blob([new Uint8Array(array)], {
|
|
type: "image/png",
|
|
});
|
|
}
|
|
|
|
var p = [];
|
|
var cols = 17;
|
|
var rows = 17;
|
|
var unit = 15; //px
|
|
var sw = 0.4; //px (strokewidth)
|
|
var img;
|
|
|
|
function setup() {
|
|
var cnv = createCanvas(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
|
|
cnv.parent("p5");
|
|
img = createGraphics(cols*(unit+sw)+sw, rows*(unit+sw)+sw);
|
|
var but = createButton("clear!");
|
|
but.attribute('type', 'button');
|
|
but.class('but').parent("p5");
|
|
// var sav = createButton("save!");
|
|
// sav.class('sav').parent("p5");
|
|
for (var i = 0; i < cols*rows; i++) {
|
|
p.push(0);
|
|
}
|
|
but.mousePressed(function () {
|
|
for (var i = 0; i < cols*rows; i++) {
|
|
p.push(0);
|
|
}
|
|
img.clear();
|
|
});
|
|
}
|
|
|
|
function draw() {
|
|
//
|
|
clear();
|
|
|
|
//draw the grid
|
|
stroke(255);
|
|
strokeWeight(sw);
|
|
for (var c = 0; c < cols; c++) {
|
|
for (var r = 0; r < rows; r++) {
|
|
noFill();
|
|
rect(c*(unit+sw)+sw, r*(unit+sw)+sw, unit, unit);
|
|
}
|
|
}
|
|
|
|
//
|
|
image(img, 0, 0);
|
|
|
|
//pointer
|
|
fill(0, 255, 0);
|
|
strokeWeight(0);
|
|
|
|
//mouse way
|
|
circle(mouseX, mouseY, 10);
|
|
if (mouseIsPressed && mouseButton === LEFT) {
|
|
//find slot under the pointer
|
|
var mouseC = int(mouseX/(unit+sw));
|
|
var mouseR = int(mouseY/(unit+sw));
|
|
if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
|
|
img.strokeWeight(0);
|
|
img.fill(255);
|
|
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
|
|
}
|
|
|
|
//touch way
|
|
if (touches.length > 0) {
|
|
circle(touches[0].x, touches[0].y, 10);
|
|
//find slot under the pointer
|
|
var mouseC = int(touches[0].x/(unit+sw));
|
|
var mouseR = int(touches[0].y/(unit+sw));
|
|
if (mouseC < cols && mouseR < rows) p[mouseC*cols + mouseR] = 1;
|
|
img.strokeWeight(0);
|
|
img.fill(255);
|
|
img.rect(mouseC*(unit+sw), mouseR*(unit+sw), unit+sw*2, unit+sw*2);
|
|
}
|
|
}
|
|
|
|
function submitForm(event) {
|
|
|
|
//TODO : first check if there is a drawing or not. (pixels)
|
|
|
|
//
|
|
var submit = document.getElementById("submit");
|
|
submit.setAttribute('disabled', 'disabled');
|
|
|
|
//
|
|
var form = document.getElementById("form");
|
|
var fd = new FormData(form);
|
|
|
|
//
|
|
var dataurl = img.elt.toDataURL();
|
|
var pixels = dataURLtoBlob(dataurl);
|
|
fd.append("pixels", pixels, "pixels.png");
|
|
|
|
for(var pair of fd.entries()) {
|
|
console.log(pair[0]+ ', '+ pair[1]);
|
|
}
|
|
|
|
//
|
|
var request = new XMLHttpRequest();
|
|
request.open("POST", "/entry");
|
|
request.send(fd);
|
|
|
|
//
|
|
event.preventDefault();
|
|
|
|
//
|
|
alert('감사합니다! Thank you!');
|
|
location.reload();
|
|
}
|
|
|
|
const form = document.getElementById('form');
|
|
form.addEventListener('submit', submitForm);
|