Shape Code Generator
by
Shannon Sauhee Han
© last update: Jan 9, 2025
Shape Features
Canvas Size
Code Format
Cursor Sensitivity
?
1
Drag the vertices to reposition them!
2
Click on the line to add a new vertex!
3
Double click vertices to delete them!
4
Double click saved shapes to edit them!
5
Updating Canvas Size is not in the code:
fix createCanvas(width, height); in the P5.js Editor's default setup() function with your inputs.
6
The code uses RGB format for the colors:
You can just copy and paste it on the Editor and see the shapes in correct colors right away!
7
This tool is currently under major construction. Stay tuned for updates! :)
Cursor Sensitivity:
6
Canvas Width:
Canvas Height:
Update Canvas
Use p.
Fill
Stroke
Stroke Weight:
2
Closed Shape
Draw:
Straight
Curve
Circle
Ellipse
Save the Shape
Undo Last Point
Remove Current Shape
Remove Saved Shapes
Copy Code
