Fun Programming

By

See https://funprogramming.org Programming can be fun and a very creative activity. Playing with graphics and sound is a great way to get started. That's how I learnt programming and math: by experime... more

Download on the App Store

Download on the App Store

Get it on Google Play

FAQs about Fun Programming:

How many episodes does Fun Programming have?

The podcast currently has 20 episodes available.

Fun Programming episodes:

July 24, 2024 Fun programming 82: Program a gradient of colors
With the lerpColor() function we can find a color that is between two other colors. The lerpColor() function takes three parameters. The first two are colors. The third parameters indicates if the new color we get should be closer to the first color or to the second. 0.5 means right in the middle of the two. Numbers below 0.5 mean closer to the first color, and number greater than 0.5 mean closer to the second.
What we do in our program is getting all the possible colors between the first color and the second one by slowly increasing the third parameter from 0 to 1. With each color we get we draw one line. After filling the screen with lines of different colors we get a nice looking vertical gradient.
...more
0min
July 23, 2024Fun programming 153: Rendering Processing shapes in Blender
After the two previous episodes, in which we created a 3D shape in Proccesing and exported it as .obj file, we are ready to import that shape into Blender and render a realistic looking image.
These are the steps we take to get our render ready:
Import the .obj file into Blender
Clean up the imported model by deleting a huge rectangle that somehow grew in one side. Maybe it was caused by using lights() in Processing, or some kind of bug.
Adjust the view. We move and rotate the objects and the camera around to make a composition we are happy with.
Add a background plane that will receive the shadows of our galaxy object and also reflect sun light.
Replace the default light with a proper sun, which seems to produce better results. Try different lights yourself!
Add simple materials to the plane and to the galaxy to set colors for them.
Do some color management. Choose the look of the render by simulating different film styles. Basically it adjust the color range and tints the whole scene. This can add a nice touch to the result.
Do test renders and one final render with a higher sample value. Increasing the samples improves the quality, reduces noise, and makes it much slower too. Find the balance.
Save and enjoy the rendered image.
If you didn't do so already, I recommend you watch the Blender beginner tutorials at:
cgcookie.com/blender/cgc-courses/blender-basics-introduction-for-beginners/ 😃
...more
0min
July 23, 2024 Fun programming 152: Exporting 3D shapes as .obj files in Processing
This time we are taking the shape we created in episode 151 and exporting it as an .obj file. To achieve that we use the OBJExport Processing library. We also take a look at how to make code run only once even if it's inside the draw loop. That becomes useful to avoid exporting the .obj file over and over again. We only need the file once 😃
Processing by default offers a limited set of 3D primitives: only spheres and cubes. Other shapes you have to load or build yourself out of triangles calling vertex(), which probably means knowing a lot of math. To make it easier to generate and manipulate complex 3D shapes there are several libraries, for instance Toxiclibs (toxiclibs.org/) and HE_Mesh (hemesh.wblut.com/). In this tutorial I also show where you can find examples for exporting .obj files using both HE_Mesh and Toxiclibs.
In the next episode we will import the .obj file into Blender and render an image with realistic lights and shadows!
...more
0min
July 23, 2024 Fun programming 151: Convert an image into a 3D grid of boxes
This episode is... long! I hope you can stay awake for 18 minutes 😃
In this episode I show you how you can create a grid of 3D cubes based on an input image. We use the brightness of each pixel in the image to set the size of each 3D cube in our grid.
scale() is used to scale the scene up. The default is scale(1). If you want to make everything half the size, use scale(0.5). And to double the size use scale(2).
I talk about rotating the camera, but what I meant was rotating our scene. It is indeed possible to rotate the camera, but we don't do that in this episode. To rotate the scene we just include calls to rotateX() and rotateY(), using the mouse coordinates as input. So when we move the mouse, everything spins around. You could use frameCount or millis() instead of mouseX or mouseY, if you wanted to have an automatic rotation.
lights() is used to enable the default 3D lights in Processing. Nothing fancy, but at least we see something. There are other kinds of lights, you can find them in the reference or in future episodes.
An idea to make the result in this episode more interesting: use not only brightness() but also hue() and saturation(). And map those to different properties of the box. You could for instance specify width, height and depth of the box (instead of making it a perfect cube). Or you could move the boxes up in the air depending on brightness, for example. And then rotate depending on hue. And on top of that, translate them again after rotating. That's what I did to generate this image: hamoid.tumblr.com/post/108687502754/
Ok, in the next episode I'll show you how to export your 3D object as an .obj file, and after that how to load an .obj file into Blender to render your object as an image with realistic lights and shadows!
...more
0min
July 23, 2024 Fun programming 150: Webcam light tracking and air drawing
This episode shows two things you can do with a webcam.
The first one is tracking an object which is easy to distinguish from the background. We use brightness() to search for bright pixels, but you could also use red() to search for very red pixels, or one of the other functions that return color properties.
At home at night this works very well. Doing this for an art installation is more tricky, because the location might be very different from your home environment. People can wear crazy colors, the sun spins around continuously changing the light, and lights may be turned on and off. If you want to know more about this field, search for computer vision (CV). There are some libraries out there which can help.
Ideas: try to make a simple game which you control with light, use light to increase and decrease a parameter in your program, or use light to give instructions to your program.
The second experiment we do in this episode is using light to draw. It's actually a very simple trick. Instead of drawing everything that comes out of the webcam, we just draw the bright stuff, and the rest we ignore. In our experiment we draw white on black. But you could change the colors as time passes, or you could continuously fade the drawing to black, giving you a nice trail effect. A more advanced experiment you could do is to create blinking particles and combine them with the video feed, so you could move a magic wand in front of the webcam and it would leave floating sparks 😃 So many things to try!
...more
0min
July 23, 2024 Fun programming 149: Glowing SVG vector shape
In Processing you can easily load, display and manipulate vector images. Some advantages of vector images are: they often occupy little space on the hard drive, the can be enlarged without the result becoming pixelated, and there are tons of vector objects online which you can use in your programs. More about them: en.wikipedia.org/wiki/Vector_image
In this episode I use Inkscape, a free open source program, to draw and edit vector images. I save the file in Simple SVG format.
To be able to display SVG text in Processing, it must be converted to curves first.
To be able to set the fill and stroke properties of an SVG shape in Processing, you need to call shape.disableStyle() first.
You can display an SVG file in Processing just by writing two lines of code: PShape s = loadShape("heart.svg"); shape(s, 20, 20, s.width, s.height);
Note: I made a mistake with the screen resolution when recording this video and part of the image is cropped, but I think nothing important is missing.
...more
0min
July 23, 2024 Fun programming 148: Drawing shapes with glow or shadow
By drawing the stroke of a shape multiple times with low opacity we can easily achieve glows and shadows. A simple concept that can produce good looking images. Here some examples: hamoid.tumblr.com/post/76579918775/84932-jpg-34758-jpg-and-49862-jpg-as-saved-by (expired link)
Tip: the darkness of the shadow or glow should not decrease in a linear fashion (like 8, 6, 4, 2) or it will not look too real. That's why I used distances like 22, 33, 44 and 55. I'll try to record an episode in the future about linear vs exponential and other interesting curves. Meanwhile here you can find information about curves at: robertpenner.com/easing/
...more
0min
July 23, 2024 Fun programming 147: Let's make errors II (nullPointerException, arrays, logic)
This is one of those videos where we unfortunately don't do any amazing graphics. But we do something almost as fun: we provoke errors. I hope that by seeing errors happen you can identify them and fix them quickly when they happens to you.
In part II we take a look at nullPointeExceptions, which happen when you try to access a variable that has not been initialized. We also see what happens when you try to access array elements that do not exist, and finally we take a quick look at logic errors: programs with the correct syntax, but unexpected behavior.
This is really a quick overview, as there are lots of things that can go wrong in programs. Try to learn from your mistakes! 😃
You can read about software bugs (and find out where the word comes from) in Wikipedia: en.wikipedia.org/wiki/Software_bug
...more
0min
July 23, 2024 Fun programming 146: Let's make errors I (syntax and type)
This is one of those videos where we unfortunately don't do any amazing graphics. But we do something almost as fun: we provoke errors. I hope that by seeing errors happen you can identify them and fix them quickly when they happens to you.
In part I we take a look at errors that happen when you misspell or forget something (syntax errors) and also at errors that happen when using the wrong type (int, float, String, etc).
...more
0min
July 23, 2024 Fun programming 145: Export animation frames, convert to animgif using gifsicle
In this episode we add two features to the loop drawing program we created on the last one: export the loop as gif images and clear the animation to start with a new drawing. Both features are triggered by pressing different keys on the keyboard.
As the animation is a 20 frame loop, it does not really matter when we start saving the frames, as long as we export exactly 20. An easy way to export the right amount of images is by having a variable that indicates how many frames we still want to save. If the variable is 0, it means we don't want to save any images. At some point we press the key 's' in the keyboard, and we change the variable, making it equal to the total number of frames in our loop. In the draw loop we just have to check if the variable is greater than 0. If it is, we save a frame and reduce the variable by 1. At some point the variable will become 0 again and the saving of frames will stop.
Once we have exported the frames we can use the command line program 'gifsicle' to pack all frames as a .gif animation, which we can later send by e-mail or upload to the Internet. gifsicle is a free program for .gif animation manipulation. With it you can add and remove frames to a gif animation, compress it, change the delays between frames, reduce the colors and much more.
To clear the animation we just create again all the PGraphics when we press a key. Probably a more efficient method would be to write a loop that calls clear() on each PGraphics (instead of creating them again). If you want to try improve the program by using clear(), take a look at processing.org/reference/clear_.html
...more
0min

FAQs about Fun Programming:

How many episodes does Fun Programming have?

The podcast currently has 20 episodes available.