<canvas> Go/Baduk/Weiqi Game Board - javascript

I'm experimenting a bit with the new tag and I've already hit my first roadbump. I figured I'd start getting my feet wet by implementing a version of the classic board game Go/Baduk/Weiqi.
I've drawn the xy grid using moveTo() and lineTo(), and I've drawn a wood background using fillRect() that needs to be "under" that XY grid of course.
However, therein lies my problem. The fillRect() background is drawn on top of the grid - thus obscuring the grid.
How do I reverse this? Here's what I'm working with:
var boardSize = 19;
var gridSpacing = 25;
var gridSize = boardSize * gridSpacing;
var xStart = (window.innerWidth / 2) - (gridSize / 2) + 0.5;
var yStart = (window.innerHeight / 2) - (gridSize / 2) + 0.5;
var xEnd = xStart + gridSize;
var yEnd = yStart + gridSize;
var gridContext = canvas.getContext("2d");
gridContext.beginPath();
// Draw the board x lines
for (var x = xStart; x <= xEnd; x += gridSpacing)
{
gridContext.moveTo(x, yStart);
gridContext.lineTo(x, yEnd);
}
// Draw the board y lines
for (var y = yStart; y <= yEnd; y += gridSpacing)
{
gridContext.moveTo(xStart, y);
gridContext.lineTo(xEnd, y);
}
gridContext.strokeStyle = "#000000";
gridContext.stroke();
// Create new image object to use as pattern
var img = new Image();
img.src = 'bg_wood.jpg';
img.onload = function()
{
var boardBG = gridContext.createPattern(img, 'repeat');
gridContext.fillStyle = boardBG;
gridContext.fillRect(xStart, yStart, gridSize, gridSize);
}

Try using gridContext.globalCompositeOperation = 'destination-over'; when drawing the background.

Related

Three.js global heightmap is not showing the expected result

I wanted to create a model of earth using a global 4k height map that I found online. I found this open source script that can do this.
function createGeometryFromMap() {
var depth = 512;
var width = 512;
var spacingX = 3;
var spacingZ = 3;
var heightOffset = 2;
var canvas = document.createElement('canvas');
canvas.width = 512;
canvas.height = 512;
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "assets/earth.jpg";
img.onload = function () {
// draw on canvas
ctx.drawImage(img, 0, 0);
var pixel = ctx.getImageData(0, 0, width, depth);
var geom = new THREE.Geometry;
var output = [];
for (var x = 0; x < depth; x++) {
for (var z = 0; z < width; z++) {
// get pixel
// since we're grayscale, we only need one element
var yValue = pixel.data[z * 4 + (depth * x * 4)] / heightOffset;
var vertex = new THREE.Vector3(x * spacingX, yValue, z * spacingZ);
geom.vertices.push(vertex);
}
}
// we create a rectangle between four vertices, and we do
// that as two triangles.
for (var z = 0; z < depth - 1; z++) {
for (var x = 0; x < width - 1; x++) {
// we need to point to the position in the array
// a - - b
// | x |
// c - - d
var a = x + z * width;
var b = (x + 1) + (z * width);
var c = x + ((z + 1) * width);
var d = (x + 1) + ((z + 1) * width);
var face1 = new THREE.Face3(a, b, d);
var face2 = new THREE.Face3(d, c, a);
face1.color = new THREE.Color(scale(getHighPoint(geom, face1)).hex());
face2.color = new THREE.Color(scale(getHighPoint(geom, face2)).hex())
geom.faces.push(face1);
geom.faces.push(face2);
}
}
geom.computeVertexNormals(true);
geom.computeFaceNormals();
geom.computeBoundingBox();
var zMax = geom.boundingBox.max.z;
var xMax = geom.boundingBox.max.x;
var mesh = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({
vertexColors: THREE.FaceColors,
color: 0x666666,
shading: THREE.NoShading
}));
mesh.translateX(-xMax / 2);
mesh.translateZ(-zMax / 2);
scene.add(mesh);
mesh.name = 'valley';
};
}
function getHighPoint(geometry, face) {
var v1 = geometry.vertices[face.a].y;
var v2 = geometry.vertices[face.b].y;
var v3 = geometry.vertices[face.c].y;
return Math.max(v1, v2, v3);
}
When I tried the demo heightmaps of Grand Canyon and Hawaii that came with the download, they seemed to be fine. However, when I tried to implement my global heightmap into this, the result was not displaying what I needed.
This is the terrain of Grand Canyon:
This is the global heightmap that I am using:
And this is the result I am getting for the 3D terrain of the world:
It's obvious that something is wrong, because that is not the world.
When you tell your 2D canvas context to .drawImage(), it's going to draw a 4000 pixels image over a 512 pixels canvas. That's how it's defined in the MDN documents if you only use three img, dx, dy arguments.
You could either:
Draw the Earth image smaller to fit inside your 512x512 pixels canvas by using the 4th and 5th arguments of dWidth, dHeight.
Make your canvas larger to match the width and height dimensions of your Earth image.

