Procedural Motion: "Hey, Listen!"

Press the mouse button anywhere on the sketch to call the fairy to your cursor.

Anyone who's familiar with the Legend of Zelda series knows about Navi: the cute, albeit annoying little fairy most Zelda fans love to hate. As we practiced with simple animation and randomly bouncing balls, the idea popped into my head to make a recreation of Navi flying around in Processing.

Most of the motion comes from Navi herself in this piece, as shown in my Work in Progress post. However, I felt that the piece was entirely incomplete without something extra, so I decided to add in a Link of my own creation, whose eyes would follow the fairy's movements.

Kind of creepy without pupils, eh? Yeah... sorry you had to see that.

I decided to take a bit of a different route when designing my take on Link to be used in the sketch. Instead of creating the shapes in Processing, I took to the photo editing program GIMP to design the character. The reason I chose to do this is so I'd have a bit more leeway in options for shapes I could use, and could really tweak things to be just the way I like. Not only that, but I absolutely needed transparency in the eyes, so I could layer behind them a canvas of white with dark gray pupils on top, with the ability to move around with the fairy. I'm not entirely great with photo editing/creation software, so it kind of ate up an entire day for me, but it was well worth it to get the results I ended up with!

As a bit of a side note, if there are any fellow Zelda fans reading my blog: despite Navi not appearing in any games featuring "Toon" Link, I chose to use his design due to the character's big, expressive eyes I could work with. Easier to see the movement of the pupils that way, I think!

Overall, this sketch was a lot of trial and error, but I do think that (at my skill level as a beginner) I was able to create something I'm quite fond of. As I learn more about the program, we'll see what future projects will hold.

♪ Paige

[WIP] Procedural Motion

As with our Movement and Response assignment, my project this time around is a rather ambitious one for a newbie like me, so I like to give a feel for what I've been working on by uploading a work in progress!

While this little blue fairy might not seem like much, a lot of love and care went into creating the code for her.  The subtle flashing blue of her body, the wing rotation, and most important of all, the movement across the screen.  Not only that, but I've implemented random values each time the fairy leaves the screen, as well as easing and interactivity where you can grab the fairy with the mouse and stop her in her tracks!

The fairy is inspired by the Legend of Zelda video game series, and as such, my hope is to finish off the piece by making the hero Link in basic shapes for the fairy to lovingly annoy. I might go about this in a bit of a different way than usual, so we'll see how it turns out!

