We Keep Coding

How to detect collision between circle and rotating polygon with JavaScript?

My program begins by drawing an n-sided polygon with circles inside it, like this: initial output. The polygon is continuously rotating around its center, and the circles have incredibly simple physics to fall down with gravity and bounce when they hit a wall.
However, I am having trouble detecting when the circles have hit a wall. Here is my current collision detection method, which involves finding the minimum distance from the line to the circle and comparing it to the circle's radius:
function collisionDetector(ball){
//calculate distance from all sides of the polygon
for(var i = 0; i < currentPolyPointsX.length -1; i++){
//get coordinates of line end points
let x1 = currentPolyPointsX[i];
let x2 = currentPolyPointsX[i+1];
let y1 = currentPolyPointsY[i];
let y2 = currentPolyPointsY[i+1];
//calculate length of line
let distanceX = x1 - x2;
let distanceY = y1 - y2;
let length = Math.sqrt( (distanceX *distanceX) + (distanceY*distanceY) );
//calculate dot product of vectors from line ends and ball
let dot = ( ((ball.x - x1) * (x2 - x1)) + ((ball.y - y1) * (y2-y1)) )
/ Math.pow(length, 2);
//calculate x and y coordinate on line (extends to infinity) closest to ball
let closestX = x1 + (dot * (x2 - x1));
let closestY = y1 + (dot * (y2 - y1));
//if those coordinates are not currently on our line, return false
if(!onLine(x1, y1, x2, y2, closestX, closestY)){
return false;
}
//calculate distance from closest coordinates to ball
distanceX = closestX - ball.x;
distanceY = closestY - ball.y;
let distance = Math.sqrt( (distanceX * distanceX) + (distanceY * distanceY) );
//if the ball is less than/equal to one radius away, it has collided
if( distance <= ball.returnRadius() ){
return true;
}else{
return false;
}
}
}
The points of the polygon are pushed into parallel arrays by this code:
function drawPolygon() { //x&y are positions, side is side number, r is size
//get current values of canvas center
var x = canvas.width /2;
var y = canvas.height /2;
var r = canvas.width /2;
//draw {sides} sided polygon
ctx.beginPath();
ctx.moveTo (x + r * Math.cos(0), y + r * Math.sin(0));
//clear currently stored points
currentPolyPointsX.length = 0;
currentPolyPointsY.length = 0;
//draw and save new polygon points in array
for (var i = 1; i <= sides; i ++) {
ctx.lineTo (x + r * Math.cos(i * 2 * Math.PI / sides),
y + r * Math.sin(i * 2 * Math.PI / sides));
currentPolyPointsX.push(x + r * Math.cos(i * 2 * Math.PI / sides)); // <----
currentPolyPointsY.push(y + r * Math.sin(i * 2 * Math.PI / sides)); // <----
}
//draw the polygon
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
}
And then modified to reflect current rotation by this code:
function rotatePolygon(x){
let centerX = canvas.height/2;
let centerY = canvas.height/2;
let angle = x * Math.PI / 180
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//move rotation point to center of canvas
ctx.translate(centerX, centerY);
//rotate around center of canvas
ctx.rotate(angle);
//move back to origin
ctx.translate(-centerX, -centerY);
//draw rotated polygon
drawPolygon();
//adjust coordinates to match rotation
let cos = Math.cos(x * Math.PI / 180);
let sin = Math.sin(x * Math.PI / 180);
for(let i = 0; i < currentPolyPointsX.length; i++){ // <----
currentPolyPointsX[i] = ((cos * (currentPolyPointsX[i] - centerX)) // <----
- (sin * (currentPolyPointsY[i] - centerY)) + centerX); // <----
currentPolyPointsY[i] = ((cos * (currentPolyPointsY[i] - centerY)) // <----
+ (sin * (currentPolyPointsX[i] - centerX)) + centerY); // <----
}
//un-rotate
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(-x * Math.PI / 180);
ctx.translate(-canvas.width/2, -canvas.width/2);
}
For whatever reason, this only detects collision between one of the polygon's walls, which doesn't make sense to me because it is capturing all the polygon's points and should be comparing them all to the circle's positions. This is a snippet of the console output for the parallel arrays:
X values: 100.26987463346667,2.871334680692655,162.69628391854758,358.87207475054254,320.2904320167505
Y values: 250.03751023155084,132.28082275846333,92.90811041924998,186.33112343743124,283.44243315330453
What am I doing wrong? No matter how I fiddle with the code, it only ever detects one wall. Even when rotation is turned off. Even when the number of sides is changed. Even when the speed of rotation as well as the speed of gravity are adjusted. It is driving me nuts! Any help you all provide will be greatly appreciated.
Here is a full snippet of the code in question. If you play with rotation speed, it helps to see which side is operational.
let canvas = document.getElementById("mainCanvas");
let ctx = canvas.getContext("2d");
let rotationSlider = document.getElementById("rotationSlider");
let sidesSlider = document.getElementById("sidesSlider");
//# sided polygon to draw
let sides = 5;
let speed = 33;
let rotationIncrement = 1;
let sideLength = 0;
//stores current corner coordinates for polygon
let currentPolyPointsX = [];
let currentPolyPointsY = [];
const GRAVITY = 1;
const Ball = {
x: 0,
y: 0,
vector: [0, 0],
speed: 0,
gravity: 1,
//returns the ball's radius, which is set according to canvas height
returnRadius: function() {
return canvas.height * 0.01;
}
}
let ballHolder = [];
function startup() {
resizeCanvas();
main();
ballInit(10);
sideLengthInit();
}
function main() {
//get center coordinates of canvas
var center = canvas.width / 2;
//pass desired size, and center coords (x,y) to drawHexagon
rotationLoop();
ballLoop();
setTimeout(main, speed);
}
function ballInit(amount) {
//clear any residual balls
ballHolder = [];
//initialize array of objects with {amount} of balls and give each a random jitter
for (var i = 0; i < amount; i++) {
ballHolder.push(Object.create(Ball));
ballHolder[i].x = canvas.height / 2 + (Math.floor(Math.random() * 50)) * (Math.random() < 0.5 ? -1 : 1);
ballHolder[i].y = canvas.height / 2 + (Math.floor(Math.random() * 50)) * (Math.random() < 0.5 ? -1 : 1);
}
}
//calculated distance between two points via distance formula
function distanceCalc(x1, y1, x2, y2) {
return Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
}
function ballLoop() {
//draw each ball on the canvas, and calculate bounce + collision with container
ballHolder.forEach(ball => {
//calculate gravity
ball.y = gravityCalc(ball);
ctx.beginPath();
ctx.arc((ball.x), (ball.y), canvas.height * 0.01, 0, 2 * Math.PI);
ctx.stroke();
ctx.fillStyle = "blue";
ctx.fill();
//check for collision
if (collisionDetector(ball)) {
//calculate bounce if collision occurs
ball.gravity = ball.gravity * -1;
}
//console.log("ball " + ball.x + " " + ball.y);
});
}
function gravityCalc(ball) {
return ball.y + (GRAVITY * ball.gravity);
}
function sideLengthInit() {
sideLength = distanceCalc(currentPolyPointsX[0], currentPolyPointsY[0],
currentPolyPointsX[1], currentPolyPointsY[1])
}
function collisionDetector(ball) {
//calculate distance from all sides of the polygon
for (var i = 0; i < currentPolyPointsX.length - 1; i++) {
//get coordinates of line end points
let x1 = currentPolyPointsX[i];
let x2 = currentPolyPointsX[i + 1];
let y1 = currentPolyPointsY[i];
let y2 = currentPolyPointsY[i + 1];
//calculate length of line
let distanceX = x1 - x2;
let distanceY = y1 - y2;
let length = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));
//calculate dot product of vectors from line ends and ball
let dot = (((ball.x - x1) * (x2 - x1)) + ((ball.y - y1) * (y2 - y1))) /
Math.pow(length, 2);
//calculate x and y coordinate on line (extends to infinity) closest to ball
let closestX = x1 + (dot * (x2 - x1));
let closestY = y1 + (dot * (y2 - y1));
//if those coordinates are not currently on our line, return false
if (!onLine(x1, y1, x2, y2, closestX, closestY)) {
return false;
}
//calculate distance from closest coordinates to ball
distanceX = closestX - ball.x;
distanceY = closestY - ball.y;
let distance = Math.sqrt((distanceX * distanceX) + (distanceY * distanceY));
//if the ball is less than/equal to one radius away, it has collided
if (distance <= ball.returnRadius()) {
/*console.log("COLLISION: " + ball.x + " " + ball.y + " " + closestX + " " + closestY + " " +
"\n " + distance + "\n " + currentPolyPointsX + "\n " + currentPolyPointsY);*/
return true;
} else {
return false;
}
}
}
function onLine(x1, y1, x2, y2, px, py) {
let length = distanceCalc(x1, y1, x2, y2);
let distance1 = distanceCalc(px, py, x1, y1);
let distance2 = distanceCalc(px, py, x2, y2);
let buffer = 1;
return (distance1 + distance2 >= length - buffer && distance1 + distance2 <= length + buffer);
}
let rotationAmount = 0;
function rotationLoop() {
if (rotationAmount < 360) {
rotationAmount += parseInt(rotationIncrement);
}
if (rotationAmount >= 360) {
rotationAmount = 0;
}
rotatePolygon(rotationAmount);
}
function drawPolygon() { //x&y are positions, side is side number, r is size, color is to fill
//get current values of canvas center
var x = canvas.width / 2;
var y = canvas.height / 2;
var r = canvas.width / 2;
//draw {sides} sided polygon
ctx.beginPath();
ctx.moveTo(x + r * Math.cos(0), y + r * Math.sin(0));
//clear currently stored points
currentPolyPointsX.length = 0;
currentPolyPointsY.length = 0;
//draw and save new polygon points in array
for (var i = 1; i <= sides; i++) {
ctx.lineTo(x + r * Math.cos(i * 2 * Math.PI / sides), y + r * Math.sin(i * 2 * Math.PI / sides));
currentPolyPointsX.push(x + r * Math.cos(i * 2 * Math.PI / sides));
currentPolyPointsY.push(y + r * Math.sin(i * 2 * Math.PI / sides));
}
//draw the polygon
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();
ctx.save();
//console.log("drawn " + x + " " + y + " " + sides + " " + r);
}
function rotatePolygon(x) {
let centerX = canvas.height / 2;
let centerY = canvas.height / 2;
let angle = x * Math.PI / 180
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//move rotation point to center of canvas
ctx.translate(centerX, centerY);
//rotate around center of canvas
ctx.rotate(angle);
//move back to origin
ctx.translate(-centerX, -centerY);
//draw rotated polygon
drawPolygon();
//adjust coordinates to match rotation
let cos = Math.cos(x * Math.PI / 180);
let sin = Math.sin(x * Math.PI / 180);
for (let i = 0; i < currentPolyPointsX.length; i++) {
currentPolyPointsX[i] = ((cos * (currentPolyPointsX[i] - centerX)) -
(sin * (currentPolyPointsY[i] - centerY)) + centerX);
currentPolyPointsY[i] = ((cos * (currentPolyPointsY[i] - centerY)) +
(sin * (currentPolyPointsX[i] - centerX)) + centerY);
}
/*console.log("X values: " + currentPolyPointsX + "\n" +
"Y values: " + currentPolyPointsY);*/
//un-rotate
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(-x * Math.PI / 180);
ctx.translate(-canvas.width / 2, -canvas.width / 2);
//console.log("rotated " + x);
}
function resizeCanvas() {
//gather window dimensions
var height = window.innerHeight;
var width = window.innerWidth;
//if dimensions are portrait, resize canvas based on height
if (height < width) {
var canvasSquared = window.innerHeight * .8 + "px";
} else { //if dimensions are landscape/square, resize canvas based on width
var canvasSquared = window.innerWidth * .8 + "px";
}
//commit canvas dimensions
canvas.height = parseFloat(canvasSquared);
canvas.style.height = canvasSquared;
canvas.width = parseFloat(canvasSquared);
canvas.style.width = canvasSquared;
//draw new hexagon of appropriate size
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPolygon();
console.log("resized: " + canvasSquared + " width : " + canvas.width + " height: " + canvas.height);
}
rotationSlider.oninput = () => rotationIncrement = rotationSlider.value;
sidesSlider.oninput = () => sides = sidesSlider.value;
window.onresize = resizeCanvas;
body {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
}
.mainCanvas {
width: 600px;
height: 600px;
border: 1px solid black;
box-shadow: 0em 0em 0.5em grey;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gravity Synth</title>
<meta name="description" content="Sounds Go Bonk">
<meta name="author" content="D.A.">
<meta property="og:title" content="Sounds Go Bonk">
<meta property="og:type" content="website">
<meta property="og:description" content="Sounds Go Bonk">
<!--
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
-->
<link rel="stylesheet" href="styles.css">
</head>
<body onload="startup()">
<canvas id="mainCanvas" class="mainCanvas"></canvas>
<div>Speed</div>
<input type="range" min=0 max=5 value=1 class="slider" id="rotationSlider">
<div>Sides</div>
<input type="range" min=3 max=9 value=5 class="slider" id="sidesSlider">
<script src="scripts.js"></script>
</body>
</html>

Canvas perpendicular points to line

I'm using Konva library to draw some stuff on HTML5 canvas.
I have given 2 points from user interaction by mouse click:
var A={x:'',y:''};
var B={x:'',y:''};
1) How to draw line line this?
My question is:
1) How to get perpendicular lines on each interval?
2) How to get distance from A to B point?
3) How to get all points on line from A to B?
4) How to get red points?

You have not explained what your line is so I am assuming it is a sin wave (though the image looks like circles stuck together???)
As MBo has given the basics this is just applying it to the wavy line.
// normalize a vector
function normalize(vec){
var length = Math.sqrt(vec.x * vec.x + vec.y * vec.y);
vec.x /= length;
vec.y /= length;
return vec;
}
// creates a wavy line
function wavyLine(start, end, waves, amplitude){
return ({
start,
end,
waves,
amplitude,
update(){
if(this.vec === undefined){
this.vec = {};
this.norm = {};
}
this.vec.x = this.end.x - this.start.x;
this.vec.y = this.end.y - this.start.y;
this.length = Math.sqrt(this.vec.x * this.vec.x + this.vec.y * this.vec.y);
this.norm.x = this.vec.x / this.length;
this.norm.y = this.vec.y / this.length;
return this;
}
}).update();
}
// draws a wavy line
function drawWavyLine(line) {
var x, stepSize, i, y, phase, dist;
ctx.beginPath();
stepSize = ctx.lineWidth;
ctx.moveTo(line.start.x, line.start.y);
for (i = stepSize; i < line.length; i+= stepSize) {
x = line.start.x + line.norm.x * i; // get point i pixels from start
y = line.start.y + line.norm.y * i; // get point i pixels from start
phase = (i / (line.length / line.waves)) * Math.PI * 2; // get the wave phase at this point
dist = Math.sin(phase) * line.amplitude; // get the distance from the line to the point on the wavy curve
x -= line.norm.y * dist;
y += line.norm.x * dist;
ctx.lineTo(x, y);
}
phase = line.waves * Math.PI * 2; // get the wave phase at this point
dist = Math.sin(phase) * line.amplitude; // get the distance from the line to the point on the wavy curve
ctx.lineTo(line.end.x - line.norm.y * dist, line.end.y + line.norm.x * dist);
ctx.stroke();
}
// find the closest point on a wavy line to a point returns the pos on the wave, tangent and point on the linear line
function closestPointOnLine(point,line){
var x = point.x - line.start.x;
var y = point.y - line.start.y;
// get the amount the line vec needs to be scaled so tat point is perpendicular to the line
var l = (line.vec.x * x + line.vec.y * y) / (line.length * line.length);
x = line.vec.x * l; // scale the vec
y = line.vec.y * l;
return pointAtDistance(Math.sqrt(x * x + y * y), line);
}
// find the point at (linear) distance along wavy line and return coordinate, coordinate on wave, and tangent
function pointAtDistance(distance,line){
var lenScale = line.length / line.waves; // scales the length into radians
var phase = distance * Math.PI * 2 / lenScale; // get the wave phase at this point
var dist = Math.sin(phase) * line.amplitude; // get the distance from the line to the point on the wavy curve
var slope = Math.cos(phase ) * Math.PI * 2 * line.amplitude / lenScale; // derivitive of sin(a*x) is -a*cos(a*x)
// transform tangent (slope) into a vector along the line. This vector is not a unit vector so normalize it
var tangent = normalize({
x : line.norm.x - line.norm.y * slope,
y : line.norm.y + line.norm.x * slope
});
// move from the line start to the point on the linear line at distance
var linear = {
x : line.start.x + line.norm.x * distance,
y : line.start.y + line.norm.y * distance
}
// move out perpendicular to the wavy part
return {
x : linear.x - line.norm.y * dist,
y : linear.y + line.norm.x * dist,
tangent,linear
};
}
// create a wavy line
var wLine = wavyLine({x:10,y:100},{x:300,y:100},3,50);
// draw the wavy line and show some points on it
function display(timer){
globalTime = timer;
ctx.setTransform(1,0,0,1,0,0); // reset transform
ctx.globalAlpha = 1; // reset alpha
ctx.clearRect(0,0,w,h);
var radius = Math.max(ch,cw);
// set up the wavy line
wLine.waves = Math.sin(timer / 10000) * 6;
wLine.start.x = Math.cos(timer / 50000) * radius + cw;
wLine.start.y = Math.sin(timer / 50000) * radius + ch;
wLine.end.x = -Math.cos(timer / 50000) * radius + cw;
wLine.end.y = -Math.sin(timer / 50000) * radius + ch ;
wLine.update();
// draw the linear line
ctx.lineWidth = 0.5;
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(wLine.start.x, wLine.start.y);
ctx.lineTo(wLine.end.x, wLine.end.y);
ctx.stroke();
// draw the wavy line
ctx.lineWidth = 2;
ctx.strokeStyle = "black";
drawWavyLine(wLine);
// find point nearest mouse
var p = closestPointOnLine(mouse,wLine);
ctx.lineWidth = 1;
ctx.strokeStyle = "red";
ctx.beginPath();
ctx.arc(p.x,p.y,5,0,Math.PI * 2);
ctx.moveTo(p.x + p.tangent.x * 20,p.y + p.tangent.y * 20);
ctx.lineTo(p.x - p.tangent.y * 10,p.y + p.tangent.x * 10);
ctx.lineTo(p.x + p.tangent.y * 10,p.y - p.tangent.x * 10);
ctx.closePath();
ctx.stroke();
// find points at equal distance along line
ctx.lineWidth = 1;
ctx.strokeStyle = "blue";
ctx.beginPath();
for(var i = 0; i < w; i += w / 10){
var p = pointAtDistance(i,wLine);
ctx.moveTo(p.x + 5,p.y);
ctx.arc(p.x,p.y,5,0,Math.PI * 2);
ctx.moveTo(p.x,p.y);
ctx.lineTo(p.linear.x,p.linear.y);
ctx.moveTo(p.x + p.tangent.x * 40, p.y + p.tangent.y * 40);
ctx.lineTo(p.x - p.tangent.x * 40, p.y - p.tangent.y * 40);
}
ctx.stroke();
}
/******************************************************************************
The code from here down is generic full page mouse and canvas boiler plate
code. As I do many examples which all require the same mouse and canvas
functionality I have created this code to keep a consistent interface. The
Code may or may not be part of the answer.
This code may or may not have ES6 only sections so will require a transpiler
such as babel.js to run on legacy browsers.
*****************************************************************************/
// V2.0 ES6 version for Stackoverflow and Groover QuickRun
var w, h, cw, ch, canvas, ctx, mouse, globalTime = 0;
// You can declare onResize (Note the capital R) as a callback that is also
// called once at start up. Warning on first call canvas may not be at full
// size.
;(function(){
const RESIZE_DEBOUNCE_TIME = 100;
var resizeTimeoutHandle;
var firstRun = true;
function createCanvas () {
var c,cs;
cs = (c = document.createElement("canvas")).style;
cs.position = "absolute";
cs.top = cs.left = "0px";
cs.zIndex = 1000;
document.body.appendChild(c);
return c;
}
function resizeCanvas () {
if (canvas === undefined) { canvas = createCanvas() }
canvas.width = innerWidth;
canvas.height = innerHeight;
ctx = canvas.getContext("2d");
if (typeof setGlobals === "function") { setGlobals() }
if (typeof onResize === "function") {
clearTimeout(resizeTimeoutHandle);
if (firstRun) { onResize() }
else { resizeTimeoutHandle = setTimeout(onResize, RESIZE_DEBOUNCE_TIME) }
firstRun = false;
}
}
function setGlobals () {
cw = (w = canvas.width) / 2;
ch = (h = canvas.height) / 2;
}
mouse = (function () {
var m; // alias for mouse
var mouse = {
x : 0, y : 0, // mouse position and wheel
buttonRaw : 0,
buttonOnMasks : [0b1, 0b10, 0b100], // mouse button on masks
buttonOffMasks : [0b110, 0b101, 0b011], // mouse button off masks
bounds : null,
eventNames : "mousemove,mousedown,mouseup".split(","),
event(e) {
var t = e.type;
m.bounds = m.element.getBoundingClientRect();
m.x = e.pageX - m.bounds.left - scrollX;
m.y = e.pageY - m.bounds.top - scrollY;
if (t === "mousedown") { m.buttonRaw |= m.buttonOnMasks[e.which - 1] }
else if (t === "mouseup") { m.buttonRaw &= m.buttonOffMasks[e.which - 1] }
},
start(element) {
m.element = element === undefined ? document : element;
m.eventNames.forEach(name => document.addEventListener(name, mouse.event) );
},
}
m = mouse;
return mouse;
})();
function update(timer) { // Main update loop
globalTime = timer;
display(timer); // call demo code
requestAnimationFrame(update);
}
setTimeout(function(){
canvas = createCanvas();
mouse.start(canvas);
resizeCanvas();
window.addEventListener("resize", resizeCanvas);
requestAnimationFrame(update);
},0);
})();

