Jannetta's Mass Writing Blog

Fantastic, absolutely fantastic!

2009-06-17T08:25:00.001+01:00

Guess what folks. Yesterday evening I checked my OU course page and I have a big Pass printed next to M801! I have my MSc!!!

Marvellous, absolutely marvellous!

2009-06-16T16:32:00.001+01:00

And so I attended the Mass Writing session that Darrel organised on Monday the 15th of June. It was brilliant!

The first and best realisation (as one of the student speakers) was that we were all quite terrified of one another. Boyd was worried that we were all going to say the same and that since he was neither an artist nor a professional programmer that he would be out of his depth. Ira was worried that he as an artist was going to have to speak to a room full of computer scientists. One of the guys mentioned that he has never done this kind of presentation before and I was starting to wonder where I fitted in with the artistic flair of a black spot.

Just to make absolutely sure that we were total wrecks, Darrel reminded us that the session will be webcasted.

However, things went really well. It was great to meet some of you guys in person. Meeting Ira, listening to his experiences and how he goes about doing things was absolutely enlightening and enthusing.

Darrel’s arrangements couldn’t be faulted and it was great to be introduced to his fantastic secretary and see his glitzy building where he is currently chief in charge of Computer Science. We had a lovely lunch between sessions and despite my tendency to fall asleep when I’m nervous, the sessions were so interesting that sleeping never crossed my mind … or my mind never crossed over to sleeping.

I said it then and I’ll say it now: Many thanks to Darrel for a marvellous day and a marvellous opportunity to have been part of this project.

Rotating Photo Frame

2009-06-10T18:53:00.001+01:00

Using the gifAnimation library it was quite simple to create this little animation.

