let canvas;

​

function setup() {

  var p5Canvas = createCanvas(1080, 1080);

  canvas = p5Canvas.canvas;

  angleMode(DEGREES);

  colorMode(HSB, 255);

  posArr = [];

  dirArr = [];

  nMax = 10;

  for(i=0;i<nMax;i++) {

    posArr.push(createVector(width/2, height/2));

    dirArr.push(createVector(1, 0).rotate(i*360/nMax).setMag(10));

  }

}

​

function draw() {

  if(frameCount===1)

    capturer.start();

  background(0, 40);

  noFill();

  strokeWeight(10);

  stroke((frameCount*2)%255, 255, 255);

  beginShape();

  for(i=0;i<posArr.length;i++) {

    if(posArr[i].x+dirArr[i].x >= width || posArr[i].x+dirArr[i].x <= 0) {

      dirArr[i].x *= -1;

    }

    if(posArr[i].y+dirArr[i].y >= height || posArr[i].y+dirArr[i].y <= 0) {

      dirArr[i].y *= -1;

    }

    posArr[i].add(dirArr[i]);

    vertex(posArr[i].x, posArr[i].y);

  }

  endShape(CLOSE);

  resetMatrix();

  strokeWeight(2);

  stroke(0);

  fill(0);

  text("@URBANOXYGEN_", width-290, height-20);

  strokeWeight(1);

  stroke(220);

  fill(220);

  textFont('Nunito', 30);

  text("@URBANOXYGEN_", width-290, height-20);

  if(frameCount < frameLimit) {

    capturer.capture(canvas);

  } else if(frameCount == frameLimit) {

    capturer.stop();

    capturer.save();

  }

}

​

function polygon(x, y, radius, npoints) {

  angleMode(RADIANS);

  let angle = TWO_PI / npoints;

  beginShape();

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

    let sx = x + cos(a) * radius;

    let sy = y + sin(a) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

  angleMode(DEGREES);

}

​

function mouseClicked() {

  noLoop();

  redraw();

}