Rotating Canvas

Processing Coding Questions
1

Hi there,
I’m stuck with this problem: I want to draw something on a rotating canvas. Working with PGraphics and saving my image as PImage for buffer. The canvas is rotating, but the coordinates of the mousepoint are rotating as well and I dont get why.

here is my code:

PGraphics canvas;
PImage buffer;

//number for rotation
float countup = 0.0;

void setup() {
  size(600, 600, JAVA2D);
  canvas = createGraphics(width, height, JAVA2D);
  buffer = createImage(width, height, RGB);
}

void draw() {
  translate(width/2, height/2);
  background(0);
  canvas.beginDraw();

  //get old image
  canvas.image(buffer, 0, 0);

  //draw circle at Mousepoint
  canvas.fill(255, 0, 0);
  canvas.circle(mouseX, mouseY, 5);
  canvas.endDraw();


  //fill background in buffer
  buffer = canvas.get();

  imageMode(CENTER);
  pushMatrix();
  //rotate canvas
  rotate(countup);
  image(buffer, 0, 0);
  popMatrix();

  countup +=0.005;
}

And, yes, there has been a similar post two years ago, but they couldn’t find a solution:

1 Like
2

My first pass at this:

PGraphics canvas;
PImage buffer;

PVector v1;

//number for rotation
float countup = 0.0;

void setup() 
  {
  size(600, 600, JAVA2D);
  canvas = createGraphics(width, height, JAVA2D);
  buffer = createImage(width, height, RGB);
  v1 = new PVector(0, 0);
  }

void draw() {
  translate(width/2, height/2);
  //background(0);
  
  float mX = mouseX;
  float mY = mouseY;
 
  v1.set(mX-width/2, mY-height/2);
  v1.rotate(-countup);

  canvas.beginDraw();

  //get old image
  canvas.image(buffer, 0, 0);

  //draw circle at Mousepoint
  canvas.fill(255, 0, 0);
  canvas.circle(v1.x+width/2, v1.y+height/2, 5);
  canvas.endDraw();

  //fill background in buffer
  buffer = canvas.get();

  imageMode(CENTER);
  pushMatrix();
  //rotate canvas
  rotate(countup);
  image(buffer, 0, 0);
  popMatrix();

  countup +=0.005;
}

I changed circles to points (with transparency) and added conditions to only draw if mouse is moving:

image
image602×627 126 KB

Have some fun with this!

:slight_smile:

2 Likes
3

Thanks very much for your help.
I just even found that I don’t need to use a buffer:


PGraphics canvas;

int arrayNum = 5;
float[] arrx = new float[arrayNum];
float[] arry = new float[arrayNum];

//number for rotation
float countup = 0.0;
PVector m = new PVector();

float w2, h2;


void setup() {
  size(600, 600, JAVA2D);
  canvas = createGraphics(width, height, JAVA2D);
  background(0);
  w2 = width/2;
  h2 = height/2;
}

void draw() {
  translate(w2, h2);
  background(0);

  m = new PVector(mouseX-w2, mouseY-h2);
  m.rotate(-countup);

  arrx[arrayNum-1]=m.x;
  arry[arrayNum-1]=m.y;

  canvas.beginDraw();
  if (arrx[0] != 0) {
    canvas.stroke(255, 255, 0);
    canvas.noFill();
    canvas.beginShape();
    for (int i=0; i<arrayNum; i++) {
      canvas.curveVertex(arrx[i]+w2, arry[i]+h2);
    }
    canvas.endShape();
  }
  //shift array
  for (int i=0; i<arrayNum -1; i++) {
    arrx[i] = arrx[i+1];
    arry[i] = arry[i+1];
  }  

  canvas.endDraw();

  imageMode(CENTER);
  pushMatrix();
  //rotate canvas
  rotate(countup);
  image(canvas, 0, 0);
  popMatrix();

  countup +=0.005;
  println(frameRate);
}

void mouseClicked() {
  saveFrame("line-######.png");
}

line-000509
line-000509600×600 29.2 KB

this ist now with JAVA2D and an array for the curveVertex.

with P2D it looks like this:

1 Like
4

can put only one pic up…

line-000378
line-000378600×600 191 KB

looks fun as well, but don’t get exactly why it keeps everything in the background oO - but still learning :wink:

2 Likes
5

We learn something with each new challenge.
I learned from this.

I will comment on the weekend… or others might. Give it some thought and work through it.

:slight_smile:

6

What do you mean by this? Can you explain your question a bit more? What are you expecting to see, and what are you seeing instead?

7

Its easy to see in these two pictures.
one is with JAVA2D renderer and the other is with P2D.
In P2D it looks like its dragging the old picture behind the points.
This is with P2D

rotatingCanvas-000286
rotatingCanvas-000286600×600 130 KB

8

This one is the same code but with JAVA2D renderer

rotatingCanvas-000243
rotatingCanvas-000243600×600 9.15 KB

9

When I cut-paste your code from this post:

…and replace both cases of JAVA2D with P2D, I’m not seeing a problem. The sketch behaves the same in both cases, with identical visual output. This is Processing 3.4 on a MacBook Pro.

10

Hey Jeremy,
sorry, just seen your reply. As i didn’t have a problem with this at the moment, I didn’t look further into this topic :sweat_smile:

I just checked both codes I postet here, and you are right. I must have used something older.
found it:

PGraphics canvas;
PImage buffer;

//number for rotation
float countup = 0.0;
PVector m = new PVector();


void setup() {
  size(600, 600, JAVA2D);
  canvas = createGraphics(width, height, JAVA2D);
  buffer = createImage(width, height, RGB);
  background(0);
}

void draw() {
  translate(width/2, height/2);
  //background(0);

  float mx = mouseX;
  float my = mouseY;

  m = new PVector(mx, my);

  m.set(mx-width/2, my-height/2);
  m.rotate(-countup);


  canvas.beginDraw();

  //get old image
  canvas.image(buffer, 0, 0);
  //canvas.fill(0, 0, 0, 2);
  //canvas.rect(0, 0, width, height);

  //draw circle at Mousepoint
  canvas.fill(255, 0, 0);
  canvas.noStroke();
  canvas.circle(m.x+width/2, m.y+height/2, 5);
  canvas.endDraw();


  //fill background in buffer
  buffer = canvas.get();

  imageMode(CENTER);
  pushMatrix();
  //rotate canvas
  rotate(countup);
  image(buffer, 0, 0);
  popMatrix();

  countup +=0.005;
}

void mouseClicked() {
  //saveFrame("line-######.png");
}
1 Like