01 import gifAnimation.*; 02 03 int i = 0; 04 PImage i1,i2,i3; 05 boolean looping = true; 06 int direction = 1; 07 GifMaker gifExport; 08 int frames = -1; 09 10 void setup() { 11 size(400,300, P3D); 12 frameRate(24); 13 gifExport = new GifMaker(this, "export.gif"); 14 gifExport.setRepeat(0); // make it an "endless" animation 15 16 i1 = loadImage("img1a.jpg"); 17 i2 = loadImage("img2.jpg"); 18 i3 = loadImage("img3.jpg"); 19 } 20 21 void draw() { 22 frames++; 23 background(255); 24 translate(width/2,height/3); 25 rotateY(direction * (frameCount*PI/100)); 26 createCube(); 27 gifExport.setDelay(1); 28 gifExport.addFrame(); 29 if (frames == 199) noLoop(); 30 } 31 32 void createCube() { 33 34 beginShape(QUADS); 35 texture(i1); 36 vertex(0,0,0,0,0); // top left 37 vertex(100,0,0,100,0); // top right 38 vertex(100,100,0,100,100); // bottom right 39 vertex(0,100,0,0,100); // bottom left 40 endShape(); 41 42 43 beginShape(QUADS); 44 texture(i2); 45 vertex(0,0,-100,100,0); // top right 46 vertex(100,0,-100,0,0); // top left 47 vertex(100,100,-100,0,100); // bottom left 48 vertex(0,100,-100,100,100); // bottom right 49 endShape(); 50 51 beginShape(QUADS); 52 texture(i3); 53 vertex(0,0,0,100,0); 54 vertex(0,0,-100,0,0); 55 vertex(0,100,-100,0,100); 56 vertex(0,100,0,100,100); 57 endShape(); 58 } 59 60

Running Noise

2009-05-15T13:21:00.001+01:00

Right now, watching running noise is much more interesting than my work …

Running Noise Applet

Book Fragment 84

2009-05-13T17:35:00.001+01:00

Advanced buttons 1

In the previous chapter we created basic buttons that can be used to start and stop processes. However, we would like buttons to be much more interesting than just little squares. It would give us a much friendlier user interface if we could put some text or images on the buttons so that people know what the buttons are for.

Adding a label

Adding the following few lines of code to the program developed in the previous chapter will add the label “Bulb” to the button.

01 // little square     
02   fill(button_top_colour);     
03   rect(button_top_left_x + 3, button_top_left_y + 3, button_width - 6, button_width – 6);     
04      
05   // Place text on button     
06   textMode(SCREEN);     
07   textAlign(CENTER, CENTER);     
08   font = loadFont("Verdana-10.vlw");     
09   textFont(font);     
10   fill(color(0,0,05));     
11   text("Bulb", button_top_left_x + (button_width/2),     
12     button_top_left_y + (button_width/2));

Before this code will work it is necessary to generate the font that will be used for the text. Processing can do this for you. On the Processing menu, click Tools and then Create Font as in the illustration below:

Illustration 1: Select Create Font on the menu

Select the font you wish to use and the size. For our code samples we selected Verdana with a size of 10 pixels:

Illustration 2: Select the font and enter a font size.

When you click OK, Processing will create a sub-directory called data in the directory where your program is stored. In the data directory it will create the font file. By default the file is named after the font and its size. So if you, like us, selected Verdana with a size of 10, then the file name will be Verdana-10.vlw.

Drawing a rectangular button

The code above still draws a square button. We often require rectangular buttons, especially if we are going to place text on them. Illustration 3 shows a button and the illustration 4 shows the shapes used to create the button:

Illustration 3: A rectangular button

Illustration 4: The shapes used to create a rectangular button

The listing below shows how we draw and colour these shapes, using the method rect for the rectangle and the method quad for the polygons that make the bevel. The mouse event handlers are in place to switch the light bulb on and also notice that the label on the button will change. The bold lines show the code required to generate and place the label on the button:

001 int button_top_left_x = 10;     
002 int button_top_left_y = 10;     
003 int button_width = 150;     
004 int button_height = 40;     
005 int bevel_size = 3;     
006 int bevel_up_colour = color(0xD0, 0xD0, 0xD0);     
007 int bevel_down_colour = color(0x88, 0x88, 0x88);     
008 int bevel_colour_left = bevel_up_colour;     
009 int bevel_colour_right = bevel_down_colour;     
010 boolean bulb_on = false;     
011 int button_up_colour = color(0xD0, 0xD0, 0xD0); // grey     
012 int button_over_colour = color(0xB0, 0xB0, 0xB0);     
013 int button_down_colour = color(0xA0, 0xA0, 0xA0); // white     
014 int button_colour_top = button_up_colour;     
015 String button_label = "Switch Bulb On";     
016 // Declare the variable that will hold the font     
017 PFont font;     
019 void setup() {     
020   size(300,300);     
021   // Load the font to be used for the label     
022   font = loadFont("Verdana-10.vlw");     
023 }     
025 void draw() {     
026   rectMode(CORNER);     
027   // top and left bevels     
028   fill(bevel_colour_left);     
029   quad(button_top_left_x,     
030     button_top_left_y,     
031     button_top_left_x + button_width + (bevel_size * 2),     
032     button_top_left_y,     
033     button_top_left_x + button_width + bevel_size,     
034     button_top_left_y + bevel_size,     
035     button_top_left_x + bevel_size,     
036     button_top_left_y + bevel_size);     
038   quad(button_top_left_x,     
039     button_top_left_y,     
040     button_top_left_x + bevel_size,     
041     button_top_left_y + bevel_size,     
042     button_top_left_x + bevel_size,     
043     button_top_left_y + button_height + bevel_size,     
044     button_top_left_x,     
045     button_top_left_y + button_height + (bevel_size * 2));     
047   // bottom and right bevels     
048   fill(bevel_colour_right);     
049   quad(button_top_left_x,     
050     button_top_left_y + button_height + (bevel_size * 2),     
051     button_top_left_x + button_width + (bevel_size * 2),     
052     button_top_left_y + button_height + (bevel_size * 2),     
053     button_top_left_x + button_width + bevel_size,     
054     button_top_left_y + button_height + bevel_size,     
055     button_top_left_x + bevel_size,     
056     button_top_left_y + button_height + bevel_size);     
058   quad(button_top_left_x + button_width + (bevel_size * 2),     
059     button_top_left_y,     
060     button_top_left_x + button_width + (bevel_size * 2),     
061     button_top_left_y + button_height + (bevel_size * 2),     
062     button_top_left_x + button_width + bevel_size,     
063     button_top_left_y + button_height + bevel_size,     
064     button_top_left_x + button_width + bevel_size,     
065     button_top_left_y + bevel_size);     
067   // top of button     
068   fill(button_colour_top);     
069   rect(button_top_left_x + bevel_size,     
070     button_top_left_y + bevel_size,     
071     button_width,     
072     button_height);     
073       
074   // Place text on button     
075   textMode(SCREEN);     
076   textAlign(CENTER, TOP);     
077   textFont(font);     
078   fill(color(0x00, 0x00, 0x00));     
079   text(button_label, (button_top_left_x + button_width + (bevel_size * 2)) / 2,     
080     (button_top_left_y + button_height + (bevel_size * 2)) / 2);     
081       
082   // draw bulb     
083   if (bulb_on) {     
084     bulb_on();     
085   } else {     
086     bulb_off();     
087   }     
088 }     
090 void bulb_on() {     
091   bulb_on = true;     
092   // Change the text to be displayed on the button     
093   button_label = "Switch Bulb Off";     
094   // draw the light bulb base     
095   fill(0x40, 0x40, 0x40);     
096   rectMode(CENTER);     
097   rect(100,100,15,20);     
098   fill(0xFF, 0xCC, 0x33); // an orange fill when the bulb is on     
099   ellipseMode(CENTER);     
100   ellipse(100,80,30,30);     
101 }     
103 void bulb_off() {     
104   bulb_on = false;     
105   // Change the text to be displayed on the button     
106   button_label = "Switch Bulb On";     
107   // draw the light bulb base     
108   fill(0x40, 0x40, 0x40);     
109   rectMode(CENTER);     
110   rect(100,100,15,20);     
111   fill(0xFF, 0xFf, 0xFF); // a white fill when the bulb is off     
112   ellipseMode(CENTER);     
113   ellipse(100,80,30,30);     
114 }     
116 void mousePressed() {     
117   if (mouseX >= button_top_left_x &&     
118     mouseX <= (button_top_left_x + button_width + (bevel_size * 2)) &&     
119     mouseY >= button_top_left_y &&     
120     mouseY <= (button_top_left_y + button_height + (bevel_size * 2))) {     
121       button_colour_top = button_down_colour;     
122       bevel_colour_left = bevel_down_colour;     
123       bevel_colour_right = bevel_up_colour;     
124     } else {     
125       button_colour_top = button_up_colour;     
126       bevel_colour_left = bevel_up_colour;     
127       bevel_colour_right = bevel_down_colour;     
128     }     
129 }     
131 void mouseMoved() {     
132   if (mouseX >= button_top_left_x &&     
133     mouseX <= (button_top_left_x + button_width + (bevel_size * 2)) &&     
134     mouseY >= button_top_left_y &&     
135     mouseY <= (button_top_left_y + button_height + (bevel_size * 2))) {     
136       button_colour_top = button_over_colour;     
137     } else {     
138       button_colour_top = button_up_colour;     
139     }     
140 }     
142 void mouseReleased() {     
143   if (mouseX >= button_top_left_x &&     
144   mouseX <= button_top_left_x + button_width + (bevel_size * 2) &&     
145   mouseY >= button_top_left_y &&     
146   mouseY <= (button_top_left_y + button_height + (bevel_size * 2))) {     
147     if (bulb_on) bulb_on = false; else bulb_on = true;     
148     // When the mouse button is released, switch the button bevel colours     
149     // so that the button displays in its upper position     
150     button_colour_top = button_over_colour;     
151     bevel_colour_left = bevel_up_colour;     
152     bevel_colour_right = bevel_down_colour;     
153   } else {     
154     button_colour_top = button_up_colour;     
155     bevel_colour_left = bevel_up_colour;     
156     bevel_colour_right = bevel_down_colour;     
157   }     
158 }

Adding an icon

Although text on buttons could be a requirement in some cases, it does take up a great deal of space. So often it is advantageous to have a fairly small button with only an image on it. Modern software often give the user the choice to use buttons with text only, text and images or images only.

To add an icon to the button we can move the text in the button to the right and add an icon to the left as is shown in illustrations 5 and 6.

Illustration 5: Button to switch bulb on

Illustration 6: Button to switch bulb off

All we need to do to achieve the above is add the following snippet of code to draw():

01 // draw icon on button     
02   fill(0x00, 0x00, 0x00);     
03   rect(button_top_left_x + bevel_size + 10,     
04     button_top_left_y + bevel_size + 20,     
05     10, 10);     
06   if (bulb_on) {     
07     fill(0xFF, 0xFF, 0xFF);     
08   } else {     
09     fill(0xFF, 0xCC, 0x33);     
10   }     
11   ellipseMode(CENTER);     
12   ellipse(button_top_left_x + bevel_size + 15,     
13     button_top_left_y + bevel_size + 15,     
14     20, 20);

Listing 1: Drawing an icon on the button

Drawing icons in this way could become tedious and complex, especially if we want good looking images. An easier alternative would be to use a pre-prepared image for the icon.

Processing can work with four image types, i.e..gif, .jpg, .tga, .png. If you browse the web you will find thousands of free buttons or you can create your own. We found these two buttons on the web¹:

Using these images we can now create a slightly better looking button than before:

Firstly we need to declare a variable to hold the images. This is done in the section before setup():

1 PImage img_stop, img_play;     
3 In setup(), we then load the images into the variables:     
4   img_stop = loadImage("stop.png");     
5   img_play = loadImage("play.png");

Replace the code in listing 1 with the code to load the images:

1  // draw icon on button     
2   imageMode(CORNERS);     
3   if (bulb_on) {     
4     image(img_stop, button_top_left_x + bevel_size + 5,     
5     button_top_left_y + bevel_size + 5);     
6   } else {     
7     image(img_play, button_top_left_x + bevel_size + 5,     
8     button_top_left_y + bevel_size + 5);     
9   }

Using images for buttons

We could, of course, use only images for buttons. There is nothing new to doing this. Everything you need to know to do this has already been covered. The only changes we need to make to the code is to remove all the instructions which are used to draw the button. The button dimensions need to be adjusted to conform to that of the images we are using. The resulting code will actually be a little simpler than before. To make things slightly more interesting we will add a tint to the image when the mouse is hovering over the button.

01 int button_top_left_x = 10; 02 int button_top_left_y = 10; 03 int button_width; 04 int button_height; 05 boolean bulb_on = false; 06 PImage img_stop, img_play; 07 int gray = 255; 08 int alpha = 255; 10 void setup() { 11 size(300,300); 12 background(0xFF, 0xFF, 0xFF); 13 img_stop = loadImage("stop.png"); 14 img_play = loadImage("play.png"); 15 // Make sure both images have the same width and height when creating them 16 button_width = img_stop.width; 17 button_height = img_stop.height; 18 } 20 void draw() { 21 // draw icon on button 22 imageMode(CORNERS); 23 tint(gray, alpha); 24 if (bulb_on) { 25 image(img_stop, button_top_left_x + 5, button_top_left_y + 5); 26 } else { 27 image(img_play, button_top_left_x + 5 ,button_top_left_y + 5); 28 } 29 30 // draw bulb 31 if (bulb_on) { 32 bulb_on(); 33 } else { 34 bulb_off(); 35 } 36 } 38 void bulb_on() { 39 bulb_on = true; 40 // draw the light bulb base 41 fill(0x40, 0x40, 0x40); 42 rectMode(CENTER); 43 rect(100,100,15,20); 44 fill(0xFF, 0xCC, 0x33); // an orange fill when the bulb is on 45 ellipseMode(CENTER); 46 ellipse(100,80,30,30); 47 } 49 void bulb_off() { 50 bulb_on = false; 51 // draw the light bulb base 52 fill(0x40, 0x40, 0x40); 53 rectMode(CENTER); 54 rect(100,100,15,20); 55 fill(0xFF, 0xFf, 0xFF); // a white fill when the bulb is off 56 ellipseMode(CENTER); 57 ellipse(100,80,30,30); 58 } 60 void mouseMoved() { 61 if (mouseX >= button_top_left_x && 62 mouseX <= (button_top_left_x + button_width) && 63 mouseY >= button_top_left_y && 64 mouseY <= (button_top_left_y + button_height)) { 65 // Give the button a tint when the mouse is hovering over it 66 gray = color(0xFD, 0xD0, 0x17); 67 alpha =100; 68 } else { 69 gray = 255; 70 alpha = 255; 71 } 72 } 74 void mouseReleased() { 75 if (mouseX >= button_top_left_x && 76 mouseX <= (button_top_left_x + button_width) && 77 mouseY >= button_top_left_y && 78 mouseY <= (button_top_left_y + button_height)) { 79 if (bulb_on) bulb_on = false; else bulb_on = true; 80 } 81 }

Illustration 7: Image button to switch light bulb on

Illustration 8: Image button with orange tint when mouse hovering

Illustration 9: Image button to switch light bulb off

Illustration 10: Image button with orange tint when mouse hovering

Adding tool tips

Tool tips are informative messages displayed when the mouse hovers over an item. These are usually used when additional information about the item, over which the mouse is hovering, needs to be conveyed to the user. The illustrations below show a tool tip being displayed when the mouse is hovering over the buttons:

To add the tool tips to our previous program, add the following pieces of code. Firstly declare a string variable before setup() to hold the text for the tool tip:

1 String tooltip = "";     
2 PFont font;

Remember that you need to generate a font if you haven't done so yet. Then add these lines to the setup() method:

1  font = loadFont("Verdana-10.vlw");     
2   textFont(font);     
3   textMode(SCREEN);

Add the following line as the first line in draw(). This clears the tool tip when the mouse is moved off the button area:

code> 1 background(0x8B, 0xB3, 0x81);

Add the next chunk of code to the end of draw(). If the tooltip string is empty then the code does nothing. If a tool tip is set then a rectangle containing the tool tip is drawn below the button.

01  // Tooltip     
02   if (tooltip.equals("")) {     
03     //     
04   } else {     
05     fill(0xFF, 0xF8, 0xC6);     
06     rectMode(CORNER);     
07     rect(button_top_left_x + 3, button_top_left_y + button_height + 5, 100, 10);     
08     textAlign(LEFT, TOP);     
09     fill(0x00, 0x00, 0x00);     
10     text(tooltip, button_top_left_x + 5, button_top_left_y + button_height + 6);     
11   }

Amend the mouse events as follows. The added code is displayed in bold. If the bulb is switched on the tool tip is set to “Switch bulb off” but if the bulb is switched off the tool tip is set to “Switch bulb on”.

01 void mouseMoved() {     
02   if (mouseX >= button_top_left_x &&     
03     mouseX <= (button_top_left_x + button_width) &&     
04     mouseY >= button_top_left_y &&     
05     mouseY <= (button_top_left_y + button_height)) {     
06       gray = color(0xFD, 0xD0, 0x17);     
07       alpha =100;     
08       if (bulb_on) {     
09         tooltip = "Switch bulb off";     
10       } else {     
11         tooltip = "Switch bulb on";     
12       }     
13     } else {     
14       tooltip = "";     
15       gray = 255;     
16       alpha = 255;     
17     }     
18 }     
20 void mouseReleased() {     
21   if (mouseX >= button_top_left_x &&     
22     mouseX <= (button_top_left_x + button_width) &&     
23     mouseY >= button_top_left_y &&     
24     mouseY <= (button_top_left_y + button_height)) {     
25       // Give the button a tint when the mouse is hovering over it        
26       if (bulb_on) bulb_on = false; else bulb_on = true;     
27       if (bulb_on) {     
28         tooltip = "Switch bulb off";     
29       } else {     
30         tooltip = "Switch bulb on";     
31       }     
32   } else {     
33         
34   }

Using combinations of the techniques we have covered in chapter 83 and 84 you should now be able to create very attractive user interfaces with buttons. You will find though, that the code can once again get very complex if you have to draw each button individually. So at this point it would make sense to start using objects which are re-usable. The next chapter will cover this in more detail.

1http://itweek.deviantart.com/art/Knob-Buttons-Toolbar-icons-73463960

A small absence

2009-03-04T22:07:00.002Z

Well, I have been absent from this blog for a while. Working on my dissertation and having to deal with a couple of other things kept me quite busy. The dissertation due date is Tuesday 10th of March. Hopefully I'll be able to get back to my next chunk of writing after then!

Bezier curves

2008-11-13T22:15:00.001Z

I like to see how things work. I took the example code from the reference section on the Processing web site and added mouse events that allows one drag the anchor points around. I added little circles to the anchor points just to make it easier to click on them. You can now click on a point and drag it around to watch the bezier curve change. Cute isn't it? :-)

Link to applet and source code on my web site: http://www.jannetta.com/masswriting/bezier

Sliders

2008-11-11T06:38:00.004Z

I hope Mike Taperell doesn't mind. I have taken his program for creating drop shadows and added sliders. One slider changes the transparency and the other changes the distance of the shadow. You have to be careful not to move the mouse too quickly for the sliders. I won't be refining this for the moment, it is just a proof of concept.

Follow the link to view the applet on my website: http://www.jannetta.com/masswriting/sliders

Mandelbrot

2008-11-09T00:05:00.001Z

If anyone knows how to embed an applet in Blogger please let me know because I am still not having any success. The link below will lead to my personal web site where you can view my latest applet created with Processing.

Screenshot of Applet:

Mandelbrot Curve Applet created with Processing

Chunk 83

2008-11-08T19:07:00.000Z

This is the latest version of chunk 83. There are a few odd brackets appearing in the text. For this we can thank Microsoft Windows Live Writer. Frankly, I have lost my will to fight Uncle Bill so I’ll just leave it there. Fortunately I won’t be using any Microsoft products to create the text documents and I’ll probably abolish the use Live Writer too …

Book Fragment 83

Buttons

Imagine a computer program without buttons. It is almost impossible. Buttons have become an integral part of any interface design kit when developing software.

The illustrations below show buttons from a few programs. A great deal of the programs' functionality have been captured in these buttons:Illustration 1: Buttons from OpenOffice.org

Illustration 2: A couple of more "traditional" buttons

Illustration 3: Buttons from Microsoft Messenger

Buttons and other graphical user interface (GUI) elements such as sliders, list boxes and spinners are usually referred to as widgets. These are used to enhance the users experience of an application and allows the user to interact with it. A button executes or launches some action such as allowing the user to select a file for opening or as in illustration 3, above, the third button from the left is used to initiate a video call to another user.

Unlike some more extensive languages such as Java, Processing does not provide libraries with ready made widgets. The process of creating buttons is not complex, but it is quite painstaking.

As the purpose of a button is, off course, to start or stop some process, each button is usually associated with some action. We can therefore summarise the process of creating a button in the following steps:

Define an area on the screen which will serve as a button. This is usually done by drawing some shape, such as a square or a circle in that area. Processing's own buttons are good examples of this:
Illustration 4: Processing's buttons
Determine whether the mouse button was pressed and if so, whether it was pressed in the button area.
Execute the process that the button is meant to initiate.

Earlier in this book, we have already covered all the processes and skills required to complete these steps. All that is now required is to put it into practice.

Let's start by writing a program with one button that will switch on a light bulb if it is off, or switch it off it is on.

Step one can be accomplished with the following few lines of code:

// Define the area on the screen that will serve // as a button and draw a shape in that area. // We will be using a black square int button_top_left_x = 10; int button_top_left_y = 10; int button_width = 20; int button_colour = color(0x00 ,0x00 ,0x00); void setup() { // Draw window of 200 pixels wide by 200 pixels high size(200,200); } void draw() { // draw the button fill(button_colour); rect(button_top_left_x, button_top_left_y, button_width, button_width); }

We now have a window with a button displayed in the top left hand corner:
Illustration 5: Drawing the button

To accomplish step two you might have to refer back to chunk 82 (Mouse events). Firstly we need to determine whether the mouse button is pressed. This is done by adding the mousePressed() function to our program. Secondly we need to determine whether the mouse is being pressed over the square we drew that serves as our button. Our program can now be extended with the following code:

// Handle mouse event void mousePressed() { // check whether the mouse button was pressed within the boundaries of the shape // defined by our button, which in this case is a rectangle. // mouseX and mouseY holds the x and y co-ordinates on which the mouse was clicked. if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { // Code to be executed when the mouse button is pressed in this area } }

Since we want to switch a light bulb on and off we will need to draw the light bulb in its off state or in its on state. We will keep things very simple so we are going to draw the light bulb using a grey square for the base and a white circle when the bulb is switched off or a yellow circle when the bulb is switched on. We will also need a boolean variable that will be true when the bulb is on or false when it is off. When we are done the light bulb should look like illustration 6 when it is on and illustration 7 when it is off:
Illustration 6: Bulb off
Illustration 7: Bulb on

In the very first section of our program we need to add the boolean variable that signifies the state of our light bulb. The light is switched off when the program first begins and therefore the variable is given an initial value of false. The line is shown in bold in the following code fragment:

// Define the area on the screen that will serve // as a button and draw a shape in that area. // We will be using a black square int button_top_left_x = 10; int button_top_left_y = 10; int button_width = 20; int button_colour = color(0x00 ,0x00 ,0x00); // a boolean value to indicate whether the light bulb is on or off // if it is on bulb_on will be true, if it is off, bulb_on will be false; boolean bulb_on = false;

We now need to reflect the state of the light bulb. To do this the draw function can be extended to draw the light bulb in one of its two states:

void draw() { // draw the button fill(button_colour); rectMode(CORNER); rect(button_top_left_x, button_top_left_y, button_width, button_width); // draw the light bulb base fill(64,64,64); rectMode(CENTER); rect(100,100,15,20); // draw a circle for the light bulb if (bulb_on) { fill(0xFF, 0xCC, 0x33); // an orange fill when the bulb is on } else { fill(0xFF, 0xFF, 0xFF); // a white fill when the bulb is off } ellipseMode(CENTER); ellipse(100,80,30,30); }

Notice that before drawing the circle for the light we set the ellipse mode to CENTER. This means that the x and y co-ordinates provided will be used as the centre point of the circle. Refer to the Processing documentation for more information of mode settings.

Everything is now in place for us to switch the light bulb on and off using our button. All that is left to do is to add the code that will toggle the boolean value bulb_on between true and false in the mousePressed() function:

void mousePressed() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { if (bulb_on) { bulb_on = false; } else { bulb_on = true; } } } The complete code listing for the program: // Define the area on the screen that will serve // as a button and draw a shape in that area. // We will be using a black square int button_top_left_x = 10; int button_top_left_y = 10; int button_width = 20; int button_colour = color(0x00 ,0x00 ,0x00); // a boolean value to indicate whether the light bulb is on or off // if it is on bulb_on will be true, if it is off, bulb_on will be false; boolean bulb_on = false; void setup() { // Draw window of 200 pixels wide by 200 pixels high size(200,200); } void draw() { // draw the button fill(button_colour); rectMode(CORNER); rect(button_top_left_x, button_top_left_y, button_width, button_width); // draw the light bulb base fill(0x40 ,0x40 ,0x40); rectMode(CENTER); rect(100,100,15,20); if (bulb_on) { fill(0xFF ,0xCC ,0x33); // an orange fill when the bulb is on } else { fill(0xFF ,0xFF ,0xFF); // a white fill when the bulb is off } ellipseMode(CENTER); ellipse(100,80,30,30); } void mousePressed() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { if (bulb_on) { bulb_on = false; } else { bulb_on = true; } } }

I'm sure you will agree that this is not a very exciting button we have created. Nowadays, in the graphical environments we are used to, we can see when a button has focus. For example, when the mouse is hovered over the button, it might change colour or it might be outlined as in illustrations 8 and 9 below:

<><></></><><></> </> <><></> </> <><></></> <><></></><><></></>

Illustration 8: An Open Office button outlined when the mouse is hovered or moved over it.

Illustration 9: A Processing button highlighted when the mouse is hovered or moved over it.

And when the mouse button is pressed down on the button it changes again:

<><></> </> <><></> </> <><></></>

Illustration 10: A Processing button when the mouse button is pressed down.

Illustration 11: An Open Office button being pressed down.

To mimic this behaviour we need to code behaviours for the mouse when it is pressed, released or moved. The three functions, you might recall, that we need to use are:

void mousePressed();
void mouseReleased();
void mouseMoved();

The button's normal colour would be black. If the mouse is pressed down while inside the button area we want to fill the button with the colour red. If the mouse is only hovering above the button, we want to fill it with a light blue colour.

<><></> </> <><></> </> <><> </> </> <><></></>

Illustration 12: Button in normal state	Illustration 13: Mouse hovering over button.
Illustration 14: Mouse pressed over button

We need to define three new variables to hold the colours for the three different states. To do this the following lines are added to the declarations at the beginning of the program:

// Define the colours for the button in its various states int button_up_colour = color(0x00 ,0x00 ,0x00); int button_down_colour = color(0xff, 0x00 ,0x00); int button_over_colour = color(0x99, 0xff, 0xff);

When the mouse is pressed inside the button area, the colour of the button should change to red. The mousePressed() function is enhanced to do this by adding one line.

void mousePressed() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_down_colour; if (bulb_on) { bulb_on = false; } else { bulb_on = true; } } }

If the mouse is moved to a point inside the button area, the colour is changed to light blue. If the mouse is moved to a point outside the button area, the colour is changed to black:

void mouseMoved() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_over_colour; } else { button_colour = button_up_colour; } }

