We Keep Coding

Canvas onClick add to array

I got this HTML5 canvas project I'm struggling with.
Basically I'm trying to add a new particle on click.
And the particles is pushed to the particles array, but
the particle does not show. I can see that the particle is pushed to the array with the mouse coordinates, but it doesn't seem like the last particle is drawn.
What am I doing wrong?
See example.
// Request animation frame
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Set full-screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Options
var num = 100; // Number of particles to draw
var size = 2; // Particle size
var color = '#dd64e6'; // Particle color
var min_speed = .3; // Particle min speed
var max_speed = 2; // Particle max speed
var dist = 100; // Max distance before line gets cut
var dist_sq = dist * dist; // Dist squared
var line_width = 2; // Line width
var background = '#181b23'; // Background color
var line_color = '#1d2631'; // Line color
var fps = 60;
var now, delta;
var then = Date.now();
var interval = 1000 / fps;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
num = 10;
fps = 29;
}
// Particles array
var particles = [];
for (var i = 0; i < num; i++) {
particles.push(
new create_particle(false, false)
);
}
// Lets animate the particle
function draw() {
// Loop
requestAnimationFrame(draw);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
// Background
ctx.fillStyle = background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Lets draw particles from the array now
draw_particles();
}
}
// Draw particles
function draw_particles() {
for (var t = 0; t < num; t++) {
// This particle
var p = particles[t];
for (var q = t + 1; q < num; q++) {
// Check X first, maybe we don't need to
// calculate Y
var x = particles[q].x - p.x;
if ((x *= x) < dist_sq) {
// Check passed, calculate Y
var y = particles[q].y - p.y;
if (x + (y * y) < dist_sq) {
// Check passed, draw line
draw_line(p.x, p.y, particles[q].x, particles[q].y);
}
}
}
// Color
ctx.fillStyle = color;
// Circle path
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
ctx.fill();
// Lets use the velocity now
p.x += p.vx;
p.y += p.vy;
// If there is only 1 particle
// show X, Y, and velocity
if (num === 1) {
ctx.fillText('Y:' + p.y, 20, 20);
ctx.fillText('X:' + p.x, 20, 40);
ctx.fillText('YV:' + p.vy, 20, 60);
ctx.fillText('XV:' + p.vx, 20, 80);
}
// To prevent the balls from moving out of the canvas
if (p.x < size) p.vx *= (p.vx / -p.vx);
if (p.y < size) p.vy *= (p.vy / -p.vy);
if (p.x > canvas.width - size) p.vx *= (-p.vx / p.vx);
if (p.y > canvas.height - size) p.vy *= (-p.vy / p.vy);
}
}
// Return a particle object
function create_particle(xPos, yPos) {
// Position
if (xPos == false && yPos == false) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
} else {
this.x = xPos;
this.y = yPos;
}
// Velocity
this.vx = random_int_between(min_speed, max_speed);
this.vy = random_int_between(min_speed, max_speed);
// Size
this.radius = size;
console.log('particle created at: ' + this.x + ', ' + this.y);
}
// Returns an random integer, positive or negative
// between the given value
function random_int_between(min, max) {
var num = Math.floor(Math.random() * max) - min;
num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
return num;
}
// Draw a line between 2 particles
// given the particles x and y position
function draw_line(p_x, p_y, p2_x, p2_y) {
ctx.beginPath();
ctx.lineWidth = line_width;
ctx.strokeStyle = line_color;
ctx.moveTo(p_x, p_y);
ctx.lineTo(p2_x, p2_y);
ctx.stroke();
}
// When the canvas is clicked
// add new particle
function clicked(e) {
var mouseXpos, mouseYpos;
if (e.offsetX) {
mouseXpos = e.offsetX;
mouseYpos = e.offsetY;
} else if (e.layerX) {
mouseXpos = e.layerX;
mouseYpos = e.layerY;
}
particles.push(
new create_particle(mouseXpos, mouseYpos)
);
}
canvas.addEventListener('click', function(e) {
clicked(e);
}, false);
draw();
<!DOCTYPE html>
<html>
<head>
<style>
* {margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<canvas id="canvas">{{-- The background --}}</canvas>
</body>
</html>

Well since no one else answered this other than in a comment, I thought I would answer it so that others might not wonder about the same thing.
The problem is that you use a variable "num" to hold the number of particles. If you instead use "particles.length" you can
// Request animation frame
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
// Canvas
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Set full-screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Options
var num = 100; // Number of particles to draw
var size = 2; // Particle size
var color = '#dd64e6'; // Particle color
var min_speed = .3; // Particle min speed
var max_speed = 2; // Particle max speed
var dist = 100; // Max distance before line gets cut
var dist_sq = dist * dist; // Dist squared
var line_width = 2; // Line width
var background = '#181b23'; // Background color
var line_color = '#1d2631'; // Line color
var fps = 60;
var now, delta;
var then = Date.now();
var interval = 1000 / fps;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
num = 10;
fps = 29;
}
// Particles array
var particles = [];
for (var i = 0; i < num; i++) {
particles.push(
new create_particle(false, false)
);
}
// Lets animate the particle
function draw() {
// Loop
requestAnimationFrame(draw);
now = Date.now();
delta = now - then;
if (delta > interval) {
then = now - (delta % interval);
// Background
ctx.fillStyle = background;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Lets draw particles from the array now
draw_particles();
}
}
// Draw particles
function draw_particles() {
for (var t = 0; t < particles.length; t++) {
// This particle
var p = particles[t];
for (var q = t + 1; q < particles.length; q++) {
// Check X first, maybe we don't need to
// calculate Y
var x = particles[q].x - p.x;
if ((x *= x) < dist_sq) {
// Check passed, calculate Y
var y = particles[q].y - p.y;
if (x + (y * y) < dist_sq) {
// Check passed, draw line
draw_line(p.x, p.y, particles[q].x, particles[q].y);
}
}
}
// Color
ctx.fillStyle = color;
// Circle path
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
ctx.fill();
// Lets use the velocity now
p.x += p.vx;
p.y += p.vy;
// If there is only 1 particle
// show X, Y, and velocity
if (num === 1) {
ctx.fillText('Y:' + p.y, 20, 20);
ctx.fillText('X:' + p.x, 20, 40);
ctx.fillText('YV:' + p.vy, 20, 60);
ctx.fillText('XV:' + p.vx, 20, 80);
}
// To prevent the balls from moving out of the canvas
if (p.x < size) p.vx *= (p.vx / -p.vx);
if (p.y < size) p.vy *= (p.vy / -p.vy);
if (p.x > canvas.width - size) p.vx *= (-p.vx / p.vx);
if (p.y > canvas.height - size) p.vy *= (-p.vy / p.vy);
}
}
// Return a particle object
function create_particle(xPos, yPos) {
// Position
if (xPos == false && yPos == false) {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
} else {
this.x = xPos;
this.y = yPos;
}
// Velocity
this.vx = random_int_between(min_speed, max_speed);
this.vy = random_int_between(min_speed, max_speed);
// Size
this.radius = size;
console.log('particle created at: ' + this.x + ', ' + this.y);
}
// Returns an random integer, positive or negative
// between the given value
function random_int_between(min, max) {
var num = Math.floor(Math.random() * max) - min;
num *= Math.floor(Math.random() * 2) == 1 ? 1 : -1;
return num;
}
// Draw a line between 2 particles
// given the particles x and y position
function draw_line(p_x, p_y, p2_x, p2_y) {
ctx.beginPath();
ctx.lineWidth = line_width;
ctx.strokeStyle = line_color;
ctx.moveTo(p_x, p_y);
ctx.lineTo(p2_x, p2_y);
ctx.stroke();
}
// When the canvas is clicked
// add new particle
function clicked(e) {
var mouseXpos, mouseYpos;
if (e.offsetX) {
mouseXpos = e.offsetX;
mouseYpos = e.offsetY;
} else if (e.layerX) {
mouseXpos = e.layerX;
mouseYpos = e.layerY;
}
particles.push(
new create_particle(mouseXpos, mouseYpos)
);
}
canvas.addEventListener('click', function(e) {
clicked(e);
}, false);
draw();
<!DOCTYPE html>
<html>
<head>
<style>
* {margin:0;padding:0;overflow:hidden;}
</style>
</head>
<body>
<canvas id="canvas">{{-- The background --}}</canvas>
</body>
</html>
I will dare to go outside the scope of our problem because you could prevent such issues in the future by utilizing Array.prototype.forEach, and move the drawing of the dots and constrain them to new functions. With the added benefit of simplifying your code.
// Draw particles
function draw_particles() {
particles.forEach(function(p,pi){
particles.forEach(function(p2,p2i){
if(pi === p2i){
return;
}
// Check X first, maybe we don't need to
// calculate Y
var x = p2.x - p.x;
if ((x *= x) < dist_sq) {
// Check passed, calculate Y
var y = p2.y - p.y;
if (x + (y * y) < dist_sq) {
// Check passed, draw line
draw_line(p.x, p.y, p2.x, p2.y);
draw_dot(p);
constrain(p);
}
}
});
});
}
// Draw particle
function draw_dot(p){
// Color
ctx.fillStyle = color;
// Circle path
ctx.beginPath();
ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
ctx.fill();
ctx.closePath();
// Lets use the velocity now
p.x += p.vx;
p.y += p.vy;
// If there is only 1 particle
// show X, Y, and velocity
if (particles.length === 1) {
ctx.fillText('Y:' + p.y, 20, 20);
ctx.fillText('X:' + p.x, 20, 40);
ctx.fillText('YV:' + p.vy, 20, 60);
ctx.fillText('XV:' + p.vx, 20, 80);
}
}
// Constrain particle movement
function constrain(p){
// To prevent the balls from moving out of the canvas
if (p.x < size) p.vx *= (p.vx / -p.vx);
if (p.y < size) p.vy *= (p.vy / -p.vy);
if (p.x > canvas.width - size) p.vx *= (-p.vx / p.vx);
if (p.y > canvas.height - size) p.vy *= (-p.vy / p.vy);
}
Using Array.prototype.length and Array.prototype.forEach reduces the risk of heading into issues of array indices.

