xxxxxxxxxx
99
let c;
let s = 7;
let im = [];
let cs = [
"#e0e0e0",
"#ff0000",
"#000000",
"#ffffff",
"#ffdd00",
"#8bbb81",
"#c0c0c0",
"#e4dbc5",
"#552c2a",
];
function setup() {
print (deviceOrientation);
createCanvas(350, 400);
pixelDensity(1);
c = 0;
for (i = 0; i < 44 * 30; i++) im[i] = -1;
}
function draw() {
background(cs[0]);
randomSeed(0);
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));
}
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", width - 5, height - 5);
strokeWeight(0.5);
}
if (isDrawingArea()) {
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);
}
for (i = 0; i < 44 * 30; i++)
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);
}
}
function mousePressed() {
if (isDrawingArea()) {
xm = floor((mouseX - width / 10) / s);
ym = floor((mouseY - height / 10) / s);
cc = im[ym * 43 + xm];
im[ym * 43 + xm] = cc == c + 1 ? -1 : c + 1;
} else if (isColorTilesArea()) {
c = floor(mouseY / (height / 16));
}
}
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 isColorTilesArea() {
return mouseX < width / 10 && mouseY < height / 2;
}