Concept
Initially, I thought of making something with lines and creating some sort of an illusion. Then I remembered something I saw in Brooklyn’s Botanic Garden during my study away. It was a series of lights in lines converging into one single point. It looked amazing in the dark and I was really inspired by its pattern, so I thought of recreating it.
I feel like the pattern came out exactly as I wanted it to be, maybe even better because it changes color based on the position of the mouse. Once I was done with the lines, I made triangles to give a 3D effect so it seems like the pattern is inside a cube.
Implementation
I had to think quite a lot about where to place the lines and where to converge them to give the illusion effect. Especially since we had to implement the pattern using for loops, I had to think about where I had to place the “i” to change the position of the lines in the way I wanted.
The two main sections of my code are where I implemented the for loops for the changing-color lines and for the top and bottom triangle patterns.
The first one for the changing-color lines is below:
// creating a for loop for the changing line patterns on the left and right
// loops till the width in steps of 5, the steps define the spacing between the lines
for (let i = 0; i < width; i = i + 5) {
// changing color patterns, increase mouseX for more red and increase mouseY for more green
stroke(mouseX - random(255), mouseY - random(255), random(255));
// dividing pattern into two halves (left side and right side) and making separate lines for each
// left half
line(0, i, mouseX, mouseY);
// right half
line(width, height - i, mouseX, mouseY);
}
I played around with the color-changing part until I was satisfied with the color combinations I achieved. The lines were made in two parts, the left half and the right half. This gave a triangle effect (two triangles on the left and right changing colors) without actually creating triangles. The starting points for the lines were changed using the for loop and the ending points were always the mouse position.
The second one for the top and bottom triangle patterns was done using the following for loop:
// making a for loop for white triangle patterns on top and bottom
for (let i = 0; i < width / 2; i = i + 10) {
noFill()
stroke(100)
// one point on the top left half of the canvas, one point on the mouse position, and another one
// on the top right half of the canvas
triangle(i, 0, mouseX, mouseY, width - i, 0)
// repeating procedure for triangles on the bottom half
triangle(i, height, mouseX, mouseY, width - i, height)
}
I achieved this pattern by dividing the width into two halves (left and right sections) and then looping to make triangles from left to right. The converse was done from the right-to-left half as well. This gave me the white triangles that move based on the mouse position.
Reflection
I feel like I achieved exactly what I was going for in this assignment and the pattern turned out to look quite visually pleasing. I had the chance of showing it to my friends as well and getting their feedback and I subsequently added the triangle patterns on the top and bottom right after. Next time, I would like to use the mouseClicked() and keyPressed() functions to add even more user interactions.