I want to start rotation on button click and then be able to control the rotation angle on mouse position.
Right now my code run the rotation, but i don't know how to start it on a button click and then, control it on mouse position.
I am new to javascript and p5js. Any hint will be appreciated.
This is my code so far.
var grid;
var current_img;
var img1;
var img2;
var layerOne;
function preload()
{
img1 =loadImage('https://i.imgur.com/Q6aZlme.jpg');
}
function setup()
{
let cnv = createCanvas(1000, 1000, );
layerOne = createGraphics (1000, 1000);
layerOne.grid = new Grid(40);
}
function draw()
{
background(img1);
layerOne.background(100,100,100);
if (show_grid == true)
{
push();
let ts = millis() / 1000.0;
let angle = radians( ts * 2.0 * Math.PI * 5.0 );
translate( width / 2, height / 2 );
rotate(angle);
translate( -width / 2, -height / 2 );
imageMode( CENTER );
rectMode( CENTER );
layerOne.grid.display();
pop();
}
}
let show_grid = false;
function a()
{
show_grid = true;
current_img = img1;
image(layerOne,0,0);
}
class Grid
{
constructor (cellSize)
{
this.cellSize = cellSize;
this.numberOfColumns = floor( width / this.cellSize );
this.numberOfRows = floor( height / this.cellSize );
this.cells = new Array( this.numberOfColumns );
for (var column = 0; column < this.numberOfColumns; column ++)
{
this.cells[column] = new Array(this.numberOfRows);
}
for (var column = 0; column < this.numberOfColumns; column ++)
{
for (var row = 0; row < this.numberOfRows; row++)
{
this.cells[column][row] = new Cell(column, row, cellSize);
}
}
}
display ()
{
for (var column = 0; column < this.numberOfColumns; column ++)
{
for (var row = 0; row < this.numberOfRows; row++)
{
this.cells[ column ][ row ].show_cell();
}
}
}
}
class Cell
{
constructor (column, row, size)
{
this.x = column;
this.y = row;
this.w = size;
}
show_cell ()
{
image(current_img, this.x * this.w ,
this.y * this.w , this.w , this.w );
}
}
<html>
<button
id="BgCategory1-btn1" onclick="a()"
class="btn btn-primary" type="submit">
Background1
</button>
</html>