iosonosempreio/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
    <style> body {padding: 0; margin: 0;} </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>

## sketch.js
function preload(){
  // put preload code here
}

function setup() {
  // put setup code here
  createCanvas(windowWidth,windowHeight);
  rectMode(CENTER);
  angleMode(DEGREES)

  let rects = [
    // {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)},
    // {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)}
  ]

  for (var i=0; i<150; i++) {
    rects.push({'x': random(50,windowWidth-50), 'y': random(50,windowHeight-50), 'deg': random(0,360)})
  }


  // rects.forEach( (r) => {
  //   fill('white');
  //   stroke('#34495E');
  //   drawingContext.setLineDash([1,0]);
  //   push();
  //   translate(r.x,r.y)
  //   rotate(r.deg);
  //   rect(0,0,20,20);
  //   pop();
  //   noStroke();
  //   fill('#DC7633');
  //   r.x1 = 150 * cos(r.deg) + r.x;
  //   r.y1 = 150 * sin(r.deg) + r.y;
  //   ellipse(r.x1, r.y1, 8, 8);
  //   fill('#1ABC9C');
  //   r.x2 = 10 * cos(r.deg) + r.x;
  //   r.y2 = 10 * sin(r.deg) + r.y;
  //   ellipse(r.x2, r.y2, 8, 8);
  // })

  for(var i = 0; i < rects.length; i +=2){
    for (var ii = 0; ii < 2; ii++){
      fill('white');
      stroke('#34495E');
      drawingContext.setLineDash([1,0]);
      push();
      translate(rects[i+ii].x,rects[i+ii].y)
      rotate(rects[i+ii].deg);
      rect(0,0,20,20);
      pop();
      // noStroke();
      // fill('#DC7633');
      rects[i+ii].x1 = 150 * cos(rects[i+ii].deg) + rects[i+ii].x;
      rects[i+ii].y1 = 150 * sin(rects[i+ii].deg) + rects[i+ii].y;
      // ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8);
      // fill('#1ABC9C');
      rects[i+ii].x2 = 10 * cos(rects[i+ii].deg) + rects[i+ii].x;
      rects[i+ii].y2 = 10 * sin(rects[i+ii].deg) + rects[i+ii].y;
      // ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8);
    }
    noFill();
    stroke('#34495E');
    drawingContext.setLineDash([3,5]);
    bezier(rects[i].x2,rects[i].y2, rects[i].x1,rects[i].y1, rects[i+1].x1,rects[i+1].y1, rects[i+1].x2,rects[i+1].y2)

    for (var ii = 0; ii < 2; ii++){
      noStroke();
      fill('#DC7633');
      ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8);
      fill('#1ABC9C');
      ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8);
    }

  }

}

function draw() {
  // put drawing code here
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0>
	<style> body {padding: 0; margin: 0;} </style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
	<script src="sketch.js"></script>
	</head>
	<body>
	</body>
	</html>
	function preload(){
	// put preload code here
	}

	function setup() {
	// put setup code here
	createCanvas(windowWidth,windowHeight);
	rectMode(CENTER);
	angleMode(DEGREES)

	let rects = [
	// {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)},
	// {'x': random(50,450), 'y': random(50,450), 'deg': random(0,360)}
	]

	for (var i=0; i<150; i++) {
	rects.push({'x': random(50,windowWidth-50), 'y': random(50,windowHeight-50), 'deg': random(0,360)})
	}


	// rects.forEach( (r) => {
	// fill('white');
	// stroke('#34495E');
	// drawingContext.setLineDash([1,0]);
	// push();
	// translate(r.x,r.y)
	// rotate(r.deg);
	// rect(0,0,20,20);
	// pop();
	// noStroke();
	// fill('#DC7633');
	// r.x1 = 150 * cos(r.deg) + r.x;
	// r.y1 = 150 * sin(r.deg) + r.y;
	// ellipse(r.x1, r.y1, 8, 8);
	// fill('#1ABC9C');
	// r.x2 = 10 * cos(r.deg) + r.x;
	// r.y2 = 10 * sin(r.deg) + r.y;
	// ellipse(r.x2, r.y2, 8, 8);
	// })

	for(var i = 0; i < rects.length; i +=2){
	for (var ii = 0; ii < 2; ii++){
	fill('white');
	stroke('#34495E');
	drawingContext.setLineDash([1,0]);
	push();
	translate(rects[i+ii].x,rects[i+ii].y)
	rotate(rects[i+ii].deg);
	rect(0,0,20,20);
	pop();
	// noStroke();
	// fill('#DC7633');
	rects[i+ii].x1 = 150 * cos(rects[i+ii].deg) + rects[i+ii].x;
	rects[i+ii].y1 = 150 * sin(rects[i+ii].deg) + rects[i+ii].y;
	// ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8);
	// fill('#1ABC9C');
	rects[i+ii].x2 = 10 * cos(rects[i+ii].deg) + rects[i+ii].x;
	rects[i+ii].y2 = 10 * sin(rects[i+ii].deg) + rects[i+ii].y;
	// ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8);
	}
	noFill();
	stroke('#34495E');
	drawingContext.setLineDash([3,5]);
	bezier(rects[i].x2,rects[i].y2, rects[i].x1,rects[i].y1, rects[i+1].x1,rects[i+1].y1, rects[i+1].x2,rects[i+1].y2)

	for (var ii = 0; ii < 2; ii++){
	noStroke();
	fill('#DC7633');
	ellipse(rects[i+ii].x1, rects[i+ii].y1, 8, 8);
	fill('#1ABC9C');
	ellipse(rects[i+ii].x2, rects[i+ii].y2, 8, 8);
	}

	}

	}

	function draw() {
	// put drawing code here
	}