P5

基础代码

主要有两个起始函数:

  • 程序开始时,setup() 函数中的语句执行一次

  • draw() 中的语句一直执行到程序停止为止。每个语句都按顺序执行,并且在读取最后一行之后,将再次执行第一行

  • draw() 函数中的代码从上到下连续运行,直到程序停止。

function setup() {
  // put setup code here
}

function draw() {
  // put drawing code here
}
  • createCanvas(width, height): 例 createCanvas(800,600)

  • noLoop() 函数使 draw() 只执行一次, 如果不调用 noLoop()draw() 内的代码会持续运行。

  • redraw() 函数使 draw() 执行一次。在这个例子中,draw() 将在每次点击鼠标时执行一次。

形状

Points 与 lines 可用于绘制基本几何。 更改变量 'd' 的值以缩放外形。这四个变量根据 'd' 的值设置位置。

基本形状的原始函数包括:

  • triangle() — 三角形

  • rect() - 正方形

  • quad() - 四边形

  • ellipse() - 圆形

  • arc() - 弧形 方块是通过 rect() 绘制, 圆形是通过 ellipse() 来绘制。每个功能都需要一些参数来确定形状的位置和大小。

正多边形函数

function polygon(x, y, radius, npoints) {
  var angle = TWO_PI / npoints;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius;
    var sy = y + sin(a) * radius;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

Star

star() 函数能够绘制各种不同的形式

五角星: star(0, 0, 30, 70, 5);

function star(x, y, radius1, radius2, npoints) {
  var angle = TWO_PI / npoints;
  var halfAngle = angle/2.0;
  beginShape();
  for (var a = 0; a < TWO_PI; a += angle) {
    var sx = x + cos(a) * radius2;
    var sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a+halfAngle) * radius1;
    sy = y + sin(a+halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}

Last updated