P5.JS入门编程

P5.JS入门编程

   首次接p5.js是在互动媒体技术这门课上的，感觉还是蛮有趣的东西。大家也可以学着进行些自己的创意，用代码码出一副漂亮的作品，如果是初次接触p5.js的同学，推荐先看一下我们老师的博客[link]https://me.csdn.net/magicbrushlv 会更快的带你入门 
	接下来，介绍一下我初次接触p5.js临摹的作品。

了解p5.js

在图中，每一个分号结尾的一行字符就是一个”语句“，其实就是表达了做了一个小的步骤。

而每一行以双斜杠“//”为起始的一行字符就是一行“注释”，它不是实际执行的内容，而是用于解释代码。事实上，因为它不会在程序运行中实际地执行，写任何内容都不会对执行效果产生影响，但是写错误地内容会对理解这段程序制造人为障碍。因此，写注释也要注意，应该做到对代码的正确解释。

此外，上述代码可以明确分解为两个独立地段落，即：

function setup() {
// 1. 准备阶段
// …代码略
}

function draw() {
// 2. 绘制阶段
// …代码略
}

我的代码

  createCanvas(400, 400,WEBGL);
}
function boxc(x,y,z,r){
//  rotateY(r);
  translate(x,y,z);
 rotateY(r);
  box(120,12,120);
  //rotateY(-r);
  //translate(-x,-y,-z);
}
  var i=0;
function draw() {
  background(0);

  let c = color(255, 250, 235); // Define color 'c'
  fill(c);
  lights();
  noStroke();
  smooth();
 
 // push();
    
  for(j=0;j<10;j++){
    push();
    
    var n,t,p;
   // p=2;
    p=PI*i/180+PI*j/25;
    if(p>2*PI){
      p=p-2*PI;
      if(PI<p<2*PI){
        p=p-PI;
        if(PI/2<p<PI){
          p=p-PI/2;
        }
      }
    }
        
    n=sin(p)*sin(p);
    t=(PI/2*sqrt(n));
    boxc(0,-48+12*j,0,t);
    pop();
  }
  
  i++;
//if(i==89) i=0;
}

效果如图

这里有几点需要注意：
1、其实最主要的就是计算他的旋转函数，我采用的是sin类型的函数，来实验每个小方块转动的速度由小到大再到0， 具体看上面的代码，之所以写了那么长是因为我其实想让他之绕一个方向转，然而不知道为什么没有实现，写那么长是为了保障sin里的都是正数。
2、推荐自己写一个function函数来实验建图和旋转。
3、在建3D模型的时候学会用push/pop函数

具体的函数用法请参考说明文档

几个较为重要的函数说明文档如下
noStroke()[link]https://p5js.org/zh-Hans/reference/#/p5/noStroke
box()[link]https://p5js.org/zh-Hans/reference/#/p5/box
translate()[link]https://p5js.org/zh-Hans/reference/#/p5/translate
rotateY()[link]https://p5js.org/zh-Hans/reference/#/p5/rotateY
lights()[link]https://p5js.org/zh-Hans/reference/#/p5/lights
smooth()[link]https://p5js.org/zh-Hans/reference/#/p5/smooth
push()[link]https://p5js.org/zh-Hans/reference/#/p5/push