How not to make the canvas flash when i call clearRect [duplicate]

I've a screen being redraw every 25ms, and images are flickering, here is my code
var FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
gameLoop();
function gameLoop(){
context.clearRect(0, 0, 640, 640);
renderMap();
window.setTimeout(gameLoop, intervalTime);
}
and here is renderMap() function
function renderMap(){
var startX = playerX - (screenW / 2);
var startY = playerY - (screenH / 2);
maxX = playerX + (screenW / 2);
maxY = playerY + (screenH / 2);
$.getJSON('mapa3.json', function(json){
for (x = startX; x < maxX; x=x+32){
for (y = startY; y < maxY; y=y+32){
intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
context.putImageData(getTile(intTile - 1), x - startX, y - startY);
}
}
});
var imgCharacter = new Image();
imgCharacter.src = 'char.png';
var posX = (screenW - imgCharacter.width) / 2;
var posY = (screenH - imgCharacter.height) / 2;
imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}
}
What changes do I need to make to the code to stop flickering?

I believe it is because you are loading the image each iteration. Try putting the var imgCharacter..., the following line, and the image's onload function outside of renderMap so it is only ran once
var imgCharacter = new Image();
imgCharacter.onload = function () {
renderMap();
}
imgCharacter.src = 'char.png';
function renderMap() {
var startX = playerX - (screenW / 2);
var startY = playerY - (screenH / 2);
maxX = playerX + (screenW / 2);
maxY = playerY + (screenH / 2);
$.getJSON('mapa3.json', function (json) {
for (x = startX; x < maxX; x = x + 32) {
for (y = startY; y < maxY; y = y + 32) {
intTile = json.layers[0].data[((y / 32) * 100) + (x / 32)];
context.putImageData(getTile(intTile - 1), x - startX, y - startY);
}
}
});
var posX = (screenW - imgCharacter.width) / 2;
var posY = (screenH - imgCharacter.height) / 2;
context.drawImage(imgCharacter, posX, posY)
}
Thank you to markE for letting me know the onload function also needs to go outside renderMap, I overlooked it the first time

