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.
What Makes a Star?
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.
Starting from the Center
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.
Finding the Angle
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.
Measuring the Distance
Next, measure the distance from the center.
float radius = length(p);
This gives every pixel its distance from the middle.
Creating Alternating Points
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.
Switching Between Two Radii
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.
Turning It into a Shape
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.
Complete Shader
#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.
Changing the Number of Points
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.
Making Longer Points
Increase the larger radius.
0.35
The points become longer.
Decrease it.
0.25
The star becomes softer.
Adding Colour
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.
Rotating the Star
Simply rotate the angle.
angle += uTime;
The star now spins continuously.
Adding a Glow
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.
Where Are Procedural Stars Used?
Stars appear in many graphics.
- Collectibles.
- Achievement badges.
- Navigation icons.
- Holiday effects.
- Decorative backgrounds.
- Motion graphics.
- User interface elements.
- Particle systems.
- Magical effects.
- Procedural artwork.
Most begin with exactly the same idea we learned today.
Try These Experiments
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.
A Small Challenge
Can you create these effects?
- A spinning golden star.
- A glowing magical star.
- Two overlapping stars.
- A colourful badge.
- A rotating loading icon.
Every challenge builds on techniques you've already learned throughout this series.
What We Learned
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.
Posted Using INLEO