Question

我正在使用p5.js模拟绘图机，类似于this。

我已经创建了手臂相对于电机位置的位置。我尝试重新创建的想法是静止不动地握住铅笔/笔，并用它在下面的旋转画布上绘画。我在p5.js编辑器中创建了一个测试example。

example绘制两个点，一个红色和一个蓝色。目标是使用下面旋转的图形对象上的蓝点创建标记或痕迹。

    function setup() {
        createCanvas(400, 400);
        background(255);
        img = createGraphics(200, 200);
        img.background(150);
        img.strokeWeight(3);
        //rectMode(CENTER);
      }

      function draw() {
        background('lightYellow');
        translate(100, 100);
        img.background('lightBlue');
        img.push();
          img.translate(100, 100);
          img.rotate(radians(frameCount));
          img.fill(240);
          img.noStroke();
          img.rect(-50, -50, 100, 100);
          img.strokeWeight(4);
          img.stroke('red');
          img.point(20, 20);
        img.pop();

        img.stroke('blue');
        img.strokeWeight(4);
        img.point(100, 80);
        image(img, 0, 0);
      }

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

在我当前的示例中有没有办法做到这一点，或者我应该尝试其他尝试吗？

Answer 1

实现示例草图所需的一种方法是使图形对象和草图以相同的速率旋转。我重写了一些代码以实现该目标，但是遵循它应该没什么不同：

let rotatingRect;

function setup(){
  createCanvas(400, 400);
  
  rotatingRect = createGraphics(100, 100);
  rotatingRect.background(240);
  rotatingRect.strokeWeight(4);
  rotatingRect.stroke('red');
  rotatingRect.point(20, 20);
}

function draw(){
  
  noStroke();
  background('lightyellow');
  fill('lightblue');
  rect(100, 100, 200, 200);
  
  rotatingRect.stroke('blue');
  
  push();
    translate(200, 200);
    rotate(radians(frameCount));
    
    rotatingRect.push();
      rotatingRect.translate(50, 50);
      rotatingRect.rotate(-radians(frameCount));
      rotatingRect.point(mouseX-200, mouseY-200);
      //rotatingRect.point(0, -10);
    rotatingRect.pop();
  
    image(rotatingRect, -50, -50);
  pop();
  
}

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

另一件事是，蓝点的位置由鼠标确定。您可以通过注释rotatingRect.point(mouseX-200, mouseY-200);行并使用rotatingRect.point(0, -10);来更改此行为。值得注意的是，points正在绘制，并且取决于旋转速度或蓝点（如果它是可移动的）的速度，轨迹将不会连续。为此，我将开始跟踪蓝点的先前位置，并在最后一个位置和当前位置之间使用line()之类的符号代替point()。

在画布旋转的同时在p5.js画布上绘图

1 个答案: