Playful Shapes

This is a generative art project using the P5 JavaScript library by Matthew Sanner and Alberto Duarte.

Playful Shapes merges background and foreground animations by instantiating each as a class object and calling them inside of the p5 Draw() function in the main canvas.js file. The background class creates a new shape each time and places it randomly on the canvas within a range of x and y coordinates corresponding to window size. The color of each background shape is also selected randomly but within a range of RGB color values. The foreground class instantiates a new object 30 times per second and uses nested iterations to create the shapes. The shape is drawn and erased at each frame to achieve a no-trails movement effect using the background() inside of the draw() function. Interactive elements include allowing the user to select the shape, colors and to affect foreground movement with the position of their cursor.

Special emphasis was given to good coding practices and conventions. Every major function is sign-posted with descriptive comments for future reference and clarification. Class and ID attributes of HTML nodes are named using hyphens and JavaScript variables with camel case. The application structure branches from a main JS file into two separate files each handling their respective concern.

For general users, Playful Shapes is an aesthetically pleasing color coordinated interactive experience. For the creators, it has been an opportunity to apply: collaborative project planning on FigJam, version control on GitHub, and the integration of technologies to create a fully responsive web application. For other developers, it is a model for how p5 can be used with object oriented programing to make a generative art application.

We invite potential collaborators to help with the following improvements:

1. Each of the moving foreground shapes ascends in stacking order clockwise until it reaches the last shape. The last shape, however, is awkwardly stacked over both the previous and the first shape in the sequence. We would like to make each shape stack in the same way.
2. The background shapes are less complex than the foreground shapes. The background shapes could be made more dynamic by changing their attributes.
3. We also discussed adding a Hexagon shape and button as an option.

Feel free to reach out to talk about any other ideas you might have to improve the project. You can contact Beto at betodute@gmail.com and Matthew at gravityskunk@gmail.com or on our Linked-In group.