# How to draw 3d spiral in p5.js in 2d without webgl or any 3D engine
**URL:** https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339
**Category:** Coding Questions
**Created:** [March 16, 2019, 5:19am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339 "2019-03-16T05:19:53Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@blkpanther](https://discourse.processing.org/u/blkpanther)
#### Post date: [March 16, 2019, 5:19am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/1 "2019-03-16T05:19:53Z")
I intend to draw spirals in the shape of a 3d spring, as in the doodle below. How can I do that through trigonometry without 3d engines like webgl?
Thanks!
---
### Author:  [@janglee](https://discourse.processing.org/u/janglee)
#### Post date: [March 16, 2019, 5:24am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/2 "2019-03-16T05:24:44Z")
Take a look at Khan Academy’s [post](https://www.khanacademy.org/computing/computer-programming/programming-games-visualizations/programming-3d-shapes/a/what-are-3d-shapes).
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 16, 2019, 8:37am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/3 "2019-03-16T08:37:06Z")
See also tutorials trigonometry
I can guide you through when you show more code
---
### Author:  [@figraham](https://discourse.processing.org/u/figraham)
#### Post date: [March 16, 2019, 8:53am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/4 "2019-03-16T08:53:04Z")
There’s a couple things I would look into:
1. You could create a 3d model in [blender](https://www.blender.org/) and load it into p5. This is one simple way to create more complex geometry but it makes it harder to animate the shape. [Dan Shiffman made a video about this](https://www.youtube.com/watch?v=FUI7HEEz9B0) and there’s a bunch of blender tutorials out there.
2. As @Chrisir suggest look at using trigonometry. There’s an example of this on the [p5 website](https://p5js.org/examples/3d-sine-cosine-in-3d.html). I would try drawing a bunch of [cylinders](https://p5js.org/reference/#/p5/cylinder) to create curves.
3. This reminded me of an [example from three.js using extrude](https://threejs.org/examples/#webgl_geometry_extrude_splines). (Use the drop down in the top right of the screen to select _HelixCurve_.) I don’t know how well this would translate to p5 but you could look at the code and see if there’s something there.
---
### Author:  [@FSXAC](https://discourse.processing.org/u/FSXAC)
#### Post date: [March 17, 2019, 8:06pm UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/5 "2019-03-17T20:06:06Z")
It’s always nice to break the problem down into smaller parts: let’s look at how we can draw the spiral one-dimension at a time.
Notice the x-axis motion is simply going back and forth with the width decreasing as we go down. Notice the y-axis motion is also going back and forth, but with an added motion going down.
These motion can be represented by two sinusoidal functions with 90 degrees out of phase. Or conveniently, use a **sine** function for one of the axis, and **cosine** function for the other function. Note that these two functions _alone_ creates a circle.
Now we just need to multiple the x-axis function with some decaying value, and add the y-axis function with some increasing function to get the spiral you wanted.
Here is a proof of concept:
```auto
void setup() {
size(400, 400, P2D);
background(255);
}
void draw() {
float n = 500;
for (float t = 0; t < n; t++) {
// adding width/2 to center the spiral
float x = cos(t * 0.05) * 100 * map(t, 0, n, 1, 0.5) + width / 2;
float y = sin(t * 0.05) * 20 + map(t, 0, n, 100, 300);
fill(0);
ellipse(x, y, 5, 5);
}
}
```
Result:
---
### Author:  [@blkpanther](https://discourse.processing.org/u/blkpanther)
#### Post date: [March 17, 2019, 8:41pm UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/6 "2019-03-17T20:41:58Z")
> [@FSXAC](#):
>
> void setup() { size(400, 400, P2D); background(255); } void draw() { float n = 500; for (float t = 0; t \< n; t++) { // adding width/2 to center the spiral float x = cos(t \* 0.05) \* 100 \* map(t, 0, n, 1, 0.5) + width / 2; float y = sin(t \* 0.05) \* 20 + map(t, 0, n, 100, 300); fill(0); ellipse(x, y, 5, 5); } }
thank you! such intelligent solutions!
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 18, 2019, 10:10am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/7 "2019-03-18T10:10:26Z")
That’s not 3D yet
In 3D you want the circle between x and z plane : cos and sin
The going down part is y : y++;
You can now use point (with 3 parameters) or line (with 6 parameters) or sphere with translate (with 3 parameters)
You can use peasyCam
Use lights(); at start of draw()
Chrisir
---
### Author:  [@kll](https://discourse.processing.org/u/kll)
#### Post date: [March 18, 2019, 10:26am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/8 "2019-03-18T10:26:58Z")
pls read header title again,
> [@blkpanther](#):
>
> without 3d engines like webgl
so @FSXAC give a very good answer!
---
### Author:  [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)
#### Post date: [March 21, 2019, 11:45pm UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/9 "2019-03-21T23:45:00Z")
You might also be interested in applying your spiral math to the Tube from the Shapes3D library.
[http://lagers.org.uk/s3d4p/index.html](http://lagers.org.uk/s3d4p/index.html)
**Edit:** that is for Processing (Java), not p5.js
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [March 22, 2019, 12:15am UTC](https://discourse.processing.org/t/how-to-draw-3d-spiral-in-p5-js-in-2d-without-webgl-or-any-3d-engine/9339/10 "2019-03-22T00:15:29Z")
example in 3D as I described above
Chrisir
```auto
ArrayList listPV = new ArrayList();
float angleForRotation;
void setup() {
size(800, 800, P3D);
noStroke();
float x, y, z; // pos
float r = 88;
fill(255, 2, 2);
for (int i=0; i<8*360; i+=4) {
// x and z are the circle part
x = r * cos(radians(i));
// y is the height (which makes the circle to a spiral)
y = map(i,
0, 8*360,
-230, 230);
z = r * sin(radians(i));
// store result
listPV.add(new PVector(x, y, z));
}
background(0);
//
} // func
void draw() {
background(0);
lights();
translate(width/2, height/2);
rotateX(angleForRotation);
for (PVector pv : listPV) {
pushMatrix();
translate (pv.x, pv.y, pv.z);
sphere(8);
popMatrix();
}
angleForRotation+=.07;
//
} // func
//
```