Force-Directed Graph in ToxicLibs

rittermon..

Force-Directed Graph in ToxicLibs

in Contributed Library Questions • 1 year ago

Hello!

I am trying to re-create something very similar to NYTimes recent National Conventions Word Count visualization using Processing and ToxicLibs:

http://www.nytimes.com/interactive/2012/09/06/us/politics/convention-word-counts.html#!

Could someone help me understand the force/spring logic behind this visualization at a conceptual level?

My understanding is that there should be a negative attraction force around each particle to take care of collisions. From there, would the particles be attracted by a positive force in the middle of the visualization, but "pulled" left or right (by a spring?) depending on its relative democratic/republican word usage?

If so, would this be best implemented in Processing/ToxicLibs with VerletSpring2D, or with VerletMinDistanceSpring2D?

The way I have it set up now is with locked particles on the left (p1) and right (p2), and a positive attraction force in the middle. I then create spring connections between p1 and all nodes, and p2 and all nodes. I have then been trying to weight the "springiness" and/or minimum distance to push/pull the nodes according to frequency. I can't seem to get a result similar to the NYTimes visualization, though.

My Processing experience is beginner/intermediate, so I just wanted to see if I am even headed in the right direction on this. Any help would be greatly appreciated!

All the best,

Ryan

Replies(4)

mr.t

Re: Force-Directed Graph in ToxicLibs

1 year ago

you approch doesn't sound bad. yes. one center forrce. one left one right. try to use very very low forces. and set the dragsensitivity a bit higher then usual.

when taking of force i mean verletSprings.

a good way is always to use sliders like controlP5 to find the values you need to weight the forces out.

try some kind of bullet physics or anything else that handles collision rather then negative force.

toxi might have something there as well.

hope that get's you started!
and good luck!

toxmeister

Re: Force-Directed Graph in ToxicLibs

1 year ago

You don't necessarily need springs to do something like this. Below is a modified version of the Attraction2D demo bundled with the libs and extended to use multiple attractors (2) for forming political clusters:

/**
* PoliticalClusters demo is based on Attraction2D demo bundled with
* toxiclibs-0020.
*
* Copyright (c) 2012 Karsten Schmidt // LGPL 2.1 licensed
*/
import toxi.geom.*;
import toxi.math.*;
import toxi.color.*;
import toxi.util.datatypes.*;
import toxi.physics2d.*;
import toxi.physics2d.behaviors.*;
import processing.opengl.*;
int NUM_PARTICLES = 200;
VerletPhysics2D physics;
// attractors for forming clusters
AttractionBehavior leftWing, rightWing;
// size range for particles (with bias @ 20, 33% standard deviation)
BiasedFloatRange sizeRange = new BiasedFloatRange(5, 50, 20, 0.33);
void setup() {
size(1280, 720, OPENGL);
// setup physics with 10% drag
physics = new VerletPhysics2D();
physics.setDrag(0.1f);
physics.setWorldBounds(new Rect(0, 0, width, height));
leftWing = new AttractionBehavior(new Vec2D(width*0.25, height/2), width, 0.1f);
rightWing = new AttractionBehavior(new Vec2D(width*0.75, height/2), width, 0.1f);
}
void addParticle() {
boolean isLeftWing = MathUtils.flipCoin();
Vec2D pos = new Vec2D(width, 0).scaleSelf(isLeftWing ? 0.25 : 0.75);
PoliticalParticle p = new PoliticalParticle(pos, sizeRange.pickRandom(), isLeftWing);
physics.addParticle(p);
// add to either political attractor
p.addBehavior(p.isLeftWing ? leftWing : rightWing);
// add a negative attraction force field around the new particle
// make force radius slightly larger than needed to create gaps between particles
physics.addBehavior(new AttractionBehavior(p, p.size*2.2, -2f, 0.01f));
}
void draw() {
ellipseMode(RADIUS);
background(255);
noStroke();
fill(255);
if (physics.particles.size() < NUM_PARTICLES) {
addParticle();
}
physics.update();
for (VerletParticle2D p : physics.particles) {
PoliticalParticle pp = (PoliticalParticle)p;
fill((pp.isLeftWing ? TColor.RED : TColor.BLUE).toARGB());
ellipse(p.x, p.y, pp.size, pp.size);
}
}
class PoliticalParticle extends VerletParticle2D {
float size;
boolean isLeftWing;
PoliticalParticle(Vec2D p, float r, boolean isLeftWing) {
super(p);
this.size = r;
this.isLeftWing = isLeftWing;
}
}

This should provide you with a good start, but you'll most likely have to tweak attraction forces & the general drag...

Hth!

http://postspectacular.com | http://toxiclibs.org

rittermon..

Re: Force-Directed Graph in ToxicLibs

1 year ago

This is great! Thank you both mr.t and toxmeister for your replies!!

Toxmeister - your modified demo for political clusters is awesome. I can definitely use this to build from, and try to create a continuous force effect so that words are not necessarily one cluster or the other, but vary along the x-axis according to whether the words are used mostly by only one group (thus trending toward the far left or right) or both groups (thus trending toward the middle).

Thanks again!

rittermon..

Re: Force-Directed Graph in ToxicLibs

1 year ago

Hello again,

For anyone curious, I've found a solution that seems to work pretty well (still working on touching up final product). Rather than using attraction forces I ended up using the 'map' and 'addForce' functions to assign a positive or negative force (along the x-axis only) to each particle based on how often each word is used by groupA vs. groupB. I then added springs from each particle to the center of the graph, and again used the map function to constrain its distance from center. Ellipses are scaled according to overall word usage, and lerpColor used for shading.

Thanks again for the help!

Top Reply