Factory

What

ランダムに6方向へ動くパイプを描きました。
前後左右へは、x方向へ長さの`Math.sqrt(3) /2`倍、y方向へ長さの`0.5`倍移動させることで、立体のように見えます。
また、時間経過により彩度も上がってくるので、初期の描画が暗く、だんだん明るくなっている点も立体的に見せるポイントです。

How

var w = 300;
var h = 300;
var lines = new Array(20);
var d = 30;
var sdx = d * Math.sqrt(3) /2;
var sdy = d /2;
var directions = [[0,d],[0,-d], [sdx,sdy],[-sdx,sdy],[sdx,-sdy],[-sdx,-sdy]];
var drawing = true;
function setup() {
  createCanvas(w, h);
  background(255);
  for(i=0;i < lines.length;i++){
    lines[i] = [random(w), random(h), random(100)];
  }
}

function draw() {
  //noLoop();
  //noStroke();
  background(0,0.5);
  push();
  colorMode(HSB, 100);
  for(i=0;i < lines.length;i++){
    var d = random(directions);
    var newX = lines[i][0] + d[0];
    var newY = lines[i][1] + d[1];
    strokeCap(SQUARE);
    strokeWeight(8);
    stroke(color(lines[i][2],0,0));
    line(lines[i][0], lines[i][1], newX, newY);
    strokeCap(ROUND);
    strokeWeight(7);
    stroke(color(lines[i][2],100,frameCount / 5));
    line(lines[i][0], lines[i][1], newX, newY);
    lines[i][0] = newX;
    lines[i][1] = newY;
  }
  pop();
}

function mouseClicked(){
  if(drawing){
    noLoop();
    drawing = false;
  }else{
    loop();
    drawing = true;
  }
}