{{ page.title }}
-{{ page.date | date_to_string }}
-{{ content }}
-
-
- Demoname
by
- -
Description
-The page you requested could not be found. Click here to return home.
diff --git a/CNAME b/CNAME deleted file mode 100644 index 1c989db..0000000 --- a/CNAME +++ /dev/null @@ -1 +0,0 @@ -processingjs.org diff --git a/Gemfile b/Gemfile deleted file mode 100644 index 053c27d..0000000 --- a/Gemfile +++ /dev/null @@ -1,2 +0,0 @@ -source 'https://rubygems.org' -gem 'github-pages' diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md deleted file mode 100644 index 666a153..0000000 --- a/ISSUE_TEMPLATE.md +++ /dev/null @@ -1,7 +0,0 @@ -Thank you for finding a bug on the Processing.js website, or having a change request you'd like to see implemented. - -The Processing.js website is not under active maintenance at the moment, lacking developers that have -the time to work on it. As such, any bug you find might take a long time to get a fix. However, if -you're interested in fixing things yourself, I (Pomax) will be more than happy to review your suggested -changes and merge them in if they fix the problem you were having without introducing problems -due to side effects your code might have. diff --git a/README.md b/README.md index 9d4455c..96f5e07 100644 --- a/README.md +++ b/README.md @@ -1,140 +1,14 @@ -The Processing.js website -========================= +Processing.js +============= -This is our website, in all its glory. +Processing.js was a port of the [Processing](https://processing.org) programming language for the web, and was maintained from November 2011 to December 2018, having been unofficially retired in March of 2017. -Testing the website locally ---------------------------- +If you're looking for the last version of Processing.js before the project was officially discontinued, you're looking for [v1.6.6](https://github.com/processing-js/processing-js/tree/v1.6.6). -Install [Jekyll](https://github.com/mojombo/jekyll/wiki/Install) on your computer, -clone this repository, and run `jekyll` inside the root of the repository. +That last version of the website itself can be found as an [archived tree](https://github.com/processing-js/processing-js.github.io/tree/archive) on github. -To match Github Pages, you'll need to install Jekyll v0.11.0, uninstall Liquid v2.3.0 -(`gem uninstall liquid`), then install Liquid v2.2.2 (`gem install liquid -v 2.2.2`). For this -combination to work, you'll need to be running ruby 1.8.7; ruby 1.9.x fails with an "invalid byte -sequence in UTF-8" ArgumentError. +If you want to use Processing on the web today, please have a look at the newer [P5.js](https://p5js.org) project, which was a reimagining of Processing "if it had been designed for use on the web from the get-go". -Jekyll will compile (yes, seriously) the website into the _site directory, and start a -localhost web server running on port 4000. Jekyll will automatically recompile the site -if you make any changes. +Thank you to everyone who used Processing.js in the past, and of course: everyone who worked on the project over the years. -Updating the blog ------------------ - -The blog index is `/blog/index.html`, and all of the individual blog posts are located in -`/blog/_posts/`. I've created a template blog post in `/blog/_posts/template.html`, but for -posterity, here it is: - - --- - layout: post - title: Template blog title - --- -Write your blog post here
- -Once you've changed the title to something appropriate and written something useful for the -blog post, you need to save the blog post with a specific filename within the _posts -directory to have Jekyll pick it up as a blog post. The format is `yyyy-mm-dd-title-with-dashes.ext`, -where ext can be html, md, or textile. - -Updating the downloads ----------------------- - -The downloads index is `/downloads/index.html`, and all of the files for download are located -at [https://github.com/processing-js/processing-js/downloads](https://github.com/processing-js/processing-js/downloads). -Each release of Processing.js gets a post in the `/downloads/_posts/` directory which contains -links for each download. -Everyone with the right access (see below) should upload the files to the Github Downloads -page, then update the Processing.js Downloads page to point to the new files. - -Updating the exhibitions ------------------------- - -The exhibitions index is `/exhibition/index.html`, and all of the individual exhibitions are -located in `/exhibition/_posts/`. I've created a template exhibition in -`/exhibition/_posts/template.html`, but it's here too: - - - -
-
- Description
- - -You'll need a make a 180x75 screenshot of the exhibition in question, and put that in -`/images/exhibition/`. Once you done that, fill out the rest of the information in the -template. Like blog posts, you'll need to name the exhibition in a specific format so -that it's picked up by Jekyll: `yyyy-mm-dd-title-with-dashes.ext`, where ext can be html, -md, or textile. To preserve the order of exhibitions on the index page, I just incremented -the date by one day for each exhibition. - -Updating the articles ---------------------- - -The articles index is `/articles/index.html`, and all of the individual articles are located -in `/articles/_posts/`. The template is at `/articles/_posts/template.html`, but let's look -at it anyways: - - --- - layout: default - desc: Jon's Guide to ASDF - title: ASDF Guide - permalink: /articles/ASDFGuide.html - --- -This is my lovely article about ASDF
- -The desc is a short description of the article that's shown on the Articles index page. The -title is the actual title of the article. The permalink is where the article should actually -be placed when compiled; by default it gets a URL with the publish date, which is something -we don't care about. Like blog posts and exhibitions, you'll need to name the exhibition in -a specific format so that it's picked up by Jekyll: `yyyy-mm-dd-title-with-dashes.ext`, where -ext can be html, md, or textile. - -If you want to update the list of articles that appears on the front page, you'll need to edit -the default layout in `/_layouts/default.html`. - -Updating the front page ------------------------ - -The front page index is `/index.html`. If you're editing the front page text or exhibitions, -this is the place to do it. - -Updating anything else ----------------------- - -Everything else is static content. Go to the exact file you're looking for, and make whatever -changes you need to make! - -Layouts -------- - -On almost every single page you see, there's a few lines of text that looks like this: - - --- - layout: default - --- - -This YAML front matter tells Jekyll to use the layout in `_layouts` named `default`. In this -case, `_layouts/default.html`. There's another layout for blog posts called `post` which -inherits from `default`. Be careful about making changes to these layouts, as it affects -pretty much every other page. Everything that you link to from this page must be linked in -an absolute fashion, with a `/` at the front. - -Access controls ---------------- - -Who is allowed to update the git repository is controlled by the Processing.js -[organization settings](https://github.com/organizations/processing-js/teams) on Github. - -Hosting considerations ----------------------- - -The Processing.js site will work on any hosting service that serves content with the -correct MIME type. The only content on the website that is not stored within the -repository is the various Processing.js releases on our Downloads page. Those are -currently stored in the [Github Downloads page](https://github.com/processing-js/processing-js/downloads) -for Processing.js. If we had to move from Github Pages hosting to somewhere else, we'd -need to update the download links on our Downloads page. We'd also need to figure out -access controls for new hosting; the access controls for Github are everyone added to -the [Processing.js organization](https://github.com/processing-js). +- The Processing.js Team diff --git a/_config.yml b/_config.yml deleted file mode 100644 index 93a2530..0000000 --- a/_config.yml +++ /dev/null @@ -1,4 +0,0 @@ -# Github defaults -safe: true -lsi: false -highlighter: rouge diff --git a/_layouts/default.html b/_layouts/default.html deleted file mode 100644 index 38c85c6..0000000 --- a/_layouts/default.html +++ /dev/null @@ -1,101 +0,0 @@ - - - - -
- 
-
-
-
diff --git a/_layouts/post.html b/_layouts/post.html
deleted file mode 100644
index 71278da..0000000
--- a/_layouts/post.html
+++ /dev/null
@@ -1,8 +0,0 @@
----
-layout: default
----
-This reference is licensed under the CC BY-NC-SA 2.0 license:
- -
-
-This page tries to explain how to quickly and (as) correctly (as possible) use - Processing sketches on webpages. The information is based on the work done by - the processing.js group.
- -This information on this page reflects the best of my knowledge anno November - 2010, and processing.js becomes more and more complete, so it is possible that the - information on this page changes over time. Should you spot any incompletenesses - or blatant mistakes, please contact me at - - - pomax at - nihongoresources.com, - - with the obvious substitutions in place to make it a legal email address.
- -The "Processing" language (also referred to as "P5") is a programming language - with a focus on data visualisation. Of course, "data" is a loose concept, and - Processing can be used for anything from drawing a few lines and circles on a - screen, to full blown interactive animations. In fact, a basic Processing program - is two lines of code, and will already play an animation:
- - {% highlight java linenos %} - void setup() { size(..., ...); } - void draw() {}{% endhighlight %} - -Of course this program doesn't show you anything, because all it does is set up - the visual context to have a certain width and height (indicated in the setup - method as the size(...,...) instruction) and then calls draw() every few milliseconds. - Of course, draw() is empty, so it won't actually show you anything. A more useful - minimal program would be a "hello world" program, but I hate those because they only - show a programming language can write text, and that's pretty much the least interesting - feature of any programming language. Instead let's look at a minimal program that makes - sense for a data visualisation language:
- - {% highlight java linenos %} - float framerate = 24; // our "sketch" will have a framerate of 24 frames per second. - - int ball_x; // ball administration: x coordinate - int ball_y; // ball administration: y coordinate - int ball_radius = 20; // ball administration: ball radius - - void setup() { - size(200,200); // set draw area size - frameRate(framerate); // set animation framerate - ball_x = width/2; // set the initial ball coordinates - ball_y = ball_radius; // set the initial ball coordinates - stroke(#003300); // set the default shape outline colour - fill(#0000FF); // set the default shape fill colour - } - - void draw() { - // compute the ball height for this frame - float bounce_height = height/2 * abs(sin(PI*frameCount/framerate)); - // because the top of the screen is 0, and the bottom is "height", - float ball_height = height - (bounce_height+ball_radius); - // clear the drawing area - background(#FFFFEE); - // set the new ball y position - ball_y = (int) (ball_height); - // draw the ball - ellipse(ball_x,ball_y,ball_radius,ball_radius); - }{% endhighlight %} - - - -This looks a bit long for a minimal program, but then again, this actually does - something: it shows us a ball that bounces up and down, taking one second for each - bounce. It shows a few aspects of Processing too: every variable is strongly typed. - So you have to indicate what you'll be using a variable for, and you can choose from:
- -And of course there are also the typical complex data types:
- -You'll see why this last one turns out to be really useful later on.
- -Coming back to the minimally functional example of a Processing program, or "sketch", - there are also some examples of Processing' own API at work. The following methods are - native Processing calls:
- -The Processing API is in fact quite expansive (See - http://processing.org/reference for the full - list), but it can't cover everything. Luckily it supports object oriented programming, so - that our previous example can also be written as an object oriented sketch:
- - {% highlight java linenos %} - Bouncer bouncer; - - void setup() { - size(200,200); - frameRate(24); - stroke(#003300); - fill(#0000FF); - bouncer = new Ball(width/2,20,20); - } - - void draw() { - bouncer.computeNextStep(width, height, frameRate); - background(#FFFFEE); - bouncer.draw(); - } - - interface Bouncer { - void computeNextStep(int width, int height, float framerate); - void draw(); - } - - class Ball implements Bouncer - { - int x,y,radius; - int step = 0; - - Ball(int x, int y, int r) { - this.x = x; - this.y = y; - this.radius = r; - } - - void computeNextStep(int sketch_width, int sketch_height, float frame_rate) { - step++; - float sin_value = abs(sin(PI*step/(float)frame_rate)); - float bounce_height = sketch_height/2 * sin_value; - float ball_height = sketch_height - (bounce_height + radius); - y = (int) (ball_height); - } - - void draw() { - ellipse(x,y,radius,radius); - } - }{% endhighlight %} - - - -Instead of doing everything in the draw() function, the object oriented approach - tucks all the code that relates to computing the ball's position in the definition - for what we consider a "Ball". To be good object oriented programmers, we've also said - that things that are a Ball are also a Bouncer, and this lets us extend our sketch very - easily to instead of a bouncing ball, have a bouncing box by keeping almost everything - the same, and adding a new class Box that's a Bouncer:
- - {% highlight java linenos %} - void setup() { - ... - bouncer = new Box(width/2,20,20,20); - } - - class Box implements Bouncer - { - int x,y,w,h; - int step=0; - - Box(int x, int y, int w, int h) { - this.x = x; - this.y = y; - this.w = w; - this.h = h; - } - - void computeNextStep(int sketch_width, int sketch_height, float frame_rate) { - step++; - float sin_value = abs(sin(PI/2.0 + (PI*step/(float)frame_rate))); - float bounce_height = sketch_height/2 * sin_value; - float ball_height = sketch_height - (bounce_height + h); - y = (int) (ball_height); - } - - void draw() { - rect(x,y,w,h); - }{% endhighlight %} - - - -All of a sudden we have a bouncing box, that starts from a falling position instead - of from the ground, and we didn't have to modify the master draw() function for it! - In fact, let's just use a group of bouncing things:
- - {% highlight java linenos %} - Bouncer[] bouncer = new Bouncer[3]; - - void setup() { - ... - bouncer[0] = new Ball(width/3-20,20,20); - bouncer[1] = new Box(width/2-10,20,20,20); - bouncer[2] = new Ball((2*width/3)+20,20,20); - } - - void draw() { - for(int b=0, end=bouncer.length; bFantastic, two bouncing balls and a bouncing box, bouncing counter-point to each - other. But it's not very interactive yet. Let's change it so that we can "hang on" - to bouncing things until we let go of them again. Processing allows interaction with - the keyboard and mouse, using what are known as "event handlers", methods that Processing - automatically calls for you when you use the keyboard or mouse. In this case we care - about mouse interaction, so we'll look at mousePressed and mouseReleased events:
- - {% highlight java linenos %} - void mousePressed() { - for(int b=0, end=bouncer.length; bBecause the Ball and Box classes will do the same thing on mouse interaction, - the interface Bouncer has been changed to an actual class too, to take care of some of - the shared functionality. Now if you click on anything that's a Bouncer it'll stop - moving until you let it go. Let's go one step further an just allow us to move the - bouncing things around, too.
- - {% highlight java linenos %} - Bouncer[] bouncer = new Bouncer[3]; - - void setup() { - size(200,200); - frameRate(24); - stroke(#003300); - fill(#0000FF); - bouncer[0] = new Ball(width/3-20,20,20); - bouncer[1] = new Box(width/2-10,20,20,20); - bouncer[2] = new Ball((2*width/3)+20,20,20); - } - - void draw() { - for(int b=0, end=bouncer.length; bAnd with that, on to the original topic of this article: using Processing on web pages
- -The great thing about Processing is that it can be used on webpages. Traditionally, - you would convert your sketch to a java applet, and embed that on a page, but the - processing.js project has changed this: you can now use your sketches directly without - turning it into an applet at all. In the same way that you include a javascript file, - or a CSS stylesheet, you can simply link to your sketch and magic happens.
- -Let's say we save the previous sketch, with the bouncing and the mouse interaction, - as "mysketch.pde", and we want to show this on a webpage. Using processing.js, this is - a trivially simple trick:
- - {% highlight html linenos %} - - - - -And we're done. In fact, I went ahead and made sure this page already uses processing.js, - and that there is a mysketch.pde to load. If you click on the play control for the sketch - above, it will start running, and do exactly what you would expect it to do based on what - it does when you run it from the Processing environment.
- -While not recommended, you can also put your sketch directly on a page, much like how - you can put javascript or CSS styles directly on a page. However, in order for processing.js - to properly load your code, you'll need some extra help in the form of the "init.js" file - that is included with the processing.js examples archive from the processing.js downloads page
- - {% highlight html linenos %} - - - - -There are several reasons for why this is not a very good practice, but the most important - one is that this way you can't be sure whether or not you've written a bug-free sketch. By - writing it directly on the page, you might in fact have written some buggy code, which you - will then find is terribly hard to debug because the browser is not equiped with a debugger - for Processing code. In fact, processing.js rewrites your sketch into pure javascript (using - some terribly clever tricks that we won't go into), so even if when it tells you where the - error is in a javascript debugger, it will tell you where it went wrong in the converted - javascript object, not the actual place in your source code. So keep it as a separate file, - and make sure to test your code in the Processing IDE!
- -Just running a sketch on a page is fine, but the benefit of a webpage is that it offers - the kind of user interaction that you can't get from within the sketch itself. Pretty buttons, - text areas that fold away, pop up, etc. make it very attractive to have your sketch do all - the animation graphicsy work, but have all the information about the sketch, as well as - controls for it, on the webpage. This is entirely possible - in fact, the "stop" and "play" - buttons for the sketch above are examples of javascript telling the sketch what to do. Because - a webpage offers more than a plain sketch can, processing.js has a few special tricks up its - sleeve, so that you can get the most out of your creative work. Arguably the most important of - these is the "get the sketch" function:
- - {% highlight javascript linenos %} - var mysketch = Processing.getInstanceById('mysketchid');{% endhighlight %} - -This is the pivotal function on the javascript side of things. It gives you a direct reference - to your sketch, and everything in it, so that you can call any function and examine and modify - any variable that is in the sketch.
- -Let's say we have the following sketch:
- - {% highlight java linenos %} - void setup() { - size(200,200); - noLoop(); // turn off animation, since we won't need it - stroke(#FFEE88); - fill(#FFEE88); - background(#000033); - text("",0,0); // force Processing to load a font - textSize(24); // set the font size to something big - } - - void draw() { } - - void drawText(String t) - { - background(#000033); - // get the width for the text - float twidth = textWidth(t); - // place the text centered on the drawing area - text(t, (width - twidth)/2, height/2); - }{% endhighlight %} - -
We can make this sketch draw a different text based on some text we have on our webpage, - using javascript. This is in fact really easy: first, let's save this processing code as - mysketch2.pde, and load it onto a page in the same way as earlier in the article. Then, we - use javascript to ask for our sketch instance, after which we call the "drawText" function - with some text that we get from the web page that the sketch is running on:
- - {% highlight html linenos %} - - - - -This has the same effect as the sketch that's running below. Simply fill in a bit - of text, and hit the ▶ button to see the sketch render it on the drawing area.
- - - -So far so good, but what if we also want to make Processing code call javascript? - In order for us to so, while making sure the sketch keeps running both on your page an - in the Processing environment, we have to do a bit more work
- -You can't just stick plain javascript in your sketch and hope everything goes well - because it's "on a web page". A better approach is to neatly separate your sketch and - your on-page javascript, and ensure that whatever you want to do on your page runs - through a javascript function. How do we do that? Let's say we have the following page:
- - {% highlight html linenos %} - - - - -And say we have the following sketch, which we'll save as mysketch3.pde:
- - {% highlight java linenos %} - void setup() { - size(200,200); - stroke(255); - background(0); - noLoop(); - } - - void draw() { - fill(0,0,0,40); - rect(-1,-1,width+2,height+2); - } - void mouseMoved() { - line(mouseX,0,mouseX,height); - line(0,mouseY,width,mouseY); - redraw(); - }{% endhighlight %} - -As an exercise, let's try to get the mouse coordinates from that mouseMoved event - onto the page. This means we'll need to define a javascript function that will do this for us:
- - {% highlight javascript linenos %} - function showXYCoordinates(x, y) { - document.getElementById('xcoord').value = x; - document.getElementById('ycoord').value = x; - }{% endhighlight %} - -And we'll need to make the sketch know that there is such a thing as javascript, - and that it has this function:
- - {% highlight java linenos %} - interface JavaScript { - void showXYCoordinates(int x, int y); - } - - void bindJavascript(JavaScript js) { - javascript = js; - } - - JavaScript javascript; - - void setup() { ...} - void draw() { ... } - void mouseMoved() { - ... - if(javascript!=null){ - javascript.showXYCoordinates(mouseX, mouseY); - } - }{% endhighlight %} - -What we've done is we've told Processing: "There are things that follow the - JavaScript interface. This means that whatever else they can do, they'll have a - function called "showXYCoordinates" and that function takes two arguments, both of type int." - - of course, the sketch will not magically know our on-page javascript, so we also - define a function that lets us tell the sketch what actually counts as javascript, - which is what the bindJavascript(...) function is for.
- -This leaves us with needing to make sure that we really do tell the sketch what - Javascript is, which we'll do as follows on the page:
- - {% highlight javascript linenos %} - var bound = false; - - function bindJavascript() { - var pjs = Processing.getInstanceById('mysketch3'); - if(pjs!=null) { - pjs.bindJavascript(this); - bound = true; - } - if(!bound) setTimeout(bindJavascript, 250); - } - - bindJavascript();{% endhighlight %} - -This defines a function that checks whether processing.js has loaded our sketch yet. - If not, it tries again 250ms later. If the sketch is loaded, the reference to the sketch - is used to tell it what "javascript" should be. This is achieved by virtue of processing.js - trusting that you wrote valid code. As such, as long as you're on the javascript side of - things, you can pass the sketch whatever you like, and the sketch will trust that it conforms - to what the method says the type should be. In this case we pass the javascript "this" value - (which refers to the global javascript environment for the current window), and tell processing - "this thing conforms to your JavaScript interface, so it has loads of things but the only - thing you need to be concerned about is whether or not it has a showXYCoordinates(int, int) - function, which it does."
- -So, our final sketch behaves like the sketch below, and our final page source looks like the following:
- - {% highlight html linenos %} - - - - -This leaves us with one last topic that we need to cover, simply because it's so common: - using an AJAX approach to get some data, and then passing that data, properly formatted, to your sketch.
- -One interesting thing that processing.js allows us to do is to create objects as we defined them in - our sketch, in javascript, and then hand them over to the sketch to deal with. To give an example, let's - use the following sketch, which lets you draw points by clicking with the mouse, and links up all the - points with lines:
- - {% highlight java linenos %} - ArrayList points; - - ArrayList getPoints() { return points; } - - void setup() { - size(200,200); - points = new ArrayList(); - noLoop(); - stroke(255,0,0); - fill(255); - } - - void draw() { - background(200,200,255); - for(int p=0, end=points.size(); p < end; p++) { - Point pt = (Point) points.get(p); - if(p < end-1) { - Point next = (Point) points.get(p+1); - line(pt.x,pt.y,next.x,next.y); } - pt.draw(); } - } - - void mouseClicked() { - points.add(new Point(mouseX,mouseY)); - redraw(); - } - - class Point { - int x,y; - Point(int x, int y) { this.x=x; this.y=y; } - void draw() { ellipse(x,y,10,10); } - }{% endhighlight %} - - - -We can also make javascript place some points for us, automatically, by using the following javascript:
- - {% highlight javascript linenos %} - function loadPoints(id, button) { - var pjs = Processing.getInstanceById(id); - var points = pjs.getPoints(); - points.add(new pjs.Point(10,10)); - points.add(new pjs.Point(10,190)); - points.add(new pjs.Point(190,190)); - points.add(new pjs.Point(190,10)); - pjs.draw(); - }{% endhighlight %} - - - -Because processing.js turns the sketch into actual javascript, every class we defined in it - can be created using new pjs.ClassName(arguments,...).
- -Another way to get data from javascript into a sketch is by way of a JSON description. JSON - is particulary interesting because javascript can read a JSON text string and immediately turn - it into a full-fledged javascript object. Let's look at our point-drawing sketch again, this - time with a dedicated "addPoint" method:
-
- {% highlight java linenos %}
- ArrayList points;
-
- void setup() {
- size(200,200);
- points = new ArrayList();
- }
-
- void draw() {
- background(200,200,255);
- for(int p=0, end=points.size(); p
The JSON that gets loaded in the example sketch in this section is the following:
- -{ 'points' : [ {'x': 10 , 'y': 10},
- {'x': 190 , 'y': 10},
- {'x': 190 , 'y': 190},
- {'x': 10, 'y': 190} ] }
-
- Another favourite is the XML document. This is where the Processing data type "XMLElement" - comes into play. Rather than trying to use javascript to parse the XML, we pass the xml data - straight on to our sketch, which will know exactly what to do with it:
- - - -And the handling in our sketch will look like this:
- - {% highlight java linenos %} - void buildFromXML(String xml) { - XMLElement data = new XMLElement(xml); - XMLElement[] xmlpoints = data.getChildren(); - for(int p=0, end=xmlpoints.length; pA special kind of XML document is the SVG Scalable Vector Graphics document. What's - special about it is that it already represents visual data, and Processing can load SVG - XML natively.
- - - -One last thing you may want to pass to a sketch is a real javascript object. Say we have - a physics library that we want to take advantage of in our sketch, and for Processing it's a - .jar file, but there's a javascript version too. This thing lets us create a javascript "Physics" - object that we can call functions on for computing momentum and force transfer when we make - two things hit each other. Since processing.js does not support .jar libraries (because it's - precompiled binary java class code, and pjs cannot unpack a jar file, reverse engineer the - .java source, transform it to Processing API calls, then confirm all calls are supported) we'll - use this convenient javascript library. But how to do this cleanly?
- -We have to do three things:
- -So let's get cracking! First we determine which functions in the javascript Physics object - we actually make use of. We could write an interface that has correct method signatures for - every function in the library, but this would be overkill. After reviewing our code we see - that we actually only make use of three of the objects functions: collide_objects(forcevector1, - forcevector2, collisionangle), get_force_vector(startpoint, distancevector, accelleration) and - get_trajectory(startpoint, objectmass, initialvector, gravityvector, gravitystrength). - Let's build our interface:
- - {% highlight java linenos %} - interface Physics - { - // collision modifies the two force vectors in place. Nothing is returned. - void collide_objects(float[] forcevector1, float[] forcevector2, float collisionangle); - - // get force vector returns a force vector - float[] get_force_vector(float[] startpoint, float[] distancevector, float accelleration); - - // trajectory calculation returns a curve, represented as a lest of 2D coordinates - float[][] get_trajectory(float[] startpoint, float objectmass, float[] initialvector, float[] gravityvector, float gravitystrength); - }{% endhighlight %} - -First job done. Now to bind javascript. We've already looked at how to do this, so just follow - the standard procedure and job's a good'n. In addition to whatever javascript functions you want - to expose, however, we must add one more:
- - {% highlight java linenos %} - interface JavaScript { - ... - Physics buildPhysicsObject([properly typed variables to match the javascript constructor]); - ... - }{% endhighlight %} - -Finally, we now make use of our purely javascript library in our js file(s):
- - {% highlight java linenos %} - function buildPhysicsObject(x, y, someothervar) - { - return new Physics(x,y,someothervar); - }{% endhighlight %} - -This last step seems silly, but we have to delegate the task of building a javascript object - to javascript. If we tried to do this inside our sketch, processing.js will not complain, but - Processing will. To make matters worse, it also obscures the point of failure: if something - goes wrong in the sketch, did it go wrong because processing.js has a bug, or because you were - sloppy with javascript inside a Processing sketch? Golden rule: keep the different languages - separated as much as possible.
- -We're almost set to use our javascript library for Processing purposes now. The only thing - left is to create these objects and then use them in our sketch:
- - {% highlight java linenos %} - class MassBody - { - // a class for bodies with mass that travel with some speed and are located at some x/y position - float[] forceVector = new float[2]; // 2 dimensional vector; - int XDIM = 0; // index constant - int YDIM = 1; // index constant - float x = 0; // position - float y = 0; // position - MassBody(float x, float y) { forceVector[XDIM] = 0; forceVector[YDIM] = 0; this.x=x; this.y=y; } - void draw() { /* draws the body */ } - float[] getForce() { return forceVector; } - void impartForce(float[] stimulus) { forceVector[XDIM] += stimulus[XDIM]; forceVector[YDIM] += stimulus[YDIM]; } - void updatePosition() { x+=...; y+=...; } - } - - MassBody body1 = new MassBody(...); - MassBody body2 = new MassBody(...); - - Phsyics physicsObject - - void bindJavascript(JavaScript js) { - javascript = js; - int x = 0; - float y = 9; - String[] somevalues = {"scalar", "vector", "tensor"}; - physicsObject = javascript.buildPhysicsObject(x,y,somevalues); - } - - void setup() - { - ... - } - - void draw() - { - // if the two bodies collide, compute the resultant forces - if(body1.collides(body2)) - { - // forces are recomputed in place - float angle_12 = body1.getAngleTo(body2); - physicsObject.collide_objects(body1.getForce(), body2.getForce(), angle_12); - body1.updatePosition(); - body2.updatePosition(); - } - body1.draw(); - body2.draw(); - }{% endhighlight %} - -And we're done!
- -As last point of business, you can of course also use Processing.js as a pure graphics - library, by invoking it for some canvas and then calling Processing API calls directly. Let's - jump right in! The following code is what you would write on-page, although of course as ever - it's far better practice to link to your source files, so you should really place what's in - the script tags in a file myPjsSketch.js and link to it using src="..." instead.
- -The following code is split up into multiple (numbered) sections.
- -First, bind a new Processing instance to the indicated canvas.
- - {% highlight html linenos %} - - {% endhighlight %} -So let's see that in action - the code that we just ran through is supposed to draw - a sinewave, with an amplitude that depends on where the mouse is on the canvas. If all - went well, it will look like this:
- - - - - -This guide was brought to you by Mike "Pomax" Kamermans. - -
For more information, you can visit the following websites, or visit us in the - #processing.js IRC channel on irc.mozilla.org.
- - - -- The Processing language enables complex 2D and 3D graphics programming without having - to understand the details of the underlying graphics system. It is designed to be - easily learned, yet allows one's skills to grow and evolve without ever feeling - limited.
-- Processing can be used to work with both 2D and 3D graphics. It achieves this through - a number of different rendering engines, which affect how it works. For example, - one might choose to render a 2D sketch using the JAVA2D and P2D renderers or create - 3D sketches with the P3D and OPENGL renderers. There are also renderers for creating - PDFs. Processing allows developers to choose renderers based on tradeoffs of speed - and quality.
-- A renderer is chosen through the use of Processing's - size() function. For example, to create a 2D sketch that is 200 by 200 pixels - in size: -{% highlight java linenos %} -size(200, 200, P2D); -{% endhighlight %} -
-- Processing.js uses the HTML canvas element to provide 2D and WebGL rendering contexts. - The canvas 2D API is used to implement Processing's JAVA2D and P2D renderers (see - the canvas API for - details on canvas). You can create a 2D Processing.js sketch using any of the following: -
- Here is a simple 2D Processing.js sketch:
-
-
-
-
-{% highlight java linenos %}
-int i = 0;
-void setup() {
- size(200, 200);
- background(255);
- smooth();
- strokeWeight(15);
- frameRate(24);
-}
-void draw() {
- stroke(random(50), random(255), random(255), 100);
- line(i, 0, random(0, width), height);
- if (i < width) {
- i++;
- } else {
- i = 0;
- }
-}
-{% endhighlight %}
-
-
- Processing.js 3D renderers (P3D and OPENGL) are implemented using WebGL. The Web-based - Graphics Library (WebGL) is a canvas rendering context that provides a JavaScript - based 3D drawing API for the web (see - https://developer.mozilla.org/en/WebGL). WebGL is based on OpenGL ES 2.0, - a subset of OpenGL designed to be used in embedded devices. Many modern browsers - support WebGL, but not all. You can confirm that your browser and computer/operating - system support WebGL here. - You can download a WebGL enabled browser - here.
-- Just as Processing relies on OpenGL for its 3D graphics (OPENGL renderer), Processing.js - uses OpenGL via WebGL, allowing Processing.js sketches to work just like their Processing - equivalent.
-- In order to create a 3D OpenGL sketch in Processing, two things are necessary. First, - the OpenGL library must be imported. Second, the OpenGL rendered must be specified: - -{% highlight java linenos %} -import processing.opengl.* -... -size(200, 200, OPENGL); -{% endhighlight %} - -
-- Since Processing.js is actually JavaScript, it does not support importing Java-based - libraries. However, in order to enable sketches written in Processing to work in - Processing.js, the import line can be safely included—Processing.js will simply - ignore it. The following methods of creating a 3D Processing.js sketch are equivalent: -
import processing.opengl.* ... size(200, 200, OPENGL);-
size(200, 200, P3D);-
- Here is a simple Processing.js 3D sketch:
-
-
-
-{% highlight java linenos %}
-size(200, 200, OPENGL);
-noStroke();
-background(50);
-lights();
-translate(width/2+30, height/2, 0);
-rotateX(-PI/6);
-rotateY(PI/3 + 210/float(height) * PI);
-box(45);
-translate(0, 0, -50);
-box(30);
-{% endhighlight %}
-
-
-
- Here's another more complex one:
-
-
-
-{% highlight java linenos %}
-float ang = 0, ang2 = 0, ang3 = 0, ang4 = 0;
-float px = 0, py = 0, pz = 0;
-float flapSpeed = 0.2;
-
-void setup() {
- size(200, 200, OPENGL);
- frameRate(50);
- noStroke();
-}
-
-void draw() {
- background(0);
- camera();
- // Flight
- px = sin(radians(ang3)) * 170;
- py = cos(radians(ang3)) * 300;
- pz = sin(radians(ang4)) * 500;
- translate(width/2 + px, height/2 + py, -700+pz);
- rotateX(sin(radians(ang2)) * 120);
- rotateY(sin(radians(ang2)) * 50);
- rotateZ(sin(radians(ang2)) * 65);
-
- // Body
- fill(153);
- box(20, 100, 20);
- // Left wing
- fill(204);
- pushMatrix();
- rotateY(sin(radians(ang)) * -20);
- rect(-75, -50, 75, 100);
- popMatrix();
- // Right wing
- pushMatrix();
- rotateY(sin(radians(ang)) * 20);
- rect(0, -50, 75, 100);
- popMatrix();
- // Wing flap
- ang += flapSpeed;
- if (ang > 3) {
- flapSpeed *= -1;
- }
- if (ang < -3) {
- flapSpeed *= -1;
- }
- // Increment angles
- ang2 += 0.01;
- ang3 += 2.0;
- ang4 += 0.75;
-}
-{% endhighlight %}
-
-
- Once you have a 3D enabled browser installed you can try out some example 2D and
- 3D sketches here.
-
- Once a 3D sketch has been created, all of the normal Processing drawing operations - can be done. Most Processing functions have 2D and 3D versions (e.g., you provide - different arguments for points in 2D or 3D space). By learning the Processing syntax, - it's easy to create complex 2D and WebGL graphics without ever touching the underlying - graphics APIs. This is true of Processing and Java, and also of Processing.js and - canvas/WebGL. The Processing langauge provides a powerful and beginner friendly - on-ramp to canvas 2D and WebGL. Consult the - Processing.js Langauge Reference for specific details on how to use each - function.
-- In addition to running standard Processing sketches, Processing.js can also be used - in so-called API mode. This is the Processing language API which is accessbile to - JavaScript without any Processing code. The Processing.js API is available if you - download the complete Processing.js zip file instead of just the .js file from the - Downloads page (for example: processing.js-version.zip vs processing.min.js) (http://processingjs.org/download). - It is essentially the same as Processing.js, but without the code parser (i.e., - you can use the API either way, but the Processing.js API is a somewhat smaller - file). See - Writing JavaScript-only Processing.js Code for more details.
-- It's also possible to work with the raw canvas context, both 2D and WebGL, from - Processing.js, JavaScript, or both. This is not a recommended method, since it will - make your Processing.js sketch harder to use in Processing; however, sometimes it's - useful to know how to control the canvas context from outside the sketch in JavaScript, - or to do something that Processing doesn't allow, which the canvas or WebGL APIs - do.
-- All Processing.js sketches have an externals property, accessible from within the - Processing code as a global variable. This object is meant to allow for accessing - and sharing external but related data between the sketch code and the web page. - The externals object has a number of useful properties, including: -
- From JavaScript, these can be accessed via a Processing.js sketch's instance: - -{% highlight javascript linenos %} -var p = Processing.instances[0]; -var context = p.externals.context; -var p2 = Processing.getInstanceById('canvas-id'); -var p2Canvas = p2.externals.canvas; -{% endhighlight %} - -
-- The same thing can be done from within Processing code, where the externals object - is available as a global variable: - -{% highlight javascript linenos %} -// Processing.js allows you to mix JavaScript, so using var is fine here: -var currentContext = externals.context; -{% endhighlight %} - -
-Once you have a reference to the context, you can use any valid canvas API call, -including raw WebGL functions if using a 3D sketch. diff --git a/articles/_posts/2011-12-03-p5QuickStart.html b/articles/_posts/2011-12-03-p5QuickStart.html deleted file mode 100644 index 0ad2abf..0000000 --- a/articles/_posts/2011-12-03-p5QuickStart.html +++ /dev/null @@ -1,471 +0,0 @@ ---- -layout: default -desc: A guide to Processing.js for Processing developers -title: Processing Quick Start -permalink: /articles/p5QuickStart.html ---- -- This quick start guide is written from the standpoint of a Processing developer. - No HTML or JavaScript knowledge is assumed, and only basic Processing knowledge - is necessary.
-If you're in a rush, here's what you need to know:
-- Load your web page, and it will parse, translate, and run your sketch in the browser.
-- Processing is built using Java. It was created at much the same time that the web - was starting. At this time the choice of the Java language, and Java Runtime, as - implementation targets for Processing made a lot of sense. In the mid-1990s, Java - was poised to become the language of the web, with Applets and other Java technologies - being used broadly on the client-side. Even Netscape, who created the language which - would eventually become the lingua franca of the web with JavaScript, named their - language so as to align themselves with the growing hype around Java.
-- In the end, Java became an important server side technology, receding from the client-side - and browser. Today, most web browsers still support Java Applets, by means of a - binary plugin. However, few web developers deploy Java-based web applications now, - due to long load and startup times and difficulties relying on Java (or compatible - Java versions) being installed. This trend is not isolated to Java, but is happening - to all browser plugins (e.g., Flash), which are becoming less popular as issues - of security, installation, deployment, etc. make them inconvenient or risky.
-- Another reason that plugins like Java and Flash have fallen out of favour is that - recent advances in standard web technologies, specifically HTML5 and JavaScript, - have made it possible to do things that previously depended on native (i.e., faster, - compiled) code. Companies like Google, with GMail and Google Docs, or Scribd (see - Scribd-in-HTML5) - have shown that HTML, CSS, and JavaScript alone are enough to build fast, full featured - web applications.
-- Processing.js is built using JavaScript and HTML5. Processing.js is really two things: - a Processing-to-JavaScript translator; and an implementation of the Processing API - (e.g., functions like line(), stroke(), etc.) written in JavaScript instead of Java. - It might seem odd at first to imagine your Processing sketches running in a browser, - usually without modification. But this is exactly what Processing.js enables.
-- Processing.js automatically converts your Processing code to JavaScript. This means - that you don't have to learn JavaScript in order to run your code in a browser. - You can, quite literally, write your code using the Processing IDE like you always - have, and follow the steps below to get it running on the web. There's nothing new - to learn, beyond getting a simple web page created.
-- Under the hood, Processing.js uses the new HTML5 canvas element to create your sketch's - graphics. The canvas element is a new feature of the web, and is either implemented - or will be implemented by all major web browsers. All Processing drawing features - have been reimplemented in Processing.js to use canvas, so any browser that supports - canvas will also support Processing.js.
-- Here's a sample of a Processing.js sketch running in the browser. If you can see - it working, your browser supports everything you need already, and you can move - on to instructions below.
- -- There's nothing you should do differently to write sketches for Processing.js: you - write your Processing.js code exactly like Processing. For most people, this will - mean using the Processing IDE, which has the nice benefit of letting you write, - run, and test your code all in once place. Remember, any valid Processing sketch - should also be a valid Processing.js sketch.
-- If you want to experiment with web-based Processing.js code editors, you can also - try these:
- -- Let's make a simple sketch that is 200 by 200 in size, sets the background to gray, - draws a small white circle, and prints a message to the debug console:
- -{% highlight java linenos %} -void setup() { - size(200, 200); - background(100); - stroke(255); - ellipse(50, 50, 25, 25); - println("hello web!"); -} -{% endhighlight %} - -- I'll assume below that you saved this to a file called hello-web.pde -
-- Processing.js is a JavaScript library that is meant to be included in a web page. - You don't have to compile it, tell your web server about it, etc. It simply has - to be included in a web page, and the browser will do the rest.
-- You can download Processing.js at the download - page. The library comes in a number of forms, for example:
-- The version numbers may be different as you read this, but note the file extensions. - Both end in .js, but one also has .min. The .min version is Processing.js in a minified - form, which means it will be smaller to download (minified JavaScript uses tricks - like removing whitespace and renaming long variable names to single letters). File - sizes, and download times, matter on the web in a way they don't with normal Processing - sketches.
-- It's easy to get overwhelmed with the amount there is to learn about modern web - technologies. But there's a secret: you can ignore 95% of it as you start, and add - more later as you have time and interest. Unlike compilers or programming languages, - web browsers are designed to accept almost any input you throw at them, whether - valid or not, whether complete or not. Here's your first Processing.js web page:
- -{% highlight html linenos %} - - -{% endhighlight %} - -- That's it! No <html> or <body> tags, no title, no CSS, just the processing.js - script, and a canvas. While there isn't much here, it's important to understand - what is. First, the script tag has a src attribute, which is the file to - load. This could be a full url or a relative path. In this case the browser is going - to look for a file named processing-1.0.0.min.js in the same directory as - your web page.
-- The second thing in this web page is a <canvas> tag. Notice that it too has - an attribute, data-processing-sources. This is a list of filenames (or just - one filename if you only have 1 file) separated by spaces (filenames and URLs on - the web can't include spaces, so space is a safe choice for separating lists). In - this case, the browser is going to look for a file named hello-web.pde located - in the same directory as your page page.
-- How does the browser know how to load a Processing *.pde file? Processing.js takes - care of this, and will download, parse (i.e., translate to JavaScript), then run - it automatically when the page is loaded.
-- And that's it! Save this file to the same directory as hello-web.pde and - processing-1.0.0.min.js and call it hello-web.html.
-- If you're the kind of person who doesn't like taking shortcuts, here's what a more - complete web page might look like:
- -{% highlight html linenos %} - - - -This is my first Processing.js web-based sketch:
- - - -{% endhighlight %} - -- Both ways work, and you shouldn't let yourself get burdened by HTML and other web - syntax until you feel you want to do other things with your web pages.
-- In case it isn't obvious, you run your hello-web.pde sketch by loading your - hello-web.html web page in a compatible browser. Web browsers will provide - you a way to load a local file, usually using the File menu and then Open File.... - If you've saved the files above on a web server, you can use the remote URL instead.
-- While Processing.js is compatible with Processing, Java is not JavaScript, and canvas - has some differences from Java's graphics classes. Here are some tricks and tips - as you start working on more complex sketches in Processing.js.
-- Processing uses the concept of a data directory, where images and other resources - are located. Processing.js does not include this. As a result, you should always - provide file pages (e.g., images) that are relative to your web page, which is the - norm on the web.
-- Processing.js is compatible with Processing, but is not, and will never be, fully - compatible with Java. If your sketch uses functions or classes not defined as part - of Processing, they are unlikely to work with Processing.js. Similarly, libraries - that are written for Processing, which are written in Java instead of Processing, - will most likely not work.
-- Processing has many rendering modes to choose from, depending on the desired quality - and speed for graphics (e.g., OPENGL, P3D, JAVA2D, etc.). Processing.js uses <canvas> - which provides either a 2D drawing context or a 3D context based on WebGL (a version - of OpenGL for the web). Therefore, whatever you choose, you will end-up with either - the 2D or 3D context.
-- There are a class of bugs that arise when converting Processing code to Processing.js - that involve integer vs. floating point division. What was straight-up integer division - in Processing code, when converted to Processing.js, can sometimes become problematic, - as numbers become doubles, and introduce a fractional part. The fix is to explicitly - cast any division to an integer that exhibits this behaviour:
- -{% highlight java linenos %} -// before -int g = mouseX / i; - -// after -int g = (int)(mouseX / i); -{% endhighlight %} - -- See - lighthouse bug
- -JavaScript only knows about numbers, and strings, unlike Java, which also knows about "char" - data types. The char is a 16 bit unsigned integer value, that can also pretend to be a letter - (from the ISO8859-1 codepage for the first 256 numbers, and basically magic after that). - Unfortunately, as JavaScript has no equivalent, relying on char comparisons to be either numbers - or letters is quite likely to cause problems. If you have Processing code where you're comparing - chars, you will either have to perform int casting, or string casting, using the int() - and str() functions, so that you know you're explicitly comparing datatypes that - JavaScript can deal with.
- -- Processing uses a synchronous I/O model, which means that functions like loadImage() - take time to execute, and while they are running, nothing else happens: the program - waits until loadImage() is done before moving on to the next statement. This - means that you can count on the value returned by a function like loadImage() - being usable in the next line of code.
-- Web browsers don't work like this. The web uses an asynchronous I/O model, which - means that functions which load external resources can't make the program wait until - they finish. In order to replicate Processing's load* functions, you have to use - a special Processing.js Directive.
-- The Processing.js Directives are hints to the browser that are written in comments - rather than in the Processing code itself. Here's a typical Processing sketch that - loads an image synchronously and then draws it:
- -{% highlight java linenos %} -PImage img; - -void setup() { - img = loadImage("picture.jpg"); - image(img, 0, 0); -} -{% endhighlight %} - -- This code will not work in the browser with Processing.js, because the call to image() - will happen before the file picture.jpg has been downloaded. The fix is to - ask Processing.js to download the image before the sketch starts, and cache it--a - technique known as preloading. Here is the modified code:
- -{% highlight java linenos %} -/* @pjs preload="picture.jpg"; */ -PImage img; - -void setup() { - img = loadImage("picture.jpg"); - image(img, 0, 0); -} -{% endhighlight %} - -- Notice the extra comment line at the top of the code. The @pjs directive - is for Processing.js, and not the developer. Think of it as an extra line of code - that will be executed before the program begins.
-- If you have multiple images to load, use a list like so:
- -{% highlight java linenos%} -/* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */ -{% endhighlight %} - -- One of the powerful features of JavaScript is its dynamic, typeless nature. Where - typed languages like Java, and therefore Processing, can reuse names without fear - of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into - the inner-workings of JavaScript, the best advice for Processing developers is to - not use function/class/etc. names from Processing as variable names. For example, - a variable named line might seem reasonable, but it will cause issues with - the similarly named line() function built-into Processing and Processing.js. - This is equally true for built-in functions and functions you create. A good rule- - of-thumb is: avoid having a variable foo in the same sketch as a function - foo();.
- -- If your code uses subclasses that override one or more overloaded methods in the superclass, you - will need "dummy" overrides for every method signature that you'd normally leave untouched:
- -{% highlight java linenos %} -class X -{ - void doSomething() - { - ... - } - - void doSomething(float x, float y) - { - ... - } -} - -class Y extends X -{ - void doSomething() - { - // different code from compared to the super class - } - - // even though we don't override this method, - // its signature must be added to prevent Pjs - // from getting the method chain wrong: - void doSomething(float x, float y) - { - super.doSomething(x,y); - } -} -{% endhighlight %} - -- Even though in Processing you will not need to implement the fallthrough method for doSomethign with a - (float,float) signature, doing so is almost always necessary to make sure Processing.js doesn't get - confused about which class's method to call.
- -- Also in the class of integer vs. floating point issues, color(number) and color(number, number) - may not behave quite as expected. In native Processing, color(int) and color(float) behave - differently in that the first is used for full color integers. Calling color(#FF0000) and - color(16711680) are the same call, so they produce a red color. However, when using float - values the color()/1 function treats the input as gray values, between 0 and the max indicated - value (255, by default). Any value lower than 0 or higher than max is simply capped. Because of - the integer vs. floating point issues with JavaScript, Processing.js does not perform any capping, - and so even though the following code will show a black and a white line in Processing, it will - show a yellow line, and an "invisible" line in Processing.js instead.
- -{% highlight java linenos %} -void setup() -{ - size(100,100); - noLoop(); -} - -void draw() -{ - background(127); - stroke(-200.0); - line(0,25,width,25); - stroke(600.0); - line(0,75,width,75); -} -{% endhighlight %} - -We recommend you always sanitize your inputs for color if you need colors to be "in range", and only use hex colors, using color(#RRGGBB), or rgb/rgba colors, using color(r,g,b) and color(r,g,b,a)
-- Using the data-processing-sources attribute on the canvas, and having Processing.js - load an external file is the preferred and recommended way to include scripts in - a web page. However, it is also possible to write in-line Processing code.
-- A few changes are necessary to make the example above work with inline Processing - code:
- -{% highlight html linenos %} - - - -{% endhighlight %} - -- This code is more complex because it has to figure out which canvas goes with which - script (i.e., you can have multiple Processing sketches living in the same page, - and therefore, multiple canvases). Also note that the scripts include a type - attribute, which distinguishes between JavaScript and Processing code (the browser - will ignore Processing scripts). Finally, note the use of the id and target - attributes to connect the Processing script with the associated canvas.
-- Now that your sketch is working, and you have a basic web page, you'll probably - start getting ideas about how to make this look more beautiful, how to better integrate - your sketch with the surrounding web page or site, and how to mix data from various - web services and APIs. Is it possible to mix images on Flickr and a Processing.js - sketch? Yes. Is it possible to link Twitter to Processing.js? Yes. Anything the - web can do, your Processing.js sketch can do.
-- This is an important idea, and is worth restating: Processing.js turned your once - Java-based code into JavaScript, and your graphics into <canvas>. As a result, - anything you read on the web about dynamic web programming, AJAX, other JavaScript - libraries or APIs, all of it applies to your sketch now. You aren't running code - in a box, cut-off from the rest of the web. Your code is a first-class member of - the web, even though you didn't write it that way.
-- If you're feeling adventurous and want to go learn more about how to do other thing - with HTML, JavaScript, CSS, etc. remember that everything they say applies to you - and your sketches.
-- This quick start guide is written from the standpoint of a JavaScript developer. - The document assumes you know JavaScript and web programming, but only very basic - Processing knowledge is assumed.
-- If you're in a rush, here's what you need to know:
-- Load your web page, and it will parse, translate, and run your sketch in the browser.
-- The Processing language was originally created at MIT as part of the Media lab and - Aesthetics and Computation group. They needed a way to bridge the gap between software - developers, artists, data visualizers, etc., and to do so in a way that allowed - new programmers (or non-programmers) to do complex visual work easily. Processing - was built using Java, and can be thought of as a simplified Java, with a simplified - Java API for drawing and graphics.
-- Processing has a large and vibrant community, who are good at creating 2D and 3D - graphics, visualizing data sets, audio, video, etc. With HTML5 the web gained canvas, - audio, and video--things which had previously only been available via plugins like - Flash or Java. At the same time, advances in JavaScript engines have made it possible - to do things in script that were previously too slow.
-- By porting the Processing language to the web, both the Processing and web communities - benefit. For Processing, this means that code which used to only work on the desktop - now "just works" in the browser. For the web, this means that a new but mature and - full-featured approach to graphics programming becomes available. The <canvas> - element is too low-level for most developers to use directly--JavaScript libraries - are necessary. Processing.js can be thought of as just such a library, simplifying - the use of the 2D and 3D canvas operations.
-- The Processing language was designed to be small but complete, and easy to learn. - This document does not attempt to teach you Processing, and you are encouraged to - seek out Processing specific tutorials, books, and examples. Any Processing code - or concepts should map to Processing.js (the exceptions are listed below). You can - also use pure JavaScript to work with the Processing drawing API, skipping the Java - syntax of Processing in favour of JavaScript.
-- Processing.js was originally created in order to allow existing Processing developers - and existing Processing code (often referred to as sketches) to work unmodified - on the web. As a result, the recommend way to use Processing.js is to write Processing - code, and have Processing.js convert it to JavaScript before running it.
-- Over time, many web developers have begun using Processing.js, and asked that we - design a way for the API to be used separate from the Processing language itself. - Therefore, we have provided a way for JavaScript developers to write pure JavaScript - code and still use the Processing.js functions and objects. NOTE: Processing.js - is first and foremost a port of Processing to the open web, with design decisions - favouring compatibility with Processing. It was not designed as a general purpose - HTML drawing library. Having said that, it can be used as a high-level drawing API - for canvas.
-- Below we discuss the various methods for using Processing.js in your web pages.
-- This is the preferred method for using Processing.js, and has been dealt with at - length in the Processing.js - for Processing Devs quick start guide. To summarize:
-This is my first Processing.js web-based sketch:
- - - -{% endhighlight %} - -- Processing.js will automatically scan the document on page load for <canvas> - elements with data-processing-sources attributes, download the files using - XMLHTTPRequest, and feed them to the Processing-to-JavaScript translator. The resulting - JavaScript is run using eval.
-- Processing.js automatically downloads and converts any Processing code to JavaScript. - It does this using the Processing.compile() method, and those interested in building - tools or utilities for Processing.js can do the same.
-- In order to obtain "compiled" code (i.e., JavaScript suitable for use by the Processing.js - runtime) from Processing code, do the following:
- -{% highlight javascript linenos %} -// hard-coded Processing code, text from an HTML widget, downloaded text, etc. -var processingCode = "..."; -var jsCode = Processing.compile(processingCode).sourceCode; -{% endhighlight %} - -- For example, converting the following Processing code produces the "compiled" JavaScript - underneath:
- -{% highlight javascript linenos %} -// Processing code -void setup() { - size(200, 200); - background(100); - stroke(255); - ellipse(50, 50, 25, 25); - println("hello web!"); -} - -// "Comiled" JavaScript code -// this code was autogenerated from PJS -(function(processing, $constants) { - function setup() { - processing.size(200, 200); - processing.background(100); - processing.stroke(255); - processing.ellipse(50, 50, 25, 25); - processing.println("hello web!"); - } - processing.setup = setup; -}) -{% endhighlight %} - -- The previous method produced JavaScript code from Processing, but you can also write - JavaScript on its own. The Processing.js parser turns Processing code into a JavaScript - function, then runs it. As a result, it's possible to skip the Processing code altogether, - and simply write a JavaScript function, passing this to your Processing instance. - Here's an example:
- -{% highlight javascript linenos %} -function sketchProc(processing) { - // Override draw function, by default it will be called 60 times per second - processing.draw = function() { - // determine center and max clock arm length - var centerX = processing.width / 2, centerY = processing.height / 2; - var maxArmLength = Math.min(centerX, centerY); - - function drawArm(position, lengthScale, weight) { - processing.strokeWeight(weight); - processing.line(centerX, centerY, - centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength, - centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength); - } - - // erase background - processing.background(224); - - var now = new Date(); - - // Moving hours arm by small increments - var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12; - drawArm(hoursPosition, 0.5, 5); - - // Moving minutes arm by small increments - var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60; - drawArm(minutesPosition, 0.80, 3); - - // Moving hour arm by second increments - var secondsPosition = now.getSeconds() / 60; - drawArm(secondsPosition, 0.90, 1); - }; -} - -var canvas = document.getElementById("canvas1"); -// attaching the sketchProc function to the canvas -var processingInstance = new Processing(canvas, sketchProc); -{% endhighlight %} - -- Here a sketch function is created, similar to what the parser would produce. This - function should take 1 argument, a reference to a processing object (i.e., the Processing - runtime), which will be created by the Processing constructor. Any Processing functions - or objects are accessible as properties of this object.
-- Once that function is complete, pass it, along with a reference to a canvas, to - the Processing constructor (remember to use new).
-- One of the first questions people ask with Processing.js is whether they can read - values from the document in which the Processing sketch is running, or vice versa. - The answer is yes.
-- Processing.js converts Processing code into JavaScript contained in a function closure. - The variables and functions you create are not attached to the global object (i.e., - window). However, you can still get access to them.
-- Since Processing code gets converted to JavaScript and run like any other function, - all Processing code has access to the global object. This means that if you create - a variable or function in a global script block, they are automatically accessible - to Processing. Consider this example:
-- First the Processing file, mixing.pde:
- -{% highlight java linenos %} -String processingString = "Hello from Processing!"; - -void setup() { - printMessage(jsString + " " + processingString); -} -{% endhighlight %} - -- Next the web page:
- -{% highlight html linenos %} - - - -- Here Processing.js allows the use of a variable and function declared outside the - Processing code.
-- The previous example kept a clean separation between the JavaScript and Processing - code, while loosening the boundary between the two. Because Processing.js converts - Processing code to JavaScript, it's also possible to mix them directly. The Processing.js - parser will leave JavaScript it finds within the Processing code unaltered, allowing - developers to write a hybrid of Processing and JavaScript (NOTE: this is why we - don't use a pure Processing parser approach in processing.js). Here is the previous - example rewritten using this method:
- -{% highlight javascript linenos %} -var jsString = "Hello from JavaScript!"; -var printMessage = function(msg) { - document.getElementById('msg').innerHTML = "Message: " + msg; -}; - -String processingString = "Hello from Processing!"; - -void setup() { - printMessage(jsString + " " + processingString); -} -{% endhighlight %} -- There is some JavaScript syntax that can't be easily mixed this way (e.g., regex - literals). In those cases you can simply move your pure JavaScript to a <script> - block and access it using the method described above.
-- Reaching out from the Processing code to JavaScript is easier than going the other - way, since the JavaScript created by the Processing.js parser is not exposed directly - on the global object. Instead, you gain access using the Processing.instances property.
-- The Processing constructor keeps track of instances it creates, and makes them available - using the getInstanceById() method. By default, when a <canvas> has a data-processing-sources - attribute, its id is used as a unique identifier for the Processing instance. If - no id attribute is provided, you can use Processing.instances[0].
-- After you have a reference to the appropriate Processing instance, you can call - into it like so:
- -{% highlight html linenos %} - - - -- Here two buttons in the DOM are used to allow the user to start or stop a running - Processing sketch. They control the Processing instance (you might have several - in a page, or hidden in divs) directly from JavaScript, calling Processing functions: - loop() and noLoop(). The Processing functions are well documented elsewhere.
-- While Processing.js tries to be fully compatible with Processing, there are some - things which are different or require workarounds. We have also added some web-specific - features to make Processing.js easier to use. Here are some tricks and tips as you - start working on more complex sketches in Processing.js.
-- Each Processing instance (i.e., Processing.instances) has an externals property, - which is an object containing references to various non-Processing DOM/JavaScript - objects that can be useful. For example:
-- There are a class of bugs that arise when converting Processing code to Processing.js - that involve integer vs. floating point division. What was straight-up integer division - in Processing code, when converted to Processing.js, can sometimes become problematic, - as numbers become doubles, and introduce a fractional part. The fix is to explicitly - cast any division to an integer that exhibits this behaviour:
- -{% highlight java linenos %} -// before -int g = mouseX / i; - -// after -int g = (int)(mouseX / i); -{% endhighlight %} - -- See - lighthouse bug
- - -JavaScript only knows about numbers, and strings, unlike Java, which also knows about "char" - data types. The char is a 16 bit unsigned integer value, that can also pretend to be a letter - (from the ISO8859-1 codepage for the first 256 numbers, and basically magic after that). - Unfortunately, as JavaScript has no equivalent, relying on char comparisons to be either numbers - or letters is quite likely to cause problems. If you have Processing code where you're comparing - chars, you will either have to perform int casting, or string casting, using the int() - and str() functions, so that you know you're explicitly comparing datatypes that - JavaScript can deal with.
- - -- Processing uses a synchronous I/O model, which means that functions like loadImage() - take time to execute, and while they are running, nothing else happens: the program - waits until loadImage() is done before moving on to the next statement. This - means that you can count on the value returned by a function like loadImage() - being usable in the next line of code.
-- Web browsers don't work like this. The web uses an asynchronous I/O model, which - means that functions which load external resources can't make the program wait until - they finish. In order to replicate Processing's load* functions, you have to use - a special Processing.js Directive.
-- The Processing.js Directives are hints to the browser that are written in comments - rather than in the Processing code itself. Here's a typical Processing sketch that - loads an image synchronously and then draws it:
- -{% highlight java linenos %} -PImage img; - -void setup() { - img = loadImage("picture.jpg"); - image(img, 0, 0); -} -{% endhighlight %} - -- This code will not work in the browser with Processing.js, because the call to image() - will happen before the file picture.jpg has been downloaded. The fix is to - ask Processing.js to download the image before the sketch starts, and cache it--a - technique known as preloading. Here is the modified code:
- -{% highlight java linenos %} -/* @pjs preload="picture.jpg"; */ -PImage img; - -void setup() { - img = loadImage("picture.jpg"); - image(img, 0, 0); -} -{% endhighlight %} - -- Notice the extra comment line at the top of the code. The @pjs directive - is for Processing.js, and not the developer. Think of it as an extra line of code - that will be executed before the program begins.
-- If you have multiple images to load, use a list like so:
- -{% highlight java linenos %} -/* @pjs preload="picture.jpg,picture2.jpg,picture3.png"; */ -{% endhighlight %} - -- One of the powerful features of JavaScript is its dynamic, typeless nature. Where - typed languages like Java, and therefore Processing, can reuse names without fear - of ambiguity (e.g., method overloading), Processing.js cannot. Without getting into - the inner-workings of JavaScript, the best advice for Processing developers is to - not use function/class/etc. names from Processing as variable names. For example, - a variable named line might seem reasonable, but it will cause issues with - the similarly named line() function built-into Processing and Processing.js.
- -- If your code uses subclasses that override one or more overloaded methods in the superclass, you - will need "dummy" overrides for every method signature that you'd normally leave untouched:
- -{% highlight java linenos %} -class X -{ - void doSomething() - { - ... - } - - void doSomething(float x, float y) - { - ... - } -} - -class Y extends X -{ - void doSomething() - { - // different code from compared to the super class - } - - // even though we don't override this method, - // its signature must be added to prevent Pjs - // from getting the method chain wrong: - void doSomething(float x, float y) - { - super.doSomething(x,y); - } -} -{% endhighlight %} - -- Even though in Processing you will not need to implement the fallthrough method for doSomethign with a - (float,float) signature, doing so is almost always necessary to make sure Processing.js doesn't get - confused about which class's method to call.
- -- Using the data-processing-sources attribute on the canvas, and having Processing.js - load an external file is the preferred and recommended way to include scripts in - a web page. However, it is also possible to write in-line Processing code.
-- A few changes are necessary to make the example above work with inline Processing - code:
- -{% highlight html linenos %} - - - -{% endhighlight %} - -- This code is more complex because it has to figure out which canvas goes with which - script (i.e., you can have multiple Processing sketches living in the same page, - and therefore, multiple canvases). Also note that the scripts include a type - attribute, which distinguishes between JavaScript and Processing code (the browser - will ignore Processing scripts). Finally, note the use of the id and target - attributes to connect the Processing script with the associated canvas.
-This is my lovely article about something related to Processing.js
diff --git a/articles/index.html b/articles/index.html deleted file mode 100644 index 323accf..0000000 --- a/articles/index.html +++ /dev/null @@ -1,12 +0,0 @@ ---- -layout: default ---- --
We are very pleased to announce the release of Processing.js 0.4!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. Many smaller fixes and features have been added as well -as larger functions like blend modes. Another landmark in 0.4, are the small fragments of -OpenGL code that have begun to land. If you were not aware that Processing.js is getting -3D hardware support in the browser, you are now!
- -The whole development process has taken a few releases to get right, but the community -has gathered great momentum in the last few months and the "right people" have joined the -group, helping Processing.js to run like the well oiled machine it should be. We are seeing -some amazing innovation and creativity from community members, such the experimental -HTML5 audio stream reading and writing in -Firefox from David Humprey and co.
- -
-
-From 0.4 onwards, release code is being linted, beautified and packed before release -using some excellent script-fu from David Humprey and tested by fellow release controller -(and GitHub master) Corban Brook. -This way we will be confident that new releases do not break old functionality, code will -be lightweight, ready for deployment and be easier-on-the-eye for future developers.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.5!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. Many smaller fixes and features have been added. However, -the most exiting addition is the implementation of camera functions and a more complete 3D -foundation that is now able to render and rotate a box.
- -From 0.4 onwards, release code is being linted, beautified and packed before release -using some excellent script-fu from David Humprey and tested by fellow release controller -(and GitHub master) Corban Brook. -This way we will be confident that new releases do not break old functionality, code will -be lightweight, ready for deployment and be easier-on-the-eye for future developers.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.6!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. Many smaller fixes and features have been added. However, -the most exiting addition is the implementation of 3D functions like sphere, line, fill and -stroke. Also, we have set up OpenGrok to enable easy searching of the Java Processing.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.7!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. Many smaller fixes and features have been added. Some -exiting addition to the implementation include PImage with asynchronous image loading, -reference (ref) tests, and lighting.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.7.1!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. After the release of 0.7 we realized that our implementation -of mouse wheel support actually broke the whole script in Chrome/Safari. We ask that anyone -that downloaded the 0.7 release upgrade to 0.7.1 as soon as possible.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.8!
- -The students at Seneca and the community at large, have been working hard to get some -awesome code into the repository. We are proud to announce a full rewrite of p.color which -greatly increases performance. Also included in this release are lightning functions like -spotlight(), ambientLight(), and pointLight(), as well as material properties like -shininess(), and emissive().
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js
- -We are very pleased to announce the release of Processing.js 0.9!
- -The new 0.9 release is now available on the GitHub repository. We are proud to announce -new 3D functionality such as quad, triangle, and vertex. Also included in this release is -multiple file support and an optimized version on PImage.
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js You -can also get involved by helping with the testing or documentation phase.
- -We are very pleased to announce the release of Processing.js 0.9.1!
- -The new 0.9.1 release is now available for download -on the GitHub repository. This release is an architectural refactoring of the library to remove a legacy -performance issue. This rewrite will allow modern JavaScript engines to better optimize the libraries code -at runtime. For example, taking advantage of tracing in Firefox's SpiderMonkey engine. Of course, this -release would not be possible without -Scott.
- -If you would like to get involved with Processing.js development, or have general usage questions about -Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js You can also get -involved by helping with the testing or documentation phase. We are desperately seeking help with -documentation.
- -We are very pleased to announce the release of Processing.js 0.9.4!
- -The new 0.9.4 release is now available for download -on the GitHub repository. This release features a brand new lightweight parser that improves flexibility. -But thats not all. We have added a lot of 3D features and are NOW supporting textures. Check out the newly -added crisp @pjs directive for crisp lines and points. Of course performance is always on the top of our -list, we are proud to say that processing.js is now faster than ever!
- -Get involved!
- -If you would like to get involved with Processing.js development, or have general usage questions about -Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js You can also get -involved by helping with the testing or documentation phase.
- -We are desperately seeking help with documentation.
- -We are very pleased to announce the release of Processing.js 0.9.6!
- -The new 0.9.6 release is now available for -download on the GitHub repository. -This release encompasses an early implementation of loading and displaying SVG (Scalable -Vector Graphics) shapes. It also includes additional 3D features such as hint() and -background transparency. For the optimization enthusiasts, we optimized our code by -removing recursion and removing temporary variables where possible.
- -Get involved!
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js You -can also get involved by helping with the testing or documentation phase. We are -desperately seeking help with documentation.
- -We are very pleased to announce the release of Processing.js 0.9.7!
- -The new 0.9.7 release is now available for -download on the GitHub repository. -Release features include 3D implementation of PImage, updated SVG support, improved -PGraphics, and added functionality such as textDescent. For IE9 users we are proud to -finally offer you a processing-js version that will run in your browser (IE 9 preview 4). -Also, for those of you that like native JavaScript we have added the ability to run -processing-js sketches using straight JavaScript. Look at examples/js for a demonstration.
- -Get involved!
- -If you would like to get involved with Processing.js development, or have general usage -questions about Processing.js, we would love meet you on IRC: -irc://irc.mozilla.org/processing.js You -can also get involved by helping with the testing or documentation phase. We are -desperately seeking help with documentation.
- -This is the one you've been waiting for. The Processing.js team is pleased to announce -the release of Processing.js -version 1.0. Since its original release by John Resig in 2008, over 1,000 bug fixes, -features, and under-the-hood improvements were made. The goal of Processing.js is parity -with Processing, ease of use in the web environment, wide compatibility with modern web -browsers, and great performance. Processing.js is now feature complete with Processing, -with a very few exceptions (see the Reference -page for details).
- -This release represents years of work by a very dedicated developer and user community. -With Processing.js we hope to expand the reach of Processing on the web, and bring a new -generation of developers to this wonderful language. The open web will be a much easier -place to do graphical programming, starting today.
- -We're proud of Processing.js and hope you'll enjoy using it as much as we do! - -Download the code here -and get started learning -how to use Processing.js.
- -Release 1.1 is now available -for download and contains a whole host of new features!
- -Our mission this release was to focus on tightening up on as many bugs as possible but -also to add a large set of new features to the library. Some of the highlights of the new -features for this release are:
- -More than 60 other bugs were fixed this release including 3D fixes and a ton of fixes -to our testing platforms making our bug detection process much more efficient.
- -Our exhibition page has also been updated with some of the newest Processing.js works -on the web. If you have some work, and would like us to showcase it all you have to do is -get in touch with us. You -can do so via IRC, twitter (@annasob, or -@dhhodgin), or the -processingjs google group. -We accept all exhibit requests as long as they are your own work.
- -Download the new release -and experience a faster, more powerful Processing experience today!
- -The Processing.js team is pleased to announce the -release of Processing.js version 1.2. This -is one of our largest releases to date, and focuses on performance, compatibility, 3D, and -bug fixes. More people than ever are using Processing.js, from professional design houses -to video game developers to fashion designers, and as the demand and uses continue to -grow, we are excited to be able to bring you an even better Processing.js.
- -Since our last release, exciting things have been happening in browser development. -WebGL, the 3D extension of the HTML5 canvas element, has now shipped in Firefox and Chrome, -and is being tested in nightly builds of Safari and Opera. Processing.js has been fully -WebGL compatible for more than a year, and version 1.2 includes some great 3D performance -and bug fixes. We've also -written a guide to -help explain how Processing.js uses canvas and WebGL to support the various Processing -render modes. Processing.js is a great way to get started with 2D and 3D graphics on the -web, without having to understand all of the underlying technologies. With several guides for -people new to Processing, -JavaScript developers -and Processing developers, -there has never been a better time to jump in!
- -This release also includes some important changes to ensure better compatibility with -Processing 1.5. First, we've altered our default frame rate to match Processing's (i.e., -60 fps). Developers who are upgrading from previous versions of Processing.js, and who -don't explicitly set a frame rate, may notice that sketches seem to run more slowly. Don't -worry, Processing.js is faster than ever! Your sketch is just drawing at 60fps. It's -possible to make things as fast as the browsers will allow by setting a higher frame rate, -but this will of course consume more CPU, and actually -not -provide any real gain other than bigger deltas between visible frames.
- -We had many requests from our users to follow Processing's lead and add support for Java -Generics, and we're happy to report that as of Processing 1.2 this is fully supported! -We've also improved our compatibility in key classes and functions like ArrayList and -XMLElement, and arc() and beginShape(), etc. If you find that your Processing code isn't -compatible with Processing.js, please make sure you tell us.
- -While we've been developing 1.2, we've seen some great examples of Processing.js in the -wild. Here are some of our favorites:
- -One of the things we love most is seeing all the creative and unexpected ways that -people use Processing.js. If you have a cool example, let us know about it, and we might -showcase it on the site and in our blog posts.
- -Finally, we want to take this release as an opportunity to acknowledge one of our team -members who will be leaving us. Anna Sobiepanek -has been a full-time developer and researcher at -Seneca's Centre for -Development of Open Technology (CDOT) for more than a year. She's helped develop and -lead the Processing.js project, and been our main git master -(Anna's github graph is often -used as an example of a complex git project). Anna's been a passionate contributor and -great leader in the Processing.js project, and we'll miss her daily work with us. Lots of -people bemoan the lack of women in open source, and we've been blessed to have such a great -developer and amazing woman working on our team. We wish her well in her new job, and look -forward to her continued contributions as a volunteer.
- -We hope you enjoy using Processing.js 1.2. We enjoyed making it for you, and are already -working on 1.3!
- -Hot on the heels of 1.2.0 we're releasing a maintenance -release 1.2.1 to address a regression identified by Florian Jenett, relating to the -use of background() with 3 arguments. An associated issue broke the @pjs "transparent" -directive, and we fixed both issues in this maintenance release. We also took the -opportunity to update the gzipped version of processing.js in the release archive, which -was accidentally posted as a 0-byte file. This release is brought to you thanks to -Florian's quick post on our bug tracker, so: if you find issues with Processing.js, don't -hesitate to file a bug with us at -https://processing-js.lighthouseapp.com -- we hate them just as much as you do.
- -The Processing.js team is pleased to announce the release of -Processing.js 1.2.3. This is a maintenance release, which focused primarily on tests, -non-core Processing code, and other things we never have time to do--spring cleaning, if you will.
- -While we mainly worked around the edges of the core Processing code, there are still -some notable changes and updates for our users. Specifically:
- -<script type="text/processing" data-processing-target="targetcanvas"> - /* processing code here */ -</script> -... -<canvas id="targetcanvas"></canvas>-While the preferred way to load sketches is using the "data-processing-sources" attribute -on the canvas element instead of doing inline sketches, sometimes using inline code is -desirable, and that's now easier to use. The "example.html" file further demonstrates -several ways of getting your Processing sketches shown on a page.
Our next release will be focused on core Processing fixes again, as well as achieving -parity with the upcoming -Processing -2.0 release of our sister project. If you are using Processing.js and notice -compatibility, performance, or other issues, please let us know via -IRC (irc.mozilla.org #processing.js) or -by filing a bug on our -bug -tracker. - -
In the mean time, grab a copy of -Processing.js 1.2.3 and go make something awesome! Here are some cool sketches to get -you thinking:
- -Members of the Processing.js development team will be presenting a talk at -SIGGRAPH 2011. We will be talking about the -development of Processing.js and showing off some really cool demos using Processing.js -and other web features. If you are at SIGGRAPH, be sure to come check us out.
- - -Session Name: Changing Dimensions -
Talk Name: Processing.js: Sketching with <canvas> -
Date: Monday, August 8 -
Time: 3:45pm to 5pm -
Room: West Building, rooms 109/110 - -
We will be in Vancouver for the whole conference. If you'd like to meet up with us, you -can contact us on Twitter:
- -Our Biggest Release Ever: Announcing Processing.js 1.3.0
- -The Processing.js team is pleased to announce the release of Processing.js 1.3.0. This -is our biggest release to date, and represents an enourmous amount of work from the team. -This release focuses on a number of key issues: significant performance improvements, -greatly improved text handling and font metrics, and general bug fixes and compatibility -with Processing, including getting ready for Processing 2.0!
- -1.3.0 is fast. We've put a ton of effort into making Processing.js run your sketches -faster. Our performance test suite shows some incredible speed-ups using 1.3.0 over -previous releases. All browsers on all platforms run faster. How much faster? Our tests -show a 6% - 60% gain across the board:
- -We're really proud of the gains we've made in this release, and we're not done yet. -There are further performance gains to be had in 1.4 and beyond. Couple this with the -tremendous improvements in JavaScript engines and browser graphics performance, and the -future is looking better and better for doing Processing.js development. If you find -something runs slowly in Processing.js, we want to know. Make sure you file a bug or talk -to us on IRC. Chances are we can make it faster.
- -1.3.0 is amazing at working with text and fonts. The release includes a total rewrite -of our font and text handling code. We know that typography is important to many Processing -and Processing.js users—it is to us as well. In order to get the amazing cross-platform, -cross-browser compatibility we did in this release, we had to go to -some extreme lengths -. It wasn't easy, but the results are beautiful, and should make working with text in -processing.js an enjoyable and beautiful experience.
- -1.3.0 is more compatible with Processing than ever before. As Processing moves toward -its 2.0 release, and with it new features and API changes, we're implementing the same -things in Processing.js. The 1.3.0 release includes many compatibility fixes, which address -differences between sketches written in Processing and Processing.js. "If it works in -Processing, it should work in Processing.js." As Shaun McWhinnie (@himseelf) -wrote on Twitter:
- -Sat down to *learn* processing.js last night, then found out it can parse my -existing pde sketches #jobdone- -
Compatibility continues to be our goal, and with 1.3.0, it's more true than ever before. -Have you found a Processing sketch that doesn't work in Processing.js? Let us know!
- -This release also introduces an important change for functions like line(), point(), -rect(). In the past we used anit-alised points/lines, due to limitations in HTML5 canvas. -In the past we told our users to add the crisp pjs directive to their sketches, as a hint -to Processing.js that you wanted points/lines without anti-aliasing. This was confusing to -most people, and cumbersome to use. Our team has figured out a way to overcome this -limitation, and we are now able to draw crisp points/lines by default, which matches the -expected behaviour of the same sketches run in Processing.
- -We hope you enjoy working with Processing.js 1.3.0, and let us know. Processing.js is -a labour of love, and we appreciate your encouragement and hearing how you're using it in -your data visualizations, art, teaching, game development, etc. The number of people using -Processing.js around the world is humbling to us.
- -While you're downloading Processing.js 1.3.0, here are some uses of Processing.js we -found while we were creating this release:
- -After finishing our v1.3.0 release, we were able to gather all of our current -Processing.js developers in one place for the day. Meet the team:
- - -
-
-
-From left to right, we have:
-The Processing.js team is pleased to announce the release of Processing.js 1.3.5. This -is a maintenance release, containing many compatibility fixes for the soon to be released -Processing v 2.0, as well as fixes for issues reported by our users in 1.3.0. We've also -included a number of updates for 3D, not the least of which is that 3D now renders crisp, -and addressed several performance issues. As always, we encourage you to - -file bugs when you spot something we missed, and thank those of you who filed bugs that -we fixed in this release. Our community continues to grow, and the feedback, demos, and test -cases are always welcome.
- -You can download the full Processing.js 1.3.5 library -(production (recommended), -debug version), get the - -API-only version (no Processing parser, for JavaScript developers), or grab a -zip file -containing everything, including many working examples.
- -While you're downloading Processing.js 1.3.5, here are some demos we really liked:
- -The Processing.js team is pleased to announce the release of Processing.js 1.3.6. This -is a maintenance release for 1.3.5, which had a bug where any non-square 3D sketch would -be stretched. We highly recommend that you upgrade to this version, especially if you're -using 3D mode. A big thanks to Casey Reas on the Processing team for reporting this bug. -And congratulations on the -newest addition to the family!
- -If you run into any problems with Processing.js, please file a - -bug or talk to us on IRC -(irc://irc.mozilla.org/processing.js).
- -It's conference season, and the Processing.js team has been invited to speak at various -events around the world in the next month. If you're interested in learning Processing.js, -or want to connect with others who use it, these events are great places to meet the -Processing/Processing.js communities. Two of Processing.js' lead developers, David Humphrey -and Jon Buckley, will be running these sessions and giving talks.
- -On Thursday October 27, 2011 from 9:00am -- 12:00pm we'll be at the Free Software and -Open Source Symposium (FSOSS) at Seneca College in Toronto (the home of Processing.js!). -This workshop will give an introduction to Processing and Processing.js, and show how to -integrate web technologies (e.g., JavaScript libraries) and data services (e.g., Twitter) -with Processing.js sketches.
- -From November 4-6 we'll be in London, UK for the -Mozilla Media Festival. We'll be giving a workshop -on Processing.js, and showing how to use HTML5 media technologies, JavaScript libraries, and -mobile device APIs. Workshop time TBD.
- -From November 11-13 we'll be in Chicago for the -Mobile Processing conference. We'll -be giving a -workshop on using Processing.js with the web and mobile web, how to make Processing -sketches work on Andorid, iOS, and other mobile platforms, and generally how to leverage -web technologies and data sources in Processing.js. We will also give a - -talk on Processing.js generally, and how it can be used with the (mobile) web.
- -We also see that there is a series of -Processing.js -workshops going on at GAFFTA on Tuesdays & Thursdays, October 25th & -27th, November 1st & 3rd. If you're in San Francisco, be sure to check these out.
- -Looking forward to meeting you at one of these events.
diff --git a/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html b/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html deleted file mode 100644 index 18a063f..0000000 --- a/blog/_posts/2012-07-31-processing-js-v1-4-0-released.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -layout: post -title: Processing.js v1.4.0 released ---- -Processing.js 1.4.0! Yes, it's finally here, and it's a doozy. Many of the dev team have -been working on other projects over the last year, with some people wondering whether Processing.js -was a dead project, so just to reassure you: it is very much alive. However, we've had to make some -changes to the way we do releases now that we no longer have any developers dedicating all their time -to the project. So, let's start with the biggest change: a release! You can find the full list of -things that were added or fixed in the changelog below, but to give you a taste of -what's changed: SVG drawing to buffers now works, method overloading has been made far more robust, -XML with CDATA no longer breaks and the Processing 2.0 XML API is supported, IE9 no longer crashes -without the debug tools turned one, and we even managed to slip variable argument syntax (Type... -varname) into the parser. There's even a new extension to play with.
- -
The second change is also relatively big: we're changing from spaced out, big releases to -relatively frequent, but small releases. This benefits everyone: you get more frequent updates -to Processing.js, and issues that you report (or contribute code for!) make it into the public -version much faster, and the people who work on Processing.js (a number of formerly full-time -devs are still involved with the project on a part time basis) can simply focus on getting two -or three important tickets out of the way each release, rather than spending time trying to work -through twenty or thirty. This makes things much more managable.
- -The tl;dr version; Processing 1.4.0 is out! Go download -it! And to keep you coming back for more, expect 1.4.1 at the end of August!
- -As always: if you run into any problems with Processing.js, please file a - -bug or talk to us on IRC -(irc://irc.mozilla.org/processing.js).
- -Hot on the heels of 1.4.0 comes 1.4.1, which is an emergency -hotfix release to fix a regression issue introduced by the patch for -ticket #1775, -which aimed to solve the problem of getting an I-bar cursor when -doing click-drags on a sketch. Long story short, the code intercepted -click events but forgot to set focus on the sketch. Without focus, -key events don't make it into the sketch so we had the unfortunate -situation where your sketch wouldn't respond to the keyboard.
- -This was fixed as issue #1883 -and should no longer cause any problems. As a bonus, we also threw in -#1886 -which adds String.matches, which has been missing all this time.
\ No newline at end of file diff --git a/blog/_posts/2014-03-25-processing-js-v1-4-7.html b/blog/_posts/2014-03-25-processing-js-v1-4-7.html deleted file mode 100644 index 9341d4e..0000000 --- a/blog/_posts/2014-03-25-processing-js-v1-4-7.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -layout: post -title: Processing.js v1.4.7 released ---- -Since our last release, 1.4.1, Processing.js has been given a bit of a source code -overhaul, culminating in a new release: 1.4.7! This release adds in new functionality -that you might already know from Processing 2.0, but was missing in Processing.js such -as new methods in PVector and XML. The release model has also been changed: we're going -to be releasing a new version every time a merge in a patch that either fixes something, -or adds a feature that is still missing. This makes things way easier for us to manage, -and ensures that you don't have to wait months while updates slowly gather dust waiting -for a major release. You can download the new version of Processing.js over on the -download section, and let us know what's still missing!
- -As we're reshuffling the source code, some things are currently not available: the -API-only version of Processing.js was so insignificantly smaller than the regular version -that it will no longer be generated. The difference was about 10kb on 200kb, and the -added complexity of compiling an API-only version was simply not something that could be -taken on. If you want to help bring that back, we'd love to talk to you! We're also -not packaging the examples anymore, as a lot of them are actually incredibly out of date -and do not reflect proper Processing.js or even Processing approaches. Again, if you -want to help create a set of useful example again with us, get in touch!
\ No newline at end of file diff --git a/blog/_posts/2014-03-25-processing-js-v1-4-8.html b/blog/_posts/2014-03-25-processing-js-v1-4-8.html deleted file mode 100644 index c6b33c1..0000000 --- a/blog/_posts/2014-03-25-processing-js-v1-4-8.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: post -title: Processing.js v1.4.8 released ---- -It's been a few weeks and PRocessing.js got a few PRs merge in, so it's time for a new -release: say hello to 1.4.8! This version has some fixes to PVector's rotate, support for -randomGaussian(), and several unit tests to make sure those fixes pass muster. You -can download the new version of Processing.js over on the download -section, and let us know what's still missing!
diff --git a/blog/_posts/2014-04-17-processing-js-v1-4-8.html b/blog/_posts/2014-04-17-processing-js-v1-4-8.html deleted file mode 100644 index c6b33c1..0000000 --- a/blog/_posts/2014-04-17-processing-js-v1-4-8.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -layout: post -title: Processing.js v1.4.8 released ---- -It's been a few weeks and PRocessing.js got a few PRs merge in, so it's time for a new -release: say hello to 1.4.8! This version has some fixes to PVector's rotate, support for -randomGaussian(), and several unit tests to make sure those fixes pass muster. You -can download the new version of Processing.js over on the download -section, and let us know what's still missing!
diff --git a/blog/_posts/template.html b/blog/_posts/template.html deleted file mode 100644 index fc7a841..0000000 --- a/blog/_posts/template.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -layout: post -title: Template blog title ---- -This is a blog template
- -Go nuts with whatever HTML you like, but try to stick to your basic p's, h3's, and ul's.
- -Be sure to name this new blog post properly, "yyyy-mm-dd-title-with-dashes.ext", where -.ext can be html, md, or textile.
diff --git a/blog/index.html b/blog/index.html deleted file mode 100644 index 663d46e..0000000 --- a/blog/index.html +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: default ---- -{% assign first_post = site.categories.blog.first %} -
-
- IRC Channel
- The Processing.js IRC channel has moved to irc.mozilla.org where the PJS - developers are hanging out. Need information, have feature suggestions, bugs? Join - irc://irc.mozilla.org/processing.js - and we will help you get the most out of Processing.js.
- -
-
- GitHub Repository
- The current fork of the Processing.js repo at GitHub. Developers wishing to contribute - to Processing.js should sign-up at GitHub and pull the code to their local machines. - Then any changes you make can be easily integrated into the master version.
-The development team have also chosen to go with Github as the bug tracking system - for Processing.js. If you think you may have stumbled accross a bug, or you are - interested in joining in the development, visit - Processing.js on Github.
- -
-
- Google Group
- A very helpful group of Processing.js enthusiasts who frequently share code, - techniques and collaborate on new ideas. A great place for beginners to get started.
- -
-
- Open Source @ Seneca
- After its initial release in 2008 by John Resig, the - Processing.js project was picked-up by students in the - Centre for Development of - Open Technology at Seneca College. The - student team - finished the port of Processing.js, fixing more than 900 bugs, shipping 12 releases, - and creating a vibrant developer community around Processing.js in the process. This - project was done through a partnership between the - Mozilla Foundation and - Seneca College, and was led by - David Humphrey, Al - MacDonald, and Corban Brook. The students - continue to maintain the project today.
- -Alternatively, install through Bower by using bower install Processing.js
Alternatively, install through Bower by using bower install Processing.js
Alternatively, install through NPM by using npom install processing-js
Download older releases of Processing.js
- -{% for old in site.categories.download offset:1 %} - -Released {{ old.date | date_to_long_string }}
-{{ old.content }} - -{% endfor %} diff --git a/download/index.html b/download/index.html deleted file mode 100644 index c68c4fe..0000000 --- a/download/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -layout: default ---- -{% assign current = site.categories.download.first %} -Download the latest Processing.js from NPM.
- -Alternatively, download it directly from the Github code repository.
- -Released {{ current.date | date_to_long_string }} - -{{ current.content }} - -You can download older releases from our Download Archive -or our GitHub repository
diff --git a/exhibition/_posts/2011-11-01-ui-dial.html b/exhibition/_posts/2011-11-01-ui-dial.html deleted file mode 100644 index 11f334a..0000000 --- a/exhibition/_posts/2011-11-01-ui-dial.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- This dial interface has magnetic snap points, and integrates with jQuery AJAX functions to load new content when turned
- diff --git a/exhibition/_posts/2011-11-02-sparklines.html b/exhibition/_posts/2011-11-02-sparklines.html deleted file mode 100644 index d7d67bb..0000000 --- a/exhibition/_posts/2011-11-02-sparklines.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- An innovative script to visualize trends in data. Using a pop-up Canvas that can be fully customized for your site
- diff --git a/exhibition/_posts/2011-11-03-tower-of-defense.html b/exhibition/_posts/2011-11-03-tower-of-defense.html deleted file mode 100644 index 328b855..0000000 --- a/exhibition/_posts/2011-11-03-tower-of-defense.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Will Larson has gone about revising the classic Tower Defense genre, porting it to the open web using Processing.js
- diff --git a/exhibition/_posts/2011-11-04-mouse.html b/exhibition/_posts/2011-11-04-mouse.html deleted file mode 100644 index 05cc336..0000000 --- a/exhibition/_posts/2011-11-04-mouse.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- This mouse-driven visualization samples your the movement speed of your mouse and renders the data in the form of a graphic equalizer
- diff --git a/exhibition/_posts/2011-11-05-wiki.html b/exhibition/_posts/2011-11-05-wiki.html deleted file mode 100644 index b178150..0000000 --- a/exhibition/_posts/2011-11-05-wiki.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A small collection of animated visualizations which analyze wiki data using Processing.js
- diff --git a/exhibition/_posts/2011-11-06-balldroppings.html b/exhibition/_posts/2011-11-06-balldroppings.html deleted file mode 100644 index c5d1141..0000000 --- a/exhibition/_posts/2011-11-06-balldroppings.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Turn your sound up. Draw lines on the black screen to bounce the balls. Enjoy the music
- diff --git a/exhibition/_posts/2011-11-07-twitch.html b/exhibition/_posts/2011-11-07-twitch.html deleted file mode 100644 index f75292d..0000000 --- a/exhibition/_posts/2011-11-07-twitch.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- TWITCH is a series of minimal games using the mouse. How fast can you solve them all?
- diff --git a/exhibition/_posts/2011-11-08-bittorrent.html b/exhibition/_posts/2011-11-08-bittorrent.html deleted file mode 100644 index c713378..0000000 --- a/exhibition/_posts/2011-11-08-bittorrent.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Chris Lee
-A simplified BitTorrent visualization originally written by Abram Stern, updated by Jeff Atwood
- diff --git a/exhibition/_posts/2011-11-09-askken.html b/exhibition/_posts/2011-11-09-askken.html deleted file mode 100644 index a63912d..0000000 --- a/exhibition/_posts/2011-11-09-askken.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Michael Aufreiter at Quasipartikel Labs
-Visualization-based search engine
- diff --git a/exhibition/_posts/2011-11-10-abstract.html b/exhibition/_posts/2011-11-10-abstract.html deleted file mode 100644 index 05dd8ba..0000000 --- a/exhibition/_posts/2011-11-10-abstract.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Abstract01js is a reworking of an old 2D Processing sketch from 2003
- diff --git a/exhibition/_posts/2011-11-11-facebook.html b/exhibition/_posts/2011-11-11-facebook.html deleted file mode 100644 index 8188a3e..0000000 --- a/exhibition/_posts/2011-11-11-facebook.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Visualization based on the evolution of privacy on Facebook
- diff --git a/exhibition/_posts/2011-11-12-inbox.html b/exhibition/_posts/2011-11-12-inbox.html deleted file mode 100644 index 3f9b58d..0000000 --- a/exhibition/_posts/2011-11-12-inbox.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- This is a keyboard-driven game written by the GMail team
- diff --git a/exhibition/_posts/2011-11-13-wordpress.html b/exhibition/_posts/2011-11-13-wordpress.html deleted file mode 100644 index 19b7c9f..0000000 --- a/exhibition/_posts/2011-11-13-wordpress.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Include Processing.js sketches into your WordPress blog posts
- diff --git a/exhibition/_posts/2011-11-14-drupal.html b/exhibition/_posts/2011-11-14-drupal.html deleted file mode 100644 index a368919..0000000 --- a/exhibition/_posts/2011-11-14-drupal.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Include Processing.js sketches in your Drupal modules
- diff --git a/exhibition/_posts/2011-11-15-asteroids.html b/exhibition/_posts/2011-11-15-asteroids.html deleted file mode 100644 index c2a3c17..0000000 --- a/exhibition/_posts/2011-11-15-asteroids.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- This modern day re-work of Asteroids uses Processing.js to bring this portfolio to life
- diff --git a/exhibition/_posts/2011-11-16-jsnake.html b/exhibition/_posts/2011-11-16-jsnake.html deleted file mode 100644 index 91272a3..0000000 --- a/exhibition/_posts/2011-11-16-jsnake.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Anton Pirogov
-A snake game implemented with Processing.js and jQuery, inspired by DeluxeSnake
- diff --git a/exhibition/_posts/2011-11-17-gif-tower-defense.html b/exhibition/_posts/2011-11-17-gif-tower-defense.html deleted file mode 100644 index e76d77f..0000000 --- a/exhibition/_posts/2011-11-17-gif-tower-defense.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- It is a tower defense game implemented in Processing.js
- diff --git a/exhibition/_posts/2011-11-18-letters.html b/exhibition/_posts/2011-11-18-letters.html deleted file mode 100644 index 5ecc77d..0000000 --- a/exhibition/_posts/2011-11-18-letters.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
-
- Showing and displaying in realtime the number of times each pair of letters appears - in a given text.
- \ No newline at end of file diff --git a/exhibition/_posts/2011-11-19-fizz-bloom.html b/exhibition/_posts/2011-11-19-fizz-bloom.html deleted file mode 100644 index 9f38089..0000000 --- a/exhibition/_posts/2011-11-19-fizz-bloom.html +++ /dev/null @@ -1,9 +0,0 @@ - - -
-
- by
Bloom
Fizz visualizes updates from your Facebook or Twitter account.
- diff --git a/exhibition/_posts/2011-11-20-virion.html b/exhibition/_posts/2011-11-20-virion.html deleted file mode 100644 index 6982596..0000000 --- a/exhibition/_posts/2011-11-20-virion.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
-
- by
Jonah Kagan, Varun Singh, Jonathan Koh, Charis Loke
A game written in Processing.js. Winner of Zynga's Hidden Agenda Facebook Game - Competition
- diff --git a/exhibition/_posts/2011-11-21-kanji.html b/exhibition/_posts/2011-11-21-kanji.html deleted file mode 100644 index 8ac37f2..0000000 --- a/exhibition/_posts/2011-11-21-kanji.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A web app for specifying kanji compositions
- diff --git a/exhibition/_posts/2011-11-22-clearcongress.html b/exhibition/_posts/2011-11-22-clearcongress.html deleted file mode 100644 index a7dda4c..0000000 --- a/exhibition/_posts/2011-11-22-clearcongress.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A real-time information visualization of the US Congress
- diff --git a/exhibition/_posts/2011-11-23-bezierinfo.html b/exhibition/_posts/2011-11-23-bezierinfo.html deleted file mode 100644 index 16f3cb7..0000000 --- a/exhibition/_posts/2011-11-23-bezierinfo.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A comprehensive guide to the math behind bezier curves
- diff --git a/exhibition/_posts/2011-11-24-tunealiser.html b/exhibition/_posts/2011-11-24-tunealiser.html deleted file mode 100644 index 2842261..0000000 --- a/exhibition/_posts/2011-11-24-tunealiser.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Tunealiser is a tool for making structural analysis notes along a multitrack timeline.
- diff --git a/exhibition/_posts/2011-11-25-toxiclibs.html b/exhibition/_posts/2011-11-25-toxiclibs.html deleted file mode 100644 index b6b5af0..0000000 --- a/exhibition/_posts/2011-11-25-toxiclibs.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Toxiclibs.js is an open-source computational design library
- diff --git a/exhibition/_posts/2011-11-26-p5p.html b/exhibition/_posts/2011-11-26-p5p.html deleted file mode 100644 index d3e9def..0000000 --- a/exhibition/_posts/2011-11-26-p5p.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- P5P is a collection of generative sketches that you control.
- diff --git a/exhibition/_posts/2011-11-27-animated-background.html b/exhibition/_posts/2011-11-27-animated-background.html deleted file mode 100644 index d07aefc..0000000 --- a/exhibition/_posts/2011-11-27-animated-background.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- An animated background written in Processing.js
- diff --git a/exhibition/_posts/2011-11-28-afl-flags.html b/exhibition/_posts/2011-11-28-afl-flags.html deleted file mode 100644 index 23087bb..0000000 --- a/exhibition/_posts/2011-11-28-afl-flags.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- AFL Flags is an interactive visualisation showing the winners and losers from of the AFL and VFL premierships from 1897 until 2010.
- diff --git a/exhibition/_posts/2011-11-29-twitter-flow.html b/exhibition/_posts/2011-11-29-twitter-flow.html deleted file mode 100644 index 299c81c..0000000 --- a/exhibition/_posts/2011-11-29-twitter-flow.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Twitter Flow is an interactive visualization that shows tweets and sorts them into what language they're written in
- diff --git a/exhibition/_posts/2011-11-30-coaltrace.html b/exhibition/_posts/2011-11-30-coaltrace.html deleted file mode 100644 index 927744e..0000000 --- a/exhibition/_posts/2011-11-30-coaltrace.html +++ /dev/null @@ -1,9 +0,0 @@ - - -
-
- Evolutionary simulation. Individuals reproduce and die leaving behind a trace of their ancestry.
- \ No newline at end of file diff --git a/exhibition/_posts/2011-12-01-flocking.html b/exhibition/_posts/2011-12-01-flocking.html deleted file mode 100644 index 31abc85..0000000 --- a/exhibition/_posts/2011-12-01-flocking.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- The math behind flocking algorithms
- diff --git a/exhibition/_posts/2011-12-02-pewpew.html b/exhibition/_posts/2011-12-02-pewpew.html deleted file mode 100644 index 44d2b60..0000000 --- a/exhibition/_posts/2011-12-02-pewpew.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Nightmare
-Retro Asteroids clone written in Processing.js
- diff --git a/exhibition/_posts/2011-12-03-fotn.html b/exhibition/_posts/2011-12-03-fotn.html deleted file mode 100644 index a839d39..0000000 --- a/exhibition/_posts/2011-12-03-fotn.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- The Mozilla #audio team
-Fight of the Navigator is a demo showcasing the power of WebGL and Audio API
- diff --git a/exhibition/_posts/2011-12-04-coffeescript.html b/exhibition/_posts/2011-12-04-coffeescript.html deleted file mode 100644 index 80e3bc6..0000000 --- a/exhibition/_posts/2011-12-04-coffeescript.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A tutorial showing how to write Processing.js sketches in CoffeeScript, a language that is compiled into Javascript
- diff --git a/exhibition/_posts/2011-12-15-andor.html b/exhibition/_posts/2011-12-15-andor.html deleted file mode 100644 index 735fbd4..0000000 --- a/exhibition/_posts/2011-12-15-andor.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- A collection of 3D sketches by Processing.js' 3D developer
- diff --git a/exhibition/_posts/2011-12-24-advent-2011.html b/exhibition/_posts/2011-12-24-advent-2011.html deleted file mode 100644 index 276b682..0000000 --- a/exhibition/_posts/2011-12-24-advent-2011.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- An advent calendar built with Processing.js
- diff --git a/exhibition/_posts/2011-12-25-circle-of-fifths.html b/exhibition/_posts/2011-12-25-circle-of-fifths.html deleted file mode 100644 index c6a4eb9..0000000 --- a/exhibition/_posts/2011-12-25-circle-of-fifths.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Shelley Marshall
-Create, transpose, and change a chord progression by using the circle of fifths, and play the progression.
- diff --git a/exhibition/_posts/2012-07-13-mylifeaquatic.html b/exhibition/_posts/2012-07-13-mylifeaquatic.html deleted file mode 100644 index bc8ee66..0000000 --- a/exhibition/_posts/2012-07-13-mylifeaquatic.html +++ /dev/null @@ -1,10 +0,0 @@ - - -
-
- A shared aquarium
- Source code
-
- An interactive implementation of incremental Delaunay Triangulation algorithm.
- diff --git a/exhibition/_posts/template.html b/exhibition/_posts/template.html deleted file mode 100644 index 5a2e621..0000000 --- a/exhibition/_posts/template.html +++ /dev/null @@ -1,8 +0,0 @@ - - -
-
- Description
- diff --git a/exhibition/index.html b/exhibition/index.html deleted file mode 100644 index 08f51a1..0000000 --- a/exhibition/index.html +++ /dev/null @@ -1,10 +0,0 @@ ---- -layout: default ---- -
- Virion
- by Jonah Kagan, Varun Singh, Jonathan Koh, Charis Loke
- - -
- Fizz
- by Bloom
- - -
- Letter-pairs Analysis
- by Martin Ignacio Bereciartua
- -Updates have been trickling in over the last few releases, and while the original dev team for Processing.js -moved on, there are a number of enthusiastic users who have been finding problems with the library and have been -willing to help fix them. As such, the current version has quite a few improvements compared to the version of -Processing.js you might find bundled with some processing bundles, but: if there are things it doesn't do that -you rely on, do head over to the Processing.js issue -tracker and let people know.
- -We're also happy to get help in the form of pull requests to add functionality to Pjs, -or to simply fix small errors that were found. You don't have to be a code wizard to contribute: -if you simply know of a function or a constant that's missing, feel free to fork the code, -patch what you think needs patching, and file a Pull Request so that we can merge your -improvement in! Don't know where to start? Drop into our IRC channel, #processingjs on -irc.mozilla.org, and we'll be happy to help you get the most out improving Processing.js!
- -Processing.js is a project based on the popular Processing -visual programming language, designed to bring Processing sketches to the web without a need for -special browser plugins. Processing.js makes your data visualizations, digital art, interactive -animations, educational graphs, video games, etc. work using web standards and without any plug-ins. -You write code using the Processing language, include it in your web page, and Processing.js does -the rest. It's not magic, but it's close.
- -Originally developed by Ben Fry and -Casey Reas, Processing started as an open source programming language based on Java to help -the electronic arts and visual design communities learn the basics of computer programming in a -visual context. Processing.js takes this to the next level, allowing Processing code to be run -by any HTML5 compatible browser, including current versions of Firefox, Safari, Chrome, Opera, and -Internet Explorer. Processing.js brings the best of visual programming to the web, both for -Processing and web developers.
- -Everything you need to work with Processing.js is here. You can download -the most recent version of Processing.js, read Quick Start Guides for -Processing Developers or -JavaScript Developers, -learn about the Processing language and Processing.js -render modes, consult the -Reference, and of course view many existing demos -that use Processing.js. You can also get involved with the Processing -and Processing.js communities, both of which are active and and looking for new users and developers.
- -Whether you're an advanced Processing developer or completely new, whether you're a pro with -web technologies or just getting started, Processing.js bridges the -gap between these two powerful technologies.
- -My Life Aquatic (2012)
-by David Leibovic and Sunah Suh
-Koi designed by nardove
'+n.intro_text+"
";var o=''+n.outro_text+"
";var t=a(''+n.loading_text+"
");if(n.username&&typeof(n.username)=="string"){n.username=[n.username]}a(s).bind("tweet:load",function(){if(n.loading_text){a(s).empty().append(t)}a.getJSON(d(),function(u){a(s).empty().append(r);if(n.intro_text){r.before(q)}r.empty();var v=a.map(u.results||u,i);v=a.grep(v,n.filter).sort(n.comparator).slice(0,n.count);r.append(a.map(v,function(w){return"by Daniel Shiffman. - - - -Create a more complex wave by adding two waves together.
- - - -Original Processing.org Example: AdditiveWave
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int xspacing = 8; // How far apart should each horizontal location be spaced
-
-int w; // Width of entire wave
-
-int maxwaves = 4; // total # of waves to add together
-
-
-
-float theta = 0.0f;
-
-float[] amplitude = new float[maxwaves]; // Height of wave
-
-float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
-
-float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- colorMode(RGB,255,255,255,100);
-
- smooth();
-
- w = width+16;
-
-
-
- for (int i = 0; i < maxwaves; i++) {
-
- amplitude[i] = random(10,30);
-
- float period = random(100,300); // How many pixels before the wave repeats
-
- dx[i] = (TWO_PI / period) * xspacing;
-
- }
-
-
-
- yvalues = new float[w/xspacing];
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- calcWave();
-
- renderWave();
-
-}
-
-
-
-void calcWave() {
-
- // Increment theta (try different values for 'angular velocity' here
-
- theta += 0.02;
-
-
-
- // Set all height values to zero
-
- for (int i = 0; i < yvalues.length; i++) {
-
- yvalues[i] = 0.0f;
-
- }
-
-
-
- // Accumulate wave height values
-
- for (int j = 0; j < maxwaves; j++) {
-
- float x = theta;
-
- for (int i = 0; i < yvalues.length; i++) {
-
- // Every other wave is cosine instead of sine
-
- if (j % 2 == 0) yvalues[i] += sin(x)*amplitude[j];
-
- else yvalues[i] += cos(x)*amplitude[j];
-
- x+=dx[j];
-
- }
-
- }
-
-}
-
-
-
-void renderWave() {
-
- // A simple way to draw the wave with an ellipse at each location
-
- noStroke();
-
- fill(255,50);
-
- ellipseMode(CENTER);
-
- for (int x = 0; x < yvalues.length; x++) {
-
- ellipse(x*xspacing,width/2+yvalues[x],16,16);
-
- }
-
-}Loads a "mask" for an image to specify the transparency - -in different parts of the image. The two images are blended - -together using the mask() method of PImage. - - - -Created 29 April 2003.
- - - -Original Processing.org Example: Alphamask
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/test.jpg,data/mask.jpg"; */
-
-
-
-PImage img;
-
-PImage maskImg;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- img = loadImage("data/test.jpg");
-
- maskImg = loadImage("data/mask.jpg");
-
- img.mask(maskImg);
-
-}
-
-
-
-void draw()
-
-{
-
- background((mouseX+mouseY)/1.5);
-
- image(img, 50, 50);
-
- image(img, mouseX-50, mouseY-50);
-
-}Move the mouse to change the direction of the eyes. - -The atan2() function computes the angle from each eye - -to the cursor. - - - -Created 1 September 2002
- - - -Original Processing.org Example: Arctangent
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Eye e1, e2, e3, e4, e5;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- noStroke();
-
- e1 = new Eye( 50, 16, 80);
-
- e2 = new Eye( 64, 85, 40);
-
- e3 = new Eye( 90, 200, 120);
-
- e4 = new Eye(150, 44, 40);
-
- e5 = new Eye(175, 120, 80);
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- e1.update(mouseX, mouseY);
-
- e2.update(mouseX, mouseY);
-
- e3.update(mouseX, mouseY);
-
- e4.update(mouseX, mouseY);
-
- e5.update(mouseX, mouseY);
-
-
-
- e1.display();
-
- e2.display();
-
- e3.display();
-
- e4.display();
-
- e5.display();
-
-}
-
-
-
-class Eye
-
-{
-
- int ex, ey;
-
- int size;
-
- float angle = 0.0;
-
-
-
- Eye(int x, int y, int s) {
-
- ex = x;
-
- ey = y;
-
- size = s;
-
- }
-
-
-
- void update(int mx, int my) {
-
- angle = atan2(my-ey, mx-ex);
-
- }
-
-
-
- void display() {
-
- pushMatrix();
-
- translate(ex, ey);
-
- fill(255);
-
- ellipse(0, 0, size, size);
-
- rotate(angle);
-
- fill(153);
-
- ellipse(size/4, 0, size/2, size/2);
-
- popMatrix();
-
- }
-
-}The angle of each segment is controlled with the mouseX and - -mouseY position. The transformations applied to the first segment - -are also applied to the second segment because they are inside - -the same pushMatrix() and popMatrix() group.
- - - -Original Processing.org Example: Arm
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float x = 50;
-
-float y = 100;
-
-float angle1 = 0.0;
-
-float angle2 = 0.0;
-
-float segLength = 50;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw() {
-
- background(226);
-
-
-
- angle1 = (mouseX/float(width) - 0.5) * -PI;
-
- angle2 = (mouseY/float(height) - 0.5) * PI;
-
-
-
- pushMatrix();
-
- segment(x, y, angle1);
-
- segment(segLength, 0, angle2);
-
- popMatrix();
-
-}
-
-
-
-void segment(float x, float y, float a) {
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
-}An array is a list of data. Each piece of data in an array - -is identified by an index number representing its position in - -the array. Arrays are zero based, which means that the first - -element in the array is [0], the second element is [1], and so on. - -In this example, an array named "coswav" is created and - -filled with the cosine values. This data is displayed three - -separate ways on the screen.
- - - -Original Processing.org Example: Array
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-
-
-float[] coswave = new float[width];
-
-
-
-for(int i=0; i<width; i++) {
-
- float ratio = (float)i/(float)width;
-
- coswave[i] = abs( cos(ratio*PI) );
-
-}
-
-
-
-for(int i=0; i<width; i++) {
-
- stroke(coswave[i]*255);
-
- line(i, 0, i, width/3);
-
-}
-
-
-
-for(int i=0; i<width; i++) {
-
- stroke(coswave[i]*255/4);
-
- line(i, width/3, i, width/3*2);
-
-}
-
-
-
-for(int i=0; i<width; i++) {
-
- stroke(255-coswave[i]*255);
-
- line(i, width/3*2, i, height);
-
-}Demonstrates the syntax for creating a two-dimensional (2D) array. - -Values in a 2D array are accessed through two index values. - -2D arrays are useful for storing images. In this example, each dot - -is colored in relation to its distance from the center of the image.
- - - -Original Processing.org Example: Array2D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float[][] distances;
-
-float maxDistance;
-
-
-
-size(200, 200);
-
-background(0);
-
-maxDistance = dist(width/2, height/2, width, height);
-
-distances = new float[width][height];
-
-for(int i=0; i<height; i++) {
-
- for(int j=0; j<width; j++) {
-
- float d = dist(width/2, height/2, j, i);
-
- distances[j][i] = d/maxDistance * 255;
-
- }
-
-}
-
-
-
-for(int i=0; i<height; i+=2) {
-
- for(int j=0; j<width; j+=2) {
-
- stroke(distances[j][i]);
-
- point(j, i);
-
- }
-
-}Demonstrates the syntax for creating an array of custom objects.
- - - -Original Processing.org Example: ArrayObjects
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int unit = 40;
-
-int num;
-
-Module[] mods;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(176);
-
- noStroke();
-
-
-
- num = width/unit * width/unit;
-
- mods = new Module[num];
-
-
-
- for (int i=0; i<height/unit; i++) {
-
- for(int j=0; j<height/unit; j++) {
-
- int index = i*height/unit + j;
-
- mods[index] = new Module(j*unit, i*unit, unit/2, unit/2, random(0.05, 0.8));
-
- }
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- for(int i=0; i<num; i++) {
-
- mods[i].update();
-
- mods[i].draw();
-
- }
-
-}
-
-
-
-class Module {
-
- float mx, my;
-
- int size = unit;
-
- float x, y = 0;
-
- int xdir = 1;
-
- int ydir = 1;
-
- float speed;
-
-
-
- // Contructor (required)
-
- Module(float imx, float imy, float ix, float iy, float ispeed) {
-
- mx = imy;
-
- my = imx;
-
- x = int(ix);
-
- y = int(iy);
-
- speed = ispeed;
-
- }
-
-
-
- // Custom method for updating the variables
-
- void update() {
-
- x = x + (speed * xdir);
-
- if (x >= size || x <= 0) {
-
- xdir *= -1;
-
- x = x + (1 * xdir);
-
- y = y + (1 * ydir);
-
- }
-
- if (y >= size || y <= 0) {
-
- ydir *= -1;
-
- y = y + (1 * ydir);
-
- }
-
- }
-
-
-
- // Custom method for drawing the object
-
- void draw() {
-
- stroke(second()*4);
-
- point(mx+x-1, my+y-1);
-
- }
-
-}This example presents the fastest way to load a background image - -into Processing. To load an image as the background, it must be - -the same width and height as the program.
- - - -Original Processing.org Example: BackgroundImage
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/milan_rubbish.jpg"; */
-
-
-
-PImage bg;
-
-int a;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- frameRate(30);
-
- // The background image must be the same size as the parameters
-
- // into the size() method. In this program, the size of "milan_rubbish.jpg"
-
- // is 200 x 200 pixels.
-
- bg = loadImage("data/milan_rubbish.jpg");
-
-}
-
-
-
-void draw()
-
-{
-
- background(bg);
-
-
-
- a = (a + 1)%(width+32);
-
- stroke(226, 204, 0);
-
- line(0, a, width, a-26);
-
- line(0, a-6, width, a-32);
-
-}The first two parameters for the bezier() function specify the - -first point in the curve and the last two parameters specify - -the last point. The middle parameters set the control points - -that define the shape of the curve.
- - - -Original Processing.org Example: Bezier
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(0);
-
-stroke(255);
-
-noFill();
-
-smooth();
-
-
-
-for(int i = 0; i < 100; i += 20) {
-
- bezier(90-(i/2.0), 20+i, 210, 10, 220, 150, 120-(i/8.0), 150+(i/4.0));
-
-}By Ira Greenberg - - - -Generates an ellipse using bezier() and - -trig functions. Approximately every 1/2 - -second a new ellipse is plotted using - -random values for control/anchor points.
- - - -Original Processing.org Example: BezierEllipse
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// arrays to hold ellipse coordinate data
-
-float[] px, py, cx, cy, cx2, cy2;
-
-
-
-// global variable-points in ellipse
-
-int pts = 4;
-
-
-
-color controlPtCol = #222222;
-
-color anchorPtCol = #BBBBBB;
-
-
-
-void setup(){
-
- size(200, 200);
-
- smooth();
-
- setEllipse(pts, 65, 65);
-
- frameRate(0.5);
-
-}
-
-
-
-void draw(){
-
- background(145);
-
- drawEllipse();
-
- setEllipse(int(random(3, 12)), random(-100, 150), random(-100, 150));
-
-}
-
-
-
-// draw ellipse with anchor/control points
-
-void drawEllipse(){
-
- strokeWeight(1.125);
-
- stroke(255);
-
- noFill();
-
- // create ellipse
-
- for (int i=0; i<pts; i++){
-
- if (i==pts-1) {
-
- bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i], px[0], py[0]);
-
- }
-
- else{
-
- bezier(px[i], py[i], cx[i], cy[i], cx2[i], cy2[i], px[i+1], py[i+1]);
-
- }
-
- }
-
- strokeWeight(.75);
-
- stroke(0);
-
- rectMode(CENTER);
-
-
-
- // control handles and tangent lines
-
- for ( int i=0; i< pts; i++){
-
- if (i==pts-1){ // last loop iteration-close path
-
- line(px[0], py[0], cx2[i], cy2[i]);
-
- }
-
- if (i>0){
-
- line(px[i], py[i], cx2[i-1], cy2[i-1]);
-
- }
-
- line(px[i], py[i], cx[i], cy[i]);
-
- }
-
-
-
- for ( int i=0; i< pts; i++){
-
- fill(controlPtCol);
-
- noStroke();
-
- //control handles
-
- ellipse(cx[i], cy[i], 4, 4);
-
- ellipse(cx2[i], cy2[i], 4, 4);
-
-
-
- fill(anchorPtCol);
-
- stroke(0);
-
- //anchor points
-
- rect(px[i], py[i], 5, 5);
-
- }
-
-}
-
-
-
-// fill up arrays with ellipse coordinate data
-
-void setEllipse(int points, float radius, float controlRadius){
-
- pts = points;
-
- px = new float[points];
-
- py = new float[points];
-
- cx = new float[points];
-
- cy = new float[points];
-
- cx2 = new float[points];
-
- cy2 = new float[points];
-
- float angle = 360.0/points;
-
- float controlAngle1 = angle/3.0;
-
- float controlAngle2 = controlAngle1*2.0;
-
- for ( int i=0; i<points; i++){
-
- px[i] = width/2+cos(radians(angle))*radius;
-
- py[i] = height/2+sin(radians(angle))*radius;
-
- cx[i] = width/2+cos(radians(angle+controlAngle1))*
-
- controlRadius/cos(radians(controlAngle1));
-
- cy[i] = height/2+sin(radians(angle+controlAngle1))*
-
- controlRadius/cos(radians(controlAngle1));
-
- cx2[i] = width/2+cos(radians(angle+controlAngle2))*
-
- controlRadius/cos(radians(controlAngle1));
-
- cy2[i] = height/2+sin(radians(angle+controlAngle2))*
-
- controlRadius/cos(radians(controlAngle1));
-
-
-
- //increment angle so trig functions keep chugging along
-
- angle+=360.0/points;
-
- }
-
-}by Rusty Robison. - - - -Brightness is the relative lightness or darkness of a color. - -Move the cursor vertically over each bar to alter its brightness.
- - - -Original Processing.org Example: Brightness
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int barWidth = 5;
-
-int[] brightness;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- colorMode(HSB, 360, height, height);
-
- brightness = new int[width/barWidth];
-
-}
-
-
-
-void draw()
-
-{
-
- int j = 0;
-
- for (int i = 0; i <= (width-barWidth); i += barWidth) {
-
- noStroke();
-
- if ((mouseX > i) && (mouseX < i+barWidth)) {
-
- brightness[j] = mouseY;
-
- }
-
- fill(i, height, brightness[j]);
-
- rect(i, 0, barWidth, height);
-
- j++;
-
- }
-
-}Click on the image to give it focus and then type letters to - -shift the location of the image. - -Characters are typographic symbols such as A, d, and %. - -The character datatype, abbreviated as char, stores letters and - -symbols in the Unicode format, a coding system developed to support - -a variety of world languages. Characters are distinguished from other - -symbols by putting them between single quotes ('P'). - -A string is a sequence of characters. A string is noted by surrounding - -a group of letters with double quotes ("Processing"). - -Chars and strings are most often used with the keyboard methods, - -to display text to the screen, and to load images or files.
- - - -Original Processing.org Example: CharactersStrings
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-PImage frog;
-
-PFont fontA;
-
-int lettersize = 90;
-
-int xoffset;
-
-char letter;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- fontA = loadFont("Arial");
-
- textFont(fontA);
-
- textSize(lettersize);
-
-
-
- // The String datatype must be capitalized because it is a complex datatype.
-
- // A String is actually a class with its own methods, some of which are
-
- // featured below.
-
- String name= "rathausFrog";
-
- String extension = ".jpg";
-
- int nameLength = name.length();
-
- println("The length of " + name + " is " + nameLength + ".");
-
- name = name.concat(extension);
-
- nameLength = name.length();
-
- println("The length of " + name + " is " + nameLength + ".");
-
-
-
- // The parameter for the loadImage() method must be a string
-
- // This line could also be written "frog = loadImage("rathausFrog.jpg");
-
- frog = loadImage(name);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51); // Set background to dark gray
-
-
-
- image(frog, xoffset, 0);
-
-
-
- // Draw an X
-
- line(0, 0, width, height);
-
- line(0, height, width, 0);
-
-
-
- // Get the width of the letter
-
- int letterWidth = int(fontA.width(letter) * lettersize);
-
-
-
- // Draw the letter to the center of the screen
-
- text(letter, width/2-letterWidth/2, height/2);
-
-}
-
-
-
-void keyPressed()
-
-{
-
- // The variable "key" always contains the value of the most recent key pressed.
-
- // If the key is an upper or lowercase letter between 'A' and 'z'
-
- // the image is shifted to the corresponding value of that key
-
- if(key >= 'A' && key <= 'z') {
-
- letter = char(key);
-
- // Scale the values to numbers between 0 and 100
-
- float scale = 100.0/57.0;
-
- int temp = int((key - 'A') * scale);
-
- // Set the offset for the image
-
- xoffset = temp;
-
- println(key);
-
- }
-
-}The current time can be read with the second(), minute(), - -and hour() functions. In this example, sin() and cos() values - -are used to set the position of the hands. - - *
- - - -Original Processing.org Example: Clock
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup() {
-
- size(200, 200);
-
- stroke(255);
-
- smooth();
-
-}
-
-void draw() {
-
- background(0);
-
- fill(80);
-
- noStroke();
-
- // Angles for sin() and cos() start at 3 o'clock;
-
- // subtract HALF_PI to make them start at the top
-
- ellipse(100, 100, 160, 160);
-
- float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
-
- float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
-
- float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
-
- stroke(255);
-
- strokeWeight(1);
-
- line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
-
- strokeWeight(2);
-
- line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
-
- strokeWeight(4);
-
- line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
-
-}by Ira Greenberg. - - - -The primaries are red, yellow, and blue. The - -secondaries are green, purple, and orange. The - -tertiaries are yellow-orange, red-orange, red-purple, - -blue-purple, blue-green, and yellow-green. - - - -Create a shade or tint of the - -subtractive color wheel using - -SHADE or TINT parameters.
- - - -Original Processing.org Example: ColorWheel
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int segs = 12;
-
-int steps = 6;
-
-float rotAdjust = radians(360.0/segs/2.0);
-
-float radius = 95.0;
-
-float segWidth = radius/steps;
-
-float interval = TWO_PI/segs;
-
-int SHADE = 0;
-
-int TINT = 1;
-
-
-
-void setup(){
-
- size(200, 200);
-
- background(127);
-
- smooth();
-
- ellipseMode(CENTER_RADIUS);
-
- noStroke();
-
- // you can substitue TINT for SHADE argument
-
- createWheel(width/2, height/2, SHADE);
-
-}
-
-
-
-void createWheel(int x, int y, int valueShift){
-
- if (valueShift == SHADE){
-
- for (int j=0; j<steps; j++){
-
- color[]cols = {
-
- color(255-(255/steps)*j, 255-(255/steps)*j, 0),
-
- color(255-(255/steps)*j, (255/1.5)-((255/1.5)/steps)*j, 0),
-
- color(255-(255/steps)*j, (255/2)-((255/2)/steps)*j, 0),
-
- color(255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j, 0),
-
- color(255-(255/steps)*j, 0, 0),
-
- color(255-(255/steps)*j, 0, (255/2)-((255/2)/steps)*j),
-
- color(255-(255/steps)*j, 0, 255-(255/steps)*j),
-
- color((255/2)-((255/2)/steps)*j, 0, 255-(255/steps)*j),
-
- color(0, 0, 255-(255/steps)*j),
-
- color(0, 255-(255/steps)*j, (255/2.5)-((255/2.5)/steps)*j),
-
- color(0, 255-(255/steps)*j, 0),
-
- color((255/2)-((255/2)/steps)*j, 255-(255/steps)*j, 0) };
-
- for (int i=0; i< segs; i++){
-
- fill(cols[i]);
-
- arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
-
- }
-
- radius -= segWidth;
-
- }
-
- } else if (valueShift == TINT){
-
- for (int j=0; j<steps; j++){
-
- color[]cols = {
-
- color((255/steps)*j, (255/steps)*j, 0),
-
- color((255/steps)*j, ((255/1.5)/steps)*j, 0),
-
- color((255/steps)*j, ((255/2)/steps)*j, 0),
-
- color((255/steps)*j, ((255/2.5)/steps)*j, 0),
-
- color((255/steps)*j, 0, 0),
-
- color((255/steps)*j, 0, ((255/2)/steps)*j),
-
- color((255/steps)*j, 0, (255/steps)*j),
-
- color(((255/2)/steps)*j, 0, (255/steps)*j),
-
- color(0, 0, (255/steps)*j),
-
- color(0, (255/steps)*j, ((255/2.5)/steps)*j),
-
- color(0, (255/steps)*j, 0),
-
- color(((255/2)/steps)*j, (255/steps)*j, 0) };
-
- for (int i=0; i< segs; i++){
-
- fill(cols[i]);
-
- arc(x, y, radius, radius, interval*i+rotAdjust, interval*(i+1)+rotAdjust);
-
- }
-
- radius -= segWidth;
-
- }
-
- }
-
-}An object can include several other objects. Creating such composite objects - -is a good way to use the principles of modularity and build higher levels of - -abstraction within a program.
- - - -Original Processing.org Example: CompositeObjects
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-EggRing er1, er2;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- er1 = new EggRing(66, 132, 0.1, 66);
-
- er2 = new EggRing(132, 180, 0.05, 132);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- er1.transmit();
-
- er2.transmit();
-
-}
-
-
-
-class EggRing
-
-{
-
- Egg ovoid;
-
- Ring circle = new Ring();
-
- EggRing(int x, int y, float t, float sp) {
-
- ovoid = new Egg(x, y, t, sp);
-
- circle.start(x, y - sp/2);
-
- }
-
- void transmit() {
-
- ovoid.wobble();
-
- ovoid.display();
-
- circle.grow();
-
- circle.display();
-
- if (circle.on == false) {
-
- circle.on = true;
-
- }
-
- }
-
-}
-
-
-
-class Egg {
-
- float x, y; // X-coordinate, y-coordinate
-
- float tilt; // Left and right angle offset
-
- float angle; // Used to define the tilt
-
- float scalar; // Height of the egg
-
- // Constructor
-
- Egg(int xpos, int ypos, float t, float s) {
-
- x = xpos;
-
- y = ypos;
-
- tilt = t;
-
- scalar = s / 100.0;
-
- }
-
- void wobble() {
-
- tilt = cos(angle) / 8;
-
- angle += 0.1;
-
- }
-
- void display() {
-
- noStroke();
-
- fill(255);
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(tilt);
-
- scale(scalar);
-
- beginShape();
-
- vertex(0, -100);
-
- bezierVertex(25, -100, 40, -65, 40, -40);
-
- bezierVertex(40, -15, 25, 0, 0, 0);
-
- bezierVertex(-25, 0, -40, -15, -40, -40);
-
- bezierVertex(-40, -65, -25, -100, 0, -100);
-
- endShape();
-
- popMatrix();
-
- }
-
-}
-
-
-
-class Ring {
-
- float x, y; // X-coordinate, y-coordinate
-
- float diameter; // Diameter of the ring
-
- boolean on = false; // Turns the display on and off
-
- void start(float xpos, float ypos) {
-
- x = xpos;
-
- y = ypos;
-
- on = true;
-
- diameter = 1;
-
- }
-
- void grow() {
-
- if (on == true) {
-
- diameter += 0.5;
-
- if (diameter > width*2) {
-
- diameter = 0.0;
-
- }
-
- }
-
- }
-
- void display() {
-
- if (on == true) {
-
- noFill();
-
- strokeWeight(4);
-
- stroke(155, 153);
-
- ellipse(x, y, diameter, diameter);
-
- }
-
- }
-
-}Conditions are like questions. - -They allow a program to decide to take one action if - -the answer to a question is true or to do another action - -if the answer to the question is false. - -The questions asked within a program are always logical - -or relational statements. For example, if the variable 'i' is - -equal to zero then draw a line.
- - - -Original Processing.org Example: Conditionals1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(0);
-
-
-
-for(int i=10; i<width; i+=10) {
-
- // If 'i' divides by 20 with no remainder draw the first line
-
- // else draw the second line
-
- if(i%20 == 0) {
-
- stroke(153);
-
- line(i, 40, i, height/2);
-
- } else {
-
- stroke(102);
-
- line(i, 20, i, 180);
-
- }
-
-}We extend the language of conditionals by adding the - -keyword "else". This allows conditionals to ask - -two or more sequential questions, each with a different - -action.
- - - -Original Processing.org Example: Conditionals2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(0);
-
-
-
-for(int i=2; i<width-2; i+=2) {
-
- // If 'i' divides by 20 with no remainder
-
- // draw the first line else draw the second line
-
- if(i%20 == 0) {
-
- stroke(255);
-
- line(i, 40, i, height/2);
-
- } else if (i%10 == 0) {
-
- stroke(153);
-
- line(i, 20, i, 180);
-
- } else {
-
- stroke(102);
-
- line(i, height/2, i, height-40);
-
- }
-
-}Move the mouse across the screen to move the circle. - -The program constrains the circle to its box.
- - - -Original Processing.org Example: Constrain
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float mx;
-
-float my;
-
-float easing = 0.05;
-
-float esize = 25.0;
-
-int box = 30;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- ellipseMode(CENTER_RADIUS);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- if(abs(mouseX - mx) > 0.1) {
-
- mx = mx + (mouseX - mx) * easing;
-
- }
-
- if(abs(mouseY - my) > 0.1) {
-
- my = my + (mouseY- my) * easing;
-
- }
-
-
-
- float distance = esize * 2;
-
- mx = constrain(mx, box+distance, width-box-distance);
-
- my = constrain(my, box+distance, height-box-distance);
-
- fill(76);
-
- rect(box+esize, box+esize, box*3, box*3);
-
- fill(255);
-
- ellipse(mx, my, esize, esize);
-
-}All shapes drawn to the screen have a position that is specified as a coordinate. - -All coordinates are measured as the distance from the origin in units of pixels. - -The origin [0, 0] is the coordinate is in the upper left of the window - -and the coordinate in the lower right is [width-1, height-1].
- - - -Original Processing.org Example: Coordinates
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -// Sets the screen to be 200, 200, so the width of the window is 200 pixels - -// and the height of the window is 200 pixels - -size(200, 200); - -background(0); - -noFill(); - -stroke(255); - - - -// The two parameters of the point() method each specify coordinates. - -// This call to point() draws at the position [100, 100] - -point(width/2, height/2); - - - -// Draws to the position [100, 50] - -point(width/2, height/4); - - - -// It is also possible to specify a point with any parameter, - -// but only coordinates on the screen are visible - -point(60, 30); - -point(60, 134); - -point(160, 50); - -point(280, -800); - -point(201, 100); - - - -// Coordinates are used for drawing all shapes, not just points. - -// Parameters for different methods are used for different purposes. - -// For example, the first two parameters to line() specify the coordinates of the - -// first point and the second two parameters specify the second point - -stroke(204); - -line(0, 73, width, 73); - - - -// The first two parameters to rect() are coordinates - -// and the second two are the width and height - -rect(110, 55, 40, 36);
The createGraphics() function creates an object from the PGraphics class - -(PGraphics is the main graphics and rendering context for Processing). - -The beginDraw() method is necessary to prepare for drawing and endDraw() is - -necessary to finish. Use this class if you need to draw into an off-screen - -graphics buffer or to maintain two contexts with different properties.
- - - -Original Processing.org Example: CreateGraphics
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-PGraphics pg;
-
-
-
-void setup() {
-
- size(200, 200);
-
- pg = createGraphics(80, 80, P3D);
-
-}
-
-
-
-void draw() {
-
- fill(0, 12);
-
- rect(0, 0, width, height);
-
- fill(255);
-
- noStroke();
-
- ellipse(mouseX, mouseY, 60, 60);
-
-
-
- pg.beginDraw();
-
- pg.background(102);
-
- pg.noFill();
-
- pg.stroke(255);
-
- pg.ellipse(mouseX-60, mouseY-60, 60, 60);
-
- pg.endDraw();
-
-
-
- image(pg, 60, 60);
-
-}The createImage() function provides a fresh buffer of pixels to play with. - -This example creates an image gradient.
- - - -Original Processing.org Example: CreateImage
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-PImage img;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- img = createImage(120, 120, RGB);
-
- for(int i=0; i < img.pixels.length; i++) {
-
- img.pixels[i] = color(0, 90, 102, i%img.width * 2);
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(204);
-
- image(img, 33, 33);
-
- image(img, mouseX-60, mouseY-60);
-
-}Creating variables for colors that may be referred to - -in the program by their name, rather than a number.
- - - -Original Processing.org Example: Creating
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -size(200, 200); - -noStroke(); - - - -color inside = color(204, 102, 0); - -color middle = color(204, 153, 0); - -color outside = color(153, 51, 0); - - - -// These statements are equivalent to the statements above. - -// Programmers may use the format they prefer. - -//color inside = #CC6600; - -//color middle = #CC9900; - -//color outside = #993300; - - - -fill(outside); - -rect(0, 0, 200, 200); - -fill(middle); - -rect(40, 60, 120, 120); - -fill(inside); - -rect(60, 90, 80, 80);
It is sometimes beneficial to convert a value from one type of - -data to another. Each of the conversion functions converts its parameter - -to an equivalent representation within its datatype. - -The conversion functions include int(), float(), char(), byte(), and others.
- - - -Original Processing.org Example: DatatypeConversion
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -size(200, 200); - -background(51); - -noStroke(); - - - -char c; // Chars are used for storing typographic symbols - -float f; // Floats are decimal numbers - -int i; // Ints are values between 2,147,483,647 and -2147483648 - -byte b; // Bytes are values between -128 and 128 - - - -c = 'A'; - -f = float(c); // Sets f = 65.0 - -i = int(f * 1.4); // Sets i to 91 - -b = byte(c / 2); // Sets b to 32 - - - -rect(f, 0, 40, 66); - -fill(204); - -rect(i, 67, 40, 66); - -fill(255); - -rect(b, 134, 40, 66);
Images can be displayed to the screen at their actual size - -or any other size.
- -NOTE: DOM security will not allow you to load images file:/// URIs. This security can be overridden in Firefox in about:config, by changing security.fileuri.strict_origin_policy to false.
- - - -Original Processing.org Example: Displaying
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/arch.jpg"; */
-
-PImage a; // Declare variable "a" of type PImage
-
-void setup() {
-
- noLoop(); // rather than drawing as an animation, only call draw() once
-
- size(200, 200);
-
- a = loadImage("data/arch.jpg"); // Load the images for use in the sketch
-
-}
-
-void draw() {
-
- image(a, 0, 0); // // Display the image at point (0,0) with natural width and height
-
- image(a, width/2, 0, a.width/2, a.height/2); // Display the image again, this time starting at (width/2, 0), and scaled to 50% in both x and y direction
-
-}Move the mouse left and right to control the speed and direction of the moving shapes.
- - - -Original Processing.org Example: Distance1D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int thin = 8;
-
-int thick = 36;
-
-float xpos1 = 134.0;
-
-float xpos2 = 44.0;
-
-float xpos3 = 58.0;
-
-float xpos4 = 120.0;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- frameRate(60);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
-
-
- float mx = mouseX * 0.4 - width/5.0;
-
-
-
- fill(102);
-
- rect(xpos2, 0, thick, height/2);
-
- fill(204);
-
- rect(xpos1, 0, thin, height/2);
-
- fill(102);
-
- rect(xpos4, height/2, thick, height/2);
-
- fill(204);
-
- rect(xpos3, height/2, thin, height/2);
-
-
-
- xpos1 += mx/16;
-
- xpos2 += mx/64;
-
- xpos3 -= mx/16;
-
- xpos4 -= mx/64;
-
-
-
- if(xpos1 < -thin) { xpos1 = width; }
-
- if(xpos1 > width) { xpos1 = -thin; }
-
- if(xpos2 < -thick) { xpos2 = width; }
-
- if(xpos2 > width) { xpos2 = -thick; }
-
- if(xpos3 < -thin) { xpos3 = width; }
-
- if(xpos3 > width) { xpos3 = -thin; }
-
- if(xpos4 < -thick) { xpos4 = width; }
-
- if(xpos4 > width) { xpos4 = -thick; }
-
-}Move the mouse across the image to obscure and reveal the matrix. - -Measures the distance from the mouse to each square and sets the - -size proportionally.
- - - -Original Processing.org Example: Distance2D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float max_distance;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- noStroke();
-
- max_distance = dist(0, 0, width, height);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- for(int i = 0; i <= width; i += 20) {
-
- for(int j = 0; j <= width; j += 20) {
-
- float size = dist(mouseX, mouseY, i, j);
-
- size = size/max_distance * 66;
-
- ellipse(i, j, size, size);
-
- }
-
- }
-
-}by Ira Greenberg. - - - -Using 2 random() calls the and point() function - -to create an irregular sawtooth line.
- - - -Original Processing.org Example: DoubleRandom
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(0);
-
-int totalPts = 300;
-
-float steps = totalPts+1;
-
-stroke(255);
-
-float rand = 0;
-
-
-
-for (int i=1; i< steps; i++){
-
- point( (width/steps) * i, (height/2) + random(-rand, rand) );
-
- rand += random(-5, 5);
-
-}Move the mouse across the screen and the symbol will follow. - -Between drawing each frame of the animation, the program - -calculates the difference between the position of the - -symbol and the cursor. If the distance is larger than - -1 pixel, the symbol moves half of the distance from its - -current position toward the cursor.
- - - -Original Processing.org Example: Easing
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float x;
-
-float y;
-
-float targetX, targetY;
-
-float easing = 0.05;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- background( 51 );
-
-
-
- targetX = mouseX;
-
- float dx = mouseX - x;
-
- if(abs(dx) > 1) {
-
- x += dx * easing;
-
- }
-
-
-
- targetY = mouseY;
-
- float dy = mouseY - y;
-
- if(abs(dy) > 1) {
-
- y += dy * easing;
-
- }
-
-
-
- ellipse(x, y, 33, 33);
-
-}Embedding "for" structures allows repetition in two dimensions.
- - - -Original Processing.org Example: EmbeddedIteration
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float box_size = 11;
-
-float box_space = 12;
-
-int margin = 7;
-
-
-
-size(200, 200);
-
-background(0);
-
-noStroke();
-
-
-
-// Draw gray boxes
-
-
-
-for(int i = margin; i < width-margin; i += box_space) {
-
- for(int j = margin; j < height-margin; j += box_space) {
-
- fill(255 - box_size*10);
-
- rect(j, i, box_size, box_size);
-
- }
-
- box_size = box_size - 0.6;
-
-}Click on the left button to open a different URL in the same window (Only - -works online). Click on the right button to open a URL in a new browser window. - - - -Created 21 June 2003.
- - - -Original Processing.org Example: EmbeddedLinks
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-boolean overLeftButton = false;
-
-boolean overRightButton = false;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
-}
-
-
-
-void draw()
-
-{
-
- background(204);
-
-
-
- // Left buttom
-
- if(overLeftButton == true) {
-
- fill(255);
-
- } else {
-
- noFill();
-
- }
-
- rect(20, 60, 75, 75);
-
- rect(50, 90, 15, 15);
-
-
-
- // Right button
-
- if(overRightButton == true) {
-
- fill(255);
-
- } else {
-
- noFill();
-
- }
-
- rect(105, 60, 75, 75);
-
- line(135, 105, 155, 85);
-
- line(140, 85, 155, 85);
-
- line(155, 85, 155, 100);
-
-}
-
-
-
-void mousePressed()
-
-{
-
- if(overLeftButton) {
-
- link("http://www.processing.org");
-
- } else if (overRightButton) {
-
- link("http://www.processing.org", "_new");
-
- }
-
-}
-
-
-
-void mouseMoved() {
-
- checkButtons();
-
-}
-
-
-
-void mouseDragged() {
-
- checkButtons();
-
-}
-
-
-
-void checkButtons() {
-
- if(mouseX > 20 && mouseX < 95 &&
-
- mouseY > 60 && mouseY <135) {
-
- overLeftButton = true;
-
- } else if (mouseX > 105 && mouseX < 180 &&
-
- mouseY > 60 && mouseY <135) {
-
- overRightButton = true;
-
- } else {
-
- overLeftButton = overRightButton = false;
-
- }
-
-
-
-}The draw_target() function makes it easy to draw many distinct targets. - -Each call to draw_target() specifies the position, size, and number of - -rings for each target.
- - - -Original Processing.org Example: Functions
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(51);
-
- noStroke();
-
- smooth();
-
- noLoop();
-
-}
-
-
-
-void draw()
-
-{
-
- draw_target(68, 34, 200, 10);
-
- draw_target(152, 16, 100, 3);
-
- draw_target(100, 144, 80, 5);
-
-}
-
-
-
-void draw_target(int xloc, int yloc, int size, int num)
-
-{
-
- float grayvalues = 255/num;
-
- float steps = size/num;
-
- for(int i=0; i<num; i++) {
-
- fill(i*grayvalues);
-
- ellipse(xloc, yloc, size-i*steps, size-i*steps);
-
- }
-
-}by Daniel Shiffman. - - - -Graphics the following equation: - -sin(n*cos(r) + 5*theta) - -where n is a function of horizontal mouse location.
- - - -Original Processing.org Example: Graphing2DEquation
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- loadPixels();
-
- float n = (mouseX * 10.0) / width;
-
- float w = 16.0; // 2D space width
-
- float h = 16.0; // 2D space height
-
- float dx = w / width; // Increment x this amount per pixel
-
- float dy = h / height; // Increment y this amount per pixel
-
- float x = -w/2; // Start x at -1 * width / 2
-
- for (int i = 0; i < width; i++) {
-
- float y = -h/2; // Start y at -1 * height / 2
-
- for (int j = 0; j < height; j++) {
-
- float r = sqrt((x*x) + (y*y)); // Convert cartesian to polar
-
- float theta = atan2(y,x); // Convert cartesian to polar
-
- // Compute 2D polar coordinate function
-
- float val = sin(n*cos(r) + 5 * theta); // Results in a value between -1 and 1
-
- //float val = cos(r); // Another simple function
-
- //float val = sin(theta); // Another simple function
-
- // Map resulting vale to grayscale value
-
- pixels[i+j*width] = color((val + 1.0) * 255.0/2.0); // Scale to between 0 and 255
-
- y += dy; // Increment y
-
- }
-
- x += dx; // Increment x
-
- }
-
- updatePixels();
-
-}Hue is the color reflected from or transmitted through an object - -and is typically referred to as the name of the color (red, blue, yellow, etc.) - -Move the cursor vertically over each bar to alter its hue.
- - - -Original Processing.org Example: Hue
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int barWidth = 5;
-
-int[] hue;
-
-
-
-void setup()
-
-{
-
- size(400, 400);
-
- colorMode(HSB, 360, height, height);
-
- hue = new int[width/barWidth];
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- int j = 0;
-
- for (int i=0; i<=(width-barWidth); i+=barWidth) {
-
- if ((mouseX > i) && (mouseX < i+barWidth)) {
-
- hue[j] = mouseY;
-
- }
-
- fill(hue[j], height/1.2, height/1.2);
-
- rect(i, 0, barWidth, height);
-
- j++;
-
- }
-
-}Writing "a++" is equivalent to "a = a + 1". - -Writing "a--" is equivalent to "a = a - 1".
- - - -Original Processing.org Example: IncrementDecrement
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int a;
-
-int b;
-
-boolean direction;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- colorMode(RGB, width);
-
- a = 0;
-
- b = width;
-
- direction = true;
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- a++;
-
- if(a > width) {
-
- a = 0;
-
- direction = !direction;
-
- }
-
- if(direction == true){
-
- stroke(a);
-
- } else {
-
- stroke(width-a);
-
- }
-
- line(a, 0, a, height/2);
-
-
-
- b--;
-
- if(b < 0) {
-
- b = width;
-
- }
-
- if(direction == true) {
-
- stroke(width-b);
-
- } else {
-
- stroke(b);
-
- }
-
- line(b, height/2+1, b, height);
-
-}Basic demonstrations of how Processing works, from the Processing.org -web site. All of the following demos were written by Casey Reas -and Ben Fry unless otherwise stated.
- -You can also view Basic Demos on processing.org
- -A class can be defined using another class as a foundation. In object-oriented - -programming terminology, one class can inherit fi elds and methods from another. - -An object that inherits from another is called a subclass, and the object it - -inherits from is called a superclass. A subclass extends the superclass.
- - - -Original Processing.org Example: Inheritance
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-SpinSpots spots;
-
-SpinArm arm;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- arm = new SpinArm(width/2, height/2, 0.01);
-
- spots = new SpinSpots(width/2, height/2, -0.02, 33.0);
-
-}
-
-
-
-void draw()
-
-{
-
- background(204);
-
- arm.update();
-
- arm.display();
-
- spots.update();
-
- spots.display();
-
-}
-
-
-
-class Spin
-
-{
-
- float x, y, speed;
-
- float angle = 0.0;
-
- Spin(float xpos, float ypos, float s) {
-
- x = xpos;
-
- y = ypos;
-
- speed = s;
-
- }
-
- void update() {
-
- angle += speed;
-
- }
-
-}
-
-
-
-class SpinArm extends Spin
-
-{
-
- SpinArm(float x, float y, float s) {
-
- super(x, y, s);
-
- }
-
- void display() {
-
- strokeWeight(1);
-
- stroke(0);
-
- pushMatrix();
-
- translate(x, y);
-
- angle += speed;
-
- rotate(angle);
-
- line(0, 0, 66, 0);
-
- popMatrix();
-
- }
-
-}
-
-
-
-class SpinSpots extends Spin
-
-{
-
- float dim;
-
- SpinSpots(float x, float y, float s, float d) {
-
- super(x, y, s);
-
- dim = d;
-
- }
-
- void display() {
-
- noStroke();
-
- pushMatrix();
-
- translate(x, y);
-
- angle += speed;
-
- rotate(angle);
-
- ellipse(-dim/2, 0, dim, dim);
-
- ellipse(dim/2, 0, dim, dim);
-
- popMatrix();
-
- }
-
-}Integers and floats are two different kinds of numerical data. - -An integer (more commonly called an int) is a number without - -a decimal point. A float is a floating-point number, which means - -it is a number that has a decimal place. Floats are used when - -more precision is needed.
- - - -Original Processing.org Example: IntegersFloats
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int a = 0; // Create a variable "a" of the datatype "int"
-
-float b = 0.0; // Create a variable "b" of the datatype "float"
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- stroke(255);
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- a = a + 1;
-
- b = b + 0.2;
-
- line(a, 0, a, height/2);
-
- line(b, height/2, b, height);
-
-
-
- if(a > width) {
-
- a = 0;
-
- }
-
- if(b > width) {
-
- b = 0;
-
- }
-
-}Iteration with a "for" structure constructs repetitive forms.
- - - -Original Processing.org Example: Iteration
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int k;
-
-int xpos1 = 100;
-
-int xpos2 = 118;
-
-int count = 0;
-
-int timey = 0;
-
-int num = 12;
-
-
-
-size(200, 200);
-
-background(102);
-
-noStroke();
-
-
-
-// Draw gray bars
-
-fill(255);
-
-k=60;
-
-for(int i=0; i < num/3; i++) {
-
- rect(25, k, 155, 5);
-
- k+=10;
-
-}
-
-
-
-// Black bars
-
-fill(51);
-
-k = 40;
-
-for(int i=0; i < num; i++) {
-
- rect(105, k, 30, 5);
-
- k += 10;
-
-}
-
-k = 15;
-
-for(int i = 0; i < num; i++) {
-
- rect(125, k, 30, 5);
-
- k +=10;
-
-}
-
-
-
-// Thin lines
-
-k = 42;
-
-fill(0);
-
-for(int i=0; i < num-1; i++) {
-
- rect(36, k, 20, 1);
-
- k+=10;
-
-}Click on the image to give it focus and press the letter keys - -to create forms in time and space. Each key has a unique identifying - -number called it's ASCII value. These numbers can be used to position - -shapes in space.
- - - -Original Processing.org Example: Keyboard
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int numChars = 26;
-
-color[] colors = new color[numChars];
-
-int keyIndex;
-
-float keyScale;
-
-int rectWidth;
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- background(0);
-
- keyScale = 200/numChars-1.0;
-
- rectWidth = width/4;
-
-}
-
-
-
-void draw()
-
-{
-
- if(keyPressed) {
-
- if(key >= 'A' && key <= 'z') {
-
- if(key <= 'Z') {
-
- keyIndex = key-'A';
-
- } else {
-
- keyIndex = key-'a';
-
- }
-
- fill(millis()%255);
-
- float beginRect = rectWidth/2 + keyIndex*keyScale-rectWidth/2;
-
- rect(beginRect, 0.0, rectWidth, height);
-
- }
-
- }
-
-}Modified from code by Martin. - -Original 'Color Typewriter' concept by John Maeda. - - - -Click on the window to give it focus and press the letter keys to type colors. - -The keyboard function keyPressed() is called whenever - -a key is pressed. keyReleased() is another keyboard - -function that is called when a key is released.
- - - -Original Processing.org Example: KeyboardFunctions
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int max_height = 20;
-
-int min_height = 10;
-
-int letter_height = max_height; // Height of the letters
-
-int letter_width = 10; // Width of the letter
-
-
-
-int x = -letter_width; // X position of the letters
-
-int y = 0; // Y position of the letters
-
-
-
-boolean newletter;
-
-
-
-int numChars = 26; // There are 26 characters in the alphabet
-
-color[] colors = new color[numChars];
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- colorMode(RGB, numChars);
-
- background(numChars/2);
-
- // Set a gray value for each key
-
- for(int i=0; i<numChars; i++) {
-
- colors[i] = color(i, i, i);
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- if(newletter == true) {
-
- // Draw the "letter"
-
- int y_pos;
-
- if (letter_height == max_height) {
-
- y_pos = y;
-
- rect( x, y_pos, letter_width, letter_height );
-
- } else {
-
- y_pos = y + min_height;
-
- rect( x, y_pos, letter_width, letter_height );
-
- fill(numChars/2);
-
- rect( x, y_pos-min_height, letter_width, letter_height );
-
- }
-
- newletter = false;
-
- }
-
-}
-
-
-
-void keyPressed()
-
-{
-
- // if the key is between 'A'(65) and 'z'(122)
-
- if( key >= 'A' && key <= 'z') {
-
- int keyIndex;
-
- if(key <= 'Z') {
-
- keyIndex = key-'A';
-
- letter_height = max_height;
-
- fill(colors[key-'A']);
-
- } else {
-
- keyIndex = key-'a';
-
- letter_height = min_height;
-
- fill(colors[key-'a']);
-
- }
-
- } else {
-
- fill(0);
-
- letter_height = 10;
-
- }
-
-
-
- newletter = true;
-
-
-
- // Update the "letter" position
-
- x = ( x + letter_width );
-
-
-
- // Wrap horizontally
-
- if (x > width - letter_width) {
-
- x = 0;
-
- y+= max_height;
-
- }
-
-
-
- // Wrap vertically
-
- if( y > height - letter_height) {
-
- y = 0; // reset y to 0
-
- }
-
-}Drawing letters to the screen in Processing - -uses a technology developed in the mid 1990s - -at the Visual Language Workshop at the MIT - -Media Laboratory. It is a closed system, - -but we have supplied a number of fonts - -located in the "font" directory in the main - -"processing" directory. We expect to change - -the Processing font technology in the future.
- - - -Original Processing.org Example: Letters
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(0);
-
-
-
-// Load the font. Fonts are located within the
-
-// main Processing directory/folder and they
-
-// must be placed within the data directory
-
-// of your sketch for them to load
-
-PFont fontA = loadFont("Courier New");
-
-textFont(fontA, 36);
-
-textAlign(CENTER);
-
-
-
-// Set the gray value of the letters
-
-fill(255);
-
-
-
-// Set the left and top margin
-
-int margin = 6;
-
-int gap = 30;
-
-translate(margin*1.5, margin*2);
-
-
-
-// Create a matrix of letterforms
-
-int counter = 0;
-
-for(int i=0; i<margin; i++) {
-
- for(int j=0; j<margin; j++) {
-
- char letter;
-
-
-
- // Select the letter
-
- int count = 65+(i*margin)+j;
-
- if(count <= 90) {
-
- letter = char(65+counter);
-
- if(letter == 'A' || letter == 'E' || letter == 'I' ||
-
- letter == 'O' || letter == 'U') {
-
- fill(204, 204, 0);
-
- } else {
-
- fill(255);
-
- }
-
- } else {
-
- fill(153);
-
- letter = char(48+counter);
-
- }
-
-
-
- // Draw the letter to the screen
-
- text(letter, 15+j*gap, 20+i*gap);
-
-
-
- // Increment the counter
-
- counter++;
-
- if(counter >= 26) {
-
- counter = 0;
-
- }
-
- }
-
-}by Ira Greenberg. - - - -Using the convenient red(), green() - -and blue() component functions, - -generate some linear gradients.
- - - -Original Processing.org Example: LinearGradient
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// constants
-
-int Y_AXIS = 1;
-
-int X_AXIS = 2;
-
-
-
-void setup(){
-
- size(200, 200);
-
-
-
- // create some gradients
-
- // background
-
- color b1 = color(190, 190, 190);
-
- color b2 = color(20, 20, 20);
-
- setGradient(0, 0, width, height, b1, b2, Y_AXIS);
-
- //center squares
-
- color c1 = color(255, 120, 0);
-
- color c2 = color(10, 45, 255);
-
- color c3 = color(10, 255, 15);
-
- color c4 = color(125, 2, 140);
-
- color c5 = color(255, 255, 0);
-
- color c6 = color(25, 255, 200);
-
- setGradient(25, 25, 75, 75, c1, c2, Y_AXIS);
-
- setGradient(100, 25, 75, 75, c3, c4, X_AXIS);
-
- setGradient(25, 100, 75, 75, c2, c5, X_AXIS);
-
- setGradient(100, 100, 75, 75, c4, c6, Y_AXIS);
-
-}
-
-
-
-void setGradient(int x, int y, float w, float h, color c1, color c2, int axis ){
-
- // calculate differences between color components
-
- float deltaR = red(c2)-red(c1);
-
- float deltaG = green(c2)-green(c1);
-
- float deltaB = blue(c2)-blue(c1);
-
-
-
- // choose axis
-
- if(axis == Y_AXIS){
-
- /*nested for loops set pixels
-
- in a basic table structure */
-
- // column
-
- for (int i=x; i<=(x+w); i++){
-
- // row
-
- for (int j = y; j<=(y+h); j++){
-
- color c = color(
-
- (red(c1)+(j-y)*(deltaR/h)),
-
- (green(c1)+(j-y)*(deltaG/h)),
-
- (blue(c1)+(j-y)*(deltaB/h))
-
- );
-
- set(i, j, c);
-
- }
-
- }
-
- }
-
- else if(axis == X_AXIS){
-
- // column
-
- for (int i=y; i<=(y+h); i++){
-
- // row
-
- for (int j = x; j<=(x+w); j++){
-
- color c = color(
-
- (red(c1)+(j-x)*(deltaR/h)),
-
- (green(c1)+(j-x)*(deltaG/h)),
-
- (blue(c1)+(j-x)*(deltaB/h))
-
- );
-
- set(j, i, c);
-
- }
-
- }
-
- }
-
-}Loading a recent image from the US National Weather Service. - -Notice the date in the upper left corner of the image. - -Processing applications can only load images from the network - -while running in the Processing environment. This example will - -not run in a web broswer and will only work when the computer - -is connected to the Internet.
- - - -Original Processing.org Example: LoadingImages
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-PImage img1;
-
-img1 = loadImage("http://iwin.nws.noaa.gov/iwin/images/ecir.jpg");
-
-image(img1, 0, 0);The logical operators for AND (&&) and OR (||) are used to - -combine simple relational statements into more complex expressions. - -The NOT (!) operator is used to negate a boolean statement.
- - - -Original Processing.org Example: LogicalOperators
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(126);
-
-
-
-boolean op = false;
-
-
-
-for(int i=5; i<=195; i+=5) {
-
- // Logical AND
-
- stroke(0);
-
- if((i > 35) && (i < 100)) {
-
- line(5, i, 95, i);
-
- op = false;
-
- }
-
-
-
- // Logical OR
-
- stroke(76);
-
- if((i <= 35) || (i >= 100)) {
-
- line(105, i, 195, i);
-
- op = true;
-
- }
-
-
-
- // Testing if a boolean value is "true"
-
- // The expression "if(op)" is equivalent to "if(op == true)"
-
- if(op) {
-
- stroke(0);
-
- point(width/2, i);
-
- }
-
-
-
- // Testing if a boolean value is "false"
-
- // The expression "if(!op)" is equivalent to "if(op == false)"
-
- if(!op) {
-
- stroke(255);
-
- point(width/4, i);
-
- }
-
-}The loop() function causes draw() to execute - -continuously. If noLoop is called in setup() - -the draw() is only executed once. In this example - -click the mouse to execute loop(), which will - -cause the draw() the execute continuously.
- - - -Original Processing.org Example: Loop
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// The statements in the setup() function
-
-// execute once when the program begins
-
-void setup()
-
-{
-
- size(200, 200); // Size should be the first statement
-
- stroke(255); // Set stroke color to white
-
- noLoop();
-
-}
-
-
-
-float y = 100;
-
-
-
-// The statements in draw() are run until the
-
-// program is stopped. Each statement is run in
-
-// sequence and after the last line is read, the first
-
-// line is run again.
-
-void draw()
-
-{
-
- background(0); // Set the background to black
-
- line(0, y, width, y);
-
-
-
- y = y - 1;
-
- if (y < 0) {
-
- y = height;
-
- }
-
-}
-
-
-
-void mousePressed()
-
-{
-
- loop();
-
-}A millisecond is 1/1000 of a second. - -Processing keeps track of the number of milliseconds a program has run. - -By modifying this number with the modulo(%) operator, - -different patterns in time are created.
- - - -Original Processing.org Example: Milliseconds
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float scale;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- scale = width/10;
-
-}
-
-
-
-void draw()
-
-{
-
- for(int i=0; i<scale; i++) {
-
- colorMode(RGB, (i+1) * scale * 10);
-
- fill(millis()%((i+1) * scale * 10) );
-
- rect(i*scale, 0, scale, height);
-
- }
-
-}The modulo operator (%) returns the remainder of a number - -divided by another. As in this example, it is often used - -to keep numerical values within a set range. - - - -Created 12 January 2003.
- - - -Original Processing.org Example: Modulo
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int num = 20;
-
-float c;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- fill(255);
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- c+=0.1;
-
- for(int i=1; i<height/num; i++) {
-
- float x = (c%i)*i*i;
-
- stroke(102);
-
- line(0, i*num, x, i*num);
-
- noStroke();
-
- rect(x, i*num-num/2, 8, num);
-
- }
-
-}Move the mouse left and right to shift the balance. - -The "mouseX" variable is used to control both the - -size and color of the rectangles.
- - - -Original Processing.org Example: Mouse1D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int gx = 15;
-
-int gy = 35;
-
-float leftColor = 0.0;
-
-float rightColor = 0.0;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- colorMode(RGB, 1.0);
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- background(0.0);
-
- update(mouseX);
-
- fill(0.0, leftColor + 0.4, leftColor + 0.6);
-
- rect(width/4-gx, width/2-gx, gx*2, gx*2);
-
- fill(0.0, rightColor + 0.2, rightColor + 0.4);
-
- rect(width/1.33-gy, width/2-gy, gy*2, gy*2);
-
-}
-
-
-
-void update(int x)
-
-{
-
- leftColor = -0.002 * x/2 + 0.06;
-
- rightColor = 0.002 * x/2 + 0.06;
-
-
-
- gx = x/2;
-
- gy = 100-x/2;
-
-
-
- if (gx < 10) {
-
- gx = 10;
-
- } else if (gx > 90) {
-
- gx = 90;
-
- }
-
-
-
- if (gy > 90) {
-
- gy = 90;
-
- } else if (gy < 10) {
-
- gy = 10;
-
- }
-
-}Moving the mouse changes the position and size of each box.
- - - -Original Processing.org Example: Mouse2D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- colorMode(RGB, 255, 255, 255, 100);
-
- rectMode(CENTER);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
- fill(255, 80);
-
- rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
-
- fill(255, 80);
-
- rect(width-mouseX, height/2, ((height-mouseY)/2)+10, ((height-mouseY)/2)+10);
-
-}Click on the box and drag it across the screen.
- - - -Original Processing.org Example: MouseFunctions
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float bx;
-
-float by;
-
-int bs = 20;
-
-boolean bover = false;
-
-boolean locked = false;
-
-float bdifx = 0.0;
-
-float bdify = 0.0;
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- bx = width/2.0;
-
- by = height/2.0;
-
- rectMode(CENTER_RADIUS);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
-
-
- // Test if the cursor is over the box
-
- if (mouseX > bx-bs && mouseX < bx+bs &&
-
- mouseY > by-bs && mouseY < by+bs) {
-
- bover = true;
-
- if(!locked) {
-
- stroke(255);
-
- fill(153);
-
- }
-
- } else {
-
- stroke(153);
-
- fill(153);
-
- bover = false;
-
- }
-
-
-
- // Draw the box
-
- rect(bx, by, bs, bs);
-
-}
-
-
-
-void mousePressed() {
-
- if(bover) {
-
- locked = true;
-
- fill(255, 255, 255);
-
- } else {
-
- locked = false;
-
- }
-
- bdifx = mouseX-bx;
-
- bdify = mouseY-by;
-
-
-
-}
-
-
-
-void mouseDragged() {
-
- if(locked) {
-
- bx = mouseX-bdifx;
-
- by = mouseY-bdify;
-
- }
-
-}
-
-
-
-void mouseReleased() {
-
- locked = false;
-
-}Move the mouse to position the shape. - -Press the mouse button to invert the color.
- - - -Original Processing.org Example: MousePress
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup() {
-
- size(200, 200);
-
- fill(126);
-
- background(102);
-
-}
-
-
-
-void draw() {
-
- if(mousePressed) {
-
- stroke(255);
-
- } else {
-
- stroke(0);
-
- }
-
- line(mouseX-66, mouseY, mouseX+66, mouseY);
-
- line(mouseX, mouseY-66, mouseX, mouseY+66);
-
-}Move and click the mouse to generate signals. - -The top row is the signal from "mouseX", - -the middle row is the signal from "mouseY", - -and the bottom row is the signal from "mousePressed".
- - - -Original Processing.org Example: MouseSignals
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int[] xvals;
-
-int[] yvals;
-
-int[] bvals;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- xvals = new int[width];
-
- yvals = new int[width];
-
- bvals = new int[width];
-
-}
-
-
-
-int arrayindex = 0;
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- for(int i=1; i<width; i++) {
-
- xvals[i-1] = xvals[i];
-
- yvals[i-1] = yvals[i];
-
- bvals[i-1] = bvals[i];
-
- }
-
- // Add the new values to the end of the array
-
- xvals[width-1] = mouseX;
-
- yvals[width-1] = mouseY;
-
- if(mousePressed) {
-
- bvals[width-1] = 0;
-
- } else {
-
- bvals[width-1] = 255;
-
- }
-
-
-
- fill(255);
-
- noStroke();
-
- rect(0, height/3, width, height/3+1);
-
-
-
- for(int i=1; i<width; i++) {
-
- stroke(255);
-
- point(i, xvals[i]/3);
-
- stroke(0);
-
- point(i, height/3+yvals[i]/3);
-
- stroke(255);
-
- line(i, 2*height/3+bvals[i]/3, i, (2*height/3+bvals[i-1]/3));
-
- }
-
-}A class can have multiple constructors that assign the fields in different ways. - -Sometimes it's beneficial to specify every aspect of an object's data by assigning - -parameters to the fields, but other times it might be appropriate to define only - -one or a few.
- - - -Original Processing.org Example: MultipleConstructors
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Spot sp1, sp2;
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(204);
-
- smooth();
-
- noLoop();
-
- // Run the constructor without parameters
-
- sp1 = new Spot();
-
- // Run the constructor with three parameters
-
- sp2 = new Spot(122, 100, 40);
-
-}
-
-
-
-void draw() {
-
- sp1.display();
-
- sp2.display();
-
-}
-
-
-
-class Spot {
-
- float x, y, radius;
-
- // First version of the Spot constructor;
-
- // the fields are assigned default values
-
- Spot() {
-
- x = 66;
-
- y = 100;
-
- radius = 16;
-
- }
-
- // Second version of the Spot constructor;
-
- // the fields are assigned with parameters
-
- Spot(float xpos, float ypos, float r) {
-
- x = xpos;
-
- y = ypos;
-
- radius = r;
-
- }
-
- void display() {
-
- ellipse(x, y, radius*2, radius*2);
-
- }
-
-}By Ira Greenberg - - - -Draw a neighborhood of houses using - -Door, Window, Roof and House classes. - -Good example of class composition, with component - -Door, Window, Roof class references encapsulated - -within House class. This arrangement allows - -House class to handle placement and sizing of - -its components, while still allowing user - -customization of the individual components.
- - - -Original Processing.org Example: Neighborhood
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup(){
-
- size(200, 200);
-
- background(190);
-
- smooth();
-
- // Ground plane
-
- int groundHeight = 10;
-
- fill(0);
-
- rect(0, height-groundHeight, width, groundHeight);
-
- fill(255);
-
-
-
- // Center the houses
-
- translate(12, 0);
-
-
-
- // Houses
-
- Door door1 = new Door(20, 40);
-
- Window window1 = new Window(50, 62, false, Window.DOUBLE);
-
- Roof roof1 = new Roof(Roof.DOME);
-
- House house1 = new House(75, 75, door1, window1, roof1, House.MIDDLE_DOOR);
-
- house1.drawHouse(0, height-groundHeight-house1.h, true);
-
-
-
- Door door2 = new Door(20, 40);
-
- Window window2 = new Window(50, 62, true, Window.QUAD);
-
- Roof roof2 = new Roof(Roof.GAMBREL);
-
- House house2 = new House(100, 60, door2, window2, roof2, House.LEFT_DOOR);
-
- house2.drawHouse(house1.x + house1.w, height-groundHeight-house2.h, true);
-
-}
-
-
-
-class Door{
-
- //door properties
-
- int x;
-
- int y;
-
- int w;
-
- int h;
-
-
-
- // for knob
-
- int knobLoc = 1;
-
- //constants
-
- final static int RT = 0;
-
- final static int LFT = 1;
-
-
-
- // constructor
-
- Door(int w, int h){
-
- this.w = w;
-
- this.h = h;
-
- }
-
-
-
- // draw the door
-
- void drawDoor(int x, int y) {
-
- rect(x, y, w, h);
-
- int knobsize = w/10;
-
- if (knobLoc == 0){
-
- //right side
-
- ellipse(x+w-knobsize, y+h/2, knobsize, knobsize);
-
- }
-
- else {
-
- //left side
-
- ellipse(x+knobsize, y+h/2, knobsize, knobsize);
-
- }
-
- }
-
-
-
- // set knob position
-
- void setKnob(int knobLoc){
-
- this. knobLoc = knobLoc;
-
- }
-
-}
-
-
-
-class Window{
-
- //window properties
-
- int x;
-
- int y;
-
- int w;
-
- int h;
-
-
-
- // customized features
-
- boolean hasSash = false;
-
-
-
- // single, double, quad pane
-
- int style = 0;
-
- //constants
-
- final static int SINGLE = 0;
-
- final static int DOUBLE = 1;
-
- final static int QUAD = 2;
-
-
-
- // constructor 1
-
- Window(int w, int h){
-
- this.w = w;
-
- this.h = h;
-
- }
-
- // constructor 2
-
- Window(int w, int h, int style){
-
- this.w = w;
-
- this.h = h;
-
- this.style = style;
-
- }
-
- // constructor 3
-
- Window(int w, int h, boolean hasSash, int style){
-
- this.w = w;
-
- this.h = h;
-
- this.hasSash = hasSash;
-
- this.style = style;
-
- }
-
-
-
- // draw the window
-
- void drawWindow(int x, int y) {
-
- //local variables
-
- int margin = 0;
-
- int winHt = 0;
-
- int winWdth = 0;
-
-
-
- if (hasSash){
-
- margin = w/15;
-
- }
-
-
-
- switch(style){
-
- case 0:
-
- //outer window (sash)
-
- rect(x, y, w, h);
-
- //inner window
-
- rect(x+margin, y+margin, w-margin*2, h-margin*2);
-
- break;
-
- case 1:
-
- winHt = (h-margin*3)/2;
-
- //outer window (sash)
-
- rect(x, y, w, h);
-
- //inner window (top)
-
- rect(x+margin, y+margin, w-margin*2, winHt);
-
- //inner windows (bottom)
-
- rect(x+margin, y+winHt+margin*2, w-margin*2, winHt);
-
- break;
-
- case 2:
-
- winWdth = (w-margin*3)/2;
-
- winHt = (h-margin*3)/2;
-
- //outer window (sash)
-
- rect(x, y, w, h);
-
- //inner window (top-left)
-
- rect(x+margin, y+margin, winWdth, winHt);
-
- //inner window (top-right)
-
- rect(x+winWdth+margin*2, y+margin, winWdth, winHt);
-
- //inner windows (bottom-left)
-
- rect(x+margin, y+winHt+margin*2, winWdth, winHt);
-
- //inner windows (bottom-right)
-
- rect(x+winWdth+margin*2, y+winHt+margin*2, winWdth, winHt);
-
- break;
-
- }
-
- }
-
-
-
- // set window style (number of panes)
-
- void setStyle(int style){
-
- this.style = style;
-
- }
-
-}
-
-
-
-class Roof{
-
- //roof properties
-
- int x;
-
- int y;
-
- int w;
-
- int h;
-
-
-
- // roof style
-
- int style = 0;
-
- //constants
-
- final static int CATHEDRAL = 0;
-
- final static int GAMBREL = 1;
-
- final static int DOME = 2;
-
-
-
- // default constructor
-
- Roof(){
-
- }
-
-
-
- // constructor 2
-
- Roof(int style){
-
- this.style = style;
-
- }
-
-
-
- // draw the roof
-
- void drawRoof(int x, int y, int w, int h) {
-
- switch(style){
-
- case 0:
-
- beginShape();
-
- vertex(x, y);
-
- vertex(x+w/2, y-h/3);
-
- vertex(x+w, y);
-
- endShape(CLOSE);
-
- break;
-
- case 1:
-
- beginShape();
-
- vertex(x, y);
-
- vertex(x+w/7, y-h/4);
-
- vertex(x+w/2, y-h/2);
-
- vertex(x+(w-w/7), y-h/4);
-
- vertex(x+w, y);
-
- endShape(CLOSE);
-
- break;
-
- case 2:
-
- ellipseMode(CORNER);
-
- arc(x, y-h/2, w, h, PI, TWO_PI);
-
- line(x, y, x+w, y);
-
- break;
-
- }
-
-
-
- }
-
-
-
- // set roof style
-
- void setStyle(int style){
-
- this.style = style;
-
- }
-
-}
-
-
-
-class House{
-
- //house properties
-
- int x;
-
- int y;
-
- int w;
-
- int h;
-
-
-
- //component reference variables
-
- Door door;
-
- Window window;
-
- Roof roof;
-
-
-
- //optional autosize variable
-
- boolean AutoSizeComponents = false;
-
-
-
- //door placement
-
- int doorLoc = 0;
-
- //constants
-
- final static int MIDDLE_DOOR = 0;
-
- final static int LEFT_DOOR = 1;
-
- final static int RIGHT_DOOR = 2;
-
-
-
- //constructor
-
- House(int w, int h, Door door, Window window, Roof roof, int doorLoc) {
-
- this.w = w;
-
- this.h = h;
-
- this.door = door;
-
- this.window = window;
-
- this.roof = roof;
-
- this.doorLoc = doorLoc;
-
- }
-
-
-
- void drawHouse(int x, int y, boolean AutoSizeComponents) {
-
- this.x = x;
-
- this.y =y;
-
- this.AutoSizeComponents = AutoSizeComponents;
-
-
-
- //automatically sizes doors and windows
-
- if(AutoSizeComponents){
-
- //autosize door
-
- door.h = h/4;
-
- door.w = door.h/2;
-
-
-
- //autosize windows
-
- window.h = h/3;
-
- window.w = window.h/2;
-
-
-
- }
-
- // draw bldg block
-
- rect(x, y, w, h);
-
-
-
- // draw door
-
- switch(doorLoc){
-
- case 0:
-
- door.drawDoor(x+w/2-door.w/2, y+h-door.h);
-
- break;
-
- case 1:
-
- door.drawDoor(x+w/8, y+h-door.h);
-
- break;
-
- case 2:
-
- door.drawDoor(x+w-w/8-door.w, y+h-door.h);
-
- break;
-
- }
-
-
-
- // draw windows
-
- int windowMargin = (w-window.w*2)/3;
-
- window.drawWindow(x+windowMargin, y+h/6);
-
- window.drawWindow(x+windowMargin*2+window.w, y+h/6);
-
-
-
- // draw roof
-
- roof.drawRoof(x, y, w, h);
-
- }
-
-
-
- // catch drawHouse method without boolean argument
-
- void drawHouse(int x, int y){
-
- // recall with required 3rd argument
-
- drawHouse(x, y, false);
-
- }
-
-}Using 1D Perlin Noise to assign location.
- - - -Original Processing.org Example: Noise1D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float xoff = 0.0;
-
-float xincrement = 0.01;
-
-
-
-void setup() {
-
- size(200,200);
-
- background(0);
-
- frameRate(30);
-
- smooth();
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- // Create an alpha blended background
-
- fill(0, 10);
-
- rect(0,0,width,height);
-
-
-
- //float n = random(0,width); // Try this line instead of noise
-
-
-
- // Get a noise value based on xoff and scale it according to the window's width
-
- float n = noise(xoff)*width;
-
-
-
- // With each cycle, increment xoff
-
- xoff += xincrement;
-
-
-
- // Draw the ellipse at the value produced by perlin noise
-
- fill(200);
-
- ellipse(n,height/2,16,16);
-
-}by Daniel Shiffman. - - - -Using 2D noise to create simple texture.
- - - -Original Processing.org Example: Noise2D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float increment = 0.02;
-
-
-
-void setup() {
-
- size(200,200);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
-
-
- // Optional: adjust noise detail here
-
- // noiseDetail(8,0.65f);
-
-
-
- loadPixels();
-
-
-
- float xoff = 0.0; // Start xoff at 0
-
-
-
- // For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
-
- for (int x = 0; x < width; x++) {
-
- xoff += increment; // Increment xoff
-
- float yoff = 0.0; // For every xoff, start yoff at 0
-
- for (int y = 0; y < height; y++) {
-
- yoff += increment; // Increment yoff
-
-
-
- // Calculate noise and scale by 255
-
- float bright = noise(xoff,yoff)*255;
-
-
-
- // Try using this line instead
-
- //float bright = random(0,255);
-
-
-
- // Set each pixel onscreen to a grayscale value
-
- pixels[x+y*width] = color(bright);
-
- }
-
- }
-
-
-
- updatePixels();
-
-}Using 3D noise to create simple animated texture. - -Here, the third dimension ('z') is treated as time.
- - - -Original Processing.org Example: Noise3D
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float increment = 0.01;
-
-// The noise function's 3rd argument, a global variable that increments once per cycle
-
-float zoff = 0.0;
-
-// We will increment zoff differently than xoff and yoff
-
-float zincrement = 0.02;
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- background(0);
-
-
-
- // Optional: adjust noise detail here
-
- // noiseDetail(8,0.65f);
-
-
-
- loadPixels();
-
-
-
- float xoff = 0.0; // Start xoff at 0
-
-
-
- // For every x,y coordinate in a 2D space, calculate a noise value and produce a brightness value
-
- for (int x = 0; x < width; x++) {
-
- xoff += increment; // Increment xoff
-
- float yoff = 0.0f; // For every xoff, start yoff at 0
-
- for (int y = 0; y < height; y++) {
-
- yoff += increment; // Increment yoff
-
-
-
- // Calculate noise and scale by 255
-
- float bright = noise(xoff,yoff,zoff)*255;
-
-
-
- // Try using this line instead
-
- //float bright = random(0,255);
-
-
-
- // Set each pixel onscreen to a grayscale value
-
- pixels[x+y*width] = color(bright,bright,bright);
-
- }
-
- }
-
- updatePixels();
-
-
-
- zoff += zincrement; // Increment zoff
-
-
-
-
-
-}by Daniel Shiffman. - - - -Using Perlin Noise to generate a wave-like pattern.
- - - -Original Processing.org Example: NoiseWave
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int xspacing = 8; // How far apart should each horizontal location be spaced
-
-int w; // Width of entire wave
-
-
-
-float yoff = 0.0f; // 2nd dimension of perlin noise
-
-float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- colorMode(RGB,255,255,255,100);
-
- smooth();
-
- w = width+16;
-
- yvalues = new float[w/xspacing];
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- calcWave();
-
- renderWave();
-
-
-
-}
-
-
-
-void calcWave() {
-
- float dx = 0.05f;
-
- float dy = 0.01f;
-
- float amplitude = 100.0f;
-
-
-
- // Increment y ('time')
-
- yoff += dy;
-
-
-
- //float xoff = 0.0; // Option #1
-
- float xoff = yoff; // Option #2
-
-
-
- for (int i = 0; i < yvalues.length; i++) {
-
- // Using 2D noise function
-
- //yvalues[i] = (2*noise(xoff,yoff)-1)*amplitude; // Option #1
-
- // Using 1D noise function
-
- yvalues[i] = (2*noise(xoff)-1)*amplitude; // Option #2
-
- xoff+=dx;
-
- }
-
-
-
-}
-
-
-
-void renderWave() {
-
- // A simple way to draw the wave with an ellipse at each location
-
- for (int x = 0; x < yvalues.length; x++) {
-
- noStroke();
-
- fill(255,50);
-
- ellipseMode(CENTER);
-
- ellipse(x*xspacing,width/2+yvalues[x],16,16);
-
- }
-
-}The noLoop() function causes draw() to only - -execute once. Without calling noLoop(), draw() - -executed continually.
- - - -Original Processing.org Example: NoLoop
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// The statements in the setup() function
-
-// execute once when the program begins
-
-void setup()
-
-{
-
- size(200, 200); // Size should be the first statement
-
- stroke(255); // Set line drawing color to white
-
- frameRate(30);
-
- noLoop();
-
-}
-
-
-
-float y = 100;
-
-
-
-// The statements in draw() are executed until the
-
-// program is stopped. Each statement is executed in
-
-// sequence and after the last line is read, the first
-
-// line is executed again.
-
-void draw()
-
-{
-
- background(0); // Set the background to black
-
- y = y - 1;
-
- if (y < 0) { y = height; }
-
- line(0, y, width, y);
-
-}by hbarragan - - - -Move the cursor across the image to change the speed and positions - -of the geometry. The class MRect defines a group of lines.
- - - -Original Processing.org Example: Objects
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-MRect r1, r2, r3, r4;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- fill(255, 204);
-
- noStroke();
-
- r1 = new MRect(1, 134.0, 0.532, 0.083*height, 10.0, 60.0);
-
- r2 = new MRect(2, 44.0, 0.166, 0.332*height, 5.0, 50.0);
-
- r3 = new MRect(2, 58.0, 0.332, 0.4482*height, 10.0, 35.0);
-
- r4 = new MRect(1, 120.0, 0.0498, 0.913*height, 15.0, 60.0);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
-
-
- r1.display();
-
- r2.display();
-
- r3.display();
-
- r4.display();
-
-
-
- r1.move(mouseX-(width/2), mouseY+(height*0.1), 30);
-
- r2.move((mouseX+(width*0.05))%width, mouseY+(height*0.025), 20);
-
- r3.move(mouseX/4, mouseY-(height*0.025), 40);
-
- r4.move(mouseX-(width/2), (height-mouseY), 50);
-
-}
-
-
-
-class MRect
-
-{
-
- int w; // single bar width
-
- float xpos; // rect xposition
-
- float h; // rect height
-
- float ypos ; // rect yposition
-
- float d; // single bar distance
-
- float t; // number of bars
-
-
-
- MRect(int iw, float ixp, float ih, float iyp, float id, float it) {
-
- w = iw;
-
- xpos = ixp;
-
- h = ih;
-
- ypos = iyp;
-
- d = id;
-
- t = it;
-
- }
-
-
-
- void move (float posX, float posY, float damping) {
-
- float dif = ypos - posY;
-
- if (abs(dif) > 1) {
-
- ypos -= dif/damping;
-
- }
-
- dif = xpos - posX;
-
- if (abs(dif) > 1) {
-
- xpos -= dif/damping;
-
- }
-
- }
-
-
-
- void display() {
-
- for (int i=0; i<t; i++) {
-
- rect(xpos+(i*(d+w)), ypos, w, height*h);
-
- }
-
- }
-
-}by REAS
Original Processing.org Example: OperatorPrecedence
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// The highest precedence is at the top of the list and
-
-// the lowest is at the bottom.
-
-// Multiplicative: * / %
-
-// Additive: + -
-
-// Relational: < > <= >=
-
-// Equality: == !=
-
-// Logical AND: &&
-
-// Logical OR: ||
-
-// Assignment: = += -= *= /= %=
-
-
-
-size(200, 200);
-
-background(51);
-
-noFill();
-
-stroke(51);
-
-
-
-stroke(204);
-
-for(int i=0; i< width-20; i+= 4) {
-
- // The 30 is added to 70 and then evaluated
-
- // if it is greater than the current value of "i"
-
- // For clarity, write as "if(i > (30 + 70)) {"
-
- if(i > 30 + 70) {
-
- line(i, 0, i, 50);
-
- }
-
-}
-
-
-
-stroke(255);
-
-// The 2 is multiplied by the 8 and the result is added to the 5
-
-// For clarity, write as "rect(5 + (2 * 8), 0, 90, 20);"
-
-rect(4 + 2 * 8, 52, 90, 48);
-
-rect((4 + 2) * 8, 100, 90, 49);
-
-
-
-stroke(153);
-
-for(int i=0; i< width; i+= 2) {
-
- // The relational statements are evaluated
-
- // first, and then the logical AND statements and
-
- // finally the logical OR. For clarity, write as:
-
- // "if(((i > 10) && (i < 50)) || ((i > 80) && (i < 160))) {"
-
- if(i > 20 && i < 50 || i > 100 && i < width-20) {
-
- line(i, 151, i, height-1);
-
- }
-
-}By Ira Greenberg - - - -Uses the arc() function to generate a pie chart from the data - -stored in an array.
- - - -Original Processing.org Example: PieChart
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(100);
-
-smooth();
-
-noStroke();
-
-
-
-int diameter = 150;
-
-int[] angs = {30, 10, 45, 35, 60, 38, 75, 67};
-
-float lastAng = 0;
-
-
-
-for (int i=0; i<angs.length; i++){
-
- fill(angs[i] * 3.0);
-
- arc(width/2, height/2, diameter, diameter, lastAng, lastAng+radians(angs[i]));
-
- lastAng += radians(angs[i]);
-
-}by Daniel Shiffman. - - - -Mouse horizontal location controls size of dots. - -Creates a simple pointillist effect using ellipses colored - -according to pixels in an image.
- - - -Original Processing.org Example: Pointillism
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/eames.jpg"; */
-
-
-
-PImage a;
-
-
-
-void setup()
-
-{
-
- a = loadImage("data/eames.jpg");
-
- size(200,200);
-
- noStroke();
-
- background(255);
-
- smooth();
-
-}
-
-
-
-void draw()
-
-{
-
- float pointillize = map(mouseX, 0, width, 2, 18);
-
- int x = int(random(a.width));
-
- int y = int(random(a.height));
-
- color pix = a.get(x, y);
-
- fill(pix, 126);
-
- ellipse(x, y, pointillize, pointillize);
-
-}Constructing a simple dimensional form with lines and rectangles. - -Changing the value of the variable 'd' scales the image. - -The four variables set the positions based on the value of 'd'.
- - - -Original Processing.org Example: PointsLines
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -int d = 40; - -int p1 = d; - -int p2 = p1+d; - -int p3 = p2+d; - -int p4 = p3+d; - - - -size(200, 200); - -background(0); - - - -// Draw gray box - -stroke(153); - -line(p3, p3, p2, p3); - -line(p2, p3, p2, p2); - -line(p2, p2, p3, p2); - -line(p3, p2, p3, p3); - - - -// Draw white points - -stroke(255); - -point(p1, p1); - -point(p1, p3); - -point(p2, p4); - -point(p3, p1); - -point(p4, p2); - -point(p4, p4);
by Daniel Shiffman. - - - -Convert a polar coordinate (r,theta) to cartesian (x,y): - -x = rcos(theta) - -y = rsin(theta)
- - - -Original Processing.org Example: PolarToCartesian
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float r;
-
-
-
-// Angle and angular velocity, accleration
-
-float theta;
-
-float theta_vel;
-
-float theta_acc;
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- smooth();
-
-
-
- // Initialize all values
-
- r = 50.0f;
-
- theta = 0.0f;
-
- theta_vel = 0.0f;
-
- theta_acc = 0.0001f;
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- // Translate the origin point to the center of the screen
-
- translate(width/2,height/2);
-
-
-
- // Convert polar to cartesian
-
- float x = r * cos(theta);
-
- float y = r * sin(theta);
-
-
-
- // Draw the ellipse at the cartesian coordinate
-
- ellipseMode(CENTER);
-
- noStroke();
-
- fill(200);
-
- ellipse(x,y,16,16);
-
-
-
- // Apply acceleration and velocity to angle (r remains static in this example)
-
- theta_vel += theta_acc;
-
- theta += theta_vel;
-
-
-
-}by Ira Greenberg. - - - -Using the convenient red(), green() - -and blue() component functions, - -generate an array of radial gradients.
- - - -Original Processing.org Example: RadialGradient
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup(){
-
- size(200, 200);
-
- background(0);
-
- smooth();
-
-
-
- // create a simple table of gradients
-
- int columns = 4;
-
- int radius = (width/columns)/2;
-
- // create some gradients
-
- for (int i=radius; i< width; i+=radius*2){
-
- for (int j =radius; j< height; j+=radius*2){
-
- createGradient(i, j, radius,
-
- color(int(random(255)), int(random(255)), int(random(255))),
-
- color(int(random(255)), int(random(255)), int(random(255))));
-
- }
-
- }
-
-}
-
-
-
-void createGradient (float x, float y, float radius, color c1, color c2){
-
- float px = 0, py = 0, angle = 0;
-
-
-
- // calculate differences between color components
-
- float deltaR = red(c2)-red(c1);
-
- float deltaG = green(c2)-green(c1);
-
- float deltaB = blue(c2)-blue(c1);
-
- // hack to ensure there are no holes in gradient
-
- // needs to be increased, as radius increases
-
- float gapFiller = 8.0;
-
-
-
- for (int i=0; i< radius; i++){
-
- for (float j=0; j<360; j+=1.0/gapFiller){
-
- px = x+cos(radians(angle))*i;
-
- py = y+sin(radians(angle))*i;
-
- angle+=1.0/gapFiller;
-
- color c = color(
-
- (red(c1)+(i)*(deltaR/radius)),
-
- (green(c1)+(i)*(deltaG/radius)),
-
- (blue(c1)+(i)*(deltaB/radius))
-
- );
-
- set(int(px), int(py), c);
-
- }
-
- }
-
- // adds smooth edge
-
- // hack anti-aliasing
-
- noFill();
-
- strokeWeight(3);
-
- ellipse(x, y, radius*2, radius*2);
-
-}Random numbers create the basis of this image. - -Each time the program is loaded the result is different.
- - - -Original Processing.org Example: Random
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-smooth();
-
-background(0);
-
-strokeWeight(10);
-
-
-
-for(int i = 0; i < width; i++) {
-
- float r = random(255);
-
- float x = random(0, width);
-
- stroke(r, 100);
-
- line(i, 0, x, height);
-
-}An image is recreated from its individual component colors. - -The many colors of the image are created through modulating the - -red, green, and blue values. This is an exageration of an LCD display.
- - - -Original Processing.org Example: Reading
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/cait.jpg"; */
-
-
-
-size(200, 200);
-
-noStroke();
-
-background(0);
-
-
-
-// Load an image from the data directory
-
-PImage c;
-
-c = loadImage("data/cait.jpg");
-
-
-
-int xoff = 0;
-
-int yoff = 0;
-
-int p = 2;
-
-int pix = p*3;
-
-
-
-
-
-for(int i = 0; i < c.width*c.height; i += 1)
-
-{
-
- int here = c.pixels[i];
-
-
-
- fill(red(here), 0, 0);
-
- rect(xoff, yoff, p, pix);
-
-
-
- fill(0, green(here), 0);
-
- rect(xoff+p, yoff, p, pix);
-
-
-
- fill(0, 0, blue(here));
-
- rect(xoff+p*2, yoff, p, pix);
-
-
-
- xoff+=pix;
-
- if(xoff >= width-pix) {
-
- xoff = 0;
-
- yoff += pix;
-
- }
-
-}A demonstration of recursion, which means functions call themselves. - -Notice how the drawCircle() function calls itself at the end of its block. - -It continues to do this until the variable "level" is equal to 1.
- - - -Original Processing.org Example: Recursion
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- noLoop();
-
-}
-
-
-
-void draw()
-
-{
-
- drawCircle(126, 170, 6);
-
-}
-
-
-
-void drawCircle(int x, int radius, int level)
-
-{
-
- float tt = 126 * level/4.0;
-
- fill(tt);
-
- ellipse(x, 100, radius*2, radius*2);
-
- if(level > 1) {
-
- level = level - 1;
-
- drawCircle(x - radius/2, radius/2, level);
-
- drawCircle(x + radius/2, radius/2, level);
-
- }
-
-}A demonstration of recursion, which means functions call themselves. - -Notice how the drawCircle() function calls itself at the end of its block. - -It continues to do this until the variable "level" is equal to 1.
- - - -Original Processing.org Example: Recursion2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- drawCircle(100, 100, 80, 8);
-
-}
-
-
-
-void drawCircle(float x, float y, int radius, int level)
-
-{
-
- float tt = 126 * level/6.0;
-
- fill(tt, 153);
-
- ellipse(x, y, radius*2, radius*2);
-
- if(level > 1) {
-
- level = level - 1;
-
- int num = int(random(2, 6));
-
- for(int i=0; i<num; i++) {
-
- float a = random(0, TWO_PI);
-
- float nx = x + cos(a) * 6.0 * level;
-
- float ny = y + sin(a) * 6.0 * level;
-
- drawCircle(nx, ny, radius/2, level);
-
- }
-
- }
-
-}The redraw() function makes draw() execute once. - -In this example, draw() is executed once every time - -the mouse is clicked.
- - - -Original Processing.org Example: Redraw
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// The statements in the setup() function
-
-// execute once when the program begins
-
-void setup()
-
-{
-
- size(200, 200); // Size should be the first statement
-
- stroke(255); // Set line drawing color to white
-
- noLoop();
-
-}
-
-
-
-float y = 100;
-
-
-
-// The statements in draw() are executed until the
-
-// program is stopped. Each statement is executed in
-
-// sequence and after the last line is read, the first
-
-// line is executed again.
-
-void draw()
-
-{
-
- background(0); // Set the background to black
-
- y = y - 1;
-
- if (y < 0) { y = height; }
-
- line(0, y, width, y);
-
-}
-
-
-
-void mousePressed()
-
-{
-
- redraw();
-
-}Each color is perceived in relation to other colors. - -The top and bottom bars each contain the same component colors, - -but a different display order causes individual colors to appear differently.
- - - -Original Processing.org Example: Relativity
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-color a, b, c, d, e;
-
-
-
-void setup() {
-
- size(200, 200);
-
- noStroke();
-
- a = color(165, 167, 20);
-
- b = color(77, 86, 59);
-
- c = color(42, 106, 105);
-
- d = color(165, 89, 20);
-
- e = color(146, 150, 127);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- drawBand(a, b, c, d, e, 0, 4);
-
- drawBand(c, a, d, b, e, height/2, 4);
-
-}
-
-
-
-void drawBand(color v, color w, color x, color y, color z, int ypos, int barWidth) {
-
- int num = 5;
-
- color[] colorOrder = { v, w, x, y, z };
-
- for(int i = 0; i < width; i += barWidth*num) {
-
- for(int j = 0; j < num; j++) {
-
- fill(colorOrder[j]);
-
- rect(i+j*barWidth, ypos, barWidth, height/2);
-
- }
-
- }
-
-}Rotating a square around the Z axis. To get the results - -you expect, send the rotate function angle parameters that are - -values between 0 and PI*2 (TWO_PI which is roughly 6.28). If you prefer to - -think about angles as degrees (0-360), you can use the radians() - -method to convert your values. For example: scale(radians(90)) - -is identical to the statement scale(PI/2).
- - - -Original Processing.org Example: Rotate
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200,200);
-
- noStroke();
-
- fill(255);
-
- frameRate(30);
-
-}
-
-
-
-float angle;
-
-float cosine;
-
-float jitter;
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- if(second()%2 == 0){
-
- jitter = (random(-0.1, 0.1));
-
- }
-
- angle = angle + jitter;
-
- cosine = cos(angle);
-
-
-
- translate(width/2, height/2);
-
- rotate(cosine);
-
- rectMode(CENTER);
-
- rect(0, 0, 115, 115);
-
-}Saturation is the strength or purity of the color and represents the - -amount of gray in proportion to the hue. A "saturated" color is pure - -and an "unsaturated" color has a large percentage of gray. - -Move the cursor vertically over each bar to alter its saturation.
- - - -Original Processing.org Example: Saturation
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int barWidth = 5;
-
-int[] saturation;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- colorMode(HSB, 360, height, height);
-
- saturation = new int[width/barWidth];
-
-}
-
-
-
-void draw()
-
-{
-
- int j = 0;
-
- for (int i=0; i<=(width-barWidth); i+=barWidth) {
-
- noStroke();
-
- if ((mouseX > i) && (mouseX < i+barWidth)) {
-
- saturation[j] = mouseY;
-
- }
-
- fill(i, saturation[j], height/1.5);
-
- rect(i, 0, barWidth, height);
-
- j++;
-
- }
-
-}by Denis Grutze. - - - -Paramenters for the scale() function are values specified - -as decimal percentages. For example, the method call scale(2.0) - -will increase the dimension of the shape by 200 percent. - -Objects always scale from the origin.
- - - -Original Processing.org Example: Scale
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float a = 0.0;
-
-float s = 0.0;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- noStroke();
-
- rectMode(CENTER);
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- a = a + 0.04;
-
- s = cos(a)*2;
-
-
-
- translate(width/2, height/2);
-
- scale(s);
-
- fill(51);
-
- rect(0, 0, 50, 50);
-
-
-
- translate(75, 0);
-
- fill(255);
-
- scale(s);
-
- rect(0, 0, 50, 50);
-
-}The draw() function creates a structure in which - -to write programs that change with time.
- - - -Original Processing.org Example: SetupDraw
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// The statements in the setup() function
-
-// execute once when the program begins
-
-void setup()
-
-{
-
- size(200, 200); // Size should be the first statement
-
- stroke(255); // Set line drawing color to white
-
- frameRate(30);
-
-}
-
-
-
-float y = 100;
-
-
-
-// The statements in draw() are executed until the
-
-// program is stopped. Each statement is executed in
-
-// sequence and after the last line is read, the first
-
-// line is executed again.
-
-void draw()
-
-{
-
- background(0); // Set the background to black
-
- y = y - 1;
-
- if (y < 0) { y = height; }
-
- line(0, y, width, y);
-
-}The basic shape primitive functions are triangle(), - -rect(), quad(), and ellipse(). Squares are made - -with rect() and circles are made with - -ellise(). Each of these functions requires a number - -of parameters which determines their position and size.
- - - -Original Processing.org Example: ShapePrimitives
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -size(200, 200); - -smooth(); - -background(0); - -noStroke(); - -fill(226); - -triangle(10, 10, 10, 200, 45, 200); - -rect(45, 45, 35, 35); - -quad(105, 10, 120, 10, 120, 200, 80, 200); - -ellipse(140, 80, 40, 40); - -triangle(160, 10, 195, 200, 160, 200);
Simple curves are drawn with simple equations. - -By using numbers with values between 0 and 1 in - -the equations, a series of elegant curves - -are created. The numbers are then scaled to fill the screen.
- - - -Original Processing.org Example: SimpleCurves
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup() {
-
- size(200, 200);
-
- colorMode(RGB, 100);
-
- background(0);
-
- noFill();
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- stroke(40);
-
- beginShape();
-
- for(int i=0; i<width; i++) {
-
- vertex(i, singraph((float)i/width)*height);
-
- }
-
- endShape();
-
-
-
- stroke(55);
-
- beginShape();
-
- for(int i=0; i<width; i++) {
-
- vertex(i, quad((float)i/width)*height);
-
- }
-
- endShape();
-
-
-
- stroke(70);
-
- beginShape();
-
- for(int i=0; i<width; i++) {
-
- vertex(i, quadHump((float)i/width)*height);
-
- }
-
- endShape();
-
-
-
- stroke(85);
-
- beginShape();
-
- for(int i=0; i<width; i++) {
-
- vertex(i, hump((float)i/width)*height);
-
- }
-
- endShape();
-
-
-
- stroke(100);
-
- beginShape();
-
- for(int i=0; i<width; i++) {
-
- vertex(i, squared((float)i/width)*height);
-
- }
-
- endShape();
-
-}
-
-
-
-float singraph(float sa) {
-
- sa = (sa - 0.5) * 1.0; //scale from -1 to 1
-
- sa = sin(sa*PI)/2 + 0.5;
-
- return sa;
-
-}
-
-
-
-float quad(float sa) {
-
- return sa*sa*sa*sa;
-
-}
-
-
-
-float quadHump(float sa) {
-
- sa = (sa - 0.5); //scale from -2 to 2
-
- sa = sa*sa*sa*sa * 16;
-
- return sa;
-
-}
-
-
-
-float hump(float sa) {
-
- sa = (sa - 0.5) * 2; //scale from -2 to 2
-
- sa = sa*sa;
-
- if(sa > 1) { sa = 1; }
-
- return 1-sa;
-
-}
-
-
-
-float squared(float sa) {
-
- sa = sa*sa;
-
- return sa;
-
-}Smoothly scaling size with the sin() function.
- - - -Original Processing.org Example: Sine
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float spin = 0.0;
-
-float diameter = 84.0;
-
-float angle;
-
-
-
-float angle_rot;
-
-int rad_points = 90;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
-}
-
-
-
-void draw()
-
-{
-
- background(153);
-
-
-
- translate(130, 65);
-
-
-
- fill(255);
-
- ellipse(0, 0, 16, 16);
-
-
-
- angle_rot = 0;
-
- fill(51);
-
-
-
- for(int i=0; i<5; i++) {
-
- pushMatrix();
-
- rotate(angle_rot + -45);
-
- ellipse(-116, 0, diameter, diameter);
-
- popMatrix();
-
- angle_rot += PI*2/5;
-
- }
-
-
-
- diameter = 34 * sin(angle) + 168;
-
-
-
- angle += 0.02;
-
- if (angle > TWO_PI) { angle = 0; }
-
-}Linear movement with sin() and cos(). - -Numbers between 0 and PI*2 (TWO_PI which is roughly 6.28) - -are put into these functions and numbers between -1 and 1 are - -returned. These values are then scaled to produce larger movements.
- - - -Original Processing.org Example: SineCosine
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int i = 45;
-
-int j = 225;
-
-float pos1 = 0;
-
-float pos2 = 0;
-
-float pos3 = 0;
-
-float pos4 = 0;
-
-int sc = 40;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
-
-
- fill(51);
-
- rect(60, 60, 80, 80);
-
-
-
- fill(255);
-
- ellipse(pos1, 36, 32, 32);
-
-
-
- fill(153);
-
- ellipse(36, pos2, 32, 32);
-
-
-
- fill(255);
-
- ellipse(pos3, 164, 32, 32);
-
-
-
- fill(153);
-
- ellipse(164, pos4, 32, 32);
-
-
-
- i += 3;
-
- j -= 3;
-
-
-
- if(i > 405) {
-
- i = 45;
-
- j = 225;
-
- }
-
-
-
- float ang1 = radians(i); // convert degrees to radians
-
- float ang2 = radians(j); // convert degrees to radians
-
- pos1 = width/2 + (sc * cos(ang1));
-
- pos2 = width/2 + (sc * sin(ang1));
-
- pos3 = width/2 + (sc * cos(ang2));
-
- pos4 = width/2 + (sc * sin(ang2));
-
-}by Daniel Shiffman. - - - -Render a simple sine wave.
- - - -Original Processing.org Example: SineWave
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int xspacing = 8; // How far apart should each horizontal location be spaced
-
-int w; // Width of entire wave
-
-
-
-float theta = 0.0; // Start angle at 0
-
-float amplitude = 75.0; // Height of wave
-
-float period = 500.0; // How many pixels before the wave repeats
-
-float dx; // Value for incrementing X, to be calculated as a function of period and xspacing
-
-float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- colorMode(RGB,255,255,255,100);
-
- smooth();
-
- w = width+16;
-
- dx = (TWO_PI / period) * xspacing;
-
- yvalues = new float[w/xspacing];
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- calcWave();
-
- renderWave();
-
-
-
-}
-
-
-
-void calcWave() {
-
- // Increment theta (try different values for 'angular velocity' here
-
- theta += 0.02;
-
-
-
- // For every x value, calculate a y value with sine function
-
- float x = theta;
-
- for (int i = 0; i < yvalues.length; i++) {
-
- yvalues[i] = sin(x)*amplitude;
-
- x+=dx;
-
- }
-
-}
-
-
-
-void renderWave() {
-
- // A simple way to draw the wave with an ellipse at each location
-
- for (int x = 0; x < yvalues.length; x++) {
-
- noStroke();
-
- fill(255,50);
-
- ellipseMode(CENTER);
-
- ellipse(x*xspacing,width/2+yvalues[x],16,16);
-
- }
-
-}by James Patterson. - - - -Demonstrates loading and displaying a transparent GIF image. - - - -Created 27 January 2003.
- - - -Original Processing.org Example: Sprite
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/teddy.gif"; */
-
-
-
-PImage teddy;
-
-
-
-float xpos;
-
-float ypos;
-
-float drag = 30.0;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- teddy = loadImage("data/teddy.gif");
-
- xpos = width/2;
-
- ypos = height/2;
-
- frameRate(60);
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- float difx = mouseX - xpos-teddy.width/2;
-
- if(abs(difx) > 1.0) {
-
- xpos = xpos + difx/drag;
-
- xpos = constrain(xpos, 0, width-teddy.width);
-
- }
-
-
-
- float dify = mouseY - ypos-teddy.height/2;
-
- if(abs(dify) > 1.0) {
-
- ypos = ypos + dify/drag;
-
- ypos = constrain(ypos, 0, height-teddy.height);
-
- }
-
-
-
- // Display the sprite at the position xpos, ypos
-
- image(teddy, xpos, ypos);
-
-}Statements are the elements that make up programs. - -The ";" (semi-colon) symbol is used to end statements. - -It is called the "statement terminator." - -Comments are used for making notes to help people better understand programs. - -A comment begins with two forward slashes ("//").
- - - -Original Processing.org Example: StatementsComments
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -// The size function is a statement that tells the computer - -// how large to make the window. - -// Each function statement has zero or more parameters. - -// Parameters are data passed into the function - -// and used as values for specifying what the computer will do. - -size(200, 200); - - - -// The background function is a statement that tells the computer - -// which color to make the background of the window - -background(102);
Move the mouse across the screen to change the position - -of the circles. The positions of the mouse are recorded - -into an array and played back every frame. Between each - -frame, the newest value are added to the end of each array - -and the oldest value is deleted.
- - - -Original Processing.org Example: StoringInput
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int num = 60;
-
-float mx[] = new float[num];
-
-float my[] = new float[num];
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- noStroke();
-
- fill(255, 153);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- // Reads throught the entire array
-
- // and shifts the values to the left
-
- for(int i=1; i<num; i++) {
-
- mx[i-1] = mx[i];
-
- my[i-1] = my[i];
-
- }
-
- // Add the new values to the end of the array
-
- mx[num-1] = mouseX;
-
- my[num-1] = mouseY;
-
-
-
- for(int i=0; i<num; i++) {
-
- ellipse(mx[i], my[i], i/2, i/2);
-
- }
-
-}The translate() function allows objects to be moved - -to any location within the window. The first parameter - -sets the x-axis offset and the second parameter sets the - -y-axis offset.
- - - -Original Processing.org Example: Translate
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float x, y;
-
-float s = 40.0;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- noStroke();
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- x = x + 0.8;
-
-
-
- if (x > width + s) {
-
- x = -s;
-
- }
-
-
-
- translate(x, height/2-s/2);
-
- fill(255);
-
- rect(-s/2, -s/2, s, s);
-
-
-
- // Transforms accumulate.
-
- // Notice how this rect moves twice
-
- // as fast as the other, but it has
-
- // the same parameter for the x-axis value
-
- translate(x, s);
-
- fill(0);
-
- rect(-s/2, -s/2, s, s);
-
-}Move the pointer left and right across the image to change - -its position. This program overlays one image over another - -by modifying the alpha value of the image with the tint() function.
- - - -Original Processing.org Example: Transparency
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-
-/* @pjs preload="data/construct.jpg,data/wash.jpg"; */
-
-PImage a, b;
-
-float offset;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- a = loadImage("data/construct.jpg"); // Load an image into the program
-
- b = loadImage("data/wash.jpg"); // Load an image into the program
-
- frameRate(60);
-
-}
-
-
-
-void draw()
-
-{
-
- image(a, 0, 0);
-
- float offsetTarget = map(mouseX, 0, width, -b.width/2 - width/2, 0);
-
- offset += (offsetTarget-offset)*0.05;
-
- tint(255, 153);
-
- image(b, offset, 20);
-
-}By Ira Greenberg - - - -Using rotate() and triangle() - -functions generate a pretty - -flower. Uncomment the line - -// rotate(rot+=radians(spin)); - -in the triBlur() function for - -a nice variation.
- - - -Original Processing.org Example: TriangleFlower
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-PVector[] p = new PVector[3];
-
-float shift = 1.0;
-
-float fade = 0;
-
-float fillCol = 0;
-
-float rot = 0;
-
-float spin = 0;
-
-
-
-void setup() {
-
- size(200, 200);
-
- background(0);
-
- smooth();
-
- fade = 255.0 / (width/2.0/shift);
-
- spin = 360.0 / (width/2.0/shift);
-
- p[0] = new PVector(-width/2, height/2);
-
- p[1] = new PVector(width/2, height/2);
-
- p[2] = new PVector(0, -height/2);
-
- noStroke();
-
- translate(width/2, height/2);
-
- triBlur();
-
-}
-
-
-
-void triBlur() {
-
- fill(fillCol);
-
- fillCol += fade;
-
- rotate(spin);
-
- // another interesting variation: uncomment the line below
-
- // rotate(rot+=radians(spin));
-
- triangle(p[0].x += shift, p[0].y -= shift/2,
-
- p[1].x -= shift, p[1].y -= shift/2,
-
- p[2].x, p[2].y += shift);
-
- if (p[0].x < 0) {
-
- // recursive call
-
- triBlur();
-
- }
-
-}By Ira Greenberg - - - -Generate a closed ring using vertex() - -function and beginShape(TRIANGLE_STRIP) - -mode. outerRad and innerRad variables - -control ring's outer/inner radii respectively. - -Trig functions generate ring.
- - - -Original Processing.org Example: TriangleStrip
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(204);
-
-smooth();
-
-
-
-int x = width/2;
-
-int y = height/2;
-
-int outerRad = 80;
-
-int innerRad = 50;
-
-float px = 0, py = 0, angle = 0;
-
-float pts = 36;
-
-float rot = 360.0/pts;
-
-
-
-beginShape(TRIANGLE_STRIP);
-
-for (int i=0; i<pts; i++) {
-
- px = x+cos(radians(angle))*outerRad;
-
- py = y+sin(radians(angle))*outerRad;
-
- angle+=rot;
-
- vertex(px, py);
-
- px = x+cos(radians(angle))*innerRad;
-
- py = y+sin(radians(angle))*innerRad;
-
- vertex(px, py);
-
- angle+=rot;
-
-}
-
-endShape();Boolean data is one bit of information. True or false. - -It is common to use Booleans with control statements to - -determine the flow of a program. In this example, when the - -boolean value "x" is true, vertical black lines are drawn and when - -the boolean value "x" is false, horizontal gray lines are drawn.
- - - -Original Processing.org Example: TrueFalse
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-boolean x = false;
-
-
-
-size(200, 200);
-
-background(0);
-
-stroke(0);
-
-
-
-for (int i = 1; i < width; i += 2)
-
-{
-
- if (i < width/2) {
-
- x = true;
-
- } else {
-
- x = false;
-
- }
-
-
-
- if (x) {
-
- stroke(255);
-
- line(i, 1, i, height-1);
-
- }
-
-
-
- if (!x) {
-
- stroke(126);
-
- line(width/2 , i, width-2, i);
-
- }
-
-}Variables are used for storing values. In this example, changing - -the values of variables 'a' and 'b' significantly change the composition.
- - - -Original Processing.org Example: Variables
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -size(200, 200); - -background(0); - -stroke(153); - - - -int a = 20; - -int b = 50; - -int c = a*8; - -int d = a*9; - -int e = b-a; - -int f = b*2; - -int g = f+e; - - - -line(a, f, b, g); - -line(b, e, b, g); - -line(b, e, d, c); - -line(a, e, d-e, c);
Variables may either have a global or local "scope". - -For example, variables declared within either the - -setup() or loop() functions may be only used in these - -functions. Global variables, variables declared outside - -of setup() and loop(), may be used anywhere within the program. - -If a local variable is declared with the same name as a - -global variable, the program will use the local variable to make - -its calculations within the current scope. Variables may be localized - -within classes, functions, and iterative statements.
- - - -Original Processing.org Example: VariableScope
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int a = 20; // Create a global variable "a"
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(51);
-
- stroke(255);
-
- noLoop();
-
-}
-
-
-
-void draw()
-
-{
-
- // Draw a line using the global variable "a"
-
- line(a, 0, a, height);
-
-
-
- // Create a new variable "a" local to the for() statement
-
- for(int a=50; a<80; a += 2) {
-
- line(a, 0, a, height);
-
- }
-
-
-
- // Create a new variable "a" local to the loop() method
-
- int a = 100;
-
- // Draw a line using the new local variable "a"
-
- line(a, 0, a, height);
-
-
-
- // Make a call to the custom function drawAnotherLine()
-
- drawAnotherLine();
-
-
-
- // Make a call to the custom function setYetAnotherLine()
-
- drawYetAnotherLine();
-
-}
-
-
-
-void drawAnotherLine()
-
-{
-
- // Create a new variable "a" local to this method
-
- int a = 185;
-
- // Draw a line using the local variable "a"
-
- line(a, 0, a, height);
-
-}
-
-
-
-void drawYetAnotherLine()
-
-{
-
- // Because no new local variable "a" is set,
-
- // this lines draws using the original global
-
- // variable "a" which is set to the value 20.
-
- line(a+2, 0, a+2, height);
-
-}The beginShape() function begins recording vertices - -for a shape and endShape() stops recording. - -A vertex is a location in space specified by X, Y, - -and sometimes Z coordinates. After calling the beginShape() function, - -a series of vertex() functions must follow. - -To stop drawing the shape, call the endShape() functions.
- - - -Original Processing.org Example: Vertices
-
-
// All Examples Written by Casey Reas and Ben Fry - -// unless otherwise stated. - -size(200, 200); - -background(0); - -noFill(); - - - -stroke(102); - -beginShape(); - -curveVertex(168, 182); - -curveVertex(168, 182); - -curveVertex(136, 38); - -curveVertex(42, 34); - -curveVertex(64, 200); - -curveVertex(64, 200); - -endShape(); - - - -stroke(51); - -beginShape(LINES); - -vertex(60, 40); - -vertex(160, 10); - -vertex(170, 150); - -vertex(60, 150); - -endShape(); - - - -stroke(126); - -beginShape(); - -vertex(60, 40); - -bezierVertex(160, 10, 170, 150, 60, 150); - -endShape(); - - - -stroke(255); - -beginShape(POINTS); - -vertex(60, 40); - -vertex(160, 10); - -vertex(170, 150); - -vertex(60, 150); - -endShape();
by Ira Greenberg. - - - -Generate a gradient along a sin() wave.
- - - -Original Processing.org Example: WaveGradient
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(200,200,200);
-
-float angle = 0;
-
-float px = 0, py = 0;
-
-float amplitude = 30;
-
-float frequency = 0;
-
-float fillGap = 2.5;
-
-color c;
-
-
-
-for (int i =- 75; i < height+75; i++){
-
- // reset angle to 0, so waves stack properly
-
- angle = 0;
-
- // increasing frequency causes more gaps
-
- frequency+=.006;
-
- for (float j=0; j<width+75; j++){
-
- py = i+sin(radians(angle))*amplitude;
-
- angle+=frequency;
-
- c = color(abs(py-i)*255/amplitude, 255-abs(py-i)*255/amplitude, j*(255.0/(width+50)));
-
- // hack to fill gaps. Raise value of fillGap
-
- // if you increase frequency
-
- for (int filler = 0; filler<fillGap; filler++){
-
- set(int(j-filler), int(py)-filler, c);
-
- set(int(j), int(py), c);
-
- set(int(j+filler), int(py)+filler, c);
-
- }
-
- }
-
-}The 'width' and 'height' variables contain the width and height - -of the display window as defined in the size() function.
- - - -Original Processing.org Example: WidthHeight
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(127);
-
-noStroke();
-
-for(int i=0; i<height; i+=20) {
-
- fill(0);
-
- rect(0, i, width, 10);
-
- fill(255);
-
- rect(i, 0, 10, height);
-
-}The text() function is used for writing words to the screen.
- - - -Original Processing.org Example: Words
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-size(200, 200);
-
-background(102);
-
-
-
-// Load the font. Fonts are located within the
-
-// main Processing directory/folder and they
-
-// must be placed within the data directory
-
-// of your sketch for them to load
-
-PFont fontA = loadFont("Arial");
-
-
-
-// Set the font and its size (in units of pixels)
-
-textFont(fontA, 32);
-
-
-
-int x = 30;
-
-
-
-// Use fill() to change the value or color of the text
-
-fill(0);
-
-text("ichi", x, 60);
-
-fill(51);
-
-text("ni", x, 95);
-
-fill(204);
-
-text("san", x, 130);
-
-fill(255);
-
-text("shi", x, 165);Demonstrations built from scratch or found in the wild.
- -Move mouse to view line intersections.
- -Original Example: Line Intersections
-
int DONT_INTERSECT = 0;
-int COLLINEAR = 1;
-int DO_INTERSECT = 2;
-
-float x =0, y=0;
-
-void setup(){
- size(200,200);
- fill(255,0,0);
-}
-
-void draw(){
-
- int intersected;
-
- background(255);
-
- // lignes
- stroke(0);
-
- // ligne fixe
- line(20,height/2, width-20, (height/2)-20);
-
- // ligne en mouvement
- line(10,10,mouseX, mouseY);
-
- intersected = intersect(20, height/2, width-20, (height/2)-20, 10, 10, mouseX, mouseY);
-
- // dessiner le point d'intersection
- noStroke();
- if (intersected == DO_INTERSECT) ellipse(x, y, 5, 5);
-
-}
-
-
-int intersect(float x1, float y1, float x2, float y2, float x3, float y3, float x4, float y4){
-
- float a1, a2, b1, b2, c1, c2;
- float r1, r2 , r3, r4;
- float denom, offset, num;
-
- // Compute a1, b1, c1, where line joining points 1 and 2
- // is "a1 x + b1 y + c1 = 0".
- a1 = y2 - y1;
- b1 = x1 - x2;
- c1 = (x2 * y1) - (x1 * y2);
-
- // Compute r3 and r4.
- r3 = ((a1 * x3) + (b1 * y3) + c1);
- r4 = ((a1 * x4) + (b1 * y4) + c1);
-
- // Check signs of r3 and r4. If both point 3 and point 4 lie on
- // same side of line 1, the line segments do not intersect.
- if ((r3 != 0) && (r4 != 0) && same_sign(r3, r4)){
- return DONT_INTERSECT;
- }
-
- // Compute a2, b2, c2
- a2 = y4 - y3;
- b2 = x3 - x4;
- c2 = (x4 * y3) - (x3 * y4);
-
- // Compute r1 and r2
- r1 = (a2 * x1) + (b2 * y1) + c2;
- r2 = (a2 * x2) + (b2 * y2) + c2;
-
- // Check signs of r1 and r2. If both point 1 and point 2 lie
- // on same side of second line segment, the line segments do
- // not intersect.
- if ((r1 != 0) && (r2 != 0) && (same_sign(r1, r2))){
- return DONT_INTERSECT;
- }
-
- //Line segments intersect: compute intersection point.
- denom = (a1 * b2) - (a2 * b1);
-
- if (denom == 0) {
- return COLLINEAR;
- }
-
- if (denom < 0){
- offset = -denom / 2;
- }
- else {
- offset = denom / 2 ;
- }
-
- // The denom/2 is to get rounding instead of truncating. It
- // is added or subtracted to the numerator, depending upon the
- // sign of the numerator.
- num = (b1 * c2) - (b2 * c1);
- if (num < 0){
- x = (num - offset) / denom;
- }
- else {
- x = (num + offset) / denom;
- }
-
- num = (a2 * c1) - (a1 * c2);
- if (num < 0){
- y = ( num - offset) / denom;
- }
- else {
- y = (num + offset) / denom;
- }
-
- // lines_intersect
- return DO_INTERSECT;
-}
-
-
-boolean same_sign(float a, float b){
-
- return (( a * b) >= 0);
-}A dynamically-generated bar chart. Move mouse to view dynamic pie chart.
- - - - - int xspacing = 16; // How far apart should each horizontal location be spaced
-int w; // Width of entire wave
-int maxwaves = 4; // total # of waves to add together
-int total = 0;
-
-float theta = 0.0f;
-float[] amplitude = new float[maxwaves]; // Height of wave
-float[] dx = new float[maxwaves]; // Value for incrementing X, to be calculated as a function of period and xspacing
-float[] yvalues; // Using an array to store height values for the wave (not entirely necessary)
-float[] last;
-
-int pos;
-int rel;
-int numLines;
-int idealLines;
-int idealSpacing;
-int targetX;
-
-void setup() {
- size(600, 150);
- //frameRate(24);
- colorMode(RGB,255,255,255,100);
- //background(0);
- smooth();
- w = width+16;
-
- for (int i = 0; i < maxwaves; i++) {
- amplitude[i] = random(20,30);
- float period = random(100,300); // How many pixels before the wave repeats
- dx[i] = (TWO_PI / period) * xspacing;
- }
-
- last = new float[maxwaves];
- idealLines = numLines = int(w/xspacing);
- idealSpacing = xspacing;
- yvalues = new float[numLines];
-}
-
-void draw() {
- pos = constrain(mouseX, 75, width-75);
- rel = 1 - ((pos - 75) / (width - 150));
-
- //background(0);
- fill(0, 10 + ((1 - rel) * 100));
- rect(0, 0, width, height);
-
- //numLines = idealLines + ((1 - rel) * idealLines);
- //xspacing = idealSpacing - (((1 - rel) * idealSpacing) / 2);
-
- calcWave();
- renderWave();
- renderChart();
-}
-
-void calcWave() {
- // Increment theta (try different values for 'angular velocity' here
- theta += 0.02;
-
- // Set all height values to zero
- for (int i = 0; i < numLines; i++) {
- yvalues[i] = 0.0f;
- }
-
- total = 0;
-
- // Accumulate wave height values
- for (int j = 0; j < maxwaves; j++) {
- float x = theta;
- last[j] = 0;
-
- for (int i = 0; i < numLines; i++) {
- // Every other wave is cosine instead of sine
- int diff = j % 2 == 0 ? sin(x) : cos(x);
- int add = diff*amplitude[j];
-
- last[j] += add;
-
- yvalues[i] += add;
-
- total += add;
-
- x+=dx[j]; // - (((1 - rel) * dx[j]) / 2);
- }
- }
-}
-
-void renderWave() {
- noStroke();
-
- fill(254,60,0, 120 * rel);
- beginShape();
- vertex(0,height);
- for (int x = 0; x < numLines; x++) {
- vertex(x*xspacing,height/2+yvalues[x]+-5);
- vertex((x*xspacing) + 10,height/2+yvalues[x]-5);
- }
- vertex(width,height);
- endShape(CLOSE);
-
- fill(255,0,0, 120 * rel);
- beginShape();
- vertex(0,height);
- for (int x = 0; x < numLines; x++) {
- vertex(x*xspacing,height/2+yvalues[x]);
- vertex((x*xspacing) + 10,height/2+yvalues[x]);
- }
- vertex(width,height);
- endShape(CLOSE);
-
- //fill(255,0,0,255 - ((x/numLines)*200));
- //rect(x*xspacing,height/2+yvalues[x],10,height*2);
- // - ((1-rel) * 4)
-
- for (int x = 0; x < numLines; x++) {
- fill(255,0,0,255 - ((x/numLines)*200));
- rect(x*xspacing,height/2+yvalues[x],10,height*2);
- // - ((1-rel) * 4)
- }
-}
-
-void renderChart() {
- int h = 0;
-
- for (int i=0; iA snake that follows your cursor.
- -Snake
-
-// @pjs preload must be used to preload the image so that it will be available when used in the sketch
-/* @pjs preload="data/dirt.jpg"; */
-
-float[] x = new float[20];
-float[] y = new float[20];
-float segLength = 10;
-PImage a;
-
-void setup() {
- size(320, 240);
- smooth();
- a = loadImage("data/dirt.jpg");
-}
-
-void draw() {
- background(226);
- image( a, 0, 0 );
- dragSegment(0, mouseX - 8, mouseY - 8);
- for(int i=0; i < x.length-1; i++) {
- dragSegment(i+1, x[i], y[i]);
- }
-}
-
-void dragSegment(int i, float xin, float yin) {
- float dx = xin - x[i];
- float dy = yin - y[i];
- float angle = atan2(dy, dx);
- x[i] = xin - cos(angle) * segLength;
- y[i] = yin - sin(angle) * segLength;
- //stroke(23, 79, 4, 220);
-
- pushMatrix();
- translate(x[i], y[i]);
- rotate(angle);
-
- color c;
-
- if ( i % 3 == 1 )
- c = color(0, 0, 0, 255);
- else if ( i % 3 == 2 )
- c = color(255, 255, 0, 255);
- else
- c = color(255, 0, 0, 255);
-
- stroke( c );
- strokeWeight(10);
- line(0, 0, segLength, 0);
-
- if ( i == x.length - 1 )
- {
- fill( c );
- noStroke();
- beginShape(TRIANGLES);
- vertex(0, 5);
- vertex(-2 * segLength, 0);
- vertex(0, -5);
- endShape();
- }
-
- if ( i == 0 )
- {
- // stroke(0, 255);
- noStroke();
- fill(0, 255);
- ellipse(segLength, -2, 3, 3);
- ellipse(segLength, 2, 3, 3);
- //point(segLength, -2);
- //point(segLength, 2);
- }
-
- popMatrix();
-}A brief look at the structure of a Processing sketch reveals how easy it is to program interactive visualizations.
- -As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.
- -The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.
- -To the right is a basic example of Processing.js in action. If you take a moment to read the source code below, you will see that a few lines of Processing code can go a very long way. You may also notice that Processing syntax is almost identical to Java.
- -{% highlight java %} -// Global variables -float radius = 50.0; -int X, Y; -int nX, nY; -int delay = 16; - -// Setup the Processing Canvas -void setup(){ - size( 200, 200 ); - strokeWeight( 10 ); - frameRate( 15 ); - X = width / 2; - Y = height / 2; - nX = X; - nY = Y; -} - -// Main draw loop -void draw(){ - - radius = radius + sin( frameCount / 4 ); - - // Track circle to new destination - X+=(nX-X)/delay; - Y+=(nY-Y)/delay; - - // Fill canvas grey - background( 100 ); - - // Set fill-color to blue - fill( 0, 121, 184 ); - - // Set stroke-color white - stroke(255); - - // Draw circle - ellipse( X, Y, radius, radius ); -} - - -// Set circle's next destination -void mouseMoved(){ - nX = mouseX; - nY = mouseY; -} -{% endhighlight %} - -Adding interactivity to your visualization is incredibly simple. There are a host of -built-in functions such as: mousePressed(), which controls the -behavior of your script on click events; or mouseMoved() which -defines what should happen as your mouse moves across the Canvas.
- -Processing.js also tracks a range of pre-defined variables like key, which -stores the value of the last key pressed; or mouseX and -mouseY, which store the last recorded position of the mouse -pointer.
- -There are two ways of implementing processing. The first way is the recommended one. -Let me illustrate both of these:
- -First Method
-Needed files:
-The anything.html file will look like:
--<script src="processing.js"></script> -<canvas data-processing-sources="anything.pde"></canvas> -
The anything.pde file will look like:
-
-void setup()
-{
- size(200,200);
- background(125);
- fill(255);
- noLoop();
- PFont fontA = loadFont("courier");
- textFont(fontA, 14);
-}
-
-void draw(){
- text("Hello Web!",20,20);
- println("Hello ErrorLog!");
-}
-Second Method
-Needed files:
-In this method the anything.html file will look like:
-
-<script src="processing.js"></script>
-<script type="text/processing" data-processing-target="mycanvas">
-void setup()
-{
- size(200,200);
- background(125);
- fill(255);
- noLoop();
- PFont fontA = loadFont("courier");
- textFont(fontA, 14);
-}
-
-void draw(){
- text("Hello Web!",20,20);
- println("Hello ErrorLog!");
-}
-</script>
-<canvas id="mycanvas"></canvas>
-Notice no data-processing-sources attribute on the canvas?
- -If you love JavaScript and want to write processing examples with it you can. Here are -a couple of examples that showcase how to do this.
- -
-<html>
-<head>
- <script src="processing.js"></script>
-</head>
-<body><h1>Processing.js</h1>
-<h2>Simple processing.js via JavaScript</h2>
-<p>Clock</p>
-
-<p><canvas id="canvas1" width="200" height="200"></canvas></p>
-
-<script id="script1" type="text/javascript">
-
-// Simple way to attach js code to the canvas is by using a function
-function sketchProc(processing) {
- // Override draw function, by default it will be called 60 times per second
- processing.draw = function() {
- // determine center and max clock arm length
- var centerX = processing.width / 2, centerY = processing.height / 2;
- var maxArmLength = Math.min(centerX, centerY);
-
- function drawArm(position, lengthScale, weight) {
- processing.strokeWeight(weight);
- processing.line(centerX, centerY,
- centerX + Math.sin(position * 2 * Math.PI) * lengthScale * maxArmLength,
- centerY - Math.cos(position * 2 * Math.PI) * lengthScale * maxArmLength);
- }
-
- // erase background
- processing.background(224);
-
- var now = new Date();
-
- // Moving hours arm by small increments
- var hoursPosition = (now.getHours() % 12 + now.getMinutes() / 60) / 12;
- drawArm(hoursPosition, 0.5, 5);
-
- // Moving minutes arm by small increments
- var minutesPosition = (now.getMinutes() + now.getSeconds() / 60) / 60;
- drawArm(minutesPosition, 0.80, 3);
-
- // Moving hour arm by second increments
- var secondsPosition = now.getSeconds() / 60;
- drawArm(secondsPosition, 0.90, 1);
- };
-
-}
-
-var canvas = document.getElementById("canvas1");
-// attaching the sketchProc function to the canvas
-var p = new Processing(canvas, sketchProc);
-// p.exit(); to detach it
-</script>
-</body>
-</html>
-Here is another example that uses 3D
-
-<html>
-<head>
- <script src="processing.js"></script>
-</head>
-<body><h1>Processing.js</a></h1>
-<h2>Advanced processing.js via JavaScript</h2>
-<p>Processing.js Cube</p>
-<em>Note: runs via a web server or requres local files access in the web browser settings.</em>
-Converted to the JavaScript language from the Processing code<br>
-Original souce code:<a href="http://processing.org/learning/3d/texturecube.html">TexturedCube</a>
-by Dave Bollinger.
-
-<canvas id="canvas1" width="200" height="200"></canvas>
-
-<script id="script1" type="text/javascript">
-
-// Attaching js code to the canvas by using a sketch object
-
-var sketch = new Processing.Sketch();
-// define 3D context
-sketch.use3DContext = true;
-// preload the images
-sketch.imageCache.add("pjs.png");
-// attach function (also, can be specified as the single parameter
-// in the Processing.Sketch object constructor)
-sketch.attachFunction = function(processing) {
- var tex;
- var rotx = Math.PI/4;
- var roty = Math.PI/4;
-
- processing.setup = function() {
- processing.size(640, 360, processing.P3D);
- tex = processing.loadImage("pjs.png");
- processing.textureMode(processing.NORMALIZED);
- processing.fill(255);
- processing.stroke(processing.color(44,48,32));
- };
-
- processing.draw = function() {
- processing.background(0);
- processing.noStroke();
- processing.translate(processing.width/2.0,
- processing.height/2.0, -100);
- processing.rotateX(rotx);
- processing.rotateY(roty);
- processing.scale(90);
- texturedCube(tex);
- }
-
- function texturedCube(tex) {
- processing.beginShape(processing.QUADS);
- processing.texture(tex);
-
- // Given one texture and six faces, we can easily set up the uv coordinates
- // such that four of the faces tile "perfectly" along either u or v, but the other
- // two faces cannot be so aligned. This code tiles "along" u, "around" the X/Z faces
- // and fudges the Y faces - the Y faces are arbitrarily aligned such that a
- // rotation along the X axis will put the "top" of either texture at the "top"
- // of the screen, but is not otherwised aligned with the X/Z faces. (This
- // just affects what type of symmetry is required if you need seamless
- // tiling all the way around the cube)
-
- // +Z "front" face
- processing.vertex(-1, -1, 1, 0, 0);
- processing.vertex( 1, -1, 1, 1, 0);
- processing.vertex( 1, 1, 1, 1, 1);
- processing.vertex(-1, 1, 1, 0, 1);
-
- // -Z "back" face
- processing.vertex( 1, -1, -1, 0, 0);
- processing.vertex(-1, -1, -1, 1, 0);
- processing.vertex(-1, 1, -1, 1, 1);
- processing.vertex( 1, 1, -1, 0, 1);
-
- // +Y "bottom" face
- processing.vertex(-1, 1, 1, 0, 0);
- processing.vertex( 1, 1, 1, 1, 0);
- processing.vertex( 1, 1, -1, 1, 1);
- processing.vertex(-1, 1, -1, 0, 1);
-
- // -Y "top" face
- processing.vertex(-1, -1, -1, 0, 0);
- processing.vertex( 1, -1, -1, 1, 0);
- processing.vertex( 1, -1, 1, 1, 1);
- processing.vertex(-1, -1, 1, 0, 1);
-
- // +X "right" face
- processing.vertex( 1, -1, 1, 0, 0);
- processing.vertex( 1, -1, -1, 1, 0);
- processing.vertex( 1, 1, -1, 1, 1);
- processing.vertex( 1, 1, 1, 0, 1);
-
- // -X "left" face
- processing.vertex(-1, -1, -1, 0, 0);
- processing.vertex(-1, -1, 1, 1, 0);
- processing.vertex(-1, 1, 1, 1, 1);
- processing.vertex(-1, 1, -1, 0, 1);
-
- processing.endShape();
- }
-
- // mouse event
- processing.mouseDragged = function() {
- var rate = 0.01;
- rotx += (processing.pmouseY-processing.mouseY) * rate;
- roty += (processing.mouseX-processing.pmouseX) * rate;
- };
-};
-
-var canvas = document.getElementById("canvas1");
-// attaching the sketch to the canvas
-var p = new Processing(canvas, sketch);
-
-</script>
-Read Quick Start Guides for Processing Developers -or JavaScript Developers, to -learn about the Processing language.
- -
A live, molten, bar and pie chart.
- 
A snake that chases your mouse cursor.
-
- All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
-
Using buffers to draw multiple, simultaneous, canvases.(Firefox 3, Opera 9.5)
- 
Simple, but elegant, shape drawing.
- 
Drawing lots of simultaneous circles to create an impressive effect.
- 
Eyes following your mouse cursor!
- 
Simple implementation, beautiful result.
- 
Generating smooth waves.
- 
Re-sampling the points of an image.
- 
Dynamically drawing multiple, dynamically-generated, transparent, images.(Firefox, Opera 9.5)
- 
Scaling and moving blocks based on mouse position.
- 
Random Ellipses drawn using bezier curves.
- 
Remembering the movement of a mouse.
- 
Drag, Drop, and Hover with mouse.
- 
Translating keyboard presses into colors.
- 
A simple clock.
-
- All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.
-
Multiple draggable handles.
- 
Wolfram's Cellular Automata
- 
Conway's Game of Life
- 
Animator (builds an animation out of drawing).
- 
Drawing a pattern with shapes.
- 
Dynamically pull colors from an image.
- 
Adjusting brightness on an image.(Firefox, Opera 9.5)
- 
Scanning the pixels of an image.(Firefox, Opera 9.5)
- 
Drag image portions using a scrollbar.
- 
Dynamic histogram drawn over an image.
- 
Bouncing, colliding, bubbles.
- 
A sort-of pong clone.
- 
Ball bouncing on a dynamic surface.
- 
Ball bouncing on a rocky surface.
- 
Flexible spring.
- 
Springy circles
- 
Bouncing physics and joints.
- 
Simple particle system.
- 
Birds flocking together.
- 
Koch Fractal
- 
Mandelbrot Fractal(Firefox, Opera 9.5)
- 
Dynamic Tree Fractal
- 
Soft Body Dynamics
-
- by James Patterson. - - - -Press the mouse button to change animations. - -Demonstrates loading, displaying, and animating GIF images. - -It would be easy to write a program to display - -animated GIFs, but would not allow as much control over - -the display sequence and rate of display.
- - - -Original Processing.org Example: AnimatedSprite
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/PT_Shifty_0000.gif, data/PT_Shifty_0001.gif, data/PT_Shifty_0002.gif,
-
-data/PT_Shifty_0003.gif, data/PT_Shifty_0004.gif, data/PT_Shifty_0005.gif,
-
-data/PT_Shifty_0006.gif, data/PT_Shifty_0007.gif, data/PT_Shifty_0008.gif,
-
-data/PT_Shifty_0009.gif, data/PT_Shifty_0010.gif, data/PT_Shifty_0011.gif,
-
-data/PT_Shifty_0012.gif, data/PT_Shifty_0013.gif, data/PT_Shifty_0014.gif,
-
-data/PT_Shifty_0015.gif, data/PT_Shifty_0016.gif, data/PT_Shifty_0017.gif,
-
-data/PT_Shifty_0018.gif, data/PT_Shifty_0019.gif, data/PT_Shifty_0020.gif,
-
-data/PT_Shifty_0021.gif, data/PT_Shifty_0022.gif, data/PT_Shifty_0023.gif,
-
-data/PT_Shifty_0024.gif, data/PT_Shifty_0025.gif, data/PT_Shifty_0026.gif,
-
-data/PT_Shifty_0027.gif, data/PT_Shifty_0028.gif, data/PT_Shifty_0029.gif,
-
-data/PT_Shifty_0030.gif, data/PT_Shifty_0031.gif, data/PT_Shifty_0032.gif,
-
-data/PT_Shifty_0033.gif, data/PT_Shifty_0034.gif, data/PT_Shifty_0035.gif,
-
-data/PT_Shifty_0036.gif, data/PT_Shifty_0037.gif, data/PT_Teddy_0000.gif,
-
-data/PT_Teddy_0001.gif, data/PT_Teddy_0002.gif, data/PT_Teddy_0003.gif,
-
-data/PT_Teddy_0004.gif, data/PT_Teddy_0005.gif, data/PT_Teddy_0006.gif,
-
-data/PT_Teddy_0007.gif, data/PT_Teddy_0008.gif, data/PT_Teddy_0009.gif,
-
-data/PT_Teddy_0010.gif, data/PT_Teddy_0011.gif, data/PT_Teddy_0012.gif,
-
-data/PT_Teddy_0013.gif, data/PT_Teddy_0014.gif, data/PT_Teddy_0015.gif,
-
-data/PT_Teddy_0016.gif, data/PT_Teddy_0017.gif, data/PT_Teddy_0018.gif,
-
-data/PT_Teddy_0019.gif, data/PT_Teddy_0020.gif, data/PT_Teddy_0021.gif,
-
-data/PT_Teddy_0022.gif, data/PT_Teddy_0023.gif, data/PT_Teddy_0024.gif,
-
-data/PT_Teddy_0025.gif, data/PT_Teddy_0026.gif, data/PT_Teddy_0027.gif,
-
-data/PT_Teddy_0028.gif, data/PT_Teddy_0029.gif, data/PT_Teddy_0030.gif,
-
-data/PT_Teddy_0031.gif, data/PT_Teddy_0032.gif, data/PT_Teddy_0033.gif,
-
-data/PT_Teddy_0034.gif, data/PT_Teddy_0035.gif, data/PT_Teddy_0036.gif,
-
-data/PT_Teddy_0037.gif, data/PT_Teddy_0038.gif, data/PT_Teddy_0039.gif,
-
-data/PT_Teddy_0040.gif, data/PT_Teddy_0041.gif, data/PT_Teddy_0042.gif,
-
-data/PT_Teddy_0043.gif, data/PT_Teddy_0044.gif, data/PT_Teddy_0045.gif,
-
-data/PT_Teddy_0046.gif, data/PT_Teddy_0047.gif, data/PT_Teddy_0048.gif,
-
-data/PT_Teddy_0049.gif, data/PT_Teddy_0050.gif, data/PT_Teddy_0051.gif,
-
-data/PT_Teddy_0052.gif, data/PT_Teddy_0053.gif, data/PT_Teddy_0054.gif,
-
-data/PT_Teddy_0055.gif, data/PT_Teddy_0056.gif, data/PT_Teddy_0057.gif,
-
-data/PT_Teddy_0058.gif, data/PT_Teddy_0059.gif"; */
-
-
-
-Animation animation1, animation2;
-
-float xpos, ypos;
-
-float drag = 30.0;
-
-
-
-void setup() {
-
- size(200, 200);
-
- background(255, 204, 0);
-
- frameRate(24);
-
- animation1 = new Animation("PT_Shifty_", 38);
-
- animation2 = new Animation("PT_Teddy_", 60);
-
-}
-
-
-
-void draw() {
-
- float difx = mouseX - xpos;
-
- if (abs(difx) > 1.0) {
-
- xpos = xpos + difx/drag;
-
- xpos = constrain(xpos, 0, width);
-
- }
-
-
-
- // Display the sprite at the position xpos, ypos
-
- if (mousePressed) {
-
- background(153, 153, 0);
-
- animation1.display(xpos-animation1.getWidth()/2, ypos);
-
- } else {
-
- background(255, 204, 0);
-
- animation2.display(xpos-animation1.getWidth()/2, ypos);
-
- }
-
-}
-
-
-
-
-
-
-
-// Class for animating a sequence of GIFs
-
-
-
-class Animation {
-
- PImage[] images;
-
- int imageCount;
-
- int frame;
-
-
-
- Animation(String imagePrefix, int count) {
-
- imageCount = count;
-
- images = new PImage[imageCount];
-
-
-
- for (int i = 0; i < imageCount; i++) {
-
- // Use nf() to number format 'i' into four digits
-
- String filename = "data/" + imagePrefix + nf(i, 4) + ".gif";
-
- images[i] = loadImage(filename);
-
- }
-
- }
-
-
-
- void display(float xpos, float ypos) {
-
- frame = (frame+1) % imageCount;
-
- image(images[frame], xpos, ypos);
-
- }
-
-
-
- int getWidth() {
-
- return images[0].width;
-
- }
-
-}A simple animation tool that displays a continuous cycle of - -twelve images. Each image is displayed for 100 milliseconds - -(one tenth of a second) to create animation. While each image - -is displayed, it's possible to draw directly into it by - -pressing the mouse and moving the cursor. Start drawing to get - -it started.
- - - -Original Processing.org Example: Animator
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int currentFrame = 0;
-
-PImage[] frames = new PImage[12];
-
-int lastTime = 0;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- strokeWeight(4);
-
- smooth();
-
- background(204);
-
- for (int i = 0; i < frames.length; i++) {
-
- frames[i] = get(); // Create a blank frame
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- int currentTime = millis();
-
- if (currentTime > lastTime+100) {
-
- nextFrame();
-
- lastTime = currentTime;
-
- }
-
- if (mousePressed == true) {
-
- line(pmouseX, pmouseY, mouseX, mouseY);
-
- }
-
-}
-
-
-
-void nextFrame()
-
-{
-
- frames[currentFrame] = get(); // Get the display window
-
- currentFrame++; // Increment to next frame
-
- if (currentFrame >= frames.length) {
-
- currentFrame = 0;
-
- }
-
- image(frames[currentFrame], 0, 0);
-
-}Bluring half of an image by processing it through a - -low-pass filter.
- - - -Original Processing.org Example: Blur
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/trees.jpg"; */
-
-
-
-size(200, 200);
-
-PImage a; // Declare variable "a" of type PImage
-
-a = loadImage("data/trees.jpg"); // Load the images into the program
-
-
-
-float v = 1.0/9.0;
-
-float[][] kernel = { { v, v, v },
-
- { v, v, v },
-
- { v, v, v } };
-
-
-
-PImage img = loadImage("data/trees.jpg"); // Load the original image
-
-image(a, 0, 0); // Displays the image from point (0,0)
-
-img.loadPixels();
-
-// Create an opaque image of the same size as the original
-
-PImage edgeImg = createImage(img.width, img.height, RGB);
-
-// Loop through every pixel in the image.
-
-for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
-
- for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
-
- float sum = 0; // Kernel sum for this pixel
-
- for (int ky = -1; ky <= 1; ky++) {
-
- for (int kx = -1; kx <= 1; kx++) {
-
- // Calculate the adjacent pixel for this kernel point
-
- int pos = (y + ky)*width + (x + kx);
-
- // Image is grayscale, red/green/blue are identical
-
- float val = red(img.pixels[pos]);
-
- // Multiply adjacent pixels based on the kernel values
-
- sum += kernel[ky+1][kx+1] * val;
-
- }
-
- }
-
- // For this pixel in the new image, set the gray value
-
- // based on the sum from the kernel
-
- edgeImg.pixels[y*img.width + x] = color(sum);
-
- }
-
-}
-
-// State that there are changes to edgeImg.pixels[]
-
-edgeImg.updatePixels();
-
-image(edgeImg, 100, 0); // Draw the new imageWhen the shape hits the edge of the window, it reverses its direction.
- - - -Original Processing.org Example: Bounce
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int size = 60; // Width of the shape
-
-float xpos, ypos; // Starting position of shape
-
-
-
-float xspeed = 2.8; // Speed of the shape
-
-float yspeed = 2.2; // Speed of the shape
-
-
-
-int xdirection = 1; // Left or Right
-
-int ydirection = 1; // Top to Bottom
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- frameRate(30);
-
- smooth();
-
- // Set the starting position of the shape
-
- xpos = width/2;
-
- ypos = height/2;
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
-
-
- // Update the position of the shape
-
- xpos = xpos + ( xspeed * xdirection );
-
- ypos = ypos + ( yspeed * ydirection );
-
-
-
- // Test to see if the shape exceeds the boundaries of the screen
-
- // If it does, reverse its direction by multiplying by -1
-
- if (xpos > width-size || xpos < 0) {
-
- xdirection *= -1;
-
- }
-
- if (ypos > height-size || ypos < 0) {
-
- ydirection *= -1;
-
- }
-
-
-
- // Draw the shape
-
- ellipse(xpos+size/2, ypos+size/2, size, size);
-
-}Based on code from Keith Peters (www.bit-101.com). - - - -Multiple-object collision.
- - - -Original Processing.org Example: BouncyBubbles
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int numBalls = 12;
-
-float spring = 0.05;
-
-float gravity = 0.03;
-
-Ball[] balls = new Ball[numBalls];
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- for (int i = 0; i < numBalls; i++) {
-
- balls[i] = new Ball(random(width), random(height), random(20, 40), i, balls);
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- for (int i = 0; i < numBalls; i++) {
-
- balls[i].collide();
-
- balls[i].move();
-
- balls[i].display();
-
- }
-
-}
-
-
-
-class Ball {
-
- float x, y;
-
- float diameter;
-
- float vx = 0;
-
- float vy = 0;
-
- int id;
-
- Ball[] others;
-
-
-
- Ball(float xin, float yin, float din, int idin, Ball[] oin) {
-
- x = xin;
-
- y = yin;
-
- diameter = din;
-
- id = idin;
-
- others = oin;
-
- }
-
-
-
- void collide() {
-
- for (int i = id + 1; i < numBalls; i++) {
-
- float dx = others[i].x - x;
-
- float dy = others[i].y - y;
-
- float distance = sqrt(dx*dx + dy*dy);
-
- float minDist = others[i].diameter/2 + diameter/2;
-
- if (distance < minDist) {
-
- float angle = atan2(dy, dx);
-
- float targetX = x + cos(angle) * minDist;
-
- float targetY = y + sin(angle) * minDist;
-
- float ax = (targetX - others[i].x) * spring;
-
- float ay = (targetY - others[i].y) * spring;
-
- vx -= ax;
-
- vy -= ay;
-
- others[i].vx += ax;
-
- others[i].vy += ay;
-
- }
-
- }
-
- }
-
-
-
- void move() {
-
- vy += gravity;
-
- x += vx;
-
- y += vy;
-
- if (x + diameter/2 > width) {
-
- x = width - diameter/2;
-
- vx += -0.9;
-
- }
-
- else if (x - diameter/2 < 0) {
-
- x = diameter/2;
-
- vx *= -0.9;
-
- }
-
- if (y + diameter/2 > height) {
-
- y = height - diameter/2;
-
- vy *= -0.9;
-
- }
-
- else if (y - diameter/2 < 0) {
-
- y = diameter/2;
-
- vy *= -0.9;
-
- }
-
- }
-
-
-
- void display() {
-
- fill(255, 204);
-
- ellipse(x, y, diameter, diameter);
-
- }
-
-}by Daniel Shiffman. - - - -Adjusts the brightness of part of the image - -Pixels closer to the mouse will appear brighter.
- - - -Original Processing.org Example: Brightness
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/wires.jpg"; */
-
-PImage img;
-
-
-
-void setup() {
-
- size(200, 200);
-
- frameRate(30);
-
- img = loadImage("data/wires.jpg");
-
-}
-
-
-
-void draw() {
-
- loadPixels();
-
- for (int x = 0; x < img.width; x++) {
-
- for (int y = 0; y < img.height; y++ ) {
-
- // Calculate the 1D location from a 2D grid
-
- int loc = x + y*img.width;
-
- // Get the R,G,B values from image
-
- float r,g,b;
-
- r = red (img.pixels[loc]);
-
- //g = green (img.pixels[loc]);
-
- //b = blue (img.pixels[loc]);
-
- // Calculate an amount to change brightness based on proximity to the mouse
-
- float maxdist = 50;//dist(0,0,width,height);
-
- float d = dist(x,y,mouseX,mouseY);
-
- float adjustbrightness = 255*(maxdist-d)/maxdist;
-
- r += adjustbrightness;
-
- //g += adjustbrightness;
-
- //b += adjustbrightness;
-
- // Constrain RGB to make sure they are within 0-255 color range
-
- r = constrain(r,0,255);
-
- //g = constrain(g,0,255);
-
- //b = constrain(b,0,255);
-
- // Make a new color and set pixel in the window
-
- //color c = color(r,g,b);
-
- color c = color(r);
-
- pixels[loc] = c;
-
- }
-
- }
-
- updatePixels();
-
-}Recording random movement as a continuous line.
- - - -Original Processing.org Example: Brownian
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int num = 2000;
-
-int range = 4;
-
-
-
-float[] ax = new float[num];
-
-float[] ay = new float[num];
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- for(int i=0; i<num; i++) {
-
- ax[i] = 50;
-
- ay[i] = height/2;
-
- }
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- // Shift all elements 1 place to the left
-
- for(int i=1; i<num; i++) {
-
- ax[i-1] = ax[i];
-
- ay[i-1] = ay[i];
-
- }
-
-
-
- // Put a new value at the end of the array
-
- ax[num-1] += random(-range, range);
-
- ay[num-1] += random(-range, range);
-
-
-
- // Constrain all points to the screen
-
- ax[num-1] = constrain(ax[num-1], 0, width);
-
- ay[num-1] = constrain(ay[num-1], 0, height);
-
-
-
- // Draw a line connecting the points
-
- for(int i=1; i<num; i++) {
-
- float val = float(i)/num * 204.0 + 51;
-
- stroke(val);
-
- line(ax[i-1], ay[i-1], ax[i], ay[i]);
-
- }
-
-}Click on one of the colored squares in the - -center of the image to change the color of - -the background.
- - - -Original Processing.org Example: Button
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int rectX, rectY; // Position of square button
-
-int circleX, circleY; // Position of circle button
-
-int rectSize = 50; // Diameter of rect
-
-int circleSize = 53; // Diameter of circle
-
-color rectColor, circleColor, baseColor;
-
-color rectHighlight, circleHighlight;
-
-color currentColor;
-
-boolean rectOver = false;
-
-boolean circleOver = false;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- rectColor = color(0);
-
- rectHighlight = color(51);
-
- circleColor = color(255);
-
- circleHighlight = color(204);
-
- baseColor = color(102);
-
- currentColor = baseColor;
-
- circleX = width/2+circleSize/2+10;
-
- circleY = height/2;
-
- rectX = width/2-rectSize-10;
-
- rectY = height/2-rectSize/2;
-
- ellipseMode(CENTER);
-
-}
-
-
-
-void draw()
-
-{
-
- update(mouseX, mouseY);
-
- background(currentColor);
-
-
-
- if(rectOver) {
-
- fill(rectHighlight);
-
- } else {
-
- fill(rectColor);
-
- }
-
- stroke(255);
-
- rect(rectX, rectY, rectSize, rectSize);
-
-
-
- if(circleOver) {
-
- fill(circleHighlight);
-
- } else {
-
- fill(circleColor);
-
- }
-
- stroke(0);
-
- ellipse(circleX, circleY, circleSize, circleSize);
-
-}
-
-
-
-void update(int x, int y)
-
-{
-
- if( overCircle(circleX, circleY, circleSize) ) {
-
- circleOver = true;
-
- rectOver = false;
-
- } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
-
- rectOver = true;
-
- circleOver = false;
-
- } else {
-
- circleOver = rectOver = false;
-
- }
-
-}
-
-
-
-void mousePressed()
-
-{
-
- if(circleOver) {
-
- currentColor = circleColor;
-
- }
-
- if(rectOver) {
-
- currentColor = rectColor;
-
- }
-
-}
-
-
-
-boolean overRect(int x, int y, int width, int height)
-
-{
-
- if (mouseX >= x && mouseX <= x+width &&
-
- mouseY >= y && mouseY <= y+height) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}
-
-
-
-boolean overCircle(int x, int y, int diameter)
-
-{
-
- float disX = x - mouseX;
-
- float disY = y - mouseY;
-
- if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}Click on one of the shapes to change - -the background color. This example - -demonstates a class for buttons.
- - - -Original Processing.org Example: Buttons
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-color currentcolor;
-
-
-
-CircleButton circle1, circle2, circle3;
-
-RectButton rect1, rect2;
-
-
-
-boolean locked = false;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
-
-
- color baseColor = color(102);
-
- currentcolor = baseColor;
-
-
-
- // Define and create circle button
-
- color buttoncolor = color(204);
-
- color highlight = color(153);
-
- ellipseMode(CENTER);
-
- circle1 = new CircleButton(30, 100, 100, buttoncolor, highlight);
-
-
-
- // Define and create rectangle button
-
- buttoncolor = color(204);
-
- highlight = color(153);
-
- circle2 = new CircleButton(130, 110, 24, buttoncolor, highlight);
-
-
-
- // Define and create rectangle button
-
- buttoncolor = color(153);
-
- highlight = color(102);
-
- circle3 = new CircleButton(130, 140, 24, buttoncolor, highlight);
-
-
-
- // Define and create rectangle button
-
- buttoncolor = color(102);
-
- highlight = color(51);
-
- rect1 = new RectButton(150, 20, 100, buttoncolor, highlight);
-
-
-
- // Define and create rectangle button
-
- buttoncolor = color(51);
-
- highlight = color(0);
-
- rect2 = new RectButton(90, 20, 50, buttoncolor, highlight);
-
-}
-
-
-
-void draw()
-
-{
-
- background(currentcolor);
-
- stroke(255);
-
- update(mouseX, mouseY);
-
- circle1.display();
-
- circle2.display();
-
- circle3.display();
-
- rect1.display();
-
- rect2.display();
-
-}
-
-
-
-void update(int x, int y)
-
-{
-
- if(locked == false) {
-
- circle1.update();
-
- circle2.update();
-
- circle3.update();
-
- rect1.update();
-
- rect2.update();
-
- }
-
- else {
-
- locked = false;
-
- }
-
-
-
- if(mousePressed) {
-
- if(circle1.pressed()) {
-
- currentcolor = circle1.basecolor;
-
- }
-
- else if(circle2.pressed()) {
-
- currentcolor = circle2.basecolor;
-
- }
-
- else if(circle3.pressed()) {
-
- currentcolor = circle3.basecolor;
-
- }
-
- else if(rect1.pressed()) {
-
- currentcolor = rect1.basecolor;
-
- }
-
- else if(rect2.pressed()) {
-
- currentcolor = rect2.basecolor;
-
- }
-
- }
-
-}
-
-
-
-
-
-class Button
-
-{
-
- int x, y;
-
- int size;
-
- color basecolor, highlightcolor;
-
- color currentcolor;
-
- boolean over = false;
-
- boolean pressed = false;
-
-
-
- void update()
-
- {
-
- if(over()) {
-
- currentcolor = highlightcolor;
-
- }
-
- else {
-
- currentcolor = basecolor;
-
- }
-
- }
-
-
-
- boolean pressed()
-
- {
-
- if(over) {
-
- locked = true;
-
- return true;
-
- }
-
- else {
-
- locked = false;
-
- return false;
-
- }
-
- }
-
-
-
- boolean over()
-
- {
-
- return true;
-
- }
-
-
-
- boolean overRect(int x, int y, int width, int height)
-
- {
-
- if (mouseX >= x && mouseX <= x+width &&
-
- mouseY >= y && mouseY <= y+height) {
-
- return true;
-
- }
-
- else {
-
- return false;
-
- }
-
- }
-
-
-
- boolean overCircle(int x, int y, int diameter)
-
- {
-
- float disX = x - mouseX;
-
- float disY = y - mouseY;
-
- if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
-
- return true;
-
- }
-
- else {
-
- return false;
-
- }
-
- }
-
-
-
-}
-
-
-
-class CircleButton extends Button
-
-{
-
- CircleButton(int ix, int iy, int isize, color icolor, color ihighlight)
-
- {
-
- x = ix;
-
- y = iy;
-
- size = isize;
-
- basecolor = icolor;
-
- highlightcolor = ihighlight;
-
- currentcolor = basecolor;
-
- }
-
-
-
- boolean over()
-
- {
-
- if( overCircle(x, y, size) ) {
-
- over = true;
-
- return true;
-
- }
-
- else {
-
- over = false;
-
- return false;
-
- }
-
- }
-
-
-
- void display()
-
- {
-
- stroke(255);
-
- fill(currentcolor);
-
- ellipse(x, y, size, size);
-
- }
-
-}
-
-
-
-class RectButton extends Button
-
-{
-
- RectButton(int ix, int iy, int isize, color icolor, color ihighlight)
-
- {
-
- x = ix;
-
- y = iy;
-
- size = isize;
-
- basecolor = icolor;
-
- highlightcolor = ihighlight;
-
- currentcolor = basecolor;
-
- }
-
-
-
- boolean over()
-
- {
-
- if( overRect(x, y, size, size) ) {
-
- over = true;
-
- return true;
-
- }
-
- else {
-
- over = false;
-
- return false;
-
- }
-
- }
-
-
-
- void display()
-
- {
-
- stroke(255);
-
- fill(currentcolor);
-
- rect(x, y, size, size);
-
- }
-
-}One mass is attached to the mouse position and the other - -is attached the position of the other mass. The gravity - -in the environment pulls down on both.
- - - -Original Processing.org Example: Chain
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Spring2D s1, s2;
-
-
-
-float gravity = 6.0;
-
-float mass = 2.0;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- fill(0);
-
- // Inputs: x, y, mass, gravity
-
- s1 = new Spring2D(0.0, width/2, mass, gravity);
-
- s2 = new Spring2D(0.0, width/2, mass, gravity);
-
-}
-
-
-
-void draw()
-
-{
-
- background(204);
-
- s1.update(mouseX, mouseY);
-
- s1.display(mouseX, mouseY);
-
- s2.update(s1.x, s1.y);
-
- s2.display(s1.x, s1.y);
-
-}
-
-
-
-class Spring2D {
-
- float vx, vy; // The x- and y-axis velocities
-
- float x, y; // The x- and y-coordinates
-
- float gravity;
-
- float mass;
-
- float radius = 20;
-
- float stiffness = 0.2;
-
- float damping = 0.7;
-
-
-
- Spring2D(float xpos, float ypos, float m, float g) {
-
- x = xpos;
-
- y = ypos;
-
- mass = m;
-
- gravity = g;
-
- }
-
-
-
- void update(float targetX, float targetY) {
-
- float forceX = (targetX - x) * stiffness;
-
- float ax = forceX / mass;
-
- vx = damping * (vx + ax);
-
- x += vx;
-
- float forceY = (targetY - y) * stiffness;
-
- forceY += gravity;
-
- float ay = forceY / mass;
-
- vy = damping * (vy + ay);
-
- y += vy;
-
- }
-
-
-
- void display(float nx, float ny) {
-
- noStroke();
-
- ellipse(x, y, radius*2, radius*2);
-
- stroke(255);
-
- line(x, y, nx, ny);
-
- }
-
-}by Ira Greenberg. - - - -Based on Keith Peter's Solution in - -Foundation Actionscript Animation: - -Making Things Move! - -http://www.friendsofed.com/book.html?isbn=1590597915
- - - -Original Processing.org Example: CircleCollision
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Ball[] balls = {
-
- new Ball(100, 400, 10),
-
- new Ball(700, 400, 40)
-
- };
-
-
-
-Vect2D[] vels = {
-
- new Vect2D(2.15, -1.35),
-
- new Vect2D(-1.65, .42)
-
- };
-
-
-
-void setup(){
-
- size(200, 200);
-
- smooth();
-
- noStroke();
-
-}
-
-
-
-void draw(){
-
- background(51);
-
- fill(204);
-
- for (int i=0; i< 2; i++){
-
- balls[i].x += vels[i].vx;
-
- balls[i].y += vels[i].vy;
-
- ellipse(balls[i].x, balls[i].y, balls[i].r*2, balls[i].r*2);
-
- checkBoundaryCollision(balls[i], vels[i]);
-
- }
-
- checkObjectCollision(balls, vels);
-
-}
-
-
-
-void checkObjectCollision(Ball[] b, Vect2D[] v){
-
-
-
- // get distances between the balls components
-
- Vect2D bVect = new Vect2D();
-
- bVect.vx = b[1].x - b[0].x;
-
- bVect.vy = b[1].y - b[0].y;
-
-
-
- // calculate magnitude of the vector separating the balls
-
- float bVectMag = sqrt(bVect.vx * bVect.vx + bVect.vy * bVect.vy);
-
- if (bVectMag < b[0].r + b[1].r){
-
- // get angle of bVect
-
- float theta = atan2(bVect.vy, bVect.vx);
-
- // precalculate trig values
-
- float sine = sin(theta);
-
- float cosine = cos(theta);
-
-
-
- /* bTemp will hold rotated ball positions. You
-
- just need to worry about bTemp[1] position*/
-
- Ball[] bTemp = {
-
- new Ball(), new Ball() };
-
- /* b[1]'s position is relative to b[0]'s
-
- so you can use the vector between them (bVect) as the
-
- reference point in the rotation expressions.
-
- bTemp[0].x and bTemp[0].y will initialize
-
- automatically to 0.0, which is what you want
-
- since b[1] will rotate around b[0] */
-
- bTemp[1].x = cosine * bVect.vx + sine * bVect.vy;
-
- bTemp[1].y = cosine * bVect.vy - sine * bVect.vx;
-
-
-
- // rotate Temporary velocities
-
- Vect2D[] vTemp = {
-
- new Vect2D(), new Vect2D() };
-
- vTemp[0].vx = cosine * v[0].vx + sine * v[0].vy;
-
- vTemp[0].vy = cosine * v[0].vy - sine * v[0].vx;
-
- vTemp[1].vx = cosine * v[1].vx + sine * v[1].vy;
-
- vTemp[1].vy = cosine * v[1].vy - sine * v[1].vx;
-
-
-
- /* Now that velocities are rotated, you can use 1D
-
- conservation of momentum equations to calculate
-
- the final velocity along the x-axis. */
-
- Vect2D[] vFinal = {
-
- new Vect2D(), new Vect2D() };
-
- // final rotated velocity for b[0]
-
- vFinal[0].vx = ((b[0].m - b[1].m) * vTemp[0].vx + 2 * b[1].m *
-
- vTemp[1].vx) / (b[0].m + b[1].m);
-
- vFinal[0].vy = vTemp[0].vy;
-
- // final rotated velocity for b[0]
-
- vFinal[1].vx = ((b[1].m - b[0].m) * vTemp[1].vx + 2 * b[0].m *
-
- vTemp[0].vx) / (b[0].m + b[1].m);
-
- vFinal[1].vy = vTemp[1].vy;
-
-
-
- // hack to avoid clumping
-
- bTemp[0].x += vFinal[0].vx;
-
- bTemp[1].x += vFinal[1].vx;
-
-
-
- /* Rotate ball positions and velocities back
-
- Reverse signs in trig expressions to rotate
-
- in the opposite direction */
-
- // rotate balls
-
- Ball[] bFinal = {
-
- new Ball(), new Ball() };
-
- bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
-
- bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
-
- bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
-
- bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
-
-
-
- // update balls to screen position
-
- b[1].x = b[0].x + bFinal[1].x;
-
- b[1].y = b[0].y + bFinal[1].y;
-
- b[0].x = b[0].x + bFinal[0].x;
-
- b[0].y = b[0].y + bFinal[0].y;
-
-
-
- // update velocities
-
- v[0].vx = cosine * vFinal[0].vx - sine * vFinal[0].vy;
-
- v[0].vy = cosine * vFinal[0].vy + sine * vFinal[0].vx;
-
- v[1].vx = cosine * vFinal[1].vx - sine * vFinal[1].vy;
-
- v[1].vy = cosine * vFinal[1].vy + sine * vFinal[1].vx;
-
- }
-
-}
-
-
-
-class Ball{
-
- float x, y, r, m;
-
-
-
- // default constructor
-
- Ball() {
-
- }
-
-
-
- Ball(float x, float y, float r) {
-
- this.x = x;
-
- this.y = y;
-
- this.r = r;
-
- m = r*.1;
-
- }
-
-}
-
-
-
-class Vect2D{
-
- float vx, vy;
-
-
-
- // default constructor
-
- Vect2D() {
-
- }
-
-
-
- Vect2D(float vx, float vy) {
-
- this.vx = vx;
-
- this.vy = vy;
-
- }
-
-}
-
-
-
-// checkBoundaryCollision() function:
-
-void checkBoundaryCollision(Ball ball, Vect2D vel){
-
- if (ball.x > width-ball.r){
-
- ball.x = width-ball.r;
-
- vel.vx *= -1;
-
- }
-
- else if (ball.x < ball.r){
-
- ball.x = ball.r;
-
- vel.vx *= -1;
-
- }
-
- else if (ball.y > height-ball.r){
-
- ball.y = height-ball.r;
-
- vel.vy *= -1;
-
- }
-
- else if (ball.y < ball.r){
-
- ball.y = ball.r;
-
- vel.vy *= -1;
-
- }
-
-}Move the mouse up and down to move the paddle.
- - - -Original Processing.org Example: Collision
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// Global variables for the ball
-
-float ball_x;
-
-float ball_y;
-
-float ball_dir = 1;
-
-float ball_size = 5; // Radius
-
-float dy = 0; // Direction
-
-
-
-// Global variables for the paddle
-
-int paddle_width = 5;
-
-int paddle_height = 20;
-
-
-
-int dist_wall = 15;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- rectMode(CENTER_RADIUS);
-
- ellipseMode(CENTER_RADIUS);
-
- noStroke();
-
- smooth();
-
- ball_y = height/2;
-
- ball_x = 1;
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- ball_x += ball_dir * 1.0;
-
- ball_y += dy;
-
- if(ball_x > width+ball_size) {
-
- ball_x = -width/2 - ball_size;
-
- ball_y = random(0, height);
-
- dy = 0;
-
- }
-
-
-
- // Constrain paddle to screen
-
- float paddle_y = constrain(mouseY, paddle_height, height-paddle_height);
-
-
-
- // Test to see if the ball is touching the paddle
-
- float py = width-dist_wall-paddle_width-ball_size;
-
- if(ball_x == py
-
- && ball_y > paddle_y - paddle_height - ball_size
-
- && ball_y < paddle_y + paddle_height + ball_size) {
-
- ball_dir *= -1;
-
- if(mouseY != pmouseY) {
-
- dy = (mouseY-pmouseY)/2.0;
-
- if(dy > 5) { dy = 5; }
-
- if(dy < -5) { dy = -5; }
-
- }
-
- }
-
-
-
- // If ball hits paddle or back wall, reverse direction
-
- if(ball_x < ball_size && ball_dir == -1) {
-
- ball_dir *= -1;
-
- }
-
-
-
- // If the ball is touching top or bottom edge, reverse direction
-
- if(ball_y > height-ball_size) {
-
- dy = dy * -1;
-
- }
-
- if(ball_y < ball_size) {
-
- dy = dy * -1;
-
- }
-
-
-
- // Draw ball
-
- fill(255);
-
- ellipse(ball_x, ball_y, ball_size, ball_size);
-
-
-
- // Draw the paddle
-
- fill(153);
-
- rect(width-dist_wall, paddle_y, paddle_width, paddle_height);
-
-}Click and drag the mouse to draw a line.
- - - -Original Processing.org Example: ContinuousLines
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup() {
-
- size(200, 200);
-
- background(102);
-
-}
-
-
-
-void draw() {
-
- stroke(255);
-
- if(mousePressed) {
-
- line(mouseX, mouseY, pmouseX, pmouseY);
-
- }
-
-}by Daniel Shiffman. - - - -Applys a convolution matrix to a portion of the index. - -Move mouse to apply filter to different parts of the image.
- - - -Original Processing.org Example: Convolution
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/end.jpg"; */
-
-
-
-PImage img;
-
-int w = 80;
-
-
-
-// It's possible to convolve the image with
-
-// many different matrices
-
-
-
- float[][] matrix = { { -1, -1, -1 },
-
- { -1, 9, -1 },
-
- { -1, -1, -1 } };
-
-
-
-void setup() {
-
- size(200, 200);
-
- frameRate(30);
-
- img = loadImage("data/end.jpg");
-
-}
-
-
-
-void draw() {
-
- // We're only going to process a portion of the image
-
- // so let's set the whole image as the background first
-
- image(img,0,0);
-
- // Where is the small rectangle we will process
-
- int xstart = constrain(mouseX-w/2,0,img.width);
-
- int ystart = constrain(mouseY-w/2,0,img.height);
-
- int xend = constrain(mouseX+w/2,0,img.width);
-
- int yend = constrain(mouseY+w/2,0,img.height);
-
- int matrixsize = 3;
-
- loadPixels();
-
- // Begin our loop for every pixel
-
- for (int x = xstart; x < xend; x++) {
-
- for (int y = ystart; y < yend; y++ ) {
-
- color c = convolution(x,y,matrix,matrixsize,img);
-
- int loc = x + y*img.width;
-
- pixels[loc] = c;
-
- }
-
- }
-
- updatePixels();
-
-}
-
-
-
-color convolution(int x, int y, float[][] matrix,int matrixsize, PImage img)
-
-{
-
- float rtotal = 0.0;
-
- float gtotal = 0.0;
-
- float btotal = 0.0;
-
- int offset = matrixsize / 2;
-
- for (int i = 0; i < matrixsize; i++){
-
- for (int j= 0; j < matrixsize; j++){
-
- // What pixel are we testing
-
- int xloc = x+i-offset;
-
- int yloc = y+j-offset;
-
- int loc = xloc + img.width*yloc;
-
- // Make sure we haven't walked off our image, we could do better here
-
- loc = constrain(loc,0,img.pixels.length-1);
-
- // Calculate the convolution
-
- rtotal += (red(img.pixels[loc]) * matrix[i][j]);
-
- gtotal += (green(img.pixels[loc]) * matrix[i][j]);
-
- btotal += (blue(img.pixels[loc]) * matrix[i][j]);
-
- }
-
- }
-
- // Make sure RGB is within range
-
- rtotal = constrain(rtotal,0,255);
-
- gtotal = constrain(gtotal,0,255);
-
- btotal = constrain(btotal,0,255);
-
- // Return the resulting color
-
- return color(rtotal,gtotal,btotal);
-
-}by Mike Davis. - - - -This program is a simple version of Conway's - -game of Life. A lit point turns off if there - -are fewer than two or more than three surrounding - -lit points. An unlit point turns on if there - -are exactly three lit neighbors. The 'density' - -parameter determines how much of the board will - -start out lit.
- - - -Original Processing.org Example: Conway
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int sx, sy;
-
-float density = 0.5;
-
-int[][][] world;
-
-
-
-void setup()
-
-{
-
- size(100, 100);
-
- frameRate(12);
-
- sx = width;
-
- sy = height;
-
- world = new int[sx][sy][2];
-
- stroke(255);
-
-
-
- // Set random cells to 'on'
-
- for (int i = 0; i < sx * sy * density; i++) {
-
- world[(int)random(sx)][(int)random(sy)][1] = 1;
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
-
-
- // Drawing and update cycle
-
- for (int x = 0; x < sx; x=x+1) {
-
- for (int y = 0; y < sy; y=y+1) {
-
- //if (world[x][y][1] == 1)
-
- // Change recommended by The.Lucky.Mutt
-
- if ((world[x][y][1] == 1) || (world[x][y][1] == 0 && world[x][y][0] == 1))
-
- {
-
- world[x][y][0] = 1;
-
- point(x, y);
-
- }
-
- if (world[x][y][1] == -1)
-
- {
-
- world[x][y][0] = 0;
-
- }
-
- world[x][y][1] = 0;
-
- }
-
- }
-
- // Birth and death cycle
-
- for (int x = 0; x < sx; x=x+1) {
-
- for (int y = 0; y < sy; y=y+1) {
-
- int count = neighbors(x, y);
-
- if (count == 3 && world[x][y][0] == 0)
-
- {
-
- world[x][y][1] = 1;
-
- }
-
- if ((count < 2 || count > 3) && world[x][y][0] == 1)
-
- {
-
- world[x][y][1] = -1;
-
- }
-
- }
-
- }
-
-}
-
-
-
-// Count the number of adjacent cells 'on'
-
-int neighbors(int x, int y)
-
-{
-
- return world[(x + 1) % sx][y][0] +
-
- world[x][(y + 1) % sy][0] +
-
- world[(x + sx - 1) % sx][y][0] +
-
- world[x][(y + sy - 1) % sy][0] +
-
- world[(x + 1) % sx][(y + 1) % sy][0] +
-
- world[(x + sx - 1) % sx][(y + 1) % sy][0] +
-
- world[(x + sx - 1) % sx][(y + sy - 1) % sy][0] +
-
- world[(x + 1) % sx][(y + sy - 1) % sy][0];
-
-}Move the cursor across the screen to draw. - -In addition to creating software tools to simulate pens and pencils, - -it is possible to create unique tools to draw with.
- - - -Original Processing.org Example: CustomTool
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int dots = 1000;
-
-float[] dX = new float[dots];
-
-float[] dY = new float[dots];
-
-
-
-float l_0 = 0.0;
-
-float h_0 = 0.0;
-
-
-
-float legX = 0.0;
-
-float legY = 0.0;
-
-float thighX = 0.0;
-
-float thighY = 0.0;
-
-
-
-float l = 30.0; // Length of the 'leg'
-
-float h = 60.0; // Height of the 'leg'
-
-
-
-float nmx, nmy = 0.0;
-
-float mx, my = 0.0;
-
-
-
-float offset;
-
-
-
-int currentValue = 0;
-
-int valdir = 1;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- fill(102);
-
- rect(0, 0, width, height);
-
- offset = width/2;
-
-}
-
-
-
-void draw()
-
-{
-
- // Smooth the mouse
-
- nmx = mouseX;
-
- nmy = mouseY;
-
- if((abs(mx - nmx) > 1.0) || (abs(my - nmy) > 1.0)) {
-
- mx = mx - (mx-nmx)/20.0;
-
- my = my - (my-nmy)/20.0;
-
-
-
- // Set the drawing value
-
- currentValue += 1* valdir;
-
- if(currentValue > 255 || currentValue <= 0) {
-
- valdir *= -1;
-
- }
-
- }
-
-
-
- iKinematics();
-
- kinematics();
-
-
-
- pushMatrix();
-
- translate(offset, offset);
-
- stroke(currentValue);
-
- line(thighX, thighY, legX, legY);
-
- popMatrix();
-
-
-
- stroke(255);
-
- point(legX+offset, legY+offset);
-
-}
-
-
-
-void kinematics()
-
-{
-
- thighX = h*cos(h_0);
-
- thighY = h*sin(h_0);
-
- legX = thighX + l*cos(h_0 - l_0);
-
- legY = thighY + l*sin(h_0 - l_0);
-
-}
-
-
-
-void iKinematics()
-
-{
-
- float tx = mx - width/2.0;
-
- float ty = my - height/2.0;
-
- float c2 = (tx*tx + ty*ty - h*h - l*l)/(2*h*l); //in degrees
-
- float s2 = sqrt(abs(1 - c2*c2)); // the sign here determines the bend in the joint
-
- l_0 = -atan2(s2, c2);
-
- h_0 = atan2(ty, tx) - atan2(l*s2, h+l*c2);
-
-}Exposing areas of contrast within an image - -by processing it through a high-pass filter.
- - - -Original Processing.org Example: EdgeDetection
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/house.jpg"; */
-
-
-
-float[][] kernel = { { -1, -1, -1 },
-
- { -1, 9, -1 },
-
- { -1, -1, -1 } };
-
-
-
-size(200, 200);
-
-PImage img = loadImage("data/house.jpg"); // Load the original image
-
-image(img, 0, 0); // Displays the image from point (0,0)
-
-img.loadPixels();
-
-// Create an opaque image of the same size as the original
-
-PImage edgeImg = createImage(img.width, img.height, RGB);
-
-// Loop through every pixel in the image.
-
-for (int y = 1; y < img.height-1; y++) { // Skip top and bottom edges
-
- for (int x = 1; x < img.width-1; x++) { // Skip left and right edges
-
- float sum = 0; // Kernel sum for this pixel
-
- for (int ky = -1; ky <= 1; ky++) {
-
- for (int kx = -1; kx <= 1; kx++) {
-
- // Calculate the adjacent pixel for this kernel point
-
- int pos = (y + ky)*width + (x + kx);
-
- // Image is grayscale, red/green/blue are identical
-
- float val = red(img.pixels[pos]);
-
- // Multiply adjacent pixels based on the kernel values
-
- sum += kernel[ky+1][kx+1] * val;
-
- }
-
- }
-
- // For this pixel in the new image, set the gray value
-
- // based on the sum from the kernel
-
- edgeImg.pixels[y*img.width + x] = color(sum);
-
- }
-
-}
-
-// State that there are changes to edgeImg.pixels[]
-
-edgeImg.updatePixels();
-
-image(edgeImg, 100, 0); // Draw the new imageby Daniel Shiffman. - - - -An implementation of Craig Reynold's Boids program to simulate - -the flocking behavior of birds. Each boid steers itself based on - -rules of avoidance, alignment, and coherence. - - - -Click the mouse to add a new boid.
- - - -Original Processing.org Example: Flocking
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Flock flock;
-
-
-
-void setup() {
-
- size(200,200);
-
- colorMode(RGB,255,255,255,100);
-
- flock = new Flock();
-
- // Add an initial set of boids into the system
-
- for (int i = 0; i < 50; i++) {
-
- flock.addBoid(new Boid(new Vector3D(width/2,height/2),2.0f,0.05f));
-
- }
-
- smooth();
-
-}
-
-
-
-void draw() {
-
-
-
- background(100);
-
- flock.run();
-
-}
-
-
-
-// Add a new boid into the System
-
-void mousePressed() {
-
- flock.addBoid(new Boid(new Vector3D(mouseX,mouseY),2.0f,0.05f));
-
-}
-
-
-
-class Flock {
-
- ArrayList boids; // An arraylist for all the boids
-
-
-
- Flock() {
-
- boids = new ArrayList(); // Initialize the arraylist
-
- }
-
-
-
- void run() {
-
- for (int i = 0; i < boids.size(); i++) {
-
- Boid b = (Boid) boids.get(i);
-
- b.run(boids); // Passing the entire list of boids to each boid individually
-
- }
-
- }
-
-
-
- void addBoid(Boid b) {
-
- boids.add(b);
-
- }
-
-
-
-}
-
-
-
-
-
-class Boid {
-
-
-
- Vector3D loc;
-
- Vector3D vel;
-
- Vector3D acc;
-
- float r;
-
- float maxforce; // Maximum steering force
-
- float maxspeed; // Maximum speed
-
-
-
- Boid(Vector3D l, float ms, float mf) {
-
- acc = new Vector3D(0,0);
-
- vel = new Vector3D(random(-1,1),random(-1,1));
-
- loc = l.copy();
-
- r = 2.0f;
-
- maxspeed = ms;
-
- maxforce = mf;
-
- }
-
-
-
- void run(ArrayList boids) {
-
- flock(boids);
-
- update();
-
- borders();
-
- render();
-
- }
-
-
-
- // We accumulate a new acceleration each time based on three rules
-
- void flock(ArrayList boids) {
-
- Vector3D sep = separate(boids); // Separation
-
- Vector3D ali = align(boids); // Alignment
-
- Vector3D coh = cohesion(boids); // Cohesion
-
- // Arbitrarily weight these forces
-
- sep.mult(2.0f);
-
- ali.mult(1.0f);
-
- coh.mult(1.0f);
-
- // Add the force vectors to acceleration
-
- acc.add(sep);
-
- acc.add(ali);
-
- acc.add(coh);
-
- }
-
-
-
- // Method to update location
-
- void update() {
-
- // Update velocity
-
- vel.add(acc);
-
- // Limit speed
-
- vel.limit(maxspeed);
-
- loc.add(vel);
-
- // Reset accelertion to 0 each cycle
-
- acc.setXYZ(0,0,0);
-
- }
-
-
-
- void seek(Vector3D target) {
-
- acc.add(steer(target,false));
-
- }
-
-
-
- void arrive(Vector3D target) {
-
- acc.add(steer(target,true));
-
- }
-
-
-
- // A method that calculates a steering vector towards a target
-
- // Takes a second argument, if true, it slows down as it approaches the target
-
- Vector3D steer(Vector3D target, boolean slowdown) {
-
- Vector3D steer; // The steering vector
-
- Vector3D desired = target.sub(target,loc); // A vector pointing from the location to the target
-
- float d = desired.magnitude(); // Distance from the target is the magnitude of the vector
-
- // If the distance is greater than 0, calc steering (otherwise return zero vector)
-
- if (d > 0) {
-
- // Normalize desired
-
- desired.normalize();
-
- // Two options for desired vector magnitude (1 -- based on distance, 2 -- maxspeed)
-
- if ((slowdown) && (d < 100.0f)) desired.mult(maxspeed*(d/100.0f)); // This damping is somewhat arbitrary
-
- else desired.mult(maxspeed);
-
- // Steering = Desired minus Velocity
-
- steer = target.sub(desired,vel);
-
- steer.limit(maxforce); // Limit to maximum steering force
-
- } else {
-
- steer = new Vector3D(0,0);
-
- }
-
- return steer;
-
- }
-
-
-
- void render() {
-
- // Draw a triangle rotated in the direction of velocity
-
- float theta = vel.heading2D() + radians(90);
-
- fill(200);
-
- stroke(255);
-
- pushMatrix();
-
- translate(loc.x,loc.y);
-
- rotate(theta);
-
- beginShape(TRIANGLES);
-
- vertex(0, -r*2);
-
- vertex(-r, r*2);
-
- vertex(r, r*2);
-
- endShape();
-
- popMatrix();
-
- }
-
-
-
- // Wraparound
-
- void borders() {
-
- if (loc.x < -r) loc.x = width+r;
-
- if (loc.y < -r) loc.y = height+r;
-
- if (loc.x > width+r) loc.x = -r;
-
- if (loc.y > height+r) loc.y = -r;
-
- }
-
-
-
- // Separation
-
- // Method checks for nearby boids and steers away
-
- Vector3D separate (ArrayList boids) {
-
- float desiredseparation = 25.0f;
-
- Vector3D sum = new Vector3D(0,0,0);
-
- int count = 0;
-
- // For every boid in the system, check if it's too close
-
- for (int i = 0 ; i < boids.size(); i++) {
-
- Boid other = (Boid) boids.get(i);
-
- float d = loc.distance(loc,other.loc);
-
- // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
-
- if ((d > 0) && (d < desiredseparation)) {
-
- // Calculate vector pointing away from neighbor
-
- Vector3D diff = loc.sub(loc,other.loc);
-
- diff.normalize();
-
- diff.div(d); // Weight by distance
-
- sum.add(diff);
-
- count++; // Keep track of how many
-
- }
-
- }
-
- // Average -- divide by how many
-
- if (count > 0) {
-
- sum.div((float)count);
-
- }
-
- return sum;
-
- }
-
-
-
- // Alignment
-
- // For every nearby boid in the system, calculate the average velocity
-
- Vector3D align (ArrayList boids) {
-
- float neighbordist = 50.0f;
-
- Vector3D sum = new Vector3D(0,0,0);
-
- int count = 0;
-
- for (int i = 0 ; i < boids.size(); i++) {
-
- Boid other = (Boid) boids.get(i);
-
- float d = loc.distance(loc,other.loc);
-
- if ((d > 0) && (d < neighbordist)) {
-
- sum.add(other.vel);
-
- count++;
-
- }
-
- }
-
- if (count > 0) {
-
- sum.div((float)count);
-
- sum.limit(maxforce);
-
- }
-
- return sum;
-
- }
-
-
-
- // Cohesion
-
- // For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
-
- Vector3D cohesion (ArrayList boids) {
-
- float neighbordist = 50.0f;
-
- Vector3D sum = new Vector3D(0,0,0); // Start with empty vector to accumulate all locations
-
- int count = 0;
-
- for (int i = 0 ; i < boids.size(); i++) {
-
- Boid other = (Boid) boids.get(i);
-
- float d = loc.distance(loc,other.loc);
-
- if ((d > 0) && (d < neighbordist)) {
-
- sum.add(other.loc); // Add location
-
- count++;
-
- }
-
- }
-
- if (count > 0) {
-
- sum.div((float)count);
-
- return steer(sum,false); // Steer towards the location
-
- }
-
- return sum;
-
- }
-
-}
-
-
-
-// Simple Vector3D Class
-
-
-
-static class Vector3D {
-
- float x;
-
- float y;
-
- float z;
-
-
-
- Vector3D(float x_, float y_, float z_) {
-
- x = x_; y = y_; z = z_;
-
- }
-
-
-
- Vector3D(float x_, float y_) {
-
- x = x_; y = y_; z = 0f;
-
- }
-
-
-
- Vector3D() {
-
- x = 0f; y = 0f; z = 0f;
-
- }
-
-
-
- void setX(float x_) {
-
- x = x_;
-
- }
-
-
-
- void setY(float y_) {
-
- y = y_;
-
- }
-
-
-
- void setZ(float z_) {
-
- z = z_;
-
- }
-
-
-
- void setXY(float x_, float y_) {
-
- x = x_;
-
- y = y_;
-
- }
-
-
-
- void setXYZ(float x_, float y_, float z_) {
-
- x = x_;
-
- y = y_;
-
- z = z_;
-
- }
-
-
-
- void setXYZ(Vector3D v) {
-
- x = v.x;
-
- y = v.y;
-
- z = v.z;
-
- }
-
-
-
- float magnitude() {
-
- return (float) Math.sqrt(x*x + y*y + z*z);
-
- }
-
-
-
- Vector3D copy() {
-
- return new Vector3D(x,y,z);
-
- }
-
-
-
- Vector3D copy(Vector3D v) {
-
- return new Vector3D(v.x, v.y,v.z);
-
- }
-
-
-
- void add(Vector3D v) {
-
- x += v.x;
-
- y += v.y;
-
- z += v.z;
-
- }
-
-
-
- void sub(Vector3D v) {
-
- x -= v.x;
-
- y -= v.y;
-
- z -= v.z;
-
- }
-
-
-
- void mult(float n) {
-
- x *= n;
-
- y *= n;
-
- z *= n;
-
- }
-
-
-
- void div(float n) {
-
- x /= n;
-
- y /= n;
-
- z /= n;
-
- }
-
-
-
- void normalize() {
-
- float m = magnitude();
-
- if (m > 0) {
-
- div(m);
-
- }
-
- }
-
-
-
- void limit(float max) {
-
- if (magnitude() > max) {
-
- normalize();
-
- mult(max);
-
- }
-
- }
-
-
-
- float heading2D() {
-
- float angle = (float) Math.atan2(-y, x);
-
- return -1*angle;
-
- }
-
-
-
- Vector3D add(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x + v2.x,v1.y + v2.y, v1.z + v2.z);
-
- return v;
-
- }
-
-
-
- Vector3D sub(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x - v2.x,v1.y - v2.y,v1.z - v2.z);
-
- return v;
-
- }
-
-
-
- Vector3D div(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x/n,v1.y/n,v1.z/n);
-
- return v;
-
- }
-
-
-
- Vector3D mult(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x*n,v1.y*n,v1.z*n);
-
- return v;
-
- }
-
-
-
- float distance (Vector3D v1, Vector3D v2) {
-
- float dx = v1.x - v2.x;
-
- float dy = v1.y - v2.y;
-
- float dz = v1.z - v2.z;
-
- return (float) Math.sqrt(dx*dx + dy*dy + dz*dz);
-
- }
-
-
-
-}by Glen Murphy. - - - -Click and drag the mouse to move the simulated fluid. - -Adjust the "res" variable below to change resolution. - -Code has not been optimised, and will run fairly slowly. - - - -Completed 5 November 2002
- - - -Original Processing.org Example: Fluid
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int res = 2;
-
-int penSize = 30;
-
-int lwidth;
-
-int lheight;
-
-int pnum = 30000;
-
-vsquare[][] v;
-
-vbuffer[][] vbuf;
-
-particle[] p = new particle[pnum];
-
-int pcount = 0;
-
-int mouseXvel = 0;
-
-int mouseYvel = 0;
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- noStroke();
-
- frameRate(30);
-
- lwidth = width/res;
-
- lheight = height/res;
-
- v = new vsquare[lwidth+1][lheight+1];
-
- vbuf = new vbuffer[lwidth+1][lheight+1];
-
- for (int i = 0; i < pnum; i++) {
-
- p[i] = new particle(random(res,width-res),random(res,height-res));
-
- }
-
- for (int i = 0; i <= lwidth; i++) {
-
- for (int u = 0; u <= lheight; u++) {
-
- v[i][u] = new vsquare(i*res,u*res);
-
- vbuf[i][u] = new vbuffer(i*res,u*res);
-
- }
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(#666666);
-
-
-
- int axvel = mouseX-pmouseX;
-
- int ayvel = mouseY-pmouseY;
-
-
-
- mouseXvel = (axvel != mouseXvel) ? axvel : 0;
-
- mouseYvel = (ayvel != mouseYvel) ? ayvel : 0;
-
-
-
- for (int i = 0; i < lwidth; i++) {
-
- for (int u = 0; u < lheight; u++) {
-
- vbuf[i][u].updatebuf(i,u);
-
- v[i][u].col = 32;
-
- }
-
- }
-
- for (int i = 0; i < pnum-1; i++) {
-
- p[i].updatepos();
-
- }
-
- for (int i = 0; i < lwidth; i++) {
-
- for (int u = 0; u < lheight; u++) {
-
- v[i][u].addbuffer(i, u);
-
- v[i][u].updatevels(mouseXvel, mouseYvel);
-
- v[i][u].display(i, u);
-
- }
-
- }
-
-}
-
-
-
-class particle {
-
- float x;
-
- float y;
-
- float xvel;
-
- float yvel;
-
- int pos;
-
- particle(float xIn, float yIn) {
-
- x = xIn;
-
- y = yIn;
-
- }
-
-
-
- void updatepos() {
-
- float col1;
-
- if (x > 0 && x < width && y > 0 && y < height) {
-
- int vi = (int)(x/res);
-
- int vu = (int)(y/res);
-
- vsquare o = v[vi][vu];
-
-
-
- float ax = (x%res)/res;
-
- float ay = (y%res)/res;
-
-
-
- xvel += (1-ax)*v[vi][vu].xvel*0.05;
-
- yvel += (1-ay)*v[vi][vu].yvel*0.05;
-
-
-
- xvel += ax*v[vi+1][vu].xvel*0.05;
-
- yvel += ax*v[vi+1][vu].yvel*0.05;
-
-
-
- xvel += ay*v[vi][vu+1].xvel*0.05;
-
- yvel += ay*v[vi][vu+1].yvel*0.05;
-
-
-
- o.col += 4;
-
-
-
- x += xvel;
-
- y += yvel;
-
- }
-
- else {
-
- x = random(0,width);
-
- y = random(0,height);
-
- xvel = 0;
-
- yvel = 0;
-
- }
-
-
-
- xvel *= 0.5;
-
- yvel *= 0.5;
-
- }
-
-}
-
-
-
-class vbuffer {
-
- int x;
-
- int y;
-
- float xvel;
-
- float yvel;
-
- float pressurex = 0;
-
- float pressurey = 0;
-
- float pressure = 0;
-
-
-
- vbuffer(int xIn,int yIn) {
-
- x = xIn;
-
- y = yIn;
-
- pressurex = 0;
-
- pressurey = 0;
-
- }
-
-
-
- void updatebuf(int i, int u) {
-
- if (i>0 && i<lwidth && u>0 && u<lheight) {
-
- pressurex = (v[i-1][u-1].xvel*0.5 + v[i-1][u].xvel + v[i-1][u+1].xvel*0.5 - v[i+1][u-1].xvel*0.5 - v[i+1][u].xvel - v[i+1][u+1].xvel*0.5);
-
- pressurey = (v[i-1][u-1].yvel*0.5 + v[i][u-1].yvel + v[i+1][u-1].yvel*0.5 - v[i-1][u+1].yvel*0.5 - v[i][u+1].yvel - v[i+1][u+1].yvel*0.5);
-
- pressure = (pressurex + pressurey)*0.25;
-
- }
-
- }
-
- }
-
-
-
-class vsquare {
-
- int x;
-
- int y;
-
- float xvel;
-
- float yvel;
-
- float col;
-
-
-
- vsquare(int xIn,int yIn) {
-
- x = xIn;
-
- y = yIn;
-
- }
-
-
-
- void addbuffer(int i, int u) {
-
- if (i>0 && i<lwidth && u>0 && u<lheight) {
-
- xvel += (vbuf[i-1][u-1].pressure*0.5
-
- +vbuf[i-1][u].pressure
-
- +vbuf[i-1][u+1].pressure*0.5
-
- -vbuf[i+1][u-1].pressure*0.5
-
- -vbuf[i+1][u].pressure
-
- -vbuf[i+1][u+1].pressure*0.5
-
- )*0.25;
-
- yvel += (vbuf[i-1][u-1].pressure*0.5
-
- +vbuf[i][u-1].pressure
-
- +vbuf[i+1][u-1].pressure*0.5
-
- -vbuf[i-1][u+1].pressure*0.5
-
- -vbuf[i][u+1].pressure
-
- -vbuf[i+1][u+1].pressure*0.5
-
- )*0.25;
-
- }
-
- }
-
-
-
- void updatevels(int mvelX, int mvelY) {
-
- if (mousePressed) {
-
- float adj = x - mouseX;
-
- float opp = y - mouseY;
-
- float dist = sqrt(opp*opp + adj*adj);
-
- if (dist < penSize) {
-
- if (dist < 4) dist = penSize;
-
- float mod = penSize/dist;
-
- xvel += mvelX*mod;
-
- yvel += mvelY*mod;
-
- }
-
- }
-
-
-
- xvel *= 0.99;
-
- yvel *= 0.99;
-
- }
-
-
-
- void display(int i, int u) {
-
- float tcol = 0;
-
- if (col > 255) col = 255;
-
- if (i>0 && i<lwidth-1 && u>0 && u<lheight-1) {
-
- tcol = (+ v[i][u+1].col
-
- + v[i+1][u].col
-
- + v[i+1][u+1].col*0.5
-
- )*0.4;
-
- tcol = (int)(tcol+col*0.5);
-
- }
-
- else {
-
- tcol = (int)col;
-
- }
-
- fill(tcol, tcol, tcol);
-
- rect(x,y,res,res);
-
- }
-
-}Based on code from Keith Peters (www.bit-101.com). - - - -A line segment is pushed and pulled by the cursor.
- - - -Original Processing.org Example: Follow1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float x = 100;
-
-float y = 100;
-
-float angle1 = 0.0;
-
-float segLength = 50;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw() {
-
- background(226);
-
-
-
- float dx = mouseX - x;
-
- float dy = mouseY - y;
-
- angle1 = atan2(dy, dx);
-
- x = mouseX - (cos(angle1) * segLength);
-
- y = mouseY - (sin(angle1) * segLength);
-
-
-
- segment(x, y, angle1);
-
- ellipse(x, y, 20, 20);
-
-}
-
-
-
-void segment(float x, float y, float a) {
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}Based on code from Keith Peters (www.bit-101.com). - - - -A two-segmented arm follows the cursor position. The relative - -angle between the segments is calculated with atan2() and the - -position calculated with sin() and cos().
- - - -Original Processing.org Example: Follow2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float[] x = new float[2];
-
-float[] y = new float[2];
-
-float segLength = 50;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw() {
-
- background(226);
-
- dragSegment(0, mouseX, mouseY);
-
- dragSegment(1, x[0], y[0]);
-
-}
-
-
-
-void dragSegment(int i, float xin, float yin) {
-
- float dx = xin - x[i];
-
- float dy = yin - y[i];
-
- float angle = atan2(dy, dx);
-
- x[i] = xin - cos(angle) * segLength;
-
- y[i] = yin - sin(angle) * segLength;
-
- segment(x[i], y[i], angle);
-
-}
-
-
-
-void segment(float x, float y, float a) {
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}Based on code from Keith Peters (www.bit-101.com). - - - -A segmented line follows the mouse. The relative angle from - -each segment to the next is calculated with atan2() and the - -position of the next is calculated with sin() and cos().
- - - -Original Processing.org Example: Follow3
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float[] x = new float[20];
-
-float[] y = new float[20];
-
-float segLength = 9;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(5);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw() {
-
- background(226);
-
- dragSegment(0, mouseX, mouseY);
-
- for(int i=0; i<x.length-1; i++) {
-
- dragSegment(i+1, x[i], y[i]);
-
- }
-
-}
-
-
-
-void dragSegment(int i, float xin, float yin) {
-
- float dx = xin - x[i];
-
- float dy = yin - y[i];
-
- float angle = atan2(dy, dx);
-
- x[i] = xin - cos(angle) * segLength;
-
- y[i] = yin - sin(angle) * segLength;
-
- segment(x[i], y[i], angle);
-
-}
-
-
-
-void segment(float x, float y, float a) {
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}Click and drag the white boxes to change their position.
- - - -Original Processing.org Example: Handles
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Handle[] handles;
-
-int num;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- num = height/15;
-
- handles = new Handle[num];
-
- int hsize = 10;
-
- for(int i=0; i<num; i++) {
-
- handles[i] = new Handle(width/2, 10+i*15, 50-hsize/2, 10, handles);
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(153);
-
-
-
- for(int i=0; i<num; i++) {
-
- handles[i].update();
-
- handles[i].display();
-
- }
-
-
-
- fill(0);
-
- rect(0, 0, width/2, height);
-
-}
-
-
-
-void mouseReleased()
-
-{
-
- for(int i=0; i<num; i++) {
-
- handles[i].release();
-
- }
-
-}
-
-
-
-class Handle
-
-{
-
- int x, y;
-
- int boxx, boxy;
-
- int length;
-
- int size;
-
- boolean over;
-
- boolean press;
-
- boolean locked = false;
-
- boolean otherslocked = false;
-
- Handle[] others;
-
-
-
- Handle(int ix, int iy, int il, int is, Handle[] o)
-
- {
-
- x = ix;
-
- y = iy;
-
- length = il;
-
- size = is;
-
- boxx = x+length - size/2;
-
- boxy = y - size/2;
-
- others = o;
-
- }
-
-
-
- void update()
-
- {
-
- boxx = x+length;
-
- boxy = y - size/2;
-
-
-
- for(int i=0; i<others.length; i++) {
-
- if(others[i].locked == true) {
-
- otherslocked = true;
-
- break;
-
- } else {
-
- otherslocked = false;
-
- }
-
- }
-
-
-
- if(otherslocked == false) {
-
- over();
-
- press();
-
- }
-
-
-
- if(press) {
-
- length = lock(mouseX-width/2-size/2, 0, width/2-size-1);
-
- }
-
- }
-
-
-
- void over()
-
- {
-
- if(overRect(boxx, boxy, size, size)) {
-
- over = true;
-
- } else {
-
- over = false;
-
- }
-
- }
-
-
-
- void press()
-
- {
-
- if(over && mousePressed || locked) {
-
- press = true;
-
- locked = true;
-
- } else {
-
- press = false;
-
- }
-
- }
-
-
-
- void release()
-
- {
-
- locked = false;
-
- }
-
-
-
- void display()
-
- {
-
- line(x, y, x+length, y);
-
- fill(255);
-
- stroke(0);
-
- rect(boxx, boxy, size, size);
-
- if(over || press) {
-
- line(boxx, boxy, boxx+size, boxy+size);
-
- line(boxx, boxy+size, boxx+size, boxy);
-
- }
-
-
-
- }
-
-}
-
-
-
-boolean overRect(int x, int y, int width, int height)
-
-{
-
- if (mouseX >= x && mouseX <= x+width &&
-
- mouseY >= y && mouseY <= y+height) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}
-
-
-
-int lock(int val, int minv, int maxv)
-
-{
-
- return min(max(val, minv), maxv);
-
-}Calculates the histogram of an image. - -A histogram is the frequency distribution - -of the gray levels with the number of pure black values - -displayed on the left and number of pure white values on the right.
- - - -Original Processing.org Example: Histogram
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/cdi01_g.jpg"; */
-
-
-
-size(200, 200);
-
-colorMode(RGB, width);
-
-
-
-int[] hist = new int[width];
-
-
-
-// Load an image from the data directory
-
-// Load a different image by modifying the comments
-
-PImage a;
-
-a = loadImage("data/cdi01_g.jpg");
-
-image(a, 0, 0);
-
-
-
-// Calculate the histogram
-
-for (int i=0; i<width; i++) {
-
- for (int j=0; j<height; j++) {
-
- hist[int(red(get(i, j)))]++;
-
- }
-
-}
-
-
-
-// Find the largest value in the histogram
-
-float maxval = 0;
-
-for (int i=0; i<width; i++) {
-
- if(hist[i] > maxval) {
-
- maxval = hist[i];
-
- }
-
-}
-
-
-
-// Normalize the histogram to values between 0 and "height"
-
-for (int i=0; i<width; i++) {
-
- hist[i] = int(hist[i]/maxval * height);
-
-}
-
-
-
-// Draw half of the histogram (skip every second value)
-
-stroke(width);
-
-for (int i=0; i<width; i+=2) {
-
- line(i, height, i, height-hist[i]);
-
-}Loading images and using them to create a button.
- - - -Original Processing.org Example: ImageButton
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/base.gif, data/roll.gif, data/down.gif"; */
-
-ImageButtons button;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(102, 102, 102);
-
-
-
- // Define and create image button
-
- PImage b = loadImage("data/base.gif");
-
- PImage r = loadImage("data/roll.gif");
-
- PImage d = loadImage("data/down.gif");
-
- int x = width/2 - b.width/2;
-
- int y = height/2 - b.height/2;
-
- int w = b.width;
-
- int h = b.height;
-
- button = new ImageButtons(x, y, w, h, b, r, d);
-
-}
-
-
-
-void draw()
-
-{
-
- button.update();
-
- button.display();
-
-}
-
-
-
-class Button
-
-{
-
- int x, y;
-
- int w, h;
-
- color basecolor, highlightcolor;
-
- color currentcolor;
-
- boolean over = false;
-
- boolean pressed = false;
-
-
-
- void pressed() {
-
- if(over && mousePressed) {
-
- pressed = true;
-
- } else {
-
- pressed = false;
-
- }
-
- }
-
-
-
- boolean overRect(int x, int y, int width, int height) {
-
- if (mouseX >= x && mouseX <= x+width &&
-
- mouseY >= y && mouseY <= y+height) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}
-
-}
-
-
-
-class ImageButtons extends Button
-
-{
-
- PImage base;
-
- PImage roll;
-
- PImage down;
-
- PImage currentimage;
-
-
-
- ImageButtons(int ix, int iy, int iw, int ih, PImage ibase, PImage iroll, PImage idown)
-
- {
-
- x = ix;
-
- y = iy;
-
- w = iw;
-
- h = ih;
-
- base = ibase;
-
- roll = iroll;
-
- down = idown;
-
- currentimage = base;
-
- }
-
-
-
- void update()
-
- {
-
- over();
-
- pressed();
-
- if(pressed) {
-
- currentimage = down;
-
- } else if (over){
-
- currentimage = roll;
-
- } else {
-
- currentimage = base;
-
- }
-
- }
-
-
-
- void over()
-
- {
-
- if( overRect(x, y, w, h) ) {
-
- over = true;
-
- } else {
-
- over = false;
-
- }
-
- }
-
-
-
- void display()
-
- {
-
- image(currentimage, x, y);
-
- }
-
-}Topical demonstrations of how Processing works, from the Processing.org -web site. All of the following demos were written by Casey Reas -and Ben Fry unless otherwise stated.
- -You can also view Topic Demos on Processing.org
- -by Daniel Shiffman. - - - -Renders a simple fractal, the Koch snowflake. - -Each recursive level drawn in sequence.
- - - -Original Processing.org Example: Koch
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-KochFractal k;
-
-
-
-void setup() {
-
- size(200,200);
-
- background(0);
-
- frameRate(1); // Animate slowly
-
- k = new KochFractal();
-
- smooth();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- // Draws the snowflake!
-
- k.render();
-
- // Iterate
-
- k.nextLevel();
-
- // Let's not do it more than 5 times. . .
-
- if (k.getCount() > 5) {
-
- k.restart();
-
- }
-
-
-
-}
-
-
-
-
-
-// A class to manage the list of line segments in the snowflake pattern
-
-
-
-class KochFractal {
-
- Point start; // A point for the start
-
- Point end; // A point for the end
-
- ArrayList lines; // A list to keep track of all the lines
-
- int count;
-
-
-
- public KochFractal()
-
- {
-
- start = new Point(0,height/2 + height/4);
-
- end = new Point(width,height/2 + height/4);
-
- lines = new ArrayList();
-
- restart();
-
- }
-
-
-
- void nextLevel()
-
- {
-
- // For every line that is in the arraylist
-
- // create 4 more lines in a new arraylist
-
- lines = iterate(lines);
-
- count++;
-
- }
-
-
-
- void restart()
-
- {
-
- count = 0; // Reset count
-
- lines.clear(); // Empty the array list
-
- lines.add(new KochLine(start,end)); // Add the initial line (from one end point to the other)
-
- }
-
-
-
- int getCount() {
-
- return count;
-
- }
-
-
-
- // This is easy, just draw all the lines
-
- void render()
-
- {
-
- for(int i = 0; i < lines.size(); i++) {
-
- KochLine l = (KochLine)lines.get(i);
-
- l.render();
-
- }
-
- }
-
-
-
- // This is where the **MAGIC** happens
-
- // Step 1: Create an empty arraylist
-
- // Step 2: For every line currently in the arraylist
-
- // - calculate 4 line segments based on Koch algorithm
-
- // - add all 4 line segments into the new arraylist
-
- // Step 3: Return the new arraylist and it becomes the list of line segments for the structure
-
-
-
- // As we do this over and over again, each line gets broken into 4 lines, which gets broken into 4 lines, and so on. . .
-
- ArrayList iterate(ArrayList before)
-
- {
-
- ArrayList now = new ArrayList(); //Create emtpy list
-
- for(int i = 0; i < before.size(); i++)
-
- {
-
- KochLine l = (KochLine)lines.get(i); // A line segment inside the list
-
- // Calculate 5 koch points (done for us by the line object)
-
- Point a = l.start();
-
- Point b = l.kochleft();
-
- Point c = l.kochmiddle();
-
- Point d = l.kochright();
-
- Point e = l.end();
-
- // Make line segments between all the points and add them
-
- now.add(new KochLine(a,b));
-
- now.add(new KochLine(b,c));
-
- now.add(new KochLine(c,d));
-
- now.add(new KochLine(d,e));
-
- }
-
- return now;
-
- }
-
-
-
-}
-
-
-
-
-
-// A class to describe one line segment in the fractal
-
-// Includes methods to calculate midpoints along the line according to the Koch algorithm
-
-
-
-class KochLine {
-
-
-
- // Two points,
-
- // a is the "left" point and
-
- // b is the "right point
-
- Point a,b;
-
-
-
- KochLine(Point a_, Point b_) {
-
- a = a_.copy();
-
- b = b_.copy();
-
- }
-
-
-
- void render() {
-
- stroke(255);
-
- line(a.x,a.y,b.x,b.y);
-
- }
-
-
-
- Point start() {
-
- return a.copy();
-
- }
-
-
-
- Point end() {
-
- return b.copy();
-
- }
-
-
-
- // This is easy, just 1/3 of the way
-
- Point kochleft()
-
- {
-
- float x = a.x + (b.x - a.x) / 3f;
-
- float y = a.y + (b.y - a.y) / 3f;
-
- return new Point(x,y);
-
- }
-
-
-
- // More complicated, have to use a little trig to figure out where this point is!
-
- Point kochmiddle()
-
- {
-
- float x = a.x + 0.5f * (b.x - a.x) + (sin(radians(60))*(b.y-a.y)) / 3;
-
- float y = a.y + 0.5f * (b.y - a.y) - (sin(radians(60))*(b.x-a.x)) / 3;
-
- return new Point(x,y);
-
- }
-
-
-
- // Easy, just 2/3 of the way
-
- Point kochright()
-
- {
-
- float x = a.x + 2*(b.x - a.x) / 3f;
-
- float y = a.y + 2*(b.y - a.y) / 3f;
-
- return new Point(x,y);
-
- }
-
-
-
-}
-
-
-
-class Point {
-
- float x,y;
-
-
-
- Point(float x_, float y_) {
-
- x = x_;
-
- y = y_;
-
- }
-
-
-
- Point copy() {
-
- return new Point(x,y);
-
- }
-
-}Changing a variable to create a moving line. - -When the line moves off the edge of the window, - -the variable is set to 0, which places the line - -back at the bottom of the screen.
- - - -Original Processing.org Example: Linear
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float a = 100;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- stroke(255);
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
- a = a - 1;
-
- if (a < 0) {
-
- a = height;
-
- }
-
- line(0, a, width, a);
-
-}Click and drag mouse up and down to control the signal. - -Press and hold any key to watch the scanning.
- - - -Original Processing.org Example: LinearImage
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/florence03.jpg"; */
-
-
-
-PImage a;
-
-boolean onetime = true;
-
-int[] aPixels = new int[200*200];
-
-int direction = 1;
-
-
-
-float signal;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- stroke(255);
-
- a = loadImage("data/florence03.jpg");
-
- for(int i=0; i<width*height; i++) {
-
- aPixels[i] = a.pixels[i];
-
- }
-
- frameRate(30);
-
-}
-
-
-
-void draw()
-
-{
-
- if (signal > width-1 || signal < 0) {
-
- direction = direction * -1;
-
- }
-
-
-
- if(mousePressed) {
-
- signal = abs(mouseY%height);
-
- } else {
-
- signal += (0.3*direction);
-
- }
-
-
-
-
-
- if(keyPressed) {
-
- loadPixels();
-
- for (int i=0; i<width*height; i++) {
-
- pixels[i] = aPixels[i];
-
- }
-
- updatePixels();
-
- line(0, signal, width, signal);
-
- } else {
-
- loadPixels();
-
- for (int i=0; i<width*height; i++) {
-
- pixels[i] = aPixels[int((width*int(signal))+(i%width))];
-
- }
-
- updatePixels();
-
- }
-
-
-
-}Loads a text file that contains two numbers separated by a tab ('\t'). - -A new pair of numbers is loaded each frame and used to draw a point on the screen.
- - - -Original Processing.org Example: LoadFile1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-String[] lines;
-
-int index = 0;
-
-
-
-void setup() {
-
- size(200, 200);
-
- background(0);
-
- stroke(255);
-
- frameRate(12);
-
- lines = loadStrings("positions.txt");
-
-}
-
-
-
-void draw() {
-
- if (index < lines.length) {
-
- String[] pieces = split(lines[index], '\t');
-
- if (pieces.length == 2) {
-
- int x = int(pieces[0]) * 2;
-
- int y = int(pieces[1]) * 2;
-
- point(x, y);
-
- }
-
- // Go to the next line for the next run through draw()
-
- index = index + 1;
-
- }
-
-}This example loads a data file about cars. Each element is separated - -with a tab and corresponds to a different aspect of each car. The file stores - -the miles per gallon, cylinders, displacement, etc., for more than 400 different - -makes and models. Press a mouse button to advance to the next group of entries.
- - - -Original Processing.org Example: LoadFile2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Record[] records;
-
-String[] lines;
-
-int recordCount;
-
-PFont body;
-
-int num = 9; // Display this many entries on each screen.
-
-int startingEntry = 0; // Display from this entry number
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- fill(255);
-
- noLoop();
-
-
-
- body = loadFont("TheSans-Plain-12.vlw");
-
- textFont(body);
-
-
-
- lines = loadStrings("cars2.tsv");
-
- records = new Record[lines.length];
-
- for (int i = 0; i < lines.length; i++) {
-
- String[] pieces = split(lines[i], '\t'); // Load data into arrayif (pieces.length == 9) {
-
- records[recordCount] = new Record(pieces);
-
- recordCount++;
-
- }
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- for (int i = 0; i < num; i++) {
-
- int thisEntry = startingEntry + i;
-
- text(thisEntry + " > " + records[thisEntry].name, 20, 20 + i*20); // Print name to console
-
- }
-
-}
-
-
-
-void mousePressed() {
-
- startingEntry += num;
-
- if (startingEntry + num > records.length) {
-
- startingEntry -= num;
-
- }
-
- redraw();
-
-}
-
-
-
-class Record {
-
- String name;
-
- float mpg;
-
- int cylinders;
-
- float displacement;
-
- float horsepower;
-
- float weight;
-
- float acceleration;
-
- int year;
-
- float origin;
-
- public Record(String[] pieces) {
-
- name = pieces[0];
-
- mpg = float(pieces[1]);
-
- cylinders = int(pieces[2]);
-
- displacement = float(pieces[3]);
-
- horsepower = float(pieces[4]);
-
- weight = float(pieces[5]);
-
- acceleration = float(pieces[6]);
-
- year = int(pieces[7]);
-
- origin = float(pieces[8]);
-
- }
-
-}by Daniel Shiffman. - - - -Simple rendering of the Mandelbrot set.
- - - -Original Processing.org Example: Mandelbrot
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// Establish a range of values on the complex plane
-
-// A different range will allow us to "zoom" in or out on the fractal
-
-// float xmin = -1.5; float ymin = -.1; float wh = 0.15;
-
-float xmin = -2.5;
-
-float ymin = -2;
-
-float wh = 4;
-
-
-
-void setup() {
-
- size(200, 200);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
-
-
- loadPixels();
-
-
-
- // Maximum number of iterations for each point on the complex plane
-
- int maxiterations = 200;
-
-
-
- // x goes from xmin to xmax
-
- float xmax = xmin + wh;
-
- // y goes from ymin to ymax
-
- float ymax = ymin + wh;
-
-
-
- // Calculate amount we increment x,y for each pixel
-
- float dx = (xmax - xmin) / (width);
-
- float dy = (ymax - ymin) / (height);
-
-
-
- // Start y
-
- float y = ymin;
-
- for(int j = 0; j < height; j++) {
-
- // Start x
-
- float x = xmin;
-
- for(int i = 0; i < width; i++) {
-
-
-
- // Now we test, as we iterate z = z^2 + cm does z tend towards infinity?
-
- float a = x;
-
- float b = y;
-
- int n = 0;
-
- while (n < maxiterations) {
-
- float aa = a * a;
-
- float bb = b * b;
-
- float twoab = 2.0 * a * b;
-
- a = aa - bb + x;
-
- b = twoab + y;
-
- // Infinty in our finite world is simple, let's just consider it 16
-
- if(aa + bb > 16.0f) {
-
- break; // Bail
-
- }
-
- n++;
-
- }
-
-
-
- // We color each pixel based on how long it takes to get to infinity
-
- // If we never got there, let's pick the color black
-
- if (n == maxiterations) pixels[i+j*width] = 0;
-
- else pixels[i+j*width] = color(n*16 % 255); // Gosh, we could make fancy colors here if we wanted
-
- x += dx;
-
- }
-
- y += dy;
-
- }
-
- updatePixels();
-
-}In this example, the circles moves along the curve y = x^4. - -Click the mouse to have it move to a new position.
- - - -Original Processing.org Example: MovingOnCurves
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float beginX = 20.0; // Initial x-coordinate
-
-float beginY = 10.0; // Initial y-coordinate
-
-float endX = 170.0; // Final x-coordinate
-
-float endY = 180.0; // Final y-coordinate
-
-float distX; // X-axis distance to move
-
-float distY; // Y-axis distance to move
-
-float exponent = 4; // Determines the curve
-
-float x = 0.0; // Current x-coordinate
-
-float y = 0.0; // Current y-coordinate
-
-float step = 0.01; // Size of each step along the path
-
-float pct = 0.0; // Percentage traveled (0.0 to 1.0)
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- distX = endX - beginX;
-
- distY = endY - beginY;
-
-}
-
-
-
-void draw()
-
-{
-
- fill(0, 2);
-
- rect(0, 0, width, height);
-
- pct += step;
-
- if (pct < 1.0) {
-
- x = beginX + (pct * distX);
-
- y = beginY + (pow(pct, exponent) * distY);
-
- }
-
- fill(255);
-
- ellipse(x, y, 20, 20);
-
-}
-
-
-
-void mousePressed() {
-
- pct = 0.0;
-
- beginX = x;
-
- beginY = y;
-
- endX = mouseX;
-
- endY = mouseY;
-
- distX = endX - beginX;
-
- distY = endY - beginY;
-
-}by Daniel Shiffman. - - - -Click the mouse to generate a burst of particles - -at mouse location. - - - -Each burst is one instance of a particle system - -with Particles and CrazyParticles (a subclass of Particle) - -Note use of Inheritance and Polymorphism here.
- - - -Original Processing.org Example: MultipleParticleSystems
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-ArrayList psystems;
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- colorMode(RGB,255,255,255,100);
-
- psystems = new ArrayList();
-
- smooth();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
-
-
- // Cycle through all particle systems, run them and delete old ones
-
- for (int i = psystems.size()-1; i >= 0; i--) {
-
- ParticleSystem psys = (ParticleSystem) psystems.get(i);
-
- psys.run();
-
- if (psys.dead()) {
-
- psystems.remove(i);
-
- }
-
- }
-
-
-
-}
-
-
-
-// When the mouse is pressed, add a new particle system
-
-void mousePressed() {
-
- psystems.add(new ParticleSystem(int(random(5,25)),new Vector3D(mouseX,mouseY)));
-
-}
-
-
-
-
-
-// A subclass of Particle
-
-
-
-// Created 2 May 2005
-
-
-
-class CrazyParticle extends Particle {
-
-
-
- // Just adding one new variable to a CrazyParticle
-
- // It inherits all other fields from "Particle", and we don't have to retype them!
-
- float theta;
-
-
-
- // The CrazyParticle constructor can call the parent class (super class) constructor
-
- CrazyParticle(Vector3D l) {
-
- // "super" means do everything from the constructor in Particle
-
- super(l);
-
- // One more line of code to deal with the new variable, theta
-
- theta = 0.0;
-
-
-
- }
-
-
-
- // Notice we don't have the method run() here; it is inherited from Particle
-
-
-
- // This update() method overrides the parent class update() method
-
- void update() {
-
- super.update();
-
- // Increment rotation based on horizontal velocity
-
- float theta_vel = (vel.x * vel.magnitude()) / 10.0f;
-
- theta += theta_vel;
-
- }
-
-
-
- // Override timer
-
- void timer() {
-
- timer -= 0.5;
-
- }
-
-
-
- // Method to display
-
- void render() {
-
- // Render the ellipse just like in a regular particle
-
- super.render();
-
-
-
- // Then add a rotating line
-
- pushMatrix();
-
- translate(loc.x,loc.y);
-
- rotate(theta);
-
- stroke(255,timer);
-
- line(0,0,25,0);
-
- popMatrix();
-
- }
-
-}
-
-
-
-
-
-
-
-
-
-
-
-// A simple Particle class
-
-
-
-class Particle {
-
- Vector3D loc;
-
- Vector3D vel;
-
- Vector3D acc;
-
- float r;
-
- float timer;
-
-
-
- // One constructor
-
- Particle(Vector3D a, Vector3D v, Vector3D l, float r_) {
-
- acc = a.copy();
-
- vel = v.copy();
-
- loc = l.copy();
-
- r = r_;
-
- timer = 100.0;
-
- }
-
-
-
- // Another constructor (the one we are using here)
-
- Particle(Vector3D l) {
-
- acc = new Vector3D(0,0.05,0);
-
- vel = new Vector3D(random(-1,1),random(-2,0),0);
-
- loc = l.copy();
-
- r = 10.0;
-
- timer = 100.0;
-
- }
-
-
-
-
-
- void run() {
-
- update();
-
- render();
-
- }
-
-
-
- // Method to update location
-
- void update() {
-
- vel.add(acc);
-
- loc.add(vel);
-
- timer -= 1.0;
-
- }
-
-
-
- // Method to display
-
- void render() {
-
- ellipseMode(CENTER);
-
- noStroke();
-
- fill(255,timer);
-
- ellipse(loc.x,loc.y,r,r);
-
- }
-
-
-
- // Is the particle still useful?
-
- boolean dead() {
-
- if (timer <= 0.0) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-}
-
-
-
-
-
-// A class to describe a group of Particles
-
-// An ArrayList is used to manage the list of Particles
-
-
-
-class ParticleSystem {
-
-
-
- ArrayList particles; // An arraylist for all the particles
-
- Vector3D origin; // An origin point for where particles are birthed
-
-
-
- ParticleSystem(int num, Vector3D v) {
-
- particles = new ArrayList(); // Initialize the arraylist
-
- origin = v.copy(); // Store the origin point
-
- for (int i = 0; i < num; i++) {
-
- particles.add(new CrazyParticle(origin)); // Add "num" amount of particles to the arraylist
-
- }
-
- }
-
-
-
- void run() {
-
- // Cycle through the ArrayList backwards b/c we are deleting
-
- for (int i = particles.size()-1; i >= 0; i--) {
-
- Particle p = (Particle) particles.get(i);
-
- p.run();
-
- if (p.dead()) {
-
- particles.remove(i);
-
- }
-
- }
-
- }
-
-
-
- void addParticle() {
-
- particles.add(new Particle(origin));
-
- }
-
-
-
- void addParticle(Particle p) {
-
- particles.add(p);
-
- }
-
-
-
- // A method to test if the particle system still has particles
-
- boolean dead() {
-
- if (particles.isEmpty()) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-
-
-}
-
-
-
-
-
-
-
-// Simple Vector3D Class
-
-
-
-public class Vector3D {
-
- public float x;
-
- public float y;
-
- public float z;
-
-
-
- Vector3D(float x_, float y_, float z_) {
-
- x = x_; y = y_; z = z_;
-
- }
-
-
-
- Vector3D(float x_, float y_) {
-
- x = x_; y = y_; z = 0f;
-
- }
-
-
-
- Vector3D() {
-
- x = 0f; y = 0f; z = 0f;
-
- }
-
-
-
- void setX(float x_) {
-
- x = x_;
-
- }
-
-
-
- void setY(float y_) {
-
- y = y_;
-
- }
-
-
-
- void setZ(float z_) {
-
- z = z_;
-
- }
-
-
-
- void setXY(float x_, float y_) {
-
- x = x_;
-
- y = y_;
-
- }
-
-
-
- void setXYZ(float x_, float y_, float z_) {
-
- x = x_;
-
- y = y_;
-
- z = z_;
-
- }
-
-
-
- void setXYZ(Vector3D v) {
-
- x = v.x;
-
- y = v.y;
-
- z = v.z;
-
- }
-
- public float magnitude() {
-
- return (float) Math.sqrt(x*x + y*y + z*z);
-
- }
-
-
-
- public Vector3D copy() {
-
- return new Vector3D(x,y,z);
-
- }
-
-
-
- public Vector3D copy(Vector3D v) {
-
- return new Vector3D(v.x, v.y,v.z);
-
- }
-
-
-
- public void add(Vector3D v) {
-
- x += v.x;
-
- y += v.y;
-
- z += v.z;
-
- }
-
-
-
- public void sub(Vector3D v) {
-
- x -= v.x;
-
- y -= v.y;
-
- z -= v.z;
-
- }
-
-
-
- public void mult(float n) {
-
- x *= n;
-
- y *= n;
-
- z *= n;
-
- }
-
-
-
- public void div(float n) {
-
- x /= n;
-
- y /= n;
-
- z /= n;
-
- }
-
-
-
- public void normalize() {
-
- float m = magnitude();
-
- if (m > 0) {
-
- div(m);
-
- }
-
- }
-
-
-
- public void limit(float max) {
-
- if (magnitude() > max) {
-
- normalize();
-
- mult(max);
-
- }
-
- }
-
-
-
- public float heading2D() {
-
- float angle = (float) Math.atan2(-y, x);
-
- return -1*angle;
-
- }
-
-
-
- public Vector3D add(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x + v2.x,v1.y + v2.y, v1.z + v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D sub(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x - v2.x,v1.y - v2.y,v1.z - v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D div(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x/n,v1.y/n,v1.z/n);
-
- return v;
-
- }
-
-
-
- public Vector3D mult(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x*n,v1.y*n,v1.z*n);
-
- return v;
-
- }
-
-
-
- public float distance (Vector3D v1, Vector3D v2) {
-
- float dx = v1.x - v2.x;
-
- float dy = v1.y - v2.y;
-
- float dz = v1.z - v2.z;
-
- return (float) Math.sqrt(dx*dx + dy*dy + dz*dz);
-
- }
-
-
-
-}Move the cursor over the image to draw with a software tool - -which responds to the speed of the mouse.
- - - -Original Processing.org Example: Pattern
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(102);
-
- smooth();
-
-}
-
-
-
-void draw()
-
-{
-
- // Call the variableEllipse() method and send it the
-
- // parameters for the current mouse position
-
- // and the previous mouse position
-
- variableEllipse(mouseX, mouseY, pmouseX, pmouseY);
-
-}
-
-
-
-
-
-// The simple method variableEllipse() was created specifically
-
-// for this program. It calculates the speed of the mouse
-
-// and draws a small ellipse if the mouse is moving slowly
-
-// and draws a large ellipse if the mouse is moving quickly
-
-
-
-void variableEllipse(int x, int y, int px, int py)
-
-{
-
- float speed = abs(x-px) + abs(y-py);
-
- stroke(speed);
-
- ellipse(x, y, speed, speed);
-
-}Original Processing.org Example: PenroseSnowflake
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/**
-
- * Penrose Snowflake L-System
-
- * by Geraldine Sarmiento (Interactive Telecommunications Program, NYU).
-
- * This code was based on Patrick Dwyer's L-System class.
-
- */
-
-
-
-PenroseSnowflakeLSystem ps;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- ps = new PenroseSnowflakeLSystem();
-
- ps.simulate(4);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- ps.render();
-
-}
-
-
-
-class LSystem
-
-{
-
- int steps = 0;
-
-
-
- String axiom;
-
- String rule;
-
- String production;
-
-
-
- float startLength;
-
- float drawLength;
-
- float theta;
-
-
-
- int generations;
-
-
-
- LSystem() {
-
- axiom = "F";
-
- rule = "F+F-F";
-
- startLength = 90.0;
-
- theta = radians(120.0);
-
- reset();
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width/2, height/2);
-
- steps += 5;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- rect(0, 0, -drawLength, -drawLength);
-
- noFill();
-
- translate(0, -drawLength);
-
- }
-
- else if (step == '+') {
-
- rotate(theta);
-
- }
-
- else if (step == '-') {
-
- rotate(-theta);
-
- }
-
- else if (step == '[') {
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- }
-
- }
-
- }
-
-
-
- void simulate(int gen) {
-
- while (getAge() < gen) {
-
- production = iterate(production, rule);
-
- }
-
- }
-
-
-
- String iterate(String prod_, String rule_) {
-
- drawLength = drawLength * 0.6;
-
- generations++;
-
- String newProduction = prod_;
-
- newProduction = newProduction.replaceAll("F", rule_);
-
- return newProduction;
-
- }
-
-}
-
-
-
-class PenroseSnowflakeLSystem extends LSystem {
-
-
-
- String ruleF;
-
-
-
- PenroseSnowflakeLSystem() {
-
- axiom = "F3-F3-F3-F3-F";
-
- ruleF = "F3-F3-F45-F++F3-F";
-
- startLength = 200.0f;
-
- theta = radians(18);
-
- reset();
-
- }
-
-
-
- void useRule(String r_) {
-
- rule = r_;
-
- }
-
-
-
- void useAxiom(String a_) {
-
- axiom = a_;
-
- }
-
-
-
- void useLength(float l_) {
-
- startLength = l_;
-
- }
-
-
-
- void useTheta(float t_) {
-
- theta = radians(t_);
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width, height);
-
- int repeats = 1;
-
-
-
- steps += 3;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
-
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- stroke(255);
-
- noFill();
-
- for (int j = 0; j < repeats; j++) {
-
- line(0,0,0, -drawLength);
-
- translate(0, -drawLength);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '+') {
-
- for (int j = 0; j < repeats; j++) {
-
- rotate(theta);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '-') {
-
- for (int j =0; j < repeats; j++) {
-
- rotate(-theta);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '[') {
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- }
-
- else if ( (step >= 48) && (step <= 57) ) {
-
- repeats += (int)step - 48;
-
- }
-
- }
-
- }
-
-
-
-
-
- String iterate(String prod_, String rule_) {
-
- String newProduction = "";
-
- for (int i = 0; i < prod_.length(); i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- newProduction = newProduction + ruleF;
-
- }
-
- else {
-
- if (step != 'F') {
-
- newProduction = newProduction + step;
-
- }
-
- }
-
- }
-
- drawLength = drawLength * 0.4;
-
- generations++;
-
- return newProduction;
-
- }
-
-
-
-}Original Processing.org Example: PenroseTile
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/**
-
- * Penrose Tile L-System
-
- * by Geraldine Sarmiento (Interactive Telecommunications Program, NYU).
-
- * This code was based on Patrick Dwyer's L-System class.
-
- */
-
-
-
-PenroseLSystem ds;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- ds = new PenroseLSystem();
-
- ds.simulate(4);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- ds.render();
-
-}
-
-
-
-
-
-class LSystem
-
-{
-
- int steps = 0;
-
-
-
- String axiom;
-
- String rule;
-
- String production;
-
-
-
- float startLength;
-
- float drawLength;
-
- float theta;
-
-
-
- int generations;
-
-
-
- LSystem() {
-
- axiom = "F";
-
- rule = "F+F-F";
-
- startLength = 90.0;
-
- theta = radians(120.0);
-
- reset();
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width/2, height/2);
-
- steps += 5;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- rect(0, 0, -drawLength, -drawLength);
-
- noFill();
-
- translate(0, -drawLength);
-
- }
-
- else if (step == '+') {
-
- rotate(theta);
-
- }
-
- else if (step == '-') {
-
- rotate(-theta);
-
- }
-
- else if (step == '[') {
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- }
-
- }
-
- }
-
-
-
- void simulate(int gen) {
-
- while (getAge() < gen) {
-
- production = iterate(production, rule);
-
- }
-
- }
-
-
-
- String iterate(String prod_, String rule_) {
-
- drawLength = drawLength * 0.6;
-
- generations++;
-
- String newProduction = prod_;
-
- newProduction = newProduction.replaceAll("F", rule_);
-
- return newProduction;
-
- }
-
-}
-
-
-
-
-
-class PenroseLSystem extends LSystem {
-
-
-
- int steps = 0;
-
- float somestep = 0.1;
-
- String ruleW;
-
- String ruleX;
-
- String ruleY;
-
- String ruleZ;
-
-
-
- PenroseLSystem() {
-
- axiom = "[X]++[X]++[X]++[X]++[X]";
-
- ruleW = "YF++ZF4-XF[-YF4-WF]++";
-
- ruleX = "+YF--ZF[3-WF--XF]+";
-
- ruleY = "-WF++XF[+++YF++ZF]-";
-
- ruleZ = "--YF++++WF[+ZF++++XF]--XF";
-
- startLength = 200.0;
-
- theta = radians(36);
-
- reset();
-
- }
-
-
-
- void useRule(String r_) {
-
- rule = r_;
-
- }
-
-
-
- void useAxiom(String a_) {
-
- axiom = a_;
-
- }
-
-
-
- void useLength(float l_) {
-
- startLength = l_;
-
- }
-
-
-
- void useTheta(float t_) {
-
- theta = radians(t_);
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width/2, height/2);
-
- int pushes = 0;
-
- int repeats = 1;
-
- steps += 12;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
-
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- stroke(255, 60);
-
- for (int j = 0; j < repeats; j++) {
-
- line(0,0,0, -drawLength);
-
- noFill();
-
- translate(0, -drawLength);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '+') {
-
- for (int j = 0; j < repeats; j++) {
-
- rotate(theta);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '-') {
-
- for (int j =0; j < repeats; j++) {
-
- rotate(-theta);
-
- }
-
- repeats = 1;
-
- }
-
- else if (step == '[') {
-
- pushes++;
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- pushes--;
-
- }
-
- else if ( (step >= 48) && (step <= 57) ) {
-
- repeats = (int)step - 48;
-
- }
-
- }
-
-
-
- // Unpush if we need too
-
- while (pushes > 0) {
-
- popMatrix();
-
- pushes--;
-
- }
-
- }
-
-
-
- String iterate(String prod_, String rule_) {
-
- String newProduction = "";
-
- for (int i = 0; i < prod_.length(); i++) {
-
- char step = production.charAt(i);
-
- if (step == 'W') {
-
- newProduction = newProduction + ruleW;
-
- }
-
- else if (step == 'X') {
-
- newProduction = newProduction + ruleX;
-
- }
-
- else if (step == 'Y') {
-
- newProduction = newProduction + ruleY;
-
- }
-
- else if (step == 'Z') {
-
- newProduction = newProduction + ruleZ;
-
- }
-
- else {
-
- if (step != 'F') {
-
- newProduction = newProduction + step;
-
- }
-
- }
-
- }
-
-
-
- drawLength = drawLength * 0.5;
-
- generations++;
-
- return newProduction;
-
- }
-
-
-
-}Original Processing.org Example: Pentigree
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/**
-
- * Pentigree L-System
-
- * by Geraldine Sarmiento (Interactive Telecommunications Program, NYU).
-
- * This code was based on Patrick Dwyer's L-System class.
-
- */
-
-
-
-PentigreeLSystem ps;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- frameRate(24);
-
- smooth();
-
- ps = new PentigreeLSystem();
-
- ps.simulate(3);
-
-}
-
-
-
-void draw()
-
-{
-
- background(0);
-
- ps.render();
-
-}
-
-
-
-
-
-class LSystem {
-
-
-
- int steps = 0;
-
-
-
- String axiom;
-
- String rule;
-
- String production;
-
-
-
- float startLength;
-
- float drawLength;
-
- float theta;
-
-
-
- int generations;
-
-
-
- LSystem() {
-
-
-
- axiom = "F";
-
- rule = "F+F-F";
-
- startLength = 90.0f;
-
- theta = radians(120.0);
-
- reset();
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width/2, height/2);
-
- steps += 5;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- rect(0, 0, -drawLength, -drawLength);
-
- noFill();
-
- translate(0, -drawLength);
-
- }
-
- else if (step == '+') {
-
- rotate(theta);
-
- }
-
- else if (step == '-') {
-
- rotate(-theta);
-
- }
-
- else if (step == '[') {
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- }
-
- }
-
- }
-
-
-
- void simulate(int gen) {
-
- while (getAge() < gen) {
-
- production = iterate(production, rule);
-
- }
-
- }
-
-
-
- String iterate(String prod_, String rule_) {
-
- drawLength = drawLength * 0.6;
-
- generations++;
-
- String newProduction = prod_;
-
- newProduction = newProduction.replaceAll("F", rule_);
-
- return newProduction;
-
- }
-
-}
-
-
-
-
-
-class PentigreeLSystem extends LSystem {
-
-
-
- int steps = 0;
-
- float somestep = 0.1;
-
- float xoff = 0.01;
-
-
-
- PentigreeLSystem() {
-
- axiom = "F-F-F-F-F";
-
- rule = "F-F++F+F-F-F";
-
- startLength = 40.0;
-
- theta = radians(72);
-
- reset();
-
- }
-
-
-
- void useRule(String r_) {
-
- rule = r_;
-
- }
-
-
-
- void useAxiom(String a_) {
-
- axiom = a_;
-
- }
-
-
-
- void useLength(float l_) {
-
- startLength = l_;
-
- }
-
-
-
- void useTheta(float t_) {
-
- theta = radians(t_);
-
- }
-
-
-
- void reset() {
-
- production = axiom;
-
- drawLength = startLength;
-
- generations = 0;
-
- }
-
-
-
- int getAge() {
-
- return generations;
-
- }
-
-
-
- void render() {
-
- translate(width/4, height/2);
-
- steps += 3;
-
- if (steps > production.length()) {
-
- steps = production.length();
-
- }
-
-
-
- for (int i = 0; i < steps; i++) {
-
- char step = production.charAt(i);
-
- if (step == 'F') {
-
- noFill();
-
- stroke(255);
-
- line(0, 0, 0, -drawLength);
-
- translate(0, -drawLength);
-
- }
-
- else if (step == '+') {
-
- rotate(theta);
-
- }
-
- else if (step == '-') {
-
- rotate(-theta);
-
- }
-
- else if (step == '[') {
-
- pushMatrix();
-
- }
-
- else if (step == ']') {
-
- popMatrix();
-
- }
-
- }
-
- }
-
-
-
-}Click and drag the mouse up and down to control the signal and - -press and hold any key to see the current pixel being read. - -This program sequentially reads the color of every pixel of an image - -and displays this color to fill the window.
- - - -Original Processing.org Example: PixelArray
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/ystone08.jpg"; crisp="true"; */
-
-PImage img;
-
-int direction = 1;
-
-float signal;
-
-
-
-void setup() {
-
- size(200, 200);
-
- noFill();
-
- stroke(255);
-
- frameRate(30);
-
- img = loadImage("data/ystone08.jpg");
-
-}
-
-
-
-void draw() {
-
- if (signal > img.width*img.height-1 || signal < 0) {
-
- direction = direction * -1;
-
- }
-
-
-
- if (mousePressed) {
-
- int mx = constrain(mouseX, 0, img.width-1);
-
- int my = constrain(mouseY, 0, img.height-1);
-
- signal = my*img.width + mx;
-
- } else {
-
- signal += 0.33*direction;
-
- }
-
-
-
- int sx = int(signal) % img.width;
-
- int sy = int(signal) / img.width;
-
-
-
- if (keyPressed) {
-
- set(0, 0, img); // fast way to draw an image
-
- point(sx, sy);
-
- rect(sx - 5, sy - 5, 10, 10);
-
- } else {
-
- color c = img.get(sx, sy);
-
- background(c);
-
- }
-
-}by Ira Greenberg. - - - -Series of ellipses simulating a multi-segmented - -organism, utilizing a follow the leader algorithm. - -Collision detection occurs on the organism's head, - -controlling overall direction, and on the individual - -body segments, controlling body shape and jitter.
- - - -Original Processing.org Example: Puff
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// for puff head
-
-float headX;
-
-float headY;
-
-float speedX = .7;
-
-float speedY = .9;
-
-
-
-// for puff body
-
-int cells = 1000;
-
-float[]px= new float[cells];
-
-float[]py= new float[cells];
-
-float[]radiiX = new float[cells];
-
-float[]radiiY = new float[cells];
-
-float[]angle = new float[cells];
-
-float[]frequency = new float[cells];
-
-float[]cellRadius = new float[cells];
-
-
-
-void setup(){
-
-
-
- size(200, 200);
-
- // begin in the center
-
- headX = width/2;
-
- headY = height/2;
-
-
-
- //fill body arrays
-
- for (int i=0; i< cells; i++){
-
- radiiX[i] = random(-7, 7);
-
- radiiY[i] = random(-4, 4);
-
- frequency[i]= random(-9, 9);
-
- cellRadius[i] = random(16, 30);
-
- }
-
- frameRate(30);
-
-}
-
-
-
-void draw(){
-
- background(0);
-
- noStroke();
-
- fill(255, 255, 255, 5);
-
-
-
- //follow the leader
-
- for (int i =0; i< cells; i++){
-
- if (i==0){
-
- px[i] = headX+sin(radians(angle[i]))*radiiX[i];
-
- py[i] = headY+cos(radians(angle[i]))*radiiY[i];
-
- }
-
- else{
-
- px[i] = px[i-1]+cos(radians(angle[i]))*radiiX[i];
-
- py[i] = py[i-1]+sin(radians(angle[i]))*radiiY[i];
-
-
-
- //check collision of body
-
- if (px[i] >= width-cellRadius[i]/2 || px[i] <= cellRadius[i]/2){
-
- radiiX[i]*=-1;
-
- cellRadius[i] = random(1, 40);
-
- frequency[i]= random(-13, 13);
-
- }
-
- if (py[i] >= height-cellRadius[i]/2 || py[i] <= cellRadius[i]/2){
-
- radiiY[i]*=-1;
-
- cellRadius[i] = random(1, 40);
-
- frequency[i]= random(-9, 9);
-
- }
-
- }
-
- // draw puff
-
- ellipse(px[i], py[i], cellRadius[i], cellRadius[i]);
-
- // set speed of body
-
- angle[i]+=frequency[i];
-
- }
-
-
-
- // set velocity of head
-
- headX+=speedX;
-
- headY+=speedY;
-
-
-
- //check boundary collision of head
-
- if (headX >= width-cellRadius[0]/2 || headX <=cellRadius[0]/2){
-
- speedX*=-1;
-
- }
-
- if (headY >= height-cellRadius[0]/2 || headY <= cellRadius[0]/2){
-
- speedY*=-1;
-
- }
-
-}Software drawing instruments can follow a rhythm or abide by rules independent - -of drawn gestures. This is a form of collaborative drawing in which the draftsperson - -controls some aspects of the image and the software controls others.
- - - -Original Processing.org Example: Pulses
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int angle = 0;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- background(102);
-
- smooth();
-
- noStroke();
-
- fill(0, 102);
-
-}
-
-
-
-void draw()
-
-{
-
- // Draw only when mouse is pressed
-
- if (mousePressed == true) {
-
- angle += 10;
-
- float val = cos(radians(angle)) * 6.0;
-
- for (int a = 0; a < 360; a += 75) {
-
- float xoff = cos(radians(a)) * val;
-
- float yoff = sin(radians(a)) * val;
-
- fill(0);
-
- ellipse(mouseX + xoff, mouseY + yoff, val/2, val/2);
-
- }
-
- fill(255);
-
- ellipse(mouseX, mouseY, 2, 2);
-
- }
-
-}Based on code from Keith Peters (www.bit-101.com) - - - -The arm follows the position of the mouse by - -calculating the angles with atan2().
- - - -Original Processing.org Example: Reach1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float x = 100;
-
-float y = 100;
-
-float x2 = 100;
-
-float y2 = 100;
-
-float segLength = 30;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw() {
-
- background(226);
-
-
-
- float dx = mouseX - x;
-
- float dy = mouseY - y;
-
- float angle1 = atan2(dy, dx);
-
-
-
- float tx = mouseX - cos(angle1) * segLength;
-
- float ty = mouseY - sin(angle1) * segLength;
-
- dx = tx - x2;
-
- dy = ty - y2;
-
- float angle2 = atan2(dy, dx);
-
- x = x2 + cos(angle2) * segLength;
-
- y = y2 + sin(angle2) * segLength;
-
-
-
- segment(x, y, angle1);
-
- segment(x2, y2, angle2);
-
-}
-
-
-
-void segment(float x, float y, float a) {
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}Based on code from Keith Peters (www.bit-101.com) - - - -The arm follows the position of the mouse by - -calculating the angles with atan2().
- - - -Original Processing.org Example: Reach2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int numSegments = 10;
-
-float[] x = new float[numSegments];
-
-float[] y = new float[numSegments];
-
-float[] angle = new float[numSegments];
-
-float segLength = 20;
-
-float targetX, targetY;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
- x[x.length-1] = 0; // Set base x-coordinate
-
- y[x.length-1] = height; // Set base y-coordinate
-
-}
-
-
-
-void draw() {
-
- background(226);
-
-
-
- reachSegment(0, mouseX, mouseY);
-
- for(int i=1; i<numSegments; i++) {
-
- reachSegment(i, targetX, targetY);
-
- }
-
- for(int i=x.length-1; i>=1; i--) {
-
- positionSegment(i, i-1);
-
- }
-
- for(int i=0; i<x.length; i++) {
-
- segment(x[i], y[i], angle[i], (i+1)*2);
-
- }
-
-}
-
-
-
-void positionSegment(int a, int b) {
-
- x[b] = x[a] + cos(angle[a]) * segLength;
-
- y[b] = y[a] + sin(angle[a]) * segLength;
-
-}
-
-
-
-void reachSegment(int i, float xin, float yin) {
-
- float dx = xin - x[i];
-
- float dy = yin - y[i];
-
- angle[i] = atan2(dy, dx);
-
- targetX = xin - cos(angle[i]) * segLength;
-
- targetY = yin - sin(angle[i]) * segLength;
-
-}
-
-
-
-void segment(float x, float y, float a, float sw) {
-
- strokeWeight(sw);
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}Based on code from Keith Peters (www.bit-101.com) - - - -The arm follows the position of the ball by - -calculating the angles with atan2().
- - - -Original Processing.org Example: Reach3
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int numSegments = 6;
-
-float[] x = new float[numSegments];
-
-float[] y = new float[numSegments];
-
-float[] angle = new float[numSegments];
-
-float segLength = 15;
-
-float targetX, targetY;
-
-
-
-float ballX = 50;
-
-float ballY = 50;
-
-int ballXDirection = 1;
-
-int ballYDirection = -1;
-
-
-
-void setup() {
-
- size(200, 200);
-
- smooth();
-
- strokeWeight(20.0);
-
- stroke(0, 100);
-
- noFill();
-
- x[x.length-1] = width/2; // Set base x-coordinate
-
- y[x.length-1] = height; // Set base y-coordinate
-
-}
-
-
-
-void draw() {
-
- background(226);
-
-
-
- strokeWeight(20);
-
- ballX = ballX + 1.0 * ballXDirection;
-
- ballY = ballY + 0.8 * ballYDirection;
-
- if(ballX > width-25 || ballX < 25) {
-
- ballXDirection *= -1;
-
- }
-
- if(ballY > height-25 || ballY < 25) {
-
- ballYDirection *= -1;
-
- }
-
- ellipse(ballX, ballY, 30, 30);
-
-
-
- reachSegment(0, ballX, ballY);
-
- for(int i=1; i<numSegments; i++) {
-
- reachSegment(i, targetX, targetY);
-
- }
-
- for(int i=x.length-1; i>=1; i--) {
-
- positionSegment(i, i-1);
-
- }
-
- for(int i=0; i<x.length; i++) {
-
- segment(x[i], y[i], angle[i], (i+1)*2);
-
- }
-
-}
-
-
-
-void positionSegment(int a, int b) {
-
- x[b] = x[a] + cos(angle[a]) * segLength;
-
- y[b] = y[a] + sin(angle[a]) * segLength;
-
-}
-
-
-
-void reachSegment(int i, float xin, float yin) {
-
- float dx = xin - x[i];
-
- float dy = yin - y[i];
-
- angle[i] = atan2(dy, dx);
-
- targetX = xin - cos(angle[i]) * segLength;
-
- targetY = yin - sin(angle[i]) * segLength;
-
-}
-
-
-
-void segment(float x, float y, float a, float sw) {
-
- strokeWeight(sw);
-
- pushMatrix();
-
- translate(x, y);
-
- rotate(a);
-
- line(0, 0, segLength, 0);
-
- popMatrix();
-
-}by Ira Greenberg. - - - -Based on the equation (R = 2N(N*L)-L) where R is the - -reflection vector, N is the normal, and L is the incident - -vector.
- - - -Original Processing.org Example: Reflection1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
- float baseX1, baseY1, baseX2, baseY2;
-
-float baseLength;
-
-float[] xCoords, yCoords;
-
-float ellipseX, ellipseY, ellipseRadius = 6;
-
-float directionX, directionY;
-
-float ellipseSpeed = 3.5;
-
-float velocityX, velocityY;
-
-
-
-void setup(){
-
- size(200, 200);
-
- frameRate(30);
-
- fill(128);
-
- smooth();
-
- baseX1 = 0;
-
- baseY1 = height-150;
-
- baseX2 = width;
-
- baseY2 = height;
-
-
-
- // start ellipse at middle top of screen
-
- ellipseX = width/2;
-
-
-
- // calculate initial random direction
-
- directionX = random(0.1, 0.99);
-
- directionY = random(0.1, 0.99);
-
-
-
- // normalize direction vector
-
- float directionVectLength = sqrt(directionX*directionX +
-
- directionY*directionY);
-
- directionX /= directionVectLength;
-
- directionY /= directionVectLength;
-
-}
-
-
-
-void draw(){
-
- // draw background
-
- fill(0, 12);
-
- noStroke();
-
- rect(0, 0, width, height);
-
-
-
- // calculate length of base top
-
- baseLength = dist(baseX1, baseY1, baseX2, baseY2);
-
- xCoords = new float[ceil(baseLength)];
-
- yCoords = new float[ceil(baseLength)];
-
-
-
- // fill base top coordinate array
-
- for (int i=0; i<xCoords.length; i++){
-
- xCoords[i] = baseX1 + ((baseX2-baseX1)/baseLength)*i;
-
- yCoords[i] = baseY1 + ((baseY2-baseY1)/baseLength)*i;
-
- }
-
-
-
- // draw base
-
- fill(200);
-
- quad(baseX1, baseY1, baseX2, baseY2, baseX2, height, 0, height);
-
-
-
- // calculate base top normal
-
- float baseDeltaX = (baseX2-baseX1)/baseLength;
-
- float baseDeltaY = (baseY2-baseY1)/baseLength;
-
- float normalX = -baseDeltaY;
-
- float normalY = baseDeltaX;
-
-
-
- // draw ellipse
-
- noFill();
-
- stroke(200);
-
- ellipse(ellipseX, ellipseY, ellipseRadius*2, ellipseRadius*2);
-
-
-
- // calculate ellipse velocity
-
- velocityX = directionX * ellipseSpeed;
-
- velocityY = directionY * ellipseSpeed;
-
-
-
- // move elipse
-
- ellipseX += velocityX;
-
- ellipseY += velocityY;
-
-
-
- // normalized incidence vector
-
- float incidenceVectorX = -directionX;
-
- float incidenceVectorY = -directionY;
-
-
-
- // detect and handle collision
-
- for (int i=0; i<xCoords.length; i++){
-
- // check distance between ellipse and base top coordinates
-
- if (dist(ellipseX, ellipseY, xCoords[i], yCoords[i]) < ellipseRadius){
-
-
-
- // calculate dot product of incident vector and base top normal
-
- float dot = incidenceVectorX*normalX + incidenceVectorY*normalY;
-
-
-
- // calculate reflection vector
-
- float reflectionVectorX = 2*normalX*dot - incidenceVectorX;
-
- float reflectionVectorY = 2*normalY*dot - incidenceVectorY;
-
-
-
- // assign reflection vector to direction vector
-
- directionX = reflectionVectorX;
-
- directionY = reflectionVectorY;
-
-
-
- // draw base top normal at collision point
-
- stroke(255, 128, 0);
-
- line(ellipseX, ellipseY, ellipseX-normalX*100,
-
- ellipseY-normalY*100);
-
- }
-
- }
-
-
-
- // detect boundary collision
-
- // right
-
- if (ellipseX > width-ellipseRadius){
-
- ellipseX = width-ellipseRadius;
-
- directionX *= -1;
-
- }
-
- // left
-
- if (ellipseX < ellipseRadius){
-
- ellipseX = ellipseRadius;
-
- directionX *= -1;
-
- }
-
- // top
-
- if (ellipseY < ellipseRadius){
-
- ellipseY = ellipseRadius;
-
- directionY *= -1;
-
- // randomize base top
-
- baseY1 = random(height-100, height);
-
- baseY2 = random(height-100, height);
-
- }
-
-}by Ira Greenberg. - - - -Based on Keith Peter's Solution in - -Foundation Actionscript Animation: Making Things Move! - -http://www.friendsofed.com/book.html?isbn=1590597915
- - - -Original Processing.org Example: Reflection2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-Orb orb;
-
-Vect2D velocity;
-
-float gravity = .05, damping = 0.8;
-
-int segments = 40;
-
-Ground[] ground = new Ground[segments];
-
-float[] peakHeights = new float[segments+1];
-
-
-
-void setup(){
-
- size(200, 200);
-
- smooth();
-
- orb = new Orb(50, 50, 3);
-
- velocity = new Vect2D(.5, 0);
-
-
-
- // calculate ground peak heights
-
- for (int i=0; i<peakHeights.length; i++){
-
- peakHeights[i] = random(height-40, height-30);
-
- }
-
-
-
- /* float value required for segment width (segs)
-
- calculations so the ground spans the entire
-
- display window, regardless of segment number. */
-
- float segs = segments;
-
- for (int i=0; i<segments; i++){
-
- ground[i] = new Ground(width/segs*i, peakHeights[i],
-
- width/segs*(i+1), peakHeights[i+1]);
-
- }
-
-}
-
-
-
-
-
-void draw(){
-
- // background
-
- noStroke();
-
- fill(0, 15);
-
- rect(0, 0, width, height);
-
-
-
- // move orb
-
- orb.x += velocity.vx;
-
- velocity.vy += gravity;
-
- orb.y += velocity.vy;
-
-
-
- // draw ground
-
- fill(127);
-
- beginShape();
-
- for (int i=0; i<segments; i++){
-
- vertex(ground[i].x1, ground[i].y1);
-
- vertex(ground[i].x2, ground[i].y2);
-
- }
-
- vertex(ground[segments-1].x2, height);
-
- vertex(ground[0].x1, height);
-
- endShape(CLOSE);
-
-
-
- // draw orb
-
- noStroke();
-
- fill(200);
-
- ellipse(orb.x, orb.y, orb.r*2, orb.r*2);
-
-
-
- // collision detection
-
- checkWallCollision();
-
- for (int i=0; i<segments; i++){
-
- checkGroundCollision(ground[i]);
-
- }
-
-}
-
-
-
-
-
-void checkWallCollision(){
-
- if (orb.x > width-orb.r){
-
- orb.x = width-orb.r;
-
- velocity.vx *= -1;
-
- velocity.vx *= damping;
-
- }
-
- else if (orb.x < orb.r){
-
- orb.x = orb.r;
-
- velocity.vx *= -1;
-
- velocity.vx *= damping;
-
- }
-
-}
-
-
-
-
-
-void checkGroundCollision(Ground groundSegment) {
-
-
-
- // get difference between orb and ground
-
- float deltaX = orb.x - groundSegment.x;
-
- float deltaY = orb.y - groundSegment.y;
-
-
-
- // precalculate trig values
-
- float cosine = cos(groundSegment.rot);
-
- float sine = sin(groundSegment.rot);
-
-
-
- /* rotate ground and velocity to allow
-
- orthogonal collision calculations */
-
- float groundXTemp = cosine * deltaX + sine * deltaY;
-
- float groundYTemp = cosine * deltaY - sine * deltaX;
-
- float velocityXTemp = cosine * velocity.vx + sine * velocity.vy;
-
- float velocityYTemp = cosine * velocity.vy - sine * velocity.vx;
-
-
-
- /* ground collision - check for surface
-
- collision and also that orb is within
-
- left/rights bounds of ground segment */
-
- if (groundYTemp > -orb.r &&
-
- orb.x > groundSegment.x1 &&
-
- orb.x < groundSegment.x2 ){
-
- // keep orb from going into ground
-
- groundYTemp = -orb.r;
-
- // bounce and slow down orb
-
- velocityYTemp *= -1.0;
-
- velocityYTemp *= damping;
-
- }
-
-
-
- // reset ground, velocity and orb
-
- deltaX = cosine * groundXTemp - sine * groundYTemp;
-
- deltaY = cosine * groundYTemp + sine * groundXTemp;
-
- velocity.vx = cosine * velocityXTemp - sine * velocityYTemp;
-
- velocity.vy = cosine * velocityYTemp + sine * velocityXTemp;
-
- orb.x = groundSegment.x + deltaX;
-
- orb.y = groundSegment.y + deltaY;
-
-}
-
-
-
-
-
-class Ground {
-
- float x1, y1, x2, y2;
-
- float x, y, len, rot;
-
-
-
- // default constructor
-
- Ground(){
-
- }
-
-
-
- // constructor
-
- Ground(float x1, float y1, float x2, float y2) {
-
- this.x1 = x1;
-
- this.y1 = y1;
-
- this.x2 = x2;
-
- this.y2 = y2;
-
- x = (x1+x2)/2;
-
- y = (y1+y2)/2;
-
- len = dist(x1, y1, x2, y2);
-
- rot = atan2((y2-y1), (x2-x1));
-
- }
-
-}
-
-
-
-
-
-class Orb{
-
- float x, y, r;
-
-
-
- // default constructor
-
- Orb() {
-
- }
-
-
-
- Orb(float x, float y, float r) {
-
- this.x = x;
-
- this.y = y;
-
- this.r = r;
-
- }
-
-}
-
-
-
-class Vect2D{
-
- float vx, vy;
-
-
-
- // default constructor
-
- Vect2D() {
-
- }
-
-
-
- Vect2D(float vx, float vy) {
-
- this.vx = vx;
-
- this.vy = vy;
-
- }
-
-}Roll over the colored squares in the center of the image - -to change the color of the outside rectangle. - - - -Updated 09 February 2003.
- - - -Original Processing.org Example: Rollover
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int rectX, rectY; // Position of square button
-
-int circleX, circleY; // Position of circle button
-
-int rectSize = 50; // Diameter of rect
-
-int circleSize = 53; // Diameter of circle
-
-
-
-color rectColor;
-
-color circleColor;
-
-color baseColor;
-
-
-
-boolean rectOver = false;
-
-boolean circleOver = false;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- smooth();
-
- rectColor = color(0);
-
- circleColor = color(255);
-
- baseColor = color(102);
-
- circleX = width/2+circleSize/2+10;
-
- circleY = height/2;
-
- rectX = width/2-rectSize-10;
-
- rectY = height/2-rectSize/2;
-
- ellipseMode(CENTER);
-
-}
-
-
-
-void draw()
-
-{
-
- update(mouseX, mouseY);
-
-
-
- noStroke();
-
- if (rectOver) {
-
- background(rectColor);
-
- } else if (circleOver) {
-
- background(circleColor);
-
- } else {
-
- background(baseColor);
-
- }
-
-
-
- stroke(255);
-
- fill(rectColor);
-
- rect(rectX, rectY, rectSize, rectSize);
-
- stroke(0);
-
- fill(circleColor);
-
- ellipse(circleX, circleY, circleSize, circleSize);
-
-}
-
-
-
-void update(int x, int y)
-
-{
-
- if( overCircle(circleX, circleY, circleSize) ) {
-
- circleOver = true;
-
- rectOver = false;
-
- } else if ( overRect(rectX, rectY, rectSize, rectSize) ) {
-
- rectOver = true;
-
- circleOver = false;
-
- } else {
-
- circleOver = rectOver = false;
-
- }
-
-}
-
-
-
-boolean overRect(int x, int y, int width, int height)
-
-{
-
- if (mouseX >= x && mouseX <= x+width &&
-
- mouseY >= y && mouseY <= y+height) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}
-
-
-
-boolean overCircle(int x, int y, int diameter)
-
-{
-
- float disX = x - mouseX;
-
- float disY = y - mouseY;
-
- if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
-}by Ira Greenberg. - - - -Using 2-dimensional arrays, record end points - -and replot scribbles between points.
- - - -Original Processing.org Example: ScribblePlotter
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// some scribble style constants that control
-
-// how the scribble plotting works
-
-int SCRIBBLE = 0;
-
-int HATCHING = 1;
-
-
-
-void setup(){
-
- size(200, 200);
-
- background(0);
-
-
-
- // create arrays to hold x, y coords
-
- float[]x = new float[4];
-
- float[]y = new float[4];
-
- // create a convenient 2-dimensional
-
- // array to hold x, y arrays
-
- float[][]xy = {x, y};
-
-
-
- // record points
-
- // x positions
-
- xy[0][0] = 25;
-
- xy[0][1] = 175;
-
- xy[0][2] = 175;
-
- xy[0][3] = 25;
-
-
-
- // y positions
-
- xy[1][0] = 25;
-
- xy[1][1] = 25;
-
- xy[1][2] = 175;
-
- xy[1][3] = 175;
-
-
-
- // call plotting function
-
- makeRect(xy);
-
-}
-
-
-
-void makeRect(float[][]pts){
-
- stroke(255);
-
- smooth();
-
-
-
- // scribble variables, that get passed as arguments to the scribble function
-
- int steps = 100;
-
- float scribVal = 3.0;
-
- for (int i=0; i< pts[0].length; i++){
-
- //plots vertices
-
- strokeWeight(5);
-
- point(pts[0][i], pts[1][i]);
-
-
-
- // call scribble function
-
- strokeWeight(.5);
-
- if (i>0){
-
- scribble(pts[0][i], pts[1][i], pts[0][i-1], pts[1][i-1], steps, scribVal, SCRIBBLE);
-
- }
-
- if (i== pts[0].length-1){
-
- // show some hatching between last 2 points
-
- scribble(pts[0][i], pts[1][i], pts[0][0], pts[1][0], steps, scribVal*2, HATCHING);
-
- }
-
- }
-
-}
-
-
-
-/*
-
-scribble function plots lines between end points,
-
-determined by steps and scribVal arguments.
-
-2 styles are available: SCRIBBLE and HATCHING, which
-
-are interestingly only dependent on parentheses
-
-placement in the line() function calls.
-
-*/
-
-void scribble(float x1, float y1, float x2, float y2, int steps, float scribVal, int style){
-
-
-
- float xStep = (x2-x1)/steps;
-
- float yStep = (y2-y1)/steps;
-
- for (int i = 0; i<steps; i++){
-
- if(style == SCRIBBLE){
-
- if (i<steps-1){
-
- line(x1, y1, x1+=xStep+random(-scribVal, scribVal), y1+=yStep+random(-scribVal, scribVal));
-
- }
-
- else {
-
- // extra line needed to attach line back to point- not necessary in HATCHING style
-
- line(x1, y1, x2, y2);
-
- }
-
- }
-
- else if (style == HATCHING){
-
- line(x1, y1, (x1+=xStep)+random(-scribVal, scribVal), (y1+=yStep)+random(-scribVal, scribVal));
-
- }
-
- }
-
-}Move the scrollbars left and right to change the positions of the images.
- - - -Original Processing.org Example: Scrollbar
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-/* @pjs preload="data/seedTop.jpg, data/seedBottom.jpg"; */
-
-HScrollbar hs1, hs2;
-
-
-
-PImage top, bottom; // Two image to load
-
-int topWidth, bottomWidth; // The width of the top and bottom images
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- hs1 = new HScrollbar(0, 20, width, 10, 3*5+1);
-
- hs2 = new HScrollbar(0, height-20, width, 10, 3*5+1);
-
- top = loadImage("data/seedTop.jpg");
-
- topWidth = top.width;
-
- bottom = loadImage("data/seedBottom.jpg");
-
- bottomWidth = bottom.width;
-
-}
-
-
-
-void draw()
-
-{
-
- background(255);
-
-
-
- // Get the position of the top scrollbar
-
- // and convert to a value to display the top image
-
- float topPos = hs1.getPos()-width/2;
-
- fill(255);
-
- image(top, width/2-topWidth/2 + topPos*2, 0);
-
-
-
- // Get the position of the bottom scrollbar
-
- // and convert to a value to display the bottom image
-
- float bottomPos = hs2.getPos()-width/2;
-
- fill(255);
-
- image(bottom, width/2-bottomWidth/2 + bottomPos*2, height/2);
-
-
-
- hs1.update();
-
- hs2.update();
-
- hs1.display();
-
- hs2.display();
-
-}
-
-
-
-
-
-class HScrollbar
-
-{
-
- int swidth, sheight; // width and height of bar
-
- int xpos, ypos; // x and y position of bar
-
- float spos, newspos; // x position of slider
-
- int sposMin, sposMax; // max and min values of slider
-
- int loose; // how loose/heavy
-
- boolean over; // is the mouse over the slider?
-
- boolean locked;
-
- float ratio;
-
-
-
- HScrollbar (int xp, int yp, int sw, int sh, int l) {
-
- swidth = sw;
-
- sheight = sh;
-
- int widthtoheight = sw - sh;
-
- ratio = (float)sw / (float)widthtoheight;
-
- xpos = xp;
-
- ypos = yp-sheight/2;
-
- spos = xpos + swidth/2 - sheight/2;
-
- newspos = spos;
-
- sposMin = xpos;
-
- sposMax = xpos + swidth - sheight;
-
- loose = l;
-
- }
-
-
-
- void update() {
-
- if(over()) {
-
- over = true;
-
- } else {
-
- over = false;
-
- }
-
- if(mousePressed && over) {
-
- locked = true;
-
- }
-
- if(!mousePressed) {
-
- locked = false;
-
- }
-
- if(locked) {
-
- newspos = constrain(mouseX-sheight/2, sposMin, sposMax);
-
- }
-
- if(abs(newspos - spos) > 1) {
-
- spos = spos + (newspos-spos)/loose;
-
- }
-
- }
-
-
-
- int constrain(int val, int minv, int maxv) {
-
- return min(max(val, minv), maxv);
-
- }
-
-
-
- boolean over() {
-
- if(mouseX > xpos && mouseX < xpos+swidth &&
-
- mouseY > ypos && mouseY < ypos+sheight) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-
-
- void display() {
-
- fill(255);
-
- rect(xpos, ypos, swidth, sheight);
-
- if(over || locked) {
-
- fill(153, 102, 0);
-
- } else {
-
- fill(102, 102, 102);
-
- }
-
- rect(spos, ypos, sheight, sheight);
-
- }
-
-
-
- float getPos() {
-
- // Convert spos to be values between
-
- // 0 and the total width of the scrollbar
-
- return spos * ratio;
-
- }
-
-}by James Patterson. - -Displaying a sequence of images creates the illusion of motion. -Twelve images are loaded and each is displayed individually in a loop.
- -Original Processing.org Example: Sequential
-
// All Examples Written by Casey Reas and Ben Fry
-// unless otherwise stated.
-/* @pjs preload="data/PT_anim0000.gif, data/PT_anim0001.gif, data/PT_anim0002.gif,
-data/PT_anim0003.gif, data/PT_anim0004.gif, data/PT_anim0005.gif,
-data/PT_anim0006.gif, data/PT_anim0007.gif, data/PT_anim0008.gif,
-data/PT_anim0009.gif, data/PT_anim0010.gif, data/PT_anim0011.gif"; */
-int numFrames = 12; // The number of frames in the animation
-int frame = 0;
-PImage[] images = new PImage[numFrames];
-
-void setup()
-{
- size(200, 200);
- frameRate(30);
-
- images[0] = loadImage("data/PT_anim0000.gif");
- images[1] = loadImage("data/PT_anim0001.gif");
- images[2] = loadImage("data/PT_anim0002.gif");
- images[3] = loadImage("data/PT_anim0003.gif");
- images[4] = loadImage("data/PT_anim0004.gif");
- images[5] = loadImage("data/PT_anim0005.gif");
- images[6] = loadImage("data/PT_anim0006.gif");
- images[7] = loadImage("data/PT_anim0007.gif");
- images[8] = loadImage("data/PT_anim0008.gif");
- images[9] = loadImage("data/PT_anim0009.gif");
- images[10] = loadImage("data/PT_anim0010.gif");
- images[11] = loadImage("data/PT_anim0011.gif");
-
- // If you don't want to load each image separately
- // and you know how many frames you have, you
- // can create the filenames as the program runs.
- // The nf() command does number formatting, which will
- // ensure that the number is (in this case) 4 digits.
- //for(int i=0; i<numFrames; i++) {
- // String imageName = "PT_anim" + nf(i, 4) + ".gif";
- // images[i] = loadImage(imageName);
- //}
-}
-
-void draw()
-{
- frame = (frame+1)%numFrames; // Use % to cycle through frames
- image(images[frame], 0, 0);
-}by Daniel Shiffman. - - - -Particles are generated each cycle through draw(), - -fall with gravity and fade out over time - -A ParticleSystem object manages a variable size (ArrayList) - -list of particles.
- - - -Original Processing.org Example: SimpleParticleSystem
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-ParticleSystem ps;
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- colorMode(RGB,255,255,255,100);
-
- ps = new ParticleSystem(1,new Vector3D(width/2,height/2,0));
-
- smooth();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- ps.run();
-
- ps.addParticle();
-
-}
-
-
-
-
-
-// A simple Particle class
-
-
-
-class Particle {
-
- Vector3D loc;
-
- Vector3D vel;
-
- Vector3D acc;
-
- float r;
-
- float timer;
-
-
-
- // One constructor
-
- Particle(Vector3D a, Vector3D v, Vector3D l, float r_) {
-
- acc = a.copy();
-
- vel = v.copy();
-
- loc = l.copy();
-
- r = r_;
-
- timer = 100.0;
-
- }
-
-
-
- // Another constructor (the one we are using here)
-
- Particle(Vector3D l) {
-
- acc = new Vector3D(0,0.05,0);
-
- vel = new Vector3D(random(-1,1),random(-2,0),0);
-
- loc = l.copy();
-
- r = 10.0;
-
- timer = 100.0;
-
- }
-
-
-
-
-
- void run() {
-
- update();
-
- render();
-
- }
-
-
-
- // Method to update location
-
- void update() {
-
- vel.add(acc);
-
- loc.add(vel);
-
- timer -= 1.0;
-
- }
-
-
-
- // Method to display
-
- void render() {
-
- ellipseMode(CENTER);
-
- noStroke();
-
- fill(255,timer);
-
- ellipse(loc.x,loc.y,r,r);
-
- }
-
-
-
- // Is the particle still useful?
-
- boolean dead() {
-
- if (timer <= 0.0) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-}
-
-
-
-
-
-// A class to describe a group of Particles
-
-// An ArrayList is used to manage the list of Particles
-
-
-
-class ParticleSystem {
-
-
-
- ArrayList particles; // An arraylist for all the particles
-
- Vector3D origin; // An origin point for where particles are birthed
-
-
-
- ParticleSystem(int num, Vector3D v) {
-
- particles = new ArrayList(); // Initialize the arraylist
-
- origin = v.copy(); // Store the origin point
-
- for (int i = 0; i < num; i++) {
-
- particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist
-
- }
-
- }
-
-
-
- void run() {
-
- // Cycle through the ArrayList backwards b/c we are deleting
-
- for (int i = particles.size()-1; i >= 0; i--) {
-
- Particle p = (Particle) particles.get(i);
-
- p.run();
-
- if (p.dead()) {
-
- particles.remove(i);
-
- }
-
- }
-
- }
-
-
-
- void addParticle() {
-
- particles.add(new Particle(origin));
-
- }
-
-
-
- void addParticle(Particle p) {
-
- particles.add(p);
-
- }
-
-
-
- // A method to test if the particle system still has particles
-
- boolean dead() {
-
- if (particles.isEmpty()) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-
-
-}
-
-
-
-
-
-
-
-// Simple Vector3D Class
-
-
-
-public class Vector3D {
-
- public float x;
-
- public float y;
-
- public float z;
-
-
-
- Vector3D(float x_, float y_, float z_) {
-
- x = x_; y = y_; z = z_;
-
- }
-
-
-
- Vector3D(float x_, float y_) {
-
- x = x_; y = y_; z = 0f;
-
- }
-
-
-
- Vector3D() {
-
- x = 0f; y = 0f; z = 0f;
-
- }
-
-
-
- void setX(float x_) {
-
- x = x_;
-
- }
-
-
-
- void setY(float y_) {
-
- y = y_;
-
- }
-
-
-
- void setZ(float z_) {
-
- z = z_;
-
- }
-
-
-
- void setXY(float x_, float y_) {
-
- x = x_;
-
- y = y_;
-
- }
-
-
-
- void setXYZ(float x_, float y_, float z_) {
-
- x = x_;
-
- y = y_;
-
- z = z_;
-
- }
-
-
-
- void setXYZ(Vector3D v) {
-
- x = v.x;
-
- y = v.y;
-
- z = v.z;
-
- }
-
- public float magnitude() {
-
- return (float) Math.sqrt(x*x + y*y + z*z);
-
- }
-
-
-
- public Vector3D copy() {
-
- return new Vector3D(x,y,z);
-
- }
-
-
-
- public Vector3D copy(Vector3D v) {
-
- return new Vector3D(v.x, v.y,v.z);
-
- }
-
-
-
- public void add(Vector3D v) {
-
- x += v.x;
-
- y += v.y;
-
- z += v.z;
-
- }
-
-
-
- public void sub(Vector3D v) {
-
- x -= v.x;
-
- y -= v.y;
-
- z -= v.z;
-
- }
-
-
-
- public void mult(float n) {
-
- x *= n;
-
- y *= n;
-
- z *= n;
-
- }
-
-
-
- public void div(float n) {
-
- x /= n;
-
- y /= n;
-
- z /= n;
-
- }
-
-
-
- public void normalize() {
-
- float m = magnitude();
-
- if (m > 0) {
-
- div(m);
-
- }
-
- }
-
-
-
- public void limit(float max) {
-
- if (magnitude() > max) {
-
- normalize();
-
- mult(max);
-
- }
-
- }
-
-
-
- public float heading2D() {
-
- float angle = (float) Math.atan2(-y, x);
-
- return -1*angle;
-
- }
-
-
-
- public Vector3D add(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x + v2.x,v1.y + v2.y, v1.z + v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D sub(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x - v2.x,v1.y - v2.y,v1.z - v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D div(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x/n,v1.y/n,v1.z/n);
-
- return v;
-
- }
-
-
-
- public Vector3D mult(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x*n,v1.y*n,v1.z*n);
-
- return v;
-
- }
-
-
-
- public float distance (Vector3D v1, Vector3D v2) {
-
- float dx = v1.x - v2.x;
-
- float dy = v1.y - v2.y;
-
- float dz = v1.z - v2.z;
-
- return (float) Math.sqrt(dx*dx + dy*dy + dz*dz);
-
- }
-
-
-
-}by Glen Murphy. - - - -Drag the mouse across the image to move the particles. - -Code has not been optimised and will run fairly slowly. - - - -Completed 5 November 2002
- - - -Original Processing.org Example: Smoke
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int res = 2;
-
-int penSize = 30;
-
-int lwidth;
-
-int lheight;
-
-int pnum = 30000;
-
-vsquare[][] v;
-
-vbuffer[][] vbuf;
-
-particle[] p;
-
-int pcount = 0;
-
-int mouseXvel = 0;
-
-int mouseYvel = 0;
-
-
-
-int randomGust = 0;
-
-int randomGustMax;
-
-float randomGustX;
-
-float randomGustY;
-
-float randomGustSize;
-
-float randomGustXvel;
-
-float randomGustYvel;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- lwidth = width/res;
-
- lheight = height/res;
-
- v = new vsquare[lwidth+1][lheight+1];
-
- vbuf = new vbuffer[lwidth+1][lheight+1];
-
- p = new particle[pnum];
-
- noStroke();
-
- for(int i = 0; i < pnum; i++) {
-
- p[i] = new particle(random(width/2-20,width/2+20),random(height-20,height));
-
- }
-
- for(int i = 0; i <= lwidth; i++) {
-
- for(int u = 0; u <= lheight; u++) {
-
- v[i][u] = new vsquare(i*res,u*res);
-
- vbuf[i][u] = new vbuffer(i*res,u*res);
-
- }
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- background(#cccccc);
-
-
-
- int axvel = mouseX-pmouseX;
-
- int ayvel = mouseY-pmouseY;
-
-
-
- mouseXvel = (axvel != mouseXvel) ? axvel : 0;
-
- mouseYvel = (ayvel != mouseYvel) ? ayvel : 0;
-
-
-
- if(randomGust <= 0) {
-
- if(random(0,10)<1) {
-
- randomGustMax = (int)random(5,12);
-
- randomGust = randomGustMax;
-
- randomGustX = random(0,width);
-
- randomGustY = random(0,height-10);
-
- randomGustSize = random(0,50);
-
- if(randomGustX > width/2) {
-
- randomGustXvel = random(-8,0);
-
- } else {
-
- randomGustXvel = random(0,8);
-
- }
-
- randomGustYvel = random(-2,1);
-
- }
-
- randomGust--;
-
- }
-
-
-
- for(int i = 0; i < lwidth; i++) {
-
- for(int u = 0; u < lheight; u++) {
-
- vbuf[i][u].updatebuf(i,u);
-
- v[i][u].col = 0;
-
- }
-
- }
-
- for(int i = 0; i < pnum-1; i++) {
-
- p[i].updatepos();
-
- }
-
- for(int i = 0; i < lwidth; i++) {
-
- for(int u = 0; u < lheight; u++) {
-
- v[i][u].addbuffer(i, u);
-
- v[i][u].updatevels(mouseXvel, mouseYvel);
-
- v[i][u].display(i, u);
-
- }
-
- }
-
- randomGust = 0;
-
-}
-
-
-
-class particle
-
-{
-
- float x;
-
- float y;
-
- float xvel;
-
- float yvel;
-
- float temp;
-
- int pos;
-
-
-
- particle(float xIn, float yIn) {
-
- x = xIn;
-
- y = yIn;
-
- }
-
-
-
- void reposition() {
-
- x = width/2+random(-20,20);
-
- y = random(height-10,height);
-
-
-
- xvel = random(-1,1);
-
- yvel = random(-1,1);
-
- }
-
-
-
- void updatepos() {
-
- int vi = (int)(x/res);
-
- int vu = (int)(y/res);
-
-
-
- if(vi > 0 && vi < lwidth && vu > 0 && vu < lheight) {
-
- v[vi][vu].addcolour(2);
-
-
-
- float ax = (x%res)/res;
-
- float ay = (y%res)/res;
-
-
-
- xvel += (1-ax)*v[vi][vu].xvel*0.05;
-
- yvel += (1-ay)*v[vi][vu].yvel*0.05;
-
-
-
- xvel += ax*v[vi+1][vu].xvel*0.05;
-
- yvel += ax*v[vi+1][vu].yvel*0.05;
-
-
-
- xvel += ay*v[vi][vu+1].xvel*0.05;
-
- yvel += ay*v[vi][vu+1].yvel*0.05;
-
-
-
- v[vi][vu].yvel -= (1-ay)*0.003;
-
- v[vi+1][vu].yvel -= ax*0.003;
-
-
-
- if(v[vi][vu].yvel < 0) v[vi][vu].yvel *= 1.00025;
-
-
-
- x += xvel;
-
- y += yvel;
-
- }
-
- else {
-
- reposition();
-
- }
-
- if(random(0,400) < 1) {
-
- reposition();
-
- }
-
- xvel *= 0.6;
-
- yvel *= 0.6;
-
- }
-
-}
-
-
-
-class vbuffer
-
-{
-
- int x;
-
- int y;
-
- float xvel;
-
- float yvel;
-
- float pressurex = 0;
-
- float pressurey = 0;
-
- float pressure = 0;
-
-
-
- vbuffer(int xIn,int yIn) {
-
- x = xIn;
-
- y = yIn;
-
- pressurex = 0;
-
- pressurey = 0;
-
- }
-
-
-
- void updatebuf(int i, int u) {
-
- if(i>0 && i<lwidth && u>0 && u<lheight) {
-
- pressurex = (v[i-1][u-1].xvel*0.5 + v[i-1][u].xvel + v[i-1][u+1].xvel*0.5 - v[i+1][u-1].xvel*0.5 - v[i+1][u].xvel - v[i+1][u+1].xvel*0.5);
-
- pressurey = (v[i-1][u-1].yvel*0.5 + v[i][u-1].yvel + v[i+1][u-1].yvel*0.5 - v[i-1][u+1].yvel*0.5 - v[i][u+1].yvel - v[i+1][u+1].yvel*0.5);
-
- pressure = (pressurex + pressurey)*0.25;
-
- }
-
- }
-
-}
-
-
-
-class vsquare {
-
- int x;
-
- int y;
-
- float xvel;
-
- float yvel;
-
- float col;
-
-
-
- vsquare(int xIn,int yIn) {
-
- x = xIn;
-
- y = yIn;
-
- }
-
-
-
- void addbuffer(int i, int u) {
-
- if(i>0 && i<lwidth && u>0 && u<lheight) {
-
- xvel += (vbuf[i-1][u-1].pressure*0.5
-
- +vbuf[i-1][u].pressure
-
- +vbuf[i-1][u+1].pressure*0.5
-
- -vbuf[i+1][u-1].pressure*0.5
-
- -vbuf[i+1][u].pressure
-
- -vbuf[i+1][u+1].pressure*0.5
-
- )*0.49;
-
- yvel += (vbuf[i-1][u-1].pressure*0.5
-
- +vbuf[i][u-1].pressure
-
- +vbuf[i+1][u-1].pressure*0.5
-
- -vbuf[i-1][u+1].pressure*0.5
-
- -vbuf[i][u+1].pressure
-
- -vbuf[i+1][u+1].pressure*0.5
-
- )*0.49;
-
- }
-
- }
-
-
-
- void updatevels(int mvelX, int mvelY) {
-
- float adj;
-
- float opp;
-
- float dist;
-
- float mod;
-
-
-
- if(mousePressed) {
-
- adj = x - mouseX;
-
- opp = y - mouseY;
-
- dist = sqrt(opp*opp + adj*adj);
-
- if(dist < penSize) {
-
- if(dist < 4) dist = penSize;
-
- mod = penSize/dist;
-
- xvel += mvelX*mod;
-
- yvel += mvelY*mod;
-
- }
-
- }
-
- if(randomGust > 0) {
-
- adj = x - randomGustX;
-
- opp = y - randomGustY;
-
- dist = sqrt(opp*opp + adj*adj);
-
- if(dist < randomGustSize) {
-
- if(dist < res*2) dist = randomGustSize;
-
- mod = randomGustSize/dist;
-
- xvel += (randomGustMax-randomGust)*randomGustXvel*mod;
-
- yvel += (randomGustMax-randomGust)*randomGustYvel*mod;
-
- }
-
- }
-
- xvel *= 0.99;
-
- yvel *= 0.98;
-
- }
-
-
-
- void addcolour(int amt) {
-
- col += amt;
-
- if(col > 196) col = 196;
-
- }
-
-
-
- void display(int i, int u) {
-
- float tcol = 0;
-
- if(i>0 && i<lwidth-1 && u>0 && u<lheight-1) {
-
-
-
- tcol = (+ v[i][u+1].col
-
- + v[i+1][u].col
-
- + v[i+1][u+1].col*0.5
-
- )*0.3;
-
- tcol = (int)(tcol+col*0.5);
-
- }
-
-
-
- fill(255-tcol, 255-tcol, 255-tcol);
-
- rect(x,y,res,res);
-
- col = 0;
-
- }
-
-}by Daniel Shiffman. - - - -A basic smoke effect using a particle system. - -Each particle is rendered as an alpha masked image.
- - - -Original Processing.org Example: SmokeParticleSystem
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-ParticleSystem ps;
-
-Random generator;
-
-
-
-void setup() {
-
- size(200, 200);
-
- frameRate(30);
-
- colorMode(RGB, 255, 255, 255, 100);
-
- generator = new Random();
-
-
-
- // Create an alpha masked image to be applied as the particle's texture
-
- PImage msk = loadImage("texture.gif");
-
- PImage img = new PImage(msk.width,msk.height);
-
- for (int i = 0; i < img.pixels.length; i++) img.pixels[i] = color(255);
-
- img.mask(msk);
-
-
-
- ps = new ParticleSystem(0,new Vector3D(width/2,height-20),img);
-
- smooth();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
-
-
- // Calculate a "wind" force based on mouse horizontal position
-
- float dx = (mouseX - width/2) / 1000.0;
-
- Vector3D wind = new Vector3D(dx,0,0);
-
- ps.add_force(wind);
-
- ps.run();
-
- for (int i = 0; i < 2; i++) {
-
- ps.addParticle();
-
- }
-
-
-
- // Draw an arrow representing the wind force
-
- drawVector(wind, new Vector3D(width/2,50,0),500);
-
-
-
-}
-
-
-
-// Renders a vector object 'v' as an arrow and a location 'loc'
-
-void drawVector(Vector3D v, Vector3D loc, float scayl) {
-
- pushMatrix();
-
- float arrowsize = 4;
-
- // Translate to location to render vector
-
- translate(loc.x,loc.y);
-
- stroke(255);
-
- // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate
-
- rotate(v.heading2D());
-
- // Calculate length of vector & scale it to be bigger or smaller if necessary
-
- float len = v.magnitude()*scayl;
-
- // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction)
-
- line(0,0,len,0);
-
- line(len,0,len-arrowsize,+arrowsize/2);
-
- line(len,0,len-arrowsize,-arrowsize/2);
-
- popMatrix();
-
-}
-
-
-
-
-
-
-
-// A simple Particle class, renders the particle as an image
-
-
-
-class Particle {
-
- Vector3D loc;
-
- Vector3D vel;
-
- Vector3D acc;
-
- float timer;
-
- PImage img;
-
-
-
- // One constructor
-
- Particle(Vector3D a, Vector3D v, Vector3D l, PImage img_) {
-
- acc = a.copy();
-
- vel = v.copy();
-
- loc = l.copy();
-
- timer = 100.0;
-
- img = img_;
-
- }
-
-
-
- // Another constructor (the one we are using here)
-
- Particle(Vector3D l,PImage img_) {
-
- acc = new Vector3D(0.0,0.0,0.0);
-
- float x = (float) generator.nextGaussian()*0.3f;
-
- float y = (float) generator.nextGaussian()*0.3f - 1.0f;
-
- vel = new Vector3D(x,y,0);
-
- loc = l.copy();
-
- timer = 100.0;
-
- img = img_;
-
- }
-
-
-
- void run() {
-
- update();
-
- render();
-
- }
-
-
-
- // Method to apply a force vector to the Particle object
-
- // Note we are ignoring "mass" here
-
- void add_force(Vector3D f) {
-
- acc.add(f);
-
- }
-
-
-
- // Method to update location
-
- void update() {
-
- vel.add(acc);
-
- loc.add(vel);
-
- timer -= 2.5;
-
- acc.setXY(0,0);
-
- }
-
-
-
- // Method to display
-
- void render() {
-
- imageMode(CORNER);
-
- tint(255,timer);
-
- image(img,loc.x-img.width/2,loc.y-img.height/2);
-
- }
-
-
-
- // Is the particle still useful?
-
- boolean dead() {
-
- if (timer <= 0.0) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-}
-
-
-
-
-
-// A class to describe a group of Particles
-
-// An ArrayList is used to manage the list of Particles
-
-
-
-class ParticleSystem {
-
-
-
- ArrayList particles; // An arraylist for all the particles
-
- Vector3D origin; // An origin point for where particles are birthed
-
- PImage img;
-
-
-
- ParticleSystem(int num, Vector3D v, PImage img_) {
-
- particles = new ArrayList(); // Initialize the arraylist
-
- origin = v.copy(); // Store the origin point
-
- img = img_;
-
- for (int i = 0; i < num; i++) {
-
- particles.add(new Particle(origin, img)); // Add "num" amount of particles to the arraylist
-
- }
-
- }
-
-
-
- void run() {
-
- // Cycle through the ArrayList backwards b/c we are deleting
-
- for (int i = particles.size()-1; i >= 0; i--) {
-
- Particle p = (Particle) particles.get(i);
-
- p.run();
-
- if (p.dead()) {
-
- particles.remove(i);
-
- }
-
- }
-
- }
-
-
-
- // Method to add a force vector to all particles currently in the system
-
- void add_force(Vector3D dir) {
-
- for (int i = particles.size()-1; i >= 0; i--) {
-
- Particle p = (Particle) particles.get(i);
-
- p.add_force(dir);
-
- }
-
-
-
- }
-
-
-
- void addParticle() {
-
- particles.add(new Particle(origin,img));
-
- }
-
-
-
- void addParticle(Particle p) {
-
- particles.add(p);
-
- }
-
-
-
- // A method to test if the particle system still has particles
-
- boolean dead() {
-
- if (particles.isEmpty()) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-
-
-}
-
-
-
-
-
-public class Vector3D {
-
- public float x;
-
- public float y;
-
- public float z;
-
-
-
- Vector3D(float x_, float y_, float z_) {
-
- x = x_; y = y_; z = z_;
-
- }
-
-
-
- Vector3D(float x_, float y_) {
-
- x = x_; y = y_; z = 0f;
-
- }
-
-
-
- Vector3D() {
-
- x = 0f; y = 0f; z = 0f;
-
- }
-
-
-
- void setX(float x_) {
-
- x = x_;
-
- }
-
-
-
- void setY(float y_) {
-
- y = y_;
-
- }
-
-
-
- void setZ(float z_) {
-
- z = z_;
-
- }
-
-
-
- void setXY(float x_, float y_) {
-
- x = x_;
-
- y = y_;
-
- }
-
-
-
- void setXYZ(float x_, float y_, float z_) {
-
- x = x_;
-
- y = y_;
-
- z = z_;
-
- }
-
-
-
- void setXYZ(Vector3D v) {
-
- x = v.x;
-
- y = v.y;
-
- z = v.z;
-
- }
-
- public float magnitude() {
-
- return (float) Math.sqrt(x*x + y*y + z*z);
-
- }
-
-
-
- public Vector3D copy() {
-
- return new Vector3D(x,y,z);
-
- }
-
-
-
- public Vector3D copy(Vector3D v) {
-
- return new Vector3D(v.x, v.y,v.z);
-
- }
-
-
-
- public void add(Vector3D v) {
-
- x += v.x;
-
- y += v.y;
-
- z += v.z;
-
- }
-
-
-
- public void sub(Vector3D v) {
-
- x -= v.x;
-
- y -= v.y;
-
- z -= v.z;
-
- }
-
-
-
- public void mult(float n) {
-
- x *= n;
-
- y *= n;
-
- z *= n;
-
- }
-
-
-
- public void div(float n) {
-
- x /= n;
-
- y /= n;
-
- z /= n;
-
- }
-
-
-
- /*public float dot(Vector3D v) {
-
- //implement DOT product
-
- }*/
-
-
-
- /*public Vector3D cross(Vector3D v) {
-
- //implement CROSS product
-
- }*/
-
-
-
- public void normalize() {
-
- float m = magnitude();
-
- if (m > 0) {
-
- div(m);
-
- }
-
- }
-
-
-
- public void limit(float max) {
-
- if (magnitude() > max) {
-
- normalize();
-
- mult(max);
-
- }
-
- }
-
-
-
- public float heading2D() {
-
- float angle = (float) Math.atan2(-y, x);
-
- return -1*angle;
-
- }
-
-
-
- public Vector3D add(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x + v2.x,v1.y + v2.y, v1.z + v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D sub(Vector3D v1, Vector3D v2) {
-
- Vector3D v = new Vector3D(v1.x - v2.x,v1.y - v2.y,v1.z - v2.z);
-
- return v;
-
- }
-
-
-
- public Vector3D div(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x/n,v1.y/n,v1.z/n);
-
- return v;
-
- }
-
-
-
- public Vector3D mult(Vector3D v1, float n) {
-
- Vector3D v = new Vector3D(v1.x*n,v1.y*n,v1.z*n);
-
- return v;
-
- }
-
-
-
- public float distance (Vector3D v1, Vector3D v2) {
-
- float dx = v1.x - v2.x;
-
- float dy = v1.y - v2.y;
-
- float dz = v1.z - v2.z;
-
- return (float) Math.sqrt(dx*dx + dy*dy + dz*dz);
-
- }
-
-
-
-}by Ira Greenberg. - - - -Softbody dynamics simulation using curveVertex() and curveTightness()
- - - -Original Processing.org Example: SoftBody
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// center point
-
-float centerX = 0, centerY = 0;
-
-
-
-float radius = 45, rotAngle = -90;
-
-float accelX, accelY;
-
-float springing = .0085, damping = .98;
-
-
-
-//corner nodes
-
-int nodes = 5;
-
-float nodeStartX[] = new float[nodes];
-
-float nodeStartY[] = new float[nodes];
-
-float[]nodeX = new float[nodes];
-
-float[]nodeY = new float[nodes];
-
-float[]angle = new float[nodes];
-
-float[]frequency = new float[nodes];
-
-
-
-// soft-body dynamics
-
-float organicConstant = 1;
-
-
-
-void setup() {
-
- size(200, 200);
-
- //center shape in window
-
- centerX = width/2;
-
- centerY = height/2;
-
- // iniitalize frequencies for corner nodes
-
- for (int i=0; i<nodes; i++){
-
- frequency[i] = random(5, 12);
-
- }
-
- noStroke();
-
- smooth();
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- //fade background
-
- fill(0, 100);
-
- rect(0,0,width, height);
-
- drawShape();
-
- moveShape();
-
-}
-
-
-
-void drawShape() {
-
- // calculate node starting locations
-
- for (int i=0; i<nodes; i++){
-
- nodeStartX[i] = centerX+cos(radians(rotAngle))*radius;
-
- nodeStartY[i] = centerY+sin(radians(rotAngle))*radius;
-
- rotAngle += 360.0/nodes;
-
- }
-
-
-
- // draw polygon
-
- curveTightness(organicConstant);
-
- fill(255);
-
- beginShape();
-
- for (int i=0; i<nodes; i++){
-
- curveVertex(nodeX[i], nodeY[i]);
-
- }
-
- for (int i=0; i<nodes-1; i++){
-
- curveVertex(nodeX[i], nodeY[i]);
-
- }
-
- endShape(CLOSE);
-
-}
-
-
-
-void moveShape() {
-
- //move center point
-
- float deltaX = mouseX-centerX;
-
- float deltaY = mouseY-centerY;
-
-
-
- // create springing effect
-
- deltaX *= springing;
-
- deltaY *= springing;
-
- accelX += deltaX;
-
- accelY += deltaY;
-
-
-
- // move predator's center
-
- centerX += accelX;
-
- centerY += accelY;
-
-
-
- // slow down springing
-
- accelX *= damping;
-
- accelY *= damping;
-
-
-
- // change curve tightness
-
- organicConstant = 1-((abs(accelX)+abs(accelY))*.1);
-
-
-
- //move nodes
-
- for (int i=0; i<nodes; i++){
-
- nodeX[i] = nodeStartX[i]+sin(radians(angle[i]))*(accelX*2);
-
- nodeY[i] = nodeStartY[i]+sin(radians(angle[i]))*(accelY*2);
-
- angle[i]+=frequency[i];
-
- }
-
-}by Mike Davis. - - - -A short program for alife experiments. Click in the window to restart. - -Each cell is represented by a pixel on the display as well as an entry in - -the array 'cells'. Each cell has a run() method, which performs actions - -based on the cell's surroundings. Cells run one at a time (to avoid conflicts - -like wanting to move to the same space) and in random order.
- - - -Original Processing.org Example: Spore1
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-World w;
-
-int numcells = 0;
-
-int maxcells = 4700;
-
-Cell[] cells = new Cell[maxcells];
-
-color spore_color;
-
-// set lower for smoother animation, higher for faster simulation
-
-int runs_per_loop = 100;
-
-color black = color(0, 0, 0);
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- frameRate(24);
-
- clearscr();
-
- w = new World();
-
- spore_color = color(172, 255, 128);
-
- seed();
-
-}
-
-
-
-void seed()
-
-{
-
- // Add cells at random places
-
- for (int i = 0; i < maxcells; i++)
-
- {
-
- int cX = (int)random(width);
-
- int cY = (int)random(height);
-
- if (w.getpix(cX, cY) == black)
-
- {
-
- w.setpix(cX, cY, spore_color);
-
- cells[numcells] = new Cell(cX, cY);
-
- numcells++;
-
- }
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- // Run cells in random order
-
- for (int i = 0; i < runs_per_loop; i++) {
-
- int selected = min((int)random(numcells), numcells - 1);
-
- cells[selected].run();
-
- }
-
-}
-
-
-
-void clearscr()
-
-{
-
- background(0);
-
-}
-
-
-
-class Cell
-
-{
-
- int x, y;
-
- Cell(int xin, int yin)
-
- {
-
- x = xin;
-
- y = yin;
-
- }
-
-
-
- // Perform action based on surroundings
-
- void run()
-
- {
-
- // Fix cell coordinates
-
- while(x < 0) {
-
- x+=width;
-
- }
-
- while(x > width - 1) {
-
- x-=width;
-
- }
-
- while(y < 0) {
-
- y+=height;
-
- }
-
- while(y > height - 1) {
-
- y-=height;
-
- }
-
-
-
- // Cell instructions
-
- if (w.getpix(x + 1, y) == black) {
-
- move(0, 1);
-
- } else if (w.getpix(x, y - 1) != black && w.getpix(x, y + 1) != black) {
-
- move((int)random(9) - 4, (int)random(9) - 4);
-
- }
-
- }
-
-
-
- // Will move the cell (dx, dy) units if that space is empty
-
- void move(int dx, int dy) {
-
- if (w.getpix(x + dx, y + dy) == black) {
-
- w.setpix(x + dx, y + dy, w.getpix(x, y));
-
- w.setpix(x, y, color(0));
-
- x += dx;
-
- y += dy;
-
- }
-
- }
-
-}
-
-
-
-// The World class simply provides two functions, get and set, which access the
-
-// display in the same way as getPixel and setPixel. The only difference is that
-
-// the World class's get and set do screen wraparound ("toroidal coordinates").
-
-class World
-
-{
-
- void setpix(int x, int y, int c) {
-
- while(x < 0) x+=width;
-
- while(x > width - 1) x-=width;
-
- while(y < 0) y+=height;
-
- while(y > height - 1) y-=height;
-
- set(x, y, c);
-
- }
-
-
-
- color getpix(int x, int y) {
-
- while(x < 0) x+=width;
-
- while(x > width - 1) x-=width;
-
- while(y < 0) y+=height;
-
- while(y > height - 1) y-=height;
-
- return get(x, y);
-
- }
-
-}
-
-
-
-void mousePressed()
-
-{
-
- numcells = 0;
-
- setup();
-
-}by Mike Davis. - - - -A short program for alife experiments. Click in the window to restart. - -Each cell is represented by a pixel on the display as well as an entry in - -the array 'cells'. Each cell has a run() method, which performs actions - -based on the cell's surroundings. Cells run one at a time (to avoid conflicts - -like wanting to move to the same space) and in random order.
- - - -Original Processing.org Example: Spore2
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-World w;
-
-int maxcells = 4000;
-
-int numcells;
-
-Cell[] cells = new Cell[maxcells];
-
-color spore1, spore2, spore3, spore4;
-
-color black = color(0, 0, 0);
-
-// set lower for smoother animation, higher for faster simulation
-
-int runs_per_loop = 100;
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- frameRate(24);
-
- clearscr();
-
- w = new World();
-
- spore1 = color(128, 172, 255);
-
- spore2 = color(64, 128, 255);
-
- spore3 = color(255, 128, 172);
-
- spore4 = color(255, 64, 128);
-
- numcells = 0;
-
- seed();
-
-}
-
-
-
-void seed()
-
-{
-
- // Add cells at random places
-
- for (int i = 0; i < maxcells; i++)
-
- {
-
- int cX = int(random(width));
-
- int cY = int(random(height));
-
- int c;
-
- float r = random(1);
-
- if (r < 0.25) c = spore1;
-
- else if (r < 0.5) c = spore2;
-
- else if (r < 0.75) c = spore3;
-
- else c = spore4;
-
- if (w.getpix(cX, cY) == black)
-
- {
-
- w.setpix(cX, cY, c);
-
- cells[numcells] = new Cell(cX, cY);
-
- numcells++;
-
- }
-
- }
-
-}
-
-
-
-void draw()
-
-{
-
- // Run cells in random order
-
- for (int i = 0; i < runs_per_loop; i++) {
-
- int selected = min((int)random(numcells), numcells - 1);
-
- cells[selected].run();
-
- }
-
-}
-
-
-
-void clearscr()
-
-{
-
- for (int y = 0; y < height; y++) {
-
- for (int x = 0; x < width; x++) {
-
- set(x, y, color(0));
-
- }
-
- }
-
-}
-
-
-
-class Cell
-
-{
-
- int x, y;
-
- Cell(int xin, int yin)
-
- {
-
- x = xin;
-
- y = yin;
-
- }
-
- // Perform action based on surroundings
-
- void run()
-
- {
-
- // Fix cell coordinates
-
- while(x < 0) {
-
- x+=width;
-
- }
-
- while(x > width - 1) {
-
- x-=width;
-
- }
-
- while(y < 0) {
-
- y+=height;
-
- }
-
- while(y > height - 1) {
-
- y-=height;
-
- }
-
-
-
- // Cell instructions
-
- int myColor = w.getpix(x, y);
-
- if (myColor == spore1) {
-
- if (w.getpix(x - 1, y + 1) == black && w.getpix(x + 1, y + 1) == black && w.getpix(x, y + 1) == black) move(0, 1);
-
- else if (w.getpix(x - 1, y) == spore2 && w.getpix(x - 1, y - 1) != black) move(0, -1);
-
- else if (w.getpix(x - 1, y) == spore2 && w.getpix(x - 1, y - 1) == black) move(-1, -1);
-
- else if (w.getpix(x + 1, y) == spore1 && w.getpix(x + 1, y - 1) != black) move(0, -1);
-
- else if (w.getpix(x + 1, y) == spore1 && w.getpix(x + 1, y - 1) == black) move(1, -1);
-
- else move((int)random(3) - 1, 0);
-
- } else if (myColor == spore2) {
-
- if (w.getpix(x - 1, y + 1) == black && w.getpix(x + 1, y + 1) == black && w.getpix(x, y + 1) == black) move(0, 1);
-
- else if (w.getpix(x + 1, y) == spore1 && w.getpix(x + 1, y - 1) != black) move(0, -1);
-
- else if (w.getpix(x + 1, y) == spore1 && w.getpix(x + 1, y - 1) == black) move(1, -1);
-
- else if (w.getpix(x - 1, y) == spore2 && w.getpix(x - 1, y - 1) != black) move(0, -1);
-
- else if (w.getpix(x - 1, y) == spore2 && w.getpix(x - 1, y - 1) == black) move(-1, -1);
-
- else move((int)random(3) - 1, 0);
-
- }
-
- else if (myColor == spore3)
-
- {
-
- if (w.getpix(x - 1, y - 1) == black && w.getpix(x + 1, y - 1) == black && w.getpix(x, y - 1) == black) move(0, -1);
-
- else if (w.getpix(x - 1, y) == spore4 && w.getpix(x - 1, y + 1) != black) move(0, 1);
-
- else if (w.getpix(x - 1, y) == spore4 && w.getpix(x - 1, y + 1) == black) move(-1, 1);
-
- else if (w.getpix(x + 1, y) == spore3 && w.getpix(x + 1, y + 1) != black) move(0, 1);
-
- else if (w.getpix(x + 1, y) == spore3 && w.getpix(x + 1, y + 1) == black) move(1, 1);
-
- else move((int)random(3) - 1, 0);
-
- }
-
- else if (myColor == spore4)
-
- {
-
- if (w.getpix(x - 1, y - 1) == black && w.getpix(x + 1, y - 1) == black && w.getpix(x, y - 1) == black) move(0, -1);
-
- else if (w.getpix(x + 1, y) == spore3 && w.getpix(x + 1, y + 1) != black) move(0, 1);
-
- else if (w.getpix(x + 1, y) == spore3 && w.getpix(x + 1, y + 1) == black) move(1, 1);
-
- else if (w.getpix(x - 1, y) == spore4 && w.getpix(x - 1, y + 1) != black) move(0, 1);
-
- else if (w.getpix(x - 1, y) == spore4 && w.getpix(x - 1, y + 1) == black) move(-1, 1);
-
- else move((int)random(3) - 1, 0);
-
- }
-
- }
-
-
-
- // Will move the cell (dx, dy) units if that space is empty
-
- void move(int dx, int dy) {
-
- if (w.getpix(x + dx, y + dy) == black) {
-
- w.setpix(x + dx, y + dy, w.getpix(x, y));
-
- w.setpix(x, y, color(0));
-
- x += dx;
-
- y += dy;
-
- }
-
- }
-
-}
-
-
-
-// The World class simply provides two functions, get and set, which access the
-
-// display in the same way as getPixel and setPixel. The only difference is that
-
-// the World class's get and set do screen wraparound ("toroidal coordinates").
-
-class World
-
-{
-
- void setpix(int x, int y, int c) {
-
- while(x < 0) x+=width;
-
- while(x > width - 1) x-=width;
-
- while(y < 0) y+=height;
-
- while(y > height - 1) y-=height;
-
- set(x, y, c);
-
- }
-
-
-
- color getpix(int x, int y) {
-
- while(x < 0) x+=width;
-
- while(x > width - 1) x-=width;
-
- while(y < 0) y+=height;
-
- while(y > height - 1) y-=height;
-
- return get(x, y);
-
- }
-
-}
-
-
-
-void mousePressed()
-
-{
-
- setup();
-
-}Click, drag, and release the horizontal bar to start the spring.
- - - -Original Processing.org Example: Spring
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-// Spring drawing constants for top bar
-
-int s_height = 16; // Height
-
-int left = 50; // Left position
-
-int right = 150; // Right position
-
-int max = 100; // Maximum Y value
-
-int min = 20; // Minimum Y value
-
-boolean over = false; // If mouse over
-
-boolean move = false; // If mouse down and over
-
-
-
-// Spring simulation constants
-
-float M = 0.8; // Mass
-
-float K = 0.2; // Spring constant
-
-float D = 0.92; // Damping
-
-float R = 60; // Rest position
-
-
-
-// Spring simulation variables
-
-float ps = 60.0; // Position
-
-float vs = 0.0; // Velocity
-
-float as = 0; // Acceleration
-
-float f = 0; // Force
-
-
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- rectMode(CORNERS);
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- background(102);
-
- updateSpring();
-
- drawSpring();
-
-}
-
-
-
-void drawSpring()
-
-{
-
- // Draw base
-
- fill(0.2);
-
- float b_width = 0.5 * ps + -8;
-
- rect(width/2 - b_width, ps + s_height, width/2 + b_width, 150);
-
-
-
- // Set color and draw top bar
-
- if(over || move) {
-
- fill(255);
-
- } else {
-
- fill(204);
-
- }
-
- rect(left, ps, right, ps + s_height);
-
-}
-
-
-
-
-
-void updateSpring()
-
-{
-
- // Update the spring position
-
- if(!move) {
-
- f = -K * (ps - R); // f=-ky
-
- as = f / M; // Set the acceleration, f=ma == a=f/m
-
- vs = D * (vs + as); // Set the velocity
-
- ps = ps + vs; // Updated position
-
- }
-
- if(abs(vs) < 0.1) {
-
- vs = 0.0;
-
- }
-
-
-
- // Test if mouse is over the top bar
-
- if(mouseX > left && mouseX < right && mouseY > ps && mouseY < ps + s_height) {
-
- over = true;
-
- } else {
-
- over = false;
-
- }
-
-
-
- // Set and constrain the position of top bar
-
- if(move) {
-
- ps = mouseY - s_height/2;
-
- if (ps < min) { ps = min; }
-
- if (ps > max) { ps = max; }
-
- }
-
-}
-
-
-
-void mousePressed() {
-
- if(over) {
-
- move = true;
-
- }
-
-}
-
-
-
-void mouseReleased()
-
-{
-
- move = false;
-
-}Move the mouse over one of the circles and click to re-position. - -When you release the mouse, it will snap back into position. - -Each circle has a slightly different behavior.
- - - -Original Processing.org Example: Springs
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int num = 3;
-
-Spring[] springs = new Spring[num];
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- noStroke();
-
- smooth();
-
- springs[0] = new Spring( 70, 160, 20, 0.98, 8.0, 0.1, springs, 0);
-
- springs[1] = new Spring(150, 110, 60, 0.95, 9.0, 0.1, springs, 1);
-
- springs[2] = new Spring( 40, 70, 120, 0.90, 9.9, 0.1, springs, 2);
-
-}
-
-
-
-void draw()
-
-{
-
- background(51);
-
-
-
- for (int i=0; i<num; i++) {
-
- springs[i].update();
-
- springs[i].display();
-
- }
-
-}
-
-
-
-void mousePressed()
-
-{
-
- for (int i=0; i<num; i++) {
-
- springs[i].pressed();
-
- }
-
-}
-
-
-
-void mouseReleased()
-
-{
-
- for (int i=0; i<num; i++) {
-
- springs[i].released();
-
- }
-
-}
-
-
-
-class Spring
-
-{
-
- // Screen values
-
- float xpos, ypos;
-
- float tempxpos, tempypos;
-
- int size = 20;
-
- boolean isOver = false;
-
- boolean move = false;
-
-
-
- // Spring simulation constants
-
- float mass; // Mass
-
- float k = 0.2; // Spring constant
-
- float damp; // Damping
-
- float rest_posx; // Rest position X
-
- float rest_posy; // Rest position Y
-
-
-
- // Spring simulation variables
-
- //float pos = 20.0; // Position
-
- float velx = 0.0; // X Velocity
-
- float vely = 0.0; // Y Velocity
-
- float accel = 0; // Acceleration
-
- float force = 0; // Force
-
-
-
- Spring[] friends;
-
- int me;
-
-
-
- // Constructor
-
- Spring(float x, float y, int s, float d, float m,
-
- float k_in, Spring[] others, int id)
-
- {
-
- xpos = tempxpos = x;
-
- ypos = tempypos = y;
-
- rest_posx = x;
-
- rest_posy = y;
-
- size = s;
-
- damp = d;
-
- mass = m;
-
- k = k_in;
-
- friends = others;
-
- me = id;
-
- }
-
-
-
- void update()
-
- {
-
- if (move) {
-
- rest_posy = mouseY;
-
- rest_posx = mouseX;
-
- }
-
-
-
- force = -k * (tempypos - rest_posy); // f=-ky
-
- accel = force / mass; // Set the acceleration, f=ma == a=f/m
-
- vely = damp * (vely + accel); // Set the velocity
-
- tempypos = tempypos + vely; // Updated position
-
-
-
- force = -k * (tempxpos - rest_posx); // f=-ky
-
- accel = force / mass; // Set the acceleration, f=ma == a=f/m
-
- velx = damp * (velx + accel); // Set the velocity
-
- tempxpos = tempxpos + velx; // Updated position
-
-
-
-
-
- if ((over() || move) && !otherOver() ) {
-
- isOver = true;
-
- } else {
-
- isOver = false;
-
- }
-
- }
-
-
-
- // Test to see if mouse is over this spring
-
- boolean over() {
-
- float disX = tempxpos - mouseX;
-
- float disY = tempypos - mouseY;
-
- if (sqrt(sq(disX) + sq(disY)) < size/2 ) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-
-
- // Make sure no other springs are active
-
- boolean otherOver() {
-
- for (int i=0; i<num; i++) {
-
- if (i != me) {
-
- if (friends[i].isOver == true) {
-
- return true;
-
- }
-
- }
-
- }
-
- return false;
-
- }
-
-
-
- void display()
-
- {
-
- if (isOver) {
-
- fill(153);
-
- } else {
-
- fill(255);
-
- }
-
- ellipse(tempxpos, tempypos, size, size);
-
- }
-
-
-
- void pressed()
-
- {
-
- if (isOver) {
-
- move = true;
-
- } else {
-
- move = false;
-
- }
-
- }
-
-
-
- void released()
-
- {
-
- move = false;
-
- rest_posx = xpos;
-
- rest_posy = ypos;
-
- }
-
-}The word "tickle" jitters when the cursor hovers over. - -Sometimes, it can be tickled off the screen.
- - - -Original Processing.org Example: Tickle
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-PFont font;
-
-float x = 33; // X-coordinate of text
-
-float y = 60; // Y-coordinate of text
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- font = loadFont("AmericanTypewriter-24.vlw");
-
- textFont(font);
-
- noStroke();
-
-}
-
-
-
-void draw()
-
-{
-
- fill(204, 120);
-
- rect(0, 0, width, height);
-
- fill(0);
-
- // If the cursor is over the text, change the position
-
- if ((mouseX >= x) && (mouseX <= x+55) &&
-
- (mouseY >= y-24) && (mouseY <= y)) {
-
- x += random(-5, 5);
-
- y += random(-5, 5);
-
- }
-
- text("tickle", x, y);
-
-}Draws an image larger than the screen by tiling it into small sections. - -The scaleValue variable sets amount of scaling: 1 is 100%, 2 is 200%, etc.
- - - -Original Processing.org Example: TileImages
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-int scaleValue = 3; // Multiplication factor
-
-int xoffset = 0; // x-axis offset
-
-int yoffset = 0; // y-axis offset
-
-
-
-void setup()
-
-{
-
- size(600, 600);
-
- stroke(0, 100);
-
-}
-
-
-
-void draw()
-
-{
-
- scale(scaleValue);
-
- translate(xoffset *(-width / scaleValue), yoffset *(-height / scaleValue));
-
- line(10, 150, 500, 50);
-
- line(0, 600, 600, 0);
-
- setOffset();
-
-}
-
-
-
-void setOffset()
-
-{
-
- save("lines-" + xoffset + "-" + yoffset + ".jpg");
-
- xoffset++;
-
- if (xoffset == scaleValue) {
-
- xoffset = 0;
-
- yoffset++;
-
- if (yoffset == scaleValue) {
-
- exit();
-
- }
-
- }
-
- background(204);
-
-}by Daniel Shiffman. - - - -Renders a simple tree-like structure via recursion - -Branching angle calculated as a function of horizontal mouse location
- - - -Original Processing.org Example: Tree
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-float theta;
-
-void setup() {
-
- size(200,200);
-
- smooth();
-
-}
-
-
-
-void draw() {
-
- background(0);
-
- frameRate(30);
-
- stroke(255);
-
- // Let's pick an angle 0 to 90 degrees based on the mouse position
-
- float a = (mouseX / (float) width) * 90f;
-
- // Convert it to radians
-
- theta = radians(a);
-
- // Start the tree from the bottom of the screen
-
- translate(width/2,height);
-
- // Draw a line 60 pixels
-
- line(0,0,0,-60);
-
- // Move to the end of that line
-
- translate(0,-60);
-
- // Start the recursive branching!
-
- branch(60);
-
-
-
-}
-
-
-
-void branch(float h) {
-
- // Each branch will be 2/3rds the size of the previous one
-
- h *= 0.66f;
-
-
-
- // All recursive functions must have an exit condition!!!!
-
- // Here, ours is when the length of the branch is 2 pixels or less
-
- if (h > 2) {
-
- pushMatrix(); // Save the current state of transformation (i.e. where are we now)
-
- rotate(theta); // Rotate by theta
-
- line(0,0,0,-h); // Draw the branch
-
- translate(0,-h); // Move to the end of the branch
-
- branch(h); // Ok, now call myself to draw two new branches!!
-
- popMatrix(); // Whenever we get back here, we "pop" in order to restore the previous matrix state
-
-
-
- // Repeat the same thing, only branch off to the "left" this time!
-
- pushMatrix();
-
- rotate(-theta);
-
- line(0,0,0,-h);
-
- translate(0,-h);
-
- branch(h);
-
- popMatrix();
-
- }
-
-}by Daniel Shiffman. - - - -Simple demonstration of a Wolfram 1-dimensional cellular automata - -When the system reaches bottom of the window, it restarts with a new ruleset - -Mouse click restarts as well.
- - - -Original Processing.org Example: Wolfram
-
-
// All Examples Written by Casey Reas and Ben Fry
-
-// unless otherwise stated.
-
-CA ca; // An instance object to describe the Wolfram basic Cellular Automata
-
-
-
-void setup() {
-
- size(200,200);
-
- frameRate(30);
-
- background(0);
-
- int[] ruleset = {0,1,0,1,1,0,1,0}; // An initial rule system
-
- ca = new CA(ruleset); // Initialize CA
-
-}
-
-
-
-void draw() {
-
- ca.render(); // Draw the CA
-
- ca.generate(); // Generate the next level
-
-
-
- if (ca.finished()) { // If we're done, clear the screen, pick a new ruleset and restart
-
- background(0);
-
- ca.randomize();
-
- ca.restart();
-
- }
-
-}
-
-
-
-void mousePressed() {
-
- background(0);
-
- ca.randomize();
-
- ca.restart();
-
-}
-
-
-
-
-
-class CA {
-
-
-
- int[] cells; // An array of 0s and 1s
-
- int generation; // How many generations?
-
- int scl; // How many pixels wide/high is each cell?
-
-
-
- int[] rules; // An array to store the ruleset, for example {0,1,1,0,1,1,0,1}
-
-
-
- CA(int[] r) {
-
- rules = r;
-
- scl = 1;
-
- cells = new int[width/scl];
-
- restart();
-
- }
-
-
-
- CA() {
-
- scl = 1;
-
- cells = new int[width/scl];
-
- randomize();
-
- restart();
-
- }
-
-
-
- // Set the rules of the CA
-
- void setRules(int[] r) {
-
- rules = r;
-
- }
-
-
-
- // Make a random ruleset
-
- void randomize() {
-
- for (int i = 0; i < 8; i++) {
-
- rules[i] = int(random(2));
-
- }
-
- }
-
-
-
- // Reset to generation 0
-
- void restart() {
-
- for (int i = 0; i < cells.length; i++) {
-
- cells[i] = 0;
-
- }
-
- cells[cells.length/2] = 1; // We arbitrarily start with just the middle cell having a state of "1"
-
- generation = 0;
-
- }
-
-
-
- // The process of creating the new generation
-
- void generate() {
-
- // First we create an empty array for the new values
-
- int[] nextgen = new int[cells.length];
-
- // For every spot, determine new state by examing current state, and neighbor states
-
- // Ignore edges that only have one neighor
-
- for (int i = 1; i < cells.length-1; i++) {
-
- int left = cells[i-1]; // Left neighbor state
-
- int me = cells[i]; // Current state
-
- int right = cells[i+1]; // Right neighbor state
-
- nextgen[i] = rules(left,me,right); // Compute next generation state based on ruleset
-
- }
-
- // Copy the array into current value
-
- cells = (int[]) nextgen.clone();
-
- generation++;
-
- }
-
-
-
- // This is the easy part, just draw the cells, fill 255 for '1', fill 0 for '0'
-
- void render() {
-
- for (int i = 0; i < cells.length; i++) {
-
- if (cells[i] == 1) fill(255);
-
- else fill(0);
-
- noStroke();
-
- rect(i*scl,generation*scl, scl,scl);
-
- }
-
- }
-
-
-
- // Implementing the Wolfram rules
-
- // Could be improved and made more concise, but here we can explicitly see what is going on for each case
-
- int rules (int a, int b, int c) {
-
- if (a == 1 && b == 1 && c == 1) return rules[0];
-
- if (a == 1 && b == 1 && c == 0) return rules[1];
-
- if (a == 1 && b == 0 && c == 1) return rules[2];
-
- if (a == 1 && b == 0 && c == 0) return rules[3];
-
- if (a == 0 && b == 1 && c == 1) return rules[4];
-
- if (a == 0 && b == 1 && c == 0) return rules[5];
-
- if (a == 0 && b == 0 && c == 1) return rules[6];
-
- if (a == 0 && b == 0 && c == 0) return rules[7];
-
- return 0;
-
- }
-
-
-
- // The CA is done if it reaches the bottom of the screen
-
- boolean finished() {
-
- if (generation > height/scl) {
-
- return true;
-
- } else {
-
- return false;
-
- }
-
- }
-
-}| Name | - -Array |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - -int[] numbers = new int[3]; - -numbers[0] = 90; - -numbers[1] = 150; - -numbers[2] = 30; - -int a = numbers[0] + numbers[1]; // Sets variable a to 240 - -int b = numbers[1] + numbers[2]; // Sets variable b to 180 int[] numbers = { 90, 150, 30 };
-
-int a = numbers[0] + numbers[1]; // Sets variable a to 240
-
-int b = numbers[1] + numbers[2]; // Sets variable b to 180int degrees = 360;
-
-float[] cos_vals = new float[degrees];
-
-for(int i=0; i < degrees; i++) {
-
- cos_vals[i] = cos(TWO_PI/degrees * i);
-
-} |
-
- ||||||||
| Description | - -An array is a list of data. It is possible to have an array of any type of data. Each piece of data in an array is identified by an index number representing its position in the array. The first element in the array is [0], the second element is [1], and so on. Arrays are similar to objects, so they must be created with the keyword new. Every array has a variable length which is an integer value for the total number of elements in the array. (People are often confused by the use of length() to get the size of a String and length to get the size of an array. Notice the absence of the parentheses when working with arrays.) | - - - -||||||||
| Syntax | - -datatype[] varvar[element] = valuevar.length |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -
| Name | - -ArrayList |
-
- ||
|---|---|---|---|
| Examples | - - - -// This is a code fragment that shows how to use an ArrayList.
-
-// It won't compile because it's missing the Ball class.
-
-
-
-ArrayList balls;
-
-
-
-void setup() {
-
- size(200, 200);
-
- balls = new ArrayList(); // Create an empty ArrayList
-
- balls.add(new Ball(width/2, 0, 48)); // Start by adding one element
-
-}
-
-
-
-void draw() {
-
- background(255);
-
-
-
- // With an array, we say balls.length, with an ArrayList,
-
- // we say balls.size(). The length of an ArrayList is dynamic.
-
- // Notice how we are looping through the ArrayList backwards, this
-
- // is because we are deleting elements from the list
-
- for (int i = balls.size()-1; i >= 0; i--) {
-
- // An ArrayList doesn't know what it is storing so we have
-
- // to cast the object coming out
-
- Ball ball = (Ball) balls.get(i);
-
- ball.move();
-
- ball.display();
-
- if (ball.finished()) {
-
- // Items can be deleted with remove()
-
- balls.remove(i);
-
- }
-
- }
-
-}
-
-
-
-void mousePressed() {
-
- // A new ball object is added to the ArrayList, by default to the end
-
- balls.add(new Ball(mouseX, mouseY, ballWidth));
-
-} |
-
- ||
| Description | - -An ArrayList stores a variable number of objects. This is similar to making an array of objects, but with an ArrayList, items can be easily added and removed from the ArrayList and it is resized dynamically. This can be very convenient, but it's slower than making an array of objects when using many elements.
-
-
-
- - -An ArrayList is a resizable-array implementation of the Java List interface. It has many methods used to control and search its contents. For example, the length of the ArrayList is returned by its size() method, which is an integer value for the total number of elements in the list. An element is added to an ArrayList with the add() method and is deleted with the remove() method. The get() method returns the element at the specified position in the list. (See the above example for context.) - - - - - -For a list of the numerous ArrayList features, please read the Java reference description. |
-
- ||
| Constructor | - -ArrayList() - -ArrayList(initialCapacity) |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -
| Name | - -HALF_PI (1.57079...) |
-
-
-
- ||
|---|---|---|---|
| Examples | - - float f = 0.0;
-
-beginShape(POLYGON);
-
-while(f < HALF_PI) {
-
- vertex(width/2 + cos(f)*40, height/2 + sin(f)*40);
-
- f += PI/12.0;
-
-}
-
-endShape(); |
-
- ||
| Description | - -HALF_PI is a mathematical constant with the value 1.57079632679489661923. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). | - -||
| Syntax | - - - -HALF_PI |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -PI - - TWO_PI |
-
-
| Name | -HashMap |
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -HashMap hm = new HashMap();
-
-hm.put("Ava", 1);
-hm.put("Cait", 35);
-hm.put("Casey", 36);
-
-Iterator i = hm.entrySet().iterator(); // Get an iterator
-
-while (i.hasNext()) {
- Map.Entry me = (Map.Entry)i.next();
- print(me.getKey() + " is ");
- println(me.getValue());
-} |
- ||||||
| Description | -A HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only instead of accessing elements with a numeric index, - a String is used. (If you are familiar with associative arrays from other languages, this is the same idea.) - The above example covers basic use, but there's a more extensive example included with the Processing examples. -For a list of the numerous HashMap features, please read the Java reference description. |
- ||||||
| Constructor | -HashMap() - HashMap(initialCapacity) - HashMap(initialCapacity,loadFactor) - HashMap(m) - |
- ||||||
| Parameters | - -
-
|
- ||||||
| Usage | -Web & Application | - -
| Name | - -Object |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -// Declare and contruct two objects (h1, h2) from the class HLine
-
-HLine h1 = new HLine(20, 2.0);
-
-HLine h2 = new HLine(50, 2.5);
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- background(204);
-
- h1.update();
-
- h2.update();
-
-}
-
-
-
-class HLine {
-
- float ypos, speed;
-
- HLine (float y, float s) {
-
- ypos = y;
-
- speed = s;
-
- }
-
- void update() {
-
- ypos += speed;
-
- if (ypos > width) {
-
- ypos = 0;
-
- }
-
- line(0, ypos, width, ypos);
-
- }
-
-} |
-
- ||||
| Description | - -Objects are instances of classes. A class is a grouping of related methods (functions) and fields (variables and constants). | - -||||
| Syntax | - -classinstance |
-
- ||||
| Parameters | - - - -
|
-
- ||||
| Usage | - -Web & Application | - - - -||||
| Related | - -class |
-
-
| Name | -PFont |
- ||
|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - - PFont font;
-// The font must be located in the sketch's
-// "data" directory to load successfully
-font = loadFont("FFScala.ttf");
-textFont(font, 32);
-text("word", 15, 50); |
- ||
| Description | - -PFont is the font class for Processing. The loadFont() - function constructs a new font and textFont() makes a font active. The list() method creates a list of the fonts installed on the computer, - which is useful information to use with the createFont() function for dynamically converting fonts into a format to use with Processing. |
-
- ||
| Methods | -
|
- ||
| Constructor | -PFont() - PFont(input) |
- ||
| Parameters | - -
|
- ||
| Usage | -Web & Application | - -||
| Related | -loadFont() - textFont() - createGraphics() |
-
| Class | -PFont | -||
|---|---|---|---|
| Name | -list() |
- ||
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - -size(200, 200); -String[] fontList = PFont.list(); -println(fontList); |
- ||
| Description | -Gets a list of the fonts installed on the system. The data is returned as a String array. This list provides the names of each font for input into createFont(), - which allows Processing to dynamically format fonts. This function is meant as a tool for programming local applications and is not recommended for use in applets. |
- ||
| Syntax | -font.list() |
- ||
| Parameters | -
-
|
- ||
| Returns | -String[] | - -||
| Usage | -Web & Application | - -
| Name | -PGraphics |
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - PGraphics pg;
-
-void setup() {
- size(100, 100);
- pg = createGraphics(80, 80, P3D);
-}
-
-void draw() {
- pg.beginDraw();
- pg.background(102);
- pg.stroke(255);
- pg.line(40, 40, mouseX, mouseY);
- pg.endDraw();
- image(pg, 10, 10);
-} |
- ||||||
| Description | - -Main graphics and rendering context, as well as the base API implementation for processing "core". - Use this class if you need to draw into an off-screen graphics buffer. A PGraphics object can be constructed with the createGraphics() function. - The beginDraw() and endDraw() methods (see above example) are necessary to set up the buffer and to finalize it. - The fields and methods for this class are extensive; for a complete list visit the developer's reference: http://dev.processing.org/reference/core/ |
-
- ||||||
| Methods | -
-
|
- ||||||
| Constructor | -PGraphics() - PGraphics(width,height) - PGraphics(width,height,applet) |
- ||||||
| Parameters | - -
-
|
- ||||||
| Usage | -Web & Application | - -||||||
| Related | -createGraphics() | -
| Class | -PGraphics | -||
|---|---|---|---|
| Name | -beginDraw() |
- ||
| Examples | - -PGraphics pg;
-
-void setup() {
- size(100, 100);
- pg = createGraphics(80, 80, P2D);
- pg.beginDraw();
- pg.background(102);
- pg.stroke(255);
- pg.line(20, 20, 80, 80);
- pg.endDraw();
- noLoop();
-}
-
-void draw() {
- image(pg, 10, 10);
-} |
- ||
| Description | -Sets the default properties for a PGraphics object. It should be called before anything is drawn into the object. |
- ||
| Syntax | -graphics.beginDraw() |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Class | -PGraphics | -||
|---|---|---|---|
| Name | -endDraw() |
- ||
| Examples | - -PGraphics pg;
-
-void setup() {
- size(100, 100);
- pg = createGraphics(80, 80, P2D);
- pg.beginDraw();
- pg.background(102);
- pg.stroke(255);
- pg.line(20, 20, 80, 80);
- pg.endDraw();
- noLoop();
-}
-
-void draw() {
- image(pg, 10, 10);
-} |
- ||
| Description | -Finalizes the rendering of a PGraphics object so that it can be shown on screen. |
- ||
| Syntax | -graphics.endDraw() |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Name | - -PI (3.14159...) |
-
-
-
- ||
|---|---|---|---|
| Examples | - - float f = 0.0;
-
-beginShape(POLYGON);
-
-while(f < PI) {
-
- vertex(width/2 + cos(f)*40, height/2 + sin(f)*40);
-
- f += PI/12.0;
-
-}
-
-endShape(); |
-
- ||
| Description | - -PI is a mathematical constant with the value 3.14159265358979323846. It is the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). | - -||
| Syntax | - - - -PI |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -TWO_PI - - HALF_PI |
-
-
| Name | -PImage |
- ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - PImage b;
-b = loadImage("laDefense.jpg");
-image(b, 0, 0); |
- ||||||||||||||||||||
| Description | - -Datatype for storing images. Processing can display .gif, .jpg, .tga, and .png. images. - Images may be displayed in 2D and 3D space. Before an image is used, it must be loaded with the loadImage() function. - The PImage object contains fields for the width and height of the image, as well as an array called pixels[] which contains the values for every pixel in the image. - A group of methods, described below, allow easy access to the image's pixels and alpha channel and simplify the process of compositing. -Before using the pixels[] array, be sure to use the loadPixels() method on the image to make sure that the pixel data is properly loaded. -To create a new image, use the createImage() function (do not use new PImage()). |
-
- ||||||||||||||||||||
| Fields | -
-
|
- ||||||||||||||||||||
| Methods | -
|
- ||||||||||||||||||||
| Constructor | -PImage() - PImage(width,height) - PImage(width,height,format) - PImage(img) |
- ||||||||||||||||||||
| Parameters | - -
|
- ||||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||||
| Related | -loadImage() - imageMode() - createImage() |
-
| Class | -PImage | -||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -blend() |
- ||||||||||||||||||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg,degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg,degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, SUBTRACT);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg,degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg,degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
-image(img, 0, 0);
-image(img2, 0, 0); |
- ||||||||||||||||||||||
| Description | -Blends a region of pixels into the image specified by the img parameter. - These copies utilize full alpha channel support and a choice of the following modes to blend the colors of source pixels (A) - with the ones of pixels in the destination image (B): -BLEND - linear interpolation of colours: C = A*factor + B -ADD - additive blending with white clip: C = min(A*factor + B, 255) -SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0) -DARKEST - only the darkest colour succeeds: C = min(A*factor, B) -LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B) -DIFFERENCE - subtract colors from underlying image. -EXCLUSION - similar to DIFFERENCE, but less extreme. -MULTIPLY - Multiply the colors, result will always be darker. -SCREEN - Opposite multiply, uses inverse values of the colors. -OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values. -HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower. -SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh. -DODGE - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop. -BURN - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop. -All modes use the alpha information (highest byte) of source image pixels as the blending factor. - If the source and destination regions are different sizes, the image will be automatically resized to match the destination size. - If the srcImg parameter is not used, the display window is used as the source image. -This function ignores imageMode(). |
- ||||||||||||||||||||||
| Syntax | -img.blend(x,y,width,height,dx,dy,dwidth,dheight,MODE) - img.blend(srcImg,x,y,width,height,dx,dy,dwidth,dheight,MODE) |
- ||||||||||||||||||||||
| Parameters | -
-
|
- ||||||||||||||||||||||
| Returns | -None | - -||||||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||||||
| Related | -alpha() - copy() |
-
| Class | -PImage | -||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -copy() |
- ||||||||||||||||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-img.copy(50, 0, 50, 100, 0, 0, 50, 100);
-image(img, 0, 0); |
- ||||||||||||||||||||
| Description | -Copies a region of pixels from one image into another. If the source and destination regions aren't the same size, it will automatically resize - source pixels to fit the specified target region. No alpha information is used in the process, however if the source image has an alpha channel set, - it will be copied as well. -This function ignores imageMode(). |
- ||||||||||||||||||||
| Syntax | -img.copy(sx,sy,swidth,sheight,dx,dy,dwidth,dheight) - img.copy(srcImg,sx,sy,swidth,sheight,dx,dy,dwidth,dheight) |
- ||||||||||||||||||||
| Parameters | -
-
|
- ||||||||||||||||||||
| Returns | -None | - -||||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||||
| Related | -alpha() - blend() |
-
| Class | -PImage | -||||||
|---|---|---|---|---|---|---|---|
| Name | -filter() |
- ||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="archcrop.jpg"; */
-PImage a;
-a = loadImage("archcrop.jpg");
-image(a, 0, 0);
-a.filter(GRAY);
-image(a, 50, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="archcrop.jpg"; */
-PImage a, b;
-a = loadImage("archcrop.jpg");
-b = loadImage("archcrop.jpg");
-a.filter(THRESHOLD, .6);
-image(a, 0, 0);
-b.filter(THRESHOLD, .4);
-image(b, 50, 0); |
- ||||||
| Description | -Filters an image as defined by one of the following modes: -THRESHOLD - converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. - The level must be between 0.0 (black) and 1.0(white). If no level is specified, 0.5 is used. -GRAY - converts any colors in the image to grayscale equivalents -INVERT - sets each pixel to its inverse value -POSTERIZE - limits each channel of the image to the number of colors specified as the level parameter -BLUR - executes a Guassian blur with the level parameter specifying the extent of the blurring. - If no level parameter is used, the blur is equivalent to Guassian blur of radius 1. -OPAQUE - sets the alpha channel to entirely opaque. -ERODE - reduces the light areas with the amount defined by the level parameter. -DILATE - increases the light areas with the amount defined by the level parameter |
- ||||||
| Syntax | -img.filter(MODE) - img.filter(MODE,srcImg) |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -None | -||||||
| Usage | -Web & Application | -
| Class | -PImage | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -get() |
- ||||||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-background(img);
-noStroke();
-color c = img.get(60, 90);
-fill(c);
-rect(25, 25, 50, 50); // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-background(img);
-PImage b = img.get(50, 0, 50, 100);
-image(b, 0, 0); |
- ||||||||||
| Description | -Reads the color of any pixel or grabs a group of pixels. If no parameters are specified, the entire image is returned. Get the value of one pixel by - specifying an x,y coordinate. Get a section of the display window by specifing an additional width and height parameter. - If the pixel requested is outside of the image window, black is returned. The numbers returned are scaled according to the current color ranges, - but only RGB values are returned by this function. Even though you may have drawn a shape with colorMode(HSB), the numbers returned will be in RGB. -Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. - The equivalent statement to "get(x, y)" using pixels[] is "pixels[y*width+x]". Processing requires calling loadPixels() to load the display window data into - the pixels[] array before getting the values. -This function ignores imageMode(). |
- ||||||||||
| Syntax | -img.get() - img.get(x,y) - img.get(x,y,width,height) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -color or PImage | - -||||||||||
| Usage | -Web & Application | - -||||||||||
| Related | -set() - pixels[] - copy() |
-
| Class | -PImage | -||
|---|---|---|---|
| Name | -height |
- ||
| Examples | - PImage img = loadImage("armani.jpg");
-image(img, 20, 10);
-rect(55, 10, img.width, img.height); |
- ||
| Description | -The height of the image in units of pixels. | -||
| Syntax | -img.height |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Class | -PImage | -||
|---|---|---|---|
| Name | -loadPixels() |
- ||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-int halfImage = width*height/2;
-PImage myImage = loadImage("topanga.jpg");
-myImage.loadPixels();
-for (int i = 0; i < halfImage; i++) {
- myImage.pixels[i+halfImage] = pixels[i];
-}
-myImage.updatePixels();
-image(myImage, 0, 0); |
- ||
| Description | -Loads the pixel data for the image into its pixels[] array. This function must always be called before reading from or writing to pixels[]. -Certain renderers may or may not seem to require loadPixels() or updatePixels(). - However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, - call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. |
- ||
| Syntax | -img.loadPixels() |
- ||
| Parameters | -
-
|
- ||
| Returns | -void | -||
| Usage | -Web & Application | -
| Class | -PImage | -||||||
|---|---|---|---|---|---|---|---|
| Name | -mask() |
- ||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("test.jpg");
-PImage maskImg = loadImage("mask.jpg");
-img.mask(maskImg);
-image(img, 0, 0);
-image(img, 25, 0); |
- ||||||
| Description | -Masks part of an image from displaying by loading another image and using it as an alpha channel. - This mask image should only contain grayscale data, but only the blue color channel is used. - The mask image needs to be the same size as the image to which it is applied. -In addition to using a mask image, an integer array containing the alpha channel data can be specified directly. - This method is useful for creating dynamically generated alpha masks. - This array must be of the same length as the target image's pixels array and should contain only grayscale data of values between 0-255. |
- ||||||
| Syntax | -img.mask(maskImg) - img.mask(maskArray) |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -None | - -||||||
| Usage | -Web & Application | - -
| Class | -PImage | -||||
|---|---|---|---|---|---|
| Name | -pixels[] |
- ||||
| Examples | - // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-int dimension = (img.width*img.height);
-img.loadPixels();
-for (int i=0; i < dimension; i+=2) {
- img.pixels[i] = color(0, 0, 0);
-}
-img.updatePixels();
-image(img, 0, 0); |
- ||||
| Description | -Array containing the values for all the pixels in the image. These values are of the color datatype. - This array is the size of the image, meaning if the image is 100x100 pixels, there will be 10000 values and if the window is 200x300 pixels, there will be 60000 values. - The index value defines the position of a value within the array. For example, the statement color b = img.pixels[230] will set the variable b equal to the value at that - location in the array. Before accessing this array, the data must loaded with the loadPixels() method. After the array data has been modified, - the updatePixels() method must be run to update the changes. Without loadPixels(), running the code may (or will in future releases) result in a NullPointerException. | -||||
| Syntax | -img.pixels[index] |
- ||||
| Parameters | -
-
|
- ||||
| Usage | -Web & Application | - -||||
| Related | -get() - set() - blend() - copy() |
-
| Class | -PImage | -||||||
|---|---|---|---|---|---|---|---|
| Name | -resize() |
- ||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="jelly.jpg"; */
-PImage img = loadImage("jelly.jpg");
-image(img, 0, 0);
-img.resize(100, 50);
-image(img, 0, 0) // @pjs preload must be used to preload the image
-/* @pjs preload="jelly.jpg"; */
-PImage img = loadImage("jelly.jpg");
-image(img, 0, 0);
-img.resize(0, 50);
-image(img, 0, 0); |
- ||||||
| Description | -Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. |
- ||||||
| Syntax | -img.resize(wide,high) |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -void | -||||||
| Usage | -Web & Application | -||||||
| Related | -get() |
-
| Class | -PImage | -||||
|---|---|---|---|---|---|
| Name | -save() |
- ||||
| Examples | - -// @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-img.save("img.jpg");- // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-size(100, 100);
-PImage img = loadImage("tower.jpg");
-PImage newImg = createImage(100, 100, RGB);
-newImg = img.get();
-newImg.save("newImg.jpg");
- |
- ||||
| Description | -Updates the image with the data in its pixels[] array. Use in conjunction with loadPixels(). - If you're only reading pixels from the array, there's no need to call updatePixels(). -Certain renderers may or may not seem to require loadPixels() or updatePixels(). - However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, - call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. -Currently, none of the renderers use the additional parameters to updatePixels(), however this may be implemented in the future. |
- ||||
| Syntax | -img.save(filename) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -None | -||||
| Usage | -Web & Application | -
| Class | -PImage | -||||||||
|---|---|---|---|---|---|---|---|---|---|
| Name | -set() |
- ||||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="tower.jpg"; */
-PImage img = loadImage("tower.jpg");
-background(img);
-noStroke();
-color c = img.get(60, 90);
-fill(c);
-rect(25, 25, 50, 50); |
- ||||||||
| Description | -Changes the color of any pixel or writes an image directly into the image. The x and y parameter specify the pixel or the upper-left corner of the image. - The color parameter specifies the color value. -Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. - The equivalent statement to "set(x, y, #000000)" using pixels[] is "pixels[y*width+x] = #000000". Processing requires calling loadPixels() to load the - display window data into the pixels[] array before getting the values and calling updatePixels() to update the window. -This function ignores imageMode(). |
- ||||||||
| Syntax | - img.set(x,y,color) |
- ||||||||
| Parameters | -
-
|
- ||||||||
| Returns | -None | - -||||||||
| Usage | -Web & Application | - -||||||||
| Related | -get() - pixels[] - copy() |
-
| Class | -PImage | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -updatePixels() |
- ||||||||||
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-int halfImage = width*height/2;
-PImage myImage = loadImage("topanga.jpg");
-myImage.loadPixels();
-for (int i = 0; i < halfImage; i++) {
- myImage.pixels[i+halfImage] = pixels[i];
-}
-myImage.updatePixels();
-image(myImage, 0, 0); |
- ||||||||||
| Description | -Updates the image with the data in its pixels[] array. Use in conjunction with loadPixels(). - If you're only reading pixels from the array, there's no need to call updatePixels(). -Certain renderers may or may not seem to require loadPixels() or updatePixels(). - However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, - call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. -Currently, none of the renderers use the additional parameters to updatePixels(), however this may be implemented in the future. |
- ||||||||||
| Syntax | -img.updatePixels() - img.updatePixels(x,y,w,h) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | -
| Class | -PImage | -||
|---|---|---|---|
| Name | -width |
- ||
| Examples | - PImage img = loadImage("armani.jpg");
-image(img, 20, 10);
-rect(55, 10, img.width, img.height); |
- ||
| Description | -The width of the image in units of pixels. | -||
| Syntax | -img.width |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Name | -PShape |
- ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, 10, 10, 80, 80); |
- ||||||||||||||||||||||
| Description | - -Datatype for storing shapes. Processing can currently load and display SVG (Scalable Vector Graphics) shapes. - Before a shape is used, it must be loaded with the loadShape() function. The shape() function is used to draw the shape to the display window. - The PShape object contain a group of methods, linked below, that can operate on the shape data. -The loadShape() method supports SVG files created with Inkscape and Adobe Illustrator. - It is not a full SVG implementation, but offers some straightforward support for handling vector data. |
-
- ||||||||||||||||||||||
| Fields | -
-
|
- ||||||||||||||||||||||
| Methods | -
|
- ||||||||||||||||||||||
| Constructor | -PShape() |
- ||||||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||||||
| Related | -shape() - loadShape() - shapeMode() |
-
| Class | -PShape | -||
|---|---|---|---|
| Name | -disableStyle() |
- ||
| Examples | - - // The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, -30, 10, 80, 80);
-s.disableStyle();
-shape(s, 50, 10, 80, 80); |
- ||
| Description | -Disables the shape's style data and uses Processing's current styles. Styles include attributes such as colors, stroke weight, and stroke joints. |
- ||
| Syntax | -sh.disableStyle() |
- ||
| Parameters | -
-
|
- ||
| Returns | -none | - -||
| Usage | -Web & Application | - -
| Class | -PShape | -||
|---|---|---|---|
| Name | -enableStyle() |
- ||
| Examples | - - // The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-s.disableStyle();
-shape(s, -30, 10, 80, 80);
-s.enableStyle();
-shape(s, 50, 10, 80, 80); |
- ||
| Description | -Enables the shape's style data and ignores Processing's current styles. Styles include attributes such as colors, stroke weight, and stroke joints. |
- ||
| Syntax | -sh.enableStyle() |
- ||
| Parameters | -
-
|
- ||
| Returns | -none | - -||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -getChild() |
- ||||
| Examples | - - PShape states;
-PShape ohio;
-states = loadShape("tristate.svg");
-ohio = states.getChild("OH");
-smooth();
-background(0);
-shape(states, -48, 5);
-ohio.disableStyle();
-fill(102, 0, 0);
-shape(ohio, -48, 5);
- |
- ||||
| Description | -Extracts a child shape from a parent shape. Specify the name of the shape with the target parameter. - The shape is returned as a PShape object, or null is returned if there is an error. |
- ||||
| Syntax | -sh.getChild(target) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -PShape or null | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||
|---|---|---|---|
| Name | -height |
- ||
| Examples | - -// The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s);
-println(s.height); // Prints 285.0, the height of the shape |
- ||
| Description | -The height of the PShape document. | -||
| Syntax | -sh.height |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Class | -PShape | -||
|---|---|---|---|
| Name | -isVisible() |
- ||
| Examples | - - // The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, 10, 10, 80, 80); // Right shape
-s.setVisible(false);
-if (s.isVisible() == false) { // of if (!s.isVisible) {
- noFill();
- rect(5, 5, 90, 90);
-} |
- ||
| Description | -Returns a boolean value "true" if the image is set to be visible, "false" if not. This is modified with the setVisible() parameter. -The visibility of a shape is usually controlled by whatever program created the SVG file. - For instance, this parameter is controlled by showing or hiding the shape in the layers palette in Adobe Illustrator. |
- ||
| Syntax | -sh.isVisible() |
- ||
| Parameters | -
-
|
- ||
| Returns | -none | - -||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -rotateX() |
- ||||
| Examples | - -PShape s;
-
-void setup() {
- size(100, 100, P3D);
- s = loadShape("ohio.svg");
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Rotate the shape around the x-axis each time the mouse is pressed
- s.rotateX(0.1);
-} |
- ||||
| Description | -Rotates a shape around the x-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the radians() method. -Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction. - Subsequent calls to the method accumulates the effect. For example, calling rotateX(HALF_PI) and then rotateX(HALF_PI) is the same as rotateX(PI). - This transformation is applied directly to the shape, it's not refreshed each time draw() is run. -This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the size() method as shown in the example above. |
- ||||
| Syntax | -sh.rotateX(angle) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -none | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -rotateY() |
- ||||
| Examples | - -PShape s;
-
-void setup() {
- size(100, 100, P3D);
- s = loadShape("ohio.svg");
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Rotate the shape around the y-axis each time the mouse is pressed
- s.rotateY(0.1);
-} |
- ||||
| Description | -Rotates a shape around the y-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the radians() method. -Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction. - Subsequent calls to the method accumulates the effect. For example, calling rotateY(HALF_PI) and then rotateY(HALF_PI) is the same as rotateY(PI). - This transformation is applied directly to the shape, it's not refreshed each time draw() is run. -This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the size() method as shown in the example above. |
- ||||
| Syntax | -sh.rotateY(angle) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -none | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -rotateZ() |
- ||||
| Examples | - -PShape s;
-
-void setup() {
- size(100, 100, P3D);
- s = loadShape("ohio.svg");
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Rotate the shape around the z-axis each time the mouse is pressed
- s.rotateZ(0.1);
-} |
- ||||
| Description | -Rotates a shape around the y-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the radians() method. -Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction. - Subsequent calls to the method accumulates the effect. For example, calling rotateZ(HALF_PI) and then rotateZ(HALF_PI) is the same as rotateZ(PI). - This transformation is applied directly to the shape, it's not refreshed each time draw() is run. -This method requires a 3D renderer. You need to pass P3D or OPENGL as a third parameter into the size() method as shown in the example above. |
- ||||
| Syntax | -sh.rotateZ(angle) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -none | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -rotate() |
- ||||
| Examples | - -PShape s;
-
-void setup() {
- size(100, 100);
- s = loadShape("ohio.svg");
- smooth();
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Rotate the shape each time the mouse is pressed
- s.rotate(0.1);
-}
- |
- ||||
| Description | -Rotates a shape the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to TWO_PI) or converted to radians with the radians() method. -Shapes are always rotated around the upper-left corner of their bounding box. Positive numbers rotate objects in a clockwise direction. - Transformations apply to everything that happens after and subsequent calls to the method accumulates the effect. - For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). - This transformation is applied directly to the shape, it's not refreshed each time draw() is run. |
- ||||
| Syntax | -sh.rotate(angle) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -none | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -scale() |
- ||||||||||
| Examples | - -
-PShape s;
-
-void setup() {
- s = loadShape("bot.svg");
- smooth();
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Shrink the shape 90% each time the mouse is pressed
- s.scale(0.9);
-} |
- ||||||||||
| Description | -Increases or decreases the size of a shape by expanding and contracting vertices. - Shapes always scale from the relative origin of their bounding box. Scale values are specified as decimal percentages. - For example, the method call scale(2.0) increases the dimension of a shape by 200%. Subsequent calls to the method multiply the effect. - For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). This transformation is applied directly to the shape, - it's not refreshed each time draw() is run. - -Using this fuction with the z parameter requires passing P3D or OPENGL into the size() parameter. |
- ||||||||||
| Syntax | -sh.scale(size) - sh.scale(x,y) - sh.scale(x,y,z) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -none | - -||||||||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||
|---|---|---|---|---|---|
| Name | -setVisible() |
- ||||
| Examples | - -// The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, 10, 10, 80, 80); // Right shape
-s.setVisible(false);
-if (s.isVisible() == false) { // of if (!s.isVisible) {
- noFill();
- rect(5, 5, 90, 90);
-} |
- ||||
| Description | -Sets the shape to be visible or invisible. This is determined by the value of the visible parameter. -The visibility of a shape is usually controlled by whatever program created the SVG file. - For instance, this parameter is controlled by showing or hiding the shape in the layers palette in Adobe Illustrator. |
- ||||
| Syntax | -sh.setVisible(visible) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -none | - -||||
| Usage | -Web & Application | - -
| Class | -PShape | -||||||||
|---|---|---|---|---|---|---|---|---|---|
| Name | -translate() |
- ||||||||
| Examples | - -PShape s;
-
-void setup() {
- s = loadShape("bot.svg");
- smooth();
-}
-
-void draw() {
- background(204);
- shape(s);
-}
-
-void mousePressed() {
- // Move the shape 10 pixels right each time the mouse is pressed
- s.translate(10, 0);
-} |
- ||||||||
| Description | -Specifies an amount to displace the shape. The x parameter specifies left/right translation, the y parameter specifies up/down translation, - and the z parameter specifies translations toward/away from the screen. Subsequent calls to the method accumulates the effect. - For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). - This transformation is applied directly to the shape, it's not refreshed each time draw() is run. -Using this method with the z parameter requires using the P3D or OPENGL parameter in combination with size. |
- ||||||||
| Syntax | -sh.translate(x,y) - sh.translate(x,y,z) |
- ||||||||
| Parameters | -
-
|
- ||||||||
| Returns | -none | - -||||||||
| Usage | -Web & Application | - -
| Class | -PShape | -||
|---|---|---|---|
| Name | -width |
- ||
| Examples | - -// The file "bot.svg" must be in the data folder
-// of the current sketch to load successfully
-PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s);
-println(s.width); // Prints 281.0, the width of the shape |
- ||
| Description | -The width of the PShape document. | -||
| Syntax | -sh.width |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Name | -PVector |
- ||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(40, 20);
- v2 = new PVector(25, 50);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- v2.add(v1);
- ellipse(v2.x, v2.y, 24, 24);
-} |
- ||||||||||||||||||||||||||||
| Description | - -A class to describe a two or three dimensional vector. This datatype stores two or three variables that are commonly used as a position, - velocity, and/or acceleration. Technically, position is a point and velocity and acceleration are vectors, but this is often simplified to consider - all three as vectors. For example, if you consider a rectangle moving across the screen, at any given instant it has a position (the object's location, - expressed as a point.), a velocity (the rate at which the object's position changes per time unit, expressed as a vector), and acceleration (the rate at - which the object's velocity changes per time unit, expressed as a vector). Since vectors represent groupings of values, we cannot simply use traditional - addition/multiplication/etc. Instead, we'll need to do some "vector" math, which is made easy by the methods inside the PVector class. -There are additional methods and other ways to use some of these methods in the developers reference. |
-
- ||||||||||||||||||||||||||||
| Fields | -
-
|
- ||||||||||||||||||||||||||||
| Methods | -
|
- ||||||||||||||||||||||||||||
| Constructor | -PVector() - PVector(x,y) - PVector(x,y,z) |
- ||||||||||||||||||||||||||||
| Parameters | - -
|
- ||||||||||||||||||||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -add() |
- ||||||||||||||
| Examples | - -PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(40, 20, 0);
- v2 = new PVector(25, 50, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- v2.add(v1);
- ellipse(v2.x, v2.y, 24, 24);
-}
-- PVector v;
-
-void setup() {
- smooth();
- noLoop();
- v = new PVector(40, 20, 0);
-}
-
-void draw() {
- ellipse(v.x, v.y, 12, 12);
- ellipse(25, 50, 12, 12);
- v.add(25, 50, 0);
- ellipse(v.x, v.y, 24, 24);
-}
-
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(40, 20, 0);
- v2 = new PVector(25, 50, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- PVector v3 = PVector.add(v1, v2);
- ellipse(v3.x, v3.y, 24, 24);
-} |
- ||||||||||||||
| Description | -Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. - The version of the method that adds two vectors together is a static method and returns a PVector, the others have no return value -- - they act directly on the vector. See the examples for more context. |
- ||||||||||||||
| Syntax | -vec.add(x,y,z) - vec.add(v) - PVector.add(v1,v2) |
- ||||||||||||||
| Parameters | -
-
|
- ||||||||||||||
| Returns | -None or PVector | - -||||||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||
|---|---|---|---|---|---|---|---|
| Name | -angleBetween() |
- ||||||
| Examples | - -PVector v1 = new PVector(10, 20); -PVector v2 = new PVector(60, 80); -float a = PVector.angleBetween(v1, v2); -println(degrees(a)); // Prints "10.304827" |
- ||||||
| Description | -Calculates and returns the angle (in radians) between two vectors. |
- ||||||
| Syntax | -PVector.angleBetween(v1,v2) |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -float | - -||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||
|---|---|---|---|
| Name | -array() |
- ||
| Examples | - -PVector v = new PVector(10.0, 20.0, 30.0); -float[] f = v.array(); -println(f[0]); // Prints "10.0" -println(f[1]); // Prints "20.0" -println(f[2]); // Prints "30.0" |
- ||
| Description | -Return a representation of this vector as a float array. - This is only for temporary use. If used in any other fashion, the contents should be copied by using the PVector.get() method to copy into your own array. |
- ||
| Syntax | -PVector.array() |
- ||
| Parameters | -
-
|
- ||
| Returns | -float[] | - -||
| Usage | -Web & Application | - -
| Class | -PVector | -||||
|---|---|---|---|---|---|
| Name | -cross() |
- ||||
| Examples | - -PVector v1 = new PVector(10, 20, 2); -PVector v2 = new PVector(60, 80, 6); -PVector v3 = v1.cross(v2); -println(v3); // Prints "[ -40.0, 60.0, -400.0 ]" |
- ||||
| Description | -Calculates and returns a vector composed of the cross product between two vectors. |
- ||||
| Syntax | -vec.cross(x,y,z) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -PVector | -||||
| Usage | -Web & Application | -
| Class | -PVector | -||||||||
|---|---|---|---|---|---|---|---|---|---|
| Name | -dist() |
- ||||||||
| Examples | - -PVector v1 = new PVector(10, 20, 0); -PVector v2 = new PVector(60, 80, 0); -float d = v1.dist(v2); -println(d); // Prints "78.10249"- - PVector v1 = new PVector(10, 20, 0); -PVector v2 = new PVector(60, 80, 0); -float d = PVector.dist(v1, v2); -println(d); // Prints "78.10249" |
- ||||||||
| Description | -Calculates the Euclidean distance between two points (considering a point as a vector object). |
- ||||||||
| Syntax | -vec.dist(v) - PVector.dist(v1,v2) |
- ||||||||
| Parameters | -
-
|
- ||||||||
| Returns | -float | - -||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -div() |
- ||||||||||
| Examples | - -PVector v;
-
-void setup() {
- smooth();
- noLoop();
- v = new PVector(30, 60, 0);
-}
-
-void draw() {
- ellipse(v.x, v.y, 12, 12);
- v.div(6);
- ellipse(v.x, v.y, 24, 24);
-}
-
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(90, 80, 0);
- v2 = new PVector(2, 10, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- v1.div(v2);
- ellipse(v1.x, v1.y, 24, 24);
-}
-- PVector v1;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(30, 60, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- PVector v2 = PVector.div(v1, 6);
- ellipse(v2.x, v2.y, 24, 24);
-}
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(5, 10, 0);
- v2 = new PVector(15, 8, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- PVector v3 = PVector.div(v1, v2);
- ellipse(v3.x, v3.y, 24, 24);
-} |
- ||||||||||
| Description | -Divides a vector by a scalar or divides one vector by another. |
- ||||||||||
| Syntax | -vec.div(scalar) - vec.div(v) - PVector.div(v,scalar) - PVector.div(v1,v2) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -None or PVector | - -||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -dot() |
- ||||||||||
| Examples | - -PVector v = new PVector(10, 20, 0); -float d = v.dot(60, 80, 0); -println(d); // Prints "2200.0"- - PVector v1, v2;
-
-void setup() {
- size(100, 100);
- v1 = new PVector(20.0, 30.0, 40.0);
- v2 = new PVector(0.0, 0.0, 0.0);
- v2.set(v1);
- println(v2.x); // Prints "20.0"
- println(v2.y); // Prints "30.0"
- println(v2.z); // Prints "40.0"
-}
-- PVector v1 = new PVector(10, 20, 0); -PVector v2 = new PVector(60, 80, 0); -float d = v1.dot(v2); -println(d); // Prints "2200.0" |
- ||||||||||
| Description | -Calculates the dot product of two vectors. |
- ||||||||||
| Syntax | -vec.dot(x,y,z) - vec.dot(v) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -float | -||||||||||
| Usage | -Web & Application | -
| Class | -PVector | -||
|---|---|---|---|
| Name | -get() |
- ||
| Examples | - -
-PVector v1, v2;
-
-void setup() {
- size(100, 100);
- v1 = new PVector(20.0, 30.0, 40.0);
- v2 = new PVector();
- v2 = v1.get();
- println(v2.x); // Prints "20.0"
- println(v2.y); // Prints "30.0"
- println(v2.z); // Prints "40.0"
-} |
- ||
| Description | -Gets a copy of the vector, returns a PVector object. |
- ||
| Syntax | -vec.get() |
- ||
| Parameters | -
-
|
- ||
| Returns | -PVector | - -||
| Usage | -Web & Application | - -
| Class | -PVector | -||||
|---|---|---|---|---|---|
| Name | -limit() |
- ||||
| Examples | - -PVector v = new PVector(10, 20, 2); -v.limit(5); -println(v); // Prints "[ 2.2271771, 4.4543543, 0.4454354 ]" |
- ||||
| Description | -Limit the magnitude of this vector to the value used for the max parameter. |
- ||||
| Syntax | -vec.limit(max) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -None | -||||
| Usage | -Web & Application | -
| Class | -PVector | -||
|---|---|---|---|
| Name | -mag() |
- ||
| Examples | - -PVector v;
-
-void setup() {
- size(100, 100);
- v = new PVector(20.0, 30.0, 40.0);
- float m = v.mag();
- println(m); // Prints "53.851646"
-}
- |
- ||
| Description | -Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).) |
- ||
| Syntax | -vec.mag() |
- ||
| Parameters | -
-
|
- ||
| Returns | -float | - -||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -mult() |
- ||||||||||
| Examples | - -PVector v;
-
-void setup() {
- smooth();
- noLoop();
- v = new PVector(5, 10, 0);
-}
-
-void draw() {
- ellipse(v.x, v.y, 12, 12);
- v.mult(6);
- ellipse(v.x, v.y, 24, 24);
-}
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(5, 10, 0);
- v2 = new PVector(15, 8, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- v1.mult(v2);
- ellipse(v1.x, v1.y, 24, 24);
-}
-- PVector v1;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(5, 10, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- PVector v2 = PVector.mult(v1, 6);
- ellipse(v2.x, v2.y, 24, 24);
-}
-
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(5, 10, 0);
- v2 = new PVector(15, 8, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- PVector v3 = PVector.mult(v1, v2);
- ellipse(v3.x, v3.y, 24, 24);
-} |
- ||||||||||
| Description | -Multiplies a vector by a scalar or multiplies one vector by another. |
- ||||||||||
| Syntax | -vec.mult(scalar) - vec.mult(v) - PVector.mult(v,scalar) - PVector.mult(v1,v2) |
- ||||||||||
| Parameters | -
-
|
- ||||||||||
| Returns | -None or PVector | - -||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||
|---|---|---|---|
| Name | -normalize() |
- ||
| Examples | - -PVector v = new PVector(10, 20, 2); -v.normalize(); -println(v); // Prints "[ 0.4454354, 0.8908708, 0.089087084 ]" |
- ||
| Description | -Normalize the vector to length 1 (make it a unit vector). |
- ||
| Syntax | -vec.normalize() |
- ||
| Parameters | -
-
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -
| Class | -PVector | -||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -set() |
- ||||||||||||
| Examples | - -PVector v;
-
-void setup() {
- size(100, 100);
- v = new PVector(0.0, 0.0, 0.0);
- v.set(20.0, 30.0, 40.0);
- println(v.x); // Prints "20.0"
- println(v.y); // Prints "30.0"
- println(v.z); // Prints "40.0"
-}
-- PVector v1, v2;
-
-void setup() {
- size(100, 100);
- v1 = new PVector(20.0, 30.0, 40.0);
- v2 = new PVector(0.0, 0.0, 0.0);
- v2.set(v1);
- println(v2.x); // Prints "20.0"
- println(v2.y); // Prints "30.0"
- println(v2.z); // Prints "40.0"
-}
-- PVector v;
-float[] vvv = { 20.0, 30.0, 40.0 };
-
-void setup() {
- size(100, 100);
- v = new PVector(0.0, 0.0, 0.0);
- v.set(vvv);
- println(v.x); // Prints "20.0"
- println(v.y); // Prints "30.0"
- println(v.z); // Prints "40.0"
-} |
- ||||||||||||
| Description | -Sets the x, y, and z component of the vector using three separate variables, the data from a PVector, or the values from a float array. |
- ||||||||||||
| Syntax | -vec.set(x,y,z) - vec.set(v) - vec.set(array) |
- ||||||||||||
| Parameters | -
-
|
- ||||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Name | -sub() |
- ||||||||||||||
| Examples | - -PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(40, 20, 0);
- v2 = new PVector(65, 70, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- v2.sub(v1);
- ellipse(v2.x, v2.y, 24, 24);
-}
-- PVector v;
-
-void setup() {
- smooth();
- noLoop();
- v = new PVector(65, 70, 0);
-}
-
-void draw() {
- ellipse(v.x, v.y, 12, 12);
- ellipse(40, 20, 12, 12);
- v.sub(40, 20, 0);
- ellipse(v.x, v.y, 24, 24);
-}
-- PVector v1, v2;
-
-void setup() {
- smooth();
- noLoop();
- v1 = new PVector(65, 70, 0);
- v2 = new PVector(40, 20, 0);
-}
-
-void draw() {
- ellipse(v1.x, v1.y, 12, 12);
- ellipse(v2.x, v2.y, 12, 12);
- PVector v3 = PVector.sub(v1, v2);
- ellipse(v3.x, v3.y, 24, 24);
-} |
- ||||||||||||||
| Description | -Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. - The version of the method that substracts two vectors is a static method and returns a PVector, the others have no return value -- - they act directly on the vector. See the examples for more context. |
- ||||||||||||||
| Syntax | -vec.sub(x,y,z) - vec.sub(v) - PVector.sub(v1,v2) |
- ||||||||||||||
| Parameters | -
-
|
- ||||||||||||||
| Returns | -None or PVector | - -||||||||||||||
| Usage | -Web & Application | - -
| Class | -PVector | -||
|---|---|---|---|
| Name | -x |
- ||
| Examples | - -PVector v;
-
-void setup() {
- size(100, 100);
- v = new PVector(20.0, 30.0, 40.0);
- println(v.x); // Prints "20.0"
- println(v.y); // Prints "30.0"
- println(v.z); // Prints "40.0"
- v.x = 50.0;
- println(v.x); // Prints "50.0"
-} |
- ||
| Description | -The x component of the vector. This field (variable) can be used to both get and set the value (see above example.). |
- ||
| Syntax | -vec.x |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Class | -PVector | -||
|---|---|---|---|
| Name | -y |
- ||
| Examples | - -
-PVector v;
-
-void setup() {
- size(100, 100);
- v = new PVector(20.0, 30.0, 40.0);
- println(v.x); // Prints "20.0"
- println(v.y); // Prints "30.0"
- println(v.z); // Prints "40.0"
- v.y = 50.0;
- println(v.y); // Prints "50.0"
-} |
- ||
| Description | -The y component of the vector. This field (variable) can be used to both get and set the value (see above example.) |
- ||
| Syntax | -vec.y |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Class | -PVector | -||
|---|---|---|---|
| Name | -z |
- ||
| Examples | - -PVector v;
-
-void setup() {
- size(100, 100);
- v = new PVector(20.0, 30.0, 40.0);
- println(v.x); // Prints "20.0"
- println(v.y); // Prints "30.0"
- println(v.z); // Prints "40.0"
- v.z = 50.0;
- println(v.z); // Prints "50.0"
-} |
- ||
| Description | -The z component of the vector. This field (variable) can be used to both get and set the value (see above example.) |
- ||
| Syntax | -vec.z |
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | - -
| Name | - -QUARTER_PI (0.78539...) |
-
-
|---|---|
| Examples | - - - -float angle = 0.0;
-
-beginShape(POLYGON);
-
-vertex(width/2, height/2);
-
-while(angle QUARTER_PI) {
-
- vertex(width/2 + cos(angle)*40, height/2 + sin(angle)*40);
-
- angle += PI/12.0;
-
-}
-
-endShape(CLOSE); |
-
-
| Description | - -QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). | - - - -
| Usage | - -Web & Application | - -
| Related | - -PI - - TWO_PI - - HALF_PI |
-
-
| Name | - -String |
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - -String str1 = "CCCP";
-
-char data[] = {'C', 'C', 'C', 'P'};
-
-String str2 = new String(data);
-
-println(str1); // Prints "CCCP" to the console
-
-println(str2); // Prints "CCCP" to the console// Comparing String objects, see reference below.
-
-String p = "potato";
-
-if (p == "potato") {
-
- println("p == potato, yep."); // this will not print
-
-}
-
-// The correct way to compare two Strings
-
-if (p.equals("potato")) {
-
- println("Yes, the contents of p and potato are the same.");
-
-}// Use a backslash to include quotes in a String - -String quoted = "This one has \"quotes\""; - -println(quoted); // This one has "quotes" |
-
- ||||||||||||||
| Description | - -A string is a sequence of characters. The class String includes methods for examining individual characters, comparing strings, searching strings, extracting parts of strings, and for converting an entire string uppercase and lowercase. Strings are always defined inside double quotes ("Abc") and characters are always defined inside single quotes('A').
-
-
-
- - -To compare the contents of two Strings, use the equals() method, as in "if (a.equals(b))", instead of "if (a == b)". A String is an Object, so comparing them with the == operator only compares whether both Strings are stored in the same memory location. Using the equals() method will ensure that the actual contents are compared. (The troubleshooting reference has a longer explanation.) - - - -Because a String is defined within quotes, including quotes in a String requires the \ (backslash) character to be used (see the second example above). This is known as an escape sequence. Other escape sequences include \t for the tab character, and \n for new line. A single backslash is indicated by \. - - - -There are more string methods than those linked from this page. Additional String documentation is located at http://java.sun.com/j2se/1.4.2/docs/api/. |
-
-
-
- ||||||||||||||
| Methods | - -
|
-
- ||||||||||||||
| Constructor | - -String(data) - -String(data, offset, length) |
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - - - -||||||||||||||
| Related | - -char
-
- text() |
-
-
| Class | -String | -||||
|---|---|---|---|---|---|
| Name | -charAt() |
- ||||
| Examples | - -String str = "CCCP"; -char c1 = str.charAt(0); -char c2 = str.charAt(1); -char c3 = str.charAt(str.length()-1); -println(c1 + ":" + c2 + ":" + c3); // Prints 'C:C:P' |
- ||||
| Description | -Returns the character at the specified index. An index ranges from 0 to the length of the string minus 1. - The first character of the sequence is at index 0, the next at index 1, etc. - | -||||
| Syntax | -str.charAt(index) |
-
- ||||
| Parameters | -
-
|
- ||||
| Returns | -char | - -||||
| Usage | -Web & Application | - -
| Class | -String | -||||
|---|---|---|---|---|---|
| Name | -equals() |
- ||||
| Examples | - -String str1 = "CCCP";
-String str2 = "CCCP";
-// Tests to see if str1 is equal to str2
-if(str1.equals(str2) == true) {
- println("Equal"); // They are equal so this line will print
-} else {
- println("Not equal");
-} |
- ||||
| Description | -Compares two strings to see if they are the same. This method is necessary because it's not possible to compare strings using the equality operator (==). - Returns true if the strings are the same and false if they are not. - | -||||
| Syntax | -str.equals(str) |
-
- ||||
| Parameters | -
-
|
- ||||
| Returns | -Boolean | - -||||
| Usage | -Web & Application | - -
| Class | -String | -||||||
|---|---|---|---|---|---|---|---|
| Name | -indexOf() |
- ||||||
| Examples | - -String str = "CCCP";
-int p1 = str.indexOf("C");
-int p2 = str.indexOf("P");
-int p3 = str.indexOf("CP");
-println(p1 + ":" + p2 + ":" + p3); // Prints '0:3:2' |
- ||||||
| Description | -Tests to see if a substring is embedded in a string and returns the index position of the first occurance of the substring defined in the str parameter. - If the str parameter is not found in the string, -1 is returned. - | -||||||
| Syntax | -str.indexOf(index) - str.indexOf(index,fromIndex)- |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -int | - -||||||
| Usage | -Web & Application | - -
| Class | -String | -||
|---|---|---|---|
| Name | -length() |
- ||
| Examples | - -String str1 = "CCCP"; -String str2 = "Rabbit"; -int l1 = str1.length(); -int l2 = str2.length(); -println(l1 + ":" + l2); // Prints '4:6' |
- ||
| Description | -Returns the total number of characters included in the String as an integer number. -People are often confused by the use of length() to get the size of a String and length to get the size of an array. Notice the absence of the parentheses when working with arrays. - |
- ||
| Syntax | -str.charAt()- |
- ||
| Parameters | -
-
|
- ||
| Returns | -int | - -||
| Usage | -Web & Application | - -
| Class | -String | -||||||
|---|---|---|---|---|---|---|---|
| Name | -substring() |
- ||||||
| Examples | - -String str1 = "CCCP"; -String str2 = "Rabbit"; -String ss1 = str1.substring(2); // Returns "CP" -String ss2 = str2.substring(3); // Returns "bit" -String ss3 = str1.substring(0, 2); // Returns "CC" -println(ss1 + ":" + ss2 + ":" + ss3); // Prints 'CP:bit:CC' |
- ||||||
| Description | -Returns a new string that is a part of the original string. When using the endIndex parameter, the string between beginIndex and endIndex-1 is returned. - | -||||||
| Syntax | -str.indexOf(beginIndex) - str.indexOf(beginIndex,endIndex)- |
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -String | - -||||||
| Usage | -Web & Application | - -
| Class | -String | -||
|---|---|---|---|
| Name | -toLowerCase() |
- ||
| Examples | - -String str1 = "CCCP"; -String str2 = "Rabbit"; -str1 = str1.toLowerCase(); -str2 = str2.toLowerCase(); -println(str1 + ":" + str2); // Prints cccp:rabbit |
- ||
| Description | -Converts all of the characters in the string to lowercase. For example, "ABC" will convert to "abc". - | -||
| Syntax | -str.toLowerCase()- |
- ||
| Parameters | -
-
|
- ||
| Returns | -String | - -||
| Usage | -Web & Application | - -
| Class | -String | -||
|---|---|---|---|
| Name | -toUpperCase() |
- ||
| Examples | - -String str1 = "Cccp"; -String str2 = "Rabbit"; -str1 = str1.toUpperCase(); -str2 = str2.toUpperCase(); -println(str1 + ":" + str2); // Prints CCCP:RABBIT |
- ||
| Description | -Converts all of the characters in the string to uppercase. For example, "abc" will convert to "ABC". - | -||
| Syntax | -str.toUpperCase()- |
- ||
| Parameters | -
-
|
- ||
| Returns | -String | - -||
| Usage | -Web & Application | - -
| Name | - -TWO_PI (6.28318...) |
-
-
-
- ||
|---|---|---|---|
| Examples | - - float f = 0.0;
-
-beginShape(POLYGON);
-
-while(f < TWO_PI) {
-
- vertex(width/2 + cos(f)*40, height/2 + sin(f)*40);
-
- f += PI/12.0;
-
-}
-
-endShape(); |
-
- ||
| Description | - -TWO_PI is a mathematical constant with the value 6.28318530717958647693. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). | - -||
| Syntax | - - - -TWO_PI |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -PI - - HALF_PI |
-
-
| Name | -XMLElement |
- ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- for (int i = 0; i < numSites; i++) {
- XMLElement kid = xml.getChild(i);
- int id = kid.getInt("id");
- String url = kid.getString("url");
- String site = kid.getContent();
- println(id + " : " + url + " : " + site);
- }
-} |
- ||||||||||||||||
| Description | -XMLElement is a representation of an XML object. The object is able to parse XML code. - The methods described here are the most basic. - More are documented in the Developer's Reference. The encoding parameter inside XML files is ignored, only UTF-8 (or plain ASCII) are parsed properly. - |
-
- ||||||||||||||||
| Methods | -
|
- ||||||||||||||||
| Constructor | -XMLElement(parent,file) |
- ||||||||||||||||
| Parameters | -
|
- ||||||||||||||||
| Usage | -Web & Application | - -
| Class | -XMLElement | -||
|---|---|---|---|
| Name | -getChildCount() |
- ||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- println(numSites); // Prints "2"
-} |
- ||
| Description | -Returns the number of children for the element. - | -||
| Syntax | -xml.getChildCount() |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -int | - -||
| Usage | -Web & Application | - -
| Class | -XMLElement | -||||||
|---|---|---|---|---|---|---|---|
| Name | -getChild() |
- ||||||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- XMLElement kid = xml.getChild(0);
- String site = kid.getContent();
- println(site);
-}void setup() {
- // Download RSS feed of news stories from yahoo.com
- String url = "http://rss.news.yahoo.com/rss/topstories";
- XMLElement rss = new XMLElement(this, url);
- // Get the |
- ||||||
| Description | -Returns the child XMLElement as specified by the index parameter. The value of the index parameter must be less than the total number of children to avoid going out of
- the array storing the child elements. When the path parameter is specified, then it will return all children that match that path. - The path is a series of elements and sub-elements, separated by slashes. - |
- ||||||
| Syntax | -xml.getChild(index) - xml.getChild(path)- |
-
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -XMLElement | - -||||||
| Usage | -Web & Application | - -||||||
| Related | -XMLElement_getChildCount() - XMLElement_getChildren() |
-
-
| Class | -XMLElement | -||
|---|---|---|---|
| Name | -getChildren() |
- ||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- XMLElement[] kids = xml.getChildren();
- for (int i=0; i < kids.length; i++) {
- String site = kids[i].getContent();
- println(site);
- }
-}void setup() {
- // Download RSS feed of news stories from yahoo.com
- String url = "http://rss.news.yahoo.com/rss/topstories";
- XMLElement rss = new XMLElement(this, url);
- // Get all elements
- XMLElement[] links = rss.getChildren("channel/item/link");
- for (int i = 0; i < links.length; i++) {
- println(links[i].getContent());
- }
-} |
- ||
| Description | -Returns all of the children as an XMLElement array. When the path parameter is specified, - then it will return all children that match that path. - The path is a series of elements and sub-elements, separated by slashes. - | -||
| Syntax | -xml.getChildren() - xml.getChildren(path)- |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -XMLElement[] | - -||
| Usage | -Web & Application | - -||
| Related | -XMLElement_getChildCount() - XMLElement_getChild() |
-
-
| Class | -XMLElement | -||
|---|---|---|---|
| Name | -getContent() |
- ||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- for (int i = 0; i < numSites; i++) {
- XMLElement kid = xml.getChild(i);
- String site = kid.getContent();
- println(site);
- }
-} |
- ||
| Description | -Returns the content of an element. If there is no such content, null is returned. - | -||
| Syntax | -xml.getContent() |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -String | - -||
| Usage | -Web & Application | - -
| Class | -XMLElement | -||||||
|---|---|---|---|---|---|---|---|
| Name | -getFloatAttribute() |
- ||||||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- for (int i = 0; i < numSites; i++) {
- XMLElement kid = xml.getChild(i);
- int id = kid.getIntAttribute("id");
- float url = kid.getFloatAttribute("rank");
- String site = kid.getContent();
- println(id + " : " + url + " : " + site);
- }
-} |
- ||||||
| Description | -Returns a float attribute of the element. If the default parameter is used and the attribute doesn't exist, - the default value is returned. When using the version of the method without the default parameter, - if the attribute doesn't exist, the value 0 is returned. - | -||||||
| Syntax | -xml.getFloatAttribute(name) - xml.getFloatAttribute(name,default)- |
-
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -float | - -||||||
| Usage | -Web & Application | -
| Class | -XMLElement | -||||||
|---|---|---|---|---|---|---|---|
| Name | -getIntAttribute() |
- ||||||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- for (int i = 0; i < numSites; i++) {
- XMLElement kid = xml.getChild(i);
- int id = kid.getIntAttribute("id");
- String url = kid.getStringAttribute("url");
- String site = kid.getContent();
- println(id + " : " + url + " : " + site);
- }
-} |
- ||||||
| Description | -Returns an integer attribute of the element. If the default parameter is used and the attribute doesn't exist, the default value is returned. - When using the version of the method without the default parameter, if the attribute doesn't exist, the value 0 is returned. - | -||||||
| Syntax | -xml.getIntAttribute(name) - xml.getIntAttribute(name,default)- |
-
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -int | - -||||||
| Usage | -Web & Application | -
| Class | -XMLElement | -||
|---|---|---|---|
| Name | -getName() |
- ||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- XMLElement site = xml.getChild(0);
- XMLElement[] siteData = site.getChildren();
- String s1 = siteData[0].getName();
- String s2 = siteData[1].getName();
- println(s1 + " : " + s2); // Prints "name : url"
-} |
- ||
| Description | -Returns the name of the element. - | -||
| Syntax | -xml.getName() |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -String | - -||
| Usage | -Web & Application | -
| Class | -XMLElement | -||||||
|---|---|---|---|---|---|---|---|
| Name | -getStringAttribute() |
- ||||||
| Examples | - -// The following short XML file called "sites.xml" is parsed
-// in the code below. It must be in the project's "data" directory
-// <?xml version="1.0"?>
-// <websites>
-// <site id="0" url="processing.org">Processing</site>
-// <site id="1" url="mobile.processing.org">Processing Mobile</site>
-// </websites>
-
-XMLElement xml;
-
-void setup() {
- size(200, 200);
- xml = new XMLElement(this, "sites.xml");
- int numSites = xml.getChildCount();
- for (int i = 0; i < numSites; i++) {
- XMLElement kid = xml.getChild(i);
- int id = kid.getIntAttribute("id");
- String url = kid.getStringAttribute("url");
- String site = kid.getContent();
- println(id + " : " + url + " : " + site);
- }
-} |
- ||||||
| Description | -Returns a String attribute of the element. If the default parameter is used and the attribute doesn't exist, - the default value is returned. When using the version of the method without the default parameter, - if the attribute doesn't exist, the value 0 is returned. - | -||||||
| Syntax | -xml.getStringAttribute(name) - xml.getStringAttribute(name,default)- |
-
- ||||||
| Parameters | -
-
|
- ||||||
| Returns | -String | - -||||||
| Usage | -Web & Application | -
| Name | - -abs() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -int a = abs(153); // Sets a to 153 - -int b = abs(-15); // Sets b to 15 - -float c = abs(12.234); // Sets c to 12.234 - -float d = abs(-9.23); // Sets d to 9.23 |
-
- ||
| Description | - - - -Calculates the absolute value (magnitude) of a number. The absolute value of a number is always positive. | - -||
| Syntax | - -abs(value) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -
| Name | -acos() |
-
- ||
|---|---|---|---|
| Examples | -float a = PI; -float c = cos(a); -float ac = acos(c); -// Prints "3.1415927 : -1.0 : 3.1415927" -println(a + " : " + c + " : " + ac); - float a = PI + PI/4.0; -float c = cos(a); -float ac = acos(c); -// Prints "3.926991 : -0.70710665 : 2.3561943" -println(a + " : " + c + " : " + ac); |
- ||
| Description | - -The inverse of cos(), returns the arc cosine of a value. - This function expects the values in the range of -1 to 1 and values are returned in the range 0 to PI (3.1415927). - |
- ||
| Syntax | -
- acos(value) |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -cos() - asin() - atan() |
-
| Name | - -+= (add assign) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 50; - -int b = 23; - -a += b; // sets "a" to 73 |
-
- ||||
| Description | - - - -Combines addition with assignment. The expression a += b is equivalent to a = a + b. | - -||||
| Syntax | - -value1 += value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -
-
- = (assign) - - + (add) - - -= (subtract assign) |
-
-
| Name | - -+ (addition) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 50 + 5; // Sets a to 55 - -int b = a + 5; // Sets b to 60 String s1 = "Chernenko"; - -String s2 = "Brezhnev"; - -String sc1 = s1 + s2; - -String sc2 = s1 + ", Andropov, " + s2; - -println(sc1); // Prints ChernenkoBrezhnev - -println(sc2); // Prints Chernenko, Andropov, Brezhnev String s1 = "Gorbachev"; - -int i = 1987; - -String sc1 = s1 + i; - -println(sc1); // Prints Gorbachev1987 |
-
- ||||
| Description | - -Adds two values or concatenates string values. As a mathematical operator, it calculates the sum of two values. As a string operator, it combines two strings into one and converts from primitive datatypes into the String datatype if necessary. | - -||||
| Syntax | - -value1 + value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -++ (increment) - - += (add assign) - - - (minus) |
-
-
| Name | - -alpha() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -color c = color(0, 126, 255, 102); - -fill(c); - -rect(15, 15, 35, 70); - -float value = alpha(c); //Sets "value" to "102" - -fill(value); - -rect(50, 15, 35, 70); |
-
- ||
| Description | - - - -Extracts the alpha value from a color. | - -||
| Syntax | - -alpha(color) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- red() - - green() - - blue() - - hue() - - saturation() - - brightness() - - |
-
-
| Name | -ambientLight() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -// The spheres are white by default so -// the ambient light changes their color -ambientLight(51, 102, 126); -translate(20, 50, 0); -sphere(30); -translate(60, 0, 0); -sphere(30);  size(100, 100, P3D); -background(0); -noStroke(); -directionalLight(126, 126, 126, 0, 0, -1); -ambientLight(102, 102, 102); -translate(32, 50, 0); -rotateY(PI/5); -box(40); -translate(60, 0, 0); -sphere(30); |
- ||||||||||||
| Description | - -Adds an ambient light. Ambient light doesn't come from a specific direction, the rays have light have bounced around so much that objects are - evenly lit from all sides. Ambient lights are almost always used in combination with other types of lights. Lights need to be included in the draw() - to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. - The effect of the parameters is determined by the current color mode. |
- ||||||||||||
| Syntax | -ambientLight(v1,v2,v3) - ambientLightv1,v2,v3,x,y,z) |
- ||||||||||||
| Parameters | -
|
-
- ||||||||||||
| Usage | -Web & Application | -||||||||||||
| Related | -lights() - directionalLight() - spotLight() |
-
| Name | -ambient() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -directionalLight(153, 153, 153, .5, 0, -1); -ambientLight(153, 102, 0); -ambient(51, 26, 0); -translate(70, 50, 0); -sphere(30); |
- ||||||||||
| Description | - -Sets the ambient reflectance for shapes drawn to the screen. This is combined with the ambient light component of environment. - The color components set through the parameters define the reflectance. For example in the default color mode, setting v1=255, v2=126, v3=0, - would cause all the red light to reflect and half of the green light to reflect. Used in combination with emissive(), specular(), and - shininess() in setting the materal properties of shapes. |
- ||||||||||
| Syntax | -ambient(gray) - ambient(color) - ambient(v1,v2,v3) |
- ||||||||||
| Parameters | -
|
-
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -emissive() - specular() - shininess() |
-
| Name | -append() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String[] sa1 = { "OH ", "NY ", "CA "};
-String[] sa2 = append(sa1, "MA ");
-println(sa2); // Prints OH, NY, CA, MA |
- ||||
| Description | -
- Expands an array by one element and adds data to the new position. The datatype of the element parameter must be the same as the datatype of the array. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) append(originalArray, element). |
- ||||
| Syntax | -append(array,element) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -Array (the same datatype as the input) | -||||
| Usage | -Web & Application | - -||||
| Related | -shorten() - expand() |
-
-
| Name | -applyMatrix() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D); -noFill(); -translate(50, 50, 0); -rotateY(PI/6); -stroke(153); -box(35); -// Set rotation angles -float ct = cos(PI/9.0); -float st = sin(PI/9.0); -// Matrix for rotation around the Y axis -applyMatrix( ct, 0.0, st, 0.0, - 0.0, 1.0, 0.0, 0.0, - -st, 0.0, ct, 0.0, - 0.0, 0.0, 0.0, 1.0); -stroke(255); -box(50); |
- ||
| Description | - -Multiplies the current matrix by the one specified through the parameters. - This is very slow because it will try to calculate the inverse of the transform, so avoid it whenever possible. - The equivalent function in OpenGL is glMultMatrix(). |
- ||
| Syntax | -applyMatrix(n00, n01, n02, n03, - n04, n05, n06, n07, - n08, n09, n10, n11, - n12, n13, n14, n15) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -pushMatrix() - popMatrix() - resetMatrix() - printMatrix() |
-
| Name | - -arc() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - - arc(50, 55, 50, 50, 0, PI/2); - -noFill(); - -arc(50, 55, 60, 60, PI/2, PI); - -arc(50, 55, 70, 70, PI, TWO_PI-PI/2); - -arc(50, 55, 80, 80, TWO_PI-PI/2, TWO_PI); |
-
- ||||||||||||
| Description | - -Draws an arc in the display window. Arcs are drawn along the outer edge of an ellipse defined by the x, y, width and height parameters. The origin or the arc's ellipse may be changed with the ellipseMode() function. The start and stop parameters specify the angles at which to draw the arc. | - - - -||||||||||||
| Syntax | - -arc(x, y, width, height, start, stop) |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Returns | - -None | - -||||||||||||
| Usage | - -Web & Application | - -||||||||||||
| Related | - - - -ellipseMode()
-
- ellipse() |
-
-
| Name | - -[] (array access) |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - - -- -int[] numbers = new int[3]; - -numbers[0] = 90; - -numbers[1] = 150; - -numbers[2] = 30; - -int a = numbers[0] + numbers[1]; // Sets variable a to 240 - -int b = numbers[1] + numbers[2]; // Sets variable b to 180 |
-
- ||||||
| Description | - -The array access operator is used to specify a location within an array. The data at this location can be defined with the syntax array[element] = value or read with the syntax value = array[element]. | - - - -||||||
| Syntax | - -datatype[] - -array[element] |
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -Array |
-
-
| Name | -arrayCopy() |
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -String[] north = { "OH", "IN", "MI"};
-String[] south = { "GA", "FL", "NC"};
-arrayCopy(north, south);
-print(south); // Prints OH, IN, MI- String[] north = { "OH", "IN", "MI"};
-String[] south = { "GA", "FL", "NC"};
-arrayCopy(north, 1, south, 0, 2);
-println(south); // Prints IN, MI, NC |
- ||||||||||
| Description | -
- Copies an array (or part of an array) to another array. The src array is copied to the dst array, beginning at the position specified by srcPos and into - the position specified by dstPos. The number of elements to copy is determined by length. The simplified version with two arguments copies an entire array to - another of the same size. It is equivalent to "arrayCopy(src, 0, dst, 0, src.length)". - This function is far more efficient for copying array data than iterating through a for and copying each element. |
- ||||||||||
| Syntax | -arrayCopy(src,dest) - arrayCopy(src,dest,length) |
- ||||||||||
| Parameters | - -
|
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | - -
| Name | -asin() |
-
- ||
|---|---|---|---|
| Examples | -float a = PI/3; -float s = sin(a); -float as = asin(s); -// Prints "1.0471976 : 0.86602545 : 1.0471976" -println(a + " : " + s + " : " + as);- - float a = PI + PI/3.0; -float s = sin(a); -float as = asin(s); -// Prints "4.1887903 : -0.86602545 : -1.0471976" -println(a + " : " + s + " : " + as);- |
- ||
| Description | - -The inverse of sin(), returns the arc sine of a value. This function expects the values in the range of -1 to 1 and - values are returned in the range -PI/2 to PI/2. |
- ||
| Syntax | -
- asin(value) |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -sin() - acos() - atan() |
-
| Name | - -= (assign) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a; - -a = 30; // Assigns for value 30 to the variable "a" - -a = a + 40; // Assigns the value 70 to the variable "a" |
-
- ||||
| Description | - -Assigns a value to a variable. The "=" sign does not mean "equals", but is used to place data within a variable. The "=" operator is formally called the assignment operator. There are many different types of variables (int, floats, strings, etc.) and the assignment operator can only assign values which are the same type as the variable it is assigning. For example, if the variable is of type int, the value must also be an int. | - - - -||||
| Syntax | - -var = value |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -+= (add assign)
-
- -= (subtract assign) |
-
-
| Name | - -atan2() |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -void draw() {
-
- background(204);
-
- translate(width/2, height/2);
-
- float a = atan2(mouseY-height/2, mouseX-width/2);
-
- rotate(a);
-
- rect(-12, -5, 24, 10);
-
-} |
-
- ||||
| Description | - - - -Calculates the angle (in radians) from a specified point to the coordinate origin as measured from the positive x-axis. Values are returned as a float in the range from PI to -PI. The atan2() function is most often used for orienting geometry to the position of the cursor. Note: The y-coordinate of the point is the first parameter and the x-coordinate is the second due the the structure of calculating the tangent. | - -||||
| Syntax | - -atan2(y, x); |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - - - -Web & Application | - -||||
| Related | - -tan() |
-
-
| Name | -atan() |
-
- ||
|---|---|---|---|
| Examples | -float a = PI/3; -float t = tan(a); -float at = atan(t); -// Prints "1.0471976 : 1.7320509 : 1.0471976" -println(a + " : " + t + " : " + at);- - float a = PI + PI/3.0; -float t = tan(a); -float at = atan(t); -// Prints "4.1887903 : 1.7320513 : 1.0471977" -println(a + " : " + t + " : " + at);- |
- ||
| Description | - -The inverse of tan(), returns the arc tangent of a value. This function expects the values in the range of - -Infinity to Infinity (exclusive) and values are returned in the range -PI/2 to PI/2 . |
- ||
| Syntax | -
- atan(value) |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -tan() - asin() - acos() |
-
| Name | - -background() |
-
-
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - background(51);  background(255, 204, 0); 
-
-// @pjs preload must be used to preload the image
-
-/* @pjs preload="laDefense.jpg"; */
-
-PImage b;
-
-b = loadImage("laDefense.jpg");
-
-background(b); |
-
- ||||||||||||||
| Description | - -The background() function sets the color used for the background of the Processing window. The default background is light gray. In the draw() function, the background color is used to clear the display window at the beginning of each frame.
-
- - -An image can also be used as the background for a sketch, however its width and height must be the same size as the sketch window. - - - -Unlike Processing, it is possible to use transparency (alpha) in background colors with the main drawing surface. |
-
-
-
- ||||||||||||||
| Syntax | - -background(gray) - -background(gray, alpha) - -background(value1, value2, value3) - -background(value1, value2, value3, alpha) - -background(color) - -background(color, alpha) - -background(hex) - -background(hex, alpha) |
-
-
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||
| Related | - - - -stroke() - - fill() - - tint() - - colorMode() |
-
-
| Name | -beginCamera() |
-
-
|---|---|
| Examples | - // The image for this example has not been updated. -size(100, 100, P3D); -noFill(); - -beginCamera(); -camera(); -rotateX(-PI/6); -endCamera(); - -translate(50, 50, 0); -rotateY(PI/3); -box(45); |
-
| Description | - -The beginCamera() and endCamera() functions enable advanced customization of the camera space. - The functions are useful if you want to more control over camera movement, however for most users, the camera() function will be sufficient. -The camera functions will replace any transformations (such as rotate() or translate()) that occur before them in draw(), - but they will not automatically replace the camera transform itself. For this reason, camera functions should be placed at the beginning of draw() - (so that transformations happen afterwards), and the camera() function can be used after beginCamera() if you want to reset the camera before applying transformations. -This function sets the matrix mode to the camera matrix so calls such as translate(), rotate(), applyMatrix() and resetMatrix() - affect the camera. beginCamera() should always be used with a following endCamera() and pairs of beginCamera() and endCamera() cannot be nested. |
-
| Syntax | -beginCamera() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -camera() - endCamera() - applyMatrix() - resetMatrix() - translate() - rotate() - scale() |
-
| Name | - -beginShape() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - beginShape(); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape();  beginShape(POINTS); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape();  beginShape(LINES); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape();  noFill(); - -beginShape(); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape();  noFill(); - -beginShape(); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape(CLOSE);  beginShape(TRIANGLES); - -vertex(30, 75); - -vertex(40, 20); - -vertex(50, 75); - -vertex(60, 20); - -vertex(70, 75); - -vertex(80, 20); - -endShape();  beginShape(TRIANGLE_STRIP); - -vertex(30, 75); - -vertex(40, 20); - -vertex(50, 75); - -vertex(60, 20); - -vertex(70, 75); - -vertex(80, 20); - -vertex(90, 75); - -endShape();  beginShape(TRIANGLE_FAN); - -vertex(57.5, 50); - -vertex(57.5, 15); - -vertex(92, 50); - -vertex(57.5, 85); - -vertex(22, 50); - -vertex(57.5, 15); - -endShape();  beginShape(QUADS); - -vertex(30, 20); - -vertex(30, 75); - -vertex(50, 75); - -vertex(50, 20); - -vertex(65, 20); - -vertex(65, 75); - -vertex(85, 75); - -vertex(85, 20); - -endShape();  beginShape(QUAD_STRIP); - -vertex(30, 20); - -vertex(30, 75); - -vertex(50, 20); - -vertex(50, 75); - -vertex(65, 20); - -vertex(65, 75); - -vertex(85, 20); - -vertex(85, 75); - -endShape();  beginShape(); - -vertex(20, 20); - -vertex(40, 20); - -vertex(40, 40); - -vertex(60, 40); - -vertex(60, 60); - -vertex(20, 60); - -endShape(CLOSE); |
-
-
-
- ||
| Description | - -Using the beginShape() and endShape() functions allow creating more complex forms. beginShape() begins recording vertices for a shape and endShape() stops recording. The value of the MODE parameter tells it which types of shapes to create from the provided vertices. With no mode specified, the shape can be any irregular polygon. The parameters available for beginShape() are POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, and QUAD_STRIP. After calling the beginShape() function, a series of vertex() commands must follow. To stop drawing the shape, call endShape(). The vertex() function with two parameters specifies a position in 2D and the vertex() function with three parameters specifies a position in 3D. Each shape will be outlined with the current stroke color and filled with the fill color. Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). | - - - -||
| Syntax | - -beginShape(MODE) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- endShape() - - vertex() - - curveVertex() - - bezierVertex() |
-
-
| Name | -bezierDetail() |
- ||
|---|---|---|---|
| Examples | - - void setup() {
- size(100, 100, P3D);
- noFill();
- noLoop();
-}
-
-void draw() {
- bezierDetail(1);
- bezier(85, 20, 10, 10, 90, 90, 15, 80);
- stroke(126);
- bezierDetail(3);
- bezier(85, 20, 10, 10, 90, 90, 15, 80);
- stroke(255);
- bezierDetail(12);
- bezier(85, 20, 10, 10, 90, 90, 15, 80);
-} |
- ||
| Description | -
- Sets the resolution at which Beziers display. The default value is 20. - This function is only useful when using the P3D or OPENGL renderer as the default (JAVA2D) renderer does not use this information. |
- ||
| Syntax | -bezierDetail(detail) |
- ||
| Parameters | - -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | - -||
| Related | -curve() - curveVertex() - curveTightness() |
-
-
| Name | -bezierPoint() |
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - noFill();
-bezier(85, 20, 10, 10, 90, 90, 15, 80);
-fill(255);
-int steps = 10;
-for (int i = 0; i <= steps; i++) {
- float t = i / float(steps);
- float x = bezierPoint(85, 10, 90, 15, t);
- float y = bezierPoint(20, 10, 90, 80, t);
- ellipse(x, y, 5, 5);
-} |
- ||||||||||
| Description | -
- Evaluates the Bezier at point t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points. - This can be done once with the x coordinates and a second time with the y coordinates to get the location of a bezier curve at t. |
- ||||||||||
| Syntax | -bezierPoint(a,b,c,d,t) |
- ||||||||||
| Parameters | - -
|
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | - -||||||||||
| Related | -bezier() - bezierVertex() - curvePoint() |
-
-
| Name | -bezierTangent() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - noFill();
-bezier(85, 20, 10, 10, 90, 90, 15, 80);
-int steps = 6;
-fill(255);
-for (int i = 0; i <= steps; i++) {
- float t = i / float(steps);
- // Get the location of the point
- float x = bezierPoint(85, 10, 90, 15, t);
- float y = bezierPoint(20, 10, 90, 80, t);
- // Get the tangent points
- float tx = bezierTangent(85, 10, 90, 15, t);
- float ty = bezierTangent(20, 10, 90, 80, t);
- // Calculate an angle from the tangent points
- float a = atan2(ty, tx);
- a += PI;
- stroke(255, 102, 0);
- line(x, y, cos(a)*30 + x, sin(a)*30 + y);
- // This follwing line of code makes a line
- // inverse of the above line
- //line(x, y, cos(a)*-30 + x, sin(a)*-30 + y);
- stroke(0);
- ellipse(x, y, 5, 5);
-} noFill();
-bezier(85, 20, 10, 10, 90, 90, 15, 80);
-stroke(255, 102, 0);
-int steps = 16;
-for (int i = 0; i <= steps; i++) {
- float t = i / float(steps);
- float x = bezierPoint(85, 10, 90, 15, t);
- float y = bezierPoint(20, 10, 90, 80, t);
- float tx = bezierTangent(85, 10, 90, 15, t);
- float ty = bezierTangent(20, 10, 90, 80, t);
- float a = atan2(ty, tx);
- a -= HALF_PI;
- line(x, y, cos(a)*8 + x, sin(a)*8 + y);
-} |
- ||||||||||
| Description | - -Calculates the tangent of a point on a Bezier curve. There is a good definition of "tangent" at Wikipedia: http://en.wikipedia.org/wiki/Tangent | -||||||||||
| Syntax | -bezierTangent(a,b,c,d,t) |
- ||||||||||
| Parameters | - -
|
- ||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -bezier() - bezierVertex() - curvePoint() |
-
-
| Name | - -bezierVertex() |
-
-
-
- ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - noFill(); - -beginShape(); - -vertex(30, 20); - -bezierVertex(80, 0, 80, 75, 30, 75); - -endShape();  beginShape(); - -vertex(30, 20); - -bezierVertex(80, 0, 80, 75, 30, 75); - -bezierVertex(50, 80, 60, 25, 30, 20); - -endShape(); |
-
- ||||||||||||||||||
| Description | - -Specifies vertex coordinates for Bezier curves. Each call to bezierVertex() defines the position of two control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time bezierVertex() is used within a beginShape() call, it must be prefaced with a call to vertex() to set the first anchor point. This function must be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). Using the 3D version of requires rendering with P3D or OPENGL (see the Environment reference for more information). | - - - -||||||||||||||||||
| Syntax | - -bezierVertex(cx1, cy1, cx2, cy2, x, y)
-
-bezierVertex(cx1, cy1, cz1, cx2, cy2, cz2, x, y, z) |
-
-
-
- ||||||||||||||||||
| Parameters | - -
|
-
-
-
- ||||||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||||||
| Related | - -
-
- curveVertex() - - vertex() - - bezier() |
-
-
| Name | - -bezier() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - noFill(); - -stroke(255, 102, 0); - -line(85, 20, 10, 10); - -line(90, 90, 15, 80); - -stroke(0, 0, 0); - -bezier(85, 20, 10, 10, 90, 90, 15, 80);  noFill(); - -stroke(255, 102, 0); - -line(30, 20, 80, 5); - -line(80, 75, 30, 75); - -stroke(0, 0, 0); - -bezier(30, 20, 80, 5, 80, 75, 30, 75); |
-
- ||||||||
| Description | - -Draws a Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point. The middle parameters specify the control points which define the shape of the curve. Bezier curves were developed by French engineer Pierre Bezier. Using the 3D version of requires rendering with P3D or OPENGL (see the Environment reference for more information). | - -||||||||
| Syntax | - -bezier(x1, y1, cx1, cy1, cx2, cy2, x2, y2);
-
-bezier(x1, y1, z1, cx1, cy1, cz1, cx2, cy2, cz2, x2, y2, z2); |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -bezierVertex() - - curve() |
-
-
| Name | -binary() |
- ||||
|---|---|---|---|---|---|
| Examples | - -color c = color(255, 204, 0); -println(c); // Prints -13312 -println(binary(c)); // Prints 11111111111111111100110000000000 -println(binary(c, 16)); // Prints 1100110000000000 |
- ||||
| Description | -Converts a byte, char, int, or color to a String containing the equivalent binary notation. For example color(0, 102, 153, 255) will convert to the String "11111111000000000110011010011001". This function can help make your geeky debugging sessions much happier. | -||||
| Syntax | -binary(value) - binary(value,digits)- |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String | -||||
| Usage | -Web & Application | - -||||
| Related | -unhex() - hex() - unbinary() |
-
| Name | - -& (bitwise AND) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 207; // In binary: 11001111 - -int b = 61; // In binary: 00111101 - -int c = a & b; // In binary: 00001101 - -println(c); // Prints "13", the decimal equivalent to 00001101 color argb = color(204, 204, 51, 255); - -// The sytax "& 0xFF" compares the binary - -// representation of the two values and - -// makes all but the last 8 bits into a 0. - -// "0xFF" is 00000000000000000000000011111111 - -int a = argb >> 24 & 0xFF; - -int r = argb >> 16 & 0xFF; - -int g = argb >> 8 & 0xFF; - -int b = argb & 0xFF; - -fill(r, g, b, a); - -rect(30, 20, 55, 55); |
-
-
-
- ||||
| Description | - -Compares each corresponding bit in the binary representation of the values. For each comparison two 1's yeild 1, 1 and 0 yeild 0, and two 0's yeild 0. This is easy to see when we look at the binary representation of numbers
-
-
-
-11010110 // 214 - -& 01011100 // 92 - - -------- - - 01010100 // 84 - -- - - -To see the binary representation of a number, use the binary() function with println(). |
-
-
-
- ||||
| Syntax | - -value & value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -| (bitwise OR) - - binary() |
-
-
-
-
| Name | - -| (bitwise OR) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 205; // In binary: 11001101 - -int b = 45; // In binary: 00101101 - -int c = a | b; // In binary: 11101101 - -println(c); // Prints "237", the decimal equivalent to 11101101 int a = 255 << 24; // Binary: 11111111000000000000000000000000 - -int r = 204 << 16; // Binary: 00000000110011000000000000000000 - -int g = 204 << 8; // Binary 00000000000000001100110000000000 - -int b = 51; // Binary: 00000000000000000000000000110011 - -// OR the values together: 11111111110011001100110000110011 - -color argb = a | r | g | b; - -fill(argb); - -rect(30, 20, 55, 55); |
-
-
-
- ||||
| Description | - -Compares each corresponding bit in the binary representation of the values. For each comparison two 1's yeild 1, 1 and 0 yeild 1, and two 0's yeild 0. This is easy to see when we look at the binary representation of numbers11010110 // 214 To see the binary representation of a number, use the binary() function with println(). |
-
-
-
- ||||
| Syntax | - -value | value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -& (bitwise AND) - - binary() |
-
-
-
-
| Name | -blendColor() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - color orange = color(204, 102, 0); -color blue = color(0, 102, 153); -color orangeblueadd = blendColor(orange, blue, ADD); -background(51); -noStroke(); -fill(orange); -rect(14, 20, 20, 60); -fill(orangeblueadd); -rect(40, 20, 20, 60); -fill(blue); -rect(66, 20, 20, 60); |
- ||||||
| Description | - -Blends two color values together based on the blending mode given as the MODE parameter. - The possible modes are described in the reference for the blend() function. |
- ||||||
| Syntax | -
- blendColor(c1,c2,MODE) |
- ||||||
| Parameters | -
|
-
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -blend() - color() |
-
| Name | -blend() |
- ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg, degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, ADD);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg, degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, SUBTRACT);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg, degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, DARKEST);
-image(img, 0, 0);
-image(img2, 0, 0); // @pjs preload must be used to preload the image
-/* @pjs preload="rockies.jpg, degaul.jpg"; */
-PImage img = loadImage("rockies.jpg");
-PImage img2 = loadImage("degaul.jpg");
-img.blend(img2, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
-image(img, 0, 0);
-image(img2, 0, 0); |
- ||||||||||||||||||||
| Description | -Blends a region of pixels into the image specified by the img parameter. - These copies utilize full alpha channel support and a choice of the following modes to blend the colors of source pixels (A) - with the ones of pixels in the destination image (B): -BLEND - linear interpolation of colours: C = A*factor + B -ADD - additive blending with white clip: C = min(A*factor + B, 255) -SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0) -DARKEST - only the darkest colour succeeds: C = min(A*factor, B) -LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B) -DIFFERENCE - subtract colors from underlying image. -EXCLUSION - similar to DIFFERENCE, but less extreme. -MULTIPLY - Multiply the colors, result will always be darker. -SCREEN - Opposite multiply, uses inverse values of the colors. -OVERLAY - A mix of MULTIPLY and SCREEN. Multiplies dark values, and screens light values. -HARD_LIGHT - SCREEN when greater than 50% gray, MULTIPLY when lower. -SOFT_LIGHT - Mix of DARKEST and LIGHTEST. Works like OVERLAY, but not as harsh. -DODGE - Lightens light tones and increases contrast, ignores darks. Called "Color Dodge" in Illustrator and Photoshop. -BURN - Darker areas are applied, increasing contrast, ignores lights. Called "Color Burn" in Illustrator and Photoshop. -All modes use the alpha information (highest byte) of source image pixels as the blending factor. - If the source and destination regions are different sizes, the image will be automatically resized to match the destination size. - If the srcImg parameter is not used, the display window is used as the source image. -This function ignores imageMode(). |
- ||||||||||||||||||||
| Syntax | -blend(x,y,width,height,dx,dy,dwidth,dheight,MODE) - blend(srcImg,x,y,width,height,dx,dy,dwidth,dheight,MODE) |
- ||||||||||||||||||||
| Parameters | -
-
|
- ||||||||||||||||||||
| Returns | -None | - -||||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||||
| Related | -alpha() - filter() |
-
| Name | - -blue() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -color c = color(0, 126, 255); - -fill(c); - -rect(15, 20, 35, 60); - -float value = blue(c); // Sets "value" to "255" - -fill(value); - -rect(50, 20, 35, 60); |
-
- ||
| Description | - - - -Extracts the blue value from a color, scaled to match current colorMode(). This value is always returned as a float so be careful not to assign it to an int value. The blue() function is easy to use and undestand, but is slower than another technique. To achieve the same results when working in colorMode(RGB, 255), but with greater speed, use a bit mask to remove the other color components. For example, the following two lines of code are equivalent: float r1 = blue(myColor); |
-
- ||
| Syntax | - -blue(color) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- red() - - green() - - alpha() - - hue() - - saturation() - - brightness() - - |
-
-
-
-
| Name | - -boolean |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - boolean a = false;
-
-if (!a) {
-
- rect(30, 20, 50, 50);
-
-}
-
-a = true;
-
-if (a) {
-
- line(20, 10, 90, 80);
-
- line(20, 80, 90, 10);
-
-} |
-
- ||||
| Description | - -Datatype for the Boolean values true and false. It is common to use boolean values with control statements to determine the flow of a program. The first time a variable is written, it must be declared with a statement expressing its datatype. | - - - -||||
| Syntax | - -boolean var - -boolean var = booleanvalue |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -true
-
- false |
-
-
| Name | - -boolean() |
-
- ||
|---|---|---|---|
| Examples | - - - -String s = "true";
-
-boolean b = boolean(s);
-
-if (b) {
-
- println("The boolean is true");
-
-} else {
-
- println("The boolean is false");
-
-} |
-
- ||
| Description | - -Converts a primitive datatype, string, or array to its boolean representation. The number 0 evaluates to false and all other numbers evaluate to true. | - -||
| Syntax | - -boolean(val) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -boolean | - -||
| Usage | - -Web & Application | - - - -||
| Related | - -boolean |
-
-
| Name | -box() |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - translate(58, 48, 0); -rotateY(0.5); -box(40);  translate(58, 48, 0); -rotateY(0.5); -box(40, 20, 50);- |
- ||||||||
| Description | - -A box is an extruded rectangle. A box with equal dimension on all sides is a cube. | -||||||||
| Syntax | -box(size) - box(width,height,depth) |
- ||||||||
| Parameters | - -
|
- ||||||||
| Returns | -None | -||||||||
| Usage | -Web & Application | -||||||||
| Related | -sphere() |
-
-
| Name | - -break |
-
-
|---|---|
| Examples | - - - -char letter = 'B';
-
-
-
-switch(letter) {
-
- case 'A':
-
- println("Alpha"); // Does not execute
-
- break;
-
- case 'B':
-
- println("Bravo"); // Prints "Bravo"
-
- break;
-
- default:
-
- println("Zulu"); // Does not execute
-
- break;
-
-} |
-
-
| Description | - -Ends the execution of a structure such as switch(), for(), or while() and jumps to the next statement after. | - -
| Usage | - -Web & Application | - -
| Related | - - - -switch() - - for - - while |
-
-
| Name | -brightness() |
-
- ||
|---|---|---|---|
| Examples | - noStroke(); -colorMode(HSB, 255); -color c = color(0, 126, 255); -fill(c); -rect(15, 20, 35, 60); -float value = brightness(c); // Sets "value" to "255" -fill(value); -rect(50, 20, 35, 60); |
- ||
| Description | - -Extracts the brightness value from a color. |
- ||
| Syntax | -
- brightness(color) |
- ||
| Parameters | -
-
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -red() - green() - blue() - hue() - saturation() |
-
| Name | - -byte |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -byte a; // Declare variable "a" of type byte - -a = 23; // Assign "a" the value 23 - -byte b = -128; // Declare variable "b" and assign it the value -128 - -byte c = a + b; // Declare variable "c" and assign it the sum of "a" and "b" |
-
- ||||
| Description | - -Datatype for bytes, 8 bits of information storing numerical values from 127 to -128. Bytes are a convenient datatype for sending information to and from the serial port and for representing letters in a simpler format than the char datatype. The first time a variable is written, it must be declared with a statement expressing its datatype. Subsequent uses of this variable must not reference the datatype because Processing will think the variable is being declared again. | - - - -||||
| Syntax | - -byte var - -byte var = value |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -int
-
- float - - boolean |
-
-
| Name | - -byte() |
-
- ||
|---|---|---|---|
| Examples | - - - -char c = 'E'; - -b = byte(c); - -println(c + " : " + b); // Prints "E : 69" - - - -int i = 130; - -b = byte(i); - -println(i + " : " + b); // Prints "130 : -126" |
-
- ||
| Description | - -Converts a primitive datatype or array to its byte representation. A byte can only be a whole number between -128 and 127, therefore when a number outside this range is converted, its value wraps to the corresponding byte representation. | - -||
| Syntax | - -byte(val) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -byte | - -||
| Usage | - -Web & Application | - - - -||
| Related | - -byte - - int() |
-
-
| Name | -camera() |
-
- ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -noFill(); -background(204); -camera(70.0, 35.0, 120.0, 50.0, 50.0, 0.0, - 0.0, 1.0, 0.0); -translate(50, 50, 0); -rotateX(-PI/6); -rotateY(PI/3); -box(45); |
- ||||||||||||||||||
| Description | - -Sets the position of the camera through setting the eye position, the center of the scene, and which axis is facing upward. - Moving the eye position and the direction it is pointing (the center of the scene) allows the images to be seen from different angles. - The version without any parameters sets the camera to the default position, pointing to the center of the display window with the Y axis as up. - The default values are camera(width/2.0, height/2.0, (height/2.0) / tan(PI*60.0 / 360.0), width/2.0, height/2.0, 0, 0, 1, 0). - This function is similar to gluLookAt() in OpenGL, but it first clears the current camera settings. |
- ||||||||||||||||||
| Syntax | -camera()- camera(eyeX, eyeY, eyeZ,centerX, centerY, centerZ,upX, upY, upZ) |
- ||||||||||||||||||
| Parameters | - -
|
- ||||||||||||||||||
| Returns | -None | -||||||||||||||||||
| Usage | -Web & Application | -||||||||||||||||||
| Related | -camera() - beginCamera_() - endCamera_() - frustum() - |
-
| Name | - -case |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -char letter = 'B';
-
-
-
-switch(letter) {
-
- case 'A':
-
- println("Alpha"); // Does not execute
-
- break;
-
- case 'B':
-
- println("Bravo"); // Prints "Bravo"
-
- break;
-
- default:
-
- println("Zulu"); // Does not execute
-
- break;
-
-} |
-
- ||||
| Description | - -Denotes the different labels to be evaluated with the parameter in the switch() structure. | - - - -||||
| Syntax | - -case label: statements |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -switch() - - default - - break |
-
-
-
-
| Name | - -ceil() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -float x = 8.22; - -int a = ceil(x); // Set "a" to 9 |
-
- ||
| Description | - - - -Calculates the closest int value that is greater than or equal to the value of the parameter. For example, ceil(9.03) returns the value 10. | - -||
| Syntax | - -ceil(value) |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -floor() - - round() |
-
-
| Name | - -char |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -char m; // Declare variable "m" of type char - -m = 'A'; // Assign "m" the value "A" - -int n = '&'; // Declare variable "n" and assign it the value "&" |
-
- ||||
| Description | - -Datatype for characters, typographic symbols such as A, d, and $. A char stores letters and symbols in the Unicode format, a coding system developed to support a variety of world languages. Each char is two bytes (16 bits) in length and is distinguished by surrounding it with single quotes. Character escapes may also stored as a char. For example, the representation for the "delete" key is '377'. The first time a variable is written, it must be declared with a statement expressing its datatype. Subsequent uses of this variable must not reference the datatype because Processing will think the variable is being declared again. | - - - -||||
| Syntax | - -char var - -char var = value |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -String |
-
-
| Name | - -char() |
-
- ||
|---|---|---|---|
| Examples | - - - -int i = 65; - -char c = char(i); - -println(i + " : " + c); // Prints "65 : A" - - - -byte b = 65; - -char c = char(b); - -println(b + " : " + c); // Prints "65 : 65" |
-
- ||
| Description | - -Converts a primitive datatype or array to a numeric character representation. | - -||
| Syntax | - -char(val) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -char | - -||
| Usage | - -Web & Application | - - - -||
| Related | - -char - - int() - - float() - - byte() |
-
-
| Name | - -class |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -// Declare and contruct two objects (h1, h2) from the class HLine
-
-HLine h1 = new HLine(20, 2.0);
-
-HLine h2 = new HLine(50, 2.5);
-
-
-
-void setup()
-
-{
-
- size(200, 200);
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- background(204);
-
- h1.update();
-
- h2.update();
-
-}
-
-
-
-class HLine {
-
- float ypos, speed;
-
- HLine (float y, float s) {
-
- ypos = y;
-
- speed = s;
-
- }
-
- void update() {
-
- ypos += speed;
-
- if (ypos > height) {
-
- ypos = 0;
-
- }
-
- line(0, ypos, width, ypos);
-
- }
-
-} |
-
- ||||
| Description | - -Keyword used to indicate the declaration of a class. A class is a composite of data and methods (functions) which may be instantiated as objects. The first letter of a class name is usually uppercase to separate it from other kinds of variables. A related tutorial on Object-Oriented Programming is hosted from the Sun website. | - - - -||||
| Syntax | - -class ClassName {
-
- statements
-
-} |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -Object |
-
-
| Name | - -color |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - color c1 = color(204, 153, 0); - -color c2 = #FFCC00; - -noStroke(); - -fill(c1); - -rect(0, 0, 25, 100); - -fill(c2); - -rect(25, 0, 25, 100); - -color c3 = get(10, 50); - -fill(c3); - -rect(50, 0, 50, 100); |
-
- ||||
| Description | - -Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCCOO.
-
-
-
- - -Using print() or println() on a color will produce strange results (usually negative numbers) because of the way colors are stored in memory. A better method is to use the hex() function to format the color data, or use the red(), green(), and blue() functions to get individual values and print those. The hue(), saturation(), and brightness() functions work in a similar fashion. To extract red, green, and blue values more quickly (for instance when analyzing an image or a frame of video), use bit shifting. - - - - - -Values can also be created using web color notation. For example, "color c = #006699". - - - -Web color notation only works for opaque colors. To define a color with an alpha value, you can either use the color() function, or use hexadecimal notation. For hex notation, prefix the values with "0x", for instance "color c = 0xCC006699". In that example, CC (the hex value of 204) is the alpha value, and the remainder is identical to a web color. Note the alpha value is first in the hexadecimal notation (but last when used with the color() function, or functions like fill() and stroke()). - - - -From a technical standpoint, colors are 32 bits of information ordered as AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB where the A's contain the alpha value, the R's are the red value, G's are green, and B's are blue. Each component is 8 bits (a number between 0 and 255). These values can be manipulated with bit shifting. |
-
-
-
- ||||
| Syntax | - -color var - -color var = colorvalue |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -colorMode() - - color() - - hex() - - red() - - green() - - blue() |
-
-
| Name | - -colorMode() |
-
-
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - noStroke();
-
-colorMode(RGB, 100);
-
-for(int i=0; i<100; i++) {
-
- for(int j=0; j<100; j++) {
-
- stroke(i, j, 0);
-
- point(i, j);
-
- }
-
-} noStroke();
-
-colorMode(HSB, 100);
-
-for(int i=0; i<100; i++) {
-
- for(int j=0; j<100; j++) {
-
- stroke(i, j, 100);
-
- point(i, j);
-
- }
-
-} |
-
- ||||||||||||
| Description | - -Changes the way Processing interprets color data. By default, fill(), stroke(), and background() colors are set by values between 0 and 255 using the RGB color model. It is possible to change the numerical range used for specifying colors and to switch color systems. For example, calling colorMode(RGB, 1.0) will specify that values are specified between 0 and 1. The limits for defining colors are altered by setting the parameters range1, range2, range3, and range 4. | - - - -||||||||||||
| Syntax | - -colorMode(mode); - -colorMode(mode, range); - -colorMode(mode, range1, range2, range3); - -colorMode(mode, range1, range2, range3, range4); |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Usage | - -Web & Application | - -||||||||||||
| Related | - -background() - - fill() - - stroke() |
-
-
| Name | - -color() |
-
-
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - color c1 = color(102, 102, 0); - -fill(c1); - -noStroke(); - -rect(30, 20, 55, 55); |
-
- ||||||||||||
| Description | - - - -Creates colors for storing in variables of the color datatype. The parameters are interpreted as RGB or HSB values depending on the current colorMode(). The default mode is RGB values from 0 to 255 and therefore, the function call color(255, 204, 0) will return a bright yellow color. The color() function packs the information input through its parameters into a 32 bit number in the following order AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB where R is the red/hue value, G is green/saturation, and B is blue/brightness. Color can also be created using hexadecimal notation. For example, "color(0, 102, 153)" is equivalent to "color(#006699)" and "color(0x006699)". To create a color with an alpha value using hexadecimal notation, it's necessary to use the "0x" prefix, for example "color(0xCC006699)", which is equivalent to "color(0, 102, 153, 204)". Note the alpha value is first in the hexadecimal notation and last in the RGB notation. |
-
- ||||||||||||
| Syntax | - -color(gray) - -color(gray, alpha) - -color(value1, value2, value3) - -color(value1, value2, value3, alpha) - -color(hex) - -color(hex, alpha) |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Usage | - -Web & Application | - -||||||||||||
| Related | - -color datatype - - colorMode() |
-
-
| Name | - -, (comma) |
-
- ||
|---|---|---|---|
| Examples | - - - -// Comma used to separate a list of variable declarations
-
-int a=20, b=30, c=80;
-
-
-
-// Comma used to separate a list of values assigned to an array
-
-int[] d = { 20, 60, 80 };
-
-
-
-// Comma used to separate a list of parameters passed to a function
-
-line(a, b, c, b);
-
-line(d[0], d[1], d[2], d[1]); |
-
- ||
| Description | - -Separates parameters in function calls and elements during assignment. | - -||
| Syntax | - -value1, ..., valueN |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -
| Name | - -// (comment) |
-
- ||
|---|---|---|---|
| Processing.js Behavior | - -Processing.js's parser will fail when using // comments on the final line of a Processing.js script. | - -||
| Examples | - - - -// Draws two lines which divides the window - -// into four quadrants - -line(0, 50, 100, 50); // Draw the horizontal line - -line(50, 0, 50, 100); // Draw the vertical line |
-
- ||
| Description | - -Explanatory notes embedded within the code. Comments are used to remind yourself and to inform others about the details of the code. Single-line comments are signified with the two forward slash characters. Comments are ignored by the compiler. | - -||
| Syntax | - -// comment |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -/* */ (multiline comment)
-
- /** */ (doc comment) |
-
-
-
-
| Name | -concat() |
- ||
|---|---|---|---|
| Examples | - -String[] sa1 = { "OH ", "NY ", "CA "};
-String[] sa2 = { "KY ", "IN ", "MA "};
-String[] sa3 = concat(sa1, sa2);
-println(sa3); // Prints OH, NY, CA, KY, IN, MA |
- ||
| Description | -
- Concatenates two arrays. For example, concatenating the array { 1, 2, 3 } and the array { 4, 5, 6 } yields { 1, 2, 3, 4, 5, 6 }. - Both parameters must be arrays of the same datatype. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) concat(array1, array2). |
- ||
| Syntax | -concat(array1,array2) |
- ||
| Parameters | - -
|
- ||
| Returns | -Array (the same datatype as the input) | -||
| Usage | -Web & Application | - -||
| Related | -splice() | - -
| Name | - -?: (conditional) |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - - -int s = 0;
-
-for(int i = 5; i < 100; i += 5) {
-
- s = (i < 50) ? 0 : 255;
-
- stroke(s);
-
- line(30, i, 80, i);
-
-} |
-
- ||||||
| Description | - -A shortcut for writing an if and else structure. If the condition evaluates to true, expression1 is evaluated and returned. If the condition evaluates to false, expression2 is evaluated and returned.
-
-
-
- - -The following conditional: result = condition ? expression1 : expression2 - -is equivalent to this structure: if (condition) { |
-
-
-
- ||||||
| Syntax | - -condition ? expression1 : expression2 |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Returns | - -Variable, dependent on the datatype of the expressions | - - - -||||||
| Usage | - -Web & Application | - -||||||
| Related | - -if() - - else() |
-
-
| Name | - -constrain() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -void draw()
-
-{
-
- background(204);
-
- float mx = constrain(mouseX, 30, 70);
-
- rect(mx-10, 40, 20, 20);
-
-} |
-
- ||||||
| Description | - - - -Constrains a value to not exceed a maximum and minimum value. | - -||||||
| Syntax | - -constrain(value, min, max) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Returns | - -float or int (depending on the input values) | - -||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -
-
- max() - - min() |
-
-
| Name | - -continue |
-
-
|---|---|
| Examples | - - - -for(int i = 0; i 100; i += 10) {
-
- if (i == 70) { // If i is 70,
-
- continue; // skip to the next iteration,
-
- } // therefore not drawing the line
-
- line(i, 0, i, height);
-
-} |
-
-
| Description | - -When run inside of a for() or while(), it skips the remainder of the block and starts the next iteration. | - -
| Syntax | - -continue |
-
-
| Usage | - -Web & Application | - - - -
| Related | - -for()
-
- while() |
-
-
| Name | -copy() |
- ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="eames.jpg"; */
-PImage img = loadImage("eames.jpg");
-image(img, 0, 0);
-copy(15, 25, 10, 10, 35, 25, 50, 50);
-noFill();
-// Rectangle shows area being copied
-rect(15, 25, 10, 10); |
- ||||||||||||||||||
| Description | -Copies a region of pixels from the display window to another area of the display window and copies a region of pixels from an image used as the srcImg parameter into the display window. - If the source and destination regions aren't the same size, it will automatically resize the source pixels to fit the specified target region. - No alpha information is used in the process, however if the source image has an alpha channel set, it will be copied as well. -This function ignores imageMode(). |
- ||||||||||||||||||
| Syntax | -copy(x,y,width,height,dx,dy,dwidth,dheight) - copy(srcImg,x,y,width,height,dx,dy,dwidth,dheight) |
- ||||||||||||||||||
| Parameters | -
-
|
- ||||||||||||||||||
| Returns | -None | - -||||||||||||||||||
| Usage | -Web & Application | - -||||||||||||||||||
| Related | -get() - blend() |
-
| Name | - -cos() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - float a = 0.0;
-
-float inc = TWO_PI/25.0;
-
-for(int i=0; i<25; i++) {
-
- line(i*4, 50, i*4, 50+cos(a)*40.0);
-
- a = a + inc;
-
-} |
-
- ||
| Description | - -Calculates the cosine of an angle. This function expects the values of the angle parameter to be provided in radians (values from 0 to PI*2). Values are returned in the range -1 to 1. | - -||
| Syntax | - - - -cos(angle) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -sin() - - tan() |
-
-
| Name | -createFont() |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. See Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||||||||
| Examples | -PFont myFont;
-void setup() {
- size(200, 200);
- // Uncomment the following two lines to see the available fonts
- //String[] fontList = PFont.list();
- //println(fontList);
- myFont = createFont("FFScala", 32);
- textFont(myFont);
- text("!@#$%", 10, 50);
-} |
- ||||||||
| Description | - -Use a font that's installed on the computer, or from a .ttf or .otf file inside current folder. -Use the PFont.list() method to first determine the names for the fonts recognized by the computer and are compatible with this function. - Not all fonts can be used and some might work with one operating system and not others. When sharing a sketch with other people or - posting it on the web, you may need to include a .ttf or .otf version of your font in the sketch directory because other people might not have the font - installed on their computer. Only fonts that can legally be distributed should be included with a sketch. -If you have a @font-face rule in your CSS, you can use it by passing the @font-face name into the name parameter -The size parameter states the font size you want to generate. The smooth parameter specifies if the font should be antialiased or not, - and the charset parameter is an array of chars that specifies the characters to generate. The smooth and charset parameters are ignored in Processing.js. |
- ||||||||
| Syntax | -createFont(name, size) - createFont(name, size, smooth) - createFont(name, size, smooth, charset) |
-
- ||||||||
| Parameters | -
|
-
- ||||||||
| Returns | -PFont | -||||||||
| Usage | -Web & Application | -||||||||
| Related | -PFont - textFont() - text() - loadFont() |
-
| Name | - -createGraphics() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - -PGraphics pg;
-
-
-
-void setup() {
-
- size(100, 100);
-
- pg = createGraphics(80, 80, P3D);
-
-}
-
-
-
-void draw() {
-
- pg.beginDraw();
-
- pg.background(102);
-
- pg.stroke(255);
-
- pg.line(40, 40, mouseX, mouseY);
-
- pg.endDraw();
-
- image(pg, 10, 10);
-
-} |
-
- ||||||||
| Description | - - - -Creates and returns a new PGraphics object of the types P2D, P3D, and JAVA2D. P2D is not yet implemented, but will be available in a future release. Use this class if you need to draw into an off-screen graphics buffer. It's not possible to use createGraphics() with OPENGL, because it doesn't allow offscreen use. The DXF and PDF renderers require the filename parameter.
-
- - -It's important to call any drawing commands between beginDraw() and endDraw() statements. This is also true for any commands that affect drawing, such as smooth() or colorMode(). - - - -Unlike the main drawing surface which is completely opaque, surfaces created with createGraphics() can have transparency. This makes it possible to draw into a graphics and maintain the alpha channel. By using save() to write a PNG or TGA file, the transparency of the graphics object will be honored. Note that transparency levels are binary: pixels are either complete opaque or transparent. For the time being (as of release 0127), this means that text characters will be opaque blocks. This will be fixed in a future release (Bug 641). |
-
- ||||||||
| Syntax | - -createGraphics(width, height, renderer) - -createGraphics(width, height, renderer, filename) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -PGraphics |
-
-
| Name | - -createImage() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - PImage img = createImage(66, 66, RGB);
-
-for(int i=0; i < img.pixels.length; i++) {
-
- img.pixels[i] = color(0, 90, 102);
-
-}
-
-image(img, 17, 17); PImage img = createImage(66, 66, RGB);
-
-for(int i=0; i < img.pixels.length; i++) {
-
- img.pixels[i] = color(0, 90, 102, i%img.width * 2);
-
-}
-
-image(img, 17, 17);
-
-image(img, 34, 34); |
-
- ||||||
| Description | - -Creates a new PImage (the datatype for storing images). This provides a fresh buffer of pixels to play with. Set the size of the buffer with the width and height parameters. The format parameter defines how the pixels are stored. See the PImage reference for more information.
-
- - - - -Be sure to include all three parameters, specifying only the width and height (but no format) will produce a strange error. |
-
- ||||||
| Syntax | - -createImage(width, height, format) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -PImage - - PGraphics |
-
-
| Name | - -/* @pjs crisp */ directive |
-
- ||
|---|---|---|---|
| Examples | - - - -/* @pjs crisp="true"; */
-
-void setup()
-
-{
-
- size(200,200);
-
- noLoop();
-
-}
-
-
-
-void draw()
-
-{
-
- background(255);
-
- line(width/4, height/2, width/2, height/4);
-
- line(width/2, height/4, 3*width/4, height/2);
-
- line(3*width/4, height/2, width/2, 3*height/4);
-
- line(width/2, 3*height/4, width/4, height/2);
-
- rect(width/2 - 25, height/2 - 25, 50, 50);
-
-} |
-
- ||
| Description | - -Depending on the browser's default settings, canvas elements may or may not apply anti-aliassing to draw instructions. This directive lets - - you force plain (not anti-aliassed) rendering of the "line", "triangle", and "rect" draw primitives. This results in crisp clean lines, - - although angled lines may look jagged. - -NOTE: the "arc", "ellipse" and "bezier" draw primitives are not effected by this directive. - -NOTE: this directive is very expensive, and will result in a significant drop in framerate, and increase in CPU use. - - |
-
- ||
| Syntax | - -
-
- - - /* @pjs crisp="true"; */ |
-
-
-
- ||
| Parameters | - -
|
-
-
-
- ||
| Usage | - -Web & Application, Processing.js compatibility | - -||
| Related | - -- - @pjs directives - - | - -
| Name | - -{} (curly braces) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int[] a = { 5, 20, 25, 45, 70 };
-
-
-
-void setup() {
-
- size(100, 100);
-
-}
-
-
-
-void draw() {
-
- for(int i=0; i < a.length; i++) {
-
- line(0, a[i], 50, a[i]);
-
- }
-
-} |
-
- ||||
| Description | - -Define the beginning and end of functions blocks and statement blocks such as the for() and if() structures. Curly braces are also used for defining inital values in array declarations. | - - - -||||
| Syntax | - -{ statements }
-
-{ ele0, ..., eleN } |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -() (parentheses) |
-
-
| Name | -cursor() |
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - -
- // Move the mouse left and right across the image
-// to see the cursor change from a cross to a hand
-void draw()
-{
- if(mouseX < 50) {
- cursor(CROSS);
- } else {
- cursor(HAND);
- }
-} |
- ||||||||
| Description | - -Sets the cursor to a predefined symbol, an image, or turns it on if already hidden. If you are trying to set an image as the cursor, - it is recommended to make the size 16x16 or 32x32 pixels. It is not possible to load an image as the cursor if you are exporting your program for the Web. - The values for parameters x and y must be less than the dimensions of the image. | -||||||||
| Syntax | -cursor() |
- ||||||||
| - | cursor(MODE) |
- ||||||||
| - | cursor(image,x,y) |
- ||||||||
| Parameters | -
-
|
- ||||||||
| Returns | - -None | -||||||||
| Usage | - -Web & Application | -||||||||
| Related | -noCursor() |
-
| Name | -curveDetail() |
- ||
|---|---|---|---|
| Examples | - - void setup() {
- size(100, 100, P3D);
- noFill();
- noLoop();
-}
-
-void draw() {
- curveDetail(1);
- drawCurves(-15);
- stroke(126);
- curveDetail(2);
- drawCurves(0);
- stroke(255);
- curveDetail(4);
- drawCurves(15);
-}
-
-void drawCurves(float y) {
- curve( 5, 28+y, 5, 28+y, 73, 26+y, 73, 63+y);
- curve( 5, 28+y, 73, 26+y, 73, 63+y, 15, 67+y);
- curve(73, 26+y, 73, 63+y, 15, 67+y, 15, 67+y);
-}
- |
- ||
| Description | -
- Sets the resolution at which curves display. The default value is 20. - This function is only useful when using the P3D or OPENGL renderer as the default (JAVA2D) renderer does not use this information. |
- ||
| Syntax | -curveDetail(detail) |
- ||
| Parameters | - -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | - -||
| Related | -curve() - curveVertex() - curveTightness() |
-
-
| Name | -curvePoint() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - curve(5, 26, 5, 26, 73, 24, 73, 61);
-curve(5, 26, 73, 24, 73, 61, 15, 65);
-ellipseMode(CENTER);
-int steps = 6;
-for (int i = 0; i <= steps; i++) {
- float t = i / float(steps);
- float x = curvePoint(5, 5, 73, 73, t);
- float y = curvePoint(26, 26, 24, 61, t);
- ellipse(x, y, 5, 5);
- x = curvePoint(5, 73, 73, 15, t);
- y = curvePoint(26, 24, 61, 65, t);
- ellipse(x, y, 5, 5);
-} |
- ||||||||||
| Description | - -Evalutes the curve at point t for points a, b, c, d. The parameter t varies between 0 and 1, a and d are points on the curve, and b and c are the control points. - This can be done once with the x coordinates and a second time with the y coordinates to get the location of a curve at t. | -||||||||||
| Syntax | -curvePoint(a,b,c,d,t) |
- ||||||||||
| Parameters | - -
|
- ||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -curve() - curveVertex() - bezierPoint() |
-
-
| Name | -curveTangent() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - noFill();
-curve(5, 26, 73, 24, 73, 61, 15, 65);
-int steps = 6;
-for (int i = 0; i <= steps; i++) {
- float t = i / float(steps);
- float x = curvePoint(5, 73, 73, 15, t);
- float y = curvePoint(26, 24, 61, 65, t);
- //ellipse(x, y, 5, 5);
- float tx = curveTangent(5, 73, 73, 15, t);
- float ty = curveTangent(26, 24, 61, 65, t);
- float a = atan2(ty, tx);
- a -= PI/2.0;
- line(x, y, cos(a)*8 + x, sin(a)*8 + y);
-} |
- ||||||||||
| Description | - -Calculates the tangent of a point on a curve. There is a good definition of "tangent" at Wikipedia: http://en.wikipedia.org/wiki/Tangent | -||||||||||
| Syntax | -curveTangent(a,b,c,d,t) |
- ||||||||||
| Parameters | - -
|
- ||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -curve() - curveVertex() - curvePoint() - bezierTangent() |
-
-
| Name | - -curveTightness() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - // White curve - -noFill(); - -stroke(255); - -beginShape(); - -curveVertex(10, 26); - -curveVertex(10, 26); - -curveVertex(83, 24); - -curveVertex(83, 61); - -curveVertex(25, 65); - -curveVertex(25, 65); - -endShape(); - - - -// Gray curve - -stroke(126); - -curveTightness(3.5); - -beginShape(); - -curveVertex(10, 26); - -curveVertex(10, 26); - -curveVertex(83, 24); - -curveVertex(83, 61); - -curveVertex(25, 65); - -curveVertex(25, 65); - -endShape(); - - - -// Black curve - -stroke(0); - -curveTightness(-2.5); - -beginShape(); - -curveVertex(10, 26); - -curveVertex(10, 26); - -curveVertex(83, 24); - -curveVertex(83, 61); - -curveVertex(25, 65); - -curveVertex(25, 65); - -endShape(); |
-
- ||
| Description | - - - -Modifies the quality of forms created with curve() and curveVertex(). The parameter squishy determines how the curve fits to the vertex points. The value 0.0 is the default value for squishy (this value defines the curves to be Catmull-Rom splines) and the value 1.0 connects all the points with straight lines. Values within the range -5.0 and 5.0 will deform the curves but will leave them recognizable and as values increase in magnitude, they will continue to deform. | - -||
| Syntax | - -curveTightness(squishy) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -curve() - - curveVertex() |
-
-
-
-
| Name | - -curveVertex() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - noFill(); - -beginShape(); - -curveVertex(84, 91); - -curveVertex(84, 91); - -curveVertex(68, 19); - -curveVertex(21, 17); - -curveVertex(32, 100); - -curveVertex(32, 100); - -endShape(); |
-
- ||||||
| Description | - - - -Specifies vertex coordinates for curves. This function may only be used between beginShape() and endShape() and only when there is no MODE parameter specified to beginShape(). The first and last points in a series of curveVertex() lines will be used to guide the beginning and end of a the curve. A minimum of four points is required to draw a tiny curve between the second and third points. Adding a fifth point with curveVertex() will draw the curve between the second, third, and fourth points. The curveVertex() function is an implementation of Catmull-Rom splines. Using the 3D version of requires rendering with P3D or OPENGL (see the Environment reference for more information). | - - - -||||||
| Syntax | - -curveVertex(x, y)
-
-curveVertex(x, y, z) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Application & Web | - - - -||||||
| Related | - -curve() - - beginShape() - - endShape() - - vertex() - - bezierVertex() |
-
-
| Name | - -curve() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - stroke(255, 102, 0); - -curve(5, 26, 5, 26, 73, 24, 73, 61); - -stroke(0); - -curve(5, 26, 73, 24, 73, 61, 15, 65); - -stroke(255, 102, 0); - -curve(73, 24, 73, 61, 15, 65, 15, 65); |
-
- ||||||||
| Description | - - - -Draws a curved line on the screen. The first and second parameters specify the first anchor point and the last two parameters specify the second anchor. The middle parameters specify the points for defining the shape of the curve. Longer curves can be created by putting a series of curve() functions together. An additional function called curveTightness() provides control for the visual quality of the curve. The curve() function is an implementation of Catmull-Rom splines. Using the 3D version of requires rendering with P3D or OPENGL (see the Environment reference for more information). | - -||||||||
| Syntax | - -curve(x1, y1, x2, y2, x3, y3, x4, y4);
-
-curve(x1, y1, z1, x2, y2, z2, x3, y3, z3, x4, y4, z4); |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -curveVertex() - - bezier() |
-
-
| Name | - -day() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void setup() {
-
- PFont metaBold;
-
- metaBold = loadFont("fonts/Meta-Bold.ttf");
-
- setFont(metaBold, 44);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- int d = day(); // Values from 1 - 31
-
- int m = month(); // Values from 1 - 12
-
- int y = year(); // 2003, 2004, 2005, etc.
-
- String s = String.valueOf(d);
-
- text(s, 10, 28);
-
- s = String.valueOf(m);
-
- text(s, 10, 56);
-
- s = String.valueOf(y);
-
- text(s, 10, 84);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The day() function returns the current day as a value from 1 - 31. | - -||
| Syntax | - -day() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - second() - - minute() - - hour() - - day() - - month() - - year() - - |
-
-
| Name | - --- (decrement) |
-
-
-
- ||
|---|---|---|---|
| Examples | - -int a = 5; // Sets "a" to 5 - -int b = a--; // Sets "b" to 5, then decrements "a" to 4 - -int c = a; // Sets "c" to 4 |
-
- ||
| Description | - - - -Substracts the value of an integer variable by 1. Equivalent to the operation i = i - 1. If the value of the variable i is five, then the expression i-- decreases the value of i to 4. | - -||
| Syntax | - -var-- |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -- (minus) - - -= (subtract assign) - - ++ (increment) |
-
-
-
-
| Name | - -default |
-
- ||
|---|---|---|---|
| Examples | - - - -char letter = 'F';
-
-
-
-switch(letter) {
-
- case 'A':
-
- println("Alpha"); // Does not execute
-
- break;
-
- case 'B':
-
- println("Bravo"); // Does not execute
-
- break;
-
- default:
-
- println("Zulu"); // Prints "Zulu"
-
- break;
-
-} |
-
- ||
| Description | - -Keyword for defining the default condition of a switch(). If none of the case labels match the switch() parameter, the statement(s) after the default syntax are executed. Switch structures don't require a default. | - - - -||
| Syntax | - -default: statements |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -switch() - - break - - case |
-
-
| Name | - -degrees() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -float rad = PI/4; - -float deg = degrees(rad); - -println(rad + " radians is " + deg + " degrees"); |
-
- ||
| Description | - - - -Converts a radian measurement to its corresponding value in degrees. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. All trigonometric methods in Processing require their parameters to be specified in radians. | - -||
| Syntax | - -degrees(angle) |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -radians() |
-
-
| Name | -directionalLight() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -directionalLight(51, 102, 126, -1, 0, 0); -translate(20, 50, 0); -sphere(30);  size(100, 100, P3D); -background(0); -noStroke(); -directionalLight(51, 102, 126, -1, 0, 0); -translate(20, 50, 0); -sphere(30); |
- ||||||||||||
| Description | - -Adds a directional light. Directional light comes from one direction and is stronger when hitting a surface squarely and weaker if it hits at a a gentle angle. - After hitting a surface, a directional lights scatters in all directions. Lights need to be included in the draw() to remain persistent in a looping program. - Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. - The affect of the v1, v2, and v3 parameters is determined by the current color mode. - The nx, ny, and nz parameters specify the direction the light is facing. - For example, setting ny to -1 will cause the geometry to be lit from below (the light is facing directly upward). |
- ||||||||||||
| Syntax | -directionalLight(v1,v2,v3,nx,ny,nz) |
- ||||||||||||
| Parameters | -
|
-
- ||||||||||||
| Returns | -None | -||||||||||||
| Usage | -Web & Application | -||||||||||||
| Related | -lights() - ambientLight() - pointLight_() - spotLight() |
-
| Name | - -dist() |
-
-
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -// Sets the background gray value based on
-
-// the distance of the mouse from the center
-
-void draw()
-
-{
-
- float d = dist(50, 50, mouseX, mouseY);
-
- fill(d*4);
-
- rect(0, 0, 99, 99);
-
-} |
-
- ||||||||||||
| Description | - - - -Calculates the distance between two points. | - -||||||||||||
| Syntax | - -dist(x1, y1, x2,y2) - - dist(x1, y1, z1, x2,y2, z2) |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Returns | - -Float | - - - -||||||||||||
| Usage | - -Web & Application | - - - -
| Name | - -/= (divide assign) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 12; - -int b = 3; - -a /= b; // sets "a" to 4 |
-
- ||||
| Description | - -Combines division with assignment. The expression a /= b is equivalent to a = a / b. | - - - -||||
| Syntax | - -value1 /= value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -= (assign) - - / (divide) |
-
-
-
-
| Name | - -/ (divide) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int g = 50 / 5; // Sets g 10 - -int h = g / 5; // Sets h 2 |
-
- ||||
| Description | - - - -Divides the value of the second parameter by the value of the first parameter. The answer to the equation 20 / 4 is 5. The number 20 is the sum of 4 of the number 5. As an equation we see that 4 + 4 + 4 + 4 + 4 = 20. | - -||||
| Syntax | - -value1 / value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -* (multiply) - - % (modulo) |
-
-
| Name | - -/** */ (doc comment) |
-
- ||
|---|---|---|---|
| Examples | - - - -/** - - Draws two lines which divides the window - - into four quadrants. First draws a horizontal - - line and then the vertical line - -*/ - -line(0, 50, 100, 50); - -line(50, 0, 50, 100); |
-
- ||
| Description | - -Explanatory notes embedded within the code and written to the "index.html" file created when the code is exported. Doc comments (documentation comments) are used for sharing a description of your sketch when the program is exported. Export the code by hitting the "Export" button on the Toolbar. | - -||
| Syntax | - -/** - - comment - -*/ |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -// (comment)
-
- /* */ (multiline comment) |
-
-
| Name | - -. (dot) |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - - -// Declare and contruct two objects (h1, h2) from the class HLine
-
-HLine h1 = new HLine(20, 1.0);
-
-HLine h2 = new HLine(50, 5.0);
-
-
-
-void setup() {
-
- size(200, 200);
-
-}
-
-
-
-void draw() {
-
- if(h2.speed > 1.0) {
-
- h2.speed -= 0.01;
-
- }
-
- h1.update();
-
- h2.update();
-
-}
-
-
-
-class HLine {
-
- float ypos, speed;
-
- HLine (float y, float s) {
-
- ypos = y;
-
- speed = s;
-
- }
-
- void update() {
-
- ypos += speed;
-
- if (ypos > width) {
-
- ypos = 0;
-
- }
-
- line(0, ypos, width, ypos);
-
- }
-
-} |
-
- ||||||
| Description | - -Provides access to an object's methods and data. An object is an instance of a class and contains is a grouping of methods (object functions) and data (object variables and constants). The dot operator directs the program to the information encapsulated within an object. | - -||||||
| Syntax | - -object.method()object.data |
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -Object |
-
-
| Name | - -double |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -double a; // Declare variable "a" of type float - -a = 1.5387; // Assign "a" the value 1.5387 - -double b = -2.984; // Declare variable "b" and assign it the value -2.984 - -double c = a + b; // Declare variable "c" and assign it the sum of "a" and "b" - -float f = (float)c; // Converts the value of "c" from a double to a float |
-
- ||||
| Description | - -Datatype for floating-point numbers larger than those that can be stored in a float. A float is a 32-bit values that can be as large as 3.40282347E+38 and as low as -3.40282347E+38. A double can be used similarly to a float, but can have a greater magnitude because it's a 64-bit number. Processing functions don't use this datatype, so while they work in the language, you'll usually have to convert to a float using the (float) syntax before passing into a function. | - - - -||||
| Syntax | - -double var - -double var = value |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -float |
-
-
| Name | - -draw() |
-
- ||
|---|---|---|---|
| Examples | - - - -float yPos = 0.0;
-
-
-
-void setup() {
-
- size(200, 200);
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- background(204);
-
- yPos = yPos - 1.0;
-
- if(yPos 0) {
-
- yPos = height;
-
- }
-
- line(0, yPos, width, yPos);
-
-}void setup() {
-
- size(200, 200);
-
-}
-
-
-
-void draw() { }
-
-
-
-void mousePressed() {
-
- line(mouseX, 10, mouseX, 90);
-
-} |
-
- ||
| Description | - -Called directly after setup() and continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. The draw() function is called automatically and should never be called explicitly. It should always be controlled with noLoop(), redraw() and loop(). After noLoop() stops the code in draw() from executing, redraw() causes the code inside draw() to execute once and loop() will causes the code inside draw() to execute continuously again. The number of times draw() executes in each second may be controlled with the delay() and frameRate() functions. There can only be one draw() function for each sketch and draw() must exist if you want the code to run continuously or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program as shown in the above example. | - - - -||
| Syntax | - -draw() {
-
- statements
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Returns | - -None | - -||
| Usage | - -Web & Application | - -||
| Related | - -setup()
-
- loop() - - noLoop() |
-
-
| Name | - -ellipseMode() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - ellipseMode(CENTER); - -ellipse(35, 35, 50, 50); - -ellipseMode(CORNER); - -fill(102); - -ellipse(35, 35, 50, 50); |
-
- ||
| Description | - - - -The origin of the ellipse is modified by the ellipseMode() function. The default configuration is ellipseMode(CENTER), which specifies the location of the ellipse as the center of the shape. The RADIUS mode is the same, but the width and height parameters to ellipse() specify the radius of the ellipse, rather than the diameter. The CORNER mode draws the shape from the upper-left corner of its bounding box. The CORNERS mode uses the four parameters to ellipse() to set two opposing corners of the ellipse's bounding box. The parameter must be written in "ALL CAPS" because Processing is a case sensitive language. | - -||
| Syntax | - -ellipseMode(MODE) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -ellipse() |
-
-
-
-
| Name | - -ellipse() |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - - ellipse(56, 46, 55, 55); |
-
- ||||||||
| Description | - -Draws an ellipse (oval) in the display window. An ellipse with an equal width and height is a circle. The first two parameters set the location, the third sets the width, and the fourth sets the height. The origin may be changed with the ellipseMode() function. | - - - -||||||||
| Syntax | - -ellipse(x, y, width, height) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Returns | - -None | - -||||||||
| Usage | - - - -Web & Application | - -||||||||
| Related | - -ellipseMode() |
-
-
| Name | - -else |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - for(int i = 5; i < 95; i += 5) {
-
- if(i < 35) {
-
- line( 30, i, 80, i );
-
- } else {
-
- line( 20, i, 90, i );
-
- }
-
-} for(int i = 5; i < 95; i += 5) {
-
- if(i < 35) {
-
- line( 30, i, 80, i );
-
- } else if (i < 65) {
-
- line( 20, i, 90, i );
-
- } else {
-
- line( 0, i, 100, i );
-
- }
-
-} |
-
- ||||
| Description | - - - -Extends the if() structure allowing the program to choose between two or more block of code. It specifies a block of code to execute when the expression in if() is false. | - -||||
| Syntax | - - - -if(expression) {
-
- statements
-
-} else {
-
- statements
-
-}
-
-
-
-if(expression) {
-
- statements
-
-} else if(expression) {
-
- statements
-
-
-
-} else {
-
- statements
-
-} |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -if() |
-
-
| Name | -emissive() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -background(0); -directionalLight(204, 204, 204, .5, 0, -1); -emissive(0, 26, 51); -translate(70, 50, 0); -sphere(30); |
- ||||||||||
| Description | - -Sets the emissive color of the material used for drawing shapes drawn to the screen. Used in combination with emissive(), specular(), and - shininess() in setting the materal properties of shapes. |
- ||||||||||
| Syntax | -emissive(gray) - emissive(color) - emissive(v1,v2,v3) |
- ||||||||||
| Parameters | -
|
-
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -ambient() - specular() - shininess() |
-
| Name | -endCamera() |
-
-
|---|---|
| Examples | -// The image for this example has not been updated. -size(100, 100, P3D); -noFill(); - -beginCamera(); -camera(); -rotateX(-PI/6); -endCamera(); - -translate(50, 50, 0); -rotateY(PI/3); -box(45); |
-
| Description | - -The beginCamera() and endCamera() functions enable advanced customization of the camera space. Please see the reference for beginCamera() for a description of how the functions are used. |
-
| Syntax | -endCamera() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -camera() - beginCamera() - |
-
| Name | - -endShape() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noFill(); - - - -beginShape(); - -vertex(20, 20); - -vertex(45, 20); - -vertex(45, 80); - -endShape(CLOSE); - - - -beginShape(); - -vertex(50, 20); - -vertex(75, 20); - -vertex(75, 80); - -endShape(); |
-
- ||
| Description | - - - -The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). | - - - -||
| Syntax | - -endShape() - -endShape(MODE) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -beginShape() |
-
-
| Name | - -== (equality) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 23;
-
-int b = 23;
-
-if(a == b) {
-
- println("variables a and b are equal");
-
-} |
-
- ||||
| Description | - -Determines if two values are equivalent. The equality operator is different from the assignment operator.
-
- - -Note that when comparing String objects, you must use the equals() method instead of == to compare their contents. See the reference for String or the troubleshooting note for more explanation. |
-
-
-
- ||||
| Syntax | - -value1 == value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -
-
-
-
- > (greater than) - - < (less than) - - >= (greater than or equal to) - - <= (less than or equal to) - - - - != (inequality) - - - - |
-
-
-
-
| Name | - -exit() |
-
-
|---|---|
| Examples | - - - -void draw() {
-
- line(mouseX, mouseY, 50, 50);
-
-}
-
-
-
-void mousePressed() {
-
- exit();
-
-} |
-
-
| Description | - -Quits/stops/exits the program. Programs without a draw() function exit automatically after the last line has run, but programs with draw() run continuously until the program is manually stopped or exit() is run.
-
-
-
- - -Rather than terminating immediately, exit() will cause the sketch to exit after draw() has completed (or after setup() completes if called during the setup() method). - - - -For Java programmers, this is not the same as System.exit(). Further, System.exit() should not be used because closing out an application while draw() is running may cause a crash (particularly with OpenGL). |
-
-
-
-
| Syntax | - -exit() |
-
-
| Returns | - - - -None | - -
| Usage | - -Web & Application | - -
| Name | -exp() |
-
- ||
|---|---|---|---|
| Examples | -float v1 = exp(1.0); -println(v1); // Prints "2.7182817" |
- ||
| Description | - -Returns Euler's number e (2.71828...) raised to the power of the value parameter. |
- ||
| Syntax | -exp(value) |
- ||
| Parameters | - -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -
| Name | -expand() |
- ||||
|---|---|---|---|---|---|
| Examples | - -int[] data = {0, 1, 3, 4};
-println(data.length); // Prints "4"
-data = expand(data);
-println(data.length); // Prints "8"
-data = expand(data, 512);
-println(data.length); // Prints "512"- PImage[] imgs = new PImage[32]; -println(imgs.length); // Prints "32" -imgs = (PImage[]) expand(imgs); -println(imgs.length); // Prints "64" |
- ||||
| Description | -
- Increases the size of an array. By default, this function doubles the size of the array, - but the optional newSize parameter provides precise control over the increase in size. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) expand(originalArray). |
- ||||
| Syntax | -expand(array) - expand(array,newSize) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -Array (the same datatype as the input) | -||||
| Usage | -Web & Application | - -||||
| Related | -concat() | - -
| Name | - -extends |
-
-
|---|---|
| Examples | - - - -DrawDot dd1 = new DrawDot(50, 80);
-
-
-
-void setup() {
-
- size(200, 200);
-
-}
-
-
-
-void draw() {
-
- dd1.display();
-
-}
-
-
-
-class Dot {
-
- int xpos, ypos;
-
-}
-
-
-
-class DrawDot extends Dot {
-
- DrawDot(int x, int y) {
-
- xpos = x;
-
- ypos = y;
-
- }
-
- void display() {
-
- ellipse(xpos, ypos, 200, 200);
-
- }
-
-} |
-
-
| Description | - -Allows a new class to inherit the methods and fields (data members) from an existing class. In code, state the name of the new class, followed by the keyword extends and the name of the base class. The concept of inheritance is one of the fundamental principles of object oriented programming. | - - - -
| Usage | - -Web & Application | - -
| Related | - -class
-
- super |
-
-
| Name | - -false |
-
-
|---|---|
| Examples | - - - -rect(30, 20, 50, 50);
-
-boolean b = false;
-
-if(b == false) {
-
- line(20, 10, 90, 80); // This line draws
-
-} else {
-
- line(20, 80, 90, 10);
-
-} |
-
-
| Description | - -Reserved word representing the logical value "false". Only variables of type boolean may be assigned the value false. | - - - -
| Usage | - -Web & Application | - -
| Related | - -true boolean |
-
-
| Name | - -fill() |
-
-
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - fill(153); - -rect(30, 20, 55, 55);  fill(204, 102, 0); - -rect(30, 20, 55, 55); |
-
- ||||||||||||||
| Description | - -Sets the color used to fill shapes. For example, if you run fill(204, 102, 0), all subsequent shapes will be filled with orange. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255).
-
- - -When using hexadecimal notation to specify a color, use "#" or "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA). The # syntax uses six digits to specify a color (the way colors are specified in HTML and CSS). When using the hexadecimal notation starting with "0x", the hexadecimal value must be specified with eight characters; the first two characters define the alpha component and the remainder the red, green, and blue components. - - - -The value for the parameter "gray" must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255. - - - - - -To change the color of an image (or a texture), use tint(). |
-
- ||||||||||||||
| Syntax | - -fill(gray) - -fill(gray, alpha) - -fill(value1, value2, value3) - -fill(value1, value2, value3, alpha) - -fill(color) - -fill(color, alpha) - -fill(hex) - -fill(hex, alpha) |
-
-
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||
| Related | - - - -noFill() - - stroke() - - tint() - - background() - - colorMode() |
-
-
| Name | -filter() |
- ||||
|---|---|---|---|---|---|
| Examples | - - // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-PImage b;
-b = loadImage("topanga.jpg");
-image(b, 0, 0);
-filter(THRESHOLD); // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-PImage b;
-b = loadImage("topanga.jpg");
-image(b, 0, 0);
-filter(GRAY); // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-PImage b;
-b = loadImage("topanga.jpg");
-image(b, 0, 0);
-filter(INVERT);
-save("filter_invert.tif"); // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-PImage b;
-b = loadImage("topanga.jpg");
-image(b, 0, 0);
-filter(GRAY);
-filter(POSTERIZE, 4); // @pjs preload must be used to preload the image
-/* @pjs preload="topanga.jpg"; */
-PImage b;
-b = loadImage("topanga.jpg");
-image(b, 0, 0);
-filter(BLUR, 6); |
- ||||
| Description | -Filters an image as defined by one of the following modes: -THRESHOLD - converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. - The level must be between 0.0 (black) and 1.0(white). If no level is specified, 0.5 is used. -GRAY - converts any colors in the image to grayscale equivalents -INVERT - sets each pixel to its inverse value -POSTERIZE - limits each channel of the image to the number of colors specified as the level parameter -BLUR - executes a Guassian blur with the level parameter specifying the extent of the blurring. - If no level parameter is used, the blur is equivalent to Guassian blur of radius 1. -OPAQUE - sets the alpha channel to entirely opaque. -ERODE - reduces the light areas with the amount defined by the level parameter. -DILATE - increases the light areas with the amount defined by the level parameter |
- ||||
| Syntax | -filter(MODE) - filter(MODE,srcImg) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -None | -||||
| Usage | -Web & Application | -
| Name | - -final |
-
-
|---|---|
| Examples | - - - -final float constant = 12.84753; - -println(constant); // Prints "12.84753" to the console - -constant += 12.84; // ERROR! It's not possible to change a "final" value |
-
-
| Description | - -Keyword used to state that a value, class, or method can't be changed. If the final keyword is used to define a variable, the variable can't be changed within the program. When used to define a class, a final class cannot be subclassed. When used to define a method, a final method can't be overridden by subclasses. - - - -This keyword is an essential part of Java programming and is not usually used with Processing. Consult a Java language reference or tutorial for more information, such as this one. |
-
-
| Usage | - -Web & Application | - -
| Name | - -float |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -
-
- - -float a; // Declare variable "a" of type float - -a = 1.5387; // Assign "a" the value 1.5387 - -float b = -2.984; // Declare variable "b" and assign it the value -2.984 - -float c = a + b; // Declare variable "c" and assign it the sum of "a" and "b" - - |
-
- ||||
| Description | - -Datatype for floating-point numbers, a number that has a decimal point. Floating-point numbers are often used to approximate analog and continuous values because they have greater resolution than integers. Floating-point numbers can be as large as 3.40282347E+38 and as low as -3.40282347E+38. They are stored as 32 bits of information. The first time a variable is written, it must be declared with a statement expressing its datatype. Subsequent uses of this variable must not reference the datatype because Processing will think the variable is being declared again. | - -||||
| Syntax | - -float var - -float var = value |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -int |
-
-
-
-
| Name | - -float() |
-
- ||
|---|---|---|---|
| Examples | - - - -int i = 65; - -float f = float(i); - -println(i + " : " + f); // Prints "65 : 65.0" - - - -char c = 'E'; - -f = float(c); - -println(c + " : " + f); // Prints "E : 69.0" |
-
- ||
| Description | - -Converts a primitive datatype, string, or array to its floating point representation. | - -||
| Syntax | - -float(value) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -float | - -||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
- float - - int() - - byte() |
-
-
| Name | - -floor() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -float x = 2.88; - -int a = floor(x); // Set "a" to 2 |
-
- ||
| Description | - - - -Calculates the closest int value that is less than or equal to the value of the parameter. | - -||
| Syntax | - -floor(value) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- ceil() - - round() - - |
-
-
| Name | -focused |
-
|---|---|
| Examples | - -
- if (focused) { // or "if (focused == true)"
- ellipse(25, 25, 50, 50);
-} else {
- line(0, 0, 100, 100);
- line(100, 0, 0, 100);
-} |
-
| Description | - -Confirms if a Processing program is "focused", meaning that it is active and will accept input from mouse or keyboard. - This variable is "true" if it is focused and "false" if not. This variable is often used when you want to warn people they need to - click on or roll over an applet before it will work. | -
| Usage | - -Web | -
| Name | -/* @pjs font */ directive |
- ||
|---|---|---|---|
| Examples | - -/* @pjs font="Arial.ttf"; */
-
-void setup()
-{
- size(200,200);
- noLoop();
- textFont(createFont("Arial",32));
-}
-
-void draw()
-{
- background(255);
- String t = "P.js";
- float tw = textWidth(t);
- fill(0);
- text(t, (width-tw)/2, (height+32)/2);
-}
- |
- ||
| Description | -If you wish to use custom fonts in your sketch, these must be preloaded using the font @pjs directive. Preloading fonts uses its own command, - rather than the standard preload command, because unlike images a font must not just be cached, but must also be loaded into memory for the browser - to make use of. Processing.js does this by relying on the browser to load the font via a CSS @font-face rule. While most browsers support a large number - of font formats for use with @font-face (woff, svg, eot, ttf and otf), relying on "truetype" (ttf) and "opentype" (otf) font formats offer the greatest - interoperability between Processing and Processing.js. -Fonts can be preloaded from URL, such as "Arial.ttf" or from data URI, such as "data:font/truetype,base64, {base 64 encoded data block}". - Fonts that are preloaded can be loaded without their extension in your sketch using the createFont function: if you preload "Arial.ttf" you can use - this font in your sketch by loading it as a Processing font using PFont myfont = createFont("Arial",12); and then using as text font by calling - textFont(myfont); If you place your fonts in a separate directory, such as the "data" directory used by Processing, you only need to - indicate the font location in the preload command. The preload command will be /* @pjs font="data/Arial.ttf"; */ but the call in your sketch - remains createFont("Arial",12). -NOTE: The "VLW" format used by Processing is not supported, as this is a custom bitmap image file with an index that indicates sections of the - image that map to a letter. -WARNING: only use this directive for fonts that are used exclusively by your sketch; if your sketch relies on a font that you have also included for use - on your page with an @font-face CSS rule, this directive may overwrite your rule with a far simpler one. - |
- ||
| Syntax | -
- - /* @pjs font="fontURL"; */ |
-
- ||
| Syntax for multiple fonts | -
- - /* @pjs font="font1,font2,..."; */ - |
-
- ||
| Parameters | -
|
-
- ||
| Usage | -Web & Application, Processing.js compatibility | -||
| Related | -
- @pjs directives
- createFont() - |
-
| Name | - -for() |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - - for (int i = 0; i < 40; i = i+1) {
-
- line(30, i, 80, i);
-
-} for (int i = 0; i < 80; i = i+5) {
-
- line(30, i, 80, i);
-
-} for (int i = 40; i < 80; i = i+5) {
-
- line(30, i, 80, i);
-
-} for (int i = 30; i < 80; i = i+5) {
-
- for (int j = 0; j < 80; j = j+5) {
-
- point(i, j);
-
- }
-
-} |
-
- ||||||||
| Description | - - - -Controls a sequence of repetitions. A for structure has three parts: init, test, and update. Each part must be separated by a semi-colon ";". The loop continues until the test evaluates to false. When a for structure is executed, the following sequence of events occurs: 1. The init statement is executed 2. The test is evaluated to be true or false 3. If the test is true, jump to step 4. If the test is False, jump to step 6 4. Execute the statements within the block 5. Execute the update statement and jump to step 2 6. Exit the loop. |
-
-
-
- ||||||||
| Syntax | - -for (init; test; update) {
-
- statements
-
-
-
-} |
-
- ||||||||
| Parameters | - -
|
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -while() |
-
-
| Name | - -frameCount |
-
-
|---|---|
| Examples | - - - -void setup() {
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- line(0, 0, width, height);
-
- println(frameCount);
-
-} |
-
-
| Description | - -The system variable frameCount contains the number of frames displayed since the program started. Inside setup() the value is 0 and and after the first iteration of draw it is 1, etc. | - - - -
| Syntax | - -frameRate |
-
-
| Usage | - - - -Web & Application | - -
| Related | - -frameRate() - - frameRate |
-
-
| Name | - -frameRate |
-
-
|---|---|
| Examples | - - - -void setup() {
-
- frameRate(30);
-
-}
-
-
-
-void draw() {
-
- line(0, 0, width, height);
-
- println(frameRate);
-
-} |
-
-
| Description | - -The system variable frameRate contains the approximate frame rate of the software as it executes. The initial value is 10 fps and is updated with each frame. The value is averaged (integrated) over several frames. As such, this value won't be valid until after 5-10 frames. | - - - -
| Usage | - -Web & Application | - -
| Related | - -frameRate() |
-
-
| Name | - -frameRate() |
-
- ||
|---|---|---|---|
| Examples | - - - -void setup() {
-
- frameRate(4);
-
-}
-
-int pos = 0;
-
-void draw() {
-
- background(204);
-
- pos++;
-
- line(pos, 20, pos, 80);
-
- if(pos > width) {
-
- pos = 0;
-
- }
-
-} |
-
- ||
| Description | - -Specifies the number of frames to be displayed every second. If the processor is not fast enough to maintain the specified rate, it will not be achieved. For example, the function call frameRate(30) will attempt to refresh 30 times a second. It is recommended to set the frame rate within setup(). The default rate is 60 frames per second. | - - - -||
| Syntax | - -frameRate(fps) |
-
- ||
| Parameters | - -
|
-
- ||
| Returns | - -None | - -||
| Usage | - - - -Web & Application | - -||
| Related | - -delay() |
-
-
| Name | -frustum() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -noFill(); -background(204); -frustum(-width/2, width, 0, height, -100, 200.0); -rotateY(PI/6); -box(45); |
- ||||||||||||
| Description | - -Sets a perspective matrix defined through the parameters. Works like glFrustum, - except it wipes out the current perspective matrix rather than muliplying itself with it. |
- ||||||||||||
| Syntax | -frustum(left, right, bottom,top, near, far) |
- ||||||||||||
| Parameters | - -
|
- ||||||||||||
| Returns | -None | -||||||||||||
| Usage | -Web & Application | -||||||||||||
| Related | -camera() - beginCamera() - endCamera() - perspective() - |
-
| Name | - -get() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - PImage myImage = loadImage("topanga.jpg");
-
-image(myImage, 0, 0);
-
-PImage cp = get();
-
-image(cp, 50, 0); PImage myImage = loadImage("topanga.jpg");
-
-image(myImage, 0, 0);
-
-color cp = get(30, 20);
-
-fill(cp);
-
-rect(30, 20, 55, 55); |
-
- ||||||||
| Description | - -Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Get the value of one pixel by specifying an x,y coordinate. Get a section of the display window by specifying an additional width and height parameter. If the pixel requested is outside of the image window, black is returned. The numbers returned are scaled according to the current color ranges, but only RGB values are returned by this function. For example, even though you may have drawn a shape with colorMode(HSB), the numbers returned will be in RGB. The imageMode() function changes the way the parameters work. For example, a call to imageMode(CORNERS) will change the width and height parameters to define the x and y values of the opposite corner of the image. Getting the color of a single pixel with get(x, y) is easy, but not as fast as grabbing the data directly from pixels[]. The equivalent statement to "get(x, y)" using pixels[] is "pixels[y*width+x]". The (BETA) version of Processing requires calling loadPixels() to load the display window data into the pixels[] array before getting the values. |
-
-
-
- ||||||||
| Syntax | - -get() - -get(x, y) - -get(x, y, width, height) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -
-
- set() - - pixels[] - - color() - - color |
-
-
| Name | -/* @pjs globalKeyEvents */ directive |
- ||
|---|---|---|---|
| Examples | - -bypass.pde:
-
-/* @pjs globalKeyEvents="true"; */
-
-sketch.pde:
-
-int linepos;
-
-void setup()
-{
- size(200,200);
- noLoop();
- linepos = height/2;
-}
-
-void draw()
-{
- line(0,linepos,width,linepos);
-}
-
-interface Javascript {}
-Javascript javascript=null;
-void bindJavascript(Javascript js) { javascript=js; }
-
-// due to every browser implementing key events differently,
-// proper keyhandling requires knowing whether this
-// sketch is running under Processing or under Processing.js
-void keyPressed()
-{
- if( (javascript==null && key=='+' && keyCode==61) ||
- (javascript!=null && (key==187 || key==119))) {
- // if someone types a "+", draw the line lower
- linepos++;
- redraw();
- }
- else if( (javascript==null && key=='-' && keyCode==45)
- || (javascript!=null && (key==189 || key==115))) {
- // if someone types a "-", draw the line higher
- linepos--;
- redraw();
- }
-}
-
-sketch.html:
-
-<html>
-<head>
- <script type="text/javascript" src="processing.js"></script>
- <script type="text/javascript">
- // bind javascript to all Processing instances
- function bindJavascript() {
- canvaslist = document.getElementsByTagName("canvas");
- for(c=0; c<canvaslist.length; c++) {
- pjs = Processing.getInstanceById(canvaslist[c]);
- try { pjs.bindJavascript(this); }
- catch(e) { setTimeout(bindJavascript, 250); }
- }
- }
- bindJavascript();
- </script>
-</head>
-<body>
- <canvas id="first" data-processing-sources="sketch.pde"></canvas>
- <canvas id="second" data-processing-sources="bypass.pde sketch.pde"></canvas>
-</body>
-</html>
- |
- ||
| Description | -By default sketches loaded using Processing.js will only accept keyboard events when they have focus (i.e. after having tab-navigated to them, - or having clicked on them). Using this directive will allow a sketch to receive any keyboard event sent to the page, regardless of whether the canvas - it is loaded in has focus or not. Using this directive means that people who visit your page will not need to explicitly click on your sketch to - interact with it, but it also means that if you have multiple sketches on a page, any sketch that uses this directive will receive input that may not - have been intended for it. - |
- ||
| Syntax | -
- - /* @pjs globalKeyEvents="true"; */ - |
-
- ||
| Parameters | -
|
-
- ||
| Usage | -Web & Application, Processing.js compatibility | -||
| Related | -- @pjs directives - | -
| Name | - ->= (greater than or equal to) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 23;
-
-int b = 23;
-
-if(a >= b) {
-
- println("variable a is greater or equal to variable b ")
-
-} |
-
- ||||
| Description | - -Tests if the value on the left is larger than the value on the right or if the values are equivalent. | - -||||
| Syntax | - -value1 >= value2 |
-
- ||||
| Parameters | - - - -
|
-
- ||||
| Usage | - -Web & Application | - - - -||||
| Related | - -
-
- > (greater than) - - < (less than) - - - - <= (less than or equal to) - - == (equality) - - != (inequality) - - - - |
-
-
| Name | - -> (greater than) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 5;
-
-int b = 13;
-
-if(b > a) {
-
- println("variable b is larger the variable a");
-
-} |
-
- ||||
| Description | - -Tests if the value on the left is larger than the value on the right. | - -||||
| Syntax | - -value1 > value2 |
-
- ||||
| Parameters | - - - -
|
-
- ||||
| Usage | - -Web & Application | - - - -||||
| Related | - -
-
-
-
- < (less than) - - >= (greater than or equal to) - - <= (less than or equal to) - - == (equality) - - != (inequality) - - - - |
-
-
| Name | - -green() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -color c = color(0, 126, 255); - -fill(c); - -rect(15, 20, 35, 60); - -float value = green(c); // Sets "value" to "126" - -fill(value); - -rect(50, 20, 35, 60); |
-
- ||
| Description | - - - -Extracts the green value from a color, scaled to match current colorMode(). This value is always returned as a float so be careful not to assign it to an int value. The green() function is easy to use and undestand, but is slower than another technique. To achieve the same results when working in colorMode(RGB, 255), but with greater speed, use the >> (right shift) operator with a bit mask. For example, the following two lines of code are equivalent: float r1 = green(myColor); |
-
- ||
| Syntax | - -green(color) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -red()
-
- blue() - - hue() - - saturation() - - brightness() - - >> (right shift) |
-
-
-
-
| Name | - -height |
-
-
|---|---|
| Examples | - - - - noStroke(); - -background(0); - -rect(40, 0, 20, height); - -rect(60, 0, 20, height/2); |
-
-
| Description | - -System variable which stores the height of the display window. This value is set by the second parameter of the size() function. For example, the function call size(320, 240) sets the height variable to the value 240. The value of height is zero until size() is called. | - - - -
| Usage | - -Web & Application | - -
| Related | - -width |
-
-
| Name | -hex() |
- ||||
|---|---|---|---|---|---|
| Examples | - -color c = #ffcc00; -println(c); // Prints -13312 -println(hex(c)); // Prints FFFFCC00 -println(hex(c, 6)); // Prints FFCC00- color c = color(255, 204, 0); -println(c); // Prints -13312 -println(hex(c)); // Prints FFFFCC00 -println(hex(c, 6)); // Prints FFCC00 |
- ||||
| Description | -Converts a byte, char, int, or color to a String containing the equivalent hexadecimal notation. For example color(0, 102, 153, 255) will convert to the String "FF006699". - This function can help make your geeky debugging sessions much happier. | -||||
| Syntax | -hex(value)- hex(value,digits)- |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String | -||||
| Usage | -Web & Application | - -||||
| Related | -unhex() - binary() - unbinary() |
-
| Name | -hint() |
-
- ||
|---|---|---|---|
| Examples | -void setup() {
- size(400, 400, OPENGL);
- // Enable 4x oversampling (if supported)
- hint(ENABLE_OPENGL_4X_SMOOTH);
-} |
- ||
| Description | - -Set various hints and hacks for the renderer. This is used to handle obscure rendering features that cannot be implemented - in a consistent manner across renderers. Many options will often graduate to standard features instead of hints over time. -hint(ENABLE_OPENGL_4X_SMOOTH) - Enable 4x anti-aliasing for OpenGL. This can help force anti-aliasing if it has not been enabled by the user. - On some graphics cards, this can also be set by the graphics driver's control panel, however not all cards make this available. - This hint must be called immediately after the size() command because it resets the renderer, obliterating any settings and anything drawn (and like size(), - re-running the code that came before it again). -hint(DISABLE_OPENGL_2X_SMOOTH) - In Processing 1.0, Processing always enables 2x smoothing when the OpenGL renderer is used. - This hint disables the default 2x smoothing and returns the smoothing behavior found in earlier releases, where smooth() and noSmooth() - could be used to enable and disable smoothing, though the quality was inferior. -hint(DISABLE_DEPTH_TEST) - Disable the zbuffer, allowing you to draw on top of everything at will. When depth testing is disabled, - items will be drawn to the screen sequentially, like a painting. This hint is most often used to draw in 3D, then draw in 2D on top of it - (for instance, to draw GUI controls in 2D on top of a 3D interface). Starting in release 0149, this will also clear the depth buffer. - Restore the default with hint(ENABLE_DEPTH_TEST), but note that with the depth buffer cleared, any 3D drawing that happens later in draw() - will ignore existing shapes on the screen. -hint(ENABLE_DEPTH_SORT) - Enable primitive z-sorting of triangles and lines in P3D and OPENGL. - This can slow performance considerably, and the algorithm is not yet perfect. Restore the default with hint(DISABLE_DEPTH_SORT). -hint(DISABLE_OPENGL_ERROR_REPORT) - Speeds up the OPENGL renderer setting by not checking for errors while running. Undo with hint(ENABLE_OPENGL_ERROR_REPORT). -unhint() has been removed in favor of adding additional ENABLE/DISABLE constants to reset the default behavior. This prevents the double negatives, and also reinforces which hints can be enabled or disabled. |
- ||
| Syntax | -hint(item) |
-
- ||
| Parameters | -
-
|
- ||
| Usage | -Web & Application | -||
| Related | -PGraphics - createGraphics() - size() |
-
| Name | - -hour() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw() {
-
- background(204);
-
- int s = second(); // Values from 0 - 59
-
- int m = minute(); // Values from 0 - 59
-
- int h = hour(); // Values from 0 - 23
-
- line(s, 0, s, 33);
-
- line(m, 33, m, 66);
-
- line(h, 66, h, 100);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The hour() function returns the current hour as a value from 0 - 23. | - -||
| Syntax | - -hour() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - second() - - minute() - - day() - - month() - - year() - - |
-
-
| Name | -hue() |
-
- ||
|---|---|---|---|
| Examples | - noStroke(); -colorMode(HSB, 255); -color c = color(0, 126, 255); -fill(c); -rect(15, 20, 35, 60); -float value = hue(c); // Sets "value" to "0" -fill(value); -rect(50, 20, 35, 60); |
- ||
| Description | - -Extracts the hue value from a color. |
- ||
| Syntax | -
- hue(color) |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -red() - green() - blue() - brightness() - saturation() |
-
| Name | - -if() |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - for (int i=5; i < height; i+=5) {
-
- stroke(255); //Set the color to white
-
- if(i < 35) { //When "i" is less than "35"...
-
- stroke(0); //...set the color to black
-
- }
-
- line(30, i, 80, i);
-
-} |
-
- ||||
| Description | - -Allows the program to make a decision about which code to execute. If the test evaluates to true, the statements enclosed within the block are executed and if the test evaluates to false the statements are not executed. | - - - -||||
| Syntax | - -if (test) {
-
- statements
-
-} |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -else() |
-
-
-
-
| Name | -imageMode() |
-
- ||
|---|---|---|---|
| Examples | - // @pjs preload must be used to preload the image
- /* @pjs preload="laDefense_crop.jpg"; */
- PImage b;
-b = loadImage("laDefense_crop.jpg");
-imageMode(CORNERS);
-image(b, 10, 10, 60, 60);
-imageMode(CORNER);
-image(b, 35, 35, 50, 50); |
- ||
| Description | - -Modifies the location from which images draw. The default mode is imageMode(CORNER), which specifies the location to be the upper left - corner and uses the fourth and fifth parameters of image() to set the image's width and height. - The syntax imageMode(CORNERS) uses the second and third parameters of image() to set the location of one corner of the image and - uses the fourth and fifth parameters to set the opposite corner. Use imageMode(CENTER) to draw images centered at the given x and y position |
- ||
| Syntax | -
- imageMode(MODE) |
- ||
| Parameters | -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -loadImage() - PImage - image() - background() |
-
| Name | - -image() |
-
-
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -
-
- // @pjs preload must be used to preload the image
-
- /* @pjs preload="laDefense.jpg"; */
-
- PImage b;
-
- b = loadImage("laDefense.jpg");
-
- image(b, 0, 0);
-
- // @pjs preload must be used to preload the image
-
- /* @pjs preload="laDefense.jpg"; */
-
- PImage b;
-
- b = loadImage("laDefense.jpg");
-
- image(b, 0, 0);
-
- image(b, 0, 0, width/2, height/2); |
-
- ||||||||||
| Description | - -Diplays images to the screen. The images must be preloaded using @pjs preload before it can be used. Processing currently works with GIF, JPEG, and Targa images. The color of an image may be modified with the tint() function and if a GIF has transparency, it will maintain its transparency.
-
- The img parameter specifies the image to display and the x and y parameters define the location of the image from its upper-left corner.
-
- The image is displayed at its original size unless the width and height parameters specify a different size.
-
- The imageMode() function changes the way the parameters work.
-
- A call to imageMode(CORNERS) will change the width and height parameters to define the x and y values of the opposite corner of the image.
-
-
-
- - - NOTE: DOM security will not allow you to load images file:/// URIs. This security can be overridden in Firefox in about:config, by changing security.fileuri.strict_origin_policy to false. |
-
- ||||||||||
| Syntax | - -image(img, x, y) - -image(img, x, y, width, height) |
-
-
-
- ||||||||||
| Parameters | - -
|
-
- ||||||||||
| Usage | - - - -Web & Application | - -||||||||||
| Related | - -
-
- loadImage() - - PImage - - imageMode() - - tint() - - background() - - alpha() - - |
-
-
-
-
| Name | - -implements |
-
-
|---|---|
| Description | - - - -Implements an interface or group of interfaces. Interfaces are used to establish a protocol between classes, they establish the form for a class (method names, return types, etc.) but no implementation. After implementation, an interface can be used and extended like any other class. Because Java doesn't allow extending more than one class at a time, interfaces are created, which means specific methods and fields can be found in the class which implements it. A Thread is an example; it implements the "Runnable" interface, which means the class has a method called "public void run()" inside it. | - -
| Usage | - -Web & Application | - - - -
| Name | -import |
- ||
|---|---|---|---|
| Examples | - -
- import processing.opengl.*;
-void setup(){
- size(screen.width, screen.height, OPENGL);
-}
-void draw() {
- line(0, 0, width, height);
- line(0, height, width, 0);
-} |
- ||
| Description | -The keyword import is used to load a library into a Processing sketch. A library is one or more classes that are grouped together - to extend the capabilities of Processing. The * character is often used at the end of the import line (see the code example above) to - load all of the related classes at once, without having to reference them individually. -The import statement will be created for you by selecting a library from the "Import Library..." item in the Sketch menu. |
-
- ||
| Syntax | -import libraryName |
-
- ||
| Parameters | -
|
- ||
| Usage | -Web & Application | -
| Name | - -++ (increment) |
-
-
-
- ||
|---|---|---|---|
| Examples | - -int a = 1; // Sets "a" to 1 - -int b = a++; // Sets "b" to 1, then increments "a" to 2 - -int c = a; // Sets "c" to 2 |
-
- ||
| Description | - - - -Increases the value of an integer variable by 1. Equivalent to the operation i = i + 1. If the value of the variable i is five, then the expression i++ increases the value of i to 6. | - -||
| Syntax | - -value++ |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -+ (add) - - += (add assign) - - -- (decrement) |
-
-
-
-
This page references all the commands available to Processing.js. Regular Javascript commands will work in Processing.js script.
-The Processing.js community is working towards a 100% compatible API, allowing all native Java code to run in Javascript. -Items highlighted in red are not yet implemented.
-The original Processing reference can be found on the Processing website
-If you encounter any problems with these commands or their documentation please file a bug - -
| Name | - -!= (inequality) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 22;
-
-int b = 23;
-
-if(a != b) {
-
- println("variable a is not equal to variable b");
-
-} |
-
- ||||
| Description | - -Determines if one expression is not equivalent to another. | - -||||
| Syntax | - -value1 != value2 |
-
- ||||
| Parameters | - - - -
|
-
- ||||
| Usage | - -Web & Application | - - - -||||
| Related | - -
-
- > (greater than) - - < (less than) - - >= (greater than or equal to) - - <= (less than or equal to) - - == (equality) - - - - - - |
-
-
| Name | - -int |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a; // Declare variable "a" of type int - -a = 23; // Assign "a" the value 23 - -int b = -256; // Declare variable "b" and assign it the value -256 - -int c = a + b; // Declare variable "c" and assign it the sum of "a" and "b" |
-
- ||||
| Description | - -Datatype for integers, numbers without a decimal point. Integers can be as large as 2,147,483,647 and as low as -2,147,483,648. They are stored as 32 bits of information. The first time a variable is written, it must be declared with a statement expressing its datatype. Subsequent uses of this variable must not reference the datatype because Processing will think the variable is being declared again. | - -||||
| Syntax | - -int var - -int var = value |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -float |
-
-
-
-
| Name | - -int() |
-
- ||
|---|---|---|---|
| Examples | - - - -float f = 65.0; - -int i = int(f); - -println(f + " : " + i); // Prints "65.0 : 65" - - - -char c = 'E'; - -i = int(c); - -println(c + " : " + i); // Prints "E : 69" |
-
- ||
| Description | - -Converts a primitive datatype, string, or array to its integer representation. | - -||
| Syntax | - -int(value) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -int | - -||
| Usage | - -Web & Application | - - - -||
| Related | - -int - - float() |
-
-
| Name | -join() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String[] animals = new String[3]; -animals[0] = "cat"; -animals[1] = "seal"; -animals[2] = "bear"; -String joinedAnimals = join(animals, " : "); -println(joinedAnimals); // Prints "cat : seal : bear" - -// Joining an array of ints requires first -// converting to an array of Strings -int[] numbers = new int[3]; -numbers[0] = 8; -numbers[1] = 67; -numbers[2] = 5; -String joinedNumbers = join(nf(numbers, 0), ", "); -println(joinedNumbers); // Prints "8, 67, 5" |
- ||||
| Description | -Combines an array of Strings into one String, each separated by the character(s) used for the separator parameter. - To join arrays of ints or floats, it's necessary to first convert them to strings using nf() or nfs(). | -||||
| Syntax | -join(stringArray,separator) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String | -||||
| Usage | -Web & Application | - -||||
| Related | -split() - trim() - nf() - nfs() |
-
| Name | - -key |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click on the window to give it focus
-
-// and press the 'B' key
-
-
-
-void draw() {
-
- if(keyPressed) {
-
- if (key == 'b' || key == 'B') {
-
- fill(0);
-
- }
-
- } else {
-
- fill(255);
-
- }
-
- rect(25, 25, 50, 50);
-
-} |
-
- ||
| Description | - - - -The system variable key always contains the value of the most recently pressed key on the keyboard. For detecting the arrow keys, the keyCode variable is set to either UP, DOWN, LEFT, or RIGHT. | - -||
| Syntax | - - - -key |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
-
-
- keyCode - - keyPressed - - keyPressed() - - keyReleased() - - |
-
-
| Name | - -keyCode |
-
-
-
- ||
|---|---|---|---|
| Examples | - -int x = 90;
-
-
-
-void draw() {
-
- noStroke();
-
- rect(x, 10, 3, 80);
-
-}
-
-
-
-void keyPressed() {
-
- if (keyCode == BACKSPACE) {
-
- x = x - 5;
-
- }
-
-}color fillVal = color(126);
-
-
-
-void draw() {
-
- fill(fillVal);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void keyPressed() {
-
- if (key == CODED) {
-
- if (keyCode == UP) {
-
- fillVal = 255;
-
- } else if (keyCode == DOWN) {
-
- fillVal = 0;
-
- }
-
- } else {
-
- fillVal = 126;
-
- }
-
-} |
-
- ||
| Description | - -The system variable keyCode is used to detect special keys such as the UP, DOWN, LEFT, RIGHT arrow keys and ALT, CONTROL, SHIFT, BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE. When checking for UP, DOWN, LEFT, RIGHT, ALT, CONTROL, and SHIFT, it's first necessary to check and see if the key is coded. This is done with the conditional "if(key == CODED) {}" as shown in the second example. The keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) do not require checking to see if they key is coded. If you're making cross-platform projects, note that the ENTER key is commonly used on PCs and Unix and the RETURN key is used instead on Macintosh. Check for both ENTER and RETURN to make sure your program will work for all platforms. | - -||
| Syntax | - - - -keyCode |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
- key - - keyPressed - - keyPressed() - - keyReleased() - - |
-
-
| Name | - -keyPressed |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click on the image to give it focus
-
-// and press any key
-
-
-
-// Note: the rectangle in this example may
-
-// flicker as the operating system may
-
-// register a long key press as a repetition
-
-// of key presses
-
-
-
-void draw() {
-
- if (keyPressed == true) {
-
- fill(0);
-
- } else {
-
- fill(255);
-
- }
-
- rect(25, 25, 50, 50);
-
-} |
-
- ||
| Description | - - - -The boolean system variable keyPressed is true if any key is pressed and false if no keys are pressed. | - -||
| Syntax | - -keyPressed |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
- key - - keyCode - - keyPressed() - - keyReleased() - - |
-
-
| Name | - -keyPressed() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click on the image to give it focus,
-
-// and then press any key
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void keyPressed()
-
-{
-
- if(value == 0) {
-
- value = 255;
-
- } else {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The keyPressed() function is called once every time a key is pressed. Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyPressed(), the rate is set by the operating system and how each computer is configured. | - -||
| Syntax | - -void keyPressed() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- key - - keyCode - - keyPressed - - - - keyReleased() - - |
-
-
| Name | - -keyReleased() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click on the image to give it focus,
-
-// and then press any key
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void keyReleased()
-
-{
-
- if(value == 0) {
-
- value = 255;
-
- } else {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The keyReleased() function is called once every time a key is released. | - -||
| Syntax | - -void keyReleased() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- key - - keyCode - - keyPressed - - keyPressed() - - - - |
-
-
| Name | - -keyTyped() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Run this program to learn how each of these functions
-
-// relate to the others
-
-
-
-void draw() { } // Empty draw() needed to keep the program running
-
-
-
-void keyPressed() {
-
- println("pressed " + int(key) + " " + keyCode);
-
-}
-
-
-
-void keyTyped() {
-
- println("typed " + int(key) + " " + keyCode);
-
-}
-
-
-
-void keyReleased() {
-
- println("released " + int(key) + " " + keyCode);
-
-} |
-
- ||
| Description | - - - -The keyTyped() function is called once every time a key is pressed, but action keys such as Ctrl, Shift, and Alt are ignored. Because of how operating systems handle key repeats, holding down a key will cause multiple calls to keyTyped(), the rate is set by the operating system and how each computer is configured. | - -||
| Syntax | - -void keyTyped() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- key - - keyCode - - keyPressed - - keyReleased() - - |
-
-
| Name | - -<< (left shift) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int m = 1 << 3; // In binary: 1 to 1000 - -println(m); // Prints "8" - -int n = 1 << 8; // In binary: 1 to 100000000 - -println(n); // Prints "256" - -int o = 2 << 3; // In binary: 10 to 10000 - -println(o); // Prints "16" - -int p = 13 << 1; // In binary: 1101 to 11010 - -println(p); // Prints "26" // Packs four 8 bit numbers into one 32 bit number - -int a = 255; // Binary: 00000000000000000000000011111111 - -int r = 204; // Binary: 00000000000000000000000011001100 - -int g = 204; // Binary: 00000000000000000000000011001100 - -int b = 51; // Binary: 00000000000000000000000000110011 - -a = a << 24; // Binary: 11111111000000000000000000000000 - -r = r << 16; // Binary: 00000000110011000000000000000000 - -g = g << 8; // Binary: 00000000000000001100110000000000 - - - -// Equivalent to "color argb = color(r, g, b, a)" but faster - -color argb = a | r | g | b; - -fill(argb); - -rect(30, 20, 55, 55); |
-
-
-
- ||||
| Description | - -Shifts bits to the left. The number to the left of the operator is shifted the number of places specified by the number to the right. Each shift to the left doubles the number, therefore each left shift multiplies the original number by 2. Use the left shift for fast multiplication or to pack a group of numbers together into one larger number. Left shifting only works with integers or numbers which automatically convert to an integer such at byte and char. | - -||||
| Syntax | - - - -value << n |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - ->> (right shift) |
-
-
| Name | - -lerpColor() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - stroke(255); - -background(51); - -color from = color(204, 102, 0); - -color to = color(0, 102, 153); - -color interA = lerpColor(from, to, .33); - -color interB = lerpColor(from, to, .66); - -fill(from); - -rect(10, 20, 20, 60); - -fill(interA); - -rect(30, 20, 20, 60); - -fill(interB); - -rect(50, 20, 20, 60); - -fill(to); - -rect(70, 20, 20, 60); |
-
- ||||||
| Description | - - - -Calculates a color or colors between two color at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, etc. | - -||||||
| Syntax | - -lerpColor(c1, c2, amt) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -blendColor() - - color() |
-
-
| Name | - -lerp() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - float a = 20; - -float b = 80; - -float c = lerp(a, b, .2); - -float d = lerp(a, b, .5); - -float e = lerp(a, b, .8); - -beginShape(POINTS); - -vertex(a, 50); - -vertex(b, 50); - -vertex(c, 50); - -vertex(d, 50); - -vertex(e, 50); - -endShape();  int x1 = 15;
-
-int y1 = 10;
-
-int x2 = 80;
-
-int y2 = 90;
-
-line(x1, y1, x2, y2);
-
-for(int i=0; i<=10; i++) {
-
- float x = lerp(x1, x2, i/10.0) + 10;
-
- float y = lerp(y1, y2, i/10.0);
-
- point(x, y);
-
-} |
-
- ||||||
| Description | - -Calculates a number between two numbers at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is half-way in between, etc. The lerp function is convenient for creating motion along a straight path and for drawing dotted lines. | - -||||||
| Syntax | - - - -lerp(value1, value2, amt) |
-
- ||||||
| Parameters | - - - -
|
-
-
-
- ||||||
| Usage | - -Web & Application | - -||||||
| Related | - -
-
- curvePoint() - - bezierPoint() |
-
-
| Name | - -<= (less than or equal to) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 22;
-
-int b = 23;
-
-if(a <= b) {
-
- println("variable a is less or equal to variable b ");
-
-} |
-
- ||||
| Description | - -Tests if the value on the left is less than the value on the right or if the values are equivalent. | - -||||
| Syntax | - -value1 <= value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - - - -- - | ||||
| Related | - -
-
- > (greater than) - - < (less than) - - >= (greater than or equal to) - - - - == (equality) - - != (inequality) - - - - |
-
-
-
-
| Name | - -< (less than) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 22;
-
-int b = 23;
-
-if(a < b) {
-
- println("variable a is less then variable b ");
-
-} |
-
- ||||
| Description | - -Tests if the value on the left is smaller than the value on the right. | - -||||
| Syntax | - -value1 < value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - - - -Web & Application | - -||||
| Related | - -
-
- > (greater than) - - - - >= (greater than or equal to) - - <= (less than or equal to) - - == (equality) - - != (inequality) - - - - |
-
-
-
-
| Name | -lightFalloff() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Description | - -Sets the falloff rates for point lights, spot lights, and ambient lights. The parameters are used to determine the falloff with the following equation: -d = distance from light position to vertex position Like fill(), it affects only the elements which are created after it in the code. -The default value if LightFalloff(1.0, 0.0, 0.0). Thinking about an ambient light with a falloff can be tricky. -It is used, for example, if you wanted a region of your scene to be lit ambiently one color and another region to be lit ambiently by another color, -you would use an ambient light with location and falloff. You can think of it as a point light that doesn't care which direction a surface is facing. |
- ||||||
| Syntax | -lightFalloff(constant,linear,quadratic) |
- ||||||
| Parameters | -
|
-
- ||||||
| Returns | -None | -||||||
| Usage | -Web & Application | -||||||
| Related | -lights() - ambientLight() - pointLight() - spotLight() - lightSpecular() |
-
| Name | -lightSpecular() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -directionalLight(102, 102, 102, 0, 0, -1); -lightSpecular(204, 204, 204); -directionalLight(102, 102, 102, 0, 1, -1); -lightSpecular(102, 102, 102); -translate(20, 50, 0); -specular(51, 51, 51); -sphere(30); -translate(60, 0, 0); -specular(102, 102, 102); -sphere(30); |
- ||||||
| Description | - -Sets the specular color for lights. Like fill(), it affects only the elements which are created after it in the code. - Specular refers to light which bounces off a surface in a perferred direction (rather than bouncing in all directions like a diffuse light) and is used for creating - highlights. The specular quality of a light interacts with the specular material qualities set through the specular() and shininess() functions. |
- ||||||
| Syntax | -lightSpecular(v1,v2,v3) |
- ||||||
| Parameters | -
|
-
- ||||||
| Returns | -None | -||||||
| Usage | -Web & Application | -||||||
| Related | -lights() - ambientLight() - pointLight_() - spotLight() |
-
| Name | -lights() |
-
-
|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -// Sets the default ambient -// and directional light -lights(); -translate(20, 50, 0); -sphere(30); -translate(60, 0, 0); -sphere(30);  void setup() {
- size(100, 100, P3D);
- background(0);
- noStroke();
-}
-
-void draw() {
- // Add lights at the beginning
- // of draw() to keep them persistent
- lights();
- translate(20, 50, 0);
- sphere(30);
- translate(60, 0, 0);
- sphere(30);
-} |
-
| Description | - -Sets the default ambient light, directional light, falloff, and specular values. - The defaults are are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1), lightFalloff()(1, 0, 0), and lightSpecular(0, 0, 0). - Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to - only have an effect the first time through the loop. |
-
| Syntax | -lights() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -noLights() - directionalLights() - ambientLight() - pointLight() - spotLight() |
-
| Name | - -line() |
-
-
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - line(30, 20, 85, 75);  line(30, 20, 85, 20); - -stroke(126); - -line(85, 20, 85, 75); - -stroke(255); - -line(85, 75, 30, 75);  // Drawing lines in 3D requires P3D - -// or OPENGL as a parameter to size() - -size(100, 100, P3D); - -line(30, 20, 0, 85, 20, 15); - -stroke(126); - -line(85, 20, 15, 85, 75, 0); - -stroke(255); - -line(85, 75, 0, 30, 75, -50); |
-
- ||||||||||||
| Description | - -Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() method will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function. The version with six parameters allows the line to be placed anywhere within XYZ space. Drawing this shape in 3D using the z parameter requires the P3D or OPENGL parameter in combination with size as shown in the above example. | - - - -||||||||||||
| Syntax | - -line(x1, y1, x2, y2) - -line(x1, y1, z1, x2, y2, z2) |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Usage | - -Web & Application | - -||||||||||||
| Related | - -strokeWeight() - - strokeJoin() - - strokeCap() - - beginShape() |
-
-
| Name | - -link() |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -void draw() {
-
- rect(20, 20, 60, 60);
-
-}
-
-
-
-void mousePressed() {
-
- link("http://processingjs.org");
-
-}void draw() {
-
- rect(20, 20, 60, 60);
-
-}
-
-
-
-void mousePressed() {
-
- link("http://processingjs.org", "_new");
-
-} |
-
- ||||
| Description | - -Links to a webpage either in the same window or in a new window. The complete URL must be specified. | - -||||
| Syntax | - -link(url) - -link(url, target) |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -
| Name | -loadBytes() |
-
- ||
|---|---|---|---|
| Examples | -// open a file and read its binary data
-byte b[] = loadBytes("something.dat");
-
-// print each value, from 0 to 255
-for (int i = 0; i < b.length; i++) {
- // every tenth number, start a new line
- if ((i % 10) == 0) {
- println();
- }
-
- // bytes are from -128 to 127, this converts to 0 to 255
- int a = b[i] & 0xff;
- print(a + " ");
-}
-// print a blank line at the end
-println();
- |
- ||
| Description | - -Reads the contents of a file or url and places it in a byte array. If a file is specified, it must be located in the sketch's "data" directory/folder. -The filename parameter can also be a URL to a file found online. For security reasons, a - Processing sketch found online can only download files from the same server from which it came. |
- ||
| Syntax | -loadBytes(filename) |
- ||
| Parameters | -
-
|
- ||
| Returns | -byte[] | -||
| Usage | -Web & Application | -||
| Related | -loadStrings() - saveStrings() - saveBytes() |
-
-
| Name | - -loadFont() |
-
- ||
|---|---|---|---|
| Processing.js Behavior | - -Font support for the Canvas element varies across browsers. See Canvas Text, BurntToys Bauhaus.
-
- - - Please use the follwoing demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - - |
-
- ||
| Examples | - - PFont font;
-font = loadFont("FFScala.ttf");
-textFont(font, 32);
-text("word", 15, 50); |
-
- ||
| Description | - - - -Loads a font into a variable of type PFont. To load correctly, fonts must be located in the current directory of the sketch. Instead of using loadFont, you should be using createFont(). - - | ||
| Syntax | - - - -loadFont(fontname) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related - - | PFont - - textFont() - - text() - - createFont() |
-
-
| Name | - -loadImage() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -
-
- // @pjs preload must be used to preload the image
-
- /* @pjs preload="laDefense.jpg"; */
-
- PImage b;
-
- b = loadImage("laDefense.jpg");
-
- image(b, 0, 0);
-
-
-
-// @pjs preload must be used to preload the image
-
-/* @pjs preload="laDefense.jpg"; */
-
-PImage b;
-
-void setup() {
-
- b = loadImage("laDefense.jpg");
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- image(b, 0, 0);
-
-}PImage online;
-
-
-
-void setup() {
-
- String url = "http://mt0.google.com/mt?n=404&v=w2.61&x=9913&y=12119&zoom=2";
-
- online = loadImage(url, "png");
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- image(b, 0, 0);
-
-} |
-
-
-
- ||
| Description | - -Loads an image into a variable of type PImage. Four types of images ( .gif, .jpg, .tga, .png) images may be loaded. To load correctly, - -The filename parameter can also be a URL to a file found online. For security reasons, a Processing sketch found online can only download files from the same server from which it came. - - - -The extension of the filename parameter is used to determine the image type. In cases where the image filename does not end with a proper extension, specify the extension as the second parameter to loadImage(), as shown in the third example on this page. - - - -If an image is not loaded successfully, the null value is returned and an error message will be printed to the console. The error message does not halt the program, however the null value may cause a NullPointerException if your code does not check whether the value returned from loadImage() is null. - - - - NOTE: Some browers will not allow you to load images from file:// URIs. It is recommended that you use a webserver for your development and testing to avoid any problems with file:// URIs. |
-
- ||
| Syntax | - -loadImage(filename) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -PImage
-
- image() - - imageMode() - - background() |
-
-
| Name | - -loadPixels() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -int halfImage = width*height/2;
-
-PImage myImage = loadImage("topanga.jpg");
-
-image(myImage, 0, 0);
-
-
-
-loadPixels();
-
-for (int i = 0; i < halfImage; i++) {
-
- pixels[i+halfImage] = pixels[i];
-
-}
-
-updatePixels(); |
-
- ||
| Description | - -Loads the pixel data for the display window (or an image) into the pixels[] array. This function must always be called before reading from or writing to pixels[].
-
- - -Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. |
-
-
-
- ||
| Syntax | - -loadPixels() |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -pixels[] - - updatePixels() |
-
-
| Name | -loadShape() |
-
- ||
|---|---|---|---|
| Examples | -PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, 10, 10, 80, 80);// Loading a shape when using setup() and draw()
-
-PShape s;
-
-void setup() {
- s = loadShape("bot.svg");
- smooth();
- noLoop();
-}
-
-void draw() {
- shape(s, 10, 10, 80, 80);
-}
- |
- ||
| Description | - -Loads vector shapes into a variable of type PShape. Currently, only SVG files may be loaded. To load correctly, the file must be located in - the data directory of the current sketch. In most cases, - loadShape() should be used inside setup() because loading shapes inside draw() will reduce the speed of a sketch. -If a shape is not loaded successfully, the null value is returned and an error message will be printed to the console. - The error message does not halt the program, however the null value may cause a - NullPointerException if your code does not check whether the value returned from loadShape() is null. |
- ||
| Syntax | -loadShape(filename) |
- ||
| Parameters | -
|
-
- ||
| Returns | -PShape or null | -||
| Usage | -Web & Application | -||
| Related | -PShape - shape() - shapeMode() |
-
| Name | - -loadStrings() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -String lines[] = loadStrings("list.txt");
-
-println("there are " + lines.length + " lines");
-
-for (int i=0; i < lines.length; i++) {
-
- println(lines[i]);
-
-} |
-
- ||
| Description | - -Reads the contents of a file or url and creates a String array of its individual lines. If a file is specified, it must be located in the sketch's "data" directory/folder.
-
- - -The filename parameter can also be a URL to a file found online. For security reasons, a Processing sketch found online can only download files from the same server from which it came. Getting around this restriction requires a signed applet. - - - -If the file is not available or an error occurs, null will be returned and an error message will be printed to the console. The error message does not halt the program, however the null value may cause a NullPointerException if your code does not check whether the value returned is null. - - - -Starting with Processing release 0134, all files loaded and saved by the Processing API use UTF-8 encoding. In previous releases, the default encoding for your platform was used, which causes problems when files are moved to other platforms. |
-
-
-
- ||
| Syntax | - -loadStrings(filename) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -loadBytes() - - saveStrings() - - saveBytes() |
-
-
| Name | -log() |
-
- ||
|---|---|---|---|
| Examples | -void setup() {
- int i = 12;
- println(log(i));
- println(log10(i));
-}
-
-// Calculates the base-10 logarithm of a number
-float log10 (int x) {
- return (log(x) / log(10));
-} |
- ||
| Description | - -Calculates the natural logarithm (the base-e logarithm) of a number. This function expects the values greater than 0.0. |
- ||
| Syntax | -log(value) |
- ||
| Parameters | - -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -
| Name | - -&& (logical AND) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - for(int i=5; i<=95; i+=5) {
-
- if((i > 35) && (i < 60)) {
-
- stroke(0); //Set color to black
-
- } else {
-
- stroke(255); //Set color to white
-
- }
-
- line(30, i, 80, i);
-
-} |
-
- ||||
| Description | - -Compares two expressions and returns true only if both evaluate to true. Returns false if one or both evaluate to false. The following list shows all possible combinations: true && false // Evaluates false because the second is false false && true // Evaluates false because the first is false true && true // Evaluates true because both are true false && false // Evaluates false because both are false |
-
-
-
- ||||
| Syntax | - -expression1 && expression2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -
-
-
-
- || (logical OR) - - ! (logical NOT) - - if() |
-
-
-
-
| Name | - -! (logical NOT) |
-
- ||
|---|---|---|---|
| Examples | - - - - boolean a = false;
-
-if (!a) {
-
- rect(30, 20, 50, 50);
-
-}
-
-a = true;
-
-if (a) {
-
- line(20, 10, 90, 80);
-
- line(20, 80, 90, 10);
-
-} |
-
- ||
| Description | - -Inverts the Boolean value of an expression. Returns true if the expression is false and returns false if the expression is true. If the expression (a>b) evaluates to true, then !(a>b) evaluates to false. | - - - -||
| Syntax | - -!expression |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- ! (logical AND) - - || (logical OR) - - - - if() |
-
-
-
-
| Name | - -|| (logical OR) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - for(int i=5 ; i<=95; i+=5) {
-
- if((i < 35) || (i > 60)) {
-
- line(30, i, 80, i);
-
- }
-
-} |
-
- ||||
| Description | - -Compares two expressions and returns true if one or both evaluate to true. Returns false only if both expressions are false. The following list shows all possible combinations: true || false // Evaluates true because the first is true false || true // Evaluates true because the second is true true || true // Evaluates true because both are true false || false // Evaluates false because both are false |
-
-
-
- ||||
| Syntax | - -expression1 || expression2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -
-
- ! (logical AND) - - - - ! (logical NOT) - - if() |
-
-
-
-
-
-
| Name | -long |
- ||||
|---|---|---|---|---|---|
| Examples | - -long a; // Declare variable "a" of type int -a = 23; // Assign "a" the value 23 -long b = -256; // Declare variable "b" and assign it the value -256 -long c = a + b; // Declare variable "c" and assign it the sum of "a" and "b" -int i = (int)c; // Converts the value of "c" from a long to a int |
- ||||
| Description | -Datatype for large integers. While integers can be as large as 2,147,483,647 and as low as -2,147,483,648 (stored as 32 bits), - a long integer has a minimum value of -9,223,372,036,854,775,808 and a maximum value of 9,223,372,036,854,775,807 (stored as 64 bits). - Use this datatype when you need a number to have a greater magnitude than can be stored within an int. - Processing functions don't use this datatype, so while they work in the language, - you'll usually have to convert to a int using the (int) syntax before passing into a function. | -||||
| Syntax | -long var - long var= value- |
- ||||
| Parameters | - -
-
|
- ||||
| Usage | -Web & Application | - -||||
| Related | -int | -
| Name | - -loop() |
-
-
|---|---|
| Examples | - - - -void setup() {
-
- size(200, 200);
-
- noLoop();
-
-}
-
-
-
-float x = 0;
-
-
-
-void draw() {
-
- background(204);
-
- x = x + .1;
-
- if (x > width) {
-
- x = 0;
-
- }
-
- line(x, 0, x, height);
-
-}
-
-
-
-void mousePressed() {
-
- loop();
-
-}
-
-
-
-void mouseReleased() {
-
- noLoop();
-
-} |
-
-
| Description | - -Causes Processing to continuously execute the code within draw(). If noLoop() is called, the code in draw() stops executing. | - - - -
| Syntax | - -loop() - -redraw() - -draw() |
-
-
| Returns | - - - -None | - -
| Usage | - -Web & Application | - -
| Related | - -noLoop() |
-
-
| Name | -mag() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - float x1 = 20; -float x2 = 80; -float y1 = 30; -float y2 = 70; - -line(0, 0, x1, y1); -println(mag(x1, y1)); // Prints 36.05551 -line(0, 0, x2, y1); -println(mag(x2, y1)); // Prints 85.44004 -line(0, 0, x1, y2); -println(mag(x1, y2)); // Prints 72.8011 -line(0, 0, x2, y2); -println(mag(x2, y2)); // Prints 106.30146 |
- ||||||
| Description | - -Calculates the magnitude (or length) of a vector. A vector is a direction in space commonly used in computer graphics and linear algebra. - Because it has no "start" position, the magnitude of a vector can be thought of as the distance from coordinate (0,0) to its (x,y) value. - Therefore, mag() is a shortcut for writing "dist(0, 0, x, y)". |
- ||||||
| Syntax | -
- mag(a,b) - mag(a,b,c) |
- ||||||
| Parameters | -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -dist() |
-
| Name | -map() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | -size(400, 400); -float value = 25; -float m = map(value, 0, 100, 0, width); -ellipse(m, 200, 10, 10); |
- ||||||||||
| Description | - -Re-maps a number from one range to another. In the example above, the number '25' is converted from a value in the range 0..100 into a - value that ranges from the left edge (0) to the right edge (width) of the screen. -Numbers outside the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. |
- ||||||||||
| Syntax | -
- map(value,low1,high1,low2,high2) |
- ||||||||||
| Parameters | -
|
- ||||||||||
| Returns | -float | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -norm() - lerp() |
-
| Name | -matchAll() |
- ||||
|---|---|---|---|---|---|
| Description | -The matchAll() function is used to apply a regular expression to a piece of text, and return a list of matching groups - (elements found inside parentheses) as a two-dimensional String array. No matches will return null. If no groups are specified in the regexp, - but the sequence matches, a two dimensional array is still returned, but the second dimension is only of length one. -To use the function, first check to see if the result is null. If the result is null, then the sequence did not match at all. - If the sequence did match, a 2D array is returned. If there are groups (specified by sets of parentheses) in the regexp, then the contents of each will be returned in the array. Assuming, a loop with counter variable i, element [i][0] of a regexp match returns the entire matching string, - and the match groups start at element [i][1] (the first group is [i][1], the second [i][2], and so on). -The syntax can be found in the reference for Java's Pattern class. - For regular expression syntax, read the Java Tutorial on the topic. |
- ||||
| Syntax | -matchAll(str,regexp) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String[][] | -||||
| Usage | -Web & Application | - -||||
| Related | -match() - split() - splitToken() - trim() - join() |
-
| Name | -match() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String s = "Inside a tag, you will find content.";
-String[] m = match(s, "(\\S+)");
-println("Found " + m[1] + " inside the tag.");
-// Prints "Found content inside the tag." to the consoleString s1 = "Have you ever heard of a thing called fluoridation.
- Fluoridation of water?";
-String s2 = "Uh? Yes, I-I have heard of that, Jack, yes. Yes.";
-
-String[] m1 = match(s1, "fluoridation");
-if (m1 != null) {
- // This will print to the console.
- println("Found a match in '" + s1 + "'");
-} else {
- println("No match found in '" + s1 + "'");
-}
-
-String[] m2 = match(s2, "fluoridation");
-if (m2 != null) {
- println("Found a match in '" + s2 + "'");
-} else {
- // This will print to the console.
- println("No match found in '" + s2 + "'");
-} |
- ||||
| Description | -The match() function is used to apply a regular expression to a piece of text, and return matching groups (elements found inside parentheses) as a String array. No match will return null. If no groups are specified in the regexp, but the sequence matches, an array of length one (with the matched text as the first element of the array) will be returned. - -To use the function, first check to see if the result is null. If the result is null, then the sequence did not match. If the sequence did match, an array is returned. If there are groups (specified by sets of parentheses) in the regexp, then the contents of each will be returned in the array. Element [0] of a regexp match returns the entire matching string, and the match groups start at element [1] (the first group is [1], the second [2], and so on). -The syntax can be found in the reference for Java's Pattern class. For regular expression syntax, read the Java Tutorial on the topic. |
- ||||
| Syntax | -match(str,regexp) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String[] | -||||
| Usage | -Web & Application | - -||||
| Related | -matchAll() - split() - splitToken() - trim() - join() |
-
| Name | - -max() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - -int a = max(5, 9); // Sets "a" to 9 - -int b = max(-4, -12); // Sets "b" to -4 - -float c = max(12.3, 230.24); // Sets "c" to 230.24 int[] list = { 9, -4, 230.24 };
-
-int h = max(list); // Sets "h" to 230.24 |
-
- ||||||||
| Description | - -Determines the largest value in a sequence of numbers. | - -||||||||
| Syntax | - -max(value1, value2) - -max(value1, value2, value 3) - -max(array) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -min() |
-
-
| Name | - -millis() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw() {
-
- float m = millis();
-
- fill(m % 255);
-
- rect(25, 25, 50, 50);
-
-} |
-
- ||
| Description | - - - -Returns the number of milliseconds (thousandths of a second) since starting an applet. This information is often used for timing animation sequences. | - -||
| Syntax | - -millis() |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- second() - - minute() - - hour() - - day() - - month() - - year() - - |
-
-
| Name | - -min() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - -int d = min(5, 9); // Sets "d" to 5 - -int e = min(-4, -12); // Sets "e" to -12 - -float f = min(12.3, 230.24); // Sets "f" to 12.3 int[] list = { 5, 1, 2, -3 };
-
-int h = min(list); // Sets "h" to -3 |
-
- ||||||||
| Description | - -Determines the smallest value in a sequence of numbers. | - -||||||||
| Syntax | - -min(value1, value2) - -min(value1, value2, value 3) - -min(array) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -max() |
-
-
| Name | - -- (minus) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int c = 50 - 5; // Sets c to 45 - -int d = c - 5; // Sets d to 40 - -int e = d - 60; // Sets e to -20 int a = 5; // Sets "a" to 5 - -int b = -a; // Sets "b" to -5 - -int c = -(5 + 3); // Sets "c" to -8 |
-
- ||||
| Description | - -Subtracts one value from another and may also be used to negate a value. As a subtraction operator, the value of the second parameter is subtracted from the first. For example, 5 - 3 yields the number 2. As a negation operator, it is equivalent to multiplying a number by -1. For example, -5 is the same as 5 * -1. | - -||||
| Syntax | - --value1value1 - value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - --- (decrement) - - -= (subtract assign) - - + (add) |
-
-
| Name | - -minute() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw() {
-
- background(204);
-
- int s = second(); // Values from 0 - 59
-
- int m = minute(); // Values from 0 - 59
-
- int h = hour(); // Values from 0 - 23
-
- line(s, 0, s, 33);
-
- line(m, 33, m, 66);
-
- line(h, 66, h, 100);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The minute() function returns the current minute as a value from 0 - 59. | - -||
| Syntax | - -minute() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - second() - - hour() - - day() - - month() - - year() - - |
-
-
| Name | -modelX() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -void setup() {
- size(500, 500, P3D);
- noFill();
-}
-
-void draw() {
- background(0);
-
- pushMatrix();
- // start at the middle of the screen
- translate(width/2, height/2, -200);
- // some random rotation to make things interesting
- rotateY(1.0); //yrot);
- rotateZ(2.0); //zrot);
- // rotate in X a little more each frame
- rotateX(frameCount / 100.0);
- // offset from center
- translate(0, 150, 0);
-
- // draw a white box outline at (0, 0, 0)
- stroke(255);
- box(50);
-
- // the box was drawn at (0, 0, 0), store that location
- float x = modelX(0, 0, 0);
- float y = modelY(0, 0, 0);
- float z = modelZ(0, 0, 0);
- // clear out all the transformations
- popMatrix();
-
- // draw another box at the same (x, y, z) coordinate as the other
- pushMatrix();
- translate(x, y, z);
- stroke(255, 0, 0);
- box(50);
- popMatrix();
-}
- |
- ||||||
| Description | - -Returns the three-dimensional X, Y, Z position in model space. - This returns the X value for a given coordinate based on the current set of transformations (scale, rotate, translate, etc.) - The X value can be used to place an object in space relative to the location of the original point once the transformations are no longer in use. -In the example, the modelX(), modelY(), and modelZ() methods record the location of a box in space after being placed using a series of translate and - rotate commands. After popMatrix() is called, those transformations no longer apply, but the (x, y, z) - coordinate returned by the model functions is used to place another box in the same location. |
- ||||||
| Syntax | -modelX(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -modelY() - modelZ() |
-
-
| Name | -modelY() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -void setup() {
- size(500, 500, P3D);
- noFill();
-}
-
-void draw() {
- background(0);
-
- pushMatrix();
- // start at the middle of the screen
- translate(width/2, height/2, -200);
- // some random rotation to make things interesting
- rotateY(1.0); //yrot);
- rotateZ(2.0); //zrot);
- // rotate in X a little more each frame
- rotateX(frameCount / 100.0);
- // offset from center
- translate(0, 150, 0);
-
- // draw a white box outline at (0, 0, 0)
- stroke(255);
- box(50);
-
- // the box was drawn at (0, 0, 0), store that location
- float x = modelX(0, 0, 0);
- float y = modelY(0, 0, 0);
- float z = modelZ(0, 0, 0);
- // clear out all the transformations
- popMatrix();
-
- // draw another box at the same (x, y, z) coordinate as the other
- pushMatrix();
- translate(x, y, z);
- stroke(255, 0, 0);
- box(50);
- popMatrix();
-}
- |
- ||||||
| Description | - -Returns the three-dimensional X, Y, Z position in model space. This returns the X value for a given coordinate based on the current set of - transformations (scale, rotate, translate, etc.) The X value can be used to place an object in space relative to the location of the original point once - the transformations are no longer in use. -In the example, the modelX(), modelY(), and modelZ() methods record the location of a box in space after being placed using a series of - translate and rotate commands. After popMatrix() is called, those transformations no longer apply, but the (x, y, z) coordinate returned by the model - functions is used to place another box in the same location. |
- ||||||
| Syntax | -modelY(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -modelX() - modelZ() |
-
-
| Name | -modelZ() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -void setup() {
- size(500, 500, P3D);
- noFill();
-}
-
-void draw() {
- background(0);
-
- pushMatrix();
- // start at the middle of the screen
- translate(width/2, height/2, -200);
- // some random rotation to make things interesting
- rotateY(1.0); //yrot);
- rotateZ(2.0); //zrot);
- // rotate in X a little more each frame
- rotateX(frameCount / 100.0);
- // offset from center
- translate(0, 150, 0);
-
- // draw a white box outline at (0, 0, 0)
- stroke(255);
- box(50);
-
- // the box was drawn at (0, 0, 0), store that location
- float x = modelX(0, 0, 0);
- float y = modelY(0, 0, 0);
- float z = modelZ(0, 0, 0);
- // clear out all the transformations
- popMatrix();
-
- // draw another box at the same (x, y, z) coordinate as the other
- pushMatrix();
- translate(x, y, z);
- stroke(255, 0, 0);
- box(50);
- popMatrix();
-}
- |
- ||||||
| Description | - -Returns the three-dimensional X, Y, Z position in model space. This returns the X value for a given coordinate based on the current set of - transformations (scale, rotate, translate, etc.) The X value can be used to place an object in space relative to the location of the original point once - the transformations are no longer in use. -In the example, the modelX(), modelY(), and modelZ() methods record the location of a box in space after being placed using a series of - translate and rotate commands. After popMatrix() is called, those transformations no longer apply, but the (x, y, z) coordinate returned by the model - functions is used to place another box in the same location. |
- ||||||
| Syntax | -modelZ(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -modelX() - modelY() |
-
-
| Name | - -% (modulo) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 20%100; // Sets a to 20 - -int b = 20%100; // Sets b to 20 - -float c = 75.0%100.0; // Sets c to 75.0 - -float d = 275.0%100.0; // Sets d to 75.0 float a = 0.0;
-
-void draw() {
-
- background(204);
-
- a = (a + 0.5)%width;
-
- line(a, 0, a, height);
-
-} |
-
- ||||
| Description | - -Calculates the remainer when one number is divided by another. It is extremely useful for keeping numbers within a boundary such as keeping a shape on the screen. | - -||||
| Syntax | - -value1%value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -/ (divide) |
-
-
| Name | - -month() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void setup() {
-
- PFont metaBold;
-
- metaBold = loadFont("fonts/Meta-Bold.ttf");
-
- setFont(metaBold, 44);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- int d = day(); // Values from 1 - 31
-
- int m = month(); // Values from 1 - 12
-
- int y = year(); // 2003, 2004, 2005, etc.
-
- String s = String.valueOf(d);
-
- text(s, 10, 28);
-
- s = String.valueOf(m);
-
- text(s, 10, 56);
-
- s = String.valueOf(y);
-
- text(s, 10, 84);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The month() function returns the current month as a value from 1 - 12. | - -||
| Syntax | - -month() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - second() - - minute() - - hour() - - day() - - year() - - |
-
-
| Name | - -mouseButton |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click within the image and press
-
-// the left and right mouse buttons to
-
-// change the value of the rectangle
-
-void draw() {
-
- if (mousePressed && (mouseButton == LEFT)) {
-
- fill(0);
-
- } else if (mousePressed && (mouseButton == RIGHT)) {
-
- fill(255);
-
- } else {
-
- fill(126);
-
- }
-
- rect(25, 25, 50, 50);
-
-}// Click within the image and press
-
-// the left and right mouse buttons to
-
-// change the value of the rectangle
-
-void draw() {
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mousePressed() {
-
- if (mouseButton == LEFT) {
-
- fill(0);
-
- } else if (mouseButton == RIGHT) {
-
- fill(255);
-
- } else {
-
- fill(126);
-
- }
-
-} |
-
- ||
| Description | - -Processing automatically tracks if the mouse button is pressed and which button is pressed. The value of the system variable mouseButton is either LEFT, RIGHT, or CENTER depending on which button is pressed. | - - - -||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseX - - mouseY - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -mouseClicked() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click within the image to change
-
-// the value of the rectangle after
-
-// after the mouse has been clicked
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mouseClicked() {
-
- if(value == 0) {
-
- value = 255;
-
- } else {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The mouseClicked() function is called once after a mouse button has been pressed and then released. | - -||
| Syntax | - -mouseClicked() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -mouseDragged() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Drag (click and hold) your mouse across the
-
-// image to change the value of the rectangle
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mouseDragged()
-
-{
-
- value = value + 5;
-
- if (value > 255) {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The mouseDragged() function is called once every time the mouse moves and a mouse button is pressed. | - -||
| Syntax | - -void mouseDragged() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - |
-
-
| Name | - -mouseMoved() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Move the mouse across the image
-
-// to change its value
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mouseMoved() {
-
- value = value + 5;
-
- if (value > 255) {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. | - -||
| Syntax | - -void mouseMoved() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseDragged() |
-
-
| Name | - -mouseOut() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Moving the mouse into and out of the canvas
-
-// changes the background color
-
-
-
-void setup() {
-
- size(200,200);
-
- background(10);
-
-}
-
-
-
-void draw() {}
-
-
-
-void mouseOver() {
-
- background(50,80,140);
-
-}
-
-
-
-void mouseOut() {
-
- background(140,50,80);
-
-} |
-
- ||
| Description | - - - -The mouseOut() function is called when the mouse pointer leaves a sketch. | - -||
| Syntax | - -mouseOut(){ // statements } |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web | - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseOver() - - mouseScrolled() - - mouseScroll() - - mouseDragged() - - |
-
-
| Name | - -mouseOver() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Moving the mouse into and out of the canvas
-
-// changes the background color
-
-
-
-void setup() {
-
- size(200,200);
-
- background(10);
-
-}
-
-
-
-void draw() {}
-
-
-
-void mouseOver() {
-
- background(50,80,140);
-
-}
-
-
-
-void mouseOut() {
-
- background(140,50,80);
-
-} |
-
- ||
| Description | - - - -The mouseOver() function is called when the mouse pointer moves over the sketch. | - -||
| Syntax | - -mouseOver() { //statements } |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web | - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseOut() - - mouseScrolled() - - mouseScroll() - - mouseDragged() - - |
-
-
| Name | - -mousePressed |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click within the image to change
-
-// the value of the rectangle
-
-void draw() {
-
- if (mousePressed == true) {
-
- fill(0);
-
- } else {
-
- fill(255);
-
- }
-
- rect(25, 25, 50, 50);
-
-} |
-
- ||
| Description | - - - -Variable storing if a mouse button is pressed. The value of the system variable mousePressed is true if a mouse button is pressed and false if a button is not pressed. | - -||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -mousePressed() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click within the image to change
-
-// the value of the rectangle
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mousePressed() {
-
- if(value == 0) {
-
- value = 255;
-
- } else {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used used to determine which button has been pressed. | - -||
| Syntax | - - - -void mousePressed() {
-
- statements
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
-
-
| Name | - -mouseReleased() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Click within the image to change
-
-// the value of the rectangle
-
-
-
-int value = 0;
-
-
-
-void draw() {
-
- fill(value);
-
- rect(25, 25, 50, 50);
-
-}
-
-
-
-void mouseReleased() {
-
- if(value == 0) {
-
- value = 255;
-
- } else {
-
- value = 0;
-
- }
-
-} |
-
- ||
| Description | - - - -The mouseReleased() function is called every time a mouse button is released. | - -||
| Syntax | - -void mouseReleased() {
-
- statements
-
-
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -mouseX |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw()
-
-{
-
- background(204);
-
- line(mouseX, 20, mouseX, 80);
-
-} |
-
- ||
| Description | - - - -The system variable mouseX always contains the current horizontal coordinate of the mouse. | - -||
| Syntax | - -mouseX |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -mouseY |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw()
-
-{
-
- background(204);
-
- line(20, mouseY, 80, mouseY);
-
-} |
-
- ||
| Description | - - - -The system variable mouseY always contains the current vertical coordinate of the mouse. | - -||
| Syntax | - -mouseY |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- mouseX - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -/* */ (multiline comment) |
-
- ||
|---|---|---|---|
| Examples | - - - -/* - - Draws two lines which divides the window - - into four quadrants. First draws a horizontal - - line and then the vertical line - -*/ - -line(0, 50, 100, 50); - -line(50, 0, 50, 100); |
-
- ||
| Description | - -Explanatory notes embedded within the code. Comments are used to remind yourself and to inform others about the function of your program. Multiline comments are used for large text descriptions of code or to comment out chunks of code while debugging applications. Comments are ignored by the compiler | - -||
| Syntax | - -/* - - comment - -*/ |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -// (comment)
-
- /** */ (doc comment) |
-
-
| Name | - -*= (multiply assign) |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -int a = 5; - -int b = 2; - -a *= b; // sets "a" to 10 |
-
- ||||
| Description | - -Combines multiplication with assignment. The expression a *= b is equivalent to a = a * b. | - - - -||||
| Syntax | - -value1 *= value2 |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -
-
- = (assign) - - * (multiply) - - |
-
-
| Name | - -* (multiply) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int e = 50 * 5; // Sets e to 250 - -int f = e * 5; // Sets f to 1250 |
-
- ||||
| Description | - - - -Multiplies the values of the two parameters. Multiplication is equivalent to a sequence of addition. For example 5 * 4 is equivalent to 5 + 5 + 5 + 5. | - -||||
| Syntax | - -value1 * value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -+ (add) - - / (divide) |
-
-
| Name | - -new |
-
-
|---|---|
| Examples | - - - -HLine h1 = new HLine();
-
-float[] speeds = new float[3];
-
-float ypos;
-
-
-
-void setup() {
-
- size(200, 200);
-
- speeds[0] = 0.1;
-
- speeds[1] = 2.0;
-
- speeds[2] = 0.5;
-
-}
-
-
-
-void draw() {
-
- ypos += speeds[int(random(3))];
-
- if (ypos > width) {
-
- ypos = 0;
-
- }
-
- h1.update(ypos);
-
-}
-
-
-
-class HLine {
-
- void update(float y) {
-
- line(0, y, width, y);
-
- }
-
-} |
-
-
| Description | - -Creates a "new" object. The keyword new is typically used similarly to the applications in the above example. In this example, a new object "h1" of the datatype "HLine" is created. On the following line, a new array of floats called "speeds" is created. | - - - -
| Usage | - -Web & Application | - -
| Name | - -nf() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - -int a=200, b=40, c=90; - -String sa = nf(a, 10); - -println(sa); // prints "0000000200" - -String sb = nf(b, 5); - -println(sb); // prints "00040" - -String sc = nf(c, 3); - -println(sc); // prints "090" - - - -float d = 200.94, e = 40.2, f = 9.012; - -String sd = nf(d, 10, 4); - -println(sd); // prints "0000000200.9400" - -String se = nf(e, 5, 3); - -println(se); // prints "00040.200" - -String sf = nf(f, 3, 5); - -println(sf); // prints "009.01200" |
-
- ||||||||||
| Description | - -Utility function for formatting numbers into strings. There are two versions, one for formatting floats and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. As shown in the above example, nf() is used to add zeros to the left and/or right of a number. This is typically for aligning a list of numbers. To remove digits from a floating-point number, use the int(), ceil(), floor(), or round() functions. |
-
-
-
- ||||||||||
| Syntax | - -nf(intValue, digits) - -nf(floatValue, left, right) |
-
-
-
- ||||||||||
| Parameters | - -
|
-
- ||||||||||
| Returns | - - - -String or String[] | - -||||||||||
| Usage | - -Web & Application | - -||||||||||
| Related |
-
- nfs() - - nfp() - - nfc() |
-
-
| Name | -nfc() |
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -int i = 500000; -String si = nfc(i); -println(si); // Prints "500,000" -float f = 42525.34343; -String fi = nfc(f, 2); -println(fi); // Prints "42,525.34" |
- ||||||
| Description | -Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. - There are two versions, one for formatting ints and one for formatting an array of ints. - The value for the digits parameter should always be a positive integer. | - -||||||
| Syntax | -nfc(intValue) - nfc(floatValue, right) |
-
- ||||||
| Parameters | -
|
- ||||||
| Returns | - -String or String[] | -||||||
| Usage | -Web & Application | -||||||
| Related |
- nf() - nfs() - nfp() |
-
| Name | -nfp() |
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - --int a=200, b=-40, c=90; -String sa = nfp(a, 10); -println(sa); // prints "+0000000200" -String sb = nfp(b, 5); -println(sb); // prints "-00040" -String sc = nfp(c, 3); -println(sc); // prints "+090" - -float d = -200.94, e = 40.2, f = -9.012; -String sd = nfp(d, 10, 4); -println(sd); // prints "-0000000200.9400" -String se = nfp(e, 5, 3); -println(se); // prints "+00040.200" -String sf = nfp(f, 3, 5); -println(sf); // prints "-009.01200"" |
- ||||||||||
| Description | -Utility function for formatting numbers into strings. Similar to nf() but puts a "+" in front of positive numbers and a "-" in front of negative numbers. - There are two versions, one for formatting floats and one for formatting ints. - The values for the digits, left, and right parameters should always be positive integers. | - -||||||||||
| Syntax | -nfp(intValue, digits) - nfp(floatValue, left, right) |
-
- ||||||||||
| Parameters | -
|
- ||||||||||
| Returns | - -String or String[] | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related |
- nf() - nfs() - nfc() |
-
| Name | -nfs() |
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -int a=200, b=-40, c=90; -String sa = nfs(a, 10); -println(sa); // prints " 0000000200" -String sb = nfs(b, 5); -println(sb); // prints "-00040" -String sc = nfs(c, 3); -println(sc); // prints " 090" - -float d = -200.94, e = 40.2, f = -9.012; -String sd = nfs(d, 10, 4); -println(sd); // prints "-0000000200.9400" -String se = nfs(e, 5, 3); -println(se); // prints " 00040.200" -String sf = nfs(f, 3, 5); -println(sf); // prints "-009.01200" |
- ||||||||||
| Description | -Utility function for formatting numbers into strings. Similar to nf() but leaves a blank space in front of positive numbers so they align with negative numbers in spite of the minus symbol. - There are two versions, one for formatting floats and one for formatting ints. The values for the digits, left, and right parameters should always be positive integers. | - -||||||||||
| Syntax | -nfs(intValue, digits) - nfs(floatValue, left, right) |
-
- ||||||||||
| Parameters | -
|
- ||||||||||
| Returns | - -String or String[] | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related |
- nf() - nfp() - nfc() |
-
| Name | -noCursor() |
-
|---|---|
| Examples | - -
- // Move the mouse left and right across the image
-// to see the cursor change from a cross to a hand
-void draw()
-{
- if(mousePressed == true) {
- noCursor();
- } else {
- cursor(HAND);
- }
-} |
-
| Description | - -Hides the cursor from view. Will not work when running the program in a web browser. | -
| Syntax | -noCursor() |
-
| Returns | - -None | -
| Usage | - -Web & Application | -
| Related | -cursor() |
-
| Name | - -noFill() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - rect(15, 10, 55, 55); - -noFill(); - -rect(30, 20, 55, 55); |
-
- ||
| Description | - - - -Disables filling geometry. If both noStroke() and noFill() are called, nothing will be drawn to the screen. | - -||
| Syntax | - - - -noFill() |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -fill() |
-
-
| Name | -noLights() |
-
-
|---|---|
| Description | - -Disable all lighting. Lighting is turned off by default and enabled with the lights() method. - This function can be used to disable lighting so that 2D geometry (which does not require lighting) can be drawn after a set of lighted 3D geometry. |
-
| Syntax | -noLights() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -lights() | -
| Name | - -noLoop() |
-
-
|---|---|
| Examples | - - - -void setup() {
-
- size(200, 200);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- line(10, 10, 190, 190);
-
-}void setup() {
-
- size(200, 200);
-
-}
-
-
-
-float x = 0.0;
-
-
-
-void draw() {
-
- background(204);
-
- x = x + 0.1;
-
- if (x > width) {
-
- x = 0;
-
- }
-
- line(x, 0, x, height);
-
-}
-
-
-
-void mousePressed() {
-
- noLoop();
-
-}
-
-
-
-void mouseReleased() {
-
- loop();
-
-} |
-
-
| Description | - -Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begin to run continuously again. If using noLoop() in setup(), it should be the last line inside the block.
-
-
-
- - -When noLoop() is used, it's not possible to manipulate or access the screen inside event handling functions such as mousePressed() or keyPressed(). Instead, use those functions to call redraw() or loop(), which will run draw(), which can update the screen properly. This means that when noLoop() has been called, no drawing can happen, and functions like saveFrame() or loadPixels() may not be used. - - - - - -Note that if the sketch is resized, redraw() will be called to update the sketch, even after noLoop() has been specified. Otherwise, the sketch would enter an odd state until loop() was called. |
-
-
| Syntax | - -noLoop() |
-
-
| Returns | - -None | - - - -
| Usage | - -Web & Application | - -
| Related | - -loop()
-
- redraw() - - draw() |
-
-
| Name | -noSmooth() |
-
-
|---|---|
| Processing.js Behavior | -Processing.js always renders in smooth mode. This is a limitation of the HTML5 Canvas element. | -
| Examples | - background(0); -smooth(); -ellipse(70, 48, 36, 36); -noSmooth(); -ellipse(30, 48, 36, 36);- |
-
| Description | - -Draws all geometry with jagged (aliased) edges. | -
| Syntax | -noSmooth() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -smooth() |
-
-
| Name | - -noStroke() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -rect(30, 20, 55, 55); |
-
- ||
| Description | - - - -Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen. | - -||
| Syntax | - - - -noStroke() |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - - - -||
| Related | - -stroke() |
-
-
| Name | -noTint() |
-
-
|---|---|
| Examples | - // @pjs preload must be used to preload the image
- /* @pjs preload="laDefense.jpg"; */
- PImage b;
-b = loadImage("laDefense.jpg");
-tint(0, 153, 204); // Tint blue
-image(b, 0, 0);
-noTint(); // Disable tint
-image(b, 50, 0); |
-
| Description | - -Removes the current fill value for displaying images and reverts to displaying images with their original hues. |
-
| Syntax | -
- noTint() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -tint() - image() |
-
| Name | -noiseDetail() |
-
- ||||
|---|---|---|---|---|---|
| Examples | -float noiseVal;
-float noiseScale=0.02;
-void draw() {
- for(int y = 0; y < height; y++) {
- for(int x = 0; x < width/2; x++) {
- noiseDetail(3,0.5);
- noiseVal = noise(
- (mouseX+x) * noiseScale,
- (mouseY+y) * noiseScale
- );
- stroke(noiseVal*255);
- point(x,y);
- noiseDetail(8,0.65);
- noiseVal=noise(
- (mouseX + x + width/2) * noiseScale,
- (mouseY + y) * noiseScale
- );
- stroke(noiseVal * 255);
- point(x + width/2, y);
- }
- }
-} |
- ||||
| Description | -Adjusts the character and level of detail produced by the Perlin noise function. Similar to harmonics in physics, - noise is computed over several octaves. Lower octaves contribute more to the output signal and as such define the overal intensity of the noise, whereas higher - octaves create finer grained details in the noise sequence. By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, - starting at 50% strength for the 1st octave. This falloff amount can be changed by adding an additional function parameter. Eg. a falloff factor of 0.75 means each octave - will now have 75% impact (25% less) of the previous lower octave. Any value between 0.0 and 1.0 is valid, however note that values greater than 0.5 might result - in greater than 1.0 values returned by noise(). -By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics. |
-
- ||||
| Syntax | -noiseDetail(octaves); - noiseDetail(octaves,falloff); |
- ||||
| Parameters | -
|
- ||||
| Usage | -Web & Application | -||||
| Related | - -noise() |
-
| Name | -noiseSeed() |
-
- ||
|---|---|---|---|
| Examples | -float xoff = 0.0;
-
-void setup() {
- noiseSeed(0);
- stroke(0, 10);
-}
-
-void draw()
-{
- xoff = xoff + .01;
- float n = noise(xoff) * width;
- line(n, 0, n, height);
-} |
- ||
| Description | -Sets the seed value for noise(). By default, noise() produces different results each time the program is run. - Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run. |
-
- ||
| Syntax | -noiseSeed(value); |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | - -noise() - noiseDetail() - random() |
-
| Name | - -noise() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -float xoff = 0.0;
-
-void draw()
-
-{
-
- background(204);
-
- xoff = xoff + .01;
-
- float n = noise(xoff) * width;
-
- line(n, 0, n, height);
-
-}float noiseScale=0.02;
-
-void draw() {
-
- background(0);
-
- for(int x=0; x < width; x++) {
-
- float noiseVal = noise((mouseX+x)*noiseScale,
-
- mouseY*noiseScale);
-
- stroke(noiseVal*255);
-
- line(x, mouseY+noiseVal*80, x, height);
-
- }
-
-} |
-
- ||||||
| Description | - -Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function. It was invented by Ken Perlin in the 1980s and been used since in graphical applications to produce procedural textures, natural motion, shapes, terrains etc. The main difference to the random() function is that Perlin noise is defined in an infinite n-dimensional space where each pair of coordinates corresponds to a fixed semi-random value (fixed only for the lifespan of the program). The resulting value will always be between 0.0 and 1.0. Processing can compute 1D, 2D and 3D noise, depending on the number of coordinates given. The noise value can be animated by moving through the noise space as demonstrated in the example above. The 2nd and 3rd dimension can also be interpreted as time. The actual noise is structured similar to an audio signal, in respect to the function's use of frequencies. Similar to the concept of harmonics in physics, perlin noise is computed over several octaves which are added together for the final result. Another way to adjust the character of the resulting sequence is the scale of the input coordinates. As the function works within an infinite space the value of the coordinates doesn't matter as such, only the distance between successive coordinates does (eg. when using noise() within a loop). As a general rule the smaller the difference between coordinates, the smoother the resulting noise sequence will be. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use. |
-
-
-
- ||||||
| Syntax | - -noise(x) - -noise(x, y) - -noise(x, y, z) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -
-
- noiseDetail() - - random() |
-
-
| Name | - -norm() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -float value = 20; - -float n = norm(value, 0, 50); - -println(n); // prints "0.4" |
-
- ||||||
| Description | - - - -Normalizes a number from another range into a value between 0 and 1.
-
- - -Identical to map(value, low, high, 0, 1); - - - -Numbers outside the range are not clamped to 0 and 1, because - -out-of-range values are often intentional and useful. |
-
- ||||||
| Syntax | - -norm(value, low, high) |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -map() - - lerp() |
-
-
| Name | -normal() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Description | - -Sets the current normal vector. This is for drawing three dimensional shapes and surfaces and specifies a vector perpendicular to the surface of - the shape which determines how lighting affects it. Processing attempts to automatically assign normals to shapes, but since that's imperfect, - this is a better option when you want more control. This function is identical to glNormal3f() in OpenGL. |
- ||||||
| Syntax | -normal(nx,ny,nz) |
- ||||||
| Parameters | -
|
-
- ||||||
| Returns | -None | -||||||
| Usage | -Web & Application | -||||||
| Related | -lights() - beginShape() - endShape() |
-
| Name | - -null |
-
-
|---|---|
| Description | - - - -Special value used to signify the target is not a valid data element. In Processing, you may run across the keyword null when trying to access data which is not there. | - -
| Usage | - -Web & Application | - - - -
| Name | -online |
-
|---|---|
| Examples | - -
- if(online) { // of "if (online == true)"
- ellipse(50, 50, 60, 60);
-} else {
- line(0, 0, 100, 100);
- line(100, 0, 0, 100);
-} |
-
| Description | - -Confirms if a Processing program is running inside a web browser. This variable is "true" if the program is online and "false" if not. | -
| Syntax | - -online |
-
| Usage | - -Web | -
| Name | -ortho() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -noFill(); -ortho(0, width, 0, height, -10, 10); -translate(100, 100, 0); -rotateX(-PI/6); -rotateY(PI/3); -box(45); |
- ||||||||||||
| Description | - -Sets an orthographic projection and defines a parallel clipping volume. - All objects with the same dimension appear the same size, regardless of whether they are near or far from the camera. - The parameters to this function specify the clipping volume where left and right are the minimum and maximum x values, - top and bottom are the minimum and maximum y values, and near and far are the minimum and maximum z values. - If no parameters are given, the default is used: ortho(0, width, 0, height, -10, 10). |
- ||||||||||||
| Syntax | -ortho()- ortho(left, right, bottom,top, near,far) |
- ||||||||||||
| Parameters | - -
|
- ||||||||||||
| Returns | -None | -||||||||||||
| Usage | -Web & Application | -
| Name | - -() (parentheses) |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - -int a;
-
-a = (4 + 3) * 2; // Grouping expressions
-
-if (a > 10) { // Containing expressions
-
- line(a, 0, a, 100); // Containing a list of parameters
-
-} |
-
- ||||||||
| Description | - -Grouping and containing expressions and parameters. Parentheses have multiple functions relating to functions and structures. They are used to contain a list of parameters passed to functions and control structures and they are used to group expressions to control the order of execution. Some functions have no parameters and in this case, the space between parentheses is blank. | - -||||||||
| Syntax | - -function() - -function(p1, ..., pN) - -structure(expression) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -, (comma) |
-
-
| Name | -/* @pjs pauseOnBlur */ directive |
- ||
|---|---|---|---|
| Examples | - -/* @pjs pauseOnBlur="true"; */
-
-void setup()
-{
- size(200,200);
- background(255);
- frameRate(45);
-}
-
-float value = 0;
-boolean forward = true;
-
-/**
- * This animation draws a sinewave, but only when the page this sketch
- * is loaded on has focus. If the user alt-tabs to some other program,
- * or they look at a different browser instance or tab, this sketch will
- * be paused until the page it is loaded on regains focus.
- */
-void draw()
-{
- value += forward ? 2*PI/25 : -2*PI/25;
- if (forward && value>=2*PI) { forward=false; }
- else if(!forward && value<=0) { forward=true; }
-
- noStroke();
- fill(255,75);
- rect(0,0,width,height);
-
- stroke(100,100,200);
- noFill();
- float c = value - PI;
- bezier(0,100, 33,100+(50*c*PI/6), 66,100+(50*c*PI/6), 100,100);
- bezier(100,100, 133,100+(50*-c*PI/6), 166,100+(50*-c*PI/6), 200,100);
-}
- |
- ||
| Description | -Animated sketches that are loaded with Processing.js will always be running, irrespective of whether the user is looking at the page that the - sketch is running on. Using this directive makes an animated sketch pause when the user is not looking at the page that the sketch is loaded on, to - free up resources. The sketch is resumed only when the user focusses on the page again. - |
- ||
| Syntax | -
- - /* @pjs pauseOnBlur="true"; */ - |
-
- ||
| Parameters | -
|
-
- ||
| Usage | -Web & Application, Processing.js compatibility | -||
| Related | -- @pjs directives - | -
| Name | -perspective() |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - // Re-creates the default perspective -size(100, 100, P3D); -noFill(); -float fov = PI/3.0; -float cameraZ = (height/2.0) / tan(fov/2.0); -perspective(fov, float(width)/float(height), - cameraZ/10.0, cameraZ*10.0); -translate(50, 50, 0); -rotateX(-PI/6); -rotateY(PI/3); -box(45); |
- ||||||||
| Description | - -Sets a perspective projection applying foreshortening, making distant objects appear smaller than closer ones. - The parameters define a viewing volume with the shape of truncated pyramid. Objects near to the front of the volume appear their actual size, - while farther objects appear smaller. This projection simulates the perspective of the world more accurately than orthographic projection. - The version of perspective without parameters sets the default perspective and the version with four parameters allows the programmer to set the area precisely. - The default values are: perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) where cameraZ is ((height/2.0) / tan(PI*60.0/360.0));. |
- ||||||||
| Syntax | -perspective()- perspective(fov, aspect, zNear,zFar) |
- ||||||||
| Parameters | - -
|
- ||||||||
| Returns | -None | -||||||||
| Usage | -Web & Application | -
| Name | - -pixels[] |
-
-
-
- ||
|---|---|---|---|
| Examples | - - color pink = color(255, 102, 204);
-
-loadPixels();
-
-for (int i = 0; i < (width*height/2)-width/2; i++) {
-
- pixels[i] = pink;
-
-}
-
-updatePixels(); |
-
- ||
| Description | - -Array containing the values for all the pixels in the display window. These values are of the color datatype. This array is the size of the display window. For example, if the image is 100x100 pixels, there will be 10000 values and if the window is 200x300 pixels, there will be 60000 values. The index value defines the position of a value within the array. For example, the statment color b = pixels[230] will set the variable b to be equal to the value at that location in the array. Before accessing this array, the data must loaded with the loadPixels() functions. After the array data has been modified, the updatePixels() function must be loaded to update the changes. Without loadPixels(), running the code may (or will in future releases) result in a NullPointerException. |
-
-
-
- ||
| Syntax | - -pixels[index] |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- loadPixels() - - updatePixels() - - get() - - set() - - |
-
-
| Name | -/* @pjs */ directives |
-
|---|---|
| Examples | - -A single directive: |
-
| Description | -As Processing.js offers a tighter integration between Processing sketches and webpages than the traditional applet approach, certain - functions that are normally regulated by Processing are left to be handled by the browser. This approach means that certain behaviour that is - expected from a sketch may not work without additional "outside the sketch" instructions, for which /* @pjs */ directives must be used. There - are two types of directives: directives that tell Processing.js to buffer data that must be available to a sketch when it is run (preload, - font), and directives that tell Processing.js how to behave once the sketch is running (crisp, - globalKeyEvents, pauseOnBlur). -These directives are in block comment syntax so that they do not interfere with a sketch when it runs as native Processing, but if you do not wish - to pollute your source with @pjs directives, you can also store your directives in a separate file, and only call this file on your page: -directives.pde: -/* @pjs crisp="true"; pauseOnBlur="true"; */ -html: -<canvas id="sketchcanvas" data-processing-sources="directives.pde mysketch.pde"></canvas> - |
-
| Syntax | -
- - -/* @pjs directive="value"; */ -Multiple directives can be on one line or on multiple lines. -Both ways require semi-colons between directives. - -/* @pjs directive_1="value"; directive_2="value"; ... */ - -/* @pjs directive_1="value"; - directive_2="value"; - ... -*/ -In Javascript-only Processing.js code you cannot use these directives. You must change the options directly on the Processing.Sketch object. See the examples below for changing these properties on variables bound to a Processing or Processing.Sketch instance: -
-var mySketch = new Processing.Sketch(
- function(p) { p.draw = function(){...}; ... }
-);
-mySketch.options.crispLines = true;
-var myProcessing = new Processing("myCanvas", mySketch);
-
-var pi = new Processing("myCanvas");
-pi.externals.sketch.options.crispLines = true;
-- NOTE: all @pjs directives, including the "@pjs" instruction, are case-sensitive. - - |
-
-
| Usage | -Web & Application, Processing.js compatibility | -
| Related | - -font
- crisp - pauseOnBlur - globalKeyEvents - preload - |
-
| Name | - -pmouseX |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Move the mouse quickly to see the difference
-
-// between the current and previous position
-
-void draw()
-
-{
-
- background(204);
-
- line(mouseX, 20, pmouseX, 80);
-
-} |
-
- ||
| Description | - - - -The system variable pmouseX always contains the previous horizontal coordinate of the mouse. This is the horizontal position of the mouse in the frame previous to the current frame. | - -||
| Syntax | - -pmouseX |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- pmouseY - - mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | - -pmouseY |
-
-
-
- ||
|---|---|---|---|
| Examples | - -// Move the mouse quickly to see the difference
-
-// between the current and previous position
-
-void draw()
-
-{
-
- background(204);
-
- line(20, mouseY, 80, pmouseY);
-
-} |
-
- ||
| Description | - - - -The system variable pmouseY always contains the previous vertical coordinate of the mouse. This is the vertical position of the mouse in the frame previous to the current frame. | - -||
| Syntax | - -pmouseY |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -
-
- pmouseX - - mouseX - - mouseY - - mouseButton - - mousePressed() - - mouseReleased() - - mouseMoved() - - mouseDragged() - - |
-
-
| Name | -pointLight() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -pointLight(51, 102, 126, 35, 40, 36); -translate(80, 50, 0); -sphere(30); |
- ||||||||||||
| Description | - -Adds a point light. Lights need to be included in the draw() to remain persistent in a looping program. - Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. - The affect of the v1, v2, and v3 parameters is determined by the current color mode. The x, y, and z - parameters set the position of the light. |
- ||||||||||||
| Syntax | -pointLight(v1,v2,v3,nx,ny,nz) |
- ||||||||||||
| Parameters | -
|
-
- ||||||||||||
| Returns | -None | -||||||||||||
| Usage | -Web & Application | -||||||||||||
| Related | -lights() - ambientLight() - directionalLight() - spotLight() |
-
| Name | - -point() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - point(30, 20); - -point(85, 20); - -point(85, 75); - -point(30, 75);  size(100, 100, P3D); - -point(30, 20, -50); - -point(85, 20, -50); - -point(85, 75, -50); - -point(30, 75, -50); |
-
- ||||||
| Description | - -Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point, and the optional third value is the depth value. Drawing this shape in 3D using the z parameter requires the P3D or OPENGL parameter in combination with size as shown in the above example. | - -||||||
| Syntax | - - - -point(x, y)
-
-point(x, y, z) |
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - -||||||
| Related | - -beginShape() |
-
-
| Name | - -popMatrix() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - rect(0, 0, 50, 50); //White rectangle - -pushMatrix(); - -translate(30, 20); - -fill(0); - -rect(0, 0, 50, 50); //Black rectangle - -popMatrix(); - -fill(102); - -rect(15, 10, 50, 50); //Gray rectangle |
-
- ||
| Description | - - - -Pops the current transformation matrix off the matrix stack. Understanding pushing and popping requires understanding the concept of a matrix stack. The pushMatrix() function saves the current coordinate system to the stack and popMatrix() restores the prior coordinate system. pushMatrix() and popMatrix() are used in conjuction with the other transformation methods and may be embedded to control the scope of the transformations. | - -||
| Syntax | - -popMatrix() |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -pushMatrix() |
-
-
| Name | -popStyle() |
-
-
|---|---|
| Examples | - smooth(); -ellipse(0, 50, 33, 33); // Left -pushStyle(); // Start a new style -strokeWeight(10); -fill(204, 153, 0); -ellipse(50, 50, 33, 33); // Middle -popStyle(); // Restore original style -ellipse(100, 50, 33, 33); // Right  smooth(); -ellipse(0, 50, 33, 33); // Left -pushStyle(); // Start a new style -strokeWeight(10); -fill(204, 153, 0); -ellipse(33, 50, 33, 33); // Left-Middle -pushStyle(); // Start another new style -stroke(0, 102, 153); -ellipse(66, 50, 33, 33); // Right-Middle -popStyle(); // Restore the previous style -popStyle(); // Restore original style -ellipse(100, 50, 33, 33); // Right |
-
-
| Description | -The pushStyle() function saves the current style settings and popStyle() restores the prior settings; these functions are always used together. - They allow you to change the style settings and later return to what you had. When a new style is started with pushStyle(), it builds on the current style information. - The pushStyle() and popStyle() functions can be embedded to provide more control (see the second example above for a demonstration.) | - -
| Syntax | -popStyle() |
-
-
| Returns | -None | - -
| Usage | -Web & Application | - -
| Related | -pushStyle() | - -
| Name | - -pow() |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -float a = pow( 1, 3); // Sets "a" to 1*1*1 = 1 - -float b = pow( 3, 5); // Sets "b" to 3*3*3*3*3 = 243 - -float c = pow( 3,-5); // Sets "c" to 1 / 3*3*3*3*3 = 1 / 243 = .0041 - -float d = pow(-3, 5); // Sets "d" to -3*-3*-3*-3*-3 = -243 |
-
- ||||
| Description | - - - -Facilitates exponential expressions. The pow() function is an efficient way of multiplying numbers by themselves (or their reciprocal) in large quantities. For example, pow(3, 5) is equivalent to the expression 3*3*3*3*3 and pow(3, -5) is equivalent to 1 / 3*3*3*3*3. | - -||||
| Syntax | - -pow(num, exponent) |
-
- ||||
| Parameters | - - - -
|
-
- ||||
| Usage | - -Web & Application | - - - -||||
| Related | - -sqrt() |
-
-
| Name | -/* @pjs preload */ directive |
- ||
|---|---|---|---|
| Examples | - -/* @pjs preload="myimage.jpg"; */
-
-void setup()
-{
- size(200,200);
- noLoop();
-}
-
-void draw()
-{
- background(255);
- PImage im = loadImage("myimage.jpg");
- image(im, 50,50, 100,100);
-}
- |
- ||
| Description | -This directive regulates image preloading, which is required when using loadImage() or requestImage() in a sketch. - Using this directive will preload all images indicated between quotes, and comma separated if multiple images are used, so that they will be ready - for use when the sketch begins running. As resources are loaded via the AJAX approach, not using this directive will result in the sketch loading - an image, and then immediately trying to use this image in some way, even though the browser has not finished downloading and caching it. Images - can be preloaded from URL, such as "image1.jpg". While - all browser-supported image formats are supported by processing.js, it is best to stick to "gif", "jpg" and "png" formats if you intend your - sketch to be cross-platform compatible with native Processing. -NOTE: remote images can be drawn, but their pixels cannot be manipulated due to browser security restrictions. -NOTE: this directive is for images only. For preloading fonts, use the font directive listed below. - |
- ||
| Syntax | -
- - /* @pjs preload="imageURL"; */ |
-
- ||
| Syntax for multiple images | -
- - /* @pjs preload="image1,image2,..."; */ - |
- ||
| Parameters | -
|
-
- ||
| Usage | -Web & Application, Processing.js compatibility | -||
| Related | -
- @pjs directives
- loadImage() - requestImage() - |
-
| Name | -printCamera() |
-
-
|---|---|
| Examples | -size(100, 100, P3D); -printCamera(); - -// The program above prints this data: - -// 01.0000 00.0000 00.0000 -50.0000 -// 00.0000 01.0000 00.0000 -50.0000 -// 00.0000 00.0000 01.0000 -86.6025 -// 00.0000 00.0000 00.0000 01.0000 |
-
| Description | - -Prints the current camera matrix to the text window. |
-
| Syntax | -printCamera() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -camera() | -
| Name | -printMatrix() |
-
-
|---|---|
| Examples | -size(100, 100, P3D); -printMatrix(); -// Prints: -// 01.0000 00.0000 00.0000 -50.0000 -// 00.0000 01.0000 00.0000 -50.0000 -// 00.0000 00.0000 01.0000 -86.6025 -// 00.0000 00.0000 00.0000 01.0000 - -resetMatrix(); -printMatrix(); -// Prints: -// 1.0000 0.0000 0.0000 0.0000 -// 0.0000 1.0000 0.0000 0.0000 -// 0.0000 0.0000 1.0000 0.0000 -// 0.0000 0.0000 0.0000 1.0000 |
-
| Description | - -Prints the current matrix to the text window. |
-
| Syntax | -printMatrix() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -pushMatrix() - popMatrix() - resetMatrix() - applyMatrix() |
-
| Name | -printProjection() |
-
-
|---|---|
| Examples | -size(100, 100, P3D); -printProjection(); - -// The program above prints this data: -// 01.7321 00.0000 00.0000 00.0000 -// 00.0000 01.7321 00.0000 00.0000 -// 00.0000 00.0000 -01.0202 -17.4955 -// 00.0000 00.0000 -01.0000 00.0000 |
-
| Description | - -Prints the current projection matrix to the text window. |
-
| Syntax | -printProjection() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -camera() | -
| Name | - -print() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -print("begin- ");
-
-float f = 0.3;
-
-int i = 1024;
-
-print("f is " + f + " and i is " + 1024);
-
-String s = " -end";
-
-println(s);
-
-
-
-// The above code prints:
-
-// begin- f is 0.3 and i is 1024 -end |
-
- ||
| Description | - - - -Writes to the console area of the Processing environment. This is often helpful for looking at the data a program is producing. The companion function println() works like print(), but creates a new line of text for each call to the function. Individual elements can be separated with quotes ("") and joined with the addition operator (+).
-
- - -Beginning with release 0125, to print the contents of an array, use println(). |
-
- ||
| Syntax | - - - -print(data) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -IDE | - -||
| Related | - -println() |
-
-
| Name | - -println() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -println("begin");
-
-float f = 0.3;
-
-println("f is equal to " + f + " and i is equal to " + 1024);
-
-String s = "end";
-
-println(s);
-
-
-
-// The above code prints the following lines:
-
-// begin
-
-// f is equal to 0.3 and i is equal to 1024
-
-// endfloat[] f = { 0.3, 0.4, 0.5 };
-
-println(f);
-
-
-
-// The above code prints:
-
-// 0.3
-
-// 0.4
-
-// 0.5 |
-
- ||
| Description | - -Writes to the text area of the Processing environment's console. This is often helpful for looking at the data a program is producing. Each call to this function creates a new line of output. Individual elements can be separated with quotes ("") and joined with the string concatenation operator (+). Also writes the content of an array to the text area of the Processing environment. This is often helpful for looking at the data a program is producing. A new line is put between each element of the array. This function can only print 1D arrays, but can test to see if the content are null or not null for 2+ dimensional arrays. | - -||
| Syntax | - -println(data) |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -IDE | - -||
| Related | - -print() |
-
-
| Name | -private |
-
-
|---|---|
| Description | -Keyword used to disallow other classes access the fields and methods within a class. - The private keyword is used before a field or method that you want to be available only within the class. - In Processing, all fields and methods are public unless otherwise specified by the private keyword. - This keyword is an essential part of Java programming and is not usually used with Processing. Consult a Java language reference or tutorial for more information. |
-
-
| Returns | -None | - -
| Usage | -Web & Application | - -
| Related | -public | - -
| Name | - -public |
-
-
|---|---|
| Description | - - - -Keyword used to provide other classes access the fields and methods within a class. The public keyword is used before a field or method that you want to make available. In Processing, all fields and methods are public unless otherwise specified by the private keyword. - -This keyword is an essential part of Java programming and is not usually used with Processing. Consult a Java language reference or tutorial for more information. |
-
-
| Usage | - - - -Web & Application | - -
| Related | - -private |
-
-
| Name | - -pushMatrix() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - rect(0, 0, 50, 50); //White rectangle - -pushMatrix(); - -translate(30, 20); - -fill(0); - -rect(0, 0, 50, 50); //Black rectangle - -popMatrix(); - -fill(102); - -rect(15, 10, 50, 50); //Gray rectangle |
-
- ||
| Description | - - - -Pushes the current transformation matrix onto the matrix stack. Understanding pushMatrix() and popMatrix() requires understanding the concept of a matrix stack. The pushMatrix() function saves the current coordinate system to the stack and popMatrix() restores the prior coordinate system. pushMatrix() and popMatrix() are used in conjuction with the other transformation methods and may be embedded to control the scope of the transformations. | - - - -||
| Syntax | - -pushMatrix() |
-
- ||
| Parameters | - - - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -
-
- popMatrix() - - translate() - - rotate() - - rotateX() - - rotateY() - - rotateZ() - - |
-
-
-
-
| Name | -pushStyle() |
-
-
|---|---|
| Examples | -smooth(); -ellipse(0, 50, 33, 33); // Left -pushStyle(); // Start a new style -strokeWeight(10); -fill(204, 153, 0); -ellipse(50, 50, 33, 33); // Middle -popStyle(); // Restore original style -ellipse(100, 50, 33, 33); // Right smooth(); -ellipse(0, 50, 33, 33); // Left -pushStyle(); // Start a new style -strokeWeight(10); -fill(204, 153, 0); -ellipse(33, 50, 33, 33); // Left-Middle -pushStyle(); // Start another new style -stroke(0, 102, 153); -ellipse(66, 50, 33, 33); // Right-Middle -popStyle(); // Restore the previous style -popStyle(); // Restore original style -ellipse(100, 50, 33, 33); // Right |
-
-
| Description | -The pushStyle() function saves the current style settings and popStyle() restores the prior settings; these functions are always used together. - They allow you to change the style settings and later return to what you had. When a new style is started with pushStyle(), it builds on the current style information. - The pushStyle() and popStyle() functions can be embedded to provide more control (see the second example above for a demonstration.) -The style information controlled by the following functions are included in the style: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), shapeMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading(), emissive(), specular(), shininess(), ambient() |
-
-
| Syntax | -pushStyle() |
-
-
| Returns | -None | - -
| Usage | -Web & Application | - -
| Related | -popStyle() | - -
| Name | - -quad() |
-
- ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - - quad(38, 31, 86, 20, 69, 63, 30, 76); |
-
- ||||||||||||||||
| Description | - -A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. | - -||||||||||||||||
| Syntax | - -quad(x1, y1, x2, y2, x3, y3, x4, y4) |
-
-
-
- ||||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||||
| Returns | - -None | - - - -||||||||||||||||
| Usage | - -Web & Application | - -
| Name | - -radians() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -float deg = 45.0; - -float rad = radians(deg); - -println(deg + " degrees is " + rad + " radians"); |
-
- ||
| Description | - - - -Converts a degree measurement to its corresponding value in radians. Radians and degrees are two ways of measuring the same thing. There are 360 degrees in a circle and 2*PI radians in a circle. For example, 90° = PI/2 = 1.5707964. All trigonometric methods in Processing require their parameters to be specified in radians. | - -||
| Syntax | - -radians(angle) |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -degrees() |
-
-
| Name | -noiseSeed() |
-
- ||
|---|---|---|---|
| Examples | -randomSeed(0);
-for(int i=0; i < 100; i++) {
- float r = random(0, 255);
- stroke(r);
- line(i, 0, i, 100);
-} |
- ||
| Description | -Sets the seed value for random(). By default, random() produces different results each time the program is run. - Set the value parameter to a constant to return the same pseudo-random numbers each time the software is run. |
-
- ||
| Syntax | -noiseSeed(value); |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | - -noise() - noiseDetail() - noiseSeed() - random() |
-
| Name | - -random() |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -for(int i=0; i<100; i++) {
-
- float r = random(50);
-
- stroke(r*5);
-
- line(50, i, 50+r, i);
-
-}for(int i=0; i<100; i++) {
-
- float r = random(-50, 50);
-
- stroke(abs(r*5));
-
- line(50, i, 50+r, i);
-
-} |
-
- ||||
| Description | - -Generates random numbers. Each time the random() function is called, it returns an unexpected value within the specified range. If one parameter is passed to the function it will return a float between zero and the value of the high parameter. The function call random(5) returns values between 0 and 5. If two parameters are passed, it will return a float with a value between the the parameters. The function call random(-5, 10.2) returns values between -5 and 10.2. To convert a floating-point random number to an integer, use the int() function. | - - - -||||
| Syntax | - -random(high); - -random(low, high); |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -noise() |
-
-
| Name | - -rect() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - rect(30, 20, 55, 55); |
-
- ||||||||
| Description | - - - -Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. The first two parameters set the location, the third sets the width, and the fourth sets the height. The origin is changed with the rectMode() function. | - -||||||||
| Syntax | - -rect(x, y, width, height) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -
-
- rectMode() - - quad() |
-
-
| Name | - -rectMode() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - rectMode(CENTER); - -rect(35, 35, 50, 50); - -rectMode(CORNER); - -fill(102); - -rect(35, 35, 50, 50); |
-
- ||
| Description | - - - -Modifies the location from which rectangles draw. The default mode is rectMode(CORNER), which specifies the location to be the upper left corner of the shape and uses the third and fourth parameters of rect() to specify the width and height. The syntax rectMode(CORNERS) uses the first and second parameters of rect() to set the location of one corner and uses the third and fourth parameters to set the opposite corner. The syntax rectMode(CENTER) draws the image from its center point and uses the third and forth parameters of rect() to specify the image's width and height. The syntax rectMode(RADIUS) draws the image from its center point and uses the third and forth parameters of rect() to specify half of the image's width and height. The parameter must be written in "ALL CAPS" because Processing is a case sensitive language. Note: In version 125, the mode named CENTER_RADIUS was shortened to RADIUS. | - - - -||
| Syntax | - -rectMode(MODE) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -rect() |
-
-
| Name | - -rect() |
-
-
-
- ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -rect(30, 20, 55, 55); |
-
- ||||||||||||||||||
| Description | - - - -Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. The first two parameters set the location, the third sets the width, and the fourth sets the height. The origin is changed with the rectMode() function. | - -||||||||||||||||||
| Syntax | - -rect(x, y, width, height) - -rect(x, y, width, height, radius) - -rect(x, y, width, height, tlradius, trradius, brradius, blradius) - - |
-
-
-
- ||||||||||||||||||
| Parameters | - -
|
-
-
-
- ||||||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||||||
| Related | - -
-
- rectMode() - - quad() |
-
-
| Name | - -red() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -color c = color(0, 126, 255); - -fill(c); - -rect(15, 20, 35, 60); - -float value = red(c); // Sets "value" to "0" - -fill(value); - -rect(50, 20, 35, 60); |
-
- ||
| Description | - - - -Extracts the red value from a color, scaled to match current colorMode(). This value is always returned as a float so be careful not to assign it to an int value. The red() function is easy to use and undestand, but is slower than another technique. To achieve the same results when working in colorMode(RGB, 255), but with greater speed, use the >> (right shift) operator with a bit mask. For example, the following two lines of code are equivalent: float r1 = red(myColor); |
-
- ||
| Syntax | - - - -red(color) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -
-
- green() - - blue() - - alpha() - - >> right shift - - hue() - - saturation() - - brightness() - - |
-
-
| Name | - -redraw() |
-
-
|---|---|
| Examples | - - - -float x = 0;
-
-
-
-void setup() {
-
- size(200, 200);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- background(204);
-
- line(x, 0, x, height);
-
-}
-
-
-
-void mousePressed() {
-
- x += 1;
-
- redraw();
-
-} |
-
-
| Description | - -Executes the code within draw() one time. This functions allows the program to update the display window only when necessary, for example when an event registered by mousePressed() or keyPressed() occurs.
-
-
-
- - -In structuring a program, it only makes sense to call redraw() within events such as mousePressed(). This is because redraw() does not run draw() immediately (it only sets a flag that indicates an update is needed). - - - -Calling redraw() within draw() has no effect because draw() is continuously called anyway. |
-
-
-
-
| Syntax | - -redraw() |
-
-
| Returns | - - - -None | - -
| Usage | - -Web & Application | - -
| Related | - -noLoop()
-
- loop() |
-
-
| Name | -requestImage() |
-
- ||||
|---|---|---|---|---|---|
| Examples | -
-PImage bigImage;
-
-void setup() {
- bigImage = requestImage("something.jpg");
-}
-
-void draw() {
- if (bigImage.width == 0) {
- // Image is not yet loaded
- } else if (bigImage.width == -1) {
- // This means an error occurred during image loading
- } else {
- // Image is ready to go, draw it
- image(bigImage, 0, 0);
- }
-} |
- ||||
| Description | - -This function load images on a separate thread so that your sketch does not freeze while images load during setup(). - While the image is loading, its width and height will be 0. If an error occurs while loading the image, its width and height will be set to -1. - You'll know when the image has loaded properly because its width and height will be greater than 0. - Asynchronous image loading (particularly when downloading from a server) can dramatically improve performance. -The extension parameter is used to determine the image type in cases where the image filename does not end with a proper extension. - Specify the extension as the second parameter to requestImage(). |
- ||||
| Syntax | -
- requestImage(filename) - requestImage(filename,extension) |
- ||||
| Parameters | -
-
|
- ||||
| Returns | -PImage or null | -||||
| Usage | -Web & Application | -||||
| Related | -loadImage() - PImage |
-
| Name | -resetMatrix() |
-
-
|---|---|
| Examples | - size(100, 100, P3D); -noFill(); -box(80); -printMatrix(); -// Prints: -// 01.0000 00.0000 00.0000 -50.0000 -// 00.0000 01.0000 00.0000 -50.0000 -// 00.0000 00.0000 01.0000 -86.6025 -// 00.0000 00.0000 00.0000 01.0000 - -resetMatrix(); -box(80); -printMatrix(); -// Prints: -// 1.0000 0.0000 0.0000 0.0000 -// 0.0000 1.0000 0.0000 0.0000 -// 0.0000 0.0000 1.0000 0.0000 -// 0.0000 0.0000 0.0000 1.0000 |
-
| Description | - -Replaces the current matrix with the identity matrix. The equivalent function in OpenGL is glLoadIdentity(). |
-
| Syntax | -resetMatrix() |
-
| Returns | -None | -
| Usage | -Web & Application | -
| Related | -pushMatrix() - popMatrix() - applyMatrix() - printMatrix() |
-
| Name | - -return |
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - - -int val = 30;
-
-
-
-void draw() {
-
- int t = timestwo(val);
-
- println(t);
-
-}
-
-
-
-int timestwo(int dVal) {
-
- dVal = dVal * 2;
-
- return dVal;
-
-}int[] vals = {10, 20, 30};
-
-
-
-void draw() {
-
- int[] t = timestwo(vals);
-
- println(t);
-
- noLoop();
-
-}
-
-
-
-int[] timestwo(int[] dVals) {
-
- for(int i = 0; i dVals.length; i++) {
-
- dVals[i] = dVals[i] * 2;
-
- }
-
- return dVals;
-
-}void draw() {
-
- background(204);
-
- line(0, 0, width, height);
-
- if(mousePressed) {
-
- return;
-
- }
-
- line(0, height, width, 0);
-
-} |
-
- ||||||||
| Description | - -Keyword used to indicate the value to return from a function. The value being returned must be the same datatype as defined in the function declaration. Functions declared with void can't return values and shouldn't include a return value. The keyword return may also be used to break out of a function thus not allowing the program to read the remaining statements (see the third example above). | - - - -||||||||
| Syntax | - -type function {
-
- statements
-
- return value
-
-
-
-} |
-
- ||||||||
| Parameters | - -
|
-
- ||||||||
| Usage | - -Web & Application | - -
| Name | -reverse() |
- ||
|---|---|---|---|
| Examples | - -String sa[] = { "OH ", "NY ", "MA ", "CA "};
-sa = reverse(sa);
-print(sa); // Prints "CA MA NY OH " |
- ||
| Description | -
- Reverses the order of an array. |
- ||
| Syntax | -reverse(array) |
- ||
| Parameters | - -
|
- ||
| Returns | -Array (the same datatype as the input) | -||
| Usage | -Web & Application | - -||
| Related | -sort() | - -
| Name | - ->> (right shift) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int m = 8 >> 3; // In binary: 1000 to 1 - -println(m); // Prints "1" - -int n = 256 >> 6; // In binary: 100000000 to 100 - -println(n); // Prints "4" - -int o = 16 >> 3; // In binary: 10000 to 10 - -println(o); // Prints "2" - -int p = 26 >> 1; // In binary: 11010 to 1101 - -println(p); // Prints "13" color argb = color(204, 204, 51, 255); - -int a = argb >> 24 & 0xFF; - -int r = argb >> 16 & 0xFF; // Faster way of getting red(argb) - -int g = argb >> 8 & 0xFF; // Faster way of getting green(argb) - -int b = argb & 0xFF; // Faster way of getting blue(argb) - -fill(r, g, b, a); - -rect(30, 20, 55, 55); |
-
- ||||
| Description | - -Shifts bits to the right. The number to the left of the operator is shifted the number of places specified by the number to the right. Each shift to the right halves the number, therefore each left shift divides the original number by 2. Use the right shift for fast divisions or to extract an individual number from a packed number. Right shifting only works with integers or numbers which automatically convert to an integer such at byte and char. | - -||||
| Syntax | - - - -value >> n |
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -<< (left shift) |
-
-
| Name | -rotateX() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D); -translate(width/2, height/2); -rotateX(PI/3.0); -rect(-26, -26, 52, 52); size(100, 100, P3D); -translate(width/2, height/2); -rotateX(radians(60)); -rect(-26, -26, 52, 52); |
- ||
| Description | - -Rotates a shape around the x-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians() function. - Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. - Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. - For example, calling rotateX(PI/2) and then rotateX(PI/2) is the same as rotateX(PI). - If rotateX() is called within the draw(), the transformation is reset when the loop begins again. - This function requires passing P3D or OPENGL into the size() parameter as shown in the example above. |
- ||
| Syntax | -rotateX(angle) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -
- rotateY() - rotateZ() - rotate() - translate() - scale() - pushMatrix() - popMatrix() |
-
| Name | -rotateY() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D); -translate(width/2, height/2); -rotateY(PI/3.0); -rect(-26, -26, 52, 52); size(100, 100, P3D); -translate(width/2, height/2); -rotateY(radians(60)); -rect(-26, -26, 52, 52); |
- ||
| Description | - -Rotates a shape around the y-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians() function. - Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. - Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. - For example, calling rotateY(PI/2) and then rotateY(PI/2) is the same as rotateY(PI). - If rotateY() is called within the draw(), the transformation is reset when the loop begins again. - This function requires passing P3D or OPENGL into the size() parameter as shown in the example above. |
- ||
| Syntax | -rotateY(angle) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -
- rotateX() - rotateZ() - rotate() - translate() - scale() - pushMatrix() - popMatrix() |
-
| Name | -rotateZ() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D); -translate(width/2, height/2); -rotateZ(PI/3.0); -rect(-26, -26, 52, 52); size(100, 100, P3D); -translate(width/2, height/2); -rotateY(radians(60)); -rect(-26, -26, 52, 52); |
- ||
| Description | - -Rotates a shape around the y-axis the amount specified by the angle parameter. - Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians() function. - Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a counterclockwise direction. - Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. - For example, calling rotateZ(PI/2) and then rotateZ(PI/2) is the same as rotateZ(PI). - If rotateZ() is called within the draw(), the transformation is reset when the loop begins again. - This function requires passing P3D or OPENGL into the size() parameter as shown in the example above. |
- ||
| Syntax | -rotateZ(angle) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -
- rotateX() - rotateY() - rotate() - translate() - scale() - pushMatrix() - popMatrix() |
-
| Name | - -rotate() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - translate(width/2, height/2); - -rotate(PI/3.0); - -rect(-26, -26, 52, 52); |
-
- ||
| Description | - - - -Rotates an object the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to PI*2) or converted to radians with the radians() function. Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction with 0 radians or degrees being up and HALF_PI being to the right etc. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(PI/2) and then rotate(PI/2) is the same as rotate(PI). If rotate() is called within the draw(), the transformation is reset when the loop begins again. Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the pushMatrix() and popMatrix(). | - - - -||
| Syntax | - -rotate(angle); |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -rotateX() - - rotateY() - - rotateZ() - - translate() - - scale() - - pushMatrix() - - popMatrix() |
-
-
| Name | - -round() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -float x = 9.2; - -int rx = round(x); // Sets rx to 9 - - - -float y = 9.5; - -int ry = round(y); // Sets ry to 10 - - - -float z = 9.9; - -int rz = round(z); // Sets rz to 10 |
-
- ||
| Description | - - - -Calculates the integer closest to the value parameter. For example, round(9.2) returns the value 9. | - -||
| Syntax | - - - -round(value) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -floor() - - ceil() |
-
-
| Name | -saturation() |
-
- ||
|---|---|---|---|
| Examples | - noStroke(); -colorMode(HSB, 255); -color c = color(0, 126, 255); -fill(c); -rect(15, 20, 35, 60); -float value = saturation(c); // Sets "value" to "126" -fill(value); -rect(50, 20, 35, 60); |
- ||
| Description | - -Extracts the saturation value from a color. |
- ||
| Syntax | -
- saturation(color) |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | -red() - green() - blue() - hue() - brightness() |
-
| Name | -saveFrame() |
-
- ||||
|---|---|---|---|---|---|
| Examples | -int x = 0;
-void draw()
-{
- background(204);
- if(x < 100) {
- line(x, 0, x, 100);
- x = x + 1;
- } else {
- noLoop();
- }
- // Saves each frame as screen-0000.tif, screen-0001.tif, etc.
- saveFrame();
-}- int x = 0;
-void draw()
-{
- background(204);
- if(x < 100) {
- line(x, 0, x, 100);
- x = x + 1;
- } else {
- noLoop();
- }
- // Saves each frame as line-0000.tif, line-0001.tif, etc.
- saveFrame("line-####.tif");
-}
- |
- ||||
| Description | - -Saves a numbered sequence of images, one image each time the function is run. - To save an image that is identical to the display window, run the function at the end of draw() or within mouse and key events such as mousePressed() and - keyPressed(). If saveFrame() is called without parameters, it will save the files as screen-0000.tif, screen-0001.tif, etc. - It is possible to specify the name of the sequence with the filename parameter and make the choice of saving TIFF, TARGA, PNG, or JPEG files with the ext parameter. - These image sequences can be loaded into programs such as Apple's QuickTime software and made into movies. - These files are saved to the sketch's folder, which may be opened by selecting "Show sketch folder" from the "Sketch" menu. -All images saved from the main drawing window will be opaque. To save images without a background, use createGraphics(). |
- ||||
| Syntax | -saveFrame() - saveFrame(filename-####.ext) |
- ||||
| Parameters | -
|
- ||||
| Returns | -none | -||||
| Usage | -Application | -||||
| Related | -save() - createGraphics() |
-
-
| Name | -saveStrings() |
-
- ||||
|---|---|---|---|---|---|
| Examples | -String words = "apple bear cat dog";
-String[] list = split(words, ' ');
-
-// now write the strings to a file, each on a separate line
-saveStrings("nouns.txt", list);
- |
- ||||
| Description | - -Writes an array of strings to a file, one line per string. This file is saved to the sketch's folder, - which is opened by selecting "Show sketch folder" from the "Sketch" menu. |
- ||||
| Syntax | -saveStrings(filename,strings) |
- ||||
| Parameters | -
|
- ||||
| Returns | -None | -||||
| Usage | -Web & Application | -||||
| Related | -loadStrings() - loadBytes() - saveBytes() |
-
-
| Name | -save() |
-
- ||
|---|---|---|---|
| Examples | -line(20, 20, 80, 80);
-// Saves a TIFF file named "diagonal.tif"
-save("diagonal.tif");
-// Saves a TARGA file named "cross.tga"
-line(80, 20, 20, 80);
-save("cross.tga");
- |
- ||
| Description | - -Saves an image from the display window. Images are saved in the PNG format as a Data URI, which can be displayed in the browser in a new window. |
- ||
| Syntax | -save(filename) |
- ||
| Parameters | -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -saveFrame() - createGraphics() |
-
-
| Name | - -scale() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - rect(30, 20, 50, 50); - -scale(0.5); - -rect(30, 20, 50, 50);  rect(30, 20, 50, 50); - -scale(0.5, 1.3); - -rect(30, 20, 50, 50);  // Scaling in 3D requires P3D - -// or OPENGL as a parameter to size() - -size(100, 100, P3D); - -fill(255, 102); - -translate(width/2+12, height/2); - -box(20, 20, 20); - -scale(2.5, 2.5, 2.5); - -box(20, 20, 20); |
-
- ||||||||
| Description | - -Increasing and decreasing the size of an object by expanding and contracting vertices. Scale values are specified as decimal percentages. The function call scale(2.0) increases the dimension of a shape by 200%. Objects always scale from their relative origin to the coordinate system. Transformations apply to everything that happens after and subsequent calls to the function multiply the effect. For example, calling scale(2.0) and then scale(1.5) is the same as scale(3.0). If scale() is called within draw(), the transformation is reset when the loop begins again. Using this function with the z parameter requires passing P3D or OPENGL into the size() parameter as shown in the example above. This function can be further controlled by pushMatrix() and popMatrix(). | - - - -||||||||
| Syntax | - -scale(size);
-
-scale(x, y);
-
-scale(x, y, z); |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -rotateX() - - rotateY() - - rotateZ() - - translate() - - pushMatrix() - - popMatrix() |
-
-
| Name | -screen |
-
|---|---|
| Examples | - -
- void setup() {
- size(screen.width, screen.height);
-}
-
-void draw() {
- line(0, 0, screen.width, screen.height);
-} |
-
| Description | - -System variable which stores the dimensions of the computer screen. For example, if the current screen resolution is 1024x768, - screen.width is 1024 and screen.height is 768. - These dimensions are useful when exporting full-screen applications. - |
-
| Usage | - -Web & Application | -
| Name | -screenX() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -void setup() {
- size(100, 100, P3D);
-}
-
-void draw() {
- background(204);
-
- float x = mouseX;
- float y = mouseY;
- float z = -100;
-
- // Draw "X" at z = -100
- stroke(255);
- line(x-10, y-10, z, x+10, y+10, z);
- line(x+10, y-10, z, x-10, y+10, z);
-
- // Draw line in 2D at same x value
- // Notice the parallax
- stroke(102);
- line(x, 0, 0, x, height, 0);
-
- // Draw 2D line to match the x value
- // element drawn at z = -100
- stroke(0);
- float theX = screenX(x, y, z);
- line(theX, 0, 0, theX, height, 0);
-}
- |
- ||||||
| Description | - -Takes a three-dimensional X, Y, Z position and returns the X value for where it will appear on a (two-dimensional) screen. |
- ||||||
| Syntax | -screenX(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -screenY() - screenZ() |
-
-
| Name | -screenY() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -void setup() {
- size(100, 100, P3D);
-}
-
-void draw() {
- background(204);
-
- float x = mouseX;
- float y = mouseY;
- float z = -100;
-
- // Draw "X" at z = -100
- stroke(255);
- line(x-10, y-10, z, x+10, y+10, z);
- line(x+10, y-10, z, x-10, y+10, z);
-
- // Draw line in 2D at same y value
- // Notice the parallax
- stroke(102);
- line(0, y, 0, width, y, 0);
-
- // Draw 2D line to match the y value
- // element drawn at z = -100
- stroke(0);
- float theY = screenY(x, y, z);
- line(0, theY, 0, width, theY, 0);
-}
- |
- ||||||
| Description | - -Takes a three-dimensional X, Y, Z position and returns the Y value for where it will appear on a (two-dimensional) screen. |
- ||||||
| Syntax | -screenY(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -screenX() - screenZ() |
-
-
| Name | -screenZ() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Description | - -Takes a three-dimensional X, Y, Z position and returns the Z value for where it will appear on a (two-dimensional) screen. |
- ||||||
| Syntax | -screenZ(x,y,z) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -float | -||||||
| Usage | -Web & Application | -||||||
| Related | -screenX() - screenY() |
-
-
| Name | - -second() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void draw() {
-
- background(204);
-
- int s = second(); // Values from 0 - 59
-
- int m = minute(); // Values from 0 - 59
-
- int h = hour(); // Values from 0 - 23
-
- line(s, 0, s, 33);
-
- line(m, 33, m, 66);
-
- line(h, 66, h, 100);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The second() function returns the current second as a value from 0 - 59. | - -||
| Syntax | - -second |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - minute() - - hour() - - day() - - month() - - year() - - |
-
-
| Name | - -; (semicolon) |
-
- ||
|---|---|---|---|
| Examples | - - - -int a; // Declaration statement - -a = 30; // Assignment statement - -println(i); // Function statement |
-
- ||
| Description | - -A statement terminator which separates elements of the program. A statement is a complete instruction to the computer and the semicolon is used to separate instructions (this is similar to the period "." in written English). Semicolons are also used to separate the different elements of a for structure. | - - - -||
| Syntax | - -statement; |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - - - -for() |
-
-
| Name | - -set() |
-
-
-
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - - color black = color(0); - -set(30, 20, black); - -set(85, 20, black); - -set(85, 75, black); - -set(30, 75, black);  for (int i=30; i<(width-15); i++) {
-
- for(int j=20; j<(height-25); j++) {
-
- color c = color(204-j, 153-i, 0);
-
- set(i, j, c);
-
- }
-
-} size(100, 100, P3D);
-
-PImage myImage = loadImage("topanga.jpg");
-
-set(0, 0, myImage);
-
-line(0, 0, width, height);
-
-line(0, height, width, 0); |
-
- ||||||||
| Description | - -Changes the color of any pixel or writes an image directly into the display window. The x and y parameters specify the pixel to change and the color parameter specifies the color value. The color parameter is affected by the current color mode (the default is RGB values from 0 to 255). When setting an image, the x and y parameters define the coordinates for the upper-left corner of the image (the placement of the image is not affected by the imageMode() function). Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[]. The equivalent statement to "set(x, y, #000000)" using pixels[] is "pixels[y*width+x] = #000000". The (BETA) version of Processing requires calling loadPixels() to load the display window data into the pixels[] array before getting the values and calling updatePixels() to update the window. |
-
-
-
- ||||||||
| Syntax | - -set(x, y, color) - -set(x, y, image) |
-
-
-
- ||||||||
| Parameters | - -
|
-
-
-
- ||||||||
| Usage | - -Web & Application | - -||||||||
| Related | - -get()
-
- pixels[] |
-
-
| Name | - -setup() |
-
- ||
|---|---|---|---|
| Examples | - - - -void setup() {
-
- size(200, 200);
-
- background(0);
-
- noStroke();
-
- fill(102);
-
-}
-
-
-
-int a = 0;
-
-
-
-void draw() {
-
- rect(a++%width, 10, 2, 80);
-
-} |
-
- ||
| Description | - -Called once when the program is started. Used to define initial enviroment properties such as screen size, background color, loading images, etc. before the draw() begins executing. Variables declared within setup() are not accessible within other functions, includingdraw(). There can only be one setup() function for each program and it should not be called again after it's initial execution. | - - - -||
| Syntax | - -void setup() {
-
- statements
-
-} |
-
- ||
| Parameters | - -
|
-
- ||
| Returns | - -None | - -||
| Usage | - -Web & Application | - -||
| Related | - -loop()
-
- size() |
-
-
| Name | -shapeMode() |
-
- ||
|---|---|---|---|
| Examples | - PShape bot = loadShape("bot1.svg");
-smooth();
-shapeMode(CENTER);
-shape(bot, 35, 35, 50, 50);
-shapeMode(CORNER);
-fill(102);
-shape(bot, 35, 35, 50, 50); |
- ||
| Description | - -Modifies the location from which shapes draw. The default mode is shapeMode(CORNER), which specifies the location to be the upper - left corner of the shape and uses the third and fourth parameters of shape() to specify the width and height. - The syntax shapeMode(CORNERS) uses the first and second parameters of shape() - to set the location of one corner and uses the third and fourth parameters to set the opposite corner. The syntax shapeMode(CENTER) draws the shape from - its center point and uses the third and forth parameters of shape() to specify the width and height. - The parameter must be written in "ALL CAPS" because Processing is a case sensitive language. |
- ||
| Syntax | -shapeMode(MODE) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -PShape - loadShape() - shapeMode() |
-
| Name | -shape() |
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | -PShape s;
-s = loadShape("bot.svg");
-smooth();
-shape(s, 10, 10, 80, 80);// Loading a shape when using setup() and draw()
-
-PShape s;
-
-void setup() {
- s = loadShape("bot.svg");
- smooth();
- noLoop();
-}
-
-void draw() {
- shape(s, 10, 10, 80, 80);
-} |
- ||||||||||||
| Description | - -Displays shapes to the screen. The shapes must be in the sketch's "data" directory to load correctly. Select "Add file..." - from the "Sketch" menu to add the shape. Processing currently works with SVG shapes only. The sh parameter specifies the shape to display and - the x and y parameters define the location of the shape from its upper-left corner. The shape is displayed at its original size unless the width - and height parameters specify a different size. The shapeMode() function changes the way the parameters work. A call to shapeMode(CORNERS), for example, will change the width and height - parameters to define the x and y values of the opposite corner of the shape. -Note complex shapes may draw awkwardly with P2D, P3D, and OPENGL. Those renderers do not yet support shapes that have holes or complicated breaks. |
- ||||||||||||
| Syntax | -shape(sh) - shape(sh,x,y) - shape(sh,x,y,width,height) |
- ||||||||||||
| Parameters | -
|
-
- ||||||||||||
| Usage | -Web & Application | -||||||||||||
| Related | -PShape - loadShape() - shapeMode() |
-
| Name | -shininess() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -background(0); -fill(0, 51, 102); -ambientLight(102, 102, 102); -lightSpecular(204, 204, 204); -directionalLight(102, 102, 102, 0, 0, -1); -specular(255, 255, 255); -translate(30, 50, 0); -shininess(1.0); -sphere(20); -translate(40, 0, 0); -shininess(5.0); -sphere(20); |
- ||
| Description | - -Sets the amount of gloss in the surface of shapes. Used in combination with emissive(), specular(), and - shininess() in setting the materal properties of shapes. |
- ||
| Syntax | -shininess(shine) - |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -ambient() - specular() - emissive() |
-
| Name | -shorten() |
- ||
|---|---|---|---|
| Examples | - -String[] sa1 = { "OH ", "NY ", "CA "};
-String[] sa2 = shorten(sa1);
-println(sa1); // sa1 still contains OH, NY, CA
-println(sa2); // sa2 now contains OH, NY |
- ||
| Description | -
- Decreases an array by one element and returns the shortened array. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) shorten(originalArray). |
- ||
| Syntax | -shorten(array) |
- ||
| Parameters | - -
|
- ||
| Returns | -Array (the same datatype as the input) | -||
| Usage | -Web & Application | - -||
| Related | -append() - expand() |
-
-
| Name | - -sin() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - float a = 0.0;
-
-float inc = TWO_PI/25.0;
-
-
-
-for(int i=0; i<100; i=i+4) {
-
- line(i, 50, i, 50+sin(a)*40.0);
-
- a = a + inc;
-
-} |
-
- ||
| Description | - -Calculates the sine of an angle. This function expects the values of the angle parameter to be provided in radians (values from 0 to 6.28). Values are returned in the range -1 to 1. | - -||
| Syntax | - - - -sin(rad) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -
-
- cos() - - radians() - - |
-
-
| Name | - -size() |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -void setup() {
-
- size(320, 240);
-
- background(153);
-
-}
-
-
-
-void draw() {
-
- line(0, 0, width, height);
-
-} |
-
- ||||
| Description | - -Defines the dimension of the display window in units of pixels. The size() function must be the first line in setup(). If size() is not called, the default size of the window is 100x100 pixels. The system variables width and height are set by the parameters passed to the size() function. - - - -Employ numeric values in the size() statement, and then use the built-in width and height variables inside your program when you need the dimensions of the display window. - - - -Rendering graphics requires tradeoffs between speed, accuracy, and general usefulness of the available features. None of the renderers are perfect, so we provide multiple options so that you can decide what tradeoffs make the most sense for your project. We'd prefer all of them to have perfect visual accuracy, high performance, and support a wide range of features, but that's simply not possible. - - - -Again, the size() method must be the first line of the code (or first item inside setup). Any code that appears before the size() command may run more than once, which can lead to confusing results. |
-
- ||||
| Syntax | - -size(width, height) |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Returns | - -None | - - - -||||
| Usage | - -Web & Application | - -
| Name | - -smooth() |
-
-
-
- ||
|---|---|---|---|
| Processing.js Behavior | - -Processing.js always renders in smooth mode. This is a limitation of the HTML5 Canvas element. | - -||
| Examples | - - background(0); - -ellipse(30, 48, 36, 36); - -smooth(); - -ellipse(70, 48, 36, 36); |
-
- ||
| Description | - - - -Draws all geometry with smooth (anti-aliased) edges. This will slow down the frame rate of the application, but will enhance the visual refinement.
-
- - -Starting with release 0124, when using the default (JAVA2D) renderer, smooth() will also improve image quality of resized images. |
-
- ||
| Syntax | - -smooth() |
-
- ||
| Parameters | - -
|
-
-
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -noSmooth() - - size() |
-
-
| Name | -sort() |
- ||||
|---|---|---|---|---|---|
| Examples | - -float[] a = { 3.4, 3.6, 2, 0, 7.1 };
-a = sort(a);
-println(a);- String[] s = { "deer", "elephant", "bear", "aardvark", "cat" };
-s = sort(s);
-println(s); // Prints aardvark, bear, cat, deer, elephant on separate lines- String[] s = { "deer", "elephant", "bear", "aardvark", "cat" };
-s = sort(s, 3);
-println(s); // Prints bear, dear, elephant, aardvark, cat on separate lines |
- ||||
| Description | -
- Sorts an array of numbers from smallest to largest and puts an array of words in alphabetical order. - The original array is not modified, a re-ordered array is returned. The count parameter states the number of elements to sort. - For example if there are 12 elements in an array and if count is the value 5, only the first five elements on the array will be sorted. - As of release 0126, the alphabetical ordering is case insensitive. |
- ||||
| Syntax | -sort(dataArray) - sort(dataArray,count) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -Array (the same datatype as the input) | -||||
| Usage | -Web & Application | - -||||
| Related | -reverse() | - -
| Name | -specular() |
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -background(0); -fill(0, 51, 102); -lightSpecular(255, 255, 255); -directionalLight(204, 204, 204, 0, 0, -1); -translate(20, 50, 0); -specular(255, 255, 255); -sphere(30); -translate(60, 0, 0); -specular(204, 102, 0); -sphere(30); |
- ||||||||||
| Description | - -Sets the specular color of the materials used for shapes drawn to the screen, which sets the color of hightlights. - Specular refers to light which bounces off a surface in a perferred direction (rather than bouncing in all directions like a diffuse light). - Used in combination with emissive(), specular(), and - shininess() in setting the materal properties of shapes. |
- ||||||||||
| Syntax | -specular(gray) - specular(color) - specular(v1,v2,v3) |
- ||||||||||
| Parameters | -
|
-
- ||||||||||
| Returns | -None | -||||||||||
| Usage | -Web & Application | -||||||||||
| Related | -ambient() - emissive() - shininess() |
-
| Name | -sphereDetail() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | -
-void setup() {
- size(100, 100, P3D);
-}
-
-void draw() {
- background(200);
- stroke(255, 50);
- translate(50, 50, 0);
- rotateX(mouseY * 0.05);
- rotateY(mouseX * 0.05);
- fill(mouseX * 2, 0, 160);
- sphereDetail(mouseX / 4);
- sphere(40);
-}
- |
- ||||||
| Description | - -Controls the detail used to render a sphere by adjusting the number of vertices of the sphere mesh. - The default resolution is 30, which creates a fairly detailed sphere definition with vertices every 360/30 = 12 degrees. - If you're going to render a great number of spheres per frame, it is advised to reduce the level of detail using this function. - The setting stays active until sphereDetail() is called again with a new parameter and so should not be called prior to every sphere() statement, unless you wish to render spheres with different settings, e.g. using less detail for smaller spheres or ones further away from the camera. - To control the detail of the horizontal and vertical resolution independently, use the version of the functions with two parameters. | -||||||
| Syntax | -sphereDetail(res) - sphereDetail(ures,vres) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -None | -||||||
| Usage | -Web & Application | -||||||
| Related | -sphere() |
-
-
| Name | -sphere() |
-
- ||
|---|---|---|---|
| Examples | - noStroke(); -lights(); -translate(58, 48, 0); -sphere(28);- |
- ||
| Description | - -A sphere is a hollow ball made from tessellated triangles. | -||
| Syntax | -sphere(radius) |
- ||
| Parameters | - -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -sphereDetail() |
-
-
| Name | -splice() |
- ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Examples | - -String[] sa1 = { "OH", "NY", "CA" };
-sa1 = splice(sa1, "KY", 1);
-println(sa1); // Prints OH, KY, NY, CA
-println();
-
-String[] sa2 = { "VA", "CO", "IL" };
-sa1 = splice(sa1, sa2, 2);
-println(sa1); // Prints OH, KY, VA, CO, IL, NY, CA |
- ||||||||
| Description | -
- Inserts a value or array of values into an existing array. The first two parameters must be of the same datatype. - The array parameter defines the array which will be modified and the second parameter defines the data which will be inserted. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) splice(array1, array2, index). |
- ||||||||
| Syntax | -splice(array,value,index) - splice(array,array2,index) |
- ||||||||
| Parameters | - -
|
- ||||||||
| Returns | -Array (the same datatype as the input) | -||||||||
| Usage | -Web & Application | - -||||||||
| Related | -concat() - subset() |
-
-
| Name | -splitTokens() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String t = "a b"; -String[] q = splitTokens(t); -println(q[0]); // Prints "a" -println(q[1]); // Prints "b" // Despite the bad formatting, the data is parsed correctly. -// The ", " as delimiter means to break whenever a comma *or* -// a space is found in the String. Unlike the split() function, -// multiple adjacent delimiters are treated as a single break. -String s = "a, b c ,,d "; -String[] p = splitTokens(s, ", "); -println(p[0]); // Prints "a" -println(p[1]); // Prints "b" -println(p[2]); // Prints "c" -println(p[3]); // Prints "d" |
- ||||
| Description | -The splitTokens() function splits a String at one or many character "tokens." The tokens parameter specifies the character or characters to be used as a boundary. -If no tokens character is specified, any whitespace character is used to split. Whitespace characters include tab (\t), line feed (\n), carriage return (\r), form feed (\f), and space. To convert a String to an array of integers or - floats, use the datatype conversion functions int() and float() to convert the array of Strings. |
- ||||
| Syntax | -splitTokens(str) splitTokens(str,tokens) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String[] | -||||
| Usage | -Web & Application | - -||||
| Related | -split() - trim() - join() |
-
| Name | -split() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String men = "Chernenko,Andropov,Brezhnev"; -String[] list = split(men, ','); -// list[0] is now Chernenko, list[1] is Andropov, ... - String numbers = "8 67 5 309"; -int[] nums = int(split(numbers, ' ')); -// nums[0] is now 8, nums[1] is now 67, ... String men = "Chernenko ] Andropov ] Brezhnev"; -String[] list = split(men, " ] "); -// list[0] is now Chernenko, list[1] is Andropov, ... |
- ||||
| Description | -The split() function breaks a string into pieces using a character or string as the divider. The delim parameter specifies the character or - characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces. -If the result is a set of numbers, you can convert the String[] array to to a float[] or int[] array using the datatype conversion functions int() and float() (see example above). -The splitTokens() function works in a similar fashion, except that it splits using a range of characters instead of a specific character or sequence. |
- ||||
| Syntax | -split(str,delim) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String[] | -||||
| Usage | -Web & Application | - -||||
| Related | -splitToken() - trim() - join() |
-
| Name | -spotLight() |
-
- ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - size(100, 100, P3D); -background(0); -noStroke(); -spotLight(51, 102, 126, 80, 20, 40, -1, 0, 0, PI/2, 2); -translate(20, 50, 0); -sphere(30);  size(100, 100, P3D); -background(0); -noStroke(); -background(0); -spotLight(51, 102, 126, 50, 50, 400, - 0, 0, -1, PI/16, concentration); -translate(80, 50, 0); -sphere(30); |
- ||||||||||||||||
| Description | - -Adds a spot light. Lights need to be included in the draw() to remain persistent in a looping program. - Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. - The affect of the v1, v2, and v3 parameters is determined by the current color mode. - The x, y, and z parameters specify the position of the light and nx, ny, nz specify the direction or light. - The angle parameter affects angle of the spotlight cone. |
- ||||||||||||||||
| Syntax | -spotLight(v1,v2,v3,nx,ny,nz,angle,concentration) |
- ||||||||||||||||
| Parameters | -
|
-
- ||||||||||||||||
| Returns | -None | -||||||||||||||||
| Usage | -Web & Application | -||||||||||||||||
| Related | -lights() - ambientLight() - directionalLight() - pointLight() |
-
| Name | - -sq() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -float a = sq(1); // Sets a to 1 - -float b = sq(-5); // Sets b to 25 - -float c = sq(9); // Sets c to 81 - -rect(0, 25, a, 10); - -rect(0, 45, b, 10); - -rect(0, 65, c, 10); |
-
- ||
| Description | - - - -Squares a number (multiplies a number by itself). The result is always a positive number, as multiplying two negative numbers always yields a positive result. For example, -1 * -1 = 1. | - -||
| Syntax | - -sq(value) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -sqrt() |
-
-
| Name | - -sqrt() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - noStroke(); - -float a = sqrt(6561); // Sets a to 81 - -float b = sqrt(625); // Sets b to 25 - -float c = sqrt(1); // Sets c to 1 - -rect(0, 25, a, 10); - -rect(0, 45, b, 10); - -rect(0, 65, c, 10); |
-
- ||
| Description | - - - -Calculates the square root of a number. The square root of a number is always positive, even though there may be a valid negative root. The square root s of number a is such that s*s = a. It is the opposite of squaring. | - -||
| Syntax | - - - -sqrt(value) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - - - -Web & Application | - -||
| Related | - -
-
- pow() - - sq() |
-
-
| Name | - -static |
-
-
|---|---|
| Examples | - - - -void setup() {
-
- MiniClass mc1 = new MiniClass();
-
- MiniClass mc2 = new MiniClass();
-
- println( mc1.y ); // Prints "10" to the console
-
- MiniClass.y += 10; // The "y" variable is shared by mc1 and mc2
-
- println( mc1.y ); // Prints "20" to the console
-
- println( mc2.y ); // Prints "20" to the console
-
-}
-
-
-
-static class MiniClass {
-
- static int y = 10; // Class variable
-
-}void setup() {
-
- println(MiniClass.add(3, 4)); // Prints "7" to the console
-
-}
-
-
-
-static class MiniClass {
-
- static int add(int x, int y) {
-
- return(x + y);
-
- }
-
-} |
-
-
| Description | - -Keyword used to define a variable as a "class variable" and a method as a "class method." When a variable is declared with the static keyword, all instances of that class share the same variable. When a class is defined with the static keyword, it's methods can be used without making an instance of the class. The above examples demonstrate each of these uses. - - - -This keyword is an essential part of Java programming and is not usually used with Processing. Consult a Java language reference or tutorial for more information, such as this one. |
-
-
| Usage | - -Web & Application | - -
| Name | -status() |
-
- ||
|---|---|---|---|
| Examples | -// Move mouse left and right and see the text
-// change in the lower-left corner of your browser
-void draw() {
- if(mouseX < 50) {
- status("left");
- } else {
- status("right");
- }
-}
- |
- ||
| Description | - -Displays message in the browser's status area. This is the text area in the lower left corner of the browser. - The status() function will only work when the Processing program is running in a web browser. | -||
| Syntax | -status(text) |
- ||
| Parameters | - -
|
- ||
| Returns | -None | -||
| Usage | -Web | -
| Name | - -str() |
-
- ||
|---|---|---|---|
| Examples | - - - -boolean b = false; - -byte y = -28; - -char c = 'R'; - -float f = -32.6; - -int i = 1024; - - - -String sb = str(b); - -String sy = str(y); - -String sc = str(c); - -String sf = str(f); - -String si = str(i); - - - -sb = sb + sy + sc + sf + si; - - - -println(sb); // Prints 'false-28R-32.61024' |
-
- ||
| Description | - -Returns the string representation of primitive datatypes and arrays. For example the integer 3 will return the string "3", the float -12.6 will return the string "-12.6", and a boolean value true will return the string "true". | - -||
| Syntax | - -str(data) |
-
- ||
| Parameters | - - - -
|
-
- ||
| Returns | - -String or String[] | - -||
| Usage | - -Web & Application | - - - -
| Name | -strokeCap() |
-
- ||
|---|---|---|---|
| Examples | - smooth(); -strokeWeight(12.0); -strokeCap(ROUND); -line(20, 30, 80, 30); -strokeCap(SQUARE); -line(20, 50, 80, 50); -strokeCap(PROJECT); -line(20, 70, 80, 70); |
- ||
| Description | - -Sets the style for rendering line endings. These ends are either squared, extended, or rounded and specified with the corresponding - parameters SQUARE, PROJECT, and ROUND. The default cap is ROUND. This function is not available with the P2D, P3D, or OPENGL renderers. - More information about the renderers can be found in the size() reference. - |
- ||
| Syntax | -strokeCap(MODE) |
- ||
| Parameters | -
|
-
- ||
| Usage | -Web & Application | -||
| Related | -stroke() - strokeWeight() - strokeJoin() - size() |
-
| Name | -strokeJoin() |
-
- ||
|---|---|---|---|
| Examples | - noFill(); -smooth(); -strokeWeight(10.0); -strokeJoin(MITER); -beginShape(); -vertex(35, 20); -vertex(65, 50); -vertex(35, 80); -endShape();  noFill(); -smooth(); -strokeWeight(10.0); -strokeJoin(BEVEL); -beginShape(); -vertex(35, 20); -vertex(65, 50); -vertex(35, 80); -endShape();-  noFill(); -smooth(); -strokeWeight(10.0); -strokeJoin(ROUND); -beginShape(); -vertex(35, 20); -vertex(65, 50); -vertex(35, 80); -endShape();- |
- ||
| Description | - -Sets the style of the joints which connect line segments. These joints are either mitered, beveled, or rounded and specified with - the corresponding parameters MITER, BEVEL, and ROUND. - The default joint is MITER. This function is not available with the P2D, P3D, or OPENGL renderers. - More information about the renderers can be found in the size() reference. |
- ||
| Syntax | -strokeJoin(MODE) |
- ||
| Parameters | - -
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -stroke() - strokeWeight() - strokeCap() |
-
-
| Name | - -strokeWeight() |
-
-
-
- ||
|---|---|---|---|
| Examples | - - smooth(); - -strokeWeight(1); // Default - -line(20, 20, 80, 20); - -strokeWeight(4); // Thicker - -line(20, 40, 80, 40); - -strokeWeight(10); // Beastly - -line(20, 70, 80, 70); |
-
- ||
| Description | - - - -Sets the width of the stroke used for lines, points, and the border around shapes. All widths are set in units of pixels. This function does not work with the P3D renderer (please see the size() reference for more information). | - -||
| Syntax | - -strokeWeight(width) |
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -stroke() - - strokeJoin() - - strokeCap() |
-
-
| Name | - -stroke() |
-
-
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - stroke(153); - -rect(30, 20, 55, 55);  stroke(204, 102, 0); - -rect(30, 20, 55, 55); |
-
- ||||||||||||||
| Description | - -Sets the color used to draw lines and borders around shapes. This color is either specified in terms of the RGB or HSB color depending on the current colorMode() (the default color space is RGB, with each value in the range from 0 to 255).
-
- - -When using hexadecimal notation to specify a color, use "#" or "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA). The # syntax uses six digits to specify a color (the way colors are specified in HTML and CSS). When using the hexadecimal notation starting with "0x", the hexadecimal value must be specified with eight characters; the first two characters define the alpha component and the remainder the red, green, and blue components. - - - -The value for the parameter "gray" must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255. |
-
- ||||||||||||||
| Syntax | - -stroke(gray) - -stroke(gray, alpha) - -stroke(value1, value2, value3) - -stroke(value1, value2, value3, alpha) - -stroke(color) - -stroke(color, alpha) - -stroke(hex) - -stroke(hex, alpha) |
-
-
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||
| Related | - - - -noStroke() - - fill() - - tint() - - background() - - colorMode() |
-
-
| Name | -subset() |
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - -String[] sa1 = { "OH ", "NY ", "CA ", "VA ", "CO ", "IL "};
-String[] sa2 = subset(sa1, 1);
-println(sa2); // Prints NY, CA, VA, CO, IL
-println();
-String[] sa3 = subset(sa1, 2, 3);
-println(sa3); // Prints CA, VA, CO |
- ||||||
| Description | -
- Extracts an array of elements from an existing array. The array parameter defines the array from which the elements will - be copied and the offset and length parameters determine which elements to extract. If no length is given, elements will be extracted from the offset to the end of the array. When specifying the offset remember the first array element is 0. - This function does not change the source array. -When using an array of objects, the data returned from the function must be cast to the object array's data type. - For example: SomeClass[] items = (SomeClass[]) subset(originalArray, 0, 4). |
- ||||||
| Syntax | -subset(array,offset) - subset(array,offset,length) |
- ||||||
| Parameters | - -
|
- ||||||
| Returns | -Array (the same datatype as the input) | -||||||
| Usage | -Web & Application | - -||||||
| Related | -splice() | - -
| Name | - --= (subtract assign) |
-
-
-
- ||||
|---|---|---|---|---|---|
| Examples | - -int a = 50; - -int b = 23; - -a -= b; // sets "a" to 27 |
-
- ||||
| Description | - - - -Combines subtraction with assignment. The expression a -= b is equivalent to a = a - b. | - -||||
| Syntax | - -value1 -= value2 |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -+= (add assign) - - - (minus) |
-
-
| Name | - -super |
-
-
|---|---|
| Examples | - - - -// This example is a code fragment,
-
-// it will not compile on its own.
-
-
-
-// Create the DragDrop subclass from
-
-// the Button class. Button becomes
-
-// the superclass of DragDrop.
-
-class DragDrop extends Button {
-
- int xoff, yoff;
-
- DragDrop(int x, int y) {
-
- // Runs the superclass' constructor
-
- super(x, y);
-
- }
-
- void press(int mx, int my) {
-
- // Runs the superclass' press() method
-
- super.press();
-
- xoff = mx;
-
- yoff = my;
-
- }
-
-} |
-
-
| Description | - -Keyword used to reference the superclass of a subclass. | - -
| Usage | - -Web & Application | - -
| Related | - - - -class
-
- extends |
-
-
| Name | - -switch() |
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - - -int num = 1;
-
-
-
-switch(num) {
-
- case 0:
-
- println("Zero"); // Does not execute
-
- break;
-
- case 1:
-
- println("One"); // Prints "One"
-
- break;
-
-}char letter = 'N';
-
-
-
-switch(letter) {
-
- case 'A':
-
- println("Alpha"); // Does not execute
-
- break;
-
- case 'B':
-
- println("Bravo"); // Does not execute
-
- break;
-
- default: // Default executes if the case labels
-
- println("None"); // don't match the switch parameter
-
- break;
-
-}// Removing a "break" enables testing
-
-// for more than one value at once
-
-
-
-char letter = 'b';
-
-
-
-switch(letter) {
-
- case 'a':
-
- case 'A':
-
- println("Alpha"); // Does not execute
-
- break;
-
- case 'b':
-
- case 'B':
-
- println("Bravo"); // Prints "Bravo"
-
- break;
-
-} |
-
- ||||||
| Description | - -Works like an if else structure, but switch() is more convenient when you need to select between three or more alternatives. Program controls jumps to the case with the same value as the expression. All remaining statements in the switch are executed unless redirected by a break. Only primitive datatypes which can convert to an integer (byte, char, and int) may be used as the expression parameter. The default is optional. | - - - -||||||
| Syntax | - -switch(expression)
-
-{
-
- case label:
-
- statements
-
- case label: // Optional
-
- statements // "
-
- default: // "
-
- statements // "
-
-} |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -case - - default - - break - - if() - - else() |
-
-
| Name | -tan() |
-
- ||
|---|---|---|---|
| Examples | - float a = 0.0;
-float inc = TWO_PI/50.0;
-
-for(int i=0; i<100; i=i+2) {
- line(i, 50, i, 50+tan(a)*2.0);
- a = a + inc;
-} |
- ||
| Description | - -Calculates the ratio of the sine and cosine of an angle. This function expects the values of the angle parameter to be provided in - radians (values from 0 to PI*2). Values are returned in the range infinity to -infinity. |
-
- ||
| Syntax | -tan(angle); |
- ||
| Parameters | -
|
- ||
| Returns | -float | -||
| Usage | -Web & Application | -||
| Related | - -cos() - sin() - radians() |
-
| Name | -textAlign() |
-
- ||||
|---|---|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||||
| Examples | - PFont font;
-// The font must be located in the current sketch's
-// "data" directory to load successfully
-font = loadFont("EurekaMonoCond-Bold.ttf");
-textFont(font, 20);
-textAlign(RIGHT);
-text("word", 50, 30);
-textAlign(CENTER);
-text("word", 50, 50);
-textAlign(LEFT);
-text("word", 50, 70); |
- ||||
| Description | - -Sets the current alignment for drawing text. The parameters LEFT, CENTER, and RIGHT set the display characteristics of the letters in - relation to the values for the x and y parameters of the text() function. -An optional second parameter can be used to vertically align the text. BASELINE is the default, and the vertical alignment will be reset to BASELINE - if the second parameter is not used. The TOP and CENTER parameters are straightforward. The BOTTOM parameter offsets the line based on the current textDescent(). - For multiple lines, the final line will be aligned to the bottom, with the previous lines appearing above it. -When using text() with width and height parameters, BASELINE is ignored, and treated as TOP. (Otherwise, text would by default draw outside the box, since BASELINE is the default setting. - BASELINE is not a useful drawing mode for text drawn in a rectangle.) -The vertical alignment is based on the value of textAscent(), which many fonts do not specify correctly. It may be necessary to use a hack and offset by a - few pixels by hand so that the offset looks correct. To do this as less of a hack, use some percentage of textAscent() or textDescent() - so that the hack works even if you change the size of the font. - |
-
- ||||
| Syntax | -textAlign(ALIGN)- textAlign(ALIGN, YALIGN) |
-
- ||||
| Parameters | -
|
- ||||
| Returns | -None | -||||
| Usage | -Web & Application | -||||
| Related | - -
- loadFont() - PFont - text() |
-
| Name | -textAscent() |
-
-
|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
-
| Examples | - PFont font;
-font = loadFont("FFScala.ttf");
-textFont(font);
-
-textSize(32);
-float ascent = textAscent();
-text("dp", 0, 70);
-line(0, 70-ascent, 100, 70-ascent);
-
-textSize(64);
-ascent = textAscent();
-text("dp", 35, 70);
-line(35, 70-ascent, 100, 70-ascent); |
-
| Description | - -Returns ascent of the current font at its current size. This information is useful for determining the height of the font above the baseline. - For example, adding the textAscent() and textDescent() values will give you the total height of the line. - |
-
-
| Syntax | -textAscent() |
-
-
| Returns | -Float | -
| Usage | -Web & Application | -
| Related | - -textDescent() | -
| Name | -textDescent() |
-
-
|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
-
| Examples | - PFont font;
-font = loadFont("FFScala.ttf");
-textFont(font);
-
-textSize(32);
-float descent = textDescent();
-text("dp", 0, 70);
-line(0, 70+descent, 100, 70+descent);
-
-textSize(64);
-descent = textDescent();
-text("dp", 35, 70);
-line(35, 70+descent, 100, 70+descent); |
-
| Description | - -Returns descent of the current font at its current size. This information is useful for determining the height of the font below the baseline. - For example, adding the textAscent() and textDescent() values will give you the total height of the line. - |
-
-
| Syntax | -textDescent() |
-
-
| Returns | -Float | -
| Usage | -Web & Application | -
| Related | - -textAscent() | -
| Name | - -textFont() |
-
-
-
- ||||
|---|---|---|---|---|---|
| Processing.js Behavior | - -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
-
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - - |
-
- ||||
| Examples | - - PFont metaBold;
-
-// The font "Meta-Bold.ttf" must be located in the
-
-// current sketch's "data" directory to load successfully
-
-metaBold = loadFont("Meta-Bold.ttf");
-
-textFont(metaBold, 44);
-
-text("word", 15, 50); |
-
- ||||
| Description | - - - -Sets the current font. The font must be loaded with loadFont() before it can be used. This font will be used in all subsequent calls to the text() function. If no size parameter is input, the font will appear at its original size (the size it was created at with the "Create Font..." tool) until it is changed with textSize(). Because fonts are usually bitmaped, you should create fonts at the sizes that will be used most commonly. Using textFont() without the size parameter will result in the cleanest-looking text. With the JAVA2D and PDF renderers, it's also possible to enable the use of native fonts via the command hint(ENABLE_NATIVE_FONTS). This will produce vector text in JAVA2D sketches and PDF output in cases where the vector data is available: when the font is still installed, or the font is created via the createFont() function (rather than the Tool). |
-
-
-
- ||||
| Syntax | - -textFont(font) - -textFont(font, size) |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - - - -
-
- createFont() - - loadFont() - - PFont - - text() |
-
-
| Name | -textLeading() |
-
- ||
|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - PFont font;
-// The font must be located in the sketch's
-// "data" directory to load successfully
-font = loadFont("EurekaMonoCond-Bold.ttf");
-// Text to display. The "\n" is a "new line" character
-String lines = "LIN1\nLIN2\nLIN3";
-textFont(font, 14);
-textLeading(10);
-text(lines, 5, 25);
-fill(126); // Set value to gray
-textLeading(20);
-text(lines, 36, 25);
-fill(0); // Set value to black
-textLeading(30);
-text(lines, 68, 25); |
- ||
| Description | - -Sets the spacing between lines of text in units of pixels. This setting will be used in all subsequent calls to the text() function. - |
-
- ||
| Syntax | -textLeading(dist) |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | - -
- loadFont() - PFont - text() - textFont() |
-
| Name | -textMode() |
-
- ||
|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - PFont metaBold;
-// The font "Meta-Bold.ttf" must be located in the
-// current sketch's "data" directory to load successfully
-metaBold = loadFont("Meta-Bold.ttf");
-String lines = "screen";
-textFont(metaBold);
-textMode(SCREEN);
-text(lines, 3, 70); |
- ||
| Description | - -Sets the way text draws to the screen. In the default configuration (the MODEL mode), it's possible to rotate, scale, - and place letters in two and three dimensional space. -Changing to SCREEN mode draws letters directly to the front of the window and greatly increases rendering quality and speed when used with the P2D and P3D renderers. - textMode(SCREEN) with OPENGL and JAVA2D (the default) renderers will generally be slower, though pixel accurate with P2D and P3D. With textMode(SCREEN), - the letters draw at the actual size of the font (in pixels) and therefore calls to textSize() will not affect the size of the letters. - To create a font at the size you desire, use the "Create font..." option in the Tools menu, or use the createFont() function. When using textMode(SCREEN), - any z-coordinate passed to a text() command will be ignored, because your computer screen is...flat! -The SHAPE mode draws text using the the glyph outlines of individual characters rather than as textures. - This mode is only only supported with the PDF and OPENGL renderer settings. With the PDF renderer, you must call textMode(SHAPE) before any other drawing occurs. - If the outlines are not available, then textMode(SHAPE) will be ignored and textMode(MODEL) will be used instead. -The textMode(SHAPE) option in OPENGL mode can be combined with beginRaw() to write vector-accurate text to 2D and 3D output files, for instance DXF or PDF. - textMode(SHAPE) is not currently optimized for OPENGL, so if recording shape data, use textMode(MODEL) until you're ready to capture the geometry with beginRaw(). - |
-
- ||
| Syntax | -textMode(MODE) |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | - -
- loadFont() - PFont - text() - textFont() - createFont() - |
| Name | -textSize() |
-
- ||
|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - PFont font;
-// The font must be located in the sketch's
-// "data" directory to load successfully
-font = loadFont("FFScala.ttf");
-textFont(font, 32);
-text("word", 15, 50);
-textSize(14);
-text("word", 15, 70); |
- ||
| Description | - -Sets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in units of pixels. - |
-
- ||
| Syntax | -textSize(size) |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | - -
- loadFont() - PFont - text() - textFont() |
-
| Name | -textWidth() |
-
- ||
|---|---|---|---|
| Processing.js Behavior | -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - |
- ||
| Examples | - PFont font;
-font = loadFont("FFScala.ttf");
-textFont(font, 32);
-
-char c = 'T';
-float cw = textWidth(c);
-text(c, 0, 40);
-line(cw, 0, cw, 50);
-
-String s = "Tokyo";
-float sw = textWidth(s);
-text(s, 0, 85);
-line(sw, 50, sw, 100); |
- ||
| Description | - -Calculates and returns the width of any character or text string. - |
-
- ||
| Syntax | -textWidth(data) |
-
- ||
| Parameters | -
-
|
- ||
| Returns | -Float | -||
| Usage | -Web & Application | -||
| Related | - -
- loadFont() - PFont - text() - textFont() |
-
| Name | - -text() |
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Processing.js Behavior | - -Font support for the Canvas element varies across browsers. FireFox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon.) Good alternatives to the browser's Canvas-font functions are available: such as the Glyph method. See also: Canvas Text, BurntToys Bauhaus.
-
- Please use the following demos to learn how fonts can be rendered in Firefox with Processing.js: Letters, Words, width() - - |
-
- ||||||||||||||
| Examples | - - PFont font;
-
-// The font must be located in the sketch's
-
-// "data" directory to load successfully
-
-font = loadFont("FFScala.ttf");
-
-textFont(font);
-
-text("word", 15, 30);
-
-fill(0, 102, 153);
-
-text("word", 15, 60);
-
-fill(0, 102, 153, 51);
-
-text("word", 15, 90); size(100, 100, P3D);
-
-PFont font;
-
-font = loadFont("FFScala.ttf");
-
-textFont(font);
-
-text("word", 15, 60, -30);
-
-fill(0, 102, 153);
-
-text("word", 15, 60); PFont font;
-
-font = loadFont("FFScala-Bold.ttf");
-
-textFont(font);
-
-String s = "The quick brown fox jumped over the lazy dog.";
-
-text(s, 15, 20, 70, 70); |
-
- ||||||||||||||
| Description | - -Draws text to the screen. Displays the information specified in the data or stringdata parameters on the screen in the position specified by the x and y parameters and the optional z parameter. A font must be set with the textFont() function before text() may be called. The width and height parameters define a rectangular area to display within and may only be used with string data. The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates. Use the textMode() function with the SCREEN parameter to display text in 2D at the surface of the window. Change the color of the text with the fill() function. | - - - -||||||||||||||
| Syntax | - -text(data, x, y) - -text(data, x, y, z) - -text(stringdata, x, y, width, height) - -text(stringdata, x, y, width, height, z) |
-
-
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||
| Related | - - - -
-
- textAlign() - - textMode() - - loadFont() - - PFont - - textFont() |
-
-
| Name | -textureMode() |
-
- ||
|---|---|---|---|
| Examples | - noStroke();
-PImage a = loadImage("arch.jpg");
-textureMode(IMAGE);
-beginShape();
-texture(a);
-vertex(10, 20, 0, 0);
-vertex(80, 5, 100, 0);
-vertex(95, 90, 100, 100);
-vertex(40, 95, 0, 100);
-endShape(); noStroke();
-PImage a = loadImage("arch.jpg");
-textureMode(NORMALIZED);
-beginShape();
-texture(a);
-vertex(10, 20, 0, 0);
-vertex(80, 5, 1, 0);
-vertex(95, 90, 1, 1);
-vertex(40, 95, 0, 1);
-endShape(); |
- ||
| Description | - -Sets the coordinate space for texture mapping. There are two options, IMAGE, which refers to the actual coordinates of the image, and NORMALIZED, - which refers to a normalized space of values ranging from 0 to 1. The default mode is IMAGE. In IMAGE, if an image is 100 x 200 pixels, - mapping the image onto the entire size of a quad would require the points (0,0) (0,100) (100,200) (0,200). - The same mapping in NORMAL_SPACE is (0,0) (0,1) (1,1) (0,1). |
- ||
| Syntax | -textureMode(MODE) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -texture() | -
| Name | -texture() |
-
- ||
|---|---|---|---|
| Examples | - size(100, 100, P3D);
-noStroke();
-PImage a = loadImage("arch.jpg");
-beginShape();
-texture(a);
-vertex(10, 20, 0, 0);
-vertex(80, 5, 100, 0);
-vertex(95, 90, 100, 100);
-vertex(40, 95, 0, 100);
-endShape(); |
- ||
| Description | - -Sets a texture to be applied to vertex points. The texture() function must be called between beginShape() and endShape() - and before any calls to vertex(). When textures are in use, the fill color is ignored. Instead, use tint() - to specify the color of the texture as it is applied to the shape. |
- ||
| Syntax | -texture(img) |
- ||
| Parameters | -
|
-
- ||
| Returns | -None | -||
| Usage | -Web & Application | -||
| Related | -textureMode() - beginShape() - endShape() - vertex() |
-
| Name | - -this |
-
-
|---|---|
| Examples | - - - -float ypos = 50;
-
-
-
-void setup() {
-
- size(100, 100);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- line(0, 0, 100, ypos);
-
- this.ypos = 100;
-
- line(0, 0, 100, ypos);
-
-}import processing.video.*;
-
-Movie myMovie;
-
-
-
-void setup() {
-
- size(200, 200);
-
- background(0);
-
- myMovie = new Movie(this, "totoro.mov");
-
- myMovie.loop();
-
-}
-
-
-
-void draw() {
-
- if(myMovie.available()) {
-
- myMovie.read();
-
- }
-
- image(myMovie, 0, 0);
-
-} |
-
-
| Description | - -Refers to the current object (i.e. "this object"). In Processing, it's most common to use this to pass a reference from the current object into one of the libraries. The keyword this can also be used in another way, but it is often not necessay. For example, if you are calling the filter() method of a PImage object named tree from another object, you would write tree.filter(). To call this method inside PImage itself one could simply write filter() or could more explicity write this.filter(). It's not incorrect to say this.filter() but it is not necessary as this is always implied. | - - - -
| Usage | - -Web & Application | - -
| Name | - -tint() |
-
-
-
- ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - -
-
-// @pjs preload must be used to preload the image
-
-/* @pjs preload="laDefense.jpg"; */
-
-PImage b;
-
-b = loadImage("laDefense.jpg");
-
-image(b, 0, 0);
-
-// Tint blue
-
-tint(0, 153, 204);
-
-image(b, 50, 0);
-
-// @pjs preload must be used to preload the image
-
-/* @pjs preload="laDefense.jpg"; */
-
-PImage b;
-
-b = loadImage("laDefense.jpg");
-
-image(b, 0, 0);
-
-// Tint blue and set transparency
-
-tint(0, 153, 204, 126);
-
-image(b, 50, 0); |
-
- ||||||||||||||
| Description | - -Sets the fill value for displaying images. Images can be tinted to specified colors or made transparent by setting the alpha.
-
- - -To make an image transparent, but not change it's color, use white as the tint color and specify an alpha value. For instance, tint(255, 128) will make an image 50% transparent (unless colorMode() has been used). - - - -When using hexadecimal notation to specify a color, use "#" or "0x" before the values (e.g. #CCFFAA, 0xFFCCFFAA). The # syntax uses six digits to specify a color (the way colors are specified in HTML and CSS). When using the hexadecimal notation starting with "0x", the hexadecimal value must be specified with eight characters; the first two characters define the alpha component and the remainder the red, green, and blue components. - - - -The value for the parameter "gray" must be less than or equal to the current maximum value as specified by colorMode(). The default maximum value is 255. - - - - - -The tint() method is also used to control the coloring of textures in 3D. |
-
- ||||||||||||||
| Syntax | - -tint(gray) - -tint(gray, alpha) - -tint(value1, value2, value3) - -tint(value1, value2, value3, alpha) - -tint(color) - -tint(color, alpha) - -tint(hex) - -tint(hex, alpha) |
-
-
-
- ||||||||||||||
| Parameters | - -
|
-
- ||||||||||||||
| Usage | - -Web & Application | - -||||||||||||||
| Related | - - - -noTint()
-
- image() |
-
-
| Name | - -translate() |
-
-
-
- ||||||
|---|---|---|---|---|---|---|---|
| Examples | - - translate(30, 20); - -rect(0, 0, 55, 55);  // Translating in 3D requires P3D - -// or OPENGL as a parameter to size() - -size(100, 100, P3D); - -translate(30, 20, -50); - -rect(0, 0, 55, 55);  translate(30, 20); - -rect(0, 0, 55, 55); - -translate(14, 14); - -rect(0, 0, 55, 55); |
-
- ||||||
| Description | - -Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation, and the z parameter specifies translations toward/away from the screen. Using this function with the z parameter requires using the P3D or OPENGL parameter in combination with size as shown in the above example. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling translate(50, 0) and then translate(20, 0) is the same as translate(70, 0). If translate() is called within draw(), the transformation is reset when the loop begins again. This function can be further controlled by the pushMatrix() and popMatrix(). | - - - -||||||
| Syntax | - -translate(x, y);
-
-translate(x, y, z); |
-
-
-
- ||||||
| Parameters | - -
|
-
- ||||||
| Usage | - -Web & Application | - - - -||||||
| Related | - -rotateX() - - rotateY() - - rotateZ() - - rotate() - - scale() - - pushMatrix() - - popMatrix() |
-
-
-
-
| Name | - -/* @pjs transparent */ directive |
-
- ||
|---|---|---|---|
| Examples | - - - -/* @pjs transparent="true"; */
-
-
-
-void setup()
-
-{
-
- size(200,200);
-
- frameRate(25);
-
- stroke(100,100,200);
-
- noFill();
-
-}
-
-
-
-float value = 0;
-
-boolean forward = true;
-
-
-
-/**
-
- * This animation draws an amplitude-modulating sinewave
-
- */
-
-void draw()
-
-{
-
- value += forward ? 2*PI/25 : -2*PI/25;
-
- if(forward && value>=2*PI) { forward=false; }
-
- else if(!forward && value<=0) { forward=true; }
-
-
-
- background(0,75); // transparent grey background
-
- float c = value - PI;
-
- bezier(0,100, 33,100+(50*c*PI/6), 66,100+(50*c*PI/6), 100,100);
-
- bezier(100,100, 133,100+(50*-c*PI/6), 166,100+(50*-c*PI/6), 200,100);
-
-}
-
- |
-
- ||
| Description | - -This directive allows you to specify whether or not the background of the canvas for your sketch should be transparent. By default, - - the canvas background is opaque, and any calls to background() will fill it with some color, with a CSS opacity of 1.0 (which is fully opaque). - - To make the background transparent, use this directive. Any calls to background() with arguments that include an alpha channel value will now result - - in a transparent background color with an opacity ranging from fully transparent (a=0) to full opaque (a=255). - - |
-
- ||
| Syntax | - -
-
- - - /* @pjs transparent="true"; */ - -- - To enable transparent backgrounds for a js-built sketch, you must set the sketch transparency property to true. Assuming you have bound your sketch to a var called mySketch: - - - - - - mySketch.options.isTransparent = true; - -- - If you have bound your processing instance to a variable called pi: - - - - - - pi.externals.sketch.options.isTransparent = true; - -- - - - |
-
-
-
- ||
| Parameters | - -
|
-
-
-
- ||
| Usage | - -Web & Application, Processing.js compatibility | - -||
| Related | - -- - @pjs directives - - | - -
| Name | - -triangle() |
-
-
-
- ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - triangle(30, 75, 58, 20, 86, 75) |
-
- ||||||||||||
| Description | - - - -A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. | - -||||||||||||
| Syntax | - -triangle(x1, y1, x2, y2, x3, y3); |
-
-
-
- ||||||||||||
| Parameters | - -
|
-
- ||||||||||||
| Usage | - -Web & Application | - -||||||||||||
| Related | - -beginShape() |
-
-
| Name | -trim() |
- ||||
|---|---|---|---|---|---|
| Examples | - -String s = " Somerville MA ";
-println(s); // Prints " Somerville MA "
-String s2 = trim(s);
-println(s2); // Prints "Somerville MA"
-
-String[] a = { " inconsistent ", " spacing" };
-String[] a2 = trim(a);
-println(a2); |
- ||||
| Description | -Removes whitespace characters from the beginning and end of a String. In addition to standard whitespace characters such as space, - carriage return, and tab, this function also removes the Unicode "nbsp" character. |
- ||||
| Syntax | -trim(str) - trim(array) |
- ||||
| Parameters | - -
|
- ||||
| Returns | -String | -||||
| Usage | -Web & Application | - -||||
| Related | -split() - join() |
-
| Name | - -true |
-
-
|---|---|
| Examples | - - - -rect(30, 20, 50, 50);
-
-boolean b = true;
-
-if(b == true) {
-
- line(20, 10, 90, 80); // This line draws
-
-} else {
-
- line(20, 80, 90, 10);
-
-} |
-
-
| Description | - -Reserved word representing the logical value "true". Only variables of type boolean may be assigned the value true. | - - - -
| Usage | - -Web & Application | - -
| Related | - -false
-
- boolean |
-
-
| Name | -unbinary() |
- ||
|---|---|---|---|
| Examples | - -String s1 = "00010000"; -String s2 = "00001000"; -String s3 = "00000100"; -println(unbinary(s1)); // Prints 16 -println(unbinary(s2)); // Prints 8 -println(unbinary(s3)); // Prints 4 |
- ||
| Description | -Converts a String representation of a binary number to its equivalent integer value. For example, unbinary("00001000") will return 8. | -||
| Syntax | -unbinary(str)- |
- ||
| Parameters | - -
|
- ||
| Returns | -int | -||
| Usage | -Web & Application | - -||
| Related | -hex() - unhex() - binary() |
-
| Name | -unhex() |
- ||
|---|---|---|---|
| Examples | - -String hs = "FF006699"; -int hi = unhex(hs); -fill(hi); -rect(30, 20, 55, 55); |
- ||
| Description | -Converts a String representation of a hexadecimal number to its equivalent integer value. | -||
| Syntax | -unhex(str)- |
- ||
| Parameters | - -
|
- ||
| Returns | -int | -||
| Usage | -Web & Application | - -||
| Related | -hex() - binary() - unbinary() |
-
| Name | - -updatePixels() |
-
-
-
-
|---|---|
| Examples | - -int halfImage = width*height/2;
-
-PImage myImage = loadImage("topanga.jpg");
-
-image(myImage, 0, 0);
-
-
-
-loadPixels();
-
-for (int i = 0; i < halfImage; i++) {
-
- pixels[i+halfImage] = pixels[i];
-
-}
-
-updatePixels(); int halfImage = width*height/2;
-
-PImage myImage = loadImage("towerFlip.jpg");
-
-image(myImage, 0, 0);
-
-
-
-loadPixels();
-
-for (int i = 0; i < halfImage; i++) {
-
- pixels[i+halfImage] = pixels[i];
-
-}
-
-updatePixels(50, 0, 50, 100); |
-
-
| Description | - -Updates the display window (or an image) when data in the pixels[] array has been modified. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() unless there are changes.
-
- - -Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. |
-
-
-
-
| Syntax | - -updatePixels() |
-
-
| Usage | - - - -Web & Application | - -
| Related | - -pixels[]
-
- loadPixels() |
-
-
| Name | - -vertex() |
-
-
-
- ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Examples | - - beginShape(POINTS); - -vertex(30, 20); - -vertex(85, 20); - -vertex(85, 75); - -vertex(30, 75); - -endShape();  // Drawing vertices in 3D requires P3D - -// or OPENGL as a parameter to size() - -size(100, 100, P3D); - -beginShape(POINTS); - -vertex(30, 20, -50); - -vertex(85, 20, -50); - -vertex(85, 75, -50); - -vertex(30, 75, -50); - -endShape();  noStroke();
-
-PImage a = loadImage("arch.jpg");
-
-beginShape();
-
-texture(a);
-
-// "arch.jpg" is 100x100 pixels in size so
-
-// the values 0 and 100 are used for the
-
-// parameters "u" and "v" to map it directly
-
-// to the vertex points
-
-vertex(10, 20, 0, 0);
-
-vertex(80, 5, 100, 0);
-
-vertex(95, 90, 100, 100);
-
-vertex(40, 95, 0, 100);
-
-endShape(); |
-
- ||||||||||
| Description | - -All shapes are constructed by connecting a series of vertices. vertex() is used to specify the vertex coordinates for points, lines, triangles, quads, and polygons and is used exclusively within the beginShape() and endShape() function. Drawing a vertex in 3D using the z parameter requires the P3D or OPENGL parameter in combination with size as shown in the above example. This function is also used to map a texture onto the geometry. The texture() function declares the texture to apply to the geometry and the u and v coordinates set define the mapping of this texture to the form. By default, the coordinates used for u and v are specified in relation to the image's size in pixels, but this relation can be changed with textureMode(). |
-
-
-
- ||||||||||
| Syntax | - -vertex(x, y);
-
-vertex(x, y, z);
-
-vertex(x, y, u, v);
-
-vertex(x, y, z, u, v); |
-
-
-
- ||||||||||
| Parameters | - -
|
-
- ||||||||||
| Usage | - - - -Application & Web | - -||||||||||
| Related | - -beginShape() - - endShape() - - bezierVertex() - - curveVertex() - - texture() |
-
-
-
-
| Name | - -void |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - -void setup() {
-
- size(200, 200);
-
-}
-
-
-
-void draw() {
-
- line(10, 100, 190, 100);
-
-} |
-
- ||||
| Description | - -Keyword used indicate a function returns no value. Each function must either return a value of a specific datatype or use the keyword void to specify it returns nothing. | - - - -||||
| Syntax | - -void function {
-
- statements
-
-} |
-
-
-
- ||||
| Parameters | - -
|
-
- ||||
| Usage | - -Web & Application | - -
| Name | - -while() |
-
- ||||
|---|---|---|---|---|---|
| Examples | - - - - int i=0;
-
-while(i<80) {
-
- line(30, i, 80, i);
-
- i = i + 5;
-
-} |
-
- ||||
| Description | - -Controls a sequence of repetitions. The while structure executes a series of statements continuously while the expression is true. The expression must be updated during the repetitions or the program will never "break out" of while.
-
-
-
- - -This function can be dangerous because the code inside the while() loop will not finish until the expression inside while() becomes true. It will lock out all other code from running (mouse events will not be updated, etc.) So be careful because this can lock up your code (and sometimes even the Processing environment itself) if used incorrectly. |
-
- ||||
| Syntax | - -while (expression) {
-
- statements
-
-
-
-} |
-
- ||||
| Parameters | - -
|
-
-
-
- ||||
| Usage | - -Web & Application | - -||||
| Related | - -for() |
-
-
| Name | - -width |
-
-
|---|---|
| Examples | - - - - noStroke(); - -background(0); - -rect(0, 40, width, 20); - -rect(0, 60, width/2, 20); |
-
-
| Description | - -System variable which stores the width of the display window. This value is set by the first parameter of the size() function. For example, the function call size(320, 240) sets the width variable to the value 320. The value of width is zero until size() is called. | - - - -
| Usage | - -Web & Application | - -
| Related | - -height |
-
-
| Name | - -year() |
-
-
-
- ||
|---|---|---|---|
| Examples | - -void setup() {
-
- PFont metaBold;
-
- metaBold = loadFont("fonts/Meta-Bold.ttf");
-
- setFont(metaBold, 44);
-
- noLoop();
-
-}
-
-
-
-void draw() {
-
- int d = day(); // Values from 1 - 31
-
- int m = month(); // Values from 1 - 12
-
- int y = year(); // 2003, 2004, 2005, etc.
-
- String s = String.valueOf(d);
-
- text(s, 10, 28);
-
- s = String.valueOf(m);
-
- text(s, 10, 56);
-
- s = String.valueOf(y);
-
- text(s, 10, 84);
-
-} |
-
- ||
| Description | - - - -Processing communicates with the clock on your computer. The year() function returns the current year as an integer (2003, 2004, 2005, etc). | - -||
| Syntax | - -year() |
-
-
-
- ||
| Parameters | - -
|
-
- ||
| Usage | - -Web & Application | - -||
| Related | - -
-
- millis() - - second() - - minute() - - hour() - - day() - - month() - - |
-
-