When the button is released after being pressed down, the colour should change to light blue if the mouse is over the button area. If it is release elsewhere the colour of the button should be set to black:

void mouseReleased() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_over_colour; } else { button_colour = button_up_colour; } }

Following is the complete listing for the program :

// Define the area on the screen that will serve // as a button and draw a shape in that area. // We will be using a square int button_top_left_x = 10; int button_top_left_y = 10; int button_width = 20; // Declare a variable that will hold the colour for the button // in its current state int button_colour = color(0x00 ,0x00 ,0x00); // Define the colours for the button in its various states int button_up_colour = color(0x00 ,0x00 ,0x00); int button_down_colour = color(0xFF, 0x00,0x00); int button_over_colour = color(0x99, 0xFF, 0xFF); // a boolean value to indicate whether the light bulb is on or off // if it is on bulb_on will be true, if it is off, bulb_on will be false; boolean bulb_on = false; void setup() { size(200,200); } void draw() { // draw the button fill(button_colour); rectMode(CORNER); rect(button_top_left_x, button_top_left_y, button_width, button_width); // draw the light bulb base fill(0x40 ,0x40 ,0x40); rectMode(CENTER); rect(100,100,15,20); if (bulb_on) { fill(0xFF ,0xCC ,0x33); // an orange fill when the bulb is on } else { fill(0xFF ,0xFF ,0xFF); // a white fill when the bulb is off } ellipseMode(CENTER); ellipse(100,80,30,30); } void mousePressed() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_down_colour; if (bulb_on) { bulb_on = false; } else { bulb_on = true; } } } void mouseMoved() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_over_colour; } else { button_colour = button_up_colour; } } void mouseReleased() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { button_colour = button_over_colour; } else { button_colour = button_up_colour; } }