clipping displacement in canvas javascript

I'm trying to create a two-dimensional board game with canvas for practice.
The goal is to have a game with only html, javascript and php.
I made a first canvas which takes up the entire board.
Currently my second canvas, contains a round pawn which moves as well as a clipping done with the clip () method.
My problem concerns the second canvas. I would like to be able to ensure that my clipping follows the position of the pawn.
But I can't move the clipping so it stays in the same place causing my pawn to appear and then disappear.
Could you tell me how to move this clipping please?
Thank you in advance.
const goUp = 1;
const goDown = 2;
const goLeft = 3;
const goRight = 4;
var canvas = document.getElementById("pawn");
var ctx = canvas.getContext("2d");
var largeurProprietee = 60;
var hauteurProprietee = 90;
x = 45 + 90 + (8 * 60) + 90;
y = 30;
orientation = 1;
pawnHeight = 40;
pawnWidth = 40;
function drawPawn() {
var image = new Image();
image.src = 'img/' + 'zelda' + '/' + 'vert' + '.png'; //adresse de l'image
image.onload = function() {
ctx.drawImage(this, y, x, pawnHeight, pawnWidth);
}
}
function shifting() {
erasePrevious();
cutOut();
drawPawn();
x--;
}
function erasePrevious() {
var previousX;
var previousY;
if (orientation == 1) {
previousX = x;
previousY = y;
ctx.clearRect(previousY, previousX, pawnHeight, pawnWidth);
}
}
function cutOut() {
var rayon = (pawnHeight / 2);
var clipX = (x + rayon);
var clipY = (y + rayon);
ctx.beginPath();
ctx.arc(clipY, clipX, rayon, 0, Math.PI * 2);
ctx.clip();
}
setInterval(shifting, 10);

Get cursor location of a rectangle inside a canvas

