drawing smooth spiral

Programming Questions

martymcwa..

in Programming Questions • 1 year ago

Hi.
I´d like to draw a smooth spiral.
It looks a bit uneven, if I draw it with lines or ellipses, like here for example http://www.learningprocessing.com/exercises/chapter-13/exercise-13-5/ . I need thin lines.

So in my code I did sth. like this: (not perfectly done, only for testing)

float numofCircles = 1;
PVector middleVec = new PVector(30,0);
float radius = 50

float totalRadian = numofCircles * PI * 2;
float startRadian = -PI;
float currentRadian = startRadian;

float targetX;
float targetY;

//spiral starts from outside
while (currentRadian < totalRadian)
{

    currentRadian += PI/200;
    radius -=.05;

    targetX = cos(currentRadian) * radius + middleVec.x;
    targetY = sin(currentRadian) * radius + middleVec.y;
    treeGraphic.ellipse(targetX, targetY, 3, 3);
}

I think with bezier, you would get smoother curves, but not that easy.
Any idea?

Thanks, Martin

Replies(6)

Ale_

Re: drawing smooth spiral

1 year ago

Why don´t you use a smaller angle and points instead of ellipses?

Ale · http://60rpm.tv/i

martymcwa..

Re: Re: drawing smooth spiral

1 year ago

I tried, but it´s not getting better. Anyway it´s ok for me now.

quarks

Re: drawing smooth spiral

1 year ago

If you want to draw a smooth spiral with lines then the important thing is the line length used. The length-of-spiral to draw should be small and constant for the whole spiral.

If you use a constant delta-angle for each line then the length of the line increases as the radius decreases.

The trick is to define the length-of-spiral to draw and modify the change in angle based on the current radius.

This is the approach I took with the code below which was used to create the image on the right.

HTH

size(300, 300);
background(0);
stroke(255);
strokeWeight(1.0);
final float RES = 1.05; // the line length
float numofCircles = 3.6;
PVector spiralCenter = new PVector(150, 150);
float startRadius = 100;
float endRadius = 20;
float currRadius = startRadius;
float totalRadian = numofCircles * PI * 2;
float startRadian = -PI;
float endRadian = startRadian + totalRadian;
float currentRadian = startRadian;
// This depends on the current radius
float deltaAngle;
// Spiral starts from outside
float lastX = cos(startRadian) * startRadius;
float lastY = sin(startRadian) * startRadius;
float nextX, nextY;
while (currentRadian < endRadian)
{
deltaAngle = PI * RES / currRadius;
currentRadian += deltaAngle;
currRadius = map(currentRadian, startRadian, endRadian, startRadius, endRadius);
nextX = cos(currentRadian) * currRadius;
nextY = sin(currentRadian) * currRadius;
line(lastX + spiralCenter.x, lastY + spiralCenter.y,
nextX + spiralCenter.x, nextY + spiralCenter.y);
lastX = nextX;
lastY = nextY;
}

patakk

Re: drawing smooth spiral

1 year ago

Quarks, that's exactly what one has to take into account, angle should not be increased by the same value each time, here's my try:

float dist = 40, radius = dist/2, alpha = 0, speed = 500;
float px, py, x, y, k;
void setup() {
size(640, 640);
background(0);
stroke(255);
smooth();
frameRate(120);
px = radius;
py = 0;
}
void draw() {
k = speed/radius;
alpha += k;
radius += dist/(360/k);
x = radius*cos(radians(alpha));
y = -radius*sin(radians(alpha));
translate(width/2, height/2);
line(px, py, x, y);
px = x;
py = y;
}

martymcwa..

Re: Re: drawing smooth spiral

1 year ago

Thanks a lot for the answers. But let´s face: with our drawing-method, we won´t get as smooth and anti-aliased as drawing with bezier-method.

quarks

Re: drawing smooth spiral

1 year ago

If you want anti-aliasing then in my post above add the statement

smooth();

at line 5.

But let´s face: with our drawing-method, we won´t get as smooth and anti-aliased as drawing with bezier-method.

Mathmatically you are correct but on a pixel display and using the right algorithm, I am not sure anyone would notice the difference.

To draw a spiral based on Bezier curves you would need to either
(1) create a bezier spine using multiple calls to the bezierVertex method. Each call would create one section of the spiral. The problem would be to calculate the control points to get smooth transitions between the sections.
(2) create the spiral from a single high order Bezier curve

In both cases the maths is quite hard to get right. A simpler solution is to use the curveVertex method.

The program below uses the curveVertex to draw a spiral.

size(300, 300);
background(0);
stroke(255);
strokeWeight(1.0);
noFill();
smooth();
float numofCircles = 3.5;
PVector spiralCenter = new PVector(150, 150);
float startRadius = 100;
float endRadius = 20;
float currRadius = startRadius;
float totalRadian = numofCircles * PI * 2;
float startRadian = -PI;
float endRadian = startRadian + totalRadian;
float currentRadian = startRadian;
int numSections = 60; // bigger the number the smoother the spiral
// This depends on the current radius
float deltaAngle = totalRadian / numSections;
// Extend the start and end of the curve because the first
// and last point is a control point and is a vertex in the
// drawn curve when using curveVertex
startRadian -= deltaAngle;
endRadian += deltaAngle;
currentRadian = startRadian;
// Spiral starts from outside
float x = cos(startRadian) * startRadius;
float y = sin(startRadian) * startRadius;
beginShape();
curveVertex(x + spiralCenter.x, y + spiralCenter.y);
while (currentRadian < endRadian)
{
currentRadian += deltaAngle;
currRadius = map(currentRadian, startRadian, endRadian, startRadius, endRadius);
x = cos(currentRadian) * currRadius;
y = sin(currentRadian) * currRadius;
curveVertex(x + spiralCenter.x, y + spiralCenter.y);
}
endShape();

Top Reply