Load all images and other data before draw and storage them inside array.
Better use requestAnimationFrame.
Remember, getting JSON (or other data) can take some time.

How could a log X, Y mouse position on my grid?

I have this script to create grid of rectangles, how would I go about logging map co ordinates of the mouse position so if the mouse was on 1,1 it would log 1,1?:
+---+---+---+---+
|0,0|0,1|0,2|0,3|
+---+---+---+---+
|1,0|1,1|1,2|1,3|
+---+---+---+---+
|2,0|2,1|2,2|2,3|
+---+---+---+---+
|3,0|3,1|3,2|3,3|
+---+---+---+---+
here is the script I have to create the grid;
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = (32 * 12);
canvas.height = (32 * 12);
document.body.appendChild(canvas);
var posX = 0;
var posY = 0;
var tileSize = 32;
$(document).ready(function(){
drawGrid();
});
function drawGrid(){
for(var x = 0; x < 12; x++){
for(var y = 0; y < 12; y++){
ctx.rect(posX, posY, tileSize, tileSize);
ctx.stroke();
posX += tileSize;
}
posY += tileSize;
posX = 0;
}
}

Just quantize the mouse position based on the tile size, for example (assuming you have already obtained the mouse position):
var gridX = (mouseX / tileSize)|0;
var gridY = (mouseY / tileSize)|0;
Now you can log gridX and gridY as the original grid definition.

