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 b006f9e2d..27c953a9e 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ exhibition/ 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-f.php b/config-f.php deleted file mode 100644 index 500644b22..000000000 --- a/config-f.php +++ /dev/null @@ -1,47 +0,0 @@ - array('English', 'utf-8', true, $domain) //, - //'zh' => array('Chinese Traditional', 'big5', false, $domain."zh/"), - //'zh-cn' => array('Chinese Simplified', 'GB2312', false, $domain."zh-cn/"), - //'fr' => array('French', 'utf-8', true, $domain."fr/"), - //'id' => array('Indonesian', 'utf-8', false, $domain."id/"), - //'it' => array('Italian', 'utf-8', true, $domain."it/"), - //'jp' => array('Japanese', 'Shift_JIS', false, 'http://stage.itp.tsoa.nyu.edu/~tk403/proce55ing_reference_jp/'), - //'kn' => array('Korean', 'utf-8', false, 'http://www.nabi.or.kr/processing/'), - //'es' => array('Spanish', 'utf-8', true, $domain."es/"), - //'tr' => array('Turkish', 'ISO-8859-9', true, $domain."tr/"), - //'he' => array('Hebrew', 'Windows-1255', false, ''), - //'ru' => array('Russian', 'ISO-8859-5', false, ''), - //'pl' => array('Polish', 'ISO-8859-2', false, '') - ); -// Langauges with finished references available to the public -$FINISHED = array('en'); - -// for reference index formatting -$break_before = array('Shape', 'Color'); - -?> \ No newline at end of file diff --git a/content/api_en/HALF_PI.xml b/content/api_en/HALF_PI.xml index 3d83e4c53..723fb55e1 100755 --- a/content/api_en/HALF_PI.xml +++ b/content/api_en/HALF_PI.xml @@ -22,7 +22,7 @@ arc(x, y, d-60, d-60, 0, TWO_PI); sin() and cos(). +HALF_PI is a mathematical constant with the value 1.5707964. It is half the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). ]]> diff --git a/content/api_en/IntDict.xml b/content/api_en/IntDict.xml index 5e4942895..6754d239c 100644 --- a/content/api_en/IntDict.xml +++ b/content/api_en/IntDict.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); noLoop(); fill(0); diff --git a/content/api_en/IntDict_add.xml b/content/api_en/IntDict_add.xml index ed55603fc..957008dc4 100755 --- a/content/api_en/IntDict_add.xml +++ b/content/api_en/IntDict_add.xml @@ -17,11 +17,11 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // There are 84 cds - inventory.add("cds", 20); + inventory.add("cd", 20); println(inventory); // There are 104 cds } diff --git a/content/api_en/IntDict_clear.xml b/content/api_en/IntDict_clear.xml index a1bb4ffbf..64bab3194 100755 --- a/content/api_en/IntDict_clear.xml +++ b/content/api_en/IntDict_clear.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.clear(); println(inventory); diff --git a/content/api_en/IntDict_div.xml b/content/api_en/IntDict_div.xml index d9512a15d..6547e706d 100755 --- a/content/api_en/IntDict_div.xml +++ b/content/api_en/IntDict_div.xml @@ -17,11 +17,11 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // There are 84 cds - inventory.div("cds", 2); + inventory.div("cd", 2); println(inventory); // There are 42 cds } diff --git a/content/api_en/IntDict_get.xml b/content/api_en/IntDict_get.xml index 83690ac3a..0f8219442 100755 --- a/content/api_en/IntDict_get.xml +++ b/content/api_en/IntDict_get.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); noLoop(); fill(0); diff --git a/content/api_en/IntDict_hasKey.xml b/content/api_en/IntDict_hasKey.xml index 08f3e5a23..baa643c45 100755 --- a/content/api_en/IntDict_hasKey.xml +++ b/content/api_en/IntDict_hasKey.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); if (inventory.hasKey("records") == true) { println("Yes, we have records."); diff --git a/content/api_en/IntDict_increment.xml b/content/api_en/IntDict_increment.xml index 73281b1e5..037d777fa 100755 --- a/content/api_en/IntDict_increment.xml +++ b/content/api_en/IntDict_increment.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // There are 15 tapes inventory.increment("tapes"); println(inventory); // There are now 16 tapes diff --git a/content/api_en/IntDict_keyArray.xml b/content/api_en/IntDict_keyArray.xml index cbb2b40a1..c873798a2 100755 --- a/content/api_en/IntDict_keyArray.xml +++ b/content/api_en/IntDict_keyArray.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); String[] theKeys = inventory.keyArray(); println(theKeys); diff --git a/content/api_en/IntDict_keys.xml b/content/api_en/IntDict_keys.xml index 276530151..4289fd36d 100755 --- a/content/api_en/IntDict_keys.xml +++ b/content/api_en/IntDict_keys.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); for (String k : inventory.keys()) { println(k); diff --git a/content/api_en/IntDict_mult.xml b/content/api_en/IntDict_mult.xml index dbef3f741..8958e2c7a 100755 --- a/content/api_en/IntDict_mult.xml +++ b/content/api_en/IntDict_mult.xml @@ -17,11 +17,11 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // There are 84 cds - inventory.mult("cds", 2); + inventory.mult("cd", 2); println(inventory); // There are 168 cds } diff --git a/content/api_en/IntDict_remove.xml b/content/api_en/IntDict_remove.xml index 28797c083..11aba2cad 100755 --- a/content/api_en/IntDict_remove.xml +++ b/content/api_en/IntDict_remove.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // Full inventory inventory.remove("tapes"); println(inventory); // Tapes are removed from list diff --git a/content/api_en/IntDict_set.xml b/content/api_en/IntDict_set.xml index 5fb16c82d..f35de32f4 100755 --- a/content/api_en/IntDict_set.xml +++ b/content/api_en/IntDict_set.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.set("records", 90); // Fewer records inventory.set("mp3s", 2054); // Add MP3s diff --git a/content/api_en/IntDict_size.xml b/content/api_en/IntDict_size.xml index 737f73f62..aae149256 100755 --- a/content/api_en/IntDict_size.xml +++ b/content/api_en/IntDict_size.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); int s = inventory.size(); println(s); diff --git a/content/api_en/IntDict_sortKeys.xml b/content/api_en/IntDict_sortKeys.xml index 55bd28e1b..1401ed584 100755 --- a/content/api_en/IntDict_sortKeys.xml +++ b/content/api_en/IntDict_sortKeys.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.sortKeys(); println(inventory); diff --git a/content/api_en/IntDict_sortKeysReverse.xml b/content/api_en/IntDict_sortKeysReverse.xml index e3bdd6c67..7f0a4236f 100755 --- a/content/api_en/IntDict_sortKeysReverse.xml +++ b/content/api_en/IntDict_sortKeysReverse.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.sortKeysReverse(); println(inventory); diff --git a/content/api_en/IntDict_sortValues.xml b/content/api_en/IntDict_sortValues.xml index 1c692684a..ce792724a 100755 --- a/content/api_en/IntDict_sortValues.xml +++ b/content/api_en/IntDict_sortValues.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.sortValues(); println(inventory); diff --git a/content/api_en/IntDict_sortValuesReverse.xml b/content/api_en/IntDict_sortValuesReverse.xml index baafe091c..1e22ebaf7 100755 --- a/content/api_en/IntDict_sortValuesReverse.xml +++ b/content/api_en/IntDict_sortValuesReverse.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); inventory.sortValuesReverse(); println(inventory); diff --git a/content/api_en/IntDict_sub.xml b/content/api_en/IntDict_sub.xml index e1ecd80c2..231c78678 100755 --- a/content/api_en/IntDict_sub.xml +++ b/content/api_en/IntDict_sub.xml @@ -17,11 +17,11 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); // There are 84 cds - inventory.sub("cds", 20); + inventory.sub("cd", 20); println(inventory); // There are 64 cds } diff --git a/content/api_en/IntDict_valueArray.xml b/content/api_en/IntDict_valueArray.xml index 0d93df3c8..1a1502dd0 100755 --- a/content/api_en/IntDict_valueArray.xml +++ b/content/api_en/IntDict_valueArray.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); int[] amounts = inventory.valueArray(); println(amounts); diff --git a/content/api_en/IntDict_values.xml b/content/api_en/IntDict_values.xml index 74af5c944..0a94d1e3f 100755 --- a/content/api_en/IntDict_values.xml +++ b/content/api_en/IntDict_values.xml @@ -17,9 +17,9 @@ IntDict inventory; void setup() { size(200, 200); inventory = new IntDict(); - inventory.set("cd",84); - inventory.set("tapes",15); - inventory.set("records",102); + inventory.set("cd", 84); + inventory.set("tapes", 15); + inventory.set("records", 102); println(inventory); for (int i : inventory.values()) { println(i); diff --git a/content/api_en/JSONArray_isNull.xml b/content/api_en/JSONArray_isNull.xml new file mode 100755 index 000000000..6c095a7ea --- /dev/null +++ b/content/api_en/JSONArray_isNull.xml @@ -0,0 +1,37 @@ + + + +isNull() + +JSONArray + +Method + +method + + + + + + +null, that is has no defined value (false) or if it has a value (true). +]]> + + diff --git a/content/api_en/JSONObject_isNull.xml b/content/api_en/JSONObject_isNull.xml new file mode 100755 index 000000000..3b474e936 --- /dev/null +++ b/content/api_en/JSONObject_isNull.xml @@ -0,0 +1,36 @@ + + + +isNull() + +JSONObject + +Method + +method + + + + + + +null, that is has no defined value (false) or if it has a value (true). +]]> + + 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 @@ + + + +GPIO + +I/O + + + +Application + + + + + + + + + diff --git a/content/api_en/LIB_io/GPIO_attachInterrupt.xml b/content/api_en/LIB_io/GPIO_attachInterrupt.xml new file mode 100644 index 000000000..6f76f82e2 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_attachInterrupt.xml @@ -0,0 +1,70 @@ + + + +attachInterrupt() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +GPIO.attachInterrupt() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_digitalRead.xml b/content/api_en/LIB_io/GPIO_digitalRead.xml new file mode 100755 index 000000000..4a8c8d36d --- /dev/null +++ b/content/api_en/LIB_io/GPIO_digitalRead.xml @@ -0,0 +1,63 @@ + + + +digitalRead() + +I/O + + + +Web & Application + + + + + + + +
+You need to set the pin to input by calling pinMode() before calling this function. +]]> + + +GPIO.digitalRead() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_digitalWrite.xml b/content/api_en/LIB_io/GPIO_digitalWrite.xml new file mode 100755 index 000000000..801fcb69d --- /dev/null +++ b/content/api_en/LIB_io/GPIO_digitalWrite.xml @@ -0,0 +1,65 @@ + + + +digitalWrite() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +GPIO.digitalWrite() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_disableInterrupt.xml b/content/api_en/LIB_io/GPIO_disableInterrupt.xml new file mode 100755 index 000000000..5764a95d7 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_disableInterrupt.xml @@ -0,0 +1,41 @@ + + + +disableInterrupt() + +I/O + + + +Web & Application + + + + + + + +
+Use this function only in combination with enableInterrupt() and waitForInterrupt(). This should not be called when attachInterrupt() is being used. +]]> + + +GPIO.disableInterrupt() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_enableInterrupt.xml b/content/api_en/LIB_io/GPIO_enableInterrupt.xml new file mode 100755 index 000000000..24d6c8ad5 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_enableInterrupt.xml @@ -0,0 +1,41 @@ + + + +enableInterrupt() + +I/O + + + +Web & Application + + + + + + + +
+Use this function only when calling waitForInterrupt(). This should not be called when attachInterrupt() is being used. +]]> + + +GPIO.enableInterrupt() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_interrupts.xml b/content/api_en/LIB_io/GPIO_interrupts.xml new file mode 100755 index 000000000..0c7f562e7 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_interrupts.xml @@ -0,0 +1,66 @@ + + + +interrupts() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +GPIO.interrupts() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_noInterrupts.xml b/content/api_en/LIB_io/GPIO_noInterrupts.xml new file mode 100755 index 000000000..236c38b9a --- /dev/null +++ b/content/api_en/LIB_io/GPIO_noInterrupts.xml @@ -0,0 +1,68 @@ + + + +noInterrupts() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +GPIO.noInterrupts() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_pinMode.xml b/content/api_en/LIB_io/GPIO_pinMode.xml new file mode 100755 index 000000000..be923c726 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_pinMode.xml @@ -0,0 +1,68 @@ + + + +pinMode() + +I/O + + + +Web & Application + + + + + + +INPUT), or input with internal pull-up resistor (INPUT_PULLUP), or input with internal pull-down resistor (INPUT_PULLDOWN) or output (OUTPUT)
+
+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. +]]> + + +GPIO.pinMode() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_releaseInterrupt.xml b/content/api_en/LIB_io/GPIO_releaseInterrupt.xml new file mode 100755 index 000000000..7a616e485 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_releaseInterrupt.xml @@ -0,0 +1,57 @@ + + + +releaseInterrupt() + +I/O + + + +Web & Application + + + + + + + + + +GPIO.releaseInterrupt() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_releasePin.xml b/content/api_en/LIB_io/GPIO_releasePin.xml new file mode 100755 index 000000000..0c25bd518 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_releasePin.xml @@ -0,0 +1,67 @@ + + + +releasePin() + +I/O + + + +Web & Application + + + + + + + +
+Without calling this function, the pin will remain in the current state even after the sketch has been closed. +]]> + + +GPIO.releasePin() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/GPIO_waitFor.xml b/content/api_en/LIB_io/GPIO_waitFor.xml new file mode 100755 index 000000000..d94c87a64 --- /dev/null +++ b/content/api_en/LIB_io/GPIO_waitFor.xml @@ -0,0 +1,62 @@ + + + +waitFor() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +GPIO.waitFor() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C.xml b/content/api_en/LIB_io/I2C.xml new file mode 100755 index 000000000..eb47492b5 --- /dev/null +++ b/content/api_en/LIB_io/I2C.xml @@ -0,0 +1,60 @@ + + + +I2C + +I/O + + + +Application + + + +> 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(). +]]> + + diff --git a/content/api_en/LIB_io/I2C_beginTransmission.xml b/content/api_en/LIB_io/I2C_beginTransmission.xml new file mode 100755 index 000000000..582fb97ff --- /dev/null +++ b/content/api_en/LIB_io/I2C_beginTransmission.xml @@ -0,0 +1,60 @@ + + + +beginTransmission() + +I/O + + + +Web & Application + + + +> 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. +]]> + + +i2c.beginTransmission() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C_close.xml b/content/api_en/LIB_io/I2C_close.xml new file mode 100755 index 000000000..b3754a327 --- /dev/null +++ b/content/api_en/LIB_io/I2C_close.xml @@ -0,0 +1,61 @@ + + + +close() + +I/O + + + +Web & Application + + + +> 8); + i2c.write(val & 255); + i2c.endTransmission(); + // and close interface again + i2c.close(); +} + +]]> + + + +
+It is normally not necessary to explicitly close I2C interfaces, as they +are closed automatically by the operating system when the sketch exits.
+
+Note: It is possible to have two or more object using the same interface at +a time. +]]> + + +i2c.close() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C_endTransmission.xml b/content/api_en/LIB_io/I2C_endTransmission.xml new file mode 100755 index 000000000..f5f909324 --- /dev/null +++ b/content/api_en/LIB_io/I2C_endTransmission.xml @@ -0,0 +1,62 @@ + + + +endTransmission() + +I/O + + + +Web & Application + + + +> 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. +]]> + + +i2c.endTransmission() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C_list.xml b/content/api_en/LIB_io/I2C_list.xml new file mode 100755 index 000000000..89a1f03f5 --- /dev/null +++ b/content/api_en/LIB_io/I2C_list.xml @@ -0,0 +1,45 @@ + + + +list() + +I/O + + + +Web & Application + + + + + + + + + +I2C.list() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C_read.xml b/content/api_en/LIB_io/I2C_read.xml new file mode 100755 index 000000000..db2332f3e --- /dev/null +++ b/content/api_en/LIB_io/I2C_read.xml @@ -0,0 +1,66 @@ + + + +read() + +I/O + + + +Web & Application + + + + + + + +
+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(). +]]> + + +i2c.read() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/I2C_write.xml b/content/api_en/LIB_io/I2C_write.xml new file mode 100755 index 000000000..7e4557a35 --- /dev/null +++ b/content/api_en/LIB_io/I2C_write.xml @@ -0,0 +1,60 @@ + + + +write() + +I/O + + + +Web & Application + + + +> 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. +]]> + + +i2c.write() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/LED.xml b/content/api_en/LIB_io/LED.xml new file mode 100755 index 000000000..12f9fa0f7 --- /dev/null +++ b/content/api_en/LIB_io/LED.xml @@ -0,0 +1,53 @@ + + + +LED + +I/O + + + +Application + + + + + + + +
+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. +]]> + + diff --git a/content/api_en/LIB_io/LED_brightness.xml b/content/api_en/LIB_io/LED_brightness.xml new file mode 100755 index 000000000..3696d5f7f --- /dev/null +++ b/content/api_en/LIB_io/LED_brightness.xml @@ -0,0 +1,57 @@ + + + +brightness() + +I/O + + + +Web & Application + + + + + + + + + +led.brightness() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/LED_close.xml b/content/api_en/LIB_io/LED_close.xml new file mode 100755 index 000000000..a49e9d1cf --- /dev/null +++ b/content/api_en/LIB_io/LED_close.xml @@ -0,0 +1,65 @@ + + + +close() + +I/O + + + +Web & Application + + + + + + + +
+Without calling this function the LED will remain in the current state even after the sketch has been closed. +]]> + + +led.close() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/LED_list.xml b/content/api_en/LIB_io/LED_list.xml new file mode 100755 index 000000000..ff97fdd79 --- /dev/null +++ b/content/api_en/LIB_io/LED_list.xml @@ -0,0 +1,45 @@ + + + +list() + +I/O + + + +Web & Application + + + + + + + + + +LED.list() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/PWM.xml b/content/api_en/LIB_io/PWM.xml new file mode 100755 index 000000000..d072a8cf0 --- /dev/null +++ b/content/api_en/LIB_io/PWM.xml @@ -0,0 +1,23 @@ + + + +PWM + +I/O + + + +Application + + + + + + + + + diff --git a/content/api_en/LIB_io/PWM_clear.xml b/content/api_en/LIB_io/PWM_clear.xml new file mode 100755 index 000000000..84eb4dd01 --- /dev/null +++ b/content/api_en/LIB_io/PWM_clear.xml @@ -0,0 +1,39 @@ + + + +clear() + +I/O + + + +Web & Application + + + + + + + + + +pwm.clear() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/PWM_close.xml b/content/api_en/LIB_io/PWM_close.xml new file mode 100755 index 000000000..42f021b80 --- /dev/null +++ b/content/api_en/LIB_io/PWM_close.xml @@ -0,0 +1,41 @@ + + + +close() + +I/O + + + +Web & Application + + + + + + + +
+Without calling this function the channel will remain in the current state even after the sketch has been closed. +]]> + + +pwm.close() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/PWM_list.xml b/content/api_en/LIB_io/PWM_list.xml new file mode 100755 index 000000000..7e8fd2ce0 --- /dev/null +++ b/content/api_en/LIB_io/PWM_list.xml @@ -0,0 +1,45 @@ + + + +list() + +I/O + + + +Web & Application + + + + + + + + + +PWM.list() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/PWM_set.xml b/content/api_en/LIB_io/PWM_set.xml new file mode 100755 index 000000000..f21b3bfba --- /dev/null +++ b/content/api_en/LIB_io/PWM_set.xml @@ -0,0 +1,41 @@ + + + +set() + +I/O + + + +Web & Application + + + + + + + +
+When no period is specified, a default 1 kHz (1000 Hz) is used. +]]> + + +pwm.set() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SPI.xml b/content/api_en/LIB_io/SPI.xml new file mode 100755 index 000000000..31c93b8e0 --- /dev/null +++ b/content/api_en/LIB_io/SPI.xml @@ -0,0 +1,62 @@ + + + +SPI + +I/O + + + +Application + + + +> 3); + // val is between 0 and 1023 + println(val); +} + +]]> + + + +
+Serial Peripheral Interface (SPI) is a serial bus, commonly used to communicate +with sensors and memory devices. It uses four pins: MOSI (Master Out Slave In), +MISO (Master In Slave Out), and SCLK (clock signal) - those three are shared +among all devices on the bus - as well as one or more SS (Slave Select) pins, +that are used for the master to signal to the slave device that it is the +desired respondent for the transmission.
+
+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. +]]> + + diff --git a/content/api_en/LIB_io/SPI_close.xml b/content/api_en/LIB_io/SPI_close.xml new file mode 100755 index 000000000..2e9d7f4a1 --- /dev/null +++ b/content/api_en/LIB_io/SPI_close.xml @@ -0,0 +1,64 @@ + + + +close() + +I/O + + + +Web & Application + + + +> 3); + // val is between 0 and 1023 + println(val); + // and close interface again + adc.close(); +} + +]]> + + + +
+It is normally not necessary to explicitly close SPI interfaces, as they +are closed automatically by the operating system when the sketch exits.
+
+Note: It is possible to have two or more objects using the same interface at +a time. +]]> + + +spi.close() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SPI_list.xml b/content/api_en/LIB_io/SPI_list.xml new file mode 100755 index 000000000..e6acf17f0 --- /dev/null +++ b/content/api_en/LIB_io/SPI_list.xml @@ -0,0 +1,45 @@ + + + +list() + +I/O + + + +Web & Application + + + + + + + + + +SPI.list() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SPI_settings.xml b/content/api_en/LIB_io/SPI_settings.xml new file mode 100755 index 000000000..7b434a094 --- /dev/null +++ b/content/api_en/LIB_io/SPI_settings.xml @@ -0,0 +1,61 @@ + + + +settings() + +I/O + + + +Web & Application + + + +> 3); + // val is between 0 and 1023 + println(val); +} + +]]> + + + +
+The default setting is: 500000, SPI.MSBFIRST, SPI.MODE0 +]]> + + +spi.settings() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SPI_transfer.xml b/content/api_en/LIB_io/SPI_transfer.xml new file mode 100755 index 000000000..7ffe20daf --- /dev/null +++ b/content/api_en/LIB_io/SPI_transfer.xml @@ -0,0 +1,61 @@ + + + +transfer() + +I/O + + + +Web & Application + + + +> 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. +]]> + + +spi.transfer() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SoftwareServo.xml b/content/api_en/LIB_io/SoftwareServo.xml new file mode 100644 index 000000000..1e5617ec2 --- /dev/null +++ b/content/api_en/LIB_io/SoftwareServo.xml @@ -0,0 +1,47 @@ + + + +SoftwareServo + +I/O + + + +Application + + + + + + + +
+This library uses timers to control RC servo motors by means of pulse width +modulation (PWM). While not as accurate as dedicated PWM hardware, it has +shown to be sufficient for many applications.
+
+Connect the signal wire (typically colored yellow) to any available GPIO pin +and control the servo's angle as shown in the example sketch. +]]> + + diff --git a/content/api_en/LIB_io/SoftwareServo_attach.xml b/content/api_en/LIB_io/SoftwareServo_attach.xml new file mode 100644 index 000000000..cb889b7ad --- /dev/null +++ b/content/api_en/LIB_io/SoftwareServo_attach.xml @@ -0,0 +1,65 @@ + + + +attach() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +softwareservo.attach() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SoftwareServo_attached.xml b/content/api_en/LIB_io/SoftwareServo_attached.xml new file mode 100644 index 000000000..2c2362958 --- /dev/null +++ b/content/api_en/LIB_io/SoftwareServo_attached.xml @@ -0,0 +1,65 @@ + + + +attached() + +I/O + + + +Web & Application + + + + + + + + + +softwareservo.attached() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SoftwareServo_detach.xml b/content/api_en/LIB_io/SoftwareServo_detach.xml new file mode 100644 index 000000000..f92e9b3ec --- /dev/null +++ b/content/api_en/LIB_io/SoftwareServo_detach.xml @@ -0,0 +1,64 @@ + + + +detach() + +I/O + + + +Web & Application + + + + + + + +
+Calling this method will stop the servo from moving or trying to +hold the current orientation. +]]> + + +softwareservo.detach() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/SoftwareServo_write.xml b/content/api_en/LIB_io/SoftwareServo_write.xml new file mode 100644 index 000000000..02e1de275 --- /dev/null +++ b/content/api_en/LIB_io/SoftwareServo_write.xml @@ -0,0 +1,61 @@ + + + +write() + +I/O + + + +Web & Application + + + + + + + +
+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. +]]> + + +softwareservo.write() + + + + + + + + +1.0 + +Method + +Library + + diff --git a/content/api_en/LIB_io/index.html b/content/api_en/LIB_io/index.html new file mode 100755 index 000000000..2637f8462 --- /dev/null +++ b/content/api_en/LIB_io/index.html @@ -0,0 +1,103 @@ + +

Hardware I/O

+ +
+ +

+ 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. +

+ +
+ +
+

+

GPIO
+

+ The GPIO class reads and writes from General Purpose I/O pins.
+
+ pinMode()
+ digitalWrite()
+ digitalRead()
+ attachInterrupt()
+ noInterrupts()
+ interrupts()
+ releaseInterrupt()
+ waitFor()
+ releasePin()
+
+

+ +
I2C
+

+ The I2C class communicates with peripherals over I2C interfaces.
+
+ I2C
+ list()
+ beginTransmission()
+ write()
+ read()
+ endTransmission()
+ close()
+
+

+ +
LED
+

+ The LED class controls the computer's build-in lights.
+
+ LED
+ list()
+ brightness()
+ close()
+
+

+ +

+
+ +
+

+ +

PWM
+

+ 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()
+
+

+ +
SoftwareServo
+

+ The SoftwareServo class controls RC servo motors attached to General Purpose I/O pins.
+
+ SoftwareServo
+ attach()
+ write()
+ attached()
+ detach()
+
+

+ +
SPI
+

+ The SPI class communicates with attached devices over SPI interfaces.
+
+ SPI
+ list()
+ settings()
+ transfer()
+ close()
+
+

+

+
diff --git a/content/api_en/LIB_net/clientEvent.xml b/content/api_en/LIB_net/clientEvent.xml index b71892510..d831f37a4 100755 --- a/content/api_en/LIB_net/clientEvent.xml +++ b/content/api_en/LIB_net/clientEvent.xml @@ -19,25 +19,27 @@ int dataIn; void setup() { size(200, 200); myClient = new Client(this, "127.0.0.1", 5204); + noLoop(); } -void draw() { } // Empty draw keeps the program running +void draw() { + background(dataIn); +} -// ClientEvent message is generated when the server -// sends data to an existing client. +// ClientEvent message is generated when the +// server sends data to an existing client. void clientEvent(Client someClient) { print("Server Says: "); - dataIn = myClient.read(); + dataIn = someClient.read(); println(dataIn); - background(dataIn); - + redraw(); } ]]> diff --git a/content/api_en/LIB_pdf/index.html b/content/api_en/LIB_pdf/index.html index b156f57db..71fdf7f61 100755 --- a/content/api_en/LIB_pdf/index.html +++ b/content/api_en/LIB_pdf/index.html @@ -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_bufferUntil.xml b/content/api_en/LIB_serial/Serial_bufferUntil.xml index d26ff0c4b..e190976a4 100755 --- a/content/api_en/LIB_serial/Serial_bufferUntil.xml +++ b/content/api_en/LIB_serial/Serial_bufferUntil.xml @@ -12,20 +12,14 @@ serialEvent(). ]]> diff --git a/content/api_en/LIB_serial/Serial_last.xml b/content/api_en/LIB_serial/Serial_last.xml index 07efee922..cbee0c6fd 100755 --- a/content/api_en/LIB_serial/Serial_last.xml +++ b/content/api_en/LIB_serial/Serial_last.xml @@ -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 3bcd77f7e..455e50213 100755 --- a/content/api_en/LIB_serial/Serial_lastChar.xml +++ b/content/api_en/LIB_serial/Serial_lastChar.xml @@ -37,7 +37,7 @@ void draw() { diff --git a/content/api_en/LIB_serial/Serial_readBytes.xml b/content/api_en/LIB_serial/Serial_readBytes.xml index f3f9d0de7..ce01e36f4 100755 --- a/content/api_en/LIB_serial/Serial_readBytes.xml +++ b/content/api_en/LIB_serial/Serial_readBytes.xml @@ -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 d4c9583d8..fb7773582 100755 --- a/content/api_en/LIB_serial/Serial_readBytesUntil.xml +++ b/content/api_en/LIB_serial/Serial_readBytesUntil.xml @@ -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_readString.xml b/content/api_en/LIB_serial/Serial_readString.xml index 0178be9b3..6a960337e 100755 --- a/content/api_en/LIB_serial/Serial_readString.xml +++ b/content/api_en/LIB_serial/Serial_readString.xml @@ -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_sound/Amplitude.xml b/content/api_en/LIB_sound/Amplitude.xml index 72930583c..0822d6d93 100755 --- a/content/api_en/LIB_sound/Amplitude.xml +++ b/content/api_en/LIB_sound/Amplitude.xml @@ -24,6 +24,7 @@ void setup() { // Create an Input stream which is routed into the Amplitude analyzer amp = new Amplitude(this); in = new AudioIn(this, 0); + in.start(); amp.input(in); } @@ -37,33 +38,5 @@ void draw() { This is a volume analyzer. It calculates the root mean square of the amplitude of each audio block and returns that value. ]]> - diff --git a/content/api_en/LIB_sound/Amplitude_analyze.xml b/content/api_en/LIB_sound/Amplitude_analyze.xml index 8bd031f7f..f7f92824f 100755 --- a/content/api_en/LIB_sound/Amplitude_analyze.xml +++ b/content/api_en/LIB_sound/Amplitude_analyze.xml @@ -23,6 +23,7 @@ void setup() { // Create an Input stream which is routed into the Amplitude analyzer amp = new Amplitude(this); in = new AudioIn(this, 0); + in.start(); amp.input(in); } diff --git a/content/api_en/LIB_sound/Amplitude_input.xml b/content/api_en/LIB_sound/Amplitude_input.xml index a28e733f4..2d4f89641 100755 --- a/content/api_en/LIB_sound/Amplitude_input.xml +++ b/content/api_en/LIB_sound/Amplitude_input.xml @@ -23,6 +23,7 @@ void setup() { // Create an Input stream which is routed into the Amplitude analyzer amp = new Amplitude(this); in = new AudioIn(this, 0); + in.start(); amp.input(in); } diff --git a/content/api_en/LIB_sound/Amplitude_stop.xml b/content/api_en/LIB_sound/Amplitude_stop.xml index 68a759e6f..5cbc938da 100755 --- a/content/api_en/LIB_sound/Amplitude_stop.xml +++ b/content/api_en/LIB_sound/Amplitude_stop.xml @@ -23,6 +23,7 @@ void setup() { // Create an Input stream which is routed into the Amplitude analyzer amp = new Amplitude(this); in = new AudioIn(this, 0); + in.start(); amp.input(in); } @@ -32,7 +33,6 @@ void draw() { void mousePressed() { in.stop(); - amp.stop(); } ]]> diff --git a/content/api_en/LIB_sound/AudioDevice.xml b/content/api_en/LIB_sound/AudioDevice.xml index 5bb214dba..1172dc020 100755 --- a/content/api_en/LIB_sound/AudioDevice.xml +++ b/content/api_en/LIB_sound/AudioDevice.xml @@ -4,7 +4,7 @@ Sound -I/O +Configuration Application @@ -29,16 +29,6 @@ void draw() { Audio Device allows for configuring the audio server. If you need a low latency server you can reduce the buffer size. Allowed values are power of 2. For changing the sample rate pass the appropriate value in the constructor. ]]> - - - - - - - - - - AudioDevice(parent, samplerate, buffersize) @@ -57,10 +47,8 @@ AudioDevice(parent, samplerate, buffersize) int: buffersize (i.e. 32/64/128 ..) - - - +Sound 1.0 diff --git a/content/api_en/LIB_sound/AudioIn_add.xml b/content/api_en/LIB_sound/AudioIn_add.xml index dbd9db629..13f7472f9 100755 --- a/content/api_en/LIB_sound/AudioIn_add.xml +++ b/content/api_en/LIB_sound/AudioIn_add.xml @@ -23,6 +23,7 @@ void setup() { in = new AudioIn(this, 0); in.start(); in.add(0.2); + in.play(); } void draw() { 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 index 0a5c6a62d..4eef4cc78 100755 --- a/content/api_en/LIB_sound/BandPass.xml +++ b/content/api_en/LIB_sound/BandPass.xml @@ -41,6 +41,7 @@ This is a band pass filter. ]]> + diff --git a/content/api_en/LIB_sound/BandPass_bw.xml b/content/api_en/LIB_sound/BandPass_bw.xml index 5dee3cc97..d761114ac 100755 --- a/content/api_en/LIB_sound/BandPass_bw.xml +++ b/content/api_en/LIB_sound/BandPass_bw.xml @@ -32,8 +32,8 @@ void setup() { bandPass.process(noise); // Change the cutoff frequency and bandwidth of the filter - bandpass.bw(bw); - bandpass.freq(freq); + bandPass.bw(bw); + bandPass.freq(freq); } void draw() { diff --git a/content/api_en/LIB_sound/BandPass_freq.xml b/content/api_en/LIB_sound/BandPass_freq.xml index 1fc7efc92..de6f9b28d 100755 --- a/content/api_en/LIB_sound/BandPass_freq.xml +++ b/content/api_en/LIB_sound/BandPass_freq.xml @@ -31,7 +31,7 @@ void setup() { bandPass.process(noise); // Change the cutoff frequency of the filter - bandpass.freq(freq); + bandPass.freq(freq); } void draw() { diff --git a/content/api_en/LIB_sound/BandPass_stop.xml b/content/api_en/LIB_sound/BandPass_stop.xml index cf78196e6..7e7143aeb 100755 --- a/content/api_en/LIB_sound/BandPass_stop.xml +++ b/content/api_en/LIB_sound/BandPass_stop.xml @@ -37,8 +37,8 @@ void draw() { void mousePressed() { //stop the noise generator and the filter - noise.stop(); - bandpass.stop(); + //noise.stop(); + bandPass.stop(); } ]]> diff --git a/content/api_en/LIB_sound/BrownNoise.xml b/content/api_en/LIB_sound/BrownNoise.xml index 72c8fe79b..f8b95cac7 100755 --- a/content/api_en/LIB_sound/BrownNoise.xml +++ b/content/api_en/LIB_sound/BrownNoise.xml @@ -29,66 +29,7 @@ void draw() { - - - - - - - - -play() -Start the generator - - - -stop() -Stop the generator - - - -amp() -Change the amplitude/volume of the generator - - - -add() -Offset the output of the generator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -BrownNoise(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/BrownNoise_add.xml b/content/api_en/LIB_sound/BrownNoise_add.xml index ec5550347..d00869e8d 100755 --- a/content/api_en/LIB_sound/BrownNoise_add.xml +++ b/content/api_en/LIB_sound/BrownNoise_add.xml @@ -35,19 +35,4 @@ void draw() { The .add() method is useful for modulating other audio signals. ]]> - -noise.add(add) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/BrownNoise_amp.xml b/content/api_en/LIB_sound/BrownNoise_amp.xml index edb349c7d..4264c2f4b 100755 --- a/content/api_en/LIB_sound/BrownNoise_amp.xml +++ b/content/api_en/LIB_sound/BrownNoise_amp.xml @@ -35,24 +35,4 @@ void draw() { Changes the amplitude/volume of the noise generator. Allowed values are between 0.0 and 1.0. ]]> - -noise.amp(vol) - - - - - - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/BrownNoise_pan.xml b/content/api_en/LIB_sound/BrownNoise_pan.xml index 71043d021..6644626fd 100755 --- a/content/api_en/LIB_sound/BrownNoise_pan.xml +++ b/content/api_en/LIB_sound/BrownNoise_pan.xml @@ -36,19 +36,4 @@ void draw() { Pan the generator in a stereo panorama. -1.0 pans to the left channel and 1.0 to the right channel. ]]> - -noise.pan(pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/BrownNoise_play.xml b/content/api_en/LIB_sound/BrownNoise_play.xml index 9a1c30f40..915d8cfcb 100755 --- a/content/api_en/LIB_sound/BrownNoise_play.xml +++ b/content/api_en/LIB_sound/BrownNoise_play.xml @@ -34,19 +34,4 @@ void draw() { Starts the Brown Noise generator. ]]> - -noise.play() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/BrownNoise_set.xml b/content/api_en/LIB_sound/BrownNoise_set.xml index 1ace27281..a24a1c3ef 100755 --- a/content/api_en/LIB_sound/BrownNoise_set.xml +++ b/content/api_en/LIB_sound/BrownNoise_set.xml @@ -41,19 +41,4 @@ void mousePressed() { Sets amplitude, add and pan position with one method. ]]> - -noise.set(amp, add, pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/BrownNoise_stop.xml b/content/api_en/LIB_sound/BrownNoise_stop.xml index 93c88a426..6111b73ae 100755 --- a/content/api_en/LIB_sound/BrownNoise_stop.xml +++ b/content/api_en/LIB_sound/BrownNoise_stop.xml @@ -1,7 +1,7 @@ -play() +stop() Noise @@ -38,19 +38,4 @@ void mousePressed() { Stops the Brown Noise generator. ]]> - -noise.stop() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/FFT_analyze.xml b/content/api_en/LIB_sound/FFT_analyze.xml index 6c05e7396..4bd4c1bfa 100755 --- a/content/api_en/LIB_sound/FFT_analyze.xml +++ b/content/api_en/LIB_sound/FFT_analyze.xml @@ -41,34 +41,14 @@ void draw() { for(int i = 0; i < bands; i++){ // The result of the FFT is normalized // draw the line for frequency band i scaling it up by 5 to get more amplitude. - line( i, height, i, height - spectrum[i]*height*5 ); + line(i, height, i, height - spectrum[i]*height*5 ); } } ]]> - -amp.analyze() - - - - - - - -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 index ea7b4e6dc..c58f7b983 100755 --- a/content/api_en/LIB_sound/FFT_stop.xml +++ b/content/api_en/LIB_sound/FFT_stop.xml @@ -47,7 +47,6 @@ void draw() { void mousePressed() { in.stop(); - fft.stop(); } ]]> diff --git a/content/api_en/LIB_sound/HighPass_freq.xml b/content/api_en/LIB_sound/HighPass_freq.xml index 9c0b81216..499ef5f6d 100755 --- a/content/api_en/LIB_sound/HighPass_freq.xml +++ b/content/api_en/LIB_sound/HighPass_freq.xml @@ -31,7 +31,7 @@ void setup() { highPass.process(noise); // Change the cutoff frequency of the filter - highpass.freq(freq); + highPass.freq(freq); } void draw() { diff --git a/content/api_en/LIB_sound/HighPass_stop.xml b/content/api_en/LIB_sound/HighPass_stop.xml index 94a64a8f4..9f9eb1b0b 100755 --- a/content/api_en/LIB_sound/HighPass_stop.xml +++ b/content/api_en/LIB_sound/HighPass_stop.xml @@ -17,8 +17,6 @@ import processing.sound.*; WhiteNoise noise; HighPass highPass; -float amp=0.0; - void setup() { size(640,360); background(255); diff --git a/content/api_en/LIB_sound/LowPass_freq.xml b/content/api_en/LIB_sound/LowPass_freq.xml index aed66f36d..f4fd2d8ef 100755 --- a/content/api_en/LIB_sound/LowPass_freq.xml +++ b/content/api_en/LIB_sound/LowPass_freq.xml @@ -31,7 +31,7 @@ void setup() { lowPass.process(noise); // Change the cutoff frequency of the filter - highpass.freq(freq); + lowPass.freq(freq); } void draw() { diff --git a/content/api_en/LIB_sound/LowPass_stop.xml b/content/api_en/LIB_sound/LowPass_stop.xml index 13cda1c39..96423bbea 100755 --- a/content/api_en/LIB_sound/LowPass_stop.xml +++ b/content/api_en/LIB_sound/LowPass_stop.xml @@ -17,8 +17,6 @@ import processing.sound.*; WhiteNoise noise; LowPass lowPass; -float amp=0.0; - void setup() { size(640,360); background(255); diff --git a/content/api_en/LIB_sound/PinkNoise.xml b/content/api_en/LIB_sound/PinkNoise.xml index 59f26ae9a..fd74f29e5 100755 --- a/content/api_en/LIB_sound/PinkNoise.xml +++ b/content/api_en/LIB_sound/PinkNoise.xml @@ -29,66 +29,7 @@ void draw() { - - - - - - - - -play() -Start the generator - - - -stop() -Stop the generator - - - -amp() -Change the amplitude/volume of the generator - - - -add() -Offset the output of the generator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -WhiteNoise(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/PinkNoise_add.xml b/content/api_en/LIB_sound/PinkNoise_add.xml index 999b05183..28de64b97 100755 --- a/content/api_en/LIB_sound/PinkNoise_add.xml +++ b/content/api_en/LIB_sound/PinkNoise_add.xml @@ -35,19 +35,4 @@ void draw() { The .add() method is useful for modulating other audio signals. ]]> - -noise.add(add) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/PinkNoise_amp.xml b/content/api_en/LIB_sound/PinkNoise_amp.xml index 14e8a8745..67e87cc56 100755 --- a/content/api_en/LIB_sound/PinkNoise_amp.xml +++ b/content/api_en/LIB_sound/PinkNoise_amp.xml @@ -35,24 +35,4 @@ void draw() { Changes the amplitude/volume of the noise generator. Allowed values are between 0.0 and 1.0. ]]> - -noise.amp(vol) - - - - - - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/PinkNoise_pan.xml b/content/api_en/LIB_sound/PinkNoise_pan.xml index d786b649b..10bb0cf09 100755 --- a/content/api_en/LIB_sound/PinkNoise_pan.xml +++ b/content/api_en/LIB_sound/PinkNoise_pan.xml @@ -36,19 +36,4 @@ void draw() { Pan the generator in a stereo panorama. -1.0 pans to the left channel and 1.0 to the right channel. ]]> - -noise.pan(pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/PinkNoise_play.xml b/content/api_en/LIB_sound/PinkNoise_play.xml index 9cf795d7d..c40593f4d 100755 --- a/content/api_en/LIB_sound/PinkNoise_play.xml +++ b/content/api_en/LIB_sound/PinkNoise_play.xml @@ -34,19 +34,4 @@ void draw() { Starts the Pink Noise generator. ]]> - -noise.play() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/PinkNoise_set.xml b/content/api_en/LIB_sound/PinkNoise_set.xml index ff84919dc..9914d239f 100755 --- a/content/api_en/LIB_sound/PinkNoise_set.xml +++ b/content/api_en/LIB_sound/PinkNoise_set.xml @@ -41,19 +41,4 @@ void mousePressed() { Sets amplitude, add and pan position with one method. ]]> - -noise.set(amp, add, pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/PinkNoise_stop.xml b/content/api_en/LIB_sound/PinkNoise_stop.xml index 1d99c7db8..f9bc7dca5 100755 --- a/content/api_en/LIB_sound/PinkNoise_stop.xml +++ b/content/api_en/LIB_sound/PinkNoise_stop.xml @@ -1,7 +1,7 @@ -play() +stop() Noise @@ -38,19 +38,4 @@ void mousePressed() { Stops the Pink Noise generator. ]]> - -noise.stop() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/Pulse.xml b/content/api_en/LIB_sound/Pulse.xml index 2bae58c81..e1b4402cd 100755 --- a/content/api_en/LIB_sound/Pulse.xml +++ b/content/api_en/LIB_sound/Pulse.xml @@ -9,7 +9,7 @@ Application - +../../../images/LIB_sound_Pulse.png - - - - - - - - -play() -Start the oscillator - - - -stop() -Stop the oscillator - - - -freq() -Change the frequency of the oscillator - - - -width() -Change the pulse width of the oscillator - - - -amp() -Change the amplitude/volume of the oscillator - - - -add() -Offset the output of the oscillator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -Pulse(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/Pulse_set.xml b/content/api_en/LIB_sound/Pulse_set.xml index 0f3d893e0..0e5935e7f 100755 --- a/content/api_en/LIB_sound/Pulse_set.xml +++ b/content/api_en/LIB_sound/Pulse_set.xml @@ -29,11 +29,11 @@ void draw() { void mousePressed() { float freq=200; - float width=0.5; + float plswidth=0.5; float amp=0.5; float add=0.0; float pos=1; - pulse.set(freq, width, amp, add, pos); + pulse.set(freq, plswidth, amp, add, pos); } ]]> diff --git a/content/api_en/LIB_sound/Reverb.xml b/content/api_en/LIB_sound/Reverb.xml index 8d34c05ce..6697df3b9 100755 --- a/content/api_en/LIB_sound/Reverb.xml +++ b/content/api_en/LIB_sound/Reverb.xml @@ -28,6 +28,7 @@ void setup() { // start the input stream in.play(); + reverb.process(in); } void draw() { diff --git a/content/api_en/LIB_sound/Reverb_stop.xml b/content/api_en/LIB_sound/Reverb_stop.xml index 8d2fe420d..574071bfc 100755 --- a/content/api_en/LIB_sound/Reverb_stop.xml +++ b/content/api_en/LIB_sound/Reverb_stop.xml @@ -32,14 +32,14 @@ void setup() { // Patch the reverb reverb.process(in, 5); - reverb.time(0.5); + //reverb.damp(0.5); } void draw() { } void mousePressed() { - in.stop(); + //in.stop(); reverb.stop(); } diff --git a/content/api_en/LIB_sound/SawOsc.xml b/content/api_en/LIB_sound/SawOsc.xml index 514326e8f..979ca1bb5 100755 --- a/content/api_en/LIB_sound/SawOsc.xml +++ b/content/api_en/LIB_sound/SawOsc.xml @@ -9,7 +9,7 @@ Application - +../../../images/LIB_sound_SawOsc.png - - - - - - - - -play() -Start the oscillator - - - -stop() -Stop the oscillator - - - -freq() -Change the frequency of the oscillator - - - -amp() -Change the amplitude/volume of the oscillator - - - -add() -Offset the output of the oscillator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -SqrOsc(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/SinOsc.xml b/content/api_en/LIB_sound/SinOsc.xml index 1f6c8ad1e..abec47858 100755 --- a/content/api_en/LIB_sound/SinOsc.xml +++ b/content/api_en/LIB_sound/SinOsc.xml @@ -9,7 +9,7 @@ Application - +../../../images/LIB_sound_SinOsc.png - - - - - - - - -play() -Start the oscillator - - - -stop() -Stop the oscillator - - - -freq() -Change the frequency of the oscillator - - - -amp() -Change the amplitude/volume of the oscillator - - - -add() -Offset the output of the oscillator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -SinOsc(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/SinOsc_play.xml b/content/api_en/LIB_sound/SinOsc_play.xml index 31761bad6..4c89cd172 100755 --- a/content/api_en/LIB_sound/SinOsc_play.xml +++ b/content/api_en/LIB_sound/SinOsc_play.xml @@ -13,7 +13,7 @@ + +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 index db860e881..c6eb0d03c 100755 --- a/content/api_en/LIB_sound/SoundFile.xml +++ b/content/api_en/LIB_sound/SoundFile.xml @@ -9,7 +9,6 @@ Application - - - - - - - - - -play() -Play the soundfile - - - -loop() -Loop the soundfile - - - -cue() -Set the starting position of the soundfile - - - -jump() -Jump to a specific position in the file while continuing to play - - - -stop() -Stop the soundfile - - - -rate() -Change the playback rate of the soundfile - - - -amp() -Change the amplitude/volume of the player - - - -add() -Offset the output of the player by given value - - - -pan() -Move the soundfile in a stereo panorama - - - -set() -Set multiple parameters at once - - - -duration() -Returns the duration of the soundfile - - - -sampleRate() -Returns the sample rate of the soundfile - - - -frames() -Returns the number of frames/samples of the soundfile - - - -channels() -Returns the number of channels of the soundfile - - - -SoundFile(parent, path) - - - -parent -PApplet: typically use "this" - - - -path -Full Path to file or filename for data path - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/SoundFile_add.xml b/content/api_en/LIB_sound/SoundFile_add.xml index 28df56508..2b92734e5 100755 --- a/content/api_en/LIB_sound/SoundFile_add.xml +++ b/content/api_en/LIB_sound/SoundFile_add.xml @@ -18,12 +18,12 @@ SoundFile file; void setup() { size(640, 360); background(255); - + // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); file.play(); file.add(0.1); -} +} void draw() { } @@ -32,7 +32,7 @@ void draw() { diff --git a/content/api_en/LIB_sound/SoundFile_amp.xml b/content/api_en/LIB_sound/SoundFile_amp.xml index 8fed77f35..34002bbd2 100755 --- a/content/api_en/LIB_sound/SoundFile_amp.xml +++ b/content/api_en/LIB_sound/SoundFile_amp.xml @@ -21,8 +21,8 @@ void setup() { // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); - file.play(); file.amp(0.5); + file.play(); } void draw() { diff --git a/content/api_en/LIB_sound/SoundFile_channels.xml b/content/api_en/LIB_sound/SoundFile_channels.xml index 2e371f9e2..ace503d83 100755 --- a/content/api_en/LIB_sound/SoundFile_channels.xml +++ b/content/api_en/LIB_sound/SoundFile_channels.xml @@ -18,11 +18,11 @@ SoundFile file; void setup() { size(640, 360); background(255); - + // Load a soundfile from the /data folder of the sketch and get the number of channels file = new SoundFile(this, "sample.mp3"); println(file.channels()); -} +} void draw() { } @@ -31,22 +31,7 @@ void draw() { - -file.channels() - - -int - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_cue.xml b/content/api_en/LIB_sound/SoundFile_cue.xml index 347d45dc4..bded003ce 100755 --- a/content/api_en/LIB_sound/SoundFile_cue.xml +++ b/content/api_en/LIB_sound/SoundFile_cue.xml @@ -21,33 +21,17 @@ void setup() { // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); - file.cue(15); + file.cue(3.5); file.play(); } void draw() { } - ]]> second parameter supports only integer values. +Cues the playhead to a fixed position in the soundfile. Note that cue() only affects the playhead for future calls to play(), but not to loop(). ]]> - -file.cue(second) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_duration.xml b/content/api_en/LIB_sound/SoundFile_duration.xml index ca9e0e073..969d68a02 100755 --- a/content/api_en/LIB_sound/SoundFile_duration.xml +++ b/content/api_en/LIB_sound/SoundFile_duration.xml @@ -21,32 +21,16 @@ void setup() { // Load a soundfile from the data folder of the sketch and get the duration of the file file = new SoundFile(this, "sample.mp3"); - println("SFDuration= " + file.duration() + " seconds"); + println("Duration= " + file.duration() + " seconds"); } void draw() { } - ]]> - -file.duration() - - -float - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_frames.xml b/content/api_en/LIB_sound/SoundFile_frames.xml index 5125a8b83..f4a66de1a 100755 --- a/content/api_en/LIB_sound/SoundFile_frames.xml +++ b/content/api_en/LIB_sound/SoundFile_frames.xml @@ -18,10 +18,10 @@ SoundFile file; void setup() { size(640, 360); background(255); - - // Load a soundfile from the data folder of the sketch and get the number of channels + + // Load a soundfile from the data folder of the sketch and get the number of frames file = new SoundFile(this, "sample.mp3"); - println("SFSamples= " + soundfile.frames() + " samples"); + println("Frames= " + file.frames() + " frames"); } void draw() { @@ -31,22 +31,7 @@ void draw() { - -file.frames() - - -int - - - -1.0 - -Method - -Library - - 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 index caa6a01a9..23bb57fa1 100755 --- a/content/api_en/LIB_sound/SoundFile_jump.xml +++ b/content/api_en/LIB_sound/SoundFile_jump.xml @@ -21,32 +21,16 @@ void setup() { // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); - file.jump(15.3); + file.jump(3.5); } void draw() { } - ]]> - -file.jump(second) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_loop.xml b/content/api_en/LIB_sound/SoundFile_loop.xml index d66e81a83..8f42ae4d9 100755 --- a/content/api_en/LIB_sound/SoundFile_loop.xml +++ b/content/api_en/LIB_sound/SoundFile_loop.xml @@ -31,7 +31,7 @@ void draw() { diff --git a/content/api_en/LIB_sound/SoundFile_pan.xml b/content/api_en/LIB_sound/SoundFile_pan.xml index 52fc29f6b..44e6f2746 100755 --- a/content/api_en/LIB_sound/SoundFile_pan.xml +++ b/content/api_en/LIB_sound/SoundFile_pan.xml @@ -19,7 +19,7 @@ void setup() { size(640, 360); background(255); - // Load a soundfile from the data folder of the sketch and play it back + // Load a MONO soundfile from the data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); file.play(); } @@ -32,22 +32,7 @@ void draw() { - -file.pan() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_sampleRate.xml b/content/api_en/LIB_sound/SoundFile_pause.xml similarity index 51% rename from content/api_en/LIB_sound/SoundFile_sampleRate.xml rename to content/api_en/LIB_sound/SoundFile_pause.xml index 4f24779e3..abfe629ae 100755 --- a/content/api_en/LIB_sound/SoundFile_sampleRate.xml +++ b/content/api_en/LIB_sound/SoundFile_pause.xml @@ -1,7 +1,7 @@ -sampleRate() +pause() Sound Files @@ -18,35 +18,27 @@ SoundFile file; void setup() { size(640, 360); background(255); - - // Load a soundfile from the data folder of the sketch and get the number of channels + + // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); - println("SFSampleRate= " + sample.sampleRate() + " Hz"); -} + file.play(); +} void draw() { } +void mousePressed() { + if (file.isPlaying()) { + file.pause(); + } else { + file.play(); + } +} ]]> - -file.sampleRate() - - -int - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_play.xml b/content/api_en/LIB_sound/SoundFile_play.xml index 95f493497..f3bb129ef 100755 --- a/content/api_en/LIB_sound/SoundFile_play.xml +++ b/content/api_en/LIB_sound/SoundFile_play.xml @@ -22,31 +22,15 @@ void setup() { // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); file.play(); -} +} void draw() { } - ]]> - -file.play() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_rate.xml b/content/api_en/LIB_sound/SoundFile_rate.xml index 48ef77737..953ca579d 100755 --- a/content/api_en/LIB_sound/SoundFile_rate.xml +++ b/content/api_en/LIB_sound/SoundFile_rate.xml @@ -21,34 +21,17 @@ void setup() { // Load a soundfile from the data folder of the sketch and play it back double the speed file = new SoundFile(this, "sample.mp3"); - file.play(); + file.loop(); file.rate(2); } void draw() { } - ]]> - -file.rate() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/SoundFile_set.xml b/content/api_en/LIB_sound/SoundFile_set.xml index e77c0dd64..b9f42ee74 100755 --- a/content/api_en/LIB_sound/SoundFile_set.xml +++ b/content/api_en/LIB_sound/SoundFile_set.xml @@ -19,27 +19,26 @@ void setup() { size(640, 360); background(255); - // Load a soundfile from the data folder of the sketch and get the number of channels + // Load a soundfile from the data folder of the sketch file = new SoundFile(this, "sample.mp3"); - println("SFSampleRate= " + sample.sampleRate() + " Hz"); } void draw() { } void mousePressed() { - float rate=3; - float pos=0.5; - float amp=0.5; - float add=0; - file.set(freq, amp, add, pos); + float rate = 3; + float pos = 0.5; + float amp = 0.5; + float add = 0; + file.set(rate, pos, amp, add); } ]]> diff --git a/content/api_en/LIB_sound/SoundFile_stop.xml b/content/api_en/LIB_sound/SoundFile_stop.xml index 044fea7dd..d4b3830e7 100755 --- a/content/api_en/LIB_sound/SoundFile_stop.xml +++ b/content/api_en/LIB_sound/SoundFile_stop.xml @@ -15,23 +15,26 @@ import processing.sound.*; SoundFile file; - void setup() { +void setup() { size(640, 360); background(255); - + // Load a soundfile from the /data folder of the sketch and play it back file = new SoundFile(this, "sample.mp3"); file.play(); - } - - void mousePressed() { +} + +void draw() { +} + +void mousePressed() { file.stop(); - } +} ]]> 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 index d1d0c096f..f4ff7ec2f 100755 --- a/content/api_en/LIB_sound/SqrOsc.xml +++ b/content/api_en/LIB_sound/SqrOsc.xml @@ -9,7 +9,7 @@ Application - +../../../images/LIB_sound_SqrOsc.png - - - - - - - - -play() -Start the oscillator - - - -stop() -Stop the oscillator - - - -freq() -Change the frequency of the oscillator - - - -amp() -Change the amplitude/volume of the oscillator - - - -add() -Offset the output of the oscillator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -SqrOsc(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/TriOsc.xml b/content/api_en/LIB_sound/TriOsc.xml index 2ca49c832..d504de89a 100755 --- a/content/api_en/LIB_sound/TriOsc.xml +++ b/content/api_en/LIB_sound/TriOsc.xml @@ -9,7 +9,7 @@ Application - +../../../images/LIB_sound_TriOsc.png - - - - - - - - -play() -Start the oscillator - - - -stop() -Stop the oscillator - - - -freq() -Change the frequency of the oscillator - - - -amp() -Change the amplitude/volume of the oscillator - - - -add() -Offset the output of the oscillator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -TriOsc(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -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 index 0f67dfb46..ba8d252c2 100755 --- a/content/api_en/LIB_sound/WhiteNoise.xml +++ b/content/api_en/LIB_sound/WhiteNoise.xml @@ -29,66 +29,7 @@ void draw() { - - - - - - - - -play() -Start the generator - - - -stop() -Stop the generator - - - -amp() -Change the amplitude/volume of the generator - - - -add() -Offset the output of the generator by given value - - - -pan() -Move the sound in a stereo panorama - - - -set() -Set multiple parameters at once - - - -WhiteNoise(parent) - - - -parent -PApplet: typically use "this" - - - - - - - -1.0 - -Object - -Library - diff --git a/content/api_en/LIB_sound/WhiteNoise_add.xml b/content/api_en/LIB_sound/WhiteNoise_add.xml index 1876dc1ab..a6da5916b 100755 --- a/content/api_en/LIB_sound/WhiteNoise_add.xml +++ b/content/api_en/LIB_sound/WhiteNoise_add.xml @@ -34,19 +34,4 @@ void draw() { The .add() method is useful for modulating other audio signals. ]]> - -noise.add(add) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/WhiteNoise_amp.xml b/content/api_en/LIB_sound/WhiteNoise_amp.xml index 98ea36777..83eef598a 100755 --- a/content/api_en/LIB_sound/WhiteNoise_amp.xml +++ b/content/api_en/LIB_sound/WhiteNoise_amp.xml @@ -35,24 +35,4 @@ void draw() { Changes the amplitude/volume of the noise generator. Allowed values are between 0.0 and 1.0. ]]> - -noise.amp(vol) - - - - - - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/WhiteNoise_pan.xml b/content/api_en/LIB_sound/WhiteNoise_pan.xml index 3bcfab0ec..ffb68b7cf 100755 --- a/content/api_en/LIB_sound/WhiteNoise_pan.xml +++ b/content/api_en/LIB_sound/WhiteNoise_pan.xml @@ -36,19 +36,4 @@ void draw() { Pan the generator in a stereo panorama. -1.0 pans to the left channel and 1.0 to the right channel. ]]> - -noise.pan(pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/WhiteNoise_play.xml b/content/api_en/LIB_sound/WhiteNoise_play.xml index c25d29486..9dd12d80d 100755 --- a/content/api_en/LIB_sound/WhiteNoise_play.xml +++ b/content/api_en/LIB_sound/WhiteNoise_play.xml @@ -34,19 +34,4 @@ void draw() { Starts the White Noise generator. ]]> - -noise.play() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/WhiteNoise_set.xml b/content/api_en/LIB_sound/WhiteNoise_set.xml index a4d965129..6ecf74ca1 100755 --- a/content/api_en/LIB_sound/WhiteNoise_set.xml +++ b/content/api_en/LIB_sound/WhiteNoise_set.xml @@ -41,19 +41,4 @@ void mousePressed() { Sets amplitude, add and pan position with one method. ]]> - -noise.set(amp, add, pos) - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/WhiteNoise_stop.xml b/content/api_en/LIB_sound/WhiteNoise_stop.xml index c7a0a65d3..783fa8a36 100755 --- a/content/api_en/LIB_sound/WhiteNoise_stop.xml +++ b/content/api_en/LIB_sound/WhiteNoise_stop.xml @@ -1,7 +1,7 @@ -play() +stop() Noise @@ -38,19 +38,4 @@ void mousePressed() { Stops the White Noise generator. ]]> - -noise.stop() - - - - - - -1.0 - -Method - -Library - - diff --git a/content/api_en/LIB_sound/index.html b/content/api_en/LIB_sound/index.html index 007b42f79..5bee0974e 100755 --- a/content/api_en/LIB_sound/index.html +++ b/content/api_en/LIB_sound/index.html @@ -1,71 +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. The library comes with a collection of oscillators for basic wave forms, a variety of noise generators, and effects and filters to alter sound files and other generated sounds. The syntax is minimal to make it easy to patch one sound object into another. -

    -

    - The source code is available on the processing-sound GitHub repository. Please report bugs here. This library is only compatible with Processing 3.0+. -

    - -
    - -
    -

    - - I/O -

    - AudioDevice
    - AudioIn
    -

    - - Audio Files - -

    - SoundFile
    -

    - - Effects - -

    - LowPass
    - HighPass
    - BandPass
    - Delay
    - Reverb
    -

    - - Analysis -

    - Amplitude
    - FFT
    -

    - -

    -
    - -
    -

    - Noise -

    - WhiteNoise
    - PinkNoise
    - BrownNoise
    -

    - - Oscillators -

    - SinOsc
    - SawOsc
    - SqrOsc
    - TriOsc
    - Pulse
    -

    - - Envelopes -

    - Env
    -

    -

    -
    + +

    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 + +

    + LowPass
    + HighPass
    + BandPass
    + Delay
    + Reverb
    +

    + +

    +
    + +
    +

    + Noise +

    + WhiteNoise
    + PinkNoise
    + BrownNoise
    +

    + + Oscillators +

    + SinOsc
    + SawOsc
    + SqrOsc
    + TriOsc
    + Pulse
    +

    + + Envelopes +

    + Env
    +

    + + Analysis +

    + Amplitude
    + FFT
    +

    +

    +
    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/PGraphics.xml b/content/api_en/PGraphics.xml index 1d2a23efa..f8df4047b 100755 --- a/content/api_en/PGraphics.xml +++ b/content/api_en/PGraphics.xml @@ -31,7 +31,7 @@ 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_filter.xml b/content/api_en/PImage_filter.xml index 30df9a9da..f30582ad1 100755 --- a/content/api_en/PImage_filter.xml +++ b/content/api_en/PImage_filter.xml @@ -156,7 +156,7 @@ POSTERIZE
    Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.

    BLUR
    -Executes a Guassian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Guassian blur of radius 1. Larger values increase the blur.
    +Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.

    ERODE
    Reduces the light areas. No parameter is used.
    diff --git a/content/api_en/PImage_loadPixels.xml b/content/api_en/PImage_loadPixels.xml index 5e84cfc90..a9c353f84 100644 --- a/content/api_en/PImage_loadPixels.xml +++ b/content/api_en/PImage_loadPixels.xml @@ -34,8 +34,6 @@ void draw() { 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. ]]>     diff --git a/content/api_en/PImage_pixels.xml b/content/api_en/PImage_pixels.xml index 1ec84949f..1f2a363e2 100755 --- a/content/api_en/PImage_pixels.xml +++ b/content/api_en/PImage_pixels.xml @@ -31,7 +31,9 @@ void draw() { index value defines the position of a value within the array. For example, the statement color b = img.pixels[230] will set the variable b equal to the value at that location in the array. Before accessing this array, the data must loaded with the loadPixels() method. After the array data has been modified, the updatePixels() method must be run to update the changes. Without loadPixels(), running the code may (or will in future releases) result in a NullPointerException. +The pixels[] array contains the values for all the pixels in the image. These values are of the color datatype. This array is the size of the image, meaning if the image is 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.
    +
    +Before accessing this array, the data must loaded with the loadPixels() method. Failure to do so may result in a NullPointerException. After the array data has been modified, the updatePixels() method must be run to update the content of the display window. ]]>     diff --git a/content/api_en/PImage_save.xml b/content/api_en/PImage_save.xml index d485f5cc8..0c6830b00 100755 --- a/content/api_en/PImage_save.xml +++ b/content/api_en/PImage_save.xml @@ -29,7 +29,7 @@ newImage.save("outputImage.jpg"); filename parameter. For example, "image.tif" will have a TIFF image and "image.png" will save a PNG image. 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. It is not possible to use save() while running the program in a web browser.

    To save an image created within the code, rather than through loading, it's necessary to make the image with the createImage() function so it is aware of the location of the program and can therefore save the file to the right place. See the createImage() reference for more information. +Saves the image into a file. 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.

    To save an image created within the code, rather than through loading, it's necessary to make the image with the createImage() function so it is aware of the location of the program and can therefore save the file to the right place. See the createImage() reference for more information. ]]>     diff --git a/content/api_en/PImage_updatePixels.xml b/content/api_en/PImage_updatePixels.xml index 7e713fffd..470c33d07 100644 --- a/content/api_en/PImage_updatePixels.xml +++ b/content/api_en/PImage_updatePixels.xml @@ -34,10 +34,6 @@ void draw() { pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels(). -

    -Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. -

    -Currently, none of the renderers use the additional parameters to updatePixels(), however this may be implemented in the future. ]]>     diff --git a/content/api_en/PShape.xml b/content/api_en/PShape.xml index e98472031..5626a04da 100644 --- a/content/api_en/PShape.xml +++ b/content/api_en/PShape.xml @@ -47,7 +47,7 @@ void draw() { 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.
    +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(). ]]>     diff --git a/content/api_en/PShape_addChild.xml b/content/api_en/PShape_addChild.xml index 3d69836a8..36dcc867a 100644 --- a/content/api_en/PShape_addChild.xml +++ b/content/api_en/PShape_addChild.xml @@ -11,13 +11,13 @@ 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 fefc7d7d1..510cf16f1 100644 --- a/content/api_en/PShape_beginContour.xml +++ b/content/api_en/PShape_beginContour.xml @@ -14,12 +14,12 @@ PShape s; void setup() { - size(100, 100); + size(200, 200, P2D); // Make a shape s = createShape(); s.beginShape(); - s.noStroke(); + //s.noStroke(); // Exterior part of shape s.vertex(-50,-50); @@ -36,11 +36,11 @@ void setup() { 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); diff --git a/content/api_en/PShape_endContour.xml b/content/api_en/PShape_endContour.xml index b88cd4c3f..43119b0ea 100644 --- a/content/api_en/PShape_endContour.xml +++ b/content/api_en/PShape_endContour.xml @@ -14,12 +14,12 @@ PShape s; void setup() { - size(100, 100); + size(200, 200, P2D); // Make a shape s = createShape(); s.beginShape(); - s.noStroke(); + //s.noStroke(); // Exterior part of shape s.vertex(-50,-50); @@ -36,11 +36,11 @@ void setup() { 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); diff --git a/content/api_en/PVector_mult.xml b/content/api_en/PVector_mult.xml index 7f273994d..778c37a24 100644 --- a/content/api_en/PVector_mult.xml +++ b/content/api_en/PVector_mult.xml @@ -46,7 +46,7 @@ void draw() { diff --git a/content/api_en/QUARTER_PI.xml b/content/api_en/QUARTER_PI.xml index 0ae6805d5..66ceae319 100644 --- a/content/api_en/QUARTER_PI.xml +++ b/content/api_en/QUARTER_PI.xml @@ -22,7 +22,7 @@ arc(x, y, d-60, d-60, 0, TWO_PI); sin() and cos(). +QUARTER_PI is a mathematical constant with the value 0.7853982. It is one quarter the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). ]]> diff --git a/content/api_en/StringList_hasValue.xml b/content/api_en/StringList_hasValue.xml index 764dfa9d9..c864feb07 100755 --- a/content/api_en/StringList_hasValue.xml +++ b/content/api_en/StringList_hasValue.xml @@ -21,8 +21,8 @@ void setup() { inventory.append("flour"); inventory.append("tea"); println(inventory); - if (inventory.hasValue("tea") == true) { - println("Yes, we have a tea"); + if (inventory.hasValue("tea")) { + println("Yes, we have tea"); } else { println("Sorry, no tea"); } diff --git a/content/api_en/TAU.xml b/content/api_en/TAU.xml index fdf2aa147..ba3fe363a 100644 --- a/content/api_en/TAU.xml +++ b/content/api_en/TAU.xml @@ -22,7 +22,7 @@ arc(x, y, d-60, d-60, 0, TAU); sin() and cos(). +TAU is a mathematical constant with the value 6.2831855. It is the circle constant relating the circumference of a circle to its linear dimension, the ratio of the circumference of a circle to its radius. It is useful in combination with trigonometric functions such as sin() and cos(). ]]> diff --git a/content/api_en/TWO_PI.xml b/content/api_en/TWO_PI.xml index 86843be6c..50388e870 100755 --- a/content/api_en/TWO_PI.xml +++ b/content/api_en/TWO_PI.xml @@ -22,7 +22,7 @@ arc(x, y, d-60, d-60, 0, TWO_PI); sin() and cos(). +TWO_PI is a mathematical constant with the value 6.2831855. It is twice the ratio of the circumference of a circle to its diameter. It is useful in combination with the trigonometric functions sin() and cos(). ]]> diff --git a/content/api_en/Table.xml b/content/api_en/Table.xml index dd0071150..1df13c6cd 100755 --- a/content/api_en/Table.xml +++ b/content/api_en/Table.xml @@ -37,7 +37,10 @@ void setup() { Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. Tables can also be output and saved to disk, as in the example above. +Table objects store data with multiple rows and columns, much like in a traditional spreadsheet. Tables can be generated from scratch, dynamically, or using data from an existing file. Tables can also be output and saved to disk, as in the example above.
    +
    +Additional Table methods are documented in the Processing Table Javadoc. + ]]>     diff --git a/content/api_en/TableRow.xml b/content/api_en/TableRow.xml index aaf992285..f6510325e 100755 --- a/content/api_en/TableRow.xml +++ b/content/api_en/TableRow.xml @@ -35,7 +35,9 @@ void setup() { TableRow object represents a single row of data values, stored in columns, from a table. +A TableRow object represents a single row of data values, stored in columns, from a table.
    +
    +Additional TableRow methods are documented in the Processing Data Javadoc. ]]>     diff --git a/content/api_en/TableRow_getColumnCount.xml b/content/api_en/TableRow_getColumnCount.xml new file mode 100755 index 000000000..f43d72856 --- /dev/null +++ b/content/api_en/TableRow_getColumnCount.xml @@ -0,0 +1,36 @@ + + + +getColumnCount() + +TableRow + +Method + +method + + + + + + +TableRow. +]]> + + diff --git a/content/api_en/TableRow_getColumnTitle.xml b/content/api_en/TableRow_getColumnTitle.xml new file mode 100755 index 000000000..51c7502a8 --- /dev/null +++ b/content/api_en/TableRow_getColumnTitle.xml @@ -0,0 +1,38 @@ + + + +getColumnTitle() + +TableRow + +Method + +method + + + + + + +TableRow based on its ID (e.g. 0, 1, 2, etc.) +]]> + + diff --git a/content/api_en/Table_sort.xml b/content/api_en/Table_sort.xml new file mode 100755 index 000000000..6ef191f52 --- /dev/null +++ b/content/api_en/Table_sort.xml @@ -0,0 +1,91 @@ + + + +sort() + +Table + +Method + +method + + + + + + + + + + + + + + diff --git a/content/api_en/ambientLight.xml b/content/api_en/ambientLight.xml index 8f2ed792f..029c8dcf4 100755 --- a/content/api_en/ambientLight.xml +++ b/content/api_en/ambientLight.xml @@ -41,7 +41,7 @@ sphere(30); draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. The v1, v2, and v3 parameters are interpreted as either RGB or HSB values, depending on the current color mode. +Adds an ambient light. Ambient light doesn't come from a specific direction, the rays of light have bounced around so much that objects are evenly lit from all sides. Ambient lights are almost always used in combination with other types of lights. Lights need to be included in the draw() to remain persistent in a looping program. Placing them in the setup() of a looping program will cause them to only have an effect the first time through the loop. The v1, v2, and v3 parameters are interpreted as either RGB or HSB values, depending on the current color mode. ]]> diff --git a/content/api_en/append.xml b/content/api_en/append.xml index d9fc3aecc..fea9cc952 100755 --- a/content/api_en/append.xml +++ b/content/api_en/append.xml @@ -23,7 +23,7 @@ println(sa2); element parameter must be the same as the datatype of the array.
    +Expands a one-dimensional array by one element and adds data to the new position. The datatype of the element parameter must be the same as the datatype of the array.

    When using an array of objects, the data returned from the function must be cast to the object array's data type. For example: SomeClass[] items = (SomeClass[]) append(originalArray, element) ]]>     diff --git a/content/api_en/arc.xml b/content/api_en/arc.xml index 742e7391f..071891848 100755 --- a/content/api_en/arc.xml +++ b/content/api_en/arc.xml @@ -37,10 +37,10 @@ arc(50, 50, 80, 80, 0, PI+QUARTER_PI, PIE); a, b, c, and d parameters. The origin of the arc's ellipse may be changed with the ellipseMode() function. Use the start and stop parameters to specify the angles (in radians) at which to draw the arc.
    -
    -There are three ways to draw an arc; the rendering technique used is defined by the optional seventh parameter. The three options, depicted in the above examples, are PIE, OPEN, and CHORD. The default mode is the OPEN stroke with a PIE fill.
    -
    +Draws an arc to the screen. Arcs are drawn along the outer edge of an ellipse defined by the a, b, c, and d parameters. The origin of the arc's ellipse may be changed with the ellipseMode() function. Use the start and stop parameters to specify the angles (in radians) at which to draw the arc. The start/stop values must be in clockwise order. +

    +There are three ways to draw an arc; the rendering technique used is defined by the optional seventh parameter. The three options, depicted in the above examples, are PIE, OPEN, and CHORD. The default mode is the OPEN stroke with a PIE fill. +

    In some cases, the arc() function isn't accurate enough for smooth drawing. For example, the shape may jitter on screen when rotating slowly. If you're having an issue with how arcs are rendered, you'll need to draw the arc yourself with beginShape()/endShape() or a PShape. ]]>     diff --git a/content/api_en/arrayCopy.xml b/content/api_en/arrayCopy.xml index 1d0d41ef7..1b5165a10 100644 --- a/content/api_en/arrayCopy.xml +++ b/content/api_en/arrayCopy.xml @@ -41,7 +41,7 @@ Copies an array (or part of an array) to another array. The src array is
    The simplified version with only two arguments — arrayCopy(src, dst) — copies an entire array to another of the same size. It is equivalent to arrayCopy(src, 0, dst, 0, src.length).

    -Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. This function only copies references, which means that for most purposes it only copies one-dimensional arrays (a single set of brackets). If used with a two (or three or more) dimensional array, it will only copy the references at the first level, because a two dimensional array is simply an "array of arrays". This does not produce an error, however, because this is often the desired behavior. Internally, this function calls Java's System.arraycopy() method, so most things that apply there are inherited. +Using this function is far more efficient for copying array data than iterating through a for() loop and copying each element individually. This function only copies references, which means that for most purposes it only copies one-dimensional arrays (a single set of brackets). If used with a two (or three or more) dimensional array, it will only copy the references at the first level, because a two dimensional array is simply an "array of arrays". This does not produce an error, however, because this is often the desired behavior. Internally, this function calls Java's System.arraycopy() method, so most things that apply there are inherited. ]]> diff --git a/content/api_en/attrib.xml b/content/api_en/attrib.xml new file mode 100644 index 000000000..3d21bc538 --- /dev/null +++ b/content/api_en/attrib.xml @@ -0,0 +1,63 @@ + + + +attrib() + +Rendering + + + + + + + + + + +attrib() function attaches custom values to each vertex in the scene. By default, Processing handles several per-vertex attributes: position, color, normal, texture coordinates, etc. These attributes are used by the renderer to determine how the geometry will look on the screen as result of applying the built-in shaders that compute texture, lighting, etc. However, if the coder sets a custom shader that does some additional rendering calculations, then she might need to pass additional information to the the shader in the form of custom attributes. These attributes can be of three types: position, normal, color, and other. The first three are meant to specify xyz coordinates, normal coordinates, and color components, respectively. The third type can be use to pass any kind of attribute value. +]]> + + diff --git a/content/api_en/beginRaw.xml b/content/api_en/beginRaw.xml index 17a899383..caaeb869c 100755 --- a/content/api_en/beginRaw.xml +++ b/content/api_en/beginRaw.xml @@ -38,7 +38,7 @@ When using beginRaw() and endRaw(), it's possible to write to eith

    If you want a background to show up in your files, use rect(0, 0, width, height) after setting the fill() to the background color. Otherwise the background will not be rendered to the file because the background is not shape.

    -Using hint(ENABLE_DEPTH_SORT) can improve the appearance of 3D geometry drawn to 2D file formats. See the hint() reference for more details. +Using hint(ENABLE_DEPTH_SORT) can improve the appearance of 3D geometry drawn to 2D file formats.

    See examples in the reference for the PDF and DXF libraries for more information. ]]> diff --git a/content/api_en/blend.xml b/content/api_en/blend.xml index d10a95f76..59d8431c9 100755 --- a/content/api_en/blend.xml +++ b/content/api_en/blend.xml @@ -52,15 +52,15 @@ blend(img, 0, 0, 33, 100, 67, 0, 33, 100, LIGHTEST);
    -BLEND - linear interpolation of colours: C = A*factor + B
    +BLEND - linear interpolation of colors: C = A*factor + B

    ADD - additive blending with white clip: C = min(A*factor + B, 255)

    SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)

    -DARKEST - only the darkest colour succeeds: C = min(A*factor, B)
    +DARKEST - only the darkest color succeeds: C = min(A*factor, B)

    -LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)
    +LIGHTEST - only the lightest color succeeds: C = max(A*factor, B)

    DIFFERENCE - subtract colors from underlying image.

    diff --git a/content/api_en/blendMode.xml b/content/api_en/blendMode.xml index 26e3285a2..a3c309cb1 100755 --- a/content/api_en/blendMode.xml +++ b/content/api_en/blendMode.xml @@ -35,17 +35,17 @@ line(75, 25, 25, 75); +Blends the pixels in the display window according to a defined mode. There is a choice of the following modes to blend the source pixels (A) with the ones of pixels already in the display window (B). Each pixel's final color is the result of applying one of the blend modes with each channel of (A) and (B) independently. The red channel is compared with red, green with green, and blue with blue.

    -BLEND - linear interpolation of colours: C = A*factor + B. This is the default blending mode.
    +BLEND - linear interpolation of colors: C = A*factor + B. This is the default.

    ADD - additive blending with white clip: C = min(A*factor + B, 255)

    SUBTRACT - subtractive blending with black clip: C = max(B - A*factor, 0)

    -DARKEST - only the darkest colour succeeds: C = min(A*factor, B)
    +DARKEST - only the darkest color succeeds: C = min(A*factor, B)

    -LIGHTEST - only the lightest colour succeeds: C = max(A*factor, B)
    +LIGHTEST - only the lightest color succeeds: C = max(A*factor, B)

    DIFFERENCE - subtract colors from underlying image.

    diff --git a/content/api_en/circle.xml b/content/api_en/circle.xml new file mode 100755 index 000000000..0e1d9adfb --- /dev/null +++ b/content/api_en/circle.xml @@ -0,0 +1,23 @@ + + +circle() + +Shape + +2D Primitives + + + + +ellipse_.png + + + +ellipseMode() function. +]]> + + + diff --git a/content/api_en/clear.xml b/content/api_en/clear.xml index c0a2d9e5e..4db47b198 100644 --- a/content/api_en/clear.xml +++ b/content/api_en/clear.xml @@ -15,21 +15,25 @@ PGraphics pg; void setup() { size(200, 200); - pg = createGraphics(100, 100); + pg = createGraphics(width, height); } void draw() { background(204); - pg.beginDraw(); - pg.stroke(0, 102, 153); - pg.line(0, 0, mouseX, mouseY); - pg.endDraw(); - image(pg, 50, 50); -} - -// Click to clear the PGraphics object -void mousePressed() { - pg.clear(); + + // Clear the PGraphics when the mouse is pressed + if (mousePressed == true) { + pg.beginDraw(); + pg.clear(); + pg.endDraw(); + } else { + pg.beginDraw(); + pg.stroke(0, 102, 153); + pg.line(width/2, height/2, mouseX, mouseY); + pg.endDraw(); + } + + image(pg, 0, 0); } ]]>     diff --git a/content/api_en/createGraphics.xml b/content/api_en/createGraphics.xml index 64ab9244c..2eb84e5bc 100755 --- a/content/api_en/createGraphics.xml +++ b/content/api_en/createGraphics.xml @@ -30,11 +30,13 @@ void draw() { PGraphics object. Use this class if you need to draw into an off-screen graphics buffer. The first two parameters define the width and height in pixels. The third, optional parameter specifies the renderer. It can be defined as P2D, P3D, or PDF. If the third parameter isn't used, the default renderer is set. The PDF renderer requires the filename parameter.
    +Creates and returns a new PGraphics object. Use this class if you need to draw into an off-screen graphics buffer. The first two parameters define the width and height in pixels. The third, optional parameter specifies the renderer. It can be defined as P2D, P3D, PDF, or SVG. If the third parameter isn't used, the default renderer is set. The PDF and SVG renderers require the filename parameter.

    -It's important to consider the renderer used with createGraphics() in relation to the main renderer specified in size(). For example, it's only possible to use P2D or P3D with createGraphics() when one of them is defined in size(). Unlike Processing 1.0, P2D and P3D use OpenGL for drawing, and when using an OpenGL renderer it's necessary for the main drawing surface to be OpenGL-based. If P2D or P3D are used as the renderer in size(), then any of the options can be used with createGraphics(). If the default renderer is used in size(), then only the default or PDF can be used with createGraphics().
    +It's important to consider the renderer used with createGraphics() in relation to the main renderer specified in size(). For example, it's only possible to use P2D or P3D with createGraphics() when one of them is defined in size(). Unlike Processing 1.0, P2D and P3D use OpenGL for drawing, and when using an OpenGL renderer it's necessary for the main drawing surface to be OpenGL-based. If P2D or P3D are used as the renderer in size(), then any of the options can be used with createGraphics(). If the default renderer is used in size(), then only the default, PDF, or SVG can be used with createGraphics().

    -It's important to call any drawing functions between beginDraw() and endDraw() statements. This is also true for any functions that affect drawing, such as smooth() or colorMode().
    +It's important to run all drawing functions between the beginDraw() and endDraw(). As the exception to this rule, smooth() should be run on the PGraphics object before beginDraw(). See the reference for smooth() for more detail.
    +
    +The createGraphics() function should almost never be used inside draw() because of the memory and time needed to set up the graphics. One-time or occasional use during draw() might be acceptable, but code that calls createGraphics() at 60 frames per second might run out of memory or freeze your sketch.

    Unlike the main drawing surface which is completely opaque, surfaces created with createGraphics() can have transparency. This makes it possible to draw into a graphics and maintain the alpha channel. By using save() to write a PNG or TGA file, the transparency of the graphics object will be honored. ]]>     diff --git a/content/api_en/createReader.xml b/content/api_en/createReader.xml index 497241c94..5ffe8049a 100644 --- a/content/api_en/createReader.xml +++ b/content/api_en/createReader.xml @@ -11,37 +11,33 @@ BufferedReader object that can be used to read files line-by-line as individual String objects. This is the complement to the createWriter() function. -

    +Creates a BufferedReader object that can be used to read files line-by-line as individual String objects. This is the complement to the createWriter() function. For more information about the BufferedReader class and its methods like readLine() and close used in the above example, please consult a Java reference.
    +
    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/createShape.xml b/content/api_en/createShape.xml index e7d624f32..4469495e8 100755 --- a/content/api_en/createShape.xml +++ b/content/api_en/createShape.xml @@ -91,6 +91,7 @@ void setup() { alien = createShape(GROUP); // Make two shapes + ellipseMode(CORNER); head = createShape(ELLIPSE, -25, 0, 50, 50); head.setFill(color(255)); body = createShape(RECT, -25, 45, 50, 40); @@ -111,13 +112,13 @@ void draw() { createShape() function is used to define a new shape. Once created, this shape can be drawn with the shape() function. The basic way to use the function defines new primitive shapes. One of the following parameters are used as the first parameter: ELLIPSE, RECT, ARC, TRIANGLE, SPHERE, BOX, QUAD, or LINE. The parameters for each of these different shapes are the same as their corresponding functions: ellipse(), rect(), arc(), triangle(), sphere(), box(), and line(). The first example above clarifies how this works.
    +The createShape() function is used to define a new shape. Once created, this shape can be drawn with the shape() function. The basic way to use the function defines new primitive shapes. One of the following parameters are used as the first parameter: ELLIPSE, RECT, ARC, TRIANGLE, SPHERE, BOX, QUAD, or LINE. The parameters for each of these different shapes are the same as their corresponding functions: ellipse(), rect(), arc(), triangle(), sphere(), box(), quad(), and line(). The first example above clarifies how this works.

    Custom, unique shapes can be made by using createShape() without a parameter. After the shape is started, the drawing attributes and geometry can be set directly to the shape within the beginShape() and endShape() methods. See the second example above for specifics, and the reference for beginShape() for all of its options.

    The createShape() function can also be used to make a complex shape made of other shapes. This is called a "group" and it's created by using the parameter GROUP as the first parameter. See the fourth example above to see how it works.

    -After using createShape(), stroke and fill color can be set by calling methods like setFill() and setStroke(), as seen in the examples above. The complete list of methods and fields for the PShape class are in the Processing Javadoc. +After using createShape(), stroke and fill color can be set by calling methods like setFill() and setStroke(), as seen in the examples above. The complete list of methods and fields for the PShape class are in the Processing Javadoc. ]]>     diff --git a/content/api_en/cursor.xml b/content/api_en/cursor.xml index 3b3e9b0a3..81499ab44 100755 --- a/content/api_en/cursor.xml +++ b/content/api_en/cursor.xml @@ -14,8 +14,11 @@ // Move the mouse left and right across the image // to see the cursor change from a cross to a hand -void draw() -{ +void setup() { + size(100, 100); +} + +void draw() { if (mouseX < 50) { cursor(CROSS); } else { @@ -26,10 +29,10 @@ void draw() x and y must be less than the dimensions of the image. -

    +Sets the cursor to a predefined symbol or an image, or makes it visible if already hidden. If you are trying to set an image as the cursor, the recommended size is 16x16 or 32x32 pixels. The values for parameters x and y must be less than the dimensions of the image. +

    Setting or hiding the cursor does not generally work with "Present" mode (when running full-screen). -

    +

    With the P2D and P3D renderers, a generic set of cursors are used because the OpenGL renderer doesn't have access to the default cursor images for each platform (Issue 3791). ]]>     diff --git a/content/api_en/curvePoint.xml b/content/api_en/curvePoint.xml index 8c9a6e011..c38a07c22 100755 --- a/content/api_en/curvePoint.xml +++ b/content/api_en/curvePoint.xml @@ -30,7 +30,7 @@ for (int i = 0; i <= steps; i++) { t for points a, b, c, d. The parameter t may range from 0 (the start of the curve) and 1 (the end of the curve). a and d are points on the curve, and b and c are the control points. This can be used once with the x coordinates and a second time with the y coordinates to get the location of a curve at t. +Evaluates the curve at point t for points a, b, c, d. The parameter t may range from 0 (the start of the curve) and 1 (the end of the curve). a and d are the control points, and b and c are points on the curve. As seen in the example above, this can be used once with the x coordinates and a second time with the y coordinates to get the location of a curve at t. ]]> diff --git a/content/api_en/displayDensity.xml b/content/api_en/displayDensity.xml index bbc7c867f..1eabe02e9 100644 --- a/content/api_en/displayDensity.xml +++ b/content/api_en/displayDensity.xml @@ -13,8 +13,7 @@ setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly.
    +Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called. draw() is called automatically and should never be called explicitly. All Processing programs update the screen at the end of draw(), never earlier.

    -It should always be controlled with noLoop(), redraw() and loop(). If noLoop() is used to stop the code in draw() from executing, then redraw() will cause the code inside draw() to be executed a single time, and loop() will cause the code inside draw() to resume executing continuously.
    +To stop the code inside of draw() from running continuously, use noLoop(), redraw() and loop(). If noLoop() is used to stop the code in draw() from running, then redraw() will cause the code inside draw() to run a single time, and loop() will cause the code inside draw() to resume running continuously.

    The number of times draw() executes in each second may be controlled with the frameRate() function.

    -It is common to call background() near the beginning of the draw() loop to clear the contents of the window, as shown in the first example above. Since pixels drawn to the window are cumulative, omitting background() may result in unintended results, especially when drawing anti-aliased shapes or text. -

    +It is common to call background() near the beginning of the draw() loop to clear the contents of the window, as shown in the first example above. Since pixels drawn to the window are cumulative, omitting background() may result in unintended results.
    +
    There can only be one draw() function for each sketch, and draw() must exist if you want the code to run continuously, or to process events such as mousePressed(). Sometimes, you might have an empty call to draw() in your program, as shown in the second example above. ]]>     diff --git a/content/api_en/endShape.xml b/content/api_en/endShape.xml index a6c604615..eaa2d1e05 100755 --- a/content/api_en/endShape.xml +++ b/content/api_en/endShape.xml @@ -28,7 +28,7 @@ endShape(); endShape() function is the companion to beginShape() and may only be called after beginShape(). When endshape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). +The endShape() function is the companion to beginShape() and may only be called after beginShape(). When endShape() is called, all of image data defined since the previous call to beginShape() is written into the image buffer. The constant CLOSE as the value for the MODE parameter to close the shape (to connect the beginning and the end). ]]> diff --git a/content/api_en/environment/index.html b/content/api_en/environment/index.html index a65cc2def..5d92731eb 100644 --- a/content/api_en/environment/index.html +++ b/content/api_en/environment/index.html @@ -100,7 +100,7 @@

    - Additional commands are found within the five menus: File, Edit, Sketch, Debug, 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.

    @@ -112,8 +112,6 @@
    File
    "sketch_YYMMDDa".
  • Open...
    Open a sketch in a new window. -
  • Sketchbook
    - Open a sketch from the sketchbook folder.
  • Open Recent
    Select a sketch to open from the list of recently closed sketches.
  • Sketchbook...
    @@ -533,8 +531,8 @@
    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..."

    --> @@ -576,7 +574,7 @@

    - 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 30c9d4afe..f0f020319 100755 --- a/content/api_en/expand.xml +++ b/content/api_en/expand.xml @@ -32,7 +32,7 @@ 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/frustum.xml b/content/api_en/frustum.xml index 5469e611d..f9645bd5a 100755 --- a/content/api_en/frustum.xml +++ b/content/api_en/frustum.xml @@ -25,7 +25,7 @@ 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 acheived more simply in many cases by using perspective().
    +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).

    diff --git a/content/api_en/fullScreen.xml b/content/api_en/fullScreen.xml index eb1fea958..e75bfd541 100755 --- a/content/api_en/fullScreen.xml +++ b/content/api_en/fullScreen.xml @@ -34,7 +34,7 @@ void draw() { setup(). The first parameter defines the renderer to use and the second defines either an individual screen to display to or to open a full-screen window across all of the attached displays if there are more than one.
    +This function is new for Processing 3.0. It opens a sketch using the full size of the computer's display. This function must be the first line in setup(). The size() and fullScreen() functions cannot both be used in the same program, just choose one.

    -The size() and fullScreen() methods cannot both be used in the same program, just choose one. Prior to Processing 3.0, a full-screen program was defined with size(displayWidth, displayHeight). +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
    ]]>     diff --git a/content/api_en/include/ArrayList.xml b/content/api_en/include/ArrayList.xml index ea63b6262..8feb4dc3a 100644 --- a/content/api_en/include/ArrayList.xml +++ b/content/api_en/include/ArrayList.xml @@ -50,7 +50,7 @@ println(particles.size()); // Now one less! // 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--) { +for (int i = particles.size() - 1; i >= 0; i--) { Particle part = particles.get(i); if (part.finished()) { particles.remove(i); @@ -64,7 +64,7 @@ An ArrayList stores a variable number of objects. This is similar to maki
    An ArrayList is a resizable-array implementation of the Java List interface. It has many methods used to control and search its contents. For example, the length of the ArrayList is returned by its size() method, which is an integer value for the total number of elements in the list. An element is added to an ArrayList with the add() method and is deleted with the remove() method. The get() method returns the element at the specified position in the list. (See the above example for context.)

    -For a list of the numerous ArrayList features, please read the Java reference description. +For a list of the numerous ArrayList features, please read the Java reference description. ]]> diff --git a/content/api_en/include/BufferedReader.xml b/content/api_en/include/BufferedReader.xml index 354daa453..c7ef0855d 100644 --- a/content/api_en/include/BufferedReader.xml +++ b/content/api_en/include/BufferedReader.xml @@ -45,17 +45,14 @@ A BufferedReader object is used to read files line-by-line as individual 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. ]]> + + readLine() returns a String that is the current line in the text file - - - - - - + @@ -67,8 +64,9 @@ catch 1.0 -Function +Object + +PDE -Core diff --git a/content/api_en/include/HashMap.xml b/content/api_en/include/HashMap.xml index 56ba42897..493e893de 100644 --- a/content/api_en/include/HashMap.xml +++ b/content/api_en/include/HashMap.xml @@ -22,7 +22,7 @@ hm.put("Ava", 1); hm.put("Cait", 35); hm.put("Casey", 36); -// Using an enhanced loop to interate over each entry +// Using an enhanced loop to iterate over each entry for (Map.Entry me : hm.entrySet()) { print(me.getKey() + " is "); println(me.getValue()); @@ -39,7 +39,7 @@ println("Casey is " + val); HashMap stores a collection of objects, each referenced by a key. This is similar to an Array, only instead of accessing elements with a numeric index, a String is used. (If you are familiar with associative arrays from other languages, this is the same idea.) The above example covers basic use, but there's a more extensive example included with the Processing examples. In addition, for simple pairings of Strings and integers, Strings and floats, or Strings and Strings, you can now use the simpler IntDict, FloatDict, and StringDict classes.

    -For a list of the numerous HashMap features, please read the Java reference description. +For a list of the numerous HashMap features, please read the Java reference description. ]]>     diff --git a/content/api_en/include/Object.xml b/content/api_en/include/Object.xml index 46ff0c441..c2b5dc9dd 100755 --- a/content/api_en/include/Object.xml +++ b/content/api_en/include/Object.xml @@ -35,7 +35,7 @@ class HLine { } void update() { ypos += speed; - if (ypos > width) { + if (ypos > height) { ypos = 0; } line(0, ypos, width, ypos); diff --git a/content/api_en/include/String.xml b/content/api_en/include/String.xml index e4c4a9625..2febbe7de 100755 --- a/content/api_en/include/String.xml +++ b/content/api_en/include/String.xml @@ -24,12 +24,9 @@ println(str2); // Prints "CCCP" to the console @@ -46,11 +43,11 @@ println(quoted); // This one has "quotes" String includes methods for examining individual characters, comparing strings, searching strings, extracting parts of strings, and for converting an entire string uppercase and lowercase. Strings are always defined inside double quotes ("Abc"), and characters are always defined inside single quotes ('A').

    -To compare the contents of two Strings, use the equals() method, as in if (a.equals(b)), instead of if (a == b). A String is an Object, so comparing them with the == operator only compares whether both Strings are stored in the same memory location. Using the equals() method will ensure that the actual contents are compared. (The troubleshooting reference has a longer explanation.)
    +To compare the contents of two Strings, use the equals() method, as in if (a.equals(b)), instead of if (a == b). A String is an Object, so comparing them with the == operator only compares whether both Strings are stored in the same memory location. Using the equals() method will ensure that the actual contents are compared. (The troubleshooting reference has a longer explanation.)

    Because a String is defined between double quotation marks, to include such marks within the String itself you must use the \ (backslash) character. (See the third example above.) This is known as an escape sequence. Other escape sequences include \t for the tab character and \n for new line. Because backslash is the escape character, to include a single backslash within a String, you must use two consecutive backslashes, as in: \\

    -There are more string methods than those linked from this page. Additional documentation is located online in the official Java documentation. +There are more string methods than those linked from this page. Additional documentation is located online in the official Java documentation. ]]>     @@ -110,7 +107,6 @@ String(data, offset, length) int: number of characters - @@ -124,6 +120,4 @@ text() PDE - - diff --git a/content/api_en/include/String_substring.xml b/content/api_en/include/String_substring.xml index 0514f23ae..40813a34c 100755 --- a/content/api_en/include/String_substring.xml +++ b/content/api_en/include/String_substring.xml @@ -16,8 +16,8 @@ String str1 = "CCCP"; String str2 = "Rabbit"; String ss1 = str1.substring(2); // Returns "CP" String ss2 = str2.substring(3); // Returns "bit" -String ss3 = str1.substring(0, 2); // Returns "CC" -println(ss1 + ":" + ss2 + ":" + ss3); // Prints "CP:bit:CC" +String ss3 = str2.substring(0, 2); // Returns "Ra" +println(ss1 + ":" + ss2 + ":" + ss3); // Prints "CP:bit:Ra" ]]>     diff --git a/content/api_en/include/class.xml b/content/api_en/include/class.xml index 45eedd292..5f1e84cab 100755 --- a/content/api_en/include/class.xml +++ b/content/api_en/include/class.xml @@ -46,7 +46,7 @@ class HLine { Object-Oriented Programming is hosted on the Oracle website. +Keyword used to indicate the declaration of a class. A class is a composite of fields (data) and methods (functions that are a part of the class) which may be instantiated as objects. The first letter of a class name is usually uppercase to separate it from other kinds of variables. A related tutorial on Object-Oriented Programming is hosted on the Oracle website. ]]> diff --git a/content/api_en/include/color_datatype.xml b/content/api_en/include/color_datatype.xml index 2b501bf56..0f0b7b8f0 100755 --- a/content/api_en/include/color_datatype.xml +++ b/content/api_en/include/color_datatype.xml @@ -23,7 +23,7 @@ rect(50, 0, 50, 100); get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCCOO. +Datatype for storing color values. Colors may be assigned with get() and color() or they may be specified directly using hexadecimal notation such as #FFCC00 or 0xFFFFCC00.

    Using print() or println() on a color will produce strange results (usually negative numbers) because of the way colors are stored in memory. A better technique is to use the hex() function to format the color data, or use the red(), green(), and blue() functions to get individual values and print those. The hue(), saturation(), and brightness() functions work in a similar fashion. To extract red, green, and blue values more quickly (for instance when analyzing an image or a frame of video), use bit shifting.

    diff --git a/content/api_en/include/curlybraces.xml b/content/api_en/include/curlybraces.xml index f4f1898c9..e9984f0d7 100755 --- a/content/api_en/include/curlybraces.xml +++ b/content/api_en/include/curlybraces.xml @@ -26,7 +26,7 @@ void draw() { for and if structures. Curly braces are also used for defining inital values in array declarations. +Define the beginning and end of functions blocks and statement blocks such as the for and if structures. Curly braces are also used for defining initial values in array declarations. ]]> diff --git a/content/api_en/include/doccomment.xml b/content/api_en/include/doccomment.xml index bb4331414..fa036a032 100755 --- a/content/api_en/include/doccomment.xml +++ b/content/api_en/include/doccomment.xml @@ -22,7 +22,9 @@ line(50, 0, 50, 100);
    +Doc comments may be converted into browseable documentation using external editors and tools such as the command line javadoc, doc generators such as Doxygen, or IDEs such as Eclipse, Netbeans, or IntelliJ IDEA. ]]>     diff --git a/content/api_en/include/double.xml b/content/api_en/include/double.xml index 75ce6f466..24942764e 100644 --- a/content/api_en/include/double.xml +++ b/content/api_en/include/double.xml @@ -11,11 +11,11 @@ diff --git a/content/api_en/include/equality.xml b/content/api_en/include/equality.xml index 4ddfbd69a..a47eac505 100755 --- a/content/api_en/include/equality.xml +++ b/content/api_en/include/equality.xml @@ -14,15 +14,16 @@ int a = 23; int b = 23; if (a == b) { - println("variables a and b are equal"); + println("the values of variables 'a' and 'b' are the same"); } ]]>     +Determines if two values are equivalent. Please note the equality operator (==) is different from the assignment operator (=) and although they look similar, they have a different use. If you're comparing two variables, the equality operator (==) only works with primitive data types like int, boolean, and char. It doesn't work with composite data types like Array, Table, and PVector.
    +
    +Note that when comparing String objects, you must use the equals() method instead of ==. See the reference for String or the troubleshooting note for more explanation.

    -Note that when comparing String objects, you must use the equals() method instead of == to compare their contents. See the reference for String or the troubleshooting note for more explanation. ]]>     diff --git a/content/api_en/include/float.xml b/content/api_en/include/float.xml index 964d946e6..134cb33f4 100755 --- a/content/api_en/include/float.xml +++ b/content/api_en/include/float.xml @@ -41,7 +41,7 @@ Data type for floating-point numbers, e.g. numbers that have a decimal point.
    Floats are not precise, so adding small values (such as 0.0001) may not always increment precisely due to rounding errors. If you want to increment a value in small intervals, use an int, and divide by a float value before using it. (See the second example above.)

    -Floating-point numbers can be as large as 3.40282347E+38 and as low as -3.40282347E+38. They are stored as 32 bits (4 bytes) of information. The float data type is inherited from Java; you can read more about the technical details here and here.
    +Floating-point numbers can be as large as 3.40282347E+38 and as low as -3.40282347E+38. They are stored as 32 bits (4 bytes) of information. The float data type is inherited from Java; you can read more about the technical details here and here.

    Processing supports the double datatype from Java as well. However, none of the Processing functions use double values, which use more memory and are typically overkill for most work created in Processing. We do not plan to add support for double values, as doing so would require increasing the number of API functions significantly. ]]> diff --git a/content/api_en/hint.xml b/content/api_en/include/hint.xml similarity index 82% rename from content/api_en/hint.xml rename to content/api_en/include/hint.xml index 5a9f2dac9..a48311069 100644 --- a/content/api_en/hint.xml +++ b/content/api_en/include/hint.xml @@ -6,7 +6,27 @@ - +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. @@ -20,6 +40,9 @@ Fixes a problem with shapes that have a stroke and are rendered using small step
    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.

    @@ -45,4 +68,27 @@ Forces the P3D renderer to draw each shape (including its strokes) separately, i 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/intconvert.xml b/content/api_en/include/intconvert.xml index f14376165..56ba6ddb8 100755 --- a/content/api_en/include/intconvert.xml +++ b/content/api_en/include/intconvert.xml @@ -20,7 +20,7 @@ println(c + " : " + i); // Prints "E : 69" boolean, byte, char, color, float, int, or long) to its integer representation.
    +Converts any value of a primitive data type (boolean, byte, char, color, float, int, or long) or String to its integer representation.

    When an array of values is passed in, then an int array of the same length is returned. ]]>     diff --git a/content/api_en/include/long.xml b/content/api_en/include/long.xml index 4d69236c5..e336fb63b 100644 --- a/content/api_en/include/long.xml +++ b/content/api_en/include/long.xml @@ -11,16 +11,18 @@ long integer has a minimum value of -9,223,372,036,854,775,808 and a maximum value of 9,223,372,036,854,775,807 (stored as 64 bits). Use this datatype when you need a number to have a greater magnitude than can be stored within an int. Processing functions don't use this datatype, so while they work in the language, you'll usually have to convert to a int using the (int) syntax before passing into a function. +Datatype for large integers. While integers can be as large as 2,147,483,647 and as low as -2,147,483,648 (stored as 32 bits), a long integer has a minimum value of -9,223,372,036,854,775,808 and a maximum value of 9,223,372,036,854,775,807 (stored as 64 bits). Use this datatype when you need a number to have a greater magnitude than can be stored within an int. When assigning literal values that are larger than this magnitude, it is necessary to also append the qualifier "L" to the number, as shown in the example above. Processing functions don't use this datatype, so while they work in the language, you'll usually have to convert to a int using the (int) syntax before passing into a function. ]]> diff --git a/content/api_en/include/multilinecomment.xml b/content/api_en/include/multilinecomment.xml index bd88002cb..a1c9dd6a1 100755 --- a/content/api_en/include/multilinecomment.xml +++ b/content/api_en/include/multilinecomment.xml @@ -22,7 +22,7 @@ line(50, 0, 50, 100); diff --git a/content/api_en/include/multiply.xml b/content/api_en/include/multiply.xml index 20c71bb1f..a125ad6fd 100755 --- a/content/api_en/include/multiply.xml +++ b/content/api_en/include/multiply.xml @@ -37,7 +37,7 @@ Multiplies the values of the two parameters. Multiplication is equivalent to a s -+ (add) ++ (addition) / (divide) @@ -48,10 +48,4 @@ Multiplies the values of the two parameters. Multiplication is equivalent to a s PDE - - - - - - diff --git a/content/api_en/include/rightshift.xml b/content/api_en/include/rightshift.xml index 27526643b..06437e001 100755 --- a/content/api_en/include/rightshift.xml +++ b/content/api_en/include/rightshift.xml @@ -37,7 +37,7 @@ rect(30, 20, 55, 55);
    Bit shifting is helpful when using the color data type. A right shift can extract red, green, blue, and alpha values from a color. A left shift can be used to quickly reassemble a color value (more quickly than the color() function). ]]>     diff --git a/content/api_en/include/setLocation.xml b/content/api_en/include/setLocation.xml new file mode 100644 index 000000000..c54f0ee04 --- /dev/null +++ b/content/api_en/include/setLocation.xml @@ -0,0 +1,60 @@ + + +setLocation() + +Structure + + + +function + + + + + + +setLocation() function defines the position of the Processing sketch in relation to the upper-left corner of the computer screen. +

    +There are more features of PSurface documented in the Processing JavaDoc. +]]>     + + +surface.setLocation(x, y) + + + + + + + + + + + + +void + + + + +3.0 + +Function + +PDE + +     diff --git a/content/api_en/include/setResizable.xml b/content/api_en/include/setResizable.xml new file mode 100644 index 000000000..3b4261790 --- /dev/null +++ b/content/api_en/include/setResizable.xml @@ -0,0 +1,55 @@ + + +setResizable() + +Structure + + + +function + + + + + + +surface.setResizable(true) is used within a sketch, the window can be resized while it's running. +

    +There are more features of PSurface documented in the Processing JavaDoc. +]]>     + + +surface.setResizable(resizable) + + + + + + + +void + + + + +3.0 + +Function + +PDE + +     diff --git a/content/api_en/include/setTitle.xml b/content/api_en/include/setTitle.xml new file mode 100644 index 000000000..1c18e6d22 --- /dev/null +++ b/content/api_en/include/setTitle.xml @@ -0,0 +1,55 @@ + + +setTitle() + +Structure + + + +function + + + + + + +setTitle() function defines the title to appear at the top of the sketch window. +

    +There are more features of PSurface documented in the Processing JavaDoc. +]]>     + + +surface.setTitle(title) + + + + + + + +void + + + + +3.0 + +Function + +PDE + +     diff --git a/content/api_en/include/strconvert.xml b/content/api_en/include/strconvert.xml index 2126306f9..e81be07c5 100755 --- a/content/api_en/include/strconvert.xml +++ b/content/api_en/include/strconvert.xml @@ -29,7 +29,7 @@ println(sb); // Prints 'false-28R-32.61024' boolean, byte, char, color, double, float, int, or long) to its String representation. For example, converting an integer with str(3) will return the String value of "3", converting a float with str(-12.6) will return "-12.6", and converting a boolean with str(true) will return "true".
    +Converts a value of a primitive data type (boolean, byte, char, int, or float) to its String representation. For example, converting an integer with str(3) will return the String value of "3", converting a float with str(-12.6) will return "-12.6", and converting a boolean with str(true) will return "true".

    When an array of values is passed in, then a String array of the same length is returned. ]]>     diff --git a/content/api_en/key.xml b/content/api_en/key.xml index 282186f52..0b7d3bde0 100755 --- a/content/api_en/key.xml +++ b/content/api_en/key.xml @@ -30,7 +30,7 @@ void draw() { key always contains the value of the most recent key on the keyboard that was used (either pressed or released).

    -For non-ASCII keys, use the keyCode variable. The keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) do not require checking to see if they key is coded, and you should simply use the key variable instead of keyCode If you're making cross-platform projects, note that the ENTER key is commonly used on PCs and Unix and the RETURN key is used instead on Macintosh. Check for both ENTER and RETURN to make sure your program will work for all platforms. +For non-ASCII keys, use the keyCode variable. The keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) do not require checking to see if the key is coded, and you should simply use the key variable instead of keyCode If you're making cross-platform projects, note that the ENTER key is commonly used on PCs and Unix and the RETURN key is used instead on Macintosh. Check for both ENTER and RETURN to make sure your program will work for all platforms.

    There are issues with how keyCode behaves across different renderers and operating systems. Watch out for unexpected behavior as you switch renderers and operating systems. ]]>     diff --git a/content/api_en/keyCode.xml b/content/api_en/keyCode.xml index b11ea3ca0..8a3cd3d2f 100755 --- a/content/api_en/keyCode.xml +++ b/content/api_en/keyCode.xml @@ -39,9 +39,11 @@ When checking for these keys, it can be useful to first check if the key is code

    The keys included in the ASCII specification (BACKSPACE, TAB, ENTER, RETURN, ESC, and DELETE) do not require checking to see if the key is coded; for those keys, you should simply use the key variable directly (and not keyCode). If you're making cross-platform projects, note that the ENTER key is commonly used on PCs and Unix, while the RETURN key is used on Macs. Make sure your program will work on all platforms by checking for both ENTER and RETURN.

    -For those familiar with Java, the values for UP and DOWN are simply shorter versions of Java's KeyEvent.VK_UP and KeyEvent.VK_DOWN. Other keyCode values can be found in the Java KeyEvent reference. +For those familiar with Java, the values for UP and DOWN are simply shorter versions of Java's KeyEvent.VK_UP and KeyEvent.VK_DOWN. Other keyCode values can be found in the Java KeyEvent reference.

    There are issues with how keyCode behaves across different renderers and operating systems. Watch out for unexpected behavior as you switch renderers and operating systems and you are using keys are aren't mentioned in this reference entry. +

    +If you are using P2D or P3D as your renderer, use the NEWT KeyEvent constants. ]]> diff --git a/content/api_en/keyPressed.xml b/content/api_en/keyPressed.xml index 224ed7da8..9cc506b40 100755 --- a/content/api_en/keyPressed.xml +++ b/content/api_en/keyPressed.xml @@ -41,6 +41,8 @@ Because of how operating systems handle key repeats, holding down a key may caus Note that there is a similarly named boolean variable called keyPressed. See its reference page for more information.

    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. +

    +With the release of macOS Sierra, Apple changed how key repeat works, so keyPressed may not function as expected. See here for details of the problem and how to fix it. ]]> diff --git a/content/api_en/launch.xml b/content/api_en/launch.xml index 464902f0a..87b86e389 100755 --- a/content/api_en/launch.xml +++ b/content/api_en/launch.xml @@ -27,36 +27,14 @@ void mousePressed() { ]]> - - - - - - 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[]). +Attempts to open an application or file using your platform's launcher. The 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).
    +
    +This function (roughly) emulates what happens when you double-click an application or document in the macOS Finder, the Windows Explorer, or your favorite Linux file manager. If you're trying to run command line functions directly, use the exec() function instead (see below).
    +
    +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 and prays that something useful happens.
    +
    +For users familiar with Java, this is not the same as Runtime.exec(), because the launcher command is prepended. Instead, the exec(String[]) function is a shortcut for Runtime.getRuntime.exec(String[]). The exec() function is documented in the JavaDoc in the PApplet class. ]]>     diff --git a/content/api_en/lerpColor.xml b/content/api_en/lerpColor.xml index 07e24aa29..99ab9f4f4 100755 --- a/content/api_en/lerpColor.xml +++ b/content/api_en/lerpColor.xml @@ -29,7 +29,7 @@ rect(70, 20, 20, 60); amt parameter is the amount to interpolate between the two values where 0.0 equal to the first point, 0.1 is very near the first point, 0.5 is halfway in between, etc. +Calculates a color between two colors at a specific increment. The amt parameter is the amount to interpolate between the two values where 0.0 is equal to the first point, 0.1 is very near the first point, 0.5 is halfway in between, etc.
    An amount below 0 will be treated as 0. Likewise, amounts above 1 will be capped at 1. This is different from the behavior of lerp(), but necessary because otherwise numbers outside the range will produce strange and unexpected colors. ]]>     diff --git a/content/api_en/libraries/index.html b/content/api_en/libraries/index.html index c33c26703..e507a7c8b 100644 --- a/content/api_en/libraries/index.html +++ b/content/api_en/libraries/index.html @@ -16,7 +16,12 @@
    PDF Export
    Network

    Send and receive data over the Internet through simple clients and servers.

    • - + +
  • +
    SVG Export
    +

    Create SVG files.

    +
    • +
  • Serial

    Send data between Processing and external hardware through serial communication (RS-232).

    @@ -37,7 +42,12 @@
    Video
    Sound

    Playback audio files, audio input, synthesize sound, and effects.

    • - + +
  • +
    Hardware I/O
    +

    Access peripherals on the Raspberry Pi and other Linux-based computers

    +
    • +

    Contributions

    diff --git a/content/api_en/loadJSONArray.xml b/content/api_en/loadJSONArray.xml index d7b7444ac..da22530e9 100755 --- a/content/api_en/loadJSONArray.xml +++ b/content/api_en/loadJSONArray.xml @@ -13,24 +13,26 @@ 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/loadStrings.xml b/content/api_en/loadStrings.xml index 50a71d6cf..321fa0140 100755 --- a/content/api_en/loadStrings.xml +++ b/content/api_en/loadStrings.xml @@ -11,7 +11,7 @@ .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.

    -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 both a header and the file type, separate the options with commas, as in: loadTable("data.csv", "header, tsv")
    +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 07002b68d..6290c6e28 100755 --- a/content/api_en/loadXML.xml +++ b/content/api_en/loadXML.xml @@ -46,7 +46,7 @@ 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. +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/match.xml b/content/api_en/match.xml index 1db3a9f3a..92d1b2fdf 100755 --- a/content/api_en/match.xml +++ b/content/api_en/match.xml @@ -51,7 +51,7 @@ To use the function, first check to see if the result is null. If the result is
    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. +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 56feb6b5b..4f0345fbe 100644 --- a/content/api_en/matchAll.xml +++ b/content/api_en/matchAll.xml @@ -33,7 +33,7 @@ To use the function, first check to see if the result is null. If the result is
    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. +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/mouseWheel.xml b/content/api_en/mouseWheel.xml index 02c01cd7a..0a2344176 100755 --- a/content/api_en/mouseWheel.xml +++ b/content/api_en/mouseWheel.xml @@ -26,7 +26,7 @@ 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/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 7eb3d6803..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/noSmooth.xml b/content/api_en/noSmooth.xml index aa1ceec8d..d40dd92e6 100755 --- a/content/api_en/noSmooth.xml +++ b/content/api_en/noSmooth.xml @@ -38,7 +38,7 @@ void draw() { 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. +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/noiseDetail.xml b/content/api_en/noiseDetail.xml index b770659f0..dfd0d0633 100755 --- a/content/api_en/noiseDetail.xml +++ b/content/api_en/noiseDetail.xml @@ -31,7 +31,7 @@ void draw() { +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.

    diff --git a/content/api_en/parseJSONArray.xml b/content/api_en/parseJSONArray.xml index f4cbb0b98..cdb4a4832 100755 --- a/content/api_en/parseJSONArray.xml +++ b/content/api_en/parseJSONArray.xml @@ -11,7 +11,7 @@ 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 index 8be6e94d4..1a2e15e63 100755 --- a/content/api_en/pixelHeight.xml +++ b/content/api_en/pixelHeight.xml @@ -8,10 +8,41 @@ + + + + diff --git a/content/api_en/pixelWidth.xml b/content/api_en/pixelWidth.xml index 45ab35d9e..5f88fa136 100755 --- a/content/api_en/pixelWidth.xml +++ b/content/api_en/pixelWidth.xml @@ -8,10 +8,41 @@ + + + + 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/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/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 1cf51f929..c3dd03bc5 100644 --- a/content/api_en/quadraticVertex.xml +++ b/content/api_en/quadraticVertex.xml @@ -35,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/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 + 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(). +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/shorten.xml b/content/api_en/shorten.xml index 82961260a..41746c5ad 100755 --- a/content/api_en/shorten.xml +++ b/content/api_en/shorten.xml @@ -20,7 +20,7 @@ println(sa2); // 'sa2' now contains OH, NY
    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 91b88ce52..bd6f4c1b0 100755 --- a/content/api_en/size.xml +++ b/content/api_en/size.xml @@ -51,25 +51,31 @@ box(35); setup() function, the size() function must be the first line of code inside setup().
    +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 system 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 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.0, 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).
    +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.

    -As of Processing 3.0, to use variables as the parameters to size() function, place the size() function within the settings() function. There is more information about this on the settings() reference page.
    +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 6b82e35b5..c19f7a303 100755 --- a/content/api_en/smooth.xml +++ b/content/api_en/smooth.xml @@ -28,6 +28,8 @@ void draw() { + + + + + smooth() only needs to be used when a program needs to set the smoothing in a different way. The level parameter increases the level 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.
    -
    +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 c62c959e8..a9f5358c6 100755 --- a/content/api_en/splice.xml +++ b/content/api_en/splice.xml @@ -39,7 +39,7 @@ 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 13841d3ba..5b01ca9f2 100755 --- a/content/api_en/split.xml +++ b/content/api_en/split.xml @@ -38,7 +38,7 @@ 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. Reference for Processing version 1.5. If you have a previous version, use the reference included with your software. If you see any errors or have suggestions, please let us know. - If you prefer a more technical reference, visit the Processing Javadoc. + If you prefer a more technical reference, visit the Processing Javadoc. diff --git a/content/api_en/trim.xml b/content/api_en/trim.xml index 4b91885ed..68afbfec6 100755 --- a/content/api_en/trim.xml +++ b/content/api_en/trim.xml @@ -18,7 +18,7 @@ println(s2); // Prints "Somerville MA" String[] a1 = { " inconsistent ", " spacing" }; // Note spaces String[] a2 = trim(a1); -println(a2); +printArray(a2); // Prints the following array contents to the console: // [0] "inconsistent" // [1] "spacing" diff --git a/content/api_en/updatePixels.xml b/content/api_en/updatePixels.xml index 200667c22..fb3ba9af1 100755 --- a/content/api_en/updatePixels.xml +++ b/content/api_en/updatePixels.xml @@ -24,10 +24,6 @@ updatePixels(); pixels[] array. Use in conjunction with loadPixels(). If you're only reading pixels from the array, there's no need to call updatePixels() — updating is only necessary to apply changes. -

    -Certain renderers may or may not seem to require loadPixels() or updatePixels(). However, the rule is that any time you want to manipulate the pixels[] array, you must first call loadPixels(), and after changes have been made, call updatePixels(). Even if the renderer may not seem to use this function in the current Processing release, this will always be subject to change. -

    -Currently, while none of the renderers use the additional parameters to updatePixels(), this may be implemented in the future. ]]>     diff --git a/content/api_media/LIB_sound_Pulse.png b/content/api_media/LIB_sound_Pulse.png new file mode 100644 index 000000000..6104e4931 Binary files /dev/null and b/content/api_media/LIB_sound_Pulse.png differ diff --git a/content/api_media/LIB_sound_SawOsc.png b/content/api_media/LIB_sound_SawOsc.png new file mode 100644 index 000000000..845db35d1 Binary files /dev/null and b/content/api_media/LIB_sound_SawOsc.png differ diff --git a/content/api_media/LIB_sound_SinOsc.png b/content/api_media/LIB_sound_SinOsc.png new file mode 100644 index 000000000..f510c14ed Binary files /dev/null and b/content/api_media/LIB_sound_SinOsc.png differ diff --git a/content/api_media/LIB_sound_SqrOsc.png b/content/api_media/LIB_sound_SqrOsc.png new file mode 100644 index 000000000..1e6941c6e Binary files /dev/null and b/content/api_media/LIB_sound_SqrOsc.png differ diff --git a/content/api_media/LIB_sound_TriOsc.png b/content/api_media/LIB_sound_TriOsc.png new file mode 100644 index 000000000..a7d89b40d Binary files /dev/null and b/content/api_media/LIB_sound_TriOsc.png differ diff --git a/content/api_media/text_2.png b/content/api_media/text_2.png index 464217613..841e5e16d 100644 Binary files a/content/api_media/text_2.png and b/content/api_media/text_2.png differ diff --git a/content/curated.xml b/content/curated.xml index 8859756d6..87029364a 100755 --- a/content/curated.xml +++ b/content/curated.xml @@ -1,15 +1,137 @@ + + images/pour.jpg + + ‘Pour Reception’ is a playful radio that uses machine learning and tangible computing to challenge our cultural understanding of what an interface is and can be. Two glasses of water are turned into a digital material for the user to explore and appropriate. + http://www.toreknudsen.dk/work/pour-reception/ + Tore Knudsen + + + + images/digits.jpg + + Gysin-Vanetti are an artist duo exploring images and patterns using the type geometries of multipurpose displays. Using only prevailing forms, Gysin-Vanetti build images, animations and generate patterns. + https://www.creativeapplications.net/processing/gysin-vanetti-o-is-not-a-letter-its-a-circle/ + Gysin&Vanetti + CreativeApplications.Net + + + + images/volume.jpg + + Created by NY based art and architecture collective Softlab, ‘Volume’ is an interactive cube of responsive mirrors that redirect light and sound to spatialize and reflect the excitement of surrounding festival goers. + http://softlabnyc.com/portfolio/volume/ + Softlab + + + + images/komorebi.jpg + + komorebi is a platform that uses a robotic projector and generative projections to replicate the natural reflections and shadows of sunlight. komorebi can create sunlight filtering through leaves or a dance of light and shadow. + http://komorebi.studio/ + Leslie Nooteboom + + + + images/particleflow.jpg + + Particle Flow is a physical installation comprised of granules driven by gravity and topography forming an analogue particle system. A moving slanted plane and a grid of motorized stamps control the elements to form infinite variations of behaviours and patterns. + http://neoanalog.io/particle-flow/ + NEOANALOG + CreativeApplications.Net + + + + images/objectifier.jpg + + Objectifier empowers people to train objects in their daily environment to respond to their unique behaviours. Interacting with Objectifier is much like training a pet and it sees and understands its environment. + https://bjoernkarmann.dk/objectifier + Bjørn Karmann + CreativeApplications.Net + + + + images/random.jpg + + Created by Berlin based Ralf Baecker, Random Access Memory is a fully functional digital memory. Instead of operating on semi-conducting components to represent either the binary states of 0 (zero) or 1 (one), the memory uses grains of sand as storage material. + http://www.rlfbckr.org/work/random-access-memory/ + Ralf Baecker + CreativeApplications.Net + + + + images/aadrl.jpg + + The AADRL is a post-professional graduate design programme at the Architectural Association School of Architecture in London. Their research is focused on architectural design that is proto-typical, scenario driven and uses behaviour robotics as a design enquiry. + http://www.creativeapplications.net/processing/aadrl-behavioural-complexity/ + AADRL + CreativeApplications.Net + + + + images/terrapattern.jpg + + Terrapattern is a visual search tool for satellite imagery. The project provides journalists, citizen scientists, and other researchers with the ability to quickly scan large geographical regions for specific visual features. + http://www.terrapattern.com + Terrapattern + + + + images/FluidLeaves.jpg + + A generative approach to pattern design, which in combination with variable printing results in a unique design each time. The project grew out of an identity investigation for tea boutique, ‘Tee & Cupp’ in Xian. + + http://reinoudvanlaar.nl/project/leavespattern/ + Reinoud van Laar + + + + images/cfcityflows.jpg + + cf.city flows is a comparative visualization environment of urban bike mobility designed to help citizens casually analyze three bike-sharing systems in the context of a public exhibition space. + + https://uclab.fh-potsdam.de/cf/ + cf.city flows + + + + images/autoorchestra.jpg + + The Automatic Orchestra is an audio installation exploring algorithmic composition and networked music. The perpetual interaction among the devices and the interpretation of encoded musical messages blurs the distinctiveness between structured composition and performative improvisation. + + http://digitalmedia-bremen.de/en/project/automatic-orchestra/ + Digital Media Bremen + + + + images/possible.jpg + + Possible, Plausible, Potential is a set of three series of isometric drawings generated by code and printed with colored markers on a plotter machine. In these drawings, Miguel explores a bridge between the iterative aspect of algorithms and the utopian aspect of modern architecture. Each drawing is a unique variation of the same set of rules and carefully placed random decisions. + + http://superficie.ink/ + Miguel Nóbrega + + + + images/stewart.jpg + + Created by Felix Ros, Stewart is a hypothetical tactile interface designed for a fully autonomous car. Working around the idea that even thought self-driving offer obvious benefits, they also eliminate a sense of freedom, expression, and control while driving. Stewart’s objective is to accommodate a healthy relation between man and machine. + + http://felixros.com + Felix Ros + + images/traces.jpg - Traces project explores the concept of programming everyday materials where objects are “made to act” by re-forming following a set of specific instructions. Dana developed 12 processed-folding objects series, using Processing and various physical techniques – printing, twisting, laser-cutting, knotting and framing. + Traces project explores the concept of programming everyday materials where objects are “made to act” by re-forming following a set of specific instructions. Dana developed 12 processed-folding objects series, using Processing and various physical techniques – printing, twisting, laser-cutting, knotting and framing. https://vimeo.com/133662815 Vimeo More Info - + images/pixtil.jpg @@ -19,8 +141,8 @@ http://pixtil.fr/php/produits/accueil.php?page=2#debut Pixtil More Info - - + + images/lightkinetics.jpg @@ -28,19 +150,19 @@ http://espadaysantacruz.com/Light-kinetics Light Kinetics - - + + images/pathfinder.jpg - Created by Princemio in collaboration with onformative and presented at Choreographic Coding laboratory in Frankfurt 2013, the Pathfinder project was created with aim to contribute to the creative processes of choreographic development. + Created by Princemio in collaboration with onformative and presented at Choreographic Coding laboratory in Frankfurt 2013, the Pathfinder project was created with aim to contribute to the creative processes of choreographic development. http://princemio.net/portfolio/pathfinder/ Pathfinder Motionbank Onformative - + images/dextro.jpg @@ -50,7 +172,7 @@ Dextro Vimeo - + images/rc4.jpg @@ -60,7 +182,7 @@ GAD – RC4 CreativeApplications.Net - + images/filament.jpg @@ -70,7 +192,7 @@ http://www.liaworks.com/theprojects/filament-sculptures/ Lia liasomething.tumblr.com - + images/Phantogram.jpg @@ -81,16 +203,16 @@ Timothy Saccenti Joshua Davis Watch Video - + images/keyflies.jpg Created by Miles Peyton, first year student at the Carnegie Mellon University, Keyfleas is an experiment in interactive augmented projection. Miles used Processing and Box2D to create an augmented projection on the keyboard. As the user types, the “fleas” swarm around the pressed key, avoiding the letters. - http://cmuems.com/2013/a/miles/10/17/keyfleas/ - CMU / Electronic Media Studio 2 - + https://vimeo.com/151334392 + CMU / Electronic Media Studio 2 + images/petting.jpg @@ -99,7 +221,7 @@     http://minimaforms.com/#item=petting-zoo-frac-2 Minimaforms - + images/fragmented.jpg @@ -108,8 +230,8 @@ http://phillipstearns.wordpress.com/fragmented-memory/ Phillip Stearns - - + + images/avena.jpg @@ -117,7 +239,7 @@ http://benedikt-gross.de/log/2013/06/avena-test-bed_agricultural-printing-and-altered-landscapes/ Benedikt Groß - + images/kinograph.jpg @@ -127,7 +249,7 @@ http://mepler.com/Kinograph Kinograph - + images/fluid.jpg @@ -136,7 +258,7 @@ http://cargocollective.com/hnx/fluid Hannes Jung - + images/3dprintedrecord.jpg @@ -145,7 +267,7 @@ http://www.instructables.com/id/3D-Printed-Record/ Instructables - + images/digitalnatives.jpg @@ -154,7 +276,7 @@ http://www.plummerfernandez.com/Digital-Natives Matthew Plummer-Fernandez - + images/stonespray.jpg @@ -163,7 +285,7 @@ http://www.stonespray.com Petr Novikov, Inder Shergill and Anna Kulik - + images/citysymphonies.jpg @@ -171,9 +293,8 @@ http://markmckeague.com/work/city-symphonies/ Mark McKeague - More on CreativeApplications.Net - + images/silenc2.png @@ -181,9 +302,8 @@ http://www.flickr.com/photos/kennethaleksander/sets/72157629659743887 Flick Page - CreativeApplications.Net - + images/unnamed.jpg @@ -192,7 +312,7 @@ http://wearechopchop.com/%E2%80%9Cunnamed-soundsculpture%E2%80%9D/ We Are Chopchop - + images/soundmachines.jpg @@ -200,9 +320,8 @@ http://www.the-product.org/soundmachines The Product - CreativeApplications.Net - + images/visualeditions.jpg @@ -211,7 +330,7 @@ http://www.visual-editions.com Visual Editions - + images/maxplanck.jpg @@ -220,7 +339,7 @@ http://max-planck-research-networks.net/ Max Planck Reasearch Networks - + images/creators.jpg @@ -229,7 +348,7 @@ http://www.thecreators.tv The Creators - + images/golberg.jpg @@ -238,7 +357,7 @@ http://www.the-product.org/rube-goldberg-processor The Product - + images/prototyp0.jpg @@ -246,8 +365,8 @@ http://www.yannickmathey.com/prototyp Yannick Mathey - - + + images/nytcascade.jpg @@ -256,7 +375,7 @@ http://nytlabs.com/projects/cascade.html NYTimes R&D Lab - + images/mitidentity.jpg @@ -265,7 +384,7 @@ http://www.thegreeneyl.com/mit-media-lab-identity-1 TheGreenEyl - + images/continuum.jpg @@ -274,7 +393,7 @@ http://www.rhymeandreasoncreative.com/portfolio/index.php?project=continuum Mary Huang - + - + images/casey_pc.jpg @@ -296,7 +415,7 @@ Download from CAN Casey Reas - + images/108.jpg @@ -305,7 +424,7 @@ http://nilsvoelker.com/content/onehundredandeight/index.html Nils Völker - + images/privacy.jpg @@ -314,7 +433,7 @@ http://www.niklasroy.com/project/88/my-little-piece-of-privacy/ Niklas Roy - + images/strata.jpg @@ -323,7 +442,7 @@ http://www.quayola.com/selectedartworks/strata3/ Quayola - + images/shakespeare.jpg @@ -332,7 +451,7 @@ http://www.understanding-shakespeare.com Stephan Thiel - + images/one-perfect-cube.jpg @@ -341,7 +460,7 @@ http://florianjenett.de/one-perfect-cube-making-of/ FlorianJenett.de - + images/feltron.jpg @@ -351,7 +470,7 @@ 2009 Report and Processing Feltron.com - + images/computing-kaizen.jpg @@ -361,7 +480,7 @@ Proxy GSAPP - + images/finecollection.jpg @@ -371,7 +490,7 @@ geschoir.de theplacetofindme.de - + images/justlanded.jpg @@ -380,7 +499,7 @@ http://blog.blprnt.com/blog/blprnt/just-landed-processing-twitter-metacarta-hidden-data blprnt.com - + images/johnhenry.jpg @@ -389,7 +508,7 @@ http://brysonian.com/john-henry-von-neumann brysonian.com - + images/intheair.jpg @@ -399,7 +518,7 @@ Victor Viña Nerea Calvillo - + images/silica.jpg @@ -409,17 +528,17 @@ tadar.net tadar Flickr - + images/mycelium.png - A simulation of fungal hyphae growth using images as food. + A simulation of fungal hyphae growth using images as food. http://onecm.com/projects/mycelium/ onecm.com onecm Flickr - + images/nyx.jpg @@ -428,7 +547,7 @@ http://vimeo.com/3872857 NYX Blog - + images/golan_cards.jpg @@ -448,7 +567,7 @@ shiftcontrol NR2154 - + images/branching.jpg @@ -460,7 +579,7 @@ Andrew Lucia Jones Lab - + images/realtime.jpg @@ -470,7 +589,7 @@ Zum Kuckuck Atelier Markgraph - + images/wf3.png @@ -480,7 +599,7 @@ benhem.com RogueBasin - + images/mud.jpg @@ -490,7 +609,7 @@ tomgerhardt.com NYU ITP - + images/mos.gif @@ -501,7 +620,7 @@ ComputationalPile Arcade - + images/terre.jpg @@ -514,7 +633,7 @@ Michael Doherty Hans-Christoph Steiner - + images/mtv.gif @@ -524,7 +643,7 @@ Dmtr.org Piloto - + images/camp.jpg @@ -533,7 +652,7 @@ http://www.field.io/project/interim-camp field - + images/aeolab.jpg @@ -542,7 +661,7 @@ http://www.aeolab.com/projects/peoplemover/applet/ Aeolab - + images/balldroppings.gif @@ -552,7 +671,7 @@ BallDroppings JTNimoy.net - + images/oasis.gif @@ -561,7 +680,7 @@ http://everyware.kr/portfolio/contents/09_oasis/ everyware - + images/platonic.jpg @@ -571,47 +690,47 @@ Michael Hansmeyer Subdivision Flickr Set - + images/monsters.gif - Black and white, reactive monsters created by the Processing community. + Black and white, reactive monsters created by the Processing community. http://www.rmx.cz/monsters/ Rmx - + images/itp2.jpg - For the second year, Dan Shiffman's NYU students write software for a 120 by 12 - foot video wall at IAC's world headquarters in NYC. + For the second year, Dan Shiffman's NYU students write software for a 120 by 12 + foot video wall at IAC's world headquarters in NYC. http://gizmodo.com/5110633/120-feet-of-video-art-final-exams-at-nyus-big-screens-class Shiffman.net - + images/emergence.jpg - Realtime art installation that explores how complex systems and patterns arise out of + Realtime art installation that explores how complex systems and patterns arise out of a multiplicity of simple interactions. http://emergenceproject.org/blog/?page_id=180 The Emergence Project Daniel Sauter - + images/roots.jpg - An interactive installation where participants engage in making generative / semi-generative / and or + An interactive installation where participants engage in making generative / semi-generative / and or composed music by moving their fingers and objects around the Brick multi-touch surface. http://flipmu.com/work/bricktable/what-is-roots/ Memo.tv - + images/npz.gif @@ -624,18 +743,18 @@ Banas' design Banas' oceanography - + images/maeve.jpg - Provides visual and tangible access to the conceptual networks behind architectural projects. + Provides visual and tangible access to the conceptual networks behind architectural projects. The installation is part of the 11th International Architecture Exhibition of the Venice Biennale. http://portal.mace-project.eu/maeve/ FH Potsdam MACE - + images/ymyi.jpg @@ -645,7 +764,7 @@ Joao Martinho Moura Master in Technology and Digital Art - + images/bodynavigation.jpg @@ -665,7 +784,7 @@ http://casualdata.com/newsknitter Mahir M. Yavuz - + images/cho.jpg @@ -675,26 +794,26 @@ Typotopo.com Pcho.net - + images/muth.jpg - A generative video piece with music by Hiaz. + A generative video piece with music by Hiaz. http://www.davidmuth.net/videos/counterclockwise/ DavidMuth.net - + images/proximity.gif - Generative, parameterized images and sound. + Generative, parameterized images and sound. http://www.proximityofneeds.org/ strangethingshappen.org - - + + images/houck.jpg @@ -703,19 +822,19 @@ http://www.johnhouck.com/p/ JohnHouck.com - + images/itp.jpg Dan Shiffman's NYU students write software for a 120 by 12 foot video wall - at IAC's world headquarters designed by Frank Gehry. + at IAC's world headquarters designed by Frank Gehry. http://www.flickr.com/photos/shiffman/sets/72157601572932676/ Shiffman.net - + images/nervous.jpg @@ -725,18 +844,18 @@ http://www.n-e-r-v-o-u-s.com/play_and_learn.php Nervous System - + images/mit.jpg - Shows the global exchange of information by visualizing volumes of data flowing + Shows the global exchange of information by visualizing volumes of data flowing in and out of New York City. http://senseable.mit.edu/nyte/ SENSEable City Lab AaronKoblin.com - + images/cascade.jpg @@ -745,17 +864,17 @@ http://www.trsp.net/cow/ Transparent - + images/mypocket.jpg - Discloses the artist's personal financial records by exploring and revealing essential + Discloses the artist's personal financial records by exploring and revealing essential patterns in daily transactions. http://transition.turbulence.org/Works/mypocket/ Burak-Arikan.com - + images/taobot.jpg @@ -765,7 +884,7 @@ Taobot Michael Fakesch - + images/whiteglove.jpg @@ -775,7 +894,7 @@ Evan Roth Ben Engebreth - + images/foxmovies.jpg @@ -785,7 +904,7 @@ Flight404 Nervo - + images/firstborn.jpg @@ -794,7 +913,7 @@ http://www.firstborn.com/#/our-portfolio/1007/ Firstborn - + images/simdiv.jpg @@ -804,19 +923,19 @@ Philipp Steinweber Andreas Koller - + - + images/sheep.gif @@ -828,7 +947,7 @@ Aaron Koblin - + images/catanese.jpg @@ -839,7 +958,7 @@ http://www.paulcatanese.com/artwork/celestial/process.html PaulCatanese.com - + images/any.gif @@ -848,7 +967,7 @@ http://carohorn.de/anymails/ CaroHorn.de - + images/hehe.jpg @@ -858,7 +977,7 @@ http://hehe.org.free.fr/hehe/champsdozone/ HeHe - + images/carden.jpg @@ -867,7 +986,7 @@ http://www.tom-carden.co.uk/p5/tube_map_travel_times/applet/ Tom Carden - + images/proto.jpg @@ -876,27 +995,27 @@ http://www.fidgt.com/visualize/ Protohaus - + images/lovebytes.png - A population of unique friendly furry faces to appear across all festival literature for Lovebytes 2007. + A population of unique friendly furry faces to appear across all festival literature for Lovebytes 2007. http://universaleverything.com/#/UE205 Universal Everything - + images/house.jpg - An environment constructed from thousands of low tech components that can be reconfigured by its occupants. + An environment constructed from thousands of low tech components that can be reconfigured by its occupants. http://house.propositions.org.uk/ Haque Aether Reorient - + images/muon.jpg @@ -905,7 +1024,7 @@ http://www.movingbrands.com/?category_name=kef-work#experience Moving Brands - + images/universe.gif @@ -914,18 +1033,18 @@ http://www.number27.org/universe.html Jonathan Harris - + - + images/suzung.jpg @@ -934,27 +1053,27 @@ http://www.suzung.com/body/2006/Kaleido/display.htm Studio Site Suzung - + images/stateoftheunion.gif - Provides access to the corpus of all the State of the Union addresses from 1790 to 2006. + Provides access to the corpus of all the State of the Union addresses from 1790 to 2006. http://stateoftheunion.onetwothree.net/ onetwothree - + - + images/juani.jpg @@ -964,7 +1083,7 @@ Onionlab Yo soy la Juani - + images/spies.gif @@ -974,7 +1093,7 @@ Pentagram JamesNSears.com - + images/mutualism.jpg @@ -1032,7 +1151,7 @@ Motion Theory --> - + images/wefeelfine.jpg @@ -1141,7 +1260,7 @@ images/aqueous.jpg - Aqueous is a meditative space that encourages perception of small things. Water droplets fall from the ceiling through the space into water-filled tubes approximately tuned in a scale spanning two octaves. + Aqueous is a meditative space that encourages perception of small things. Water droplets fall from the ceiling through the space into water-filled tubes approximately tuned in a scale spanning two octaves. works/aqueous/ Zehao.com @@ -1235,7 +1354,7 @@ haohao/haohao.pde --> - + - + images/timescape.jpg @@ -1258,7 +1377,7 @@ Phantasian Gone - + images/ortho.gif @@ -1268,7 +1387,7 @@ ortho/orthotype.pde Ortho-type - + images/acoustic.jpg @@ -1279,22 +1398,22 @@ Acoustic Cartography Zum Kuckuck - + images/min_mod.gif - A sound phenomenon represented through a spatial distribution of minimal elements, creating a sensitive environment influenced by the sounds generated in the surrounding space. + A sound phenomenon represented through a spatial distribution of minimal elements, creating a sensitive environment influenced by the sounds generated in the surrounding space. http://www.limiteazero.com/min_mod/ min_mod/min_mod.pde Limiteazero - + - + images/chronodraw.gif @@ -1312,18 +1431,18 @@ chronodraw/chronodraw.txt www.ertdfgcvb.ch - + images/papa.jpg - Software for Papa Roach's "Getting Away with Murder" music video by Motion Theory + Software for Papa Roach's "Getting Away with Murder" music video by Motion Theory works/papa/index.html papa/ticker_applet.txt Quilime Motion Theory - + - + images/ecstasy.gif @@ -1346,18 +1465,18 @@ ecstasy/n_e_13.pde Machinatus - + images/d5lv.jpg - Exploring volume and emotional texture with simple generative geometry. + Exploring volume and emotional texture with simple generative geometry. Interaction and randomness modify the structure. works/d5lv/index.html d5lv/D5LV.pde W:Mute - + images/discom.jpg @@ -1371,7 +1490,7 @@ Justin Manor SOSOlimited - + images/pachinko.jpg @@ -1383,7 +1502,7 @@ c505 Pretendster - + images/tokyo.jpg @@ -1393,7 +1512,7 @@ tokyo/Tokyo.pde SMS - + images/katya.jpg @@ -1404,7 +1523,7 @@ lab5769 lab5769 portraits - + images/ttc.gif @@ -1415,7 +1534,7 @@ Chronotext Chronotext Devices - + images/liquid.jpg @@ -1426,7 +1545,7 @@ Quasimondo Incubator Quasimondo - + images/relations.gif @@ -1437,7 +1556,7 @@ Abstract-Codex Ghost Agency - + images/nudemengarden.gif @@ -1448,7 +1567,7 @@ db-db Experimental Vision - + images/starnursery.jpg @@ -1459,7 +1578,7 @@ Ryan Alexander Motion Theory - + images/techsupport.gif @@ -1469,7 +1588,7 @@ techsupport/tech_support.pde Coin-Operated - + images/base26.gif @@ -1481,7 +1600,7 @@ Toxi processing work Toxi blog - + images/superhero.gif @@ -1492,7 +1611,7 @@ Beyond Three Processing @ Beyond Three - + images/redux.jpg @@ -1502,7 +1621,7 @@ redux/moviemap3.pde Brendan Dawes - + images/872a_jogan.gif @@ -1511,7 +1630,7 @@ works/versionb/index.html versionb/mmj_project_FINALd.pde - + images/872a_stanat.gif @@ -1520,7 +1639,7 @@ works/bees/index.html bees/bees6.pde - + - + - + images/chamber.gif @@ -1557,7 +1676,7 @@ Bubble Chamber Levitated.net - + images/jackolantern.jpg @@ -1567,7 +1686,7 @@ jackolantern/jackolantern.pde LCD modules - + images/sonicwire.gif @@ -1578,7 +1697,7 @@ Pitaru.com InsertSilence - + images/tracking.jpg @@ -1588,7 +1707,7 @@ tracking/tracking.pde Flight404 - + images/juhuu.gif @@ -1598,7 +1717,7 @@ juhuu/juhuu.pde Juhuu.nu - + images/ricochet.gif @@ -1609,7 +1728,7 @@ JTNimoy Potatoland - + images/skyline.gif @@ -1619,7 +1738,7 @@ skyline/skyline.pde Lightcycle - + images/wiggle.gif @@ -1629,7 +1748,7 @@ wiggle/wiggle.pde Uncontrol - + images/withouttitle.jpg @@ -1640,7 +1759,7 @@ Re-Move Wofbot - + images/articulate.gif @@ -1650,7 +1769,7 @@ articulate/articulate.pde GroupC - + images/sodaprocessing.gif @@ -1661,18 +1780,18 @@ Soda SodaPlay - + images/c_drawer.jpg - Like drawing with a bunch of crayons in one hand. + Like drawing with a bunch of crayons in one hand. Simple and messy, but fun. works/cdrawer/index.html cdrawer/cdrawer.pde Evolution Zone - + images/inequality.gif @@ -1683,7 +1802,7 @@ They Rule Future Farmers - + images/pond.gif @@ -1694,7 +1813,7 @@ Metaphorical Royal College of Art - + images/hinundher.gif @@ -1704,7 +1823,7 @@ hinundher/hinundher.pde Esono - + images/yellowtail.gif @@ -1715,7 +1834,7 @@ Yellowtail Flong - + images/004.gif @@ -1726,7 +1845,7 @@ Alphabot ACG - + images/europa.gif @@ -1737,7 +1856,7 @@ Glen Murphy Body Tag - + images/003.gif @@ -1748,7 +1867,7 @@ Schoenerwissen Minitasking - + images/002.gif @@ -1757,7 +1876,7 @@ 002/code.html kramdesign - + images/001.gif @@ -1768,5 +1887,5 @@ Genomic Cartography ACG - + diff --git a/content/curated_images/FluidLeaves.jpg b/content/curated_images/FluidLeaves.jpg new file mode 100644 index 000000000..9d483098f Binary files /dev/null and b/content/curated_images/FluidLeaves.jpg differ diff --git a/content/curated_images/FluidLeaves@2x.jpg b/content/curated_images/FluidLeaves@2x.jpg new file mode 100644 index 000000000..fa2964263 Binary files /dev/null and b/content/curated_images/FluidLeaves@2x.jpg differ diff --git a/content/curated_images/aadrl.jpg b/content/curated_images/aadrl.jpg new file mode 100644 index 000000000..2c5348d9f Binary files /dev/null and b/content/curated_images/aadrl.jpg differ diff --git a/content/curated_images/aadrl@2x.jpg b/content/curated_images/aadrl@2x.jpg new file mode 100644 index 000000000..39a09ccee Binary files /dev/null and b/content/curated_images/aadrl@2x.jpg differ diff --git a/content/curated_images/autoorchestra.jpg b/content/curated_images/autoorchestra.jpg new file mode 100644 index 000000000..0d09ca9bb Binary files /dev/null and b/content/curated_images/autoorchestra.jpg differ diff --git a/content/curated_images/autoorchestra@2x.jpg b/content/curated_images/autoorchestra@2x.jpg new file mode 100644 index 000000000..315ede249 Binary files /dev/null and b/content/curated_images/autoorchestra@2x.jpg differ diff --git a/content/curated_images/cfcityflows.jpg b/content/curated_images/cfcityflows.jpg new file mode 100644 index 000000000..fec63eb3b Binary files /dev/null and b/content/curated_images/cfcityflows.jpg differ diff --git a/content/curated_images/cfcityflows@2x.jpg b/content/curated_images/cfcityflows@2x.jpg new file mode 100644 index 000000000..9f05a006d Binary files /dev/null and b/content/curated_images/cfcityflows@2x.jpg differ diff --git a/content/curated_images/digits.jpg b/content/curated_images/digits.jpg new file mode 100644 index 000000000..ce85f5658 Binary files /dev/null and b/content/curated_images/digits.jpg differ diff --git a/content/curated_images/digits@2x.jpg b/content/curated_images/digits@2x.jpg new file mode 100644 index 000000000..4210c3068 Binary files /dev/null and b/content/curated_images/digits@2x.jpg differ diff --git a/content/curated_images/komorebi.jpg b/content/curated_images/komorebi.jpg new file mode 100644 index 000000000..2ac8c3e54 Binary files /dev/null and b/content/curated_images/komorebi.jpg differ diff --git a/content/curated_images/komorebi@2x.jpg b/content/curated_images/komorebi@2x.jpg new file mode 100644 index 000000000..051402f92 Binary files /dev/null and b/content/curated_images/komorebi@2x.jpg differ diff --git a/content/curated_images/objectifier.jpg b/content/curated_images/objectifier.jpg new file mode 100644 index 000000000..3ee65e4ca Binary files /dev/null and b/content/curated_images/objectifier.jpg differ diff --git a/content/curated_images/objectifier@2x.jpg b/content/curated_images/objectifier@2x.jpg new file mode 100644 index 000000000..654ad9dec Binary files /dev/null and b/content/curated_images/objectifier@2x.jpg differ diff --git a/content/curated_images/particleflow.jpg b/content/curated_images/particleflow.jpg new file mode 100644 index 000000000..67775c29c Binary files /dev/null and b/content/curated_images/particleflow.jpg differ diff --git a/content/curated_images/particleflow@2x.jpg b/content/curated_images/particleflow@2x.jpg new file mode 100644 index 000000000..efa22981f Binary files /dev/null and b/content/curated_images/particleflow@2x.jpg differ diff --git a/content/curated_images/possible.jpg b/content/curated_images/possible.jpg new file mode 100644 index 000000000..fe89a9c80 Binary files /dev/null and b/content/curated_images/possible.jpg differ diff --git a/content/curated_images/possible@2x.jpg b/content/curated_images/possible@2x.jpg new file mode 100644 index 000000000..ceb5b5913 Binary files /dev/null and b/content/curated_images/possible@2x.jpg differ diff --git a/content/curated_images/pour.jpg b/content/curated_images/pour.jpg new file mode 100644 index 000000000..2ba0d0b6c Binary files /dev/null and b/content/curated_images/pour.jpg differ diff --git a/content/curated_images/pour@2x.jpg b/content/curated_images/pour@2x.jpg new file mode 100644 index 000000000..3abdca466 Binary files /dev/null and b/content/curated_images/pour@2x.jpg differ diff --git a/content/curated_images/random.jpg b/content/curated_images/random.jpg new file mode 100644 index 000000000..8585738d9 Binary files /dev/null and b/content/curated_images/random.jpg differ diff --git a/content/curated_images/random@2x.jpg b/content/curated_images/random@2x.jpg new file mode 100644 index 000000000..fa423c542 Binary files /dev/null and b/content/curated_images/random@2x.jpg differ diff --git a/content/curated_images/stewart.jpg b/content/curated_images/stewart.jpg new file mode 100644 index 000000000..5b9374476 Binary files /dev/null and b/content/curated_images/stewart.jpg differ diff --git a/content/curated_images/stewart@2x.jpg b/content/curated_images/stewart@2x.jpg new file mode 100644 index 000000000..7fc072cfe Binary files /dev/null and b/content/curated_images/stewart@2x.jpg differ diff --git a/content/curated_images/terrapattern.jpg b/content/curated_images/terrapattern.jpg new file mode 100644 index 000000000..0db5a3f80 Binary files /dev/null and b/content/curated_images/terrapattern.jpg differ diff --git a/content/curated_images/terrapattern@2x.jpg b/content/curated_images/terrapattern@2x.jpg new file mode 100644 index 000000000..fe130d3a7 Binary files /dev/null and b/content/curated_images/terrapattern@2x.jpg differ diff --git a/content/curated_images/volume.jpg b/content/curated_images/volume.jpg new file mode 100644 index 000000000..1233bc741 Binary files /dev/null and b/content/curated_images/volume.jpg differ diff --git a/content/curated_images/volume@2x.jpg b/content/curated_images/volume@2x.jpg new file mode 100644 index 000000000..ddd536094 Binary files /dev/null and b/content/curated_images/volume@2x.jpg differ diff --git a/content/examples/Basics/Arrays/Array/Array.pde b/content/examples/Basics/Arrays/Array/Array.pde index 1fd43308e..57f4ce959 100644 --- a/content/examples/Basics/Arrays/Array/Array.pde +++ b/content/examples/Basics/Arrays/Array/Array.pde @@ -5,7 +5,7 @@ * is identified by an index number representing its position in * the array. Arrays are zero based, which means that the first * element in the array is [0], the second element is [1], and so on. - * In this example, an array named "coswav" is created and + * In this example, an array named "coswave" is created and * filled with the cosine values. This data is displayed three * separate ways on the screen. */ @@ -47,4 +47,4 @@ void draw() { line(i, y1, i, y2); } -} \ No newline at end of file +} diff --git a/content/examples/Basics/Color/Brightness/Brightness.pde b/content/examples/Basics/Color/Brightness/Brightness.pde index 261fdce38..7f0e4093a 100644 --- a/content/examples/Basics/Color/Brightness/Brightness.pde +++ b/content/examples/Basics/Color/Brightness/Brightness.pde @@ -11,7 +11,7 @@ int lastBar = -1; void setup() { size(640, 360); - colorMode(HSB, width, 100, width); + colorMode(HSB, width, 100, height); noStroke(); background(0); } diff --git a/content/examples/Basics/Color/RadialGradient/RadialGradient.pde b/content/examples/Basics/Color/RadialGradient/RadialGradient.pde index ed358a1e5..62df103d8 100644 --- a/content/examples/Basics/Color/RadialGradient/RadialGradient.pde +++ b/content/examples/Basics/Color/RadialGradient/RadialGradient.pde @@ -1,7 +1,7 @@ /** * Radial Gradient. * - * Draws are series of concentric circles to create a gradient + * Draws a series of concentric circles to create a gradient * from one color to another. */ diff --git a/content/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde b/content/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde index 1c2a398c9..ee7e74daf 100644 --- a/content/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde +++ b/content/examples/Basics/Data/DatatypeConversion/DatatypeConversion.pde @@ -16,7 +16,7 @@ textFont(createFont("SourceCodePro-Regular.ttf",24)); char c; // Chars are used for storing alphanumeric symbols float f; // Floats are decimal numbers int i; // Integers are values between 2,147,483,647 and -2147483648 -byte b; // Bytes are values between -128 and 128 +byte b; // Bytes are values between -128 and 127 c = 'A'; f = float(c); // Sets f = 65.0 diff --git a/content/examples/Basics/Form/PieChart/PieChart.pde b/content/examples/Basics/Form/PieChart/PieChart.pde index 915a1ef7e..0dd505e0e 100644 --- a/content/examples/Basics/Form/PieChart/PieChart.pde +++ b/content/examples/Basics/Form/PieChart/PieChart.pde @@ -23,8 +23,8 @@ void pieChart(float diameter, int[] data) { for (int i = 0; i < data.length; i++) { float gray = map(i, 0, data.length, 0, 255); fill(gray); - arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(angles[i])); - lastAngle += radians(angles[i]); + arc(width/2, height/2, diameter, diameter, lastAngle, lastAngle+radians(data[i])); + lastAngle += radians(data[i]); } } diff --git a/content/examples/Basics/Form/RegularPolygon/RegularPolygon.pde b/content/examples/Basics/Form/RegularPolygon/RegularPolygon.pde index 09379230c..52d8f81af 100644 --- a/content/examples/Basics/Form/RegularPolygon/RegularPolygon.pde +++ b/content/examples/Basics/Form/RegularPolygon/RegularPolygon.pde @@ -24,7 +24,7 @@ void draw() { pushMatrix(); translate(width*0.5, height*0.5); rotate(frameCount / 50.0); - polygon(0, 0, 80, 20); // Icosahedron + polygon(0, 0, 80, 20); // Icosagon popMatrix(); pushMatrix(); diff --git a/content/examples/Basics/Input/KeyboardFunctions/KeyboardFunctions.pde b/content/examples/Basics/Input/KeyboardFunctions/KeyboardFunctions.pde index f29106535..7e70c2f0b 100644 --- a/content/examples/Basics/Input/KeyboardFunctions/KeyboardFunctions.pde +++ b/content/examples/Basics/Input/KeyboardFunctions/KeyboardFunctions.pde @@ -27,7 +27,7 @@ void setup() { noStroke(); colorMode(HSB, numChars); background(numChars/2); - // Set a gray value for each key + // Set a hue value for each key for(int i = 0; i < numChars; i++) { colors[i] = color(i, numChars, numChars); } @@ -58,11 +58,11 @@ void keyPressed() if(key <= 'Z') { keyIndex = key-'A'; letterHeight = maxHeight; - fill(colors[key-'A']); + fill(colors[keyIndex]); } else { keyIndex = key-'a'; letterHeight = minHeight; - fill(colors[key-'a']); + fill(colors[keyIndex]); } } else { fill(0); @@ -84,4 +84,4 @@ void keyPressed() if( y > height - letterHeight) { y = 0; // reset y to 0 } -} \ No newline at end of file +} diff --git a/content/examples/Basics/Input/MouseSignals/MouseSignals.pde b/content/examples/Basics/Input/MouseSignals/MouseSignals.pde index c4776751d..32824354d 100644 --- a/content/examples/Basics/Input/MouseSignals/MouseSignals.pde +++ b/content/examples/Basics/Input/MouseSignals/MouseSignals.pde @@ -11,8 +11,7 @@ int[] xvals; int[] yvals; int[] bvals; -void setup() -{ +void setup() { size(640, 360); noSmooth(); xvals = new int[width]; @@ -22,11 +21,10 @@ void setup() int arrayindex = 0; -void draw() -{ +void draw() { background(102); - for(int i = 1; i < width; i++) { + for (int i = 1; i < width; i++) { xvals[i-1] = xvals[i]; yvals[i-1] = yvals[i]; bvals[i-1] = bvals[i]; @@ -34,22 +32,28 @@ void draw() // Add the new values to the end of the array xvals[width-1] = mouseX; yvals[width-1] = mouseY; - if(mousePressed) { + + if (mousePressed == true) { bvals[width-1] = 0; } else { - bvals[width-1] = 255; + bvals[width-1] = height/3; } fill(255); noStroke(); rect(0, height/3, width, height/3+1); - for(int i=1; i allFiles = listFilesRecursive(path); - - for (File f: allFiles) { + + for (File f : allFiles) { println("Name: " + f.getName()); println("Full path: " + f.getAbsolutePath()); println("Is directory: " + f.isDirectory()); @@ -52,7 +53,6 @@ void setup() { // Nothing is drawn in this program and the draw() doesn't loop because // of the noLoop() in setup() void draw() { - } // This function returns all the files in a directory as an array of Strings @@ -82,9 +82,9 @@ File[] listFiles(String dir) { // Function to get a list of all files in a directory and all subdirectories ArrayList listFilesRecursive(String dir) { - ArrayList fileList = new ArrayList(); - recurseDir(fileList,dir); - return fileList; + ArrayList fileList = new ArrayList(); + recurseDir(fileList, dir); + return fileList; } // Recursive function to traverse subdirectories @@ -96,9 +96,9 @@ void recurseDir(ArrayList a, String dir) { File[] subfiles = file.listFiles(); for (int i = 0; i < subfiles.length; i++) { // Call this function on all files in this directory - recurseDir(a,subfiles[i].getAbsolutePath()); + recurseDir(a, subfiles[i].getAbsolutePath()); } } else { a.add(file); } -} +} \ No newline at end of file diff --git a/content/examples/Topics/File IO/SaveFile1/SaveFile1.pde b/content/examples/Topics/File IO/SaveFile1/SaveFile1.pde index 9bcdbec18..510bdb8de 100644 --- a/content/examples/Topics/File IO/SaveFile1/SaveFile1.pde +++ b/content/examples/Topics/File IO/SaveFile1/SaveFile1.pde @@ -4,8 +4,7 @@ * Saving files is a useful way to store data so it can be viewed after a * program has stopped running. The saveStrings() function writes an array * of strings to a file, with each string written to a new line. This file - * is saved to the sketch's folder. This example won't work in a web browser - * because of Java security restrictions. + * is saved to the sketch's folder. */ int[] x = new int[0]; diff --git a/content/examples/Topics/File IO/SaveFile2/SaveFile2.pde b/content/examples/Topics/File IO/SaveFile2/SaveFile2.pde index f47265063..6a41c58f1 100644 --- a/content/examples/Topics/File IO/SaveFile2/SaveFile2.pde +++ b/content/examples/Topics/File IO/SaveFile2/SaveFile2.pde @@ -3,8 +3,7 @@ * * This file a PrintWriter object to write data continuously to a file * while the mouse is pressed. When a key is pressed, the file closes - * itself and the program is stopped. This example won't work in a web browser - * because of Java security restrictions. + * itself and the program is stopped. */ PrintWriter output; diff --git a/content/examples/Topics/Fractals and L-Systems/Mandelbrot/Mandelbrot.pde b/content/examples/Topics/Fractals and L-Systems/Mandelbrot/Mandelbrot.pde index 1c82c6ca4..58a3b3d01 100644 --- a/content/examples/Topics/Fractals and L-Systems/Mandelbrot/Mandelbrot.pde +++ b/content/examples/Topics/Fractals and L-Systems/Mandelbrot/Mandelbrot.pde @@ -1,7 +1,8 @@ /** * The Mandelbrot Set * by Daniel Shiffman. - * + * (slight modification by l8l) + * * Simple rendering of the Mandelbrot set. */ @@ -13,7 +14,7 @@ background(255); // A different range will allow us to "zoom" in or out on the fractal // It all starts with the width, try higher or lower values -float w = 5; +float w = 4; float h = (w * height) / width; // Start at negative half the width and height @@ -43,21 +44,30 @@ for (int j = 0; j < height; j++) { float x = xmin; for (int i = 0; i < width; i++) { - // Now we test, as we iterate z = z^2 + cm does z tend towards infinity? + // Now we test, as we iterate z = z^2 + c does z tend towards infinity? float a = x; float b = y; int n = 0; + float max = 4.0; // Infinity in our finite world is simple, let's just consider it 4 + float absOld = 0.0; + float convergeNumber = maxiterations; // this will change if the while loop breaks due to non-convergence while (n < maxiterations) { + // We suppose z = a+ib float aa = a * a; float bb = b * b; - float twoab = 2.0 * a * b; - a = aa - bb + x; - b = twoab + y; - // Infinty in our finite world is simple, let's just consider it 16 - if (aa + bb > 16.0) { + float abs = sqrt(aa + bb); + if (abs > max) { // |z| = sqrt(a^2+b^2) + // Now measure how much we exceeded the maximum: + float diffToLast = (float) (abs - absOld); + float diffToMax = (float) (max - absOld); + convergeNumber = n + diffToMax/diffToLast; break; // Bail } + float twoab = 2.0 * a * b; + a = aa - bb + x; // this operation corresponds to z -> z^2+c where z=a+ib c=(x,y) + b = twoab + y; n++; + absOld = abs; } // We color each pixel based on how long it takes to get to infinity @@ -66,7 +76,8 @@ for (int j = 0; j < height; j++) { pixels[i+j*width] = color(0); } else { // Gosh, we could make fancy colors here if we wanted - pixels[i+j*width] = color(n*16 % 255); + float norm = map(convergeNumber, 0, maxiterations, 0, 1); + pixels[i+j*width] = color(map(sqrt(norm), 0, 1, 0, 255)); } x += dx; } diff --git a/content/examples/Topics/GUI/Button/Button.pde b/content/examples/Topics/GUI/Button/Button.pde index 4b8a536cc..041bb594d 100644 --- a/content/examples/Topics/GUI/Button/Button.pde +++ b/content/examples/Topics/GUI/Button/Button.pde @@ -1,7 +1,7 @@ /** * Button. * - * Click on one of the colored squares in the + * Click on one of the colored shapes in the * center of the image to change the color of * the background. */ diff --git a/content/examples/Topics/Motion/CircleCollision/Ball.pde b/content/examples/Topics/Motion/CircleCollision/Ball.pde index 7cb12eb8c..a3618b3e2 100644 --- a/content/examples/Topics/Motion/CircleCollision/Ball.pde +++ b/content/examples/Topics/Motion/CircleCollision/Ball.pde @@ -2,14 +2,14 @@ class Ball { PVector position; PVector velocity; - float r, m; + float radius, m; Ball(float x, float y, float r_) { position = new PVector(x, y); velocity = PVector.random2D(); velocity.mult(3); - r = r_; - m = r*.1; + radius = r_; + m = radius*.1; } void update() { @@ -17,35 +17,41 @@ class Ball { } void checkBoundaryCollision() { - if (position.x > width-r) { - position.x = width-r; + if (position.x > width-radius) { + position.x = width-radius; velocity.x *= -1; - } - else if (position.x < r) { - position.x = r; + } else if (position.x < radius) { + position.x = radius; velocity.x *= -1; - } - else if (position.y > height-r) { - position.y = height-r; + } else if (position.y > height-radius) { + position.y = height-radius; velocity.y *= -1; - } - else if (position.y < r) { - position.y = r; + } else if (position.y < radius) { + position.y = radius; velocity.y *= -1; } } void checkCollision(Ball other) { - // get distances between the balls components - PVector bVect = PVector.sub(other.position, position); + // Get distances between the balls components + PVector distanceVect = PVector.sub(other.position, position); - // calculate magnitude of the vector separating the balls - float bVectMag = bVect.mag(); + // Calculate magnitude of the vector separating the balls + float distanceVectMag = distanceVect.mag(); - if (bVectMag < r + other.r) { - // get angle of bVect - float theta = bVect.heading(); + // Minimum distance before they are touching + float minDistance = radius + other.radius; + + if (distanceVectMag < minDistance) { + float distanceCorrection = (minDistance-distanceVectMag)/2.0; + PVector d = distanceVect.copy(); + PVector correctionVector = d.normalize().mult(distanceCorrection); + other.position.add(correctionVector); + position.sub(correctionVector); + + // get angle of distanceVect + float theta = distanceVect.heading(); // precalculate trig values float sine = sin(theta); float cosine = cos(theta); @@ -54,23 +60,23 @@ class Ball { just need to worry about bTemp[1] position*/ PVector[] bTemp = { new PVector(), new PVector() - }; + }; - /* this ball's position is relative to the other - so you can use the vector between them (bVect) as the - reference point in the rotation expressions. - bTemp[0].position.x and bTemp[0].position.y will initialize - automatically to 0.0, which is what you want - since b[1] will rotate around b[0] */ - bTemp[1].x = cosine * bVect.x + sine * bVect.y; - bTemp[1].y = cosine * bVect.y - sine * bVect.x; + /* this ball's position is relative to the other + so you can use the vector between them (bVect) as the + reference point in the rotation expressions. + bTemp[0].position.x and bTemp[0].position.y will initialize + automatically to 0.0, which is what you want + since b[1] will rotate around b[0] */ + bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y; + bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x; // rotate Temporary velocities PVector[] vTemp = { new PVector(), new PVector() - }; + }; - vTemp[0].x = cosine * velocity.x + sine * velocity.y; + vTemp[0].x = cosine * velocity.x + sine * velocity.y; vTemp[0].y = cosine * velocity.y - sine * velocity.x; vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y; vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x; @@ -80,7 +86,7 @@ class Ball { the final velocity along the x-axis. */ PVector[] vFinal = { new PVector(), new PVector() - }; + }; // final rotated velocity for b[0] vFinal[0].x = ((m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) / (m + other.m); @@ -100,7 +106,7 @@ class Ball { // rotate balls PVector[] bFinal = { new PVector(), new PVector() - }; + }; bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y; bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x; @@ -121,11 +127,9 @@ class Ball { } } - void display() { noStroke(); fill(204); - ellipse(position.x, position.y, r*2, r*2); + ellipse(position.x, position.y, radius*2, radius*2); } -} - +} \ No newline at end of file diff --git a/content/examples/Topics/Shaders/DomeProjection/DomeProjection.pde b/content/examples/Topics/Shaders/DomeProjection/DomeProjection.pde index 2c39c08cc..863133e49 100644 --- a/content/examples/Topics/Shaders/DomeProjection/DomeProjection.pde +++ b/content/examples/Topics/Shaders/DomeProjection/DomeProjection.pde @@ -6,6 +6,8 @@ * * Based on the FullDomeTemplate code from Christopher Warnow: * https://github.com/mphasize/FullDome + * + * Note: This example needs desktop-class graphics to function. * */ diff --git a/content/examples/Topics/Shaders/InfiniteTiles/InfiniteTiles.pde b/content/examples/Topics/Shaders/InfiniteTiles/InfiniteTiles.pde new file mode 100644 index 000000000..ae0af484f --- /dev/null +++ b/content/examples/Topics/Shaders/InfiniteTiles/InfiniteTiles.pde @@ -0,0 +1,26 @@ +//------------------------------------------------------------- +// Display endless moving background using a tile texture. +// Contributed by martiSteiger +//------------------------------------------------------------- + +PImage tileTexture; +PShader tileShader; + +void setup() { + size(640, 480, P2D); + textureWrap(REPEAT); + tileTexture = loadImage("penrose.jpg"); + loadTileShader(); +} + +void loadTileShader() { + tileShader = loadShader("scroller.glsl"); + tileShader.set("resolution", float(width), float(height)); + tileShader.set("tileImage", tileTexture); +} + +void draw() { + tileShader.set("time", millis() / 1000.0); + shader(tileShader); + rect(0, 0, width, height); +} \ No newline at end of file diff --git a/content/examples/Topics/Shaders/InfiniteTiles/data/penrose.jpg b/content/examples/Topics/Shaders/InfiniteTiles/data/penrose.jpg new file mode 100644 index 000000000..94e10607f Binary files /dev/null and b/content/examples/Topics/Shaders/InfiniteTiles/data/penrose.jpg differ diff --git a/content/examples/Topics/Shaders/InfiniteTiles/data/scroller.glsl b/content/examples/Topics/Shaders/InfiniteTiles/data/scroller.glsl new file mode 100644 index 000000000..0717bea3c --- /dev/null +++ b/content/examples/Topics/Shaders/InfiniteTiles/data/scroller.glsl @@ -0,0 +1,17 @@ +//--------------------------------------------------------- +// Display endless moving background using a tile texture. +// Contributed by martiSteiger +//--------------------------------------------------------- + +uniform float time; +uniform vec2 resolution; +uniform sampler2D tileImage; + +#define TILES_COUNT_X 4.0 + +void main() { + vec2 pos = gl_FragCoord.xy - vec2(4.0 * time); + vec2 p = (resolution - TILES_COUNT_X * pos) / resolution.x; + vec3 col = texture2D (tileImage, p).xyz; + gl_FragColor = vec4 (col, 1.0); +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/Chain/Chain.pde b/content/examples/Topics/Simulate/Chain/Chain.pde deleted file mode 100644 index 75b7ea36d..000000000 --- a/content/examples/Topics/Simulate/Chain/Chain.pde +++ /dev/null @@ -1,65 +0,0 @@ -/** - * Chain. - * - * One mass is attached to the mouse position and the other - * is attached the position of the other mass. The gravity - * in the environment pulls down on both. - */ - - -Spring2D s1, s2; - -float gravity = 9.0; -float mass = 2.0; - -void setup() { - size(640, 360); - fill(255, 126); - // Inputs: x, y, mass, gravity - s1 = new Spring2D(0.0, width/2, mass, gravity); - s2 = new Spring2D(0.0, width/2, mass, gravity); -} - -void draw() { - background(0); - s1.update(mouseX, mouseY); - s1.display(mouseX, mouseY); - s2.update(s1.x, s1.y); - s2.display(s1.x, s1.y); -} - -class Spring2D { - float vx, vy; // The x- and y-axis velocities - float x, y; // The x- and y-coordinates - float gravity; - float mass; - float radius = 30; - float stiffness = 0.2; - float damping = 0.7; - - Spring2D(float xpos, float ypos, float m, float g) { - x = xpos; - y = ypos; - mass = m; - gravity = g; - } - - void update(float targetX, float targetY) { - float forceX = (targetX - x) * stiffness; - float ax = forceX / mass; - vx = damping * (vx + ax); - x += vx; - float forceY = (targetY - y) * stiffness; - forceY += gravity; - float ay = forceY / mass; - vy = damping * (vy + ay); - y += vy; - } - - void display(float nx, float ny) { - noStroke(); - ellipse(x, y, radius*2, radius*2); - stroke(255); - line(x, y, nx, ny); - } -} diff --git a/content/examples/Topics/Simulate/Flocking/Boid.pde b/content/examples/Topics/Simulate/Flocking/Boid.pde index a7f425451..fbcc177c5 100644 --- a/content/examples/Topics/Simulate/Flocking/Boid.pde +++ b/content/examples/Topics/Simulate/Flocking/Boid.pde @@ -2,7 +2,7 @@ class Boid { - PVector location; + PVector position; PVector velocity; PVector acceleration; float r; @@ -19,7 +19,7 @@ class Boid { float angle = random(TWO_PI); velocity = new PVector(cos(angle), sin(angle)); - location = new PVector(x, y); + position = new PVector(x, y); r = 2.0; maxspeed = 2; maxforce = 0.03; @@ -52,13 +52,13 @@ class Boid { applyForce(coh); } - // Method to update location + // Method to update position void update() { // Update velocity velocity.add(acceleration); // Limit speed velocity.limit(maxspeed); - location.add(velocity); + position.add(velocity); // Reset accelertion to 0 each cycle acceleration.mult(0); } @@ -66,7 +66,7 @@ class Boid { // A method that calculates and applies a steering force towards a target // STEER = DESIRED MINUS VELOCITY PVector seek(PVector target) { - PVector desired = PVector.sub(target, location); // A vector pointing from the location to the target + PVector desired = PVector.sub(target, position); // A vector pointing from the position to the target // Scale to maximum speed desired.normalize(); desired.mult(maxspeed); @@ -89,7 +89,7 @@ class Boid { fill(200, 100); stroke(255); pushMatrix(); - translate(location.x, location.y); + translate(position.x, position.y); rotate(theta); beginShape(TRIANGLES); vertex(0, -r*2); @@ -101,10 +101,10 @@ class Boid { // Wraparound void borders() { - if (location.x < -r) location.x = width+r; - if (location.y < -r) location.y = height+r; - if (location.x > width+r) location.x = -r; - if (location.y > height+r) location.y = -r; + if (position.x < -r) position.x = width+r; + if (position.y < -r) position.y = height+r; + if (position.x > width+r) position.x = -r; + if (position.y > height+r) position.y = -r; } // Separation @@ -115,11 +115,11 @@ class Boid { int count = 0; // For every boid in the system, check if it's too close for (Boid other : boids) { - float d = PVector.dist(location, other.location); + float d = PVector.dist(position, other.position); // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself) if ((d > 0) && (d < desiredseparation)) { // Calculate vector pointing away from neighbor - PVector diff = PVector.sub(location, other.location); + PVector diff = PVector.sub(position, other.position); diff.normalize(); diff.div(d); // Weight by distance steer.add(diff); @@ -153,7 +153,7 @@ class Boid { PVector sum = new PVector(0, 0); int count = 0; for (Boid other : boids) { - float d = PVector.dist(location, other.location); + float d = PVector.dist(position, other.position); if ((d > 0) && (d < neighbordist)) { sum.add(other.velocity); count++; @@ -178,21 +178,21 @@ class Boid { } // Cohesion - // For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location + // For the average position (i.e. center) of all nearby boids, calculate steering vector towards that position PVector cohesion (ArrayList boids) { float neighbordist = 50; - PVector sum = new PVector(0, 0); // Start with empty vector to accumulate all locations + PVector sum = new PVector(0, 0); // Start with empty vector to accumulate all positions int count = 0; for (Boid other : boids) { - float d = PVector.dist(location, other.location); + float d = PVector.dist(position, other.position); if ((d > 0) && (d < neighbordist)) { - sum.add(other.location); // Add location + sum.add(other.position); // Add position count++; } } if (count > 0) { sum.div(count); - return seek(sum); // Steer towards the location + return seek(sum); // Steer towards the position } else { return new PVector(0, 0); diff --git a/content/examples/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.pde b/content/examples/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.pde index 12d2588b1..46b268189 100644 --- a/content/examples/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.pde +++ b/content/examples/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.pde @@ -27,12 +27,12 @@ void setup() { void draw() { background(0); - + // Draw water liquid.display(); for (Mover mover : movers) { - + // Is the Mover in the liquid? if (liquid.contains(mover)) { // Calculate drag force @@ -45,16 +45,15 @@ void draw() { PVector gravity = new PVector(0, 0.1*mover.mass); // Apply gravity mover.applyForce(gravity); - + // Update and display mover.update(); mover.display(); mover.checkEdges(); } - + fill(255); - text("click mouse to reset",10,30); - + text("click mouse to reset", 10, 30); } void mousePressed() { @@ -66,4 +65,4 @@ void reset() { for (int i = 0; i < movers.length; i++) { movers[i] = new Mover(random(0.5, 3), 40+i*70, 0); } -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/ForcesWithVectors/Liquid.pde b/content/examples/Topics/Simulate/ForcesWithVectors/Liquid.pde index c7d4652fe..2f5b93bc4 100644 --- a/content/examples/Topics/Simulate/ForcesWithVectors/Liquid.pde +++ b/content/examples/Topics/Simulate/ForcesWithVectors/Liquid.pde @@ -6,13 +6,13 @@ * Bodies experience gravity continuously * Bodies experience fluid resistance when in "water" */ - - // Liquid class - class Liquid { - +// Liquid class +class Liquid { + + // Liquid is a rectangle - float x,y,w,h; + float x, y, w, h; // Coefficient of drag float c; @@ -23,18 +23,17 @@ h = h_; c = c_; } - + // Is the Mover in the Liquid? boolean contains(Mover m) { - PVector l = m.location; + PVector l = m.position; if (l.x > x && l.x < x + w && l.y > y && l.y < y + h) { return true; - } - else { + } else { return false; } } - + // Calculate drag force PVector drag(Mover m) { // Magnitude is coefficient * speed squared @@ -44,16 +43,15 @@ // Direction is inverse of velocity PVector drag = m.velocity.copy(); drag.mult(-1); - + // Scale according to magnitude drag.setMag(dragMagnitude); return drag; } - + void display() { noStroke(); fill(127); - rect(x,y,w,h); + rect(x, y, w, h); } - -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/ForcesWithVectors/Mover.pde b/content/examples/Topics/Simulate/ForcesWithVectors/Mover.pde index b14754b71..2dd51116c 100644 --- a/content/examples/Topics/Simulate/ForcesWithVectors/Mover.pde +++ b/content/examples/Topics/Simulate/ForcesWithVectors/Mover.pde @@ -10,17 +10,17 @@ class Mover { - // location, velocity, and acceleration - PVector location; + // position, velocity, and acceleration + PVector position; PVector velocity; PVector acceleration; - + // Mass is tied to size float mass; Mover(float m, float x, float y) { mass = m; - location = new PVector(x, y); + position = new PVector(x, y); velocity = new PVector(0, 0); acceleration = new PVector(0, 0); } @@ -35,30 +35,28 @@ class Mover { } void update() { - + // Velocity changes according to acceleration velocity.add(acceleration); - // Location changes by velocity - location.add(velocity); + // position changes by velocity + position.add(velocity); // We must clear acceleration each frame acceleration.mult(0); } - + // Draw Mover void display() { stroke(255); strokeWeight(2); fill(255, 200); - ellipse(location.x, location.y, mass*16, mass*16); + ellipse(position.x, position.y, mass*16, mass*16); } - + // Bounce off bottom of window void checkEdges() { - if (location.y > height) { + if (position.y > height) { velocity.y *= -0.9; // A little dampening when hitting the bottom - location.y = height; + position.y = height; } } -} - - +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/GravitationalAttraction3D/Planet.pde b/content/examples/Topics/Simulate/GravitationalAttraction3D/Planet.pde index ae8be2537..ec93bde8d 100644 --- a/content/examples/Topics/Simulate/GravitationalAttraction3D/Planet.pde +++ b/content/examples/Topics/Simulate/GravitationalAttraction3D/Planet.pde @@ -4,30 +4,30 @@ // A class for an orbiting Planet class Planet { - - // Basic physics model (location, velocity, acceleration, mass) - PVector location; + + // Basic physics model (position, velocity, acceleration, mass) + PVector position; PVector velocity; PVector acceleration; float mass; Planet(float m, float x, float y, float z) { mass = m; - location = new PVector(x,y,z); - velocity = new PVector(1,0); // Arbitrary starting velocity - acceleration = new PVector(0,0); + position = new PVector(x, y, z); + velocity = new PVector(1, 0); // Arbitrary starting velocity + acceleration = new PVector(0, 0); } - + // Newton's 2nd Law (F = M*A) applied void applyForce(PVector force) { - PVector f = PVector.div(force,mass); + PVector f = PVector.div(force, mass); acceleration.add(f); } // Our motion algorithm (aka Euler Integration) void update() { velocity.add(acceleration); // Velocity changes according to acceleration - location.add(velocity); // Location changes according to velocity + position.add(velocity); // position changes according to velocity acceleration.mult(0); } @@ -36,10 +36,8 @@ class Planet { noStroke(); fill(255); pushMatrix(); - translate(location.x,location.y,location.z); + translate(position.x, position.y, position.z); sphere(mass*8); popMatrix(); } -} - - +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/GravitationalAttraction3D/Sun.pde b/content/examples/Topics/Simulate/GravitationalAttraction3D/Sun.pde index 10fcc0373..b8ea25956 100644 --- a/content/examples/Topics/Simulate/GravitationalAttraction3D/Sun.pde +++ b/content/examples/Topics/Simulate/GravitationalAttraction3D/Sun.pde @@ -5,20 +5,20 @@ class Sun { float mass; // Mass, tied to size - PVector location; // Location + PVector position; // position float G; // Universal gravitational constant (arbitrary value) Sun() { - location = new PVector(0,0); + position = new PVector(0, 0); mass = 20; G = 0.4; } PVector attract(Planet m) { - PVector force = PVector.sub(location,m.location); // Calculate direction of force + PVector force = PVector.sub(position, m.position); // Calculate direction of force float d = force.mag(); // Distance between objects - d = constrain(d,5.0,25.0); // Limiting the distance to eliminate "extreme" results for very close or very far objects + d = constrain(d, 5.0, 25.0); // Limiting the distance to eliminate "extreme" results for very close or very far objects float strength = (G * mass * m.mass) / (d * d); // Calculate gravitional force magnitude force.setMag(strength); // Get force vector --> magnitude * direction return force; @@ -29,10 +29,8 @@ class Sun { stroke(255); noFill(); pushMatrix(); - translate(location.x,location.y,location.z); + translate(position.x, position.y, position.z); sphere(mass*2); popMatrix(); } -} - - +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/MultipleParticleSystems/CrazyParticle.pde b/content/examples/Topics/Simulate/MultipleParticleSystems/CrazyParticle.pde index 9c77dc6e3..f18d04ee6 100644 --- a/content/examples/Topics/Simulate/MultipleParticleSystems/CrazyParticle.pde +++ b/content/examples/Topics/Simulate/MultipleParticleSystems/CrazyParticle.pde @@ -30,11 +30,10 @@ class CrazyParticle extends Particle { super.display(); // Then add a rotating line pushMatrix(); - translate(location.x,location.y); + translate(position.x, position.y); rotate(theta); - stroke(255,lifespan); - line(0,0,25,0); + stroke(255, lifespan); + line(0, 0, 25, 0); popMatrix(); } - -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.pde b/content/examples/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.pde index 5bc038e7d..605f1a9d5 100644 --- a/content/examples/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.pde +++ b/content/examples/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.pde @@ -3,7 +3,7 @@ * by Daniel Shiffman. * * Click the mouse to generate a burst of particles - * at mouse location. + * at mouse position. * * Each burst is one instance of a particle system * with Particles and CrazyParticles (a subclass of Particle) @@ -19,7 +19,7 @@ void setup() { void draw() { background(0); - for (ParticleSystem ps: systems) { + for (ParticleSystem ps : systems) { ps.run(); ps.addParticle(); } @@ -32,4 +32,4 @@ void draw() { void mousePressed() { systems.add(new ParticleSystem(1, new PVector(mouseX, mouseY))); -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/MultipleParticleSystems/Particle.pde b/content/examples/Topics/Simulate/MultipleParticleSystems/Particle.pde index 078ef23c5..a3d0b8780 100644 --- a/content/examples/Topics/Simulate/MultipleParticleSystems/Particle.pde +++ b/content/examples/Topics/Simulate/MultipleParticleSystems/Particle.pde @@ -1,15 +1,15 @@ // A simple Particle class class Particle { - PVector location; + PVector position; PVector velocity; PVector acceleration; float lifespan; Particle(PVector l) { - acceleration = new PVector(0,0.05); - velocity = new PVector(random(-1,1),random(-2,0)); - location = l.get(); + acceleration = new PVector(0, 0.05); + velocity = new PVector(random(-1, 1), random(-2, 0)); + position = l.copy(); lifespan = 255.0; } @@ -18,23 +18,22 @@ class Particle { display(); } - // Method to update location + // Method to update position void update() { velocity.add(acceleration); - location.add(velocity); + position.add(velocity); lifespan -= 2.0; } // Method to display void display() { - stroke(255,lifespan); - fill(255,lifespan); - ellipse(location.x,location.y,8,8); + stroke(255, lifespan); + fill(255, lifespan); + ellipse(position.x, position.y, 8, 8); } // Is the particle still useful? boolean isDead() { return (lifespan < 0.0); } - -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/MultipleParticleSystems/ParticleSystem.pde b/content/examples/Topics/Simulate/MultipleParticleSystems/ParticleSystem.pde index e4deac945..8db8462ed 100644 --- a/content/examples/Topics/Simulate/MultipleParticleSystems/ParticleSystem.pde +++ b/content/examples/Topics/Simulate/MultipleParticleSystems/ParticleSystem.pde @@ -7,7 +7,7 @@ class ParticleSystem { ParticleSystem(int num, PVector v) { particles = new ArrayList(); // Initialize the arraylist - origin = v.get(); // Store the origin point + origin = v.copy(); // Store the origin point for (int i = 0; i < num; i++) { particles.add(new Particle(origin)); // Add "num" amount of particles to the arraylist } diff --git a/content/examples/Topics/Simulate/SimpleParticleSystem/Particle.pde b/content/examples/Topics/Simulate/SimpleParticleSystem/Particle.pde index b6fa0c02d..6d949c725 100644 --- a/content/examples/Topics/Simulate/SimpleParticleSystem/Particle.pde +++ b/content/examples/Topics/Simulate/SimpleParticleSystem/Particle.pde @@ -1,15 +1,15 @@ // A simple Particle class class Particle { - PVector location; + PVector position; PVector velocity; PVector acceleration; float lifespan; Particle(PVector l) { - acceleration = new PVector(0,0.05); - velocity = new PVector(random(-1,1),random(-2,0)); - location = l.get(); + acceleration = new PVector(0, 0.05); + velocity = new PVector(random(-1, 1), random(-2, 0)); + position = l.copy(); lifespan = 255.0; } @@ -18,20 +18,20 @@ class Particle { display(); } - // Method to update location + // Method to update position void update() { velocity.add(acceleration); - location.add(velocity); + position.add(velocity); lifespan -= 1.0; } // Method to display void display() { - stroke(255,lifespan); - fill(255,lifespan); - ellipse(location.x,location.y,8,8); + stroke(255, lifespan); + fill(255, lifespan); + ellipse(position.x, position.y, 8, 8); } - + // Is the particle still useful? boolean isDead() { if (lifespan < 0.0) { @@ -40,4 +40,4 @@ class Particle { return false; } } -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SimpleParticleSystem/ParticleSystem.pde b/content/examples/Topics/Simulate/SimpleParticleSystem/ParticleSystem.pde index bd5937e77..94a528abf 100644 --- a/content/examples/Topics/Simulate/SimpleParticleSystem/ParticleSystem.pde +++ b/content/examples/Topics/Simulate/SimpleParticleSystem/ParticleSystem.pde @@ -5,8 +5,8 @@ class ParticleSystem { ArrayList particles; PVector origin; - ParticleSystem(PVector location) { - origin = location.get(); + ParticleSystem(PVector position) { + origin = position.copy(); particles = new ArrayList(); } @@ -23,4 +23,4 @@ class ParticleSystem { } } } -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.pde b/content/examples/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.pde index 9b46822f1..e198edbac 100644 --- a/content/examples/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.pde +++ b/content/examples/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.pde @@ -7,18 +7,16 @@ * A ParticleSystem object manages a variable size (ArrayList) * list of particles. */ - + ParticleSystem ps; void setup() { - size(640,360); - ps = new ParticleSystem(new PVector(width/2,50)); + size(640, 360); + ps = new ParticleSystem(new PVector(width/2, 50)); } void draw() { background(0); ps.addParticle(); ps.run(); -} - - +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SmokeParticleSystem/Particle.pde b/content/examples/Topics/Simulate/SmokeParticleSystem/Particle.pde index 40b980ffa..a0948b478 100644 --- a/content/examples/Topics/Simulate/SmokeParticleSystem/Particle.pde +++ b/content/examples/Topics/Simulate/SmokeParticleSystem/Particle.pde @@ -8,12 +8,12 @@ class Particle { float lifespan; PImage img; - Particle(PVector l,PImage img_) { - acc = new PVector(0,0); + Particle(PVector l, PImage img_) { + acc = new PVector(0, 0); float vx = randomGaussian()*0.3; float vy = randomGaussian()*0.3 - 1.0; - vel = new PVector(vx,vy); - loc = l.get(); + vel = new PVector(vx, vy); + loc = l.copy(); lifespan = 100.0; img = img_; } @@ -22,14 +22,14 @@ class Particle { update(); render(); } - + // Method to apply a force vector to the Particle object // Note we are ignoring "mass" here void applyForce(PVector f) { acc.add(f); } - // Method to update location + // Method to update position void update() { vel.add(acc); loc.add(vel); @@ -40,8 +40,8 @@ class Particle { // Method to display void render() { imageMode(CENTER); - tint(255,lifespan); - image(img,loc.x,loc.y); + tint(255, lifespan); + image(img, loc.x, loc.y); // Drawing a circle instead // fill(255,lifespan); // noStroke(); @@ -56,4 +56,4 @@ class Particle { return false; } } -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SmokeParticleSystem/ParticleSystem.pde b/content/examples/Topics/Simulate/SmokeParticleSystem/ParticleSystem.pde index 9dd4ca62a..ba77243d7 100644 --- a/content/examples/Topics/Simulate/SmokeParticleSystem/ParticleSystem.pde +++ b/content/examples/Topics/Simulate/SmokeParticleSystem/ParticleSystem.pde @@ -6,10 +6,10 @@ class ParticleSystem { ArrayList particles; // An arraylist for all the particles PVector origin; // An origin point for where particles are birthed PImage img; - + ParticleSystem(int num, PVector v, PImage img_) { particles = new ArrayList(); // Initialize the arraylist - origin = v.get(); // Store the origin point + origin = v.copy(); // Store the origin point img = img_; for (int i = 0; i < num; i++) { particles.add(new Particle(origin, img)); // Add "num" amount of particles to the arraylist @@ -25,18 +25,16 @@ class ParticleSystem { } } } - + // Method to add a force vector to all particles currently in the system void applyForce(PVector dir) { // Enhanced loop!!! - for (Particle p: particles) { + for (Particle p : particles) { p.applyForce(dir); } - } void addParticle() { - particles.add(new Particle(origin,img)); + particles.add(new Particle(origin, img)); } - -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.pde b/content/examples/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.pde index 32683de91..3b1e51fec 100644 --- a/content/examples/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.pde +++ b/content/examples/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.pde @@ -9,17 +9,17 @@ ParticleSystem ps; void setup() { - size(640,360); + size(640, 360); PImage img = loadImage("texture.png"); - ps = new ParticleSystem(0,new PVector(width/2,height-60),img); + ps = new ParticleSystem(0, new PVector(width/2, height-60), img); } void draw() { background(0); // Calculate a "wind" force based on mouse horizontal position - float dx = map(mouseX,0,width,-0.2,0.2); - PVector wind = new PVector(dx,0); + float dx = map(mouseX, 0, width, -0.2, 0.2); + PVector wind = new PVector(dx, 0); ps.applyForce(wind); ps.run(); for (int i = 0; i < 2; i++) { @@ -27,24 +27,23 @@ void draw() { } // Draw an arrow representing the wind force - drawVector(wind, new PVector(width/2,50,0),500); - + drawVector(wind, new PVector(width/2, 50, 0), 500); } -// Renders a vector object 'v' as an arrow and a location 'loc' +// Renders a vector object 'v' as an arrow and a position 'loc' void drawVector(PVector v, PVector loc, float scayl) { pushMatrix(); float arrowsize = 4; - // Translate to location to render vector - translate(loc.x,loc.y); + // Translate to position to render vector + translate(loc.x, loc.y); stroke(255); // Call vector heading function to get direction (note that pointing up is a heading of 0) and rotate rotate(v.heading()); // Calculate length of vector & scale it to be bigger or smaller if necessary float len = v.mag()*scayl; // Draw three lines to make an arrow (draw pointing up since we've rotate to the proper direction) - line(0,0,len,0); - line(len,0,len-arrowsize,+arrowsize/2); - line(len,0,len-arrowsize,-arrowsize/2); + line(0, 0, len, 0); + line(len, 0, len-arrowsize, +arrowsize/2); + line(len, 0, len-arrowsize, -arrowsize/2); popMatrix(); -} +} \ No newline at end of file diff --git a/content/examples/Topics/Simulate/SoftBody/SoftBody.pde b/content/examples/Topics/Simulate/SoftBody/SoftBody.pde index b0eb8f826..e3d0d266f 100644 --- a/content/examples/Topics/Simulate/SoftBody/SoftBody.pde +++ b/content/examples/Topics/Simulate/SoftBody/SoftBody.pde @@ -46,7 +46,7 @@ void draw() { } void drawShape() { - // calculate node starting locations + // calculate node starting positions for (int i=0; i left && mouseX < right && mouseY > ps && mouseY < ps + springHeight) { - over = true; - } else { - over = false; - } - - // Set and constrain the position of top bar - if(move) { - ps = mouseY - springHeight/2; - ps = constrain(ps, min, max); - } -} - -void mousePressed() { - if(over) { - move = true; - } -} - -void mouseReleased() { - move = false; -} diff --git a/content/examples/Topics/Simulate/Springs/Springs.pde b/content/examples/Topics/Simulate/Springs/Springs.pde deleted file mode 100644 index 877e79e26..000000000 --- a/content/examples/Topics/Simulate/Springs/Springs.pde +++ /dev/null @@ -1,151 +0,0 @@ -/** - * Springs. - * - * Move the mouse over one of the circles and click to re-position. - * When you release the mouse, it will snap back into position. - * Each circle has a slightly different behavior. - */ - - -int num = 3; -Spring[] springs = new Spring[num]; - -void setup() { - size(640, 360); - noStroke(); - springs[0] = new Spring(240, 260, 40, 0.98, 8.0, 0.1, springs, 0); - springs[1] = new Spring(320, 210, 120, 0.95, 9.0, 0.1, springs, 1); - springs[2] = new Spring(180, 170, 200, 0.90, 9.9, 0.1, springs, 2); -} - -void draw() { - background(51); - - for (Spring spring : springs) { - spring.update(); - spring.display(); - } -} - -void mousePressed() { - for (Spring spring : springs) { - spring.pressed(); - } -} - -void mouseReleased() { - for (Spring spring : springs) { - spring.released(); - } -} - -class Spring { - // Screen values - float xpos, ypos; - float tempxpos, tempypos; - int size = 20; - boolean over = false; - boolean move = false; - - // Spring simulation constants - float mass; // Mass - float k = 0.2; // Spring constant - float damp; // Damping - float rest_posx; // Rest position X - float rest_posy; // Rest position Y - - // Spring simulation variables - //float pos = 20.0; // Position - float velx = 0.0; // X Velocity - float vely = 0.0; // Y Velocity - float accel = 0; // Acceleration - float force = 0; // Force - - Spring[] friends; - int me; - - // Constructor - Spring(float x, float y, int s, float d, float m, - float k_in, Spring[] others, int id) { - xpos = tempxpos = x; - ypos = tempypos = y; - rest_posx = x; - rest_posy = y; - size = s; - damp = d; - mass = m; - k = k_in; - friends = others; - me = id; - } - - void update() { - if (move) { - rest_posy = mouseY; - rest_posx = mouseX; - } - - force = -k * (tempypos - rest_posy); // f=-ky - accel = force / mass; // Set the acceleration, f=ma == a=f/m - vely = damp * (vely + accel); // Set the velocity - tempypos = tempypos + vely; // Updated position - - force = -k * (tempxpos - rest_posx); // f=-ky - accel = force / mass; // Set the acceleration, f=ma == a=f/m - velx = damp * (velx + accel); // Set the velocity - tempxpos = tempxpos + velx; // Updated position - - - if ((overEvent() || move) && !otherOver() ) { - over = true; - } else { - over = false; - } - } - - // Test to see if mouse is over this spring - boolean overEvent() { - float disX = tempxpos - mouseX; - float disY = tempypos - mouseY; - if (sqrt(sq(disX) + sq(disY)) < size/2 ) { - return true; - } else { - return false; - } - } - - // Make sure no other springs are active - boolean otherOver() { - for (int i=0; i - Statements and Comments - Coordinates - Width and Height - Setup and Draw - No Loop - Loop - Redraw - Functions - Recursion - CreateGraphics + Statements and Comments + Coordinates + Width and Height + Setup and Draw + No Loop + Loop + Redraw + Functions + Recursion + CreateGraphics - Points and Lines - Shape Primitives - Pie Chart - Regular Polygon - Star - Triangle Strip - Bezier + Points and Lines + Shape Primitives + Pie Chart + Regular Polygon + Star + Triangle Strip + Bezier 3D Primitives - Variables - Integers and Floats - True/False - Characters and Strings + Variables + Integers and Floats + True/False + Characters and Strings Variable Scope + Datatype Conversion - Array - Array 2D - Array Objects + Array + Array 2D + Array Objects - Iteration - Embedded Iteration - Conditionals 1 - Conditionals 2 - Logical Operators + Iteration + Embedded Iteration + Conditionals 1 + Conditionals 2 + Logical Operators - Load and Display Image - Background Image - Transparency - Alphamask - CreateImage - Pointillism + Load and Display Image + Background Image + Transparency + Alphamask + CreateImage + Pointillism + Request Image Load and Display SVG @@ -56,62 +58,75 @@ Get Child - Hue - Saturation - Brightness - Color Variables - Relativity - Linear Gradient - Radial Gradient + Hue + Saturation + Brightness + Color Variables + Relativity + Linear Gradient + Radial Gradient Wave Gradient - Increment/Decrement - Operator Precedence - Distance 1D - Distance 2D - Map - Sine - Sine and Cosine - Sine Wave - Additive Wave - Polar to Cartesian - Arctangent - Graphing 2D Equation - Random - Double Random - Noise 1D - NoiseWave + Increment/Decrement + Operator Precedence + Distance 1D + Distance 2D + Map + Sine + Sine and Cosine + Sine Wave + Additive Wave + Polar to Cartesian + Arctangent + Graphing 2D Equation + Interpolate + Random + Double Random + Random Gaussian + Noise 1D + Noise 2D + Noise 3D + NoiseWave - Mouse 1D - Mouse 2D - MousePress - Mouse Signals - Easing - Constrain - Storing Input - Mouse Functions - Keyboard - Keyboard Functions - Milliseconds - Clock + Mouse 1D + Mouse 2D + MousePress + Mouse Signals + Easing + Constrain + Storing Input + Mouse Functions + Keyboard + Keyboard Functions + Milliseconds + Clock - Translate - Scale - Rotate + Translate + Scale + Rotate RotateXY RotatePushPop - Arm + Arm - Objects - Multiple Constructors - Composite Objects - Inheritance + Objects + Multiple Constructors + Composite Objects + Inheritance - + + Letters + Words + Text Rotation + + + Embedded Links + Loading Images + + On/Off Directional Spot diff --git a/content/examples_p5/Basics/Arrays/Array/Array.js b/content/examples_p5/Basics/Arrays/Array/Array.js index 95312e602..fbfd82061 100644 --- a/content/examples_p5/Basics/Arrays/Array/Array.js +++ b/content/examples_p5/Basics/Arrays/Array/Array.js @@ -13,7 +13,8 @@ var coswave; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); coswave = []; for (var i = 0; i < width; i++) { var amount = map(i, 0, width, 0, PI); diff --git a/content/examples_p5/Basics/Arrays/Array2D/Array2D.js b/content/examples_p5/Basics/Arrays/Array2D/Array2D.js index 9fb5e5fd5..4bebca12b 100644 --- a/content/examples_p5/Basics/Arrays/Array2D/Array2D.js +++ b/content/examples_p5/Basics/Arrays/Array2D/Array2D.js @@ -12,7 +12,8 @@ var maxDistance; var spacer; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); maxDistance = dist(width/2, height/2, width, height); distances = []; for (var x = 0; x < width; x++) { diff --git a/content/examples_p5/Basics/Arrays/ArrayObjects/ArrayObjects.js b/content/examples_p5/Basics/Arrays/ArrayObjects/ArrayObjects.js index be3abe64a..e52eddfaa 100644 --- a/content/examples_p5/Basics/Arrays/ArrayObjects/ArrayObjects.js +++ b/content/examples_p5/Basics/Arrays/ArrayObjects/ArrayObjects.js @@ -9,7 +9,8 @@ var count; var mods; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); var wideCount = width / unit; var highCount = height / unit; diff --git a/content/examples_p5/Basics/Color/Brightness/Brightness.js b/content/examples_p5/Basics/Color/Brightness/Brightness.js index 1854d360e..62b6f20a5 100644 --- a/content/examples_p5/Basics/Color/Brightness/Brightness.js +++ b/content/examples_p5/Basics/Color/Brightness/Brightness.js @@ -10,7 +10,8 @@ var barWidth = 20; var lastBar = -1; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); colorMode(HSB, width, 100, width); noStroke(); background(0); diff --git a/content/examples_p5/Basics/Color/ColorVariables/ColorVariables.js b/content/examples_p5/Basics/Color/ColorVariables/ColorVariables.js index 651173f86..0f98f0e55 100644 --- a/content/examples_p5/Basics/Color/ColorVariables/ColorVariables.js +++ b/content/examples_p5/Basics/Color/ColorVariables/ColorVariables.js @@ -6,7 +6,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); background(51, 0, 0); diff --git a/content/examples_p5/Basics/Color/Hue/Hue.js b/content/examples_p5/Basics/Color/Hue/Hue.js index 6769bd6d6..c186668e4 100644 --- a/content/examples_p5/Basics/Color/Hue/Hue.js +++ b/content/examples_p5/Basics/Color/Hue/Hue.js @@ -11,7 +11,8 @@ var lastBar = -1; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); colorMode(HSB, height, height, height); noStroke(); background(0); diff --git a/content/examples_p5/Basics/Color/LinearGradient/LinearGradient.js b/content/examples_p5/Basics/Color/LinearGradient/LinearGradient.js index 313beb0e3..8ee5b9f92 100644 --- a/content/examples_p5/Basics/Color/LinearGradient/LinearGradient.js +++ b/content/examples_p5/Basics/Color/LinearGradient/LinearGradient.js @@ -11,7 +11,8 @@ var X_AXIS = 2; var b1, b2, c1, c2; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Define colors b1 = color(255); diff --git a/content/examples_p5/Basics/Color/RadialGradient/RadialGradient.js b/content/examples_p5/Basics/Color/RadialGradient/RadialGradient.js index 1e1b74e82..f79678a9d 100644 --- a/content/examples_p5/Basics/Color/RadialGradient/RadialGradient.js +++ b/content/examples_p5/Basics/Color/RadialGradient/RadialGradient.js @@ -1,14 +1,15 @@ /** * Radial Gradient. * - * Draws are series of concentric circles to create a gradient + * Draws a series of concentric circles to create a gradient * from one color to another. */ var dim; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); dim = width/2; background(0); colorMode(HSB, 360, 100, 100); diff --git a/content/examples_p5/Basics/Color/Relativity/Relativity.js b/content/examples_p5/Basics/Color/Relativity/Relativity.js index 1e1c5e49b..a58c003c7 100644 --- a/content/examples_p5/Basics/Color/Relativity/Relativity.js +++ b/content/examples_p5/Basics/Color/Relativity/Relativity.js @@ -9,7 +9,8 @@ var a, b, c, d, e; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); a = color(165, 167, 20); b = color(77, 86, 59); diff --git a/content/examples_p5/Basics/Color/Saturation/Saturation.js b/content/examples_p5/Basics/Color/Saturation/Saturation.js index 2385e116c..2092d18f6 100644 --- a/content/examples_p5/Basics/Color/Saturation/Saturation.js +++ b/content/examples_p5/Basics/Color/Saturation/Saturation.js @@ -12,7 +12,8 @@ var lastBar = -1; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); colorMode(HSB, width, height, 100); noStroke(); } diff --git a/content/examples_p5/Basics/Color/WaveGradient/WaveGradient.js b/content/examples_p5/Basics/Color/WaveGradient/WaveGradient.js index 51b8164cc..eb5afa1c1 100644 --- a/content/examples_p5/Basics/Color/WaveGradient/WaveGradient.js +++ b/content/examples_p5/Basics/Color/WaveGradient/WaveGradient.js @@ -12,15 +12,19 @@ var frequency = 0; var fillGap = 2.5; var c; +var gradient; + function setup() { - devicePixelScaling(false); - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + pixelDensity(1); + canvas.parent("p5container"); background(200); + gradient = createImage(width, height, RGB); noLoop(); } function draw() { - //loadPixels(); + gradient.loadPixels(); for (var i =- 75; i < height+75; i++){ // Reset angle to 0, so waves stack properly angle = 0; @@ -29,14 +33,37 @@ function draw() { for (var j = 0; j < width+75; j++){ py = i + sin(radians(angle)) * amplitude; angle += frequency; - c = color(abs(py-i)*255/amplitude, 255-abs(py-i)*255/amplitude, j*(255.0/(width+50))); + // c = color(abs(py-i)*255/amplitude;, 255-abs(py-i)*255/amplitude, j*(255.0/(width+50))); + var r = int(abs(py-i)*255/amplitude); + var g = int(255-abs(py-i)*255/amplitude); + var b = int(j*(255.0/(width+50))); + // Hack to fill gaps. Raise value of fillGap if you increase frequency for (var filler = 0; filler < fillGap; filler++){ - set(int(j-filler), int(py)-filler, c); - set(int(j), int(py), c); - set(int(j+filler), int(py)+filler, c); + var x = int(j-filler); + var y = int(py)-filler; + + var index = (x + y * width)*4; + gradient.pixels[index] = r; gradient.pixels[index+1] = g; gradient.pixels[index+2] = b; gradient.pixels[index+3] = 255; + + x = int(j); + y = int(py); + index = (x + y * width)*4; + gradient.pixels[index] = r; gradient.pixels[index+1] = g; gradient.pixels[index+2] = b; gradient.pixels[index+3] = 255; + + x = int(j+filler); + y = int(py)+filler; + index = (x + y * width)*4; + gradient.pixels[index] = r; gradient.pixels[index+1] = g; gradient.pixels[index+2] = b; gradient.pixels[index+3] = 255; + + //set(int(j-filler), int(py)-filler, c); + //set(int(j), int(py), c); + //set(int(j+filler), int(py)+filler, c); } } } - updatePixels(); + gradient.updatePixels(); + image(gradient, 0, 0); + noLoop(); + //console.log('complete'); } diff --git a/content/examples_p5/Basics/Control/Conditionals1/Conditionals1.js b/content/examples_p5/Basics/Control/Conditionals1/Conditionals1.js index f4e37425d..69bbd33cc 100644 --- a/content/examples_p5/Basics/Control/Conditionals1/Conditionals1.js +++ b/content/examples_p5/Basics/Control/Conditionals1/Conditionals1.js @@ -11,7 +11,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); for(var i = 10; i < width; i += 10) { diff --git a/content/examples_p5/Basics/Control/Conditionals2/Conditionals2.js b/content/examples_p5/Basics/Control/Conditionals2/Conditionals2.js index 41d88e2d7..1dd2374a4 100644 --- a/content/examples_p5/Basics/Control/Conditionals2/Conditionals2.js +++ b/content/examples_p5/Basics/Control/Conditionals2/Conditionals2.js @@ -9,7 +9,8 @@ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); for(var i = 2; i < width-2; i += 2) { diff --git a/content/examples_p5/Basics/Control/EmbeddedIteration/EmbeddedIteration.js b/content/examples_p5/Basics/Control/EmbeddedIteration/EmbeddedIteration.js index ca962f9b2..4e927be27 100644 --- a/content/examples_p5/Basics/Control/EmbeddedIteration/EmbeddedIteration.js +++ b/content/examples_p5/Basics/Control/EmbeddedIteration/EmbeddedIteration.js @@ -6,7 +6,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); noStroke(); diff --git a/content/examples_p5/Basics/Control/Iteration/Iteration.js b/content/examples_p5/Basics/Control/Iteration/Iteration.js index f3839d3e4..12d092873 100644 --- a/content/examples_p5/Basics/Control/Iteration/Iteration.js +++ b/content/examples_p5/Basics/Control/Iteration/Iteration.js @@ -8,7 +8,8 @@ function setup() { var y; var num = 14; - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(102); noStroke(); diff --git a/content/examples_p5/Basics/Control/LogicalOperators/LogicalOperators.js b/content/examples_p5/Basics/Control/LogicalOperators/LogicalOperators.js index edac7ae4e..e0c2ba445 100644 --- a/content/examples_p5/Basics/Control/LogicalOperators/LogicalOperators.js +++ b/content/examples_p5/Basics/Control/LogicalOperators/LogicalOperators.js @@ -8,7 +8,8 @@ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(126); var test = false; diff --git a/content/examples_p5/Basics/Data/CharactersStrings/CharactersStrings.js b/content/examples_p5/Basics/Data/CharactersStrings/CharactersStrings.js index c3026ec1a..8bb2e7bc3 100644 --- a/content/examples_p5/Basics/Data/CharactersStrings/CharactersStrings.js +++ b/content/examples_p5/Basics/Data/CharactersStrings/CharactersStrings.js @@ -23,7 +23,8 @@ var letter = ''; var words = "Begin..."; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Create the font textFont("Georgia", 36); } diff --git a/content/examples_p5/Basics/Data/DatatypeConversion/DatatypeConversion.js b/content/examples_p5/Basics/Data/DatatypeConversion/DatatypeConversion.js index aa532a234..66af616b2 100644 --- a/content/examples_p5/Basics/Data/DatatypeConversion/DatatypeConversion.js +++ b/content/examples_p5/Basics/Data/DatatypeConversion/DatatypeConversion.js @@ -11,7 +11,8 @@ /* @pjs font="Georgia.ttf"; */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); noStroke(); diff --git a/content/examples_p5/Basics/Data/IntegersFloats/IntegersFloats.js b/content/examples_p5/Basics/Data/IntegersFloats/IntegersFloats.js index 2cabdd7ae..9fa5fdd64 100644 --- a/content/examples_p5/Basics/Data/IntegersFloats/IntegersFloats.js +++ b/content/examples_p5/Basics/Data/IntegersFloats/IntegersFloats.js @@ -12,7 +12,8 @@ var a = 0; // Create a variable "a" of the datatype "int" var b = 0.0; // Create a variable "b" of the datatype "float" function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); stroke(255); frameRate(30); } diff --git a/content/examples_p5/Basics/Data/TrueFalse/TrueFalse.js b/content/examples_p5/Basics/Data/TrueFalse/TrueFalse.js index 5c8733e16..9d7f72cae 100644 --- a/content/examples_p5/Basics/Data/TrueFalse/TrueFalse.js +++ b/content/examples_p5/Basics/Data/TrueFalse/TrueFalse.js @@ -11,7 +11,8 @@ function setup() { var b = false; - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); stroke(255); diff --git a/content/examples_p5/Basics/Data/VariableScope/VariableScope.js b/content/examples_p5/Basics/Data/VariableScope/VariableScope.js index 60a662e39..e0e048de7 100644 --- a/content/examples_p5/Basics/Data/VariableScope/VariableScope.js +++ b/content/examples_p5/Basics/Data/VariableScope/VariableScope.js @@ -15,7 +15,8 @@ var a = 80; // Create a global variable "a" function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); stroke(255); noLoop(); diff --git a/content/examples_p5/Basics/Data/Variables/Variables.js b/content/examples_p5/Basics/Data/Variables/Variables.js index 16005bfed..a28c7b8b7 100644 --- a/content/examples_p5/Basics/Data/Variables/Variables.js +++ b/content/examples_p5/Basics/Data/Variables/Variables.js @@ -6,7 +6,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); stroke(153); strokeWeight(4); diff --git a/content/examples_p5/Basics/Form/Bezier/Bezier.js b/content/examples_p5/Basics/Form/Bezier/Bezier.js index 3fba06273..f1825839e 100644 --- a/content/examples_p5/Basics/Form/Bezier/Bezier.js +++ b/content/examples_p5/Basics/Form/Bezier/Bezier.js @@ -8,7 +8,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); stroke(255); noFill(); } diff --git a/content/examples_p5/Basics/Form/PieChart/PieChart.js b/content/examples_p5/Basics/Form/PieChart/PieChart.js index 3a38ef975..e4212fa7e 100644 --- a/content/examples_p5/Basics/Form/PieChart/PieChart.js +++ b/content/examples_p5/Basics/Form/PieChart/PieChart.js @@ -8,7 +8,8 @@ var angles = [ 30, 10, 45, 35, 60, 38, 75, 67 ]; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); noLoop(); // Run once and stop } diff --git a/content/examples_p5/Basics/Form/PointsLines/PointsLines.js b/content/examples_p5/Basics/Form/PointsLines/PointsLines.js index 0d1faa1ab..ddef81e95 100644 --- a/content/examples_p5/Basics/Form/PointsLines/PointsLines.js +++ b/content/examples_p5/Basics/Form/PointsLines/PointsLines.js @@ -13,7 +13,8 @@ function setup() { var p3 = p2+d; var p4 = p3+d; - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noSmooth(); background(0); translate(140, 0); diff --git a/content/examples_p5/Basics/Form/RegularPolygon/RegularPolygon.js b/content/examples_p5/Basics/Form/RegularPolygon/RegularPolygon.js index 703f08d25..527d3b465 100644 --- a/content/examples_p5/Basics/Form/RegularPolygon/RegularPolygon.js +++ b/content/examples_p5/Basics/Form/RegularPolygon/RegularPolygon.js @@ -9,7 +9,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Basics/Form/ShapePrimitives/ShapePrimitives.js b/content/examples_p5/Basics/Form/ShapePrimitives/ShapePrimitives.js index cd7918e2c..4a087a8aa 100644 --- a/content/examples_p5/Basics/Form/ShapePrimitives/ShapePrimitives.js +++ b/content/examples_p5/Basics/Form/ShapePrimitives/ShapePrimitives.js @@ -9,7 +9,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(0); noStroke(); diff --git a/content/examples_p5/Basics/Form/Star/Star.js b/content/examples_p5/Basics/Form/Star/Star.js index 91da2c7c2..6fa7a43b2 100644 --- a/content/examples_p5/Basics/Form/Star/Star.js +++ b/content/examples_p5/Basics/Form/Star/Star.js @@ -7,7 +7,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Basics/Form/TriangleStrip/TriangleStrip.js b/content/examples_p5/Basics/Form/TriangleStrip/TriangleStrip.js index 915ea3c5d..9b5183e04 100644 --- a/content/examples_p5/Basics/Form/TriangleStrip/TriangleStrip.js +++ b/content/examples_p5/Basics/Form/TriangleStrip/TriangleStrip.js @@ -13,7 +13,8 @@ var outsideRadius = 150; var insideRadius = 100; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(204); x = width/2; y = height/2; diff --git a/content/examples_p5/Basics/Image/Alphamask/Alphamask.js b/content/examples_p5/Basics/Image/Alphamask/Alphamask.js index fe4827eba..c0ea76172 100644 --- a/content/examples_p5/Basics/Image/Alphamask/Alphamask.js +++ b/content/examples_p5/Basics/Image/Alphamask/Alphamask.js @@ -13,12 +13,13 @@ var img; var imgMask; function preload() { - img = loadImage("data/moonwalk.jpg"); - imgMask = loadImage("data/mask.png"); + img = loadImage("moonwalk.jpg"); + imgMask = loadImage("mask.png"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Temporary fix until https://github.com/lmccart/p5.js/pull/533 imgMask.loadPixels(); for (var i = 0; i < imgMask.pixels.length; i+=4) { diff --git a/content/examples_p5/Basics/Image/BackgroundImage/BackgroundImage.js b/content/examples_p5/Basics/Image/BackgroundImage/BackgroundImage.js index 6813c9081..06e439c28 100644 --- a/content/examples_p5/Basics/Image/BackgroundImage/BackgroundImage.js +++ b/content/examples_p5/Basics/Image/BackgroundImage/BackgroundImage.js @@ -16,11 +16,12 @@ function preload() { // The background image must be the same size as the parameters // into the size() method. In this program, the size of the image // is 640 x 360 pixels. - bg = loadImage("data/moonwalk.jpg"); + bg = loadImage("moonwalk.jpg"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Basics/Image/CreateImage/CreateImage.js b/content/examples_p5/Basics/Image/CreateImage/CreateImage.js index 1cef69c08..6e895bbd3 100644 --- a/content/examples_p5/Basics/Image/CreateImage/CreateImage.js +++ b/content/examples_p5/Basics/Image/CreateImage/CreateImage.js @@ -8,7 +8,8 @@ var img; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); img = createImage(230, 230); img.loadPixels(); for(var i = 0; i < img.pixels.length; i+=4) { diff --git a/content/examples_p5/Basics/Image/LoadDisplayImage/LoadDisplayImage.js b/content/examples_p5/Basics/Image/LoadDisplayImage/LoadDisplayImage.js index dda8c7198..32805b06b 100644 --- a/content/examples_p5/Basics/Image/LoadDisplayImage/LoadDisplayImage.js +++ b/content/examples_p5/Basics/Image/LoadDisplayImage/LoadDisplayImage.js @@ -5,19 +5,17 @@ * or any other size. */ -// The next line is needed if running in JavaScript Mode with Processing.js -/* @pjs preload="moonwalk.jpg"; */ - var img; // Declare variable "a" of type PImage function preload() { // The image file must be in the data folder of the current sketch // to load successfully - img = loadImage("data/moonwalk.jpg"); + img = loadImage("moonwalk.jpg"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { @@ -25,4 +23,5 @@ function draw() { image(img, 0, 0); // Displays the image at point (0, height/2) at half of its size image(img, 0, height/2, img.width/2, img.height/2); + noLoop(); } diff --git a/content/examples_p5/Basics/Image/Pointillism/Pointillism.js b/content/examples_p5/Basics/Image/Pointillism/Pointillism.js index e1c685c40..a17f0a564 100644 --- a/content/examples_p5/Basics/Image/Pointillism/Pointillism.js +++ b/content/examples_p5/Basics/Image/Pointillism/Pointillism.js @@ -14,12 +14,13 @@ var img; var smallPoint, largePoint; function preload() { - img = loadImage("data/moonwalk.jpg"); + img = loadImage("moonwalk.jpg"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); smallPoint = 4; largePoint = 40; imageMode(CENTER); @@ -32,6 +33,6 @@ function draw() { var x = int(random(img.width)); var y = int(random(img.height)); var pix = img.get(x, y); - fill(pix, 128); + fill(pix[0], pix[1], pix[2], 128); ellipse(x, y, pointillize, pointillize); } diff --git a/content/examples_p5/Basics/Image/RequestImage/RequestImage.js b/content/examples_p5/Basics/Image/RequestImage/RequestImage.js index c6b1744d6..4e158f445 100644 --- a/content/examples_p5/Basics/Image/RequestImage/RequestImage.js +++ b/content/examples_p5/Basics/Image/RequestImage/RequestImage.js @@ -22,12 +22,13 @@ var loadStates = new Array(imgCount); var loaderX, loaderY, theta; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); imgW = width/imgCount; // Load images asynchronously for (var i = 0; i < imgCount; i++){ - imageLoader("data/PT_anim"+nf(i, 4)+".gif",i); + imageLoader("PT_anim"+nf(i, 4)+".gif",i); } } diff --git a/content/examples_p5/Basics/Image/Transparency/Transparency.js b/content/examples_p5/Basics/Image/Transparency/Transparency.js index 94756edbc..0b0963e39 100644 --- a/content/examples_p5/Basics/Image/Transparency/Transparency.js +++ b/content/examples_p5/Basics/Image/Transparency/Transparency.js @@ -14,11 +14,12 @@ var offset = 0; var easing = 0.05; function preload() { - img = loadImage("data/moonwalk.jpg"); // Load an image into the program + img = loadImage("moonwalk.jpg"); // Load an image into the program } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Basics/Input/Clock/Clock.js b/content/examples_p5/Basics/Input/Clock/Clock.js index a376aa804..44bbe70c9 100644 --- a/content/examples_p5/Basics/Input/Clock/Clock.js +++ b/content/examples_p5/Basics/Input/Clock/Clock.js @@ -13,7 +13,8 @@ var hoursRadius; var clockDiameter; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); stroke(255); var radius = min(width, height) / 2; diff --git a/content/examples_p5/Basics/Input/Constrain/Constrain.js b/content/examples_p5/Basics/Input/Constrain/Constrain.js index f61431bb3..d88c52cb5 100644 --- a/content/examples_p5/Basics/Input/Constrain/Constrain.js +++ b/content/examples_p5/Basics/Input/Constrain/Constrain.js @@ -13,7 +13,8 @@ var edge = 100; var inner = edge + radius; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); ellipseMode(RADIUS); rectMode(CORNERS); diff --git a/content/examples_p5/Basics/Input/Easing/Easing.js b/content/examples_p5/Basics/Input/Easing/Easing.js index e14f81e75..d98f300b7 100644 --- a/content/examples_p5/Basics/Input/Easing/Easing.js +++ b/content/examples_p5/Basics/Input/Easing/Easing.js @@ -14,7 +14,8 @@ var y = 0; var easing = 0.05; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); } diff --git a/content/examples_p5/Basics/Input/Keyboard/Keyboard.js b/content/examples_p5/Basics/Input/Keyboard/Keyboard.js index d5054ab83..2911eb2e0 100644 --- a/content/examples_p5/Basics/Input/Keyboard/Keyboard.js +++ b/content/examples_p5/Basics/Input/Keyboard/Keyboard.js @@ -9,7 +9,8 @@ var rectWidth; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); background(0); rectWidth = width/4; diff --git a/content/examples_p5/Basics/Input/KeyboardFunctions/KeyboardFunctions.js b/content/examples_p5/Basics/Input/KeyboardFunctions/KeyboardFunctions.js index 7c10ebcde..bee464c7e 100644 --- a/content/examples_p5/Basics/Input/KeyboardFunctions/KeyboardFunctions.js +++ b/content/examples_p5/Basics/Input/KeyboardFunctions/KeyboardFunctions.js @@ -1,8 +1,3 @@ -// Need these resolved first: -// https://github.com/lmccart/p5.js/issues/537 -// https://github.com/lmccart/p5.js/issues/536 - - // /** // * Keyboard Functions. // * Modified from code by Martin. @@ -14,87 +9,88 @@ // * function that is called when a key is released. // */ -// var maxHeight = 40; -// var minHeight = 20; -// var letterHeight = maxHeight; // Height of the letters -// var letterWidth = 20; // Width of the letter +var maxHeight = 40; +var minHeight = 20; +var letterHeight = maxHeight; // Height of the letters +var letterWidth = 20; // Width of the letter -// var x = -letterWidth; // X position of the letters -// var y = 0; // Y position of the letters +var x = -letterWidth; // X position of the letters +var y = 0; // Y position of the letters -// var newletter; +var newletter; -// var numChars = 26; // There are 26 characters in the alphabet -// var colors = []; +var numChars = 26; // There are 26 characters in the alphabet +var colors = []; -// function setup() -// { -// createCanvas(640, 360); -// noStroke(); -// //colorMode(HSB, numChars); -// background(numChars/2); -// // Set a gray value for each key -// for(var i = 0; i < numChars; i++) { -// colors[i] = color(i, numChars, numChars); -// } +function setup() +{ + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + noStroke(); + colorMode(HSB, numChars); + background(numChars/2); + // Set a gray value for each key + for(var i = 0; i < numChars; i++) { + colors[i] = color(i, numChars, numChars); + } -// } +} -// function draw() -// { -// if(newletter == true) { -// // Draw the "letter" -// var y_pos; -// if (letterHeight == maxHeight) { -// y_pos = y; -// rect( x, y_pos, letterWidth, letterHeight ); -// } else { -// y_pos = y + minHeight; -// rect( x, y_pos, letterWidth, letterHeight ); -// fill(numChars/2); -// rect( x, y_pos-minHeight, letterWidth, letterHeight ); -// } -// console.log(letterWidth,letterHeight); -// newletter = false; -// println(letterWidth,letterHeight); +function draw() +{ + if(newletter == true) { + // Draw the "letter" + var y_pos; + if (letterHeight == maxHeight) { + y_pos = y; + rect( x, y_pos, letterWidth, letterHeight ); + } else { + y_pos = y + minHeight; + rect( x, y_pos, letterWidth, letterHeight ); + fill(numChars/2); + rect( x, y_pos-minHeight, letterWidth, letterHeight ); + } + console.log(letterWidth,letterHeight); + newletter = false; + println(letterWidth,letterHeight); -// } -// } + } +} -// function keyPressed() { -// console.log(key); -// var keyVal = key.charCodeAt(0); -// println(keyVal); -// // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122) -// if((keyVal >= 'A'.charCodeAt(0) && keyVal <= 'Z'.charCodeAt(0)) || (keyVal >= 'a'.charCodeAt(0) && keyVal <= 'z'.charCodeAt(0))) { -// var keyIndex = 0; -// if(keyVal <= 'Z'.charCodeAt(0)) { -// keyIndex = keyVal-'A'.charCodeAt(0); -// letterHeight = maxHeight; -// fill(colors[keyVal-'A'.charCodeAt(0)]); -// } else { -// keyIndex = keyVal-'a'.charCodeAt(0); -// letterHeight = minHeight; -// fill(colors[keyVal-'a'.charCodeAt(0)]); -// } -// } else { -// fill(0); -// letterHeight = 10; -// } +function keyTyped() { + console.log(key); + var keyVal = key.charCodeAt(0); + println(keyVal); + // If the key is between 'A'(65) to 'Z' and 'a' to 'z'(122) + if((keyVal >= 'A'.charCodeAt(0) && keyVal <= 'Z'.charCodeAt(0)) || (keyVal >= 'a'.charCodeAt(0) && keyVal <= 'z'.charCodeAt(0))) { + var keyIndex = 0; + if(keyVal <= 'Z'.charCodeAt(0)) { + keyIndex = keyVal-'A'.charCodeAt(0); + letterHeight = maxHeight; + fill(colors[keyVal-'A'.charCodeAt(0)]); + } else { + keyIndex = keyVal-'a'.charCodeAt(0); + letterHeight = minHeight; + fill(colors[keyVal-'a'.charCodeAt(0)]); + } + } else { + fill(0); + letterHeight = 10; + } -// newletter = true; + newletter = true; -// // Update the "letter" position -// x = ( x + letterWidth ); + // Update the "letter" position + x = ( x + letterWidth ); -// // Wrap horizontally -// if (x > width - letterWidth) { -// x = 0; -// y+= maxHeight; -// } + // Wrap horizontally + if (x > width - letterWidth) { + x = 0; + y+= maxHeight; + } -// // Wrap vertically -// if( y > height - letterHeight) { -// y = 0; // reset y to 0 -// } -// } + // Wrap vertically + if( y > height - letterHeight) { + y = 0; // reset y to 0 + } +} diff --git a/content/examples_p5/Basics/Input/Milliseconds/Milliseconds.js b/content/examples_p5/Basics/Input/Milliseconds/Milliseconds.js index 2e6fe7fae..7bfcd27cf 100644 --- a/content/examples_p5/Basics/Input/Milliseconds/Milliseconds.js +++ b/content/examples_p5/Basics/Input/Milliseconds/Milliseconds.js @@ -10,7 +10,8 @@ var scale; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); scale = width/20; } diff --git a/content/examples_p5/Basics/Input/Mouse1D/Mouse1D.js b/content/examples_p5/Basics/Input/Mouse1D/Mouse1D.js index 3c30d2b37..20b77f39a 100644 --- a/content/examples_p5/Basics/Input/Mouse1D/Mouse1D.js +++ b/content/examples_p5/Basics/Input/Mouse1D/Mouse1D.js @@ -7,7 +7,8 @@ */ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); colorMode(RGB, height, height, height); rectMode(CENTER); diff --git a/content/examples_p5/Basics/Input/Mouse2D/Mouse2D.js b/content/examples_p5/Basics/Input/Mouse2D/Mouse2D.js index b8e2f1a34..ebb9b64a1 100644 --- a/content/examples_p5/Basics/Input/Mouse2D/Mouse2D.js +++ b/content/examples_p5/Basics/Input/Mouse2D/Mouse2D.js @@ -6,7 +6,8 @@ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); rectMode(CENTER); } diff --git a/content/examples_p5/Basics/Input/MouseFunctions/MouseFunctions.js b/content/examples_p5/Basics/Input/MouseFunctions/MouseFunctions.js index e1160a0d4..f65d563ac 100644 --- a/content/examples_p5/Basics/Input/MouseFunctions/MouseFunctions.js +++ b/content/examples_p5/Basics/Input/MouseFunctions/MouseFunctions.js @@ -14,7 +14,8 @@ var yOffset = 0.0; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); bx = width/2.0; by = height/2.0; rectMode(RADIUS); diff --git a/content/examples_p5/Basics/Input/MousePress/MousePress.js b/content/examples_p5/Basics/Input/MousePress/MousePress.js index 0898b0b31..961c3f57a 100644 --- a/content/examples_p5/Basics/Input/MousePress/MousePress.js +++ b/content/examples_p5/Basics/Input/MousePress/MousePress.js @@ -7,7 +7,8 @@ function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noSmooth(); fill(126); background(102); diff --git a/content/examples_p5/Basics/Input/MouseSignals/MouseSignals.js b/content/examples_p5/Basics/Input/MouseSignals/MouseSignals.js index 8225af9e6..43889de8d 100644 --- a/content/examples_p5/Basics/Input/MouseSignals/MouseSignals.js +++ b/content/examples_p5/Basics/Input/MouseSignals/MouseSignals.js @@ -13,7 +13,8 @@ var bvals; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noSmooth(); xvals = []; yvals = []; @@ -50,10 +51,10 @@ function draw() { for(var i=1; i 10) { @@ -84,7 +86,7 @@ function mousePressed() { } // Writing the CSV back to the same file - // saveTable(table, "data/data.csv"); + // saveTable(table, "/data.csv"); // And reloading it loadData(); } diff --git a/content/examples_p5/Topics/Advanced Data/LoadSaveXML/LoadSaveXML.js b/content/examples_p5/Topics/Advanced Data/LoadSaveXML/LoadSaveXML.js index dcf37b970..92618b264 100644 --- a/content/examples_p5/Topics/Advanced Data/LoadSaveXML/LoadSaveXML.js +++ b/content/examples_p5/Topics/Advanced Data/LoadSaveXML/LoadSaveXML.js @@ -31,13 +31,14 @@ var bubbles = []; var xml; function preload() { - xml = loadXML("data/data.xml"); + xml = loadXML("/data.xml"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); loadData(); - loadXML("data/data.xml",test); + loadXML("/data.xml",test); } function test(xml) { @@ -61,7 +62,7 @@ function draw() { function loadData() { // Load XML file - // xml = loadXML("data.xml"); + // xml = loadXML(".xml"); // // Get all the child nodes named "bubble" // XML[] children = xml.getChildren("bubble"); @@ -123,7 +124,7 @@ function mousePressed() { // } // // Save a new XML file - // saveXML(xml,"data/data.xml"); + // saveXML(xml,"/data.xml"); // // reload the new data // loadData(); diff --git a/content/examples_p5/Topics/Advanced Data/XMLYahooWeather/XMLYahooWeather.js b/content/examples_p5/Topics/Advanced Data/XMLYahooWeather/XMLYahooWeather.js index f8d53513e..2801407f4 100644 --- a/content/examples_p5/Topics/Advanced Data/XMLYahooWeather/XMLYahooWeather.js +++ b/content/examples_p5/Topics/Advanced Data/XMLYahooWeather/XMLYahooWeather.js @@ -11,27 +11,29 @@ // We're going to store the temperature var temperature = 0; // We're going to store text about the weather -String weather = ""; +var weather = ""; // The zip code we'll check for -String zip = "10003"; +var zip = "10003"; -PFont font; +var xml; + +function preload() { + var url = "http://xml.weather.yahoo.com/forecastrss?p=" + zip; + // Load the XML document + xml = loadXML(url); + +} function setup() { createCanvas(600, 360); - font = createFont("Merriweather-Light.ttf", 28); - textFont(font); + textFont("Merriweather Light", 28); // The URL for the XML document - String url = "http://xml.weather.yahoo.com/forecastrss?p=" + zip; - - // Load the XML document - XML xml = loadXML(url); // Grab the element we want - XML forecast = xml.getChild("channel/item/yweather:forecast"); + var forecast = xml.getChild("channel/item/yweather:forecast"); // Get the attributes we want temperature = forecast.getInt("high"); diff --git a/content/examples_p5/Topics/Animation/AnimatedSprite/AnimatedSprite.js b/content/examples_p5/Topics/Animation/AnimatedSprite/AnimatedSprite.js index 6cafaea72..39029a78b 100644 --- a/content/examples_p5/Topics/Animation/AnimatedSprite/AnimatedSprite.js +++ b/content/examples_p5/Topics/Animation/AnimatedSprite/AnimatedSprite.js @@ -21,7 +21,8 @@ function preload() { } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); background(255, 204, 0); frameRate(24); ypos = height * 0.25; diff --git a/content/examples_p5/Topics/Animation/AnimatedSprite/Animation.js b/content/examples_p5/Topics/Animation/AnimatedSprite/Animation.js index 9eb9a3a65..bc54af5f9 100644 --- a/content/examples_p5/Topics/Animation/AnimatedSprite/Animation.js +++ b/content/examples_p5/Topics/Animation/AnimatedSprite/Animation.js @@ -8,7 +8,7 @@ function Animation(imagePrefix, count) { for (var i = 0; i < this.imageCount; i++) { // Use nf() to number format 'i' into four digits - var filename = 'data/' + imagePrefix + nf(i, 4) + ".gif"; + var filename = imagePrefix + nf(i, 4) + ".gif"; this.images[i] = loadImage(filename); } diff --git a/content/examples_p5/Topics/Animation/Sequential/Sequential.js b/content/examples_p5/Topics/Animation/Sequential/Sequential.js index 3dab0f938..a34076e9d 100644 --- a/content/examples_p5/Topics/Animation/Sequential/Sequential.js +++ b/content/examples_p5/Topics/Animation/Sequential/Sequential.js @@ -17,18 +17,18 @@ var currentFrame = 0; var images = []; function preload() { - images[0] = loadImage("data/PT_anim0000.gif"); - images[1] = loadImage("data/PT_anim0001.gif"); - images[2] = loadImage("data/PT_anim0002.gif"); - images[3] = loadImage("data/PT_anim0003.gif"); - images[4] = loadImage("data/PT_anim0004.gif"); - images[5] = loadImage("data/PT_anim0005.gif"); - images[6] = loadImage("data/PT_anim0006.gif"); - images[7] = loadImage("data/PT_anim0007.gif"); - images[8] = loadImage("data/PT_anim0008.gif"); - images[9] = loadImage("data/PT_anim0009.gif"); - images[10] = loadImage("data/PT_anim0010.gif"); - images[11] = loadImage("data/PT_anim0011.gif"); + images[0] = loadImage("PT_anim0000.gif"); + images[1] = loadImage("PT_anim0001.gif"); + images[2] = loadImage("PT_anim0002.gif"); + images[3] = loadImage("PT_anim0003.gif"); + images[4] = loadImage("PT_anim0004.gif"); + images[5] = loadImage("PT_anim0005.gif"); + images[6] = loadImage("PT_anim0006.gif"); + images[7] = loadImage("PT_anim0007.gif"); + images[8] = loadImage("PT_anim0008.gif"); + images[9] = loadImage("PT_anim0009.gif"); + images[10] = loadImage("PT_anim0010.gif"); + images[11] = loadImage("PT_anim0011.gif"); // If you don't want to load each image separately // and you know how many frames you have, you @@ -41,7 +41,8 @@ function preload() { //} } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); frameRate(24); diff --git a/content/examples_p5/Topics/Cellular Automata/GameOfLife/GameOfLife.js b/content/examples_p5/Topics/Cellular Automata/GameOfLife/GameOfLife.js index 1c95d681e..083afbba8 100644 --- a/content/examples_p5/Topics/Cellular Automata/GameOfLife/GameOfLife.js +++ b/content/examples_p5/Topics/Cellular Automata/GameOfLife/GameOfLife.js @@ -41,7 +41,8 @@ function make2DArray(cols,rows) { } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); alive = color(0, 200, 0); dead = color(0); // Instantiate arrays @@ -93,7 +94,7 @@ function draw() { } // Create new cells manually on pause - if (pause && mousePressed) { + if (pause && mouseIsPressed) { // Map and avoid out of bound errors var xCellOver = int(map(mouseX, 0, width, 0, width/cellSize)); xCellOver = constrain(xCellOver, 0, width/cellSize-1); @@ -110,7 +111,7 @@ function draw() { fill(alive); // Fill alive color } } - else if (pause && !mousePressed) { // And then save to buffer once mouse goes up + else if (pause && !mouseIsPressed) { // And then save to buffer once mouse goes up // Save cells to buffer (so we opeate with one array keeping the other intact) for (var x=0; x 16.0) { - break; // Bail + // Now we test, as we iterate z = z^2 + cm does z tend towards infinity? + var a = x; + var b = y; + var n = 0; + while (n < maxiterations) { + var aa = a * a; + var bb = b * b; + var twoab = 2.0 * a * b; + a = aa - bb + x; + b = twoab + y; + // Infinty in our finite world is simple, let's just consider it 16 + if (aa + bb > 16.0) { + break; // Bail + } + n++; } - n++; - } - // We color each pixel based on how long it takes to get to infinity - // If we never got there, let's pick the color black - var loc = (i+j*width)*4 - if (n == maxiterations) { - pixels[loc] = 0; - pixels[loc+1] = 0; - pixels[loc+2] = 0; - pixels[loc+3] = 255; - } else { - // Gosh, we could make fancy colors here if we wanted - pixels[loc] = n*16 % 255; - pixels[loc+1] = n*16 % 255; - pixels[loc+2] = n*16 % 255; - pixels[loc+3] = 255; + // We color each pixel based on how long it takes to get to infinity + // If we never got there, let's pick the color black + var loc = (i+j*width)*4 + if (n == maxiterations) { + pixels[loc] = 0; + pixels[loc+1] = 0; + pixels[loc+2] = 0; + pixels[loc+3] = 255; + } else { + // Gosh, we could make fancy colors here if we wanted + pixels[loc] = n*16 % 255; + pixels[loc+1] = n*16 % 255; + pixels[loc+2] = n*16 % 255; + pixels[loc+3] = 255; + } + x += dx; } - x += dx; + y += dy; } - y += dy; -} -updatePixels(); + updatePixels(); } diff --git a/content/examples_p5/Topics/Fractals and L-Systems/PenroseSnowflake/PenroseSnowflake.js b/content/examples_p5/Topics/Fractals and L-Systems/PenroseSnowflake/PenroseSnowflake.js index f6d9e4cda..e74bc95bc 100644 --- a/content/examples_p5/Topics/Fractals and L-Systems/PenroseSnowflake/PenroseSnowflake.js +++ b/content/examples_p5/Topics/Fractals and L-Systems/PenroseSnowflake/PenroseSnowflake.js @@ -8,7 +8,8 @@ var ps; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); stroke(255); noFill(); ps = new PenroseSnowflakeLSystem(); diff --git a/content/examples_p5/Topics/Fractals and L-Systems/PenroseTile/PenroseTile.js b/content/examples_p5/Topics/Fractals and L-Systems/PenroseTile/PenroseTile.js index f0f6aefd8..f4aea6657 100644 --- a/content/examples_p5/Topics/Fractals and L-Systems/PenroseTile/PenroseTile.js +++ b/content/examples_p5/Topics/Fractals and L-Systems/PenroseTile/PenroseTile.js @@ -8,7 +8,8 @@ var ds; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); ds = new PenroseLSystem(); ds.simulate(4); } diff --git a/content/examples_p5/Topics/Fractals and L-Systems/Pentigree/Pentigree.js b/content/examples_p5/Topics/Fractals and L-Systems/Pentigree/Pentigree.js index 669e0f53c..8248a161e 100644 --- a/content/examples_p5/Topics/Fractals and L-Systems/Pentigree/Pentigree.js +++ b/content/examples_p5/Topics/Fractals and L-Systems/Pentigree/Pentigree.js @@ -9,7 +9,8 @@ var ps; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); ps = new PentigreeLSystem(); ps.simulate(3); } diff --git a/content/examples_p5/Topics/Fractals and L-Systems/Tree/Tree.js b/content/examples_p5/Topics/Fractals and L-Systems/Tree/Tree.js index be0922ccf..605874239 100644 --- a/content/examples_p5/Topics/Fractals and L-Systems/Tree/Tree.js +++ b/content/examples_p5/Topics/Fractals and L-Systems/Tree/Tree.js @@ -11,7 +11,8 @@ var theta; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Topics/GUI/Button/Button.js b/content/examples_p5/Topics/GUI/Button/Button.js index 310cfc9d5..bfe82ccf8 100644 --- a/content/examples_p5/Topics/GUI/Button/Button.js +++ b/content/examples_p5/Topics/GUI/Button/Button.js @@ -1,7 +1,7 @@ /** * Button. * - * Click on one of the colored squares in the + * Click on one of the colored shapes in the * center of the image to change the color of * the background. */ @@ -17,7 +17,8 @@ var rectOver = false; var circleOver = false; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); rectColor = color(0); rectHighlight = color(51); circleColor = color(255); diff --git a/content/examples_p5/Topics/GUI/Handles/Handles.js b/content/examples_p5/Topics/GUI/Handles/Handles.js index 8cd6592e9..c13b7d9cf 100644 --- a/content/examples_p5/Topics/GUI/Handles/Handles.js +++ b/content/examples_p5/Topics/GUI/Handles/Handles.js @@ -7,7 +7,8 @@ var handles; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); var num = height/15; handles = []; var hsize = 10; diff --git a/content/examples_p5/Topics/GUI/Rollover/Rollover.js b/content/examples_p5/Topics/GUI/Rollover/Rollover.js index c1b620baf..c42e5bbee 100644 --- a/content/examples_p5/Topics/GUI/Rollover/Rollover.js +++ b/content/examples_p5/Topics/GUI/Rollover/Rollover.js @@ -19,7 +19,8 @@ var rectOver = false; var circleOver = false; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); rectColor = color(0); circleColor = color(255); baseColor = color(102); diff --git a/content/examples_p5/Topics/GUI/Scrollbar/Scrollbar.js b/content/examples_p5/Topics/GUI/Scrollbar/Scrollbar.js index f70278e10..56128a5b6 100644 --- a/content/examples_p5/Topics/GUI/Scrollbar/Scrollbar.js +++ b/content/examples_p5/Topics/GUI/Scrollbar/Scrollbar.js @@ -14,12 +14,13 @@ var img1, img2; // Two images to load function preload() { // Load images - img1 = loadImage("data/seedTop.jpg"); - img2 = loadImage("data/seedBottom.jpg"); + img1 = loadImage("seedTop.jpg"); + img2 = loadImage("seedBottom.jpg"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); hs1 = new HScrollbar(0, height/2-8, width, 16, 16); diff --git a/content/examples_p5/Topics/Image Processing/Blur/Blur.js b/content/examples_p5/Topics/Image Processing/Blur/Blur.js index 2449ac79b..5dbad4bfb 100644 --- a/content/examples_p5/Topics/Image Processing/Blur/Blur.js +++ b/content/examples_p5/Topics/Image Processing/Blur/Blur.js @@ -16,12 +16,13 @@ var kernel = [[ v, v, v ], var img; function preload() { - img = loadImage("data/moon.jpg"); // Load the original image + img = loadImage("moon.jpg"); // Load the original image } function setup() { - createCanvas(640, 360); - devicePixelScaling(false); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + pixelDensity(1); noLoop(); } diff --git a/content/examples_p5/Topics/Image Processing/Brightness/Brightness.js b/content/examples_p5/Topics/Image Processing/Brightness/Brightness.js index ac7ef600f..5af1796f0 100644 --- a/content/examples_p5/Topics/Image Processing/Brightness/Brightness.js +++ b/content/examples_p5/Topics/Image Processing/Brightness/Brightness.js @@ -12,12 +12,13 @@ var img; function preload() { - img = loadImage("data/moon-wide.jpg"); + img = loadImage("moon-wide.jpg"); } function setup() { - createCanvas(640, 360); - devicePixelScaling(false); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + pixelDensity(1); frameRate(30); img.loadPixels(); // Only need to load the pixels[] array once, because we're only diff --git a/content/examples_p5/Topics/Image Processing/Convolution/Convolution.js b/content/examples_p5/Topics/Image Processing/Convolution/Convolution.js index 3641b643e..0c96bfe3b 100644 --- a/content/examples_p5/Topics/Image Processing/Convolution/Convolution.js +++ b/content/examples_p5/Topics/Image Processing/Convolution/Convolution.js @@ -20,12 +20,13 @@ var matrix = [ [ -1, -1, -1 ] , function preload() { - img = loadImage("data/moon-wide.jpg"); + img = loadImage("moon-wide.jpg"); } function setup() { - createCanvas(640, 360); - devicePixelScaling(false); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + pixelDensity(1); } function draw() { @@ -76,7 +77,7 @@ function convolution(x, y, matrix, matrixsize, img) { // Make sure we haven't walked off the edge of the pixel array // It is often good when looking at neighboring pixels to make sure we have not gone off the edge of the pixel array by accident. - loc = constrain(loc, 0, img.pixels.length-1); + loc = constrain(loc, 0, img.pixels.length-3); // Calculate the convolution // We sum all the neighboring pixels multiplied by the values in the convolution matrix. rtotal += img.pixels[loc ] * matrix[i][j]; diff --git a/content/examples_p5/Topics/Image Processing/Convolution/testing.html b/content/examples_p5/Topics/Image Processing/Convolution/testing.html index 09ea2514c..372fe7f65 100644 --- a/content/examples_p5/Topics/Image Processing/Convolution/testing.html +++ b/content/examples_p5/Topics/Image Processing/Convolution/testing.html @@ -1,11 +1,12 @@ - - + + +
    diff --git a/content/examples_p5/Topics/Image Processing/EdgeDetection/EdgeDetection.js b/content/examples_p5/Topics/Image Processing/EdgeDetection/EdgeDetection.js index 05c0adbb1..6f20c9c48 100644 --- a/content/examples_p5/Topics/Image Processing/EdgeDetection/EdgeDetection.js +++ b/content/examples_p5/Topics/Image Processing/EdgeDetection/EdgeDetection.js @@ -17,12 +17,13 @@ var kernel = [[ -1, -1, -1 ], var img; function preload() { - img = loadImage("data/moon.jpg"); // Load the original image + img = loadImage("moon.jpg"); // Load the original image } function setup() { - createCanvas(640, 360); - devicePixelScaling(false); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + pixelDensity(1); noLoop(); } diff --git a/content/examples_p5/Topics/Image Processing/Histogram/Histogram.js b/content/examples_p5/Topics/Image Processing/Histogram/Histogram.js index 4b8ed9a97..be7cf9eb9 100644 --- a/content/examples_p5/Topics/Image Processing/Histogram/Histogram.js +++ b/content/examples_p5/Topics/Image Processing/Histogram/Histogram.js @@ -16,41 +16,48 @@ // This needs to be resolved: https://github.com/processing/p5.js/issues/563 -// var img; +var img; -// function preload() { -// img = loadImage("data/frontier.jpg"); -// } +function preload() { + img = loadImage("frontier.jpg"); +} -// function setup() { +function setup() { + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Load an image from the data directory // Load a different image by modifying the comments - // image(img, 0, 0); - // var hist = []; - // loadPixels(); - // // Calculate the histogram - // for (var i = 0; i < img.width; i++) { - // for (var j = 0; j < img.height; j++) { - // var c = get(i,j); - // var col = color(c[0],c[1],c[2]) - // println(c,col); - // var bright = brightness(col); - // //hist[bright]++; - // break; - // } - // } - - // // Find the largest value in the histogram - // var histMax = max(hist); - - // stroke(255); - // // Draw half of the histogram (skip every second value) - // for (var i = 0; i < img.width; i += 2) { - // // Map i (from 0..img.width) to a location in the histogram (0..255) - // var which = int(map(i, 0, img.width, 0, 255)); - // // Convert the histogram value to a location between - // // the bottom and the top of the picture - // var y = int(map(hist[which], 0, histMax, img.height, 0)); - // line(i, img.height, i, y); - // } -//} + image(img, 0, 0); + var hist = []; + for (var i = 0; i < 256; i++) { + hist[i] = 0; + } + img.loadPixels(); + // Calculate the histogram + for (var i = 0; i < img.width; i++) { + for (var j = 0; j < img.height; j++) { + var index = (i + j * img.width) * 4; + var r = img.pixels[index]; + var g = img.pixels[index+1]; + var b = img.pixels[index+2]; + //println(c,col); + var bright = floor((r+g+b)/3); + hist[bright]++; + //break; + } + } + + // Find the largest value in the histogram + var histMax = max(hist); + + stroke(255); + // Draw half of the histogram (skip every second value) + for (var i = 0; i < img.width; i += 2) { + // Map i (from 0..img.width) to a location in the histogram (0..255) + var which = int(map(i, 0, img.width, 0, 255)); + // Convert the histogram value to a location between + // the bottom and the top of the picture + var y = int(map(hist[which], 0, histMax, img.height, 0)); + line(i, img.height, i, y); + } +} diff --git a/content/examples_p5/Topics/Image Processing/Histogram/testing.html b/content/examples_p5/Topics/Image Processing/Histogram/testing.html index 97bd3fa19..a73776eba 100644 --- a/content/examples_p5/Topics/Image Processing/Histogram/testing.html +++ b/content/examples_p5/Topics/Image Processing/Histogram/testing.html @@ -1,7 +1,7 @@ - - + + diff --git a/content/examples_p5/Topics/Image Processing/LinearImage/LinearImage.js b/content/examples_p5/Topics/Image Processing/LinearImage/LinearImage.js index 347c406b6..6fc66f0f8 100644 --- a/content/examples_p5/Topics/Image Processing/LinearImage/LinearImage.js +++ b/content/examples_p5/Topics/Image Processing/LinearImage/LinearImage.js @@ -10,44 +10,45 @@ // This needs to be resolved: https://github.com/processing/p5.js/issues/478 -// var img; -// var direction = 1; - -// var signal = 0; - -// function preload() { -// img = loadImage("data/sea.jpg"); -// } - -// function setup() { -// createCanvas(640, 360); -// stroke(255); -// img.loadPixels(); -// loadPixels(); -// } - -// function draw() { -// loadPixels(); -// if (signal > img.height-1 || signal < 0) { -// direction = direction * -1; -// } -// if (mouseIsPressed == true) { -// signal = abs(mouseY % img.height); -// } -// else { -// signal += (0.3*direction); -// } - -// if (keyIsPressed == true) { -// set(0, 0, img); -// line(0, signal, img.width, signal); -// } -// else { -// var signalOffset = int(signal)*img.width; -// for (var y = 0; y < img.height; y++) { -// //arrayCopy(img.pixels, signalOffset, pixels, y*width, img.width); -// } -// updatePixels(); -// } -// } +var img; +var direction = 1; + +var signal = 0; + +function preload() { + img = loadImage("sea.jpg"); +} + +function setup() { + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); + stroke(255); + img.loadPixels(); + loadPixels(); +} + +function draw() { + loadPixels(); + if (signal > img.height-1 || signal < 0) { + direction = direction * -1; + } + if (mouseIsPressed == true) { + signal = abs(mouseY % img.height); + } + else { + signal += (0.3*direction); + } + + if (keyIsPressed == true) { + set(0, 0, img); + line(0, signal, img.width, signal); + } + else { + var signalOffset = int(signal)*img.width; + for (var y = 0; y < img.height; y++) { + arrayCopy(img.pixels, signalOffset, pixels, y*width, img.width); + } + updatePixels(); + } +} diff --git a/content/examples_p5/Topics/Image Processing/PixelArray/PixelArray.js b/content/examples_p5/Topics/Image Processing/PixelArray/PixelArray.js index c1071a796..8215fcaf7 100644 --- a/content/examples_p5/Topics/Image Processing/PixelArray/PixelArray.js +++ b/content/examples_p5/Topics/Image Processing/PixelArray/PixelArray.js @@ -15,11 +15,12 @@ var direction = 1; var signal = 0; function preload() { - img = loadImage("data/sea.jpg"); + img = loadImage("sea.jpg"); } function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noFill(); stroke(255); frameRate(30); diff --git a/content/examples_p5/Topics/Interaction/Follow1/Follow1.js b/content/examples_p5/Topics/Interaction/Follow1/Follow1.js index dade515f9..450c68317 100644 --- a/content/examples_p5/Topics/Interaction/Follow1/Follow1.js +++ b/content/examples_p5/Topics/Interaction/Follow1/Follow1.js @@ -11,7 +11,8 @@ var angle1 = 0.0; var segLength = 50; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(20.0); stroke(255, 100); } diff --git a/content/examples_p5/Topics/Interaction/Follow2/Follow2.js b/content/examples_p5/Topics/Interaction/Follow2/Follow2.js index 443dbd5a9..239489e3d 100644 --- a/content/examples_p5/Topics/Interaction/Follow2/Follow2.js +++ b/content/examples_p5/Topics/Interaction/Follow2/Follow2.js @@ -12,7 +12,8 @@ var y = [0,0]; var segLength = 50; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(20.0); stroke(255, 100); } diff --git a/content/examples_p5/Topics/Interaction/Follow3/Follow3.js b/content/examples_p5/Topics/Interaction/Follow3/Follow3.js index c7de627fc..c1a40d068 100644 --- a/content/examples_p5/Topics/Interaction/Follow3/Follow3.js +++ b/content/examples_p5/Topics/Interaction/Follow3/Follow3.js @@ -12,7 +12,8 @@ var y = new Array(20); var segLength = 18; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(9); stroke(255, 100); for (var i = 0; i < x.length; i++) { diff --git a/content/examples_p5/Topics/Interaction/Reach1/Reach1.js b/content/examples_p5/Topics/Interaction/Reach1/Reach1.js index 943da8172..73c600dad 100644 --- a/content/examples_p5/Topics/Interaction/Reach1/Reach1.js +++ b/content/examples_p5/Topics/Interaction/Reach1/Reach1.js @@ -11,7 +11,8 @@ var segLength = 80; var x, y, x2, y2; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(20.0); stroke(255, 100); diff --git a/content/examples_p5/Topics/Interaction/Reach2/Reach2.js b/content/examples_p5/Topics/Interaction/Reach2/Reach2.js index 57fcb81e9..301e06c68 100644 --- a/content/examples_p5/Topics/Interaction/Reach2/Reach2.js +++ b/content/examples_p5/Topics/Interaction/Reach2/Reach2.js @@ -14,7 +14,8 @@ var segLength = 26; var targetX, targetY = 0; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(20.0); stroke(255, 100); for (var i = 0 ; i < x.length; i++) { diff --git a/content/examples_p5/Topics/Interaction/Reach3/Reach3.js b/content/examples_p5/Topics/Interaction/Reach3/Reach3.js index 32e847685..735caed22 100644 --- a/content/examples_p5/Topics/Interaction/Reach3/Reach3.js +++ b/content/examples_p5/Topics/Interaction/Reach3/Reach3.js @@ -19,7 +19,8 @@ var ballXDirection = 1; var ballYDirection = -1; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); strokeWeight(20.0); stroke(255, 100); noFill(); diff --git a/content/examples_p5/Topics/Interaction/Tickle/Tickle.js b/content/examples_p5/Topics/Interaction/Tickle/Tickle.js index 3dd928322..a40efcf6a 100644 --- a/content/examples_p5/Topics/Interaction/Tickle/Tickle.js +++ b/content/examples_p5/Topics/Interaction/Tickle/Tickle.js @@ -13,11 +13,11 @@ var x, y; // X and Y coordinates of text var hr, vr; // horizontal and vertical radius of the text function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Create the font - textFont("Georgia"); - textSize(36); + textFont("Source Code Pro", 36); textAlign(CENTER, CENTER); hr = textWidth(message) / 2; diff --git a/content/examples_p5/Topics/Motion/Bounce/Bounce.js b/content/examples_p5/Topics/Motion/Bounce/Bounce.js index 5f1e8b4cf..a656a8d0b 100644 --- a/content/examples_p5/Topics/Motion/Bounce/Bounce.js +++ b/content/examples_p5/Topics/Motion/Bounce/Bounce.js @@ -16,7 +16,8 @@ var ydirection = 1; // Top to Bottom function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); frameRate(30); ellipseMode(RADIUS); diff --git a/content/examples_p5/Topics/Motion/BouncyBubbles/BouncyBubbles.js b/content/examples_p5/Topics/Motion/BouncyBubbles/BouncyBubbles.js index 2145a4563..62c702178 100644 --- a/content/examples_p5/Topics/Motion/BouncyBubbles/BouncyBubbles.js +++ b/content/examples_p5/Topics/Motion/BouncyBubbles/BouncyBubbles.js @@ -13,7 +13,8 @@ var friction = -0.9; var balls = []; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); for (var i = 0; i < numBalls; i++) { balls[i] = new Ball(random(width), random(height), random(30, 70), i, balls); } diff --git a/content/examples_p5/Topics/Motion/Brownian/Brownian.js b/content/examples_p5/Topics/Motion/Brownian/Brownian.js index 42ff4ab66..a461b7178 100644 --- a/content/examples_p5/Topics/Motion/Brownian/Brownian.js +++ b/content/examples_p5/Topics/Motion/Brownian/Brownian.js @@ -13,7 +13,8 @@ var ay = []; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); for(var i = 0; i < num; i++) { ax[i] = width/2; ay[i] = height/2; diff --git a/content/examples_p5/Topics/Motion/CircleCollision/CircleCollision.js b/content/examples_p5/Topics/Motion/CircleCollision/CircleCollision.js index 36d92636d..d07cfa5e7 100644 --- a/content/examples_p5/Topics/Motion/CircleCollision/CircleCollision.js +++ b/content/examples_p5/Topics/Motion/CircleCollision/CircleCollision.js @@ -8,7 +8,8 @@ var balls; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); balls = [ new Ball(100, 400, 20), new Ball(700, 400, 80) diff --git a/content/examples_p5/Topics/Motion/Linear/Linear.js b/content/examples_p5/Topics/Motion/Linear/Linear.js index 3d1b2514e..ae97843ed 100644 --- a/content/examples_p5/Topics/Motion/Linear/Linear.js +++ b/content/examples_p5/Topics/Motion/Linear/Linear.js @@ -10,7 +10,8 @@ var a; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); stroke(255); a = height/2; } diff --git a/content/examples_p5/Topics/Motion/Morph/Morph.js b/content/examples_p5/Topics/Motion/Morph/Morph.js index 427d5a498..bcac639ae 100644 --- a/content/examples_p5/Topics/Motion/Morph/Morph.js +++ b/content/examples_p5/Topics/Motion/Morph/Morph.js @@ -19,7 +19,8 @@ var morph = []; var state = false; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); // Create a circle using vectors pointing from center for (var angle = 0; angle < 360; angle += 9) { diff --git a/content/examples_p5/Topics/Motion/MovingOnCurves/MovingOnCurves.js b/content/examples_p5/Topics/Motion/MovingOnCurves/MovingOnCurves.js index 1413b75e3..9ffe264aa 100644 --- a/content/examples_p5/Topics/Motion/MovingOnCurves/MovingOnCurves.js +++ b/content/examples_p5/Topics/Motion/MovingOnCurves/MovingOnCurves.js @@ -18,7 +18,8 @@ var step = 0.01; // Size of each step along the path var pct = 0.0; // Percentage traveled (0.0 to 1.0) function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); distX = endX - beginX; distY = endY - beginY; diff --git a/content/examples_p5/Topics/Motion/Reflection1/Reflection1.js b/content/examples_p5/Topics/Motion/Reflection1/Reflection1.js index 4cb1cad69..01a58738a 100644 --- a/content/examples_p5/Topics/Motion/Reflection1/Reflection1.js +++ b/content/examples_p5/Topics/Motion/Reflection1/Reflection1.js @@ -24,7 +24,8 @@ var r = 6; var speed = 3.5; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); fill(128); base1 = createVector(0, height-150); diff --git a/content/examples_p5/Topics/Motion/Reflection2/Orb.js b/content/examples_p5/Topics/Motion/Reflection2/Orb.js index a18aca5b4..ed5bedb1e 100644 --- a/content/examples_p5/Topics/Motion/Reflection2/Orb.js +++ b/content/examples_p5/Topics/Motion/Reflection2/Orb.js @@ -7,7 +7,7 @@ function Orb(x, y, r_) { this.r = r_; // A damping of 80% slows it down when it hits the ground this.damping = 0.8; - + this.move = function() { // Move orb @@ -21,15 +21,15 @@ function Orb(x, y, r_) { fill(200); ellipse(this.position.x, this.position.y, this.r*2, this.r*2); } - + // Check boundaries of window this.checkWallCollision = function() { if (this.position.x > width-this.r) { this.position.x = width-this.r; this.velocity.x *= -this.damping; - } + } else if (this.position.x < this.r) { - this.position.x = r; + this.position.x = this.r; this.velocity.x *= -this.damping; } } @@ -44,15 +44,15 @@ function Orb(x, y, r_) { var cosine = cos(groundSegment.rot); var sine = sin(groundSegment.rot); - /* Rotate ground and velocity to allow + /* Rotate ground and velocity to allow orthogonal collision calculations */ var groundXTemp = cosine * deltaX + sine * deltaY; var groundYTemp = cosine * deltaY - sine * deltaX; var velocityXTemp = cosine * this.velocity.x + sine * this.velocity.y; var velocityYTemp = cosine * this.velocity.y - sine * this.velocity.x; - /* Ground collision - check for surface - collision and also that orb is within + /* Ground collision - check for surface + collision and also that orb is within left/rights bounds of ground segment */ if (groundYTemp > -this.r && this.position.x > groundSegment.x1 && @@ -73,4 +73,3 @@ function Orb(x, y, r_) { this.position.y = groundSegment.y + deltaY; } } - diff --git a/content/examples_p5/Topics/Motion/Reflection2/Reflection2.js b/content/examples_p5/Topics/Motion/Reflection2/Reflection2.js index 2caba5a6d..47a9d3895 100644 --- a/content/examples_p5/Topics/Motion/Reflection2/Reflection2.js +++ b/content/examples_p5/Topics/Motion/Reflection2/Reflection2.js @@ -14,7 +14,8 @@ var segments = 40; var ground = new Array(segments); function setup(){ - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); gravity = createVector(0,0.05); // An orb object that will fall and bounce around orb = new Orb(50, 50, 3); diff --git a/content/examples_p5/Topics/Simulate/Chain/Chain.js b/content/examples_p5/Topics/Simulate/Chain/Chain.js index afd037d2a..5d5a198e1 100644 --- a/content/examples_p5/Topics/Simulate/Chain/Chain.js +++ b/content/examples_p5/Topics/Simulate/Chain/Chain.js @@ -13,7 +13,8 @@ var gravity = 9.0; var mass = 2.0; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); fill(255, 126); // Inputs: x, y, mass, gravity s1 = new Spring2D(0.0, width/2, mass, gravity); diff --git a/content/examples_p5/Topics/Simulate/Flocking/Boid.js b/content/examples_p5/Topics/Simulate/Flocking/Boid.js index 3987f804c..b4814cd23 100644 --- a/content/examples_p5/Topics/Simulate/Flocking/Boid.js +++ b/content/examples_p5/Topics/Simulate/Flocking/Boid.js @@ -84,8 +84,8 @@ function Boid(x,y) { this.borders = function() { if (this.position.x < -this.r) this.position.x = width +this.r; if (this.position.y < -this.r) this.position.y = height+this.r; - if (this.position.x > width +this.r) location.x = -this.r; - if (this.position.y > height+this.r) location.y = -this.r; + if (this.position.x > width +this.r) this.position.x = -this.r; + if (this.position.y > height+this.r) this.position.y = -this.r; } // Separation diff --git a/content/examples_p5/Topics/Simulate/Flocking/Flocking.js b/content/examples_p5/Topics/Simulate/Flocking/Flocking.js index a589f0098..9a70b09ff 100644 --- a/content/examples_p5/Topics/Simulate/Flocking/Flocking.js +++ b/content/examples_p5/Topics/Simulate/Flocking/Flocking.js @@ -12,7 +12,8 @@ var flock; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); flock = new Flock(); // Add an initial set of boids into the system for (var i = 0; i < 150; i++) { diff --git a/content/examples_p5/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.js b/content/examples_p5/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.js index 814aeab0e..7c22979b0 100644 --- a/content/examples_p5/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.js +++ b/content/examples_p5/Topics/Simulate/ForcesWithVectors/ForcesWithVectors.js @@ -19,7 +19,8 @@ var movers = []; var liquid; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); reset(); // Create liquid object liquid = new Liquid(0, height/2, width, height/2, 0.1); diff --git a/content/examples_p5/Topics/Simulate/ForcesWithVectors/Liquid.js b/content/examples_p5/Topics/Simulate/ForcesWithVectors/Liquid.js index 6a250f434..b17e05f16 100644 --- a/content/examples_p5/Topics/Simulate/ForcesWithVectors/Liquid.js +++ b/content/examples_p5/Topics/Simulate/ForcesWithVectors/Liquid.js @@ -28,7 +28,7 @@ var Liquid = function(x, y, w, h, c) { var dragMagnitude = this.c * speed * speed; // Direction is inverse of velocity - var dragForce = m.velocity.get(); + var dragForce = m.velocity.copy(); dragForce.mult(-1); // Scale according to magnitude diff --git a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.js b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.js index 57e6e6a2d..fc2efb41a 100644 --- a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.js +++ b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/MultipleParticleSystems.js @@ -13,7 +13,8 @@ var systems = []; function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/Particle.js b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/Particle.js index fcf6953e7..a9cf73b7d 100644 --- a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/Particle.js +++ b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/Particle.js @@ -2,7 +2,7 @@ var Particle = function(position) { this.acceleration = createVector(0, 0.05); this.velocity = createVector(random(-1, 1), random(-2, 0)); - this.position = position.get(); + this.position = position.copy(); this.lifespan = 255.0; this.run = function() { diff --git a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/CrazyParticle.js b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleCrazy.js similarity index 100% rename from content/examples_p5/Topics/Simulate/MultipleParticleSystems/CrazyParticle.js rename to content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleCrazy.js diff --git a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleSystem.js b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleSystem.js index b3d8b9333..e14cf2fa2 100644 --- a/content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleSystem.js +++ b/content/examples_p5/Topics/Simulate/MultipleParticleSystems/ParticleSystem.js @@ -1,5 +1,5 @@ var ParticleSystem = function(num, position) { - this.origin = position.get(); + this.origin = position.copy(); this.particles = []; for (var i = 0; i < num; i++) { this.particles.push(new Particle(this.origin)); // Add "num" amount of particles to the arraylist diff --git a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/Particle.js b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/Particle.js index 63e705c61..340838019 100644 --- a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/Particle.js +++ b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/Particle.js @@ -2,7 +2,7 @@ var Particle = function(position) { this.acceleration = createVector(0, 0.05); this.velocity = createVector(random(-1, 1), random(-2, 0)); - this.position = position.get(); + this.position = position.copy(); this.lifespan = 255.0; this.run = function() { diff --git a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/ParticleSystem.js b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/ParticleSystem.js index 6b1c5a383..dd8f7e06b 100644 --- a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/ParticleSystem.js +++ b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/ParticleSystem.js @@ -3,7 +3,7 @@ // http://natureofcode.com var ParticleSystem = function(position) { - this.origin = position.get(); + this.origin = position.copy(); this.particles = []; this.addParticle = function() { diff --git a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.js b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.js index 47dba8e79..33a55c22f 100644 --- a/content/examples_p5/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.js +++ b/content/examples_p5/Topics/Simulate/SimpleParticleSystem/SimpleParticleSystem.js @@ -11,7 +11,8 @@ var ps; function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); ps = new ParticleSystem(createVector(width/2,50)); } diff --git a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/Particle.js b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/Particle.js index 6eaac279f..d0d2bc703 100644 --- a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/Particle.js +++ b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/Particle.js @@ -5,7 +5,7 @@ var Particle = function(l, img_) { var vx = randomGaussian()*0.3; var vy = randomGaussian()*0.3 - 1.0; this.vel = createVector(vx, vy); - this.pos = l.get(); + this.pos = l.copy(); this.lifespan = 100.0; this.img = img_; diff --git a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/ParticleSystem.js b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/ParticleSystem.js index 77fe3ec1d..59fcc3a07 100644 --- a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/ParticleSystem.js +++ b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/ParticleSystem.js @@ -2,7 +2,7 @@ // An ArrayList is used to manage the list of Particles var ParticleSystem = function(num, v, img_) { - this.origin = v.get(); + this.origin = v.copy(); this.img = img_; this.particles = []; for (var i = 0; i < num; i++) { diff --git a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.js b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.js index d040a166a..1071c8c34 100644 --- a/content/examples_p5/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.js +++ b/content/examples_p5/Topics/Simulate/SmokeParticleSystem/SmokeParticleSystem.js @@ -13,11 +13,12 @@ var ps; function preload() { - img = loadImage("data/texture.png"); + img = loadImage("texture.png"); } function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); ps = new ParticleSystem(0,createVector(width/2,height-60),img); } diff --git a/content/examples_p5/Topics/Simulate/Spring/Spring.js b/content/examples_p5/Topics/Simulate/Spring/Spring.js index 3f79913a6..b728d1a1c 100644 --- a/content/examples_p5/Topics/Simulate/Spring/Spring.js +++ b/content/examples_p5/Topics/Simulate/Spring/Spring.js @@ -27,7 +27,8 @@ var f = 0; // Force function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); rectMode(CORNERS); noStroke(); left = width/2 - 100; diff --git a/content/examples_p5/Topics/Simulate/Springs/Springs.js b/content/examples_p5/Topics/Simulate/Springs/Springs.js index 277291981..fec66c4cf 100644 --- a/content/examples_p5/Topics/Simulate/Springs/Springs.js +++ b/content/examples_p5/Topics/Simulate/Springs/Springs.js @@ -11,7 +11,8 @@ var num = 3; var springs = []; function setup() { - createCanvas(640, 360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); noStroke(); springs[0] = new Spring(240, 260, 40, 0.98, 8.0, 0.1, springs, 0); springs[1] = new Spring(320, 210, 120, 0.95, 9.0, 0.1, springs, 1); diff --git a/content/examples_p5/Topics/Vectors/AccelerationWithVectors/AccelerationWithVectors.js b/content/examples_p5/Topics/Vectors/AccelerationWithVectors/AccelerationWithVectors.js index 24eaaaf02..9269c6b21 100644 --- a/content/examples_p5/Topics/Vectors/AccelerationWithVectors/AccelerationWithVectors.js +++ b/content/examples_p5/Topics/Vectors/AccelerationWithVectors/AccelerationWithVectors.js @@ -14,7 +14,8 @@ var mover; function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); mover = new Mover(); } diff --git a/content/examples_p5/Topics/Vectors/BouncingBall/BouncingBall.js b/content/examples_p5/Topics/Vectors/BouncingBall/BouncingBall.js index 74c5ce11f..d1dff80e6 100644 --- a/content/examples_p5/Topics/Vectors/BouncingBall/BouncingBall.js +++ b/content/examples_p5/Topics/Vectors/BouncingBall/BouncingBall.js @@ -12,7 +12,8 @@ var velocity; // Velocity of shape var gravity; // Gravity acts at the shape's acceleration function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); position = createVector(100,100); velocity = createVector(1.5,2.1); gravity = createVector(0,0.2); diff --git a/content/examples_p5/Topics/Vectors/VectorMath/VectorMath.js b/content/examples_p5/Topics/Vectors/VectorMath/VectorMath.js index 460224193..869c0d35c 100644 --- a/content/examples_p5/Topics/Vectors/VectorMath/VectorMath.js +++ b/content/examples_p5/Topics/Vectors/VectorMath/VectorMath.js @@ -7,7 +7,8 @@ */ function setup() { - createCanvas(640,360); + var canvas = createCanvas(640, 360); + canvas.parent("p5container"); } function draw() { diff --git a/content/examples_p5/testing.html b/content/examples_p5/testing.html index 5d3987279..584d611f9 100644 --- a/content/examples_p5/testing.html +++ b/content/examples_p5/testing.html @@ -1,15 +1,14 @@ - - - - + + + + + - +
    + - - - diff --git a/content/examples_topics.xml b/content/examples_topics.xml index cc8c0f974..35e20f85f 100755 --- a/content/examples_topics.xml +++ b/content/examples_topics.xml @@ -9,44 +9,65 @@ Icosahedra     - Continuous Lines - Pattern - Pulses + Continuous Lines + Pattern + Pulses - Sequential - Animated Sprite + Sequential + Animated Sprite - Rollover - Button - Handles - Scrollbar + Rollover + Button + Handles + Scrollbar - Linear - Bounce - Bouncy Bubbles - Moving On Curves - Brownian + Linear + Bounce + Bouncy Bubbles + Moving On Curves + Brownian + Circle Collision + Morph + Reflection 1 + Reflection 2 - Tickle - Follow 1 - Follow 2 - Follow 3 - Reach 1 - Reach 2 - Reach 3 + Tickle + Follow 1 + Follow 2 + Follow 3 + Reach 1 + Reach 2 + Reach 3 - Pixel Array - Brightness - Blur - Edge Detection + Pixel Array + Brightness + Blur + Edge Detection + Convolution + Histogram + Linear Image Zoom Explode + + Array List Class + Int List Lottery + Load Save JSON + Load Save Table + Load Save XML + XML Yahoo Weather + + + Load File 1 + Load File 2 + Save File 1 + Save One Frame + Texture Quad Texture Triangle @@ -54,21 +75,29 @@ Texture Cube - Spring - Springs - Chain + Simple Particle System + Multiple Particle Systems + Forces With Vectors + Smoke Particle System + Flocking Soft Body - Flocking - Simple Particle System - Multiple Particle Systems + + + Bouncing Ball + Vector Math + Acceleration With Vectors - Mandelbrot - Tree + Mandelbrot + Tree + Koch + Penrose Snowflake + Penrose Tile + Pentigree - - Wolframs's 1D CA - Conway's Game of Life + + Wolframs's 1D CA + Conway's Game of Life Spore 1 Spore 2 diff --git a/content/static/books.html b/content/static/books.html index 0fe961c54..fa7778968 100755 --- a/content/static/books.html +++ b/content/static/books.html @@ -3,7 +3,6 @@

    Books. Processing books cove

    - @@ -12,22 +11,22 @@

    Books. Processing books cove Processing: A Programming Handbook for Visual Designers,
    Second Edition
    Casey Reas and Ben Fry.
    Published December 2014, The MIT Press. 720 pages. Hardcover.
    - » Order from MIT Press
    + » Order from MIT Press
    » Order from Amazon

    The second edition of the Handbook has been thoroughly updated, influenced by the seven years of Processing being taught in classrooms, computer labs, and studios since the first edition. Every chapter has been revised, and added chapters introduce new 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 and history. “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.

    - If you are an educator, you can request a desk/exam copy from the MIT Press website.
    + If you are an educator, you can request a desk/exam copy from the MIT Press website.

    - + - + - + + + + + + + + + + + @@ -62,7 +85,7 @@

    Books. Processing books cove

    + @@ -96,9 +119,61 @@

    Books. Processing books cove How can we capture the unpredictable evolutionary and emergent properties of nature in software? How can understanding the mathematical principles behind our physical world help us to create digital worlds? This book focuses on a range of programming strategies and techniques behind computer simulations of natural systems, from elementary concepts in mathematics and physics to more advanced algorithms that enable sophisticated visual results. Readers will progress from building a basic physics engine to creating intelligent moving objects and complex systems, setting the foundation for further experiments in generative design. Subjects covered include forces, trigonometry, fractals, cellular automata, self-organization, and genetic algorithms. - + +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -115,10 +190,9 @@

    Books. Processing books cove 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."

    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."
    -

    + -

    @@ -130,14 +204,14 @@

    Books. Processing books cove

    + @@ -150,7 +224,7 @@

    Books. Processing books cove alt="The SparkFun Guide to Processing"/>

    + @@ -171,6 +245,34 @@

    Books. Processing books cove

    + + + + + + + + + + @@ -209,13 +311,11 @@

    Books. Processing books cove This book has a different perspective from the others because of Glassner's deep experience in computer graphics. His bio reads, "Dr. Andrew Glassner is a writer-director, and a consultant in story structure, interactive fiction, and computer graphics. He started working in 3D computer graphics in 1978, and has carried out research at the NYIT Computer Graphics Lab, Case Western Reserve University, the IBM TJ Watson Research Lab, the Delft University of Technology, Bell Communications Research, Xerox PARC, and Microsoft Research... He is also a well-known writer, and has published numerous technical papers and books on topics ranging from 3D modeling, rendering, and animation to digital sound synthesis. His book '3D Computer Graphics: A Handbook for Artists and Designers' has taught a generation of artists through two editions and three languages. Glassner created and edited the 'Graphics Gems' series and created and wrote several chapters in the book 'An Introduction to Ray Tracing'. He wrote the two-volume text 'Principles of Digital Image Synthesis'."

    - - - + - - - - - + 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." + + + @@ -274,10 +372,12 @@

    Books. Processing books cove

    - - - + + - + + + @@ -300,21 +401,44 @@

    Books. Processing books cove

    - - - + + + - + - + + + + + + + - + @@ -360,7 +484,7 @@

    Books. Processing books cove -

    + @@ -422,20 +546,65 @@

    Books. Processing books cove

    + + + + + + + + - + + + + + + + + + + + @@ -453,7 +622,7 @@

    Books. Processing books cove Text in German.

    The OReilly.de site writes, "Processing ist eine auf Grafik, Simulation und Animation spezialisierte objektorientierte Programmiersprache, die besonders für Menschen mit wenig Programmiererfahrung geeignet ist. Deshalb eignet sie sich vor allem für Künstler, Bastler und Programmiereinsteiger. Die aus Java abgeleitete Sprache wurde geschaffen, um schnell und effektiv mit relativ wenig Aufwand zu beeindruckenden Ergebnissen zu kommen. Processing führt den Leser zügig in die Programmieressentials ein und geht dann unmittelbar zur Programmierung grafisch anspruchsvoller Anwendungen über. Spielerisch wird dem Leser die 2D- und 3D-Programierung, Textrendering, die Bildbearbeitung und sogar die Videomanipulation nahe gebracht." -

    + @@ -472,6 +641,7 @@

    Books. Processing books cove Processing - eine Einführung in die Programmierung
    Andres Wanner (Chapters by Hans Peter Wyss, Roland Broennimann and Roman Schnyder).
    Version 1.1, Published May 2010, Lulu Press. 83 pages. Softcover.
    + Text in German.
    Order from lulu.com
    Book website

    @@ -512,59 +682,69 @@

    Books. Processing books cove +

    + + + + + + + + + + + + There's additional information on the publisher's website. + + + + + + - - + - + Итак, представляю вашему вниманию книгу “Программирование для дизайнеров”. Книга вышла на русском языке при поддержке Европейского Союза, организации Темпус по проекту 544083 “Enhancement of Russian creative education: new Master program in Digital Arts in line with EU standards [ENMDA]”. Ее можно найти в библиотеках страны и несколько копий будет находиться в библиотеке политехнического университета. Выражаю благодарность кафедре инженерной графики и дизайна за помощь в издании, некоторые страницы печатного издания цветные, что приятно." + + +
    Processing: A Programming Handbook for Visual Designers (Second Edition)

     

     

    Make: Getting Started with Processing, Second Edition @@ -38,7 +37,7 @@

    Books. Processing books cove » Order Print/EBook from O'Reilly
    » Order from Amazon.com
    - This casual book is a concise introduction to Processing and interactive computer graphics. Written by the founders of Processing, it takes you through the learning process one step at a time to help you grasp core programming concepts. You'll learn how to sketch with code -- creating a program with a few lines of code, observing the result, and then adding to it. It was written to help reader: + This casual book is a concise introduction to Processing and interactive computer graphics. Written by the founders of Processing, it takes you through the learning process one step at a time to help you grasp core programming concepts. You'll learn how to sketch with code -- creating a program with a few lines of code, observing the result, and then adding to it. It was written to help readers:
    • Quickly learn programming basics, from variables to objects
    • Understand the fundamentals of computer graphics
      • @@ -48,6 +47,30 @@

      Books. Processing books cove

     

     

    Processing for Android +

    + Processing for Android: Create Mobile, Sensor-Aware, and VR Applications Using Processing
    + Andrés Colubri.
    + Published 2017, Apress. 381 pages. Paperback.
    + » Order Print/EBook from Apress
    + » Order Print from Amazon
    +
    + Learn how to use the Processing programming language and environment to create Android applications with ease. This book covers the basics of the Processing language, allowing users to effectively program interactive graphics in 2D and 3D. It also details the application of these techniques to different types of Android devices (smartphones, tablets, wearables and smartwatches).
    +
    + Processing for Android walks you through the steps of taking an initial idea to a final app. With this book, you will be able to write engaging apps with interactive visuals driven by motion and location information obtained from the device’s sensors; including health data from the wearer, like step count and heart rate.
    +
    + An advantage of Processing for Android over more complex programming environments is the ability for users to focus on the interactions and visual output of their code rather than in the implementation details of the Android platform. This book goes through a comprehensive series of hand-on projects, ranging from simple sketches to more complex projects involving sensors and integration with larger apps. It also covers important aspects such as exporting your Processing projects as signed apps are ready to upload to the Google Play store and be share with the world! +

    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 + » 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.

    @@ -73,7 +96,7 @@

    Books. Processing books cove

    If you are an educator, you can request a desk/exam copy from the Elsevier website.
    -

     

     

    Coding Art: The Four Steps to Creative Programming with the Processing LanguageCoding 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 OpenCVPro 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 LanguageProgramming 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." +

     

     

     

     

    		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.
    + 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."
    @@ -163,7 +237,7 @@

    Books. Processing books cove
  • Fetch weather data from the Web and build a custom weather dashboard
  • Create visualizations that change based on sound, light, and temperature readings
    • -

     
    Processing: An Introduction to ProgrammingProcessing: 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: +
      +
    • Provides a gentle and accessible introduction to programming using Processing
      • +
    • Includes traditional programming examples, as well as examples that use graphics, animation, and interactivity
      • +
    • Play, record, and sample audio to create your own soundboard
      • +
    • Covers all of the standard programming constructs
      • +
    • Presents the material in a fun, conversational, and approachable way
      • +
    +

     

     

    Processing: Creative Coding and Generative Art in Processing 2

     

     
    Processing: Creative Coding and Computational Art (Foundation) Processing: Creative Coding and Computational Art (Foundation)
    @@ -227,11 +327,10 @@

    Books. Processing books cove
    The Friends of Ed website says, "This book is written especially for artists, designers, and other creative professionals and students exploring code art, graphics programming, and computational aesthetics. The book provides a solid and comprehensive foundation in programming, including object-oriented principles, and introduces you to the easy-to-grasp Processing language, so no previous coding experience is necessary. The book then goes through using Processing to code lines, curves, shapes, and motion, continuing to the point where you'll have mastered Processing and can really start to unleash your creativity with realistic physics, interactivity, and 3D! In the final chapter, you'll even learn how to extend your Processing skills by working directly with the powerful Java programming language, the language Processing itself is built with." (Quote from the Friends of Ed website)

    -

     

     
    + Programming Interactivity: A Designer's Guide to Processing, Arduino, and openFrameworksProgramming 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 ArtGenerative Art
    +
    + Generative Art + + Generative Art
    Matt Pearson.
    Published March 2011, Manning Publications. 300 pages. Paperback.
    » Order from Amazon.com @@ -290,8 +390,9 @@

    Books. Processing books cove
  • Featuring the work of Robert Hodgin, Jared Tarbell, Aaron Koblin, Casey Reas and many more of the finest contemporary generative artists.
  • 32-page full-color section
  • Foreword by Marius Watz
    • -

    Algorithms for Visual Design Using the Processing LanguageAlgorithms 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 + + 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 + + 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 +

    + Creating Procedural Artworks with Processing
    A Holistic Guide
    + Penny de Byl
    + Published May 2017, CreateSpace Independent Publishing Platform, 386 pages. Paperback
    + » Order Print/eBook from Amazon
    + » Order from iBooks
    +
    + This book started as a set of tutorials for university level multimedia students to introduce them to computer programming through the development of artworks. It's therefore presented in a non-threatening way that will ease the reader into programming and has been written for absolute beginners who want to learn to program. It approaches coding through a unique combination of teaching programming while keeping in mind the principles of design and mathematics. +

    + The chapters are organised to weave together programming functionality and design principles presenting one concept at a time, with multiple hands on exercises in each chapter. +
    +
    + Additional information available at http://holistic3d.com/creating-procedural-artworks/

    + Experience an example of the artworks created at http://holistic3d.com/processing
    +

     

     

    O Código Transcendente: Uma Introdução Prática à Programação e Arte GerativaO 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 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.
    + Published August 2013. 178 pages. PDF, Paperback.
    + Text in German.
    + » 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

    Il Codice dei Cibernetici: Introduzione alla Computer Art con Processing + 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 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.

     

     

     

    		 - Processing is also discussed through examples and projects in the following books: - -
    - -
    - - 10 PRINT CHR$(205.5+RND(1)); : GOTO 10By Nick Montfort, Patsy Baudoin, John Bell, Ian Bogost, Jeremy Douglass, Mark C. Marino, Michael Mateas, Casey Reas, Mark Sample, Noah Vawter. Examples use Processing to explore a modern interpretation of a 1982 Commodore 64 program.
    - -
    - - Make: 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 + + 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.

    diff --git a/content/static/download.html b/content/static/download.html new file mode 100644 index 000000000..122db5e30 --- /dev/null +++ b/content/static/download.html @@ -0,0 +1,334 @@ +
    + +

    Download Processing. Processing is available for Linux, Mac OS X, and Windows. Select your choice to download the software below.

    + + +
    + + + + +
    + 4.0b1 + (9 August 2021) + +
    + + +
    +
    + » Github
    + » Report Bugs
    + » Wiki
    + » Supported Platforms +
    +
    + Read about the changes in 4.0. The list of revisions covers the differences between releases in detail. +
    +
    +
    + + +
    +

    Stable Releases

    +
  • + 4.0b1 + (9 August 2021) + Windows 64 + Linux 64 + macOS +
    • +
  • + 3.5.4 + (17 January 2020) + Win 32 + Win 64 + Linux 64 + Mac OS X +
    • + + +
  • + 2.2.1 + (19 May 2014) + Win 32 + Win 64 + Linux 32 + Linux 64 + Mac OS X +
    • + +
  • + 1.5.1 + (15 May 2011) + Win (standard) + Win (no Java) + Linux x86 + Mac OS X +
    • + +

    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.

    +
    + + +
    +

    Pre-Releases

    + +

    The changes document covers incremental updates between 4.x releases, and is especially important to read for pre-releases.

    +
    + + +
    + Processing is Open Source Software. The PDE (Processing Development Environment) is released under the GNU GPL (General Public License). The export libraries (also known as 'core') are released under the GNU LGPL (Lesser General Public License). There's more information about Processing and Open Source in the FAQ and more information about the GNU GPL and GNU LGPL at opensource.org. Please support Processing! +
    + +
    diff --git a/content/static/foundation-site/donate.html b/content/static/foundation-site/donate.html deleted file mode 100644 index f7ec3331c..000000000 --- a/content/static/foundation-site/donate.html +++ /dev/null @@ -1,38 +0,0 @@ -

    Donate

    - -

    - - - - -
    - - - -
    -

    diff --git a/content/static/foundation-site/fellowships.html b/content/static/foundation-site/fellowships.html deleted file mode 100644 index 8359f116c..000000000 --- a/content/static/foundation-site/fellowships.html +++ /dev/null @@ -1,57 +0,0 @@ -

    Fellowships

    - -

    - - - - - -
    - -

    -The Processing Foundation maintains a fellowship program that supports the development and expansion of Processing and its affiliated projects. Work done by fellows is supported through funding and mentorship from The Processing Foundation. The projects done so far have all been undertaken in parallel with each of the fellows’ practices as artists. - -

    -
    - -
    -
    -

    -Wilm Thoben (2013-14) -

    -

    -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. See more of Thoben's work at wilmthoben.com. -

    -
    - -
    -
    -

    -Lauren McCarthy (2013) -

    -

    -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. See more of McCarthy's work at lauren-mccarthy.com. - -

    -
    - -
    -
    -

    -Greg Borenstein (2013) -

    -

    -Borenstein expanded 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. See more of Borenstein's work at gregborenstein.com. -

    - -
    -

    diff --git a/content/static/foundation-site/imgs/JH_bio.png b/content/static/foundation-site/imgs/JH_bio.png deleted file mode 100644 index 1bc2b1b1a..000000000 Binary files a/content/static/foundation-site/imgs/JH_bio.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/ben_worksample_sm.png b/content/static/foundation-site/imgs/ben_worksample_sm.png deleted file mode 100644 index 23d723fe3..000000000 Binary files a/content/static/foundation-site/imgs/ben_worksample_sm.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/dan_worksample_sm.png b/content/static/foundation-site/imgs/dan_worksample_sm.png deleted file mode 100644 index a29e3dba9..000000000 Binary files a/content/static/foundation-site/imgs/dan_worksample_sm.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/greg_worksample1.png b/content/static/foundation-site/imgs/greg_worksample1.png deleted file mode 100644 index 61ab8c712..000000000 Binary files a/content/static/foundation-site/imgs/greg_worksample1.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/greg_worksample2.png b/content/static/foundation-site/imgs/greg_worksample2.png deleted file mode 100644 index d1411648b..000000000 Binary files a/content/static/foundation-site/imgs/greg_worksample2.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/greg_worksample3.png b/content/static/foundation-site/imgs/greg_worksample3.png deleted file mode 100644 index fb5a1e0ae..000000000 Binary files a/content/static/foundation-site/imgs/greg_worksample3.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/john_worksample_sm.png b/content/static/foundation-site/imgs/john_worksample_sm.png deleted file mode 100644 index 21c3ad277..000000000 Binary files a/content/static/foundation-site/imgs/john_worksample_sm.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/lauren_worksample1.png b/content/static/foundation-site/imgs/lauren_worksample1.png deleted file mode 100644 index c6aed5299..000000000 Binary files a/content/static/foundation-site/imgs/lauren_worksample1.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/lauren_worksample2.png b/content/static/foundation-site/imgs/lauren_worksample2.png deleted file mode 100644 index 71a59024e..000000000 Binary files a/content/static/foundation-site/imgs/lauren_worksample2.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/lauren_worksample3.png b/content/static/foundation-site/imgs/lauren_worksample3.png deleted file mode 100644 index dd32868d8..000000000 Binary files a/content/static/foundation-site/imgs/lauren_worksample3.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/lauren_worksample_sm.png b/content/static/foundation-site/imgs/lauren_worksample_sm.png deleted file mode 100644 index 50e7fee7b..000000000 Binary files a/content/static/foundation-site/imgs/lauren_worksample_sm.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/processing-foundation-logo.svg b/content/static/foundation-site/imgs/processing-foundation-logo.svg deleted file mode 100644 index 76b2e09a2..000000000 --- a/content/static/foundation-site/imgs/processing-foundation-logo.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - -Processing Foundation - diff --git a/content/static/foundation-site/imgs/processing-logo.svg b/content/static/foundation-site/imgs/processing-logo.svg deleted file mode 100644 index 6eaebe60a..000000000 --- a/content/static/foundation-site/imgs/processing-logo.svg +++ /dev/null @@ -1,57 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/content/static/foundation-site/imgs/processing-site.png b/content/static/foundation-site/imgs/processing-site.png deleted file mode 100644 index 615c4b9c0..000000000 Binary files a/content/static/foundation-site/imgs/processing-site.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/reas_worksample_sm.png b/content/static/foundation-site/imgs/reas_worksample_sm.png deleted file mode 100644 index cbf6befe7..000000000 Binary files a/content/static/foundation-site/imgs/reas_worksample_sm.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/search-f.svg b/content/static/foundation-site/imgs/search-f.svg deleted file mode 100644 index 8066b89ab..000000000 --- a/content/static/foundation-site/imgs/search-f.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - diff --git a/content/static/foundation-site/imgs/wilm_worksample1.png b/content/static/foundation-site/imgs/wilm_worksample1.png deleted file mode 100644 index 74514bb21..000000000 Binary files a/content/static/foundation-site/imgs/wilm_worksample1.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/wilm_worksample2.png b/content/static/foundation-site/imgs/wilm_worksample2.png deleted file mode 100644 index 33a021566..000000000 Binary files a/content/static/foundation-site/imgs/wilm_worksample2.png and /dev/null differ diff --git a/content/static/foundation-site/imgs/wilm_worksample3.png b/content/static/foundation-site/imgs/wilm_worksample3.png deleted file mode 100644 index f009d61fe..000000000 Binary files a/content/static/foundation-site/imgs/wilm_worksample3.png and /dev/null differ diff --git a/content/static/foundation-site/mission.html b/content/static/foundation-site/mission.html deleted file mode 100644 index b26fe4bd7..000000000 --- a/content/static/foundation-site/mission.html +++ /dev/null @@ -1,37 +0,0 @@ -

    Mission

    - -

    - - - - -
    - -

    - 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. -

    - -
    -

    diff --git a/content/static/foundation-site/overview.html b/content/static/foundation-site/overview.html deleted file mode 100644 index a7addf80c..000000000 --- a/content/static/foundation-site/overview.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - -
    - -

    - 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. -

    - -

    -Processing is primarily developed by a dedicated group affiliated with Fathom Information Design (Boston), the UCLA Arts Software Studio (Los Angeles), and ITP at NYU (New York City). -

    - -

    - The Processing Foundation supports a fellowship program to initiate and develop research projects for the Processing software. -

    - -

    -We are supported by our community and actively seek donations through downloads of Processing. -

    - -

    -Contact us at foundation@processing.org -

    - -
    diff --git a/content/static/foundation-site/patrons.html b/content/static/foundation-site/patrons.html deleted file mode 100644 index da4035913..000000000 --- a/content/static/foundation-site/patrons.html +++ /dev/null @@ -1,56 +0,0 @@ -

    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. You can donate when you download the software here. -

    - -

    - The University of Denver and the Emergent Digital Practices program sponsored a Processing 3.0 development meeting in November 2014. We thank Chris Coleman and Laleh Mehran for arranging this session and gracefully hosting us. -

    - -

    - 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 four years, 2010 to 2014. It has provided the base for many important enhancements to the software. -

    - -

    - In 2013, O'Reilly Media and Arduino made donations to the Processing Foundation. -

    - -

    - 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. -
      • - -
    - - -
    -

    diff --git a/content/static/foundation-site/people.html b/content/static/foundation-site/people.html deleted file mode 100644 index 67311af77..000000000 --- a/content/static/foundation-site/people.html +++ /dev/null @@ -1,71 +0,0 @@ -

    Board of Directors

    - - - - - - - - - - - - - - - - - - - - - - -
    - - - 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 and Edythe L. Broad Institute of MIT and 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. -
    - - - 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. -
    - - - Lauren McCarthy is an artist based in Brooklyn, NY. She is full-time faculty at NYU ITP, and recently a resident at CMU STUDIO for Creative Inquiry and Eyebeam. She holds an MFA from UCLA and a BS Computer Science and BS Art and Design from MIT. Her work explores current systems and structures for being a person and interacting with other people. -
    - - - 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. -
    - -

    Assistant Director

    - - - - - - - - -
    - - - Johanna Hedva is an artist and writer whose practice manifests in a wide range of projects, from performances of Ancient Greek plays rewritten to respond to feminist and queer political discourse, to poetry, novels, criticism, and theory. She's got an MA in Aesthetics and Politics, and an MFA in Art, from California Institute of the Arts, and has been an artist-in-residence at Headlands Center for the Arts, and writer-in-residence at the Armory Center for the Arts. Her work with the Processing Foundation is motivated by her political and social commitments to gender and racial diversity in technology and the arts; open-source philosophy and practice; and promoting the attenuation of the boundaries between creative and thought-making disciplines of all kinds. -
    - - -

    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. -
    diff --git a/content/static/foundation-site/projects.html b/content/static/foundation-site/projects.html deleted file mode 100644 index 926060e62..000000000 --- a/content/static/foundation-site/projects.html +++ /dev/null @@ -1,49 +0,0 @@ -

    Projects

    - -

    - - - - -
    - -

    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

    - -

    - Our most recent initiative: To write Processing code. In Python. -

    - -

    - We are thrilled to make available this public release of the Python Mode for Processing, and its associated documentation. If you'd like to help us improve the implementation of Python Mode and its documentation, please find us on Github. -

    - -
    -

    diff --git a/content/static/foundation-site/reports.html b/content/static/foundation-site/reports.html deleted file mode 100644 index bd1dff641..000000000 --- a/content/static/foundation-site/reports.html +++ /dev/null @@ -1,176 +0,0 @@ -

    Annual Reports

    - -

    - - - - - -
    - -

    2013 Report

    - -

    - We had a busy and productive 2013 with a wide range of activities: -

      -
    • Released Processing 2.0 and 2.1
      • -
        -
      • New OpenGL renderers for speed
        • -
      • Integrated GLSL shaders and API
        • -
      • New video library for faster capture and playback
        • -
      • Enhanced library manager for easy install
        • -
      • Enhanced modes infrastructure to make it easier to add new languages to the PDE
        • -
      • New features for working with XML and JSON
        • -
      • New classes for working with data
        • -
      • New features for working with SVN and OBJ
        • -
      -
    • Launched "Hello Processing" video tutorial
      • - -
    • Processing Fellows
      • -
        -
      • Lauren McCarthy, exploratory research led to p5.js
        • -
      • Greg Borenstein, released OpenCV library
        • -
      • Wilm Thoben, work started on new core Sound library
        • -
      -
    • Community Development
      • -
        -
      • Worked with community library authors to port and develop 109 libraries for 2.0
        • -
      • New templates developed for creating libraries and tools
        • -
      • 2.0 Processing Forum launched and 1.0 Forum archived
        • -
      • Website redesigned with simplified navigation and new tutorials
        • -
      - -
    • Thank you! This year, we're especially grateful to the following people and groups:
      • -
        -
      • Processing users who have donated through the Download page
        • -
      • O'Reilly Media for the December 2013 matching grant
        • -
      • Arduino for the generous donation in February 2013
        • -
      • The Google Summer of Code program for supporting students to work with us
        • -
      -
    -

    - -
    -
    -

    Google Summer of Code

    - -

    2014 Report

    - -

    - The Processing Foundation participated in Google Summer of Code for its fourth consecutive year in 2014, completing a total of eleven projects (summarized below) with a group of dedicated, innovative, and inspiring students. -

      -
    • “Android Mode for Processing 3.0” by Imil Ziyaztdinov, mentored by Andres Colubri
      • -
        -
      • Export signed package (with transparent handing of keystores)
        • -
      • Device selector
        • -
      • Automatic SDK download/installation
        • -
      • Target SDK selector
        • -
      • Fixed critical bugs, most notably the missing javac error during package building
        • -
      - -
    • “Contributions Manager: Reloaded” by Joel Moniz, mentored by Florian Jenett
      • -
        -
      • Addition, removal, and update of Tools and Modes without restart
        • -
      • New "examples-package"-type contribution
        • -
      -
    • “Loom” by Chris Johnson-Roberson, mentored by R. Luke DuBois
      • -
        -
      • Allows for creation and manipulation of patterns from timed events.
        • -
      -
    • New video library using GStreamer 1.x by Roland Elek, co-mentored by Levente Farkas and Andres Colubri
      • -
        -
      • Creates a set of Java bindings for the GStreamer 1.x series to use within Processing
        • -
      -
    • “ofSketch” by Brannon Dorsey, mentored by Christopher Baker -
      • -
        -
      • Browser-based IDE for openFrameworks
        • -
      • API specific autocomplete
        • -
      • Compilation feedback
        • -
      • Error reporting
        • -
      • Project export
        • -
      • Remote coding capabilities
        • -
      • Raspberry Pi support
        • -
      -
    • “p5.sound” by Jason Sigal, mentored by Evelyn Eastmond
      • -
        -
      • Audio input
        • -
      • Playback
        • -
      • Manipulation
        • -
      • Effects
        • -
      • Recording
        • -
      • Analysis
        • -
      • Synthesis
        • -
      • Built with syntax from Wilm Thoben's Sound for Processing library
        • -
      -
    • “p5 IDE” by Sam Lavigne, mentored by Lauren McCarthy -
      • -
        -
      • Easy to use desktop IDE for creating pg5.js projects
        • -
      - -
    • “PDE X for Processing 3.0” by Manindra Moharana, mentored by Daniel Shiffman -
      • -
        -
      • Easy to use desktop IDE for creating p5.js projects
        • -
      - -
    • “POculus” by Pratik Sharma, mentored by Elie Zananiri -
      • -
        -
      • Oculus Rift renderer for Processing
        • -
      • Runs any P3D sketch in an Oculus Rift
        • - -
      - -
    • “Sound for Processing 3.0” by Wilm Thoben, mentored by Casey Reas
      • -
        -
      • New lightweight sound library for Processing
        • -
      • Using enhanced version of the methcla sound engine
        • -
      • Low latency support
        • -
      • Synthesis objects, analyzers, and effects
        • -
      - -
    • “TweakMode” for Processing 3.0 by Gal Sasson, mentored by Daniel Shiffman
      • -
        -
      • Allows changing sketch parameters in real-time.
        • -
      -
    -

    - -
    -

    2013 Report

    - -

    - In 2013, our third year participating in Google Summer of Code, the Processing Foundation completed four projects in collaboration and mentorship with a group of talented students. -

      -
    • “GUI Library for Processing” by Martin Leopold
      • -
        -
      • Prototype for new graphical user interface for Processing
        • -
      - -
    • “PDE X” by Manindra Moharana
      • -
        -
      • Augments the Processing development
        • -
      • Code completion
        • -
      • Refactoring
        • -
      • Real-time error checking
        • -
      • Debugging
        • -
      -
    • “Serial Library for Processing” by Gottfried Haider
      • -
        -
      • Replaces existing RXTX-based serial library with one built on top of Java Simple Serial Connector
        • -
      • Improved corss platform support
        • -
      -
    • “Tweak Mode” by Gal Sasson
      • -
        -
      • Allows "tweaking" of hard-coded numbers in real-time through a GUI built into Processing's PDE
        • -
      -

      - - -
    -

    diff --git a/content/static/foundation.html b/content/static/foundation.html deleted file mode 100644 index caa4c380c..000000000 --- a/content/static/foundation.html +++ /dev/null @@ -1,121 +0,0 @@ -

    Foundation. The Processing Foundation is an organization that develops software tools for the visual arts.

    - -

    - - - - - -
    - - -

    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: -

      -
    • Released Processing 2.0 and 2.1
      • -
        -
      • New OpenGL renderers for speed
        • -
      • Integrated GLSL shaders and API
        • -
      • New video library for faster capture and playback
        • -
      • Enhanced library manager for easy install
        • -
      • Enhanced modes infrastructure to make it easier to add new languages to the PDE
        • -
      • New features for working with XML and JSON
        • -
      • New classes for working with data
        • -
      • New features for working with SVN and OBJ
        • -
      -
    • Launched "Hello Processing" video tutorial
      • - -
    • Processing Fellows
      • -
        -
      • Lauren McCarthy, exploratory research led to p5.js
        • -
      • Greg Borenstein, released OpenCV library
        • -
      • Wilm Thoben, work started on new core Sound library
        • -
      -
    • Community Development
      • -
        -
      • Worked with community library authors to port and develop 109 libraries for 2.0
        • -
      • New templates developed for creating libraries and tools
        • -
      • 2.0 Processing Forum launched and 1.0 Forum archived
        • -
      • Website redesigned with simplified navigation and new tutorials
        • -
      -
    • Google Summer of Code 2013. For the third year, we mentored a group of university students to explore their ideas for extended Processing. Please read our summary post.
      • -
        -
      • Manindra Moharana's PDEX brings code completion, debugging, and more to the PDE
        • -
      • Gal Sasson's Tweak Mode makes it easy to modify parameters while a program runs
        • -
      • Gottfried Haider's Serial library is a needed update to the core library
        • -
      • Martin Leopold's GUI library is a new approach to created interface elements
        • -
      -
    • Thank you! This year, we're especially grateful to the following people and groups:
      • -
        -
      • Processing users who have donated through the Download page
        • -
      • O'Reilly Media for the December 2013 matching grant
        • -
      • Arduino for the generous donation in February 2013
        • -
      • The Google Summer of Code program for supporting students to work with us
        • -
      -
    -

    - -

    - 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. -

    - -
    -

    diff --git a/content/static/handbook.html b/content/static/handbook.html index e1fbca351..27ef76ed6 100644 --- a/content/static/handbook.html +++ b/content/static/handbook.html @@ -6,13 +6,13 @@

    Processing: A Programming Handbook Published December 2014, The MIT Press.
    720 Pages. Hardcover.

    - » Order from MIT Press
    + » Order from MIT Press
    » Order from Amazon

    » Download Examples
    » Errata

    - If you are an educator, you can request a desk/exam copy from the MIT Press website. + If you are an educator, you can request a desk/exam copy from the MIT Press website.

    @@ -28,7 +28,7 @@

    Processing: A Programming Handbook

    - 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. + 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.

    diff --git a/content/static/overview.html b/content/static/overview.html index 13349191d..d5d3d30ff 100644 --- a/content/static/overview.html +++ b/content/static/overview.html @@ -6,14 +6,11 @@

    Overview. A short introducti

    - For the past fourteen 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. - -

    - 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. + 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.

    - 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.

    Education

    @@ -27,7 +24,7 @@

    Education

    - 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.

    Culture

    @@ -45,21 +42,23 @@

    Research

    Foundation

    -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 http://foundation.processing.org/. +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/.

    History

    - 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 diff --git a/content/static/people.html b/content/static/people.html index ed14bc057..d406b648c 100755 --- a/content/static/people.html +++ b/content/static/people.html @@ -6,78 +6,57 @@

    People. Processing is a comm

    - Lead Developers
    + Project Leads
    Ben Fry and Casey Reas started Processing in Spring 2001 and continue to obsessively work on it. In 2012, they started the Processing Foundation along with Dan Shiffman, who formally joined as a third project lead.

    - Senior Developers
    - Andres Colubri (Boston), OpenGL / Video
    - Florian Jenett (Frankfurt), Forum
    - Elie Zananiri (Montreal), Contributed Libraries / Tools
    - Scott Murray (San Francisco), Website / Reference / UI
    + Developers
    + Andres Colubri (Boston), OpenGL / Video
    + Elie Zananiri (New York), Contributed Libraries / Tools
    + Samuel Pottinger (San Francisco), Processing Core

    -

    + -

    +

    Libraries, Tools
    - The core Processing software is augmented by libraries and tools contributed through the community. - These inventive extensions are a bright future for the project. We have a list of - Contributed Libraries and + The core Processing software is augmented by libraries and tools contributed through + the community. These inventive extensions are a bright future for the project. We have a + list of Contributed Libraries and Contributed Tools posted online. - These contributions can't be underestimated. For example, see how - Karsten Schmidt (London) has transformed Processing - through the toxiclibs library and how - Damien Di Fede (Austin) has extended the project - into programming sound through his minim - library.
    -

    - - - -

    - Fellowship Alumni
    - Lauren McCarthy (New York), Spring/Summer/Fall 2013
    - Greg Borenstein (New York), Spring/Summer 2013
    - Wilm Thoben (Los Angeles), Fall 2013/Winter 2014
    + These contributions can't be underestimated. For example, see how Karsten Schmidt (London) has + transformed Processing through the toxiclibs library and how Damien Di Fede (Austin) has extended + the project into programming sound through his minim library.

    - Developer Alumni
    + Alumni
    + Jakub Valtar (Brno), Processing Core
    + Scott Garner (New York), Hello Processing Website
    + Scott Murray (San Francisco), Website / Reference / UI
    + Gottfried Haider (Los Angeles), Processing for Pi
    + Florian Jenett (Frankfurt), Forum
    + Jamie Kosoy (San Francisco), Website
    + Manindra Moharana (San Diego), PDE / Core
    + James Grady (Boston), Visual Design
    + + Patrick Hebron, Video Library (Summer 2011)
    Peter Kalauskas, Library/Tool/Mode Install Utility (Summer, Fall 2011)
    Andreas Schlegel, Libraries (Winter 2008 - Summer 2011)
    Harshani Nawarathna, Processing Development Environment (Summer 2011)
    Cindy Chi, Reference Editing (Summer 2011)
    - Jonathan Feinberg, Parsing & Android Hacking (Spring 2011)
    + Jonathan Feinberg, Parsing & Android Hacking (Spring 2011)
    Chris Lonnen, Processing Development Environment (Summer 2011)
    Eric Jordan, Graphics Weapon (2007 - 2009)
    Tom Carden, Processing Hacks Director (Summer 2005 - Fall 2008)
    @@ -132,13 +111,9 @@

    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/index.html b/content/static/shop/index.html index 64177106e..bcfd0ba95 100644 --- a/content/static/shop/index.html +++ b/content/static/shop/index.html @@ -114,7 +114,7 @@

    If you're interested in buying a book about Processing, Learning Processing, Second Edition: A Beginner's Guide to Programming Images, Animation, and Interaction
    Daniel Shiffman
    » More info
    - » Order from Amazon.com + » Order from Amazon.com diff --git a/content/static/support.html b/content/static/support.html new file mode 100644 index 000000000..2a8f77f05 --- /dev/null +++ b/content/static/support.html @@ -0,0 +1,48 @@ + + +

    + We need your help! Please support Processing by making a donation to the Processing Foundation. Your donation contributes to software development, education resources like code examples and tutorials, Fellowships, and community events. +

    + + + + + + + + + +
    + +
    + + + +

    + The Processing Foundation was established in 2012 after more than a decade of work with the Processing software. The Foundation’s mission is to promote software literacy within the visual arts, and visual literacy within technology-related fields — and to make these fields accessible to diverse communities. Our goal is to empower people of all interests and backgrounds to learn how to program and make creative work with code, especially those who might not otherwise have access to these tools and resources. You can read more about the history of Processing in the short essay "A Modern Prometheus." +

    diff --git a/content/static/tutorials/anatomy/index.html b/content/static/tutorials/anatomy/index.html index 39423e74e..6fe27c928 100644 --- a/content/static/tutorials/anatomy/index.html +++ b/content/static/tutorials/anatomy/index.html @@ -61,7 +61,7 @@

    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. + 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.

    Diagram of angle showing relationship of cosine and sine diff --git a/content/static/tutorials/android/index.html b/content/static/tutorials/android/index.html index f339fd9ba..75a355092 100644 --- a/content/static/tutorials/android/index.html +++ b/content/static/tutorials/android/index.html @@ -121,7 +121,7 @@

    Step Three: Running the App on a Device

    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/index.html b/content/static/tutorials/arrays/index.html index 534be7d26..d380160dc 100644 --- a/content/static/tutorials/arrays/index.html +++ b/content/static/tutorials/arrays/index.html @@ -724,7 +724,38 @@

    Array of Objects

    currentRing = 0; } } -//Insert Ring Class +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); + } + } +} @@ -772,7 +803,31 @@

    Array of Objects

    spots[i].display(); // Display each object } } -// Insert Spot class +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); + } +} diff --git a/content/static/tutorials/color/imgs/grayscale.svg b/content/static/tutorials/color/imgs/grayscale.svg new file mode 100644 index 000000000..ece2648ff --- /dev/null +++ b/content/static/tutorials/color/imgs/grayscale.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + +0 + +50 + +87 + +167 + +209 + +255 + diff --git a/content/static/tutorials/color/imgs/order.svg b/content/static/tutorials/color/imgs/order.svg new file mode 100644 index 000000000..38176b1bb --- /dev/null +++ b/content/static/tutorials/color/imgs/order.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + +background(150); stroke(0); line(0,0,100,100); stroke(255); noFill(); rect(25,25,50,50); + + + + + + + diff --git a/content/static/tutorials/color/index.html b/content/static/tutorials/color/index.html index 9828644ef..c609f8d15 100644 --- a/content/static/tutorials/color/index.html +++ b/content/static/tutorials/color/index.html @@ -13,7 +13,7 @@

    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?
    @@ -40,7 +40,7 @@

    Daniel Shiffman

    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.

    - + @@ -66,7 +66,7 @@

    RGB Color

    - + Example: RGB color 
     background(255);  
@@ -109,7 +109,7 @@ 
    Color Transparency
    
 
 	
 
-	
+	Example: Alpha transparency
 
 
     size(200,200);
diff --git a/content/static/tutorials/data/imgs/data_03_table.png b/content/static/tutorials/data/imgs/data_03_table.png
index d0ff43b2d..961ac434c 100644
Binary files a/content/static/tutorials/data/imgs/data_03_table.png and b/content/static/tutorials/data/imgs/data_03_table.png differ
diff --git a/content/static/tutorials/data/imgs/data_04_excel.jpg b/content/static/tutorials/data/imgs/data_04_excel.jpg
index 1406af987..c004098da 100755
Binary files a/content/static/tutorials/data/imgs/data_04_excel.jpg and b/content/static/tutorials/data/imgs/data_04_excel.jpg differ
diff --git a/content/static/tutorials/data/imgs/data_06_xml.jpg b/content/static/tutorials/data/imgs/data_06_xml.jpg
index 7a1a18035..10cadd588 100755
Binary files a/content/static/tutorials/data/imgs/data_06_xml.jpg and b/content/static/tutorials/data/imgs/data_06_xml.jpg differ
diff --git a/content/static/tutorials/data/imgs/data_07_weatherxml.jpg b/content/static/tutorials/data/imgs/data_07_weatherxml.jpg
index bc65c1042..e0de2e503 100755
Binary files a/content/static/tutorials/data/imgs/data_07_weatherxml.jpg and b/content/static/tutorials/data/imgs/data_07_weatherxml.jpg differ
diff --git a/content/static/tutorials/data/imgs/fig_18_01_user_input.png b/content/static/tutorials/data/imgs/fig_18_01_user_input.png
new file mode 100755
index 000000000..e4b8f4797
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_01_user_input.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_02_filetxt.png b/content/static/tutorials/data/imgs/fig_18_02_filetxt.png
new file mode 100755
index 000000000..2e82a2f1d
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_02_filetxt.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_03_datatxt.png b/content/static/tutorials/data/imgs/fig_18_03_datatxt.png
new file mode 100755
index 000000000..33a877bcb
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_03_datatxt.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_04_bargraph.png b/content/static/tutorials/data/imgs/fig_18_04_bargraph.png
new file mode 100755
index 000000000..ef797f982
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_04_bargraph.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_05_datacsv.png b/content/static/tutorials/data/imgs/fig_18_05_datacsv.png
new file mode 100755
index 000000000..6c75a3c9c
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_05_datacsv.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_06_datacsv_grid.png b/content/static/tutorials/data/imgs/fig_18_06_datacsv_grid.png
new file mode 100755
index 000000000..77de335e7
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_06_datacsv_grid.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_07_tablebubbles.png b/content/static/tutorials/data/imgs/fig_18_07_tablebubbles.png
new file mode 100755
index 000000000..64a8e5f79
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_07_tablebubbles.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_08_rollover.png b/content/static/tutorials/data/imgs/fig_18_08_rollover.png
new file mode 100644
index 000000000..7b823a954
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_08_rollover.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_09_shaunsheep.png b/content/static/tutorials/data/imgs/fig_18_09_shaunsheep.png
new file mode 100755
index 000000000..8d5398cf2
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_09_shaunsheep.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_10_shaunsheep_sourc.png b/content/static/tutorials/data/imgs/fig_18_10_shaunsheep_sourc.png
new file mode 100755
index 000000000..b4456ba92
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_10_shaunsheep_sourc.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_11_parsing_imdb.png b/content/static/tutorials/data/imgs/fig_18_11_parsing_imdb.png
new file mode 100755
index 000000000..61acef65d
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_11_parsing_imdb.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_12_traditional_arra.png b/content/static/tutorials/data/imgs/fig_18_12_traditional_arra.png
new file mode 100644
index 000000000..402f9e213
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_12_traditional_arra.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_13_associative_arra.png b/content/static/tutorials/data/imgs/fig_18_13_associative_arra.png
new file mode 100644
index 000000000..82fe0b68f
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_13_associative_arra.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_14_concordance_viz.png b/content/static/tutorials/data/imgs/fig_18_14_concordance_viz.png
new file mode 100755
index 000000000..f60db5375
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_14_concordance_viz.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_15_xml_tree.png b/content/static/tutorials/data/imgs/fig_18_15_xml_tree.png
new file mode 100755
index 000000000..8535f1b6e
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_15_xml_tree.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_16_rss.png b/content/static/tutorials/data/imgs/fig_18_16_rss.png
new file mode 100755
index 000000000..1bdb2d482
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_16_rss.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_17_weather.png b/content/static/tutorials/data/imgs/fig_18_17_weather.png
new file mode 100755
index 000000000..f379ab30f
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_17_weather.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_18_xmlbubbles.png b/content/static/tutorials/data/imgs/fig_18_18_xmlbubbles.png
new file mode 100755
index 000000000..b58ced2a2
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_18_xmlbubbles.png differ
diff --git a/content/static/tutorials/data/imgs/fig_18_19_thread.png b/content/static/tutorials/data/imgs/fig_18_19_thread.png
new file mode 100755
index 000000000..f79c43d28
Binary files /dev/null and b/content/static/tutorials/data/imgs/fig_18_19_thread.png differ
diff --git a/content/static/tutorials/data/index-old.html b/content/static/tutorials/data/index-old.html
new file mode 100644
index 000000000..6221a4a80
--- /dev/null
+++ b/content/static/tutorials/data/index-old.html
@@ -0,0 +1,527 @@
+
+    
+    
+	
+  
    
+
+  
    
+      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:
    
+
+
      
+
    1. The root  of the tree is RSS.
      2. 
+
    2. RSS has a child  named channel.
      3. 
+
    3. Channel has a child named item.
      4. 
+
    4. Item has a child named yweather:condition.
      5. 
+
    5. The temperature is stored in yweather:condition as the attribute temp.
      6. 
+
    
+
+
    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.
    
+
+
+
    
+
diff --git a/content/static/tutorials/data/index.html b/content/static/tutorials/data/index.html
index 0df744e1b..ebafcce92 100644
--- a/content/static/tutorials/data/index.html
+++ b/content/static/tutorials/data/index.html
@@ -3,7 +3,7 @@
     
 
   
    
-      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.
+      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.
     
    
 
     
    Data
    
@@ -17,281 +17,771 @@ 
    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.
-    
    
-
-    
    
-      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.
-    
    
-
+		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.
+		

    
+		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 the first occurrence of the search string inside of the String object 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.
-    
    
-
+		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 a for 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
    
+
    Dealing with Data
    
 
-
    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.
    
-
-
+	
    
+		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
    
 
-
    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.
    
+	
    
+		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
+
+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, 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
+
+float d = row.getFloat("diameter"); // d has the value 61.14072
 
-// Writes the strings to a file, each on a separate line
-saveStrings("nouns.txt", list);
+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++) {
 
-
    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.
    
+  // 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");
+
+  // 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().
    
+
    +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.
    
+
    +//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.
    
 
    -PrintWriter output;
+// 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:
    
 
    -Table table = loadTable("data.csv","header");
+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:
+
+	
      
+		
    1. 
+			
      Find the end of the substring “apples:” Call it start.
      
+		
      2. 
+		
    2. 
+			
      Find the first period after “apples:” Call it end.
      
+		
      3. 
+		
    3. 
+			
      Make a substring of the characters between start and end.
      
+		
      4. 
+		
    4. 
+			
      Convert the string to a number (if I want to use it as such).
      
+		
      5. 
+
    
+
+	
    
+		In code, this looks like:
    
+
    +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();
 
-
    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.
    
- 
+  // Find the index of the end tag
+  int endIndex = s.indexOf(endTag, startIndex);
+  
+  // If I don't find the end tag,
+  if (endIndex == -1) {
+    return "";
+  }
+  // Return the text in between
+  return s.substring(startIndex, endIndex);
+}
+
    
+		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
+	
    
+
+	
+
+	
    
+		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(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"
+<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, " ");
 
-
    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.
      
+// Searching for running time
+String start = "