p5创意编程

p5.js是一套具有类似Processing编程语言的可视化JavaScript库，是当代Web的Processing，能够比得上甚至优于D3.js、EaselJS、Three.js、 Raphaël、 KineticJS、Paper.js、Famo.us，或者是Impact等类库。

p5.js有完整的一套画图功能，既可当作画图软件使用，也包括支持与各类页面元素交互的库。然而，开发者没有被限制自己的画布上，他们可以把整个浏览器 页面作为自己的素描区域。正因为如此，P5.js有一个插件库能够使得开发者非常容易地与其它HTML5对象（包括文本、输入、视频、网络摄像头和声音） 进行交互。

临摹作业
运动规律

小球从中间往外运动，运动到设定的终点之后就弹回

代码

function setup() {
  createCanvas(540, 540);
    noStroke();
    colorMode(HSB, 1);
}

var N = 16,
    n = 6;
var th, r, t;
var speed = 7e-4;

function draw() {
  background(220);
  t = (Date.now() * speed) % 1;
    console.log(t);
    background(0);
    push();
    translate(width / 2, height / 2);
    for (var i = 0; i < N; i++) {
        for (var j = 0; j < n; j++) {
            fill(i / N, 1, j / n);
            push();
            th = TWO_PI * i / N;
            rotate(th);
            r = 130 + 90 * cos(3 * th + TWO_PI * t +.065 * j);
            ellipse(r, 0, 10 + .5 * j, 10 + .5 * j);
            pop();
        }
    }
    pop();
}

拓展
旋涡

var ticker = void 0;
var positions = void 0;
var nrOfCircles = void 0;

function setup() {
    noFill();
    ticker = 0;
    positions = [];
    nrOfCircles = 200;
    for (var i = 0; i < nrOfCircles; i++) {
        addPosition();
    }
    createCanvas(windowWidth, windowHeight);
}

function addPosition() {
    var pos = getPosition();
    positions.unshift(pos);
    ticker += 0.01;
}

function getPosition() {
    var xOffset = (noise(ticker) - 0.5) * windowWidth * 0.5;
    var yOffset = (noise(ticker + 1000) - 0.5) * windowHeight * 0.5;
    return [xOffset, yOffset];
}

function draw() {
    clear();
    strokeWeight(1);
    translate(windowWidth / 2, windowHeight / 2);
    var m = max(windowWidth, windowHeight) * 1.8;
    var stepSize = m / nrOfCircles;
    var r = 1;
    positions.forEach(function(p) {
        ellipse(p[0], p[1], r, r);
        r += stepSize;
    });
    addPosition();
    positions.pop();
}

function drawCircle() {

}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}