互动媒体技术——创意编程
临摹的动态图是
首先我是把它看成n个四分之一圆来看的 也就是需要画90度的圆弧
同一个角度的为一组的话一共可以画四组 计算好坐标位置 不过我的坐标算的太小了 应该算大一点的
还要注意每个扇形的颜色都不是一样的 对称的扇形颜色相同 都要单独考虑
然后原图中的每一颗扇形都是独立旋转的，可以使用push()和pop()函数来对每个扇形进行“隔离”。
push()函数相当于新建了一个状态，而pop()函数则是回到创建新状态之前的状态。
使用translate()函数使画布的原点移动到扇形的中心位置，这样才能使扇形围绕自身原点旋转
要注意扇形之间旋转的先后和速度的不同 可以通过改变millis()的值和rotateZ(millis() / 200);的值来实现
最后的成果图是这样的（动图就不放了）
代码如下
function setup() {
createCanvas(400, 400,WEBGL);
}
function draw() {
background(0);
push();
translate(0,0);
rotateZ(millis() / 200);
fill(255,255,0);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(100,0);
rotateZ(millis() / 200);
fill(0,139,139);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(50,50);
rotateZ(millis() / 200);
fill(0,139,139);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(0,100);
rotateZ(millis() / 200);
fill(0,139,139);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(50,150);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(100,100);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(150,50);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(150,150);
rotateZ(millis() / 200);
fill(220,20,60);
arc(0, 0, 50, 50, 0, HALF_PI);
pop();
push();
translate(50,50);
rotateZ(millis() / 200);
fill(0,139,139);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(50,150);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(100,100);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(150,50);
rotateZ(millis() / 200);
fill(128,0,128);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(150,150);
rotateZ(millis() / 200);
fill(220,20,60);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(200,100);
rotateZ(millis() / 200);
fill(220,20,60);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(100,200);
rotateZ(millis() / 200);
fill(220,20,60);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(200,200);
rotateZ(millis() / 200);
fill(255,255,0);
arc(0, 0, 50, 50, PI, -HALF_PI);
pop();
push();
translate(50,0);
rotateZ((millis()+500)/ 500);
fill(124,252,0);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(50,100);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(100,50);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(150,0);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(100,150);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(200,50);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(150,100);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(200,150);
rotateZ((millis()+500)/ 500);
fill(255,165,0);
arc(0, 0, 50, 50, HALF_PI, PI);
pop();
push();
translate(0,50);
rotateZ((millis()+500)/ 500);
fill(124,252,0);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(0,150);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(50,100);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(100,50);
rotateZ((millis()+500)/ 500);
fill(30,144,255);
arc(0,0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(150,100);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(100,150);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(50,200);
rotateZ((millis()+500)/ 500);
fill(255,0,255);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
push();
translate(150,200);
rotateZ((millis()+500)/ 500);
fill(255,165,0);
arc(0, 0, 50, 50, -HALF_PI, 0);
pop();
}
拓展
由扇形旋转联想到扇形和矩形的搭配旋转 代码如下
function setup() {
createCanvas(500, 500);
noStroke();
rectMode(CENTER);
l = dist(a * 1.5, a * 0.5, 0, 0) / sqrt(2);
th = QUARTER_PI - atan2(1.5, 0.5);
frameRate(50);
// stroke(255,0,0);
}
var a = 80;
var d = 2 * a;
var l, th, t;
function draw1(q) {
fill(32);
for (var i = 0; i < 4; i++) {
push();
rotate(HALF_PI * i);
ellipse(l, l, d, d);
pop();
}
fill(250);
push();
rotate(th - HALF_PI * q);
cross();
pop();
}
function draw2(q) {
fill(32);
for (var i = 0; i < 4; i++) {
push();
rotate(HALF_PI * i);
translate(l, l);
rotate(-HALF_PI + th * (1 - q));
arc(0, 0, d, d, 0, TWO_PI * 3 / 4, PIE);
pop();
}
}
function draw3(q) {
fill(32);
for (var i = 0; i < 4; i++) {
push();
rotate(HALF_PI * i);
ellipse(l, l, d, d);
pop();
}
fill(250);
push();
rotate(HALF_PI * q);
rect(0, 0, 2 * l, 2 * l);
pop();
}
function draw4(q) {
fill(32);
for (var i = 0; i < 4; i++) {
push();
rotate(HALF_PI * i);
translate(l, l);
rotate(-HALF_PI + q * th);
arc(0, 0, d, d, 0, TWO_PI * 3 / 4, PIE);
pop();
}
}
function ease(q) {
q = 3 * q * q - 2 * q * q * q;
return 3 * q * q - 2 * q * q * q;
}
function cross() {
rect(0, 0, 3 * a, a);
rect(0, 0, a, 3 * a);
}
function draw() {
t = (0.007 * frameCount) % 1;
background(250);
push();
translate(width / 2, height / 2);
if (t < .35)
draw1(ease(map(t, 0, .35, 0, 1)));
else if (t < .5)
draw2(ease(map(t, .35, .5, 0, 1)));
else if (t < .85)
draw3(ease(map(t, .5, .85, 0, 1)));
else
draw4(ease(map(t, .85, 1, 0, 1)));
pop();
}