We have points A and B. Difference vector
D.X = B.X - A.X
D.Y = B.Y - A.Y
Length = Sqrt(D.X * D.X + D.Y * D.Y)
normalized (unit) vector
uD.X = D.X / Length
uD.Y = D.Y / Length
perpendicular unit vector
P.X = - uD.Y
P.Y = uD.X
some red point:
R.X = A.X + uD.X * Dist + P.X * SideDist * SideSign
R.Y = A.Y + uD.Y * Dist + P.Y * SideDist * SideSign
where Dist is in range 0..Length
Dist = i / N * Length for N equidistant points
SideSign is +/- 1 for left and right side

smoother lineWidth changes in canvas lineTo

so i'm trying to create a drawing tool in HTML5 canvas where the weight of the stroke increases the faster you move the mouse and decreases the slower you move. I'm using ctx.lineTo() but on my first attempt noticed that if i move too quickly the change in thickness is registered as obvious square increments ( rather than a smooth increase in weight )
so i changed the ctx.lineJoin and ctx.lineCap to "round" and it got a little better
but this is still not as smooth as i'd like. i'm shooting for something like this
any advice on how to make the change in weight a bit smoother would be great! here's a working demo: http://jsfiddle.net/0fhag522/1/
and here' a preview of my "dot" object ( the pen ) and my draw function:
var dot = {
start: false,
weight: 1,
open: function(x,y){
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(x,y);
},
connect: function(x,y){
ctx.lineWidth = this.weight;
ctx.lineTo(x,y);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(x,y);
},
close: function(){
ctx.closePath();
}
}
function draw(){
if(down){
if(!dot.start){
dot.close();
prevx = mx; prevy = my;
dot.open(mx,my);
dot.start=true;
}
else {
var dx = (prevx>mx) ? prevx-mx : mx-prevx;
var dy = (prevy>my) ? prevy-my : my-prevy;
dot.weight = Math.abs(dx-dy)/2;
dot.connect( mx,my );
prevx = mx; prevy = my;
}
}
}

