动态图形临摹

主题

从参考资料中的“动态图形艺术”中选取不少于1幅作品，用编程方式临摹，并进行拓展。

临摹

图像效果：

动态的由鼠标进行操作，直接复制链接打开显示会好一些，截图展示的只是一部分。

链接：https://editor.p5js.org/couchpotatooo/full/XZkg_hRjC

动态图形临摹

实现代码

背景画布设置

function setup() {
   createCanvas(windowWidth, windowHeight);
   angleMode(DEGREES);
   centerX = width/2;
   centerY = height/2;
   shuffleNumSlices();
   fill(255);
   stroke(0, 0, 0, 0);
   }

shuffleNumSlices()函数定义如下：

function shuffleNumSlices() {
numSlices =  Math.ceil(Math.random() * (maxNumSlices - 1)) + 1;
}

定义变量:

var diameter = 1;
var diameterStep = 1.5;
var centerX;
var centerY;
var numSlices = 8;
var maxNumSlices = 12;
var numPositions = 25;
var positions = [];

绘制函数：

function draw() {
   background(220);
   positions.unshift({ x: mouseX, y: mouseY });
   positions.splice(numPositions, 100);
   translate(width/2, height/2);
   background(0);
   for (var i = 0; i < numSlices; i++) {
    drawPoints(positions);
    rotate(360 / numSlices);
    }
  }

drawPoints()方法：

function drawPoints(xs) {
  for (var i = xs.length - 1; i >= 0; i--) {
    var positions = xs[i];
    var x = positions.x;
    var y = positions.y;
    var dia = diameter + diameterStep * (numPositions - i);
    fill(255, 255, 255, 255 * (1 - i / numPositions));
    ellipse(x - centerX, y - centerY, dia, dia);
  }
  }

参考资料

链接:https://pan.baidu.com/s/1Oz2WFUHkxGNuU0HYrC_s_g

密码:993r

拓展延伸

看了一些例子，画了一个可以旋转的风车，主要是由一根直线和四个半圆组成，为了美观，给四个半圆用不同的颜色填充。风车的四个半圆旋转时，每次都是转30度，旋转时风车的半径也有相应的变化（x=300+100cos(w0+w),w是各半圆起始时的角度，y=300+100sin(w0+w)。）。

结果展示

链接：https://editor.p5js.org/couchpotatooo/full/Hz61kG3wB

截图：

动态图形临摹

代码实现

首先，画布设置

function setup() {
  createCanvas(800, 640);
  frameRate(10);
    noStroke();
    }

画一个风车，由一根直线和4个半圆组成，用不同的颜色填充半圆。变量初始化，将本来的数字用变量来替代，便于后面旋转的实现，如果还是像上面一样用固定的坐标，风车就不能旋转。

var x1=400;
var y1=300;
var x2=200;
var y2=300;
var x3=300;
var y3=200;
var x4=300;
var y4=400;
var w=Math.PI/6;
var w1=Math.PI;
var w2=2*Math.PI;
var w3=0;
var w4=Math.PI;
var w5=1.5*Math.PI;
var w6=0.5*Math.PI;
var w7=0.5*Math.PI;
var w8=1.5*Math.PI;
//旋转角度
var w0=0;

画风车

function draw() {
  background(255);
  fill(0);
    rect(300,300,10,400);//一条竖线
  fill(255,0,0);//红色
    arc(x1, y1, 200, 200, w1, w2);//半圆 
  fill(0,0,255);
    arc(x2, y2, 200, 200, w3, w4);//半圆
  fill(0,255,0);
    arc(x3, y3, 200, 200, w5, w6);//半圆
   fill(255,255,0);
    arc(x4, y4, 200, 200, w7, w8);//半圆

实现旋转

w0=w0+w;
    w1=Math.PI+w0;
    w2=2*Math.PI+w0;
    w3=w0;
    w4=Math.PI+w0;
    w5=1.5*Math.PI+w0;
    w6=0.5*Math.PI+w0;
    w7=0.5*Math.PI+w0;
    w8=1.5*Math.PI+w0;
    
    x1=300+100*Math.cos(w0);
    x2=300+100*Math.cos(w0+Math.PI);
    x3=300+100*Math.cos(w0+0.5*Math.PI);
    x4=300+100*Math.cos(w0+1.5*Math.PI);
    y1=300+100*Math.sin(w0);
    y2=300+100*Math.sin(w0+Math.PI);
    y3=300+100*Math.sin(w0+0.5*Math.PI);
    y4=300+100*Math.sin(w0+1.5*Math.PI);
    }

总结

初次接触码绘，在网上参考了很多实例吸取了很多经验，学到很多有用的知识，深切地体会到码绘的方便与趣味。

动态图形临摹