Skip to content

Commit a38f3a4

Browse files
SourKreamSourKream
committed
Spirograph
1 parent e4ef708 commit a38f3a4

File tree

3 files changed

+195
-1
lines changed

3 files changed

+195
-1
lines changed

‎P5/spirograph_curve.js‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
2+
// Parameters
3+
var num_circ, resolution_factor, speed_k;
4+
var radius_factor, trace_all_paths, outer;
5+
6+
// Vars
7+
var c = [];
8+
var start = false;
9+
var finish = false;
10+
var dir = 1;
11+
12+
// IO
13+
var num_circ_input, speed_k_input, radius_factor_input, resolution_factor_input;
14+
var trace_all_paths_input, outer_input;
15+
var run_button;
16+
17+
function setup(){
18+
19+
var canvas = createCanvas(600, 600);
20+
canvas.parent('spiro_holder');
21+
setupIO();
22+
run_cycle();
23+
}
24+
25+
function run_cycle(){
26+
getParamValues();
27+
start = true;
28+
var r = 100;
29+
var speed = 1/speed_k;
30+
dir = 1;
31+
if(!outer){
32+
dir = -1;
33+
r *= 2;
34+
}
35+
c = [];
36+
for (var i=0; i<num_circ; i++){
37+
c[i] = new Circle(r, speed);
38+
r = r/radius_factor;
39+
speed *= speed_k;
40+
}
41+
}
42+
43+
function draw(){
44+
45+
if(start){
46+
if(!finish){
47+
48+
background(255);
49+
strokeWeight(2);
50+
noFill();
51+
translate(width/2, height/2);
52+
53+
stroke(0,100);
54+
c[0].drawCircle();
55+
for (var i=1; i<num_circ; i++){
56+
c[i].updatePosition(c[i-1]);
57+
58+
stroke(0,100);
59+
c[i].drawCircle();
60+
61+
if(trace_all_paths) {
62+
stroke(255*i/num_circ,150 - 150*i/num_circ,255-255*i/num_circ);
63+
c[i].drawPath();
64+
}
65+
}
66+
67+
if(!trace_all_paths) {
68+
stroke(255,0,0);
69+
c[num_circ-1].drawPath();
70+
}
71+
72+
if(c[1].angle > 3*PI/2){
73+
finish = true;
74+
}
75+
} else {
76+
background(255);
77+
translate(width/2, height/2);
78+
if(trace_all_paths) {
79+
for (var i=1; i<num_circ; i++){
80+
stroke(255*i/num_circ,150 - 150*i/num_circ,255-255*i/num_circ);
81+
c[i].drawPath();
82+
}
83+
} else {
84+
stroke(255,0,0);
85+
c[num_circ-1].drawPath();
86+
}
87+
start = false;
88+
finish = false;
89+
}
90+
}
91+
}
92+
93+
function Circle(radius, speed) {
94+
95+
this.r = radius;
96+
this.x = 0;
97+
this.y = 0;
98+
this.angle = -PI/2;
99+
this.speed = speed * resolution_factor;
100+
this.center_path = []
101+
102+
this.setPosition = function(x, y) {
103+
this.x = x;
104+
this.y = y;
105+
}
106+
107+
this.drawCircle = function() {
108+
ellipse(this.x, this.y, 2*this.r, 2*this.r);
109+
}
110+
111+
this.drawPath = function() {
112+
beginShape();
113+
for (var i=0; i<this.center_path.length; i++){
114+
vertex(this.center_path[i].x, this.center_path[i].y);
115+
}
116+
endShape();
117+
}
118+
119+
this.updatePosition = function(c) {
120+
this.x = c.x + (c.r + dir*this.r)*cos(this.angle);
121+
this.y = c.y + (c.r + dir*this.r)*sin(this.angle);
122+
this.angle += this.speed;
123+
this.center_path.push(createVector(this.x, this.y));
124+
}
125+
}
126+
127+
function setupIO() {
128+
129+
var basePosition = 800;
130+
131+
var desc = createElement('h3', 'Number Of Circles');
132+
desc.position(230, basePosition);
133+
num_circ_input = createInput();
134+
num_circ_input.position(420, basePosition);
135+
136+
var desc = createElement('h3', 'Turn Factor');
137+
desc.position(230, basePosition + 30);
138+
speed_k_input = createInput();
139+
speed_k_input.position(420, basePosition + 30);
140+
141+
var desc = createElement('h3', 'Radius Decay Factor');
142+
desc.position(230, basePosition + 60);
143+
radius_factor_input = createInput();
144+
radius_factor_input.position(420, basePosition + 60);
145+
146+
var desc = createElement('h3', 'Resolution Factor');
147+
desc.position(700, basePosition);
148+
resolution_factor_input = createInput();
149+
resolution_factor_input.position(880,basePosition);
150+
151+
var desc = createElement('h3', 'Trace All Paths?');
152+
desc.position(700, basePosition + 30);
153+
trace_all_paths_input = createInput();
154+
trace_all_paths_input.position(880, basePosition + 30);
155+
156+
var desc = createElement('h3', 'Put Circles Outside?');
157+
desc.position(700, basePosition + 60);
158+
outer_input = createInput();
159+
outer_input.position(880, basePosition + 60);
160+
161+
run_button = createButton('RUN');
162+
run_button.position(620, basePosition + 120);
163+
run_button.mousePressed(run_cycle);
164+
165+
setDefaultParamValues();
166+
}
167+
168+
function setDefaultParamValues(){
169+
num_circ_input.value(6);
170+
resolution_factor_input.value(0.01);
171+
speed_k_input.value(-3);
172+
radius_factor_input.value(3);
173+
trace_all_paths_input.value(false);
174+
outer_input.value(false);
175+
}
176+
177+
function getParamValues(){
178+
num_circ = num_circ_input.value();
179+
resolution_factor = resolution_factor_input.value();
180+
speed_k = speed_k_input.value();
181+
radius_factor = radius_factor_input.value();
182+
trace_all_paths = (trace_all_paths_input.value() == 'true');
183+
outer = (outer_input.value() == 'true');
184+
}

‎_posts/2018-01-09-dragon-curve.markdown‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: "The Dragon Curve"
4-
date: 2018-01-09 00:04:00
4+
date: 2018-01-09 00:05:00
55
categories: jekyll update
66
div_id: dc_holder
77
js_source: ../../../../../P5/dragon_curve.js

‎_posts/2018-01-09-fractal-spirograph.markdown‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
layout: post
3+
title: "The Spirograph Fractal"
4+
date: 2018-01-09 00:06:00
5+
categories: jekyll update
6+
div_id: spiro_holder
7+
js_source: ../../../../../P5/spirograph_curve.js
8+
---
9+
10+
<br><br><br><br><br><br>

0 commit comments

Comments
 (0)