在 p5js 中以实例模式创建图形

Question

我是 p5 的新手。

我的目标是显示我键入的键的 ASCII 值，并留下一条垂直线的轨迹，其与左边的距离为 200+键的 ASCII 值，

这可以使用 createGraphics() 完成（在顶部添加一个额外的 canvas 层，其尺寸与原始层相同，并在该额外的 canvas 层上绘制）

但代码似乎无法正常工作，而且它也没有在控制台中显示任何错误。

const c5=function(p){

let pg;

p.setup=function(){
    p.createCanvas(600,400);
    pg=p.createGraphics(600,400);
};

p.draw=function(){
    p.background(200);
    p.textAlign(p.CENTER,p.TOP);
    p.textSize(20);
    p.text('ASCII Value : '+p.keyCode,300,100);

    pg.line(200+p.keyCode,200,200+p.keyCode,300);//shift right by 200
};

};

Answer 1

第一个问题是你必须告诉引擎你命名为 p 的东西实际上是一个 p5 实例。您可以使用 new p5(...) 构造一个 p5 对象，如下所示：

const c5 = new p5(function(p) {

  p.setup = function(){
      ...
  };

  p.draw = function(){
      ...
  };
});

然后您可以用垂直线正确填充 pg 图形对象。但是，您没有 "draw" 它在您原来的 canvas 上。您可以使用 p5.js image() 函数执行此操作（另请参阅 createGraphics() documentation 中显示的示例）。

我在 p5.js 编辑器 here 中做了一个工作示例 here。

Answer 2

您的代码非常接近。您正在创建图形对象并向其绘图，但您还需要将其作为图像显示给 canvas。在您的代码片段中，您还缺少创建新 p5js 对象的调用，但这可能只是复制粘贴错误。

这是您的代码的工作片段，其中包含绘制图像的调用。我还将按键检测逻辑移至 keyPressed，因此逻辑仅在按下按键时运行。

另请注意，运行 keyPressed 中的逻辑允许草图通过返回 false 并防止默认行为来处理 f5 等键。在实际应用程序中，我们需要非常小心地覆盖默认行为。这里我们假设用户想知道 f5 键的键码并且页面不重新加载就可以了。在实际应用中可能并非如此。

const c5=function(p){

let pg;

p.setup=function(){
    p.createCanvas(600,400);
    pg=p.createGraphics(600,400);
};

p.draw=function(){

};

p.keyPressed = function() {
    p.background(200);
    p.textAlign(p.CENTER,p.TOP);
    p.textSize(20);
    p.text('ASCII Value : '+p.key + " " +p.keyCode,300,100);
    pg.line(200+p.keyCode,200,200+p.keyCode,300);//shift right by 200
    p.image(pg, 0, 0);
   
  return false; // prevent default
}


};
var myp5 = new p5(c5)

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

在 p5js 中以实例模式创建图形

createGraphics in Instance Mode in p5js

p5.js