To embed this sketch in your webpage first you need to put in a script that loads Processing.js and then have a canvas element that tells the browser where your sketch.pde is:
A webpage with this in it would look like:
Here's the sketch:
To change the color of a circle in our sketch we need to have a function inside our sketch that lets us do so:
Back on our webpage it's time to put these two together. We make a script where we get Processing, assign it to a variable, then call our setColor() function in our sketch from that variable:
These words are HTML text, try clicking on them:
Red Green Blue
Here's our sketch:
Try it out, click on the circle.
I'm some big ole HTML text
One thing to note is that once you start putting non-processing fuctions in your processing sketch, the sketch won't run in the Processing IDE anymore. It will only run in a browser.
Processing.js doesn't support audio so if we want to play audio in our sketch we have to use the HTML5 audio element built into most browsers. For simplicity, let's say we wanted to trigger a beat everytime we hold down the mouse in our circle. Once again we'll put the code for this directly into our Processing sketch. The first thing we want to do is make an HTML5 audio object. Also, different browsers take different file types, so we'll make a string that we can append to the file name with the proper extension: We'll fade the volume of the audio as well as the color of the circle out whenever we let go of the mouse so we need variables for those. We set the volume at 0 so there will be no sound until we click inside the circle: Next we'll check the browser to see what kind of audio it can play, then assign the corresponding extension to our string: To load the source file we can set the "src" attribute of the audio with the name of the file and append the extension. We start playing the audio by simply calling .play() : We want to loop the audio so we add an event listener that calls a function we created named "repeat" whenever the audio file ends playing. "Repeat" simply starts playing the audio file again: The HTML5 audio element takes normalized volume levels, so we constrain the volume between 0 and 1. Whenever fadeOut is set to true our volume and color amounts will decrease by 10% each frame: Whenever the mouse is pressed within the circle we stop the fade out, set the volume all the way up (to 1), and set the color of the circle to red. Whenever the mouse is released we turn the fade back on: (full code)
Try it out, click and hold inside the circle.
Video doesn't work natively in Processing.js either so lets take a brief look at combining HTML5 video with Processing. Video can be played very easily using the HTML5 Video element, and it can even be drawn into the Canvas element, which is where Processing.js is actually drawn. However, it takes a lot more work by the CPU to draw the video in Canvas so unless pixel operations are called for it's better to use the Video element itself without drawing into Canvas. For example's sake we are again going to use our circle as a button to reveal the video. It'll have a slight twist though, when the button is pushed an image that looks like a still image will be revealed, but when the mouse is dragged left to right the image will scrub in time (the image in fact being a video).
We've already learned how to make a button fade in and out so let's focus on the video. Since we want to use the Video element to display the video and the Canvas element to display our Processing sketch we need to put both of these on screen at the same location, one on top of the other. We can accomplish this with a little simple CSS. We can put both the Video and Canvas elements together in one div, both with the exact same 'absolute position'. This will give them the same position relative within the div. We also have to set the div height the same as our video/sketch, since the absolute position will make the div look like it has a height of 0. Just like we did with audio, we use two different types of video format to accommodate different browsers. To make this work though we need to make the background in our Processing sketch transparent: In our sketch we also need to get a hold of the Video element in the HTML doc so we say: The only thing left is to have Processing set the video location based on the mouse position: (full code)
Click on the circle, drag the mouse left & right.
One thing to note: if you want to scrub a video backwards in the browser you're going to need to make every frame a keyframe. If you don't do this you'll be able to scrub forward just fine, but backwards will be real jumpy because the browser can't interpolate between keyframes moving backwards.
In these tutorials we've barely scratched the surface of how Processing can be integrated into a web page. Hopefully with these tools and your imagination you can really make some interesting things happen in the browser. If you want to dig deeper and learn more about some of the things we went over, here are some helpful resources: