//phongmusic.com

//@phongmusic

​

// recording and general setup variables

var t = 0;

var startMillis;

var duration = 5000; //duration in milliseconds

var fps = 60;

var recording = false;

var preview = false;

var elapsed;

​

// init

function setup() {

    createCanvas(700, 700);

    frameRate(fps);

    if (recording) {

        capturer.start();

    }

    setup_();

}

​

// control draw

function draw() {

​

    //reset millisecond counter on 1st draw

    if (startMillis == null) {

        startMillis = millis();

    }

    //seekbar -- preivew on, mouse acts as seek; off means play normal 

    if (preview) {

        elapsed = map(mouseX,0,width,0,duration);

    } else {

        elapsed = millis() - startMillis;

    }

​

    //play or record

    if (recording) {

        t = map(elapsed, 0, duration, 0, 1);

        draw_();

        if (t > 1) {

            noLoop();

            console.log('finished recording');

            capturer.stop();

            capturer.save();

            return;

        }

    } else {

        t = (elapsed/duration) % 1; 

        draw_();

    }

​

​

​

​

}

​

/////////////////////////////////////////////////////////////

​

///// Make array for start, array for end, and use map on t

​

​

//sketch globals

​

//beginning and end positions

var start = [];

var end = [];

var vel = [];

var antivel = [];

var pos = [];

var c1 = 100;

var c2 = 0;

​

//number of objects

var numObj = 100;

​

//size

var r = 10;

​

function setup_() {

    colorMode(HSB,100);

​

​

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

        let x = random(-width-(r*2),-r*2);

        let y = random(height);

        let loc = createVector(x,y);

        start.push(loc);

        pos.push(loc);

    }

​

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

        let x = random(width+(2*r),2*width+r);

        let y = random(height);

        let loc = createVector(x,y);

        end.push(loc);

    }

​

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

        let v = p5.Vector.sub(end[i],start[i]);

        let a = p5.Vector.sub(start[i],end[i]);

        antivel.push(a);

        vel.push(v);

    }

​

}

​

​

//actual draw function

function draw_() {

    colorswap();

    background(0,50,100);

    fill(0,0,0);

    noStroke();

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

        let x = map(ease(t), 0, 1, start[i].x, end[i].x);

        let y = map(ease(t), 0, 1, start[i].y, end[i].y);

        segment(x, y, vel[i].heading(),r);

    }

    fill(0,0,100);

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

        let x = map(ease(1-t), 0, 1, start[i].x, end[i].x);

        let y = map(ease(1-t), 0, 1, start[i].y, end[i].y);

        segment(x, y, antivel[i].heading(),r);

    }

    push();

    translate(width/2,height/2);

    noStroke();

    let c = map(sin(t*PI),-1,1,0,100);

    fill(0,0,c2);

    segment(100*cos((ease(t)*TWO_PI)+PI/2),100*sin((ease(t)*TWO_PI)+PI/2), (ease(t)*TWO_PI)+PI/2+PI/2, r);

    fill(0,0,c1);

    segment(100*cos(((ease(t)+1/2)*TWO_PI)+PI/2),100*sin(((ease(t)+1/2)*TWO_PI) + PI/2), ((ease(t)+1/2)*TWO_PI)+PI/2 +PI/2, r);

    pop();

}

​

function segment(x, y, i, s) {

    let theta = i + PI/2;

    push();

    translate(x,y);

    rotate(theta);

    beginShape();

    vertex(0, -s*2);

    vertex(-s, s*2);

    vertex(s, s*2);

    endShape(CLOSE);

    pop();

}

​

function ease(p) {

    return 3*p*p - 2*p*p*p;

}

​

function colorswap() {

    c1 = map(cos(ease(t)*TWO_PI),-1,1,100,0);

    c2 = map(cos(ease(t)*TWO_PI),-1,1,0,100);

}