![]() ![]() This is accomplished by calling a function in javascript that "gets" your sketch and then places it inside a javascript variable:Īn in depth exploration of how javascript works is beyond the scope of this tutorial, but understanding certain key points will be helpful. First thing we have to do is make the sketch and the web page see each other. Let's say we wanted to change the color of something in our sketch by clicking on HTML text outside of the sketch. Now that you have Processing running as javascript in the browser you have access to everything else on your webpage via your sketch, and vice versa. Let's get into something a little more interesting. Interaction between Processing and the webpage 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:Ī webpage with this in it would look like: Lets say you have a very basic sketch that just draws a circle that follows the mouse: Processing 2.0 allows you to export a sketch in javascript mode directly that gives you a premade index.html with all the things you need to run your sketch online included, but it's really helpful to know how to insert a Processing sketch into your webpage by hand. Ok, so I know I said I wasn't going to go over the basics, but each example is going to build on the last so lets review just a little. Interaction between Processing and the webpage.All the examples will be geared towards someone who has little or no experience with HTML5 or Javascript. Rather, I'm going to explore how to integrate Processing more cohesively into the browser, getting it to interact with other elements on the webpage, using it with HTML5 audio & video, loading a library in with Processing.js, and how to port a library from Processing to Processing.js. Great introductions for Processing.js have already been written on the Processing website as well as the Processing.js website, so I'm not going to spend too much time on the basics here. Currently, the main tool available to us is Processing.js, a port of the Processing language to javascript. As the web keeps evolving so do the tools we use to get Processing running in a browser. One strength Processing has always had is being easily deployable to the web. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |