Spirograph

Share your Work

antony74

in Share your Work • 9 months ago

It's easy to have fun and make pretty patterns with sines and cosines, but mimicing a spriograph more faithfully I've found to be quite involved.

My first attempt was all lines and line intersection - I'm quite fond of it, but feel it wasn't really the right approach.

http://www.openprocessing.org/sketch/84184
(JavaScript)

For my second attempt I made life easier for myself by using the Geomerative library, this time the shapes are curves and they just follow each others perimeters.

http://www.openprocessing.org/sketch/85326
(Java)

How would you go about implementing a spirograph?

I'm asking because I'm not completely happy with either implementation. The second is less accessible because it only runs in Java-mode, and I confess I'm not entirely comfortable with Geomerative's GPL licence.

Also bezier-curves are very fiddly to set up. I'm tempted to try and improve Geomerative's SVG support (especially Inscape SVG), so you can just draw a couple of shapes in another app then import them and watch them make pretty patterns. (... I'm also completely untempted to do a partial-port of Geomerative to JavaScript... but you never know, I might get bored enough one of these days).

Thanks for your feedback,

Best wishes,

Antony

Replies(11)

PhiLho

Re: Spirograph

9 months ago

I saw a number of spirograph implementations in this section. A little search might help you, I think.

antony74

Re: Spirograph

9 months ago

Well thanks for pointing that out - I must have mispelt it when I tried that before.

Chrisir

Re: Spirograph

9 months ago

hmm.....

is this a spirograph?

I am not sure.

book: Axel Brück: Computergrafik, 1987
http://de.wikipedia.org/wiki/Epizykloide

/**
Spirograph
optimizations:
calculate height/2 (RF+RM) etc. before
*/
float RF = 70.0; // radius inner circle (F=fix)
float RM; // radius outer circle (gets calculated later) (M=moving)
float angle = 0; // angle
float FFA = 26.0; // number of corners
float MFA = 8.0; // number of rotations
float XA;
float YA;
float oldXA=-100;
float oldYA=-100;
boolean firstTime = true;
float angle_as_radians;
void setup() {
size(1000, 760);
background(102);
RM = MFA/FFA*RF;
}
void draw() {
stroke(255);
angle_as_radians = radians(angle);
XA =(RF+RM)* cos(angle_as_radians) - RM*cos((1+RF/RM)*angle_as_radians);
YA =(RF+RM)* sin(angle_as_radians) - RM*sin((1+RF/RM)*angle_as_radians);
if (firstTime) {
//point(XA+width/2, YA+height/2);
firstTime=false;
}
else
{
stroke(255);
line (XA+width/2, YA+height/2, oldXA+width/2, oldYA+height/2);
}
// stroke(255, 2, 2);
// point(XA+width/2, 400-YA);
oldXA=XA;
oldYA=YA;
//}
angle+=1.0;
// if (angle>MFA*360)
// {
// angle=0.0;
// println ("stopped");
// noLoop();
// }
}

antony74

Re: Spirograph

9 months ago

Nice work :-)

Yes it is a spirograph. I'd never heard of them, but the wikipedia entry for spirograph confirms that epicycloids are one of the relevant families of curves.

I don't know if my implementation can handle the other cases, but it doesn't require the two shapes (one moving against the other) to be circles - any closed path should do.

quarks

Re: Spirograph

9 months ago

Very impressed with the 2 sketches they certainly put a new twist on the old Spirograph toy.

You might like to see this traditional Spirograph toy simulation (Java).

antony74

Re: Spirograph

9 months ago

Thanks, I'm thrilled you like them. Yes, I found your implementation after PhiLo told me to STFW. It's very good, you never fail to impress. Is all of the source code up? - I can't find your implementation of the Gear and Ring classes.

Best wishes,

Antony

quarks

Re: Spirograph

9 months ago

Unfortunately OpenProcessing never showed java tabs when an applet was uploaded - not sure if it is still the same. Anyway if you want I haved zipped the Spirograph applet and you can downlod it from here

antony74

Re: Re: Spirograph

9 months ago

That's cool, got it thanks :-)

mkanemoto

Re: Spirograph

7 months ago

