Using Processing.js with Hype

Hi Guys,

I am having some trouble running Processing.js with Hype. I have imported the processing.js library and the processing script i would like to run in the Head, and then included the HTML in a rectangle element but I can not get the script to appear in hype for some reason. I have tried the same Processing script in a simple empty HTML file and it runs fine, so I am stumped on what the issue is. I have attached the Hype file, the separate HTML test, and JS library below:

Thanks in advance,

You’ll need to load this inside of an iframe (HTML Widget) unless you can find a way to target the ‘canvas’ in another method. This document jus separates it all into its own scene: (1.7 MB)

Ah I understand now, my mistake. Thanks for the prompt help! Will share the final result when its live!

Hi Daniel,

Ran into an interesting conundrum here. I am trying to implement the scroll functionality you’ve laid out in this topic:

However, I am finding that while I am interacting with the Processing widget, that scroll functionality is no longer functional. Is there a way around this? See my project file here:

It seems this issue is not Processing specific. The scroll to continue functionality does not work when the mouse is positioned over any HTML Widget. The only work around I have found then is to select the “Ignore all pointer events” property on the HTML Widget, but then the Processing script can no longer respond to mouse position…

Any recommendations?

When scrolling within an HTML widget, you’re going to be sending your scroll X / Y events to that window, which is a different level from your main Hype scene. So if there’s a way to instantiate the ‘canvas’ object within a regular rectangle that would help you workaround this. You would need to run a function ‘On Layout Load’ that inserts the Processing element within that rectangle.

Alternatively, you would need to setup cross-frame communication so a scroll in one frame can be ‘heard’ by the parent frame: Control a timeline from an external HTML ( communicating between iframes )

Unfortunately, I haven’t been able to instantiate the canvas object within a rectangle… not sure what I’m doing wrong. The processing site has the functionality I need - where the Processing example responds to mouse position but scrolling happens on the overall web page. From inspecting the page I’m seeing that they are able to instantiate the canvas from within a simple div with a canvas, so not sure where I’m going wrong in Hype and it seems like it should work from a rectangle…

As for the second method you suggested - does that mean I would have to then set up each processing script into its own Hype file? That does not feel like a solution I am willing to settle on just yet.

Would there be a way to pass the mouse location from the parent to the iframe with the processing script? That way I could set the iFrames to ignore all pointer events and they would still be responding to mouse location.

I’m struggling with why adding the processing script in the Head and then adding the target canvas in a rectangle doesn’t work like how it would in a simple HTML file…

@jonathan had the smart idea to create an iframe that doesn’t scroll, which lets you capture scroll events on the main frame.

So you would create a rectangle, and set this:

<iframe width="100%" height="100%" src="frame.html" scrolling="no"></iframe>

And then just create your processing doc within frame.html.

Hi @Daniel and @jonathan, thank you guys for your help! Unfortunately, while this does seem to let scroll events go to the main frame, these scroll event are some how not being recognized by the script to prevent the default scroll behavior and instead control the timeline… I have attached a simplified test file here:

Ah, it sounds like you need the events to go through the script and then be forwarded to the page, so an iframe would not really work in that case.

I suspect the reason having the canvas in a rectangle did not work is that the processing.js script was being run before Hype created the canvas element.

There’s probably two solutions to this:

  1. Make the canvas element yourself in the exported .html file. You could then use a little bit of JavaScript to move that element later into a Hype element.

  2. Use the processing.js api to dynamically load later (like in an On Scene Load handler). Looking online, I think the code would look something like:

Processing.loadSketchFromSources('canvas_id', ['${resourcesFolderName}/sketch.pde']);

I haven’t personally tried either technique. You may need to manually deal with unloading or moving aside if the scene changes. There’s a few articles I came across:

1 Like

@jonathan’s second (2) idea worked in a quick test along side your code. ( run at scene load)

var $newCanv = $("<canvas/>")   // creates a div element
                 .attr("id", "mycanvas");  // adds the id 


Processing.loadSketchFromSources('mycanvas', ['${resourcesFolderName}/test.pde']); 

The test.pde file is just a text file with your drawing data inside

float xp;
		float yp;
		float xs=2;
		float cell=20;

		void setup() {
  			size(1440, 1440);

		void draw() {
  			stroke(255, 76, 48);
  			for (int i=0; i<=width;i+=cell) {
    			for (int j=0; j<=height;j+=cell) {
  					PVector m = new PVector(mouseX,mouseY);
  					PVector p = new PVector(i,j);

and the extension changed from .txt to .pde.


@MarkHunte Yes!! This is successful, it seems I was missing the processing load line of code that @jonathan identified. Thank all of you for the support, I love Hype!!! Will share the final product when it’s ready (in the week or so!)

1 Like


“The void operator evaluates an expression and returns undefined.”
(from w3schools - basic definition)

What is the purpose~benefit of using "void"in this script?


It is not my code. But I assume it is similar to other languages like say Objective - C where you define a function as having no return by using void

It may be that process.js needs to know not to expect a return from a function.

1 Like