Ken's Blog

In lesson 15 we learn about the for loop.

Sometimes you just want to do a variation on something five times, or ten times, or fifty times. The for loop lets you do things multiple times. For example, the following code:

   for (int i = 0 ; i < 6 ; i++) {
      ...
   }

lets you do something six times, depending on what you put inside the loop. The value of i can be used to change how you do it each time.

Today we use the for loop to make six disks that circle around each other in a cool animated pattern.

You can see this lesson by CLICKING HERE.

In lesson 14 we start to use one of tne of the most powerful constructs in programming. The if statement operates pretty much the way the word “if” works in English: “If this thing is true, then do that thing.”

In this case, we will make the red disk appear to be in front of the green disk. We do this by checking to see whether we are inside the red disk. If we are, then we won’t show the green disk.

Look for the following lines near the end of the program:

 
  if (c1 == 1.0)  // IF INSIDE THE RED DISK,
      c2 = 0.0;   // DON'T SHOW THE GREEN DISK.
 

These lines have the effect of making it look as though the red disk is blocking the green disk from our view. In other words, it looks as though the red disk is in front of the green disk.

You can see this lesson by CLICKING HERE.

One nice thing about defining functions is that you can call them more than once.

In lesson thirteen we see an example of creating two disks, both calling the same function disk(x,y,r), but with different arguments.

One disk is red, and the other is green. That’s because we use them to create the color:

      vec3(c1, c2, 0.1)

The red component of this color is c1, which has a high value only inside the first disk, the green component is c2, which has a high value only inside the second disk, and the blue component is 0.1, which gives us a dark blue background everywhere.

You can see this lesson by CLICKING HERE.

Eventually, as your program does more things, you will want to abstract out useful tasks like “make a circular disk”, so that you don’t just keep writing the same code in different ways.

To handle this, shader programs let you create your own functions, and that is what we are doing in lesson twelve.

We are breaking out the concept of “create a circular disk” into its own separate function. Then, in the main part of the shader, we call that function with the particular arguments we want.

One nice thing about this approach is it makes it easier for us to understand our own program. A circular disk shape always needs three things: an x position, a y position, and a radius. By writing code that makes such concepts clear, we end up with programs that are easier to write, easier to read, and less likely to break.

You can see this lesson by CLICKING HERE.

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.