'use strict';

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var x = 20, y = 20;
var vx = 5, ax = 0.4;
var vy = 5, ay = 0.7;
var i = 0;
canvas.width = 1000;
canvas.height = 800;
var draw = function() {
	ctx.strokeStyle = '#fff';
	ctx.beginPath();
	ctx.moveTo(x, y);
	while(i < 10000) {
		i ++;
		if(i % 5 == 0) {
			vx = vx*ax;
			vy = vy*ay;
		}
		x += vx;
		y += vy;
		if(vx < 0.5) {
			vx = 5;
		}
		if(vy < 0.5) {
			vy = 5;
		}
		ctx.lineTo(x, y);
	}
	ctx.stroke();
}

draw();

var draw2 = function() {
	x = 20;
	y = 20;
	vx = 5;
	vy = 2;
	ctx.strokeStyle = '#6789fe';
	ctx.beginPath();
	ctx.moveTo(x, y);
	while(vx > -5) {
		vx -= 0.05;
		x += vx;
		y += vy;
		if(y<1000 && vx < -4.5) {
			vx = 6;
		}
		ctx.lineTo(x, y);
	}
	ctx.stroke();
}

draw2();

var draw3 = function() {
	x = 200;
	y = 200;

	ctx.strokeStyle = '#fe4543';
	ctx.beginPath();
	ctx.moveTo(x, y);

	while(x<200+200*Math.PI) {
		x += 0.1;
		y = 200 + 25*Math.sin(0.2*x);
		ctx.lineTo(x, y);
	}
	ctx.stroke();
}

draw3();

@@ -1020,12 +1020,253 @@
 %7D%0A%0Adraw3();%0A
+%0Avar draw4 = function() %7B%0A%09x = 0;%0A%09y = 400;%0A%0A%09ctx.strokeStyle = '#8907ab';%0A%09ctx.beginPath();%0A%09ctx.moveTo(x, y);%0A%0A%09while(x*x %3C 180000) %7B%0A%09%09x += 0.1;%0A%09%09y = Math.sqrt(180000 - Math.pow(x-1,2));%0A%09%09ctx.lineTo(x, y);%0A%09%7D%0A%09ctx.stroke();%0A%7D%0A%0Adraw4();%0A

x^2 + y^2