In the next listing we have a created a slightly more sophisticated and realistic button. Rather than using just a square for a button, we will draw a button using triangles, a line and rectangles. We create the illusion of a 3D button that moves up and down, when clicked ,by drawing a bevel that is shaded on the right and the bottom. The bevel at the top and left is in a lighter colour. This gives the impression of light shining on a button from the left. When the button is clicked, the two colours are switched around so that the top and left of the bevel is the darker colour and the right and bottom of the bevel is the lighter colour giving the impression that the button is being pressed down.

Step 1: Draw two triangles, the one on the left white and the one on the right grey.

Step 2: Draw line from top left to bottom right. These diagonal lines help to create the illusion of a bevel.

Step 3: Draw a smaller darker square on top

Step 4: To give the appearance of the button being depressed merely switch the colours of the two triangles.

The listing below will show this in action, switching the light bulb on and off as before. Try this code in Processing to see how the button works:

// Define the area on the screen that will serve // as a button and draw a shape in that area. // We will be using a black square int button_top_left_x = 10; int button_top_left_y = 10; int button_width = 20; // Declare a variable that will hold the colour for the button // in its current state int button_top_colour = color(0x80, 0x80, 0x80); // Define the colours for the button in its various states int button_up_colour = color(0xC0, 0xC0, 0xC0); // grey int button_down_colour = color(0xFF, 0xFF, 0xFF); // white int button_over_colour = color(0x80, 0x80, 0x80); int background_colour = color(0xC0, 0xC0, 0xC0); int button_left_colour = button_down_colour; int button_right_colour = button_up_colour; int hover_colour = background_colour; // a boolean value to indicate whether the light bulb is on or off // if it is on bulb_on will be true, if it is off, bulb_on will be false; boolean bulb_on = false; void setup() { background(background_colour); size(200,200); } void draw() { rectMode(CORNER); // highlight square noStroke(); fill(hover_colour); rect(button_top_left_x - 3, button_top_left_y - 3, button_width + 6, button_width + 6); // draw the button stroke(0x00, 0x00, 0x00); fill(button_right_colour); triangle(button_top_left_x + button_width, button_top_left_y, button_top_left_x + button_width, button_top_left_y + button_width, button_top_left_x, button_top_left_y + button_width); fill(button_left_colour); triangle(button_top_left_x, button_top_left_y, button_top_left_x + button_width, button_top_left_y, button_top_left_x, button_top_left_y + button_width); line(button_top_left_x, button_top_left_y, button_top_left_x + button_width, button_top_left_y + button_width); // little square fill(button_top_colour); rect(button_top_left_x + 3, button_top_left_y + 3, button_width - 6, button_width - 6); // draw the light bulb base fill(0x40, 0x40, 0x40); rectMode(CENTER); rect(100,100,15,20); if (bulb_on) { fill(0xFF, 0xFF, 0xFF); // an orange fill when the bulb is on } else { fill(0xFF, 0xFF, 0xFF); // a white fill when the bulb is off } ellipseMode(CENTER); ellipse(100,80,30,30); } void mousePressed() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { // if the button is pressed, switch the bevel colours // so that the button appears to be pressed down int tmp = button_left_colour; button_left_colour = button_right_colour; button_right_colour = tmp; if (bulb_on) { bulb_on = false; } else { bulb_on = true; } } } void mouseMoved() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { hover_colour = button_over_colour; } else { hover_colour = background_colour; } } void mouseReleased() { if (mouseX >= button_top_left_x && mouseX <= button_top_left_x + button_width && mouseY >= button_top_left_y && mouseY <= (button_top_left_y + button_width)) { // When the mouse button is released, switch the button bevel colours // so that the button displays in its upper position int tmp = button_left_colour; button_left_colour = button_right_colour; button_right_colour = tmp; } }