Here is a simple function to create growing lines with a round line cap:
/*
* this function returns a Path2D object
* the path represents a growing line between two given points
*/
function createGrowingLine (x1, y1, x2, y2, startWidth, endWidth) {
// calculate direction vector of point 1 and 2
const directionVectorX = x2 - x1,
directionVectorY = y2 - y1;
// calculate angle of perpendicular vector
const perpendicularVectorAngle = Math.atan2(directionVectorY, directionVectorX) + Math.PI/2;
// construct shape
const path = new Path2D();
path.arc(x1, y1, startWidth/2, perpendicularVectorAngle, perpendicularVectorAngle + Math.PI);
path.arc(x2, y2, endWidth/2, perpendicularVectorAngle + Math.PI, perpendicularVectorAngle);
path.closePath();
return path;
}
const ctx = myCanvas.getContext('2d');
// create a growing line between P1(10, 10) and P2(250, 100)
// with a start line width of 10 and an end line width of 50
let line1 = createGrowingLine(10, 10, 250, 100, 10, 50);
ctx.fillStyle = 'green';
// draw growing line
ctx.fill(line1);
<canvas width="300" height="150" id="myCanvas"></canvas>
Explanation:
The function createGrowingLine constructs a shape between two given points by:
calculating the direction vector of the two points
calculating the angle in radians of the perpendicular vector
creating a semi circle path from the calculated angle to the calculated angle + 180 degree with the center and radius of the start point
creating another semi circle path from the calculated angle + 180 degree to the calculated angle with the center and radius of the end point
closing the path by connecting the start point of the first circle with the end point of the second circle
In case you do not want to have the rounded line cap use the following function:
/*
* this function returns a Path2D object
* the path represents a growing line between two given points
*/
function createGrowingLine (x1, y1, x2, y2, startWidth, endWidth) {
const startRadius = startWidth/2;
const endRadius = endWidth/2;
// calculate direction vector of point 1 and 2
let directionVectorX = x2 - x1,
directionVectorY = y2 - y1;
// calculate vector length
const directionVectorLength = Math.hypot(directionVectorX, directionVectorY);
// normalize direction vector (and therefore also the perpendicular vector)
directionVectorX = 1/directionVectorLength * directionVectorX;
directionVectorY = 1/directionVectorLength * directionVectorY;
// construct perpendicular vector
const perpendicularVectorX = -directionVectorY,
perpendicularVectorY = directionVectorX;
// construct shape
const path = new Path2D();
path.moveTo(x1 + perpendicularVectorX * startRadius, y1 + perpendicularVectorY * startRadius);
path.lineTo(x1 - perpendicularVectorX * startRadius, y1 - perpendicularVectorY * startRadius);
path.lineTo(x2 - perpendicularVectorX * endRadius, y2 - perpendicularVectorY * endRadius);
path.lineTo(x2 + perpendicularVectorX * endRadius, y2 + perpendicularVectorY * endRadius);
path.closePath();
return path;
}
const ctx = myCanvas.getContext('2d');
// create a growing line between P1(10, 10) and P2(250, 100)
// with a start line width of 10 and an end line width of 50
let line1 = createGrowingLine(10, 10, 250, 100, 10, 50);
ctx.fillStyle = 'green';
// draw growing line
ctx.fill(line1);
<canvas width="300" height="150" id="myCanvas"></canvas>

