Interconnected

Inspiration: We were inspired by both discussions of diversity and inclusion at school, and my exploration of minimalist art in a minimester I took earlier this year. This project forged these two ideas into one creation.

What it does: A user can click to create new, randomly generated shapes, and our program will automatically draw lines of connection between these shapes. Pressing the space bar turns the connections into straight, vertical lines so the user has a visual representation of how many connections they made. Afterwards, the user can add new shapes that will connect to not only the other shapes on the canvas, but to random spots on all of the pre-existing lines. The user can press the space bar again to see a new collection of lines, showing the updated number of connections. This is meant to illustrate how at our school, no matter how firm and set relationships between students, groups and demographics may seem, all are welcome to forge connections with one another. Finally, the user has the option to download the canvas as a png file, taking a symbol of connection wherever they go.

How we built it: We used a mouseClicked() function to create new shapes, and programmed for loops to draw lines between these shapes as they are created. We also used keyPressed() to generate the vertical lines. Challenges we ran into: The design of the mechanism that connected new shapes to the vertical lines was particularly challenging for us, and troubleshooting and formatting were additionally difficult at times.

Accomplishments that we're proud of: Showing our message in a creative way through art.

Built With

• html
• javascript
• p5.dom
• p5.js