Kaizokupuffball - 7 months ago 69
Javascript Question

# HTML5 Canvas draw line distance between points

I'm trying to learn HTML5 and found a very simple particle system wich i modded a bit.
I would like to create a line, between particles, if the distance between the particles is within the range 0-20.

What I currently have draws a line between every particle, no matter the distance.

This is where I try to check the distance, but I can't figure out how to do this. Would appreciate any help and explanations. Thanks in advance.

``````           // This particle
var p = particles[t];

// Check position distance to other particles
for (var q = 0; q < particles.length; q++) {

if (particles[q].x - p.x < line_distance || p.x - particles[q].x < line_distance) {
ctx.beginPath();
ctx.lineWidth = .1;
ctx.strokeStyle = '#fff';
ctx.moveTo(p.x, p.y);
ctx.lineTo(particles[q].x, particles[q].y);
ctx.stroke();
}

}
``````

``````// 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 fullscreen
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

// Options
var num =30;            // Number of particles to draw
var size = 3;           // Particle size
var color = '#fff';     // Particle color
var min_speed = 1;      // Particle min speed
var max_speed = 3;      // Particle max speed
var line_distance = 20; // This is the max distance between two particles
// if we want to draw a line between them

// Particles array
var particles = [];
for (var i = 0; i < num; i++) {
particles.push(
new create_particle()
);
}

// Lets animate the particle
function draw() {

// Background
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Lets draw particles from the array now
for (var t = 0; t < particles.length; t++) {

// This particle
var p = particles[t];

for (var q = 0; q < particles.length; q++) {

// Check position distance
if (particles[q].x - p.x < line_distance || p.x - particles[q].x < line_distance) {
ctx.beginPath();
ctx.lineWidth = .1;
ctx.strokeStyle = '#fff';
ctx.moveTo(p.x, p.y);
ctx.lineTo(particles[q].x, particles[q].y);
ctx.stroke();
}

}

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

}

// Loop
requestAnimationFrame(draw);

}

// Function for particle creation
function create_particle() {

// Random position
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;

// Velocity
this.vx = random_int_between(min_speed, max_speed);
this.vy = random_int_between(min_speed, max_speed);

// Color & Size
this.color = color;

}

// Random number between (used for speed)
function random_int_between(min, max) {
return Math.floor(Math.random() * max) + min;
}

draw();``````

``<canvas id="canvas"></canvas>``

This is just your test which is wrong.

a-b < c || b-a < c is always true (except if a-b == c)

replace by abs(a-b) < c if you want to test "x" distance, or by using the above formula if you want an euclidian distance

``````// 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 fullscreen
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

// Options
var num =30;            // Number of particles to draw
var size = 3;           // Particle size
var color = '#fff';     // Particle color
var min_speed = 1;      // Particle min speed
var max_speed = 3;      // Particle max speed
var line_distance = 20; // This is the max distance between two particles
// if we want to draw a line between them

// Particles array
var particles = [];
for (var i = 0; i < num; i++) {
particles.push(
new create_particle()
);
}

// Lets animate the particle
function draw() {

// Background
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Lets draw particles from the array now
for (var t = 0; t < particles.length; t++) {

// This particle
var p = particles[t];

for (var q = 0; q < particles.length; q++) {

// Check position distance
if (Math.abs(particles[q].x - p.x) < line_distance) {
ctx.beginPath();
ctx.lineWidth = .1;
ctx.strokeStyle = '#fff';
ctx.moveTo(p.x, p.y);
ctx.lineTo(particles[q].x, particles[q].y);
ctx.stroke();
}

}

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

}

// Loop
requestAnimationFrame(draw);

}

// Function for particle creation
function create_particle() {

// Random position
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;

// Velocity
this.vx = random_int_between(min_speed, max_speed);
this.vy = random_int_between(min_speed, max_speed);

// Color & Size
this.color = color;

}

// Random number between (used for speed)
function random_int_between(min, max) {
return Math.floor(Math.random() * (max-min)) + min;
}

draw();``````
``<canvas id="canvas" width="300" height="300"></canvas>``

``````// 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 fullscreen
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

// Options
var num =30;            // Number of particles to draw
var size = 3;           // Particle size
var color = '#fff';     // Particle color
var min_speed = 1;      // Particle min speed
var max_speed = 3;      // Particle max speed
var line_distance = 20; // This is the max distance between two particles
// if we want to draw a line between them

// Particles array
var particles = [];
for (var i = 0; i < num; i++) {
particles.push(
new create_particle()
);
}

// Lets animate the particle
function draw() {

// Background
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Lets draw particles from the array now
for (var t = 0; t < particles.length; t++) {

// This particle
var p = particles[t];

for (var q = 0; q < particles.length; q++) {

// Check position distance
if (particles[q].x - p.x < line_distance || p.x - particles[q].x < line_distance) {
ctx.beginPath();
ctx.lineWidth = .1;
ctx.strokeStyle = '#fff';
ctx.moveTo(p.x, p.y);
ctx.lineTo(particles[q].x, particles[q].y);
ctx.stroke();
}

}

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

}

// Loop
requestAnimationFrame(draw);

}

// Function for particle creation
function create_particle() {

// Random position
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;

// Velocity
this.vx = random_int_between(min_speed, max_speed);
this.vy = random_int_between(min_speed, max_speed);

// Color & Size
this.color = color;
``<canvas id="canvas"></canvas>``