#283 ✓ staged
David Humphrey

Creat a Processing.js plugin

Reported by David Humphrey | January 22nd, 2011 @ 10:43 AM | in 0.7

It would be pretty easy to create a Processing.js plugin we can use to start/stop various animations. The trick is to use the Processing instance object's noLoop() when we first start and need to stop, and loop() when we need to have it run.

Comments and changes to this ticket

  • Benjamin Chalovich

    Benjamin Chalovich February 7th, 2011 @ 09:41 PM

    • State changed from “new” to “assigned”
    • Assigned user set to “Benjamin Chalovich”

    Okay, I gave up on the open street maps plug-in so I am going to try to tackle this one, it seems straight forward :)

  • David Humphrey

    David Humphrey February 7th, 2011 @ 11:25 PM

    Maybe, but this might also be tricky, since it means solving an issue I've been thinking about lately, namely, what's the right thing for popcorn and plugins to do with respect to loading dependencies? In this case, a Processing.js plugin requires Processing.js. Should we (popcorn) be loading that? I think "yes," so we can insure we only do it once across instances, that it's loaded when the plugin needs it, that using a foo-plugin doesn't require too much knowledge of foo, etc. I wonder if plugins want to have a property listing any dependencies they require as URLs.

    Scott, Rick, before Benjamin goes too far down the wrong path, can you weigh in please?

  • Rick

    Rick February 8th, 2011 @ 10:30 AM

    At present, we leave dependencies up to the plugin and it's author.

    I've just committed a VERY rough draft outline of a Processing.js plugin that loads processing from the github repo, I think someone else can easily take it from here - or even cherry pick the useful stuff as needed. This is in no way meant to override the work that Benjamin is doing.

  • Rick
  • David Humphrey

    David Humphrey February 8th, 2011 @ 11:10 AM

    Cool. A couple thoughts.

    1) I think this code is going to be common enough, we might want to bake it into popcorn and add a loadScript() function, or something:

    +  //  Preload Processing.js
    +  if ( !( "Processing" in window ) ) {
    +    var head = document.head || document.getElementsByTagName( "head" )[0] || document.documentumentElement,
    +        script = document.createElement( "script" );
    +
    +    script.src = "http://processingjs.org/content/download/processing-js-1.0.0/processing-1.0.0.min.js";
    +    script.async = true;
    +
    +    //  Insert script into the head at first position
    +    head.insertBefore( script, head.firstChild );
    +    
    +  }; 
    

    2) In the code you did, I'd add some kind of flag that gets flipped in script.onload, so we know that Processing is there before we error out trying to use it (cf. slow network connection, failed load, etc.)

  • Rick

    Rick February 8th, 2011 @ 11:15 AM

    Considering it done.

  • Benjamin Chalovich

    Benjamin Chalovich February 15th, 2011 @ 11:29 PM

    • State changed from “assigned” to “peer-review-requested”

    The problem I am coming to is that although it dynamically loads processing.js it never initializes it properly and to be quite honest it was kind of weird dynamically loading the script in. This was mainly due to the fact that you will already have a processing.js file that you have been developing your application with that you know works (new releases might have slight changes which might cause comparability issues in the long run). So for this primary release I made it the bare-bones working plug-in and I welcome all comments and recommendations for improvements :)

    Commit:
    https://github.com/ben1amin/popcorn-js/commit/95cdb3afb97542f934fbe...

    Tree:
    https://github.com/ben1amin/popcorn-js/tree/95cdb3afb97542f934fbe51...

  • Scott Downe

    Scott Downe February 16th, 2011 @ 09:19 AM

    • Milestone set to 0.4
    • Milestone order changed from “17” to “0”

    I think this ticket should be in a release so it gets noticed and the attention it deserves.

    I agree with Benjamin, it needs to be able to load any custom pjs code, and not a baked in most stable release, not sure if I like it yet.

  • annasob

    annasob February 16th, 2011 @ 05:37 PM

    • State changed from “peer-review-requested” to “review-needs-work”

    Hey, the code looks good but yuu have to fix the spacing.

    
      /*
     Processing popcorn plug-in
    */


    // Switches the processing drawings animation state function switchSketchState(instanceID, on) {

    // Get the sketches instance
    processingInstance = Processing.getInstanceById(instanceID);
    // if you want to turn the sketch on
    
    if (on) {
        processingInstance.noLoop(); 
    // if you want to turn off the sketch
    } else { // otherwise
        // stop the animation
        processingInstance.loop(); 
    }
    
    
    
    
    }
    One tab should === 2 spaces.

    Also what happens if the user has multiple sketches that they want to use. How do they specify which sketch is to start at which time?

  • Benjamin Chalovich

    Benjamin Chalovich February 16th, 2011 @ 09:29 PM

    @Anna

    You specify which canvas you want it to be used on when you call it, it is the "target" option

    .processing({

        start: 5, // seconds          <- time you want it to pause
        end: 10, // seconds           <- time you want it to resume
        target: 'processing-canvas2'  <- This specifies which sketch you want to control
      } )
    

    I added this to the example which is located in the commit below, I also fixed the formatting issue :)

    Commit:
    https://github.com/ben1amin/popcorn-js/commit/c0333a59483ec2182235b...

    Tree:
    https://github.com/ben1amin/popcorn-js/tree/c0333a59483ec2182235bbb...

  • David Humphrey

    David Humphrey February 19th, 2011 @ 11:00 AM

    I had another thought. What if we also allow the following:

    var p = Popcorn('#video')
            .Processing({
              start: 5,
              end: 10,
              target: 'processing-canvas',
              sketch: 'my-processing-code.pde'
            });
    

    This would mean we have to download the pde file, but it makes it nice and clean in Popcorn, so we don't have to use inline code.

  • annasob

    annasob March 14th, 2011 @ 02:37 PM

    Bens way requires the user to add :

    <canvas id="processing-canvas2" datasrc="test2.pjs" width="100" height="100"></canvas>
    

    In the HTML file. I would rather this be done in the plugin. Thoughts

  • Scott Downe

    Scott Downe March 14th, 2011 @ 02:46 PM

    hm, if we do this the way we've done the rest of the plugins, target should be a div, and not a canvas. We should create the canvas inside the plugin.

    We should also have the sketch attribute David suggested, which should take a file.

    Also consider allowing the sketch to be a string entered into the track.

    var p = Popcorn('#video')
            .Processing({
              start: 5,
              end: 10,
              target: 'processing-div',
              sketch: 'void setup() {}\nvoid draw(){}'
            });
    

    This would allow someone to load the sketch from a variable, and would give an alternative to cut down on xhr requests.

  • Scott Downe

    Scott Downe March 14th, 2011 @ 02:54 PM

    I just read "(new releases might have slight changes which might cause comparability issues in the long run)"

    I think that is a very good point. The getScript should first check if processing exists, if it already does, don't load it. So if you wanted to load in a custom processing.js, you could simply with <script> before you load the plugin. Otherwise, it should load in the most recent.

  • annasob

    annasob March 14th, 2011 @ 03:38 PM

    • Milestone changed from 0.4 to 0.5

    Pushing to 0.5 waiting for Benjamin to respond

  • Benjamin Chalovich

    Benjamin Chalovich March 21st, 2011 @ 10:47 PM

    Hello, sorry about the delay, I have been trying to get all of your suggestions testable... Just to have a baseline to work and comment from.

    To begin, I am currently still having large issues with initializing processing sketches on the fly from the plug-in and that Processing does not like to be loaded after the page has.. But that is something I am just chipping away at. That aside, since we are choosing when to load the sketch should we also have functionality to allow for it to completely remove it at a given point?

  • Scott Downe

    Scott Downe March 22nd, 2011 @ 09:14 AM

    "allow for it to completely remove it at a given point?"

    I don't think that is necessary, and I cannot think of a need for that, instead you just processing.noLoop() the sketch, and hide the element using css.

  • Scott Downe

    Scott Downe March 22nd, 2011 @ 09:17 AM

    On another note, I made a demo here #383 for a plugin that uses GML, which is rendered using a processing sketch, and I use the noLoop() css hide techniques I mentioned above.

  • David Humphrey

    David Humphrey April 1st, 2011 @ 11:12 AM

    • Milestone changed from 0.5 to 0.6

    This seems stalled, how come? Moving to 0.6.

  • Benjamin Chalovich

    Benjamin Chalovich April 1st, 2011 @ 06:12 PM

    It is not stalled, I am trying to make it as versatile and refined as possible so that it has a higher chance of being accepted, I am going to post it review by the end of tomorrow hopefully :)

  • Benjamin Chalovich

    Benjamin Chalovich April 2nd, 2011 @ 11:46 PM

    • State changed from “review-needs-work” to “peer-review-requested”

    Here is the long awaited updated version of the plug-in. It is located at:

    tree:
    https://github.com/ben1amin/popcorn-js/tree/aabe8b45042de21e674e8e3...

    commit:
    https://github.com/ben1amin/popcorn-js/commit/aabe8b45042de21e674e8...

    What it does:

    • It dynamically loads the processing library if the page does not have it.
    • You can create the sketch in a div as per the rest of the plug-ins but to be flexible you can also control a canvas which is hard-coded on the page.
    • You can initialize a sketch from a file location (ie. test.pjs) or by sending in a string which is valid processing.js code.
    • You can perform multiple events on the same sketch.
    • By "control" there are two different things you can do to the sketch.
      • play/pause at a certain time
      • call a function that is within the sketch's code at a certain time.

    I think that covers most of the highlights. Below is a link to the demo which shows it working.

    http://matrix.senecac.on.ca/~bjchalovich/popcorn/plugins/processing...

  • Rick

    Rick April 14th, 2011 @ 12:19 PM

    • State changed from “peer-review-requested” to “review-needs-work”

    I was going to review this, can you link directly to the branch this is on? Or post the name of the branch?

  • Benjamin Chalovich

    Benjamin Chalovich April 14th, 2011 @ 12:37 PM

    • State changed from “review-needs-work” to “peer-review-requested”

    Hello Rick,

    Sorry for the confusion the branch I am using is 0.5

    https://github.com/ben1amin/popcorn-js/commits/0.5

  • Rick

    Rick April 20th, 2011 @ 10:22 AM

    • State changed from “peer-review-requested” to “review-needs-work”

    Please move your work to a branch that is named after the ticket, the convention is generally "t283" Thanks

  • annasob

    annasob May 10th, 2011 @ 04:45 PM

    • Milestone changed from 0.6 to 0.7
  • Scott Downe

    Scott Downe June 2nd, 2011 @ 04:02 PM

    • Assigned user changed from “Benjamin Chalovich” to “cadecairos”
  • cadecairos

    cadecairos June 6th, 2011 @ 12:17 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “cadecairos” to “Rick”
    • Milestone order changed from “1” to “0”

    alrighty, What I have done so far is completely re-write the plug-in to better conform to the style guide, work in a logical way (I.E. start is the start of the animation, end is the end of the animation).

    There's probably some things I missed and some things that can be changed or added. Take a look at my working branch for this ticket: ticket 283. The plug-in can be located in plugins/processing/.

    I still need to write unit tests, But I wanted to iron out the features in the plug-in before I start testing for expected behaviours.

  • cadecairos

    cadecairos June 6th, 2011 @ 05:30 PM

    I made a change to the branch. Did a re-write of the code to make it work better. The sketches now pause when the video is paused.

  • Rick

    Rick June 6th, 2011 @ 08:14 PM

    • State changed from “peer-review-requested” to “review-needs-work”

    This looks like you put a lot of great work into re-writing! I'll review this first thing in AM :D

    On cursory glance, check these lines:
    https://github.com/cadecairos/popcorn-js/blob/e391ee3fc0c63fda1a615...

    readyCheck is leaking globally, and has a comma instead of semi colon

  • cadecairos

    cadecairos June 13th, 2011 @ 12:31 PM

    • State changed from “review-needs-work” to “peer-review-requested”

    Didn't realize this was in review-needs-work still.. oops. The leaking var noted above has been fixed.

    t283

  • Rick

    Rick June 15th, 2011 @ 12:13 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “David Seifried”

    This line: https://github.com/cadecairos/popcorn-js/blob/7647dff33914ad7df5394...

    ... will cause this plugin to create circular references that will throw exceptions when butter serializes the plugin data, can you figure out a way to work around this?

    Sorry I didn't catch this before, but it has recently come up in another ticket as well

  • David Seifried

    David Seifried June 15th, 2011 @ 12:35 PM

    • Assigned user changed from “David Seifried” to “cadecairos”
  • cadecairos

    cadecairos June 15th, 2011 @ 12:42 PM

    good catch, I have a few ideas I'll try out

  • Rick

    Rick June 15th, 2011 @ 01:35 PM

    Cool, assign this back to me when your ready for review

  • cadecairos

    cadecairos June 16th, 2011 @ 12:14 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “cadecairos” to “Rick”

    I've updated the branch with two more commits, the first fixing (hopefully) the circular refenece issue, the other is a small change to satisfy lint.

    commit 1

    commit 2

    I'm going to start working on some tests for expected bahaviours

  • cadecairos

    cadecairos June 16th, 2011 @ 12:20 PM

    copy-pasta error!! The second commit above is supposed to link here

  • Rick

    Rick June 16th, 2011 @ 12:42 PM

    [#238] added brackets around date conversion to pass lint

  • Rick

    Rick June 16th, 2011 @ 12:51 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “cadecairos”

    Nice work resolving the circ ref issue with crafty .call() scope binding!

    A few things...

    In popcorn.processing.unit.html there is an extra h1:

    
    <h1 id="qunit-header"></h1>
    

    Also, can you write the unit tests for this?

  • cadecairos

    cadecairos June 16th, 2011 @ 03:26 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “cadecairos” to “Rick”

    branch t283

    two new commits.. changes include:

    Unit tests!
    option to specify whether a sketch should pause or not when the video does. ( the argument there was in the case that a user adds a sketch that is interactive and they want the audience to be able to interact with the sketch when the video is paused.)

  • Rick

    Rick June 16th, 2011 @ 04:12 PM

    • State changed from “peer-review-requested” to “review-needs-work”
    • Assigned user changed from “Rick” to “cadecairos”

    WOOOO! Dude - this is tremendous!!

    (ok, now for the bad news: http://gyazo.com/63daf5eaffb2a2f563f1179ae34ec79c a few fails towards the end)

  • cadecairos

    cadecairos June 16th, 2011 @ 05:58 PM

    • State changed from “review-needs-work” to “peer-review-requested”
    • Assigned user changed from “cadecairos” to “Rick”

    Fixed the testing issues on the same branch

  • Rick

    Rick June 16th, 2011 @ 06:05 PM

    • State changed from “peer-review-requested” to “super-review-requested”
    • Assigned user changed from “Rick” to “David Seifried”

    Perfect! SR+

    Tested: processing test suite;

    Passing in:

    • FF 3.6 (stable), 4.x (stable), 6.x (Aurora), 7.x (Nightly)

    • Chrome 12 (stable), 13 (beta), 14 (Canary)

    This ticket also uncovered #583

  • David Seifried

    David Seifried June 20th, 2011 @ 11:12 AM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “David Seifried” to “cadecairos”

    On the following lines there are some styling issues:

    Popcorn.processing.js

    At the top of the file there should be a comment block describing the functionality of all the options provided to the user, which options are mandatory, and so on. Take a look at the google maps plugin as it is good example I think.

    Also, noPause should have a default value if it is not set, as its value is undefined if not explicitly set. Another issue with noPause, which is only happening on Firefox for me, is that if it is set to true, and you allow the video to play, for example, past the first sketch, then seek back through the video to the middle of that sketch, the sketch never continues to play again. I dont know if this is expected functionality or not, but it seems like a bug to me.

    Line 6, whitespace padding around Popcorn

    (function (Popcorn) {
    

    Line 12, could use a single line of whitespace right after it to clean it up a bit

    var instance = options.pjsInstance,
              canvas = options.canvas;
    

    Line 22, a single whitespace can be removed between setTimeout and the first round bracket

    setTimeout ( function() {
    

    Line 41, same as above, could use a single line of whitepsace after it

    var popcorn = context,
    initProcessing,
    parentTarget = document.getElementById( options.target );
    

    Line 47, could use some whitespace padding where new Date is defined

    options.canvas.id = options.target + "Sketch" + (+new Date());
    

    Line 69, a single whitespace can be removed

    } );
    

    In Popcorn.processing.html,

    On line 5, this comment can probably be removed,

    <!--<script src="./processing.js"></script> -->
    

    In Popcorn.processing.unit.js

    On lin 6 & 7, there should be a single whitespace before the = sign

    processingDiv2= document.getElementById( "processing-div-2" ),
    processingDiv3= document.getElementById( "processing-div-3" ),
    

    For the running times of the unit tests, do you think you could shorten it up a bit? There was a ticket that was filed/landed not too long ago that made most of the unit tests finish in ~5 seconds, so I figure we may as well continue along that path. I was thinking something like:

      popped.processing({
        start: 0,
        end: 2,
        target: "processing-div",
        sketch: "test.pjs"
      })
      .processing({
        start: 2,
        end: 4,
        target: "processing-div-2",
        sketch: "test2.pjs"
      })
      .processing({
        start: 2,
        end: 4,
        target: "processing-div-3",
        sketch: "test.pjs"
      })
    

    Tested on FF 4 and Chrome 12, also passed lint.

  • cadecairos

    cadecairos June 20th, 2011 @ 12:38 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “cadecairos” to “David Seifried”

    I made the changes you asked. The pause/play issue was solved by listening for seeking events and handling them appropriately.

    please triple check the code, I want it to be solid before it lands!

  • David Seifried

    David Seifried June 20th, 2011 @ 02:03 PM

    • State changed from “super-review-requested” to “review-needs-work”
    • Assigned user changed from “David Seifried” to “cadecairos”

    Everything looks good now, but there is still one issue left. After looking at the popcorn.processing.html file, there should be two different sketches showing up throughout the demo, but sometimes on refresh, it only ever shows the same one instead of switching (the one with the ball bouncing).

    The odd thing is that this doesn't happen when running the unit tests.

    After a bit of looking around, it seems like two canvases are getting the exact same id, even with using new Date() to add a time onto the end of the id. A better way to do this might be to use an incrementing index and append tha number onto the end, and after it is appended, increment it by 1 or whatever.

    Here is what im talking about :

    <canvas id="processing-divSketch1308592814332" data-processing-sources="test2.pjs" style="display: none; image-rendering: optimizequality ! important;" tabindex="0" moz-opaque="" width="200" height="200"></canvas>
    <canvas id="processing-divSketch1308592814332" data-processing-sources="test.pjs" style="display: none; image-rendering: optimizequality ! important;" tabindex="0" moz-opaque="" width="200" height="200"></canvas>
    
  • Rick

    Rick June 20th, 2011 @ 03:22 PM

    That's crazy fast... both calls happen within the same millisecond.

    Dig it, Popcorn.guid( prefix ) returns an optionally prefixed unique id:

    
    console.log(
    
      Popcorn.guid( "foo" )
        
    );
    
    // foo1308597656532
    
  • cadecairos

    cadecairos June 20th, 2011 @ 03:32 PM

    • State changed from “review-needs-work” to “super-review-requested”
    • Assigned user changed from “cadecairos” to “David Seifried”

    Alrighty heres the latest and greatest! (see commit message for a summary)

    Branch t283

  • cadecairos

    cadecairos June 20th, 2011 @ 03:36 PM

    accidentally created two leaking vars, they have been corrected in the latest commit on t283

  • David Seifried

    David Seifried June 20th, 2011 @ 05:20 PM

    • State changed from “super-review-requested” to “review-looks-good”
    • Assigned user changed from “David Seifried” to “Jon Buckley”

    This is sweeeet! Passes lint, works on FF 4 and Chrome 11, passes lint. Unit tests look awesome, styling looks good, all the issues that I addressed before are fixed now. Also liked the option to provide a canvas or a div as the target.

    SR+!

  • Jon Buckley

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Popcorn.js is an HTML5 video framework that lets you bring elements of the web into your videos.

Popcorn.js is a project of Web Made Movies, Mozilla's Open Video Lab.

Shared Ticket Bins

Referenced by

Pages