I don't know if this does it for you, but I looked at this as if it was a sun with a planet, then a moon, &c orbiting each other.

http://www.flickr.com/photos/kanemoto/6837024699/in/set-72157629218693921/

I really would love to convert this sketch over to draw the curves using Bezier arcs but I don't know how to take three points and get a Bezier fit.

Throw this into processing and let it run. It'll run "hot" on the CPU and needs some RAM as I make the drawing 9000x9000.

// Declare BezierArc object
public BezierArc sun;
public BezierArc planet;
public BezierArc moon;
float sunRadius;
int page_pixels = 9000;
int Vertices;
float i;
String filename;
void setup() {
filename = year()+"-"+month()+"-"+day()+" "+hour()+"-"+minute()+"-"+second()+" Bezier frame-######.png";
Vertices = 50;
// int sunRotations = 7;
sunRadius = 50;
// float transparency = 150-(sunRotations*2);
i = .2;
size(page_pixels,page_pixels);
background(255);
smooth();
noFill();
stroke(150);
strokeWeight(1);
// slow this way down
//frameRate(1);
}
void draw() {
sunRadius = sunRadius * 1.3;
int sunRotations = (int) (random(0,3) * 2) + 1;
float transparency = 200-(sunRotations * 2);
int moonRotations = (int) (random(1,4) * 2);
int planetRotations = (int) (random(1,6) * 2);
int totalVertices = Vertices * moonRotations * planetRotations * sunRotations;
i = i * 1.3;
// i = i * 1.275;
strokeWeight(i);
if (sunRadius > page_pixels) {
saveFrame(filename);
setup();
}
color sunColor = color(random(0,255),random(0,255),random(0,255),transparency/3);
float sunBeginningTheta = 0.0;
sun = new BezierArc(sunColor, page_pixels/2, page_pixels/2, sunRadius, sunBeginningTheta, TWO_PI/totalVertices);
sun.make();
// sun.drawArc();
// color planetColor = color(12*i,255,255/(5*i),transparency/2);
color planetColor = color(random(0,255),random(0,255),random(0,255),transparency/2);
float planetBeginningTheta = 0.0;
float planetRadius = random(10,sun.getOriginRadius()/2);
// planet = new BezierArc(planetColor,sun.getX2(),sun.getY2(),random(sun.getOriginRadius()/8,sun.getOriginRadius()/2),planetBeginningTheta,TWO_PI/(moonRotations * Vertices));
planet = new BezierArc(planetColor,sun.getX2(),sun.getY2(),random(sun.getOriginRadius()/8,sun.getOriginRadius()/3),planetBeginningTheta,TWO_PI/(moonRotations * Vertices));
planet.make();
planet.drawArc();
// color moonColor = color(12*i,255/(10*i),255/(10*i),transparency);
color moonColor = color(random(0,255),random(0,255),random(0,255),transparency);
float moonBeginningTheta = 0.0;
float moonRadius = random(5,planet.getOriginRadius()/2);
// moon = new BezierArc(moonColor,planet.getX2(),planet.getY2(),random(planet.getOriginRadius()/8,planet.getOriginRadius()/2),moonBeginningTheta,TWO_PI/Vertices);
moon = new BezierArc(moonColor,planet.getX2(),planet.getY2(),random(planet.getOriginRadius()/8,planet.getOriginRadius()/3),moonBeginningTheta,TWO_PI/Vertices);
moon.make();
moon.drawArc();
while(sun.getOriginThetaEnd() <= sunBeginningTheta + TWO_PI - (sun.getOriginThetaArc() * 0.9)) {
sun.updateOriginThetaStart();
sun.extend();
// sun.drawArc();
// Planet
planet.setOriginX(sun.getX2());
planet.setOriginY(sun.getY2());
planet.updateOriginThetaStart();
planet.extend();
planet.drawArc();
// Moon
moon.setOriginX(planet.getX2());
moon.setOriginY(planet.getY2());
moon.updateOriginThetaStart();
moon.extend();
moon.drawArc();
} ;
// The End.
}
void keyPressed() {
if (key == 'q') {
exit();
}
}
class BezierArc{
// Class Fields
private color arcColor;
private float originX;
private float originY;
private float originRadius;
private float originThetaStart;
private float originThetaArc;
private float originThetaEnd;
private float kappa;
private float controlLength;
private float controlAlpha;
private float controlRadius;
// bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
private float x1;
private float y1;
private float cx1;
private float cy1;
private float cx2;
private float cy2;
private float x2;
private float y2;
// Class Constructors
public BezierArc(
color inputArcColor,
float inputOriginX,
float inputOriginY,
float inputOriginRadius,
float inputOriginThetaStart,
float inputOriginThetaArc
) {
//set variables to inputs
arcColor = inputArcColor;
originX = inputOriginX;
originY = inputOriginY;
originRadius = inputOriginRadius;
originThetaStart = inputOriginThetaStart;
originThetaArc = inputOriginThetaArc;
originThetaEnd = 0.0;
kappa = 0.0;
controlLength = 0.0;
controlAlpha = 0.0;
controlRadius = 0.0;
x1 = 0.0;
y1 = 0.0;
cx1 = 0.0;
cy1 = 0.0;
cx2 = 0.0;
cy2 = 0.0;
x2 = 0.0;
y2 = 0.0;
//End of BezierArc Constructor
}
// Class Methods
public float getOriginX() {
return originX;
}
public float getOriginY() {
return originY;
}
public float getOriginRadius() {
return originRadius;
}
public float getOriginThetaEnd() {
return originThetaEnd;
}
public float getOriginThetaStart() {
return originThetaStart;
}
public float getOriginThetaArc() {
return originThetaArc;
}
public float getX2() {
return x2;
}
public float getY2() {
return y2;
}
public void setOriginX(float newValue) {
originX = newValue;
}
public void setOriginY(float newValue) {
originY = newValue;
}
public void updateOriginThetaStart() {
originThetaStart = originThetaEnd;
}
public void setOriginThetaArc(float newValue) {
originThetaArc = newValue;
}
public void make() {
originThetaEnd = originThetaStart + originThetaArc;
//calculate arc start pointl x1, y1
x1 = originX + (originRadius * cos(originThetaStart));
y1 = originY + (originRadius * sin(originThetaStart));
//calculate arc end pointl x2, y2
x2 = originX + (originRadius * cos(originThetaEnd));
y2 = originY + (originRadius * sin(originThetaEnd));
// calculate kappa based on approximation
kappa = .043 * pow(originThetaArc,2) + .287 * originThetaArc;
// length of conrol len is kappa * circle radius
controlLength = kappa * originRadius;
// angle to control points is alph, use arctan of len and circle radius
controlAlpha = atan(controlLength/originRadius);
// control radius is hypotenuse of sides
controlRadius = sqrt(pow(originRadius,2) + pow(controlLength,2));
// Use start and end angles with alpha to calculate control points
cx1 = originX + (controlRadius * cos(originThetaStart + controlAlpha));
cy1 = originY + (controlRadius * sin(originThetaStart + controlAlpha));
cx2 = originX + (controlRadius * cos(originThetaEnd - controlAlpha));
cy2 = originY + (controlRadius * sin(originThetaEnd - controlAlpha));
// End of method
}
public void extend() {
originThetaEnd = originThetaStart + originThetaArc;
//arc start pointl x1, y1 was the last x2, y2
x1 = x2;
y1 = y2;
// starting control was the ending control put in new direction
// reuse old variables controlRadius, controlAlpha before updating them
cx1 = originX + (controlRadius * cos(originThetaStart + controlAlpha));
cy1 = originY + (controlRadius * sin(originThetaStart + controlAlpha));
//calculate arc end pointl x2, y2
x2 = originX + (originRadius * cos(originThetaEnd));
y2 = originY + (originRadius * sin(originThetaEnd));
// calculate kappa based on approximation
kappa = .043 * pow(originThetaArc,2) + .287 * originThetaArc;
// length of conrol len is kappa * circle radius
controlLength = kappa * originRadius;
// angle to control points is alph, use arctan of len and circle radius
controlAlpha = atan(controlLength/originRadius);
// control radius is hypotenuse of sides
controlRadius = sqrt(pow(originRadius,2)+pow(controlLength,2));
// Use start and end angles with alpha to calculate control points
cx2 = originX + (controlRadius * cos(originThetaEnd - controlAlpha));
cy2 = originY + (controlRadius * sin(originThetaEnd - controlAlpha));
// End of method
}
public void drawArc() {
// Draw it.
stroke(arcColor);
bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
}
// End of Class
}

