Develop Reference

Raycasting walls arent drawed equally wide

I am working on a raycaster and followed this tutorial: https://dev.opera.com/articles/3d-games-with-canvas-and-raycasting-part-1/
My questions is about a Bug which draws / calculates Walls in diffrent Width depending on where on the canvas its drawn (so how big the ray angle is to the players point of direction (center view)):
The Walls in drawn in the middle (1.) are small, but those on the left or right (2.) side of the screen are drawn wider. Its easiest to understand when you look at the image. I think I just got the Math wrong, maybe rounded up somewhere I shouldnt but I havent found it yet or could think of any reason this error accures. Its made in a HTML Canvas using JavaScript.
In my first function I am sending out a ray for each x pixel of my canvas:
let resolution = Math.ceil(canvas.width / this.resolution); //canvas width = 1600, resolution = 1
let id = 0;
for (let x = 0; x < resolution; x++) {
let viewDist = (canvas.width / this.resolution) / Math.tan((this.fov / 2)); //fov 90 in rad
let rayx = (-resolution / 2 + x) * this.resolution;
let rayDist = Math.sqrt(rayx * rayx + viewDist * viewDist);
let rayAngle = Math.asin(rayx / rayDist);
let wall = this.castWall(this.pod * Math.PI / 180 + rayAngle);
this.drawWall(x, wall);
}
But I dont think theres anything wrong here. In the second function I am castinbg each ray and giving back the distance to the hit wall. My blocks / walls are 50 wide. My map is stored in and 2D number Array -> this.map.grid, this.map.width holds how many block there are in x direction, this.map.height holds the count in y direction.
castWall(angle) {
const PI2 = Math.PI * 2;
angle %= PI2;
if (angle < 0) {
angle += PI2;
}
let right = angle > PI2 * 0.75 || angle < PI2 * 0.25;
let up = angle < 0 || angle > Math.PI;
let sin = Math.sin(angle);
let cos = Math.cos(angle);
let dist = 0;
let textureX;
let texture;
let slope = sin / cos;
let dXVer = right ? 1 : -1;
let dYVer = dXVer * slope;
let px = this.x / 50;
let py = this.y / 50;
let x = right ? Math.ceil(px) : Math.floor(px);
let y = py + (x - px) * slope;
while (x >= 0 && x < this.map.width && y >= 0 && y < this.map.height) {
let wallX = Math.floor(x + (right ? 0 : -1));
let wallY = Math.floor(y);
if (this.map.grid[wallY][wallX] > 0) {
dist = Math.sqrt(Math.pow(x - px, 2) + Math.pow(y - py, 2));
texture = this.map.grid[wallY][wallX];
textureX = (y * 50) % 50;
if (right) {
textureX = 50 - textureX;
}
break;
}
x += dXVer;
y += dYVer;
}
slope = cos / sin;
let dYHor = up ? -1 : 1;
let dXHor = dYHor * slope;
y = up ? Math.floor(py) : Math.ceil(py);
x = px + (y - py) * slope;
while (x >= 0 && x < this.map.width && y >= 0 && y < this.map.height) {
let wallY = Math.floor(y + (up ? -1 : 0));
let wallX = Math.floor(x);
if (this.map.grid[wallY][wallX] > 0) {
let distHor = Math.sqrt(Math.pow(x - px, 2) + Math.pow(y - py, 2));
if (dist === 0 || distHor < dist) {
dist = distHor;
texture = this.map.grid[wallY][wallX];
textureX = (x * 50) % 50;
if (up) {
textureX = 50 - textureX;
}
}
break;
}
x += dXHor;
y += dYHor;
}
return {
distance: dist,
texture: texture,
textureX: textureX
};`
Ive also tried raycasting with other algorithms (Bresenham & DDA) but I never got them really to work. This is the only one which works for me. If you have any questions about the code feel free to ask.

Canvas how to rotate image and redraw without rotating the entire context

I am trying to recreate asteroids with canvas and JS, and am having trouble rotating the ship based on it's angle. I have tested my methods for calculating the angle and converting to radians, and they checkout, and the angle is defined when called in draw(), but the rotation is not occurring. When I can get some rotation going, it rotates the entire context, not the ship.
I have included the entire ship class, but the relevant function is the draw function at the bottom.
function Ship(posOptions) {
let options = {game: posOptions['game'], color: 'green', pos: posOptions['pos'], radius: 20, vel: [0,0], wrappable: true, type: 0}
MovingObject.call(this, options);
this.facingDir = 0;
this.H = window.innerHeight; //*0.75,
this.W = window.innerWidth; //*0.75;
this.xc = this.W/2; //zeby bylo w centrum :v
this.yc = this.H/2; //jw.
this.x = this.xc;
this.y = this.yc;
this.dv = 0.2;
this.dt = 1;
this.vx = 0;
this.vy = 0;
this.maxVel = 10;
}
Utils.inherits(Ship, MovingObject);
//Relocate ship if hit by asteroid.
Ship.prototype.relocate = function () {
this.pos = this.game.randomPosition();
this.vel = [0,0];
};
Ship.prototype.fireBullet = function () {
let bulletVel = [(this.vel[0] * 4), (this.vel[1] * 5) - 10];
let bullet = new Bullet({pos: this.pos, vel: bulletVel, game: this.game});
this.game.bullets.push(bullet);
};
//Calculate velocity based on keyboard input and angle of rotation
Ship.prototype.power = function (impulse) {
if (impulse[0] === -2 && this.facingDir !== Math.PI) {
this.facingDir <= Math.PI ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[0] === 2 && this.facingDir !== 0) {
this.facingDir <= 0 ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[1] === 2 && this.facingDir !== (Math.PI / 2 * 3)) {
this.facingDir <= (3 * Math.PI / 2) ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
if (impulse[1] === -2 && this.facingDir !== (Math.PI / 2)) {
this.facingDir <= (Math.PI / 2) ? this.facingDir += 30 / 180 * Math.PI : this.facingDir -= 30 / 180 * Math.PI;
}
this.vel[0] += impulse[0];
this.vel[1] += impulse[1];
};
Ship.prototype.move = function () {
if (this.isWrappable) {
this.pos = this.game.wrap(this.pos);
}
this.pos[0] += this.vel[0];
this.pos[1] += this.vel[1];
//Attenuate the velocity over time so it doesn't accelerate forever.
this.vel[0] *= .98;
this.vel[1] *= .98;
};
Ship.prototype.convertToRadians = function(degree) {
return degree*(Math.PI/180);
}
Ship.prototype.draw = function (ctx) {
const img = new Image();
img.onload = function () {
ctx.drawImage(img, this.pos[0]-this.radius, this.pos[1]-this.radius)
};
img.src = 'galaga_ship.png';
ctx.drawImage(img, this.pos[0]-this.radius, this.pos[1]-this.radius);
**//This is where I am stuck.**
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.facingDir);
ctx.translate(-7,-10);
ctx.restore();
};
module.exports = Ship;

You are not drawing anything before restoring the context. The way ctx.save() and ctx.restore() should be used is that you save it, with the original rotation and location of the origin, you transform it, do the drawing, then restore it back to where it was originally. Thus only the drawing uses the transformed coordinate system, and then everything else acts as normal again.
**//This is where I am stuck.**
ctx.save();
ctx.translate(this.x,this.y);
ctx.rotate(this.facingDir);
ctx.translate(-7,-10);
// PUT DRAWING YOUR SHIP HERE
ctx.restore();

How to curve a unit mesh between 2 unit vectors

I'm trying to draw 2 unit vectors and then draw an arc between them. I'm not looking for any solution, rather I want to know why my specific solution is not working.
First I pick 2 unit vectors at random.
function rand(min, max) {
if (max === undefined) {
max = min;
min = 0;
}
return Math.random() * (max - min) + min;
}
var points = [{},{}];
points[0].direction = normalize([rand(-1, 1), rand(-1, 1), 0]);
points[1].direction = normalize([rand(-1, 1), rand(-1, 1), 0]);
Note: the math here is in 3D but I'm using a 2d example by just keeping the vectors in the XY plane
I can draw those 2 unit vectors in a canvas
// move to center of canvas
var scale = ctx.canvas.width / 2 * 0.9;
ctx.transform(ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.scale(scale, scale); // expand the unit fill the canvas
// draw a line for each unit vector
points.forEach(function(point) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(point.direction[0], point.direction[1]);
ctx.strokeStyle = point.color;
ctx.stroke();
});
That works.
Next I want to make a matrix that puts the XY plane with its Y axis aligned with the first unit vector and in the same plane as the plane described by the 2 unit vectors
var zAxis = normalize(cross(points[0].direction, points[1].direction));
var xAxis = normalize(cross(zAxis, points[0].direction));
var yAxis = points[0].direction;
I then draw a unit grid using that matrix
ctx.setTransform(
xAxis[0] * scale, xAxis[1] * scale,
yAxis[0] * scale, yAxis[1] * scale,
ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.beginPath();
for (var y = 0; y < 20; ++y) {
var v0 = (y + 0) / 20;
var v1 = (y + 1) / 20;
for (var x = 0; x < 20; ++x) {
var u0 = (x + 0) / 20;
var u1 = (x + 1) / 20;
ctx.moveTo(u0, v0);
ctx.lineTo(u1, v0);
ctx.moveTo(u0, v0);
ctx.lineTo(u0, v1);
}
}
ctx.stroke();
That works too. Run the sample below and see the pink unit grid is always aligned with the green unit vector and facing in the direction of the red unit vector.
Finally using the data for the unit grid I want to bend it the correct amount to fill the space between the 2 unit vectors. Given it's a unit grid it seems like I should be able to do this
var cosineOfAngleBetween = dot(points[0].direction, points[1].direction);
var expand = (1 + -cosineOfAngleBetween) / 2 * Math.PI;
var angle = x * expand; // x goes from 0 to 1
var newX = sin(angle) * y; // y goes from 0 to 1
var newY = cos(angle) * y;
And if I plot newX and newY for every grid point it seems like I should get the correct arc between the 2 unit vectors.
Taking the dot product of the two unit vectors should give me the cosine of the angle between them which goes from 1 if they are coincident to -1 if they are opposite. In my case I need expand to go from 0 to PI so (1 + -dot(p0, p1)) / 2 * PI seems like it should work.
But it doesn't. See the blue arc which is the unit grid points as input to the code above.
Some things I checked. I checked zAxis is correct. It's always either [0,0,1] or [0,0,-1] which is correct. I checked xAxis and yAxis are unit vectors. They are. I checked manually setting expand to PI * .5, PI, PI * 2 and it does exactly what I expect. PI * .5 gets a 90 degree arc, 1/4th of the way around from the blue unit vector. PI gets a half circle exactly as I expect. PI * 2 gets a full circle.
That makes it seem like dot(p0,p1) is wrong but looking at the dot function it seems correct and if test it with various easy vectors it returns what I expect dot([1,0,0], [1,0,0]) returns 1. dot([-1,0,0],[1,0,0]) returns -1. dot([1,0,0],[0,1,0]) returns 0. dot([1,0,0],normalize([1,1,0])) returns 0.707...
What am I missing?
Here's the code live
function cross(a, b) {
var dst = []
dst[0] = a[1] * b[2] - a[2] * b[1];
dst[1] = a[2] * b[0] - a[0] * b[2];
dst[2] = a[0] * b[1] - a[1] * b[0];
return dst;
}
function normalize(a) {
var dst = [];
var lenSq = a[0] * a[0] + a[1] * a[1] + a[2] * a[2];
var len = Math.sqrt(lenSq);
if (len > 0.00001) {
dst[0] = a[0] / len;
dst[1] = a[1] / len;
dst[2] = a[2] / len;
} else {
dst[0] = 0;
dst[1] = 0;
dst[2] = 0;
}
return dst;
}
function dot(a, b) {
return (a[0] * b[0]) + (a[1] * b[1]) + (a[2] * b[2]);
}
var canvas = document.querySelector("canvas");
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext("2d");
function rand(min, max) {
if (max === undefined) {
max = min;
min = 0;
}
return Math.random() * (max - min) + min;
}
var points = [
{
direction: [0,0,0],
color: "green",
},
{
direction: [0,0,0],
color: "red",
},
];
var expand = 1;
var scale = ctx.canvas.width / 2 * 0.8;
function pickPoints() {
points[0].direction = normalize([rand(-1, 1), rand(-1, 1), 0]);
points[1].direction = normalize([rand(-1, 1), rand(-1, 1), 0]);
expand = (1 + -dot(points[0].direction, points[1].direction)) / 2 * Math.PI;
console.log("expand:", expand);
render();
}
pickPoints();
function render() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.save();
ctx.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.scale(scale, scale);
ctx.lineWidth = 3 / scale;
points.forEach(function(point) {
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(point.direction[0], point.direction[1]);
ctx.strokeStyle = point.color;
ctx.stroke();
});
var zAxis = normalize(cross(points[0].direction, points[1].direction));
var xAxis = normalize(cross(zAxis, points[0].direction));
var yAxis = points[0].direction;
ctx.setTransform(
xAxis[0] * scale, xAxis[1] * scale,
yAxis[0] * scale, yAxis[1] * scale,
ctx.canvas.width / 2, ctx.canvas.height / 2);
ctx.lineWidth = 0.5 / scale;
ctx.strokeStyle = "pink";
drawPatch(false);
ctx.strokeStyle = "blue";
drawPatch(true);
function drawPatch(curved) {
ctx.beginPath();
for (var y = 0; y < 20; ++y) {
var v0 = (y + 0) / 20;
var v1 = (y + 1) / 20;
for (var x = 0; x < 20; ++x) {
var u0 = (x + 0) / 20;
var u1 = (x + 1) / 20;
if (curved) {
var a0 = u0 * expand;
var x0 = Math.sin(a0) * v0;
var y0 = Math.cos(a0) * v0;
var a1 = u1 * expand;
var x1 = Math.sin(a1) * v0;
var y1 = Math.cos(a1) * v0;
var a2 = u0 * expand;
var x2 = Math.sin(a0) * v1;
var y2 = Math.cos(a0) * v1;
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.moveTo(x0, y0);
ctx.lineTo(x2, y2);
} else {
ctx.moveTo(u0, v0);
ctx.lineTo(u1, v0);
ctx.moveTo(u0, v0);
ctx.lineTo(u0, v1);
}
}
}
ctx.stroke();
}
ctx.restore();
}
window.addEventListener('click', pickPoints);
canvas {
border: 1px solid black;
}
div {
display: flex;
}
<div><canvas></canvas><p> Click for new points</p></div>

There's nothing wrong with your dot product function. It's the way you're using it:
expand = (1 + -dot(points[0].direction, points[1].direction)) / 2 * Math.PI;
should be:
expand = Math.acos(dot(points[0].direction, points[1].direction));
The expand variable, as you use it, is an angle (in radians). The dot product gives you the cosine of the angle, but not the angle itself. While the cosine of an angle varies between 1 and -1 for input [0,pi], that value does not map linearly back to the angle itself.
In other words, it doesn't work because the cosine of an angle cannot be transformed into the angle itself simply by scaling it. That's what arcsine is for.
Note that in general, you can often get by using your original formula (or any simple formula that maps that [-1,1] domain to a range of [0,pi]) if all you need is an approximation, but it will never give an exact angle except at the extremes.
This can be seen visually by plotting the two functions on top of each other:

Fill color dynamically in Canvas Cylinder I am getting error as max width undefined

kindly bear with my english
I am working on creating (I am new to Canvas) Cylinder. Dynamically fill color when the user enter the percentage value in the text box for example 10% the cylinder fill for 10% like wise till 100%.
I have created cylinder, I have created the little validation for the text box when i tried to other value instead of %
here is my code for validation and Filling color
<script type="text/javascript">
$(document).ready(function() {
$("#my_input").focusout(function(event) {
if($("#my_input").val().indexOf("%") != -1){
if($.isNumeric($("#my_input").val().replace('%',''))) {
// Allow only backspace and delete
if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) {
//$("#myCanvas").animate({ opacity: 0.25 });
}
else {
// Ensure that it is a number and stop the keypress
if (event.keyCode < 48 || event.keyCode > 57) {
event.preventDefault();
}
}
perc = parseInt($("#my_input").val().replace('%','')) / 100;
draw();
}
}
else{
alert('Value in %');
}
});
});
function draw()
{
context.clearRect(0, 0, canvas.width, canvas.height);
var x = 180;
var y = 40;
context.beginPath();
context.rect(x, y, maxWidth, maxHeight);
context.lineWidth = 7;
var per = perc;
if(per > 1)perc = 1;
// fill
context.beginPath();
context.fillStyle = 'yellow';
context.rect(x, y, maxWidth * perc, maxHeight);
context.fill();
}
Here is my HTML Code for canvas
<canvas id="canvas" width="300px" height="300px"></canvas>
Here is the code for Creating Cylinder
<script type='text/javascript'>//<![CDATA[
//the below is code is for to work RequestAnimationFrame (SVG) in all the browsers -- Mahadevan
(function() {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
//the below code is to generate Cylinder object -- Mahadevan
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var degreeAngle = 0;
requestAnimationFrame(animate);
function drawRotatedCylinder(x, y, w, h, degreeAngle) {
context.save();
context.translate(x + w / 10, y + h / 10);
context.rotate(degreeAngle * Math.PI / 180);
drawCylinder(-w / 10, -h / 10, w, h);
context.restore();
}
function drawCylinder(x, y, w, h) {
context.beginPath(); //to draw the top circle
for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01) {
xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
yPos = (y + h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.moveTo(x, y + h / 8);
context.lineTo(x, y + h - h / 8);
for (var i = 0 * Math.PI; i < Math.PI; i += 0.01) {
xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI);
yPos = (y + h - h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI);
if (i == 0) {
context.moveTo(xPos, yPos);
} else {
context.lineTo(xPos, yPos);
}
}
context.moveTo(x + w, y + h / 8);
context.lineTo(x + w, y + h - h / 8);
context.strokeStyle = '#ff0000';
context.stroke();
context.fillStyle = 'yellow';
context.fill();
}
function animate() {
//requestAnimationFrame(animate);
context.clearRect(0, 0, canvas.width, canvas.height);
drawRotatedCylinder(100, 100, 180, 180, degreeAngle++);
}
//]]>
</script>
And here is my Final HTml Code
Numberic Value <input type ="text" id="my_input" class="numeric" name="my_input" placeholder="Enter value"/>
When i tried to enter the value in the textbox that cylinder canvas getting hidden and i am getting an error as Uncaught ReferenceError: maxWidth is not defined
When i checked for circle canvas in google it says i need to put (context.rect) instead of rect i need to put arc i tried putting that still it was not working.
Kindly help me for the above solution
Thanks & REgards
Mahadevan

You should adjust the height of the cylinder, not the width... And should redraw the cylinder if you are clearing (clearRect) the canvas.
You can try with the following function:
function draw()
{
maxWidth = 180;
maxHeight = 140;
context.clearRect(0, 0, canvas.width, canvas.height);
var x = 190;
var y = 260;
var per = perc;
if(per > 1)perc = 1;
// fill
context.beginPath();
context.fillStyle = 'yellow';
context.rect(x-maxWidth/2, y-maxHeight * perc, maxWidth, maxHeight * perc);
context.fill();
drawCylinder(100, 100, 180, 180);
}
Check working Fiddle demo ...

HTML 5 homing missile

This is my class
function Missile(drawX, drawY) {
this.srcX = 0;
this.srcY = 0;
this.width = 16;
this.r = this.width * 0.5;
this.height = 10;
this.drawX = drawX;
this.drawY = drawY;
this.img = planeHomingMissile;
this.rotation = -90;
}
Missile.prototype.draw = function () {
ctxHM.save();
ctxHM.translate(this.drawX, this.drawY);
ctxHM.rotate(this.rotation);
ctxHM.drawImage(this.img, -this.r, -this.r);
ctxHM.restore();
}
And this is my JavaScript logic:
function shootHomingMissile() {
//if(!missileOut) {
hMissile = new Missile(player1.drawX + 22, player1.drawY + 32);
missileOut = true;
//}
}
function updateHomingMissile() {
if(missileOut) {
var targetX = 500 - hMissile.drawX;
var targetY = 50 - hMissile.drawY;
//The atan2() method returns the arctangent of the quotient of its arguments, as a numeric value between PI and -PI radians.
//The number returned represents the counterclockwise angle in radians (not degrees) between the positive X axis and the point (x, y)
var rotations = Math.atan2(targetY, targetX) * 180 / Math.PI;
hMissile.rotation = rotations;
var vx = bulletSpd * (90 - Math.abs(rotations)) / 90;
var vy;
if (rotations < 0)
vy = -bulletSpd + Math.abs(vx);
else
vy = bulletSpd - Math.abs(vx);
hMissile.drawX += vx;
hMissile.drawY += vy;
}
}
function drawHomingMissile() {
ctxHM.clearRect(0,0,575,800);
hMissile.draw();
}
I want my missile(facing upwards) to target (500, 50) and face it while targeting.
the movement seems to work but its not facing the target its just keeps rotating but the missile is going to the target.
I'm a starting developer so my code is kind of mess, please help me :)

You are converting your angle from radians to degrees and is using that for your rotation() which require radians.
Try this in your Missile.prototype.draw:
ctxHM.rotate(this.rotation * Math.PI / 180);
(or simply keep the angle in radians at all stages)