If you like creating simple melodies and finding harmonies…

I’ve always enjoyed the simple music-making applications with available notes on a grid that the user can turn on and off. Often these applications use a pentatonic scale (i.e. just the black key notes) so that nothing the user does can sound dissonant. But I prefer the challenge of finding something that sounds good, tripping over awkward chords on the way.

As a kid, I learned insane amounts from just playing around with the software my parents gave me or happened to have installed on our machine. I developed La Pastorale with these experiences in mind, aiming to create a setting in which people can learn about music theory simply by exploration and trial-and-error.

Have fun!

Mechanics

Maybe you’d like to see some the of the functionality explained. Here is a script for the brown bar that moves across the grid, responsible for triggering the notes.

Since each row of notes is a different color, I can associate color with the notes that I want Scratch to play. The variable called ‘speed’ is a value that changes when you press allegro, andante, or presto. I needed to have the note length and wait time adjust with each speed so that the note would play only once per beat.

Lots of people have asked how I make the melody to switch from major to minor. It’s easier than it seems! There is an adjustment to just one note that makes that happen: the third note in the scale. In our case, it’s an E. To make the entire melody sound minor, the E shifts down to become an E flat. So because the value of E changes, I used a variable for this row of notes.

The value of the variable changes when the user clicks the ‘major’ and ‘minor’ button sprites. Here are some scripts attached to the ‘minor’ button. The one on the left tells the button to appear to be off as long as E has value of 64 (its major value). On the right, you can see that clicking the button sprite changes E to its minor value and makes the minor button appear to be on.

This all essentially switches in the scripts for the ‘major’ button sprite.

Pac-man enthusiasts, rejoice! I have you made you one attractive and fully playable level.

The end results of Programming are, of course, all lollipops and rainbows. But I’m here to tell you about the frustration that precedes the satisfaction.

Behind-the-Scenes Hair-Pulling Moment Number 1: Designing a stage.

I knew that Pac-man’s maze needs to be not too basic and not too complex. It should be symmetrical and nice-looking. It needs to accommodate moving characters and fit within 480 x 360 pixel screen area. And since would be controlling movement with numbers of pixels, I knew it would be to my advantage to make the most mathematically regular system of paths units as possible.

Pulling all these requirements together was harder than I anticipated, and I spent a lot of time on failed attempts. In the end, I built a grid of blocks in Illustrator, drew a stroke that went through only the exact centers of blocks (Smart Guides, I love you), and adjusted the width of that stroke until there seemed to be a nice path/wall thickness ratio that fit both my screen dimensions and the size of my characters. Success.

Behind-the-Scenes Hair-Pulling Moment Number 2: Pellets.

Oh, they were easy enough to draw. But I did spend nearly an hour placing them equidistant on my nicely-drawn paths by inputting coordinate values. See the first part of this code? I had to come up with 128 different values for those.

Behind-the-Scenes Hair-Pulling Moment Number 3: Pac-man’s Movement.

The $1,000,000 question is: How do you keep Pac-man on the path and from munching his way through walls? I examined a number of different Scratch projects to find the answer, and there are actually many different ways of doing this, each with various glitch potential. All made use of the “color # touching color #” functionality, but this played out quite differently depending on how the arrow keystrokes were programmed. Does the right arrow key aim a perpetuum mobile Pac-man in an easterly direction? Or does it inch him there at a prescribed distance? Where is the colored pixel that determines whether Pac-man has hit a wall, and should he bounce back in this event or simply halt? I experimented for hours with all these options and came up with functionality that is infrequently glitchy, but still not perfect. Sigh.

Behind-the-Scenes Hair-Pulling Moment Number 3: Ghost Movement.

Thankfully with the ghosts, I didn’t need them to do anything special like think for themselves or chase Pac-man. I simply gave the illusion of random movement by preprogramming three different cycles of movement around the stage that were decently complex. Each ghost has a script that begins something like this…

… and continues on for at least six times the length you see here.

