在 canvas 旋转时绘制 p5.js canvas

Question

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

我已经创建了手臂相对于电机位置的定位。我试图重新创建的想法是保持 pencil/pen 静止并使用它在下面旋转的 canvas 上绘制。我在 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 are being drawn and, depending on the speed of the rotation or of the blue dot(if it's movable), the trail won't be continuous. To achieve that, I would start to keep track of the previous positions of the blue dot and use something like line() 而不是 point()。

在 canvas 旋转时绘制 p5.js canvas

Drawing on p5.js canvas while canvas is rotating

canvas

p5.js