Processing.org Generator
+ +Select a preset, or choose what you’re going to update.
+ + + + +diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 000000000..93c4b27b4
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,2 @@
+github: processing
+custom: https://processingfoundation.org/
diff --git a/.gitignore b/.gitignore
index 902a05524..27c953a9e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,8 +9,9 @@ content/static/tools.html
books/
copyright.html
distribution/
+handbook/
reference/
-shop/
+/shop/
overview/
people/
robots.txt
@@ -19,4 +20,7 @@ foundation/
exhibition/
/examples/ # Ignore the folder at the root, but not inside "content"
about/
+contrib_generate/contribs.txt # File now built on the server side; don't need to track here
contrib_generate/contributions.txt # File now built on the server side; don't need to track here
+*~
+/bin/
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 000000000..9f20dd7ba
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,15 @@
+## Contributing to Processing
+
+Wow, thank you for helping us out!
+
+## Reporting Issues
+
+**[Here's how to report a bug with Processing.](https://github.com/processing/processing/wiki/Report-Bugs)**
+
+Before logging a new issue, please please please review [that document](https://github.com/processing/processing/wiki/Report-Bugs) closely. Processing is a complex project housed across several repositories. A quick read on your part now will save us all a lot of hassle later.
+
+## Other Contributions
+
+See the [Processing wiki](https://github.com/processing/processing/wiki#contribute) for how to contribute in other ways.
+
+Thank you!
diff --git a/ISSUE_TEMPLATE.md b/ISSUE_TEMPLATE.md
new file mode 100644
index 000000000..71ae8ba7c
--- /dev/null
+++ b/ISSUE_TEMPLATE.md
@@ -0,0 +1,10 @@
+### Issue description
+
+
+
+### URL(s) of affected page(s)
+
+
+
+### Proposed fix
+
diff --git a/README.md b/README.md
index c0183179c..60a674da3 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,14 @@
+> ⚠️ This repository is now deprecated and will be archived soon. If you have any issues or want to submit a pull request, please direct them to the [processing-website](https://github.com/processing/processing-website) repo. Make sure to check the [README](https://github.com/processing/processing-website/blob/main/README.md) for information on how to contribute to the documentation.
+
+
+
Processing Documentation
==========
-This is the official source code for the Processing reference, examples, tutorials, and [processing.org](http://processing.org) web site.
+~~This is the official source code for the Processing reference, examples, tutorials, and [processing.org](http://processing.org) web site.~~
-If you have found an error in the Processing reference, examples, tutorials, or website you can file it here under the ["issues" tab](https://github.com/processing/processing-docs/issues).
+~~If you have found an error in the Processing reference, examples, tutorials, or website you can file it here under the ["issues" tab](https://github.com/processing/processing-docs/issues).~~
-The [processing](https://github.com/processing/processing) repository contains the source code for Processing itself. (Please use that link to file issues regarding the Processing software.)
+~~The [processing](https://github.com/processing/processing) repository contains the source code for Processing itself. (Please use that link to file issues regarding the Processing software.)~~
diff --git a/config.php b/config.php
index bd64ed731..e18788ecd 100755
--- a/config.php
+++ b/config.php
@@ -1,4 +1,4 @@
-
+
+
-
+A JSONObject stores JSON data with multiple name/value pairs. Values can be numeric, Strings, booleans, other JSONObjects or JSONArrays, or null. JSONObject and JSONArray objects are quite similar and share most of the same methods; the primary difference is that the latter stores an array of JSON objects, while the former represents a single JSON object.
+
JSON can be generated from scratch, dynamically, or using data from an existing file. JSON can also be output and saved to disk, as in the example above.
]]>
+
The DXF library writes all triangle-based graphics (polygons, boxes, spheres, etc.) to a DXF file.
It works with the beginRaw() and endRaw() functions.
- These functions will grab and save the shape data just before it is rendered to the screen.
- At this stage, your entire scene is nothing but a long list of lines and triangles.
- This means that a shape created with the sphere() function will be made up of
- hundreds of triangles, rather than a single object.
-
+ These functions will grab and save the shape data just before it is rendered to the screen.
+ At this stage, your entire scene is nothing but a long list of lines and triangles.
+ This means that a shape created with the sphere() function will be made up of
+ hundreds of triangles, rather than a single object. The source code is available on the Processing GitHub repository. Please report bugs here.
+
Use an event function like a keyPressed() to trigger it, to avoid writing a
file each time through draw(). By default, the file will be saved to the
sketch's folder. Use Sketch > Show Sketch Folder to see it from the Processing Environment.
diff --git a/content/api_en/LIB_io/GPIO.xml b/content/api_en/LIB_io/GPIO.xml
new file mode 100755
index 000000000..035c8b7bd
--- /dev/null
+++ b/content/api_en/LIB_io/GPIO.xml
@@ -0,0 +1,23 @@
+
+
+
+
+The sketch method provided must accept a single integer (int) parameter, which is the
+number of the GPIO pin that the interrupt occured on. As this method might be called
+at any time, including when drawing to the display window isn't permitted, it is best
+to only set simple variables that are being responded to in the next draw() call, as
+shown above. Calling functions of the Hardware I/O library at this point is certainly
+possible.
+
+The mode parameter determines when the function will be called: GPIO.FALLING occurs when the level changes from high to low, GPIO.RISING when the level changes from low
+to high, and GPIO.CHANGE when either occurs.
+]]>
+
+You need to set the pin to input by calling pinMode() before calling this function.
+]]>
+
+You need to set the pin to output by calling pinMode() before calling this function. Unlike on Arduino, it is not possible to set a input pin's internal pull-up resistor using this function.
+]]>
+
+Use this function only in combination with enableInterrupt() and waitForInterrupt(). This should not be called when attachInterrupt() is being used.
+]]>
+
+Use this function only when calling waitForInterrupt(). This should not be called when attachInterrupt() is being used.
+]]>
+
+You can use noInterrupts() and interrupts() in tandem to make sure no interrupts are occuring while your sketch is doing a particular task. By default, interrupts are enabled.
+]]>
+
+You can use noInterrupts() and interrupts() in tandem to make sure no interrupts are occuring while your sketch is doing a particular task.
+
+While a method associated with a pin's interrupt is being executed, interrupts from the same pin are automatically prevented from occurring. Interrupts from other pins can still happen, however. If you also want to prevent those, put noInterrupts() at the beginning of your callback function and interrupts() at its end.
+]]>
+
+
+Unlike on Arduino, where pins are implicitly set to inputs by default, it is necessary
+to call this function for any pin you want to access, including input pins.
+
+Pull-up and pull-down resistors are very useful when connecting buttons and switches, since they will force the value of the pin in a specified electrical state when no electrical connection is made, and the pin would otherwise be left "floating".
+
+The ability to set (and clear) pull-up and pull-down resistors is currently limited to the Raspberry Pi running the Raspbian distribution. On other systems, a warning will be shown.
+]]>
+
+
+Without calling this function, the pin will remain in the current state even after the sketch has been closed.
+]]>
+
+The mode parameter determines when the function will return: GPIO.FALLING occurs when the level changes from high to low, GPIO.RISING when the level changes from low to high, and GPIO.CHANGE when either occurs.
+
+The optional timeout parameter determines how many milliseconds the function will wait at the most. If the value of the input pin hasn't changed at this point, an exception is raised for this line. Without a timeout parameter the function will wait indefinitely until the input pin has changed to the desired state.
+]]>> 8);
+ i2c.write(val & 255);
+ i2c.endTransmission();
+}
+
+]]>
+
+I2C is a serial bus, commonly used to attach peripheral ICs (Integrated Circuits)
+to processors and microcontrollers. It uses two pins, SDA (for data) and SDL (for
+the clock signal). Multiple "slave" devices can be connected to the same bus, as
+long as they are responding to different addresses (see below).
+
+The I2C "master" device initiates a transmission, which includes sending the
+address of the desired "slave" device. I2C addresses consist of 7 bits plus one
+bit that indicates whether the device is being read from or written to. Some
+datasheets list the address in an 8 bit form (7 address bits + R/W bit), while
+others provide the address in a 7 bit form, with the address in the lower 7 bits.
+
+This library expects addresses in their 7 bit form, similar to Arduino's Wire
+library, and what is being output by the i2cdetect utility on Linux. If the
+address provided in a datasheet is greater than 127 (hex 0x7f) or there are
+separate addresses for read and write operations listed, which vary exactly by
+one, then you want to shift the this number by one bit to the right before passing
+it as an argument to beginTransmission().
+]]>> 8);
+ dac.write(val & 255);
+ dac.endTransmission();
+}
+
+]]>
+
+This function expects the address in the lower 7 bits, the same way as in Arduino's Wire library, and as shown in the output of the i2cdetect tool. If the address provided in a datasheet is greater than 127 (hex 0x7f) or there are separate addresses for read and write operations listed, which vary exactly by one, then you want to shift the this number by one bit to the right before passing it as an argument to this function.
+]]>> 8);
+ i2c.write(val & 255);
+ i2c.endTransmission();
+ // and close interface again
+ i2c.close();
+}
+
+]]>
+> 8);
+ dac.write(val & 255);
+ dac.endTransmission();
+}
+
+]]>
+
+This executes any queued writes. Read()
+implicitly ends the current transmission as well, hence calling
+endTransmission() afterwards is not necessary.
+]]>
+
+
+You must call beginTransmission() before calling this function.
+This function also ends the current transmission and sends any data
+that was queued using write() before. It is not necessary to call
+endTransmission() after read().
+]]>> 8);
+ dac.write(val & 255);
+ dac.endTransmission();
+}
+
+]]>
+
+You must call beginTransmission() before calling this function. The actual writing takes part when read() or endTransmission() is being called.
+]]>
+
+This class can control your computer's build-in LEDs, such as the ones
+commonly used to indicate the power status and disk activity.
+
+Your operating system might not be set up to allow regular users to do
+this kind of modification. If this is the case you should install a
+so-called udev rule that relaxes the permissions for the files
+in /sys/class/leds. You can also try running Processing as root user
+using "sudo", but this is generally not recommended.
+]]>
+
+
+Without calling this function the LED will remain in the current state even after the sketch has been closed.
+]]>
+
+
+
+
+Without calling this function the channel will remain in the current state even after the sketch has been closed.
+]]>
+
+
+When no period is specified, a default 1 kHz (1000 Hz) is used.
+]]>> 3);
+ // val is between 0 and 1023
+ println(val);
+}
+
+]]>
+
+
+The "master" device initiates a transfer by pulling the SS pin of the "slave"
+low, and begins outputting a clock signal. In SPI, both the "master" as well as
+the "slave" device output data at the same time. It is hence not possible to
+read data without writing some (even if it means outputting zeros or other
+dummy data).
+
+There are multiple possible configuration settings for SPI, see
+settings() for details.
+
+This library supports multiple SPI objects making use of the same SPI
+interface.
+]]>> 3);
+ // val is between 0 and 1023
+ println(val);
+ // and close interface again
+ adc.close();
+}
+
+]]>
+
+> 3);
+ // val is between 0 and 1023
+ println(val);
+}
+
+]]>
+
+The default setting is: 500000, SPI.MSBFIRST, SPI.MODE0
+]]>> 3);
+ // val is between 0 and 1023
+ println(val);
+}
+
+]]>
+
+With SPI, data is simultaneously being exchanged between the master device and the slave device. For every byte that is being sent out, there's also one byte being read in.
+]]>
+
+
+Connect the signal wire (typically colored yellow) to any available GPIO pin
+and control the servo's angle as shown in the example sketch.
+]]>
+
+You must call this function before calling write(). Note that the
+servo motor will only be instructed to move after the first time
+write() is called.
+
+The optional parameters minPulse and maxPulse control the minimum
+and maximum pulse width durations. The default values, identical to
+those of Arduino's Servo class, should be compatible with most servo
+motors.
+]]>
+
+
+Calling this method will stop the servo from moving or trying to
+hold the current orientation.
+]]>
+
+If you are using this class in combination with a continuous rotation
+servo, different angles will result in the servo rotating forward or
+backward at different speeds. For regular servo motors, this will
+instruct the servo to rotate to and hold a specific angle.
+]]>
+ The Hardware I/O library allows access to the computer's hardware periperals, such as digital + inputs and outputs, serial busses, and the like, in a fashion similar to the Arduino plaform. + This library is only available for embedded Linux boards with the necessary kernel drivers, + such as the Raspberry Pi. +
++ The source code is available on the processing GitHub repository. Please report bugs here. +
+ ++
+ The GPIO class reads and writes from General Purpose I/O pins.
+
+ pinMode()
+ digitalWrite()
+ digitalRead()
+ attachInterrupt()
+ noInterrupts()
+ interrupts()
+ releaseInterrupt()
+ waitFor()
+ releasePin()
+
+
+ The I2C class communicates with peripherals over I2C interfaces.
+
+ I2C
+ list()
+ beginTransmission()
+ write()
+ read()
+ endTransmission()
+ close()
+
+
+ The LED class controls the computer's build-in lights.
+
+ LED
+ list()
+ brightness()
+ close()
+
+
+ +
+ Use the SoftwareServo class below for the time being. Hardware PWM has yet to be made available by the hardware platforms we support.
+
+ PWM
+ list()
+ set()
+ clear()
+ close()
+
+
+ The SoftwareServo class controls RC servo motors attached to General Purpose I/O pins.
+
+ SoftwareServo
+ attach()
+ write()
+ attached()
+ detach()
+
+
+ The SPI class communicates with attached devices over SPI interfaces.
+
+ SPI
+ list()
+ settings()
+ transfer()
+ close()
+
+
+
+
+active()
+
+Client
+
+Client
+
+Application
+
+
+
+ 0) {
+ dataIn = myClient.read();
+ }
+ } else {
+ println("Client is not active.");
+ }
+ background(dataIn);
+}
+
+void mousePressed() {
+ myClient.stop();
+}
+
+]]>
+
+
+true if this client is still active and hasn't run into any trouble.
+]]>
+
+
+
\ No newline at end of file
diff --git a/content/api_en/LIB_net/Client_clear.xml b/content/api_en/LIB_net/Client_clear.xml
index 99c19711d..3f364f377 100755
--- a/content/api_en/LIB_net/Client_clear.xml
+++ b/content/api_en/LIB_net/Client_clear.xml
@@ -12,8 +12,6 @@
-1 or 0xffff if nothing is there.
]]>
diff --git a/content/api_en/LIB_net/Client_readString.xml b/content/api_en/LIB_net/Client_readString.xml
index 073eb720e..3e05ffa16 100755
--- a/content/api_en/LIB_net/Client_readString.xml
+++ b/content/api_en/LIB_net/Client_readString.xml
@@ -12,8 +12,6 @@
+
+
+active()
+
+Server
+
+Server
+
+Application
+
+
+
+
+
+
+true if this server is still active and hasn't run into any trouble.
+]]>
+
+
+
diff --git a/content/api_en/LIB_net/Server_available.xml b/content/api_en/LIB_net/Server_available.xml
index 345bd9fa3..930a984b1 100755
--- a/content/api_en/LIB_net/Server_available.xml
+++ b/content/api_en/LIB_net/Server_available.xml
@@ -12,8 +12,6 @@
diff --git a/content/api_en/LIB_net/index.html b/content/api_en/LIB_net/index.html
index 5890c1069..0296b32e5 100755
--- a/content/api_en/LIB_net/index.html
+++ b/content/api_en/LIB_net/index.html
@@ -3,20 +3,22 @@
- The Network library makes it easy to read and write data across machines on the Internet.
- It allows the creation clients and servers. A server connects to a list of clients for
- reading and writing data. A client is able to read and write data to a server.
+ The Network library makes it possible to read and write data across machines on the Internet. It allows the creation clients and servers. A server connects to a list of clients for reading and writing data. A client is able to read and write data to a server.
+
+ The source code is available on the Processing GitHub repository. Please report bugs here.
+
+
Client
- The Client class is used to create Client objects that connect to a server
- to exchange data.
+
The Client class is used to create Client objects that connect to a server to exchange data.
Client
available()
+ active()
read()
readChar()
readBytes()
@@ -31,16 +33,16 @@
Client
-
+
Server
- The Server class is used to create Server objects that send and receive
- data to and from associated clients, the other programs connected to it.
+
The Server class is used to create Server objects that send and receive data to and from associated clients, the other programs connected to it.
Server
write()
available()
+ active()
stop()
disconnect()
ip()
diff --git a/content/api_en/LIB_net/serverEvent.xml b/content/api_en/LIB_net/serverEvent.xml
index fafa8b0ff..c4fbb2374 100755
--- a/content/api_en/LIB_net/serverEvent.xml
+++ b/content/api_en/LIB_net/serverEvent.xml
@@ -11,7 +11,6 @@
PDF Export
- The PDF library makes it possible to write PDF files directly from Processing. These vector graphics files can be scaled to any size and output at very high resolutions. The PDF library can flatten 3D data into a 2D vector file, but to export 3D data, use the DXF library.
+
The PDF library makes it possible to write PDF files directly from Processing. These vector graphics files can be scaled to any size and output at very high resolutions. The PDF library can flatten 3D data into a 2D vector file, but to export 3D data, use the DXF library. The source code is available on the Processing GitHub repository. Please report bugs here.
This library is frequently used with the core Processing function size(), with a combination of beginRecord() and endRecord(), or with beginRaw() and endRaw(). The createGraphics() function can also be useful. See the examples below for different techniques.
@@ -45,11 +45,12 @@
line(0, 0, frameCount * 4, height);
PGraphicsPDF pdf = (PGraphicsPDF) g; // Get the renderer
- pdf.nextPage(); // Tell it to go to the next page
// When finished drawing, quit and save the file
if (frameCount == 100) {
exit();
+ } else {
+ pdf.nextPage(); // Tell it to go to the next page
}
}
@@ -256,6 +257,8 @@
If you want 3D data, use the DXF recording library instead.
+ Using hint(ENABLE_DEPTH_SORT) can improve the appearance of 3D geometry drawn to 2D file formats.
+
Images don't look great, mostly because of the difference of
expectations in how a PDF should look (scalable and high res) versus
what happens when image data is written to it at 72 dpi.
diff --git a/content/api_en/LIB_serial/Serial.xml b/content/api_en/LIB_serial/Serial.xml
index a7c9d173b..ab2ff404b 100755
--- a/content/api_en/LIB_serial/Serial.xml
+++ b/content/api_en/LIB_serial/Serial.xml
@@ -19,7 +19,7 @@ import processing.serial.*;
Serial myPort;
// List all the available serial ports:
-println(Serial.list());
+printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
diff --git a/content/api_en/LIB_serial/Serial_available.xml b/content/api_en/LIB_serial/Serial_available.xml
index 27e752d31..333a58039 100755
--- a/content/api_en/LIB_serial/Serial_available.xml
+++ b/content/api_en/LIB_serial/Serial_available.xml
@@ -21,7 +21,7 @@ Serial myPort;
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
diff --git a/content/api_en/LIB_serial/Serial_buffer.xml b/content/api_en/LIB_serial/Serial_buffer.xml
index d0b4de3e7..a7202aeeb 100755
--- a/content/api_en/LIB_serial/Serial_buffer.xml
+++ b/content/api_en/LIB_serial/Serial_buffer.xml
@@ -27,7 +27,7 @@ void setup() {
myFont = loadFont("ArialMS-18.vlw");
textFont(myFont, 18);
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.buffer(3);
diff --git a/content/api_en/LIB_serial/Serial_bufferUntil.xml b/content/api_en/LIB_serial/Serial_bufferUntil.xml
index 0a0bed6d8..e190976a4 100755
--- a/content/api_en/LIB_serial/Serial_bufferUntil.xml
+++ b/content/api_en/LIB_serial/Serial_bufferUntil.xml
@@ -12,22 +12,16 @@
serialEvent().
]]>
diff --git a/content/api_en/LIB_serial/Serial_clear.xml b/content/api_en/LIB_serial/Serial_clear.xml
index bba746386..fa56986ea 100755
--- a/content/api_en/LIB_serial/Serial_clear.xml
+++ b/content/api_en/LIB_serial/Serial_clear.xml
@@ -22,7 +22,7 @@ int i = 0;
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
diff --git a/content/api_en/LIB_serial/Serial_last.xml b/content/api_en/LIB_serial/Serial_last.xml
index a227e56da..cbee0c6fd 100755
--- a/content/api_en/LIB_serial/Serial_last.xml
+++ b/content/api_en/LIB_serial/Serial_last.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port:
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
@@ -36,7 +36,7 @@ void draw() {
diff --git a/content/api_en/LIB_serial/Serial_lastChar.xml b/content/api_en/LIB_serial/Serial_lastChar.xml
index ae7972292..455e50213 100755
--- a/content/api_en/LIB_serial/Serial_lastChar.xml
+++ b/content/api_en/LIB_serial/Serial_lastChar.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port:
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.write(45);
@@ -37,7 +37,7 @@ void draw() {
diff --git a/content/api_en/LIB_serial/Serial_list.xml b/content/api_en/LIB_serial/Serial_list.xml
index e1e33476b..e5c448ef4 100755
--- a/content/api_en/LIB_serial/Serial_list.xml
+++ b/content/api_en/LIB_serial/Serial_list.xml
@@ -20,7 +20,7 @@ import processing.serial.*;
Serial myPort;
// List all the available serial ports
-println(Serial.list());
+printArray(Serial.list());
]]>
diff --git a/content/api_en/LIB_serial/Serial_read.xml b/content/api_en/LIB_serial/Serial_read.xml
index c628cb39c..5e8fecb8a 100755
--- a/content/api_en/LIB_serial/Serial_read.xml
+++ b/content/api_en/LIB_serial/Serial_read.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port
void setup() {
// List all the available serial ports
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
diff --git a/content/api_en/LIB_serial/Serial_readBytes.xml b/content/api_en/LIB_serial/Serial_readBytes.xml
index d033fc557..ce01e36f4 100755
--- a/content/api_en/LIB_serial/Serial_readBytes.xml
+++ b/content/api_en/LIB_serial/Serial_readBytes.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port
void setup() {
// List all the available serial ports
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
@@ -42,7 +42,7 @@ void draw() {
byteBuffer parameter is more memory and time efficient. It grabs the data in the buffer and puts it into the byte array passed in and returns an int value for the number of bytes read. If more bytes are available than can fit into the byteBuffer, only those that fit are read.
+Reads a group of bytes from the buffer or null if there are none available. The version with no parameters returns a byte array of all data in the buffer. This is not efficient, but is easy to use. The version with the byteBuffer parameter is more memory and time efficient. It grabs the data in the buffer and puts it into the byte array passed in and returns an int value for the number of bytes read. If more bytes are available than can fit into the byteBuffer, only those that fit are read.
]]>
diff --git a/content/api_en/LIB_serial/Serial_readBytesUntil.xml b/content/api_en/LIB_serial/Serial_readBytesUntil.xml
index 1128ab0a7..fb7773582 100755
--- a/content/api_en/LIB_serial/Serial_readBytesUntil.xml
+++ b/content/api_en/LIB_serial/Serial_readBytesUntil.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.write(65);
@@ -43,7 +43,7 @@ void draw() {
byteBuffer parameter returns a byte array of all data up to and including the interesting byte. This is not efficient, but is easy to use. The version with the byteBuffer parameter is more memory and time efficient. It grabs the data in the buffer and puts it into the byte array passed in and returns an int value for the number of bytes read. If the byte buffer is not large enough, -1 is returned and an error is printed to the message area. If nothing is in the buffer, 0 is returned.
+Reads from the port into a buffer of bytes up to and including a particular character. If the character isn't in the buffer, null is returned. The version with without the byteBuffer parameter returns a byte array of all data up to and including the interesting byte. This is not efficient, but is easy to use. The version with the byteBuffer parameter is more memory and time efficient. It grabs the data in the buffer and puts it into the byte array passed in and returns an int value for the number of bytes read. If the byte buffer is not large enough, -1 is returned and an error is printed to the message area. If nothing is in the buffer, 0 is returned.
]]>
diff --git a/content/api_en/LIB_serial/Serial_readChar.xml b/content/api_en/LIB_serial/Serial_readChar.xml
index c2f16d1b9..87ef03e44 100755
--- a/content/api_en/LIB_serial/Serial_readChar.xml
+++ b/content/api_en/LIB_serial/Serial_readChar.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port:
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
@@ -37,7 +37,7 @@ void draw() {
-1 or 0xffff if nothing is there.
]]>
diff --git a/content/api_en/LIB_serial/Serial_readString.xml b/content/api_en/LIB_serial/Serial_readString.xml
index 480009f51..6a960337e 100755
--- a/content/api_en/LIB_serial/Serial_readString.xml
+++ b/content/api_en/LIB_serial/Serial_readString.xml
@@ -20,7 +20,7 @@ Serial myPort; // The serial port
void setup() {
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
@@ -38,7 +38,7 @@ void draw() {
null if there is nothing available. This method assumes the incoming characters are ASCII. If you want to transfer Unicode data, first convert the String to a byte stream in the representation of your choice (i.e. UTF8 or two-byte Unicode data), and send it as a byte array.
]]>
diff --git a/content/api_en/LIB_serial/Serial_readStringUntil.xml b/content/api_en/LIB_serial/Serial_readStringUntil.xml
index c4b40e0d2..3e1829318 100755
--- a/content/api_en/LIB_serial/Serial_readStringUntil.xml
+++ b/content/api_en/LIB_serial/Serial_readStringUntil.xml
@@ -22,7 +22,7 @@ Serial myPort; // The serial port
void setup() {
// List all the available serial ports
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
myPort.clear();
diff --git a/content/api_en/LIB_serial/Serial_stop.xml b/content/api_en/LIB_serial/Serial_stop.xml
index 7c1eb70b4..66d1196a0 100755
--- a/content/api_en/LIB_serial/Serial_stop.xml
+++ b/content/api_en/LIB_serial/Serial_stop.xml
@@ -22,7 +22,7 @@ int i = 0;
void setup() {
// List all the available serial ports
- println(Serial.list());
+ printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
}
diff --git a/content/api_en/LIB_serial/Serial_write.xml b/content/api_en/LIB_serial/Serial_write.xml
index fb15f8d2b..bf5df831f 100755
--- a/content/api_en/LIB_serial/Serial_write.xml
+++ b/content/api_en/LIB_serial/Serial_write.xml
@@ -20,7 +20,7 @@ import processing.serial.*;
Serial myPort;
// List all the available serial ports:
-println(Serial.list());
+printArray(Serial.list());
// Open the port you are using at the rate you want:
myPort = new Serial(this, Serial.list()[0], 9600);
diff --git a/content/api_en/LIB_serial/index.html b/content/api_en/LIB_serial/index.html
index 5f010d3fe..cef84c171 100755
--- a/content/api_en/LIB_serial/index.html
+++ b/content/api_en/LIB_serial/index.html
@@ -3,18 +3,14 @@
- The Serial library is for reading and writing data to and from external devices one byte
- at a time. It allows two computers to send and receive data. This library has the flexibility
- to communicate with custom microcontroller devices and to use them as the input
- or output to Processing programs. The serial port is a nine pin I/O port that exists on
- many PCs and can be emulated through USB.
-
+ The Serial library reads and writes data to and from external devices one byte at a time. It allows two computers to send and receive data. This library has the flexibility to communicate with custom microcontroller devices and to use them as the input or output to Processing programs. The serial port is a nine pin I/O port that exists on many PCs and can be emulated through USB.
- Issues with the Serial Library and specific platforms are documented on
- the Processing Wiki.
-
-
+ Issues related to the Serial library on different platforms are documented on the Processing Wiki. The source code is available on the processing GitHub repository.
+
+
+ When sending data to the console, such as via print() or println(), note that the console is relatively slow. It does not support high-speed, real-time output (such as at 60 frames per second). For real-time monitoring of serial values, render those values to the Processing window during draw().
+
@@ -37,14 +33,14 @@ Serial
write()
clear()
stop()
- list()
+ list()
-
+
-
+
Serial Event
diff --git a/content/api_en/LIB_serial/serialEvent.xml b/content/api_en/LIB_serial/serialEvent.xml
index 91718067c..2f3f5b8de 100755
--- a/content/api_en/LIB_serial/serialEvent.xml
+++ b/content/api_en/LIB_serial/serialEvent.xml
@@ -26,7 +26,7 @@ void setup() {
myFont = loadFont("ArialMS-18.vlw");
textFont(myFont, 18);
// List all the available serial ports:
- println(Serial.list());
+ printArray(Serial.list());
// I know that the first port in the serial list on my mac
// is always my Keyspan adaptor, so I open Serial.list()[0].
// Open whatever port is the one you're using.
diff --git a/content/api_en/LIB_sound/Amplitude.xml b/content/api_en/LIB_sound/Amplitude.xml
new file mode 100755
index 000000000..0822d6d93
--- /dev/null
+++ b/content/api_en/LIB_sound/Amplitude.xml
@@ -0,0 +1,42 @@
+
+
+Amplitude
+
+Sound
+
+Analyzer
+
+Application
+
+Object
+
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Amplitude_analyze.xml b/content/api_en/LIB_sound/Amplitude_analyze.xml
new file mode 100755
index 000000000..f7f92824f
--- /dev/null
+++ b/content/api_en/LIB_sound/Amplitude_analyze.xml
@@ -0,0 +1,60 @@
+
+
+
+analyze()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
+amp .analyze()
+
+
+
+
+
+
+
+float
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Amplitude_input.xml b/content/api_en/LIB_sound/Amplitude_input.xml
new file mode 100755
index 000000000..2d4f89641
--- /dev/null
+++ b/content/api_en/LIB_sound/Amplitude_input.xml
@@ -0,0 +1,60 @@
+
+
+
+input()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
+amp .input()
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Amplitude_stop.xml b/content/api_en/LIB_sound/Amplitude_stop.xml
new file mode 100755
index 000000000..5cbc938da
--- /dev/null
+++ b/content/api_en/LIB_sound/Amplitude_stop.xml
@@ -0,0 +1,64 @@
+
+
+
+stop()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
+amp .stop()
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioDevice.xml b/content/api_en/LIB_sound/AudioDevice.xml
new file mode 100755
index 000000000..1172dc020
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioDevice.xml
@@ -0,0 +1,60 @@
+
+
+AudioDevice
+
+Sound
+
+Configuration
+
+Application
+
+
+
+
+
+
+
+
+
+AudioDevice(parent , samplerate , buffersize )
+
+
+parent
+PApplet: typically use "this"
+
+
+
+sampleRate
+int: samplerate (i.e. 44100/48000/96000)
+
+
+
+bufferSize
+int: buffersize (i.e. 32/64/128 ..)
+
+
+
+Sound
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/AudioIn.xml b/content/api_en/LIB_sound/AudioIn.xml
new file mode 100755
index 000000000..59c9c205c
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn.xml
@@ -0,0 +1,106 @@
+
+
+AudioIn
+
+Sound
+
+IO
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+start()
+Start the Input Stream
+
+
+
+play()
+Start the Input Stream and route it to the Audio Hardware Output
+
+
+
+stop()
+Stop the Input Stream
+
+
+
+amp()
+Change the amplitude/volume of the input stream
+
+
+
+add()
+Offset the output of the input stream by given value
+
+
+
+pan()
+Move the sound in a stereo panorama
+
+
+
+set()
+Set multiple parameters at once
+
+
+
+AudioIn(parent , input channel )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+input channel
+int: input channel
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_add.xml b/content/api_en/LIB_sound/AudioIn_add.xml
new file mode 100755
index 000000000..13f7472f9
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_add.xml
@@ -0,0 +1,54 @@
+
+
+
+add()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+noise .add(add)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_amp.xml b/content/api_en/LIB_sound/AudioIn_amp.xml
new file mode 100755
index 000000000..e63eda08b
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_amp.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_pan.xml b/content/api_en/LIB_sound/AudioIn_pan.xml
new file mode 100755
index 000000000..56a19f2a7
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_pan.xml
@@ -0,0 +1,60 @@
+
+
+
+pan()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_play.xml b/content/api_en/LIB_sound/AudioIn_play.xml
new file mode 100755
index 000000000..aa6eed4d7
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_play.xml
@@ -0,0 +1,57 @@
+
+
+
+play()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .play()
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_set.xml b/content/api_en/LIB_sound/AudioIn_set.xml
new file mode 100755
index 000000000..6c773ba07
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_set.xml
@@ -0,0 +1,59 @@
+
+
+
+set()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .set(amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_start.xml b/content/api_en/LIB_sound/AudioIn_start.xml
new file mode 100755
index 000000000..7cd7401eb
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_start.xml
@@ -0,0 +1,57 @@
+
+
+
+start()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .start()
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioIn_stop.xml b/content/api_en/LIB_sound/AudioIn_stop.xml
new file mode 100755
index 000000000..2a39b1476
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioIn_stop.xml
@@ -0,0 +1,56 @@
+
+
+
+stop()
+
+IO
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+in .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample.xml b/content/api_en/LIB_sound/AudioSample.xml
new file mode 100755
index 000000000..053be266c
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample.xml
@@ -0,0 +1,49 @@
+
+
+AudioSample
+
+Sound
+
+Audio Files
+
+Application
+
+
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_amp.xml b/content/api_en/LIB_sound/AudioSample_amp.xml
new file mode 100644
index 000000000..7a1181b3e
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_amp.xml
@@ -0,0 +1,42 @@
+
+
+
+play()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_channels.xml b/content/api_en/LIB_sound/AudioSample_channels.xml
new file mode 100755
index 000000000..af430a14d
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_channels.xml
@@ -0,0 +1,40 @@
+
+
+
+channels()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_cue.xml b/content/api_en/LIB_sound/AudioSample_cue.xml
new file mode 100755
index 000000000..c4eae7ace
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_cue.xml
@@ -0,0 +1,37 @@
+
+
+
+cue()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_duration.xml b/content/api_en/LIB_sound/AudioSample_duration.xml
new file mode 100755
index 000000000..b083d3e47
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_duration.xml
@@ -0,0 +1,38 @@
+
+
+
+duration()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_frames.xml b/content/api_en/LIB_sound/AudioSample_frames.xml
new file mode 100755
index 000000000..c58a3c077
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_frames.xml
@@ -0,0 +1,36 @@
+
+
+
+frames()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_isPlaying.xml b/content/api_en/LIB_sound/AudioSample_isPlaying.xml
new file mode 100755
index 000000000..9a7ab422b
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_isPlaying.xml
@@ -0,0 +1,45 @@
+
+
+
+isPlaying()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_jump.xml b/content/api_en/LIB_sound/AudioSample_jump.xml
new file mode 100755
index 000000000..290eb7cfd
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_jump.xml
@@ -0,0 +1,36 @@
+
+
+
+jump()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_loop.xml b/content/api_en/LIB_sound/AudioSample_loop.xml
new file mode 100644
index 000000000..f95b7e484
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_loop.xml
@@ -0,0 +1,40 @@
+
+
+
+loop()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_pan.xml b/content/api_en/LIB_sound/AudioSample_pan.xml
new file mode 100755
index 000000000..7b2b176db
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_pan.xml
@@ -0,0 +1,38 @@
+
+
+
+pan()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_pause.xml b/content/api_en/LIB_sound/AudioSample_pause.xml
new file mode 100755
index 000000000..67ece9ab7
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_pause.xml
@@ -0,0 +1,51 @@
+
+
+
+pause()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_play.xml b/content/api_en/LIB_sound/AudioSample_play.xml
new file mode 100755
index 000000000..d1584ae38
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_play.xml
@@ -0,0 +1,40 @@
+
+
+
+play()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_rate.xml b/content/api_en/LIB_sound/AudioSample_rate.xml
new file mode 100755
index 000000000..fbe8dc446
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_rate.xml
@@ -0,0 +1,47 @@
+
+
+
+rate()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_read.xml b/content/api_en/LIB_sound/AudioSample_read.xml
new file mode 100755
index 000000000..b21fc039a
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_read.xml
@@ -0,0 +1,56 @@
+
+
+
+read()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+AudioSample.frames()
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_resize.xml b/content/api_en/LIB_sound/AudioSample_resize.xml
new file mode 100755
index 000000000..d326abdc6
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_resize.xml
@@ -0,0 +1,40 @@
+
+
+
+resize()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_sampleRate.xml b/content/api_en/LIB_sound/AudioSample_sampleRate.xml
new file mode 100755
index 000000000..b67c1fb85
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_sampleRate.xml
@@ -0,0 +1,37 @@
+
+
+
+sampleRate()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/AudioSample_write.xml b/content/api_en/LIB_sound/AudioSample_write.xml
new file mode 100755
index 000000000..e8cfbeb4c
--- /dev/null
+++ b/content/api_en/LIB_sound/AudioSample_write.xml
@@ -0,0 +1,49 @@
+
+
+
+write()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+AudioSample.read
+
+
diff --git a/content/api_en/LIB_sound/BandPass.xml b/content/api_en/LIB_sound/BandPass.xml
new file mode 100755
index 000000000..4eef4cc78
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass.xml
@@ -0,0 +1,97 @@
+
+
+BandPass
+
+Sound
+
+Effects
+
+Application
+
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BandPass_bw.xml b/content/api_en/LIB_sound/BandPass_bw.xml
new file mode 100755
index 000000000..d761114ac
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass_bw.xml
@@ -0,0 +1,63 @@
+
+
+
+freq()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+bandPass .bw()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/BandPass_freq.xml b/content/api_en/LIB_sound/BandPass_freq.xml
new file mode 100755
index 000000000..de6f9b28d
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass_freq.xml
@@ -0,0 +1,61 @@
+
+
+
+freq()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+bandPass .freq()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/BandPass_process.xml b/content/api_en/LIB_sound/BandPass_process.xml
new file mode 100755
index 000000000..113cdacca
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass_process.xml
@@ -0,0 +1,57 @@
+
+
+
+process()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+bandPass .process()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/BandPass_set.xml b/content/api_en/LIB_sound/BandPass_set.xml
new file mode 100755
index 000000000..d85cfe726
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass_set.xml
@@ -0,0 +1,64 @@
+
+
+
+set()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+bandPass .set(freq, bw)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
\ No newline at end of file
diff --git a/content/api_en/LIB_sound/BandPass_stop.xml b/content/api_en/LIB_sound/BandPass_stop.xml
new file mode 100755
index 000000000..7e7143aeb
--- /dev/null
+++ b/content/api_en/LIB_sound/BandPass_stop.xml
@@ -0,0 +1,66 @@
+
+
+
+play()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+bandPass .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise.xml b/content/api_en/LIB_sound/BrownNoise.xml
new file mode 100755
index 000000000..f8b95cac7
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise.xml
@@ -0,0 +1,35 @@
+
+
+BrownNoise
+
+Sound
+
+Noise
+
+Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_add.xml b/content/api_en/LIB_sound/BrownNoise_add.xml
new file mode 100755
index 000000000..d00869e8d
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_add.xml
@@ -0,0 +1,38 @@
+
+
+
+add()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_amp.xml b/content/api_en/LIB_sound/BrownNoise_amp.xml
new file mode 100755
index 000000000..4264c2f4b
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_amp.xml
@@ -0,0 +1,38 @@
+
+
+
+amp()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_pan.xml b/content/api_en/LIB_sound/BrownNoise_pan.xml
new file mode 100755
index 000000000..6644626fd
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_pan.xml
@@ -0,0 +1,39 @@
+
+
+
+pan()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_play.xml b/content/api_en/LIB_sound/BrownNoise_play.xml
new file mode 100755
index 000000000..915d8cfcb
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_play.xml
@@ -0,0 +1,37 @@
+
+
+
+play()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_set.xml b/content/api_en/LIB_sound/BrownNoise_set.xml
new file mode 100755
index 000000000..a24a1c3ef
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_set.xml
@@ -0,0 +1,44 @@
+
+
+
+set()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/BrownNoise_stop.xml b/content/api_en/LIB_sound/BrownNoise_stop.xml
new file mode 100755
index 000000000..6111b73ae
--- /dev/null
+++ b/content/api_en/LIB_sound/BrownNoise_stop.xml
@@ -0,0 +1,41 @@
+
+
+
+stop()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Delay.xml b/content/api_en/LIB_sound/Delay.xml
new file mode 100755
index 000000000..11f75607d
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay.xml
@@ -0,0 +1,106 @@
+
+
+Delay
+
+Sound
+
+Effects
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+process()
+Start the delay effect
+
+
+
+stop()
+stop the delay effect
+
+
+
+time()
+Change the delay time of the effect
+
+
+
+feedback()
+Change the feedback of the effect
+
+
+
+stop()
+Stop the delay effect
+
+
+
+Delay(parent , time )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+time
+maximum delay time as float
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/Delay_feedback.xml b/content/api_en/LIB_sound/Delay_feedback.xml
new file mode 100755
index 000000000..39f6ce391
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay_feedback.xml
@@ -0,0 +1,64 @@
+
+
+
+feedback()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .feedback()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Delay_process.xml b/content/api_en/LIB_sound/Delay_process.xml
new file mode 100755
index 000000000..03a7891ca
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay_process.xml
@@ -0,0 +1,63 @@
+
+
+
+process()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .process()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Delay_set.xml b/content/api_en/LIB_sound/Delay_set.xml
new file mode 100755
index 000000000..2c6ecd214
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay_set.xml
@@ -0,0 +1,70 @@
+
+
+
+set()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .set()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Delay_stop.xml b/content/api_en/LIB_sound/Delay_stop.xml
new file mode 100755
index 000000000..96df0b1a3
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay_stop.xml
@@ -0,0 +1,68 @@
+
+
+
+stop()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Delay_time.xml b/content/api_en/LIB_sound/Delay_time.xml
new file mode 100755
index 000000000..1ee72eee0
--- /dev/null
+++ b/content/api_en/LIB_sound/Delay_time.xml
@@ -0,0 +1,63 @@
+
+
+
+time()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .time()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Env.xml b/content/api_en/LIB_sound/Env.xml
new file mode 100755
index 000000000..1245cd657
--- /dev/null
+++ b/content/api_en/LIB_sound/Env.xml
@@ -0,0 +1,83 @@
+
+
+Env
+
+Sound
+
+Envelopes
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+play()
+Trigger the envelope
+
+
+
+Env(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/Env_play.xml b/content/api_en/LIB_sound/Env_play.xml
new file mode 100755
index 000000000..71f0207f7
--- /dev/null
+++ b/content/api_en/LIB_sound/Env_play.xml
@@ -0,0 +1,67 @@
+
+
+
+play()
+
+Envelopes
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+env .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/FFT.xml b/content/api_en/LIB_sound/FFT.xml
new file mode 100755
index 000000000..77bc8750e
--- /dev/null
+++ b/content/api_en/LIB_sound/FFT.xml
@@ -0,0 +1,97 @@
+
+
+
+FFT
+
+Sound
+
+Analyzer
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+input()
+Define the audio input for the analyzer
+
+
+
+analyze()
+Query a analysis vector
+
+
+
+stop()
+Stop the analyzer
+
+
+
+
+FFT(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/FFT_analyze.xml b/content/api_en/LIB_sound/FFT_analyze.xml
new file mode 100755
index 000000000..4bd4c1bfa
--- /dev/null
+++ b/content/api_en/LIB_sound/FFT_analyze.xml
@@ -0,0 +1,54 @@
+
+
+
+analyze()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/FFT_input.xml b/content/api_en/LIB_sound/FFT_input.xml
new file mode 100755
index 000000000..bb3ab8c58
--- /dev/null
+++ b/content/api_en/LIB_sound/FFT_input.xml
@@ -0,0 +1,74 @@
+
+
+
+input()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
+fft .input()
+
+
+
+
+
+
+
+float
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/FFT_stop.xml b/content/api_en/LIB_sound/FFT_stop.xml
new file mode 100755
index 000000000..c58f7b983
--- /dev/null
+++ b/content/api_en/LIB_sound/FFT_stop.xml
@@ -0,0 +1,78 @@
+
+
+
+stop()
+
+Sound
+
+Analyzer
+
+Web & Application
+
+
+
+
+
+
+
+
+
+amp .analyze()
+
+
+
+
+
+
+
+float
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/HighPass.xml b/content/api_en/LIB_sound/HighPass.xml
new file mode 100755
index 000000000..bb5f13f6b
--- /dev/null
+++ b/content/api_en/LIB_sound/HighPass.xml
@@ -0,0 +1,86 @@
+
+
+HighPass
+
+Sound
+
+Effects
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+process()
+Start the filter
+
+
+
+stop()
+Stop the filter
+
+
+
+freq()
+Set the cut off frequency for the filter
+
+
+
+HighPass(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/HighPass_freq.xml b/content/api_en/LIB_sound/HighPass_freq.xml
new file mode 100755
index 000000000..499ef5f6d
--- /dev/null
+++ b/content/api_en/LIB_sound/HighPass_freq.xml
@@ -0,0 +1,61 @@
+
+
+
+freq()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+highPass .freq()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/HighPass_process.xml b/content/api_en/LIB_sound/HighPass_process.xml
new file mode 100755
index 000000000..9a25a4cc8
--- /dev/null
+++ b/content/api_en/LIB_sound/HighPass_process.xml
@@ -0,0 +1,57 @@
+
+
+
+process()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+highPass .process()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/HighPass_stop.xml b/content/api_en/LIB_sound/HighPass_stop.xml
new file mode 100755
index 000000000..9f9eb1b0b
--- /dev/null
+++ b/content/api_en/LIB_sound/HighPass_stop.xml
@@ -0,0 +1,63 @@
+
+
+
+stop()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+highPass .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/LowPass.xml b/content/api_en/LIB_sound/LowPass.xml
new file mode 100755
index 000000000..4a36f5ff2
--- /dev/null
+++ b/content/api_en/LIB_sound/LowPass.xml
@@ -0,0 +1,86 @@
+
+
+LowPass
+
+Sound
+
+Effects
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+process()
+Start the filter
+
+
+
+stop()
+Stop the filter
+
+
+
+freq()
+Sets the cut off frequency for the filter
+
+
+
+LowPass(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/LowPass_freq.xml b/content/api_en/LIB_sound/LowPass_freq.xml
new file mode 100755
index 000000000..f4fd2d8ef
--- /dev/null
+++ b/content/api_en/LIB_sound/LowPass_freq.xml
@@ -0,0 +1,61 @@
+
+
+
+freq()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+lowPass .freq()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/LowPass_process.xml b/content/api_en/LIB_sound/LowPass_process.xml
new file mode 100755
index 000000000..8c8507ce6
--- /dev/null
+++ b/content/api_en/LIB_sound/LowPass_process.xml
@@ -0,0 +1,57 @@
+
+
+
+process()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+lowPass .process()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/LowPass_stop.xml b/content/api_en/LIB_sound/LowPass_stop.xml
new file mode 100755
index 000000000..96423bbea
--- /dev/null
+++ b/content/api_en/LIB_sound/LowPass_stop.xml
@@ -0,0 +1,63 @@
+
+
+
+stop()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+lowPass .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise.xml b/content/api_en/LIB_sound/PinkNoise.xml
new file mode 100755
index 000000000..fd74f29e5
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise.xml
@@ -0,0 +1,35 @@
+
+
+PinkNoise
+
+Sound
+
+Noise
+
+Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_add.xml b/content/api_en/LIB_sound/PinkNoise_add.xml
new file mode 100755
index 000000000..28de64b97
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_add.xml
@@ -0,0 +1,38 @@
+
+
+
+add()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_amp.xml b/content/api_en/LIB_sound/PinkNoise_amp.xml
new file mode 100755
index 000000000..67e87cc56
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_amp.xml
@@ -0,0 +1,38 @@
+
+
+
+amp()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_pan.xml b/content/api_en/LIB_sound/PinkNoise_pan.xml
new file mode 100755
index 000000000..10bb0cf09
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_pan.xml
@@ -0,0 +1,39 @@
+
+
+
+pan()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_play.xml b/content/api_en/LIB_sound/PinkNoise_play.xml
new file mode 100755
index 000000000..c40593f4d
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_play.xml
@@ -0,0 +1,37 @@
+
+
+
+play()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_set.xml b/content/api_en/LIB_sound/PinkNoise_set.xml
new file mode 100755
index 000000000..9914d239f
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_set.xml
@@ -0,0 +1,44 @@
+
+
+
+set()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/PinkNoise_stop.xml b/content/api_en/LIB_sound/PinkNoise_stop.xml
new file mode 100755
index 000000000..f9bc7dca5
--- /dev/null
+++ b/content/api_en/LIB_sound/PinkNoise_stop.xml
@@ -0,0 +1,41 @@
+
+
+
+stop()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse.xml b/content/api_en/LIB_sound/Pulse.xml
new file mode 100755
index 000000000..e1b4402cd
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse.xml
@@ -0,0 +1,38 @@
+
+
+Pulse
+
+Sound
+
+Category
+
+Application
+
+
+../../../images/LIB_sound_Pulse.png
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_add.xml b/content/api_en/LIB_sound/Pulse_add.xml
new file mode 100755
index 000000000..fc245dbef
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_add.xml
@@ -0,0 +1,53 @@
+
+
+
+add()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .add(add)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_amp.xml b/content/api_en/LIB_sound/Pulse_amp.xml
new file mode 100755
index 000000000..d5c307ce1
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_amp.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_freq.xml b/content/api_en/LIB_sound/Pulse_freq.xml
new file mode 100755
index 000000000..9c945bc66
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_freq.xml
@@ -0,0 +1,58 @@
+
+
+
+freq()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .freq(frequency)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_pan.xml b/content/api_en/LIB_sound/Pulse_pan.xml
new file mode 100755
index 000000000..b0224c490
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_pan.xml
@@ -0,0 +1,59 @@
+
+
+
+pan()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_play.xml b/content/api_en/LIB_sound/Pulse_play.xml
new file mode 100755
index 000000000..9f09acabd
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_play.xml
@@ -0,0 +1,52 @@
+
+
+
+play()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_set.xml b/content/api_en/LIB_sound/Pulse_set.xml
new file mode 100755
index 000000000..0e5935e7f
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_set.xml
@@ -0,0 +1,61 @@
+
+
+
+set()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .set(freq, width, amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_stop.xml b/content/api_en/LIB_sound/Pulse_stop.xml
new file mode 100755
index 000000000..d62480ebe
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_stop.xml
@@ -0,0 +1,56 @@
+
+
+
+stop()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Pulse_width.xml b/content/api_en/LIB_sound/Pulse_width.xml
new file mode 100755
index 000000000..dc2cd02da
--- /dev/null
+++ b/content/api_en/LIB_sound/Pulse_width.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+pulse .width(width)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Reverb.xml b/content/api_en/LIB_sound/Reverb.xml
new file mode 100755
index 000000000..6697df3b9
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb.xml
@@ -0,0 +1,103 @@
+
+
+Reverb
+
+Sound
+
+Effects
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+process()
+Start the reverb effect
+
+
+
+stop()
+Stop the reverb effect
+
+
+
+set()
+set multiple parameters of the reverb effect
+
+
+
+room()
+Change the room size of the reverb effect
+
+
+
+damp()
+Change the dampening of the reverb effect
+
+
+
+wet()
+Change the dry/wet ration of the delay effect
+
+
+
+Reverb(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+1.0
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/Reverb_damp.xml b/content/api_en/LIB_sound/Reverb_damp.xml
new file mode 100755
index 000000000..c62efe17c
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_damp.xml
@@ -0,0 +1,63 @@
+
+
+
+damp()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+reverb .damp()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Reverb_process.xml b/content/api_en/LIB_sound/Reverb_process.xml
new file mode 100755
index 000000000..594569b10
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_process.xml
@@ -0,0 +1,62 @@
+
+
+
+process()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+reverb .process()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Reverb_room.xml b/content/api_en/LIB_sound/Reverb_room.xml
new file mode 100755
index 000000000..dfa23d5ae
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_room.xml
@@ -0,0 +1,63 @@
+
+
+
+room()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+reverb .room()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Reverb_set.xml b/content/api_en/LIB_sound/Reverb_set.xml
new file mode 100755
index 000000000..ace4bdc7a
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_set.xml
@@ -0,0 +1,72 @@
+
+
+
+set()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+delay .set()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Reverb_stop.xml b/content/api_en/LIB_sound/Reverb_stop.xml
new file mode 100755
index 000000000..574071bfc
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_stop.xml
@@ -0,0 +1,67 @@
+
+
+
+stop()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+reverb .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/Reverb_wet.xml b/content/api_en/LIB_sound/Reverb_wet.xml
new file mode 100755
index 000000000..ba9d1f215
--- /dev/null
+++ b/content/api_en/LIB_sound/Reverb_wet.xml
@@ -0,0 +1,62 @@
+
+
+
+wet()
+
+Effects
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+reverb .wet()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
\ No newline at end of file
diff --git a/content/api_en/LIB_sound/SawOsc.xml b/content/api_en/LIB_sound/SawOsc.xml
new file mode 100755
index 000000000..979ca1bb5
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc.xml
@@ -0,0 +1,36 @@
+
+
+SawOsc
+
+Sound
+
+Category
+
+Application
+
+
+../../../images/LIB_sound_SawOsc.png
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_add.xml b/content/api_en/LIB_sound/SawOsc_add.xml
new file mode 100755
index 000000000..5b3a07af7
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_add.xml
@@ -0,0 +1,57 @@
+
+
+
+add()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .add(add)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_amp.xml b/content/api_en/LIB_sound/SawOsc_amp.xml
new file mode 100755
index 000000000..3f7346fc8
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_amp.xml
@@ -0,0 +1,57 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_freq.xml b/content/api_en/LIB_sound/SawOsc_freq.xml
new file mode 100755
index 000000000..0989700ba
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_freq.xml
@@ -0,0 +1,57 @@
+
+
+
+freq()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .freq(frequency)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_pan.xml b/content/api_en/LIB_sound/SawOsc_pan.xml
new file mode 100755
index 000000000..1623a7b1c
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_pan.xml
@@ -0,0 +1,59 @@
+
+
+
+pan()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_play.xml b/content/api_en/LIB_sound/SawOsc_play.xml
new file mode 100755
index 000000000..361e21e16
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_play.xml
@@ -0,0 +1,52 @@
+
+
+
+play()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_set.xml b/content/api_en/LIB_sound/SawOsc_set.xml
new file mode 100755
index 000000000..646ecd1fa
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_set.xml
@@ -0,0 +1,60 @@
+
+
+
+set()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .set(freq, amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SawOsc_stop.xml b/content/api_en/LIB_sound/SawOsc_stop.xml
new file mode 100755
index 000000000..8327d460f
--- /dev/null
+++ b/content/api_en/LIB_sound/SawOsc_stop.xml
@@ -0,0 +1,56 @@
+
+
+
+stop()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+saw .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc.xml b/content/api_en/LIB_sound/SinOsc.xml
new file mode 100755
index 000000000..abec47858
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc.xml
@@ -0,0 +1,36 @@
+
+
+SinOsc
+
+Sound
+
+Category
+
+Application
+
+
+../../../images/LIB_sound_SinOsc.png
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_add.xml b/content/api_en/LIB_sound/SinOsc_add.xml
new file mode 100755
index 000000000..ec36d7c9e
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_add.xml
@@ -0,0 +1,53 @@
+
+
+
+add()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .add(add)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_amp.xml b/content/api_en/LIB_sound/SinOsc_amp.xml
new file mode 100755
index 000000000..4d1c89250
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_amp.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_freq.xml b/content/api_en/LIB_sound/SinOsc_freq.xml
new file mode 100755
index 000000000..a8ae64c28
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_freq.xml
@@ -0,0 +1,58 @@
+
+
+
+freq()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .freq(frequency)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_pan.xml b/content/api_en/LIB_sound/SinOsc_pan.xml
new file mode 100755
index 000000000..38dd0c869
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_pan.xml
@@ -0,0 +1,59 @@
+
+
+
+pan()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_play.xml b/content/api_en/LIB_sound/SinOsc_play.xml
new file mode 100755
index 000000000..4c89cd172
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_play.xml
@@ -0,0 +1,52 @@
+
+
+
+play()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_set.xml b/content/api_en/LIB_sound/SinOsc_set.xml
new file mode 100755
index 000000000..b01eac131
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_set.xml
@@ -0,0 +1,60 @@
+
+
+
+set()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .set(freq, amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SinOsc_stop.xml b/content/api_en/LIB_sound/SinOsc_stop.xml
new file mode 100755
index 000000000..530e4282c
--- /dev/null
+++ b/content/api_en/LIB_sound/SinOsc_stop.xml
@@ -0,0 +1,56 @@
+
+
+
+stop()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+sine .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Sound.xml b/content/api_en/LIB_sound/Sound.xml
new file mode 100644
index 000000000..4f17c0696
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound.xml
@@ -0,0 +1,49 @@
+
+
+Sound
+
+Sound
+
+Configuration
+
+Application
+
+
+
+
+
+
+
+
+AudioIn
+
+
+
\ No newline at end of file
diff --git a/content/api_en/LIB_sound/SoundFile.xml b/content/api_en/LIB_sound/SoundFile.xml
new file mode 100755
index 000000000..c6eb0d03c
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile.xml
@@ -0,0 +1,36 @@
+
+
+SoundFile
+
+Sound
+
+Sound Files
+
+Application
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_add.xml b/content/api_en/LIB_sound/SoundFile_add.xml
new file mode 100755
index 000000000..2b92734e5
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_add.xml
@@ -0,0 +1,53 @@
+
+
+
+add()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+file .add()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_amp.xml b/content/api_en/LIB_sound/SoundFile_amp.xml
new file mode 100755
index 000000000..34002bbd2
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_amp.xml
@@ -0,0 +1,53 @@
+
+
+
+amp()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+file .amp()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_channels.xml b/content/api_en/LIB_sound/SoundFile_channels.xml
new file mode 100755
index 000000000..ace503d83
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_channels.xml
@@ -0,0 +1,37 @@
+
+
+
+channels()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_cue.xml b/content/api_en/LIB_sound/SoundFile_cue.xml
new file mode 100755
index 000000000..bded003ce
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_cue.xml
@@ -0,0 +1,37 @@
+
+
+
+cue()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_duration.xml b/content/api_en/LIB_sound/SoundFile_duration.xml
new file mode 100755
index 000000000..969d68a02
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_duration.xml
@@ -0,0 +1,36 @@
+
+
+
+duration()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_frames.xml b/content/api_en/LIB_sound/SoundFile_frames.xml
new file mode 100755
index 000000000..f4a66de1a
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_frames.xml
@@ -0,0 +1,37 @@
+
+
+
+frames()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_isPlaying.xml b/content/api_en/LIB_sound/SoundFile_isPlaying.xml
new file mode 100755
index 000000000..fb5ec3082
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_isPlaying.xml
@@ -0,0 +1,45 @@
+
+
+
+isPlaying()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_jump.xml b/content/api_en/LIB_sound/SoundFile_jump.xml
new file mode 100755
index 000000000..23bb57fa1
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_jump.xml
@@ -0,0 +1,36 @@
+
+
+
+jump()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_loop.xml b/content/api_en/LIB_sound/SoundFile_loop.xml
new file mode 100755
index 000000000..8f42ae4d9
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_loop.xml
@@ -0,0 +1,52 @@
+
+
+
+loop()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+file .loop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_pan.xml b/content/api_en/LIB_sound/SoundFile_pan.xml
new file mode 100755
index 000000000..44e6f2746
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_pan.xml
@@ -0,0 +1,38 @@
+
+
+
+pan()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_pause.xml b/content/api_en/LIB_sound/SoundFile_pause.xml
new file mode 100755
index 000000000..abfe629ae
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_pause.xml
@@ -0,0 +1,44 @@
+
+
+
+pause()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_play.xml b/content/api_en/LIB_sound/SoundFile_play.xml
new file mode 100755
index 000000000..f3bb129ef
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_play.xml
@@ -0,0 +1,36 @@
+
+
+
+play()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_rate.xml b/content/api_en/LIB_sound/SoundFile_rate.xml
new file mode 100755
index 000000000..953ca579d
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_rate.xml
@@ -0,0 +1,37 @@
+
+
+
+rate()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_set.xml b/content/api_en/LIB_sound/SoundFile_set.xml
new file mode 100755
index 000000000..b9f42ee74
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_set.xml
@@ -0,0 +1,59 @@
+
+
+
+set()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+file .set()
+
+
+int
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SoundFile_stop.xml b/content/api_en/LIB_sound/SoundFile_stop.xml
new file mode 100755
index 000000000..d4b3830e7
--- /dev/null
+++ b/content/api_en/LIB_sound/SoundFile_stop.xml
@@ -0,0 +1,55 @@
+
+
+
+stop()
+
+Sound Files
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+file .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Sound_inputDevice.xml b/content/api_en/LIB_sound/Sound_inputDevice.xml
new file mode 100755
index 000000000..e09498aac
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound_inputDevice.xml
@@ -0,0 +1,36 @@
+
+
+
+inputDevice()
+
+Sound
+
+Configuration
+
+Web & Application
+
+
+
+
+
+
+
+
+
+AudioIn
+
+
+
diff --git a/content/api_en/LIB_sound/Sound_list.xml b/content/api_en/LIB_sound/Sound_list.xml
new file mode 100755
index 000000000..80644eb01
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound_list.xml
@@ -0,0 +1,28 @@
+
+
+
+Sound.list()
+
+Sound
+
+Configuration
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Sound_outputDevice.xml b/content/api_en/LIB_sound/Sound_outputDevice.xml
new file mode 100755
index 000000000..3f26b40eb
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound_outputDevice.xml
@@ -0,0 +1,33 @@
+
+
+
+outputDevice()
+
+Sound
+
+Configuration
+
+Web & Application
+
+
+
+
+
+
+
+
+
+AudioIn
+
+
+
diff --git a/content/api_en/LIB_sound/Sound_sampleRate.xml b/content/api_en/LIB_sound/Sound_sampleRate.xml
new file mode 100755
index 000000000..0e37ce728
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound_sampleRate.xml
@@ -0,0 +1,31 @@
+
+
+sampleRate()
+
+Sound
+
+Configuration
+
+Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/Sound_volume.xml b/content/api_en/LIB_sound/Sound_volume.xml
new file mode 100755
index 000000000..96d9e6700
--- /dev/null
+++ b/content/api_en/LIB_sound/Sound_volume.xml
@@ -0,0 +1,46 @@
+
+
+
+volume()
+
+Sound
+
+Configuration
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc.xml b/content/api_en/LIB_sound/SqrOsc.xml
new file mode 100755
index 000000000..f4ff7ec2f
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc.xml
@@ -0,0 +1,36 @@
+
+
+SqrOsc
+
+Sound
+
+Category
+
+Application
+
+
+../../../images/LIB_sound_SqrOsc.png
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_add.xml b/content/api_en/LIB_sound/SqrOsc_add.xml
new file mode 100755
index 000000000..7e0056df1
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_add.xml
@@ -0,0 +1,53 @@
+
+
+
+add()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .add(add)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_amp.xml b/content/api_en/LIB_sound/SqrOsc_amp.xml
new file mode 100755
index 000000000..ae46ad16b
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_amp.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_freq.xml b/content/api_en/LIB_sound/SqrOsc_freq.xml
new file mode 100755
index 000000000..10ad9921a
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_freq.xml
@@ -0,0 +1,58 @@
+
+
+
+freq()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .freq(frequency)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_pan.xml b/content/api_en/LIB_sound/SqrOsc_pan.xml
new file mode 100755
index 000000000..31ba9ed50
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_pan.xml
@@ -0,0 +1,59 @@
+
+
+
+pan()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_play.xml b/content/api_en/LIB_sound/SqrOsc_play.xml
new file mode 100755
index 000000000..874d172fe
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_play.xml
@@ -0,0 +1,52 @@
+
+
+
+play()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_set.xml b/content/api_en/LIB_sound/SqrOsc_set.xml
new file mode 100755
index 000000000..7f2a0bc9e
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_set.xml
@@ -0,0 +1,59 @@
+
+
+
+set()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .set(freq, amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/SqrOsc_stop.xml b/content/api_en/LIB_sound/SqrOsc_stop.xml
new file mode 100755
index 000000000..0b45bc9eb
--- /dev/null
+++ b/content/api_en/LIB_sound/SqrOsc_stop.xml
@@ -0,0 +1,56 @@
+
+
+
+stop()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+square .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc.xml b/content/api_en/LIB_sound/TriOsc.xml
new file mode 100755
index 000000000..d504de89a
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc.xml
@@ -0,0 +1,35 @@
+
+
+TriOsc
+
+Sound
+
+Category
+
+Application
+
+
+../../../images/LIB_sound_TriOsc.png
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_add.xml b/content/api_en/LIB_sound/TriOsc_add.xml
new file mode 100755
index 000000000..f2de7ae85
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_add.xml
@@ -0,0 +1,53 @@
+
+
+
+add()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .add(add)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_amp.xml b/content/api_en/LIB_sound/TriOsc_amp.xml
new file mode 100755
index 000000000..bef5ef57f
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_amp.xml
@@ -0,0 +1,58 @@
+
+
+
+amp()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .amp(vol)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_freq.xml b/content/api_en/LIB_sound/TriOsc_freq.xml
new file mode 100755
index 000000000..1e2a86e50
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_freq.xml
@@ -0,0 +1,58 @@
+
+
+
+freq()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .freq(frequency)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_pan.xml b/content/api_en/LIB_sound/TriOsc_pan.xml
new file mode 100755
index 000000000..11fd75447
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_pan.xml
@@ -0,0 +1,58 @@
+
+
+
+pan()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .pan(pos)
+
+
+
+
+
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_play.xml b/content/api_en/LIB_sound/TriOsc_play.xml
new file mode 100755
index 000000000..5da8de1fa
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_play.xml
@@ -0,0 +1,52 @@
+
+
+
+play()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .play()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_set.xml b/content/api_en/LIB_sound/TriOsc_set.xml
new file mode 100755
index 000000000..f5fd30f90
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_set.xml
@@ -0,0 +1,59 @@
+
+
+
+set()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .set(freq, amp, add, pos)
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/TriOsc_stop.xml b/content/api_en/LIB_sound/TriOsc_stop.xml
new file mode 100755
index 000000000..ce4c3fd13
--- /dev/null
+++ b/content/api_en/LIB_sound/TriOsc_stop.xml
@@ -0,0 +1,55 @@
+
+
+
+stop()
+
+Oscillator
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
+triangle .stop()
+
+
+
+
+
+
+1.0
+
+Method
+
+Library
+
+
+
diff --git a/content/api_en/LIB_sound/Waveform.xml b/content/api_en/LIB_sound/Waveform.xml
new file mode 100644
index 000000000..4251ddd60
--- /dev/null
+++ b/content/api_en/LIB_sound/Waveform.xml
@@ -0,0 +1,107 @@
+
+
+
+Waveform
+
+Sound
+
+Analyzer
+
+Application
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+input()
+Define the audio input for the analyzer
+
+
+
+analyze()
+Gets the last nsamples captured from the connected input sound source, writes them
+ into this Waveform's `data` array, and returns it.
+
+
+
+stop()
+Stop the analyzer
+
+
+
+data
+`float[]` of length nsamples, with the sample amplitudes between `-1` and `1`
+
+
+
+Waveform(parent )
+
+
+
+parent
+PApplet: typically use "this"
+
+
+
+
+
+
+
+Object
+
+Library
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise.xml b/content/api_en/LIB_sound/WhiteNoise.xml
new file mode 100755
index 000000000..ba8d252c2
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise.xml
@@ -0,0 +1,35 @@
+
+
+WhiteNoise
+
+Sound
+
+Noise
+
+Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_add.xml b/content/api_en/LIB_sound/WhiteNoise_add.xml
new file mode 100755
index 000000000..a6da5916b
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_add.xml
@@ -0,0 +1,37 @@
+
+
+
+add()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_amp.xml b/content/api_en/LIB_sound/WhiteNoise_amp.xml
new file mode 100755
index 000000000..83eef598a
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_amp.xml
@@ -0,0 +1,38 @@
+
+
+
+amp()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_pan.xml b/content/api_en/LIB_sound/WhiteNoise_pan.xml
new file mode 100755
index 000000000..ffb68b7cf
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_pan.xml
@@ -0,0 +1,39 @@
+
+
+
+pan()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_play.xml b/content/api_en/LIB_sound/WhiteNoise_play.xml
new file mode 100755
index 000000000..9dd12d80d
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_play.xml
@@ -0,0 +1,37 @@
+
+
+
+play()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_set.xml b/content/api_en/LIB_sound/WhiteNoise_set.xml
new file mode 100755
index 000000000..6ecf74ca1
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_set.xml
@@ -0,0 +1,44 @@
+
+
+
+set()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/WhiteNoise_stop.xml b/content/api_en/LIB_sound/WhiteNoise_stop.xml
new file mode 100755
index 000000000..783fa8a36
--- /dev/null
+++ b/content/api_en/LIB_sound/WhiteNoise_stop.xml
@@ -0,0 +1,41 @@
+
+
+
+stop()
+
+Noise
+
+
+
+Web & Application
+
+
+
+
+
+
+
+
+
diff --git a/content/api_en/LIB_sound/index.html b/content/api_en/LIB_sound/index.html
new file mode 100755
index 000000000..5bee0974e
--- /dev/null
+++ b/content/api_en/LIB_sound/index.html
@@ -0,0 +1,75 @@
+
+Sound
+
+
+
+ The new Sound library for Processing 3 provides a simple way to work with audio. It can play, analyze, and synthesize sound. It provides a collection of oscillators for basic wave forms, a variety of noise generators, and effects and filters to play and alter sound files and other generated sounds. The syntax is minimal to make it easy to patch one sound object into another. The library also comes with example sketches covering many use cases to help you get started.
+
+
+ The source code is available on the processing-sound GitHub repository. Please report bugs here. This library is only compatible with Processing 3.0+.
+
+
+
+
+
+
+
+ Configuration
+
+ Sound
+
+
+ I/O
+
+ AudioIn
+
+
+ Sampling
+
+ SoundFile
+ AudioSample
+
+
+ Effects
+
+
+
+
+
+
+
+
+ Noise
+
+ WhiteNoise
+ PinkNoise
+ BrownNoise
+
+
+ Oscillators
+
+ SinOsc
+ SawOsc
+ SqrOsc
+ TriOsc
+ Pulse
+
+
+ Envelopes
+
+ Env
+
+
+ Analysis
+
+
+
diff --git a/content/api_en/LIB_svg/index.html b/content/api_en/LIB_svg/index.html
new file mode 100644
index 000000000..24737df1d
--- /dev/null
+++ b/content/api_en/LIB_svg/index.html
@@ -0,0 +1,167 @@
+
+SVG Export
+
+
+ The SVG library makes it possible to write SVG files directly from Processing. These vector graphics files can be scaled to any size and output at very high resolutions. The SVG library can flatten 3D data into a 2D vector file, but to export 3D data, use the DXF library. The source code is available on the Processing GitHub repository. Please report bugs here.
+
+ This library can be used with the core Processing function size(), or createGraphics(). See the examples below for different techniques.
+
+
+
+
+SVG Export (No Screen Display)
+
+This example draws a single frame to a SVG file and quits. (Note that no display window will open; this helps when you're trying to create massive SVG images that are far larger than the screen size.)
+
+import processing.svg.*;
+
+void setup() {
+ size(400, 400, SVG, "filename.svg");
+}
+
+void draw() {
+ // Draw something good here
+ line(0, 0, width/2, height);
+
+ // Exit the program
+ println("Finished.");
+ exit();
+}
+
+
+SVG Export (With Screen Display)
+
+To draw to the screen while also saving an SVG beginRecord()
+and endRecord() functions. Unlike the PDF renderer, the SVG renderer will only save the final frame of a sequence. This is slower, but is useful when you need to
+see what you're working on as it saves.
+
+import processing.svg.*;
+
+void setup() {
+ size(400, 400);
+ noLoop();
+ beginRecord(SVG, "filename.svg");
+}
+
+void draw() {
+ // Draw something good here
+ line(0, 0, width/2, height);
+
+ endRecord();
+}
+
+
+Single Frame from an Animation (With Screen Display)
+It's also possible to save one frame from a program with moving elements.
+Create a boolean variable to turn the SVG recording process on and off
+
+import processing.svg.*;
+
+boolean record;
+
+void setup() {
+ size(400, 400);
+}
+
+void draw() {
+ if (record) {
+ // Note that #### will be replaced with the frame number. Fancy!
+ beginRecord(SVG, "frame-####.svg");
+ }
+
+ // Draw something good here
+ background(255);
+ line(mouseX, mouseY, width/2, height/2);
+
+ if (record) {
+ endRecord();
+ record = false;
+ }
+}
+
+// Use a keypress so thousands of files aren't created
+void mousePressed() {
+ record = true;
+}
+
+
+SVG Files from 3D Geometry (With Screen Display)
+
+To create vectors from 3D data, use the beginRaw() and endRaw() commands.
+These commands will grab the shape data just before it is rendered to the screen.
+At this stage, your entire scene is nothing but a long list of lines and triangles.
+This means that a shape created with sphere() method will be made up of hundreds of
+triangles, rather than a single object.
+
+When using beginRaw() and endRaw(), it's possible to write to either a 2D or 3D renderer.
+For instance, beginRaw() with the SVG library will write the geometry as flattened triangles
+and lines.
+
+import processing.svg.*;
+
+boolean record;
+
+void setup() {
+ size(500, 500, P3D);
+}
+
+void draw() {
+ if (record) {
+ beginRaw(SVG, "output.svg");
+ }
+
+ // Do all your drawing here
+ background(204);
+ translate(width/2, height/2, -200);
+ rotateZ(0.2);
+ rotateY(mouseX/500.0);
+ box(200);
+
+ if (record) {
+ endRaw();
+ record = false;
+ }
+}
+
+// Hit 'r' to record a single frame
+void keyPressed() {
+ if (key == 'r') {
+ record = true;
+ }
+}
+
+
+Using createGraphics() to Create an SVG File
+
+To write a SVG file using only the createGraphics() command, rather than as
+part of a sketch, it's necessary to call dispose() on the PGraphicsSVG object.
+This is the same as calling exit(), but it won't quit the sketch.
+
+import processing.svg.*;
+
+PGraphics svg = createGraphics(300, 300, SVG, "output.svg");
+svg.beginDraw();
+svg.background(128, 0, 0);
+svg.line(50, 50, 250, 250);
+svg.dispose();
+svg.endDraw();
+
+
+
+Additional notes for the SVG renderer:
+
+
+
+- If you want 3D data, use the DXF recording library instead.
+
+
- Using hint(ENABLE_DEPTH_SORT) can improve the appearance of 3D geometry drawn to 2D file formats.
+
+
- Many methods, particularly pixel-based methods, don't make sense for SVG renderers. This includes: loadPixels, updatePixels, get, set, mask, filter, copy, blend, save, and image
+
+
- Again, exit() is really important when using SVG with size().
+
+
+
+
+
+
diff --git a/content/api_en/LIB_video/Movie.xml b/content/api_en/LIB_video/Movie.xml
index 279abb2c3..95e897c90 100755
--- a/content/api_en/LIB_video/Movie.xml
+++ b/content/api_en/LIB_video/Movie.xml
@@ -34,7 +34,7 @@ void movieEvent(Movie m) {
diff --git a/content/api_en/LIB_video/Movie_speed.xml b/content/api_en/LIB_video/Movie_speed.xml
index 74ff48fe7..11d2cf171 100755
--- a/content/api_en/LIB_video/Movie_speed.xml
+++ b/content/api_en/LIB_video/Movie_speed.xml
@@ -34,7 +34,7 @@ void draw() {
rate parameters sets the speed where 2.0 will play the movie twice as fast, 0.5 will play at half the speed, and -1 will play the movie in normal speed in reverse.
+Sets the relative playback speed of the movie. The rate parameters sets the speed where 2.0 will play the movie twice as fast, 0.5 will play at half the speed, and -1 will play the movie in normal speed in reverse. (Note that not all video formats support backwards playback. For example, the theora codec does support backward playback, but not so the H264 codec, at least in its current version.)
]]>
diff --git a/content/api_en/LIB_video/captureEvent.xml b/content/api_en/LIB_video/captureEvent.xml
index 9241e3979..2a3d43028 100755
--- a/content/api_en/LIB_video/captureEvent.xml
+++ b/content/api_en/LIB_video/captureEvent.xml
@@ -31,7 +31,10 @@ void captureEvent(Capture c) {
read() method to capture this frame. If there is more than one capture device in the program, captureEvent() is called each time any of the devices has a new frame available. Use an if within the function to determine which device is triggering the event.]]>
+This event function is run when a new camera frame is available. Use the read() method to capture this frame. If there is more than one capture device in the program, captureEvent() is called each time any of the devices has a new frame available. Use an if within the function to determine which device is triggering the event.
+
+This function is for people who want to process the image data separately from drawing (and as quickly as possible.) You cannot draw to the screen inside the captureEvent() function. If you want to draw immediately based on the new image, then use the Capture.available() method.
+]]>
void captureEvent(Capture which ) {
diff --git a/content/api_en/LIB_video/index.html b/content/api_en/LIB_video/index.html
index c5a3df2e0..e27a9739d 100755
--- a/content/api_en/LIB_video/index.html
+++ b/content/api_en/LIB_video/index.html
@@ -3,17 +3,17 @@
- The Video library allows Processing to play and display video files, grab video data from
- a camera, and make videos directly from a running program. Video can be captured from USB
+ The Video library plays movie files and captures video data from a camera. Video can be captured from USB
Cameras, IEEE 1394 (Firewire) Cameras, or Video Cards with composite or S-video input devices
- connected to the computer. Video can be loaded from files located on your computer or anywhere
- on the Internet.
+ connected to the computer. Movies can be loaded from files located on your computer or anywhere
+ on the Internet. It is based on the GStreamer multimedia framework, and uses the gstreamer-java bindings
+ to interface GStreamer from Java to support a wide range of media formats. We recommend using H.264, but many
+ other formats will work as well.
- Issues related to video setup on different platforms are documented on
- the Processing Wiki.
-
-
+ The source code is available on the processing-video GitHub repository. Please report bugs here.
+
+
@@ -21,8 +21,7 @@
Movie
- The Movie class makes it possible to load movies and to play
- them back in many ways including looping, pausing, and changing speed.
+ The Movie class loads movies and plays them back in many ways including looping, pausing, and changing speed.
Movie
read()
@@ -38,8 +37,8 @@
Movie
speed()
frameRate()
-
-
+
+
@@ -48,9 +47,7 @@ Movie
Capture
- The Capture class makes it possible to grab frames of video from an attached
- capture device such as a camera. Adjustments to the size and speed are
- made through calling the functions defined below.
+ The Capture class grabs frames of video from an attached capture device such as a camera.
Capture
list()
@@ -65,7 +62,7 @@
Video Events
+
diff --git a/content/api_en/LIB_video/movieEvent.xml b/content/api_en/LIB_video/movieEvent.xml
index d2ff8a274..25fadc4fc 100755
--- a/content/api_en/LIB_video/movieEvent.xml
+++ b/content/api_en/LIB_video/movieEvent.xml
@@ -36,6 +36,7 @@ void movieEvent(Movie m) {
read() method to capture this frame. If there is more than one movie in the program, movieEvent() is called each time any of the movies has a new frame available. Use an if to determine which movie is triggering the event. See the above example for implementation details.
+This event function is run when a new movie frame is available. Use the read() method to capture this frame. If there is more than one movie in the program, movieEvent() is called each time any of the movies has a new frame available. Use an if to determine which movie is triggering the event. See the above example for implementation details.
+
+This function is for people who want to process the image data separately from drawing (and as quickly as possible.) You cannot draw to the screen inside the movieEvent() function. If you want to draw immediately based on the new image, then use the Movie.available() method.
]]>
diff --git a/content/api_en/PFont.xml b/content/api_en/PFont.xml
index 03dabb0e0..accb757ce 100755
--- a/content/api_en/PFont.xml
+++ b/content/api_en/PFont.xml
@@ -14,24 +14,16 @@
PFont font;
// The font must be located in the sketch's
// "data" directory to load successfully
-font = loadFont("LetterGothicStd-32.vlw");
-textFont(font, 32);
+font = createFont("LetterGothicStd.ttf", 32);
+textFont(font);
text("word", 10, 50);
]]>
-
-
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.
+PFont is the font class for Processing. To create a font to use with Processing, select "Create Font..." from the Tools menu. This will create a font in the format Processing requires and also adds it to the current sketch's data directory. Processing displays fonts using the .vlw font format, which uses images for each letter, rather than defining them through vector data. 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.
+
+To create a new font dynamically, use the createFont() function. Do not use the syntax new PFont().
]]>
diff --git a/content/api_en/PFont_list.xml b/content/api_en/PFont_list.xml
index 21dec7306..7a70a2cfb 100755
--- a/content/api_en/PFont_list.xml
+++ b/content/api_en/PFont_list.xml
@@ -14,20 +14,10 @@
-
-
createFont(), which allows Processing to dynamically format fonts.
]]>
diff --git a/content/api_en/PGraphics.xml b/content/api_en/PGraphics.xml
index ffc110e1c..f8df4047b 100755
--- a/content/api_en/PGraphics.xml
+++ b/content/api_en/PGraphics.xml
@@ -31,7 +31,9 @@ void draw() {
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.
+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.
+
+To create a new graphics context, use the createGraphics() function. Do not use the syntax new PGraphics().
]]>
diff --git a/content/api_en/PI.xml b/content/api_en/PI.xml
index d8de1ba8e..9567f9521 100755
--- a/content/api_en/PI.xml
+++ b/content/api_en/PI.xml
@@ -22,7 +22,7 @@ arc(x, y, d-60, d-60, 0, TWO_PI);
sin() and cos().
+PI is a mathematical constant with the value 3.1415927. 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().
]]>
diff --git a/content/api_en/PImage.xml b/content/api_en/PImage.xml
index 8172b4117..8ea945b8d 100755
--- a/content/api_en/PImage.xml
+++ b/content/api_en/PImage.xml
@@ -26,15 +26,11 @@ void draw() {
]]>
-
-
Method
-
-
-
loadShape() or created with the createShape(). The shape() function is used to draw the shape to the display window. Processing can currently load and display SVG (Scalable Vector Graphics) and OBJ shapes. OBJ files can only be opened using the P3D renderer and createShape() is only available with the P2D and P3D renderers. The loadShape() function 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.
-
-The PShape object contains a group of methods that can operate on the shape data. Some of the methods are listed below, but the full list used for creating and modifying shapes is available here in the Processing Javadoc.
+Datatype for storing shapes. Before a shape is used, it must be loaded with the loadShape() or created with the createShape(). The shape() function is used to draw the shape to the display window. Processing can currently load and display SVG (Scalable Vector Graphics) and OBJ shapes. OBJ files can only be opened using the P3D renderer. The loadShape() function 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.
+
+The PShape object contains a group of methods that can operate on the shape data. Some of the methods are listed below, but the full list used for creating and modifying shapes is available here in the Processing Javadoc.
+
+To create a new shape, use the createShape() function. Do not use the syntax new PShape().
]]>
class
diff --git a/content/api_en/PShape_addChild.xml b/content/api_en/PShape_addChild.xml
index 5887969ca..36dcc867a 100644
--- a/content/api_en/PShape_addChild.xml
+++ b/content/api_en/PShape_addChild.xml
@@ -2,9 +2,6 @@
addChild()
-
-
-
PShape
Method
@@ -14,12 +11,40 @@
path, rectangle, and circle are added to a parent PShape variable named house that is a GROUP.
]]>
diff --git a/content/api_en/PShape_beginContour.xml b/content/api_en/PShape_beginContour.xml
index 0a371a5b4..510cf16f1 100644
--- a/content/api_en/PShape_beginContour.xml
+++ b/content/api_en/PShape_beginContour.xml
@@ -2,9 +2,6 @@
beginContour()
-
-
-
PShape
Method
@@ -17,12 +14,12 @@
PShape s;
void setup() {
- size(100, 100, P2D);
+ size(200, 200, P2D);
// Make a shape
s = createShape();
s.beginShape();
- s.noStroke();
+ //s.noStroke();
// Exterior part of shape
s.vertex(-50,-50);
@@ -33,17 +30,17 @@ void setup() {
// Interior part of shape
s.beginContour();
s.vertex(-20,-20);
- s.vertex(20,-20);
- s.vertex(20,20);
s.vertex(-20,20);
+ s.vertex(20,20);
+ s.vertex(20,-20);
s.endContour();
// Finish off shape
- s.endShape();
+ s.endShape(CLOSE);
}
void draw() {
- background(52);
+ background(204);
translate(width/2, height/2);
s.rotate(0.01);
shape(s);
@@ -52,7 +49,9 @@ void draw() {
beginContour() and endContour() methods make it possible to define shapes with other shapes cut out of them. For example, the inside of a letter 'O'. These two functions are always used together, you'll never use one without the other. Between them, define the geometry you want to create. As you'll see when you run the example above, the second smaller shape is cut out of the first larger shape.
+The beginContour() and endContour() methods make it possible to define shapes with other shapes cut out of them. For example, the inside of a letter 'O'. These two functions are always used together, you'll never use one without the other. Between them, define the geometry you want to create. As you'll see when you run the example above, the second smaller shape is cut out of the first larger shape.
+
+The exterior shape and the interior contour must wind in opposite directions. This means that if the points of the geometry for the exterior shape are described in a clockwise order, the points on the interior shape are defined in a counterclockwise order.
]]>
diff --git a/content/api_en/PShape_beginShape.xml b/content/api_en/PShape_beginShape.xml
index c89b0b7c5..6cb030f6d 100644
--- a/content/api_en/PShape_beginShape.xml
+++ b/content/api_en/PShape_beginShape.xml
@@ -2,9 +2,6 @@
beginShape()
-
-
-
PShape
Method
@@ -17,7 +14,7 @@
PShape s; // The PShape object
void setup() {
- size(100, 100, P2D);
+ size(100, 100);
s = createShape();
s.beginShape();
s.fill(0, 0, 255);
diff --git a/content/api_en/PShape_endContour.xml b/content/api_en/PShape_endContour.xml
index 945dc90b8..43119b0ea 100644
--- a/content/api_en/PShape_endContour.xml
+++ b/content/api_en/PShape_endContour.xml
@@ -2,9 +2,6 @@
endContour()
-
-
-
PShape
Method
@@ -17,12 +14,12 @@
PShape s;
void setup() {
- size(100, 100, P2D);
+ size(200, 200, P2D);
// Make a shape
s = createShape();
s.beginShape();
- s.noStroke();
+ //s.noStroke();
// Exterior part of shape
s.vertex(-50,-50);
@@ -33,17 +30,17 @@ void setup() {
// Interior part of shape
s.beginContour();
s.vertex(-20,-20);
- s.vertex(20,-20);
- s.vertex(20,20);
s.vertex(-20,20);
+ s.vertex(20,20);
+ s.vertex(20,-20);
s.endContour();
// Finish off shape
- s.endShape();
+ s.endShape(CLOSE);
}
void draw() {
- background(52);
+ background(204);
translate(width/2, height/2);
s.rotate(0.01);
shape(s);
@@ -52,7 +49,9 @@ void draw() {
+
+
+
+
+
+
+
+
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, color(255, 204, 0) will return a bright yellow color (see the first example above).
-
-Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.
-
-Note that when using hexadecimal notation, it is not necessary to use color(), as in: color c = #006699
-
+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, color(255, 204, 0) will return a bright yellow color (see the first example above).
+
+Note that if only one value is provided to color(), it will be interpreted as a grayscale value. Add a second value, and it will be used for alpha transparency. When three values are specified, they are interpreted as either RGB or HSB values. Adding a fourth value applies alpha transparency.
+
+Note that when using hexadecimal notation, it is not necessary to use color(), as in: color c = #006699
+
More about how colors are stored can be found in the reference for the color datatype.
]]>
diff --git a/content/api_en/colorMode.xml b/content/api_en/colorMode.xml
index e35a007cf..0b5805501 100755
--- a/content/api_en/colorMode.xml
+++ b/content/api_en/colorMode.xml
@@ -59,7 +59,9 @@ void draw() {
fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. The colorMode() function is used 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 max, max1, max2, max3, and maxA.
+Changes the way Processing interprets color data. By default, the parameters for fill(), stroke(), background(), and color() are defined by values between 0 and 255 using the RGB color model. The colorMode() function is used 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 max, max1, max2, max3, and maxA.
+
+After changing the range of values for colors with code like colorMode(HSB, 360, 100, 100), those ranges remain in use until they are explicitly changed again. For example, after running colorMode(HSB, 360, 100, 100) and then changing back to colorMode(RGB), the range for R will be 0 to 360 and the range for G and B will be 0 to 100. To avoid this, be explicit about the ranges when changing the color mode. For instance, instead of colorMode(RGB), write colorMode(RGB, 255, 255, 255).
]]>
diff --git a/content/api_en/concat.xml b/content/api_en/concat.xml
index 0ac4e7fce..66cfaa99b 100755
--- a/content/api_en/concat.xml
+++ b/content/api_en/concat.xml
@@ -27,7 +27,7 @@ println(sa3);
+
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).
]]>
diff --git a/content/api_en/createFont.xml b/content/api_en/createFont.xml
index 03956c938..bf7388edf 100755
--- a/content/api_en/createFont.xml
+++ b/content/api_en/createFont.xml
@@ -17,7 +17,7 @@ void setup() {
size(200, 200);
// Uncomment the following two lines to see the available fonts
//String[] fontList = PFont.list();
- //println(fontList);
+ //printArray(fontList);
myFont = createFont("Georgia", 32);
textFont(myFont);
textAlign(CENTER, CENTER);
@@ -26,18 +26,6 @@ void setup() {
]]>
-
-
0) {
+ int inByte = myPort.read();
+ println(inByte);
+ }
+ delay(100);
+}
+]]>
+
+- The Processing Development Environment (PDE) makes it easy to write Processing - programs. Programs are written in the Text Editor and started by pressing the Run button. - In Processing, a computer program is called a sketch. Sketches are stored in the - Sketchbook, which is a folder on your computer. It's easy to open the sketches by - clicking on the Open button. + The Processing Development Environment (PDE) makes it easy to write Processing programs. Programs are written in the Text Editor and started by pressing the Run button. In Processing, a computer program is called a sketch. Sketches are stored in the Sketchbook, which is a folder on your computer.
- Sketches can draw two- and three-dimensional graphics. The default renderer is for drawing - two-dimensional graphics. The P3D renderer makes it possible to draw three-dimensional graphics, - which includes controlling the camera, lighting, and materials. - The P2D renderer is a fast, but last accurate renderer for drawing two-dimensional graphics. Both the P2D and P3D - renderers are accelerated if your computer has an OpenGL compatible graphics card. + Sketches can draw two- and three-dimensional graphics. The default renderer is for drawing two-dimensional graphics. The P3D renderer makes it possible to draw three-dimensional graphics, which includes controlling the camera, lighting, and materials. The P2D renderer is a fast, but less accurate renderer for drawing two-dimensional graphics. Both the P2D and P3D renderers are accelerated if your computer has an OpenGL compatible graphics card.
- The capabilities of Processing are extended with Libraries and Tools. - Libraries make it possible for sketches to do things beyond the core - Processing code. There are hundred of libraries contributed by the Processing community - that can be added to your sketches to enable new things like playing sounds, doing computer - vision, and working with advanced 3D geometry. Tools extend the PDE to help make creating - sketches easier by providing interfaces for tasks like selecting colors. + The capabilities of Processing are extended with Libraries and Tools. Libraries make it possible for sketches to do things beyond the core Processing code. There are hundreds of libraries contributed by the Processing community that can be added to your sketches to enable new things like playing sounds, doing computer vision, and working with advanced 3D geometry. Tools extend the PDE to help make creating sketches easier by providing interfaces for tasks like selecting colors.
- Processing has different programming modes to make it possible to deploy sketches - on different platforms and program in different ways. The current default programming modes - are Java and Experimental. Other programming modes, such as JavaScript and - Android, are added by selecting "Add Mode..." from the menu in the upper-right - corner of the PDE. + Processing has different programming modes to make it possible to deploy sketches on different platforms and program in different ways. The Java mode is the default. Other programming modes may be downloaded by selecting "Add Mode..." from the menu in the upper-right corner of the PDE.
@@ -104,17 +74,13 @@
- Programs written using Processing are called sketches. These sketches are - written in the text editor. It has features for cutting/pasting and for - searching/replacing text. The message area gives feedback while saving and - exporting and also displays errors. The console displays text output by - Processing sketches including complete error messages and text output from - sketches with the print() and println() functions. + Programs written using Processing are called sketches. These sketches are written in the text editor. It has features for cutting/pasting and for + searching/replacing text. The message area gives feedback while saving and exporting and also displays errors. The console displays text output by + Processing sketches including complete error messages and text output from sketches with the print() and println() functions. (Note that the console works well for occasional messages, but is not intended for high-speed, real-time output.)
- The buttons on the toolbar can run and stop programs, create a new sketch, open, save, - and export: + The buttons on the toolbar can run and stop programs,:
| Run - Runs the sketch. In Java mode, it compiles the code and opens a new display window. - - |
+ Runs the sketch. In Java mode, it compiles the code and opens a new display window.
||
| Stop Terminates a running sketch. - |
- ||
| - | New - Creates a new sketch (project) in the current window. To create a new sketch in - its own window, use File → New. - |
- |
| - | Open - Provides a menu with options to open files from anywhere on your computer (Open...), - from the Example Menu (Examples...), or one of the programs in the Sketchbook. - Opening a sketch from the toolbar will replace the sketch in the - current window. To open a sketch in a new window, use File → Open. - |
- |
| - | Save - Saves the current sketch to its current location. - If you want to give the sketch a different name, select “Save As” from - the File menu. - |
- |
| - | Export - In Java mode, it exports the current sketch as a Java application and - the folder containing the files is opened. - (Note: Exporting a sketch will delete the previous contents of the export folder, - unless this preference is unchecked in the Preferences.) - |
+
- Additional commands are found within the five menus: File, Edit, Sketch, Tools, Help. + Additional commands are found within the six menus: File, Edit, Sketch, Debug, Tools, Help. The menus are context sensitive which means only those items relevant to the work currently being carried out are available.
<>.
+
Preferences
@@ -396,74 +281,96 @@
Sketches and Sketchbook
-
Sketches and Sketchbook
+ - All Processing projects are called sketches. Each sketch has its own folder. The main file - for each sketch has the same name as the folder and is found inside. For example, if the - sketch is named "Sketch_123", the folder for the sketch will be called "Sketch_123" and the - main file will be called "Sketch_123.pde". The PDE file extension is an acronym for the - Processing Development Environment.
++ All Processing projects are called sketches. Each sketch has its own folder. The main file for each sketch has the same name as the folder and is found inside. For example, if the sketch is named "Sketch_123", the folder for the sketch will be called "Sketch_123" and the main file will be called "Sketch_123.pde". The PDE file extension is an acronym for the Processing Development Environment.
- Processing sketches can be stored anywhere on your computer, but by default they are - stored in the sketchbook, which will be in different places on your computer or network - depending if you use PC, Mac, or Linux and how the preferences are set. To locate this - folder, select the "Preferences" option from the File menu (or from the "Processing" menu - on the Mac) and look for the "Sketchbook location". + Processing sketches can be stored anywhere on your computer, but by default they are stored in the sketchbook, which will be in different places on your computer or network depending if you use PC, Mac, or Linux and how the preferences are set. To locate this folder, select the "Preferences" option from the File menu (or from the "Processing" menu on the Mac) and look for the "Sketchbook location."
- A sketch folder sometimes contains other folders for media files and other code. - When a font or image is added to a sketch by selecting "Add File..." from the Sketch menu, - a "data" folder is created. Files may also be added to your Processing sketch by dragging - them into the text editor. Image and sound files dragged into the application window will - automatically be added to the current sketch's "data" folder. All images, fonts, sounds, - and other data files loaded in the sketch must be in this folder. + A sketch folder sometimes contains other folders for media files and other code. When a font or image is added to a sketch by selecting "Add File..." from the Sketch menu, a "data" folder is created. Files may also be added to your Processing sketch by dragging them into the text editor. Image and sound files dragged into the application window will automatically be added to the current sketch's "data" folder. All images, fonts, sounds, and other data files loaded in the sketch must be in this folder.
@@ -474,26 +381,24 @@- Processing has three built-in renderers. The default renderer is for drawing two-dimensional - shapes. P2D is a faster, but less accurate renderer for drawing two-dimensional - shapes. P3D is for three-dimensional geometry, it can also control - the camera, lighting, and materials. The P2D and P3D renderers are accelerated if - your computer has an OpenGL compatible graphics card. + Processing has four built-in screen renderers. The default renderer is for drawing two-dimensional shapes. P2D is a faster, but less accurate renderer for drawing two-dimensional shapes. P3D is for three-dimensional geometry; it can also control the camera, lighting, and materials. The P2D and P3D renderers are accelerated if your computer has an OpenGL compatible graphics card. The smooth() function affects the amount of antialiasing for each renderer. Check the reference for smooth() for more information. +
+ ++ With the release of Processing 3.0, the FX2D renderer is included. Use it for fast 2D graphics on large and high resolution displays for more speed than the default renderer. This renderer is still experimental, but it useful for certain conditions.
- The renderer used for each sketch is specified through the size() function. - If a renderer is not explicity defined in size(), it uses the default renderer. - For example, the following program: + The renderer used for each sketch is specified through the size() function. If a renderer is not explicitly defined in size(), it uses the default renderer as shown in the following program:
-void setup() {
- size(200, 200);
+void setup() {
+ size(200, 200);
}
-void draw() {
- background(204);
- line(width/2, height/2, mouseX, mouseY);
+void draw() {
+ background(204);
+ line(width/2, height/2, mouseX, mouseY);
}
@@ -501,23 +406,21 @@
To change the renderer, add a third parameter to size(). For example:
-void setup() {
- size(200, 200, P2D);
+void setup() {
+ size(200, 200, P2D);
}
-void draw() {
- background(204);
- line(width/2, height/2, mouseX, mouseY);
+void draw() {
+ background(204);
+ line(width/2, height/2, mouseX, mouseY);
}
- A large effort has been made to make the Processing renderers behave similarly across
- the different renderers, but there are currently some inconsistencies that are explained
- in the reference.
+ A large effort has been made to make Processing code behave similarly across the different renderers, but there are currently some inconsistencies that are explained in the reference.
- For more information, see the size() reference entry.
+
For more information, see the size() reference entry.
@@ -527,11 +430,7 @@
<
Coordinates
- Processing uses a Cartesian coordinate system with the origin in the upper-left
- corner. If your sketch is 320 pixels wide and 240 pixels high, coordinate
- (0, 0) is the upper-left pixel and coordinate (320, 240) is in the lower-right.
- The last visible pixel in the lower-right corner of the screen is at position
- (319, 239) because pixels are drawn to the right and below the coordinate.
+ Processing uses a Cartesian coordinate system with the origin in the upper-left corner. If your sketch is 320 pixels wide and 240 pixels high, coordinate (0, 0) is the upper-left pixel and coordinate (320, 240) is in the lower-right. The last visible pixel in the lower-right corner of the screen is at position(319, 239) because pixels are drawn to the right and below the coordinate.
@@ -539,38 +438,23 @@
<
- Using the three-dimension coordinate system of P3D, the z-coordinate is zero at the
- surface of the image, with negative z-values moving back in space. When drawing in
- 3D, the camera is positioned in the center of the screen.
+ Using the three-dimension coordinate system of P3D, the z-coordinate is zero at the surface of the image, with negative z-values moving back in space. When drawing in 3D, the camera is positioned in the center of the screen.
-
-
+
-
-
Tabs, Multiple Files, and Classes
-
+
+
Tabs, Multiple Files, and Classes
+
-
- It can be inconvenient to write a long program within a single file.
- When Processing sketches grow to hundreds or thousands of lines, breaking them
- into modular units helps manage the different parts. Processing manages files with
- the Sketchbook and each sketch can have multiple files that are managed with tabs.
+
+ It can be inconvenient to write a long program within a single file. When Processing sketches grow to hundreds or thousands of lines, breaking them into modular units helps manage the different parts. Processing manages files with the Sketchbook and each sketch can have multiple files that are managed with tabs.
- The arrow button to the right of the tabs in the Processing Development Environment
- is used to manage these files. Click this button to reveal options to create a new tab,
- rename the current tab, and delete the current tab. If a project has more than one tab,
- they can also be hidden and revealed. Hiding a tab temporarily removes that code
- from the sketch (it will not be compiled with the sketch when you press Run).
-
-
-
- Tabs are intended for more advanced users, and for this reason, the menu that
- controls the tabs is intentionally made less prominent.
+ The arrow button to the right of the tabs in the Processing Development Environment is used to manage these files. Click this button to reveal options to create a new tab, rename the current tab, and delete the current tab. Tabs are intended for more advanced users, and for this reason, the menu that controls the tabs is intentionally made less prominent.
@@ -579,21 +463,32 @@
Advanced
- When a program with multiple tabs is run, the code is grouped together and the
- classes in other tabs become inner classes. Because they're inner classes, they
- cannot have static variables. Simply place the "static" variable outside the class
- itself to do the same thing (it need not be explicitly named "static" once you list
- it in this manner). If you don't want code to be an inner class, you can also create
- a tab with a .java suffix, which means it will be interpreted as straight java code.
- It is also not possible to use static classes in separate tabs. If you do this,
- however, you'll need to pass the PApplet object to that object in that tab in order
- to get PApplet functions like line(), loadStrings() or saveFrame() to work.
+ When a program with multiple tabs is run, the code is grouped together and the classes in other tabs become inner classes. Because they're inner classes, they cannot have static variables. Simply place the "static" variable outside the class itself to do the same thing (it need not be explicitly named "static" once you list it in this manner). If you don't want code to be an inner class, you can also create a tab with a ".java" suffix, which means it will be interpreted as straight java code. It is also not possible to use static classes in separate tabs. If you do this, however, you'll need to pass the PApplet object to that object in that tab in order to get PApplet functions like line(), loadStrings() or saveFrame() to work.
+
+
+
+
Debug
+
+
+
+ The Processing Debugger is a tool for diagnosing problems with a sketch. Enable it to pause a sketch while running and advance through the code one line at a time. The debugger is enabled through the File menu (Debug > Enable Debugger) or by clicking the Debugger icon, the butterfly in the upper-right corner of the PDE.
+
+
+
+ When the Debugger is enabled, the program runs as normal, but stops at "breakpoints." To create a breakpoint, set the cursor at the line you want to pause the sketch and select Debug > Toggle Breakpoint. The keyboard shortcut is Command-B. To remove the breakpoint, select Toggle Breakpoint again. When a breakpoint is added, the line number is replaced with the symbol: <>.
+
+
+
+ Running the sketch in Debug mode causes the sketch to pause at any breakpoints. When paused, current variable values are visible in a separate pane. You can advance to the next breakpoint by selecting "Continue" or advance line by line through the code with "Step". Stepping only works within the scope of the current function being run.
+
+
+
@@ -601,45 +496,14 @@
- Processing has different programming modes to make it possible to deploy sketches
- on different platforms and program in different ways. The current default programming modes
- are Java and Experimental. Other programming modes, such as JavaScript and
- Android, are added by selecting "Add Mode..." from the menu in the upper-right
- corner of the PDE.
-
-
-
-
-
-
Java Mode
- This mode makes it possible to write short programs to draw to the screen, but also
- enables complex Java programs as well. It's can be used simply by beginners, but
- it scales to professional Java software development. Sketches written in this mode can
- be exported as Java Applications to run on Linux, Mac OS X, and Windows operating
- systems.
+ This mode makes it possible to write short programs to draw to the screen, but also enables complex Java programs as well. It can be used simply by beginners, but it scales to professional Java software development. Sketches written in this mode can
+ be exported as Java Applications to run on Linux, Mac OS X, and Windows operating systems.
@@ -648,221 +512,31 @@
Java Mode
Advanced
- Java files with the extension .java can be included with a Java mode sketch.
- They may be created directly in the PDE or copied into the sketch folder through
- the "Add File..." item in the Sketch menu or dragged into the text editor. It's possible
- to write any Java code in files with the .java extension. In fact, complete Java code
- can be written from inside the Processing Environment by subclassing PApplet like this:
+ Java files with the extension .java can be included with a Java mode sketch. They may be created directly in the PDE or copied into the sketch folder through the "Add File..." item in the Sketch menu or dragged into the text editor. It's possible to write any Java code in files with the .java extension. In fact, complete Java code can be written from inside the Processing Environment by subclassing PApplet like this:
public class MyDemo extends PApplet {
- This is for advanced developers only and is not really recommended. Using this technique
- means that any additional tabs will no longer be inner classes, meaning you'll have to
- do extra work to make them communicate properly with the host PApplet. It is not necessary
- to use this technique just to get features of the Java language. Advanced developers can
- also program with Processing in another Java Editor if higher-level code editing and
- tools are needed. We've documented how to use
- Processing
- in Eclipse, but core.jar can be used as a part of any Java project.
+ This is for advanced developers only and is not really recommended. Using this technique means that any additional tabs will no longer be inner classes, meaning you'll have to do extra work to make them communicate properly with the host PApplet. It is not necessary to use this technique just to get features of the Java language. Advanced developers can also program with Processing in another Java Editor if higher-level code editing and tools are needed. Processing's core.jar can be used as a part of any Java project.
-
- Experimental Mode
-
-
- This is a prototype of a potential future version of the Processing Development Environment.
- It includes features to check for errors in the code while it's written, to follow variables
- as they change, to debug a program with break points, and more.
-
-
-
- JavaScript Mode
-
-
- Sketches written in this mode can be exported to run inside web browsers using
- HTML5 and WebGL. This mode is documented on the
- JavaScript page of the Processing Wiki. To add this mode, click on the mode
- button in the upper-right corner of the PDE and select "Add Mode..."
-
-
Android Mode
Sketches written in this mode can be exported to run on Android phones and tablets.
- This mode is documented on the
- Processing for Android page of the Processing Wiki. To add this mode, click on
+ This mode is documented on the
+ Processing for Android page. To add this mode, click on
the mode button in the upper-right corner of the PDE and select "Add Mode..."
-
-
-
-
- void setup() {
- size(200, 200);
- rectMode(CENTER);
- noStroke();
- fill(0, 102, 153, 204);
- }
-
- void draw() {
- background(255);
- rect(width-mouseX, height-mouseY, 50, 50);
- rect(mouseX, mouseY, 50, 50);
- }
-}
-
-
- -->
-
-
-
-
@@ -872,28 +546,24 @@
- Processing 2.0 includes a set of new features to make it easier to install, update, and
- remove Libraries, Tools, and Modes.
+ Processing 3.0 includes a set of features to make it easier to install, update, and remove Libraries, Tools, Modes, and Examples.
- Add contributed libraries by selecting "Add Library..." from the "Import Library..."
- submenu within the Sketch menu. Not all available libraries have been converted to
- show up in "Add Library...". If a library isn't there, it will need to be installed
- manually. Follow the
- How to Install a Contributed Library instructions on the Processing
- Wiki for more information.
+ Add a contributed library by selecting "Add Library..." from the "Import Library..." submenu within the Sketch menu. This opens the Library Manager. Next, select a library and then click on Install to download it.
- Add contributed tools by selecting "Add Tool..." from the Tools menu to select a Tool
- to download.
+ Add a contributed tool by selecting "Add Tool..." from the Tools menu, then select a Tool to download from the Tool Manager.
- Add contributed modes by selecting "Add Mode..." from the Mode menu in the upper-right
- corner of the PDE.
-
+ Add contributed modes by selecting "Add Mode..." from the Mode menu in the upper-right corner of the PDE, then select a Mode to install.
+
+
+
+ Add contributed Examples by first opening the "Examples..." submenu from the File menu. Click on the Add Examples button to open the Examples Manager. Next, select an examples package and select Install to download.
+
@@ -904,10 +574,11 @@
- The Export information and
+ The Export information and
Tips page on the Processing Wiki covers the details of exporting Applications from Java mode.
+
+
diff --git a/content/api_en/exit.xml b/content/api_en/exit.xml
index 1df2bb8a0..e6ee94323 100755
--- a/content/api_en/exit.xml
+++ b/content/api_en/exit.xml
@@ -22,7 +22,7 @@ void mousePressed() {
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.
+Quits/stops/exits the program. Programs without a draw() function stop 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() function).
diff --git a/content/api_en/expand.xml b/content/api_en/expand.xml
index e2cc9c51a..f0f020319 100755
--- a/content/api_en/expand.xml
+++ b/content/api_en/expand.xml
@@ -32,8 +32,8 @@ println(imgs.length); // Prints "64"
newSize parameter provides precise control over the increase in size.
-
+Increases the size of a one-dimensional 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)
]]>
diff --git a/content/api_en/fill.xml b/content/api_en/fill.xml
index 2727a78af..fa7f98980 100755
--- a/content/api_en/fill.xml
+++ b/content/api_en/fill.xml
@@ -25,12 +25,12 @@ rect(30, 20, 55, 55);
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 or 0xFFCCFFAA). The # syntax uses six digits to specify a color (just as colors are typically 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 define the red, green, and blue components.
-
+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 or 0xFFCCFFAA). The # syntax uses six digits to specify a color (just as colors are typically 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 define the red, green, and blue components.
+
The value for the "gray" parameter 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().
]]>
diff --git a/content/api_en/frustum.xml b/content/api_en/frustum.xml
index d1ee063aa..f9645bd5a 100755
--- a/content/api_en/frustum.xml
+++ b/content/api_en/frustum.xml
@@ -21,14 +21,14 @@ box(45);
-
-A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is rendered and visible; anything outside those planes is not visible.
-
-Setting the frustum has the effect of changing the perspective with which the scene is rendered. This can be acheived more simply in many cases by using perspective().
-
-Note that the near value must be greater than zero (as the point of the frustum "pyramid" cannot converge "behind" the viewer). Similarly, the far value must be greater than the near value (as the "far" plane of the frustum must be "farther away" from the viewer than the near plane).
-
+Sets a perspective matrix as defined by the parameters.
+
+A frustum is a geometric form: a pyramid with its top cut off. With the viewer's eye at the imaginary top of the pyramid, the six planes of the frustum act as clipping planes when rendering a 3D view. Thus, any form inside the clipping planes is rendered and visible; anything outside those planes is not visible.
+
+Setting the frustum has the effect of changing the perspective with which the scene is rendered. This can be achieved more simply in many cases by using perspective().
+
+Note that the near value must be greater than zero (as the point of the frustum "pyramid" cannot converge "behind" the viewer). Similarly, the far value must be greater than the near value (as the "far" plane of the frustum must be "farther away" from the viewer than the near plane).
+
Works like glFrustum, except it wipes out the current perspective matrix rather than multiplying itself with it.
]]>
diff --git a/content/api_en/fullScreen.xml b/content/api_en/fullScreen.xml
new file mode 100755
index 000000000..e75bfd541
--- /dev/null
+++ b/content/api_en/fullScreen.xml
@@ -0,0 +1,107 @@
+
+
+fullScreen()
+
+Environment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+setup(). The size() and fullScreen() functions cannot both be used in the same program, just choose one.
+
+When fullScreen() is used without a parameter, it draws the sketch to the screen currently selected inside the Preferences window. When it is used with a single parameter, this number defines the screen to display to program on (e.g. 1, 2, 3...). When used with two parameters, the first defines the renderer to use (e.g. P2D) and the second defines the screen. The SPAN parameter can be used in place of a screen number to draw the sketch as a full-screen window across all of the attached displays if there are more than one.
+
+Prior to Processing 3.0, a full-screen program was defined with size(displayWidth, displayHeight).
+]]>
+
+
diff --git a/content/api_en/get.xml b/content/api_en/get.xml
index c1307b3cd..be56dc889 100755
--- a/content/api_en/get.xml
+++ b/content/api_en/get.xml
@@ -31,10 +31,12 @@ rect(25, 25, 50, 50);
x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().
-
+Reads the color of any pixel or grabs a section of an image. If no parameters are specified, the entire image is returned. Use the x and y parameters to get the value of one pixel. Get a section of the display window by specifying additional w and h parameters. When getting an image, the x and y parameters define the coordinates for the upper-left corner of the image, regardless of the current imageMode().
+
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 format.
+If a width and a height are specified, get(x, y, w, h) returns a PImage corresponding to the part of the original PImage where the top left pixel is at the (x, y) position with a width of w a height of h.
+
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]. See the reference for pixels[] for more information.
]]>
diff --git a/content/api_en/green.xml b/content/api_en/green.xml
index 7d3ff0566..f1c38fe88 100755
--- a/content/api_en/green.xml
+++ b/content/api_en/green.xml
@@ -27,8 +27,8 @@ Extracts the green value from a color, scaled to match current colorMode()
The green() function is easy to use and understand, but it is slower than a technique called bit shifting. When working in colorMode(RGB, 255), you can acheive the same results as green() but with greater speed by using the right shift operator (>>) with a bit mask. For example, the following two lines of code are equivalent means of getting the green value of the color value c:
-float r1 = green(c); // Simpler, but slower to calculate
-float r2 = c >> 8 & 0xFF; // Very fast to calculate
+float g1 = green(c); // Simpler, but slower to calculate
+float g2 = c >> 8 & 0xFF; // Very fast to calculate
]]>
+= 0; i--) {
- Ball ball = balls.get(i);
- ball.move();
- ball.display();
- if (ball.finished()) {
- // Items can be deleted with remove().
- balls.remove(i);
- }
- }
+// The second is using an enhanced loop:
+for (Particle part : particles) {
+ part.display();
}
-void mousePressed() {
- // A new ball object is added to the ArrayList, by default to the end.
- balls.add(new Ball(mouseX, mouseY, ballWidth));
+// You can delete particles from an ArrayList with remove()
+particles.remove(0);
+println(particles.size()); // Now one less!
+
+// If you are modifying an ArrayList during the loop,
+// then you cannot use the enhanced loop syntax.
+// In addition, when deleting in order to hit all elements,
+// you should loop through it backwards, as shown here:
+for (int i = particles.size() - 1; i >= 0; i--) {
+ Particle part = particles.get(i);
+ if (part.finished()) {
+ particles.remove(i);
+ }
}
]]>
@@ -44,13 +41,13 @@ println(quoted); // This one has "quotes"
11010110 // 214 & 01011100 // 92 -------- 01010100 // 84-
for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). 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 run.
-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. Run the statements within the block.
-5. Run the update statement and jump to step 2.
-6. Exit the loop.
-
+Controls a sequence of repetitions. A basic for structure has three parts: init, test, and update. Each part must be separated by a semicolon (;). 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 run.
+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. Run the statements within the block.
+5. Run the update statement and jump to step 2.
+6. Exit the loop.
+
In the first example above, the for structure is executed 40 times. In the init statement, the value i is created and set to zero. i is less than 40, so the test evaluates as true. At the end of each loop, i is incremented by one. On the 41st execution, the test is evaluated as false, because i is then equal to 40, so i < 40 is no longer true. Thus, the loop exits.
A second type of for structure makes it easier to iterate over each element of an array. The last example above shows how it works. Within the parentheses, first define the datatype of the array, then define a variable name. This variable name will be assigned to each element of the array in turn as the for moves through the entire array. Finally, after the colon, define the array name to be used.
diff --git a/content/api_en/include/greaterthan.xml b/content/api_en/include/greaterthan.xml
index 8f3d7a678..d2ea19b89 100755
--- a/content/api_en/include/greaterthan.xml
+++ b/content/api_en/include/greaterthan.xml
@@ -29,12 +29,12 @@ Tests if the value on the left is larger than the value on the right.
-
+
-
+
diff --git a/content/api_en/include/greaterthanorequalto.xml b/content/api_en/include/greaterthanorequalto.xml
index 7b5a6ee7f..ef874500d 100755
--- a/content/api_en/include/greaterthanorequalto.xml
+++ b/content/api_en/include/greaterthanorequalto.xml
@@ -29,12 +29,12 @@ Tests if the value on the left is larger than the value on the right or if the v
-
+
-
+
diff --git a/content/api_en/include/hint.xml b/content/api_en/include/hint.xml
new file mode 100644
index 000000000..a48311069
--- /dev/null
+++ b/content/api_en/include/hint.xml
@@ -0,0 +1,94 @@
+
+
+hint()
+
+Rendering
+
+
+
+function
+
+
+
+
+
+
+hint() to allow people to tune the settings for their particular sketch. Implementing a hint() is a last resort that's used when a more elegant solution cannot be found. Some options might graduate to standard features instead of hints over time, or be added and removed between (major) releases.
+
+
+Hints used by the default renderer:
+
+ENABLE_STROKE_PURE
+Fixes a problem with shapes that have a stroke and are rendered using small steps (for instance, using vertex() with points that are close to one another), or are drawn at small sizes.
+
+
+Hints for use with P2D and P3D:
+
+DISABLE_ASYNC_SAVEFRAME
+save() and saveFrame() will not use separate threads for saving and will block until the image is written to the drive. This was the default behavior in 3.0b7 and before. To enable, call hint(ENABLE_ASYNC_SAVEFRAME).
+
+DISABLE_OPENGL_ERRORS
+Speeds up the P3D renderer setting by not checking for errors while running.
+
+DISABLE_TEXTURE_MIPMAPS
+Disable generation of texture mipmaps in P2D or P3D. This results in lower quality - but faster - rendering of texture images when they appear smaller than their native resolutions (the mipmaps are scaled-down versions of a texture that make it look better when drawing it at a small size). However, the difference in performance is fairly minor on recent desktop video cards.
+
+
+Hints for use with P3D only:
+
+DISABLE_DEPTH_MASK
+Disables writing into the depth buffer. This means that a shape drawn with this hint can be hidden by another shape drawn later, irrespective of their distances to the camera. Note that this is different from disabling the depth test. The depth test is still applied, as long as the DISABLE_DEPTH_TEST hint is not called, but the depth values of the objects are not recorded. This is useful when drawing a semi-transparent 3D object without depth sorting, in order to avoid visual glitches due the faces of the object being at different distances from the camera, but still having the object properly occluded by the rest of the objects in the scene.
+
+ENABLE_DEPTH_SORT
+Enable primitive z-sorting of triangles and lines in P3D. This can slow performance considerably, and the algorithm is not yet perfect.
+
+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). When called, 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 will ignore existing shapes on the screen.
+
+DISABLE_OPTIMIZED_STROKE
+Forces the P3D renderer to draw each shape (including its strokes) separately, instead of batching them into larger groups for better performance. One consequence of this is that 2D items drawn with P3D are correctly stacked on the screen, depending on the order in which they were drawn. Otherwise, glitches such as the stroke lines being drawn on top of the interior of all the shapes will occur. However, this hint can make rendering substantially slower, so it is recommended to use it only when drawing a small amount of shapes. For drawing two-dimensional scenes, use the P2D renderer instead, which doesn't need the hint to properly stack shapes and their strokes.
+
+ENABLE_STROKE_PERSPECTIVE
+Enables stroke geometry (lines and points) to be affected by the perspective, meaning that they will look smaller as they move away from the camera.
+]]>
+
+
+hint(which)
+
+
+
+
+
+
+
+void
+
+
+PGraphics
+createGraphics()
+size()
+
+
+1.0
+
+Function
+
+PDE
+
+
diff --git a/content/api_en/include/implements.xml b/content/api_en/include/implements.xml
index 9bd728a25..c7f5478de 100755
--- a/content/api_en/include/implements.xml
+++ b/content/api_en/include/implements.xml
@@ -12,13 +12,43 @@
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.
-
+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, you can create interfaces instead, so 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.
]]>
diff --git a/content/api_en/include/import.xml b/content/api_en/include/import.xml
index f2d50946f..453a63a37 100644
--- a/content/api_en/include/import.xml
+++ b/content/api_en/include/import.xml
@@ -14,7 +14,7 @@
import processing.pdf.*;
void setup() {
- size(screenWidth, screenHeight, PDF);
+ size(1024, 768, PDF);
}
void draw() {
@@ -54,10 +54,4 @@ import libraryName
PDE
-
-
-
-
-
-
diff --git a/content/api_en/include/inequality.xml b/content/api_en/include/inequality.xml
index 3942a03ef..8836047f1 100755
--- a/content/api_en/include/inequality.xml
+++ b/content/api_en/include/inequality.xml
@@ -29,12 +29,12 @@ Determines if one expression is not equivalent to another.
-
+
-
+
diff --git a/content/api_en/include/intconvert.xml b/content/api_en/include/intconvert.xml
index 5af0aa5bf..56ba6ddb8 100755
--- a/content/api_en/include/intconvert.xml
+++ b/content/api_en/include/intconvert.xml
@@ -20,7 +20,9 @@ println(c + " : " + i); // Prints "E : 69"
-
+
+
+
+- The following libraries are included with the Processing software. To include a library, - select its name from the "Import Library..." option in the Sketch menu. These libraries are - open source; the code is distributed with Processing. + The following libraries are created by the Processing Foundation. The PDF Export, Network, Serial, and DXF Export libraries are distributed with Procesing. The Video and Sound libraries need to be downloaded through the Library Manager. Select "Add Library..." from the "Import Library..." submenu within the Sketch menu.
Read images from a camera, play movie files, and create movies.
+Create PDF files. These vector graphics files can be scaled to any size and printed + at high resolutions.
+Send and receive data over the Internet through simple clients and servers.
Create DXF files to save geometry for loading into other programs. It works with - triangle-based graphics including polygons, boxes, and spheres.
+Create SVG files.
Send data between Processing and external hardware through serial communication (RS-232).
Create PDF files. These vector graphics files can be scaled to any size and printed - at high resolutions.
+Create DXF files to save geometry for loading into other programs. It works with + triangle-based graphics including polygons, boxes, and spheres.
Read images from a camera, play movie files, and create movies.
+Send and receive data over the Internet through simple clients and servers.
+Playback audio files, audio input, synthesize sound, and effects.
+Access peripherals on the Raspberry Pi and other Linux-based computers
Uses JavaSound to provide an easy-to-use audio library while - still providing flexibility for more advanced users.
-
JSONArray. Per standard JSON syntax, the array must be enclosed in a pair of hard brackets [], and each object within the array must be separated by a comma.
-
+Loads an array of JSON objects from the data folder or a URL, and returns a JSONArray. Per standard JSON syntax, the array must be enclosed in a pair of hard brackets [], and each object within the array must be separated by a comma.
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/loadJSONObject.xml b/content/api_en/loadJSONObject.xml
index 7e074f25c..3cb5fa5bc 100755
--- a/content/api_en/loadJSONObject.xml
+++ b/content/api_en/loadJSONObject.xml
@@ -13,12 +13,14 @@
JSONObject.
-
+Loads a JSON from the data folder or a URL, and returns a JSONObject.
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/loadPixels.xml b/content/api_en/loadPixels.xml
index 59ccdbf68..d5c4b7c17 100755
--- a/content/api_en/loadPixels.xml
+++ b/content/api_en/loadPixels.xml
@@ -24,9 +24,7 @@ updatePixels();
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.
+Loads the pixel data of the current display window into the pixels[] array. This function must always be called before reading from or writing to pixels[]. Subsequent changes to the display window will not be reflected in pixels until loadPixels() is called again.
]]>
diff --git a/content/api_en/loadShader.xml b/content/api_en/loadShader.xml
index c77a51f69..46536ed1b 100644
--- a/content/api_en/loadShader.xml
+++ b/content/api_en/loadShader.xml
@@ -2,9 +2,6 @@
loadShader()
-
-
-
Rendering
Shaders
@@ -37,7 +34,7 @@ Loads a shader into the PShader object. The shader file must be loaded in the sk
Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.
-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.
+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.
]]>
diff --git a/content/api_en/loadShape.xml b/content/api_en/loadShape.xml
index 9bdec4d2f..330e1055c 100644
--- a/content/api_en/loadShape.xml
+++ b/content/api_en/loadShape.xml
@@ -52,7 +52,7 @@ Loads geometry into a variable of type PShape. SVG and OBJ files may be l
Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.
-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.
+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.
]]>
diff --git a/content/api_en/loadStrings.xml b/content/api_en/loadStrings.xml
index 678f4e1f1..321fa0140 100755
--- a/content/api_en/loadStrings.xml
+++ b/content/api_en/loadStrings.xml
@@ -11,7 +11,7 @@
Alternatively, the file maybe be loaded from anywhere on the local computer using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows), or the filename parameter can be a URL for a file found on a network.
-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.
+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.
]]>
diff --git a/content/api_en/loadTable.xml b/content/api_en/loadTable.xml
index e9149b0fc..e796c5c1c 100755
--- a/content/api_en/loadTable.xml
+++ b/content/api_en/loadTable.xml
@@ -11,7 +11,7 @@
.tsv.
-
-If the file contains a header row, include "header" in the options parameter. If the file does not have a header row, then simply omit the "header" option.
-
-When specifying both a header and the file type, separate the options with commas, as in: loadTable("data.csv", "header, tsv")
-
+Reads the contents of a file or URL and creates an Table object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a file found online. The filename must either end in an extension or an extension must be specified in the options parameter. For example, to use tab-separated data, include "tsv" in the options parameter if the filename or URL does not end in .tsv. Note: If an extension is in both places, the extension in the options is used.
+
+If the file contains a header row, include "header" in the options parameter. If the file does not have a header row, then simply omit the "header" option.
+
+Some CSV files contain newline (CR or LF) characters inside cells. This is rare, but adding the "newlines" option will handle them properly. (This is not enabled by default because the parsing code is much slower.)
+
+When specifying multiple options, separate them with commas, as in: loadTable("data.csv", "header, tsv")
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/loadXML.xml b/content/api_en/loadXML.xml
index 241d76a24..6290c6e28 100755
--- a/content/api_en/loadXML.xml
+++ b/content/api_en/loadXML.xml
@@ -44,9 +44,9 @@ void setup() {
-
-All files loaded and saved by the Processing API use UTF-8 encoding. If you need to load an XML file that's not in UTF-8 format, see the developer's reference for the XML object.
+Reads the contents of a file or URL and creates an XML object with its values. If a file is specified, it must be located in the sketch's "data" folder. The filename parameter can also be a URL to a file found online.
+
+All files loaded and saved by the Processing API use UTF-8 encoding. If you need to load an XML file that's not in UTF-8 format, see the developer's reference for the XML object.
]]>
diff --git a/content/api_en/map.xml b/content/api_en/map.xml
index 7223a5b44..524261934 100755
--- a/content/api_en/map.xml
+++ b/content/api_en/map.xml
@@ -48,10 +48,10 @@ void draw() {
-
-In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).
-
+Re-maps a number from one range to another.
+
+In the first example above, the number 25 is converted from a value in the range of 0 to 100 into a value that ranges from the left edge of the window (0) to the right edge (width).
+
As shown in the second example, numbers outside of the range are not clamped to the minimum and maximum parameters values, because out-of-range values are often intentional and useful.
]]>
diff --git a/content/api_en/match.xml b/content/api_en/match.xml
index f5f83ff41..92d1b2fdf 100755
--- a/content/api_en/match.xml
+++ b/content/api_en/match.xml
@@ -45,13 +45,13 @@ if (m2 != null) {
-
-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, an array is returned.
-
-If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression 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.
+This 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. If there are no matches, a null value will be returned. If no groups are specified in the regular expression, but the sequence matches, an array of length 1 (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 at all. If the sequence did match, an array is returned.
+
+If there are groups (specified by sets of parentheses) in the regular expression, then the contents of each will be returned in the array. Element [0] of a regular expression 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.
]]>
diff --git a/content/api_en/matchAll.xml b/content/api_en/matchAll.xml
index d2b258ec5..4f0345fbe 100644
--- a/content/api_en/matchAll.xml
+++ b/content/api_en/matchAll.xml
@@ -29,11 +29,11 @@ for (int i = 0; i < m.length; i++) {
-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 regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression 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.
+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 regular expression, then the contents of each will be returned in the array. Assuming a loop with counter variable i, element [i][0] of a regular expression 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.
]]>
diff --git a/content/api_en/modelX.xml b/content/api_en/modelX.xml
index 4f937a60b..6fc699188 100755
--- a/content/api_en/modelX.xml
+++ b/content/api_en/modelX.xml
@@ -53,7 +53,7 @@ void draw() {
+
In the example, the modelX(), modelY(), and modelZ() functions 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.
]]>
diff --git a/content/api_en/month.xml b/content/api_en/month.xml
index aa121576f..fbe2a5b51 100755
--- a/content/api_en/month.xml
+++ b/content/api_en/month.xml
@@ -11,24 +11,16 @@
diff --git a/content/api_en/mouseClicked.xml b/content/api_en/mouseClicked.xml
index 62c292aa2..c4d66e865 100755
--- a/content/api_en/mouseClicked.xml
+++ b/content/api_en/mouseClicked.xml
@@ -34,7 +34,7 @@ void mouseClicked() {
mouseClicked() function is called after a mouse button has been pressed and then released.
-
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mouseDragged.xml b/content/api_en/mouseDragged.xml
index 408b2c13a..a31beb1bd 100755
--- a/content/api_en/mouseDragged.xml
+++ b/content/api_en/mouseDragged.xml
@@ -33,7 +33,7 @@ void mouseDragged()
mouseDragged() function is called once every time the mouse moves while a mouse button is pressed. (If a button is not being pressed, mouseMoved() is called instead.)
-
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mouseMoved.xml b/content/api_en/mouseMoved.xml
index e11bfebaa..ae106c379 100755
--- a/content/api_en/mouseMoved.xml
+++ b/content/api_en/mouseMoved.xml
@@ -32,7 +32,7 @@ void mouseMoved() {
mouseMoved() function is called every time the mouse moves and a mouse button is not pressed. (If a button is being pressed, mouseDragged() is called instead.)
-
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mousePressed.xml b/content/api_en/mousePressed.xml
index 0efbec084..c2e05be62 100755
--- a/content/api_en/mousePressed.xml
+++ b/content/api_en/mousePressed.xml
@@ -33,7 +33,7 @@ void mousePressed() {
mousePressed() function is called once after every time a mouse button is pressed. The mouseButton variable (see the related reference entry) can be used to determine which button has been pressed.
-
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mouseReleased.xml b/content/api_en/mouseReleased.xml
index bfbd48825..2905cbf99 100755
--- a/content/api_en/mouseReleased.xml
+++ b/content/api_en/mouseReleased.xml
@@ -6,7 +6,7 @@
Mouse
-
+p5function
@@ -33,7 +33,7 @@ void mouseReleased() {
mouseReleased() function is called every time a mouse button is released.
-
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mouseWheel.xml b/content/api_en/mouseWheel.xml
index 06996ffcc..0a2344176 100755
--- a/content/api_en/mouseWheel.xml
+++ b/content/api_en/mouseWheel.xml
@@ -26,8 +26,8 @@ void mouseWheel(MouseEvent event) {
mouseWheel() function returns positive values when the mouse wheel is rotated down (toward the user), and negative values for the other direction (up or away from the user). On OS X with "natural" scrolling enabled, the values are opposite.
-
+The code within the mouseWheel() event function is run when the mouse wheel is moved. (Some mice don't have wheels and this function is only applicable with mice that have a wheel.) The getCount() function used within mouseWheel() returns positive values when the mouse wheel is rotated down (toward the user), and negative values for the other direction (up or away from the user). On OS X with "natural" scrolling enabled, the values are opposite.
+
Mouse and keyboard events only work when a program has draw(). Without draw(), the code is only run once and then stops listening for events.
]]>
diff --git a/content/api_en/mouseX.xml b/content/api_en/mouseX.xml
index b6961c24c..df813972c 100755
--- a/content/api_en/mouseX.xml
+++ b/content/api_en/mouseX.xml
@@ -11,8 +11,7 @@
mouseX always contains the current horizontal coordinate of the mouse.
-
+
Note that Processing can only track the mouse position when the pointer is over the current window. The default value of mouseX is 0, so 0 will be returned until the mouse moves in front of the sketch window. (This typically happens when a sketch is first run.) Once the mouse moves away from the window, mouseX will continue to report its most recent position.
]]>
diff --git a/content/api_en/mouseY.xml b/content/api_en/mouseY.xml
index fd24e9bf8..1ddf1e07a 100755
--- a/content/api_en/mouseY.xml
+++ b/content/api_en/mouseY.xml
@@ -11,8 +11,7 @@
mouseY always contains the current vertical coordinate of the mouse.
-
+
Note that Processing can only track the mouse position when the pointer is over the current window. The default value of mouseY is 0, so 0 will be returned until the mouse moves in front of the sketch window. (This typically happens when a sketch is first run.) Once the mouse moves away from the window, mouseY will continue to report its most recent position.
]]>
diff --git a/content/api_en/nf.xml b/content/api_en/nf.xml
index f1e6123dd..295db43ac 100755
--- a/content/api_en/nf.xml
+++ b/content/api_en/nf.xml
@@ -26,11 +26,16 @@ String se = nf(e, 5, 3);
println(se); // Prints "00040.200"
String sf = nf(f, 3, 5);
println(sf); // Prints "009.01200"
+
+String sf2 = nf(f, 0, 5);
+println(sf2); // Prints "9.01200"
+String sf3 = nf(f, 0, 2);
+println(sf3); // Prints "9.01"
]]>
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.
+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 and right parameters should always be positive integers. The left parameter should be positive or 0. If it is zero, only the right side is formatted.
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.
]]>
diff --git a/content/api_en/nfc.xml b/content/api_en/nfc.xml
index b3e2d1ba8..c65a5886b 100755
--- a/content/api_en/nfc.xml
+++ b/content/api_en/nfc.xml
@@ -21,9 +21,24 @@ println(fi); // Prints "42,525.34"
]]>
+
+
+
+
+
right parameter should always be a positive integer.
-
+Utility function for formatting numbers into strings and placing appropriate commas to mark units of 1000. There are four versions: one for formatting ints, one for formatting an array of ints, one for formatting floats, and one for formatting an array of floats.
+
+The value for the right parameter should always be a positive integer.
+
For a non-US locale, this will insert periods instead of commas, or whatever is apprioriate for that region.
]]>
diff --git a/content/api_en/noClip.xml b/content/api_en/noClip.xml
index 044c3afb4..71e932b48 100644
--- a/content/api_en/noClip.xml
+++ b/content/api_en/noClip.xml
@@ -3,9 +3,6 @@
noClip()
-
-
-
Rendering
@@ -17,14 +14,13 @@
draw(). If loop() is called, the code in draw() begins 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.
-
+Stops Processing from continuously executing the code within draw(). If loop() is called, the code in draw() begins 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.
]]>
diff --git a/content/api_en/noSmooth.xml b/content/api_en/noSmooth.xml
index 8f54eccd5..d40dd92e6 100755
--- a/content/api_en/noSmooth.xml
+++ b/content/api_en/noSmooth.xml
@@ -2,30 +2,43 @@
noSmooth()
-Shape
+Environment
-Attributes
+
-noSmooth_.png
+
-
+
+
+
+
smooth() is active by default, so it is necessary to call noSmooth() to disable smoothing of geometry, images, and fonts.
+Draws all geometry and fonts with jagged (aliased) edges and images with hard edges between the pixels when enlarged rather than interpolating pixels. Note that smooth() is active by default, so it is necessary to call noSmooth() to disable smoothing of geometry, fonts, and images. Since the release of Processing 3.0, the noSmooth() function can only be run once for each sketch, either at the top of a sketch without a setup(), or after the size() function when used in a sketch with setup(). See the examples above for both scenarios.
]]>
diff --git a/content/api_en/noise.xml b/content/api_en/noise.xml
index 24cad07cd..c7435b714 100755
--- a/content/api_en/noise.xml
+++ b/content/api_en/noise.xml
@@ -25,13 +25,12 @@ void draw() {
random() function. It was invented by Ken Perlin in the 1980s and has been used in graphical applications to generate procedural textures, shapes, terrains, and other seemingly organic forms.
-
-In contrast to the random() function, Perlin noise is defined in an infinite n-dimensional space, in which 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 first example above. The 2nd and 3rd dimensions can also be interpreted as time.
-
-The actual noise structure is similar to that of 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 is important (such as when using noise() within a loop). As a general rule, the smaller the difference between coordinates, the smoother the resulting noise sequence. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use.
+Returns the Perlin noise value at specified coordinates. Perlin noise is a random sequence generator producing a more natural, harmonic succession of numbers than that of the standard random() function. It was developed by Ken Perlin in the 1980s and has been used in graphical applications to generate procedural textures, shapes, terrains, and other seemingly organic forms.
+
+In contrast to the random() function, Perlin noise is defined in an infinite n-dimensional space, in which 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 first example above. The 2nd and 3rd dimensions can also be interpreted as time.
+
+The actual noise structure is similar to that of 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 is important (such as when using noise() within a loop). As a general rule, the smaller the difference between coordinates, the smoother the resulting noise sequence. Steps of 0.005-0.03 work best for most applications, but this will differ depending on use.
+
+There have been debates over the accuracy of the implementation of noise in Processing. For clarification, it's an implementation of "classic Perlin noise" from 1983, and not the newer "simplex noise" method from 2001.
]]>
diff --git a/content/api_en/noiseDetail.xml b/content/api_en/noiseDetail.xml
index a7abf99a5..dfd0d0633 100755
--- a/content/api_en/noiseDetail.xml
+++ b/content/api_en/noiseDetail.xml
@@ -31,10 +31,10 @@ void draw() {
-
-By default, noise is computed over 4 octaves with each octave contributing exactly half than its predecessor, starting at 50% strength for the first octave. This falloff amount can be changed by adding an additional function parameter. For example, a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. While any number between 0.0 and 1.0 is valid, note that values greater than 0.5 may result in noise() returning values greater than 1.0.
-
+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 overall 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 first octave. This falloff amount can be changed by adding an additional function parameter. For example, a falloff factor of 0.75 means each octave will now have 75% impact (25% less) of the previous lower octave. While any number between 0.0 and 1.0 is valid, note that values greater than 0.5 may result in noise() returning values greater than 1.0.
+
By changing these parameters, the signal created by the noise() function can be adapted to fit very specific needs and characteristics.
]]>
diff --git a/content/api_en/norm.xml b/content/api_en/norm.xml
index 41eef7f30..ea744d307 100755
--- a/content/api_en/norm.xml
+++ b/content/api_en/norm.xml
@@ -29,8 +29,8 @@ println(n); // Prints "-0.1"
map(value, low, high, 0, 1).
-
+Normalizes a number from another range into a value between 0 and 1. Identical to map(value, low, high, 0, 1).
+
Numbers outside of the range are not clamped to 0 and 1, because out-of-range values are often intentional and useful. (See the second example above.)
]]>
diff --git a/content/api_en/open.xml b/content/api_en/open.xml
deleted file mode 100755
index 3b0de58fe..000000000
--- a/content/api_en/open.xml
+++ /dev/null
@@ -1,65 +0,0 @@
-
-
-open()
-
-
-
-Input
-
-Files
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-filename parameter is a String specifying the file name and location. The location parameter must be a full path name, or the name of an executable in the system's PATH. In most cases, using a full path is the best option, rather than relying on the system PATH. Be sure to make the file executable before attempting to open it (chmod +x).
-
-The argv parameter is a String or String array which is passed to the command line. If you have multiple parameters, e.g. an application and a document, or a command with multiple switches, use the version that takes a String array, and place each individual item in a separate element.
-
-If argv is a String (not an array), then it can only be a single file or application with no parameters. It's not the same as executing that String using a shell. For instance, open("jikes -help") will not work properly.
-
-This function behaves differently on each platform. On Windows, the parameters are sent to the Windows shell via "cmd /c". On Mac OS X, the "open" command is used (type "man open" in Terminal.app for documentation). On Linux, it first tries gnome-open, then kde-open, but if neither are available, it sends the command to the shell without any alterations.
-
-For users familiar with Java, this is not quite the same as Runtime.exec(), because the launcher command is prepended. Instead, the exec(String[]) function is a shortcut for Runtime.getRuntime.exec(String[]).
-]]>
-
-
diff --git a/content/api_en/ortho.xml b/content/api_en/ortho.xml
index f00d750e3..41cfe21b4 100755
--- a/content/api_en/ortho.xml
+++ b/content/api_en/ortho.xml
@@ -13,7 +13,7 @@
diff --git a/content/api_en/parseJSONArray.xml b/content/api_en/parseJSONArray.xml
new file mode 100755
index 000000000..cdb4a4832
--- /dev/null
+++ b/content/api_en/parseJSONArray.xml
@@ -0,0 +1,39 @@
+
+
+parseJSONArray()
+
+Input
+
+Files
+
+
+
+
+
+
+
+
+String, parses its contents, and returns a JSONArray. If the String does not contain JSONArray data or cannot be parsed, a null value is returned.
+
+parseJSONArray() is most useful when pulling data dynamically, such as from third-party APIs. Normally, API results would be saved to a String, and then can be converted to a structured JSONArray using parseJSONArray(). Be sure to check if null is returned before performing operations on the new JSONArray in case the String content could not be parsed.
+
+If your data already exists as a JSON file in the data folder, it is simpler to use loadJSONArray().
+]]>
+
+
diff --git a/content/api_en/parseJSONObject.xml b/content/api_en/parseJSONObject.xml
new file mode 100755
index 000000000..45a6c02bb
--- /dev/null
+++ b/content/api_en/parseJSONObject.xml
@@ -0,0 +1,39 @@
+
+
+parseJSONObject()
+
+Input
+
+Files
+
+
+
+
+
+
+
+
+String, parses its contents, and returns a JSONObject. If the String does not contain JSONObject data or cannot be parsed, a null value is returned.
+
+parseJSONObject() is most useful when pulling data dynamically, such as from third-party APIs. Normally, API results would be saved to a String, and then can be converted to a structured JSONObject using parseJSONObject(). Be sure to check if null is returned before performing operations on the new JSONObject in case the String content could not be parsed.
+
+If your data already exists as a JSON file in the data folder, it is simpler to use loadJSONObject().
+]]>
+
+
diff --git a/content/api_en/parseXML.xml b/content/api_en/parseXML.xml
index 1a5800420..37a277dd9 100755
--- a/content/api_en/parseXML.xml
+++ b/content/api_en/parseXML.xml
@@ -29,10 +29,10 @@ void setup() {
-
-parseXML() is most useful when pulling data dynamically, such as from third-party APIs. Normally, API results would be saved to a String, and then can be converted to a structured XML object using parseXML(). Be sure to check if null is returned before performing operations on the new XML object, in case the String content could not be parsed.
-
+Takes a String, parses its contents, and returns an XML object. If the String does not contain XML data or cannot be parsed, a null value is returned.
+
+parseXML() is most useful when pulling data dynamically, such as from third-party APIs. Normally, API results would be saved to a String, and then can be converted to a structured XML object using parseXML(). Be sure to check if null is returned before performing operations on the new XML object, in case the String content could not be parsed.
+
If your data already exists as an XML file in the data folder, it is simpler to use loadXML().
]]>
diff --git a/content/api_en/pixelDensity.xml b/content/api_en/pixelDensity.xml
new file mode 100755
index 000000000..35b15bac1
--- /dev/null
+++ b/content/api_en/pixelDensity.xml
@@ -0,0 +1,66 @@
+
+
+pixelDensity()
+
+Environment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+size() in a program without a setup() and used within setup() when a program has one. The pixelDensity() should only be used with hardcoded numbers (in almost all cases this number will be 2) or in combination with displayDensity() as in the third example above.
+
+When the pixel density is set to more than 1, it changes all of the pixel operations including the way get(), set(), blend(), copy(), and updatePixels() all work. See the reference for pixelWidth and pixelHeight for more information.
+
+To use variables as the arguments to pixelDensity() function, place the pixelDensity() function within the settings() function. There is more information about this on the settings() reference page.
+]]>
+
+
diff --git a/content/api_en/pixelHeight.xml b/content/api_en/pixelHeight.xml
new file mode 100755
index 000000000..1a2e15e63
--- /dev/null
+++ b/content/api_en/pixelHeight.xml
@@ -0,0 +1,53 @@
+
+
+pixelHeight
+
+Environment
+
+
+
+
+
+
+
+
+
+
+
+pixelDensity(2) is used to make use of a high resolution display (called a Retina display on OS X or high-dpi on Windows and Linux), the width and height of the sketch do not change, but the number of pixels is doubled. As a result, all operations that use pixels (like loadPixels(), get(), set(), etc.) happen in this doubled space. As a convenience, the variables pixelWidth and pixelHeight hold the actual width and height of the sketch in pixels. This is useful for any sketch that uses the pixels[] array, for instance, because the number of elements in the array will be pixelWidth*pixelHeight, not width*height.
+]]>
+
+
\ No newline at end of file
diff --git a/content/api_en/pixelWidth.xml b/content/api_en/pixelWidth.xml
new file mode 100755
index 000000000..5f88fa136
--- /dev/null
+++ b/content/api_en/pixelWidth.xml
@@ -0,0 +1,53 @@
+
+
+pixelWidth
+
+Environment
+
+
+
+
+
+
+
+
+
+
+
+pixelDensity(2) is used to make use of a high resolution display (called a Retina display on OS X or high-dpi on Windows and Linux), the width and height of the sketch do not change, but the number of pixels is doubled. As a result, all operations that use pixels (like loadPixels(), get(), set(), etc.) happen in this doubled space. As a convenience, the variables pixelWidth and pixelHeight hold the actual width and height of the sketch in pixels. This is useful for any sketch that uses the pixels[] array, for instance, because the number of elements in the array will be pixelWidth*pixelHeight, not width*height.
+]]>
+
+
\ No newline at end of file
diff --git a/content/api_en/pixels.xml b/content/api_en/pixels.xml
index 5a5607c69..536f50338 100755
--- a/content/api_en/pixels.xml
+++ b/content/api_en/pixels.xml
@@ -21,9 +21,9 @@ updatePixels();
index value defines the position of a value within the array. For example, the statement 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() function. After the array data has been modified, the updatePixels() function must be run to update the changes. Without loadPixels(), running the code may (or will in future releases) result in a NullPointerException.
+The pixels[] array contains the values for all the pixels in the display window. These values are of the color datatype. This array is defined by the size of the display window. For example, if the window is 100 x 100 pixels, there will be 10,000 values and if the window is 200 x 300 pixels, there will be 60,000 values. When the pixel density is set to higher than 1 with the pixelDensity() function, these values will change. See the reference for pixelWidth or pixelHeight for more information.
+
+Before accessing this array, the data must loaded with the loadPixels() function. Failure to do so may result in a NullPointerException. Subsequent changes to the display window will not be reflected in pixels until loadPixels() is called again. After pixels has been modified, the updatePixels() function must be run to update the content of the display window.
]]>
diff --git a/content/api_en/pmouseX.xml b/content/api_en/pmouseX.xml
index 5e642fcd1..6f4dc2807 100755
--- a/content/api_en/pmouseX.xml
+++ b/content/api_en/pmouseX.xml
@@ -23,8 +23,8 @@ void draw() {
pmouseX always contains the horizontal position of the mouse in the frame previous to the current frame.
-
-You may find that pmouseX and pmouseY have different values when referenced inside of draw() and inside of mouse events like mousePressed() and mouseMoved(). Inside draw(), pmouseX and pmouseY update only once per frame (once per trip through the draw() loop). But inside mouse events, they update each time the event is called. If these values weren't updated immediately during mouse events, then the mouse position would be read only once per frame, resulting in slight delays and choppy interaction. If the mouse variables were always updated multiple times per frame, then something like line(pmouseX, pmouseY, mouseX, mouseY) inside draw() would have lots of gaps, because pmouseX may have changed several times in between the calls to line().
+
+You may find that pmouseX and pmouseY have different values when referenced inside of draw() and inside of mouse events like mousePressed() and mouseMoved(). Inside draw(), pmouseX and pmouseY update only once per frame (once per trip through the draw() loop). But inside mouse events, they update each time the event is called. If these values weren't updated immediately during mouse events, then the mouse position would be read only once per frame, resulting in slight delays and choppy interaction. If the mouse variables were always updated multiple times per frame, then something like line(pmouseX, pmouseY, mouseX, mouseY) inside draw() would have lots of gaps, because pmouseX may have changed several times in between the calls to line().
If you want values relative to the previous frame, use pmouseX and pmouseY inside draw(). If you want continuous response, use pmouseX and pmouseY inside the mouse event functions.
]]>
diff --git a/content/api_en/pmouseY.xml b/content/api_en/pmouseY.xml
index d984aebf4..414871ce3 100755
--- a/content/api_en/pmouseY.xml
+++ b/content/api_en/pmouseY.xml
@@ -23,7 +23,7 @@ void draw() {
pmouseY always contains the vertical position of the mouse in the frame previous to the current frame.
-
+
For more detail on how pmouseY is updated inside of mouse events and draw(), see the reference for pmouseX.
]]>
diff --git a/content/api_en/point.xml b/content/api_en/point.xml
index ef1900aa8..6034c7f82 100755
--- a/content/api_en/point.xml
+++ b/content/api_en/point.xml
@@ -33,6 +33,12 @@ point(30, 75, -50);
z parameter requires the P3D parameter in combination with size() as shown in the above example.
+
+Use stroke() to set the color of a point().
+
+Point appears round with the default strokeCap(ROUND) and square with strokeCap(PROJECT). Points are invisible with strokeCap(SQUARE) (no cap).
+
+Using point() with strokeWeight(1) or smaller may draw nothing to the screen, depending on the graphics settings of the computer. Workarounds include setting the pixel using set() or drawing the point using either circle() or square().
]]>
diff --git a/content/api_en/pop.xml b/content/api_en/pop.xml
new file mode 100644
index 000000000..743748933
--- /dev/null
+++ b/content/api_en/pop.xml
@@ -0,0 +1,51 @@
+
+
+pop()
+
+Structure
+
+
+
+
+
+
+popMatrix_.png
+
+
+
+
+popStyle_0.png
+
+
+
+pop() function restores the previous drawing style settings and transformations after push() has changed them. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information.
+
+push() stores information related to the current transformation state and style settings controlled by the following functions: rotate(), translate(), scale(), fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().
+
+The push() and pop() functions were added with Processing 3.5. They can be used in place of pushMatrix(), popMatrix(), pushStyles(), and popStyles(). The difference is that push() and pop() control both the transformations (rotate, scale, translate) and the drawing styles at the same time.
+]]>
+
+
diff --git a/content/api_en/print.xml b/content/api_en/print.xml
index ccb7690f3..162f82ebe 100755
--- a/content/api_en/print.xml
+++ b/content/api_en/print.xml
@@ -40,7 +40,9 @@ println(s);
print() function writes to the console area, the black rectangle at the bottom of the Processing environment. This function 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. More than one parameter can be passed into the function by separating them with commas. Alternatively, individual elements can be separated with quotes ("") and joined with the addition operator (+).
-Using print() on an object will output null, a memory location that may look like "@10be08," or the result of the toString() method from the object that's being printed. Advanced users who want more useful output when calling print() on their own classes can add a toString() method to the class that returns a String.
+Using print() on an object will output null, a memory location that may look like "@10be08," or the result of the toString() method from the object that's being printed. Advanced users who want more useful output when calling print() on their own classes can add a toString() method to the class that returns a String.
+
+Note that the console is relatively slow. It works well for occasional messages, but does not support high-speed, real-time output (such as at 60 frames per second). It should also be noted, that a print() within a for loop can sometimes lock up the program, and cause the sketch to freeze.
]]>
diff --git a/content/api_en/printArray.xml b/content/api_en/printArray.xml
index 381d5fa1e..a6bfa43e6 100755
--- a/content/api_en/printArray.xml
+++ b/content/api_en/printArray.xml
@@ -22,7 +22,9 @@ printArray(f);
printArray() function writes array data to the text area of the Processing environment's console. A new line is put between each element of the array. This function can only print one dimensional arrays.
+The printArray() function writes array data to the text area of the Processing environment's console. A new line is put between each element of the array. This function can only print one dimensional arrays.
+
+Note that the console is relatively slow. It works well for occasional messages, but does not support high-speed, real-time output (such as at 60 frames per second).
]]>
diff --git a/content/api_en/println.xml b/content/api_en/println.xml
index 7f24940f9..80c273526 100755
--- a/content/api_en/println.xml
+++ b/content/api_en/println.xml
@@ -39,9 +39,11 @@ println(s);
print() function writes to the console area, the black rectangle at the bottom of the Processing environment. This function is often helpful for looking at the data a program is producing. Each call to this function creates a new line of output. More than one parameter can be passed into the function by separating them with commas. Alternatively, individual elements can be separated with quotes ("") and joined with the addition operator (+).
-
-Before Processing 2.1, println() was used to write array data to the console. Now, use printArray() to write array data to the console.
+The println() function writes to the console area, the black rectangle at the bottom of the Processing environment. This function is often helpful for looking at the data a program is producing. Each call to this function creates a new line of output. More than one parameter can be passed into the function by separating them with commas. Alternatively, individual elements can be separated with quotes ("") and joined with the addition operator (+).
+
+Before Processing 2.1, println() was used to write array data to the console. Now, use printArray() to write array data to the console.
+
+Note that the console is relatively slow. It works well for occasional messages, but does not support high-speed, real-time output (such as at 60 frames per second). It should also be noted, that a println() within a for loop can sometimes lock up the program, and cause the sketch to freeze.
]]>
diff --git a/content/api_en/push.xml b/content/api_en/push.xml
new file mode 100644
index 000000000..e926650fb
--- /dev/null
+++ b/content/api_en/push.xml
@@ -0,0 +1,51 @@
+
+
+push()
+
+Structure
+
+
+
+
+
+
+pushMatrix_.png
+
+
+
+
+pushStyle_0.png
+
+
+
+push() function saves the current drawing style settings and transformations, while pop() restores these settings. Note that these functions are always used together. They allow you to change the style and transformation settings and later return to what you had. When a new state is started with push(), it builds on the current style and transform information.
+
+push() stores information related to the current transformation state and style settings controlled by the following functions: rotate(), translate(), scale(), fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().
+
+The push() and pop() functions were added with Processing 3.5. They can be used in place of pushMatrix(), popMatrix(), pushStyles(), and popStyles(). The difference is that push() and pop() control both the transformations (rotate, scale, translate) and the drawing styles at the same time.
+]]>
+
+
diff --git a/content/api_en/quadraticVertex.xml b/content/api_en/quadraticVertex.xml
index d1934ae70..c3dd03bc5 100644
--- a/content/api_en/quadraticVertex.xml
+++ b/content/api_en/quadraticVertex.xml
@@ -2,9 +2,6 @@
quadraticVertex()
-
-
-
Shape
Vertex
@@ -38,7 +35,7 @@ endShape();
quadraticVertex() defines the position of one control points and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() 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 requires rendering with P3D (see the Environment reference for more information).
+Specifies vertex coordinates for quadratic Bezier curves. Each call to quadraticVertex() defines the position of one control point and one anchor point of a Bezier curve, adding a new segment to a line or shape. The first time quadraticVertex() 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 requires rendering with P3D (see the Environment reference for more information).
]]>
diff --git a/content/api_en/random.xml b/content/api_en/random.xml
index 61451073b..ab595190c 100755
--- a/content/api_en/random.xml
+++ b/content/api_en/random.xml
@@ -40,8 +40,8 @@ println(words[index]); // Prints one of the four words
random() function is called, it returns an unexpected value within the specified range. If only one parameter is passed to the function, it will return a float between zero and the value of the high parameter. For example, random(5) returns values between 0 and 5 (starting at zero, and up to, but not including, 5).
-
+Generates random numbers. Each time the random() function is called, it returns an unexpected value within the specified range. If only one parameter is passed to the function, it will return a float between zero and the value of the high parameter. For example, random(5) returns values between 0 and 5 (starting at zero, and up to, but not including, 5).
+
If two parameters are specified, the function will return a float with a value between the two values. For example, random(-5, 10.2) returns values starting at -5 and up to (but not including) 10.2. To convert a floating-point random number to an integer, use the int() function.
]]>
diff --git a/content/api_en/rect.xml b/content/api_en/rect.xml
index 9f06dc18e..b2763ef3c 100755
--- a/content/api_en/rect.xml
+++ b/content/api_en/rect.xml
@@ -29,15 +29,11 @@ rect(30, 20, 55, 55, 3, 6, 12, 18);
]]>
-
-
rectMode() function.
-To draw a rounded rectangle, add a fifth parameter, which is used as the radius value for all four corners.
-
+To draw a rounded rectangle, add a fifth parameter, which is used as the radius value for all four corners.
+
To use a different radius value for each corner, include eight parameters. When using eight parameters, the latter four set the radius of the arc at each corner separately, starting with the top-left corner and moving clockwise around the rectangle.
diff --git a/content/api_en/rectMode.xml b/content/api_en/rectMode.xml
index 32b536dbf..057f8679c 100755
--- a/content/api_en/rectMode.xml
+++ b/content/api_en/rectMode.xml
@@ -35,14 +35,14 @@ rect(50, 50, 30, 30); // Draw gray rect using CENTER mode
rect() are intepreted.
-
-The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.
-
-rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.
-
-rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.
-
+Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are intepreted.
+
+The default mode is rectMode(CORNER), which interprets the first two parameters of rect() as the upper-left corner of the shape, while the third and fourth parameters are its width and height.
+
+rectMode(CORNERS) interprets the first two parameters of rect() as the location of one corner, and the third and fourth parameters as the location of the opposite corner.
+
+rectMode(CENTER) interprets the first two parameters of rect() as the shape's center point, while the third and fourth parameters are its width and height.
+
rectMode(RADIUS) also uses the first two parameters of rect() as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height.
The parameter must be written in ALL CAPS because Processing is a case-sensitive language.
diff --git a/content/api_en/redraw.xml b/content/api_en/redraw.xml
index 4d1a4c8f1..71fb700b1 100755
--- a/content/api_en/redraw.xml
+++ b/content/api_en/redraw.xml
@@ -32,9 +32,9 @@ void mousePressed() {
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).
-
+
The redraw() function does not work properly when called inside draw(). To enable/disable animations, use loop() and noLoop().
]]>
diff --git a/content/api_en/requestImage.xml b/content/api_en/requestImage.xml
index 5a04e7bab..67be6b5ab 100644
--- a/content/api_en/requestImage.xml
+++ b/content/api_en/requestImage.xml
@@ -33,7 +33,7 @@ void draw() {
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().
]]>
diff --git a/content/api_en/resetMatrix.xml b/content/api_en/resetMatrix.xml
index 733a2803b..fb1c6ac42 100755
--- a/content/api_en/resetMatrix.xml
+++ b/content/api_en/resetMatrix.xml
@@ -9,7 +9,7 @@
-resetMatrix_.png
+
resetShader()
-
-
-
Rendering
Shaders
diff --git a/content/api_en/rotate.xml b/content/api_en/rotate.xml
index 998736ce3..7e2ec8edb 100755
--- a/content/api_en/rotate.xml
+++ b/content/api_en/rotate.xml
@@ -18,10 +18,10 @@ rect(-26, -26, 52, 52);
angle parameter. Angles must be specified in radians (values from 0 to TWO_PI), or they can be converted from degrees 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. Transformations apply to everything that happens afterward, and subsequent calls to the function compound the effect. For example, calling rotate(HALF_PI) once and then calling rotate(HALF_PI) a second time is the same as a single rotate(PI). All tranformations are reset when draw() begins again.
-
+Rotates the amount specified by the angle parameter. Angles must be specified in radians (values from 0 to TWO_PI), or they can be converted from degrees to radians with the radians() function.
+
+The coordinates are always rotated around their relative position to the origin. Positive numbers rotate objects in a clockwise direction and negative numbers rotate in the couterclockwise direction. Transformations apply to everything that happens afterward, and subsequent calls to the function compound the effect. For example, calling rotate(PI/2.0) once and then calling rotate(PI/2.0) a second time is the same as a single rotate(PI). All tranformations are reset when draw() begins again.
+
Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by pushMatrix() and popMatrix().
]]>
diff --git a/content/api_en/rotateX.xml b/content/api_en/rotateX.xml
index 38618bafd..8d92559c2 100755
--- a/content/api_en/rotateX.xml
+++ b/content/api_en/rotateX.xml
@@ -29,7 +29,7 @@ rect(-26, -26, 52, 52);
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 using P3D as a third parameter to size() as shown in the example above.
+Rotates 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 from degrees to radians with the radians() function. Coordinates are always rotated around their relative position to the origin. Positive numbers rotate in a clockwise direction and negative numbers rotate 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 run within the draw(), the transformation is reset when the loop begins again. This function requires using P3D as a third parameter to size() as shown in the example above.
]]>
diff --git a/content/api_en/rotateY.xml b/content/api_en/rotateY.xml
index 1f4728184..dc6c35d75 100755
--- a/content/api_en/rotateY.xml
+++ b/content/api_en/rotateY.xml
@@ -29,7 +29,7 @@ rect(-26, -26, 52, 52);
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 using P3D as a third parameter to size() as shown in the examples above.
+Rotates 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 from degrees to radians with the radians() function. Coordinates are always rotated around their relative position to the origin. Positive numbers rotate in a clockwise direction and negative numbers rotate 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 run within the draw(), the transformation is reset when the loop begins again. This function requires using P3D as a third parameter to size() as shown in the example above.
]]>
diff --git a/content/api_en/rotateZ.xml b/content/api_en/rotateZ.xml
index 5f5566ec9..3148ff4bc 100755
--- a/content/api_en/rotateZ.xml
+++ b/content/api_en/rotateZ.xml
@@ -29,7 +29,7 @@ rect(-26, -26, 52, 52);
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 using P3D as a third parameter to size() as shown in the examples above.
+Rotates around the z-axis the amount specified by the angle parameter. Angles should be specified in radians (values from 0 to TWO_PI) or converted from degrees to radians with the radians() function. Coordinates are always rotated around their relative position to the origin. Positive numbers rotate in a clockwise direction and negative numbers rotate 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 run within the draw(), the transformation is reset when the loop begins again. This function requires using P3D as a third parameter to size() as shown in the example above.
]]>
diff --git a/content/api_en/save.xml b/content/api_en/save.xml
index 1b7087bdf..4cc26ff4e 100755
--- a/content/api_en/save.xml
+++ b/content/api_en/save.xml
@@ -21,8 +21,8 @@ save("cross.tga");
.tif will be added to the name. These files are saved to the sketch's folder, which may be opened by selecting "Show sketch folder" from the "Sketch" menu. Alternatively, the files can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
-
+Saves an image from the display window. Append a file extension to the name of the file, to indicate the file format to be used: either TIFF (.tif), TARGA (.tga), JPEG (.jpg), or PNG (.png). If no extension is included in the filename, the image will save in TIFF format and .tif will be added to the name. These files are saved to the sketch's folder, which may be opened by selecting "Show sketch folder" from the "Sketch" menu. Alternatively, the files can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+
All images saved from the main drawing window will be opaque. To save images without a background, use createGraphics().
]]>
diff --git a/content/api_en/saveBytes.xml b/content/api_en/saveBytes.xml
index 076bc5ef5..1f447d90d 100755
--- a/content/api_en/saveBytes.xml
+++ b/content/api_en/saveBytes.xml
@@ -2,9 +2,6 @@
saveBytes()
-
-
-
Output
Files
diff --git a/content/api_en/saveFrame.xml b/content/api_en/saveFrame.xml
index 878036ab5..97d8356b9 100755
--- a/content/api_en/saveFrame.xml
+++ b/content/api_en/saveFrame.xml
@@ -49,7 +49,7 @@ Saves a numbered sequence of images, one image each time the function is run. To
If saveFrame() is used without parameters, it will save files as screen-0000.tif, screen-0001.tif, and so on. You can specify the name of the sequence with the filename parameter, including hash marks (####), which will be replaced by the current frameCount value. (The number of hash marks is used to determine how many digits to include in the file names.) Append a file extension, to indicate the file format to be used: either TIFF (.tif), TARGA (.tga), JPEG (.jpg), or PNG (.png). Image files are saved to the sketch's folder, which may be opened by selecting "Show Sketch Folder" from the "Sketch" menu.
-Alternatively, the files can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+Alternatively, the files can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
All images saved from the main drawing window will be opaque. To save images without a background, use createGraphics().
]]>
diff --git a/content/api_en/saveJSONArray.xml b/content/api_en/saveJSONArray.xml
index fe65e7324..d893ca3ca 100755
--- a/content/api_en/saveJSONArray.xml
+++ b/content/api_en/saveJSONArray.xml
@@ -56,10 +56,10 @@ void setup() {
JSONArray object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
-
-Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
-
+Writes the contents of a JSONArray object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
+
+Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/saveJSONObject.xml b/content/api_en/saveJSONObject.xml
index 3a152621e..59da6d862 100755
--- a/content/api_en/saveJSONObject.xml
+++ b/content/api_en/saveJSONObject.xml
@@ -34,10 +34,10 @@ void setup() {
JSONObject object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
-
-Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
-
+Writes the contents of a JSONObject object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
+
+Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/saveStream.xml b/content/api_en/saveStream.xml
index ca645c5e8..60ed05765 100644
--- a/content/api_en/saveStream.xml
+++ b/content/api_en/saveStream.xml
@@ -2,9 +2,6 @@
saveStream()
-
-
-
Output
Files
diff --git a/content/api_en/saveStrings.xml b/content/api_en/saveStrings.xml
index 63012349b..ad3929b41 100755
--- a/content/api_en/saveStrings.xml
+++ b/content/api_en/saveStrings.xml
@@ -22,7 +22,7 @@ saveStrings("nouns.txt", list);
-Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
Starting with Processing 1.0, all files loaded and saved by the Processing API use UTF-8 encoding. In earlier releases, the default encoding for your platform was used, which causes problems when files are moved to other platforms.
]]>
diff --git a/content/api_en/saveTable.xml b/content/api_en/saveTable.xml
index 300ff29aa..f459d24e1 100755
--- a/content/api_en/saveTable.xml
+++ b/content/api_en/saveTable.xml
@@ -36,10 +36,10 @@ void setup() {
-
-Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
-
+Writes the contents of a Table object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
+
+Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/saveXML.xml b/content/api_en/saveXML.xml
index b3d82b8f7..b1facc0c9 100755
--- a/content/api_en/saveXML.xml
+++ b/content/api_en/saveXML.xml
@@ -41,10 +41,10 @@ void setup() {
-
-Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
-
+Writes the contents of an XML object to a file. By default, this file is saved to the sketch's folder. This folder is opened by selecting "Show Sketch Folder" from the "Sketch" menu.
+
+Alternatively, the file can be saved to any location on the computer by using an absolute path (something that starts with / on Unix and Linux, or a drive letter on Windows).
+
All files loaded and saved by the Processing API use UTF-8 encoding.
]]>
diff --git a/content/api_en/scale.xml b/content/api_en/scale.xml
index 923f1694f..1dd1215f8 100755
--- a/content/api_en/scale.xml
+++ b/content/api_en/scale.xml
@@ -41,9 +41,9 @@ box(20, 20, 20);
scale(2.0) increases the dimension of a shape by 200%.
-
-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 fuction with the z parameter requires using P3D as a parameter for size(), as shown in the third example above. This function can be further controlled with pushMatrix() and popMatrix().
+Increases or decreases the size of a shape by expanding and contracting vertices. Objects always scale from their relative origin to the coordinate system. Scale values are specified as decimal percentages. For example, the function call scale(2.0) increases the dimension of a shape by 200%.
+
+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 using P3D as a parameter for size(), as shown in the third example above. This function can be further controlled with pushMatrix() and popMatrix().
]]>
diff --git a/content/api_en/selectFolder.xml b/content/api_en/selectFolder.xml
index 642bcb413..a7598a986 100644
--- a/content/api_en/selectFolder.xml
+++ b/content/api_en/selectFolder.xml
@@ -2,9 +2,6 @@
selectFolder()
-
-
-
Input
Files
diff --git a/content/api_en/selectInput.xml b/content/api_en/selectInput.xml
index 9c23e0797..ad295df0d 100644
--- a/content/api_en/selectInput.xml
+++ b/content/api_en/selectInput.xml
@@ -2,9 +2,6 @@
selectInput()
-
-
-
Input
Files
diff --git a/content/api_en/selectOutput.xml b/content/api_en/selectOutput.xml
index 9af41b1fb..5181e54ad 100644
--- a/content/api_en/selectOutput.xml
+++ b/content/api_en/selectOutput.xml
@@ -2,9 +2,6 @@
selectOutput()
-
-
-
Output
Files
diff --git a/content/api_en/settings.xml b/content/api_en/settings.xml
new file mode 100644
index 000000000..3cf6b5022
--- /dev/null
+++ b/content/api_en/settings.xml
@@ -0,0 +1,115 @@
+
+
+settings()
+
+Environment
+
+
+
+p5function
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+settings() function is new with Processing 3.0. It's not needed in most sketches. It's only useful when it's absolutely necessary to define the parameters to size() with a variable. Alternately, the settings() function is necessary when using Processing code outside of the Processing Development Environment (PDE). For example, when using the Eclipse code editor, it's necessary to use settings() to define the size() and smooth() values for a sketch..
+
+The settings() method runs before the sketch has been set up, so other Processing functions cannot be used at that point. For instance, do not use loadImage() inside settings(). The settings() method runs "passively" to set a few variables, compared to the setup() command that call commands in the Processing API.
+]]>
+
+
diff --git a/content/api_en/setup.xml b/content/api_en/setup.xml
index 42905890f..c7971f540 100755
--- a/content/api_en/setup.xml
+++ b/content/api_en/setup.xml
@@ -11,6 +11,8 @@
+
+
+
+
+
setup() function is called once when the program starts. It's used to define initial
-enviroment properties such as screen size and background color and to load media such as images
-and fonts as the program starts. There can only be one setup() function for each program and
-it shouldn't be called again after its initial execution. Note: Variables declared within
-setup() are not accessible within other functions, including draw().
+The setup() function is run once, when the program starts. It's used to define initial enviroment properties such as screen size and to load media such as images and fonts as the program starts. There can only be one setup() function for each program and it shouldn't be called again after its initial execution.
+
+If the sketch is a different dimension than the default, the size() function or fullScreen() function must be the first line in setup().
+
+Note: Variables declared within setup() are not accessible within other functions, including draw().
]]>
diff --git a/content/api_en/shader.xml b/content/api_en/shader.xml
index 41165e6b3..622781e0c 100755
--- a/content/api_en/shader.xml
+++ b/content/api_en/shader.xml
@@ -2,9 +2,6 @@
shader()
-
-
-
Rendering
Shaders
diff --git a/content/api_en/shearX.xml b/content/api_en/shearX.xml
index 28674e867..0ff109bc1 100644
--- a/content/api_en/shearX.xml
+++ b/content/api_en/shearX.xml
@@ -2,9 +2,6 @@
shearX()
-
-
-
Transform
@@ -23,7 +20,7 @@ rect(0, 0, 30, 30);
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 sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearX(PI/2) and then shearX(PI/2) is the same as shearX(PI). If shearX() is called within the draw(), the transformation is reset when the loop begins again.
-
+
Technically, shearX() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the pushMatrix() and popMatrix() functions.
]]>
diff --git a/content/api_en/shearY.xml b/content/api_en/shearY.xml
index f4ad3658b..7c2725d85 100644
--- a/content/api_en/shearY.xml
+++ b/content/api_en/shearY.xml
@@ -2,9 +2,6 @@
shearY()
-
-
-
Transform
@@ -23,7 +20,7 @@ rect(0, 0, 30, 30);
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 sheared around their relative position to the origin and positive numbers shear objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling shearY(PI/2) and then shearY(PI/2) is the same as shearY(PI). If shearY() is called within the draw(), the transformation is reset when the loop begins again.
-
+
Technically, shearY() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the pushMatrix() and popMatrix() functions.
]]>
diff --git a/content/api_en/shorten.xml b/content/api_en/shorten.xml
index 6e2bfd66b..41746c5ad 100755
--- a/content/api_en/shorten.xml
+++ b/content/api_en/shorten.xml
@@ -20,8 +20,8 @@ println(sa2); // 'sa2' now contains OH, NY
+Decreases a one-dimensional 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)
]]>
diff --git a/content/api_en/size.xml b/content/api_en/size.xml
index 8209ab7d4..bd6f4c1b0 100755
--- a/content/api_en/size.xml
+++ b/content/api_en/size.xml
@@ -9,7 +9,7 @@
-size_0.png
+
-size_1.png
+
-size_2.png
+
size() function must be the first line of code, or the first code inside setup(). Any code that appears before the size() command may run more than once, which can lead to confusing results.
-
-The system variables width and height are set by the parameters passed to this function. If size() is not used, the window will be given a default size of 100x100 pixels.
-
-The size() function can only be used once inside a sketch, and it cannot be used for resizing.
-
-Do not use variables as the parameters to size() function, because it will cause problems when exporting your sketch. When variables are used, the dimensions of your sketch cannot be determined during export. Instead, employ numeric values in the size() statement, and then use the built-in width and height variables inside your program when the dimensions of the display window are needed.
-
-The maximum width and height is limited by your operating system, and is usually the width and height of your actual screen. On some machines it may simply be the number of pixels on your current screen, meaning that a screen of 800x600 could support size(1600, 300), since that is the same number of pixels. This varies widely, so you'll have to try different rendering modes and sizes until you get what you're looking for. If you need something larger, use createGraphics to create a non-visible drawing surface.
-
-The renderer parameter selects which rendering engine to use. For example, if you will be drawing 3D shapes, use P3D. In addition to the default renderer, other renderers are:
-
-P2D (Processing 2D): A renderer that supports two-dimensional drawing.
-
-P3D (Processing 3D): 3D graphics renderer that makes use of OpenGL-compatible graphics hardware.
-
-PDF: The PDF renderer draws 2D graphics directly to an Acrobat PDF file. This produces excellent results when you need vector shapes for high-resolution output or printing. You must first use Import Library → PDF to make use of the library. More information can be found in the PDF library reference.
-
+Defines the dimension of the display window width and height in units of pixels. In a program that has the setup() function, the size() function must be the first line of code inside setup(), and the setup() function must appear in the code tab with the same name as your sketch folder.
+
+The built-in variables width and height are set by the parameters passed to this function. For example, running size(640, 480) will assign 640 to the width variable and 480 to the height variable. If size() is not used, the window will be given a default size of 100 x 100 pixels.
+
+The size() function can only be used once inside a sketch, and it cannot be used for resizing.
+
+As of Processing 3, to run a sketch at the full dimensions of a screen, use the fullScreen() function, rather than the older way of using size(displayWidth, displayHeight).
+
+The maximum width and height is limited by your operating system, and is usually the width and height of your actual screen. On some machines it may simply be the number of pixels on your current screen, meaning that a screen of 800 x 600 could support size(1600, 300), since that is the same number of pixels. This varies widely, so you'll have to try different rendering modes and sizes until you get what you're looking for. If you need something larger, use createGraphics to create a non-visible drawing surface.
+
+The minimum width and height is around 100 pixels in each direction. This is the smallest that is supported across Windows, macOS, and Linux. We enforce the minimum size so that sketches will run identically on different machines.
+
+The renderer parameter selects which rendering engine to use. For example, if you will be drawing 3D shapes, use P3D. In addition to the default renderer, other renderers are:
+
+P2D (Processing 2D): 2D graphics renderer that makes use of OpenGL-compatible graphics hardware.
+
+P3D (Processing 3D): 3D graphics renderer that makes use of OpenGL-compatible graphics hardware.
+
+FX2D (JavaFX 2D): A 2D renderer that uses JavaFX, which may be faster for some applications, but has some compatibility quirks.
+
+PDF: The PDF renderer draws 2D graphics directly to an Acrobat PDF file. This produces excellent results when you need vector shapes for high-resolution output or printing. You must first use Import Library → PDF to make use of the library. More information can be found in the PDF library reference.
+
+SVG: The SVG renderer draws 2D graphics directly to an SVG file. This is great for importing into other vector programs or using for digital fabrication. You must first use Import Library → SVG Export to make use of the library.
+
+As of Processing 3.0, to use variables as the parameters to size() function, place the size() function within the settings() function (instead of setup()). There is more information about this on the settings() reference page.
+
]]>
diff --git a/content/api_en/smooth.xml b/content/api_en/smooth.xml
index c370286b6..c19f7a303 100755
--- a/content/api_en/smooth.xml
+++ b/content/api_en/smooth.xml
@@ -2,34 +2,80 @@
smooth()
-Shape
+Environment
-Attributes
+
-smooth_.png
+
+
+
+
+
+
-
+
+
+
+
smooth() will also improve image quality of resized images. Note that smooth() is active by default; noSmooth() can be used to disable smoothing of geometry, images, and fonts.
-
-The level parameter increases the level of smoothness with the P2D and P3D renderers. This is the level of over sampling applied to the graphics buffer. The value "2" will double the rendering size before scaling it down to the display size. This is called "2x anti-aliasing." The value 4 is used for 4x anti-aliasing and 8 is specified for 8x anti-aliasing. If level is set to 0, it will disable all smoothing; it's the equivalent of the function noSmooth(). The maximum anti-aliasing level is determined by the hardware of the machine that is running the software.
-
-With the default renderer, smooth(2) is bilinear and smooth(4) is bicubic. Nothing implemented on Android 2D.
+Draws all geometry with smooth (anti-aliased) edges. This behavior is the default, so smooth() only needs to be used when a program needs to set the smoothing in a different way. The level parameter increases the amount of smoothness. This is the level of over sampling applied to the graphics buffer.
+
+With the P2D and P3D renderers, smooth(2) is the default, this is called "2x anti-aliasing." The code smooth(4) is used for 4x anti-aliasing and smooth(8) is specified for "8x anti-aliasing." The maximum anti-aliasing level is determined by the hardware of the machine that is running the software, so smooth(4) and smooth(8) will not work with every computer.
+
+The default renderer uses smooth(3) by default. This is bicubic smoothing. The other option for the default renderer is smooth(2), which is bilinear smoothing.
+
+With Processing 3.0, smooth() is different than before. It was common to use smooth() and noSmooth() to turn on and off antialiasing within a sketch. Now, because of how the software has changed, smooth() can only be set once within a sketch. It can be used either at the top of a sketch without a setup(), or after the size() function when used in a sketch with setup(). The noSmooth() function also follows the same rules.
+
+When smooth() is used with a PGraphics object, it should be run right after the object is created with createGraphics(), as shown in the Reference in the third example.
]]>
diff --git a/content/api_en/splice.xml b/content/api_en/splice.xml
index 1ecd02bd7..a9f5358c6 100755
--- a/content/api_en/splice.xml
+++ b/content/api_en/splice.xml
@@ -39,8 +39,8 @@ println(a);
-
+Inserts a value or an array of values into an existing array. The first two parameters must be arrays of the same datatype. The first parameter specifies the initial array to be modified, and the second parameter defines the data to be inserted. The third parameter is an index value which specifies the array position from which to insert data. (Remember that array index numbering starts at zero, so the first position is 0, the second position is 1, and so on.)
+
When splicing 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)
]]>
diff --git a/content/api_en/split.xml b/content/api_en/split.xml
index d94474403..5b01ca9f2 100755
--- a/content/api_en/split.xml
+++ b/content/api_en/split.xml
@@ -37,9 +37,9 @@ String[] list = split(men, " ] ");
split() function breaks a String into pieces using a character or string as the delimiter. 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 the second example above.)
-
+
+If the result is a set of numbers, you can convert the String[] array to a float[] or int[] array using the datatype conversion functions int() and float(). (See the second 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.
-
textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.
-
-The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen.
-
+Draws text to the screen. Displays the information specified in the first parameter on the screen in the position specified by the additional parameters. A default font will be used unless a font is set with the textFont() function and a default size will be used unless a font is set with textSize(). Change the color of the text with the fill() function. The text displays in relation to the textAlign() function, which gives the option to draw to the left, right, and center of the coordinates.
+
+The x2 and y2 parameters define a rectangular area to display within and may only be used with string data. When these parameters are specified, they are interpreted based on the current rectMode() setting. Text that does not fit completely within the rectangle specified will not be drawn to the screen.
+
Note that Processing now lets you call text() without first specifying a PFont with textFont(). In that case, a generic sans-serif font will be used instead. (See the third example above.)
]]>
diff --git a/content/api_en/textAlign.xml b/content/api_en/textAlign.xml
index 68d515352..c333d1c52 100755
--- a/content/api_en/textAlign.xml
+++ b/content/api_en/textAlign.xml
@@ -40,20 +40,13 @@ text("CENTER,TOP", 50, 70);
]]>
-
-
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.
]]>
diff --git a/content/api_en/textAscent.xml b/content/api_en/textAscent.xml
index 9852d4ae0..47de3d52f 100755
--- a/content/api_en/textAscent.xml
+++ b/content/api_en/textAscent.xml
@@ -26,15 +26,8 @@ text("dp", 40, base); // Draw text on baseline
]]>
-
-
textAscent() and textDescent() values will give you the total height of the line.
+Returns ascent of the current font at its current size. This information is useful for determining the height of the font above the baseline.
]]>
diff --git a/content/api_en/textDescent.xml b/content/api_en/textDescent.xml
index 68b1afbd1..92f81b1a5 100755
--- a/content/api_en/textDescent.xml
+++ b/content/api_en/textDescent.xml
@@ -26,15 +26,8 @@ text("dp", 40, base); // Draw text on baseline
]]>
-
-
-
-
+
![]() |
+ |||
![]() |
- Getting Started with Processing
Books. Processing books cove |
||
|
|
||
![]() |
+
+ |||
![]() |
- Processing: A Programming Handbook |
||
|
|
||
|
- Visualizing Data - Ben Fry. - Published December 2007, O'Reilly. 384 pages. Paperback. - » Order from Amazon.com | ![]() |
+ Learning Processing, Second Edition: A Beginner's Guide to Programming Images, Animation, and Interaction + Daniel Shiffman. + Published August 2015, Morgan Kaufmann. 564 pages. Paperback. + » Order from Amazon.com + The second edition of Learning Processing has been updated for compatibility with Processing 3 and includes several new chapters of content including video, sound, data visualization, and networking. For more, visit the Learning Processing website. - The O'Reilly website says, "How you can take advantage of data that you might otherwise never use? With the help of a powerful new programming environment [Processing], this book helps you represent data accurately on the Web and elsewhere, complete with user interaction, animation, and more. You'll learn basic visualization principles, how to choose the right kind of display for your purposes, and how to provide interactive features to design entire interfaces around large, complex data sets." + Dan Shiffman says, "This book tells a story. It's a story of liberation, of taking the first steps towards understanding the foundations of computing, writing your own code, and creating your own media without the bonds of existing software tools. This story is not reserved for computer scientists and engineers. This story is for you." - Martin Wattenberg from the IBM Watson Research Center says, "This wonderfully detailed guide, by one of the masters of modern data graphics, tells you everything you need to know to code your own visualizations from scratch. Perhaps most valuable are the many examples where Fry demonstrates how to refine a bare-bones concept into a beautiful, effective finished piece. Read this book, and you'll never again be dependent on someone else's view of your data." - |
+ |
|
+ |
+ ||
![]() |
+ Coding Art: The Four Steps to Creative Programming with the Processing Language + Yu Zhang, Mathias Funk. + Published January 2021, Apress. 280 pages. Paperback. + » Order from Apress + » Order from Amazon + + + The authors write, "Finally, a book on creative programming, written directly for artists and designers! Rather than following a computer science curriculum, this book is aimed at creatives who are working in the intersection of design, art, and education. In this book you'll learn to apply computation into the creative process by following a four-step process, and through this, land in the cross section of coding and art, with a focus on practical examples and relevant work structures. You'll follow a real-world use case of computation art and see how it relates back to the four key pillars, and addresses potential pitfalls and challenges in the creative process. All code examples are presented in a fully integrated Processing example library, making it easy for readers to get started." + |
+ ||
|
|
||
![]() |
+ Pro Processing for Images and Computer Vision with OpenCV + Bryan WC Chung. + Published 2017, APress. Paperback, eBook. + » Order from APress + + The Publisher writes, "Pro Processing for Images and Computer Vision with OpenCV is a step-by-step training tool that guides you through a series of worked examples in linear order. Each chapter begins with a basic demonstration, including the code to recreate it on your own system. Then comes a creative challenge by which to engage and develop mastery of the chapter’s topic. The book also includes hints and tips relating to visual arts, interaction design, and industrial best practices. This book is intended for any developer of artistic and otherwise visual applications, such as in augmented reality and digital effects, with a need to manipulate images, and to recognize and manipulate objects within those images. The book is specifically targeted at those making use of the Processing language that is common in artistic fields, and to Java programmers because of Processing’s easy integration into the Java programming environment." + |
+ ||
|
+ |
+ ||
![]() |
+ Programming 101: The How and Why of Programming Revealed Using the Processing Programming Language + Jeanine Meyer. + Published 2018, APress. Paperback, eBook. + » Order from Apress + + The Publisher writes, "Understand the importance of programming, even if you’ve never programmed before! This book will teach you the basics of programming using the Processing programming language. You will create your own Processing sketches, using personal images, themes, or hobbies that you enjoy. The chapters in the book will demonstrate the process of programming, starting with formulating an idea, planning, building on past projects, and refining the work, similar to writing an essay or composing a song. This approach will guide you to make use of logic and mathematics to produce beautiful effects. The term for program in Processing is sketch, though the sketches featured in this book are far more than static drawings; they incorporate interaction, animation, video, audio, and accessing files on the local computer and on the Web. Technical features are introduced and explained in the context of complete examples: games (Snake, Hangman, jigsaw, slingshot), making a collage of family images and video clips, preparing directions for folding an origami model, rotating objects in 3D, and others." + |
+ ||
|
+ |
+ ||
![]() |
- Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction - Daniel Shiffman. - Published August 2008, Morgan Kaufmann. 450 pages. Paperback. - » Order from Amazon.com - Visit the Learning Processing website. - - Dan Shiffman says, "This book tells a story. It's a story of liberation, of taking the first steps towards understanding the foundations of computing, writing your own code, and creating your own media without the bonds of existing software tools. This story is not reserved for computer scientists and engineers. This story is for you." + |
+ Visualizing Data + Ben Fry. + Published December 2007, O'Reilly. 384 pages. Paperback. + » Order from Amazon.com + The O'Reilly website says, "How you can take advantage of data that you might otherwise never use? With the help of a powerful new programming environment [Processing], this book helps you represent data accurately on the Web and elsewhere, complete with user interaction, animation, and more. You'll learn basic visualization principles, how to choose the right kind of display for your purposes, and how to provide interactive features to design entire interfaces around large, complex data sets." - The publisher says, "This book teaches you the basic building blocks of programming needed to create cutting-edge graphics applications including interactive art, live video processing, and data visualization. A unique lab-style manual, the book gives graphic and web designers, artists, and illustrators of all stripes a jumpstart on working with the Processing programming environment by providing instruction on the basic principles of the language, followed by careful explanations of select advanced techniques." - |
+ Martin Wattenberg from the IBM Watson Research Center says, "This wonderfully detailed guide, by one of the masters of modern data graphics, tells you everything you need to know to code your own visualizations from scratch. Perhaps most valuable are the many examples where Fry demonstrates how to refine a bare-bones concept into a beautiful, effective finished piece. Read this book, and you'll never again be dependent on someone else's view of your data."|
|
|
@@ -164,14 +204,14 @@ Generative Design Hartmut Bohnacker, Benedikt Gross, Julia Laub, and Claudius Lazzeroni. August 2012, Princeton Architectural Press. 472 pages. - Originally published in German November 2009, Schmidt Hermann Verlag. 500 pages. + Originally published in German November 2009, Schmidt Hermann Verlag. 500 pages. » Order from Amazon.com This book is extraordinary; the design is clear and the production quality is fantastic. This is the design book about Processing that we've hoped for. Unlike most other Processing books, it doesn't discuss programming basics so it's free to start with exciting examples. The publisher promotes, "Generative design is a revolutionary new method of creating artwork, models, and animations from sets of rules, or algorithms. By using accessible programming languages such as Processing, artists and designers are producing extravagant, crystalline structures that can form the basis of anything from patterned textiles and typography to lighting, scientific diagrams, sculptures, films, and even fantastical buildings. Opening with a gallery of thirty-five illustrated case studies, Generative Design takes users through specific, practical instructions on how to create their own visual experiments by combining simple-to-use programming codes with basic design principles. A detailed handbook of advanced strategies provides visual artists with all the tools to achieve proficiency. Both a how-to manual and a showcase for recent work in this exciting new field, Generative Design is the definitive study and reference book that designers have been waiting for." More information about buying this book in German, as well as the complete source code for the examples, are at the book's website. - |
+
|
|
|||
![]() |
+ The SparkFun Guide to Processing + Derek Runberg. + 2015, No Starch Press. 232 pages. Paperback. + » Order from Amazon.com + The publisher writes, "The SparkFun Guide to Processing teaches you to craft your own digital artwork and even combine it with hardware—no prior programming experience required. Over the course of the book, you’ll learn the basics by drawing simple shapes, move on to photo editing and video manipulation, and ultimately affect the physical world by using Processing with an Arduino." + + The publisher lists: +
|
+ ||
|
+ |
+ ||
![]() |
+ Processing: An Introduction to Programming + Jeffrey L. Nyhoff, Larry R. Nyhoff. + Published May 2017, CRC Press. 544 pages. eBook, Paperback. + » Order from CRC Press + + » Order from Amazon.com + + The publisher writes, "The book uses Processing’s capabilities for graphics and interactivity in order to create examples that are simple, illustrative, interesting, and fun. It is designed to appeal to a broad range of readers, including those who want to learn to program to create digital art, as well as those who seek to learn to program to process numerical information or data. It can be used by students and instructors in a first course on programming, as well as by anyone eager to teach them self to program." + + The publisher lists: +
|
+ ||
|
+ |
+ ||
![]() |
@@ -217,13 +311,11 @@ |||
|
|
||
![]() |
Processing: Creative Coding and Computational Art (Foundation) @@ -235,11 +327,10 @@ Books. Processing books cove
|
||
|
|
||
+ | ![]() |
- Programming Interactivity + | Programming Interactivity Joshua Noble. Published January 2012, O'Reilly. 728 pages. Paperback. » Order from Amazon.com - The O'Reilly website says, "Make cool stuff. If you're a designer or artist without a lot of programming experience, this book will teach you to work with 2D and 3D graphics, sound, physical interaction, and electronic circuitry to create all sorts of interesting and compelling experiences -- online and off. Programming Interactivity explains programming and electrical engineering basics, and introduces three freely available tools created specifically for artists and designers: Processing, Arduino, and OpenFrameworks." |
-
|
|
||
![]() |
- Generative Art + | ||
+
+ |
+
+ Generative Art Matt Pearson. Published March 2011, Manning Publications. 300 pages. Paperback. » Order from Amazon.com Books. Processing books cove |
- ||
![]() |
- Algorithms for Visual Design Using the Processing Language - Kostas Terzidis. - Published May 2009, Wiley. 384 Pages. Hardcover. - » Order from Amazon.com - The Wiley website says, "this book offers a series of generic procedures that can function as building blocks and encourages you to then use those building blocks to experiment, explore, and channel your thoughts, ideas, and principles into potential solutions. The book covers such topics as structured shapes, solid geometry, networking and databases, physical computing, image processing, graphic user interfaces, and more." |
+ ||
+
+ |
+
+ Algorithms for Visual Design Using the Processing Language + Kostas Terzidis. + Published May 2009, Wiley. 384 Pages. Hardcover. + » Order from Amazon.com + The Wiley website says, "this book offers a series of generic procedures that can function as building blocks and encourages you to then use those building blocks to experiment, explore, and channel your thoughts, ideas, and principles into potential solutions. The book covers such topics as structured shapes, solid geometry, networking and databases, physical computing, image processing, graphic user interfaces, and more." + |
||
|
|
||
+
+ |
+
+ Data-driven Graphic Design: Creative Coding for Visual Communication + Andrew Richardson. + Published January 2016, Bloomsbury. 224 Pages. Paperback. + » Order from Amazon.com + + The book description reads, "Data-driven Graphic Design introduces the creative potential of computational data and how it can be used to inform and create everything from typography, print and moving graphics to interactive design and physical installations. Using code as a creative environment allows designers to step outside the boundaries of commercial software tools, and create a set of unique, digitally informed pieces of work. The use of code offers a new way of thinking about and creating design for the digital environment." + |
+ ||
|
|
||
|
|
|
+ |
![]() |
+
+
+ Creating Procedural Artworks with Processing |
+ ||
|
+ |
+ ||
![]() |
+ O Código Transcendente: Uma Introdução Prática à Programação e Arte Gerativa + Mateus Berruezo. + Published December 2019. 270 pages. PDF, Web. + Text in Portuguese. + » Download + » Read online + + + Este livro é um guia de programação com enfoque prático considerando o contexto da arte gerativa e do pensamento computacional. Ele conta com explicações e exemplos visuais cuidadosamente projetados para serem de valor tanto para programadores quanto artistas. As aplicações e estudos de caso foram direcionados para a linguagem Processing cuja própria filosofia segue o princípio da exploração do artístico através do código. + |
+ ||
|
+ |
+ ||
![]() |
Einführung ins Programmieren mit Processing - Matthias Wolf. - Published August 2013. 178 pages. PDF, Paperback. - » Order Print/EBook from lulu.com - - Die eigenständige Programmiersprache Processing basiert auf Java und ähnelt diesem sehr, verbirgt aber gleichzeitig viel von dessen Komplexität. Dadurch ist Processing für den Programmieranfänger ideal geeignet, um sich Konzepte des Programmierens zu erschließen und bewahrt gleichzeitig die Möglichkeit eines späteren Umstiegs. Dennoch ist die Sprache keineswegs nur für triviale Anfängeraufgaben geeignet: speziell im Bereich der graphischen Datenverarbeitung spielt Processing seine Stärken aus. -Dieses Buch richtet sich in erster Linie an den Einsteiger, den es an die Bewältigung auch komplexerer Aufgaben heranführt, wobei grundlegende Konzepte der imperativen und der objektorientierten Programmierung vorgestellt werden. Auch notwendige theoretische Hintergründe kommen dabei nicht zu kurz. Ausführlich kommentierter Beispielcode erschließt Konzepte und Sprache. Aber auch der routinierte Programmierer, der sich "nur" eine neue Sprache erschließen will, wird fündig! -Aus dem Inhalt: Datentypen — Variablen — Arrays (ein- und mehrdiomensional) — Flusssteuerung — Methoden — Objektorientiertes Programmieren — 2D-Graphik — 3D-Graphik — Dateizugriff — PDF — QuickTimeTM — Arduino®-Mikrocontroller — Alphabetischer Index
+ Matthias Wolf. Die eigenständige Programmiersprache Processing basiert auf Java und ähnelt diesem sehr, verbirgt aber gleichzeitig viel von dessen Komplexität. Dadurch ist Processing für den Programmieranfänger ideal geeignet, um sich Konzepte des Programmierens zu erschließen und bewahrt gleichzeitig die Möglichkeit eines späteren Umstiegs. Dennoch ist die Sprache keineswegs nur für triviale Anfängeraufgaben geeignet: speziell im Bereich der graphischen Datenverarbeitung spielt Processing seine Stärken aus. +Dieses Buch richtet sich in erster Linie an den Einsteiger, den es an die Bewältigung auch komplexerer Aufgaben heranführt, wobei grundlegende Konzepte der imperativen und der objektorientierten Programmierung vorgestellt werden. Auch notwendige theoretische Hintergründe kommen dabei nicht zu kurz. Ausführlich kommentierter Beispielcode erschließt Konzepte und Sprache. Aber auch der routinierte Programmierer, der sich "nur" eine neue Sprache erschließen will, wird fündig! +Aus dem Inhalt: Datentypen — Variablen — Arrays (ein- und mehrdiomensional) — Flusssteuerung — Methoden — Objektorientiertes Programmieren — 2D-Graphik — 3D-Graphik — Dateizugriff — PDF — QuickTimeTM — Arduino®-Mikrocontroller — Alphabetischer Index |
||
![]() |
+
+ Il Codice dei Cibernetici: Introduzione alla Computer Art con Processing + Antonio Rollo + Published December 2015, Oistros Edizioni. 320 pages. Softcover. + Text in Italian. + + During the 50‘s ”era of cybernetics“, computer entered into the history of art simultaneously in different parts of the world. Art and science were in great turmoil. Science, with its theories and experiments, was approaching artificially mimicking both natural phenomena, such as light and sound, and the human phenomena of language and communication. Art, with its aesthetic and exhibitions, had transcended the boundaries of the avant-garde. Now, with the computer, it was confronting a reality that challenged ”the where“ and ”the how“ of doing art and the very meaning of ”masterpiece“. Antonio Rollo takes us on a tour of these seminal works from his unique perspective of the artist, through the code! + + + There's additional information on the publisher's website. + |
+ ||
|
+ |
+ ||
![]() |
Built with Processing Published March 2007, BNN. 232 pages. Softcover. - Text in Japanese + Text in Japanese. Note from Casey: "I received a copy of this book from the authors on a recent trip to Japan. It's a beautifully produced full-color book with sections introducing Processing, featuring work created with Processing (many are from the Exhibition section of the Processing website), and introducing programming through progressively complicated examples. The majority of the book is an introduction to programming. There are many good examples and the code is color-coded like in the Processing Environment. This book is less comprehensive than the Greenberg and Reas/Fry books, but it appears to be a good, brief introduction." - There's additional information on the publisher's website. |
+ There's additional information on the publisher's website.
+
||
|
|
||
|
-
- Processing is also discussed through examples and projects in the following books:
-
- - - - - 10 PRINT CHR$(205.5+RND(1)); : GOTO 10 - - - - Getting Started with Arduino By Massimo Banzi. Examples use Processing to communicate with an Arduino board. - - - - Building Wireless Sensor Networks: with ZigBee, XBee, Arduino, and Processing By Robert Faludi. Network examples use Processing. - - - - Physical Computing: Sensing and Controlling the Physical World with Computers - By Dan O'Sullivan and Tom Igoe. Examples using Processing for RS-232 communication and - computer vision. - + |
+
+ |
+
+ Programming for Artists + Pavel A. Orlov. + Published 2015. 248 Pages. PDF. + Text in Russian. + » Download the book - - Aesthetic Computing. - Edited by Paul Fishwick. Casey Reas and Ben Fry contributed a chapter entitled - "Processing Code: Programming within the Context of Visual Art and Design." - + The author's website reads, "Летом 2015 года мне удалось подготовить к выходу в свет новую книгу, посвященную программированию для художников и дизайнеров. Книга рассматривает среду Processing как одну из самых простых и доступных в освоении. Я акцентировал внимание на том, что каждый человек, знакомый с азами математики, может научиться использовать программирование для своих творческих задач. Конечно, я говорю про активных дизайнеров, которые не боятся использовать и изучать новые для себя инструменты. - - Hacking Roomba: ExtremeTech By Tod E. Kurt. Processing is introduced and used to design an application to control a Roomba (a robot vacuum cleaner). - + Часто я слышу вопросы: “Зачем художнику нужно программировать? Почему нельзя просто взять и нарисовать от руки? А что, фотошоп отменили? Неужели у художников есть математическая логика?” Мне эти вопросы кажутся замечательными и напоминают художника в момент появления фотографии, когда художники спорили с фотографами примерно теми же словами, разве что слова фотошоп еще не было. И сейчас у нас развивается искусство фотографии бурным потоком. Более развернутый ответ вы можете найти во вступительной статье. - Analog In, Digital Out By Brendan Dawes. Numerous projects created with Processing are illustrated and discussed. |
-
Earlier releases have been removed because we can only support the current versions of the software. To update old code, read the changes page. Changes for each release can be found in revisions.txt. If you have problems with the current release, please file a bug so that we can fix it. Older releases can also be built from the source. Read More about the releases and their numbering. To use Android Mode, Processing 3 or later is required.
+The changes document covers incremental updates between 4.x releases, and is especially important to read for pre-releases.
+-
|
-
-
-
-
-
- Processing is open source, free software. All donations fund the Processing Foundation, a nonprofit organization devoted to advancing the role of programming within the visual arts through developing Processing. - - - - - - - - - |
-
- -
|
-
- - The Processing Foundation maintains a fellowship program that supports the development and expansion of Processing and its affiliated projects. To date, we have hosted three fellows: - - - -- Wilm Thoben developed a new core Sound library from fall 2013 through winter 2014. This library is now released with Processing 3.0. Wilm Thoben is a sound artist and researcher. He is currently working on his dissertation about the 1960s art and technology group E.A.T. His work deals with perception and definition of space or the abstraction of everyday life. -http://wilmthoben.com/ - - - -- Lauren McCarthy started the work that has now become p5.js in spring, summer, and fall 2013. p5.js is a JavaScript interpretation of Processing. Lauren McCarthy is an artist and programmer based in Brooklyn, NY. She is adjunct faculty at RISD and NYU ITP, a researcher in residence at ITP, and recently a resident at Eyebeam. She holds an MFA from UCLA and a BS Computer Science and BS Art and Design from MIT. Her work explores the structures and systems of social interactions, identity, and self-representation, and the potential for technology to mediate, manipulate, and evolve these interactions. She is fascinated by the slightly uncomfortable moments when patterns are shifted, expectations are broken, and participants become aware of the system. -http://lauren-mccarthy.com/ - - - - -- Greg Borenstein expanding and released the OpenCV library in spring and summer 2013. Greg Borenstein is an artist, technologist, and teacher. He creates illusions for humans and machines. His work explores computer vision, machine learning, game design, visual effects, and drawing as media for storytelling and design. Greg is a graduate of the NYU Interactive Telecommunications Program and has worked for firms such as Makerbot and Berg London. He is the author of a book for O'Reilly about the Microsoft Kinect, titled: Making Things See: 3D vision with Kinect, Processing, Arduino, and MakerBot. He's currently a researcher in the Playful Systems Group at the MIT Media Lab. -http://gregborenstein.com/ - - - - - |
-
-
|
-
- - Since its inception in 2001, Processing has sought to bridge the traditionally divided cultures of the arts and the sciences. The mission of the Processing Foundation is to link these two cultures so they can be used within a diverse constituency, by way of developing the Processing software. For those with a tendency to think in numbers, Processing introduces a language of the visual arts through a more familiar computer science vocabulary. Likewise, the software is structured through an image-based framework, making it accessible to visual thinkers. Core computer science concepts like variables, functions, and conditionals are taught side by side with visual basics like image, shape, and color. - - -- The key to our philosophy is the merging between the two: we see software as a medium, or something that connects two things. We view it as a means for making, and see our role as providing a new medium to artists and users across a variety of fields. At a time when our society requires a literacy and sensitivity to media of all kinds, we see ourselves making this possible for a broad spectrum of constituencies. - - - -- Processing serves a wide range of communities in different contexts, from the university classroom to the tinkerer’s garage, used by everyone from the professional to the hobbyist. Within education at a university level, we have seen Processing leveraged as a classroom tool across disciplines as varied as computer science, English, art, architecture, design, and the digital humanities. In the last few years, it has begun to become a presence in high school and middle school classrooms, being particularly effective when used to teach science, math, and more generally, computer science. For example, the Kahn Academy now uses Processing’s tutorials and language in their beginning computer science instruction. In areas of professional development, Processing has become enfolded into the practices of interface and communication designers, artists and media artists, photographers, architects, and filmmakers. It also has a substantial role in the communities of makers and amateurs, and among hackerspaces and gatherings of hobbyists. - - - -- The growing use of Processing in the classroom over the last twelve years has pointed toward a direction to rethink the way students are taught to program. Instead of learning a specific vocational skill (such as any one certain programming language or software), the teaching of Processing follows from a philosophy that advocates for a more generalized and strategic way of thinking. Because technology changes at such a rapid pace, the goal of any education in software has to teach the fundamentals of programming. With knowledge of such a foundation, a student is able to learn any other piece of software. Processing was specifically designed to relate to other languages, so a working knowledge of it means that a student can become well-versed in others that are more domain-specific, in relatively little time. Also, it uses a visual framework, so as to be more accessible to people who don’t naturally think like mathematicians or computer scientists. This has opened the door for software to become part of an artist’s toolkit in a way never before seen. - - -- The use of Processing within the visual arts and design fields has grown continuously since the software was first released. Appearing at a critical moment when artists began introducing new media and technology into their practices, Processing has allowed for thousands of creative professionals to leverage it as a medium, changing the landscape of the arts at the beginning of the 21st century. Software is still a nascent medium for artists and designers, and part of The Processing Foundation’s mission is to nurture this trajectory to be both widely used and accepted. - - -- Within technology, Processing has made it possible to understand massive data sets in a visual and more accessible way. It has also helped foster the connection between engineering and visual design that has been pushed to the fore by Apple and others. - - - |
-
-
|
-
- - The Processing Foundation was founded in 2012 with the two-fold mission to promote software literacy within the visual arts, and visual literacy within technology-related fields. Our primary goal is to empower people of all interests and backgrounds to learn how to program, so as to facilitate a sophisticated way of thinking about and creating media at a time when such knowledge is crucial. We do this by developing and distributing a group of related software projects, which includes Processing (Java), p5.js (Javascript), and Processing.py (Python). - - -- We serve a growing community of artists, designers, educators, programmers, engineers, and anyone in between who has an inclination toward both the arts and technology. Core to our belief is that learning how to program is a process of learning how to think, rather than acquiring a certain skillset, so that this knowledge may be applied to any number of fields, from creating artworks to imagining new technologies. We view Processing as a means to bridge seemingly disparate disciplines, providing platforms for collaboration between communities that might not otherwise have had access to each other. We also envision Processing as a new tool for both artists and technologists to use in their work, as a medium and as a context. We see ourselves situated at the place of convergence between the arts and technology, facilitating the pursuit and literacy of both. - - - -- The board of directors for the Processing Foundation is Ben Fry, Casey Reas, and Dan Shiffman. The first Foundation advisor is John Maeda. - - -- The Processing 2.0 release focuses on faster graphics, new infrastructure for working with data, and enhanced video playback and capture. It also expands the potential of the programming environment. The new Modes feature allows other programming systems, such as JavaScript and Android, to be easily used from within the development environment. The new Contributions Manager makes it simple to distribute and install extensions developed by the community. The P2D and P3D renderers are now built using modern OpenGL, and programs can now utilize custom GLSL shaders. - - -- The Processing Foundation supports a fellowship program to initiate and develop research projects for the Processing software. - - -- Processing is currently developed primarily in Boston (at Fathom Information Design), Los Angeles (at the UCLA Arts Software Studio), and New York City (at NYU’s ITP). - - -- We are generously supported by our patrons, and actively seek funding through our donate page. - - --Contact us at email@processingfoundation.org. - - - |
-
- -
|
-
- - Individuals making $5 to $100 donations are the largest source of income for the Processing Foundation. We're grateful to all who have donated and we're proud to be supported by the community. - - - -- In 2013, O'Reilly Media and Arduino made donations to the Processing Foundation. - - - -- The Google Summer of Code program has provided an excellent source of energy and new development through supporting students to work with us. This program has now supported Processing since 2010. It has provided the base for many important enhancements to the software. - - - -- Prior to incorporating as a Foundation, Processing received key funding and support from several organizations and companies. These commitments enabled a series of pivotal improvements to the software. - - - -- The Interactive Telecommunications Program (ITP) at New York University sponsored a Processing 2.0 development workshop in the summer of 2011. - - - -- The Armstrong Institute for Interactive Media Studies at Miami University funded The Oxford Project, a series of Processing development workshops during the 2008-2009 academic year. These four-day meetings in Oxford, Ohio, enabled the November 2008 launch of Processing 1.0 and stimulated future development. - - - -- Oblong Industries funded Ben Fry to develop Processing during the summer of 2008. This funding also assisted in the completion of the 1.0 release. The Rockefeller Foundation awarded Ben Fry with a Media Arts Fellowship in 2006. The grant marked the first time that Ben was able to work on Processing as a funded project. This support led to further developments of the OpenGL and PDF rendering engines, as well as significant enhancements to other libraries and their integration. - - - -- The Interaction Design Institute Ivrea funded four individuals' work on Processing in the summer of 2003. This resulted in Dan Mosedale's preprocessor using Antlr, Sami Arola's contributions to the graphics engine, and other contributions to the Processing Development Environment and 2D graphics engine. We are grateful to Interaction Ivrea director Gillian Crampton Smith for her encouragement and support. - - - - - |
-
- -
-
-Ben Fry (President)- -- Ben Fry is principal of Fathom, a design and software consultancy located in Boston. He received his doctoral degree from the Aesthetics + Computation Group at the MIT Media Laboratory, where his research focused on combining fields such as computer science, statistics, graphic design, and data visualization as a means for understanding information. After completing his thesis, he spent time developing tools for visualization of genetic data as a postdoc with Eric Lander at the Eli & Edythe L. Broad Institute of MIT & Harvard. During the 2006-2007 school year, Ben was the Nierenberg Chair of Design for the Carnegie Mellon School of Design. In 2011, he won the National Design Award for Interaction Design from the Cooper-Hewitt. With Casey Reas, Fry initiated Processing in 2001, an open source programming language and environment created for visual artists. - - - -Casey Reas (Secretary)- -- Casey Reas is an artist and educator based in Los Angeles. He has exhibited, screened, and performed his work internationally in galleries and museums around the world. Reas is a professor at the University of California, Los Angeles. He holds a masters degree from the Massachusetts Institute of Technology in Media Arts and Sciences as well as a bachelors degree from the School of Design, Architecture, Art, and Planning at the University of Cincinnati. With Ben Fry, Reas initiated Processing in 2001, an open source programming language and environment created for visual artists. - - - -Daniel Shiffman (Treasurer)- -- Daniel Shiffman works as an Associate Arts Professor at the Interactive Telecommunications Program at NYU's Tisch School of the Arts. Originally from Baltimore, Daniel received a BA in Mathematics and Philosophy from Yale University and a Master's Degree from the Interactive Telecommunications Program. He works on developing tutorials, examples, and libraries for Processing, the open source programming language and environment created by Casey Reas and Ben Fry. He is the author of Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction and The Nature of Code (self-published via Kickstarter), an open source book about simulating natural phenomenon in Processing. - - - -John Maeda (Advisor)- -- John Maeda is currently a Design Partner at Kleiner Perkins Caufield & Byers. He was the President of the Rhode Island School of Design from 2008 to 2013, is a recipient of the National Design Award, and is represented in the permanent collection of the Museum of Modern Art. Beginning in 1996, lasting for 13 years, he was a Professor at MIT, where he served as an Associate Director of Research at the MIT Media Lab and was responsible for managing research relationships with 70+ industrial organizations. He received a Ph.D. in Design Science from the University of Tsukuba Institute of Art and Design in Japan. In May 2003, he received an Honorary Doctorate of Fine Arts from the Maryland Institute of Contemporary Art. He received an MBA from Arizona State University in May 2006. - - - -- The Interactive Telecommunications Program (ITP) at New York University sponsored a Processing 2.0 development workshop in the summer of 2011. - - - -- The Armstrong Institute for Interactive Media Studies at Miami University funded The Oxford Project, a series of Processing development workshops during the 2008-2009 academic year. These four-day meetings in Oxford, Ohio, enabled the November 2008 launch of Processing 1.0 and stimulated future development. - - - -- Oblong Industries funded Ben Fry to develop Processing during the summer of 2008. This funding also assisted in the completion of the 1.0 release. The Rockefeller Foundation awarded Ben Fry with a Media Arts Fellowship in 2006. The grant marked the first time that Ben was able to work on Processing as a funded project. This support led to further developments of the OpenGL and PDF rendering engines, as well as significant enhancements to other libraries and their integration. - - - -- The Interaction Design Institute Ivrea funded four individuals' work on Processing in the summer of 2003. This resulted in Dan Mosedale's preprocessor using Antlr, Sami Arola's contributions to the graphics engine, and other contributions to the Processing Development Environment and 2D graphics engine. We are grateful to Interaction Ivrea director Gillian Crampton Smith for her encouragement and support. - - - - - |
-
-
-
-Processing:- -- Processing is a programming language, development environment, and online community. Founded in 2001, Processing was initially created to serve as a software sketchbook and to teach computer programming fundamentals within a visual context. Processing has since evolved into a development tool for professionals, an educational tool used in classrooms around the country, and a new context and medium for artists. Today, there are tens of thousands of students, artists, designers, researchers, and hobbyists who use Processing for learning, prototyping, and production. - - -- It was designed to be a user’s first programming language, inspired by earlier languages like BASIC and Logo, as well as our experiences as students and teaching visual arts foundation curricula. It is now used in classrooms worldwide, often in art schools and visual arts programs in universities, but also in high schools, computer science programs, and humanities curricula. - - - -- In addition to educational purposes, the Processing software is used by thousands of visual designers, artists, and architects to create their works. Projects created with Processing have been featured at the Museum of Modern Art in New York, the Victoria and Albert Museum in London, the Centre Georges Pompidou in Paris, and many other prominent venues. Processing is used to create projected stage designs for dance and music performances; to generate images for music videos and film; to export images for posters, magazines, and books; and to create interactive installations in galleries, in museums, and on the street. - - - -p5.js- -- p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web. Using the original metaphor of a software sketchbook, p5.js has a full set of drawing functionality for the entire browser page. For this, p5.js has addon libraries that streamline interaction with other HTML5 objects, including text, input, video, webcam, and sound. - - -- Having just been released, p5.js is in active development, with an official editing environment and other features coming soon. - - -Processing.py- -- - - - |
-
- -
-
- 2013 Report- -- We had a busy and productive 2013 with a wide range of activities: -
|
-
- -
-
-
- Overview- -- The goal of the Processing Foundation is to promote software literacy, particularly within the visual arts, and to promote visual literacy within technology. Our primary charge is to develop and distribute the Processing software, both the core Application Programming Interface (API) and the programming environment, the Processing Development Environment (PDE). The board of directors for the Processing Foundation consists of Ben Fry, Casey Reas, and Dan Shiffman. The first member of the board of advisors is John Maeda. - - -- To succeed, the Foundation needs to raise money to support future versions of the Processing software and related initiatives. The Processing team, a small group of volunteers, has released over 200 versions of the software since 2001, leading to the 2.0 release in the spring of 2013.With almost no funding between the 1.0 and 2.0 releases, the software was written slowly while the developers managed full-time work and many other responsibilities. The 2.0 software release happened in an unsustainable way, at tremendous personal expense to the lead developers. The Foundation must raise funding for the initiative to continue. - - -- With the 2.0 software release, we're now asking for donations from individuals who use the software, and we're actively seeking larger gifts from individuals, companies, and other non-profit organizations. To learn more about why you might want to contribute, please read the 2013 status report below. The Processing Foundation was publicly announced in June 2013 with the release of the Processing 2.0 software. Our official non-profit status was was granted by the IRS on 6 March 2014, with our tax exception status retroactive to our date of formation, 14 June 2012. - - - - - -2013 Report- -- We had a busy and productive 2013 with a wide range of activities: -
- Despite the new fundraising goals, Processing remains almost entirely a volunteer organization pushed forward by a small group of people. In starting our fundraising push, the initial goal was to hire one full-time developer to maintain and build the Processing code base, while the current Processing team continues to volunteer time to the project. We've received a constant stream of donations through the Download page interface, but at the end of nine months the amount is about 10% of what we need to hire a developer. We're currently utilizing the donations to support Processing Fellows, short-term appointments to explore future directions for Processing and to produce essential libraries. For instance, we supported Lauren McCarthy to explore new ideas for integrating Processing with JavaScript and we supported Greg Borenstein to development the new OpenCV library. - - - - -Patrons- -- Individuals making $5 to $100 donations are the largest source of income for the Processing Foundation. We're grateful to all who have donated and we're proud to be supported by the community. - - -- In 2013, O'Reilly Media and Arduino made donations to the Processing Foundation. - - -- The Google Summer of Code program has provided and excellent source of energy and new development through supporting students to work with us. This program has now supported Processing for three years, 2010 to 2013. It has provided the base for many important enhancements to the software. - - -- Prior to incorporating as a Foundation, Processing received key funding and support from several organizations and companies. These commitments enabled a series of pivotal improvements to the software. - - -- The Interactive Telecommunications Program (ITP) at New York University sponsored a Processing 2.0 development workshop in the summer of 2011. - - -- The Armstrong Institute for Interactive Media Studies at Miami University funded The Oxford Project, a series of Processing development workshops during the 2008-2009 academic year. These four-day meetings in Oxford, Ohio, enabled the November 2008 launch of Processing 1.0 and stimulated future development. - - -- Oblong Industries funded Ben Fry to develop Processing during the summer of 2008. This funding also assisted in the completion of the 1.0 release. The Rockefeller Foundation awarded Ben Fry with a Media Arts Fellowship in 2006. The grant marked the first time that Ben was able to work on Processing as a funded project. This support led to further developments of the OpenGL and PDF rendering engines, as well as significant enhancements to other libraries and their integration. - - -- The Interaction Design Institute Ivrea funded four individuals' work on Processing in the summer of 2003. This resulted in Dan Mosedale's preprocessor using Antlr, Sami Arola's contributions to the graphics engine, and other contributions to the Processing Development Environment and 2D graphics engine. We are grateful to Interaction Ivrea director Gillian Crampton Smith for her encouragement and support. - - - |
-
-
![]() |
-
-
- Since it first emerged in 2001, Processing has grown into a flourishing community of thousands of artists, designers, makers, and educators. It has redrawn the boundaries of art and technology, affecting communities in contexts as various as the classroom to the art museum to the hackerspace. After 12 years of development and being intensively taught in classrooms, the second edition of the Processing textbook will be released in December 2014.
- + Since it first emerged in 2001, Processing has grown into a flourishing community of thousands of artists, designers, makers, and educators. It has redrawn the boundaries of art and technology, affecting communities in contexts as various as the classroom to the art museum to the hackerspace. After 12 years of development and being intensively taught in classrooms, the second edition of the Processing textbook was released in December 2014. + + ++ By teaching computer programming with the context of the visual arts, this book has introduced a new literacy with software, enabling designers and artists to create new media for the present, and to imagine future media that are beyond the capacities of current software tools. It offers a thorough introduction to Processing, an open-source programming language that is used by students, artists, designers, architects, researchers, and anyone who wants to program images, animation, and interactivity. Written by Processing’s cofounders, the book offers a definitive reference for students and professionals. Tutorial chapters make up the bulk of the book; advanced professional projects from such domains as animation, performance, and installation are discussed in interviews with their creators. + + ++ This second edition has been thoroughly updated, influenced by the seven years of Processing being taught in classrooms, computer labs, universities, art and design schools, and arts institutions since the first edition. Every chapter has been revised, and new chapters introduce more ways to work with data and geometry. New “synthesis” chapters offer discussion and worked examples of such topics as sketching with code, modularity, and algorithms. Interviews have been added that cover a wider range of projects. “Extension” chapters are now offered online so they can be updated to keep pace with technological developments in such fields as computer vision and electronics. + + ++ Interviews with SUE.C, Larry Cuba, Mark Hansen, Lynn Hershman Leeson, Jürg Lehni, LettError, Golan Levin and Zachary Lieberman, Benjamin Maus, Manfred Mohr, Ash Nehru, Josh On, Bob Sabiston, Jennifer Steinkamp, Jared Tarbell, Steph Thirion, and Robert Winter. + + +- - |
-
-By teaching computer programming with the context of the visual arts, this book has introduced a new literacy with software, enabling designers and artists to create new media for the present, and to imagine future media that are beyond the capacities of current software tools. It offers a thorough introduction to Processing (www.processing.org), an open-source programming language that is used by students, artists, designers, architects, researchers, and anyone who wants to program images, animation, and interactivity. Written by Processing’s cofounders, the book offers a definitive reference for students and professionals. Tutorial chapters make up the bulk of the book; advanced professional projects from such domains as animation, performance, and installation are discussed in interviews with their creators.
+The Extension chapters from the fist edition have been updated and are now available as Tutorials on the Processing website.
-This second edition has been thoroughly updated, influenced by the seven years of Processing being taught in classrooms, computer labs, universities, art and design schools, and arts institutions since the first edition. Every chapter has been revised, and new chapters introduce more ways to work with data and geometry. New “synthesis” chapters offer discussion and worked examples of such topics as sketching with code, modularity, and algorithms. Interviews have been added that cover a wider range of projects. “Extension” chapters are now offered online so they can be updated to keep pace with technological developments in such fields as computer vision and electronics.
+Extension 1: Vision by Golan Levin
+
+A concise introduction to how computer vision is used within the visual arts followed by examples that use the Video and the OpenCV for Processing libraries.
- This short text provides a brief history of the digital printing technologies that have led to these new techniques. It presents examples of software written to produce print output, and discusses a few common contemporary print technologies. The industry surrounding digital printing is full of trademarked names and buzzwords, so this text aspires to demystify some of the terminology and provide pointers to additional information. The content that follows is tailored for printing at home or working with a vendor to produce small editions.
-
+Extension 2: Network by Alexander Galloway
+
+Explains the fundamental ideas and technologies behind the internet followed by examples that use the Processing Net library.
-Interviews with SUE.C, Larry Cuba, Mark Hansen, Lynn Hershman Leeson, Jürg Lehni, LettError, Golan Levin and Zachary Lieberman, Benjamin Maus, Manfred Mohr, Ash Nehru, Josh On, Bob Sabiston, Jennifer Steinkamp, Jared Tarbell, Steph Thirion, and Robert Winter.
+Extension 3: Sound by R. Luke Dubois and Wilm Thoben
- » Order from MIT Press
-
|
- - - "A whole generation of designers, artists, students, and professors have been influenced by Processing. Now, a handbook is published that goes far beyond explaining how to handle the technology and boldly reveals the potential future for the electronic sketchbook."
- |
-
-"Processing, the handbook and tutorial, is an indispensable companion to Processing, the integrated programming language and environment that has developed from phenomenon to revolution. Bridging the gap between programming and visual arts, the Processing handbook, in a concise way, connects software elements to principles of visual form, motion, and interaction. The book"s modular structure allows for different combinations of its units and self-directed reading. Interviews with artists who create software-based works and extension chapters that expand software practice into computer vision, sound, and electronics successfully connect the realms of art and technology. Now used by artists, visual designers, and in educational institutions around the world, Processing has been groundbreaking not only as an alternative language for expanding programming space, but as an attempt to nurture programming literacy in the broader context of art and cultural production."
- -Christiane Paul, Adjunct Curator of New Media Arts, Whitney Museum of American Art - |
-
|
-"Processing is a milestone not only in the history of computer software, of information design, and of the visual arts, but also in social history. Many have commented on the pragmatic impact of the open source movement, but it is time to also consider Processing"s sociological and psychological consequences. Processing invites people to tinker, and tinkering is the first step for any scientific and artistic creation. After the tinkering, it leads designers to their idea of perfection. It enables complexity, yet it is approachable; it is rigorous, yet malleable. Its home page exudes the enthusiasm of so many designers and artists from all over the world, overflowing with ideas and proud to be able to share. Processing is a great gift to the world."
- +Extension 4: Print by Casey Reas -Paola Antonelli, Curator, Architecture and Design, MOMA - |
-
-"This is an elegant and practical introduction to programming for artists and designers. It is rigorously grounded, informed by a vast amount of practical experience, and visually compelling. The worked examples are terrific. There's no better starting point for visual artists who want to learn how to think computationally, or for programmers who want to give visual and spatial expression to their ideas."
- +Output print-resolution images and documents. -William J. Mitchell, Program in Media Arts and Sciences, MIT - |
-- |
|
-"With Processing, Casey Reas and Ben Fry have opened up the world of programming to artists and designers in a manner that inspires playfulness and creativity with code." +Extension 5: Electronics by Hernando Berragán and Casey Reas -Red Burns, Chair and Arts Professor, Interactive Telecommunications Program, Tisch School of the Arts, New York University - |
+A general introduction to the basics of electronics followed by examples to connect Wiring and Arduino boards to Processing.
-
-The Extension chapters from the fist edition have been updated and are now available as Tutorials on the Processing website.
+"This long-awaited book is more than just a software guide; it is a tool for unlocking a powerful new way of thinking, making, and acting. Not since the Bauhaus have visual artists revisited technology in such a world-changing way. Ben Fry and Casey Reas have helped a growing community of visual producers open up fresh veins of expression. Their work proves that code is open to designers, architects, musicians, and animators, not just to engineers. Providing a powerful alternative to proprietary software, Processing is part of a new social phenomenon in the arts that speaks to self-education and networked engagement."
+ —Ellen Lupton, Director of the graphic design MFA program at Maryland Institute College of Art, Baltimore, and
+ author of D.I.Y: Design It Yourself
-Extension 1: Vision by Golan Levin
-A concise introduction to how computer vision is used within the visual arts followed by examples that use the Video and the OpenCV for Processing libraries.
-
+
"A whole generation of designers, artists, students, and professors have been influenced by Processing. Now, a handbook is published that goes far beyond explaining how to handle the technology and boldly reveals the potential future for the electronic sketchbook."
+
+ —Joachim Sauter, University of the Arts, Berlin, Founder, Art+Com
-Extension 2: Network by Alexander Galloway
-Explains the fundamental ideas and technologies behind the internet followed by basic examples that use the Processing Net library.
-
-
-Extension 3: Sound by R. Luke Dubois and Wilm Thoben
+"Processing, the handbook and tutorial, is an indispensable companion to Processing, the integrated programming language and environment that has developed from phenomenon to revolution. Bridging the gap between programming and visual arts, the Processing handbook, in a concise way, connects software elements to principles of visual form, motion, and interaction. The book"s modular structure allows for different combinations of its units and self-directed reading. Interviews with artists who create software-based works and extension chapters that expand software practice into computer vision, sound, and electronics successfully connect the realms of art and technology. Now used by artists, visual designers, and in educational institutions around the world, Processing has been groundbreaking not only as an alternative language for expanding programming space, but as an attempt to nurture programming literacy in the broader context of art and cultural production."
-The basics of digital sound
+ —Christiane Paul, Adjunct Curator of New Media Arts, Whitney Museum of American Art
+
+
+
+
+"This is an elegant and practical introduction to programming for artists and designers. It is rigorously grounded, informed by a vast amount of practical experience, and visually compelling. The worked examples are terrific. There's no better starting point for visual artists who want to learn how to think computationally, or for programmers who want to give visual and spatial expression to their ideas."
+
+ —William J. Mitchell, Program in Media Arts and Sciences, MIT
-Extension 4: Print by Casey Reas
+"With Processing, Casey Reas and Ben Fry have opened up the world of programming to artists and designers in a manner that inspires playfulness and creativity with code."
+
+ —Red Burns, Chair and Arts Professor, Interactive Telecommunications Program, Tisch School of the Arts, New
+ York University
-A general introduction to the basics of electronics followed by examples to connect Wiring and Arduino boards to Processing.
-
-Links:
-MIT Press
-
-
- We're thrilled to announce the launch of Processing 2.0—the latest incarnation of the programming language, development environment, and online community that has grown dramatically since its debut in 2001. This new release builds on the versions of Processing that have been downloaded almost two million times. We invite you to download Processing 2.0 from www.processing.org. The Processing software is free and open source, and runs on the Mac, Windows, and GNU/Linux platforms. + For the past sixteen years, Processing has promoted software literacy, particularly within the visual arts, and visual literacy within technology. Initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context, Processing has also evolved into a development tool for professionals. The Processing software is free and open source, and runs on the Mac, Windows, and GNU/Linux platforms.
- For the past twelve years, Processing has promoted software literacy, particularly within the visual arts, and visual literacy within technology. Initially created to serve as a software sketchbook and to teach programming fundamentals within a visual context, Processing has also evolved into a development tool for professionals. We stand by our mission statement: -
- -- Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers. -
- -- The Processing 2.0 release focuses on faster graphics, new infrastructure for working with data, and enhanced video playback and capture. It also expands the potential of the programming environment. The new Modes feature allows other programming systems, such as JavaScript and Android, to be easily used from within the development environment. The new Contributions Manager makes it simple to distribute and install extensions developed by the community. The P2D and P3D renderers are now built using modern OpenGL, and programs can now utilize custom GLSL shaders. -
- -- Processing continues to be an alternative to proprietary software tools with restrictive and expensive licenses, making it accessible to schools and individual students. Its open source status encourages the community participation and collaboration that is vital to Processing’s growth. Contributors share programs, contribute code, and build libraries, tools, and modes to extend the possibilities of the software. The Processing community has written more than a hundred libraries to facilitate computer vision, data visualization, music composition, networking, 3D file exporting, and programming electronics. Please read about our amazing team of volunteers and the list of community contributions at www.processing.org. -
- -- Processing is currently developed primarily in Boston (at Fathom Information Design), Los Angeles (at the UCLA Arts Software Studio), and New York City (at NYU’s ITP). + Processing continues to be an alternative to proprietary software tools with restrictive and expensive licenses, making it accessible to schools and individual students. Its open source status encourages the community participation and collaboration that is vital to Processing’s growth. Contributors share programs, contribute code, and build libraries, tools, and modes to extend the possibilities of the software. The Processing community has written more than a hundred libraries to facilitate computer vision, data visualization, music composition, networking, 3D file exporting, and programming electronics.
- The innovations in teaching through Processing have been adapted for the Khan Academy computer science tutorials, offered online for free. The tutorials begin with drawing, using most of the Processing functions for drawing. The Processing approach has also been applied to electronics through the Arduino and Wiring projects. Arduino uses a syntax inspired by that used with Processing, and continues to use a modified version of the Processing programming environment to make it easier for students to learn how to program robots and countless other electronics projects. + The innovations in teaching through Processing have been adapted for the Khan Academy computer science tutorials, offered online for free. The tutorials begin with drawing, using most of the Processing functions for drawing. The Processing approach has also been applied to electronics through the Arduino and Wiring projects. Arduino uses a syntax inspired by that used with Processing, and continues to use a modified version of the Processing programming environment to make it easier for students to learn how to program robots and countless other electronics projects.
-Software prototyping and data visualization are two of the most important areas for Processing developers. Research labs inside technology companies like Google and Intel have used Processing for prototyping new interfaces and services. Companies including General Electric, Nokia, and Yahoo! have used Processing to visualize their internal data. For example, the New York Times Company R&D Lab used Processing to visualize the way their news stories travel through social media. The NSF and NOAA supported research exploring phytoplankton and zooplankton diversity that was realized at the University of Washington as a dynamic ecology simulation. Researchers at the Texas Advanced Computer Center at UT Austin have used Processing to display large data visualizations across a grid of screens in the service of humanities research. +Software prototyping and data visualization are two of the most important areas for Processing developers. Research labs inside technology companies like Google and Intel have used Processing for prototyping new interfaces and services. Companies including General Electric, Nokia, and Yahoo! have used Processing to visualize their internal data. For example, the New York Times Company R&D Lab used Processing to visualize the way their news stories travel through social media. The NSF and NOAA supported research exploring phytoplankton and zooplankton diversity that was realized at the University of Washington as a dynamic ecology simulation. Researchers at the Texas Advanced Computer Center at UT Austin have used Processing to display large data visualizations across a grid of screens in the service of humanities research.
-With the launch of Processing 2.0, we are excited to take a new step forward and establish the Processing Foundation. Up to this point, Processing has been developed almost exclusively by volunteers. We realized that funding was essential to support Processing’s vast user base and maintain the high quality of the software. -
- --The primary charge of the Foundation is to develop and distribute the Processing software, both the core Application Programming Interface (API) and the programming environment, the Processing Development Environment (PDE). To meet this charge, we welcome donations from individuals and organizations to assist in developing the Processing software. The board of directors for the Processing Foundation consists of Ben Fry, Casey Reas, and Daniel Shiffman. The first two members of the board of advisors are John Maeda (President, RISD) and Red Burns (Founder, NYU ITP). We are in the final stages of applying for non-profit status as a 501(c)(3) organization. +The primary charge of the Foundation is to develop and distribute the Processing software. This includes the original Processing (Java), p5.js (Javascript), and Processing.py (Python). There is more information about the Foundation at https://processingfoundation.org/.
- Processing was started by Ben Fry and Casey Reas in the spring of 2001,while both were graduate students at the MIT Media Lab within John Maeda's Aesthetics and Computation research group. Development continued in their free time while Casey pursued his artistic and teaching career and Ben pursued a Ph.D. and founded Fathom Information Design. Many of the ideas in Processing go back to Muriel Cooper's Visual Language Workshop, and it grew directly out of Maeda's Design By Numbers project, developed at the Media Lab and released in 1999. The Wiring and Arduino projects, in turn, grew out of Processing while Casey was teaching at the Interaction Design Institute Ivrea in Italy. Processing also prompted John Resig (jQuery) to build Processing.js, a JavaScript version that then inspired more related work such as the Khan Academy curriculum in computer science. Versions of Processing that use Python, Ruby, ActionScript, and Scala are also in development. Processing and its sister projects have inspired over twenty educational books. + Processing was started by Ben Fry and Casey Reas in the spring of 2001, while both were graduate students at the MIT Media Lab within John Maeda's Aesthetics and Computation research group. Development continued in their free time while Casey pursued his art and teaching career and Ben pursued a Ph.D. and founded Fathom Information Design. Many of the ideas in Processing go back to Muriel Cooper's Visual Language Workshop, and it grew directly out of Maeda's Design By Numbers project, developed at the Media Lab and released in 1999. The Wiring and Arduino projects, in turn, grew out of Processing while Casey was teaching at the Interaction Design Institute Ivrea in Italy.
+For more information, please write to foundation@processing.org @@ -84,10 +66,6 @@
- Web hosting for Processing.org is provided by (mt) Media Temple. -
-YourKit supports Processing by donating its full-featured Java Profiler. YourKit, LLC is the creator of tools for profiling Java and .NET applications: YourKit Java Profiler, YourKit .NET Profiler.
diff --git a/content/static/people.html b/content/static/people.html index 179cf3abf..d406b648c 100755 --- a/content/static/people.html +++ b/content/static/people.html @@ -1,95 +1,81 @@-
|
- Lead Developers
- Senior Developers
Developers
- Fellows
- Google Summer of Code 2014 +
Libraries, Tools
- Processing.js
- Developer Alumni People. Processing is a comm Burak Arikan, Turkish -- - -We offer a special "Thank You!" to Sami Arola for writing the base of the original P3D - and Simon Greenwold for incorporting camera and lights. Tom Carden contributed great + and Simon Greenwold for incorporating camera and lights. Tom Carden contributed great energy by co-creating Processing Hacks and maintaining Processing Blogs. Andreas Schlegel did amazing work for over three years organizing the Contributed Libraries and building templates and documentation. diff --git a/content/static/shop/imgs/processing-handbook-second-edition-sm.jpg b/content/static/shop/imgs/processing-handbook-second-edition-sm.jpg new file mode 100644 index 000000000..9b9fdcd4e Binary files /dev/null and b/content/static/shop/imgs/processing-handbook-second-edition-sm.jpg differ diff --git a/content/static/shop/index.html b/content/static/shop/index.html index cf3b230c8..bcfd0ba95 100644 --- a/content/static/shop/index.html +++ b/content/static/shop/index.html @@ -60,15 +60,15 @@ If you're interested in buying a book about Processing,
If you're interested in buying a book about Processing,
|
-
+
|
- Processing: A Programming Handbook for Visual Designers and Artists + Processing: A Programming Handbook for Visual Designers and Artists, Second Edition Casey Reas and Ben Fry - » More info - » Order from Amazon.com + » Order from Amazon |
-
+
|
- Visualizing Data - Ben Fry - » More info - » Order from Amazon.com + Daniel Shiffman + » More info + » Order from Amazon.com |
-
+
|
- Processing for Visual Artists: How to Create Expressive Images and Interactive Art - Andrew S. Glassner - » More info - » Order from Amazon.com + Derek Runberg + » More info + » Order from Amazon.com |
-
+
|
- Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction - Daniel Shiffman - » More info - » Order from Amazon.com + Andrew S. Glassner + » More info + » Order from Amazon.com |
-
+
|
- The Essential Guide to Processing for Flash Developers - Ira Greenberg - » More info - » Order from Amazon.com + Ben Fry + » More info + » Order from Amazon.com |
-
- |
- - |
- Making Things Talk: Using Sensors, Networks, and Arduino to see, hear, and feel your world - Tom Igoe - » More info - » Order from Amazon.com |
-
+
+ |
+ + |
+ The Essential Guide to Processing for Flash Developers + Ira Greenberg + » More info + » Order from Amazon.com |
+
| - | -- | - - | -
+
+ |
+ + |
+ Making Things Talk: Using Sensors, Networks, and Arduino to see, hear, and feel your world + Tom Igoe + » More info + » Order from Amazon.com |
+
-
+
|
- Process Compendium 2004-2010 - Casey Reas - » More info - » Order from Amazon.com + Nick Montfort et al. + » Order from Amazon.com |
- Getting Started with Arduino + Make: Getting Started with Arduino Massimo Banzi - » Order from Amazon.com |
@@ -543,25 +560,11 @@ - | + -
-
|
+ + + |
-
|
+
+ + This tutorial is from the book Learning Processing by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please let us know. + + +Two-dimensional Arrays+Daniel Shiffman+ -An array keeps track of multiple pieces of information in linear order, a one-dimensional list. However, the data associated with certain systems (a digital image, a board game, etc.) lives in two dimensions. To visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional array. --A two-dimensional array is really nothing more than an array of arrays (a three-dimensional array is an array of arrays of arrays). Think of your dinner. You could have a one-dimensional list of everything you eat: - -(lettuce, tomatoes, salad dressing, steak, mashed potatoes, string beans, cake, ice cream, coffee) - -Or you could have a two-dimensional list of three courses, each containing three things you eat: - -(lettuce, tomatoes, salad dressing) and (steak, mashed potatoes, string beans) and (cake, ice cream, coffee) - -In the case of an array, our old-fashioned one-dimensional array looks like this: + + An array keeps track of multiple pieces of information in linear order, a one-dimensional list. However, the data associated with certain systems (a digital image, a board game, etc.) lives in two dimensions. To visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional array. A two-dimensional array is really nothing more than an array of arrays (a three-dimensional array is an array of arrays of arrays). Think of your dinner. You could have a one-dimensional list of everything you eat: + + ++ (lettuce, tomatoes, steak, mashed potatoes, cake, ice cream)+ + + +Or you could have a two-dimensional list of three courses, each containing two things you eat: + + ++ (lettuce, tomatoes) and (steak, mashed potatoes) and (cake, ice cream)+ + +
+ In the case of an array, our old-fashioned one-dimensional array looks like this:
-int[] myArray = {0,1,2,3};
+int[] myArray = {0,1,2,3};
--And a two-dimensional array looks like this: + + + And a two-dimensional array looks like this: + +
-int[][] myArray = { {0,1,2,3}, {3,2,1,0}, {3,5,6,1}, {3,8,3,4} };
+int[][] myArray = { {0,1,2,3}, {3,2,1,0}, {3,5,6,1}, {3,8,3,4} };
--For our purposes, it is better to think of the two-dimensional array as a matrix. A matrix can be thought of as a grid of numbers, arranged in rows and columns, kind of like a bingo board. We might write the two-dimensional array out as follows to illustrate this point: + +
+ For our purposes, it is better to think of the two-dimensional array as a matrix. A matrix can be thought of as a grid of numbers, arranged in rows and columns, kind of like a bingo board. We might write the two-dimensional array out as follows to illustrate this point:
-int[][] myArray = { {0, 1, 2, 3},
- {3, 2, 1, 0},
- {3, 5, 6, 1},
- {3, 8, 3, 4} };
+int[][] myArray = { {0, 1, 2, 3},
+ {3, 2, 1, 0},
+ {3, 5, 6, 1},
+ {3, 8, 3, 4} };
--We can use this type of data structure to encode information about an image. For example, the following grayscale image could be represented by the -following array: - -
-+ + + We can use this type of data structure to encode information about an image. For example, the following grayscale image could be represented by the following array: + + +
+
-int[][] myArray = { {236, 189, 189, 0},
- {236, 80, 189, 189},
- {236, 0, 189, 80},
- {236, 189, 189, 80} };
+int[][] myArray = { {236, 189, 189, 0},
+ {236, 80, 189, 189},
+ {236, 0, 189, 80},
+ {236, 189, 189, 80} };
--To walk through every element of a one-dimensional array, we use a for loop, that is: + + + To walk through every element of a one-dimensional array, we use a for loop, that is: + +
-int[] myArray = new int[10];
-for (int i = 0; i < myArray.length; i++) {
- myArray[i] = 0;
+int[] myArray = new int[10];
+for (int i = 0; i < myArray.length; i++) {
+ myArray[i] = 0;
}
--For a two-dimensional array, in order to reference every element, we must use two nested loops. This gives us a counter variable for every column and every row in the matrix. + + +
+ For a two-dimensional array, in order to reference every element, we must use two nested loops. This gives us a counter variable for every column and every row in the matrix.
-int cols = 10;
-int rows = 10;
-int[][] myArray = new int[cols][rows];
-
-// Two nested loops allow us to visit every spot in a 2D array.
-// For every column I, visit every row J.
-for (int i = 0; i < cols; i++) {
- for (int j = 0; j < rows; j++) {
- myArray[i][j] = 0;
- }
+int cols = 10;
+int rows = 10;
+int[][] myArray = new int[cols][rows];
+
+// Two nested loops allow us to visit every spot in a 2D array.
+// For every column I, visit every row J.
+for (int i = 0; i < cols; i++) {
+ for (int j = 0; j < rows; j++) {
+ myArray[i][j] = 0;
+ }
}
--For example, we might write a program using a two-dimensional array to draw a grayscale image. - -
+
+
+ + For example, we might write a program using a two-dimensional array to draw a grayscale image. + + +
+
+
-// Example: 2D Array
-size(200,200);
-int cols = width;
-int rows = height;
-
-// Declare 2D array
-int[][] myArray = new int[cols][rows];
-
-// Initialize 2D array values
-for (int i = 0; i < cols; i++) {
- for (int j = 0; j < rows; j++) {
- myArray[i][j] = int(random(255));
- }
+size(200,200);
+int cols = width;
+int rows = height;
+
+// Declare 2D array
+int[][] myArray = new int[cols][rows];
+
+// Initialize 2D array values
+for (int i = 0; i < cols; i++) {
+ for (int j = 0; j < rows; j++) {
+ myArray[i][j] = int(random(255));
+ }
}
-// Draw points
-for (int i = 0; i < cols; i++) {
- for (int j = 0; j < rows; j++) {
- stroke(myArray[i][j]);
- point(i,j);
- }
+// Draw points
+for (int i = 0; i < cols; i++) {
+ for (int j = 0; j < rows; j++) {
+ stroke(myArray[i][j]);
+ point(i,j);
+ }
}
--A two-dimensional array can also be used to store objects, which is especially convenient for programming sketches that involve some sort of "grid" or "board." The following example displays a grid of Cell objects stored in a two-dimensional array. Each cell is a rectangle whose brightness oscillates from 0-255 with a sine function. - -
+
+ + A two-dimensional array can also be used to store objects, which is especially convenient for programming sketches that involve some sort of "grid" or "board." The following example displays a grid of Cell objects stored in a two-dimensional array. Each cell is a rectangle whose brightness oscillates from 0-255 with a sine function. + + +
+
-Example: 2D Array of Objects -// 2D Array of objects -Cell[][] grid; - -// Number of columns and rows in the grid -int cols = 10; -int rows = 10; - -void setup() { - size(200,200); - grid = new Cell[cols][rows]; - for (int i = 0; i < cols; i++) { - for (int j = 0; j < rows; j++) { - // Initialize each object - grid[i][j] = new Cell(i*20,j*20,20,20,i+j); - } - } +// 2D Array of objects +Cell[][] grid; + +// Number of columns and rows in the grid +int cols = 10; +int rows = 10; + +void setup() { + size(200,200); + grid = new Cell[cols][rows]; + for (int i = 0; i < cols; i++) { + for (int j = 0; j < rows; j++) { + // Initialize each object + grid[i][j] = new Cell(i*20,j*20,20,20,i+j); + } + } } -void draw() { - background(0); - // The counter variables i and j are also the column and row numbers and - // are used as arguments to the constructor for each object in the grid. - for (int i = 0; i < cols; i++) { - for (int j = 0; j < rows; j++) { - // Oscillate and display each object - grid[i][j].oscillate(); - grid[i][j].display(); - } - } +void draw() { + background(0); + // The counter variables i and j are also the column and row numbers and + // are used as arguments to the constructor for each object in the grid. + for (int i = 0; i < cols; i++) { + for (int j = 0; j < rows; j++) { + // Oscillate and display each object + grid[i][j].oscillate(); + grid[i][j].display(); + } + } } -// A Cell object -class Cell { - // A cell object knows about its location in the grid as well as its size with the variables x,y,w,h. - float x,y; // x,y location - float w,h; // width and height - float angle; // angle for oscillating brightness - - // Cell Constructor - Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) { - x = tempX; - y = tempY; - w = tempW; - h = tempH; - angle = tempAngle; - } - - // Oscillation means increase angle - void oscillate() { - angle += 0.02; - } - - void display() { - stroke(255); - // Color calculated using sine wave - fill(127+127*sin(angle)); - rect(x,y,w,h); - } +// A Cell object +class Cell { + // A cell object knows about its location in the grid + // as well as its size with the variables x,y,w,h + float x,y; // x,y location + float w,h; // width and height + float angle; // angle for oscillating brightness + + // Cell Constructor + Cell(float tempX, float tempY, float tempW, float tempH, float tempAngle) { + x = tempX; + y = tempY; + w = tempW; + h = tempH; + angle = tempAngle; + } + + // Oscillation means increase angle + void oscillate() { + angle += 0.02; + } + + void display() { + stroke(255); + // Color calculated using sine wave + fill(127+127*sin(angle)); + rect(x,y,w,h); + } }- - - This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This tutorial is from the book, Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright © 2008 Elsevier Inc. All rights reserved. |
|
- This tutorial is for Processing version 2.0+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. ++ If you see any errors in this tutorial or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + -You can download the files from this tutorial. +Anatomy of a Program+J David Eisenberg-+ - -Many of the tutorials for Processing concentrate on what the language -can do (change colors, draw shapes, create arrays of objects) and which -function calls will let you accomplish these tasks. These are things you -need to know in order to write a program in Processing. - --There’s one piece of -the puzzle that these tutorials don’t address: how do you analyze a -problem and break it down into steps that the computer can do? In this -tutorial, I’m going to show you what -went through my head as I took on the task of writing functions to draw -regular polygons and star-shaped figures in Processing. This is a good choice -because the task is not too big to get your mind around, but it’s not an -entirely trivial problem, either. - ++ Many of the tutorials for Processing concentrate on what the language can do (change colors, draw shapes, create arrays of objects) and which function calls will let you accomplish these tasks. These are things you need to know in order to write a program in Processing. + --Remember that what you are seeing here is my particular thought process and programming -style. There are many different approaches and styles. As you continue -programming, you will find your own. You can also see other people’s programming -stye (though not their thought process!) by looking at the source code for -the programs at openProcessing.org. - ++ There’s one piece of the puzzle that these tutorials don’t address: how do you analyze a problem and break it down into steps that the computer can do? In this + tutorial, I’m going to show you what went through my head as I took on the task of writing functions to draw regular polygons and star-shaped figures in Processing. This is a good choice because the task is not too big to get your mind around, but it’s not an entirely trivial problem, either. + -Drawing Regular Polygons++ Remember that what you are seeing here is my particular thought process and programming style. There are many different approaches and styles. As you continue programming, you will find your own. You can also see other people’s programming stye (though not their thought process!) by looking at the source code for the programs at openProcessing.org. + --You wouldn’t think of building a house without a blueprint, and you -shouldn’t think of writing a program without a plan of some sort. -Since Processing is such a visual language, -I always have to sketch out what I want as a result before I approach the -keyboard. So that’s where I started. - -Step 1: Planning on paper--The first step was to draw a crude diagram to dredge up old memories of how regular -polygons work. The hexagon was the first one I drew. As you can see from the little loop -I drew inside the hexagon, the center angles of all the slices add up to a complete circle, or -360°, and the “radius” of the polygon is a line from the -center to each vertex. The angle between each of the radius lines is thus 360° divided -by the number of sides. - +Drawing Regular Polygons-
+ You wouldn’t think of building a house without a blueprint, and you shouldn’t think of writing a program without a plan of some sort. Since Processing is such a visual language, I always have to sketch out what I want as a result before I approach the keyboard. So that’s where I started. + --I just needed to get an idea of -what the task was, and a hand-drawn diagram did the job. I didn’t need -to generate the diagram in a drawing program. - --- - Step 2: Some basic trigonometry--So, if you have a line of length r starting at (0,0) at an angle theta (θ), -what are its coordinates in terms of x and y? If you know a little bit of -trigonometry, the answer is that the endpoint of the line is at -(r cos θ, r sin θ). If you don’t -know trigonometry, take a look at -this tutorial (a general and very light introduction to -trigonometry), -this tutorial (oriented towards Processing), -and -this -example from chapter 13 of Learning Processing. -In the following diagram, angles are drawn clockwise, which is how they are measured in -Processing. - -
Step 1: Planning on paper-Step 3: Design Decisions-
-It looks like this is a job for a + The first step was to draw a crude diagram to dredge up old memories of how regular polygons work. The hexagon was the first one I drew. As you can see from the little loop I drew inside the hexagon, the center angles of all the slices add up to a complete circle, or 360°, and the “radius” of the polygon is a line from the center to each vertex. The angle between each of the radius lines is thus 360° divided by the number of sides. + -The problem with drawing a group of lines is that they are just lines—you
-don’t get a true shape that you can fill, like Since you probably want to draw many polygons during a program, it makes sense
-to have a ![]()
-void setup()
-{
- size(300, 300);
- background(255);
- smooth();
-
- noFill();
- polygon(3, 50, 75, 50);
- polygon(4, 170, 75, 50);
-
- fill(255, 204, 255);
- stroke(128, 0, 128);
- polygon(5, 50, 180, 50);
-
- noFill();
- stroke(0);
- polygon(6, 170, 180, 50);
-}
+
-Two Steps Forward, One Step Back-
-The program works, so it’s time to see if there are things that
-could be added or changed. First, the triangle and pentagon seem
-somehow wrong; they are usually drawn pointing upwards instead of
-to the side. The reason they look odd is that the first vertex
-(at 0°) points to the right instead of straight up. It
-would be nice to have an extra parameter that gives the starting
-angle for the first vertex. (Another solution is to leave things
-as they are and let programmers use
-My next thought was that it would be nice to be able to specify a
-width and height for the polygon, much as you do with an
- Step 2: Some basic trigonometry-
-
-
-
-
-
-Well, that was a dead end. That sort of thing happens in programming all
-the time, so I didn’t spend too much time worrying about it.
-It was time for another approach. Since I didn't have an accurate way of
-drawing ellipses, I had to think about the problem a different way. Presume
-you have a circle drawn on a square sheet of rubber, and you stretch it out
-so that it’s twice as wide but the same height. The vertical position of
-the points on the circle does not change, but the horizontal positions are now
-twice as far away from the center as they used to be. The same idea applies
-if you stretch the sheet vertically. The
-following crude drawings seemed to bear this out,
-so it was time to rewrite the + So, if you have a line of length r starting at (0,0) at an angle theta (θ), what are its coordinates in terms of x and y? If you know a little bit of + trigonometry, the answer is that the endpoint of the line is at (r cos θ, r sin θ). If you don’t + know trigonometry, take a look at this tutorial (a general and very light introduction to + trigonometry), this tutorial (oriented towards Processing), and this example from chapter 13 of Learning Processing. In the following diagram, angles are drawn clockwise, which is how they are measured in Processing. + + +
+
+
+
+ Step 3: Design Decisions+ +
+ It looks like this is a job for a
+ The problem with drawing a group of lines is that they are just lines—you don’t get a true shape that you can fill, like
+ Since you probably want to draw many polygons during a program, it makes sense to have a
-
+
+
-void setup( )
-{
- size(300, 300);
- background(255);
- smooth();
-
- noFill();
- polygon(3, 50, 75, 100, 100, -PI / 2.0); // -90 degrees
- polygon(4, 170, 75, 50, 125, -PI / 4.0); // -45 degrees
-
- fill(255, 204, 255);
- stroke(128, 0, 128);
- polygon(5, 50, 200, 75, 50, -PI / 2.0); // -90 degrees
-
- noFill();
- stroke(0);
- polygon(6, 170, 200, 50, 100, 0);
-
- stroke(128);
- // draw enclosing ellipses to make sure we did it right
- ellipse(50, 75, 100, 100);
- ellipse(170, 75, 50, 125);
- ellipse(50, 200, 75, 50);
- ellipse(170, 200, 50, 100);
-}
+void setup() {
+ size(300, 300);
+ background(255);
-void polygon(int n, float cx, float cy, float w, float h, float startAngle)
-{
- float angle = TWO_PI/ n;
+ noFill();
+ polygon(3, 50, 75, 50);
+ polygon(4, 170, 75, 50);
- /* The horizontal "radius" is one half the width;
- the vertical "radius" is one half the height */
- w = w / 2.0;
- h = h / 2.0;
+ fill(255, 204, 255);
+ stroke(128, 0, 128);
+ polygon(5, 50, 180, 50);
- beginShape();
- for (int i = 0; i < n; i++)
- {
- vertex(cx + w * cos(startAngle + angle * i),
- cy + h * sin(startAngle + angle * i));
- }
- endShape(CLOSE);
+ noFill();
+ stroke(0);
+ polygon(6, 170, 180, 50);
}
+void polygon(int n, float cx, float cy, float r) {
+ float angle = 360.0 / n;
+
+ beginShape();
+ for (int i = 0; i < n; i++) {
+ vertex(cx + r * cos(radians(angle * i)),
+ cy + r * sin(radians(angle * i)));
+ }
+ endShape(CLOSE);
+}
-
-Since everything was in radians, I now described
-angles in terms of Too Many Parameters-
-I now had a much more flexible function for drawing polygons, but
-it came at the expense of more parameters. It would be nice to be
-able to draw the ordinary case (equal width and height, start angle
-of zero) without having to specify all those parameters. The solution
-is to overload the function. In Processing, you can have
-two functions with the same name, as long as they have different
-numbers of parameters and/or types of parameters. An example of
-this is Processing’s Two Steps Forward, One Step Back-
-Here is the code to add to the previous example. When you give
-
+ The program works, so it’s time to see if there are things that could be added or changed. First, the triangle and pentagon seem somehow wrong; they are usually drawn pointing upwards instead of to the side. The reason they look odd is that the first vertex (at 0°) points to the right instead of straight up. It would be nice to have an extra parameter that gives the starting angle for the first vertex. (Another solution is to leave things as they are and let programmers use
+ My next thought was that it would be nice to be able to specify a width and height for the polygon, much as you do with an
+
+
+
+
+
+ Well, that was a dead end. That sort of thing happens in programming all the time, so I didn’t spend too much time worrying about it. It was time for another approach. Since I didn't have an accurate way of drawing ellipses, I had to think about the problem a different way. Presume you have a circle drawn on a square sheet of rubber, and you stretch it out so that it’s twice as wide but the same height. The vertical position of the points on the circle does not change, but the horizontal positions are now twice as far away from the center as they used to be. The same idea applies if you stretch the sheet vertically. The following crude drawings seemed to bear this out, so it was time to rewrite the
+
-void polygon(int n, float cx, float cy, float r)
-{
- polygon(n, cx, cy, r * 2.0, r * 2.0, 0.0);
+void setup() {
+ size(300, 300);
+ background(255);
+
+ noFill();
+ polygon(3, 50, 75, 100, 100, -PI / 2.0); // -90 degrees
+ polygon(4, 170, 75, 50, 125, -PI / 4.0); // -45 degrees
+
+ fill(255, 204, 255);
+ stroke(128, 0, 128);
+ polygon(5, 50, 200, 75, 50, -PI / 2.0); // -90 degrees
+
+ noFill();
+ stroke(0);
+ polygon(6, 170, 200, 50, 100, 0);
+
+ stroke(128);
+ // Draw enclosing ellipses to make sure we did it right
+ ellipse(50, 75, 100, 100);
+ ellipse(170, 75, 50, 125);
+ ellipse(50, 200, 75, 50);
+ ellipse(170, 200, 50, 100);
}
+void polygon(int n, float cx, float cy, float w, float h, float startAngle) {
+ float angle = TWO_PI/ n;
+
+ // The horizontal "radius" is one half the width,
+ // the vertical "radius" is one half the height
+ w = w / 2.0;
+ h = h / 2.0;
+
+ beginShape();
+ for (int i = 0; i < n; i++) {
+ vertex(cx + w * cos(startAngle + angle * i),
+ cy + h * sin(startAngle + angle * i));
+ }
+ endShape(CLOSE);
+}
--And here is some code to test the overloaded function. - +
+ Since everything was in radians, I now described angles in terms of Too Many Parameters+ +
+ I now had a much more flexible function for drawing polygons, but it came at the expense of more parameters. It would be nice to be able to draw the ordinary case (equal width and height, start angle of zero) without having to specify all those parameters. The solution is to overload the function. In Processing, you can have two functions with the same name, as long as they have different numbers of parameters and/or types of parameters. An example of this is Processing’s
+ Here is the code to add to the previous example. When you give
-void setup()
-{
- size(300, 300);
- background(255);
- smooth();
-
- noFill();
- polygon(3, 70, 75, 50); // use the defaults
- polygon(4, 170, 75, 25);
-
- stroke(128);
- // draw enclosing ellipses to make sure we did it right
- ellipse(70, 75, 100, 100);
- ellipse(170, 75, 50, 50);
+void polygon(int n, float cx, float cy, float r) {
+ polygon(n, cx, cy, r * 2.0, r * 2.0, 0.0);
}
+
+
+ + And here is some code to test the overloaded function. + +
+
++void setup() { + size(300, 300); + background(255); + smooth(); + + noFill(); + polygon(3, 70, 75, 50); // use the defaults + polygon(4, 170, 75, 25); + + stroke(128); + // draw enclosing ellipses to make sure we did it right + ellipse(70, 75, 100, 100); + ellipse(170, 75, 50, 50); +}- Safe Computing-
-What happens if someone tries to draw a polygon with 2 sides, 1 side,
-or worse, 0 sides? The first two will generate a line and a point,
-but the third one will cause a division by zero error when trying to
-figure out the angle. And what would happen with negative numbers?
-Since polygons with fewer than three sides
-don’t make a lot of sense, I wrapped the body of the
- Safe Computing+ +
+ What happens if someone tries to draw a polygon with 2 sides, 1 side, or worse, 0 sides? The first two will generate a line and a point, but the third one will cause a division by zero error when trying to figure out the angle. And what would happen with negative numbers? Since polygons with fewer than three sides don’t make a lot of sense, I wrapped the body of the
-void polygon(int n, float cx, float cy, float w, float h, float startAngle)
-{
- if (n > 2)
- {
+void polygon(int n, float cx, float cy, float w, float h, float startAngle) {
+ if (n > 2) {
float angle = TWO_PI/ n;
.
.
@@ -360,294 +248,300 @@
-Drawing Stars-
-Now that I was satisfied with the
-
+
-Drawing Stars+ +
+ Now that I was satisfied with the -I saw two problems here. First, finding the intersection point of two lines is +
+
+
+
+ + I saw two problems here. First, finding the intersection point of two lines is a lot of calculation. Not particularly hard calculation, but a lot of it, and it gets tricky when you have vertical lines. Second, I couldn't have a four-sided or three-sided arrow shape; there weren’t enough diagonals. - + --Then, I had another idea. I can’t tell you where the idea came from -or how I arrived at it; it just hit me. That’s a part of the process -that I don’t think can be taught. Here was the idea: -What if you had a -polygon cut out of cookie dough and you sort of pushed in the sides -to make a star shape? That is a method that works for squares and triangles. - ++ Then, I had another idea. I can’t tell you where the idea came from or how I arrived at it; it just hit me. That’s a part of the process that I don’t think can be taught. Here was the idea: What if you had a polygon cut out of cookie dough and you sort of pushed in the sides to make a star shape? That is a method that works for squares and triangles. + -
-
+
-
+
-
+ -When you push in the sides, you push them in at the midpoint so that -you get a nice symmetric cookie. From there, it wasn’t a big -leap to figure out: “what if I had a shorter radius at half -of every slice of the polygon?” - ++ When you push in the sides, you push them in at the midpoint so that you get a nice symmetric cookie. From there, it wasn’t a big leap to figure out: “what if I had a shorter radius at half of every slice of the polygon?” + -
-
-
-
-
-This code would be fairly easy to write. I would need one extra
-parameter: the proportion of the small radius to the
-big radius. In the following code, an
+
+
+
+
+ This code would be fairly easy to write. I would need one extra parameter: the proportion of the small radius to the big radius. In the following code, an
-
-void setup( )
-{
- size(300, 300);
- background(255);
- smooth();
-
- noFill();
- star(3, 60, 75, 100, 100, -PI / 2.0, 0.50); // -90 degrees
- star(4, 170, 75, 25, 0.50); // use simpler call
-
- fill(255, 204, 255);
- stroke(128, 0, 128);
- star(5, 60, 200, 75, 50, -PI / 2.0, 0.50); // -90 degrees
-
- noFill();
- stroke(0);
- star(6, 170, 200, 50, 100, 0, 0.50);
- stroke(128);
-
- // draw enclosing ellipses to make sure we did it right
- ellipse(60, 75, 100, 100);
- ellipse(170, 75, 50, 50);
- ellipse(60, 200, 75, 50);
- ellipse(170, 200, 50, 100);
+void setup() {
+ size(300, 300);
+ background(255);
+ smooth();
+
+ noFill();
+ star(3, 60, 75, 100, 100, -PI / 2.0, 0.50); // -90 degrees
+ star(4, 170, 75, 25, 0.50); // use simpler call
+
+ fill(255, 204, 255);
+ stroke(128, 0, 128);
+ star(5, 60, 200, 75, 50, -PI / 2.0, 0.50); // -90 degrees
+
+ noFill();
+ stroke(0);
+ star(6, 170, 200, 50, 100, 0, 0.50);
+ stroke(128);
+
+ // draw enclosing ellipses to make sure we did it right
+ ellipse(60, 75, 100, 100);
+ ellipse(170, 75, 50, 50);
+ ellipse(60, 200, 75, 50);
+ ellipse(170, 200, 50, 100);
}
-void star(int n, float cx, float cy, float r, float proportion)
-{
- star(n, cx, cy, 2.0 * r, 2.0 * r, 0.0, proportion);
+void star(int n, float cx, float cy, float r, float proportion) {
+ star(n, cx, cy, 2.0 * r, 2.0 * r, 0.0, proportion);
}
-void star(int n, float cx, float cy, float w, float h,
- float startAngle, float proportion)
-{
- if (n > 2)
- {
- float angle = TWO_PI/ (2 *n); // twice as many sides
- float dw; // draw width
- float dh; // draw height
-
- w = w / 2.0;
- h = h / 2.0;
-
- beginShape();
- for (int i = 0; i < 2 * n; i++)
- {
- dw = w;
- dh = h;
- if (i % 2 == 1) // for odd vertices, use short radius
- {
- dw = w * proportion;
- dh = h * proportion;
- }
- vertex(cx + dw * cos(startAngle + angle * i),
- cy + dh * sin(startAngle + angle * i));
- }
- endShape(CLOSE);
- }
+void star(int n, float cx, float cy, float w, float h,
+ float startAngle, float proportion) {
+
+ if (n > 2) {
+ float angle = TWO_PI/ (2 *n); // twice as many sides
+ float dw; // draw width
+ float dh; // draw height
+
+ w = w / 2.0;
+ h = h / 2.0;
+
+ beginShape();
+ for (int i = 0; i < 2 * n; i++) {
+ dw = w;
+ dh = h;
+ if (i % 2 == 1) { // for odd vertices, use short radius
+
+ dw = w * proportion;
+ dh = h * proportion;
+ }
+ vertex(cx + dw * cos(startAngle + angle * i),
+ cy + dh * sin(startAngle + angle * i));
+ }
+ endShape(CLOSE);
+ }
}
-
-What Went Wrong?--When I ran this program, I just freaked out. Everything looked great, -except for the three-sided star. How come I didn’t -get a star from it? The code sure looks correct, so I decided to see -what would happen if I drew the diagram by hand. I measured -the angles with my protractor, -and I drew the long radius lines with a length of two inches in black -and the short radius lines with a length of one inch in red. Sure -enough, it just so happens that the endpoints of the short radius lines -are right on the lines of the main triangle. The program is drawing a -star, with the sides pushed in by zero. - -
-
-
-
--While wondering why this happened, I remembered that the -cosine of the angle between the lines, 60° (π/3) comes out to 0.5, -and I strongly suspected that this had something to do with it. To -test my hypothesis, I changed the square to use a proportion of -cosine of 45° (π/4), the pentagon to cosine of 36° -(π/5), and the -hexagon to cosine of 30° (π/6). Sure enough, they all came out -with no push-in. - --So, if you are drawing a star -with n sides and you set the proportion for the -short radius to long radius to the cos(π/n), you get -a non-star star! I still can’t write a mathematical -proof of it, but it is an interesting result. -I don’t consider that side trip of writing the -test program to be wasted time; -I did learn something new and mildly interesting, and it -may turn out to be useful in the future. - --+ What Went Wrong?+ ++ When I ran this program, I just freaked out. Everything looked great, except for the three-sided star. How come I didn’t get a star from it? The code sure looks correct, so I decided to see what would happen if I drew the diagram by hand. I measured the angles with my protractor, and I drew the long radius lines with a length of two inches in black and the short radius lines with a length of one inch in red. Sure enough, it just so happens that the endpoints of the short radius lines are right on the lines of the main triangle. The program is drawing a star, with the sides pushed in by zero. + --Of course, the way to get a three-sided star is to set the proportion -to an amount less than 0.5, which I did in the following setup code, -with much better results. I also changed the proportions for the other -stars just to see what they would look like. - +
+
+
+
+ + While wondering why this happened, I remembered that the cosine of the angle between the lines, 60° (π/3) comes out to 0.5, and I strongly suspected that this had something to do with it. To test my hypothesis, I changed the square to use a proportion of cosine of 45° (π/4), the pentagon to cosine of 36° (π/5), and the hexagon to cosine of 30° (π/6). Sure enough, they all came out with no push-in. + + ++ So, if you are drawing a star with n sides and you set the proportion for the short radius to long radius to the cos(π/n), you get a non-star star! I still can’t write a mathematical proof of it, but it is an interesting result. I don’t consider that side trip of writing the test program to be wasted time; I did learn something new and mildly interesting, and it may turn out to be useful in the future. + + + +++ + + + Of course, the way to get a three-sided star is to set the proportion + to an amount less than 0.5, which I did in the following setup code, + with much better results. I also changed the proportions for the other + stars just to see what they would look like. + + +
-
-void setup()
-{
- size(300, 300);
- background(255);
- smooth();
-
- noFill();
- star(3, 60, 75, 100, 100, -PI / 2.0, 0.3); // -90 degrees
- star(4, 170, 75, 25, 0.5); // use simpler call
-
- fill(255, 204, 255);
- stroke(128, 0, 128);
- star(5, 60, 200, 75, 50, -PI / 2.0, 0.75); // -90 degrees
-
- noFill();
- stroke(0);
- star(6, 170, 200, 50, 100, 0, 0.4);
- stroke(128);
-
- // draw enclosing ellipses to make sure we did it right
- ellipse(60, 75, 100, 100);
- ellipse(170, 75, 50, 50);
- ellipse(60, 200, 75, 50);
- ellipse(170, 200, 50, 100);
+void setup(){
+ size(300, 300);
+ background(255);
+
+ noFill();
+ star(3, 60, 75, 100, 100, -PI / 2.0, 0.3); // -90 degrees
+ star(4, 170, 75, 25, 0.5); // use simpler call
+
+ fill(255, 204, 255);
+ stroke(128, 0, 128);
+ star(5, 60, 200, 75, 50, -PI / 2.0, 0.75); // -90 degrees
+
+ noFill();
+ stroke(0);
+ star(6, 170, 200, 50, 100, 0, 0.4);
+ stroke(128);
+
+ // Draw enclosing ellipses to make sure we did it right
+ ellipse(60, 75, 100, 100);
+ ellipse(170, 75, 50, 50);
+ ellipse(60, 200, 75, 50);
+ ellipse(170, 200, 50, 100);
+}
+
+
+void star(int n, float cx, float cy, float r, float proportion) {
+ star(n, cx, cy, 2.0 * r, 2.0 * r, 0.0, proportion);
}
+void star(int n, float cx, float cy, float w, float h,
+ float startAngle, float proportion) {
+
+ if (n > 2) {
+ float angle = TWO_PI/ (2 *n); // twice as many sides
+ float dw; // draw width
+ float dh; // draw height
+
+ w = w / 2.0;
+ h = h / 2.0;
+
+ beginShape();
+ for (int i = 0; i < 2 * n; i++) {
+ dw = w;
+ dh = h;
+ if (i % 2 == 1) {
+ dw = w * proportion;
+ dh = h * proportion;
+ }
+ vertex(cx + dw * cos(startAngle + angle * i),
+ cy + dh * sin(startAngle + angle * i));
+ }
+ endShape(CLOSE);
+ }
+}
-Using the Functions--Finally, in order to use the functions in something other -than a test, I decided to write a program that -would randomly generate polygons and stars. The window is -300 by 300, and the stars or polygons have a radius of 24 dots, so I -have six rows and five columns (the extra dot is for spacing). -Remember how I said -that knowing the proportions that would create a star -“may turn out to be useful in the future”? Well, -they aren’t just useful for this program—they’re -vital. When I generate a star, I need to make sure it really has a -star shape, so I have to keep the proportion of short to long radius -less than the cosine of π divided by the number of sides. - +Using the Functions++ Finally, in order to use the functions in something other than a test, I decided to write a program that would randomly generate polygons and stars. The window is 300 by 300, and the stars or polygons have a radius of 24 dots, so I have six rows and five columns (the extra dot is for spacing). Remember how I said that knowing the proportions that would create a star “may turn out to be useful in the future”? Well, they aren’t just useful for this program—they’re vital. When I generate a star, I need to make sure it really has a star shape, so I have to keep the proportion of short to long radius less than the cosine of π divided by the number of sides. + -Here is the code for
+ Here is the code for
-
-void setup()
-{
- size(300, 300);
- background(255);
- frameRate(6);
- smooth();
- rectMode(CENTER);
+void setup() {
+ size(300, 300);
+ background(255);
+ frameRate(6);
+ rectMode(CENTER);
}
-void draw()
-{
- // choose a random stroke color
- int r = int(random(0, 255));
- int g = int(random(0, 255));
- int b = int(random(0, 255));
- // and fill opacity
- int opacity = int(random(100, 255));
- int nSides = int(random(3, 9));
-
- // determine the center x and y coordinates
- int cx = 25 + 50 * int(random(0, 6));
- int cy = 25 + 50 * int(random(0, 6));
-
- // if a random number (0 or 1) is 0, draw a polygon;
- // otherwise, draw a star
- boolean isPolygon = int(random(2)) == 0;
-
- // for stars, you need the proportion of short to long radius
- float proportion;
-
- stroke(255); // erase any previous drawing in this area
- fill(255);
- rect(cx, cy, 50, 50);
-
- stroke(r, g, b);
- fill(r, g, b, opacity);
- if (isPolygon)
- {
- polygon(nSides, cx, cy, 24);
- }
- else
- {
- proportion = random(0.2, 0.8) * cos(PI / nSides);
- star(nSides, cx, cy, 24, proportion);
- }
+void draw() {
+ // Choose a random stroke color
+ int r = int(random(0, 255));
+ int g = int(random(0, 255));
+ int b = int(random(0, 255));
+ // Fill opacity
+ int opacity = int(random(100, 255));
+ int nSides = int(random(3, 9));
+
+ // Determine the center x and y coordinates
+ int cx = 25 + 50 * int(random(0, 6));
+ int cy = 25 + 50 * int(random(0, 6));
+
+ // If a random number (0 or 1) is 0, draw a polygon;
+ // otherwise, draw a star
+ boolean isPolygon = int(random(2)) == 0;
+
+ // For stars, you need the proportion of short to long radius
+ float proportion;
+
+ stroke(255); // erase any previous drawing in this area
+ fill(255);
+ rect(cx, cy, 50, 50);
+
+ stroke(r, g, b);
+ fill(r, g, b, opacity);
+ if (isPolygon) {
+ polygon(nSides, cx, cy, 24);
+ } else {
+ proportion = random(0.2, 0.8) * cos(PI / nSides);
+ star(nSides, cx, cy, 24, proportion);
+ }
+}
+
+void polygon(int n, float cx, float cy, float r) {
+ float angle = 360.0 / n;
+ beginShape();
+ for (int i = 0; i < n; i++) {
+ vertex(cx + r * cos(radians(angle * i)),
+ cy + r * sin(radians(angle * i)));
+ }
+ endShape(CLOSE);
+}
+
+void star(int n, float cx, float cy, float r, float proportion) {
+ star(n, cx, cy, 2.0 * r, 2.0 * r, 0.0, proportion);
}
+void star(int n, float cx, float cy, float w, float h,
+ float startAngle, float proportion) {
+ if (n > 2) {
+ float angle = TWO_PI/ (2 *n); // twice as many sides
+ float dw; // draw width
+ float dh; // draw height
+
+ w = w / 2.0;
+ h = h / 2.0;
+
+ beginShape();
+ for (int i = 0; i < 2 * n; i++)
+ {
+ dw = w;
+ dh = h;
+ if (i % 2 == 1) // for odd vertices, use short radius
+ {
+ dw = w * proportion;
+ dh = h * proportion;
+ }
+ vertex(cx + dw * cos(startAngle + angle * i),
+ cy + dh * sin(startAngle + angle * i));
+ }
+ endShape(CLOSE);
+ }
+}
Polygons and Stars as Objects-+
Now that I have working functions for polygons and stars, it might
be useful to make a Polygons and Stars as ObjectsSumming Up-+ This tutorial has shown you the things you never see in books. In a book, all the diagrams are picture perfect. You see a sample program, and it just works, and @@ -674,14 +568,10 @@ Summing Upbecause we are all in this together. -+ You can download the files from this tutorial. -- - This tutorial is for Processing version 2.0+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. - - |
+
Some helpful tips when you’re working with Processing & Android:
- I know I’ve said this before, but be patient. Canceling a process (ie. the emulator load or a device compile) can cause problems. If you do this inadvertently, you’re best off restarting Processing.
-- Make sure to check out the Processing Android Wiki, where you’ll find some troubleshooting advice, and some tips on how to get your sketches working properly on your device.
+- Make sure to check out the Processing Android Wiki, where you’ll find some troubleshooting advice, and some tips on how to get your sketches working properly on your device.
This tutorial is for Processing version 2.0+. If you see any errors or have comments, please let us know. This tutorial is adapted from 'Processing & Android: Mobile App Development Made (Very) Easy' by Jer Thorp
diff --git a/content/static/tutorials/arraylist/index.html b/content/static/tutorials/arraylist/index.html index 613ffee6a..5f24a6ad5 100644 --- a/content/static/tutorials/arraylist/index.html +++ b/content/static/tutorials/arraylist/index.html @@ -1,4 +1,4 @@ -In truth, we could use a simple array to manage our Particle objects. Some particle systems might have a fixed number of particles, and arrays are magnificently efficient in those instances. Processing also offers expand(), contract(), subset(), splice() and other methods for resizing arrays. However, for these examples, the Java class ArrayList (found in the java.util package: http://download.oracle.com/javase/6/docs/api/java/util/ArrayList.html) will prove to be the best solution. Using an ArrayList is conceptually similar to a standard array, but the syntax is different. Here is some code (that assumes the existence of a generic Particle class) demonstrating identical results: first with an array, and second with an ArrayList. +In truth, we could use a simple array to manage our Particle objects. Some particle systems might have a fixed number of particles, and arrays are magnificently efficient in those instances. Processing also offers expand(), contract(), subset(), splice() and other methods for resizing arrays. However, for these examples, the Java class ArrayList (found in the java.util package: https://docs.oracle.com/javase/8/docs/api/java/util/ArrayList.html) will prove to be the best solution. Using an ArrayList is conceptually similar to a standard array, but the syntax is different. Here is some code (that assumes the existence of a generic Particle class) demonstrating identical results: first with an array, and second with an ArrayList. // THE STANDARD ARRAY WAY int total = 10; diff --git a/content/static/tutorials/arrays/imgs/28_01.png b/content/static/tutorials/arrays/imgs/28_01.png new file mode 100644 index 000000000..375acc595 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_01.png differ diff --git a/content/static/tutorials/arrays/imgs/28_02.png b/content/static/tutorials/arrays/imgs/28_02.png new file mode 100644 index 000000000..81a0ada20 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_02.png differ diff --git a/content/static/tutorials/arrays/imgs/28_09.png b/content/static/tutorials/arrays/imgs/28_09.png new file mode 100644 index 000000000..e590d781e Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_09.png differ diff --git a/content/static/tutorials/arrays/imgs/28_12.png b/content/static/tutorials/arrays/imgs/28_12.png new file mode 100644 index 000000000..ec7587639 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_12.png differ diff --git a/content/static/tutorials/arrays/imgs/28_13.png b/content/static/tutorials/arrays/imgs/28_13.png new file mode 100644 index 000000000..9ad00c455 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_13.png differ diff --git a/content/static/tutorials/arrays/imgs/28_15_1.png b/content/static/tutorials/arrays/imgs/28_15_1.png new file mode 100644 index 000000000..94946e743 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_15_1.png differ diff --git a/content/static/tutorials/arrays/imgs/28_15_2.png b/content/static/tutorials/arrays/imgs/28_15_2.png new file mode 100644 index 000000000..08855419e Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_15_2.png differ diff --git a/content/static/tutorials/arrays/imgs/28_15_3.png b/content/static/tutorials/arrays/imgs/28_15_3.png new file mode 100644 index 000000000..6726e1dfb Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_15_3.png differ diff --git a/content/static/tutorials/arrays/imgs/28_16_1.png b/content/static/tutorials/arrays/imgs/28_16_1.png new file mode 100644 index 000000000..5d89f5fe7 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_16_1.png differ diff --git a/content/static/tutorials/arrays/imgs/28_16_2.png b/content/static/tutorials/arrays/imgs/28_16_2.png new file mode 100644 index 000000000..56d8613ae Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_16_2.png differ diff --git a/content/static/tutorials/arrays/imgs/28_16_3.png b/content/static/tutorials/arrays/imgs/28_16_3.png new file mode 100644 index 000000000..05287e9f0 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_16_3.png differ diff --git a/content/static/tutorials/arrays/imgs/28_24_1.png b/content/static/tutorials/arrays/imgs/28_24_1.png new file mode 100644 index 000000000..2f6cc428c Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_24_1.png differ diff --git a/content/static/tutorials/arrays/imgs/28_24_2.png b/content/static/tutorials/arrays/imgs/28_24_2.png new file mode 100644 index 000000000..c11af377e Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_24_2.png differ diff --git a/content/static/tutorials/arrays/imgs/28_24_3.png b/content/static/tutorials/arrays/imgs/28_24_3.png new file mode 100644 index 000000000..fdf5112c3 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_24_3.png differ diff --git a/content/static/tutorials/arrays/imgs/28_25_1.png b/content/static/tutorials/arrays/imgs/28_25_1.png new file mode 100644 index 000000000..77dc31d85 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_25_1.png differ diff --git a/content/static/tutorials/arrays/imgs/28_25_2.png b/content/static/tutorials/arrays/imgs/28_25_2.png new file mode 100644 index 000000000..7302d43e4 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_25_2.png differ diff --git a/content/static/tutorials/arrays/imgs/28_25_3.png b/content/static/tutorials/arrays/imgs/28_25_3.png new file mode 100644 index 000000000..114884786 Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_25_3.png differ diff --git a/content/static/tutorials/arrays/imgs/28_27.png b/content/static/tutorials/arrays/imgs/28_27.png new file mode 100644 index 000000000..2bfeac0aa Binary files /dev/null and b/content/static/tutorials/arrays/imgs/28_27.png differ diff --git a/content/static/tutorials/arrays/imgs/DA820192878E232E._t_ b/content/static/tutorials/arrays/imgs/DA820192878E232E._t_ new file mode 100644 index 000000000..31545b066 --- /dev/null +++ b/content/static/tutorials/arrays/imgs/DA820192878E232E._t_ @@ -0,0 +1,1910 @@ + + + + + + + + + + +]> + diff --git a/content/static/tutorials/arrays/imgs/Dia-28-1.svg b/content/static/tutorials/arrays/imgs/Dia-28-1.svg new file mode 100644 index 000000000..89d12d7ee --- /dev/null +++ b/content/static/tutorials/arrays/imgs/Dia-28-1.svg @@ -0,0 +1,1942 @@ + + + + + + + + + + +]> + diff --git a/content/static/tutorials/arrays/imgs/Dia-28-2.svg b/content/static/tutorials/arrays/imgs/Dia-28-2.svg new file mode 100644 index 000000000..e8542f605 --- /dev/null +++ b/content/static/tutorials/arrays/imgs/Dia-28-2.svg @@ -0,0 +1,1971 @@ + + + + + + + + + + +]> + diff --git a/content/static/tutorials/arrays/imgs/Dia-28-3.svg b/content/static/tutorials/arrays/imgs/Dia-28-3.svg new file mode 100644 index 000000000..f70f6a66b --- /dev/null +++ b/content/static/tutorials/arrays/imgs/Dia-28-3.svg @@ -0,0 +1,2056 @@ + + + + + + + + + + +]> + diff --git a/content/static/tutorials/arrays/index.html b/content/static/tutorials/arrays/index.html new file mode 100644 index 000000000..d380160dc --- /dev/null +++ b/content/static/tutorials/arrays/index.html @@ -0,0 +1,916 @@ +|
+
+
+ This tutorial is the Arrays chapter from Processing: A Programming Handbook for Visual Designers and Artists, Second Edition, published by MIT Press. © 2014 MIT Press. If you see any errors or have comments, please let us know. + +Arrays+Casey Reas and Ben Fry+ + ++ The term array refers to a structured grouping or an imposing number: “The dinner buffet offers an array of choices,” “The city of Boston faces an array of problems.” In computer programming, an array is a set of data elements stored under the same name. Arrays can be created to hold any type of data, and each element can be individually assigned and read. There can be arrays of numbers, characters, sentences, boolean values, and so on. Arrays might store vertex data for complex shapes, recent keystrokes from the keyboard, or data read from a file. For instance, an array can store five integers (1919, 1940, 1975, 1976, 1990), the years to date that the Cincinnati Reds won the World Series, rather than defining five separate variables. Let’s call this array “dates” and store the values in sequence: + + + + |
+
|
+ + |
+
|
+
+Array elements are numbered starting with zero, which may seem confusing at first but is an important detail for many programming languages. The first element is at position [0], the second is at [1], and so on. The position of each element is determined by its offset from the start of the array. The first element is at position [0] because it has no offset; the second element is at position [1] because it is offset one place from the beginning. The last position in the array is calculated by subtracting 1 from the array length. In this example, the last element is at position [4] because there are five elements in the array.
+ |
+
|
+ + |
+
|
+ +The following examples to draw this chart demonstrates some of the benefits of using arrays, like avoiding the cumbersome chore of storing data points in individual variables. Because the chart has ten data points, inputting this data into a program requires either creating 10 variables or using one array. The code on the left demonstrates using separate variables. The code on the right shows how the data elements can be logically grouped together in an array. + ++
+ int x0 = 50; int[] x = { 50, 61, 83, 69, 71,
+ int x1 = 61; 50, 29, 31, 17, 39 };
+ int x2 = 83;
+ int x3 = 69;
+ int x4 = 71;
+ int x5 = 50;
+ int x6 = 29;
+ int x7 = 31;
+ int x8 = 17;
+ int x9 = 39;
+
+
++Using what we know about drawing without arrays, ten variables are needed to store the data; each variable is used to draw a single rectangle. This is tedious: + + |
+
+
+ + |
+
++int x0 = 50; +int x1 = 61; +int x2 = 83; +int x3 = 69; +int x4 = 71; +int x5 = 50; +int x6 = 29; +int x7 = 31; +int x8 = 17; +int x9 = 39; +fill(0); +rect(0, 0, x0, 8); +rect(0, 10, x1, 8); +rect(0, 20, x2, 8); +rect(0, 30, x3, 8); +rect(0, 40, x4, 8); +rect(0, 50, x5, 8); +rect(0, 60, x6, 8); +rect(0, 70, x7, 8); +rect(0, 80, x8, 8); +rect(0, 90, x9, 8); ++ |
+
|
+ +In contrast, the following example shows how to use an array within a program. The data for each bar is accessed in sequence with a for loop. The syntax and usage of arrays is discussed in more detail in the following pages. + + + |
+
+
+ + |
+
+
+int[] x = {
+ 50, 61, 83, 69, 71, 50, 29, 31, 17, 39
+};
+
+fill(0);
+// Read one array element each time through the for loop
+for (int i = 0; i < x.length; i++) {
+ rect(0, i*10, x[i], 8);
+}
+
+ |
+
|
+ + Define an Array+Arrays are declared similarly to other data types, but they are distinguished with brackets, [ and ]. When an array is declared, the type of data it stores must be specified. (Each array can store only one type of data.) After the array is declared, it must be created with the keyword new, just like working with objects. This additional step allocates space in the computer’s memory to store the array’s data. After the array is created, the values can be assigned. There are different ways to declare, create, and assign arrays. In the following examples that explain these differences, an array with five elements is created and filled with the values 19, 40, 75, 76, and 90. Note the different way each technique for creating and assigning elements of the array relates to setup(). + + |
+
+
+int[] data; // Declare
+
+void setup() {
+ size(100, 100);
+ data = new int[5]; // Create
+ data[0] = 19; // Assign
+ data[1] = 40;
+ data[2] = 75;
+ data[3] = 76;
+ data[4] = 90;
+}
+
+int[] data = new int[5]; // Declare, create
+
+void setup() {
+ size(100, 100);
+ data[0] = 19; // Assign
+ data[1] = 40;
+ data[2] = 75;
+ data[3] = 76;
+ data[4] = 90;
+}
+
+int[] data = { 19, 40, 75, 76, 90 }; // Declare, create, assign
+
+void setup() {
+ size(100, 100);
+}
+
+ |
+
|
+
+Although each of the three previous examples defines an array in a different way, they are all equivalent. They show the flexibility allowed in defining the array data. Sometimes, all the data a program will use is known at the start and can be assigned immediately. At other times, the data is generated while the code runs. Each sketch can be approached differently using these techniques.
+ |
+
+
+int[] data; // Declare
+
+data = new int[5]; // Create
+
+data[0] = 19; // Assign
+data[1] = 40;
+data[2] = 75;
+data[3] = 76;
+data[4] = 90;
+
+int[] data = new int[5]; // Declare, create
+
+data[0] = 19; // Assign
+
+data[1] = 40;
+data[2] = 75;
+data[3] = 76;
+data[4] = 90;
+
+int[] data = { 19, 40, 75, 76, 90 }; // Declare, create, assign
+
+ |
+
|
+ + Read Array Elements+After an array is defined and assigned values, its data can be accessed and used within the code. An array element is accessed with the name of the array variable, followed by brackets around the element position to read. + + |
+
+
+ + |
+
+
+int[] data = { 19, 40, 75, 76, 90 };
+
+line(data[0], 0, data[0], 100);
+line(data[1], 0, data[1], 100);
+line(data[2], 0, data[2], 100);
+line(data[3], 0, data[3], 100);
+line(data[4], 0, data[4], 100);
+
+ |
+
|
+ +Remember, the first element in the array is in the 0 position. If you try to access a member of the array that lies outside the array boundaries, your program will terminate and give an ArrayIndexOutOfBoundsException. + + |
+
+
+int[] data = { 19, 40, 75, 76, 90 };
+
+println(data[0]); // Prints "19" to the console
+println(data[2]); // Prints "75" to the console
+println(data[5]); // ERROR! The last element of the array is 4
+
+ |
+
|
+ +The length field stores the number of elements in an array. This field is stored within the array and is accessed with the dot operator (p. 363–379). The following example demonstrates how to utilize it. + + |
+
+
+int[] data1 = { 19, 40, 75, 76, 90 };
+int[] data2 = { 19, 40 };
+int[] data3 = new int[127];
+
+println(data1.length); // Prints "5" to the console
+println(data2.length); // Prints "2" to the console
+println(data3.length); // Prints "127" to the console
+
+ |
+
|
+ +Usually, a for loop is used to access array elements, especially with large arrays. The following example draws the same lines as code 28-09 but uses a for loop to iterate through every value in the array. + + |
+
+
+ |
+
+
+int[] data = { 19, 40, 75, 76, 90 };
+
+for (int i = 0; i < data.length; i++) {
+ line(data[i], 0, data[i], 100);
+}
+
+ |
+
|
+ +A for loop can also be used to put data inside an array. For instance, it can calculate a series of numbers and then assign each value to an array element. The following example stores the values from the sin() function in an array within setup() and then displays these values as the stroke values for lines within draw(). + + |
+
+
+ |
+
+
+float[] sineWave;
+
+void setup() {
+ size(100, 100);
+ sineWave = new float[width];
+ for (int i = 0; i < sineWave.length; i++) {
+ // Fill array with values from sin()
+ float r = map(i, 0, width, 0, TWO_PI);
+ sineWave[i] = abs(sin(r));
+ }
+}
+
+void draw() {
+ for (int i = 0; i < sineWave.length; i++) {
+ // Set stroke values to numbers read from array
+ stroke(sineWave[i] * 255);
+ line(i, 0, i, height);
+ }
+}
+
+ |
+
|
+
+ Record Data+As one example of how arrays may be used, this section shows how to use arrays to store data from the mouse. The pmouseX and pmouseY variables store the cursor coordinates from the previous frame, but there is no built-in way to access the cursor values from earlier frames. At every frame, the mouseX, mouseY, pmouseX, and pmouseY variables are replaced with new numbers and their previous numbers are discarded. Creating an array is the easiest way to store the history of these values. In the following example, the most recent 100 values from mouseY are stored and displayed on screen as a line from the left to the right edge of the screen. At each frame, the values in the array are shifted to the right and the newest value is added to the beginning. + + |
+
+
++
++
++ |
+
+
+
+int[] y;
+
+void setup() {
+ size(100, 100);
+ y = new int[width];
+}
+
+void draw() {
+ background(204); // Read the array from the end to the
+ // beginning to avoid overwriting the data
+ for (int i = y.length-1; i > 0; i--) {
+ y[i] = y[i-1];
+ }
+ // Add new values to the beginning
+ y[0] = mouseY;
+ // Display each pair of values as a line
+ for (int i = 1; i < y.length; i++) {
+ line(i, y[i], i-1, y[i-1]);
+ }
+}
+
+ |
+
|
+ +Apply the same code simultaneously to the mouseX and mouseY values to store the position of the cursor. Displaying these values each frame creates a trail behind the cursor. + + |
+
+
++
++
++ |
+
+
+int num = 50;
+int[] x = new int[num];
+int[] y = new int[num];
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(255, 102);
+}
+
+void draw() {
+ background(0);
+ // Shift the values to the right
+ for (int i = num-1; i > 0; i--) {
+ x[i] = x[i-1];
+ y[i] = y[i-1];
+ }
+ // Add the new values to the beginning of the array
+ x[0] = mouseX;
+ y[0] = mouseY;
+ // Draw the circles
+ for (int i = 0; i < num; i++) {
+ ellipse(x[i], y[i], i/2.0, i/2.0);
+ }
+}
+
+ |
+
|
+ +The following example produces the same result as the previous one but uses a more efficient technique. Instead of shifting the array elements in each frame, the program writes the new data to the next available array position. The elements in the array remain in the same position once they are written, but they are read in a different order each frame. Reading begins at the location of the oldest data element and continues to the end of the array. At the end of the array, the % operator (p. 57) is used to wrap back to the beginning. This technique, commonly known as a ring buffer, is especially useful with larger arrays, to avoid unnecessary copying of data that can slow down a program. + + |
+
+
+int num = 50;
+int[] x = new int[num];
+int[] y = new int[num];
+int indexPosition = 0;
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(255, 102);
+}
+
+void draw() {
+ background(0);
+ x[indexPosition] = mouseX;
+ y[indexPosition] = mouseY;
+ // Cycle between 0 and the number of elements
+ indexPosition = (indexPosition + 1) % num;
+ for (int i = 0; i < num; i++) {
+ // Set the array position to read
+ int pos = (indexPosition + i) % num;
+ float radius = (num-i) / 2.0;
+ ellipse(x[pos], y[pos], radius, radius);
+ }
+}
+
+ |
+
|
+
+ Array Functions+Processing provides a group of functions that assist in managing array data. Only four of these functions are introduced here, but more are explained in the Processing reference included with the software. ++ +The append() function expands an array by one element, adds data to the new position, and returns the new array: + + |
+
+
+String[] trees = { "ash", "oak" };
+
+append(trees, "maple"); // INCORRECT! Does not change the array
+printArray(trees); // Prints [0] "ash", [1] "oak"
+println();
+trees = append(trees, "maple"); // Add "maple" to the end
+printArray(trees); // Prints [0] "ash", [1] "oak", [2] "maple"
+println();
+// Add "beech" to the end of the trees array, and creates a new
+// array to store the change
+
+String[] moretrees = append(trees, "beech");
+
+// Prints [0] "ash", [1] "oak", [2] "maple", [3] "beech"
+printArray(moretrees);
+
+ |
+
|
+ +The shorten() function decreases an array by one element by removing the last element and returns the shortened array: + + |
+
+
+String[] trees = { "lychee", "coconut", "fig" };
+
+trees = shorten(trees); // Remove the last element from the array
+printArray(trees); // Prints [0] "lychee", [1] "coconut"
+println();
+trees = shorten(trees); // Remove the last element from the array
+printArray(trees); // Prints [0] "lychee"
+
+ |
+
|
+ +The expand() function increases the size of an array. It can expand to a specific size, or if no size is specified, the array’s length will be doubled. If an array needs to have many additional elements, it’s faster to use expand() to double the size than to use append() to continually add one value at a time. The following example saves a new mouseX value to an array every frame. When the array becomes full, the size of the array is doubled and new mouseX values proceed to fill the enlarged array. + + |
+
+
+int[] x = new int[100]; // Array to store x-coordinates
+int count = 0; // Positions stored in array
+void setup() {
+ size(100, 100);
+}
+void draw() {
+ x[count] = mouseX; // Assign new x-coordinate to the array
+ count++; // Increment the counter
+ if (count == x.length) { // If the x array is full,
+ x = expand(x); // double the size of x
+ println(x.length); // Write the new size to the console
+ }
+}
+
+ |
+
|
+ +Array values cannot be copied with the assignment operator because they are objects. The most common way to copy elements from one array to another is to use special functions or to copy each element individually within a for loop. The arrayCopy() function is the most efficient way to copy the entire contents of one array to another. The data is copied from the array used as the first parameter to the array used as the second parameter. Both arrays must be the same length for it to work in the configuration shown here. + + |
+
+
+String[] north = { "OH", "IN", "MI" };
+String[] south = { "GA", "FL", "NC" };
+
+arrayCopy(north, south); // Copy from north array to south array
+printArray(south); // Prints [0] "OH", [1] "IN", [3] "MI"
+println();
+
+String[] east = { "MA", "NY", "RI" };
+String[] west = new String[east.length]; // Create a new array
+
+arrayCopy(east, west); // Copy from east array to west array
+printArray(west); // Prints [0] "MA", [1] "NY", [2] "RI"
+
+ |
+
|
+
+New functions can be written to perform operations on arrays, but arrays behave differently than data types such as int and char. As with objects, when an array is used as a parameter to a function, the address (location in memory) of the array is transferred into the function instead of the actual data. No new array is created, and changes made within the function affect the array used as the parameter.
+ |
+
+
+float[] data = { 19.0, 40.0, 75.0, 76.0, 90.0 };
+
+void setup() {
+ halve(data);
+ println(data[0]); // Prints "9.5"
+ println(data[1]); // Prints "20.0"
+ println(data[2]); // Prints "37.5"
+ println(data[3]); // Prints "38.0"
+ println(data[4]); // Prints "45.0"
+}
+void halve(float[] d) {
+ for (int i = 0; i < d.length; i++) { // For each array element,
+ d[i] = d[i] / 2.0; // divide the value by 2
+ }
+}
+
+ |
+
|
+ +Changing array data within a function without modifying the original array requires some additional lines of code. In the following example, the array is passed into the function as a parameter, a new array is made, the values from the original array are copied in the new array, changes are made to the new array, and finally the modified array is returned. + + |
+
+
+float[] data = { 19.0, 40.0, 75.0, 76.0, 90.0 };
+float[] halfData;
+void setup() {
+ halfData = halve(data); // Run the halve() function
+ println(data[0], halfData[0]); // Prints "19.0, 9.5"
+ println(data[1], halfData[1]); // Prints "40.0, 20.0"
+ println(data[2], halfData[2]); // Prints "75.0, 37.5"
+ println(data[3], halfData[3]); // Prints "76.0, 38.0"
+ println(data[4], halfData[4]); // Prints "90.0, 45.0"
+}
+
+float[] halve(float[] d) {
+ float[] numbers = new float[d.length]; // Create a new array
+ arrayCopy(d, numbers);
+ for (int i = 0; i < numbers.length; i++) { // For each element,
+ numbers[i] = numbers[i] / 2.0; // divide the value by 2
+ }
+ return numbers; // Return the new array
+}
+
+ |
+
|
+
+ Array of Objects+Working with arrays of objects is technically similar to working with arrays of other data types, but it opens the amazing possibility to create as many instances of a custom-designed class as desired. Like all arrays, an array of objects is distinguished from a single object with brackets, the [ and ] characters. However, because each array element is an object, each must be created with the keyword new before it can be used. The steps for working with an array of objects are: ++ +1. Declare the array + +2. Create the array + +3. Create each object in the array + + +These steps are translated into code in the following example. It uses the Ring class from page 371, so copy it over or retype it. This code creates a rings[] array to hold fifty Ring objects. Space in memory for the rings[] array is allocated in setup() and each Ring object is created. The first time a mouse button is pressed, the first Ring object is turned on and its x and y variables are assigned to the current values of the cursor. Each time a mouse button is pressed, a new Ring is turned on and displayed in the subsequent trip through draw(). When the final element in the array has been created, the program jumps back to the beginning of the array to assign new positions to earlier Rings. + + |
+
+
++
++
++ |
+
+
+Ring[] rings; // Declare the array
+int numRings = 50;
+int currentRing = 0;
+void setup() {
+ size(100, 100);
+ rings = new Ring[numRings]; // Create the array
+ for (int i = 0; i < rings.length; i++) {
+ rings[i] = new Ring(); // Create each object
+ }
+}
+void draw() {
+ background(0);
+ for (int i = 0; i < rings.length; i++) {
+ rings[i].grow();
+ rings[i].display();
+ }
+}
+// Click to create a new Ring
+void mousePressed() {
+ rings[currentRing].start(mouseX, mouseY);
+ currentRing++;
+ if (currentRing >= numRings) {
+ currentRing = 0;
+ }
+}
+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;
+
+ diameter = 1;
+ on = true;
+ }
+
+ void grow() {
+ if (on == true) {
+ diameter += 0.5;
+ if (diameter > 400) {
+ on = false;
+ diameter = 1;
+ }
+ }
+ }
+
+ void display() {
+ if (on == true) {
+ noFill();
+ strokeWeight(4);
+ stroke(204, 153);
+ ellipse(x, y, diameter, diameter);
+ }
+ }
+}
+
+ |
+
|
+ +The next example requires the Spot class from page 363. Unlike the prior example, variable values are generated within the setup() and are passed into each array elements through the object’s constructor. Each element in the array starts with a unique set of x-coordinate, diameter, and speed values. Because the number of objects is dependent on the width of the display window, it is not possible to create the array until the program knows how wide it will be. Therefore, the array is declared outside of setup() to make it global (see p. 12), but it is created inside setup, after the width of the display window is defined. + + |
+
+
++
++ |
+
+
+Spot[] spots; // Declare array
+void setup() {
+ size(700, 100);
+ int numSpots = 70; // Number of objects
+ int dia = width/numSpots; // Calculate diameter
+ spots = new Spot[numSpots]; // Create array
+ for (int i = 0; i < spots.length; i++) {
+ float x = dia/2 + i*dia;
+ float rate = random(0.1, 2.0);
+ // Create each object
+ spots[i] = new Spot(x, 50, dia, rate);
+ }
+ noStroke();
+}
+void draw() {
+ fill(0, 12);
+ rect(0, 0, width, height);
+ fill(255);
+ for (int i=0; i < spots.length; i++) {
+ spots[i].move(); // Move each object
+ spots[i].display(); // Display each object
+ }
+}
+class Spot {
+ float x, y; // X-coordinate, y-coordinate
+ float diameter; // Diameter of the circle
+ float speed; // Distance moved each frame
+ int direction = 1; // Direction of motion (1 is down, -1 is up)
+
+ // Constructor
+ Spot(float xpos, float ypos, float dia, float sp) {
+ x = xpos;
+ y = ypos;
+ diameter = dia;
+ speed = sp;
+ }
+
+ void move() {
+ y += (speed * direction);
+ if ((y > (height - diameter/2)) || (y < diameter/2)) {
+ direction *= -1;
+ }
+ }
+
+ void display() {
+ ellipse(x, y, diameter, diameter);
+ }
+}
+
+ |
+
|
+ +Working with arrays of objects gives us the opportunity to access each object with a code structure called an enhanced for loop to simplify the code. Unlike the for loop used previously in this chapter, the enhanced loop automatically goes through each element in an array one by one without needing to define the start and stop conditions. An enhanced loop is structured by stating the data type of the array elements, a variable name to assign to each element of the array, and the name of the array. For instance, the for loop in code 28-25 is rewritten like this: + +
+ for (Spot s : spots) {
+ s.move();
+ s.display();
+ }
+
++Each object in the array is in turn assigned to the variable s, so the first time through the loop, the code s.move() runs the move() method for the first element in the array, then the next time through the loop, s.move() runs the move() method for the second element in the array, etc. The two statements inside the block run for each element of the array until the end of the array. This way of accessing each element in an array of objects is used for the remainder of the book. + ++ Two-dimensional Arrays+Data can also be stored and retrieved from arrays with more than one dimension. Using the example from the beginning of this chapter, the data points for the chart are put into a 2D array, where the second dimension adds a gray value: + + |
+
|
+ + |
+
|
+ +A 2D array is essentially a list of 1D arrays. It must first be declared, then created, and then the values can be assigned just as in a 1D array. The following syntax converts the diagram above into to code: + +
+int[][] x = { {50, 0}, {61,204}, {83,51}, {69,102}, {71, 0},
+{50,153}, {29, 0}, {31,51}, {17,102}, {39,204} };
+
+println(x[0][0]); // Prints "50"
+println(x[0][1]); // Prints "0"
+println(x[4][2]); // ERROR! This element is outside the array
+println(x[3][0]); // Prints "69"
+println(x[9][1]); // Prints "204"
+
++This sketch shows how it all fits together. + + |
+
+
+ |
+
+
+int[][] x = { {50, 0}, {61,204}, {83,51}, {69,102},
+{71, 0}, {50,153}, {29, 0}, {31,51},
+{17,102}, {39,204} };
+
+void setup() {
+ size(100, 100);
+}
+void draw() {
+ for (int i = 0; i < x.length; i++) {
+ fill(x[i][1]);
+ rect(0, i*10, x[i][0], 8);
+ }
+}
+
+ |
+
|
+ +It is possible to continue and make 3D and 4D arrays by extrapolating these techniques. However, multidimensional arrays can be confusing, and often it is a better idea to maintain multiple 1D or 2D arrays. + + |
+
-
| Does 0-255 seem arbitary to you? -Color for a given shape needs to be stored in the computer's memory. This memory is just a long sequence of 0's and 1's (a whole bunch of on or off switches.) -Each one of these switches is a bit, eight of them together is a byte. Imagine if we had eight bits (one byte) in sequence - how many ways can we -configure these switches? The answer is (and doing a little research into binary numbers will prove this point) 256 possibilities, or a range -of numbers between 0 and 255. We will use eight bit color for our grayscale range and 24 bit for full color (eight bits for each of the red, green, and blue color components). - |
|
+
+ + This tutorial is from the book Learning Processing by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please let us know. + + +Color+Daniel Shiffman+ ++ In the digital world, when we want to talk about a color, precision is required. Saying "Hey, can you make that circle bluish-green?" will not do. Color, rather, is defined as a range of numbers. Let's start with the simplest case: black & white or grayscale. 0 means black, 255 means white. In between, every other number—50, 87, 162, 209, and so on—is a shade of gray ranging from black to white. + + +
+ Does 0-255 seem arbitrary to you? + By adding the stroke() and fill() functions before something is drawn, we can set the color of any given shape. There is also the function background(), which sets a background color for the window. Here's an example. + -background(255); // Setting the background to white -stroke(0); // Setting the outline (stroke) to black -fill(150); // Setting the interior of a shape (fill) to grey -rect(50,50,75,100); // Drawing the rectangle +size(200, 200); +background(255); // Setting the background to white +stroke(0); // Setting the outline (stroke) to black +fill(150); // Setting the interior of a shape (fill) to grey +rect(50,50,75,100); // Drawing the rectangle- - -Stroke or fill can be eliminated with the functions: noStroke() and noFill(). -Our instinct might be to say "stroke(0)" for no outline, however, it is important to remember that 0 is not "nothing", but rather denotes the color black. -Also, remember not to eliminate both - with noStroke() and noFill(), nothing will appear! - -In addition, if we draw two shapes, Processing will always use the most recently specified stroke and fill, reading the code from top to bottom. - -
-
-RGB Color-
-Remember finger painting? By mixing three "primary" colors, any color could be generated. Swirling all colors together resulted in a muddy brown. The more paint you added, the darker it got.
-Digital colors are also constructed by mixing three primary colors, but it works differently from paint. First, the primaries are diff erent: red, green, and blue (i.e., "RGB" color).
-And with color on the screen, you are mixing light, not paint, so the mixing rules are different as well.
-
-This assumes that the colors are all as bright as possible, but of course, you have a range of color available, so some red plus some green plus some blue equals gray, and a bit of -red plus a bit of blue equals dark purple. While this may take some getting used to, the more you program and experiment with RGB color, the more it will become instinctive, -much like swirling colors with your fi ngers. And of course you can't say "Mix some red with a bit of blue," you have to provide an exact amount. As with grayscale, the individual color -elements are expressed as ranges from 0 (none of that color) to 255 (as much as possible), and they are listed in the order R, G, and B. You will get the hang of RGB color mixing -through experimentation, but next we will cover some code using some common colors. - -
--Example: RGB color + + + Stroke or fill can be eliminated with the functions: noStroke() and noFill(). Our instinct might be to say "stroke(0)" for no outline, however, it is important to remember that 0 is not "nothing", but rather denotes the color black. Also, remember not to eliminate both—with noStroke() and noFill(), nothing will appear! + + ++ In addition, if we draw two shapes, Processing will always use the most recently specified stroke and fill, reading the code from top to bottom. + + +RGB Color+ ++ Remember finger painting? By mixing three "primary" colors, any color could be generated. Swirling all colors together resulted in a muddy brown. The more paint you added, the darker it got. Digital colors are also constructed by mixing three primary colors, but it works differently from paint. First, the primaries are diff erent: red, green, and blue (i.e., "RGB" color). And with color on the screen, you are mixing light, not paint, so the mixing rules are different as well. + + +
+
+
+ This assumes that the colors are all as bright as possible, but of course, you have a range of color available, so some red plus some green plus some blue equals gray, and a bit of red plus a bit of blue equals dark purple. While this may take some getting used to, the more you program and experiment with RGB color, the more it will become instinctive, much like swirling colors with your fi ngers. And of course you can't say "Mix some red with a bit of blue," you have to provide an exact amount. As with grayscale, the individual color elements are expressed as ranges from 0 (none of that color) to 255 (as much as possible), and they are listed in the order R, G, and B. You will get the hang of RGB color mixing through experimentation, but next we will cover some code using some common colors. + + +
+
+ Example: RGB color
+
-background(255); -noStroke(); +background(255); +noStroke(); -// Bright red -fill(255,0,0); -ellipse(20,20,16,16); +// Bright red +fill(255,0,0); +ellipse(20,20,16,16); -// Dark red -fill(127,0,0); -ellipse(40,20,16,16); +// Dark red +fill(127,0,0); +ellipse(40,20,16,16); -// Pink (pale red) -fill(255,200,200); -ellipse(60,20,16,16); +// Pink (pale red) +fill(255,200,200); +ellipse(60,20,16,16);- -Processing also has a color selector to aid in choosing colors. Access this via TOOLS (from the menu bar) → COLOR SELECTOR. - -
-
-Color Transparency-
-In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image.
- + Processing also has a color selector to aid in choosing colors. Access this via Tools (from the menu bar) → Color Selector. + + +
+
+
+
+ Color Transparency+ ++ In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image. + + ++ It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, Processing takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" glasses, this is where you would begin.) + + ++ Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque). + + +
+
+ Example: Alpha transparency
+
-size(200,200); -background(0); -noStroke(); +size(200,200); +background(0); +noStroke(); -// No fourth argument means 100% opacity. -fill(0,0,255); -rect(0,0,100,200); +// No fourth argument means 100% opacity. +fill(0,0,255); +rect(0,0,100,200); -// 255 means 100% opacity. -fill(255,0,0,255); -rect(0,0,200,40); +// 255 means 100% opacity. +fill(255,0,0,255); +rect(0,0,200,40); -// 75% opacity. -fill(255,0,0,191); -rect(0,50,200,40); +// 75% opacity. +fill(255,0,0,191); +rect(0,50,200,40); -// 55% opacity. -fill(255,0,0,127); -rect(0,100,200,40); +// 55% opacity. +fill(255,0,0,127); +rect(0,100,200,40); -// 25% opacity. -fill(255,0,0,63); -rect(0,150,200,40); +// 25% opacity. +fill(255,0,0,63); +rect(0,150,200,40);- Custom Color Ranges-
-RGB color with ranges of 0 to 255 is not the only way you can handle color in Processing. Behind the scenes in the computer's memory, color is always
-talked about as a series of 24 bits (or 32 in the case of colors with an alpha). However, Processing will let us think about color any way we like, and
-translate our values into numbers the computer understands. For example, you might prefer to think of color as ranging from 0 to 100 (like a percentage).
-You can do this by specifying a custom colorMode().
- Custom Color Ranges+ ++ RGB color with ranges of 0 to 255 is not the only way you can handle color in Processing. Behind the scenes in the computer's memory, color is always talked about as a series of 24 bits (or 32 in the case of colors with an alpha). However, Processing will let us think about color any way we like, and translate our values into numbers the computer understands. For example, you might prefer to think of color as ranging from 0 to 100 (like a percentage). You can do this by specifying a custom colorMode(). + +-colorMode(RGB,100); +colorMode(RGB,100);- -The above function says: "OK, we want to think about color in terms of red, green, and blue. The range of RGB values will be from 0 to 100." - -Although it is rarely convenient to do so, you can also have different ranges for each color component: - + + + The above function says: "OK, we want to think about color in terms of red, green, and blue. The range of RGB values will be from 0 to 100." + + ++ Although it is rarely convenient to do so, you can also have different ranges for each color component: + +-colorMode(RGB,100,500,10,255); +colorMode(RGB,100,500,10,255);- -Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue from 0 to 10, and alpha from 0 to 255." - -Finally, while you will likely only need RGB color for all of your programming needs, you can also specify colors in the HSB (hue, saturation, and brightness) mode. -Without getting into too much detail, HSB color works as follows: - -
--
-With colorMode() you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%). - - - - - This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This tutorial is from the book, Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright © 2008 Elsevier Inc. All rights reserved. + ++ Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue from 0 to 10, and alpha from 0 to 255." + + ++ Finally, while you will likely only need RGB color for all of your programming needs, you can also specify colors in the HSB (hue, saturation, and brightness) mode. Without getting into too much detail, HSB color works as follows: + + +
+
+
+ With colorMode() you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%). + + - |
+
|
- This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. - --Download the files from this tutorial. - - -- - -This tutorial introduces you to the three types of curves in Processing: -arcs, spline curves, and Bézier curves. - +If you see any errors in this tutorial or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. + +Curves+J David Eisenberg+ + + ++ This short tutorial introduces you to the three types of curves in Processing: arcs, spline curves, and Bézier curves. + -Arcs+Arcs--Arcs are the simplest curves to draw. Processing defines an arc as a section of an ellipse. -You call the function with these parameters: + + + Arcs are the simplest curves to draw. Processing defines an arc as a section of an ellipse. You call the function with these parameters: -arc(x, y, width, height, start, stop); - ++arc(x, y, width, height, start, stop);-
+ +
Here is an example that shows a
-void setup()
-{
- size(200, 200);
- background(255);
- smooth();
- stroke(0);
- curve(40, 40, 80, 60, 100, 100, 60, 120);
-
- noStroke();
- fill(255, 0, 0);
- ellipse(40, 40, 3, 3);
- fill(0, 0, 255, 192);
- ellipse(100, 100, 3, 3);
- ellipse(80, 60, 3, 3);
- fill(255, 0, 0);
- ellipse(60, 120, 3, 3);
-}
+
Spline CurvesContinuous Spline Curves-+
In isolation, a single Continuous Spline CurvesbeginShape() and endShape() functions.
-+ Here is a curve connecting the points (40, 40), (80, 60), (100, 100), (60, 120), and (50, 150). In common usage, people use the first point of the curve as the first control point and the last point -of the curve as the last control point. The lower diagram -shows the tangents at the intermediate points. +of the curve as the last control point. -
-
-![]() -
-void setup()
-{
- int[ ] coords = {
- 40, 40, 80, 60, 100, 100, 60, 120, 50, 150
- };
- int i;
-
- size(200, 200);
- background(255);
- smooth();
-
- noFill();
- stroke(0);
- beginShape();
- curveVertex(40, 40); // the first control point
- curveVertex(40, 40); // is also the start point of curve
- curveVertex(80, 60);
- curveVertex(100, 100);
- curveVertex(60, 120);
- curveVertex(50, 150); // the last point of curve
- curveVertex(50, 150); // is also the last control point
- endShape();
-
- // use the array to keep the code shorter;
- // you already know how to draw ellipses!
- fill(255, 0, 0);
- noStroke();
- for (i = 0; i < coords.length; i += 2)
- {
- ellipse(coords[i], coords[i + 1], 3, 3);
- }
-
-}
+
-Here is a program that displays a Bézier curve -and its control points. - -
+
+ Here is a program that displays a Bézier curve and its control points. + + +
+
-void setup( )
-{
- size(150, 150);
- background(255);
- smooth();
-
- ellipse(50, 75, 5, 5); // endpoints of curve
- ellipse(100, 75, 5, 5);
- fill(255, 0, 0);
- ellipse(25, 25, 5, 5); // control points
- ellipse(125, 25, 5, 5);
- noFill();
- stroke(0);
- bezier(50, 75, 25, 25, 125, 25, 100, 75);
+void setup() {
+ size(150, 150);
+ background(255);
+ ellipse(50, 75, 5, 5); // endpoints of curve
+ ellipse(100, 75, 5, 5);
+ fill(255, 0, 0);
+ ellipse(25, 25, 5, 5); // control points
+ ellipse(125, 25, 5, 5);
+ noFill();
+ stroke(0);
+ bezier(50, 75, 25, 25, 125, 25, 100, 75);
}
-
-
-
+ While it is difficult to visualize how the control points affect a
-Continuous Bézier Curves-
-Just as bezierVertex(cpx1, cpy1, cpx2, cpy2, x, y); +
+ +
So, to draw the previous example using void setup( )
-{
- size(150, 150);
- background(255);
- smooth();
- // don't show where control points are
- noFill();
- stroke(0);
- beginShape();
- vertex(50, 75); // first point
- bezierVertex(25, 25, 125, 25, 100, 75);
- endShape();
+
Summary+ +
- - This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. - |
|
+
+ + This tutorial is from the book Learning Processing by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please let us know. + + +Data+Daniel Shiffman+ + ++ This tutorial picks up where the Strings and Drawing Text tutorial leaves off and examines how to use String objects as the basis for reading and writing data. We'll start by learning more sophisticated methods for manipulating Strings, searching in them, chopping them up, and joining them together. Afterwards, we'll see how these skills allow us to use input from data sources, such as text files, web pages, xml feeds, and 3rd party APIs and take a step into the world of data visualization. + + +Manipulating Strings+ ++ In Strings and Drawing Text, we touched on a few of the basic functions available in the Java String class, such as charAt(), toUpperCase(), equals(), and length(). These functions are documented on the Processing reference page for Strings. Nevertheless, in order to perform some more advanced data parsing techniques, we'll need to explore some additional String manipulation functions documented in the Java API. + + ++ Let's take a closer look at the following two String functions: indexOf() and substring(). indexOf() locates a sequence of characters within a String. It takes one argument, a search String, and returns a numeric value that corresponds to first occurrence of the search string inside of the string being searched. + + ++String search = "def"; +String toBeSearched = "abcdefghi"; +int index = toBeSearched.indexOf(search); // The value of index in this example is 3. ++ + + Strings are just like arrays, in that the first character is index number zero and the last character is the length of the string minus one. If the search string cannot be found, indexOf() returns -1. This is a good choice because -1 is not a legitimate index value and therefore can indicate "not found." After finding a search phrase within a String, we might want to separate out part of the string, saving it in a different variable. A part of a string is known as "substring." The substring() function which takes two arguments, a start index and an end index and returns the substring in between the two indices. + + ++String alphabet = "abcdefghi"; +String sub = alphabet.substring(3,6); // The String sub is now "def". ++ + Note that the substring begins at the specified start index (the first argument) and extends to the character at end index (the second argument) minus one. I know. I know. Wouldn't it have been easier to just take the substring from the start index all the way to the end index? While this might initially seem true, it's actually quite convenient to stop at end index minus one. For example, if you ever want to make a substring that extends to the end of a string, you can simply go all the way to thestring.length(). In addition, with end index minus one marking the end, the length of the substring is easily calculated as end index minus begin index. + +Splitting and Joining Strings+ +In Strings and Drawing Text, we saw how strings can be joined together (referred to as "concatenation") using the "+" operator. Let's review with a example that uses concatenation to get user input from a keyboard. Processing has two additional functions that make joining strings (or the reverse, splitting them up) easy. In sketches that involve parsing data from a file or the web, we will often be presented that data in the form of an array of strings or as one long string. Depending on what we want to accomplish, it's useful to know how to switch between these two modes of storage. This is where these two new functions, split() and join(), will come in handy. + +"one long string or array of strings" ←→ {"one", "long", "string", "or" ,"array", "of", "strings"} + +Let's take a look at the split() function. split() separates a longer string into an array of strings, based on a split character known as the delimiter. It takes two arguments, the string to be split and the delimiter. (The delimiter can be a single character or a string. Note that in the code below the period is not set as a delimiter and therefore will be included in the last string in the array: "dog." + +
+// Splitting a String based on spaces
+String spaceswords = "The quick brown fox jumps over the lazy dog.";
+String[] list = split(spaceswords, " ");
+for (int i = 0; i < list.length; i++) {
+ println(list[i] + " " + i);
+}
+
+
+If you want to use more than one delimiter to split up a text, you must use the Processing function splitTokens(). splitTokens() works identically to split() with one exception: any character that appears in the String qualifies as a delimiter. In the code below, the period is set as a delimiter and therefore will not be included in the last spot in the array: "dog" + +
+// Splitting a String based on a multiple delimiters
+String stuff = "hats & apples, cars + phones % elephants dog.";
+String[] list = splitTokens(stuff, " &,+.");
+for (int i = 0; i < list.length; i++) {
+ println(list[i] + " " + i);
+}
+
+
+If we are splitting numbers in a String the resulting array can be converted into an integer array with Processing's int() function. Numbers in a string are not numbers and cannot be used in mathematical operations unless we convert them first. + +
+// Calculate sum of a list of numbers in a String
+String numbers = "8,67,5,309";
+// Converting the String array to an int array
+int[] list = int(split(numbers, ','));
+int sum = 0;
+for (int i = 0; i < list.length; i++) {
+ sum = sum + list[i];
+}
+println(sum);
+
+
+The reverse of split() is join(). join() takes an array of Strings and joins them together into one long string. The join() function also takes two arguments, the array to be joined and a separator. The separator can either be a single character or a String of characters. + +Consider the following array: + +
+String[] lines = {"It", "was", "a", "dark", "and", "stormy", "night."};
+
+
+Using the + operator along with a for loop, we can join an array of strings together as follows: + +
+// Manual Concatenation
+String onelongstring = "";
+for (int i = 0; i < lines.length; i++) {
+ onelongstring = onelongstring + lines[i] + " ";
+}
+
+
+The join() function, however, allows us to bypass this process achieving the same result in only one line of code. + ++// Using Processing's join() +String onelongstring = join(lines," "); ++ + Reading and Writing Text Files+ +Data can come from many different places: web sites, news feeds, databases, etc. To start, we'll demonstrate how to work with the simplest means of data retrieval data: reading from a text file.Text files can be used as a very simple database (we could store settings for a program, a list of high scores, numbers for a graph, etc.) or to simulate a more complex data source. + +In order to create a text file, you can use any simple text editor. Windows Notepad or Mac OSX TextEdit will do, just make sure you format the file as "plain text." It is also advisable to name the text files with the ".txt" extension, just to avoid any confusion. And just as with image files, these text files should be placed in the sketch's "data" directory in order for them to be recognized by the Processing sketch. + +Once the text file is in place, Processing's loadStrings() function is used to read the content of the file into an String array. The individual lines of text in the file each become an individual element in the array. + +
+
+
+// This code will print all the lines from the source text file.
+String[] lines = loadStrings("file.txt");
+println("there are " + lines.length + " lines");
+println(lines);
+
+
+Text from a file can be used to generate a simple visualization. Take the following data file. + +
+
+Here, we can load the numbers separated by commas and split them into an array of ints used to set color and height of rectangles. + +
+int[] data;
+
+void setup() {
+ size(200,200);
+ // Load text file as a string
+ String[] stuff = loadStrings("data.txt");
+ // Convert string into an array of integers using ',' as a delimiter
+ data = int(split(stuff[0],','));
+}
+
+void draw() {
+ background(255);
+ stroke(0);
+ for (int i = 0; i < data.length; i++) {
+ fill(data[i]);
+ rect(i*20,0,20,data[i]);
+ }
+}
+
+
+Text can also be written back to a data file with saveStrings(). saveStrings() writes an array of strings to a file, one line per string. + +
+String words = "apple bear cat dog";
+String[] list = split(words, ' ');
+
+// Writes the strings to a file, each on a separate line
+saveStrings("nouns.txt", list);
+
+
+There are cases, however, where you don't want to write a text file all at once. Rather, you want to continuously append to a file over time. This can be achieved with the PrintWriter class. Take the following example which writes saves mouseX and mouseY to a text file for each cycle through draw(), quitting when you press a key. + +
+PrintWriter output;
+
+void setup() {
+ // Create a new file in the sketch directory
+ output = createWriter("positions.txt");
+}
+
+void draw() {
+ point(mouseX, mouseY);
+ output.println(mouseX); // Write the coordinate to the file
+}
+
+void keyPressed() {
+ output.flush(); // Writes the remaining data to the file
+ output.close(); // Finishes the file
+ exit(); // Stops the program
+}
+
+
+Tabular Data+ +You may have noticed that the graphing example above loads a text file with numbers separated by commas. Processing includes a Table class which will load a comma-separated (CSV) or tab-separated (TSV) file and automatically parse the data into columns and rows for you. This is a great deal more convenient than struggling to manually parse large data files with split(). It works as follows. Let's say you have a data file that looks like: + +
+
+Instead of saying: + +
+String[] stuff = loadStrings("data.csv");
+
+
+We can now say: + +
+Table table = loadTable("data.csv");
+
+
+Now we've missed an important detail. Take a look at the data.csv text file above. Notice how the first line of text is not the data itself, but rather a "header row." This row includes labels that describe the data included in each subsequent row. The good news is that Processing can automatically interpret and store the headers for you, if you pass in the option "header" when loading the table. (In addition to "header" there are other options you can specify. For example if your file is called data.txt but is comma separated data you can pass in the option "csv". If it also has a header row, then you can specifiy both options like so: "header,csv"). A full list of options can be found on the loadTable() documentation page. + +
+Table table = loadTable("data.csv","header");
+
+
+Now that the table is loaded, we can look at how we grab individual pieces of data or iterate over the entire table. Let's look at the data visualized as a grid. + +
+
+In the above grid we can see that the data is organized in terms of rows and columns. One way to access the data would be to therefore request a value by its numeric row and column location (with zero being the first row or first column). This is similar to accessing a pixel color at a given (x, y) location though in this case the y position (i.e. row) comes first. The following code requests a piece of data at a given (row, column) location. + ++int val1 = table.getInt(2, 1); // val now has the value 235 +float val2 = table.getFloat(3, 2); // val2 now has the value 44.758068 +String s = table.getString(0, 3); // s now has the value "Happy" ++ + While the numeric index is sometimes useful, it's generally going to be more convenient to access each piece of data by the column name. For example, we could pull out a specific row from the Table. + ++TableRow row = table.getRow(2); // Gets the third row (index 2) ++ +Note in the above line of code that a Table object refers to the entire table of data while a TableRow object handles an individual row of data within the Table. + +Once we have the TableRow object, we can ask for data from some or all of the columns. + +
+int x = row.getInt("x"); // x has the value 273
+int y = row.getInt("y"); // y has the value 235
+float d = row.getFloat("diameter"); // d has the value 61.14072
+String s = row.getString("name"); // s has the value "Joyous"
+
+
+The method getRow() returns a single row from the table. If you want to grab all the rows and iterate over them you can do so with the method rows().
+
+
+for (TableRow row : table.rows()) {
+ float x = row.getFloat("x");
+ float y = row.getFloat("y");
+ float d = row.getFloat("diameter");
+ String n = row.getString("name");
+ // Do something with the data of each row
+}
+
+
+If you want to search for a select number of rows within the table, you can do so with findRows() and matchRows().
+
+In addition to being read, Table objects can be altered or created on the fly while a sketch is running. Cell values can be adjusted, rows can be removed, and new rows can be added. For example, to set new values in a cell there are functions setInt(), setFloat(), and setString(). + +
+// Update the value of column "x" to mouseX in a given TableRow.
+row.setInt("x",mouseX);
+
+
+To add a new row to a Table, simply call the method addRow() and set the values of each column. + +
+// Create a new row
+TableRow row = table.addRow();
+// Set the values of that row
+row.setFloat("x", mouseX);
+row.setFloat("y", mouseY);
+row.setFloat("diameter", random(40, 80));
+row.setString("name", "new label");
+
+
+To delete a row to a Table, simply call the method removeRow() and pass in the numeric index of the row you would like removed. The following code for example, removes the first row whenever the size of the table is greater than ten rows. + +
+// If the table has more than 10 rows
+if (table.getRowCount() > 10) {
+ // Delete the first row
+ table.removeRow(0);
+}
+
+
+For an example that creates objects from and saves objects to a Table, take a look at LoadSaveTable under Topics --> Advanced Data. + +XML Data+ +For grabbing data from the web, an XML (Extensible Markup Language) feed is an excellent option (if available). Unlike HTML (which is designed to make content vieweable by a human's eyes) XML is designed to make content viewable by a computer and facilitate the sharing of data across different systems. + +XML organizes information in a tree structure. Let's imagine a list of students. Each student has an id number, name, address, e-mail, and telephone number. Each student's address has a city, state, and zip code. An XML tree for this dataset might look like the following: + +
+<?xml version="1.0" encoding="UTF-8"?> +<students> + <student> + <id>001</id> + <name>Daniel Shiffman</name> + <phone>555-555-5555</phone> + <email>daniel@shiffman.net</email> + <address> + <street>123 Processing Way</street> + <city>Loops</city> + <state>New York</state> + <zip>01234</zip> + </address> + </student> + <student> + <id>002</id> + <name>Zoog</name> + <phone>555-555-5555</phone> + <email>zoog@planetzoron.uni</email> + <address> + <street>45.3 Nebula 5</street> + <city>Boolean City</city> + <state&tt;Booles</state> + <zip>12358</zip> + </address> + </student> +</students> ++ + Note the similarities to object-oriented programming. We could think of the XML tree in the following terms. The XML document represents an array of student objects. Each student object has multiple pieces of information, an id, a name, a phone number, an e-mail address, and a mailing address. The mailing address is also an object that also has multiple pieces of data, such as street, city, state, and zip. + +Let's look at Yahoo's XML feed for weather data. Here is the raw XML source (Note I have edited it for simplification purposes). + ++<?xml version="1.0" encoding="UTF-8" standalone="yes" ?> +<rss version="2.0" xmlns:yweather="http://xml.weather.yahoo.com/ns/rss/1.0"> + <channel> + <item> + <title>Conditions for New York, NY at 3:51 pm EST</title> + <geo:lat>40.67</geo:lat> + <geo:long>-73.94</geo:long> + <link>http://xml.weather.yahoo.com/forecast/USNY0996_f.html</link> + <pubDate>Mon, 20 Feb 2006 3:51 pm EST</pubDate> + <yweather:condition text="Fair" code="34" temp="35" date="Mon, 20 Feb 2006 3:51 pm EST"/> + <yweather:forecast day="Mon" date="20 Feb 2006" low="25" high="37" text="Clear" code="31"/> + </item> + </channel> +</rss> ++ + And here is the data mapped in the tree structure. + +
You may be wondering what the top level "RSS" is all about. Yahoo's XML weather data is provided in RSS format. RSS stands for "Really Simple Syndication" and is a standardized XML format for syndicating web content (such as news articles, etc.) + +Now that we have a handle on the tree structure, we should look at the specifics inside that structure. With the exception of the first line (which simply indicates that this page is XML formatted), this XML document contains a nested list of elements, each with a start tag, i.e. <channel> and an end tag, i.e. </channel>. Some of these elements have content between the tags: + ++<title>Conditions for New York, NY at 3:51 pm EST</title> ++ + and some have attributes (formatted by attribute name equals attribute value in quotes): + ++<yweather:condition text="Fair" code="34" temp="35" date="Mon, 20 Feb 2006 3:51 pm EST"/> ++ + Knowing this format, we could certainly be clever with our use of split(), indexOf(), and substring() to find the pieces we want in the raw XML. The point here, however, is that because XML is a standard format, we don't have to do this. Rather, we can use an XML parser. In Processing, the XML parser is called just that: XML. + +
+XML xml = loadXML("http://xml.weather.yahoo.com/forecastrss?p=10003");
+
+
+Here, instead of loadStrings() or loadTable(), we're now calling loadXML() and passing in the address (URL or local file) of our XML document. An XML object represents one element of an XML tree. When a document is first loaded, that XML object is always the root element. Referring back to XML tree diagram, we see that we can find the current temperature via the following path: + +
We could translate the above into code as follows: + +
+XML root = loadXML("http://xml.weather.yahoo.com/forecastrss?p=10003"); // Step 1
+XML channel = root.getChild("channel"); // Step 2
+XML item = channel.getChild("item"); // Step 3
+XML yweather = item.getChild("yweather:condition"); // Step 4
+int temperature = yweather.getInt("temp"); // Step 5
+
+
+This is a bit long-winded, however, and so can be compressed down into one (or three as below) lines of code. + +
+XML root = loadXML(http://xml.weather.yahoo.com/forecastrss?p=10003); // Step 1
+XML forecast = root.getChild("channel").getChild("item").getChild("yweather:condition"); // Steps 2-4
+int temperature = forecast.getInt("temp"); // Step 5
+
+
+Finally, the second line of code above can be further condensed to:
+
+
+XML forecast = xml.getChild("channel/item/yweather:condition"); // Steps 2-4
+
+
+It should also be noted that we're accessing the child nodes by their name (i.e. "channel", "item", etc.), but they can also be accessed numerically via an index (starting at zero, same as an array). This is convenient when looping over a list of children. In LoadSaveTable, we used a series of comma separated values in a text file to store information related to Bubble objects. An XML document can also be used in the same manner. Consider the following XML document: + ++<?xml version="1.0" encoding="UTF-8"?> +<bubbles> + <bubble> + <position x="160" y="103"/> + <diameter>43.19838</diameter> + <label>Happy</label> + </bubble> + <bubble> + <position x="372" y="137"/> + <diameter>52.42526</diameter> + <label>Sad</label> + </bubble> + <bubble> + <position x="273" y="235"/> + <diameter>61.14072</diameter> + <label>Joyous</label> + </bubble> + <bubble> + <position x="121" y="179"/> + <diameter>44.758068</diameter> + <label>Melancholy</label> + </bubble> +</bubbles> ++ + In the above XML, the root element is "bubbles" which has four children. Each child "bubble" has 3 children, "position", "diameter", and "label." The "position" element has two attributes, "x" and "y." To access the list of all XML nodes "bubble" we can use the getChildren() method, passing in the name "bubble" + +
+// Load an XML document
+XML xml = loadXML("bubbles.xml");
+
+// Get all the child elements
+XML[] children = xml.getChildren("bubble");
+
+
+Once we have the array of XML objects, we can iterate over them, accessing the individual pieces of data for each "bubble". Notice how the syntax for getting XML attributes (in this case, "x" and "y" of the position element is slightly different than pulling content directly from an element (in this case, "diameter" and "label"). + +
+for (int i = 0; i < bubbles.length; i++) {
+
+ // The position element has two attributes: x and y
+ XML positionElement = children[i].getChild("position");
+ // Note how with attributes we can get an integer or float via getInt() and getFloat()
+ float x = positionElement.getInt("x");
+ float y = positionElement.getInt("y");
+
+ // The diameter is the content of the child named "diamater"
+ XML diameterElement = children[i].getChild("diameter");
+ // Note how with the content of an XML node, we retrieve via getIntContent() and getFloatContent()
+ float diameter = diameterElement.getFloatContent();
+
+ // The label is the content of the child named "label"
+ XML labelElement = children[i].getChild("label");
+ String label = labelElement.getContent();
+}
+
+
+XML elements can be added and removed from the XML tree with the addChild() and removeChild() methods. + +For the full example that creates objects from and saves objects to an XML document, take a look at LoadSaveXML under Topics --> Advanced Data. + +Threads+ +You are likely familiar with the idea of writing a program that follows a specific sequence of steps -- setup() first then draw() over and over and over again! A Thread is also a series of steps with a beginning, a middle, and an end. A Processing sketch is a single thread, often referred to as the "Animation" thread. Other threads sequences, however, can run independently of the main Processing sketch. In fact, you can launch any number of threads at one time and they will all run concurrently. + +Processing does this all the time, whenever you write an event callback, such as serialEvent(), or captureEvent(), etc. these functions are triggered by a different thread running behind the scenes, and they alert Processing whenever they have something to report. This is useful whenever you need to perform a task that takes too long and would slow down the main animation's frame rate, such as grabbing data from the network (XML, database, etc.) If a separate thread gets stuck or has an error, the entire program won't grind to a halt, since the error only stops that individual thread. To create independent, asynchronous threads, you can use the thread() function built into Processing. + +
+void setup() {
+ size(200,200);
+ thread("someFunction");
+}
+
+void draw() {
+
+}
+
+void someFunction() {
+ // This function will run as a thread when called via
+ // thread("someFunction") as it was in setup!
+}
+
+
+The thread() function receives a String as an argument. The String should match the name of the function you want to run as a thread. This is especially useful in sketches that grab data for the web. Rather than have the animation freeze while the sketch is waiting to retrieve data, the sketch can continue to loop through draw() updating the data when the thread is completed. In these cases, a boolean variable can be useful to track the status of the thread. + ++boolean loading = false; ++ + The function that loads the data can then set loading equal to true at the start and false at the end. + +
+void loadData() {
+ loading = true;
+
+ ///////////////////////////////////
+ // All of the data retrival code //
+ ///////////////////////////////////
+
+ loading = false;
+}
+
+
+In draw(), you can choose to display something to indicate the thread is running (when loading equals true). + +
+void draw() {
+ if (loading) {
+ // Draw something to indicate loading
+ }
+}
+
+
+
+Two examples that follow this methodology can be found under Topics --> Advanced Data in the Processing examples. + +While using the thread() function is a very simple way of getting an independent thread, it should be noted that it is somewhat limited. Being able to make a thread object is a great deal more powerful, and this can be done by extending the Java Thread class. + + + |
+
-
|
+
+ + This tutorial is from the book Learning Processing, 2nd Edition by Daniel Shiffman, published by Morgan Kaufmann, © 2015 Elsevier Inc. All rights reserved. If you see any errors or have comments, please let us know. + -This tutorial picks up where the Strings and Drawing Text tutorial leaves off and examines how to use String objects as the basis for reading and writing data. We'll start by learning more sophisticated methods for manipulating Strings, searching in them, chopping them up, and joining them together. Afterwards, we'll see how these skills allow us to use input from data sources, such as text files, web pages, xml feeds, and 3rd party APIs and take a step into the world of data visualization. +Data+Daniel Shiffman-Manipulating Strings-In Strings and Drawing Text, we touched on a few of the basic functions available in the Java String class, such as charAt(), toUpperCase(), equals(), and length(). These functions are documented on the Processing reference page for Strings. Nevertheless, in order to perform some more advanced data parsing techniques, we'll need to explore some additional String manipulation functions documented in the Java API. ++ This tutorial picks up where the Strings and Drawing Text tutorial leaves off and examines how to use String objects as the basis for reading and writing data. We'll start by learning more sophisticated methods for manipulating Strings, searching in them, chopping them up, and joining them together. Afterwards, we'll see how these skills allow us to use input from data sources, such as text files, web pages, xml feeds, and 3rd party APIs and take a step into the world of data visualization. + -Let's take a closer look at the following two String functions: indexOf() and substring(). indexOf() locates a sequence of characters within a String. It takes one argument, a search String, and returns a numeric value that corresponds to first occurrence of the search string inside of the string being searched. +Manipulating Strings+
+ In Strings and Drawing Text, we touched on a few of the basic functions available in the Java String, such as charAt(), toUpperCase(), equals(), and length(). These functions are documented on the Processing reference page for Strings. Nevertheless, in order to perform some more advanced data parsing techniques, we'll need to explore some additional String manipulation functions documented in the Java API.
+ String search = "def"; String toBeSearched = "abcdefghi"; int index = toBeSearched.indexOf(search); // The value of index in this example is 3.- Strings are just like arrays, in that the first character is index number zero and the last character is the length of the string minus one. If the search string cannot be found, indexOf() returns -1. This is a good choice because -1 is not a legitimate index value and therefore can indicate "not found." After finding a search phrase within a String, we might want to separate out part of the string, saving it in a different variable. A part of a string is known as "substring." The substring() function which takes two arguments, a start index and an end index and returns the substring in between the two indices. - + Strings are just like arrays, in that the first character is index number zero and the last character is the length of the string minus one. If the search string cannot be found, indexOf() returns -1. This is a good choice because -1 is not a legitimate index value in the string itself, and therefore can indicate "not found." There are no negative indices in a string of characters or in an array. ++ After finding a search phrase within a string, we might want to separate out part of the string, saving it in a different variable. A part of a string is known as a substring and substrings are made with the substring() function which takes two arguments, a start index and an end index. substring() returns the substring in between the two indices. + String alphabet = "abcdefghi"; -String sub = alphabet.substring(3,6); // The String sub is now "def". +String sub = alphabet.substring(3, 6); // The String sub is now "def".- - Note that the substring begins at the specified start index (the first argument) and extends to the character at end index (the second argument) minus one. I know. I know. Wouldn't it have been easier to just take the substring from the start index all the way to the end index? While this might initially seem true, it's actually quite convenient to stop at end index minus one. For example, if you ever want to make a substring that extends to the end of a string, you can simply go all the way to thestring.length(). In addition, with end index minus one marking the end, the length of the substring is easily calculated as end index minus begin index. + Note that the substring begins at the specified start index (the first argument) and extends to the character at end index (the second argument) minus one. I know, I know. Wouldn’t it have been easier to just take the substring from the start index all the way to the end index? While this might initially seem true, it’s actually quite convenient to stop at end index minus one. For example, if you ever want to make a substring that extends to the end of a string, you can simply go all the way to thestring.length(). In addition, with end index minus one marking the end, the length of the substring is easily calculated as end index minus begin index. +Splitting and Joining Strings-In Strings and Drawing Text, we saw how strings can be joined together (referred to as "concatenation") using the "+" operator. Let's review with a example that uses concatenation to get user input from a keyboard. Processing has two additional functions that make joining strings (or the reverse, splitting them up) easy. In sketches that involve parsing data from a file or the web, we will often be presented that data in the form of an array of strings or as one long string. Depending on what we want to accomplish, it's useful to know how to switch between these two modes of storage. This is where these two new functions, split() and join(), will come in handy. - -"one long string or array of strings" ←→ {"one", "long", "string", "or" ,"array", "of", "strings"} - -Let's take a look at the split() function. split() separates a longer string into an array of strings, based on a split character known as the delimiter. It takes two arguments, the string to be split and the delimiter. (The delimiter can be a single character or a string. Note that in the code below the period is not set as a delimiter and therefore will be included in the last string in the array: "dog." - +
+ In Strings and Drawing Text, we saw how strings can be joined together (referred to as "concatenation") using the "+" operator. Let's review with a example that uses concatenation to get user input from a keyboard.
+
+PFont f;
+
+// Variable to store text currently being typed
+String typing = "";
+// Variable to store saved text when return is hit
+String saved = "";
+
+void setup() {
+ size(300, 200);
+ f = createFont("Arial", 16);
+}
+
+void draw() {
+ background(255);
+ int indent = 25;
+
+ // Set the font and fill for text
+ textFont(f);
+ fill(0);
+
+ // Display everything
+ text("Click in this sketch and type. \nHit return to save what you typed.", indent, 40);
+ text(typing, indent, 90);
+ text(saved, indent, 130);
+}
+
+void keyPressed() {
+ // If the return key is pressed, save the String and clear it
+ if (key == '\n') {
+ saved = typing;
+ typing = "";
+ // Otherwise, concatenate the String
+ } else {
+ typing = typing + key;
+ }
+}
+
+ Processing has two additional functions that make joining strings (or the reverse, splitting them up) easy. In sketches that involve parsing data from a file or the web, you might get hold of that data in the form of an array of strings or as one long string. Depending on what you want to accomplish, it’s useful to know how to switch between these two modes of storage. This is where these two new functions, split() and join(), will come in handy.
+
+
+ "one long string or array of strings" ←→ {"one", "long", "string", "or" ,"array", "of", "strings"}
+
+
+ Let’s take a look at the split() function. split() separates a longer string into an array of strings, based on a split character known as the delimiter. It takes two arguments, the String object to be split and the delimiter. (The delimiter can be a single character or a string.) In the code below, the period is not set as a delimiter and therefore will be included in the last string in the array: “dog.” Note how printArray() can be used to print the contents of an array and their corresponding indices to the message console.
-// Splitting a String based on spaces
+// Splitting a string based on spaces
String spaceswords = "The quick brown fox jumps over the lazy dog.";
String[] list = split(spaceswords, " ");
-for (int i = 0; i < list.length; i++) {
- println(list[i] + " " + i);
-}
+printArray(list);
-
-If you want to use more than one delimiter to split up a text, you must use the Processing function splitTokens(). splitTokens() works identically to split() with one exception: any character that appears in the String qualifies as a delimiter. In the code below, the period is set as a delimiter and therefore will not be included in the last spot in the array: "dog" - + Here is an example using a comma as the delimiter (this time passing in a single character: ','.) +
-// Splitting a String based on a multiple delimiters
-String stuff = "hats & apples, cars + phones % elephants dog.";
-String[] list = splitTokens(stuff, " &,+.");
-for (int i = 0; i < list.length; i++) {
- println(list[i] + " " + i);
-}
+// Splitting a string based on commas
+String commaswords = "The,quick,brown,fox,jumps,over,the,lazy,dog.";
+String[] list = split(commaswords, ",");
+printArray(list);
-
-If we are splitting numbers in a String the resulting array can be converted into an integer array with Processing's int() function. Numbers in a string are not numbers and cannot be used in mathematical operations unless we convert them first. - + If you want to use more than one delimiter to split up a text, you must use the Processing function splitTokens(). splitTokens() works identically as split() with one exception: any character that appears in the passed string qualifies as a delimiter.) In the code below, the period is specified as a delimiter and therefore will not be included in the last string in the array: “dog”.+ +// Splitting a String based on multiple delimiters +String stuff = "hats & apples, cars + phones % elephants dog."; +String[] list = splitTokens(stuff, " &,+." ); +printArray(list); ++ If you are splitting numbers in a string, the resulting array can be converted into an integer array with Processing’s int() function. Numbers in a string are not numbers and cannot be used in mathematical operations unless you convert them first.
// Calculate sum of a list of numbers in a String
String numbers = "8,67,5,309";
// Converting the String array to an int array
-int[] list = int(split(numbers, ','));
+int[] list = int(split(numbers, ','));
int sum = 0;
-for (int i = 0; i < list.length; i++) {
+for (int i = 0; i<list.length; i++ ) {
sum = sum + list[i];
}
-println(sum);
+println(sum);
-
-The reverse of split() is join(). join() takes an array of Strings and joins them together into one long string. The join() function also takes two arguments, the array to be joined and a separator. The separator can either be a single character or a String of characters. - -Consider the following array: - + The reverse of split() is join(). join() takes an array of strings and joins them together into one long String object. The join() function also takes two arguments, the array to be joined and a separator. The separator can either be a single character or a string of characters. + + +
+ Consider the following array:
String[] lines = {"It", "was", "a", "dark", "and", "stormy", "night."};
-
-Using the + operator along with a for loop, we can join an array of strings together as follows: - + Using the “+” operator along with afor loop, you can join a string together as follows:
// Manual Concatenation
String onelongstring = "";
for (int i = 0; i < lines.length; i++) {
- onelongstring = onelongstring + lines[i] + " ";
+ onelongstring = onelongstring + lines[i] + " ";
}
-
-The join() function, however, allows us to bypass this process achieving the same result in only one line of code. - + The join() function, however, allows you to bypass this process, achieving the same result in only one line of code.// Using Processing's join() -String onelongstring = join(lines," "); +String onelongstring = join(lines, " ");+ - Reading and Writing Text Files- -Data can come from many different places: web sites, news feeds, databases, etc. To start, we'll demonstrate how to work with the simplest means of data retrieval data: reading from a text file.Text files can be used as a very simple database (we could store settings for a program, a list of high scores, numbers for a graph, etc.) or to simulate a more complex data source. - -In order to create a text file, you can use any simple text editor. Windows Notepad or Mac OSX TextEdit will do, just make sure you format the file as "plain text." It is also advisable to name the text files with the ".txt" extension, just to avoid any confusion. And just as with image files, these text files should be placed in the sketch's "data" directory in order for them to be recognized by the Processing sketch. - -Once the text file is in place, Processing's loadStrings() function is used to read the content of the file into an String array. The individual lines of text in the file each become an individual element in the array. +Dealing with Data-
+ + Data can come from many different places: websites, news feeds, spreadsheets, databases, and so on. Let's say you've decided to make a map of the world's flowers. After searching online you might find a PDF version of a flower encyclopedia, or a spreadsheet of flower genera, or a JSON feed of flower data, or a REST API that provides geolocated lat/lon coordinates, or some web page someone put together with beautiful flower photos, and so on and so forth. The question inevitably arises: “I found all this data; which should I use, and how do I get it into Processing?” + + +
+ If you are really lucky, you might find a Processing library that hands data to you directly with code. Maybe the answer is to just download this library and write some code like:
+import flowers.*;
+void setup() {
+ FlowerDatabase fdb = new FlowerDatabase();
+ Flower sunflower = fdb.findFlower("sunflower");
+ float h = sunflower.getAverageHeight();
+}
+
+ In this case, someone else has done all the work for you. They've gathered data about flowers and built a Processing library with a set of functions that hands you the data in an easy-to-understand format. This library, sadly, does not exist (not yet), but there are some that do. For example, YahooWeather is a library by Marcel Schwittlick that grabs weather data from Yahoo for you, allowing you to write code like weather.getWindSpeed() or weather.getSunrise() and more. There is still plenty of work to do in the case of using a library.
+
+
+ + Let's take another scenario. Say you’re looking to build a visualization of Major League Baseball statistics. You can't find a Processing library to give you the data but you do see everything you’re looking for at mlb.com. If the data is online and your web browser can show it, shouldn't you be able to get the data in Processing? Passing data from one application (like a web application) to another (say, your Processing sketch) is something that comes up again and again in software engineering. A means for doing this is an API or “application programming interface”: a means by which two computer programs can talk to each other. Now that you know this, you might decide to search online for “MLB API”. Unfortunately, mlb.com does not provide its data via an API. In this case you would have to load the raw source of the website itself and manually search for the data you’re looking for. While possible, this solution is much less desirable given the considerable time required to read through the HTML source as well as program algorithms for parsing it. + + ++ Each means of getting data comes with its own set of challenges. The ease of using a Processing library is dependent on the existence of clear documentation and examples. But in just about all cases, if you can find your data in a format designed for a computer (spreadsheets, XML, JSON, etc.), you'll be able to save some time in the day for a nice walk outside. + + ++ One other note worth a mention about working with data. When developing an application that involves a data source, such as a data visualization, it’s sometimes useful to develop with “dummy” or “fake” data. You don't want to be debugging your data retrieval process at the same time as solving problems related to algorithms for drawing. In keeping with my one-step-at-a-time mantra, once the meat of the program is completed with dummy data, you can then focus solely on how to retrieve the actual data from the real source. You can always use random or hard-coded numbers into your code when you’re experimenting with a visual idea and connect the real data later. + +Working with Text Files+ ++ Let's begin by working with the simplest means of data retrieval: reading from a text file. Text files can be used as a very simple database (you could store settings for a program, a list of high scores, numbers for a graph, etc.) or to simulate a more complex data source. + + ++ In order to create a text file, you can use any simple text editor. Windows Notepad or Mac OS X TextEdit will do; just make sure you format the file as “plain text.” It is also advisable to name the text files with the “.txt” extension, to avoid any confusion. And just as with image files, these text files should be placed in the sketch’s “data” directory in order for them to be recognized by the Processing sketch. + +
+ Once the text file is in place, Processing’s loadStrings() function is used to read the content of the file into a String array. The individual lines of text in the file each become an individual element in the array.
+
// This code will print all the lines from the source text file.
String[] lines = loadStrings("file.txt");
-println("there are " + lines.length + " lines");
-println(lines);
+println("There are " + lines.length + " lines.");
+printArray(lines);
-
-Text from a file can be used to generate a simple visualization. Take the following data file. - -
-
-Here, we can load the numbers separated by commas and split them into an array of ints used to set color and height of rectangles. - + To run the code, create a text file called “file.txt,” type a bunch of lines in that file, and place it in your sketch’s data directory.Text from a file can be used to generate a simple visualization. Take the following data file. + + ![]() + +The results of visualizing this data are shown below. + +
+Graphing Comma-Separated Numbers from a Text File
+
int[] data;
void setup() {
- size(200,200);
- // Load text file as a string
- String[] stuff = loadStrings("data.txt");
+ size(200, 200);
+ // Load text file as a String
+ String[] stuff = loadStrings("data.csv");
// Convert string into an array of integers using ',' as a delimiter
- data = int(split(stuff[0],','));
+ data = int(split(stuff[0], ','));
}
void draw() {
background(255);
stroke(0);
- for (int i = 0; i < data.length; i++) {
- fill(data[i]);
- rect(i*20,0,20,data[i]);
+ for (int i = 0; i<data.length; i++) {
+ // Use array of ints to set the color and height of each rectangle.
+ rect(i*20, 0, 20, data[i]);
}
+ noLoop();
}
+ Looking at how to parse a csv file with split() was a nice learning exercise. In truth, dealing with csv files (which can easily be generated from spreadsheet software such as Google docs) is such a common activity that Processing has an entire built-in class called Table to handle the parsing for you.
+
+
+Tabular Data+ ++ A table consists of data arranged as a set of rows and columns, also called “tabular data.” If you've ever used a spreadsheet, this is tabular data. Processing's loadTable() function takes comma-separated (csv) or tab-separated (tsv) values and automatically places the contents into a Table object storing the data in columns and rows. This is a great deal more convenient than struggling to manually parse large data files with split(). It works as follows. Let's say you have a data file that looks like: + ++
+
+
+ Instead of saying:
+String[] stuff = loadStrings("data.csv");
+
+ We can now say:+
+Table table = loadTable("data.csv");
+
+ Now I've missed an important detail. Take a look again at the data.csv text file above. Notice how the first line of text is not the data itself, but rather a header row. This row includes labels that describe the data included in each subsequent row. The good news is that Processing can automatically interpret and store the headers for you, if you pass in the option "header" when loading the table. (In addition to "header", there are other options you can specify. For example, if your file is called data.txt but is comma separated data you can pass in the option "csv". If it also has a header row, then you can specifiy both options like so: "header,csv"). A full list of options can be found on the loadTable() documentation page.+
+Table table = loadTable("data.csv", "header");
+
+ Now that the table is loaded, I can show how you grab individual pieces of data or iterate over the entire table. Let's look at the data visualized as a grid.
+ +
++ In the above grid you can see that the data is organized in terms of rows and columns. One way to access the data, therefore, would be to request a value by its numeric row and column location (with zero being the first row or first column). This is similar to accessing a pixel color at a given (x,y) location, though in this case the y position (row) comes first. The following code requests a piece of data at a given (row, column) location. + +int val1 = table.getInt(2, 1); // val now has the value 235 + +float val2 = table.getFloat(3, 2); // val2 now has the value 44.758068 -+ While the numeric index is sometimes useful, it’s generally going to be more convenient to access each piece of data by the column name. For example, I could pull out a specific row from the Table. + +TableRow row = table.getRow(2); // Gets the third row (index 2) ++ Note in the above line of code that a Table object refers to the entire table of data while a TableRow object handles an individual row of data within the Table. + +
+ Once I have the TableRow object, I can ask for data from some or all of the columns.
-String words = "apple bear cat dog";
-String[] list = split(words, ' ');
+int x = row.getInt("x"); // // x has the value 273
+
+int y = row.getInt("y"); // y has the value 235
-// Writes the strings to a file, each on a separate line
-saveStrings("nouns.txt", list);
+float d = row.getFloat("diameter"); // d has the value 61.14072
+
+String s = row.getString("name"); // s has the value “Joyous”
+ The method getRow() returns a single row from the table. If you want to grab all the rows and iterate over them you can do so in a loop with a counter accessing each row one at a time. The total number of available rows can be retrieved with getRowCount().+
+for (int i = 0; i<table.getRowCount(); i++) {
+
+ // Access each row of the table one at a time, in a loop.
+ TableRow row = table.getRow(i);
+ float x = row.getFloat("x");
+ float y = row.getFloat("y");
+ float d = row.getFloat("diameter");
+ String n = row.getString("name");
-
+ If you want to search for a select number of rows within the table, you can do so with findRows() and matchRows().
+
+
+
+ In addition to being read, Table objects can be altered or created on the fly while a sketch is running. Cell values can be adjusted, rows can be removed, and new rows can be added. For example, to set new values in a cell there are functions setInt(), setFloat(), and setString().
+row.setInt("x", mouseX); // Update the value of column "x" to mouseX in a given TableRow.
+
+ To add a new row to a Table, simply call the method addRow() and set the values of each column.
-PrintWriter output;
+//Create a new row.
+TableRow row = table.addRow();
+
+//Set the values of all columns in that row.
+row.setFloat("x", mouseX);
+row.setFloat("y", mouseY);
+row.setFloat("diameter", random(40, 80));
+row.setString("name", "new label");
+
+ To delete a row, simply call the method removeRow() and pass in the numeric index of the row you would like removed. For example, the following code removes the first row whenever the size of the table is greater than ten rows.+
+// If the table has more than 10 rows
+if (table.getRowCount()>10) {
+
+//Delete the first row (index 0).
+ table.removeRow(0);
+}
+
+ The following example puts all of the above code together. Notice how each row of the table contains the data for a Bubble object.
+
+
+
+Loading and Saving Tabular Data
++
+
+
+
+// The data from the Table object will fill the array of Bubble objects
+Table table;
+Bubble[] bubbles;
void setup() {
- // Create a new file in the sketch directory
- output = createWriter("positions.txt");
+ size(480, 360);
+ loadData();
}
void draw() {
- point(mouseX, mouseY);
- output.println(mouseX); // Write the coordinate to the file
+ background(255);
+ // Display all bubbles
+ for (int i = 0; i<bubbles.length; i++) {
+ bubbles[i].display();
+ }
}
-void keyPressed() {
- output.flush(); // Writes the remaining data to the file
- output.close(); // Finishes the file
- exit(); // Stops the program
+void loadData() {
+ // "header" indicates the file has header row. The size of the array
+ // is then determined by the number of rows in the table.
+ table = loadTable("data.csv", "header");
+ bubbles = new Bubble[table.getRowCount()];
+
+
+ for (int i = 0; i<table.getRowCount(); i++) {
+ // Iterate over all the rows in a table.
+ TableRow row = table.getRow(i);
+
+
+ // Access the fields via their column name (or index).
+ float x = row.getFloat("x");
+ float y = row.getFloat("y");
+ float d = row.getFloat("diameter");
+ String n = row.getString("name");
+ // Make a Bubble object out of the data from each row.
+ bubbles[i] = new Bubble(x, y, d, n);
+ }
}
-
-Tabular Data-You may have noticed that the graphing example above loads a text file with numbers separated by commas. Processing includes a Table class which will load a comma-separated (CSV) or tab-separated (TSV) file and automatically parse the data into columns and rows for you. This is a great deal more convenient than struggling to manually parse large data files with split(). It works as follows. Let's say you have a data file that looks like: +void mousePressed() { + // When the mouse is pressed, create a new row and set the values for each column of that row. + TableRow row = table.addRow(); + row.setFloat("x", mouseX); + row.setFloat("y", mouseY); + row.setFloat("diameter", random(40, 80)); + row.setString("name", "Blah"); -
+ // If the table has more than 10 rows, delete the oldest row.
+ if (table.getRowCount()>10) {
+ table.removeRow(0);
+ }
-Instead of saying: + // This writes the table back to the original CSV file + // and reloads the file so that what's drawn matches. + saveTable(table, "data/data.csv"); + loadData(); +} -
-String[] stuff = loadStrings("data.csv");
+// This simple Bubble class draws a circle to the window
+// and displays a text label when the mouse hovers.
+class Bubble {
+ float x, y;
+ float diameter;
+ String name;
+
+ boolean over = false;
+
+ // Create the Bubble
+ Bubble(float tempX, float tempY, float tempD, String s) {
+ x = tempX;
+ y = tempY;
+ diameter = tempD;
+ name = s;
+ }
+
+ // Checking if mouse is over the bubble
+ void rollover(float px, float py) {
+ float d = dist(px, py, x, y);
+ if (d<diameter/2) {
+ over = true;
+ } else {
+ over = false;
+ }
+ }
+
+ // Display the Bubble
+ void display() {
+ stroke(0);
+ strokeWeight(2);
+ noFill();
+ ellipse(x, y, diameter, diameter);
+ if (over) {
+ fill(0);
+ textAlign(CENTER);
+ text(name, x, y+diameter/2+20);
+ }
+ }
+}
-
-We can now say: + + + Here, the distance between a given point and a circle's center is compared to that circle's radius as depicted: + ++
+
+ + In the code below, the function returns a boolean value (true or false) depending on whether the point (mx,my) is inside the circle. Notice how radius is equal to half the diameter. +
-Table table = loadTable("data.csv");
+boolean rollover(int mx, int my) {
+ if (dist(mx, my, x, y)<diameter/2) {
+ return true;
+ } else {
+ return false;
+ }
+}
+
+Data that is not in a Standardized Format-Now we've missed an important detail. Take a look at the data.csv text file above. Notice how the first line of text is not the data itself, but rather a "header row." This row includes labels that describe the data included in each subsequent row. The good news is that Processing can automatically interpret and store the headers for you, if you pass in the option "header" when loading the table. (In addition to "header" there are other options you can specify. For example if your file is called data.txt but is comma separated data you can pass in the option "csv". If it also has a header row, then you can specifiy both options like so: "header,csv"). A full list of options can be found on the loadTable() documentation page. - +
+ What if your data is not in a standard format like a table, how do you deal with it then? One of the nice features about loadStrings() is that in addition to pulling text from a file, you can also grab a URL. For example:
+String[] lines = loadStrings("http://www.yahoo.com");
+
+ When you send a URL path into loadStrings(), you get back the raw HTML (Hypertext Markup Language) source of the requested web page. It’s the same stuff that appears upon selecting “View Source” from a browser’s menu options. You don’t need to be an HTML expert to follow this section, but if you are not familiar at all with HTML, you might want to read http://en.wikipedia.org/wiki/HTML.
+
+
+
+ Unlike with the comma-delimited data from a text file that was specially formatted for use in a Processing sketch, it’s not practical to have the resulting raw HTML stored in an array of strings (each element representing one line from the source). Converting the array into one long string can make things a bit simpler. As you saw earlier in the chapter, this can be achieved using join(). +String onelongstring = join(lines, " "); ++ When pulling raw HTML from a web page, it’s likely you do not want all of the source, but just a small piece of it. Perhaps you’re looking for weather information, a stock quote, or a news headline. You can take advantage of the text manipulation functions you learned — indexOf(), substring(), and length() — to find pieces of data within a large block of text. Take, for example, the following String object: + +String stuff = "Number of apples:62. Boy, do I like apples or what!"; ++Let’s say I want to pull out the number of apples from the above text. My algorithm would be as follows: + +
+ In code, this looks like:
-Table table = loadTable("data.csv","header");
+int start = stuff.indexOf("apples:" ) + 7; // STEP 1
+// The index where a string ends can be found by
+// searching for that string and adding its length (here, 8).
+int end = stuff.indexOf(".", start); // STEP 2
+String apples = stuff.substring(start, end); // STEP 3
+int apple_no = int(apples); // STEP 4
+ The above code will do the trick, but I should be a bit more careful to make sure I don’t run into any errors if I do not find the string I am searching for. I can add some error checking and generalize the code into a function:+
+// A function that returns a substring between two substrings.
+// If the beginning of end "tag" is not found, the function returns an empty string.
+String giveMeTextBetween(String s, String startTag, String endTag) {
+ // Find the index of the beginning tag
+ int startIndex = s.indexOf(startTag);
+ // If I don't find anything
+ if (startIndex == -1) {
+ return "";
+ }
+ // Move to the end of the beginning tag
+ startIndex += startTag.length();
-
+ With this technique, you are ready to connect to a website from within Processing and grab data to use in your sketches. For example, you could read the HTML source from nytimes.com and look for today’s headlines, search finance.yahoo.com for stock quotes, count how many times the word “flower” appears on your favorite blog, and so on. However, HTML is an ugly, scary place with inconsistently formatted pages that are difficult to reverse engineer and parse effectively. Not to mention the fact that companies change the source code of web pages rather often, so any example that I might make while I am writing this paragraph might break by the time you read this paragraph.
+
+
+ + For grabbing data from the web, an XML (Extensible Markup Language) or JSON (JavaScript Object Notation) feed will prove to be more reliable and easier to parse. Unlike HTML (which is designed to make content viewable by a human’s eyes) XML and JSON are designed to make content viewable by a computer and facilitate the sharing of data across different systems. Most data (news, weather, and more) is available this way, and I will look at examples in #beginner_xml and #JSON. Though much less desirable, manual HTML parsing is still useful for a couple reasons. First, it never hurts to practice text manipulation techniques that reinforce key programming concepts. But more importantly, sometimes there is data you really want that is not available in an API format, and the only way to get it is with such a technique. (I should also mention that regular expressions, an incredibly powerful techinque in text pattern matching, could also be employed here. As much as I love regex, it’s unfortunately beyond the scope of this tutorial.) + + ++ An example of data only available as HTML is the Internet Movie Database. IMDb contains information about movies sorted by year, genre, ratings, etc. For each movie, you can find the cast and crew list, a plot summary, running time, a movie poster image, the list goes on. However, IMDb has no API and does not provide its data as XML or JSON. Pulling the data into Processing therefore requires a bit of detective work. Let's look at the page for the Shaun the Sheep Movie + -
+
-In the above grid we can see that the data is organized in terms of columns and rows. One way to access the data would be to therefore request a value by its numeric column and row location (with zero being the first row or first column). This is similar to accessing a pixel color at a given (x,y) location. Here we are getting a piece of data at a given (column,row) location. - ++ Looking in the HTML source from the above URL, I find a giant mess of markup. + + +
+
+
+ It’s up to me to pore through the raw source and find the data I am looking for. Let's say I want to know the running time of the movie and grab the movie poster image. After some digging, I find that the movie is 139 minutes long as listed in the following HTML. -int val1 = table.getInt(1,2); // val now has the value 235 -float val2 = table.getFloat(2,3); // val2 now has the value 44.758068 -String s = table.getString(3,0); // s now has the value "Happy" +<div class="txt-block"> + <h4 class="inline">Runtime:</h4> + <time itemprop="duration" datetime="PT139M">139 min</time> +</div>+ For any given movie, the running time itself will be variable, but the HTML structure of the page will stay the same. I can therefore deduce that running time will always appear in between: + +<time itemprop="duration" datetime="PT139M"> ++ and: + +</time> ++ Knowing where the data starts and ends, I can use giveMeTextBetween() to pull out the running time. A quote in Java marks the beginning or end of a string. So how do you include an actual quote in a String object? The answer is via an “escape” sequence. A quote can be included using a backward slash, followed by a quote. For example: String q = "This String has a quote \"in it"; + +String url = "http://www.imdb.com/title/tt0058331"; +String[] lines = loadStrings(url); +// Get rid of the array in order to search the whole page +String html = join(lines, " "); -+ The following code retrieves both the running time and movie poster iamge from IMDb and displays it onscreen. + + + Parsing IMDb Manually + +
+
+String runningtime;
+PImage poster;
+
+void setup() {
+ size(300, 350);
+ loadData();
+}
-Note in the above line of code that a Table object refers to the entire table of data while a TableRow object handles an individual row of data within the Table.
+void draw() {
+ // Display all the stuff I want to display
+ background(255);
+ image(poster, 10, 10, 164, 250);
+ fill(0);
+ text("Shaun the Sheep", 10, 300);
+ text(runningtime, 10, 320);
+}
-Once we have the TableRow object, we can ask for data from some or all of the columns.
+void loadData() {
+ String url = "http://www.imdb.com/title/tt2872750/";
+
+ // Get the raw HTML source into an array of strings (each line is one element in the array).
+ // The next step is to turn array into one long string with join().
+ String[] lines = loadStrings(url);
+ String html = join(lines, "");
+
+ String start = "";
+ runningtime = giveMeTextBetween(html, start, end);Searching for running time.
+
+ start = "";
+ // Search for the URL of the poster image.
+ String imgUrl = giveMeTextBetween(html, start, end);
+ // Now, load that image!
+ poster = loadImage(imgUrl);
+}
-
+ In this example I'm accessing the child nodes by their name (i.e., "channel," "item,", etc.), however they can also be accessed numerically via an index (starting at zero, same as an array). This is convenient when looping over a list of children, much like I did with tabular data when I iterated over rows in a table. + + +
+ Earlier, we used a Table to store information related to Bubble objects. XML document can also be used in the same manner. Here is a possible solution for an XML tree of Bubble objects: <?xml version="1.0" encoding="UTF-8"?> <bubbles> @@ -416,52 +999,321 @@+ I can use getChildren() to retrieve the array of <bubble> elements and make a Bubble object from each one. Here is the example which uses the identical Bubble class from earlier (not included below). The new code is in bold. + + +
+Using Processing's XML Class
+ +// An Array of Bubble objects +Bubble[] bubbles; +// An XML object +XML xml; -
+ One thing to note about openweathermap.org is that it does not require that you tell the API any information about yourself. You simply send a request to a URL and get the data back. Other APIs, however, require you to sign up and obtain an access token. The New York Times API is one such example. Before you can make a request from Processing, you'll need to visit The New York Times Developer site and request an API key. Once you have that key, you can store it in your code as a string.
-void draw() {
- if (loading) {
- // Draw something to indicate loading
- }
+// This is not a real key
+String apiKey = "40e2es0b3ca44563f9c62aeded4431dc:12:51913116";
+
+ You also need to know what the URL is for the API itself. This information is documented for you on the developer site, but here it is for simplicity:+ +String url = "http://api.nytimes.com/svc/search/v2/articlesearch.json"; ++ Finally, you have to tell the API what it is you are looking for. This is done with a “query string,” a sequence of name value pairs describing the parameters of the query joined with an ampersand. This functions similarly to how you pass arguments to a function in Processing. If you wanted to search for the term "processing" from a search() function you might say: +
+search("processing");
+
+ Here, the API acts as the function call, and you send it the arguments via the query string. Here is a simple example asking for a list of the oldest articles that contain the term "processing" (the oldest of which turns out to be May 12th, 1852).+ +// The name/value pairs that configure the API query are: (q,processing) and (sort,oldest) +String query = "?q=processing&sort=oldest"; ++ This isn't just guesswork. Figuring out how to put together a query string requires reading through the API's documentation. For The New York Times, it’s all outlined on the Times' developer website. Once you have your query you can join all the pieces together and pass it to loadJSONObject(). Here is a tiny example that simply displays the most recent headline. + + +
+NYTimes API Query
+
+void setup() {
+ size(200, 200);
+
+ String apiKey = "40e2ea0b3ca44563f9c62aeded0431dc:18:51513116";
+ String url = "http://api.nytimes.com/svc/search/v2/articlesearch.json";
+ String query = "?q=processing&sort=newest";
+
+ // Make the API query
+ // Here, I format the call to the API by joing the URL with the API key with the query string.
+ JSONObject json = loadJSONObject(url+query+"&api-key="+apiKey);
+
+ String headline = json.getJSONObject("response").getJSONArray("docs").
+ // Grabbing a single headline from the results.
+ getJSONObject(0).getJSONObject("headline").getString("main");
+ background(255);
+ fill(0);
+ text(headline, 10, 10, 180, 190);
}
+ Some APIs require a deeper level of authentication beyond an API access key. Twitter, for example, uses an authentication protocol known as “OAuth” to provide access to its data. Writing an OAuth application requires more than just passing a String into a request and is beyond the scope of this tutorial. However, in these cases, if you’re lucky, you can find a Processing library that handles all of the authentication for you. There are several APIs that can be used directly with Processing via a library, and you can find a list of them in the “Data / Protocols” section of the libraires reference page for some ideas. Temboo, for example, offers a Processing library that handles OAuth for you and provides direct access to many APIs (including Twitter) in Processing. With Temboo, you can write code that looks like:
+
+
+// Temboo acts as a go-between you and Twitter, so first you just authenticate with Temboo.
+TembooSession session = new TembooSession("ACCOUNT_NAME", "APP_NAME", "APP_KEY");
-
|
-
-
|
+
+ + This tutorial is from the book Learning Processing by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. If you see any errors or have comments, please let us know. + + +Coordinate System and Shapes+Daniel Shiffman+ +
+ Before we begin programming with Processing, we must first channel our eighth grade selves, pull out a piece of graph paper, and draw a line. The shortest distance between two points is a good old fashioned line, and this is where we begin, with two points on that graph paper. + The above figure shows a line between point A (1,0) and point B (4,5). If you wanted to direct a friend of yours to draw that same line, you would give them a shout and say "draw a line from the point one-zero to the point four-five, please." Well, for the moment, imagine your friend was a computer and you wanted to instruct this digital pal to display that same line on its screen. The same command applies (only this time you can skip the pleasantries and you will be required to employ a precise formatting). Here, the instruction will look like this: + -Coordinate Space-
-Before we begin programming with Processing, we must first channel our eighth grade selves, pull out a piece of graph paper, and draw a line. The shortest distance between two points is a good old fashioned line, and this is where we begin, with two points on that graph paper.
-
-line(1,0,4,5);
+line(1,0,4,5);
-Even without having studied the syntax of writing code, the above statement should make a fair amount of sense. We are providing a command (which we will refer to as a "function") for the machine to follow entitled "line." In addition, we are specifying some arguments for how that line should be drawn, from point A (1,0) to point B (4,5). If you think of that line of code as a sentence, the function is a verb and the arguments are the objects of the sentence. The code sentence also ends with a semicolon instead of a period. -
+
+The key here is to realize that the computer screen is nothing more than a fancier piece of graph paper. Each pixel of the screen is a coordinate - two numbers, an "x" (horizontal) and a "y" (vertical) - that determines the location of a point in space. And it is our job to specify what shapes and colors should appear at these pixel coordinates. Nevertheless, there is a catch here. The graph paper from eighth grade ("Cartesian coordinate system") placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically. -
+
+Simple Shapes
The vast majority of the programming examples you'll see with Processing are visual in nature. These examples, at their core, involve drawing shapes and setting pixels. Let's begin by looking at four primitive shapes.
Simple Shapes
-size(200,200); -rectMode(CENTER); -rect(100,100,20,100); -ellipse(100,70,60,60); -ellipse(81,70,16,32); -ellipse(119,70,16,32); -line(90,150,80,160); -line(110,150,120,160); +size(200,200); +rectMode(CENTER); +rect(100,100,20,100); +ellipse(100,70,60,60); +ellipse(81,70,16,32); +ellipse(119,70,16,32); +line(90,150,80,160); +line(110,150,120,160);- - - This tutorial is for Processing version 1.1+. If you see any errors or have comments, please let us know. This tutorial is from the book, Learning Processing, by Daniel Shiffman, published by Morgan Kaufmann Publishers, Copyright © 2008 Elsevier Inc. All rights reserved. - |
+
-
|
+ This tutorial is for Processing version 3.0+. If you see any errors or have comments, please let us know. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License. +The Long Version+In order to use the Processing library to create our graphics while coding in Eclipse, we need to do a couple things. The first thing we need to do is import the Processing core as a library for our project, and the second is to set up our client class to take into consideration some of the processes (pun intended) that the Processing IDE does for us in the background. +This guide is written for Processing 3+, with the intended audience of someone who has already downloaded Eclipse, but may have never used it before. If you are experienced with Java and Eclipse, you can jump to the bottom for a quick summary of the steps involved. +Create a new Project+First create a new project. It just needs to be a regular Java Project. +File > New > Java Project +Let's name it 'Hello Processing'. Leave all the default settings and click Finish. +Next, create a new class. +File > New > Class +Let's name it 'UsingProcessing'. You can choose to include public static void main. +
We should now have a new class that probably looks like this: +
+
+public class UsingProcessing { + + public static void main(String[] args) { + // TODO Auto-generated method stub -
- -import processing.core.*; +}+ Now that we have our project and client class ready to go, we need to get the Processing core as a library. +The idea of Libraries+One of the most important aspects of Java (or nearly any programming environment) is the idea of a Library. A Library is a collection of code that performs related tasks. They can be one class, or many. Some Libraries are so powerful and robust that they can almost be considered a "Language" themselves. When you combine the Processing library with the Processing IDE, you end up with something that most people refer to as the Processing 'Language', but technically, at it's heart, it's a collection of Java code. +To make it work, the Processing IDE does a lot of stuff for us in the background 'Java' environment in order to make it really easy for us as programmers to create sketches. However, to make full use of all the Java awesomeness at our disposal, it's helpful to use a more robust IDE, which is why we are jumping into Eclipse. So let's get Eclipse to use Processing as a Library. +Import the Processing Core+In order for Eclipse to see the code that makes up Processing, we need to import it into our project. +File > Import > General > File System +Click next. On Windows, click "Browse..." and select the Processing jar files inside PATH_TO_PROCESSING/core/library/. On OS X, do not use the "Browse..." button. Instead, use the "From directory:" field to manually enter the path to Processing's jar files, which is typically /Applications/Processing 3.app/Contents/Java/core/library/. At minimum, select the "core.jar" file inside the "library" folder. +
A .jar file is a compiled collection of Java code. The core.jar is the core of the Processing libraries, it has all the code that does the stuff that we are used to doing in Processing, like drawing shapes. Once we have it, we can make use of all the normal Processing commands that are found on the reference page. +Click Finish. If you look at the Package Explorer, you'll notice that there is a new file in our project, called 'core.jar'. +
Now that we have the file in our project, we need to tell Eclipse that this file is part of the code base that is used to build, or compile and run, this project. Do this by right clicking on the core.jar, going to Build Path, and then Add to Build Path +
You'll notice the project will expand to have a new section called 'Referenced Libraries', where there is a new core.jar file. You can expand this to see a hierarchy of it's contents, if you are really interested. +
We are finally ready to set up our client class (the class with our main function, where the program starts), to run the project like a Processing sketch. +Setting up the Client Class+A Processing window is a special type of Java program called a PApplet. This is technically a Java Class, which has its own main function (or method) and does all kinds of fancy stuff that we don't need to worry about to create a new window and draw graphics onto it. In order for us to make use of the PApplet class, we want our program to BE a PApplet. To make this happen, we use the keyword extends in our class declaration. This will allow our class to 'inherit' all the PApplet class' functions and variables. Change the first line of code to be: +
+
+public class UsingProcessing extends PApplet{+ You'll notice this will give you an error. This occurs because, although we have included the core.jar to our project, we still have to link to the library in the code. We do this by using an import statement, at the top of the Java file. Anytime we are going to reference a function, variable, or class outside of the Java file we are writing in, we need to tell Java where it is by importing it. Eclipse will help you by suggesting to do this. Hover over the error (where it's underlined in red) and choose from the options "Import 'PApplet' (processing.core)". +
This will auto add a new line of code to the top of the file: The next step is to simply start a PApplet application, and tell it to use this class, Add the following line to the main function (method), and if the TODO comment is still there, you can delete/replace it. +
+
+PApplet.main("UsingProcessing");+ Your entire Java file should now look like: +
+
+import processing.core.PApplet; + +public class UsingProcessing extends PApplet{ + + public static void main(String[] args) { + PApplet.main("UsingProcessing"); -public class MyProcessingSketch extends PApplet { + } - public void setup() { - size(200,200); - background(0); - } +}+ NOTE: If your class is part of a package other than the default package, you must call PApplet's main using the package name as well, like this: +
+
+PApplet.main("packageName.ClassName");+ At this point, you can run the program. If Eclipse asks, choose to run the program as a Java Application. Processing no longer extends the Applet class, so you can't run it as an Applet! +This will run a PApplet as if you had run an empty sketch. You will get a new 100x100 window open with a blank canvas! +Now we are ready to add the final touches to be ready to program like we were before. After main(), add three new functions:
+
+import processing.core.PApplet; + +public class UsingProcessing extends PApplet{ + + public static void main(String[] args) { + PApplet.main("UsingProcessing"); + } + + public void settings(){ - public void draw() { - stroke(255); - if (mousePressed) { - line(mouseX,mouseY,pmouseX,pmouseY); } - } + + public void setup(){ + + } + + public void draw(){ + + } + }+
Let's try it. Set a size in
+
+import processing.core.PApplet; - We did it! We have a Processing application running from Eclipse, and now we can take advantage of all the powerful tools that Eclipse has to offer. From here, you can develop your processing sketch to your heart's content. +The Short Version+The quick break down of what we did here: +
+ Processing in Eclipse with Multiple Classes+Take a look at this example Processing sketch. The example is object-oriented and contains a class called "Stripe." In Processing, all classes are treated as "inner classes," meaning they are not individual entities unto themselves, but rather are classes inside of the larger PApplet. This is why you can do anything you can do in a PApplet inside of the Stripe class. You can draw onto the window calling rect() and access the PApplet variables such as width and height. To get this example working in Eclipse, it's perfectly reasonable to just copy it in as is and include the Stripe class code below setup() and draw() inside the parent PApplet class. However, the inner class methodology can quickly become unwieldy in the case of larger applications with lots and lots of classes. import processing.core.*;
public class MyProcessingSketch extends PApplet {
// An array of stripes
- Stripe[] stripes = new Stripe[50];
+ Stripe[] stripes = new Stripe[50];
--Second, we create a new class called Stripe. - -FILE --> NEW --> CLASS. Name it "Stripe." Click "finish." - -If we add the Processing code, Eclipse will give us a bunch of errors. - -
--The errors are all on lines where we call a Processing function (such as rect()) or reference a Processing variable (such as width). This is because a Stripe is not a PApplet and knows nothing about PApplets! We might be tempted to have Stripe extend PApplet, but this would be a fatal error. A Stripe is not a PApplet. A Stripe is a rectangular object that we want to draw onto a PApplet. What PApplet do we want to draw onto? The PApplet that is MyProcessingSketch. Instead of extending PApplet, we simply want to tell a Stripe object about a MyProcessingSketch. - -
-public class Stripe {
+ |
-
-
|
- -
|
- This tutorial is for Processing 2+. If you see any errors or have comments, please let us know. This tutorial was adapted from the book, Getting Started with Processing, by Casey Reas and Ben Fry, O’Reilly / Make 2010. Copyright © 2010 Casey Reas and Ben Fry. All rights reserved. - -+ + This tutorial was adapted from the book, Getting Started with Processing, by Casey Reas and Ben Fry, Maker Media 2015. If you see any errors or have comments, please let us know. + -Welcome to Processing! - -Start by visiting http://processing.org/download and - selecting the Mac, Windows, or Linux version, depending on what machine you have. Installation - on each machine is straightforward: +Getting Started+Casey Reas and Ben Fry+ +Welcome to Processing! Start by visiting http://processing.org/download and selecting the Mac, Windows, or Linux version, depending on what machine you have. Installation on each machine is straightforward:
With any luck, the main Processing window will now be visible. -Everyone's setup is different, so if the program didn't start, or you're -otherwise stuck, visit the troubleshooting page for possible solutions. - -+ With any luck, the main Processing window will now be visible. Everyone's setup is different, so if the program didn't start, or you're otherwise stuck, visit the troubleshooting page for possible solutions. + -
-
+ - + Your First Program-You're now running the Processing Development Environment (or PDE). -There's not much to it; the large area is the Text Editor, and there's a row -of buttons across the top; this is the toolbar. Below the editor is the Message -Area, and below that is the Console. The Message Area is used for -one line messages, and the Console is used for more technical details. +You're now running the Processing Development Environment (or PDE). There's not much to it; the large area is the Text Editor, and there's a row of buttons across the top; this is the toolbar. Below the editor is the Message Area, and below that is the Console. The Message Area is used for one line messages, and the Console is used for more technical details. -In the editor, type the following: +In the editor, type the following: -- ellipse(50, 50, 80, 80);
+ + ellipse(50, 50, 80, 80);
- This line of code means "draw an ellipse, with the center 50 pixels over - from the left and 50 pixels down from the top, with a width and height of - 80 pixels." Click the Run button, which looks like this: - -
If you've typed everything correctly, you'll see this appear in the Display Window: - -
This line of code means "draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels." Click the Run button the (triangle button in the Toolbar). -If -you didn't type it correctly, the Message Area will turn red and complain -about an error. If this happens, make sure that you've copied the example -code exactly: the numbers should be contained within parentheses -and have commas between each of them, and the line should end with a -semicolon. +If you've typed everything correctly, you'll see a circle on your screen. If you didn't type it correctly, the Message Area will turn red and complain about an error. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, and the line should end with a semicolon. -One of the most difficult things about getting started with programming -is that you have to be very specific about the syntax. The Processing -software isn't always smart enough to know what you mean, and can be -quite fussy about the placement of punctuation. You'll get used to it with a -little practice. +One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. The Processing software isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. You'll get used to it with a little practice. -Next, we'll skip ahead to a sketch that's a little more exciting. - Delete the text from the last example, and try this: +Next, we'll skip ahead to a sketch that's a little more exciting. Delete the text from the last example, and try this: -
-void setup() { - size(480, 120); ++void setup() { + size(480, 120); } -void draw() { - if (mousePressed) { - fill(0); - } else { - fill(255); +void draw() { + if (mousePressed) { + fill(0); + } else { + fill(255); } - ellipse(mouseX, mouseY, 80, 80); + ellipse(mouseX, mouseY, 80, 80); }- |
-
+
-
Short video lessons introduce coding exercises that lead to designing an interactive drawing program. -Level: Beginner Short video lessons introduce coding exercises that lead to designing an interactive drawing program. + |
+
+
+
+
+
What's new in Processing 3? Dan walks through the new features and changes. |
+
+
+
+
Learn how to pause and step through your running code with the Processing 3 Debugger. |
+
+
| + | + | + + |
| - - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| + | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
| + |
+
+
Introduction to interactivity with the mouse and keyboard. +Level: Beginner + |
+
+ |||||||||||||||||||||||||||||||||||||||||||||||||||||
| + + |
+
+
Learn how use the String class and display text onscreen. +Level: Intermediate + |
+
+
+
+
How to store and access data in array structures. +Level: Intermediate + |
+
||||||||||||||||||||||||||||||||||||||||||||||||||||
-
-
-
How to store data in a matrix using a two-dimensional array. -Level: Intermediate |
+ |
+
+
Learn how to translate, rotate, and scale shapes using 2D transformations. +Level: Intermediate + |
+
||||||||||||||||||||||||||||||||||||||||||||||||||||
-
+
-
Learn how use the String class and display text onscreen. + +
+ | |
-
+
- | |
-
-
-
-
Learn how to translate, rotate, and scale shapes using 2D transformations. -Level: Intermediate - | ||||||||||||||||||||||||||||||||||||||||||||||||||
| - | ||||||||||||||||||||||||||||||||||||||||||||||||||||||
+
+
Tools for rendering geometries in Processing. Level: Intermediate - |
-
+
+
+
+
+
+
Store and acess data in a matrix using a two-dimensional array. +Level: Intermediate |
-
+
-
Developing advanced graphics applications in Processing using P3D (OpenGL) mode. -Level: Advanced -
+
Learn how to play, analyze, and synthesize sound with the Sound Library. +Level: Intermediate |
+
+
||||||||||||||||||||||||||||||||||||||||||||||||||||
+
+
Control physical media with Processing, Arduino, and Wiring. +Level: Intermediate + |
+
+
+
+
An introduction to sending and receiving data with clients and servers. +Level: Intermediate + |
+
+
+
+
Use Processing to output print quality images and documents. +Level: Intermediate + |
+
+ ||||||||||||||||||||||||||||||||||||||||||||||||||||
-
+
-
How do you analyze a problem and break it down into steps that the computer can do? -Level: Advanced |
+
+
Developing advanced graphics applications in Processing using P3D (OpenGL) mode. +Level: Advanced + |
+
+
|||||||||||||||||||||||||||||||||||||||||||||||||||||
| + | + +
+
+
+
+
How do you analyze a problem and break it down into steps that the computer can do? +Level: Advanced + |
+
+
+ |
+
+
+
+
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(0);
+}
+
+void draw() {
+ background(204);
+ if (mouseX < 50) {
+ rect(0, 0, 50, 100); // Left
+ } else {
+ rect(50, 0, 50, 100); // Right
+ }
+}
+
+ |
+
+
+ +
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(0);
+}
+
+void draw() {
+ background(204);
+ if (mouseX < 33) {
+ rect(0, 0, 33, 100); // Left
+ } else if (mouseX < 66) {
+ rect(33, 0, 33, 100); // Middle
+ } else {
+ rect(66, 0, 33, 100); // Right
+ }
+}
+
+ |
+
+ Use the logical operator && with an if structure to select a rectangular region of the screen. As demonstrated in the following example, when a relational expression is made to test each edge of a rectangle (left, right, top, bottom) and these are concatenated with a logical AND, the entire relational expression is true only when the cursor is inside the rectangle. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(0);
+}
+
+void draw() {
+ background(204);
+ if ((mouseX > 40) && (mouseX < 80) &&
+ (mouseY > 20) && (mouseY < 80)) {
+ fill(255);
+ } else {
+ fill(0);
+ }
+ rect(40, 20, 40, 60);
+}
+
+ |
+
+ This code asks, “Is the cursor to the right of the left edge and is the cursor to the left of the right edge and is the cursor beyond the top edge and is the cursor above the bottom?” The code for the next example asks a set of similar questions and combines them with the keyword else to determine which one of the defined areas contains the cursor. +
+ + +
+
+ +
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ noStroke();
+ fill(0);
+}
+
+void draw() {
+ background(204);
+ if ((mouseX <= 50) && (mouseY <= 50)) {
+ rect(0, 0, 50, 50); // Upper-left
+ } else if ((mouseX <= 50) && (mouseY > 50)) {
+ rect(0, 50, 50, 50); // Lower-left
+ } else if ((mouseX > 50) && (mouseY <= 50)) {
+ rect(50, 0, 50, 50); // Upper-right
+ } else {
+ rect(50, 50, 50, 50); // Lower-right
+ }
+}
+
+ |
+
+ Computer mice and other related input devices typically have between one and three buttons; Processing can detect when these buttons are pressed with the mousePressed and mouseButton variables. Used with the button status, the cursor position enables the mouse to perform different actions. For example, a button press when the mouse is over an icon can select it, so the icon can be moved to a different location on screen. The mousePressed variable is true if any mouse button is pressed and false if no mouse button is pressed. The variable mouseButton is LEFT, CENTER, or RIGHT depending on the mouse button most recently pressed. The mousePressed variable reverts to false as soon as the button is released, but the mouseButton variable retains its value until a different button is pressed. These variables can be used independently or in combination to control the software. Run these programs to see how the software responds to your fingers. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ background(204);
+ if (mousePressed == true) {
+ fill(255); // White
+ } else {
+ fill(0); // Black
+ }
+ rect(25, 25, 50, 50);
+}
+
+ |
+
+
+ +
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ if (mouseButton == LEFT) {
+ fill(0); // Black
+ } else if (mouseButton == RIGHT) {
+ fill(255); // White
+ } else {
+ fill(126); // Gray
+ }
+ rect(25, 25, 50, 50);
+}
+
+ |
+
+
+ +
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ if (mousePressed == true) {
+ if (mouseButton == LEFT) {
+ fill(0); // Black
+ } else if (mouseButton == RIGHT) {
+ fill(255); // White
+ }
+ } else {
+ fill(126); // Gray
+ }
+ rect(25, 25, 50, 50);
+}
+
+ |
+
+ Not all mice have multiple buttons, and if software is distributed widely, the interaction should not rely on detecting which button is pressed. +
+ + + ++ Processing registers the most recently pressed key and whether a key is currently pressed. The boolean variable keyPressed is true if a key is pressed and is false if not. Include this variable in the test of an if structure to allow lines of code to run only if a key is pressed. The keyPressed variable remains true while the key is held down and becomes false only when the key is released. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ strokeWeight(4);
+}
+
+void draw() {
+ background(204);
+ if (keyPressed == true) { // If the key is pressed,
+ line(20, 20, 80, 80); // draw a line
+ } else { // Otherwise,
+ rect(40, 40, 20, 20); // draw a rectangle
+ }
+}
+
+ |
+
+
+ +
+ |
+
+
+int x = 20;
+void setup() {
+ size(100, 100);
+ strokeWeight(4);
+}
+
+void draw() {
+ background(204);
+ if (keyPressed == true) { // If the key is pressed
+ x++; // add 1 to x
+ }
+ line(x, 20, x-60, 80);
+}
+
+ |
+
+ The key variable stores a single alphanumeric character. Specifically, it holds the most recently pressed key. The key can be displayed on screen with the text() function (p. 150). +
+ +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ textSize(60);
+}
+
+void draw() {
+ background(0);
+ text(key, 20, 75); // Draw at coordinate (20,75)
+}
+
+ |
+
+ The key variable may be used to determine whether a specific key is pressed. The following example uses the expression key=='A' to test if the A key is pressed. The single quotes signify A as the data type char (p. 144). The expression key=="A" will cause an error because the double quotes signify the A as a String, and it’s not possible to compare a String with a char. The logical AND symbol, the && operator, is used to connect the expression with the keyPressed variable to ascertain that the key pressed is the uppercase A. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ strokeWeight(4);
+}
+
+void draw() {
+ background(204);
+ // If the 'A' key is pressed draw a line
+ if ((keyPressed == true) && (key == 'A')) {
+ line(50, 25, 50, 75);
+ } else { // Otherwise, draw an ellipse
+ ellipse(50, 50, 50, 50);
+ }
+}
+
+ |
+
+ The previous example works with an uppercase A, but not if the lowercase letter is pressed. To check for both uppercase and lowercase letters, extend the relational expression with a logical OR, the || relational operator. Line 9 in the previous program would be changed to: +
+ +
+if ((keyPressed == true) && ((key == 'a') || (key == 'A'))) {
+
+
+ + Because each character has a numeric value as defined by the ASCII table (p. 605), the value of the key variable can be used like any other number to control visual attributes such as the position and color of shape elements. For instance, the ASCII table defines the uppercase A as the number 65, and the digit 1 is defined as 49. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ stroke(0);
+}
+
+void draw() {
+ if (keyPressed == true) {
+ int x = key - 32;
+ line(x, 0, x, height);
+ }
+}
+
+ |
+
+
+ +
+ |
+
+
+float angle = 0;
+
+void setup() {
+ size(100, 100);
+ fill(0);
+}
+
+void draw() {
+ background(204);
+ if (keyPressed == true) {
+ if ((key >= 32) && (key <= 126)) {
+ // If the key is alphanumeric, // use its value as an angle
+ angle = (key - 32) * 3;
+ }
+ }
+ arc(50, 50, 66, 66, 0, radians(angle));
+}
+
+ |
+
+ In addition to reading key values for numbers, letters, and symbols, Processing can also read the values from other keys including the arrow keys and the Alt, Control, Shift, Backspace, Tab, Enter, Return, Escape, and Delete keys. The variable keyCode stores the ALT, CONTROL, SHIFT, UP, DOWN, LEFT, and RIGHT keys as constants. Before determining which coded key is pressed, it’s necessary to check first to see if the key is coded. The expression key==CODED is true if the key is coded and false otherwise. Even though not alphanumeric, the keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) will not be identified as a coded key. 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 on Macintosh. Check for both Enter and Return to make sure your program will work for all platforms (see code 12-17). +
+ + +
+
+ +
+ +
+ |
+
+
+int y = 35;
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ background(204);
+ line(10, 50, 90, 50);
+ if (key == CODED) {
+ if (keyCode == UP) {
+ y = 20;
+ } else if (keyCode == DOWN) {
+ y = 50;
+ }
+ } else {
+ y = 35;
+ }
+ rect(25, y, 50, 30);
+}
+
+ |
+
+ A category of functions called events alter the normal flow of a program when an action such as a key press or mouse movement takes place. An event is a polite interruption of the normal flow of a program. Key presses and mouse movements are stored until the end of draw(), where they can take action that won’t disturb drawing that’s currently in progress. The code inside an event function is run once each time the corresponding event occurs. For example, if a mouse button is pressed, the code inside the mousePressed() function will run once and will not run again until the button is pressed again. This allows data produced by the mouse and keyboard to be read independently from what is happening in the rest of the program. +
+ + ++ The mouse event functions are mousePressed(), mouseReleased(), mouseMoved(), and mouseDragged(): +
+ +| + mousePressed() + | ++ Code inside this block is run one time when a mouse button is pressed + | +
| + mouseReleased() + | ++ Code inside this block is run one time when a mouse button is released + | +
| + mouseMoved() + | ++ Code inside this block is run one time when the mouse is moved + | +
| + mouseDragged() + | ++ Code inside this block is run one time when the mouse is moved while a mouse button is pressed + | +
+ The mousePressed() function works differently than the mousePressed variable. The value of the mousePressed variable is true until the mouse button is released. It can therefore be used within draw() to have a line of code run while the mouse is pressed. In contrast, the code inside the mousePressed() function only runs once when a button is pressed. This makes it useful when a mouse click is used to trigger an action, such as clearing the screen. In the following example, the background value becomes lighter each time a mouse button is pressed. Run the example on your computer to see the change in response to your finger. +
+ + +
+
+ +
+ |
+
+
+int gray = 0;
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ background(gray);
+}
+
+void mousePressed() {
+ gray += 20;
+}
+
+ |
+
+ The following example is the same as the one above, but the gray variable is set in the mouseReleased() event function, which is called once every time a button is released. This difference can be seen only by running the program and clicking the mouse button. Keep the mouse button pressed for a long time and notice that the background value changes only when the button is released. +
+ + +
+
+ +
+ |
+
+
+int gray = 0;
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ background(gray);
+}
+
+void mouseReleased() {
+ gray += 20;
+}
+
+ |
+
+ It is generally not a good idea to draw inside an event function, but it can be done under certain conditions. Before drawing inside these functions, it’s important to think about the flow of the program. In this example, squares are drawn inside mousePressed() and they remain on screen because there is no background() inside draw(). But if background() is used, visual elements drawn within one of the mouse event functions will appear on screen for only a single frame, or, by default, 1/60th of a second. In fact, you’ll notice this example has nothing at all inside draw(), but it needs to be there to force Processing to keep listening for the events. If a background() function were run inside draw(), the rectangles would flash onto the screen and disappear. +
+ + +
+
+ +
+ |
+
+
+void setup() {
+ size(100, 100);
+ fill(0, 102);
+}
+
+void draw() {
+} // Empty draw() keeps the program running
+
+void mousePressed() {
+ rect(mouseX, mouseY, 33, 33);
+}
+
+ |
+
+ The code inside the mouseMoved() and mouseDragged() event functions are run when there is a change in the mouse position. The code in the mouseMoved() block is run at the end of each frame when the mouse moves and no button is pressed. The code in the mouseDragged() block does the same when the mouse button is pressed. If the mouse stays in the same position from frame to frame, the code inside these functions does not run. In this example, the gray circle follows the mouse when the button is not pressed, and the black circle follows the mouse when a mouse button is pressed. +
+ +
+
+ +
+ +
+ |
+
+
+int dragX, dragY, moveX, moveY;
+
+void setup() {
+ size(100, 100);
+ noStroke();
+}
+
+void draw() {
+ background(204);
+ fill(0);
+ ellipse(dragX, dragY, 33, 33); // Black circle
+ fill(153);
+ ellipse(moveX, moveY, 33, 33); // Gray circle
+}
+
+void mouseMoved() { // Move gray circle
+ moveX = mouseX;
+ moveY = mouseY;
+}
+
+void mouseDragged() { // Move black circle
+ dragX = mouseX;
+ dragY = mouseY;
+}
+
+ |
+
+ Each key press is registered through the keyboard event functions keyPressed() and keyReleased(): +
+ +| + keyPressed() + | ++ Code inside this block is run one time when any key is pressed + | +
| + keyReleased() + | ++ Code inside this block is run one time when any key is released + | +
+ Each time a key is pressed, the code inside the keyPressed() block is run once. Within this block, it’s possible to test which key has been pressed and to use this value for any purpose. If a key is held down for an extended time, the code inside the keyPressed() block might run many times in a rapid succession because most operating systems will take over and repeatedly call the keyPressed() function. The amount of time it takes to start repeating and the rate of repetitions will be different from computer to computer, depending on the keyboard preference settings. In this example, the value of the boolean variable drawT is set from false to true when the T key is pressed; this causes the lines of code to render the rectangles in draw() to start running. +
+ + +
+
+ +
+ |
+
+
+boolean drawT = false;
+
+void setup() {
+ size(100, 100);
+ noStroke();
+}
+
+void draw() {
+ background(204);
+ if (drawT == true) {
+ rect(20, 20, 60, 20);
+ rect(39, 40, 22, 45);
+ }
+}
+
+void keyPressed() {
+ if ((key == 'T') || (key == 't')) {
+ drawT = true;
+ }
+}
+
+ |
+
+ Each time a key is released, the code inside the keyReleased() block is run once. The following example builds on the previous code; each time the key is released the boolean variable drawT is set back to false to stop the shape from displaying within draw(). +
+ +
+
+ +
+ +
+ |
+
+
+boolean drawT = false;
+
+void setup() {
+ size(100, 100);
+ noStroke();
+}
+
+void draw() {
+ background(204);
+ if (drawT == true) {
+ rect(20, 20, 60, 20);
+ rect(39, 40, 22, 45);
+ }
+}
+
+void keyPressed() {
+ if ((key == 'T') || (key == 't')) {
+ drawT = true;
+ }
+}
+
+void keyReleased() {
+ drawT = false;
+}
+
+ |
+
+ As discussed previously, programs written with draw() display frames to the screen sixty frames each second. The frameRate() function is used to set a limit on the number of frames that will display each second, and the noLoop() function can be used to stop draw() from looping. The additional functions loop() and redraw() provide more options when used in combination with the mouse and keyboard event functions. If a program has been paused with noLoop(), running loop() resumes its action. Because the event functions are the only elements that continue to run when a program is paused with noLoop(), the loop() function can be used within these events to continue running the code in draw(). The following example runs the draw() function for about two seconds each time a mouse button is pressed and then pauses the program after that time has elapsed. +
+ +
+int frame = 0;
+
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ if (frame > 120) { // If 120 frames since the mouse
+ noLoop(); // was pressed, stop the program
+ background(0); // and turn the background black.
+ } else { // Otherwise, set the background
+ background(204); // to light gray and draw lines
+ line(mouseX, 0, mouseX, 100); // at the mouse position
+ line(0, mouseY, 100, mouseY);
+ frame++;
+ }
+}
+
+void mousePressed() {
+ loop();
+ frame = 0;
+}
+
+
+ + The redraw() function runs the code in draw() one time and then halts the execution. It’s helpful when the display needn’t be updated continuously. The following example runs the code in draw() once each time a mouse button is pressed. +
+ +
+void setup() {
+ size(100, 100);
+ noLoop();
+}
+
+void draw() {
+ background(204);
+ line(mouseX, 0, mouseX, 100);
+ line(0, mouseY, 100, mouseY);
+}
+
+void mousePressed() {
+ redraw(); // Run the code in draw one time
+}
+
+
+
+
+ + The cursor can be hidden with the noCursor() function and can be set to appear as a different icon or image with the cursor() function. When the noCursor() function is run, the cursor icon disappears as it moves into the display window. To give feedback about the location of the cursor within the software, a custom cursor can be drawn and controlled with the mouseX and mouseY variables. +
+ +
+void setup() {
+ size(100, 100);
+ strokeWeight(7);
+ noCursor();
+}
+
+void draw() {
+ background(204);
+ ellipse(mouseX, mouseY, 10, 10);
+}
+
+
+ + If noCursor() is run, the cursor will be hidden while the program is running until the cursor() function is run to reveal it. +
+ +
+void setup() {
+ size(100, 100);
+ noCursor();
+}
+
+void draw() {
+ background(204);
+ if (mousePressed == true) {
+ cursor();
+ }
+}
+
+
+ + Add a parameter to the cursor() function to change it to another icon or image. Either load and use image, or use the self-descriptive options are ARROW, CROSS, HAND, MOVE, TEXT, and WAIT. +
+ +
+void setup() {
+ size(100, 100);
+}
+
+void draw() {
+ background(204);
+ if (mousePressed == true) {
+ cursor(HAND); // Draw cursor as hand
+ } else {
+ cursor(CROSS);
+ }
+ line(mouseX, 0, mouseX, height);
+ line(0, mouseY, width, mouseY);
+}
+
+
+ + These cursor icons are part of your computer’s operating system and will appear different on different machines. +
+ +
-
Objects- --
Processing Overview- --
|