This article first appeared on kyndinfo.notion.site. For more more information, updates, and additional resources, please see here.
Introduction
I’ve been wanting to write books that are like introductory science texts but not superficial. Books that go beyond pop science explanations but aren’t dry and dense like academic texts.
Take quantum physics as an example. A pop science book might explain that the world is made of tiny particles, even smaller than atoms, and that these particles are also waves. Very intriguing. But after reading it, you realize that you still don’t actually understand how to make sense of wave-particle duality, how it really works, or what it means mathematically. So I turn to a college-level book, thinking, “This will give me the answers.” Instead, I find a wall of formalism. Dense derivations, little motivation, and an assumption that I already know what’s important. These books explain the details, but they don’t help me much, not having a real math or science background.
Having said this, I’ve been struggling to write a book or article that’s truly for beginners.
Many of my past articles were written for relative beginners, often based on lectures, workshops, or explanatory documents I’ve shared with colleagues and friends. I’ve been trying to keep them more engaging rather than feel like dry textbooks. But at the same time, they are not really for beginners. Many of them assume a certain level of prior knowledge, since it is a massive effort to build up all the knowledge from scratch. There are already great resources out there. For example, I don’t think I should write yet another book on vector math, and I’m not the best person to do that.
So after contemplating this, I’ve decided to let go of the idea of perfect thoroughness or consistency, at least for now. Chasing that feels like an overwhelming amount of work without yielding much more of what the world might be missing.
Instead, what I find could be more fun and uniquely valuable is externalizing the maps in my mind. The overviews, the relationships between key concepts, and the motivations behind them.
As always, these are also an exercise for myself. They are like notes to organize and structure ideas, which might one day evolve into a more structured book. At the same time, I’m trying to create something that helps readers orient themselves better. To provide a sense of where things fit, what’s important, and what gaps they might need to fill in from somewhere else.
There are 8 sections in this article covering various perspectives. You don’t have to read them in order—use the navigation menu on the left (right for mobile) to jump to any section you like.
About Space
We think we naturally know what space is, but do we really? In an everyday sense, space feels like a void for objects and matter to fill. We are all in space and move within space. It seems like a backdrop that exists independently of everything inside it.
Absolute space and relative space
That’s what Newton thought too. He wrote:
Absolute space, in its own nature, without regard to anything external, remains always similar and immovable.
But Newton also thought that even if absolute space exists, it is practically inconceivable to us. Where in the absolute are we? We’d never know. So he continues:
Relative space is some movable dimension or measure of the absolute spaces; which our senses determine by its position to bodies.
What he is saying is that we can only measure position relative to something. When we walk, we know we move relative to the ground, or the Earth. The revolution of the Earth is the movement relative to the Sun. Then the Sun or the solar system moves relative to the galaxy. From a relativistic perspective, both geocentrism and heliocentrism can be seen as correct in their own reference frames, but neither is absolutely correct. It’s just that heliocentrism provides a much simpler model for the motion of planets.
However, there is a huge gap between those who only believe in geocentrism and those who discovered heliocentrism, or dogmatists and inquirers. “Orb – on the movement of earth” is a great historical fiction on this topic.
Drawing on a 2D canvas
We want to draw stuff on a computer. To do that, we need to have three things: an origin (a reference point to measure the position relatively from), axes along which we measure distances, and a unit to define what distance corresponds to a number 1.
In theory, you can pick them freely, but most software has its own default coordinate system. For 2D drawing, like Photoshop, Illustrator, Figma, P5.js, and openFrameworks, the origin is usually the top-left corner of a canvas, and axes are horizontal (x) and vertical (y). The unit is usually a pixel or the device unit. For example, on a Retina display Mac, 1 point corresponds to 2 or 3 (or other numbers depending on your settings) physical pixels. This factor is set so that the numbers you choose appear about the same size perceptually regardless of the actual resolution of the device.
A bit more about “perceptually the same size” : for example, text of size “14” is usually rendered smaller on mobile devices than on a laptop, and much bigger on a TV, because these devices are designed to be seen from different viewing distances. There is no perfect formula for this, but most manufacturers converge in the same range, so you don’t have to worry too much about each device separately.
I said “default” because in many cases, you can manipulate the space, or rather the coordinate system. In design tools, you can drag the canvas and zoom in and out. Programming frameworks often provide methods to translate, scale and rotate the space, such as p5.js’s translate(), scale(), rotate() functions, or you can write your own functions to process the coordinates. You can also skew the space. Axes are usually selected to cross at 90° but this isn’t necessary. As long as they are independent, meaning they are not parallel, you can express a position uniquely by selecting one value for each of the axes.
The demo below from the Mapping page demonstrates affine transformation, which is a simple method to enable these kinds of coordinate transformations.
Newtonian mechanics in 2D
Once you have a coordinate system, you can move things around in this space. Newtonian physics is the perfect stating point.
In Newtonian physics, you start from a position, then apply velocity to move it, and apply acceleration to change the velocity. All of these are expressed by vectors, which is basically just a few numbers (called components) put together. Expressing them as vectors makes it much easier to handle them, as opposed to manipulating the values per axis, and there are several very useful operations defined for vectors that you cannot avoid because they’re too good.
Newton and Vectors
Vector Operations
3D Graphics
Of course, what comes after 2D is 3D. Moving up one dimension is just simple. You define a position is a vector with 3 components instead of 2. Do the same for the velocity, acceleration, etc. as long as they are defined as vectors, the math stays basically the same.
What is different, and can be a lot more challenging, is rendering. Because your canvas is 2D, you cannot just place things defined in a 3D space on it. You need to translate the points in 3D space to 2D space somehow. This is called projection, which dates back to the 15th century during Brunelleschi’s time.
Also, to make things look 3D, lighting or shading (basically the same thing — you add light to the scene, which creates shade too) plays an important role. Without light and shade, a sphere would look like just a circle. Shadows casting from one object onto another will clarify their spatial relationship.
It is your choice of style though. You can choose to draw your scene flat and cartoonish.
Higher dimensions
You can go up to higher dimensions. No matter how much you go up, vectors will help you keeping the math the same.
Thinking about higher dimensions not usually for graphics, but any data that can be represented with multiple numeric parameters are thought as a vector in multi dimensional space, with each parameter corresponding to a single axes. Then you can apply familiar concepts and operations to the data, such as addition, multiplication, calculating distance and angle, etc.
In fact, large language models (LLM) represent concepts like “dog,” “human,” “run,” “happy,” etc. as points in a mega-multidimensional space (like, 3072 dimensions), and you can do math between them to, for example, measure conceptual distance or similarity between two words or sentences. Getting familiar with this is critical for understanding how current AI models work.
Color Spaces
Colors can be represented with a series of numbers, such as R, G, and B. So they are vectors, and they live in a space. In fact, people have invented many different spatial models to represent colors “accurately” for different purposes. Imagining the relationship of colors spatially helps grasping them holistically and intuitively. Changing the hue is rotation, brightening is ascending, etc. Each different color model organizes colors differently, offering different mental models. Choosing the right model for your purpose can be critical for making your work easy and look good.
Distances
In a space, you can measure distances between points. The most common way is the Euclidean distance, which is basically the length of the straight line between two points.
In math, there are various kinds of spaces and some of them don’t have the concept of distance.
But that is not the only distance we care about. How do you measure the distance from Tokyo to São Paulo? What you want is probably not a straight line distance between two points, but a curved length along the surface of the Earth. This is called spherical geometry. How about a checkerboard? How do you measure distances between two squares? Perhaps the number of moves it takes?
The concept of distance becomes important in various cases, for example in finding the shortest path to move characters along in game design, or dividing territories based on the distances.
In computer graphics, functions that returns the distance from a point to the surface of object, called signed distance functions, or SDF are often used for 3D rendering.
So what is space?
So, what is space, after all? The answer depends. For most of our purposes when sketching something with code, Newtonian or Euclidean spaces provide the most intuitive and familiar way of thinking about space — flat, predictable, and measurable with straightforward distances and angles.
But this is neither the only space nor the true shape of space.
It’s not the true shape of space because Einstein’s general relativity describes spacetime as a curved, four-dimensional manifold. Meanwhile, quantum physics reveals that at the smallest scales, space and time behave in probabilistic, discontinuous, and often counterintuitive ways. Scientists have shown that our naive, everyday understanding of space and time breaks down at both the micro and macro scales.
It’s not the only space because mathematicians have been generalizing and expanding the concept of “space.” Riemannian geometry broadens the idea of geometry to include uniform and non-uniform curved spaces, including Euclidean, spherical, hyperbolic, and other geometries we touched upon in the distance discussion above.
Space isn’t even just about distance or geometry. Topology focuses on how shapes are connected, regardless of size or distance. Mathematics even defines spaces that aren’t intuitively spatial at all, like the space of all polynomials of a certain degree, where the focus is on the coefficients rather than the shape or a curve.
If you’re interested, go forward and explore these fascinating concepts.
About Colors
Color is a fascinating topic that lies between science and human perception.
Physically, we know how humans perceive colors. We have photoreceptors called cones in our eyes that react to different frequencies of light, and the levels of stimuli to these three types of cones determine what color we see. The coverage of each type of cone roughly matches with the spectrum of red, green, and blue; that’s why RGB displays can show us various colors even though they have only three colors of light-emitting elements.
However, this model doesn’t necessary explain what we actually experience. For example, the violet and red at both ends of the spectrum are actually continuous, with purple in between them. We see different brightness depending on the hue even when the amount of physical light is the same (in general, yellow looks much brighter than blue). We even associate different feelings, emotions, and meanings to the colors.
Color models
People have been creating different models to describe colors. These are roughly divided into two categories: ones that are mainly derived from physical properties, and ones are more based on the ways we normally describe colors.
The first challenge in systematizing colors is that different people have different responses to the spectrum of colors. To find a sort of average, called the standard (colorimetric) observer, an experiment called Wright-Guild color matching was conducted. The basic idea is that the participant is presented with a monochromatic color, which is a color with a single frequency of light, and asked to reproduce the same color by mixing three primary colors (red, green, blue) to match with a target color.
The tricky part is that the three physical lights can’t reproduce every color. The participants could match a lot of the target colors just by adjusting the brightness of each primary. But for some colors, they couldn’t get it right unless they actually subtracted one of the primary lights. There isn’t such a thing called negative light, so they solved this by adding the “negative” light to the target color side instead of the mixing side.
To better understand this, look at the chart above again. Because each cone covers a relatively broad range, there is no light that can stimulate them independently. There are inevitably certain balances of cone stimulations that can’t be achieved using just a combination of three lights.
They eventually transformed the data into something called the CIE 1931 XYZ color space, which is basically a remapping of the RGB measurements to get rid of the negative values by picking new “primaries” that were more imaginary concepts than actual lights.
Most color models today are based on this CIE color space, meaning that the values in a system can be converted to values in XYZ. The RGB color model that we use on computers today completely fits within the XYZ color space (because by definition, XYZ space has all the human-perceivable colors and even more).
Some other ways of describing colors are based on the ways we talk about colors. When we see colors, we say which kind of colors they are (reddish, yellowish), how bright or dark they are, how saturated or vivid, or dull or grayish, etc. The Munsell color system is a system to break down colors by three attributes: hue (such as red, blue, and green), value (lightness), and chroma (vividness or purity of the color). The many color models we use on computers are similar to Munsell’s model, but are designed to be able to be mapped to the RGB values on the screen and thus to XYZ values.
Computing colors
These models allow us to compute colors. For example, we can add, subtract, multiply, or rotate colors. What operations make sense and the results you get vary from model to model, and it is important to select a model for your purpose.
Being able to process colors to get the desired tone is a critical skill in image and video production.
Mixing colors is its own deep world. There are so many ways to mix colors. If you are familiar with tools like Photoshop, you probably know there are a bunch of “blending modes” such as add, multiply, screen, overlay, etc. These are different ways to calculate a new color based on the input colors.
Most of them are defined with RGB color model. Using the other models can yield different results.
Mixing colors in the real world is even more complex, because the color mixing in the real world is the result of various materials reflecting, refracting, and absorbing light. There isn’t a single formula to solve this, but the Kubelka-Munk model is known for emulating real paints consisting of a medium and different colored particles inside.
Light
Light striking the retina lets us see colors. To fully understand how colors happen to us, we must understand how light travels from its source to our eyes, bouncing off surfaces while reflecting and refracting along the way.
When the light hits an object, the object absorbs some of the light and reflects the others. On transparent objects, some also passes through. Different materials behave differently. If the material absorbs red and yellow spectrums of light more than blue, then the object will look blue. Rough surfaces will scatter the light in all different directions, thus you don’t see clear reflections of other objects on them, while smooth surfaces will mirror the surroundings more clearly.
There are many different methods to simulate this process, from very rough to more accurate approaches. Studying these methods can help you understand how we see colors on objects and better control the colors and appearance of your rendering.
Filling Space with Colors
The last section is just an example of using these theories in practice. This installation for KAF Digital space mixes several methods discussed above to fill the space with colors that have the more meditative quality of Fangor’s oil painting, appearing less digital and flashy.
About Motion
One of the most fun parts of sketching with code is that it’s not static. Let’s draw both in space and time.
Newtonian Mechanics
How do you move a thing? Just push it.
Sir Isaac Newton basically said that things stay at rest in the same position, or keep moving at the same velocity until you apply force to accelerate them. Position, velocity, acceleration, and force are the most fundamental concepts to understand physical motion. Emulating these concepts is extremely simple: frame by frame, just add force to acceleration to change it, then acceleration to velocity, then velocity to position.
Differentiation and Integration
Position, velocity, acceleration, and force are in relationships of differentiation and integration.
Differentiation is the rate of change, and integration is the accumulation of changes. For example, velocity is a quantity that describes how much position will change at a certain moment, and position is the result of velocity being applied and accumulated over time.
These subjects might have been annoying in math class. But the foundational ideas are quite simple, and luckily in sketching motion with code, you usually don’t have to solve any equations, but instead can use a very rough approximation called numerical integration, which breaks down the changes into simple additions per small amount of time.
You probably have been using this method already without knowing it, for example, the Newtonian physics simulations above are based on a numerical approach instead of mathematically accurate methods.
Analytical Solutions and Numerical Approximation
The proper way to solve differentiation and integrations by solving equation is called analytical solution. Then the approximation by dividing the changes over a small amount of time is called numerical approximation.
As mentioned above, the latter is the most common and actually more useful in so many cases, but understanding the relationship between these two approaches is important since both have their own merits and drawbacks.
The numeric approach is preferred not just because it’s easier, but because it’s also more flexible. Solving motion through equations is like predicting the future. Once solved, you know exactly what will happen at any moment. But it’s often difficult or impossible to account for all variables. Even calculating the movement of three objects drawn by gravity becomes unpredictable. Any system involving external factors, like human interaction, cannot be determined in advance. Since the numeric approach calculates changes bit by bit (very often frame by frame), it is pretty easy to react to unpredictable changes by updating parameters in real time.
The prediction of the gravitational motion of three objects, made popular by Cixin Liu’s bestseller The Three-Body Problem, is called the Three-Body Problem. While solving the two-body problem (like the Earth and Moon) is relatively straightforward and has a neat, predictable solution, the three-body problem is usually chaotic and unpredictable.
A common drawback with numerical methods is their inaccuracy. Because these methods approximate smooth motion through discrete changes, the results can go slightly off from physically accurate motion. There are several ways to minimize this problem. The most popular approaches are called the Improved Euler method and Runge-Kutta method (the Euler method is actually a special case of Runge-Kutta).
Continuous Time and Discrete Time
Tween
Simulations are, by nature, hard to predict precisely, because that’s the point. They’re meant to create or mimic phenomena that can’t be fully described in advance. We simulate weather, for example, because we don’t know exactly what will happen.
But this can be a problem when you want more direct control over how things move, where they end up, and when. Also sometimes, you may even want to break the laws of physics. Great animators and motion designers often exaggerate movement and timing, bending or ignoring realism to create something more expressive or impactful.
A very common technique in motion design is called tweening, short for in-betweening. You start from defining a start and end state, then fill the intermediate frames by interpolating between them. The word comes from the days when animators hand-drew the frames that filled the gap between key poses (many still do — some expressions simply can’t be captured any other way).
In computer animation, we often use easing functions to control these transitions. Easing functions connect one value to another, changing the pace in between, like slowing in, speeding out, bouncing, etc. In motion design, you can think of an easing function as a kind of mapping between time and another value, such as position, scale, or opacity.
Constraints
Things don’t just move freely in the real world. On Earth, everything is bound by gravity. Our body movement is constrained by the structure of bones and muscles, but this constraint is what lets us move around and lift things using our bones as levers.
Adding constraints to objects is a way to add reality to the motion.
Verlet Integration is a way to create simple physics simulations by connecting dots with sticks which constrains the distance between two points. Though simple, this technique is very flexible, and by combining multiple points and sticks, you can create various kinds of objects from rigid bodies to soft string-like objects.
To control movement more precisely and intentionally, you might want to study kinematics. Forward kinematics and inverse kinematics are common techniques used in robotics, games, and so on to describe the motion of jointed parts, such as mechanical arms or human bodies.
Both methods handle structures made of multiple segments and joints to connect them. Forward kinematics starts from the root of the connection and propagates the posture going forward to the end. You directly manipulate the rotation of each joint, and that will determine the overall movement.
Inverse kinematics is more goal-driven. You define where you want the endpoint to be, then the algorithm figures out the rotation of each joint that makes the desired result happen.
Motion of objects and life in the real world is often unpredictable, and you can always introduce some randomness to your design. The demo below shows four random walkers with different methods to generate random values. In real applications, you might want to combine more predictable methods like above with some randomness. Depending on your goal, play around and find a sweet spot.
Camera in Motion
While we’ve explored how to move objects and characters, there’s one more crucial but invisible actor to consider: the camera. How you frame the scene and position the viewpoint dramatically shapes the final result.
Sketching with motion
When you sketch with motion, you’re not just placing things in space but you are giving them life in time. Whether you follow the rules of physics, break them for expressiveness, or invent your own systems, motion opens a lot possibilities for exploration and creativity. If you’re curious, keep experimenting and see where the next movement leads.
About Perception
Human perception has evolved over a long time to give us useful information about the world. But what we perceive is only a little sliver of what’s actually out there. For example, light, or electromagnetic waves more broadly, spans a vast range of frequencies, but we can only see a small part of that spectrum. The reason we probably settled on this specific range is that it was good enough to detect and distinguish everyday objects, plants, and animals, helping us survive and navigate our environment.
Another reason is more physical: many parts of the electromagnetic spectrum, like X-rays or gamma rays, tend to pass through objects or scatter unpredictably. That makes it difficult, if not impossible, for animals to evolve organs that can capture them.
The way we perceive different physical phenomena doesn’t always match their actual physical nature. Light and sound are both waves, but we almost never experience them as vibrations (except for very low-frequency sounds). In both cases, frequency affects what we perceive, but in very different ways. Sound frequencies are perceived as pitch, and we describe them as “high” or “low.” On the other hand, different frequencies of light appear to us as different hues of colors without any sense of high or low frequency.
Studying perception is fascinating because every person’s experience of the world is different. No one else sees exactly the same colors you see. Your perception exists only within you and doesn’t exist without you. For this reason, the study of perception can’t be purely objective. We have to ask people how they feel. In fact, the color models we use today are based on data collected from many people comparing colors and describing how similar or different they appear.
Some people may extend this to say the world doesn’t exist without you, or it is impossible to understand someone else. Let’s not go there yet.
Colors
How we perceive and use color is shaped by many different factors.
First, our biology. As we touched upon earlier, we perceive different light frequencies as different hues, not as a one-dimensional gradient from red to violet, but arranged in a circle. This is because we perceive colors based on the balance between three receptors (cones) for different ranges of frequencies, each roughly corresponding to red, green, and blue. The actual light is a mixture of different frequencies. If a light contains more blue and red but less green, we perceive it as purple, a color that doesn’t actually exist in the spectrum itself — below red is infrared, and above violet is ultraviolet. This reminds us that color might be more about what’s happening inside us than something intrinsic to the light itself.
Colors are also cultural and social. Despite not knowing exactly what other people are seeing, we tend to generally agree on how we see colors. We can think of this in terms of semantics, such as red or yellow-and-black stripes for danger, to feelings and aesthetics like “blue feels cool” and “green is relaxing,” to what feels pleasing versus jarring. These associations likely started from nature, where certain objects and phenomena have specific frequencies, and then were influenced by cultural aspects, as certain colors are used repeatedly in specific ways to reinforce our associations. For example, unripe fruits are usually green, and they turn yellow, orange, or red when they are ready to eat, and we’ve been reinforcing these associations by using these warm colors on food packages, signboards, etc.
Our view on colors has also been significantly influenced and constrained by our tools. People have been working hard to reproduce and create various colors—from using plant-based dyes, to making expensive gemstones into paints, chemical and synthetic compounds, to analog and digital displays, and even nanotechnologies to create structural colors (such as iridescence). As colors became more available, they got more involved in our culture and even economies, creating trend cycles of colors to drive consumption.
The fact that people don’t see colors in the same way cannot be emphasized enough. It is estimated that there are approximately 300 million people in the world with color vision deficiency. I’d even hesitate to call it a ‘deficiency’—it’s really just a different way of seeing.
We often use charts like the one below to simulate different perceptions (the demo is emulating deuteranopia). This probably does a good job of illustrating where people may have difficulty distinguishing colors, but this is not representing the world they’re seeing. It’s not true to say the world appears mostly yellow and blue to people with deuteranopia.
Representing someone’s vision for someone else is impossible, but at least understanding how we see colors and how to manipulate them systematically can help us imagine and approach this challenging and fascinating problem.
All of this shows that color perception is a complex mix of physical phenomena, evolutionary quirks, instinct, culture, and tools from pigments to pixels. And all of it is, in a way, somewhat arbitrary. It’s just the way the world and we humans happened to turn out. Depending on the angle you look from, you can describe color in many different ways. That’s why we have so many color systems and models.
We are only scratching the surface of this topic in Colors and Numbers, but there are tons more that we can discuss. I recommend the following book for the history of color theories and their use.
The History of Colour: A Universe of Chromatic Phenomena
This comprehensive, beautiful book delves deep into the complex but fascinating story of our relationship with colour throughout human history.
Sound
Sound is also a wave. Unlike color, we can actually feel its frequency more directly, though we don’t always notice it as physical vibration. Lower frequencies feel “low,” and higher frequencies feel “high.” This height of sound is called pitch.
Interestingly, we don’t experience pitch as just a straight line—it feels more like a spiral. For example, if you start at 440 Hz (the A note) and go up, you’ll eventually hit another A at 880 Hz at exactly double the frequency. It’s not the same sound, but we hear it as the same note, just in a higher octave.
Western music typically divides the octave is into 12 pitches, each spaced evenly in terms of frequency ratio. Other musical cultures divide the octave differently. Some use more notes, some fewer, but the concept of the octave itself shows up pretty much everywhere.
Not just pitch, we can also tell sounds apart based on their timbre, which is like the texture or color of a sound. That’s how you can tell apart different sounds, like a bird chirping, car horns, or instruments like piano and trumpet. In Japanese, timbre is called 音色 (on-shoku), which literally means “sound color.”
Both pitch and timbre are tied to the physical characteristics of the thing that’s making the sound.
Let’s take a guitar string as an example. The pitch depends on its length and weight. The longer or heavier the string, the lower the pitch. But the sound a string makes isn’t just one pure frequency. When you pluck it, the string vibrates in many ways at once. The main pitch is called the fundamental frequency, but parts of the string also vibrate in smaller sections—halves, thirds, quarters, etc. These create harmonics or overtones, which are simple multiples of the base frequency.
This happens with any object, though the mix of frequencies might be a lot messier. Just like colors are usually a blend of frequencies, sounds are too. But unlike color, where a certain frequency always looks like the same hue (e.g., 440 THz light always looks red), sound doesn’t work that way. A guitar sounds like a guitar no matter what note it plays, because its timbre comes from the relationship between the overtones, not the absolute frequencies themselves. That’s why we can tell a violin from a flute, or recognize someone’s voice, or know what kind of object made a noise, based on how that sound’s overtones are structured regardless of the frequency. You can sing a high note or low note, and you will still sound like you.
It is interesting to think about this from an evolutionary standpoint. Our hearing has evolved to react to frequency ratios probably because that was useful in identifying different sources, people, animals, objects, etc. This sensitivity also lets us enjoy the different tones of sound and the relationships between different pitches of sound, which is known as harmony in music.
Understanding wave properties helps us better comprehend the relationship between physical vibrations and the sounds that we hear, and sketch ideas playing around with and visualizing sound.
Sound visualization
Sine waves and Additive Synthesis
Fourier Series
Magnitude and Logarithm
Something that I think is understated, but has been a very useful insight for sketching and designing things, is that the relationship between physical quantities and their impact on human perception is logarithmic in many cases.
For example, the strength of the light we feel is depends on the number of photons our eyes catch. But twice the photons doesn’t mean it feels twice as bright. Physically, a sunny day outdoors can have 200 times more light than a well-lit office. But does it feel 200 times brighter? Probably not.
The same goes for sound. Loudness is related to the energy of the sound, which is directly related to the amplitude of the sound wave. But again, the relationship to the way we feel is not direct. A subway might have 100 times more sound energy than someone talking, but it doesn’t feel 100 times louder.
This can be seen in a couple of ways. Life had to survive across wildly different conditions, like daylight and moonlight. So our perception systems likely evolved to compress all that information into a manageable scale. The other way to look at it is that when numbers are huge, small changes matter less. Imagine you’re stuck in traffic — a 10-minute delay feels huge when your trip is only 15 minutes, but it doesn’t matter as much if you’re going for a 5-hour drive. Similarly, adding a candle doesn’t help much when you’re already under the sun, while it can make a huge difference when you’re in a cave.
Physical values and human perception
Humans could have evolved more sensitive eyes like cats to see in darkness, but we haven’t. Perhaps our ancestors were not as nocturnal as cats, or they weren’t nocturnal because they didn’t have cats’ eyes. Either way, we managed to survive.
There is an important nuance here. Life doesn’t evolve with purpose. A statement like “giraffes acquired long necks in order to eat leaves high up” is misleading. The reality is more like something random happened to the genes, and that change happened to give the genes themselves a better chance to be passed on to following generations.
Resolution
This taps into another important topic. Resolution is how detailed something can be represented or perceived.
There is a certain limit to our senses regarding how small a difference we can detect, or how finely we can distinguish things from one another, and various technologies actively exploit these limitations to deliver experiences.
For example, computer displays are made of small dots. But when these dots are small enough — somewhere around 300 DPI（dot per inch) at reading distance, or a viewing angle of 1 arcminute (1/60 degree) — our eyes and brain stop seeing the dots and start to see images and characters. Movies have only 24 frames per second, but that’s enough to make us believe they are smooth and real. The majority of digital audio uses 44,100 samples per second, which means a second of sound is represented by 44,100 numbers. This rate was selected because it is enough to reproduce sound up to 20,000 Hz, which is about the upper limit of pitch that humans can hear. If humans had different capabilities, these technologies could have been designed differently.
An interesting part is even when there isn’t enough resolution, our brain often try to see continuity by complementing the missing details. Early monitors were much more coarse and the pixels were far more visible. But people were accepting the quality, and there is even appreciation and nostalgia for the low resolution graphics aka 8-bit style.
Animations, especially cartoonish ones, can utilize a lower frame rate to add unique effects. Sometimes, letting the brain fill in the gaps is better than trying to draw everything in detail and having the illusion fall apart by having discrepancies here and there.
Embracing the differences and complexity
When we sketch with code, we are always engaging with how humans perceive things. Our senses are full of quirks. They compress, filter, and interpret the raw physical world in different ways to make sense of it. Understanding how human perception works helps us see things and make things from different perspectives. It feels fascinating and freeing that when it comes to human perception, there’s no one right model, just many ways to look at things. Embrace the differences and complexity, and have fun.
About Patterns
Humans are wired to spot patterns. Our ancestors survived by recognizing various footprints to avoid danger and find food, spots and dots on fur, rotational patterns of petals, cycles of the sun, moon, stars and repeating seasons, tides, and weather.
Repeating patterns are fundamental to design and art. We see them everywhere, like in the repeating columns of ancient buildings, brick patterns, glass tiles on skyscrapers, and street pavements. Checkers, stripes, and other repeating motifs appear universally in decoration and textiles. Musicians create structure through rhythms, phrases, and chord cycles.
Patterns are powerful vocabulary. Following patterns makes things predictable. It is often relaxing and comforting, but intense rhythm can also bring energy and even trance. Breaking a predictable rhythm creates tension, drawing people’s attention, and going back and forth between tension and familiar patterns is a way to drive a song or a story.
Repetition
At the basis of patterns is repetition. We recognize patterns because the same thing happens again and again.
There are many methods to create and handle repetitions mathematically and programmatically.
For example, modulo is basically a mathematical way of saying “count to n then go back to one and repeat,” which is just dividing a number by another number and taking the remainder. This is common in everyday life, like the time on a clock or the days of a week, and is a basis for many repeating patterns, such as repeating tiles and musical rhythms below.
This can be easily expanded to repetition of continuous values.
Sine waves
The sine wave is another fundamental building block for repeating patterns. A mind-blowing fact is that with an infinite set of sinusoidal waves, each with its own frequency, amplitude, and phase, you can synthesize any pattern in theory. This idea is called the Fourier series for repeating patterns and the Fourier transform for ones that don’t. They are so universal and useful that you’ll bump into them in many places, such as audio and signal processing, and a whole lot of physics.
Sine waves and Additive Synthesis
Fourier Series
Tiling
Tiling is one of the most obvious visual patterns. By repeating the same elements in a space, or dividing a space based on some rules, we can create various interesting patterns that can continue forever.
The patterns can be simple repetition of the same geometric shapes to something more unique and interesting like M. C. Escher’s drawings. There are patterns that are not exactly regular and predictable like Penrose tiles or Truchet tiles.
A Voronoi diagram is a method to create more organic patterns. Cells in Voronoi diagrams are all different, but humans can still see that they follow the same rules or a “pattern.” Just like when you look through a microscope, no cells in nature are exactly the same, but we can intuitively see they are the same thing regardless.
Rhythm
Instead of dividing space, we can create musical rhythm by dividing time. Even within the same tempo and time signature, time can be divided differently, and the way you divide dictates the “feel” of the rhythm. Experienced musicians have a finely tuned resolution of time, meaning they can feel this division more granularly and accurately and precisely position their notes. Many players also adjust the timing slightly off from the exact timing naturally or intentionally to create add more nuances, such as heavy or bouncy rhythms.
Click on “Run Pen”, then click one more time to play the sound.
Music has many layers of repetition beyond basic drum loops. From guitar riffs that stick in your head to rhythmic and melodic patterns of phrases, song structure is built by repeating different sections, such as verses, bridges, and choruses. There is so much more that I can write here that we can talk about.
Randomness
Again, nothing follows a perfectly regular pattern. Randomness is a great tool that can help make our sketches more interesting and natural. Randomness is, by definition, hard to predict, but that doesn’t mean it’s uncontrollable. There are many different ways to “shape” randomness for your purpose.
Let’s take a die as an example. A single throw of a fair die is completely unpredictable. The probability for all possible results is equal. But if you throw it twice and sum the results, you will get more 7s than 12s. The more times you throw a die, the more the sum or average will converge to a certain expected value. This is called the Law of Large Numbers.
You can also apply some function to random results to adjust the distribution. For example, if you take a square of a random floating number from 0.0 to 1.0, you get this shape.
Can you see the difference between these two cityscapes? These are made by using the exact same regular grid with two different functions that give them subtly different impressions.
In most cities, building heights in the suburbs show little variation because nearly everything is only a few stories tall. Downtown, though, the range is much wider. While many buildings are still modest in height, a handful of skyscrapers rise far above the rest. You can think of this as a “pattern” that can repeat across many cities.
Noise Functions
Noise functions are methods to get randomly but continuously changing, like the up and down of terrain, the change of temperature, or the direction an animal wanders. These are all unpredictable, but unlike dice rolls, they look smoothly connected and values next to each other seem to be somehow related.
There are many noise function algorithms, but most major ones share a simple idea of smoothly connecting random numbers. So the values are random, but if you pick a point close to another, they return relatively close values, and there is no abrupt jump, or discontinuity between them.
Noise functions are often layered by adding them together at different scales to create a more natural look. Imagine a mountain range. From far away, you see its jagged silhouette. As you hike closer, you start to see smaller ridges, and up close, you notice every rock face has tiny cracks and ledges that are similar to larger forms. It is quite a common pattern in nature for things to repeat similar shapes at many levels of zoom. You can find this in rolling clouds, breaking waves, cracked desert ground, leaf veins, and the shape of coastlines.
Taming Randomness
Reading a Noise Function
Drawing Landscape
Fractal
This common pattern is called fractal. A fractal is a pattern or shape that repeats the same structure at different scales, in such a way that a part of the shape resembles the whole, and a sub-part of a part resembles the larger part.
Layering of noise functions can be seen as a way to emulate the fractal nature of the real world with a finite number of computations (for example, the landscape demo above is made of 9 iterations of the same noise). Some mathematically defined fractals, such as the Mandelbrot set or Julia set, have literally infinite details.
Pattern Recognition and Compression
The real world is messy with infinite detail. When we see or hear things for the first time as a baby, we can’t make sense of them because they are like a raw stream of data with no structure. But as we keep experiencing similar things appear and occur, our brain starts to grasp patterns. We no longer track every speck of bark on a tree, but we just think “tree.” This is a shortcut to let us deal with overwhelming complexity and act quickly.
It works the other way around, too. When information is missing, like in a blurry photo or garbled phone call, our brain tries filling the gaps with its library of familiar patterns.
Does this sounds like data compression? Yes, many technologies like ZIP, JPEG, or MP3 borrow the basically same trick. They hunt for repeated structure in data, toss the redundant bits, and keep a smaller blueprint. Decompressors rebuild the original (or close enough) by reading that blueprint plus a few rules, just like our brain filling in a pixelated image.
I wanted to study and write an article about information theory and data compression. I might, someday.
And AI image generation. The foundational idea of diffusion models is to show the AI the process of adding noise to an image until it becomes unrecognizable, and have it learn the backward process to re-imagine plausible details of images from noise.
Getting In and Out of Patterns
“Pattern” is a broad word. We started from simple repetitions and reached our recognition of the noisy world.
At a meta level, patterns what let us make sense of the world. They are so crucial for us to grasp and organize information. But at the same time, it is also important to remember that leaning to match on patterns can make us overlook the details that matter, sliding into stereotypes and snap judgments. We need to free ourselves from familiar patterns sometimes.
A fun and useful practice is to jump between levels. Spotting big patterns while appreciating the subtle differences, nuances, and noise without falling into excessive generalizations. Master that dance and you’re using your built‑in compressor to its fullest, while staying aware of both its strengths and its traps. Yes I’m taking about both life and art.
About Interpolation
Interpolation is about estimating the values that lie between the points you already know. When you’re moving a character from point A to B, you interpolate between them so you know where the character is at a given time. You know the stock price in May and July, so you interpolate between them to estimate what the price was in June. The idea is so simple, and applicable to so many things.
Linear Interpolation
Let’s start from the simplest case where the value changes at the same rate all the way.
Suppose that point P moves from one point A to another point B, and the variable t is the ratio how much P has moved between them. If t = 0, P is in the same position as A. If t = 1, P is in the same position as B, and if t = 0.5, P is exactly at the midpoint between A and B. This can be expressed as follows. A, B, and P can be either numbers or vectors.
Interpolation and Animation – Linear Interpolation
If we interpolate between points in 2D, we can draw a line segment.
Easing functions
But things don’t always change at the same pace. To manipulate the rate, we use different functions called easing functions. Easing functions are not a clearly defined category, and they can be any function that can map a range of values (usually 0 to 1) to the same range continuously, keeping the start and end the same.
Bézier and Spline
On a one dimensional line, you can draw only a single path between two points, but in higher dimensions, like 2D or 3D, there are infinite ways to connect two dots. Defining a path between points in flexible but precise way is very crucial for computer graphics to draw lines and shapes.
One of the most common methods called Bézier curve is basically to repeat linear interpolations multiple times. The demo below illustrates this idea.
There are many different methods to draw curved lines similar to Bézier curves but with more advanced features. For example, B-spline introduces additional parameters to adjust the weights of each point to add more nuanced control over the line’s shape.
Smoothness and Continuity
When we draw curves, we often care how smooth they are. What smooth means can vary, but to deal with a specific kind of smoothness, there is a very useful mathematical concept called continuity.
To measure how smooth a curve is in a mathematical sense, you can take the derivative of the function that represents the curve. The first derivative shows the rate of change of position, and the second derivative shows the rate of change of the rate of change.
- C^0$ Continuity: The curve itself is continuous. There are no breaks or gaps. You can imagine a line without lifting your pen. There is no gap in this line, but there can be sharp corners and turns that may not appear smooth.
- C^1$ Continuity: The first derivative of the curve is continuous. This means the curve has no sharp corners or cusps; it changes direction smoothly. You can think of a smoothly curving road without any sudden turns.
- C2 Continuity: The second derivative of the curve is continuous. This means that even the rate at which the curve changes direction is continuous. Roller coasters are usually designed to have C2 continuity as much as possible to avoid too sudden a change in acceleration, which can be uncomfortable or even harmful to the passengers. If it is not $C^2$ continuous, sudden changes in G-forces might slam you into the seat or cause whiplash.
An algorithm called natural spline is designed to guarantee C2 Continuity at anywhere through a curved line goes through multiple points.
While a natural spline is mathematically smooth, it may not always look like the smoothest line to human eyes. The Hobby curve algorithm minimizes curvature at each point along the line, making strokes that look like Henri Matisse’s stroke drawn with a very long brush.
Smoothstep functions
For connecting lines or interpolations smoothly, Hermite interpolation, or so-called smoothstep functions are often used. When t moves from 0 to 1, these functions can adjust the rate of change to make the derivative at the beginning and the end be zero. The first formula guarantees C1 continuity and the second one is for C2, the last one is the general form for any level of continuity. The formulas themselves are not very intuitive, but if you look at the graphs below, you can visually confirm that the rate of change becomes zero. The graph to the left shows the first derivative, and the one to the right shows the second derivative.
For example, these demos for the noise functions from the Taming Randomness page use the Hermite functions.
Interpolation for many arbitrary points
Instead of trying to control the interpolation precisely, there are methods to use algorithms to figure out the exact way to interpolate between points. This is particularly useful when there are multiple data points spread across a space.
RBF interpolation is one of those methods. It solves for weights automatically and produces a smooth surface that passes through however many points you throw at it, even in higher dimensions.
Take a look at the demo of RBF interpolation in 2D space. You can drag white points to play around.
Mixing Colors
Interpolation is not just about moving things and drawing lines. Colors are another good example. You can mix two or more colors by interpolating between them. Your result can be different depending on which color model you use. You could even draw a curved line in a color space to get an interesting gradient.
You might have seen a menu to select (re)sampling method when you are resizing an image in graphics software like Adobe Photoshop. These software programs take colors from the closest pixels and interpolate between them. In case of Photoshop, “Nearest Neighbor” means no interpolation (just pick a color from a single closest pixel), “Bilinear” linearly blends the 2 × 2 neighborhood, “Bicubic” uses a cubic function to give it C1 continuity.
Interpolating everything
As you might have noticed already at this point, you can interpolate between anything that can be represented as vectors. By seeing things through the lens of concepts like vectors and interpolation, we can treat many things in the same way (that is the power of abstraction). Interpolation is indeed a powerful and versatile technique to add to your toolbox.
There is a very similar and related concept called extrapolation. As the name suggests, extrapolation is to extend a line beyond the ends. Extrapolation are used to predict values beyond the boundary of known data points (predict the future!). It’d be interesting to explore this topic too if you are interested.
About Wave
Waves are everywhere. I suppose the word originally meant just waves on the water surface, like the ocean or a lake. However, there are many other things that exhibit characteristics of waves, such as sound, earthquakes, electromagnetic waves, and light. In terms of design and graphics, wavy shapes are one of the most common patterns and are often seen in fashion, architecture, and various art and craft pieces.
Sine Wave
Mathematically, the sine wave is the most fundamental wave shape. It represents the position of a point on a unit circle as the center angle changes.
A sine curve can be drawn as a result of a physical object following the spring equation (Hooke’s law, F=-kx). Basically, this means if you vibrate a thing attached to a spring and plot its position over time, you get a sine curve. It is fascinating that these seemingly very different methods result in the exact same curve, which indicates that there’s something special about the sine curve (yes, it is).
Vibration and Propagation
Waves propagate and spread in space. Many waves are mechanical, meaning they are caused by physical materials pushing against each other. When you pluck a guitar string, it vibrates and pushes the air around, which pushes the air next to it, and so forth. Sound is propagated across a room as oscillations of air pressure this way. Earthquakes, ocean waves, etc., all belong to this category.
Direction of the waves
Vibration and Propagation
Light
Electromagnetic waves are a different class of wave that needs no material medium at all. Electromagnetic waves have properties of both particles (photons) and waves. Light, radio, microwaves, X‑rays, etc. are the same phenomenon at different frequencies. What oscillates is simply the electric (E) and magnetic (B) fields themselves.
Even without a medium, electromagnetic waves still obey the same wave physics, such as reflection, refraction, interference, diffraction.
The concept of “wave” is an abstraction to capture these common characteristics between different things and phenomena. It’s not that they behave the same because they are waves, but we call them waves because they follow the same rules.
For example, electromagnetic waves are diffractive, meaning that they can go around behind obstacles just like waves on the surface of water. Thanks to diffraction (along with reflection and scattering) we can watch TV or use cellular phones even when there is an obstacle between the antenna and the devices.
Electromagnetic waves between about 400–800 terahertz are what we normally think of as light, and they are visible to human eyes. Depending on the frequency of light, we see different colors. Understanding how different frequencies of light interact with objects before they reach our eyes is crucial for thinking about our vision and how we model these phenomena to create graphics.
Seeing Sound Waves
Sound is also a wave. When you clap your hands, pluck a string, or hit a drum, it makes the air vibrate.
In the case of light, the frequency corresponds to the color. In sound, the frequency corresponds to the pitch, how high or low it sounds, and the amplitude affects the loudness.
“Seeing” the sound wave helps us understand the sound a lot. For example, you can see how different frequencies of sine waves sound, or how various sounds from different instruments look.
Numbers and Intervals
Musical intervals are based on frequency ratios. The equal temperament commonly used in Western music divides an octave evenly into 12 semitones. No matter where you start on the piano keyboard, the ratio of the frequency from one note to its right neighbor (e.g., C to C#) is 21/12. With the semitone as a unit, we can think of the distance between notes as a simple number relationship.
Interestingly, we don’t experience pitch as just a straight line—it feels more like a spiral. For example, if you start at 440 Hz (the A note) and go up, you’ll eventually hit another A at 880 Hz at exactly double the frequency. It’s not the same sound, but we hear it as the same note, just in a higher octave.
Upon these notes, we can construct different harmonies. It is all about ratio and relative relationships, and depending on how you lay them out vertically (play at the same time) or horizontally (play in sequence), you can evoke totally different feelings from the same sets of notes, or frequencies.
In the slightly more song-like example below, the chord (F major 9th) chord is repeated every second time. Notice how the same chord can sound different depending on the preceding chord.
Pitch and Frequency
Numbers and Intervals
The secrets of sound (for kids)
Timbre
Other than the pitch and loudness, sound also has timbre, which is like the texture or color of a sound. That’s how you can tell apart different sounds, like a bird chirping, car horns, or instruments like piano and trumpet.
Timbre comes from the fact that most of the sound don’t consists of a single frequency, but rather a mix of many different frequencies. And the balance between these different frequencies determines the timbre.
Let’s take a guitar string as an example. When you pluck it, the string vibrates in many ways at once. The main pitch is called the fundamental frequency, but parts of the string also vibrate in smaller sections—halves, thirds, quarters, etc. These create harmonics or overtones, which are simple multiples of the base frequency.
We can visualize this too. In the demo below, you can see the shape of the wave changes as we add extra sine waves with different frequencies and amplitudes (the radius of the circle), in this case, getting closer to a so-called square wave.
Sine waves and Additive Synthesis
I wish I had added sound playback to these demos. I may try later. You can compare the sound of square wave vs. sine wave on this Wikipedia page: https://en.wikipedia.org/wiki/Square_wave_(waveform)
Fourier Series
This bring us to the favorite topic of synthesizing everything with sine waves. If you have an infinite set of sinusoidal waves, each with its own frequency, amplitude, and phase, you can synthesize any periodic pattern in theory. This idea is called the Fourier series for repeating patterns and the Fourier transform for ones that don’t.
For example, an arbitrary shape, like an alphabet can be written as a Fourier series, or a series of waves.
The Fourier transform is widely used in various fields such as sound processing, signal processing, and image compression. By applying Fourier transform to sound data, we can determine the amount of different frequencies contained within it. This lets us manipulate the data by reducing or increasing a certain range of frequencies.
Sine waves and Additive Synthesis
Fourier Series
Navier-Stokes equations
The Navier-Stokes equations describe the properties and behavior of media such as water and air, including mass conservation, momentum conservation, and viscosity. This is a fundamental theory that explains how waves work in these media, but that’s not all. In computer graphics, these equations are often used for fluid simulation. Understanding and simulating waves using the Navier-Stokes equations can be a fun and interesting research topic.
About Shapes
Shapes seem like an obvious topic. Since they are ubiquitous, we take them for granted. Many tools provide ways to draw shapes, and many of them are pretty simple, like these functions in p5.js.
But as soon as we look more closely, things get complicated. In fact, there are infinite ways to define and draw shapes, and most of the shapes in the wild, from industrial products to nature, have so many nuances.
Geometric Drawings
Let’s start with geometric shapes that are (relatively) easier to define mathematically and handle with code.
It is easy to draw line segments, circles, etc. in various environments including HTML canvas. However, it is not so easy to draw figures like those in geometry textbooks. Even a simple operation such as drawing a circle around the intersection of two straight lines requires a bit of calculation. The ability to draw a picture and the ability to handle geometry mathematically are two different things. Of course, there are many well-designed libraries out there, but it is also a good learning experience to implement basic functions by yourself. Well it was at least for myself.
Understanding basic shapes gives us a foundation for drawing many other more complex shapes.
You might have experience in drawing shapes with just a compass and ruler in math class. It is sometimes fun to limit your tools and play within the constraints. It is fascinating to see we can create pretty complex shapes just with circles and lines.
Geometric Drawings – Other drawings
Geometric shapes are widely used in our design. Repeating them in patterns is a major vocabulary of decorative and graphic design. Since ancient times, people have been crafting intriguing patterns by repeating graphic elements or organizing space based on specific rules.
Detecting Collision
Not just for directly drawing shapes, we often use geometric shapes as proxies for more complex shapes as well. A good example of this is collision detection in games and 3D simulations where we want to detect object intersections. We usually use basic shapes like circles, triangles, rectangles, and combinations of them to approximate complex shapes at different precisions as needed. If you’re making a NES game, Mario can be just a rectangle. If you’re making a 3D fighting game, you might want boxes to represent a character’s body, upper and lower arms, fists, etc. separately.
A human can tell if two figures overlap or not at a glance. But it is difficult to solve this generally with a computer, and different problems often require different tricks.
Various methods of checking whether figures overlap are used to detect collisions between objects in physics simulations and games. You may rely on the functions of existing tools and libraries in actual projects. But knowing the basics will not only help you understand these tools but will also enable you to quickly implement only the functions you need yourself.
The linked page above (Detecting Collision) only covers collision detection in 2D. 3D collision detection can be much more intricate, but understanding in 2D can extend and help a lot in 3D too. Below is a simple reference I found for 3D. https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection?utm_source=chatgpt.com
Curves
While straight lines are much easier to handle, curves are the norm on Earth. Nature doesn’t have many straight lines. Almost nothing goes straight, except for light. Curves are obviously a very essential tool for sketching. However, unlike straight lines, which can be defined with just two points and a linear formula, curves have infinite possibilities and are much harder to handle. There have been many different methods of defining or drawing curves, each with its own advantages, disadvantages, and constraints.
Cumulative Curves
One of the most common ways that curves occur in the physical world is through cumulative motion or buildup, meaning a point starts moving from one location and changes its course over time. This can include freehand drawing, paths followed by insects, animals, vehicles, and the growth patterns of plants and other organisms.
Parametric Approaches
While the cumulative approach is straightforward and versatile in theory, it is often not the best for many practical use cases where you want more precise control over the overall shape and details, such as in drawing or design tools.
These tools usually adopt parametric approaches. In the parametric approach, a shape or curve is defined mathematically using one or more parameters. By varying these parameters, you can generate points that make up the shape. For example, if the parameter is called t, you can get all the points from beginning to end by moving t within a certain range.
Bézier and Spline
Among parametric approaches, there is a category of methods that are designed to define curved lines freely and precisely with multiple control points. These methods are widely used in design tools such as Adobe Illustrator or Figma, CAD, 3D modeling tools, and others.
A spline curve is a mathematically defined curve that smoothly passes through or is close to a series of control points. It is like a big family, and there are many variations including Bézier curves, B-spline curves, NURBS (Non-Uniform Rational B-Splines), Cardinal Splines, Catmull-Rom Splines, Hermite Splines, etc.
Controlling curves
When we talk about shapes, it is important to discuss their quality, not just methods, since after all, we are sketching to express something. Curves can have various visual characteristics. For example, some curves might look more organic and natural, while others might appear more geometric and mechanical. How can we create these different looks of curves?
Signed distance functions
There is another very different category of defining shapes than drawing outlines.
“Signed distance functions”, or SDF sounds scary but it is not too crazy to understand. A SDF is a function that can tell you how far a point is from a surface of a shape, say a sphere (usually in Euclidean space)
For example the distance of a point of from the surface of a sphere can be expressed as below where p is the coordinate of the point, c is the center of the sphere, and r is the radius:
This is very interesting because SDF is the technique used as basis for many mind-blowing 3D graphics demos with really small amount of code you often find on ShaderToy.
3D rendering with SDF
Using this method in 3D, you can create different shapes pretty flexibly with a relatively short amount of code using shaders.
Reading “Raymarching – Primitives”
Shaders and 3D rendering have a very steep learning curve. There isn’t a common or obvious way to build knowledge step by step, and it takes learning from multiple resources and examples. Shadertoy is one of the best resources with tons of cool demos with publicly available code. However, understanding this demo code can often be daunting. There are many techniques to grasp, and it’s often difficult to understand what’s happening in the code at first glance.
There isn’t really a shortcut here (as far as I know). Studying demo codes step by step, a little by little is the best way. Two following pages are my attempt to help with the journey.
Noise and Fractal
The landscape example just above shows a lot more intricate and organic shape than other shapes we have been seeing on so far.
Many naturally occurring shapes follow a pattern called a fractal, where a shape repeats its structure at different scales. In fractals, parts of the shape resemble the whole, while smaller parts resemble the larger parts.
This property, called self-similarity, is key to modeling many complex structures and patterns found in nature, such as coastlines, mountains, clouds, and tree branches. Objects and lives in nature often to form fractal-like structures in the process of building themselves, where similar patterns recur at progressively smaller or larger scales. Understanding this principle can help us sketch them.
Natural shapes are also unpredictable. The ups and downs of terrain, the changes in temperature, or the directions animals wander towards all seem random, but they look smoothly connected too, and values next to each other seem to be somehow related. Noise functions are the go-to methods for this, and we often overlay multiple layers of noise functions in a fractal manner (scale and add) to get desired complexity.
Exploring more shapes
As I said in the beginning, there are infinite ways of defining and drawing shapes. A couple of major topics I didn’t touch upon are:
- Polygons: I guess you know almost all 3D gaming characters are made of a bunch of triangles. Defining 3D shapes as a collection of tiny polygons (usually triangles but can be quads or other shapes) is such a common method. I didn’t cover them because it takes a lot to support 3D rendering with polygons. Studying a well-designed library or tool, such as three.js, is a good start, and there are plenty of books and tutorials.
- Manual drawing and modeling: Many of human made shapes are of course made by hands, literary or figuratively. People have been drawing and sculpting shapes by hands for ages, and there are equivalents in digital tools. Covering drawing tools and modeling tools and keeping up with their frequent changes are completely beyond my scope.
That said, if you’re interested, I recommend building basic tools yourself to learn the fundamentals. Even trying to render a few polygons can provide good insights (hint: project 3D points to 2D screen, calculate normals using cross product of vectors, and apply lighting).
Conclusion
All of these sections were originally published as introductory articles, or maps of things in my mind, to provide overviews of different topics in Sketching with Code from different angles. Most of the contents is from Sketching with Math and Quasi Physics (2019), and the other workshop materials or self-educational notes. The majority of them were originally in English, but some were in Japanese first. The translations were done with the help of AI in both directions.
I used p5.js for most of the code samples, unless otherwise noted. However, I tried to write them in a way that can be applied to any environment as much as possible.
I am not a mathematician or computer engineer. This is simply a compilation of ideas that I have found useful from the perspective of a visually oriented person. If you notice any mistakes, have better examples, or know of links that would aid in learning, please share them with me. In this context, I am less interested in show-off demos, so please refrain from providing tweet-length shaders or similar content.
Hope you enjoyed these intros.
For more, see https://kyndinfo.notion.site/Sketching-with-Math-and-Quasi-Physics
