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 › Syntax Questions › Changing the canvas size for a application
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
Changing the canvas size for a application (Read 1369 times)
mtrix_20
Changing the canvas size for a application
Apr 14th, 2010, 8:53am  
Hello, I'm fairly new to Precessing and I'm following the tutorial in the book "Processing. Creative coding and computational art" by Ira Greenberg. Here he creates a simple drawing application and I'm experimenting with it.

What I don't understand is why I cannot change the screen size from 600x400 to 1280x800 when I change the parameters in the size function. For what I can see the code for the color palette is not letting me achieve this because the array is set in a way that I can't seem to understand. Here's the code for the array:

Code:
//construct palette values 
int paletteCounter = 0; 
for (int j=0; j<6; j++){
for (int i=palette.length/6; i>0; i--){ 
if (i>13){
palette[paletteCounter] = color(random(6), random(26)+5, random(26)+5);
} 
if (i<=13){
palette[paletteCounter] = color(j, i*2, i*4); 
paletteCounter++;
}
}
//set initial color 
paintColor = palette[23];
//reset colorMode to RGB 
colorMode(RGB, 256, 256, 256);
}


I will appreciate all the help I can get from the community.
Thanks in advance
Back to top
 
 
PhiLho 
Re: Changing the canvas size for a application
Reply #1 - Apr 14th, 2010, 9:03am  
Sorry, but I am unable to connect your question to the code you show.

First, you can't change the screen size, but I suppose you meant the sketch area's size.
Second, why do you say you cannot do that change? Do you have an error?
Third, well, as I wrote I don't connect the palette to the size of the sketch. But looking at that code, I notice you might want to increment the paletteCounter variable outside of the second test (ie. in both cases). And you can replace the second test with a else.
Code:
for (int i = palette.length/6; i > 0; i--) { 
  if (i > 13) {
    palette[paletteCounter] = color(random(6), random(26)+5, random(26)+5);
  } else {
    palette[paletteCounter] = color(j, i*2, i*4); 
  }
  paletteCounter++;
}
Back to top
 
WWW  
mtrix_20
Re: Changing the canvas size for a application
Reply #2 - Apr 14th, 2010, 10:41am  
Hello, thank you so much for answering. I'll show you  more of the code so you are able to enlighten me a little.
Code:

// fonts
PFont titleFont, clearFont;
// canvas background color
color canvasBg = color(255);
// paint color
color paintColor;
// palette
color[]palette = new color[156];
// creating 3 icons
PImage pencil, brush, eraser;
// panels coordinate arrays
float[] menu, tools, canvas;
// buttons coordinate arrays
float[] pencilBtn, brushBtn, eraserBtn;
//creating button state colors
color buttonUp = color(175, 175, 50, 150);
color buttonOver = color(255, 130, 20, 175);
color buttonSelected = color(250, 250, 30, 175);
// setting initial button background colors
color pencilBg = buttonSelected;
color brushBg = buttonUp;
color eraserBg = buttonUp;
// button booleans
boolean isPencilSelected = true;
boolean isBrushSelected = false;
boolean isEraserSelected = false;
// slider
float[] sliderBar, sliderHandle;
boolean isSliderMovable = false;
color sliderHandleUp = color(255, 127, 0);
color sliderHandleOver = color(255, 200, 0);
color sliderHandleBg = sliderHandleUp;
float sliderValue = 0;
//clear button
float[]clearBtn;
color clearBtnOver = color(50, 50, 150);
color clearBtnUp = color(0, 0); 
color clearBtnBg = clearBtnUp;
void setup(){
  size(600, 400);
  background(canvasBg);
  frameRate(30);
// creating fonts
  titleFont = createFont("Arial", 11);
  clearFont = createFont("Arial", 10);
  // creating icons
  pencil = loadImage("pencil_cursor.png");
  brush = loadImage("brush_cursor.png");
  eraser = loadImage("eraser_cursor.png");
  // creating panel coordinate arrays
  menu = new float[]{ 
    0, 0, width, 25       };
  tools = new float[]{
    0, menu[3], 50, 165      };
  canvas = new float[]{ 
    tools[2], menu[3], width-tools[2], height-menu[3]+1       };
// creating button coordinate arrays
  pencilBtn = new float[]{ 
    tools[0]+5, tools[1]+10, tools[2]-11, 45       };
  brushBtn = new float[]{ 
    tools[0]+5, pencilBtn[1]+ pencilBtn[3]+5, tools[2]-11, 45       };
  eraserBtn = new float[]{ 
    tools[0]+5, brushBtn[1]+ brushBtn[3]+5, tools[2]-11, 45       };
// creating slider coordinate arrays
  sliderBar = new float[]{
    width-150, menu[1]+menu[3]/2, 75, menu[1]+menu[3]/2    };
  sliderHandle = new float[]{ 
    sliderBar[0]+sliderBar[2]/2, sliderBar[1]-3, 6, 6       };
// creating clear button coordinate array
  clearBtn = new float[]{ 
    width-45, 6, 31, 13       };
  //temporarily setting colorMode to HSB
  colorMode(HSB, 6, 26, 26);
//constructing palette values
  int paletteCounter = 0;
  for (int j=0; j<6; j++){
    for (int i=palette.length/6; i>0; i--){
      if (i>13){
        palette[paletteCounter] = color(random(6), random(26)+5, random(26)+5);
      }
      if (i<=13){
        palette[paletteCounter] = color(j, i*2, i*4);
      }
      paletteCounter++;
    }
  }
//setting initial color
  paintColor = palette[23];
//resetting colorMode to RGB
  colorMode(RGB, 256, 256, 256);
}


