【项目推荐】一个在网页上编写代码以画图的编辑器P5.js-web-editor

[RuimingShen]

推荐项目

• 项目地址：https://github.com/processing/p5.js-web-editor

• 类别：JS

• 项目标题：p5.js-web-editor

• 项目描述：利用p5自己的在线网页编辑器，使用sketch.js来编写代码，并生成图形，p5也自己制作了一些可供调用的方法，这也可以让人和生成的图形进行交互，比如说keyisDown()方法可以让生成的图形对按下屏幕的按键做出反应。详细的p5自研方法在p5网站的reference部分。

• 亮点：可以通过p5独创的方法描绘图形并进行交互。

• 示例代码：（可选）

let y = 100;

function setup() {
  createCanvas(512, 512);
  fill(255, 0, 0);
}

function draw() {
  if (keyIsDown(LEFT_ARROW)) {
    x -= 5;
  }

  if (keyIsDown(RIGHT_ARROW)) {
    x += 5;
  }

  if (keyIsDown(UP_ARROW)) {
    y -= 5;
  }

  if (keyIsDown(DOWN_ARROW)) {
    y += 5;
  }

  clear();
  ellipse(x, y, 50, 50);
  describe(`50-by-50 red ellipse moves left, right, up, and
    down with arrow presses.`);
}

• 截图：（可选）gif/png/jpg

• 后续更新计划：