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


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

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

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

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

background(255);

 stroke(0);

 noFill();

 strokeWeight(5);

 translate(windowWidth/2, windowHeight/2);

 rotate(-PI / 6 * 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);


此为转动的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);

}

我们看看效果


可以,够精污了


本文为我原创

本文禁止转载或摘编

-- --
  • 投诉或建议
评论