Here is the first half of the program including the setup function. I hope this can help better to understand. Thank you for all your help.
Back to top
 
 
mtrix_20
Re: Changing the canvas size for a application
Reply #3 - Apr 14th, 2010, 10:54am  
I do get an error message when I try to change the sketch's area:
Code:
processing.app.debug.RunnerException: ArrayIndexOutOfBoundsException: 156
	at processing.app.Sketch.placeException(Sketch.java:1565)
	at processing.app.debug.Runner.findException(Runner.java:568)
	at processing.app.debug.Runner.reportException(Runner.java:543)
	at processing.app.debug.Runner.exception(Runner.java:498)
	at processing.app.debug.EventThread.exceptionEvent(EventThread.java:367)
	at processing.app.debug.EventThread.handleEvent(EventThread.java:255)
	at processing.app.debug.EventThread.run(EventThread.java:89)
Exception in thread "Animation Thread" java.lang.ArrayIndexOutOfBoundsException: 156
	at Painting_app.draw(Painting_app.java:230)
	at processing.core.PApplet.handleDraw(PApplet.java:1594)
	at processing.core.PApplet.run(PApplet.java:1496)
	at java.lang.Thread.run(Thread.java:637)


And it highlights this line of code:
Code:
	fill(palette[paletteCounter++]);


Back to top
 
 
blindfish
Re: Changing the canvas size for a application
Reply #4 - Apr 14th, 2010, 2:03pm  
mtrix_20 wrote on Apr 14th, 2010, 10:54am:
And it highlights this line of code:
Code:
	fill(palette[paletteCounter++]);




Does it?  Strange as that line isn't in the code you posted...

As it happens I have the book and I've just found the section of code where the error occurs.  You've got a for loop as follows:

Code:
for(float j=menu[3]+tools[3]; j<height-8; j+=8){
  fill(palette[paletteCounter++]);
  // snip
}


I suspect the problem is - and he warns of this in the text - that he's used 'magic numbers' and you've just found out why they can be a bad idea.  The problem you have is an 'index out of bounds' error on the palette array.  That's presumably been pre-populated earlier in the code and contains a specific number of entries.  Notice how the limit of the for loop in the above code is dependent on 'height-8'.  By changing the height of the sketch you change the limit of the for loop beyond what was intended and reference an index in the palette array that doesn't exist.

The trick to solving this problem is to figure out how he came up with the figure 8 in that loop.  It's presumably a factor of the height and the number of colours in the palette...  If you can figure out the connection you can replace it with a value that will work for the size you've set for your sketch.  At a guess I imagine that if you double the size of the sketch you'll have to double the size of this figure; so after doubling the size from his original perhaps try:

Code:
for(float j=menu[3]+tools[3]; j<height-16; j+=16){
//...


Though such guesswork isn't always a good idea.  The best solution is to figure out how to calculate the number and set it to a variable basing this calculation on the sketch size - then you can set any size you want and avoid the bug altogether...
Back to top
 
Where is the what if the what is in why?
 
mtrix_20
Re: Changing the canvas size for a application
Reply #5 - Apr 15th, 2010, 2:11pm  
Thank you very much !!! I made it work, I had to double the number of the swatches to make it cover the entire lenght of the canvas.
Hard coding these kinds of numbers is not a good idea, I learned this much.

Thanks again! Smiley
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›