i have a canvas, inside of which i have a board/grid. When a user highlights their mouse over an intersection of the grid, i want it to show where their game peice will go. This worked perfectly fine when the board was the exact size of the canvas. I made it abit smaller by x all the way round.
So as you can see in the picture below, the green shows the canvas and the grid is the board. I put my cursor at the very bottom right corner of the green to show when it triggers. The only one that works fine is the middle one because regardless how big i make the board, the middle will always be the middle.
Any easy fix would just be to make the area with the mouseover event, the dimensions of the board instead of the canvas but the event listener is on the canvas. My code is below the image
Variables:
var canvas = document.getElementById("game-canvas");
var context = canvas.getContext("2d");
var boardSize = 13;
var border = canvas.width / 20;
var boardWidth = canvas.width - (border * 2);
var boardHeight = canvas.height - (border * 2);
var cellWidth = boardWidth / (boardSize - 1);
var cellHeight = boardHeight / (boardSize - 1);
var lastX;
var lastY;
Mouse over event:
canvas.addEventListener('mousemove', function(evt)
{
var position = getGridPoint(evt);
if ((position.x != lastX) || (position.y != lastY))
{
placeStone((position.x * cellWidth) + border, (position.y * cellWidth) + border, 'rgba(0, 0, 0, 0.2)');
}
lastX = position.x;
lastY = position.y;
});
Gets the point on the grid and converts that into a number 0 - 13 (in this case)
function getGridPoint(evt)
{
var rect = canvas.getBoundingClientRect();
var x = Math.round((evt.clientX-rect.left)/(rect.right-rect.left)*boardWidth);
var y = Math.round((evt.clientY-rect.top)/(rect.bottom-rect.top)*boardHeight);
var roundX = Math.round(x / cellWidth);
var roundY = Math.round(y / cellHeight);
return {
x: roundX,
y: roundY
};
}
And finally draws the piece on the board:
function placeStone(x, y, color)
{
var radius = cellWidth / 2;
context.beginPath();
context.arc(x, y, radius, 0, 2 * Math.PI, false);
context.fillStyle = color;
context.fill();
context.lineWidth = 5;
}
I left a couple bits out like how the grid refreshs so its not a string of circles following your mouse and stuff, to keep it as short as i can, im hoping its just a simple asnwer and nobody needs to recreate it but if you do i can include the function that refreshes the grid and draws everything. Thankyou for any advice
To get the position relative to a box
// just as an example w,h are width and height
const box = { x : 10, y : 10, w : 100, h : 100 };
// mouse is the mouse coords and relative to the topleft of canvas (0,0);
var mouse.box = {}
mouse.box.x = mouse.x - box.x;
mouse.box.y = mouse.y - box.y;
Negative values for mouse.box x,y and values greater than box width and height have mouse outside.
For more convenience you can get the mouse normalize pos in the box
mouse.box.nx = mouse.box.x / box.w;
mouse.box.ny = mouse.box.y / box.h;
The coords for nx,ny are in the range 0-1 when inside or on the edge of the box;
If you want to have grid positions then define the grid
box.gridW = 10; // grid divisions width
box.gridH = 10; // grid divisions height
Then getting the grid pos of mouse
mouse.box.gx = Math.floor(mouse.box.nx * box.gridW);
mouse.box.gy = Math.floor(mouse.box.ny * box.gridH);
const ctx = canvas.getContext("2d");
const box = { x : 50,y : 10, w : 200, h : 200, gridW : 10, gridH : 10}
function drawGrid(){
var sx = box.w / box.gridW;
var sy = box.h / box.gridH;
var bx = box.x;
var by = box.y;
for(var y = 0; y < box.gridH; y ++){
for(var x = 0; x < box.gridW; x ++){
ctx.strokeRect(x * sx + bx, y * sx + by,sx,sy);
}
}
if(mouse.box){
if(mouse.box.nx >= 0 && mouse.box.nx <= 1 &&
mouse.box.ny >= 0 && mouse.box.ny <= 1){
ctx.fillRect(mouse.box.gx * sx + bx, mouse.box.gy * sx + by,sx,sy);
}
}
}
const mouse = {};
canvas.addEventListener("mousemove",(e)=>{
mouse.x = e.pageX;
mouse.y = e.pageY;
});
function updateMouse(){
if(!mouse.box){
mouse.box = {};
}
mouse.box.x = mouse.x - box.x;
mouse.box.y = mouse.y - box.y;
mouse.box.nx = mouse.box.x / box.w;
mouse.box.ny = mouse.box.y / box.h;
mouse.box.gx = Math.floor(mouse.box.nx * box.gridW);
mouse.box.gy = Math.floor(mouse.box.ny * box.gridH);
var p = 20;
ctx.fillText("x : " + mouse.x,box.x+box.w+10,p); p+= 14;
ctx.fillText("y : " + mouse.y,box.x+box.w+10,p); p+= 20;
ctx.fillText("Box relative",box.x+box.w+10,p); p+= 14;
ctx.fillText("x : " + mouse.box.x,box.x+box.w+10,p); p+= 14;
ctx.fillText("y : " + mouse.box.y,box.x+box.w+10,p); p+= 14;
ctx.fillText("nx : " + mouse.box.nx,box.x+box.w+10,p); p+= 14;
ctx.fillText("ny : " + mouse.box.ny,box.x+box.w+10,p); p+= 14;
ctx.fillText("gx : " + mouse.box.gx,box.x+box.w+10,p); p+= 14;
ctx.fillText("gy : " + mouse.box.gy,box.x+box.w+10,p); p+= 14;
}
function mainLoop(time){
if(canvas.width !== innerWidth || canvas.height !== innerHeight){ // resize canvas if window size has changed
canvas.width = innerWidth;
canvas.height = innerHeight;
}
ctx.setTransform(1,0,0,1,0,0); // set default transform
ctx.clearRect(0,0,canvas.width,canvas.height); // clear the canvas
updateMouse();
drawGrid();
requestAnimationFrame(mainLoop);
}
requestAnimationFrame(mainLoop);
canvas {
position : absolute;
top : 0px;
left : 0px;
}
<canvas id=canvas><canvas>

