Psychedelic Graphics 0: Introduction
This is an introduction to a series on creating psychedelic-looking visuals, especially for animation and games. It assumes no prior knowledge to working with graphics nor programming, although having exposure to trigonometry and programming will help.
By the end, I hope you will have some understanding of the basics of the psychedelic graphics that I put in my videos. While the majority of those videos were created using Blender, the techniques I teach in this series are easy to transfer over and I plan to dive into Blender in a later part.
Here's what we're going to build towards in this article and the next one, part 1:
I think the most accessible way for me to convey my techniques is here, on the web. If you're not familiar with graphics programming (or programming at all đ±), fear not! You can still learn a lot! If the code looks like complete gibberish to you, don't look at it for now. Just listen to the sound of my text.
If you don't understand any of the code above... that's expected. I got my start learning graphics programming watching Freya Holmér and it took many hours for me to even understand the fundamentals. Fortunately, you're not here to understand all the fundamentals... you're just here to make things look weeeeird.
What is UV?
3D models
Although computer graphics often look 3D, when you write graphics code, you often have to think in 2D. Let's say you've 3D modeled a beautiful shape in your favorite 3D editing program. What you've really done is created a bunch of points (vertices) floating in space and then connected some of them into solid shapes (faces). It's completely hollow; we only see the surface.

A 3D model (Blast Judgment)
Almost all 3D shapes in video games and animation boil down to this. If it looks smooth, chances are there are just so many points and faces that you can't even tell where one starts and another ends. Now what do we do with these points and faces? How do people make them look alive with contours, and ruffled clothing, and color?
There are actually a few ways to do that. We're going to talk about the standard way to give color to 3D surfaces: UV mapping/texturing. When you look at 2D projection of the Earth, it looks a bit stretched and squished in some areas. Similarly, when you look at the 2D projection of the colors on a 3D model, it also looks a bit... stretched and squished:

3D model (right) and an image representing its colored faces in 2D (left) (Blast Judgment)
The way these squished, unrolled, 2D images get created is to first create a big, blank image. That's the âtextureâ. Beautifully untouched. Next, for each face on the 3D object you modeled, you reserve a part of the image you just created for that face (these reserved parts can overlap). The part of the texture image you reserve for your face can be big or small, and it doesn't need to be the same size or proportions as the face.
Selecting faces on 3D model (right) to see its location on the texture (left) (Blast Judgment)
Changing the UV map (left) changes how it looks on the model (right) (Blast Judgment)
Painting textures
Next, you paint. Anything you paint on the texture shows up on the 3D model.
Painting a texture and seeing it show up on the 3D model (Blast Judgment)
Also, most software lets you paint directly on the 3D model, coloring the image texture for you.
Painting a 3D model and seeing it show up in the image texture (Blast Judgment)
UV coordinates
So what are UVs? What is UV mapping? You can think of a UV as a location, a 2D coordinate... let's call the two dimensions X and Y, the common names when you have two dimensions [0]. In this system, (0, 0) could be a UV coordinate (X and Y are both 0) and (0.5, 0) could also be a UV coordinate (X is 0.5, Y is 0).
The part of the image texture you reserved for each face is defined by several points. Like that unrolled Earth, each of these points corresponds to a point somewhere on the 3D object... the vertices of your 3D model. On the image texture, each of these point have an X and Y location... a UV coordinate!
What are the numbers in the UVs? They're not random. Let's say one point has the UV coordinate (0.5, 1.0). The horizontal/X value, 0.5, means that the coordinate will be halfway between the left and right sides of the image. The vertical/Y value, 1.0, means that it will be all the way at the top. Both values go from 0.0 to 1.0. It's as if you take the whole 2D number space and zoomed in on the box surrounding (0, 0) and (1, 1).