Since canvas does not have a variable width line you must draw closed paths between your line points.
However, this leaves a visible butt-joint.
To smooth the butt-joint, you can draw a circle at each joint.
Here is example code and a Demo:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;
var $canvas = $("#canvas");
var canvasOffset = $canvas.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas.scrollLeft();
var scrollY = $canvas.scrollTop();
var isDown = false;
var startX;
var startY;
var PI = Math.PI;
var halfPI = PI / 2;
var points = [];
$("#canvas").mousedown(function(e) {
handleMouseDown(e);
});
function handleMouseDown(e) {
e.preventDefault();
e.stopPropagation();
mx = parseInt(e.clientX - offsetX);
my = parseInt(e.clientY - offsetY);
var pointsLength = points.length;
if (pointsLength == 0) {
points.push({
x: mx,
y: my,
width: Math.random() * 5 + 2
});
} else {
var p0 = points[pointsLength - 1];
var p1 = {
x: mx,
y: my,
width: Math.random() * 5 + 2
};
addAngle(p0, p1);
p0.angle = p1.angle;
addEndcap(p0);
addEndcap(p1);
points.push(p1);
extendLine(p0, p1);
}
}
function addAngle(p0, p1) {
var dx = p1.x - p0.x;
var dy = p1.y - p0.y;
p1.angle = Math.atan2(dy, dx);
}
function addEndcap(p) {
p.x0 = p.x + p.width * Math.cos(p.angle - halfPI);
p.y0 = p.y + p.width * Math.sin(p.angle - halfPI);
p.x1 = p.x + p.width * Math.cos(p.angle + halfPI);
p.y1 = p.y + p.width * Math.sin(p.angle + halfPI);
}
function extendLine(p0, p1) {
ctx.beginPath();
ctx.moveTo(p0.x0, p0.y0);
ctx.lineTo(p0.x1, p0.y1);
ctx.lineTo(p1.x1, p1.y1);
ctx.lineTo(p1.x0, p1.y0);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();
// draw a circle to cover the butt-joint
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.arc(p1.x, p1.y, p1.width, 0, Math.PI * 2);
ctx.closePath();
ctx.fill();
}
body{ background-color: ivory; }
#canvas{border:1px solid red;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Click to add line segments.</h4>
<canvas id="canvas" width=300 height=300></canvas>

