› › ›

Animated sketch with web interaction

mcfetrmattmcfetrmatt
edited November 2016 in JavaScript Mode

Hi there,

I am following Pomax's guide to Processing.js and there is a great example to have the user types text in the webpage and it displays that text in the Processing sketch. I've got it working however I'm stuck when it comes to having anything other than a static sketch, no animation.

If you let the draw command loop it over writes the text in the next frame, is there a way to layer the sketch or have the text always at the top above the animation which refreshes every frame with the background(); ? I've been applying this example to test. How I am looking for it to operate is the user types in some text through the web page and as you move your mouse around the the size of the circles hide or reveal the text.

Answers

  • jeremydouglassjeremydouglass

    is there a way to layer the sketch or have the text always at the top above the animation which refreshes every frame with the background();

    Yes; draw the text last.

    So, every draw() frame:

    1. fill() with background
    2. draw the content
    3. put the text() on top

    TextWithTyping

  • mcfetrmattmcfetrmatt
    edited November 2016

    The trouble I'm finding on my end is the method described by Pomax only runs the 'draw' when the user enters the text in the web browser. If I add the array into this draw then it only runs for one frame when the user 'enters' the text. This is the code I'm running.

        float max_distance;
    float factor = 20;

    void setup() {
      size(720, 480);
      background(200, 235, 250);
      smooth();
      noStroke();
      fill(255, 255, 255);

      max_distance = dist(0, 0, width, height);
      text("", 25, 25, width - 25, height - 25);
      textSize(36);
    }

    void draw(String t) {
      background(200, 235, 250);
      float twidth = textWidth(t);
      text(t, (width - twidth)/2, height/2);

      for(int i = 0; i <= width; i += factor) {
        for(int j = 0; j <= width; j += factor) {
          float size = dist(mouseX, mouseY, i, j);
          size = size/max_distance * (factor * 2.5);
          ellipse(i, j, size, size);
        }
      }
    }

    If run this through Processing with the text(); command yes it does work fine but using Pomax's method, see "making javascript see your sketch" it works slightly differently.

    What might be a good way to get around this?

  • mcfetrmattmcfetrmatt

    This is the html code:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>My Processing Page</title>
     <script type="text/javascript" src="processing.js"></script>
     <script type="text/javascript">
     function drawSomeText(id) {
       var pjs = Processing.getInstanceById(id);
       var text = document.getElementById('inputtext').value;
       pjs.drawText(text); }
     </script>
   </head>
   <body>
     <canvas id="mysketch2" data-processing-sources="mysketch2.pde"></canvas>
     <input type="textfield" value="my text" id="inputtext">
     <button type="button" onclick="drawSomeText('mysketch2')">place</button>
   </body>
 </html>
  • jeremydouglassjeremydouglass
    edited November 2016

    Are you drawing the text last in that processing sketch, like I told you? It doesn't look like it. It looks like you draw the background, then the text, then draw ellipses on top.

    However, I have not tested this in Processing JS -- so I don't know how your continuous run problem differs from running in Processing. Maybe try adapting a different example with continuous animation, and adding the button with onclick to that. Maybe somebody else with more JS experience will have another idea about how to help you.

  • mcfetrmattmcfetrmatt

    I've updated the code to the below now. I've added different fills to make the text clearer too but on my test site you can see the effect this is having. Even though the text function is in the draw() it only refreshes when you click the 'place' button.

    void draw(String t) {
  background(200, 235, 250);
  fill(255, 255, 255);

  for(int i = 0; i <= width; i += factor) {
    for(int j = 0; j <= width; j += factor) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * (factor * 2.5);
      ellipse(i, j, size, size);
    }
  }
  fill(120, 120, 120);
  float twidth = textWidth(t);
  text(t, (width - twidth)/2, height/2);
}
  • GoToLoopGoToLoop
    edited November 2016
  • mcfetrmattmcfetrmatt
    edited November 2016

    Thanks for the steer @GoToLoop, I've downloaded version 3.1.2 and installed Javascript mode to export the following sketch. I have uploaded the html to my test website and it runs but I can't get the text to show, at least for more than one frame still. I think what's missing is to do with the variable, in the Processing sketch I'm calling a String variable 't', but I think I'm missing the proper command in html to reference it? So I can push the value back to the sketch.

    Sketch code: float max_distance; float factor = 20; String t; //this is the variable I want the website textfield to reference / push

    void setup() {
  size(720, 480);
  background(200, 235, 250);
  smooth();
  noStroke();
  noCursor();
  fill(255, 255, 255);

  max_distance = dist(0, 0, width, height);
  text("", 25, 25, width - 25, height - 25);
  textSize(36);
}

void draw() {
  background(200, 235, 250);
  fill(255, 255, 255);

  for(int i = 0; i <= width; i += factor) {
    for(int j = 0; j <= width; j += factor) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * (factor * 2.5);
      ellipse(i, j, size, size);
    }
  }
  fill(120, 120, 120);
  float twidth = textWidth(t);
  text(t, (width - twidth)/2, height/2);
}

    Function from Pomax's guide(inserted into html code):

       function drawSomeText(id) {
     var pjs = Processing.getInstanceById(id);
     var text = document.getElementById('inputtext').value;
     pjs.drawText(text); }

    Is it the Processing.getInstanceById(id); line which I need to change? Or am I getting confused with Pomax's guide and it's actually much more simple when in Javascript mode?

    Thanks again for any help!

Sign In or Register to comment.