# How to create a 3D star?
**URL:** https://discourse.processing.org/t/how-to-create-a-3d-star/39754
**Category:** Beginners
**Created:** [November 17, 2022, 2:16am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754 "2022-11-17T02:16:08Z")
**Posts on this page:** 11
**Page:** 1
### Author:  [@timob256](https://discourse.processing.org/u/timob256)
#### Post date: [November 17, 2022, 2:16am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/1 "2022-11-17T02:16:08Z")
> please format code with \ button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)
I trying create 3d star but this not good wraiting cone 😞
```
// звезда 3д модель
function zvezda ( per_x, per_y, per_z) {
for (i=0; i <=4; i=i+1) {
rotateX (radians(0) ) ; // обнуляю угол что трасляте норм было
translate(per_x, per_y, per_z) ; // уст располож
rotateX ( radians(i* 75));
fill("yellow") ; // цвет
cone (2 , 10) ; // конус
pop() ; // вост сост системы
push() ; // сохр сост в стек
}
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 17, 2022, 3:49am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/2 "2022-11-17T03:49:04Z")
push is directly after the for loop command line
pop can stay
So both surround the part with rotate/ translate/ cone
Try it please
---
### Author:  [@timob256](https://discourse.processing.org/u/timob256)
#### Post date: [November 17, 2022, 11:58am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/3 "2022-11-17T11:58:03Z")
This not work ☹
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 17, 2022, 12:02pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/4 "2022-11-17T12:02:34Z")
Can’t you draw lines from the center to the
outside like this: `*`
with i from 0 to 360 with step +10
```auto
float x1=cos(radians(i)) * 40 + width/2 ;
float y1=sin(radians(i)) * 40 + height/2 ;
line (width/2, height/2,
x1,y1);
```
---
### Author:  [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [November 17, 2022, 3:17pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/5 "2022-11-17T15:17:36Z")
Hi
> **[Reference](https://processing.org/reference/push_.html)**
>
> The push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you …
> **[Reference](https://processing.org/reference/pop_.html)**
>
> The pop() function restores the previous drawing style settings and transformations after push() has changed them. Note that these functions are always used together. They allow you to c…
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 18, 2022, 3:00am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/6 "2022-11-18T03:00:12Z")
Hello @timob256 ,
Try this with _ **one** _ cone first:
- push
- rotateZ
- translate \< Translate from center… try one axis at a time to see the changes
- cone \< large enough to see
- pop
After you have translated the cone to where you want it then try a for loop.
Note:
360/5 = 72
References:
> **[learn | p5.js](https://p5js.org/learn/)**
>
> p5.js a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
`:)`
---
### Author:  [@timob256](https://discourse.processing.org/u/timob256)
#### Post date: [November 19, 2022, 11:32am UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/7 "2022-11-19T11:32:17Z")
Hello @glv .
Please show the code from the given example. I still don’t understand how to set the angle correctly.
```
// звезда 3д модель
function zvezda ( per_x, per_y, per_z) {
// луч 1
push();
fill("yellow") ; // цвет
//rotateX(PI/2);
translate(per_x, per_y+10, per_z) ; // уст располож
rotateX ( radians(0));
cone(w=2, h=10);
pop();
// луч2
push();
fill("yellow") ; // цвет
translate(per_x, per_y+5, per_z+5) ; // уст располож
rotateX ( radians(72));
cone(w=2, h=10);
pop();
// луч3
push();
fill("yellow") ; // цвет
translate(per_x, per_y, per_z+5) ; // уст располож
rotateX ( radians(144));
cone(w=2, h=10);
pop();
// луч4
push();
fill("yellow") ; // цвет
translate(per_x, per_y, per_z-5) ; // уст располож
rotateX ( radians(216));
cone(w=2, h=10);
pop();
// луч5
push();
fill("yellow") ; // цвет
translate(per_x, per_y+5, per_z-5) ; // уст располож
rotateX ( radians(288));
cone(w=2, h=10);
pop();
}
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 19, 2022, 12:16pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/8 "2022-11-19T12:16:27Z")
Hello @timob256,
> [@timob256](#):
>
> Please show the code from the given example. I still don’t understand how to set the angle correctly.
You need to progress in steps.
This is what I see with your code:
> [@glv](#):
>
> cone \< large enough to see
With a larger cone (10x bigger):
Using `rotate()` which is the same as `rotateZ()`:
I suggest that you try working with one cone and see how the translation and rotation work.
The cone is initially centered and you need to:
- translate()
- rotate()
- [rinse and repeat](https://www.urbandictionary.com/define.php?term=Rinse%20And%20Repeat)
There is a Processing JAVA tutorial here and the concepts apply to p5.js:
> **[2D Transformations](https://processing.org/tutorials/transform2d/)**
>
> Learn how to translate, rotate, and scale shapes using 2D transformations.
`:)`
---
### Author:  [@timob256](https://discourse.processing.org/u/timob256)
#### Post date: [November 19, 2022, 3:27pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/9 "2022-11-19T15:27:37Z")
```
// рисую зведу
function setup() {
createCanvas( 200, 200, WEBGL); //3д
angle =0; // угол
noStroke(); // делаем рëбра фигур невидимыми
scale(1) ; // можно менять маштаб
push() ; // сохраняем состояние в стек
}
// звезда 3д модель
function zvezda ( per_x, per_y, per_z) {
// луч 1
push();
fill("yellow") ; // цвет
//translate(per_x, per_y+10, per_z) ; // уст располож
translate(per_x, per_y+cos(radians(0)) * 40, per_z+ sin(radians(0))*40); // уст располож
rotateX ( radians(0));
cone(w=20, h=100);
pop();
// луч2
push();
fill("yellow") ; // цвет
//translate(per_x, per_y+5, per_z+5) ; // уст располож
translate(per_x, per_y+cos(radians(72)) * 40, per_z+ sin(radians(72))*40); // уст располож
rotateX ( radians(72));
cone(w=20, h=100);
pop();
// луч3
push();
fill("yellow") ; // цвет
//translate(per_x, per_y, per_z+5) ; // уст располож
translate(per_x, per_y+cos(radians(144)) * 40, per_z+ sin(radians(144))*40); // уст располож
rotateX ( radians(144));
cone(w=20, h=100);
pop();
// луч4
push();
fill("yellow") ; // цвет
//translate(per_x, per_y, per_z-5) ; // уст располож
translate(per_x, per_y+cos(radians(216)) * 40, per_z+ sin(radians(216))*40); // уст располож
rotateX ( radians(216));
cone(w=20, h=100);
pop();
// луч5
push();
fill("yellow") ; // цвет
//translate(per_x, per_y+5, per_z-5) ; // уст располож
translate(per_x, per_y+cos(radians(288)) * 40, per_z+ sin(radians(288))*40); // уст располож
rotateX ( radians(288));
cone(w=20, h=100);
pop();
}
function my_rotate() {
//rotateX(angle);
rotateY(angle);
// rotateZ(_angle);
angle += 0.01;
}
function draw() {
background(220,220,220, 5);
my_rotate(); // крутим
rotateX ( radians(180)); // поварачиваем звезду
zvezda(0, 0, 0) ;
}
```
---
### Author:  [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [November 19, 2022, 3:47pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/10 "2022-11-19T15:47:04Z")
Hello @timob256! 🙂
This is such a great question!
I hope you don’t mind but I changed the title of your topic
from:
“How create star?”
to:
“How to create a 3D star?”
**This better reflects the complexity of your question and will make it more search-friendly for others with the same issue in the future!**
Of course, if you feel this new title does not accurately represent your topic, please feel free to write a new title with searchable keywords. 🙂
🤓
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 19, 2022, 6:28pm UTC](https://discourse.processing.org/t/how-to-create-a-3d-star/39754/11 "2022-11-19T18:28:06Z")
Nice work!
Consider adding some finishing touches:
- lights() \< This revealed some geometry in the middle from overlapping cones
- sphere() \< This covered that geometry
Reference:
[https://p5js.org/reference/#/p5/lights](https://p5js.org/reference/#/p5/lights) \< I changed all the 128 defaults to 255
[https://p5js.org/reference/#/p5/sphere](https://p5js.org/reference/#/p5/sphere)
`:)`