The illustrations below show our final program:

Illustration 12: Final program with the button in the up position

Illustration 14: When the mouse hovers over the button we highlight the background

Illustration 13: The button in the down position when the mouse button is pressed down

Making a button behave as we have just done is, of course, only one option. It is a very simple button and its behaviour merely serves to demonstrate how buttons can be implemented. If you were to look at different programs or sometimes different buttons in the same program, you would probably find that buttons can respond to mouse events in many ways.

Our program, for instance, executes the process we want the button to initiate when the mouse button is pressed. If one looks at programs such as Word, Open Office or Firefox, the required process is executed on release rather than on the press of the mouse button.

In the next chunk we will discuss this option and look at slightly more advanced buttons.

Running applets from Blogger

2008-11-08T00:31:00.030Z

I have been trying to get my applets, exported from Processing, to run in Blogger. I can't seem to get them working but perhaps it is only my firewall. So could you folks who are reading this please post some comments and let me know whether you can see the applet that I have embedded here. The applet is actually running from my personal website. If it isn't running in Blogger, then just follow the link to my website and it should be running there. If it doesn't then please let me know about that too.

According to the comments I have been getting, it is not possible at this point to run applets from within Blogger. So just follow the link below to see the applet. The previous post has some screenshots of the applet.

View it on my website: http://www.jannetta.com/masswriting/kochcurve