On mouse move get the x and y position of the mouse and divide them by the tileSize.
Demo on Fiddle
canvas.onmousemove = function(e) {
var mouseX = e.pageX;
var mouseY = e.pageY;
document.getElementsByTagName('div')[0].innerHTML = '(' + Math.floor(mouseX / tileSize) + ', ' + Math.floor(mouseY / tileSize) + ')';
}

redrawing canvas html5 without flickering

I've a screen being redraw every 25ms, and images are flickering, here is my code
var FRAME_RATE = 40;
var intervalTime = 1000/FRAME_RATE;
gameLoop();
function gameLoop(){
context.clearRect(0, 0, 640, 640);
renderMap();
window.setTimeout(gameLoop, intervalTime);
}
and here is renderMap() function
function renderMap(){
var startX = playerX - (screenW / 2);
var startY = playerY - (screenH / 2);
maxX = playerX + (screenW / 2);
maxY = playerY + (screenH / 2);
$.getJSON('mapa3.json', function(json){
for (x = startX; x < maxX; x=x+32){
for (y = startY; y < maxY; y=y+32){
intTile = json.layers[0].data[((y/32)* 100) + (x/32)];
context.putImageData(getTile(intTile - 1), x - startX, y - startY);
}
}
});
var imgCharacter = new Image();
imgCharacter.src = 'char.png';
var posX = (screenW - imgCharacter.width) / 2;
var posY = (screenH - imgCharacter.height) / 2;
imgCharacter.onload = function(){context.drawImage(imgCharacter, posX, posY)}
}
What changes do I need to make to the code to stop flickering?

