Processing Forum

Displaying special characters (é, ë, etc.) via Table.pde

[2 Replies]
- 10-Jan-2013 10:48 AM
- Forum: General Discussion
Hi all,

I'm using Fry's table.pde to read a tsv file and display data, strings, etc. Everything is fine *except* for when the data file contains text strings that contain special characters (e's with accents, umlauts, what-have-you). These simply get replaced with a blank space when I try to display them via text().

I've verified that the font I'm using contains the special characters in question, and I'm loading the .vlw file via loadFont. I've also tried selecting all characters in the create font menu, but it seems to make no difference.

I've also tried editing the data file to replace all the special characters with their Processing escape sequence (eg, \u00E9 for é, etc.). But then when I read the file with table.pde and display the text on screen, it renders the literal characters in the escape (\u00E9) sequence instead of the character the sequence represents (é)!

I'm kind of at a loss now. Anyone have ideas?

Hit test (point in polygon) algorithm for complex polygons

[13 Replies]
- 28-Jun-2012 01:21 PM
- Forum: Programming Questions
I'm looking to do a hit test on complex polygon shapes (basically, testing whether a mouse is over a state or country area on a map). I've tried the PGraphics buffer solution (color-picking), but ran into a wall when I found out that off-screen PGraphics buffers aren't supported in Processing.js (which is a requirement for the projects I'm working on).

So, I'd like to implement some sort of algorithm for hit test. I've found a lot of generic algorithms for this online, but the problem is that I have no idea how to adapt these for a Processing environment. Can anyone help me rewrite one of the algorithms below?