Fractals with Processing

2008-11-06T12:50:00.004Z

I had a go at drawing some fractal patterns with Processing. Here are some screenshots of the Koch Curve. My buttons still need some work, so don't focus on them.

Theme change

2008-11-03T10:28:00.002Z

Oh alright then, I've changed the theme to one that has a white background. This off course means I now have to change all my code samples to be displayed in black again. While at it, I also selected a theme that uses the whole width of the window. I liked the dotty theme though - it was so much more me ...

Displaying Java code fragments

2008-10-30T14:15:00.002Z

I noticed that a few people have tried various things to display code fragments in a nice way within the blog. This does seem to be a bit of a problem. I have found the following solution which could perhaps be refined somewhat, but in the meantime would at least provide an acceptable solution.

Java2Html seems to be a nifty little Java program that converts Java code to HTML format with indentation and syntax highlighting. It provides a few options and it seems is also available as an Eclipse plug-in. I have not tried the plug-in. You can download it as a jar, which I believe should run on any operating system that has a JRE available.

This is what I managed to get using the program:


01 int k;
02 int xpos1 = 100; 
03 int xpos2 = 118; 
04 int count = 0; 
05 int timey = 0;
06 int num = 12;
07 
08 size(200, 200);
09 background(102);
10 noStroke();
11  
12 // Draw gray bars 
13 fill(255);
14 k=60;
15 for(int i=0; i < num/3; i++) {
16   rect(25, k, 155, 5);
17   k+=10;
18 }
19 
20 // Black bars
21 fill(51);
22 k = 40;
23 for(int i=0; i < num; i++) {
24   rect(105, k, 30, 5);
25   k += 10;
26 }
27 k = 15;
28 for(int i = 0; i < num; i++) {
29   rect(125, k, 30, 5);
30   k +=10;
31 }
32   
33 // Thin lines
34 k = 42;
35 fill(0);
36 for(int i=0; i < num-1; i++) {
37   rect(36, k, 20, 1);
38   k+=10;
39 }

