Stars appear everywhere in digital graphics.
Game collectibles.
Achievement badges.
Navigation icons.
Holiday decorations.
Particle effects.
At first glance, a star looks much more complicated than a circle or a polygon.
In reality, a star is simply another procedural shape built from mathematics.
Once you understand how it works, you'll be able to create stars with different numbers of points, animate them, and combine them with other procedural shapes.
A regular polygon has sides that all extend the same distance from the center.
A star is different.
Some points extend farther away.
Others stay closer to the center.
Instead of using one radius, we'll alternate between two.
A large radius.
A small radius.
Repeating those two values creates the familiar star shape.
As in previous lessons, begin by centering the UV coordinates.
vec2 p = vUv - 0.5;
Now every calculation happens relative to the middle of the screen.
Each pixel also has a direction.
float angle = atan(p.y, p.x);
The angle tells us where the pixel lies around the center.
We'll use that angle to decide whether the pixel belongs to a long point or a short point.
Next, measure the distance from the center.
float radius = length(p);
This gives every pixel its distance from the middle.
Suppose we want a five pointed star.
That means ten alternating sections.
Five long.
Five short.
float points = 5.0;
float section = floor(
angle /
(3.14159 / points)
);
Every other section will use a different radius.
The mod() function helps us alternate.
float edge = mix(
0.18,
0.30,
mod(section, 2.0)
);
Even sections become short.
Odd sections become long.
Together they create the outline of a star.
Compare the distance against the chosen edge.
float star =
1.0 -
smoothstep(
edge,
edge + 0.01,
radius
);
Pixels inside the edge become visible.
Everything outside remains black.
#ifdef GL_ES
precision mediump float;
#endif
varying vec2 vUv;
void main(){
vec2 p = vUv - 0.5;
float angle = atan(p.y, p.x);
float radius = length(p);
float points = 5.0;
float section = floor(
angle /
(3.14159 / points)
);
float edge = mix(
0.18,
0.30,
mod(section, 2.0)
);
float star =
1.0 -
smoothstep(
edge,
edge + 0.01,
radius
);
gl_FragColor = vec4(vec3(star),1.0);
}
This creates a simple procedural star without importing any textures.
Three pointed star.
points = 3.0;
Four pointed star.
points = 4.0;
Six pointed star.
points = 6.0;
Eight pointed star.
points = 8.0;
Changing one number completely changes the appearance.
Increase the larger radius.
0.35
The points become longer.
Decrease it.
0.25
The star becomes softer.
Stars look much better with colour.
vec3 color = vec3(1.0,0.85,0.2) * star;
gl_FragColor = vec4(color,1.0);
Try gold.
Blue.
Purple.
Red.
Every colour gives a different feeling.
Simply rotate the angle.
angle += uTime;
The star now spins continuously.
Reuse what we learned earlier.
color += vec3(0.2) *
smoothstep(
0.12,
0.0,
radius
);
The center becomes brighter, making the star appear to glow.
Stars appear in many graphics.
Most begin with exactly the same idea we learned today.
Create a six pointed star.
Create an eight pointed star.
Rotate the star.
Add a glow.
Animate its size.
Combine it with a circle.
Experiment with different colours.
Can you create these effects?
Every challenge builds on techniques you've already learned throughout this series.
Today we created procedural stars by alternating between two radii while moving around the center of the screen.
Using angles, distance, and a little bit of mathematics, we generated one of the most recognizable procedural shapes.
This technique can be expanded into many decorative graphics and animated effects.