How to create a 3D star?

p5.js Beginners
1

please format code with </> button * homework policy * asking questions

I trying create 3d star but this not good wraiting cone :disappointed:

  // звезда 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() ; // сохр сост в стек

     }
   }
2

push is directly after the for loop command line

pop can stay

So both surround the part with rotate/ translate/ cone

Try it please

1 Like
3

Screenshot_20221117-145410
Screenshot_20221117-1454101080×2460 141 KB

This not work :frowning:

4

Can’t you draw lines from the center to the
outside like this: *

with i from 0 to 360 with step +10

float x1=cos(radians(i)) * 40 + width/2 ;
float y1=sin(radians(i)) * 40 + height/2 ;

line (width/2, height/2,
  x1,y1);
1 Like
5

Hi

1 Like
6

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

image

After you have translated the cone to where you want it then try a for loop.

image

Note:
360/5 = 72

References:

:)

1 Like
7

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();
    }
8

Hello @timob256,

You need to progress in steps.

This is what I see with your code:

image

With a larger cone (10x bigger):

image

Using rotate() which is the same as rotateZ():

image

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:

There is a Processing JAVA tutorial here and the concepts apply to p5.js:

:)

9 
 // рисую зведу
 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) ;
  }

Screenshot_20221119-181952
Screenshot_20221119-1819521080×2460 112 KB

1 Like
10

Hello @timob256! :slightly_smiling_face:
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. :slightly_smiling_face:
:nerd_face:

3 Likes
11

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 < I changed all the 128 defaults to 255
https://p5js.org/reference/#/p5/sphere

:)

2 Likes