Kaizokupuffball 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;
this.radius = size;

}

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

draw();

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




Answer

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;
			this.radius = size;
		  
		}

		// 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;
			this.radius = size;
		  
		}

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

		draw();
<canvas id="canvas"></canvas>

Comments