Assignment
This week, your assignment is straightforward: make something with lots of repetition (more than you would want to hand-code), and use one or more for loops to make it simpler. For instance: you could take something you’ve already written where there was a lot of repetition in the code and re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calling rect() inside of a loop that goes around 28 times. Or you could make something new that involves lots and lots of lines but draw them in different places with a for loop. The truth is that writing code is just logic-basd creativity, and this week is about feeding that. So focus more on rethinking HOW you write code than on writing lots of code or creating the coolest sketch.
Presentation
Play here!
Check my code here.
Rules
There are two versions of this interactive game. One version is the arcs and another is the squares.
For the version with arcs, each arc comes from a beginning point from (random(-2,2)) until it becomes a full circle. Hence, it creates the glitch effect of the project. When the keys “r”/”g”/”b”/SPACE are pressed, the stroke will become the corresponding colors.
For the version with squares, I changed the translate() to the position of the square.
Inspirations
I always wanted to tackle the situation of rotate() and apply that to individual object. I have had that question since week 2. Now I am more familiar with class and objects. I wanted to incorporate arithmetic drawings while using for loops. Inspired by the Matrix rain by Jason and Julian from last week, I set my color palette into green stroke and black background.
I played around with several shapes as a starter and experimented a tons of shapes and commands for a few days.
Accomplishments
Created the glitch effect upon experimentation
I stumbled upon the glitch effect when I was experimenting the parameters in the nested for loops. I played around the “i” and “n” numbers to make sure there are only one main thing in the center. When I changed the n number from 10 to 3, it becomes more disorganized in a way the arcs are showing up everywhere and intersecting the center ones.
Played around with the class and objects to understand more
I followed along Emily Xie’s Matrix Rain tutorial and got to understand the objects and class more. I learned if you put parameters in the class, you would have to call it and give it a value when you declare it in the beginning. I am getting used to using class and objects and I am currently dealing with the naming issues since sometimes names get confusing when I involve arrays, variables, and classes.
Understand for loops deeper – iterations
I used several loops in this project. I learned how nested loops change the order and times of iterations when it compared to two separate for loops. I am learning to step away from the urge to type a for loop without thinking what I really wanted to create. Instead of changing the numbers in the for loops to find what I think is cool, I am developing to thinking of a plan and implementing it by programming.
Confusions/Questions
How to apply rotate() to each object created?
Right now, I can only apply to rotate function to one after I use the translate(). I can tell the other objects are rotating but not rotating on their own. My idea would be each object stays at the position and rotates around its center. Yet, in this project, I still couldn’t figure out how to do so. I rewatched the video about translate and rotate by Daniel Shiffman. I discovered one mistake I made after the command “translate(this.x,this.y)”. I wrote the function with x and y coordinates set to this.x and this.y when they are supposed to be 0 and 0 since translate moves the point to the parameters in the translate() function.
I had two translate() functions in my project. One is inside the class where a rotate() function is created within and another one is when I create an array of items in setup. I am not sure if this is the right way to do so?
How to load font on Sublime Text?
The web editor of p5.js crashes multiple time especially when I am coding this week. Yet, I don’t think my code is heavy to make the program crash. Therefore, I started using Sublime and it is super helpful. However, I couldn’t find a way to load the font in Sublime so that the font can be different.
Conclusion
I am happy that I used class to create objects and used array to store them and used several for loops to create the glitch effect in my project! I am looking forward to challenging myself more to create more interesting art.