antony74

Re: Re: Spirograph

7 months ago

Yep that definitely does it for me, nice work :-)

Those little dots you've got along your curve path are caused by the transparency and the drawing of each curve segment separately. If you could get your whole curve into some sort of container then draw it all in one go, then the dots would go away, and you might also find you have more flexibility to solve your problem with the beziers. Here's a quick example – I don't know if the Catmull-Rom used here would be an improvement as I'd imagine spirographs have variable curve tightness.

ArrayList<PVector> arr = new ArrayList<PVector>();
void setup()
{
size(900, 600);
strokeWeight(20);
stroke(200, 100, 0, 128);
noFill();
arr.add(new PVector( 100, 100));
arr.add(new PVector( 100, -100));
arr.add(new PVector(-100, -100));
arr.add(new PVector(-100, 100));
// Draw the shape one curve at a time
translate(250, 300);
someShape(0, 3);
someShape(1, 4);
someShape(2, 5);
someShape(3, 6);
// Draw the shape all in one go
translate(350, 0);
someShape(0, 7);
}
void someShape(int start, int end)
{
beginShape();
for (int n = start; n <= end; ++n)
{
PVector v = arr.get(n % arr.size());
curveVertex(v.x, v.y);
}
endShape();
}

antony74

Re: Re: Spirograph

