etra0 · September 30, 2017 18:28
diff --git a/.block b/.block
 license: gpl-3.0
 height: 600
 scrolling: no
 border: yes
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
    <script src="sketch.js"></script>
    <style> body {padding: 0; margin: 0;} </style>
    <title>Spirograph</title>
  </head>
  <body>
  </body>
 </html>
diff --git a/sketch.js b/sketch.js
 let width = 800,
 	height = 600;

 let x = 0,
 	y = 0,
 	orig_x = x,
 	orig_y = y;

 let z = 0,
 	w = 0,
 	orig_z = z,
 	orig_w = w;

 let scale = 2.2;
 let i = 0, j = 1;
 let R = 10,
 	r = 100,
 	p = 50,
 	l = p/r,
 	k = r/R;

 function setup() {
 	createCanvas(width, height);
 	cos = Math.cos;
 	sin = Math.sin;
 	stroke(255);
 	fill(255);
 	frameRate(30);
 }

 function draw() {
 	x = width/2;
 	y = height/2;

 	x += scale*R*((1-k)*Math.cos(i) + l*k*cos(i*((1-k)/k)));
 	y += scale*R*((1-k)*Math.sin(i) + l*k*sin(i*((1-k)/k)));


 	stroke(cos(i/10)*(255/2), 0, sin(i/20)*(255/2), i);
 	line(orig_x, orig_y, x, y);
 	noStroke();

 	ellipse(x, y, abs(cos(i/20)*10));
 	fill(cos(i/10)*(255/2), 0, sin(i/20)*(255/2), i);
 	orig_x = x;
 	orig_y = y;

 	i+= 0.1;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.js"></script>
	<script src="sketch.js"></script>
	<style> body {padding: 0; margin: 0;} </style>
	<title>Spirograph</title>
	</head>
	<body>
	</body>
	</html>