互动媒体技术——创意编程

临摹的动态图是

首先我是把它看成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();

}