Geomerative with Processing.js

jlturpin

I am trying to implement my Geomerative sketches in processing.js, but running into some trouble. This person had the same query, which apparently got an answer, but I'm not too clued up on this so maybe one of you can expand.
PhiLho says: "Extract the point information from the font for the characters you need to use, using Geomerative or other means. Save this information on a file. Load the file from JS and use the information."
How would I go about "storing" that information? What format? How? Thanks.

PhiLho

The person wrote "Using Geomerative, all the points and their coordinates of the text are stored in an array" so my answer was referring to these "points and coordinates". Having not used Geomerative, I don't know how these points and / or coordinates are extracted.

About storing the information: I suppose you can store it as CSV, or as Json, for example.

BTW, I moved the topic to this category, your question isn't "about code" at all, since you show none.

jlturpin

I will have a go at CSV and add some code if I manage. Thanks!

jlturpin

I found an example on supermanoeuvre.com/blog/?p=507 and have managed to get it working in Java mode. Now I'm trying to get the import script to run in Processing.js but it's failing to run, with no errors. If you know what's up please let me know. Thanks!

The export script:

import geomerative.*;
ArrayList pointList;     // arraylist to store the points in
PrintWriter OUTPUT;       // an instantiation of the JAVA PrintWriter object. // This variable reappears in our custom export function
RFont font;
RGroup myGroup;
RPoint[] textPoints;
String myText = "TEST";

void setup() {
  size (1000, 800);
  smooth();
  RG.init(this);  // must be declared in the setup

  font = new RFont("Bebas.ttf", 300, CENTER);
  RCommand.setSegmentLength(25);
  RCommand.setSegmentator(RCommand.UNIFORMLENGTH);
  myGroup = font.toGroup(myText);
  myGroup = myGroup.toPolygonGroup();
  textPoints = myGroup.getPoints();
  pointList = new ArrayList();    // instantiate an ArrayList

    for (int i = 0; i < textPoints.length; i++) {
    float xx = textPoints[i].x + width/2;             // cast string value to a float values!
    float yy = textPoints[i].y + height/2;            // cast string value to a float values!
    float zz = 0;                                     // 2D sketch, z value is 0
    pointList.add( new PVector(xx, yy) );             // add values to a new array slot
  }
}

void draw() {
  background(0);  
  stroke(210);

  for (int i = 0; i < pointList.size (); ++i) {        //VISUALIZE THE POINT SET    
    PVector V = (PVector) pointList.get(i);
    ellipse(V.x, V.y, 8.0, 8.0);
  }
}

void keyPressed() {
  switch(key) {
  case 's':
    saveFrame("importedPoints.jpg");
    break;
  case 'x':
    exportPoints2Text();
    break;
  }
}

void exportPoints2Text() {
  OUTPUT = createWriter("exportedPoints.csv");
  for (int i = 0; i < pointList.size (); ++i) {        
    PVector V = (PVector) pointList.get(i);
    OUTPUT.println(V.x + "," + V.y + "," + V.z);  // here we export the coordinates of the vector using String concatenation!
  }
  OUTPUT.flush();
  OUTPUT.close();
  println("points have been exported");
}

and the import:

/* @pjs preload="exportedPoints.csv"; */

ArrayList pointList;     // arraylist to store the points in

void setup() {
  size (1000, 800);
  smooth();
  pointList = new ArrayList();    // instantiate an ArrayList

  String[] strLines = loadStrings("exportedPoints.csv"); // the name and extension of the file to import!
  for (int i = 0; i < strLines.length; ++i) {
    String[] arrTokens = split(strLines[i], ',');       // use the split array with character to isolate each component
    float xx = float(arrTokens[0]);                     // cast string value to a float values!
    float yy = float(arrTokens[1]);                     // cast string value to a float values!
    float zz = float(arrTokens[2]);                     // cast string value to a float values!
    pointList.add( new PVector(xx, yy, zz) );             // add values to a new array slot
  }
}

void draw() {

  background(0);  
  stroke(210);

  for (int i = 0; i < pointList.size (); ++i) {        
    PVector V = (PVector) pointList.get(i);
    ellipse(V.x, V.y, 5, 5);
  }
}

GoToLoop

In JavaScript Mode, we gotta use JS libraries instead of Java's! :-<
Unless it's cross-mode like the Date class:
http://studio.processingtogether.com/sp/pad/export/ro.9to4yV59zus7B/latest

