Tunnel

let circles = [];

​

const FRAME_WIDTH = 1000

const FRAME_HEIGHT = 500

​

const GROWTH_RATE = 4

const MOVEMENT_RATE = 0.022

const NUM_CIRCLES = 70

​

function setup() {

  createCanvas(FRAME_WIDTH, FRAME_HEIGHT);

  init();

}

​

function init() {

  circles = generateCircles();

}

​

function draw() {

  background(0);

  stroke(255);

  noFill();

  circles = tick(circles);

  drawCircles();

}

​

function drawCircles() {

  const total = circles.length

  strokeWeight(1.0)

  circles.forEach((circle, index) => {

    stroke(circle.colour);

    // strokeWeight(1.0)

    ellipse(circle.pos.x, circle.pos.y, circle.size, circle.size);

  })

}

​

function tick(circles) {

  const largerCircles = circles.map(circle =>

    Object.assign({}, circle, {

      size: circle.size + GROWTH_RATE

    })

  );

  if(frameCount % 5 === 0){ // shift and add

    const time = frameCount * MOVEMENT_RATE // * (sin(frameCount) + 1) * 0.01

    const newPos = createVector(sin(time) * 100 + FRAME_WIDTH * .5, cos(time) * 100 + FRAME_HEIGHT * .5)

    largerCircles.shift();

    largerCircles.push(genCircle({ pos: newPos }));

  }

  return largerCircles;

}

​

// circle

function generateCircles() {

  const genCircles = (x, index) => genCircle({ size: index * 10 });

  return arrayOf(NUM_CIRCLES, genCircles);

}

​

const genCircle = (props = {}) => ({

  pos: createVector(0, 0),

  size: 10,

  colour: 255,

  ...props

});

​

// UTILS

// fill array of length 'size' using genElem function

function arrayOf(size, genElem) {

  return new Array(size).fill(null).map(genElem);

}

​