works in Java and IF I remove the PImage code, it works in Javascript, but will not use correct font

clair

I seemed to be doomed by Java/Javascript -- I spend the hours I should be learning Processing on going blind looking for issues before I give up and post the problem here. It's discouraging. But I am glad "you" are here!!

1. screen shot below shows correct display (image and typefaces)

2. If the three lines which refer to the PImage are commented out, the sketch works in Javascript, but does not load the fonts. And, to hedge my bets, both .vlw files are out front in the same dir. as the .pde AND in the Data dir.

// Big Data American: For Edward Snowden // Clair Dunn 25 August 2013 reworked 15 October 2013 // starting point: the tiny Reas code for the Brownian movement

PImage img;  

PFont SM; // initialize font
PFont LG;

int x = 300;
int y = 480;
int rangex = 600;
int rangey = 460;
int ex = 0;
int ey = 0;

int xp;     // variable to hold pointer to text phrase

color redprt = color(255, 12, 12);

String [] sa1 = { 
  "follow me", "When are", "Richard likes", "if he", "1 p.m.", "Main and 3rd", 
  "everyday", "AK-47", "love you", "Chevy", "even if you", "when you do", 
  "short barrel", "brewer's yeast", "roses grow well here", "a dozen", "trigger", 
  "Tenafly", "Ecuador does not", "trace", "Dinah Shore was", "C4", "xyvdx llgk8r4tx2", 
  "need a driver", "we can meet in Starbucks", "unknown", "recognize him", "on the list", 
  "Woolf", "Obama", "take a look at", "MLK Jr.", "LAX", "Patrick", "DFW early", "train leaves", 
  "do it", "grenades", "or Barnes and Noble", "fertilizer", "WTC", "40 of them", 
  "when the time comes", "plastic gun", "last laugh", "tomorrow night", "August 25", "park behind", 
  "after hours", "change of shift", "it will be quiet", "empty street", "4th door on the left", 
  "Golden Girls episode", "Pentagon Papers", "I liked her immediately and", "in case we", 
  "NSA does", "once AT&T gives", "concert last night", "routers are not", "Ellsberg thinks", 
  "words are tokens", "I love you", "29 at this time", "blue coat", "theoretically", 
  "data base", "hacker is", "car is fast", "not here yet", "another phone", "leave it behind", 
  "55 limit", "in Zagreb we", "Manning", "Bobby Fischer", "when she said", "chance at LAX", 
  "flowers you sent", "canoe trip", "in Montreal", "last summer", "always have Paris", 
  "Christopher Street", "Wuthering Heights", "French Quarter is", "did you ever see", 
  "3-D printer", "subway map", "Snowden"
};
String [] RSprt = { 
  "LAX", "C4", "AK-47", "xyvdx llgk8r4tx2", "NSA does", "3-D printer", 
  "subway map", "Snowden", "Ellsberg", "fertilizer", "Manning", "WTC"
};

void setup() {

  size(600, 500);

  img = loadImage("city-scape-snowden.jpg");
  background(img);

  LG = loadFont("Courier10PitchBT-Roman-24.vlw");
  SM = loadFont("Courier10PitchBT-Roman-16.vlw"); 
  frameRate(2);
}

void draw() {
  //  point (x, y);
  fill(255, 0, 0); // make a red circle around each node
  ellipse(x, y, 8, 8);
  ex = int(random(0, rangex));
  ey = int(random(0, rangey));
  stroke(4, 216, 52);  // green line
  line(x, y, ex, ey);
  xp =  int(random(90)); // randomly select pointer to text in array
  for (int i = 0; i<= RSprt.length-1; i++) {
    // check text against red list
    if (RSprt[i] == sa1[xp]) {
      textFont(LG);
      fill(redprt); // print in red
      // print the text at the node
      text(sa1[xp], ex+5, ey+5);
    } 
    else {
      textFont(SM);
      //insert an occasional glitch
      if (sa1[xp] == "I love you") {
        fill(redprt);
      }
      else {
        fill(random(100), random(127), random(255), 15); //randomize the text color
      }
      // print the text at the node
      text(sa1[xp], ex+5, ey+5);
    } 
    x = ex;
    y = ey;
  }
}

GoToLoop

I guess you need to read this basic Processing.JS tutorial: :o3
http://processingjs.org/articles/p5QuickStart.html

Especially the following part -> "Processing.js has to cheat to simulate Processing's synchronous I/O"

clair

Hi @GoTo -- Thanks VERY much for that article link! Just the ticket. AND I needed to include this line:

/* @pjs preload="city-scape-snowden.jpg"; */

HOWEVER, it still will not show the correct fonts. So -- is there somekind of "preload" for the .vlw files? I checked the docs and found nothing about fonts making JS or Java unhappy.

mbraendle

clair,

you can't use .vlw and loadFont() fonts in PJS. Instead, use createFont().

http://processingjs.org/reference/loadFont_/ http://processingjs.org/reference/createFont_/

clair

@mbraendle -- Okay - movement is in a forward direction. I use createFont and it works in JS AND on the web in the correct sizes. However, I still have issues with the correct font. I am using TwlgTypist.ttf -- a Linux font. I have tried createFont with

"TlwgTypist" and "TlwgTypist.ttf" and these are the correct names.

The .ttf font is in the Data directory and in the directory with the .pde file.

I just get whatever the default font is in the right sizes, but not the TlwgTypist font.

So close now, that it hurts!

clair

UPDATE: It works now with "Courier New". So I can settle for that now. BUT I would still like to know how to use a font that is not a default font. The things I tried should have worked according to what I read. (My specialty as a graphic designer was typography, which is why I am so picky!)

THANKS @mbraendle!

Finished Work is HERE

PhiLho

Just a word: beware of lines like if (sa1[xp] == "I love you") {

It works here because all strings are at the same place, but it can bite you in unexpected ways, so better use .equals(). See the String reference.

clair

@PhiLho -- that is interesting indeed. So if I had tried to compaare sa1[xp] with a position in anothere array, like so --

if (sa1[xp] == testtext[4]) {....}

this would not work?

Instead should be

if (sa1[xp].equals (testtext[4]) {....}

Am I understanding this correctly?

GoToLoop

@clair -> If you really stick to literal strings only like "I love you" and such,
it's probably safe to use the relational operator of equality (==) to compare them! :-\"

That is so b/c Java compiler collects every String literal used from our program,
and statically instantiate them (or something like that 8-|).

However, as PhiLho's warned you, it can bite ya back if a String is dynamically formed
in runtime and gets a new reference! And it's more easily to happen than we think! >:)

Remember when == operator is used to compare 2 objects,
it compares whether both operands got the same pointer reference (physical memory address)! :-B

clair

Well, @GoToLoop -- if my comment above yours is correct, then I think I have it. Thanks much!