Loop Assignment

Concept:

So for this assignment I kind of wanted to go with something with like an early computer generated vibe kind of like the pictures you provided us instead of trying to make an object or character through loops.

So essentially this is a grid that is made out of either circles or squares depending on where your mouse is, the user controls what happens to the grid using the mouse itself. Moving it left changes the RGB selection so you change the color itself, moving it up and down also changes another part of the color completely and the mouse even affects how large the shapes become.

What I liked about this idea is that the structure itself stayed the same but the actual image itself never looks the same because random was used for the size of every shape so even if its in the same place it’ll constantly keep changing its never the same thing.

Highlighted Code:

One of the parts I am most proud of is the nested loops itself:

for (let x = 25; x < width; x += 50) {
  for (let y = 25; y < height; y += 50) {

Because although we did learn this in class, I couldn’t wrap my head around it properly the idea of a nested loop how it worked and how it kept repeating with eachother so I had to overcome that hurdle.

I started thinking of the outside loop as like picking one column andthen the inside loop going all the way down the column and that once it finished the outside loop just goes over by fifty andthen it starts over and over again. For some reason, I couldn’t wrap my head around that before but now I have.

The other part I like was this

let s = random(8, mouseX / 10 + 10);

This controlled the size of every shape, so when the mouse was farther toward the right side of the screen the shapes become much larger. At the same time I used random as well so not every shape became the exact same size, each one has its own value.

And I think that was more interesting than just making every shape the same and grow equally and it just looks nice.

Reflection:

I think honestly the main thing I got from this was how much you can actually do with loops without even writing that much although writing even that amount of code took me way too long than it should have to figure out what I needed to do.

If I tried to make this grid manually, and I did try, I would have had to write dozens of ellipses and rectangles and have to get the position for every single one the computer is doing all the work for me.

As I said in my previous sections as I well I had a tough time wrapping my head around nested loops itself but then I managed to get the hang of it and figure it out. I think the reason I didnt understand it was like there were two variables changing at the same time, etc.

I also really like experimenting with random because like everytime you looked back at the art it was different like everytime you saw it, it was in a different size and was jsut overall different in someway. And my favorite part about it is the ability for the user itself to interact with them because they can actually change the color and the size of the shapes themselves.

I think if I wanted to keep working on it in the future, I think I would just add like more shapes and more like colors and make it so the spacing could maybe change between them depending on the position of the mouse itself.