# Rotating Canvas

**URL:** <https://discourse.processing.org/t/rotating-canvas/17108>\
**Category:** Coding Questions\
**Created:** [January 15, 2020, 9:26pm UTC](https://discourse.processing.org/t/rotating-canvas/17108 "2020-01-15T21:26:22Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 15, 2020, 9:26pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/1 "2020-01-15T21:26:22Z")

</div>

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:

```auto
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:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/26111/drawing-on-a-rotating-canvas)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 15, 2020, 11:18pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/2 "2020-01-15T23:18:08Z")

</div>

My first pass at this:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c9fadfc4337fc0eb118a2f5e4c0a48943eab9b33.png)

Have some fun with this!

🙂

---

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 16, 2020, 11:43am UTC](https://discourse.processing.org/t/rotating-canvas/17108/3 "2020-01-16T11:43:17Z")

</div>

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

```auto

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0a75c32256708c5b49de9456c9f1b9d476803996.png)

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

with P2D it looks like this:

---

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 16, 2020, 11:43am UTC](https://discourse.processing.org/t/rotating-canvas/17108/4 "2020-01-16T11:43:53Z")

</div>

can put only one pic up…

 ![line-000378](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/63e83c72a6def225a78e278114b98fe9298e0498.png)

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [January 16, 2020, 12:02pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/5 "2020-01-16T12:02:15Z")

</div>

> [@Interkinactive](#):
>
> but still learning

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

> [@Interkinactive](#):
>
> don’t get exactly why it keeps everything in the background

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

🙂

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 17, 2020, 6:42am UTC](https://discourse.processing.org/t/rotating-canvas/17108/6 "2020-01-17T06:42:51Z")

</div>

> [@Interkinactive](#):
>
> don’t get exactly why it keeps everything in the background

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?

---

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 17, 2020, 7:42pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/7 "2020-01-17T19:42:16Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/33634ddea2ed247be60b9f6e91a97e087f9f8036.png)

---

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 17, 2020, 7:43pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/8 "2020-01-17T19:43:24Z")

</div>

This one is the same code but with JAVA2D renderer

 ![rotatingCanvas-000243](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f58ba0f9edcd6035a6df55cbc256a4069f04a982.png)

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 17, 2020, 8:43pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/9 "2020-01-17T20:43:03Z")

</div>

When I cut-paste your code from this post:

> [@Interkinactive](#):
>
> I don’t need to use a buffer:

…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.

---

<div class="post-metadata">

**Author:** ![Interkinactive](https://avatars.discourse-cdn.com/v4/letter/i/ecd19e/32.png) [@Interkinactive](https://discourse.processing.org/u/Interkinactive)\
**Post date:** [January 30, 2020, 3:48pm UTC](https://discourse.processing.org/t/rotating-canvas/17108/10 "2020-01-30T15:48:27Z")

</div>

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 😅

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

```auto
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");
}

```