let speedX, speedY;

let redVal, greenVal, blueVal;

let alphaVal = 70;

let angle = 0;

​

/*

Function drawing animated spiralling lines which trail each other across the canvas.

*/

function parametricLines() {

  push();

  // Map x and y positions to a color range

  redVal = map(y, 0, height, 0, 255);

  greenVal = map(x, 0, width, 0, 255);

  blueVal = 200;

​

  translate(x, y);

  let rotation = map(x, 0, height, 0, TWO_PI);

  rotate(rotation);

​

  stroke(redVal, greenVal, blueVal, alphaVal);

  line(-200, 0, 200, x);

​

  x = x + speedX;

  y = y + speedY;

​

  // Make sure that the lines don't go beyond the canvas width

  if (x > width || x < 0) {

    speedX = -speedX;

  }

  // Make sure that the lines don't go beyond the canvas height

  if (y > height || y < 0) {

    speedY = -speedY;

  }

  pop();

}

​

/*

Function drawing a trailing ellipse which moves across the screen at varying sizes

*/

function bouncingEllipse(size) {

  // Set the size of the ellipse based on the y value

  if (y > 0) {

    size = map(y, 0, height, 0, 100);

  } else {

    size = map(speedX, 0, height, 0, 100);

  }

  // Map x and y positions to a color range 

  redVal = map(y, 0, height, 0, 255);

  greenVal = map(x, 0, width, 0, 255);

  blueVal = map(x + y, 0, width + height, 0, 255);

​

  stroke(redVal, greenVal, blueVal, alphaVal);

  fill(greenVal, 255, blueVal, alphaVal);

  x = x + speedX;

  y = y + speedY;

​

  // Make sure that the ellipse doesn't go beyond the canvas width in either direction

  if (x > width || x < 0) {

    speedX = -speedX;

  }

  // Make sure that the ellipse doesn't go beyond the canvas height in either direction

  if (y > height || y < 0) {

    speedY = -speedY;

  }

  ellipse(x, y, size, size);

}

​

/*

Function drawing a rectangle with rounded corners and various sizes at random positions across the canvas.

*/

function roundedRect() {

  push();

  rectMode(CENTER);

  // Randomize the shape position 

  let shapeX = random(width);

  let shapeY = random(height);

  // Randomize the shape size

  let size = random(100, 300);

  // Map red fill value to the shape's size

  redVal = map(size, 100, 300, 0, 255);

  noStroke();

  fill(120, redVal, 160, alphaVal * 0.5);

  rect(shapeX, shapeY, size * 0.1, size, size * 0.03, size * 0.03, size * 0.03, size * 0.03);

  pop();

}

​

/*

Function which creates stars at random positions across the canvas. Each star has a randomized number of points and random size.

*/

function star(radius1, radius2, npoints) {

  push();

  // Randomize star position

  let posX = random(width);

  let posY = random(height);

  // Displace by x and y position

  translate(posX, posY);

  //rotate the star based on frame count 

  rotate(frameCount / 200);

  noStroke();

  blueVal = map(posY, 0, height, 0, 255);

  fill(0, 0, blueVal, alphaVal / 2);

  let angle = TWO_PI / int(npoints);

  let halfAngle = angle / 2.0;

  // Begin drawing custom shape 

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = cos(a) * radius2;

    let sy = sin(a) * radius2;

    vertex(sx, sy);

    sx = cos(a + halfAngle) * radius1;

    sy = sin(a + halfAngle) * radius1;

    vertex(sx, sy);

  }

  endShape(CLOSE);

  pop();

}

​

/*

Function which draws flower animation at random positions across the canvas.

*/

function flower() {

  push();

  // Displace based on random x and y values

  translate(x, y);

  // Rotate by angle value at bottom of function

  rotate(radians(angle));

  // Randomize x and y postion

  let posX = random(25, 50);

  let posY = random(25, 50);

​

  // Set the red value based on the noise mapping 

  redVal = noise(frameCount * 0.01) * 50 + 150;

  greenVal = map(x + y, 0, width + height, 0, 255);

  noStroke();

  fill(redVal, greenVal, 100, alphaVal);

  ellipse(posX, posY, 20, 20);

  stroke(redVal, greenVal, 100, alphaVal * 1.5);

  line(0, 0, posX, posY);

​

  angle += 12;

  pop();

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(20);

  x = random(width);

  y = random(height);

  speedX = random(-3, 3);

  speedY = random(-3, 3);

}

​

function draw() {

  if(keyIsPressed && key !== ' '){

    if(keyCode%5 === 0){

      parametricLines();

    }

    if(keyCode%5 === 1){

      bouncingEllipse(random(-100, 50));

    }

    if(keyCode%5 === 2){

      flower();

    }

  }

}

​

function keyPressed(){

  if(key !== ' '){

    if(keyCode%5 === 3){

      roundedRect();

    }

    if(keyCode%5 === 4){

      star(random(30, 50), random(30, 50), random(4, 7));

    }

    if(keyCode === 13){

      saveCanvas('canvas-' + frameCount, 'jpg');

    }

  }else{

    clear();  

  }

}

​

function keyReleased(){

  x = random(width);

  y = random(height);

  speedX = random(-3, 3);

  speedY = random(-3, 3);

}

​