Here's one possibility, from http://stackoverflow.com/questions/217578/point-in-polygon-aka-hit-test/2922778#2922778:
```
int pnpoly(int nvert, float *vertx, float *verty, float testx, float testy) { int i, j, c = 0; for (i = 0, j = nvert-1; i < nvert; j = i++) { if ( ((verty[i]>testy) != (verty[j]>testy)) && (testx < (vertx[j]-vertx[i]) * (testy-verty[i]) / (verty[j]-verty[i]) + vertx[i]) ) c = !c; } return c; }
```
Another, from http://www.wildbunny.co.uk/blog/2012/03/29/fun-with-convex-polygons/ :
public function Within( localP:Vector2 ):Boolean { for ( var i:int = 0; i<m_numPoints; i++ ) { var A:Vector2 = m_localSpacePoints[(i+1)%m_numPoints].Sub( m_localSpacePoints[i] ); var B:Vector2 = localP.Sub( m_localSpacePoints[i] ); if ( A.Wedge( B )<0 ) { // separating axis return false; } } return true; }
Thanks!

processing.js -- color picking using a PGraphics buffer

[1 Reply]
- 09-Mar-2012 08:43 AM
- Forum: Processing with Other Languages
I'm creating an interactive choropleth map of the U.S. using an .svg file. I've been able to implement it fine in native Processing (see http://forum.processing.org/topic/interactive-svg-map-with-processing-js), via color-picking and a PGraphics buffer. It's set up so that when a state is moused-over it turns grey.

However, the color-picking doesn't appear to be functioning when I run it in a browser via processing.js. The map displays with the correct data, but it does not respond with the color change when a state is moused over -- nothing happens at all. The Chrome console shows nothing amiss -- assets are loading as they should. I can't tell whether this is an issue with the pjs implementation of PGraphics or what. Has anyone had experience with something similar? My Processing code is below for reference -- thank you!

PShape USMap;
PShape state;
PGraphics buffer;

boolean flag;

Table data;

float redint;

color c;

color buffercolor, mousecolor;

float dataMin = -7;
float dataMax = 11;

void setup() {
size(600, 400);
buffer = createGraphics(width, height, JAVA2D);

USMap = loadShape("usmap.svg");
data = new Table("random.tsv");
smooth();
flag = false;
}

void draw() {
background(255);
noStroke();

USMap.disableStyle();

int rowCount = data.getRowCount();
for (int row = 0; row < rowCount; row++) {
    String abbrev = data.getRowName(row);
    state = USMap.getChild(abbrev);

    buffer.beginDraw();
    buffer.background(255);
    buffercolor = row;
    buffer.noStroke();
    buffer.fill(buffercolor);
    buffer.shape(state, 0, 0);
    buffer.endDraw();
    mousecolor = buffer.get(mouseX, mouseY);
    redint = red(mousecolor);

    if (state == null) {
      println("No state found for" + abbrev);
    }
    else {
      float value = data.getFloat1(row, 1);
      if (value >= 0) {
        float amt = norm(value, 0, dataMax);
        c = lerpColor(#FFFFFF, #221177, amt);
        fill(c);
      }
      else {
        float amt = norm(value, 0, dataMin);
        c = lerpColor(#FFFFFF, #992211, amt);
        fill(c);
      }

      stroke(255);
      fill(c);
     if (redint == row) {
    fill(100,100,100);
     }
      shape(state, 0, 0);
    }
}
//println(mousecolor);
//println(redint);
noLoop();
}

void mouseMoved() {
loop();
}

interactive .svg map with processing.js

[18 Replies]
- 24-Jan-2012 12:28 PM
- Forum: Processing with Other Languages
All,

I'd like to create an interactive .svg map (for instance, a map of the US where you can mouse over states to display a tooltip with data pertaining to that state). Can this be done with processing.js? I understand that with native Processing you'd probably use something like geomerative, but my understanding is that geomerative doesn't work with pjs. Any ideas here? Thanks!

Applet flicker when scrolling

[2 Replies]
- 30-Dec-2011 08:38 AM
- Forum: Integration and Hardware
I've successfully exported a sketch to an applet, uploaded it to my server, and got it running on my site. However, I'm experiencing an issue in IE8 where when I'm on the page with the embedded applet and I scroll up and down the page in the browser (either with mousewheel or scrollbar), the applet flickers on the screen. I've uploaded it to Open Processing and experienced the same issue. However, other sketches on Open Processing don't exhibit the flickering behavior, which leads me to suspect it's something in my sketch.

Anyone experience anything like this before? I use noLoop() in the sketch and only call loop() when there's something going on (mouseover, click, etc) -- could that have something to do with it? I'm also using table.pde (to load data) and integrator.pde (to smooth transitions) from Fry's Visualizing Data.

http://www.openprocessing.org/visuals/?visualID=48801

Here's the openproccesing link, if that helps.

Processing for batch PDF production?

[7 Replies]
- 22-Oct-2011 11:40 AM
- Forum: Core Library Questions
Hi all,

I'm looking to create 100 PDF profiles of cities in the U.S. The profiles will be 2 pages each -- the first will include two jpegs generated by Arc GIS, while the second page will have some charts and data points specific to each city. Would Processing be a good tool for this?

I've read up some on the PDF export library -- what would be a general procedure for doing so? I'm comfortable enough with drawing charts, loading images and doing layouts in Processing, so what I'd like to do is set up the general layout and then have it read from images and data files (presumably looping through an array of images and an array of data) in the Data folder to automate the whole thing. Any tips/pointers would be much appreciated. Thanks!

Using noLoop(), redraw() to lighten CPU load

[16 Replies]
- 04-Oct-2011 08:03 AM
- Forum: Programming Questions
All,

I'm working on a simple interactive chart that allows a user to rollover a datapoint to see the data detail. A simplified example of my code is below, which contains all the structural elements (big thanks to phi.lo for showing me how to do a fade-in with this!).

The end goal is to put this on the web with processing.js. I've been able to do this, but noticed that whether I'm running in native Processing or in processing.js the sketch bumps my cpu usage up to about 25%. I'd like to ameliorate this if possible. It seems like I should be able to do noLoop() at the end of setup, and then have some sort of function for the mouseovers that will do redraw() for as long as the mouseover condition is true But I can't figure out how to work this in the context of my code. I've tried putting the mouseover code in its own function and calling it outside of draw, but that hasn't worked.

Any thoughts? Many thanks!

Chris
1. testChart chart1, chart2;
3. float[] datapoint = {
4. 1.0, 3.5, -2.0, -1.5, 6
5. };
6. float[] datapoint2 = {
7. 8.0, 3.5, 2.0, 1.5, 2
8. };
10. int alph = 255; //alpha value
11. boolean over; //test for mouseover
13. void setup() {
14. size(600, 400);
15. smooth();
17. chart1 = new testChart(20, 200, 8, datapoint);
18. chart2 = new testChart(20, 300, 8, datapoint2);
19. }
21. void draw() {
22. background(255);
24. over = false;
25. chart1.drawchart();
26. chart2.drawchart();
28. if (over) {
29. if (alph > 10) {
30. alph -= 10;
31. }
32. }
33. else {
34. alph = 255;
35. }
36. }
38. class testChart {
39. int offsetX, offsetY, ellipseSize;
40. float[] data;
42. testChart(int offsetX_, int offsetY_, int ellipseSize_, float[] data_) {
43. offsetX = offsetX_; //x-position
44. offsetY = offsetY_; //y-position
45. ellipseSize = ellipseSize_; //circle size
46. data = data_; // data array
47. }
49. void drawchart() {
50. int plotX1 = offsetX;
51. int newY = offsetY;
52. stroke(5, 55, 105);
53. fill(164, 199, 242);
55. //draw circles based on data
56. for (int i = 0; i < data.length; i++) {
57. float x = plotX1;
58. float y = newY -(data[i]);
59. ellipse (x, y, ellipseSize, ellipseSize);
60. plotX1 += 25;
61. }
62. plotX1 = offsetX;
64. //create pop-up windows on circle mouseover
65. for (int i = 0; i < data.length; i++) {
67. float x = plotX1;
68. float y = newY -(data[i]);
69. float disX = x - mouseX;
70. float disY = y - mouseY;
71. if (sqrt(sq(disX) + sq(disY)) < ellipseSize/2 ) {
72. over = true;
73. fill(5, 55, 105, alph); //this is the alpha that needs to fade in!
74. rect(mouseX, mouseY-10, 50, 30);
75. }
76. plotX1 += 25;
77. }
78. }
79. }

Doing a fade-in within a for loop

[11 Replies]
- 23-Sep-2011 01:14 PM
- Forum: Programming Questions
Hello all,

I'm creating a modestly interactive area chart. The data is pulled from an array, which I activate with a for loop.

I'm doing mouseovers on the data points, so that a user can roll over the datapoint and have a small window appear with the data value. This part of it works fine. However, I'd like for the small window to fade in when the user mouses over, but I can't figure out how to do this within the context of the loop.

Now, I can do this manually by adjusting the alpha values, like so:

      if (sqrt(sq(disX0) + sq(disY0)) < ellipseSize/2 ) {
        //ellipse redraw
        fill(255);
        stroke(5, 55, 105);
        strokeWeight(2);
        ellipse(plotX1, d0, ellipseSize, ellipseSize);
        strokeWeight(1);

        noStroke();
        fill(250, a);
        rect(mouseX-25, mouseY-35, 50, 30);

        fill(5, 55, 105, a);
        rect(mouseX-25, mouseY-35, 50, 15);
        fill(255, a);
        textAlign(CENTER);
        text(q0, mouseX, mouseY-25);
        fill(100, a);
        text(d0Label, mouseX, mouseY-10);

        if (a < 255 ) {
          a += (255 - a) * easing;
        }
      }

However, since I've got a lot of data points I'm using an array, and a for loop, and I can't figure out how to get the same effect in the context of the following code:

for (int i = 0; i < data.length; i++) {

      float disX = plotX1 - mouseX;
      float x = plotX1;
      String Label = str(data[i]);
      String Quarter = quarter[i];
      if (dataMin < 0) {
        y = (newY - (map(data[i], dataMin, dataMax, 0, 80)) + mapConstant);
      }
      else {
        y = (newY - (map(data[i], dataMin, dataMax, 0, 80)));
      }
      float disY = y - mouseY;

      if (sqrt(sq(disX) + sq(disY)) < ellipseSize/2 ) {

        //ellipse redraw

        fill(255);
        stroke(5, 55, 105);
        strokeWeight(2);
        ellipse(x, y, ellipseSize, ellipseSize);
        strokeWeight(1);

        noStroke();
        fill(250, alph);
        rect(mouseX-25, mouseY+consA, 50, 30);
        fill(5, 55, 105, alph);
        rect(mouseX-25, mouseY+consA, 50, 15);
        fill(255, alph);
        textAlign(CENTER);
        text(Quarter, mouseX, mouseY+consB);
        fill(100, alph);
        text(Label, mouseX, mouseY+consC);

      }
      plotX1 += 25;
    }

Any suggestions? I've tried sticking the code to update the alpha variable all over the place, but to no avail. Note that all this code is within a "chart" class that gets initialized in setup and drawn in draw. Many thanks!

Activity Trend