We're talking about the (0, 0) to (1, 1) space (Desmos)
Why do we use 0.0 and 1.0? As you learn more graphics, you will find these numbers everywhere and understand more and more. You can think of 0 as saying ânot at allâ and 1 as saying âyes, completelyâ. If it helps, you can multiply them by 100 in your head to get a percentage, which has the same meaning (e.g. (0.5, 1.0) is 50% from left to right, 100% from bottom to top).
And what about the map? The UV map is just the data that connects the colored image texture with the faces on the 3D model.
How graphics code works
Colors in graphics
Computer graphics colors are often represented with RGB... red, green, and blue. Basically any color that humans can perceive can be created from a mixture of these three colors. In computer graphics, the amount of red, blue, and green usually span from... 0.0 to 1.0. The color red is (1.0, 0.0, 0.0) (100% red, 0% green, 0% blue). Black is (0.0, 0.0, 0.0) (all colors absent) and white is (1.0, 1.0, 1.0) (all colors at maximum). If you have made graphics for the web, you may be used to colors like 0xff0000. That's hexadecimal, a different representation, but it conveys the same thing. This interactive example below is just to show the RGB values; don't feel like you have to read the code.
So what color are the UVs? Ya, weird question. But we make UV coordinates into colors because it can help with visualizing and troubleshooting. The convention is to use the first value of the UV (the X value) as red, and the second value (the Y value) as green. And then blue... forget blue. Don't include that. Nobody likes blue (we set it to 0.0). So a UV coordinate of (0, 1) will look end up as the color (0.0, 1.0, 0.0) and look green. A UV coordinate of (1, 0) will be visualized as the color (1.0, 0.0, 0.0) (red).
As you are trying to develop this intuition, just say âRGBâ in your head: red, green, blue. Red is first, then green, then blue. Remember I said that the first number of the UV represents left-to-right location and the second represents bottom-to-top location. So, if we color a rectangle as if it's an image texture, using where each UV coordinate is on the screen to determine its color, we end up with this interesting gradient:
uv.x will give us the X value of the UV and uv.y gives us the Y value. Note that as the UV coordinates get closer to the top left (UV coordinate (0, 1)), it becomes more green because (0, 1) becomes the color (0.0, 1.0, 0.0) (that middle 1.0 is the amount of green). On the bottom right, UV coordinate (1, 0) is red (1.0, 0.0, 0.0). Think about why the bottom left is black and the top right is yellow (in computer graphics, what is yellow a mixture of đ€?):
floats and vectors vec2 vec3
Up to this point I've glossed over all these float, vec2, vec3 words. A float is basically a single decimal number (floating point number). âvecâ stands for âvectorâ and if you're not familiar with this from math, a vec2 is just a pair of decimal numbers, and a vec3 is a triplet of decimals. So our RGB color was a vec3 because it had three values. The UVs are vec2 because they have two decimals.
The structure of graphics programs
Let's imagine that I created a 3D shape. It's a rectangle and it's so big that it covers the entire 3D screen. I didn't paint it with an image texture. Instead, I asked you to decide what the color of each spot will be. I point to a spot, tell you what the UV coordinates are (between (0, 0) to (1, 1)), and you can freely decide what color it should be.
This is effectively what's happening, millions of times per second, in graphics. So how do you draw big shapes like circles or lines? It's a bit different than you might be used to in something like graphic design. You're not drawing a continous line from one point to another; instead, I'm selecting spots at random and asking you to tell me the color. Pretend the code below is not there and just look at the visualization on the right:
In order to carry out plans to create big, interesting designs, graphics require you to âcoordinateâ in a decentralized way. You can't even look at what the colors of the other parts of the screen are because, for all you know, you haven't even gotten to them yet (in your computer's graphics card). The code that you'll write isn't run once to generate all the colors, it's run millions of times for each small part of the screen. If you have experience programming, it's a very different mindset.
OK! You're ready to start part 1! You will see how we create interesting interesting visuals even with these constraints in part 1.
To hear more, subscribe to my newsletter or follow me on Twitter.
Footnotes
- [0] Actually, the two dimensions are called U and V because X, Y, and Z are already taken by the 3D position. Since we're not concerned with that here, I thought X and Y would be easier to understand.