DEV Community is a community of 788,395 amazing developers

We're a place where coders share, stay up-to-date and grow their careers. Learning Generative Art; day 7 "Pandora's Box" 🗃

Continuation of My first step in learning Generative Art. I'm finally finishing my seven days challenge to post artworks every day!

"Pandora's Box"    I've tried to express Pandora's box with circles and triangles only.

In publishing this article, I should confess that I was truly inspired by evanyou.me's design and code. It reminded me of lightning first; then I came up with the idea to draw Pandora's box with the lightning somehow.

By the way, are you wondering why the drawn "box" is not literally a box, but a kind of a circle? Then let's check the myth again.

The container mentioned in the original story was actually a large storage jar but the word was later mistranslated as "box".
https://en.wikipedia.org/wiki/Pandora%27s_box

Yes, that's not originally a "box". So I drew it as a form of a jar. Well, I admit that it's possibly still far from a jar though... 😇

// Sorry for the quite ugly code...

var f = 60,
r = 0,
u = Math.PI * 2,
v = Math.cos,
q;

function setup() {
createCanvas(1000, 400);
frameRate(10)

// To capture static screenshot
// noLoop();
// for(var i=0; i < 10; i++) { draw() }
}

function draw() {
// background(225, 200); // Try this for white background pattern
background(25, 200);
drawLightnings();
drawCircles();
}

function drawLightnings() {
// stroke(0, 100); // Try this to emphasize lightnings
noStroke()
for(var i=0; i < 10; i++) {
q = [ {x: f, y: height * 0.7 + f}, {x: random(f-10, f+10), y: height * 0.7 - f} ]
while(q.x < width + f) drawTriangle(q, q)
}
}

function drawTriangle(i, j, direction){
r -= u / -50;
c = (v(r)*127+128<<16 | v(r+u/3)*127+128<<8 | v(r+u/3*2)*127+128).toString(16);

fill(color(
parseInt(c.substring(0, 2), 16),
parseInt(c.substring(2, 4), 16),
parseInt(c.substring(4, 6), 16),
200));

beginShape();
vertex(i.x, i.y);
vertex(j.x, j.y);
var k = j.x + (Math.random()*2-0.25)*f;
var n = y(j.y);
vertex(k, n);
endShape(CLOSE);

q = q;
q = { x: k, y: n };
}

function y(p){
var t = p + (Math.random() * 2 - 1.1) * f;
return (t > height || t < 0) ? y(p) : t;
}

function drawCircles() {
stroke(255, 200);