7 months ago

Here's something like a spirograph except it's implemented with just beziers. Not a roulette curve in sight since beziers can only approximate them anyway.

(posted with name of curve family stared out since that was probably what tripped the spam filter the first time I tried to post this) (PhiLho's note: restored the name that triggered the brain-dead Zoho spam filter...)

void setup()
{
size(600, 600);
strokeWeight(5);
stroke(200, 100, 0, 128);
noFill();
translate(200,200);
ArrayList<Bezier> arr = new ArrayList<Bezier>();
Bezier b = new Bezier();
b.p1 = new PVector(0, 0);
b.cp1 = new PVector(190, 190);
b.p2 = new PVector(200, 60);
PMatrix2D matrix = b.init(radians(100));
arr.add(b);
for (int n = 0; n < 17; ++n)
{
Bezier b2 = arr.get(n).multiply(matrix);
arr.add(b2);
}
beginShape();
vertex(b.p1.x, b.p1.y);
for (int n = 0; n < arr.size(); ++n)
{
Bezier b3 = arr.get(n);
bezierVertex(b3.cp1.x, b3.cp1.y, b3.cp2.x, b3.cp2.y, b3.p2.x, b3.p2.y);
}
endShape();
}
class Bezier
{
PVector p1;
PVector cp1;
PVector cp2;
PVector p2;
PMatrix2D init(float angle)
{
PMatrix2D matrix = new PMatrix2D();
matrix.translate(p2.x - p1.x, p2.y - p1.y);
matrix.rotate(angle);
PVector controlPoint = new PVector();
controlPoint.x = p1.x - (cp1.x - p1.x);
controlPoint.y = p1.y - (cp1.y - p1.y);
cp2 = matrix.mult(controlPoint, cp2);
return matrix;
}
Bezier multiply(PMatrix2D matrix)
{
Bezier b = new Bezier();
b.p1 = matrix.mult(p1, b.p1);
b.cp1 = matrix.mult(cp1, b.cp1);
b.cp2 = matrix.mult(cp2, b.cp2);
b.p2 = matrix.mult(p2, b.p2);
return b;
}
};

Top Reply

Spirograph

Replies(11)

Re: Spirograph

Re: Spirograph

Re: Spirograph

Re: Spirograph

Re: Spirograph

Re: Spirograph

Re: Spirograph

Re: Re: Spirograph

Re: Spirograph

Re: Re: Spirograph

Re: Re: Spirograph

Statistics

Tags

Actions