p5.js“yundong”主题

应作业要求，利用p5.js制作一个码绘的简单的太阳落山动图

1. let sun_y=100
   function setup() {  
     createCanvas(480, 420)
    }
   function draw() {
       sun_y += 1
       if(sun_y==420){
           sun_y=1
       }
       background(204);  
       // 绘制一个太阳
       fill(255,0,0)
       stroke(255, 255, 0)
       strokeWeight(6)
       ellipse(360, sun_y, 100, 100)
       // 开始绘制山的图形
       // 设置颜色为灰色
       fill(45,45,45)
       stroke(0, 0, 0)
       strokeWeight(1)
       beginShape()
       vertex(0,420)
       vertex(10, 340)
       vertex(40, 400)
       vertex(80, 320)
       vertex(110, 380)
       vertex(260, 350)
       vertex(360, 410)
       vertex(400, 310)
       vertex(480, 420)
       // 结束绘制图形
       endShape()
   }

这段代码实现出来的效果

看起来太单调，于是去官网找了一些例子，准备加一个背景，找来找去，发现只有一个还可以，稍作改动，加上来，变成这样

1. let snowflakes = []; // array to hold snowflake objects
   let sun_y=100
   function setup() {
     createCanvas(400, 420);
     fill(240);
     noStroke();
   }
   
   function draw() {
   	 
     //background('brown');
   	sun_y += 1
       if(sun_y==420){
           sun_y=1
       }
       background(204);  
       // 绘制一个太阳
       fill(255,0,0)
       stroke(255, 255, 0)
       strokeWeight(6)
       ellipse(360, sun_y, 100, 100)
       // 开始绘制山的图形
       // 设置颜色为灰色
       fill(45,45,45)
       stroke(0, 0, 0)
       strokeWeight(1)
       beginShape()
       vertex(0,420)
       vertex(10, 340)
       vertex(40, 400)
       vertex(80, 320)
       vertex(110, 380)
       vertex(260, 350)
       vertex(360, 410)
       vertex(400, 310)
       vertex(480, 420)
       // 结束绘制图形
       endShape()
      fill(255);
     let t = frameCount / 60; // update time
   
     // create a random number of snowflakes each frame
     for (var i = 0; i < random(5); i++) {
       snowflakes.push(new snowflake()); // append snowflake object
     }
   
     // loop through snowflakes with a for..of loop
     for (let flake of snowflakes) {
       flake.update(t); // update snowflake position
       flake.display(); // draw snowflake
     }
   }
   
   // snowflake class
   function snowflake() {
     // initialize coordinates
   	var colorChange = random(0, 5);
     this.posX = 0;
     this.posY = random(-50, 0);
     this.initialangle = random(0, 2 * PI);
     this.size = random(2, 5);
   
     // radius of snowflake spiral
     // chosen so the snowflakes are uniformly spread out in area
     this.radius = sqrt(random(pow(width / 2, 2)));
   
     this.update = function(time) {
       // x position follows a circle
       let w = 0.6; // angular speed
       let angle = w * time + this.initialangle;
       this.posX = width / 2 + this.radius * sin(angle);
   
       // different size snowflakes fall at slightly different y speeds
       this.posY += pow(this.size, 0.5);
   
       // delete snowflake if past end of screen
       if (this.posY > height) {
         let index = snowflakes.indexOf(this);
         snowflakes.splice(index, 1);
       }
     };
   
     this.display = function() {
       ellipse(this.posX, this.posY, this.size);
     };
   }

虽然说有太阳还下雪有点奇怪，本来是想营造那种星星点点闪闪发光的背景，结果技术不够，就只能呈现雪的效果，总归是比原来丰富一点

然后手绘的样子大概长这样

手绘如果想展现一个动作，要利用连续的几幅图来表示过程（当然我这个过于简单了），而码绘可以直观动态的展现动图，但是码绘的线条过于生硬，这是比手绘有所不如的地方。

手绘绘图灵活方便，主观影响性较大，一些个人技法的运用不受限制，小灵感来了，也能及时记录下来，受众广泛，不过要想画出好看的图，还是需要一些时间来训练技巧；用p5.js代码绘图简单，入门快，比较客观，可以直接调用现成的函数，画一些简单的图，还是比较容易掌握，函数的熟练运用比较难，特别是一些自己算法的编写，还有代码调整比较麻烦，有时候会出现与自己预料不一样的结果。
​

​​

​

以上，就是此次作画过程中，我个人的体验了