Canvas Object moving diagonally, not vertically - javascript

For school, I need to make a game, so I had the idea of making a game similar to, "magic touch:wizard for hire", which is a game where balloons fall out of the sky, and you need to make drawings to pop them, that's the idea I'm going for.
But now, my problem:
I had the idea of making balloons appearing randomly through the x axis,(so it would always spawn at the y=0 and the x axis be random),but that's where my problem's at. I made tree functions for it:
This is the function that creates the random number:
function aleatorizar() {
let random= Math.floor(Math.random()*canvas.width);
return random;
}
This is the function that draws the balloons with text on them:
function desenharbombas(x){
ctx.beginPath();
ctx.arc(x,posição,50,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle= "#000000";
ctx.fill();
function escrever(){
ctx.font="17px Arial Black";
ctx.fillStyle="#ffffff";
ctx.fillText("texto",x,posição );
}
escrever()
}
And this is the function that animates the balloons falling down:
function animar(y){
ctx.clearRect(0,0,canvas.width,canvas.height);
posição=posição+1;
desenharbombas(y)
requestAnimationFrame(animar);
}
In my logic (and trough hours of testing), I cannot put the random function inside my bomb drawing function, because it will make the random function change every time the drawing function is called, so that'd make the bombs glitch left and right on the screen.
So I created this logic, which the bomb drawing function would only receive a random number, when the animate function was called, but it didn't work, because now the bomb is falling diagonally. I know it's really hard to understand, but if anyone knows how to help or wants to hop on discord to help me...(caue#7600)

How about something like this:
const canvas = document.getElementById("c");
const ctx = canvas.getContext("2d");
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
var bombas = []
class bomba {
constructor(name, x, y, speed, radius) {
this.name = name
this.x = x
this.y = y
this.speed = speed
this.radius = radius
}
draw() {
ctx.beginPath();
ctx.arc(this.x += this.speed, this.y, this.radius, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillText(this.name, this.x, this.y);
}
}
function aleatorizar() {
return Math.floor(Math.random() * canvas.width);
}
bombas.push(new bomba("A", aleatorizar()/4, 10, 0.20, 8))
bombas.push(new bomba("B", aleatorizar()/4, 40, 0.25, 12))
bombas.push(new bomba("C", aleatorizar()/4, 70, 0.15, 10))
function animar() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
bombas.forEach(b => b.draw())
requestAnimationFrame(animar);
}
animar()
<canvas id="c"></canvas>
You can see that we have a class bomba and on the constructor we pass all the initial parameters needed to draw what we need, then in the draw() function we increase the value of the x by the given speed, and draw the arc and the text.
With this new class you can add more random parameters, right now it is just the Y that is random but on that same way you can do it for the speed and also the radius
And if you really want to build a game you should look into game engines, there are many good Open Source, github has a nice collection of well known:
https://github.com/collections/javascript-game-engines
As your game gets more complex you are going to run into problems that are already solved in a game engine, it just depends how far do you want to go with this game

Related

Having trouble drawing a progressive line from coordinate to coordinate in canvas

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.

How to rotate one object at another (slowly)

I have been looking around for this function and thus far I just can't find any I can make any sense of. I already have a rotating function to make it equal to the position but slowly is proving to be a bit harder with 0-360 and all.
I am using a html canvas 2d context to render the objects on a Cartesian coordinate system .
I would like object1 to face at positionX and positionY at a turn rate (R) , fairly straightforward.
there is no need for me to supply any code since your likely going to make your own anyways. But I will anyways here you go:
let faceAt = function (thisObject,positionX,positionY) {
let desiredLocationX = positionX - thisObject.transform.x;
let desiredLocationY = positionY -thisObject.transform.y;
thisObject.transform.rotation = Math.degrees(Math.atan2(desiredLocationY, desiredLocationX));
};
The (Math.degrees) function converts radians to degrees.
This thread says it all : https://www.google.ca/amp/s/jibransyed.wordpress.com/2013/09/05/game-maker-gradually-rotating-an-object-towards-a-target/amp/
This question is quite unclear. But, I'm assuming you essentially just want to rotate an element around an arbitrary point on a HTML5 canvas.
On a canvas, you can only draw one element at a time. You can't really manipulate singular elements - for example, you can't rotate an element by itself. Instead, you'd need to rotate the entire canvas. This will always rotate around the centre of the canvas, but if you move the canvas origin, then you will draw on a different part of the canvas; thus allowing you to rotate around a point.
Check out the following example. You can click anywhere on the canvas to make the square rotate around that point. Hopefully this is what you are after:
let cv = document.getElementById("cv");
let ctx = cv.getContext("2d");
let angle = 0;
//Variables you can change:
let speed = 1; //Degrees to rotate per frame
let pointX = 250; //The x-coord to rotate around
let pointY = 250; //The y-coord to rotate around
ctx.fillStyle = "#000";
setInterval(()=>{ //This code runs every 40ms; so that the animation looks smooth
angle = (angle + speed) % 360; //Increment the angle. Bigger changes here mean that the element will rotate faster. If we go over 360deg, reset back to 0.
ctx.clearRect(0, 0, 400, 400); //Clear away the previous frame.
//Draw the point we are rotating around
ctx.beginPath();
ctx.arc(pointX,pointY,5,0,2*Math.PI);
ctx.fill();
ctx.closePath();
ctx.save(); //Save the state before we transform and rotate the canvas; so we can go back to the unrotated canvas for the next frame
ctx.translate(pointX, pointY); //Move the origin (0, 0) point of the canvas to the point to rotate around. The canvas always rotates around the origin; so this will allow us to rotate around that point
ctx.rotate(angle*Math.PI/180); //Rotate the canvas by the current angle. You can use your Math.degrees function to convert between rads / degs here.
ctx.fillStyle = "#f00"; //Draw in red. This is also restored when ctx.restore() is called; hence the point will always be black; and the square will always be red.
ctx.fillRect(0, 0, 50, 50); //Draw the item we want rotated. You can draw anything here; I just draw a square.
ctx.restore(); //Restore the canvas state
}, 40);
//Boring event handler stuff
//Move the point to where the user clicked
//Not too robust; relys on the body padding not changing
//Really just for the demo
cv.addEventListener("click", (event)=>{
pointX = event.clientX - 10;
pointY = event.clientY - 10;
});
#cv {
border:solid 1px #000; /*Just so we can see the bounds of the canvas*/
padding:0;
margin:0;
}
body {
padding:10px;
margin:0;
}
<canvas id="cv" width="400" height="400"></canvas><br>
Click on the canvas above to make the rectangle rotate around the point that was clicked.

Creating an "Animated" Spiky Ball in Processing.js

For my class, I'm creating a project in which a level includes a cursor in the form of an ellipse that reacts to a mousePressed command by having spikes protrude from within the ellipse and then recede back into the ellipse.
The code for my cursor is right here:
class Cursor{
float r;
float x;
float y;
Cursor(float _r){
r = _r;
x = 0;
y = 0;
}
void setLocation (float _x, float _y) {
x = _x;
y = _y;
}
void display(){
noStroke();
fill(230, 242, 255);
ellipse(x, y, r, r);
}
My teacher suggested I use createShape (TRIANGLE) within the ellipse and animate one of the vertices from each spike coming out at the appropriate time, but I simply wasn't able to follow his instructions as well as I had needed to.
Any assistance on this matter would be greatly appreciated. I do hope to further use the animated vertices to "pop" a surrounding object later on, but I'm only mentioning that in the case that it's important for the initial creation and animation.
Thank you very much in advance!
Your teacher was probably talking about the beginShape(TRIANGLES) function. From the reference:
beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
vertex(60, 20);
vertex(70, 75);
vertex(80, 20);
endShape();
(source: processing.org)
You could use this function to generate your spikes around your circle. You'll have to figure out the x and y positions of the triangles around the circle, but you can do that using an incrementing angle and the cos() and sin() functions.

Use setInterval to infinitely draw rectangles

I'm trying to learn how to learn basic animation using ONLY canvas with the setInterval function.
I'm trying to draw a simple rectangle to the screen and move it to the right 1 pixel every 100 milliseconds. However when I do it paints over the previous rectangle. I called clearRect() but that doesn't seem to do anything.
How can I make this rectangle smoothly travel across the screen without leaving a trail?
Also if there is a better way to do this rather than using clearRect() and translate() please do share.
var ctx = document.getElementById('mycanvas').getContext('2d');
var a = setInterval(draw,100);
var x = 50;
function draw()
{
ctx.clearRect(0,0,300,300);
ctx.translate(1,0);
ctx.rect(x,50,50,50);
ctx.stroke();
}
You can do it two different ways:
You can continue to use rect() and stroke(), but you need to call beginPath() beforehand. When you call methods like rect(), a list, called the "path," is kept of all of the shapes, or "subpaths," that you've created. Then, when you call stroke(), the entire path is drawn. Thus, even if you clear the screen, all of the past rectangles are still remembered in the path, and drawn again. beginPath() clears that list.
var x = 50;
function draw() {
ctx.clearRect(0, 0, 300, 300);
ctx.beginPath();
ctx.rect(x, 50, 50, 50);
ctx.stroke();
x++;
}
Or, you can combine the rect() and stroke() into one line, and not need to call beginPath(). That's because the rectangle is both created and drawn at the same time, and isn't put in the list.
var x = 50;
function draw() {
ctx.clearRect(0, 0, 300, 300);
ctx.strokeRect(x, 50, 50, 50);
x++;
}
Either way, I advise incrementing x instead of using translate(), because translate() basically moves the imaginary "pen" that is drawing on the canvas. So if you translate(50, 50), and then you try to draw a rectangle at (0, 0) on the canvas, it will actually be at (50, 50).
As Microsoft puts it on MSDN, "The translate method effectively remaps the (0,0) origin on a canvas."
If you repeatedly do that, it will become difficult to keep track of where you're actually drawing.
Your x variable never changes, so your shape will not move. You need to increment x to get movement:
var x = 50;
function draw(){
ctx.clearRect(0,0,300,300);
ctx.translate(1,0);
ctx.rect(x,50,50,50);
ctx.stroke();
x++;
}
In order to get a smooth animation with shapes and other sprites moving across the screen (or even staying still) it would be better to make a clearScreen method that will basically draw over the entire canvas in whatever background color the canvas is. It is basically just a function that will draw a white (or whatever background color you are using) rectangle over the entire canvas. Then, you call the draw function that will make all the necessary drawings. That way, there won't be any trail or anything of the past movements and you won't have to call clearRect() on every single rectangle you make.
Basically, the function will erase the canvas and you can redraw whatever you need to in order to make the animation of the box moving across the screen.
Does that make sense?
EDIT:
Also, to be clear, you would make your own clearScreen method based on what size your canvas is and what color your background is. Its not hard, all it does is draw a rectangle over the screen.
Simply increment x on every call:
var canvas = document.getElementById('mycanvas')
var ctx = canvas.getContext('2d');
var a = setInterval(draw,100);
var x = 50;
function draw(){
canvas.width = canvas.width; // clears the canvas
ctx.rect(x++,50,50,50);
ctx.stroke();
if (x > 250) // resets the position
x = 50;
}
<canvas id="mycanvas"></canvas>
I also removed that translation since there's no need to do it just for the square animation.
Try beginPath() and closePath():
var maxX, x = 0,
s = 50,
maxY;
var repaint = function(ctx) {
if (x + s >= maxX) { //reached end of the canvas
return;
}
ctx.clearRect(0, 0, maxX, maxY); //clear previous
ctx.beginPath(); //start drawing
ctx.rect(x, s, s, s);
ctx.stroke();
ctx.closePath(); //stop drawing
x++;
setTimeout(function() {
repaint(ctx); //continue here
}, 100);
};
var cnvs = document.getElementById('canvas');
maxX = cnvs.width;
maxY = cnvs.height;
repaint(cnvs.getContext('2d'));
canvas {
border: 1px solid grey;
}
<canvas width="360" height="180" id='canvas'>HTML5 canvas not supported</canvas>

Draw arc with increasing radius?

I am drawing an arc which increases gradually and turns in to a circle.On completion of animation(arc turning in to a circle) i want to draw another circle with increased radius with the previous circle persisting and the second animation continuing.
Arc to circle fiddle
After the circle is drawn,it gets washed out which is something that I dont want and continue the second animation.
Some unnecessary animation appears after the completion.
What should I do?
MyCode:
setInterval(function(){
context.save();
context.clearRect(0,0,500,400);
context.beginPath();
increase_end_angle=increase_end_angle+11/500;
dynamic_end_angle=end_angle+increase_end_angle;
context.arc(x,y,radius,start_angle,dynamic_end_angle,false);
context.lineWidth=6;
context.lineCap = "round";
context.stroke();
context.restore();
if(dynamic_end_angle>3.5*Math.PI){ //condition for if circle completion
draw(radius+10);//draw from same origin and increasd radius
}
},66);
window.onload=draw(30);
UPDATE:when should i clear the interval to save some cpu cycles and why does the animation slows down on third circle ??
First of all, about the flicker: you are using setInterval and not clearing it for the next draw(). So there’s that.
But I’d use a completely different approach; just check the time elapsed since the start, and draw an appropriate number of circles using a loop.
var start = new Date().getTime();
var timePerCircle = 2;
var x = 190, y = 140;
function draw() {
requestAnimationFrame(draw);
g.clearRect(0, 0, canvas.width, canvas.height);
var t = (new Date().getTime() - start) / 1000;
var circles = t / timePerCircle;
var r = 30;
do {
g.beginPath();
g.arc(x, y, r, 0, Math.PI * 2 * Math.min(circles, 1));
g.stroke();
r += 10;
circles--;
} while(circles > 0);
}
draw();
This snippet from your code has some flaw.
if(dynamic_end_angle>3.5*Math.PI){ //condition for if circle completion
draw(radius+10);//draw from same origin and increased radius
}
The recursive call to draw() will continue to run after the first circle was drawn completely. This is why the performance will be slow down immediately. You need to somehow block it.
I did a simple fix, you can polish it if you like. FIDDLE DEMO
My fix is to remove context.clearRect(0, 0, 500, 400); and change the new circle drawing logic to:
if (dynamic_end_angle > 3.5 * Math.PI) { //condition for if circle completion
increase_end_angle = 0; // this will prevent the draw() from triggering multiple times.
draw(radius + 10); //draw from same origin.
}
In this stackoverflow thread, it mentions how to make it more smooth. You'd better use some drawing framework since the optimization needs a lot of work.
When should I clear the interval to save some cpu cycles?
Better yet not use an interval at all for a couple of reasons:
Intervals are unable to sync to monitor's VBLANK gap so you will get jerks from time to time.
If you use setInterval you risk stacking calls (not high risk in this case though).
A much better approach is as you probably already know to use requestAnimationFrame. It's less CPU hungry, is able to sync to monitor and uses less resources in general even less if current tab/window is not active.
Why does the animation slows down on third circle ??
Your drawing calls are accumulating which slows everything down (setInterval is not cleared).
Here is a different approach to this. It's a simplified way and uses differential painting.
ONLINE DEMO
The main draw function here takes two arguments, circle index and current angle for that circle. The circles radius are stored in an array:
...,
sa = 0, // start angle
ea = 359, // end angle
angle = sa, // current angle
oldAngle = sa, // old angle
steps = 2, // number of degrees per step
current = 0, // current circle index
circles = [70, 80, 90], // the circle radius
numOfCircles = circles.length, ...
The function stores the old angle and only draws a new segment between old angle and new angle with 0.5 added to compensate for glitches due to anti-alias, rounding errors etc.
function drawCircle(circle, angle) {
angle *= deg2rad; // here: convert to radians
/// draw arc from old angle to new angle
ctx.beginPath();
ctx.arc(0, 0, circles[circle], oldAngle, angle + 0.5);
ctx.stroke();
/// store angle as old angle for next round
oldAngle = angle;
}
The loop increases the angle, if above or equal to end angle it will reset the angle and increase the current circle counter. When current counter has reach last circle the loop ends:
function loop() {
angle += steps;
/// check angle and reset, move to next circle
if (angle >= ea - steps) {
current++;
angle = sa;
oldAngle = angle;
}
drawCircle(current, angle);
if (current < numOfCircles)
requestAnimationFrame(loop);
}

Categories