Sunday, March 20, 2016

Graphical User Interface: (3) Final Results



Finally, the buttons and sliders have been added, and I have a complete (yet simple) GUI. It wound up looking almost exactly how I had hoped it would, so that was a plus. It also got me some much-needed practice using the ControlP5 library, though a lot of what I did in that regard was copying and pasting from examples. However, incorporating the examples into my own program helped me to understand what was going on and getting a better feel for what can be done with the library as I get more comfortable using it.

Here's a link to download my Processing code with all images included.

Paige Ruka

Saturday, March 19, 2016

Graphical User Interface: (2) Assets


I was able to find some free game backgrounds that will tile and loop while Kirby is walking, and I wanted to share my finds.

http://opengameart.org/content/bevouliin-free-game-background-for-game-developers
http://opengameart.org/content/bevouliin-free-mountain-game-background
http://opengameart.org/content/bevouliin-pyramid-free-game-background-for-game-developers
As I mentioned, I want to have the background scroll as Kirby is walking either left or right to create the illusion that he is going somewhere, rather than walking in place.

Unfortunately, in my search for images, I haven't yet been able to start the real bulk of this project, the user interface. However, I have a strong idea in my head of what I want to include... it's just a matter of getting things to work with the ControlP5 library.  Of course, if I run into any troubles, I will post questions here as they come up.

Paige Ruka

Tuesday, March 15, 2016

Graphical User Interface: (1) Project Proposal

I've been struggling to come up with an idea for this one, but I think I've finally come up with something that's (a) manageable within the time frame and (b) an idea I can have fun with.



My plan is to take this adorable pixelated Kirby sprite and have his movement controlled by the user of the program. I hope to have some sort of scrolling background, which can be changed based on three preset options, and I also would like to utilize the tint() function to involve color. Here's my rather poorly drawn mock-up of how I'd like the interface to look.


I know my drawing is nothing to sneeze at, but hopefully you still get the basics of what I'm aiming for. With 3 color sliders, 2 directional buttons, and 3 background buttons, I hope to be well within the requirements for the project.

Expect more updates on this fairly soon! I'm excited to finally get started.

Paige Ruka

P.S.: Here's some code I was tinkering with as I came up with the idea. I split up the GIF into different frames, since I want to be able to control when the images are cycling and when Kirby should be standing still. That system's not in place yet, but I think it should be easier to do with the individual frames.
PImage[] kirby;
int counter;
void setup() {
  size(210, 190);
  background(255);
  frameRate(10);

  kirby = new PImage[10];

  kirby[0] = loadImage("K0.png");
  kirby[1] = loadImage("K1.png");
  kirby[2] = loadImage("K2.png");
  kirby[3] = loadImage("K3.png");
  kirby[4] = loadImage("K4.png");
  kirby[5] = loadImage("K5.png");
  kirby[6] = loadImage("K6.png");
  kirby[7] = loadImage("K7.png");
  kirby[8] = loadImage("K8.png");
  kirby[9] = loadImage("K9.png");

  counter = -1;
}
void draw() {
  counter++;
  if (counter >= 10) {
    counter = 0;
  }

  background(255);
  image(kirby[counter], 0, 0);

  println(counter);
}

Tuesday, February 23, 2016

Digital Clock Redesign: (6) Final Design & Download Link


With just a few short hours to spare, I have completed my digital clock redesign! I'm very happy with the result. The divider between the hours and minutes changes from white to black based on whether the number of seconds detected by Processing's built-in second() function is odd or even. I've successfully created a method of fading from one number to the next, and the color of the cats changes every minute.

I've also included a download link: https://www.dropbox.com/s/q1c4k3sgj2t6nla/Digital_Clock.zip?dl=0. Since I've included images in my sketch, simply copying and pasting my code won't suffice; you'll need the vector files as well for it to work. This is something I hope my peers will consider including in their posts as well if they have also used external media in their piece.

Paige Ruka

Sunday, February 21, 2016

Digital Clock Redesign: (5) Almost There


I feel like I've spent far more time on this than I should have to gain such a simple result visually. But, as you can see if you take a look at the code, a LOT is going into this. I just figured out the system for fading from one number to the next. That's cool. I also updated my vector for the number "1" since I'm incredibly picky and didn't like that it wasn't the same width as the others.

Not quite there yet... I'm still wanting to do something more with the color of the cats. I'm getting close to the end, though.

Paige Ruka

Saturday, February 20, 2016

Digital Clock Redesign: (4) Coding In Progress


As shown above, I am currently in the process of completing the code for my clock to function properly. I've got all the variables corresponding with the cats working, which I'm very pleased with. As for what's left, I want to add some color, either randomly or based on a mapping of a different variable.

However, I have a few problems I'm running into as things are now. First, I set the frame rate to 1 because in Java mode (a.k.a. the Processing application itself), the two ellipses which separate the hours from the minutes seem to shift after one frame slightly to the right, then never again. I have no idea why this would be happening; the circles shouldn't move at all. Eventually I'll perhaps want a system where they blink once per second, but that's to be dealt with after this weird "shifty circle" issue. The other issue I have is with my vectors; even though I disabled the style on all of them, it looks to me like some have thicker outlines than others. I'm not sure if that's a global issue or just an issue with my personal computer; unfortunately, I have no way to check, as I won't have access to the school computers until Monday.

I think it's going alright otherwise, but these issues are strange, and I need to take a break for today because I don't know what's causing them and it's frustrating me ever so slightly.

Paige Ruka

Thursday, February 18, 2016

Digital Clock Redesign: (3) Vector Showcase




Finally, all the cats have been turned into vector files! I want to do a bit of resizing before I import them into Processing; I could just as easily do the resizing in Processing, but I think it'll make my life just slightly easier if I do it beforehand. It shouldn't take too long, and it'll help me to make the final product a bit more uniform. I'm happy to report that progress is coming along nicely.

Paige Ruka

Tuesday, February 16, 2016

Digital Clock Redesign: (2) Getting Back Into Inkscape





Progress is underway in turning my pencil-and-paper sketches into vector files I can use with Processing. Currently, these are the three vectors I have completed. They are not locked into being the colors they are now; I chose the colors randomly for demonstration purposes only.

The current goal is to have all ten vector files prepped and ready for Thursday's class. My next update will showcase all ten completed files.

Paige Ruka

Saturday, February 13, 2016

Digital Clock Redesign: (1) Project Proposal

For my digital clock redesign, I am planning to create a readout where, instead of traditional numbers, the display will use stylized cats which represent the numbers 0-9.

(click to zoom)
To prepare, I've sketched out a few cats for each of the 10 digits I'll need. The "9" remains unlabelled because it is simply the 6 upside-down. I plan to trace over these preliminary sketches in Inkscape to create a vector file for each digit (likely the majority of my work on Tuesday, 2/16). After that, I will be programming these numbers to display in Processing and adding color and embellishments as I see fit (Thursday, 2/18). This timeline should be sufficient in helping me complete this project by Tuesday, February 23rd as scheduled.

More updates to come throughout the week. Stay tuned!

Paige Ruka

Tuesday, February 9, 2016

Custom Functions

I wish I hadn't been so busy this past week, because I really wanted to make something great for this assignment. Unfortunately, I ran out of time; it happens, such is life.

Next time I'll do better!

Paige Ruka