let canvas = document.querySelector('.canvas');
canvas.width = 500;
canvas.height = 400;
let ctx = canvas.getContext('2d'),
	tau = Math.PI * 2,
	degToRad = Math.PI / 180,
	defaultSpeed = 3,
	maxSpeed = 7,
	minSpeed = maxSpeed * -1;

ctx.fillStyle = '#bada55';

const mcos = Math.cos;
const msin = Math.sin;
const msqrt = Math.sqrt;
const mround = Math.round;

let Point = function(x=0, y=0){
	this.x = x;
	this.y = y;
}
Point.prototype.get = function(){
	return {x:this.x, y:this.y}
}
Point.prototype.translate = function(vx, vy){
  return new Point(this.x + vx, this.y + vy);
}
Point.prototype.rotateAroundOrigin = function(origin, angle){
  let radians = angle * degToRad;
  var rotatedX = mcos(radians) * (this.x - origin.x) - msin(radians) * (this.y - origin.y) + origin.x;
  var rotatedY = msin(radians) * (this.x - origin.x) + mcos(radians) * (this.y - origin.y) + origin.y;
  return new Point(rotatedX, rotatedY);
}

let Joint = function(startPoint, radius = 25, fixed = true, render = false){
	this.boundaryRadius = radius;
	this.distances = [];
	this.fixed = fixed;
	this.position = startPoint;
	this.render = render;
	this.satellitePoints = [];
	this.genSatPoints({});
}
Joint.prototype.calculateDistances = function(target){
	let dx = target.position.x - this.position.x;
	let dy = target.position.y - this.position.y;
	return msqrt(dx*dx + dy*dy);
}
Joint.prototype.genSatPoints = function(vo){
	let arcOffset = vo.arcOffset === undefined ? 0 : vo.arcOffset;
	let arcRange = vo.arcRange === undefined ? 0 : vo.arcRange;
	let accuracy = vo.accuracy === undefined ? 0 : vo.accuracy;
	this.step = arcRange / accuracy;
	this.satellitePoints = [];
	let pt = this.position.translate(this.boundaryRadius, 0);
	for(let i=0; i<accuracy; i++){
		this.satellitePoints.push(pt.rotateAroundOrigin(this.position, arcOffset + this.step * i));
	}
}
Joint.prototype.drawSatPoints = function(){
	for(let i=0; i<this.satellitePoints.length; i++){
		let pt = this.satellitePoints[i];
		ctx.beginPath();
		ctx.arc(pt.x, pt.y, .5, 0, tau, false);
		ctx.fill();
	}
}

let Strandbeest = function(speed){
	this.colours = ['#f63', '#f36', '#ba5'];
	this.legs = [];
	this.numberOfLegs = 3;
	this.origin = {x:250, y:150};
	this.rotationOffsets = [0, 120, 240];
	this.scaleFactor = 1;
	this.speed = speed;
	this.build();
}
Strandbeest.prototype.build = function(){
	for(let i=0; i < this.numberOfLegs; i++){
		this.legs.push(new StrandbeestLeg(this.scaleFactor, this.colours[i], this.rotationOffsets[i], this.origin));
	}
}
Strandbeest.prototype.update = function(){
	for(let i=0; i<this.legs.length;i++){
		this.legs[i].update(this.speed);
	}
}
Strandbeest.prototype.draw = function(){
	for(let i=0; i<this.legs.length;i++){
		this.legs[i].draw();
	}
}

