在画布旋转时在p5.js画布上绘制 [英] Drawing on p5.js canvas while canvas is rotating

问题描述

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

我已经创建了手臂相对于电机位置的定位。我试图重现的想法是拿着一支铅笔/钢笔，用它在下面旋转的画布上画画。我在p5.js编辑器中创建了一个测试example。

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

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

    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>

对于我当前的示例，有什么方法可以做到这一点吗？或者我应该尝试不同的方法？

推荐答案

实现示例草图的一种方法是以相同的速率旋转图形对象和草图。我重写了您的一些代码以实现目标，但它不应该有太大的不同：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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画布上绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！