Geometric
programs
processing
instructions
To Interact with this code, click the Enter Button.
description
Using a series of commands and rules, this code creates a series of lines. Using those lines creates different shapes, and colors those shapes with a random color from a predetermined collection. The beauty of this code is that no matter how many sides the shape is, it is able to use the given points and create the necessary shape
One day I was watching television and someone was painting their room. I was fascinated by the pattern and wondered if I could create that pattern through code. I knew my first step was to research. I started researching patterns and trying to dissect the steps I need to take to make my dream a reality.
My first step was to draw lines across, the canvas to create our initial pattern. Creating the lines was relatively easy, the hard part came when I had to try and color the individual shapes in different colors. Especially when each shape is different and unique. This posed a unique challenge that took me some time to figure out.
Initially, I was stuck, couldn’t figure out what was doing, so I started giving each coordinate a number. Using these numbers, I started to map out different segments. This allowed me to use the various lines I had and split them into individual segments. These segments I can then use to help build the different shapes.
This is where things started to get tricky again. Once I had segments, I had to find a way to determine which segments were needed and in which order to create these shapes. I realized that from one point to the second, I would have to locate the next segment with the smallest angle to make sure we go in a circular pattern trying to reach back to the same point I started with.
I knew what I had to do, but then came the challenge of figuring out how to determine the segment with the smallest angle in a singular direction but that direction created between two segments. The hard part was that in P5js the calculated angle would always start the top direction, so I had to try and figure out a way that I could create the angle in direction.
Finally, I was able to find a formula that worked and allowed me to calculate and isolate the necessary segment.
This code goes through all the segments I created I would check the different segments that are connected to my previous one, and using the V1 and V2 formulas I would determine the angle. That angle was then checked against the lowest angle I had saved. After going through all the segments, I would record that segment, and push it into the shape. And then I would check to see if the last segment connected to the first. If it did the while loop would stop, and that shape would be created and pushed.
Finally, I would choose one of 4 colors to fill the shape, and then that shape would be created. This project took me a few weeks to figure out, but each little improvement was terrific to see, and I loved working on a project like this and will continue to develop and work on various ideas.
Check out the creative code below: