This sketch uses a custom “babaHouse” function to draw the house. (You can try it here at OpenProcessing.org.) Here are shots of the original code and the function:
And two versions of the output:
It may not look so different from earlier version, but the mechanics are different. Whee!
This time, the chicken legs move if you use the live version in OpenProcessing.org: a, s, d control the left leg; j, k, l control the right. Here’s a picture of part of the code:
And here are two versions of the result:
And there you have it. Baba’s hut is doing The Chicken Dance.
Okay, part four of our Processing saga may seem a little funny, because it’s all about using images and text in Processing. This, of course, is the sort of thing that one would normally do in Photoshop. However, we did it in our Processing class because:
- It was the next chapter in the book Getting Started with Processing
- Although these sketches are static, it is also possible to make them dynamic and interactive (which we will demonstrate shortly), as well as data-driven (which we also hope to do at a later date)
- Really, we did it because we could
And there you have it. Anyhow, here’s the code for my image/text version of the Baba Yaga hut. I should mention, however, that this code also refers to image and font files that are stored in a data folder with the sketch, but I’m not going to show those here.
And here’s the resulting image:
Cute, huh? And, if you want, you can run the code yourself at OpenProcessing.org by clicking here
The third installment in the Baba Yaga series involves interaction. That is, the hut follows the mouse (with some delay built in), it gets taller if the left mouse button is pressed, shorter if the right button is pressed, and, if any key on the keyboard is pressed, there’s a special, secret surprise! (Well, not so secret because I’ll show it to you below.) I also think it has much cuter graphics. You can try the interactive version at OpenProcessing.org by clicking here.
Here’s the code:
And here’s a still shot of the Nickelodeon-style house:
And the special, secret surprise that you get when you press a key:
In an earlier post I showed my first, primitive, stick-figure drawing of Baba Yaga’s hut on chicken legs. That version was what we called a “static” drawing, in that everything was spelled out exactly how it was to appear and nothing changed. This version is still static but it uses global variables with random arguments for some of the elements of the drawing. (I chose to vary the color, the height of the roof , the length of the legs, and the width of the feet.) Consequently, the picture is a little different every time that it’s drawn. (You can try it out at OpenProcessing.org by clicking here.) Here’s the code:
And here are three different iterations of the drawing, each using different random values:
Aren’t they just the cutest little huts (for cannibalistic Russian witches)?
The first real assignment in my Processing class is for each person to create a simple sketch of an object that they will then use for variations and elaborations as the class progresses. The students chose flowers, aliens, dogs, Jedi, and squids (as there are only five students now). I chose something from a book of Russian fairy tales that I read when I was little: Baba Yaga, the child-eating witch who lived in a hut with chicken legs. (Although I am a psychologist, I choose not to pursue any Freudian investigations for my choice. For now, let’s just say the hut sounded like fun.) In case you’re not familiar with Baba Yaga, here’s her Wikipedia entry and here’s one illustration of her hut (notice the skulls on the fence posts!):
So, here is my most basic version of Baba Yaga’s hut. First, the code:
And then the resulting stick-figure house:
A thing of beauty, is it not? Anyhow, it’s a beginning. More to come later.
In my lovely class on creating generative art, we’re using the fabulous, free software Processing (see processing.org). It’s wonderful software but it does have two relatively minor disadvantages: (1) it needs to be installed on your computer; and (2) it’s not obvious how to share sketches with the class. Fortunately, several online versions of Processing have been created to solve these problems, such as HasCanvas, Studio Sketchpad, or Processing.js, among others. However, one that is particularly well suited for classroom use, because you can create “virtual classrooms” as well as code online, is OpenProcessing.org:
In fact, our class has its own darn virtual classroom there, creatively entitled “Generative Art (FA 3800), Fall 2011, University of Utah” (and here’s the link to it):
Anyhow, we love it because we can post our sketches there and because we can use it even when we’re away from our own computers.
[Note: it is also possible to install the desktop version of Processing to a flash drive and run it from there. I do this, also, as it gives me the links to all of the built-in reference files and syntax coloring.]