V
V
Vladimir2019-07-15 19:58:02
JavaScript
Vladimir, 2019-07-15 19:58:02

How to rotate an image on canvas towards the mouse?

p5.js handler

var blob,blobs=[],img,angle=0,cnv;

function preload() {
  img = loadImage('static/img/maps/first.png');
  player = loadImage('static/img/heroes/first.png');
}
   		
function setup() {
  
  cnv = createCanvas(windowWidth,windowHeight);
  
  blob = new Blob(width/2-25, height/2-25, 50);
  for(var i = 0; i < 50; i++) {
    blobs[i] = new Blob(random(width),random(height),16);
  }
  
  angleMode(DEGREES);
  
  
}

function draw() {
  background(0);
  translate(width/2-blob.pos.x, height/2-blob.pos.y);
  
  if(blob.pos.x > img.width*2-blob.r*1.5) blob.pos.x = img.width*2-blob.r*1.5;
  if(blob.pos.y > img.height*2-blob.r*1.5) blob.pos.y = img.height*2-blob.r*1.5;
  if(blob.pos.x < 0+blob.r/2) blob.pos.x = 0+blob.r/2;
  if(blob.pos.y < 0+blob.r/2) blob.pos.y = 0+blob.r/2;
  
    image(img, 0, 0, img.width*2,img.height*2);
    
    angle = Math.atan2(mouseX - width/2, - (mouseY - height/2) )*(180/Math.PI);
    
    pop();
    translate(width/2, height/2);
    rotate(angle);
    translate(-width/2, -height/2);
    
    blob.show(); 	
    
   	push();
  for(var i = 0; i < blobs.length; i++) {
    //blobs[i].show();
  }
  
  //angle = atan2(blob.pos.y - mouseY,blob.pos.x - mouseX);
  
  //angle = 20
  
  blob.update();
}

The whole point is that it does not stop, but constantly spin in one direction or another.
Help to understand, please. Thank you very much

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question