Drawing a smooth curved arc() between two points

I'm trying to draw a smooth curved arc between two points in canvas, I have set up the points as sutch note these are dynamic and can change.
var p1 = {
x=100, y=100
}
var p2 = {
x=255, y=255
}
The curve would look something like this
Here my started code, I can't get my head around the math/logic of this function:
function curveA2B(a,b){
var mindpoint = {
x: (a.x+b.x)/2,
y: (a.y+b.y)/2,
d: Math.sqrt(Math.pow(b.x-a.x,2) + Math.pow(b.y-a.y,2))
};
context.beginPath();
context.arc(
a.x,
a.y,
mindpoint.d/2,
1.5*Math.PI,
0,
false
);
context.arc(
b.x,
b.y,
mindpoint.d/2,
1*Math.PI,
0.5*Math.PI,
true
);
context.context.stroke();
}
The dynamic examples is here: http://jsfiddle.net/CezarisLT/JDdjp/6/

I created a function that would be easily modifiable to many needs called plot_curve that gives you an idea of the breakdown of your problem.
A quick DEMO: http://jsfiddle.net/LVFat/
function plot_curve(x,y,xx,yy, target,color)
{
var startX=x;
var startY=y;
var endX=xx;
var endY=yy;
var diff_x = xx - x;
var diff_y = yy - y;
var bezierX=x; // x1
var bezierY=yy; // y2
console.log("bx:"+bezierX);
console.log("by:"+bezierY);
var cx,cy, t;
for(t=0.0; t<=1; t+=0.01)
{
cx = Math.round( (1-t)*(1-t)*startX + 2*(1-t) * t * bezierX + t*t*endX);
cy = Math.round( (1-t)*(1-t)*startY + 2*(1-t) * t * bezierY + t*t*endY);
// change this part to whatever you are trying to manipulate to the curve
plot_pixel( Math.round(cx), Math.round(cy), target, color);
}
}
example... (works with a divCanvas function I made.. check out jsfiddle link...)
plot_curve(25,25,5,5, ".divCanvas","blue");
if you just want the coords for the curve between the two points, try this:
function plot_curve(x,y,xx,yy)
{
// returns an array of x,y coordinates to graph a perfect curve between 2 points.
var startX=x;
var startY=y;
var endX=xx;
var endY=yy;
var diff_x = xx - x;
var diff_y = yy - y;
var xy = [];
var xy_count = -1;
var bezierX=x; // x1
var bezierY=yy; // y2
var t;
for(t=0.0; t<=1; t+=0.01)
{
xy_count++;
xy[xy_count] = {};
xy[xy_count].x = Math.round( (1-t)*(1-t)*startX + 2*(1-t) * t * bezierX + t*t*endX);
xy[xy_count].y = Math.round( (1-t)*(1-t)*startY + 2*(1-t) * t * bezierY + t*t*endY);
}
return xy; // returns array of coordinates
}