let StrandbeestLeg = function(scaleFactor, colour, rotationOffset, origin){
	this.colour = colour;
	this.rotationOffset = rotationOffset;
	this.allJoints = [];
	this.jointPoints = [];
	this.jointPoints.push(new Point(origin.x * scaleFactor, origin.y * scaleFactor));
	this.jointPoints.push(new Point(origin.x + 113 * scaleFactor, origin.y + -23 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + 155 * scaleFactor, origin.y + -13 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + 46 * scaleFactor, origin.y + -112 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + 23 * scaleFactor, origin.y + 114 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + -106 * scaleFactor, origin.y + -52 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + -70 * scaleFactor, origin.y + 59 * scaleFactor));
	this.jointPoints.push(new Point(origin.x + -30 * scaleFactor, origin.y + 248 * scaleFactor));
	this.createJoints();
	
	this.allJoints[0].distances.push(this.allJoints[0].calculateDistances(this.allJoints[3]));
	this.allJoints[0].distances.push(this.allJoints[0].calculateDistances(this.allJoints[4]));
	this.allJoints[0].distances.push(this.allJoints[0].calculateDistances(this.allJoints[5]));
	this.allJoints[2].distances.push(this.allJoints[2].calculateDistances(this.allJoints[3]));
	this.allJoints[2].distances.push(this.allJoints[2].calculateDistances(this.allJoints[4]));
	this.allJoints[3].distances.push(this.allJoints[3].calculateDistances(this.allJoints[5]));
	this.allJoints[4].distances.push(this.allJoints[4].calculateDistances(this.allJoints[6]));
	this.allJoints[4].distances.push(this.allJoints[4].calculateDistances(this.allJoints[7]));
	this.allJoints[5].distances.push(this.allJoints[5].calculateDistances(this.allJoints[6]));
	this.allJoints[6].distances.push(this.allJoints[6].calculateDistances(this.allJoints[7]));
	
	this.allJoints[2].position = this.allJoints[2].position.rotateAroundOrigin(this.allJoints[1].position, this.rotationOffset);
	
	// Select arcs for joint debugging
	// this.allJoints[4].render = true;
	// this.allJoints[6].render = true;
}
StrandbeestLeg.prototype.createJoints = function(){
	for(let i=0; i<this.jointPoints.length; i++){
		this.allJoints.push(new Joint(new Point(this.jointPoints[i].x, this.jointPoints[i].y), 40, (i<2?true:false)));
	}
}
StrandbeestLeg.prototype.calculateJointMovement = function(jointToMove, anchor1, anchor2){
	let bestDist = 100;
	let bestPoint;
	for(let loopA = anchor1.satellitePoints.length, i = 0; i < loopA; i++){
		let testA = anchor1.satellitePoints[i];
		for(let loopB = anchor2.satellitePoints.length, j = 0; j < loopB; j++){
			let dx = testA.x - anchor2.satellitePoints[j].x;
			let dy = testA.y - anchor2.satellitePoints[j].y;
			let dist  = msqrt(dx*dx + dy*dy);
			if(dist < bestDist){
				bestDist = dist;
				bestPoint = anchor2.satellitePoints[j];
			}
		}
	}
	jointToMove.position.x = bestPoint.x;
	jointToMove.position.y = bestPoint.y;
}
StrandbeestLeg.prototype.update = function(speed){
	// Rotate initial joint (allJoints[2]) around second axle. This drives the beest!
	this.allJoints[2].position = this.allJoints[2].position.rotateAroundOrigin(this.allJoints[1].position, speed);
	
	//calc pt3 - anchored on pt0 & pt2
	this.allJoints[0].boundaryRadius = this.allJoints[0].distances[0];
	this.allJoints[2].boundaryRadius = this.allJoints[2].distances[0];
	this.allJoints[0].genSatPoints({arcOffset:235, arcRange:65, accuracy:100, distanceID:0});
	this.allJoints[2].genSatPoints({arcOffset:195, arcRange:55, accuracy:100, distanceID:0});
	this.calculateJointMovement(this.allJoints[3], this.allJoints[0], this.allJoints[2]);
	
	//calc pt4 - anchored on pt0 & pt2
	this.allJoints[0].boundaryRadius = this.allJoints[0].distances[1];
	this.allJoints[2].boundaryRadius = this.allJoints[2].distances[1];
	this.allJoints[0].genSatPoints({arcOffset:60, arcRange:90, accuracy:100});
	this.allJoints[2].genSatPoints({arcOffset:105, arcRange:60, accuracy:75});
	this.calculateJointMovement(this.allJoints[4], this.allJoints[0], this.allJoints[2]);
	
	//calc pt5 - anchored on pt0 & pt3
	this.allJoints[0].boundaryRadius = this.allJoints[0].distances[2];
	this.allJoints[3].boundaryRadius = this.allJoints[3].distances[0];
	this.allJoints[0].genSatPoints({arcOffset:150, arcRange:65, accuracy:90});
	this.allJoints[3].genSatPoints({arcOffset:100, arcRange:70, accuracy:90});
	this.calculateJointMovement(this.allJoints[5], this.allJoints[0], this.allJoints[3]);
	
	//calc pt6 - anchored on pt4 & pt5
	this.allJoints[4].boundaryRadius = this.allJoints[4].distances[0];
	this.allJoints[5].boundaryRadius = this.allJoints[5].distances[0];
	this.allJoints[4].genSatPoints({arcOffset:140, arcRange:90, accuracy:120});
	this.allJoints[5].genSatPoints({arcOffset:50, arcRange:90, accuracy:120});
	this.calculateJointMovement(this.allJoints[6], this.allJoints[4], this.allJoints[5]);
	
	//calc pt7 - anchored on pt4 & pt6
	this.allJoints[4].boundaryRadius = this.allJoints[4].distances[1];
	this.allJoints[6].boundaryRadius = this.allJoints[6].distances[0];
	this.allJoints[4].genSatPoints({arcOffset:45, arcRange:80, accuracy:150});
	this.allJoints[6].genSatPoints({arcOffset:15, arcRange:80, accuracy:150});
	this.calculateJointMovement(this.allJoints[7], this.allJoints[4], this.allJoints[6]);
}
StrandbeestLeg.prototype.draw = function(){
	/* Draw all the connecting lines */
	ctx.strokeStyle = this.colour;
	ctx.beginPath();
	ctx.moveTo(this.allJoints[1].position.x, this.allJoints[1].position.y);
	ctx.lineTo(this.allJoints[2].position.x, this.allJoints[2].position.y);
	ctx.lineTo(this.allJoints[3].position.x, this.allJoints[3].position.y);
	ctx.lineTo(this.allJoints[5].position.x, this.allJoints[5].position.y);
	ctx.lineTo(this.allJoints[6].position.x, this.allJoints[6].position.y);
	ctx.lineTo(this.allJoints[7].position.x, this.allJoints[7].position.y);
	ctx.lineTo(this.allJoints[4].position.x, this.allJoints[4].position.y);
	ctx.lineTo(this.allJoints[2].position.x, this.allJoints[2].position.y);
	ctx.moveTo(this.allJoints[3].position.x, this.allJoints[3].position.y);
	ctx.lineTo(this.allJoints[0].position.x, this.allJoints[0].position.y);
	ctx.lineTo(this.allJoints[5].position.x, this.allJoints[5].position.y);
	ctx.moveTo(this.allJoints[0].position.x, this.allJoints[0].position.y);
	ctx.lineTo(this.allJoints[4].position.x, this.allJoints[4].position.y);
	ctx.lineTo(this.allJoints[6].position.x, this.allJoints[6].position.y);
	ctx.stroke();
	/* Draw all points */
	for(let i=0; i<this.allJoints.length; i++){
		let joint = this.allJoints[i];
		if(joint.render){
			joint.drawSatPoints();
		}
		if(i < 2){
			ctx.beginPath();
			ctx.arc(joint.position.x, joint.position.y, 2, 0, tau, false);
			ctx.fill();
		}
	}
}

/* Maps number (v) in input range(i1/i2) to equivalent in output range (o1/o2) */
function map(v, i1, i2, o1, o2){
     return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
}

function update(){
	strandbeest.update();
}
function draw(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	strandbeest.draw();
}
function animate(){
	update();
	draw();
	requestAnimationFrame(animate);
}

let strandbeest = new Strandbeest(defaultSpeed);

document.querySelector('.wrapper').addEventListener('mousemove', (e) => {
   strandbeest.speed = mround(map(e.offsetX, 0,canvas.width, minSpeed,maxSpeed));
} );

animate();