Conclusions? I obviously can’t bring myself to create an ugly game, regardless of the low number of viewers and even lower number of players it will have. Beauty takes time and thought. And for beauty, I’m always ready to give both!

I used to do word searches all the time as a kid. I had strategies. I had techniques. If it has been too long since you’ve done a word search, today is your day! It’s even nicer doing it online, because you don’t have to draw awkward hot dog shapes all over the grid — the computer and I have done it for you.

In this game, you get to make choices as a party planner and then see them come together in a party scene. The most involved part of my job was creating the graphics for each venue/color scheme combo! I used the following raw images, adjusted the colors, and painted the decorations and party-goers in Photoshop.

Turn up the sound and explore!

Programming 101: Variables

This game makes heavy use of variables. Variables are items that can hold a value, much like x in algebra. Variables in programming languages can also hold words, not just numbers.

Each of the three choices in this game (venue, colors, and music) is a separate variable. As the user clicks on a graphic, the variable sets itself to their choice and keeps that value in its memory until the end of the game. For example, here is a script that belongs to the postcard graphic of the warehouse location. In Scratch, orange-colored blocks indicate commands with variables. This script tells Scratch to give the “location” variable a value of “warehouse” when the image is clicked on.

As you can see, “step” is another variable in this game. I used the step variable to control the pacing of the game, basically telling graphics to only appear at certain steps. The step value increases when a choice has been made. This way, things happen in sequence and the user cannot go backwards.

At the end of the game (step 6 or so), a sprite called “Party” finally appears. It shows the party scene and contains 9 different costumes, one for each color/venue choice. Here is an excerpt of the script that tells Scratch which costume should be shown.

… and so on and so forth.

Interactive game #2.

This one demonstrates a basic ability to make a quiz show game. It’s not going to pose a challenge to any of you, but feel free to grab a small child and let me know how it works for them!

Inspiration: I grew up with lots of good fine art books for children. It’s easy and precious to cultivate familiarity with culture if you start young!

Please join me in welcoming a new creature to Exercises in Flourishing:

The Interactive Game!

I have been waiting a long time to get into programming classes, and it all begins here with a course entitled Program Logic.

We won’t learn any true programming languages yet. The brilliant minds at MIT have devised a way to teach programming concepts though a colorful, training wheels environment called Scratch.

Anyone can download and use Scratch. There is an huge community of students and hobbyists uploading projects to the Scratch website every second.

But in other ways, Scratch is a lonely entity. Whatever I create in Scratch can only be played within the application, so I’m going to frequently link you to the Scratch website. There can you actually play my games and download them.

For my first game, I made a simple variation on classic Pong. I was proud of myself in that I bypassed Google Images and made my graphics myself! That’s right — I’m finally learning to approach my work with good old creative gumption, discovering that I CAN illustrate. (More on this in subsequent posts!)

So… what are you waiting for?

… or hang out here and read more about Scratch.

This is the basic layout of the program. To the left, I have a tray of all the different code pieces available to me, organized by category and color-coded. In the center is where I  drag these pieces and fit them together in scripts. I have a monitor in the upper right where I can test my program in real time, and below that is where all my graphic assets (called sprites) are stored. You can see in this screenshot that the “ball” sprite is highlighted. That means that I am seeing only the scripts that belong to that sprite in the center pane. Other items have their own scripts that I can edit if I click their thumbnail.

Here is part the script that controls the functionality of my buoyant, blooming ball.

In the King’s English:

If the ball hits the log,
it must bounce in a direction opposite from whence it came.
Since this is a bit too predictable, we’ll let the computer randomly vary this angle within a range.
We want to keep track of the number of times the ball hits the log, because
after every five hits,
the ball should look like it has bloomed a bit more,
and it should move faster.
Every five hits, these two dynamics should progress.

It’s all so beautifully logical.

This flowchart exercise in Program Logic class was designed to get us thinking logically and sequentially. Have I mentioned that I love to design infographics?