I know I could use arrays to make this easier but I have never used arrays before ...

Programming Questions

nicholasl..

I know I could use arrays to make this easier but I have never used arrays before ...

in Programming Questions • 2 years ago

I know the following code could be made more simply with maybe one or two arrays ... how do i go about approaching simplifying this code to enable it to be more effective code.

void setup() {
size(500,500);

}

void draw() {
background(125);
float xpos = mouseX;
float ypos = mouseY;
float xpos2 = mouseX*1.5;
float ypos2 = mouseY*1.5;
float xpos3 = mouseX*1.25;
float ypos3 = mouseY*1.25;

float circle_dim = 50;

ypos = constrain(ypos, 50,450);
xpos = constrain(xpos, 50,450);
xpos2 = constrain(xpos2, 150,350);
ypos2 = constrain(ypos2, 150,350);
xpos3 = constrain(xpos3, 200, 300);
ypos3 = constrain(ypos3, 200, 300);

//outer circles

ellipse(50, ypos, circle_dim, circle_dim);

ellipse(50, height - ypos, 50, 50);

ellipse(xpos, 50, 50,50);
ellipse(width - xpos, 50, 50, 50);

ellipse(450, ypos, 50, 50);
ellipse(450, height - ypos, 50, 50);

ellipse(xpos, 450, 50, 50);
ellipse(width - xpos, 450, 50, 50);

// inset one

ellipse(150,xpos2, 100, 100);
ellipse(150, width - xpos2, 100,100);

ellipse(ypos2,150, 100,100);
ellipse(width - ypos2, 150, 100,100);

ellipse(350, xpos2, 100, 100);
ellipse(350, height - xpos2, 100,100);

ellipse(ypos2, 350, 100,100);
ellipse(width - ypos2, 350, 100, 100);

ellipse(ypos3, 250, 25, 25);
ellipse(xpos3, 250, 25, 25);
ellipse( 250,height - ypos3, 25, 25);
ellipse(250, width - xpos3, 25, 25);

}

Replies(1)

jobleonard

Re: I know I could use arrays to make this easier but I have never used arrays before ...

2 years ago

First of all, you are initialising and setting the values a lot of variables every draw loop, while you only need to do so once. A better practice would be initialise outside the setup/draw scope, assign values to them inside setup.

Think of an array as a collection of similar data. Here you have multiple x and y positions, so it would make sense to turn them into one array with:

// remember to do this outside the scope of setup() or draw(), otherwise they get garbage collected
float[] xpos, ypos;
//this however, you should do inside setup(), since it's a one-time initiation of the values
xpos = new float[n]; //where n is the number of coordinates
ypos = new float[n];

(actually, if you are certain you won't need more than two or three, it's not quite necessary, but if you might scale up to more it makes changing the numbers later on a lot easier)

You also assign the mouse values to the coordinates first, and then constraint them. Why not do both in one go?

xpos[0] = constrain(mouseX, 50, 450); // remember, arrays start counting at 0
ypos[0] = constrain(mouseY, 50, 450);

As for all the 50, 100, 200, 450, etc.. in the ellipses, those are "magic" numbers. As in: I have no idea what that 50 means? You're better off thinking of what it is you want to put in the ellipse (like, say "distanceFromEdge"), make a variable with the value 50, and use that as a coordinate. You already started with circle_dim, but don't use it more than once for some reason. Assigning values to variables and then using the variables might look like a lot of work, but it has major benefits:

You will know what youre code is supposed to do when you read up on it later on, instead of wondering "what does that 450 represent?"
You will see the underlying structure of your code more clearly

which will allow for optimizations and more readible code in general, like collecting the variables in an array, or using for-loops to iterate over those arrays

I won't do this for you, partially because I don't know what those numbers are supposed to mean specifically ;). But here's the little rewrite so far:

float[] xpos, ypos;
float circle_dim;
void setup() {
size(500,500);
xpos = new float[3]; // where 3 is the number of variable you want
ypos = new float[3];
circle_dim = 50;
}
void draw() {
background(125);
xpos[0] = constrain(mouseX, 50, 450);
ypos[0] = constrain(mouseY, 50, 450);
xpos[1] = constrain(mouseX*1.5, 150, 350);
ypos[1] = constrain(mouseY*1.5, 150, 350);
xpos[2] = constrain(mouseX*1.25, 200, 300);
ypos[2] = constrain(mouseY*1.25, 200, 300);
//outer circles
ellipse(50, ypos[0], 50, 50);
ellipse(50, height - ypos[0], 50, 50);
ellipse(xpos[0], 50, 50,50);
ellipse(width - xpos[0], 50, 50, 50);
ellipse(450, ypos[0], 50, 50);
ellipse(450, height - ypos[0], 50, 50);
ellipse(xpos[0], 450, 50, 50);
ellipse(width - xpos[0], 450, 50, 50);
// inset one
ellipse(150,xpos[1], 100, 100);
ellipse(150, width - xpos[1], 100,100);
ellipse(ypos[1],150, 100,100);
ellipse(width - ypos[1], 150, 100,100);
ellipse(350, xpos[1], 100, 100);
ellipse(350, height - xpos[1], 100,100);
ellipse(ypos[1], 350, 100,100);
ellipse(width - ypos[1], 350, 100, 100);
ellipse(ypos[2], 250, 25, 25);
ellipse(xpos[2], 250, 25, 25);
ellipse( 250,height - ypos[2], 25, 25);
ellipse(250, width - xpos[2], 25, 25);
}

Top Reply