Drawing on a rotating canvas

moo

Hey all! I have created a rotating canvas, and trying to do a :

if(mouseIsPressed) {
  graphics.fill(255)
  graphics.stroke(255);
  graphics.ellipse(mouseX, mouseY, 100);
} 

but the mouse is not recognising the rotation and so I press the mouse and if its not in the center it won't recognize where on the canvas I am... HALP!

KevinWorkman

The mouseX and mouseY variables hold the screen-based position of the cursor. After you do a rotation, your pixels are being drawn in model-based positions.

You can try to project the mouse position into model space.

Depending on what you want to do, you could also modify your code so you do the rotations after you do the drawing, using an off-screen buffer. The createGraphics() function is your friend here.

If you're still having trouble, please post a small example sketch that demonstrates the problem.

moo

var graphics;
function setup() {
    createCanvas(600, 600);
    graphics = createGraphics(900, 900);
}
    push()
    translate(300, 300)

    rotate(frameCount/60);

    translate(-600, -600);
    image(graphics, 300, 300);
    graphics.fill(255);
    if(mouseIsPressed) {
      graphics.fill(255)
      graphics.stroke(255);
      graphics.ellipse(mouseX, mouseY, 100)
    }

    pop()

So this is what I have, the canvas is rotating but the drawing on top is not connected with that rotation so is drawing where the canvas sits at its static position

KevinWorkman

The code you posted is not inside a draw() function so I don't think it'll work at all.

Chrisir

It's also cut off at the end?

moo

my code is 270 lines long, I only put in the code I was trying to write to do the thing.

KevinWorkman

Cool, in that case please narrow the problem down to a small example sketch that demonstrates the problem. The idea is that we should be able to copy and paste your code to see the problem ourselves, but it shouldn't contain any extra code that's not related to the problem. See also: MCVE.

moo

Awesome, Thanks, first time me asking questions on a code forum!

function rotation(degrees) {
  rotate(radians(degrees))
}

function setup() {
    createCanvas(300, 300);
    graphics = createGraphics(300, 300);
  }


function draw() {
    background(255, 127, 255);
      noStroke();
      fill(50, 15, 91);
    push() // CENTRAL TURQUOIUSE HEXAGON
    translate(150, 150);
    fill(0, 144, 207);
    rotate(frameCount/60)
    for (var i = 0; i < 6; i++) {
      rotation(60)
        triangle(-52, 30, -35, 0, 0, 0)
    }
    pop()

    push()
        translate(150, 150)

        rotate(frameCount/60);

        translate(-300, -300);
        image(graphics, 150, 150);
        graphics.fill(255);
        if(mouseIsPressed) {

          graphics.fill(255)
          graphics.stroke(255);
          graphics.ellipse(mouseX, mouseY, 100)

        }

        pop()

}

Chrisir

here is a demo of what you probably don't want, the drawing is on the rotating canvas by drawing in the upper left corner. It's also in classic processing.

PGraphics graphics;
float angle;

void  setup() {
  size(600, 600);
  graphics = createGraphics(190, 190);

  graphics.beginDraw();
  graphics.background(210);
  graphics.stroke(255);
  graphics.line(graphics.width*0.5, graphics.height*0.5, 
    189, 169);
  graphics.endDraw();

  imageMode(CENTER);

  background(0);
}

void draw() {
  //push();

  background(0);

  fill(255);
  rect(0, 0, 
    graphics.width, graphics.height);
  fill(2);
  text ("Click here to draw in the rotating rectangle.", 17, 17, 
    graphics.width, graphics.height);


  pushMatrix();

  translate(width/2, height/2);
  rotate(angle);

  // translate(-600, -600);
  image(graphics, 0, 0);
  // graphics.fill(255);

  if (mousePressed) {
    graphics.beginDraw();
    graphics.fill(map(mouseX, 0, graphics.width, 0, 255), 2, 2); // red 
    graphics.stroke(255);
    graphics.ellipse(mouseX, mouseY, 100, 100);
    graphics.endDraw();
  }

  popMatrix();

  angle+=.02;
}

Chrisir

new version, draw on the rotating canvas, NOT working

makes you feel dizzy....

PGraphics graphics;
float angle;

void  setup() {
  size(600, 600);
  graphics = createGraphics(290, 290);

  graphics.beginDraw();
  graphics.background(210);
  graphics.stroke(255);
  graphics.line(graphics.width*0.5, graphics.height*0.5, 
    189, 169);
  graphics.endDraw();

  imageMode(CENTER);

  background(0);
}

void draw() {

  background(0);

  fill(255);
  text ("Click on the rotating rectangle to draw. Hit any key to delete.", 17, 17, 
    graphics.width, graphics.height);

  pushMatrix();

  translate(width/2, height/2);
  rotate(angle);

  // translate(-600, -600);
  image(graphics, 0, 0);
  // graphics.fill(255);

  if (mousePressed) {
    graphics.beginDraw();
    graphics.fill(map(mouseX, 0, graphics.width, 0, 255), 2, 2); // red 
    graphics.stroke(255);
    graphics.ellipse(mouseX-width/4, mouseY-height/4, 8, 8);
    graphics.endDraw();
  }

  popMatrix();

  angle+=.02;
}

void keyPressed() {

  graphics.beginDraw();
  graphics.background(210);
  graphics.stroke(255);
  graphics.line(graphics.width*0.5, graphics.height*0.5, 
    189, 169);
  graphics.endDraw();
}

moo

is it easy to change this to p5? I tried with the voids and push's and pops but its still not working

Chrisir

It doesn‘t really work anyway

Just run it in classic processing mode