My Concept
For this assignment, I decided to come up with something relatively simple that incorporates repetition and movement into one piece. The idea is to have a circle moving left and right while multiple lines are attached to it from above, starting from different points along the top of the canvas. As the circle moves, the lines move slightly as well, making them appear as though they are being pulled by the circle. I also wanted the background to respond to the movement, so I used different shades that change as the circle moves across the canvas.
Code Im Proud Of
//multiple lines
for (let lineX = 20; lineX < 400; lineX = lineX + 30) {
//makes the lines move with the circle
let pull = (x - 200) / 8
//draws the line from the top of the circle
line(lineX + pull, 0, x, 300)
}
This is a section of code that I am really proud of because this is where I was able to take the idea of loops that we learned in class and actually use it in my own work. At first, I was a little confused about how I could use the loop together with the movement of the circle, but once I worked through it, it started to make a lot more sense. I used the loop to repeat the lines across the canvas instead of having to write each line individually. I started the first line at 20 and then increased it by 30 every time the loop repeated, which created the space between each line. I then used the pull variable to slightly move the starting point of the lines depending on where the circle was. Since all of the lines end at the position of the circle, they move along with it as the circle moves from side to side. I think this part helped me understand the loop much better because I could actually see what it was doing in my own piece.
How This Was Made
I created this piece using p5. While working on the sketch, I referred back to my class notes and the presentation, as well as the p5 references whenever I needed some extra help understanding how to apply these concepts to my code.
References:
https://p5js.org/reference/p5/loop/
https://p5js.org/reference/p5/for/
https://p5js.org/reference/p5/if/
Reflection
This assignment allowed me to improve my skills in writing loops and if statements, which were a bit difficult for me to apply and understand before working on this piece. At the beginning, I struggled a bit with figuring out how everything would fit together and how the different parts of the code would work with each other, but as I kept working on the assignment, it became much easier for me to understand. The if statements also started making more sense once I saw how they influenced the movement of the circle and the changes in the background. In the future, I would like to make this piece more complicated as I learn new things in p5 and improve my coding skills. I believe that I could do much more with the same idea, especially with the movement of the circle and the way the lines interact with it.