P5js Shapes to Code

This program is written in Javascript using the P5js library. While teaching introductory code classes, I noticed some of the students were struggling to code coordinates for their 2D shapes. This program lets users plot multiple shapes onto the grid before outputting the shapes as lines of code. The code can then be copied and pasted into a P5js sketch. The user only needs to determine the x and y coordinates of their drawing in the translate function to move the shapes to their desired location.

 

This program was designed to work with a mouse and keyboard and so may not run as expected on phones or other touch screen devices.
 

The program can also be viewed on the P5js website and the code behind it can viewed in the P5js web editor