Learning Generative Art; day 7 "Pandora's Box" 🗃
Tags: beginners, art, javascript, showdev
Published: 2018-05-06 12:51:41

---
title: Learning Generative Art; day 7 "Pandora's Box" 🗃
published: true
description: I drew an image expressing Pandora's Box wave with p5
tags: beginners,art,javascript,showdev
cover_image: https://user-images.githubusercontent.com/1811616/39673282-45fec654-5174-11e8-9bff-4bddc22faa07.png
---

Continuation of [My first step in learning Generative Art](https://dev.to/ohbarye/my-first-step-in-learning-generative-art-3674). I'm finally finishing my seven days challenge to post artworks every day!

## "Pandora's Box"

![pandora_black](https://user-images.githubusercontent.com/1811616/39673282-45fec654-5174-11e8-9bff-4bddc22faa07.png)

![pandora_black](https://user-images.githubusercontent.com/1811616/39673286-49c46a0a-5174-11e8-89f5-5538b981d270.gif)

![pandora_white](https://user-images.githubusercontent.com/1811616/39673283-4622d724-5174-11e8-9f3f-8193340b5a0e.png)


![pandora_white](https://user-images.githubusercontent.com/1811616/39673287-49f28fe8-5174-11e8-8651-f73c0e2ca98a.gif)


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](http://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... 😇


```js
// 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));
  }
}
```