Processing 1.0 - Processing Discourse - Colour squares program

We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.

Index › Programming Questions & Help › Programs › Colour squares program - stumped!

‹ Previous Topic | Next Topic ›

Pages: 1

Colour squares program - stumped! (Read 1291 times)

Giles

Colour squares program - stumped!
Sep 17^th, 2009, 2:23pm

Hi there....

I'm in the process of writing this program with coloured squares in a grid which will react to each other. At the moment all it does is put down a grid of similar colours...and then every ten frames puts down a square of a random colour in a random place. Every frame, each square is set to the colour average of its neighbours. So every time the random colour square is put down, it is quickly "absorbed" into the general colour of the grid.

What I can't understand is why when a square is put down, the pattern of changes in the other squares isn't symmetrical. It should be...but the squares to the top left side of the new square seem to be darkened more. In other words,the changes radiating out from the new square placed in one of the central grid squares should radiate out symmetrically but don't. Hope this isn't too confusing, and I'd be grateful for any insights.

Giles Senior Member Offline Posts: 252	Re: Colour squares program - stumped! Reply #1 - Sep 17^th, 2009, 2:24pm Also How do I insert all my code...won't fit in here (sorry - Processing forum noob!)

Giles

Re: Colour squares program - stumped!
Reply #2 - Sep 17^th, 2009, 7:38pm

First bit of program:

Code:

int xsize=10;
int ysize=8;
square[][] grid= new square[xsize][ysize];
color startcolour;
int squarewidth, squareheight;

final int CENTRE=1;
final int TOPROW=2;
final int TOPRIGHT=3;
final int RIGHTCOL=4;
final int BOTRIGHT=5;
final int BOTROW=6;
final int BOTLEFT=7;
final int LEFTCOL=8;
final int TOPLEFT=9;


void setup()
{
  size(800,640);
  squarewidth=width/xsize;
  squareheight=height/ysize;
  noStroke();
  startcolour = color(random(255), random(255), random(255));
  initialise();
  frameRate(3);
}

void draw()
{
    drawsquares();
    averagesquares();
}

void initialise()
{
  for(int i=0; i<xsize; i++)
  {
    for(int j=0; j<ysize; j++)
    {
	color tempcol= color(red(startcolour)+random(-20,20), green(startcolour)+random(-20,20), blue(startcolour)+random(-20,20));
	grid[i][j]=new square(i*squarewidth,j*squareheight, squarewidth, squareheight, tempcol, 255);
	if(i>0 &&j>0 && i<xsize-1 && j<ysize-1) grid[i][j].position=CENTRE;
	else if(j==0)
	{
	    if(i==0) grid[i][j].position=TOPLEFT;
	    else if(i==xsize-1) grid[i][j].position=TOPRIGHT;
	    else grid[i][j].position=TOPROW;
	}
	else if(j==ysize-1)
	{
	    if(i==0) grid[i][j].position=BOTLEFT;
	    else if(i==xsize-1) grid[i][j].position=BOTRIGHT;
	    else grid[i][j].position=BOTROW;
	}
	if (i==0 && !(j==ysize-1 || j==0)) grid[i][j].position=LEFTCOL;
	else if (i==xsize-1 && !(j==ysize-1 || j==0)) grid[i][j].position=RIGHTCOL;
	//print(i+"/"+j+"/"+ grid[i][j].position + "  "); //for testing
    }
  }
}

void drawsquares()
{
  for(int i=0; i<xsize; i++)
  {
    for(int j=0; j<ysize; j++)
    {
	 grid[i][j].render();
    }
  }
}

Giles

Re: Colour squares program - stumped!
Reply #3 - Sep 17^th, 2009, 7:39pm

Second bit:

Code:

