p5创意编程

创意编程"/>

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);
}