Bobby Meyer

css | graphic-design | html | javascript | p5js


September 29, 2023

imgraph is a tool I created to rapidly create illustrations within the node and span design guidelines. A photograph is used as the base, and a graph consisting of nodes and spans is constructed over the photo, highlighting connections within the photo.

The software was rapidly developed leveraging ChatGPT: I had a working prototype within 2 hours, and an additional 3 hours fine-tuning features and presentation.




Create New Node:
Left-click on an empty area.
Delete Node:
Right-click on a node.
Drag Node:
Left-click and drag a node.
Toggle Node Color:
Double-click on a node.
Resize Node:
Click on a node and press `+` to increase size.
Click on a node and press `-` to decrease size.
Click on a node and press `*` to double size.
Click on a node and press `/` to halve size.
Create Connection:
Ctrl + left-click on a node, then on another node.
Switch Line Color:
Click "Switch to Black" or "Switch to White" button.
Save Image:
Click "Save" button.
Upload Image:
Select an image file using the file input.
back to posts © 2023 Bobby Meyer