I am trying to make a 3D like effect in HTML Canvas. I want to have the effect of a 2D object coming towards the first person view. Is there a way to make it look like a rectangle is moving on the Z axis?
This is my code. I sort of have what I want but it does not really look natural.
Use the up arrow key to move the object. You can also use the left and right arrow keys to move it to the left and right.
I am trying to make a game similar to this game: http://game.notch.net/christmaschopping/
var canvas = document.getElementById('canv');
var c = canvas.getContext('2d');
window.onload = function() {
start();
setInterval(update, 10);
}
class Obstacle {
constructor(x, y) {
this.x = x;
this.y = y;
this.w = 30;
this.h = 60;
this.xSpeed = 0;
this.ySpeed = 0;
this.passedView = false;
this.zSpeed = 0;
}
show() {
if (!this.passedView) {
c.fillStyle = 'green';
c.fillRect(this.x, this.y, this.w, this.h);
}
}
update() {
this.x += this.xSpeed;
this.y += this.ySpeed;
this.w+=this.zSpeed;
this.h+=this.zSpeed;
this.x-=this.zSpeed/2;
this.y-=this.zSpeed/2;
}
}
var ob;
function start() {
ob = new Obstacle(385, 370);
}
function update() {
//background
c.fillStyle = 'lightblue';
c.fillRect(0, 0, 800, 800);
//obstacle
ob.show();
ob.update();
}
function keyDown(e) {
switch(e.keyCode) {
case 39:
ob.xSpeed = 5;
break;
case 37:
ob.xSpeed = -5;
break;
case 38:
ob.zSpeed = 5;
break;
}
}
function keyUp(e) {
switch(e.keyCode) {
case 39:
ob.xSpeed = 0;
break;
case 37:
ob.xSpeed = 0;
break;
case 38:
ob.zSpeed = 0;
break;
}
}
document.onkeydown = keyDown;
document.onkeyup = keyUp;
<canvas id='canv' width=800 height=800></canvas>
<script src="main.js"></script>
its hard to perceive 3D looking a one object so give yourself several objects moving independently ... let the objects move on their own
I suggest you introduce the notion of perspective projection ... its why objects moving away get smaller
to keep it simple assign objects a size then scale that size using their Z dimension location
in addition to giving each object a location in 3d ( x,y,z ) put all of them inside a world say the inside of a cube or a sphere
launch each new object in some random direction at a random speed, random size
put all objects into some datastructure so you have an array you can iterate across to do things to each object
introduce the notion of time into this world ... iterate across the datastructure of your objects and perform actions as in
gently move the x,y,z location of the current object just a tiny bit in each dim ... keep tract of the sign ( pos/neg ) of each increment in each dimension
if the current x or y or z goes outside the interior of the cube or sphere then toggle the sign of the increment for that dimension as mentioned above
when you draw a given object scale its size based on its Z dimension ... this is perspective projection
object_rendered_size = object_constant_size * Z dimension for this object
advance the clock to the next epoch ... put above loop inside an outer loop so everything keeps moving all the time
And yes this will give you 3D ... no need to jump straight into WebGL until after projects like this just code themselves ... with today's hardware you can go very far using your current approach of using canvas ... teach yourself linear algebra to manipulate object or camera location using matrix mechanics
have Fun !!!
Extremely new to javascript, and this is my first project! I am building a line graph utilizing Html Canvas and Javascript. I have a function that generates random numbers for X and Y coordinates, which then fills an empty array. I want to plot points and connect them as the Array fills. The end goal is to build a line graph that scales based on the points. I know the code is a little messy (I apologize), and there are other issues, but the problem I am focusing on right now is when the code runs it plots point A, then A B, then A B C, then A B C D, etc. I would like it to plot the points progressively, so it is point A then point B then point C, etc line by line. Hope this makes sense!
From what I have seen from others, it looks like the best way to do this is to reference the previous point in the Array and make sure the line to is from that previous point. I thought that's what I was doing here or at least attempting to do.
// Return the x pixel for a graph point
function getXPixel(val) {
return ((canvas.width - xMarg) / plotArray.length) * val + (xMarg);
}
// Return the y pixel for a graph point
function getYPixel(val) {
return canvas.height - (((canvas.height - yMarg) / getMaxY()) * val) - yMarg;
}
function plotPoints() {
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
for (var i = 1; i < plotArray.length; i++) {
ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
}
ctx.stroke();
label();
drawCircle();
}
function drawCircle() {
ctx.fillStyle = '#333';
for (var i = 0; i < plotArray.length; i++) {
ctx.beginPath();
ctx.arc(getXPixel(i), getYPixel(plotArray[i].Y), 4, 0, Math.PI * 2, true);
ctx.fill();
}
}
function setPlotHistory(){
var plotHistory = plotArray.length
plotArray[plotHistory.res] = {};
plotArray[plotHistory.moveToX] = plotArray.X;
plotArray[plotHistory.moveToY] = plotArray.Y;
}
runTest = setInterval(function() {
var res = { //Create object of results with each test
X: testsRun,
Y: getRandomNumber(10,150)
};
if (plotArray.length === 5) {
plotArray.shift();
}
plotArray.push(res); //put the result in the array
setPlotHistory(res);
document.getElementById('output').innerHTML = "Tests Run: " + testsRun;
testsRun++; //up the number of tests by one
plotPoints();
},testInt);
Not sure, how much info I should provide and did not want to fill the page up with the entire code, so for reference you can see my full code here https://jsfiddle.net/Crashwin/72vd1osL/3/
Any help is appreciated!
If I'm understanding the desired results correctly... You should clear the canvas and redraw with each call. This will require redrawing the axis. You may want to do an initial draw to setup the graph before the first timer is fired.
Modified plotPoints function:
//Draw the line graph
function plotPoints() {
// clear the canvas for each draw.
ctx.clearRect(0,0,canvas.width,canvas.height);
// put the axis back.
drawAxis();
// draw all points and lines.
ctx.strokeStyle = '#f00';
ctx.beginPath();
ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
for (var i = 1; i < plotArray.length; i++) {
ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
}
ctx.stroke();
label();
drawCircle();
}
You should leave the plotArray as is (don't delete points) so it becomes your plot hisotry. No need for setPlotHistory().
Also in the drawAxis function you should set a strokeStyle otherwise it will be in the style defined in plotPoints i.e. #f00.
Modified drawAxis function:
function drawAxis() {
// set axis stroke style
ctx.strokeStyle = "#333";
ctx.beginPath(); //new line
ctx.moveTo(xMarg, 10); //move to (40, 10)
ctx.lineTo(xMarg, canvas.height - yMarg); // line to (40, height - 40)
ctx.lineTo(canvas.width, canvas.height - yMarg); // line to (width, height - 40)
ctx.stroke(); //draw lines
}
Working example over here: https://jsfiddle.net/8yw5mouz/1/
Ps. This is a pretty nice bit of code. I like how it scales.
All I need is to have this object travel left and right across the top of the canvas. Currently it spawns and travels right absolutely fine, then stops once it reaches the right edge of the canvas.
//mainEnemy Variables
var mainEnemy_x = 10;
var mainEnemy_y = 10;
var mainEnemyHeight = 50;
var mainEnemyWidth = 25;
var mainEnemyRight = true;
var mainEnemyLeft = false;
var mainEnemy_dx = 2;
//Drawing the Main Enemy
function drawMainEnemy()
{
ctx.beginPath();
ctx.rect(mainEnemy_x, mainEnemy_y, mainEnemyHeight, mainEnemyWidth);
ctx.fillStyle = "green";
ctx.fill();
ctx.closePath();
}
//Movement speed of mainEnemy
if(mainEnemyRight && mainEnemy_x < canvas.width-mainEnemyWidth)
{
mainEnemy_x += 5;
}
else if(mainEnemyLeft && mainEnemy_x > 0)
{
mainEnemy_x -= 5;
}
//mainEnemy moves across the top of the canvas
if(mainEnemy_x + mainEnemy_dx - mainEnemyWidth > canvas.width)
{
mainEnemy_dx = -mainEnemy_dx;
}
ball_x += dx;
ball_y += dy;
mainEnemy_x += mainEnemy_dx;
}
This is all the code relevant to the object I need help with. I've tried just reversing it's x movement, with the mainEnemy_dx = -mainEnemy_dx; line, but this isn't working. I can see this code is an absolute mess at the moment, I just need to get it working then time for some serious cleanup.
Any and all help would be greatly appreciated!
First of all, you have two movement systems. One with the left and right flags and constants added or subtracted from x and the other with dx. You should just use one or the other, the latter being simpler.
For the jitter, you have to either also check that the current dx is positive when going over the right by border (and negative on left) and then switch the sign, or move the object left when a collision with right border is found.
At the moment you are moving the object 7 units right every time, then when border is found only dx is used (2 or -2) but since your object can be over the border it might vibrate between 2 and -2 always. But at least the right branch will always try to move 5 units right even when dx is negative.
Using a debugger to step through the code and inspecting the variables and branches taken while vibrating on the right edge will show exactly how it behaves.
Ok, here is something simple, I hope. I've a div container in which I can click and what I'm trying to do is to create two perpendicular lines which cross each other where I've clicked. So far I've written those:
#fr{
float: right;
margin-top: 5%;
height: 720px;
width: 1280px;
position: relative;
background-image: url(blueboard.jpg);
border: 1px solid black;
clear:none;
}
canvas{
border:1px solid red;
float: right;
height: 720px;
width: 1280px;
clear:none;
}//css part, I actually place the canvas on top of my div
//and on html...
<canvas id="line"></canvas>
//js
function saveOO(e){
var xo, yo;
xo=e.clientX;
yo=e.clientY;
...
document.getElementById("saved").innerHTML="The (0;0) = " +"("+xo+";"+yo+")";
document.getElementById("ball").style.left=xo+'px';
document.getElementById("ball").style.top=yo+'px';
xylines(xo, yo);
...;
}
function lines(xo, yo){
var xo, yo, xl, xline, yl, yline, Dx, Dy, a, b, c, d, e;
xo=xo;
yo=yo;
a=$("#fr").position();
b=$("#fr").width();
c=$("#fr").height();
Dy=a.top+100;
Dx=a.left;
d=Dx+b;
e=Dy+c;
xline = document.getElementById("line");
xl=xline.getContext("2d");
xl.beginPath();
xl.moveTo(Dx,yo);
xl.lineTo(d,yo);
xl.lineWidth = 15;
xl.stroke();
yline = document.getElementById("line");
yl=yline.getContext("2d");
yl.beginPath();
yl.moveTo(xo,Dy);
yl.lineTo(xo,e);
yl.lineWidth = 15;
yl.stroke();}
I have, as well, checked whether all variables assign a value and everything is good with that. The crossing point should be exactly where the blue ball is, it also positions on the place where it's clicked. As you can see on the image no lines show, even if I remove the blue background. Please, help me, maybe something is missing. I'm looking forward to your answers.
:)
P.S. Dy is Y of the top left corner, Dx respectively X of the top left corner
Update 2
A slightly amended fiddle where the lines span the entire width/height of the canvas:
https://jsfiddle.net/0y37qwvw/5/
This is by using 0 as the starting point for each and canvas.width/canvas.height as the ending point.
Update
Here is a fiddle demonstrating the use of a canvas overlay and responding to a click events.
https://jsfiddle.net/0y37qwvw/4/
The important thing is to get the relative x and y co-ordinates right, which I have done using event.offsetX and event.offsetY and a fallback for when they are not implemented:
document.getElementById("canvas-overlay").addEventListener("click", function( event ) {
var x, y, clientRect;
clientRect = event.target.getBoundingClientRect();
x = (typeof event.offsetX !== 'undefined' ? event.offsetX : (event.clientX - clientRect.left));
y = (typeof event.offsetY !== 'undefined' ? event.offsetY : (event.clientY - clientRect.top));
lines(x, y, 50, 50);
}, false);
Original answer
Your code is incomplete, so it is hard to be sure what the exact problems are.
One problem though is that you have not directly set the width and height of the canvas element, which will result in the canvas being scaled.
You can do this on the canvas element:
<canvas id="line" height="720" width="1280"></canvas>
Demonstrated at:
https://jsfiddle.net/0y37qwvw/1/
You could also set the width and height programmatically:
var canvas = document.getElementById("line");
canvas.width = 1280;
canvas.height = 720;
https://jsfiddle.net/0y37qwvw/3/
Compare to what happens if the width and height are only set by CSS:
https://jsfiddle.net/0aph7yno/
If you still can't get it to work, set up a plunker/fiddle with the broken code.
Here is some code I have written, I tried to use as much as OOP style so it's easier to expand it. But still simple and clear.
http://jsfiddle.net/eeqhc2tn/2/
var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
var drawThese = [];
canvas.width = 500;
canvas.height = 500;
render();
//Line Code
function Line(sx, sy, ex, ey) {
this.sx = sx;
this.sy = sy;
this.ex = ex;
this.ey = ey;
}
Line.prototype.draw = function () {
ctx.beginPath();
ctx.moveTo(this.sx, this.sy);
ctx.lineTo(this.ex, this.ey);
ctx.stroke();
};
Line.drawCrossLines = function (x, y) {
var horizontal = new Line(0, y, canvas.width, y);
var vertical = new Line(x, 0, x, canvas.height);
drawThese.push(horizontal);
drawThese.push(vertical);
}
canvas.addEventListener('click', function (e) {
Line.drawCrossLines(e.offsetX, e.offsetY);
});
//Circle code
function Circle(x, y, r) {
this.x = x;
this.y = y;
this.r = r;
}
Circle.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
ctx.fill();
};
//Moving Circle Code that extends Circle
function MovingCircle() {
Circle.call(this,0,0,10);
}
MovingCircle.prototype = Object.create(Circle.prototype);
MovingCircle.prototype.constructor = MovingCircle;
MovingCircle.prototype.move = function (x, y) {
this.x = x;
this.y = y;
}
var pointer = new MovingCircle();
drawThese.push(pointer);
canvas.addEventListener('mousemove',function(e){
pointer.move(e.offsetX, e.offsetY);
});
//Rendering and animation code
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawThese.forEach(function (e) {
e.draw();
});
requestAnimationFrame(render);
}
I've found a working solution on my own, of course inspired by rpn. If you would like to make same or similar thing to what I this topic is about, a system including a container, canvas and a mouse event (click, in this case) you will have to follow this steps.
1. You cannot draw directly to a div, you've to create something like an invisible overlay for canvas and to place it perfectly over the div.
2. An important part is getting the proper coordinates, take into account that there are some tad but important differences between the various coords get methods. (`clientX/Y`, `offsetX/Y` and so on). It matters a lot.
3. Last but not at least, you should carefully consider how you get container's dimensions, as you'll need them later. Remember! We are in a container, a.k.a. working with an area which is just part of the whole window (your browser).
At first I was receiving my coordinates with clientX/Y but maybe due to some mismatches between the get method for coordinates and the one for div's dimensions I was hammered by bugs. To solve this, I've created a method from which I take mouse click coordinates with offsetX/Y. This way you have to think of you container as if it is a separate coordinate system, different from your window's(which by default is general). This means that now the top left corner of this div has x:y = (0;0);
function getcooords(){
xo = e.offsetX;
yo = e.offsetY;
DrawLines(x0, y0); //invoke func DrawLines
}
Now we go to the moment where we should draw our lines.
function DrawLines(x0,y0){
//your variables here...
w=$("#yourcontainer").width();
h=$("#yourcontainer").height();
Dy=0;
Dx=0;
}
That's the second step, Dx and Dy are the top and left properties of the div. Hence, from the what I've just said above, they will be equal to 0, both. Width and height of the container I take simply with jq but you can do it on another preferred way.
Generally speaking, that's the core of your drawing algorithm after we've taken needed dimensions and coordinates:
xl.beginPath();
xl.moveTo(b,yo);//start point of line
xl.lineTo(Dx,yo);//end point of line
xl.stroke(); //DRAW IT :)
Now, I've forgot to tell you that you have to define your lines at first, where should they be, what properties, styles should they have, etc..:
var xline = document.getElementById("line");
xl=xline.getContext("2d");
Remember! If you would like to delete, to erase the what you've drawn you'd have to define your lines FIRST and delete them after their definition. I'm saying definition, not drawing and you can draw the next 1, 2, 3... n lines and delete them over and over again if you follow this principle.
That's it guys, I hope I've explained it well, sorry for my English, probably I've made some tad mistakes but I hope you understand me. If you have any questions, please feel free to ask me, I'll try to do my best in order to help you.
:)
Hello I'm trying to create a rectangle that grows from the side of the canvas until it fills the whole canvas, once it has done that shrink back to is original state, the approach I'm taking is using requestAnimationFrame /cancelAnimationFrame for some reason I'm not sure cancelAnimationFrame does not seem to work my code is the following one :
<script>
function grRectangle(){
var canvas = document.getElementById("paper");
var context= canvas.getContext("2d");
//var forpi = Math.PI * 2;
//context.fillStyle = "black";
context.fillRect(0,0,canvas.width,canvas.height);
var posX = 200;
var posY = 100;
var color = 0;
function draw(){
context.fillStyle = 'hsl('+ color++ + ',100%,50%)';
context.beginPath();
context.rect(0,0,posX,posY);
context.fill();
posX = posX + 0.9;
posY = posY + 0.9;
if(posX < canvas.width ){
requestAnimationFrame(draw);
} if (posX >= canvas.width){
posX = posX - 0.9;
posY = posY - 0.9;
cancelAnimationFrame(draw);
}
}
draw();
};
</script>
<body onload= "grRectangle();" >
<h1>Growing Rectangle</h1>
<canvas id = "paper" width="800" height="600">
</canvas>
Any help is kindly appreciatted
It seems to me like the code you wrote doesn't actually need a cancelAnimationFrame. I am not sure what you think it does exactly, but it seems like you misunderstood it.
The cancelAnimationFrame method is used to prevent a previous call to requestAnimationFrame from getting executed, as long as this didn't happen yet. There are really few situations where you need this.
In your case I would put that growth-per-frame constant of 0.9 into a variable. When the rectangle size reaches the upper bound, just change it to -0.9 and it will get smaller again. When it reaches the lower bound, change it again to 0.9 and it will grow again.
You will, however, not see that shrinking, because you aren't erasing your canvas. Every frame is drawn on top of the previous one. You will have to erase your canvas at the beginning of your drawing loop. To do that, move the code which fills the canvas with a black rectangle into the drawing loop (remember to set the fill-style to black).