V
V
Vladimir2019-07-11 03:46:54
JavaScript
Vladimir, 2019-07-11 03:46:54

How to rotate image inside canvas relative to mouse position?

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

function preload() {
  img = loadImage('static/img/maps/first.png');
  player = loadImage('static/img/heroes/first.png');
}
   		
function setup() {
  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-blob.r) blob.pos.x = img.width-blob.r;
  if(blob.pos.y > img.height-blob.r) blob.pos.y = img.height-blob.r;
  if(blob.pos.x < 0+blob.r) blob.pos.x = 0+blob.r;
  if(blob.pos.y < 0+blob.r) blob.pos.y = 0+blob.r;
  
  image(img, 0, 0);
    
    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();
  }
  blob.update();
  
  
  angle = mouseX/1000*10;
  
}

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