/**
 * Date Java-JS Bridge (v1.0)
 * by GoToLoop (2014/Feb)
 *
 * forum.processing.org/two/discussion/3350/
 * getting-the-day-of-the-week-without-calendar
 *
 * docs.oracle.com/javase/8/docs/api/java/util/Date.html#getDay--
 */

import java.util.Date;

final int week = new Date().getDay();
println(week);

exit();

You're gonna need to search for a corresponding JS library replacement and thus lose Java Mode compatibility! [..]

In this unfortunate case, I recommend you to learn CoffeeScript Mode due to its similarity w/ Java class! *-:)

jlturpin

Maybe I'm not being clear. The geomerative library is not supported, so I'm doing a workaround.

1st program: export (runs in Java mode) Geomerative library to extract RPoint[] from the font to a .csv file.

2nd file: import (processing.js) Read the .csv file and get those PVectors into the sketch. There are no external java libraries here.

But, still no dice. Am I missing something?

PhiLho

You were clear, I think... B-)

Little improvement over your code, a bit pointless as it won't solve your problem, but it shows some useful shortcuts.

ArrayList<PVector> pointList;     // arraylist to store the points in

void setup() {
  size(1000, 800);
  smooth();
  pointList = new ArrayList<PVector>();    // instantiate an ArrayList

  String[] strLines = loadStrings("exportedPoints.csv"); // the name and extension of the file to import!
  for (String line : strLines) {
    String[] arrTokens = split(line, ',');       // use the split array with character to isolate each component
    float xx = float(arrTokens[0]);              // cast string value to a float values!
    float yy = float(arrTokens[1]);              // cast string value to a float values!
    float zz = float(arrTokens[2]);              // cast string value to a float values!
    pointList.add( new PVector(xx, yy, zz) );    // add values to a new array slot
  }
}

void draw() {
  background(0); 
  stroke(210);

  for (PVector v : pointList) {       
    ellipse(v.x, v.y, 5, 5);
  }
}

Now, back to the issue. Is the CSV file in a data folder inside the sketch folder (the one where the .pde file is)?

You should add some println() to see if the data is correctly loaded.

jlturpin

Thanks for the improvement! I just saw D.Shiffman use that ( : ) syntax in a video a few days ago too. Also, I got the sketch running. Something about the CSV wasn't reading from the HTML file I wrote for it, but it WAS running from Javascript mode from Processing so I just nicked the files (if that makes sense) and bingo.

GoToLoop

I was making an improvement too based on this recent thread:
http://forum.processing.org/two/discussion/6503/rollover-within-a-for-loop

But @PhiLho got it 1st! :P I see that's fixed now! Nevertheless, my version: (~~)

/* @pjs preload = "exportedPoints.csv"; pauseOnBlur = "true"; */

// forum.processing.org/two/discussion/6617/geomerative-with-processing-js

import java.util.List;
final List<PVector> points  = new ArrayList();
static final String CSVFile = "exportedPoints.csv";

static final int DIAM = 030, RAD = DIAM>>1, RAD_SQ = RAD*RAD;
static final int FPS  = 20, OPAQ = 0250;

static final color ON = #2090A0 | OPAQ, OFF = #4020A0 | OPAQ;
static final color BG = 0350;

static final void loadPoints(List<PVector> vecs, char d, String... lines) {
  for (String row: lines) {
    float[] coords = float(split(row, d));
    PVector p = new PVector();

    vecs.add(p);
    p.set(coords);
  }
}

void setup() {
  size(1000, 800, JAVA2D);
  smooth(4);
  noLoop();
  frameRate(FPS);

  noStroke();
  ellipseMode(CENTER);

  String[] csv = loadStrings(CSVFile);
  if (csv == null) {
    println("\nLoading \"" + CSVFile + "\" file has failed!!!\n");
    exit();
  }

  loadPoints(points, ',', csv);
}

void mouseMoved() {
  redraw();
}

void draw() {
  background(BG);

  for (PVector p: points) {
    float x = p.x, y = p.y;
    fill(isMouseOverCircle(x, y, RAD_SQ)? ON : OFF);
    ellipse(x, y, DIAM, DIAM);
  }
}

boolean isMouseOverCircle(float x, float y, int radSq) {
  return sq(mouseX - x) + sq(mouseY - y) < radSq;
}