使用带有 p5js 的顶点组件的粉笔轮廓

Question

我正在尝试使用 p5js 的顶点组件在 body 上绘制粉笔轮廓。下面是一张图片，显示了在相关图片和我当前的代码上绘制轮廓的尝试。我是编码新手。请使用基本术语。

var img;

function preload()
{
    img = loadImage('scene.png');
}

function setup()
{
    createCanvas(img.width,img.height);
}

function draw()
{

    image(img,0,0);
    stroke(255, 0, 0);
    strokeWeight(3);
    noFill();

    // write the code to draw around the Judge's body below

    beginShape();
    
    vertex(900,800)
    vertex(150,100)
    vertex(400,600)
    vertex(250,400)
    vertex(300,200)
    vertex(75,90)
    
    endShape();
}

Answer 1

不幸的是，你基本上必须用一堆点手动绘制轮廓，就像你到目前为止所做的那样（有自动完成的方法，但我所知道的唯一需要一些非常高级的方法技术）。下面是一些代码，可以帮助您确定在哪里画点：

let vertexList = [];
let img;

function preload() {
  img = loadImage("scene.png");
}

function setup() {
  createCanvas(img.width, img.height);
}

function draw() {
  image(img, 0, 0);
  stroke(255, 0, 0);
  strokeWeight(3);
  noFill();
  
  //draw the current outline
  
  beginShape();
  for (let vert of vertexList) {
    vertex(vert.x, vert.y);
  }
  endShape();
}

function mousePressed() {
  vertexList.push(createVector(mouseX, mouseY));
}

function keyPressed() {
  print('beginShape();');
  for (let vert of vertexList) {
    print('vertex(' + str(vert.x) + ', ' + str(vert.y) + ');');
  }
  print('endShape();');
}

使用说明：点击所有要绘制的点，然后按任意键。所需的代码将打印到控制台，因此只需将其复制并粘贴到您的代码中（替换您当前的 beginShape();...endShape();）。

如果您不满意，通常可以使用键盘快捷键来调整缩进。在网络编辑器中，它是 Ctrl + Shift + f.

使用带有 p5js 的顶点组件的粉笔轮廓

Chalk outline using vertex component with p5js

p5.js