(In case you haven't guessed, my love of Nintendo games has basically taken over my life at this point, ha!)

♪ Paige

Movement & Response: Cloud Gazing

The boy in blue is in awe at your ability to create clouds into the sky.
Left mouse click to draw; right mouse click to erase. Press "+" for large brush or "-" for small. (If the key does not respond immediately, try holding it down for a second or two.)

My first interactive sketch is complete! My favorite part about this piece is that it has a mini story attached to it; I think that, even though the story is only one sentence long, it gives more purpose to the sketch, rather than just "press the mouse button to do a thing."

I did end up using a gradient behind the Boy in Blue so I could have the background remain static.  I actually quite like the effect it gives; it's not perfect, sure, but it looks like perhaps a lake or ocean fading into the horizon.

I wanted to have more brush sizes than just "large" and "small" but I found that even the most brief key press would advance the brush 5 sizes rather than just one, due to the quick framerate.  I'd like to learn how to get around that in the future; I'm sure there's a way, but I don't know of it yet!

The framerate "lag" is unfortunately still an issue also - ironic that the framerate can be too fast and too slow simultaneously! I feel the sketch runs much smoother offline in the Processing program, but I know the lag is error on my end, too; I need to learn how to better optimize the sketches I create to run smoothly offline and online.

Most other troubles I ran into are discussed in my WIP post; if you'd like, check them out there. Otherwise, enjoy creating clouds and entertaining the Boy in Blue!

♪ Paige

[WIP] Movement & Response

Since this project involves quite a lot more than my creations before it, I thought I'd upload my current work in progress!

The goal of this project is utilizing some of the mouse variables present in Processing to create movement.  While I've still got a long ways to go in that regard, I do have one thing I am proud of; movement of the Boy in Blue.

My goal for this project is to have the Boy in Blue - a custom object I created - follow the user's mouse horizontally, looking up in awe at what the user is (or rather, will be) creating.  My current ideas include the ability for the user to draw clouds in a bright sky, or stars in the night sky.  When the left mouse button is pressed, the user can draw clouds or stars, and when the right mouse button is pressed, they can erase what they've drawn.

I have tried putting in one "if" statement to achieve this (as a test) but did not keep it for long; if I want the clouds or stars to stay present on the screen, so, too, will the shadow of the Boy in Blue! What I want is the sky to redraw itself infinitely behind the Boy in Blue so he doesn't leave a trail, but I don't want the sky to redraw itself where the clouds or stars will be drawn. I think what I will try to do to remedy this is have a gradient background behind the Boy in Blue, and the static background higher up in the sky. This solution isn't perfect, but I think it will have to do for now.

I myself am still wondering how this one will turn out.  I'm trying to keep other elements relatively simple in design, so the movement is what I get the most practice with; more complicated designs will come in the future, when I am more comfortable with the basics!

One last thing I want to mention is the frame rate for this sketch.  It seems to be quite a bit slower running online in Javascript than offline in Java.  For future projects I hope to streamline things so frame rate remains as high as possible.

♪ Paige

Reflecting on Frankie Flood and the Art of Making

I can safely say that I was absolutely fascinated by Frankie Flood's talk and exhibition! It was especially intriguing to view the gallery before hearing him talk, then seeing some of the gallery pieces or components talked about by Frankie himself.

Perhaps what interests me most, however, is the concept of 3-D printing becoming more easily accessible to more and more people. I actually had the honor of visiting the Digital Craft Research Lab at UWM in Spring of 2012, as part of a field trip I took with my AP Studio Art high school class. I recall distinctly that this is when my fascination with 3-D printing began - we got to see the machines in action printing, and we were told about the RepRap machine, which can, as Frankie put it today, "give birth" to other machines of its kind by printing them out. After school that day, when we had returned from our field trip, I remember immediately looking up information about RepRap and wishing I could make one of my own.

My brother, who spent four years at Lakeland College in Sheboygan studying Computer Science during my four years of high school, had access to a 3-D printer around the time where I had discovered their existence, and he would sometimes bring home some of his little creations, and I was endlessly entertained by the things he could make.

I suppose I'm getting sidetracked here, so I'll cut to the chase: this presentation rekindled some of my fascinations with creating 3-D objects, and to see not only the artistic value but also the practicality in each piece kept me in awe.  To see where technology is taking us, that things can evolve so quickly with the help of others... it makes me feel incredibly lucky that this is the age I am able to live in.

♪ Paige

Mapping Values: Kirby Recreated

Another day, another sketch: this one featuring another subject near and dear to my heart, the beloved Kirby of video game fame!

Kirby reference photo courtesy of http://kirby.nintendo.com/. Retrieved from Google on 09 February 2015.

I decided that, instead of revisiting my Geo Cats (which I still might do later!), I would start a new sketch completely from scratch for this assignment.  Playing with the map function on a simple circle to produce gradients, the idea suddenly struck me... why not create my own little Kirby in Processing? He's got simple shapes and simple colors, so it shouldn't be that difficult... right?

Oh, boy, was I wrong.

Now, don't take that the wrong way; the main part of the assignment, mapping, was more or less a breeze. But, see his arms and legs? Eyes, too? Rotated ellipses. Rotation was my sworn enemy during this process - I just could not for the life of me seem to understand what I was doing! My code confused even me, with all its translate and rotate functions left, right, and center; however, I'm proud to say that I conquered the beast and made yet another sketch I can be proud of.

Some little things to note with this one: I made quite a lot of use out of assigning values to variables even outside of my for loops, simply for the sake of only having to type in the number in one place instead of many. In this way, I could adjust things pixel-by-pixel if I wanted too, and it wasn't much of a hassle at all.

I also quite like the effect of the thick outline stroke. It kind of makes him look like a sticker you could print out and wear. Stickers are great! (That's why I should win some for "Sketch of the Week," right? Nah, just kidding - I won't say anything beyond that!)

♪ Paige

Procedural Drawing: GeoCats

For loops galore! I was inspired by the wonders of for loops this week, and my decision was to create Geometric Cats. But the best part? It's just one cat! With for loops, this cat can be repeated as much as I desire, so I'm pretty happy.

Creating the cat itself took a little under an hour; figuring out coordinates can be a bit of a pain, but nothing too bad. Most of the time spent was me trying to tweak the cat to perfection; should the cat's eyes be one pixel further apart or one pixel closer together? The strange questions I ask myself.

With that completed, now was the exciting part - looping the cats. Except, using for loops proved challenging to me at the start... what was I doing wrong? Nothing appeared when I pressed the "play" button... as it turned out, I had my "update" values set to x=70 and y=120, instead of x+=70 and y+=120. It took me longer than I'd like to admit to figure that out!

Perhaps the most difficult part of this sketch was the background gradients, which I tackled last. Originally, I set the transparency value of the shapes as a looping variable, but the gradients were too thin for my liking (I wanted the colors to be more spread out instead of so close together). Eventually, I set these to a standard value ("4" for the blue gradient and "5" for the white, so nearly transparent) but I still wasn't getting the desired effect.  It took a lot of tweaking and trial-and-error but I think I finally reached an end result that I can live with!

♪ Paige