Where can I find the processing animation code for the following two pictures?

Happier

Hello, processing community,Where can I find the processing animation code for the following two pictures? Or is there any good opening animation case or code? look forward to your reply.

Chrisir

See examples section

Then animation

Happier

OK.

Happier

But I want this above, can I find it? Or is similar.

koogs

where did you get the pictures? maybe start there...

koogs

top one: http://internet-map.net/#9-150.8622589111328-73.87336730957033

which isn't an animation unless you count zooming in...

the second one is on vimeo - https://vimeo.com/41655330

Chrisir

Show your attempt, Happier

That’s so simple

kfrajer

https://forum.processing.org/two/discussion/25168/radiant-poisson-disks

https://www.google.com/search?q=shiffman+poisson+disk&ie=utf-8&oe=utf-8&client=firefox-b-1-ab

Kf

Niels

@Happier Here is my contribution to the cause. This sketch uses the PeasyCam library (its a contributed library so you can added it to your Processing IDE setup).

You will have to download the CSV file from here: https://catalog.data.gov/dataset/broadband-availability-by-municipality

Save it in the sketch folder with the .pde file. It is only 192KB so not very big. As for where to put the data points that is up to your creativity. ;)

// Draw Light Spot Particles of Broadband Usage
// by Niels J-L
//
// Using "Broadband availability by Municipality" CSV file at:
//  https://catalog.data.gov/dataset/broadband-availability-by-municipality
//
// USGS site for GNIS ID lookup: https://geonames.usgs.gov/pls/gnispublic/

// PeasyCam - Processing contributed library
import peasy.*;
import peasy.org.apache.commons.math.*;
import peasy.org.apache.commons.math.geometry.*;

//final float scalingFactor = 20.0;
final float scaleRadius = 0.5;
final float distanceFactor = 50.0;

final int sphereResolution = 12; // default is 30, minimum is 3 -- reduce to increase performance

float rotOffset;
Table table;
PeasyCam cam;
DataPoint[] data;

void setup() {
  size(800, 800, P3D);
  colorMode(HSB, 255, 100, 100);

  cam = new PeasyCam(this, 0, 0, 0, 500);

  table = loadTable("Broadband_Availability_By_Municipality.csv", "header");
  data = new DataPoint[table.getRowCount()];
  //println(table.getRowCount() + " total rows in table"); 

  int i = 0;
  float angle = 0.0;
  float r = 10.0;
  for (TableRow row : table.rows()) {
    // Retrieve specific data columns
    int id = row.getInt("GNIS ID");
    int count = row.getInt("# Hse Units Wireline");

    // Make-up some interesting coordinates
    float rx = r * sin(angle);
    float ry = r * cos(angle);
    float rz = -(float)i / 2.0;
    PVector pt = new PVector(rx, ry, rz);

    // Move polar coordinates around
    r += 10.0;
    if (r > 150.0) {
      r = 10.0;
      angle += 0.5;
    }

    // Use Natural log to calc. sphere radius and color hue
    float hue = map(log(count), 0.0, 27.0, 0.0, 255.0);
    float radius = floor(log(count) * scaleRadius);

    data[i++] = new DataPoint(pt, radius, color(hue, 100, 100)); // New data point sphere

    println("ID:" + id + " Units = " + count + ", Hue = " + hue + ", Pt = " + rx + "," + ry + "," + rz);
  }
}

void draw() {
  background(0, 0, 0);

  rotOffset = frameCount * 0.01;

  lights();

  rotateX(PI);
  rotateY(PI / 8);
  rotateZ(rotOffset);

  stroke(10, 10, 10, 63); // Dark gray with 50% opacity
  strokeWeight(1);
  noStroke(); // Turn off stroke lines of triangles forming each sphere

  sphereDetail(sphereResolution);
  for (DataPoint dataPt : data) {
    dataPt.draw();
  }
}

class DataPoint {
  PVector pos; // 3D cartesian coords.
  float radius; // Sphere radius
  color colour; // Sphere color

  DataPoint() {
    pos = null;
  }

  DataPoint(PVector p, float r, color c) {
    pos = p;
    radius = r;
    colour = c;
  }

  void setColor(color c) {
    colour = c;
  }

  void draw() {
    if (pos == null) return;

    pushStyle(); 
    pushMatrix();

    fill(colour, 127); // Opacity 50%
    translate(pos.x, pos.y, pos.z);
    sphere(radius);

    popMatrix(); 
    popStyle();
  }
}

jeremydouglass

In general, visualizations like this are often undirected graphs laid out using a force directed layout -- a.k.a. a "spring graph" or graph with springs. Knowing the right terms helps search for similar solutions developed by others.

• https://www.google.com/search?q=processing+"force+directed"

You can also use it to compare with work done in p5.js or d3, et cetera.

• https://github.com/d3/d3-force

Niels

@jeremydouglass Thank you for the information and sharing. I was simply impressed that I could achieve what I did in 120 lines of Processing code.

Though, I'm also confident that Edward Tufte would be chewing the sofa at my so-called attempt at visual explanation. :))

BTW: In the process of researching this I came across a site that appears to be a compendium of data visualization: datavizproject.com/

jeremydouglass

Yes, that is a good resource -- they list some examples under "network visualization" http://datavizproject.com/data-type/network-visualisation/

If you want to to more than just layout (e.g. perform network analytics etc.) with a full network library and integrate it into a Processing(Java) sketch then I would recommend trying out GraphStream.

• http://graphstream-project.org/

To get started, manually install the library into the code folder of your sketch, then:

import org.graphstream.graph.*;
import org.graphstream.algorithm.Toolkit.*;