Step by step, here is what I have done:

Download Java2Html from http://www.java2html.de/download.html
Extract into a directory of your choice.
Create a batch file in the same directory to run the program. All I put in my batch file, which I called run.bat, was: javaw -jar java2html.jar
You can now double click the batch file in Explorer or create a short-cut on your desktop. For operating systems other than Windows you'll have to do what is required for that operating system to get the same functionality.
Java2Html allows you to either convert a file or direct text. Select the tab you require and then either open the file or type (cut & paste) your text in the text area.
I selected Line numbers and I set Tab-space to 8.
Conversion is done immediately. If you opened a file, the conversion is available on the clip-board. If you did a direct conversion, the text is available in the "Converted Source" text area.
I stripped off all the headers and code up to the <code> tag and after the </code> tag.
I also removed all the <br /> tags at the end of each line. For this I used vi (my favourite editor). The command for stripping the tags is: :%s/<br />$//g
The normal colour for code is black. My blogger theme did not display this well. To change the black text to white, I used vi again to do a global replacement. The command for this was: :%s/color="#000000"/color="#000000"/g
Now cut and paste what is left over into Blogger using Edit Html
Important: You have to paste this code while in Edit Html and not Compose, or else your HTML code will be displayed rather than the formatted HTML.

I hope this makes sense. Just leave comments if anything seems wrong or not clear and I'll update the instructions.

