Archived Sketch
This sketch is created with an older version of Processing,
and doesn't work on browsers anymore.
Force Directed Placement
by
A graph is drawn considering the edges like springs and the nodes like masses.
the key controls are:
't' - toggle trail rendering
'b' - toggle masses rendering
'+' - add masses
any other key to switch between random generation and fully connected graph.
click with the mouse to have some fun.
in RANDOM mode every mass increase as new masses are created and connected with it.
in GRAPH mode every node has the same mass to let the algorithm converge to a beautiful star shape.
- Arc.pde
- FDP.pde
- Node.pde
- Vector2D.pde
xxxxxxxxxxclass Arc{ Node v; Node u; Arc(Node _s, Node _e){ v=_s; u=_e; } void draw(){ int r=(int)((red(v.mycolor)+red(u.mycolor))/2); int g=(int)((green(v.mycolor)+green(u.mycolor))/2); int b=(int)((blue(v.mycolor)+blue(u.mycolor))/2); stroke(r,g,b); //line(v.pos.x,v.pos.y,u.pos.x,u.pos.y); bezier(v.pos.x,v.pos.y,v.oldpos[2].x,v.oldpos[2].y,u.oldpos[2].x,u.oldpos[2].y,u.pos.x,u.pos.y); noStroke(); }}This will be the default layout for your sketches
Easy on the eyes
It will show up when there is an error or print() in code
Disabled: Only available on p5js sketches.
Closes parenthesis-like characters automatically as you type
Controls
Play
Ctrl+Enter
Code
Ctrl+Shift+Enter
Save
Ctrl+S
Interface
Fullscreen
Ctrl+Alt+F
Switch Layout
Ctrl+Alt+L
Settings
Ctrl+Alt+.
Editor
Tidy Code
Ctrl+B
Multiple Cursors
Ctrl+Click
Duplicate Line/Selection
Ctrl+Shift+D
Move Line
Alt+↑/↓
Select Multiple
Ctrl+D
Find in Code
Ctrl+F
Find Next
Ctrl+G
Find Previous
Ctrl+Shift+G