We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
IndexDiscussionExhibition › Binary Watch
Page Index Toggle Pages: 1
Binary Watch (Read 1360 times)
Binary Watch
Mar 14th, 2008, 1:01pm
 
Hello everyone!

I programmed my own Binary Watch. I wanted it for my desktop, but while the program is running my CPU is at 100% and so I can do nothing else then staring at my beautiful watch... imho it IS beautiful :) (although it`s a bit dark) but I wanted to work AND have my cool watch :D

Is this a problem of the way I`m programming, or is this a general problem of processing?

And does anyone know how I can make it brighter? I tried different lights but nothing really worked. The watch is so...gloomy.

Third question: I used this vlw-Font. vwl-Fonts are hard to find and they`re not really looking good (the letters look like they are cut at the upper side). Is there a way to use "normal" ttf-Fonts?

Code:

// -------------------
// ---- The Watch ----
// -------------------
class Watch
{
 //  x       x        x      min5     sec5
 //  x       day4     h4     min4     sec4
 //  mon3    day3     h3     min3     sec3
 //  mon2    day2     h2     min2     sec2
 //  mon1    day1     h1     min1     sec1
 //  mon0    day0     h0     min0     sec0
 
 boolean[][] watchlights;
 
 Watch()
 {
   watchlights = new boolean[5][6];
   
   for(int i=0; i<5; i++)
   {
     for(int j=0; j<6; j++)
     {
        watchlights[i][j] = false;
      }
    }
 }
}

// ---------------
// ---- Setup ----
// ---------------
Watch theWatch;
int windowHeight;
int windowWidth;

void setup()
{
 theWatch = new Watch();
 windowHeight = 400;
 windowWidth = 400;
 
 background(0);
 size(windowWidth, windowHeight, P3D);
 lights();
 
 // the text below
 PFont fontA = loadFont("Arial-BoldMT-18.vlw");
 textFont(fontA,20);
 int x = windowHeight-40;
 fill(195);
 text("Month", 30, x);
 fill(210);
 text("Day", 110, x);
 fill(225);
 text("Hour", 165, x);
 fill(240);
 text("Minute", 230, x);
 fill(255);
 text("Second", 310, x);
}

// --------------
// ---- Draw ----
// --------------
void draw ()
{
 computeTime();
 drawWatch();
}

// ----------------------
// ---- compute time ----
// ----------------------
void computeTime()
{
 Calendar systime = Calendar.getInstance();
 int sysmonth = systime.get(Calendar.MONTH) + 1;
 int sysday = systime.get(Calendar.DATE);
 int syshour = systime.get(Calendar.AM_PM) == Calendar.AM? systime.get(Calendar.HOUR) : systime.get(Calendar.HOUR)+12;
 int sysminute = systime.get(Calendar.MINUTE);
 int syssecond = systime.get(Calendar.SECOND);
 int systhing;
 
 for(int i=0; i<5; i++)
 {
   // which column is it?
   if (i==0){
     systhing = sysmonth;
   } else if (i==1) {
     systhing = sysday;
   } else if (i==2) {
     systhing = syshour;
   } else if (i==3) {
     systhing = sysminute;
   } else if (i==4) {
     systhing = syssecond;
   } else {
     systhing = 0;
   }
   
   // convert decimal in binary
   // fill in the zeros and ones from below into the column
   int j=5;
   while(systhing > 0)
   {
     theWatch.watchlights[i][j] = systhing%2 == 1?true:false;
     
     systhing = systhing/2;
     j = j-1;
   }
   
   // fill the rest with zeros
   while(j>=0)
   {
     theWatch.watchlights[i][j] = false;
     j = j-1;
   }
 }
}

// --------------------
// ---- draw watch ----
// --------------------
void drawWatch()
{
 // house lights down...
 fill(0);
 stroke(0);
 rect(0, 0, windowWidth, windowHeight-80);
 
 // stage lights on...
 directionalLight(255, 255, 255, // Color (white)
                  0, 0, -1); // direction along the x,y and z axis
 lightSpecular(255,255,255);
 
 // draw new time
 int x = 60;
 int x_offset = 70;
 int y = 60;
 int y_offset = 40;
 
 for(int i=0; i<5; i++)
 {
   for(int j=0; j<6; j++)
   {
     if(theWatch.watchlights[i][j])
     {
       fill(0, 160, 255, 100); // blue
     }
     else
     {
       fill(90,90,110, 100); // grey
     }
     noStroke();
     translate(x + (x_offset*i), y + (y_offset*j));
     sphere(18);
     translate(-(x + (x_offset*i)), -(y + (y_offset*j)));
   }
 }
}
Re: Binary Watch
Reply #1 - Mar 14th, 2008, 4:04pm
 
The CPU usage is higher than my computer, which runs the sketch at 50 - 60 %, but yeah, processing is a CPU hog.  

To brighten it up, just use some brighter colors.  

     if(theWatch.watchlights[i][j])
     {
       fill(255, 0, 255, 255); // BRIGHT PINK!!!
     }
     else
     {
       fill(90,90,110, 255); // BRIGHT GREY!!!
     }


You might want to try the HSB colorspace() .  I find it easier to think about than the RGB.  


    if(theWatch.watchlights[i][j])
     {
       fill(i * 50, 0, j * 40, 255); // blue
     }
     else
     {
       fill( 0, 0, 0, i * j); // grey
     }

is kind of neat.  Plug that in and see what you think.
Re: Binary Watch
Reply #2 - Mar 15th, 2008, 3:14am
 
processing will use as much cpu as available to make things run at 60 frames per second. if you don't need that much speed, use the frameRate() command to set it lower, and you'll see the cpu usage fall.

vlw fonts are available under the tools menu, by using "Create Font". if you want to include a ttf in your sketch, use the createFont() command inside your code, instead of loadFont(). all these things are covered in the reference for loadFont() and createFont().
Re: Binary Watch
Reply #3 - Mar 18th, 2008, 11:18am
 
Thank you for your hints! :)

I found out that the frameRate and the CPU usage are directly corresponding (on my PC). When I choose 10 frames per second, the CPU usage is still at 100%. At 9 its 90%, at 8 its 80%, ... :D
I decided to leave 50% of the CPU to the watch so I have enough space left to work.

I think, that the problem with the letters which are cut off on the upper side, is a bug with 3D-mode. When I use 2D the ttf as well as the vwl fonts are looking normal.

Now I wrote a faster (and more beautiful ;) binary watch:
Code:

int windowHeight;
int windowWidth;

void setup()
{
windowHeight = 400;
windowWidth = 400;

size(windowWidth, windowHeight, P3D);
background(0);
lights();
frameRate(5);

// the text below
PFont myfont = createFont("SansSerif.bold", 20, true);
textFont(myfont);
int x = windowHeight-40;
fill(255);
text("Month", 30, x);
text("Day", 110, x);
text("Hour", 165, x);
text("Minute", 230, x);
text("Second", 310, x);
}

void draw ()
{
// get time
Calendar systime = Calendar.getInstance();
int[] systimeNumbers = {
systime.get(Calendar.MONTH) + 1,
systime.get(Calendar.DATE),
systime.get(Calendar.AM_PM) == Calendar.AM? systime.get(Calendar.HOUR) : systime.get(Calendar.HOUR)+12,
systime.get(Calendar.MINUTE),
systime.get(Calendar.SECOND)
};

// house lights down...
fill(0);
stroke(0);
rect(0, 0, windowWidth, windowHeight-80);

// stage lights on...
directionalLight(255,255,255, // Color (white)
0,0,-1); // direction along the x,y and z axis
lightSpecular(255,255,255);

// draw new time with bit shifting
int x = 60;
int x_offset = 70;
int y = 60;
int y_offset = 40;
noStroke();

for(int i=0; i<=4; i++)
{
int k = 5; // counts in the opposite direction of j
for(int j=0; j<=5; j++)
{
if(((systimeNumbers[i] >> j) & 1) == 1)
{
//fill(255, 0, 0, 255); // red
//fill(0, 255, 0, 255); // green
//fill(0, 0, 255, 255); // blue
fill(255, 255, 0, 255); // yellow
//fill((i+1) * 50, 0, (j+1) * 55, 255); // funny
}
else
{
fill(90,90,110, 200); // grey
}
translate(x + (x_offset*i), y + (y_offset*k));
sphere(18);
translate(-(x + (x_offset*i)), -(y + (y_offset*k)));
k--;
}
}
}
Re: Binary Watch
Reply #4 - Mar 30th, 2008, 7:09am
 
frameRate(2); is enough.
No need to go faster.
Page Index Toggle Pages: 1