Learning Generative Art; day 7 "Pandora's Box" 🗃 Masato Ohba twitter logo github logo May 6 '18・2 min read

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

var radius = 10;
for(var i=0; i < 100; i++) {
fill(color(random(100, 255), random(100, 255), random(255), 100));
}
}
DISCUSS (1)

One last thing:

Now reaching over 3 million visitors per month, DEV is the fastest growing software development community in the world.

It's free, open source, devoted to the open web, and will never have popups or a pay wall.

Classic DEV Post from Jan 13

The Best Books for New Devs + Bonus Twitter Thread  