OU Mass Writing - Rosie Wood

Tapulla Release on Android Market

2010-10-14T12:47:00.003+01:00

After much fun and hard work, I am proud to announce that I have released a game on the Android Market!
It was written using Processing's Android Tool
Tapulla features original chill out music and is ideal for winding down with, when commuting home from work. The children will like it too and you can compete to see who is the overall family champion.
Tapulla only costs 2 pounds and is well worth it! (Well, I would say that wouldn't I :))
More levels free on next update too!
More info on the website

Processing in Android - Very Desirable

2010-06-03T09:51:00.003+01:00

My chunks for the OU book are finally done and I posted the last errata today...phew!
Having chosen Java whenever possible to obtain my degree it was great to learn to use Processing too. It allows me to use Java and make use of all the Processing facilities at the same time.
Any Java programmer would probably be interested in using Android for mobile phones and I have been no exception. I have been hankering after one of these phones for over a year now but they are so pricey! I was absolutely delighted, therefore when my husband got me my HTC Desire! Then when I discovered that Processing have brought out a Beta tool for Android I was literally over the moon.
The tool at the moment has an Android emulator and a Present tool which allows you to attach the phone and see if your prog works correctly. The export facility generates a debug version apk file. This works for emulator and Present mode. To get the sketch to run standalone on your Android phone you just need to sign it with your private key. They are working on the"export application" option so that it produces a release version apk file that is digitally signed.

Chunk 16 on Android Emulator

Chunk 55

2010-01-05T10:12:00.018Z

I will be completing Chunk 55 which explains how polynomials can be used to draw different types of curves in Processing.
The introduction to polynomials has already been written by Barry and I will attempt to carry on from there. This will mean that this chunk will be co-authored by Barry and myself.

Text for Chunk 55 following Barry's introduction.

Each component of a polynomial expression is called a term, and these are usually ordered from the highest exponent to the lowest. Polynomial expressions do not contain negative or fractional exponents. A typical polynomial expression would have an ordered syntax:E.g. 6xcubed+5xsquared+7x-12 (Not sure how superscript is used in blogger)
In this expression the leading term which has the largest exponent is 6xcubed and its degree is 3. ie 6x6x6 meaning 6 to the power of 3.
The leading term has a coefficient of 6, the second term coefficient is 5, the third term has a coefficient of 7 and the final term, which is a constant, doesn't have a coefficient.
Monomial expressions have only one term, binomials have 2 and trinomials 3.
When working with polynomials it is usual to name them for their leading degree (largest exponent) The expression 6xcubed + 5xsquared +7x - 12 would therefore be a 3rd degree polynomial or cubic.
Polynomials of 2 degrees are called quadratics
Polynomials of 3 degrees are called cubics
Polynomials of 4 degrees are called quartics
Polynomials of 5 degrees are called quintics
In Chunk55 we will only be dealing with quadratic and cubic polynomials but it is interesting to see how the degree and coefficient of a polynomial expression affect the curves when plotted on a graph.
Polynomials with an even numbered degree in their leading term, always enter and leave in the same direction. ie up or down. Therefore, quadratic polynomials are always parabolas.
If the coefficient is even, then the curve will enter and leave at the top of the graph and if the coefficient is odd, it will enter and leave at the bottom.
Polynomials with an odd numbered degree in their leading term, however, have curves that start and end in opposite directions. An odd numbered leading degree with a positive coefficient, will have a curve that starts at the bottom and exits at the top, while a negative coefficient, will have its starting curve coming in from the top and exiting at the bottom.
To plot quadratic polynomials, we need to be able to place the x and y coordinates from 0 to the size of the window. We do this by using an offset of half the width/height of the window.
The width of the parabola is shifted right by adding half the width of the window to the x coordinate and this variable has been named xShift.
The height of the parabola is shifted down by subtracting half the height of the window from the y coordinate and this variable has been named yShift. This allows both upfacing and downfacing curves to be displayed to be displayed together in the window.
An example quadratic such as:
y= 6xsquared-7x+10 In Processing is written as:
y= 6* pow(x, 2)-7*x + 10;
We know that the Processing display screen's coordinates start at the upper left corner,
which is the opposite of a Cartesion Grid's layout, therefore we plot x and y with the statement: point(x+xShift, yShift-y*ratio); In our sketch we want to be able to display positive and negative versions of a quadratic expression at the same time so we must use yShift variable
to place the curves centrally in our display window. The ratio uses our maximum coEfficient to
calculate the spacing for our plots. As our maximum coEfficient is 50 we work out the scale with
the statement:
float ratio = height/(50*pow(loopLimit-1, 2)-50*loopLimit-1 + 100);
The statements: for (int i=-xShift; i<loopLimit; i++){ y = coEfficient* pow(x, 2)-7*x + 1; point(x+xShift, yShift-y*ratio); }
would draw one curve with plots of x and y for our chosen quadratic expression.
In this sketch, we will replace the leading term's coEfficient, with a variable between 2 and 50, in a for next loop. This will give us a graph of nested parabolas with a variable coEfficient.
As the exponent is an even number, we know our curves will all enter and leave in the same direction, also because our equation is quadratic we will have a parabola and because the coEfficient is even its opening will be at the top.

graph of y= coEfficient*xsquared-7x+10
where coEfficient=2 To 50
When we add a plot of a quadratic parabola, with a negative coefficient in its leading term, we end up with this graph:

graph of y= coEfficient*xsquared-7x+10 and
y= -coEfficient*xsquared-7x+10

Code for final quadratic sketch:
/*author: Rosie Wood
January 2010*/
size(400, 400);
background(255);
strokeWeight(3);
float x = 0, y = 0;
int loopLimit = 200;
//shifts curve to the right
int xShift = width/2;
int yShift = height/2;
/*As explained in Greenberg if magic numbers are used, the curves can
be too large for the display window. He used the
polynomial and plugged in the loop limit to get the maximum. This
way if the window size changes, the program should still work.
In this sketch I have tried to get a ratio that will work as long
as the leading term's coEfficient is <=50 the second term coefficient
does not make much difference and can be greater than 100 and still fit in the window. A constant also makes little difference to how well the curve fits in the window
although the beginning and end of the curves could be outwith the
boundaries of the display window*/
float ratio = height/(50*pow(loopLimit-1, 2)-50*loopLimit-1 + 100);
int coEfficient=0;
for(coEfficient=2;coEfficient<50;coEfficient++){
stroke(random(255),random(255),random(255));
for (int i=-xShift; i<loopLimit; i++){

x = i;
/*Here the coefficient of the leading term is positive so the parabola
should enter and leave at the top*/

y = coEfficient* pow(x, 2)-7*x + 1;
point(x+xShift, yShift-y*ratio);
/*Here the coefficient of the leading term is negative so the parabola
should enter and leave at the bottom*/

y = -coEfficient* pow(x, 2)-7*x + 1;
point(x+xShift, yShift-y*ratio);
}}

Cubic Polynomials
When graphing polynomials, the maximum number of bumps is equal to the degree of the polynomial-1. i.e. n-1 , where n =the degree of the leading term.
A cubic polynomial has a degree of 3 in its leading term (x*x*x), so it will have at most 2 bumps (inflections/changes of direction).

Cubic Polynomial with a
positive coefficient in it's
leading term.

Cubic Polynomial with a
negative coefficient in it's
leading term.

This sketch shows both types
of polynomials together.

To be continued......

Unwanted Ads

2009-08-19T16:16:00.003+01:00

I dont think Google should be posting advertisements for DVDs and such on my blog. I only signed up for the endangered animal of the day panel and I don't think this has anything to do with DVDs etc!

Also I am fed up of the Flat Belly tip advert that keeps showing up when I'm browsing. Who told them I had a flat belly? Maybe I was only doing research for a friend when I clicked that lose fat advert!

Also the advert that has, "Look how good I look at 'my age'". I dont go online to be subjected to catty comments.:p

Fingers Crossed

2009-08-11T17:42:00.002+01:00

I'm hoping that Darrel has managed to edit Chunk 16 OK as the last I heard there were some problems....gulp
I do think that a live forum would have made communication easier on the project.
Is it alright to put some of the applets on our own sites?
If we don't include the source code, I think it would help sales of the forthcoming OU Processing book.
I don't know about the rest of you, but I really miss writing for my OU Processing blog...
I've been busy trying to do search optimization on Solundria
I know this is a shameless plug but there's a lot of good content there! Honest...
I used some of my processing programs to generate images for my snap games. I even made a Snappy Easter version with Easter eggs. This involved using 3d spheres with some of the Chunky program's images.
Details are available in this blog somewhere.

Chunk 16 - Product Line

2009-05-27T23:09:00.003+01:00

Zazzle.co.uk is an interesting new website and I just had to try its design a product widgets using chunk 16 images. This could be a good way of generating money for the Open University Student Hardship fund.
I intend adding some more products and will perhaps use Chunk 46 images too.
Watch this space for more funky chunky products!

Mix Up

2009-04-08T17:08:00.004+01:00

We learned in Chunk45 how we can use the mask method to create an image from two other images. Chunk46 images can be used to create a mask. Instead of using one mask we shall explore how we can use a different mask on each image in a folder of generated images.

We need to decide on the file type and the size of the images we would like to make. The size of our window, masks and images must be the same size, although they can be of different file types. We can use any sketch that loops through the draw method. If we examine the code for Chunk16 we can see, that a new image is generated and displayed, at the end of every iteration of draw. We will therefore use Chunk16 as an example. As a new image is displayed at the end of draw it would make sense to place the save statement there. We initialize an integer as a global variable so its value can be referenced outside of draw. We increment the integer by one at the start of draw and at the end of draw we just add a save statement e.g.:
save("name"+n+".gif");
Where name is the name of the file each image will have followed by a sequential number n. We can increase the frame rate and use the exit method to close Chunk16 when it has generated the required amount of images. We would add an if statement to control how many images were generated like so:
if(n==20)exit();
Next we perform the same process on the Chunk 46 code to produce the same amount of images, changing the name so the images wont be overwritten when moved.
Next we write a simple sketch to use the Chunk46 images as a mask on the Chunk 16 images. (or vica versa)

Here is the code for the masking program:
int n=0; void setup(){ size(700, 700); frameRate(.2); } void draw(){ n++; if(n>50)n=0; PImage img = loadImage("c"+n+".jpg"); PImage i= loadImage("line"+n+".gif"); //PImage img= loadImage("line20.gif"); image(i, 0, 0, 700, 700); filter(GRAY); loadPixels(); img.mask(pixels); image(img, 0, 0, 700, 700); save("mix"+n+".gif"); }

As you can see it uses the code we have just discussed to save a copy of each masked image. If you add an image to the sketch then save it, a data folder will be created, where we can copy the images in Chunk16 and Chunk 46 to.

The new images will be saved in the new sketch's folder.

Chunk 46 - Program Completed

2009-04-04T20:49:00.004+01:00

The Chunk 46 program is shown running in the video below, it tends to run slower when the next image is more detailed. We could decrease the variable patsPerPic to speed it up a bit or adjust the framerate.

Chunk 46 - HeadLines from Rosie Wood on Vimeo.

Chunk 46 - Optional Modifications

2009-04-04T15:07:00.013+01:00

This section is optional and we must decide if it is worth attempting to decipher another persons code our weite our own. The scenario is one which often crops up when writing a program. We have some code that someone else wrote, or code we ourselves wrote, that would add some desired quality to our application. It seems to fit the bill but when we copy and paste it into our own code we find that it isnt a perfect fit. We may decide it would be easier to just write our own code or we may feel that the code would save us a lot of time.

The code in this case, is contained in a for loop, in another program we wrote some time ago. It contains many new patterns and the images above only use a few of them. Study these images and decide whether you want to use them and modify THE CODE .
The finished code will not be available here and so you will have to buy the book or modify this code if you want to add the new patterns.
Tip: If your code slows down after making the changes, trace the code through the for loops and make sure you are clear about how many times a function is executing!

Ch46 - An Array of Difficult Choices

2009-04-03T15:33:00.007+01:00

After careful consideration of how to implement the choices available for pattern 7 we decide to use an array to hold the available choices.
boolean [] segments={false,false,false,false,false,false,false,false};
If we allowed any choices at all for pattern 7 what would be the outcome? We decide to try this out and implement a function to use our array. We need to reset the arrays values to false when we start to draw a pattern 7 design. Then we must randomly decide which segments to draw.

void oops(){
resetSegs();
for(int n=0;n<8;n++){
if(round(random(1))==0){segments[n]=true;}
}
println(segments);
if(segments[0]==true){
line(0,height-y,y,y);}//oopsleft down
if(segments[1]==true){
line(width-x,0,x,x);}//oopsup right
if(segments[2]==true){
line(x,0,width-x,x);}//oopsup left
if(segments[3]==true){
line(width,y,y,height-y);}//oopsright down
if(segments[4]==true){
line(width,height-y,y,y);}//oopsrightup
if(segments[5]==true){
line(width-x,height,x,x);}//oopsdown left
if(segments[6]==true){
line(x,height,width-x,x);}//oopsdown right
if(segments[7]==true){
line(0,y,y,height-y);}//oopsleft up

}
void resetSegs(){
for(int n=0;n<segments.length;n++){>
segments[n]=false;
}
}
When we run our application with this function, every time our function executes, all the segments are drawn. On careful inspection, we realise that resetting the array and filling in the choices should not be within the function or the for loops. We move the offending code from the function to the start of the while loop:
while(count<patsperpic){
resetSegs();
for(int n=0;n<8;n++){
if(round(random(1))==0){segments[n]=true;}
}
changeColour();
An example of running our application with no limits on the choices for pattern 7, is as shown in the images above. We may decide that this is acceptable or not...
The patterns used in Chunk 46 include 4 different meshes, which we may feel don't merit a case statement each. If we moved this code to one case statement then we would have more patterns and less meshes.
Example Source Code with space for 2 new patterns
The next section is optional and involves adding new patterns from another program's for loop.

Chunk 46 - Structure

2009-04-02T20:44:00.009+01:00

In this section we will move our patterns into functions and decide how each function will control the symmetry of its own pattern.

We want to make our program as easy to manage as possible so we decide we will have a global variable that will control the amount of lines each statement will use to be drawn to the screen. As the size of the pixels is different vertically and horizontally we will use two for next loops to contain the pattern controlling.
Here is a list of the variables we might end up with:

int numLines=20;//changing this controls the amount of lines in a statement
int stepH=0; //used in for loop for vertical steps
int stepW=0; //used in for loop for horizontal steps
int n=0; //allows the value of n to be accessed from the functions
int x=0; //horizontal step
int y=0; // vertical step
int rannum=0; //a random number between 0 and 2
int design=1; //an integer to identify the case statement to execute
int count=0; //used to compare with the number of patterns per picture
int drawCount=0; //counts how many patterns have been displayed so far

Here is the basic structure of the application:

void setup(){
size(400, 400);
stepH=height/numLines;
stepW=width/numLines;
strokeWeight(1);
smooth();
frameRate(30);
}

void draw(){
patsPerPic=round(random(2,7));
background(0);
count=0;
n=0;
while(count&ltpatsperpic){>
changeColour();
rannum=round(random(2));
design=round(random(2));



for(x=0;x <width+1;x=x+stepw){
for y=0;y<height+1;y+=stepH){">

switch(design){
case 0: function0(); break;
case 1: function1(); break;
case 2:function2();break;
} } }//end of fors
count++;
}//end of while
drawCount++;
}//end of draw

void changeColour(){
stroke(random(255),random(255),random(255),random(255));
}

void function0(){
line(whatever);
}
void function1(){
line(whatever);
}
void function2(){
line(whatever);
}

Lets look at one of our functions and how the value of rannum decides which patterns are drawn.

void bigArches(){
//rannum=0;
if(rannum==1||rannum==0){
line(x,0,width,x);//large mesh ur
line(0,y,y,width);}
if(rannum==2||rannum==0){
line(0,height-y,y,0);//large mesh u l
line(width,height-y,y,height);}
}
The way we have designed this function, allows 3 choices. If the value of rannum is zero, it can be seen that both if statements are executed. A value of 1 or two only executes one of the if statements. If we wanted the arches to be totally symmetrical, we could set the value of rannum to zero within the function.
If we are working on a function, then we can replace the design variable in the switch, with the number of the case statement we are working on.
e.g. switch(3){
To add a function to the basic structure we would add the function, give it a case statement and increase the size of the random number used to choose the design. If a pattern only uses one statement there is little benefit in moving it to a function. How we decide the options availablr for each pattern is a matter of personal taste. Most of the functions will have a structure similar to the bigArches function above but you may decide that a pattern is too trivial to be shown on its own and so give it no options e.g.
void inwards(){
line(0,0,height-y,y);//inwards l d
line(width,height,y,height-y);//inwards r u
line(0,height,y,y);//inwards l u
line(width,0,y,y);//inwards r d
}
This means that when this design is chosen it will always show the four statements in its pattern,
Some statenents in a pattern could be shown on their own, in a pair or as one of four. This gives 7 choices and this is easy to implemrnt by choosing a random number in the function. e.g.
void butterfly(){
int rannum=round(random(6));
if(rannum==1||rannum==5||rannum==0)
line(x,height-y,width-x,0);
if(rannum==2||rannum==5||rannum==0)
line(x,y,width-x,height);
if(rannum==3||rannum==6||rannum==0)
line(width,width-y,x,y);
if(rannum==4||rannum==6||rannum==0)
line(0,y,x,height-y);
}
However, you may decide that you dont like the symmetry of the designs produced when only one statement of the four is used in a pattern and just use the rannum variable to control the oppositely located pairs of statements.
void butterfly(){
if(rannum==1||rannum==0){
line(x,height-y,width-x,0);
line(x,y,width-x,height);}
if(rannum==2||rannum2==0){
line(width,width-y,x,y);//butterfly r
line(0,y,x,height-y);}}
As was demonstrated in the last section the amount of choices available when there are eight possible statements in a pattern is considerable. When implementing such a design, we may decide to simplify it, if it is not bringing anything worthwhile to the program. e.g.
void triangle3(){
if(rannum==1||rannum==0){
line(0,0,y,height);//ray uld
line(0,0,width,height-y);//ray ulr
line(width-x,0,width,height);//ray d r u
line(0,y,width,height);//ray d r l
}
if(rannum==2||rannum==0){
line(width,0,0,height-y);//ray u r l
line(width,0,height-y,height);//ray u r d
line(0,height,width-x,0);// dl u
line(0,height,width,height-y);//ray d l r
}}
On the other hand we may decide that it is worth the added complexity if it brings some quality to our application.
Implementing pattern 7 will warrant some careful consideration.

Chunk46 - Line Patterns

2009-04-01T09:10:00.026+01:00

After much deliberation we come up with a motley collection of patterns which we will be re-factoring out to functions in the next section.
Our first pattern required 4 line statements to draw it and we placed these in our for loop. Looking at our collection of patterns we realise that some need a different amount of statements in order to be drawn and their symmetrical properties vary. We intend to make a randomised pattern generator, along the lines of Chunk16 but we have some decisions to make along the way, which will affect how the finished patterns will be generated.
One of our patterns requires only one statement and is totally symmetrical. Any function this pattern is used in will be vety simple as there are no choices to make. If you havent guessed this unique pattern is number 4.
Pattern 4 is symmetrical, horizontally, vertically and also diagonally. We have to decide, which symmetrical properties our sketch will be using. We could decide to make the symmetrical properties of our pattern vary and this would make it more complex to manage. Lets use the KISS principle to begin with...(Keep It Simple Stupid).
Pattern 4 required only one statement and two of our patterns are only a little more complex having only 2 possible statements in their code. In our example pattern numbers 5, 6 and 11 have only 2 possible statements.
Lets look at their symmetry:
Pattern 5:

This pattern has 3 possible display options, we can display both images together which forms a grid and is totally symmetrical or we can use one of the images alone, to produce horizontally or vertically, symmetrical stripes.
Pattern 6:

Again we can choose vertical, horizontal or total symmetry.
Pattern 11:

Pattern 11 covers the whole display area with one statement, which has diagonal and either horizonal or vertical symmetry depending on which one of the two statements in the set is used. Using both statements acheives total symmetry.

Each pattern in our next group requires 4 statements to be drawn and has other display options. Lets look at them one by one:
Pattern 2:

Our options are beginning to get more complicated here. We can display each single pattern on its own but this would be assymetrical and would not fill the display screen. The diagonally opposite patterns would be symmetrical on the diagonal axes and would give us another two choices or we could use all the statements, to produce a totally symmetrical pattern which could cover most of all previous patterns in one "coat".
Pattern 3:

This pattern is similar to pattern 2, in that we have 3 symmetrically possible choices but it would probably allow any underlying patterns to show through.
Pattern 8:

Pattern 8 covers the screen in one statement but it is not very symmetrical, having a semi symmetry on one diagonal axis. Using two statements with diagonal symmetry might be a better option or using all four statements in the set gives us a totally symmetrical pattern.
Pattern 9:

I call this pattern the butterfly and although it is an attractive pattern its symmetry could be hard to explain and implement. Depending on the statements chosen it can have total, horizontal, vertical or diagonal symmetry. As in pattern 8 it covers the screen in one statement and each statement has horizontal or vertical symmetry on its own.
Pattern 10:

This is another simple pattern which presents no problems.

Our final two patterns have 8 statements in each set, which further complicates things by allowing more options for symmetrical displays:
Pattern 12:

If we pick out some combinations of statements from the set of Pattern 12, we could find the above patterns but we have probably missed some. We will not discuss the symmetry of pattern 12 here but we will have to study it again when we move it to a function.
Pattern 7:
Like the preceding pattern there are 8 statements in this set. Although we are not going to study Set Theory in this chapter, it may help give us some insight to help us manage the options available. A set has a number of subsets equal to 2 to the power of the number of its elements. In the case of pattern 7 this is simply 2^8. This gives us 2x2x2x2x2x2x2x2 or 256 possible combinations, including the empty set, which we don't want, as it would just result in an empty screen. We could list this set formally as:
Pattern8={{1},{2},{3},{4},{5},{6},{7},{8},{1,2},{1,3},
{1,4},{1.5},{1,6},{1,7},{1,8},{2,3},{2,4},{2,5},{2,6},{2,7},
{2,8},{3,4},{3,5},{3,6},{3,7},{3,8},{4,5},{4,6},{4,7},{4,8},
{5,6},{5,7},{5,8},{6,7},{6,8},{7,8},{1,2,3},{1,2,4},{1,2,5},{1,2,6}
,{1,2,7},{1,2,8},{1,3,4},{1,3,5},{1,3,6},{1,3,7},{1,3,8},{1,4,5},{1,4,6},{1,4,7}
,{1,4,8},{1,5,6},{1,5,7},{1,5,8},{1,6,7},{1,6,8},{1,7,8},{2,3,4},{2,3,5},{2,3,6},{2,3,7},{2,3,8},{2,4,5),{2,4,6},{2,4,7},{2,4,8},{2,5,6},{2,5,7},{2,5,8},{2,6,7},{2,6,8},{2,7,8}{3,4,5},{3,4,6},{3,4,7},{3,4,8},{3,5,6},{3,5,7},{3,5,8},{3,6,7},{3,6,8},{3,7,8},{4,5,6}{4,5,7},{4,5,8},{4,6,7},{4,6,8},{4,7,8}{5,6,7}{5,6,8},{5,7,8}{6,7,8},

{1,2,3,4},{1,2,3,5},{1,2,3,6}
,{1,2,3,7},{1,2,3,8}{1,2,4,5},{1,2,4,6},{1247},{1,2,4,8},{1,2,5,6},{1,2,5,7},{1,2,5,8}{1,2,6,7}

,{1,2,6.8},{1,2,7,8}{1,3,4,5},{1,3,4,6},{1,3,4,7},{1,3,4,8},{1,3,5,6},{1,3,5,7},{1,3,5,8},{1,3,6,7}

,{1,3,6,8},{1,3,7,8},{1,4,5,6},{1,4,5,7},{1,4,5,8},{1,5,6,7},{1,5,6,8},{1,5,7,8},{1,6,7,8},{2,3,4,5},{2,3,4,6}

,{2,3,4,7},{2,3,4,8},{2,3,5,6},{2,3,5,7},{2,3,5,8},{2,3,6,7},{2,3,6,8},{2,3,7,8},{2,4,5,6},{2,4,5,7}

,{2,4,5,8},{2,5,6,7},{2,5,6,8},{2,5,7,8},{2,6,7,8},{3,4,5,6},{3,4,5,7},{3,4,5,8},{3,4,6,7},{3,4,6,8},{3,5,6,7},{3,5,6,8},{3,5,7,8},{3,6,7,8},{4,5,6,7},

{1,2,3,4,5},{12346}
,{1,2,3,4,7},{1,2,3,4,8},{1,2,3,5,6},{1,2,3,5,7},{1,2,3,5,8},{1,2,3,6,7},{1,2,3,6,8},{1,2,3,7,8},{1,3,4,5,6},{1,3,4,5,7},{1,3,4,5,8},{1,3,4,6,7},{1,3,4,6,8},{1,3,4,7,8},{1,3,5,6,7},{1,3,5,6,8},{1,3,5,7,8},{1,3,6,7,8},{1,4,5,6,7},{1,4,5,6,8},{1,4,5,7,8},{1,4,6,7,8},{1,5,6,7,8}
,{2,3,4,5,6},{2,3,4,5,7},{2,3,4,5,8},{2,3,4,6,7},{2,3,4,6,8},{2,3,4,7,8},{2,3,5,6,7},{2,3,5,6,8},{2,3,5,7,8},{2,3,6,7,8},{2,4,5,6,7},{2,4,5,6,8},{2,4,5,7,8},{2,5,6,7,8},{3,4,5,6,7},{3,4,5,6,8},{3,4,5,7,8},{4,5,6,7,8}

,{1,2,3,4,5,6},{1,2,3,4,5,7},{1,2,3,4,5,8},{1,2,3,4,6,7},{1,2,3,4,6,8}
,{1,2,3,4,7,8},{1,3,4,5,6,7},{1,3,4,5,6,8},{1,3,4,5,7,8},{1,3,4,6,7,8},{1,3,5,6,7,8}

{1,2,3,4,5,6,7},{1,2,3,4,5,6,8},{1,2,3,4,5,7,8},{1,2,3,4,6,7,8},{1,2,3,5,6,7,8},{1,2,4,5,6,7,8},{1,3,4,5,6,7,8},{2,3,4,5,6,7,8},{1,2,3,4,5,6,7,8}}
tHIS IS A WORK IN PROGRESS!
Sometimes we end up wishing we hadnt started something and this is one of these times! A couple of hours later and still over 50 combinations short!

Anyway to continue.....
Pattern 7:
We will stop there with pattern 7 but as can be seen, there are many decisions to be made over which combination of pattern 7 statements we will allow, maybe it would be easier to choose the ones we wont allow! Our next task is to place each pattern in its own function and control its drawing from a for loop within the draw method.

Chunk 46 - HeadLines

2009-03-31T22:06:00.006+01:00

I have been given the go ahead to do chunk 46, which will be along the lines of lines. There isnt much on the subject of maths that my mind retains for long but one of the very few lessons that stuck was in Geometry and the subject was lines. I suppose that everyone was taught this lesson, and how by placing lines correctly on a grid produces curves. To me it is equivalent to the chemistry lesson where mixing 2 clear liquids produced a coloured one. It was on the strength of this long remembered concept, I decided to do Chunk 46.
To jog everyones memory we will repeat the lesson by placing lines along the x and y axes of a grid but we will be using Processing instead of squared paper and a sharp pencil.

int n=0;

void setup(){
size(400,400);
strokeWeight(1);
background(255);
}

void draw(){
line(0,n,n+10,height);
n+=10;
delay(200);
if(n>height){
n=0;
}}

Using Processing it has not taken us long to produce this sketch and not a smudge in sight! We even slowed it down by a fifth of a second, to help demonstrate what was happening!
Now we have produced our sketch, we decide to repeat the exercise, in the four corners of our screen. Unfortunately we dont have a calculator to work this out for us and we have to calculate the beginning and ending of each line in the virtual graph.
line(0,n,n+10,height);
Fortunately we have a pattern to guide us, in the code we used to create the first sketch. We can see that the pattern starts at zero across and a variable n, which increases by ten each time the draw method is exited and reexecuted. The end coordinate is the value of n+10 and is always the height of the screen downwards. To make our next pattern at the bottom right corner we know the first coordinate should start at the width of the screen across and have n pixels down. On each iteration, the point should have a variable number across and a fixed value equal to the height of the screen. If we are careful not to hard code any of the integers used to draw our sketch, this will mean our code can run in any size of window.
The way we coded the pattern sketch was ok to demonstrate the lines being drawn but we shall place the code in a for loop now, as we are using steps to increment the value of the gaps between the lines.
Try to calculate the statements needed to draw the other three patterns. The mathematically minded can use their free time to come up with some other patterns to use in their program and those whose mathematics are more artistic will come up with loads of new patterns as they try to work out the numbers.
Add a function to change the stroke colour each time the draw loop repeats. The finished sketch should look like the illustration and hopefully you will have thought up some new patterns, which we shall use in the next section.

Chunk16 Goes Mobile

2009-03-27T20:00:00.002Z

Ive been playing around with the mobile processing IDE and managed to port a maobile version of Chunk16 to a midlet. Unfortunately I dont have a java phone yet, so I cant test it properly. Mobile Processing is very easy to pick up but it does have its limits. I dont think it can scale images, which is disapointing as some of my applets need this functionality. There isnt so much documentation available, as there is for Processing and this is making it hard to use the libraries properly. In order to grab the screen into an image you have to use the Image2 library but I have got nowhere fast with this so far.

2009-03-23T10:07:00.002Z

The chunk 79 text and standalone program have now been submitted but the text was in odf format and I'm not sure this is acceptable. Working with Processing is a real pleasure for me and I would really like to use it more. On my wanderings around the web, I heard tell of a GUI library, that can be used with it and this is something I will definitely check out.
Using Processing's image capabilities will be a bonus when I'm designing java games but I would have liked to find a way to slot in some Processing code to a Java program when needed. Processing might be a viable option when it comes to online games but I would need to spend some time researching the best way to implement a user interface. Sound is quite an important quality in games, but I havent looked into this yet, although I know Processing can use the minim sound library.
On Mondays I have decided I will work on my web site. There are a few outstanding tasks that I have been putting off. A few months ago I updated the site to using PHP 5. It has a basic content management system, where you can add news items and images to the database. I did an OU course on Open Source using PHP a few years ago and at the time I had a good understanding of it. Now, however, my selective memory has decided to scrap most of the information.
I coded the CMS by following a book and it included a password protected administration page for managing the news content. When I implemented this I somehow enabled an option to wipe out any news that is over a week old.... This is now extremely annoying as when I am busy the news page becomes completely empty. I will have to find that book and the relevant piece of code to disable this unwanted behaviour.
The only commercial content on my site is the 'Snappy Birthday Game'. This is a very half hearted attempt to make some money from my programming work. There are totally free versions of the game available but you can send a personalised Smappy game to someone with a message for a small fee. The images for the cards in the game are pretty awful and I really need to give them an overhaul, but I never seem to get a round tuit. This might explain why so far I have sold zero copies lol.
The organisation of the site is not great and I should make a launch page for all the free processing applets I have hosted there.
These are just some of the tasks I need to tackle on Mondays.....so I'm busy today.

Chunk 79 - Introduction

2009-03-22T16:15:00.015Z

In the preceding chapters, we have seen how the pixels array can be used to apply different effects, to the screen display. In order to perform these pixel operations, it is usually necessary to set up some kind of loop to work on each separate pixel. In this chapter we look at the filter method, which allows us to carry out various effects, on the contents of the display screen. The effects affect every pixel and cannot be applied to specific areas of the screen, although theoretically, you could achieve this using the translate function.

The filter method is very simple to use and accepts eight different constant parameters, which apply different filters to the screen content. The parameters accepted by the filter method are: INVERT, GRAY, THRESHOLD, ERODE, DILATE, OPAQUE, BLUR and POSTERIZE. The signature of the filter method is filter(MODE), where MODE is one of the parameters listed above. Some modes can also accept an integer or float, that specifies the intensity required, if no second parameter is provided, a default value is used, which is usually mid range.

Before discussing each filter in depth we will look at an image transformed by each filter mode, so we can compare the different effects.

As can be seen from the images, using the filter method and its modes, can spectacularly transform an image. Some of these effects had the filter applied several times, to emphasize the effects produced. The astute observer may have noticed, that the opaque image is no different from the original image. This is because our example image has no transparent areas. Some very dramatic animations can be created, by varying the intensity parameter of a filter and displaying each effect in a loop. We will now discuss the modes in depth. Most modes will have a small animation to illustrate their functionality.

CH79 - Filter Utility - Standalone

2009-03-21T09:35:00.003Z

The difference between using the Java.io package and Processing's own file methods, was nothing short of amazing!
The code needed to implement opening and saving files has been greatly simplified and the utility was deployed as a normal processing application. The file choosers used to open and save files, are native to the user's installation and this gives a much better impression. The user can now choose any graphic file type including TIFF from anywhere on their system. The functionality of the utility is exactly the same as in Mark 1, but far more streamlined.
There are some methods that could use a little tweaking but all filters work at least once. I'm not sure if a file can be saved with alpha values intact, but I have left in the Opaque filter for completeness, it is possible that transparent gifs etc could be affected but I havent tested this.
Source Code
Save or Run the application
In order to run as an applet, the applet would need to be signed as it loads and saves files, on the user's machine.

Chunk 79 - Filter Utility Mark One

2009-03-21T01:11:00.004Z

After writing the utility I found it was impossible to deploy it as a standalone application, as it uses the java io package, which complicates matters.
The utility can be built by cutting and pasting the source code into the IDE and saving it. Then either add the font and directories manually and add some images to each folder, or download and extract, a prebuilt data folder and copy it into the application directory.
The utility works well but it is a pain that the reader has to build it themselves. After using the java io to open files I discovered that processing has its own way of loading and saving files complete with a file chooser. Hopefully, our next version will be easier to code and deploy.

Chunk 79 - Filter Utility

2009-03-20T15:11:00.007Z

Well, apart from the odd bug, the coding of the filter utility is complete. The hardest part was getting the help panel to disappear, when applying a filter. This was achieved, by using the get() method to take a snapshot of the display screen, before showing the panel and then displaying this image, before applying a filter.
Instructions
The images to be worked on should be copied to the relevant folder in the data directory. There are three directories:
GIF - JPG - PNG
The utility can deal with up to 10 files in any directory. If the reader chooses an empty directory, the program will crash, if there is time I might fix this later...
When the utility is started the reader is given a choice of which type of file to use. The uppercase or lower case 'G', 'J' or 'P' are acceptable inputs. On entering an acceptable input the reader is shown a list of files in the appropriate directory
The reader chooses the required file by entering its number. The chosen file is displayed on the screen so that it can be worked on. Pressing the 'H' or 'h' key opens a help panel, which displays the options for the program.

The choices available are:

I - INVERT
G - GRAY
E - ERODE
D - DILATE
P - POSTERIZE
B - BLUR
T - THRESHOLD
O - OPAQUE
R - RESTART
S - SAVE
X - EXIT
The filters are applied to the image but some e.g. posterize only work once.
R allows the reader to choose a different file type and file.
S saves the file and allows the user to continue working on the image.
X exits the application.
When a file is saved it will have "filtern" (where n is the number of the image saved this session)appended to its name. The extension of the file, will be the same as the image being worked on. All files will be saved in the ch79 directory. The files should be renamed and moved to another directory if they are needed as they might be overwritten the next time the program is run.
Source Code

Load Chosen File

2009-03-19T14:50:00.002Z

In order to load files from the data directories, make sure the permissions for ch79 are not set to read only. Navigate to the ch79 folder in myWork, right click,Properties and unclick the read only check box.
The application now loads the user's choice of file and displays it.
To set up the application, use the Tools/Create font utility to add the AngannaNew font with a size of 24. Change file name to Ang24. Make 3 new folders in the data folder for ch79. Name them,GIF, JPG and PNG.
The finished utility will not run as an applet as it loads and saves files on the client's PC. When the program is complete I will make it available for download. It gets the working directory from a system property. This, should work, but I have only tried it on my own pc.
Here is the code so far:
import java.io.File;
String mode="none";
String dir="none";
boolean fileChosen=false;
int size=600;
File f;
String sep=File.separator;
String curDir = System.getProperty("user.dir");
PFont font;
PImage i;
String[]files;
void setup(){
size(size+size/3,size);
font=loadFont("Ang24.vlw");
textFont(font,24);
frameRate(20);}

void draw(){
if(!fileChosen){
if(mode=="none"){
chooseMode();}
else{
chooseFile();}}
else{
image(i,0,0,width,height);}
}

void clearDisplay(){
fill(255);
rect(0,0,width/2,height/2);
}

void chooseMode(){
display("Type of File\n G - GIF\n J - JPG\n P - PNG");
}

void chooseFile(){
String s=dir+" Files:\n";
String path=getPath();
File gDir=new File(path);
files=gDir.list();
int i=files.length;
if(i>9)i=9;
for(int n=0;n String fName=files[n];
s+=n+": "+fName+"\n";}
s+="Enter File Number";
display(s);}

void getFile(char key){

int num = Character.getNumericValue(key);
String f=files[num];
String path=getPath();
if(files.length>num+1){
i=loadImage(path+f);
fileChosen=true;
}}

String getPath(){
return curDir+sep+"myWork"+sep+"ch79"+sep+"data"+sep+dir+sep;

}

void display(String s){
clearDisplay();
fill(0);
text(s,2,20);}

void keyPressed(){
if(mode=="none"){
if(key=='g'||key=='G'){
mode="gif";
dir="GIF";
}
if(key=='j'||key=='J'){
mode="jpg";
dir="JPG";
}
if(key=='p'||key=='P'){
mode="png";
dir="PNG";
}}
else{
if(key>='0'&&key<='9'){
print("choosing file");
getFile(key);}}
}

Listing Files in the data Directories

2009-03-17T18:25:00.003Z

The first task was to think about how the reader would load graphic files into the application. I could have had all files in the data directory but I decided it would be better to have a file for each data type. I never use tiff files so I decided to make directories called: GIF/JPG and PNG. I copied some images of the various types into their appropriate folder.
When the application starts the user is given the choice of which type of file they are going to work with. An input of 'G', 'J' or P is accepted. This display only shows if the mode has not been set. When a file type has been chosen, a list of the files in that directory is displayed allowing the reader to choose the working file.
In order to work with files we have to import the java.io package. As the program can only listen for one key press, I had to limit the amount of files to 10. There is probably a way of accepting double figure inputs, but this chapter is on filters and the input code is off track, as it is.
In order for the pathnames to work on other operating systems I used the path separator attribute of the File class. Next I will have to allow a file to be chosen and opened in the system.

Code for Standalone File Choice:

import java.io.File;
String mode="none";
String dir="none";
boolean fileChosen=false;
int size=600;
File f;
PFont font;

void setup(){
size(size+size/3,size);
font=loadFont("Ang24.vlw");
textFont(font,24);
frameRate(20);}

void draw(){
if(!fileChosen){
if(mode=="none"){
  chooseMode();}
else{
  chooseFile();}}}

void clearDisplay(){
fill(255);
rect(0,0,width/2,height/2);
}

void chooseMode(){
display("Type of File\n G - GIF\n J - JPG\n P - PNG");
}

void chooseFile(){
String s=dir+" Files:\n";
String sep=File.separator;
String curDir = System.getProperty("user.dir");
String path=curDir+sep+"myWork"+sep+"ch79"+sep+"data"+sep+dir+sep;
File gDir=new File(path);
String[]files=gDir.list();
int i=files.length;
if(i>9)i=9;
for(int n=0;n<i;n++){ 
  fname="files[n];
  s+=n+": "+fName+"\n";}
s+="Enter File Number";
display(s);}

void display(String s){
  clearDisplay();
  fill(0);
 text(s,2,20);}

void keyPressed(){
if(mode=="none"){
  if(key='g'||key=='G'){mode="gif"){
    dir="GIF";}
  if(key=='j'||key=='J'){
    mode="jpg";
    dir="JPG";
  }
  if(key=='p'||key=='P'){
    mode="png";
    dir="PNG";
  }}}

Standalone Program-Intentions

2009-03-17T10:47:00.003Z

When I started thinking about Chunk 79, I was intending to write some sort of applet for medical scanning. When I was researching the subject, I discovered an open source application, that provides all the functionality needed to perform medical imaging.
When I am programming, I use any available image to enable me to concentrate on the code. Sometimes the image is blurry or has some other defect, this book will be used by artists and programmers, so I think that if the standalone program was a filtering utility, the reader would gain a useful application while learning about the various filter modes.
The application will display a help panel with the key - filter pairs listed. They will be able to load in an image and apply various filters to it. A real world application would probacly have an undo function. I will try to provide one undo using push/popMatrix. After the reader has finished filtering their image they will be able to save it and the program will exit.
That is my intention but specifications have a habit of changing, when an application is being coded. I therefore have no idea if the finished program will be anything like this initial specification.
Most of the groundwork for the text of chunk 79 has been completed and the text will just need an intro, some editing of the filter modes, already covered in the blog and a summary. The standalone program is a large portion of the requirements for Chunk 79, so I think I'd better get that completed before writing up the text...

The OPAQUE Filter

2009-03-16T13:03:00.009Z

I haven't done anything on my website for a couple of months now, so with easter coming up I decided to make an easter edition of my Snappy card game. I did one for Christmas, so an easter one would be exactly the same only with different images. I needed some images of easter eggs and so Processing seemed like an ideal solution. It took me some hours to find a simple example I could work with but I finally tracked down a rotating textured globe in the processing forum. Many thanks to the author (doozer) for making the source code available!
3d Textured Globe
After some minor edits I changed the globe to a sphere and added in some chunk 16 images. I kachunked some files to make 4 backgrounds. The globe applet rotates on both axes so I disabled one. I am intending using the code to generate easter egg images so I didnt need the egg rotating vertically. The result looked really good, but the image was a bit transparent and the background was showing through and this was not what I needed for an easter egg image. Aha, I thought the OPAQUE filter would come in useful here. This was a real coincidence, as this is the final filter I need to describe here on the blog. I applied the opaque filter and it worked perfectly. A side effect was the sphere stopped rotating altogether but as I'm generating static images this proved to be no hardship. Now I have my images, I can place them in the Java snap game as card images.

Translucent Image Same image with OPAQUE filter applied

To see the spinning egg, before the opaque filter was applied and to play the finished snap game visit here.

The GRAY Filter

2009-03-13T16:36:00.002Z

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Turns the contents of the display screen to grayscale.

The ERODE and DILATE Filters

2009-03-13T15:45:00.004Z

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

ERODE left - Dilate centre - Origunal right. The filter has been applied 10 times in this example.

There is very little information on the ERODE and DILATE filters and the Processing Reference, suggests these modes are used along with parameters. The filter method however accepts no parameters with these modes.
When one of these filters is applied to an image, there seems to be very little difference. There is a slight difference when the stroke weight is small.
By repeatedly applying the filters to an image however, the effect becomes more noticeable.
ERODE lessens the presence of light areas and DILATE increases them.

The INVERT filter

2009-03-13T09:46:00.004Z

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

Inverted image on left, original on right

The invert filter takes an image from the display screen and inverts its colours. As can be seen from the applet, when the background of an image is black, it is changed to white. Black has colour value 0 and white has value 255. So to invert black 255 is added to the colour value of (0,0,0) to give (255,255,255). The red, green and blue colour values set at 255 (maximum value) gives the colour white. The colour pure red has a colour value of (255,0,0), we would expect the inverse of this to be (0,255,255). We can test this theory in Processing.
psuedo code:
make colour c=(255,0,0)(red)
set background to c
make colour c=(0,255,255)(cyan)
set fill to newC
draw a rectangle in centre of screen
apply invert filter

Run the following code in processing to produce a cyan square with a red background.
color c, newC;
void setup(){
size(200,200);
c=color(255,0,0);
newC=color(0,255,255);}
void draw(){
background(c);
fill(newC);
rect(width/4,height/4,width/2,height/2);
//filter(INVERT);
}
uncomment the last line and run again.
The colour of the rectangle is now red and the background cyan.
If we set the colour value to (128,128,128) and then invert it we may establish how processing applies the invert filter.
Applying different values we can establish that the invert filter subtracts the colour values from 255 to produce the new colour values.
We can use the following code to prove this by changing the values of the colours and printing out the values after the inverse filter has been applied:

color c, newC;
void setup(){
size(200,200);
c=color(55,55,55);
newC=color(0,255,255);}
void draw(){
background(c);
fill(newC);
rect(width/4,height/4,width/2,height/2);
filter(INVERT);
color getC=get(10,10);
println(red(getC));
println(blue(getC));
println(green(getC));
}

The POSTERIZE Filter

2009-03-07T06:59:00.002Z

My apologies if the above applet takes longer to start. This is because it contains 50 jpgs. {I'll maybe get round to cutting it down to 10...}
The Posterize filter takes as an argument an integer representing the amount of colours to use when it rerenders the display screen. I think it works best with chunky shapes and lines. The images used here, dont use very many colours, so using a value of 255 just slows down the animation with very little visible result. In the applet the blur filter has been used to make the image less detailed, then the pixels array has been used to turn black areas to a random colour. Finally the Posterize filter is applied to the image. In the applet only values of 2 - 10 are used which works well with the images used. Each time the posterize level reaches 10, a new image is loaded, a new colour is chosen and the process repeats.

The BLUR Filter

2009-03-07T01:59:00.002Z

The blur filter performs a blur on the image loaded into the display area. It can accept an integer of 100 but I would stick to a number under 20 unless you really want a very blurred image; as the time taken seems to increase exponentially the higher the parameter.
The applet above uses much the same code as the THRESHOLD filter but an integer parameter varying from 1 - 15 is used.

The THRESHOLD Filter

2009-03-05T17:27:00.001Z

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

The threshold filter takes the most predominant colours in an image and turns them white. Colours that are less intense are turned black. Depending on the threshold level, the decision whether to change a pixel white or black varies.
When no threshold level parameter is supplied, the default value (0.5) is applied to the display screen. As you have probably learned by now, each colour has red, green and blue values, that range from 0 to 255. The threshold filter examines a pixel's red, green and blue values and (using the default 0.5) if the highest colour value is greater than half of 255, it changes the pixel to white, otherwise it is turned black.
In the applet above we have added a method, to apply the threshold filter. This method is called, with an increased threshold level, each time the draw method is entered. The image therefore appears to get filled in with black as the threshold level is increased.
After the filter has been applied the pixels array is used in 3 for loops to change the colour of the pixels in a different quadrant of the display screen. The first quadrant's pixels are not changed.
If you reload this page the colours are randomly changed.

Exploring the Filter Method

2009-03-05T10:48:00.003Z

The Filter method can apply 7 different modes to an image which has been loaded into the display area.
filter(THRESHOLD);
filter(GRAY);
filter(INVERT);
filter(POSTERIZE);
filter(BLUR);
filter(OPAQUE);
filter(ERODE);
filter(DILATE);
The method has two different forms. The first as seen above just accepts the mode constant, as a parameter. The second accepts MODE and a number as an integer or float which represents the magnitude of the filter on the image.

ThresholdMode

Top-Left image has had a threshold filter of 0.1 applied.

Top-Right image has had a threshold filter of 0.5 applied.

Bottom-Left image has had a threshold filter of 0.9 applied.

Bottom-Right image has been added to the sketch folder and displayed on the screen.







Code to produce above image in Processing
int sizeWindow=700;
int fCount=0;
PImage a,b,c,d;
String fName="c28.jpg";
void setup(){
 size(sizeWindow, sizeWindow);
 a=loadImage(fName);
 b=loadImage(fName);
 c=loadImage(fName);
 d=loadImage(fName);
 //smooth();
 //frameRate(.5);
 noLoop();
}
void draw(){
image(a,0,0,width/2,height/2);

//b=get(0,0,width/2,height/2);
filter(THRESHOLD,.1);
image(b,width/2,0,width/2,height/2);

filter(THRESHOLD,.5);
image(c,0,height/2,width/2,height/2);

filter(THRESHOLD,.9);
image(c,width/2,height/2,width/2,height/2);
}

An image must be added to the sketch and renamed 'c28.jpg' or the code can be edited with the name of another image.

Chunk 79

2009-03-05T00:07:00.002Z

I have been assigned to do Chunk 79 which looks at the filter function in Processing. This should be quite a challenging assignment for me!
I mentioned before I help out on the open source project WitchCraft. WitchCraft takes UML2 diagrams and generates a functional website, complete with content management and database. It uses many technologies including Spring and Java. The WitchCraft developers have decided to design a cutting edge medical management service called Cerebrum using WitchCraft.
Different modules will be designed to make the application a success. There will eventually be modules for medical scanning capabilities. In the meantime, it would be neat to use processing to provide an applet that can simulate this type of module. I did think of using black and white for xrays and red and blue for thermal imaging, but Ive no idea how bones in an Xray could be portrayed using filters,
Anyway I will try my best to create something presentable while working on chunk 79.

CHUNK 79
TITLE Using the filter method
DESCRIPTION This should be a gentle introduction to the filter method.
OUTCOMES

Be able to understand the function of the filter method
Be able to develop a program of no more than 120 lines using the filter method

REFERENCE Greenberg 452--459
HINT Take this gradually and build up the described program in small chunks.
PROGRAM Develop an interesting program similar to the one that you describe in the text.
My first task will be to read rhe relevant pages in the Greenberg book....

Chunk 16 Roundup

2009-03-04T13:56:00.005Z

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt; &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;Your browser does not support iframes.&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;br&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
chunk 16 applet with a window size of only 200x200

Chunk 16 has been submitted and I must say that I thoroughly enjoyed writing it. I have found the finished programs to be quite useful whenever I need a jpg or a series of images to demonstrate a concept. The kachunker is useful when I need a background for a web page etc.
The beauty of processing windows and writing code without using magic numbers is I can make a chunk 16 applet of any size and post it just about anywhere.
With the latest update of Java.Processing when a processing applet index has comments as used for Java documentation i.e. /** the applet may display functions on the page so these will have to be removed from Chunk 16.

Processing is now a new option to consider when designing web page content. I am an administrator and developer for the open source project "Witchcraft - MDA" and I used one of the examples provided in Processing to make an animated banner. The zap font was very appropriate. It seems impossible to get the applet centred and it works better with scrolling set to auto.

Chunk 16 Kachunker

The Walker applet allows a sequence of kachunked files to be traversed
The kachunker application will not work as an unsigned applet as it requires saving images to the client machine. click on the applet above to give it focus and then use up and down keys to see its kachunked files.

LaChunk

LaChunk uses Chunk16 files to produce a kaleidoscopic animation

Frilly Cogs-Using kaChunked files

2009-01-27T11:40:00.002Z

I think the cogs look better with kaChunked files. KaChunking 2 or 3 times make the frills look even lacier.

Frilly Cogs - KaChunked from Rosie Wood on Vimeo.

Frilly Cogs

2009-01-27T11:31:00.002Z

This one uses textured polgons to display an image of the screen. The octagons rotate and one of them makes a frill of the background image.
The effect reminds me of crocheted doileys ...
I would really like to be able to take the frilly part of the image and save it as a transparent gif as I think that would provide some really lovely sprites but I'm not sure how that could be achieved without using classes.

Frilly Cogs from Rosie Wood on Vimeo.

PolyChunk

2009-01-27T11:14:00.002Z

In an attempt to improve the LaChunk program, I made textured octagons and moved them to the four corners of the screen. Unfortunately, only the first one rotated properly and I think classes would be one way of correcting this. I experimented with the uncooperative code and added groups of polygons to produce this program. I think it looks better than the one I had intended to make.

PolyChunk from Rosie Wood on Vimeo.

Another Chunk 16 Add On

2009-01-10T21:12:00.009Z

Faster LaChunk from Rosie Wood on Vimeo.
LAChunk is a kaleidoscopic type application, which uses Chunk16 images (or any other images). The application has 5 images on the screen at once. One is used as the background, while the other 4 rotate around the corners.
LaChunk has been set up to use 50 images and it's image path points to the chunk16 folder in 'myWork'. Just add the statement
int fCount=0;
to the variables at the start of Chun16 and these statements at the end of the draw method, before the patternsPerPicture statement.
save("c"+fCount+".jpg");
fCount++;
if(fCount>=50)exit();
This will quickly generate 50 random images and then the program will stop. If you dont like any image, try putting it through KaChunk once and save it over the unwanted image. This allows LaChunk's images to be changed often, so it doesnt get boring.
Although I like the patterns produced by LaChunk I don't like the way the corners of the images overlap at the sides. There's probably an easy way, of making part of an image that overlaps another, transparent in Processing. The problem is that I like the way the corners meet up in the middle, so the transparency would have to only occur when there was an overlap. The image arrays and blend filters would seem to be the best way to acheive this, but I cant find much usable info on this. Another way might be to use the contains method of the java class Rectangle. I may come back to this problem later, but I've decided to see how it looks using polygons and textures.

Chunk16 - Add Ons

2009-01-07T12:06:00.008Z

Saving Chunk16 Images

Chunk 16 sometimes produces images that I really want to keep, so I added this function that saves an image when any key is pressed:
void keyPressed() {
save("_0ch16.jpg");
}
This is an event driven function and responds to a key press. Unfortunately it often doesnt save the image being viewed but copies the next one. I generally open the applications folder and have it sitting alongside the running application, that way I can see the image that has been saved. If I dont like the image, I press a key to save the next image. The path can be edited to save the image to any folder and file you like. I have named the saved file '_0ch16.jpg' as I use it in another application that uses this format. This function only ever produces one image at a time, as I dont want to waste space and have to delete files I dont want. If you want to keep an image remove it from the folder or rename it, before saving any other images.

KaChunk
I had intended to write a kaleidoscope type program for chunk 16 but I got sidetracked, hence the name 'KaChunk'.
When you want to 'KaChunk' an image add it to the kachunk folder and name it _0ch16.jpg. When you run the program it will display and save an image consisting of four smaller copies of the reuired image. pressing any key repeats the process. The following slide show demonstrates the images produced by KaChunk.
SlideShow
Walker
The Walker applicaton allows the images produced by KaChunk to be 'walked' through using the up and down keys. When the program starts it loads the original '_0ch16.jpg' file. Because this is the 'closest' you can get to the image the up key wont work until you are viewing smaller images. Use the down key to move further away and the up key to zoom in.

Chunk16 Photo Frame
This function just centres an image at the end of the draw method.

void doImage(){
imageMode(CENTER);
image(b,centre,centre);
}

I added a date function to the photo frame which toggles the display of month, date and time on or off, and pressing the p key toggles the photo.
The key presses are a bit iffy and it can take up to 3 draws to toggle. The save image function still works too so photos can be saved with a Chunk16 frame. Press any key except p or d to save a copy of what is on the screen.
The code below has to be added to Chunk16 to allow the photo frame and date functions to work. Place a photo in the path for fName and edit the fName to use your photo.

Global Variables
boolean showDate=false;
boolean showImage=true;
String IMAGE_PATH = "C:/ch16/";
String fName=IMAGE_PATH+"pic1.jpg";
PImage b=loadImage(fName);
PFont font;
String [] months={"January","February","March","April","May","June","July","August","September","October","November","December"};
int h=b.height/2;
int w=b.width/2;

Add these statements to the setup method:
font = loadFont("AccordLightSF-30.vlw");
textFont(font, 30);

Add these statements to the end of the draw method
default:
repeatShapes(round(random(5,width/2)),'4');//draws squares
}
}
if(showImage){doImage();}
if(showDate){doCalendar();}

Add these functions:
void doImage(){
imageMode(CENTER);
image(b,centre,centre);
}
void doCalendar(){
int d = day(); // Values from 1 - 31
int m = month(); // Values from 1 - 12
int y = year(); // 2003, 2004, 2005, etc.
int sec = second(); // Values from 0 - 59
int min = minute(); // Values from 0 - 59
int h = hour(); // Values from 0 - 23

String s = String.valueOf(y);
fill(255);
rect(centre,50,200,50);
fill(0);
textFont(font, 30);
//text(s,centre-25,55);
s=months[m-1]+" "+d;
text(s,centre-75,55);
fill(255);
rect(centre,height-50,200,50);
fill(0);

s = String.valueOf(h)+":"+String.valueOf(min)+":"+String.valueOf(sec);
text(s,centre-75,height-36);
}

void keyPressed() {
if (key == 'd' || key == 'D') {showDate=!showDate;}
else if (key == 'p' || key == 'P') {showImage=!showImage;}
else{
save("_0ch16.jpg");}
}

Possibilities:
Some of the KaChunk images make really good desktop backgrounds. Vista has a very neat slideshow utility, which can be used to show the images in any folder. It has various options for displaying the images including greyscale and sepia. Sometime in the future I might make a Processing application which saves 50 images to quickly make a slideshow. There would have to be an editor which allows unwanted images to be deleted and replaced....

KaChunk Code:
/*
title: KaChunk
description: random pattern generator
created: December 16, 2008
by: Rosie Wood
*/
// define Global variable values
//These are constant variables and therefore they are not changed
//by the program. Setting their value here in one place helps with maimtenance
int sizeWindow=600;
int centre=sizeWindow/2;
int xpos = centre;
int ypos = centre;
String IMAGE_PATH = "C:/Users/Rosie/Documents/processing-1.0/myWork/kaChunk/";
PImage b;
//int patternsPerPicture=round(random(2,50));

boolean [] recs=new boolean[9];

//this variable is changed frequently by the application
int interval=30;
int count;
int images=0;
String fName="_0ch16.jpg";
// set the sketch window size and background
//turn off fill so that patterns underneath can be seen
//set the rate that the screen refreshes at (found this value was best for this application?)
void setup(){
size(sizeWindow, sizeWindow);
background(0);
stroke(204, 102, 0);//colour red
noFill();
int images=1;
b=loadImage("_0ch16.jpg");
draw();}

void draw(){
b=loadImage(fName);
//if(images==0){
//image(b,0,0);}
//else{
image(b,0,0,width/2,width/2);
image(b,width/2,0,width/2,width/2);
image(b,0,width/2,width/2,width/2);
image(b,width/2,width/2,width/2,width/2);
// }
}

void keyPressed() {
images++;
fName="_"+images+"ch16.jpg";
save(fName);
}

Walker Code:

int sizeWindow=600;
int centre=sizeWindow/2;
int xpos = centre;
int ypos = centre;
int images=256;
int count=0;
//Change this to your path!
String IMAGE_PATH = "C:/Users/USERNAME/Documents/Processing/walker/data/";
PImage b;
String fName="_0ch16.jpg";
//String []fNames=new String[13];

void setup(){
size(sizeWindow, sizeWindow,P3D);
background(0);
noFill();
//findMaxPOW();
//frameRate(.2);

b=loadImage("_0ch16.jpg");
draw();

}
void draw(){

// b=loadImage(IMAGE_PATH+"_"+images+"ch16.jpg");
image(b,0,0,width,width);
}

void keyPressed() {
if(keyCode==DOWN){
if(count<12){ count="12;}}" count="0;" fname="_" b="">

Chunk16 - Overview

2008-12-21T18:49:00.010Z

In Processing the draw function will loop until the program is stopped. When the application reaches the end of draw, any work done in the method is copied to the screen and then the draw method is entered again. The amount of patterns to draw for each pass through of draw is controlled by a for loop. Inside this loop are 9 case statements, which are controlled by the 'design' switch. The design switch is a random number between 1 and 9 inclusive.
Each case statement uses different functions to draw it's own pattern.

Case 1 - Draws circles while the interval variable is less than the width of the screen, interval is incremented by a random number with each iteration of the while loop. Uses drawCircles(gap) method.
Case 2 - Uses the drawCircles(gap) method to draw a random amount of circles, depending on the gap.
Case 3 - Draws circles while the interval variable is less than the width of the screen, interval is incremented by 20 with each iteration of the while loop. Uses the drawCircle2(diameter) method.
Case 4 - Draws circles while the interval variable is less than the width of the screen, interval is incremented by 20 with each iteration of the while loop. Uses the drawCircle2(diameter) method.

Using only the first 5 cases produces circles that contain variable moires. This is interesting for a short while but it soon gets a bit boring. After carrying out the modifications some cases use the repeatShapes function and the patterns produced are slightly different.

case 5: The doLines function draws lines diagonally using a for loop but sometimes it doesn't Iook very symmetrical.

In the standalone program the doLines function has been improved and leaves a randomized gap, before and after each iteration of the for loop.

case6: Here the drawCircle2 function is called while Fill is used to colour in the circles. NoFill is used to turn off fill after the function has completed. The effect can be changed by changing colours less frequently, or using the alpha parameter in color().

The drawSectors function uses arrays to draw shapes in a 3x3 grid. The grid is divided into 3 groups - corners, sides and centre. Each iteration can draw a square or circle in none, some or all of the groups.

cases 8 and 9 use the drawSquares function to draw filled or unfilled squares. When used with alpha this can create a transparent, coloures filter on top of some of the patterns.

Chunk 16 has 3 basic versions:
Before modifications:
After Modifications:
Standalone:

The standalone version has an improved doLines function but uses the same functions as used in the text. The functions have just been tweaked a little.

Merry Xmas

2008-12-15T23:00:00.004Z

Here is ny feeble attempt at a xmas tree written with Processing
Xmas Tree

Chunk 16 - With Code

2008-12-11T20:39:00.020Z

The Chunk 16 application draws a random picture to the screen about every second. It weighs in at a little over 100 lines and can be run as an applet or an application. by simply clicking on an appropriate link. There is no need to struggle with applet permissions, digitally signing jar files or setting up a jnlp file for Java WebStart.
This chapter should help clarify the basics of programming, so you are ready to tackle the special features of Processing. We will go through each topic in order of difficulty, exploring each structure as we go.

Variables
Variables declared within a code block are only usable within that block. The local variables declared on lines 33 and 34 are usable at any point within the draw function. None of the other functions are aware of their existence.

Functions
Functions are extremely useful structures that allow us to use the same code in various places by calling the function's signature. The signature of a function is its first line. If we have a function with the signature:
void drawCircles(int a)
then we call it like so:
drawCircles(400);
If there is a function with the same name but a different signature it is known as an overloaded function:
drawCircles(int a, String col)
we could call the second overloaded function like so:
drawCircles(400, "red");
Code that is repeated frequently is an indication that a function is required. The repetitive portion of the code should be moved into a function with any parameters required. This helps with code reuse, making the program easier to maintain and cuts down the program's length. Any errors/modifications are confined to one place and can be easily corrected.
A simple function is usually used to change some global variable's value. It doesn't accept any parameters and returns no value. Here is an example of a simple Function .

//function changeColour: to change the stroke to a random colour, no parameters, no return value
void changeColour(){
stroke(random(255),random(255),random(255));}

It has a void return type and empty parameter brackets.
Some functions can be passed messages, informing them of value/s to change or use. drawCircles3(int) on line 118 accepts an integer which it uses to draw a circle using the ellipses method.
A function can be used to perform some calculation and return a value. These type of functions must contain the return type in their signature. The getSW function on line 135 returns an int value which is used to set the stroke weight.

//returns integer value for stroke weight depending on framecount
136: int fc=round(random(frameRate*500)/5);
137: //case statement with default value
138: switch(fc){
139: case 1:return 1;
140: case 2:return 2;
141: case 3:return 3;
142: case 4:return 4;
143: case 5:return 5;
144: case 6:return 6;
145: case 7:return 7;
146: case 8:return 8;
147: case 9:return 9;
148: default :return round(random(1,4));}}


Some functions can also accept parameters and return a value.
As well as user defined functions there are also inbuilt functions:
The size function accepts two integers which are used to set the size of the display window.
The rect(posx, posy, width, height) function accepts four parameters, which it uses to draw a rectangle.
The random function is an overloaded function because it can accept either one or two parameters and can return a float or an integer. In chunk 16 we mostly use integers so we need to round down any floats. Examples of using round(random(int, int)) can be found in many places in Chunk 16; as it outputs randomized patterns, by varying the values of stroke width, colour, height. shapes to use, width, interval and patternsPerPicture.

Code Blocks and the if statement
If there were no loops in our code, then our
programs wouldn't last very long, or they would
have to contain a huge amount of repetitive code.
Looping structures all consist of the same basic
format. A conditional statement followed by the
block of code to repeat.
The if block isn't really a looping construct, but as
it follows the same type of format we will discuss it
here.
The basic form of an if statement is as follows:

int r= round(random(1,4));
rectMode(RADIUS);
if(r==1){
noStroke();
rectMode(CENTER);
}

The functionality of an if block can be extended
by adding an else block:

else{

diameter=diameter/20;

stroke(round(random(255)),round(random(255)),round(random(255)),round(random(255)));

}

It can be even further extended with else if blocks.

void drawSquares(int diameter){
98: int r= round(random(1,4));
99: rectMode(RADIUS);
100: //if/if else/else block
101: if(r==1){
102: noStroke();
103: rectMode(CENTER);
104: }
105: else if(r==2){
106: diameter=diameter/20;
107: }
108: else if(r==3){
109: changeColour();
110: }
111: else{
112: diameter=diameter/20;
113: stroke(round(random(255)),round(random(255)),round(random(255)),round(random(255)));
114: }
116: rect(xpos,ypos,diameter,diameter);
117:}

The else and else if blocks cant be used on their own and must be preceeded by an if statement.
Examples of using if, else if and else consructs are on lines 36 and line 124.

While Loops

while blocks allow us to repeat a section of code until a condition or conditions become true or false. The opening clause contains the condition and this is followed by a statement block. Statement blocks, in looping structures, are always enclosed by curly brackets, unless there is only one such statement. Sometimes a while statement is used to increment a simple counter.
Here the loop is repeated 10 times and prints out the numbers 0-9.

Int count=0;
while(count 10){

This while loop calls the getInput function until the value of input is equal to the value of valid.

while(input!=valid)input=getInput();
Examples of while loops are on lines: 42, 51 and 57.
39: design=round(random(1,9)); //a random number for which design to use in the switch
40: switch(design){
41: case 1:
42: while(interval
43: drawCircle2(interval-round(random(40,width/2)));//call function drawCircle2 with a random parameter
44: interval+=round(random(3,70)); }
45: break;
46: case 2:
47: drawCircles(round(random(20,round(random(1,50))))); //call the drawCircles function
48: break;
49: case 3:
50: strokeWeight(getSW());//set the strokewright to the number returned by the getSW function
51: while(interval
52: drawCircle2(interval-round(random(1,width/2)));//use the drawCircle2 function
53: interval+=round(random(1,width/2));}
54: break;
55: case 4:
56: strokeWeight(getSW());
57: while(interval
58: drawCircle3(interval-round(random(2,width/4)));
59: interval+=round(random(1,30));}
60: break;

The draw method has a lot of while methods that seem to be performing a similar function.
A do while loop is very much like an upside down while loop. Do while loops are used when we need a block of code to execute at least once. This means that the statement block, is executed once, before the conditional is checked.
The layout of a do while loop has the following structure:
We haven't used a do while loop but it would be simple to implement if needed:
do{
do this statement//any amount of statements can be repeated in a statement block
do that statement
}
while(condition)

do{
drawCircle();
drawSquare();
}
while(count ,,,,

For Loops

The for loop allows us to specify the number of times a code block will repeat. We use an int to state the amount of iterations. A for loop takes a start value, an exit loop conditional clause and the amount the looping integer will be changed by. For loops can be incremented or decremented.
It sounds a lot more complex than it is in practice!

for(int n=0;n==10;n++) //starts at 0 - stops at 10 - increments by 1
{ //code block to be repeated is contained within curly brackets
function1(n);//performs some operation
a=+n; //performs some other operation (can contain many statements)
} // for loop ends 

The statement block performs some operation/s until the exit condition is met.
In this example the integer is declared and initialised within the loop, making the integers scope local in the loop. However the integer can be declared elsewhere, thus changing its scope.
int n;
for (n=10;n <= 100;n=n+10){ 
function1(n); } 
println("number's final value: "+n); 
We use a for loop to control how many patterns are used to make a picture:

for(count=0;count
a great many statements to repeat!}

As long as count's value, is less than patternsPerPicture the statements in the for loop will execute. Each time the loop is repeated the value of n is increased by one. If we changed the loop to start at one, then we would need to change the conditional to count<=patternsPerPicture+1; When the for loop is finished the value of patternsPerPicture is changed to a random number between 2 and 50, the variables count and design are reset to zero before the for loop is entered again. Another example of the for loop can be seen in the drawCircles(int) function. Here the value of n is increased by the gap parameter. This for loop stops at a random number between the centre and edge of the display window.

Switch Blocks
Another branching structure uses a switch to determine which block of code to run. In Java the switch value must be an integer, a byte, a short, char or enumerated type.
Its basic outline follows this pattern:
switch(int){
case 1:
statements;
break;
case 2:
case 3:
statements;
break;
case 4:
statements;
return(someValue);
case 9:
case 5:
default:
statements;
}
In this example, if the switch statement has a value of 1, 3, or 4 then the statements in the code blocks for 1, 3 or 4 will execute. To stop them continuing and executing the code in the other cases, break is used to exit the switch. In the case of the switch having a value of 4, the loop is exited by returning a value. break and return allow the switch block to be exited cleanly.
If switch has a value of 2 it doesn't have a code block of its own, so it executes the case 3 code block before exiting with break.
If the switch has a value of 5, 9 or some number that doesn't have a case statement then the default case will be carried out before the block is exited.
In chunk 16 we have a large case statement (Line 40) which has cases for switch values of 1-9.
The design variable used in the switch is a random number between 1 and 9 inclusive.
In this section we will make chunk 16 more maintainable.
Firstly, it would be better if the pattern always started with a plain black background! Remove the statement on line 36 and add background(0) at line 35:
We can remove the code in case 5 to its own function(line 63). Lets try omitting the break statement so the lines function is always covered up by the pattern in case 6.
Much better, we will leave lines in now!
case 5: //lovely lines!
doLines();
case 6:
...
Place the doLines function with the other functions
void doLines(){
strokeWeight(getSW());
for(int b=1;b
int down=round(random(width/2));
int across=round(random(width/2));
line(xpos,ypos,across-b,down-b);
line(xpos,ypos,across+b+xpos,down-b);
line(xpos,ypos,across-b,width-down+b);
line(xpos,ypos,across+b+xpos,width-down+b);}}
Looking at our case statements we can see that cases 1,3,4,6,7 and 9 all use duplicate code. Our switch block would be much neater and easier to maintain, if we could encapsulate duplications in a function.
We will move case 1's code to a function called repeatShapes and place it with the other functions
case 1:
repeatShapes();
break;
The only difference between case 1 and case 3 is the interval variable. We can accommodate this by passing it as a parameter to the function.
It is now possible to remove all the while loops that use the drawCircles2 function with the new function. We still have while loops, that use the drawSquares and drawCircle3 functions. Lets deal with those cases too.
void repeatShapes(){
while(interval
drawCircle2(interval-round(random(40,width/2)));
interval+=round(random(3,70)); }}
We can place a noFill() statement to the start of the for loop and remove all noFill() statements from the switch block.
If the case that makes filled circles didn't change colour so often, we might see some more interesting shapes created.
By adjusting the repeatShapes function and removing some repetitive code from the case statements, our switch block now looks like this:
switch(design){
case 1:
repeatShapes(round(random(3,70)),'2');
break;
case 2:
drawCircles(round(random(20,round(random(1,50)))));
break;
case 3:
repeatShapes(round(random(1,width/2)),'2');
break;
case 4:
repeatShapes(width-round(random(2,width/4)),'3');

break;
case 5: //lovely lines!
doLines();
case 6:
repeatShapes(round(random(2,200)),'5');
break;
case 7:
repeatShapes(round(random(1,40)),'2');
break;
case 8:
default:
repeatShapes(width-round(random(1,width/2)),'4');
}
The one remaining change we could attempt is to do something about the cases where large filled shapes are drawn over the top of our funky patterns. Later in the book, we will learn how to use transparent colours, so for the moment lets just leave our switch statement as it is.
Examine the switch block in the getSW function, you should notice something strange... The whole switch block can be replaced by one statement!
The getSW function now looks like this:
int getSW(){
int fc=round(random(frameRate*500)/5);
return fc%10;
}
Our code is now much leaner and easier to maintain and this will help us when we start the next modification which will involve arrays.

Additional Function - inplementing an Array
An array can be thought of as a container, for a collection of objects, of the same type. This container, has an index, so that each object it holds can be fetched. An array may be declared like this:
int [] midxy;
Arrays can be filled in a variety of ways. The capacity of the array can be set when it is declared and initialized:
boolean [] recs=new boolean[9];
It can also be initialized by listing its members:
int [] midxy={100,300,500};
A quick way of populating an array is to use a for loop:
for(int r=0;r <>
recs[r]=false;}

The array recs contains 9 boolean values and we are going to use it to design a new function.
So far, all our patterns are positioned around the centre point of the screen.
We are going to use the midxy array to draw out a symetrical pattern,
in a grid like the tic tac toe game.
Copy the following code into processing and run it.

int [] midxy;

boolean [] recs;
void setup(){
size(600, 600);
drawA();}

void drawA(){
rectMode(CENTER);
recs=new boolean[9];
resetRecs();
int [] midxy={(width/3)/2, (width/3)/2+width/3, (width/3)/2+width/3*2 };
for(int n=0;n   ,,,,,

As you can see this is a quick sketch of our new shape function. 
Experiment by commenting and uncommenting the code between the asterisks. 
The statement after the last line of asterisks, is drawing the square at the centre of the screen. 
It is using the value in midxy[1] as its centre point. 
Change one of the first 2 values in the rect function to a zero. Change both values to 2. 
See if you can place the square in each position in the grid. 
It would get tedious typing values like (width/3)/2+width/3*2 so we will put them in an array.
The values in midxy will find the centre of each of the 9 squares no matter what the size of the
display window is. (But it must be a square!) Try changing the size of the display window in the
setup method.
In order to keep our pattern symmetrical we are going to place the 9 squares into 3 groups.
There will be a corner group, a side group and the central square.
The 9 squares don't all have to be used in the pattern, so we are going to use boolean values,
to decide whether the squares are used. A boolean value can be true or false but not null.










Try to make a new function that uses the recs array to help manage drawing the 9 squares in
our grid. Call the function repeatSectors or any name you like.
We already have a function for populating the recs array with default values at the start of the
function.
Use random numbers to decide whether each of the 3 groups are populated.
Write some code that sets the value of the relevant array position to true if a shape will be
drawn there.
Write some code that uses the recs array to control where shapes will be drawn.
Use the rect(int,int,int,int)function to begin with.
Place a call to the repeatSectors function in the draw function.
Add some randomisation to make the patterns vary as much as possible.
If you get stuck use the reference section in Processing, Google what you are trying to do or
check the solution provided at the end of this section.
This is a very challenging function to write and could take a good few hours to solve but its
early days yet and this will get you thinking like a programmer.
When your super duper function is completed you can use your artistic flair to make it dazzling!

Author's Function
173:void drawSectors(){
174: resetRecs();
175: int [] midxy={(width/3)/2, (width/3)/2+width/3, (width/3)/2+width/3*2 };
177: //decide on groups to use
178: int corners=round(random(0,1));
179: if(corners==1){
180: recs[0]=recs[2]=recs[6]=recs[8]=true;}
182: int sides=round(random(0,1));
183: if(sides==1){
184: recs[1]=recs[3]=recs[5]=recs[7]=true;}
186: int centre=round(random(0,1));
187: if(centre==1){
193: rectMode(CENTER);
194: ellipseMode(CENTER);
195: int f=round(random(1,5));
196: if(f==1){
197: fill(random(255),random(255),random(255));}
198: else{
199: getSW();
200: changeColour();}
202: int d=round(random(width/3));
203: int sType=round(random(2));
204: for(int n=0;n<9;n++){ mod="n%3;" down="0;">5)down=2;
209: else if (n>2){down=1;}
211: if(sType==1){
212: rect(midxy[mod], midxy[down], d, d); }
213: else{
214: ellipse(midxy[mod], midxy[down], d, d);}}}

Chunk16 Code Removed - Second Draft

2008-12-09T16:11:00.004Z

2358 words

The Chunk 16 application draws a random picture to the screen about every second. It weighs in at a little over 100 lines and can be run as an applet or an application by simply clicking on an appropriate link. There is no need to struggle with applet permissions, digitally signing jar files or setting up a jnlp file for Java WebStart.
This chapter should help clarify the basics of programming, so you are ready to tackle the special features of Processing. We will go through each topic in order of difficulty, exploring each structure as we go.

Variables declared within a code block are only usable within that block. The local variables declared on lines 33 and 34 are usable at any point within the draw function. None of the other functions are aware of their existence.
Functions are extremely useful structures that allow us to use the same code in various places by calling the function's signature. The signature of a function is its first line. If we have a function with the signature:
void drawCircles(int a)
then we call it like so:
drawCircles(400);
If there is a function with the same name but a different signature it is known as an overloaded function:
drawCircles(int a, String col)
we could call the second overloaded function like so:
drawCircles(400, "red");

Code that is repeated frequently is an indication that a function is required. The repetitive portion of the code should be moved into a function with any parameters required. This helps with code reuse, making the program easier to maintain and cuts down the program's length. Any errors/modifications are confined to one place and can be easily corrected.
A simple function is usually used to change some global variable's value. It doesn't accept any parameters and returns no value. The changeColour() function line 105 provides us with an example. It has a void return type and empty parameter brackets.
Some functions can be passed messages, informing them of value/s to change or use. drawCircles3(int) on line 118 accepts an integer which it uses to draw a circle using the ellipses method.
A function can be used to perform some calculation and return a value. These type of functions must contain the return type in their signature. The getSW function on line 135 returns an int value which can be used to set the stroke weight.
A function can also both accept parameters and return a value. We havent used this type of user defined function in chunk 16.
As well as user defined functions there are also inbuilt functions:
The size function accepts two integers which are used to set the size of the display window.
The rect(int, int, int, int) function accepts four parameters which it uses to draw a rectangle.
The random function is an overloaded function because it can accept either one or two parameters and can return a float or an integer. In chunk 16 we mostly use integers so we need to round down any floats. Examples of using round(random(int, int)) can be found in many places in Chunk 16 as it outputs randomized patterns by varying the values of stroke width, colour, height. shapes to use, width, interval and patternsPerPicture.

If there were no loops in our code, then our programs wouldn't last long, or they would have to contain a huge amount of repetitive code.
Looping structures all consist of the same basic format. A conditional statement followed by the block of code to repeat.
The if block isnt really a looping construct but as it follows the same type of format we will discuss it here.
The basic form of an if statement is as follows:

The functionality of an if block can be extended by adding an else block:

The if block can be even further extended with else if blocks.
The else and else if blocks cant be used on their own and must be proceeded by an if statement.
Examples of using if, else if and else consructs are on lines 36 and line 124.

while blocks allow us to repeat a section of code until a condition or conditions become true or false. The opening clause contains the condition and this is followed by a statement block. Statement blocks, in looping structures, are always enclosed by curly brackets, unless there is only one such statement. Sometimes a while statement is used to increment a simple counter.

Here the loop is repeated 10 times.

This while loop calls the getInput function until the value of input is equal to the value of valid.
Examples of while loops are on lines: 42, 51 and 57.
The draw method has a lot of while methods that seem to be performing a similar function.

A do while loop is very much like an upside down while loop. Do while loops are used when we need a block of code to execute at least once. This means that the statement block, is executed once, before the conditional is checked.
The layout of a do while loop has the following structure:

We haven't used a do while loop but it would be simpleto implement if needed.

The for loop allows us to specify the number of times a code block will repeat. We use an int to state the amount of iterations. A for loop takes a start value, an exit loop conditional clause and the amount the looping integer will be changed by. For loops can be incremented or decremented.
It sounds a lot more complex than it is in practice!

The statement block performs some operation/s until the exit condition is met.
In this example the integer is declared and initialised within the loop, making the integers scope local in the loop. However the integer can be declared elsewhere, thus changing its scope.

We use a for loop to control how many patterns are used to make a picture:

As long as count's value, is less than the constant, patternsPerPicture the statements in the for loop will execute. Each time the loop is repeated the value of n is increased by one. If we changed the loop to start at one, then we would need to change the conditional to count<=patternsPerPicture+1;
When the for loop is finished the value of patternsPerPicture is changed to a random number between 2 and 50, the variables count and design are reset to zero before the for loop is entered again.

Another example of the for loop can be seen in the drawCircles(int) function.
Here the value of n is increased by the gap parameter. This for loop stops at a random number between the centre and edge of the display window.

Another branching structure uses a switch to determine which block of code to run. In Java the switch value must be an integer, a byte, a short, char or enumerated type.
Its basic outline follows this pattern:

**************************
In this example, if the switch statement has a value of 1, 3, or 4 then the statements in the code blocks for 1, 2 or 4 will execute. To stop them executing the code in the other cases break is used to exit the switch. In the case of the switch having a value of 4 the loop is exited by returning a value. break and return allow the switch block to be exited cleanly.
If switch has a value of 2 it doesnt have a code block of its own and continues so it executes the case 3 code block before exiting with break.
If the switch has a value of 5, 9 or some number that doesnt have a case statement then the default case will carried out before the block is exited.
In chunk 16 we have a large case statement (Line 40) which has cases for switch values of 1-9.
The design variable used in the switch is a random number between 1 and 9 inclusive.
In this section we will make chunk 16 more maintainable.
Firstly, it would be better if the pattern always started with a plain black background! Remove the statement on line 36 and add background(0) at line 35:

We can remove the line code in case 5 to its own function(line 63). Lets try omitting the break statement so the lines function is always covered up by the pattern in case 6.
Much better, we will leave lines in now!

Place the doLines function with the other functions

Looking at our case statements we can see that cases 1,3,4,6,7 and 9 all use duplicate code. Our switch block would be much neater and easier to maintain if we could encapsulate duplications in a function.
We will move case 1's code to a function called repeat shapes and place it with the other functions
******
The only difference between case 1 and case 3 is the interval variable. We can accomodate this by passing it as a parameter to the function.
It is now possible to remove all the while loops that use the drawCircles2 function with the new function. We still have while loops, that use the drawSquares and drawCircle3 functions. Lets deal with those cases too.
******
We can place a noFill() statement to the start of the for loop and remove all noFill() statements from the switch block.
If the case that makes filled circles didnt change colour so often we might see some more interesting shapes created. I added a 50/50 chance of this happening, to the else statement in the drawShapes method. See if you can work out how this works in the repeatShapes function.
By adjusting the repeatShapes function and removing some repetitive code from the case statements, our switch block now looks like this:
******
The one remaining change we could attempt is to do something about the cases where large filled shapes are drawn over the top of our funky patterns. Later in the book, we will learn how to use transparent colours, so for the moment lets leave our switch statement as it is.
Examine the switch block in the getSW function, you should notice something strange... The whole switch block can be replaced by one statement!
The getSW function now looks like this:
******
Our code is now much leaner and easier to maintain and this will help us when we start the next modification which will involve arrays.

An array is a can be thought of as a container for a collection of objects of the same type. This container, has an index, so that each object it holds, can be easily fetched. To declare an array:
int [] midxy;
arrays can be filled in a variety of ways. The capacity of the array can be set when it is declared and initialized:
boolean [] recs=new boolean[9];
It can also be initialized by listing its members:
int [] midxy={100,300,500};
A quick way of populating an array is to use a for loop:
The array recs contains 9 boolean values and we are going to use it to design a new function. So far all our patterns are positioned around the centre point of the screen. We are going to use the recs array to draw out a symetrical pattern, in a grid like the tic tac toe game.
Copy the following code into processing and run it.
*********
As you can see this is a quick sketch of our new shape function. Experiment by commenting and uncommenting the code between the asterisks. The statement after the last line of asterisks is drawing the square at the centre of the screen. It is using the value in midxy[1] as its centre point. Change one of the first 2 values in the rect function to a zero. Change both values to 2. See if you can place the square in each position in the grid. It would get tedious typing values like (width/3)/2+width/3*2 so we'll put them in an array.
The values in midxy will find the centre of each of the 9 squares no matter what the size of the display window is. (But it must be a square!) Try changing the size of the display window in the setup method.
In order to keep our pattern symmetrical we are going to place the 9 squares into 3 groups. There will be a corner group, a side group and the central square. The 9 squares dont all have to be used in the pattern, so we are going to use boolean values, to decide whether the squares are used. A boolean value can be true or false but not null.
Our first step will be to move the code from our experiment into the chunk 16 program. If we type /* */ we can simply paste in all the experimental code between the asterisks and Processing will ignore it.
Try to make a new function that uses the recs array to help manage drawing the 9 squares in our grid. Call the function drawSectors or any name you like.
We already have a function for populating the recs array with default values at the start of the function.
Use random numbers to decide whether each of the 3 groups are populated.
Write some code that sets the value of the relevant array position to true if a shape will be drawn there.
Write some code that uses the recs array to control where shapes will be drawn.
Use the rect(int,int,int,int)function to begin with.
Place a call to the repeatSectors function somewhere in the switch block of the draw function.
Add some randomisation to make the patterns vary as much as possible.
if you get stuck use the reference section in Processing, google what you are trying to do or check the solution provided at the end of this section.
This is a very challenging function to write and could take a good few hours to solve but its early days yet and this will get you thinking like a programmer. When your super duper function is completed you can use your artistic flair to make it dazzling!
************************
void drawSectors(){
...
}
************************

Uncommented Standalone Code

2008-12-09T16:00:00.005Z

I'm a bit bamboozled about the requirements for the first and second programs. After adding the array function the code is well over 100 lines but I think I could cut down the amount of lines by cramping the code a bit.
Does anyone know if 100 lines is a fixed limit?

  1:/*
  2: title: Funky Chunk 16
  3: description: random pattern generator
  4: created: December 2, 2008
  5: by: Rosie Wood
  6: */
  7:// define Global variable values
  8://These are constant variables and therefore they are not changed
  9://by the program. Setting their value here in one place helps with maimtenance
 10:int sizeWindow=600;
 11:int centre=sizeWindow/2;
 12:int xpos = centre;
 13:int ypos = centre;
 14:int patternsPerPicture=round(random(2,50));
 15:
 16:boolean [] recs=new boolean[9];
 17:
 18://this variable is changed frequently by the application
 19:int interval=30;
 20:int count;
 21:// set the sketch window size and background
 22://turn off fill so that patterns underneath can be seen
 23://set the rate that the screen refreshes at (found this value was best for this application?)
 24:void setup(){
 25:  size(sizeWindow, sizeWindow);
 26:  background(0);
 27:  stroke(204, 102, 0);//colour red
 28:  noFill();
 29:  frameRate(.2);
 30:  draw();
 31:}
 32:
 33:void draw(){
 34:  //local variables
 35:  count=0;
 36:  int design=0;
 37:  background(0); 
 38:  for(count=0;count<patternsPerPicture;count++){
 39:    strokeWeight(getSW());//set the strokewright to the number returned by the getSW function
 40:    noFill();
 41:    interval=round(random(5,70));//increment by interval in while loops
 42:    changeColour();
 43:    design=round(random(1,9)); //a random numver for which design to use in the switch
 44:    switch(design){
 45:    case 1:     
 46:      repeatShapes(round(random(3,70)),'2');
 47:      break;
 48:    case 2:                      
 49:      drawCircles(round(random(20,round(random(1,50)))));     //call the drawCircles function
 50:      break;
 51:    case 3:
 52:      repeatShapes(round(random(1,width/2)),'2');//use the drawCircle2 function    
 53:      break;
 54:    case 4:
 55:      repeatShapes(width-round(random(2,width/4)),'3');
 56:      break;
 57:    case 5:
 58:      if(round(random(4))==2){     
 59:      doLines();}
 60:      else{drawSectors();}   
 61:    case 6: 
 62:      repeatShapes(interval,'5');
 63:      break;
 64:    case 7:              
 65:      repeatShapes(round(random(1,120)),'2');
 66:      break;
 67:    case 8:
 68:    default:
 69:      repeatShapes(width-round(random(1,width/2)),'4');//draws unfilled squares           
 70:    }
 71:  }
 72:  patternsPerPicture=round(random(2,50));//change number of patterns for next picture
 73:}
 74:
 75:/**function changeColour: to change the stroke colour no parameters no return value*/
 76:void changeColour(){
 77:  stroke(random(255),random(255),random(255));
 78:}
 79:
 80://function draws circles accepts parameter gap and uses it to increment loop untill    
 81:void drawCircles(int gap){
 82:  for(int n=0;n<round(random(width/2,width));n+=gap){
 83:    drawCircle(n);
 84:  }
 85:}
 86:
 87:/**no parameters, no return valur*/
 88:void drawCircle2(int diameter){
 89:    ellipse(xpos, ypos, diameter-random(5,diameter), diameter-random(5,diameter));
 90:}
 91:
 92://accepts 1 parameter
 93:void drawCircle3(int diameter){
 94:  ellipse(xpos, ypos, (diameter*random(5,diameter))/(random(5,diameter)*19), (diameter*random(5,diameter))/(random(5,diameter)*19) );
 95:}
 96:
 97:void drawSquares(int diameter){
 98:  int r= round(random(1,4));
 99:  rectMode(RADIUS);
100:  //if/if else/else block
101:  if(r==1){
102:    noStroke();
103:    rectMode(CENTER);
104:  }
105:  else if(r==2){
106:    diameter=diameter/20;
107:  }
108:  else if(r==3){
109:    changeColour();
110:  }
111:  else{
112:    diameter=diameter/20;
113:    stroke(round(random(255)),round(random(255)),round(random(255)),round(random(255)));
114:  }
115:
116:  rect(xpos,ypos,diameter,diameter);
117:}
118:
119://returns integer valur for stroke weight depending on framecount
120:int getSW(){
121:  int fc=round(random(frameRate*500)/5);
122:  return fc%10;
123:  }
124:
125:void repeatShapes(int gap, char c){
126:  char shape=c;            
127:  int interval=gap;
128:  while(interval<width){//while intervel is less than the width of the window
129:    if(shape=='1')drawCircles(interval);
130:    else if(shape=='2'){
131:      drawCircle2(interval);
132:    }//call function drawCircle2 with a random parameter
133:    else if(shape=='3'){
134:      drawCircle3(interval);
135:    }
136:    else if(shape=='4'){
137:      int r=round(random(1,5));
138:      if(r==1){
139:        noStroke();
140:        changeColour();
141:        fill(random(255),random(255),random(255));}
142:      drawSquares(round(interval));
143:    }
144:    else{
145:      int r=round(random(1,5));
146:      if(r==1){
147:        noStroke(); 
148:        fill(random(255),random(255),random(255));} 
149:        drawCircle2(interval/4);     }
150:    interval+=gap;}}
151:
152:void doLines(){
153:  strokeWeight(getSW());
154:  for(int b=1;b<width;b=b+round(random(1,20))){
155:    int down=round(random(width/2));
156:    int across=round(random(width/2));
157:    line(xpos,ypos,across-b,down-b);
158:    line(xpos,ypos,across+b+xpos,down-b);
159:    line(xpos,ypos,across-b,width-down+b);
160:    line(xpos,ypos,across+b+xpos,width-down+b);}}
161:
162:void drawCircle(int diameter){
163:  ellipse(xpos, ypos, diameter-interval,  diameter);
164:  ellipse(xpos, ypos, diameter,  diameter-interval);
165:  ellipse(xpos, ypos, diameter,  diameter);
166:}
167:
168:void resetRecs(){
169:   for(int r=0;r<9;r++){
170:    recs[r]=false;}}
171:
172:
173:void drawSectors(){
174:    resetRecs();
175:   int [] midxy={(width/3)/2, (width/3)/2+width/3, (width/3)/2+width/3*2 };
176:
177:  //decide on groups to use
178:  int corners=round(random(0,1));
179:  if(corners==1){
180:  recs[0]=recs[2]=recs[6]=recs[8]=true;
181:  }
182:  int sides=round(random(0,1));
183:  if(sides==1){
184:  recs[1]=recs[3]=recs[5]=recs[7]=true;
185:  }
186:  int centre=round(random(0,1));
187:  if(centre==1){
188:  recs[4]=true;
189:  }
190:  for(int r=0;r<9;r++){
191:  println("num"+r+"rec? "+recs[r]);
192:  }
193:  rectMode(CENTER);
194:  ellipseMode(CENTER);
195:     int f=round(random(1,5));
196:     if(f==1){
197:    fill(random(255),random(255),random(255));}
198:    else{
199:      getSW();
200:      changeColour();
201:    }
202:    int d=round(random(width/3));
203:    int sType=round(random(2));
204:    for(int n=0;n<9;n++){
205:      if(recs[n]==true){
206:        int mod=n%3;
207:        int down=0;
208:        if(n>5)down=2;
209:        else if (n>2){down=1;}
210:    
211:        if(sType==1){
212:        rect(midxy[mod], midxy[down], d, d); }
213:        else{
214:        ellipse(midxy[mod], midxy[down], d, d);}
215:        println("mod: "+mod);
216:        println("down: "+down);
217:        println("across: "+midxy[mod]);
218:        println("down: "+midxy[down]);
219:    
220:      }
221:        }
222:
223:
224:}

Arrays and Modification - First Draft

2008-12-09T15:14:00.003Z

An array can be thought of as a container for a collection of objects of the same type. This container, has an index, so that each object it holds, can be fetched. We declare an array like this:
int [] midxy;
it can be filled in a variety of ways and its capacity can be set when it is declared and initialized:
boolean [] recs=new boolean[9];
It can also be initialized by listing its members:
int [] midxy={100, 300, 500};
A quick way of populating an array is to use a for loop:
for(int r=0;r < 9;r++){
recs[r]=false;}
The array recs contains 9 boolean values and we are going to use it to design a new function for our pattern generator. So far all our patterns are positioned around the centre point of the screen, as this is an easy way of making sure the patterns are symetrical. We are going to use the recs array to draw out a symetrical pattern in a grid, like the tic tac toe game.
Copy the following code into processing and run it.
int [] midxy;
boolean [] recs;
void setup(){
size(600, 600);
drawA();}

void drawA(){
rectMode(CENTER);
recs=new boolean[9];
resetRecs();
int [] midxy={(width/3)/2, (width/3)/2+width/3, (width/3)/2+width/3*2 };
for(int n=0;n < 3;n++){
for(int i=0;i < 3;i++){
rect(midxy[i], midxy[n], width/3, width/3);}}
//*************************************************
fill(random(255),random(255),random(255));
//stroke(random(255),random(255),random(255));
strokeWeight(20);
//*************************************************
rect(midxy[1], midxy[1], width/3, width/3);
//println("empty? "+midxy[0]==null);}

void resetRecs(){
for(int r=0;r < 9;r++){
recs[r]=false;
println(""+recs[r]);
}
println("size of recs? "+recs.length);
}
As you can see this is a quick sketch of our new shape function. Experiment by commenting and uncommenting the code between the lines of asterisks and changing the value of the stroke weight. The statement after the last line of asterisks is drawing the square at the centre of the screen. It is using the value in midxy[1] for its centre of origin. Change one of the first 2 values in the rect function to a zero. Change both values to 2 and see if you can place the square in each position in the grid. It would get quite tedious typing values like (width/3)/2+width/3*2 so we have placed them in an array.
The values in midxy will find the centre of each of the 9 squares no matter what the size of the display window is. (But it must be a square!) Try changing the size of the display window in the setup method.
In order to keep our pattern symmetrical we are going to place the 9 squares into 3 groups. There will be a corner group, a side group and the central square on its own. The 9 squares dont all have to be used in the pattern, so we are going to use boolean values, to indicate whether the squares are used or not. A boolean value can be true or false and we will do the equivalent of tossing a coin to decide.
Our first step will be to move the code from our experiment into the chunk 16 program. If we type /* */ we can simply paste in all the experimental code between the asterisks and Processing will ignore it.
Try to make a new function that uses the recs array to help manage drawing the 9 squares in our grid. Call the function drawSectors or any name you like.
We already have a function for populating the recs array with default values at the start of the function.
Use random numbers to decide whether each of the 3 groups are populated.
Write some code that sets the value of the relevant array position to true if a shape will be drawn there.
Write some code that uses the recs array to control where shapes will be drawn.
Use the rect(int,int,int,int)function to begin with.
Place a call to the repeatSectors function somewhere in the switch block of the draw function.
Add some randomisation to make the patterns vary as much as possible.
if you get stuck use the reference section in Processing, Google what you are trying to do, or check the solution provided at the end of this section.
This is a very challenging function to write and could take a good few hours to solve, but its early days yet and this will get you thinking like a programmer. When your super duper function is completed you can use your artistic flair to make it dazzling!

Revised Code

2008-12-08T23:11:00.004Z

  1:int sizeWindow=600;
  2:int centre=sizeWindow/2;
  3:int xpos = centre;
  4:int ypos = centre;
  5:int patternsPerPicture=round(random(2,50));
  6:
  7:int interval=30;
  8:int count;
  9:void setup(){
 10:  size(sizeWindow, sizeWindow);
 11:  background(0);
 12:  stroke(204, 102, 0);//colour red
 13:  noFill();
 14:  frameRate(.2);
 15:  draw();}
 16:
 17:void draw(){
 18:  count=0;
 19:  int design=0;
 20:  background(0);   
 21:  for(count=0;count<patternsPerPicture;count++){
 22:    strokeWeight(getSW());//set the strokewright to the number returned by the getSW function
 23:    noFill();
 24:    interval=round(random(5,70));//increment by interval in while loops
 25:    changeColour();
 26:    design=round(random(1,9)); //a random numver for which design to use in the switch
 27:    switch(design){
 28:    case 1:       
 29:      repeatShapes(round(random(3,70)),'2');
 30:      break;
 31:    case 2:                        
 32:      drawCircles(round(random(20,round(random(1,50)))));     //call the drawCircles function
 33:      break;
 34:    case 3:
 35:      repeatShapes(round(random(1,width/2)),'2');//use the drawCircle2 function      
 36:      break;  
 37:    case 4:
 38:      repeatShapes(width-round(random(2,width/4)),'3');
 39:      break;
 40:    case 5:        
 41:      doLines();          
 42:    case 6:   
 43:      repeatShapes(interval,'5');
 44:      break;
 45:    case 7:                
 46:      repeatShapes(round(random(1,40)),'2');
 47:      break;
 48:    case 8:
 49:    default:
 50:      repeatShapes(width-round(random(1,width/2)),'4');//draws unfilled squares             
 51:    }}
 52:  patternsPerPicture=round(random(2,50));}
 53:
 54:void changeColour(){
 55:  stroke(random(255),random(255),random(255));
 56:}
 57:
 58:void drawCircles(int gap){
 59:  for(int n=0;n<round(random(width/2,width));n+=gap){  
 60:    drawCircle(n);}}
 61:
 62:void drawCircle2(int diameter){
 63:    ellipse(xpos, ypos, diameter-random(5,diameter), diameter-random(5,diameter));  }
 64:
 65:void drawCircle3(int diameter){
 66:  ellipse(xpos, ypos, (diameter*random(5,diameter))/(random(5,diameter)*19), (diameter*random(5,diameter))/(random(5,diameter)*19) );
 67:}
 68:
 69:void drawSquares(int diameter){
 70:  int r= round(random(1,4));
 71:  rectMode(RADIUS);
 72:  if(r==1){
 73:    noStroke();
 74:    rectMode(CENTER);}
 75:  else if(r==2){
 76:    diameter=diameter/20;}
 77:  else if(r==3){
 78:    changeColour();}
 79:  else{
 80:    diameter=diameter/20;
 81:    stroke(round(random(255)),round(random(255)),round(random(255)),round(random(255)));}
 82:  rect(xpos,ypos,diameter,diameter);}
 83:
 84:int getSW(){
 85:  int fc=round(random(frameRate*500)/5);
 86:  return fc%10;
 87:  }
 88:
 89:void repeatShapes(int gap, char c){
 90:  char shape=c;              
 91:  int interval=gap;
 92:  while(interval<width){//while intervel is less than the width of the window
 93:    if(shape=='1')drawCircles(interval);
 94:    else if(shape=='2'){
 95:      drawCircle2(interval);
 96:    }//call function drawCircle2 with a random parameter
 97:    else if(shape=='3'){
 98:      drawCircle3(interval);}
 99:    else if(shape=='4'){
100:      int r=round(random(1,5));
101:      if(r==1){
102:        noStroke();
103:        changeColour();
104:        fill(random(255),random(255),random(255));}
105:      drawSquares(round(interval));}
106:    else{
107:      int r=round(random(1,5));
108:      if(r==1){
109:        noStroke();   
110:        fill(random(255),random(255),random(255));}   
111:        drawCircle2(interval/4);     }
112:    interval+=gap;}}
113:
114:void doLines(){
115:  strokeWeight(getSW());
116:  for(int b=1;b<width;b=b+round(random(1,20))){
117:    int down=round(random(width/2));
118:    int across=round(random(width/2));
119:    line(xpos,ypos,across-b,down-b);
120:    line(xpos,ypos,across+b+xpos,down-b);
121:    line(xpos,ypos,across-b,width-down+b);
122:    line(xpos,ypos,across+b+xpos,width-down+b);}}
123:
124:void drawCircle(int diameter){
125:  ellipse(xpos, ypos, diameter-interval,  diameter);
126:  ellipse(xpos, ypos, diameter,  diameter-interval);
127:  ellipse(xpos, ypos, diameter,  diameter);
128:}

Switch Block - First Draft

2008-12-08T23:04:00.009Z

Our next type of code block uses a switch, to determine which block of code to run. In Java the switch value must be an integer, a byte, a short, char or enumerated type.
Its basic outline follows this pattern:

switch(int){
case 1:
statements;
break;
case 2:
case 3:
statements;
break;
case 4:
statements;
return(someValue);
case 9:
case 5:
default: statements;
}
In this example, if the switch statement has a value of 1, 3, or 4 then the statements in the case blocks for 1, 3 or 4 will execute. To stop them executing the code in the other cases, break is used to exit the switch. In the case of the switch having a value of 4 the loop is exited by returning a value. Break and return allow the switch block to be exited cleanly.
If switch has a value of 2 it doesnt have a code block of its own and continues so it executes the case 3 code block before exiting with break.
If the switch has a value of 5, 9 or some number that doesnt have a case statement then the default case will carried out before the block is exited. Notice that the order of the case statements doesnt matter, as can be seen with case 9.
Enumerated types can also be used and might be a nifty modification for chunk 16's program. We will just look at a simple example of how this could be implemented:
enum Shape{SQUARE, CIRCLE, CFILLED, SFILLED, LINE}
Shape currentShape=CFILLED;
switch(currentShape){
case CIRCLE: doThis; break;
case SQUARE: doThis; break;
case CFILLED: doThis; break;
default: println("Mot Implemented Yet!");//we add the default here //because we havent written the //code for the other cases yet
}
In chunk 16 we have a large case statement (Line 40) which has cases for switch values of 1-9.
The design variable used by the switch is a random number between 1 and 9 inclusive.
Lets try some modifications to make chunk 16 more maintainable.
We would prefer it if the pattern always starts with a plain black background! Remove the statement on line 36 and add background(0) at line 35.
So now we have:
//local variables
int count=0;
int design=0;
background(0);
for(count=0;count
at the start of the draw method.
We can remove the line code in case 5 to its own function(line 63). Lets try omitting the break statement so the lines function is always covered up by the pattern in case 6.
Wow that is much better! We will leave lines in now!

case 5: //lovely lines!
doLines();
case 6:
...
Place the doLines function with the other functions
void doLines(){
strokeWeight(getSW());
for(int b=1;b
int down=round(random(width/2));
int across=round(random(width/2));
line(xpos,ypos,across-b,down-b);
line(xpos,ypos,across+b+xpos,down-b);
line(xpos,ypos,across-b,width-down+b);
line(xpos,ypos,across+b+xpos,width-down+b);}
}
Looking at our case statements we can see that cases 1,3,4,6,7 and 9 all use some dupkicate code. Our switch block would be much neater and easier to maintain if we could encapsulate this mess in a function!
We will move case 1's code to a function to begin with...
case 1:
repeatShapes();
break;
Place the repeatShapes function with the other functions
void repeatShapes(){
while(interval
drawCircle2(interval-round(random(40,width/2)));
interval+=round(random(3,70)); }}
The code still works correctly when we run it so this change is ok
The only difference between case 1 and case 3 is the interval variable. We can accomodate this by passing it as a parameter to the repeatShapes function...
It is bow possible to remove all the while loops that use the drawCircles2 Function with the repeatShapes(gap) function. We are left with the while loops that use the drawSquares and drawCircle3 functions. Lets add a new parameter to the repeat shapes function so that we can deal with those cases too.
Right, phew we now have a very versatile repeatShapes function but(theres always a but!) the program takes about a second longer to start. We will ignore this for the moment...
We can remove the noFill() statements for the filled shape cases and replace them with a noFill() statement at the start of the for loop code block.
If the case that makes filled circles didnt change colour so often we might see some more interesting shapes created. I added a 50/50 chance of this happening, to the else statement in the drawShapes method. See if you can work out how this works in the repeatShapes function.
By tweaking and adjusting the repeatShapes function and removing some repetitive code from the case statements, our switch block now looks like this:
switch(design){
case 1:
repeatShapes(round(random(3,70)),'2');
break;
case 2:
drawCircles(round(random(20,round(random(1,50)))));
break;
case 3:
repeatShapes(round(random(1,width/2)),'2');
break;
case 4:
repeatShapes(width-round(random(2,width/4)),'3');
break;
case 5: //lovely lines!
doLines();
case 6:
repeatShapes(round(random(2,200)),'5');
break;
case 7:
repeatShapes(round(random(1,40)),'2');
break;
case 8:
default:
repeatShapes(width-round(random(1,width/2)),'4');
}
The one remaining change we could attempt is to do something about the cases where large filled shapes are drawn over the top of our funky patterns. Later in our lessons, we will learn how to use transparent colours, so for the moment lets leave our switch statement as it is.
If you examine the switch block in the getSW function, you may notice something strange... The whole switch block can be replaced by one statement!
The getSW function now looks like this:

int getSW(){
int fc=round(random(frameRate*500)/5);
return fc%10;
}
Our code is now much leaner ans easier to maintain now and this will help us when we start the next modification which will involve arrays.

For Loop - First Draft

2008-12-08T13:23:00.012Z

The for loop allows us to specify the number of times a code block will repeat. We use an int type variable to define the loop's iteration. A for loop takes a start value, an exit loop conditional clause and the amount, the looping integer will be changed by, in each iteration of the loop. For loops can be incremented or decremented as the loop is traversed.
It sounds a lot more complex than it is in practice!

for(int n=0;n==10;n++) //starts at 0 - stops at 10 - increments by 1
{ //code block to be repeated is contained within curly brackets
function1(n);//performs some operation
a=+n; //performs some other operation (can contain many statements)
} // for loop ends
The code block to be executed, need not use the integer that is used in the loop, and can instead, perform some operation, a certain number of times.
The first two statements in the first line of a for loop always end in a semi colon. The first statement initialises the integer, in this example the integer is declared and initialised within the loop, making the integers scope local in the loop. However the integer can be declared elsewhere, thus changing its scope.

int n;
for (n=10;n <= 100;n=n+10){
function1(n);
}
println("number's final value: "+n);

In this next loop the value of for's integer is decreased in each iteration
for(int n=10;n > 0;n--){
println(""+n);
}
println("Blast Off!");

Chunk 16 uses a for loop to control how many patterns are used to make a picture:
for(count=0;count < patternsPerPicture;count++){
a great many statements to repeat!}

As long as count's value, is less than the constant patternsPerPicture the statements in the for loop will execute. Each time the loop is repeated the value of n is increased by one. If we changed the loop to start at one, then we would need to change the conditional to count <=patternsPerPicture+1; When the for loop is finished the value of patternsPerPicture is changed to a random number between 2 and 50, the variables count and design are reset to zero and the for loop is entered again, with the new exit value condition. (patternsPerPicture)

Another example of the for loop can be seen in the drawCircles(int) function. Here the value of n is increased by the gap parameter, which is sent by the calling statement. So in each iteration, the drawCircle(int) method is called with n incremented by the value of gap which should produce a larger circle in each repetition of the loop. This for loop stops at a random number between the centre and edge of the display window.

do While - First Draft

2008-12-08T00:26:00.004Z

A do while loop is very much like an upside down while loop. Do while loops are not very popular and are used when we need a block of code to execute at least once. This means that the statement block is executed once before the conditional clause is checked by the program.

The layout of a do while loop has the following structure:


do{
   do this statement
   do that statement
  }
while(condition)

do{
   drawCircle();
   drawSquare();
  }
while(count <>

We haven't used a do while loop in chunk 16 but this would be very easy to implement if we needed it.

While Loops - First Draft

2008-12-07T23:40:00.006Z

While blocks allow us to repeat a section of code, until a condition or conditions become true or false. The opening clause contains the condition and this is followed by a statement block. Statement blocks, in looping structures, are always enclosed by curly brackets, unless there is only one such statement. Sometimes a while statement is used to increment a simple counter. until it has a certain value.

while(condition/conditions){do this}//while condition is true do this
while(!condition){do this} //while not condition do this

int count=0;
while(count < face="courier new=">
callFunction(); //call function
count++;} //increase count's value by one

Here the loop is repeated 10 times. counts value is increased by one in each iteration of the while loop. It starts with value 0 and stops at value 10. Because count's value must be less than ten in the conditional clause, the statement block is not executed again and the code continues to the next statement, after the while block.

while(!input==valid){getInput();}

This will call the getInput() function, until the value of input is equal to the value of valid. (Here valid is probably a boolean variable with a value of true).
Examples of while loops in Chunk 16 are on lines: 42, 51 and 57.
The draw method has a lot of while methods that seem to be performing a similar function. The code looks like it could be optimised. We will try moving out this repetitious code to a function in a later section of Chunk 16.

Loops and the if Statement - First Draft

2008-12-07T13:49:00.009Z

If there were no loops in our code, then our programs wouldn't last long, or they would have to contain a huge amount of repetitive code.
Looping structures all consist of the same basic format. A conditional statement. followed by the block of code to repeat.
An if statement isnt really a looping construct, but as it follows the same type of format, we will discuss it here.
The basic form of an if statement is as follows:
if(condition/s){do this}

if(a==10){ //if a is equal to 10 THEN
a=0;} //do this

if(a >=10&&b==100){ //if a is greater than 10 and b has a value of 10 THEN
a=0; //do this
b=0;} //and do this

if(a>=10&&b==100)||(!isEnabled){//as above OR isEnabled is false
a=0; //do this
isEnabled=false;} //and do this

The functionality of an if block can be extended by adding an else block.

if(a <> //if a is less than 100 THEN
a++;} //let a=a+1 (increment a)
else{ //otherwise (if a is greater or equal to 100)
a=0;} //do this

The if statements can be even further extended, with the else if block. You can use as many else if blocks as you like. The else and else if blocks cant be used on their own and must be proceeded by an if statement. Great care should be taken to ensure that the brackets are in the right places.


if(a < face="courier new">  if(a < =50){
    a=+2;  }
  else if(a <>
    a++;        }
}
else{a=0;}

Examples of using if, else if and else consructs in chunk 16, can be seen on lines 36 and 124.
All looping structures have a conditional statement and an executable block, that is only carried out, if the condtion holds.

Functions First Draft

2008-12-07T13:49:00.006Z

Functions are extremely useful structures, that allow us to use the same code in various places, by calling a function's signature. The signature of a function is its first line. If we have a function with the signature:
void drawCircles(int a)
then we call it like so:
drawCircles(400);
If there is a function with the same name but a different signature it is known as an overloaded function:
drawCircles(int a, String col)
we could call the second overloaded function like so:
drawCircles(400, "red");
Code that is repeated frequently is an indication that a function is required. The repetitive portion of the code should be moved into a function with any parameters required. This helps with code reuse, making the program easier to maintain and cuts down the program's length. Any errors/modifications are confined to one place and can be easily corrected.
There are three basic types of functions:
A simple function is usually used to change some global variable's value. It doesn't accept any parameters and returns no value. The changeColour() function line 105 provides us with an example. It has a void return type and empty parameter brackets.
Some functions can be passed messages, informing them of value/s to change or use. drawCircles3(int) on line 118 accepts an integer which it uses to draw a circle, using the ellipses method.
A function can be used to perform some calculation and return a value. These type of functions must contain the return type in their signature. The getSW function on line 135 returns an int value, which can be used to set the stroke width. The signature has type int to denote its return type:
int getSW()
A function can also accept parameters and return a value. We havent used this type of user defined function in chunk 16.
As well as allowing us to create user defined functions, Processing has its own inbuilt functions, which is probably the main reason for using it.
Some builtin Processing functions are:
The size function, accepts two integers, which set the size of the display window in the setup method.
The rect(int, int, int, int) function, accepts four parameters, that are used to draw a rectangle. The first two parameters are the coordinates for the rectangle's position and the remaining values, set the rectangles width and height.
The random function is an overloaded function, because it can accept either one or two parameters. It can return a float or an integer. In chunk 16 we mostly use integers, so we need to round up any floats returned by random. We pass the value returned by the random(int, int) function into the round(float) function to obtain an integer. Examples of using round(random(int, int)) can be found in many places in Chunk16 as it outputs randomized patterns. Some examples of values that are randomised using the random function are: stroke width, colour, height. width, interval and patternsPerPicture.

Variables First Draft

2008-12-07T13:49:00.003Z

In programming everything has to have a unique identifier, the processor will remember the values stored for each variable but will we?
Giving variables significant names really cuts down on maintenance and the amount of commenting needed. The first character in a name should usually be a letter. Numbers and symbols wont work. An underscore can be used but this should be used to denote special cases. As long as the first character is a letter though, we will not go wrong. Its traditional for normal variables to start with a lowercase letter and to capitalise the first letter of each subsequent word making up the name. e.g.
account
goldAccount
superDuperAccount
This is known as camelCase format
Variable values are usually 'variable' and are changed within the program, but occasionally variables whose values dont change are needed. These are called constants because their value is constant and never changes. Constants are usually uppercase e.g.
MAXROWS
MINHEIGHT
NUMMONSTERS
Later on we will be using a structure known as a class, classes are used to define object types and they should always start with an uppercase letter. e.g:
Shape
Room
Person
We use built in classes to specify each variable's type and the most used types are String, int, float and boolean: e.g.:
String name;
int width;
float amount;
boolean isVisible;
Variable types need to be declared before the program starts. Later their values need to be declared e.g.:
name="circle";
width=800;
They can also be declared and initialised at the same time:
int float=0.01;
boolean isVisible=false;
Giving a variable a value is known as assignment, and always uses the = operator.
You must be very careful if you are comparing values to make sure that you use == and not = as they have very different consequences!
a=6+4; (result 10)
a==6+4 (result true or false-depending on the value of a, if a = 10 then true)
When comparing strings it is usual to use the equals() method for comparison. This is because == will only be true if the strings compared belong to the same object. If we have two strings a and b and they both have the same value then they will not be equal when using ==.
a="value";
b="value";
a==b result is false
a.equals(b) result is true
The scope of a variable affects where it is recognised.
Global variables are declared at the start of the program and can therefore be used in any code block. The variables in lines 11-18 are global.
Variables declared within a code block are known as local variables and are only usable within that block. The local variables declared on lines 33 and 34 are usable at any point within the draw function. None of the other functions are aware of their existence.
Local variables, declared within different blocks, may have the same identifier, but they will refer to different objects.
The integer n in the drawCircles(int) function is declared within a for loop. Line 110. If we were to try using it anywhere outside the for block, it would not be recognised. If we wanted to access its value in the drawCircles(int) function we would need to declare it outside the for block. eg:


void drawCircles(int gap){
       int n;
       for(n=0;n< round(random(width/2,width));n+=gap){
          drawCircle(n);                                }
       println("Final value of n: "+n);
}

Outline

2008-12-06T13:29:00.008Z

The proposed outline of Chunk 16

 1:Comments
 2:  one line
 3:  many lines
 4:  placement
 5:Variables
 6:  Types
 7:  String
 8:  int
 9:  boolean
11:  naming conventions
12:  camelCase
13:  CONSTANTS
14:  Classes
15:  Global
16:  Local
17:  Scope
18:  assignment
19:  comparison
20:Functions
21:  void
21:  calling
22:  passing messages (parameters)
23:  return values
24:  built in functions
25:Looping
26:  conditional brackets
27:  code block brackets
28:  brackets must be nested
29:  if
30:   condition/s
31:    statement block
32:    else
33:    else if
34:  while
35:   condition/s
36:    statement block
37:    counter
38:  do while
39:    statement block
40:    condition/s
41:   for
42:     start-until-increment n
43:     use n
44:  switch
45:    case
46:    default
47:    break
48:    return
49:Arrays
50:   declaration
51:    initialising
52:    using
53:Chunk 16 workflow
54:Modifying Chunk 16
55:

Start Draft Chunk16

2008-12-06T13:29:00.007Z

Introduction
The Chunk 16 application draws a random picture to the screen about every second. It weighs in at a little over 100 lines and can be run as an applet, or an application, by simply clicking on the appropriate link. There is no need to struggle with applet permissions, digitally signing jar files or setting up a jnlp file for Java WebStart. As someone who uses Java on a regular basis, Processing is like a breath of fresh air and I wish I had discovered it sooner! In this chapter we will be looking at the basic construction of a Processing application and it should help clarify the basics of programming, so you are ready to tackle the special powers of Processing. We will just go through each topic and explain the basic syntax.

Comments
If you are anything like me you will want to dive in and get some coding done with as little fuss as possible. This may produce some good work but what happens months later after coding lots of other stuff and you have no recollection of this odd looking code? This is where comments come in.
Comments help explain what is happening in your code and should be used copiously. The five minutes it takes to write them now could save you hours in the future. I am one of the biggest culprits of writing uncommented code, so I know what I'm talking about!
There are three basic types of comments.
// spans one line so this is commented and will be ignored by processing
but this is not and will probably throw an error.
The oyher type
/*spans more than
one line and can contain anything you
like. Iy is very useful for testing if a statement in your code is really needed
and also for commenting out blocks of code you may use later but dont
need at the moment. */end of comment
I have used this on line 63 to comment out a line drawing block. I dont like what it does to the patterns but with a little editing it could maybe be improved. To enable the line drawing just remove the /* at the start and the */ at the end and run it, if you think you can improve it, go ahead, if you will maybe imptove it later then just make it into a comment again, otherwise just delete the block and maybe replace it with something else.
We will not be using the last type of comment as it is usually used to make HTML documentation for Java classes.
/**We have no classes here so we dont use it*/

Chunk16 - Source Code

2008-12-05T18:28:00.008Z

Thanks to Martin, I downloaded JEdit, this makes it much easier to cut and paste the code. After installing JEdit the plug in manager can install codeToHTML.
JEdit adds line numbers too, so this should also help explain the relevant statements in the text.I cant see there being much changes apart from making the filled circles smaller when they are at the top of the picture.
Clicking on the picture will start the randomizer application (If you have a Java runtime environment installed...)

  1:/*
  2: title: Funky Chunk 16
  3: description: random pattern generator 
  4: created: December 2, 2008
  5: by: Rosie Wood
  6:*/
  7:
  8:// define Global variable values
  9://These are constant variables and therefore they are not changed
 10://by the program. Setting their value here in one place helps with maimtenance
 11:int sizeWindow=600;
 12:int centre=sizeWindow/2;
 13:int xpos = centre;
 14:int ypos = centre;
 15:int patternsPerPicture=round(random(2,50));
 16:
 17://this variable is changed frequently by the application
 18:int interval=30;
 19:
 20:// set the sketch window size and background
 21://turn off fill so that patterns underneath can be seen
 22://set the rate that the screen refreshes at (found this value was best for this application?)
 23:void setup(){
 24:  size(sizeWindow, sizeWindow);
 25:  background(0);
 26:  stroke(204, 102, 0);//colour red
 27:  noFill();
 28:  frameRate(.2);
 29:  draw();}
 30:
 31:void draw(){  
 32:      //local variables
 33:      int count=0;
 34:      int design=0;
 35:      for(count=0;count<patternsPerPicture;count++){
 36:        if(count%100==0)background(0); //set the backgound to black sometimes
 37:        interval=round(random(5,70));//increment by interval in while loops
 38:        changeColour();
 39:        design=round(random(1,9)); //a random numver for which design to use in the switch  
 40:        switch(design){
 41:          case 1:         
 42:             while(interval<width){      //while intervel is less than the width of the window  
 43:                drawCircle2(interval-round(random(40,width/2)));//call function drawCircle2 with a random parameter
 44:                interval+=round(random(3,70)); }          
 45:             break;
 46:          case 2:                          
 47:                drawCircles(round(random(20,round(random(1,50)))));     //call the drawCircles function
 48:             break;
 49:          case 3:
 50:          strokeWeight(getSW());//set the strokewright to the number returned by the getSW function
 51:             while(interval<width){    
 52:               drawCircle2(interval-round(random(1,width/2)));//use the drawCircle2 function
 53:               interval+=round(random(1,width/2));}
 54:             break;    
 55:          case 4:
 56:          strokeWeight(getSW());
 57:             while(interval<width){   
 58:                 drawCircle3(interval-round(random(2,width/4)));
 59:                 interval+=round(random(1,30));}
 60:             break;
 61:          case 5:                        //As this case doesnt have a break it uses the same code as case 6
 62:                                        //the following code can be uncommented to add lines but I dont like them much
 63:              /*strokeWeight(getSW());
 64:              for(int b=1;b<width;b=b+round(random(1,20))){
 65:                int down=round(random(width/2));
 66:                int across=round(random(width/2));
 67:                line(xpos,ypos,across-b,down-b);
 68:                line(xpos,ypos,across+b+xpos,down-b);
 69:                line(xpos,ypos,across-b,width-down+b);
 70:                line(xpos,ypos,across+b+xpos,width-down+b);}
 71:            break;
 72:             */
 73:          case 6:        
 74:              while(interval<width){   
 75:              fill(random(255),random(255),random(255)); //use a random colour to fill circle
 76:                 drawCircle2(interval);
 77:                 interval+=round(random(2,200));}
 78:              noFill();//switch off fill
 79:            break;
 80:          case 7:  
 81:             while(interval<width){
 82:                 drawCircle2(interval);
 83:                 interval+=random(1,40);}
 84:            break;
 85:          case 8:
 86:             while(interval<width){  
 87:           
 88:                 fill(random(255),random(255),random(255));//fill squares with a random colour
 89:                 drawSquares((round(random(1,100))));//call function drawSquares with a random number
 90:                 interval+=round(random(100,400));}//made this interval larger to stop filled squares covering over preceeding patterns
 91:                 noFill();
 92:               
 93:             break;
 94:           case 9:
 95:             while(interval<width){
 96:               changeColour();
 97:               drawSquares(interval-round(random(1,width/2)));//draws unfilled squares
 98:               interval+=20;}
 99:             break;  
100:         }}
101:           patternsPerPicture=round(random(2,50));//change number of patterns for next picture
102:         }
103:
104://function to change the stroke colour doesnt accept parameter and doesnt return anything      
105:void changeColour(){
106:  stroke(random(255),random(255),random(255));}
107: 
108://function draws circles accepts parameter gap and uses it to increment loop untill        
109:void drawCircles(int gap){
110:  for(int n=0;n<round(random(width/2,width));n+=gap){    
111:      drawCircle(n);}}
112:
113://no parameters, no return valur      
114:void drawCircle2(int diameter){
115:  ellipse(xpos, ypos, diameter-random(5,diameter), diameter-random(5,diameter));}  
116:
117://accepts 1 parameter
118:void drawCircle3(int diameter){
119:  ellipse(xpos, ypos, (diameter*random(5,diameter))/(random(5,diameter)*19), (diameter*random(5,diameter))/(random(5,diameter)*19) );}  
120:
121:void drawSquares(int diameter){ 
122:  int r= round(random(1,4));
123:  //if/ifelse/else block
124:  if(r==1){
125:    rectMode(CENTER);}
126:  else if(r==2){
127:    rectMode(RADIUS);}
128:  else if(r==3){
129:    changeColour();}
130:  else{
131:    stroke(round(random(255)),round(random(255)),round(random(255)),round(random(255)));}
132:    rect(xpos,ypos,diameter,diameter);}
133:
134://returns integer valur for stroke weight depending on framecount
135:int getSW(){
136:    int fc=round(random(frameRate*500)/5);
137:    //case statement with default value
138:    switch(fc){
139:      case 1:return 1;
140:      case 2:return 2;
141:      case 3:return 3;
142:      case 4:return 4;
143:      case 5:return 5;
144:      case 6:return 6;
145:      case 7:return 7;
146:      case 8:return 8;
147:      case 9:return 9;
148:      default :return round(random(1,4));}}
149:
150:void drawCircle(int diameter){
151:  ellipse(xpos, ypos, diameter,  diameter);
152:  ellipse(xpos, ypos, diameter-interval,  diameter);
153:  ellipse(xpos, ypos, diameter,  diameter-interval);
154:  ellipse(xpos, ypos, diameter,  diameter);}

chunk 16 source code

2008-12-05T13:16:00.006Z

I tried adding lines and triangles to the application but it was not an improvement. If the lines occurred on the last frame then it just spoiled the patterns underneath. Without using trigonometry to calculate the points on the outer circle the triangles just looked like scribbles. This would also have meant more lines of code.
The code as it stands comes to 101 lines. This is after cramping up some code so it fits on one line e.g.
if(condition){statement}
instead of:
if(condition){
statement}
When I write code, I tend not to spread out brackets, so they line up. I try to ensure that statements line up properly, in blocks and if there is a problem with loops, it is easy to line up the brackets to trace errors. This is just my personal preference and the code could be ammended for other formatting tastes...
Here is the uncommented source code as it stands at the moment. It may be changed a little over the coming weeks but I dont see there being any major changes. My next post will contain the commented code and then I will begin the text for chunk 16.


int sizeWindow=600;
int centre=sizeWindow/2;
int xpos = centre;
int ypos = centre;
int interval=30;
void setup(){
 size(sizeWindow, sizeWindow);
 background(0);
 stroke(204, 102, 0);//colour red
 noFill();
 frameRate(.2);
 draw();}
void draw(){ 
     int count=0;
     int design=0;
     for(count=0;count < round(random(10,width));count++){
       if(count%100==0)background(0);
       println(design);
       interval=round(random(5,70));
       changeColour();
       design=round(random(1,9));   
       switch(design){
         case 1:        
            while(interval < width){ 
               drawCircle2(interval-round(random(40,width/2)));//500/400
               interval+=round(random(3,70)); }         
            break;
         case 2:drawCircles(round(random(20,round(random(1,50)))));    
            break;
         case 3:
         strokeWeight(getSW());
            while(interval < width){   
              drawCircle2(interval-round(random(1,width/2)));
              interval+=round(random(1,width/2));}
            break;   
         case 4:
         strokeWeight(getSW());
            while(interval < width){  
                drawCircle2(interval-round(random(2,width/4)));
                interval+=round(random(1,30));}
            break;
         case 5:
         case 6:       
             while(interval < width){  
             fill(random(255),random(255),random(255));
                drawCircle2(interval);
                interval+=20;}
             noFill();
           break;
         case 7: 
            while(interval < width){
                drawCircle2(interval);
                interval+=random(1,40);}
           break;
         case 8:
            changeColour();
            while(interval < width){  
                drawSquares(interval-(width+round(random(1,10))));
                interval+=round(random(1,50));}
            break;
          case 9:
            while(interval < width){
              changeColour();
              drawSquares(interval-round(random(1,width/2)));
              interval+=20;}
            changeColour();
            drawSquares(interval-width+(round(random(1,10))));
            break;}}}     
void changeColour(){
 stroke(random(255),random(255),random(255));}     
void drawCircles(int gap){
 for(int n=0;n < sizeWindow;n+=gap){    drawCircle(n);}}
void drawCircle2(int diameter){
 ellipse(xpos, ypos, diameter-random(5,diameter), diameter-random(5,diameter));} 
void drawCircle3(int diameter){
 ellipse(xpos, ypos, diameter-interval,  diameter+interval);} 
void drawSquares(int diameter){
 int r= round(random(1,4));
 if(r==1){rectMode(CENTER);}
 else if(r==2){rectMode(RADIUS);}
 else if(r==3){changeColour();}
 else{stroke(round(random(255)),round(random(255)),round(random(255)),round random(255)));}
   rect(xpos,ypos,diameter,diameter);}
int getSW(){
   int fc=round(random(frameRate*500)/5);
   switch(fc){
     case 1:return 1;
     case 2:return 2;
     case 3:return 3;
     case 4:return 4;
     case 5:return 5;
     case 6:return 6;
     case 7:return 7;
     case 8:return 8;
     case 9:return 9;
     default :return round(random(1,4));}}
void drawCircle(int diameter){
 ellipse(xpos, ypos, diameter,  diameter);
 ellipse(xpos, ypos, diameter-interval,  diameter);
 ellipse(xpos, ypos, diameter,  diameter-interval);
 ellipse(xpos, ypos, diameter,  diameter);}

funky chunk 16 version 2

2008-12-04T20:58:00.000Z

The first version of the program was ok but the code was a bit of a mess. I edited the code and made one of the case statements do random fills. I'm really not sure if this is an improvement or not.
I must admit that maths and me dont speak to each other , unless really necessary. Some of the drawings in version 1 looked mathematically unsound to me, so I 'tweaked' them a bit. Some of the code was taking more away from the number than possible but no errors were thrown and they seemed to work. After editing a bit, the maths look better but there seems to be less "shimmer".
The old version can be viewed as an applet here or launched as a standalone application straight from here.
The new version can be viewed as an applet here or launched as a standalone application straight from here.
I think its amazing how easy it is to launch a standalone application! You just need to link to the jar file and it runs on the clients pc. They can even choose to download the application and run it whenever they like offline.!

So Simple to Program!

2008-12-03T12:39:00.000Z

I coded the basic outline of the program for chunk 16. This only took a few hours to write and its amazing the amount of work achieved with very little research.
The code is in a right mess and needs to be commented and edited.
I will need to ensure that it conforms to the 100 lines constraint.
I dont think the comments are included in the line count but I will check.
The application draws a random pattern about every second. Colour, stroke weight and pattern function are completely randomized and this makes the application very interesting to watch. I could end up looking at it for hours!
The code is very simple and I have tried to keep it consistent with what the user will know after reading up to page 192.
I have only used the ellipses and rect functions so far but I may add some triangle and line functions if they are an improvement.
I discovered that the content of the draw function is drawn to the screen when the function has ended and I couldnt find an easy way of drawing a line at a time, that would fit in with the rest of the application.
This is no great disadvantage, as by using a for next loop the program can run many functions before each frame is drawn to the screen.
I couldn't get over how easy it was to put the program up on my web site. The viewers can watch the applet, run the standalone application or download a copy of the standalone, so they can run it totally separate from a browser and offline.
The applet runs with no problems in Internet Explorer but there is a permission problem when using FireFox. I'm not sure if this could be a problem with an absolute URL as it objects to host 'solundrian.com'. I'll try fixing this today...
I think it will be quite easy at some point to adjust the application, allowing the user to save some of their favourite pics so they can be viewed later.
You can see the finished randomizer here.

drawCircles

2008-12-01T13:34:00.000Z

I started working on the program for chunk 16.
Functions to change colour randomly, draw a circle and draw a set of circles were written.
I have run into an unexpected problem:
When drawing the circles I wanted a slight pause between each iteration.
This would acheive a hypnotic affect as each circle changes colour.
Instead the circles are all changing colour at the same time.
I even tried using threads but this was unsuccessful too.
I tried redrawing the circles and found what Greenberg terms as a "happy accident". By changing one of the diameters an interesting variation on plain circles was discovered.
I also played with changing the stroke weight but again there is no pause between each change.
I think I will need to read a little more of the book to find a solution to this problem.

By using the 'pre' tag, it is easy to cut and paste the code from processing into the blog, but lesser/greater than needs to be changed to '& noSpaces lt/&noSpaces gt' and some spurious errors must be edited.


// define Global variable values
//set centre for circles
int sizeWindow=300;
int max=1000;
int centre=sizeWindow/2;
int xpos = centre;
int ypos = centre;
int maxDiameter=sizeWindow;
int interval=30;

// set the sketch window size and background
void setup(){
size(sizeWindow, sizeWindow);
background(0);
stroke(204, 102, 0);//colour red
noFill();
frameRate(.3);
draw();}

void draw(){ 
     changeColour();     
     drawCircles(interval);}       

void changeColour(){
 stroke(random(255),random(255),random(255));
}
    
void drawCircles(int gap){
 for(int n=0;n< maxdiameter;n+=gap){ 
    drawCircle(n);}}

//create ellipse
void drawCircle(int diameter){
  sw="1;
  // while(sw<=10){
  // strokeWeight(sw);       
  ellipse(xpos, ypos, diameter,  diameter);   
  ellipse(xpos, ypos, diameter-interval,  diameter);  
  ellipse(xpos, ypos, diameter,  diameter-interval);   
  ellipse(xpos, ypos, diameter,  diameter);  
  // sw+=1;  } 
}

Starting to Process

2008-11-28T16:11:00.000Z

I finally managed to pick up the book from Waterstones.
I am basically playing with the program but thinking along the lines of explaining the basic programming concepts in Processing.
To start with, I thought I would look at a very simple program that involves a lot of repetition and cant easily be extended.

//create ellipses
ellipse(xpos, ypos, 10, 10);
ellipse(xpos, ypos, 20, 20);
ellipse(xpos, ypos, 30, 30);
ellipse(xpos, ypos, 40, 40);
ellipse(xpos, ypos, 50, 50);

The code could first be moved to a function with no return value.
A for next loop could could be used to specify the diameter of the circle.
An if statement could be used to stop the loop when the diameter is greater than the height/width of window.
This could be replaced with a while loop and later by a do while loop.
A hypnotical effect could be produced by changing the colour of the stroke as it draws each circle.
It could be demonstrated how easy it is to change all the circles by changing only one value eg stroke weight/gap etc.
Finally a function that accepts parameters and returns an array of circles could be demonstrated.

Java Virus - Help Please

2008-11-18T10:11:00.000Z

I have picked up a really nasty virus that is showing huge squares in all my Java applications.
It uses an applet I think and may use XOR bits. Ive been trying to fix it for the last 2 days. I've ran about every software tool imaginable, deleted old java versions and trawled the web, but still no joy.
If anyone knows how to clean this up, please get in touch!
email: codecoaster@googlemail.com

Rosie

Aargh - No OU Library

2008-11-16T13:18:00.000Z

Reading through some blogs from other Mass Writing authors, it came to my attention that "the book" was available in the OU online library - Safari book section. Great News! I love the Safari facility,having used it for years to research a vast array of technical subjects.
I logged into student home and went to the Safari section. Up came the "You are not authorised" message. Oh no! Why did I go and graduate! Tears hair out. How on earth can I preserve my street cred, when I dont even have access to the information I need, when I need it.
To hubby: "Any chance of an early Xmas present".....
Reply: "As long as it isnt another book".....
I went to the Safari Books Online site intending to set up a subscription. Good Grief! $252.99 per year + VAT ... for the limited to 10 books option.
Not today, thank you very much!
I know this would sound like a bargain, to someone in paid work, but at the moment I cant justify this expense.
I will just have to pick up my hard copy and suffer the indignity of wearing glasses(when I can find them) and actually manually turning pages!
I'm sure I received an offer of a subscription to the ACM digital library that included subscription to 24/7 too, hmm...
Wow, I looked up the link for ACM and it seems they are offering subscription to Safari, 24/7 and Skillsoft courses as part of their Professional Membership package. To join you need to have a BSc or have worked for 2 years in the IT industry. The price of the whole package is only $99, which is within my budget for a xmas present!
So OU students enjoy your wonderful free library while you can!
I hope the 600 books from Safari includes "the book"!
Oh well have to go order a library!
Back when I get a copy of the book
Sorry, this post might be a bit off topic but it might help someone

Processing and Blogs

2008-10-22T15:03:00.000+01:00

I downloaded the Processing IDE and had a look at the examples.
I was very pleased to learn you can generate applets and applications at the click of a button. There is some way to use the generated code in standard Java programs too, but I havent had time to check this out yet.
Some of the graphics in processing are amazing but I do worry that the coding necessary, may be beyond my limited capabilities.
The Processing IDE can use some pretty nifty libraries, and seems to make Glide and 3D graphics a lot easier to implement.
I went to Waterstones to order the book and the very helpful assistant explained delivery might take 2-3 weeks. When I explained what it was for he put it in as a special order and this might speed it up a little. The book cost 37.99 so I only had to contribute 2.99.
I received the First Mailing from Darrel, and will have a look at the links there shortly. I added the links for the Mass Writing Blogs, to FireFox's FastDial plugin. This will make it easy to find them later.

Making a Start

2008-10-17T17:55:00.000+01:00

I have done a fair amount of Java Programming and have used the Graphics class a fair bit, but this area of Java was mostly self taught. My introduction to Java graphics was the Timothy Budd course book for M301.
I have researched various graphic concepts in the past, but I always come back to the standard Java awt graphics package because of its simplicity. I have been intending to start using the Graphics 2D class, as I think I understand most of its methods.
Maths is something I studied way back in MU120, but trigonometry and algebra are now just a foggy memory. This is a pity as I think they would make some interesting effects.
I have a web site where my Java RPG Game Solundria can be launched with Web Start. The game is in serious need of a graphical makeover, so I am hoping that the study of Processing may help me accomplish this.
I put a blog post up on my page on 38 minutes (a digital Media Web Site) about the OU record attempt.
I did a bit of browsing and started to read a sample chapter of the Processing book, but it seemed to time out or something. The Processing methods were not as bad as I had expected and I cant wait for the book voucher to arrive, so I can try some new stuff out.
Its maybe a forlorn hope but I'd like to make some kind of business when I eventually (if ever...) finish Solundria. I will have to examine the licence for the Processing classes as they are Open Source. Even if they cant be used in my game some of the methods are very similar to Java, so I think it will still be a worthwhile learning experience.