You can use the mid of the two points as two radius settings for the x and y axis.
The following example is simplified but it shows one approach to create smooth curves inside the boxes as in your example.
The boxes will always scale so that the curves goes through the mid point between the two points (alter the end point for example).
DEMO
/// set up some values
var ctx = demo.getContext('2d'),
p1 = {x:100, y:100}, /// point 1
p2 = {x:355, y:255}, /// point 2
mx = (p2.x - p1.x) * 0.5, /// mid-point between point 1 and 2
my = (p2.y - p1.y) * 0.5,
c1 = {x: p1.x, y: p1.y + my}, /// create center point objects
c2 = {x: p2.x, y: p2.y - my},
steps = 0.05; /// curve resolution
/// mark the points and the boxes which represent the center of those
ctx.fillStyle = '#ff6e6e';
ctx.fillRect(p1.x, p1.y, mx, my);
ctx.fillStyle = '#6e93ff';
ctx.fillRect(p1.x + mx, p1.y + my, mx, my);
Then we render the quarter ellipse for each "box":
/// render the smooth curves using 1/4 ellipses
ctx.beginPath();
for(var isFirst = true, /// first point is moveTo, rest lineTo
angle = 1.5 * Math.PI, /// start angle in radians
goal = 2 * Math.PI, /// goal angle
x, y; angle < goal; angle += steps) {
/// calculate x and y using cos/sin
x = c1.x + mx * Math.cos(angle);
y = c1.y + my * Math.sin(angle);
/// move or draw line
(isFirst) ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
isFirst = false;
}
/// second box
for(var isFirst = true,
angle = Math.PI,
goal = 0.5 * Math.PI,
x, y;angle > goal; angle -= steps) {
x = c2.x + mx * Math.cos(angle);
y = c2.y + my * Math.sin(angle);
(isFirst) ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
isFirst = false;
}
ctx.stroke();
I'll leave it to you to put this into re-usable functions. Hope this helps!
If this doesn't cut it I would recommend you to take a look at my cardinal spline implementation.