I believe it is because you are loading the image each iteration. Try putting the var imgCharacter..., the following line, and the image's onload function outside of renderMap so it is only ran once
var imgCharacter = new Image();
imgCharacter.onload = function () {
renderMap();
}
imgCharacter.src = 'char.png';
function renderMap() {
var startX = playerX - (screenW / 2);
var startY = playerY - (screenH / 2);
maxX = playerX + (screenW / 2);
maxY = playerY + (screenH / 2);
$.getJSON('mapa3.json', function (json) {
for (x = startX; x < maxX; x = x + 32) {
for (y = startY; y < maxY; y = y + 32) {
intTile = json.layers[0].data[((y / 32) * 100) + (x / 32)];
context.putImageData(getTile(intTile - 1), x - startX, y - startY);
}
}
});
var posX = (screenW - imgCharacter.width) / 2;
var posY = (screenH - imgCharacter.height) / 2;
context.drawImage(imgCharacter, posX, posY)
}
Thank you to markE for letting me know the onload function also needs to go outside renderMap, I overlooked it the first time

Load all images and other data before draw and storage them inside array.
Better use requestAnimationFrame.
Remember, getting JSON (or other data) can take some time.

Bouncing Ball Game, Mouse Detect Event, JavaScript

I've already created a bouncing ball which bounces off the walls of the HTML5 Canvas that I have specified.
My goal is to make a "Game Over" screen appear when the pointer (mouse) hovers over the ball.
I have already searched and found some tutorials on mouse events in Javascript, but I'm not really sure how to implement them into my code =/.
Any help would be amazing.
<script>
var x = Math.floor((Math.random() * 600) + 1);
var y = Math.floor((Math.random() * 300) + 1);
var dx = 2;
var dy = 4;
function begin()
{
gameCanvas = document.getElementById('gameCanvas');
context = gameCanvas.getContext('2d');
return setInterval (draw, 20);
}
begin();
function draw()
{
context.clearRect(0,0,600,300);
context.fillStyle = "#0000FF";
context.beginPath();
context.arc(x,y,80,0,Math.PI*2,true);
context.closePath();
context.fill();
if (x < 0 || x > 600) dx=-dx
if (y < 0 || y > 300) dy=-dy;
x += dx;
y += dy;
}
gameCanvas.onmousemove = function (e)
{
var gameCanvas = e.target;
var context = gameCanvas.getContext('2d');
var coords = RGraph.getMouseXY(e);
}

You need to check if the mouse is hovering over the ball (hit test) by checking the distance of the ball to the cursor. If the distance is smaller than radius of the ball, it means that the mouse is over the ball.
Note, that you need to adjust the code below to your needs
Example:
var mouse_x = 10, mouse_y = 10, ball_x = 10, ball_y = 10, ball_radius = 70, is_game_over = false
if( Math.sqrt( Math.pow( mouse_x - ball_x, 2 ) + Math.pow( mouse_x - ball_x, 2 )) < ball_radius && !is_game_over ) {
console.log('Cursor is over the mouse, game over')
is_game_over = true
}
Do it for every frame update.

you can add onmousemove=SetValues() to your body element like so:
<body onmousemove=SetValues()>
and change your code to this:
<script>
var x = Math.floor((Math.random() * 600) + 1);
var y = Math.floor((Math.random() * 300) + 1);
var dx = 2;
var dy = 4;
var mouseX;
var mouseY;
function setValues(e)
{
mouseX = e.pageX; //get mouse x
mouseY = e.pageY; //get mouse y
}
function begin()
{
gameCanvas = document.getElementById('gameCanvas');
context = gameCanvas.getContext('2d');
return setInterval (draw, 20);
}
begin();
function draw()
{
context.clearRect(0,0,600,300);
context.fillStyle = "#0000FF";
context.beginPath();
context.arc(x,y,80,0,Math.PI*2,true);
context.closePath();
context.fill();
if (x < 0 || x > 600) dx=-dx
if (y < 0 || y > 300) dy=-dy;
x += dx;
y += dy;
//check if the mouse is on the ball
var centerX = x + 80; //center of ball
var centerY = y; //center of ball
if(Math.pow((mouseX - centerX), 2) + Math.pow((mouseY - centerY), 2) <= 6400){
//do whatever to end game
}
}