ondo915

11-22-2010, 06:16 AM

Hello, I'm new here so.. hi! You'll probably be seeing me a lot. Anyways here's my questions.

I am trying to get a function to draw 5 randomly sized and colored rectangles nested within each other. Meaning each rectangle should not go outside the boundaries of the rectangle it is in. The color thing I've got down in a randomColor() function. It's the nesting rectangles inside rectangles that is confusing me (hense me being up for the past 4 hours trying to understand it) I started out with very simple code just making 5 rectangles of reducing sizes nested in each other, then added the Math.random to randomize all the sizes. Now I'm at this point and have lost my way. Please help, or maybe there is just an easier way. I added a bunch of comments in my code so maybe you'll understand what I'm trying to do.

function rect() { // rectangle generator

autoctx.clearRect(0, 0, 400, 400); // clear canvas

// declare variables

var x;

var y;

var width;

var height;

var i = 0; // counter

// create random x,y coordinates

x = Math.round(Math.random() * 100);

y = Math.round(Math.random() * 100);

do { // create random size rectangle

width = Math.round(Math.random() * 400);

height = Math.round(Math.random() * 400);

} while (width < 100 || height < 100); // make sure rectangle is big enough

autoctx.fillStyle = randomColor(); // Runs random color generator

autoctx.fillRect(x, y, width, height); // fill first rectangle

do {

x += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle

y += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle

//*********** KEEPS RECTANGLE HEIGHT AND WIDTHS FROM BEING A NEGATIVE NUMBER ***********//

do { //*** WIDTH TESTER ***// validates width to be within previous rectangles width

var testW = 0; // new width tester variable

testW = width - (Math.round(Math.random() * (2 * x))); // store test width

if (testW > 0) {

width = testW; // if test width > 0 store in width

}

} while (testW < 0); // if test width < 0 continue loop

do { //*** HEIGHT TESTER ***// validates height to be within previous rectangles height

var testH = 0; // create height testing variable

testH = height - (Math.round(Math.random() * (2 * y))); // calculate new test height

if (testH > 0) { // if test height is > 0

height = testH; // store as height

}

} while (testH < 0); // if test height < 0 try again

//*** Fills final rectangle values ***//

autoctx.fillStyle = randomColor(); // Runs random color generator

autoctx.fillRect(x, y, width, height);

i++; // add 1 to counter

} while (i < 4); // kick out of loop after the 5th rectangle

}

thanks guys I hope I'm not too confusing or anything, any help would be greatly appreciated!

I am trying to get a function to draw 5 randomly sized and colored rectangles nested within each other. Meaning each rectangle should not go outside the boundaries of the rectangle it is in. The color thing I've got down in a randomColor() function. It's the nesting rectangles inside rectangles that is confusing me (hense me being up for the past 4 hours trying to understand it) I started out with very simple code just making 5 rectangles of reducing sizes nested in each other, then added the Math.random to randomize all the sizes. Now I'm at this point and have lost my way. Please help, or maybe there is just an easier way. I added a bunch of comments in my code so maybe you'll understand what I'm trying to do.

function rect() { // rectangle generator

autoctx.clearRect(0, 0, 400, 400); // clear canvas

// declare variables

var x;

var y;

var width;

var height;

var i = 0; // counter

// create random x,y coordinates

x = Math.round(Math.random() * 100);

y = Math.round(Math.random() * 100);

do { // create random size rectangle

width = Math.round(Math.random() * 400);

height = Math.round(Math.random() * 400);

} while (width < 100 || height < 100); // make sure rectangle is big enough

autoctx.fillStyle = randomColor(); // Runs random color generator

autoctx.fillRect(x, y, width, height); // fill first rectangle

do {

x += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle

y += (Math.round(Math.random() * 15)); // choose new random coordinates within previous rectangle

//*********** KEEPS RECTANGLE HEIGHT AND WIDTHS FROM BEING A NEGATIVE NUMBER ***********//

do { //*** WIDTH TESTER ***// validates width to be within previous rectangles width

var testW = 0; // new width tester variable

testW = width - (Math.round(Math.random() * (2 * x))); // store test width

if (testW > 0) {

width = testW; // if test width > 0 store in width

}

} while (testW < 0); // if test width < 0 continue loop

do { //*** HEIGHT TESTER ***// validates height to be within previous rectangles height

var testH = 0; // create height testing variable

testH = height - (Math.round(Math.random() * (2 * y))); // calculate new test height

if (testH > 0) { // if test height is > 0

height = testH; // store as height

}

} while (testH < 0); // if test height < 0 try again

//*** Fills final rectangle values ***//

autoctx.fillStyle = randomColor(); // Runs random color generator

autoctx.fillRect(x, y, width, height);

i++; // add 1 to counter

} while (i < 4); // kick out of loop after the 5th rectangle

}

thanks guys I hope I'm not too confusing or anything, any help would be greatly appreciated!