I have a canvas with an ellipse in it. I can then compare the mouse X and mouse Y to the ellipse X and the ellipse Y for a fake, but valid, mouse 'hover' test. When I hover over the shape the canvas is scaled to twice the size as it was before, and the shape appears larger. However, the scale always remains at the coordinates 0,0 i.e. top left. Is there any way to change the coordinates at which the canvas is scaled at? This way, I would be able to alter the program so that, when hovering over the shape, the new canvas would scale so that the top left is my mouse position (I can move the position of the scale). I've written a little example to demonstrate where I am, currently.
function setup(scaleValue) {
// create canvas and scale to value
var canvas = createCanvas(300,200);
scale(scaleValue);
background(51);
// create ellipse
fill(255,255,255,100);
stroke(255,255,255);
ellipse(30,30,40,40);
}
function draw() {
// get mouse X and Y and create an X and Y value for the ellipse
var x = mouseX;
var y = mouseY;
this.position = createVector(30,30);
// check for mouse hover by comparing mouse X and Y to ellipse X and Y
if (Math.abs(mouseX - this.position.x) < 30 && Math.abs(mouseY - this.position.y) < 30) {
setup(2);
}
if (Math.abs(mouseX - this.position.x) > 30 && Math.abs(mouseY - this.position.y) > 30) {
setup(1);
}
}<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.10/p5.js"></script>
</head>
<body>
</body>You can use the translate() function to move the origin. If you do translate(100, 100) for example, the origin will now be at 100,100 and anything you draw at 0,0 will now be drawn at 100,100.
More info can be found in the reference.
Also, why don't you just use the distance formula, or better yet the dist() function, to check whether the mouse is inside the circle?
Again, more info can be found in the reference.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments