All geek questions in one place

Canvas onClick add to array

I got this HTML5 canvas project that I am struggling with. Basically I am trying to add a new particle on click. And the particles are pushed to an array of particles, but the particle is not shown. I see that the particle is being transferred to the array using the mouse coordinates, but it does not seem that the last particle is being drawn. What am I doing wrong?

See an 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>
Run code
+6
source share
1 answer

Well, since no one else answered this differently than in the commentary, I thought I would answer it so that others would not question the same thing.

, num, . "particle.length",

// 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>
Hide result

, , Array.prototype.forEach . .

// 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);
}

Array.prototype.length Array.prototype.forEach .

+1

Source: https://habr.com/ru/post/1016557/

More articles:


All Articles