ASSIGNMENT
Make an algorithmic drawing. OR Try making a rollover, button, or slider from scratch.
inspiration
After an initial brainstorm, my group and I decided to make an algorithmic drawing. We wanted to make a scene with the loch ness monster, so we drew a sketch of what the p5 scene would be. Our goal was to make the lightning occur in repetitious patterns throughout the background. A link to the final code is here.
process
We looked at various pictures of lightning as a framework for how we wanted to represent our lightning. From the lightning image we found, it looked like one lightning bolt with various branches of lightning poking out everywhere. In other words, it was random. So we thought about using the random function.
When we coded our random lines, there were various disjointed lines flickering all over the screen. To connect the lines we tried simplifying our code to create one repetitious lightning bolt. To create a repetitious pattern, we utilized a “for loop”, for the “>” part of the lightning. We experimented with creating this loop in p5, but realized it was more complicated than intended, with a resident suggesting perhaps the need to do classes.
We decided maybe we should simplify it further and not write classes, so we wrote code for multiple lines and connected them where the (x2, y2) coordinate was the (x1, y1) coordinate for the next line.
We ended up making the lightning by connecting the various lines together and using the random function to give it a chaotic lightning effect. The code for that portion of the image is here.
We slowly started incorporating elements into the image: the gradient background, the fog and the monster. We uploaded images for the gradient background and monster. We also wanted to add waves to the sea for our algorithmic design but were running into some issues, because while the “wave” code was running on its own when we put it into our main image, it only ran one line at a time versus various lines simultaneously. After visiting resident office hours, we found it was because the draw function was redrawing each time each time the draw loop ran. In essence, it was “restarting the code” so we could not see our various lines all at once.
So, we decided to pivot and make a rollover, where the monster would change states when your mouse moved across the screen.
We also spent a long time trying to move the fog back and forth across the screen, but multiple times the fog image went completely off screen or did not move enough. Our main question from this assignment was how to correctly set parameters so objects can move back and forth across the screen?
ABBY LEE - ITP BLOG 