Author: admin

Today we are going to animate our disk.

One simple trick I like to use when animating things is to use the sin() function. This is easy to do — you just need to make sure that uTime is somewhere in the expression that you pass into it.

In today’s lesson, I do this in three different places, once for each thing I want to animate: the horizontal position, the vertical position and the size of the disk.

You can see this lesson by CLICKING HERE.

Today we are going to start making shapes — using a little high school math.

You probably learned in high school that the radius squared (r²) of a circle is x*x + y*y. That means we can use the expression x*x + y*y to measure the distance squared from the center of the image (that’s the place where both x and y are zero).

If we then apply our handy dandy step function, we get a disk shape.

Everything inside the disk is where r² is less than our cutoff value. Everything outside our disk is where r² is greater than that cutoff value.

And that is exactly what we do in lesson 10.

You can see this lesson by CLICKING HERE.

Thanks to J. Peterson for point out the lack of error messages in his comment yesterday. When your program stops running, I wasn’t providing any way for you to see where the error is.

For this ninth lesson, I’ve kept everything the same except that I’ve added some behind-the-scenes infrastructure. Now when your program stops running, there is an explanatory message along the top, and an arrow that shows you which line of your program is causing the problem.

Let me know if this works for you. I would love to get constructive feedback.

You can see this lesson by CLICKING HERE.

For the eighth lesson, we are going to learn how to make edges.

It turns out that there is a shader function called step(a,b) that does this, where a and b are the two arguments to the function.

The step function returns either 0.0 or 1.0, depending on which of its two arguments is larger.

You can use the step function to make colors change suddenly. In other words, to make edges.

And if we can make edges now, then soon we will be able to make shapes, which will be really cool!

You can see this lesson by CLICKING HERE.

For the seventh lesson, we are going to start making two dimensional patterns.

To do this we will need to use both vPos.x (the horizontal position) and vPos.y (the vertical position).

You can see this lesson by CLICKING HERE.

For the sixth lesson, we are going to start creating variables.

This will make our shader program much easier to read, because we will be able to do things step by step, since we can store intermediate results along the way.

To do this we will use float variables. These are a very simple kind of variable, because they can only store one number at a time.

You can see this lesson by CLICKING HERE.

For the fifth lesson, we are going to start making things animate. To do this, we will add a time variable, and use it in our shader.

You can see this lesson by CLICKING HERE.

For the fourth lesson, we are going to start calling functions. In particular, we are going to create a sine wave striped pattern by calling the sin() function.

You can see this lesson by CLICKING HERE.

For the third lesson, we are going to start learning how to vary color across an image. Doing this will allow us to create cool shapes, patterns and textures.

You can see this lesson by CLICKING HERE.

For the second lesson, we are going to start teasing apart things like color, to see how they are actually made up of simpler component parts.

You can see this lesson by CLICKING HERE.