var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.translate(400, 200);

var tau = Math.PI * 2,
	colorCounter = 0;
	red = 255,
	green = 255,
	blue = 0,
	increase = tau / 75,
	counter1 = increase * -16, 
	r1 = 21.75,
	y1 = 100,
	counter2 = increase * -8, 
	r2 = 27.75,
	y2 = 50,
	counter3 = 0, 
	r3 = 30,
	y3 = 0,
	counter4 = increase * 8,
	r4 = 27,
	y4 = -50,
	counter5 = increase * 16,
	r5 = 21,
	y5 = -100,
	counter6 = increase * -44,
	r6 = 9.75,
	y6 = -125,
	counter7 = increase * -36,
	r7 = 9,
	y7 = -75,
	counter8 = increase * -28,
	r8 = 12.75,
	y8 = -25,
	counter9 = increase * -20,
	r9 = 18.75,
	y9 = 25,
	counter10 = increase * -12,
	r10 = 24.75,
	y10 = 75;

function moveSphere() {	
	ctx.clearRect(-400, -200, 800, 800);
  ctx.fillStyle = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

	ctx.beginPath();
	ctx.arc(-300, y1, r1, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(-150, y2, r2, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(0, y3, r3, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(150, y4, r4, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(300, y5, r5, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(-300, y6, r6, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(-150, y7, r7, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(0, y8, r8, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(150, y9, r9, 0, tau);
	ctx.fill();

	ctx.beginPath();
	ctx.arc(300, y10, r10, 0, tau);
	ctx.fill();
}

function spin() {

	counter1+=increase;
	y1 = (Math.sin(counter1)) * 100;
	moveSphere();
	if (y1 > 40.01) {
		r1-= .75;
	} else if (y1 < -40.01) {
		r1+= .75;
	}

	counter2+=increase;
	y2 = (Math.sin(counter2)) * 100;
	if (y2 > 40.01) {
		r2-= .75;
	} else if (y2 < -40.01) {
		r2+= .75;
	}

	counter3+=increase;
	y3 = (Math.sin(counter3)) * 100;
	if (y3 > 40.01) {
		r3-= .75;
	} else if (y3 < -40.01) {
		r3+= .75;
	}

	counter4+=increase;
	y4 = (Math.sin(counter4)) * 100;
	if (y4 > 40.01) {
		r4-= .75;
	} else if (y4 < -40.01) {
		r4+= .75;
	}

	counter5+=increase;
	y5 = (Math.sin(counter5)) * 100;
	if (y5 > 40.01) {
		r5-= .75;
	} else if (y5 < -40.01) {
		r5+= .75;
	}

	counter6+=increase;
	y6 = (Math.sin(counter6)) * 100;
	if (y6 > 40.01) {
		r6-= .75;
	} else if (y6 < -40.01) {
		r6+= .75;
	}

	counter7+=increase;
	y7 = (Math.sin(counter7)) * 100;
	if (y7 > 40.01) {
		r7-= .75;
	} else if (y7 < -40.01) {
		r7+= .75;
	}

	counter8+=increase;
	y8 = (Math.sin(counter8)) * 100;
	if (y8 > 40.01) {
		r8-= .75;
	} else if (y8 < -40.01) {
		r8+= .75;
	}

	counter9+=increase;
	y9 = (Math.sin(counter9)) * 100;
	if (y9 > 40.01) {
		r9-= .75;
	} else if (y9 < -40.01) {
		r9+= .75;
	}

	counter10+=increase;
	y10 = (Math.sin(counter10)) * 100;
	if (y10 > 40.01) {
		r10-= .75;
	} else if (y10 < -40.01) {
		r10+= .75;
	}
}

function colorShift() {
    if (colorCounter >= 255 && colorCounter <= 305) {
        green+=5;
        colorCounter+=1;
    } else if (colorCounter >= 204 && colorCounter < 255) {
        blue-=5;
        colorCounter+=1;
    } else if (colorCounter >= 153 && colorCounter < 204) {
        red+=5;
        colorCounter+=1;
    } else if (colorCounter >= 102 && colorCounter < 153) {
        green-=5;
        colorCounter+=1;
    } else if (colorCounter >= 51 && colorCounter < 102) {
        blue+=5;
        colorCounter+=1;
    } else if (colorCounter < 51 && colorCounter >= 0) {
        red-=5;
        colorCounter+=1;
    } else if (colorCounter === 306) {
        colorCounter = 0;
    }
}

setInterval(spin, 17);
setInterval(colorShift, 17);