DEV Community

Cover image for Learning Generative Art; day 7 "Pandora's Box" πŸ—ƒ
Masato Ohba
Masato Ohba

Posted on

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"

pandora_black

pandora_black

pandora_white

pandora_white

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[1].x < width + f) drawTriangle(q[0], q[1]) } } 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[0] = q[1]; q[1] = { 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)); ellipse(random(f-radius, f+radius), random(height - f -radius, height - f +radius, ), random(50)); } } 
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
gon profile image
Gonzalo Moreno

Awesome <3