ive drawn a checker board on a canvas and i want to highlight the square which the mouse is over. I have given it a go but the furthest i can get is with it half a square out of sync.
Here is my code:
canvas.addEventListener('mousemove', function(evt)
{
const position = getGridPoint(evt);
drawBoard(); //Clears the last highlight
context.lineWidth='3'; //Draws the new highlight
context.strokeStyle = 'yellow';
context.rect(position.x * board.squareW, position.y * board.squareH, board.squareW, board.squareH);
context.stroke();
})
function getGridPoint(evt)
{
const rect = canvas.getBoundingClientRect();
//board.w = width of the board
//board.squareW = width of each tile on the board
const x = Math.round((evt.clientX - rect.left) / (rect.right - 2 - rect.left) * board.w);
const y = Math.round((evt.clientY - rect.top) / (rect.bottom - 2 - rect.top) * board.h);
const roundX = Math.round(x / board.squareW);
const roundY = Math.round(y / board.squareH);
return {
x: roundX,
y: roundY
};
}
Its something in the 2nd function where im using math.round
So it will work if i manually subtract half a tile's width from x and y but it seems a hacky way and id rather do it properly in the first place
JSfiddle: http://jsfiddle.net/5toudex0/3/
try this for getTile
function getTile(evt)
{
const rect = canvas.getBoundingClientRect();
//board.w = width of the board
//board.squareW = width of each tile on the board
const x = Math.floor((evt.clientX - rect.left) / board.squareW);
const y = Math.floor((evt.clientY - rect.top) / board.squareH);
return {
x: x,
y: y
};
}
With a little change made to the mousemove handler for the canvas, you can (0) directly get the client position of the mouse and then (1) compute the col/row indices for the tile to highlight.
Consider the following change to your code:
canvas.addEventListener('mousemove', function(evt)
{
const position = getTile(evt);
var xPos = evt.clientX, yPos = evt.clientY;
var xTileIndex = (xPos / board.squareW)>>0;
var yTileIndex = (yPos / board.squareH)>>0;
console.log(`x,y = ${xPos},${yPos}`);
console.log(`x,y = ${xTileIndex},${yTileIndex}`);
Related
So I have this code here that I'm using to make the eyeball follow the cursor
document.addEventListener('mousemove', (e) => {
const mouseX = e.clientX;
const mouseY = e.clientY;
const anchor = document.getElementById('anchor')
const rekt = anchor.getBoundingClientRect();
const anchorX = rekt.left + rekt.width / 2;
const anchorY = rekt.top + rekt.height / 2;
const angleDeg = angle(mouseX, mouseY, anchorX, anchorY);
const eyes = document.querySelectorAll('.eye')
eyes.forEach(eye => {
eye.style.transform = `rotate(${90 + angleDeg}deg)`;
})
})
function angle(cx, cy, ex, ey) {
const dy = ey - cy;
const dx = ex - cx;
const rad = Math.atan2(dy, dx);
const deg = rad * 180 / Math.PI;
return deg;
}
but it's rotating in a sphere shape, like the image can tell
eye sphere shape
and if you put your cursor on the side it will be something like this
eye max X
but I want the eye to be able to go further on the X axis.
OBS: the frame is a .png with a hole on the middle, so don't worry about the eyeball leaving the eye.
I tried to change the radius of the sphere nut it didn't helped me the way I intended. I think an ellipse shape will be better, but I'm struggling to do it so.
I am using the following function to get mouse coordinates on canvas after performing rotations.
function getWindowToCanvas(canvas, x, y) {
const ctx = canvas.getContext("2d");
var transform = ctx.getTransform();
var rect = canvas.getBoundingClientRect();
var screenX = (x - rect.left) * (canvas.width / rect.width);
var screenY = (y - rect.top) * (canvas.height / rect.height);
if (transform.isIdentity) {
return {
x: screenX,
y: screenY
};
} else {
console.log(transform.invertSelf());
const invMat = transform.invertSelf();
return {
x: Math.round(screenX * invMat.a + screenY * invMat.c + invMat.e),
y: Math.round(screenX * invMat.b + screenY * invMat.d + invMat.f)
};
}
}
I used the inverted transform matrix after reading html5-canvas-transformation-algorithm and best-way-to-transform-mouse-coordinates-to-html5-canvass-transformed-context
I am letting the user draw rectangles with the mouse, and I need to get the mouse x,y coordinates after transformations, but once the canvas is rotated (say by 90 deg) then the rectangles no longer follow the mouse pointer.
Does anyone know what I'm doing wrong?
Thanks to #MarkusJarderot and jsFiddle getting mouse coordinates from un-rotated canvas I was able to get a solution that is close to perfect. I don't quite understand it, but it works much better.
function getWindowToCanvas(canvas, e) {
//first calculate normal mouse coordinates
e = e || window.event;
var target = e.target || e.srcElement,
style = target.currentStyle || window.getComputedStyle(target, null),
borderLeftWidth = parseInt(style["borderLeftWidth"], 10),
borderTopWidth = parseInt(style["borderTopWidth"], 10),
rect = target.getBoundingClientRect(),
offsetX = e.clientX - borderLeftWidth - rect.left,
offsetY = e.clientY - borderTopWidth - rect.top;
let x = (offsetX * target.width) / target.clientWidth;
let y = (offsetY * target.height) / target.clientHeight;
//then adjust coordinates for the context's transformations
const ctx = canvas.getContext("2d");
var transform = ctx.getTransform();
const invMat = transform.invertSelf();
return {
x: x * invMat.a + y * invMat.c + invMat.e,
y: x * invMat.b + y * invMat.d + invMat.f
};
}
The only issue remaining is that, when rotated say 45deg, drawing a rectangle with ctx.rect() draws a rectangle that parallels with respect to the canvas, not to the window, so the rectangle is slanted even though it is finally in the right place. I want to draw rectangles with respect to the window, not the canvas. However, this may just be how ctx.rect() works, and I'll need to update later. For now, this could help others.
UPDATE
Figured out original bug.
Since I didn't understand why my original function was not working, used the above solution to start trouble-shooting it. It turns out that the reason the above code did not work is because I was calling console.log(transform.invertSelf()) to see the transform while I was debugging. This mutated the transform. So, when I called var invMat = transform.invertSelf() right after, I inverted it yet again! I should have paid attention to the 'self' in 'invertSelf'.
This function now works
function getWindowToCanvas(canvas, x, y) {
var rect = canvas.getBoundingClientRect();
var screenX = (x - rect.left) * (canvas.width / rect.width);
var screenY = (y - rect.top) * (canvas.height / rect.height);
const ctx = canvas.getContext("2d");
var transform = ctx.getTransform();
if (transform.isIdentity) {
return {
x: screenX,
y: screenY
};
} else {
// console.log(transform.invertSelf()); //don't invert twice!!
const invMat = transform.invertSelf();
return {
x: Math.round(screenX * invMat.a + screenY * invMat.c + invMat.e),
y: Math.round(screenX * invMat.b + screenY * invMat.d + invMat.f)
};
}
}
I'm building a basic game using plain javascript and I am trying to rotate my object to follow my mouse.
I've tried getting the client's mouse X and Y then subtracting the canvas width and height divided by two. Then taking those values and inputing it into Math.atan2(). However, I feel the issue may be in my transform and rotate. The code bellow is what I've tried.
WIDTH = c.height;
HEIGHT = c.width;
document.onmousemove = function(ve){
let cX = -c.width / 2;
let cY = -c.height / 2;
let x = ve.offsetX;
let y = ve.offsetY;
var rX = cX + x - 8;
var rY = cY + y - 8;
player.angle = Math.atan2(rX, rY) / Math.PI * 180;
}
function update(){
var now = Date.now();
dt = now - lastUpdate;
ctx.clearRect(0, 0, WIDTH, HEIGHT);
ctx.setTransform(1, 0, 0, 1, WIDTH / 2, HEIGHT / 2);
ctx.rotate(player.angle + 10);
drawCircle(player.x, player.y, 20, 0, 180, "red");
tx.setTransform(1, 0, 0, 1, 0, 0);
}
setInterval(update, dt/10000);
The player spins around my mouse in wide circles with no apparent pattern.
Here's a gif showing what's happening.
https://gyazo.com/006c99879ecf219791d059de14d98b74
In order to rotate the object to follow the mouse you need to get the angle between the previous position of the mouse and the actual position of the mouse and use this angle to rotate the object. Also the object is drawn with the tip in the origin of the canvas {x:0,y:0} so you'll need to translate the player to the position of the mouse.
I hope this is what you need.
const ctx = c.getContext("2d")
const HEIGHT = c.height = window.innerHeight;
const WIDTH = c.width = window.innerWidth;
let m = {x:0,y:0}
let prev = {x:0,y:0}
let angle = 0;
c.addEventListener("mousemove",(evt)=>{
ctx.clearRect(-WIDTH, -HEIGHT, 2*WIDTH, 2*HEIGHT);
// the previous position of the mouse
prev.x = m.x;
prev.y = m.y;
//the actual position of the mouse
m = oMousePos(c, evt);
// if the mpuse is moving get the angle between the previoue position and the actual position of the mouse
if(m.x != prev.x && m.y != prev.y){
angle = Math.atan2(m.y-prev.y, m.x-prev.x)
}
ctx.restore();
ctx.save();
ctx.translate(m.x, m.y);
ctx.rotate(angle);
drawPlayer();
})
function drawPlayer(){
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(-20,-5);
ctx.lineTo(-20,5);
ctx.lineTo(0,0);
ctx.closePath();
ctx.fill()
}
// a function to detect the mouse position
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return { //objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
}
}
<canvas id="c"></canvas>
As an observation: in your code you have Math.atan2(rX, rY) The first argument has to be y.
In the example fiddle: https://jsfiddle.net/krazyjakee/uazy86m4/ you can drag the mouse around underneath the vector point shown as a blue square. You will see the line draw a path from the vector, through the mouse and to the edge of the viewport where a green square is shown, indicating it has found the edge. However, above the vector, the green square disappears as it fails to detect the edge of the viewport.
Here is the current logic I am using to detect the edge.
const angle = Math.atan2(mouse.y - vectorCenter.y, mouse.x - vectorCenter.x);
const cosAngle = Math.abs(Math.cos(angle));
const sinAngle = Math.abs(Math.sin(angle));
const vx = (viewport.width - vectorCenter.x) * sinAngle;
const vy = (viewport.height - vectorCenter.y) * cosAngle;
const vpMagnitude = vx <= vy ?
(viewport.width - vectorCenter.x) / cosAngle :
(viewport.height - vectorCenter.y) / sinAngle;
const viewportX = vectorCenter.x + Math.cos(angle) * vpMagnitude;
const viewportY = vectorCenter.y + Math.sin(angle) * vpMagnitude;
const viewPortEdge = {
x: viewportX,
y: viewportY,
};
Please help me figure out how to correctly detect the position in the top edge of the viewport.
I didn't look into why exactly this fails for the top because there's an easier approach to this than dealing with angles. You can get the position by some simple vector calculations.
First, for the sake of explicitness and to prevent hardcoding any values into the computation I've extended your viewport
const viewport = {
x: 0,
y: 0,
width: window.innerWidth,
height: window.innerHeight,
get left(){ return this.x },
get right(){ return this.x + this.width },
get top(){ return this.y },
get bottom(){ return this.y + this.height },
};
now the calculation:
//prevent division by 0
const notZero = v => +v || Number.MIN_VALUE;
let vx = mouse.x - vectorCenter.x;
let vy = mouse.y - vectorCenter.y;
//that's why I've extended the viewport, so I don't have to hardcode any values here
//Math.min() to check wich border I hit first, X or Y
let t = Math.min(
((vx<0? viewport.left: viewport.right) - vectorCenter.x) / notZero(vx),
((vy<0? viewport.top: viewport.bottom) - vectorCenter.y) / notZero(vy)
);
const viewPortEdge = {
x: vectorCenter.x + vx * t,
y: vectorCenter.y + vy * t,
};
so t is the factor by wich I have to scale the vector between the mouse and the vectorCenter to hit the closest edge in that particular direction.
I paint freehand strokes on my canvas with a code like below. I need to check how much of the canvas is covered with strokes. What is a good way to check that? The only thing I can think of is to count the number of pixels that have the specific color on mouse up event. But it is lame because it is slow...
Any help?
$(document).ready(function(){
var draw = false;
var x_prev = null, y_prev = null;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
canvas.mousedown(function(e){
draw = true;
x_prev = e.pageX - this.offsetLeft;
y_prev = e.pageY - this.offsetTop;
});
window.mouseup(function(){draw=false});
canvas.mousemove(function(e){
if(draw){
context.beginPath();
context.moveTo(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
context.lineTo(x_prev, y_prev);
context.stroke();
context.closePath();
x_prev = e.pageX - this.offsetLeft;
y_prev = e.pageY - this.offsetTop;
}
});
Computers are fast. It seems plenty fast to me to re-count the number of pixels over a particular alpha each frame when drawing. Test it yourself here: http://jsfiddle.net/ZC8cB/3/
Relevant code:
var w = canvas.attr('width'),
h = canvas.attr('height'),
area = w * h;
function updateArea() {
var data = context.getImageData(0, 0, w, h).data;
for (var ct=0, i=3, len=data.length; i<len; i+=4) if (data[i]>50) ct++;
$fill.html(ct);
$pct.html((100 * ct / area).toFixed(2));
}
If this is really too slow, you could choose to update the area every other mousemove, every third mousemove, etc. or on an interval timer. For example, here's a very-slightly-modified version that only updates every tenth mousemove: http://jsfiddle.net/ZC8cB/4/
And if a single frame of counting is too slow—because you have a slow computer or huge canvas or both—then you can fetch the ImageData in one frame and each update frame count a particular portion of the pixels.
Quantify the area to line width sized squares and count the number of unique squares encountered during draw.
var thickness = 4
var height = ..
var width = ..
var drawn = []
var covered = 0;
canvas.mousemove(function(e) {
var x = e.pageX - this.ofsetLeft;
var y = e.pageY - this.offsetTop;
x = parseInt( x / width ) * ( width / thickness )
y = parseInt( y / height ) * ( height / thickness )
id = x + y * parseInt(thickness / width)
if ( !drawn[ id ] ) {
drawn[ id ] = 1;
covered++;
}
}
You can get drawn area in percents by dividing the covered squares by number of total squares
var a = covered / ((width / thickness) * (height / thickness))