void averagesquares()  //every square's colour is set to the average of its neighbours
{
   for(int i=0; i<xsize; i++)
    {
	for(int j=0; j<ysize; j++)
	{
	  float avgred, avggreen, avgblue; 
	  switch(grid[i][j].position)
	   {
	     case 1:
		 avgred= (red(grid[i-1][j-1].col)+red(grid[i][j-1].col)+red(grid[i+1][j-1].col)+red(grid[i-1][j].col)+
		 red(grid[i+1][j].col)+red(grid[i-1][j+1].col)+red(grid[i][j+1].col)+red(grid[i+1][j+1].col))/8;
		 avgblue= (blue(grid[i-1][j-1].col)+blue(grid[i][j-1].col)+blue(grid[i+1][j-1].col)+blue(grid[i-1][j].col)+
		 blue(grid[i+1][j].col)+blue(grid[i-1][j+1].col)+blue(grid[i][j+1].col)+blue(grid[i+1][j+1].col))/8;
		 avggreen= (green(grid[i-1][j-1].col)+green(grid[i][j-1].col)+green(grid[i+1][j-1].col)+green(grid[i-1][j].col)+
		 green(grid[i+1][j].col)+green(grid[i-1][j+1].col)+green(grid[i][j+1].col)+green(grid[i+1][j+1].col))/8;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
	     
	     case 2:
		 avgred= (red(grid[i-1][j].col)+ red(grid[i+1][j].col)+red(grid[i-1][j+1].col)+red(grid[i][j+1].col)+red(grid[i+1][j+1].col))/5;
		 avgblue= (blue(grid[i-1][j].col)+ blue(grid[i+1][j].col)+blue(grid[i-1][j+1].col)+blue(grid[i][j+1].col)+blue(grid[i+1][j+1].col))/5;
		 avggreen= (green(grid[i-1][j].col)+ green(grid[i+1][j].col)+green(grid[i-1][j+1].col)+green(grid[i][j+1].col)+green(grid[i+1][j+1].col))/5;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
	     
	     case 3:  
		 avgred= (red(grid[i-1][j].col)+ red(grid[i-1][j+1].col)+red(grid[i][j+1].col))/3;
		 avgblue= (blue(grid[i-1][j].col)+ blue(grid[i-1][j+1].col)+blue(grid[i][j+1].col))/3;
		 avggreen= (green(grid[i-1][j].col)+ green(grid[i-1][j+1].col)+green(grid[i][j+1].col))/3;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 4:
		 avgred= (red(grid[i-1][j-1].col)+red(grid[i][j-1].col)+red(grid[i-1][j].col)+
		 red(grid[i-1][j+1].col)+red(grid[i][j+1].col))/5;
		 avgblue= (blue(grid[i-1][j-1].col)+blue(grid[i][j-1].col)+blue(grid[i-1][j].col)+
		 +blue(grid[i-1][j+1].col)+blue(grid[i][j+1].col))/5;
		 avggreen= (green(grid[i-1][j-1].col)+green(grid[i][j-1].col)+green(grid[i-1][j].col)+
		 green(grid[i-1][j+1].col)+green(grid[i][j+1].col))/5;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 5:
		 avgred= (red(grid[i-1][j-1].col)+red(grid[i][j-1].col)+red(grid[i-1][j].col))/3;
		 avgblue=(blue(grid[i-1][j-1].col)+blue(grid[i][j-1].col)+blue(grid[i-1][j].col))/3;
		 avggreen=(green(grid[i-1][j-1].col)+green(grid[i][j-1].col)+green(grid[i-1][j].col))/3;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 6:
		 avgred= (red(grid[i-1][j-1].col)+red(grid[i][j-1].col)+red(grid[i+1][j-1].col)+red(grid[i-1][j].col)+
		 red(grid[i+1][j].col))/5;
		 avgblue= (blue(grid[i-1][j-1].col)+blue(grid[i][j-1].col)+blue(grid[i+1][j-1].col)+blue(grid[i-1][j].col)+
		 blue(grid[i+1][j].col))/5;
		 avggreen= (green(grid[i-1][j-1].col)+green(grid[i][j-1].col)+green(grid[i+1][j-1].col)+green(grid[i-1][j].col)+
		 green(grid[i+1][j].col))/5;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 7:
		 avgred= (red(grid[i][j-1].col)+red(grid[i+1][j-1].col)+red(grid[i+1][j].col))/3;
		 avgblue= (blue(grid[i][j-1].col)+blue(grid[i+1][j-1].col)+blue(grid[i+1][j].col))/3;
		 avggreen= (green(grid[i][j-1].col)+green(grid[i+1][j-1].col)+green(grid[i+1][j].col))/3;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 8:
		 avgred= (red(grid[i][j-1].col)+red(grid[i+1][j-1].col)+
		 red(grid[i+1][j].col)+red(grid[i][j+1].col)+red(grid[i+1][j+1].col))/5;
		 avgblue= (blue(grid[i][j-1].col)+blue(grid[i+1][j-1].col)+
		 blue(grid[i+1][j].col)+blue(grid[i][j+1].col)+blue(grid[i+1][j+1].col))/5;
		 avggreen= (green(grid[i][j-1].col)+green(grid[i+1][j-1].col)+
		 green(grid[i+1][j].col)+green(grid[i][j+1].col)+green(grid[i+1][j+1].col))/5;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
		 
	     case 9:
		 avgred= (red(grid[i+1][j].col)+red(grid[i][j+1].col)+red(grid[i+1][j+1].col))/3;
		 avgblue= (blue(grid[i+1][j].col)+blue(grid[i][j+1].col)+blue(grid[i+1][j+1].col))/3;
		 avggreen= (green(grid[i+1][j].col)+green(grid[i][j+1].col)+green(grid[i+1][j+1].col))/3;
		 
		 grid[i][j].col=color(avgred, avggreen, avgblue);
		 break;
	   }
	}
   }
 }
  
 void mouseClicked()
 {
   grid[mouseX/squarewidth][mouseY/squareheight].col= color(random(255), random(255), random(255));
   grid[mouseX/squarewidth][mouseY/squareheight].render();
 }

