xxxxxxxxxx
297
// Storkify
// a pixel art editor inspired by
// street artist stork
// 2022-01-17, @jmutterer
let c;
let s = 12;
let rs;
let im = [];
let reds = [];
let greens = [];
let blues = [];
let cs = [
"#e0e0e0",
"#ff0000",
"#000000",
"#ffffff",
"#ffdd00",
"#8bbb81",
"#c0c0c0",
"#e4dbc5",
"#552c2a",
];
let help, inp;
let helpVisible;
let saveImage;
let title, author;
let imP="";
let params;
function setup() {
// doesn't work for some reason
params = getURLParams();
helpVisible = true;
rs = 0;
title = "";
author = "";
createCanvas(640, 480);
pixelDensity(1);
c = 0;
for (i = 0; i < 45 * 30; i++) im[i] = -1;
for (i = 0; i < cs.length; i++) {
reds[i] = red(color(cs[i]));
greens[i] = green(color(cs[i]));
blues[i] = blue(color(cs[i]));
}
rslider = createSlider(0, 255);
rslider.position(0, height / 2);
rslider.style("width", "50px");
gslider = createSlider(0, 255);
gslider.position(0, height / 2 + 15);
gslider.style("width", "50px");
bslider = createSlider(0, 255);
bslider.position(0, height / 2 + 30);
bslider.style("width", "50px");
updateSliders(c);
hideSliders(true);
help = createDiv("<- available color tiles<br><-<br>...");
help.style("font-size", "25px");
help.style("font-family", "sans-serif");
help.position(30, 0);
hideSliders(false);
help2 = createDiv("<- adust color");
help2.style("font-size", "25px");
help2.style("font-family", "sans-serif");
help2.position(60, 245);
help3 = createDiv("drawing area");
help3.style("font-size", "45px");
help3.style("font-family", "sans-serif");
help3.style("transform", "rotateZ(-45deg)");
help3.position(200, 200);
help4 = createDiv(
"x: clear all<br>r: randomize concrete<br>s: save<br>?: toggle help"
);
help4.style("font-size", "25px");
help4.style("font-family", "sans-serif");
help4.position(10, 355);
toggleHelp();
saveImage = false;
// get image from URL
// https://editor.p5js.org/jmutterer/full/nQpDKQZ_0
}
function draw() {
background(cs[0]);
text(params.cImage,10,10);
randomSeed(rs);
for (i = 0; i < width * height; i = i + random(1000)) {
fill(64 + random(64));
noStroke();
if (random(10) < 2) ellipse(i % width, i / height, random(5), random(3));
}
cs[c + 1] = color(rslider.value(), gslider.value(), bslider.value());
if (!saveImage)
for (i = 0; i < 8; i++) {
strokeWeight(0.5);
stroke(0);
if (i == c) {
strokeWeight(3);
stroke(255);
}
fill(cs[i + 1]);
rect(5, 5 + 30 * i, 20, 20);
}
fill(128);
strokeWeight(0);
textAlign("right", "bottom");
textFont("Helvetica");
textSize(14);
text("storkify@ibmp", width - 5, height - 5);
strokeWeight(0.5);
if (isDrawingArea() && !saveImage) {
noFill();
stroke("white");
for (x = 0; x < 43; x++)
for (y = 0; y <= 30; y++)
rect(width / 10 + x * s, height / 10 + y * s, s, s);
stroke("red");
xm = floor((mouseX - width / 10) / s);
ym = floor((mouseY - height / 10) / s);
rect(width / 10 + xm * s, height / 10 + ym * s, s, s);
//hideSliders(true);
}
for (
i = 0;
i < 44 * 30 + 13;
i++ // why??????
)
if (im[i] != -1) {
stroke("gray");
fill(cs[im[floor(i / 43) * 43 + (i % 43)]]);
rect(width / 10 + (i % 43) * s, height / 10 + floor(i / 43) * s, s, s, 1);
}
if (!helpVisible && !saveImage) drawQuestionmark();
/*
textAlign(CENTER,TOP);
noStroke();
fill(0);
textSize(30);
text(title,width/2,9*height/10);
*/
if (saveImage) {
saveCanvas("Storkify", "png");
saveImage = false;
}
}
function mousePressed() {
helpVisible = true;
toggleHelp();
if (isDrawingArea()) {
xm = floor((mouseX - width / 10) / s);
ym = floor((mouseY - height / 10) / s);
cc = im[ym * 43 + xm];
if (cc==-1)im[ym * 43 + xm] = c+1;
else im[ym * 43 + xm] = -1;
} else if (isColorTilesArea()) {
c = floor(mouseY / (height / 16));
updateSliders(c);
hideSliders(false);
} else if (isQuestionmark()) {
toggleHelp();
}
}
function touchStarted() {
helpVisible = true;
toggleHelp();
if (isDrawingArea()) {
xm = floor((mouseX - width / 10) / s);
ym = floor((mouseY - height / 10) / s);
cc = im[ym * 43 + xm];
if (cc==-1)im[ym * 43 + xm] = c+1;
else im[ym * 43 + xm] = -1;
} else if (isColorTilesArea()) {
c = floor(mouseY / (height / 16));
updateSliders(c);
hideSliders(false);
} else if (isQuestionmark()) {
toggleHelp();
}
}
function mouseDragged() {
if (isDrawingArea()) {
xm = floor((mouseX - width / 10) / s);
ym = floor((mouseY - height / 10) / s);
cc = im[ym * 43 + xm];
im[ym * 43 + xm] = c + 1;
}
}
function isDrawingArea() {
return (
mouseX > width / 10 &&
mouseX < (9 * width) / 10 &&
mouseY > height / 10 &&
mouseY < (9 * height) / 10
);
}
function isQuestionmark() {
return mouseX < width / 20 && mouseY > (9 * height) / 10;
}
function isColorTilesArea() {
return mouseX < width / 10 && mouseY < height / 2;
}
function updateSliders(col) {
rslider.value(red(color(cs[c + 1])));
gslider.value(green(color(cs[c + 1])));
bslider.value(blue(color(cs[c + 1])));
}
function hideSliders(hide) {
if (hide) {
rslider.hide();
gslider.hide();
bslider.hide();
} else {
rslider.show();
gslider.show();
bslider.show();
}
}
function keyTyped() {
if (key === "x") reset();
else if (key === "r") rs++;
else if (key === "d") {
/*
let cImage = LZString.compressToBase64(im.join());
let cReds = LZString.compressToBase64(reds.join());
let cGreens = LZString.compressToBase64(greens.join());
let cBlues = LZString.compressToBase64(blues.join());
// let sUrl = getURL();
let sUrl = "https://editor.p5js.org/jmutterer/full/nQpDKQZ_0";
sUrl = sUrl + "?cImage=" + cImage;
sUrl = sUrl + "&cReds=" + cReds;
sUrl = sUrl + "&cGreens=" + cGreens;
sUrl = sUrl + "&cBlues="+ cBlues;
print(sUrl);
*/
} else if (key === "s") saveImage = true;
else if (key === "?") toggleHelp();
}
function reset() {
for (i = 0; i < 44 * 30; i++) im[i] = -1;
}
function toggleHelp() {
helpVisible = !helpVisible;
if (helpVisible) {
help.show();
help2.show();
help3.show();
help4.show();
hideSliders(false);
} else {
help.hide();
help2.hide();
help3.hide();
help4.hide();
}
}
function drawQuestionmark() {
push();
translate(10, height - 25);
scale(3);
strokeWeight(0.2);
fill("darkgray");
rect(0, 0, 1, 1);
rect(1, -1, 1, 1);
rect(2, -1, 1, 1);
rect(3, 0, 1, 1);
rect(2, 1, 1, 1);
rect(2, 2, 1, 1);
rect(2, 4, 1, 1);
pop();
}
function titleInputEvent() {
title = this.value();
}
function authorInputEvent() {
author = this.value();
}
function utf8_to_b64(str) {
return window.btoa(unescape(encodeURIComponent(str)));
}
function b64_to_utf8(str) {
return decodeURIComponent(escape(window.atob(str)));
}