Hi,
I’m a newbie on here. I was wondering if I could get some help, please. I’ve been set a task of drawing a spiral made up from squares with lines connecting adjacent points and stuck on how to approach it.
Heres what its meant to look like.
Here’s my code for the spiral:
//Sets up the canvas
void setup() {
size (800, 800);
background(255);
}
//Draws what ever is in the function.
void draw() {
for (int i = 0; i < 108; i++) {
float angle = radians(i);
float xcent= width/2; //Center of circle on x axis
float ycent = height/2; //Center of circle on y axis.
//Sine and Consine is used to find the center of the circle which is being drawn.
float radius = 250 - i;
float xcord = xcent + cos(angle*10) * radius;
float ycord = ycent + sin(angle*10) * radius;
float px = xcent + cos(angle*10) * radius;
float py = ycent + sin(angle*10) * radius;
//Loop that draws the squares and fills them with the specific colour.
fill(255, 0, 0);
if (i >72) {
fill(0, 0, 255);
} else if (i >36) {
fill(0, 255, 0);
}
rect(xcord, ycord, 10, 10);
line(xcord, ycord, px, radius);
}
}
Before helping you, I just wanna point out that you don’t need to have a draw function for what you want to do. All your code can go in the setup() function like so:
//Sets up the canvas
void setup() {
size (800, 800);
background(255);
for (int i = 0; i < 108; i++) {
float angle = radians(i);
float xcent= width/2; //Center of circle on x axis
float ycent = height/2; //Center of circle on y axis.
//Sine and Consine is used to find the center of the circle which is being drawn.
float radius = 250 - i;
float xcord = xcent + cos(angle*10) * radius;
float ycord = ycent + sin(angle*10) * radius;
float px = xcent + cos(angle*10) * radius;
float py = ycent + sin(angle*10) * radius;
//Loop that draws the squares and fills them with the specific colour.
fill(255, 0, 0);
if (i >72) {
fill(0, 0, 255);
} else if (i >36) {
fill(0, 255, 0);
}
rect(xcord, ycord, 10, 10);
line(xcord, ycord, px, py);
}
}
Draw is called 60 times per second so your are drawing your squares over and over 60 times per second.
Now for your question, you need a way in your for loop to remember the previous point you draw. To do that you can simply create 2 variables previousX and previousY and at the end of a loop you store the x and y coordinate of the point you just drew. This way during the next loop, you can draw a line from the previous point to the new one.
Start by adding two new variables that will remember the position of the previous square you drew. What type of variables will they be? What will their names be? Bonus question: What would be a good initial value for these new variables?
Now change the line of code that draws your line. Which line of code is it? Hint: It’s drawing a line(). Change the parameters to the line() function so that it draws the line between the current square’s position (which variables are the current position?) and the previous square’s position (which variables are those? Hint: You just added them!).
Now that you’ve draw the current square, you have to remember that it will be the previous square for the next square. So record its position in the previous square’s position variables.
This will work, and you will get lines drawn between your squares - but there will be issues! We realize this, but are reluctant to help you further (or provide a full-code solution) until you have demonstrated some of your own effort into changing the code you have.
I have made another attempt, the problem I have now is that the line i drew isn’t appearing.
//Sets up the canvas
void setup() {
size (800, 800);
background(255);
}
//Draws what ever is in the function.
void draw() {
for (int i = 0; i < 108; i++) {
float angle = radians(i);
float xcent= width/2; //Center of circle on x axis
float ycent = height/2; //Center of circle on y axis.
//Sine and Consine is used to find the center of the circle which is being drawn.
float radius = 250 - i;
float xcord = xcent + cos(angle*10) * radius;
float ycord = ycent + sin(angle*10) * radius;
float px = xcent + cos(angle*10) * radius;
float py = ycent + sin(angle*10) * radius;
//Loop that draws the squares and fills them with the specific colour.
fill(255, 0, 0);
if (i >72) {
fill(0, 0, 255);
} else if (i >36) {
fill(0, 255, 0);
}
rect(xcord, ycord, 10, 10);
px = xcord;
py = ycord;
line(xcord,ycord,px,py);
}
}
Okay. Since you want the previous position from one iteration of your loop to be available in the next iteration, you can’t define the variables that save the previous position inside the loop! (You could, however, calculate what the previous position was, but this would be a duplication of effort.) That means that you need to declare them before the loop starts.
void draw(){
// ...
float previous_square_position_X;
float previous_square_position_Y;
for( ... ){
// draw square (px, py)
// draw a line (px, py, previous_square_position_X, previous_square_position_Y)
// save current position for use in next iteration
previous_square_position_X = px;
previous_square_position_Y = py;
}
}
jb4x literally just told you exactly what is wrong. You are changing the “previous position” variables to have the current position before you are drawing the line.
You need to change them AFTER you have drawn the line.
That you couldn’t fix this after having being told exactly what is wrong with it is EXTREMELY troubling. Please take some time to understand your own code… and how variable assignment works. Please. Please please please.
