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

First Sketch: My Name

This is my first sketch: my name. It is comprised mostly of filled rectangles and quadrilaterals; however, the exception to this is part of the "P", which contains an arc with a wide stroke (25px, the same width as the majority of the other shapes).  I feel as though as the class goes on, I can use more efficient ways to make the same or similar shapes as I did in this sketch, but for now, I am happy that I have an understanding of the basics we've learned thus far.

♪ Paige