p5.js对动态图形的原创创作

继续上一个p5.js的专栏，这次来画原创自画像。

因为上一次临摹图时采用了“rotate”语句，感受到了恶意。横向对比，临摹相同图的代码量高达900行，较于其他人的20行什么的，过程上十分难受。

不过，在学习“rotate”的过程中，找到了Fibonacci函数可以画出螺旋图形。

努力不能白费，我打算用Fibonacci函数画出精神污染的图形。

此为转动的Fibonacci螺旋的代码，现在我们让它更恶心（变多）一些。

rotate(-PI / x* frameCount);

用这个来控置旋转速度。

translate(300, 300);

  rotate(-PI / x* frameCount);

  for( var i = 0; i < 20; i ++){

    var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];

    Fibonacci.push(a);

    arc(0,0,a * 2,a * 2,0,PI / 2);

    rotate(PI / 2);

    translate(-Fibonacci[i-1],0);

我把其中“x”设置为参数，并用以下代码进行多重设置

for(b=5;b<20;b=b+0.5){

再把背景和线条搞成让人不适的颜色

background(220,0,140);

stroke(0,200,130);

嗯，紫色和绿色。

以下是全部代码。

function setup(){

  createCanvas(600,600);

  background(255);

  frameRate(10);

}

function draw(){

  let b=-PI/4;

  background(220,0,140);

  stroke(0,200,130);

  noFill();

  strokeWeight(10);

  push();

  fi(5);

  pop();

  for(b=5;b<20;b=b+0.5){

    

  push();

 

  fi(b);

  pop();

    b=b+0.5

  }

  

 

  

}

function fi(x){

 

  translate(300, 300);

  rotate(-PI / x* frameCount);

  for( var i = 0; i < 20; i ++){

    var a = i <= 1 ? 1 : Fibonacci[i-1] + Fibonacci[i-2];

    Fibonacci.push(a);

    arc(0,0,a * 2,a * 2,0,PI / 2);

    rotate(PI / 2);

    translate(-Fibonacci[i-1],0); 

  }

}

function windowResized(){

  resizeCanvas(windowWidth, windowHeight);

}

我们看看效果