Punctual & Pictures

The next skill we can learn in Punctual is how to do stuff with photos. The easiest place to get photos on the Internet to use is actually the Wikimedia Commons, which is a site full of free-to-use photos and videos that are really useful for art like this.

To use a photo from the Wikimedia Commons, you need to click through the photo repeatedly until you have the link to the actual image file. For example, https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg is a URL for the actual image. Note that if you click on that link, there’s nothing else in your browser except the photo and the URL ends with the file extension of the image (things like jpg or png).

At this point, you might want to find a photo you’ll use for the rest of this section.

Caution: as cool as it would be, sites like Instagram try to make sure you can’t use photo links this way so you can’t just use photos you’ve posted on social media.

To use a picture in Punctual, take the URL of the image you’ve found and do the following:

tex "https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg" [fx,fy] >> video;

You can combine this with things we’ve seen already, on multiple lines:

tex "https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg" [fx,fy] >> video;

rect [sin cps,0] [0.5,0.5] * [0.6,0.3,0.8] >> video;

You can see the fuchsia rectangle sweeping across the screen on top of the photo!

Now, you can do fun manipulations of the photo pretty easily. For example, you can change the color palette of the photo just like we changed the color of the rectangle earlier.

tex "https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg" [fx,fy] * [0.6,0.2,0.8] >> video;

You can also show only part of the photo by multiplying it by a shape. Here we’re going to use a different shape called an hline that is a horizontal line across the screen.

tex "https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg" [fx,fy] * [0.6,0.2,0.8] * (hline (sin cps) 0.25) >> video;

The next thing we’ll show is how to use a circular window into the picture that responds to the music.

tex "https://upload.wikimedia.org/wikipedia/commons/6/63/Assassin_bug_(Rhynocoris_iracundus)_with_bee_(Apis_ssp)_prey.jpg" [fx,fy] * [0.6,0.2,0.8] * (circle [0,0] lo) >> video;

What we’ve introduce here is circle, which takes a point for the center of the circle, and a radius. Here, for the radius, we’re using a thing called lo that is bigger when the bass of the music is louder and smaller when it’s quieter.

If you try this example, experiment with different MiniTidal beats to see how it changes the visualization!

Now, we’re going to talk about slightly more advanced techniques involving pictures.