Get relative X and Y on transforming canvas [duplicate]

I implemented a zoom function in my canvas just like this one: Zoom in on a point (using scale and translate)
Now I need to calculate the position of the mouse in relation to the canvas, I first tried like this:
var rect = this._canvas.getBoundingClientRect();
var x = ((event.clientX - rect.left) / (rect.right - rect.left) * this._canvas.width);
var y = ((event.clientY - rect.top) / (rect.bottom - rect.top) * this._canvas.height);
This works excellent until I zoom... I tried to do it like this:
var x = ((event.clientX - rect.left) / (rect.right - rect.left) * this._canvas.width) - this._canvas.offsetLeft ;
var y = ((event.clientY - rect.top) / (rect.bottom - rect.top) * this._canvas.height) - offset.top this._canvas.offSetTop ;
Any hint ? Or should I better use a JS library to interact with the canvas element ? If so, do you have any experience ?
Inverse Matrix
This answer include rotation as well because the scale is part of the rotation in the matrix you can't really exclude one or the other. But you can ignore the rotation (set it as zero) and just set scale and translation and it does what you want.
The inverse transform. It basically does the reverse of the standard 2D transformations. It will require that you keep track of the transformations so you can create the inverse transform, this can prove problematic in complex transforms if you wish to use ctx.rotation, ctx.scale, ctx.translate or ctx.transform. As you requirements are simple I have created a simple function to do the minimum transformation.
The following creates both the transformation matrix and the inverse transform as two arrays called matrix and invMatrix. The arguments are translation x,y (in canvas coordinates), scale, and rotation.
var matrix = [1,0,0,1,0,0];
var invMatrix = [1,0,0,1];
function createMatrix(x, y, scale, rotate){
var m = matrix; // just to make it easier to type and read
var im = invMatrix; // just to make it easier to type and read
// create the rotation and scale parts of the matrix
m[3] = m[0] = Math.cos(rotate) * scale;
m[2] = -(m[1] = Math.sin(rotate) * scale);
// add the translation
m[4] = x;
m[5] = y;
// calculate the inverse transformation
// first get the cross product of x axis and y axis
cross = m[0] * m[3] - m[1] * m[2];
// now get the inverted axis
im[0] = m[3] / cross;
im[1] = -m[1] / cross;
im[2] = -m[2] / cross;
im[3] = m[0] / cross;
}
Using the function
To use the function is simple. Just call with the desired values for position, scale and rotation.
Applying the inverse
To get the world coordinates (the transformed coordinates) from a pixel space (screen x, y) you need to apply the inverse transform
function toWorld(x,y){
var xx, yy, m, result;
m = invMatrix;
xx = x - matrix[4]; // remove the translation
yy = y - matrix[5]; // by subtracting the origin
// return the point {x:?,y:?} by multiplying xx,yy by the inverse matrix
return {
x: xx * m[0] + yy * m[2],
y: xx * m[1] + yy * m[3]
}
}
So if you want the mouse position in world space
var mouseWorldSpace = toWorld(mouse.x,mouse.y); // get the world space coordinates of the mouse
The function will convert any coordinate that is in screen space to the correct coordinate in world space.
Setting the 2D context transform
To use the transform you can set the 2D context transformation directly with
var m = matrix;
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
Demo
And a demo to show it in use. A lot of extra code but I am sure you can find the parts you need. The Demo animates the transformation by rotating, scaling, and translating using createMatrix then uses toWorld to convert the mouse coordinates to the world space.
// the demo function
var demo = function(){
/** fullScreenCanvas.js begin **/
// create a full document canvas on top
var canvas = (function(){
var canvas = document.getElementById("canv");
if(canvas !== null){
document.body.removeChild(canvas);
}
// creates a blank image with 2d context
canvas = document.createElement("canvas");
canvas.id = "canv";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.position = "absolute";
canvas.style.top = "0px";
canvas.style.left = "0px";
canvas.style.zIndex = 1000;
canvas.ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
return canvas;
})();
var ctx = canvas.ctx;
/** fullScreenCanvas.js end **/
/** MouseFull.js begin **/
// get the mouse data . This is a generic mouse handler I use so a little over kill for this example
var canvasMouseCallBack = undefined; // if needed
var mouse = (function(){
var mouse = {
x : 0, y : 0, w : 0, alt : false, shift : false, ctrl : false,
interfaceId : 0, buttonLastRaw : 0, buttonRaw : 0,
over : false, // mouse is over the element
bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits;
getInterfaceId : function () { return this.interfaceId++; }, // For UI functions
startMouse:undefined,
};
function mouseMove(e) {
var t = e.type, m = mouse;
m.x = e.offsetX; m.y = e.offsetY;
if (m.x === undefined) { m.x = e.clientX; m.y = e.clientY; }
m.alt = e.altKey;m.shift = e.shiftKey;m.ctrl = e.ctrlKey;
if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1];
} else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2];
} else if (t === "mouseout") { m.buttonRaw = 0; m.over = false;
} else if (t === "mouseover") { m.over = true;
} else if (t === "mousewheel") { m.w = e.wheelDelta;
} else if (t === "DOMMouseScroll") { m.w = -e.detail;}
if (canvasMouseCallBack) { canvasMouseCallBack(m.x, m.y); }
e.preventDefault();
}
function startMouse(element){
if(element === undefined){
element = document;
}
"mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",").forEach(
function(n){element.addEventListener(n, mouseMove);});
element.addEventListener("contextmenu", function (e) {e.preventDefault();}, false);
}
mouse.mouseStart = startMouse;
return mouse;
})();
if(typeof canvas === "undefined"){
mouse.mouseStart();
}else{
mouse.mouseStart(canvas);
}
/** MouseFull.js end **/
// some stuff to draw a grid
var gridStart= -(canvas.width/10)*4;
var gridEnd = (canvas.width/10)*14;
var gridStepMajor = canvas.width/10;
var gridStepMinor = canvas.width/20;
var minorCol = "#999";
var majorCol = "#000";
var minorWidth = 1;
var majorWidth = 3;
// some stuf to animate the transformation
var timer = 0;
var timerStep = 0.01;
//----------------------------------------------------------------------------
// the code from the answer
var matrix = [1, 0, 0, 1, 0, 0]; // normal matrix
var invMatrix = [1, 0, 0, 1]; // inverse matrix
function createMatrix(x, y, scale, rotate){
var m = matrix; // just to make it easier to type and read
var im = invMatrix; // just to make it easier to type and read
// create the scale and rotation part of the matrix
m[3] = m[0] = Math.cos(rotate) * scale;
m[2] = -(m[1] = Math.sin(rotate) * scale);
// translation
m[4] = x;
m[5] = y;
// calculate the inverse transformation
// first get the cross product of x axis and y axis
cross = m[0] * m[3] - m[1] * m[2];
// now get the inverted axies
im[0] = m[3] / cross;
im[1] = -m[1] / cross;
im[2] = -m[2] / cross;
im[3] = m[0] / cross;
}
// function to transform to world space
function toWorld(x,y){
var xx, yy, m;
m = invMatrix;
xx = x - matrix[4];
yy = y - matrix[5];
return {
x: xx * m[0] + yy * m[2] ,
y: xx * m[1] + yy * m[3]
}
}
//----------------------------------------------------------------------------
// center of canvas
var cw = canvas.width / 2;
var ch = canvas.height / 2;
// the main loop
function update(){
var i,x,y,s;
ctx.setTransform(1, 0, 0, 1, 0, 0); // reset the transform so we can clear
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
// animate the transformation
timer += timerStep;
x = Math.cos(timer) * gridStepMajor * 5 + cw; // position
y = Math.sin(timer) * gridStepMajor * 5 + ch;
s = Math.sin(timer/1.2) + 1.5; // scale
//----------------------------------------------------------------------
// create the matrix at x,y scale = s and rotation time/3
createMatrix(x,y,s,timer/3);
// use the created matrix to set the transformation
var m = matrix;
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5]);
//----------------------------------------------------------------------------
//draw a grid
ctx.lineWidth = 2;
ctx.beginPath();
ctx.strokeStyle = majorCol ;
ctx.lineWidth = majorWidth;
for(i = gridStart; i <= gridEnd; i+= gridStepMajor){
ctx.moveTo(gridStart, i);
ctx.lineTo(gridEnd, i);
ctx.moveTo(i, gridStart);
ctx.lineTo(i, gridEnd);
}
ctx.stroke();
ctx.strokeStyle = minorCol ;
ctx.lineWidth = minorWidth;
for(i = gridStart+gridStepMinor; i < gridEnd; i+= gridStepMinor){
ctx.moveTo(gridStart, i);
ctx.lineTo(gridEnd, i);
ctx.moveTo(i, gridStart);
ctx.lineTo(i, gridEnd);
}
ctx.stroke();
//---------------------------------------------------------------------
// get the mouse world coordinates
var mouseWorldPos = toWorld(mouse.x, mouse.y);
//---------------------------------------------------------------------
// marke the location with a cross and a circle;
ctx.strokeStyle = "red";
ctx.lineWidth = 3;
ctx.beginPath();
ctx.moveTo(mouseWorldPos.x - gridStepMajor, mouseWorldPos.y)
ctx.lineTo(mouseWorldPos.x + gridStepMajor, mouseWorldPos.y)
ctx.moveTo(mouseWorldPos.x, mouseWorldPos.y - gridStepMajor)
ctx.lineTo(mouseWorldPos.x, mouseWorldPos.y + gridStepMajor)
ctx.stroke();
ctx.fillStyle = "red";
ctx.strokeStyle = "yellow";
ctx.lineWidth = 4;
ctx.beginPath();
ctx.arc(mouseWorldPos.x, mouseWorldPos.y, 6, 0, Math.PI*2);
ctx.fill();
ctx.stroke();
ctx.fillStyle = "Blue";
ctx.setTransform(1,0,0,1,0,0);
ctx.font = "18px Arial";
var str = "Mouse canvas X: "+ mouse.x + " Y: " + mouse.y;
ctx.fillText(str , 10 ,18);
var str = "Mouse world X: "+ mouseWorldPos.x.toFixed(2) + " Y: " + mouseWorldPos.y.toFixed(2);
ctx.fillText(str , 10 ,36);
// if not over request a new animtion frame
if(!endItAll){
requestAnimationFrame(update);
}else{
// if done remove the canvas
var can = document.getElementById("canv");
if(can !== null){
document.body.removeChild(can);
}
// flag that we are ready to start again
endItAll = false;
}
}
update(); // start the animation
}
// Flag to indicate that the current execution should shut down
var endItAll = false;
// resizes but waits for the current running animnation to shut down
function resizeIt(){
endItAll = true;
function waitForIt(){
if(!endItAll){
demo();
}else{
setTimeout(waitForIt, 100);
}
}
setTimeout(waitForIt, 100);
}
// starts the demo
demo();
// listen to resize events and resize canvas if needed
window.addEventListener("resize",resizeIt)
Go step by step :
Find the coordinates of the mouse on the canvas:
var rect = canvas.getBoundingClientRect();
var xMouse = event.clientX - rect.left;
var yMouse = event.clientY - rect.top;
Normalize those coordinates so they are in [0;1] :
var relX = xMouse / canvas.width;
var relY = yMouse / canvas.height;
now say you view is defined by a rect called... well... viewRect, the position of the mouse in the view is :
var viewX = viewRect.left + relX*(viewRect.right-viewRect.left);
var viewY = viewRect.top + relY*(viewRect.bottom-viewRect.top);
When you launch your app your rect is 0,0,canvasWidth, canvasHeight.
When you click, you have to adjust your rect.
If clicking means zooming by zFactor at viewX, viewY, code will look like :
var newWidth = viewRect.width/zFactor;
var newHeight = viewRect.height/zFactor;
viewRect.left = viewX - newWidth/2;
viewRect.right = viewX + newWidth/2;
viewRect.top = viewY - newHeight/2;
viewRect.bottom = viewY + newHeight/2;
your draw method should look like :
context.save();
context.translate((viewRect.left+viewRect.right )/ 2, ...) ;
var scaleFactor = (viewRect.right+viewRect.left ) / canvasWidth;
context.scale(scaleFactor, scaleFactor);
... draw
context.restore();
Instead of keeping track of the various transformations, I inquired of the canvas for the current transform:
function mouseUp(canvas, event) {
const rect = canvas.getBoundingClientRect();
const transform = graphics.getTransform();
const canvasX = (event.clientX - rect.left - transform.e) / transform.a;
const canvasY = (event.clientY - rect.top - transform.f) / transform.d;
The doesn't deal with skew, but it gives a general idea of the approach I'm using.

Grid-based lighting engine

I am trying to create a grid-based shadow engine using JavaScript. My algorithm shades squares based on whether their position is 'behind' a block, relative to a light source.
This is my algorithm so far: https://jsfiddle.net/jexqpfLf/
var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var light_x = 90;
var light_y = 110;
var block_x = 120;
var block_y = 120;
requestAnimationFrame(render);
function render() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
var vec1_x = block_x - light_x;
var vec1_y = block_y - light_y;
var vec1_mag = Math.sqrt(vec1_x * vec1_x + vec1_y * vec1_y);
ctx.fillStyle = 'black';
for (var x = 0; x < canvas.width; x += 10)
for (var y = 0; y < canvas.width; y += 10) {
var vec2_x = x - light_x;
var vec2_y = y - light_y;
var vec2_mag = Math.sqrt(vec2_x * vec2_x + vec2_y * vec2_y);
var dotproduct = vec1_x * vec2_x + vec1_y * vec2_y;
var angle = Math.acos(dotproduct / (vec1_mag * vec2_mag));
if (vec2_mag > vec1_mag && angle < Math.PI / 8 / vec1_mag * 10)
ctx.fillRect(x, y, 10, 10);
}
ctx.fillStyle = 'green';
ctx.fillRect(light_x, light_y, 10, 10);
ctx.fillStyle = 'red';
ctx.fillRect(block_x, block_y, 10, 10);
requestAnimationFrame(render);
}
onkeydown = function (e) {
if (e.which == 65)
light_x -= 10;
if (e.which == 68)
light_x += 10;
if (e.which == 87)
light_y -= 10;
if (e.which == 83)
light_y += 10;
}
Unfortunately, as you can see in the demonstration, I'm finding some angles problematic. Some squares which should be shaded are left unshaded. This happens for some angles and distances (between the light source and the block) but not others. For example, placing the light source at (60, 90) shows these artifacts as well.
I am using the vectors LP (from light to point) and LB (from light to block), taking their dot product and dividing by the product of their magnitudes to find the shading angle, then scaling this angle depending on the distance between the block and light source.
Could these artifacts be due to rounding errors? Or is there a problem with the algorithm itself? Any help would be appreciated :-)
Great question. You're not gonna like this one.
It's a floating point math issue.
What's the value of Math.acos(1.000000000000000)?
0.
Whats the value of Math.acos(1.0000000000000003)?
NaN.
That's annoying, isn't it?
At some values, your dotproduct is 6000 and your (vec1_mag * vec2_mag) is 5999.999999999999, leading to the issue above.
Changing (vec1_mag * vec2_mag) to Math.round(vec1_mag * vec2_mag) will solve your problem.
While we're staring at this fiddle together you should know that there's another bug:
for (var x = 0; x < canvas.width; x += 10) {
for (var y = 0; y < canvas.width; y += 10) {
You use canvas.width here twice. I imagine the second one ought to be canvas.height, so make sure what you wrote there is what you want.
Working fiddle for you!

Categories