Portal

/*

Portal

​

Author:

  Jason Labbe

​

Site:

  jasonlabbe3d.com

Controls:

  - Click to change colors.

  - Move the mouse to change its size.

*/

​

var angleRate = 10;

var particleLinesPerFrame = 3;

var particlesPerFrame = 2;

​

var colorScheme = [];

var particles = [];

var angle = 0;

​

function setup() {

  let canvas = createCanvas(windowWidth, windowHeight);

  mouseX = width / 2;

  newColorScheme();

}

​

function draw() {

  blendMode(BLEND);

  background(0);

  blendMode(SCREEN);

  let circleSize = map(mouseX, 0, width, 0, min(width, height) * 0.4);

  // Calculate what was last frame's position.

  let lastPos = new p5.Vector(circleSize, 0);

  lastPos.rotate(radians(angle));

  lastPos.add(width / 2, height / 2);

  angle += angleRate;

  // Calculate this frame's position.

  let pos = new p5.Vector(circleSize, 0);

  pos.rotate(radians(angle));

  pos.add(width / 2, height / 2);

  // Calculate this frame's velocity.

  let vel = new p5.Vector(pos.x, pos.y);

  vel.sub(lastPos);

  // Spawn sparks.

  for (let i = 0; i < particlesPerFrame; i++) {

    particles.push(new Spark(pos.x, pos.y, vel.x, vel.y));

  }

  // Spawn particles lines.

  vel.normalize();

  for (let i = 0; i < particleLinesPerFrame; i++) {

    particles.push(new ParticleLine(pos.x, pos.y, vel.x, vel.y));

  }

  // Move, draw, and kill all particles.

  for (let i = particles.length - 1; i > -1; i--) {

    particles[i].move();

    particles[i].draw();

    if (particles[i].vel.mag() < 0.1) {

      particles.splice(i, 1);

    }

  }

}

​

function mouseClicked() {

  newColorScheme();

}

​

function newColorScheme() {

  colorMode(HSB, 255);

  colorScheme = [];

  let mainHue = random(255);

  let colorCount = 5;

  for (let i = 0; i < colorCount; i++) {

    colorScheme.push(

      color(

        constrain(mainHue + random(-20, 20), 0, 255), 

        map(i, 0, colorCount - 1, 255, 0), 

        255));

  }

  colorMode(RGB, 255);

}