临摹作品并进行拓展

首先我选择的是点型三叶草进行临摹

原图：

点型三叶草

临摹：

临摹后的点型三叶草

所用代码：

function setup() {

  createCanvas(540, 540);

    noStroke();

    colorMode(HSB, 1);

}

var N = 10,

    n = 6;

var th, r, t;

var speed = 7e-4;

function draw()

{

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 + 0.065 * j);

            ellipse(r, 0, 10 + 0.5 * j, 10 + 0.5 * j);

            pop();

        }

    }

    pop();

}

//每个小球都在做正弦运动，且时间间隔相同

//轨道轮廓运用椭圆elipse呈现出相关形状

//颜色按彩虹色渐变

拓展：

点型花朵

改变相关系数可让四叶草编程花朵形状

代码：

function setup() {

  createCanvas(540, 540);

    noStroke();

    colorMode(HSB, 1);

}

var N = 20,

    n = 10;

var th, r, t;

var speed = 7e-4;

function draw()

{

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(5 * th + TWO_PI * t + 0.065 * j);

            ellipse(r, 0, 10 + 0.5 * j, 10 + 0.5 * j);

            pop();

        }

    }

    pop();

}