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

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()。