2

I'm working on simulating a drawing machine using p5.js, similar to this.

I have already created the positioning of the arm relative to the motor positions. The idea I'm trying to recreate is holding a pencil/pen still and using it to draw on a rotating canvas underneath. I have a test example created in the p5.js editor.

The example draws two dots, one red and one blue. The goal is to create a mark, or trail, using the blue dot on the rotating graphics object below.

    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>

Is there a way to do this with my current example or should I try something different?

Charlie Wallace
  • 1,810
  • 1
  • 15
  • 17
dwarren
  • 23
  • 2

1 Answers1

4

One way of achieving what you want to do with your example sketch would be to rotate both the graphics object and the sketch at the same rate. I rewrote some of your code to achieve the goal, but it shouldn't be too different to follow:

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>

One thing that's different is that the blue dot's position is determined by the mouse. You can change this behavior by commenting the rotatingRect.point(mouseX-200, mouseY-200); line and using rotatingRect.point(0, -10); instead. It's worth to note that 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() instead of point() between the last position and the current one.

Julian
  • 1,277
  • 1
  • 9
  • 20
  • This is a great example, thank you! I hadn't thought about rotating the entire canvas, and rotating the rectangle the opposite amount. This is how I was achieving the effect of moving the paper "up" as it was drawing, and it transfers easily to rotation as well. – dwarren Feb 16 '19 at 19:01
  • Nice. Hope it was helpful. – Julian Feb 16 '19 at 19:21