HTML5 Animating a dashed line

Being relatively new to the HTML5 game, just wanted to ask if anyone knew if it was possible to animate a dashed line along a path? Think snake from Nokia days, just with a dashed line...
I've got a dashed line (which represents electrical current flow), which I'd like to animate as 'moving' to show that current is flowing to something.
Thanks to Rod's answer on this post, I've got the dashed line going, but am not sure where to start to get it moving. Anyone know where to begin?
Thanks!

Got it working here, based on this post by phrogz.
What i did:
Add a start parameter which is a number between 0 and 99
Calculate the dashSize summing the contents of the dash array
Calculate dashOffSet as a fraction of dashSize based on start percent
Subtracted the offset from x, y and added to dx, dy
Only started drawying after the offset been gone (it´s negative, remember)
Added a setInterval to update the start from 0 to 99, step of 10
Update
The original algorithm wasn't working for vertical or negative inclined lines. Added a check to use the inclination based on the y slope on those cases, and not on the x slope.
Demo here
Updated code:
if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo) {
CanvasRenderingContext2D.prototype.dashedLine = function(x, y, x2, y2, dashArray, start) {
if (!dashArray) dashArray = [10, 5];
var dashCount = dashArray.length;
var dashSize = 0;
for (i = 0; i < dashCount; i++) dashSize += parseInt(dashArray[i]);
var dx = (x2 - x),
dy = (y2 - y);
var slopex = (dy < dx);
var slope = (slopex) ? dy / dx : dx / dy;
var dashOffSet = dashSize * (1 - (start / 100))
if (slopex) {
var xOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
x -= xOffsetStep;
dx += xOffsetStep;
y -= slope * xOffsetStep;
dy += slope * xOffsetStep;
} else {
var yOffsetStep = Math.sqrt(dashOffSet * dashOffSet / (1 + slope * slope));
y -= yOffsetStep;
dy += yOffsetStep;
x -= slope * yOffsetStep;
dx += slope * yOffsetStep;
}
this.moveTo(x, y);
var distRemaining = Math.sqrt(dx * dx + dy * dy);
var dashIndex = 0,
draw = true;
while (distRemaining >= 0.1 && dashIndex < 10000) {
var dashLength = dashArray[dashIndex++ % dashCount];
if (dashLength > distRemaining) dashLength = distRemaining;
if (slopex) {
var xStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
x += xStep
y += slope * xStep;
} else {
var yStep = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
y += yStep
x += slope * yStep;
}
if (dashOffSet > 0) {
dashOffSet -= dashLength;
this.moveTo(x, y);
} else {
this[draw ? 'lineTo' : 'moveTo'](x, y);
}
distRemaining -= dashLength;
draw = !draw;
}
// Ensure that the last segment is closed for proper stroking
this.moveTo(0, 0);
}
}
var dashes = '10 20 2 20'
var c = document.getElementsByTagName('canvas')[0];
c.width = 300;
c.height = 400;
var ctx = c.getContext('2d');
ctx.strokeStyle = 'black';
var drawDashes = function() {
ctx.clearRect(0, 0, c.width, c.height);
var dashGapArray = dashes.replace(/^\s+|\s+$/g, '').split(/\s+/);
if (!dashGapArray[0] || (dashGapArray.length == 1 && dashGapArray[0] == 0)) return;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.dashedLine(10, 0, 10, c.height, dashGapArray, currentOffset);
ctx.dashedLine(0, 10, c.width, 10, dashGapArray, currentOffset);
ctx.dashedLine(0, 0, c.width, c.height, dashGapArray, currentOffset);
ctx.dashedLine(0, c.height, c.width, 0, dashGapArray, currentOffset);
ctx.closePath();
ctx.stroke();
};
window.setInterval(dashInterval, 500);
var currentOffset = 0;
function dashInterval() {
drawDashes();
currentOffset += 10;
if (currentOffset >= 100) currentOffset = 0;
}

You can create the dashed line animation using SNAPSVG library.
Please check the tutorial here DEMO