If I have time I might have a look at the source for Java2Html and either extend or modify it to create Blogger-ready code.

I hope this is of help to someone.

Why am I doing this?

2008-10-28T11:49:00.000Z

Some of the reasons why I'm getting involved in this project:

Feeling quite isolated as a correspondence student, I thought this might be a golden opportunity to get involved in an interesting project.
I have also been looking for opportunities to get more experience in academic writing.
I love programming.
I am all for community involvement in projects. It provides opportunities for those who would like to contribute.
An opportunity to learn more about something I didn't know before, ie the Processing IDE and Computational Art.

Chunk 83

2008-10-28T00:57:00.000Z

So I think I'm down for Chunk 83. Now how did that happen again?

I think it was mainly because the chunks are described in reverse order in the Book Fragments Blog. As I started reading the blog my eye caught something about "buttons" and I wondered whether I would be able to do the button thingy in Processing. So when that turned out not to be rocket science I thought I should be able to cope with that section.

I don't know what the difference would be between a button, an advanced button 1 and an advanced button 2. I guess I'll have to wait for the book to discover that.

Introduction

2008-10-27T17:57:00.000Z

I'm terrible at keeping my blogs active ... I've started a few but after a couple of posts I usually forget about the thing for months on end. I always blame it all on my kids. So I guess I have another eight years or so of excuses and then I'll have to find something or someone else to blame when I forget or don't get around to doing things!

Maybe this blog, being part of the mass writing project will be more structured and force me to update it more frequently.

I'm currently working on my research project and dissertation (M801) with the Open University and that is how I found myself on the mailing list requesting volunteers for the exciting but whacky project!

When not busy with the above, I work full-time and I'm a single mom. I do some other stuff but I can't remember what they are right now ...

Mandelbrot

2008-08-12T00:00:00.000+01:00