let downscaleFactor = 3;  // downcale factor for individual shapes

let sceneCnt = 200;       // number of scenes

​

function setup() {

  frameRate(8);

  let cvs = createCanvas(700, 500); // Sets default size and ratio.

  cvs.canvas.style.width='100%';    // 100% width of available space

  cvs.canvas.style.height='auto';

  noFill();

}

​

function setRandomStroke() {  // sets border color and thickness

  // Color credit to SchemeColor.com

  let colorSet = ['#CED8F7','#4A6DE5','#002082'];

  stroke(random(colorSet));

  strokeWeight(random(1,5)); // 1 to 4

}

​

function setRandomPosAngle() {  // sets position and rotation

  resetMatrix();

  translate(random(width),random(height));

  rotate(radians(360));

}

​

// Name is not so descriptive, but it will be used a lot

// It is to limit coordinates(and thus size of the shape)

// 1/downscaleFactor of either width or height (whichever is smaller).

function p() {return random(min(width,height)/downscaleFactor);}

​

function drawRandomShape() {

  // randomly(based on seed) choose from 1 to 5

  switch (int(random(1,6))) {

    case 1: // rectangle

      rect(0,0,p(),p());

      break;

    case 2: // triangle

      triangle(0,0,p(),p(),p(),p());

      break;

    case 3: // circle

      circle(0,0,p()/2);

      break;

    case 4: // line

      line(0,0,p(),p());

      break;

    case 5: // arc

      arc(0,0,p(),p(),0,radians(random(360)));

      break;

  }

}

​

function draw() {

  background("#3057E1");

  randomSeed((frameCount)%sceneCnt); // shows only sceneCnt # of frames

  for (i=0;i<(width*height/1400);i++) {

    setRandomStroke();

    setRandomPosAngle();

    drawRandomShape();

  }

}