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

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

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

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

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

Variables and Functions

I decided to really try and refresh my memory with this one through using not only a custom function, but a custom class as well. Granted, the custom class is fairly simple, as its only real purpose is so that I can add cats to a dynamic array list every time the mouse is pressed and released, but it's something, right?

Please see the code for more information. I also decided to post this one on my OpenProcessing account, so that way you don't need to copy and paste the code to see it in action.

I hope you like it! I really feel like I'm getting back into the swing of things now, which is great!

Paige Ruka

Simple Static Scene

It's not really a scene, but at least it's a cat! This is a good refresher for me, as I've used Processing in the past but needed to look back to remember what I'd learned. (If you're curious, you can find some of my previous work with Processing by clicking here!) Without further ado, here is my first creation for the new year:

int triX = 400;
int triY = 110; 

size(800, 600);
background(245); 

//EARS
fill(255,193,193);
triangle(triX, triY, triX-250, triY-50, triX-200, triY+190);
triangle(triX, triY, triX+250, triY-50, triX+200, triY+190); 

//HEAD
fill(139,69,19);
ellipse(width/2, height/2, 400, 400); 

//LEFT EYE
pushMatrix();
translate(width/2-95, height/2-25);
rotate(radians(-10));
fill(255,193,37);
ellipse(0, 0, 125, 75);
fill(0);
ellipse(0, 0, 60, 75);
popMatrix(); 

//RIGHT EYE
pushMatrix();
translate(width/2+95, height/2-25);
rotate(radians(10));
fill(255,193,37);
ellipse(0, 0, 125, 75);
fill(0);
ellipse(0, 0, 60, 75);
popMatrix(); 

//NOSE
fill(255,193,193);
quad(width/2-15,300,width/2+15,300,width/2+25,350,width/2-25,350);
arc(width/2,301,30,30,radians(-180),radians(0));
arc(width/2,350,50,50,radians(0),radians(180)); 

//MOUTH
strokeWeight(2.5);
arc(width/2,382,35,175,radians(0),radians(180));
fill(139,69,19);
arc(width/2-50,380,100,75,radians(0),radians(180));
arc(width/2+50,380,100,75,radians(0),radians(180)); 

//WHISKERS
line(width/2-150,350,75,300);
line(width/2-140,365,70,380);
line(width/2-150,380,80,450);
line(width/2+150,350,width-75,300);
line(width/2+140,365,width-70,380);
line(width/2+150,380,width-80,450); 

//TEXT
fill(0);
textAlign(CENTER);
textSize(30);
text("It's a cat!",width/2,height-50);

Paige Ruka

Hello, world!

Hey everyone, Paige here! This will be my process blog for CS 240, Visual Programming. Expect to see some pretty cool stuff here over the course of the semester!

Paige Ruka