Giles

Re: Colour squares program - stumped!
Reply #4 - Sep 17^th, 2009, 7:40pm

And the square class:

Code:

class square
{
  int x;
  int y;
  int w;
  int h;
  color col;
  int opacity;
  int position =1; //position in grid i.e. is it an edge, corner etc.
  
  
  square(int xpos, int ypos, int wid, int hei, color c, int op)
  {
    x=xpos;
    y=ypos;
    w=wid;
    h=hei;
    col=c;
    opacity=op;
  }
  
  void render()
  {
    fill(red(col), green(col), blue(col), opacity);
    rect(x,y,w,h);
  }
}

ben_hem

Re: Colour squares program - stumped!
Reply #5 - Sep 17^th, 2009, 11:39pm

It sounds like your grids may be updating, and the updates are in turn affecting grids that are further along in the list. Often if you're checking from left to right, top to bottom, that will result in errors spreading diagonally like that. Try running through the entire array, and storing the new (averaged) values in a temporary array. At the end, arrayCopy() the temporary array into the actual array.

Re: hugenormous paste, I like to use http://nopaste.com or http://pasteit4me.com.

--Ben

koogy

Re: Colour squares program - stumped!
Reply #6 - Sep 18^th, 2009, 5:10am

that's exactly what's happening. when you click on a square you go through the grid updating everything (including the square itself). when you update the neighbours to the right and below the clicked on square you use values that you've already faded.

you need two grids. calculate the new grid values based on the values in the current grid and then copy them over so that the current grid is now fully updated.

(oh, i appear to have said exactly the same as BenHem using different words. apologies)

(that switch statement is terrible btw 8) )

Giles Senior Member Offline Posts: 252	Re: Colour squares program - stumped! Reply #7 - Sep 18^th, 2009, 5:27am Yes. You guys have hit the nail on the head....thanks a lot for your help.

Pages: 1

‹ Previous Topic | Next Topic ›