Tuesday, 9 December 2008

Arrays and Modification - First Draft

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++){
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);

void drawA(){
recs=new boolean[9];
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);}}
rect(midxy[1], midxy[1], width/3, width/3);
//println("empty? "+midxy[0]==null);}

void resetRecs(){
for(int r=0;r < 9;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!

No comments:

Post a Comment