diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000000..ebd18f91fd
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,29 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+ push:
+ branches: [ main ]
+ pull_request:
+ branches: [ main ]
+
+jobs:
+ test:
+
+ runs-on: ubuntu-latest
+
+ strategy:
+ matrix:
+ node-version: [14.x]
+ # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+ steps:
+ - uses: actions/checkout@v2
+ - name: Use Node.js ${{ matrix.node-version }}
+ uses: actions/setup-node@v1
+ with:
+ node-version: ${{ matrix.node-version }}
+ - run: npm ci
+ - run: npm test
diff --git a/.github/workflows/update-documentation.yml b/.github/workflows/update-documentation.yml
new file mode 100644
index 0000000000..23be42e374
--- /dev/null
+++ b/.github/workflows/update-documentation.yml
@@ -0,0 +1,37 @@
+name: Update p5.js documentation
+
+on:
+ # This workflow is triggered by the p5.js repo on every new release.
+ repository_dispatch
+env:
+ # These are the tag name and the commit sha of the p5.js release.
+ P5JS_REF: ${{github.event.client_payload.ref}}
+ P5JS_SHA: ${{github.event.client_payload.sha}}
+
+jobs:
+ build:
+ name: Update p5.js documentation
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v1
+ - name: Install Node.JS 12.x
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12.x
+ - name: Extract documentation from the p5.js repo
+ run: |
+ npm install
+ npm run grunt update-enJSON
+ - name: Get p5.js release info
+ id: p5js
+ run: |
+ echo ::set-output name=VERSION::${P5JS_REF/refs\/tags\//}
+ echo ::set-output name=SHA::${P5JS_SHA}
+ - name: Commit changes
+ uses: EndBug/add-and-commit@v4
+ with:
+ message: 'Update Reference files for p5.js ${{ steps.p5js.outputs.VERSION }} release (${{ steps.p5js.outputs.SHA }})'
+ env:
+ GITHUB_TOKEN: ${{ secrets.DOCS_COMMIT_TOKEN }}
diff --git a/.github/workflows/update-translation-files.yml b/.github/workflows/update-translation-files.yml
new file mode 100644
index 0000000000..f01ef3967f
--- /dev/null
+++ b/.github/workflows/update-translation-files.yml
@@ -0,0 +1,34 @@
+name: Update i18n files
+
+on:
+ push:
+ paths:
+ - 'src/data/reference/*.json'
+ - 'src/data/*.yml'
+
+jobs:
+ build:
+ name: Update i18n files
+ runs-on: ubuntu-latest
+
+ steps:
+ - name: Clone repository
+ uses: actions/checkout@v1
+ - name: Install Node.JS 12.x
+ uses: actions/setup-node@v1
+ with:
+ node-version: 12.x
+ - name: npm install
+ run: npm install
+ - name: Update json files
+ run: |
+ npm run grunt update-json-i18n-files
+ - name: Update yaml files
+ run: |
+ npm run grunt update-yaml-i18n-files
+ - name: Commit changes
+ uses: EndBug/add-and-commit@v4
+ with:
+ message: 'Automatic update of translation files (${{ github.sha }})'
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
\ No newline at end of file
diff --git a/Gruntfile.js b/Gruntfile.js
index 304a0029bd..f715c31d72 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -8,7 +8,12 @@
const yaml = require('js-yaml');
const fs = require('fs').promises;
+const fse = require('fs-extra');
+const git = require('simple-git');
const pkg = require('./package.json');
+const update_i18n = require('./updatei18nFiles.js');
+const mozjpeg = require('imagemin-mozjpeg');
+const pngquant = require('imagemin-pngquant');
module.exports = function(grunt) {
require('time-grunt')(grunt);
@@ -148,7 +153,8 @@ module.exports = function(grunt) {
imagemin: {
images: {
options: {
- optimizationLevel: 2
+ optimizationLevel: 2,
+ use: [mozjpeg({quality: 70}), pngquant()] //plugins for jpeg & png image compression
},
files: [{
expand: true,
@@ -167,8 +173,8 @@ module.exports = function(grunt) {
dist: {
src: [
'<%= config.src %>/assets/css/normalize.css',
- '<%= config.src %>/assets/css/main.css',
- '<%= config.src %>/assets/css/prism.css'
+ '<%= config.src %>/assets/css/prism.css',
+ '<%= config.src %>/assets/css/main.css'
],
dest: '<%= config.dist %>/assets/css/all.css'
}
@@ -347,10 +353,21 @@ module.exports = function(grunt) {
ignore: [
/^This document appears to be written in English/,
/^Bad value “https:/,
- /^Consider adding a “lang” attribute to the “html”/
+ /^Consider adding a “lang” attribute to the “html”/,
+ /^Attribute “paypalexpress” not allowed on element “script” at this point./
]
}
}
+ },
+ shell: {
+ generate_dataJSON: {
+ command: 'npm ci && npm run grunt yui',
+ options: {
+ execOptions: {
+ cwd: 'tmp/p5.js'
+ }
+ }
+ }
}
});
@@ -371,6 +388,32 @@ module.exports = function(grunt) {
});
});
+ // runs the updateJSON() function from update18nFiles.js
+ // is run by the update-translation-files workflow every time one of them is modified
+ grunt.registerTask('update-json-i18n-files', function() {
+ const JSONfiles_URL = 'src/data/reference/';
+ const lang = pkg.languages.filter(v => v !== 'en');
+ lang.forEach(langCode => {
+ update_i18n.updateJSON(
+ JSONfiles_URL + 'en.json',
+ JSONfiles_URL + langCode + '.json'
+ );
+ });
+ });
+
+ // runs the updateYAML() function from update18nFiles.js
+ // is run by the update-translation-files workflow every time one of them is modified
+ grunt.registerTask('update-yaml-i18n-files', function() {
+ const YAMLfiles_URL = 'src/data/';
+ const lang = pkg.languages.filter(v => v !== 'en');
+ lang.forEach(langCode => {
+ update_i18n.updateYAML(
+ YAMLfiles_URL + 'en.yml',
+ YAMLfiles_URL + langCode + '.yml'
+ );
+ });
+ });
+
grunt.loadNpmTasks('grunt-exec');
grunt.loadNpmTasks('grunt-assemble');
grunt.loadNpmTasks('grunt-file-append');
@@ -378,6 +421,47 @@ module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-html');
+ grunt.registerTask('make_tmp_dir', function() {
+ const tmp_path = 'tmp/p5.js';
+ fse.mkdirpSync(tmp_path);
+ });
+
+ grunt.registerTask('clone_p5js_repo', async function() {
+ const done = this.async();
+ try {
+ await git().clone('https://github.com/processing/p5.js', 'tmp/p5.js');
+ done();
+ } catch (err) {
+ console.log('Failed to clone p5.js repository.');
+ throw new Error(err);
+ }
+ });
+
+ grunt.registerTask('generate_dataJSON', ['shell:generate_dataJSON']);
+
+ grunt.registerTask('move_dataJSON', function() {
+ const dataJSON_p5js = 'tmp/p5.js/docs/reference/data.json';
+ const dataJSON_p5jswebsite = 'src/templates/pages/reference/data.json';
+ // move the data.json from the cloned p5.js repository to the p5.js-website repository
+ fse.moveSync(dataJSON_p5js, dataJSON_p5jswebsite, { overwrite: true });
+ // delete the tmp folder that contained the p5.js repository
+ fse.removeSync('tmp/');
+ });
+
+ grunt.registerTask('generate_enJSON', function() {
+ const getenJSON = require('./getenJSON.js');
+ // generate and save the en.json
+ getenJSON();
+ });
+
+ grunt.registerTask('update-enJSON', [
+ 'make_tmp_dir',
+ 'clone_p5js_repo',
+ 'generate_dataJSON',
+ 'move_dataJSON',
+ 'generate_enJSON'
+ ]);
+
// multi-tasks: collections of other tasks
grunt.registerTask('server', [
'build',
@@ -421,4 +505,4 @@ module.exports = function(grunt) {
// runs with just grunt command
grunt.registerTask('default', ['build']);
-};
\ No newline at end of file
+};
diff --git a/README.md b/README.md
index bb0f1e330e..ba1ea3301d 100644
--- a/README.md
+++ b/README.md
@@ -4,7 +4,7 @@
## How To Contribute
-Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md) against the p5.js master branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
+Known bugs and intended new features are tracked using [GitHub issues](https://github.com/processing/p5.js-website/issues). If you'd like to start working on an existing issue, comment on the issue that you plan to work on it so other contributors know it's being handled and can offer help. Once you have completed your work on this issue, [submit a pull request (PR)](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md) against the p5.js main branch. In the description field of the PR, include "resolves #XXXX" tagging the issue you are fixing. If the PR addresses the issue but doesn't completely resolve it (ie the issue should remain open after your PR is merged), write "addresses #XXXX".
If you discover a bug or have an idea for a new feature you'd like to add, begin by submitting an issue. Please do not simply submit a pull request containing the fix or new feature without making an issue first, we will probably not be able to accept it. Once you have gotten some feedback on the issue and a go ahead to address it, you can follow the process above to add the fix or feature.
@@ -24,14 +24,14 @@ Once you've setup the site, type `npm run watch` to run the website. This should
## File structure
-* __See note about what to include in pull requests [here](https://github.com/processing/p5.js-website/wiki/Pull-requests).__
+* __See note about what to include in pull requests [here](https://github.com/processing/p5.js/blob/main/contributor_docs/preparing_a_pull_request.md).__
* `src/` – All the pieces for generating the built site. __Edits should be made here.__
* `assets/` – All static files (imgs, css, fonts, js, p5_featured homepage sketches)
* Note: if you make edits here you must restart the server to see your changes. To see changes immediately, you can edit the assets files in the dist directory, but need to copy and paste your updated work here for it to be saved.
* `data/` – translation files
* `templates/`
* `layouts/` – default.hbs is main page template
- * `pages/` – Contains each of the pages of the p5 site, these get inserted in `{{> body }}` tag of default layout.
+ * `pages/` – Contains each of the pages of the p5 site, these get inserted in `{{> body }}` tag of default layout. Note that for some pages (ex: learn, teach, and libraries) the hbs files are built from ejs files in the `data/` folder. When this is the case, you will find a README file inside that page's folder with notes about how this works.
* `partials/` – These are reusable pieces that can get added to any page or layout, they correspond to other `{{> filename }}` tags in the pages or default layout.
* `dist/` – Where the rendered files are stored, this gets generated via `grunt server` but does not get added to pull requests as it is auto-built online.
* `Gruntfile.js` – This file contains all the tasks for using assemble and YAML to generate the final, static site. It uses the taskrunner [grunt](http://gruntjs.com/).
diff --git a/contributor_docs/automated_reference_update.md b/contributor_docs/automated_reference_update.md
new file mode 100644
index 0000000000..41191cabc8
--- /dev/null
+++ b/contributor_docs/automated_reference_update.md
@@ -0,0 +1,21 @@
+## Automated Reference update
+
+The p5.js documentation needs to be updated every time a new p5.js release gets published.
+This process is done by the `update-enJSON` [grunt task](https://github.com/processing/p5.js-website/blob/main/Gruntfile.js).
+The task:
+- clones the p5.js repository in a tmp folder
+- generates the updated data.json file with the command `npm run grunt yui`
+- commits the data.json in the p5.js-website repository
+- generates the updated en.json with the getenJSON() function
+- commits the en.json in the p5.js-website repository
+- deletes the tmp folder
+
+This task is run by a GitHub workflow in the p5.js-website repository that [gets triggered by another workflow](https://docs.github.com/en/actions/reference/events-that-trigger-workflows#repository_dispatch) in the p5.js repository.
+
+Every time a new p5.js release gets published, the update-p5jswebsite workflow (in the p5.js repository) gets triggered and in turn triggers the update-documentation workflow (in the p5.js-website repository) that runs the `update-enJSON` task.
+
+When the update-documentation workflow commits the updated Reference files, the commit message will show both the p5.js release tag and the commit's sha.
+
+### Notes:
+- For the repository_dispatch event of the update-p5jswebsite workflow, [this GitHub action](https://github.com/peter-evans/repository-dispatch) was used.
+- In order for the update-p5jswebsite workflow to trigger the update-documentation workflow, **it requires a repo scoped Personal Access Token created on a user with write access to the p5.js-website repository**. The Personal Access Token needs to be stored as secret in the p5.js repository.
diff --git a/i18n-tracking.yml b/i18n-tracking.yml
index 0c43cd01fc..46d2c99dca 100644
--- a/i18n-tracking.yml
+++ b/i18n-tracking.yml
@@ -1,275 +1,296 @@
es:
src/data/en.yml:
- line 927: ' teach-case2-content5-1'
- line 928: ' teach-case2-content5-2'
- line 929: ' teach-case2-content5-3'
- line 930: ' teach-case2-content5-4'
- line 931: ' teach-case2-content5-5'
- line 932: ''
- line 933: ' teach-case3-title'
- line 934: ' teach-case3-lead-name'
- line 935: ' teach-case3-speech'
- line 936: ' teach-case3-content1'
- line 937: ' teach-case3-content1-1'
- line 917: ' teach-case1-content1-1'
- line 938: ' teach-case3-content2'
- line 939: ' teach-case3-content3'
- line 940: ' teach-case3-content4'
- line 941: ' teach-case3-content5'
- line 942: ' teach-case3-content5-1'
- line 943: ' teach-case3-content5-2'
- line 944: ' teach-case3-content5-3'
- line 945: ''
- line 946: ' teach-case4-title'
- line 947: ' teach-case4-lead-name'
- line 948: ' teach-case4-speech'
- line 949: ' teach-case4-content1'
- line 950: ' teach-case4-content1-1'
- line 951: ' teach-case4-content2'
- line 952: ' teach-case4-content3'
- line 953: ' teach-case4-content4'
- line 954: ' teach-case4-content5'
- line 955: ' teach-case4-content5-1'
- line 956: ' teach-case4-content5-2'
- line 957: ' teach-case4-content5-3'
- line 958: ' teach-case4-content5-4'
- line 959: ' '
- line 960: ' teach-case5-title'
- line 961: ' teach-case5-lead-name'
- line 962: ' teach-case5-speech'
- line 963: ' teach-case5-content1'
- line 964: ' teach-case5-content1-1'
- line 965: ' teach-case5-content1-2'
- line 966: ' teach-case5-content1-3'
- line 967: ' teach-case5-content2'
- line 968: ' teach-case5-content3'
- line 969: ' teach-case5-content4'
- line 970: ' teach-case5-content5'
- line 971: ' teach-case5-content5-1'
- line 972: ' teach-case5-content5-2'
- line 973: ' teach-case5-content5-3'
- line 974: ' '
- line 975: ' teach-case6-title'
- line 976: ' teach-case6-lead-name'
- line 977: ' teach-case6-speech'
- line 978: ' teach-case6-content1'
- line 979: ' teach-case6-content1-1'
- line 980: ' teach-case6-content2'
- line 981: ' teach-case6-content3'
- line 982: ' teach-case6-content4'
- line 983: ' teach-case6-content5'
- line 984: ' teach-case6-content5-1'
- line 985: ' teach-case6-content5-2'
- line 986: ' teach-case6-content5-3'
- line 987: ' teach-case6-content5-4'
- line 988: ' teach-case6-content5-5'
- line 989: ''
- line 990: ' teach-case7-title'
- line 991: ' teach-case7-lead-name'
- line 992: ' teach-case7-speech'
- line 993: ' teach-case7-content1'
- line 994: ' teach-case7-content1-1'
- line 995: ' teach-case7-content2'
- line 996: ' teach-case7-content3'
- line 997: ' teach-case7-content4'
- line 998: ' teach-case7-content5'
- line 999: ' teach-case7-content5-1'
- line 1000: ' '
- line 1001: ' teach-case8-title'
- line 1002: ' teach-case8-lead-name'
- line 1003: ' teach-case8-content1'
- line 1004: ' teach-case8-content1-1'
- line 1005: ' teach-case8-content2'
- line 1006: ' teach-case8-content3'
- line 1007: ' teach-case8-content4'
- line 1008: ' teach-case8-content5'
- line 1009: ' teach-case8-content5-1'
- line 1010: ' teach-case8-content5-2'
- line 1011: ' '
- line 1012: ' teach-case9-title'
- line 1013: ' teach-case9-lead-name'
- line 1014: ' teach-case9-content1'
- line 1015: ' teach-case9-content1-1'
- line 1016: ' teach-case9-content2'
- line 1017: ' teach-case9-content3'
- line 1018: ' teach-case9-content4'
- line 1019: ' teach-case9-content5'
- line 1020: ' teach-case9-content5-1'
- line 1021: ' teach-case9-content5-2'
- line 1022: ' teach-case9-content5-3'
- line 1023: ''
- line 1024: ' teach-case10-title'
- line 1025: ' teach-case10-lead-name'
- line 1026: ' teach-case10-content1'
- line 1027: ' teach-case10-content3'
- line 1028: ' teach-case10-content4'
- line 1029: ' teach-case10-content5'
- line 1030: ' teach-case10-content5-1'
- line 1031: ' teach-case10-content5-2'
- line 1032: ' '
- line 1033: ' teach-case11-title'
- line 1034: ' teach-case11-lead-name'
- line 1035: ' teach-case11-content1'
- line 1036: ' teach-case11-content1-1'
- line 1037: ' teach-case11-content2'
- line 1038: ' teach-case11-content3'
- line 1039: ' teach-case11-content4'
- line 1040: ' teach-case11-content5'
- line 1041: ' teach-case11-content5-1'
- line 1042: ' teach-case11-content5-2'
- line 1043: ' teach-case11-content5-3'
- line 1044: ' teach-case11-content5-4'
- line 1045: ' teach-case11-content5-5'
- line 1046: ''
- line 1047: ' teach-case12-title'
- line 1048: ' teach-case12-lead-name'
- line 1049: ' teach-case12-speech'
- line 1050: ' teach-case12-content1'
- line 1051: ' teach-case12-content1-1'
- line 1052: ' teach-case12-content2'
- line 1053: ' teach-case12-content3'
- line 1054: ' teach-case12-content4'
- line 1055: ' teach-case12-content5'
- line 1056: ' teach-case12-content5-1'
- line 1057: ' teach-case12-content5-2'
- line 271: ' teach-filter1-label8'
- line 272: ' teach-filter1-label9'
- line 273: ' teach-filter1-label10'
- line 282: ' teach-filter2-label1'
- line 283: ' teach-filter2-label2'
- line 284: ' teach-filter2-label3'
- line 285: ' teach-filter2-label4'
- line 286: ' teach-filter2-label5'
- line 287: ' teach-filter2-label6'
- line 288: ' teach-filter2-label7'
- line 289: ''
- line 290: ' teach-filter3'
- line 291: ''
- line 292: ' teach-filter4'
- line 293: ' teach-filter4-label1'
- line 294: ' teach-filter4-label2'
- line 295: ' teach-filter4-label3'
- line 296: ''
- line 297: ' teach-case-subtitle1'
- line 298: ' teach-case-subtitle2'
- line 299: ' teach-case-subtitle3'
- line 300: ' teach-case-subtitle4'
- line 301: ' teach-case-subtitle5'
- line 302: ''
- line 303: ' teach-case1-content1'
- line 304: ' teach-case1-content2'
- line 305: ' teach-case1-content3'
- line 306: ' teach-case1-content4'
- line 307: ' teach-case1-content5'
- line 240: ' teach-desc'
- line 258: ' teach-intro2'
- line 269: ' teach-filter1-label6'
- line 281: ' teach-filter2'
- line 259: ' teach-intro3'
- line 274: ' teach-filter1-label11'
- line 55: ' sketch_info'
- line 54: ' sketch_credits'
- line 243: ' learn-title'
- line 256: teach
- line 37: ' blmstatement1'
- line 62: ' project-a-5-2-moon'
- line 45: ' '
+ line 1517: ' teach-case1-title'
+ line 1527: ' teach-case2-content5-1'
+ line 1528: ' teach-case2-content5-2'
+ line 1537: ' teach-case4-title'
+ line 1545: ' teach-case13-title'
+ line 1546: ' teach-case13-lead-name'
+ line 1547: ' teach-case13-speech'
+ line 1548: ' I''m working on a new series of coding class for Disabled students in South'
+ line 1549: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 1550: ' workshops in December 2020. The project is supported by the Open Society'
+ line 1551: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 1552: ' Center.'
+ line 1553: ' teach-case13-content1'
+ line 1554: ' teach-case13-content1-1'
+ line 1555: ' teach-case13-content2'
+ line 1556: ' teach-case13-content3'
+ line 1557: ' teach-case13-content4'
+ line 1558: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
+ line 1559: ' teach-case13-content5'
+ line 1560: ' Website, p5.js editor.'
+ line 1561: ' teach-case13-content5-1'
+ line 1562: ''
+ line 1563: ' teach-case14-title'
+ line 1564: ' teach-case14-lead-name'
+ line 1565: ' teach-case14-speech'
+ line 1566: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
+ line 1567: ' teach-case14-content1'
+ line 1568: ' teach-case14-content1-1'
+ line 1569: ' teach-case14-content1-2'
+ line 1570: ' teach-case14-content2'
+ line 1571: ' teach-case14-content3'
+ line 1572: ' teach-case14-content4'
+ line 1573: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
+ line 1574: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
+ line 1575: ' teach-case14-content5'
+ line 1576: ' p5.js, p5 web editor, ml5.js, and installations. '
+ line 1577: ' teach-case14-content5-1'
+ line 1578: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
+ line 1579: ' teach-case14-content5-2'
+ line 1580: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
+ line 1581: ' teach-case14-content5-3'
+ line 1582: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
+ line 1583: ' teach-case14-content5-4'
+ line 1584: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
+ line 1585: ' teach-case14-content5-5'
+ line 1586: ' teach-case15-title'
+ line 1587: ' teach-case15-lead-name'
+ line 1588: ' teach-case15-content1'
+ line 1589: ' L''École de Design Nantes Atlantique, France'
+ line 1590: ' teach-case15-content1-1'
+ line 1591: ' teach-case15-content2'
+ line 1592: ' Students from l''école de design Nantes Atlantique'''
+ line 1593: ' teach-case15-content3'
+ line 1594: ' teach-case15-content4'
+ line 1595: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ line 1596: ' teach-case15-content5'
+ line 1597: ' GitHub Readme File'
+ line 1598: ' teach-case15-content5-1'
+ line 1599: ' teach-case16-title'
+ line 1600: ' 50+ Coding Club '
+ line 1601: ' teach-case16-lead-name'
+ line 1602: ' teach-case16-speech'
+ line 1603: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
+ line 1604: ' teach-case16-content1'
+ line 1605: ' teach-case16-content1-1'
+ line 1606: ' teach-case16-content2'
+ line 1607: ' teach-case16-content2-1'
+ line 1608: ' teach-case16-content2-2'
+ line 1609: ' teach-case16-content3'
+ line 1610: ' teach-case16-content4'
+ line 1611: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
+ line 1612: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
+ line 1613: ' teach-case16-content5'
+ line 1614: ' p5for50+ web app'
+ line 1615: ' teach-case16-content5-1'
+ line 1616: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
+ line 1617: ' teach-case16-content5-2'
+ line 1618: ' teach-case16-content5-3'
+ line 1619: ' teach-case16-content5-4'
+ line 1620: ''
+ line 1621: ' teach-case17-title'
+ line 1622: ' teach-case17-lead-name'
+ line 1623: ' teach-case17-speech'
+ line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
+ line 1625: ' teach-case17-content1'
+ line 1626: ' teach-case17-content1-1'
+ line 1627: ' teach-case17-content2'
+ line 1628: ' teach-case17-content3'
+ line 1629: ' teach-case17-content4'
+ line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
+ line 1631: ' teach-case17-content5'
+ line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
+ line 1633: ' teach-case17-content5-1'
+ line 1123: ' book-6-title'
+ line 1124: ' book-6-authors'
+ line 1125: ' book-6-publisher'
+ line 1126: ' book-6-pages'
+ line 1127: ' book-6-type'
+ line 1128: ' book-6-description'
+ line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
+ line 1130: ' of aesthetic programming, engaging with learning to program as a way to '
+ line 1131: ' understand and question existing technological objects and paradigms, '
+ line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
+ line 1133: ' book-6-order-a'
+ line 1134: ' book-6-order-b'
+ line 162: ' library in your html. To learn more visit '
+ line 163: ' library in your html. To learn more visit '
+ line 164: ' your-first-sketch7'
+ line 97: ' get-started-button'
+ line 96: ' get-started7'
+ line 114: ' environment15'
+ line 113: ' environment14'
+ line 115: ' environment16'
+ line 102: ' download8'
+ line 103: ' download9'
+ line 104: ' download10'
+ line 105: ' download11'
+ line 256: ' , the organization that supports p5.js.'
+ line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
+ line 269: ' Your donation supports software development for p5.js, education resources'
+ line 265: ' and inclusive as possible. You can support this work by making a donation to'
+ line 266: ' the '
+ line 267: ' support-2'
+ line 268: ' , the organization that supports p5.js. We need your help!'
+ line 275: ' support-3'
+ line 276: ' support-4'
+ line 277: ' support-5'
+ line 37: Editor
+ line 55: footer5
+ line 123: ' p3xh2'
+ line 41: Reference
+ line 118: ' p2x3'
+ line 128: ' p3xp5'
+ line 59: tagline4
+ line 136: ' p4xp6'
+ line 243: ' settingUp-title'
+ line 62: tagline7
+ line 45: Books
+ line 34: Language-Settings
+ line 35: Sidebar-Title
+ line 36: Home
+ line 38: Download
+ line 39: Donate
+ line 40: Start
+ line 42: Libraries
+ line 43: Learn
+ line 56: tagline1
+ line 60: tagline5
+ line 61: tagline6
+ line 111: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 112: ' neuro-type, size, disability, class, religion, culture, subculture,'
+ line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.'
+ line 117: ' p2x2'
+ line 119: ' p2x4'
+ line 120: ' p2x5'
+ line 121: ' p2x6'
+ line 122: ' p2x7'
+ line 124: ' p3xp1'
+ line 125: ' p3xp2'
+ line 126: ' p3xp3'
+ line 127: ' p3xp4'
+ line 137: ' sketch_credits'
+ line 138: ' sketch_info'
+ line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
+ line 272: ' that your html and js files are located in. On the left sidebar, you should'
+ line 273: ' find the folder name at the top, with a list of the files contained in the'
+ line 282: ' environment12'
+ line 283: ' environment13'
+ line 284: ' your-first-sketch-title'
+ line 285: ' your-first-sketch-intro1'
+ line 286: ' your-first-sketch-intro2'
+ line 287: ' your-first-sketch-intro3'
+ line 288: ' your-first-sketch-intro4'
+ line 289: ' your-first-sketch1'
+ line 290: ' your-first-sketch2'
+ line 291: ' your-first-sketch3'
+ line 292: ' your-first-sketch4'
+ line 293: ' The line you just added draws an ellipse, with its center 50 pixels over'
+ line 294: ' from the left and 50 pixels down from the top, with a width and height of 80'
+ line 295: ' pixels.'
+ line 296: ' your-first-sketch5'
+ line 297: ' your-first-sketch6'
+ line 298: ' If you are using a screen reader, you must turn on the accessible outputs in'
+ line 299: ' the p5 online editor, outside the editor you must add the accessibility'
+ line 300: ' library in your html. To learn more visit'
+ line 301: ' your-first-sketch7'
+ line 302: ' your-first-sketch8'
+ line 303: ' If you''ve typed everything correctly, this will appear in the display'
+ line 304: ' window'
+ line 305: ' your-first-sketch9'
+ line 306: ' your-first-sketch10'
+ line 307: ' If nothing appears, the editor may be having trouble understanding what'
+ line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
+ line 309: ' exactly'
+ line 310: ' between each of them, the line should end with a semicolon, and ellipse has'
+ line 311: ' to be spelled correctly.'
+ line 312: ' your-first-sketch11'
+ line 313: ' One of the most difficult things about getting started with programming is'
+ line 314: ' that you have to be very specific about the syntax. The browser isn''t always'
+ line 315: ' smart enough to know what you mean, and can be quite fussy about the'
+ line 316: ' placement of punctuation. You''ll get used to it with a little practice. In'
+ line 317: ' the bottom left of the editor you will find the console section. Here, you'
+ line 318: ' can find messages from the editor with details about any errors it'
+ line 319: ' encounters.'
+ line 320: ' your-first-sketch12'
+ line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
+ line 322: ' last example to try this'
+ line 323: ' your-first-sketch13'
+ line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
+ line 325: ' and then starts drawing white circles at the position of the mouse. When a'
+ line 326: ' mouse button is pressed, the circle color changes to black. Run the code,'
+ line 327: ' move the mouse, and click to experience it.'
+ line 328: ' your-first-sketch14'
+ line 329: ' first-sketch-heading1'
+ line 330: ' first-sketch-heading2'
+ line 331: ' first-sketch-heading3'
+ line 332: ' what-next-title'
+ line 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ line 340: ' learn8'
+ line 341: ' learn9'
+ line 342: ' learn10'
+ line 343: ' reference1'
+ line 344: ' reference2'
+ line 345: ' reference3'
+ line 346: ' learn11'
+ line 347: ' learn12'
+ line 348: ' processing-transition1'
+ line 349: ' processing-transition2'
+ line 350: ' processing-transition3'
+ line 351: ' processing-transition4'
+ line 352: ' book1'
+ line 353: ' Parts of this tutorial were adapted from the book, Getting Started with'
+ line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
+ line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
+ line 356: ' Contributors Conference.'
+ line 44: Examples
+ line 57: tagline2
+ line 146: ' copyright-title'
+ line 231: ' get-started-title'
+ line 240: ' . If you would like to work on the the desktop version of p5.js you can'
+ line 258: ' download7'
+ line 281: ' file manager or type'
+ line 54: footer4
+ line 110: ' We are a community of, and in solidarity with, people from every gender'
+ line 239: ' get-started6'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
+ line 875: ' writing-a-tutorial-iframe-4'
+ line 233: ' This page walks you through setting up a p5.js project and making your first'
+ line 234: ' sketch.'
+ line 244: ' download-title'
+ line 245: ' hosted-title'
+ line 50: footerxh1
+ line 98: ' p1x1'
+ line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making'
+ line 100: ' coding accessible and inclusive for artists, designers, educators,'
+ line 109: ' p2x1'
+ line 129: ' p3xp6'
+ line 148: ' The p5.js library is free software; you can redistribute it and/or modify it'
+ line 46: Community
+ line 133: ' p4xp3'
+ line 134: ' p4xp4'
+ line 141: ' project-a-2-5-phuong'
+ line 144: ' project-a-2-7-phuong'
+ line 64: ' color-p3x3'
+ line 70: ' color-rgb-p1x1'
+ line 87: ' color-custom-ranges-p2x1'
+ line 24: footer1
+ line 25: footer2
+ line 26: footer3
+ line 27: footer4
+ line 77: ' color-rgb-p2x1'
+ line 82: ' color-transparency-p2x1'
+ line 139: ' project-a-2-7-phuong'
+ line 76: ' color-transparency-p1x1'
line 31: tagline7
- line 34: ' blmnamelistending'
- line 35: ' blmstatement1'
- line 36: ' blmstatement2'
- line 38: ' blacklivesmatter'
- line 39: ' naacp'
- line 40: ' equaljustice'
- line 41: ' bailfund'
- line 42: ' floydmemorial'
- line 43: ''
- line 56: ' get-started4'
- line 60: ' get-started7'
- line 61: ' settingUp-title'
line 63: ' hosted-title'
line 75: ' download9'
- line 111: ' your-first-sketch-intro2'
- line 112: ' your-first-sketch-intro3'
- line 113: ' your-first-sketch-intro4'
- line 114: ' your-first-sketch1'
- line 115: ' your-first-sketch2'
- line 116: ' your-first-sketch3'
- line 117: ' your-first-sketch4'
- line 118: ' your-first-sketch5'
- line 119: ' your-first-sketch6'
- line 120: ' your-first-sketch7'
- line 121: ' your-first-sketch8'
- line 122: ' your-first-sketch9'
- line 123: ' your-first-sketch10'
- line 124: ' your-first-sketch11'
- line 125: ' your-first-sketch12'
- line 126: ' your-first-sketch13'
- line 127: ' your-first-sketch14'
- line 137: ' learn2'
- line 138: ' learn3'
- line 139: ' learn4'
line 140: ' learn5'
- line 141: ' learn6'
line 142: ' learn7'
line 143: ' learn8'
- line 144: ' learn9'
line 145: ' learn10'
- line 158: ' learn12'
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
- line 162: ' processing-transition4'
- line 163: ' book1'
- line 308: ' project-a-6-roni-cantor'
- line 309: ''
- line 310: ' project-resources'
- line 311: ' creator-from-qianqian'
- line 312: ' interview-link-qianqian'
- line 313: ' project-a-1-1-qianqian'
- line 314: ' project-a-1-2-qianqian'
- line 315: ' project-a-2-1-qianqian'
- line 316: ' project-a-2-2-qianqian'
- line 317: ' project-a-2-3-qianqian'
- line 318: ' project-a-2-4-qianqian'
- line 319: ' project-a-3-1-qianqian'
- line 320: ' project-a-3-2-qianqian'
- line 321: ' project-a-4-1-qianqian'
- line 322: ' project-a-4-2-qianqian'
- line 323: ' project-a-4-3-qianqian'
- line 324: ' project-a-5-1-qianqian'
- line 325: ' project-a-5-2-qianqian'
- line 326: ''
- line 327: ' creator-from-phuong'
- line 328: ' project-a-1-1-phuong'
- line 329: ' link-1-phuong'
- line 330: ' link-2-phuong'
- line 331: ' link-3-phuong'
- line 332: ' project-a-1-2-phuong'
- line 333: ' project-a-1-3-phuong'
- line 334: ' project-a-1-4-phuong'
- line 335: ' project-a-2-1-phuong'
- line 336: ' project-a-2-2-phuong'
- line 337: ' project-a-2-3-phuong'
- line 338: ' project-a-2-4-phuong'
- line 339: ' p5-sketch-by-chjno-phuong'
- line 340: ' project-a-2-5-phuong'
- line 341: ' project-a-2-6-phuong'
- line 342: ' project-a-2-7-phuong'
- line 343: ' project-a-3-1-phuong'
- line 344: ' project-a-3-2-phuong'
- line 345: ' project-a-3-3-phuong'
- line 346: ' project-a-3-4-phuong'
- line 347: ' project-a-4-1-phuong'
- line 348: ' project-a-5-1-phuong'
- line 349: ' school-of-machines-phuong'
- line 350: ' project-a-5-2-phuong'
- line 351: ''
- line 352: ' pronouns-male'
- line 353: ' creator-from-chung'
- line 354: ' link-1-casey-louise'
- line 355: ' link-2-casey-louise'
- line 356: ' link-1-chung'
line 357: ' link-2-chung'
line 358: ' link-3-chung'
line 359: ' project-a-1-1-chung'
@@ -333,16 +354,8 @@ es:
line 417: ' project-a-4-1-moon'
line 418: ' project-a-5-1-moon'
line 419: ' project-a-5-2-moon'
- line 44: ''
- line 57: ' get-started4'
- line 64: ' hosted-title'
- line 70: ' download5'
- line 76: ' download9'
line 79: ' environment1'
line 88: ' environment8'
- line 128: ' your-first-sketch14'
- line 146: ' learn10'
- line 164: ' book1'
line 173: ' complete-library-intro1'
line 182: ' learn3'
line 191: ' writing-a-tutorial-embedding-7'
@@ -350,15 +363,9 @@ es:
line 204: ' writing-a-tutorial-iframe-7'
line 213: ' color-description1'
line 222: ' coordinate-system-description3'
- line 231: ' coordinate-system-simple-shapes-p1x1'
- line 249: ' Rotating knobs'
- line 59: ' get-started6'
line 69: ' download5'
line 74: ' download8'
line 78: ' environment1'
- line 87: ' environment8'
- line 110: ' your-first-sketch-intro1'
- line 136: ' learn1'
line 157: ' learn11'
line 172: ' complete-library-intro1'
line 181: ' learn3'
@@ -368,330 +375,1757 @@ es:
line 212: ' color-description1'
line 221: ' coordinate-system-description3'
line 230: ' coordinate-system-simple-shapes-p1x1'
- line 239: ' p5.bots'
- line 248: ' Rotating knobs'
- line 875: ' project-a-5-2-moon'
- line 254: ' project-a-5-2-moon'
- line 255: ''
- line 500: ' teach-title2'
- line 501: ' teach-intro1'
- line 502: ' teach-intro2'
- line 503: ' teach-intro3'
- line 504: ' teach-intro4'
- line 505: ' teach-slider-title1'
- line 506: ' teach-slider-title2'
- line 507: ' teach-slider-title3'
- line 508: ' teach-results'
- line 878: ' teach-title2'
- line 879: ' teach-intro1'
- line 880: ' teach-intro2'
- line 881: ' teach-intro3'
- line 882: ' teach-intro4'
- line 883: ' teach-slider-title1'
- line 884: ' teach-slider-title2'
- line 885: ' teach-slider-title3'
- line 886: ' teach-results'
line 66: ' sketch_credits'
line 67: ' sketch_info'
- line 232: ' learn-title'
- line 257: ' teach-intro1'
- line 260: ' teach-intro4'
- line 261: ' teach-heading'
- line 262: ' teach-search-filter'
- line 263: ' teach-filter1'
- line 264: ' teach-filter1-label1'
- line 265: ' teach-filter1-label2'
- line 266: ' teach-filter1-label3'
- line 267: ' teach-filter1-label4'
- line 268: ' teach-filter1-label5'
- line 270: ' teach-filter1-label7'
- line 275: ' teach-filter1-label12'
- line 276: ' teach-filter1-label13'
- line 277: ' teach-filter1-label14'
- line 278: ' teach-filter1-label15'
- line 279: ' teach-filter1-label16'
- line 280: ' '
- line 919: ' teach-case1-title'
- line 920: ' teach-case1-lead-name'
- line 921: ' teach-case1-content1'
- line 922: ' teach-case1-content1-1'
- line 923: ' teach-case1-content2'
- line 924: ' teach-case1-content3'
- line 925: ' teach-case1-content4'
- line 926: ' teach-case1-content5'
+ line 22: footer1
+ line 23: footer2
+ line 32: ' download-intro'
+ line 65: ' color-rgb-p1x1'
+ line 72: ' color-rgb-p2x1'
+ line 85: ' color-custom-ranges-p4x1'
+ line 28: footer5
+ line 81: ' color-transparency-p1x1'
+ line 90: ' color-custom-ranges-p4x1'
+ line 153: ' project-a-4-7-casey-louise'
+ line 33: Skip-To-Content
+ line 47: Contribute
+ line 48: Forum
+ line 49: Showcase
+ line 51: footer1
+ line 52: footer2
+ line 53: footer3
+ line 58: tagline3
+ line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe'
+ line 106: ' think of your whole browser page as your sketch, including HTML5 objects for'
+ line 107: ' text, input, video, webcam, and sound.'
+ line 108: ' p2xh2'
+ line 130: ' p4xh2'
+ line 131: ' p4xp1'
+ line 132: ' p4xp2'
+ line 135: ' p4xp5'
+ line 147: ' copyright1'
+ line 149: ' under the terms of the'
+ line 150: ' copyright2'
+ line 151: ' copyright3'
+ line 152: ' copyright4'
+ line 232: ' get-started1'
+ line 235: ' get-started2'
+ line 236: ' get-started3'
+ line 237: ' get-started4'
+ line 238: ' get-started5'
+ line 241: ' scroll down to'
+ line 242: ' get-started7'
+ line 246: ' download1'
+ line 247: ' download2'
+ line 248: ' download3'
+ line 249: ' download4'
+ line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
+ line 252: ' loading), change the link to p5.min.js.'
+ line 253: ' download5'
+ line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
+ line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
+ line 257: ' download6'
+ line 260: ' environment1'
+ line 261: ' environmentlink'
+ line 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 270: ' environment8'
+ line 278: ' environment10'
+ line 279: ' environment11'
+ line 280: ' Open the index.html file in your browser by double clicking on it in your'
+ line 436: ' Download'
+ line 437: ' download-intro'
+ line 438: ' Welcome! While titled "Download" this page actually contains a collection of'
+ line 439: ' links to either download the library or begin working with it online. We''ve'
+ line 440: ' tried to order things to reflect what a beginner might want first, to'
+ line 441: ' resources that more experienced programmers may be looking for.'
+ line 442: ' editor-title'
+ line 443: ' p5.js-editor'
+ line 444: ' p5.js-editor-intro'
+ line 445: ' This link redirects you to the p5.js Editor online so you can begin using'
+ line 446: ' p5.js immediately.'
+ line 447: ' editor-includes'
+ line 448: ' complete-library-title'
+ line 449: ' complete-library-intro1'
+ line 450: ' This is a download containing the p5.js library file, the p5.sound addon,'
+ line 451: ' and an example project. It does not contain an editor. Visit'
+ line 452: ' complete-library-intro2'
+ line 453: ' complete-library-intro3'
+ line 454: ' p5.js-complete'
+ line 455: ' includes-1'
+ line 456: ' includes-2'
+ line 457: ' includes-3'
+ line 458: ' single-files-title'
+ line 459: ' single-files-intro'
+ line 460: ' These are downloads or links to the p5.js library file. No additional'
+ line 461: ' contents are included.'
+ line 462: ' single-file'
+ line 463: ' p5.js-uncompressed'
+ line 464: ' compressed'
+ line 465: ' link'
+ line 466: ' statically-hosted-file'
+ line 467: ' etc-title'
+ line 468: ' older-releases'
+ line 469: ' github-repository'
+ line 470: ' report-bugs'
+ line 471: ' supported-browsers'
+ line 472: ' support-title'
+ line 473: ' support-options'
+ line 474: ' support-1'
+ line 475: ' p5.js is free, open-source software. We want to make our community as open'
+ line 476: ' and inclusive as possible. You can support this work by'
+ line 477: ' support-2'
+ line 478: ' support-3'
+ line 479: ' support-4'
+ line 480: ' support-5'
+ line 481: ' support-6'
+ line 482: ' support-7'
+ line 483: ' support-8'
+ line 484: ' support-9'
+ line 485: ' support-10'
+ line 486: ' support-11'
+ line 487: ' support-12'
+ line 488: ' Your membership supports software development (for p5.js, Processing,'
+ line 489: ' Processing.py, Processing for Android and ARM devices, education resources'
+ line 490: ' like code examples and tutorials,'
+ line 491: ' support-13'
+ line 492: ' support-14'
+ line 493: ' support-15'
+ line 494: ' support-16'
+ line 495: ' support-17'
+ line 496: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 497: ' Pittsburgh (Image credit'
+ line 498: ' support-18'
+ line 499: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
+ line 500: ' workshops in London (Image credit'
+ line 501: ' support-19'
+ line 502: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
+ line 503: ' Kira Simon-Kennedy)'
+ line 504: ' support-20'
+ line 505: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 506: ' (Image credit'
+ line 507: ' support-21'
+ line 508: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
+ line 509: ' credit'
+ line 510: ' support-22'
+ line 511: ' support-23'
+ line 512: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 513: ' (Image credit'
+ line 514: ' support-24'
+ line 515: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
+ line 516: ' workshop led by Taeyoon Choi (Image credit'
+ line 517: ' support-25'
+ line 518: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 519: ' Pittsburgh (Image credit'
+ line 520: ' support-26'
+ line 521: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
+ line 522: ' International Center of Photography (Image credit'
+ line 523: ' Photography)'
+ line 524: ' support-27'
+ line 525: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
+ line 526: ' Montoya-Moraga (Image credit'
+ line 527: ' support-28'
+ line 528: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
+ line 529: ' led by Taeyoon Choi (Image credit'
+ line 530: ' support-29'
+ line 531: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
+ line 532: ' Angeles (Image credit'
+ line 533: ' support-30'
+ line 534: ' support-31'
+ line 535: ' support-32'
+ line 536: ' support-33'
+ line 537: ' support-17-alt'
+ line 538: ' support-18-alt'
+ line 539: ' support-19-alt'
+ line 540: ' support-20-alt'
+ line 541: ' support-21-alt'
+ line 542: ' support-22-alt'
+ line 543: ' support-23-alt'
+ line 544: ' support-24-alt'
+ line 545: ' support-25-alt'
+ line 546: ' support-26-alt'
+ line 547: ' support-27-alt'
+ line 548: ' support-28-alt'
+ line 549: ' support-29-alt'
+ line 550: ' support-30-alt'
+ line 551: ' support-31-alt'
+ line 729: ' learn-title'
+ line 730: ' teach-title2'
+ line 731: ' learn1'
+ line 732: ' These tutorials provide more in-depth or step-by-step overviews of'
+ line 733: ' particular topics. Check out the '
+ line 734: ' learn2'
+ line 735: ' learn3'
+ line 736: ' introduction-to-p5js-title'
+ line 737: ' hello-p5js-title'
+ line 738: ' hello-p5js'
+ line 739: ' This short video will introduce you to the library and what you can do with'
+ line 740: ' it.'
+ line 741: ' getting-started-title'
+ line 742: ' getting-started'
+ line 743: ' Welcome to p5.js! This introduction covers the basics of setting up a'
+ line 744: ' p5.js project.'
+ line 745: ' p5js-overview-title'
+ line 746: ' p5js-overview'
+ line 747: ' p5js-processing-title'
+ line 748: ' p5js-processing'
+ line 749: ' The main differences between the two, and how to convert from one to the'
+ line 750: ' other.'
+ line 751: ' p5-screen-reader-title'
+ line 752: ' p5-screen-reader'
+ line 753: ' using-local-server-title'
+ line 754: ' using-local-server'
+ line 755: ' p5js-wiki-title'
+ line 756: ' p5js-wiki'
+ line 757: ' connecting-p5js-title'
+ line 758: ' creating-libraries-title'
+ line 759: ' creating-libraries'
+ line 760: ' nodejs-and-socketio-title'
+ line 761: ' nodejs-and-socketio'
+ line 762: ' programming-topics-title'
+ line 763: ' beyond-the-canvas-title'
+ line 764: ' beyond-the-canvas'
+ line 765: ' 3d-webgl-title'
+ line 766: ' 3d-webgl'
+ line 767: ' color-title'
+ line 768: ' color'
+ line 769: ' coordinate-system-and-shapes-title'
+ line 770: ' coordinate-system-and-shapes'
+ line 771: ' interactivity-title'
+ line 772: ' interactivity'
+ line 773: ' program-flow-title'
+ line 774: ' program-flow'
+ line 775: ' curves-title'
+ line 776: ' curves'
+ line 777: ' An introduction to the three types of curves in p5.js'
+ line 778: ' and Bézier curves.'
+ line 779: ' becoming-a-better-programmer-title'
+ line 780: ' debugging-title'
+ line 781: ' debugging'
+ line 782: ' optimizing-title'
+ line 783: ' optimizing'
+ line 784: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
+ line 785: ' and smoother.'
+ line 786: ' test-driven-development-title'
+ line 787: ' test-driven-development'
+ line 788: ' Save yourself from agony on install day. What is unit testing and how to use'
+ line 789: ' it? By Andy Timmons.'
+ line 790: ' contributing-to-the-community-title'
+ line 791: ' development-title'
+ line 792: ' development'
+ line 793: ' looking-inside-title'
+ line 794: ' looking-inside'
+ line 795: ' A friendly intro to the file structure and tools for p5.js development, by'
+ line 796: ' Luisa Pereira.'
+ line 797: ' writing-tutorial-title'
+ line 798: ' writing-tutorial'
+ line 799: ' writing-a-tutorial-title'
+ line 800: ' writing-a-tutorial-author'
+ line 801: ' writing-a-tutorial-1'
+ line 802: ' We invite educators, contributors and general enthusiasts to contribute p5js'
+ line 803: ' tutorials. The p5js project makes creative coding and open source'
+ line 804: ' development more accessible to a diverse community and we are excited to'
+ line 805: ' publish tutorials on all aspects of the development process. Our learning'
+ line 806: ' materials so far include guides on learning p5, programming technique and'
+ line 807: ' how to contribute to an open source project.'
+ line 808: ' writing-a-tutorial-2'
+ line 809: ' We welcome new written tutorial contributions and this guide outlines the'
+ line 810: ' steps of how to propose, prepare and contribute.'
+ line 811: ' writing-a-tutorial-how-start-title'
+ line 812: ' writing-a-tutorial-how-start-1'
+ line 813: ' writing-a-tutorial-how-start-2'
+ line 814: ' writing-a-tutorial-how-start-3'
+ line 815: ' that outlines in progress tutorials. If your topic is listed as in progress,'
+ line 816: ' perhaps you can add to work being done and contribute to preparing existing'
+ line 817: ' work for publication so please reach out to us.'
+ line 818: ' writing-a-tutorial-how-start-4'
+ line 819: ' If your topic is not already covered and is not listed as in progress,'
+ line 820: ' please write a few sentences on what you propose to cover and email us this'
+ line 821: ' description at education@p5js.org.'
+ line 822: ' writing-a-tutorial-how-prepare-title'
+ line 823: ' writing-a-tutorial-how-prepare-1'
+ line 824: ' When your tutorial is ready for publication, please follow these steps to'
+ line 825: ' prepare your content for the p5js website.'
+ line 826: ' writing-a-tutorial-how-prepare-2'
+ line 827: ' writing-a-tutorial-how-prepare-3'
+ line 828: ' writing-a-tutorial-how-prepare-4'
+ line 829: ' writing-a-tutorial-how-prepare-5'
+ line 830: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
+ line 831: ' of the p5js site. The file called index.hbs is the '
+ line 832: ' writing-a-tutorial-how-prepare-6'
+ line 833: ' writing-a-tutorial-how-prepare-7'
+ line 834: ' writing-a-tutorial-how-prepare-8'
+ line 835: ' writing-a-tutorial-how-prepare-9'
+ line 836: ' tags on the page, with formatting defined by the <h1> and <h2>'
+ line 837: ' tags, the <p> paragraph tags as is done shown on the'
+ line 838: ' writing-a-tutorial-how-prepare-10'
+ line 839: ' writing-a-tutorial-how-prepare-11'
+ line 840: ' If your tutorial contains images, they are to be placed in the assets folder'
+ line 841: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
+ line 842: ' shown below.'
+ line 843: ' writing-a-tutorial-how-prepare-12'
+ line 844: ' writing-a-tutorial-embedding-title'
+ line 845: ' writing-a-tutorial-embedding-1'
+ line 846: ' Using p5js means you can illustrate your tutorial with animated, interactive'
+ line 847: ' or editable code examples to demonstrate programming concepts. Your examples'
+ line 848: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
+ line 849: ' in two ways.'
+ line 850: ' writing-a-tutorial-embedding-2'
+ line 851: ' writing-a-tutorial-embedding-3'
+ line 852: ' writing-a-tutorial-embedding-4'
+ line 853: ' writing-a-tutorial-embedding-5'
+ line 854: ' writing-a-tutorial-embedding-6'
+ line 855: ' writing-a-tutorial-embedding-7'
+ line 856: ' writing-a-tutorial-embedding-8'
+ line 857: ' writing-a-tutorial-embedding-9'
+ line 858: ' writing-a-tutorial-embedding-10'
+ line 859: ' If the example is to be animated and/or interactive but not editable. The'
+ line 860: ' p5.js sketch should be embedded into the page as an iframe as described'
+ line 861: ' below.'
+ line 862: ' writing-a-tutorial-iframe-title'
+ line 863: ' writing-a-tutorial-iframe-1'
+ line 864: ' An iframe is like creating a window through which you can explore another'
+ line 865: ' page, sandboxed from the rest of your page. In this case it will be a window'
+ line 866: ' to the index.html containing your p5.js sketch. '
+ line 867: ' writing-a-tutorial-iframe-2'
+ line 868: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
+ line 869: ' folder labelled with the name of your sketch as shown in the screenshot.'
+ line 870: ' This is where all the images and p5 sketches linked by iframe should be'
+ line 871: ' stored.'
+ line 872: ' writing-a-tutorial-iframe-3'
+ line 873: ' In the subfolders containing your p5 examples there should be a sketch.js'
+ line 874: ' file and the embed.html file for the sketch. '
+ line 876: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 877: ' the site. If your file structure is the same as above, the path to the p5.js'
+ line 878: ' library should be "../../../js/p5.min.js".'
+ line 879: ' writing-a-tutorial-iframe-5'
+ line 880: ' You can then embed the p5js index files as iframes in the .hbs file that'
+ line 881: ' contains your tutorial content. The embed code for the iframe would then'
+ line 882: ' be'
+ line 883: ' writing-a-tutorial-iframe-6'
+ line 884: ' Styling for the iframe (this could directly into the post or in a'
+ line 885: ' stylesheet)'
+ line 886: ' writing-a-tutorial-iframe-7'
+ line 887: ' writing-a-tutorial-iframe-8'
+ line 888: ' writing-a-tutorial-iframe-9'
+ line 889: ' One thing to note is that you need to manually set the size of the iframe,'
+ line 890: ' so it works best if things are a standard size.'
+ line 891: ' writing-a-tutorial-iframe-10'
+ line 892: ' Also note that the links to the p5.js library files do not happen from the'
+ line 893: ' .eps page with all the tutorial content. Instead they will be located in the'
+ line 894: ' html page that is rendering your sketch (in this case, called embed.html).'
+ line 895: ' writing-a-tutorial-iframe-11'
+ line 896: ' writing-a-tutorial-embed-iframe-12'
+ line 897: ' writing-a-tutorial-finishing-title'
+ line 898: ' writing-a-tutorial-finishing-1'
+ line 899: ' Once your have finished writing your tutorial and your content has been'
+ line 900: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
+ line 901: ' as described above and then issue a pull request to the p5.js website'
+ line 902: ' repository so we can publish your contribution!'
+ line 903: ' writing-a-tutorial-finishing-2'
+ line 904: ' color-description1'
+ line 905: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
+ line 906: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
+ line 907: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
+ line 908: ' color-description2'
+ line 909: ' color-p1x1'
+ line 910: ' In the digital world, when we want to talk about a color, precision is'
+ line 911: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
+ line 912: ' Color, rather, is defined as a range of numbers. Let''s start with the'
+ line 913: ' simplest case'
+ line 914: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
+ line 915: ' gray ranging from black to white.'
+ line 916: ' color-p2x1'
+ line 917: ' color-p2x2'
+ line 918: ' color-p2x3'
+ line 919: ' color-p2x4'
+ line 920: ' color-code1'
+ line 921: ' background(255); // Setting the background to white '
+ line 922: ' stroke(0); // Setting the outline (stroke) to black '
+ line 923: ' fill(150); // Setting the interior of a shape (fill) to grey '
+ line 924: ' rect(50,50,75,100); // Drawing the rectangle'
+ line 925: ' color-p3x1'
+ line 926: ' color-p3x2'
+ line 927: ' color-p3x3'
+ line 928: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
+ line 929: ' important to remember that 0 is not "nothing", but rather denotes the color'
+ line 930: ' black. Also, remember not to eliminate both—with '
+ line 931: ' color-p3x4'
+ line 932: ' color-p3x5'
+ line 933: ' color-p4x1'
+ line 934: ' In addition, if we draw two shapes, p5.js will always use the most recently'
+ line 935: ' specified stroke and fill, reading the code from top to bottom.'
+ line 936: ' color-rgb-title'
+ line 937: ' color-rgb-p1x1'
+ line 938: ' Remember finger painting? By mixing three "primary" colors, any color could'
+ line 939: ' be generated. Swirling all colors together resulted in a muddy brown. The'
+ line 940: ' more paint you added, the darker it got. Digital colors are also constructed'
+ line 941: ' by mixing three primary colors, but it works differently from paint. First,'
+ line 942: ' the primaries are different'
+ line 943: ' with color on the screen, you are mixing light, not paint, so the mixing'
+ line 944: ' rules are different as well.'
+ line 945: ' color-rgb-li1'
+ line 946: ' color-rgb-li2'
+ line 947: ' color-rgb-li3'
+ line 948: ' color-rgb-li4'
+ line 949: ' color-rgb-li5'
+ line 950: ' color-rgb-p2x1'
+ line 951: ' This assumes that the colors are all as bright as possible, but of course,'
+ line 952: ' you have a range of color available, so some red plus some green plus some'
+ line 953: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
+ line 954: ' While this may take some getting used to, the more you program and'
+ line 955: ' experiment with RGB color, the more it will become instinctive, much like'
+ line 956: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
+ line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
+ line 958: ' the individual color elements are expressed as ranges from 0 (none of that'
+ line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
+ line 960: ' and B. You will get the hang of RGB color mixing through experimentation,'
+ line 961: ' but next we will cover some code using some common colors.'
+ line 962: ' color-transparency-title'
+ line 963: ' color-transparency-p1x1'
+ line 964: ' In addition to the red, green, and blue components of each color, there is'
+ line 965: ' an additional optional fourth component, referred to as the color''s "alpha".'
+ line 966: ' Alpha means transparency and is particularly useful when you want to draw'
+ line 967: ' elements that appear partially see-through on top of one another. The alpha'
+ line 968: ' values for an image are sometimes referred to collectively as the "alpha'
+ line 969: ' channel" of an image.'
+ line 970: ' color-transparency-p2x1'
+ line 971: ' It is important to realize that pixels are not literally transparent, this'
+ line 972: ' is simply a convenient illusion that is accomplished by blending colors.'
+ line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
+ line 974: ' one to a percentage of another, creating the optical perception of blending.'
+ line 975: ' (If you are interested in programming "rose-colored" glasses, this is where'
+ line 976: ' you would begin.)'
+ line 977: ' color-transparency-p3x1'
+ line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
+ line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
+ line 980: ' color-custom-ranges-title'
+ line 981: ' color-custom-ranges-p1x1'
+ line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
+ line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For'
+ line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
+ line 985: ' percentage). You can do this by specifying a custom '
+ line 986: ' color-custom-ranges-p2x1'
+ line 987: ' The above function says'
+ line 988: ' green, and blue. The range of RGB values will be from 0 to 100."'
+ line 989: ' color-custom-ranges-p3x1'
+ line 990: ' Although it is rarely convenient to do so, you can also have different'
+ line 991: ' ranges for each color component'
+ line 992: ' color-custom-ranges-p4x1'
+ line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
+ line 994: ' from 0 to 10, and alpha from 0 to 255."'
+ line 995: ' color-custom-ranges-p5x1'
+ line 996: ' Finally, while you will likely only need RGB color for all of your'
+ line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
+ line 998: ' and brightness) mode. Without getting into too much detail, HSB color works'
+ line 999: ' as follows'
+ line 1000: ' color-custom-ranges-li1x1'
+ line 1001: ' color-custom-ranges-li1x2'
+ line 1002: ' color-custom-ranges-li2x1'
+ line 1003: ' color-custom-ranges-li2x2'
+ line 1004: ' color-custom-ranges-li3x1'
+ line 1005: ' color-custom-ranges-li3x2'
+ line 1006: ' color-custom-ranges-p6x1'
+ line 1007: ' color-custom-ranges-p6x2'
+ line 1008: ' coordinate-system-description1'
+ line 1009: ' coordinate-system-description2'
+ line 1010: ' coordinate-system-description3'
+ line 1011: ' coordinate-system-description4'
+ line 1012: ' coordinate-system-description5'
+ line 1013: ' coordinate-system-description-title'
+ line 1014: ' coordinate-system-description-p1x1'
+ line 1015: ' Before we begin programming with p5, we must first channel our eighth grade'
+ line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
+ line 1017: ' distance between two points is a good old fashioned line, and this is where'
+ line 1018: ' we begin, with two points on that graph paper.'
+ line 1019: ' coordinate-system-description-p2x1'
+ line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
+ line 1021: ' you wanted to direct a friend of yours to draw that same line, you would'
+ line 1022: ' give them a shout and say "draw a line from the point one-zero to the point'
+ line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer'
+ line 1024: ' and you wanted to instruct this digital pal to display that same line on its'
+ line 1025: ' screen. The same command applies (only this time you can skip the'
+ line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,'
+ line 1027: ' the instruction will look like this'
+ line 1028: ' coordinate-system-description-p3x1'
+ line 1029: ' Even without having studied the syntax of writing code, the above statement'
+ line 1030: ' should make a fair amount of sense. We are providing a command (which we'
+ line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In'
+ line 1032: ' addition, we are specifying some arguments for how that line should be'
+ line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
+ line 1034: ' code as a sentence, the function is a verb and the arguments are the objects'
+ line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a'
+ line 1036: ' period.'
+ line 1037: ' coordinate-system-description-p4x1'
+ line 1038: ' The key here is to realize that the computer screen is nothing more than a'
+ line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
+ line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
+ line 1041: ' location of a point in space. And it is our job to specify what shapes and'
+ line 1042: ' colors should appear at these pixel coordinates.'
+ line 1043: ' coordinate-system-description-p5x1'
+ line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
+ line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
+ line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,'
+ line 1047: ' negative down and to the left). The coordinate system for pixels in a'
+ line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
+ line 1049: ' at the top left with the positive direction to the right horizontally and'
+ line 1050: ' down vertically.'
+ line 1051: ' coordinate-system-simple-shapes-title'
+ line 1052: ' coordinate-system-simple-shapes-p1x1'
+ line 1053: ' The vast majority of p5 programming examples are visual in nature. These'
+ line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
+ line 1055: ' begin by looking at four primitive shapes.'
+ line 1056: ' coordinate-system-simple-shapes-p2x1'
+ line 1057: ' For each shape, we will ask ourselves what information is required to'
+ line 1058: ' specify the location and size (and later color) of that shape and learn how'
+ line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
+ line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.'
+ line 1061: ' coordinate-system-simple-shapes-p3x1'
+ line 1062: ' coordinate-system-simple-shapes-p3x2'
+ line 1063: ' coordinate-system-simple-shapes-p4x1'
+ line 1064: ' coordinate-system-simple-shapes-p4x2'
+ line 1065: ' coordinate-system-simple-shapes-p5x1'
+ line 1066: ' coordinate-system-simple-shapes-p5x2'
+ line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by'
+ line 1068: ' the coordinate for the top left corner of the rectangle, as well as its'
+ line 1069: ' width and height.'
+ line 1070: ' coordinate-system-simple-shapes-p6x1'
+ line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along'
+ line 1072: ' with width and height. If we prefer this method, we first indicate that we'
+ line 1073: ' want to use the '
+ line 1074: ' coordinate-system-simple-shapes-p6x2'
+ line 1075: ' coordinate-system-simple-shapes-p7x1'
+ line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner'
+ line 1077: ' and the bottom right corner). The mode here is '
+ line 1078: ' coordinate-system-simple-shapes-p7x2'
+ line 1079: ' coordinate-system-simple-shapes-p8x1'
+ line 1080: ' coordinate-system-simple-shapes-p8x2'
+ line 1081: ' coordinate-system-simple-shapes-p8x3'
+ line 1082: ' coordinate-system-simple-shapes-p8x4'
+ line 1083: ' coordinate-system-simple-shapes-p8x5'
+ line 1084: ' coordinate-system-simple-shapes-p8x6'
+ line 1085: ' coordinate-system-simple-shapes-p9x1'
+ line 1086: ' Now let''s look at what some code with shapes in more complete form, with'
+ line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
+ line 1088: ' to specify the width and height of the canvas.'
+ line 1089: ' teach-desc'
+ line 1090: test-tutorial
+ line 1147: ' Libraries'
+ line 1148: ' core-libraries'
+ line 1149: ' community-libraries'
+ line 1150: ' libraries-created-by'
+ line 1151: ' p5.sound'
+ line 1152: ' p5.sound extends p5 with Web Audio functionality including audio input,'
+ line 1153: ' playback, analysis and synthesis.'
+ line 1154: ' p5.accessibility'
+ line 1155: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
+ line 1156: ' and visually impaired.'
+ line 1157: ' asciiart'
+ line 1158: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
+ line 1159: ' p5js.'
+ line 1160: ' p5.ble'
+ line 1161: ' A Javascript library that enables communication between BLE devices and p5'
+ line 1162: ' sketches.'
+ line 1163: ' blizard.js'
+ line 1164: ' p5.bots'
+ line 1165: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
+ line 1166: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
+ line 1167: ' drive LEDs, motors, and more!'
+ line 1168: ' p5.clickable'
+ line 1169: ' p5.cmyk.js'
+ line 1170: ' p5.collide2D'
+ line 1171: ' p5.collide2D provides tools for calculating collision detection for 2D'
+ line 1172: ' geometry with p5.js.'
+ line 1173: ' p5.createloop'
+ line 1174: ' p5.dimensions'
+ line 1175: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
+ line 1176: ' dimensions.'
+ line 1177: ' p5.EasyCam'
+ line 1178: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
+ line 1179: ' contributions by Thomas Diewald.'
+ line 1180: ' p5.experience'
+ line 1181: ' Extensive library for p5.js that adds additional event-listening'
+ line 1182: ' functionality for creating canvas-based web applications.'
+ line 1183: ' p5.func'
+ line 1184: ' p5.func is a p5 extension that provides new objects and utilities for'
+ line 1185: ' function generation in the time, frequency, and spatial domains.'
+ line 1186: ' p5.geolocation'
+ line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
+ line 1188: ' geofencing user locations for p5.js.'
+ line 1189: ' p5.gibber'
+ line 1190: ' grafica.js'
+ line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your'
+ line 1192: ' p5.js sketches.'
+ line 1193: ' p5.gui'
+ line 1194: ' p5.localmessage'
+ line 1195: ' p5.localmessage provides a simple interface to send messages locally from'
+ line 1196: ' one sketch to another for easy multi-window sketching!'
+ line 1197: ' marching'
+ line 1198: ' mappa'
+ line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and'
+ line 1200: ' geo-data. Useful when building geolocation-based visual representations.'
+ line 1201: ' ml5.js'
+ line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
+ line 1203: ' learning algorithms and models in the browser.'
+ line 1204: ' p5.play'
+ line 1205: ' p5.play provides sprites, animations, input and collision functions for'
+ line 1206: ' games and gamelike applications.'
+ line 1207: ' p5.particle'
+ line 1208: ' The Particle and Fountain objects can be used to create data-driven effects'
+ line 1209: ' that are defined through user structures or JSON input and user-draw'
+ line 1210: ' functions.'
+ line 1211: ' p5.Riso'
+ line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.'
+ line 1213: ' It helps turn your sketches into multi-color prints.'
+ line 1214: ' rita.js'
+ line 1215: ' RiTa.js provides a set of natural language processing objects for generative'
+ line 1216: ' literature.'
+ line 1217: ' Rotating knobs'
+ line 1218: ' p5.scenemanager'
+ line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
+ line 1220: ' Each scene is a like a sketch within the main sketch.'
+ line 1221: ' p5.screenPosition'
+ line 1222: ' p5.scribble'
+ line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
+ line 1224: ' on a port of the original Processing library'
+ line 1225: ' p5.serial'
+ line 1226: ' p5.serial enables serial communication between devices that support serial'
+ line 1227: ' (RS-232) and p5 sketches running in the browser.'
+ line 1228: ' Shape5'
+ line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to'
+ line 1230: ' code for the first time.'
+ line 1231: ' p5.shape.js'
+ line 1232: ' p5.speech'
+ line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech'
+ line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
+ line 1235: ' and listen.'
+ line 1236: ' p5.start2d.js'
+ line 1237: ' p5.tiledmap'
+ line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your'
+ line 1239: ' sketches.'
+ line 1240: ' p5.touchgui'
+ line 1241: ' tramontana'
+ line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,'
+ line 1243: ' tramontana Board, ...) to create interactive environments, interactive'
+ line 1244: ' spaces or just prototype experiences at scale and in space.'
+ line 1245: ' vida'
+ line 1246: ' Vida is a simple library that adds camera (or video) based motion detection'
+ line 1247: ' and blob tracking functionality to p5js.'
+ line 1248: ' p5.voronoi'
+ line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
+ line 1250: ' your p5.js sketches.'
+ line 1251: ' p5.3D'
+ line 1252: ' using-a-library-title'
+ line 1253: ' using-a-library1'
+ line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
+ line 1255: ' core functionality. There are two categories of libraries. Core libraries ('
+ line 1256: ' using-a-library3'
+ line 1257: ' ) are part of the p5.js distribution, while contributed libraries are'
+ line 1258: ' developed, owned, and maintained by members of the p5.js community.'
+ line 1259: ' using-a-library4'
+ line 1260: ' To include a library in your sketch, link it into your HTML file, after you'
+ line 1261: ' have linked in p5.js. An example HTML file might look like this'
+ line 1262: ' create-your-own-title'
+ line 1263: ' create-your-own1'
+ line 1264: ' create-your-own2'
+ line 1265: ' create-your-own3'
+ line 1266: ' create-your-own4'
+ line 1267: ' If you have created a library and would like to have it included on this'
+ line 1268: ' page, submit this form!'
+ line 1420: ' community-title'
+ line 1421: ' community-statement-title'
+ line 1422: ' community-statement1'
+ line 1423: ' p5.js is a community interested in exploring the creation of art and design'
+ line 1424: ' with technology.'
+ line 1425: ' community-statement2'
+ line 1426: ' We are a community of, and in solidarity with, people from every gender'
+ line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political'
+ line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that'
+ line 1430: ' not everyone has the time, financial means, or capacity to actively'
+ line 1431: ' participate, but we recognize and encourage involvement of all kinds. We'
+ line 1432: ' facilitate and foster access and empowerment. We are all learners.'
+ line 1433: ' community-statement3'
+ line 1434: ' We like these hashtags'
+ line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
+ line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
+ line 1437: ' course).'
+ line 1438: ' in-practice-title'
+ line 1439: ' in-practice1'
+ line 1440: ' in-practice2'
+ line 1441: ' We insist on actively engaging with requests for feedback regardless of'
+ line 1442: ' their complexity.'
+ line 1443: ' in-practice3'
+ line 1444: ' We welcome newcomers and prioritize the education of others. We strive to'
+ line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
+ line 1446: ' that newcomers are just as valuable in this effort as experts.'
+ line 1447: ' in-practice4'
+ line 1448: ' We consistently make the effort to actively recognize and validate multiple'
+ line 1449: ' types of contributions.'
+ line 1450: ' in-practice5'
+ line 1451: ' in-times-conflict-title'
+ line 1452: ' in-times-conflict1'
+ line 1453: ' in-times-conflict2'
+ line 1454: ' in-times-conflict3'
+ line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our'
+ line 1456: ' actions.'
+ line 1457: ' in-times-conflict4'
+ line 1458: ' in-times-conflict5'
+ line 1459: ' in-times-conflict6'
+ line 1460: ' in-times-conflict7'
+ line 1461: ' in-the-future-title'
+ line 1462: ' in-the-future1'
+ line 1463: ' notes-title'
+ line 1464: ' notes1'
+ line 1465: ' notes2'
+ line 1466: ' notes3'
+ line 1467: ' notes4'
+ line 1468: ' notes5'
+ line 1469: ' contribute-title'
+ line 1470: ' contribute1'
+ line 1471: ' Our community is always looking for enthusiasts to help in all different'
+ line 1472: ' ways.'
+ line 1473: ' develop-title'
+ line 1474: ' develop1'
+ line 1475: ' develop2'
+ line 1476: ' develop3'
+ line 1477: ' develop4'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1536: ' 2015contributors-conference-diversity4'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1544: ' 2015cc_1'
+ line 1634: ' 2019cc_8'
+ line 1635: ' 2019cc_9'
+ line 1636: ' Participant speaks at a podium in front of projected text about the problem'
+ line 1637: ' with anonymyzing data'
+ line 1638: ' 2019cc_10'
+ line 1639: ' Person with a microphone speaking to fellow participants in front of text'
+ line 1640: ' that reads p5.js will not add any new features except those that increase'
+ line 1641: ' access'
+ line 1642: ' 2019cc_11'
+ line 1643: ' 2019cc_12'
+ line 1644: ' 2019cc_13'
+ line 1645: ' 2019cc_14'
+ line 1646: ' 2019cc_15'
+ line 1647: ' Woman with microphone speaking to fellow participants with the text sacred'
+ line 1648: ' boundaries in the projection behind her'
+ line 1649: ' 2019cc_16'
+ line 1650: ' Overhead view of participants listening to a panel of people with an image'
+ line 1651: ' of a 3d rendered man on it'
+ line 1652: ' 2019cc_17'
+ line 1653: ' Participants sit around a table with their laptops and observe code on a'
+ line 1654: ' screen'
+ line 1655: ' 2019cc_18'
+ line 1656: ' 2019cc_19'
+ line 1657: ' 2019cc_20'
+ line 1658: ' 2019cc_21'
+ line 1659: ' 2019cc_22'
+ line 1660: ' Participants sitting around a large U shaped table looking towards the front'
+ line 1661: ' of the classroom'
+ line 1662: ' 2019cc_23'
+ line 1663: ' Man sitting in front of the classroom speaking energetically into a'
+ line 1664: ' microphone'
+ line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
+ line 1738: ' book-3-authors'
+ line 1739: ' book-3-publisher'
+ line 1740: ' book-3-pages'
+ line 1741: ' book-3-type'
+ line 1742: ' book-3-description'
+ line 1743: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1744: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1745: ' furniture to complex and elegant infographics.'
+ line 1746: ' book-3-order-a'
+ line 1747: ' book-3-order-b'
+ line 1748: ' book-4-title'
+ line 1749: ' book-4-authors'
+ line 1750: ' book-4-publisher'
+ line 1751: ' book-4-pages'
+ line 1752: ' book-4-type'
+ line 1753: ' book-4-description'
+ line 1754: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1755: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1756: ' furniture to complex and elegant infographics.'
+ line 1757: ' book-4-order-a'
+ line 1758: ' book-4-order-b'
+ line 1759: ' book-5-title'
+ line 1760: ' book-5-authors'
+ line 1761: ' book-5-publisher'
+ line 1762: ' book-5-pages'
+ line 1763: ' book-5-type'
+ line 1764: ' book-5-description'
+ line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
+ line 1800: ' Examples'
+ line 1801: ' back-examples'
+ line 1802: ' Structure'
+ line 1803: ' Form'
+ line 1804: ' Data'
+ line 1805: ' Arrays'
+ line 1806: ' Control'
+ line 1807: ' Image'
+ line 1808: ' Color'
+ line 1809: ' Math'
+ line 1810: ' Simulate'
+ line 1811: ' Interaction'
+ line 1812: ' Objects'
+ line 1813: ' Lights'
+ line 1814: ' Motion'
+ line 1815: ' Instance_Mode'
+ line 1816: ' Dom'
+ line 1817: ' Drawing'
+ line 1818: ' Transform'
+ line 1819: ' Typography'
+ line 1820: ' 3D'
+ line 1821: ' Input'
+ line 1822: ' Advanced_Data'
+ line 1823: ' Sound'
+ line 1824: ' Mobile'
+ line 1825: ' Hello_P5'
+ line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
+ line 2518: ' teach-case11-title'
+ line 2519: ' teach-case11-lead-name'
+ line 2520: ' teach-case11-content1'
+ line 2521: ' teach-case11-content1-1'
+ line 2522: ' teach-case11-content2'
+ line 2523: ' teach-case11-content3'
+ line 2524: ' teach-case11-content4'
+ line 2525: ' Over the course of three workshops, we will draw and create patterns using'
+ line 2526: ' p5.js, an open-source graphical library; we will learn and apply'
+ line 2527: ' computational concepts to transform patterns and finally, we will bring a'
+ line 2528: ' weaving to life with electronic microcontrollers.'
+ line 2529: ' teach-case11-content5'
+ line 2530: ' teach-case11-content5-1'
+ line 2531: ' Materials'
+ line 2532: ' pattern weaving tool.'
+ line 2533: ' teach-case11-content5-2'
+ line 2534: ' teach-case11-content5-3'
+ line 2535: ' teach-case11-content5-4'
+ line 2536: ' teach-case11-content5-5'
+ line 2537: ' teach-case12-title'
+ line 2538: ' teach-case12-lead-name'
+ line 2539: ' teach-case12-speech'
+ line 2540: ' I''m working on a new series of coding class for Disabled students in South'
+ line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 2542: ' workshops in December 2020. The project is supported by the Open Society'
+ line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 2544: ' Center.'
+ line 2545: ' teach-case12-content1'
+ line 2546: ' teach-case12-content1-1'
+ line 2547: ' teach-case12-content2'
+ line 2548: ' teach-case12-content3'
+ line 2549: ' teach-case12-content4'
+ line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming'
+ line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
+ line 2552: ' teach-case12-content5'
+ line 2553: ' We used p5.js Web editor and code examples on the website. We also used'
+ line 2554: ' dice, playing cards and various paper tools to help students learn about'
+ line 2555: ' coding concepts.'
+ line 2556: ' teach-case12-content5-1'
+ line 2557: ' teach-case12-content5-2'
+ line 598: ' color-custom-ranges-li1x2'
+ line 601: ' color-custom-ranges-li2x2'
+ line 604: ' color-custom-ranges-li3x2'
ko:
src/data/en.yml:
- line 927: ' teach-case2-content5-1'
- line 928: ' teach-case2-content5-2'
- line 929: ' teach-case2-content5-3'
- line 930: ' teach-case2-content5-4'
- line 931: ' teach-case2-content5-5'
- line 932: ''
- line 933: ' teach-case3-title'
- line 934: ' teach-case3-lead-name'
- line 935: ' teach-case3-speech'
- line 936: ' teach-case3-content1'
- line 937: ' teach-case3-content1-1'
- line 917: ' teach-case1-content1-1'
- line 938: ' teach-case3-content2'
- line 939: ' teach-case3-content3'
- line 940: ' teach-case3-content4'
- line 941: ' teach-case3-content5'
- line 942: ' teach-case3-content5-1'
- line 943: ' teach-case3-content5-2'
- line 944: ' teach-case3-content5-3'
- line 945: ''
- line 946: ' teach-case4-title'
- line 947: ' teach-case4-lead-name'
- line 948: ' teach-case4-speech'
- line 949: ' teach-case4-content1'
- line 950: ' teach-case4-content1-1'
- line 951: ' teach-case4-content2'
- line 952: ' teach-case4-content3'
- line 953: ' teach-case4-content4'
- line 954: ' teach-case4-content5'
- line 955: ' teach-case4-content5-1'
- line 956: ' teach-case4-content5-2'
- line 957: ' teach-case4-content5-3'
- line 958: ' teach-case4-content5-4'
- line 959: ' '
- line 960: ' teach-case5-title'
- line 961: ' teach-case5-lead-name'
- line 962: ' teach-case5-speech'
- line 963: ' teach-case5-content1'
- line 964: ' teach-case5-content1-1'
- line 965: ' teach-case5-content1-2'
- line 966: ' teach-case5-content1-3'
- line 967: ' teach-case5-content2'
- line 968: ' teach-case5-content3'
- line 969: ' teach-case5-content4'
- line 970: ' teach-case5-content5'
- line 971: ' teach-case5-content5-1'
- line 972: ' teach-case5-content5-2'
- line 973: ' teach-case5-content5-3'
- line 974: ' '
- line 975: ' teach-case6-title'
- line 976: ' teach-case6-lead-name'
- line 977: ' teach-case6-speech'
- line 978: ' teach-case6-content1'
- line 979: ' teach-case6-content1-1'
- line 980: ' teach-case6-content2'
- line 981: ' teach-case6-content3'
- line 982: ' teach-case6-content4'
- line 983: ' teach-case6-content5'
- line 984: ' teach-case6-content5-1'
- line 985: ' teach-case6-content5-2'
- line 986: ' teach-case6-content5-3'
- line 987: ' teach-case6-content5-4'
- line 988: ' teach-case6-content5-5'
- line 989: ''
- line 990: ' teach-case7-title'
- line 991: ' teach-case7-lead-name'
- line 992: ' teach-case7-speech'
- line 993: ' teach-case7-content1'
- line 994: ' teach-case7-content1-1'
- line 995: ' teach-case7-content2'
- line 996: ' teach-case7-content3'
- line 997: ' teach-case7-content4'
- line 998: ' teach-case7-content5'
- line 999: ' teach-case7-content5-1'
- line 1000: ' '
- line 1001: ' teach-case8-title'
- line 1002: ' teach-case8-lead-name'
- line 1003: ' teach-case8-content1'
- line 1004: ' teach-case8-content1-1'
- line 1005: ' teach-case8-content2'
- line 1006: ' teach-case8-content3'
- line 1007: ' teach-case8-content4'
- line 1008: ' teach-case8-content5'
- line 1009: ' teach-case8-content5-1'
- line 1010: ' teach-case8-content5-2'
- line 1011: ' '
- line 1012: ' teach-case9-title'
- line 1013: ' teach-case9-lead-name'
- line 1014: ' teach-case9-content1'
- line 1015: ' teach-case9-content1-1'
- line 1016: ' teach-case9-content2'
- line 1017: ' teach-case9-content3'
- line 1018: ' teach-case9-content4'
- line 1019: ' teach-case9-content5'
- line 1020: ' teach-case9-content5-1'
- line 1021: ' teach-case9-content5-2'
- line 1022: ' teach-case9-content5-3'
- line 1023: ''
- line 1024: ' teach-case10-title'
- line 1025: ' teach-case10-lead-name'
- line 1026: ' teach-case10-content1'
- line 1027: ' teach-case10-content3'
- line 1028: ' teach-case10-content4'
- line 1029: ' teach-case10-content5'
- line 1030: ' teach-case10-content5-1'
- line 1031: ' teach-case10-content5-2'
- line 1032: ' '
- line 1033: ' teach-case11-title'
- line 1034: ' teach-case11-lead-name'
- line 1035: ' teach-case11-content1'
- line 1036: ' teach-case11-content1-1'
- line 1037: ' teach-case11-content2'
- line 1038: ' teach-case11-content3'
- line 1039: ' teach-case11-content4'
- line 1040: ' teach-case11-content5'
- line 1041: ' teach-case11-content5-1'
- line 1042: ' teach-case11-content5-2'
- line 1043: ' teach-case11-content5-3'
- line 1044: ' teach-case11-content5-4'
- line 1045: ' teach-case11-content5-5'
- line 1046: ''
- line 1047: ' teach-case12-title'
- line 1048: ' teach-case12-lead-name'
- line 1049: ' teach-case12-speech'
- line 1050: ' teach-case12-content1'
- line 1051: ' teach-case12-content1-1'
- line 1052: ' teach-case12-content2'
- line 1053: ' teach-case12-content3'
- line 1054: ' teach-case12-content4'
- line 1055: ' teach-case12-content5'
- line 1056: ' teach-case12-content5-1'
- line 1057: ' teach-case12-content5-2'
- line 270: ' teach-filter1-label7'
- line 271: ' teach-filter1-label8'
- line 272: ' teach-filter1-label9'
- line 273: ' teach-filter1-label10'
- line 282: ' teach-filter2-label1'
- line 283: ' teach-filter2-label2'
- line 284: ' teach-filter2-label3'
- line 285: ' teach-filter2-label4'
- line 286: ' teach-filter2-label5'
- line 287: ' teach-filter2-label6'
- line 288: ' teach-filter2-label7'
- line 289: ''
- line 290: ' teach-filter3'
- line 291: ''
- line 292: ' teach-filter4'
- line 293: ' teach-filter4-label1'
- line 294: ' teach-filter4-label2'
- line 295: ' teach-filter4-label3'
- line 296: ''
- line 297: ' teach-case-subtitle1'
- line 298: ' teach-case-subtitle2'
- line 299: ' teach-case-subtitle3'
- line 300: ' teach-case-subtitle4'
- line 301: ' teach-case-subtitle5'
- line 302: ''
- line 303: ' teach-case1-content1'
- line 304: ' teach-case1-content2'
- line 305: ' teach-case1-content3'
- line 306: ' teach-case1-content4'
- line 307: ' teach-case1-content5'
- line 240: ' teach-desc'
- line 258: ' teach-intro2'
- line 269: ' teach-filter1-label6'
- line 281: ' teach-filter2'
- line 259: ' teach-intro3'
- line 274: ' teach-filter1-label11'
- line 55: ' sketch_info'
- line 54: ' sketch_credits'
- line 243: ' learn-title'
- line 256: teach
- line 37: ' blmstatement1'
- line 62: ' project-a-5-2-moon'
- line 45: ' '
+ line 1517: ' teach-case1-title'
+ line 1527: ' teach-case2-content5-1'
+ line 1528: ' teach-case2-content5-2'
+ line 1537: ' teach-case4-title'
+ line 1545: ' teach-case13-title'
+ line 1546: ' teach-case13-lead-name'
+ line 1547: ' teach-case13-speech'
+ line 1548: ' I''m working on a new series of coding class for Disabled students in South'
+ line 1549: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 1550: ' workshops in December 2020. The project is supported by the Open Society'
+ line 1551: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 1552: ' Center.'
+ line 1553: ' teach-case13-content1'
+ line 1554: ' teach-case13-content1-1'
+ line 1555: ' teach-case13-content2'
+ line 1556: ' teach-case13-content3'
+ line 1557: ' teach-case13-content4'
+ line 1558: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
+ line 1559: ' teach-case13-content5'
+ line 1560: ' Website, p5.js editor.'
+ line 1561: ' teach-case13-content5-1'
+ line 1562: ''
+ line 1563: ' teach-case14-title'
+ line 1564: ' teach-case14-lead-name'
+ line 1565: ' teach-case14-speech'
+ line 1566: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
+ line 1567: ' teach-case14-content1'
+ line 1568: ' teach-case14-content1-1'
+ line 1569: ' teach-case14-content1-2'
+ line 1570: ' teach-case14-content2'
+ line 1571: ' teach-case14-content3'
+ line 1572: ' teach-case14-content4'
+ line 1573: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
+ line 1574: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
+ line 1575: ' teach-case14-content5'
+ line 1576: ' p5.js, p5 web editor, ml5.js, and installations. '
+ line 1577: ' teach-case14-content5-1'
+ line 1578: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
+ line 1579: ' teach-case14-content5-2'
+ line 1580: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
+ line 1581: ' teach-case14-content5-3'
+ line 1582: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
+ line 1583: ' teach-case14-content5-4'
+ line 1584: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
+ line 1585: ' teach-case14-content5-5'
+ line 1586: ' teach-case15-title'
+ line 1587: ' teach-case15-lead-name'
+ line 1588: ' teach-case15-content1'
+ line 1589: ' L''École de Design Nantes Atlantique, France'
+ line 1590: ' teach-case15-content1-1'
+ line 1591: ' teach-case15-content2'
+ line 1592: ' Students from l''école de design Nantes Atlantique'''
+ line 1593: ' teach-case15-content3'
+ line 1594: ' teach-case15-content4'
+ line 1595: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ line 1596: ' teach-case15-content5'
+ line 1597: ' GitHub Readme File'
+ line 1598: ' teach-case15-content5-1'
+ line 1599: ' teach-case16-title'
+ line 1600: ' 50+ Coding Club '
+ line 1601: ' teach-case16-lead-name'
+ line 1602: ' teach-case16-speech'
+ line 1603: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
+ line 1604: ' teach-case16-content1'
+ line 1605: ' teach-case16-content1-1'
+ line 1606: ' teach-case16-content2'
+ line 1607: ' teach-case16-content2-1'
+ line 1608: ' teach-case16-content2-2'
+ line 1609: ' teach-case16-content3'
+ line 1610: ' teach-case16-content4'
+ line 1611: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
+ line 1612: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
+ line 1613: ' teach-case16-content5'
+ line 1614: ' p5for50+ web app'
+ line 1615: ' teach-case16-content5-1'
+ line 1616: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
+ line 1617: ' teach-case16-content5-2'
+ line 1618: ' teach-case16-content5-3'
+ line 1619: ' teach-case16-content5-4'
+ line 1620: ''
+ line 1621: ' teach-case17-title'
+ line 1622: ' teach-case17-lead-name'
+ line 1623: ' teach-case17-speech'
+ line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
+ line 1625: ' teach-case17-content1'
+ line 1626: ' teach-case17-content1-1'
+ line 1627: ' teach-case17-content2'
+ line 1628: ' teach-case17-content3'
+ line 1629: ' teach-case17-content4'
+ line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
+ line 1631: ' teach-case17-content5'
+ line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
+ line 1633: ' teach-case17-content5-1'
+ line 1123: ' book-6-title'
+ line 1124: ' book-6-authors'
+ line 1125: ' book-6-publisher'
+ line 1126: ' book-6-pages'
+ line 1127: ' book-6-type'
+ line 1128: ' book-6-description'
+ line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
+ line 1130: ' of aesthetic programming, engaging with learning to program as a way to '
+ line 1131: ' understand and question existing technological objects and paradigms, '
+ line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
+ line 1133: ' book-6-order-a'
+ line 1134: ' book-6-order-b'
+ line 162: ' library in your html. To learn more visit '
+ line 163: ' library in your html. To learn more visit '
+ line 164: ' your-first-sketch7'
+ line 97: ' get-started-button'
+ line 96: ' get-started7'
+ line 114: ' environment15'
+ line 113: ' environment14'
+ line 115: ' environment16'
+ line 102: ' download8'
+ line 103: ' download9'
+ line 104: ' download10'
+ line 105: ' download11'
+ line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
+ line 256: ' , the organization that supports p5.js.'
+ line 269: ' Your donation supports software development for p5.js, education resources'
+ line 265: ' and inclusive as possible. You can support this work by making a donation to'
+ line 266: ' the '
+ line 267: ' support-2'
+ line 268: ' , the organization that supports p5.js. We need your help!'
+ line 275: ' support-3'
+ line 276: ' support-4'
+ line 277: ' support-5'
+ line 37: Editor
+ line 55: footer5
+ line 123: ' p3xh2'
+ line 41: Reference
+ line 118: ' p2x3'
+ line 128: ' p3xp5'
+ line 59: tagline4
+ line 136: ' p4xp6'
+ line 243: ' settingUp-title'
+ line 62: tagline7
+ line 45: Books
+ line 34: Language-Settings
+ line 35: Sidebar-Title
+ line 36: Home
+ line 38: Download
+ line 39: Donate
+ line 40: Start
+ line 42: Libraries
+ line 43: Learn
+ line 56: tagline1
+ line 60: tagline5
+ line 61: tagline6
+ line 111: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 112: ' neuro-type, size, disability, class, religion, culture, subculture,'
+ line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.'
+ line 117: ' p2x2'
+ line 119: ' p2x4'
+ line 120: ' p2x5'
+ line 121: ' p2x6'
+ line 122: ' p2x7'
+ line 124: ' p3xp1'
+ line 125: ' p3xp2'
+ line 126: ' p3xp3'
+ line 127: ' p3xp4'
+ line 137: ' sketch_credits'
+ line 138: ' sketch_info'
+ line 270: ' environment8'
+ line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
+ line 272: ' that your html and js files are located in. On the left sidebar, you should'
+ line 273: ' find the folder name at the top, with a list of the files contained in the'
+ line 282: ' environment12'
+ line 283: ' environment13'
+ line 284: ' your-first-sketch-title'
+ line 285: ' your-first-sketch-intro1'
+ line 286: ' your-first-sketch-intro2'
+ line 287: ' your-first-sketch-intro3'
+ line 288: ' your-first-sketch-intro4'
+ line 289: ' your-first-sketch1'
+ line 290: ' your-first-sketch2'
+ line 291: ' your-first-sketch3'
+ line 292: ' your-first-sketch4'
+ line 293: ' The line you just added draws an ellipse, with its center 50 pixels over'
+ line 294: ' from the left and 50 pixels down from the top, with a width and height of 80'
+ line 295: ' pixels.'
+ line 296: ' your-first-sketch5'
+ line 297: ' your-first-sketch6'
+ line 298: ' If you are using a screen reader, you must turn on the accessible outputs in'
+ line 299: ' the p5 online editor, outside the editor you must add the accessibility'
+ line 300: ' library in your html. To learn more visit'
+ line 301: ' your-first-sketch7'
+ line 302: ' your-first-sketch8'
+ line 303: ' If you''ve typed everything correctly, this will appear in the display'
+ line 304: ' window'
+ line 305: ' your-first-sketch9'
+ line 306: ' your-first-sketch10'
+ line 307: ' If nothing appears, the editor may be having trouble understanding what'
+ line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
+ line 309: ' exactly'
+ line 310: ' between each of them, the line should end with a semicolon, and ellipse has'
+ line 311: ' to be spelled correctly.'
+ line 312: ' your-first-sketch11'
+ line 313: ' One of the most difficult things about getting started with programming is'
+ line 314: ' that you have to be very specific about the syntax. The browser isn''t always'
+ line 315: ' smart enough to know what you mean, and can be quite fussy about the'
+ line 316: ' placement of punctuation. You''ll get used to it with a little practice. In'
+ line 317: ' the bottom left of the editor you will find the console section. Here, you'
+ line 318: ' can find messages from the editor with details about any errors it'
+ line 319: ' encounters.'
+ line 320: ' your-first-sketch12'
+ line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
+ line 322: ' last example to try this'
+ line 323: ' your-first-sketch13'
+ line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
+ line 325: ' and then starts drawing white circles at the position of the mouse. When a'
+ line 326: ' mouse button is pressed, the circle color changes to black. Run the code,'
+ line 327: ' move the mouse, and click to experience it.'
+ line 328: ' your-first-sketch14'
+ line 329: ' first-sketch-heading1'
+ line 330: ' first-sketch-heading2'
+ line 331: ' first-sketch-heading3'
+ line 332: ' what-next-title'
+ line 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ line 340: ' learn8'
+ line 341: ' learn9'
+ line 342: ' learn10'
+ line 343: ' reference1'
+ line 344: ' reference2'
+ line 345: ' reference3'
+ line 346: ' learn11'
+ line 347: ' learn12'
+ line 348: ' processing-transition1'
+ line 349: ' processing-transition2'
+ line 350: ' processing-transition3'
+ line 351: ' processing-transition4'
+ line 352: ' book1'
+ line 353: ' Parts of this tutorial were adapted from the book, Getting Started with'
+ line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
+ line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
+ line 356: ' Contributors Conference.'
+ line 44: Examples
+ line 57: tagline2
+ line 146: ' copyright-title'
+ line 231: ' get-started-title'
+ line 240: ' . If you would like to work on the the desktop version of p5.js you can'
+ line 258: ' download7'
+ line 281: ' file manager or type'
+ line 54: footer4
+ line 110: ' We are a community of, and in solidarity with, people from every gender'
+ line 239: ' get-started6'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
+ line 875: ' writing-a-tutorial-iframe-4'
+ line 233: ' This page walks you through setting up a p5.js project and making your first'
+ line 234: ' sketch.'
+ line 244: ' download-title'
+ line 245: ' hosted-title'
+ line 50: footerxh1
+ line 98: ' p1x1'
+ line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making'
+ line 100: ' coding accessible and inclusive for artists, designers, educators,'
+ line 109: ' p2x1'
+ line 129: ' p3xp6'
+ line 148: ' The p5.js library is free software; you can redistribute it and/or modify it'
+ line 46: Community
+ line 133: ' p4xp3'
+ line 134: ' p4xp4'
+ line 141: ' project-a-2-5-phuong'
+ line 144: ' project-a-2-7-phuong'
+ line 64: ' color-p3x3'
+ line 70: ' color-rgb-p1x1'
+ line 87: ' color-custom-ranges-p2x1'
+ line 24: footer1
+ line 25: footer2
+ line 26: footer3
+ line 27: footer4
+ line 77: ' color-rgb-p2x1'
+ line 82: ' color-transparency-p2x1'
+ line 139: ' project-a-2-7-phuong'
+ line 76: ' color-transparency-p1x1'
line 31: tagline7
- line 34: ' blmnamelistending'
- line 35: ' blmstatement1'
- line 36: ' blmstatement2'
- line 38: ' blacklivesmatter'
- line 39: ' naacp'
- line 40: ' equaljustice'
- line 41: ' bailfund'
- line 42: ' floydmemorial'
- line 43: ''
- line 56: ' get-started4'
- line 60: ' get-started7'
- line 61: ' settingUp-title'
line 63: ' hosted-title'
line 75: ' download9'
- line 111: ' your-first-sketch-intro2'
- line 112: ' your-first-sketch-intro3'
- line 113: ' your-first-sketch-intro4'
- line 114: ' your-first-sketch1'
- line 115: ' your-first-sketch2'
- line 116: ' your-first-sketch3'
- line 117: ' your-first-sketch4'
- line 118: ' your-first-sketch5'
- line 119: ' your-first-sketch6'
- line 120: ' your-first-sketch7'
- line 121: ' your-first-sketch8'
- line 122: ' your-first-sketch9'
- line 123: ' your-first-sketch10'
- line 124: ' your-first-sketch11'
- line 125: ' your-first-sketch12'
- line 126: ' your-first-sketch13'
- line 127: ' your-first-sketch14'
- line 137: ' learn2'
- line 138: ' learn3'
- line 139: ' learn4'
line 140: ' learn5'
- line 141: ' learn6'
line 142: ' learn7'
line 143: ' learn8'
- line 144: ' learn9'
line 145: ' learn10'
- line 158: ' learn12'
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
- line 162: ' processing-transition4'
- line 163: ' book1'
- line 308: ' project-a-6-roni-cantor'
- line 309: ''
- line 310: ' project-resources'
- line 311: ' creator-from-qianqian'
- line 312: ' interview-link-qianqian'
- line 313: ' project-a-1-1-qianqian'
- line 314: ' project-a-1-2-qianqian'
- line 315: ' project-a-2-1-qianqian'
- line 316: ' project-a-2-2-qianqian'
- line 317: ' project-a-2-3-qianqian'
- line 318: ' project-a-2-4-qianqian'
- line 319: ' project-a-3-1-qianqian'
- line 320: ' project-a-3-2-qianqian'
- line 321: ' project-a-4-1-qianqian'
- line 322: ' project-a-4-2-qianqian'
- line 323: ' project-a-4-3-qianqian'
- line 324: ' project-a-5-1-qianqian'
- line 325: ' project-a-5-2-qianqian'
- line 326: ''
- line 327: ' creator-from-phuong'
- line 328: ' project-a-1-1-phuong'
- line 329: ' link-1-phuong'
- line 330: ' link-2-phuong'
- line 331: ' link-3-phuong'
- line 332: ' project-a-1-2-phuong'
- line 333: ' project-a-1-3-phuong'
- line 334: ' project-a-1-4-phuong'
- line 335: ' project-a-2-1-phuong'
- line 336: ' project-a-2-2-phuong'
- line 337: ' project-a-2-3-phuong'
- line 338: ' project-a-2-4-phuong'
- line 339: ' p5-sketch-by-chjno-phuong'
- line 340: ' project-a-2-5-phuong'
- line 341: ' project-a-2-6-phuong'
- line 342: ' project-a-2-7-phuong'
- line 343: ' project-a-3-1-phuong'
- line 344: ' project-a-3-2-phuong'
- line 345: ' project-a-3-3-phuong'
- line 346: ' project-a-3-4-phuong'
- line 347: ' project-a-4-1-phuong'
- line 348: ' project-a-5-1-phuong'
- line 349: ' school-of-machines-phuong'
- line 350: ' project-a-5-2-phuong'
- line 351: ''
- line 352: ' pronouns-male'
- line 353: ' creator-from-chung'
- line 354: ' link-1-casey-louise'
- line 355: ' link-2-casey-louise'
- line 356: ' link-1-chung'
line 357: ' link-2-chung'
line 358: ' link-3-chung'
line 359: ' project-a-1-1-chung'
@@ -755,16 +2189,8 @@ ko:
line 417: ' project-a-4-1-moon'
line 418: ' project-a-5-1-moon'
line 419: ' project-a-5-2-moon'
- line 44: ''
- line 57: ' get-started4'
- line 64: ' hosted-title'
- line 70: ' download5'
- line 76: ' download9'
line 79: ' environment1'
line 88: ' environment8'
- line 128: ' your-first-sketch14'
- line 146: ' learn10'
- line 164: ' book1'
line 173: ' complete-library-intro1'
line 182: ' learn3'
line 191: ' writing-a-tutorial-embedding-7'
@@ -772,15 +2198,9 @@ ko:
line 204: ' writing-a-tutorial-iframe-7'
line 213: ' color-description1'
line 222: ' coordinate-system-description3'
- line 231: ' coordinate-system-simple-shapes-p1x1'
- line 249: ' Rotating knobs'
- line 59: ' get-started6'
line 69: ' download5'
line 74: ' download8'
line 78: ' environment1'
- line 87: ' environment8'
- line 110: ' your-first-sketch-intro1'
- line 136: ' learn1'
line 157: ' learn11'
line 172: ' complete-library-intro1'
line 181: ' learn3'
@@ -790,337 +2210,1755 @@ ko:
line 212: ' color-description1'
line 221: ' coordinate-system-description3'
line 230: ' coordinate-system-simple-shapes-p1x1'
- line 239: ' p5.bots'
- line 248: ' Rotating knobs'
- line 875: ' project-a-5-2-moon'
- line 254: ' project-a-5-2-moon'
- line 255: ''
- line 500: ' teach-title2'
- line 501: ' teach-intro1'
- line 502: ' teach-intro2'
- line 503: ' teach-intro3'
- line 504: ' teach-intro4'
- line 505: ' teach-slider-title1'
- line 506: ' teach-slider-title2'
- line 507: ' teach-slider-title3'
- line 508: ' teach-results'
- line 878: ' teach-title2'
- line 879: ' teach-intro1'
- line 880: ' teach-intro2'
- line 881: ' teach-intro3'
- line 882: ' teach-intro4'
- line 883: ' teach-slider-title1'
- line 884: ' teach-slider-title2'
- line 885: ' teach-slider-title3'
- line 886: ' teach-results'
line 66: ' sketch_credits'
line 67: ' sketch_info'
- line 232: ' learn-title'
- line 257: ' teach-intro1'
- line 260: ' teach-intro4'
- line 261: ' teach-heading'
- line 262: ' teach-search-filter'
- line 263: ' teach-filter1'
- line 264: ' teach-filter1-label1'
- line 265: ' teach-filter1-label2'
- line 266: ' teach-filter1-label3'
- line 267: ' teach-filter1-label4'
- line 268: ' teach-filter1-label5'
- line 275: ' teach-filter1-label12'
- line 276: ' teach-filter1-label13'
- line 277: ' teach-filter1-label14'
- line 278: ' teach-filter1-label15'
- line 279: ' teach-filter1-label16'
- line 280: ' '
- line 919: ' teach-case1-title'
- line 920: ' teach-case1-lead-name'
- line 921: ' teach-case1-content1'
- line 922: ' teach-case1-content1-1'
- line 923: ' teach-case1-content2'
- line 924: ' teach-case1-content3'
- line 925: ' teach-case1-content4'
- line 926: ' teach-case1-content5'
+ line 22: footer1
+ line 23: footer2
+ line 32: ' download-intro'
+ line 65: ' color-rgb-p1x1'
+ line 72: ' color-rgb-p2x1'
+ line 85: ' color-custom-ranges-p4x1'
+ line 28: footer5
+ line 81: ' color-transparency-p1x1'
+ line 90: ' color-custom-ranges-p4x1'
+ line 153: ' project-a-4-7-casey-louise'
+ line 33: Skip-To-Content
+ line 47: Contribute
+ line 48: Forum
+ line 49: Showcase
+ line 51: footer1
+ line 52: footer2
+ line 53: footer3
+ line 58: tagline3
+ line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe'
+ line 106: ' think of your whole browser page as your sketch, including HTML5 objects for'
+ line 107: ' text, input, video, webcam, and sound.'
+ line 108: ' p2xh2'
+ line 130: ' p4xh2'
+ line 131: ' p4xp1'
+ line 132: ' p4xp2'
+ line 135: ' p4xp5'
+ line 147: ' copyright1'
+ line 149: ' under the terms of the'
+ line 150: ' copyright2'
+ line 151: ' copyright3'
+ line 152: ' copyright4'
+ line 232: ' get-started1'
+ line 235: ' get-started2'
+ line 236: ' get-started3'
+ line 237: ' get-started4'
+ line 238: ' get-started5'
+ line 241: ' scroll down to'
+ line 242: ' get-started7'
+ line 246: ' download1'
+ line 247: ' download2'
+ line 248: ' download3'
+ line 249: ' download4'
+ line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
+ line 252: ' loading), change the link to p5.min.js.'
+ line 253: ' download5'
+ line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
+ line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
+ line 257: ' download6'
+ line 260: ' environment1'
+ line 261: ' environmentlink'
+ line 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 278: ' environment10'
+ line 279: ' environment11'
+ line 280: ' Open the index.html file in your browser by double clicking on it in your'
+ line 436: ' Download'
+ line 437: ' download-intro'
+ line 438: ' Welcome! While titled "Download" this page actually contains a collection of'
+ line 439: ' links to either download the library or begin working with it online. We''ve'
+ line 440: ' tried to order things to reflect what a beginner might want first, to'
+ line 441: ' resources that more experienced programmers may be looking for.'
+ line 442: ' editor-title'
+ line 443: ' p5.js-editor'
+ line 444: ' p5.js-editor-intro'
+ line 445: ' This link redirects you to the p5.js Editor online so you can begin using'
+ line 446: ' p5.js immediately.'
+ line 447: ' editor-includes'
+ line 448: ' complete-library-title'
+ line 449: ' complete-library-intro1'
+ line 450: ' This is a download containing the p5.js library file, the p5.sound addon,'
+ line 451: ' and an example project. It does not contain an editor. Visit'
+ line 452: ' complete-library-intro2'
+ line 453: ' complete-library-intro3'
+ line 454: ' p5.js-complete'
+ line 455: ' includes-1'
+ line 456: ' includes-2'
+ line 457: ' includes-3'
+ line 458: ' single-files-title'
+ line 459: ' single-files-intro'
+ line 460: ' These are downloads or links to the p5.js library file. No additional'
+ line 461: ' contents are included.'
+ line 462: ' single-file'
+ line 463: ' p5.js-uncompressed'
+ line 464: ' compressed'
+ line 465: ' link'
+ line 466: ' statically-hosted-file'
+ line 467: ' etc-title'
+ line 468: ' older-releases'
+ line 469: ' github-repository'
+ line 470: ' report-bugs'
+ line 471: ' supported-browsers'
+ line 472: ' support-title'
+ line 473: ' support-options'
+ line 474: ' support-1'
+ line 475: ' p5.js is free, open-source software. We want to make our community as open'
+ line 476: ' and inclusive as possible. You can support this work by'
+ line 477: ' support-2'
+ line 478: ' support-3'
+ line 479: ' support-4'
+ line 480: ' support-5'
+ line 481: ' support-6'
+ line 482: ' support-7'
+ line 483: ' support-8'
+ line 484: ' support-9'
+ line 485: ' support-10'
+ line 486: ' support-11'
+ line 487: ' support-12'
+ line 488: ' Your membership supports software development (for p5.js, Processing,'
+ line 489: ' Processing.py, Processing for Android and ARM devices, education resources'
+ line 490: ' like code examples and tutorials,'
+ line 491: ' support-13'
+ line 492: ' support-14'
+ line 493: ' support-15'
+ line 494: ' support-16'
+ line 495: ' support-17'
+ line 496: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 497: ' Pittsburgh (Image credit'
+ line 498: ' support-18'
+ line 499: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
+ line 500: ' workshops in London (Image credit'
+ line 501: ' support-19'
+ line 502: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
+ line 503: ' Kira Simon-Kennedy)'
+ line 504: ' support-20'
+ line 505: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 506: ' (Image credit'
+ line 507: ' support-21'
+ line 508: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
+ line 509: ' credit'
+ line 510: ' support-22'
+ line 511: ' support-23'
+ line 512: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 513: ' (Image credit'
+ line 514: ' support-24'
+ line 515: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
+ line 516: ' workshop led by Taeyoon Choi (Image credit'
+ line 517: ' support-25'
+ line 518: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 519: ' Pittsburgh (Image credit'
+ line 520: ' support-26'
+ line 521: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
+ line 522: ' International Center of Photography (Image credit'
+ line 523: ' Photography)'
+ line 524: ' support-27'
+ line 525: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
+ line 526: ' Montoya-Moraga (Image credit'
+ line 527: ' support-28'
+ line 528: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
+ line 529: ' led by Taeyoon Choi (Image credit'
+ line 530: ' support-29'
+ line 531: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
+ line 532: ' Angeles (Image credit'
+ line 533: ' support-30'
+ line 534: ' support-31'
+ line 535: ' support-32'
+ line 536: ' support-33'
+ line 537: ' support-17-alt'
+ line 538: ' support-18-alt'
+ line 539: ' support-19-alt'
+ line 540: ' support-20-alt'
+ line 541: ' support-21-alt'
+ line 542: ' support-22-alt'
+ line 543: ' support-23-alt'
+ line 544: ' support-24-alt'
+ line 545: ' support-25-alt'
+ line 546: ' support-26-alt'
+ line 547: ' support-27-alt'
+ line 548: ' support-28-alt'
+ line 549: ' support-29-alt'
+ line 550: ' support-30-alt'
+ line 551: ' support-31-alt'
+ line 729: ' learn-title'
+ line 730: ' teach-title2'
+ line 731: ' learn1'
+ line 732: ' These tutorials provide more in-depth or step-by-step overviews of'
+ line 733: ' particular topics. Check out the '
+ line 734: ' learn2'
+ line 735: ' learn3'
+ line 736: ' introduction-to-p5js-title'
+ line 737: ' hello-p5js-title'
+ line 738: ' hello-p5js'
+ line 739: ' This short video will introduce you to the library and what you can do with'
+ line 740: ' it.'
+ line 741: ' getting-started-title'
+ line 742: ' getting-started'
+ line 743: ' Welcome to p5.js! This introduction covers the basics of setting up a'
+ line 744: ' p5.js project.'
+ line 745: ' p5js-overview-title'
+ line 746: ' p5js-overview'
+ line 747: ' p5js-processing-title'
+ line 748: ' p5js-processing'
+ line 749: ' The main differences between the two, and how to convert from one to the'
+ line 750: ' other.'
+ line 751: ' p5-screen-reader-title'
+ line 752: ' p5-screen-reader'
+ line 753: ' using-local-server-title'
+ line 754: ' using-local-server'
+ line 755: ' p5js-wiki-title'
+ line 756: ' p5js-wiki'
+ line 757: ' connecting-p5js-title'
+ line 758: ' creating-libraries-title'
+ line 759: ' creating-libraries'
+ line 760: ' nodejs-and-socketio-title'
+ line 761: ' nodejs-and-socketio'
+ line 762: ' programming-topics-title'
+ line 763: ' beyond-the-canvas-title'
+ line 764: ' beyond-the-canvas'
+ line 765: ' 3d-webgl-title'
+ line 766: ' 3d-webgl'
+ line 767: ' color-title'
+ line 768: ' color'
+ line 769: ' coordinate-system-and-shapes-title'
+ line 770: ' coordinate-system-and-shapes'
+ line 771: ' interactivity-title'
+ line 772: ' interactivity'
+ line 773: ' program-flow-title'
+ line 774: ' program-flow'
+ line 775: ' curves-title'
+ line 776: ' curves'
+ line 777: ' An introduction to the three types of curves in p5.js'
+ line 778: ' and Bézier curves.'
+ line 779: ' becoming-a-better-programmer-title'
+ line 780: ' debugging-title'
+ line 781: ' debugging'
+ line 782: ' optimizing-title'
+ line 783: ' optimizing'
+ line 784: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
+ line 785: ' and smoother.'
+ line 786: ' test-driven-development-title'
+ line 787: ' test-driven-development'
+ line 788: ' Save yourself from agony on install day. What is unit testing and how to use'
+ line 789: ' it? By Andy Timmons.'
+ line 790: ' contributing-to-the-community-title'
+ line 791: ' development-title'
+ line 792: ' development'
+ line 793: ' looking-inside-title'
+ line 794: ' looking-inside'
+ line 795: ' A friendly intro to the file structure and tools for p5.js development, by'
+ line 796: ' Luisa Pereira.'
+ line 797: ' writing-tutorial-title'
+ line 798: ' writing-tutorial'
+ line 799: ' writing-a-tutorial-title'
+ line 800: ' writing-a-tutorial-author'
+ line 801: ' writing-a-tutorial-1'
+ line 802: ' We invite educators, contributors and general enthusiasts to contribute p5js'
+ line 803: ' tutorials. The p5js project makes creative coding and open source'
+ line 804: ' development more accessible to a diverse community and we are excited to'
+ line 805: ' publish tutorials on all aspects of the development process. Our learning'
+ line 806: ' materials so far include guides on learning p5, programming technique and'
+ line 807: ' how to contribute to an open source project.'
+ line 808: ' writing-a-tutorial-2'
+ line 809: ' We welcome new written tutorial contributions and this guide outlines the'
+ line 810: ' steps of how to propose, prepare and contribute.'
+ line 811: ' writing-a-tutorial-how-start-title'
+ line 812: ' writing-a-tutorial-how-start-1'
+ line 813: ' writing-a-tutorial-how-start-2'
+ line 814: ' writing-a-tutorial-how-start-3'
+ line 815: ' that outlines in progress tutorials. If your topic is listed as in progress,'
+ line 816: ' perhaps you can add to work being done and contribute to preparing existing'
+ line 817: ' work for publication so please reach out to us.'
+ line 818: ' writing-a-tutorial-how-start-4'
+ line 819: ' If your topic is not already covered and is not listed as in progress,'
+ line 820: ' please write a few sentences on what you propose to cover and email us this'
+ line 821: ' description at education@p5js.org.'
+ line 822: ' writing-a-tutorial-how-prepare-title'
+ line 823: ' writing-a-tutorial-how-prepare-1'
+ line 824: ' When your tutorial is ready for publication, please follow these steps to'
+ line 825: ' prepare your content for the p5js website.'
+ line 826: ' writing-a-tutorial-how-prepare-2'
+ line 827: ' writing-a-tutorial-how-prepare-3'
+ line 828: ' writing-a-tutorial-how-prepare-4'
+ line 829: ' writing-a-tutorial-how-prepare-5'
+ line 830: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
+ line 831: ' of the p5js site. The file called index.hbs is the '
+ line 832: ' writing-a-tutorial-how-prepare-6'
+ line 833: ' writing-a-tutorial-how-prepare-7'
+ line 834: ' writing-a-tutorial-how-prepare-8'
+ line 835: ' writing-a-tutorial-how-prepare-9'
+ line 836: ' tags on the page, with formatting defined by the <h1> and <h2>'
+ line 837: ' tags, the <p> paragraph tags as is done shown on the'
+ line 838: ' writing-a-tutorial-how-prepare-10'
+ line 839: ' writing-a-tutorial-how-prepare-11'
+ line 840: ' If your tutorial contains images, they are to be placed in the assets folder'
+ line 841: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
+ line 842: ' shown below.'
+ line 843: ' writing-a-tutorial-how-prepare-12'
+ line 844: ' writing-a-tutorial-embedding-title'
+ line 845: ' writing-a-tutorial-embedding-1'
+ line 846: ' Using p5js means you can illustrate your tutorial with animated, interactive'
+ line 847: ' or editable code examples to demonstrate programming concepts. Your examples'
+ line 848: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
+ line 849: ' in two ways.'
+ line 850: ' writing-a-tutorial-embedding-2'
+ line 851: ' writing-a-tutorial-embedding-3'
+ line 852: ' writing-a-tutorial-embedding-4'
+ line 853: ' writing-a-tutorial-embedding-5'
+ line 854: ' writing-a-tutorial-embedding-6'
+ line 855: ' writing-a-tutorial-embedding-7'
+ line 856: ' writing-a-tutorial-embedding-8'
+ line 857: ' writing-a-tutorial-embedding-9'
+ line 858: ' writing-a-tutorial-embedding-10'
+ line 859: ' If the example is to be animated and/or interactive but not editable. The'
+ line 860: ' p5.js sketch should be embedded into the page as an iframe as described'
+ line 861: ' below.'
+ line 862: ' writing-a-tutorial-iframe-title'
+ line 863: ' writing-a-tutorial-iframe-1'
+ line 864: ' An iframe is like creating a window through which you can explore another'
+ line 865: ' page, sandboxed from the rest of your page. In this case it will be a window'
+ line 866: ' to the index.html containing your p5.js sketch. '
+ line 867: ' writing-a-tutorial-iframe-2'
+ line 868: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
+ line 869: ' folder labelled with the name of your sketch as shown in the screenshot.'
+ line 870: ' This is where all the images and p5 sketches linked by iframe should be'
+ line 871: ' stored.'
+ line 872: ' writing-a-tutorial-iframe-3'
+ line 873: ' In the subfolders containing your p5 examples there should be a sketch.js'
+ line 874: ' file and the embed.html file for the sketch. '
+ line 876: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 877: ' the site. If your file structure is the same as above, the path to the p5.js'
+ line 878: ' library should be "../../../js/p5.min.js".'
+ line 879: ' writing-a-tutorial-iframe-5'
+ line 880: ' You can then embed the p5js index files as iframes in the .hbs file that'
+ line 881: ' contains your tutorial content. The embed code for the iframe would then'
+ line 882: ' be'
+ line 883: ' writing-a-tutorial-iframe-6'
+ line 884: ' Styling for the iframe (this could directly into the post or in a'
+ line 885: ' stylesheet)'
+ line 886: ' writing-a-tutorial-iframe-7'
+ line 887: ' writing-a-tutorial-iframe-8'
+ line 888: ' writing-a-tutorial-iframe-9'
+ line 889: ' One thing to note is that you need to manually set the size of the iframe,'
+ line 890: ' so it works best if things are a standard size.'
+ line 891: ' writing-a-tutorial-iframe-10'
+ line 892: ' Also note that the links to the p5.js library files do not happen from the'
+ line 893: ' .eps page with all the tutorial content. Instead they will be located in the'
+ line 894: ' html page that is rendering your sketch (in this case, called embed.html).'
+ line 895: ' writing-a-tutorial-iframe-11'
+ line 896: ' writing-a-tutorial-embed-iframe-12'
+ line 897: ' writing-a-tutorial-finishing-title'
+ line 898: ' writing-a-tutorial-finishing-1'
+ line 899: ' Once your have finished writing your tutorial and your content has been'
+ line 900: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
+ line 901: ' as described above and then issue a pull request to the p5.js website'
+ line 902: ' repository so we can publish your contribution!'
+ line 903: ' writing-a-tutorial-finishing-2'
+ line 904: ' color-description1'
+ line 905: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
+ line 906: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
+ line 907: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
+ line 908: ' color-description2'
+ line 909: ' color-p1x1'
+ line 910: ' In the digital world, when we want to talk about a color, precision is'
+ line 911: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
+ line 912: ' Color, rather, is defined as a range of numbers. Let''s start with the'
+ line 913: ' simplest case'
+ line 914: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
+ line 915: ' gray ranging from black to white.'
+ line 916: ' color-p2x1'
+ line 917: ' color-p2x2'
+ line 918: ' color-p2x3'
+ line 919: ' color-p2x4'
+ line 920: ' color-code1'
+ line 921: ' background(255); // Setting the background to white '
+ line 922: ' stroke(0); // Setting the outline (stroke) to black '
+ line 923: ' fill(150); // Setting the interior of a shape (fill) to grey '
+ line 924: ' rect(50,50,75,100); // Drawing the rectangle'
+ line 925: ' color-p3x1'
+ line 926: ' color-p3x2'
+ line 927: ' color-p3x3'
+ line 928: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
+ line 929: ' important to remember that 0 is not "nothing", but rather denotes the color'
+ line 930: ' black. Also, remember not to eliminate both—with '
+ line 931: ' color-p3x4'
+ line 932: ' color-p3x5'
+ line 933: ' color-p4x1'
+ line 934: ' In addition, if we draw two shapes, p5.js will always use the most recently'
+ line 935: ' specified stroke and fill, reading the code from top to bottom.'
+ line 936: ' color-rgb-title'
+ line 937: ' color-rgb-p1x1'
+ line 938: ' Remember finger painting? By mixing three "primary" colors, any color could'
+ line 939: ' be generated. Swirling all colors together resulted in a muddy brown. The'
+ line 940: ' more paint you added, the darker it got. Digital colors are also constructed'
+ line 941: ' by mixing three primary colors, but it works differently from paint. First,'
+ line 942: ' the primaries are different'
+ line 943: ' with color on the screen, you are mixing light, not paint, so the mixing'
+ line 944: ' rules are different as well.'
+ line 945: ' color-rgb-li1'
+ line 946: ' color-rgb-li2'
+ line 947: ' color-rgb-li3'
+ line 948: ' color-rgb-li4'
+ line 949: ' color-rgb-li5'
+ line 950: ' color-rgb-p2x1'
+ line 951: ' This assumes that the colors are all as bright as possible, but of course,'
+ line 952: ' you have a range of color available, so some red plus some green plus some'
+ line 953: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
+ line 954: ' While this may take some getting used to, the more you program and'
+ line 955: ' experiment with RGB color, the more it will become instinctive, much like'
+ line 956: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
+ line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
+ line 958: ' the individual color elements are expressed as ranges from 0 (none of that'
+ line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
+ line 960: ' and B. You will get the hang of RGB color mixing through experimentation,'
+ line 961: ' but next we will cover some code using some common colors.'
+ line 962: ' color-transparency-title'
+ line 963: ' color-transparency-p1x1'
+ line 964: ' In addition to the red, green, and blue components of each color, there is'
+ line 965: ' an additional optional fourth component, referred to as the color''s "alpha".'
+ line 966: ' Alpha means transparency and is particularly useful when you want to draw'
+ line 967: ' elements that appear partially see-through on top of one another. The alpha'
+ line 968: ' values for an image are sometimes referred to collectively as the "alpha'
+ line 969: ' channel" of an image.'
+ line 970: ' color-transparency-p2x1'
+ line 971: ' It is important to realize that pixels are not literally transparent, this'
+ line 972: ' is simply a convenient illusion that is accomplished by blending colors.'
+ line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
+ line 974: ' one to a percentage of another, creating the optical perception of blending.'
+ line 975: ' (If you are interested in programming "rose-colored" glasses, this is where'
+ line 976: ' you would begin.)'
+ line 977: ' color-transparency-p3x1'
+ line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
+ line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
+ line 980: ' color-custom-ranges-title'
+ line 981: ' color-custom-ranges-p1x1'
+ line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
+ line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For'
+ line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
+ line 985: ' percentage). You can do this by specifying a custom '
+ line 986: ' color-custom-ranges-p2x1'
+ line 987: ' The above function says'
+ line 988: ' green, and blue. The range of RGB values will be from 0 to 100."'
+ line 989: ' color-custom-ranges-p3x1'
+ line 990: ' Although it is rarely convenient to do so, you can also have different'
+ line 991: ' ranges for each color component'
+ line 992: ' color-custom-ranges-p4x1'
+ line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
+ line 994: ' from 0 to 10, and alpha from 0 to 255."'
+ line 995: ' color-custom-ranges-p5x1'
+ line 996: ' Finally, while you will likely only need RGB color for all of your'
+ line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
+ line 998: ' and brightness) mode. Without getting into too much detail, HSB color works'
+ line 999: ' as follows'
+ line 1000: ' color-custom-ranges-li1x1'
+ line 1001: ' color-custom-ranges-li1x2'
+ line 1002: ' color-custom-ranges-li2x1'
+ line 1003: ' color-custom-ranges-li2x2'
+ line 1004: ' color-custom-ranges-li3x1'
+ line 1005: ' color-custom-ranges-li3x2'
+ line 1006: ' color-custom-ranges-p6x1'
+ line 1007: ' color-custom-ranges-p6x2'
+ line 1008: ' coordinate-system-description1'
+ line 1009: ' coordinate-system-description2'
+ line 1010: ' coordinate-system-description3'
+ line 1011: ' coordinate-system-description4'
+ line 1012: ' coordinate-system-description5'
+ line 1013: ' coordinate-system-description-title'
+ line 1014: ' coordinate-system-description-p1x1'
+ line 1015: ' Before we begin programming with p5, we must first channel our eighth grade'
+ line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
+ line 1017: ' distance between two points is a good old fashioned line, and this is where'
+ line 1018: ' we begin, with two points on that graph paper.'
+ line 1019: ' coordinate-system-description-p2x1'
+ line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
+ line 1021: ' you wanted to direct a friend of yours to draw that same line, you would'
+ line 1022: ' give them a shout and say "draw a line from the point one-zero to the point'
+ line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer'
+ line 1024: ' and you wanted to instruct this digital pal to display that same line on its'
+ line 1025: ' screen. The same command applies (only this time you can skip the'
+ line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,'
+ line 1027: ' the instruction will look like this'
+ line 1028: ' coordinate-system-description-p3x1'
+ line 1029: ' Even without having studied the syntax of writing code, the above statement'
+ line 1030: ' should make a fair amount of sense. We are providing a command (which we'
+ line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In'
+ line 1032: ' addition, we are specifying some arguments for how that line should be'
+ line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
+ line 1034: ' code as a sentence, the function is a verb and the arguments are the objects'
+ line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a'
+ line 1036: ' period.'
+ line 1037: ' coordinate-system-description-p4x1'
+ line 1038: ' The key here is to realize that the computer screen is nothing more than a'
+ line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
+ line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
+ line 1041: ' location of a point in space. And it is our job to specify what shapes and'
+ line 1042: ' colors should appear at these pixel coordinates.'
+ line 1043: ' coordinate-system-description-p5x1'
+ line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
+ line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
+ line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,'
+ line 1047: ' negative down and to the left). The coordinate system for pixels in a'
+ line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
+ line 1049: ' at the top left with the positive direction to the right horizontally and'
+ line 1050: ' down vertically.'
+ line 1051: ' coordinate-system-simple-shapes-title'
+ line 1052: ' coordinate-system-simple-shapes-p1x1'
+ line 1053: ' The vast majority of p5 programming examples are visual in nature. These'
+ line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
+ line 1055: ' begin by looking at four primitive shapes.'
+ line 1056: ' coordinate-system-simple-shapes-p2x1'
+ line 1057: ' For each shape, we will ask ourselves what information is required to'
+ line 1058: ' specify the location and size (and later color) of that shape and learn how'
+ line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
+ line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.'
+ line 1061: ' coordinate-system-simple-shapes-p3x1'
+ line 1062: ' coordinate-system-simple-shapes-p3x2'
+ line 1063: ' coordinate-system-simple-shapes-p4x1'
+ line 1064: ' coordinate-system-simple-shapes-p4x2'
+ line 1065: ' coordinate-system-simple-shapes-p5x1'
+ line 1066: ' coordinate-system-simple-shapes-p5x2'
+ line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by'
+ line 1068: ' the coordinate for the top left corner of the rectangle, as well as its'
+ line 1069: ' width and height.'
+ line 1070: ' coordinate-system-simple-shapes-p6x1'
+ line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along'
+ line 1072: ' with width and height. If we prefer this method, we first indicate that we'
+ line 1073: ' want to use the '
+ line 1074: ' coordinate-system-simple-shapes-p6x2'
+ line 1075: ' coordinate-system-simple-shapes-p7x1'
+ line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner'
+ line 1077: ' and the bottom right corner). The mode here is '
+ line 1078: ' coordinate-system-simple-shapes-p7x2'
+ line 1079: ' coordinate-system-simple-shapes-p8x1'
+ line 1080: ' coordinate-system-simple-shapes-p8x2'
+ line 1081: ' coordinate-system-simple-shapes-p8x3'
+ line 1082: ' coordinate-system-simple-shapes-p8x4'
+ line 1083: ' coordinate-system-simple-shapes-p8x5'
+ line 1084: ' coordinate-system-simple-shapes-p8x6'
+ line 1085: ' coordinate-system-simple-shapes-p9x1'
+ line 1086: ' Now let''s look at what some code with shapes in more complete form, with'
+ line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
+ line 1088: ' to specify the width and height of the canvas.'
+ line 1089: ' teach-desc'
+ line 1090: test-tutorial
+ line 1147: ' Libraries'
+ line 1148: ' core-libraries'
+ line 1149: ' community-libraries'
+ line 1150: ' libraries-created-by'
+ line 1151: ' p5.sound'
+ line 1152: ' p5.sound extends p5 with Web Audio functionality including audio input,'
+ line 1153: ' playback, analysis and synthesis.'
+ line 1154: ' p5.accessibility'
+ line 1155: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
+ line 1156: ' and visually impaired.'
+ line 1157: ' asciiart'
+ line 1158: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
+ line 1159: ' p5js.'
+ line 1160: ' p5.ble'
+ line 1161: ' A Javascript library that enables communication between BLE devices and p5'
+ line 1162: ' sketches.'
+ line 1163: ' blizard.js'
+ line 1164: ' p5.bots'
+ line 1165: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
+ line 1166: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
+ line 1167: ' drive LEDs, motors, and more!'
+ line 1168: ' p5.clickable'
+ line 1169: ' p5.cmyk.js'
+ line 1170: ' p5.collide2D'
+ line 1171: ' p5.collide2D provides tools for calculating collision detection for 2D'
+ line 1172: ' geometry with p5.js.'
+ line 1173: ' p5.createloop'
+ line 1174: ' p5.dimensions'
+ line 1175: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
+ line 1176: ' dimensions.'
+ line 1177: ' p5.EasyCam'
+ line 1178: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
+ line 1179: ' contributions by Thomas Diewald.'
+ line 1180: ' p5.experience'
+ line 1181: ' Extensive library for p5.js that adds additional event-listening'
+ line 1182: ' functionality for creating canvas-based web applications.'
+ line 1183: ' p5.func'
+ line 1184: ' p5.func is a p5 extension that provides new objects and utilities for'
+ line 1185: ' function generation in the time, frequency, and spatial domains.'
+ line 1186: ' p5.geolocation'
+ line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
+ line 1188: ' geofencing user locations for p5.js.'
+ line 1189: ' p5.gibber'
+ line 1190: ' grafica.js'
+ line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your'
+ line 1192: ' p5.js sketches.'
+ line 1193: ' p5.gui'
+ line 1194: ' p5.localmessage'
+ line 1195: ' p5.localmessage provides a simple interface to send messages locally from'
+ line 1196: ' one sketch to another for easy multi-window sketching!'
+ line 1197: ' marching'
+ line 1198: ' mappa'
+ line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and'
+ line 1200: ' geo-data. Useful when building geolocation-based visual representations.'
+ line 1201: ' ml5.js'
+ line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
+ line 1203: ' learning algorithms and models in the browser.'
+ line 1204: ' p5.play'
+ line 1205: ' p5.play provides sprites, animations, input and collision functions for'
+ line 1206: ' games and gamelike applications.'
+ line 1207: ' p5.particle'
+ line 1208: ' The Particle and Fountain objects can be used to create data-driven effects'
+ line 1209: ' that are defined through user structures or JSON input and user-draw'
+ line 1210: ' functions.'
+ line 1211: ' p5.Riso'
+ line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.'
+ line 1213: ' It helps turn your sketches into multi-color prints.'
+ line 1214: ' rita.js'
+ line 1215: ' RiTa.js provides a set of natural language processing objects for generative'
+ line 1216: ' literature.'
+ line 1217: ' Rotating knobs'
+ line 1218: ' p5.scenemanager'
+ line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
+ line 1220: ' Each scene is a like a sketch within the main sketch.'
+ line 1221: ' p5.screenPosition'
+ line 1222: ' p5.scribble'
+ line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
+ line 1224: ' on a port of the original Processing library'
+ line 1225: ' p5.serial'
+ line 1226: ' p5.serial enables serial communication between devices that support serial'
+ line 1227: ' (RS-232) and p5 sketches running in the browser.'
+ line 1228: ' Shape5'
+ line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to'
+ line 1230: ' code for the first time.'
+ line 1231: ' p5.shape.js'
+ line 1232: ' p5.speech'
+ line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech'
+ line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
+ line 1235: ' and listen.'
+ line 1236: ' p5.start2d.js'
+ line 1237: ' p5.tiledmap'
+ line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your'
+ line 1239: ' sketches.'
+ line 1240: ' p5.touchgui'
+ line 1241: ' tramontana'
+ line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,'
+ line 1243: ' tramontana Board, ...) to create interactive environments, interactive'
+ line 1244: ' spaces or just prototype experiences at scale and in space.'
+ line 1245: ' vida'
+ line 1246: ' Vida is a simple library that adds camera (or video) based motion detection'
+ line 1247: ' and blob tracking functionality to p5js.'
+ line 1248: ' p5.voronoi'
+ line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
+ line 1250: ' your p5.js sketches.'
+ line 1251: ' p5.3D'
+ line 1252: ' using-a-library-title'
+ line 1253: ' using-a-library1'
+ line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
+ line 1255: ' core functionality. There are two categories of libraries. Core libraries ('
+ line 1256: ' using-a-library3'
+ line 1257: ' ) are part of the p5.js distribution, while contributed libraries are'
+ line 1258: ' developed, owned, and maintained by members of the p5.js community.'
+ line 1259: ' using-a-library4'
+ line 1260: ' To include a library in your sketch, link it into your HTML file, after you'
+ line 1261: ' have linked in p5.js. An example HTML file might look like this'
+ line 1262: ' create-your-own-title'
+ line 1263: ' create-your-own1'
+ line 1264: ' create-your-own2'
+ line 1265: ' create-your-own3'
+ line 1266: ' create-your-own4'
+ line 1267: ' If you have created a library and would like to have it included on this'
+ line 1268: ' page, submit this form!'
+ line 1420: ' community-title'
+ line 1421: ' community-statement-title'
+ line 1422: ' community-statement1'
+ line 1423: ' p5.js is a community interested in exploring the creation of art and design'
+ line 1424: ' with technology.'
+ line 1425: ' community-statement2'
+ line 1426: ' We are a community of, and in solidarity with, people from every gender'
+ line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political'
+ line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that'
+ line 1430: ' not everyone has the time, financial means, or capacity to actively'
+ line 1431: ' participate, but we recognize and encourage involvement of all kinds. We'
+ line 1432: ' facilitate and foster access and empowerment. We are all learners.'
+ line 1433: ' community-statement3'
+ line 1434: ' We like these hashtags'
+ line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
+ line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
+ line 1437: ' course).'
+ line 1438: ' in-practice-title'
+ line 1439: ' in-practice1'
+ line 1440: ' in-practice2'
+ line 1441: ' We insist on actively engaging with requests for feedback regardless of'
+ line 1442: ' their complexity.'
+ line 1443: ' in-practice3'
+ line 1444: ' We welcome newcomers and prioritize the education of others. We strive to'
+ line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
+ line 1446: ' that newcomers are just as valuable in this effort as experts.'
+ line 1447: ' in-practice4'
+ line 1448: ' We consistently make the effort to actively recognize and validate multiple'
+ line 1449: ' types of contributions.'
+ line 1450: ' in-practice5'
+ line 1451: ' in-times-conflict-title'
+ line 1452: ' in-times-conflict1'
+ line 1453: ' in-times-conflict2'
+ line 1454: ' in-times-conflict3'
+ line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our'
+ line 1456: ' actions.'
+ line 1457: ' in-times-conflict4'
+ line 1458: ' in-times-conflict5'
+ line 1459: ' in-times-conflict6'
+ line 1460: ' in-times-conflict7'
+ line 1461: ' in-the-future-title'
+ line 1462: ' in-the-future1'
+ line 1463: ' notes-title'
+ line 1464: ' notes1'
+ line 1465: ' notes2'
+ line 1466: ' notes3'
+ line 1467: ' notes4'
+ line 1468: ' notes5'
+ line 1469: ' contribute-title'
+ line 1470: ' contribute1'
+ line 1471: ' Our community is always looking for enthusiasts to help in all different'
+ line 1472: ' ways.'
+ line 1473: ' develop-title'
+ line 1474: ' develop1'
+ line 1475: ' develop2'
+ line 1476: ' develop3'
+ line 1477: ' develop4'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1536: ' 2015contributors-conference-diversity4'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1544: ' 2015cc_1'
+ line 1634: ' 2019cc_8'
+ line 1635: ' 2019cc_9'
+ line 1636: ' Participant speaks at a podium in front of projected text about the problem'
+ line 1637: ' with anonymyzing data'
+ line 1638: ' 2019cc_10'
+ line 1639: ' Person with a microphone speaking to fellow participants in front of text'
+ line 1640: ' that reads p5.js will not add any new features except those that increase'
+ line 1641: ' access'
+ line 1642: ' 2019cc_11'
+ line 1643: ' 2019cc_12'
+ line 1644: ' 2019cc_13'
+ line 1645: ' 2019cc_14'
+ line 1646: ' 2019cc_15'
+ line 1647: ' Woman with microphone speaking to fellow participants with the text sacred'
+ line 1648: ' boundaries in the projection behind her'
+ line 1649: ' 2019cc_16'
+ line 1650: ' Overhead view of participants listening to a panel of people with an image'
+ line 1651: ' of a 3d rendered man on it'
+ line 1652: ' 2019cc_17'
+ line 1653: ' Participants sit around a table with their laptops and observe code on a'
+ line 1654: ' screen'
+ line 1655: ' 2019cc_18'
+ line 1656: ' 2019cc_19'
+ line 1657: ' 2019cc_20'
+ line 1658: ' 2019cc_21'
+ line 1659: ' 2019cc_22'
+ line 1660: ' Participants sitting around a large U shaped table looking towards the front'
+ line 1661: ' of the classroom'
+ line 1662: ' 2019cc_23'
+ line 1663: ' Man sitting in front of the classroom speaking energetically into a'
+ line 1664: ' microphone'
+ line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
+ line 1738: ' book-3-authors'
+ line 1739: ' book-3-publisher'
+ line 1740: ' book-3-pages'
+ line 1741: ' book-3-type'
+ line 1742: ' book-3-description'
+ line 1743: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1744: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1745: ' furniture to complex and elegant infographics.'
+ line 1746: ' book-3-order-a'
+ line 1747: ' book-3-order-b'
+ line 1748: ' book-4-title'
+ line 1749: ' book-4-authors'
+ line 1750: ' book-4-publisher'
+ line 1751: ' book-4-pages'
+ line 1752: ' book-4-type'
+ line 1753: ' book-4-description'
+ line 1754: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1755: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1756: ' furniture to complex and elegant infographics.'
+ line 1757: ' book-4-order-a'
+ line 1758: ' book-4-order-b'
+ line 1759: ' book-5-title'
+ line 1760: ' book-5-authors'
+ line 1761: ' book-5-publisher'
+ line 1762: ' book-5-pages'
+ line 1763: ' book-5-type'
+ line 1764: ' book-5-description'
+ line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
+ line 1800: ' Examples'
+ line 1801: ' back-examples'
+ line 1802: ' Structure'
+ line 1803: ' Form'
+ line 1804: ' Data'
+ line 1805: ' Arrays'
+ line 1806: ' Control'
+ line 1807: ' Image'
+ line 1808: ' Color'
+ line 1809: ' Math'
+ line 1810: ' Simulate'
+ line 1811: ' Interaction'
+ line 1812: ' Objects'
+ line 1813: ' Lights'
+ line 1814: ' Motion'
+ line 1815: ' Instance_Mode'
+ line 1816: ' Dom'
+ line 1817: ' Drawing'
+ line 1818: ' Transform'
+ line 1819: ' Typography'
+ line 1820: ' 3D'
+ line 1821: ' Input'
+ line 1822: ' Advanced_Data'
+ line 1823: ' Sound'
+ line 1824: ' Mobile'
+ line 1825: ' Hello_P5'
+ line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
+ line 2518: ' teach-case11-title'
+ line 2519: ' teach-case11-lead-name'
+ line 2520: ' teach-case11-content1'
+ line 2521: ' teach-case11-content1-1'
+ line 2522: ' teach-case11-content2'
+ line 2523: ' teach-case11-content3'
+ line 2524: ' teach-case11-content4'
+ line 2525: ' Over the course of three workshops, we will draw and create patterns using'
+ line 2526: ' p5.js, an open-source graphical library; we will learn and apply'
+ line 2527: ' computational concepts to transform patterns and finally, we will bring a'
+ line 2528: ' weaving to life with electronic microcontrollers.'
+ line 2529: ' teach-case11-content5'
+ line 2530: ' teach-case11-content5-1'
+ line 2531: ' Materials'
+ line 2532: ' pattern weaving tool.'
+ line 2533: ' teach-case11-content5-2'
+ line 2534: ' teach-case11-content5-3'
+ line 2535: ' teach-case11-content5-4'
+ line 2536: ' teach-case11-content5-5'
+ line 2537: ' teach-case12-title'
+ line 2538: ' teach-case12-lead-name'
+ line 2539: ' teach-case12-speech'
+ line 2540: ' I''m working on a new series of coding class for Disabled students in South'
+ line 2541: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 2542: ' workshops in December 2020. The project is supported by the Open Society'
+ line 2543: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 2544: ' Center.'
+ line 2545: ' teach-case12-content1'
+ line 2546: ' teach-case12-content1-1'
+ line 2547: ' teach-case12-content2'
+ line 2548: ' teach-case12-content3'
+ line 2549: ' teach-case12-content4'
+ line 2550: ' To help Deaf and Hard of Hearing students learn about computer programming'
+ line 2551: ' through playful exercises. To make ASL tutorial of basic coding concepts.'
+ line 2552: ' teach-case12-content5'
+ line 2553: ' We used p5.js Web editor and code examples on the website. We also used'
+ line 2554: ' dice, playing cards and various paper tools to help students learn about'
+ line 2555: ' coding concepts.'
+ line 2556: ' teach-case12-content5-1'
+ line 2557: ' teach-case12-content5-2'
+ line 598: ' color-custom-ranges-li1x2'
+ line 601: ' color-custom-ranges-li2x2'
+ line 604: ' color-custom-ranges-li3x2'
zh-Hans:
src/data/en.yml:
- line 927: ' teach-case2-content5-1'
- line 928: ' teach-case2-content5-2'
- line 917: ' teach-case1-content1-1'
- line 929: ' teach-case2-content5-3'
- line 930: ' teach-case2-content5-4'
- line 931: ' teach-case2-content5-5'
- line 932: ''
- line 933: ' teach-case3-title'
- line 934: ' teach-case3-lead-name'
- line 935: ' teach-case3-speech'
- line 936: ' teach-case3-content1'
- line 937: ' teach-case3-content1-1'
- line 938: ' teach-case3-content2'
- line 939: ' teach-case3-content3'
- line 940: ' teach-case3-content4'
- line 941: ' teach-case3-content5'
- line 942: ' teach-case3-content5-1'
- line 943: ' teach-case3-content5-2'
- line 944: ' teach-case3-content5-3'
- line 945: ''
- line 946: ' teach-case4-title'
- line 947: ' teach-case4-lead-name'
- line 948: ' teach-case4-speech'
- line 949: ' teach-case4-content1'
- line 950: ' teach-case4-content1-1'
- line 951: ' teach-case4-content2'
- line 952: ' teach-case4-content3'
- line 953: ' teach-case4-content4'
- line 954: ' teach-case4-content5'
- line 955: ' teach-case4-content5-1'
- line 956: ' teach-case4-content5-2'
- line 957: ' teach-case4-content5-3'
- line 958: ' teach-case4-content5-4'
- line 959: ' '
- line 960: ' teach-case5-title'
- line 961: ' teach-case5-lead-name'
- line 962: ' teach-case5-speech'
- line 963: ' teach-case5-content1'
- line 964: ' teach-case5-content1-1'
- line 965: ' teach-case5-content1-2'
- line 966: ' teach-case5-content1-3'
- line 967: ' teach-case5-content2'
- line 968: ' teach-case5-content3'
- line 969: ' teach-case5-content4'
- line 970: ' teach-case5-content5'
- line 971: ' teach-case5-content5-1'
- line 972: ' teach-case5-content5-2'
- line 973: ' teach-case5-content5-3'
- line 974: ' '
- line 975: ' teach-case6-title'
- line 976: ' teach-case6-lead-name'
- line 977: ' teach-case6-speech'
- line 978: ' teach-case6-content1'
- line 979: ' teach-case6-content1-1'
- line 980: ' teach-case6-content2'
- line 981: ' teach-case6-content3'
- line 982: ' teach-case6-content4'
- line 983: ' teach-case6-content5'
- line 984: ' teach-case6-content5-1'
- line 985: ' teach-case6-content5-2'
- line 986: ' teach-case6-content5-3'
- line 987: ' teach-case6-content5-4'
- line 988: ' teach-case6-content5-5'
- line 989: ''
- line 990: ' teach-case7-title'
- line 991: ' teach-case7-lead-name'
- line 992: ' teach-case7-speech'
- line 993: ' teach-case7-content1'
- line 994: ' teach-case7-content1-1'
- line 995: ' teach-case7-content2'
- line 996: ' teach-case7-content3'
- line 997: ' teach-case7-content4'
- line 998: ' teach-case7-content5'
- line 999: ' teach-case7-content5-1'
- line 1000: ' '
- line 1001: ' teach-case8-title'
- line 1002: ' teach-case8-lead-name'
- line 1003: ' teach-case8-content1'
- line 1004: ' teach-case8-content1-1'
- line 1005: ' teach-case8-content2'
- line 1006: ' teach-case8-content3'
- line 1007: ' teach-case8-content4'
- line 1008: ' teach-case8-content5'
- line 1009: ' teach-case8-content5-1'
- line 1010: ' teach-case8-content5-2'
- line 1011: ' '
- line 1012: ' teach-case9-title'
- line 1013: ' teach-case9-lead-name'
- line 1014: ' teach-case9-content1'
- line 1015: ' teach-case9-content1-1'
- line 1016: ' teach-case9-content2'
- line 1017: ' teach-case9-content3'
- line 1018: ' teach-case9-content4'
- line 1019: ' teach-case9-content5'
- line 1020: ' teach-case9-content5-1'
- line 1021: ' teach-case9-content5-2'
- line 1022: ' teach-case9-content5-3'
- line 1023: ''
- line 1024: ' teach-case10-title'
- line 1025: ' teach-case10-lead-name'
- line 1026: ' teach-case10-content1'
- line 1027: ' teach-case10-content3'
- line 1028: ' teach-case10-content4'
- line 1029: ' teach-case10-content5'
- line 1030: ' teach-case10-content5-1'
- line 1031: ' teach-case10-content5-2'
- line 1032: ' '
- line 1033: ' teach-case11-title'
- line 1034: ' teach-case11-lead-name'
- line 1035: ' teach-case11-content1'
- line 1036: ' teach-case11-content1-1'
- line 1037: ' teach-case11-content2'
- line 1038: ' teach-case11-content3'
- line 1039: ' teach-case11-content4'
- line 1040: ' teach-case11-content5'
- line 1041: ' teach-case11-content5-1'
- line 1042: ' teach-case11-content5-2'
- line 1043: ' teach-case11-content5-3'
- line 1044: ' teach-case11-content5-4'
- line 1045: ' teach-case11-content5-5'
- line 1046: ''
- line 1047: ' teach-case12-title'
- line 1048: ' teach-case12-lead-name'
- line 1049: ' teach-case12-speech'
- line 1050: ' teach-case12-content1'
- line 1051: ' teach-case12-content1-1'
- line 1052: ' teach-case12-content2'
- line 1053: ' teach-case12-content3'
- line 1054: ' teach-case12-content4'
- line 1055: ' teach-case12-content5'
- line 1056: ' teach-case12-content5-1'
- line 1057: ' teach-case12-content5-2'
- line 919: ' teach-case1-title'
- line 920: ' teach-case1-lead-name'
- line 921: ' teach-case1-content1'
- line 922: ' teach-case1-content1-1'
- line 923: ' teach-case1-content2'
- line 924: ' teach-case1-content3'
- line 925: ' teach-case1-content4'
- line 926: ' teach-case1-content5'
- line 270: ' teach-filter1-label7'
- line 271: ' teach-filter1-label8'
- line 272: ' teach-filter1-label9'
- line 273: ' teach-filter1-label10'
- line 282: ' teach-filter2-label1'
- line 283: ' teach-filter2-label2'
- line 284: ' teach-filter2-label3'
- line 285: ' teach-filter2-label4'
- line 286: ' teach-filter2-label5'
- line 287: ' teach-filter2-label6'
- line 288: ' teach-filter2-label7'
- line 289: ''
- line 290: ' teach-filter3'
- line 291: ''
- line 292: ' teach-filter4'
- line 293: ' teach-filter4-label1'
- line 294: ' teach-filter4-label2'
- line 295: ' teach-filter4-label3'
- line 296: ''
- line 297: ' teach-case-subtitle1'
- line 298: ' teach-case-subtitle2'
- line 299: ' teach-case-subtitle3'
- line 300: ' teach-case-subtitle4'
- line 301: ' teach-case-subtitle5'
- line 302: ''
- line 303: ' teach-case1-content1'
- line 304: ' teach-case1-content2'
- line 305: ' teach-case1-content3'
- line 306: ' teach-case1-content4'
- line 307: ' teach-case1-content5'
- line 240: ' teach-desc'
- line 258: ' teach-intro2'
- line 269: ' teach-filter1-label6'
- line 281: ' teach-filter2'
- line 259: ' teach-intro3'
- line 274: ' teach-filter1-label11'
- line 55: ' sketch_info'
- line 54: ' sketch_credits'
- line 243: ' learn-title'
- line 256: teach
- line 37: ' blmstatement1'
- line 62: ' project-a-5-2-moon'
- line 45: ' '
+ line 1517: ' teach-case1-title'
+ line 1527: ' teach-case2-content5-1'
+ line 1528: ' teach-case2-content5-2'
+ line 1537: ' teach-case4-title'
+ line 1545: ' teach-case13-title'
+ line 1546: ' teach-case13-lead-name'
+ line 1547: ' teach-case13-speech'
+ line 1548: ' I''m working on a new series of coding class for Disabled students in South'
+ line 1549: ' Korea. I''m researching about the pedagogy and translation. I plan to hold'
+ line 1550: ' workshops in December 2020. The project is supported by the Open Society'
+ line 1551: ' Foundation Human Rights Initiative and Korea Disability Arts & Culture'
+ line 1552: ' Center.'
+ line 1553: ' teach-case13-content1'
+ line 1554: ' teach-case13-content1-1'
+ line 1555: ' teach-case13-content2'
+ line 1556: ' teach-case13-content3'
+ line 1557: ' teach-case13-content4'
+ line 1558: ' Get creatives, designers, artists and other people who don''t typically use code introduced to p5.js.'
+ line 1559: ' teach-case13-content5'
+ line 1560: ' Website, p5.js editor.'
+ line 1561: ' teach-case13-content5-1'
+ line 1562: ''
+ line 1563: ' teach-case14-title'
+ line 1564: ' teach-case14-lead-name'
+ line 1565: ' teach-case14-speech'
+ line 1566: ' The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.'
+ line 1567: ' teach-case14-content1'
+ line 1568: ' teach-case14-content1-1'
+ line 1569: ' teach-case14-content1-2'
+ line 1570: ' teach-case14-content2'
+ line 1571: ' teach-case14-content3'
+ line 1572: ' teach-case14-content4'
+ line 1573: ' To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,'
+ line 1574: ' the workshop aimed to offer a vision of a smarter home driven by the participants'' critical optimism for the future. '
+ line 1575: ' teach-case14-content5'
+ line 1576: ' p5.js, p5 web editor, ml5.js, and installations. '
+ line 1577: ' teach-case14-content5-1'
+ line 1578: ' 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.'
+ line 1579: ' teach-case14-content5-2'
+ line 1580: ' 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.'
+ line 1581: ' teach-case14-content5-3'
+ line 1582: ' 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people. '
+ line 1583: ' teach-case14-content5-4'
+ line 1584: ' 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion. '
+ line 1585: ' teach-case14-content5-5'
+ line 1586: ' teach-case15-title'
+ line 1587: ' teach-case15-lead-name'
+ line 1588: ' teach-case15-content1'
+ line 1589: ' L''École de Design Nantes Atlantique, France'
+ line 1590: ' teach-case15-content1-1'
+ line 1591: ' teach-case15-content2'
+ line 1592: ' Students from l''école de design Nantes Atlantique'''
+ line 1593: ' teach-case15-content3'
+ line 1594: ' teach-case15-content4'
+ line 1595: ' To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ line 1596: ' teach-case15-content5'
+ line 1597: ' GitHub Readme File'
+ line 1598: ' teach-case15-content5-1'
+ line 1599: ' teach-case16-title'
+ line 1600: ' 50+ Coding Club '
+ line 1601: ' teach-case16-lead-name'
+ line 1602: ' teach-case16-speech'
+ line 1603: ' This workshop was conducted in line with ''p5 for 50+'' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).'
+ line 1604: ' teach-case16-content1'
+ line 1605: ' teach-case16-content1-1'
+ line 1606: ' teach-case16-content2'
+ line 1607: ' teach-case16-content2-1'
+ line 1608: ' teach-case16-content2-2'
+ line 1609: ' teach-case16-content3'
+ line 1610: ' teach-case16-content4'
+ line 1611: ' Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,'
+ line 1612: ' this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.'
+ line 1613: ' teach-case16-content5'
+ line 1614: ' p5for50+ web app'
+ line 1615: ' teach-case16-content5-1'
+ line 1616: ' a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants'' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.'
+ line 1617: ' teach-case16-content5-2'
+ line 1618: ' teach-case16-content5-3'
+ line 1619: ' teach-case16-content5-4'
+ line 1620: ''
+ line 1621: ' teach-case17-title'
+ line 1622: ' teach-case17-lead-name'
+ line 1623: ' teach-case17-speech'
+ line 1624: ' The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.'
+ line 1625: ' teach-case17-content1'
+ line 1626: ' teach-case17-content1-1'
+ line 1627: ' teach-case17-content2'
+ line 1628: ' teach-case17-content3'
+ line 1629: ' teach-case17-content4'
+ line 1630: ' The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.'
+ line 1631: ' teach-case17-content5'
+ line 1632: ' p5.js web editor. Online through Zoom platform and material uploaded in Moodle.'
+ line 1633: ' teach-case17-content5-1'
+ line 1123: ' book-6-title'
+ line 1124: ' book-6-authors'
+ line 1125: ' book-6-publisher'
+ line 1126: ' book-6-pages'
+ line 1127: ' book-6-type'
+ line 1128: ' book-6-description'
+ line 1129: ' Using p5.js, this book introduces and demonstrates the reflexive practice '
+ line 1130: ' of aesthetic programming, engaging with learning to program as a way to '
+ line 1131: ' understand and question existing technological objects and paradigms, '
+ line 1132: ' and to explore the potential for reprogramming wider eco-socio-technical systems.'
+ line 1133: ' book-6-order-a'
+ line 1134: ' book-6-order-b'
+ line 162: ' library in your html. To learn more visit '
+ line 163: ' library in your html. To learn more visit '
+ line 164: ' your-first-sketch7'
+ line 97: ' get-started-button'
+ line 96: ' get-started7'
+ line 114: ' environment15'
+ line 113: ' environment14'
+ line 115: ' environment16'
+ line 102: ' download8'
+ line 103: ' download9'
+ line 104: ' download10'
+ line 105: ' download11'
+ line 251: ' We need your help! p5.js is free, open-source software. We want to make our community as open'
+ line 256: ' , the organization that supports p5.js.'
+ line 269: ' Your donation supports software development for p5.js, education resources'
+ line 265: ' and inclusive as possible. You can support this work by making a donation to'
+ line 266: ' the '
+ line 267: ' support-2'
+ line 268: ' , the organization that supports p5.js. We need your help!'
+ line 275: ' support-3'
+ line 276: ' support-4'
+ line 277: ' support-5'
+ line 37: Editor
+ line 55: footer5
+ line 123: ' p3xh2'
+ line 41: Reference
+ line 118: ' p2x3'
+ line 128: ' p3xp5'
+ line 59: tagline4
+ line 136: ' p4xp6'
+ line 62: tagline7
+ line 45: Books
+ line 34: Language-Settings
+ line 35: Sidebar-Title
+ line 36: Home
+ line 38: Download
+ line 39: Donate
+ line 40: Start
+ line 42: Libraries
+ line 43: Learn
+ line 56: tagline1
+ line 60: tagline5
+ line 61: tagline6
+ line 111: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 112: ' neuro-type, size, disability, class, religion, culture, subculture,'
+ line 116: ' kinds. We facilitate and foster access and empowerment. We are all learners.'
+ line 117: ' p2x2'
+ line 119: ' p2x4'
+ line 120: ' p2x5'
+ line 121: ' p2x6'
+ line 122: ' p2x7'
+ line 124: ' p3xp1'
+ line 125: ' p3xp2'
+ line 126: ' p3xp3'
+ line 127: ' p3xp4'
+ line 137: ' sketch_credits'
+ line 138: ' sketch_info'
+ line 270: ' environment8'
+ line 271: ' Open Sublime. Go to the File menu and choose Open... and choose the folder'
+ line 272: ' that your html and js files are located in. On the left sidebar, you should'
+ line 273: ' find the folder name at the top, with a list of the files contained in the'
+ line 282: ' environment12'
+ line 283: ' environment13'
+ line 284: ' your-first-sketch-title'
+ line 285: ' your-first-sketch-intro1'
+ line 286: ' your-first-sketch-intro2'
+ line 287: ' your-first-sketch-intro3'
+ line 288: ' your-first-sketch-intro4'
+ line 289: ' your-first-sketch1'
+ line 290: ' your-first-sketch2'
+ line 291: ' your-first-sketch3'
+ line 292: ' your-first-sketch4'
+ line 293: ' The line you just added draws an ellipse, with its center 50 pixels over'
+ line 294: ' from the left and 50 pixels down from the top, with a width and height of 80'
+ line 295: ' pixels.'
+ line 296: ' your-first-sketch5'
+ line 297: ' your-first-sketch6'
+ line 298: ' If you are using a screen reader, you must turn on the accessible outputs in'
+ line 299: ' the p5 online editor, outside the editor you must add the accessibility'
+ line 300: ' library in your html. To learn more visit'
+ line 301: ' your-first-sketch7'
+ line 302: ' your-first-sketch8'
+ line 303: ' If you''ve typed everything correctly, this will appear in the display'
+ line 304: ' window'
+ line 305: ' your-first-sketch9'
+ line 306: ' your-first-sketch10'
+ line 307: ' If nothing appears, the editor may be having trouble understanding what'
+ line 308: ' you’ve typed. If this happens, make sure that you''ve copied the example code'
+ line 309: ' exactly'
+ line 310: ' between each of them, the line should end with a semicolon, and ellipse has'
+ line 311: ' to be spelled correctly.'
+ line 312: ' your-first-sketch11'
+ line 313: ' One of the most difficult things about getting started with programming is'
+ line 314: ' that you have to be very specific about the syntax. The browser isn''t always'
+ line 315: ' smart enough to know what you mean, and can be quite fussy about the'
+ line 316: ' placement of punctuation. You''ll get used to it with a little practice. In'
+ line 317: ' the bottom left of the editor you will find the console section. Here, you'
+ line 318: ' can find messages from the editor with details about any errors it'
+ line 319: ' encounters.'
+ line 320: ' your-first-sketch12'
+ line 321: ' Next, we''ll skip ahead to a sketch that''s a little more exciting. Modify the'
+ line 322: ' last example to try this'
+ line 323: ' your-first-sketch13'
+ line 324: ' This program creates a canvas that is 400 pixels wide and 400 pixels high,'
+ line 325: ' and then starts drawing white circles at the position of the mouse. When a'
+ line 326: ' mouse button is pressed, the circle color changes to black. Run the code,'
+ line 327: ' move the mouse, and click to experience it.'
+ line 328: ' your-first-sketch14'
+ line 329: ' first-sketch-heading1'
+ line 330: ' first-sketch-heading2'
+ line 331: ' first-sketch-heading3'
+ line 332: ' what-next-title'
+ line 333: ' learn1'
+ line 334: ' learn2'
+ line 335: ' learn3'
+ line 336: ' learn4'
+ line 337: ' learn5'
+ line 338: ' learn6'
+ line 339: ' learn7'
+ line 340: ' learn8'
+ line 341: ' learn9'
+ line 342: ' learn10'
+ line 343: ' reference1'
+ line 344: ' reference2'
+ line 345: ' reference3'
+ line 346: ' learn11'
+ line 347: ' learn12'
+ line 348: ' processing-transition1'
+ line 349: ' processing-transition2'
+ line 350: ' processing-transition3'
+ line 351: ' processing-transition4'
+ line 352: ' book1'
+ line 353: ' Parts of this tutorial were adapted from the book, Getting Started with'
+ line 354: ' p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O''Reilly / Make 2015.'
+ line 355: ' Copyright © 2015. All rights reserved. Last modified at the p5.js 2019'
+ line 356: ' Contributors Conference.'
+ line 44: Examples
+ line 57: tagline2
+ line 146: ' copyright-title'
+ line 231: ' get-started-title'
+ line 240: ' . If you would like to work on the the desktop version of p5.js you can'
+ line 258: ' download7'
+ line 281: ' file manager or type'
+ line 54: footer4
+ line 110: ' We are a community of, and in solidarity with, people from every gender'
+ line 239: ' get-started6'
+ line 259: ' environment-title'
+ line 274: ' folder directly below.'
+ line 875: ' writing-a-tutorial-iframe-4'
+ line 233: ' This page walks you through setting up a p5.js project and making your first'
+ line 234: ' sketch.'
+ line 244: ' download-title'
+ line 245: ' hosted-title'
+ line 50: footerxh1
+ line 98: ' p1x1'
+ line 99: ' p5.js is a JavaScript library for creative coding, with a focus on making'
+ line 100: ' coding accessible and inclusive for artists, designers, educators,'
+ line 109: ' p2x1'
+ line 129: ' p3xp6'
+ line 148: ' The p5.js library is free software; you can redistribute it and/or modify it'
+ line 46: Community
+ line 133: ' p4xp3'
+ line 134: ' p4xp4'
+ line 141: ' project-a-2-5-phuong'
+ line 144: ' project-a-2-7-phuong'
+ line 64: ' color-p3x3'
+ line 70: ' color-rgb-p1x1'
+ line 87: ' color-custom-ranges-p2x1'
+ line 24: footer1
+ line 25: footer2
+ line 26: footer3
+ line 27: footer4
+ line 77: ' color-rgb-p2x1'
+ line 82: ' color-transparency-p2x1'
+ line 139: ' project-a-2-7-phuong'
+ line 76: ' color-transparency-p1x1'
line 31: tagline7
- line 34: ' blmnamelistending'
- line 35: ' blmstatement1'
- line 36: ' blmstatement2'
- line 38: ' blacklivesmatter'
- line 39: ' naacp'
- line 40: ' equaljustice'
- line 41: ' bailfund'
- line 42: ' floydmemorial'
- line 43: ''
- line 56: ' get-started4'
- line 60: ' get-started7'
- line 61: ' settingUp-title'
line 63: ' hosted-title'
line 75: ' download9'
- line 111: ' your-first-sketch-intro2'
- line 112: ' your-first-sketch-intro3'
- line 113: ' your-first-sketch-intro4'
- line 114: ' your-first-sketch1'
- line 115: ' your-first-sketch2'
- line 116: ' your-first-sketch3'
- line 117: ' your-first-sketch4'
- line 118: ' your-first-sketch5'
- line 119: ' your-first-sketch6'
- line 120: ' your-first-sketch7'
- line 121: ' your-first-sketch8'
- line 122: ' your-first-sketch9'
- line 123: ' your-first-sketch10'
- line 124: ' your-first-sketch11'
- line 125: ' your-first-sketch12'
- line 126: ' your-first-sketch13'
- line 127: ' your-first-sketch14'
- line 137: ' learn2'
- line 138: ' learn3'
- line 139: ' learn4'
line 140: ' learn5'
- line 141: ' learn6'
line 142: ' learn7'
line 143: ' learn8'
- line 144: ' learn9'
line 145: ' learn10'
- line 158: ' learn12'
line 159: ' processing-transition1'
line 160: ' processing-transition2'
line 161: ' processing-transition3'
- line 162: ' processing-transition4'
- line 163: ' book1'
- line 308: ' project-a-6-roni-cantor'
- line 309: ''
- line 310: ' project-resources'
- line 311: ' creator-from-qianqian'
- line 312: ' interview-link-qianqian'
- line 313: ' project-a-1-1-qianqian'
- line 314: ' project-a-1-2-qianqian'
- line 315: ' project-a-2-1-qianqian'
- line 316: ' project-a-2-2-qianqian'
- line 317: ' project-a-2-3-qianqian'
- line 318: ' project-a-2-4-qianqian'
- line 319: ' project-a-3-1-qianqian'
- line 320: ' project-a-3-2-qianqian'
- line 321: ' project-a-4-1-qianqian'
- line 322: ' project-a-4-2-qianqian'
- line 323: ' project-a-4-3-qianqian'
- line 324: ' project-a-5-1-qianqian'
- line 325: ' project-a-5-2-qianqian'
- line 326: ''
- line 327: ' creator-from-phuong'
- line 328: ' project-a-1-1-phuong'
- line 329: ' link-1-phuong'
- line 330: ' link-2-phuong'
- line 331: ' link-3-phuong'
- line 332: ' project-a-1-2-phuong'
- line 333: ' project-a-1-3-phuong'
- line 334: ' project-a-1-4-phuong'
- line 335: ' project-a-2-1-phuong'
- line 336: ' project-a-2-2-phuong'
- line 337: ' project-a-2-3-phuong'
- line 338: ' project-a-2-4-phuong'
- line 339: ' p5-sketch-by-chjno-phuong'
- line 340: ' project-a-2-5-phuong'
- line 341: ' project-a-2-6-phuong'
- line 342: ' project-a-2-7-phuong'
- line 343: ' project-a-3-1-phuong'
- line 344: ' project-a-3-2-phuong'
- line 345: ' project-a-3-3-phuong'
- line 346: ' project-a-3-4-phuong'
- line 347: ' project-a-4-1-phuong'
- line 348: ' project-a-5-1-phuong'
- line 349: ' school-of-machines-phuong'
- line 350: ' project-a-5-2-phuong'
- line 351: ''
- line 352: ' pronouns-male'
- line 353: ' creator-from-chung'
- line 354: ' link-1-casey-louise'
- line 355: ' link-2-casey-louise'
- line 356: ' link-1-chung'
line 357: ' link-2-chung'
line 358: ' link-3-chung'
line 359: ' project-a-1-1-chung'
@@ -1184,16 +4022,8 @@ zh-Hans:
line 417: ' project-a-4-1-moon'
line 418: ' project-a-5-1-moon'
line 419: ' project-a-5-2-moon'
- line 44: ''
- line 57: ' get-started4'
- line 64: ' hosted-title'
- line 70: ' download5'
- line 76: ' download9'
line 79: ' environment1'
line 88: ' environment8'
- line 128: ' your-first-sketch14'
- line 146: ' learn10'
- line 164: ' book1'
line 173: ' complete-library-intro1'
line 182: ' learn3'
line 191: ' writing-a-tutorial-embedding-7'
@@ -1201,15 +4031,9 @@ zh-Hans:
line 204: ' writing-a-tutorial-iframe-7'
line 213: ' color-description1'
line 222: ' coordinate-system-description3'
- line 231: ' coordinate-system-simple-shapes-p1x1'
- line 249: ' Rotating knobs'
- line 59: ' get-started6'
line 69: ' download5'
line 74: ' download8'
line 78: ' environment1'
- line 87: ' environment8'
- line 110: ' your-first-sketch-intro1'
- line 136: ' learn1'
line 157: ' learn11'
line 172: ' complete-library-intro1'
line 181: ' learn3'
@@ -1219,62 +4043,1499 @@ zh-Hans:
line 212: ' color-description1'
line 221: ' coordinate-system-description3'
line 230: ' coordinate-system-simple-shapes-p1x1'
- line 239: ' p5.bots'
- line 248: ' Rotating knobs'
- line 875: ' project-a-5-2-moon'
- line 254: ' project-a-5-2-moon'
- line 255: ''
line 66: ' sketch_credits'
line 67: ' sketch_info'
- line 499: ' teach-desc'
- line 500: ' teach-title2'
- line 501: ' teach-intro1'
- line 502: ' teach-intro2'
- line 503: ' teach-intro3'
- line 504: ' teach-intro4'
- line 505: ' teach-heading'
- line 506: ' teach-search-filter'
- line 507: ' teach-filter1'
- line 508: ' teach-filter1-label1'
- line 878: ' teach-filter1-label2'
- line 879: ' teach-filter1-label3'
- line 880: ' teach-filter1-label4'
- line 881: ' teach-filter1-label5'
- line 882: ' teach-filter1-label6'
- line 883: ' teach-filter1-label7'
- line 884: ' teach-filter1-label8'
- line 885: ' teach-filter1-label9'
- line 886: ' teach-filter1-label10'
- line 887: ' teach-filter1-label11'
- line 888: ' teach-filter1-label12'
- line 889: ' teach-filter1-label13'
- line 890: ' teach-filter1-label14'
- line 891: ' teach-filter1-label15'
- line 892: ' teach-filter1-label16'
- line 893: ' teach-filter2'
- line 894: ' teach-filter2-label1'
- line 895: ' teach-filter2-label2'
- line 896: ' teach-filter2-label3'
- line 897: ' teach-filter2-label4'
- line 898: ' teach-filter2-label5'
- line 899: ' teach-filter2-label6'
- line 900: ' teach-filter2-label7'
- line 901: ' teach-filter3'
- line 902: ' teach-filter4'
- line 903: ' teach-filter4-label1'
- line 904: ' teach-filter4-label2'
- line 905: ' teach-filter4-label3'
- line 906: ' teach-case-subtitle1'
- line 907: ' teach-case-subtitle2'
- line 908: ' teach-case-subtitle3'
- line 909: ' teach-case-subtitle4'
- line 910: ' teach-case-subtitle5'
- line 911: ' teach-case1-title'
- line 912: ' teach-case1-lead-name'
- line 913: ' teach-case1-content1'
- line 914: ' teach-case1-content1-1'
- line 915: ' teach-case1-content2'
- line 916: ' teach-case1-content3'
- line 918: ' teach-case1-content5'
- line 1058: ' teach-case12-content5-1'
- line 1059: ' teach-case12-content5-2'
+ line 22: footer1
+ line 23: footer2
+ line 32: ' download-intro'
+ line 65: ' color-rgb-p1x1'
+ line 72: ' color-rgb-p2x1'
+ line 85: ' color-custom-ranges-p4x1'
+ line 28: footer5
+ line 81: ' color-transparency-p1x1'
+ line 90: ' color-custom-ranges-p4x1'
+ line 153: ' project-a-4-7-casey-louise'
+ line 33: Skip-To-Content
+ line 47: Contribute
+ line 48: Forum
+ line 49: Showcase
+ line 51: footer1
+ line 52: footer2
+ line 53: footer3
+ line 58: tagline3
+ line 101: ' beginners, and anyone else! p5.js is free and open-source because we believe'
+ line 106: ' think of your whole browser page as your sketch, including HTML5 objects for'
+ line 107: ' text, input, video, webcam, and sound.'
+ line 108: ' p2xh2'
+ line 130: ' p4xh2'
+ line 131: ' p4xp1'
+ line 132: ' p4xp2'
+ line 135: ' p4xp5'
+ line 147: ' copyright1'
+ line 149: ' under the terms of the'
+ line 150: ' copyright2'
+ line 151: ' copyright3'
+ line 152: ' copyright4'
+ line 232: ' get-started1'
+ line 235: ' get-started2'
+ line 236: ' get-started3'
+ line 237: ' get-started4'
+ line 238: ' get-started5'
+ line 241: ' scroll down to'
+ line 242: ' get-started7'
+ line 243: ' settingUp-title'
+ line 246: ' download1'
+ line 247: ' download2'
+ line 248: ' download3'
+ line 249: ' download4'
+ line 250: ' If you look in index.html, you''ll notice that it links to the file p5.js. If'
+ line 252: ' loading), change the link to p5.min.js.'
+ line 253: ' download5'
+ line 254: ' Alternatively, you can link to a p5.js file hosted online. All versions of'
+ line 255: ' p5.js are stored in a CDN (Content Delivery Network). You can find a history'
+ line 257: ' download6'
+ line 260: ' environment1'
+ line 261: ' environmentlink'
+ line 262: ' environment2'
+ line 263: ' environment3'
+ line 264: ' environment4'
+ line 278: ' environment10'
+ line 279: ' environment11'
+ line 280: ' Open the index.html file in your browser by double clicking on it in your'
+ line 436: ' Download'
+ line 437: ' download-intro'
+ line 438: ' Welcome! While titled "Download" this page actually contains a collection of'
+ line 439: ' links to either download the library or begin working with it online. We''ve'
+ line 440: ' tried to order things to reflect what a beginner might want first, to'
+ line 441: ' resources that more experienced programmers may be looking for.'
+ line 442: ' editor-title'
+ line 443: ' p5.js-editor'
+ line 444: ' p5.js-editor-intro'
+ line 445: ' This link redirects you to the p5.js Editor online so you can begin using'
+ line 446: ' p5.js immediately.'
+ line 447: ' editor-includes'
+ line 448: ' complete-library-title'
+ line 449: ' complete-library-intro1'
+ line 450: ' This is a download containing the p5.js library file, the p5.sound addon,'
+ line 451: ' and an example project. It does not contain an editor. Visit'
+ line 452: ' complete-library-intro2'
+ line 453: ' complete-library-intro3'
+ line 454: ' p5.js-complete'
+ line 455: ' includes-1'
+ line 456: ' includes-2'
+ line 457: ' includes-3'
+ line 458: ' single-files-title'
+ line 459: ' single-files-intro'
+ line 460: ' These are downloads or links to the p5.js library file. No additional'
+ line 461: ' contents are included.'
+ line 462: ' single-file'
+ line 463: ' p5.js-uncompressed'
+ line 464: ' compressed'
+ line 465: ' link'
+ line 466: ' statically-hosted-file'
+ line 467: ' etc-title'
+ line 468: ' older-releases'
+ line 469: ' github-repository'
+ line 470: ' report-bugs'
+ line 471: ' supported-browsers'
+ line 472: ' support-title'
+ line 473: ' support-options'
+ line 474: ' support-1'
+ line 475: ' p5.js is free, open-source software. We want to make our community as open'
+ line 476: ' and inclusive as possible. You can support this work by'
+ line 477: ' support-2'
+ line 478: ' support-3'
+ line 479: ' support-4'
+ line 480: ' support-5'
+ line 481: ' support-6'
+ line 482: ' support-7'
+ line 483: ' support-8'
+ line 484: ' support-9'
+ line 485: ' support-10'
+ line 486: ' support-11'
+ line 487: ' support-12'
+ line 488: ' Your membership supports software development (for p5.js, Processing,'
+ line 489: ' Processing.py, Processing for Android and ARM devices, education resources'
+ line 490: ' like code examples and tutorials,'
+ line 491: ' support-13'
+ line 492: ' support-14'
+ line 493: ' support-15'
+ line 494: ' support-16'
+ line 495: ' support-17'
+ line 496: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 497: ' Pittsburgh (Image credit'
+ line 498: ' support-18'
+ line 499: ' Processing Fellow Saskia Freeke is organizing Code Liberation x Processing'
+ line 500: ' workshops in London (Image credit'
+ line 501: ' support-19'
+ line 502: ' Learning to Teach, Teaching to Learn conference with SFPC (Image credit'
+ line 503: ' Kira Simon-Kennedy)'
+ line 504: ' support-20'
+ line 505: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 506: ' (Image credit'
+ line 507: ' support-21'
+ line 508: ' Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image'
+ line 509: ' credit'
+ line 510: ' support-22'
+ line 511: ' support-23'
+ line 512: ' Processing Foundation Fellow Cassie Tarakajian''s workshop at Code Art Miami'
+ line 513: ' (Image credit'
+ line 514: ' support-24'
+ line 515: ' Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js'
+ line 516: ' workshop led by Taeyoon Choi (Image credit'
+ line 517: ' support-25'
+ line 518: ' p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in'
+ line 519: ' Pittsburgh (Image credit'
+ line 520: ' support-26'
+ line 521: ' Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the'
+ line 522: ' International Center of Photography (Image credit'
+ line 523: ' Photography)'
+ line 524: ' support-27'
+ line 525: ' Participants at p5.js workshop in Santiago, Chile, led by Aarón'
+ line 526: ' Montoya-Moraga (Image credit'
+ line 527: ' support-28'
+ line 528: ' Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop'
+ line 529: ' led by Taeyoon Choi (Image credit'
+ line 530: ' support-29'
+ line 531: ' Processing Foundation Fellow DIY Girls run a creative coding program in Los'
+ line 532: ' Angeles (Image credit'
+ line 533: ' support-30'
+ line 534: ' support-31'
+ line 535: ' support-32'
+ line 536: ' support-33'
+ line 537: ' support-17-alt'
+ line 538: ' support-18-alt'
+ line 539: ' support-19-alt'
+ line 540: ' support-20-alt'
+ line 541: ' support-21-alt'
+ line 542: ' support-22-alt'
+ line 543: ' support-23-alt'
+ line 544: ' support-24-alt'
+ line 545: ' support-25-alt'
+ line 546: ' support-26-alt'
+ line 547: ' support-27-alt'
+ line 548: ' support-28-alt'
+ line 549: ' support-29-alt'
+ line 550: ' support-30-alt'
+ line 551: ' support-31-alt'
+ line 729: ' learn-title'
+ line 730: ' teach-title2'
+ line 731: ' learn1'
+ line 732: ' These tutorials provide more in-depth or step-by-step overviews of'
+ line 733: ' particular topics. Check out the '
+ line 734: ' learn2'
+ line 735: ' learn3'
+ line 736: ' introduction-to-p5js-title'
+ line 737: ' hello-p5js-title'
+ line 738: ' hello-p5js'
+ line 739: ' This short video will introduce you to the library and what you can do with'
+ line 740: ' it.'
+ line 741: ' getting-started-title'
+ line 742: ' getting-started'
+ line 743: ' Welcome to p5.js! This introduction covers the basics of setting up a'
+ line 744: ' p5.js project.'
+ line 745: ' p5js-overview-title'
+ line 746: ' p5js-overview'
+ line 747: ' p5js-processing-title'
+ line 748: ' p5js-processing'
+ line 749: ' The main differences between the two, and how to convert from one to the'
+ line 750: ' other.'
+ line 751: ' p5-screen-reader-title'
+ line 752: ' p5-screen-reader'
+ line 753: ' using-local-server-title'
+ line 754: ' using-local-server'
+ line 755: ' p5js-wiki-title'
+ line 756: ' p5js-wiki'
+ line 757: ' connecting-p5js-title'
+ line 758: ' creating-libraries-title'
+ line 759: ' creating-libraries'
+ line 760: ' nodejs-and-socketio-title'
+ line 761: ' nodejs-and-socketio'
+ line 762: ' programming-topics-title'
+ line 763: ' beyond-the-canvas-title'
+ line 764: ' beyond-the-canvas'
+ line 765: ' 3d-webgl-title'
+ line 766: ' 3d-webgl'
+ line 767: ' color-title'
+ line 768: ' color'
+ line 769: ' coordinate-system-and-shapes-title'
+ line 770: ' coordinate-system-and-shapes'
+ line 771: ' interactivity-title'
+ line 772: ' interactivity'
+ line 773: ' program-flow-title'
+ line 774: ' program-flow'
+ line 775: ' curves-title'
+ line 776: ' curves'
+ line 777: ' An introduction to the three types of curves in p5.js'
+ line 778: ' and Bézier curves.'
+ line 779: ' becoming-a-better-programmer-title'
+ line 780: ' debugging-title'
+ line 781: ' debugging'
+ line 782: ' optimizing-title'
+ line 783: ' optimizing'
+ line 784: ' A tutorial of tips and tricks for optimizing your code to make it run faster'
+ line 785: ' and smoother.'
+ line 786: ' test-driven-development-title'
+ line 787: ' test-driven-development'
+ line 788: ' Save yourself from agony on install day. What is unit testing and how to use'
+ line 789: ' it? By Andy Timmons.'
+ line 790: ' contributing-to-the-community-title'
+ line 791: ' development-title'
+ line 792: ' development'
+ line 793: ' looking-inside-title'
+ line 794: ' looking-inside'
+ line 795: ' A friendly intro to the file structure and tools for p5.js development, by'
+ line 796: ' Luisa Pereira.'
+ line 797: ' writing-tutorial-title'
+ line 798: ' writing-tutorial'
+ line 799: ' writing-a-tutorial-title'
+ line 800: ' writing-a-tutorial-author'
+ line 801: ' writing-a-tutorial-1'
+ line 802: ' We invite educators, contributors and general enthusiasts to contribute p5js'
+ line 803: ' tutorials. The p5js project makes creative coding and open source'
+ line 804: ' development more accessible to a diverse community and we are excited to'
+ line 805: ' publish tutorials on all aspects of the development process. Our learning'
+ line 806: ' materials so far include guides on learning p5, programming technique and'
+ line 807: ' how to contribute to an open source project.'
+ line 808: ' writing-a-tutorial-2'
+ line 809: ' We welcome new written tutorial contributions and this guide outlines the'
+ line 810: ' steps of how to propose, prepare and contribute.'
+ line 811: ' writing-a-tutorial-how-start-title'
+ line 812: ' writing-a-tutorial-how-start-1'
+ line 813: ' writing-a-tutorial-how-start-2'
+ line 814: ' writing-a-tutorial-how-start-3'
+ line 815: ' that outlines in progress tutorials. If your topic is listed as in progress,'
+ line 816: ' perhaps you can add to work being done and contribute to preparing existing'
+ line 817: ' work for publication so please reach out to us.'
+ line 818: ' writing-a-tutorial-how-start-4'
+ line 819: ' If your topic is not already covered and is not listed as in progress,'
+ line 820: ' please write a few sentences on what you propose to cover and email us this'
+ line 821: ' description at education@p5js.org.'
+ line 822: ' writing-a-tutorial-how-prepare-title'
+ line 823: ' writing-a-tutorial-how-prepare-1'
+ line 824: ' When your tutorial is ready for publication, please follow these steps to'
+ line 825: ' prepare your content for the p5js website.'
+ line 826: ' writing-a-tutorial-how-prepare-2'
+ line 827: ' writing-a-tutorial-how-prepare-3'
+ line 828: ' writing-a-tutorial-how-prepare-4'
+ line 829: ' writing-a-tutorial-how-prepare-5'
+ line 830: ' The folder containing your tutorial will be placed in the ''tutorials'' folder'
+ line 831: ' of the p5js site. The file called index.hbs is the '
+ line 832: ' writing-a-tutorial-how-prepare-6'
+ line 833: ' writing-a-tutorial-how-prepare-7'
+ line 834: ' writing-a-tutorial-how-prepare-8'
+ line 835: ' writing-a-tutorial-how-prepare-9'
+ line 836: ' tags on the page, with formatting defined by the <h1> and <h2>'
+ line 837: ' tags, the <p> paragraph tags as is done shown on the'
+ line 838: ' writing-a-tutorial-how-prepare-10'
+ line 839: ' writing-a-tutorial-how-prepare-11'
+ line 840: ' If your tutorial contains images, they are to be placed in the assets folder'
+ line 841: ' of the p5 site, in the location src/assets/learn/test-tutorial/images as'
+ line 842: ' shown below.'
+ line 843: ' writing-a-tutorial-how-prepare-12'
+ line 844: ' writing-a-tutorial-embedding-title'
+ line 845: ' writing-a-tutorial-embedding-1'
+ line 846: ' Using p5js means you can illustrate your tutorial with animated, interactive'
+ line 847: ' or editable code examples to demonstrate programming concepts. Your examples'
+ line 848: ' should be prepared as p5.js sketches and can be embedded into the tutorial'
+ line 849: ' in two ways.'
+ line 850: ' writing-a-tutorial-embedding-2'
+ line 851: ' writing-a-tutorial-embedding-3'
+ line 852: ' writing-a-tutorial-embedding-4'
+ line 853: ' writing-a-tutorial-embedding-5'
+ line 854: ' writing-a-tutorial-embedding-6'
+ line 855: ' writing-a-tutorial-embedding-7'
+ line 856: ' writing-a-tutorial-embedding-8'
+ line 857: ' writing-a-tutorial-embedding-9'
+ line 858: ' writing-a-tutorial-embedding-10'
+ line 859: ' If the example is to be animated and/or interactive but not editable. The'
+ line 860: ' p5.js sketch should be embedded into the page as an iframe as described'
+ line 861: ' below.'
+ line 862: ' writing-a-tutorial-iframe-title'
+ line 863: ' writing-a-tutorial-iframe-1'
+ line 864: ' An iframe is like creating a window through which you can explore another'
+ line 865: ' page, sandboxed from the rest of your page. In this case it will be a window'
+ line 866: ' to the index.html containing your p5.js sketch. '
+ line 867: ' writing-a-tutorial-iframe-2'
+ line 868: ' Put your p5 sketches in the /src/assets/learn folder of the site, in a'
+ line 869: ' folder labelled with the name of your sketch as shown in the screenshot.'
+ line 870: ' This is where all the images and p5 sketches linked by iframe should be'
+ line 871: ' stored.'
+ line 872: ' writing-a-tutorial-iframe-3'
+ line 873: ' In the subfolders containing your p5 examples there should be a sketch.js'
+ line 874: ' file and the embed.html file for the sketch. '
+ line 876: ' Make sure your embed.html file has the correct paths to the p5 libraries of'
+ line 877: ' the site. If your file structure is the same as above, the path to the p5.js'
+ line 878: ' library should be "../../../js/p5.min.js".'
+ line 879: ' writing-a-tutorial-iframe-5'
+ line 880: ' You can then embed the p5js index files as iframes in the .hbs file that'
+ line 881: ' contains your tutorial content. The embed code for the iframe would then'
+ line 882: ' be'
+ line 883: ' writing-a-tutorial-iframe-6'
+ line 884: ' Styling for the iframe (this could directly into the post or in a'
+ line 885: ' stylesheet)'
+ line 886: ' writing-a-tutorial-iframe-7'
+ line 887: ' writing-a-tutorial-iframe-8'
+ line 888: ' writing-a-tutorial-iframe-9'
+ line 889: ' One thing to note is that you need to manually set the size of the iframe,'
+ line 890: ' so it works best if things are a standard size.'
+ line 891: ' writing-a-tutorial-iframe-10'
+ line 892: ' Also note that the links to the p5.js library files do not happen from the'
+ line 893: ' .eps page with all the tutorial content. Instead they will be located in the'
+ line 894: ' html page that is rendering your sketch (in this case, called embed.html).'
+ line 895: ' writing-a-tutorial-iframe-11'
+ line 896: ' writing-a-tutorial-embed-iframe-12'
+ line 897: ' writing-a-tutorial-finishing-title'
+ line 898: ' writing-a-tutorial-finishing-1'
+ line 899: ' Once your have finished writing your tutorial and your content has been'
+ line 900: ' given the thumbs up. Fork the p5.js website repository, prepare your content'
+ line 901: ' as described above and then issue a pull request to the p5.js website'
+ line 902: ' repository so we can publish your contribution!'
+ line 903: ' writing-a-tutorial-finishing-2'
+ line 904: ' color-description1'
+ line 905: ' This tutorial is from the book Learning Processing by Daniel Shiffman,'
+ line 906: ' published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It'
+ line 907: ' was ported to P5 by Kelly Chang. If you find any errors or have comments, '
+ line 908: ' color-description2'
+ line 909: ' color-p1x1'
+ line 910: ' In the digital world, when we want to talk about a color, precision is'
+ line 911: ' required. Saying "Hey, can you make that circle bluish-green?" will not do.'
+ line 912: ' Color, rather, is defined as a range of numbers. Let''s start with the'
+ line 913: ' simplest case'
+ line 914: ' In between, every other number—50, 87, 162, 209, and so on—is a shade of'
+ line 915: ' gray ranging from black to white.'
+ line 916: ' color-p2x1'
+ line 917: ' color-p2x2'
+ line 918: ' color-p2x3'
+ line 919: ' color-p2x4'
+ line 920: ' color-code1'
+ line 921: ' background(255); // Setting the background to white '
+ line 922: ' stroke(0); // Setting the outline (stroke) to black '
+ line 923: ' fill(150); // Setting the interior of a shape (fill) to grey '
+ line 924: ' rect(50,50,75,100); // Drawing the rectangle'
+ line 925: ' color-p3x1'
+ line 926: ' color-p3x2'
+ line 927: ' color-p3x3'
+ line 928: ' . Our instinct might be to say "stroke(0)" for no outline, however, it is'
+ line 929: ' important to remember that 0 is not "nothing", but rather denotes the color'
+ line 930: ' black. Also, remember not to eliminate both—with '
+ line 931: ' color-p3x4'
+ line 932: ' color-p3x5'
+ line 933: ' color-p4x1'
+ line 934: ' In addition, if we draw two shapes, p5.js will always use the most recently'
+ line 935: ' specified stroke and fill, reading the code from top to bottom.'
+ line 936: ' color-rgb-title'
+ line 937: ' color-rgb-p1x1'
+ line 938: ' Remember finger painting? By mixing three "primary" colors, any color could'
+ line 939: ' be generated. Swirling all colors together resulted in a muddy brown. The'
+ line 940: ' more paint you added, the darker it got. Digital colors are also constructed'
+ line 941: ' by mixing three primary colors, but it works differently from paint. First,'
+ line 942: ' the primaries are different'
+ line 943: ' with color on the screen, you are mixing light, not paint, so the mixing'
+ line 944: ' rules are different as well.'
+ line 945: ' color-rgb-li1'
+ line 946: ' color-rgb-li2'
+ line 947: ' color-rgb-li3'
+ line 948: ' color-rgb-li4'
+ line 949: ' color-rgb-li5'
+ line 950: ' color-rgb-p2x1'
+ line 951: ' This assumes that the colors are all as bright as possible, but of course,'
+ line 952: ' you have a range of color available, so some red plus some green plus some'
+ line 953: ' blue equals gray, and a bit of red plus a bit of blue equals dark purple.'
+ line 954: ' While this may take some getting used to, the more you program and'
+ line 955: ' experiment with RGB color, the more it will become instinctive, much like'
+ line 956: ' swirling colors with your fingers. And of course you can''t say "Mix some red'
+ line 957: ' with a bit of blue," you have to provide an exact amount. As with grayscale,'
+ line 958: ' the individual color elements are expressed as ranges from 0 (none of that'
+ line 959: ' color) to 255 (as much as possible), and they are listed in the order R, G,'
+ line 960: ' and B. You will get the hang of RGB color mixing through experimentation,'
+ line 961: ' but next we will cover some code using some common colors.'
+ line 962: ' color-transparency-title'
+ line 963: ' color-transparency-p1x1'
+ line 964: ' In addition to the red, green, and blue components of each color, there is'
+ line 965: ' an additional optional fourth component, referred to as the color''s "alpha".'
+ line 966: ' Alpha means transparency and is particularly useful when you want to draw'
+ line 967: ' elements that appear partially see-through on top of one another. The alpha'
+ line 968: ' values for an image are sometimes referred to collectively as the "alpha'
+ line 969: ' channel" of an image.'
+ line 970: ' color-transparency-p2x1'
+ line 971: ' It is important to realize that pixels are not literally transparent, this'
+ line 972: ' is simply a convenient illusion that is accomplished by blending colors.'
+ line 973: ' Behind the scenes, p5.js takes the color numbers and adds a percentage of'
+ line 974: ' one to a percentage of another, creating the optical perception of blending.'
+ line 975: ' (If you are interested in programming "rose-colored" glasses, this is where'
+ line 976: ' you would begin.)'
+ line 977: ' color-transparency-p3x1'
+ line 978: ' Alpha values also range from 0 to 255, with 0 being completely transparent'
+ line 979: ' (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).'
+ line 980: ' color-custom-ranges-title'
+ line 981: ' color-custom-ranges-p1x1'
+ line 982: ' RGB color with ranges of 0 to 255 is not the only way you can handle color'
+ line 983: ' in p5.js, in fact, it allows us to think about color any way we like. For'
+ line 984: ' example, you might prefer to think of color as ranging from 0 to 100 (like a'
+ line 985: ' percentage). You can do this by specifying a custom '
+ line 986: ' color-custom-ranges-p2x1'
+ line 987: ' The above function says'
+ line 988: ' green, and blue. The range of RGB values will be from 0 to 100."'
+ line 989: ' color-custom-ranges-p3x1'
+ line 990: ' Although it is rarely convenient to do so, you can also have different'
+ line 991: ' ranges for each color component'
+ line 992: ' color-custom-ranges-p4x1'
+ line 993: ' Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue'
+ line 994: ' from 0 to 10, and alpha from 0 to 255."'
+ line 995: ' color-custom-ranges-p5x1'
+ line 996: ' Finally, while you will likely only need RGB color for all of your'
+ line 997: ' programming needs, you can also specify colors in the HSB (hue, saturation,'
+ line 998: ' and brightness) mode. Without getting into too much detail, HSB color works'
+ line 999: ' as follows'
+ line 1000: ' color-custom-ranges-li1x1'
+ line 1001: ' color-custom-ranges-li1x2'
+ line 1002: ' color-custom-ranges-li2x1'
+ line 1003: ' color-custom-ranges-li2x2'
+ line 1004: ' color-custom-ranges-li3x1'
+ line 1005: ' color-custom-ranges-li3x2'
+ line 1006: ' color-custom-ranges-p6x1'
+ line 1007: ' color-custom-ranges-p6x2'
+ line 1008: ' coordinate-system-description1'
+ line 1009: ' coordinate-system-description2'
+ line 1010: ' coordinate-system-description3'
+ line 1011: ' coordinate-system-description4'
+ line 1012: ' coordinate-system-description5'
+ line 1013: ' coordinate-system-description-title'
+ line 1014: ' coordinate-system-description-p1x1'
+ line 1015: ' Before we begin programming with p5, we must first channel our eighth grade'
+ line 1016: ' selves, pull out a piece of graph paper, and draw a line. The shortest'
+ line 1017: ' distance between two points is a good old fashioned line, and this is where'
+ line 1018: ' we begin, with two points on that graph paper.'
+ line 1019: ' coordinate-system-description-p2x1'
+ line 1020: ' The above figure shows a line between point A (1,0) and point B (4,5). If'
+ line 1021: ' you wanted to direct a friend of yours to draw that same line, you would'
+ line 1022: ' give them a shout and say "draw a line from the point one-zero to the point'
+ line 1023: ' four-five, please." Well, for the moment, imagine your friend was a computer'
+ line 1024: ' and you wanted to instruct this digital pal to display that same line on its'
+ line 1025: ' screen. The same command applies (only this time you can skip the'
+ line 1026: ' pleasantries and you will be required to employ a precise formatting). Here,'
+ line 1027: ' the instruction will look like this'
+ line 1028: ' coordinate-system-description-p3x1'
+ line 1029: ' Even without having studied the syntax of writing code, the above statement'
+ line 1030: ' should make a fair amount of sense. We are providing a command (which we'
+ line 1031: ' will refer to as a "function") for the machine to follow entitled "line." In'
+ line 1032: ' addition, we are specifying some arguments for how that line should be'
+ line 1033: ' drawn, from point A (1,0) to point B (4,5). If you think of that line of'
+ line 1034: ' code as a sentence, the function is a verb and the arguments are the objects'
+ line 1035: ' of the sentence. The code sentence also ends with a semicolon instead of a'
+ line 1036: ' period.'
+ line 1037: ' coordinate-system-description-p4x1'
+ line 1038: ' The key here is to realize that the computer screen is nothing more than a'
+ line 1039: ' fancier piece of graph paper. Each pixel of the screen is a coordinate - two'
+ line 1040: ' numbers, an "x" (horizontal) and a "y" (vertical) - that determines the'
+ line 1041: ' location of a point in space. And it is our job to specify what shapes and'
+ line 1042: ' colors should appear at these pixel coordinates.'
+ line 1043: ' coordinate-system-description-p5x1'
+ line 1044: ' Nevertheless, there is a catch here. The graph paper from eighth grade'
+ line 1045: ' ("Cartesian coordinate system") placed (0,0) in the center with the y-axis'
+ line 1046: ' pointing up and the x-axis pointing to the right (in the positive direction,'
+ line 1047: ' negative down and to the left). The coordinate system for pixels in a'
+ line 1048: ' computer window, however, is reversed along the y-axis. (0,0) can be found'
+ line 1049: ' at the top left with the positive direction to the right horizontally and'
+ line 1050: ' down vertically.'
+ line 1051: ' coordinate-system-simple-shapes-title'
+ line 1052: ' coordinate-system-simple-shapes-p1x1'
+ line 1053: ' The vast majority of p5 programming examples are visual in nature. These'
+ line 1054: ' examples, at their core, involve drawing shapes and setting pixels. Let''s'
+ line 1055: ' begin by looking at four primitive shapes.'
+ line 1056: ' coordinate-system-simple-shapes-p2x1'
+ line 1057: ' For each shape, we will ask ourselves what information is required to'
+ line 1058: ' specify the location and size (and later color) of that shape and learn how'
+ line 1059: ' p5 expects to receive that information. In each of the diagrams below, we''ll'
+ line 1060: ' assume a window with a width of 100 pixels and height of 100 pixels.'
+ line 1061: ' coordinate-system-simple-shapes-p3x1'
+ line 1062: ' coordinate-system-simple-shapes-p3x2'
+ line 1063: ' coordinate-system-simple-shapes-p4x1'
+ line 1064: ' coordinate-system-simple-shapes-p4x2'
+ line 1065: ' coordinate-system-simple-shapes-p5x1'
+ line 1066: ' coordinate-system-simple-shapes-p5x2'
+ line 1067: ' , things become a bit more complicated. In p5, a rectangle is specified by'
+ line 1068: ' the coordinate for the top left corner of the rectangle, as well as its'
+ line 1069: ' width and height.'
+ line 1070: ' coordinate-system-simple-shapes-p6x1'
+ line 1071: ' A second way to draw a rectangle involves specifying the centerpoint, along'
+ line 1072: ' with width and height. If we prefer this method, we first indicate that we'
+ line 1073: ' want to use the '
+ line 1074: ' coordinate-system-simple-shapes-p6x2'
+ line 1075: ' coordinate-system-simple-shapes-p7x1'
+ line 1076: ' Finally, we can also draw a rectangle with two points (the top left corner'
+ line 1077: ' and the bottom right corner). The mode here is '
+ line 1078: ' coordinate-system-simple-shapes-p7x2'
+ line 1079: ' coordinate-system-simple-shapes-p8x1'
+ line 1080: ' coordinate-system-simple-shapes-p8x2'
+ line 1081: ' coordinate-system-simple-shapes-p8x3'
+ line 1082: ' coordinate-system-simple-shapes-p8x4'
+ line 1083: ' coordinate-system-simple-shapes-p8x5'
+ line 1084: ' coordinate-system-simple-shapes-p8x6'
+ line 1085: ' coordinate-system-simple-shapes-p9x1'
+ line 1086: ' Now let''s look at what some code with shapes in more complete form, with'
+ line 1087: ' canvas dimensions of 200 by 200. Note the use of the createCanvas() function'
+ line 1088: ' to specify the width and height of the canvas.'
+ line 1089: ' teach-desc'
+ line 1090: test-tutorial
+ line 1147: ' Libraries'
+ line 1148: ' core-libraries'
+ line 1149: ' community-libraries'
+ line 1150: ' libraries-created-by'
+ line 1151: ' p5.sound'
+ line 1152: ' p5.sound extends p5 with Web Audio functionality including audio input,'
+ line 1153: ' playback, analysis and synthesis.'
+ line 1154: ' p5.accessibility'
+ line 1155: ' p5.accessibility makes the p5 canvas more accessible to people who are blind'
+ line 1156: ' and visually impaired.'
+ line 1157: ' asciiart'
+ line 1158: ' p5.asciiart is a simple and easy to use image - to - ASCII art converter for'
+ line 1159: ' p5js.'
+ line 1160: ' p5.ble'
+ line 1161: ' A Javascript library that enables communication between BLE devices and p5'
+ line 1162: ' sketches.'
+ line 1163: ' blizard.js'
+ line 1164: ' p5.bots'
+ line 1165: ' With p5.bots you can interact with your Arduino (or other microprocessor)'
+ line 1166: ' from within the browser. Use sensor data to drive a sketch; use a sketch to'
+ line 1167: ' drive LEDs, motors, and more!'
+ line 1168: ' p5.clickable'
+ line 1169: ' p5.cmyk.js'
+ line 1170: ' p5.collide2D'
+ line 1171: ' p5.collide2D provides tools for calculating collision detection for 2D'
+ line 1172: ' geometry with p5.js.'
+ line 1173: ' p5.createloop'
+ line 1174: ' p5.dimensions'
+ line 1175: ' p5.dimensions extends p5.js'' vector functions to work in any number of'
+ line 1176: ' dimensions.'
+ line 1177: ' p5.EasyCam'
+ line 1178: ' Simple 3D camera control with inertial pan, zoom, and rotate. Major'
+ line 1179: ' contributions by Thomas Diewald.'
+ line 1180: ' p5.experience'
+ line 1181: ' Extensive library for p5.js that adds additional event-listening'
+ line 1182: ' functionality for creating canvas-based web applications.'
+ line 1183: ' p5.func'
+ line 1184: ' p5.func is a p5 extension that provides new objects and utilities for'
+ line 1185: ' function generation in the time, frequency, and spatial domains.'
+ line 1186: ' p5.geolocation'
+ line 1187: ' p5.geolocation provides techniques for acquiring, watching, calculating, and'
+ line 1188: ' geofencing user locations for p5.js.'
+ line 1189: ' p5.gibber'
+ line 1190: ' grafica.js'
+ line 1191: ' grafica.js lets you add simple but highly configurable 2D plots to your'
+ line 1192: ' p5.js sketches.'
+ line 1193: ' p5.gui'
+ line 1194: ' p5.localmessage'
+ line 1195: ' p5.localmessage provides a simple interface to send messages locally from'
+ line 1196: ' one sketch to another for easy multi-window sketching!'
+ line 1197: ' marching'
+ line 1198: ' mappa'
+ line 1199: ' Mappa provides a set of tools for working with static maps, tile maps, and'
+ line 1200: ' geo-data. Useful when building geolocation-based visual representations.'
+ line 1201: ' ml5.js'
+ line 1202: ' ml5.js builds on Tensorflow.js and provides friendly access to machine'
+ line 1203: ' learning algorithms and models in the browser.'
+ line 1204: ' p5.play'
+ line 1205: ' p5.play provides sprites, animations, input and collision functions for'
+ line 1206: ' games and gamelike applications.'
+ line 1207: ' p5.particle'
+ line 1208: ' The Particle and Fountain objects can be used to create data-driven effects'
+ line 1209: ' that are defined through user structures or JSON input and user-draw'
+ line 1210: ' functions.'
+ line 1211: ' p5.Riso'
+ line 1212: ' p5.Riso is a library for generating files suitable for Risograph printing.'
+ line 1213: ' It helps turn your sketches into multi-color prints.'
+ line 1214: ' rita.js'
+ line 1215: ' RiTa.js provides a set of natural language processing objects for generative'
+ line 1216: ' literature.'
+ line 1217: ' Rotating knobs'
+ line 1218: ' p5.scenemanager'
+ line 1219: ' p5.SceneManager helps you create sketches with multiple states / scenes.'
+ line 1220: ' Each scene is a like a sketch within the main sketch.'
+ line 1221: ' p5.screenPosition'
+ line 1222: ' p5.scribble'
+ line 1223: ' Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based'
+ line 1224: ' on a port of the original Processing library'
+ line 1225: ' p5.serial'
+ line 1226: ' p5.serial enables serial communication between devices that support serial'
+ line 1227: ' (RS-232) and p5 sketches running in the browser.'
+ line 1228: ' Shape5'
+ line 1229: ' Shape5 is a 2D primative library for elementary students who are learning to'
+ line 1230: ' code for the first time.'
+ line 1231: ' p5.shape.js'
+ line 1232: ' p5.speech'
+ line 1233: ' p5.speech provides simple, clear access to the Web Speech and Speech'
+ line 1234: ' Recognition APIs, allowing for the easy creation of sketches that can talk'
+ line 1235: ' and listen.'
+ line 1236: ' p5.start2d.js'
+ line 1237: ' p5.tiledmap'
+ line 1238: ' p5.tiledmap provides drawing and helper functions to include maps in your'
+ line 1239: ' sketches.'
+ line 1240: ' p5.touchgui'
+ line 1241: ' tramontana'
+ line 1242: ' Tramontana is a platform for easily use many devices (iOS, Android,'
+ line 1243: ' tramontana Board, ...) to create interactive environments, interactive'
+ line 1244: ' spaces or just prototype experiences at scale and in space.'
+ line 1245: ' vida'
+ line 1246: ' Vida is a simple library that adds camera (or video) based motion detection'
+ line 1247: ' and blob tracking functionality to p5js.'
+ line 1248: ' p5.voronoi'
+ line 1249: ' p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in'
+ line 1250: ' your p5.js sketches.'
+ line 1251: ' p5.3D'
+ line 1252: ' using-a-library-title'
+ line 1253: ' using-a-library1'
+ line 1254: ' A p5.js library can be any JavaScript code that extends or adds to the p5.js'
+ line 1255: ' core functionality. There are two categories of libraries. Core libraries ('
+ line 1256: ' using-a-library3'
+ line 1257: ' ) are part of the p5.js distribution, while contributed libraries are'
+ line 1258: ' developed, owned, and maintained by members of the p5.js community.'
+ line 1259: ' using-a-library4'
+ line 1260: ' To include a library in your sketch, link it into your HTML file, after you'
+ line 1261: ' have linked in p5.js. An example HTML file might look like this'
+ line 1262: ' create-your-own-title'
+ line 1263: ' create-your-own1'
+ line 1264: ' create-your-own2'
+ line 1265: ' create-your-own3'
+ line 1266: ' create-your-own4'
+ line 1267: ' If you have created a library and would like to have it included on this'
+ line 1268: ' page, submit this form!'
+ line 1420: ' community-title'
+ line 1421: ' community-statement-title'
+ line 1422: ' community-statement1'
+ line 1423: ' p5.js is a community interested in exploring the creation of art and design'
+ line 1424: ' with technology.'
+ line 1425: ' community-statement2'
+ line 1426: ' We are a community of, and in solidarity with, people from every gender'
+ line 1427: ' identity and expression, sexual orientation, race, ethnicity, language,'
+ line 1428: ' neuro-type, size, ability, class, religion, culture, subculture, political'
+ line 1429: ' opinion, age, skill level, occupation, and background. We acknowledge that'
+ line 1430: ' not everyone has the time, financial means, or capacity to actively'
+ line 1431: ' participate, but we recognize and encourage involvement of all kinds. We'
+ line 1432: ' facilitate and foster access and empowerment. We are all learners.'
+ line 1433: ' community-statement3'
+ line 1434: ' We like these hashtags'
+ line 1435: ' efficiency), #newKidLove (because we all started somewhere), #unassumeCore'
+ line 1436: ' (because we don''t assume knowledge), and #BlackLivesMatter (because of'
+ line 1437: ' course).'
+ line 1438: ' in-practice-title'
+ line 1439: ' in-practice1'
+ line 1440: ' in-practice2'
+ line 1441: ' We insist on actively engaging with requests for feedback regardless of'
+ line 1442: ' their complexity.'
+ line 1443: ' in-practice3'
+ line 1444: ' We welcome newcomers and prioritize the education of others. We strive to'
+ line 1445: ' approach all tasks with the enthusiasm of a newcomer. Because we believe'
+ line 1446: ' that newcomers are just as valuable in this effort as experts.'
+ line 1447: ' in-practice4'
+ line 1448: ' We consistently make the effort to actively recognize and validate multiple'
+ line 1449: ' types of contributions.'
+ line 1450: ' in-practice5'
+ line 1451: ' in-times-conflict-title'
+ line 1452: ' in-times-conflict1'
+ line 1453: ' in-times-conflict2'
+ line 1454: ' in-times-conflict3'
+ line 1455: ' We admit when we''re wrong, apologize, and accept responsibility for our'
+ line 1456: ' actions.'
+ line 1457: ' in-times-conflict4'
+ line 1458: ' in-times-conflict5'
+ line 1459: ' in-times-conflict6'
+ line 1460: ' in-times-conflict7'
+ line 1461: ' in-the-future-title'
+ line 1462: ' in-the-future1'
+ line 1463: ' notes-title'
+ line 1464: ' notes1'
+ line 1465: ' notes2'
+ line 1466: ' notes3'
+ line 1467: ' notes4'
+ line 1468: ' notes5'
+ line 1469: ' contribute-title'
+ line 1470: ' contribute1'
+ line 1471: ' Our community is always looking for enthusiasts to help in all different'
+ line 1472: ' ways.'
+ line 1473: ' develop-title'
+ line 1474: ' develop1'
+ line 1475: ' develop2'
+ line 1476: ' develop3'
+ line 1477: ' develop4'
+ line 1478: ' develop5'
+ line 1479: ' document-title'
+ line 1480: ' document1'
+ line 1481: ' document2'
+ line 1482: ' document3'
+ line 1483: ' document4'
+ line 1484: ' document5'
+ line 1485: ' teach-title'
+ line 1486: ' teach1'
+ line 1487: ' create-title'
+ line 1488: ' create1'
+ line 1489: ' create2'
+ line 1490: ' create3'
+ line 1491: ' donate-title'
+ line 1492: ' donate1'
+ line 1493: ' donate2'
+ line 1494: ' donate3'
+ line 1495: ' contributors-conference-title'
+ line 1496: ' contributors-conference1'
+ line 1497: ' While most work happens online, we also convene IRL. We''ve had two'
+ line 1498: ' contributors conferences held at the'
+ line 1499: ' contributors-conference2'
+ line 1500: ' at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,'
+ line 1501: ' developers, educators, and got together to advance the p5.js project.'
+ line 1502: ' participants-title'
+ line 1503: ' support-title'
+ line 1504: ' support1'
+ line 1505: ' support2'
+ line 1506: ' at Carnegie Mellon University, an academic laboratory for atypical,'
+ line 1507: ' anti-disciplinary, and inter-institutional research at the intersections of'
+ line 1508: ' arts, science, technology, and culture.'
+ line 1509: ' support3'
+ line 1510: ' support4'
+ line 1511: ' support5'
+ line 1512: ' support6'
+ line 1513: ' mailing-list-title'
+ line 1514: ' mailing-list-1'
+ line 1515: ' Enter your email address to receive occasional updates from the Processing'
+ line 1516: ' Foundation.'
+ line 1518: ' 2015contributors-conference-date'
+ line 1519: ' 2015contributors-conference1'
+ line 1520: ' 2015contributors-conference2'
+ line 1521: ' , advancing the code, documentation, and community outreach tools of the'
+ line 1522: ' p5.js programming environment. Participants came from as far away as Hong'
+ line 1523: ' Kong, Seattle, Los Angeles, Boston and New York. Most were working'
+ line 1524: ' professionals in the fields of creative technology, interaction design, and'
+ line 1525: ' new-media arts, but the group also included a half-dozen undergraduate and'
+ line 1526: ' graduate students from Carnegie Mellon’s Schools of Art and Architecture.'
+ line 1529: ' 2015contributors-conference-diversity1'
+ line 1530: ' Alongside technical development, one of the main focuses of this conference'
+ line 1531: ' was outreach, community, and diversity. The conference began with a panel'
+ line 1532: ' 2015contributors-conference-diversity2'
+ line 1533: ' Diversity'
+ line 1534: ' the Internet'
+ line 1535: ' 2015contributors-conference-diversity3'
+ line 1536: ' 2015contributors-conference-diversity4'
+ line 1538: ' 2015contributors-conference-diversity6'
+ line 1539: ' 2015contributors-conference-diversity7'
+ line 1540: ' the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie'
+ line 1541: ' Mellon University. Speakers included'
+ line 1542: ' 2015contributors-conference-diversity8'
+ line 1543: ' 2015contributors-conference-diversity9'
+ line 1544: ' 2015cc_1'
+ line 1634: ' 2019cc_8'
+ line 1635: ' 2019cc_9'
+ line 1636: ' Participant speaks at a podium in front of projected text about the problem'
+ line 1637: ' with anonymyzing data'
+ line 1638: ' 2019cc_10'
+ line 1639: ' Person with a microphone speaking to fellow participants in front of text'
+ line 1640: ' that reads p5.js will not add any new features except those that increase'
+ line 1641: ' access'
+ line 1642: ' 2019cc_11'
+ line 1643: ' 2019cc_12'
+ line 1644: ' 2019cc_13'
+ line 1645: ' 2019cc_14'
+ line 1646: ' 2019cc_15'
+ line 1647: ' Woman with microphone speaking to fellow participants with the text sacred'
+ line 1648: ' boundaries in the projection behind her'
+ line 1649: ' 2019cc_16'
+ line 1650: ' Overhead view of participants listening to a panel of people with an image'
+ line 1651: ' of a 3d rendered man on it'
+ line 1652: ' 2019cc_17'
+ line 1653: ' Participants sit around a table with their laptops and observe code on a'
+ line 1654: ' screen'
+ line 1655: ' 2019cc_18'
+ line 1656: ' 2019cc_19'
+ line 1657: ' 2019cc_20'
+ line 1658: ' 2019cc_21'
+ line 1659: ' 2019cc_22'
+ line 1660: ' Participants sitting around a large U shaped table looking towards the front'
+ line 1661: ' of the classroom'
+ line 1662: ' 2019cc_23'
+ line 1663: ' Man sitting in front of the classroom speaking energetically into a'
+ line 1664: ' microphone'
+ line 1665: ' 2019cc_24'
+ line 1666: ' Group photo of participants smiling enthusiastically with their hands in the'
+ line 1667: ' air'
+ line 1668: ' 2019cc_25'
+ line 1712: ' books-title'
+ line 1713: ' book-1-title'
+ line 1714: ' book-1-authors'
+ line 1715: ' book-1-publisher'
+ line 1716: ' book-1-pages'
+ line 1717: ' book-1-type'
+ line 1718: ' book-1-description'
+ line 1719: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1720: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1721: ' using JavaScript and HTML.'
+ line 1722: ' book-1-order-a'
+ line 1723: ' book-1-order-b'
+ line 1724: ' book-2-title'
+ line 1725: ' book-2-authors'
+ line 1726: ' Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón'
+ line 1727: ' Montoya-Moraga. Ilustraciones de Taeyoon Choi.'
+ line 1728: ' book-2-publisher'
+ line 1729: ' book-2-pages'
+ line 1730: ' book-2-type'
+ line 1731: ' book-2-description'
+ line 1732: ' Written by the lead p5.js developer and the founders of Processing, this'
+ line 1733: ' book provides an introduction to the creative possibilities of today''s Web,'
+ line 1734: ' using JavaScript and HTML.'
+ line 1735: ' book-2-order-a'
+ line 1736: ' book-2-order-b'
+ line 1737: ' book-3-title'
+ line 1738: ' book-3-authors'
+ line 1739: ' book-3-publisher'
+ line 1740: ' book-3-pages'
+ line 1741: ' book-3-type'
+ line 1742: ' book-3-description'
+ line 1743: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1744: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1745: ' furniture to complex and elegant infographics.'
+ line 1746: ' book-3-order-a'
+ line 1747: ' book-3-order-b'
+ line 1748: ' book-4-title'
+ line 1749: ' book-4-authors'
+ line 1750: ' book-4-publisher'
+ line 1751: ' book-4-pages'
+ line 1752: ' book-4-type'
+ line 1753: ' book-4-description'
+ line 1754: ' By using simple languages such as JavaScript in p5.js, artists and makers'
+ line 1755: ' can create everything from interactive typography and textiles to 3D-printed'
+ line 1756: ' furniture to complex and elegant infographics.'
+ line 1757: ' book-4-order-a'
+ line 1758: ' book-4-order-b'
+ line 1759: ' book-5-title'
+ line 1760: ' book-5-authors'
+ line 1761: ' book-5-publisher'
+ line 1762: ' book-5-pages'
+ line 1763: ' book-5-type'
+ line 1764: ' book-5-description'
+ line 1765: ' Learn coding from scratch in a highly engaging and visual manner using the'
+ line 1766: ' vastly popular JavaScript with the programming library p5.js. The skills you'
+ line 1767: ' will acquire from this book are highly transferable to a myriad of'
+ line 1768: ' industries and can be used towards building web applications, programmable'
+ line 1769: ' robots, or generative art.'
+ line 1770: ' book-5-order-a'
+ line 1771: ' book-5-order-b'
+ line 1800: ' Examples'
+ line 1801: ' back-examples'
+ line 1802: ' Structure'
+ line 1803: ' Form'
+ line 1804: ' Data'
+ line 1805: ' Arrays'
+ line 1806: ' Control'
+ line 1807: ' Image'
+ line 1808: ' Color'
+ line 1809: ' Math'
+ line 1810: ' Simulate'
+ line 1811: ' Interaction'
+ line 1812: ' Objects'
+ line 1813: ' Lights'
+ line 1814: ' Motion'
+ line 1815: ' Instance_Mode'
+ line 1816: ' Dom'
+ line 1817: ' Drawing'
+ line 1818: ' Transform'
+ line 1819: ' Typography'
+ line 1820: ' 3D'
+ line 1821: ' Input'
+ line 1822: ' Advanced_Data'
+ line 1823: ' Sound'
+ line 1824: ' Mobile'
+ line 1825: ' Hello_P5'
+ line 1829: ' Reference'
+ line 2005: ' showcase-title'
+ line 2006: ' showcase-intro1'
+ line 2007: ' showcase-intro2'
+ line 2008: ' showcase-intro3'
+ line 2009: ' We''re celebrating how people are using p5.js to make creative work,'
+ line 2010: ' learning, and open source more interesting and inclusive. Together, we make'
+ line 2011: ' community. During Summer 2019, we asked a few creators to share more about'
+ line 2012: ' how they''ve used p5.js through different projects and pieces.'
+ line 2013: ' showcase-intro4'
+ line 2014: ' The Summer 2020 Showcase is now open for submissions, nominate someone''s'
+ line 2015: ' p5.js work or your own to be featured here!'
+ line 2016: ' nominate-project'
+ line 2017: ' showcase-featuring'
+ line 2018: ' project-tag-art'
+ line 2019: ' project-tag-design'
+ line 2020: ' project-tag-code'
+ line 2021: ' project-tag-curriculum'
+ line 2022: ' project-tag-documentation'
+ line 2023: ' project-tag-game'
+ line 2024: ' project-tag-library'
+ line 2025: ' project-tag-organizing'
+ line 2026: ' project-tag-tool'
+ line 2027: ' project-tag-tutorial'
+ line 2028: ' project-roni'
+ line 2029: ' credit-roni'
+ line 2030: ' description-roni'
+ line 2031: ' Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a'
+ line 2032: ' plotter and pens.'
+ line 2033: ' project-phuong'
+ line 2034: ' credit-phuong'
+ line 2035: ' description-phuong'
+ line 2036: ' In this game developed with p5.play, help Airi fly by saying PEW. Created to'
+ line 2037: ' encourage people to get out of their comfort zone and feel more confident'
+ line 2038: ' about themselves regardless of what they do and how they look or sound.'
+ line 2039: ' project-daein'
+ line 2040: ' credit-daein'
+ line 2041: ' description-daein'
+ line 2042: ' An interactive typographic poster that uses a mobile device''s motion sensor'
+ line 2043: ' with p5.js.'
+ line 2044: ' project-qianqian'
+ line 2045: ' credit-qianqian'
+ line 2046: ' description-qianqian'
+ line 2047: ' A video channel with 1-minute videos in Mandarin about creative coding, art,'
+ line 2048: ' and technology, including p5.js tutorials for beginners. Available on'
+ line 2049: ' YouTube, Instagram, Bilibili, and TikTok.'
+ line 2050: ' project-casey-louise'
+ line 2051: ' credit-casey-louise'
+ line 2052: ' description-casey-louise'
+ line 2053: ' project-moon-xin'
+ line 2054: ' credit-moon-xin'
+ line 2055: ' description-moon-xin'
+ line 2056: ' Browser-based moving posters that use graphical systems, transformation'
+ line 2057: ' methods, and p5.js to address the connotations of a word less than 8'
+ line 2058: ' letters. Designed by students for a graphic design course (Visual Narrative'
+ line 2059: ' Systems) at the University of Georgia.'
+ line 2060: ' created-by'
+ line 2061: ' pronouns-female'
+ line 2062: ' creator-from-roni-cantor'
+ line 2063: ' project-links'
+ line 2064: ' project-links-text-1-roni-cantor'
+ line 2065: ' project-links-text-2-roni-cantor'
+ line 2066: ' project-q-1-1'
+ line 2067: ' project-q-1-2'
+ line 2068: ' project-a-1-1-roni-cantor'
+ line 2069: ' I just graduated from Ryerson University''s New Media program. Coming from 4'
+ line 2070: ' years of coding and making robots, I decided to take a break and play with'
+ line 2071: ' some more traditional forms of art—while still coding and playing with'
+ line 2072: ' robots.'
+ line 2073: ' project-a-1-2-roni-cantor'
+ line 2074: ' project-a-1-3-roni-cantor'
+ line 2075: ' project-a-1-4-roni-cantor'
+ line 2076: ' project-q-2'
+ line 2077: ' project-a-2-1-roni-cantor'
+ line 2078: ' I used p5.js in this project to generate the sine wave and lerp (linear'
+ line 2079: ' interpolation) formulas and display the visuals in the'
+ line 2080: ' project-a-2-2-roni-cantor'
+ line 2081: ' . I then used a feature in my code that exported my programmed graphic into'
+ line 2082: ' an'
+ line 2083: ' project-a-2-3-roni-cantor'
+ line 2084: ' project-a-2-4-roni-cantor'
+ line 2085: ' —so that it understood where to draw the lines that I programmed. I sent'
+ line 2086: ' this information to the plotter with a program called'
+ line 2087: ' project-a-2-5-roni-cantor'
+ line 2088: ' project-q-3'
+ line 2089: ' project-a-3-roni-cantor'
+ line 2090: ' project-q-4'
+ line 2091: ' Did you face any challenges working on this project? If so, how did you'
+ line 2092: ' overcome them?'
+ line 2093: ' project-a-4-roni-cantor'
+ line 2094: ' It was my first time using p5.js, Inkscape, and a plotter! I really'
+ line 2095: ' benefited from the people around me who had used p5 before, as well as'
+ line 2096: ' online guides and forums.'
+ line 2097: ' project-q-5'
+ line 2098: ' project-a-5-roni-cantor'
+ line 2099: ' project-q-6'
+ line 2100: ' project-a-6-roni-cantor'
+ line 2101: ' project-resources'
+ line 2102: ' creator-from-qianqian'
+ line 2103: ' interview-link-qianqian'
+ line 2104: ' project-a-1-1-qianqian'
+ line 2105: ' project-a-1-2-qianqian'
+ line 2106: ' My partner introduced me to p5.js, which I learned mainly by watching free'
+ line 2107: ' online video tutorials. My first p5.js project was drawing some shapes with'
+ line 2108: ' different colors.'
+ line 2109: ' project-a-2-1-qianqian'
+ line 2110: ' This project started with an idea of teaching my mom, who lives in China and'
+ line 2111: ' doesn’t speak English, to code with p5.js. This project was difficult on'
+ line 2112: ' multiple levels, and I wanted to start by identifying the main reasons why'
+ line 2113: ' it’s more challenging for someone like my mother to learn to code—primarily'
+ line 2114: ' due to the lack of free creative coding education resources. Most of the'
+ line 2115: ' free resources to learn creative coding are unavailable in China. The p5.js'
+ line 2116: ' tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are'
+ line 2117: ' inaccessible in China because of internet censorship.'
+ line 2118: ' project-a-2-2-qianqian'
+ line 2119: ' project-a-2-3-qianqian'
+ line 2120: ' , but the more I watched coding tutorials online, the more I realized how'
+ line 2121: ' difficult it is to find other womxn and people of color teaching coding,'
+ line 2122: ' especially in Mandarin. I wanted to help other Chinese womxn relate to'
+ line 2123: ' creative coding.'
+ line 2124: ' project-a-2-4-qianqian'
+ line 2125: ' I am working on opening up the video channels to other Chinese creatives who'
+ line 2126: ' want to contribute to the educational resource together, like interviews and'
+ line 2127: ' guest tutorials. If you are interested in teaching/talking about creative'
+ line 2128: ' coding in Mandarin, HMU!'
+ line 2129: ' project-a-3-1-qianqian'
+ line 2130: ' project-a-3-2-qianqian'
+ line 2131: ' project-a-4-1-qianqian'
+ line 2132: ' Learning to code in a second language was difficult and the lack of'
+ line 2133: ' community made this process even harder. I hope to speak from my experience'
+ line 2134: ' as a beginner and someone who once felt like an outsider to the creative'
+ line 2135: ' coding and video tutorial world.'
+ line 2136: ' project-a-4-2-qianqian'
+ line 2137: ' I spend a lot of time researching the latest technology for my videos. In'
+ line 2138: ' the end, I decided on using my phone to record and iMovie to edit. I hope to'
+ line 2139: ' encourage others that it doesn’t take a lot of expensive gears to get'
+ line 2140: ' started making instructional videos.'
+ line 2141: ' project-a-4-3-qianqian'
+ line 2142: ' Another issue I came across was my own fear of putting myself online. I'
+ line 2143: ' first had to get over my anxiety of making mistakes in the videos or'
+ line 2144: ' receiving negative comments online. Often womxn and people of color are'
+ line 2145: ' targets for online harassment. I’m hoping to help set an example for other'
+ line 2146: ' womxn and people of color that it’s ok to put yourselves online and'
+ line 2147: ' strengthen your communities by sharing your knowledge. Eventually, we will'
+ line 2148: ' be able to stop online harassment by creating strong diverse communities.'
+ line 2149: ' project-a-5-1-qianqian'
+ line 2150: ' project-a-5-2-qianqian'
+ line 2151: ' creator-from-phuong'
+ line 2152: ' project-a-1-1-phuong'
+ line 2153: ' link-1-phuong'
+ line 2154: ' link-2-phuong'
+ line 2155: ' link-3-phuong'
+ line 2156: ' project-a-1-2-phuong'
+ line 2157: ' project-a-1-3-phuong'
+ line 2158: ' I was taking a course at the School of Machines in Berlin this summer'
+ line 2159: ' called! "'
+ line 2160: ' project-a-1-4-phuong'
+ line 2161: ' project-a-2-1-phuong'
+ line 2162: ' I used p5.js to work on the visual part of the game. The animation sprites'
+ line 2163: ' for Airi and the ghosts were drawn on an iPad app called'
+ line 2164: ' project-a-2-2-phuong'
+ line 2165: ' project-a-2-3-phuong'
+ line 2166: ' project-a-2-4-phuong'
+ line 2167: ' p5-sketch-by-chjno-phuong'
+ line 2168: ' project-a-2-5-phuong'
+ line 2169: ' . I set a condition so whenever the word "pew" or a mouse click was'
+ line 2170: ' detected, the scrolling speed would change to make an illusion of Airi'
+ line 2171: ' flying up. When the user does not do anything, the scrolling speed is'
+ line 2172: ' negative, which makes it look like Airi is falling down.'
+ line 2173: ' project-a-2-6-phuong'
+ line 2174: ' project-a-2-7-phuong'
+ line 2175: ' project-a-3-1-phuong'
+ line 2176: ' I really love how easily you can create, manipulate, and delete HTML blocks'
+ line 2177: ' and classes with the'
+ line 2178: ' project-a-3-2-phuong'
+ line 2179: ' project-a-3-3-phuong'
+ line 2180: ' project-a-3-4-phuong'
+ line 2181: ' project-a-4-1-phuong'
+ line 2182: ' There were a lot of challenges simply because p5.js was something new to me.'
+ line 2183: ' I did not work much with JavaScript in general before. Reading documentation'
+ line 2184: ' and searching for similar examples helped a lot.'
+ line 2185: ' project-a-5-1-phuong'
+ line 2186: ' school-of-machines-phuong'
+ line 2187: ' project-a-5-2-phuong'
+ line 2188: ' ! They try hard to connect the most creative people in the world and they do'
+ line 2189: ' it well so far. ❤️'
+ line 2190: ' pronouns-male'
+ line 2191: ' creator-from-chung'
+ line 2192: ' link-1-casey-louise'
+ line 2193: ' link-2-casey-louise'
+ line 2194: ' link-1-chung'
+ line 2195: ' link-2-chung'
+ line 2196: ' link-3-chung'
+ line 2197: ' project-a-1-1-chung'
+ line 2198: ' I am a graphic designer and a faculty member at Maryland Institute College'
+ line 2199: ' of Art, where I mainly teach coding (with p5.js and Processing, of course)'
+ line 2200: ' and motion graphics.'
+ line 2201: ' project-a-1-2-chung'
+ line 2202: ' project-a-1-3-chung'
+ line 2203: ' project-a-2-1-chung'
+ line 2204: ' This summer, I gave myself a challenge of making typographic posters with'
+ line 2205: ' coding, and this is one of the posters I made. I didn’t know until very'
+ line 2206: ' recently that I could use motion sensor data with p5.js. I was also watching'
+ line 2207: ' dan-shiffman-matterjs-tutorial'
+ line 2208: ' project-a-2-2-chung'
+ line 2209: ' project-a-3-1-chung'
+ line 2210: ' There are many things I love about p5.js such as the online community and'
+ line 2211: ' beginner friendliness. What I really like right now is the'
+ line 2212: ' project-a-3-2-chung'
+ line 2213: ' , with which I can not only work online for myself but also share URLs'
+ line 2214: ' quickly in the present mode. For this project in particular, I had to do a'
+ line 2215: ' lot of testing on my phone, and it was much easier and quicker than'
+ line 2216: ' committing to GitHub.'
+ line 2217: ' project-a-4-1-chung'
+ line 2218: ' project-a-4-2-chung'
+ line 2219: ' project-a-4-3-chung'
+ line 2220: ' project-a-5-1-chung'
+ line 2221: ' As mentioned above, if you want to render out frames and video files out of'
+ line 2222: ' p5.js sketches, check out my'
+ line 2223: ' project-a-5-2-chung'
+ line 2224: ' creator-from-casey-louise'
+ line 2225: ' project-a-1-1-casey-louise'
+ line 2226: ' Casey'
+ line 2227: ' interactive spaces, physical and digital.'
+ line 2228: ' project-a-1-2-casey-louise'
+ line 2229: ' Louise'
+ line 2230: ' interactive spaces based on sensor technologies.'
+ line 2231: ' project-a-1-3-casey-louise'
+ line 2232: ' Casey'
+ line 2233: ' I had been dabbling in'
+ line 2234: ' project-a-1-4-casey-louise'
+ line 2235: ' project-a-1-5-casey-louise'
+ line 2236: ' Louise'
+ line 2237: ' playful. I’m a C# programmer, so this was a good segway into JavaScript for'
+ line 2238: ' me.'
+ line 2239: ' project-a-2-1-casey-louise'
+ line 2240: ' Casey'
+ line 2241: ' curious if I could use them in p5.js. Then I heard about a grant for open'
+ line 2242: ' source, storytelling, and learning resource projects at ITP called'
+ line 2243: ' project-a-2-2-casey-louise'
+ line 2244: ' . Since I wasn''t finding much in the way of p5.js + shader documentation, I'
+ line 2245: ' decided to figure out how they''re implemented in p5.js and create a resource'
+ line 2246: ' for others to learn. When I told Louise about the project, she was'
+ line 2247: ' immediately excited about learning and teaching shaders in p5.js. She''s been'
+ line 2248: ' great about making sure the project is a learning resource and not just a'
+ line 2249: ' collection of examples.'
+ line 2250: ' project-a-3-1-casey-louise'
+ line 2251: ' project-a-3-2-casey-louise'
+ line 2252: ' project-a-3-3-casey-louise'
+ line 2253: ' project-a-3-4-casey-louise'
+ line 2254: ' project-a-3-5-casey-louise'
+ line 2255: ' project-a-4-1-casey-louise'
+ line 2256: ' Casey'
+ line 2257: ' reaching out to amazing people, asking questions, and asking for permission'
+ line 2258: ' to use their examples in our project.'
+ line 2259: ' adam-ferris-repo-casey-louise'
+ line 2260: ' project-a-4-2-casey-louise'
+ line 2261: ' project-a-4-3-casey-louise'
+ line 2262: ' project-a-4-4-casey-louise'
+ line 2263: ' webgl-casey-louise'
+ line 2264: ' project-a-4-5-casey-louise'
+ line 2265: ' project-a-4-6-casey-louise'
+ line 2266: ' Louise'
+ line 2267: ' Luckily, there were some very well-documented examples on GitHub by Adam'
+ line 2268: ' Ferriss. Our aim was to do so in a way that a complete beginner can'
+ line 2269: ' understand how to implement it, so it was as much a technical challenge as'
+ line 2270: ' it was a challenge in teaching code to strangers and beginners. Here we drew'
+ line 2271: ' inspiration from the way the'
+ line 2272: ' openframeworks-book-casey-louise'
+ line 2273: ' project-a-4-7-casey-louise'
+ line 2274: ' project-a-5-1-casey-louise'
+ line 2275: ' project-a-5-2-casey-louise'
+ line 2276: ' pronouns-nonbinary'
+ line 2277: ' creator-from-moon'
+ line 2278: ' posters-by'
+ line 2279: ' project-a-1-1-moon'
+ line 2280: ' Moon'
+ line 2281: ' summer, I taught a graphic design course in the University of Georgia'
+ line 2282: ' Cortona program in Italy, introducing some basics of p5.js. This fall, I am'
+ line 2283: ' planning to teach and to study digital platforms at UGA.'
+ line 2284: ' project-a-1-2-moon'
+ line 2285: ' project-a-1-3-moon'
+ line 2286: ' project-a-1-4-moon'
+ line 2287: ' pcd-la-moon'
+ line 2288: ' project-a-1-5-moon'
+ line 2289: ' . They helped me with the tools and logics of p5.js. It was an excellent'
+ line 2290: ' teaching and learning experience.'
+ line 2291: ' project-a-2-1-moon'
+ line 2292: ' codetrain-moon'
+ line 2293: ' project-a-2-2-moon'
+ line 2294: ' p5-reference-moon'
+ line 2295: ' project-a-2-3-moon'
+ line 2296: ' project-a-3-1-moon'
+ line 2297: ' project-a-3-2-moon'
+ line 2298: ' project-a-3-3-moon'
+ line 2299: ' project-a-3-4-moon'
+ line 2300: ' . I was able to use and to teach this tool to visualize various ideas about'
+ line 2301: ' time in motion.'
+ line 2302: ' project-a-4-1-moon'
+ line 2303: ' It was challenging for me, a beginner, to understand the overall structure'
+ line 2304: ' of p5.js and how code works in general. I had to repeat the p5.js basics a'
+ line 2305: ' couple of times, and then I drew a chart to memorize and to teach the way I'
+ line 2306: ' understood the p5.js structure and code with strong constraints I set up. It'
+ line 2307: ' was an excellent teaching and learning experience.'
+ line 2308: ' project-a-5-1-moon'
+ line 2309: ' project-a-5-2-moon'
+ line 2310: teach
+ line 2311: ' teach-title2'
+ line 2312: ' teach-intro1'
+ line 2313: ' Every teaching has its own unique goals, messages, conditions, and'
+ line 2314: ' environments. '
+ line 2315: ' teach-intro2'
+ line 2316: ' By documenting and sharing p5 workshops, classes, and materials, we hope to'
+ line 2317: ' better connect the p5.js learner and educator communities around the world. '
+ line 2318: ' teach-intro3'
+ line 2319: ' teach-intro4'
+ line 2320: ' teach-heading'
+ line 2321: ' teach-search-filter'
+ line 2322: ' teach-filter1'
+ line 2323: ' teach-filter1-label1'
+ line 2324: ' teach-filter1-label2'
+ line 2325: ' teach-filter1-label3'
+ line 2326: ' teach-filter1-label4'
+ line 2327: ' teach-filter1-label5'
+ line 2328: ' teach-filter1-label6'
+ line 2329: ' teach-filter1-label7'
+ line 2330: ' teach-filter1-label8'
+ line 2331: ' teach-filter1-label9'
+ line 2332: ' teach-filter1-label10'
+ line 2333: ' teach-filter1-label11'
+ line 2334: ' teach-filter1-label12'
+ line 2335: ' teach-filter1-label13'
+ line 2336: ' teach-filter1-label14'
+ line 2337: ' teach-filter1-label15'
+ line 2338: ' teach-filter1-label16'
+ line 2339: ' teach-filter2'
+ line 2340: ' teach-filter2-label1'
+ line 2341: ' teach-filter2-label2'
+ line 2342: ' teach-filter2-label3'
+ line 2343: ' teach-filter2-label4'
+ line 2344: ' teach-filter2-label5'
+ line 2345: ' teach-filter2-label6'
+ line 2346: ' teach-filter2-label7'
+ line 2347: ' teach-filter3'
+ line 2348: ' teach-filter4'
+ line 2349: ' teach-filter4-label1'
+ line 2350: ' teach-filter4-label2'
+ line 2351: ' teach-filter4-label3'
+ line 2352: ' teach-case-subtitle1'
+ line 2353: ' teach-case-subtitle2'
+ line 2354: ' teach-case-subtitle3'
+ line 2355: ' teach-case-subtitle4'
+ line 2356: ' teach-case-subtitle5'
+ line 2357: ' teach-case1-title'
+ line 2358: ' teach-case1-lead-name'
+ line 2359: ' teach-case1-content1'
+ line 2360: ' teach-case1-content1-1'
+ line 2361: ' teach-case1-content2'
+ line 2362: ' teach-case1-content3'
+ line 2363: ' teach-case1-content4'
+ line 2364: ' To introduce a new public to programming through fun and compelling'
+ line 2365: ' examples. '
+ line 2366: ' teach-case1-content5'
+ line 2367: ' Method'
+ line 2368: ' each times. The students were using (Ubuntu) machines with the p5.js web'
+ line 2369: ' editor. I was teaching using a video projector as well as a board.'
+ line 2370: ' teach-case1-content5-1'
+ line 2371: ' Materials'
+ line 2372: ' links available in '
+ line 2373: ' teach-case2-title'
+ line 2374: ' Making The Thing that Makes the Thing'
+ line 2375: ' with p5.js'
+ line 2376: ' teach-case2-lead-name'
+ line 2377: ' teach-case2-content1'
+ line 2378: ' teach-case2-content1-1'
+ line 2379: ' teach-case2-content2'
+ line 2380: ' Our participants included art/design students & professionals, creative'
+ line 2381: ' coding enthusiasts. We had close to 50 participants.'
+ line 2382: ' teach-case2-content3'
+ line 2383: ' teach-case2-content4'
+ line 2384: ' To explore generative art & design and recreate some classical works'
+ line 2385: ' with p5.js. '
+ line 2386: ' teach-case2-content5'
+ line 2387: ' teach-case2-content5-1'
+ line 2388: ' teach-case2-content5-2'
+ line 2389: ' teach-case2-content5-3'
+ line 2390: ' teach-case2-content5-4'
+ line 2391: ' teach-case2-content5-5'
+ line 2392: ' teach-case3-title'
+ line 2393: ' teach-case3-lead-name'
+ line 2394: ' teach-case3-speech'
+ line 2395: ' teach-case3-content1'
+ line 2396: ' teach-case3-content1-1'
+ line 2397: ' teach-case3-content2'
+ line 2398: ' Our participants included art/design students & professionals, creative'
+ line 2399: ' coding enthusiasts. We had close to 50 participants.'
+ line 2400: ' teach-case3-content3'
+ line 2401: ' teach-case3-content4'
+ line 2402: ' To build a teacher and student community around p5 for middle and high'
+ line 2403: ' school.'
+ line 2404: ' teach-case3-content5'
+ line 2405: ' A half-day of workshop led by volunteer teachers. We saw lots of different'
+ line 2406: ' methods and materials. Most used some sort of slides or documentation, some'
+ line 2407: ' live coding using an editor, with work time for participant to remix.'
+ line 2408: ' teach-case3-content5-1'
+ line 2409: ' teach-case3-content5-2'
+ line 2410: ' teach-case3-content5-3'
+ line 2411: ' teach-case4-title'
+ line 2412: ' teach-case4-lead-name'
+ line 2413: ' teach-case4-speech'
+ line 2414: ' teach-case4-content1'
+ line 2415: ' teach-case4-content1-1'
+ line 2416: ' teach-case4-content2'
+ line 2417: ' I had around 16 students in the workshop, and a team including 3 people from'
+ line 2418: ' the PlusCode festival, and one person at the venue.'
+ line 2419: ' teach-case4-content3'
+ line 2420: ' teach-case4-content4'
+ line 2421: ' Introduction to beginners and artists of graphic web programming and open'
+ line 2422: ' source, using p5.js, in Spanish '
+ line 2423: ' teach-case4-content5'
+ line 2424: ' teach-case4-content5-1'
+ line 2425: ' teach-case4-content5-2'
+ line 2426: ' teach-case4-content5-3'
+ line 2427: ' teach-case4-content5-4'
+ line 2428: ' teach-case5-title'
+ line 2429: ' teach-case5-lead-name'
+ line 2430: ' teach-case5-speech'
+ line 2431: ' My greatest source of uncertainty in developing the workshop was whether it'
+ line 2432: ' was trying to teach art to programmers or to teach programming to artists.'
+ line 2433: ' teach-case5-content1'
+ line 2434: ' teach-case5-content1-1'
+ line 2435: ' teach-case5-content1-2'
+ line 2436: ' teach-case5-content1-3'
+ line 2437: ' teach-case5-content2'
+ line 2438: ' teach-case5-content3'
+ line 2439: ' teach-case5-content4'
+ line 2440: ' To introduce p5.js to artists with little or no programming experience and'
+ line 2441: ' to suggest one way an analogue practice can migrate to a digital form.'
+ line 2442: ' teach-case5-content5'
+ line 2443: ' A printed workbook with activities that used the p5.js web editor to show'
+ line 2444: ' how translate an physical drawing into a digital drawing.'
+ line 2445: ' teach-case5-content5-1'
+ line 2446: ' teach-case5-content5-2'
+ line 2447: ' teach-case5-content5-3'
+ line 2448: ' teach-case6-title'
+ line 2449: ' teach-case6-lead-name'
+ line 2450: ' teach-case6-speech'
+ line 2451: ' I love p5.js because it''s so easy to read and write code in p5.js. Coding in'
+ line 2452: ' your everyday life!'
+ line 2453: ' teach-case6-content1'
+ line 2454: ' teach-case6-content1-1'
+ line 2455: ' teach-case6-content2'
+ line 2456: ' teach-case6-content3'
+ line 2457: ' teach-case6-content4'
+ line 2458: ' teach-case6-content5'
+ line 2459: ' teach-case6-content5-1'
+ line 2460: ' teach-case6-content5-2'
+ line 2461: ' teach-case6-content5-3'
+ line 2462: ' teach-case6-content5-4'
+ line 2463: ' teach-case6-content5-5'
+ line 2464: ' teach-case7-title'
+ line 2465: ' teach-case7-lead-name'
+ line 2466: ' teach-case7-speech'
+ line 2467: ' Coding in p5.js is a lot of fun. If you haven''t started yet, I encourage you'
+ line 2468: ' to give it a try!'
+ line 2469: ' teach-case7-content1'
+ line 2470: ' teach-case7-content1-1'
+ line 2471: ' teach-case7-content2'
+ line 2472: ' teach-case7-content3'
+ line 2473: ' teach-case7-content4'
+ line 2474: ' teach-case7-content5'
+ line 2475: ' teach-case7-content5-1'
+ line 2476: ' teach-case8-title'
+ line 2477: ' teach-case8-lead-name'
+ line 2478: ' teach-case8-content1'
+ line 2479: ' teach-case8-content1-1'
+ line 2480: ' teach-case8-content2'
+ line 2481: ' teach-case8-content3'
+ line 2482: ' teach-case8-content4'
+ line 2483: ' teach-case8-content5'
+ line 2484: ' teach-case8-content5-1'
+ line 2485: ' teach-case8-content5-2'
+ line 2486: ' teach-case9-title'
+ line 2487: ' teach-case9-lead-name'
+ line 2488: ' teach-case9-content1'
+ line 2489: ' teach-case9-content1-1'
+ line 2490: ' teach-case9-content2'
+ line 2491: ' Students at Interactive Telecommunications Program, New York University. 16'
+ line 2492: ' people.'
+ line 2493: ' teach-case9-content3'
+ line 2494: ' teach-case9-content4'
+ line 2495: ' The goal of this class is to learn and understand common machine learning'
+ line 2496: ' techniques and apply them to generate creative outputs in the browser using'
+ line 2497: ' ml5.js and p5.js.'
+ line 2498: ' teach-case9-content5'
+ line 2499: ' This class is a mix of lectures, coding sessions, group discussions, and'
+ line 2500: ' presentations. I used '
+ line 2501: ' teach-case9-content5-1'
+ line 2502: ' teach-case9-content5-2'
+ line 2503: ' teach-case9-content5-3'
+ line 2504: ' teach-case10-title'
+ line 2505: ' teach-case10-lead-name'
+ line 2506: ' teach-case10-content1'
+ line 2507: ' teach-case10-content3'
+ line 2508: ' teach-case10-content4'
+ line 2509: ' Introduce learners (potentially with no coding experiences at all) to the'
+ line 2510: ' very basics of p5.js (and JavaScript), in order to encourage creative coding'
+ line 2511: ' and enable them to pursue own projects in a safe environment.'
+ line 2512: ' teach-case10-content5'
+ line 2513: ' p5.js source code (for the introductory project), JavaScript source code'
+ line 2514: ' (illustrating some basic JavaScript functionalities), accompanying slides in'
+ line 2515: ' .pdf format, all hosted publicly on GitHub. '
+ line 2516: ' teach-case10-content5-1'
+ line 2517: ' teach-case10-content5-2'
+ line 2518: ' teach-case11-title'
+ line 2519: ' teach-case11-lead-name'
+ line 2520: ' teach-case11-content1'
+ line 2521: ' teach-case11-content1-1'
+ line 2522: ' teach-case11-content2'
+ line 2523: ' teach-case11-content3'
+ line 2524: ' teach-case11-content4'
+ line 2525: ' Over the course of three workshops, we will draw and create patterns using'
+ line 2526: ' p5.js, an open-source graphical library; we will learn and apply'
+ line 2527: ' computational concepts to transform patterns and finally, we will bring a'
+ line 2528: ' weaving to life with electronic microcontrollers.'
+ line 2529: ' teach-case11-content5'
+ line 2530: ' teach-case11-content5-1'
+ line 2531: ' Materials'
+ line 2532: ' pattern weaving tool.'
+ line 2533: ' teach-case11-content5-2'
+ line 2534: ' teach-case11-content5-3'
+ line 2535: ' teach-case11-content5-4'
+ line 2536: ' teach-case11-content5-5'
+ line 2537: ' teach-case12-title'
+ line 2538: ' teach-case12-lead-name'
+ line 2539: ' teach-case12-speech'
+ line 2540: ' teach-case12-content1'
+ line 2541: ' teach-case12-content1-1'
+ line 2542: ' teach-case12-content2'
+ line 2543: ' teach-case12-content3'
+ line 2544: ' teach-case12-content4'
+ line 2545: ' teach-case12-content5-1'
+ line 2546: ' teach-case12-content5-2'
+ line 2547: ' teach-case13-title'
+ line 2548: ' teach-case13-lead-name'
+ line 2549: ' teach-case13-speech'
+ line 2550: ' teach-case13-content1'
+ line 2551: ' teach-case13-content1-1'
+ line 2552: ' teach-case13-content2'
+ line 2553: ' teach-case13-content3'
+ line 2554: ' teach-case13-content4'
+ line 2555: ' teach-case13-content5-1'
+ line 2556: ' teach-case13-content5-2'
+ line 2557: ' teach-case14-title'
+ line 2558: ' teach-case14-lead-name'
+ line 2559: ' teach-case14-speech'
+ line 2560: ' teach-case14-content1'
+ line 2561: ' teach-case14-content1-1'
+ line 2562: ' teach-case14-content2'
+ line 2563: ' teach-case14-content3'
+ line 2564: ' teach-case14-content4'
+ line 2565: ' teach-case14-content5-1'
+ line 2566: ' teach-case14-content5-2'
+ line 2567: ' teach-case15-title'
+ line 2568: ' teach-case15-lead-name'
+ line 2569: ' teach-case15-speech'
+ line 2570: ' teach-case15-content1'
+ line 2571: ' teach-case15-content1-1'
+ line 2572: ' teach-case15-content2'
+ line 2573: ' teach-case15-content3'
+ line 2574: ' teach-case15-content4'
+ line 2575: ' teach-case15-content5-1'
+ line 2576: ' teach-case15-content5-2'
+ line 2577: ' teach-case16-title'
+ line 2578: ' teach-case16-lead-name'
+ line 2579: ' teach-case16-speech'
+ line 2580: ' teach-case16-content1'
+ line 2581: ' teach-case16-content1-1'
+ line 2582: ' teach-case16-content2'
+ line 2583: ' teach-case16-content3'
+ line 2584: ' teach-case16-content4'
+ line 2585: ' teach-case16-content5-1'
+ line 2586: ' teach-case16-content5-2'
+ line 2587: ' teach-case17-title'
+ line 2588: ' teach-case17-lead-name'
+ line 2589: ' teach-case17-speech'
+ line 2590: ' teach-case17-content1'
+ line 2591: ' teach-case17-content1-1'
+ line 2592: ' teach-case17-content2'
+ line 2593: ' teach-case17-content3'
+ line 2594: ' teach-case17-content4'
+ line 2595: ' teach-case17-content5-1'
+ line 2596: ' teach-case17-content5-2'
+ line 598: ' color-custom-ranges-li1x2'
+ line 601: ' color-custom-ranges-li2x2'
+ line 604: ' color-custom-ranges-li3x2'
diff --git a/package-lock.json b/package-lock.json
index 645510e6b6..2d76bdc862 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -61,8 +61,7 @@
"version": "0.7.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.7.0.tgz",
"integrity": "sha512-ONhaKPIufzzrlNbqtWFFd+jlnemX6lJAgq9ZeiZtS7I1PIf/la7CW4m83rTXRnVnsMbW2k56pGYu7AUFJD9Pow==",
- "dev": true,
- "optional": true
+ "dev": true
},
"@types/events": {
"version": "3.0.0",
@@ -538,15 +537,13 @@
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/arch/-/arch-2.1.1.tgz",
"integrity": "sha512-BLM56aPo9vLLFVa8+/+pJLnrZ7QGGTVHWsCwieAWT9o9K8UeGaQbzZbGoabWLOo2ksBCztoXdqBZBplqLDDCSg==",
- "dev": true,
- "optional": true
+ "dev": true
},
"archive-type": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/archive-type/-/archive-type-4.0.0.tgz",
"integrity": "sha1-+S5yIzBW38aWlHJ0nCZ72wRrHXA=",
"dev": true,
- "optional": true,
"requires": {
"file-type": "^4.2.0"
},
@@ -555,8 +552,7 @@
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-4.4.0.tgz",
"integrity": "sha1-G2AOX8ofvcboDApwxxyNul95BsU=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -1259,6 +1255,12 @@
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
"dev": true
},
+ "at-least-node": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/at-least-node/-/at-least-node-1.0.0.tgz",
+ "integrity": "sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==",
+ "dev": true
+ },
"atob": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/atob/-/atob-2.1.1.tgz",
@@ -2580,7 +2582,6 @@
"resolved": "https://registry.npmjs.org/bin-build/-/bin-build-3.0.0.tgz",
"integrity": "sha512-jcUOof71/TNAI2uM5uoUaDq2ePcVBQ3R/qhxAz1rX7UfvduAL/RXD3jXzvn8cVcDJdGVkiR1shal3OH0ImpuhA==",
"dev": true,
- "optional": true,
"requires": {
"decompress": "^4.0.0",
"download": "^6.2.2",
@@ -2594,7 +2595,6 @@
"resolved": "https://registry.npmjs.org/bin-check/-/bin-check-4.1.0.tgz",
"integrity": "sha512-b6weQyEUKsDGFlACWSIOfveEnImkJyK/FGW6FAG42loyoquvjdtOIqO6yBFzHyqyVVhNgNkQxxx09SFLK28YnA==",
"dev": true,
- "optional": true,
"requires": {
"execa": "^0.7.0",
"executable": "^4.1.0"
@@ -2605,7 +2605,6 @@
"resolved": "https://registry.npmjs.org/bin-version/-/bin-version-3.1.0.tgz",
"integrity": "sha512-Mkfm4iE1VFt4xd4vH+gx+0/71esbfus2LsnCGe8Pi4mndSPyT+NGES/Eg99jx8/lUGWfu3z2yuB/bt5UB+iVbQ==",
"dev": true,
- "optional": true,
"requires": {
"execa": "^1.0.0",
"find-versions": "^3.0.0"
@@ -2616,7 +2615,6 @@
"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
"integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
"dev": true,
- "optional": true,
"requires": {
"nice-try": "^1.0.4",
"path-key": "^2.0.1",
@@ -2630,7 +2628,6 @@
"resolved": "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz",
"integrity": "sha512-adbxcyWV46qiHyvSp50TKt05tB4tK3HcmF7/nxfAdhnox83seTDbwnaqKO4sXRy7roHAIFqJP/Rw/AuEbX61LA==",
"dev": true,
- "optional": true,
"requires": {
"cross-spawn": "^6.0.0",
"get-stream": "^4.0.0",
@@ -2646,7 +2643,6 @@
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz",
"integrity": "sha512-GMat4EJ5161kIy2HevLlr4luNjBgvmj413KaQA7jt4V8B4RDsfpHk7WQ9GVqfYyyx8OS/L66Kox+rJRNklLK7w==",
"dev": true,
- "optional": true,
"requires": {
"pump": "^3.0.0"
}
@@ -2656,7 +2652,6 @@
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
"dev": true,
- "optional": true,
"requires": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
@@ -2669,7 +2664,6 @@
"resolved": "https://registry.npmjs.org/bin-version-check/-/bin-version-check-4.0.0.tgz",
"integrity": "sha512-sR631OrhC+1f8Cvs8WyVWOA33Y8tgwjETNPyyD/myRBXLkfS/vl74FmH/lFcRl9KY3zwGh7jFhvyk9vV3/3ilQ==",
"dev": true,
- "optional": true,
"requires": {
"bin-version": "^3.0.0",
"semver": "^5.6.0",
@@ -2680,8 +2674,7 @@
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
"integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -2690,7 +2683,6 @@
"resolved": "https://registry.npmjs.org/bin-wrapper/-/bin-wrapper-4.1.0.tgz",
"integrity": "sha512-hfRmo7hWIXPkbpi0ZltboCMVrU+0ClXR/JgbCKKjlDjQf6igXa7OwdqNcFWQZPZTgiY7ZpzE3+LjjkLiTN2T7Q==",
"dev": true,
- "optional": true,
"requires": {
"bin-check": "^4.1.0",
"bin-version-check": "^4.0.0",
@@ -2705,7 +2697,6 @@
"resolved": "https://registry.npmjs.org/download/-/download-7.1.0.tgz",
"integrity": "sha512-xqnBTVd/E+GxJVrX5/eUJiLYjCGPwMpdL+jGhGU57BvtcA7wwhtHVbXBeUk51kOpW3S7Jn3BQbN9Q1R1Km2qDQ==",
"dev": true,
- "optional": true,
"requires": {
"archive-type": "^4.0.0",
"caw": "^2.0.1",
@@ -2725,8 +2716,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -2734,15 +2724,13 @@
"version": "8.1.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-8.1.0.tgz",
"integrity": "sha512-qyQ0pzAy78gVoJsmYeNgl8uH8yKhr1lVhW7JbzJmnlRi0I4R2eEDEJZVKG8agpDnLpacwNbDhLNG/LMdxHD2YQ==",
- "dev": true,
- "optional": true
+ "dev": true
},
"got": {
"version": "8.3.2",
"resolved": "https://registry.npmjs.org/got/-/got-8.3.2.tgz",
"integrity": "sha512-qjUJ5U/hawxosMryILofZCkm3C84PLJS/0grRIpjAwu+Lkxxj5cxeCU25BG0/3mDSpXKTyZr8oh8wIgLaH0QCw==",
"dev": true,
- "optional": true,
"requires": {
"@sindresorhus/is": "^0.7.0",
"cacheable-request": "^2.1.1",
@@ -2767,8 +2755,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -2776,15 +2763,13 @@
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.4.1.tgz",
"integrity": "sha512-HNa1A8LvB1kie7cERyy21VNeHb2CWJJYqyyC2o3klWFfMGlFmWv2Z7sFgZH8ZiaYL95ydToKTFVXgMV/Os0bBQ==",
- "dev": true,
- "optional": true
+ "dev": true
},
"p-event": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/p-event/-/p-event-2.3.1.tgz",
"integrity": "sha512-NQCqOFhbpVTMX4qMe8PF8lbGtzZ+LCiN7pcNrb/413Na7+TRoe1xkKUzuWa/YEJdGQ0FvKtj35EEbDoVPO2kbA==",
"dev": true,
- "optional": true,
"requires": {
"p-timeout": "^2.0.1"
}
@@ -2794,7 +2779,6 @@
"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-2.0.1.tgz",
"integrity": "sha512-88em58dDVB/KzPEx1X0N3LwFfYZPyDc4B6eF38M1rk9VTZMbxXXgjugz8mmwpS9Ox4BDZ+t6t3QP5+/gazweIA==",
"dev": true,
- "optional": true,
"requires": {
"p-finally": "^1.0.0"
}
@@ -2803,22 +2787,19 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
"integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
- "dev": true,
- "optional": true
+ "dev": true
},
"prepend-http": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
"integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
- "dev": true,
- "optional": true
+ "dev": true
},
"url-parse-lax": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz",
"integrity": "sha1-FrXK/Afb42dsGxmZF3gj1lA6yww=",
"dev": true,
- "optional": true,
"requires": {
"prepend-http": "^2.0.0"
}
@@ -2993,7 +2974,6 @@
"resolved": "https://registry.npmjs.org/cacheable-request/-/cacheable-request-2.1.4.tgz",
"integrity": "sha1-DYCIAbY0KtM8kd+dC0TcCbkeXD0=",
"dev": true,
- "optional": true,
"requires": {
"clone-response": "1.0.2",
"get-stream": "3.0.0",
@@ -3008,15 +2988,13 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
"integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
- "dev": true,
- "optional": true
+ "dev": true
},
"normalize-url": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-2.0.1.tgz",
"integrity": "sha512-D6MUW4K/VzoJ4rJ01JFKxDrtY1v9wrgzCX5f2qj/lzH1m/lW6MhUZFKerVsnyjOhOsYzI9Kqqak+10l4LvLpMw==",
"dev": true,
- "optional": true,
"requires": {
"prepend-http": "^2.0.0",
"query-string": "^5.0.1",
@@ -3027,15 +3005,13 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-2.0.0.tgz",
"integrity": "sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=",
- "dev": true,
- "optional": true
+ "dev": true
},
"query-string": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
"integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
"dev": true,
- "optional": true,
"requires": {
"decode-uri-component": "^0.2.0",
"object-assign": "^4.1.0",
@@ -3047,7 +3023,6 @@
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz",
"integrity": "sha1-ZYU1WEhh7JfXMNbPQYIuH1ZoQSg=",
"dev": true,
- "optional": true,
"requires": {
"is-plain-obj": "^1.0.0"
}
@@ -3180,7 +3155,6 @@
"resolved": "https://registry.npmjs.org/caw/-/caw-2.0.1.tgz",
"integrity": "sha512-Cg8/ZSBEa8ZVY9HspcGUYaK63d/bN7rqS3CYCzEGUxuYv6UlmcjzDUz2fCFFHyTvUW5Pk0I+3hkA3iXlIj6guA==",
"dev": true,
- "optional": true,
"requires": {
"get-proxy": "^2.0.0",
"isurl": "^1.0.0-alpha5",
@@ -3380,7 +3354,6 @@
"resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
"integrity": "sha1-0dyXOSAxTfZ/vrlCI7TuNQI56Ws=",
"dev": true,
- "optional": true,
"requires": {
"mimic-response": "^1.0.0"
}
@@ -3533,7 +3506,6 @@
"resolved": "https://registry.npmjs.org/commander/-/commander-2.8.1.tgz",
"integrity": "sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=",
"dev": true,
- "optional": true,
"requires": {
"graceful-readlink": ">= 1.0.0"
}
@@ -3892,7 +3864,6 @@
"resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.12.tgz",
"integrity": "sha512-a1eOIcu8+7lUInge4Rpf/n4Krkf3Dd9lqhljRzII1/Zno/kRtUWnznPO3jOKBmTEktkt3fkxisUcivoj0ebzoA==",
"dev": true,
- "optional": true,
"requires": {
"ini": "^1.3.4",
"proto-list": "~1.2.1"
@@ -3927,15 +3898,13 @@
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
"integrity": "sha1-oJX+B7IEZZVfL6/Si11yvM2UnUQ=",
- "dev": true,
- "optional": true
+ "dev": true
},
"content-disposition": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
"integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
"dev": true,
- "optional": true,
"requires": {
"safe-buffer": "5.1.2"
}
@@ -4665,22 +4634,10 @@
}
},
"dateformat": {
- "version": "1.0.12",
- "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-1.0.12.tgz",
- "integrity": "sha1-nxJLZ1lMk3/3BpMuSmQsyo27/uk=",
- "dev": true,
- "requires": {
- "get-stdin": "^4.0.1",
- "meow": "^3.3.0"
- },
- "dependencies": {
- "get-stdin": {
- "version": "4.0.1",
- "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
- "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
- "dev": true
- }
- }
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",
+ "integrity": "sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==",
+ "dev": true
},
"debug": {
"version": "2.6.9",
@@ -4716,7 +4673,6 @@
"resolved": "https://registry.npmjs.org/decompress/-/decompress-4.2.1.tgz",
"integrity": "sha512-e48kc2IjU+2Zw8cTb6VZcJQ3lgVbS4uuB1TfCHbiZIP/haNXm+SVyhu+87jts5/3ROpd82GSVCoNs/z8l4ZOaQ==",
"dev": true,
- "optional": true,
"requires": {
"decompress-tar": "^4.0.0",
"decompress-tarbz2": "^4.0.0",
@@ -4733,7 +4689,6 @@
"resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-3.3.0.tgz",
"integrity": "sha1-gKTdMjdIOEv6JICDYirt7Jgq3/M=",
"dev": true,
- "optional": true,
"requires": {
"mimic-response": "^1.0.0"
}
@@ -4743,7 +4698,6 @@
"resolved": "https://registry.npmjs.org/decompress-tar/-/decompress-tar-4.1.1.tgz",
"integrity": "sha512-JdJMaCrGpB5fESVyxwpCx4Jdj2AagLmv3y58Qy4GE6HMVjWz1FeVQk1Ct4Kye7PftcdOo/7U7UKzYBJgqnGeUQ==",
"dev": true,
- "optional": true,
"requires": {
"file-type": "^5.2.0",
"is-stream": "^1.1.0",
@@ -4754,8 +4708,7 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
"integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -4764,7 +4717,6 @@
"resolved": "https://registry.npmjs.org/decompress-tarbz2/-/decompress-tarbz2-4.1.1.tgz",
"integrity": "sha512-s88xLzf1r81ICXLAVQVzaN6ZmX4A6U4z2nMbOwobxkLoIIfjVMBg7TeguTUXkKeXni795B6y5rnvDw7rxhAq9A==",
"dev": true,
- "optional": true,
"requires": {
"decompress-tar": "^4.1.0",
"file-type": "^6.1.0",
@@ -4777,8 +4729,7 @@
"version": "6.2.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-6.2.0.tgz",
"integrity": "sha512-YPcTBDV+2Tm0VqjybVd32MHdlEGAtuxS3VAYsumFokDSMG+ROT5wawGlnHDoz7bfMcMDt9hxuXvXwoKUx2fkOg==",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -4787,7 +4738,6 @@
"resolved": "https://registry.npmjs.org/decompress-targz/-/decompress-targz-4.1.1.tgz",
"integrity": "sha512-4z81Znfr6chWnRDNfFNqLwPvm4db3WuZkqV+UgXQzSngG3CEKdBkw5jrv3axjjL96glyiiKjsxJG3X6WBZwX3w==",
"dev": true,
- "optional": true,
"requires": {
"decompress-tar": "^4.1.1",
"file-type": "^5.2.0",
@@ -4798,8 +4748,7 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
"integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -4808,7 +4757,6 @@
"resolved": "https://registry.npmjs.org/decompress-unzip/-/decompress-unzip-4.0.1.tgz",
"integrity": "sha1-3qrM39FK6vhVePczroIQ+bSEj2k=",
"dev": true,
- "optional": true,
"requires": {
"file-type": "^3.8.0",
"get-stream": "^2.2.0",
@@ -4820,15 +4768,13 @@
"version": "3.9.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-3.9.0.tgz",
"integrity": "sha1-JXoHg4TR24CHvESdEH1SpSZyuek=",
- "dev": true,
- "optional": true
+ "dev": true
},
"get-stream": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-2.3.1.tgz",
"integrity": "sha1-Xzj5PzRgCWZu4BUKBUFn+Rvdld4=",
"dev": true,
- "optional": true,
"requires": {
"object-assign": "^4.0.1",
"pinkie-promise": "^2.0.0"
@@ -5114,9 +5060,9 @@
"dev": true
},
"dot-prop": {
- "version": "4.2.0",
- "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.0.tgz",
- "integrity": "sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==",
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+ "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
"dev": true,
"requires": {
"is-obj": "^1.0.0"
@@ -5127,7 +5073,6 @@
"resolved": "https://registry.npmjs.org/download/-/download-6.2.5.tgz",
"integrity": "sha512-DpO9K1sXAST8Cpzb7kmEhogJxymyVUd5qz/vCOSyvwtp2Klj2XcDt5YUuasgxka44SxF0q5RriKIwJmQHG2AuA==",
"dev": true,
- "optional": true,
"requires": {
"caw": "^2.0.0",
"content-disposition": "^0.5.2",
@@ -5146,15 +5091,13 @@
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/file-type/-/file-type-5.2.0.tgz",
"integrity": "sha1-LdvqfHP/42No365J3DOMBYwritY=",
- "dev": true,
- "optional": true
+ "dev": true
},
"pify": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -5168,8 +5111,7 @@
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz",
"integrity": "sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=",
- "dev": true,
- "optional": true
+ "dev": true
},
"duplexify": {
"version": "3.6.0",
@@ -5781,7 +5723,6 @@
"resolved": "https://registry.npmjs.org/execa/-/execa-0.7.0.tgz",
"integrity": "sha1-lEvs00zEHuMqY6n68nrVpl/Fl3c=",
"dev": true,
- "optional": true,
"requires": {
"cross-spawn": "^5.0.1",
"get-stream": "^3.0.0",
@@ -5797,7 +5738,6 @@
"resolved": "https://registry.npmjs.org/executable/-/executable-4.1.1.tgz",
"integrity": "sha512-8iA79xD3uAch729dUG8xaaBBFGaEa0wdD2VkYLFHwlqosEj/jT66AzcreRDSgV7ehnNLBW2WR5jIXwGKjVdTLg==",
"dev": true,
- "optional": true,
"requires": {
"pify": "^2.2.0"
}
@@ -6076,7 +6016,6 @@
"resolved": "https://registry.npmjs.org/ext-list/-/ext-list-2.2.2.tgz",
"integrity": "sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==",
"dev": true,
- "optional": true,
"requires": {
"mime-db": "^1.28.0"
}
@@ -6086,7 +6025,6 @@
"resolved": "https://registry.npmjs.org/ext-name/-/ext-name-5.0.0.tgz",
"integrity": "sha512-yblEwXAbGv1VQDmow7s38W77hzAgJAO50ztBLMcUyUBfxv1HC+LGwtiEN+Co6LtlqT/5uwVOxsD4TNIilWhwdQ==",
"dev": true,
- "optional": true,
"requires": {
"ext-list": "^2.0.0",
"sort-keys-length": "^1.0.0"
@@ -6532,7 +6470,6 @@
"resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
"integrity": "sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=",
"dev": true,
- "optional": true,
"requires": {
"pend": "~1.2.0"
}
@@ -6647,15 +6584,13 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
"integrity": "sha1-q/c9+rc10EVECr/qLZHzieu/oik=",
- "dev": true,
- "optional": true
+ "dev": true
},
"filenamify": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/filenamify/-/filenamify-2.1.0.tgz",
"integrity": "sha512-ICw7NTT6RsDp2rnYKVd8Fu4cr6ITzGy3+u4vUujPkabyaz+03F24NWEX7fs5fp+kBonlaqPH8fAO2NM+SXt/JA==",
"dev": true,
- "optional": true,
"requires": {
"filename-reserved-regex": "^2.0.0",
"strip-outer": "^1.0.0",
@@ -6764,7 +6699,6 @@
"resolved": "https://registry.npmjs.org/find-versions/-/find-versions-3.2.0.tgz",
"integrity": "sha512-P8WRou2S+oe222TOCHitLy8zj+SIsVJh52VP4lvXkaFVnOFFdoWv1H1Jjvel1aI6NCFOAaeAVm8qrI0odiLcww==",
"dev": true,
- "optional": true,
"requires": {
"semver-regex": "^2.0.0"
}
@@ -6838,6 +6772,12 @@
"integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
"dev": true
},
+ "flat": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/flat/-/flat-5.0.2.tgz",
+ "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+ "dev": true
+ },
"flat-cache": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.0.tgz",
@@ -6919,7 +6859,6 @@
"resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
"integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
"dev": true,
- "optional": true,
"requires": {
"inherits": "^2.0.1",
"readable-stream": "^2.0.0"
@@ -6937,6 +6876,26 @@
"integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
"dev": true
},
+ "fs-extra": {
+ "version": "9.0.1",
+ "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+ "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+ "dev": true,
+ "requires": {
+ "at-least-node": "^1.0.0",
+ "graceful-fs": "^4.2.0",
+ "jsonfile": "^6.0.1",
+ "universalify": "^1.0.0"
+ },
+ "dependencies": {
+ "graceful-fs": {
+ "version": "4.2.4",
+ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.4.tgz",
+ "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
+ "dev": true
+ }
+ }
+ },
"fs-utils": {
"version": "0.3.10",
"resolved": "https://registry.npmjs.org/fs-utils/-/fs-utils-0.3.10.tgz",
@@ -7125,7 +7084,6 @@
"resolved": "https://registry.npmjs.org/get-proxy/-/get-proxy-2.1.0.tgz",
"integrity": "sha512-zmZIaQTWnNQb4R4fJUEp/FC51eZsc6EkErspy3xtIYStaq8EB/hDIWipxsal+E8rz0qD7f2sL/NA9Xee4RInJw==",
"dev": true,
- "optional": true,
"requires": {
"npm-conf": "^1.1.0"
}
@@ -7140,8 +7098,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
"integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
- "dev": true,
- "optional": true
+ "dev": true
},
"get-value": {
"version": "2.0.6",
@@ -7542,7 +7499,6 @@
"resolved": "https://registry.npmjs.org/got/-/got-7.1.0.tgz",
"integrity": "sha512-Y5WMo7xKKq1muPsxD+KmrR8DH5auG7fBdDVueZwETwV6VytKyU9OX/ddpq2/1hp1vIPvVb4T81dKQz3BivkNLw==",
"dev": true,
- "optional": true,
"requires": {
"decompress-response": "^3.2.0",
"duplexer3": "^0.1.4",
@@ -7570,8 +7526,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
"integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
- "dev": true,
- "optional": true
+ "dev": true
},
"gray-matter": {
"version": "3.1.1",
@@ -7628,36 +7583,28 @@
}
},
"grunt": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.1.0.tgz",
- "integrity": "sha512-+NGod0grmviZ7Nzdi9am7vuRS/h76PcWDsV635mEXF0PEQMUV6Kb+OjTdsVxbi0PZmfQOjCMKb3w8CVZcqsn1g==",
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/grunt/-/grunt-1.3.0.tgz",
+ "integrity": "sha512-6ILlMXv11/4cxuhSMfSU+SfvbxrPuqZrAtLN64+tZpQ3DAKfSQPQHRbTjSbdtxfyQhGZPtN0bDZJ/LdCM5WXXA==",
"dev": true,
"requires": {
- "coffeescript": "~1.10.0",
- "dateformat": "~1.0.12",
+ "dateformat": "~3.0.3",
"eventemitter2": "~0.4.13",
- "exit": "~0.1.1",
+ "exit": "~0.1.2",
"findup-sync": "~0.3.0",
- "glob": "~7.0.0",
- "grunt-cli": "~1.2.0",
+ "glob": "~7.1.6",
+ "grunt-cli": "~1.3.2",
"grunt-known-options": "~1.1.0",
- "grunt-legacy-log": "~2.0.0",
- "grunt-legacy-util": "~1.1.1",
+ "grunt-legacy-log": "~3.0.0",
+ "grunt-legacy-util": "~2.0.0",
"iconv-lite": "~0.4.13",
- "js-yaml": "~3.13.1",
- "minimatch": "~3.0.2",
- "mkdirp": "~1.0.3",
+ "js-yaml": "~3.14.0",
+ "minimatch": "~3.0.4",
+ "mkdirp": "~1.0.4",
"nopt": "~3.0.6",
- "path-is-absolute": "~1.0.0",
- "rimraf": "~2.6.2"
+ "rimraf": "~3.0.2"
},
"dependencies": {
- "coffeescript": {
- "version": "1.10.0",
- "resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-1.10.0.tgz",
- "integrity": "sha1-56qDAZF+9iGzXYo580jc3R234z4=",
- "dev": true
- },
"findup-sync": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.3.0.tgz",
@@ -7683,31 +7630,19 @@
}
},
"glob": {
- "version": "7.0.6",
- "resolved": "https://registry.npmjs.org/glob/-/glob-7.0.6.tgz",
- "integrity": "sha1-IRuvr0nlJbjNkyYNFKsTYVKz9Xo=",
+ "version": "7.1.6",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+ "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
"dev": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
"inherits": "2",
- "minimatch": "^3.0.2",
+ "minimatch": "^3.0.4",
"once": "^1.3.0",
"path-is-absolute": "^1.0.0"
}
},
- "grunt-cli": {
- "version": "1.2.0",
- "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.2.0.tgz",
- "integrity": "sha1-VisRnrsGndtGSs4oRVAb6Xs1tqg=",
- "dev": true,
- "requires": {
- "findup-sync": "~0.3.0",
- "grunt-known-options": "~1.1.0",
- "nopt": "~3.0.6",
- "resolve": "~1.1.0"
- }
- },
"iconv-lite": {
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -7723,11 +7658,14 @@
"integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
"dev": true
},
- "resolve": {
- "version": "1.1.7",
- "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
- "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
- "dev": true
+ "rimraf": {
+ "version": "3.0.2",
+ "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
+ "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
+ "dev": true,
+ "requires": {
+ "glob": "^7.1.3"
+ }
}
}
},
@@ -8142,76 +8080,90 @@
"dev": true
},
"grunt-legacy-log": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-2.0.0.tgz",
- "integrity": "sha512-1m3+5QvDYfR1ltr8hjiaiNjddxGdQWcH0rw1iKKiQnF0+xtgTazirSTGu68RchPyh1OBng1bBUjLmX8q9NpoCw==",
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-log/-/grunt-legacy-log-3.0.0.tgz",
+ "integrity": "sha512-GHZQzZmhyq0u3hr7aHW4qUH0xDzwp2YXldLPZTCjlOeGscAOWWPftZG3XioW8MasGp+OBRIu39LFx14SLjXRcA==",
"dev": true,
"requires": {
"colors": "~1.1.2",
- "grunt-legacy-log-utils": "~2.0.0",
+ "grunt-legacy-log-utils": "~2.1.0",
"hooker": "~0.2.3",
- "lodash": "~4.17.5"
+ "lodash": "~4.17.19"
}
},
"grunt-legacy-log-utils": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-2.0.1.tgz",
- "integrity": "sha512-o7uHyO/J+i2tXG8r2bZNlVk20vlIFJ9IEYyHMCQGfWYru8Jv3wTqKZzvV30YW9rWEjq0eP3cflQ1qWojIe9VFA==",
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-log-utils/-/grunt-legacy-log-utils-2.1.0.tgz",
+ "integrity": "sha512-lwquaPXJtKQk0rUM1IQAop5noEpwFqOXasVoedLeNzaibf/OPWjKYvvdqnEHNmU+0T0CaReAXIbGo747ZD+Aaw==",
"dev": true,
"requires": {
- "chalk": "~2.4.1",
- "lodash": "~4.17.10"
+ "chalk": "~4.1.0",
+ "lodash": "~4.17.19"
},
"dependencies": {
"ansi-styles": {
- "version": "3.2.1",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
- "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+ "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"requires": {
- "color-convert": "^1.9.0"
+ "color-convert": "^2.0.1"
}
},
"chalk": {
- "version": "2.4.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
- "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
+ "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
"dev": true,
"requires": {
- "ansi-styles": "^3.2.1",
- "escape-string-regexp": "^1.0.5",
- "supports-color": "^5.3.0"
+ "ansi-styles": "^4.1.0",
+ "supports-color": "^7.1.0"
}
},
+ "color-convert": {
+ "version": "2.0.1",
+ "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+ "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+ "dev": true,
+ "requires": {
+ "color-name": "~1.1.4"
+ }
+ },
+ "color-name": {
+ "version": "1.1.4",
+ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+ "dev": true
+ },
"has-flag": {
- "version": "3.0.0",
- "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
- "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true
},
"supports-color": {
- "version": "5.5.0",
- "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
- "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "version": "7.2.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+ "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"requires": {
- "has-flag": "^3.0.0"
+ "has-flag": "^4.0.0"
}
}
}
},
"grunt-legacy-util": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-1.1.1.tgz",
- "integrity": "sha512-9zyA29w/fBe6BIfjGENndwoe1Uy31BIXxTH3s8mga0Z5Bz2Sp4UCjkeyv2tI449ymkx3x26B+46FV4fXEddl5A==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/grunt-legacy-util/-/grunt-legacy-util-2.0.0.tgz",
+ "integrity": "sha512-ZEmYFB44bblwPE2oz3q3ygfF6hseQja9tx8I3UZIwbUik32FMWewA+d1qSFicMFB+8dNXDkh35HcDCWlpRsGlA==",
"dev": true,
"requires": {
"async": "~1.5.2",
"exit": "~0.1.1",
"getobject": "~0.1.0",
"hooker": "~0.2.3",
- "lodash": "~4.17.10",
- "underscore.string": "~3.3.4",
+ "lodash": "~4.17.20",
+ "underscore.string": "~3.3.5",
"which": "~1.3.0"
},
"dependencies": {
@@ -8364,6 +8316,69 @@
}
}
},
+ "grunt-shell": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/grunt-shell/-/grunt-shell-3.0.1.tgz",
+ "integrity": "sha512-C8eR4frw/NmIFIwSvzSLS4wOQBUzC+z6QhrKPzwt/tlaIqlzH35i/O2MggVOBj2Sh1tbaAqpASWxGiGsi4JMIQ==",
+ "dev": true,
+ "requires": {
+ "chalk": "^2.4.1",
+ "npm-run-path": "^2.0.0",
+ "strip-ansi": "^5.0.0"
+ },
+ "dependencies": {
+ "ansi-regex": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz",
+ "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==",
+ "dev": true
+ },
+ "ansi-styles": {
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+ "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+ "dev": true,
+ "requires": {
+ "color-convert": "^1.9.0"
+ }
+ },
+ "chalk": {
+ "version": "2.4.2",
+ "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+ "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+ "dev": true,
+ "requires": {
+ "ansi-styles": "^3.2.1",
+ "escape-string-regexp": "^1.0.5",
+ "supports-color": "^5.3.0"
+ }
+ },
+ "has-flag": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+ "dev": true
+ },
+ "strip-ansi": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz",
+ "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==",
+ "dev": true,
+ "requires": {
+ "ansi-regex": "^4.1.0"
+ }
+ },
+ "supports-color": {
+ "version": "5.5.0",
+ "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+ "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+ "dev": true,
+ "requires": {
+ "has-flag": "^3.0.0"
+ }
+ }
+ }
+ },
"grunt-uncss": {
"version": "0.8.6",
"resolved": "https://registry.npmjs.org/grunt-uncss/-/grunt-uncss-0.8.6.tgz",
@@ -8646,8 +8661,7 @@
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/has-symbol-support-x/-/has-symbol-support-x-1.4.2.tgz",
"integrity": "sha512-3ToOva++HaW+eCpgqZrCfN51IPB+7bJNVT6CUATzueB5Heb8o6Nam0V3HG5dlDvZU1Gn5QLcbahiKw/XVk5JJw==",
- "dev": true,
- "optional": true
+ "dev": true
},
"has-symbols": {
"version": "1.0.1",
@@ -8660,7 +8674,6 @@
"resolved": "https://registry.npmjs.org/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz",
"integrity": "sha512-vdbKfmw+3LoOYVr+mtxHaX5a96+0f3DljYd8JOqvOLsf5mw2Otda2qCDT9qRqLAhrjyQ0h7ual5nOiASpsGNFw==",
"dev": true,
- "optional": true,
"requires": {
"has-symbol-support-x": "^1.4.1"
}
@@ -8891,8 +8904,7 @@
"version": "3.8.1",
"resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz",
"integrity": "sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==",
- "dev": true,
- "optional": true
+ "dev": true
},
"http-errors": {
"version": "1.6.3",
@@ -8929,6 +8941,12 @@
"integrity": "sha1-P5E2XKvmC3ftDruiS0VOPgnZWoI=",
"dev": true
},
+ "human-signals": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
+ "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
+ "dev": true
+ },
"husky": {
"version": "0.14.3",
"resolved": "https://registry.npmjs.org/husky/-/husky-0.14.3.tgz",
@@ -9075,6 +9093,122 @@
"jpegtran-bin": "^4.0.0"
}
},
+ "imagemin-mozjpeg": {
+ "version": "9.0.0",
+ "resolved": "https://registry.npmjs.org/imagemin-mozjpeg/-/imagemin-mozjpeg-9.0.0.tgz",
+ "integrity": "sha512-TwOjTzYqCFRgROTWpVSt5UTT0JeCuzF1jswPLKALDd89+PmrJ2PdMMYeDLYZ1fs9cTovI9GJd68mRSnuVt691w==",
+ "dev": true,
+ "requires": {
+ "execa": "^4.0.0",
+ "is-jpg": "^2.0.0",
+ "mozjpeg": "^7.0.0"
+ },
+ "dependencies": {
+ "cross-spawn": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+ "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.1.0",
+ "shebang-command": "^2.0.0",
+ "which": "^2.0.1"
+ }
+ },
+ "execa": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+ "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+ "dev": true,
+ "requires": {
+ "cross-spawn": "^7.0.0",
+ "get-stream": "^5.0.0",
+ "human-signals": "^1.1.1",
+ "is-stream": "^2.0.0",
+ "merge-stream": "^2.0.0",
+ "npm-run-path": "^4.0.0",
+ "onetime": "^5.1.0",
+ "signal-exit": "^3.0.2",
+ "strip-final-newline": "^2.0.0"
+ }
+ },
+ "get-stream": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+ "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+ "dev": true,
+ "requires": {
+ "pump": "^3.0.0"
+ }
+ },
+ "is-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+ "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+ "dev": true
+ },
+ "merge-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+ "dev": true
+ },
+ "mimic-fn": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+ "dev": true
+ },
+ "npm-run-path": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+ "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.0.0"
+ }
+ },
+ "onetime": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+ "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+ "dev": true,
+ "requires": {
+ "mimic-fn": "^2.1.0"
+ }
+ },
+ "path-key": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+ "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+ "dev": true
+ },
+ "shebang-command": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+ "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+ "dev": true,
+ "requires": {
+ "shebang-regex": "^3.0.0"
+ }
+ },
+ "shebang-regex": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+ "dev": true
+ },
+ "which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dev": true,
+ "requires": {
+ "isexe": "^2.0.0"
+ }
+ }
+ }
+ },
"imagemin-optipng": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/imagemin-optipng/-/imagemin-optipng-6.0.0.tgz",
@@ -9087,6 +9221,130 @@
"optipng-bin": "^5.0.0"
}
},
+ "imagemin-pngquant": {
+ "version": "9.0.1",
+ "resolved": "https://registry.npmjs.org/imagemin-pngquant/-/imagemin-pngquant-9.0.1.tgz",
+ "integrity": "sha512-PYyo9G/xwddf+Qqlqe3onz5ZH7p6vHYVVkiuuczUjxZmfekyY77RXaOA/AR6FnVoeQxGa/pDtEK5xUKOcVo+sA==",
+ "dev": true,
+ "requires": {
+ "execa": "^4.0.0",
+ "is-png": "^2.0.0",
+ "is-stream": "^2.0.0",
+ "ow": "^0.17.0",
+ "pngquant-bin": "^6.0.0"
+ },
+ "dependencies": {
+ "cross-spawn": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+ "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.1.0",
+ "shebang-command": "^2.0.0",
+ "which": "^2.0.1"
+ }
+ },
+ "execa": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+ "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+ "dev": true,
+ "requires": {
+ "cross-spawn": "^7.0.0",
+ "get-stream": "^5.0.0",
+ "human-signals": "^1.1.1",
+ "is-stream": "^2.0.0",
+ "merge-stream": "^2.0.0",
+ "npm-run-path": "^4.0.0",
+ "onetime": "^5.1.0",
+ "signal-exit": "^3.0.2",
+ "strip-final-newline": "^2.0.0"
+ }
+ },
+ "get-stream": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+ "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+ "dev": true,
+ "requires": {
+ "pump": "^3.0.0"
+ }
+ },
+ "is-png": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-png/-/is-png-2.0.0.tgz",
+ "integrity": "sha512-4KPGizaVGj2LK7xwJIz8o5B2ubu1D/vcQsgOGFEDlpcvgZHto4gBnyd0ig7Ws+67ixmwKoNmu0hYnpo6AaKb5g==",
+ "dev": true
+ },
+ "is-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+ "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+ "dev": true
+ },
+ "merge-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+ "dev": true
+ },
+ "mimic-fn": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+ "dev": true
+ },
+ "npm-run-path": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+ "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.0.0"
+ }
+ },
+ "onetime": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+ "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+ "dev": true,
+ "requires": {
+ "mimic-fn": "^2.1.0"
+ }
+ },
+ "path-key": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+ "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+ "dev": true
+ },
+ "shebang-command": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+ "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+ "dev": true,
+ "requires": {
+ "shebang-regex": "^3.0.0"
+ }
+ },
+ "shebang-regex": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+ "dev": true
+ },
+ "which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dev": true,
+ "requires": {
+ "isexe": "^2.0.0"
+ }
+ }
+ }
+ },
"imagemin-svgo": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/imagemin-svgo/-/imagemin-svgo-7.0.0.tgz",
@@ -9224,8 +9482,7 @@
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-3.1.0.tgz",
"integrity": "sha512-8/gvXvX2JMn0F+CDlSC4l6kOmVaLOO3XLkksI7CI3Ud95KDYJuYur2b9P/PUt/i/pDAMd/DulQsNbbbmRRsDIQ==",
- "dev": true,
- "optional": true
+ "dev": true
},
"imurmurhash": {
"version": "0.1.4",
@@ -9283,9 +9540,9 @@
"dev": true
},
"ini": {
- "version": "1.3.5",
- "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
- "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
+ "version": "1.3.8",
+ "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+ "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
"dev": true
},
"inquirer": {
@@ -9472,7 +9729,6 @@
"resolved": "https://registry.npmjs.org/into-stream/-/into-stream-3.1.0.tgz",
"integrity": "sha1-lvsKk2wSur1v8XUqF9BWFqvQlMY=",
"dev": true,
- "optional": true,
"requires": {
"from2": "^2.1.1",
"p-is-promise": "^1.1.0"
@@ -9747,15 +10003,13 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/is-jpg/-/is-jpg-2.0.0.tgz",
"integrity": "sha1-LhmX+m6RZuqsAkLarkQ0A+TvHZc=",
- "dev": true,
- "optional": true
+ "dev": true
},
"is-natural-number": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/is-natural-number/-/is-natural-number-4.0.1.tgz",
"integrity": "sha1-q5124dtM7VHjXeDHLr7PCfc0zeg=",
- "dev": true,
- "optional": true
+ "dev": true
},
"is-number": {
"version": "2.1.0",
@@ -9796,8 +10050,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.1.tgz",
"integrity": "sha1-iVJojF7C/9awPsyF52ngKQMINHA=",
- "dev": true,
- "optional": true
+ "dev": true
},
"is-observable": {
"version": "1.1.0",
@@ -9865,8 +10118,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
"integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
- "dev": true,
- "optional": true
+ "dev": true
},
"is-plain-object": {
"version": "2.0.4",
@@ -9957,8 +10209,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/is-retry-allowed/-/is-retry-allowed-1.2.0.tgz",
"integrity": "sha512-RUbUeKwvm3XG2VYamhJL1xFktgjvPzL0Hq8C+6yrWIswDy3BIXGqCxhxkc30N9jqK311gVU137K8Ei55/zVJRg==",
- "dev": true,
- "optional": true
+ "dev": true
},
"is-stream": {
"version": "1.1.0",
@@ -10080,7 +10331,6 @@
"resolved": "https://registry.npmjs.org/isurl/-/isurl-1.0.0.tgz",
"integrity": "sha512-1P/yWsxPlDtn7QeRD+ULKQPaIaN6yF368GZ2vDfv0AL0NwpStafjWCDDdn0k8wgFMWpVAqG7oJhxHnlud42i9w==",
"dev": true,
- "optional": true,
"requires": {
"has-to-string-tag-x": "^1.2.0",
"is-object": "^1.0.1"
@@ -10117,9 +10367,9 @@
"dev": true
},
"js-yaml": {
- "version": "3.13.1",
- "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
- "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
+ "version": "3.14.1",
+ "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+ "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
"dev": true,
"requires": {
"argparse": "^1.0.7",
@@ -10170,8 +10420,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.0.tgz",
"integrity": "sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=",
- "dev": true,
- "optional": true
+ "dev": true
},
"json-parse-better-errors": {
"version": "1.0.2",
@@ -10203,6 +10452,16 @@
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
"dev": true
},
+ "jsonfile": {
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.0.1.tgz",
+ "integrity": "sha512-jR2b5v7d2vIOust+w3wtFKZIfpC2pnRmFAhAC/BuweZFQR8qZzxH1OyrQ10HmdVYiXWkYUqPVsz91cG7EL2FBg==",
+ "dev": true,
+ "requires": {
+ "graceful-fs": "^4.1.6",
+ "universalify": "^1.0.0"
+ }
+ },
"jsprim": {
"version": "1.4.1",
"resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.1.tgz",
@@ -10220,7 +10479,6 @@
"resolved": "https://registry.npmjs.org/keyv/-/keyv-3.0.0.tgz",
"integrity": "sha512-eguHnq22OE3uVoSYG0LVWNP+4ppamWr9+zWBe1bsNcovIMy6huUJFPgy4mGwCd/rnl3vOLGW1MTlu4c57CT1xA==",
"dev": true,
- "optional": true,
"requires": {
"json-buffer": "3.0.0"
}
@@ -11508,9 +11766,9 @@
}
},
"lodash": {
- "version": "4.17.15",
- "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
- "integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==",
+ "version": "4.17.20",
+ "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
+ "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==",
"dev": true
},
"lodash._arrayfilter": {
@@ -11900,7 +12158,6 @@
"resolved": "https://registry.npmjs.org/logalot/-/logalot-2.1.0.tgz",
"integrity": "sha1-X46MkNME7fElMJUaVVSruMXj9VI=",
"dev": true,
- "optional": true,
"requires": {
"figures": "^1.3.5",
"squeak": "^1.0.0"
@@ -11951,15 +12208,13 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.1.tgz",
"integrity": "sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==",
- "dev": true,
- "optional": true
+ "dev": true
},
"lpad-align": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/lpad-align/-/lpad-align-1.1.2.tgz",
"integrity": "sha1-IfYArBwwlcPG5JfuZyce4ISB/p4=",
"dev": true,
- "optional": true,
"requires": {
"get-stdin": "^4.0.1",
"indent-string": "^2.1.0",
@@ -11971,8 +12226,7 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
"integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -12549,8 +12803,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-1.0.1.tgz",
"integrity": "sha512-j5EctnkH7amfV/q5Hgmoal1g2QHFJRraOtmx0JpIqkxhBhI/lJSl1nMpQ45hVarwNETOoWEimndZ4QK0RHxuxQ==",
- "dev": true,
- "optional": true
+ "dev": true
},
"minimatch": {
"version": "3.0.4",
@@ -12623,9 +12876,9 @@
"optional": true
},
"moment": {
- "version": "2.24.0",
- "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
- "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg==",
+ "version": "2.29.1",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
+ "integrity": "sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==",
"dev": true
},
"morgan": {
@@ -12641,6 +12894,17 @@
"on-headers": "~1.0.1"
}
},
+ "mozjpeg": {
+ "version": "7.0.0",
+ "resolved": "https://registry.npmjs.org/mozjpeg/-/mozjpeg-7.0.0.tgz",
+ "integrity": "sha512-mH7atSbIusVTO3A4H43sEdmveN3aWn54k6V0edefzCEvOsTrbjg5murY2TsNznaztWnIgaRbWxeLVp4IgKdedQ==",
+ "dev": true,
+ "requires": {
+ "bin-build": "^3.0.0",
+ "bin-wrapper": "^4.0.0",
+ "logalot": "^2.1.0"
+ }
+ },
"ms": {
"version": "0.7.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-0.7.3.tgz",
@@ -12867,8 +13131,7 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
"integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
- "dev": true,
- "optional": true
+ "dev": true
},
"no-case": {
"version": "2.3.2",
@@ -13040,7 +13303,6 @@
"resolved": "https://registry.npmjs.org/npm-conf/-/npm-conf-1.1.3.tgz",
"integrity": "sha512-Yic4bZHJOt9RCFbRP3GgpqhScOY4HH3V2P8yBj6CeYq118Qr+BLXqT2JvpJ00mryLESpgOxf5XlFv4ZjXxLScw==",
"dev": true,
- "optional": true,
"requires": {
"config-chain": "^1.1.11",
"pify": "^3.0.0"
@@ -13050,8 +13312,7 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
"integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
- "dev": true,
- "optional": true
+ "dev": true
}
}
},
@@ -13060,7 +13321,6 @@
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-2.0.2.tgz",
"integrity": "sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=",
"dev": true,
- "optional": true,
"requires": {
"path-key": "^2.0.0"
}
@@ -13415,7 +13675,6 @@
"resolved": "https://registry.npmjs.org/os-filter-obj/-/os-filter-obj-2.0.0.tgz",
"integrity": "sha512-uksVLsqG3pVdzzPvmAHpBK0wKxYItuzZr7SziusRPoz67tGV8rL1szZ6IdeUrbqLjGDwApBtN29eEE3IqGHOjg==",
"dev": true,
- "optional": true,
"requires": {
"arch": "^2.1.0"
}
@@ -13442,19 +13701,26 @@
"os-tmpdir": "^1.0.0"
}
},
+ "ow": {
+ "version": "0.17.0",
+ "resolved": "https://registry.npmjs.org/ow/-/ow-0.17.0.tgz",
+ "integrity": "sha512-i3keDzDQP5lWIe4oODyDFey1qVrq2hXKTuTH2VpqwpYtzPiKZt2ziRI4NBQmgW40AnV5Euz17OyWweCb+bNEQA==",
+ "dev": true,
+ "requires": {
+ "type-fest": "^0.11.0"
+ }
+ },
"p-cancelable": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-0.3.0.tgz",
"integrity": "sha512-RVbZPLso8+jFeq1MfNvgXtCRED2raz/dKpacfTNxsx6pLEpEomM7gah6VeHSYV3+vo0OAi4MkArtQcWWXuQoyw==",
- "dev": true,
- "optional": true
+ "dev": true
},
"p-event": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/p-event/-/p-event-1.3.0.tgz",
"integrity": "sha1-jmtPT2XHK8W2/ii3XtqHT5akoIU=",
"dev": true,
- "optional": true,
"requires": {
"p-timeout": "^1.1.1"
}
@@ -13463,15 +13729,13 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
"integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
- "dev": true,
- "optional": true
+ "dev": true
},
"p-is-promise": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/p-is-promise/-/p-is-promise-1.1.0.tgz",
"integrity": "sha1-nJRWmJ6fZYgBewQ01WCXZ1w9oF4=",
- "dev": true,
- "optional": true
+ "dev": true
},
"p-limit": {
"version": "2.2.2",
@@ -13502,7 +13766,6 @@
"resolved": "https://registry.npmjs.org/p-map-series/-/p-map-series-1.0.0.tgz",
"integrity": "sha1-v5j+V1cFZYqeE1G++4WuTB8Hvco=",
"dev": true,
- "optional": true,
"requires": {
"p-reduce": "^1.0.0"
}
@@ -13517,15 +13780,13 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/p-reduce/-/p-reduce-1.0.0.tgz",
"integrity": "sha1-GMKw3ZNqRpClKfgjH1ig/bakffo=",
- "dev": true,
- "optional": true
+ "dev": true
},
"p-timeout": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-1.2.1.tgz",
"integrity": "sha1-XrOzU7f86Z8QGhA4iAuwVOu+o4Y=",
"dev": true,
- "optional": true,
"requires": {
"p-finally": "^1.0.0"
}
@@ -13730,8 +13991,7 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz",
"integrity": "sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=",
- "dev": true,
- "optional": true
+ "dev": true
},
"path-parse": {
"version": "1.0.6",
@@ -13792,8 +14052,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
"integrity": "sha1-elfrVQpng/kRUzH89GY9XI4AelA=",
- "dev": true,
- "optional": true
+ "dev": true
},
"performance-now": {
"version": "2.1.0",
@@ -14068,6 +14327,123 @@
"integrity": "sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA==",
"dev": true
},
+ "pngquant-bin": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/pngquant-bin/-/pngquant-bin-6.0.0.tgz",
+ "integrity": "sha512-oXWAS9MQ9iiDAJRdAZ9KO1mC5UwhzKkJsmetiu0iqIjJuW7JsuLhmc4JdRm7uJkIWRzIAou/Vq2VcjfJwz30Ow==",
+ "dev": true,
+ "requires": {
+ "bin-build": "^3.0.0",
+ "bin-wrapper": "^4.0.1",
+ "execa": "^4.0.0",
+ "logalot": "^2.0.0"
+ },
+ "dependencies": {
+ "cross-spawn": {
+ "version": "7.0.3",
+ "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+ "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.1.0",
+ "shebang-command": "^2.0.0",
+ "which": "^2.0.1"
+ }
+ },
+ "execa": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/execa/-/execa-4.1.0.tgz",
+ "integrity": "sha512-j5W0//W7f8UxAn8hXVnwG8tLwdiUy4FJLcSupCg6maBYZDpyBvTApK7KyuI4bKj8KOh1r2YH+6ucuYtJv1bTZA==",
+ "dev": true,
+ "requires": {
+ "cross-spawn": "^7.0.0",
+ "get-stream": "^5.0.0",
+ "human-signals": "^1.1.1",
+ "is-stream": "^2.0.0",
+ "merge-stream": "^2.0.0",
+ "npm-run-path": "^4.0.0",
+ "onetime": "^5.1.0",
+ "signal-exit": "^3.0.2",
+ "strip-final-newline": "^2.0.0"
+ }
+ },
+ "get-stream": {
+ "version": "5.2.0",
+ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
+ "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
+ "dev": true,
+ "requires": {
+ "pump": "^3.0.0"
+ }
+ },
+ "is-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
+ "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
+ "dev": true
+ },
+ "merge-stream": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
+ "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
+ "dev": true
+ },
+ "mimic-fn": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz",
+ "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==",
+ "dev": true
+ },
+ "npm-run-path": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
+ "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==",
+ "dev": true,
+ "requires": {
+ "path-key": "^3.0.0"
+ }
+ },
+ "onetime": {
+ "version": "5.1.2",
+ "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
+ "integrity": "sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==",
+ "dev": true,
+ "requires": {
+ "mimic-fn": "^2.1.0"
+ }
+ },
+ "path-key": {
+ "version": "3.1.1",
+ "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+ "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+ "dev": true
+ },
+ "shebang-command": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+ "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+ "dev": true,
+ "requires": {
+ "shebang-regex": "^3.0.0"
+ }
+ },
+ "shebang-regex": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+ "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+ "dev": true
+ },
+ "which": {
+ "version": "2.0.2",
+ "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+ "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+ "dev": true,
+ "requires": {
+ "isexe": "^2.0.0"
+ }
+ }
+ }
+ },
"portscanner": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",
@@ -16183,8 +16559,7 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
- "dev": true,
- "optional": true
+ "dev": true
},
"preserve": {
"version": "0.2.0",
@@ -16260,8 +16635,7 @@
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
"integrity": "sha1-IS1b/hMYMGpCD2QCuOJv85ZHqEk=",
- "dev": true,
- "optional": true
+ "dev": true
},
"pseudomap": {
"version": "1.0.2",
@@ -16280,7 +16654,6 @@
"resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
"integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
"dev": true,
- "optional": true,
"requires": {
"end-of-stream": "^1.1.0",
"once": "^1.3.1"
@@ -16299,9 +16672,9 @@
"dev": true
},
"qs": {
- "version": "6.0.4",
- "resolved": "https://registry.npmjs.org/qs/-/qs-6.0.4.tgz",
- "integrity": "sha1-UQGdhHIMk5uCc36EVWp4Izjs6ns=",
+ "version": "6.9.4",
+ "resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
+ "integrity": "sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==",
"dev": true
},
"querystring": {
@@ -17163,7 +17536,6 @@
"resolved": "https://registry.npmjs.org/responselike/-/responselike-1.0.2.tgz",
"integrity": "sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=",
"dev": true,
- "optional": true,
"requires": {
"lowercase-keys": "^1.0.0"
}
@@ -17350,7 +17722,6 @@
"resolved": "https://registry.npmjs.org/seek-bzip/-/seek-bzip-1.0.5.tgz",
"integrity": "sha1-z+kXyz0nS8/6x5J1ivUxc+sfq9w=",
"dev": true,
- "optional": true,
"requires": {
"commander": "~2.8.1"
}
@@ -17371,15 +17742,13 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/semver-regex/-/semver-regex-2.0.0.tgz",
"integrity": "sha512-mUdIBBvdn0PLOeP3TEkMH7HHeUP3GjsXCwKarjv/kGmUFOYg1VqEemKhoQpWMu6X2I8kHeuVdGibLGkVK+/5Qw==",
- "dev": true,
- "optional": true
+ "dev": true
},
"semver-truncate": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/semver-truncate/-/semver-truncate-1.1.2.tgz",
"integrity": "sha1-V/Qd5pcHpicJp+AQS6IRcQnqR+g=",
"dev": true,
- "optional": true,
"requires": {
"semver": "^5.3.0"
}
@@ -17881,7 +18250,6 @@
"resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
"integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
"dev": true,
- "optional": true,
"requires": {
"is-plain-obj": "^1.0.0"
}
@@ -17891,7 +18259,6 @@
"resolved": "https://registry.npmjs.org/sort-keys-length/-/sort-keys-length-1.0.1.tgz",
"integrity": "sha1-nLb09OnkgVWmqgZx7dM2/xR5oYg=",
"dev": true,
- "optional": true,
"requires": {
"sort-keys": "^1.0.0"
}
@@ -18014,7 +18381,6 @@
"resolved": "https://registry.npmjs.org/squeak/-/squeak-1.3.0.tgz",
"integrity": "sha1-MwRQN7ZDiLVnZ0uEMiplIQc5FsM=",
"dev": true,
- "optional": true,
"requires": {
"chalk": "^1.0.0",
"console-stream": "^0.1.1",
@@ -18201,8 +18567,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=",
- "dev": true,
- "optional": true
+ "dev": true
},
"string-argv": {
"version": "0.3.1",
@@ -18382,7 +18747,6 @@
"resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
"integrity": "sha512-JOCxOeKLm2CAS73y/U4ZeZPTkE+gNVCzKt7Eox84Iej1LT/2pTWYpZKJuxwQpvX1LiZb1xokNR7RLfuBAa7T3g==",
"dev": true,
- "optional": true,
"requires": {
"is-natural-number": "^4.0.1"
}
@@ -18391,8 +18755,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
"integrity": "sha1-u0P/VZim6wXYm1n80SnJgzE2Br8=",
- "dev": true,
- "optional": true
+ "dev": true
},
"strip-final-newline": {
"version": "2.0.0",
@@ -18428,7 +18791,6 @@
"resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
"integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
"dev": true,
- "optional": true,
"requires": {
"escape-string-regexp": "^1.0.2"
}
@@ -18704,9 +19066,9 @@
},
"dependencies": {
"bl": {
- "version": "4.0.2",
- "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.2.tgz",
- "integrity": "sha512-j4OH8f6Qg2bGuWfRiltT2HYGx0e1QcBTrK9KAHNMwMZdQnDZFk0ZSYIpADjYCB3U12nicC5tVJwSIhwOWjb4RQ==",
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/bl/-/bl-4.0.3.tgz",
+ "integrity": "sha512-fs4G6/Hu4/EE+F75J8DuN/0IpQqNjAdC7aEQv7Qt8MHGUH7Ckv2MwTEEeN9QehD0pfIDkMI1bkHYkKy7xHyKIg==",
"dev": true,
"optional": true,
"requires": {
@@ -18771,15 +19133,13 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/temp-dir/-/temp-dir-1.0.0.tgz",
"integrity": "sha1-CnwOom06Oa+n4OvqnB/AvE2qAR0=",
- "dev": true,
- "optional": true
+ "dev": true
},
"tempfile": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/tempfile/-/tempfile-2.0.0.tgz",
"integrity": "sha1-awRGhWqbERTRhW/8vlCczLCXcmU=",
"dev": true,
- "optional": true,
"requires": {
"temp-dir": "^1.0.0",
"uuid": "^3.0.1"
@@ -19120,8 +19480,7 @@
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz",
"integrity": "sha1-8y6srFoXW+ol1/q1Zas+2HQe9W8=",
- "dev": true,
- "optional": true
+ "dev": true
},
"timers-browserify": {
"version": "2.0.2",
@@ -19419,7 +19778,6 @@
"resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
"integrity": "sha1-42RqLqTokTEr9+rObPsFOAvAHCE=",
"dev": true,
- "optional": true,
"requires": {
"escape-string-regexp": "^1.0.2"
}
@@ -19454,6 +19812,12 @@
"prelude-ls": "~1.1.2"
}
},
+ "type-fest": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.11.0.tgz",
+ "integrity": "sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==",
+ "dev": true
+ },
"typedarray": {
"version": "0.0.6",
"resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -19503,7 +19867,6 @@
"resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.3.3.tgz",
"integrity": "sha512-fUlAF7U9Ah1Q6EieQ4x4zLNejrRvDWUYmxXUpN3uziFYCHapjWFaCAnreY9bGgxzaMCFAPPpYNng57CypwJVhg==",
"dev": true,
- "optional": true,
"requires": {
"buffer": "^5.2.1",
"through": "^2.3.8"
@@ -19514,7 +19877,6 @@
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.4.3.tgz",
"integrity": "sha512-zvj65TkFeIt3i6aj5bIvJDzjjQQGs4o/sNoezg1F1kYap9Nu2jcUdpwzRSJTHMMzG0H7bZkn4rNQpImhuxWX2A==",
"dev": true,
- "optional": true,
"requires": {
"base64-js": "^1.0.2",
"ieee754": "^1.1.4"
@@ -19611,6 +19973,17 @@
"dot-prop": "^4.1.1",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
+ },
+ "dependencies": {
+ "dot-prop": {
+ "version": "4.2.1",
+ "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-4.2.1.tgz",
+ "integrity": "sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==",
+ "dev": true,
+ "requires": {
+ "is-obj": "^1.0.0"
+ }
+ }
}
},
"supports-color": {
@@ -19702,6 +20075,12 @@
}
}
},
+ "universalify": {
+ "version": "1.0.0",
+ "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+ "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug==",
+ "dev": true
+ },
"unpipe": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -19725,9 +20104,9 @@
}
},
"upath": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/upath/-/upath-1.1.0.tgz",
- "integrity": "sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw=="
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/upath/-/upath-1.2.0.tgz",
+ "integrity": "sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg=="
},
"upper-case": {
"version": "1.1.3",
@@ -19779,7 +20158,6 @@
"resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-1.0.0.tgz",
"integrity": "sha1-evjzA2Rem9eaJy56FKxovAYJ2nM=",
"dev": true,
- "optional": true,
"requires": {
"prepend-http": "^1.0.1"
}
@@ -19788,8 +20166,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/url-to-options/-/url-to-options-1.0.1.tgz",
"integrity": "sha1-FQWgOiiaSMvXpDTvuu7FBV9WM6k=",
- "dev": true,
- "optional": true
+ "dev": true
},
"use": {
"version": "1.1.2",
@@ -20280,6 +20657,12 @@
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
"dev": true
},
+ "yaml": {
+ "version": "1.10.0",
+ "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
+ "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+ "dev": true
+ },
"yargs": {
"version": "3.10.0",
"resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
@@ -20315,7 +20698,6 @@
"resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
"integrity": "sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=",
"dev": true,
- "optional": true,
"requires": {
"buffer-crc32": "~0.2.3",
"fd-slicer": "~1.1.0"
diff --git a/package.json b/package.json
index 4751eda749..8a92f3b068 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
"node": ">=0.10"
},
"scripts": {
+ "grunt": "grunt",
"assemble": "grunt assemble",
"build": "grunt build",
"test": "grunt build",
@@ -46,7 +47,9 @@
"eslint": "^4.19.1",
"eslint-config-prettier": "^2.10.0",
"eslint-plugin-prettier": "^2.7.0",
- "grunt": "^1.1.0",
+ "flat": "^5.0.2",
+ "fs-extra": "^9.0.1",
+ "grunt": "^1.3.0",
"grunt-assemble": "^0.6.3",
"grunt-cli": "^1.3.2",
"grunt-contrib-clean": "^0.6.0",
@@ -64,25 +67,29 @@
"grunt-newer": "^1.3.0",
"grunt-postcss": "^0.8.0",
"grunt-serve": "^0.1.6",
+ "grunt-shell": "^3.0.1",
"grunt-uncss": "^0.8.6",
"handlebars": "^4.7.6",
"husky": "^0.14.3",
- "js-yaml": "^3.13.1",
+ "imagemin-mozjpeg": "^9.0.0",
+ "imagemin-pngquant": "^9.0.1",
+ "js-yaml": "^3.14.1",
"lint-staged": "^9.5.0",
"load-grunt-tasks": "^5.1.0",
- "lodash": "^4.17.15",
+ "lodash": "^4.17.20",
"marked": "^0.8.2",
- "moment": "^2.24.0",
+ "moment": "^2.29.1",
"ms": "^0.7.3",
"prettier": "^1.19.1",
- "qs": "^6.0.4",
+ "qs": "^6.9.4",
"send": "^0.16.2",
"serve-index": "^1.9.1",
"simple-git": "^1.132.0",
"time-grunt": "^1.4.0",
- "uglify-js": "^2.8.29"
+ "uglify-js": "^2.8.29",
+ "yaml": "^1.10.0"
},
"dependencies": {
- "upath": "^1.1.0"
+ "upath": "^1.2.0"
}
}
diff --git a/src/assets/css/fonts/inconsolata.eot b/src/assets/css/fonts/inconsolata.eot
deleted file mode 100755
index 4b076884d0..0000000000
Binary files a/src/assets/css/fonts/inconsolata.eot and /dev/null differ
diff --git a/src/assets/css/fonts/inconsolata.otf b/src/assets/css/fonts/inconsolata.otf
deleted file mode 100755
index e7e1fa0cd7..0000000000
Binary files a/src/assets/css/fonts/inconsolata.otf and /dev/null differ
diff --git a/src/assets/css/fonts/inconsolata.svg b/src/assets/css/fonts/inconsolata.svg
deleted file mode 100755
index 2feb4e38c3..0000000000
--- a/src/assets/css/fonts/inconsolata.svg
+++ /dev/null
@@ -1,240 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/assets/css/fonts/inconsolata.ttf b/src/assets/css/fonts/inconsolata.ttf
deleted file mode 100755
index 2e8649b73d..0000000000
Binary files a/src/assets/css/fonts/inconsolata.ttf and /dev/null differ
diff --git a/src/assets/css/fonts/inconsolata.woff b/src/assets/css/fonts/inconsolata.woff
deleted file mode 100755
index 41990c1dde..0000000000
Binary files a/src/assets/css/fonts/inconsolata.woff and /dev/null differ
diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 3ed6a3bfae..9fe1ee9d43 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -10,6 +10,127 @@
Base styles: opinionated defaults
========================================================================== */
+html,
+button,
+input,
+select {
+ color: #222;
+}
+
+textarea {
+ line-height: 1.45em;
+ padding: 0.5em 1em 0.5em 1em;
+ border: none;
+}
+
+body {
+ font-size: 1em;
+ line-height: 1.4;
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection rule sets have to be separate.
+ * Customize the background color to match your design.
+ */
+
+::-moz-selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+::selection {
+ background: #b3d4fc;
+ text-shadow: none;
+}
+
+/*
+ * A better looking default horizontal rule
+ */
+
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+
+/*
+ * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+ */
+
+img {
+ vertical-align: middle;
+}
+
+img.med_left {
+ width: 300px;
+ float: left;
+}
+
+img.med_right {
+ width: 300px;
+ float: right;
+}
+
+img.small_left {
+ width: 200px;
+ float: left;
+}
+
+img.smaller_left {
+ width: 140px;
+ float: left;
+}
+
+img.small_right {
+ width: 200px;
+ float: right;
+}
+
+img.smaller_right {
+ width: 140px;
+ float: right;
+}
+
+img.small_center {
+ width: 200px;
+ margin-left: 250px;
+}
+
+img.small {
+ width: 160px;
+}
+
+img.med {
+ width: 400px;
+}
+
+img.med_center {
+ width: 400px;
+ margin-left: 150px;
+}
+
+/*
+ * Remove default fieldset styles.
+ */
+
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+
+/*
+ * Allow only vertical resizing of textareas.
+ */
+
+textarea {
+ resize: vertical;
+}
+
/*
//////////////////////////////////////////////////
HOMEPAGE
@@ -24,15 +145,7 @@
}
#home-page .home a {
- pointer-events: all !important;
-}
-
-.home .button_box a {
- color: #ed225d !important;
-}
-
-.home .button_box a:hover {
- color: #ffffff !important;
+ pointer-events: all;
}
#lockup > a {
@@ -50,7 +163,7 @@
#menu.top_menu,
#menu {
list-style: none;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
width: 100%;
margin: 0 0 1em 0;
padding: 0;
@@ -112,7 +225,7 @@
.sidebar-menu-icon .sidebar-nav-icon:before,
.sidebar-menu-icon .sidebar-nav-icon:after {
background: #ed225d;
- content: "";
+ content: '';
display: block;
height: 100%;
position: absolute;
@@ -178,20 +291,25 @@
font-size: 0.7em;
}
-.focus {
- border: 1px solid #ed225d;
- padding: 0.4em;
- margin: 4em 1.75em 0 0;
- padding: 0.5em 1em 0em 1em;
- color: #333 !important;
+#skip-to-content {
+ position: absolute;
+ left: 0px;
+ top: 40px;
+ z-index: 5;
+ background-color: #ed225d;
+ color: white;
+ width: auto;
+ height: 50px;
+ border: none;
+ outline-style: none;
+ text-align: center;
+ font-size: 25px;
+ padding: 5px;
+ opacity: 0;
}
-.focus_blue {
- border: 1px solid #2d7bb6;
- padding: 0.4em;
- margin: 4em 1.75em 0 0;
- padding: 0.5em 1em 0em 1em;
- color: #333 !important;
+#skip-to-content:focus {
+ opacity: 1;
}
/*
@@ -204,26 +322,18 @@
border: 1px solid #ed225d;
padding: 0.4em 0.6em;
margin: 0.5em 0;
- color: #333 !important;
- font-family: "Montserrat", sans-serif;
+ color: #333;
+ font-family: 'Montserrat', sans-serif;
display: inline-block;
}
-.button_box a {
- color: #333333 !important;
-}
-
-.button_box a:hover {
- color: #ffffff !important;
-}
-
.download_box {
border: 1px solid #ed225d;
padding: 0.4em;
margin: 0 1.75em 0 0;
width: 18.65em;
float: left;
- color: #333 !important;
+ color: #333;
height: 7.45em;
position: relative;
}
@@ -232,7 +342,7 @@
.button_box:hover {
border: 1px solid #ed225d;
background: #ed225d;
- color: #ffffff !important;
+ color: #ffffff;
}
.download_box.half_box {
@@ -252,7 +362,7 @@
border-bottom: 0.09em dashed;
border-bottom-color: #ed225d;
line-height: 1.2;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
display: block;
}
@@ -331,33 +441,32 @@
GET STARTED
//////////////////////////////////////////////////
*/
-
-/*.tutorial-btn {
- background: white;
- color: black !important;
- padding: 7px;
- width: 500px;
- text-align: center;
- border: 1px solid #ccc;
- border-radius: 4px;
+#get-started-page .edit_space {
+ position: relative;
+ order: 3;
}
-
-.tutorial-btn:hover {
- background: #AFAFAF;
- color: white !important;
- padding: 7px;
- width: 500px;
- text-align: center;
- border-radius: 4px;
- cursor: pointer;
-}*/
-
-.tutorial-title {
- border-bottom: 4px dotted #ed225d;
- padding-bottom: 10px;
- margin-bottom: 10px;
+#get-started-page .edit_space .copy_button{
+ color: #2d7bb6;
+ border-color: rgba(45, 123, 182, 0.25);
+ float: right;
+ margin: 0.5em 0 0 0.5em;
+ background: rgba(255, 255, 255, 0.7);
+ position: absolute;
+ z-index: 2;
+ left: 31.33em;
+ top: -1.5em;
+}
+/* To make get-started-page responsive */
+@media (max-width: 780px) {
+ #get-started-page .edit_space .copy_button{
+ left: 6.44em;
+ }
+}
+@media (max-width: 600px) {
+ #get-started-page .edit_space .copy_button{
+ left: 5.91em;
+ }
}
-
/*
//////////////////////////////////////////////////
EXAMPLES
@@ -384,7 +493,7 @@
.reference-group h3 {
font-size: 1em;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
margin-top: 0.5em;
}
@@ -420,14 +529,16 @@ div.reference-subgroup {
color: #afafaf;
}
+#item {
+ width: 100%;
+}
+
#item h2 {
margin: 0.777em 0 0 0;
font-size: 1.444em;
font-weight: inherit;
- /*line-height: 1.2;*/
- font-family: inconsolatamedium, consolas, monospace;
- color: #00a1d3 !important;
- /* 2D7BB6, 4A90E2 */
+ font-family: 'Inconsolata', consolas, monospace;
+ color: #00a1d3;
}
#item h3 {
@@ -449,10 +560,14 @@ div.reference-subgroup {
width: 100%;
}
+.syntax pre {
+ width: 100%;
+}
+
.item-wrapper,
.list-wrapper {
float: left;
- outline: none !important;
+ outline: none;
}
.paramname {
@@ -484,80 +599,73 @@ div.reference-subgroup {
/* EXAMPLES IN REF */
-.example-content .edit_space,
-.example-content pre {
- position: absolute !important;
- top: 0.5em !important;
- left: 120px !important;
- padding-top: 0 !important;
- border: none !important;
+.example div {
+ position: relative;
}
-pre.norender {
- left: 0px !important;
- margin-left: 0 !important;
+.example-content .example_code {
+ position: relative;
+ left: 1em;
+ padding-top: 0;
+ margin-top: 1rem;
+ border: none;
+ width: 30.5em;
+ max-width: 100%;
}
-.example-content pre {
- margin-top: 0 !important;
- width: 30.5em !important;
+.example-content .example_code.norender {
+ left: 0px;
+ margin-left: 0;
}
.example-content .edit_space {
- margin: -0.5em 0 0 -0.5em !important;
-}
-
-.example_container .edit_space {
- position: absolute !important;
- top: 0;
- left: 0;
-}
-
-.example_container pre {
+ position: absolute;
top: 0;
left: 0;
+ margin-top: -0.5em;
width: 100%;
+ pointer-events: none;
}
-.example div {
- position: relative;
+.example-content .edit_space * {
+ pointer-events: auto;
}
-.example_container button {
- position: absolute;
- top: 0.25em;
+.example-content .edit_space ul {
+ display: flex;
+ flex-direction: row-reverse;
+ position: relative;
+ pointer-events: none;
}
-.edit_space button {
- font-family: "Montserrat", sans-serif;
+.example-content .edit_space ul li button {
+ font-family: 'Montserrat', sans-serif;
font-size: 1em;
color: #ccc;
border: 1px solid rgba(200, 200, 200, 0.15);
background: transparent;
outline: none;
+ margin-top: 0.25em;
}
-.example_container button:hover,
-.example_container.editing button {
+.example-content .edit_space ul li button:hover,
+.example_container.editing ul li button {
color: #2d7bb6;
border-color: rgba(45, 123, 182, 0.25);
}
-.edit_button {
- left: 21.42em;
-}
-
-.reset_button {
- left: 24em;
-}
-
-.copy_button {
- left: 27.33em;
+.example-content .edit_space .edit_area {
+ position: absolute;
+ top: 0.5em;
+ left: 120px;
+ width: 30.5em;
+ padding-top: 1.5rem;
+ display: none;
}
.display_button {
margin-bottom: 2em;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-size: 1em;
color: #2d7bb6;
border: 1px solid rgba(45, 123, 182, 0.25);
@@ -565,47 +673,76 @@ pre.norender {
outline: none;
}
-.example_container {
+.example-content .example_container {
width: 36em;
+ max-width: 100%;
border-top: 0.09em dashed;
border-top-color: #333;
padding-top: 0.5em;
- margin-top: 1em;
+ margin-top: 2em;
+ min-height: 120px;
+ height: calc(100% * 1.1 + 20px);
+ display: flex;
}
-form {
- pointer-events: all;
+.example-content .example_container:first-of-type {
+ margin-top: 1em;
}
-#skip-to-content {
- position: absolute;
- left: 0px;
- top: 0px;
- z-index: 5;
- background-color: #ed225d;
- color: white;
- width: auto;
- height: 50px;
- border: none;
- outline-style: none;
- text-align: center;
- font-size: 25px;
- padding: 5px;
- opacity: 0;
+/*to make ref example responsive*/
+@media (max-width: 600px) {
+ .example-content .example_code {
+ margin-top: 0.2rem;
+ left: 0.5rem;
+ }
+
+ .example-content .example_container {
+ width: 100%;
+ min-height: 220px;
+ height: calc(100% * 1.1 + 120px);
+ display: block;
+ }
+
+ .example-content .edit_space .edit_area {
+ top: calc(120px + 1em);
+ left: 0;
+ width: 100%;
+ padding: 0.5em;
+ }
+
+ .example_container button {
+ top: 124px;
+ }
+
+ .description {
+ margin-top: 3rem;
+ }
+
+ .edit_button {
+ left: 0;
+ }
+
+ .reset_button {
+ left: 2.58em;
+ }
+
+ .copy_button {
+ left: 5.91em;
+ }
}
-#skip-to-content:focus {
- opacity: 1;
+form {
+ pointer-events: all;
}
#search_button {
background: url(../img/search.png) 100% no-repeat;
}
-#search input[type="text"],
-#search input[type="search"] {
+#search input[type='text'],
+#search input[type='search'] {
border: 1px solid rgba(200, 200, 200, 0.5);
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
font-size: 2.25em;
width: 9.75em;
}
@@ -621,7 +758,7 @@ form {
color: #ccc;
}
-#search input[type="text"]:focus {
+#search input[type='text']:focus {
color: #2d7bb6;
outline-color: #2d7bb6;
outline-width: 1px;
@@ -631,245 +768,67 @@ form {
#search .twitter-typeahead .tt-dropdown-menu {
background-color: #fff;
border: 1px solid rgba(0, 0, 0, 0.2);
- overflow-y: auto;
- font-size: 1em;
- line-height: 1.4em;
-}
-
-#search .twitter-typeahead .tt-suggestion.tt-cursor {
- color: #333;
- background-color: #eee;
-}
-
-#search .twitter-typeahead .tt-suggestion p {
- margin: 0;
-}
-
-#search .twitter-typeahead .tt-suggestion p .small {
- font-size: 12px;
- color: #666;
-}
-
-#search {
- float: right;
-}
-
-#search .twitter-typeahead .tt-dropdown-menu {
- border: 1px solid rgba(0, 0, 0, 0.2);
- padding: 0.5em;
- max-height: 200px;
- overflow-y: auto;
- font-size: 1em;
- line-height: 1.4em;
-}
-
-#search .twitter-typeahead .tt-suggestion {
- padding: 3px 20px;
- line-height: 24px;
- cursor: pointer;
-}
-
-#search .twitter-typeahead .empty-message {
- padding: 8px 20px 1px 20px;
- font-size: 14px;
- line-height: 24px;
-}
-
-#search_button {
- float: right;
-}
-
-a.code.core {
- color: #333;
-}
-
-a.code.addon {
- color: #704f21;
-}
-
-html,
-button,
-input,
-select {
- color: #222;
-}
-
-textarea {
- line-height: 1.45em;
- padding: 0.5em 1em 0.5em 1em;
- border: none;
-}
-
-body {
- font-size: 1em;
- line-height: 1.4;
-}
-
-/*
- * Remove text-shadow in selection highlight: h5bp.com/i
- * These selection rule sets have to be separate.
- * Customize the background color to match your design.
- */
-
-::-moz-selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-::selection {
- background: #b3d4fc;
- text-shadow: none;
-}
-
-/*
- * A better looking default horizontal rule
- */
-
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-
-/*
- * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
- */
-
-img {
- vertical-align: middle;
-}
-
-img.med_left {
- width: 300px;
- float: left;
-}
-
-img.med_right {
- width: 300px;
- float: right;
-}
-
-img.small_left {
- width: 200px;
- float: left;
-}
-
-img.smaller_left {
- width: 140px;
- float: left;
-}
-
-img.small_right {
- width: 200px;
- float: right;
-}
-
-img.smaller_right {
- width: 140px;
- float: right;
-}
-
-img.small_center {
- width: 200px;
- margin-left: 250px;
-}
-
-img.small {
- width: 160px;
-}
-
-img.med {
- width: 400px;
-}
-
-img.med_center {
- width: 400px;
- margin-left: 150px;
-}
-
-/*
- * Remove default fieldset styles.
- */
-
-fieldset {
- border: 0;
- margin: 0;
- padding: 0;
-}
-
-/*
- * Allow only vertical resizing of textareas.
- */
-
-textarea {
- resize: vertical;
+ overflow-y: auto;
+ font-size: 1em;
+ line-height: 1.4em;
}
-/*
- //////////////////////////////////////////////////
- CONTRIBUTORS FORM
- //////////////////////////////////////////////////
-*/
+#search .twitter-typeahead .tt-suggestion.tt-cursor {
+ color: #333;
+ background-color: #eee;
+}
-.contribute-form {
- font-family: "Montserrat", sans-serif;
+#search .twitter-typeahead .tt-suggestion p {
+ margin: 0;
}
-.contribute-form input,
-textarea {
- border: 1px solid #ccc;
- border-radius: 4px;
- padding: 5px;
- font-size: 14px;
+#search .twitter-typeahead .tt-suggestion p .small {
+ font-size: 12px;
+ color: #666;
}
-.contribute-form textarea {
- border: 1px solid #ccc;
- border-radius: 4px;
- padding: 5px;
- font-size: 14px;
- width: 350px;
+#search {
+ float: right;
}
-.contribute-form #form-help {
- font-size: small;
- color: #ababab;
+#search .twitter-typeahead .tt-dropdown-menu {
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ padding: 0.5em;
+ max-height: 200px;
+ overflow-y: auto;
+ font-size: 1em;
+ line-height: 1.4em;
}
-.contribute-form #required-asterisk {
- color: #ec245e;
+#search .twitter-typeahead .tt-suggestion {
+ padding: 3px 20px;
+ line-height: 24px;
+ cursor: pointer;
}
-.contribute-form #input-title {
- font-size: medium;
- margin-top: 15px;
+#search .twitter-typeahead .empty-message {
+ padding: 8px 20px 1px 20px;
+ font-size: 14px;
+ line-height: 24px;
}
-.contribute-form #hide-message {
- display: none;
+#search_button {
+ float: right;
}
-.contribute-button {
+a.code.core {
color: #333;
- background-color: #fff;
- border-color: #ccc;
- margin-bottom: 0;
- font-size: medium;
- border: 1px solid transparent;
}
-.contribution-info li {
- margin-bottom: 2px;
- margin-left: 20px;
- font-size: medium;
+a.code.addon {
+ color: #704f21;
}
-.contribution-info ul {
- margin-bottom: 15px;
-}
+/*
+ //////////////////////////////////////////////////
+ CONTRIBUTORS FORM
+ //////////////////////////////////////////////////
+*/
/*
//////////////////////////////////////////////////
@@ -901,7 +860,7 @@ textarea {
height: 100px;
position: relative;
background: white;
- /* margin-top: 1.5em; temp promo */
+ margin-top: 1.5em; /* temp promo */
}
#navi,
@@ -955,7 +914,6 @@ h3 {
margin: 1em 0 0 0;
}
-
.bullet-list {
padding: 0 0 0 40px;
list-style: disc;
@@ -988,19 +946,9 @@ h3 {
right: 0;
bottom: 0;
z-index: 1000;
- /*display: none;*/
border: none;
}
-/*#popupExampleFrame #exampleFrame {
- width: 100%;
- height: 100%;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 999;
-}*/
-
#exampleDisplay button {
color: #2d7bb6;
border-color: rgba(45, 123, 182, 0.25);
@@ -1036,113 +984,113 @@ h3 {
order: 3;
}
-#exampleFrame {
+#exampleDisplay #exampleFrame {
height: 22em;
order: 2;
}
-#exampleEditor {
+#exampleDisplay #exampleEditor {
height: 500em;
width: 710px;
overflow: hidden;
margin-top: 0.5em;
color: #222;
- font-family: inconsolatamedium, Consolas, Monaco, "Andale Mono", monospace;
- font-size: 1em !important;
+ font-family: 'Inconsolata', consolas, monospace;
+ font-size: 1em;
background-color: #fff;
line-height: 1em;
order: 4;
}
-.ace_info {
- background-color: #d7e5f5 !important;
+#exampleDisplay #exampleEditor .ace_gutter-cell {
+ background-image: none;
+ padding-left: 10px;
+ overflow: hidden;
+ background-color: #afafaf;
+}
+
+#exampleDisplay #exampleEditor .ace_gutter-cell.ace_info {
+ background-color: #d7e5f5;
}
-.ace_warning {
- background-color: #ffd700 !important;
- color: #ffffff !important;
+#exampleDisplay #exampleEditor .ace_gutter-cell.ace_warning {
+ background-color: #ffd700;
+ color: #ffffff;
}
-.ace_error {
- background-color: #ff6347 !important;
- color: #ffffff !important;
+#exampleDisplay #exampleEditor .ace_gutter-cell.ace_error {
+ background-color: #ff6347;
+ color: #ffffff;
}
/* property, tag, boolean,
number, function-name, constant,
symbol */
-.ace_numeric,
-.ace_tag {
- color: #dc3787 !important;
+#exampleDisplay #exampleEditor .ace_numeric,
+#exampleDisplay #exampleEditor .ace_tag {
+ color: #dc3787;
/* not p5 pink, but related */
}
/* atrule, attr-value, keyword,
class-name */
-.ace_type,
-.ace_class,
-.ace_attribute-name {
- color: #704f21 !important;
+#exampleDisplay #exampleEditor .ace_type,
+#exampleDisplay #exampleEditor .ace_class,
+#exampleDisplay #exampleEditor .ace_attribute-name {
+ color: #704f21;
/* darker brown */
}
/* selector, attr-name,
function, builtin */
-.ace_function,
-.ace_keyword,
-.ace_support {
- color: #00a1d3 !important;
+#exampleDisplay #exampleEditor .ace_function,
+#exampleDisplay #exampleEditor .ace_keyword,
+#exampleDisplay #exampleEditor .ace_support {
+ color: #00a1d3;
/* not p5 blue, but related */
}
/* comment, block-comment, prolog,
doctype, cdata */
-.ace_comment {
- color: #a0a0a0 !important;
+#exampleDisplay #exampleEditor .ace_comment {
+ color: #a0a0a0;
/* light gray */
}
/* operator, entity, url,
variable */
-.ace_string {
- color: #a67f59 !important;
+#exampleDisplay #exampleEditor .ace_string {
+ color: #a67f59;
/* og coy a67f59 a light brown */
}
-.ace_operator {
- color: #333 !important;
+#exampleDisplay #exampleEditor .ace_operator {
+ color: #333;
}
/* regex, important */
-.ace_regexp {
- color: #e90 !important;
+#exampleDisplay #exampleEditor .ace_regexp {
+ color: #e90;
/* og coy e90 orange */
}
-.ace-gutter {
- color: #333 !important;
+#exampleDisplay #exampleEditor .ace-gutter {
+ color: #333;
}
-.ace-gutter-layer {
- color: #333 !important;
+#exampleDisplay #exampleEditor .ace-gutter-layer {
+ color: #333;
}
-.ace_folding-enabled {
+#exampleDisplay #exampleEditor .ace_folding-enabled {
width: 10px !important;
- color: #333 !important;
-}
-
-.ace_gutter-cell {
- background-image: none !important;
- padding-left: 10px !important;
- overflow: hidden !important;
- background-color: #afafaf !important;
+ color: #333;
}
.attribution {
@@ -1152,39 +1100,6 @@ variable */
margin: 30px 0px 30px 0px;
}
-/*
- //////////////////////////////////////////////////
- GALLERY
- //////////////////////////////////////////////////
-*/
-
-.gallery-item {
- font-size: 0.75em;
- text-align: center;
- display: inline-block;
- margin: 10px;
-}
-
-.gallery-item a:hover {
- border: none;
- opacity: 0.8;
-}
-
-.gallery-item p {
- margin: 5px;
-}
-
-img.gallery-img {
- width: 200px;
- height: 200px;
-}
-
-.gallery-source {
- color: #afafaf;
- font-size: 1em;
- margin: 0px !important;
-}
-
/*
//////////////////////////////////////////////////
SHOWCASE
@@ -1195,20 +1110,20 @@ img.gallery-img {
}
#showcase-page .showcase-intro h1 {
- font: italic 900 14.5vw "Montserrat", sans-serif;
+ font: italic 900 14.5vw 'Montserrat', sans-serif;
color: #ed225d;
text-align: left;
text-transform: uppercase;
}
#showcase-page .showcase-intro p {
- font: 400 1.4rem "Montserrat", sans-serif;
+ font: 400 1.4rem 'Montserrat', sans-serif;
line-height: 1.5em;
}
#showcase-page .showcase-featured h2,
#showcase-page .project-page h2 {
- font: italic 900 2rem "Montserrat", sans-serif;
+ font: italic 900 2rem 'Montserrat', sans-serif;
color: #ed225d;
letter-spacing: 0.05rem;
}
@@ -1229,16 +1144,16 @@ img.gallery-img {
}
#showcase-page .showcase-featured h3.title {
- font: italic 900 1rem "Montserrat", sans-serif;
+ font: italic 900 1rem 'Montserrat', sans-serif;
}
#showcase-page .showcase-featured p.credit {
- font: 500 1rem "Montserrat", sans-serif;
+ font: 500 1rem 'Montserrat', sans-serif;
}
#showcase-page .showcase-featured p.description {
font-size: 1em;
- margin-bottom: .5rem;
+ margin-bottom: 0.5rem;
}
#showcase-page .nominate {
@@ -1255,7 +1170,7 @@ img.gallery-img {
border: solid #ed225d 2px;
box-shadow: 4px 4px 0 #ed225d;
- font: 1.5rem "Montserrat", sans-serif;
+ font: 1.5rem 'Montserrat', sans-serif;
color: #ed225d;
letter-spacing: 0.02rem;
transition: all 0.3s;
@@ -1265,7 +1180,7 @@ img.gallery-img {
#showcase-page .nominate a,
#showcase-page .nominate a:visited {
padding: 0.4em 0.3em;
- font: 1.3rem "Montserrat", sans-serif;
+ font: 1.3rem 'Montserrat', sans-serif;
}
}
@@ -1284,13 +1199,13 @@ img.gallery-img {
}
#showcase-page .showcase-featured a::after {
- content: " →";
+ content: ' →';
}
#showcase-page .showcase-featured a.tag::after {
- content: "";
+ content: '';
}
#showcase-page .showcase-featured .no-arrow-link::after {
- content: " ";
+ content: ' ';
}
#showcase-page .showcase-featured .no-arrow-link:hover {
@@ -1303,35 +1218,35 @@ img.gallery-img {
margin-top: 1em;
}
-ul.project-tags a{
+ul.project-tags a {
line-height: 0;
display: -webkit-box;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
- font-size: .5em;
+ font-size: 0.5em;
margin: 0px;
}
-h3.title{
+h3.title {
margin-top: 3em;
}
#showcase-page ul.project-tags li {
margin: 5px;
display: inline-block;
}
-h2.featuring{
+h2.featuring {
margin-top: 0px;
}
-#showcase-page a.tag{
+#showcase-page a.tag {
display: inline-block;
padding: 6px 14px;
background-color: #ffe8e8;
border-radius: 27px;
- font: 0.7rem "Montserrat", sans-serif;
+ font: 0.7rem 'Montserrat', sans-serif;
color: #333;
}
-#showcase-page ul.project-tags li{
+#showcase-page ul.project-tags li {
margin: 0px;
}
/*
@@ -1354,6 +1269,10 @@ h2.featuring{
}
*/
+#showcase-page{
+ margin-top: 3em;
+}
+
#showcase-page .project-page h2 {
line-height: 1.4;
}
@@ -1365,7 +1284,7 @@ h2.featuring{
*/
#showcase-page .showcase-intro h1 {
- font: italic 900 6.35vw "Montserrat", sans-serif;
+ font: italic 900 6.35vw 'Montserrat', sans-serif;
}
#showcase-page .showcase-intro p {
@@ -1399,18 +1318,18 @@ h2.featuring{
#showcase-page .project-metadata section h3 {
color: #ed225d;
- font: bold italic 1rem "Montserrat", sans-serif;
+ font: bold italic 1rem 'Montserrat', sans-serif;
}
#showcase-page .project-resources ul.links {
- font: 500 0.7rem "Montserrat", sans-serif;
+ font: 500 0.7rem 'Montserrat', sans-serif;
letter-spacing: 0.01rem;
line-height: 1.5;
margin: 0.5rem 0;
}
#showcase-page .project-credit {
- font: italic bold 1.25rem "Montserrat", sans-serif;
+ font: italic bold 1.25rem 'Montserrat', sans-serif;
}
#showcase-page .project-credit p {
@@ -1425,6 +1344,10 @@ h2.featuring{
font-size: 0.7rem;
}
+#showcase-page .qa-group{
+ margin-bottom: 2em;
+}
+
#showcase-page .project-q {
margin-left: 0%;
display: inline-block;
@@ -1433,7 +1356,7 @@ h2.featuring{
font-size: 1.2rem;
font-weight: 900;
*/
- font: 900 1.2rem "Montserrat", sans-serif;
+ font: 900 1.2rem 'Montserrat', sans-serif;
line-height: 1.5;
}
@@ -1462,7 +1385,7 @@ h2.featuring{
margin-top: 3em;
}
-/*search-filter label*/
+/*Search-filter Button*/
#teach-page .search-filter {
display: inline;
@@ -1505,6 +1428,32 @@ h2.featuring{
}
+/*Filter Panel*/
+
+#teach-page .filter-panel {
+ padding: 0px;
+ background-color: white;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ margin-bottom: 0.8em;
+ padding-bottom: .4em;
+
+}
+
+
+
+#teach-page .filter-panel p {
+ margin: 0;
+ color: #333;
+ font-size: .83em;
+ height: 50px;
+ padding-top:20px;
+ transition: all 0.5s ease-in-out;
+}
+
+
+
#teach-page ul.filters p.filter-title {
font: 400 0.83rem "Montserrat", sans-serif;
color: #ed225d;
@@ -1544,6 +1493,8 @@ h2.featuring{
background: #fafafa;
}
+
+
#teach-page ul.filters li label {
padding: 6px 12px;
cursor: pointer;
@@ -1581,38 +1532,77 @@ h2.featuring{
}
-/*Filter Panel*/
-#teach-page .filter-panel {
- padding: 0px;
- background-color: white;
- max-height: 0;
- overflow: hidden;
- transition: max-height 0.2s ease-out;
+ /*p5 workshop and class title*/
+
+#teach-page .teach-intro p {
+ font: 400 1.2rem "Times", sans-serif;
+ line-height: 1.5em;
+}
+
+/*teach case list*/
+
+#teach-page li.case-list{
+
margin-bottom: 0.8em;
padding-bottom: .4em;
+ padding-top: .4em;
+ margin: 3px 0px;
+
+ font: 200 1.0rem "Times", sans-serif;
+ line-height: 1.2em;
+
+ border-bottom: 0.1em dashed #ffe8e8;
}
+#teach-page li.case-list label.case-list-title{
+
+
+ margin: 0px 0px 10px 0px;
+ padding-right: 10px;
+
+ font: 200 1.0rem "Times", sans-serif;
+ line-height: 1.2em;
-#teach-page .filter-panel p {
- margin: 0;
- color: #333;
- font-size: .83em;
- height: 50px;
- padding-top:20px;
- transition: all 0.5s ease-in-out;
}
- /*p5 workshop and class title*/
-#teach-page .teach-intro p {
- font: 400 1.2rem "Times", sans-serif;
- line-height: 1.5em;
+#teach-page li.case-list label.case-list-name {
+ display: inline-block;
+ border-radius: 25px;
+ font: 200 0.7rem "Montserrat", sans-serif;
+ white-space: nowrap;
+ margin: 0px 0px 0px 0px;
+ padding: 10px 5px 0px 0px;
+ color: black;
+ background: white;
+ text-align: center;
+
+
}
+#teach-page li.case-list label.case-list-year {
+ display: inline-block;
+ border-radius: 25px;
+ font: 200 0.7rem "Montserrat", sans-serif;
+
+ white-space: nowrap;
+ margin: 5px 0px 0px 0px;
+ padding: 6px 12px;
+ /*color: #ed225d;*/
+ color: black;
+ background: #fafafa;
+ text-align: center;
+ /*margin-bottom: .6em;*/
+ /*margin-top: .6em;*/
+
+}
+
+
+
/*modal box*/
#teach-page .modal-title{
@@ -1664,12 +1654,12 @@ h2.featuring{
#teach-page .case label{
margin-left: 1em;
margin-right: 1em;
- margin: 2px 2px;
+ margin: 2px 2px;
padding: 5px 8px;
display: inline-block;
border-radius: 25px;
font: 0.7rem "Montserrat", sans-serif;
- color: #aaaaaa;
+ color: #aaaaaa;
white-space: nowrap;
color: white;
background: #ed225d;
@@ -1685,9 +1675,9 @@ h2.featuring{
}
#teach-page .modal-body::-webkit-scrollbar-track {
- background: #f1f1f1;
+ background: #f1f1f1;
}
-
+
#teach-page .modal-body::-webkit-scrollbar-thumb {
background: #ffe8e8;
}
@@ -1701,7 +1691,6 @@ h2.featuring{
#teach-page .case span {
color: #ed225d;
- font-color: #ed225d;
font: 900 1.4rem "Montserrat", sans-serif;
}
@@ -1709,7 +1698,6 @@ h2.featuring{
#teach-page .case p.lead-name{
font: 900 Italic 1.2rem "Montserrat", sans-serif;
color: #ed225d;
- font-color: #ed225d;
line-height: 1.4em;
border-bottom: 1.4em;
}
@@ -1725,7 +1713,7 @@ h2.featuring{
border-bottom: none;
margin-bottom: 2em;
margin-top: 1em;
-
+
}
@@ -1747,9 +1735,8 @@ h2.featuring{
font: 400 1rem "Montserrat", sans-serif;
color: #ed225d;
- font-color: #ffe8e8;
line-height: 1.4em;
- border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
+ border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
}
#teach-page .case p{
@@ -1772,10 +1759,6 @@ h2.featuring{
margin-bottom: 0.8em;
}
-/*#teach-page .modal-body p{
- border-bottom: 0.1em dashed rgba(237, 34, 93, 0.15);
-
-}*/
#teach-page .modal-body:-webkit-scrollbar{
display: none;
@@ -1806,15 +1789,14 @@ h2.featuring{
bottom: 2%;
margin: auto; /*keep centered*/
border: 1.2px solid #ffe8e8;
- max-width: 740px;
+ max-width: 740px;
box-shadow: 10px 100px 30px -17px rgba(237, 34, 93, 0.5);
box-shadow: 10px 100px 20px -17px rgba(237, 34, 93, 0.5);
box-shadow: 10px 20px 10px -17px rgba(237, 34, 93, 0.5);
-/* overflow-y: initial !important*/
}
#teach-page .modal-body{
-
+
margin: auto;
height: 85%;
width: 95%;
@@ -1828,7 +1810,7 @@ h2.featuring{
background: white;
/*background: white;
background: #fafafa;*/
- /*border: solid white 1px;*/
+ /*border: solid white 1px;*/
/*background: -webkit-linear-gradient(to bottom, white, #fafafa);
background: linear-gradient(to bottom, white, #fafafa);*/
/*border: 1px solid #ffe8e8;*/
@@ -1840,55 +1822,16 @@ h2.featuring{
}
#teach-page .results-wrapper ul li.case-list a.myBtn {
-
+
overflow: hidden;
text-overflow: ellipsis;
}
-#teach-page .case-list{
-
- margin-bottom: 0.8em;
- padding-bottom: .4em;
-
- font: 400 1.0rem "Times", sans-serif;
- line-height: 1.2em;
-
- border-bottom: 0.1em dashed #ffe8e8;
-
-}
-
-
-
-
-/* ==========================================================================
- Chrome Frame prompt
- ========================================================================== */
-
-.chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: #000;
- padding: 0.2em 0;
-}
-
/* ==========================================================================
Author's custom styles
========================================================================== */
-/* always */
-
-@font-face {
- font-family: "inconsolatamedium";
- src: url("fonts/inconsolata.eot");
- src: url("fonts/inconsolata.eot?#iefix") format("embedded-opentype"),
- url("fonts/inconsolata.woff") format("woff"),
- url("fonts/inconsolata.ttf") format("truetype"),
- url("fonts/inconsolata.svg#inconsolatamedium") format("svg");
- font-weight: normal;
- font-style: normal;
-}
-
/* apply a natural box layout model to all elements */
*,
@@ -1906,7 +1849,7 @@ html {
body {
margin: 0;
background-color: #fff;
- font-family: "Times";
+ font-family: 'Times';
font-weight: 400;
line-height: 1.45;
color: #333;
@@ -1925,9 +1868,6 @@ p {
#menu li a:link,
#menu li a:visited,
-
-/*#menu li a:focus:link,*/
-
#menu li a:focus:active,
#menu li a:focus:hover {
color: #ed225d;
@@ -1968,8 +1908,8 @@ a.nounderline:hover {
border: none;
}
-.here {
- color: #ed225d !important;
+a.here {
+ color: #ed225d;
text-decoration: none;
padding-bottom: 0.1em;
border-bottom: transparent;
@@ -1992,7 +1932,7 @@ h5 {
margin: 1.414em 0 0.5em 0;
font-weight: inherit;
line-height: 1.2;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
}
h1 {
@@ -2008,12 +1948,12 @@ h2 {
}
.code {
- font-family: inconsolatamedium, consolas, monospace;
+ font-family: 'Inconsolata', consolas, monospace;
}
#backlink {
margin: 1.2em 0.444em 0 0;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
float: right;
}
@@ -2046,7 +1986,7 @@ h2 {
rgba(116, 255, 183, 1) 0%,
rgba(138, 255, 242, 1) 100%
);
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
color: #ed225d !important;
}
@@ -2109,36 +2049,6 @@ h2 {
margin-right: 2em;
}
-#family form {
- float: right;
- padding: 0.375em 0.75em 0.375em 0.75em;
- margin-right: 0.25em;
-}
-
-#family form input[type="text"] {
- visibility: hidden;
- width: 0;
- margin: 0;
- color: #333;
- border: 1px solid #3796d1;
- font-family: "Roboto" !important;
- font-weight: 400;
- font-size: 1em;
- transition: width 100ms;
- outline: none;
-}
-
-#family form.form__open input[type="text"] {
- visibility: visible;
- width: 9.75em;
-}
-
-#family form input[type="submit"] {
- background: url("../img/search.png") center center no-repeat;
- border: none;
- outline: none;
-}
-
.code-snippet {
margin: 0 0 0 1em;
width: 90%;
@@ -2149,6 +2059,7 @@ h2 {
margin: 0 0 0 1em;
padding: 0;
float: left;
+ max-width: 100%;
}
.method_description p {
@@ -2157,10 +2068,6 @@ h2 {
main {
padding: 0;
- /*
- margin:0 auto;
- clear:both;
- */
}
.spacer {
@@ -2261,7 +2168,7 @@ p + img {
#lockup p {
color: #ed225d;
font-size: 0.7em;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
margin: 0.5em 0 0 8.5em;
}
@@ -2279,7 +2186,7 @@ p + img {
.caption p {
text-align: right;
font-size: 0.7em;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
padding-top: 0.25em;
}
@@ -2321,7 +2228,7 @@ footer {
}
.ir:before {
- content: "";
+ content: '';
display: block;
width: 0;
height: 150%;
@@ -2388,7 +2295,7 @@ footer {
.clearfix:before,
.clearfix:after {
- content: " ";
+ content: ' ';
/* 1 */
display: table;
/* 2 */
@@ -2434,7 +2341,7 @@ footer {
@media (min-width: 780px) {
.container {
width: 49em !important;
- margin: 10em auto; /* temp promo, 11.5em */
+ margin: 11.5em auto; /* temp promo, 10.0em */
}
main {
width: 36em;
@@ -2447,7 +2354,7 @@ footer {
@media (min-width: 780px) {
.container {
- margin: 10em auto; /* temp promo, 11.5em */
+ margin: 11.5em auto; /* temp promo, 10.0em */
width: 100%;
padding: 0.8em 0 0 0;
height: auto;
@@ -2472,15 +2379,15 @@ footer {
}
#i18n-btn {
position: absolute;
- top: 2.5em; /* temp promo, 4.0em */
+ top: 4.0em; /* temp promo, 2.5em */
right: 1em;
}
#i18n-btn a {
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
}
#menu {
list-style: none;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
margin: 0 0.75em 0 -1.85em;
/* margin-right: 0.75em; */
width: 7.3em;
@@ -2499,14 +2406,14 @@ footer {
margin: 0 0 1em 0;
text-align: right;
}
- #menu li:last-child {
- /* margin: 0;*/
- }
- #menu .other-link::after {
- /* content:"\2192";
- margin-right: -0.98em; */
- /*content:" »";*/
- }
+ /* #menu li:last-child {
+ margin: 0;
+ } */
+ /* #menu .other-link::after {
+ content:"\2192";
+ margin-right: -0.98em;
+ content:" »";
+ } */
#menu li:nth-child(11) {
margin-top: 3em;
padding-top: 0.5em;
@@ -2553,7 +2460,7 @@ footer {
}
#collection-list-categories {
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
display: flex;
flex-direction: row;
margin: 1em 0 1.5em 0;
@@ -2598,6 +2505,7 @@ footer {
position: absolute;
top: 0.5em;
right: 0.7em;
+ z-index: 10;
}
#search {
@@ -2606,18 +2514,23 @@ footer {
margin-bottom: 1em;
}
- #search input[type="text"] {
+ #search input[type='text'] {
width: 100%;
}
+ #search input[type='text'],
+ #search input[type='search'] {
+ font-size: 1.5em;
+ }
+
#lockup {
position: absolute;
top: 2em;
left: 1em;
}
.column-span {
- margin: 0 1em 0 1em;
- padding: 0;
+ margin:0;
+ padding: 0 1em;
float: left;
}
#menu.top_menu,
@@ -2630,11 +2543,11 @@ footer {
}
#menu li:nth-last-child(1) a::after {
- content: "";
+ content: '';
}
#menu li a::after {
- content: ",";
+ content: ',';
}
#contribute-item:first-child {
@@ -2657,9 +2570,9 @@ footer {
display: none !important;
pointer-events: none;
}
- pre[class*="language-"] {
+ pre[class*='language-'] {
padding: 0.5em 0.5em;
- width: 100vw;
+ width: 100%;
}
code {
@@ -2684,7 +2597,7 @@ footer {
}
#exampleDisplay,
#exampleFrame,
- #exampleEditor {
+ #exampleDisplay #exampleEditor {
width: 100%;
}
#exampleDisplay .edit_button {
@@ -2698,7 +2611,6 @@ footer {
}
#exampleEditor {
margin-top: 3em;
- width: 100%;
}
small,
.small,
@@ -2740,7 +2652,7 @@ iframe {
.cnv_div {
/* This ensures that all canvases and additional html elements (if any) from
- * the example code snippets are only 100px wide rather than covering the
+ * the example code snippets are only 100px wide rather than covering the
* entire page, which potentially obscures the example code. */
display: inline-flex;
flex-direction: column;
@@ -2769,12 +2681,10 @@ iframe {
}
#i18n-btn a {
- border: none !important;
- outline: none !important;
- background: none !important;
+ border: none;
+ outline: none;
font-size: 0.7em;
color: #696969;
- cursor: pointer !important;
z-index: 5;
}
@@ -2783,8 +2693,8 @@ iframe {
}
#i18n-btn a.disabled {
- color: #ed225d !important;
- cursor: default !important;
+ color: #ed225d;
+ cursor: default;
}
/*
@@ -2797,7 +2707,7 @@ iframe {
#asterisk-design-element {
position: fixed;
- z-index: -1 !important;
+ z-index: -1;
opacity: 0.6;
pointer-events: none;
}
@@ -2812,7 +2722,7 @@ iframe {
overflow: hidden;
text-indent: -100%;
background: transparent
- url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=");
+ url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=');
background-size: 0.33em;
}
@@ -2899,7 +2809,7 @@ iframe {
color: #ed225d;
padding: 0.4em 0.6em;
margin: 1em 0 0 0;
- font-family: "Montserrat", sans-serif;
+ font-family: 'Montserrat', sans-serif;
display: block;
}
diff --git a/src/assets/css/prism.css b/src/assets/css/prism.css
index d496124e89..202665d3f1 100644
--- a/src/assets/css/prism.css
+++ b/src/assets/css/prism.css
@@ -13,7 +13,7 @@ pre[class*="language-"],
textarea {
color: #222;
font-family:
- inconsolatamedium,
+ 'Inconsolata',
Consolas,
Monaco,
'Andale Mono',
diff --git a/src/assets/img/books/aesthetic-programming.jpg b/src/assets/img/books/aesthetic-programming.jpg
new file mode 100644
index 0000000000..513ccb5acc
Binary files /dev/null and b/src/assets/img/books/aesthetic-programming.jpg differ
diff --git a/src/assets/img/libraries/blizard.js.jpg b/src/assets/img/libraries/blizard.js.jpg
deleted file mode 100644
index 1455c33a1d..0000000000
Binary files a/src/assets/img/libraries/blizard.js.jpg and /dev/null differ
diff --git a/src/assets/img/libraries/p5.xr.jpg b/src/assets/img/libraries/p5.xr.jpg
new file mode 100644
index 0000000000..3fd7484e68
Binary files /dev/null and b/src/assets/img/libraries/p5.xr.jpg differ
diff --git a/src/assets/js/get-started.js b/src/assets/js/get-started.js
new file mode 100644
index 0000000000..4686d623e8
--- /dev/null
+++ b/src/assets/js/get-started.js
@@ -0,0 +1,31 @@
+const copyToClipboard = (element)=> {
+ const value = document.getElementById(element).innerText;
+ const el = document.createElement('textarea');
+ el.value = value;
+ el.setAttribute('readonly', '');
+ el.style.position = 'absolute';
+ el.style.left = '-9999px';
+ el.setAttribute('aria-hidden','true');
+ document.body.appendChild(el);
+ el.select();
+ document.execCommand('copy');
+ document.body.removeChild(el);
+}
+$("#copy_sketch1").click(()=>{
+ copyToClipboard("first-sketch1");
+})
+$("#copy_sketch2").click(()=>{
+ copyToClipboard("first-sketch2");
+});
+$("#copy_sketch3").click(()=>{
+ copyToClipboard("first-sketch3");
+});
+$("#copy_p5_script").click(()=>{
+ copyToClipboard("markup1");
+});
+$("#copy_p5_link").click(()=>{
+ copyToClipboard("cdn-link");
+});
+$("#copy_p5_html").click(()=>{
+ copyToClipboard("sample-html");
+});
diff --git a/src/assets/js/init.js b/src/assets/js/init.js
index f44764e4d3..f015d97d09 100644
--- a/src/assets/js/init.js
+++ b/src/assets/js/init.js
@@ -88,7 +88,7 @@ window.onload = function() {
var tmp = w.navigator.languages && w.navigator.languages[0]
|| w.navigator.language || w.navigator.userLanguage;
tmp = tmp.split('-')[0];
- for (var i=0, l=langs; i < l; i++) {
+ for (var i = 0; i < langs.length; i++) {
if (tmp == langs[i]) {
return langs[i];
}
@@ -99,7 +99,7 @@ window.onload = function() {
var get_loc_lang = function(w) {
if ((w.location.pathname == '/') === false) {
- for (var i=0, l=langs.length; i < l; i++) {
+ for (var i = 0; i < langs.length; i++) {
if (w.location.pathname.indexOf('/' + langs[i] + '/') !== -1) {
if (can_store) {
window.localStorage.setItem('lang', langs[i]);
@@ -149,7 +149,7 @@ window.onload = function() {
var els = document.getElementsByClassName('js-lang');
var el = null;
if (window.lang != 'en') {
- for (var i=0, l=els.length; i < l; i++) {
+ for (var i = 0; i < els.length; i++) {
el = els[i];
el.innerHTML = el.getAttribute('data-' + window.lang);
}
@@ -163,14 +163,18 @@ window.onload = function() {
var evt_type = typeof document.addEventListener !== 'undefined' ? 'click' : 'onclick';
var click_action = function(e) {
var new_lang = this.getAttribute('data-lang');
+ //loc is defined second time below because while navigating from /reference/ to /reference/#/p5/displayWidth
+ //the page is not refreshing, so even if the page navigates properly to /reference/#/p5/displayWidth
+ //the window.location.hash remains empty
+ loc = String(window.location.pathname + window.location.hash);
if (new_lang == 'en') {
- for (var j=0, l=langs.length; j < l; j++) {
+ for (var j = 0; j < langs.length; j++) {
if (langs[j] != 'en') {
loc = loc.replace('\/' + langs[j] + '\/', '/');
}
}
} else {
- for (var j=0, l=langs.length; j < l; j++) {
+ for (var j = 0; j < langs.length; j++) {
loc = loc.replace('\/' + langs[j] + '\/', '/');
}
loc = '/' + new_lang + loc;
@@ -180,7 +184,7 @@ window.onload = function() {
}
window.location = loc;
};
- for (var i=0, l=btns.length; i < l; i++) {
+ for (var i = 0; i < btns.length; i++) {
var btn_lang = btns[i].getAttribute('data-lang');
if (loc_lang == btn_lang) {
$(btns[i]).addClass('disabled');
@@ -194,6 +198,16 @@ window.onload = function() {
}
}
+ // =================================================
+ // Checking hash in URL
+ // this function runs when the DOM is ready, i.e. when the document has been parsed
+ setTimeout(function() {
+ if (location.hash) {
+ location.href = location.hash;
+ }
+ }, 1000);
+
+
// =================================================
// Chinese spacing
if (window.pangu) {
diff --git a/src/assets/js/reference.js b/src/assets/js/reference.js
index bbf8f7ca78..37150da749 100644
--- a/src/assets/js/reference.js
+++ b/src/assets/js/reference.js
@@ -2445,7 +2445,7 @@ define('listView',[
});
-define('text!tpl/item.html',[],function () { return '
<%=item.name%><% if (item.isMethod) { %>()<% } %> \n\n<% if (item.example) { %>\n\n
Examples \n\n
\n <% _.each(item.example, function(example, i){ %>\n <%= example %>\n <% }); %>\n
\n
\n<% } %>\n\n\n \n
Description \n\n <% if (item.deprecated) { %>\n
\n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n
\n <% } %>\n \n\n
<%= item.description %> \n\n <% if (item.extends) { %>\n
Extends <%=item.extends%>
\n <% } %>\n\n <% if (item.module === \'p5.sound\') { %>\n
This function requires you include the p5.sound library. Add the following into the head of your index.html file:\n
<script src="path/to/p5.sound.js"></script>\n \n <% } %>\n\n <% if (item.constRefs) { %>\n
Used by:\n <%\n var refs = item.constRefs;\n for (var i = 0; i < refs.length; i ++) {\n var ref = refs[i];\n var name = ref;\n if (name.substr(0, 3) === \'p5.\') {\n name = name.substr(3);\n }\n if (i !== 0) {\n if (i == refs.length - 1) {\n %> and <%\n } else {\n %>, <%\n }\n }\n %><%= name %>() <%\n }\n %>\n
\n <% } %>\n
\n\n<% if (isConstructor || !isClass) { %>\n\n\n
Syntax \n
\n <% syntaxes.forEach(function(syntax) { %>\n
<%= syntax %>\n <% }) %>\n \n
\n\n\n<% if (item.params) { %>\n \n
Parameters \n
\n <% for (var i=0; i\n <% var p = item.params[i] %>\n \n <%=p.name%>
\n <% if (p.type) { %>\n \n <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'
$1 \'); %>\n
<%=type%> : <%=p.description%>\n <% if (p.optional) { %> (Optional)<% } %>\n
\n <% } %>\n \n <% } %>\n \n
\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n \n
Returns \n
<%=item.return.type%> : <%= item.return.description %>
\n
\n<% } %>\n\n<% } %>\n';});
+define('text!tpl/item.html',[],function () { return '<%=item.name%><% if (item.isMethod) { %>()<% } %> \n\n<% if (item.example) { %>\n\n
Examples \n\n
\n <% _.each(item.example, function(example, i){ %>\n <%= example %>\n <% }); %>\n
\n
\n<% } %>\n\n\n\n
Description \n\n <% if (item.deprecated) { %>\n
\n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n
\n <% } %>\n\n\n
<%= item.description %> \n\n <% if (item.extends) { %>\n
Extends <%=item.extends%>
\n <% } %>\n\n <% if (item.module === \'p5.sound\') { %>\n
This function requires you include the p5.sound library. Add the following into the head of your index.html file:\n
<script src="path/to/p5.sound.js"></script>\n \n <% } %>\n\n <% if (item.constRefs) { %>\n
Used by:\n <%\n var refs = item.constRefs;\n for (var i = 0; i < refs.length; i ++) {\n var ref = refs[i];\n var name = ref;\n if (name.substr(0, 3) === \'p5.\') {\n name = name.substr(3);\n }\n if (i !== 0) {\n if (i == refs.length - 1) {\n %> and <%\n } else {\n %>, <%\n }\n }\n %><%= name %>() <%\n }\n %>\n
\n <% } %>\n
\n\n<% if (isConstructor || !isClass) { %>\n\n\n
Syntax \n
\n <% syntaxes.forEach(function(syntax) { %>\n
<%= syntax %> \n <% }) %>\n \n
\n\n\n<% if (item.params) { %>\n \n
Parameters \n
\n <% for (var i=0; i\n <% var p = item.params[i] %>\n \n <%=p.name%>
\n <% if (p.type) { %>\n \n <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'
$1 \'); %>\n
<%=type%> : <%=p.description%>\n <% if (p.optional) { %> (Optional)<% } %>\n
\n <% } %>\n \n <% } %>\n \n
\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n \n
Returns \n
<%=item.return.type%> : <%= item.return.description %>
\n
\n<% } %>\n\n<% } %>\n';});
define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n\n <%=constructor%>\n
\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n Fields \n \n <% _.each(fields, function(item) { %>\n \n \n <%= item.description %>
\n \n <% }); %>\n \n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n Methods \n \n <% _.each(methods, function(item) { %>\n \n \n <%= item.description %>
\n \n <% }); %>\n \n<% } %>\n';});
@@ -4404,7 +4404,7 @@ define('menuView',[
});
-define('text!tpl/library.html',[],function () { return '<%= module.name %> library \n\n<%= module.description %>
\n\n \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n <% if (t == 0) { %> \n
\n <% } %>\n<% }); %>\n
\n';});
+define('text!tpl/library.html',[],function () { return '<%= module.name %> library \n\n<%= module.description %>
\n\n \n\n<% var t = 0; col = 0; %>\n\n<% _.each(groups, function(group){ %>\n <% if (t == 0) { %> \n
\n <% } %>\n<% }); %>\n
\n';});
define(
'libraryView',[
diff --git a/src/assets/js/render.js b/src/assets/js/render.js
index 8af9c9f8d5..15920772ce 100644
--- a/src/assets/js/render.js
+++ b/src/assets/js/render.js
@@ -1,16 +1,15 @@
var renderCode = function(exampleName) {
-
var _p5 = p5;
var instances = [];
var selector = 'example';
var examples = document.getElementsByClassName(selector);
- if (examples.length > 0) {
+ if (examples.length > 0) {
var sketches = examples[0].getElementsByTagName('code');
var sketches_array = Array.prototype.slice.call(sketches);
var i = 0;
sketches_array.forEach(function(s) {
- var rc = (s.parentNode.className.indexOf('norender') === -1);
+ var rc = s.parentNode.className.indexOf('norender') === -1;
setupCode(s, rc, i);
runCode(s, rc, i);
i++;
@@ -19,32 +18,32 @@ var renderCode = function(exampleName) {
function enableTab(el) {
el.onkeydown = function(e) {
- if (e.keyCode === 9) { // tab was pressed
+ if (e.keyCode === 9) {
+ // tab was pressed
// get caret position/selection
var val = this.value,
- start = this.selectionStart,
- end = this.selectionEnd;
+ start = this.selectionStart,
+ end = this.selectionEnd;
// set textarea value to: text before caret + tab + text after caret
this.value = val.substring(0, start) + ' ' + val.substring(end);
// put caret at right position again
this.selectionStart = this.selectionEnd = start + 2;
// prevent the focus lose
return false;
-
}
};
}
function setupCode(sketch, rc, i) {
-
var isRef = sketch.parentNode.tagName !== 'PRE';
- var sketchNode = isRef ? sketch : sketch.parentNode;
+ var sketchNode = isRef ? sketch : sketch.parentNode;
var sketchContainer = sketchNode.parentNode;
if (isRef) {
$(sketchContainer).prepend(''+exampleName+' example '+i+' ');
var pre = document.createElement('pre');
- pre.className = 'ref';
+ pre.classList.add('ref');
+ pre.classList.add('example_code');
pre.appendChild(sketchNode);
sketchContainer.appendChild(pre);
sketchContainer.className = 'example_container';
@@ -54,13 +53,10 @@ var renderCode = function(exampleName) {
}
}
-
// remove start and end lines
var runnable = sketch.textContent.replace(/^\s+|\s+$/g, '');
var rows = sketch.textContent.split('\n').length;
- // var h = Math.max(sketch.offsetHeight, 100) + 25;
-
// store original sketch
var orig_sketch = document.createElement('div');
orig_sketch.innerHTML = sketch.innerHTML;
@@ -70,7 +66,7 @@ var renderCode = function(exampleName) {
var cnv = document.createElement('div');
cnv.className = 'cnv_div';
if (isRef) {
- sketchContainer.appendChild(cnv);
+ sketchContainer.prepend(cnv);
} else {
sketchContainer.parentNode.insertBefore(cnv, sketchContainer);
}
@@ -85,37 +81,33 @@ var renderCode = function(exampleName) {
edit_area.value = runnable;
edit_area.rows = rows;
edit_area.cols = 62;
- edit_area.style.position = 'absolute'
- edit_area.style.top = '4px';
- edit_area.style.left = '13px';
+ edit_area.classList.add('edit_area');
edit_space.appendChild(edit_area);
- edit_area.style.display = 'none';
enableTab(edit_area);
//add buttons
let button_space = document.createElement('ul');
edit_space.appendChild(button_space);
- let edit_button = document.createElement('button');
- edit_button.value = 'edit';
- edit_button.innerHTML = 'edit';
- edit_button.id = 'edit'+i;
- edit_button.setAttribute('aria-labelledby', edit_button.id+' example'+i);
- edit_button.className = 'edit_button';
- edit_button.onclick = function(e) {
- if (edit_button.innerHTML === 'edit') { // edit
- setMode(sketch, 'edit');
- } else { // run
- setMode(sketch, 'run');
- }
+
+ let copy_button = document.createElement('button');
+ copy_button.value = 'copy';
+ copy_button.innerHTML = 'copy';
+ copy_button.id = 'copy' + i;
+ copy_button.setAttribute('aria-labelledby', copy_button.id + ' example' + i);
+ copy_button.className = 'copy_button';
+ copy_button.onclick = function() {
+ setMode(sketch, 'edit');
+ edit_area.select();
+ document.execCommand('copy');
};
- let edit_li = button_space.appendChild(document.createElement('li'));
- edit_li.appendChild(edit_button);
+ let copy_li = button_space.appendChild(document.createElement('li'));
+ copy_li.appendChild(copy_button);
let reset_button = document.createElement('button');
reset_button.value = 'reset';
reset_button.innerHTML = 'reset';
- reset_button.id = 'reset'+i;
- reset_button.setAttribute('aria-labelledby', reset_button.id+' example'+i);
+ reset_button.id = 'reset' + i;
+ reset_button.setAttribute('aria-labelledby', reset_button.id + ' example' + i);
reset_button.className = 'reset_button';
reset_button.onclick = function() {
edit_area.value = orig_sketch.textContent;
@@ -124,20 +116,23 @@ var renderCode = function(exampleName) {
let reset_li = button_space.appendChild(document.createElement('li'));
reset_li.appendChild(reset_button);
- let copy_button = document.createElement('button');
- copy_button.value = 'copy';
- copy_button.innerHTML = 'copy';
- copy_button.id = 'copy'+i;
- copy_button.setAttribute('aria-labelledby', copy_button.id+' example'+i);
- copy_button.className = 'copy_button';
- copy_button.onclick = function() {
- setMode(sketch, 'edit');
- edit_area.select();
- document.execCommand('copy');
+ let edit_button = document.createElement('button');
+ edit_button.value = 'edit';
+ edit_button.innerHTML = 'edit';
+ edit_button.id = 'edit' + i;
+ edit_button.setAttribute('aria-labelledby', edit_button.id + ' example' + i);
+ edit_button.className = 'edit_button';
+ edit_button.onclick = function(e) {
+ if (edit_button.innerHTML === 'edit') {
+ // edit
+ setMode(sketch, 'edit');
+ } else {
+ // run
+ setMode(sketch, 'run');
+ }
};
- let copy_li = button_space.appendChild(document.createElement('li'));
- copy_li.appendChild(copy_button);
-
+ let edit_li = button_space.appendChild(document.createElement('li'));
+ edit_li.appendChild(edit_button);
function setMode(sketch, m) {
if (m === 'edit') {
@@ -155,14 +150,9 @@ var renderCode = function(exampleName) {
edit_button.innerHTML = 'edit';
edit_area.style.display = 'none';
sketch.textContent = edit_area.value;
- $('.example_container').each(function (ind, con) {
+ $('.example_container').each(function(ind, con) {
$(con).css('opacity', 1.0);
$(con).removeClass('editing');
- $this = $(this);
- var pre = $this.find('pre')[0];
- if (pre) {
- $this.height(Math.max($(pre).height(), 100) + 20);
- }
});
runCode(sketch, true, i);
}
@@ -171,7 +161,6 @@ var renderCode = function(exampleName) {
}
function runCode(sketch, rc, i) {
-
if (instances[i]) {
instances[i].remove();
}
@@ -192,11 +181,13 @@ var renderCode = function(exampleName) {
}
cnv.innerHTML = '';
- var s = function( p ) {
- var fxns = ['setup', 'draw', 'preload', 'mousePressed', 'mouseReleased',
+ var s = function(p) {
+ var fxns = [
+ 'setup', 'draw', 'preload', 'mousePressed', 'mouseReleased',
'mouseMoved', 'mouseDragged', 'mouseClicked', 'mouseWheel',
'touchStarted', 'touchMoved', 'touchEnded',
- 'keyPressed', 'keyReleased', 'keyTyped'];
+ 'keyPressed', 'keyReleased', 'keyTyped'
+ ];
var _found = [];
// p.preload is an empty function created by the p5.sound library in order to use the p5.js preload system
// to load AudioWorklet modules before a sketch runs, even if that sketch doesn't have its own preload function.
@@ -243,7 +234,7 @@ var renderCode = function(exampleName) {
with (p) {
eval(runnable);
}
- }
+ };
} else {
// Actually runs the code to get functions into scope.
with (p) {
@@ -263,9 +254,9 @@ var renderCode = function(exampleName) {
}
//if (typeof prettyPrint !== 'undefined') prettyPrint();
- if (typeof Prism !== 'undefined'){
- Prism.highlightAll()
- };
+ if (typeof Prism !== 'undefined') {
+ Prism.highlightAll();
+ }
// when a hash is changed, remove all the sounds,
// even tho the p5 sketch has been disposed.
@@ -274,26 +265,16 @@ var renderCode = function(exampleName) {
for (var i = 0; i < instances.length; i++) {
instances[i].remove();
}
- }
+ };
}
- $( document ).ready(function() {
-
+ $(document).ready(function() {
registerHashChange();
setTimeout(function() {
var myp5 = new _p5(s, cnv);
- $( ".example-content" ).find('div').each(function() {
- $this = $( this );
- var pre = $this.find('pre')[0];
- if (pre) {
- $this.height( Math.max($(pre).height()*1.1, 100) + 20 );
- }
- });
instances[i] = myp5;
}, 100);
});
-
}
-
};
diff --git a/src/data/en.yml b/src/data/en.yml
index ffa76ce87f..d08a89df2c 100644
--- a/src/data/en.yml
+++ b/src/data/en.yml
@@ -1,1061 +1,1805 @@
-Skip-To-Content: "Skip to content"
-Language-Settings: "Language Settings"
-Sidebar-Title: "Site Navigation"
-Home: "Home"
-Editor: "Editor"
-Download: "Download"
-Donate: "Donate"
-Start: "Get Started"
-Reference: "Reference"
-Libraries: "Libraries"
-Learn: "Learn"
-Examples: "Examples"
-Books: "Books"
-Community: "Community"
-Contribute: "Contribute"
-Forum: "Forum"
-Showcase: "Showcase"
-
-footerxh1: "Credits"
-footer1: "p5.js was created by "
-footer2: " and is developed by a community of collaborators, with support from the "
-footer3: " and "
-footer4: "Identity and graphic design by "
-
-tagline1: "Processing fun times JavaScript quirkiness"
-tagline2: "Processing simplicity times JavaScript flexibility"
-tagline3: "Processing intuition times JavaScript power"
-tagline4: "Processing creativity times JavaScript dynamism"
-tagline5: "Processing community times JavaScript community"
-tagline6: "the power of Processing times the reach of JavaScript"
-tagline7: "The p5.js community stands in solidarity with Black Lives Matter."
-
+Skip-To-Content: Skip to content
+Language-Settings: Language Settings
+Sidebar-Title: Site Navigation
+Home: Home
+Editor: Editor
+Download: Download
+Donate: Donate
+Start: Get Started
+Reference: Reference
+Libraries: Libraries
+Learn: Learn
+Examples: Examples
+Books: Books
+Community: Community
+Contribute: Contribute
+Forum: Forum
+Showcase: Showcase
+footerxh1: Credits
+footer1: 'p5.js is currently led by '
+footer2: ' and was created by '
+footer3: '. p5.js is developed by a community of collaborators, with support from the '
+footer4: ' and '
+footer5: 'Identity and graphic design by '
+tagline1: Processing fun times JavaScript quirkiness
+tagline2: Processing simplicity times JavaScript flexibility
+tagline3: Processing intuition times JavaScript power
+tagline4: Processing creativity times JavaScript dynamism
+tagline5: Processing community times JavaScript community
+tagline6: the power of Processing times the reach of JavaScript
+tagline7: The p5.js community stands in solidarity with Black Lives Matter.
home:
- start-creating: "Start creating with the p5 Editor!"
- p1xh1: "Hello!"
- p1x1: "p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone."
- p1x2: "Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However, you’re not limited to your drawing canvas. You can think of your whole browser page as your sketch, including HTML5 objects for text, input, video, webcam, and sound."
- p2xh2: "Community"
- p2x1: "We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners."
- p2x2: "p5.js is an interpretation of "
- p2x3: " for today’s web. We hold events and operate with support from the "
- p2x4: "."
- p2x5: "Learn more about "
- p2x6: "our community"
- p2x7: "."
-
- p3xh2: "Get Started"
- p3xp1: "Make your first sketch in the "
- p3xp2: ". Learn more about sketching with p5.js on the "
- p3xp3: "Get Started page"
- p3xp4: " and everything you can do in the "
- p3xp5: "Reference"
- p3xp6: "."
-
- p4xh2: "Get Involved"
- p4xp1: "There are many ways to contribute to p5.js:"
- p4xp2: "Involvement Options"
- p4xp3: "Share something you've made!"
- p4xp4: "Teach a workshop or class."
- p4xp5: "Organize a meet-up."
- p4xp6: "Contribute to the codebase."
-
- sketch_credits: "Sketch Credits"
- sketch_info: "Hunminjeongeum2020 created by Seonghyeon Kim"
-
+ start-creating: Start creating with the p5 Editor!
+ p1xh1: Hello!
+ p1x1: >-
+ p5.js is a JavaScript library for creative coding, with a focus on making
+ coding accessible and inclusive for artists, designers, educators,
+ beginners, and anyone else! p5.js is free and open-source because we believe
+ software, and the tools to learn it, should be accessible to everyone.
+ p1x2: >-
+ Using the metaphor of a sketch, p5.js has a full set of drawing
+ functionality. However, you’re not limited to your drawing canvas. You can
+ think of your whole browser page as your sketch, including HTML5 objects for
+ text, input, video, webcam, and sound.
+ p2xh2: Community
+ p2x1: >-
+ We are a community of, and in solidarity with, people from every gender
+ identity and expression, sexual orientation, race, ethnicity, language,
+ neuro-type, size, disability, class, religion, culture, subculture,
+ political opinion, age, skill level, occupation, and background. We
+ acknowledge that not everyone has the time, financial means, or capacity to
+ actively participate, but we recognize and encourage involvement of all
+ kinds. We facilitate and foster access and empowerment. We are all learners.
+ p2x2: 'p5.js is an interpretation of '
+ p2x3: ' for today’s web. We hold events and operate with support from the '
+ p2x4: .
+ p2x5: 'Learn more about '
+ p2x6: our community
+ p2x7: .
+ p3xh2: Get Started
+ p3xp1: 'Make your first sketch in the '
+ p3xp2: '. Learn more about sketching with p5.js on the '
+ p3xp3: Get Started page
+ p3xp4: ' and everything you can do in the '
+ p3xp5: Reference
+ p3xp6: .
+ p4xh2: Get Involved
+ p4xp1: 'There are many ways to contribute to p5.js:'
+ p4xp2: Involvement Options
+ p4xp3: Share something you've made!
+ p4xp4: Teach a workshop or class.
+ p4xp5: Organize a meet-up.
+ p4xp6: Contribute to the codebase.
+ sketch_credits: Sketch Credits
+ sketch_info: Hunminjeongeum2020 created by Seonghyeon Kim
copyright:
- copyright-title: "Copyright Information"
- copyright1: "The p5.js library is free software; you can redistribute it and/or modify it under the terms of the "
- copyright2: " as published by the Free Software Foundation, version 2.1."
- copyright3: "The Reference for the language is under a "
- copyright4: " license which makes it possible to reuse this content for non-commercial purposes if it is credited."
-
+ copyright-title: Copyright Information
+ copyright1: >-
+ The p5.js library is free software; you can redistribute it and/or modify it
+ under the terms of the
+ copyright2: ' as published by the Free Software Foundation, version 2.1.'
+ copyright3: 'The Reference for the language is under a '
+ copyright4: ' license which makes it possible to reuse this content for non-commercial purposes if it is credited.'
get started:
- get-started-title: "Get Started"
- get-started1: "This page walks you through setting up a p5.js project and making your first sketch."
- get-started2: "The easiest way to start is using the "
- get-started3: "p5.js editor"
- get-started4: ", you can open the web editor and can scroll down to "
- get-started5: "Your First Sketch"
- get-started6: ". If you would like to work on the the desktop version of p5.js you can scroll down to"
- get-started7: "downloading instructions"
- settingUp-title: "Setting up p5.js with an editor on your own computer"
- download-title: "Downloading a copy of the p5.js library"
- hosted-title: "Using a hosted version of the p5.js library"
- download1: "The easiest way to start is by using the empty example that comes with the "
- download2: "p5.js complete"
- download3: " download."
- download4: "If you look in index.html, you'll notice that it links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js."
- download5: "Alternatively, you can link to a p5.js file hosted online. All versions of p5.js are stored in a CDN (Content Delivery Network). You can find a history of these versions in the "
- download6: ". In this case you can change the link to:"
- download7: "A sample HTML page might look like this:"
- environment-title: "Environment"
- environment1: "To run p5.js in your computer you will need a text editor. You can use the "
- environmentlink: "http://en.wikipedia.org/wiki/Source_code_editor"
- environment2: " code editor "
- environment3: "of your choice. Instructions for getting set up with "
- environment4: " are included below, other good editor options include "
- environment5: " and "
- environment6: "If you are a screen reader user and not using the p5 web editor, you may want to use "
- environment7: " or "
- environment8: "Open Sublime. Go to the File menu and choose Open... and choose the folder that your html and js files are located in. On the left sidebar, you should find the folder name at the top, with a list of the files contained in the folder directly below."
- environment9: "Click on your sketch.js file and it will open on the right where you can edit it. "
- environment10: "p5 starter code opened up in sublime editor."
- environment11: "Open the index.html file in your browser by double clicking on it in your file manager or type:"
- environment12: "file:///the/file/path/to/your/html"
- environment13: " in the address bar to view your sketch."
- your-first-sketch-title: "Your First Sketch"
- your-first-sketch-intro1: "In the "
- your-first-sketch-intro2: "https://editor.p5js.org/"
- your-first-sketch-intro3: "p5.js web editor"
- your-first-sketch-intro4: " you should find the following code:"
- your-first-sketch1: "After "
- your-first-sketch2: " include this line of code: "
- your-first-sketch3: "Now your code should be like this: "
- your-first-sketch4: "The line you just added draws an ellipse, with its center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels."
- your-first-sketch5: "On the editor press play to display your code in action!"
- your-first-sketch6: "If you are using a screen reader, you must turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn more visit "
- your-first-sketch7: "using p5 with a screen reader tutorial"
- your-first-sketch8: "If you've typed everything correctly, this will appear in the display window:"
- your-first-sketch9: "canvas has a circle of width and height 50 at position 80 x and 80 y"
- your-first-sketch10: "If nothing appears, the editor may be having trouble understanding what you’ve typed. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, the line should end with a semicolon, and ellipse has to be spelled correctly."
- your-first-sketch11: "One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. The browser isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. You'll get used to it with a little practice. In the bottom left of the editor you will find the console section. Here, you can find messages from the editor with details about any errors it encounters."
- your-first-sketch12: "Next, we'll skip ahead to a sketch that's a little more exciting. Modify the last example to try this:"
- your-first-sketch13: "This program creates a canvas that is 400 pixels wide and 400 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black. Run the code, move the mouse, and click to experience it."
- your-first-sketch14: "canvas has multiple circles drawn on it following the path of the mouse"
- first-sketch-heading1: "Code snippet with ellipse"
- first-sketch-heading2: "Note for screenreader users"
- first-sketch-heading3: "Code snippet with interaction"
- what-next-title: "What Next?"
- learn1: "Check out the "
- learn2: "learn page"
- learn3: " and "
- learn4: "examples page"
- learn5: " for more."
- learn6: "Watch "
- learn7: "The Coding Train"
- learn8: " and "
- learn9: "Kadenze"
- learn10: " video tutorials."
- reference1: "View the "
- reference2: " reference"
- reference3: " for full documentation."
- learn11: "If you wish to use p5 with a screenreader, check out the "
- learn12: "p5 with a screenreader tutorial"
- processing-transition1: "If you have used Processing in the past, read the "
- processing-transition2: "https://github.com/processing/p5.js/wiki/Processing-transition"
- processing-transition3: "Processing transition tutorial"
- processing-transition4: " to learn how to convert from Processing to p5.js, and the main differences between them."
- book1: "Parts of this tutorial were adapted from the book, Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015. Copyright © 2015. All rights reserved. Last modified at the p5.js 2019 Contributors Conference."
-
+ get-started-title: Get Started
+ get-started1: >-
+ This page walks you through setting up a p5.js project and making your first
+ sketch.
+ get-started2: 'The easiest way to start is using the '
+ get-started3: p5.js editor
+ get-started4: ', you can open the web editor and can scroll down to '
+ get-started5: Your First Sketch
+ get-started6: >-
+ . If you would like to work on the the desktop version of p5.js you can
+ scroll down to
+ get-started7: downloading instructions,
+ get-started-button: 'Copy'
+ settingUp-title: Setting up p5.js with an editor on your own computer
+ download-title: Downloading a copy of the p5.js library
+ hosted-title: Using a hosted version of the p5.js library
+ download1: 'The easiest way to start is by using the empty example that comes with the '
+ download2: p5.js complete
+ download3: ' download.'
+ download8: 'After download, you need to set up a local server. See instructions '
+ download9: here
+ download10: '. Run your local server within the downloaded folder and on your browser, go to '
+ download11: 'http://localhost:{your-port-num}/empty-example'
+ download4: >-
+ If you look in index.html, you'll notice that it links to the file p5.js. If
+ you would like to use the minified version (compressed for faster page
+ loading), change the link to p5.min.js.
+ download5: >-
+ Alternatively, you can link to a p5.js file hosted online. All versions of
+ p5.js are stored in a CDN (Content Delivery Network). You can find a history
+ of these versions in the
+ download6: '. In this case you can change the link to:'
+ download7: 'A sample HTML page might look like this:'
+ environment-title: Environment
+ environment1: 'To run p5.js in your computer you will need a text editor. You can use the '
+ environmentlink: 'http://en.wikipedia.org/wiki/Source_code_editor'
+ environment2: ' code editor '
+ environment3: 'of your choice. Instructions for getting set up with '
+ environment4: ' are included below, other good editor options include '
+ environment5: ' and '
+ environment6: >-
+ If you are a screen reader user and not using the p5 web editor, you may
+ want to use
+ environment7: ' or '
+ environment8: >-
+ Open Sublime. Go to the File menu and choose Open... and choose the folder
+ that your html and js files are located in. On the left sidebar, you should
+ find the folder name at the top, with a list of the files contained in the
+ folder directly below.
+ environment9: >-
+ Click on your sketch.js file and it will open on the right where you can
+ edit it.
+ environment10: p5 starter code opened up in sublime editor.
+ environment11: >-
+ Open the index.html file in your browser by double clicking on it in your
+ file manager or type:
+ environment12: 'file:///the/file/path/to/your/html'
+ environment14: ' (or '
+ environment15: 'http://localhost:{your-port-num}/empty-example'
+ environment16: ' if you are using a local server)'
+ environment13: ' in the address bar to view your sketch.'
+ your-first-sketch-title: Your First Sketch
+ your-first-sketch-intro1: 'In the '
+ your-first-sketch-intro2: 'https://editor.p5js.org/'
+ your-first-sketch-intro3: p5.js web editor
+ your-first-sketch-intro4: ' you should find the following code:'
+ your-first-sketch1: 'After '
+ your-first-sketch2: ' include this line of code: '
+ your-first-sketch3: 'Now your code should be like this: '
+ your-first-sketch4: >-
+ The line you just added draws an ellipse, with its center 50 pixels over
+ from the left and 50 pixels down from the top, with a width and height of 80
+ pixels.
+ your-first-sketch5: On the editor press play to display your code in action!
+ your-first-sketch6: >-
+ If you are using a screen reader, you must turn on the accessible outputs in
+ the p5 online editor, outside the editor you must add the accessibility
+ library in your html. To learn more visit
+ your-first-sketch7: 'using p5 with a screen reader tutorial'
+ your-first-sketch8: >-
+ If you've typed everything correctly, this will appear in the display
+ window:
+ your-first-sketch9: canvas has a circle of width and height 50 at position 80 x and 80 y
+ your-first-sketch10: >-
+ If nothing appears, the editor may be having trouble understanding what
+ you’ve typed. If this happens, make sure that you've copied the example code
+ exactly: the numbers should be contained within parentheses and have commas
+ between each of them, the line should end with a semicolon, and ellipse has
+ to be spelled correctly.
+ your-first-sketch11: >-
+ One of the most difficult things about getting started with programming is
+ that you have to be very specific about the syntax. The browser isn't always
+ smart enough to know what you mean, and can be quite fussy about the
+ placement of punctuation. You'll get used to it with a little practice. In
+ the bottom left of the editor you will find the console section. Here, you
+ can find messages from the editor with details about any errors it
+ encounters.
+ your-first-sketch12: >-
+ Next, we'll skip ahead to a sketch that's a little more exciting. Modify the
+ last example to try this:
+ your-first-sketch13: >-
+ This program creates a canvas that is 400 pixels wide and 400 pixels high,
+ and then starts drawing white circles at the position of the mouse. When a
+ mouse button is pressed, the circle color changes to black. Run the code,
+ move the mouse, and click to experience it.
+ your-first-sketch14: canvas has multiple circles drawn on it following the path of the mouse
+ first-sketch-heading1: Code snippet with ellipse
+ first-sketch-heading2: Note for screenreader users
+ first-sketch-heading3: Code snippet with interaction
+ what-next-title: What Next?
+ learn1: 'Check out the '
+ learn2: learn page
+ learn3: ' and '
+ learn4: examples page
+ learn5: ' for more.'
+ learn6: 'Watch '
+ learn7: The Coding Train
+ learn8: ' and '
+ learn9: Kadenze
+ learn10: ' video tutorials.'
+ reference1: 'View the '
+ reference2: ' reference'
+ reference3: ' for full documentation.'
+ learn11: 'If you wish to use p5 with a screenreader, check out the '
+ learn12: p5 with a screenreader tutorial
+ processing-transition1: 'If you have used Processing in the past, read the '
+ processing-transition2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ processing-transition3: Processing transition tutorial
+ processing-transition4: ' to learn how to convert from Processing to p5.js, and the main differences between them.'
+ book1: >-
+ Parts of this tutorial were adapted from the book, Getting Started with
+ p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015.
+ Copyright © 2015. All rights reserved. Last modified at the p5.js 2019
+ Contributors Conference.
download:
- Download: "Download"
- download-intro: "Welcome! While titled \"Download\" this page actually contains a collection of links to either download the library or begin working with it online. We've tried to order things to reflect what a beginner might want first, to resources that more experienced programmers may be looking for."
- editor-title: "Editor"
- p5.js-editor: "p5.js Editor"
- p5.js-editor-intro: "This link redirects you to the p5.js Editor online so you can begin using p5.js immediately."
- editor-includes: "Start coding using the p5.js Editor, no setup required!"
- complete-library-title: "Complete Library"
- complete-library-intro1: "This is a download containing the p5.js library file, the p5.sound addon, and an example project. It does not contain an editor. Visit "
- complete-library-intro2: "Get Started"
- complete-library-intro3: " to learn how to setup a p5.js project."
- p5.js-complete: "p5.js complete"
- includes-1: "Includes:"
- includes-2: "p5.js, p5.sound.js, and an example project"
- includes-3: "Version "
- single-files-title: "Single Files"
- single-files-intro: "These are downloads or links to the p5.js library file. No additional contents are included."
- single-file: "Single file: "
- p5.js-uncompressed: "Full uncompressed version"
- compressed: "Compressed version"
- link: "Link: "
- statically-hosted-file: "Statically hosted file"
- etc-title: "Github Resources"
- older-releases: "Previous versions (older releases and changelog)"
- github-repository: "Code repository (GitHub)"
- report-bugs: "Report issues, bugs, and errors"
- supported-browsers: "Supported browsers "
-
- support-title: "Support p5.js!"
- support-options: "Support Options"
- support-1: "p5.js is free, open-source software. We want to make our community as open and inclusive as possible. You can support this work by "
- support-2: "becoming a member"
- support-3: " of the Processing Foundation as an individual, a studio, or an educational institution. You can also "
- support-4: "make a donation"
- support-5: " without purchasing a membership."
- support-6: "Individual"
- support-7: "$25"
- support-8: "Studio"
- support-9: "$250"
- support-10: "Educational Institution"
- support-11: "$5/student or $500"
- support-12: "Your membership supports software development (for p5.js, Processing, Processing.py, Processing for Android and ARM devices, education resources like code examples and tutorials, "
- support-13: "Fellowships"
- support-14: ", and "
- support-15: "community events"
- support-16: ". We need your help!"
- support-17: "p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in Pittsburgh (Image credit: Taeyoon Choi)"
- support-18: "Processing Fellow Saskia Freeke is organizing Code Liberation x Processing workshops in London (Image credit: Code Liberation Foundation)"
- support-19: "Learning to Teach, Teaching to Learn conference with SFPC (Image credit: Kira Simon-Kennedy)"
- support-20: "Processing Foundation Fellow Cassie Tarakajian's workshop at Code Art Miami (Image credit: Christian Arévalo Photography)"
- support-21: "Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image credit: Taeyoon Choi)"
- support-22: "Google Summer of Code kickoff (Image credit: Taeyoon Choi)"
- support-23: "Processing Foundation Fellow Cassie Tarakajian's workshop at Code Art Miami (Image credit: Christian Arévalo Photography)"
- support-24: "Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js workshop led by Taeyoon Choi (Image credit: Taeyoon Choi)"
- support-25: "p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in Pittsburgh (Image credit: Taeyoon Choi)"
- support-26: "Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the International Center of Photography (Image credit: International Center of Photography)"
- support-27: "Participants at p5.js workshop in Santiago, Chile, led by Aarón Montoya-Moraga (Image credit: Aarón Montoya-Moraga.)"
- support-28: "Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop led by Taeyoon Choi (Image credit: Taeyoon Choi)"
- support-29: "Processing Foundation Fellow DIY Girls run a creative coding program in Los Angeles (Image credit: DIY Girls)"
- support-30: "Processing Fellow Digital Citizens Lab"
- support-31: "Bicoastal p5.js meetup at UCLA DMA and NYU ITP"
- support-32: "The Processing Foundation"
- support-33: " was founded in 2012 after more than a decade of work with the original 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."
- support-17-alt: ""
- support-18-alt: ""
- support-19-alt: ""
- support-20-alt: ""
- support-21-alt: ""
- support-22-alt: ""
- support-23-alt: ""
- support-24-alt: ""
- support-25-alt: ""
- support-26-alt: ""
- support-27-alt: ""
- support-28-alt: ""
- support-29-alt: ""
- support-30-alt: ""
- support-31-alt: ""
-
+ Download: Download
+ download-intro: >-
+ Welcome! While titled "Download" this page actually contains a collection of
+ links to either download the library or begin working with it online. We've
+ tried to order things to reflect what a beginner might want first, to
+ resources that more experienced programmers may be looking for.
+ editor-title: Editor
+ p5.js-editor: p5.js Editor
+ p5.js-editor-intro: >-
+ This link redirects you to the p5.js Editor online so you can begin using
+ p5.js immediately.
+ editor-includes: 'Start coding using the p5.js Editor, no setup required!'
+ complete-library-title: Complete Library
+ complete-library-intro1: >-
+ This is a download containing the p5.js library file, the p5.sound addon,
+ and an example project. It does not contain an editor. Visit
+ complete-library-intro2: Get Started
+ complete-library-intro3: ' to learn how to setup a p5.js project.'
+ p5.js-complete: p5.js complete
+ includes-1: 'Includes:'
+ includes-2: 'p5.js, p5.sound.js, and an example project'
+ includes-3: 'Version '
+ single-files-title: Single Files
+ single-files-intro: >-
+ These are downloads or links to the p5.js library file. No additional
+ contents are included.
+ single-file: 'Single file: '
+ p5.js-uncompressed: Full uncompressed version
+ compressed: Compressed version
+ link: 'Link: '
+ statically-hosted-file: Statically hosted file
+ etc-title: Github Resources
+ older-releases: Previous versions (older releases and changelog)
+ github-repository: Code repository (GitHub)
+ report-bugs: 'Report issues, bugs, and errors'
+ supported-browsers: 'Supported browsers '
+ support-title: Support p5.js!
+ support-options: Support Options
+ support-1: >-
+ We need your help! p5.js is free, open-source software. We want to make our community as open
+ and inclusive as possible. You can support this work by making a donation to
+ the
+ support-2: >-
+ , the organization that supports p5.js.
+ Your donation supports software development for p5.js, education resources
+ like code examples and tutorials,
+ support-3: Fellowships
+ support-4: ', and '
+ support-5: community events.
+ support-17: >-
+ p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in
+ Pittsburgh (Image credit: Taeyoon Choi)
+ support-18: >-
+ Processing Fellow Saskia Freeke is organizing Code Liberation x Processing
+ workshops in London (Image credit: Code Liberation Foundation)
+ support-19: >-
+ Learning to Teach, Teaching to Learn conference with SFPC (Image credit:
+ Kira Simon-Kennedy)
+ support-20: >-
+ Processing Foundation Fellow Cassie Tarakajian's workshop at Code Art Miami
+ (Image credit: Christian Arévalo Photography)
+ support-21: >-
+ Taeyoon Choi and ASL interpretor at Signing Coders p5.js workshop (Image
+ credit: Taeyoon Choi)
+ support-22: 'Google Summer of Code kickoff (Image credit: Taeyoon Choi)'
+ support-23: >-
+ Processing Foundation Fellow Cassie Tarakajian's workshop at Code Art Miami
+ (Image credit: Christian Arévalo Photography)
+ support-24: >-
+ Luisa Pereira and Yeseul Song helping facilitate a sign language based p5.js
+ workshop led by Taeyoon Choi (Image credit: Taeyoon Choi)
+ support-25: >-
+ p5.js Contributors Conference at CMU STUDIO for Creative Inquiry in
+ Pittsburgh (Image credit: Taeyoon Choi)
+ support-26: >-
+ Processing Fellow Digital Citizens Lab hosts a panel on STEM teaching at the
+ International Center of Photography (Image credit: International Center of
+ Photography)
+ support-27: >-
+ Participants at p5.js workshop in Santiago, Chile, led by Aarón
+ Montoya-Moraga (Image credit: Aarón Montoya-Moraga.)
+ support-28: >-
+ Claire Kearney-Volpe helping facilitate a sign language based p5.js workshop
+ led by Taeyoon Choi (Image credit: Taeyoon Choi)
+ support-29: >-
+ Processing Foundation Fellow DIY Girls run a creative coding program in Los
+ Angeles (Image credit: DIY Girls)
+ support-30: Processing Fellow Digital Citizens Lab
+ support-31: Bicoastal p5.js meetup at UCLA DMA and NYU ITP
+ support-32: The Processing Foundation
+ support-33: ' was founded in 2012 after more than a decade of work with the original 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.'
+ support-17-alt: ''
+ support-18-alt: ''
+ support-19-alt: ''
+ support-20-alt: ''
+ support-21-alt: ''
+ support-22-alt: ''
+ support-23-alt: ''
+ support-24-alt: ''
+ support-25-alt: ''
+ support-26-alt: ''
+ support-27-alt: ''
+ support-28-alt: ''
+ support-29-alt: ''
+ support-30-alt: ''
+ support-31-alt: ''
learn:
- learn-title: "Learn"
- teach-title2: "Teach"
- learn1: "These tutorials provide more in-depth or step-by-step overviews of particular topics. Check out the "
- learn2: "examples page"
- learn3: "to explore short demonstrations of various p5.js topics."
- introduction-to-p5js-title: "Introduction to p5.js"
- hello-p5js-title: "Hello p5.js"
- hello-p5js: "This short video will introduce you to the library and what you can do with it."
- getting-started-title: "Getting Started"
- getting-started: "Welcome to p5.js! This introduction covers the basics of setting up a p5.js project."
- p5js-overview-title: "p5.js overview"
- p5js-overview: "An overview of the main features of p5.js."
- p5js-processing-title: "p5.js and Processing"
- p5js-processing: "The main differences between the two, and how to convert from one to the other."
- p5-screen-reader-title: "p5 with a screen reader"
- p5-screen-reader: "Setting up p5 so that it can be used easily with a screen reader."
- using-local-server-title: "Using a local server"
- using-local-server: "How to set up a local server on Mac OSX, Windows, or Linux."
- p5js-wiki-title: "p5.js wiki"
- p5js-wiki: "Additonal documentation and tutorials contributed by the community"
- connecting-p5js-title: "Connecting p5.js"
- creating-libraries-title: "Creating libraries"
- creating-libraries: "Creating p5.js addon libraries."
- nodejs-and-socketio-title: "node.js and socket.io"
- nodejs-and-socketio: "Using a node.js server with p5.js, communication via socket.io."
- programming-topics-title: "Programming topics"
- beyond-the-canvas-title: "Beyond the canvas"
- beyond-the-canvas: "Creating and manipulating elements on the page beyond the canvas."
- 3d-webgl-title: "3D/WebGL"
- 3d-webgl: "Developing advanced graphics applications in p5.js using WEBGL mode."
- color-title: "Color"
- color: "An introduction to digital color."
- coordinate-system-and-shapes-title: "Coordinate System and Shapes"
- coordinate-system-and-shapes: "Drawing simple shapes and using the coordinate system."
- interactivity-title: "Interactivity"
- interactivity: "Introduction to interactivity with the mouse and keyboard."
- program-flow-title: "Program Flow"
- program-flow: "Introduction to controlling program flow in p5.js."
- curves-title: "Curves"
- curves: "An introduction to the three types of curves in p5.js: arcs, spline curves, and Bézier curves."
- becoming-a-better-programmer-title: "Becoming a better programmer"
- debugging-title: "Debugging"
- debugging: "Field guide to debugging for everyone."
- optimizing-title: "Optimizing p5.js code for performance"
- optimizing: "A tutorial of tips and tricks for optimizing your code to make it run faster and smoother."
- test-driven-development-title: "Unit testing and test driven development"
- test-driven-development: "Save yourself from agony on install day. What is unit testing and how to use it? By Andy Timmons."
- contributing-to-the-community-title: "Contributing to the community"
- development-title: "Development"
- development: "Getting started and overview for contributing to development."
- looking-inside-title: "Looking inside p5"
- looking-inside: "A friendly intro to the file structure and tools for p5.js development, by Luisa Pereira."
- writing-tutorial-title: "Writing a tutorial"
- writing-tutorial: "A guide to writing a p5.js programming tutorial."
- writing-a-tutorial-title: "Guide to contributing p5.js tutorials"
- writing-a-tutorial-author: "This tutorial was written by Tega Brain."
- writing-a-tutorial-1: "We invite educators, contributors and general enthusiasts to contribute p5js tutorials. The p5js project makes creative coding and open source development more accessible to a diverse community and we are excited to publish tutorials on all aspects of the development process. Our learning materials so far include guides on learning p5, programming technique and how to contribute to an open source project."
- writing-a-tutorial-2: "We welcome new written tutorial contributions and this guide outlines the steps of how to propose, prepare and contribute."
- writing-a-tutorial-how-start-title: "How to get started:"
- writing-a-tutorial-how-start-1: "Check that your proposed topic has not already been covered. There is "
- writing-a-tutorial-how-start-2: "a working spreadsheet here"
- writing-a-tutorial-how-start-3: "that outlines in progress tutorials. If your topic is listed as in progress, perhaps you can add to work being done and contribute to preparing existing work for publication so please reach out to us."
- writing-a-tutorial-how-start-4: "If your topic is not already covered and is not listed as in progress, please write a few sentences on what you propose to cover and email us this description at education@p5js.org."
- writing-a-tutorial-how-prepare-title: "How to prepare a p5js tutorial for publication online:"
- writing-a-tutorial-how-prepare-1: "When your tutorial is ready for publication, please follow these steps to prepare your content for the p5js website."
- writing-a-tutorial-how-prepare-2: "Prepare the content of your tutorial as a tutorial-name.hbs file with "
- writing-a-tutorial-how-prepare-3: "this basic structure"
- writing-a-tutorial-how-prepare-4: ". As is shown in this file, it must contain a header as shown below:"
- writing-a-tutorial-how-prepare-5: "The folder containing your tutorial will be placed in the 'tutorials' folder of the p5js site. The file called index.hbs is the "
- writing-a-tutorial-how-prepare-6: "p5.js tutorials landing page,"
- writing-a-tutorial-how-prepare-7: " and the test-tutorial.hbs file is the test tutorial."
- writing-a-tutorial-how-prepare-8: "All content should go in the:"
- writing-a-tutorial-how-prepare-9: "tags on the page, with formatting defined by the <h1> and <h2> tags, the <p> paragraph tags as is done shown on the"
- writing-a-tutorial-how-prepare-10: "test tutorial page."
- writing-a-tutorial-how-prepare-11: "If your tutorial contains images, they are to be placed in the assets folder of the p5 site, in the location src/assets/learn/test-tutorial/images as shown below."
- writing-a-tutorial-how-prepare-12: "To correctly format code in the html of the page use the tag:"
- writing-a-tutorial-embedding-title: "Embedding p5.js sketches"
- writing-a-tutorial-embedding-1: "Using p5js means you can illustrate your tutorial with animated, interactive or editable code examples to demonstrate programming concepts. Your examples should be prepared as p5.js sketches and can be embedded into the tutorial in two ways."
- writing-a-tutorial-embedding-2: "If the example is to be editable like in "
- writing-a-tutorial-embedding-3: "the reference pages"
- writing-a-tutorial-embedding-4: " of the p5js site, the p5 sketch should be embedded into the html page using the p5js widget. Follow "
- writing-a-tutorial-embedding-5: "this guide "
- writing-a-tutorial-embedding-6: "on how to embed p5js sketches using the widget written by "
- writing-a-tutorial-embedding-7: ". You can also explore this in action on the"
- writing-a-tutorial-embedding-8: " test tutorial page"
- writing-a-tutorial-embedding-9: "."
- writing-a-tutorial-embedding-10: "If the example is to be animated and/or interactive but not editable. The p5.js sketch should be embedded into the page as an iframe as described below."
- writing-a-tutorial-iframe-title: "Embed a p5 sketch using an iframe"
- writing-a-tutorial-iframe-1: "An iframe is like creating a window through which you can explore another page, sandboxed from the rest of your page. In this case it will be a window to the index.html containing your p5.js sketch. "
- writing-a-tutorial-iframe-2: "Put your p5 sketches in the /src/assets/learn folder of the site, in a folder labelled with the name of your sketch as shown in the screenshot. This is where all the images and p5 sketches linked by iframe should be stored."
- writing-a-tutorial-iframe-3: "In the subfolders containing your p5 examples there should be a sketch.js file and the embed.html file for the sketch. "
- writing-a-tutorial-iframe-4: "Make sure your embed.html file has the correct paths to the p5 libraries of the site. If your file structure is the same as above, the path to the p5.js library should be \"../../../js/p5.min.js\"."
- writing-a-tutorial-iframe-5: "You can then embed the p5js index files as iframes in the .hbs file that contains your tutorial content. The embed code for the iframe would then be: "
- writing-a-tutorial-iframe-6: "Styling for the iframe (this could directly into the post or in a stylesheet): "
- writing-a-tutorial-iframe-7: "Here you can find the naked sketch running: "
- writing-a-tutorial-iframe-8: "And here it is embedded in the p5 site using the code below: "
- writing-a-tutorial-iframe-9: "One thing to note is that you need to manually set the size of the iframe, so it works best if things are a standard size."
- writing-a-tutorial-iframe-10: "Also note that the links to the p5.js library files do not happen from the .eps page with all the tutorial content. Instead they will be located in the html page that is rendering your sketch (in this case, called embed.html)."
- writing-a-tutorial-iframe-11: "More information on embedding p5.js sketches can be found "
- writing-a-tutorial-embed-iframe-12: "here."
- writing-a-tutorial-finishing-title: "Finishing up"
- writing-a-tutorial-finishing-1: "Once your have finished writing your tutorial and your content has been given the thumbs up. Fork the p5.js website repository, prepare your content as described above and then issue a pull request to the p5.js website repository so we can publish your contribution!"
- writing-a-tutorial-finishing-2: "Thank you!"
- color-description1: "This tutorial is from the book Learning Processing by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It was ported to P5 by Kelly Chang. If you find any errors or have comments, "
- color-description2: " please let us know."
- color-p1x1: "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."
- color-p2x1: "By adding the "
- color-p2x2: " and "
- color-p2x3: " functions before something is drawn, we can set the color of any given shape. There is also the function "
- color-p2x4: ", which sets a background color for the window. Here's an example."
- color-code1: "background(255); // Setting the background to white \n stroke(0); // Setting the outline (stroke) to black \n fill(150); // Setting the interior of a shape (fill) to grey \n rect(50,50,75,100); // Drawing the rectangle"
- color-p3x1: "Stroke or fill can be eliminated with the functions: "
- color-p3x2: " and "
- color-p3x3: ". Our instinct might be to say \"stroke(0)\" for no outline, however, it is important to remember that 0 is not \"nothing\", but rather denotes the color black. Also, remember not to eliminate both—with "
- color-p3x4: " and "
- color-p3x5: ", nothing will appear!"
- color-p4x1: "In addition, if we draw two shapes, p5.js will always use the most recently specified stroke and fill, reading the code from top to bottom."
- color-rgb-title: "RGB Color"
- color-rgb-p1x1: "Remember finger painting? By mixing three \"primary\" colors, any color could be generated. Swirling all colors together resulted in a muddy brown. The more paint you added, the darker it got. Digital colors are also constructed by mixing three primary colors, but it works differently from paint. First, the primaries are different: red, green, and blue (i.e., \"RGB\" color). And with color on the screen, you are mixing light, not paint, so the mixing rules are different as well."
- color-rgb-li1: "Red + Green = Yellow"
- color-rgb-li2: "Red + Blue = Purple"
- color-rgb-li3: "Green + Blue = Cyan (blue-green)"
- color-rgb-li4: "Red + Green + Blue = White"
- color-rgb-li5: "No colors = Black"
- color-rgb-p2x1: "This assumes that the colors are all as bright as possible, but of course, you have a range of color available, so some red plus some green plus some blue equals gray, and a bit of red plus a bit of blue equals dark purple. While this may take some getting used to, the more you program and experiment with RGB color, the more it will become instinctive, much like swirling colors with your fingers. And of course you can't say \"Mix some red with a bit of blue,\" you have to provide an exact amount. As with grayscale, the individual color elements are expressed as ranges from 0 (none of that color) to 255 (as much as possible), and they are listed in the order R, G, and B. You will get the hang of RGB color mixing through experimentation, but next we will cover some code using some common colors."
- color-transparency-title: "Color Transparency"
- color-transparency-p1x1: "In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's \"alpha\". Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the \"alpha channel\" of an image."
- color-transparency-p2x1: "It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, p5.js takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming \"rose-colored\" glasses, this is where you would begin.)"
- color-transparency-p3x1: "Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque)."
- color-custom-ranges-title: "Custom Color Ranges"
- color-custom-ranges-p1x1: "RGB color with ranges of 0 to 255 is not the only way you can handle color in p5.js, in fact, it allows us to think about color any way we like. For example, you might prefer to think of color as ranging from 0 to 100 (like a percentage). You can do this by specifying a custom "
- color-custom-ranges-p2x1: "The above function says: \"OK, we want to think about color in terms of red, green, and blue. The range of RGB values will be from 0 to 100.\""
- color-custom-ranges-p3x1: "Although it is rarely convenient to do so, you can also have different ranges for each color component:"
- color-custom-ranges-p4x1: "Now we are saying \"Red values go from 0 to 100, green from 0 to 500, blue from 0 to 10, and alpha from 0 to 255.\""
- color-custom-ranges-p5x1: "Finally, while you will likely only need RGB color for all of your programming needs, you can also specify colors in the HSB (hue, saturation, and brightness) mode. Without getting into too much detail, HSB color works as follows:"
- color-custom-ranges-li1x1: "Hue"
- color-custom-ranges-li1x2: "—The color type, ranges from 0 to 255 by default."
- color-custom-ranges-li2x1: "Saturation"
- color-custom-ranges-li2x2: "—The vibrancy of the color, 0 to 255 by default."
- color-custom-ranges-li3x1: "Brightness"
- color-custom-ranges-li3x2: "—The, well, brightness of the color, 0 to 255 by default."
- color-custom-ranges-p6x1: "With "
- color-custom-ranges-p6x2: " you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%)."
- coordinate-system-description1: "This tutorial is from the book "
- coordinate-system-description2: "Learning Processing"
- coordinate-system-description3: " by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It was ported to p5.js by Alex Yixuan Xu. If you find any errors or have comments, please "
- coordinate-system-description4: "let us know"
- coordinate-system-description5: "."
- coordinate-system-description-title: "Coordinate System and Shapes"
- coordinate-system-description-p1x1: "Before we begin programming with p5, we must first channel our eighth grade selves, pull out a piece of graph paper, and draw a line. The shortest distance between two points is a good old fashioned line, and this is where we begin, with two points on that graph paper."
- coordinate-system-description-p2x1: "The above figure shows a line between point A (1,0) and point B (4,5). If you wanted to direct a friend of yours to draw that same line, you would give them a shout and say \"draw a line from the point one-zero to the point four-five, please.\" Well, for the moment, imagine your friend was a computer and you wanted to instruct this digital pal to display that same line on its screen. The same command applies (only this time you can skip the pleasantries and you will be required to employ a precise formatting). Here, the instruction will look like this:"
- coordinate-system-description-p3x1: "Even without having studied the syntax of writing code, the above statement should make a fair amount of sense. We are providing a command (which we will refer to as a \"function\") for the machine to follow entitled \"line.\" In addition, we are specifying some arguments for how that line should be drawn, from point A (1,0) to point B (4,5). If you think of that line of code as a sentence, the function is a verb and the arguments are the objects of the sentence. The code sentence also ends with a semicolon instead of a period."
- coordinate-system-description-p4x1: "The key here is to realize that the computer screen is nothing more than a fancier piece of graph paper. Each pixel of the screen is a coordinate - two numbers, an \"x\" (horizontal) and a \"y\" (vertical) - that determines the location of a point in space. And it is our job to specify what shapes and colors should appear at these pixel coordinates."
- coordinate-system-description-p5x1: "Nevertheless, there is a catch here. The graph paper from eighth grade (\"Cartesian coordinate system\") placed (0,0) in the center with the y-axis pointing up and the x-axis pointing to the right (in the positive direction, negative down and to the left). The coordinate system for pixels in a computer window, however, is reversed along the y-axis. (0,0) can be found at the top left with the positive direction to the right horizontally and down vertically."
- coordinate-system-simple-shapes-title: "Simple Shapes"
- coordinate-system-simple-shapes-p1x1: "The vast majority of p5 programming examples are visual in nature. These examples, at their core, involve drawing shapes and setting pixels. Let's begin by looking at four primitive shapes."
- coordinate-system-simple-shapes-p2x1: "For each shape, we will ask ourselves what information is required to specify the location and size (and later color) of that shape and learn how p5 expects to receive that information. In each of the diagrams below, we'll assume a window with a width of 100 pixels and height of 100 pixels."
- coordinate-system-simple-shapes-p3x1: "A "
- coordinate-system-simple-shapes-p3x2: " is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y coordinate."
- coordinate-system-simple-shapes-p4x1: "A "
- coordinate-system-simple-shapes-p4x2: " isn't terribly difficult either and simply requires two points: (x1,y1) and (x2,y2):"
- coordinate-system-simple-shapes-p5x1: "Once we arrive at drawing a "
- coordinate-system-simple-shapes-p5x2: ", things become a bit more complicated. In p5, a rectangle is specified by the coordinate for the top left corner of the rectangle, as well as its width and height."
- coordinate-system-simple-shapes-p6x1: "A second way to draw a rectangle involves specifying the centerpoint, along with width and height. If we prefer this method, we first indicate that we want to use the "
- coordinate-system-simple-shapes-p6x2: " mode before the instruction for the rectangle itself. Note that p5 is case-sensitive."
- coordinate-system-simple-shapes-p7x1: "Finally, we can also draw a rectangle with two points (the top left corner and the bottom right corner). The mode here is "
- coordinate-system-simple-shapes-p7x2: ". Note this example gives the same result on screen as the example above."
- coordinate-system-simple-shapes-p8x1: "Once we have become comfortable with the concept of drawing a rectangle, an "
- coordinate-system-simple-shapes-p8x2: " is a snap. In fact, it is identical to "
- coordinate-system-simple-shapes-p8x3: " with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode for "
- coordinate-system-simple-shapes-p8x4: " is "
- coordinate-system-simple-shapes-p8x5: ", rather than "
- coordinate-system-simple-shapes-p8x6: "."
- coordinate-system-simple-shapes-p9x1: "Now let's look at what some code with shapes in more complete form, with canvas dimensions of 200 by 200. Note the use of the createCanvas() function to specify the width and height of the canvas."
- teach-desc: "Teach a p5 workshop or class, or create teaching materials!"
-
-test-tutorial:
-
+ learn-title: Learn
+ teach-title2: Teach
+ learn1: >-
+ These tutorials provide more in-depth or step-by-step overviews of
+ particular topics. Check out the
+ learn2: examples page
+ learn3: to explore short demonstrations of various p5.js topics.
+ introduction-to-p5js-title: Introduction to p5.js
+ hello-p5js-title: Hello p5.js
+ hello-p5js: >-
+ This short video will introduce you to the library and what you can do with
+ it.
+ getting-started-title: Getting Started
+ getting-started: >-
+ Welcome to p5.js! This introduction covers the basics of setting up a
+ p5.js project.
+ p5js-overview-title: p5.js overview
+ p5js-overview: An overview of the main features of p5.js.
+ p5js-processing-title: p5.js and Processing
+ p5js-processing: >-
+ The main differences between the two, and how to convert from one to the
+ other.
+ p5-screen-reader-title: p5 with a screen reader
+ p5-screen-reader: Setting up p5 so that it can be used easily with a screen reader.
+ using-local-server-title: Using a local server
+ using-local-server: 'How to set up a local server on Mac OSX, Windows, or Linux.'
+ p5js-wiki-title: p5.js wiki
+ p5js-wiki: Additonal documentation and tutorials contributed by the community
+ connecting-p5js-title: Connecting p5.js
+ creating-libraries-title: Creating libraries
+ creating-libraries: Creating p5.js addon libraries.
+ nodejs-and-socketio-title: node.js and socket.io
+ nodejs-and-socketio: 'Using a node.js server with p5.js, communication via socket.io.'
+ programming-topics-title: Programming topics
+ beyond-the-canvas-title: Beyond the canvas
+ beyond-the-canvas: Creating and manipulating elements on the page beyond the canvas.
+ 3d-webgl-title: 3D/WebGL
+ 3d-webgl: Developing advanced graphics applications in p5.js using WEBGL mode.
+ color-title: Color
+ color: An introduction to digital color.
+ coordinate-system-and-shapes-title: Coordinate System and Shapes
+ coordinate-system-and-shapes: Drawing simple shapes and using the coordinate system.
+ interactivity-title: Interactivity
+ interactivity: Introduction to interactivity with the mouse and keyboard.
+ program-flow-title: Program Flow
+ program-flow: Introduction to controlling program flow in p5.js.
+ curves-title: Curves
+ curves: >-
+ An introduction to the three types of curves in p5.js: arcs, spline curves,
+ and Bézier curves.
+ becoming-a-better-programmer-title: Becoming a better programmer
+ debugging-title: Debugging
+ debugging: Field guide to debugging for everyone.
+ optimizing-title: Optimizing p5.js code for performance
+ optimizing: >-
+ A tutorial of tips and tricks for optimizing your code to make it run faster
+ and smoother.
+ test-driven-development-title: Unit testing and test driven development
+ test-driven-development: >-
+ Save yourself from agony on install day. What is unit testing and how to use
+ it? By Andy Timmons.
+ contributing-to-the-community-title: Contributing to the community
+ development-title: Development
+ development: Getting started and overview for contributing to development.
+ looking-inside-title: Looking inside p5
+ looking-inside: >-
+ A friendly intro to the file structure and tools for p5.js development, by
+ Luisa Pereira.
+ writing-tutorial-title: Writing a tutorial
+ writing-tutorial: A guide to writing a p5.js programming tutorial.
+ writing-a-tutorial-title: Guide to contributing p5.js tutorials
+ writing-a-tutorial-author: This tutorial was written by Tega Brain.
+ writing-a-tutorial-1: >-
+ We invite educators, contributors and general enthusiasts to contribute p5js
+ tutorials. The p5js project makes creative coding and open source
+ development more accessible to a diverse community and we are excited to
+ publish tutorials on all aspects of the development process. Our learning
+ materials so far include guides on learning p5, programming technique and
+ how to contribute to an open source project.
+ writing-a-tutorial-2: >-
+ We welcome new written tutorial contributions and this guide outlines the
+ steps of how to propose, prepare and contribute.
+ writing-a-tutorial-how-start-title: 'How to get started:'
+ writing-a-tutorial-how-start-1: 'Check that your proposed topic has not already been covered. There is '
+ writing-a-tutorial-how-start-2: a working spreadsheet here
+ writing-a-tutorial-how-start-3: >-
+ that outlines in progress tutorials. If your topic is listed as in progress,
+ perhaps you can add to work being done and contribute to preparing existing
+ work for publication so please reach out to us.
+ writing-a-tutorial-how-start-4: >-
+ If your topic is not already covered and is not listed as in progress,
+ please write a few sentences on what you propose to cover and email us this
+ description at education@p5js.org.
+ writing-a-tutorial-how-prepare-title: 'How to prepare a p5js tutorial for publication online:'
+ writing-a-tutorial-how-prepare-1: >-
+ When your tutorial is ready for publication, please follow these steps to
+ prepare your content for the p5js website.
+ writing-a-tutorial-how-prepare-2: 'Prepare the content of your tutorial as a tutorial-name.hbs file with '
+ writing-a-tutorial-how-prepare-3: this basic structure
+ writing-a-tutorial-how-prepare-4: '. As is shown in this file, it must contain a header as shown below:'
+ writing-a-tutorial-how-prepare-5: >-
+ The folder containing your tutorial will be placed in the 'tutorials' folder
+ of the p5js site. The file called index.hbs is the
+ writing-a-tutorial-how-prepare-6: 'p5.js tutorials landing page,'
+ writing-a-tutorial-how-prepare-7: ' and the test-tutorial.hbs file is the test tutorial.'
+ writing-a-tutorial-how-prepare-8: 'All content should go in the:'
+ writing-a-tutorial-how-prepare-9: >-
+ tags on the page, with formatting defined by the <h1> and <h2>
+ tags, the <p> paragraph tags as is done shown on the
+ writing-a-tutorial-how-prepare-10: test tutorial page.
+ writing-a-tutorial-how-prepare-11: >-
+ If your tutorial contains images, they are to be placed in the assets folder
+ of the p5 site, in the location src/assets/learn/test-tutorial/images as
+ shown below.
+ writing-a-tutorial-how-prepare-12: 'To correctly format code in the html of the page use the tag:'
+ writing-a-tutorial-embedding-title: Embedding p5.js sketches
+ writing-a-tutorial-embedding-1: >-
+ Using p5js means you can illustrate your tutorial with animated, interactive
+ or editable code examples to demonstrate programming concepts. Your examples
+ should be prepared as p5.js sketches and can be embedded into the tutorial
+ in two ways.
+ writing-a-tutorial-embedding-2: 'If the example is to be editable like in '
+ writing-a-tutorial-embedding-3: the reference pages
+ writing-a-tutorial-embedding-4: ' of the p5js site, the p5 sketch should be embedded into the html page using the p5js widget. Follow '
+ writing-a-tutorial-embedding-5: 'this guide '
+ writing-a-tutorial-embedding-6: 'on how to embed p5js sketches using the widget written by '
+ writing-a-tutorial-embedding-7: . You can also explore this in action on the
+ writing-a-tutorial-embedding-8: ' test tutorial page'
+ writing-a-tutorial-embedding-9: .
+ writing-a-tutorial-embedding-10: >-
+ If the example is to be animated and/or interactive but not editable. The
+ p5.js sketch should be embedded into the page as an iframe as described
+ below.
+ writing-a-tutorial-iframe-title: Embed a p5 sketch using an iframe
+ writing-a-tutorial-iframe-1: >-
+ An iframe is like creating a window through which you can explore another
+ page, sandboxed from the rest of your page. In this case it will be a window
+ to the index.html containing your p5.js sketch.
+ writing-a-tutorial-iframe-2: >-
+ Put your p5 sketches in the /src/assets/learn folder of the site, in a
+ folder labelled with the name of your sketch as shown in the screenshot.
+ This is where all the images and p5 sketches linked by iframe should be
+ stored.
+ writing-a-tutorial-iframe-3: >-
+ In the subfolders containing your p5 examples there should be a sketch.js
+ file and the embed.html file for the sketch.
+ writing-a-tutorial-iframe-4: >-
+ Make sure your embed.html file has the correct paths to the p5 libraries of
+ the site. If your file structure is the same as above, the path to the p5.js
+ library should be "../../../js/p5.min.js".
+ writing-a-tutorial-iframe-5: >-
+ You can then embed the p5js index files as iframes in the .hbs file that
+ contains your tutorial content. The embed code for the iframe would then
+ be:
+ writing-a-tutorial-iframe-6: >-
+ Styling for the iframe (this could directly into the post or in a
+ stylesheet):
+ writing-a-tutorial-iframe-7: 'Here you can find the naked sketch running: '
+ writing-a-tutorial-iframe-8: 'And here it is embedded in the p5 site using the code below: '
+ writing-a-tutorial-iframe-9: >-
+ One thing to note is that you need to manually set the size of the iframe,
+ so it works best if things are a standard size.
+ writing-a-tutorial-iframe-10: >-
+ Also note that the links to the p5.js library files do not happen from the
+ .eps page with all the tutorial content. Instead they will be located in the
+ html page that is rendering your sketch (in this case, called embed.html).
+ writing-a-tutorial-iframe-11: 'More information on embedding p5.js sketches can be found '
+ writing-a-tutorial-embed-iframe-12: here.
+ writing-a-tutorial-finishing-title: Finishing up
+ writing-a-tutorial-finishing-1: >-
+ Once your have finished writing your tutorial and your content has been
+ given the thumbs up. Fork the p5.js website repository, prepare your content
+ as described above and then issue a pull request to the p5.js website
+ repository so we can publish your contribution!
+ writing-a-tutorial-finishing-2: Thank you!
+ color-description1: >-
+ This tutorial is from the book Learning Processing by Daniel Shiffman,
+ published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It
+ was ported to P5 by Kelly Chang. If you find any errors or have comments,
+ color-description2: ' please let us know.'
+ color-p1x1: >-
+ 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.
+ color-p2x1: 'By adding the '
+ color-p2x2: ' and '
+ color-p2x3: ' functions before something is drawn, we can set the color of any given shape. There is also the function '
+ color-p2x4: ', which sets a background color for the window. Here''s an example.'
+ color-code1: |-
+ background(255); // Setting the background to white
+ stroke(0); // Setting the outline (stroke) to black
+ fill(150); // Setting the interior of a shape (fill) to grey
+ rect(50,50,75,100); // Drawing the rectangle
+ color-p3x1: 'Stroke or fill can be eliminated with the functions: '
+ color-p3x2: ' and '
+ color-p3x3: >-
+ . Our instinct might be to say "stroke(0)" for no outline, however, it is
+ important to remember that 0 is not "nothing", but rather denotes the color
+ black. Also, remember not to eliminate both—with
+ color-p3x4: ' and '
+ color-p3x5: ', nothing will appear!'
+ color-p4x1: >-
+ In addition, if we draw two shapes, p5.js will always use the most recently
+ specified stroke and fill, reading the code from top to bottom.
+ color-rgb-title: RGB Color
+ color-rgb-p1x1: >-
+ Remember finger painting? By mixing three "primary" colors, any color could
+ be generated. Swirling all colors together resulted in a muddy brown. The
+ more paint you added, the darker it got. Digital colors are also constructed
+ by mixing three primary colors, but it works differently from paint. First,
+ the primaries are different: red, green, and blue (i.e., "RGB" color). And
+ with color on the screen, you are mixing light, not paint, so the mixing
+ rules are different as well.
+ color-rgb-li1: Red + Green = Yellow
+ color-rgb-li2: Red + Blue = Purple
+ color-rgb-li3: Green + Blue = Cyan (blue-green)
+ color-rgb-li4: Red + Green + Blue = White
+ color-rgb-li5: No colors = Black
+ color-rgb-p2x1: >-
+ This assumes that the colors are all as bright as possible, but of course,
+ you have a range of color available, so some red plus some green plus some
+ blue equals gray, and a bit of red plus a bit of blue equals dark purple.
+ While this may take some getting used to, the more you program and
+ experiment with RGB color, the more it will become instinctive, much like
+ swirling colors with your fingers. And of course you can't say "Mix some red
+ with a bit of blue," you have to provide an exact amount. As with grayscale,
+ the individual color elements are expressed as ranges from 0 (none of that
+ color) to 255 (as much as possible), and they are listed in the order R, G,
+ and B. You will get the hang of RGB color mixing through experimentation,
+ but next we will cover some code using some common colors.
+ color-transparency-title: Color Transparency
+ color-transparency-p1x1: >-
+ In addition to the red, green, and blue components of each color, there is
+ an additional optional fourth component, referred to as the color's "alpha".
+ Alpha means transparency and is particularly useful when you want to draw
+ elements that appear partially see-through on top of one another. The alpha
+ values for an image are sometimes referred to collectively as the "alpha
+ channel" of an image.
+ color-transparency-p2x1: >-
+ It is important to realize that pixels are not literally transparent, this
+ is simply a convenient illusion that is accomplished by blending colors.
+ Behind the scenes, p5.js takes the color numbers and adds a percentage of
+ one to a percentage of another, creating the optical perception of blending.
+ (If you are interested in programming "rose-colored" glasses, this is where
+ you would begin.)
+ color-transparency-p3x1: >-
+ Alpha values also range from 0 to 255, with 0 being completely transparent
+ (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque).
+ color-custom-ranges-title: Custom Color Ranges
+ color-custom-ranges-p1x1: >-
+ RGB color with ranges of 0 to 255 is not the only way you can handle color
+ in p5.js, in fact, it allows us to think about color any way we like. For
+ example, you might prefer to think of color as ranging from 0 to 100 (like a
+ percentage). You can do this by specifying a custom
+ color-custom-ranges-p2x1: >-
+ The above function says: "OK, we want to think about color in terms of red,
+ green, and blue. The range of RGB values will be from 0 to 100."
+ color-custom-ranges-p3x1: >-
+ Although it is rarely convenient to do so, you can also have different
+ ranges for each color component:
+ color-custom-ranges-p4x1: >-
+ Now we are saying "Red values go from 0 to 100, green from 0 to 500, blue
+ from 0 to 10, and alpha from 0 to 255."
+ color-custom-ranges-p5x1: >-
+ Finally, while you will likely only need RGB color for all of your
+ programming needs, you can also specify colors in the HSB (hue, saturation,
+ and brightness) mode. Without getting into too much detail, HSB color works
+ as follows:
+ color-custom-ranges-li1x1: Hue
+ color-custom-ranges-li1x2: '—The color type, ranges from 0 to 360 by default.'
+ color-custom-ranges-li2x1: Saturation
+ color-custom-ranges-li2x2: '—The vibrancy of the color, 0 to 100 by default.'
+ color-custom-ranges-li3x1: Brightness
+ color-custom-ranges-li3x2: '—The, well, brightness of the color, 0 to 100 by default.'
+ color-custom-ranges-p6x1: 'With '
+ color-custom-ranges-p6x2: ' you can set your own ranges for these values. Some prefer a range of 0-360 for hue (think of 360 degrees on a color wheel) and 0-100 for saturation and brightness (think of 0-100%).'
+ coordinate-system-description1: 'This tutorial is from the book '
+ coordinate-system-description2: Learning Processing
+ coordinate-system-description3: ' by Daniel Shiffman, published by Morgan Kaufmann, © 2008 Elsevier Inc. All rights reserved. It was ported to p5.js by Alex Yixuan Xu. If you find any errors or have comments, please '
+ coordinate-system-description4: let us know
+ coordinate-system-description5: .
+ coordinate-system-description-title: Coordinate System and Shapes
+ coordinate-system-description-p1x1: >-
+ Before we begin programming with p5, we must first channel our eighth grade
+ selves, pull out a piece of graph paper, and draw a line. The shortest
+ distance between two points is a good old fashioned line, and this is where
+ we begin, with two points on that graph paper.
+ coordinate-system-description-p2x1: >-
+ The above figure shows a line between point A (1,0) and point B (4,5). If
+ you wanted to direct a friend of yours to draw that same line, you would
+ give them a shout and say "draw a line from the point one-zero to the point
+ four-five, please." Well, for the moment, imagine your friend was a computer
+ and you wanted to instruct this digital pal to display that same line on its
+ screen. The same command applies (only this time you can skip the
+ pleasantries and you will be required to employ a precise formatting). Here,
+ the instruction will look like this:
+ coordinate-system-description-p3x1: >-
+ Even without having studied the syntax of writing code, the above statement
+ should make a fair amount of sense. We are providing a command (which we
+ will refer to as a "function") for the machine to follow entitled "line." In
+ addition, we are specifying some arguments for how that line should be
+ drawn, from point A (1,0) to point B (4,5). If you think of that line of
+ code as a sentence, the function is a verb and the arguments are the objects
+ of the sentence. The code sentence also ends with a semicolon instead of a
+ period.
+ coordinate-system-description-p4x1: >-
+ The key here is to realize that the computer screen is nothing more than a
+ fancier piece of graph paper. Each pixel of the screen is a coordinate - two
+ numbers, an "x" (horizontal) and a "y" (vertical) - that determines the
+ location of a point in space. And it is our job to specify what shapes and
+ colors should appear at these pixel coordinates.
+ coordinate-system-description-p5x1: >-
+ Nevertheless, there is a catch here. The graph paper from eighth grade
+ ("Cartesian coordinate system") placed (0,0) in the center with the y-axis
+ pointing up and the x-axis pointing to the right (in the positive direction,
+ negative down and to the left). The coordinate system for pixels in a
+ computer window, however, is reversed along the y-axis. (0,0) can be found
+ at the top left with the positive direction to the right horizontally and
+ down vertically.
+ coordinate-system-simple-shapes-title: Simple Shapes
+ coordinate-system-simple-shapes-p1x1: >-
+ The vast majority of p5 programming examples are visual in nature. These
+ examples, at their core, involve drawing shapes and setting pixels. Let's
+ begin by looking at four primitive shapes.
+ coordinate-system-simple-shapes-p2x1: >-
+ For each shape, we will ask ourselves what information is required to
+ specify the location and size (and later color) of that shape and learn how
+ p5 expects to receive that information. In each of the diagrams below, we'll
+ assume a window with a width of 100 pixels and height of 100 pixels.
+ coordinate-system-simple-shapes-p3x1: 'A '
+ coordinate-system-simple-shapes-p3x2: ' is the easiest of the shapes and a good place to start. To draw a point, we only need an x and y coordinate.'
+ coordinate-system-simple-shapes-p4x1: 'A '
+ coordinate-system-simple-shapes-p4x2: ' isn''t terribly difficult either and simply requires two points: (x1,y1) and (x2,y2):'
+ coordinate-system-simple-shapes-p5x1: 'Once we arrive at drawing a '
+ coordinate-system-simple-shapes-p5x2: >-
+ , things become a bit more complicated. In p5, a rectangle is specified by
+ the coordinate for the top left corner of the rectangle, as well as its
+ width and height.
+ coordinate-system-simple-shapes-p6x1: >-
+ A second way to draw a rectangle involves specifying the centerpoint, along
+ with width and height. If we prefer this method, we first indicate that we
+ want to use the
+ coordinate-system-simple-shapes-p6x2: ' mode before the instruction for the rectangle itself. Note that p5 is case-sensitive.'
+ coordinate-system-simple-shapes-p7x1: >-
+ Finally, we can also draw a rectangle with two points (the top left corner
+ and the bottom right corner). The mode here is
+ coordinate-system-simple-shapes-p7x2: . Note this example gives the same result on screen as the example above.
+ coordinate-system-simple-shapes-p8x1: 'Once we have become comfortable with the concept of drawing a rectangle, an '
+ coordinate-system-simple-shapes-p8x2: ' is a snap. In fact, it is identical to '
+ coordinate-system-simple-shapes-p8x3: ' with the difference being that an ellipse is drawn where the bounding box of the rectangle would be. The default mode for '
+ coordinate-system-simple-shapes-p8x4: ' is '
+ coordinate-system-simple-shapes-p8x5: ', rather than '
+ coordinate-system-simple-shapes-p8x6: .
+ coordinate-system-simple-shapes-p9x1: >-
+ Now let's look at what some code with shapes in more complete form, with
+ canvas dimensions of 200 by 200. Note the use of the createCanvas() function
+ to specify the width and height of the canvas.
+ teach-desc: 'Teach a p5 workshop or class, or create teaching materials!'
+test-tutorial: null
libraries:
- Libraries: "Libraries"
- core-libraries: "Core Libraries"
- community-libraries: "Community Libraries"
- libraries-created-by: "Created by:"
- p5.sound: "p5.sound extends p5 with Web Audio functionality including audio input, playback, analysis and synthesis."
- p5.accessibility: "p5.accessibility makes the p5 canvas more accessible to people who are blind and visually impaired."
- asciiart: "p5.asciiart is a simple and easy to use image - to - ASCII art converter for p5js."
- p5.ble: "A Javascript library that enables communication between BLE devices and p5 sketches."
- blizard.js: "a library for making DOM manipulation simple"
- p5.bots: "With p5.bots you can interact with your Arduino (or other microprocessor) from within the browser. Use sensor data to drive a sketch; use a sketch to drive LEDs, motors, and more! "
- p5.clickable: "Event driven, easy-to-use button library for p5.js."
- p5.cmyk.js: "CMYK ColorSpace"
- p5.collide2D: "p5.collide2D provides tools for calculating collision detection for 2D geometry with p5.js."
- p5.createloop: "Create animation loops with noise and GIF exports in one line of code."
- p5.dimensions: "p5.dimensions extends p5.js' vector functions to work in any number of dimensions."
- p5.EasyCam: "Simple 3D camera control with inertial pan, zoom, and rotate. Major contributions by Thomas Diewald."
- p5.experience: "Extensive library for p5.js that adds additional event-listening functionality for creating canvas-based web applications."
- p5.func: "p5.func is a p5 extension that provides new objects and utilities for function generation in the time, frequency, and spatial domains."
- p5.geolocation: "p5.geolocation provides techniques for acquiring, watching, calculating, and geofencing user locations for p5.js."
- p5.gibber: "p5.gibber provides rapid music sequencing and audio synthesis capabilities."
- grafica.js: "grafica.js lets you add simple but highly configurable 2D plots to your p5.js sketches."
- p5.gui: "p5.gui generates a graphical user interface for your p5.js sketches."
- p5.localmessage: "p5.localmessage provides a simple interface to send messages locally from one sketch to another for easy multi-window sketching!"
- marching: "Raster to vector conversion, isosurfaces."
- mappa: "Mappa provides a set of tools for working with static maps, tile maps, and geo-data. Useful when building geolocation-based visual representations."
- ml5.js: "ml5.js builds on Tensorflow.js and provides friendly access to machine learning algorithms and models in the browser."
- p5.play: "p5.play provides sprites, animations, input and collision functions for games and gamelike applications."
- p5.particle: "The Particle and Fountain objects can be used to create data-driven effects that are defined through user structures or JSON input and user-draw functions."
- p5.Riso: "p5.Riso is a library for generating files suitable for Risograph printing. It helps turn your sketches into multi-color prints."
- rita.js: "RiTa.js provides a set of natural language processing objects for generative literature."
- Rotating knobs: "Make knobs you can rotate with custom graphics and return value ranges."
- p5.scenemanager: "p5.SceneManager helps you create sketches with multiple states / scenes. Each scene is a like a sketch within the main sketch."
- p5.screenPosition: "Adds the screenX and screenY functionality from Processing to P5js."
- p5.scribble: "Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based on a port of the original Processing library "
- p5.serial: "p5.serial enables serial communication between devices that support serial (RS-232) and p5 sketches running in the browser."
- Shape5: "Shape5 is a 2D primative library for elementary students who are learning to code for the first time."
- p5.shape.js: "A library built to add more simple shapes to the p5.js framework."
- p5.speech: "p5.speech provides simple, clear access to the Web Speech and Speech Recognition APIs, allowing for the easy creation of sketches that can talk and listen."
- p5.start2d.js: "p5 extension for 2D static art using px, mm, cm or inches"
- p5.tiledmap: "p5.tiledmap provides drawing and helper functions to include maps in your sketches."
- p5.touchgui: "A multi-touch and mouse GUI Library for p5.js."
- tramontana: "Tramontana is a platform for easily use many devices (iOS, Android, tramontana Board, ...) to create interactive environments, interactive spaces or just prototype experiences at scale and in space."
- vida: "Vida is a simple library that adds camera (or video) based motion detection and blob tracking functionality to p5js."
- p5.voronoi: "p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in your p5.js sketches."
- p5.3D: "3D Text and Images in WebGL."
- using-a-library-title: "Using a library"
- using-a-library1: "A p5.js library can be any JavaScript code that extends or adds to the p5.js core functionality. There are two categories of libraries. Core libraries ("
- using-a-library3: ") are part of the p5.js distribution, while contributed libraries are developed, owned, and maintained by members of the p5.js community."
- using-a-library4: "To include a library in your sketch, link it into your HTML file, after you have linked in p5.js. An example HTML file might look like this:"
- create-your-own-title: "Create Your Own"
- create-your-own1: "p5.js welcomes libraries contributed by others! Check out the"
- create-your-own2: "libraries tutorial"
- create-your-own3: "for more specifics about how to create one."
- create-your-own4: "If you have created a library and would like to have it included on this page, submit this form!"
-
+ Libraries: Libraries
+ core-libraries: Core Libraries
+ community-libraries: Community Libraries
+ libraries-created-by: 'Created by:'
+ p5.sound: >-
+ p5.sound extends p5 with Web Audio functionality including audio input,
+ playback, analysis and synthesis.
+ p5.accessibility: >-
+ p5.accessibility makes the p5 canvas more accessible to people who are blind
+ and visually impaired.
+ asciiart: >-
+ p5.asciiart is a simple and easy to use image - to - ASCII art converter for
+ p5js.
+ p5.ble: >-
+ A Javascript library that enables communication between BLE devices and p5
+ sketches.
+ p5.bots: >-
+ With p5.bots you can interact with your Arduino (or other microprocessor)
+ from within the browser. Use sensor data to drive a sketch; use a sketch to
+ drive LEDs, motors, and more!
+ p5.clickable: 'Event driven, easy-to-use button library for p5.js.'
+ p5.cmyk.js: CMYK ColorSpace
+ p5.collide2D: >-
+ p5.collide2D provides tools for calculating collision detection for 2D
+ geometry with p5.js.
+ p5.createloop: Create animation loops with noise and GIF exports in one line of code.
+ p5.dimensions: >-
+ p5.dimensions extends p5.js' vector functions to work in any number of
+ dimensions.
+ p5.EasyCam: >-
+ Simple 3D camera control with inertial pan, zoom, and rotate. Major
+ contributions by Thomas Diewald.
+ p5.experience: >-
+ Extensive library for p5.js that adds additional event-listening
+ functionality for creating canvas-based web applications.
+ p5.func: >-
+ p5.func is a p5 extension that provides new objects and utilities for
+ function generation in the time, frequency, and spatial domains.
+ p5.geolocation: >-
+ p5.geolocation provides techniques for acquiring, watching, calculating, and
+ geofencing user locations for p5.js.
+ p5.gibber: p5.gibber provides rapid music sequencing and audio synthesis capabilities.
+ grafica.js: >-
+ grafica.js lets you add simple but highly configurable 2D plots to your
+ p5.js sketches.
+ p5.gui: p5.gui generates a graphical user interface for your p5.js sketches.
+ p5.localmessage: >-
+ p5.localmessage provides a simple interface to send messages locally from
+ one sketch to another for easy multi-window sketching!
+ marching: 'Raster to vector conversion, isosurfaces.'
+ mappa: >-
+ Mappa provides a set of tools for working with static maps, tile maps, and
+ geo-data. Useful when building geolocation-based visual representations.
+ ml5.js: >-
+ ml5.js builds on Tensorflow.js and provides friendly access to machine
+ learning algorithms and models in the browser.
+ p5.play: >-
+ p5.play provides sprites, animations, input and collision functions for
+ games and gamelike applications.
+ p5.particle: >-
+ The Particle and Fountain objects can be used to create data-driven effects
+ that are defined through user structures or JSON input and user-draw
+ functions.
+ p5.Riso: >-
+ p5.Riso is a library for generating files suitable for Risograph printing.
+ It helps turn your sketches into multi-color prints.
+ rita.js: >-
+ RiTa.js provides a set of natural language processing objects for generative
+ literature.
+ Rotating knobs: Make knobs you can rotate with custom graphics and return value ranges.
+ p5.scenemanager: >-
+ p5.SceneManager helps you create sketches with multiple states / scenes.
+ Each scene is a like a sketch within the main sketch.
+ p5.screenPosition: Adds the screenX and screenY functionality from Processing to P5js.
+ p5.scribble: >-
+ Draw 2D primitives in a sketchy look. Created by Janneck Wullschleger, based
+ on a port of the original Processing library
+ p5.serial: >-
+ p5.serial enables serial communication between devices that support serial
+ (RS-232) and p5 sketches running in the browser.
+ Shape5: >-
+ Shape5 is a 2D primative library for elementary students who are learning to
+ code for the first time.
+ p5.shape.js: A library built to add more simple shapes to the p5.js framework.
+ p5.speech: >-
+ p5.speech provides simple, clear access to the Web Speech and Speech
+ Recognition APIs, allowing for the easy creation of sketches that can talk
+ and listen.
+ p5.start2d.js: 'p5 extension for 2D static art using px, mm, cm or inches'
+ p5.tiledmap: >-
+ p5.tiledmap provides drawing and helper functions to include maps in your
+ sketches.
+ p5.touchgui: A multi-touch and mouse GUI Library for p5.js.
+ tramontana: >-
+ Tramontana is a platform for easily use many devices (iOS, Android,
+ tramontana Board, ...) to create interactive environments, interactive
+ spaces or just prototype experiences at scale and in space.
+ vida: >-
+ Vida is a simple library that adds camera (or video) based motion detection
+ and blob tracking functionality to p5js.
+ p5.voronoi: >-
+ p5.voronoi provides a set of tools to draw and utilize voronoi diagrams in
+ your p5.js sketches.
+ p5.xr: A library for creating VR and AR sketches with p5.
+ p5.3D: 3D Text and Images in WebGL.
+ using-a-library-title: Using a library
+ using-a-library1: >-
+ A p5.js library can be any JavaScript code that extends or adds to the p5.js
+ core functionality. There are two categories of libraries. Core libraries (
+ using-a-library3: >-
+ ) are part of the p5.js distribution, while contributed libraries are
+ developed, owned, and maintained by members of the p5.js community.
+ using-a-library4: >-
+ To include a library in your sketch, link it into your HTML file, after you
+ have linked in p5.js. An example HTML file might look like this:
+ create-your-own-title: Create Your Own
+ create-your-own1: p5.js welcomes libraries contributed by others! Check out the
+ create-your-own2: libraries tutorial
+ create-your-own3: for more specifics about how to create one.
+ create-your-own4: >-
+ If you have created a library and would like to have it included on this
+ page, submit this form!
community:
- community-title: "Community"
- community-statement-title: "p5.js Community Statement"
- community-statement1: "p5.js is a community interested in exploring the creation of art and design with technology."
- community-statement2: "We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners."
- community-statement3: "We like these hashtags: #noCodeSnobs (because we value community over efficiency), #newKidLove (because we all started somewhere), #unassumeCore (because we don't assume knowledge), and #BlackLivesMatter (because of course)."
- in-practice-title: "In practice:"
- in-practice1: " We are not code snobs. We do not assume knowledge or imply there are things that somebody should know. "
- in-practice2: "We insist on actively engaging with requests for feedback regardless of their complexity."
- in-practice3: "We welcome newcomers and prioritize the education of others. We strive to approach all tasks with the enthusiasm of a newcomer. Because we believe that newcomers are just as valuable in this effort as experts."
- in-practice4: "We consistently make the effort to actively recognize and validate multiple types of contributions."
- in-practice5: "We are always willing to offer help or guidance."
- in-times-conflict-title: "In times of conflict:"
- in-times-conflict1: "We listen."
- in-times-conflict2: "We clearly communicate while acknowledging other's feelings."
- in-times-conflict3: "We admit when we're wrong, apologize, and accept responsibility for our actions."
- in-times-conflict4: "We are continuously seeking to improve ourselves and our community."
- in-times-conflict5: "We keep our community respectful and open."
- in-times-conflict6: "We make everyone feel heard."
- in-times-conflict7: "We are mindful and kind in our interactions."
- in-the-future-title: "In the future:"
- in-the-future1: "The future is now."
-
- notes-title: "Notes"
- notes1: "Please also visit our "
- notes2: "p5.js Code of Conduct"
- notes3: ". The p5.js Community Statement is licensed under a "
- notes4: "Creative Commons license"
- notes5: ". Please feel free to share and remix with attribution."
-
- contribute-title: "Contribute"
- contribute1: "Our community is always looking for enthusiasts to help in all different ways."
- develop-title: "Develop."
- develop1: "GitHub"
- develop2: " is the main place where code is collected, issues are documented, and discussions about code are had. Check out the "
- develop3: " development tutorial"
- develop4: " to get started, or "
- develop5: "create your own library."
- document-title: "Document."
- document1: " Everyone loves documentation. Help is needed "
- document2: "porting examples"
- document3: ", and"
- document4: " adding documentation"
- document5: ", and creating tutorials."
- teach-title: "Teach."
- teach1: " Teach a workshop, a class, a friend, a collaborator! Tag @p5xjs on Twitter and we will do our best to share what you're doing."
- create-title: "Create."
- create1: " p5.js is looking for designers, artists, coders, programmers to bring your creative and amazing work to show on the front page and inspire other people. Submit your work to "
- create2: "hello@p5js.org"
- create3: "."
- donate-title: "Donate."
- donate1: " p5.js is free and open source and made by artists. Help support the development of p5.js through a donation to the "
- donate2: "Processing Foundation"
- donate3: "."
- contributors-conference-title: "p5.js Contributors Conference"
- contributors-conference1: "While most work happens online, we also convene IRL. We've had two contributors conferences held at the "
- contributors-conference2: "at Carnegie Mellon University in Pittsburgh, PA. Artists, designers, developers, educators, and got together to advance the p5.js project."
- participants-title: "Participants"
- support-title: "Support"
- support1: "Our contributor conference took place at the"
- support2: "at Carnegie Mellon University, an academic laboratory for atypical, anti-disciplinary, and inter-institutional research at the intersections of arts, science, technology, and culture."
- support3: "This event was made possible by a grant from the"
- support4: "and generous support from the"
- support5: "and"
- support6: "Thank you!"
- mailing-list-title: "Mailing list"
- mailing-list-1: "Enter your email address to receive occasional updates from the Processing Foundation."
-
- 2015contributors-conference-title: "Contributors Conference 2015"
- 2015contributors-conference-date: "May 25-31"
- 2015contributors-conference1: "A group of approximately 30 participants gathered spent a week at the "
- 2015contributors-conference2: ", advancing the code, documentation, and community outreach tools of the p5.js programming environment. Participants came from as far away as Hong Kong, Seattle, Los Angeles, Boston and New York. Most were working professionals in the fields of creative technology, interaction design, and new-media arts, but the group also included a half-dozen undergraduate and graduate students from Carnegie Mellon’s Schools of Art and Architecture."
- 2015contributors-conference3: "Photos by Taeyoon Choi"
- 2015contributors-conference-diversity-title: "Diversity"
- 2015contributors-conference-diversity1: "Alongside technical development, one of the main focuses of this conference was outreach, community, and diversity. The conference began with a panel"
- 2015contributors-conference-diversity2: "Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and the Internet"
- 2015contributors-conference-diversity3: ". "
- 2015contributors-conference-diversity4: "Organized by"
- 2015contributors-conference-diversity5: "and"
- 2015contributors-conference-diversity6: ", "
- 2015contributors-conference-diversity7: "the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie Mellon University. Speakers included"
- 2015contributors-conference-diversity8: "and"
- 2015contributors-conference-diversity9: "."
- 2015cc_1: "Diverse group of participants smile and make a p5 sign with their hands"
- 2015cc_2: "Participants jump, smile and throw their hands in the air on a green lawn"
- 2015cc_3: "Woman presenting the p5.js community statement from her laptop"
- 2015cc_4: "Woman expressively speaks into a microphone while two male collaborators look on"
- 2015cc_5: "Participants attentively smile and listen to a presentation"
- 2015cc_6: "Woman reads about p5.js into a microphone to three female students"
- 2015cc_7: "Participants sit in a circle around a white board with sticky notes on it while a female student speaks into a microphone"
- 2015cc_8: "Participants sit around a table looking at each others laptops and compare code "
- 2015cc_9: "Whiteboard with different colored sticky and written notes about programming "
- 2015cc_10: "Woman speaking into a microphone about valuing different skill sets while a group of participants with laptops look at her powerpoint in a classroom"
- 2015cc_11: "Woman speaks at a podium in an auditorium while three participants sit on the stage and another three are skyping in on the stage screen"
- 2015cc_12: "Overhead view of a classroom with participants working on their laptops"
- 2015cc_13: "Five people having a discussion in a circle"
- 2015cc_14: "Five people in a circle with their laptops sharing their notes"
- 2015cc_15: "Man in a classroom with a microphone speaking out to a group of participants"
- 2019contributors-conference-title: "Contributors Conference 2019"
- 2019contributors-conference-date: "August 13-18"
- 2019contributors-conference1: "An interdisciplinary group of 35 participants gathered at the "
- 2019contributors-conference2: ", advancing the code, documentation, and community outreach tools and exploring the current landscape of the p5.js programming environment. Comprising a diverse range of participants within the fields of creative technology, interaction design, and new media arts, the conference was aimed at fostering dialogue through a multidisciplinary lens. Working groups focused on several topic areas: Access; Music and Code in Performance; Landscape of Creative Tech; and Internationalization."
- 2019contributors-conference3: "Videos by Qianqian Ye"
- 2019contributors-conference4: "Photos by Jacquelyn Johnson"
- outputs: "Outputs"
- output1: ". An implementation of highly flexible triangle, square, hexagon, and octagon girds for p5.js. Created by Aren Davey."
- output2: ". A set of template files for building a multi-device, multiplayer game where multiple clients can connect to a specified host page. Created by L05."
- output3: "Experiments using"
- output3-1: ", testing early implementations of softCompile, OSC interfacing and added connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj environment! Created by Ted Davis."
- output4: "A panel on Blackness and Gender in Virtual Space led by American Artist, with shawné michaelain holloway and LaJuné McMillian."
- output5: "Workshops led by Everest Pipkin and Jon Chambers."
- output6: "A prototype of a "
- output6-1: "notebook interface for p5.js."
- output6-2: "Created by Allison Parrish."
- output7: "New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and Jon Chambers."
- output8: "p5.js Global Contributor's Toolkit."
- output8-1: "Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian Ye, Dorothy R. Santos, and Yasheng She."
- output9: "How to write non-violent creative code."
- output9-1: " A zine led by Olivia Ross."
- output10: "An overhaul of the p5.js website for accessibility. Including updates for screen reader accessibility, and improvements to the home, download, getting started, and reference pages. With contributions from Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren McCarthy, and Evelyn Masso."
- output11: "Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak, Sona Lee, Ted Davis, and Carlos Garcia."
- output12: "A performance by Natalie Braginsky."
- output13: "A design of the p5.js library system for the p5 Editor. Created by Cassie Tarakajian and Luca Damasco."
- output14: "Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and Lauren Valley."
- output15: "A closing campfire circle led by Golan Levin."
- 2019cc_1: "Man at a podium giving a presentation to the group"
- 2019cc_2: "Participants sitting at a long table having lunch and a discussion"
- 2019cc_3: "Participants in a classroom, some working on their laptops, others talking "
- 2019cc_4: "Classroom of participants working on their laptops"
- 2019cc_5: "Participants in a meeting in a dark classroom"
- 2019cc_6: "Woman giving presentation in a classroom of diverse participants"
- 2019cc_7: "Participants conversing in a busy classroom"
- 2019cc_8: "Woman with microphone speaking to fellow participants in a classroom"
- 2019cc_9: "Participant speaks at a podium in front of projected text about the problem with anonymyzing data"
- 2019cc_10: "Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access"
- 2019cc_11: "Woman speaking into a microphone talking to fellow participants "
- 2019cc_12: "A man with a microphone speaking to fellow participants"
- 2019cc_13: "Participants sit in a classroom towards the speakers listening intently"
- 2019cc_14: "Classroom of participants facing a speaker listen intently "
- 2019cc_15: "Woman with microphone speaking to fellow participants with the text sacred boundaries in the projection behind her"
- 2019cc_16: "Overhead view of participants listening to a panel of people with an image of a 3d rendered man on it "
- 2019cc_17: "Participants sit around a table with their laptops and observe code on a screen"
- 2019cc_18: "Woman sitting next to a lifesize teddy bear works on her laptop"
- 2019cc_19: "Participants standing outside smiling"
- 2019cc_20: "Four participants standing in a circle conversing"
- 2019cc_21: "Participants sitting outside eating lunch together"
- 2019cc_22: "Participants sitting around a large U shaped table looking towards the front of the classroom"
- 2019cc_23: "Man sitting in front of the classroom speaking energetically into a microphone"
- 2019cc_24: "Group photo of participants smiling enthusiastically with their hands in the air"
- 2019cc_25: "Group of people sit around campfire made from four LCD monitors."
-
+ community-title: Community
+ community-statement-title: p5.js Community Statement
+ community-statement1: >-
+ p5.js is a community interested in exploring the creation of art and design
+ with technology.
+ community-statement2: >-
+ We are a community of, and in solidarity with, people from every gender
+ identity and expression, sexual orientation, race, ethnicity, language,
+ neuro-type, size, ability, class, religion, culture, subculture, political
+ opinion, age, skill level, occupation, and background. We acknowledge that
+ not everyone has the time, financial means, or capacity to actively
+ participate, but we recognize and encourage involvement of all kinds. We
+ facilitate and foster access and empowerment. We are all learners.
+ community-statement3: >-
+ We like these hashtags: #noCodeSnobs (because we value community over
+ efficiency), #newKidLove (because we all started somewhere), #unassumeCore
+ (because we don't assume knowledge), and #BlackLivesMatter (because of
+ course).
+ in-practice-title: 'In practice:'
+ in-practice1: ' We are not code snobs. We do not assume knowledge or imply there are things that somebody should know. '
+ in-practice2: >-
+ We insist on actively engaging with requests for feedback regardless of
+ their complexity.
+ in-practice3: >-
+ We welcome newcomers and prioritize the education of others. We strive to
+ approach all tasks with the enthusiasm of a newcomer. Because we believe
+ that newcomers are just as valuable in this effort as experts.
+ in-practice4: >-
+ We consistently make the effort to actively recognize and validate multiple
+ types of contributions.
+ in-practice5: We are always willing to offer help or guidance.
+ in-times-conflict-title: 'In times of conflict:'
+ in-times-conflict1: We listen.
+ in-times-conflict2: We clearly communicate while acknowledging other's feelings.
+ in-times-conflict3: >-
+ We admit when we're wrong, apologize, and accept responsibility for our
+ actions.
+ in-times-conflict4: We are continuously seeking to improve ourselves and our community.
+ in-times-conflict5: We keep our community respectful and open.
+ in-times-conflict6: We make everyone feel heard.
+ in-times-conflict7: We are mindful and kind in our interactions.
+ in-the-future-title: 'In the future:'
+ in-the-future1: The future is now.
+ notes-title: Notes
+ notes1: 'Please also visit our '
+ notes2: p5.js Code of Conduct
+ notes3: '. The p5.js Community Statement is licensed under a '
+ notes4: Creative Commons license
+ notes5: . Please feel free to share and remix with attribution.
+ contribute-title: Contribute
+ contribute1: >-
+ Our community is always looking for enthusiasts to help in all different
+ ways.
+ develop-title: Develop.
+ develop1: GitHub
+ develop2: ' is the main place where code is collected, issues are documented, and discussions about code are had. Check out the '
+ develop3: ' development tutorial'
+ develop4: ' to get started, or '
+ develop5: create your own library.
+ document-title: Document.
+ document1: ' Everyone loves documentation. Help is needed '
+ document2: porting examples
+ document3: ', and'
+ document4: ' adding documentation'
+ document5: ', and creating tutorials.'
+ teach-title: Teach.
+ teach1: ' Teach a workshop, a class, a friend, a collaborator! Tag @p5xjs on Twitter and we will do our best to share what you''re doing.'
+ create-title: Create.
+ create1: ' p5.js is looking for designers, artists, coders, programmers to bring your creative and amazing work to show on the front page and inspire other people. Submit your work to '
+ create2: hello@p5js.org
+ create3: .
+ donate-title: Donate.
+ donate1: ' p5.js is free and open source and made by artists. Help support the development of p5.js through a donation to the '
+ donate2: Processing Foundation
+ donate3: .
+ contributors-conference-title: p5.js Contributors Conference
+ contributors-conference1: >-
+ While most work happens online, we also convene IRL. We've had two
+ contributors conferences held at the
+ contributors-conference2: >-
+ at Carnegie Mellon University in Pittsburgh, PA. Artists, designers,
+ developers, educators, and got together to advance the p5.js project.
+ participants-title: Participants
+ support-title: Support
+ support1: Our contributor conference took place at the
+ support2: >-
+ at Carnegie Mellon University, an academic laboratory for atypical,
+ anti-disciplinary, and inter-institutional research at the intersections of
+ arts, science, technology, and culture.
+ support3: This event was made possible by a grant from the
+ support4: and generous support from the
+ support5: and
+ support6: Thank you!
+ mailing-list-title: Mailing list
+ mailing-list-1: >-
+ Enter your email address to receive occasional updates from the Processing
+ Foundation.
+ 2015contributors-conference-title: Contributors Conference 2015
+ 2015contributors-conference-date: May 25-31
+ 2015contributors-conference1: 'A group of approximately 30 participants gathered spent a week at the '
+ 2015contributors-conference2: >-
+ , advancing the code, documentation, and community outreach tools of the
+ p5.js programming environment. Participants came from as far away as Hong
+ Kong, Seattle, Los Angeles, Boston and New York. Most were working
+ professionals in the fields of creative technology, interaction design, and
+ new-media arts, but the group also included a half-dozen undergraduate and
+ graduate students from Carnegie Mellon’s Schools of Art and Architecture.
+ 2015contributors-conference3: Photos by Taeyoon Choi
+ 2015contributors-conference-diversity-title: Diversity
+ 2015contributors-conference-diversity1: >-
+ Alongside technical development, one of the main focuses of this conference
+ was outreach, community, and diversity. The conference began with a panel
+ 2015contributors-conference-diversity2: >-
+ Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and
+ the Internet
+ 2015contributors-conference-diversity3: '. '
+ 2015contributors-conference-diversity4: Organized by
+ 2015contributors-conference-diversity5: and
+ 2015contributors-conference-diversity6: ', '
+ 2015contributors-conference-diversity7: >-
+ the panel took place Tuesday, 25 May 2015 in Kresge Auditorium at Carnegie
+ Mellon University. Speakers included
+ 2015contributors-conference-diversity8: and
+ 2015contributors-conference-diversity9: .
+ 2015cc_1: Diverse group of participants smile and make a p5 sign with their hands
+ 2015cc_2: 'Participants jump, smile and throw their hands in the air on a green lawn'
+ 2015cc_3: Woman presenting the p5.js community statement from her laptop
+ 2015cc_4: >-
+ Woman expressively speaks into a microphone while two male collaborators
+ look on
+ 2015cc_5: Participants attentively smile and listen to a presentation
+ 2015cc_6: Woman reads about p5.js into a microphone to three female students
+ 2015cc_7: >-
+ Participants sit in a circle around a white board with sticky notes on it
+ while a female student speaks into a microphone
+ 2015cc_8: >-
+ Participants sit around a table looking at each others laptops and compare
+ code
+ 2015cc_9: Whiteboard with different colored sticky and written notes about programming
+ 2015cc_10: >-
+ Woman speaking into a microphone about valuing different skill sets while a
+ group of participants with laptops look at her powerpoint in a classroom
+ 2015cc_11: >-
+ Woman speaks at a podium in an auditorium while three participants sit on
+ the stage and another three are skyping in on the stage screen
+ 2015cc_12: Overhead view of a classroom with participants working on their laptops
+ 2015cc_13: Five people having a discussion in a circle
+ 2015cc_14: Five people in a circle with their laptops sharing their notes
+ 2015cc_15: Man in a classroom with a microphone speaking out to a group of participants
+ 2019contributors-conference-title: Contributors Conference 2019
+ 2019contributors-conference-date: August 13-18
+ 2019contributors-conference1: 'An interdisciplinary group of 35 participants gathered at the '
+ 2019contributors-conference2: >-
+ , advancing the code, documentation, and community outreach tools and
+ exploring the current landscape of the p5.js programming environment.
+ Comprising a diverse range of participants within the fields of creative
+ technology, interaction design, and new media arts, the conference was aimed
+ at fostering dialogue through a multidisciplinary lens. Working groups
+ focused on several topic areas: Access; Music and Code in Performance;
+ Landscape of Creative Tech; and Internationalization.
+ 2019contributors-conference3: Videos by Qianqian Ye
+ 2019contributors-conference4: Photos by Jacquelyn Johnson
+ outputs: Outputs
+ output1: >-
+ . An implementation of highly flexible triangle, square, hexagon, and
+ octagon girds for p5.js. Created by Aren Davey.
+ output2: >-
+ . A set of template files for building a multi-device, multiplayer game
+ where multiple clients can connect to a specified host page. Created by L05.
+ output3: Experiments using
+ output3-1: >-
+ , testing early implementations of softCompile, OSC interfacing and added
+ connectivity with demo for MIDI setup. A p5.js collaborative live-coding vj
+ environment! Created by Ted Davis.
+ output4: >-
+ A panel on Blackness and Gender in Virtual Space led by American Artist,
+ with shawné michaelain holloway and LaJuné McMillian.
+ output5: Workshops led by Everest Pipkin and Jon Chambers.
+ output6: 'A prototype of a '
+ output6-1: notebook interface for p5.js.
+ output6-2: Created by Allison Parrish.
+ output7: >-
+ New art installations by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, and
+ Jon Chambers.
+ output8: p5.js Global Contributor's Toolkit.
+ output8-1: >-
+ Created by Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian
+ Ye, Dorothy R. Santos, and Yasheng She.
+ output9: How to write non-violent creative code.
+ output9-1: ' A zine led by Olivia Ross.'
+ output10: >-
+ An overhaul of the p5.js website for accessibility. Including updates for
+ screen reader accessibility, and improvements to the home, download, getting
+ started, and reference pages. With contributions from Claire Kearney-Volpe,
+ Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren
+ McCarthy, and Evelyn Masso.
+ output11: >-
+ Collaborative performances by Luisa Pereira, Jun Shern Chan, Shefali Nayak,
+ Sona Lee, Ted Davis, and Carlos Garcia.
+ output12: A performance by Natalie Braginsky.
+ output13: >-
+ A design of the p5.js library system for the p5 Editor. Created by Cassie
+ Tarakajian and Luca Damasco.
+ output14: >-
+ Prototypes connecting p5 to other libraries. Created by Alex Yixuan Xu and
+ Lauren Valley.
+ output15: A closing campfire circle led by Golan Levin.
+ 2019cc_1: Man at a podium giving a presentation to the group
+ 2019cc_2: Participants sitting at a long table having lunch and a discussion
+ 2019cc_3: 'Participants in a classroom, some working on their laptops, others talking '
+ 2019cc_4: Classroom of participants working on their laptops
+ 2019cc_5: Participants in a meeting in a dark classroom
+ 2019cc_6: Woman giving presentation in a classroom of diverse participants
+ 2019cc_7: Participants conversing in a busy classroom
+ 2019cc_8: Woman with microphone speaking to fellow participants in a classroom
+ 2019cc_9: >-
+ Participant speaks at a podium in front of projected text about the problem
+ with anonymyzing data
+ 2019cc_10: >-
+ Person with a microphone speaking to fellow participants in front of text
+ that reads p5.js will not add any new features except those that increase
+ access
+ 2019cc_11: 'Woman speaking into a microphone talking to fellow participants '
+ 2019cc_12: A man with a microphone speaking to fellow participants
+ 2019cc_13: Participants sit in a classroom towards the speakers listening intently
+ 2019cc_14: 'Classroom of participants facing a speaker listen intently '
+ 2019cc_15: >-
+ Woman with microphone speaking to fellow participants with the text sacred
+ boundaries in the projection behind her
+ 2019cc_16: >-
+ Overhead view of participants listening to a panel of people with an image
+ of a 3d rendered man on it
+ 2019cc_17: >-
+ Participants sit around a table with their laptops and observe code on a
+ screen
+ 2019cc_18: Woman sitting next to a lifesize teddy bear works on her laptop
+ 2019cc_19: Participants standing outside smiling
+ 2019cc_20: Four participants standing in a circle conversing
+ 2019cc_21: Participants sitting outside eating lunch together
+ 2019cc_22: >-
+ Participants sitting around a large U shaped table looking towards the front
+ of the classroom
+ 2019cc_23: >-
+ Man sitting in front of the classroom speaking energetically into a
+ microphone
+ 2019cc_24: >-
+ Group photo of participants smiling enthusiastically with their hands in the
+ air
+ 2019cc_25: Group of people sit around campfire made from four LCD monitors.
books:
- books-title: "Books"
- book-1-title: "Getting Started with p5.js"
- book-1-authors: "Lauren McCarthy, Casey Reas, and Ben Fry. Illustrations by Taeyoon Choi."
- book-1-publisher: "Published October 2015, Maker Media. "
- book-1-pages: "246 pages. "
- book-1-type: "Paperback."
- book-1-description: "Written by the lead p5.js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML."
- book-1-order-a: "Order Print/Ebook from O'Reilly"
- book-1-order-b: "Order from Amazon"
- book-2-title: "Introduction to p5.js (Spanish Edition)"
- book-2-authors: "Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón Montoya-Moraga. Ilustraciones de Taeyoon Choi."
- book-2-publisher: "Published 2018, Processing Foundation, Inc. "
- book-2-pages: "246 pages. "
- book-2-type: "Soft cover."
- book-2-description: "Written by the lead p5.js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML."
- book-2-order-a: "Order the PDF from The Processing Foundation Press"
- book-2-order-b: "Order the physical version from Amazon"
- book-3-title: "Generative Design"
- book-3-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-3-publisher: "Published October 30, 2018, Princeton Architectural Press; Reprint edition. "
- book-3-pages: "255 pages. "
- book-3-type: "Paperback."
- book-3-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-3-order-a: "Order from Princeton Architectural Press"
- book-3-order-b: "Order from Amazon"
- book-4-title: "Generative Gestaltung (German Edition)"
- book-4-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-4-publisher: "Published March 1, 2018, Schmidt Hermann Verlag. "
- book-4-pages: "256 pages. "
- book-4-type: "Hardcover."
- book-4-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-4-order-a: "Order from Verlag Hermann Schmidt"
- book-4-order-b: "Order from Amazon"
- book-5-title: "Learn JavaScript with p5.js"
- book-5-authors: "Engin Arslan."
- book-5-publisher: "Published 2018, Apress. "
- book-5-pages: "217 pages. "
- book-5-type: "Paperback."
- book-5-description: "Learn coding from scratch in a highly engaging and visual manner using the vastly popular JavaScript with the programming library p5.js. The skills you will acquire from this book are highly transferable to a myriad of industries and can be used towards building web applications, programmable robots, or generative art. "
- book-5-order-a: "Order from Apress"
- book-5-order-b: "Order from Amazon"
-
+ books-title: Books
+ book-1-title: Getting Started with p5.js
+ book-1-authors: 'Lauren McCarthy, Casey Reas, and Ben Fry. Illustrations by Taeyoon Choi.'
+ book-1-publisher: 'Published October 2015, Maker Media. '
+ book-1-pages: '246 pages. '
+ book-1-type: Paperback.
+ book-1-description: >-
+ Written by the lead p5.js developer and the founders of Processing, this
+ book provides an introduction to the creative possibilities of today's Web,
+ using JavaScript and HTML.
+ book-1-order-a: Order Print/Ebook from O'Reilly
+ book-1-order-b: Order from Amazon
+ book-2-title: Introduction to p5.js (Spanish Edition)
+ book-2-authors: >-
+ Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón
+ Montoya-Moraga. Ilustraciones de Taeyoon Choi.
+ book-2-publisher: 'Published 2018, Processing Foundation, Inc. '
+ book-2-pages: '246 pages. '
+ book-2-type: Soft cover.
+ book-2-description: >-
+ Written by the lead p5.js developer and the founders of Processing, this
+ book provides an introduction to the creative possibilities of today's Web,
+ using JavaScript and HTML.
+ book-2-order-a: Order the PDF from The Processing Foundation Press
+ book-2-order-b: Order the physical version from Amazon
+ book-3-title: Generative Design
+ book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-3-publisher: 'Published October 30, 2018, Princeton Architectural Press; Reprint edition. '
+ book-3-pages: '255 pages. '
+ book-3-type: Paperback.
+ book-3-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-3-order-a: Order from Princeton Architectural Press
+ book-3-order-b: Order from Amazon
+ book-4-title: Generative Gestaltung (German Edition)
+ book-4-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-4-publisher: 'Published March 1, 2018, Schmidt Hermann Verlag. '
+ book-4-pages: '256 pages. '
+ book-4-type: Hardcover.
+ book-4-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-4-order-a: Order from Verlag Hermann Schmidt
+ book-4-order-b: Order from Amazon
+ book-5-title: Learn JavaScript with p5.js
+ book-5-authors: Engin Arslan.
+ book-5-publisher: 'Published 2018, Apress. '
+ book-5-pages: '217 pages. '
+ book-5-type: Paperback.
+ book-5-description: >-
+ Learn coding from scratch in a highly engaging and visual manner using the
+ vastly popular JavaScript with the programming library p5.js. The skills you
+ will acquire from this book are highly transferable to a myriad of
+ industries and can be used towards building web applications, programmable
+ robots, or generative art.
+ book-5-order-a: Order from Apress
+ book-5-order-b: Order from Amazon
+ book-6-title: "Aesthetic Programming: A Handbook of Software Studies"
+ book-6-authors: 'Winnie Soon, Geoff Cox. '
+ book-6-publisher: 'Published 2020, Open Humanities Press. '
+ book-6-pages: '298 pages. '
+ book-6-type: Hardcover.
+ book-6-description: >-
+ Using p5.js, this book introduces and demonstrates the reflexive practice
+ of aesthetic programming, engaging with learning to program as a way to
+ understand and question existing technological objects and paradigms,
+ and to explore the potential for reprogramming wider eco-socio-technical systems.
+ book-6-order-a: Download the PDF (FREE)
+ book-6-order-b: Order from Barnes & Noble
examples:
- Examples: "Examples"
- back-examples: "Back to Examples"
- Structure: "Structure"
- Form: "Form"
- Data: "Data"
- Arrays: "Arrays"
- Control: "Control"
- Image: "Image"
- Color: "Color"
- Math: "Math"
- Simulate: "Simulate"
- Interaction: "Interaction"
- Objects: "Objects"
- Lights: "Lights"
- Motion: "Motion"
- Instance_Mode: "Instance Mode"
- Dom: "DOM"
- Drawing: "Drawing"
- Transform: "Transform"
- Typography: "Typography"
- 3D: "3D"
- Input: "Input"
- Advanced_Data: "Advanced Data"
- Sound: "Sound"
- Mobile: "Mobile"
- Hello_P5: "Hello p5"
-
+ Examples: Examples
+ back-examples: Back to Examples
+ Structure: Structure
+ Form: Form
+ Data: Data
+ Arrays: Arrays
+ Control: Control
+ Image: Image
+ Color: Color
+ Math: Math
+ Simulate: Simulate
+ Interaction: Interaction
+ Objects: Objects
+ Lights: Lights
+ Motion: Motion
+ Instance_Mode: Instance Mode
+ Dom: DOM
+ Drawing: Drawing
+ Transform: Transform
+ Typography: Typography
+ 3D: 3D
+ Input: Input
+ Advanced_Data: Advanced Data
+ Sound: Sound
+ Mobile: Mobile
+ Hello_P5: Hello p5
reference:
- Reference: "Reference"
-
+ Reference: Reference
showcase:
- showcase-title: "Showcase"
- showcase-intro1: "Introducing Showcase, created by "
- showcase-intro2: " in 2019 and currently curated by "
- showcase-intro3: "We're celebrating how people are using p5.js to make creative work, learning, and open source more interesting and inclusive. Together, we make community. During Summer 2019, we asked a few creators to share more about how they've used p5.js through different projects and pieces."
- showcase-intro4: "The Summer 2020 Showcase is now open for submissions, nominate someone's p5.js work or your own to be featured here!"
- nominate-project: "Nominate a Project"
- showcase-featuring: "Featuring"
- project-tag-art: "Art"
- project-tag-design: "Design"
- project-tag-code: "Code"
- project-tag-curriculum: "Curriculum"
- project-tag-documentation: "Documentation"
- project-tag-game: "Game"
- project-tag-library: "Library"
- project-tag-organizing: "Organizing"
- project-tag-tool: "Tool"
- project-tag-tutorial: "Tutorial"
- project-roni: "Programmed Plotter Drawings"
- credit-roni: "Roni Cantor"
- description-roni: "Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a plotter and pens."
- project-phuong: "Airi Flies"
- credit-phuong: "Phuong Ngo"
- description-phuong: "In this game developed with p5.play, help Airi fly by saying PEW. Created to encourage people to get out of their comfort zone and feel more confident about themselves regardless of what they do and how they look or sound."
- project-daein: "Chillin'"
- credit-daein: "Dae In Chung"
- description-daein: "An interactive typographic poster that uses a mobile device's motion sensor with p5.js."
- project-qianqian: "Qtv"
- credit-qianqian: "Qianqian Ye"
- description-qianqian: "A video channel with 1-minute videos in Mandarin about creative coding, art, and technology, including p5.js tutorials for beginners. Available on YouTube, Instagram, Bilibili, and TikTok."
- project-casey-louise: "p5.js Shaders"
- credit-casey-louise: "Casey Conchinha, Louise Lessél"
- description-casey-louise: "A resource for learning the what, why, and how of using shaders in p5.js."
- project-moon-xin: "Moving Responsive Posters"
- credit-moon-xin: "Moon Jang, Xin Xin, and students"
- description-moon-xin: "Browser-based moving posters that use graphical systems, transformation methods, and p5.js to address the connotations of a word less than 8 letters. Designed by students for a graphic design course (Visual Narrative Systems) at the University of Georgia."
-
- created-by: "Created By"
- pronouns-female: "(she/her)"
- creator-from-roni-cantor: "From Toronto, Canada"
- project-links: "Project Links"
- project-links-text-1-roni-cantor: "Example sketch in p5.js Web Editor"
- project-links-text-2-roni-cantor: "AxiDraw V3 demo video"
- project-q-1-1: "What are you up to?"
- project-q-1-2: "How did you get started with p5.js?"
- project-a-1-1-roni-cantor: "I just graduated from Ryerson University's New Media program. Coming from 4 years of coding and making robots, I decided to take a break and play with some more traditional forms of art—while still coding and playing with robots."
- project-a-1-2-roni-cantor: "I first started using p5.js at "
- project-a-1-3-roni-cantor: "! After using "
- project-a-1-4-roni-cantor: " for many years, I wanted to try something new."
- project-q-2: "How did you use p5.js in this project?"
- project-a-2-1-roni-cantor: "I used p5.js in this project to generate the sine wave and lerp (linear interpolation) formulas and display the visuals in the "
- project-a-2-2-roni-cantor: ". I then used a feature in my code that exported my programmed graphic into an "
- project-a-2-3-roni-cantor: " file. I needed an SVG file to give to the plotter—an "
- project-a-2-4-roni-cantor: "—so that it understood where to draw the lines that I programmed. I sent this information to the plotter with a program called "
- project-a-2-5-roni-cantor: "!"
- project-q-3: "What's your favorite p5.js feature?"
- project-a-3-roni-cantor: " because lines are fun and \"lerp\" is a fun word to say!"
- project-q-4: "Did you face any challenges working on this project? If so, how did you overcome them?"
- project-a-4-roni-cantor: "It was my first time using p5.js, Inkscape, and a plotter! I really benefited from the people around me who had used p5 before, as well as online guides and forums."
- project-q-5: "What's a cool thing we should check out?"
- project-a-5-roni-cantor: " on Instagram—super cool analog plotter stuff."
- project-q-6: "Where can people learn more about you?"
- project-a-6-roni-cantor: " (Instagram)"
-
- project-resources: "Project Resources"
- creator-from-qianqian: "Los Angeles, California"
- interview-link-qianqian: "Processing Foundation interview with Qianqian Ye"
- project-a-1-1-qianqian: "I am a Chinese artist and designer based in Los Angeles."
- project-a-1-2-qianqian: "My partner introduced me to p5.js, which I learned mainly by watching free online video tutorials. My first p5.js project was drawing some shapes with different colors."
- project-a-2-1-qianqian: "This project started with an idea of teaching my mom, who lives in China and doesn’t speak English, to code with p5.js. This project was difficult on multiple levels, and I wanted to start by identifying the main reasons why it’s more challenging for someone like my mother to learn to code—primarily due to the lack of free creative coding education resources. Most of the free resources to learn creative coding are unavailable in China. The p5.js tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are inaccessible in China because of internet censorship."
- project-a-2-2-qianqian: "I learned a lot from YouTube videos such as the "
- project-a-2-3-qianqian: ", but the more I watched coding tutorials online, the more I realized how difficult it is to find other womxn and people of color teaching coding, especially in Mandarin. I wanted to help other Chinese womxn relate to creative coding."
- project-a-2-4-qianqian: "I am working on opening up the video channels to other Chinese creatives who want to contribute to the educational resource together, like interviews and guest tutorials. If you are interested in teaching/talking about creative coding in Mandarin, HMU!"
- project-a-3-1-qianqian: "The "
- project-a-3-2-qianqian: " is my favorite feature. It makes web-based creative coding seamless."
- project-a-4-1-qianqian: "Learning to code in a second language was difficult and the lack of community made this process even harder. I hope to speak from my experience as a beginner and someone who once felt like an outsider to the creative coding and video tutorial world."
- project-a-4-2-qianqian: "I spend a lot of time researching the latest technology for my videos. In the end, I decided on using my phone to record and iMovie to edit. I hope to encourage others that it doesn’t take a lot of expensive gears to get started making instructional videos."
- project-a-4-3-qianqian: "Another issue I came across was my own fear of putting myself online. I first had to get over my anxiety of making mistakes in the videos or receiving negative comments online. Often womxn and people of color are targets for online harassment. I’m hoping to help set an example for other womxn and people of color that it’s ok to put yourselves online and strengthen your communities by sharing your knowledge. Eventually, we will be able to stop online harassment by creating strong diverse communities."
- project-a-5-1-qianqian: "I am very excited about "
- project-a-5-2-qianqian: " in LA."
-
- creator-from-phuong: "From Kyiv, Ukraine"
- project-a-1-1-phuong: "I'm a creative coder and designer, a "
- link-1-phuong: "Play Airi Flies!"
- link-2-phuong: "Code for AiriFlies on GitHub"
- link-3-phuong: "More info in Phuong Ngo's portfolio"
- project-a-1-2-phuong: " diversity scholarship recipient, and just a curious creature."
- project-a-1-3-phuong: "I was taking a course at the School of Machines in Berlin this summer called! \""
- project-a-1-4-phuong: ",\" mainly taught by "
- project-a-2-1-phuong: "I used p5.js to work on the visual part of the game. The animation sprites for Airi and the ghosts were drawn on an iPad app called "
- project-a-2-2-phuong: " and then integrated into "
- project-a-2-3-phuong: " code. I mainly used examples at p5.play as a reference."
- project-a-2-4-phuong: "For the endless scrolling background, I found a "
- p5-sketch-by-chjno-phuong: "p5 sketch by chjno"
- project-a-2-5-phuong: ". I set a condition so whenever the word \"pew\" or a mouse click was detected, the scrolling speed would change to make an illusion of Airi flying up. When the user does not do anything, the scrolling speed is negative, which makes it look like Airi is falling down."
- project-a-2-6-phuong: "For sound recognition, I used "
- project-a-2-7-phuong: " (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word \"pew\" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with "
- project-a-3-1-phuong: "I really love how easily you can create, manipulate, and delete HTML blocks and classes with the "
- project-a-3-2-phuong: " via "
- project-a-3-3-phuong: " etc. But my most favorite function is "
- project-a-3-4-phuong: ", since this is where you create magic."
- project-a-4-1-phuong: "There were a lot of challenges simply because p5.js was something new to me. I did not work much with JavaScript in general before. Reading documentation and searching for similar examples helped a lot."
- project-a-5-1-phuong: "Check out "
- school-of-machines-phuong: "School of Machines' courses"
- project-a-5-2-phuong: "! They try hard to connect the most creative people in the world and they do it well so far. ❤️"
-
- pronouns-male: "(he/him)"
- creator-from-chung: "From Baltimore, Maryland"
- link-1-casey-louise: "p5.js Shaders guide"
- link-2-casey-louise: "Glitch collection of p5.js shader examples"
- link-1-chung: "View Chillin'"
- link-2-chung: "Code for Chillin' on GitHub"
- link-3-chung: "More info in Dae In Chung's Portfolio"
- project-a-1-1-chung: "I am a graphic designer and a faculty member at Maryland Institute College of Art, where I mainly teach coding (with p5.js and Processing, of course) and motion graphics."
- project-a-1-2-chung: "I have been using "
- project-a-1-3-chung: " for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online."
- project-a-2-1-chung: "This summer, I gave myself a challenge of making typographic posters with coding, and this is one of the posters I made. I didn’t know until very recently that I could use motion sensor data with p5.js. I was also watching "
- dan-shiffman-matterjs-tutorial: "Dan Shiffman’s matter.js tutorial videos"
- project-a-2-2-chung: ", so I thought why not combine the two and practice what I was learning?"
- project-a-3-1-chung: "There are many things I love about p5.js such as the online community and beginner friendliness. What I really like right now is the "
- project-a-3-2-chung: ", with which I can not only work online for myself but also share URLs quickly in the present mode. For this project in particular, I had to do a lot of testing on my phone, and it was much easier and quicker than committing to GitHub."
- project-a-4-1-chung: "I had some troubles with handling font, alpha channel and z-depth in "
- project-a-4-2-chung: " mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of "
- project-a-4-3-chung: " and build a tool for myself."
- project-a-5-1-chung: "As mentioned above, if you want to render out frames and video files out of p5.js sketches, check out my "
- project-a-5-2-chung: " and let me know what you think."
-
- creator-from-casey-louise: "From New York, New York"
- project-a-1-1-casey-louise: "Casey: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces, physical and digital."
- project-a-1-2-casey-louise: "Louise: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces based on sensor technologies."
- project-a-1-3-casey-louise: "Casey: I started learning p5.js in 2018 in my first semester at ITP, though I had been dabbling in "
- project-a-1-4-casey-louise: " since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone."
- project-a-1-5-casey-louise: "Louise: I initially learned p5.js to make a website I was creating more playful. I’m a C# programmer, so this was a good segway into JavaScript for me."
- project-a-2-1-casey-louise: "Casey: I was putting off learning shaders for a long time, and I was also curious if I could use them in p5.js. Then I heard about a grant for open source, storytelling, and learning resource projects at ITP called "
- project-a-2-2-casey-louise: ". Since I wasn't finding much in the way of p5.js + shader documentation, I decided to figure out how they're implemented in p5.js and create a resource for others to learn. When I told Louise about the project, she was immediately excited about learning and teaching shaders in p5.js. She's been great about making sure the project is a learning resource and not just a collection of examples."
- project-a-3-1-casey-louise: "Casey: Does "
- project-a-3-2-casey-louise: " count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work."
- project-a-3-3-casey-louise: "Louise: My favorite feature is "
- project-a-3-4-casey-louise: " and "
- project-a-3-5-casey-louise: " for transformation of the coordinate system to make generative visuals."
- project-a-4-1-casey-louise: "Casey: The beginning of the project (figuring out how things work) was us reaching out to amazing people, asking questions, and asking for permission to use their examples in our project. "
- adam-ferris-repo-casey-louise: "Adam Ferriss' GitHub repo"
- project-a-4-2-casey-louise: " really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to "
- project-a-4-3-casey-louise: " and "
- project-a-4-4-casey-louise: " (who worked on the "
- webgl-casey-louise: "WebGL implementation in p5.js"
- project-a-4-5-casey-louise: "), and they were super helpful."
- project-a-4-6-casey-louise: "Louise: The learning curve was pretty steep for getting shaders into p5. Luckily, there were some very well-documented examples on GitHub by Adam Ferriss. Our aim was to do so in a way that a complete beginner can understand how to implement it, so it was as much a technical challenge as it was a challenge in teaching code to strangers and beginners. Here we drew inspiration from the way the "
- openframeworks-book-casey-louise: "openFrameworks book"
- project-a-4-7-casey-louise: " is written. A fun \"hey, it’s not hard and you can do it too\" approach is what we believe in."
- project-a-5-1-casey-louise: "Check out the "
- project-a-5-2-casey-louise: " to explore our peers' amazing grant projects!"
-
- pronouns-nonbinary: "(they/them)"
- creator-from-moon: "From Athens, Georgia"
- posters-by: "Posters By"
- project-a-1-1-moon: "Moon: I'm a graphic designer, visual artist, and design educator. This summer, I taught a graphic design course in the University of Georgia Cortona program in Italy, introducing some basics of p5.js. This fall, I am planning to teach and to study digital platforms at UGA."
- project-a-1-2-moon: "My former colleague, "
- project-a-1-3-moon: ", invited me to "
- project-a-1-4-moon: " in "
- pcd-la-moon: "LA in January 2019"
- project-a-1-5-moon: ". They helped me with the tools and logics of p5.js. It was an excellent teaching and learning experience."
- project-a-2-1-moon: "We followed basic tutorials, "
- codetrain-moon: "Daniel's videos on YouTube"
- project-a-2-2-moon: ", and "
- p5-reference-moon: "Reference on the p5.js website"
- project-a-2-3-moon: "."
- project-a-3-1-moon: "My favorite function is related to "
- project-a-3-2-moon: " and "
- project-a-3-3-moon: ": "
- project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
- project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
- project-a-5-1-moon: "Check out the "
- project-a-5-2-moon: " in Milan, Italy."
-
+ showcase-title: Showcase
+ showcase-intro1: 'Introducing Showcase, created by '
+ showcase-intro2: ' in 2019 and currently curated by '
+ showcase-intro3: >-
+ We're celebrating how people are using p5.js to make creative work,
+ learning, and open source more interesting and inclusive. Together, we make
+ community. During Summer 2019, we asked a few creators to share more about
+ how they've used p5.js through different projects and pieces.
+ showcase-intro4: >-
+ The Summer 2020 Showcase is now open for submissions, nominate someone's
+ p5.js work or your own to be featured here!
+ nominate-project: Nominate a Project
+ showcase-featuring: Featuring
+ project-tag-art: Art
+ project-tag-design: Design
+ project-tag-code: Code
+ project-tag-curriculum: Curriculum
+ project-tag-documentation: Documentation
+ project-tag-game: Game
+ project-tag-library: Library
+ project-tag-organizing: Organizing
+ project-tag-tool: Tool
+ project-tag-tutorial: Tutorial
+ project-roni: Programmed Plotter Drawings
+ credit-roni: Roni Cantor
+ description-roni: >-
+ Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a
+ plotter and pens.
+ project-phuong: Airi Flies
+ credit-phuong: Phuong Ngo
+ description-phuong: >-
+ In this game developed with p5.play, help Airi fly by saying PEW. Created to
+ encourage people to get out of their comfort zone and feel more confident
+ about themselves regardless of what they do and how they look or sound.
+ project-daein: Chillin'
+ credit-daein: Dae In Chung
+ description-daein: >-
+ An interactive typographic poster that uses a mobile device's motion sensor
+ with p5.js.
+ project-qianqian: Qtv
+ credit-qianqian: Qianqian Ye
+ description-qianqian: >-
+ A video channel with 1-minute videos in Mandarin about creative coding, art,
+ and technology, including p5.js tutorials for beginners. Available on
+ YouTube, Instagram, Bilibili, and TikTok.
+ project-casey-louise: p5.js Shaders
+ credit-casey-louise: 'Casey Conchinha, Louise Lessél'
+ description-casey-louise: 'A resource for learning the what, why, and how of using shaders in p5.js.'
+ project-moon-xin: Moving Responsive Posters
+ credit-moon-xin: 'Moon Jang, Xin Xin, and students'
+ description-moon-xin: >-
+ Browser-based moving posters that use graphical systems, transformation
+ methods, and p5.js to address the connotations of a word less than 8
+ letters. Designed by students for a graphic design course (Visual Narrative
+ Systems) at the University of Georgia.
+ created-by: Created By
+ pronouns-female: (she/her)
+ creator-from-roni-cantor: 'From Toronto, Canada'
+ project-links: Project Links
+ project-links-text-1-roni-cantor: Example sketch in p5.js Web Editor
+ project-links-text-2-roni-cantor: AxiDraw V3 demo video
+ project-q-1-1: What are you up to?
+ project-q-1-2: How did you get started with p5.js?
+ project-a-1-1-roni-cantor: >-
+ I just graduated from Ryerson University's New Media program. Coming from 4
+ years of coding and making robots, I decided to take a break and play with
+ some more traditional forms of art—while still coding and playing with
+ robots.
+ project-a-1-2-roni-cantor: 'I first started using p5.js at '
+ project-a-1-3-roni-cantor: '! After using '
+ project-a-1-4-roni-cantor: ' for many years, I wanted to try something new.'
+ project-q-2: How did you use p5.js in this project?
+ project-a-2-1-roni-cantor: >-
+ I used p5.js in this project to generate the sine wave and lerp (linear
+ interpolation) formulas and display the visuals in the
+ project-a-2-2-roni-cantor: >-
+ . I then used a feature in my code that exported my programmed graphic into
+ an
+ project-a-2-3-roni-cantor: ' file. I needed an SVG file to give to the plotter—an '
+ project-a-2-4-roni-cantor: >-
+ —so that it understood where to draw the lines that I programmed. I sent
+ this information to the plotter with a program called
+ project-a-2-5-roni-cantor: '!'
+ project-q-3: What's your favorite p5.js feature?
+ project-a-3-roni-cantor: ' because lines are fun and "lerp" is a fun word to say!'
+ project-q-4: >-
+ Did you face any challenges working on this project? If so, how did you
+ overcome them?
+ project-a-4-roni-cantor: >-
+ It was my first time using p5.js, Inkscape, and a plotter! I really
+ benefited from the people around me who had used p5 before, as well as
+ online guides and forums.
+ project-q-5: What's a cool thing we should check out?
+ project-a-5-roni-cantor: ' on Instagram—super cool analog plotter stuff.'
+ project-q-6: Where can people learn more about you?
+ project-a-6-roni-cantor: ' (Instagram)'
+ project-resources: Project Resources
+ creator-from-qianqian: 'Los Angeles, California'
+ interview-link-qianqian: Processing Foundation interview with Qianqian Ye
+ project-a-1-1-qianqian: I am a Chinese artist and designer based in Los Angeles.
+ project-a-1-2-qianqian: >-
+ My partner introduced me to p5.js, which I learned mainly by watching free
+ online video tutorials. My first p5.js project was drawing some shapes with
+ different colors.
+ project-a-2-1-qianqian: >-
+ This project started with an idea of teaching my mom, who lives in China and
+ doesn’t speak English, to code with p5.js. This project was difficult on
+ multiple levels, and I wanted to start by identifying the main reasons why
+ it’s more challenging for someone like my mother to learn to code—primarily
+ due to the lack of free creative coding education resources. Most of the
+ free resources to learn creative coding are unavailable in China. The p5.js
+ tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are
+ inaccessible in China because of internet censorship.
+ project-a-2-2-qianqian: 'I learned a lot from YouTube videos such as the '
+ project-a-2-3-qianqian: >-
+ , but the more I watched coding tutorials online, the more I realized how
+ difficult it is to find other womxn and people of color teaching coding,
+ especially in Mandarin. I wanted to help other Chinese womxn relate to
+ creative coding.
+ project-a-2-4-qianqian: >-
+ I am working on opening up the video channels to other Chinese creatives who
+ want to contribute to the educational resource together, like interviews and
+ guest tutorials. If you are interested in teaching/talking about creative
+ coding in Mandarin, HMU!
+ project-a-3-1-qianqian: 'The '
+ project-a-3-2-qianqian: ' is my favorite feature. It makes web-based creative coding seamless.'
+ project-a-4-1-qianqian: >-
+ Learning to code in a second language was difficult and the lack of
+ community made this process even harder. I hope to speak from my experience
+ as a beginner and someone who once felt like an outsider to the creative
+ coding and video tutorial world.
+ project-a-4-2-qianqian: >-
+ I spend a lot of time researching the latest technology for my videos. In
+ the end, I decided on using my phone to record and iMovie to edit. I hope to
+ encourage others that it doesn’t take a lot of expensive gears to get
+ started making instructional videos.
+ project-a-4-3-qianqian: >-
+ Another issue I came across was my own fear of putting myself online. I
+ first had to get over my anxiety of making mistakes in the videos or
+ receiving negative comments online. Often womxn and people of color are
+ targets for online harassment. I’m hoping to help set an example for other
+ womxn and people of color that it’s ok to put yourselves online and
+ strengthen your communities by sharing your knowledge. Eventually, we will
+ be able to stop online harassment by creating strong diverse communities.
+ project-a-5-1-qianqian: 'I am very excited about '
+ project-a-5-2-qianqian: ' in LA.'
+ creator-from-phuong: 'From Kyiv, Ukraine'
+ project-a-1-1-phuong: 'I''m a creative coder and designer, a '
+ link-1-phuong: Play Airi Flies!
+ link-2-phuong: Code for AiriFlies on GitHub
+ link-3-phuong: More info in Phuong Ngo's portfolio
+ project-a-1-2-phuong: ' diversity scholarship recipient, and just a curious creature.'
+ project-a-1-3-phuong: >-
+ I was taking a course at the School of Machines in Berlin this summer
+ called! "
+ project-a-1-4-phuong: '," mainly taught by '
+ project-a-2-1-phuong: >-
+ I used p5.js to work on the visual part of the game. The animation sprites
+ for Airi and the ghosts were drawn on an iPad app called
+ project-a-2-2-phuong: ' and then integrated into '
+ project-a-2-3-phuong: ' code. I mainly used examples at p5.play as a reference.'
+ project-a-2-4-phuong: 'For the endless scrolling background, I found a '
+ p5-sketch-by-chjno-phuong: p5 sketch by chjno
+ project-a-2-5-phuong: >-
+ . I set a condition so whenever the word "pew" or a mouse click was
+ detected, the scrolling speed would change to make an illusion of Airi
+ flying up. When the user does not do anything, the scrolling speed is
+ negative, which makes it look like Airi is falling down.
+ project-a-2-6-phuong: 'For sound recognition, I used '
+ project-a-2-7-phuong: ' (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word "pew" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with '
+ project-a-3-1-phuong: >-
+ I really love how easily you can create, manipulate, and delete HTML blocks
+ and classes with the
+ project-a-3-2-phuong: ' via '
+ project-a-3-3-phuong: ' etc. But my most favorite function is '
+ project-a-3-4-phuong: ', since this is where you create magic.'
+ project-a-4-1-phuong: >-
+ There were a lot of challenges simply because p5.js was something new to me.
+ I did not work much with JavaScript in general before. Reading documentation
+ and searching for similar examples helped a lot.
+ project-a-5-1-phuong: 'Check out '
+ school-of-machines-phuong: School of Machines' courses
+ project-a-5-2-phuong: >-
+ ! They try hard to connect the most creative people in the world and they do
+ it well so far. ❤️
+ pronouns-male: (he/him)
+ creator-from-chung: 'From Baltimore, Maryland'
+ link-1-casey-louise: p5.js Shaders guide
+ link-2-casey-louise: Glitch collection of p5.js shader examples
+ link-1-chung: View Chillin'
+ link-2-chung: Code for Chillin' on GitHub
+ link-3-chung: More info in Dae In Chung's Portfolio
+ project-a-1-1-chung: >-
+ I am a graphic designer and a faculty member at Maryland Institute College
+ of Art, where I mainly teach coding (with p5.js and Processing, of course)
+ and motion graphics.
+ project-a-1-2-chung: 'I have been using '
+ project-a-1-3-chung: ' for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online.'
+ project-a-2-1-chung: >-
+ This summer, I gave myself a challenge of making typographic posters with
+ coding, and this is one of the posters I made. I didn’t know until very
+ recently that I could use motion sensor data with p5.js. I was also watching
+ dan-shiffman-matterjs-tutorial: Dan Shiffman’s matter.js tutorial videos
+ project-a-2-2-chung: ', so I thought why not combine the two and practice what I was learning?'
+ project-a-3-1-chung: >-
+ There are many things I love about p5.js such as the online community and
+ beginner friendliness. What I really like right now is the
+ project-a-3-2-chung: >-
+ , with which I can not only work online for myself but also share URLs
+ quickly in the present mode. For this project in particular, I had to do a
+ lot of testing on my phone, and it was much easier and quicker than
+ committing to GitHub.
+ project-a-4-1-chung: 'I had some troubles with handling font, alpha channel and z-depth in '
+ project-a-4-2-chung: ' mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of '
+ project-a-4-3-chung: ' and build a tool for myself.'
+ project-a-5-1-chung: >-
+ As mentioned above, if you want to render out frames and video files out of
+ p5.js sketches, check out my
+ project-a-5-2-chung: ' and let me know what you think.'
+ creator-from-casey-louise: 'From New York, New York'
+ project-a-1-1-casey-louise: >-
+ Casey: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces, physical and digital.
+ project-a-1-2-casey-louise: >-
+ Louise: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces based on sensor technologies.
+ project-a-1-3-casey-louise: >-
+ Casey: I started learning p5.js in 2018 in my first semester at ITP, though
+ I had been dabbling in
+ project-a-1-4-casey-louise: ' since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.'
+ project-a-1-5-casey-louise: >-
+ Louise: I initially learned p5.js to make a website I was creating more
+ playful. I’m a C# programmer, so this was a good segway into JavaScript for
+ me.
+ project-a-2-1-casey-louise: >-
+ Casey: I was putting off learning shaders for a long time, and I was also
+ curious if I could use them in p5.js. Then I heard about a grant for open
+ source, storytelling, and learning resource projects at ITP called
+ project-a-2-2-casey-louise: >-
+ . Since I wasn't finding much in the way of p5.js + shader documentation, I
+ decided to figure out how they're implemented in p5.js and create a resource
+ for others to learn. When I told Louise about the project, she was
+ immediately excited about learning and teaching shaders in p5.js. She's been
+ great about making sure the project is a learning resource and not just a
+ collection of examples.
+ project-a-3-1-casey-louise: 'Casey: Does '
+ project-a-3-2-casey-louise: ' count as a feature? I also love having the ability to share my programs on the web so that people don''t have to install special software or come to NYC to see my work.'
+ project-a-3-3-casey-louise: 'Louise: My favorite feature is '
+ project-a-3-4-casey-louise: ' and '
+ project-a-3-5-casey-louise: ' for transformation of the coordinate system to make generative visuals.'
+ project-a-4-1-casey-louise: >-
+ Casey: The beginning of the project (figuring out how things work) was us
+ reaching out to amazing people, asking questions, and asking for permission
+ to use their examples in our project.
+ adam-ferris-repo-casey-louise: Adam Ferriss' GitHub repo
+ project-a-4-2-casey-louise: ' really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to '
+ project-a-4-3-casey-louise: ' and '
+ project-a-4-4-casey-louise: ' (who worked on the '
+ webgl-casey-louise: WebGL implementation in p5.js
+ project-a-4-5-casey-louise: '), and they were super helpful.'
+ project-a-4-6-casey-louise: >-
+ Louise: The learning curve was pretty steep for getting shaders into p5.
+ Luckily, there were some very well-documented examples on GitHub by Adam
+ Ferriss. Our aim was to do so in a way that a complete beginner can
+ understand how to implement it, so it was as much a technical challenge as
+ it was a challenge in teaching code to strangers and beginners. Here we drew
+ inspiration from the way the
+ openframeworks-book-casey-louise: openFrameworks book
+ project-a-4-7-casey-louise: ' is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.'
+ project-a-5-1-casey-louise: 'Check out the '
+ project-a-5-2-casey-louise: ' to explore our peers'' amazing grant projects!'
+ pronouns-nonbinary: (they/them)
+ creator-from-moon: 'From Athens, Georgia'
+ posters-by: Posters By
+ project-a-1-1-moon: >-
+ Moon: I'm a graphic designer, visual artist, and design educator. This
+ summer, I taught a graphic design course in the University of Georgia
+ Cortona program in Italy, introducing some basics of p5.js. This fall, I am
+ planning to teach and to study digital platforms at UGA.
+ project-a-1-2-moon: 'My former colleague, '
+ project-a-1-3-moon: ', invited me to '
+ project-a-1-4-moon: ' in '
+ pcd-la-moon: LA in January 2019
+ project-a-1-5-moon: >-
+ . They helped me with the tools and logics of p5.js. It was an excellent
+ teaching and learning experience.
+ project-a-2-1-moon: 'We followed basic tutorials, '
+ codetrain-moon: Daniel's videos on YouTube
+ project-a-2-2-moon: ', and '
+ p5-reference-moon: Reference on the p5.js website
+ project-a-2-3-moon: .
+ project-a-3-1-moon: 'My favorite function is related to '
+ project-a-3-2-moon: ' and '
+ project-a-3-3-moon: ': '
+ project-a-3-4-moon: >-
+ . I was able to use and to teach this tool to visualize various ideas about
+ time in motion.
+ project-a-4-1-moon: >-
+ It was challenging for me, a beginner, to understand the overall structure
+ of p5.js and how code works in general. I had to repeat the p5.js basics a
+ couple of times, and then I drew a chart to memorize and to teach the way I
+ understood the p5.js structure and code with strong constraints I set up. It
+ was an excellent teaching and learning experience.
+ project-a-5-1-moon: 'Check out the '
+ project-a-5-2-moon: ' in Milan, Italy.'
teach:
- teach-title2: "Teach"
- teach-intro1: "Every teaching has its own unique goals, messages, conditions, and environments. "
- teach-intro2: "By documenting and sharing p5 workshops, classes, and materials, we hope to better connect the p5.js learner and educator communities around the world. "
- teach-intro3: "Share or recommend"
- teach-intro4: "your own teaching experiences, too!"
- teach-heading: "p5 Teaching Resources"
- teach-search-filter: "Search Filter"
- teach-filter1: "Diversity & Inclusion : "
- teach-filter1-label1: "Gender"
- teach-filter1-label2: "Race & Ethnicity"
- teach-filter1-label3: "Language"
- teach-filter1-label4: "Neuro-Type"
- teach-filter1-label5: "Ability"
- teach-filter1-label6: "Class"
- teach-filter1-label7: "Religion"
- teach-filter1-label8: "(Sub-)Culture"
- teach-filter1-label9: "Political Opinion"
- teach-filter1-label10: "Age"
- teach-filter1-label11: "Skill Level"
- teach-filter1-label12: "Occupation"
- teach-filter1-label13: "#noCodeSnobs"
- teach-filter1-label14: "#newKidLove"
- teach-filter1-label15: "#unassumeCore"
- teach-filter1-label16: "#BlackLivesMatter"
-
- teach-filter2: "Venue : "
- teach-filter2-label1: "Africa"
- teach-filter2-label2: "Asia"
- teach-filter2-label3: "Europe"
- teach-filter2-label4: "North America"
- teach-filter2-label5: "Oceania"
- teach-filter2-label6: "South America"
- teach-filter2-label7: "Virtual-Online "
-
- teach-filter3: "Year : "
-
- teach-filter4: "Level of Difficulty : "
- teach-filter4-label1: "Elementary"
- teach-filter4-label2: "Intermediate"
- teach-filter4-label3: "Advanced"
-
- teach-case-subtitle1: "Venue & Date"
- teach-case-subtitle2: "Participants"
- teach-case-subtitle3: "Level of Difficulty"
- teach-case-subtitle4: "Goals"
- teach-case-subtitle5: "Method & Materials"
-
- teach-case1-title: "p5.js à l'Ubuntu Party!"
- teach-case1-lead-name: "Basile Pesin"
- teach-case1-content1: 2020 Ubuntu Party
- teach-case1-content1-1: "Cité; des Sciences et de l'Industrie, Paris, France"
- teach-case1-content2: "Any age, including children and parents, young and older adults."
- teach-case1-content3: "Advanced"
- teach-case1-content4: "To introduce a new public to programming through fun and compelling examples. "
- teach-case1-content5: "Method: in-person workshop, 1 hour per session, with different participant each times. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board."
- teach-case1-content5-1: "Materials: The exercises I gave where accessible through p5.js web-editor links available in "
-
- teach-case2-title: "Making The Thing that Makes the Thing: Exploring Generative Art & Design with p5.js"
- teach-case2-lead-name: "Priti Pandurangan & Ajith Ranka"
- teach-case2-content1: "National Institute of Design, Bangalore"
- teach-case2-content1-1: "2020 February 8, 2:30-4:00 PM"
- teach-case2-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case2-content3: "Priti: Intermediate & Ajith: Advanced"
- teach-case2-content4: "To explore generative art & design and recreate some classical works with p5.js. "
- teach-case2-content5: "Methods: In-person, collaborative, hands-on workshop."
- teach-case2-content5-1: "Materials: "
- teach-case2-content5-2: "course page "
- teach-case2-content5-3: "linking to sketches on the p5 editor, "
- teach-case2-content5-4: "interactive reference guide "
- teach-case2-content5-5: "to p5 basics"
-
- teach-case3-title: "CC Fest (Creative Coding Festival)"
- teach-case3-lead-name: "Saber"
- teach-case3-speech: "Love p5.js. It has meant so much to me, my students, and this community."
- teach-case3-content1: " New York, Los Angeles, San Francisco, Virtual-Online "
- teach-case3-content1-1: " Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual"
- teach-case3-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case3-content3: "Intermediate"
- teach-case3-content4: "To build a teacher and student community around p5 for middle and high school."
- teach-case3-content5: "A half-day of workshop led by volunteer teachers. We saw lots of different methods and materials. Most used some sort of slides or documentation, some live coding using an editor, with work time for participant to remix."
- teach-case3-content5-1: "CC Fest Lessons page"
- teach-case3-content5-2: " for teaching materials"
- teach-case3-content5-3: "More photos"
-
- teach-case4-title: "Taller Introducción a la Programación Creativa con p5.js"
- teach-case4-lead-name: "Aarón Montoya-Moraga"
- teach-case4-speech: "p5.js is my happy place "
- teach-case4-content1: " PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online "
- teach-case4-content1-1: " 2018 November 14, 3 hours"
- teach-case4-content2: "I had around 16 students in the workshop, and a team including 3 people from the PlusCode festival, and one person at the venue."
- teach-case4-content3: "Elementary, Intermediate, Advanced"
- teach-case4-content4: "Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish :)"
- teach-case4-content5: "I used the material on this "
- teach-case4-content5-1: "GitHub repo"
- teach-case4-content5-2: ", we used the p5.js web editor, we had a three hour long workshop"
- teach-case4-content5-3: "+CODE electronic art festival 2018, Argentina"
- teach-case4-content5-4: ", Medium"
-
- teach-case5-title: "Introduction to Generative Drawing"
- teach-case5-lead-name: "Adam Herst"
- teach-case5-speech: "My greatest source of uncertainty in developing the workshop was whether it was trying to teach art to programmers or to teach programming to artists."
- teach-case5-content1: "Inter/Access"
- teach-case5-content1-1: " (artist-run centre), Toronto, Ontario, Canada"
- teach-case5-content1-2: "In-person with a self-paced workbook for remote work"
- teach-case5-content1-3: " 2020 February 12, 7PM-9PM"
- teach-case5-content2: "15 artists"
- teach-case5-content3: "Elementary"
- teach-case5-content4: "To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form."
- teach-case5-content5: "A printed workbook with activities that used the p5.js web editor to show how translate an physical drawing into a digital drawing."
- teach-case5-content5-1: "Processing Community Day 2019: Generative Drawing at Inter/Access"
- teach-case5-content5-2: "Introduction to Generative Drawing Letter PDF"
- teach-case5-content5-3: "Introduction to Generative Drawing Booklet PDF"
-
- teach-case6-title: "Open Lecture, Creative Coding: 2020"
- teach-case6-lead-name: "Shunsuke Takawo"
- teach-case6-speech: "I love p5.js because it's so easy to read and write code in p5.js. Coding in your everyday life!"
- teach-case6-content1: " Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online "
- teach-case6-content1-1: " 2020 March 16-18, 1-7 PM"
- teach-case6-content2: "Students of Kyoto University of Art and Design, and anyone."
- teach-case6-content3: "Elementary"
- teach-case6-content4: "Making code as a tool for artistic expression."
- teach-case6-content5: "Dropbox Paper, p5.js web editor."
- teach-case6-content5-1: "Syllabus"
- teach-case6-content5-2: "Day 1"
- teach-case6-content5-3: "Day 2"
- teach-case6-content5-4: "Day 3"
- teach-case6-content5-5: ", YouTube"
-
- teach-case7-title: "Creative Coding for Static Graphics"
- teach-case7-lead-name: "Shunsuke Takawo"
- teach-case7-speech: "Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you to give it a try!"
- teach-case7-content1: " FabCafe MTRL, Tokyo, Japan"
- teach-case7-content1-1: " 2019 September 15, 4-7 PM "
- teach-case7-content2: "Anyone who wants to try coding in p5.js."
- teach-case7-content3: "Intermediate"
- teach-case7-content4: "To code from the graphic design's perspective."
- teach-case7-content5: "Dropbox Paper, p5.js web editor."
- teach-case7-content5-1: "Syllabus & Material"
-
- teach-case8-title: "Generative Typography"
- teach-case8-lead-name: "Dae In Chung"
- teach-case8-content1: " Baltimore, Maryland, USA & Virtual-Online "
- teach-case8-content1-1: " 2019 January 21 - May 08, every Wednesday, 4-10 PM"
- teach-case8-content2: "14 undergrads and grad students who had little to no experience in coding."
- teach-case8-content3: "Elementary"
- teach-case8-content4: "Experiment with typographic forms and structures through computation."
- teach-case8-content5: "Methods: online/offline lectures and critiques."
- teach-case8-content5-1: "Materials: p5js online editor, Github, youtube tutorials."
- teach-case8-content5-2: "Works of participants"
-
- teach-case9-title: "Machine Learning for the Web"
- teach-case9-lead-name: "Yining Shi"
- teach-case9-content1: " ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA"
- teach-case9-content1-1: "2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM"
- teach-case9-content2: "Students at Interactive Telecommunications Program, New York University. 16 people."
- teach-case9-content3: "Elementary, Intermediate"
- teach-case9-content4: "The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js."
- teach-case9-content5: "This class is a mix of lectures, coding sessions, group discussions, and presentations. I used "
- teach-case9-content5-1: "GitHub"
- teach-case9-content5-2: " to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes."
- teach-case9-content5-3: "Methods: online/offline lectures and critiques."
+ teach-title2: Teach
+ teach-intro1: >-
+ Every teaching has its own unique goals, messages, conditions, and
+ environments.
+ teach-intro2: >-
+ By documenting and sharing p5 workshops, classes, and materials, we hope to
+ better connect the p5.js learner and educator communities around the world.
+ teach-intro3: Share or recommend
+ teach-intro4: 'your own teaching experiences, too!'
+ teach-heading: p5 Teaching Resources
+ teach-search-filter: Search Filter
+ teach-filter1: 'Diversity & Inclusion : '
+ teach-filter1-label1: Gender
+ teach-filter1-label2: Race & Ethnicity
+ teach-filter1-label3: Language
+ teach-filter1-label4: Neuro-Type
+ teach-filter1-label5: Ability
+ teach-filter1-label6: Class
+ teach-filter1-label7: Religion
+ teach-filter1-label8: (Sub-)Culture
+ teach-filter1-label9: Political Opinion
+ teach-filter1-label10: Age
+ teach-filter1-label11: Skill Level
+ teach-filter1-label12: Occupation
+ teach-filter1-label13: '#noCodeSnobs'
+ teach-filter1-label14: '#newKidLove'
+ teach-filter1-label15: '#unassumeCore'
+ teach-filter1-label16: '#BlackLivesMatter'
+ teach-filter2: 'Venue : '
+ teach-filter2-label1: Africa
+ teach-filter2-label2: Asia
+ teach-filter2-label3: Europe
+ teach-filter2-label4: North America
+ teach-filter2-label5: Oceania
+ teach-filter2-label6: South America
+ teach-filter2-label7: 'Virtual-Online '
+ teach-filter3: 'Year : '
+ teach-filter4: 'Level of Difficulty : '
+ teach-filter4-label1: Elementary
+ teach-filter4-label2: Intermediate
+ teach-filter4-label3: Advanced
+ teach-case-subtitle1: Venue & Date
+ teach-case-subtitle2: Participants
+ teach-case-subtitle3: Level of Difficulty
+ teach-case-subtitle4: Goals
+ teach-case-subtitle5: Method & Materials
+ teach-case1-title: p5.js at Ubuntu Party!
+ teach-case1-lead-name: Basile Pesin
+ teach-case1-content1: '2020 Ubuntu Party '
+ teach-case1-content1-1: 'Cité des Sciences et de l''Industrie, Paris, France'
+ teach-case1-content2: 'Any age, including children and parents, young and older adults.'
+ teach-case1-content3: Advanced
+ teach-case1-content4: >-
+ To introduce a new public to programming through fun and compelling
+ examples.
+ teach-case1-content5: >-
+ Method: in-person workshop, 1 hour per session, with different participant
+ each times. The students were using (Ubuntu) machines with the p5.js web
+ editor. I was teaching using a video projector as well as a board.
+ teach-case1-content5-1: >-
+ Materials: The exercises I gave where accessible through p5.js web-editor
+ links available in
+ teach-case2-title: >-
+ Making The Thing that Makes the Thing: Exploring Generative Art & Design
+ with p5.js
+ teach-case2-lead-name: Priti Pandurangan & Ajith Ranka
+ teach-case2-content1: 'National Institute of Design, Bangalore'
+ teach-case2-content1-1: '2020 February 8, 2:30-4:00 PM'
+ teach-case2-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case2-content3: 'Priti: Intermediate & Ajith: Advanced'
+ teach-case2-content4: >-
+ To explore generative art & design and recreate some classical works
+ with p5.js.
+ teach-case2-content5: 'Methods: In-person, collaborative, hands-on workshop.'
+ teach-case2-content5-1: ''
+ teach-case2-content5-2: 'Course page '
+ teach-case2-content5-3: 'linking to sketches on the p5 editor, '
+ teach-case2-content5-4: 'interactive reference guide '
+ teach-case2-content5-5: to p5 basics
+ teach-case3-title: CC Fest (Creative Coding Festival)
+ teach-case3-lead-name: Saber
+ teach-case3-speech: 'Love p5.js. It has meant so much to me, my students, and this community.'
+ teach-case3-content1: ' New York, Los Angeles, San Francisco, Virtual-Online '
+ teach-case3-content1-1: ' Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual'
+ teach-case3-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case3-content3: Intermediate
+ teach-case3-content4: >-
+ To build a teacher and student community around p5 for middle and high
+ school.
+ teach-case3-content5: >-
+ A half-day of workshop led by volunteer teachers. We saw lots of different
+ methods and materials. Most used some sort of slides or documentation, some
+ live coding using an editor, with work time for participant to remix.
+ teach-case3-content5-1: CC Fest Lessons page
+ teach-case3-content5-2: ' for teaching materials'
+ teach-case3-content5-3: More photos
+ teach-case4-title: Introduction to Creative Programming with p5.js
+ teach-case4-lead-name: Aarón Montoya-Moraga
+ teach-case4-speech: 'p5.js is my happy place '
+ teach-case4-content1: ' PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online '
+ teach-case4-content1-1: ' 2018 November 14, 3 hours'
+ teach-case4-content2: >-
+ I had around 16 students in the workshop, and a team including 3 people from
+ the PlusCode festival, and one person at the venue.
+ teach-case4-content3: 'Elementary, Intermediate, Advanced'
+ teach-case4-content4: >-
+ Introduction to beginners and artists of graphic web programming and open
+ source, using p5.js, in Spanish :)
+ teach-case4-content5: 'I used the material on this '
+ teach-case4-content5-1: GitHub repo
+ teach-case4-content5-2: ', we used the p5.js web editor, we had a three hour long workshop'
+ teach-case4-content5-3: '+CODE electronic art festival 2018, Argentina'
+ teach-case4-content5-4: ', Medium'
+ teach-case5-title: Introduction to Generative Drawing
+ teach-case5-lead-name: Adam Herst
+ teach-case5-speech: >-
+ My greatest source of uncertainty in developing the workshop was whether it
+ was trying to teach art to programmers or to teach programming to artists.
+ teach-case5-content1: Inter/Access
+ teach-case5-content1-1: ' (artist-run centre), Toronto, Ontario, Canada'
+ teach-case5-content1-2: In-person with a self-paced workbook for remote work
+ teach-case5-content1-3: ' 2020 February 12, 7PM-9PM'
+ teach-case5-content2: 15 artists
+ teach-case5-content3: Elementary
+ teach-case5-content4: >-
+ To introduce p5.js to artists with little or no programming experience and
+ to suggest one way an analogue practice can migrate to a digital form.
+ teach-case5-content5: >-
+ A printed workbook with activities that used the p5.js web editor to show
+ how translate an physical drawing into a digital drawing.
+ teach-case5-content5-1: 'Processing Community Day 2019: Generative Drawing at Inter/Access'
+ teach-case5-content5-2: Introduction to Generative Drawing Letter PDF
+ teach-case5-content5-3: Introduction to Generative Drawing Booklet PDF
+ teach-case6-title: 'Open Lecture, Creative Coding: 2020'
+ teach-case6-lead-name: Shunsuke Takawo
+ teach-case6-speech: >-
+ I love p5.js because it's so easy to read and write code in p5.js. Coding in
+ your everyday life!
+ teach-case6-content1: ' Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online '
+ teach-case6-content1-1: ' 2020 March 16-18, 1-7 PM'
+ teach-case6-content2: 'Students of Kyoto University of Art and Design, and anyone.'
+ teach-case6-content3: Elementary
+ teach-case6-content4: Making code as a tool for artistic expression.
+ teach-case6-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case6-content5-1: Syllabus
+ teach-case6-content5-2: Day 1
+ teach-case6-content5-3: Day 2
+ teach-case6-content5-4: Day 3
+ teach-case6-content5-5: ', YouTube'
+ teach-case7-title: Creative Coding for Static Graphics
+ teach-case7-lead-name: Shunsuke Takawo
+ teach-case7-speech: >-
+ Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you
+ to give it a try!
+ teach-case7-content1: ' FabCafe MTRL, Tokyo, Japan'
+ teach-case7-content1-1: ' 2019 September 15, 4-7 PM '
+ teach-case7-content2: Anyone who wants to try coding in p5.js.
+ teach-case7-content3: Intermediate
+ teach-case7-content4: To code from the graphic design's perspective.
+ teach-case7-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case7-content5-1: Syllabus & Material
+ teach-case8-title: Generative Typography
+ teach-case8-lead-name: Dae In Chung
+ teach-case8-content1: ' Baltimore, Maryland, USA & Virtual-Online '
+ teach-case8-content1-1: ' 2019 January 21 - May 08, every Wednesday, 4-10 PM'
+ teach-case8-content2: 14 undergrads and grad students who had little to no experience in coding.
+ teach-case8-content3: Elementary
+ teach-case8-content4: Experiment with typographic forms and structures through computation.
+ teach-case8-content5: 'Methods: online/offline lectures and critiques.'
+ teach-case8-content5-1: 'Materials: p5js online editor, Github, youtube tutorials.'
+ teach-case8-content5-2: Works of participants
+ teach-case9-title: Machine Learning for the Web
+ teach-case9-lead-name: Yining Shi
+ teach-case9-content1: ' ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA'
+ teach-case9-content1-1: '2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM'
+ teach-case9-content2: >-
+ Students at Interactive Telecommunications Program, New York University. 16
+ people.
+ teach-case9-content3: 'Elementary, Intermediate'
+ teach-case9-content4: >-
+ The goal of this class is to learn and understand common machine learning
+ techniques and apply them to generate creative outputs in the browser using
+ ml5.js and p5.js.
+ teach-case9-content5: >-
+ This class is a mix of lectures, coding sessions, group discussions, and
+ presentations. I used
+ teach-case9-content5-1: GitHub
+ teach-case9-content5-2: ' to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes.'
+ teach-case9-content5-3: 'Methods: online/offline lectures and critiques.'
+ teach-case10-title: Introduction to p5.js and JavaScript
+ teach-case10-lead-name: Nico Reski
+ teach-case10-content1: ' Currently available as self-study at own pace with accompanying slides, linked below.'
+ teach-case10-content3: 'Beginner, Elementary'
+ teach-case10-content4: >-
+ Introduce learners (potentially with no coding experiences at all) to the
+ very basics of p5.js (and JavaScript), in order to encourage creative coding
+ and enable them to pursue own projects in a safe environment.
+ teach-case10-content5: >-
+ p5.js source code (for the introductory project), JavaScript source code
+ (illustrating some basic JavaScript functionalities), accompanying slides in
+ .pdf format, all hosted publicly on GitHub.
+ teach-case10-content5-1: Overview
+ teach-case10-content5-2: ' of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage.'
+ teach-case11-title: Digital Weaving & Physical Computing Workshop Series
+ teach-case11-lead-name: Qianqian Ye & Evelyn Masso
+ teach-case11-content1: ' Womens Center for Creative Work (WCCW), Los Angeles, CA, US'
+ teach-case11-content1-1: ' 2019 October 19 - November 02, every Saturday 3-6 PM'
+ teach-case11-content2: '15 women and non-binary artists, designer, makers, programers. '
+ teach-case11-content3: Elementary
+ teach-case11-content4: >-
+ Over the course of three workshops, we will draw and create patterns using
+ p5.js, an open-source graphical library; we will learn and apply
+ computational concepts to transform patterns and finally, we will bring a
+ weaving to life with electronic microcontrollers.
+ teach-case11-content5: 'Methods: small team session'
+ teach-case11-content5-1: >-
+ Materials: slides, p5.js web editor, pen and paper to draw pattern, physical
+ pattern weaving tool.
+ teach-case11-content5-2: 'Workshop Slide #1'
+ teach-case11-content5-3: 'Workshop Slide #2'
+ teach-case11-content5-4: Workshop Information
+ teach-case11-content5-5: ' on WCCW website.'
+ teach-case12-title: Signing Coders
+ teach-case12-lead-name: Taeyoon Choi
+ teach-case12-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case12-content1: ' WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea.'
+ teach-case12-content1-1: '5 Sessions, each 2~3 hours'
+ teach-case12-content2: Deaf and Hard of Hearing students age 10~50 who live in NYC.
+ teach-case12-content3: Elementary
+ teach-case12-content4: >-
+ To help Deaf and Hard of Hearing students learn about computer programming
+ through playful exercises. To make ASL tutorial of basic coding concepts.
+ teach-case12-content5: >-
+ We used p5.js Web editor and code examples on the website. We also used
+ dice, playing cards and various paper tools to help students learn about
+ coding concepts.
+ teach-case12-content5-1: Syllabus & Material
+ teach-case12-content5-2: More photos
+ teach-case13-title: Painting with Code
+ teach-case13-lead-name: Andreas Refsgaard
+ teach-case13-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case13-content1: ' Copenhagen, Denmark'
+ teach-case13-content1-1: '2020 February 22'
+ teach-case13-content2: A wide range of people.
+ teach-case13-content3: Intermediate
+ teach-case13-content4: >-
+ Get creatives, designers, artists and other people who don't typically use code introduced to p5.js.
+ teach-case13-content5: >-
+ Website, p5.js editor.
+ teach-case13-content5-1: Material
- teach-case10-title: "Introduction to p5.js and JavaScript"
- teach-case10-lead-name: "Nico Reski"
- teach-case10-content1: " Currently available as self-study at own pace with accompanying slides, linked below."
- teach-case10-content3: "Beginner, Elementary"
- teach-case10-content4: "Introduce learners (potentially with no coding experiences at all) to the very basics of p5.js (and JavaScript), in order to encourage creative coding and enable them to pursue own projects in a safe environment."
- teach-case10-content5: "p5.js source code (for the introductory project), JavaScript source code (illustrating some basic JavaScript functionalities), accompanying slides in .pdf format, all hosted publicly on GitHub. "
- teach-case10-content5-1: "Overview"
- teach-case10-content5-2: " of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage."
-
- teach-case11-title: "Digital Weaving & Physical Computing Workshop Series"
- teach-case11-lead-name: "Qianqian Ye & Evelyn Masso"
- teach-case11-content1: " Womens Center for Creative Work (WCCW), Los Angeles, CA, US"
- teach-case11-content1-1: " 2019 October 19 - November 02, every Saturday 3-6 PM"
- teach-case11-content2: "15 women and non-binary artists, designer, makers, programers. "
- teach-case11-content3: "Elementary"
- teach-case11-content4: "Over the course of three workshops, we will draw and create patterns using p5.js, an open-source graphical library; we will learn and apply computational concepts to transform patterns and finally, we will bring a weaving to life with electronic microcontrollers."
- teach-case11-content5: "Methods: small team session"
- teach-case11-content5-1: "Materials: slides, p5.js web editor, pen and paper to draw pattern, physical pattern weaving tool."
- teach-case11-content5-2: "Workshop Slide #1"
- teach-case11-content5-3: "Workshop Slide #2"
- teach-case11-content5-4: "Workshop Information"
- teach-case11-content5-5: " on WCCW website."
+ teach-case14-title: Smarter Home
+ teach-case14-lead-name: Lauren McCarthy
+ teach-case14-speech: >-
+ The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart homes of the future.
+ teach-case14-content1: ' Gwangju Cultural Foundation(GJCF), Gwangju, South Korea'
+ teach-case14-content1-1: '2020 April 19 - May 11'
+ teach-case14-content1-2: 'ZERO1 American Art Incubator(AAI)'
+ teach-case14-content2: '16 people (resident of Gwangju or surrounding areas)'
+ teach-case14-content3: 'Elementary & Intermediate'
+ teach-case14-content4: >-
+ To reimagine smart homes of the future, with such technologies as p5.js and ml5.js. Spending a lot of time talking about the increasing role technology is playing at home and in Korean society,
+ the workshop aimed to offer a vision of a smarter home driven by the participants' critical optimism for the future.
+ teach-case14-content5: >-
+ p5.js, p5 web editor, ml5.js, and installations.
+ teach-case14-content5-1: >-
+ 1) We set out to prototype the concept of a “smarter home”, trying to bring technology into personal space on our own terms.
+ teach-case14-content5-2: >-
+ 2) Breaking into four teams, each selected an issue to address through a room they would create within our larger home structure.
+ teach-case14-content5-3: >-
+ 3) We incorporated machine learning, audio processing, and computer vision techniques to track and respond to the presence of people.
+ teach-case14-content5-4: >-
+ 4) Together, these works make one installation, comprised of four interconnected smart rooms that each provoke discussion.
+ teach-case14-content5-5: 'More pictures'
+ teach-case15-title: Introduction to p5js
+ teach-case15-lead-name: Bérenger Recoules (a.k.a b2renger)
+ teach-case15-content1: >-
+ L'École de Design Nantes Atlantique, France
+ teach-case15-content1-1: Since 2018 and ongoing
+ teach-case15-content2: >-
+ Students from l'école de design Nantes Atlantique'
+ teach-case15-content3: Elementary
+ teach-case15-content4: >-
+ To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.)
+ teach-case15-content5: >-
+ GitHub Readme File
+ teach-case15-content5-1: ' : a text tutorial in French'
+ teach-case16-title: >-
+ 50+ Coding Club : My First Code Art with Handy(🖐) and Family
+ teach-case16-lead-name: Inhwa Yeom
+ teach-case16-speech: >-
+ This workshop was conducted in line with 'p5 for 50+' project, with supports from 2020 Processing Foundation fellowship program and Asia Culture Center (ACC).
+ teach-case16-content1: ' Asia Culture Center(ACC), Gwangju. Virtual & Online'
+ teach-case16-content1-1: '(In-Person) 2020 November 20 - 28, every Friday and Saturday; (Virtual-Online) Anytime from 2020 December on via YouTube videos'
+ teach-case16-content2: '8 people, composed of 6 older adults and their children'
+ teach-case16-content2-1: '1) Those who define themselves as older adults (age around 50 and older)'
+ teach-case16-content2-2: '2) People from any age groups who accompany a person of 1) '
+ teach-case16-content3: 'Elementary'
+ teach-case16-content4: >-
+ Addressing the digital literacy and rights of age 50+ population in a non-English-speaking country,
+ this workshop aimed to lower their physical, lingual, and emotional barriers to learning coding with smartphone-based p5.js editor.
+ teach-case16-content5: >-
+ p5for50+ web app
+ teach-case16-content5-1: >-
+ a smartphone-based web app, with p5.js web editor embedded in it. Created with the editor, the participants' p5 sketches were printed out and framed on-site, and distributed as their materialized outcomes.
+ teach-case16-content5-2: 'Curriculum'
+ teach-case16-content5-3: 'YouTube'
+ teach-case16-content5-4: 'More pictures'
- teach-case12-title: "Signing Coders"
- teach-case12-lead-name: "Taeyoon Choi"
- teach-case12-speech: "I'm working on a new series of coding class for Disabled students in South Korea. I'm researching about the pedagogy and translation. I plan to hold workshops in December 2020. The project is supported by the Open Society Foundation Human Rights Initiative and Korea Disability Arts & Culture Center."
- teach-case12-content1: " WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea."
- teach-case12-content1-1: "5 Sessions, each 2~3 hours"
- teach-case12-content2: "Deaf and Hard of Hearing students age 10~50 who live in NYC."
- teach-case12-content3: "Elementary"
- teach-case12-content4: "To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts."
- teach-case12-content5: "We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts."
- teach-case12-content5-1: "Syllabus & Material"
- teach-case12-content5-2: "More photos"
+ teach-case17-title: Programming Applied to Visual and Interactive Art
+ teach-case17-lead-name: Sebastián Zavatarelli
+ teach-case17-speech: >-
+ The course is part of the extension courses on the trans-departmental area of multimedia arts of National University of the Arts in Argentina.
+ teach-case17-content1: ' Buenos Aires, Argentina. Virtual & Online'
+ teach-case17-content1-1: '2020 September 15 - October 14 every Wednesday 6:30-9:00 PM'
+ teach-case17-content2: 'Around 10 people. Mostly women.'
+ teach-case17-content3: 'Elementary & Intermediate'
+ teach-case17-content4: >-
+ The course is intended for artists who want to start using current technological tools for the development of their works. It can also be used by those who want to get started in computer programming through a simple, visual, accessible and fun programming environment.
+ teach-case17-content5: >-
+ p5.js web editor. Online through Zoom platform and material uploaded in Moodle.
+ teach-case17-content5-1: 'More pictures'
diff --git a/src/data/es.yml b/src/data/es.yml
index 3bc8861914..9a2d62cc10 100644
--- a/src/data/es.yml
+++ b/src/data/es.yml
@@ -1,1060 +1,1914 @@
-Skip-To-Content: "Ir al contenido"
-Language-Settings: "Preferencias de idioma"
-Sidebar-Title: "Navegación del sitio"
-Home: "Inicio"
-Editor: "Editor"
-Download: "Descargar"
-Donate: "Donar"
-Start: "Empezar"
-Reference: "Referencia"
-Libraries: "Bibliotecas"
-Learn: "Aprender"
-Examples: "Ejemplos"
-Books: "Libros"
-Community: "Comunidad"
-Contribute: "Contribuir"
-Forum: "Foro"
-Showcase: "Showcase"
-
-footerxh1: "Créditos"
-footer1: "p5.js fue creado por "
-footer2: " y es desarrollado por una comunidad de colaboradores, con apoyo de "
-footer3: " y "
-footer4: "Identidad y diseño gráfico por "
-
-tagline1: "la diversión de Processing x la excentricidad de JavaScript"
-tagline2: "la simplicidad de Processing x la flexibilidad de JavaScript"
-tagline3: "la intuición de Processing x el poder de JavaScript"
-tagline4: "la creatividad de Processing x el dinamismo de JavaScript"
-tagline5: "la comunidad de Processing x la comunidad de JavaScript"
-tagline6: "la comunidad de Processing x la comunidad de JavaScript"
-tagline7: "La comunidad de p5.jS se solidariza con Black Lives Matter."
-
+Skip-To-Content: Ir al contenido
+Language-Settings: Preferencias de idioma
+Sidebar-Title: Navegación del sitio
+Home: Inicio
+Editor: Editor
+Download: Descargar
+Donate: Donar
+Start: Empezar
+Reference: Referencia
+Libraries: Bibliotecas
+Learn: Aprender
+Examples: Ejemplos
+Books: Libros
+Community: Comunidad
+Contribute: Contribuir
+Forum: Foro
+Showcase: Showcase
+footerxh1: Créditos
+footer1: 'p5.js actualmente está dirigido por '
+footer2: y fue creado por
+footer3: ' p5.js es desarrollado por una comunidad de colaboradores, con apoyo de '
+footer4: ' y '
+footer5: 'Identidad y diseño gráfico por '
+tagline1: la diversión de Processing x la excentricidad de JavaScript
+tagline2: la simplicidad de Processing x la flexibilidad de JavaScript
+tagline3: la intuición de Processing x el poder de JavaScript
+tagline4: la creatividad de Processing x el dinamismo de JavaScript
+tagline5: la comunidad de Processing x la comunidad de JavaScript
+tagline6: la comunidad de Processing x la comunidad de JavaScript
+tagline7: La comunidad de p5.jS se solidariza con Black Lives Matter.
home:
- start-creating: "¡Empieza a crear con el Editor de p5!"
- p1xh1: "¡Hola!"
- p1x1: "¡p5.js es una biblioteca de JavaScript para la programación creativa, que busca hacer que programar sea accesible e inclusivo para artistas, diseñadores, educadores, principiantes y cualquier otra persona! p5.js es gratuito y de código abierto porque creemos que el software y las herramientas para aprenderlo deben ser accesibles para todos."
- p1x2: "Usando la metáfora de bosquejear, p5.js tiene un conjunto completo de funcionalidades para dibujar. Sin embargo, no estás limitado solo a dibujar en tu lienzo. Puedes tomar toda la página del navegador como tu bosquejo, incluyendo los objetos HTML5 para texto, entrada, video, cámara web y sonido."
- p2xh2: "Comunidad"
- p2x1: "Somos una comunidad de, y en solidaridad con, personas de todas las identidades y expresiones de género, orientación sexual, raza, etnia, idioma, tipo neurológico, tamaño, competencia, clase, religión, cultura, subcultura, opinión política, edad, nivel de habilidad, ocupación y antecedentes. Sabemos que no todas las personas tienen el tiempo, los medios financieros o la capacidad para participar activamente, pero reconocemos y alentamos cualquier tipo participación. Facilitamos y fomentamos el acceso y el empoderamiento. Todos estamos aprendiendo."
- p2x2: "p5.js es una interpretación "
- p2x3: " para la web. Realizamos eventos y operamos con el apoyo de "
- p2x4: "."
- p2x5: "Conoce más sobre "
- p2x6: "nuestra comunidad"
- p2x7: "."
-
- p3xh2: "Empezar"
- p3xp1: "Crea tu primer bosquejo en el "
- p3xp2: ". Aprende más sobre cómo dibujar con p5.js en la "
- p3xp3: "página de empezar"
- p3xp4: " y sobre todo lo que puedes hacer en la "
- p3xp5: "referencia"
- p3xp6: "."
-
- p4xh2: "Participa"
- p4xp1: "Existen muchas formas de contribuir a p5.js:"
- p4xp2: "Opciones para participar"
- p4xp3: "¡Comparte algo que hayas creado!"
- p4xp4: "Imparte un taller o una clase."
- p4xp5: "Organiza una reunión."
- p4xp6: "Contribuye al código fuente."
-
- sketch_credits: "Sketch Credits"
- sketch_info: "Hunminjeongeum2020 created by Seonghyeon Kim"
-
+ start-creating: ¡Empieza a crear con el Editor de p5!
+ p1xh1: ¡Hola!
+ p1x1: >-
+ ¡p5.js es una biblioteca de JavaScript para la programación creativa, que
+ busca hacer que programar sea accesible e inclusivo para artistas,
+ diseñadores, educadores, principiantes y cualquier otra persona! p5.js es
+ gratuito y de código abierto porque creemos que el software y las
+ herramientas para aprenderlo deben ser accesibles para todos.
+ p1x2: >-
+ Usando la metáfora de bosquejear, p5.js tiene un conjunto completo de
+ funcionalidades para dibujar. Sin embargo, no estás limitado solo a dibujar
+ en tu lienzo. Puedes tomar toda la página del navegador como tu bosquejo,
+ incluyendo los objetos HTML5 para texto, entrada, video, cámara web y
+ sonido.
+ p2xh2: Comunidad
+ p2x1: >-
+ Somos una comunidad de, y en solidaridad con, personas de todas las
+ identidades y expresiones de género, orientación sexual, raza, etnia,
+ idioma, tipo neurológico, tamaño, competencia, clase, religión, cultura,
+ subcultura, opinión política, edad, nivel de habilidad, ocupación y
+ antecedentes. Sabemos que no todas las personas tienen el tiempo, los medios
+ financieros o la capacidad para participar activamente, pero reconocemos y
+ alentamos cualquier tipo participación. Facilitamos y fomentamos el acceso y
+ el empoderamiento. Todos estamos aprendiendo.
+ p2x2: 'p5.js es una interpretación '
+ p2x3: ' para la web. Realizamos eventos y operamos con el apoyo de '
+ p2x4: .
+ p2x5: 'Conoce más sobre '
+ p2x6: nuestra comunidad
+ p2x7: .
+ p3xh2: Empezar
+ p3xp1: 'Crea tu primer bosquejo en el '
+ p3xp2: '. Aprende más sobre cómo dibujar con p5.js en la '
+ p3xp3: página de empezar
+ p3xp4: ' y sobre todo lo que puedes hacer en la '
+ p3xp5: referencia
+ p3xp6: .
+ p4xh2: Participa
+ p4xp1: 'Existen muchas formas de contribuir a p5.js:'
+ p4xp2: Opciones para participar
+ p4xp3: ¡Comparte algo que hayas creado!
+ p4xp4: Imparte un taller o una clase.
+ p4xp5: Organiza una reunión.
+ p4xp6: Contribuye al código fuente.
+ sketch_credits: Sketch Credits
+ sketch_info: Hunminjeongeum2020 created by Seonghyeon Kim
copyright:
- copyright-title: "Información de Copyright"
- copyright1: "La biblioteca p5.js es software libre; puedes redistribuirla y/o modificarla según los términos de la "
- copyright2: " publicada por la Free Software Foundation, versión 2.1."
- copyright3: "La Referencia del lenguaje se encuentra bajo una licencia "
- copyright4: " que permite reusar este contenido para propósitos no-comerciales si se otorga el crédito correspondiente."
-
+ copyright-title: Información de Copyright
+ copyright1: >-
+ La biblioteca p5.js es software libre; puedes redistribuirla y/o modificarla
+ según los términos de la
+ copyright2: ' publicada por la Free Software Foundation, versión 2.1.'
+ copyright3: 'La Referencia del lenguaje se encuentra bajo una licencia '
+ copyright4: ' que permite reusar este contenido para propósitos no-comerciales si se otorga el crédito correspondiente.'
get started:
- get-started-title: "Empezar"
- get-started1: "Esta página te guía para configurar un proyecto p5.js y crear tu primer bosquejo."
- get-started2: "La forma más fácil de comenzar es usando el "
- get-started3: "editor p5.js"
- get-started4: ", puedes abrir el editor web y dirigirte a la sección "
- get-started5: "tu primer bosquejo"
- get-started6: ". Si deseas trabajar en la versión de escritorio de p5.js, puedes ir a las "
- get-started7: "instrucciones de descarga"
- settingUp-title: "Configura p5.js con un editor en tu computadora personal"
- download-title: "Descarga una copia de la biblioteca p5.js"
- hosted-title: "Utiliza una versión alojada de la biblioteca p5.js"
- download1: "La manera más simple de empezar es usando el ejemplo en blanco incluido en"
- download2: "p5.js completo"
- download3: "disponible en el sitio."
- download4: "Si revisas el archivo index.html, te darás cuenta que tiene un enlace al archivo p5.js. Si estás buscando usar la versión reducida (comprimida para que las páginas carguen más rápidamente), cambia el enlace a p5.min.js."
- download5: "De forma alternativa, puedes enlazar a un archivo p5.js alojado en línea. Todas las versiones de p5.js están almacenadas en un CDN (Content Delivery Network). Puedes ver un historial de estas versiones aquí: "
- download6: ". En este caso, puedes cambiar el enlace a: "
- download7: "Una página HTML de ejemplo podría verse así:"
- environment-title: "Ambiente"
- environment1: "Puedes usar el "
- environmentlink: "https://es.wikipedia.org/wiki/Editor_de_codigo_fuente"
- environment2: " editor de código "
- environment3: "que prefieras. Las instrucciones para usar y configurar "
- environment4: " están incluidas a continuación, otras buenas opciones de editores incluyen "
- environment5: " y "
- environment6: "Si estás utilizando un lector de pantalla y no usas el editor de p5, te recomendamos usar "
- environment7: " o "
- environment8: "Abre Sublime. Despliega el menú File (archivo) y elige Open (abrir) ... y selecciona el directorio donde se encuentran tus archivos html y js. En la barra lateral izquierda, podrás encontrar el nombre del directorio en la parte superior, y a continuación una lista con los archivos contenidos en el directorio."
- environment9: "Haz click en tu archivo sketch.js y éste se abrirá a la derecha de tu pantalla, donde podrás editarlo. "
- environment10: "el código de inicio de p5 en el editor sublime."
- environment11: "Abre el archivo index.html en tu navegador haciendo doble click en él o escribiendo:"
- environment12: "file:///la/ubicacion/de/tu/archivo/html"
- environment13: " en la barra de direcciones de tu navegador para ver tu bosquejo."
- your-first-sketch-title: "Tu primer bosquejo"
- your-first-sketch-intro1: "En el "
- your-first-sketch-intro2: "https://editor.p5js.org/"
- your-first-sketch-intro3: "editor web p5.js"
- your-first-sketch-intro4: " vas encontrar el siguiente código:"
- your-first-sketch1: "Despúes de "
- your-first-sketch2: " incluye esta línea de código: "
- your-first-sketch3: "Ahora tu código debe estar así: "
- your-first-sketch4: "La línea que acabas de agreagar dibuja una elipse, con su centro a 50 píxeles del borde izquierdo y 50 píxeles del borde superior del bosquejo, con un ancho y un alto de 80 píxeles."
- your-first-sketch5: "¡En el editor presiona play para ejecutar el código!"
- your-first-sketch6: "Si estas utilizando un lector de pantalla, tienes que activar las salidas accesibles en el editor, fuera del editor tienes que agregar la biblioteca de accesibilidad a tu html. Para aprender más visita el "
- your-first-sketch7: " tutorial usando p5 con un lector de pantalla"
- your-first-sketch8: "Si escribiste todo correctamente, esto aparecerá en tu ventana de visualización:"
- your-first-sketch9: "canvas tiene un circulo de ancho y alto 50 en la posición 80 x y 80 ye"
- your-first-sketch10: "Si nada aparece, el editor puede estar teniendo problemas entendiendo lo que escribiste. Si esto sucede, asegúrate de haber copiado el ejemplo de código tal y como está: los números deben estar separados por comas y contenidos entre paréntesis, la línea debe terminar con punto y coma, y la palabra \"ellipse\" debe estar escrita como en inglés."
- your-first-sketch11: "Una de las cosas más difíciles de comenzar a programar es que debes ser muy específicx con la sintaxis. El navegador no siempre es lo suficientemente inteligente como para saber lo que quieres decir, y puede ser bastante exigente con respecto a la ubicación de la puntuación. Ya te acostrumbrarás, sólo toma un poco de práctica. En la parte inferior izquierda del editor vas encontrar la sección de consola. Aquí, encontrarás mensajes del editor con detalles de cualquier error que se encuentre."
- your-first-sketch12: "Ahora, vamos a crear un bosquejo que es un poco más interesante. Modica el ejemplo anterior para probar lo siguiente:"
- your-first-sketch13: "Este programa crea un canvas que es de 400 píxeles de ancho y 400 píxeles de alto, y luego empieza a dibujar círculos blancos en la posición del ratón. Cuando algún botón del ratón es presionado, el color del círculo cambia a negro. Ejecuta el código, mueve el cursor, y has click para experimentarlo."
- your-first-sketch14: "canvas tiene múltiples círculos dibujados que siguen los movimientos del cursor"
- first-sketch-heading1: "Bloque de código con elipse"
- first-sketch-heading2: "Nota para usuarios de lectores de pantalla"
- first-sketch-heading3: "Bloque de código con Interacción"
- what-next-title: "¿Qué viene después?"
- learn1: "Visita las páginas "
- learn2: "aprender"
- learn3: " y "
- learn4: "ejemplos"
- learn5: " para conocer la biblioteca."
- learn6: "Mira los video tutoriales de "
- learn7: "The Coding Train"
- learn8: " y "
- learn9: "Kadenze"
- learn10: "."
- reference1: "Visita la "
- reference2: " referencia"
- reference3: " para explorar la documentación completa."
- learn11: "Si deseas utilizar p5 con un lector de pantalla, visita el "
- learn12: "tutorial p5 con un lector de pantalla"
- processing-transition1: "Si has usado Processing en el pasado, lee el "
- processing-transition2: "https://github.com/processing/p5.js/wiki/Processing-transition"
- processing-transition3: "tutorial de transición desde Processing"
- processing-transition4: " para aprender cómo convertir programas de Processing a p5.js, y cuáles son las principales diferencias entre estos."
- book1: "Partes de este tutorial fueron adaptadas de \"Getting Started with p5.js\" por Lauren McCarthy, Casey Reas y Ben Fry, O'Reilly / Make 2015. Copyright © 2015. Todos los derechos reservados. Última modificación en la Conferencia de Contribuyentes p5.js 2019."
-
+ get-started-title: Empezar
+ get-started1: >-
+ Esta página te guía para configurar un proyecto p5.js y crear tu primer
+ bosquejo.
+ get-started2: 'La forma más fácil de comenzar es usando el '
+ get-started3: editor p5.js
+ get-started4: ', puedes abrir el editor web y dirigirte a la sección '
+ get-started5: tu primer bosquejo
+ get-started6: '. Si deseas trabajar en la versión de escritorio de p5.js, puedes ir a las '
+ get-started7: instrucciones de descarga
+ get-started-button: Copy
+ settingUp-title: Configura p5.js con un editor en tu computadora personal
+ download-title: Descarga una copia de la biblioteca p5.js
+ hosted-title: Utiliza una versión alojada de la biblioteca p5.js
+ download1: La manera más simple de empezar es usando el ejemplo en blanco incluido en
+ download2: p5.js completo
+ download3: disponible en el sitio.
+ download8: 'After download, you need to set up a local server. See instructions '
+ download9: here
+ download10: >-
+ . Run your local server within the downloaded folder and on your browser, go
+ to
+ download11: 'http://localhost:{your-port-num}/empty-example'
+ download4: >-
+ Si revisas el archivo index.html, te darás cuenta que tiene un enlace al
+ archivo p5.js. Si estás buscando usar la versión reducida (comprimida para
+ que las páginas carguen más rápidamente), cambia el enlace a p5.min.js.
+ download5: >-
+ De forma alternativa, puedes enlazar a un archivo p5.js alojado en línea.
+ Todas las versiones de p5.js están almacenadas en un CDN (Content Delivery
+ Network). Puedes ver un historial de estas versiones aquí:
+ download6: '. En este caso, puedes cambiar el enlace a: '
+ download7: 'Una página HTML de ejemplo podría verse así:'
+ environment-title: Ambiente
+ environment1: 'Puedes usar el '
+ environmentlink: 'https://es.wikipedia.org/wiki/Editor_de_codigo_fuente'
+ environment2: ' editor de código '
+ environment3: 'que prefieras. Las instrucciones para usar y configurar '
+ environment4: ' están incluidas a continuación, otras buenas opciones de editores incluyen '
+ environment5: ' y '
+ environment6: >-
+ Si estás utilizando un lector de pantalla y no usas el editor de p5, te
+ recomendamos usar
+ environment7: ' o '
+ environment8: >-
+ Abre Sublime. Despliega el menú File (archivo) y elige Open (abrir) ... y
+ selecciona el directorio donde se encuentran tus archivos html y js. En la
+ barra lateral izquierda, podrás encontrar el nombre del directorio en la
+ parte superior, y a continuación una lista con los archivos contenidos en el
+ directorio.
+ environment9: >-
+ Haz click en tu archivo sketch.js y éste se abrirá a la derecha de tu
+ pantalla, donde podrás editarlo.
+ environment10: el código de inicio de p5 en el editor sublime.
+ environment11: >-
+ Abre el archivo index.html en tu navegador haciendo doble click en él o
+ escribiendo:
+ environment12: 'file:///la/ubicacion/de/tu/archivo/html'
+ environment14: ' (or '
+ environment15: 'http://localhost:{your-port-num}/empty-example'
+ environment16: ' if you are using a local server)'
+ environment13: ' en la barra de direcciones de tu navegador para ver tu bosquejo.'
+ your-first-sketch-title: Tu primer bosquejo
+ your-first-sketch-intro1: 'En el '
+ your-first-sketch-intro2: 'https://editor.p5js.org/'
+ your-first-sketch-intro3: editor web p5.js
+ your-first-sketch-intro4: ' vas encontrar el siguiente código:'
+ your-first-sketch1: 'Despúes de '
+ your-first-sketch2: ' incluye esta línea de código: '
+ your-first-sketch3: 'Ahora tu código debe estar así: '
+ your-first-sketch4: >-
+ La línea que acabas de agreagar dibuja una elipse, con su centro a 50
+ píxeles del borde izquierdo y 50 píxeles del borde superior del bosquejo,
+ con un ancho y un alto de 80 píxeles.
+ your-first-sketch5: ¡En el editor presiona play para ejecutar el código!
+ your-first-sketch6: >-
+ Si estas utilizando un lector de pantalla, tienes que activar las salidas
+ accesibles en el editor, fuera del editor tienes que agregar la biblioteca
+ de accesibilidad a tu html. Para aprender más visita el
+ your-first-sketch7: ' tutorial usando p5 con un lector de pantalla'
+ your-first-sketch8: >-
+ Si escribiste todo correctamente, esto aparecerá en tu ventana de
+ visualización:
+ your-first-sketch9: canvas tiene un circulo de ancho y alto 50 en la posición 80 x y 80 ye
+ your-first-sketch10: >-
+ Si nada aparece, el editor puede estar teniendo problemas entendiendo lo que
+ escribiste. Si esto sucede, asegúrate de haber copiado el ejemplo de código
+ tal y como está: los números deben estar separados por comas y contenidos
+ entre paréntesis, la línea debe terminar con punto y coma, y la palabra
+ "ellipse" debe estar escrita como en inglés.
+ your-first-sketch11: >-
+ Una de las cosas más difíciles de comenzar a programar es que debes ser muy
+ específicx con la sintaxis. El navegador no siempre es lo suficientemente
+ inteligente como para saber lo que quieres decir, y puede ser bastante
+ exigente con respecto a la ubicación de la puntuación. Ya te acostrumbrarás,
+ sólo toma un poco de práctica. En la parte inferior izquierda del editor vas
+ encontrar la sección de consola. Aquí, encontrarás mensajes del editor con
+ detalles de cualquier error que se encuentre.
+ your-first-sketch12: >-
+ Ahora, vamos a crear un bosquejo que es un poco más interesante. Modica el
+ ejemplo anterior para probar lo siguiente:
+ your-first-sketch13: >-
+ Este programa crea un canvas que es de 400 píxeles de ancho y 400 píxeles de
+ alto, y luego empieza a dibujar círculos blancos en la posición del ratón.
+ Cuando algún botón del ratón es presionado, el color del círculo cambia a
+ negro. Ejecuta el código, mueve el cursor, y has click para experimentarlo.
+ your-first-sketch14: >-
+ canvas tiene múltiples círculos dibujados que siguen los movimientos del
+ cursor
+ first-sketch-heading1: Bloque de código con elipse
+ first-sketch-heading2: Nota para usuarios de lectores de pantalla
+ first-sketch-heading3: Bloque de código con Interacción
+ what-next-title: ¿Qué viene después?
+ learn1: 'Visita las páginas '
+ learn2: aprender
+ learn3: ' y '
+ learn4: ejemplos
+ learn5: ' para conocer la biblioteca.'
+ learn6: 'Mira los video tutoriales de '
+ learn7: The Coding Train
+ learn8: ' y '
+ learn9: Kadenze
+ learn10: .
+ reference1: 'Visita la '
+ reference2: ' referencia'
+ reference3: ' para explorar la documentación completa.'
+ learn11: 'Si deseas utilizar p5 con un lector de pantalla, visita el '
+ learn12: tutorial p5 con un lector de pantalla
+ processing-transition1: 'Si has usado Processing en el pasado, lee el '
+ processing-transition2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ processing-transition3: tutorial de transición desde Processing
+ processing-transition4: ' para aprender cómo convertir programas de Processing a p5.js, y cuáles son las principales diferencias entre estos.'
+ book1: >-
+ Partes de este tutorial fueron adaptadas de "Getting Started with p5.js" por
+ Lauren McCarthy, Casey Reas y Ben Fry, O'Reilly / Make 2015. Copyright ©
+ 2015. Todos los derechos reservados. Última modificación en la Conferencia
+ de Contribuyentes p5.js 2019.
download:
- Download: "Descargar"
- download-intro: "¡Bienvenidos! Aunque esta página se titula \"Descargar\", en realidad contiene una colección de enlaces para descargar la biblioteca o comenzar a trabajar en línea. Hemos tratado de ordenar cosas desde lo que un principiante podría desear explorar primero, a los recursos que los programadores más experimentados pueden estar buscando."
- editor-title: "Editor"
- p5.js-editor-intro: "Este enlace te redirige al Editor p5.js en línea para que puedas comenzar a usar p5.js de inmediato."
- p5.js-editor: "Editor de p5.js"
- editor-includes: "Empieza a programar usando el Editor de p5.js, ¡no requiere instalación!"
- complete-library-title: "Biblioteca completa"
- complete-library-intro1: "Esta es una descarga contiene el archivo de la biblioteca p5.js, el complemento p5.sound y un proyecto de ejemplo. No contiene un editor. Explora "
- complete-library-intro2: "Empezar"
- complete-library-intro3: " para aprender cómo crear un proyecto de p5.js."
- p5.js-complete: "p5.js completo"
- includes-1: "Incluye:"
- includes-2: "p5.js, p5.sound.js y un proyecto de ejemplo"
- includes-3: "Versión "
- single-files-title: "Archivos por separado"
- single-files-intro: "Estas son descargas o enlaces al archivo de biblioteca p5.js. No incluyen contenidos adicionales."
- single-file: "Archivo: "
- p5.js-uncompressed: " versión completa sin compresión"
- compressed: "versión comprimida"
- link: "Enlace: "
- statically-hosted-file: "archivo almacenado estáticamente"
- etc-title: "Recursos de GitHub"
- older-releases: "Versiones antiguas / bitácora de cambios "
- github-repository: "Repositorio de Código (GitHub)"
- report-bugs: "Reporta errores "
- supported-browsers: "Navegadores soportados "
-
- support-title: "¡Apoya a p5.js!"
- support-options: "Opciones de apoyo"
- support-1: "p5.js es un software gratuito y de código abierto. Queremos hacer nuestra comunidad lo más abierta e inclusiva posible. Puedes apoyar nuestro trabajo "
- support-2: "haciéndote miembro"
- support-3: " de la Processing Foundation como un individuo, un estudio, o una educación institucional. También puedes "
- support-4: "realizar una donación"
- support-5: " sin convertirte en miembro."
- support-6: "Individuo"
- support-7: "25 USD"
- support-8: "Estudio"
- support-9: "250 USD"
- support-10: "Institución educativa"
- support-11: "500 USD o 5 USD por estudiante"
- support-12: "Tu membresía apoya el desarrollo de software (de p5.js, Processing, Processing.py, Processing para Android y dispositivos ARM, material educativo como códigos de ejemplo y tutoriales, "
- support-13: "becarios"
- support-14: ", y "
- support-15: "eventos para la comunidad"
- support-16: ". ¡Necesitamos tu ayuda!"
- support-17: "Conferencia de contribuyentes de p5.js en el CMU STUDIO for Creative Inquiry en Pittsburgh (crédito de imagen: Taeyoon Choi)"
- support-18: "Saskia Freeke, becaria Processing, organiza talleres Code Liberation x Processing en Londres (crédito de imagen: Code Liberation Foundation)"
- support-19: "Conferencia Learning to Teach, Teaching to Learn en conjunto con SFPC (crédito de imagen: Kira Simon-Kennedy)"
- support-20: "Taller de Cassie Tarakajian, becaria de Processing Foundation, en Code Art Miami (crédito de imagen: Christian Arévalo Photography)"
- support-21: "Taeyoon Choi y un intérprete de señas en el taller Signing Coders de p5.js (crédito de imagen: Taeyoon Choi)"
- support-22: "Lanzamiento de Google Summer of Code (crédito de imagen: Taeyoon Choi)"
- support-23: "Cassie Tarakajian, becaria de Processing Foundation, realiza un taller en Code Art Miami (crédito de imagen: Christian Arévalo Photography)"
- support-24: "Luisa Pereira y Yeseul Song ayudan en la realización de un taller de p5.js basado en lenguaje de señas, enseñado por Taeyoon Choi (crédito de imagen: Taeyoon Choi)"
- support-25: "Conferencia de contribuyentes de p5.js en el CMU STUDIO for Creative Inquiry en Pittsburgh (crédito de imagen: Taeyoon Choi)"
- support-26: "Digital Citizens Lab, becarios Processing, participan eun panel sobre enseñanza STEM en el International Center of Photography (crédito de imagen: International Center of Photography)"
- support-27: "Participantes de un taller de p5.js in Santiago, Chile, dictado por Aarón Montoya-Moraga (crédito de imagen: Aarón Montoya-Moraga.)"
- support-28: "Claire Kearney-Volpe ayuda en la realización de un taller de p5.js basado en lenguaje de señas, enseñado por Taeyoon Choi (crédito de imagen: Taeyoon Choi)"
- support-29: "DIY Girls, becarios de la Processing Foundation, realizan un curso de programación creativa en Los Angeles (crédito de imagen: DIY Girls)"
- support-30: "Processing Fellow Digital Citizens Lab"
- support-31: "Junta bicostal de p5.js entre UCLA DMA y NYU ITP"
- support-32: "The Processing Foundation"
- support-33: " fue fundada en 2012 después de más de de una década de trabajo con el software original de Processing. La misión de la fundación es promover la alfabetización de software dentro de las artes visuales, y la alfabetización visual dentro de las disciplinas relacionadas a la tecnología - y hacer estas disciplinas accesibles a comunidades más diversas. Nuestra meta es empoderar a gente de diversos intereses para que aprenda a programar y que realice trabajo creativo con código, especialmente aquellos que de otra forma no hubieran tenido acceso a estas herramientas y recursos."
- support-17-alt: ""
- support-18-alt: ""
- support-19-alt: ""
- support-20-alt: ""
- support-21-alt: ""
- support-22-alt: ""
- support-23-alt: ""
- support-24-alt: ""
- support-25-alt: ""
- support-26-alt: ""
- support-27-alt: ""
- support-28-alt: ""
- support-29-alt: ""
- support-30-alt: ""
- support-31-alt: ""
-
+ Download: Descargar
+ download-intro: >-
+ ¡Bienvenidos! Aunque esta página se titula "Descargar", en realidad contiene
+ una colección de enlaces para descargar la biblioteca o comenzar a trabajar
+ en línea. Hemos tratado de ordenar cosas desde lo que un principiante podría
+ desear explorar primero, a los recursos que los programadores más
+ experimentados pueden estar buscando.
+ editor-title: Editor
+ p5.js-editor: Editor de p5.js
+ p5.js-editor-intro: >-
+ Este enlace te redirige al Editor p5.js en línea para que puedas comenzar a
+ usar p5.js de inmediato.
+ editor-includes: 'Empieza a programar usando el Editor de p5.js, ¡no requiere instalación!'
+ complete-library-title: Biblioteca completa
+ complete-library-intro1: >-
+ Esta es una descarga contiene el archivo de la biblioteca p5.js, el
+ complemento p5.sound y un proyecto de ejemplo. No contiene un editor.
+ Explora
+ complete-library-intro2: Empezar
+ complete-library-intro3: ' para aprender cómo crear un proyecto de p5.js.'
+ p5.js-complete: p5.js completo
+ includes-1: 'Incluye:'
+ includes-2: 'p5.js, p5.sound.js y un proyecto de ejemplo'
+ includes-3: 'Versión '
+ single-files-title: Archivos por separado
+ single-files-intro: >-
+ Estas son descargas o enlaces al archivo de biblioteca p5.js. No incluyen
+ contenidos adicionales.
+ single-file: 'Archivo: '
+ p5.js-uncompressed: ' versión completa sin compresión'
+ compressed: versión comprimida
+ link: 'Enlace: '
+ statically-hosted-file: archivo almacenado estáticamente
+ etc-title: Recursos de GitHub
+ older-releases: 'Versiones antiguas / bitácora de cambios '
+ github-repository: Repositorio de Código (GitHub)
+ report-bugs: 'Reporta errores '
+ supported-browsers: 'Navegadores soportados '
+ support-title: ¡Apoya a p5.js!
+ support-options: Opciones de apoyo
+ support-1: >-
+ ¡Necesitamos tu ayuda! p5.js es un software gratuito y de código abierto.
+ Queremos hacer nuestra comunidad lo más abierta e inclusiva posible. You
+ can support this work by making a donation to the
+ support-2: >-
+ , the organization that supports p5.js. Your donation supports software
+ development for p5.js, education resources like code examples and tutorials,
+ support-3: becarios
+ support-4: ', y '
+ support-5: eventos para la comunidad.
+ support-17: >-
+ Conferencia de contribuyentes de p5.js en el CMU STUDIO for Creative Inquiry
+ en Pittsburgh (crédito de imagen: Taeyoon Choi)
+ support-18: >-
+ Saskia Freeke, becaria Processing, organiza talleres Code Liberation x
+ Processing en Londres (crédito de imagen: Code Liberation Foundation)
+ support-19: >-
+ Conferencia Learning to Teach, Teaching to Learn en conjunto con SFPC
+ (crédito de imagen: Kira Simon-Kennedy)
+ support-20: >-
+ Taller de Cassie Tarakajian, becaria de Processing Foundation, en Code Art
+ Miami (crédito de imagen: Christian Arévalo Photography)
+ support-21: >-
+ Taeyoon Choi y un intérprete de señas en el taller Signing Coders de p5.js
+ (crédito de imagen: Taeyoon Choi)
+ support-22: 'Lanzamiento de Google Summer of Code (crédito de imagen: Taeyoon Choi)'
+ support-23: >-
+ Cassie Tarakajian, becaria de Processing Foundation, realiza un taller en
+ Code Art Miami (crédito de imagen: Christian Arévalo Photography)
+ support-24: >-
+ Luisa Pereira y Yeseul Song ayudan en la realización de un taller de p5.js
+ basado en lenguaje de señas, enseñado por Taeyoon Choi (crédito de imagen:
+ Taeyoon Choi)
+ support-25: >-
+ Conferencia de contribuyentes de p5.js en el CMU STUDIO for Creative Inquiry
+ en Pittsburgh (crédito de imagen: Taeyoon Choi)
+ support-26: >-
+ Digital Citizens Lab, becarios Processing, participan eun panel sobre
+ enseñanza STEM en el International Center of Photography (crédito de imagen:
+ International Center of Photography)
+ support-27: >-
+ Participantes de un taller de p5.js in Santiago, Chile, dictado por Aarón
+ Montoya-Moraga (crédito de imagen: Aarón Montoya-Moraga.)
+ support-28: >-
+ Claire Kearney-Volpe ayuda en la realización de un taller de p5.js basado en
+ lenguaje de señas, enseñado por Taeyoon Choi (crédito de imagen: Taeyoon
+ Choi)
+ support-29: >-
+ DIY Girls, becarios de la Processing Foundation, realizan un curso de
+ programación creativa en Los Angeles (crédito de imagen: DIY Girls)
+ support-30: Processing Fellow Digital Citizens Lab
+ support-31: Junta bicostal de p5.js entre UCLA DMA y NYU ITP
+ support-32: The Processing Foundation
+ support-33: ' fue fundada en 2012 después de más de de una década de trabajo con el software original de Processing. La misión de la fundación es promover la alfabetización de software dentro de las artes visuales, y la alfabetización visual dentro de las disciplinas relacionadas a la tecnología - y hacer estas disciplinas accesibles a comunidades más diversas. Nuestra meta es empoderar a gente de diversos intereses para que aprenda a programar y que realice trabajo creativo con código, especialmente aquellos que de otra forma no hubieran tenido acceso a estas herramientas y recursos.'
+ support-17-alt: ''
+ support-18-alt: ''
+ support-19-alt: ''
+ support-20-alt: ''
+ support-21-alt: ''
+ support-22-alt: ''
+ support-23-alt: ''
+ support-24-alt: ''
+ support-25-alt: ''
+ support-26-alt: ''
+ support-27-alt: ''
+ support-28-alt: ''
+ support-29-alt: ''
+ support-30-alt: ''
+ support-31-alt: ''
learn:
- learn-title: "Aprender"
- teach-title2: "Teach"
- learn1: "Estos tutoriales proveen una revisión en mayor profundidad o paso a paso sobre temas particulares. Revisa la "
- learn2: "página de ejemplos"
- learn3: " para explorar demostraciones cortas sobre diversos temas de p5.js."
- introduction-to-p5js-title: "Introducción a p5.js"
- hello-p5js-title: "Hola p5.js"
- hello-p5js: "Este corto video te introducirá a la biblioteca y lo que puedes hacer con ella."
- getting-started-title: "Empezar"
- getting-started: "¡Bienvenido a p5.js! Esta introducción cubre lo básico de cómo configurar un proyecto con p5.js"
- p5js-overview-title: "Panorámica de p5.js"
- p5js-overview: "Una panorámica de las principales características de p5.js"
- p5js-processing-title: "p5.js y Processing"
- p5js-processing: "Las principales diferencias entre ambos, y cómo convertir de uno a otro."
- p5-screen-reader-title: "p5 con un lector de pantalla"
- p5-screen-reader: "Configurando p5 para que pueda ser usado fácilmente con un lector de pantalla."
- using-local-server-title: "Usando un servidor local"
- using-local-server: "Cómo configurar un servidor local en Mac OS X, Windows o Linux."
- p5js-wiki-title: "p5.js wiki"
- p5js-wiki: "Documentación adicional y tutoriales aportados por la comunidad."
- connecting-p5js-title: "Conectando p5.js"
- creating-libraries-title: "Crear bibliotecas"
- creating-libraries: "Creando bibliotecas adicionales para p5.js."
- nodejs-and-socketio-title: "node.js y socket.io"
- nodejs-and-socketio: "Uso de un servidor node.js con p5.js y comunicación vía socket.io."
- programming-topics-title: "Tópicos de programación"
- beyond-the-canvas-title: "Más allá del lienzo"
- beyond-the-canvas: "Creación y manipulación de elementos en la página, más allá del lienzo."
- 3d-webgl-title: "3D/WebGL"
- 3d-webgl: "Desarrollo de aplicaciones con gráficas avanzadas en p5.js usando el modo WEBGL."
- color-title: "Color"
- color: "Una introducción al color digital."
- coordinate-system-and-shapes-title: "Sistema de Coordenadas y Figuras"
- coordinate-system-and-shapes: "Dibuja figuras simples utilizando el sistema de coordenadas."
- interactivity-title: "Interactividad"
- interactivity: "Introducción a interactividad con el ratón y el teclado."
- program-flow-title: "Flujo de programa"
- program-flow: "Introducción al control del flujo de programa en p5.js."
- curves-title: "Curvas"
- curves: "Una introducción a los tres tipos de curvas en p5.js: arcos, curvas spline y curvas Bézier."
- becoming-a-better-programmer-title: "Cómo programar mejor"
- debugging-title: "Depurar"
- debugging: "Guía de cómo depurar tu código para todo público."
- optimizing-title: "Optimizar código para mejor rendimiento"
- optimizing: "Un tutorial de consejos y trucos para optimizar tu código para que corra más rápida y fluidamente."
- test-driven-development-title: "Unit testing y desarrollo según pruebas"
- test-driven-development: "Sálvate de la agonía al instalar. ¿Qué es unit testing y cómo usarlo? Por Andy Timmons."
- contributing-to-the-community-title: "Contribuir a la comunidad"
- development-title: "Desarrollo"
- development: "Introducción y panorámica general sobre cómo contribuir al desarrollo."
- looking-inside-title: "Adentro de p5"
- looking-inside: "Una introducción a la estructura de archivos y herramientas para el desarrollo con p5.js, por Luisa Pereira."
- writing-tutorial-title: "Escribir un tutorial"
- writing-tutorial: "Una guía sobre cómo crear un tutorial de programación en p5.js."
- writing-a-tutorial-title: "Guía para contribuir con tutoriales de p5.js"
- writing-a-tutorial-author: "Este tutorial fue escrito por Tega Brain."
- writing-a-tutorial-1: "Invitamos a los educadores, colaboradores y entusiastas en general a contribuir con tutoriales de p5js. El proyecto de p5js hace que la programación creativa y el desarrollo de código abierto sean más accesibles para una comunidad diversa y estamos muy emocionados de publicar tutoriales sobre todos los aspectos del proceso de desarrollo. Nuestros materiales de aprendizaje hasta el momento incluyen guías sobre el aprendizaje de p5, la técnica de programación y cómo contribuir a un proyecto de código abierto."
- writing-a-tutorial-2: "Le damos la bienvenida a la contribución de nuevos tutoriales escritos y esta guía describe los pasos para proponer, preparar y contribuir con un tutorial."
- writing-a-tutorial-how-start-title: "Cómo empezar:"
- writing-a-tutorial-how-start-1: "Comprueba que el tema que hayas propuesto no haya sido cubierto antes. Puedes encontrar "
- writing-a-tutorial-how-start-2: "una lista aquí"
- writing-a-tutorial-how-start-3: "con los tutoriales que están en progreso. Si tu tema está marcado en esta lista como en progreso, tal vez puedes añadir al trabajo que se está llevando a cabo y cooperar preparando el trabajo ya existente para su publicación así que por favor contáctate con nosotros."
- writing-a-tutorial-how-start-4: "Si tu tema no está cubierto y no está enlistado como en progreso, por favor escribe unas líneas sobre lo que propones cubrir y mándanos un email con esta descripción a education@p5js.org."
- writing-a-tutorial-how-prepare-title: "Cómo preparar un tutorial de p5js para su publicación en línea:"
- writing-a-tutorial-how-prepare-1: "Cuando tu tutorial esté listo para ser publicado, por favor sigue los siguientes pasos para preparar tu contenido para el sitio de p5js."
- writing-a-tutorial-how-prepare-2: "Guarda el contenido de tu tutorial en un archivo tutorial-name.hbs con "
- writing-a-tutorial-how-prepare-3: "esta estructura básica."
- writing-a-tutorial-how-prepare-4: " Como se muestra en este archivo, tiene que contener un un encabezado como se muestra a continuación:"
- writing-a-tutorial-how-prepare-5: "La carpeta que contiene tu tutorial se colocará en la carpeta 'tutoriales' del sitio de p5js. El archivo llamado index.hbs es la "
- writing-a-tutorial-how-prepare-6: "página de destino de los tutoriales de p5js,"
- writing-a-tutorial-how-prepare-7: "y el archivo test-tutorial.hbs es el tutorial de prueba."
- writing-a-tutorial-how-prepare-8: "Todos los contenidos deben de ir en las:"
- writing-a-tutorial-how-prepare-9: "etiquetas de la página, con el fórmato definido por las etiquetas <h1> y <h2> y las etiquetas de párrafo <p> como se muestra en la "
- writing-a-tutorial-how-prepare-10: " página del tutorial de prueba."
- writing-a-tutorial-how-prepare-11: "Si tu tutorial contiene imágenes, deben colocarse en la carpeta 'assets' del sitio p5, en la ubicación src / assets / learn / test-tutorial / images, como se muestra a continuación."
- writing-a-tutorial-how-prepare-12: "Para formatear correctamente el código en el html de la página, utiliza la etiqueta:"
- writing-a-tutorial-embedding-title: "Incorporar bosquejos p5.js"
- writing-a-tutorial-embedding-1: "Usar p5js significa que puedes ilustrar tu tutorial con ejemplos de código animados, interactivos o editables para demostrar conceptos de programación. Tus ejemplos deben estar preparados como bosquejos p5.js y pueden ser incorporados en el tutorial de dos maneras."
- writing-a-tutorial-embedding-2: "Si el ejemplo es editable como en"
- writing-a-tutorial-embedding-3: " las páginas de referencia"
- writing-a-tutorial-embedding-4: "del sitio de p5js, el bosquejo p5js debe ser incorporado en la página html usando el widget p5js. Sigue"
- writing-a-tutorial-embedding-5: " esta guía "
- writing-a-tutorial-embedding-6: "sobre cómo incorporar bosquejos p5js usando el widget escrito por "
- writing-a-tutorial-embedding-7: ". También puedes encontrar esto en la "
- writing-a-tutorial-embedding-8: " página del tutorial de prueba"
- writing-a-tutorial-embedding-9: "."
- writing-a-tutorial-embedding-10: "Si el ejemplo es animado y/o interactivo pero no editable, entonces el bosquejo p5js debe de ser incorporado en la página como un iframe como se describe a continuación."
- writing-a-tutorial-iframe-title: "Incorporar un bosquejo p5js usando un iframe"
- writing-a-tutorial-iframe-1: "Un iframe es cómo crear una ventana a través de la cual puedes ver otra página, aislada del resto de tú página. En este caso va a ser una ventana al archivo index.html que contiene tu bosquejo p5js. "
- writing-a-tutorial-iframe-2: "Coloca tus bosquejos p5 en la carpeta /src/assets/learn del sitio, en una carpeta etiquetada con el nombre de tu bosquejo como se muestra en la captura de pantalla. Aquí es donde todas las imágenes y bosquejos p5 enlazados por el iframe deben de estar guardados. "
- writing-a-tutorial-iframe-3: "En las subcarpetas que contienen tus ejemplos p5 debe de haber un archivo sketch.js y otro embed.html para tu bosquejo. "
- writing-a-tutorial-iframe-4: "Asegúrate que tu archivo embed.html tenga la ruta correcta hacia las librerías p5 del sitio. Si la estructura de tus archivos es igual a la de arriba, la ruta hacia las librerías p5 debe ser \"../../../js/p5.min.js\"."
- writing-a-tutorial-iframe-5: "Una vez comprobado esto, ya puedes incorporar los archivos 'index' de p5js como iframes en el archivo .hbs que contiene el contenido de tu tutorial. El código de inserción para el iframe sería entonces:"
- writing-a-tutorial-iframe-6: "Estilo para el iframe (esto podría directamente en la entrada o en una hoja de estilos):"
- writing-a-tutorial-iframe-7: "Aquí puedes explorar el bosquejo puro en ejecución: "
- writing-a-tutorial-iframe-8: "Y aquí está incorporado en el sitio p5 usando el código a continuación: "
- writing-a-tutorial-iframe-9: "Una cosa a recalcar es que necesitas ajustar manualmente el tamaño del iframe para que funcione de la mejor manera posible si las cosas son de tamaño estándar."
- writing-a-tutorial-iframe-10: "También nota que los enlaces a los archivos de las librerías de p5.js no provienen de la página con extensión .eps con todo el contenido del tutorial. En su lugar, van a estar localizados en la página html que está procesando tu bosquejo (en este caso se llama embed.html)."
- writing-a-tutorial-iframe-11: "Más información sobre cómo incorporar bosquejos de p5.js se pueden encontrar "
- writing-a-tutorial-embed-iframe-12: "aquí."
- writing-a-tutorial-finishing-title: "Los últimos detalles"
- writing-a-tutorial-finishing-1: "Una vez que hayas terminado de escribir tu tutorial y tu contenido haya sido aprobado, copia (fork) desde GitHub el repositorio del sitio de p5.js, prepara tu contenido como lo hemos descrito anteriormente y finalmente crea una solicitud de (pull request) al repositorio del sitio de p5.js para que podamos agregar tu contenido y publicar tu contribución. ¡Felicidades!"
- writing-a-tutorial-finishing-2: "¡Muchas gracias!"
- color-description1: "Este tutorial proviene del libro Learning Processing de Daniel Shiffman, publicado por Morgan Kaufmann, © 2008 Elsevier Inc. Todos los derechos reservados. Fue transcrito a p5 por Kelly Chang. Si detectas algún error o tienes comentarios, "
- color-description2: " por favor escríbenos."
- color-p1x1: "En el mundo digital hablar de color requiere precisión. No basta con decir, por ejemplo: ¿Puedes hacer un círculo verde azulado?, ya que el color se define como un arreglo de números. Comencemos con el caso más simple: negro, blanco y escala de grises. 0 significa negro, 255 significa blanco. Entre medio, cualquier otro número -50, 87, 162, 209, etc- es un tono gris que va entre negro y blanco."
- color-p2x1: "Al agregar las funciones "
- color-p2x2: " y "
- color-p2x3: " antes de dibujar podemos definir el color de cualquier forma deseada. También existe la función "
- color-p2x4: ", que define el color del lienzo en nuestra pantalla. A continuación hay un ejemplo."
- color-code1: "background(255); // Define el color del lienzo como blanco \n stroke(0); // Define el contorno de la forma (stroke) como negro \n fill(150); // Define el interior de la forma (fill) como gris \n rect(50,50,75,100); // Dibuja un rectángulo"
- color-p3x1: "Tanto el contorno como el interior de la forma pueden ser eliminados con las funciones: "
- color-p3x2: " y "
- color-p3x3: ". Instintivamente podríamos pensar en utilizar \"stroke(0)\" para eliminar el contorno, sin embargo, es importante recordar que 0 no significa \"nada\", sino que indica un color negro. Además, recuerda no eliminar ambos, con "
- color-p3x4: " y "
- color-p3x5: ", porque ¡nada aparecerá!"
- color-p4x1: "Adicionalmente si dibujamos dos figuras, p5.js siempre utilizará la última especificación de contorno y llenado, leyendo el código de arriba a abajo."
- color-rgb-title: "Color RGB"
- color-rgb-p1x1: "¿Alguna vez pintaste con las manos? Al mezclar los colores \"primarios\" podías generar cualquier otro color. Mezclar todos los colores resultaba en un color café fango, y mientras más pintura añadías más oscuro era el resultado. En el mundo digital los colores también se construyen mezclando los tres colores primarios, pero funciona un poco diferente. Primero, los tres colores primarios son otros: rojo, verde y azul (en inglés red, green and blue, es decir, \"RGB\"). Luego, con los colores en tu pantalla estás mezclando luz, no pintura, por lo que las reglas de esta mezcla también son otras."
- color-rgb-li1: "Rojo + Verde = Amarillo"
- color-rgb-li2: "Rojo + Azul = Púrpura"
- color-rgb-li3: "Verde + Azul = Cian (azul-verde)"
- color-rgb-li4: "Rojo + Verde + Azul = Blanco"
- color-rgb-li5: "Ausencia de colores = Negro"
- color-rgb-p2x1: "Lo anterior presupone que los colores son tan brillantes como sea posible, pero por supuesto, hay un rango de color disponible, por lo que un poco de rojo más un poco de verde y azul genera gris, mientras que un poco de rojo más un poco de azul genera púrpura oscuro. \n Si bien puede tomar tiempo acostumbrarte a esto, mientras más programes y experimentes con color RGB, más rápido se hará instintivo, como mezclar pintura con los dedos. \n Y por supuesto no puedes decir \"Mezcla un poco de de rojo con un poco de azul\", debes proveer una cantidad. Así como en la escala de grises, los elementos de color son expresados en rangos desde 0 (ausencia del color) hasta 255 (presencia máxima del color), y son listados en orden R (rojo), G (verde) y B (azul). Obtendrás el resultado de mezclar color RGB por experimentación, pero en adelante cubriremos mediante ejercicios colores más comunes."
- color-transparency-title: "Transparencia"
- color-transparency-p1x1: "Además de los componentes rojo, verde y azul de cada color, existe un cuarto componente opcional denominado \"alfa\" (alpha, en inglés). Alfa significa transparencia y es particularmente útil cuando deseas dibujar figuras que se superponen y a través de las cuales quieres ver. Los valores de alfa de una imagen son llamados también \"canal alfa\" de una imagen."
- color-transparency-p2x1: "Es importante notar que los pixeles no son literalmente transparentes, esto es simplemente una ilusión lograda al mezclar colores. Tras bambalinas p5.js toma los valores de cada color y les asigna un porcentaje, creando una percepción óptica de la mezcla (Si estás interesado en programar vidrios \"color rosa\", aquí es donde debes comenzar)."
- color-transparency-p3x1: "Los valores de alfa también se definen en un rango de 0 a 255, donde 0 es completamente transparente (es decir, 0% de opacidad) y 255 es completamente opaco (es decir, 100% opaco)."
- color-custom-ranges-title: "Rangos de Color Personalizados"
- color-custom-ranges-p1x1: "El modo RGB con rangos de 0 a 255 no es la única forma en que podemos manipular color en p5.js, de hecho p5.js nos permite pensar el color de la manera que deseemos. Por ejemplo, tu podrías preferir pensar el color en rangos de 0 a 100 (como un porcentaje). Esto lo puedes hacer especificando un modo específico de color con la función "
- color-custom-ranges-p2x1: "La expresión anterior dice: \"Ok, queremos pensar el color en términos de rojo, verde y azul, o RGB, en que el rango de cada color pueda estar entre 0 100.\""
- color-custom-ranges-p3x1: "Aunque rara vez sea conveniente, tu también puedes definir distintos rangos para cada componente de color:"
- color-custom-ranges-p4x1: "Con la expresión anterior queremos decir: \"Rango valores en color rojo va de 0 a 100, verde de 0 a 500, azul de 0 a 10 y alfa de 0 a 255.\""
- color-custom-ranges-p5x1: "Finalmente, si bien es probable que tu código requiera sólamente el modo de color RGB, también puedes especificar colores en el modo HSB (tono, saturación y brillo). Sin entrar mayormente en detalle, el color HSB funciona como sigue:"
- color-custom-ranges-li1x1: "Tono o Matiz"
- color-custom-ranges-li1x2: "—El tipo de color, valores por definición van de 0 a 255."
- color-custom-ranges-li2x1: "Saturación"
- color-custom-ranges-li2x2: "—La vivacidad del color, 0 a 255 por definición."
- color-custom-ranges-li3x1: "Brillo"
- color-custom-ranges-li3x2: "—Es el brillo del color, 0 a 255 por definición."
- color-custom-ranges-p6x1: "Con "
- color-custom-ranges-p6x2: " puedes definir tu propio rango de valores. Algunos prefieren un rango de 0-360 para el tono (piensa en los 360 grados de la rueda de color) y 0-100 para la saturación y brillo (piensa en 0-100%)."
- coordinate-system-description1: "Este tutorial proviene del libro "
- coordinate-system-description2: "Learning Processing"
- coordinate-system-description3: " de Daniel Shiffman, publicado por Morgan Kaufmann, © 2008 Elsevier Inc. Todos los derechos reservados. Fue transcrito a p5.js por Alex Yixuan Xu. Si detectas algún error o tienes comentarios, por favor "
- coordinate-system-description4: "escríbenos"
- coordinate-system-description5: "."
- coordinate-system-description-title: "Sistema Coordenado y Figuras"
- coordinate-system-description-p1x1: "Antes de comenzar a programar con p5.js debemos primero remontarnos a nuestra infancia, tomar un trozo de papel y dibujar una línea. La distancia más corta entre dos puntos es una línea y ese es nuestro punto de partida, con dos puntos en un gráfico."
- coordinate-system-description-p2x1: "La figura anterior muestra una línea que une un punto A (1,0) y un punto B (4,5). Si le hubieras pedido a un amigo que dibujara la línea por ti, tendrías que haberle dado las indicaciones \"traza una línea desde el punto uno coma cero hasta el punto cuatro coma cinco, por favor\". Bueno, por el momento imagina que tu amigo era un computador al que solicitaste dibujar la misma línea en su pantalla. El mismo comando aplica (solo que en esta caso puedes obviar formalidades y deberás utilizar un formato preciso). Aquí la instrucción es como sigue:"
- coordinate-system-description-p3x1: "Aun sin haber estudiado la sintaxis, la expresión anterior debiera haberte hecho sentido. Estamos entregando a la máquina un comando llamado \"línea\" (al que nos referiremos como \"función\") para ser ejecutado. Adicionalmente estamos espcificando argumentos que indican cómo la línea debería ser dibujada, desde un punto A (1,0) hasta un punto B (4,5). Si pensamos una línea de código como una frase, la función es un verbo y los argumentos son los objetos de la frase. La frase de código termina con un punto y coma en vez de un punto final."
- coordinate-system-description-p4x1: "La clave aquí es darse cuenta que la pantalla del computador es la abstracción de un trozo de papel. Cada pixel de la pantalla es una coordenada -dos números, \"x\" (horizontal) e \"y\" (vertical)- que determinan la ubicación de un punto en el espacio. Y es nuestro trabajo especificar qué figuras y colores debieran apareceren en dicha coordenada de pixeles."
- coordinate-system-description-p5x1: "Sin embargo hay una trampa. El gráfico que nos enseñaron cuando chicos (\"Sistema Coordenado Cartesiano\") ubicaba el punto (0,0) en el centro con el \"eje y\" apuntando hacia arriba, y el \"eje x\" apuntando hacia la derecho (hacia los números positivos, los negativos hacia la izquierda y abajo). El sistema coordenado para pixeles en una pantalla de computador, en cambio, está invertido en el eje y. (0,0) se ubica en la parte superior izquierda con la dirección positiva apuntando horizontalmente hacia la derecha y abajo."
- coordinate-system-simple-shapes-title: "Formas Primitivas"
- coordinate-system-simple-shapes-p1x1: "La mayoría de los ejemplos en p5.js son de naturaleza visual. Ellos implican principalmente dibujar figuras y definir coordenadas de pixeles. Comencemos observando las cuatro formas primitivas."
- coordinate-system-simple-shapes-p2x1: "Para cada figura nos debemos preguntar qué información requerimos para especificar su ubicación y tamaño (y luego su color) y entender cómo p5.js espera recibir dicha información. En cada uno de los siguientes diagramas asumiremos una ventana de 100 pixeles de ancho y 100 pixeles de alto."
- coordinate-system-simple-shapes-p3x1: "Un "
- coordinate-system-simple-shapes-p3x2: " es la forma más simple y un buen lugar para comenzar. Para dibujar un punto solo necesitamos un par ordenado (x,y)."
- coordinate-system-simple-shapes-p4x1: "Una "
- coordinate-system-simple-shapes-p4x2: " tampoco es terriblemente compleja y solo requiere dos puntos: (x1,y1) y (x2,y2):"
- coordinate-system-simple-shapes-p5x1: "Una vez que llegamos a dibujar un "
- coordinate-system-simple-shapes-p5x2: ", las cosas se tornan un poco más complejas. En p5.js un rectángulo se especifica con las coordenadas de su esquina superior izquierda, así como ancho y alto."
- coordinate-system-simple-shapes-p6x1: "Una segunda manera de dibujar un rectángulo requiere especificar su punto central junto con su ancho y alto. Si preferimos este método, debemos indicar previamente que queremos utilizar el modo "
- coordinate-system-simple-shapes-p6x2: " antes de la instrucción del propio rectángulo. Notemos que p5.js es sensible a cada caso."
- coordinate-system-simple-shapes-p7x1: "Finalmente podemos dibujar un rectángulo con dos puntos (la esquina superior izquierda y la esquina superior derecha). El modo en este caso es "
- coordinate-system-simple-shapes-p7x2: ". Notar que este ejemplo entrega el mismo resultado en pantalla que el ejemplo anterior."
- coordinate-system-simple-shapes-p8x1: "Una vez que nos hemos familiarizado con el concepto de dibujar un rectángulo, una "
- coordinate-system-simple-shapes-p8x2: " es muy sencilla de dibujar. De hecho es idéntica al "
- coordinate-system-simple-shapes-p8x3: " con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la "
- coordinate-system-simple-shapes-p8x4: " es "
- coordinate-system-simple-shapes-p8x5: ", en vez de "
- coordinate-system-simple-shapes-p8x6: "."
- coordinate-system-simple-shapes-p9x1: "Ahora observemos una aplicación un poco más realista, con una pantalla de dimensiones 200 por 200. Notemos el uso de la función createCanvas() para especificar el tamaño de la ventana."
- teach-desc: "Teach a p5 workshop or class, or create teaching materials!"
-
-test-tutorial:
-
+ learn-title: Aprender
+ teach-title2: Teach
+ learn1: >-
+ Estos tutoriales proveen una revisión en mayor profundidad o paso a paso
+ sobre temas particulares. Revisa la
+ learn2: página de ejemplos
+ learn3: ' para explorar demostraciones cortas sobre diversos temas de p5.js.'
+ introduction-to-p5js-title: Introducción a p5.js
+ hello-p5js-title: Hola p5.js
+ hello-p5js: >-
+ Este corto video te introducirá a la biblioteca y lo que puedes hacer con
+ ella.
+ getting-started-title: Empezar
+ getting-started: >-
+ ¡Bienvenido a p5.js! Esta introducción cubre lo básico de cómo configurar
+ un proyecto con p5.js
+ p5js-overview-title: Panorámica de p5.js
+ p5js-overview: Una panorámica de las principales características de p5.js
+ p5js-processing-title: p5.js y Processing
+ p5js-processing: 'Las principales diferencias entre ambos, y cómo convertir de uno a otro.'
+ p5-screen-reader-title: p5 con un lector de pantalla
+ p5-screen-reader: >-
+ Configurando p5 para que pueda ser usado fácilmente con un lector de
+ pantalla.
+ using-local-server-title: Usando un servidor local
+ using-local-server: 'Cómo configurar un servidor local en Mac OS X, Windows o Linux.'
+ p5js-wiki-title: p5.js wiki
+ p5js-wiki: Documentación adicional y tutoriales aportados por la comunidad.
+ connecting-p5js-title: Conectando p5.js
+ creating-libraries-title: Crear bibliotecas
+ creating-libraries: Creando bibliotecas adicionales para p5.js.
+ nodejs-and-socketio-title: node.js y socket.io
+ nodejs-and-socketio: Uso de un servidor node.js con p5.js y comunicación vía socket.io.
+ programming-topics-title: Tópicos de programación
+ beyond-the-canvas-title: Más allá del lienzo
+ beyond-the-canvas: 'Creación y manipulación de elementos en la página, más allá del lienzo.'
+ 3d-webgl-title: 3D/WebGL
+ 3d-webgl: >-
+ Desarrollo de aplicaciones con gráficas avanzadas en p5.js usando el modo
+ WEBGL.
+ color-title: Color
+ color: Una introducción al color digital.
+ coordinate-system-and-shapes-title: Sistema de Coordenadas y Figuras
+ coordinate-system-and-shapes: Dibuja figuras simples utilizando el sistema de coordenadas.
+ interactivity-title: Interactividad
+ interactivity: Introducción a interactividad con el ratón y el teclado.
+ program-flow-title: Flujo de programa
+ program-flow: Introducción al control del flujo de programa en p5.js.
+ curves-title: Curvas
+ curves: >-
+ Una introducción a los tres tipos de curvas en p5.js: arcos, curvas spline y
+ curvas Bézier.
+ becoming-a-better-programmer-title: Cómo programar mejor
+ debugging-title: Depurar
+ debugging: Guía de cómo depurar tu código para todo público.
+ optimizing-title: Optimizar código para mejor rendimiento
+ optimizing: >-
+ Un tutorial de consejos y trucos para optimizar tu código para que corra más
+ rápida y fluidamente.
+ test-driven-development-title: Unit testing y desarrollo según pruebas
+ test-driven-development: >-
+ Sálvate de la agonía al instalar. ¿Qué es unit testing y cómo usarlo? Por
+ Andy Timmons.
+ contributing-to-the-community-title: Contribuir a la comunidad
+ development-title: Desarrollo
+ development: Introducción y panorámica general sobre cómo contribuir al desarrollo.
+ looking-inside-title: Adentro de p5
+ looking-inside: >-
+ Una introducción a la estructura de archivos y herramientas para el
+ desarrollo con p5.js, por Luisa Pereira.
+ writing-tutorial-title: Escribir un tutorial
+ writing-tutorial: Una guía sobre cómo crear un tutorial de programación en p5.js.
+ writing-a-tutorial-title: Guía para contribuir con tutoriales de p5.js
+ writing-a-tutorial-author: Este tutorial fue escrito por Tega Brain.
+ writing-a-tutorial-1: >-
+ Invitamos a los educadores, colaboradores y entusiastas en general a
+ contribuir con tutoriales de p5js. El proyecto de p5js hace que la
+ programación creativa y el desarrollo de código abierto sean más accesibles
+ para una comunidad diversa y estamos muy emocionados de publicar tutoriales
+ sobre todos los aspectos del proceso de desarrollo. Nuestros materiales de
+ aprendizaje hasta el momento incluyen guías sobre el aprendizaje de p5, la
+ técnica de programación y cómo contribuir a un proyecto de código abierto.
+ writing-a-tutorial-2: >-
+ Le damos la bienvenida a la contribución de nuevos tutoriales escritos y
+ esta guía describe los pasos para proponer, preparar y contribuir con un
+ tutorial.
+ writing-a-tutorial-how-start-title: 'Cómo empezar:'
+ writing-a-tutorial-how-start-1: >-
+ Comprueba que el tema que hayas propuesto no haya sido cubierto antes.
+ Puedes encontrar
+ writing-a-tutorial-how-start-2: una lista aquí
+ writing-a-tutorial-how-start-3: >-
+ con los tutoriales que están en progreso. Si tu tema está marcado en esta
+ lista como en progreso, tal vez puedes añadir al trabajo que se está
+ llevando a cabo y cooperar preparando el trabajo ya existente para su
+ publicación así que por favor contáctate con nosotros.
+ writing-a-tutorial-how-start-4: >-
+ Si tu tema no está cubierto y no está enlistado como en progreso, por favor
+ escribe unas líneas sobre lo que propones cubrir y mándanos un email con
+ esta descripción a education@p5js.org.
+ writing-a-tutorial-how-prepare-title: 'Cómo preparar un tutorial de p5js para su publicación en línea:'
+ writing-a-tutorial-how-prepare-1: >-
+ Cuando tu tutorial esté listo para ser publicado, por favor sigue los
+ siguientes pasos para preparar tu contenido para el sitio de p5js.
+ writing-a-tutorial-how-prepare-2: 'Guarda el contenido de tu tutorial en un archivo tutorial-name.hbs con '
+ writing-a-tutorial-how-prepare-3: esta estructura básica.
+ writing-a-tutorial-how-prepare-4: ' Como se muestra en este archivo, tiene que contener un un encabezado como se muestra a continuación:'
+ writing-a-tutorial-how-prepare-5: >-
+ La carpeta que contiene tu tutorial se colocará en la carpeta 'tutoriales'
+ del sitio de p5js. El archivo llamado index.hbs es la
+ writing-a-tutorial-how-prepare-6: 'página de destino de los tutoriales de p5js,'
+ writing-a-tutorial-how-prepare-7: y el archivo test-tutorial.hbs es el tutorial de prueba.
+ writing-a-tutorial-how-prepare-8: 'Todos los contenidos deben de ir en las:'
+ writing-a-tutorial-how-prepare-9: >-
+ etiquetas de la página, con el fórmato definido por las etiquetas <h1>
+ y <h2> y las etiquetas de párrafo <p> como se muestra en la
+ writing-a-tutorial-how-prepare-10: ' página del tutorial de prueba.'
+ writing-a-tutorial-how-prepare-11: >-
+ Si tu tutorial contiene imágenes, deben colocarse en la carpeta 'assets' del
+ sitio p5, en la ubicación src / assets / learn / test-tutorial / images,
+ como se muestra a continuación.
+ writing-a-tutorial-how-prepare-12: >-
+ Para formatear correctamente el código en el html de la página, utiliza la
+ etiqueta:
+ writing-a-tutorial-embedding-title: Incorporar bosquejos p5.js
+ writing-a-tutorial-embedding-1: >-
+ Usar p5js significa que puedes ilustrar tu tutorial con ejemplos de código
+ animados, interactivos o editables para demostrar conceptos de programación.
+ Tus ejemplos deben estar preparados como bosquejos p5.js y pueden ser
+ incorporados en el tutorial de dos maneras.
+ writing-a-tutorial-embedding-2: Si el ejemplo es editable como en
+ writing-a-tutorial-embedding-3: ' las páginas de referencia'
+ writing-a-tutorial-embedding-4: >-
+ del sitio de p5js, el bosquejo p5js debe ser incorporado en la página html
+ usando el widget p5js. Sigue
+ writing-a-tutorial-embedding-5: ' esta guía '
+ writing-a-tutorial-embedding-6: 'sobre cómo incorporar bosquejos p5js usando el widget escrito por '
+ writing-a-tutorial-embedding-7: '. También puedes encontrar esto en la '
+ writing-a-tutorial-embedding-8: ' página del tutorial de prueba'
+ writing-a-tutorial-embedding-9: .
+ writing-a-tutorial-embedding-10: >-
+ Si el ejemplo es animado y/o interactivo pero no editable, entonces el
+ bosquejo p5js debe de ser incorporado en la página como un iframe como se
+ describe a continuación.
+ writing-a-tutorial-iframe-title: Incorporar un bosquejo p5js usando un iframe
+ writing-a-tutorial-iframe-1: >-
+ Un iframe es cómo crear una ventana a través de la cual puedes ver otra
+ página, aislada del resto de tú página. En este caso va a ser una ventana al
+ archivo index.html que contiene tu bosquejo p5js.
+ writing-a-tutorial-iframe-2: >-
+ Coloca tus bosquejos p5 en la carpeta /src/assets/learn del sitio, en una
+ carpeta etiquetada con el nombre de tu bosquejo como se muestra en la
+ captura de pantalla. Aquí es donde todas las imágenes y bosquejos p5
+ enlazados por el iframe deben de estar guardados.
+ writing-a-tutorial-iframe-3: >-
+ En las subcarpetas que contienen tus ejemplos p5 debe de haber un archivo
+ sketch.js y otro embed.html para tu bosquejo.
+ writing-a-tutorial-iframe-4: >-
+ Asegúrate que tu archivo embed.html tenga la ruta correcta hacia las
+ librerías p5 del sitio. Si la estructura de tus archivos es igual a la de
+ arriba, la ruta hacia las librerías p5 debe ser "../../../js/p5.min.js".
+ writing-a-tutorial-iframe-5: >-
+ Una vez comprobado esto, ya puedes incorporar los archivos 'index' de p5js
+ como iframes en el archivo .hbs que contiene el contenido de tu tutorial. El
+ código de inserción para el iframe sería entonces:
+ writing-a-tutorial-iframe-6: >-
+ Estilo para el iframe (esto podría directamente en la entrada o en una hoja
+ de estilos):
+ writing-a-tutorial-iframe-7: 'Aquí puedes explorar el bosquejo puro en ejecución: '
+ writing-a-tutorial-iframe-8: 'Y aquí está incorporado en el sitio p5 usando el código a continuación: '
+ writing-a-tutorial-iframe-9: >-
+ Una cosa a recalcar es que necesitas ajustar manualmente el tamaño del
+ iframe para que funcione de la mejor manera posible si las cosas son de
+ tamaño estándar.
+ writing-a-tutorial-iframe-10: >-
+ También nota que los enlaces a los archivos de las librerías de p5.js no
+ provienen de la página con extensión .eps con todo el contenido del
+ tutorial. En su lugar, van a estar localizados en la página html que está
+ procesando tu bosquejo (en este caso se llama embed.html).
+ writing-a-tutorial-iframe-11: >-
+ Más información sobre cómo incorporar bosquejos de p5.js se pueden
+ encontrar
+ writing-a-tutorial-embed-iframe-12: aquí.
+ writing-a-tutorial-finishing-title: Los últimos detalles
+ writing-a-tutorial-finishing-1: >-
+ Una vez que hayas terminado de escribir tu tutorial y tu contenido haya sido
+ aprobado, copia (fork) desde GitHub el repositorio del sitio de p5.js,
+ prepara tu contenido como lo hemos descrito anteriormente y finalmente crea
+ una solicitud de (pull request) al repositorio del sitio de p5.js para que
+ podamos agregar tu contenido y publicar tu contribución. ¡Felicidades!
+ writing-a-tutorial-finishing-2: ¡Muchas gracias!
+ color-description1: >-
+ Este tutorial proviene del libro Learning Processing de Daniel Shiffman,
+ publicado por Morgan Kaufmann, © 2008 Elsevier Inc. Todos los derechos
+ reservados. Fue transcrito a p5 por Kelly Chang. Si detectas algún error o
+ tienes comentarios,
+ color-description2: ' por favor escríbenos.'
+ color-p1x1: >-
+ En el mundo digital hablar de color requiere precisión. No basta con decir,
+ por ejemplo: ¿Puedes hacer un círculo verde azulado?, ya que el color se
+ define como un arreglo de números. Comencemos con el caso más simple: negro,
+ blanco y escala de grises. 0 significa negro, 255 significa blanco. Entre
+ medio, cualquier otro número -50, 87, 162, 209, etc- es un tono gris que va
+ entre negro y blanco.
+ color-p2x1: 'Al agregar las funciones '
+ color-p2x2: ' y '
+ color-p2x3: ' antes de dibujar podemos definir el color de cualquier forma deseada. También existe la función '
+ color-p2x4: >-
+ , que define el color del lienzo en nuestra pantalla. A continuación hay un
+ ejemplo.
+ color-code1: |-
+ background(255); // Define el color del lienzo como blanco
+ stroke(0); // Define el contorno de la forma (stroke) como negro
+ fill(150); // Define el interior de la forma (fill) como gris
+ rect(50,50,75,100); // Dibuja un rectángulo
+ color-p3x1: >-
+ Tanto el contorno como el interior de la forma pueden ser eliminados con las
+ funciones:
+ color-p3x2: ' y '
+ color-p3x3: >-
+ . Instintivamente podríamos pensar en utilizar "stroke(0)" para eliminar el
+ contorno, sin embargo, es importante recordar que 0 no significa "nada",
+ sino que indica un color negro. Además, recuerda no eliminar ambos, con
+ color-p3x4: ' y '
+ color-p3x5: ', porque ¡nada aparecerá!'
+ color-p4x1: >-
+ Adicionalmente si dibujamos dos figuras, p5.js siempre utilizará la última
+ especificación de contorno y llenado, leyendo el código de arriba a abajo.
+ color-rgb-title: Color RGB
+ color-rgb-p1x1: >-
+ ¿Alguna vez pintaste con las manos? Al mezclar los colores "primarios"
+ podías generar cualquier otro color. Mezclar todos los colores resultaba en
+ un color café fango, y mientras más pintura añadías más oscuro era el
+ resultado. En el mundo digital los colores también se construyen mezclando
+ los tres colores primarios, pero funciona un poco diferente. Primero, los
+ tres colores primarios son otros: rojo, verde y azul (en inglés red, green
+ and blue, es decir, "RGB"). Luego, con los colores en tu pantalla estás
+ mezclando luz, no pintura, por lo que las reglas de esta mezcla también son
+ otras.
+ color-rgb-li1: Rojo + Verde = Amarillo
+ color-rgb-li2: Rojo + Azul = Púrpura
+ color-rgb-li3: Verde + Azul = Cian (azul-verde)
+ color-rgb-li4: Rojo + Verde + Azul = Blanco
+ color-rgb-li5: Ausencia de colores = Negro
+ color-rgb-p2x1: >-
+ Lo anterior presupone que los colores son tan brillantes como sea posible,
+ pero por supuesto, hay un rango de color disponible, por lo que un poco de
+ rojo más un poco de verde y azul genera gris, mientras que un poco de rojo
+ más un poco de azul genera púrpura oscuro.
+ Si bien puede tomar tiempo acostumbrarte a esto, mientras más programes y experimentes con color RGB, más rápido se hará instintivo, como mezclar pintura con los dedos.
+ Y por supuesto no puedes decir "Mezcla un poco de de rojo con un poco de azul", debes proveer una cantidad. Así como en la escala de grises, los elementos de color son expresados en rangos desde 0 (ausencia del color) hasta 255 (presencia máxima del color), y son listados en orden R (rojo), G (verde) y B (azul). Obtendrás el resultado de mezclar color RGB por experimentación, pero en adelante cubriremos mediante ejercicios colores más comunes.
+ color-transparency-title: Transparencia
+ color-transparency-p1x1: >-
+ Además de los componentes rojo, verde y azul de cada color, existe un cuarto
+ componente opcional denominado "alfa" (alpha, en inglés). Alfa significa
+ transparencia y es particularmente útil cuando deseas dibujar figuras que se
+ superponen y a través de las cuales quieres ver. Los valores de alfa de una
+ imagen son llamados también "canal alfa" de una imagen.
+ color-transparency-p2x1: >-
+ Es importante notar que los pixeles no son literalmente transparentes, esto
+ es simplemente una ilusión lograda al mezclar colores. Tras bambalinas p5.js
+ toma los valores de cada color y les asigna un porcentaje, creando una
+ percepción óptica de la mezcla (Si estás interesado en programar vidrios
+ "color rosa", aquí es donde debes comenzar).
+ color-transparency-p3x1: >-
+ Los valores de alfa también se definen en un rango de 0 a 255, donde 0 es
+ completamente transparente (es decir, 0% de opacidad) y 255 es completamente
+ opaco (es decir, 100% opaco).
+ color-custom-ranges-title: Rangos de Color Personalizados
+ color-custom-ranges-p1x1: >-
+ El modo RGB con rangos de 0 a 255 no es la única forma en que podemos
+ manipular color en p5.js, de hecho p5.js nos permite pensar el color de la
+ manera que deseemos. Por ejemplo, tu podrías preferir pensar el color en
+ rangos de 0 a 100 (como un porcentaje). Esto lo puedes hacer especificando
+ un modo específico de color con la función
+ color-custom-ranges-p2x1: >-
+ La expresión anterior dice: "Ok, queremos pensar el color en términos de
+ rojo, verde y azul, o RGB, en que el rango de cada color pueda estar entre
+ 0 100."
+ color-custom-ranges-p3x1: >-
+ Aunque rara vez sea conveniente, tu también puedes definir distintos rangos
+ para cada componente de color:
+ color-custom-ranges-p4x1: >-
+ Con la expresión anterior queremos decir: "Rango valores en color rojo va de
+ 0 a 100, verde de 0 a 500, azul de 0 a 10 y alfa de 0 a 255."
+ color-custom-ranges-p5x1: >-
+ Finalmente, si bien es probable que tu código requiera sólamente el modo de
+ color RGB, también puedes especificar colores en el modo HSB (tono,
+ saturación y brillo). Sin entrar mayormente en detalle, el color HSB
+ funciona como sigue:
+ color-custom-ranges-li1x1: Tono o Matiz
+ color-custom-ranges-li1x2: '—El tipo de color, valores por definición van de 0 a 360.'
+ color-custom-ranges-li2x1: Saturación
+ color-custom-ranges-li2x2: '—La vivacidad del color, 0 a 100 por definición.'
+ color-custom-ranges-li3x1: Brillo
+ color-custom-ranges-li3x2: '—Es el brillo del color, 0 a 100 por definición.'
+ color-custom-ranges-p6x1: 'Con '
+ color-custom-ranges-p6x2: ' puedes definir tu propio rango de valores. Algunos prefieren un rango de 0-360 para el tono (piensa en los 360 grados de la rueda de color) y 0-100 para la saturación y brillo (piensa en 0-100%).'
+ coordinate-system-description1: 'Este tutorial proviene del libro '
+ coordinate-system-description2: Learning Processing
+ coordinate-system-description3: ' de Daniel Shiffman, publicado por Morgan Kaufmann, © 2008 Elsevier Inc. Todos los derechos reservados. Fue transcrito a p5.js por Alex Yixuan Xu. Si detectas algún error o tienes comentarios, por favor '
+ coordinate-system-description4: escríbenos
+ coordinate-system-description5: .
+ coordinate-system-description-title: Sistema Coordenado y Figuras
+ coordinate-system-description-p1x1: >-
+ Antes de comenzar a programar con p5.js debemos primero remontarnos a
+ nuestra infancia, tomar un trozo de papel y dibujar una línea. La distancia
+ más corta entre dos puntos es una línea y ese es nuestro punto de partida,
+ con dos puntos en un gráfico.
+ coordinate-system-description-p2x1: >-
+ La figura anterior muestra una línea que une un punto A (1,0) y un punto B
+ (4,5). Si le hubieras pedido a un amigo que dibujara la línea por ti,
+ tendrías que haberle dado las indicaciones "traza una línea desde el punto
+ uno coma cero hasta el punto cuatro coma cinco, por favor". Bueno, por el
+ momento imagina que tu amigo era un computador al que solicitaste dibujar la
+ misma línea en su pantalla. El mismo comando aplica (solo que en esta caso
+ puedes obviar formalidades y deberás utilizar un formato preciso). Aquí la
+ instrucción es como sigue:
+ coordinate-system-description-p3x1: >-
+ Aun sin haber estudiado la sintaxis, la expresión anterior debiera haberte
+ hecho sentido. Estamos entregando a la máquina un comando llamado "línea"
+ (al que nos referiremos como "función") para ser ejecutado. Adicionalmente
+ estamos espcificando argumentos que indican cómo la línea debería ser
+ dibujada, desde un punto A (1,0) hasta un punto B (4,5). Si pensamos una
+ línea de código como una frase, la función es un verbo y los argumentos son
+ los objetos de la frase. La frase de código termina con un punto y coma en
+ vez de un punto final.
+ coordinate-system-description-p4x1: >-
+ La clave aquí es darse cuenta que la pantalla del computador es la
+ abstracción de un trozo de papel. Cada pixel de la pantalla es una
+ coordenada -dos números, "x" (horizontal) e "y" (vertical)- que determinan
+ la ubicación de un punto en el espacio. Y es nuestro trabajo especificar qué
+ figuras y colores debieran apareceren en dicha coordenada de pixeles.
+ coordinate-system-description-p5x1: >-
+ Sin embargo hay una trampa. El gráfico que nos enseñaron cuando chicos
+ ("Sistema Coordenado Cartesiano") ubicaba el punto (0,0) en el centro con el
+ "eje y" apuntando hacia arriba, y el "eje x" apuntando hacia la derecho
+ (hacia los números positivos, los negativos hacia la izquierda y abajo). El
+ sistema coordenado para pixeles en una pantalla de computador, en cambio,
+ está invertido en el eje y. (0,0) se ubica en la parte superior izquierda
+ con la dirección positiva apuntando horizontalmente hacia la derecha y
+ abajo.
+ coordinate-system-simple-shapes-title: Formas Primitivas
+ coordinate-system-simple-shapes-p1x1: >-
+ La mayoría de los ejemplos en p5.js son de naturaleza visual. Ellos implican
+ principalmente dibujar figuras y definir coordenadas de pixeles. Comencemos
+ observando las cuatro formas primitivas.
+ coordinate-system-simple-shapes-p2x1: >-
+ Para cada figura nos debemos preguntar qué información requerimos para
+ especificar su ubicación y tamaño (y luego su color) y entender cómo p5.js
+ espera recibir dicha información. En cada uno de los siguientes diagramas
+ asumiremos una ventana de 100 pixeles de ancho y 100 pixeles de alto.
+ coordinate-system-simple-shapes-p3x1: 'Un '
+ coordinate-system-simple-shapes-p3x2: ' es la forma más simple y un buen lugar para comenzar. Para dibujar un punto solo necesitamos un par ordenado (x,y).'
+ coordinate-system-simple-shapes-p4x1: 'Una '
+ coordinate-system-simple-shapes-p4x2: ' tampoco es terriblemente compleja y solo requiere dos puntos: (x1,y1) y (x2,y2):'
+ coordinate-system-simple-shapes-p5x1: 'Una vez que llegamos a dibujar un '
+ coordinate-system-simple-shapes-p5x2: >-
+ , las cosas se tornan un poco más complejas. En p5.js un rectángulo se
+ especifica con las coordenadas de su esquina superior izquierda, así como
+ ancho y alto.
+ coordinate-system-simple-shapes-p6x1: >-
+ Una segunda manera de dibujar un rectángulo requiere especificar su punto
+ central junto con su ancho y alto. Si preferimos este método, debemos
+ indicar previamente que queremos utilizar el modo
+ coordinate-system-simple-shapes-p6x2: ' antes de la instrucción del propio rectángulo. Notemos que p5.js es sensible a cada caso.'
+ coordinate-system-simple-shapes-p7x1: >-
+ Finalmente podemos dibujar un rectángulo con dos puntos (la esquina superior
+ izquierda y la esquina superior derecha). El modo en este caso es
+ coordinate-system-simple-shapes-p7x2: >-
+ . Notar que este ejemplo entrega el mismo resultado en pantalla que el
+ ejemplo anterior.
+ coordinate-system-simple-shapes-p8x1: >-
+ Una vez que nos hemos familiarizado con el concepto de dibujar un
+ rectángulo, una
+ coordinate-system-simple-shapes-p8x2: ' es muy sencilla de dibujar. De hecho es idéntica al '
+ coordinate-system-simple-shapes-p8x3: ' con la diferencia de que la elipse se dibuja donde la caja que contiene al rectángulo debiera estar. El modo por defecto para la '
+ coordinate-system-simple-shapes-p8x4: ' es '
+ coordinate-system-simple-shapes-p8x5: ', en vez de '
+ coordinate-system-simple-shapes-p8x6: .
+ coordinate-system-simple-shapes-p9x1: >-
+ Ahora observemos una aplicación un poco más realista, con una pantalla de
+ dimensiones 200 por 200. Notemos el uso de la función createCanvas() para
+ especificar el tamaño de la ventana.
+ teach-desc: 'Teach a p5 workshop or class, or create teaching materials!'
+test-tutorial: null
libraries:
- Libraries: "Bibliotecas"
- core-libraries: "Bibliotecas principales"
- community-libraries: "Bibliotecas de la comunidad"
- libraries-created-by: "Creada por:"
- p5.sound: "p5.sound extiende p5 con funcionalidad de Web Audio, incluyendo entrada de audio, reproducción, análisis y síntesis."
- p5.accessibility: "p5.accessibility permite que el canvas de p5 sea más accesible a personas con discapacidad visual."
- Contributed: "Bibliotecas contribuidas"
- asciiart: "p5.asciiart te permite convertir de forma simple y fácil imágenes - a - arte ASCII dentro de p5js."
- p5.ble: "Una biblioteca que facilita la comunicación entre dispositivos BLE y bosquejos p5.js."
- blizard.js: "Una biblioteca que hace que manipular el DOM sea simple."
- p5.bots: "Con p5.bots puedes interactuar con Arduino (u otro microprocesador) desde el navegador. Usa los datos de los sensores para controlar tu bosquejo, usa un bosquejo para controlar LEDs, motores, y más."
- p5.clickable: "Biblioteca para crear botones y eventos fácilmente con p5.js. "
- p5.cmyk.js: "Espacio de color cian-magenta-amarillo-negro."
- p5.collide2D: "p5.collide2D provee herramientas para calcular detección de colisiones en geometría 2D con p5.js."
- p5.createloop: "Crea ciclos de animaciones con ruido y exporta GIF en una sola línea de código. "
- p5.dimensions: "p5.dimensions extiende las funciones de vector de p5.js para que funcione con cualquier número de dimensiones."
- p5.EasyCam: "Control de cámara 3D simple con desplazamiento, zoom y rotación inerciales. Major contributions by Thomas Diewald."
- p5.experience: "Biblioteca extensa para p5.js que agrega eventos adicionales para crear aplicaciones web basadas en el canvas. "
- p5.func: "p5.func es una extensión de p5 que provee nuevos objetos y utilidades para generación de funciones en los dominios de tiempo, frecuencia y espacio."
- p5.geolocation: "p5.geolocation provee técnicas para adquirir, observar, calcular y georeferenciar ubicaciones de usuario para p5.js."
- p5.gibber: "p5.gibber provee capacidades de secuenciamiento de música y de síntesis de audio."
- grafica.js: "grafica.js te permite añadir gráficas 2D simples pero altamente configurables a tus bosquejos de p5.js."
- p5.gui: "p5.gui genera una interfaz gráfica de usuario para tus bosquejos p5."
- p5.localmessage: "p5.provee una interfaz simple para enviar mensajes locales de un bosquejo a otro y así dibujar en múltiples ventanas!"
- mappa: "Mappa es una biblioteca que provee un conjunto de herramientas para trabajar con mapas estáticos y geo-datos, además de otras herramientas útiles para desarrollar representaciones visuales de datos con geolocalización."
- marching: "Conversión de trama a vector, isosuperficies."
- ml5.js: "ml5.js esta construido sobre TensorFlow.js y provee un acceso amigable a algoritmos de inteligencia artificial y machine learning desde el navegador."
- p5.particle: "Los objetos Particle y Fountain pueden ser usados para crear efectos controlados por datos que son definidos a través de estructuras de usuario o entrada JSON y funciones de usuario para dibujar."
- p5.play: "p5.play provee funciones de sprites, animaciones, entrada y colisión para juegos y aplicaciones afines."
- p5.Riso: "p5.Riso.js es una biblioteca para impresión de Risograph."
- rita.js: "RiTa.js provee un conjunto de objetos de procesamiento de lenguaje natural para literatura generativa."
- Rotating knobs: "Hacer perillas se puede girar con gráficos personalizados y volver rangos de valores"
- p5.scenemanager: "p5.SceneManager te ayuda a crear bosquejos con múltiples estados / escenas. Cada escena es como un bosquejo dentro del bosquejo principal."
- p5.screenPosition: "Agrega las variables screenX and screenY con las cordenadas del cursor en la pantalla."
- p5.scribble: "Dibujar primitivas 2D con una apariencia poco acabada. Creada por Janneck Wullschleger, basada en un puerto de la biblioteca original de Processing."
- p5.serial: "p5.serial permite la comunicación serial entre dispositivos que soportan serial (RS-232) y bosquejos p5 corriendo en el navegador."
- Shape5: "Shape5 is a 2D primative library for elementary students who are learning to code for the first time."
- p5.shape.js: "Una biblioteca creada para agregar formas más simples al marco p5.js."
- p5.speech: "p5.speech provee acceso simple y claro a las APIs de Habla Web y Detección de Habla, permitiendo la creación de bosquejos sencillos que pueden hablar y escuchar."
- p5.start2d.js: "extensión para p5 para crear gráficos 2D estáticos usnado px, mm, cm or inches"
- p5.tiledmap1: "p5.tiledmap provee funciones de dibujo y ayuda para incluir mapas en tus bosquejos"
- p5.touchgui: "Una biblioteca de interfaz gráfica de usuario (GUI) multi-tacto y para el ratón."
- tramontana: "Tramontana es una platforma para utilizar múltiples dispositos (iOS, Android, tramontana Board, ...) para crear ambientes interactivos o prototipar experiencias a escala."
- vida: "Vida es una biblioteca simple que agrega detección de movimiento utilizando la camara y la función de seguimiento blob a p5js."
- p5.voronoi: "p5.voronoi brinda un conjunto de herramientas para dibujar y utilizar diagramas voronoi en tus bosquejos de p5.js. "
- p5.3D: "Texto 3D e imágenes en WebGL. "
- using-a-library-title: "Usando una biblioteca"
- using-a-library1: "Una biblioteca p5.js puede ser cualquier código p5.js que extiende o añade a las funcionalidades centrales de p5.js. Existen dos tipos de bibliotecas. Las bibliotecas centrales ("
- using-a-library3: ") son parte de la distribución de p5.js, mientras que las bibliotecas contribuidas son mantenidas y desarrolladas por y de propiedad de los miembros de la comunidad de p5.js."
- using-a-library4: "Para incluir una biblioteca en tu bosquejo, enlázala en tu archivo HTML, después que hayas enlazado p5.js. Un archivo HTML como ejemplo podría lucir así:"
- create-your-own-title: "Crea tu propia biblioteca"
- create-your-own1: "p5.js acepta las bibliotecas contribuidas por la comunidad p5.js Revisa el"
- create-your-own2: "tutorial de bibliotecas"
- create-your-own3: "para revisar los detalles específicos de cómo crear una."
- create-your-own4: "¡Si has creado una biblioteca y quieres incluirla en esta página, llena este formulario!"
-
+ Libraries: Bibliotecas
+ core-libraries: Bibliotecas principales
+ community-libraries: Bibliotecas de la comunidad
+ libraries-created-by: 'Creada por:'
+ p5.sound: >-
+ p5.sound extiende p5 con funcionalidad de Web Audio, incluyendo entrada de
+ audio, reproducción, análisis y síntesis.
+ p5.accessibility: >-
+ p5.accessibility permite que el canvas de p5 sea más accesible a personas
+ con discapacidad visual.
+ asciiart: >-
+ p5.asciiart te permite convertir de forma simple y fácil imágenes - a - arte
+ ASCII dentro de p5js.
+ p5.ble: >-
+ Una biblioteca que facilita la comunicación entre dispositivos BLE y
+ bosquejos p5.js.
+ p5.bots: >-
+ Con p5.bots puedes interactuar con Arduino (u otro microprocesador) desde el
+ navegador. Usa los datos de los sensores para controlar tu bosquejo, usa un
+ bosquejo para controlar LEDs, motores, y más.
+ p5.clickable: 'Biblioteca para crear botones y eventos fácilmente con p5.js. '
+ p5.cmyk.js: Espacio de color cian-magenta-amarillo-negro.
+ p5.collide2D: >-
+ p5.collide2D provee herramientas para calcular detección de colisiones en
+ geometría 2D con p5.js.
+ p5.createloop: >-
+ Crea ciclos de animaciones con ruido y exporta GIF en una sola línea de
+ código.
+ p5.dimensions: >-
+ p5.dimensions extiende las funciones de vector de p5.js para que funcione
+ con cualquier número de dimensiones.
+ p5.EasyCam: >-
+ Control de cámara 3D simple con desplazamiento, zoom y rotación inerciales.
+ Major contributions by Thomas Diewald.
+ p5.experience: >-
+ Biblioteca extensa para p5.js que agrega eventos adicionales para crear
+ aplicaciones web basadas en el canvas.
+ p5.func: >-
+ p5.func es una extensión de p5 que provee nuevos objetos y utilidades para
+ generación de funciones en los dominios de tiempo, frecuencia y espacio.
+ p5.geolocation: >-
+ p5.geolocation provee técnicas para adquirir, observar, calcular y
+ georeferenciar ubicaciones de usuario para p5.js.
+ p5.gibber: >-
+ p5.gibber provee capacidades de secuenciamiento de música y de síntesis de
+ audio.
+ grafica.js: >-
+ grafica.js te permite añadir gráficas 2D simples pero altamente
+ configurables a tus bosquejos de p5.js.
+ p5.gui: p5.gui genera una interfaz gráfica de usuario para tus bosquejos p5.
+ p5.localmessage: >-
+ p5.provee una interfaz simple para enviar mensajes locales de un bosquejo a
+ otro y así dibujar en múltiples ventanas!
+ marching: 'Conversión de trama a vector, isosuperficies.'
+ mappa: >-
+ Mappa es una biblioteca que provee un conjunto de herramientas para trabajar
+ con mapas estáticos y geo-datos, además de otras herramientas útiles para
+ desarrollar representaciones visuales de datos con geolocalización.
+ ml5.js: >-
+ ml5.js esta construido sobre TensorFlow.js y provee un acceso amigable a
+ algoritmos de inteligencia artificial y machine learning desde el navegador.
+ p5.play: >-
+ p5.play provee funciones de sprites, animaciones, entrada y colisión para
+ juegos y aplicaciones afines.
+ p5.particle: >-
+ Los objetos Particle y Fountain pueden ser usados para crear efectos
+ controlados por datos que son definidos a través de estructuras de usuario o
+ entrada JSON y funciones de usuario para dibujar.
+ p5.Riso: p5.Riso.js es una biblioteca para impresión de Risograph.
+ rita.js: >-
+ RiTa.js provee un conjunto de objetos de procesamiento de lenguaje natural
+ para literatura generativa.
+ Rotating knobs: >-
+ Hacer perillas se puede girar con gráficos personalizados y volver rangos de
+ valores
+ p5.scenemanager: >-
+ p5.SceneManager te ayuda a crear bosquejos con múltiples estados / escenas.
+ Cada escena es como un bosquejo dentro del bosquejo principal.
+ p5.screenPosition: >-
+ Agrega las variables screenX and screenY con las cordenadas del cursor en la
+ pantalla.
+ p5.scribble: >-
+ Dibujar primitivas 2D con una apariencia poco acabada. Creada por Janneck
+ Wullschleger, basada en un puerto de la biblioteca original de Processing.
+ p5.serial: >-
+ p5.serial permite la comunicación serial entre dispositivos que soportan
+ serial (RS-232) y bosquejos p5 corriendo en el navegador.
+ Shape5: >-
+ Shape5 is a 2D primative library for elementary students who are learning to
+ code for the first time.
+ p5.shape.js: Una biblioteca creada para agregar formas más simples al marco p5.js.
+ p5.speech: >-
+ p5.speech provee acceso simple y claro a las APIs de Habla Web y Detección
+ de Habla, permitiendo la creación de bosquejos sencillos que pueden hablar y
+ escuchar.
+ p5.start2d.js: >-
+ extensión para p5 para crear gráficos 2D estáticos usnado px, mm, cm or
+ inches
+ p5.tiledmap: >-
+ p5.tiledmap provides drawing and helper functions to include maps in your
+ sketches.
+ p5.touchgui: >-
+ Una biblioteca de interfaz gráfica de usuario (GUI) multi-tacto y para el
+ ratón.
+ tramontana: >-
+ Tramontana es una platforma para utilizar múltiples dispositos (iOS,
+ Android, tramontana Board, ...) para crear ambientes interactivos o
+ prototipar experiencias a escala.
+ vida: >-
+ Vida es una biblioteca simple que agrega detección de movimiento utilizando
+ la camara y la función de seguimiento blob a p5js.
+ p5.voronoi: >-
+ p5.voronoi brinda un conjunto de herramientas para dibujar y utilizar
+ diagramas voronoi en tus bosquejos de p5.js.
+ p5.xr: Una biblioteca para crear bocetos VR y AR con p5.
+ p5.3D: 'Texto 3D e imágenes en WebGL. '
+ using-a-library-title: Usando una biblioteca
+ using-a-library1: >-
+ Una biblioteca p5.js puede ser cualquier código p5.js que extiende o añade a
+ las funcionalidades centrales de p5.js. Existen dos tipos de bibliotecas.
+ Las bibliotecas centrales (
+ using-a-library3: >-
+ ) son parte de la distribución de p5.js, mientras que las bibliotecas
+ contribuidas son mantenidas y desarrolladas por y de propiedad de los
+ miembros de la comunidad de p5.js.
+ using-a-library4: >-
+ Para incluir una biblioteca en tu bosquejo, enlázala en tu archivo HTML,
+ después que hayas enlazado p5.js. Un archivo HTML como ejemplo podría lucir
+ así:
+ create-your-own-title: Crea tu propia biblioteca
+ create-your-own1: p5.js acepta las bibliotecas contribuidas por la comunidad p5.js Revisa el
+ create-your-own2: tutorial de bibliotecas
+ create-your-own3: para revisar los detalles específicos de cómo crear una.
+ create-your-own4: >-
+ ¡Si has creado una biblioteca y quieres incluirla en esta página, llena este
+ formulario!
community:
- community-title: "Comunidad"
- community-statement-title: "Declaración de comunidad en torno a p5.js"
- community-statement1: "p5.js es una comunidad interesada en explorar la creación de arte y diseño con tecnología."
- community-statement2: "Somos una comunidad de, y en solidaridad con, gente de todas las identidades y expresiones de género, orientación sexual, raza, etnicidad, lenguaje, neurotipo, tamaño, habilidad, clase, religión, cultura, subcultura, opinión política, edad, nivel de habilidades, ocupación y bagaje. Reconocemos que no todos tienen el tiempo, medios económicos o la capacidad de participar activamente, pero sí reconocemos y promovemos el involucramiento de todo tipo. Facilitamos y fomentamos tanto acceso como empoderamiento. Todos somos estudiantes."
- community-statement3: "Nos gustan estos hashtags: #noCodeSnobs (porque valoramos la comunidad por sobre la eficiencia), #newKidLove (porque todos empezamos en alguna parte), #unassumeCore (porque no asumimos conocimiento previo) y #BlackLivesMatter (obviamente)."
- in-practice-title: "En la práctica:"
- in-practice1: " No somos programadores snob. No asumimos conocimiento previo ni damos por sentado que hay cosas que todos deberían saber. "
- in-practice2: "Insistimos en involucrarnos de manera activa en las peticiones de respuesn, sin importar su complejidad."
- in-practice3: "Le damos la bienvenida a los novatos y priorizamos la educación de otros. Apuntamos a aproximarnos a todas las tareas con el entusiasmo de un novato. Porque creemos que son tan importantes en este esfuerzo como los expertos."
- in-practice4: "Hacemos un esfuerzo constante en activamente reconocer y validar múltiples tipos de contribuciones."
- in-practice5: "Siempre estamos dispuestos a ofrecer ayuda y consejo."
- in-times-conflict-title: "En tiempos de conflicto:"
- in-times-conflict1: "Escuchamos"
- in-times-conflict2: "Comunicamos claramente y reconocemos los sentimientos del otro."
- in-times-conflict3: "Admitimos nuestros errores, pedimos disculpas, y aceptamos responsabilidad por nuestras acciones."
- in-times-conflict4: "Buscamos continuamente mejorar nosotros mismos y nuestra comunidad."
- in-times-conflict5: "Mantenemos nuestra comunidad respetuosa y abierta."
- in-times-conflict6: "Hacemos que todos se sientan escuchados."
- in-times-conflict7: "Somos conscientes y amables en nuestras interacciones."
- in-the-future-title: "En el futuro:"
- in-the-future1: "El futuro es ahora."
- notes-title: "Notes"
- notes1: "Please also see our "
- notes2: "p5.js Code of Conduct"
- notes3: ". Esta Declaración de comunidad en torno a p5.js está licenciada bajo "
- notes4: "Licencia de Creative Commons"
- notes5: ". Por favor comparte y remezcla con atribución."
- contribute-title: "Contribuye"
- contribute1: "Nuestra comunidad siempre está buscando entusiastas para ayudar de diferentes maneras."
- develop-title: "Desarrolla."
- develop1: "GitHub"
- develop2: " es el principal lugar donde se almacena el código, se documentan los problemas y se discute sobre el código. Revisa el "
- develop3: " tutorial de desarrollo"
- develop4: " para introducirte al tema, o "
- develop5: "crea tu propia biblioteca."
- document-title: "Documenta."
- document1: " Todos amamos la documentación. Necesitamos ayuda "
- document2: "agregando ejemplos"
- document3: ", "
- document4: " añadiendo documentación"
- document5: " y creando tutoriales."
- teach-title: "Enseña."
- teach1: " Haz un taller, da una clase, enséñale a tus amigos y colaboradores! Etiqueta a @p5xjs en Twitter y haremos lo posible para compartir lo que estás haciendo."
- create-title: "Crea."
- create1: " p5.js está buscando diseñadores, artistas y programadores que contribuyan con una obra increíble y creativa para ser mostrada en la página principal y así inspirar al resto. Envía tu trabajo a "
- create2: "hello@p5js.org"
- create3: "."
- donate-title: "Dona."
- donate1: " p5.js es gratuito y de código abierto y hecho por artistas. Ayuda al desarrollo de p5.js a través de una donación a la "
- donate2: "Processing Foundation"
- donate3: "."
- contributors-conference-title: "Conferencia de contribuyentes"
- contributors-conference1: "Anque la mayor parte del trabajo sucede en línea, también nos reunimos en persona. Hemos tenido dos conferencias de contribuyentes realizadas en "
- contributors-conference2: " en la Universidad Carnegie Mellon en Pittsburgh, PA. Artistas, diseñadores, desarrolladores, y educadores se reunieron para llevar el proyecto p5.js adelante."
- participants-title: "Participantes"
- support-title: "Apoyo"
- support1: "Nuestra conferencia de contribuyentes fue realizada en el"
- support2: "en Carnegie Mellon University, un laboratorio académico para investigación atípica, anti-disciplinaria, e inter-institucional, en la intersección del arte, la ciencia, la tecnología y la cultura."
- support3: "Este evento fue posible gracias a fondos del"
- support4: "y el generoso apoyo de"
- support5: "y"
- support6: "¡Gracias!"
- mailing-list-title: "Boletín"
- mailing-list-1: "Ingresa tu dirección de correo electrónico para recibir ocasionalmente novedades de la Processing Foundation."
-
- 2015contributors-conference-title: "Conferencia de contribuyentes 2015"
- 2015contributors-conference-date: "Mayo 25-31"
- 2015contributors-conference1: "Un diverso grupo de aproximadamente 30 participantes se reunieron durante una semana en el "
- 2015contributors-conference2: ", haciendo avances en el código, la documentación y las herramientas de extensión para la comunidad en torno al ambiente de programación p5.js. Los participantes vinieron de lugares tan distantes como Hong Kong, Seattle, Los Angeles, Boston y New York. La mayoría eran profesionales que trabajan en los campos de tecnología creativa, diseño de interacciónn, y artes mediales, pero el grupo también incluyó a una media docena de estudiantes de pregrado y posgrado de las escuelas de Arte y Arquitectura de Carnegie Mellon University."
- 2015contributors-conference3: "Fotos por Taeyoon Choi"
- 2015contributors-conference-diversity-title: "Diversidad"
- 2015contributors-conference-diversity1: "Además de desarrollo técnico, otros de los principales enfoques de esta conferencia fueron extensión y diversidad. La conferencia comenzó con un panel"
- 2015contributors-conference-diversity2: "Diversidad: Siete voces discuten sobre raza, género, habilidades & clase en FLOSS e Internet"
- 2015contributors-conference-diversity3: ". "
- 2015contributors-conference-diversity4: "Organizado por"
- 2015contributors-conference-diversity5: "y"
- 2015contributors-conference-diversity6: ", "
- 2015contributors-conference-diversity7: "el panel ocurrió el martes 25 de mayo 2015 en el Kresge Auditorium en Carnegie Mellon University. Los oradores incluyeron"
- 2015contributors-conference-diversity8: "y"
- 2015contributors-conference-diversity9: "."
- 2015cc_1: "Un diverso grupo de participantes sonríe y hace un signo de p5 con sus manos"
- 2015cc_2: "Participantes saltan, sonríen y alzan sus manos en el aire sobre un campo de césped"
- 2015cc_3: "Mujer presenta la Declaración de comunidad en torno a p5.js utilizando su computadora"
- 2015cc_4: "Mujer al micrófono habla expresivamente mientras que dos colaboradores observan"
- 2015cc_5: "Participantes sonríen con atención al frente del aula"
- 2015cc_6: "Mujer al micrófono lee sobre p5.js into a tres estudiantas"
- 2015cc_7: "Participantes se sientan en un círculo alrededor de una pizarra con notas de colores mientras que una estudianta habla al micrófono"
- 2015cc_8: "Participants sit around a table looking at each others laptops and compare code "
- 2015cc_9: "Pizarra con notas de distintos colores y notas sobre programación "
- 2015cc_10: "Mujer al micrófono habla sobre la importancia de valorar distintas habilidades mientras que un grupo de participantes en sus computadoras observan su presentación en un aula "
- 2015cc_11: "Mujer habla desde un podio en un auditorio mientras que tres participantes se sientan en el escenario y otros tres participan en una videollamada "
- 2015cc_12: "Vista aérea de un aula con participantes trabajando en sus computadoras portátiles "
- 2015cc_13: "Cinco personas discutiendo en un círculo "
- 2015cc_14: "Cinco personas en un círculo con sus computadoras portátiles compartiendo notas "
- 2015cc_15: "Hombe al micrófono habla a un grupo de participantes dentro de un aula "
- 2019contributors-conference-title: "Conferencia de contribuyentes 2019"
- 2019contributors-conference-date: "Agosto 13-18"
- 2019contributors-conference1: "Un grupo interdisciplinario de 35 participantes se reunió en "
- 2019contributors-conference2: ", para programar, documentar, crear herramientas para la comunidad y explorar el estado del ambiente de programación p5.js. Los participantes vinieron de diversos campos incluyendo tecnología creativa, diseño de interación y artes new media. La conferencia se enfocó en promover el diálogo a través de un abordaje multidisciplinario. Grupos de trabajo se enfocaron en varias áreas temáticas: Acceso; Música y Código en Performance; el Estado de la Tecnología; e Internacionalización."
- 2019contributors-conference3: "Videos por Qianqian Ye"
- 2019contributors-conference4: "Fotos por Jacquelyn Johnson"
- outputs: "Resultados"
- output1: ". La implementación de patrones flexibles con formas de triángulos, cuadrados, hexágonos y octágonos para p5.js. Creado por Aren Davey."
- output2: ". Una serie de plantillas para construir juegos para varios jugadores en distintos dispositivos donde multiples clientes se conectan a un servidor. Creado por L05."
- output3: "Experimentos utilizando"
- output3-1: ", pruebas de una implementación temprana de softCompile, interface OSC y conectividad aumentada con un demo para su uso con MIDI. ¡Un ambiente de vj colaborativo para codificar en vivo con p5.js! Creado por Ted Davis."
- output4: "Un panel sobre género y afro-desendencia en espacios virtuales liderado por American Artist, con shawné michaelain holloway y LaJuné McMillian."
- output5: "Talleres liderados por Everest Pipkin y Jon Chambers."
- output6: "Un prototipo de "
- output6-1: "interface notebook para p5.js."
- output6-2: "Creado por Allison Parrish."
- output7: "Nuevas instalaciones artísticas por by Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, y Jon Chambers."
- output8: "Herramientas para contribuyentes globales de p5.js."
- output8-1: "Creado por Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian Ye, Dorothy R. Santos, y Yasheng She."
- output9: "Como escribir código creativo no-violento."
- output9-1: " Una revista liderada por Olivia Ross."
- output10: "Una reforma del sitio web para accesibilidad. Incluyendo actualizaciones para accesibilidad usando lectores de pantalla, y mejoras a las páginas principal, descargas, empezar y referencia. Con contribuciones de Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren McCarthy y Evelyn Masso."
- output11: "Presentaciones colaborativas por Luisa Pereira, Jun Shern Chan, Shefali Nayak, Sona Lee, Ted Davis, y Carlos Garcia."
- output12: "Una presentación por Natalie Braginsky."
- output13: "El diseño de un sistema de bibliotecas para el editor de p5.js. Creado por Cassie Tarakajian y Luca Damasco."
- output14: "Prototipos para conectar p5 a otras bibliotecas. Creado por Alex Yixuan Xu y Lauren Valley."
- output15: "Una fogata de cierre liderada por Golan Levin."
- 2019cc_1: "Hombre en un podio de la universidad dando una presentación a un aula llena"
- 2019cc_2: "Participantes sentados en una mesa larga almorzando y conversando"
- 2019cc_3: "Participantes en un aula, algunos trabajando en sus computadoras portátiles, otros conversando "
- 2019cc_4: "Aula con participantes trabajando en sus computadoras portátiles"
- 2019cc_5: "Participantes reunidos a oscuras en un un aula"
- 2019cc_6: "Mujer presenta en un aula con participantes diversos"
- 2019cc_7: "Participantes conversan en un aula llena de personas"
- 2019cc_8: "Mujer al micrófono habla con participantes en un aula"
- 2019cc_9: "Participante en el podio habla frente a un texto proyectado sobre el problema de anonimizar datos "
- 2019cc_10: "Person with a microphone speaking to fellow participants in front of text that reads p5.js will not add any new features except those that increase access"
- 2019cc_11: "Mujer al micrófono habla con participantes en un aula"
- 2019cc_12: "Hombre al micrófono habla con participantes"
- 2019cc_13: "Participantes sentados en un aula escuchando atentamente a quienes presentan "
- 2019cc_14: "Participantes sentados en un aula escuchando atentamente a quienes presentan "
- 2019cc_15: "Mujer al micrófono habla con participantes sobre los límites sagrados del en proyecto detrás suyo "
- 2019cc_16: "Vista aéra de participantes escuchando un panel y viendo una proyección de una imagen en 3d sobre persona "
- 2019cc_17: "Participantes sentados al rededor de una mesa con sus computadoras portátiles observando el código en una pantalla"
- 2019cc_18: "Mujer sentada al lado de un oso de pelucho del mismo tamaño trabaja en su computadora "
- 2019cc_19: "Participantes de pie sonriendo al aire libre "
- 2019cc_20: "Cuatro participantes de pie conversan en un círculo"
- 2019cc_21: "Participantes almorzando juntos sentados al aire libre"
- 2019cc_22: "Participantes sentados al rededor de una mesa en forma de U video hacia el frente del aula"
- 2019cc_23: "Hombre sentado al frente del aula hablando enérgicamente al micrófono "
- 2019cc_24: "Foto grupal de participantes con sus manos en el aire sonriendo con entusiasmo"
- 2019cc_25: "Grupo de personas sentadas al rededor de una fogata hecha con cuatro monitores LCD."
-
+ community-title: Comunidad
+ community-statement-title: Declaración de comunidad en torno a p5.js
+ community-statement1: >-
+ p5.js es una comunidad interesada en explorar la creación de arte y diseño
+ con tecnología.
+ community-statement2: >-
+ Somos una comunidad de, y en solidaridad con, gente de todas las identidades
+ y expresiones de género, orientación sexual, raza, etnicidad, lenguaje,
+ neurotipo, tamaño, habilidad, clase, religión, cultura, subcultura, opinión
+ política, edad, nivel de habilidades, ocupación y bagaje. Reconocemos que no
+ todos tienen el tiempo, medios económicos o la capacidad de participar
+ activamente, pero sí reconocemos y promovemos el involucramiento de todo
+ tipo. Facilitamos y fomentamos tanto acceso como empoderamiento. Todos somos
+ estudiantes.
+ community-statement3: >-
+ Nos gustan estos hashtags: #noCodeSnobs (porque valoramos la comunidad por
+ sobre la eficiencia), #newKidLove (porque todos empezamos en alguna parte),
+ #unassumeCore (porque no asumimos conocimiento previo) y #BlackLivesMatter
+ (obviamente).
+ in-practice-title: 'En la práctica:'
+ in-practice1: ' No somos programadores snob. No asumimos conocimiento previo ni damos por sentado que hay cosas que todos deberían saber. '
+ in-practice2: >-
+ Insistimos en involucrarnos de manera activa en las peticiones de respuesn,
+ sin importar su complejidad.
+ in-practice3: >-
+ Le damos la bienvenida a los novatos y priorizamos la educación de otros.
+ Apuntamos a aproximarnos a todas las tareas con el entusiasmo de un novato.
+ Porque creemos que son tan importantes en este esfuerzo como los expertos.
+ in-practice4: >-
+ Hacemos un esfuerzo constante en activamente reconocer y validar múltiples
+ tipos de contribuciones.
+ in-practice5: Siempre estamos dispuestos a ofrecer ayuda y consejo.
+ in-times-conflict-title: 'En tiempos de conflicto:'
+ in-times-conflict1: Escuchamos
+ in-times-conflict2: Comunicamos claramente y reconocemos los sentimientos del otro.
+ in-times-conflict3: >-
+ Admitimos nuestros errores, pedimos disculpas, y aceptamos responsabilidad
+ por nuestras acciones.
+ in-times-conflict4: Buscamos continuamente mejorar nosotros mismos y nuestra comunidad.
+ in-times-conflict5: Mantenemos nuestra comunidad respetuosa y abierta.
+ in-times-conflict6: Hacemos que todos se sientan escuchados.
+ in-times-conflict7: Somos conscientes y amables en nuestras interacciones.
+ in-the-future-title: 'En el futuro:'
+ in-the-future1: El futuro es ahora.
+ notes-title: Notes
+ notes1: 'Please also see our '
+ notes2: p5.js Code of Conduct
+ notes3: '. Esta Declaración de comunidad en torno a p5.js está licenciada bajo '
+ notes4: Licencia de Creative Commons
+ notes5: . Por favor comparte y remezcla con atribución.
+ contribute-title: Contribuye
+ contribute1: >-
+ Nuestra comunidad siempre está buscando entusiastas para ayudar de
+ diferentes maneras.
+ develop-title: Desarrolla.
+ develop1: GitHub
+ develop2: ' es el principal lugar donde se almacena el código, se documentan los problemas y se discute sobre el código. Revisa el '
+ develop3: ' tutorial de desarrollo'
+ develop4: ' para introducirte al tema, o '
+ develop5: crea tu propia biblioteca.
+ document-title: Documenta.
+ document1: ' Todos amamos la documentación. Necesitamos ayuda '
+ document2: agregando ejemplos
+ document3: ', '
+ document4: ' añadiendo documentación'
+ document5: ' y creando tutoriales.'
+ teach-title: Enseña.
+ teach1: ' Haz un taller, da una clase, enséñale a tus amigos y colaboradores! Etiqueta a @p5xjs en Twitter y haremos lo posible para compartir lo que estás haciendo.'
+ create-title: Crea.
+ create1: ' p5.js está buscando diseñadores, artistas y programadores que contribuyan con una obra increíble y creativa para ser mostrada en la página principal y así inspirar al resto. Envía tu trabajo a '
+ create2: hello@p5js.org
+ create3: .
+ donate-title: Dona.
+ donate1: ' p5.js es gratuito y de código abierto y hecho por artistas. Ayuda al desarrollo de p5.js a través de una donación a la '
+ donate2: Processing Foundation
+ donate3: .
+ contributors-conference-title: Conferencia de contribuyentes
+ contributors-conference1: >-
+ Anque la mayor parte del trabajo sucede en línea, también nos reunimos en
+ persona. Hemos tenido dos conferencias de contribuyentes realizadas en
+ contributors-conference2: ' en la Universidad Carnegie Mellon en Pittsburgh, PA. Artistas, diseñadores, desarrolladores, y educadores se reunieron para llevar el proyecto p5.js adelante.'
+ participants-title: Participantes
+ support-title: Apoyo
+ support1: Nuestra conferencia de contribuyentes fue realizada en el
+ support2: >-
+ en Carnegie Mellon University, un laboratorio académico para investigación
+ atípica, anti-disciplinaria, e inter-institucional, en la intersección del
+ arte, la ciencia, la tecnología y la cultura.
+ support3: Este evento fue posible gracias a fondos del
+ support4: y el generoso apoyo de
+ support5: 'y'
+ support6: ¡Gracias!
+ mailing-list-title: Boletín
+ mailing-list-1: >-
+ Ingresa tu dirección de correo electrónico para recibir ocasionalmente
+ novedades de la Processing Foundation.
+ 2015contributors-conference-title: Conferencia de contribuyentes 2015
+ 2015contributors-conference-date: Mayo 25-31
+ 2015contributors-conference1: >-
+ Un diverso grupo de aproximadamente 30 participantes se reunieron durante
+ una semana en el
+ 2015contributors-conference2: >-
+ , haciendo avances en el código, la documentación y las herramientas de
+ extensión para la comunidad en torno al ambiente de programación p5.js. Los
+ participantes vinieron de lugares tan distantes como Hong Kong, Seattle, Los
+ Angeles, Boston y New York. La mayoría eran profesionales que trabajan en
+ los campos de tecnología creativa, diseño de interacciónn, y artes mediales,
+ pero el grupo también incluyó a una media docena de estudiantes de pregrado
+ y posgrado de las escuelas de Arte y Arquitectura de Carnegie Mellon
+ University.
+ 2015contributors-conference3: Fotos por Taeyoon Choi
+ 2015contributors-conference-diversity-title: Diversidad
+ 2015contributors-conference-diversity1: >-
+ Además de desarrollo técnico, otros de los principales enfoques de esta
+ conferencia fueron extensión y diversidad. La conferencia comenzó con un
+ panel
+ 2015contributors-conference-diversity2: >-
+ Diversidad: Siete voces discuten sobre raza, género, habilidades & clase
+ en FLOSS e Internet
+ 2015contributors-conference-diversity3: '. '
+ 2015contributors-conference-diversity4: Organizado por
+ 2015contributors-conference-diversity5: 'y'
+ 2015contributors-conference-diversity6: ', '
+ 2015contributors-conference-diversity7: >-
+ el panel ocurrió el martes 25 de mayo 2015 en el Kresge Auditorium en
+ Carnegie Mellon University. Los oradores incluyeron
+ 2015contributors-conference-diversity8: 'y'
+ 2015contributors-conference-diversity9: .
+ 2015cc_1: Un diverso grupo de participantes sonríe y hace un signo de p5 con sus manos
+ 2015cc_2: >-
+ Participantes saltan, sonríen y alzan sus manos en el aire sobre un campo de
+ césped
+ 2015cc_3: >-
+ Mujer presenta la Declaración de comunidad en torno a p5.js utilizando su
+ computadora
+ 2015cc_4: >-
+ Mujer al micrófono habla expresivamente mientras que dos colaboradores
+ observan
+ 2015cc_5: Participantes sonríen con atención al frente del aula
+ 2015cc_6: Mujer al micrófono lee sobre p5.js into a tres estudiantas
+ 2015cc_7: >-
+ Participantes se sientan en un círculo alrededor de una pizarra con notas de
+ colores mientras que una estudianta habla al micrófono
+ 2015cc_8: >-
+ Participants sit around a table looking at each others laptops and compare
+ code
+ 2015cc_9: 'Pizarra con notas de distintos colores y notas sobre programación '
+ 2015cc_10: >-
+ Mujer al micrófono habla sobre la importancia de valorar distintas
+ habilidades mientras que un grupo de participantes en sus computadoras
+ observan su presentación en un aula
+ 2015cc_11: >-
+ Mujer habla desde un podio en un auditorio mientras que tres participantes
+ se sientan en el escenario y otros tres participan en una videollamada
+ 2015cc_12: >-
+ Vista aérea de un aula con participantes trabajando en sus computadoras
+ portátiles
+ 2015cc_13: 'Cinco personas discutiendo en un círculo '
+ 2015cc_14: >-
+ Cinco personas en un círculo con sus computadoras portátiles compartiendo
+ notas
+ 2015cc_15: 'Hombe al micrófono habla a un grupo de participantes dentro de un aula '
+ 2019contributors-conference-title: Conferencia de contribuyentes 2019
+ 2019contributors-conference-date: Agosto 13-18
+ 2019contributors-conference1: 'Un grupo interdisciplinario de 35 participantes se reunió en '
+ 2019contributors-conference2: >-
+ , para programar, documentar, crear herramientas para la comunidad y
+ explorar el estado del ambiente de programación p5.js. Los participantes
+ vinieron de diversos campos incluyendo tecnología creativa, diseño de
+ interación y artes new media. La conferencia se enfocó en promover el
+ diálogo a través de un abordaje multidisciplinario. Grupos de trabajo se
+ enfocaron en varias áreas temáticas: Acceso; Música y Código en Performance;
+ el Estado de la Tecnología; e Internacionalización.
+ 2019contributors-conference3: Videos por Qianqian Ye
+ 2019contributors-conference4: Fotos por Jacquelyn Johnson
+ outputs: Resultados
+ output1: >-
+ . La implementación de patrones flexibles con formas de triángulos,
+ cuadrados, hexágonos y octágonos para p5.js. Creado por Aren Davey.
+ output2: >-
+ . Una serie de plantillas para construir juegos para varios jugadores en
+ distintos dispositivos donde multiples clientes se conectan a un servidor.
+ Creado por L05.
+ output3: Experimentos utilizando
+ output3-1: >-
+ , pruebas de una implementación temprana de softCompile, interface OSC y
+ conectividad aumentada con un demo para su uso con MIDI. ¡Un ambiente de vj
+ colaborativo para codificar en vivo con p5.js! Creado por Ted Davis.
+ output4: >-
+ Un panel sobre género y afro-desendencia en espacios virtuales liderado por
+ American Artist, con shawné michaelain holloway y LaJuné McMillian.
+ output5: Talleres liderados por Everest Pipkin y Jon Chambers.
+ output6: 'Un prototipo de '
+ output6-1: interface notebook para p5.js.
+ output6-2: Creado por Allison Parrish.
+ output7: >-
+ Nuevas instalaciones artísticas por by Stalgia Grigg, LaJuné McMillian,
+ Aatish Bhatia, y Jon Chambers.
+ output8: Herramientas para contribuyentes globales de p5.js.
+ output8-1: >-
+ Creado por Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian
+ Ye, Dorothy R. Santos, y Yasheng She.
+ output9: Como escribir código creativo no-violento.
+ output9-1: ' Una revista liderada por Olivia Ross.'
+ output10: >-
+ Una reforma del sitio web para accesibilidad. Incluyendo actualizaciones
+ para accesibilidad usando lectores de pantalla, y mejoras a las páginas
+ principal, descargas, empezar y referencia. Con contribuciones de Claire
+ Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross, Luis
+ Morales-Navarro, Lauren McCarthy y Evelyn Masso.
+ output11: >-
+ Presentaciones colaborativas por Luisa Pereira, Jun Shern Chan, Shefali
+ Nayak, Sona Lee, Ted Davis, y Carlos Garcia.
+ output12: Una presentación por Natalie Braginsky.
+ output13: >-
+ El diseño de un sistema de bibliotecas para el editor de p5.js. Creado por
+ Cassie Tarakajian y Luca Damasco.
+ output14: >-
+ Prototipos para conectar p5 a otras bibliotecas. Creado por Alex Yixuan Xu y
+ Lauren Valley.
+ output15: Una fogata de cierre liderada por Golan Levin.
+ 2019cc_1: Hombre en un podio de la universidad dando una presentación a un aula llena
+ 2019cc_2: Participantes sentados en una mesa larga almorzando y conversando
+ 2019cc_3: >-
+ Participantes en un aula, algunos trabajando en sus computadoras portátiles,
+ otros conversando
+ 2019cc_4: Aula con participantes trabajando en sus computadoras portátiles
+ 2019cc_5: Participantes reunidos a oscuras en un un aula
+ 2019cc_6: Mujer presenta en un aula con participantes diversos
+ 2019cc_7: Participantes conversan en un aula llena de personas
+ 2019cc_8: Mujer al micrófono habla con participantes en un aula
+ 2019cc_9: >-
+ Participante en el podio habla frente a un texto proyectado sobre el
+ problema de anonimizar datos
+ 2019cc_10: >-
+ Person with a microphone speaking to fellow participants in front of text
+ that reads p5.js will not add any new features except those that increase
+ access
+ 2019cc_11: Mujer al micrófono habla con participantes en un aula
+ 2019cc_12: Hombre al micrófono habla con participantes
+ 2019cc_13: >-
+ Participantes sentados en un aula escuchando atentamente a quienes
+ presentan
+ 2019cc_14: >-
+ Participantes sentados en un aula escuchando atentamente a quienes
+ presentan
+ 2019cc_15: >-
+ Mujer al micrófono habla con participantes sobre los límites sagrados del en
+ proyecto detrás suyo
+ 2019cc_16: >-
+ Vista aéra de participantes escuchando un panel y viendo una proyección de
+ una imagen en 3d sobre persona
+ 2019cc_17: >-
+ Participantes sentados al rededor de una mesa con sus computadoras
+ portátiles observando el código en una pantalla
+ 2019cc_18: >-
+ Mujer sentada al lado de un oso de pelucho del mismo tamaño trabaja en su
+ computadora
+ 2019cc_19: 'Participantes de pie sonriendo al aire libre '
+ 2019cc_20: Cuatro participantes de pie conversan en un círculo
+ 2019cc_21: Participantes almorzando juntos sentados al aire libre
+ 2019cc_22: >-
+ Participantes sentados al rededor de una mesa en forma de U video hacia el
+ frente del aula
+ 2019cc_23: 'Hombre sentado al frente del aula hablando enérgicamente al micrófono '
+ 2019cc_24: >-
+ Foto grupal de participantes con sus manos en el aire sonriendo con
+ entusiasmo
+ 2019cc_25: >-
+ Grupo de personas sentadas al rededor de una fogata hecha con cuatro
+ monitores LCD.
books:
- books-title: "Libros"
- book-1-title: "Getting Started with p5.js"
- book-1-authors: "Lauren McCarthy, Casey Reas, y Ben Fry. Illustrations by Taeyoon Choi."
- book-1-publisher: "Publicado 2015, Maker Media. "
- book-1-pages: "246 páginas. "
- book-1-type: "Tapa blanda. "
- book-1-description: "Escrito por la desarolladora principal de p5.js y los fundadores de Processing, este libro provee una introducción a las posibilidades creativas de la web actual, usando Javascript y HTML."
- book-1-order-a: "Ordena desde O'Reilly"
- book-1-order-b: "Ordena desde Amazon"
- book-2-title: "Introducción a p5.js (edición en español)"
- book-2-authors: "Lauren McCarthy, Casey Reas, y Ben Fry. Traducido por Aarón Montoya-Moraga. Ilustraciones de Taeyoon Choi."
- book-2-publisher: "Publicado 2018, Processing Foundation, Inc. "
- book-2-pages: "246 páginas. "
- book-2-type: "Tapa blanda. "
- book-2-description: "Escrito por la desarolladora principal de p5.js y los fundadores de Processing, este libro provee una introducción a las posibilidades creativas de la web actual, usando Javascript y HTML."
- book-2-order-a: "Ordena el pdf desde The Processing Foundation Press"
- book-2-order-b: "Ordena la versión física desde Amazon"
- book-3-title: "Generative Design"
- book-3-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-3-publisher: "Publicado 2018, Princeton Architectural Press; Reprint edition. "
- book-3-pages: "255 páginas. "
- book-3-type: "Tapa blanda. "
- book-3-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-3-order-a: "Ordena desde Princeton Architectural Press"
- book-3-order-b: "Ordena desde Amazon"
- book-4-title: "Generative Gestaltung (German Edition)"
- book-4-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-4-publisher: "Publicado 2018, Schmidt Hermann Verlag. "
- book-4-pages: "256 páginas. "
- book-4-type: "Tapa dura. "
- book-4-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-4-order-a: "Ordena desde Verlag Hermann Schmidt"
- book-4-order-b: "Ordena desde Amazon"
- book-5-title: "Learn JavaScript with p5.js"
- book-5-authors: "Engin Arslan."
- book-5-publisher: "Publicado 2018, Apress. "
- book-5-pages: "217 páginas. "
- book-5-type: "Tapa blanda. "
- book-5-description: "Learn coding from scratch in a highly engaging and visual manner using the vastly popular JavaScript with the programming library p5.js. The skills you will acquire from this book are highly transferable to a myriad of industries and can be used towards building web applications, programmable robots, or generative art. "
- book-5-order-a: "Ordena desde Apress"
- book-5-order-b: "Ordena desde Amazon"
-
+ books-title: Libros
+ book-1-title: Getting Started with p5.js
+ book-1-authors: 'Lauren McCarthy, Casey Reas, y Ben Fry. Illustrations by Taeyoon Choi.'
+ book-1-publisher: 'Publicado 2015, Maker Media. '
+ book-1-pages: '246 páginas. '
+ book-1-type: 'Tapa blanda. '
+ book-1-description: >-
+ Escrito por la desarolladora principal de p5.js y los fundadores de
+ Processing, este libro provee una introducción a las posibilidades creativas
+ de la web actual, usando Javascript y HTML.
+ book-1-order-a: Ordena desde O'Reilly
+ book-1-order-b: Ordena desde Amazon
+ book-2-title: Introducción a p5.js (edición en español)
+ book-2-authors: >-
+ Lauren McCarthy, Casey Reas, y Ben Fry. Traducido por Aarón Montoya-Moraga.
+ Ilustraciones de Taeyoon Choi.
+ book-2-publisher: 'Publicado 2018, Processing Foundation, Inc. '
+ book-2-pages: '246 páginas. '
+ book-2-type: 'Tapa blanda. '
+ book-2-description: >-
+ Escrito por la desarolladora principal de p5.js y los fundadores de
+ Processing, este libro provee una introducción a las posibilidades creativas
+ de la web actual, usando Javascript y HTML.
+ book-2-order-a: Ordena el pdf desde The Processing Foundation Press
+ book-2-order-b: Ordena la versión física desde Amazon
+ book-3-title: Generative Design
+ book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-3-publisher: 'Publicado 2018, Princeton Architectural Press; Reprint edition. '
+ book-3-pages: '255 páginas. '
+ book-3-type: 'Tapa blanda. '
+ book-3-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-3-order-a: Ordena desde Princeton Architectural Press
+ book-3-order-b: Ordena desde Amazon
+ book-4-title: Generative Gestaltung (German Edition)
+ book-4-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-4-publisher: 'Publicado 2018, Schmidt Hermann Verlag. '
+ book-4-pages: '256 páginas. '
+ book-4-type: 'Tapa dura. '
+ book-4-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-4-order-a: Ordena desde Verlag Hermann Schmidt
+ book-4-order-b: Ordena desde Amazon
+ book-5-title: Learn JavaScript with p5.js
+ book-5-authors: Engin Arslan.
+ book-5-publisher: 'Publicado 2018, Apress. '
+ book-5-pages: '217 páginas. '
+ book-5-type: 'Tapa blanda. '
+ book-5-description: >-
+ Learn coding from scratch in a highly engaging and visual manner using the
+ vastly popular JavaScript with the programming library p5.js. The skills you
+ will acquire from this book are highly transferable to a myriad of
+ industries and can be used towards building web applications, programmable
+ robots, or generative art.
+ book-5-order-a: Ordena desde Apress
+ book-5-order-b: Ordena desde Amazon
+ book-6-title: 'Aesthetic Programming: A Handbook of Software Studies'
+ book-6-authors: 'Winnie Soon, Geoff Cox. '
+ book-6-publisher: 'Publicado en 2020, por Open Humanities Press. '
+ book-6-pages: '298 páginas. '
+ book-6-type: Tapa dura.
+ book-6-description: >-
+ Usando p5.js, este libro introduce y demuestra la práctica reflexiva de la
+ programación estética, promoviendo aprender a programar como una forma de
+ entender y cuestaionar los objetos y paradigmas tecnológios existentes, y
+ explorar el potencial de reprogramar sistemas más amplios en las esferas
+ económica, social y técnica.
+ book-6-order-a: Descarga en PDF (gratis)
+ book-6-order-b: Comprar en Barnes & Noble
examples:
- Examples: "Ejemplos"
- back-examples: "Volver a Ejemplos"
- Structure: "Estructura"
- Form: "Forma"
- Data: "Datos"
- Arrays: "Arreglos"
- Control: "Control"
- Image: "Imagen"
- Color: "Color"
- Math: "Matemática"
- Simulate: "Simulación"
- Interaction: "Interacción"
- Objects: "Objetos"
- Lights: "Luces"
- Motion: "Movimiento"
- Instance_Mode: "Modo Instancia"
- Dom: "DOM"
- Drawing: "Dibujo"
- Transform: "Transformar"
- Typography: "Tipografía"
- 3D: "3D"
- Input: "Input"
- Sound: "Sonido"
- Advanced_Data: "Avanzado Datos"
- Mobile: "Móvil"
- Hello_P5: "Hola p5"
-
+ Examples: Ejemplos
+ back-examples: Volver a Ejemplos
+ Structure: Estructura
+ Form: Forma
+ Data: Datos
+ Arrays: Arreglos
+ Control: Control
+ Image: Imagen
+ Color: Color
+ Math: Matemática
+ Simulate: Simulación
+ Interaction: Interacción
+ Objects: Objetos
+ Lights: Luces
+ Motion: Movimiento
+ Instance_Mode: Modo Instancia
+ Dom: DOM
+ Drawing: Dibujo
+ Transform: Transformar
+ Typography: Tipografía
+ 3D: 3D
+ Input: Input
+ Advanced_Data: Avanzado Datos
+ Sound: Sonido
+ Mobile: Móvil
+ Hello_P5: Hola p5
reference:
- Reference: "Referencia"
-
+ Reference: Referencia
showcase:
- showcase-title: "Showcase"
- showcase-intro1: "Presentamos Showcase, creada por "
- showcase-intro2: " en 2019 y actualmente curada por "
- showcase-intro3: "Estamos celebrando cómo las personas usan p5.js para hacer que trabajos creativos, el aprendizaje y fuente abierta sean más interesantes e inclusivos. Juntos, hacemos una comunidad. Durante el verano de 2020, le pedimos a creadores que compartieran cómo usan p5.js en variados proyectos y piezas."
- showcase-intro4: "Durante el verano 2020, Showcase está abierto a postulaciones, ¡nomina el trabajo con p5.js de alguien o el tuyo para ser incluid aquí!"
- nominate-project: "Nomina un Proyecto"
- showcase-featuring: "Presentando"
- project-tag-art: "Arte"
- project-tag-design: "Diseño"
- project-tag-code: "Código"
- project-tag-curriculum: "Currículum"
- project-tag-documentation: "Documentación"
- project-tag-game: "Juego"
- project-tag-library: "Biblioteca"
- project-tag-organizing: "Organización"
- project-tag-tool: "Herramienta"
- project-tag-tutorial: "Tutorial"
- project-roni: "Programmed Plotter Drawings"
- credit-roni: "Roni Cantor"
- description-roni: "Ondas senoidales y lerps generadas en p5.js, exportados como SVG y dibujados con un plotter y bolígrafos."
- project-phuong: "Airi Flies"
- credit-phuong: "Phuong Ngo"
- description-phuong: "En este juego desarrollado con p5.play, ayuda a Airi volar diciendo PEW. Creado para alentar a las personas para que se salgan de su zona de confort y sentirse más seguros de sí mismos independientemente de cómo lo que hagan y cómo se vean o escuchen."
- project-daein: "Chillin'"
- credit-daein: "Dae In Chung"
- description-daein: "Un póster tipográfico interactivo que utiliza el sensor de movimiento de un dispositivo móvil con p5.js."
- project-qianqian: "Qtv"
- credit-qianqian: "Qianqian Ye"
- description-qianqian: "Un canal de video con videos de 1-minuto en Mandarín sobre programación creativa, arte y tecnología, que incluye tutoriales de p5.js para principiantes. Disponible en YouTube, Instagram, Bilibili y TikTok."
- project-casey-louise: "p5.js Shaders"
- credit-casey-louise: "Casey Conchinha, Louise Lessél"
- description-casey-louise: "Un recurso para aprender el qué, por qué y cómo usar shaders en p5.js."
- project-moon-xin: "Moving Responsive Posters"
- credit-moon-xin: "Moon Jang, Xin Xin, and students"
- description-moon-xin: "Pósters móviles basados en el navegador que utilizan sistemas gráficos, métodos de transformación y p5.js para abordar las connotaciones de una palabra de menos de 8 letras. Diseñado por estudiantes para un curso de diseño gráfico (Visual Narrative Systems / Sistemas Narrativos Visuales) en la Universidad de Georgia."
-
- created-by: "Creado Por"
- pronouns-female: "(ella)"
- creator-from-roni-cantor: "De Toronto, Canadá"
- project-links: "Enlaces de proyectos"
- project-links-text-1-roni-cantor: "Sketch de ejemplo en p5.js Web Editor"
- project-links-text-2-roni-cantor: "AxiDraw V3 demo video"
- project-q-1-1: "¿Qué haces ahora?"
- project-q-1-2: "¿Cómo empezaste con p5.js?"
- project-a-1-1-roni-cantor: "Me acabo de graduar del programa de Nuevos Medios (New Media) de la Universidad de Ryerson. Después de 4 años de programación y fabricación de robots, decidí tomar un descanso y jugar con algunas formas de arte más tradicionales, mientras que todavía programando y jugando con robots."
- project-a-1-2-roni-cantor: "¡Comencé a usar p5.js en "
- project-a-1-3-roni-cantor: "! After using "
- project-a-1-4-roni-cantor: "! Después de usar Processing durante muchos años, quería probar algo nuevo."
- project-q-2: "¿Cómo usaste p5.js en este proyecto?"
- project-a-2-1-roni-cantor: "Utilicé p5.js en este proyecto para generar las fórmulas de onda sinusoidal y lerp (interpolación lineal) y mostrar las imágenes en el "
- project-a-2-2-roni-cantor: ". Luego usé una función en mi código que exportaba mi gráfico programado a un archivo "
- project-a-2-3-roni-cantor: ". Necesitaba un archivo SVG para darle al plotter, un "
- project-a-2-4-roni-cantor: ", para que entendiera dónde dibujar las líneas que programé. ¡Envié esta información al trazador con un programa llamado "
- project-a-2-5-roni-cantor: "!"
- project-q-3: "¿Cuál es tu función favorita de p5.js?"
- project-a-3-roni-cantor: " porque las líneas son divertidas y \"lerp\" es una palabra divertida para decir!"
- project-q-4: "¿Enfrentó algún desafío al trabajar en este proyecto? Si es así, ¿cómo los superaste?"
- project-a-4-roni-cantor: "¡Era la primera vez que usaba p5.js, Inkscape y un plotter! Realmente me beneficié de las personas a mi alrededor que habían usado p5 antes, así como de guías y foros en línea."
- project-q-5: "¿Qué es algo cool que deberíamos explorar?"
- project-a-5-roni-cantor: " en Instagram: cosas de plotter análogo súper geniales."
- project-q-6: "¿En dónde se puede aprender más sobre ti?"
- project-a-6-roni-cantor: " (Instagram)"
-
- project-resources: "Recursos del Proyecto"
- creator-from-qianqian: "Los Ángeles, California"
- interview-link-qianqian: "Entrevista de Processing Foundation con Qianqian Ye"
- project-a-1-1-qianqian: "Soy una artista y diseñadora china con sede en Los Ángeles."
- project-a-1-2-qianqian: "Mi pareja me presentó p5.js y en el cual aprendí principalmente al ver videos tutoriales gratuitos en línea. Mi primer proyecto de p5.js fue dibujar algunas formas con diferentes colores."
- project-a-2-1-qianqian: "Este proyecto comenzó con la idea de enseñarle a mi mamá, que vive en China y no habla inglés, a programar con p5.js. Este proyecto fue difícil en diferentes niveles y quería comenzar identificando las razones principales por las que es más difícil para alguien como mi madre aprender a programar, principalmente debido a la falta de recursos educativos gratuitos de programación creativa. La mayoría de los recursos gratuitos para aprender la programación creativa no están disponibles en China. Los tutoriales de p5.js en YouTube, así como las cuentas de p5.js en Twitter e Instagram son inaccesibles en China debido a la censura del internet."
- project-a-2-2-qianqian: "Aprendí mucho de los videos de YouTube, como el "
- project-a-2-3-qianqian: ", pero cuanto más miraba los tutoriales de programación en línea, más me daba cuenta de lo difícil que es encontrar otras mujeres y personas de color enseñando programación, especialmente en mandarín. Quería ayudar a otras mujeres chinas a relacionarse con la programación creativa."
- project-a-2-4-qianqian: "Estoy trabajando para abrir los canales de video a otrxs creativxs chinxs que quieran contribuir al recurso educativo juntxs, como entrevistas y tutoriales invitadxs. Si te interesa enseñar/hablar sobre programación creativa en mandarín, ¡Avísame!"
- project-a-3-1-qianqian: "El "
- project-a-3-2-qianqian: " es mi función favorita. Hace que la programación creativa en línea sea perfecta."
- project-a-4-1-qianqian: "Aprender a programar en un segundo idioma fue difícil y la falta de comunidad hizo que este proceso fuera aún más arduo. Espero hablar desde mi experiencia como principiante y alguien que alguna vez se sintió como un extraño al mundo de la programación creativa y el de los videos tutoriales."
- project-a-4-2-qianqian: "Paso mucho tiempo investigando la tecnología más actual para mis videos. Al final, decidí usar mi teléfono para grabar y iMovie para editar. Espero alentar a otros a que no se necesitan muchas cosas costosas para comenzar a hacer videos instructivos."
- project-a-4-3-qianqian: "Otro problema que encontré fue mi propio miedo a ponerme en línea. Primero tuve que superar mi ansiedad de cometer errores en los videos o recibir comentarios negativos en línea. A menudo, mujeres y personas de color son víctimas de acoso en línea. Espero ayudar a establecer un ejemplo para otras mujeres y personas de color que está bien ponerse en línea y fortalecer sus comunidades compartiendo su conocimiento. Eventualmente, podremos detener el acoso en línea creando comunidades diversas y fuertes."
- project-a-5-1-qianqian: "Estoy muy entusiasmado por "
- project-a-5-2-qianqian: " en LA."
-
- creator-from-phuong: "De Kiev, Ucrania"
- link-1-phuong: "Juega Airi Flies!"
- link-2-phuong: "Código para AiriFlies en GitHub"
- link-3-phuong: "Más info en el portafolio de Phuong Ngo"
- project-a-1-1-phuong: "Soy una programadora y diseñadora creativa, un receptor de la beca de diversidad "
- project-a-1-2-phuong: ", y solo una criatura curiosa."
- project-a-1-3-phuong: "Estaba tomando un curso en la Escuela de Máquinas en Berlín este verano llamado \""
- project-a-1-4-phuong: "\", principalmente impartido por "
- project-a-2-1-phuong: "Usé p5.js para trabajar en la parte visual del juego. Los sprites de animación para Airi y los fantasmas se dibujaron en una aplicación para iPad llamada "
- project-a-2-2-phuong: " y luego se integraron en el código "
- project-a-2-3-phuong: ". Principalmente utilicé ejemplos en p5.play como referencia."
- project-a-2-4-phuong: "Para el fondo de desplazamiento sin fin, encontré un "
- p5-sketch-by-chjno-phuong: "p5 sketch de chjno"
- project-a-2-5-phuong: ". Establecí una condición para que cada vez que se detectara la palabra \"pew\" o un clic del mouse, la velocidad de desplazamiento cambiara para crear una ilusión de Airi volando hacia arriba. Cuando el usuario no hace nada, la velocidad de desplazamiento es negativa, hace que parezca que Airi se está cayendo."
- project-a-2-6-phuong: "Para el reconocimiento de sonido, utilicé "
- project-a-2-7-phuong: " (actualmente, hay una versión beta que aún no está disponible en público, ¡pero lo estará muy pronto!). Agregué alrededor de 120 muestras de mis compañeros de clase diciendo la palabra \"pew\" con diferentes entonaciones y 80 muestras de ruido de fondo para entrenarlo. Luego integré el modelo en el juego con "
- project-a-3-1-phuong: "Realmente me encanta lo fácil que se puede crear, manipular y eliminar bloques y clases HTML con la "
- project-a-3-2-phuong: " a través de "
- project-a-3-4-phuong: ", etc. Pero mi función favorita es "
- project-a-3-5-phuong: " ya que aquí es donde se crea magia."
- project-a-4-1-phuong: "Hubieron muchos desafíos simplemente porque p5.js era algo nuevo para mí. No había trabajado mucho con JavaScript en general antes. Leer documentación y buscar ejemplos similares ayudó mucho."
- project-a-5-1-phuong: "¡Chequen los "
- school-of-machines-phuong: "cursos de School of Machines"
- project-a-5-2-phuong: "! Se esfuerzan por conectar a las personas más creativas del mundo y hasta ahora lo hacen bien. ❤️"
-
- pronouns-male: "(el)"
- creator-from-chung: "De Baltimore, Maryland"
- link-1-chung: "Vean Chillin'"
- link-2-chung: "Código para Chillin’ en GitHub"
- link-3-chung: "Más info en el portafolio de Dae In Chung"
- project-a-1-1-chung: "Soy diseñador gráfico y miembro de la facultad en Maryland Institute College of Art, donde enseño principalmente programación (con p5.js y Processing, por supuesto) y motion graphics."
- project-a-1-2-chung: "He estado usando "
- project-a-1-3-chung: " durante algún tiempo, y cuando apareció p5.js, comencé a usarlo sin pensarlo dos veces porque era fácil convertir el código de Processing existente y compartir proyectos en línea."
- project-a-2-1-chung: "Este verano, me di el desafío de hacer carteles tipográficos con programación, y este es uno de los carteles que hice. Hasta hace muy poco, no sabía que podía usar los datos del sensor de movimiento con p5.js. También estaba viendo los "
- dan-shiffman-matterjs-tutorial: "video tutoriales de Dan Shiffman matter.js"
- project-a-2-2-chung: ", así que pensé ¿por qué no combinar los dos y practicar lo que estaba aprendiendo?"
- project-a-3-1-chung: "Hay muchas cosas que me encantan de p5.js, como la comunidad en línea y la amabilidad de los principiantes. Lo que realmente me gusta en este momento es el "
- project-a-3-2-chung: ", con el que no solo puedo trabajar en línea para mí, sino también compartir el URL rápidamente en el modo actual. Para este proyecto en particular, tuve que hacer muchas pruebas en mi teléfono, y fue mucho más fácil y rápido que comprometerme con GitHub."
- project-a-4-1-chung: "Tuve algunos problemas con el manejo de la fuente, el canal alfa y z-depth en el modo "
- project-a-4-2-chung: ". Todavía no estoy contento con todas mis decisiones. Pero en general, fue útil buscar en el foro y no olvidar dividir los problemas en otros más pequeños e iterar poco a poco. Además, tuve problemas para renderizar archivos de video directamente desde p5.js. La grabación de pantalla no era una opción debido a caídas de frecuencia de cuadros intermitentes (mi computadora portátil es bastante lenta). Después de investigar un poco, decidí aprender algunos conceptos básicos de "
- project-a-4-3-chung: " y crear una herramienta para mí."
- project-a-5-1-chung: "Como se mencionó anteriormente, si desea renderizar cuadros y archivos de video a partir de bocetos de p5.js, consulte mi "
- project-a-5-2-chung: " y hazme saber lo que piensas."
-
- creator-from-casey-louise: "De Nueva York, Nueva York"
- link-1-casey-louise: "Guía de p5.js Shaders"
- link-2-casey-louise: "Colección glitch de ejemplos con p5.js shader"
- project-a-1-1-casey-louise: "Casey: Soy un estudiante de NYU ITP que está interesado en gráficos computacionales y espacios interactivos, físicos y digitales."
- project-a-1-2-casey-louise: "Louise: Soy una estudiante de NYU ITP que está interesada en gráficos computacionales y espacios interactivos basados en tecnologías de sensores."
- project-a-1-3-casey-louise: "Casey: Comencé a aprender p5.js en 2018 en mi primer semestre en ITP, aunque había estado incursionando en "
- project-a-1-4-casey-louise: " desde 2012. Mi amigo Pedro me introdujo a Processing cuando estudiaba diseño gráfico, y me impresionó. La idea de crear mis propias herramientas para crear gráficos y arte interactivo despertó mi interés, pero una vez que lo intenté, me enganché. El primer proyecto que puedo recordar fue un ojo que te seguía por la pantalla, y se ponía triste cuando lo dejabas solo."
- project-a-1-5-casey-louise: "Louise: Inicialmente aprendí p5.js para hacer que un sitio web que ya estaba creando para que fuera más divertido. Soy una programadora de C#, así que este fue un buen segway a JavaScript para mí."
- project-a-2-1-casey-louise: "Casey: Estuve posponiendo los sombreadores de aprendizaje durante mucho tiempo, y también tenía curiosidad por saber si podría usarlos en p5.js. Luego escuché acerca de una subvención para proyectos de código abierto, narración de historias y recursos de aprendizaje en ITP llamada "
- project-a-2-2-casey-louise: ". Como no encontraba mucho en la documentación de p5.js + shader, decidí descubrir cómo se implementan en p5.js y crear un recurso para que otros aprendan. Cuando le conté a Louise sobre el proyecto, ella estaba inmediatamente entusiasmada por aprender y enseñar sombreadores en p5.js. Ella ha sido excelente al asegurarse de que el proyecto sea un recurso de aprendizaje y no solo una colección de ejemplos."
- project-a-3-1-casey-louise: "Casey: ¿"
- project-a-3-2-casey-louise: " cuenta como una función? También me encanta tener la capacidad de compartir mis programas en la web para que las personas no tengan que instalar un software especial o venir a Nueva York para ver mi trabajo."
- project-a-3-3-casey-louise: "Louise: Mi función favorita es "
- project-a-3-4-casey-louise: " y "
- project-a-3-5-casey-louise: " para la transformación del sistema de coordenadas para hacer imágenes generativas."
- project-a-4-1-casey-louise: "Casey: El comienzo del proyecto (descubrir cómo funcionan las cosas) fue que contactamos a personas increíbles, les hicimos preguntas y les pedimos permiso para usar sus ejemplos en nuestro proyecto. "
- adam-ferris-repo-casey-louise: "GitHub repo de Adam Ferriss"
- project-a-4-2-casey-louise: " realmente nos dio las bases para comprender cómo funcionan los shaders en p5.js y proporcionó un marco de ejemplos accesibles para que podamos crear proyectos. Para algunos problemas específicos relacionados con p5.js que teníamos, nos comunicamos con "
- project-a-4-3-casey-louise: " y "
- project-a-4-4-casey-louise: " (quienes trabajaron en la "
- webgl-casey-louise: "implementación de WebGL en p5.js"
- project-a-4-5-casey-louise: "), y fueron muy útiles."
- project-a-4-6-casey-louise: "Louise: La curva de aprendizaje fue bastante empinada para implementar shaders en p5. Afortunadamente, hubo algunos ejemplos muy bien documentados en GitHub por Adam Ferriss. Nuestro objetivo era hacerlo de manera que un principiante pueda entender cómo implementarlo, por lo que fue tanto un desafío técnico como un desafío en la enseñanza del código a extraños y principiantes. Aquí nos inspiramos en la forma en que está escrito el "
- openframeworks-book-casey-louise: "libro de openFrameworks"
- project-a-4-7-casey-louise: ". Creemos en un enfoque divertido de \"oye, no es difícil y tú también puedes hacerlo\"."
- project-a-5-1-casey-louise: "¡Visiten "
- project-a-5-2-casey-louise: " para explorar los increíbles proyectos de subvenciones de nuestros compañeros!"
-
- pronouns-nonbinary: "(elle)"
- creator-from-moon: "De Atenas, Georgia"
- posters-by: "Posters hechos por"
- project-a-1-1-moon: "Moon: Soy diseñadora gráfica, artista visual y educadora de diseño. Este verano, impartí un curso de diseño gráfico en el programa Cortona de la Universidad de Georgia en Italia, presentando algunos conceptos básicos de p5.js. Este otoño, planeo enseñar y estudiar plataformas digitales en UGA."
- project-a-1-2-moon: "Mi ex colega, "
- project-a-1-3-moon: ", me invitó a "
- project-a-1-4-moon: " en "
- pcd-la-moon: "LA en enero de 2019"
- project-a-1-5-moon: ". Me ayudaron con las herramientas y la lógica de p5.js. Fue una excelente experiencia de enseñanza y aprendizaje."
- project-a-2-1-moon: "Seguimos tutoriales básicos, "
- codetrain-moon: "los videos de Daniel en YouTube"
- project-a-2-2-moon: ", y "
- p5-reference-moon: "Referencia en el sitio web p5.js"
- project-a-2-3-moon: "."
- project-a-3-1-moon: "Mi función favorita está relacionada con "
- project-a-3-2-moon: " y "
- project-a-3-3-moon: ": "
- project-a-3-4-moon: ". Pude usar y enseñar esta herramienta para visualizar varias ideas sobre el tiempo en movimiento."
- project-a-4-1-moon: "Para mí, un principiante, fue un desafío comprender la estructura general de p5.js y cómo funciona el código en general. Tuve que repetir los conceptos básicos de p5.js un par de veces, y luego dibujé un cuadro para memorizar y enseñar la forma en que entendí la estructura y el código de p5.js con fuertes restricciones que configuré. Fue una excelente experiencia de enseñanza y aprendizaje."
- project-a-5-1-moon: "Echa un vistazo a "
- project-a-5-2-moon: " en Milán, Italia."
-
+ showcase-title: Showcase
+ showcase-intro1: 'Presentamos Showcase, creada por '
+ showcase-intro2: ' en 2019 y actualmente curada por '
+ showcase-intro3: >-
+ Estamos celebrando cómo las personas usan p5.js para hacer que trabajos
+ creativos, el aprendizaje y fuente abierta sean más interesantes e
+ inclusivos. Juntos, hacemos una comunidad. Durante el verano de 2020, le
+ pedimos a creadores que compartieran cómo usan p5.js en variados proyectos y
+ piezas.
+ showcase-intro4: >-
+ Durante el verano 2020, Showcase está abierto a postulaciones, ¡nomina el
+ trabajo con p5.js de alguien o el tuyo para ser incluid aquí!
+ nominate-project: Nomina un Proyecto
+ showcase-featuring: Presentando
+ project-tag-art: Arte
+ project-tag-design: Diseño
+ project-tag-code: Código
+ project-tag-curriculum: Currículum
+ project-tag-documentation: Documentación
+ project-tag-game: Juego
+ project-tag-library: Biblioteca
+ project-tag-organizing: Organización
+ project-tag-tool: Herramienta
+ project-tag-tutorial: Tutorial
+ project-roni: Programmed Plotter Drawings
+ credit-roni: Roni Cantor
+ description-roni: >-
+ Ondas senoidales y lerps generadas en p5.js, exportados como SVG y dibujados
+ con un plotter y bolígrafos.
+ project-phuong: Airi Flies
+ credit-phuong: Phuong Ngo
+ description-phuong: >-
+ En este juego desarrollado con p5.play, ayuda a Airi volar diciendo PEW.
+ Creado para alentar a las personas para que se salgan de su zona de confort
+ y sentirse más seguros de sí mismos independientemente de cómo lo que hagan
+ y cómo se vean o escuchen.
+ project-daein: Chillin'
+ credit-daein: Dae In Chung
+ description-daein: >-
+ Un póster tipográfico interactivo que utiliza el sensor de movimiento de un
+ dispositivo móvil con p5.js.
+ project-qianqian: Qtv
+ credit-qianqian: Qianqian Ye
+ description-qianqian: >-
+ Un canal de video con videos de 1-minuto en Mandarín sobre programación
+ creativa, arte y tecnología, que incluye tutoriales de p5.js para
+ principiantes. Disponible en YouTube, Instagram, Bilibili y TikTok.
+ project-casey-louise: p5.js Shaders
+ credit-casey-louise: 'Casey Conchinha, Louise Lessél'
+ description-casey-louise: 'Un recurso para aprender el qué, por qué y cómo usar shaders en p5.js.'
+ project-moon-xin: Moving Responsive Posters
+ credit-moon-xin: 'Moon Jang, Xin Xin, and students'
+ description-moon-xin: >-
+ Pósters móviles basados en el navegador que utilizan sistemas gráficos,
+ métodos de transformación y p5.js para abordar las connotaciones de una
+ palabra de menos de 8 letras. Diseñado por estudiantes para un curso de
+ diseño gráfico (Visual Narrative Systems / Sistemas Narrativos Visuales) en
+ la Universidad de Georgia.
+ created-by: Creado Por
+ pronouns-female: (ella)
+ creator-from-roni-cantor: 'De Toronto, Canadá'
+ project-links: Enlaces de proyectos
+ project-links-text-1-roni-cantor: Sketch de ejemplo en p5.js Web Editor
+ project-links-text-2-roni-cantor: AxiDraw V3 demo video
+ project-q-1-1: ¿Qué haces ahora?
+ project-q-1-2: ¿Cómo empezaste con p5.js?
+ project-a-1-1-roni-cantor: >-
+ Me acabo de graduar del programa de Nuevos Medios (New Media) de la
+ Universidad de Ryerson. Después de 4 años de programación y fabricación de
+ robots, decidí tomar un descanso y jugar con algunas formas de arte más
+ tradicionales, mientras que todavía programando y jugando con robots.
+ project-a-1-2-roni-cantor: '¡Comencé a usar p5.js en '
+ project-a-1-3-roni-cantor: '! After using '
+ project-a-1-4-roni-cantor: '! Después de usar Processing durante muchos años, quería probar algo nuevo.'
+ project-q-2: ¿Cómo usaste p5.js en este proyecto?
+ project-a-2-1-roni-cantor: >-
+ Utilicé p5.js en este proyecto para generar las fórmulas de onda sinusoidal
+ y lerp (interpolación lineal) y mostrar las imágenes en el
+ project-a-2-2-roni-cantor: >-
+ . Luego usé una función en mi código que exportaba mi gráfico programado a
+ un archivo
+ project-a-2-3-roni-cantor: '. Necesitaba un archivo SVG para darle al plotter, un '
+ project-a-2-4-roni-cantor: >-
+ , para que entendiera dónde dibujar las líneas que programé. ¡Envié esta
+ información al trazador con un programa llamado
+ project-a-2-5-roni-cantor: '!'
+ project-q-3: ¿Cuál es tu función favorita de p5.js?
+ project-a-3-roni-cantor: ' porque las líneas son divertidas y "lerp" es una palabra divertida para decir!'
+ project-q-4: >-
+ ¿Enfrentó algún desafío al trabajar en este proyecto? Si es así, ¿cómo los
+ superaste?
+ project-a-4-roni-cantor: >-
+ ¡Era la primera vez que usaba p5.js, Inkscape y un plotter! Realmente me
+ beneficié de las personas a mi alrededor que habían usado p5 antes, así como
+ de guías y foros en línea.
+ project-q-5: ¿Qué es algo cool que deberíamos explorar?
+ project-a-5-roni-cantor: ' en Instagram: cosas de plotter análogo súper geniales.'
+ project-q-6: ¿En dónde se puede aprender más sobre ti?
+ project-a-6-roni-cantor: ' (Instagram)'
+ project-resources: Recursos del Proyecto
+ creator-from-qianqian: 'Los Ángeles, California'
+ interview-link-qianqian: Entrevista de Processing Foundation con Qianqian Ye
+ project-a-1-1-qianqian: Soy una artista y diseñadora china con sede en Los Ángeles.
+ project-a-1-2-qianqian: >-
+ Mi pareja me presentó p5.js y en el cual aprendí principalmente al ver
+ videos tutoriales gratuitos en línea. Mi primer proyecto de p5.js fue
+ dibujar algunas formas con diferentes colores.
+ project-a-2-1-qianqian: >-
+ Este proyecto comenzó con la idea de enseñarle a mi mamá, que vive en China
+ y no habla inglés, a programar con p5.js. Este proyecto fue difícil en
+ diferentes niveles y quería comenzar identificando las razones principales
+ por las que es más difícil para alguien como mi madre aprender a programar,
+ principalmente debido a la falta de recursos educativos gratuitos de
+ programación creativa. La mayoría de los recursos gratuitos para aprender la
+ programación creativa no están disponibles en China. Los tutoriales de p5.js
+ en YouTube, así como las cuentas de p5.js en Twitter e Instagram son
+ inaccesibles en China debido a la censura del internet.
+ project-a-2-2-qianqian: 'Aprendí mucho de los videos de YouTube, como el '
+ project-a-2-3-qianqian: >-
+ , pero cuanto más miraba los tutoriales de programación en línea, más me
+ daba cuenta de lo difícil que es encontrar otras mujeres y personas de color
+ enseñando programación, especialmente en mandarín. Quería ayudar a otras
+ mujeres chinas a relacionarse con la programación creativa.
+ project-a-2-4-qianqian: >-
+ Estoy trabajando para abrir los canales de video a otrxs creativxs chinxs
+ que quieran contribuir al recurso educativo juntxs, como entrevistas y
+ tutoriales invitadxs. Si te interesa enseñar/hablar sobre programación
+ creativa en mandarín, ¡Avísame!
+ project-a-3-1-qianqian: 'El '
+ project-a-3-2-qianqian: ' es mi función favorita. Hace que la programación creativa en línea sea perfecta.'
+ project-a-4-1-qianqian: >-
+ Aprender a programar en un segundo idioma fue difícil y la falta de
+ comunidad hizo que este proceso fuera aún más arduo. Espero hablar desde mi
+ experiencia como principiante y alguien que alguna vez se sintió como un
+ extraño al mundo de la programación creativa y el de los videos tutoriales.
+ project-a-4-2-qianqian: >-
+ Paso mucho tiempo investigando la tecnología más actual para mis videos. Al
+ final, decidí usar mi teléfono para grabar y iMovie para editar. Espero
+ alentar a otros a que no se necesitan muchas cosas costosas para comenzar a
+ hacer videos instructivos.
+ project-a-4-3-qianqian: >-
+ Otro problema que encontré fue mi propio miedo a ponerme en línea. Primero
+ tuve que superar mi ansiedad de cometer errores en los videos o recibir
+ comentarios negativos en línea. A menudo, mujeres y personas de color son
+ víctimas de acoso en línea. Espero ayudar a establecer un ejemplo para otras
+ mujeres y personas de color que está bien ponerse en línea y fortalecer sus
+ comunidades compartiendo su conocimiento. Eventualmente, podremos detener el
+ acoso en línea creando comunidades diversas y fuertes.
+ project-a-5-1-qianqian: 'Estoy muy entusiasmado por '
+ project-a-5-2-qianqian: ' en LA.'
+ creator-from-phuong: 'De Kiev, Ucrania'
+ project-a-1-1-phuong: >-
+ Soy una programadora y diseñadora creativa, un receptor de la beca de
+ diversidad
+ link-1-phuong: Juega Airi Flies!
+ link-2-phuong: Código para AiriFlies en GitHub
+ link-3-phuong: Más info en el portafolio de Phuong Ngo
+ project-a-1-2-phuong: ', y solo una criatura curiosa.'
+ project-a-1-3-phuong: >-
+ Estaba tomando un curso en la Escuela de Máquinas en Berlín este verano
+ llamado "
+ project-a-1-4-phuong: '", principalmente impartido por '
+ project-a-2-1-phuong: >-
+ Usé p5.js para trabajar en la parte visual del juego. Los sprites de
+ animación para Airi y los fantasmas se dibujaron en una aplicación para iPad
+ llamada
+ project-a-2-2-phuong: ' y luego se integraron en el código '
+ project-a-2-3-phuong: . Principalmente utilicé ejemplos en p5.play como referencia.
+ project-a-2-4-phuong: 'Para el fondo de desplazamiento sin fin, encontré un '
+ p5-sketch-by-chjno-phuong: p5 sketch de chjno
+ project-a-2-5-phuong: >-
+ . Establecí una condición para que cada vez que se detectara la palabra
+ "pew" o un clic del mouse, la velocidad de desplazamiento cambiara para
+ crear una ilusión de Airi volando hacia arriba. Cuando el usuario no hace
+ nada, la velocidad de desplazamiento es negativa, hace que parezca que Airi
+ se está cayendo.
+ project-a-2-6-phuong: 'Para el reconocimiento de sonido, utilicé '
+ project-a-2-7-phuong: ' (actualmente, hay una versión beta que aún no está disponible en público, ¡pero lo estará muy pronto!). Agregué alrededor de 120 muestras de mis compañeros de clase diciendo la palabra "pew" con diferentes entonaciones y 80 muestras de ruido de fondo para entrenarlo. Luego integré el modelo en el juego con '
+ project-a-3-1-phuong: >-
+ Realmente me encanta lo fácil que se puede crear, manipular y eliminar
+ bloques y clases HTML con la
+ project-a-3-2-phuong: ' a través de '
+ project-a-3-3-phuong: ' etc. But my most favorite function is '
+ project-a-3-4-phuong: ', etc. Pero mi función favorita es '
+ project-a-4-1-phuong: >-
+ Hubieron muchos desafíos simplemente porque p5.js era algo nuevo para mí. No
+ había trabajado mucho con JavaScript en general antes. Leer documentación y
+ buscar ejemplos similares ayudó mucho.
+ project-a-5-1-phuong: '¡Chequen los '
+ school-of-machines-phuong: cursos de School of Machines
+ project-a-5-2-phuong: >-
+ ! Se esfuerzan por conectar a las personas más creativas del mundo y hasta
+ ahora lo hacen bien. ❤️
+ pronouns-male: (el)
+ creator-from-chung: 'De Baltimore, Maryland'
+ link-1-casey-louise: Guía de p5.js Shaders
+ link-2-casey-louise: Colección glitch de ejemplos con p5.js shader
+ link-1-chung: Vean Chillin'
+ link-2-chung: Código para Chillin’ en GitHub
+ link-3-chung: Más info en el portafolio de Dae In Chung
+ project-a-1-1-chung: >-
+ Soy diseñador gráfico y miembro de la facultad en Maryland Institute College
+ of Art, donde enseño principalmente programación (con p5.js y Processing,
+ por supuesto) y motion graphics.
+ project-a-1-2-chung: 'He estado usando '
+ project-a-1-3-chung: ' durante algún tiempo, y cuando apareció p5.js, comencé a usarlo sin pensarlo dos veces porque era fácil convertir el código de Processing existente y compartir proyectos en línea.'
+ project-a-2-1-chung: >-
+ Este verano, me di el desafío de hacer carteles tipográficos con
+ programación, y este es uno de los carteles que hice. Hasta hace muy poco,
+ no sabía que podía usar los datos del sensor de movimiento con p5.js.
+ También estaba viendo los
+ dan-shiffman-matterjs-tutorial: video tutoriales de Dan Shiffman matter.js
+ project-a-2-2-chung: >-
+ , así que pensé ¿por qué no combinar los dos y practicar lo que estaba
+ aprendiendo?
+ project-a-3-1-chung: >-
+ Hay muchas cosas que me encantan de p5.js, como la comunidad en línea y la
+ amabilidad de los principiantes. Lo que realmente me gusta en este momento
+ es el
+ project-a-3-2-chung: >-
+ , con el que no solo puedo trabajar en línea para mí, sino también compartir
+ el URL rápidamente en el modo actual. Para este proyecto en particular, tuve
+ que hacer muchas pruebas en mi teléfono, y fue mucho más fácil y rápido que
+ comprometerme con GitHub.
+ project-a-4-1-chung: >-
+ Tuve algunos problemas con el manejo de la fuente, el canal alfa y z-depth
+ en el modo
+ project-a-4-2-chung: >-
+ . Todavía no estoy contento con todas mis decisiones. Pero en general, fue
+ útil buscar en el foro y no olvidar dividir los problemas en otros más
+ pequeños e iterar poco a poco. Además, tuve problemas para renderizar
+ archivos de video directamente desde p5.js. La grabación de pantalla no era
+ una opción debido a caídas de frecuencia de cuadros intermitentes (mi
+ computadora portátil es bastante lenta). Después de investigar un poco,
+ decidí aprender algunos conceptos básicos de
+ project-a-4-3-chung: ' y crear una herramienta para mí.'
+ project-a-5-1-chung: >-
+ Como se mencionó anteriormente, si desea renderizar cuadros y archivos de
+ video a partir de bocetos de p5.js, consulte mi
+ project-a-5-2-chung: ' y hazme saber lo que piensas.'
+ creator-from-casey-louise: 'De Nueva York, Nueva York'
+ project-a-1-1-casey-louise: >-
+ Casey: Soy un estudiante de NYU ITP que está interesado en gráficos
+ computacionales y espacios interactivos, físicos y digitales.
+ project-a-1-2-casey-louise: >-
+ Louise: Soy una estudiante de NYU ITP que está interesada en gráficos
+ computacionales y espacios interactivos basados en tecnologías de sensores.
+ project-a-1-3-casey-louise: >-
+ Casey: Comencé a aprender p5.js en 2018 en mi primer semestre en ITP, aunque
+ había estado incursionando en
+ project-a-1-4-casey-louise: ' desde 2012. Mi amigo Pedro me introdujo a Processing cuando estudiaba diseño gráfico, y me impresionó. La idea de crear mis propias herramientas para crear gráficos y arte interactivo despertó mi interés, pero una vez que lo intenté, me enganché. El primer proyecto que puedo recordar fue un ojo que te seguía por la pantalla, y se ponía triste cuando lo dejabas solo.'
+ project-a-1-5-casey-louise: >-
+ Louise: Inicialmente aprendí p5.js para hacer que un sitio web que ya estaba
+ creando para que fuera más divertido. Soy una programadora de C#, así que
+ este fue un buen segway a JavaScript para mí.
+ project-a-2-1-casey-louise: >-
+ Casey: Estuve posponiendo los sombreadores de aprendizaje durante mucho
+ tiempo, y también tenía curiosidad por saber si podría usarlos en p5.js.
+ Luego escuché acerca de una subvención para proyectos de código abierto,
+ narración de historias y recursos de aprendizaje en ITP llamada
+ project-a-2-2-casey-louise: >-
+ . Como no encontraba mucho en la documentación de p5.js + shader, decidí
+ descubrir cómo se implementan en p5.js y crear un recurso para que otros
+ aprendan. Cuando le conté a Louise sobre el proyecto, ella estaba
+ inmediatamente entusiasmada por aprender y enseñar sombreadores en p5.js.
+ Ella ha sido excelente al asegurarse de que el proyecto sea un recurso de
+ aprendizaje y no solo una colección de ejemplos.
+ project-a-3-1-casey-louise: 'Casey: ¿'
+ project-a-3-2-casey-louise: ' cuenta como una función? También me encanta tener la capacidad de compartir mis programas en la web para que las personas no tengan que instalar un software especial o venir a Nueva York para ver mi trabajo.'
+ project-a-3-3-casey-louise: 'Louise: Mi función favorita es '
+ project-a-3-4-casey-louise: ' y '
+ project-a-3-5-casey-louise: ' para la transformación del sistema de coordenadas para hacer imágenes generativas.'
+ project-a-4-1-casey-louise: >-
+ Casey: El comienzo del proyecto (descubrir cómo funcionan las cosas) fue que
+ contactamos a personas increíbles, les hicimos preguntas y les pedimos
+ permiso para usar sus ejemplos en nuestro proyecto.
+ adam-ferris-repo-casey-louise: GitHub repo de Adam Ferriss
+ project-a-4-2-casey-louise: ' realmente nos dio las bases para comprender cómo funcionan los shaders en p5.js y proporcionó un marco de ejemplos accesibles para que podamos crear proyectos. Para algunos problemas específicos relacionados con p5.js que teníamos, nos comunicamos con '
+ project-a-4-3-casey-louise: ' y '
+ project-a-4-4-casey-louise: ' (quienes trabajaron en la '
+ webgl-casey-louise: implementación de WebGL en p5.js
+ project-a-4-5-casey-louise: '), y fueron muy útiles.'
+ project-a-4-6-casey-louise: >-
+ Louise: La curva de aprendizaje fue bastante empinada para implementar
+ shaders en p5. Afortunadamente, hubo algunos ejemplos muy bien documentados
+ en GitHub por Adam Ferriss. Nuestro objetivo era hacerlo de manera que un
+ principiante pueda entender cómo implementarlo, por lo que fue tanto un
+ desafío técnico como un desafío en la enseñanza del código a extraños y
+ principiantes. Aquí nos inspiramos en la forma en que está escrito el
+ openframeworks-book-casey-louise: libro de openFrameworks
+ project-a-4-7-casey-louise: >-
+ . Creemos en un enfoque divertido de "oye, no es difícil y tú también puedes
+ hacerlo".
+ project-a-5-1-casey-louise: '¡Visiten '
+ project-a-5-2-casey-louise: ' para explorar los increíbles proyectos de subvenciones de nuestros compañeros!'
+ pronouns-nonbinary: (elle)
+ creator-from-moon: 'De Atenas, Georgia'
+ posters-by: Posters hechos por
+ project-a-1-1-moon: >-
+ Moon: Soy diseñadora gráfica, artista visual y educadora de diseño. Este
+ verano, impartí un curso de diseño gráfico en el programa Cortona de la
+ Universidad de Georgia en Italia, presentando algunos conceptos básicos de
+ p5.js. Este otoño, planeo enseñar y estudiar plataformas digitales en UGA.
+ project-a-1-2-moon: 'Mi ex colega, '
+ project-a-1-3-moon: ', me invitó a '
+ project-a-1-4-moon: ' en '
+ pcd-la-moon: LA en enero de 2019
+ project-a-1-5-moon: >-
+ . Me ayudaron con las herramientas y la lógica de p5.js. Fue una excelente
+ experiencia de enseñanza y aprendizaje.
+ project-a-2-1-moon: 'Seguimos tutoriales básicos, '
+ codetrain-moon: los videos de Daniel en YouTube
+ project-a-2-2-moon: ', y '
+ p5-reference-moon: Referencia en el sitio web p5.js
+ project-a-2-3-moon: .
+ project-a-3-1-moon: 'Mi función favorita está relacionada con '
+ project-a-3-2-moon: ' y '
+ project-a-3-3-moon: ': '
+ project-a-3-4-moon: >-
+ . Pude usar y enseñar esta herramienta para visualizar varias ideas sobre el
+ tiempo en movimiento.
+ project-a-4-1-moon: >-
+ Para mí, un principiante, fue un desafío comprender la estructura general de
+ p5.js y cómo funciona el código en general. Tuve que repetir los conceptos
+ básicos de p5.js un par de veces, y luego dibujé un cuadro para memorizar y
+ enseñar la forma en que entendí la estructura y el código de p5.js con
+ fuertes restricciones que configuré. Fue una excelente experiencia de
+ enseñanza y aprendizaje.
+ project-a-5-1-moon: 'Echa un vistazo a '
+ project-a-5-2-moon: ' en Milán, Italia.'
teach:
- teach-title2: "Teach"
- teach-intro1: "Every teaching has its own unique goals, messages, conditions, and environments. "
- teach-intro2: "By documenting and sharing p5 workshops, classes, and materials, we hope to better connect the p5.js learner and educator communities around the world. "
- teach-intro3: "Share or recommend"
- teach-intro4: "your own teaching experiences, too!"
- teach-heading: "p5 Teaching Resources"
- teach-search-filter: "Search Filter"
- teach-filter1: "Diversity & Inclusion : "
- teach-filter1-label1: "Gender"
- teach-filter1-label2: "Race & Ethnicity"
- teach-filter1-label3: "Language"
- teach-filter1-label4: "Neuro-Type"
- teach-filter1-label5: "Ability"
- teach-filter1-label6: "Class"
- teach-filter1-label7: "Religion"
- teach-filter1-label8: "(Sub-)Culture"
- teach-filter1-label9: "Political Opinion"
- teach-filter1-label10: "Age"
- teach-filter1-label11: "Skill Level"
- teach-filter1-label12: "Occupation"
- teach-filter1-label13: "#noCodeSnobs"
- teach-filter1-label14: "#newKidLove"
- teach-filter1-label15: "#unassumeCore"
- teach-filter1-label16: "#BlackLivesMatter"
-
- teach-filter2: "Venue : "
- teach-filter2-label1: "Africa"
- teach-filter2-label2: "Asia"
- teach-filter2-label3: "Europe"
- teach-filter2-label4: "North America"
- teach-filter2-label5: "Oceania"
- teach-filter2-label6: "South America"
- teach-filter2-label7: "Virtual-Online "
-
- teach-filter3: "Year : "
-
- teach-filter4: "Level of Difficulty : "
- teach-filter4-label1: "Elementary"
- teach-filter4-label2: "Intermediate"
- teach-filter4-label3: "Advanced"
-
- teach-case-subtitle1: "Venue & Date"
- teach-case-subtitle2: "Participants"
- teach-case-subtitle3: "Level of Difficulty"
- teach-case-subtitle4: "Goals"
- teach-case-subtitle5: "Method & Materials"
-
- teach-case1-title: "p5.js à l'Ubuntu Party!"
- teach-case1-lead-name: "Basile Pesin"
- teach-case1-content1: "2020 Ubuntu Party, "
- teach-case1-content1-1: "Cité des Sciences et de l'Industrie, Paris, France"
- teach-case1-content2: "Any age, including children and parents, young and older adults."
- teach-case1-content3: "Advanced"
- teach-case1-content4: "To introduce a new public to programming through fun and compelling examples. "
- teach-case1-content5: "Method: in-person workshop, 1 hour per session, with different participant each times. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board."
- teach-case1-content5-1: "Materials: The exercises I gave where accessible through p5.js web-editor links available in "
-
- teach-case2-title: "Making The Thing that Makes the Thing: Exploring Generative Art & Design with p5.js"
- teach-case2-lead-name: "Priti Pandurangan & Ajith Ranka"
- teach-case2-content1: "National Institute of Design, Bangalore"
- teach-case2-content1-1: "2020 February 8, 2:30-4:00 PM"
- teach-case2-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case2-content3: "Priti: Intermediate & Ajith: Advanced"
- teach-case2-content4: "To explore generative art & design and recreate some classical works with p5.js. "
- teach-case2-content5: "Methods: In-person, collaborative, hands-on workshop."
- teach-case2-content5-1: "Materials: "
- teach-case2-content5-2: "course page "
- teach-case2-content5-3: "linking to sketches on the p5 editor, "
- teach-case2-content5-4: "interactive reference guide "
- teach-case2-content5-5: "to p5 basics"
-
- teach-case3-title: "CC Fest (Creative Coding Festival)"
- teach-case3-lead-name: "Saber"
- teach-case3-speech: "Love p5.js. It has meant so much to me, my students, and this community."
- teach-case3-content1: " New York, Los Angeles, San Francisco, Virtual-Online "
- teach-case3-content1-1: " Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual"
- teach-case3-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case3-content3: "Intermediate"
- teach-case3-content4: "To build a teacher and student community around p5 for middle and high school."
- teach-case3-content5: "A half-day of workshop led by volunteer teachers. We saw lots of different methods and materials. Most used some sort of slides or documentation, some live coding using an editor, with work time for participant to remix."
- teach-case3-content5-1: "CC Fest Lessons page"
- teach-case3-content5-2: " for teaching materials"
- teach-case3-content5-3: "More photos"
-
- teach-case4-title: "Taller Introducción a la Programación Creativa con p5.js"
- teach-case4-lead-name: "Aarón Montoya-Moraga"
- teach-case4-speech: "p5.js is my happy place "
- teach-case4-content1: " PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online "
- teach-case4-content1-1: " 2018 November 14, 3 hours"
- teach-case4-content2: "I had around 16 students in the workshop, and a team including 3 people from the PlusCode festival, and one person at the venue."
- teach-case4-content3: "Elementary, Intermediate, Advanced"
- teach-case4-content4: "Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish :)"
- teach-case4-content5: "I used the material on this "
- teach-case4-content5-1: "GitHub repo"
- teach-case4-content5-2: ", we used the p5.js web editor, we had a three hour long workshop"
- teach-case4-content5-3: "+CODE electronic art festival 2018, Argentina"
- teach-case4-content5-4: ", Medium"
-
- teach-case5-title: "Introduction to Generative Drawing"
- teach-case5-lead-name: "Adam Herst"
- teach-case5-speech: "My greatest source of uncertainty in developing the workshop was whether it was trying to teach art to programmers or to teach programming to artists."
- teach-case5-content1: "Inter/Access"
- teach-case5-content1-1: " (artist-run centre), Toronto, Ontario, Canada"
- teach-case5-content1-2: "In-person with a self-paced workbook for remote work"
- teach-case5-content1-3: " 2020 February 12, 7PM-9PM"
- teach-case5-content2: "15 artists"
- teach-case5-content3: "Elementary"
- teach-case5-content4: "To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form."
- teach-case5-content5: "A printed workbook with activities that used the p5.js web editor to show how translate an physical drawing into a digital drawing."
- teach-case5-content5-1: "Processing Community Day 2019: Generative Drawing at Inter/Access"
- teach-case5-content5-2: "Introduction to Generative Drawing Letter PDF"
- teach-case5-content5-3: "Introduction to Generative Drawing Booklet PDF"
-
- teach-case6-title: "Open Lecture, Creative Coding: 2020"
- teach-case6-lead-name: "Shunsuke Takawo"
- teach-case6-speech: "I love p5.js because it's so easy to read and write code in p5.js. Coding in your everyday life!"
- teach-case6-content1: " Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online "
- teach-case6-content1-1: " 2020 March 16-18, 1-7 PM"
- teach-case6-content2: "Students of Kyoto University of Art and Design, and anyone."
- teach-case6-content3: "Elementary"
- teach-case6-content4: "Making code as a tool for artistic expression."
- teach-case6-content5: "Dropbox Paper, p5.js web editor."
- teach-case6-content5-1: "Syllabus"
- teach-case6-content5-2: "Day 1"
- teach-case6-content5-3: "Day 2"
- teach-case6-content5-4: "Day 3"
- teach-case6-content5-5: ", YouTube"
-
- teach-case7-title: "Creative Coding for Static Graphics"
- teach-case7-lead-name: "Shunsuke Takawo"
- teach-case7-speech: "Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you to give it a try!"
- teach-case7-content1: " FabCafe MTRL, Tokyo, Japan"
- teach-case7-content1-1: " 2019 September 15, 4-7 PM "
- teach-case7-content2: "Anyone who wants to try coding in p5.js."
- teach-case7-content3: "Intermediate"
- teach-case7-content4: "To code from the graphic design's perspective."
- teach-case7-content5: "Dropbox Paper, p5.js web editor."
- teach-case7-content5-1: "Syllabus & Material"
-
- teach-case8-title: "Generative Typography"
- teach-case8-lead-name: "Dae In Chung"
- teach-case8-content1: " Baltimore, Maryland, USA & Virtual-Online "
- teach-case8-content1-1: " 2019 January 21 - May 08, every Wednesday, 4-10 PM"
- teach-case8-content2: "14 undergrads and grad students who had little to no experience in coding."
- teach-case8-content3: "Elementary"
- teach-case8-content4: "Experiment with typographic forms and structures through computation."
- teach-case8-content5: "Methods: online/offline lectures and critiques."
- teach-case8-content5-1: "Materials: p5js online editor, Github, youtube tutorials."
- teach-case8-content5-2: "Works of participants"
-
- teach-case9-title: "Machine Learning for the Web"
- teach-case9-lead-name: "Yining Shi"
- teach-case9-content1: " ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA"
- teach-case9-content1-1: "2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM"
- teach-case9-content2: "Students at Interactive Telecommunications Program, New York University. 16 people."
- teach-case9-content3: "Elementary, Intermediate"
- teach-case9-content4: "The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js."
- teach-case9-content5: "This class is a mix of lectures, coding sessions, group discussions, and presentations. I used "
- teach-case9-content5-1: "GitHub"
- teach-case9-content5-2: " to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes."
- teach-case9-content5-3: "Methods: online/offline lectures and critiques."
-
- teach-case10-title: "Introduction to p5.js and JavaScript"
- teach-case10-lead-name: "Nico Reski"
- teach-case10-content1: " Currently available as self-study at own pace with accompanying slides, linked below."
- teach-case10-content3: "Beginner, Elementary"
- teach-case10-content4: "Introduce learners (potentially with no coding experiences at all) to the very basics of p5.js (and JavaScript), in order to encourage creative coding and enable them to pursue own projects in a safe environment."
- teach-case10-content5: "p5.js source code (for the introductory project), JavaScript source code (illustrating some basic JavaScript functionalities), accompanying slides in .pdf format, all hosted publicly on GitHub. "
- teach-case10-content5-1: "Overview"
- teach-case10-content5-2: " of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage."
-
- teach-case11-title: "Digital Weaving & Physical Computing Workshop Series"
- teach-case11-lead-name: "Qianqian Ye & Evelyn Masso"
- teach-case11-content1: " Womens Center for Creative Work (WCCW), Los Angeles, CA, US"
- teach-case11-content1-1: " 2019 October 19 - November 02, every Saturday 3-6 PM"
- teach-case11-content2: "15 women and non-binary artists, designer, makers, programers. "
- teach-case11-content3: "Elementary"
- teach-case11-content4: "Over the course of three workshops, we will draw and create patterns using p5.js, an open-source graphical library; we will learn and apply computational concepts to transform patterns and finally, we will bring a weaving to life with electronic microcontrollers."
- teach-case11-content5: "Methods: small team session"
- teach-case11-content5-1: "Materials: slides, p5.js web editor, pen and paper to draw pattern, physical pattern weaving tool."
- teach-case11-content5-2: "Workshop Slide #1"
- teach-case11-content5-3: "Workshop Slide #2"
- teach-case11-content5-4: "Workshop Information"
- teach-case11-content5-5: " on WCCW website."
-
- teach-case12-title: "Signing Coders"
- teach-case12-lead-name: "Taeyoon Choi"
- teach-case12-speech: "I'm working on a new series of coding class for Disabled students in South Korea. I'm researching about the pedagogy and translation. I plan to hold workshops in December 2020. The project is supported by the Open Society Foundation Human Rights Initiative and Korea Disability Arts & Culture Center."
- teach-case12-content1: " WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea."
- teach-case12-content1-1: "5 Sessions, each 2~3 hours"
- teach-case12-content2: "Deaf and Hard of Hearing students age 10~50 who live in NYC."
- teach-case12-content3: "Elementary"
- teach-case12-content4: "To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts."
- teach-case12-content5: "We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts."
- teach-case12-content5-1: "Syllabus & Material"
- teach-case12-content5-2: "More photos"
+ teach-title2: Teach
+ teach-intro1: >-
+ Every teaching has its own unique goals, messages, conditions, and
+ environments.
+ teach-intro2: >-
+ By documenting and sharing p5 workshops, classes, and materials, we hope to
+ better connect the p5.js learner and educator communities around the world.
+ teach-intro3: Share or recommend
+ teach-intro4: 'your own teaching experiences, too!'
+ teach-heading: p5 Teaching Resources
+ teach-search-filter: Search Filter
+ teach-filter1: 'Diversity & Inclusion : '
+ teach-filter1-label1: Gender
+ teach-filter1-label2: Race & Ethnicity
+ teach-filter1-label3: Language
+ teach-filter1-label4: Neuro-Type
+ teach-filter1-label5: Ability
+ teach-filter1-label6: Class
+ teach-filter1-label7: Religion
+ teach-filter1-label8: (Sub-)Culture
+ teach-filter1-label9: Political Opinion
+ teach-filter1-label10: Age
+ teach-filter1-label11: Skill Level
+ teach-filter1-label12: Occupation
+ teach-filter1-label13: '#noCodeSnobs'
+ teach-filter1-label14: '#newKidLove'
+ teach-filter1-label15: '#unassumeCore'
+ teach-filter1-label16: '#BlackLivesMatter'
+ teach-filter2: 'Venue : '
+ teach-filter2-label1: Africa
+ teach-filter2-label2: Asia
+ teach-filter2-label3: Europe
+ teach-filter2-label4: North America
+ teach-filter2-label5: Oceania
+ teach-filter2-label6: South America
+ teach-filter2-label7: 'Virtual-Online '
+ teach-filter3: 'Year : '
+ teach-filter4: 'Level of Difficulty : '
+ teach-filter4-label1: Elementary
+ teach-filter4-label2: Intermediate
+ teach-filter4-label3: Advanced
+ teach-case-subtitle1: Venue & Date
+ teach-case-subtitle2: Participants
+ teach-case-subtitle3: Level of Difficulty
+ teach-case-subtitle4: Goals
+ teach-case-subtitle5: Method & Materials
+ teach-case1-title: p5.js at Ubuntu Party!
+ teach-case1-lead-name: Basile Pesin
+ teach-case1-content1: '2020 Ubuntu Party, '
+ teach-case1-content1-1: 'Cité des Sciences et de l''Industrie, Paris, France'
+ teach-case1-content2: 'Any age, including children and parents, young and older adults.'
+ teach-case1-content3: Advanced
+ teach-case1-content4: >-
+ To introduce a new public to programming through fun and compelling
+ examples.
+ teach-case1-content5: >-
+ Method: in-person workshop, 1 hour per session, with different participant
+ each times. The students were using (Ubuntu) machines with the p5.js web
+ editor. I was teaching using a video projector as well as a board.
+ teach-case1-content5-1: >-
+ Materials: The exercises I gave where accessible through p5.js web-editor
+ links available in
+ teach-case2-title: >-
+ Making The Thing that Makes the Thing: Exploring Generative Art & Design
+ with p5.js
+ teach-case2-lead-name: Priti Pandurangan & Ajith Ranka
+ teach-case2-content1: 'National Institute of Design, Bangalore'
+ teach-case2-content1-1: '2020 February 8, 2:30-4:00 PM'
+ teach-case2-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case2-content3: 'Priti: Intermediate & Ajith: Advanced'
+ teach-case2-content4: >-
+ To explore generative art & design and recreate some classical works
+ with p5.js.
+ teach-case2-content5: 'Methods: In-person, collaborative, hands-on workshop.'
+ teach-case2-content5-1: ''
+ teach-case2-content5-2: 'Course page '
+ teach-case2-content5-3: 'linking to sketches on the p5 editor, '
+ teach-case2-content5-4: 'interactive reference guide '
+ teach-case2-content5-5: to p5 basics
+ teach-case3-title: CC Fest (Creative Coding Festival)
+ teach-case3-lead-name: Saber
+ teach-case3-speech: 'Love p5.js. It has meant so much to me, my students, and this community.'
+ teach-case3-content1: ' New York, Los Angeles, San Francisco, Virtual-Online '
+ teach-case3-content1-1: ' Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual'
+ teach-case3-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case3-content3: Intermediate
+ teach-case3-content4: >-
+ To build a teacher and student community around p5 for middle and high
+ school.
+ teach-case3-content5: >-
+ A half-day of workshop led by volunteer teachers. We saw lots of different
+ methods and materials. Most used some sort of slides or documentation, some
+ live coding using an editor, with work time for participant to remix.
+ teach-case3-content5-1: CC Fest Lessons page
+ teach-case3-content5-2: ' for teaching materials'
+ teach-case3-content5-3: More photos
+ teach-case4-title: Taller Introducción a la Programación Creativa con p5.js
+ teach-case4-lead-name: Aarón Montoya-Moraga
+ teach-case4-speech: 'p5.js is my happy place '
+ teach-case4-content1: ' PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online '
+ teach-case4-content1-1: ' 2018 November 14, 3 hours'
+ teach-case4-content2: >-
+ I had around 16 students in the workshop, and a team including 3 people from
+ the PlusCode festival, and one person at the venue.
+ teach-case4-content3: 'Elementary, Intermediate, Advanced'
+ teach-case4-content4: >-
+ Introduction to beginners and artists of graphic web programming and open
+ source, using p5.js, in Spanish :)
+ teach-case4-content5: 'I used the material on this '
+ teach-case4-content5-1: GitHub repo
+ teach-case4-content5-2: ', we used the p5.js web editor, we had a three hour long workshop'
+ teach-case4-content5-3: '+CODE electronic art festival 2018, Argentina'
+ teach-case4-content5-4: ', Medium'
+ teach-case5-title: Introduction to Generative Drawing
+ teach-case5-lead-name: Adam Herst
+ teach-case5-speech: >-
+ My greatest source of uncertainty in developing the workshop was whether it
+ was trying to teach art to programmers or to teach programming to artists.
+ teach-case5-content1: Inter/Access
+ teach-case5-content1-1: ' (artist-run centre), Toronto, Ontario, Canada'
+ teach-case5-content1-2: In-person with a self-paced workbook for remote work
+ teach-case5-content1-3: ' 2020 February 12, 7PM-9PM'
+ teach-case5-content2: 15 artists
+ teach-case5-content3: Elementary
+ teach-case5-content4: >-
+ To introduce p5.js to artists with little or no programming experience and
+ to suggest one way an analogue practice can migrate to a digital form.
+ teach-case5-content5: >-
+ A printed workbook with activities that used the p5.js web editor to show
+ how translate an physical drawing into a digital drawing.
+ teach-case5-content5-1: 'Processing Community Day 2019: Generative Drawing at Inter/Access'
+ teach-case5-content5-2: Introduction to Generative Drawing Letter PDF
+ teach-case5-content5-3: Introduction to Generative Drawing Booklet PDF
+ teach-case6-title: 'Open Lecture, Creative Coding: 2020'
+ teach-case6-lead-name: Shunsuke Takawo
+ teach-case6-speech: >-
+ I love p5.js because it's so easy to read and write code in p5.js. Coding in
+ your everyday life!
+ teach-case6-content1: ' Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online '
+ teach-case6-content1-1: ' 2020 March 16-18, 1-7 PM'
+ teach-case6-content2: 'Students of Kyoto University of Art and Design, and anyone.'
+ teach-case6-content3: Elementary
+ teach-case6-content4: Making code as a tool for artistic expression.
+ teach-case6-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case6-content5-1: Syllabus
+ teach-case6-content5-2: Day 1
+ teach-case6-content5-3: Day 2
+ teach-case6-content5-4: Day 3
+ teach-case6-content5-5: ', YouTube'
+ teach-case7-title: Creative Coding for Static Graphics
+ teach-case7-lead-name: Shunsuke Takawo
+ teach-case7-speech: >-
+ Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you
+ to give it a try!
+ teach-case7-content1: ' FabCafe MTRL, Tokyo, Japan'
+ teach-case7-content1-1: ' 2019 September 15, 4-7 PM '
+ teach-case7-content2: Anyone who wants to try coding in p5.js.
+ teach-case7-content3: Intermediate
+ teach-case7-content4: To code from the graphic design's perspective.
+ teach-case7-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case7-content5-1: Syllabus & Material
+ teach-case8-title: Generative Typography
+ teach-case8-lead-name: Dae In Chung
+ teach-case8-content1: ' Baltimore, Maryland, USA & Virtual-Online '
+ teach-case8-content1-1: ' 2019 January 21 - May 08, every Wednesday, 4-10 PM'
+ teach-case8-content2: 14 undergrads and grad students who had little to no experience in coding.
+ teach-case8-content3: Elementary
+ teach-case8-content4: Experiment with typographic forms and structures through computation.
+ teach-case8-content5: 'Methods: online/offline lectures and critiques.'
+ teach-case8-content5-1: 'Materials: p5js online editor, Github, youtube tutorials.'
+ teach-case8-content5-2: Works of participants
+ teach-case9-title: Machine Learning for the Web
+ teach-case9-lead-name: Yining Shi
+ teach-case9-content1: ' ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA'
+ teach-case9-content1-1: '2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM'
+ teach-case9-content2: >-
+ Students at Interactive Telecommunications Program, New York University. 16
+ people.
+ teach-case9-content3: 'Elementary, Intermediate'
+ teach-case9-content4: >-
+ The goal of this class is to learn and understand common machine learning
+ techniques and apply them to generate creative outputs in the browser using
+ ml5.js and p5.js.
+ teach-case9-content5: >-
+ This class is a mix of lectures, coding sessions, group discussions, and
+ presentations. I used
+ teach-case9-content5-1: GitHub
+ teach-case9-content5-2: ' to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes.'
+ teach-case9-content5-3: 'Methods: online/offline lectures and critiques.'
+ teach-case10-title: Introduction to p5.js and JavaScript
+ teach-case10-lead-name: Nico Reski
+ teach-case10-content1: ' Currently available as self-study at own pace with accompanying slides, linked below.'
+ teach-case10-content3: 'Beginner, Elementary'
+ teach-case10-content4: >-
+ Introduce learners (potentially with no coding experiences at all) to the
+ very basics of p5.js (and JavaScript), in order to encourage creative coding
+ and enable them to pursue own projects in a safe environment.
+ teach-case10-content5: >-
+ p5.js source code (for the introductory project), JavaScript source code
+ (illustrating some basic JavaScript functionalities), accompanying slides in
+ .pdf format, all hosted publicly on GitHub.
+ teach-case10-content5-1: Overview
+ teach-case10-content5-2: ' of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage.'
+ teach-case11-title: Digital Weaving & Physical Computing Workshop Series
+ teach-case11-lead-name: Qianqian Ye & Evelyn Masso
+ teach-case11-content1: ' Womens Center for Creative Work (WCCW), Los Angeles, CA, US'
+ teach-case11-content1-1: ' 2019 October 19 - November 02, every Saturday 3-6 PM'
+ teach-case11-content2: '15 women and non-binary artists, designer, makers, programers. '
+ teach-case11-content3: Elementary
+ teach-case11-content4: >-
+ Over the course of three workshops, we will draw and create patterns using
+ p5.js, an open-source graphical library; we will learn and apply
+ computational concepts to transform patterns and finally, we will bring a
+ weaving to life with electronic microcontrollers.
+ teach-case11-content5: 'Methods: small team session'
+ teach-case11-content5-1: >-
+ Materials: slides, p5.js web editor, pen and paper to draw pattern, physical
+ pattern weaving tool.
+ teach-case11-content5-2: 'Workshop Slide #1'
+ teach-case11-content5-3: 'Workshop Slide #2'
+ teach-case11-content5-4: Workshop Information
+ teach-case11-content5-5: ' on WCCW website.'
+ teach-case12-title: Signing Coders
+ teach-case12-lead-name: Taeyoon Choi
+ teach-case12-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case12-content1: ' WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea.'
+ teach-case12-content1-1: '5 Sessions, each 2~3 hours'
+ teach-case12-content2: Deaf and Hard of Hearing students age 10~50 who live in NYC.
+ teach-case12-content3: Elementary
+ teach-case12-content4: >-
+ To help Deaf and Hard of Hearing students learn about computer programming
+ through playful exercises. To make ASL tutorial of basic coding concepts.
+ teach-case12-content5: >-
+ We used p5.js Web editor and code examples on the website. We also used
+ dice, playing cards and various paper tools to help students learn about
+ coding concepts.
+ teach-case12-content5-1: Syllabus & Material
+ teach-case12-content5-2: More photos
+ teach-case13-title: Painting with Code
+ teach-case13-lead-name: Andreas Refsgaard
+ teach-case13-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case13-content1: ' Copenhagen, Denmark'
+ teach-case13-content1-1: 2020 February 22
+ teach-case13-content2: A wide range of people.
+ teach-case13-content3: Intermediate
+ teach-case13-content4: >-
+ Get creatives, designers, artists and other people who don't typically use
+ code introduced to p5.js.
+ teach-case13-content5: 'Website, p5.js editor.'
+ teach-case13-content5-1: Material
+ teach-case14-title: Smarter Home
+ teach-case14-lead-name: Lauren McCarthy
+ teach-case14-speech: >-
+ The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart
+ homes of the future.
+ teach-case14-content1: ' Gwangju Cultural Foundation(GJCF), Gwangju, South Korea'
+ teach-case14-content1-1: 2020 April 19 - May 11
+ teach-case14-content1-2: ZERO1 American Art Incubator(AAI)
+ teach-case14-content2: 16 people (resident of Gwangju or surrounding areas)
+ teach-case14-content3: Elementary & Intermediate
+ teach-case14-content4: >-
+ To reimagine smart homes of the future, with such technologies as p5.js and
+ ml5.js. Spending a lot of time talking about the increasing role technology
+ is playing at home and in Korean society, the workshop aimed to offer a
+ vision of a smarter home driven by the participants' critical optimism for
+ the future.
+ teach-case14-content5: 'p5.js, p5 web editor, ml5.js, and installations. '
+ teach-case14-content5-1: >-
+ 1) We set out to prototype the concept of a “smarter home”, trying to bring
+ technology into personal space on our own terms.
+ teach-case14-content5-2: >-
+ 2) Breaking into four teams, each selected an issue to address through a
+ room they would create within our larger home structure.
+ teach-case14-content5-3: >-
+ 3) We incorporated machine learning, audio processing, and computer vision
+ techniques to track and respond to the presence of people.
+ teach-case14-content5-4: >-
+ 4) Together, these works make one installation, comprised of four
+ interconnected smart rooms that each provoke discussion.
+ teach-case14-content5-5: More pictures
+ teach-case15-title: Introduction to p5js
+ teach-case15-lead-name: Bérenger Recoules (a.k.a b2renger)
+ teach-case15-content1: 'L''École de Design Nantes Atlantique, France'
+ teach-case15-content1-1: Since 2018 and ongoing
+ teach-case15-content2: Students from l'école de design Nantes Atlantique'
+ teach-case15-content3: Elementary
+ teach-case15-content4: 'To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ teach-case15-content5: GitHub Readme File
+ teach-case15-content5-1: ' : a text tutorial in French'
+ teach-case16-title: "50+ Coding Club : My First Code Art with Handy(\U0001F590) and Family"
+ teach-case16-lead-name: Inhwa Yeom
+ teach-case16-speech: >-
+ This workshop was conducted in line with 'p5 for 50+' project, with supports
+ from 2020 Processing Foundation fellowship program and Asia Culture Center
+ (ACC).
+ teach-case16-content1: ' Asia Culture Center(ACC), Gwangju. Virtual & Online'
+ teach-case16-content1-1: >-
+ (In-Person) 2020 November 20 - 28, every Friday and Saturday;
+ (Virtual-Online) Anytime from 2020 December on via YouTube videos
+ teach-case16-content2: '8 people, composed of 6 older adults and their children'
+ teach-case16-content2-1: 1) Those who define themselves as older adults (age around 50 and older)
+ teach-case16-content2-2: '2) People from any age groups who accompany a person of 1) '
+ teach-case16-content3: Elementary
+ teach-case16-content4: >-
+ Addressing the digital literacy and rights of age 50+ population in a
+ non-English-speaking country, this workshop aimed to lower their physical,
+ lingual, and emotional barriers to learning coding with smartphone-based
+ p5.js editor.
+ teach-case16-content5: p5for50+ web app
+ teach-case16-content5-1: >-
+ a smartphone-based web app, with p5.js web editor embedded in it. Created
+ with the editor, the participants' p5 sketches were printed out and framed
+ on-site, and distributed as their materialized outcomes.
+ teach-case16-content5-2: Curriculum
+ teach-case16-content5-3: YouTube
+ teach-case16-content5-4: More pictures
+ teach-case17-title: Programación Aplicada al Arte Visual e Interactivo
+ teach-case17-lead-name: Sebastián Zavatarelli
+ teach-case17-speech: >-
+ El curso es parte de la oferta de cursos de extensión de el Area
+ transdepartamental de artes multimediales de la Universidad Nacional de las
+ Artes en Argentina.
+ teach-case17-content1: ' Buenos Aires, Argentina. Virtual & Online'
+ teach-case17-content1-1: '2020 September 15 - October 14 every Wednesday 6:30-9:00 PM'
+ teach-case17-content2: Alrededor de 10 personas. La mayoría mujeres.
+ teach-case17-content3: Elementary & Intermediate
+ teach-case17-content4: >-
+ El curso está destinado a artistas que quieran comenzar a utilizar las
+ herramientas tecnológicas actuales para el desarrollo de sus obras. También
+ puede ser aprovechado por aquellxs que quieran iniciarse en la programación
+ de computadoras a través de un entorno de programación simple, visual,
+ accesible y divertido.
+ teach-case17-content5: >-
+ p5.js web editor. Online a trvés de plataforma Zoom y material subido en
+ Moodle.
+ teach-case17-content5-1: More pictures
diff --git a/src/data/examples/assets/rover_wide.jpg b/src/data/examples/assets/rover_wide.jpg
new file mode 100644
index 0000000000..793781a3be
Binary files /dev/null and b/src/data/examples/assets/rover_wide.jpg differ
diff --git a/src/data/examples/build_examples/build.js b/src/data/examples/build_examples/build.js
index 1205598ad7..7d82ac1557 100644
--- a/src/data/examples/build_examples/build.js
+++ b/src/data/examples/build_examples/build.js
@@ -3,7 +3,7 @@ var verbose = false;
// now load the modules we need
var ejs = require('ejs'); // library for turning .ejs templates into .html files
var fs = require('fs'); // node.js library for reading and writing files
-var path = require('upath'); // platform indepedent file paths
+var path = require('upath'); // platform independent file paths
// make sure EJS is configured to use curly braces for templates
// ejs.open = '<%';
diff --git a/src/data/examples/en/05_Image/07_EdgeDetection.js b/src/data/examples/en/05_Image/07_EdgeDetection.js
new file mode 100644
index 0000000000..5eff38c2d2
--- /dev/null
+++ b/src/data/examples/en/05_Image/07_EdgeDetection.js
@@ -0,0 +1,93 @@
+/*
+ * @name Edge Detection
+ * @description A high-pass filter sharpens an image. This program analyzes every pixel in an image in relation to the neighboring pixels to sharpen the image.
+ * This example is ported from the Edge Detection example
+ * on the Processing website
+ */
+// this program analyzes every pixel in an image
+// in relation to the neighbouring pixels
+// to sharpen the image
+
+// to consider all neighboring pixels we use a 3x3 array
+// and normalize these values
+// kernel is the 3x3 matrix of normalized values
+let kernel = [[-1, -1, -1 ], [ -1, 9, -1 ], [-1, -1, -1 ]];
+
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// if loadImage() is called in setup(), the image won't appear
+// since noLoop() restricts draw() to execute only once
+// (one execution of draw() is not enough time for the image to load),
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover.png");
+}
+
+// setup() runs after preload, once()
+function setup() {
+ // create canvas
+ createCanvas(710, 400);
+ // noLoop() makes draw() run only once, not in a loop
+ noLoop();
+}
+
+// draw() runs after setup(), normally on a loop
+// in this case it runs only once, because of noDraw()
+function draw() {
+
+ // place the original image on the upper left corner
+ image(img, 0, 0);
+
+ // create a new image, same dimensions as img
+ edgeImg = createImage(img.width, img.height);
+
+ // load its pixels
+ edgeImg.loadPixels();
+
+
+ // two for() loops, to iterate in x axis and y axis
+ // since the kernel assumes that the pixel
+ // has pixels above, under, left, and right
+ // we need to skip the first and last column and row
+ // x then goes from 1 to width - 1
+ // y then goes from 1 to height - 1
+
+ for (let x = 1; x < img.width - 1; x++) {
+ for (let y = 1; y < img.height - 1; y++) {
+ // kernel sum for the current pixel starts as 0
+ let sum = 0;
+
+ // kx, ky variables for iterating over the kernel
+ // kx, ky have three different values: -1, 0, 1
+ for (kx = -1; kx <= 1; kx++) {
+ for (ky = -1; ky <= 1; ky++) {
+
+ let xpos = x + kx;
+ let ypos = y + ky;
+ let pos = (y + ky)*img.width + (x + kx);
+ // since our image is grayscale,
+ // RGB values are identical
+ // we retrieve the red value for this example
+ let val = red(img.get(xpos, ypos));
+ // accumulate the kernel sum
+ // kernel is a 3x3 matrix
+ // kx and ky have values -1, 0, 1
+ // if we add 1 to kx and ky, we get 0, 1, 2
+ // with that we can use it to iterate over kernel
+ // and calculate the accumulated sum
+ sum += kernel[ky+1][kx+1] * val;
+ }
+ }
+
+ // set the pixel value of the edgeImg
+ edgeImg.set(x, y, color(sum, sum, sum));
+ }
+ }
+
+ // updatePixels() to write the changes on edgeImg
+ edgeImg.updatePixels();
+
+ // draw edgeImg at the right of the original image
+ image(edgeImg, img.width, 0);
+}
\ No newline at end of file
diff --git a/src/data/examples/en/05_Image/08_Brightness.js b/src/data/examples/en/05_Image/08_Brightness.js
new file mode 100644
index 0000000000..3c58a98876
--- /dev/null
+++ b/src/data/examples/en/05_Image/08_Brightness.js
@@ -0,0 +1,63 @@
+/*
+ * @name Brightness
+ * @description This program adjusts the brightness of a part of the image by calculating the distance of each pixel to the mouse.
+ * This example is ported from the Brightness example
+ * on the Processing website
+ */
+// This program adjusts the brightness
+// of a part of the image by
+// calculating the distance of
+// each pixel to the mouse.
+let img;
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover_wide.jpg");
+}
+// setup() runs after preload, once()
+function setup() {
+ createCanvas(710, 400);
+ pixelDensity(1);
+ frameRate(30);
+}
+
+function draw() {
+ image(img,0,0);
+ // Only need to load the pixels[] array once, because we're only
+ // manipulating pixels[] inside draw(), not drawing shapes.
+ loadPixels();
+ // We must also call loadPixels() on the PImage since we are going to read its pixels.
+ img.loadPixels();
+ for (let x = 0; x < img.width; x++) {
+ for (let y = 0; y < img.height; y++ ) {
+ // Calculate the 1D location from a 2D grid
+ let loc = (x + y*img.width)*4;
+ // Get the R,G,B values from image
+ let r,g,b;
+ r = img.pixels[loc];
+ // g = img.pixels[loc+1];
+ // b = img.pixels[loc+2];
+ // Calculate an amount to change brightness based on proximity to the mouse
+ // The closer the pixel is to the mouse, the lower the value of "distance"
+ let maxdist = 50;//dist(0,0,width,height);
+ let d = dist(x, y, mouseX, mouseY);
+ let adjustbrightness = 255*(maxdist-d)/maxdist;
+ r += adjustbrightness;
+ // g += adjustbrightness;
+ // b += adjustbrightness;
+ // Constrain RGB to make sure they are within 0-255 color range
+ r = constrain(r, 0, 255);
+ // g = constrain(g, 0, 255);
+ // b = constrain(b, 0, 255);
+ // Make a new color and set pixel in the window
+ let pixloc = (y*width + x)*4;
+ pixels[pixloc] = r;
+ pixels[pixloc+1] = r;
+ pixels[pixloc+2] = r;
+ pixels[pixloc+3] = 255; // Always have to set alpha
+ }
+ }
+ updatePixels();
+}
\ No newline at end of file
diff --git a/src/data/examples/en/08_Math/18_Map.js b/src/data/examples/en/08_Math/18_Map.js
index a7b4d86058..2411d7e852 100644
--- a/src/data/examples/en/08_Math/18_Map.js
+++ b/src/data/examples/en/08_Math/18_Map.js
@@ -7,15 +7,15 @@
* to define the color and size of a circle.
*/
function setup() {
- createCanvas(640, 400);
+ createCanvas(720, 400);
noStroke();
}
function draw() {
background(0);
- // Scale the mouseX value from 0 to 640 to a range between 0 and 175
+ // Scale the mouseX value from 0 to 720 to a range between 0 and 175
let c = map(mouseX, 0, width, 0, 175);
- // Scale the mouseX value from 0 to 640 to a range between 40 and 300
+ // Scale the mouseX value from 0 to 720 to a range between 40 and 300
let d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
diff --git a/src/data/examples/en/11_Objects/04_Inheritance.js b/src/data/examples/en/11_Objects/04_Inheritance.js
index 32b6a630e3..9070daa336 100644
--- a/src/data/examples/en/11_Objects/04_Inheritance.js
+++ b/src/data/examples/en/11_Objects/04_Inheritance.js
@@ -21,7 +21,7 @@ function draw() {
spots.display();
}
-class SpinArm {
+class Spin {
constructor(x, y, s) {
this.x = x;
this.y = y;
@@ -32,6 +32,12 @@ class SpinArm {
update() {
this.angle += this.speed;
}
+}
+
+class SpinArm extends Spin {
+ constructor(x, y, s) {
+ super(x, y, s)
+ }
display() {
strokeWeight(1);
@@ -45,17 +51,10 @@ class SpinArm {
}
}
-class SpinSpots {
+class SpinSpots extends Spin {
constructor(x, y, s, d) {
- this.x = x;
- this.y = y;
- this.speed = s;
+ super(x, y, s)
this.dim = d;
- this.angle = 0.0;
- }
-
- update() {
- this.angle += this.speed;
}
display() {
@@ -68,4 +67,4 @@ class SpinSpots {
ellipse(this.dim/2, 0, this.dim, this.dim);
pop();
}
-}
+}
\ No newline at end of file
diff --git a/src/data/examples/en/13_Motion/07_Circle_Collision.js b/src/data/examples/en/13_Motion/07_Circle_Collision.js
new file mode 100644
index 0000000000..876bc23d6e
--- /dev/null
+++ b/src/data/examples/en/13_Motion/07_Circle_Collision.js
@@ -0,0 +1,145 @@
+/*
+ * @name Circle Collision
+ * @frame 710,400 (optional)
+ * @description This is a port of the "Circle Collision" example from processing.org/examples This example uses vectors for better visualization of physical Quantity
+ */
+class Ball {
+ constructor(x, y, r) {
+ this.position = new p5.Vector(x, y);
+ this.velocity = p5.Vector.random2D();
+ this.velocity.mult(3);
+ this.r = r;
+ this.m = r * 0.1;
+ }
+ update() {
+ this.position.add(this.velocity);
+ }
+
+ checkBoundaryCollision() {
+ if (this.position.x > width - this.r) {
+ this.position.x = width - this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.x < this.r) {
+ this.position.x = this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.y > height - this.r) {
+ this.position.y = height - this.r;
+ this.velocity.y *= -1;
+ } else if (this.position.y < this.r) {
+ this.position.y = this.r;
+ this.velocity.y *= -1;
+ }
+ }
+
+ checkCollision(other) {
+ // Get distances between the balls components
+ let distanceVect = p5.Vector.sub(other.position, this.position);
+
+ // Calculate magnitude of the vector separating the balls
+ let distanceVectMag = distanceVect.mag();
+
+ // Minimum distance before they are touching
+ let minDistance = this.r + other.r;
+
+ if (distanceVectMag < minDistance) {
+ let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+ let d = distanceVect.copy();
+ let correctionVector = d.normalize().mult(distanceCorrection);
+ other.position.add(correctionVector);
+ this.position.sub(correctionVector);
+
+ // get angle of distanceVect
+ let theta = distanceVect.heading();
+ // precalculate trig values
+ let sine = sin(theta);
+ let cosine = cos(theta);
+
+ /* bTemp will hold rotated ball this.positions. You
+ just need to worry about bTemp[1] this.position*/
+ let bTemp = [new p5.Vector(), new p5.Vector()];
+
+ /* this ball's this.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].this.position.x and bTemp[0].this.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
+ let vTemp = [new p5.Vector(), new p5.Vector()];
+
+ vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+ vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+ vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+ vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+ /* Now that velocities are rotated, you can use 1D
+ conservation of momentum equations to calculate
+ the final this.velocity along the x-axis. */
+ let vFinal = [new p5.Vector(), new p5.Vector()];
+
+ // final rotated this.velocity for b[0]
+ vFinal[0].x =
+ ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+ (this.m + other.m);
+ vFinal[0].y = vTemp[0].y;
+
+ // final rotated this.velocity for b[0]
+ vFinal[1].x =
+ ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+ (this.m + other.m);
+ vFinal[1].y = vTemp[1].y;
+
+ // hack to avoid clumping
+ bTemp[0].x += vFinal[0].x;
+ bTemp[1].x += vFinal[1].x;
+
+ /* Rotate ball this.positions and velocities back
+ Reverse signs in trig expressions to rotate
+ in the opposite direction */
+ // rotate balls
+ let bFinal = [new p5.Vector(), new p5.Vector()];
+
+ bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+ bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+ bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+ bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+ // update balls to screen this.position
+ other.position.x = this.position.x + bFinal[1].x;
+ other.position.y = this.position.y + bFinal[1].y;
+
+ this.position.add(bFinal[0]);
+
+ // update velocities
+ this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+ this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+ other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+ other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+ }
+ }
+
+ display() {
+ noStroke();
+ fill(204);
+ ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+ }
+}
+let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
+console.log(balls);
+function setup() {
+ createCanvas(710, 400);
+}
+
+function draw() {
+ background(51);
+ for (let i = 0; i < balls.length; i++) {
+ let b = balls[i];
+ b.update();
+ b.display();
+ b.checkBoundaryCollision();
+ balls[0].checkCollision(balls[1]);
+ }
+}
diff --git a/src/data/examples/es/05_Image/07_EdgeDetection.js b/src/data/examples/es/05_Image/07_EdgeDetection.js
new file mode 100644
index 0000000000..2c0509d44b
--- /dev/null
+++ b/src/data/examples/es/05_Image/07_EdgeDetection.js
@@ -0,0 +1,93 @@
+/*
+ * @name Edge Detection
+ * @description A high-pass filter sharpens an image. This program analyzes every pixel in an image in relation to the neighboring pixels to sharpen the image.
+ * This example is ported from the Edge Detection example
+ * on the Processing website
+ */
+// this program analyzes every pixel in an image
+// in relation to the neighbouring pixels
+// to sharpen the image
+
+// to consider all neighboring pixels we use a 3x3 array
+// and normalize these values
+// kernel is the 3x3 matrix of normalized values
+let kernel = [[-1, -1, -1 ], [ -1, 9, -1 ], [-1, -1, -1 ]];
+
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// if loadImage() is called in setup(), the image won't appear
+// since noLoop() restricts draw() to execute only once
+// (one execution of draw() is not enough time for the image to load),
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover.png");
+}
+
+// setup() runs after preload, once()
+function setup() {
+ // create canvas
+ createCanvas(710, 400);
+ // noLoop() makes draw() run only once, not in a loop
+ noLoop();
+}
+
+// draw() runs after setup(), normally on a loop
+// in this case it runs only once, because of noDraw()
+function draw() {
+
+ // place the original image on the upper left corner
+ image(img, 0, 0);
+
+ // create a new image, same dimensions as img
+ edgeImg = createImage(img.width, img.height);
+
+ // load its pixels
+ edgeImg.loadPixels();
+
+
+ // two for() loops, to iterate in x axis and y axis
+ // since the kernel assumes that the pixel
+ // has pixels above, under, left, and right
+ // we need to skip the first and last column and row
+ // x then goes from 1 to width - 1
+ // y then goes from 1 to height - 1
+
+ for (let x = 1; x < img.width - 1; x++) {
+ for (let y = 1; y < img.height - 1; y++) {
+ // kernel sum for the current pixel starts as 0
+ let sum = 0;
+
+ // kx, ky variables for iterating over the kernel
+ // kx, ky have three different values: -1, 0, 1
+ for (kx = -1; kx <= 1; kx++) {
+ for (ky = -1; ky <= 1; ky++) {
+
+ let xpos = x + kx;
+ let ypos = y + ky;
+ let pos = (y + ky)*img.width + (x + kx);
+ // since our image is grayscale,
+ // RGB values are identical
+ // we retrieve the red value for this example
+ let val = red(img.get(xpos, ypos));
+ // accumulate the kernel sum
+ // kernel is a 3x3 matrix
+ // kx and ky have values -1, 0, 1
+ // if we add 1 to kx and ky, we get 0, 1, 2
+ // with that we can use it to iterate over kernel
+ // and calculate the accumulated sum
+ sum += kernel[ky+1][kx+1] * val;
+ }
+ }
+
+ // set the pixel value of the edgeImg
+ edgeImg.set(x, y, color(sum, sum, sum));
+ }
+ }
+
+ // updatePixels() to write the changes on edgeImg
+ edgeImg.updatePixels();
+
+ // draw edgeImg at the right of the original image
+ image(edgeImg, img.width, 0);
+}
diff --git a/src/data/examples/es/05_Image/08_Brightness.js b/src/data/examples/es/05_Image/08_Brightness.js
new file mode 100644
index 0000000000..3c58a98876
--- /dev/null
+++ b/src/data/examples/es/05_Image/08_Brightness.js
@@ -0,0 +1,63 @@
+/*
+ * @name Brightness
+ * @description This program adjusts the brightness of a part of the image by calculating the distance of each pixel to the mouse.
+ * This example is ported from the Brightness example
+ * on the Processing website
+ */
+// This program adjusts the brightness
+// of a part of the image by
+// calculating the distance of
+// each pixel to the mouse.
+let img;
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover_wide.jpg");
+}
+// setup() runs after preload, once()
+function setup() {
+ createCanvas(710, 400);
+ pixelDensity(1);
+ frameRate(30);
+}
+
+function draw() {
+ image(img,0,0);
+ // Only need to load the pixels[] array once, because we're only
+ // manipulating pixels[] inside draw(), not drawing shapes.
+ loadPixels();
+ // We must also call loadPixels() on the PImage since we are going to read its pixels.
+ img.loadPixels();
+ for (let x = 0; x < img.width; x++) {
+ for (let y = 0; y < img.height; y++ ) {
+ // Calculate the 1D location from a 2D grid
+ let loc = (x + y*img.width)*4;
+ // Get the R,G,B values from image
+ let r,g,b;
+ r = img.pixels[loc];
+ // g = img.pixels[loc+1];
+ // b = img.pixels[loc+2];
+ // Calculate an amount to change brightness based on proximity to the mouse
+ // The closer the pixel is to the mouse, the lower the value of "distance"
+ let maxdist = 50;//dist(0,0,width,height);
+ let d = dist(x, y, mouseX, mouseY);
+ let adjustbrightness = 255*(maxdist-d)/maxdist;
+ r += adjustbrightness;
+ // g += adjustbrightness;
+ // b += adjustbrightness;
+ // Constrain RGB to make sure they are within 0-255 color range
+ r = constrain(r, 0, 255);
+ // g = constrain(g, 0, 255);
+ // b = constrain(b, 0, 255);
+ // Make a new color and set pixel in the window
+ let pixloc = (y*width + x)*4;
+ pixels[pixloc] = r;
+ pixels[pixloc+1] = r;
+ pixels[pixloc+2] = r;
+ pixels[pixloc+3] = 255; // Always have to set alpha
+ }
+ }
+ updatePixels();
+}
\ No newline at end of file
diff --git a/src/data/examples/es/08_Math/18_Map.js b/src/data/examples/es/08_Math/18_Map.js
index f4170bed75..1d293e8a20 100644
--- a/src/data/examples/es/08_Math/18_Map.js
+++ b/src/data/examples/es/08_Math/18_Map.js
@@ -7,15 +7,15 @@
* para definir el color y el tamaño de un círculo.
*/
function setup() {
- createCanvas(640, 400);
+ createCanvas(720, 400);
noStroke();
}
function draw() {
background(0);
- // Escala el valor de mouseX de 0 a 640 a un rango entre 0 y 175
+ // Escala el valor de mouseX de 0 a 720 a un rango entre 0 y 175
let c = map(mouseX, 0, width, 0, 175);
- // Escala el valor de mouseX de 0 a 640 a un rango entre 40 y 300
+ // Escala el valor de mouseX de 0 a 720 a un rango entre 40 y 300
let d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
diff --git a/src/data/examples/es/11_Objects/04_Inheritance.js b/src/data/examples/es/11_Objects/04_Inheritance.js
index d1b44272f3..b1a0af4203 100644
--- a/src/data/examples/es/11_Objects/04_Inheritance.js
+++ b/src/data/examples/es/11_Objects/04_Inheritance.js
@@ -21,7 +21,7 @@ function draw() {
spots.display();
}
-class SpinArm {
+class Spin {
constructor(x, y, s) {
this.x = x;
this.y = y;
@@ -32,6 +32,12 @@ class SpinArm {
update() {
this.angle += this.speed;
}
+}
+
+class SpinArm extends Spin {
+ constructor(x, y, s) {
+ super(x, y, s)
+ }
display() {
strokeWeight(1);
@@ -45,17 +51,10 @@ class SpinArm {
}
}
-class SpinSpots {
+class SpinSpots extends Spin {
constructor(x, y, s, d) {
- this.x = x;
- this.y = y;
- this.speed = s;
+ super(x, y, s)
this.dim = d;
- this.angle = 0.0;
- }
-
- update() {
- this.angle += this.speed;
}
display() {
@@ -68,4 +67,4 @@ class SpinSpots {
ellipse(this.dim/2, 0, this.dim, this.dim);
pop();
}
-}
+}
\ No newline at end of file
diff --git a/src/data/examples/es/13_Motion/07_Circle_Collision.js b/src/data/examples/es/13_Motion/07_Circle_Collision.js
new file mode 100644
index 0000000000..876bc23d6e
--- /dev/null
+++ b/src/data/examples/es/13_Motion/07_Circle_Collision.js
@@ -0,0 +1,145 @@
+/*
+ * @name Circle Collision
+ * @frame 710,400 (optional)
+ * @description This is a port of the "Circle Collision" example from processing.org/examples This example uses vectors for better visualization of physical Quantity
+ */
+class Ball {
+ constructor(x, y, r) {
+ this.position = new p5.Vector(x, y);
+ this.velocity = p5.Vector.random2D();
+ this.velocity.mult(3);
+ this.r = r;
+ this.m = r * 0.1;
+ }
+ update() {
+ this.position.add(this.velocity);
+ }
+
+ checkBoundaryCollision() {
+ if (this.position.x > width - this.r) {
+ this.position.x = width - this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.x < this.r) {
+ this.position.x = this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.y > height - this.r) {
+ this.position.y = height - this.r;
+ this.velocity.y *= -1;
+ } else if (this.position.y < this.r) {
+ this.position.y = this.r;
+ this.velocity.y *= -1;
+ }
+ }
+
+ checkCollision(other) {
+ // Get distances between the balls components
+ let distanceVect = p5.Vector.sub(other.position, this.position);
+
+ // Calculate magnitude of the vector separating the balls
+ let distanceVectMag = distanceVect.mag();
+
+ // Minimum distance before they are touching
+ let minDistance = this.r + other.r;
+
+ if (distanceVectMag < minDistance) {
+ let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+ let d = distanceVect.copy();
+ let correctionVector = d.normalize().mult(distanceCorrection);
+ other.position.add(correctionVector);
+ this.position.sub(correctionVector);
+
+ // get angle of distanceVect
+ let theta = distanceVect.heading();
+ // precalculate trig values
+ let sine = sin(theta);
+ let cosine = cos(theta);
+
+ /* bTemp will hold rotated ball this.positions. You
+ just need to worry about bTemp[1] this.position*/
+ let bTemp = [new p5.Vector(), new p5.Vector()];
+
+ /* this ball's this.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].this.position.x and bTemp[0].this.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
+ let vTemp = [new p5.Vector(), new p5.Vector()];
+
+ vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+ vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+ vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+ vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+ /* Now that velocities are rotated, you can use 1D
+ conservation of momentum equations to calculate
+ the final this.velocity along the x-axis. */
+ let vFinal = [new p5.Vector(), new p5.Vector()];
+
+ // final rotated this.velocity for b[0]
+ vFinal[0].x =
+ ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+ (this.m + other.m);
+ vFinal[0].y = vTemp[0].y;
+
+ // final rotated this.velocity for b[0]
+ vFinal[1].x =
+ ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+ (this.m + other.m);
+ vFinal[1].y = vTemp[1].y;
+
+ // hack to avoid clumping
+ bTemp[0].x += vFinal[0].x;
+ bTemp[1].x += vFinal[1].x;
+
+ /* Rotate ball this.positions and velocities back
+ Reverse signs in trig expressions to rotate
+ in the opposite direction */
+ // rotate balls
+ let bFinal = [new p5.Vector(), new p5.Vector()];
+
+ bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+ bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+ bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+ bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+ // update balls to screen this.position
+ other.position.x = this.position.x + bFinal[1].x;
+ other.position.y = this.position.y + bFinal[1].y;
+
+ this.position.add(bFinal[0]);
+
+ // update velocities
+ this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+ this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+ other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+ other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+ }
+ }
+
+ display() {
+ noStroke();
+ fill(204);
+ ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+ }
+}
+let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
+console.log(balls);
+function setup() {
+ createCanvas(710, 400);
+}
+
+function draw() {
+ background(51);
+ for (let i = 0; i < balls.length; i++) {
+ let b = balls[i];
+ b.update();
+ b.display();
+ b.checkBoundaryCollision();
+ balls[0].checkCollision(balls[1]);
+ }
+}
diff --git a/src/data/examples/ko/00_Structure/03_No_Loop.js b/src/data/examples/ko/00_Structure/03_No_Loop.js
index 7cd320016d..2f50b6f2f5 100644
--- a/src/data/examples/ko/00_Structure/03_No_Loop.js
+++ b/src/data/examples/ko/00_Structure/03_No_Loop.js
@@ -1,5 +1,5 @@
/*
- * @name 루프 해제
+ * @name 루프 중단
* @description noLoop()함수는 draw()함수를 반복없이 단 한번만 실행되도록 합니다.
* noLoop()를 호출하지 않는다면 draw()함수는 계속해서 반복 실행될 것입니다.
*/
diff --git a/src/data/examples/ko/05_Image/06_Blur.js b/src/data/examples/ko/05_Image/06_Blur.js
new file mode 100644
index 0000000000..2374bc0345
--- /dev/null
+++ b/src/data/examples/ko/05_Image/06_Blur.js
@@ -0,0 +1,89 @@
+/*
+ * @name Blur
+ * @description A low-pass filter that blurs an image. This program analyzes every pixel in an image and blends it with all the neighboring pixels to blur the image.
+ * This example is ported from the Blur example
+ * on the Processing website
+ */
+// to consider all neighboring pixels we use a 3x3 array
+// and normalize these values
+// v is the normalized value
+let v = 1.0 / 9.0;
+// kernel is the 3x3 matrix of normalized values
+let kernel = [[ v, v, v ], [ v, v, v ], [ v, v, v ]];
+
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// if loadImage() is called in setup(), the image won't appear
+// since noLoop() restricts draw() to execute only once
+// (one execution of draw() is not enough time for the image to load),
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover.png");
+}
+
+// setup() runs once after preload
+function setup() {
+ // create canvas
+ createCanvas(710, 400);
+ // noLoop() makes draw() run only once, not in a loop
+ noLoop();
+}
+
+
+// draw() runs after setup(), normally on a loop
+// in this case it runs only once, because of noDraw()
+function draw() {
+ // place the original image on the upper left corner
+ image(img, 0, 0);
+
+ // create a new image, same dimensions as img
+ edgeImg = createImage(img.width, img.height);
+
+ // load its pixels
+ edgeImg.loadPixels();
+
+ // two for() loops, to iterate in x axis and y axis
+ // since the kernel assumes that the pixel
+ // has pixels above, under, left, and right
+ // we need to skip the first and last column and row
+ // x then goes from 1 to width - 1
+ // y then goes from 1 to height - 1
+ for (let x = 1; x < img.width; x++) {
+ for (let y = 1; y < img.height; y++) {
+ // kernel sum for the current pixel starts as 0
+ let sum = 0;
+
+ // kx, ky variables for iterating over the kernel
+ // kx, ky have three different values: -1, 0, 1
+ for (kx = -1; kx <= 1; kx++) {
+ for (ky = -1; ky <= 1; ky++) {
+ let xpos = x + kx;
+ let ypos = y + ky;
+
+ // since our image is grayscale,
+ // RGB values are identical
+ // we retrieve the red value for this example
+ // (green and blue work as well)
+ let val = red(img.get(xpos, ypos));
+
+ // accumulate the kernel sum
+ // kernel is a 3x3 matrix
+ // kx and ky have values -1, 0, 1
+ // if we add 1 to kx and ky, we get 0, 1, 2
+ // with that we can use it to iterate over kernel
+ // and calculate the accumulated sum
+ sum += kernel[kx+1][ky+1] * val;
+ }
+ }
+
+ // set the value of the edgeImg pixel to the kernel sum
+ edgeImg.set(x, y, color(sum));
+ }
+ }
+ // updatePixels() to write the changes on edgeImg
+ edgeImg.updatePixels();
+
+ // draw edgeImg at the right of the original image
+ image(edgeImg, img.width, 0);
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/05_Image/07_EdgeDetection.js b/src/data/examples/ko/05_Image/07_EdgeDetection.js
new file mode 100644
index 0000000000..5eff38c2d2
--- /dev/null
+++ b/src/data/examples/ko/05_Image/07_EdgeDetection.js
@@ -0,0 +1,93 @@
+/*
+ * @name Edge Detection
+ * @description A high-pass filter sharpens an image. This program analyzes every pixel in an image in relation to the neighboring pixels to sharpen the image.
+ * This example is ported from the Edge Detection example
+ * on the Processing website
+ */
+// this program analyzes every pixel in an image
+// in relation to the neighbouring pixels
+// to sharpen the image
+
+// to consider all neighboring pixels we use a 3x3 array
+// and normalize these values
+// kernel is the 3x3 matrix of normalized values
+let kernel = [[-1, -1, -1 ], [ -1, 9, -1 ], [-1, -1, -1 ]];
+
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// if loadImage() is called in setup(), the image won't appear
+// since noLoop() restricts draw() to execute only once
+// (one execution of draw() is not enough time for the image to load),
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover.png");
+}
+
+// setup() runs after preload, once()
+function setup() {
+ // create canvas
+ createCanvas(710, 400);
+ // noLoop() makes draw() run only once, not in a loop
+ noLoop();
+}
+
+// draw() runs after setup(), normally on a loop
+// in this case it runs only once, because of noDraw()
+function draw() {
+
+ // place the original image on the upper left corner
+ image(img, 0, 0);
+
+ // create a new image, same dimensions as img
+ edgeImg = createImage(img.width, img.height);
+
+ // load its pixels
+ edgeImg.loadPixels();
+
+
+ // two for() loops, to iterate in x axis and y axis
+ // since the kernel assumes that the pixel
+ // has pixels above, under, left, and right
+ // we need to skip the first and last column and row
+ // x then goes from 1 to width - 1
+ // y then goes from 1 to height - 1
+
+ for (let x = 1; x < img.width - 1; x++) {
+ for (let y = 1; y < img.height - 1; y++) {
+ // kernel sum for the current pixel starts as 0
+ let sum = 0;
+
+ // kx, ky variables for iterating over the kernel
+ // kx, ky have three different values: -1, 0, 1
+ for (kx = -1; kx <= 1; kx++) {
+ for (ky = -1; ky <= 1; ky++) {
+
+ let xpos = x + kx;
+ let ypos = y + ky;
+ let pos = (y + ky)*img.width + (x + kx);
+ // since our image is grayscale,
+ // RGB values are identical
+ // we retrieve the red value for this example
+ let val = red(img.get(xpos, ypos));
+ // accumulate the kernel sum
+ // kernel is a 3x3 matrix
+ // kx and ky have values -1, 0, 1
+ // if we add 1 to kx and ky, we get 0, 1, 2
+ // with that we can use it to iterate over kernel
+ // and calculate the accumulated sum
+ sum += kernel[ky+1][kx+1] * val;
+ }
+ }
+
+ // set the pixel value of the edgeImg
+ edgeImg.set(x, y, color(sum, sum, sum));
+ }
+ }
+
+ // updatePixels() to write the changes on edgeImg
+ edgeImg.updatePixels();
+
+ // draw edgeImg at the right of the original image
+ image(edgeImg, img.width, 0);
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/05_Image/08_Brightness.js b/src/data/examples/ko/05_Image/08_Brightness.js
new file mode 100644
index 0000000000..3c58a98876
--- /dev/null
+++ b/src/data/examples/ko/05_Image/08_Brightness.js
@@ -0,0 +1,63 @@
+/*
+ * @name Brightness
+ * @description This program adjusts the brightness of a part of the image by calculating the distance of each pixel to the mouse.
+ * This example is ported from the Brightness example
+ * on the Processing website
+ */
+// This program adjusts the brightness
+// of a part of the image by
+// calculating the distance of
+// each pixel to the mouse.
+let img;
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover_wide.jpg");
+}
+// setup() runs after preload, once()
+function setup() {
+ createCanvas(710, 400);
+ pixelDensity(1);
+ frameRate(30);
+}
+
+function draw() {
+ image(img,0,0);
+ // Only need to load the pixels[] array once, because we're only
+ // manipulating pixels[] inside draw(), not drawing shapes.
+ loadPixels();
+ // We must also call loadPixels() on the PImage since we are going to read its pixels.
+ img.loadPixels();
+ for (let x = 0; x < img.width; x++) {
+ for (let y = 0; y < img.height; y++ ) {
+ // Calculate the 1D location from a 2D grid
+ let loc = (x + y*img.width)*4;
+ // Get the R,G,B values from image
+ let r,g,b;
+ r = img.pixels[loc];
+ // g = img.pixels[loc+1];
+ // b = img.pixels[loc+2];
+ // Calculate an amount to change brightness based on proximity to the mouse
+ // The closer the pixel is to the mouse, the lower the value of "distance"
+ let maxdist = 50;//dist(0,0,width,height);
+ let d = dist(x, y, mouseX, mouseY);
+ let adjustbrightness = 255*(maxdist-d)/maxdist;
+ r += adjustbrightness;
+ // g += adjustbrightness;
+ // b += adjustbrightness;
+ // Constrain RGB to make sure they are within 0-255 color range
+ r = constrain(r, 0, 255);
+ // g = constrain(g, 0, 255);
+ // b = constrain(b, 0, 255);
+ // Make a new color and set pixel in the window
+ let pixloc = (y*width + x)*4;
+ pixels[pixloc] = r;
+ pixels[pixloc+1] = r;
+ pixels[pixloc+2] = r;
+ pixels[pixloc+3] = 255; // Always have to set alpha
+ }
+ }
+ updatePixels();
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/05_Image/09_Convolution.js b/src/data/examples/ko/05_Image/09_Convolution.js
new file mode 100644
index 0000000000..eb953c6729
--- /dev/null
+++ b/src/data/examples/ko/05_Image/09_Convolution.js
@@ -0,0 +1,91 @@
+/*
+ * @name Convolution
+ * @description Applies a convolution matrix to a portion of an image. Move mouse to apply filter to different parts of the image. This example is a port of Dan Shiffman's example for Processing. Original comments written by Dan unless otherwise specified.
+ * To run this example locally, you will need an
+ * image file, and a running
+ * local server .
+ */
+
+let img;
+let w = 80;
+
+// It's possible to convolve the image with many different
+// matrices to produce different effects. This is a high-pass
+// filter; it accentuates the edges.
+const matrix = [ [ -1, -1, -1 ],
+ [ -1, 9, -1 ],
+ [ -1, -1, -1 ] ];
+
+function preload() {
+ img = loadImage('assets/moonwalk.jpg');
+}
+
+function setup() {
+ createCanvas(720, 400);
+ img.loadPixels();
+
+ // pixelDensity(1) for not scaling pixel density to display density
+ // for more information, check the reference of pixelDensity()
+ pixelDensity(1);
+}
+
+function draw() {
+ // We're only going to process a portion of the image
+ // so let's set the whole image as the background first
+ background(img);
+
+ // Calculate the small rectangle we will process
+ const xstart = constrain(mouseX - w/2, 0, img.width);
+ const ystart = constrain(mouseY - w/2, 0, img.height);
+ const xend = constrain(mouseX + w/2, 0, img.width);
+ const yend = constrain(mouseY + w/2, 0, img.height);
+ const matrixsize = 3;
+
+ loadPixels();
+ // Begin our loop for every pixel in the smaller image
+ for (let x = xstart; x < xend; x++) {
+ for (let y = ystart; y < yend; y++ ) {
+ let c = convolution(x, y, matrix, matrixsize, img);
+
+ // retrieve the RGBA values from c and update pixels()
+ let loc = (x + y*img.width) * 4;
+ pixels[loc] = red(c);
+ pixels[loc + 1] = green(c);
+ pixels[loc + 2] = blue(c);
+ pixels[loc + 3] = alpha(c);
+ }
+ }
+ updatePixels();
+}
+
+function convolution(x, y, matrix, matrixsize, img) {
+ let rtotal = 0.0;
+ let gtotal = 0.0;
+ let btotal = 0.0;
+ const offset = Math.floor(matrixsize / 2);
+ for (let i = 0; i < matrixsize; i++){
+ for (let j = 0; j < matrixsize; j++){
+
+ // What pixel are we testing
+ const xloc = (x + i - offset);
+ const yloc = (y + j - offset);
+ let loc = (xloc + img.width * yloc) * 4;
+
+ // Make sure we haven't walked off our image, we could do better here
+ loc = constrain(loc, 0 , img.pixels.length - 1);
+
+ // Calculate the convolution
+ // retrieve RGB values
+ rtotal += (img.pixels[loc]) * matrix[i][j];
+ gtotal += (img.pixels[loc + 1]) * matrix[i][j];
+ btotal += (img.pixels[loc + 2]) * matrix[i][j];
+ }
+ }
+ // Make sure RGB is within range
+ rtotal = constrain(rtotal, 0, 255);
+ gtotal = constrain(gtotal, 0, 255);
+ btotal = constrain(btotal, 0, 255);
+
+ // Return the resulting color
+ return color(rtotal, gtotal, btotal);
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/05_Image/10_Copy_Method.js b/src/data/examples/ko/05_Image/10_Copy_Method.js
new file mode 100644
index 0000000000..8fc5ba179d
--- /dev/null
+++ b/src/data/examples/ko/05_Image/10_Copy_Method.js
@@ -0,0 +1,20 @@
+/*
+ * @name Copy() method
+ * @frame 600,400
+ * @description An example of how to simulate coloring image with the copy() method.
+ */
+let draft, ready;
+function preload() {
+ ready = loadImage("assets/parrot-color.png");
+ draft = loadImage("assets/parrot-bw.png");
+}
+function setup() {
+ createCanvas(600, 400);
+ noCursor();
+ cursor("assets/brush.png", 20, -10);
+ image(ready, 0, 0);
+ image(draft, 0, 0);
+}
+function mouseDragged() {
+ copy(ready, mouseX, mouseY, 20, 20, mouseX, mouseY, 20, 20);
+}
diff --git a/src/data/examples/ko/08_Math/04_sine.js b/src/data/examples/ko/08_Math/04_sine.js
index 566b2faa99..6f55c094fe 100644
--- a/src/data/examples/ko/08_Math/04_sine.js
+++ b/src/data/examples/ko/08_Math/04_sine.js
@@ -1,5 +1,5 @@
/*
- * @name 싸인
+ * @name 사인
* @description sin() 함수로 도형의 크기를 부드럽게 조정합니다.
*/
let diameter;
diff --git a/src/data/examples/ko/08_Math/18_Map.js b/src/data/examples/ko/08_Math/18_Map.js
index 5c82cdf6cc..df4f840974 100644
--- a/src/data/examples/ko/08_Math/18_Map.js
+++ b/src/data/examples/ko/08_Math/18_Map.js
@@ -6,15 +6,15 @@
* 이 예제에서는 마우스의 x 좌표(0과 360사이의 숫자)가 원형의 색상과 크기를 정의하는 새로운 숫자들로 처리됩니다.
*/
function setup() {
- createCanvas(640, 400);
+ createCanvas(720, 400);
noStroke();
}
function draw() {
background(0);
- // 0부터 640에 이르는 mouseX 값을 0부터 175의 범위로 조정
+ // 0부터 720에 이르는 mouseX 값을 0부터 175의 범위로 조정
let c = map(mouseX, 0, width, 0, 175);
- // 0부터 640에 이르는 mouseX 값을 40부터 300의 범위로 조정
+ // 0부터 720에 이르는 mouseX 값을 40부터 300의 범위로 조정
let d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
diff --git a/src/data/examples/ko/11_Objects/04_Inheritance.js b/src/data/examples/ko/11_Objects/04_Inheritance.js
index 12b3737c05..ab5a51bafa 100644
--- a/src/data/examples/ko/11_Objects/04_Inheritance.js
+++ b/src/data/examples/ko/11_Objects/04_Inheritance.js
@@ -21,7 +21,7 @@ function draw() {
spots.display();
}
-class SpinArm {
+class Spin {
constructor(x, y, s) {
this.x = x;
this.y = y;
@@ -32,6 +32,12 @@ class SpinArm {
update() {
this.angle += this.speed;
}
+}
+
+class SpinArm extends Spin {
+ constructor(x, y, s) {
+ super(x, y, s)
+ }
display() {
strokeWeight(1);
@@ -45,17 +51,10 @@ class SpinArm {
}
}
-class SpinSpots {
+class SpinSpots extends Spin {
constructor(x, y, s, d) {
- this.x = x;
- this.y = y;
- this.speed = s;
+ super(x, y, s)
this.dim = d;
- this.angle = 0.0;
- }
-
- update() {
- this.angle += this.speed;
}
display() {
@@ -68,4 +67,4 @@ class SpinSpots {
ellipse(this.dim/2, 0, this.dim, this.dim);
pop();
}
-}
+}
\ No newline at end of file
diff --git a/src/data/examples/ko/13_Motion/07_Circle_Collision.js b/src/data/examples/ko/13_Motion/07_Circle_Collision.js
new file mode 100644
index 0000000000..876bc23d6e
--- /dev/null
+++ b/src/data/examples/ko/13_Motion/07_Circle_Collision.js
@@ -0,0 +1,145 @@
+/*
+ * @name Circle Collision
+ * @frame 710,400 (optional)
+ * @description This is a port of the "Circle Collision" example from processing.org/examples This example uses vectors for better visualization of physical Quantity
+ */
+class Ball {
+ constructor(x, y, r) {
+ this.position = new p5.Vector(x, y);
+ this.velocity = p5.Vector.random2D();
+ this.velocity.mult(3);
+ this.r = r;
+ this.m = r * 0.1;
+ }
+ update() {
+ this.position.add(this.velocity);
+ }
+
+ checkBoundaryCollision() {
+ if (this.position.x > width - this.r) {
+ this.position.x = width - this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.x < this.r) {
+ this.position.x = this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.y > height - this.r) {
+ this.position.y = height - this.r;
+ this.velocity.y *= -1;
+ } else if (this.position.y < this.r) {
+ this.position.y = this.r;
+ this.velocity.y *= -1;
+ }
+ }
+
+ checkCollision(other) {
+ // Get distances between the balls components
+ let distanceVect = p5.Vector.sub(other.position, this.position);
+
+ // Calculate magnitude of the vector separating the balls
+ let distanceVectMag = distanceVect.mag();
+
+ // Minimum distance before they are touching
+ let minDistance = this.r + other.r;
+
+ if (distanceVectMag < minDistance) {
+ let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+ let d = distanceVect.copy();
+ let correctionVector = d.normalize().mult(distanceCorrection);
+ other.position.add(correctionVector);
+ this.position.sub(correctionVector);
+
+ // get angle of distanceVect
+ let theta = distanceVect.heading();
+ // precalculate trig values
+ let sine = sin(theta);
+ let cosine = cos(theta);
+
+ /* bTemp will hold rotated ball this.positions. You
+ just need to worry about bTemp[1] this.position*/
+ let bTemp = [new p5.Vector(), new p5.Vector()];
+
+ /* this ball's this.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].this.position.x and bTemp[0].this.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
+ let vTemp = [new p5.Vector(), new p5.Vector()];
+
+ vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+ vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+ vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+ vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+ /* Now that velocities are rotated, you can use 1D
+ conservation of momentum equations to calculate
+ the final this.velocity along the x-axis. */
+ let vFinal = [new p5.Vector(), new p5.Vector()];
+
+ // final rotated this.velocity for b[0]
+ vFinal[0].x =
+ ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+ (this.m + other.m);
+ vFinal[0].y = vTemp[0].y;
+
+ // final rotated this.velocity for b[0]
+ vFinal[1].x =
+ ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+ (this.m + other.m);
+ vFinal[1].y = vTemp[1].y;
+
+ // hack to avoid clumping
+ bTemp[0].x += vFinal[0].x;
+ bTemp[1].x += vFinal[1].x;
+
+ /* Rotate ball this.positions and velocities back
+ Reverse signs in trig expressions to rotate
+ in the opposite direction */
+ // rotate balls
+ let bFinal = [new p5.Vector(), new p5.Vector()];
+
+ bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+ bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+ bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+ bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+ // update balls to screen this.position
+ other.position.x = this.position.x + bFinal[1].x;
+ other.position.y = this.position.y + bFinal[1].y;
+
+ this.position.add(bFinal[0]);
+
+ // update velocities
+ this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+ this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+ other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+ other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+ }
+ }
+
+ display() {
+ noStroke();
+ fill(204);
+ ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+ }
+}
+let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
+console.log(balls);
+function setup() {
+ createCanvas(710, 400);
+}
+
+function draw() {
+ background(51);
+ for (let i = 0; i < balls.length; i++) {
+ let b = balls[i];
+ b.update();
+ b.display();
+ b.checkBoundaryCollision();
+ balls[0].checkCollision(balls[1]);
+ }
+}
diff --git a/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js b/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js
new file mode 100644
index 0000000000..2c0509d44b
--- /dev/null
+++ b/src/data/examples/zh-Hans/05_Image/07_EdgeDetection.js
@@ -0,0 +1,93 @@
+/*
+ * @name Edge Detection
+ * @description A high-pass filter sharpens an image. This program analyzes every pixel in an image in relation to the neighboring pixels to sharpen the image.
+ * This example is ported from the Edge Detection example
+ * on the Processing website
+ */
+// this program analyzes every pixel in an image
+// in relation to the neighbouring pixels
+// to sharpen the image
+
+// to consider all neighboring pixels we use a 3x3 array
+// and normalize these values
+// kernel is the 3x3 matrix of normalized values
+let kernel = [[-1, -1, -1 ], [ -1, 9, -1 ], [-1, -1, -1 ]];
+
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// if loadImage() is called in setup(), the image won't appear
+// since noLoop() restricts draw() to execute only once
+// (one execution of draw() is not enough time for the image to load),
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover.png");
+}
+
+// setup() runs after preload, once()
+function setup() {
+ // create canvas
+ createCanvas(710, 400);
+ // noLoop() makes draw() run only once, not in a loop
+ noLoop();
+}
+
+// draw() runs after setup(), normally on a loop
+// in this case it runs only once, because of noDraw()
+function draw() {
+
+ // place the original image on the upper left corner
+ image(img, 0, 0);
+
+ // create a new image, same dimensions as img
+ edgeImg = createImage(img.width, img.height);
+
+ // load its pixels
+ edgeImg.loadPixels();
+
+
+ // two for() loops, to iterate in x axis and y axis
+ // since the kernel assumes that the pixel
+ // has pixels above, under, left, and right
+ // we need to skip the first and last column and row
+ // x then goes from 1 to width - 1
+ // y then goes from 1 to height - 1
+
+ for (let x = 1; x < img.width - 1; x++) {
+ for (let y = 1; y < img.height - 1; y++) {
+ // kernel sum for the current pixel starts as 0
+ let sum = 0;
+
+ // kx, ky variables for iterating over the kernel
+ // kx, ky have three different values: -1, 0, 1
+ for (kx = -1; kx <= 1; kx++) {
+ for (ky = -1; ky <= 1; ky++) {
+
+ let xpos = x + kx;
+ let ypos = y + ky;
+ let pos = (y + ky)*img.width + (x + kx);
+ // since our image is grayscale,
+ // RGB values are identical
+ // we retrieve the red value for this example
+ let val = red(img.get(xpos, ypos));
+ // accumulate the kernel sum
+ // kernel is a 3x3 matrix
+ // kx and ky have values -1, 0, 1
+ // if we add 1 to kx and ky, we get 0, 1, 2
+ // with that we can use it to iterate over kernel
+ // and calculate the accumulated sum
+ sum += kernel[ky+1][kx+1] * val;
+ }
+ }
+
+ // set the pixel value of the edgeImg
+ edgeImg.set(x, y, color(sum, sum, sum));
+ }
+ }
+
+ // updatePixels() to write the changes on edgeImg
+ edgeImg.updatePixels();
+
+ // draw edgeImg at the right of the original image
+ image(edgeImg, img.width, 0);
+}
diff --git a/src/data/examples/zh-Hans/05_Image/08_Brightness.js b/src/data/examples/zh-Hans/05_Image/08_Brightness.js
new file mode 100644
index 0000000000..3c58a98876
--- /dev/null
+++ b/src/data/examples/zh-Hans/05_Image/08_Brightness.js
@@ -0,0 +1,63 @@
+/*
+ * @name Brightness
+ * @description This program adjusts the brightness of a part of the image by calculating the distance of each pixel to the mouse.
+ * This example is ported from the Brightness example
+ * on the Processing website
+ */
+// This program adjusts the brightness
+// of a part of the image by
+// calculating the distance of
+// each pixel to the mouse.
+let img;
+// preload() runs once, before setup()
+// loadImage() needs to occur here instead of setup()
+// preload() makes sure image is loaded before anything else occurs
+function preload() {
+ // load the original image
+ img = loadImage("assets/rover_wide.jpg");
+}
+// setup() runs after preload, once()
+function setup() {
+ createCanvas(710, 400);
+ pixelDensity(1);
+ frameRate(30);
+}
+
+function draw() {
+ image(img,0,0);
+ // Only need to load the pixels[] array once, because we're only
+ // manipulating pixels[] inside draw(), not drawing shapes.
+ loadPixels();
+ // We must also call loadPixels() on the PImage since we are going to read its pixels.
+ img.loadPixels();
+ for (let x = 0; x < img.width; x++) {
+ for (let y = 0; y < img.height; y++ ) {
+ // Calculate the 1D location from a 2D grid
+ let loc = (x + y*img.width)*4;
+ // Get the R,G,B values from image
+ let r,g,b;
+ r = img.pixels[loc];
+ // g = img.pixels[loc+1];
+ // b = img.pixels[loc+2];
+ // Calculate an amount to change brightness based on proximity to the mouse
+ // The closer the pixel is to the mouse, the lower the value of "distance"
+ let maxdist = 50;//dist(0,0,width,height);
+ let d = dist(x, y, mouseX, mouseY);
+ let adjustbrightness = 255*(maxdist-d)/maxdist;
+ r += adjustbrightness;
+ // g += adjustbrightness;
+ // b += adjustbrightness;
+ // Constrain RGB to make sure they are within 0-255 color range
+ r = constrain(r, 0, 255);
+ // g = constrain(g, 0, 255);
+ // b = constrain(b, 0, 255);
+ // Make a new color and set pixel in the window
+ let pixloc = (y*width + x)*4;
+ pixels[pixloc] = r;
+ pixels[pixloc+1] = r;
+ pixels[pixloc+2] = r;
+ pixels[pixloc+3] = 255; // Always have to set alpha
+ }
+ }
+ updatePixels();
+}
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/08_Math/18_Map.js b/src/data/examples/zh-Hans/08_Math/18_Map.js
index 6ed777b6b1..ec6d6802f5 100644
--- a/src/data/examples/zh-Hans/08_Math/18_Map.js
+++ b/src/data/examples/zh-Hans/08_Math/18_Map.js
@@ -5,15 +5,15 @@
* 此范例中,鼠标的 x 坐标( 0-360 之间的数字)将被缩放为新数值,用于设定圆的颜色和大小。
*/
function setup() {
- createCanvas(640, 400);
+ createCanvas(720, 400);
noStroke();
}
function draw() {
background(0);
- // 将 mouseX 的数值从 0-640 缩放至 0-175 的范围内
+ // 将 mouseX 的数值从 0-720 缩放至 0-175 的范围内
let c = map(mouseX, 0, width, 0, 175);
- // 将 mouseX 的数值从 0-640 to 缩放至 40-300 的范围内
+ // 将 mouseX 的数值从 0-720 to 缩放至 40-300 的范围内
let d = map(mouseX, 0, width, 40, 300);
fill(255, c, 0);
ellipse(width/2, height/2, d, d);
diff --git a/src/data/examples/zh-Hans/11_Objects/04_Inheritance.js b/src/data/examples/zh-Hans/11_Objects/04_Inheritance.js
index fd4681e71a..2218f3c83f 100644
--- a/src/data/examples/zh-Hans/11_Objects/04_Inheritance.js
+++ b/src/data/examples/zh-Hans/11_Objects/04_Inheritance.js
@@ -20,7 +20,7 @@ function draw() {
spots.display();
}
-class SpinArm {
+class Spin {
constructor(x, y, s) {
this.x = x;
this.y = y;
@@ -31,6 +31,12 @@ class SpinArm {
update() {
this.angle += this.speed;
}
+}
+
+class SpinArm extends Spin {
+ constructor(x, y, s) {
+ super(x, y, s)
+ }
display() {
strokeWeight(1);
@@ -44,17 +50,10 @@ class SpinArm {
}
}
-class SpinSpots {
+class SpinSpots extends Spin {
constructor(x, y, s, d) {
- this.x = x;
- this.y = y;
- this.speed = s;
+ super(x, y, s)
this.dim = d;
- this.angle = 0.0;
- }
-
- update() {
- this.angle += this.speed;
}
display() {
@@ -67,4 +66,4 @@ class SpinSpots {
ellipse(this.dim/2, 0, this.dim, this.dim);
pop();
}
-}
+}
\ No newline at end of file
diff --git a/src/data/examples/zh-Hans/13_Motion/07_Circle_Collision.js b/src/data/examples/zh-Hans/13_Motion/07_Circle_Collision.js
new file mode 100644
index 0000000000..876bc23d6e
--- /dev/null
+++ b/src/data/examples/zh-Hans/13_Motion/07_Circle_Collision.js
@@ -0,0 +1,145 @@
+/*
+ * @name Circle Collision
+ * @frame 710,400 (optional)
+ * @description This is a port of the "Circle Collision" example from processing.org/examples This example uses vectors for better visualization of physical Quantity
+ */
+class Ball {
+ constructor(x, y, r) {
+ this.position = new p5.Vector(x, y);
+ this.velocity = p5.Vector.random2D();
+ this.velocity.mult(3);
+ this.r = r;
+ this.m = r * 0.1;
+ }
+ update() {
+ this.position.add(this.velocity);
+ }
+
+ checkBoundaryCollision() {
+ if (this.position.x > width - this.r) {
+ this.position.x = width - this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.x < this.r) {
+ this.position.x = this.r;
+ this.velocity.x *= -1;
+ } else if (this.position.y > height - this.r) {
+ this.position.y = height - this.r;
+ this.velocity.y *= -1;
+ } else if (this.position.y < this.r) {
+ this.position.y = this.r;
+ this.velocity.y *= -1;
+ }
+ }
+
+ checkCollision(other) {
+ // Get distances between the balls components
+ let distanceVect = p5.Vector.sub(other.position, this.position);
+
+ // Calculate magnitude of the vector separating the balls
+ let distanceVectMag = distanceVect.mag();
+
+ // Minimum distance before they are touching
+ let minDistance = this.r + other.r;
+
+ if (distanceVectMag < minDistance) {
+ let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
+ let d = distanceVect.copy();
+ let correctionVector = d.normalize().mult(distanceCorrection);
+ other.position.add(correctionVector);
+ this.position.sub(correctionVector);
+
+ // get angle of distanceVect
+ let theta = distanceVect.heading();
+ // precalculate trig values
+ let sine = sin(theta);
+ let cosine = cos(theta);
+
+ /* bTemp will hold rotated ball this.positions. You
+ just need to worry about bTemp[1] this.position*/
+ let bTemp = [new p5.Vector(), new p5.Vector()];
+
+ /* this ball's this.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].this.position.x and bTemp[0].this.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
+ let vTemp = [new p5.Vector(), new p5.Vector()];
+
+ vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
+ vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
+ vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
+ vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
+
+ /* Now that velocities are rotated, you can use 1D
+ conservation of momentum equations to calculate
+ the final this.velocity along the x-axis. */
+ let vFinal = [new p5.Vector(), new p5.Vector()];
+
+ // final rotated this.velocity for b[0]
+ vFinal[0].x =
+ ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
+ (this.m + other.m);
+ vFinal[0].y = vTemp[0].y;
+
+ // final rotated this.velocity for b[0]
+ vFinal[1].x =
+ ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
+ (this.m + other.m);
+ vFinal[1].y = vTemp[1].y;
+
+ // hack to avoid clumping
+ bTemp[0].x += vFinal[0].x;
+ bTemp[1].x += vFinal[1].x;
+
+ /* Rotate ball this.positions and velocities back
+ Reverse signs in trig expressions to rotate
+ in the opposite direction */
+ // rotate balls
+ let bFinal = [new p5.Vector(), new p5.Vector()];
+
+ bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
+ bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
+ bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
+ bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
+
+ // update balls to screen this.position
+ other.position.x = this.position.x + bFinal[1].x;
+ other.position.y = this.position.y + bFinal[1].y;
+
+ this.position.add(bFinal[0]);
+
+ // update velocities
+ this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
+ this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
+ other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
+ other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
+ }
+ }
+
+ display() {
+ noStroke();
+ fill(204);
+ ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
+ }
+}
+let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
+console.log(balls);
+function setup() {
+ createCanvas(710, 400);
+}
+
+function draw() {
+ background(51);
+ for (let i = 0; i < balls.length; i++) {
+ let b = balls[i];
+ b.update();
+ b.display();
+ b.checkBoundaryCollision();
+ balls[0].checkCollision(balls[1]);
+ }
+}
diff --git a/src/data/it.yml b/src/data/it.yml
new file mode 100644
index 0000000000..8f33688848
--- /dev/null
+++ b/src/data/it.yml
@@ -0,0 +1,1564 @@
+Skip-To-Content: Vai al contenuto
+Language-Settings: Impostazioni della lingua
+Sidebar-Title: Navigazione del sito
+Home: Home
+Editor: Editor
+Download: Download
+Donate: Donare
+Start: Iniziare
+Reference: Riferimenti
+Libraries: Librerie
+Learn: Imparare
+Examples: Esempi
+Books: Libri
+Community: Community
+Contribute: Contribuire
+Forum: Forum
+Showcase: Showcase
+footerxh1: Meriti
+footer1: 'p5.js è stato creato da '
+footer2: ' ed è sviluppato da una community di collaboratori, con il supporto di '
+footer3: ' e '
+footer4: 'Web identity e graphic design di '
+tagline1: il divertimento di Processing x l'eccentricità di JavaScript
+tagline2: la semplicità di Processing x la flessibilità di JavaScript
+tagline3: l'intuizione di Processing x il potere di JavaScript
+tagline4: la creatività di Processing x la dinamicità di JavaScript
+tagline5: la community di Processing x la community di JavaScript
+tagline6: il potere di Processing x la portata di JavaScript
+tagline7: La p5.js community esprime solidarietà con il movimento Black Lives Matter.
+home:
+ blmnamelistending: 'e tanti altri, troppi da elencare qui...'
+ blmstatement1: >-
+ Questo sito è attualmente offline, come piccolo segno di rispetto e di
+ solidarietà. La
+ blmstatement2: rimane disponibile.
+ blmstatement3: 'Please consider donating to '
+ blacklivesmatter: Black Lives Matter
+ naacp: The NAACP Legal Defense and Educational Fund
+ equaljustice: The Equal Justice Initiative
+ bailfund: your local bail fund
+ floydmemorial: George Floyd Memorial Fund
+ start-creating: Inizia a creare con il p5 Editor!
+ p1xh1: Ciao!
+ p1x1: >-
+ p5.js è una libreria JavaScript per il creative coding, che cerca di rendere
+ la programmazione accessibile e inclusiva per artisti, designer, insegnanti,
+ principianti e chiunque altro! p5.js è gratuito e open-source perchè
+ crediamo che i software, e gli strumenti per imparare ad usarli, dovrebbero
+ essere accessibili a tutti.
+ p1x2: >-
+ Usando la metafora di uno sketch, p5.js ha un set completo di funzionalità
+ per disegnare. Non sei però limitato a dipingere nella tua tela. Puoi
+ considerare l'intera pagina del browser come un tuo sketch, inclusi gli
+ oggetti HTML5 per testo, input, video, webcam e suono.
+ p2xh2: Community
+ p2x1: >-
+ Siamo una community di, e in solidarietà con, persone di ogni identità ed
+ espressione di genere, orientamento sessuale, razza, etnia, lingua, neuro
+ tipo, taglia, disabilità, classe, religione, cultura, sottocultura, opinione
+ politica, età, livello di abilità, occupazione, e origine. Riconosciamo che
+ non tutti hanno il tempo, i mezzi finanziari o la capacità di partecipare
+ attivamente, ma riconosciamo e incoraggiamo il coinvolgimento di tutti i
+ tipi. Ci impegniamo a promuovere l'eliminazione degli ostacoli e il
+ potenziamento delle capacità. Siamo tutti studenti.
+ p2x2: 'p5.js è un'interpretazione di '
+ p2x3: ' per il web di oggi. Organizziamo eventi e lavoriamo con il supporto della '
+ p2x4: .
+ p2x5: 'Scopri di più sulla '
+ p2x6: nostra community
+ p2x7: .
+ p3xh2: Iniziare
+ p3xp1: 'Realizza il tuo primo sketch nel '
+ p3xp2: '. Scopri di più su come disegnare con p5.js nella '
+ p3xp3: pagina iniziale.
+ p3xp4: ' e tutto quello che puoi fare nei '
+ p3xp5: Riferimenti
+ p3xp6: .
+ p4xh2: Partecipare
+ p4xp1: 'Ci sono molti modi in cui puoi contribuire a p5.js:'
+ p4xp2: Opzioni di partecipazione
+ p4xp3: Condividi qualcosa che hai creato!
+ p4xp4: Tieni un corso o un laboratorio.
+ p4xp5: Organizza un incontro.
+ p4xp6: Contribuisci al codice.
+ sketch_by: di
+ sketch_info: Sketch sulla Homepage sketch tratto dal lavoro della liceale Grace Obergfell
+ sketch_info_link: >-
+ CC Fest NYC, 8 giugno, un evento di programmazione gratuito e inclusivo per
+ studenti ed insegnanti
+copyright:
+ copyright-title: Informazioni di Copyright
+ copyright1: >-
+ La libreria p5.js è software libero; lo si può redistribuire e/o modificare
+ in base ai termini della
+ copyright2: ' come pubblicata dalla Free Software Foundation, versione 2.1.'
+ copyright3: 'La sezione Riferimenti è sotto una licenza '
+ copyright4: ' il che permette di riusare questo contenuto per fini non commerciali, se si concede il dovuto riconoscimento.'
+get started:
+ get-started-title: Iniziare
+ get-started1: >-
+ Questa pagina ti guida nella configurazione di un progetto p5.js e nella
+ realizzazione del tuo primo sketch.
+ get-started2: Il modo più semplice per iniziare è utilizzando l'
+ get-started3: editor p5.js
+ get-started4: ', puoi aprire il web editor e andare alla sezione '
+ get-started5: Il tuo Primo Sketch
+ get-started6: '. Se desideri lavorare sulla versione desktop di p5.js, puoi andare sulle '
+ get-started7: istruzioni di download
+ settingUp-title: Configurare p5.js con un editor sul tuo computer
+ download-title: Scaricare una copia della libreria p5.js
+ hosted-title: Utilizzare una versione hosted della libreria p5.js
+ download1: >-
+ Il modo più semplice per iniziare è usando l'esempio vuoto incluso nel
+ download del
+ download2: p5.js completo
+ download3: .
+ download4: >-
+ Se guardi nell'index.html, noterai che contiene un link al file p5.js.
+ Se desideri usare la versione minified (compressa per far caricare le pagine
+ più rapidamente), cambia il link in p5.min.js.
+ download5: >-
+ In alternativa, puoi linkare ad un file p5.js online. Tutte le versioni di
+ p5.js sono salvate in un CDN (Content Delivery Network). Puoi trovare la
+ cronologia di queste versioni nel
+ download6: '. In questo caso puoi modificare il link in:'
+ download7: 'Una pagina HTML d'esempio potrebbe essere simile a questa:'
+ download8: 'Può anche iniziare con questo '
+ download9: ' modello.'
+ environment-title: Ambiente di sviluppo
+ environment1: >-
+ Per eseguire p5.js sul tuo computer avrai bisogno di un editor di testo.
+ Puoi usare l'
+ environmentlink: 'https://it.wikipedia.org/wiki/Editor_di_testo'
+ environment2: ' editor '
+ environment3: 'che preferisci. Le istruzioni per la configurazione di '
+ environment4: ' sono incluse qui sotto, altre valide opzioni sono '
+ environment5: ' e '
+ environment6: >-
+ Se utilizzi uno screen reader e non usi il p5 web editor, ti consigliamo di
+ scegliere
+ environment7: ' o '
+ environment8: >-
+ Avvia Sublime. Vai sul menu File e clicca Open... e seleziona la cartella in
+ cui si trovano i tuoi file html e js. Sulla barra laterale sinistra troverai
+ il nome della cartella sulla parte superiore, e la lista dei file contenuti
+ nella cartella in basso.
+ environment9: >-
+ Clicca sul tuo file sketch.js e questo si aprirà sulla destra, dove potrai
+ modificarlo.
+ environment10: il codice di avvio p5 nell'editor sublime.
+ environment11: >-
+ Apri il file index.html con il tuo browser facendo doppio-click su di esso o
+ scrivendo:
+ environment12: 'file:///il/percorso/del/tuo/file/html'
+ environment13: ' nella barra di indirizzo, per visualizzare il tuo sketch.'
+ your-first-sketch-title: Il Tuo Primo Sketch
+ your-first-sketch-intro1: 'Nel '
+ your-first-sketch-intro2: 'https://editor.p5js.org/'
+ your-first-sketch-intro3: web editor p5.js
+ your-first-sketch-intro4: ' troverai il seguente codice:'
+ your-first-sketch1: 'Dopo '
+ your-first-sketch2: ' aggiungi questa riga di codice: '
+ your-first-sketch3: 'Ora il tuo codice dovrebbe apparire così: '
+ your-first-sketch4: >-
+ La riga che hai appena aggiunto disegna un'ellisse, il cui centro si
+ trova a 50 pixel da sinistra e 50 pixel dall'alto, e di larghezza e
+ altezza pari a 80 pixel.
+ your-first-sketch5: Nell'editor premi play per eseguire il tuo codice!
+ your-first-sketch6: >-
+ Se stai usando uno screen reader, devi attivare gli output accessibili
+ nell'editor, al di fuori dell'editor devi aggiungere la libreria
+ di accessibilità al tuo html. Per saperne di più visita il
+ your-first-sketch7: tutorial per usare p5 con uno screen reader
+ your-first-sketch8: >-
+ Se hai scritto tutto correttamente, ti apparirà questo sulla finestra di
+ visualizzazione:
+ your-first-sketch9: >-
+ canvas ha un cerchio di larghezza e altezza pari a 50 in posizione 80 x e 80
+ y
+ your-first-sketch10: >-
+ Se non appare nulla l'editor potrebbe avere difficoltà a capire cosa
+ hai scritto. In quel caso assicurati di aver copiato bene il codice di
+ esempio: i numeri devono essere contenuti nelle parentesi e separati da
+ virgole, la riga deve terminare con un punto e virgola, e la parola
+ "ellipse" deve essere scritta correttamente in inglese.
+ your-first-sketch11: >-
+ Una delle cose più difficili di iniziare a programmare è che bisogna essere
+ molto precisi con la sintassi. Il browser non capisce sempre cosa vuoi dire
+ ed è molto pignolo sulla punteggiatura. Con un po' di pratica ci farai
+ l'abitudine. In basso a sinistra dell'editor troverai la sezione
+ console. Lì troverai dei messaggi dell'editor con i dettagli
+ riguardanti gli errori che si sono verificati.
+ your-first-sketch12: >-
+ Ora creiamo uno sketch un po' più interessante. Modifica l'ultimo
+ esempio e prova questo:
+ your-first-sketch13: >-
+ Questo programma crea una canvas di dimensione 400 pixel in larghezza e
+ altezza, poi inizia a disegnare cerchi nella posizione del mouse. Quando il
+ tasto del mouse viene premuto il colore del cerchio diventa nero. Esegui il
+ codice, muovi il mouse e clicca per provarlo.
+ your-first-sketch14: canvas ha diversi cerchi disegnati che seguono il percorso del mouse
+ first-sketch-heading1: Porzione di codice con ellisse
+ first-sketch-heading2: Messaggio per coloro che utilizzano gli screen reader
+ first-sketch-heading3: Porzione di codice con interazione
+ what-next-title: E ora?
+ learn1: 'Dai un'occhiata alle pagine '
+ learn2: Imparare
+ learn3: ' ed '
+ learn4: Esempi
+ learn5: ' per ulteriori informazioni.'
+ learn6: 'Guarda i video tutorial di '
+ learn7: The Coding Train
+ learn8: ' e '
+ learn9: Kadenze
+ learn10: .
+ reference1: 'Visita i '
+ reference2: ' Riferimenti'
+ reference3: ' per leggere la documentazione completa.'
+ learn11: 'Se vuoi utilizzare p5 con uno screen reader, visita il tutorial '
+ learn12: p5 con uno screen reader
+ processing-transition1: 'Se hai usato Processing in passato, leggi il '
+ processing-transition2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ processing-transition3: tutorial di transazione da Processing
+ processing-transition4: ' per imparare a convertire Processing in p5.js, e le differenze principali tra di loro.'
+ book1: >-
+ Parti di questo tutorial sono state adattate dal libro Getting Started with
+ p5.js, di Lauren McCarthy, Casey Reas, e Ben Fry, O'Reilly / Make 2015.
+ Copyright © 2015. Tutti i diritti riservati. Ultima modifica alla Conferenza
+ dei Contribuenti p5.js 2019.
+download:
+ Download: Download
+ download-intro: >-
+ Benvenuto! Anche se è intitolata "Download" questa pagina contiene in realtà
+ una raccolta di link per scaricare la libreria o per iniziare a lavorare
+ online. Abbiamo provato a ordinare le cose partendo da quello che potrebbe
+ servire ad un principiante, per poi arrivare alle risorse destinate ai
+ programmatori più esperti.
+ editor-title: Editor
+ p5.js-editor: Editor p5.js
+ p5.js-editor-intro: >-
+ Questo link ti reindirizza all'Editor p5.js online, così potrai
+ iniziare ad usare p5.js immediatamente.
+ editor-includes: >-
+ Inizia a programmare usando l'Editor p5.js, senza bisogno di
+ installazione!
+ complete-library-title: Libreria completa
+ complete-library-intro1: >-
+ Questo download comprende il file della libreria p5.js, la componente
+ aggiuntiva p5.sound, e un progetto esempio. Non contiene un editor. Visita
+ complete-library-intro2: Iniziare
+ complete-library-intro3: ' per imparare a impostare un progetto p5.js.'
+ p5.js-complete: p5.js completo
+ includes-1: 'Comprende:'
+ includes-2: 'p5.js, p5.sound.js, e un progetto esempio'
+ includes-3: 'Versione '
+ single-files-title: File Singoli
+ single-files-intro: >-
+ Questi sono download o link al file della libreria p5.js. Non sono inclusi
+ contenuti aggiuntivi.
+ single-file: 'File: '
+ p5.js-uncompressed: Versione completa non compressa
+ compressed: Versione compressa
+ link: 'Link: '
+ statically-hosted-file: File staticamente hosted
+ etc-title: Risorse di Github
+ older-releases: Versioni precedenti / registro dei cambiamenti
+ github-repository: Repository del codice (GitHub)
+ report-bugs: 'Segnala problemi, bug, e errori'
+ supported-browsers: 'Browser supportati '
+ support-title: Sostieni p5.js!
+ support-options: Opzioni di Supporto
+ support-1: >-
+ We need your help! p5.js è gratuito e open-source. Vogliamo rendere la nostra community il più
+ aperta e inclusiva possibile. You can support this work by making a donation to
+ the
+ support-2: >-
+ , the organization that supports p5.js.
+ Your donation supports software development for p5.js, education resources
+ like code examples and tutorials,
+ support-3: borse di studio
+ support-4: ', e '
+ support-5: eventi per la community.
+ support-17: >-
+ Conferenza dei Contribuenti p5.js al CMU STUDIO for Creative Inquiry in
+ Pittsburgh (Image credit: Taeyoon Choi)
+ support-18: >-
+ Saskia Freeke, stagista Processing, organizza i workshop Code Liberation x
+ Processing a Londra (Image credit: Code Liberation Foundation)
+ support-19: >-
+ Conferenza Learning to Teach, Teaching to Learn in collaborazione con SFPC
+ (Image credit: Kira Simon-Kennedy)
+ support-20: >-
+ Workshop di Cassie Tarakajian, stagista di Processing Foundation, al Code
+ Art Miami (Image credit: Christian Arévalo Photography)
+ support-21: >-
+ Taeyoon Choi e un interpete della lingua dei segni al workshop Signing
+ Coders p5.js (Image credit: Taeyoon Choi)
+ support-22: 'Inizio di Google Summer of Code (Image credit: Taeyoon Choi)'
+ support-23: >-
+ Workshop di Cassie Tarakajian, stagista di Processing Foundation, al Code
+ Art Miami (Image credit: Christian Arévalo Photography)
+ support-24: >-
+ Luisa Pereira e Yeseul Song contribuiscono alla realizzazione di un workshop
+ p5.js in lingua dei segni condotto da Taeyoon Choi (Image credit: Taeyoon
+ Choi)
+ support-25: >-
+ Conferenza dei Contribuenti p5.js al CMU STUDIO for Creative Inquiry in
+ Pittsburgh (Image credit: Taeyoon Choi)
+ support-26: >-
+ Digital Citizens Lab, stagista Processing, organizza un panel
+ sull'insegnamento STEM all'International Center of Photography
+ (Image credit: International Center of Photography)
+ support-27: >-
+ Partecipanti al workshop p5.js a Santiago, Chile, condotto da Aarón
+ Montoya-Moraga (Image credit: Aarón Montoya-Moraga.)
+ support-28: >-
+ Claire Kearney-Volpe contribuisce alla realizzazione di un workshop p5.js in
+ lingua dei segni condotto da Taeyoon Choi (Image credit: Taeyoon Choi)
+ support-29: >-
+ DIY Girls, stagisti della Processing Foundation, realizzano un corso di
+ programmazione creativa a Los Angeles (Image credit: DIY Girls)
+ support-30: Processing Fellow Digital Citizens Lab
+ support-31: Bicoastal p5.js meetup presso UCLA DMA e NYU ITP
+ support-32: La Processing Foundation
+ support-33: ' è stata fondata nel 2012 dopo oltre un decennio di lavoro con il software di Processing originale. La missione della fondazione è quella di promuovere l'apprendimento di software nel campo delle arti visive, e la l'apprendimento visuale nei campi legati alla tecnologia — e di rendere questi campi accessibili a diverse comunità. Il nostro obiettivo è di incoraggiare persone di tutti gli interessi o origini a imparare a programmare e creare opere creative con il codice, specialmente coloro che altrimenti non avrebbero accesso a questi strumenti e risorse.'
+ support-17-alt: ''
+ support-18-alt: ''
+ support-19-alt: ''
+ support-20-alt: ''
+ support-21-alt: ''
+ support-22-alt: ''
+ support-23-alt: ''
+ support-24-alt: ''
+ support-25-alt: ''
+ support-26-alt: ''
+ support-27-alt: ''
+ support-28-alt: ''
+ support-29-alt: ''
+ support-30-alt: ''
+ support-31-alt: ''
+learn:
+ learn-title: Imparare
+ learn1: >-
+ Questi tutorial forniscono una panoramica più precisa e step-by-step di
+ determinati argomenti. Dai un'occhiata alle
+ learn2: pagine di esempio"
+ learn3: per scoprire brevi dimostrazioni su vari argomenti p5.js.
+ introduction-to-p5js-title: Introduzione a p5.js
+ hello-p5js-title: Ciao p5.js
+ hello-p5js: >-
+ Questo breve video ti presenterà la libreria e tutto ciò che puoi realizzare
+ con essa.
+ getting-started-title: Iniziare
+ getting-started: >-
+ Benvenuto in p5.js! Questa introduzione illustra le basi della
+ creazione di un progetto p5.js.
+ p5js-overview-title: panoramica di p5.js
+ p5js-overview: Una panoramica delle caratteristiche principali di p5.js.
+ p5js-processing-title: p5.js e Processing
+ p5js-processing: >-
+ Le differenze principali tra le due, e come effettuare una conversione da
+ una all'altra.
+ p5-screen-reader-title: p5 con uno screen reader
+ p5-screen-reader: >-
+ Configurare p5 in modo che possa essere utilizzato facilmente con uno screen
+ reader.
+ using-local-server-title: Usando un server locale
+ using-local-server: 'Come configurare un server locale su Mac OSX, Windows, o Linux.'
+ p5js-wiki-title: p5.js wiki
+ p5js-wiki: Documentazione aggiuntiva ed esercitazioni fornite dalla community
+ connecting-p5js-title: Collegamento a p5.js
+ creating-libraries-title: Creazione di librerie
+ creating-libraries: Creazione di librerie aggiuntive p5.js.
+ nodejs-and-socketio-title: node.js e socket.io
+ nodejs-and-socketio: 'Utilizzando un server node.js con p5.js, comunicazione tramite socket.io.'
+ programming-topics-title: Argomenti di programmazione
+ beyond-the-canvas-title: Oltre la tela
+ beyond-the-canvas: Creare e manipolare gli elementi oltre la tela.
+ 3d-webgl-title: 3D/WebGL
+ 3d-webgl: >-
+ Sviluppo di applicazioni grafiche avanzate in p5.js usando la modalità
+ WEBGL.
+ color-title: Colore
+ color: Una introduzione ai colori digitali.
+ coordinate-system-and-shapes-title: Sistema di Coordinate e Figure
+ coordinate-system-and-shapes: Disegnare forme semplici e usare il sistema di coordinate.
+ interactivity-title: Interattività
+ interactivity: Introduzione all'interattività con il mouse e la tastiera.
+ program-flow-title: Flusso del programma
+ program-flow: Introduzione al controllo del flusso di programma in p5.js.
+ curves-title: Curve
+ curves: >-
+ Una introduzione a tre tipi di curve in p5.js: archi, curve spline, e curve
+ di Bézier.
+ becoming-a-better-programmer-title: Diventare un programmatore migliore
+ debugging-title: Debuggare
+ debugging: Guida al debugging.
+ optimizing-title: Ottimizzazione del codice p5.js per le prestazioni
+ optimizing: >-
+ Un tutorial di suggerimenti e trucchi per ottimizzare il codice per renderlo
+ più veloce e fluido.
+ test-driven-development-title: Test unitari e sviluppo guidato dai test (TDD)
+ test-driven-development: >-
+ Salva te stesso dall'agonia il giorno dell'installazione. Che
+ cos'è il test unitario e come si usa? Di Andy Timmons.
+ contributing-to-the-community-title: Contribuire alla community
+ development-title: Sviluppo
+ development: Guida introduttiva e panoramica per contribuire allo sviluppo.
+ looking-inside-title: Guardando dentro p5
+ looking-inside: >-
+ Un'introduzione amichevole alla struttura dei file e agli strumenti per
+ lo sviluppo p5.js, di Luisa Pereira.
+ writing-tutorial-title: Scrivere un tutorial
+ writing-tutorial: Una guida su come creare tutorial sulla programmazione in p5.js.
+ writing-a-tutorial-title: Guida per contribuire ai tutorial p5.js
+ writing-a-tutorial-author: Questo tutorial è stato realizzato da Tega Brain.
+ writing-a-tutorial-1: >-
+ Invitiamo gli educatori, i collaboratori e in generale gli appassionati a
+ contribuire ai tutorial di p5.js. Il progetto p5.js rende il creative coding
+ e lo sviluppo open source più accessibili a una community variegata di
+ persone e siamo entusiasti di pubblicare tutorial su tutte le sfaccettature
+ del processo di sviluppo. Il nostro materiale didattico per il momento
+ comprende guide per imparare p5, tecnica di programmazione e come
+ contribuire ad un progetto open source.
+ writing-a-tutorial-2: >-
+ Accogliamo volentieri contributi nella forma di nuovi tutorial e questa
+ guida serve proprio a spiegare le fasi di proposta, preparazione e
+ contribuzione di tutorial.
+ writing-a-tutorial-how-start-title: 'Come iniziare:'
+ writing-a-tutorial-how-start-1: >-
+ Verifica che l'argomento da te proposto non sia stato già trattato.
+ C'è
+ writing-a-tutorial-how-start-2: uno spreadsheet
+ writing-a-tutorial-how-start-3: >-
+ che tiene traccia dei tutorial in lavorazione. Se l'argomento da te
+ scelto è nella lista dei tutorial già iniziati, puoi sempre arricchire un
+ lavoro in corso d'opera e contribuire preparando un tutorial già
+ esistente alla pubblicazione, quindi non esitare a contattarci.
+ writing-a-tutorial-how-start-4: >-
+ Se il tuo argomento non è già stato affrontato o iniziato, scrivi qualche
+ frase per spiegare quale tema proponi di trattare e inviaci questa
+ descrizione per email a education@p5js.org.
+ writing-a-tutorial-how-prepare-title: 'Come preparare un tutorial p5.js per la pubblicazione online:'
+ writing-a-tutorial-how-prepare-1: >-
+ Quando sei pronto per pubblicare il tuo tutorial, segui i passaggi seguenti
+ per preparare il contenuto per il sito p5.js.
+ writing-a-tutorial-how-prepare-2: 'Salva il contenuto del tuo tutorial in un file nome-tutorial.hbs con '
+ writing-a-tutorial-how-prepare-3: questa struttura di base
+ writing-a-tutorial-how-prepare-4: >-
+ . Come viene mostrato in questo file, deve contenere un'intestazione
+ come quella qui sotto:
+ writing-a-tutorial-how-prepare-5: >-
+ La cartella contenente il tuo tutorial verrà verrà posizionata nella
+ cartella "tutorial" del sito p5.js. Il file index.hbs è la
+ writing-a-tutorial-how-prepare-6: 'pagina iniziale dei tutorial p5.js,'
+ writing-a-tutorial-how-prepare-7: ' e il file test-tutorial.hbs è il test di prova.'
+ writing-a-tutorial-how-prepare-8: Tutto il contenuto deve essere incluso nei tag
+ writing-a-tutorial-how-prepare-9: >-
+ della pagina, e formattato con i tag <h1>, <h2> e i tag di
+ paragrafo <p> come mostrato nella
+ writing-a-tutorial-how-prepare-10: pagina del tutorial di prova.
+ writing-a-tutorial-how-prepare-11: >-
+ Se il tuo tutorial contiene immagini, queste devono essere inserite nella
+ cartella assets del sito, precisamente in
+ src/assets/learn/test-tutorial/images, come mostrato qui sotto.
+ writing-a-tutorial-how-prepare-12: 'Per formattare correttamente il codice nel html della pagina usa il tag:'
+ writing-a-tutorial-embedding-title: Incorporare sketch p5.js
+ writing-a-tutorial-embedding-1: >-
+ Usare p5.js significa che puoi arricchire il tuo tutorial con esempi di
+ codice animati, interattivi o modificabili per dimostrare concetti di
+ programmazione. I tuoi esempi devono essere realizzati come sketch p5.js e
+ possono essere inseriti nel tutorial in due modi.
+ writing-a-tutorial-embedding-2: 'Se l'esempio deve essere editabile, come nelle '
+ writing-a-tutorial-embedding-3: pagine dei Riferimenti
+ writing-a-tutorial-embedding-4: ' del sito p5.js, lo sketch p5.js deve essere incluso nella pagina html usando il widget p5.js. Segui '
+ writing-a-tutorial-embedding-5: 'questa guida '
+ writing-a-tutorial-embedding-6: 'su come inserire sketch p5.js usando il widget, scritta da '
+ writing-a-tutorial-embedding-7: . Puoi trovare un esempio pratico nella
+ writing-a-tutorial-embedding-8: ' pagina del tutorial di prova'
+ writing-a-tutorial-embedding-9: .
+ writing-a-tutorial-embedding-10: >-
+ Se l'esempio deve essere animato e/o interattivo, ma non editabile. Lo
+ sketch p5.js deve essere incluso nella pagina come iframe, come descritto
+ qui sotto.
+ writing-a-tutorial-iframe-title: Inserisci uno sketch p5.js usando un iframe
+ writing-a-tutorial-iframe-1: >-
+ Un iframe è come creare una finestra attraverso cui puoi vedere
+ un'altra pagina, isolata dal resto della tua pagina. In questo caso
+ sarà una finestra sul file index.html che contiene il tuo sketch p5.js.
+ writing-a-tutorial-iframe-2: >-
+ Metti i tuoi sketch p5 nella cartella /src/assets/learn del sito, in una
+ cartella etichettata con il nome del tuo sketch, come mostrato nello
+ screenshot. Sarà qui che verranno memorizzate tutte le immagini e sketch p5
+ collegati all'iframe.
+ writing-a-tutorial-iframe-3: >-
+ Nelle sottocartelle contenenti il tuo esempio p5 deve esserci un file
+ sketch.js e un file embed.html per lo sketch.
+ writing-a-tutorial-iframe-4: >-
+ Assicurati che il tuo file embed.html abbia i percorsi corretti delle
+ librerie p5 del sito. Se la struttura dei tuoi file è uguale a quella di cui
+ sopra, il percorso per la libreria p5.js deve essere
+ "../../../js/p5.min.js".
+ writing-a-tutorial-iframe-5: >-
+ Una volta verificato questo, puoi includere i file "index" di p5.js come
+ iframe nel file .hbs che contiene il contenuto del tuo tutorial. Il codice
+ di incorporamento per l'iframe sarà quindi:
+ writing-a-tutorial-iframe-6: 'Styling dell'iframe (direttamente nel file o nel foglio di stile): '
+ writing-a-tutorial-iframe-7: 'Qui puoi trovare lo sketch puro in esecuzione: '
+ writing-a-tutorial-iframe-8: 'E qui è incorporato nel sito p5 usando il seguente codice: '
+ writing-a-tutorial-iframe-9: >-
+ Una cosa da notare è che devi impostare manualmente la dimensione
+ dell'iframe, quindi funziona meglio se le cose sono di dimensioni
+ standard.
+ writing-a-tutorial-iframe-10: >-
+ Si noti anche che i link ai file della libreria p5.js non provengono dalla
+ pagina .eps con tutto il contenuto del tutorial. Bensì si troveranno nella
+ pagina html che che sta elaborando il tuo sketch (che in questo caso si
+ chiama embed.html).
+ writing-a-tutorial-iframe-11: >-
+ Ulteriori informazioni sull'incorporamento di sketch p5.js sono
+ disponibili
+ writing-a-tutorial-embed-iframe-12: qui.
+ writing-a-tutorial-finishing-title: Ultimi dettagli
+ writing-a-tutorial-finishing-1: >-
+ Quando avrai finito di modificare il tuo tutorial e avrai ottenuto
+ l'approvazione, effettua un fork (copia) della repository
+ p5.js-website, prepara il tutorial come mostrato sopra e apri una Pull
+ Request nella stessa repository, così potremo pubblicare il tuo lavoro!
+ writing-a-tutorial-finishing-2: Grazie!
+ color-description1: >-
+ Questo tutorial è preso dal libro Learning Processing di Daniel Shiffman,
+ pubblicato da Morgan Kaufmann, © 2008 Elsevier Inc. Tutti i diritti
+ riservati. È stato trascritto in p5 da Kelly Chang. Se trovi qualche errore
+ o hai commenti,
+ color-description2: ' faccelo sapere.'
+ color-p1x1: >-
+ Nel mondo digitale, quando vogliamo parlare di un colore, è necessaria la
+ precisione. Dire "Hey, puoi colorare quel cerchio di blu-verde?" non va
+ bene. I colori vengono definiti come un array di numeri. Iniziamo con il
+ caso più semplice: bianco & nero e scala di grigi. 0 significa nero, 255
+ significa bianco. Ogni altro numero nel mezzo-50, 87, 162, 209, etc- è una
+ sfumatura di grigio che va dal nero al bianco.
+ color-p2x1: 'Aggiungendo le funzioni '
+ color-p2x2: ' e '
+ color-p2x3: ' prima di disegnare qualcosa, possiamo impostare il colore di ogni forma. Esiste inoltre la funzione '
+ color-p2x4: ', che imposta un colore di sfondo per la finestra. Ecco un esempio.'
+ color-code1: |-
+ background(255); // Imposta il colore di sfondo a bianco
+ stroke(0); // Imposta il colore del contorno (stroke) a nero
+ fill(150); // Imposta il colore di riempimento di una forma (fill) a grigio
+ rect(50,50,75,100); // Disegna il rettangolo
+ color-p3x1: 'Il contorno e il riempimento possono essere eliminati con le funzioni: '
+ color-p3x2: ' e '
+ color-p3x3: >-
+ . Istintivamente potremmo pensare di usare "stroke(0)" per eliminare il
+ contorno, ma è importante tenere a mente che 0 non significa "niente", bensì
+ indica il colore nero. Inoltre, ricorda di non eliminare entrambi: con
+ color-p3x4: ' e '
+ color-p3x5: ', non apparirà nulla!'
+ color-p4x1: >-
+ Infine, se disegniamo due figure, p5.js userà sempre l'ultima scelta di
+ contorno e riempimento (leggendo il codice dall'alto verso il basso).
+ color-rgb-title: Colore RGB
+ color-rgb-p1x1: >-
+ Ricordi i colori a dita? Mischiando tre colori "primari" si poteva creare
+ qualsiasi altro colore. Mescolare tutti i colori insieme creava un colore
+ marrone fango, e più pittura aggiungevi, più scuro diventava. Anche i colori
+ digitali vengono realizzati mescolando i tre colori primari, ma in un modo
+ leggermente diverso. Innanzitutto, i colori primari sono diversi: rosso,
+ verde e blu (in inglese red, green, e blue, da cui "RGB"). Inoltre, con i
+ colori sullo schermo mescoli luce, non pittura, quindi anche le regole di
+ miscelazione sono diverse.
+ color-rgb-li1: Rosso + Verde = Giallo
+ color-rgb-li2: Rosso + Blu = Viola
+ color-rgb-li3: Verde + Blu = Ciano (Blu-Verde)
+ color-rgb-li4: Rosso + Verde + Blu = Bianco
+ color-rgb-li5: Nessun colore = Nero
+ color-rgb-p2x1: >-
+ Questo presuppone che i colori siano il più luminosi possibile, ma
+ ovviamente è disponibile una gamma di colori, quindi un po' di rosso
+ con un po' di verde e un po' di blu genera il grigio, e un
+ po' di rosso con un po' di blu crea il viola scuro. Anche se ci
+ vorrà del tempo per abituarsi a questi concetti, più programmerai e
+ sperimenterai con il colore RGB, più velocemente diventerà istintivo, come
+ mescolare la vernice con le dita. Ovviamente non puoi dire "Mescola un
+ po' di rosso con un po' di blu", devi fornire una quantità esatta.
+ Per quanto riguarda la scala di grigio, i singoli elementi di colore vengono
+ espressi come intervalli da 0 (assenza del colore) a 255 (presenza massima),
+ e sono elencati nell'ordine R (rosso), G (verde), e B (blu). Acquisirai
+ maggiore familiarità con i colori RGB attraverso più esperimenti, ma in
+ seguito introdurremo esempi di codice che utilizzano colori comuni.
+ color-transparency-title: Trasparenza
+ color-transparency-p1x1: >-
+ Oltre alle componenti rosso, verde e blu di ogni colore, esiste una quarta
+ componente opzionale chiamata "alfa" ("alpha", in inglese). Alfa indica la
+ trasparenza ed è particolarmente utile quando si desidera disegnare elementi
+ sovrapposti, ma comunque parzialmente visibili. Il valore alfa di una
+ immagine viene chiamato anche il "canale alpha" di una immagine.
+ color-transparency-p2x1: >-
+ È importante importante notare che i pixel non sono veramente trasparenti,
+ questa è semplicemente un'illusione ottenuta mescolando i colori.
+ Dietro le quinte, p5.js prende i numeri dei colori e aggiunge ad uno una
+ percentuale dell'altro, creando l'illusione di una sfumatura. (Se
+ sei interessato a programmare i famosi "rose-colored glasses", è qui che
+ dovresti iniziare.)
+ color-transparency-p3x1: >-
+ Anche i valori di alfa vanno da 0 a 255, dove 0 è completamente trasparente
+ (0% di opacità) e 255 è completamente opaco (100% di opacità).
+ color-custom-ranges-title: Gamme di colori personalizzate
+ color-custom-ranges-p1x1: >-
+ Il modello RGB con valori tra 0 e 255 non è l'unico modo per definire i
+ colori in p5.js, che infatti ci permette di utilizzare più metodi. Per
+ esempio, potremmo preferire una gamma di colori che va dallo 0 a 100 (come
+ una percentuale). Per fare questo puoi usare
+ color-custom-ranges-p2x1: >-
+ La funzione qui sopra dice: "OK, dobbiamo usare i valori rosso, verde e blu
+ per definire i colori. I loro valori saranno compresi tra 0 e 100"
+ color-custom-ranges-p3x1: >-
+ Anche se è raramente conveniente, è anche possibile avere diverse gamme di
+ colori per ogni componente di colore:
+ color-custom-ranges-p4x1: >-
+ Qui stiamo dicendo "I valori del rosso vanno da 0 a 100, il verde da 0 a
+ 500, il blu da 0 a 10 e l'alfa da 0 a 255."
+ color-custom-ranges-p5x1: >-
+ Infine, anche se probabilmente basteranno i colori RGB per tutte le tue
+ esigenze di programmazione, puoi anche utilizzare i colori nella modalità
+ HSB (tonalità, saturazione e luminosità). Senza entrare troppo nei dettagli,
+ i colori HSB funzionano così:
+ color-custom-ranges-li1x1: Tonalità
+ color-custom-ranges-li1x2: '—Il tipo di colore, i valori di default vanno da 0 a 255.'
+ color-custom-ranges-li2x1: Saturazione
+ color-custom-ranges-li2x2: '—La vivacità del colore, per default da 0 a 255.'
+ color-custom-ranges-li3x1: Luminosità
+ color-custom-ranges-li3x2: '—La luminosità del colore, per default da 0 a 255.'
+ color-custom-ranges-p6x1: 'Con '
+ color-custom-ranges-p6x2: ' puoi impostare i tuoi intervalli per questi valori. Alcuni preferiscono il range 0-360 per la tonalità (pensa ai 360 gradi di una ruota dei colori) e 0-100 per la saturazione e luminosità (pensa a 0-100%).'
+ coordinate-system-description1: 'Questo tutorial è preso dal libro '
+ coordinate-system-description2: Learning Processing
+ coordinate-system-description3: ' di Daniel Shiffman, pubblicato da Morgan Kaufmann, © 2008 Elsevier Inc. Tutti i diritti riservati. È stato trascritto in p5 da Kelly Chang. Se trovi qualche errore o hai commenti '
+ coordinate-system-description4: faccelo sapere
+ coordinate-system-description5: .
+ coordinate-system-description-title: Sistema di coordinate e forme
+ coordinate-system-description-p1x1: >-
+ Prima di iniziare a programmare con p5, dobbiamo tornare alla memoria della
+ nostra scuola media, trovare un pezzo di carta millimetrata e tracciare una
+ linea retta. La distanza più breve tra due punti è esattamente una linea
+ retta, ed è qui che iniziamo, con due punti su quella carta millimetrata.
+ coordinate-system-description-p2x1: ' La figura qui sopra mostra una linea tra il punto A (1,0) e il punto B (4,5). Se volessi indirizzare un tuo amico a disegnare quella stessa linea, gli urleresti "per favore, traccia una linea dal punto uno-zero al punto quattro-cinque." Ora immagina che il tuo amico sia un computer e che tu voglia spiegare a questo amico digitale come disegnare la stessa linea retta sullo schermo. In questo caso, puoi usare le stesse istruzioni (la differenza è che questa volta puoi saltare i convenevoli e ti verrà richiesto di utilizzare una formattazione precisa). Qui, le istruzioni appariranno così:'
+ coordinate-system-description-p3x1: >-
+ Anche se non hai ancora studiato la sintassi della scrittura di un
+ programma, le affermazioni di cui sopra dovrebbero comunque essere
+ comprensibili. Forniamo al computer un'istruzione da eseguire (che
+ chiamiamo "funzione") per fargli tracciare una linea. Inoltre, forniamo
+ anche alcuni parametri per specificare come dovrebbe essere disegnata: dal
+ punto A (1,0) al punto B (4,5). Se pensiamo a questa riga di codice come ad
+ una frase, la funzione è un verbo e il parametro è un oggetto. Questa frase
+ di codice utilizza un punto e virgola come simbolo finale anziché un punto.
+ coordinate-system-description-p4x1: >-
+ La chiave qui è capire che lo schermo del computer non è altro che un pezzo
+ di carta millimetrata più elaborato. Ogni pixel sullo schermo rappresenta
+ una coordinata, ovvero due numeri: "x" (orizzontale) e "y" (verticale)
+ rappresentano la posizione di un punto nello spazio. Il nostro compito è
+ specificare quali forme e colori dovrebbero apparire in queste coordinate
+ pixel.
+ coordinate-system-description-p5x1: >-
+ Tuttavia, c'è una cosa da notare qui. La carta millimetrata della
+ scuola media ("Sistema di coordinate cartesiane") posizionava (0,0) al
+ centro con l'asse y rivolto verso l'alto e l'asse x rivolto
+ verso destra (nella direzione positiva, negativa verso il basso e verso la
+ sinistra). Il sistema di coordinate per i pixel in una finestra del computer
+ è, tuttavia, invertito lungo l'asse y. (0,0) si trova nell'angolo
+ in alto a sinistra con la direzione positiva che punta orizzontalmente a
+ destra e verticalmente in basso.
+ coordinate-system-simple-shapes-title: Forme semplici
+ coordinate-system-simple-shapes-p1x1: >-
+ La stragrande maggioranza degli esempi di programmazione p5 sono di natura
+ visiva. Questi esempi, alla base, riguardano il disegno di forme e
+ l'impostazione di pixel. Cominciamo guardando quattro forme primitive.
+ coordinate-system-simple-shapes-p2x1: >-
+ Per ogni forma, ci chiederemo quali informazioni sono necessarie per
+ specificare la posizione e le dimensioni (e successivamente il colore) di
+ quella forma e apprendere come p5 si aspetta di ricevere tali informazioni.
+ In ciascuno dei diagrammi seguenti, useremo una finestra con una larghezza
+ di 100 pixel e un'altezza di 100 pixel.
+ coordinate-system-simple-shapes-p3x1: 'Un '
+ coordinate-system-simple-shapes-p3x2: ' è la forma più semplice ed un buon punto di partenza. Per disegnare un punto, abbiamo solo bisogno di una coordinata x e y.'
+ coordinate-system-simple-shapes-p4x1: 'Neanche la '
+ coordinate-system-simple-shapes-p4x2: ' è troppo difficile. Richiede semplicemente due punti: (x1,y1) e (x2,y2):'
+ coordinate-system-simple-shapes-p5x1: 'Una volta che arriviamo a disegnare un '
+ coordinate-system-simple-shapes-p5x2: >-
+ , le cose diventano un po' più complicate. In p5, un rettangolo è
+ definito dalle coordinate per l'angolo in alto a sinistra del
+ rettangolo, dalla larghezza e dall'altezza.
+ coordinate-system-simple-shapes-p6x1: >-
+ Un secondo modo per disegnare un rettangolo consiste nello specificare il
+ punto centrale, con la larghezza e l'altezza. Se preferiamo questo
+ metodo, indichiamo innanzitutto che vogliamo usare la modalità
+ coordinate-system-simple-shapes-p6x2: ' prima delle istruzioni per il rettangolo stesso. Si noti che p5 è sensibile al maiuscolo / minuscolo.'
+ coordinate-system-simple-shapes-p7x1: >-
+ Infine, possiamo anche disegnare un rettangolo con due punti (l'angolo
+ in alto a sinistra e l'angolo in basso a destra). La modalità qui è
+ coordinate-system-simple-shapes-p7x2: >-
+ . Nota che questo esempio realizza sullo schermo lo stesso risultato
+ dell'esempio sopra.
+ coordinate-system-simple-shapes-p8x1: >-
+ Quando avremo preso confidenza con il concetto di disegnare un rettangolo,
+ un
+ coordinate-system-simple-shapes-p8x2: ' è un gioco da ragazzi. In effetti, è identica a '
+ coordinate-system-simple-shapes-p8x3: >-
+ con la differenza che l'ellisse è disegnata dove dovrebbe essere la
+ casella contenente il rettangolo. La modalità predefinita per
+ coordinate-system-simple-shapes-p8x4: ' è '
+ coordinate-system-simple-shapes-p8x5: ', invece di '
+ coordinate-system-simple-shapes-p8x6: .
+ coordinate-system-simple-shapes-p9x1: >-
+ Ora diamo un'occhiata ad alcuni codici che utilizzano impostazioni di
+ disegno più pratiche. Useremo una dimensione della tela di 200 per 200. Nota
+ l'uso della funzione createCanvas() per specificare la larghezza e
+ l'altezza della tela.
+test-tutorial: null
+libraries:
+ Libraries: Librerie
+ core-libraries: Librerie di base
+ community-libraries: Librerie della Community
+ libraries-created-by: 'Realizzata da:'
+ p5.sound: >-
+ p5.sound estende p5 con funzionalità Web Audio tra cui input audio,
+ riproduzione, analisi e sintesi.
+ p5.accessibility: >-
+ p5.accessibility rende la tela p5 più accessibile alle persone non vedenti e
+ ipovedenti.
+ asciiart: >-
+ p5.asciiart è un convertitore di immagini ad ASCII semplice e facile da
+ usare per p5.js.
+ p5.ble: >-
+ Una libreria JavaScript che consente la comunicazione tra dispositivi BLE e
+ schizzi p5.
+ p5.bots: >-
+ Con p5.bots puoi interagire con il tuo Arduino (o altro microprocessore)
+ dall'interno del browser. Usa i dati del sensore per guidare uno
+ schizzo; usa uno schizzo per guidare LED, motori e altro!
+ p5.clickable: Libreria di pulsanti guidata dagli eventi e di facile utilizzo per p5.js.
+ p5.cmyk.js: ColorSpace CMYK
+ p5.collide2D: >-
+ p5.collide2D fornisce strumenti per il calcolo del rilevamento delle
+ collisioni per la geometria 2D con p5.js.
+ p5.createloop: >-
+ Crea loop di animazione con rumore ed esportazioni GIF in una riga di
+ codice.
+ p5.dimensions: >-
+ p5.dimensions estende le funzioni vettoriali di p5.js per operare in
+ qualsiasi numero di dimensioni.
+ p5.EasyCam: >-
+ Semplice controllo della videocamera 3D con panoramica inerziale, zoom e
+ rotazione. Importante contributo di Thomas Diewald.
+ p5.experience: >-
+ Ampia libreria per p5.js che aggiunge ulteriori funzionalità di ascolto di
+ eventi per la creazione di applicazioni Web basate su tela.
+ p5.func: >-
+ p5.func è un'estensione p5 che fornisce nuovi oggetti e utilità per la
+ generazione di funzioni nei domini di tempo, frequenza e spazio.
+ p5.geolocation: >-
+ p5.geolocation fornisce tecniche per acquisire, osservare, calcolare e
+ georeferenziare le posizioni degli utenti per p5.js.
+ p5.gibber: p5.gibber offre funzionalità di sequenziamento musicale e sintesi audio.
+ grafica.js: >-
+ grafica.js ti consente di aggiungere grafici 2D semplici ma altamente
+ configurabili ai tuoi sketch p5.js.
+ p5.gui: p5.gui genera un'interfaccia utente grafica per i tuoi sketch p5.js.
+ p5.localmessage: >-
+ p5.localmessage fornisce una semplice interfaccia per inviare messaggi
+ localmente da uno sketch all'altro e quindi disegnare in più finestre!
+ marching: 'Conversione da raster a vettoriale, isosuperfici.'
+ mappa: >-
+ Mappa fornisce una serie di strumenti per lavorare con mappe statiche e
+ geo-dati, oltre ad altri strumenti utili per sviluppare rappresentazioni
+ visive dei dati con geolocalizzazione.
+ ml5.js: >-
+ ml5.js si basa su Tensorflow.js e fornisce un facile accesso agli algoritmi
+ e ai modelli di machine learning nel browser.
+ p5.play: >-
+ p5.play fornisce sprite, animazioni, funzioni di input e collisione per
+ giochi e applicazioni simili.
+ p5.particle: >-
+ Gli oggetti Particle e Fountain possono essere utilizzati per creare effetti
+ basati sui dati, che possono derivare dall'interazione dell'utente
+ o dai file JSON.
+ p5.Riso: >-
+ p5.Riso è una libreria per la generazione di file adatti per la stampa
+ Risograph. Aiuta a trasformare i tuoi sketch in stampe a più colori.
+ rita.js: >-
+ RiTa.js fornisce una serie di oggetti di elaborazione del linguaggio
+ naturale per la letteratura generativa.
+ Rotating knobs: >-
+ Crea manopole che puoi ruotare con grafica personalizzata e restituire
+ intervalli di valori.
+ p5.scenemanager: >-
+ p5.SceneManager ti aiuta a realizzare disegni con più stati/scene. Ogni
+ scena è come un disegno nel disegno principale.
+ p5.screenPosition: >-
+ Aggiungi le variabili screenX e screenY con le coordinate del cursore sullo
+ schermo.
+ p5.scribble: >-
+ Disegna primitive 2D di aspetto abbozzato. Creato da Janneck Wullschleger,
+ basato su un porting della libreria di elaborazione originale
+ p5.serial: >-
+ p5.serial consente a diversi dispositivi di utilizzare la comunicazione
+ seriale (RS-232) per comunicare con sketch p5 in un browser Web.
+ Shape5: >-
+ Shape5 è una libreria primitiva 2D per studenti di scuole elementari che
+ stanno imparando a programmare per la prima volta.
+ p5.shape.js: Una libreria creata per aggiungere più forme semplici al framework p5.js.
+ p5.speech: >-
+ p5.speech fornisce un accesso semplice e chiaro alle API di Web Speech e
+ Speech Recognition, facilitando la creazione di sketch in grado di parlare e
+ ascoltare.
+ p5.start2d.js: 'estensione p5 per arte statica 2D usando px, mm, cm o pollici'
+ p5.tiledmap: >-
+ p5.tiledmap fornisce funzioni di disegno e di supporto per includere le
+ mappe nei tuoi sketch.
+ p5.touchgui: Una libreria di interfaccia grafica (GUI) multi-touch e mouse.
+ tramontana: >-
+ Tramontana è una piattaforma per utilizzare facilmente molti dispositivi
+ (iOS, Android, tramontana Board,...) per creare ambienti interattivi, spazi
+ interattivi o semplicemente testare esperimenti su larga scala.
+ vida: >-
+ Vida è una semplice libreria che aggiunge funzionalità di rilevamento del
+ movimento e rilevamento BLOB basate su videocamera (o video) a p5js.
+ p5.voronoi: >-
+ p5.voronoi fornisce una serie di strumenti per disegnare e utilizzare
+ diagrammi voronoi nei tuoi sketch p5.js.
+ p5.3D: Testo 3D e immagini in WebGL.
+ using-a-library-title: Come usare una libreria
+ using-a-library1: >-
+ Per libreria p5.js si intende qualsiasi codice JavaScript che estende o
+ aggiunge alla funzionalità principale p5.js. Esistono due categorie di
+ librerie. Le librerie di base (
+ using-a-library3: >-
+ ) che fanno parte della distribuzione ufficiale di p5.js, e le librerie
+ fornite, che sono sviluppate, possedute e gestite dai membri della comunità
+ p5.js.
+ using-a-library4: >-
+ Per includere una libreria nel tuo sketch, collegala al tuo file HTML, dopo
+ aver effettuato il collegamento in p5.js. Qui sotto un file HTML di esempio:
+ create-your-own-title: Crea la tua libreria
+ create-your-own1: >-
+ p5.js accoglie tutte le librerie aggiuntive create da esterni! Dai
+ un'occhiata al
+ create-your-own2: tutorial sulle librerie
+ create-your-own3: per maggiori dettagli su come crearne una.
+ create-your-own4: >-
+ Se hai creato una libreria e vorresti che fosse inclusa in questa pagina,
+ invia questo modulo!
+community:
+ community-title: Community
+ community-statement-title: Dichiarazione della community p5.js
+ community-statement1: >-
+ p5.js è una community interessata ad esplorare la creazione di arte e design
+ con la tecnologia.
+ community-statement2: >-
+ Siamo una community di, e in solidarietà con, persone di ogni identità ed
+ espressione di genere, orientamento sessuale, razza, etnia, lingua, neuro
+ tipo, taglia, disabilità, classe, religione, cultura, sottocultura, opinione
+ politica, età, livello di abilità, occupazione, e origine. Riconosciamo che
+ non tutti hanno il tempo, i mezzi finanziari o la capacità di partecipare
+ attivamente, ma riconosciamo e incoraggiamo il coinvolgimento di tutti i
+ tipi. Ci impegniamo a promuovere l'eliminazione degli ostacoli e il
+ potenziamento delle capacità. Siamo tutti studenti.
+ community-statement3: >-
+ Ci piacciono questi hashtag: #noCodeSnobs (perché diamo valore alla comunità
+ rispetto all'efficienza), #newKidLove (perché tutti abbiamo iniziato da
+ qualche parte), #unassumeCore (perché non presupponiamo conoscenze) e
+ #BlackLivesMatter (il perché è ovvio).
+ in-practice-title: 'In pratica:'
+ in-practice1: >-
+ Non siamo programmatori snob. Non assumiamo conoscenze preliminari o
+ supponiamo che ci siano cose che tutti dovrebbero sapere.
+ in-practice2: >-
+ Insistiamo nell'essere attivamente coinvolti nelle richieste di
+ feedback, indipendentemente dalla loro complessità.
+ in-practice3: >-
+ Accogliamo i nuovi arrivati e diamo priorità all'apprendimento degli
+ altri. Miriamo ad affrontare tutti i task con l'entusiasmo di un
+ principiante, perché crediamo che l'impegno dei nuovi arrivati abbia lo
+ stesso valore di quello degli esperti.
+ in-practice4: >-
+ Ci sforziamo costantemente di riconoscere e validare attivamente molteplici
+ tipi di contribuzioni.
+ in-practice5: Siamo sempre disposti a offrire aiuto o guida.
+ in-times-conflict-title: 'In tempi di conflitto:'
+ in-times-conflict1: Ascoltiamo.
+ in-times-conflict2: Comunichiamo chiaramente riconoscendo i sentimenti degli altri.
+ in-times-conflict3: >-
+ Riconosciamo quando siamo nel torto, ci scusiamo e accettiamo la
+ responsabilità delle nostre azioni.
+ in-times-conflict4: Cerchiamo continuamente di migliorare noi stessi e la nostra comunità.
+ in-times-conflict5: Manteniamo la nostra comunità rispettosa e aperta.
+ in-times-conflict6: Facciamo in modo che tutti si sentano ascoltati.
+ in-times-conflict7: Siamo attenti e cordiali nelle nostre interazioni.
+ in-the-future-title: 'Nel futuro:'
+ in-the-future1: Il futuro è ora.
+ notes-title: Note
+ notes1: 'Si prega di visitare anche il nostro '
+ notes2: Codice di Condotta p5.js
+ notes3: '. Questa Dichiarazione della p5.js Community è pubblicata sotto una '
+ notes4: licenza Creative Commons
+ notes5: . Sentiti libero di condividere e remixare con l'attribuzione.
+ contribute-title: Contribuire
+ contribute1: >-
+ La nostra comunità è sempre alla ricerca di appassionati che possano aiutare
+ in modi diversi.
+ develop-title: Sviluppare.
+ develop1: GitHub
+ develop2: ' è il luogo principale in cui viene raccolto il codice, vengono documentati i problemi e si tengono discussioni sul codice. Dai un'occhiata al '
+ develop3: ' tutorial di sviluppo'
+ develop4: ' per iniziare, o '
+ develop5: crea la tua libreria.
+ document-title: Documentare.
+ document1: ' Tutti amiamo la documentazione. Abbiamo bisogno di aiuto '
+ document2: con l'aggiunta di esempi
+ document3: ', e'
+ document4: ' di documentazione'
+ document5: ', e con la realizzazione di tutorial.'
+ teach-title: Insegnare.
+ teach1: ' Tieni un seminario o una lezione, insegna ai tuoi amici e collaboratori! Tagga @p5xjs su Twitter e faremo del nostro meglio per condividere ciò che stai facendo.'
+ create-title: Creare.
+ create1: ' p5.js è alla ricerca di designer, artisti e programmatori per mettere in mostra il tuo lavoro creativo ed incredibile in prima pagina e ispirare altre persone. Invia il tuo lavoro a '
+ create2: hello@p5js.org
+ create3: .
+ donate-title: Donare.
+ donate1: ' p5.js è gratuito e open source e realizzato da artisti. Aiuta a supportare lo sviluppo di p5.js attraverso una donazione a '
+ donate2: Processing Foundation
+ donate3: .
+ contributors-conference-title: Conferenza dei Collaboratori di p5.js
+ contributors-conference1: >-
+ Sebbene la maggior parte del lavoro avvenga online, ci incontriamo anche di
+ persona. Abbiamo tenuto due conferenze dei contribuenti al
+ contributors-conference2: >-
+ alla Carnegie Mellon University di Pittsburgh, Pennsylvania. Artisti,
+ designer, sviluppatori, e educatori si sono riuniti per promuovere lo
+ sviluppo di p5.js.
+ participants-title: 'I partecipanti '
+ support-title: Sostegno
+ support1: La nostra conferenza dei contribuenti ha avuto luogo presso il
+ support2: >-
+ alla Carnegie Mellon University, un laboratorio accademico per la ricerca
+ atipica, antidisciplinare e interistituzionale all'incrocio tra arte,
+ scienza, tecnologia e cultura.
+ support3: Questo evento è stato reso possibile da una sovvenzione del
+ support4: e dal generoso sostegno da parte di
+ support5: e
+ support6: Grazie!
+ mailing-list-title: Mailing list
+ mailing-list-1: >-
+ Inserisci il tuo indirizzo email per ricevere aggiornamenti occasionali da
+ Processing Foundation.
+ 2015contributors-conference-title: Conferenza dei Contribuenti 2015
+ 2015contributors-conference-date: 25-31 Maggio
+ 2015contributors-conference1: >-
+ 30 partecipanti di varie origini si sono riuniti e hanno trascorso una
+ settimana a
+ 2015contributors-conference2: >-
+ , per migliorare il codice, la documentazione, e gli strumenti di
+ divulgazione della community sull'ambiente di programmazione p5.js. I
+ partecipanti provenivano da Hong Kong, Seattle, Los Angeles, Boston e New
+ York. La maggior parte lavorava come professionista nei settori della
+ tecnologia creativa, dell'interaction design e delle arti dei nuovi
+ media, ma il gruppo comprendeva anche una mezza dozzina di studenti
+ universitari e laureati delle Scuole di arte e architettura di Carnegie
+ Mellon.
+ 2015contributors-conference3: Foto di Taeyoon Choi
+ 2015contributors-conference-diversity-title: Diversità
+ 2015contributors-conference-diversity1: >-
+ Oltre allo sviluppo tecnico, uno dei principali obiettivi di questa
+ conferenza è stato la sensibilizzazione, la community e la diversità. La
+ conferenza è iniziata con un panel
+ 2015contributors-conference-diversity2: >-
+ Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and
+ the Internet
+ 2015contributors-conference-diversity3: '. '
+ 2015contributors-conference-diversity4: Organizzato da
+ 2015contributors-conference-diversity5: e
+ 2015contributors-conference-diversity6: ', '
+ 2015contributors-conference-diversity7: >-
+ il panel si è svolto martedì 25 maggio 2015 nell'auditorium di Kresge
+ alla Carnegie Mellon University. Gli speaker sono stati
+ 2015contributors-conference-diversity8: e
+ 2015contributors-conference-diversity9: .
+ 2015cc_1: >-
+ Diversi gruppi di partecipanti sorridono e fanno un segno p5 con le loro
+ mani
+ 2015cc_2: >-
+ I partecipanti saltano, sorridono e lanciano le mani in aria su un prato
+ verde
+ 2015cc_3: Donna che presenta la dichiarazione della community p5.js dal suo laptop
+ 2015cc_4: >-
+ La donna parla espressamente in un microfono mentre due collaboratori maschi
+ lo guardano
+ 2015cc_5: I partecipanti sorridono attentamente e ascoltano una presentazione
+ 2015cc_6: La donna legge riguardo a p5.js in un microfono per tre studentesse
+ 2015cc_7: >-
+ I partecipanti si siedono in cerchio attorno a una lavagna bianca con note
+ adesive su di essa mentre una studentessa parla al microfono
+ 2015cc_8: >-
+ I partecipanti si siedono intorno a un tavolo a guardare l'altro laptop
+ e confrontare il codice
+ 2015cc_9: 'Lavagna con note adesive e scritte di colore diverso sulla programmazione '
+ 2015cc_10: >-
+ Donna che parla al microfono della valutazione di diversi set di abilità
+ mentre un gruppo di partecipanti con laptop guarda il suo powerpoint in una
+ classe
+ 2015cc_11: >-
+ La donna parla da un podio in un auditorium mentre tre partecipanti siedono
+ sul palco e altri tre partecipano a una videochiamata
+ 2015cc_12: >-
+ Vista dall'alto di un'aula con partecipanti che lavorano sui loro
+ laptop
+ 2015cc_13: Cinque persone che hanno una discussione in cerchio
+ 2015cc_14: Cinque persone con i loro laptop che condividono le loro note in cerchio
+ 2015cc_15: Uomo in una classe con un microfono che parla a un gruppo di partecipanti
+ 2019contributors-conference-title: Conferenza dei Contribuenti 2019
+ 2019contributors-conference-date: 13-18 Agosto
+ 2019contributors-conference1: 'Un gruppo interdisciplinare di 35 partecipanti si è riunito al '
+ 2019contributors-conference2: >-
+ , per migliorare il codice, la documentazione, gli strumenti di divulgazione
+ della community ed esplorare l'attuale panorama dell'ambiente di
+ programmazione p5.js. Composta da una vasta gamma di partecipanti nei
+ settori della tecnologia creativa, dell'interaction design e delle
+ nuove arti mediatiche, la conferenza mirava a favorire il dialogo attraverso
+ una lente multidisciplinare. I gruppi di lavoro si sono concentrati su
+ diverse aree tematiche: accesso; Musica e codice nell'esecuzione;
+ Paesaggio della tecnologia creativa; e internazionalizzazione.
+ 2019contributors-conference3: Video di Qianqian Ye
+ 2019contributors-conference4: Foto di Jacquelyn Johnson
+ outputs: Output
+ output1: >-
+ . L'implementazione di modelli flessibili con forme di triangoli,
+ quadrati, esagoni e ottagoni per p5.js. Creato da Aren Davey.
+ output2: >-
+ . Un set di file modello per la creazione di un gioco multiplayer
+ multi-dispositivo in cui più client possono connettersi a una pagina host
+ specificata. Creato da L05.
+ output3: Esperimenti che usano
+ output3-1: >-
+ , per testare le funzioni dell'interfaccia softCompile e OSC e la
+ funzione di connettività è stata aggiunta nella dimostrazione del setup
+ MIDI. Un ambiente VJ collaborativo per la programmazione live con p5.js!
+ Creato da Ted Davis.
+ output4: >-
+ Un panel su Blackness and Gender in Virtual Space guidato da American
+ Artist, con shawné michaelain holloway e LaJuné McMillian.
+ output5: Workshop condotti da Everest Pipkin e Jon Chambers.
+ output6: 'Un prototipo di un '
+ output6-1: interfaccia per notebook per p5.js.
+ output6-2: Creata da Allison Parrish.
+ output7: >-
+ Nuove installazioni artistiche di Stalgia Grigg, LaJuné McMillian, Aatish
+ Bhatia e Jon Chambers.
+ output8: Strumenti per contribuenti globali di p5.js.
+ output8-1: >-
+ Creato da Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian
+ Ye, Dorothy R. Santos e Yasheng She.
+ output9: Come scrivere codice creativo non violento.
+ output9-1: ' Una zina guidata da Olivia Ross.'
+ output10: >-
+ Ristrutturazione del sito web p5.js per migliorarne l'usabilità.
+ Include progressi sull'usabilità della lettura dello schermo e
+ miglioramenti delle pagine Home, Download, Inizio e Riferimenti. Tra i
+ collaboratori ci sono Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach,
+ Olivia Ross, Luis Morales-Navarro, Lauren McCarthy ed Evelyn Masso.
+ output11: >-
+ Performance collaborative di Luisa Pereira, Jun Shern Chan, Shefali Nayak,
+ Sona Lee, Ted Davis, e Carlos Garcia.
+ output12: Performance di Natalie Braginsky.
+ output13: >-
+ Una progettazione del sistema di librerie p5.js per l'editor p5. Creato
+ da Cassie Tarakajian e Luca Damasco.
+ output14: >-
+ Prototipi che collegano p5 ad altre librerie. Creato da Alex Yixuan Xu e
+ Lauren Valley.
+ output15: Un falò di chiusura guidato da Golan Levin.
+ 2019cc_1: >-
+ Uomo su un podio universitario dando una presentazione a una classe
+ affollata
+ 2019cc_2: I partecipanti seduti a un lungo tavolo a pranzo e una discussione
+ 2019cc_3: 'Partecipanti in una classe, alcuni lavorano sui loro laptop, altri parlano '
+ 2019cc_4: Aula di partecipanti che lavorano sui loro laptop
+ 2019cc_5: Partecipanti a una riunione in un'aula buia
+ 2019cc_6: Donna che fa presentazione in un'aula con diversi partecipanti
+ 2019cc_7: Partecipanti che conversano in un'aula affollata
+ 2019cc_8: Donna con microfono che parla ai compagni partecipanti in una classe
+ 2019cc_9: >-
+ Il partecipante al podio parla di fronte a un testo proiettato sul problema
+ dell'anonimizzazione dei dati
+ 2019cc_10: >-
+ La persona con un microfono che parla agli altri partecipanti davanti al
+ testo dove c'è scritto che p5.js non aggiungerà nuove funzionalità
+ tranne quelle che aumentano l'accesso
+ 2019cc_11: 'Donna che parla in un microfono a parlare con gli altri partecipanti '
+ 2019cc_12: Un uomo con un microfono che parla agli altri partecipanti
+ 2019cc_13: >-
+ I partecipanti si siedono in una classe verso gli oratori ascoltando
+ attentamente
+ 2019cc_14: 'L'aula dei partecipanti di fronte a un oratore ascolta attentamente '
+ 2019cc_15: >-
+ Donna con microfono che parla ai compagni partecipanti con il testo sacred
+ buondaries nella proiezione dietro di lei
+ 2019cc_16: >-
+ Vista dall'alto dei partecipanti che ascoltano un pannello e vedono una
+ proiezione di un'immagine 3d sulla persona
+ 2019cc_17: >-
+ I partecipanti si siedono intorno a un tavolo con i loro laptop e osservano
+ il codice su uno schermo
+ 2019cc_18: >-
+ La donna seduta accanto ad un orsacchiotto a grandezza naturale lavora sul
+ suo computer portatile
+ 2019cc_19: I partecipanti in piedi all'aperto sorridendo
+ 2019cc_20: Quattro partecipanti in piedi in un cerchio conversando
+ 2019cc_21: Partecipanti seduti fuori a pranzo insieme
+ 2019cc_22: >-
+ I partecipanti seduti attorno a un grande tavolo a forma di U guardano verso
+ la parte anteriore della classe
+ 2019cc_23: Uomo seduto davanti all'aula che parla energicamente in un microfono
+ 2019cc_24: >-
+ Foto di gruppo dei partecipanti che sorridono con entusiasmo con le mani in
+ aria
+ 2019cc_25: Gruppo di persone sedute attorno al fuoco da quattro monitor LCD.
+books:
+ books-title: Libri
+ book-1-title: Getting Started with p5.js
+ book-1-authors: 'Lauren McCarthy, Casey Reas, e Ben Fry. Illustrazioni di Taeyoon Choi.'
+ book-1-publisher: 'Pubblicato ottobre 2015, Maker Media. '
+ book-1-pages: '246 pagine. '
+ book-1-type: Tascabile.
+ book-1-description: >-
+ Scritto dallo sviluppatore principale di p5.js e dai fondatori di
+ Processing, questo libro fornisce un'introduzione alle possibilità
+ creative del Web di oggi, utilizzando JavaScript e HTML.
+ book-1-order-a: Ordina Stampa/Ebook da O'Reilly
+ book-1-order-b: Ordina su Amazon
+ book-2-title: Getting Started with p5.js (Edizione Spagnola)
+ book-2-authors: >-
+ Lauren McCarthy, Casey Reas, e Ben Fry. Traduzione di Aarón Montoya-Moraga.
+ Illustrazioni di Taeyoon Choi.
+ book-2-publisher: 'Pubblicato 2018, Processing Foundation, Inc. '
+ book-2-pages: '246 pagine. '
+ book-2-type: Copertina morbida.
+ book-2-description: >-
+ Scritto dallo sviluppatore principale di p5.js e dai fondatori di
+ Processing, questo libro offre un'introduzione alle possibilità
+ creative del Web di oggi, utilizzando JavaScript e HTML.
+ book-2-order-a: Ordina il PDF da The Processing Foundation Press
+ book-2-order-b: Ordina una copia fisica su Amazon
+ book-3-title: Generative Design
+ book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub e Claudius Lazzeroni.'
+ book-3-publisher: >-
+ Pubblicato 30 ottobre 2018, Princeton Architectural Press; Edizione di
+ ristampa.
+ book-3-pages: '255 pagine. '
+ book-3-type: Tascabile.
+ book-3-description: >-
+ Usando linguaggi semplici come JavaScript in p5.js, artisti e creatori
+ possono creare di tutto, dalla tipografia interattiva ai tessuti, dai mobili
+ stampati in 3D a infografiche complesse ed eleganti.
+ book-3-order-a: Ordina su Princeton Architectural Press
+ book-3-order-b: Ordina su Amazon
+ book-4-title: Generative Gestaltung (German Edition)
+ book-4-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub e Claudius Lazzeroni.'
+ book-4-publisher: 'Pubblicato il 1 marzo 2018, Schmidt Hermann Verlag. '
+ book-4-pages: '256 pagine. '
+ book-4-type: Copertina rigida.
+ book-4-description: >-
+ Usando linguaggi semplici come JavaScript in p5.js, artisti e creatori
+ possono creare di tutto, dalla tipografia interattiva ai tessuti, dai mobili
+ stampati in 3D a infografiche complesse ed eleganti.
+ book-4-order-a: Ordina su Verlag Hermann Schmidt
+ book-4-order-b: Ordina su Amazon
+ book-5-title: Learn JavaScript with p5.js
+ book-5-authors: Engin Arslan.
+ book-5-publisher: 'Pubblicato 2018, Apress. '
+ book-5-pages: '217 pagine. '
+ book-5-type: Tascabile.
+ book-5-description: >-
+ Impara a programmare da zero in un modo estremamente accattivante e visivo
+ usando JavaScript con la libreria di programmazione p5.js. Le competenze che
+ acquisirai da questo libro sono altamente trasferibili a una miriade di
+ settori e possono essere utilizzate per la costruzione di applicazioni web,
+ robot programmabili o arte generativa.
+ book-5-order-a: Ordina su Apress
+ book-5-order-b: Ordina su Amazon
+ book-6-title: "Aesthetic Programming: A Handbook of Software Studies"
+ book-6-authors: 'Winnie Soon, Geoff Cox. '
+ book-6-publisher: 'Published 2020, Open Humanities Press. '
+ book-6-pages: '298 pages. '
+ book-6-type: Hardcover.
+ book-6-description: >-
+ Using p5.js, this book introduces and demonstrates the reflexive practice
+ of aesthetic programming, engaging with learning to program as a way to
+ understand and question existing technological objects and paradigms,
+ and to explore the potential for reprogramming wider eco-socio-technical systems.
+ book-6-order-a: Download the PDF (FREE)
+ book-6-order-b: Order from Barnes & Noble
+examples:
+ Examples: Esempi
+ back-examples: Back to Examples
+ Structure: Struttura
+ Form: Forma
+ Data: Dati
+ Arrays: Vettore
+ Control: Controllo
+ Image: Immagine
+ Color: Colore
+ Math: Matematica
+ Simulate: Simulazione
+ Interaction: Interazione
+ Objects: Oggetti
+ Lights: Luci
+ Motion: Movimento
+ Instance_Mode: Modalità di istanza
+ Dom: DOM
+ Drawing: Disegno
+ Transform: Trasformare
+ Typography: Tipografia
+ 3D: 3D
+ Input: Input
+ Advanced_Data: Dati avanzati
+ Sound: Suono
+ Mobile: Dispositivi mobili
+ Hello_P5: Hello p5
+reference:
+ Reference: Riferimenti
+showcase:
+ showcase-title: Showcase
+ showcase-intro1: 'Vi presentiamo Showcase, a cura di '
+ showcase-intro2: >-
+ In questa sezione celebriamo il modo in cui le persone utilizzano p5.js per
+ rendere il lavoro creativo, l'apprendimento e l'open source più
+ interessanti e inclusivi. Insieme, siamo una comunità.
+ showcase-intro3: >-
+ Durante l'estate del 2019, abbiamo chiesto ad alcuni creatori di
+ condividere di più su come hanno usato p5.js. Nomina un lavoro p5.js, tuo o
+ di qualcun altro, per essere presentato qui!
+ nominate-project: Nomina un progetto
+ showcase-featuring: Featuring
+ project-tag-art: Art
+ project-tag-design: Design
+ project-tag-code: Code
+ project-tag-curriculum: Curriculum
+ project-tag-documentation: Documentation
+ project-tag-game: Game
+ project-tag-library: Library
+ project-tag-organizing: Organizing
+ project-tag-tool: Tool
+ project-tag-tutorial: Tutorial
+ project-roni: Programmed Plotter Drawings
+ credit-roni: Roni Cantor
+ description-roni: >-
+ Onde sinusoidali e lerps generati in p5.js, esportati come SVG e disegnati
+ con un plotter e penne.
+ project-phuong: Airi Flies
+ credit-phuong: Phuong Ngo
+ description-phuong: >-
+ In questo gioco sviluppato con p5.play, aiuta Airi a volare dicendo PEW.
+ Creato per incoraggiare le persone a uscire dalla propria zona di comfort e
+ sentirsi più sicuri di sé indipendentemente da ciò che fanno e da come
+ appaiono o suonano.
+ project-daein: Chillin'
+ credit-daein: Dae In Chung
+ description-daein: >-
+ Un poster tipografico interattivo che utilizza il sensore di movimento di un
+ dispositivo mobile con p5.js.
+ project-qianqian: Qtv
+ credit-qianqian: Qianqian Ye
+ description-qianqian: >-
+ Un canale video con video di 1 minuto in mandarino sulla programmazione
+ creativa, l'arte e la tecnologia, tra cui tutorial p5.js per
+ principianti. Disponibile su YouTube, Instagram, Bilibili e TikTok.
+ project-casey-louise: p5.js Shaders
+ credit-casey-louise: 'Casey Conchinha, Louise Lessél'
+ description-casey-louise: 'Una risorsa per imparare cosa, perché e come usare gli shader in p5.js.'
+ project-moon-xin: Moving Responsive Posters
+ credit-moon-xin: 'Moon Jang, Xin Xin, and students'
+ description-moon-xin: >-
+ Poster mobili basati su browser che utilizzano sistemi grafici, metodi di
+ trasformazione e p5.js per indirizzare le connotazioni di una parola di meno
+ di 8 lettere. Progettato dagli studenti per un corso di graphic design
+ (Visual Narrative Systems) presso l'Università della Georgia.
+ created-by: Realizzato da
+ pronouns-female: (lei)
+ creator-from-roni-cantor: 'Da Toronto, Canada'
+ project-links: Link del progetto
+ project-links-text-1-roni-cantor: Sketch di esempio nel web editor p5.js
+ project-links-text-2-roni-cantor: AxiDraw V3 demo video
+ project-q-1-1: Cosa stai facendo?
+ project-q-1-2: Come hai iniziato con p5.js?
+ project-a-1-1-roni-cantor: >-
+ Mi sono appena laureata nel programma New Media della Ryerson University.
+ Venendo da 4 anni di programmazione e creazione di robot, ho deciso di fare
+ una pausa e giocare con alcune forme d'arte più tradizionali, pur
+ continuando a programmare e giocare con i robot.
+ project-a-1-2-roni-cantor: 'Ho iniziato a usare p5.js al '
+ project-a-1-3-roni-cantor: '! Dopo aver usato '
+ project-a-1-4-roni-cantor: ' per molti anni, ho voluto provare qualcosa di nuovo.'
+ project-q-2: Come hai usato p5.js in questo progetto?
+ project-a-2-1-roni-cantor: >-
+ Ho usato p5.js in questo progetto per generare le formule sinusoidali e lerp
+ (interpolazione lineare) e visualizzare gli elementi visivi nel
+ project-a-2-2-roni-cantor: >-
+ . Ho quindi usato una funzione nel mio codice che ha esportato la mia
+ grafica programmata in un file
+ project-a-2-3-roni-cantor: '. Avevo bisogno di un file SVG da dare al plotter (un '
+ project-a-2-4-roni-cantor: >-
+ ) in modo che capisse dove disegnare le linee che avevo programmato. Ho
+ inviato queste informazioni al plotter con un programma chiamato
+ project-a-2-5-roni-cantor: '!'
+ project-q-3: Qual è la tua funzione p5.js preferita?
+ project-a-3-roni-cantor: ' perché le linee sono divertenti e "lerp" è una parola divertente da dire!'
+ project-q-4: >-
+ Hai affrontato difficoltà lavorando a questo progetto? Se è così, come le
+ hai superate?
+ project-a-4-roni-cantor: >-
+ Era la prima volta che usavo p5.js, Inkscape e un plotter! Ho davvero
+ beneficiato delle persone intorno a me che avevano usato p5 in precedenza,
+ nonché di guide e forum online.
+ project-q-5: Puoi dirci qualcosa di interessante che dovremmo esplorare?
+ project-a-5-roni-cantor: ' su Instagram: cose fantastiche per il plotter analogico.'
+ project-q-6: Dove possono cercare le persone per conoscerti meglio?
+ project-a-6-roni-cantor: ' (Instagram)'
+ project-resources: Risorse del progetto
+ creator-from-qianqian: 'Los Angeles, California'
+ interview-link-qianqian: Intervista a Processing Foundation con Qianqian Ye
+ project-a-1-1-qianqian: Sono un artista e designer cinese con sede a Los Angeles.
+ project-a-1-2-qianqian: >-
+ Il mio partner mi ha fatto conoscere p5.js, che ho imparato principalmente
+ guardando tutorial video online gratuiti. Il mio primo progetto p5.js è
+ stato disegnare alcune forme con colori diversi.
+ project-a-2-1-qianqian: >-
+ Questo progetto è iniziato con l'idea di insegnare a mia madre, che
+ vive in Cina e non parla inglese, a programmare con p5.js. Questo progetto è
+ stato difficile su più livelli e volevo iniziare identificando i motivi
+ principali per cui è più difficile per qualcuno come mia madre imparare a
+ programmare, principalmente a causa della mancanza di risorse gratuite per
+ l'apprendimento della programmazione creativa. La maggior parte delle
+ risorse gratuite non è disponibile in Cina. I tutorial di p5.js su YouTube e
+ gli account Twitter e Instagram di p5.js sono inaccessibili in Cina a causa
+ della censura di Internet.
+ project-a-2-2-qianqian: 'Ho imparato molto dai video di YouTube come il '
+ project-a-2-3-qianqian: >-
+ , ma più guardavo i tutorial di programmazione online, più mi rendevo conto
+ di quanto fosse difficile trovare altre donne e persone di colore che
+ insegnassero a programmare, specialmente in mandarino. Volevo aiutare altre
+ donne cinesi a relazionarsi con la programmazione creativa.
+ project-a-2-4-qianqian: >-
+ Sto lavorando per rendere disponibili i canali video ad altri creativi
+ cinesi che vogliono contribuire con me alla risorsa educativa, per esempio
+ con interviste e tutorial con ospiti. Se sei interessato a insegnare/parlare
+ di programmazione creativa in mandarino, fammelo sapere!
+ project-a-3-1-qianqian: 'Il '
+ project-a-3-2-qianqian: ' è la mia caratteristica preferita. Rende perfetta la programmazione creativa online.'
+ project-a-4-1-qianqian: >-
+ Imparare a programmare in una seconda lingua è stato difficile, e la
+ mancanza di una community ha reso il processo ancora più arduo. Spero di
+ parlare della mia esperienza di principiante e di qualcuno che una volta si
+ sentiva un estraneo al mondo della programmazione creativa e dei video
+ tutorial.
+ project-a-4-2-qianqian: >-
+ Trascorro molto tempo a fare ricerche sulle tecnologie più moderne per i
+ miei video. Alla fine, ho deciso di utilizzare il mio telefono per
+ registrare e iMovie per editare. Spero di dimostrare a tutti che non ci
+ vogliono molti attrezzature costose per iniziare a fare video didattici.
+ project-a-4-3-qianqian: >-
+ Un altro problema che ho riscontrato è stata la mia paura di essere su
+ Internet. Per prima cosa ho dovuto superare la mia ansia di commettere
+ errori nei video o ricevere commenti negativi online. Spesso le donne e le
+ persone di colore sono vittime di molestie online. Spero di aiutare a dare
+ l'esempio per altre donne e persone di colore che va bene online e
+ rafforzare le loro comunità condividendo le loro conoscenze. Alla fine,
+ saremo in grado di fermare il bullismo online creando comunità forti e
+ diverse.
+ project-a-5-1-qianqian: 'Sono molto entusiasmata per il '
+ project-a-5-2-qianqian: ' a Los Angeles.'
+ creator-from-phuong: 'Da Kyiv, Ukraine'
+ project-a-1-1-phuong: >-
+ Sono un programmatore creativo e designer, una beneficiaria della borsa di
+ studio per la diversità della
+ link-1-phuong: Gioca a Airi Flies!
+ link-2-phuong: Codice di AiriFlies su GitHub
+ link-3-phuong: Maggiori informazioni sul portfolio di Phuong Ngo
+ project-a-1-2-phuong: ', e in generale un essere curioso.'
+ project-a-1-3-phuong: >-
+ Quest'estate stavo seguendo un corso alla School of Machines di Berlino
+ intitolato "
+ project-a-1-4-phuong: '," principalmente insegnato da '
+ project-a-2-1-phuong: >-
+ Ho usato p5.js per lavorare sulla parte visiva del gioco. Gli sprite di
+ animazione per Airi e i fantasmi sono stati disegnati su un'app per
+ iPad chiamata
+ project-a-2-2-phuong: ' e poi integrati nel codice '
+ project-a-2-3-phuong: . Ho usato principalmente esempi di p5.play come riferimento.
+ project-a-2-4-phuong: 'Per lo sfondo a scorrimento infinito, ho trovato uno '
+ p5-sketch-by-chjno-phuong: sketch p5 di chjno
+ project-a-2-5-phuong: >-
+ . Ho impostato una condizione in modo che ogni volta che venisse rilevata la
+ parola "pew" o un clic del mouse, la velocità di scorrimento cambiasse per
+ creare l'illusione di Airi che vola verso l'alto. Quando
+ l'utente non fa nulla, la velocità di scorrimento è negativa, il che fa
+ sembrare che Airi stia cadendo.
+ project-a-2-6-phuong: 'Per il riconoscimento del suono, ho usato '
+ project-a-2-7-phuong: ' (al momento esiste una versione beta non ancora disponibile al pubblico, ma lo sarà molto presto!). Ho aggiunto circa 120 campioni dei miei compagni di classe che dicevano la parola "pew" con diverse intonazioni e 80 campioni di rumore di fondo per addestrarlo. Quindi ho integrato il modello nel gioco con '
+ project-a-3-1-phuong: >-
+ Adoro la facilità con cui puoi creare, manipolare ed eliminare blocchi e
+ classi HTML con la
+ project-a-3-2-phuong: ' tramite '
+ project-a-3-3-phuong: ' etc. Ma la mia funzione preferita è '
+ project-a-3-4-phuong: ', poiché è qui che avviene la magia.'
+ project-a-4-1-phuong: >-
+ Ho affrontato molte sfide semplicemente perché p5.js era qualcosa di nuovo
+ per me. In generale non avevo mai lavorato molto con JavaScript prima.
+ Leggere la documentazione e cercare esempi simili ha aiutato molto.
+ project-a-5-1-phuong: 'Date un'occhiata ai '
+ school-of-machines-phuong: corsi della School of Machines
+ project-a-5-2-phuong: >-
+ ! Si impegnano molto per connettere le persone più creative del mondo e
+ finora hanno fatto un buon lavoro. ❤️
+ pronouns-male: (lui)
+ creator-from-chung: 'Da Baltimore, Maryland'
+ link-1-casey-louise: p5.js Shaders guide
+ link-2-casey-louise: Glitch collection of p5.js shader examples
+ link-1-chung: View Chillin'
+ link-2-chung: Codice di Chillin' su GitHub
+ link-3-chung: Maggiorni informazioni sul Portfolio di Dae In Chung
+ project-a-1-1-chung: >-
+ Sono un graphic designer e membro della facoltà del Maryland Institute
+ College of Art, dove insegno principalmente programmazione (con p5.js e
+ Processing, ovviamente) e motion graphics.
+ project-a-1-2-chung: 'Uso '
+ project-a-1-3-chung: ' da un po 'di tempo ormai e quando è arrivato p5.js, ho iniziato a usarlo senza pensarci due volte perché era facile convertire il codice esistente di Processing e condividere progetti online.'
+ project-a-2-1-chung: >-
+ Quest'estate mi sono sfidato a realizzare poster tipografici con la
+ programmazione, e questo è uno dei poster che ho realizzato. Fino a poco
+ tempo fa non sapevo che avrei potuto utilizzare i dati del sensore di
+ movimento con p5.js. Stavo anche guardando
+ dan-shiffman-matterjs-tutorial: i video tutorial di Dan Shiffman sul matter.js
+ project-a-2-2-chung: >-
+ , al che ho pensato: perché non unire le due cose e mettere in pratica ciò
+ che sto imparando?
+ project-a-3-1-chung: >-
+ Ci sono molte cose che amo di p5.js come la community online e
+ l'accoglienza e la comprensione riservate ai principianti. Quello che
+ mi piace davvero in questo momento è il
+ project-a-3-2-chung: >-
+ , con cui non solo posso lavorare online per me stesso, ma anche condividere
+ rapidamente gli URL. Per questo progetto, in particolare, ho dovuto fare
+ molti test sul mio telefono ed è stato molto più semplice e veloce rispetto
+ ad utilizzare GitHub.
+ project-a-4-1-chung: >-
+ Ho avuto qualche difficoltà con la gestione di font, canale alfa e
+ profondità z nella modalità
+ project-a-4-2-chung: >-
+ . Non sono ancora completamente soddisfatto di tutte le mie decisioni. Ma in
+ generale, è stato utile cercare nel forum e non dimenticare di scomporre i
+ problemi in problemi più piccoli e iterare a poco a poco. Inoltre, ho avuto
+ problemi nel rendering dei file video direttamente da p5.js. La
+ registrazione dello schermo non era un'opzione a causa di cadute di
+ frequenza dei fotogrammi intermittenti (il mio laptop è piuttosto lento).
+ Dopo aver fatto qualche ricerca, ho deciso di imparare i fondamenti di
+ project-a-4-3-chung: ' e costruire un tool da solo.'
+ project-a-5-1-chung: >-
+ Come accennato in precedenza, se desiderate eseguire il rendering di frame e
+ file video dagli sketch p5.js, consultate il mio
+ project-a-5-2-chung: ' e fatemi sapere cosa ne pensate.'
+ creator-from-casey-louise: 'Da New York, New York'
+ project-a-1-1-casey-louise: >-
+ Casey: Sono uno studente presso l'ITP della New York University che si
+ interessa di computer grafica e spazi interattivi, fisici e digitali.
+ project-a-1-2-casey-louise: >-
+ Louise: Sono uno studentessa presso l'ITP della New York University che
+ è interessata alla computer graphics e agli spazi interattivi basati sulle
+ tecnologie dei sensori.
+ project-a-1-3-casey-louise: >-
+ Casey: Ho iniziato a studiare p5.js nel 2018 nel mio primo semestre presso
+ ITP, anche se mi dilettavo con
+ project-a-1-4-casey-louise: ' dal 2012. Sono stato introdotto a Processing dal mio amico Pedro mentre studiavo graphic design e mi ha fatto impazzire. L'idea di creare i miei strumenti per la creazione di grafica e arte interattiva ha suscitato il mio interesse, ma una volta che l'ho provato, sono rimasto entusiasta. Il primo progetto che ricordo è un occhio che ti seguiva nello schermo e si intristiva quando lo lasciavi da solo.'
+ project-a-1-5-casey-louise: >-
+ Louise: Inizialmente ho imparato p5.js per rendere un sito Web che stavo
+ creando più giocoso. Sono un programmatore C#, quindi per me è stato un buon
+ modo per entrare a contatto con JavaScript.
+ project-a-2-1-casey-louise: >-
+ Casey: Rimandavo l'apprendimento degli shader da molto tempo, ed ero
+ anche curioso di poterli usare in p5.js. Poi ho sentito parlare di una
+ sovvenzione per progetti open source, di storytelling e di risorse di
+ apprendimento all'ITP chiamata
+ project-a-2-2-casey-louise: >-
+ . Dato che non trovavo molto sulla documentazione di p5.js + shader, ho
+ deciso di capire come sono implementati in p5.js e creare una risorsa dove
+ gli altri potessero imparare. Quando ho parlato a Louise del progetto, è
+ stata immediatamente entusiasta di imparare e insegnare gli shader in p5.js.
+ È stata bravissima a garantire che il progetto diventasse una risorsa di
+ apprendimento e non solo una raccolta di esempi.
+ project-a-3-1-casey-louise: 'Casey: '
+ project-a-3-2-casey-louise: ' conta come funzionalità? Mi piace anche avere la possibilità di condividere i miei programmi sul Web in modo che le persone non debbano installare software speciali o venire a New York per vedere il mio lavoro.'
+ project-a-3-3-casey-louise: 'Louise: La mia funzionalità preferita è '
+ project-a-3-4-casey-louise: ' e '
+ project-a-3-5-casey-louise: ' per la trasformazione del sistema di coordinate per creare elementi visivi generativi.'
+ project-a-4-1-casey-louise: >-
+ Casey: L'inizio del progetto (capire come funzionano le cose) è
+ consistito nel raggiungere persone straordinarie, porre domande e chiedere
+ il permesso di utilizzare i loro esempi nel nostro progetto.
+ adam-ferris-repo-casey-louise: La repository GitHub di Adam Ferriss
+ project-a-4-2-casey-louise: ' ci ha davvero dato le fondamenta per capire come funzionano gli shader in p5.js e ci ha fornito un quadro di esempi accessibili su cui basarci. Per alcuni problemi specifici relativi a p5.js che stavamo riscontrando, abbiamo contattato '
+ project-a-4-3-casey-louise: ' e '
+ project-a-4-4-casey-louise: ' (che lavoravano sull''
+ webgl-casey-louise: implementazione WebGL in p5.js
+ project-a-4-5-casey-louise: '), e sono stati super disponibili.'
+ project-a-4-6-casey-louise: >-
+ Louise: La curva di apprendimento era piuttosto ripida per implementare
+ shader in p5. Fortunatamente, c'erano alcuni esempi ben documentati su
+ GitHub di Adam Ferriss. Il nostro obiettivo era farlo in modo che un
+ principiante potesse capire come implementarlo, quindi era sia una sfida
+ tecnica che una sfida nell'insegnamento del codice a estranei e
+ principianti. Qui abbiamo tratto ispirazione dal modo in cui è scritto il
+ openframeworks-book-casey-louise: openFrameworks book
+ project-a-4-7-casey-louise: >-
+ . Crediamo in un approccio del tipo "ehi, non è difficile e puoi farlo anche
+ tu".
+ project-a-5-1-casey-louise: Date un'occhiata all'
+ project-a-5-2-casey-louise: ' per esplorare i fantastici progetti sovvenzionati dei nostri colleghi'
+ pronouns-nonbinary: (loro)
+ creator-from-moon: 'Da Athens, Georgia'
+ posters-by: Posters By
+ project-a-1-1-moon: >-
+ Moon: Sono un graphic designer, artista visivo ed insegnante di design.
+ Quest'estate ho tenuto un corso di graphic design nel programma Cortona
+ dell'Università della Georgia in Italia, introducendo alcune basi di
+ p5.js. Questo autunno, ho intenzione di insegnare e studiare piattaforme
+ digitali presso UGA.
+ project-a-1-2-moon: 'Il mio ex collega, '
+ project-a-1-3-moon: ', mi ha invitato alla '
+ project-a-1-4-moon: ' a '
+ pcd-la-moon: Los Angeles nel Gennaio 2019
+ project-a-1-5-moon: >-
+ . Mi hanno aiutato con gli strumenti e le logiche di p5.js. È stata
+ un'ottima esperienza di insegnamento e apprendimento.
+ project-a-2-1-moon: 'Abbiamo seguito tutorial di base, '
+ codetrain-moon: i video di Daniel su YouTube
+ project-a-2-2-moon: ', e '
+ p5-reference-moon: i Riferimenti sul sito di p5.js
+ project-a-2-3-moon: .
+ project-a-3-1-moon: 'La mia funzione preferita è legata a '
+ project-a-3-2-moon: ' e '
+ project-a-3-3-moon: ': '
+ project-a-3-4-moon: >-
+ . Sono stato in grado di utilizzare e insegnare questo strumento per
+ visualizzare varie idee sul tempo in movimento.
+ project-a-4-1-moon: >-
+ È stato difficile per me, come principiante, comprendere la struttura
+ generale di p5.js e come funziona il codice in generale. Ho dovuto ripetere
+ un paio di volte le basi di p5.js, e ho poi disegnato un grafico per
+ memorizzare e insegnare come ho compreso la struttura e il codice di p5.js
+ con forti restrizioni che ho impostato. È stata un'ottima esperienza di
+ insegnamento e apprendimento.
+ project-a-5-1-moon: 'Date un'occhiata alla '
+ project-a-5-2-moon: ' a Milano, Italy.'
+
diff --git a/src/data/ko.yml b/src/data/ko.yml
index 457a5aa6f6..a33f5fac32 100644
--- a/src/data/ko.yml
+++ b/src/data/ko.yml
@@ -1,1061 +1,1533 @@
-Skip-To-Content: "건너뛰기"
-Language-Settings: "언어 설정"
-Sidebar-Title: "사이트 둘러보기"
-Home: "홈"
-Editor: "에디터"
-Download: "다운로드"
-Donate: "후원하기"
-Start: "시작하기"
-Reference: "레퍼런스"
-Libraries: "라이브러리"
-Learn: "배우기"
-Examples: "예제"
-Books: "출판물"
-Community: "커뮤니티"
-Contribute: "기여하기"
-Forum: "포럼"
-Showcase: "쇼케이스"
-
-footerxh1: "크레딧"
-footer1: "p5.js는 로렌 맥카시 "
-footer2: " 가 창안하고 협력자 커뮤니티와 함께 개발하였습니다. 지원: 프로세싱 재단 "
-footer3: "과 "
-footer4: " 아이덴티티 및 그래픽 디자인: "
-
-tagline1: "프로세싱의 즐거움에 자바스크립트의 매력을 곱하다*"
-tagline2: "프로세싱의 간편함에 자바스크립트의 유연성을 곱하다*"
-tagline3: "프로세싱의 직관성에 자바스크립트의 강력함을 곱하다*"
-tagline4: "프로세싱의 창조성에 자바스크립트의 역동성을 곱하다*"
-tagline5: "프로세싱 커뮤니티에 자바스크립트 커뮤니티를 곱하다*"
-tagline6: "프로세싱의 강력함에 자바스크립트의 범용성을 곱하다*"
-tagline7: "p5.js 커뮤니티는 Black Lives Matter와 연대합니다."
-
+Skip-To-Content: 건너뛰기
+Language-Settings: 언어 설정
+Sidebar-Title: 사이트 둘러보기
+Home: 홈
+Editor: 에디터
+Download: 다운로드
+Donate: 후원하기
+Start: 시작하기
+Reference: 레퍼런스
+Libraries: 라이브러리
+Learn: 배우기
+Examples: 예제
+Books: 출판물
+Community: 커뮤니티
+Contribute: 기여하기
+Forum: 포럼
+Showcase: 쇼케이스
+footerxh1: 스케치 크레딧
+footer1: 'p5.js는 현재 모이라 터너 '
+footer2: ' 가 리드하며, 로렌 맥카시 '
+footer3: ' 가 창안하고 협력자 커뮤니티와 함께 개발하였습니다. 지원: 프로세싱 재단 '
+footer4: '과 '
+footer5: ' 아이덴티티 및 그래픽 디자인: '
+tagline1: 프로세싱의 즐거움에 자바스크립트의 매력을 곱하다*
+tagline2: 프로세싱의 간편함에 자바스크립트의 유연성을 곱하다*
+tagline3: 프로세싱의 직관성에 자바스크립트의 강력함을 곱하다*
+tagline4: 프로세싱의 창조성에 자바스크립트의 역동성을 곱하다*
+tagline5: 프로세싱 커뮤니티에 자바스크립트 커뮤니티를 곱하다*
+tagline6: 프로세싱의 강력함에 자바스크립트의 범용성을 곱하다*
+tagline7: p5.js 커뮤니티는 Black Lives Matter와 연대합니다.
home:
- start-creating: "p5 에디터로 프로젝트 시작하기"
- p1xh1: "안녕하세요!"
- p1x1: "p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고 포용적인 언어를 지향합니다! p5.js는 무료 오픈 소스로 제공됩니다. 소프트웨어와 그 학습 도구가 모두에게 열려있어야 된다고 믿기 때문입니다."
- p1x2: "p5.js는 마치 스케치북과도 같으며 다양한 드로잉 기능을 제공합니다. p5.js를 이용하면 인터넷 브라우저 전체를 스케치북 삼아 그릴 수 있을 뿐 아니라, 텍스트, 입력, 비디오, 웹캠, 그리고 사운드 등을 비롯한 각종 HTML 요소를 사용할 수 있습니다."
- p2xh2: "커뮤니티"
- p2x1: "우리는 다양한 성 정체성, 젠더 표현, 성적 지향, 인종, 민족, 언어, 사회, 규모, 능력, 계급, 종교, 문화, 하위 문화, 정치 성향, 나이, 기술적 숙련도, 직업 등의 배경을 가진 사람들의 공동체이자 연대입니다. 모든 사람이 우리 커뮤니티에 시간과 에너지를 쓸 수 있는 게 아닌 만큼, 우리는 여러분의 참여를 환영하고 독려하며, 또 접근성을 향상하기 위해 늘 노력합니다. 우리 모두는 언제나 배우는 자들입니다."
- p2x2: "p5.js는 프로세싱 "
- p2x3: " 을 오늘날의 웹에 맞게 해석한 것입니다. p5의 행사와 모임은 프로세싱 재단 "
- p2x4: " 의 지원을 받아 개최됩니다."
- p2x5: ""
- p2x6: "커뮤니티"
- p2x7: "에 대해 더 알아보세요."
-
- p3xh2: "시작하기"
- p3xp1: "온라인 에디터인 "
- p3xp2: "에서 나만의 첫 스케치를 그려보세요! "
- p3xp3: "시작하기"
- p3xp4: "에서 p5 스케치에 대해 알아보고, "
- p3xp5: "레퍼런스"
- p3xp6: "로 더욱 많은 기능을 확인해보세요."
-
- p4xh2: "기여하기"
- p4xp1: "p5.js와 커뮤니티에 기여할 수 있는 방법은 다양합니다:"
- p4xp2: "기여 방법"
- p4xp3: "나의 창작 프로젝트 공유하기"
- p4xp4: "p5 워크숍 또는 수업 운영하기"
- p4xp5: "행사 또는 모임 주관하기"
- p4xp6: "코딩 개발로 기여하기"
-
- sketch_credits: "스케치 크레딧"
- sketch_info: "훈민정음2020, 김성현"
-
+ start-creating: p5 에디터로 프로젝트 시작하기
+ p1xh1: 안녕하세요!
+ p1x1: >-
+ p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고
+ 포용적인 언어를 지향합니다! p5.js는 무료 오픈 소스로 제공됩니다. 소프트웨어와 그 학습 도구가 모두에게 열려있어야 된다고 믿기
+ 때문입니다.
+ p1x2: >-
+ p5.js는 마치 스케치북과도 같으며 다양한 드로잉 기능을 제공합니다. p5.js를 이용하면 인터넷 브라우저 전체를 스케치북 삼아 그릴
+ 수 있을 뿐 아니라, 텍스트, 입력, 비디오, 웹캠, 그리고 사운드 등을 비롯한 각종 HTML 요소를 사용할 수 있습니다.
+ p2xh2: 커뮤니티
+ p2x1: >-
+ 우리는 다양한 성 정체성, 젠더 표현, 성적 지향, 인종, 민족, 언어, 사회, 규모, 능력, 계급, 종교, 문화, 하위 문화, 정치
+ 성향, 나이, 기술적 숙련도, 직업 등의 배경을 가진 사람들의 공동체이자 연대입니다. 모든 사람이 우리 커뮤니티에 시간과 에너지를 쓸 수
+ 있는 게 아닌 만큼, 우리는 여러분의 참여를 환영하고 독려하며, 또 접근성을 향상하기 위해 늘 노력합니다. 우리 모두는 언제나 배우는
+ 자들입니다.
+ p2x2: 'p5.js는 프로세싱 '
+ p2x3: ' 을 오늘날의 웹에 맞게 해석한 것입니다. p5의 행사와 모임은 프로세싱 재단 '
+ p2x4: ' 의 지원을 받아 개최됩니다.'
+ p2x5: ''
+ p2x6: 커뮤니티
+ p2x7: 에 대해 더 알아보세요.
+ p3xh2: 시작하기
+ p3xp1: '온라인 에디터인 '
+ p3xp2: '에서 나만의 첫 스케치를 그려보세요! '
+ p3xp3: 시작하기
+ p3xp4: '에서 p5 스케치에 대해 알아보고, '
+ p3xp5: 레퍼런스
+ p3xp6: 로 더욱 많은 기능을 확인해보세요.
+ p4xh2: 기여하기
+ p4xp1: 'p5.js와 커뮤니티에 기여할 수 있는 방법은 다양합니다:'
+ p4xp2: 기여 방법
+ p4xp3: 나의 창작 프로젝트 공유하기
+ p4xp4: p5 워크숍 또는 수업 운영하기
+ p4xp5: 행사 또는 모임 주관하기
+ p4xp6: 코딩 개발로 기여하기
+ sketch_credits: 스케치 크레딧
+ sketch_info: '훈민정음2020, 김성현'
copyright:
- copyright-title: "저작권"
- copyright1: "p5.js 라이브러리는 무료 소프트웨어입니다."
- copyright2: " 자유 소프트웨어 재단(Free Software Foundation)의 조항(version 2.1.)에 따라 재배포 및 수정할 수 있습니다."
- copyright3: "p5.js의 레퍼런스는 "
- copyright4: " 라이선스에 속하며, 크레딧 인용시 비영리 목적을 위해 재사용할 수 있습니다."
-
+ copyright-title: 저작권
+ copyright1: p5.js 라이브러리는 무료 소프트웨어입니다.
+ copyright2: ' 자유 소프트웨어 재단(Free Software Foundation)의 조항(version 2.1.)에 따라 재배포 및 수정할 수 있습니다.'
+ copyright3: 'p5.js의 레퍼런스는 '
+ copyright4: ' 라이선스에 속하며, 크레딧 인용시 비영리 목적을 위해 재사용할 수 있습니다.'
get started:
- get-started-title: "시작하기"
- get-started1: "p5.js 프로젝트를 에디터에 설정하고 나의 첫 스케치를 만드는 방법을 소개합니다."
- get-started2: "가장 쉬운 방법은 인터넷에서"
- get-started3: "p5.js 웹에디터"
- get-started4: "를 바로 사용하는 것입니다. 웹에디터를 켜고 "
- get-started5: "나의 첫 스케치"
- get-started6: "로 내려가 코드 작성법을 확인하세요. p5.js를 데스크탑 에디터에서 사용하는 방법은 여기서 확인하세요:"
- get-started7: "데스크탑에 다운받기"
- settingUp-title: "데스크탑 에디터에 p5.js 설정하기"
- download-title: "다운로드 & 파일 설정"
- hosted-title: "호스팅된 p5.js 라이브러리 사용하기"
- download1: ""
- download2: "p5.js complete"
- download3: "를 다운받아 시작하는 것이 가장 쉽고 간편한 방법입니다."
- download4: "그 중 index.html 파일에는 p5.js 링크가 적혀있습니다. 불러오는 시간을 단축하려면, p5.js 링크를 그 간략 버전인 p5.min.js로 아래와 같이 변경하면 됩니다. "
- download5: "p5.js 파일의 온라인 링크를 직접 입력하는 방법도 있습니다. p5.js의 모든 버전은 CDN(Content Delivery Network)에 저장되어 있으며, 버전 히스토리는 여기서 확인할 수 있습니다: "
- download6: ". 링크를 다음과 같이 변경해보세요:"
- download7: "아래는 HTML 페이지 샘플입니다:"
- environment-title: "개발 환경"
- environment1: "여러분이 사용하는 그 어떠한 "
- environmentlink: "http://en.wikipedia.org/wiki/Source_code_editor"
- environment2: "코드 에디터"
- environment3: "에서든 p5.js를 쓸 수 있습니다. 아래에 "
- environment4: " 에디터를 설정하는 방법이 있습니다. 추천하는 또다른 에디터: "
- environment5: ", "
- environment6: " p5 웹에디터는 스크린 리더 기능을 제공합니다. 웹에디터를 사용하지 않는 스크린 리더라면 다음의 데스크탑 에디터를 고려해보세요: "
- environment7: " 나 "
- environment8: "먼저, Sublime Text 2 에디터 프로그램을 실행하세요. File 메뉴를 열고 Open을 클릭한 후, html 파일과 js 파일이 위치한 폴더를 선택하세요. 해당 폴더의 이름과 더불어 포함된 파일 리스트가 좌측 사이드바에 보일 것입니다."
- environment9: "sketch.js 파일을 선택하면, 우측 편집 영역에서 파일이 열립니다. "
- environment10: "Sublime 에디터에서 p5 템플릿 코드를 편집 중인 화면"
- environment11: "index.html 파일을 브라우저에서 열어볼까요? 파일 관리 시스템에서 index.html 파일을 더블 클릭하거나 브라우저 주소창에 다음을 입력하세요:"
- environment12: "file:///나의/html/경로"
- environment13: " "
- your-first-sketch-title: "나의 첫 스케치"
- your-first-sketch-intro1: "기존 프로세싱 사용자라면 다음의 페이지를 읽어보세요: "
- your-first-sketch-intro2: "https://github.com/processing/p5.js/wiki/Processing-transition"
- your-first-sketch-intro3: "프로세싱 스케치를 p5.js로 변환하기 튜토리얼"
- your-first-sketch-intro4: " 에디터에 다음을 입력하세요:"
- your-first-sketch1: "After "
- your-first-sketch2: "위의 코드를 설명하자면 다음과 같습니다: \"좌측 상단 모서리로부터 아래로 50px, 오른쪽으로 50px 떨어진 점을 중심으로 타원을 그린다. 타원의 너비와 높이는 모두 80px로 한다.\" "
- your-first-sketch3: "스케치를 저장한 뒤 브라우저를 새로고침하면, 입력한 코드에 문제가 없는 한, 다음과 같은 화면을 볼 수 있습니다:"
- your-first-sketch4: "주의: 스크린 리더를 사용하는 경우, p5 웹에디터에서 접근성 모드 출력(Accessible Outputs)을 활성화해야 합니다. 별도의 에디터를 사용하는 경우, 접근성 라이브러리를 html 파일에 추가해야 합니다. 자세한 설명은 다음 링크를 참조하세요: "
- your-first-sketch5: "스크린 리더에서 p5를 사용하는 방법"
- your-first-sketch6: ""
- your-first-sketch7: "접근성 라이브러리란?"
- your-first-sketch8: "캔버스에 폭과 높이가 50인 타원이 x 80, y 80의 위치에 그려져있다"
- your-first-sketch9: "코드를 잘못 입력할 경우 화면에 아무것도 나타나지 않을 수 있습니다. 예제 코드를 정확히 따라 썼는지 확인해 보세요. 숫자는 (괄호) 안에 포함하고, 각 숫자는 쉼표(,)로 구분해야 하며, 각 라인은 세미 콜론(;)으로 끝나야 합니다"
- your-first-sketch10: "프로그래밍 언어를 처음 접할 때 겪는 어려움 중 하나는 바로 까다로운 문법입니다. 브라우저는 우리가 표현하려는 게 무엇인지 스스로 파악할 정도로 똑똑하지 않으며, 각 요소의 위치와 구두법에 매우 민감하답니다. 처음에는 이런 문법이 낯설게 느껴지겠지만, 연습을 통해 점차 익숙해질 것입니다. 몇몇 브라우저는 코드 내 오류를 확인할 수 있는 자바 스크립트 '콘솔'을 제공합니다. 크롬(Chrome)의 경우, 보기 > 개발자 > 자바 스크립트 콘솔을 클릭하여 '콘솔'을 활성화할 수 있습니다."
- your-first-sketch11: "이제 한층 더 재밌는 스케치를 만들어볼까요! 지난 예제의 코드를 에디터에서 삭제하고 아래의 코드를 입력해 보세요:"
- your-first-sketch12: "이제 프로그램은 폭 640px, 높이 480px의 캔버스를 생성하고, 마우스 커서 위치에서 흰 원을 그리기 시작합니다. 마우스 버튼을 누르고 있을 때는 원의 색이 검정색으로 바뀝니다. 마우스 위치에 대한 설명은 나중에 더 하기로 하고, 지금은 마우스를 움직이고 클릭하며 스케치의 변화를 살펴보세요."
- your-first-sketch13: "캔버스 위의 마우스 궤적을 따라 여러 개의 원이 그려집니다:"
- your-first-sketch14: "캔버스 위의 마우스 궤적을 따라 여러 개의 원이 그려집니다."
- first-sketch-heading1: "타원과 코드 스니펫"
- first-sketch-heading2: "스크린리더 사용자를 위한 참고 사항"
- first-sketch-heading3: "인터랙션과 코드 스니펫"
- what-next-title: "다음 단계"
- learn1: "더 많은 정보는 "
- learn2: "배우기"
- learn3: "와 "
- learn4: "예제"
- learn5: "에서 확인할 수 있습니다."
- learn6: "또, "
- learn7: "코딩 트레인(The Coding Train)"
- learn8: "과 "
- learn9: "Kadenze"
- learn10: "의 비디오 튜토리얼을 참고하세요."
- reference1: "p5.js의 모든 함수 및 메소드, 그 외 문서는 "
- reference2: "레퍼런스"
- reference3: "에서 확인하세요."
- learn11: "스크린 리더와 함께 p5를 사용하고 싶다면 다음을 확인하세요: "
- learn12: "스크린 리더 기반 p5 튜토리얼"
- processing-transition1: "프로세싱을 p5.js로 전환하는 방법과 둘 간의 차이점이 궁금하다면, "
- processing-transition2: "https://github.com/processing/p5.js/wiki/Processing-transition"
- processing-transition3: "프로세싱 스케치를 p5.js로 변환하기 튜토리얼"
- processing-transition4: "을 읽어보세요."
- book1: "본 튜토리얼의 일부는 로렌 맥카시(Lauren McCarthy), 캐시 리스(Casey Reas), 벤 프라이(Ben Fry), 오라일리(O'Reilly) 저 Getting Started with p5.js 에서 발췌하였습니다. / Make 2015. Copyright "
-
+ get-started-title: 시작하기
+ get-started1: p5.js 프로젝트를 에디터에 설정하고 나의 첫 스케치를 만드는 방법을 소개합니다.
+ get-started2: 가장 쉬운 방법은 인터넷에서
+ get-started3: p5.js 웹에디터
+ get-started4: '를 바로 사용하는 것입니다. 웹에디터를 켜고 '
+ get-started5: 나의 첫 스케치
+ get-started6: '로 내려가 코드 작성법을 확인하세요. p5.js를 데스크탑 에디터에서 사용하는 방법은 여기서 확인하세요:'
+ get-started7: 데스크탑에 다운받기
+ get-started-button: Copy
+ settingUp-title: 데스크탑 에디터에 p5.js 설정하기
+ download-title: 다운로드 & 파일 설정
+ hosted-title: 호스팅된 p5.js 라이브러리 사용하기
+ download1: ''
+ download2: p5.js complete
+ download3: 파일을 다운받아 시작하는 것이 가장 쉽고 간편합니다.
+ download8: '다운로드 후에는 로컬 서버를 설정해야 합니다. '
+ download9: 로컬 서버 설정 방법
+ download10: '을 참고하세요. 다운로드 폴더를 사용하여 인터넷 브라우저에서 다음과같이 로컬 서버를 실행하세요. '
+ download11: 'http://localhost:{당신의-포트(port)-넘버}/empty-example'
+ download4: >-
+ 다운로드 파일 중, index.html 파일에는 p5.js 링크가 적혀있습니다. 로딩 시간을 단축하려면 해당 p5.js 링크를 그 간략
+ 버전인 p5.min.js로 아래와 같이 변경하면 됩니다.
+ download5: >-
+ p5.js 파일의 온라인 링크를 직접 입력하는 방법도 있습니다. p5.js의 모든 버전은 CDN(Content Delivery
+ Network)에 저장되어 있으며, 버전 히스토리는 여기서 확인할 수 있습니다:
+ download6: '. 링크를 다음과 같이 변경해보세요:'
+ download7: '아래는 HTML 페이지 샘플입니다:'
+ environment-title: 개발 환경
+ environment1: '여러분이 사용하는 그 어떠한 '
+ environmentlink: 'http://en.wikipedia.org/wiki/Source_code_editor'
+ environment2: 코드 에디터
+ environment3: '에서든 p5.js를 쓸 수 있습니다. 아래에 '
+ environment4: ' 에디터를 설정하는 방법이 있습니다. 추천하는 또다른 에디터: '
+ environment5: ', '
+ environment6: ' p5 웹에디터는 스크린 리더 기능을 제공합니다. 웹에디터를 사용하지 않는 스크린 리더라면 다음의 데스크탑 에디터를 고려해보세요: '
+ environment7: ' 나 '
+ environment8: >-
+ 먼저, Sublime Text 2 에디터 프로그램을 실행하세요. File 메뉴를 열고 Open을 클릭한 후, html 파일과 js 파일이
+ 위치한 폴더를 선택하세요. 해당 폴더의 이름과 더불어 포함된 파일 리스트가 좌측 사이드바에 보일 것입니다.
+ environment9: 'sketch.js 파일을 선택하면, 우측 편집 영역에서 파일이 열립니다. '
+ environment10: Sublime 에디터에서 p5 템플릿 코드를 편집 중인 화면
+ environment11: >-
+ index.html 파일을 브라우저에서 열어볼까요? 파일 관리 시스템에서 index.html 파일을 더블 클릭하거나 브라우저 주소창에
+ 다음을 입력하세요:
+ environment12: 'file:///나의/html/경로'
+ environment14: ' (또는, 로컬 서버 사용시, '
+ environment15: 'http://localhost:{당신의-포트(port)-넘버}/empty-example'
+ environment16: )
+ environment13: ' '
+ your-first-sketch-title: 나의 첫 스케치
+ your-first-sketch-intro1: '기존 프로세싱 사용자라면 다음의 페이지를 읽어보세요: '
+ your-first-sketch-intro2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ your-first-sketch-intro3: 프로세싱 스케치를 p5.js로 변환하기 튜토리얼
+ your-first-sketch-intro4: ' 에디터에 다음을 입력하세요:'
+ your-first-sketch1: 'After '
+ your-first-sketch2: >-
+ 위의 코드를 설명하자면 다음과 같습니다: "좌측 상단 모서리로부터 아래로 50px, 오른쪽으로 50px 떨어진 점을 중심으로 타원을
+ 그린다. 타원의 너비와 높이는 모두 80px로 한다."
+ your-first-sketch3: '스케치를 저장한 뒤 브라우저를 새로고침하면, 입력한 코드에 문제가 없는 한, 다음과 같은 화면을 볼 수 있습니다:'
+ your-first-sketch4: >-
+ 주의: 스크린 리더를 사용하는 경우, p5 웹에디터에서 접근성 모드 출력(Accessible Outputs)을 활성화해야 합니다. 별도의
+ 에디터를 사용하는 경우, 접근성 라이브러리를 html 파일에 추가해야 합니다. 자세한 설명은 다음 링크를 참조하세요:
+ your-first-sketch5: 스크린 리더에서 p5를 사용하는 방법
+ your-first-sketch6: ''
+ your-first-sketch7: 접근성 라이브러리란?
+ your-first-sketch8: '캔버스에 폭과 높이가 50인 타원이 x 80, y 80의 위치에 그려져있다'
+ your-first-sketch9: >-
+ 코드를 잘못 입력할 경우 화면에 아무것도 나타나지 않을 수 있습니다. 예제 코드를 정확히 따라 썼는지 확인해 보세요. 숫자는 (괄호)
+ 안에 포함하고, 각 숫자는 쉼표(,)로 구분해야 하며, 각 라인은 세미 콜론(;)으로 끝나야 합니다
+ your-first-sketch10: >-
+ 프로그래밍 언어를 처음 접할 때 겪는 어려움 중 하나는 바로 까다로운 문법입니다. 브라우저는 우리가 표현하려는 게 무엇인지 스스로 파악할
+ 정도로 똑똑하지 않으며, 각 요소의 위치와 구두법에 매우 민감하답니다. 처음에는 이런 문법이 낯설게 느껴지겠지만, 연습을 통해 점차
+ 익숙해질 것입니다. 몇몇 브라우저는 코드 내 오류를 확인할 수 있는 자바 스크립트 '콘솔'을 제공합니다. 크롬(Chrome)의 경우,
+ 보기 > 개발자 > 자바 스크립트 콘솔을 클릭하여 '콘솔'을 활성화할 수 있습니다.
+ your-first-sketch11: '이제 한층 더 재밌는 스케치를 만들어볼까요! 지난 예제의 코드를 에디터에서 삭제하고 아래의 코드를 입력해 보세요:'
+ your-first-sketch12: >-
+ 이제 프로그램은 폭 640px, 높이 480px의 캔버스를 생성하고, 마우스 커서 위치에서 흰 원을 그리기 시작합니다. 마우스 버튼을
+ 누르고 있을 때는 원의 색이 검정색으로 바뀝니다. 마우스 위치에 대한 설명은 나중에 더 하기로 하고, 지금은 마우스를 움직이고 클릭하며
+ 스케치의 변화를 살펴보세요.
+ your-first-sketch13: '캔버스 위의 마우스 궤적을 따라 여러 개의 원이 그려집니다:'
+ your-first-sketch14: 캔버스 위의 마우스 궤적을 따라 여러 개의 원이 그려집니다.
+ first-sketch-heading1: 타원과 코드 스니펫
+ first-sketch-heading2: 스크린리더 사용자를 위한 참고 사항
+ first-sketch-heading3: 인터랙션과 코드 스니펫
+ what-next-title: 다음 단계
+ learn1: '더 많은 정보는 '
+ learn2: 배우기
+ learn3: '와 '
+ learn4: 예제
+ learn5: 에서 확인할 수 있습니다.
+ learn6: '또, '
+ learn7: 코딩 트레인(The Coding Train)
+ learn8: '과 '
+ learn9: Kadenze
+ learn10: 의 비디오 튜토리얼을 참고하세요.
+ reference1: 'p5.js의 모든 함수 및 메소드, 그 외 문서는 '
+ reference2: 레퍼런스
+ reference3: 에서 확인하세요.
+ learn11: '스크린 리더와 함께 p5를 사용하고 싶다면 다음을 확인하세요: '
+ learn12: 스크린 리더 기반 p5 튜토리얼
+ processing-transition1: '프로세싱을 p5.js로 전환하는 방법과 둘 간의 차이점이 궁금하다면, '
+ processing-transition2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ processing-transition3: 프로세싱 스케치를 p5.js로 변환하기 튜토리얼
+ processing-transition4: 을 읽어보세요.
+ book1: >-
+ 본 튜토리얼의 일부는 로렌 맥카시(Lauren McCarthy), 캐시 리스(Casey Reas), 벤 프라이(Ben Fry),
+ 오라일리(O'Reilly) 저 Getting Started with p5.js 에서 발췌하였습니다. / Make 2015.
+ Copyright
download:
- Download: "다운로드"
- download-intro: "안녕하세요! 이 페이지는 온라인에서 바로 사용가능한 웹에디터와 각종 다운로드 링크를 소개합니다. 입문자에게 꼭 필요한 자료부터 숙련된 개발자를 위한 리소스 모두를 포괄합니다."
- editor-title: "에디터"
- p5.js-editor: "p5.js 에디터"
- p5.js-editor-intro: "아래의 링크는 온라인 p5.js 에디터로 연결됩니다."
- editor-includes: "별도 설치가 필요없는 p5.js 웹에디터로 지금 바로 코딩을 시작해보세요!"
- complete-library-title: "모든 라이브러리"
- complete-library-intro1: "아래의 링크는 p5.js 라이브러리 파일, p5.sound, 그리고 예제 프로젝트를 포함합니다. "
- complete-library-intro2: "시작하기"
- complete-library-intro3: "에서 p5.js 프로젝트 설정 방법을 알아보세요."
- p5.js-complete: "모든 라이브러리"
- includes-1: "포함 사항:"
- includes-2: "p5.js, p5.sound.js, 예시 프로젝트 1개"
- includes-3: "Version "
- single-files-title: "개별 라이브러리"
- single-files-intro: "개별 라이브러리 파일입니다. "
- single-file: "개별 라이브러리: "
- p5.js-uncompressed: "개별 파일"
- compressed: "압축 버전"
- link: "링크: "
- statically-hosted-file: "정적 호스팅 파일"
- etc-title: "Github 리소스"
- older-releases: "이전 버전 (구버전 및 업데이트 기록)"
- github-repository: "코드 저장소 (GitHub)"
- report-bugs: "이슈, 버그, 에러 보고하기"
- supported-browsers: "지원 브라우저 "
-
- support-title: "p5.js를 후원해주세요!"
- support-options: "후원 방법"
- support-1: "p5.js는 무료 오픈 소스 소프트웨어입니다. p5.js는 다양성을 향해 늘 열려있고 이를 포용하는 커뮤니티를 지향합니다. "
- support-2: "프로세싱 재단 멤버십 가입"
- support-3: "을 통해 개인, 스튜디오, 또는 교육 기관 단위로 후원하거나, 또는 "
- support-4: "멤버십 가입 생략"
- support-5: " 후 후원할 수 있습니다."
- support-6: "개인"
- support-7: "$25"
- support-8: "스튜디오"
- support-9: "$250"
- support-10: "교육 기관"
- support-11: "$5/학생1인 또는 $500"
- support-12: "여러분의 멤버십 후원금은 소프트웨어(p5.js, Processing, Processing.py, Processing for Android Processing for ARM devices)와 코딩 예제 및 튜토리얼 등의 교육 자료 개발, "
- support-13: "펠로우십"
- support-14: ", 그리고 "
- support-15: "커뮤니티 행사"
- support-16: "를 지원하는 데에 사용됩니다. 여러분의 도움이 필요합니다!"
- support-17: "미국 피츠버그 CMU STUDIO for Creative Inquiry에서 진행된 p5.js 공헌자 컨퍼런스 (이미지 저작권: 최태윤)"
- support-18: "프로세싱 재단 펠로우 Saskia Freeke이 런던에서 주관한 Liberation x Processing workshops (이미지 저작권: Code Liberation Foundation)"
- support-19: "SPFC와 함께한 Learning to Teach, Teaching to Learn 컨퍼런스 (이미지 저작권: Kira Simon-Kennedy)"
- support-20: "프로세싱 재단 펠로우 Cassie Tarakajian가 Code Art Miami에서 진행한 워크숍 (이미지 저작권: Christian Arévalo Photography)"
- support-21: "Signing Coders p5.js workshop에서의 최태윤과 미국 수어(ASL) 해설자 (이미지 저작권: 최태윤)"
- support-22: "구글 썸머 오브 코드(Google Summer of Code) 킥오프 행사 (이미지 저작권: 최태윤)"
- support-23: "프로세싱 재단 펠로우 Cassie Tarakajian가 Code Art Miami에서 진행한 워크숍 (이미지 저작권: Christian Arévalo Photography)"
- support-24: "최태윤의 수어 기반 p5.js workshop에서 진행을 돕는 Luisa Pereira와 송예슬 (이미지 저작권: 최태윤)"
- support-25: "미국 피츠버그 CMU STUDIO for Creative Inquiry에서 진행된 p5.js 공헌자 컨퍼런스 (이미지 저작권: 최태윤)"
- support-26: "프로세싱 재단 펠로우 Digital Citizens Lab가 International Center of Photography에서 주최한 STEM 교육 패널 (이미지 저작권: International Center of Photography)"
- support-27: "칠레 산티아고에서 Aarón Montoya-Moraga가 진행한 p5.js workshop (이미지 저작권: Aarón Montoya-Moraga.)"
- support-28: "최태윤의 수어 기반 p5.js workshop에서 진행을 돕는 Claire Kearney-Volpe (이미지 저작권: 최태윤)"
- support-29: "프로세싱 재단 펠로우 DIY Girls가 미국 로스 엔젤레스(Los Angeles)에서 진행한 크리에이티브 코딩 프로그램 (이미지 저작권: DIY Girls)"
- support-30: "프로세싱 재단 펠로우 Digital Citizens Lab"
- support-31: "UCLA DMA와 NYU ITP 간의 동서-해안 p5.js 모임"
- support-32: "프로세싱 재단"
- support-33: "은 10여년 간의 프로세싱 소프트웨어(Processing Software) 개발 활동을 거쳐 2012년에 설립되었습니다. 프로세싱 재단의 사명은 시각 예술계에서의 소프트웨어 리터러시 및 기술 관련 분야에서의 시각적 리터러시를 증진하고, 나아가 이 두 분야에 대한 보다 많은 사람들의 접근성을 향상하는 데에 있습니다. 우리는 다양한 이해 관계와 배경을 가진 사람들, 특히 코딩 학습 툴이나 자원에 대한 접근성이 없는 이들의 크리에이티브 코딩 교육을 돕는 것을 목표로 삼습니다."
- support-17-alt: ""
- support-18-alt: ""
- support-19-alt: ""
- support-20-alt: ""
- support-21-alt: ""
- support-22-alt: ""
- support-23-alt: ""
- support-24-alt: ""
- support-25-alt: ""
- support-26-alt: ""
- support-27-alt: ""
- support-28-alt: ""
- support-29-alt: ""
- support-30-alt: ""
- support-31-alt: ""
-
+ Download: 다운로드
+ download-intro: >-
+ 안녕하세요! 이 페이지는 온라인에서 바로 사용가능한 웹에디터와 각종 다운로드 링크를 소개합니다. 입문자에게 꼭 필요한 자료부터 숙련된
+ 개발자를 위한 리소스 모두를 포괄합니다.
+ editor-title: 에디터
+ p5.js-editor: p5.js 에디터
+ p5.js-editor-intro: 아래의 링크는 온라인 p5.js 에디터로 연결됩니다.
+ editor-includes: 별도 설치가 필요없는 p5.js 웹에디터로 지금 바로 코딩을 시작해보세요!
+ complete-library-title: 모든 라이브러리
+ complete-library-intro1: '아래의 링크는 p5.js 라이브러리 파일, p5.sound, 그리고 예제 프로젝트를 포함합니다. '
+ complete-library-intro2: 시작하기
+ complete-library-intro3: 에서 p5.js 프로젝트 설정 방법을 알아보세요.
+ p5.js-complete: 모든 라이브러리
+ includes-1: '포함 사항:'
+ includes-2: 'p5.js, p5.sound.js, 예시 프로젝트 1개'
+ includes-3: 'Version '
+ single-files-title: 개별 라이브러리
+ single-files-intro: '개별 라이브러리 파일입니다. '
+ single-file: '개별 라이브러리: '
+ p5.js-uncompressed: 개별 파일
+ compressed: 압축 버전
+ link: '링크: '
+ statically-hosted-file: 정적 호스팅 파일
+ etc-title: Github 리소스
+ older-releases: 이전 버전 (구버전 및 업데이트 기록)
+ github-repository: 코드 저장소 (GitHub)
+ report-bugs: '이슈, 버그, 에러 보고하기'
+ supported-browsers: '지원 브라우저 '
+ support-title: p5.js를 후원해주세요!
+ support-options: 후원 방법
+ support-1: >-
+ 여러분의 도움이 필요합니다! p5.js는 무상의 오픈소스 소프트웨어입니다. 우리는 누구에게나 열려있고 포용적인 커뮤니티를 지향하며,
+ 여러분도 p5.js를 지원하는 프로세싱 재단(
+ support-2: >-
+ )에 후원을 통해 이에 동참할 수 있습니다. 여러분의 소중한 후원금은 p5.js 소프트웨어 개발과 더불어 코드 예제 및 튜토리얼을 비롯한
+ 교육 자료 제작에 쓰입니다. 또한, 다음과 같은 커뮤니티 활동을 위해서도 쓰입니다 :
+ support-3: 펠로우십
+ support-4: ', '
+ support-5: 커뮤니티 행사.
+ support-17: '미국 피츠버그 CMU STUDIO for Creative Inquiry에서 진행된 p5.js 공헌자 컨퍼런스 (이미지 저작권: 최태윤)'
+ support-18: >-
+ 프로세싱 재단 펠로우 Saskia Freeke이 런던에서 주관한 Liberation x Processing workshops (이미지
+ 저작권: Code Liberation Foundation)
+ support-19: >-
+ SPFC와 함께한 Learning to Teach, Teaching to Learn 컨퍼런스 (이미지 저작권: Kira
+ Simon-Kennedy)
+ support-20: >-
+ 프로세싱 재단 펠로우 Cassie Tarakajian가 Code Art Miami에서 진행한 워크숍 (이미지 저작권: Christian
+ Arévalo Photography)
+ support-21: 'Signing Coders p5.js workshop에서의 최태윤과 미국 수어(ASL) 해설자 (이미지 저작권: 최태윤)'
+ support-22: '구글 썸머 오브 코드(Google Summer of Code) 킥오프 행사 (이미지 저작권: 최태윤)'
+ support-23: >-
+ 프로세싱 재단 펠로우 Cassie Tarakajian가 Code Art Miami에서 진행한 워크숍 (이미지 저작권: Christian
+ Arévalo Photography)
+ support-24: '최태윤의 수어 기반 p5.js workshop에서 진행을 돕는 Luisa Pereira와 송예슬 (이미지 저작권: 최태윤)'
+ support-25: '미국 피츠버그 CMU STUDIO for Creative Inquiry에서 진행된 p5.js 공헌자 컨퍼런스 (이미지 저작권: 최태윤)'
+ support-26: >-
+ 프로세싱 재단 펠로우 Digital Citizens Lab가 International Center of Photography에서 주최한
+ STEM 교육 패널 (이미지 저작권: International Center of Photography)
+ support-27: >-
+ 칠레 산티아고에서 Aarón Montoya-Moraga가 진행한 p5.js workshop (이미지 저작권: Aarón
+ Montoya-Moraga.)
+ support-28: '최태윤의 수어 기반 p5.js workshop에서 진행을 돕는 Claire Kearney-Volpe (이미지 저작권: 최태윤)'
+ support-29: >-
+ 프로세싱 재단 펠로우 DIY Girls가 미국 로스 엔젤레스(Los Angeles)에서 진행한 크리에이티브 코딩 프로그램 (이미지
+ 저작권: DIY Girls)
+ support-30: 프로세싱 재단 펠로우 Digital Citizens Lab
+ support-31: UCLA DMA와 NYU ITP 간의 동서-해안 p5.js 모임
+ support-32: 프로세싱 재단
+ support-33: >-
+ 은 10여년 간의 프로세싱 소프트웨어(Processing Software) 개발 활동을 거쳐 2012년에 설립되었습니다. 프로세싱 재단의
+ 사명은 시각 예술계에서의 소프트웨어 리터러시 및 기술 관련 분야에서의 시각적 리터러시를 증진하고, 나아가 이 두 분야에 대한 보다 많은
+ 사람들의 접근성을 향상하는 데에 있습니다. 우리는 다양한 이해 관계와 배경을 가진 사람들, 특히 코딩 학습 툴이나 자원에 대한 접근성이
+ 없는 이들의 크리에이티브 코딩 교육을 돕는 것을 목표로 삼습니다.
+ support-17-alt: ''
+ support-18-alt: ''
+ support-19-alt: ''
+ support-20-alt: ''
+ support-21-alt: ''
+ support-22-alt: ''
+ support-23-alt: ''
+ support-24-alt: ''
+ support-25-alt: ''
+ support-26-alt: ''
+ support-27-alt: ''
+ support-28-alt: ''
+ support-29-alt: ''
+ support-30-alt: ''
+ support-31-alt: ''
learn:
- learn-title: "배우기"
- teach-title2: "가르치기"
- learn1: "깊이있고 순차적인 설명과 튜토리얼을 주제별로 제공합니다. p5.js 함수를 종류별로 알고싶다면 "
- learn2: "예제"
- learn3: "를 클릭하세요."
- introduction-to-p5js-title: "p5.js 소개"
- hello-p5js-title: "Hello p5.js"
- hello-p5js: "이 영상을 통해 p5.js 라이브러리가 무엇인지, 또 어떻게 활용할 수 있는지 알아보세요."
- getting-started-title: "시작하기"
- getting-started: "p5.js에 오신 것을 환영합니다. 이 페이지는 p5.js 프로젝트 설정을 위한 기본 내용을 다룹니다."
- p5js-overview-title: "p5.js 주요 기능"
- p5js-overview: "p5.js 주요 기능에 대한 개괄 설명을 확인하세요."
- p5js-processing-title: "p5.js와 프로세싱"
- p5js-processing: "p5와 프로세싱 간의 주요 차이점, 그리고 변환 방법을 알아보세요."
- p5-screen-reader-title: "p5와 스크린 리더"
- p5-screen-reader: "스크린 리더를 위한 p5 설정 방법을 알아보세요."
- using-local-server-title: "로컬 서버 사용하기"
- using-local-server: "맥 OSX, 윈도우, 리눅스 상에서 로컬 서버 설정하기"
- p5js-wiki-title: "p5.js 위키"
- p5js-wiki: "커뮤니티의 기여로 제작된 레퍼런스와 튜토리얼"
- connecting-p5js-title: "p5.js에 연결하기"
- creating-libraries-title: "라이브러리 만들기"
- creating-libraries: "p5.js 추가 라이브러리 만들기"
- nodejs-and-socketio-title: "node.js와 socket.io"
- nodejs-and-socketio: "p5.js로 node.js 서버 사용하기, socket.io로 연결, 통신하기"
- programming-topics-title: "프로그래밍 주제"
- beyond-the-canvas-title: "캔버스 너머서"
- beyond-the-canvas: "페이지상 캔버스 너머의 요소들 만들고 조작하기"
- 3d-webgl-title: "3D/WebGL"
- 3d-webgl: "WebGL 모드 기반의 고급 그래픽 개발하기"
- color-title: "색상"
- color: "디지털 색상 소개"
- coordinate-system-and-shapes-title: "좌표와 도형"
- coordinate-system-and-shapes: "좌표계를 활용하여 간단한 도형 그리기"
- interactivity-title: "인터랙션"
- interactivity: "마우스 및 키보드 인터랙션 소개"
- program-flow-title: "프로그램 흐름"
- program-flow: "p5.js에서 프로그램 플로우 조정하는 법 소개"
- curves-title: "곡선"
- curves: "p5.js상의 곡선 3가지 소개: 아치형 곡선, 스플라인 곡선, 베지어 곡선"
- becoming-a-better-programmer-title: "더 나은 개발자 되기"
- debugging-title: "디버깅"
- debugging: "모두를 위한 디버깅 필드 가이드"
- optimizing-title: "ps.js 성능 최적화"
- optimizing: "더 빠르고 부드러운 코딩을 위한 최적화 팁"
- test-driven-development-title: "유닛 테스팅 및 테스트 기반 개발"
- test-driven-development: "설치로 인한 고통에서 벗어나세요. 유닛 테스팅이란 무엇이고 어떻게 사용하는가? 제작: 앤디 티몬스(Andy Timmons)"
- contributing-to-the-community-title: "커뮤니티에 함께하기"
- development-title: "개발"
- development: "개발 기여 시작하기 및 둘러보기"
- looking-inside-title: "p5 들여다보기"
- looking-inside: "p5.js 개발용 파일 구조 및 도구에 대한 친절한 소개. 제작: 루이자 페레이라(Luisa Pereira)"
- writing-tutorial-title: "튜토리얼 만들기"
- writing-tutorial: "프로그래밍 튜토리얼 제작 가이드."
- writing-a-tutorial-title: "p5.js 튜토리얼 기여를 위한 가이드"
- writing-a-tutorial-author: "이 튜토리얼은 테가 브레인(Tega Brain)이 제작하였습니다."
- writing-a-tutorial-1: "p5.js 튜토리얼은 이에 열정을 느끼는 교육자와 모든 분들께 열려있습니다. p5.js 프로젝트는 보다 다양한 사람들을 위한 크리에이티브 코딩 및 오픈 소스 개발을 추구하며, 모든 개발 과정을 공개하는 것을 하나의 즐거운 과정으로 여깁니다. 현재까지 제작된 튜토리얼은 p5 학습, 프로그래밍 기술, 오픈소스 프로젝트 공헌 방법 등에 대한 내용을 다룹니다."
- writing-a-tutorial-2: "새로운 튜토리얼을 제안하거나, 튜토리얼 준비 및 기여에 대한 가이드라인 제작을 환영합니다."
- writing-a-tutorial-how-start-title: "커뮤니티 기여 시작하기:"
- writing-a-tutorial-how-start-1: "우선, 제안하려는 튜토리얼이 현재 진행 중인 내용들과 겹치는 지의 여부를 이 "
- writing-a-tutorial-how-start-2: "스프레드시트"
- writing-a-tutorial-how-start-3: "에서 확인하세요. 만약 제안하고자 하는 튜토리얼 주제가 현재 진행 중인 것이라면, 해당 주제의 마무리 작업 또는 p5.js 웹사이트상의 공개 작업에 참여할 수 있고 관련해서는 아래의 이메일로 연락주시면 감사하겠습니다. "
- writing-a-tutorial-how-start-4: "제안하려는 튜토리얼이 스프레드시트 리스트에 포함되지 않는다면, 튜토리얼에 대한 간략한 설명을 education@p5js.org로 보내주세요."
- writing-a-tutorial-how-prepare-title: "p5.js 튜토리얼 온라인 공개 준비하기:"
- writing-a-tutorial-how-prepare-1: "튜토리얼을 p5.js 웹사이트상 공개할 준비가 되었다면, 다음의 단계를 따라주세요."
- writing-a-tutorial-how-prepare-2: "튜토리얼 콘텐츠를 이 "
- writing-a-tutorial-how-prepare-3: "기본 구조"
- writing-a-tutorial-how-prepare-4: "에 따라 tutorial-name.hbs 파일로 변환해주세요. 콘텐츠에는 아래와 같은 헤더(header)가 반드시 포함되어야 합니다:"
- writing-a-tutorial-how-prepare-5: "튜토리얼을 포함한 폴더는 p5js 웹사이트 상 'tutorials' 폴더에 배치됩니다. index.hbs 파일은 "
- writing-a-tutorial-how-prepare-6: "p5.js 튜토리얼 랜딩 페이지"
- writing-a-tutorial-how-prepare-7: "에 해당하며, test-tutorial.hbs 파일은 테스트 튜토리얼입니다."
- writing-a-tutorial-how-prepare-8: "모든 콘텐츠는 페이지상"
- writing-a-tutorial-how-prepare-9: "태그에 포함되어야하며, <h1> 와 <h2> 태그, 그리고 <p> 문단 태그로서 문서 형식이 정의되어야 합니다. 형식 예시는 다음의 페이지에서 확인해보세요: "
- writing-a-tutorial-how-prepare-10: "테스트 튜토리얼"
- writing-a-tutorial-how-prepare-11: "튜토리얼이 이미지 파일을 포함할 경우, p5 웹사이트의 에셋(assets) 폴더에 배치됩니다. 파일 경로는 아래와 같이 src/assets/learn/test-tutorial/images에 해당합니다."
- writing-a-tutorial-how-prepare-12: "페이지의 HTML에 형식을 맞추기 위해 다음의 태그를 사용하세요:"
- writing-a-tutorial-embedding-title: "웹페이지에 p5.js 스케치 올리기(embedding)"
- writing-a-tutorial-embedding-1: "p5.js를 사용한다는 것은 튜토리얼 설명을 위해 예제에 각종 애니메이션, 인터랙션, 그리고 수정 기능을 포함할 수 있음을 뜻합니다. 이 경우, 튜토리얼 예제는 p5.js 스케치의 형태로 준비되어야하며, 튜토리얼 페이지상 다음의 두가지 방식으로 임베드될 수 있습니다."
- writing-a-tutorial-embedding-2: "만약 튜토리얼 예제가 p5.js 웹페이지의"
- writing-a-tutorial-embedding-3: "레퍼런스"
- writing-a-tutorial-embedding-4: "와 같이 코드를 수정할 수 있는 형태라면, p5js 위젯을 사용하여 HTML 페이지에 임베드할 수 있습니다."
- writing-a-tutorial-embedding-5: "이 가이드"
- writing-a-tutorial-embedding-6: "를 따라 위젯으로 p5js를 임베드하는 방법에 대해 알아보세요. 가이드는"
- writing-a-tutorial-embedding-7: "가 작성하였습니다. 이러한 사례에 해당하는 튜토리얼이 작동하는 모습은 "
- writing-a-tutorial-embedding-8: "테스트 튜토리얼 페이지"
- writing-a-tutorial-embedding-9: "에서 확인할 수 있습니다."
- writing-a-tutorial-embedding-10: "튜토리얼 예제가 애니메이션 그리고/또는 인터랙션을 포함하나 코드 수정 기능을 포함하지 않는다면, 다음과 같이 iframe을 사용하여 p5.js 스케치를 페이지상 임베드할 수 있습니다."
- writing-a-tutorial-iframe-title: "iframe을 사용하여 p5 스케치 임베드하기"
- writing-a-tutorial-iframe-1: "iframe은 한 페이지상 다른 페이지를 보기 위해 만드는 창문틀과도 같습니다. 이 창문틀을 따라 페이지상의 다른 내용들로부터 구분되는 셈이지요. 이 경우, p5.js 스케치를 포함한 index.html를 보여주는 창문틀의 역할을 합니다. "
- writing-a-tutorial-iframe-2: "스크린샷에 보이듯, p5 웹사이트 /src/assets/learn 폴더에 스케치의 이름을 딴 별도의 폴더를 새로이 생성하여 여러분의 튜토리얼용 p5 스케치를 올리세요. 이 경로를 통해 iframe에서 보여줄 모든 이미지와 p5 스케치가 저장됩니다."
- writing-a-tutorial-iframe-3: "여러분의 p5 예제를 포함한 폴더의 하위에는 sketch.js 파일과 embed.html 파일이 반드시 있어야 합니다."
- writing-a-tutorial-iframe-4: "embed.html 파일이 웹사이트의 p5 라이브러리와도 일치하는지를 확인하세요. 만약, 여러분의 파일 구조가 위와 같다면 p5.js 라이브러리 경로는 \"../../../js/p5.min.js\" 일것 입니다."
- writing-a-tutorial-iframe-5: "그리고나면, 튜토리얼 콘텐츠를 담고 있는 .hbs 파일상 p5js index 파일을 iframe의 형태로 임베드할 수 있습니다. iframe 임베드를 위한 코드는 다음과 같습니다: "
- writing-a-tutorial-iframe-6: "iframe 서식 바꾸기: "
- writing-a-tutorial-iframe-7: "iframe을 이용한 무제 스케치 작동 확인하기: "
- writing-a-tutorial-iframe-8: "위의 스케치가 p5 site에 임베드된 모습: "
- writing-a-tutorial-iframe-9: "한가지 주의해야할 점은, iframe의 사이즈는 반드시 직접 조정해야된다는 것입니다. 특히, 튜토리얼 콘텐츠의 크기가 규격화된 경우 그러합니다."
- writing-a-tutorial-iframe-10: "또한, p5.js 라이브러리 파일 연결 링크는 튜토리얼 콘텐츠가 포함되어있는 .eps 페이지가 아닌, 스케치를 렌더링하는 별도의 html 페이지에 위치합니다. (이 경우, 해당 html 페이지의 명칭은 embed.html입니다.)"
- writing-a-tutorial-iframe-11: "p5.js 스케치를 임베드하는 방법에 대해 더 알고 싶다면 다음의 링크를 확인하세요: "
- writing-a-tutorial-embed-iframe-12: "링크"
- writing-a-tutorial-finishing-title: "마무리하기"
- writing-a-tutorial-finishing-1: "앞서 언급된 메일을 통해 튜토리얼 콘텐츠 확인을 마쳤다면, p5.js-website repository를 Fork 하세요. 그리고 상기된 방법에 따라 콘텐츠를 준비하고 풀 리퀘스트(pull request)를 하여, 여러분의 기여 내용이 웹사이트에 공개될 수 있도록 하세요!"
- writing-a-tutorial-finishing-2: "감사합니다!"
- color-description1: "이 튜토리얼은 다니엘 쉬프만(Daniel Shiffman) 저, 모건 카우프만(Morgan Kaufmann) 출판 도서 Learning Processing에서 발췌하였습니다 © 2008 Elsevier Inc. 또한, 발췌본은 켈리 장(Kelly Chang)에 의해 p5로 옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면 "
- color-description2: "언제든 알려주세요."
- color-p1x1: "디지털 세상에서 색상에 대해 이야기할 땐, 아주 정밀한 표현이 필요합니다. 아쉽게도, \"푸른빛의 초록색 원을 만들 수 있어?\" 와 같은 표현은 통하지 않습니다. 이 곳에서의 색상은 언제나 숫자와 범위값에 의해 정의됩니다. 간단한 예시로 시작해볼까요. 검정색, 하얀색, 또는 회색 음영. 0은 검정색을, 255은 하얀색을, 그리고 그 사이에 존재하는 50, 87, 162, 209와 같은 다른 숫자들은 흑과 백 사이의 회색 음영을 뜻합니다."
- color-p2x1: "도형을 그리기에 앞서 선그리기"
- color-p2x2: " 와 면채우기"
- color-p2x3: " 함수를 사용하면 색상을 지정할 수 있습니다. 또, 배경"
- color-p2x4: " 함수를 통해 윈도우창의 배경색을 지정할 수 있습니다. 한 번 예시를 볼까요."
- color-code1: "background(255); // 배경색을 하얀색으로 정하기 \n stroke(0); // 윤곽선(stroke)색을 검정색으로 정하기 \n fill(150); // 면(fill)색을 회색으로 정하기 \n rect(50,50,75,100); // 사각형 그리기"
- color-p3x1: "선그리기(Stroke)나 면채우기(fill)는 다음의 함수를 통해 제거할 수 있습니다: "
- color-p3x2: " 과"
- color-p3x3: ". 본능적으로 우리는 \"stroke(0)\" 를 통해 윤곽선을 제거할 수 있을 거라 생각하지만, 코딩 언어의 세계에서 0은 \"아무것도 없음\"이 아니라, 검정색을 지칭합니다. "
- color-p3x4: " 과 "
- color-p3x5: "를 사용하면 선도 색상도, 아무것도 보이지 않을 거에요!"
- color-p4x1: "또한, 두개의 도형을 그릴 때 p5.js는 가장 마지막 줄에 지정된 stroke와 fill을 반영합니다. 코드를 위에서부터 아래로 읽고 수행하기 때문이지요."
- color-rgb-title: "RGB 색상"
- color-rgb-p1x1: "어린 시절 손가락으로 물감을 섞어본 기억이 있나요? 세가지의 \"원색\"을 사용하면, 그 어떠한 색상도 만들어 낼 수 있었지요. 여러가지 물감을 섞다보면 진흙빛의 갈색이 탄생하기도 합니다. 물감을 더할 수록 색이 어두워지고요. 디지털 색상들 역시 삼원색을 섞는 원리를 바탕으로 만들어졌지만, 물감과는 또다르게 작동합니다. 먼저, 디지털 색상에서의 삼원색은 빨강(red), 초록(green), 파랑(blue) (일명, \"RGB\" 색상)을 뜻합니다. 또, 화면상 보이는 색상은 기본적으로 물감이 아닌 빛의 조합입니다. 따라서, 색상이 조합되는 방식이 다른 것이지요."
- color-rgb-li1: "빨강 + 초록 = 노랑"
- color-rgb-li2: "빨강 + 파랑 = 보라"
- color-rgb-li3: "초록 + 파랑 = 청록"
- color-rgb-li4: "빨강 + 초록 + 파랑 = 하양"
- color-rgb-li5: "무채색 = 검정"
- color-rgb-p2x1: "이는 디지털 색상을 밝은 빛으로서 가정하는 데에서 비롯된 것인데, 색상 범위를 조정하여 원하는 색을 만들 수 있습니다. 예를 들어, 빨강색에 초록색, 파랑색을 더하면 회색이 됩니다. 그리고 약간의 빨강색에 약간의 파랑색을 더하면 어두운 보라색이 됩니다. RGB 색상을 더 많이 프로그래밍하고 실험할수록, 손가락으로 물감을 휘젔던 색상 본능만큼 디지털 색상에 따른 본능 역시 커질 것입니다. 한편, 우리는 \"빨강색 적당하게 쓰고 여기에 약간의 파란색을 섞어줘\"라는 식으로도 말할 수 없습니다. 반드시 정확한 양을 지정해야합니다. 회색 음영과 마찬가지로, 각각의 색상 요소는 0(색상 0가지)부터 255(최대한 많은 색상 수)에 이르는 범위 내에서 표현됩니다. 그리고 R, G, B의 순서에 따라 정렬됩니다. 이번엔 좀 더 일반적인 색상에 대해 알아볼까요"
- color-transparency-title: "색상 투명도"
- color-transparency-p1x1: "R, G, B값에 더해, 각 색상을 구성하는 네 번째 요소가 있습니다. 일명 \"알파(alpha)값\"인데요, 알파는 색상의 투명도를 말하고, 한 도형 위에 다른 도형을 얹을시 겹치는 지점을 보이게 할 때 유용하겠지요? 한 이미지에 대한 여러 알파값들을 통칭 \"알파 채널(alpha channel)\"이라 부르기도 합니다."
- color-transparency-p2x1: "픽셀은 그 자체로는 투명하지 않아요. 다만, 여러가지 색상을 섞어 마치 투명해보이는 듯한 착시현상을 만드는 것이지요. 이처럼 p5.js는 한 색상값과 다른 색상값들 간의 비율차를 이용하여 마치 이들이 섞인것처럼 보이게 만든답니다. (만약 여러분이 \"장밋빛\" 안경을 프로그래밍하고자 했다면 바로 이 지점부터 이해하고 넘어가면 되겠지요?)"
- color-transparency-p3x1: "알파값은 0부터 255 사이 조정가능합니다. 0은 완전히 투명한 상태(즉, 0% 투명도)이고 255는 완전히 불투명한 상태(즉, 100% 투명도)입니다."
- color-custom-ranges-title: "색상 조정 범위"
- color-custom-ranges-p1x1: " p5.js에서 다룰 수 있는 색채는 0부터 255까지에 이르는 RGB뿐만이 아닙니다. 사실 우리가 원하는대로 그 범위를 조정할 수도 있지요! 예를 들어, 색상 범위를 마치 퍼센티지처럼 0부터 100으로 설정할 수도 있습니다. 색상 범위 커스터마이징은 다음의 간단한 함수를 통해 가능합니다:"
- color-custom-ranges-p2x1: "위의 함수는: \"난 RGB색상에 대해 조정하고싶고, 그 색상 범위는 0부터 100으로 설정하고 싶어\"라고 말하는 것입니다."
- color-custom-ranges-p3x1: "조금 더 복잡하긴 하지만, 아래와 같은 방법을 통해 R, G, B 각 색상별로도 조정 범위를 설정할 수 있습니다:"
- color-custom-ranges-p4x1: "위의 내용은 \"빨강(R)은 0부터 100까지, 초록(G)은 0부터 500가지, 파랑(B)은 0부터 10까지, 그리고 투명도는 0부터 255까지 설정하고 싶어\"라고 말하는 것이지요."
- color-custom-ranges-p5x1: "여러분은 사실상 RGB값 설정만으로도 프로그래밍에 필요한 모든 색상을 누릴 수 있을텐데요, 마지막으로 RGB 외에 조정할 수 있는 색상 요소인 HSB(색조 Hue, 채도 Saturation, 밝기 Brightness)를 소개합니다"
- color-custom-ranges-li1x1: "색조 Hue"
- color-custom-ranges-li1x2: "—색상의 종류, 기본 범위 0부터 255까지"
- color-custom-ranges-li2x1: "채도 Saturation"
- color-custom-ranges-li2x2: "—색상의 생생함 정도, 기본 범위 0부터 255까지"
- color-custom-ranges-li3x1: "밝기 Brightness"
- color-custom-ranges-li3x2: "—(당연히) 색상의 밝은 정도, 기본 범위 0부터 255까지"
- color-custom-ranges-p6x1: "이 "
- color-custom-ranges-p6x2: " 함수를 이용하여 HSB값 범위 또한 설정할 수 있습니다. 어떤 사람들은 색조(Hue)를 0부터 360까지 설정하거나(위의 사진처럼 360도의 둥근 색상띠가 생각나지요), 채도와 밝기는 0부터 100까지 설정(0-100% 퍼센티지와 유비되지요)하는 것을 선호하기도 합니다."
- coordinate-system-description1: "이 튜토리얼은 다니엘 쉬프만(Daniel Shiffman)저, 모건 카우프만(Morgan Kaufmann) 출판 도서 "
- coordinate-system-description2: "Learning Processing"
- coordinate-system-description3: " 에서 발췌하였습니다.by © 2008 Elsevier Inc. All rights reserved. 또한 발췌본은 알렉스 이쑤안 쑤(Alex Yixuan Xu)에 의해 p5로 옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면 "
- coordinate-system-description4: "언제든 알려주세요"
- coordinate-system-description5: "."
- coordinate-system-description-title: "좌표와 도형"
- coordinate-system-description-p1x1: "p5로 프로그래밍을 시작하기 전에, 먼저 중학교 2학년 시절의 우리를 떠올리며 연습장에 선 하나를 그려볼까요? 두 개의 점을 그린 뒤 그 사이를 연결하면 하나의 선분이 탄생합니다. 연습장 위 이 두개의 점과 둘간을 연결하는 선. 바로 여기가 우리의 시작점입니다."
- coordinate-system-description-p2x1: "여기 점A(1,0)과 점B(4,5) 사이의 선 하나가 보입니다. 만약 똑같은 선을 친구가 그릴 수 있게하려면 \"1콤마 0에서 시작하는 점에서부터 4콤마 5를 향해 선을 그려죠\"라고 말하겠지요. 이제 그 친구가 컴퓨터라고 가정해볼까요? 우리의 컴퓨터 친구도 똑같은 선을 그리게 하려면 위와 동일한 문장을 입력하면 됩니다. 좀 더 구체적인 형식을 갖춰 컴퓨터 친구에게 말을 건네볼까요?"
- coordinate-system-description-p3x1: "코딩 문법에 대해 익숙하지 않더라도 위 문장의 뜻을 어느정도 감잡을 수 있습니다. 우리는 일명 \"함수\"라 불리는 명령문을 통해 컴퓨터와 대화하는 셈입니다. 여기서 \"line\"은 선을 그리는 함수입니다. 여기에 더해, 우리는 이 함수 내에서 구체적인 인수(argument)를 지시할 수 있습니다. 예를 들어, 점 A (1,0)부터 점 B (4,5)까지라는 인수를 함수 괄호 안에 포함 시킨 것이지요. 코드 한 줄을 하나의 문장으로 본다면, 함수는 동사(verb)이고 인수는 목적어(object)인 셈입니다. 단, 코드는 문장과 달리 마침표가 아니라 \"세미콜론(;)\"으로 끝나는 점 주의하세요!"
- coordinate-system-description-p4x1: "컴퓨터 화면은 그저 좀 더 멋진 모양새를 갖춘 연습장과도 같습니다. 화면상의 각 픽셀은 x값(가로)과 y값(세로)이라는 두개의 숫자가 합쳐진, 하나의 좌표값과도 같습니다. 그리고 이 좌표로 화면이라는 공간 내의 위치를 정하지요. 이제 우리는 이 픽셀 좌표값에 모양과 색상을 더하면 됩니다."
- coordinate-system-description-p5x1: "한가지 주의사항! 우리가 중학교 2학년 때 배운 \"직교 좌표계\"는 (0,0)을 중심에 두고, y축을 그 중심에서 위로, 그리고 x축을 중심으로부터 오른쪽을 향해 뻗어나갑니다(양수일 경우엔 이러하고, 음수일 경우 각각 아래와 왼쪽을 향하지요.) 하지만, 컴퓨터 화면 속 픽셀 좌표계에서의 y축은 그 반대로 적용됩니다. 픽셀 좌표계의 (0,0)은 화면상 좌측 최상단에 위치하고, y값이 증가할 수록 아래를 향해 내려옵니다. x값은 그대로 오른쪽을 향해 증가합니다."
- coordinate-system-simple-shapes-title: "간단한 도형"
- coordinate-system-simple-shapes-p1x1: "여러분이 앞으로 마주할 p5 기반 프로그래밍 예제들은 본질적으로 시각적이고 조형적입니다. 다음 예제들의 핵심은 모양을 그리고 픽셀을 설정하는 데에 있습니다. 4개의 기본 도형을 살펴보며 시작해볼까요!"
- coordinate-system-simple-shapes-p2x1: "위의 모양들을 그리기 위해 필요한 위치와 크기(그 다음, 색상까지도) 정보가 무엇일지 고민해볼까요. 아래의 도식들을 보면, 우리는 먼저 너비 100 픽셀 그리고 높이 100 픽셀에 해당하는 창을 만듭니다."
- coordinate-system-simple-shapes-p3x1: "점그리기를 뜻하는 "
- coordinate-system-simple-shapes-p3x2: " 함수는 우리가 그릴 수 있는 가장 쉬운 모양이자, 좋은 시작점이 됩니다. 점을 그리기 위해 우리는 x와 y 좌표값만 정하면 되지요."
- coordinate-system-simple-shapes-p4x1: "선그리기를 뜻하는 "
- coordinate-system-simple-shapes-p4x2: " 함수 역시 아주 어렵진 않습니다. 선을 그리기 위해 우리는 (x1,y1)과 (x2,y2)라는 두개의 좌표값만 필요합니다:"
- coordinate-system-simple-shapes-p5x1: "사각형 그리기 함수인 "
- coordinate-system-simple-shapes-p5x2: "의 경우 약간 복잡합니다. p5에서 사각형은 그것이 그려지기 시작하는 상단 좌측의 좌표값과 더불어 너비(width)와 높이(height)를 정하는 숫자들이 필요합니다."
- coordinate-system-simple-shapes-p6x1: "사각형을 그리는 또 다른 방법으로, 중앙값, 너비(width), 높이값(height) 설정하기가 있습니다. 이 경우, 먼저 상단의 setup() 함수에 센터 "
- coordinate-system-simple-shapes-p6x2: " 모드를 불러오고, 그 뒤에 사각형의 중앙값, 너비, 높이값을 지정해야 합니다. p5는 대문자와 소문자 구분에 민감하니 주의하세요!"
- coordinate-system-simple-shapes-p7x1: "마지막으로, 점 두 개 만으로 사각형을 그리는 방법도 있습니다. 바로, 상단 좌측 코너와 하단 우측 코너의 좌표를 지정하는 것이지요. 여기서 우리가 setup() 함수에 포함시킬 모드는 코너 "
- coordinate-system-simple-shapes-p7x2: " 입니다. 그 결과물은 위의 예제와 동일합니다."
- coordinate-system-simple-shapes-p8x1: "사각형 그리기에 익숙해졌다면, 타원그리기 "
- coordinate-system-simple-shapes-p8x2: " 는 식은죽 먹기지요. 타원을 그리는 원리는 "
- coordinate-system-simple-shapes-p8x3: " 와 거의 동일하나, 다만 동일한 좌표값을 가진 사각형의 경계선 안쪽에 그려진다는 점에서 차이가 있습니다. "
- coordinate-system-simple-shapes-p8x4: " 함수의 기본 모드 설정은 센터 "
- coordinate-system-simple-shapes-p8x5: "에 해당합니다. 코너 "
- coordinate-system-simple-shapes-p8x6: " 모드로 그리기 위해선 별도 설정이 필요합니다."
- coordinate-system-simple-shapes-p9x1: "자, 이제 좀 더 완성도있는 그림을 그려볼까요! 아래의 코드는 200x200 픽셀 크기의 캔버스 위에 여러개의 도형을 그립니다. createCanvas() 함수를 사용하여 캔버스의 너비(width)와 높이(height)를 설정할 수 있습니다."
- teach-desc: "Teach a p5 workshop or class, or create teaching materials!"
-
-test-tutorial:
-
+ learn-title: 배우기
+ teach-title2: 가르치기
+ learn1: '깊이있고 순차적인 설명과 튜토리얼을 주제별로 제공합니다. p5.js 함수를 종류별로 알고싶다면 '
+ learn2: 예제
+ learn3: 를 클릭하세요.
+ introduction-to-p5js-title: p5.js 소개
+ hello-p5js-title: Hello p5.js
+ hello-p5js: '이 영상을 통해 p5.js 라이브러리가 무엇인지, 또 어떻게 활용할 수 있는지 알아보세요.'
+ getting-started-title: 시작하기
+ getting-started: p5.js에 오신 것을 환영합니다. 이 페이지는 p5.js 프로젝트 설정을 위한 기본 내용을 다룹니다.
+ p5js-overview-title: p5.js 주요 기능
+ p5js-overview: p5.js 주요 기능에 대한 개괄 설명을 확인하세요.
+ p5js-processing-title: p5.js와 프로세싱
+ p5js-processing: 'p5와 프로세싱 간의 주요 차이점, 그리고 변환 방법을 알아보세요.'
+ p5-screen-reader-title: p5와 스크린 리더
+ p5-screen-reader: 스크린 리더를 위한 p5 설정 방법을 알아보세요.
+ using-local-server-title: 로컬 서버 사용하기
+ using-local-server: '맥 OSX, 윈도우, 리눅스 상에서 로컬 서버 설정하기'
+ p5js-wiki-title: p5.js 위키
+ p5js-wiki: 커뮤니티의 기여로 제작된 레퍼런스와 튜토리얼
+ connecting-p5js-title: p5.js에 연결하기
+ creating-libraries-title: 라이브러리 만들기
+ creating-libraries: p5.js 추가 라이브러리 만들기
+ nodejs-and-socketio-title: node.js와 socket.io
+ nodejs-and-socketio: 'p5.js로 node.js 서버 사용하기, socket.io로 연결, 통신하기'
+ programming-topics-title: 프로그래밍 주제
+ beyond-the-canvas-title: 캔버스 너머서
+ beyond-the-canvas: 페이지상 캔버스 너머의 요소들 만들고 조작하기
+ 3d-webgl-title: 3D/WebGL
+ 3d-webgl: WebGL 모드 기반의 고급 그래픽 개발하기
+ color-title: 색상
+ color: 디지털 색상 소개
+ coordinate-system-and-shapes-title: 좌표와 도형
+ coordinate-system-and-shapes: 좌표계를 활용하여 간단한 도형 그리기
+ interactivity-title: 인터랙션
+ interactivity: 마우스 및 키보드 인터랙션 소개
+ program-flow-title: 프로그램 흐름
+ program-flow: p5.js에서 프로그램 플로우 조정하는 법 소개
+ curves-title: 곡선
+ curves: 'p5.js상의 곡선 3가지 소개: 아치형 곡선, 스플라인 곡선, 베지어 곡선'
+ becoming-a-better-programmer-title: 더 나은 개발자 되기
+ debugging-title: 디버깅
+ debugging: 모두를 위한 디버깅 필드 가이드
+ optimizing-title: ps.js 성능 최적화
+ optimizing: 더 빠르고 부드러운 코딩을 위한 최적화 팁
+ test-driven-development-title: 유닛 테스팅 및 테스트 기반 개발
+ test-driven-development: '설치로 인한 고통에서 벗어나세요. 유닛 테스팅이란 무엇이고 어떻게 사용하는가? 제작: 앤디 티몬스(Andy Timmons)'
+ contributing-to-the-community-title: 커뮤니티에 함께하기
+ development-title: 개발
+ development: 개발 기여 시작하기 및 둘러보기
+ looking-inside-title: p5 들여다보기
+ looking-inside: 'p5.js 개발용 파일 구조 및 도구에 대한 친절한 소개. 제작: 루이자 페레이라(Luisa Pereira)'
+ writing-tutorial-title: 튜토리얼 만들기
+ writing-tutorial: 프로그래밍 튜토리얼 제작 가이드.
+ writing-a-tutorial-title: p5.js 튜토리얼 기여를 위한 가이드
+ writing-a-tutorial-author: 이 튜토리얼은 테가 브레인(Tega Brain)이 제작하였습니다.
+ writing-a-tutorial-1: >-
+ p5.js 튜토리얼은 이에 열정을 느끼는 교육자와 모든 분들께 열려있습니다. p5.js 프로젝트는 보다 다양한 사람들을 위한 크리에이티브
+ 코딩 및 오픈 소스 개발을 추구하며, 모든 개발 과정을 공개하는 것을 하나의 즐거운 과정으로 여깁니다. 현재까지 제작된 튜토리얼은 p5
+ 학습, 프로그래밍 기술, 오픈소스 프로젝트 공헌 방법 등에 대한 내용을 다룹니다.
+ writing-a-tutorial-2: '새로운 튜토리얼을 제안하거나, 튜토리얼 준비 및 기여에 대한 가이드라인 제작을 환영합니다.'
+ writing-a-tutorial-how-start-title: '커뮤니티 기여 시작하기:'
+ writing-a-tutorial-how-start-1: '우선, 제안하려는 튜토리얼이 현재 진행 중인 내용들과 겹치는 지의 여부를 이 '
+ writing-a-tutorial-how-start-2: 스프레드시트
+ writing-a-tutorial-how-start-3: >-
+ 에서 확인하세요. 만약 제안하고자 하는 튜토리얼 주제가 현재 진행 중인 것이라면, 해당 주제의 마무리 작업 또는 p5.js 웹사이트상의
+ 공개 작업에 참여할 수 있고 관련해서는 아래의 이메일로 연락주시면 감사하겠습니다.
+ writing-a-tutorial-how-start-4: >-
+ 제안하려는 튜토리얼이 스프레드시트 리스트에 포함되지 않는다면, 튜토리얼에 대한 간략한 설명을 education@p5js.org로
+ 보내주세요.
+ writing-a-tutorial-how-prepare-title: 'p5.js 튜토리얼 온라인 공개 준비하기:'
+ writing-a-tutorial-how-prepare-1: '튜토리얼을 p5.js 웹사이트상 공개할 준비가 되었다면, 다음의 단계를 따라주세요.'
+ writing-a-tutorial-how-prepare-2: '튜토리얼 콘텐츠를 이 '
+ writing-a-tutorial-how-prepare-3: 기본 구조
+ writing-a-tutorial-how-prepare-4: '에 따라 tutorial-name.hbs 파일로 변환해주세요. 콘텐츠에는 아래와 같은 헤더(header)가 반드시 포함되어야 합니다:'
+ writing-a-tutorial-how-prepare-5: '튜토리얼을 포함한 폴더는 p5js 웹사이트 상 ''tutorials'' 폴더에 배치됩니다. index.hbs 파일은 '
+ writing-a-tutorial-how-prepare-6: p5.js 튜토리얼 랜딩 페이지
+ writing-a-tutorial-how-prepare-7: '에 해당하며, test-tutorial.hbs 파일은 테스트 튜토리얼입니다.'
+ writing-a-tutorial-how-prepare-8: 모든 콘텐츠는 페이지상
+ writing-a-tutorial-how-prepare-9: >-
+ 태그에 포함되어야하며, <h1> 와 <h2> 태그, 그리고 <p> 문단 태그로서 문서 형식이 정의되어야
+ 합니다. 형식 예시는 다음의 페이지에서 확인해보세요:
+ writing-a-tutorial-how-prepare-10: 테스트 튜토리얼
+ writing-a-tutorial-how-prepare-11: >-
+ 튜토리얼이 이미지 파일을 포함할 경우, p5 웹사이트의 에셋(assets) 폴더에 배치됩니다. 파일 경로는 아래와 같이
+ src/assets/learn/test-tutorial/images에 해당합니다.
+ writing-a-tutorial-how-prepare-12: '페이지의 HTML에 형식을 맞추기 위해 다음의 태그를 사용하세요:'
+ writing-a-tutorial-embedding-title: 웹페이지에 p5.js 스케치 올리기(embedding)
+ writing-a-tutorial-embedding-1: >-
+ p5.js를 사용한다는 것은 튜토리얼 설명을 위해 예제에 각종 애니메이션, 인터랙션, 그리고 수정 기능을 포함할 수 있음을 뜻합니다. 이
+ 경우, 튜토리얼 예제는 p5.js 스케치의 형태로 준비되어야하며, 튜토리얼 페이지상 다음의 두가지 방식으로 임베드될 수 있습니다.
+ writing-a-tutorial-embedding-2: 만약 튜토리얼 예제가 p5.js 웹페이지의
+ writing-a-tutorial-embedding-3: 레퍼런스
+ writing-a-tutorial-embedding-4: '와 같이 코드를 수정할 수 있는 형태라면, p5js 위젯을 사용하여 HTML 페이지에 임베드할 수 있습니다.'
+ writing-a-tutorial-embedding-5: 이 가이드
+ writing-a-tutorial-embedding-6: 를 따라 위젯으로 p5js를 임베드하는 방법에 대해 알아보세요. 가이드는
+ writing-a-tutorial-embedding-7: '가 작성하였습니다. 이러한 사례에 해당하는 튜토리얼이 작동하는 모습은 '
+ writing-a-tutorial-embedding-8: 테스트 튜토리얼 페이지
+ writing-a-tutorial-embedding-9: 에서 확인할 수 있습니다.
+ writing-a-tutorial-embedding-10: >-
+ 튜토리얼 예제가 애니메이션 그리고/또는 인터랙션을 포함하나 코드 수정 기능을 포함하지 않는다면, 다음과 같이 iframe을 사용하여
+ p5.js 스케치를 페이지상 임베드할 수 있습니다.
+ writing-a-tutorial-iframe-title: iframe을 사용하여 p5 스케치 임베드하기
+ writing-a-tutorial-iframe-1: >-
+ iframe은 한 페이지상 다른 페이지를 보기 위해 만드는 창문틀과도 같습니다. 이 창문틀을 따라 페이지상의 다른 내용들로부터 구분되는
+ 셈이지요. 이 경우, p5.js 스케치를 포함한 index.html를 보여주는 창문틀의 역할을 합니다.
+ writing-a-tutorial-iframe-2: >-
+ 스크린샷에 보이듯, p5 웹사이트 /src/assets/learn 폴더에 스케치의 이름을 딴 별도의 폴더를 새로이 생성하여 여러분의
+ 튜토리얼용 p5 스케치를 올리세요. 이 경로를 통해 iframe에서 보여줄 모든 이미지와 p5 스케치가 저장됩니다.
+ writing-a-tutorial-iframe-3: 여러분의 p5 예제를 포함한 폴더의 하위에는 sketch.js 파일과 embed.html 파일이 반드시 있어야 합니다.
+ writing-a-tutorial-iframe-4: >-
+ embed.html 파일이 웹사이트의 p5 라이브러리와도 일치하는지를 확인하세요. 만약, 여러분의 파일 구조가 위와 같다면 p5.js
+ 라이브러리 경로는 "../../../js/p5.min.js" 일것 입니다.
+ writing-a-tutorial-iframe-5: >-
+ 그리고나면, 튜토리얼 콘텐츠를 담고 있는 .hbs 파일상 p5js index 파일을 iframe의 형태로 임베드할 수 있습니다.
+ iframe 임베드를 위한 코드는 다음과 같습니다:
+ writing-a-tutorial-iframe-6: 'iframe 서식 바꾸기: '
+ writing-a-tutorial-iframe-7: 'iframe을 이용한 무제 스케치 작동 확인하기: '
+ writing-a-tutorial-iframe-8: '위의 스케치가 p5 site에 임베드된 모습: '
+ writing-a-tutorial-iframe-9: >-
+ 한가지 주의해야할 점은, iframe의 사이즈는 반드시 직접 조정해야된다는 것입니다. 특히, 튜토리얼 콘텐츠의 크기가 규격화된 경우
+ 그러합니다.
+ writing-a-tutorial-iframe-10: >-
+ 또한, p5.js 라이브러리 파일 연결 링크는 튜토리얼 콘텐츠가 포함되어있는 .eps 페이지가 아닌, 스케치를 렌더링하는 별도의 html
+ 페이지에 위치합니다. (이 경우, 해당 html 페이지의 명칭은 embed.html입니다.)
+ writing-a-tutorial-iframe-11: 'p5.js 스케치를 임베드하는 방법에 대해 더 알고 싶다면 다음의 링크를 확인하세요: '
+ writing-a-tutorial-embed-iframe-12: 링크
+ writing-a-tutorial-finishing-title: 마무리하기
+ writing-a-tutorial-finishing-1: >-
+ 앞서 언급된 메일을 통해 튜토리얼 콘텐츠 확인을 마쳤다면, p5.js-website repository를 Fork 하세요. 그리고 상기된
+ 방법에 따라 콘텐츠를 준비하고 풀 리퀘스트(pull request)를 하여, 여러분의 기여 내용이 웹사이트에 공개될 수 있도록 하세요!
+ writing-a-tutorial-finishing-2: 감사합니다!
+ color-description1: >-
+ 이 튜토리얼은 다니엘 쉬프만(Daniel Shiffman) 저, 모건 카우프만(Morgan Kaufmann) 출판 도서 Learning
+ Processing에서 발췌하였습니다 © 2008 Elsevier Inc. 또한, 발췌본은 켈리 장(Kelly Chang)에 의해 p5로
+ 옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면
+ color-description2: 언제든 알려주세요.
+ color-p1x1: >-
+ 디지털 세상에서 색상에 대해 이야기할 땐, 아주 정밀한 표현이 필요합니다. 아쉽게도, "푸른빛의 초록색 원을 만들 수 있어?" 와 같은
+ 표현은 통하지 않습니다. 이 곳에서의 색상은 언제나 숫자와 범위값에 의해 정의됩니다. 간단한 예시로 시작해볼까요. 검정색, 하얀색, 또는
+ 회색 음영. 0은 검정색을, 255은 하얀색을, 그리고 그 사이에 존재하는 50, 87, 162, 209와 같은 다른 숫자들은 흑과 백
+ 사이의 회색 음영을 뜻합니다.
+ color-p2x1: 도형을 그리기에 앞서 선그리기
+ color-p2x2: ' 와 면채우기'
+ color-p2x3: ' 함수를 사용하면 색상을 지정할 수 있습니다. 또, 배경'
+ color-p2x4: ' 함수를 통해 윈도우창의 배경색을 지정할 수 있습니다. 한 번 예시를 볼까요.'
+ color-code1: |-
+ background(255); // 배경색을 하얀색으로 정하기
+ stroke(0); // 윤곽선(stroke)색을 검정색으로 정하기
+ fill(150); // 면(fill)색을 회색으로 정하기
+ rect(50,50,75,100); // 사각형 그리기
+ color-p3x1: '선그리기(Stroke)나 면채우기(fill)는 다음의 함수를 통해 제거할 수 있습니다: '
+ color-p3x2: ' 과'
+ color-p3x3: >-
+ . 본능적으로 우리는 "stroke(0)" 를 통해 윤곽선을 제거할 수 있을 거라 생각하지만, 코딩 언어의 세계에서 0은 "아무것도
+ 없음"이 아니라, 검정색을 지칭합니다.
+ color-p3x4: ' 과 '
+ color-p3x5: '를 사용하면 선도 색상도, 아무것도 보이지 않을 거에요!'
+ color-p4x1: >-
+ 또한, 두개의 도형을 그릴 때 p5.js는 가장 마지막 줄에 지정된 stroke와 fill을 반영합니다. 코드를 위에서부터 아래로 읽고
+ 수행하기 때문이지요.
+ color-rgb-title: RGB 색상
+ color-rgb-p1x1: >-
+ 어린 시절 손가락으로 물감을 섞어본 기억이 있나요? 세가지의 "원색"을 사용하면, 그 어떠한 색상도 만들어 낼 수 있었지요. 여러가지
+ 물감을 섞다보면 진흙빛의 갈색이 탄생하기도 합니다. 물감을 더할 수록 색이 어두워지고요. 디지털 색상들 역시 삼원색을 섞는 원리를
+ 바탕으로 만들어졌지만, 물감과는 또다르게 작동합니다. 먼저, 디지털 색상에서의 삼원색은 빨강(red), 초록(green),
+ 파랑(blue) (일명, "RGB" 색상)을 뜻합니다. 또, 화면상 보이는 색상은 기본적으로 물감이 아닌 빛의 조합입니다. 따라서,
+ 색상이 조합되는 방식이 다른 것이지요.
+ color-rgb-li1: 빨강 + 초록 = 노랑
+ color-rgb-li2: 빨강 + 파랑 = 보라
+ color-rgb-li3: 초록 + 파랑 = 청록
+ color-rgb-li4: 빨강 + 초록 + 파랑 = 하양
+ color-rgb-li5: 무채색 = 검정
+ color-rgb-p2x1: >-
+ 이는 디지털 색상을 밝은 빛으로서 가정하는 데에서 비롯된 것인데, 색상 범위를 조정하여 원하는 색을 만들 수 있습니다. 예를 들어,
+ 빨강색에 초록색, 파랑색을 더하면 회색이 됩니다. 그리고 약간의 빨강색에 약간의 파랑색을 더하면 어두운 보라색이 됩니다. RGB 색상을
+ 더 많이 프로그래밍하고 실험할수록, 손가락으로 물감을 휘젔던 색상 본능만큼 디지털 색상에 따른 본능 역시 커질 것입니다. 한편, 우리는
+ "빨강색 적당하게 쓰고 여기에 약간의 파란색을 섞어줘"라는 식으로도 말할 수 없습니다. 반드시 정확한 양을 지정해야합니다. 회색 음영과
+ 마찬가지로, 각각의 색상 요소는 0(색상 0가지)부터 255(최대한 많은 색상 수)에 이르는 범위 내에서 표현됩니다. 그리고 R, G,
+ B의 순서에 따라 정렬됩니다. 이번엔 좀 더 일반적인 색상에 대해 알아볼까요
+ color-transparency-title: 색상 투명도
+ color-transparency-p1x1: >-
+ R, G, B값에 더해, 각 색상을 구성하는 네 번째 요소가 있습니다. 일명 "알파(alpha)값"인데요, 알파는 색상의 투명도를
+ 말하고, 한 도형 위에 다른 도형을 얹을시 겹치는 지점을 보이게 할 때 유용하겠지요? 한 이미지에 대한 여러 알파값들을 통칭 "알파
+ 채널(alpha channel)"이라 부르기도 합니다.
+ color-transparency-p2x1: >-
+ 픽셀은 그 자체로는 투명하지 않아요. 다만, 여러가지 색상을 섞어 마치 투명해보이는 듯한 착시현상을 만드는 것이지요. 이처럼 p5.js는
+ 한 색상값과 다른 색상값들 간의 비율차를 이용하여 마치 이들이 섞인것처럼 보이게 만든답니다. (만약 여러분이 "장밋빛" 안경을
+ 프로그래밍하고자 했다면 바로 이 지점부터 이해하고 넘어가면 되겠지요?)
+ color-transparency-p3x1: >-
+ 알파값은 0부터 255 사이 조정가능합니다. 0은 완전히 투명한 상태(즉, 0% 투명도)이고 255는 완전히 불투명한 상태(즉, 100%
+ 투명도)입니다.
+ color-custom-ranges-title: 색상 조정 범위
+ color-custom-ranges-p1x1: ' p5.js에서 다룰 수 있는 색채는 0부터 255까지에 이르는 RGB뿐만이 아닙니다. 사실 우리가 원하는대로 그 범위를 조정할 수도 있지요! 예를 들어, 색상 범위를 마치 퍼센티지처럼 0부터 100으로 설정할 수도 있습니다. 색상 범위 커스터마이징은 다음의 간단한 함수를 통해 가능합니다:'
+ color-custom-ranges-p2x1: '위의 함수는: "난 RGB색상에 대해 조정하고싶고, 그 색상 범위는 0부터 100으로 설정하고 싶어"라고 말하는 것입니다.'
+ color-custom-ranges-p3x1: '조금 더 복잡하긴 하지만, 아래와 같은 방법을 통해 R, G, B 각 색상별로도 조정 범위를 설정할 수 있습니다:'
+ color-custom-ranges-p4x1: >-
+ 위의 내용은 "빨강(R)은 0부터 100까지, 초록(G)은 0부터 500가지, 파랑(B)은 0부터 10까지, 그리고 투명도는 0부터
+ 255까지 설정하고 싶어"라고 말하는 것이지요.
+ color-custom-ranges-p5x1: >-
+ 여러분은 사실상 RGB값 설정만으로도 프로그래밍에 필요한 모든 색상을 누릴 수 있을텐데요, 마지막으로 RGB 외에 조정할 수 있는 색상
+ 요소인 HSB(색조 Hue, 채도 Saturation, 밝기 Brightness)를 소개합니다
+ color-custom-ranges-li1x1: 색조 Hue
+ color-custom-ranges-li1x2: '—색상의 종류, 기본 범위 0부터 360까지'
+ color-custom-ranges-li2x1: 채도 Saturation
+ color-custom-ranges-li2x2: '—색상의 생생함 정도, 기본 범위 0부터 100까지'
+ color-custom-ranges-li3x1: 밝기 Brightness
+ color-custom-ranges-li3x2: '—(당연히) 색상의 밝은 정도, 기본 범위 0부터 100까지'
+ color-custom-ranges-p6x1: '이 '
+ color-custom-ranges-p6x2: ' 함수를 이용하여 HSB값 범위 또한 설정할 수 있습니다. 어떤 사람들은 색조(Hue)를 0부터 360까지 설정하거나(위의 사진처럼 360도의 둥근 색상띠가 생각나지요), 채도와 밝기는 0부터 100까지 설정(0-100% 퍼센티지와 유비되지요)하는 것을 선호하기도 합니다.'
+ coordinate-system-description1: '이 튜토리얼은 다니엘 쉬프만(Daniel Shiffman)저, 모건 카우프만(Morgan Kaufmann) 출판 도서 '
+ coordinate-system-description2: Learning Processing
+ coordinate-system-description3: ' 에서 발췌하였습니다.by © 2008 Elsevier Inc. All rights reserved. 또한 발췌본은 알렉스 이쑤안 쑤(Alex Yixuan Xu)에 의해 p5로 옮겨졌습니다. 오류를 발견하거나 의견을 남기고 싶다면 '
+ coordinate-system-description4: 언제든 알려주세요
+ coordinate-system-description5: .
+ coordinate-system-description-title: 좌표와 도형
+ coordinate-system-description-p1x1: >-
+ p5로 프로그래밍을 시작하기 전에, 먼저 중학교 2학년 시절의 우리를 떠올리며 연습장에 선 하나를 그려볼까요? 두 개의 점을 그린 뒤 그
+ 사이를 연결하면 하나의 선분이 탄생합니다. 연습장 위 이 두개의 점과 둘간을 연결하는 선. 바로 여기가 우리의 시작점입니다.
+ coordinate-system-description-p2x1: >-
+ 여기 점A(1,0)과 점B(4,5) 사이의 선 하나가 보입니다. 만약 똑같은 선을 친구가 그릴 수 있게하려면 "1콤마 0에서 시작하는
+ 점에서부터 4콤마 5를 향해 선을 그려죠"라고 말하겠지요. 이제 그 친구가 컴퓨터라고 가정해볼까요? 우리의 컴퓨터 친구도 똑같은 선을
+ 그리게 하려면 위와 동일한 문장을 입력하면 됩니다. 좀 더 구체적인 형식을 갖춰 컴퓨터 친구에게 말을 건네볼까요?
+ coordinate-system-description-p3x1: >-
+ 코딩 문법에 대해 익숙하지 않더라도 위 문장의 뜻을 어느정도 감잡을 수 있습니다. 우리는 일명 "함수"라 불리는 명령문을 통해 컴퓨터와
+ 대화하는 셈입니다. 여기서 "line"은 선을 그리는 함수입니다. 여기에 더해, 우리는 이 함수 내에서 구체적인 인수(argument)를
+ 지시할 수 있습니다. 예를 들어, 점 A (1,0)부터 점 B (4,5)까지라는 인수를 함수 괄호 안에 포함 시킨 것이지요. 코드 한
+ 줄을 하나의 문장으로 본다면, 함수는 동사(verb)이고 인수는 목적어(object)인 셈입니다. 단, 코드는 문장과 달리 마침표가
+ 아니라 "세미콜론(;)"으로 끝나는 점 주의하세요!
+ coordinate-system-description-p4x1: >-
+ 컴퓨터 화면은 그저 좀 더 멋진 모양새를 갖춘 연습장과도 같습니다. 화면상의 각 픽셀은 x값(가로)과 y값(세로)이라는 두개의 숫자가
+ 합쳐진, 하나의 좌표값과도 같습니다. 그리고 이 좌표로 화면이라는 공간 내의 위치를 정하지요. 이제 우리는 이 픽셀 좌표값에 모양과
+ 색상을 더하면 됩니다.
+ coordinate-system-description-p5x1: >-
+ 한가지 주의사항! 우리가 중학교 2학년 때 배운 "직교 좌표계"는 (0,0)을 중심에 두고, y축을 그 중심에서 위로, 그리고 x축을
+ 중심으로부터 오른쪽을 향해 뻗어나갑니다(양수일 경우엔 이러하고, 음수일 경우 각각 아래와 왼쪽을 향하지요.) 하지만, 컴퓨터 화면 속
+ 픽셀 좌표계에서의 y축은 그 반대로 적용됩니다. 픽셀 좌표계의 (0,0)은 화면상 좌측 최상단에 위치하고, y값이 증가할 수록 아래를
+ 향해 내려옵니다. x값은 그대로 오른쪽을 향해 증가합니다.
+ coordinate-system-simple-shapes-title: 간단한 도형
+ coordinate-system-simple-shapes-p1x1: >-
+ 여러분이 앞으로 마주할 p5 기반 프로그래밍 예제들은 본질적으로 시각적이고 조형적입니다. 다음 예제들의 핵심은 모양을 그리고 픽셀을
+ 설정하는 데에 있습니다. 4개의 기본 도형을 살펴보며 시작해볼까요!
+ coordinate-system-simple-shapes-p2x1: >-
+ 위의 모양들을 그리기 위해 필요한 위치와 크기(그 다음, 색상까지도) 정보가 무엇일지 고민해볼까요. 아래의 도식들을 보면, 우리는 먼저
+ 너비 100 픽셀 그리고 높이 100 픽셀에 해당하는 창을 만듭니다.
+ coordinate-system-simple-shapes-p3x1: '점그리기를 뜻하는 '
+ coordinate-system-simple-shapes-p3x2: ' 함수는 우리가 그릴 수 있는 가장 쉬운 모양이자, 좋은 시작점이 됩니다. 점을 그리기 위해 우리는 x와 y 좌표값만 정하면 되지요.'
+ coordinate-system-simple-shapes-p4x1: '선그리기를 뜻하는 '
+ coordinate-system-simple-shapes-p4x2: ' 함수 역시 아주 어렵진 않습니다. 선을 그리기 위해 우리는 (x1,y1)과 (x2,y2)라는 두개의 좌표값만 필요합니다:'
+ coordinate-system-simple-shapes-p5x1: '사각형 그리기 함수인 '
+ coordinate-system-simple-shapes-p5x2: >-
+ 의 경우 약간 복잡합니다. p5에서 사각형은 그것이 그려지기 시작하는 상단 좌측의 좌표값과 더불어 너비(width)와
+ 높이(height)를 정하는 숫자들이 필요합니다.
+ coordinate-system-simple-shapes-p6x1: >-
+ 사각형을 그리는 또 다른 방법으로, 중앙값, 너비(width), 높이값(height) 설정하기가 있습니다. 이 경우, 먼저 상단의
+ setup() 함수에 센터
+ coordinate-system-simple-shapes-p6x2: ' 모드를 불러오고, 그 뒤에 사각형의 중앙값, 너비, 높이값을 지정해야 합니다. p5는 대문자와 소문자 구분에 민감하니 주의하세요!'
+ coordinate-system-simple-shapes-p7x1: >-
+ 마지막으로, 점 두 개 만으로 사각형을 그리는 방법도 있습니다. 바로, 상단 좌측 코너와 하단 우측 코너의 좌표를 지정하는 것이지요.
+ 여기서 우리가 setup() 함수에 포함시킬 모드는 코너
+ coordinate-system-simple-shapes-p7x2: ' 입니다. 그 결과물은 위의 예제와 동일합니다.'
+ coordinate-system-simple-shapes-p8x1: '사각형 그리기에 익숙해졌다면, 타원그리기 '
+ coordinate-system-simple-shapes-p8x2: ' 는 식은죽 먹기지요. 타원을 그리는 원리는 '
+ coordinate-system-simple-shapes-p8x3: ' 와 거의 동일하나, 다만 동일한 좌표값을 가진 사각형의 경계선 안쪽에 그려진다는 점에서 차이가 있습니다. '
+ coordinate-system-simple-shapes-p8x4: ' 함수의 기본 모드 설정은 센터 '
+ coordinate-system-simple-shapes-p8x5: '에 해당합니다. 코너 '
+ coordinate-system-simple-shapes-p8x6: ' 모드로 그리기 위해선 별도 설정이 필요합니다.'
+ coordinate-system-simple-shapes-p9x1: >-
+ 자, 이제 좀 더 완성도있는 그림을 그려볼까요! 아래의 코드는 200x200 픽셀 크기의 캔버스 위에 여러개의 도형을 그립니다.
+ createCanvas() 함수를 사용하여 캔버스의 너비(width)와 높이(height)를 설정할 수 있습니다.
+ teach-desc: 'Teach a p5 workshop or class, or create teaching materials!'
+test-tutorial: null
libraries:
- Libraries: "라이브러리"
- core-libraries: "주요 라이브러리"
- community-libraries: "커뮤니티 라이브러리"
- libraries-created-by: "제작: "
- p5.sound: "p5.sound는 p5에 웹 오디오 기능(오디오 입력, 재생, 분석 합성 등)을 추가합니다. "
- p5.accessibility: "p5.accessibility는 p5 캔버스에 대한 맹인 또는 시각 장애인의 접근성을 향상합니다. "
- asciiart: "p5.asciiart는 p5.js를 아스키(ASCII) 아트로 쉽고 간단하게 변환합니다. 한마디로, p5.js를 위한 아스키 아트 컨버터입니다. "
- p5.ble: "p5.ble은 BLE 기기와 p5 스케치를 연결합니다. "
- blizard.js: "blizard.js는 DOM 조작을 간단하게 처리합니다. "
- p5.bots: "p5.bots를 통해 브라우저, 아두이노, 마이크로프로세서 간의 인터랙션을 만들 수 있습니다. 센서 데이터로 스케치를 만들거나, 스케치에서 LED나 모터를 작동해보세요! "
- p5.clickable: "사용이 편리한, 이벤트 기반 p5.js 버튼 라이브러리입니다."
- p5.cmyk.js: "CMYK 색상 모드."
- p5.collide2D: "p5.collide2D는 p5.js로 만든 2D 도형들 간의 충돌을 감지합니다. "
- p5.createloop: "노이즈와 GIF 기반의 반복 애니메이션을 단 한 줄의 코드로 만들어보세요. "
- p5.dimensions: "p5.dimensions은 p5.js의 벡터 기능을 확장하여 n차원에서 작동하도록 합니다. "
- p5.EasyCam: "패닝, 줌, 회전이 가능한 간단한 3D 카메라 컨트롤. Thomas Diewald가 핵심적으로 기여하였습니다. "
- p5.experience: "확장형 p5.js 라이브러리로, 캔버스 기반 웹 어플리케이션 제작을 위한 이벤트리스닝 기능을 추가할 수 있습니다. "
- p5.func: "p5.func은 시간, 빈도, 그리고 공간 기능 생성을 위한 새로운 객체 및 기능을 제공합니다. "
- p5.geolocation: "p5.geolocation은 사용자 위치를 획득, 관찰, 계산, 지오펜싱(geo-fencing)하기 위한 기술을 제공합니다. "
- p5.gibber: "p5.gibber는 음악 시퀀싱 및 오디오 합성 기능을 빠른 속도로 제공합니다. "
- grafica.js: "grafica.js는 p5.js 스케치상 변형이 쉬운 2D 플롯을 추가합니다. "
- p5.gui: "p5.gui는 p5.js 스케치를 위한 그래픽 유저 인터페이스를 생성합니다. "
- p5.localmessage: "p5.localmessage는 멀티윈도우 스케칭을 위한 스케치 간 로컬 메시지 전송 기능 및 인터페이스를 제공합니다. "
- marching: "래스터에서 벡터로의 변환, 등면."
- mappa: "Mappa는 정적 맵, 타일 맵, 지오 데이터 활용을 위한 툴을 제공합니다. 지리 정보 기반의 시각적 재현물을 제작할 때 용이합니다. "
- ml5.js: "ml5.js는 Tensorflow.js를 기반으로하며, 머신러닝 알고리즘 및 모델에 대한 브라우저상의 접근성을 높입니다. "
- p5.play: "p5.play는 게임과 같은 어플리케이션 제작을 위한 스프라이트(sprite), 애니메이션, 인풋, 충돌 기능을 제공합니다. "
- p5.particle: "파티클은 사용자가 직접 제작한 구조나 기능, 또는 JSON 인풋 데이터를 사용하여 시각적 효과를 만드는 데에 쓰입니다. "
- p5.Riso: "p5.Riso는 석판화와 같은 파일을 생성하는 라이브러리입니다. 스케치를 다양한 색상의 판화처럼 만들어줍니다. "
- rita.js: "RiTa.js는 제너레이티브 문학을 위한 자연어 처리 객체를 제공합니다. "
- RotatingKnobs: "Knob을 만들어 커스텀 그래픽을 회전할 수 있으며, 또 그 범위값을 반환합니다. "
- p5.scenemanager: "p5.SceneManager는 스케치를 여러 단계의 씬들로 구성할 수 있도록 합니다. 각각의 씬은 메인 스케치에 포함된 일부 스케치와도 같습니다. "
- p5.screenPosition: "프로세싱의 screenX 및 screenY 기능을 p5js에 적용합니다."
- p5.scribble: "2D 기본 조형을 손그림으로 표현합니다. 제작: Janneck Wullschleger, 프로세싱 라이브러리 포트 기반 "
- p5.serial: "p5.serial는 시리얼 (RS-232)와 p5 웹 에디터를 지원하는 기기상에서의 직렬 통신을 구현합니다. "
- Shape5: "Shape5는 코딩을 처음 배우는 초등학생을 위한 2D 기본 조형 라이브러리입니다."
- p5.shape.js: "p5.js 프레임워크에 더 많은 기본 도형을 추가하고자 제작된 라이브러리입니다."
- p5.speech: "p5.speech는 웹 스피치 및 스피치 인식 API에 대한 접근 권한을 제공하여, 음성을 인식하고 출력할 수 있는 스케치를 쉽게 만들 수 있게 합니다. "
- p5.start2d.js: "픽셀, 밀리미터, 센티미터 또는 인치 단위의 정적인 2D 아트를 만들기 위한 p5 확장 라이브러리입니다. "
- p5.tiledmap: "p5.tiledmap은 스케치에 지도를 넣기 위한 드로잉 및 도움 기능을 제공합니다. "
- p5.touchgui: "p5.js를 위한 멀티터치 및 마우스 그래픽 유저 인터페이스(GUI) 라이브러리 "
- tramontana: "Tramontana는 인터랙티브 환경 및 공간을 생성하거나, 공간 속 스케일 기능을 프로토타이핑하기 위한 여러가지 기기(iOS, Android, tramontana Board, ...)를 쉽게 쓸 수 있도록 하는 플랫폼입니다. "
- vida: "Vida는 카메라(또는 비디오) 기반의 모션 감지 및 얼룩(blob) 트래킹 기능을 더하는 p5js 라이브러리입니다. "
- p5.voronoi: "p5.voronoi는 p5.js 스케치상 보로노이 다이어그램을 그리고 활용할 수 있는 툴을 제공합니다. "
- p5.3D: "WebGL로 3D 텍스트 및 이미지를 쓸 수 있습니다. "
- using-a-library-title: "라이브러리 이용하기"
- using-a-library1: "라이브러리란 p5.js의 핵심 기능을 확장하거나 추가하는 자바스크립트 코드를 말합니다. 라이브러리에는 크게 두 종류가 있습니다. 주요 라이브러리인 "
- using-a-library3: "의 경우 p5.js 자체 배포물인 반면, 커뮤니티 라이브러리는 커뮤니티 공헌자에 의해 개발, 소유, 유지됩니다."
- using-a-library4: "스케치에 라이브러리를 사용하려면 우선 스케치에 p5.js 링크를 걸고, 그 다음 HTML 파일에 라이브러리 링크를 걸면 됩니다. 링크가 걸린 HTML 파일은 이렇게 보입니다:"
- create-your-own-title: "나만의 라이브러리 만들기"
- create-your-own1: "p5.js는 여러분만의 라이브러리 제작을 환영합니다! 라이브러리 제작에 대해 더 알고 싶다면 "
- create-your-own2: "라이브러리 튜토리얼"
- create-your-own3: "을 확인해보세요. 제작한 라이브러리를 이 페이지에 추가하고 싶다면 "
- create-your-own4: "이 문서를 제출하세요!"
-
+ Libraries: 라이브러리
+ core-libraries: 주요 라이브러리
+ community-libraries: 커뮤니티 라이브러리
+ libraries-created-by: '제작: '
+ p5.sound: 'p5.sound는 p5에 웹 오디오 기능(오디오 입력, 재생, 분석 합성 등)을 추가합니다. '
+ p5.accessibility: 'p5.accessibility는 p5 캔버스에 대한 맹인 또는 시각 장애인의 접근성을 향상합니다. '
+ asciiart: >-
+ p5.asciiart는 p5.js를 아스키(ASCII) 아트로 쉽고 간단하게 변환합니다. 한마디로, p5.js를 위한 아스키 아트
+ 컨버터입니다.
+ p5.ble: 'p5.ble은 BLE 기기와 p5 스케치를 연결합니다. '
+ p5.bots: >-
+ p5.bots를 통해 브라우저, 아두이노, 마이크로프로세서 간의 인터랙션을 만들 수 있습니다. 센서 데이터로 스케치를 만들거나,
+ 스케치에서 LED나 모터를 작동해보세요!
+ p5.clickable: '사용이 편리한, 이벤트 기반 p5.js 버튼 라이브러리입니다.'
+ p5.cmyk.js: CMYK 색상 모드.
+ p5.collide2D: 'p5.collide2D는 p5.js로 만든 2D 도형들 간의 충돌을 감지합니다. '
+ p5.createloop: '노이즈와 GIF 기반의 반복 애니메이션을 단 한 줄의 코드로 만들어보세요. '
+ p5.dimensions: 'p5.dimensions은 p5.js의 벡터 기능을 확장하여 n차원에서 작동하도록 합니다. '
+ p5.EasyCam: '패닝, 줌, 회전이 가능한 간단한 3D 카메라 컨트롤. Thomas Diewald가 핵심적으로 기여하였습니다. '
+ p5.experience: '확장형 p5.js 라이브러리로, 캔버스 기반 웹 어플리케이션 제작을 위한 이벤트리스닝 기능을 추가할 수 있습니다. '
+ p5.func: 'p5.func은 시간, 빈도, 그리고 공간 기능 생성을 위한 새로운 객체 및 기능을 제공합니다. '
+ p5.geolocation: 'p5.geolocation은 사용자 위치를 획득, 관찰, 계산, 지오펜싱(geo-fencing)하기 위한 기술을 제공합니다. '
+ p5.gibber: 'p5.gibber는 음악 시퀀싱 및 오디오 합성 기능을 빠른 속도로 제공합니다. '
+ grafica.js: 'grafica.js는 p5.js 스케치상 변형이 쉬운 2D 플롯을 추가합니다. '
+ p5.gui: 'p5.gui는 p5.js 스케치를 위한 그래픽 유저 인터페이스를 생성합니다. '
+ p5.localmessage: 'p5.localmessage는 멀티윈도우 스케칭을 위한 스케치 간 로컬 메시지 전송 기능 및 인터페이스를 제공합니다. '
+ marching: '래스터에서 벡터로의 변환, 등면.'
+ mappa: 'Mappa는 정적 맵, 타일 맵, 지오 데이터 활용을 위한 툴을 제공합니다. 지리 정보 기반의 시각적 재현물을 제작할 때 용이합니다. '
+ ml5.js: 'ml5.js는 Tensorflow.js를 기반으로하며, 머신러닝 알고리즘 및 모델에 대한 브라우저상의 접근성을 높입니다. '
+ p5.play: 'p5.play는 게임과 같은 어플리케이션 제작을 위한 스프라이트(sprite), 애니메이션, 인풋, 충돌 기능을 제공합니다. '
+ p5.particle: '파티클은 사용자가 직접 제작한 구조나 기능, 또는 JSON 인풋 데이터를 사용하여 시각적 효과를 만드는 데에 쓰입니다. '
+ p5.Riso: 'p5.Riso는 석판화와 같은 파일을 생성하는 라이브러리입니다. 스케치를 다양한 색상의 판화처럼 만들어줍니다. '
+ rita.js: 'RiTa.js는 제너레이티브 문학을 위한 자연어 처리 객체를 제공합니다. '
+ Rotating knobs: Make knobs you can rotate with custom graphics and return value ranges.
+ p5.scenemanager: >-
+ p5.SceneManager는 스케치를 여러 단계의 씬들로 구성할 수 있도록 합니다. 각각의 씬은 메인 스케치에 포함된 일부 스케치와도
+ 같습니다.
+ p5.screenPosition: 프로세싱의 screenX 및 screenY 기능을 p5js에 적용합니다.
+ p5.scribble: '2D 기본 조형을 손그림으로 표현합니다. 제작: Janneck Wullschleger, 프로세싱 라이브러리 포트 기반 '
+ p5.serial: 'p5.serial는 시리얼 (RS-232)와 p5 웹 에디터를 지원하는 기기상에서의 직렬 통신을 구현합니다. '
+ Shape5: Shape5는 코딩을 처음 배우는 초등학생을 위한 2D 기본 조형 라이브러리입니다.
+ p5.shape.js: p5.js 프레임워크에 더 많은 기본 도형을 추가하고자 제작된 라이브러리입니다.
+ p5.speech: >-
+ p5.speech는 웹 스피치 및 스피치 인식 API에 대한 접근 권한을 제공하여, 음성을 인식하고 출력할 수 있는 스케치를 쉽게 만들
+ 수 있게 합니다.
+ p5.start2d.js: '픽셀, 밀리미터, 센티미터 또는 인치 단위의 정적인 2D 아트를 만들기 위한 p5 확장 라이브러리입니다. '
+ p5.tiledmap: 'p5.tiledmap은 스케치에 지도를 넣기 위한 드로잉 및 도움 기능을 제공합니다. '
+ p5.touchgui: 'p5.js를 위한 멀티터치 및 마우스 그래픽 유저 인터페이스(GUI) 라이브러리 '
+ tramontana: >-
+ Tramontana는 인터랙티브 환경 및 공간을 생성하거나, 공간 속 스케일 기능을 프로토타이핑하기 위한 여러가지 기기(iOS,
+ Android, tramontana Board, ...)를 쉽게 쓸 수 있도록 하는 플랫폼입니다.
+ vida: 'Vida는 카메라(또는 비디오) 기반의 모션 감지 및 얼룩(blob) 트래킹 기능을 더하는 p5js 라이브러리입니다. '
+ p5.voronoi: 'p5.voronoi는 p5.js 스케치상 보로노이 다이어그램을 그리고 활용할 수 있는 툴을 제공합니다. '
+ p5.xr: p5로 VR 및 AR 스케치를 작성하기위한 라이브러리.
+ p5.3D: 'WebGL로 3D 텍스트 및 이미지를 쓸 수 있습니다. '
+ using-a-library-title: 라이브러리 이용하기
+ using-a-library1: >-
+ 라이브러리란 p5.js의 핵심 기능을 확장하거나 추가하는 자바스크립트 코드를 말합니다. 라이브러리에는 크게 두 종류가 있습니다. 주요
+ 라이브러리인
+ using-a-library3: '의 경우 p5.js 자체 배포물인 반면, 커뮤니티 라이브러리는 커뮤니티 공헌자에 의해 개발, 소유, 유지됩니다.'
+ using-a-library4: >-
+ 스케치에 라이브러리를 사용하려면 우선 스케치에 p5.js 링크를 걸고, 그 다음 HTML 파일에 라이브러리 링크를 걸면 됩니다. 링크가
+ 걸린 HTML 파일은 이렇게 보입니다:
+ create-your-own-title: 나만의 라이브러리 만들기
+ create-your-own1: 'p5.js는 여러분만의 라이브러리 제작을 환영합니다! 라이브러리 제작에 대해 더 알고 싶다면 '
+ create-your-own2: 라이브러리 튜토리얼
+ create-your-own3: '을 확인해보세요. 제작한 라이브러리를 이 페이지에 추가하고 싶다면 '
+ create-your-own4: 이 문서를 제출하세요!
community:
- community-title: "커뮤니티"
- community-statement-title: "p5.js 커뮤니티 성명서"
- community-statement1: "p5.js는 기술을 재료삼아 예술과 디자인을 창작하는 커뮤니티입니다."
- community-statement2: "우리는 다양한 성 정체성, 젠더 표현, 성적 지향, 인종, 민족, 언어, 사회, 규모, 능력, 계급, 종교, 문화, 하위 문화, 정치 성향, 나이, 기술적 숙련도, 직업, 배경에 속한 사람들의 공동체이자 연대입니다. 모든 사람이 우리 커뮤니티에 시간과 에너지를 할애할 수 있는 게 아니라는 걸 인지하고 있습니다. 그만큼 우리는 여러분의 참여를 환영하고 독려하며, 접근성을 향상하기 위해 늘 노력합니다. 우리 모두는 언제나 배우는 자들입니다."
- community-statement3: "우리가 좋아하는 해시태그는 #noCodeSnobs(우리는 효율성보다 커뮤니티를 우선시합니다), #newKidLove(우리는 모두 한 때 입문자였으니깐요!), #unassumeCore(우리는 상대가 무엇을 알고 있는지에 대해 섣불리 가정하지 않습니다), and #BlackLivesMatter (말할 필요도 없이 중요한 사실이지요!) 입니다."
- in-practice-title: "실천:"
- in-practice1: "우리는 '고고한' 개발자가 아닙니다. 상대가 이미 어떠한 것을 알고 있을거라 섣불리 가정하거나, 모든 사람이 반드시 알아야 할 지식이 있다고 생각하지 않습니다. "
- in-practice2: "피드백이 필요한 경우, 언제든 적극적으로 응합니다."
- in-practice3: "우리는 입문자를 환영하며 타인의 학습을 우선순위에 둡니다. 또, 우리는 모든 업무를 수행할 때 초심자 시절의 열정을 잃지 않습니다. 우리 커뮤니티에 있어 입문자는 숙련자만큼이나 중요한 가치를 더하는 존재입니다. "
- in-practice4: "우리는 언제나 모든 형태의 기여, 공헌, 참여를 적극적으로 인정하고 인증하고자 합니다."
- in-practice5: "우리는 언제나 기꺼이 도움과 안내를 제공합니다."
- in-times-conflict-title: "갈등이 발생할 경우:"
- in-times-conflict1: "서로의 생각에 귀 기울입니다. "
- in-times-conflict2: "명확한 의사소통을 하되, 타인의 감정을 생각합니다."
- in-times-conflict3: "우리가 잘못한 경우에는 그 잘못을 인정하고, 용서를 구하며, 행동에 대한 책임을 집니다. "
- in-times-conflict4: "더 나은 우리 자신과 커뮤니티를 향해 지속적으로 노력합니다. "
- in-times-conflict5: "서로 존중하며 개방된 자세를 유지합니다. "
- in-times-conflict6: "모든 사람의 의견을 존중하고 경청합니다. "
- in-times-conflict7: "사려깊고 친절한 태도로 소통합니다. "
- in-the-future-title: "미래에 우리는: "
- in-the-future1: "지금이 바로 미래입니다."
-
- notes-title: "유의사항"
- notes1: ""
- notes2: "p5.js 행동 강령"
- notes3: "을 참고하세요. p5.js 커뮤니티 성명서는 "
- notes4: "크리에이티브 커먼즈 라이선스(CC)"
- notes5: "에 따라 라이선스가 부여됩니다. 크레딧과 함께 자유로이 공유하고 응용할 수 있습니다."
-
- contribute-title: "기여하기"
- contribute1: "우리 커뮤니티는 다양한 방법으로 도움을 줄 수 있는 열정가 분들을 항시 찾고 있습니다. "
- develop-title: "개발: "
- develop1: "GitHub"
- develop2: "는 코드, 버그와 에러, 개발 이슈 등이 문서화되며, 관련 논의가 진행되는 곳입니다. p5.js 개발에 기여하려면"
- develop3: " 개발 튜토리얼"
- develop4: "을 참고하거나, "
- develop5: "라이브러리를 제작해보세요."
- document-title: "문서화: "
- document1: "문서화 작업은 너무나도 소중하지요! 현재 도움이 필요한 부분으로는 "
- document2: "예제 이전하기"
- document3: ","
- document4: " 문서 추가하기"
- document5: ", 그리고 튜토리얼 제작이 있습니다."
- teach-title: "가르치기: "
- teach1: " 워크샵이나 수업을 통해 친구, 협업자에게 p5.js를 가르치는 것도 좋은 기여 방법입니다. 트위터에서 @p5xjs를 태그해주시면 여러분의 프로젝트를 공유할게요."
- create-title: "창작하기: "
- create1: " p5.js는 사용자들에게 영감을 줄 수 있는 프로젝트를 웹사이트 첫 페이지에 게재합니다. 디자이너, 예술가, 개발자, 프로그래머, 그 누구의 작업도 좋습니다! 여러분이 만든 창의적인 프로젝트를 다음의 메일 주소로 제출해보세요: "
- create2: "hello@p5js.org"
- create3: "."
- donate-title: "함께하기: "
- donate1: " p5.js는 예술가들이 만든 무료 오픈 소스입니다. "
- donate2: "프로세싱 재단"
- donate3: " 기부를 통해 p5.js를 후원해주세요!"
- contributors-conference-title: "p5.js 공헌자 컨퍼런스"
- contributors-conference1: "대부분의 커뮤니티 활동은 온라인에서 진행되지만, 오프라인에서도 일어난답니다! 그동안 두 차례의 공헌자 컨퍼런스가 있었는데요, 미국 피츠버그 소재 카네기 멜론 대학교(Carnegie Mellon University)의 "
- contributors-conference2: "에서 진행된 것이 그 중 하나입니다. 예술가, 디자이너, 개발자, 교육자들이 모여 p5.js의 개선 방향에 대해 논의하였습니다."
- participants-title: "참여자"
- support-title: "지원"
- support1: "공헌자 컨퍼러스는 카네기 멜론 대학교의"
- support2: "에서 열렸습니다. 이 곳은 예술, 과학, 기술, 그리고 문화의 교차점에서, 비정형적, 반-학제적 및 간-기관적 연구를 진행하는 학술랩입니다."
- support3: "이 행사는 "
- support4: "의 기금과 "
- support5: "과"
- support6: "의 지원 덕분에 가능했습니다. 감사합니다!"
- mailing-list-title: "소식지 받기"
- mailing-list-1: "프로세싱 재단의 정기 소식을 수신하려면 이메일 주소를 입력하세요."
-
- 2015contributors-conference-title: "2015년 공헌자 컨퍼런스"
- 2015contributors-conference-date: "5월 25-31일"
- 2015contributors-conference1: "약 30여명의 참여자들이 "
- 2015contributors-conference2: "에 모여, p5.js의 프로그래밍 코드와 문서화 작업을 진전시키고, 커뮤니티를 확장하는 방안에 대해 논의하였습니다. 멀리서는 홍콩, 그리고 시애틀, 로스 엔젤레스, 보스턴, 뉴욕 등지에서 찾아온 참여자들이 함께하였습니다. 대부분의 참여자들이 크리에이티브 기술, 인터랙션 디자인, 그리고 뉴미디어 아트 분야의 전문 종사자였고, 카네기 멜론 미술 및 건축 대학교 출신의 학부생 및 대학원생도 6명 정도 포함하였습니다."
- 2015contributors-conference3: "사진 촬영: 최태윤(Taeyoon Choi)"
- 2015contributors-conference-diversity-title: "다양성"
- 2015contributors-conference-diversity1: "기술 개발 문제 외에도 중요하게 다루어졌던 컨퍼런스 주제는 커뮤니티, 확장, 다양성이었습니다. 컨퍼런스는 패널"
- 2015contributors-conference-diversity2: "다양성: 인종, 젠더, 능력에 대한 7가지의 목소리, FLOSS와 인터넷을 위한 수업"
- 2015contributors-conference-diversity3: "과 함께 시작하였습니다. "
- 2015contributors-conference-diversity4: "패널 진행은 "
- 2015contributors-conference-diversity5: "과"
- 2015contributors-conference-diversity6: "가 맡았으며, "
- 2015contributors-conference-diversity7: "2015년 5월 25일 화요일 카네기 멜론 대학교 Kresge Auditorium 에서 열렸습니다. 연사는"
- 2015contributors-conference-diversity8: "과"
- 2015contributors-conference-diversity9: "였습니다."
- 2015cc_1: "다양한 배경 출신의 참여자들이 미소를 지으며 손으로 p5 사인을 만드는 모습"
- 2015cc_2: "잔디 위에서 뛰놀고, 웃으며, 손을 하늘 위로 들어올리는 참여자들의 모습"
- 2015cc_3: "노트북으로 p5.js 커뮤니티 성명서를 발표하고 있는 여성"
- 2015cc_4: "마이크에 대고 열정적으로 말하고 있는 여성과 그를 쳐다보는 남성 협력자 두 명"
- 2015cc_5: "미소를 띄우며 발표를 경청하는 참여자들 모습"
- 2015cc_6: "마이크에 대고 3명의 여학생들을 향해 p5.js를 설명하는 여성"
- 2015cc_7: "여학생 한명이 마이크에 대고 발표하는 동안, 포스트잇이 붙은 화이트보드를 둘러앉은 참여자들의 모습"
- 2015cc_8: "책상에 둘러앉아 서로의 노트북을 보며 코드를 비교하는 참여자들의 모습"
- 2015cc_9: "프로그래밍에 대한 노트가 적힌 여러가지 색의 포스트잇이 화이트보드에 붙어있는 모습"
- 2015cc_10: "한 교실에서 다양한 기술 능력의 가치를 존중하는 것에 대해 발표하는 여성과 그의 파워포인트를 바라보는 참여자들의 모습"
- 2015cc_11: "대강당 무대 위 단상에서 발표하는 여성과 무대에 앉아있는 세명의 참여자들, 그리고 무대 위 스크린상의 스카이프 화면을 통해 보이는 또다른 세명의 원격 참여자들"
- 2015cc_12: "노트북으로 작업하는 참여자들이 있는 교실 전경"
- 2015cc_13: "둥그렇게 앉아 토론하는 5명의 사람들"
- 2015cc_14: "노트북과 함께 둥그렇게 앉아 자신의 필기를 공유하는 5명의 사람들"
- 2015cc_15: "교실에서 참여자들을 향해 마이크로 발표하는 남성"
- 2019contributors-conference-title: "2019년 공헌자 컨퍼런스"
- 2019contributors-conference-date: "8월 13-18일"
- 2019contributors-conference1: "다학제적 배경을 지닌 35명의 참여자들이 "
- 2019contributors-conference2: "에 모여 p5.js의 프로그래밍 환경과 그 현주소를 탐색하고, 코드 및 문서 개발, 그리고 커뮤니티 확장 방법에 대해 논의하였습니다. 참여자들은 크리에이티브 기술, 인터랙션 디자인, 뉴미디어 아트를 아우르는 다양한 분야의 종사자들로 구성되었으며, 컨퍼런스에서의 논의는 이러한 다학제적인 시각을 바탕으로 진행되었습니다. 참여자 그룹은 접근성, 퍼포먼스 속 음악과 코딩, 크리에이티브 기술 지형, 그리고 국제화를 포함한 여러 주제에 초점을 두었습니다."
- 2019contributors-conference3: "비디오 촬영: 치안치안 예(Qianqian Ye)"
- 2019contributors-conference4: "사진 촬영: 재클린 존슨(Jacquelyn Johnson)"
- outputs: "결과물"
- output1: ". p5.js를 위한 아주 유연한 삼각형, 사각형, 육각형, 그리고 팔각형 묶음 구현. 제작: 아렌 데이비(Aren Davey)"
- output2: ". 복수의 클라이언트를 특정 호스트 페이지에 연결하는 멀티디바이스 및 멀티플레이어 게임을 위한 템플릿 파일. 제작: L05"
- output3: ""
- output3-1: "를 이용한 실험들. softCompile 및 OSC 인터페이스 초기 단계 구현과 더불어 MIDI 셋업에 연결한 데모. p5.js 협업 라이브 코딩 VJ 환경 구현. 제작: 테드 데이비스(Ted Davis)"
- output4: "가상 공간에서의 블랙니스(Blackness)와 젠더를 다룬 패널, 아메리칸 아티스트(American Artist)가 진행하고 shawné michaelain holloway와 LaJuné McMillian이 함께함."
- output5: "에베레스트 핍킨(Everest Pipkin)과 존 챔버스(Jon Chambers)가 진행한 워크숍"
- output6: ""
- output6-1: "p5.js를 위한 노트북 인터페이스"
- output6-2: "의 프로토타입. 제작: 앨리슨 패리쉬(Allison Parrish)"
- output7: "새로운 설치 예술 작품. 제작: Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, 그리고 Jon Chambers."
- output8: "p5.js의 전세계 공헌자를 위한 툴킷"
- output8-1: "제작: Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian Ye, Dorothy R. Santos, 그리고 Yasheng She."
- output9: "비폭력적 크리이에티브 코드 작성법. "
- output9-1: "올리비아 로스(Olivia Ross) 진행 잡지."
- output10: "p5.js 웹사이트의 접근성에 대한 점검. 스크린 리더 접근성 향상 기능을 비롯하여, 홈, 다운로드, 시작하기, 레퍼런스 페이지 등을 업데이트. 기여: Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross, Luis Morales-Navarro, Lauren McCarthy, 그리고 Evelyn Masso"
- output11: "협업 퍼포먼스. 제작: Luisa Pereira, Jun Shern Chan, Shefali Nayak, Sona Lee, Ted Davis, 그리고 Carlos Garcia."
- output12: "퍼포먼스. 제작: 나탈리 브래긴스키(Natalie Braginsky)"
- output13: "p5 에디터를 위한 p5.js 라이브러리 시스템 디자인. 제작: 캐시 타라카지안(Cassie Tarakajian)과 루카 다마스코(Luca Damasco)"
- output14: "p5와 다른 라이브러리 연결을 위한 프로토타입들. 제작: 알렉스 이쑤안 쑤(Alex Yixuan Xu)와 로렌 밸리(Lauren Valley)"
- output15: "클로징 캠프파이어. 진행: 골렌 레빈(Golan Levin)"
- 2019cc_1: "단상 위에서 한 그룹을 향해 발표를 하는 남성"
- 2019cc_2: "긴 테이블에 앉아 점심을 먹으며 토론하는 참여자들"
- 2019cc_3: "교실 속 참가자들의 모습으로, 어떤 이들은 노트북으로 작업하고, 다른 이들은 대화를 나눈다"
- 2019cc_4: "교실에서 노트북으로 작업하는 참여자들의 모습"
- 2019cc_5: "어두운 교실에서 미팅을 하는 참여자들"
- 2019cc_6: "여러 참여자들이 모인 교실에서 발표를 하는 여성"
- 2019cc_7: "많은 이들이 모여있는 교실에서 대화를 나누는 참가자들"
- 2019cc_8: "한 교실에서 동료 참여자를 향해 마이크에 대고 말하는 여성"
- 2019cc_9: "데이터 익명화의 문제점에 대한 글이 투사된 스크린과 그 앞 단상에서 말하는 참여자"
- 2019cc_10: "\"p5.js는 접근성을 향상을 위한 기능 외에는 향후 새로운 기능을 추가하지 않습니다\"라고 적힌 텍스트 앞에 서서, 동료 참여자를 향해 마이크에 대고 말하는 사람"
- 2019cc_11: "동료 참여자를 향해 마이크에 대고 말하는 여성"
- 2019cc_12: "동료 참여자를 향해 마이크에 대고 말하는 남성"
- 2019cc_13: "교실 속, 경청 중인 발표자들을 향해 앉아있는 참여자들"
- 2019cc_14: "교실 속, 경청 중인 발표자를 마주하고 있는 참여자들"
- 2019cc_15: "\"신성한 경계\"라 적힌 스크린을 뒤로하고, 동료 참여자를 향해 마이크에 대고 말하는 여성"
- 2019cc_16: "3D 렌더링된 사람 이미지를 보여주는 패널에 경청하는 참여자들 전경"
- 2019cc_17: "노트북과 함께 테이블에 둘러앉아 TV 스크린 상의 코드를 살펴보는 참여자들"
- 2019cc_18: "등신 크기의 테디 베어 옆에 앉아 노트북으로 작업하는 여성"
- 2019cc_19: "밖에 나와 미소를 짓는 참여자들"
- 2019cc_20: "동그랗게 모여 서서 대화를 나누는 4명의 참여자들"
- 2019cc_21: "밖에 나와 앉아 함께 점심을 먹는 참여자들"
- 2019cc_22: "거대한 U자형 테이블에 둘러앉아 교실 앞쪽을 쳐다보는 참여자들"
- 2019cc_23: "교실 앞에 앉아 마이크에 대고 활력적으로 말하는 남성"
- 2019cc_24: "하늘 향해 손을 들고 활기차게 미소짓는 모습이 담긴 참여자 단체 사진"
- 2019cc_25: "LCD 모니터로 만들어진 캠프파이어에 둘러앉은 사람들"
-
+ community-title: 커뮤니티
+ community-statement-title: p5.js 커뮤니티 성명서
+ community-statement1: p5.js는 기술을 재료삼아 예술과 디자인을 창작하는 커뮤니티입니다.
+ community-statement2: >-
+ 우리는 다양한 성 정체성, 젠더 표현, 성적 지향, 인종, 민족, 언어, 사회, 규모, 능력, 계급, 종교, 문화, 하위 문화, 정치
+ 성향, 나이, 기술적 숙련도, 직업, 배경에 속한 사람들의 공동체이자 연대입니다. 모든 사람이 우리 커뮤니티에 시간과 에너지를 할애할 수
+ 있는 게 아니라는 걸 인지하고 있습니다. 그만큼 우리는 여러분의 참여를 환영하고 독려하며, 접근성을 향상하기 위해 늘 노력합니다. 우리
+ 모두는 언제나 배우는 자들입니다.
+ community-statement3: >-
+ 우리가 좋아하는 해시태그는 #noCodeSnobs(우리는 효율성보다 커뮤니티를 우선시합니다), #newKidLove(우리는 모두 한 때
+ 입문자였으니깐요!), #unassumeCore(우리는 상대가 무엇을 알고 있는지에 대해 섣불리 가정하지 않습니다), and
+ #BlackLivesMatter (말할 필요도 없이 중요한 사실이지요!) 입니다.
+ in-practice-title: '실천:'
+ in-practice1: >-
+ 우리는 '고고한' 개발자가 아닙니다. 상대가 이미 어떠한 것을 알고 있을거라 섣불리 가정하거나, 모든 사람이 반드시 알아야 할 지식이
+ 있다고 생각하지 않습니다.
+ in-practice2: '피드백이 필요한 경우, 언제든 적극적으로 응합니다.'
+ in-practice3: >-
+ 우리는 입문자를 환영하며 타인의 학습을 우선순위에 둡니다. 또, 우리는 모든 업무를 수행할 때 초심자 시절의 열정을 잃지 않습니다. 우리
+ 커뮤니티에 있어 입문자는 숙련자만큼이나 중요한 가치를 더하는 존재입니다.
+ in-practice4: '우리는 언제나 모든 형태의 기여, 공헌, 참여를 적극적으로 인정하고 인증하고자 합니다.'
+ in-practice5: 우리는 언제나 기꺼이 도움과 안내를 제공합니다.
+ in-times-conflict-title: '갈등이 발생할 경우:'
+ in-times-conflict1: '서로의 생각에 귀 기울입니다. '
+ in-times-conflict2: '명확한 의사소통을 하되, 타인의 감정을 생각합니다.'
+ in-times-conflict3: '우리가 잘못한 경우에는 그 잘못을 인정하고, 용서를 구하며, 행동에 대한 책임을 집니다. '
+ in-times-conflict4: '더 나은 우리 자신과 커뮤니티를 향해 지속적으로 노력합니다. '
+ in-times-conflict5: '서로 존중하며 개방된 자세를 유지합니다. '
+ in-times-conflict6: '모든 사람의 의견을 존중하고 경청합니다. '
+ in-times-conflict7: '사려깊고 친절한 태도로 소통합니다. '
+ in-the-future-title: '미래에 우리는: '
+ in-the-future1: 지금이 바로 미래입니다.
+ notes-title: 유의사항
+ notes1: ''
+ notes2: p5.js 행동 강령
+ notes3: '을 참고하세요. p5.js 커뮤니티 성명서는 '
+ notes4: 크리에이티브 커먼즈 라이선스(CC)
+ notes5: 에 따라 라이선스가 부여됩니다. 크레딧과 함께 자유로이 공유하고 응용할 수 있습니다.
+ contribute-title: 기여하기
+ contribute1: '우리 커뮤니티는 다양한 방법으로 도움을 줄 수 있는 열정가 분들을 항시 찾고 있습니다. '
+ develop-title: '개발: '
+ develop1: GitHub
+ develop2: '는 코드, 버그와 에러, 개발 이슈 등이 문서화되며, 관련 논의가 진행되는 곳입니다. p5.js 개발에 기여하려면'
+ develop3: ' 개발 튜토리얼'
+ develop4: '을 참고하거나, '
+ develop5: 라이브러리를 제작해보세요.
+ document-title: '문서화: '
+ document1: '문서화 작업은 너무나도 소중하지요! 현재 도움이 필요한 부분으로는 '
+ document2: 예제 이전하기
+ document3: ','
+ document4: ' 문서 추가하기'
+ document5: ', 그리고 튜토리얼 제작이 있습니다.'
+ teach-title: '가르치기: '
+ teach1: ' 워크샵이나 수업을 통해 친구, 협업자에게 p5.js를 가르치는 것도 좋은 기여 방법입니다. 트위터에서 @p5xjs를 태그해주시면 여러분의 프로젝트를 공유할게요.'
+ create-title: '창작하기: '
+ create1: ' p5.js는 사용자들에게 영감을 줄 수 있는 프로젝트를 웹사이트 첫 페이지에 게재합니다. 디자이너, 예술가, 개발자, 프로그래머, 그 누구의 작업도 좋습니다! 여러분이 만든 창의적인 프로젝트를 다음의 메일 주소로 제출해보세요: '
+ create2: hello@p5js.org
+ create3: .
+ donate-title: '함께하기: '
+ donate1: ' p5.js는 예술가들이 만든 무료 오픈 소스입니다. '
+ donate2: 프로세싱 재단
+ donate3: ' 기부를 통해 p5.js를 후원해주세요!'
+ contributors-conference-title: p5.js 공헌자 컨퍼런스
+ contributors-conference1: >-
+ 대부분의 커뮤니티 활동은 온라인에서 진행되지만, 오프라인에서도 일어난답니다! 그동안 두 차례의 공헌자 컨퍼런스가 있었는데요, 미국
+ 피츠버그 소재 카네기 멜론 대학교(Carnegie Mellon University)의
+ contributors-conference2: '에서 진행된 것이 그 중 하나입니다. 예술가, 디자이너, 개발자, 교육자들이 모여 p5.js의 개선 방향에 대해 논의하였습니다.'
+ participants-title: 참여자
+ support-title: 지원
+ support1: 공헌자 컨퍼러스는 카네기 멜론 대학교의
+ support2: >-
+ 에서 열렸습니다. 이 곳은 예술, 과학, 기술, 그리고 문화의 교차점에서, 비정형적, 반-학제적 및 간-기관적 연구를 진행하는
+ 학술랩입니다.
+ support3: '이 행사는 '
+ support4: '의 기금과 '
+ support5: 과
+ support6: 의 지원 덕분에 가능했습니다. 감사합니다!
+ mailing-list-title: 소식지 받기
+ mailing-list-1: 프로세싱 재단의 정기 소식을 수신하려면 이메일 주소를 입력하세요.
+ 2015contributors-conference-title: 2015년 공헌자 컨퍼런스
+ 2015contributors-conference-date: 5월 25-31일
+ 2015contributors-conference1: '약 30여명의 참여자들이 '
+ 2015contributors-conference2: >-
+ 에 모여, p5.js의 프로그래밍 코드와 문서화 작업을 진전시키고, 커뮤니티를 확장하는 방안에 대해 논의하였습니다. 멀리서는 홍콩,
+ 그리고 시애틀, 로스 엔젤레스, 보스턴, 뉴욕 등지에서 찾아온 참여자들이 함께하였습니다. 대부분의 참여자들이 크리에이티브 기술, 인터랙션
+ 디자인, 그리고 뉴미디어 아트 분야의 전문 종사자였고, 카네기 멜론 미술 및 건축 대학교 출신의 학부생 및 대학원생도 6명 정도
+ 포함하였습니다.
+ 2015contributors-conference3: '사진 촬영: 최태윤(Taeyoon Choi)'
+ 2015contributors-conference-diversity-title: 다양성
+ 2015contributors-conference-diversity1: '기술 개발 문제 외에도 중요하게 다루어졌던 컨퍼런스 주제는 커뮤니티, 확장, 다양성이었습니다. 컨퍼런스는 패널'
+ 2015contributors-conference-diversity2: '다양성: 인종, 젠더, 능력에 대한 7가지의 목소리, FLOSS와 인터넷을 위한 수업'
+ 2015contributors-conference-diversity3: '과 함께 시작하였습니다. '
+ 2015contributors-conference-diversity4: '패널 진행은 '
+ 2015contributors-conference-diversity5: 과
+ 2015contributors-conference-diversity6: '가 맡았으며, '
+ 2015contributors-conference-diversity7: 2015년 5월 25일 화요일 카네기 멜론 대학교 Kresge Auditorium 에서 열렸습니다. 연사는
+ 2015contributors-conference-diversity8: 과
+ 2015contributors-conference-diversity9: 였습니다.
+ 2015cc_1: 다양한 배경 출신의 참여자들이 미소를 지으며 손으로 p5 사인을 만드는 모습
+ 2015cc_2: '잔디 위에서 뛰놀고, 웃으며, 손을 하늘 위로 들어올리는 참여자들의 모습'
+ 2015cc_3: 노트북으로 p5.js 커뮤니티 성명서를 발표하고 있는 여성
+ 2015cc_4: 마이크에 대고 열정적으로 말하고 있는 여성과 그를 쳐다보는 남성 협력자 두 명
+ 2015cc_5: 미소를 띄우며 발표를 경청하는 참여자들 모습
+ 2015cc_6: 마이크에 대고 3명의 여학생들을 향해 p5.js를 설명하는 여성
+ 2015cc_7: '여학생 한명이 마이크에 대고 발표하는 동안, 포스트잇이 붙은 화이트보드를 둘러앉은 참여자들의 모습'
+ 2015cc_8: 책상에 둘러앉아 서로의 노트북을 보며 코드를 비교하는 참여자들의 모습
+ 2015cc_9: 프로그래밍에 대한 노트가 적힌 여러가지 색의 포스트잇이 화이트보드에 붙어있는 모습
+ 2015cc_10: 한 교실에서 다양한 기술 능력의 가치를 존중하는 것에 대해 발표하는 여성과 그의 파워포인트를 바라보는 참여자들의 모습
+ 2015cc_11: >-
+ 대강당 무대 위 단상에서 발표하는 여성과 무대에 앉아있는 세명의 참여자들, 그리고 무대 위 스크린상의 스카이프 화면을 통해 보이는 또다른
+ 세명의 원격 참여자들
+ 2015cc_12: 노트북으로 작업하는 참여자들이 있는 교실 전경
+ 2015cc_13: 둥그렇게 앉아 토론하는 5명의 사람들
+ 2015cc_14: 노트북과 함께 둥그렇게 앉아 자신의 필기를 공유하는 5명의 사람들
+ 2015cc_15: 교실에서 참여자들을 향해 마이크로 발표하는 남성
+ 2019contributors-conference-title: 2019년 공헌자 컨퍼런스
+ 2019contributors-conference-date: 8월 13-18일
+ 2019contributors-conference1: '다학제적 배경을 지닌 35명의 참여자들이 '
+ 2019contributors-conference2: >-
+ 에 모여 p5.js의 프로그래밍 환경과 그 현주소를 탐색하고, 코드 및 문서 개발, 그리고 커뮤니티 확장 방법에 대해 논의하였습니다.
+ 참여자들은 크리에이티브 기술, 인터랙션 디자인, 뉴미디어 아트를 아우르는 다양한 분야의 종사자들로 구성되었으며, 컨퍼런스에서의 논의는
+ 이러한 다학제적인 시각을 바탕으로 진행되었습니다. 참여자 그룹은 접근성, 퍼포먼스 속 음악과 코딩, 크리에이티브 기술 지형, 그리고
+ 국제화를 포함한 여러 주제에 초점을 두었습니다.
+ 2019contributors-conference3: '비디오 촬영: 치안치안 예(Qianqian Ye)'
+ 2019contributors-conference4: '사진 촬영: 재클린 존슨(Jacquelyn Johnson)'
+ outputs: 결과물
+ output1: '. p5.js를 위한 아주 유연한 삼각형, 사각형, 육각형, 그리고 팔각형 묶음 구현. 제작: 아렌 데이비(Aren Davey)'
+ output2: '. 복수의 클라이언트를 특정 호스트 페이지에 연결하는 멀티디바이스 및 멀티플레이어 게임을 위한 템플릿 파일. 제작: L05'
+ output3: ''
+ output3-1: >-
+ 를 이용한 실험들. softCompile 및 OSC 인터페이스 초기 단계 구현과 더불어 MIDI 셋업에 연결한 데모. p5.js 협업
+ 라이브 코딩 VJ 환경 구현. 제작: 테드 데이비스(Ted Davis)
+ output4: >-
+ 가상 공간에서의 블랙니스(Blackness)와 젠더를 다룬 패널, 아메리칸 아티스트(American Artist)가 진행하고 shawné
+ michaelain holloway와 LaJuné McMillian이 함께함.
+ output5: 에베레스트 핍킨(Everest Pipkin)과 존 챔버스(Jon Chambers)가 진행한 워크숍
+ output6: ''
+ output6-1: p5.js를 위한 노트북 인터페이스
+ output6-2: '의 프로토타입. 제작: 앨리슨 패리쉬(Allison Parrish)'
+ output7: >-
+ 새로운 설치 예술 작품. 제작: Stalgia Grigg, LaJuné McMillian, Aatish Bhatia, 그리고 Jon
+ Chambers.
+ output8: p5.js의 전세계 공헌자를 위한 툴킷
+ output8-1: >-
+ 제작: Aarón Montoya-Moraga, Kenneth Lim, Guillermo Montecinos, Qianqian Ye,
+ Dorothy R. Santos, 그리고 Yasheng She.
+ output9: '비폭력적 크리이에티브 코드 작성법. '
+ output9-1: 올리비아 로스(Olivia Ross) 진행 잡지.
+ output10: >-
+ p5.js 웹사이트의 접근성에 대한 점검. 스크린 리더 접근성 향상 기능을 비롯하여, 홈, 다운로드, 시작하기, 레퍼런스 페이지 등을
+ 업데이트. 기여: Claire Kearney-Volpe, Sina Bahram, Kate Hollenbach, Olivia Ross,
+ Luis Morales-Navarro, Lauren McCarthy, 그리고 Evelyn Masso
+ output11: >-
+ 협업 퍼포먼스. 제작: Luisa Pereira, Jun Shern Chan, Shefali Nayak, Sona Lee, Ted
+ Davis, 그리고 Carlos Garcia.
+ output12: '퍼포먼스. 제작: 나탈리 브래긴스키(Natalie Braginsky)'
+ output13: >-
+ p5 에디터를 위한 p5.js 라이브러리 시스템 디자인. 제작: 캐시 타라카지안(Cassie Tarakajian)과 루카
+ 다마스코(Luca Damasco)
+ output14: >-
+ p5와 다른 라이브러리 연결을 위한 프로토타입들. 제작: 알렉스 이쑤안 쑤(Alex Yixuan Xu)와 로렌 밸리(Lauren
+ Valley)
+ output15: '클로징 캠프파이어. 진행: 골렌 레빈(Golan Levin)'
+ 2019cc_1: 단상 위에서 한 그룹을 향해 발표를 하는 남성
+ 2019cc_2: 긴 테이블에 앉아 점심을 먹으며 토론하는 참여자들
+ 2019cc_3: '교실 속 참가자들의 모습으로, 어떤 이들은 노트북으로 작업하고, 다른 이들은 대화를 나눈다'
+ 2019cc_4: 교실에서 노트북으로 작업하는 참여자들의 모습
+ 2019cc_5: 어두운 교실에서 미팅을 하는 참여자들
+ 2019cc_6: 여러 참여자들이 모인 교실에서 발표를 하는 여성
+ 2019cc_7: 많은 이들이 모여있는 교실에서 대화를 나누는 참가자들
+ 2019cc_8: 한 교실에서 동료 참여자를 향해 마이크에 대고 말하는 여성
+ 2019cc_9: 데이터 익명화의 문제점에 대한 글이 투사된 스크린과 그 앞 단상에서 말하는 참여자
+ 2019cc_10: >-
+ "p5.js는 접근성을 향상을 위한 기능 외에는 향후 새로운 기능을 추가하지 않습니다"라고 적힌 텍스트 앞에 서서, 동료 참여자를 향해
+ 마이크에 대고 말하는 사람
+ 2019cc_11: 동료 참여자를 향해 마이크에 대고 말하는 여성
+ 2019cc_12: 동료 참여자를 향해 마이크에 대고 말하는 남성
+ 2019cc_13: '교실 속, 경청 중인 발표자들을 향해 앉아있는 참여자들'
+ 2019cc_14: '교실 속, 경청 중인 발표자를 마주하고 있는 참여자들'
+ 2019cc_15: '"신성한 경계"라 적힌 스크린을 뒤로하고, 동료 참여자를 향해 마이크에 대고 말하는 여성'
+ 2019cc_16: 3D 렌더링된 사람 이미지를 보여주는 패널에 경청하는 참여자들 전경
+ 2019cc_17: 노트북과 함께 테이블에 둘러앉아 TV 스크린 상의 코드를 살펴보는 참여자들
+ 2019cc_18: 등신 크기의 테디 베어 옆에 앉아 노트북으로 작업하는 여성
+ 2019cc_19: 밖에 나와 미소를 짓는 참여자들
+ 2019cc_20: 동그랗게 모여 서서 대화를 나누는 4명의 참여자들
+ 2019cc_21: 밖에 나와 앉아 함께 점심을 먹는 참여자들
+ 2019cc_22: 거대한 U자형 테이블에 둘러앉아 교실 앞쪽을 쳐다보는 참여자들
+ 2019cc_23: 교실 앞에 앉아 마이크에 대고 활력적으로 말하는 남성
+ 2019cc_24: 하늘 향해 손을 들고 활기차게 미소짓는 모습이 담긴 참여자 단체 사진
+ 2019cc_25: LCD 모니터로 만들어진 캠프파이어에 둘러앉은 사람들
books:
- books-title: "출판물"
- book-1-title: "Getting Started with p5.js (p5.js 시작하기)"
- book-1-authors: "Lauren McCarthy, Casey Reas, Ben Fry 저. 삽화: 최태윤."
- book-1-publisher: "2015년 10월 Maker Media 출판. "
- book-1-pages: "246 페이지. "
- book-1-type: "페이퍼백."
- book-1-description: "p5.js의 리드 개발자와 프로세싱의 창립자들이 저술한 이 책은, 자바스크립트와 HTML을 통해 오늘날 웹아 보다 창의적으로 사용될 수 있는 가능성을 소개합니다."
- book-1-order-a: "O'Reilly에서 인쇄물/e북 주문하기"
- book-1-order-b: "아마존에서 주문하기"
- book-2-title: "Introduction to p5.js (스페인어 에디션)"
- book-2-authors: "Lauren McCarthy, Casey Reas, Ben Fry 저. 번역: Aarón Montoya-Moraga. 삽화: 최태윤."
- book-2-publisher: "2018년 Processing Foundation, Inc. 출판. "
- book-2-pages: "246 페이지. "
- book-2-type: "소프트커버."
- book-2-description: "p5.js의 리드 개발자와 프로세싱의 창립자들이 저술한 이 책은, 자바스크립트와 HTML을 통해 오늘날 웹이 보다 창의적으로 사용될 수 있는 가능성을 소개합니다."
- book-2-order-a: "Processing Foundation Press에서 PDF 주문하기"
- book-2-order-b: "아마존에서 인쇄물 주문하기"
- book-3-title: "Generative Design(제너레이티브 디자인)"
- book-3-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni 저."
- book-3-publisher: "2018년 10월 30일 Princeton Architectural Press 출판; 별쇄본. "
- book-3-pages: "255 페이지. "
- book-3-type: "페이퍼백."
- book-3-description: "p5.js의 자바스크립트와 같은 간단한 언어를 통해, 예술가들과 창작자들은 인터랙티브 타이포그래피와 섬유로부터, 3D 프린팅 가구, 그리고 복잡하고 우아한 인포그래픽 등에 이르는 모든 것을 만들 수 있습니다."
- book-3-order-a: "Princeton Architectural Press에서 주문하기"
- book-3-order-b: "아마존에서 주문하기"
- book-4-title: "Generative Gestaltung (제너레이티브 디자인 독일어 에디션)"
- book-4-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-4-publisher: "2018년 1월 Schmidt Hermann Verlag 출판. "
- book-4-pages: "256 페이지."
- book-4-type: "하드커버."
- book-4-description: "p5.js의 자바스크립트와 같은 간단한 언어를 통해, 예술가들과 창작자들은 인터랙티브 타이포그래피와 섬유로부터, 3D 프린팅 가구, 그리고 복잡하고 우아한 인포그래픽 등에 이르는 모든 것을 만들 수 있습니다."
- book-4-order-a: "Verlag Hermann Schmidt에서 주문하기"
- book-4-order-b: "아마존에서 주문하기"
- book-5-title: "Learn JavaScript with p5.js (p5.js로 자바스크립트 배우기)"
- book-5-authors: "Engin Arslan 저."
- book-5-publisher: "2018년 Apress 출판. "
- book-5-pages: "217 페이지."
- book-5-type: "페이퍼백."
- book-5-description: "널리 사용되는 자바스크립트와 그 프로그래밍 라이브러리인 p5.js을 통해 아주 매력적이고 시각적인 방식으로 코딩에 입문하세요. 이 책에서 습득할 수 있는 기술은 수많은 산업계에서도 호환되는 것이며, 웹 어플리케이션, 로봇 프로그래밍, 제너레이티브 아트를 제작하는 데에도 쓰입니다."
- book-5-order-a: "Apress에서 주문하기"
- book-5-order-b: "아마존에서 주문하기"
-
+ books-title: 출판물
+ book-1-title: Getting Started with p5.js (p5.js 시작하기)
+ book-1-authors: 'Lauren McCarthy, Casey Reas, Ben Fry 저. 삽화: 최태윤.'
+ book-1-publisher: '2015년 10월 Maker Media 출판. '
+ book-1-pages: '246 페이지. '
+ book-1-type: 페이퍼백.
+ book-1-description: >-
+ p5.js의 리드 개발자와 프로세싱의 창립자들이 저술한 이 책은, 자바스크립트와 HTML을 통해 오늘날 웹아 보다 창의적으로 사용될 수
+ 있는 가능성을 소개합니다.
+ book-1-order-a: O'Reilly에서 인쇄물/e북 주문하기
+ book-1-order-b: 아마존에서 주문하기
+ book-2-title: Introduction to p5.js (스페인어 에디션)
+ book-2-authors: >-
+ Lauren McCarthy, Casey Reas, Ben Fry 저. 번역: Aarón Montoya-Moraga. 삽화:
+ 최태윤.
+ book-2-publisher: '2018년 Processing Foundation, Inc. 출판. '
+ book-2-pages: '246 페이지. '
+ book-2-type: 소프트커버.
+ book-2-description: >-
+ p5.js의 리드 개발자와 프로세싱의 창립자들이 저술한 이 책은, 자바스크립트와 HTML을 통해 오늘날 웹이 보다 창의적으로 사용될 수
+ 있는 가능성을 소개합니다.
+ book-2-order-a: Processing Foundation Press에서 PDF 주문하기
+ book-2-order-b: 아마존에서 인쇄물 주문하기
+ book-3-title: Generative Design(제너레이티브 디자인)
+ book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni 저.'
+ book-3-publisher: '2018년 10월 30일 Princeton Architectural Press 출판; 별쇄본. '
+ book-3-pages: '255 페이지. '
+ book-3-type: 페이퍼백.
+ book-3-description: >-
+ p5.js의 자바스크립트와 같은 간단한 언어를 통해, 예술가들과 창작자들은 인터랙티브 타이포그래피와 섬유로부터, 3D 프린팅 가구,
+ 그리고 복잡하고 우아한 인포그래픽 등에 이르는 모든 것을 만들 수 있습니다.
+ book-3-order-a: Princeton Architectural Press에서 주문하기
+ book-3-order-b: 아마존에서 주문하기
+ book-4-title: Generative Gestaltung (제너레이티브 디자인 독일어 에디션)
+ book-4-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-4-publisher: '2018년 1월 Schmidt Hermann Verlag 출판. '
+ book-4-pages: 256 페이지.
+ book-4-type: 하드커버.
+ book-4-description: >-
+ p5.js의 자바스크립트와 같은 간단한 언어를 통해, 예술가들과 창작자들은 인터랙티브 타이포그래피와 섬유로부터, 3D 프린팅 가구,
+ 그리고 복잡하고 우아한 인포그래픽 등에 이르는 모든 것을 만들 수 있습니다.
+ book-4-order-a: Verlag Hermann Schmidt에서 주문하기
+ book-4-order-b: 아마존에서 주문하기
+ book-5-title: Learn JavaScript with p5.js (p5.js로 자바스크립트 배우기)
+ book-5-authors: Engin Arslan 저.
+ book-5-publisher: '2018년 Apress 출판. '
+ book-5-pages: 217 페이지.
+ book-5-type: 페이퍼백.
+ book-5-description: >-
+ 널리 사용되는 자바스크립트와 그 프로그래밍 라이브러리인 p5.js을 통해 아주 매력적이고 시각적인 방식으로 코딩에 입문하세요. 이 책에서
+ 습득할 수 있는 기술은 수많은 산업계에서도 호환되는 것이며, 웹 어플리케이션, 로봇 프로그래밍, 제너레이티브 아트를 제작하는 데에도
+ 쓰입니다.
+ book-5-order-a: Apress에서 주문하기
+ book-5-order-b: 아마존에서 주문하기
+ book-6-title: >-
+ Aesthetic Programming: A Handbook of Software Studies (미학적 프로그래밍: 소프트웨어학을 위한
+ 핸드북)
+ book-6-authors: 'Winnie Soon, Geoff Cox 저. '
+ book-6-publisher: '2020년 Open Humanities Press 출판. '
+ book-6-pages: '298 페이지. '
+ book-6-type: 하드커버.
+ book-6-description: >-
+ 이 책은 p5.js 기반의 미학적 프로그래밍과 그 성찰적 실천을 소개합니다. 현존하는 기술적 대상과 패러다임을 이해하고 질문하며, 또
+ 보다 넓은 생태-사회-기술 체제를 다시-프로그래밍 하는 가능성으로서의 프로그래밍 교육을 제시합니다.
+ book-6-order-a: PDF 파일 다운로드 (무료)
+ book-6-order-b: Barnes & Noble에서 주문하기
examples:
- Examples: "예제"
- back-examples: "돌아가기"
- Structure: "구조"
- Form: "도형"
- Data: "데이터"
- Arrays: "배열"
- Control: "컨트롤"
- Image: "이미지"
- Color: "색상"
- Math: "수학"
- Simulate: "시뮬레이션"
- Interaction: "인터랙션"
- Objects: "객체"
- Lights: "조명"
- Motion: "모션"
- Instance_Mode: "인스턴스 모드"
- Dom: "DOM"
- Drawing: "드로잉"
- Transform: "변형"
- Typography: "타이포그래피"
- 3D: "3D"
- Input: "입력"
- Advanced_Data: "고급 데이터"
- Sound: "사운드"
- Mobile: "모바일"
- Hello_P5: "안녕 p5"
-
+ Examples: 예제
+ back-examples: 돌아가기
+ Structure: 구조
+ Form: 도형
+ Data: 데이터
+ Arrays: 배열
+ Control: 컨트롤
+ Image: 이미지
+ Color: 색상
+ Math: 수학
+ Simulate: 시뮬레이션
+ Interaction: 인터랙션
+ Objects: 객체
+ Lights: 조명
+ Motion: 모션
+ Instance_Mode: 인스턴스 모드
+ Dom: DOM
+ Drawing: 드로잉
+ Transform: 변형
+ Typography: 타이포그래피
+ 3D: 3D
+ Input: 입력
+ Advanced_Data: 고급 데이터
+ Sound: 사운드
+ Mobile: 모바일
+ Hello_P5: 안녕 p5
reference:
- Reference: "레퍼런스"
-
+ Reference: 레퍼런스
showcase:
- showcase-title: "쇼케이스"
- showcase-intro1: "쇼케이스는 2019년 강예은 "
- showcase-intro2: "이 제작, 기획하였으며, 2020년에는 코니 리우 "
- showcase-intro3: "가 새로운 기획을 선보입니다. 쇼케이스는 p5.js를 보다 흥미진진하고 포용적으로 만든 창작물, 학습물, 오픈 소스 사례들을 기쁘게 소개합니다. 이렇게 우리는 함께 커뮤니티를 만들어 나가는게 아닐까요?:) 2019년 여름, 우리는 p5.js 기반의 다양한 프로젝트들을 소개한 바 있습니다."
- showcase-intro4: "현재 2020년 여름 쇼케이스를 모집중입니다. 아래의 버튼을 눌러 자신 또는 타인의 p5.js 작업을 추천해주세요!"
- nominate-project: "프로젝트 추천하기"
- showcase-featuring: "선정 프로젝트"
- project-tag-art: "예술"
- project-tag-design: "디자인"
- project-tag-code: "코드"
- project-tag-curriculum: "커리큘럼"
- project-tag-documentation: "문서화"
- project-tag-game: "게임"
- project-tag-library: "라이브러리"
- project-tag-organizing: "행사 또는 모임"
- project-tag-tool: "툴"
- project-tag-tutorial: "튜토리얼"
- project-roni: "각도기 드로잉 프로그램(Programmed Plotter Drawings)"
- credit-roni: "Roni Cantor"
- description-roni: "p5.js로 제작한 싸인파(Sine wave)와 선형 보간(lerp)으로, 실물 각도기와 펜과 연결되어 드로잉하고, SVG 파일로 내보내기 가능."
- project-phuong: "날아라 아이리(Airi Flies)"
- credit-phuong: "Phuong Ngo"
- description-phuong: "p5.play로 제작된 게임으로, PEW라고 말해 아이리(Airi)가 날 수 있도록 돕는다. 사용자들이 자신의 안전 지대를 벗어난 곳에서도 행동, 외모, 발언에 상관없이 자신감을 갖게하고자 하는 취지에서 제작."
- project-daein: "Chillin'"
- credit-daein: "정대인(Dae In Chung)"
- description-daein: "모바일 기기의 모션 센서와 p5.js를 활용한 인터랙티브 타이포그래픽 포스터"
- project-qianqian: "Qtv"
- credit-qianqian: "치안치안 예(Qianqian Ye)"
- description-qianqian: "입문자를 위한 p5.js 튜토리얼을 포함하여, 코딩, 예술, 그리고 기술에 대해 다루는 1분 길이의 중국어 영상 채널들. 유투브, 인스타그램, 비리비리(Bilibili), 틱톡(TikTok)에서 확인 가능."
- project-casey-louise: "p5.js 셰이더(Shaders)"
- credit-casey-louise: "캐시 콘치나(Casey Conchinha), 루이스 레셀(Louise Lessél)"
- description-casey-louise: "셰이더(Shaders)란 무엇이고, 이를 p5.js에서 왜, 그리고 어떻게 사용하는지 배울 수 있는 자료."
- project-moon-xin: "움직이는 반응형 포스터(Moving Responsive Posters)"
- credit-moon-xin: "장문(Moon Jang), 씬 씬(Xin Xin), 그리고 학생들"
- description-moon-xin: "브라우저 기반의 움직이는 포스터로, 그래픽 시스템과 변형 메소드, 그리고 p5.js를 사용하여 8자 미만 단어가 내포하는 바를 표현. 조지아 대학교(University of Georgia)의 그래픽 디자인 과정인 'Visual Narrative Systems'의 수강생들이 디자인."
-
- created-by: "Created By"
- pronouns-female: "(she/her)"
- creator-from-roni-cantor: "From Toronto, Canada"
- project-links: "Project Links"
- project-links-text-1-roni-cantor: "Example sketch in p5.js Web Editor"
- project-links-text-2-roni-cantor: "AxiDraw V3 demo video"
- project-q-1-1: "What are you up to?"
- project-q-1-2: "How did you get started with p5.js?"
- project-a-1-1-roni-cantor: "I just graduated from Ryerson University's New Media program. Coming from 4 years of coding and making robots, I decided to take a break and play with some more traditional forms of art—while still coding and playing with robots."
- project-a-1-2-roni-cantor: "I first started using p5.js at "
- project-a-1-3-roni-cantor: "! After using "
- project-a-1-4-roni-cantor: " for many years, I wanted to try something new."
- project-q-2: "How did you use p5.js in this project?"
- project-a-2-1-roni-cantor: "I used p5.js in this project to generate the sine wave and lerp (linear interpolation) formulas and display the visuals in the "
- project-a-2-2-roni-cantor: ". I then used a feature in my code that exported my programmed graphic into an "
- project-a-2-3-roni-cantor: " file. I needed an SVG file to give to the plotter—an "
- project-a-2-4-roni-cantor: "—so that it understood where to draw the lines that I programmed. I sent this information to the plotter with a program called "
- project-a-2-5-roni-cantor: "!"
- project-q-3: "What's your favorite p5.js feature?"
- project-a-3-roni-cantor: " because lines are fun and \"lerp\" is a fun word to say!"
- project-q-4: "Did you face any challenges working on this project? If so, how did you overcome them?"
- project-a-4-roni-cantor: "It was my first time using p5.js, Inkscape, and a plotter! I really benefited from the people around me who had used p5 before, as well as online guides and forums."
- project-q-5: "What's a cool thing we should check out?"
- project-a-5-roni-cantor: " on Instagram—super cool analog plotter stuff."
- project-q-6: "Where can people learn more about you?"
- project-a-6-roni-cantor: " (Instagram)"
-
- project-resources: "Project Resources"
- creator-from-qianqian: "Los Angeles, California"
- interview-link-qianqian: "Processing Foundation interview with Qianqian Ye"
- project-a-1-1-qianqian: "I am a Chinese artist and designer based in Los Angeles."
- project-a-1-2-qianqian: "My partner introduced me to p5.js, which I learned mainly by watching free online video tutorials. My first p5.js project was drawing some shapes with different colors."
- project-a-2-1-qianqian: "This project started with an idea of teaching my mom, who lives in China and doesn’t speak English, to code with p5.js. This project was difficult on multiple levels, and I wanted to start by identifying the main reasons why it’s more challenging for someone like my mother to learn to code—primarily due to the lack of free creative coding education resources. Most of the free resources to learn creative coding are unavailable in China. The p5.js tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are inaccessible in China because of internet censorship."
- project-a-2-2-qianqian: "I learned a lot from YouTube videos such as the "
- project-a-2-3-qianqian: ", but the more I watched coding tutorials online, the more I realized how difficult it is to find other womxn and people of color teaching coding, especially in Mandarin. I wanted to help other Chinese womxn relate to creative coding."
- project-a-2-4-qianqian: "I am working on opening up the video channels to other Chinese creatives who want to contribute to the educational resource together, like interviews and guest tutorials. If you are interested in teaching/talking about creative coding in Mandarin, HMU!"
- project-a-3-1-qianqian: "The "
- project-a-3-2-qianqian: " is my favorite feature. It makes web-based creative coding seamless."
- project-a-4-1-qianqian: "Learning to code in a second language was difficult and the lack of community made this process even harder. I hope to speak from my experience as a beginner and someone who once felt like an outsider to the creative coding and video tutorial world."
- project-a-4-2-qianqian: "I spend a lot of time researching the latest technology for my videos. In the end, I decided on using my phone to record and iMovie to edit. I hope to encourage others that it doesn’t take a lot of expensive gears to get started making instructional videos."
- project-a-4-3-qianqian: "Another issue I came across was my own fear of putting myself online. I first had to get over my anxiety of making mistakes in the videos or receiving negative comments online. Often womxn and people of color are targets for online harassment. I’m hoping to help set an example for other womxn and people of color that it’s ok to put yourselves online and strengthen your communities by sharing your knowledge. Eventually, we will be able to stop online harassment by creating strong diverse communities."
- project-a-5-1-qianqian: "I am very excited about "
- project-a-5-2-qianqian: " in LA."
-
- creator-from-phuong: "From Kyiv, Ukraine"
- project-a-1-1-phuong: "I'm a creative coder and designer, a "
- link-1-phuong: "Play Airi Flies!"
- link-2-phuong: "Code for AiriFlies on GitHub"
- link-3-phuong: "More info in Phuong Ngo's portfolio"
- project-a-1-2-phuong: " diversity scholarship recipient, and just a curious creature."
- project-a-1-3-phuong: "I was taking a course at the School of Machines in Berlin this summer called! \""
- project-a-1-4-phuong: ",\" mainly taught by "
- project-a-2-1-phuong: "I used p5.js to work on the visual part of the game. The animation sprites for Airi and the ghosts were drawn on an iPad app called "
- project-a-2-2-phuong: " and then integrated into "
- project-a-2-3-phuong: " code. I mainly used examples at p5.play as a reference."
- project-a-2-4-phuong: "For the endless scrolling background, I found a "
- p5-sketch-by-chjno-phuong: "p5 sketch by chjno"
- project-a-2-5-phuong: ". I set a condition so whenever the word \"pew\" or a mouse click was detected, the scrolling speed would change to make an illusion of Airi flying up. When the user does not do anything, the scrolling speed is negative, which makes it look like Airi is falling down."
- project-a-2-6-phuong: "For sound recognition, I used "
- project-a-2-7-phuong: " (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word \"pew\" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with "
- project-a-3-1-phuong: "I really love how easily you can create, manipulate, and delete HTML blocks and classes with the "
- project-a-3-2-phuong: " via "
- project-a-3-3-phuong: " etc. But my most favorite function is "
- project-a-3-4-phuong: ", since this is where you create magic."
- project-a-4-1-phuong: "There were a lot of challenges simply because p5.js was something new to me. I did not work much with JavaScript in general before. Reading documentation and searching for similar examples helped a lot."
- project-a-5-1-phuong: "Check out "
- school-of-machines-phuong: "School of Machines' courses"
- project-a-5-2-phuong: "! They try hard to connect the most creative people in the world and they do it well so far. ❤️"
-
- pronouns-male: "(he/him)"
- creator-from-chung: "From Baltimore, Maryland"
- link-1-casey-louise: "p5.js Shaders guide"
- link-2-casey-louise: "Glitch collection of p5.js shader examples"
- link-1-chung: "View Chillin'"
- link-2-chung: "Code for Chillin' on GitHub"
- link-3-chung: "More info in Dae In Chung's Portfolio"
- project-a-1-1-chung: "I am a graphic designer and a faculty member at Maryland Institute College of Art, where I mainly teach coding (with p5.js and Processing, of course) and motion graphics."
- project-a-1-2-chung: "I have been using "
- project-a-1-3-chung: " for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online."
- project-a-2-1-chung: "This summer, I gave myself a challenge of making typographic posters with coding, and this is one of the posters I made. I didn’t know until very recently that I could use motion sensor data with p5.js. I was also watching "
- dan-shiffman-matterjs-tutorial: "Dan Shiffman’s matter.js tutorial videos"
- project-a-2-2-chung: ", so I thought why not combine the two and practice what I was learning?"
- project-a-3-1-chung: "There are many things I love about p5.js such as the online community and beginner friendliness. What I really like right now is the "
- project-a-3-2-chung: ", with which I can not only work online for myself but also share URLs quickly in the present mode. For this project in particular, I had to do a lot of testing on my phone, and it was much easier and quicker than committing to GitHub."
- project-a-4-1-chung: "I had some troubles with handling font, alpha channel and z-depth in "
- project-a-4-2-chung: " mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of "
- project-a-4-3-chung: " and build a tool for myself."
- project-a-5-1-chung: "As mentioned above, if you want to render out frames and video files out of p5.js sketches, check out my "
- project-a-5-2-chung: " and let me know what you think."
-
- creator-from-casey-louise: "From New York, New York"
- project-a-1-1-casey-louise: "Casey: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces, physical and digital."
- project-a-1-2-casey-louise: "Louise: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces based on sensor technologies."
- project-a-1-3-casey-louise: "Casey: I started learning p5.js in 2018 in my first semester at ITP, though I had been dabbling in "
- project-a-1-4-casey-louise: " since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone."
- project-a-1-5-casey-louise: "Louise: I initially learned p5.js to make a website I was creating more playful. I’m a C# programmer, so this was a good segway into JavaScript for me."
- project-a-2-1-casey-louise: "Casey: I was putting off learning shaders for a long time, and I was also curious if I could use them in p5.js. Then I heard about a grant for open source, storytelling, and learning resource projects at ITP called "
- project-a-2-2-casey-louise: ". Since I wasn't finding much in the way of p5.js + shader documentation, I decided to figure out how they're implemented in p5.js and create a resource for others to learn. When I told Louise about the project, she was immediately excited about learning and teaching shaders in p5.js. She's been great about making sure the project is a learning resource and not just a collection of examples."
- project-a-3-1-casey-louise: "Casey: Does "
- project-a-3-2-casey-louise: " count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work."
- project-a-3-3-casey-louise: "Louise: My favorite feature is "
- project-a-3-4-casey-louise: " and "
- project-a-3-5-casey-louise: " for transformation of the coordinate system to make generative visuals."
- project-a-4-1-casey-louise: "Casey: The beginning of the project (figuring out how things work) was us reaching out to amazing people, asking questions, and asking for permission to use their examples in our project. "
- adam-ferris-repo-casey-louise: "Adam Ferriss' GitHub repo"
- project-a-4-2-casey-louise: " really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to "
- project-a-4-3-casey-louise: " and "
- project-a-4-4-casey-louise: " (who worked on the "
- webgl-casey-louise: "WebGL implementation in p5.js"
- project-a-4-5-casey-louise: "), and they were super helpful."
- project-a-4-6-casey-louise: "Louise: The learning curve was pretty steep for getting shaders into p5. Luckily, there were some very well-documented examples on GitHub by Adam Ferriss. Our aim was to do so in a way that a complete beginner can understand how to implement it, so it was as much a technical challenge as it was a challenge in teaching code to strangers and beginners. Here we drew inspiration from the way the "
- openframeworks-book-casey-louise: "openFrameworks book"
- project-a-4-7-casey-louise: " is written. A fun \"hey, it’s not hard and you can do it too\" approach is what we believe in."
- project-a-5-1-casey-louise: "Check out the "
- project-a-5-2-casey-louise: " to explore our peers' amazing grant projects!"
-
- pronouns-nonbinary: "(they/them)"
- creator-from-moon: "From Athens, Georgia"
- posters-by: "Posters By"
- project-a-1-1-moon: "Moon: I'm a graphic designer, visual artist, and design educator. This summer, I taught a graphic design course in the University of Georgia Cortona program in Italy, introducing some basics of p5.js. This fall, I am planning to teach and to study digital platforms at UGA."
- project-a-1-2-moon: "My former colleague, "
- project-a-1-3-moon: ", invited me to "
- project-a-1-4-moon: " in "
- pcd-la-moon: "LA in January 2019"
- project-a-1-5-moon: ". They helped me with the tools and logics of p5.js. It was an excellent teaching and learning experience."
- project-a-2-1-moon: "We followed basic tutorials, "
- codetrain-moon: "Daniel's videos on YouTube"
- project-a-2-2-moon: ", and "
- p5-reference-moon: "Reference on the p5.js website"
- project-a-2-3-moon: "."
- project-a-3-1-moon: "My favorite function is related to "
- project-a-3-2-moon: " and "
- project-a-3-3-moon: ": "
- project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
- project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
- project-a-5-1-moon: "Check out the "
- project-a-5-2-moon: " in Milan, Italy."
-
+ showcase-title: 쇼케이스
+ showcase-intro1: '쇼케이스는 2019년 강예은 '
+ showcase-intro2: '이 제작, 기획하였으며, 2020년에는 코니 리우 '
+ showcase-intro3: >-
+ 가 새로운 기획을 선보입니다. 쇼케이스는 p5.js를 보다 흥미진진하고 포용적으로 만든 창작물, 학습물, 오픈 소스 사례들을 기쁘게
+ 소개합니다. 이렇게 우리는 함께 커뮤니티를 만들어 나가는게 아닐까요?:) 2019년 여름, 우리는 p5.js 기반의 다양한 프로젝트들을
+ 소개한 바 있습니다.
+ showcase-intro4: 현재 2020년 여름 쇼케이스를 모집중입니다. 아래의 버튼을 눌러 자신 또는 타인의 p5.js 작업을 추천해주세요!
+ nominate-project: 프로젝트 추천하기
+ showcase-featuring: 선정 프로젝트
+ project-tag-art: 예술
+ project-tag-design: 디자인
+ project-tag-code: 코드
+ project-tag-curriculum: 커리큘럼
+ project-tag-documentation: 문서화
+ project-tag-game: 게임
+ project-tag-library: 라이브러리
+ project-tag-organizing: 행사 또는 모임
+ project-tag-tool: 툴
+ project-tag-tutorial: 튜토리얼
+ project-roni: 각도기 드로잉 프로그램(Programmed Plotter Drawings)
+ credit-roni: Roni Cantor
+ description-roni: >-
+ p5.js로 제작한 사인파(Sine wave)와 선형 보간(lerp)으로, 실물 각도기와 펜과 연결되어 드로잉하고, SVG 파일로
+ 내보내기 가능.
+ project-phuong: 날아라 아이리(Airi Flies)
+ credit-phuong: Phuong Ngo
+ description-phuong: >-
+ p5.play로 제작된 게임으로, PEW라고 말해 아이리(Airi)가 날 수 있도록 돕는다. 사용자들이 자신의 안전 지대를 벗어난
+ 곳에서도 행동, 외모, 발언에 상관없이 자신감을 갖게하고자 하는 취지에서 제작.
+ project-daein: Chillin'
+ credit-daein: 정대인(Dae In Chung)
+ description-daein: 모바일 기기의 모션 센서와 p5.js를 활용한 인터랙티브 타이포그래픽 포스터
+ project-qianqian: Qtv
+ credit-qianqian: 치안치안 예(Qianqian Ye)
+ description-qianqian: >-
+ 입문자를 위한 p5.js 튜토리얼을 포함하여, 코딩, 예술, 그리고 기술에 대해 다루는 1분 길이의 중국어 영상 채널들. 유투브,
+ 인스타그램, 비리비리(Bilibili), 틱톡(TikTok)에서 확인 가능.
+ project-casey-louise: p5.js 셰이더(Shaders)
+ credit-casey-louise: '캐시 콘치나(Casey Conchinha), 루이스 레셀(Louise Lessél)'
+ description-casey-louise: '셰이더(Shaders)란 무엇이고, 이를 p5.js에서 왜, 그리고 어떻게 사용하는지 배울 수 있는 자료.'
+ project-moon-xin: 움직이는 반응형 포스터(Moving Responsive Posters)
+ credit-moon-xin: '장문(Moon Jang), 씬 씬(Xin Xin), 그리고 학생들'
+ description-moon-xin: >-
+ 브라우저 기반의 움직이는 포스터로, 그래픽 시스템과 변형 메소드, 그리고 p5.js를 사용하여 8자 미만 단어가 내포하는 바를 표현.
+ 조지아 대학교(University of Georgia)의 그래픽 디자인 과정인 'Visual Narrative Systems'의
+ 수강생들이 디자인.
+ created-by: Created By
+ pronouns-female: (she/her)
+ creator-from-roni-cantor: 'From Toronto, Canada'
+ project-links: Project Links
+ project-links-text-1-roni-cantor: Example sketch in p5.js Web Editor
+ project-links-text-2-roni-cantor: AxiDraw V3 demo video
+ project-q-1-1: What are you up to?
+ project-q-1-2: How did you get started with p5.js?
+ project-a-1-1-roni-cantor: >-
+ I just graduated from Ryerson University's New Media program. Coming from 4
+ years of coding and making robots, I decided to take a break and play with
+ some more traditional forms of art—while still coding and playing with
+ robots.
+ project-a-1-2-roni-cantor: 'I first started using p5.js at '
+ project-a-1-3-roni-cantor: '! After using '
+ project-a-1-4-roni-cantor: ' for many years, I wanted to try something new.'
+ project-q-2: How did you use p5.js in this project?
+ project-a-2-1-roni-cantor: >-
+ I used p5.js in this project to generate the sine wave and lerp (linear
+ interpolation) formulas and display the visuals in the
+ project-a-2-2-roni-cantor: >-
+ . I then used a feature in my code that exported my programmed graphic into
+ an
+ project-a-2-3-roni-cantor: ' file. I needed an SVG file to give to the plotter—an '
+ project-a-2-4-roni-cantor: >-
+ —so that it understood where to draw the lines that I programmed. I sent
+ this information to the plotter with a program called
+ project-a-2-5-roni-cantor: '!'
+ project-q-3: What's your favorite p5.js feature?
+ project-a-3-roni-cantor: ' because lines are fun and "lerp" is a fun word to say!'
+ project-q-4: >-
+ Did you face any challenges working on this project? If so, how did you
+ overcome them?
+ project-a-4-roni-cantor: >-
+ It was my first time using p5.js, Inkscape, and a plotter! I really
+ benefited from the people around me who had used p5 before, as well as
+ online guides and forums.
+ project-q-5: What's a cool thing we should check out?
+ project-a-5-roni-cantor: ' on Instagram—super cool analog plotter stuff.'
+ project-q-6: Where can people learn more about you?
+ project-a-6-roni-cantor: ' (Instagram)'
+ project-resources: Project Resources
+ creator-from-qianqian: 'Los Angeles, California'
+ interview-link-qianqian: Processing Foundation interview with Qianqian Ye
+ project-a-1-1-qianqian: I am a Chinese artist and designer based in Los Angeles.
+ project-a-1-2-qianqian: >-
+ My partner introduced me to p5.js, which I learned mainly by watching free
+ online video tutorials. My first p5.js project was drawing some shapes with
+ different colors.
+ project-a-2-1-qianqian: >-
+ This project started with an idea of teaching my mom, who lives in China and
+ doesn’t speak English, to code with p5.js. This project was difficult on
+ multiple levels, and I wanted to start by identifying the main reasons why
+ it’s more challenging for someone like my mother to learn to code—primarily
+ due to the lack of free creative coding education resources. Most of the
+ free resources to learn creative coding are unavailable in China. The p5.js
+ tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are
+ inaccessible in China because of internet censorship.
+ project-a-2-2-qianqian: 'I learned a lot from YouTube videos such as the '
+ project-a-2-3-qianqian: >-
+ , but the more I watched coding tutorials online, the more I realized how
+ difficult it is to find other womxn and people of color teaching coding,
+ especially in Mandarin. I wanted to help other Chinese womxn relate to
+ creative coding.
+ project-a-2-4-qianqian: >-
+ I am working on opening up the video channels to other Chinese creatives who
+ want to contribute to the educational resource together, like interviews and
+ guest tutorials. If you are interested in teaching/talking about creative
+ coding in Mandarin, HMU!
+ project-a-3-1-qianqian: 'The '
+ project-a-3-2-qianqian: ' is my favorite feature. It makes web-based creative coding seamless.'
+ project-a-4-1-qianqian: >-
+ Learning to code in a second language was difficult and the lack of
+ community made this process even harder. I hope to speak from my experience
+ as a beginner and someone who once felt like an outsider to the creative
+ coding and video tutorial world.
+ project-a-4-2-qianqian: >-
+ I spend a lot of time researching the latest technology for my videos. In
+ the end, I decided on using my phone to record and iMovie to edit. I hope to
+ encourage others that it doesn’t take a lot of expensive gears to get
+ started making instructional videos.
+ project-a-4-3-qianqian: >-
+ Another issue I came across was my own fear of putting myself online. I
+ first had to get over my anxiety of making mistakes in the videos or
+ receiving negative comments online. Often womxn and people of color are
+ targets for online harassment. I’m hoping to help set an example for other
+ womxn and people of color that it’s ok to put yourselves online and
+ strengthen your communities by sharing your knowledge. Eventually, we will
+ be able to stop online harassment by creating strong diverse communities.
+ project-a-5-1-qianqian: 'I am very excited about '
+ project-a-5-2-qianqian: ' in LA.'
+ creator-from-phuong: 'From Kyiv, Ukraine'
+ project-a-1-1-phuong: 'I''m a creative coder and designer, a '
+ link-1-phuong: Play Airi Flies!
+ link-2-phuong: Code for AiriFlies on GitHub
+ link-3-phuong: More info in Phuong Ngo's portfolio
+ project-a-1-2-phuong: ' diversity scholarship recipient, and just a curious creature.'
+ project-a-1-3-phuong: >-
+ I was taking a course at the School of Machines in Berlin this summer
+ called! "
+ project-a-1-4-phuong: '," mainly taught by '
+ project-a-2-1-phuong: >-
+ I used p5.js to work on the visual part of the game. The animation sprites
+ for Airi and the ghosts were drawn on an iPad app called
+ project-a-2-2-phuong: ' and then integrated into '
+ project-a-2-3-phuong: ' code. I mainly used examples at p5.play as a reference.'
+ project-a-2-4-phuong: 'For the endless scrolling background, I found a '
+ p5-sketch-by-chjno-phuong: p5 sketch by chjno
+ project-a-2-5-phuong: >-
+ . I set a condition so whenever the word "pew" or a mouse click was
+ detected, the scrolling speed would change to make an illusion of Airi
+ flying up. When the user does not do anything, the scrolling speed is
+ negative, which makes it look like Airi is falling down.
+ project-a-2-6-phuong: 'For sound recognition, I used '
+ project-a-2-7-phuong: ' (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word "pew" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with '
+ project-a-3-1-phuong: >-
+ I really love how easily you can create, manipulate, and delete HTML blocks
+ and classes with the
+ project-a-3-2-phuong: ' via '
+ project-a-3-3-phuong: ' etc. But my most favorite function is '
+ project-a-3-4-phuong: ', since this is where you create magic.'
+ project-a-4-1-phuong: >-
+ There were a lot of challenges simply because p5.js was something new to me.
+ I did not work much with JavaScript in general before. Reading documentation
+ and searching for similar examples helped a lot.
+ project-a-5-1-phuong: 'Check out '
+ school-of-machines-phuong: School of Machines' courses
+ project-a-5-2-phuong: >-
+ ! They try hard to connect the most creative people in the world and they do
+ it well so far. ❤️
+ pronouns-male: (he/him)
+ creator-from-chung: 'From Baltimore, Maryland'
+ link-1-casey-louise: p5.js Shaders guide
+ link-2-casey-louise: Glitch collection of p5.js shader examples
+ link-1-chung: View Chillin'
+ link-2-chung: Code for Chillin' on GitHub
+ link-3-chung: More info in Dae In Chung's Portfolio
+ project-a-1-1-chung: >-
+ I am a graphic designer and a faculty member at Maryland Institute College
+ of Art, where I mainly teach coding (with p5.js and Processing, of course)
+ and motion graphics.
+ project-a-1-2-chung: 'I have been using '
+ project-a-1-3-chung: ' for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online.'
+ project-a-2-1-chung: >-
+ This summer, I gave myself a challenge of making typographic posters with
+ coding, and this is one of the posters I made. I didn’t know until very
+ recently that I could use motion sensor data with p5.js. I was also
+ watching
+ dan-shiffman-matterjs-tutorial: Dan Shiffman’s matter.js tutorial videos
+ project-a-2-2-chung: ', so I thought why not combine the two and practice what I was learning?'
+ project-a-3-1-chung: >-
+ There are many things I love about p5.js such as the online community and
+ beginner friendliness. What I really like right now is the
+ project-a-3-2-chung: >-
+ , with which I can not only work online for myself but also share URLs
+ quickly in the present mode. For this project in particular, I had to do a
+ lot of testing on my phone, and it was much easier and quicker than
+ committing to GitHub.
+ project-a-4-1-chung: 'I had some troubles with handling font, alpha channel and z-depth in '
+ project-a-4-2-chung: ' mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of '
+ project-a-4-3-chung: ' and build a tool for myself.'
+ project-a-5-1-chung: >-
+ As mentioned above, if you want to render out frames and video files out of
+ p5.js sketches, check out my
+ project-a-5-2-chung: ' and let me know what you think.'
+ creator-from-casey-louise: 'From New York, New York'
+ project-a-1-1-casey-louise: >-
+ Casey: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces, physical and digital.
+ project-a-1-2-casey-louise: >-
+ Louise: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces based on sensor technologies.
+ project-a-1-3-casey-louise: >-
+ Casey: I started learning p5.js in 2018 in my first semester at ITP, though
+ I had been dabbling in
+ project-a-1-4-casey-louise: ' since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.'
+ project-a-1-5-casey-louise: >-
+ Louise: I initially learned p5.js to make a website I was creating more
+ playful. I’m a C# programmer, so this was a good segway into JavaScript for
+ me.
+ project-a-2-1-casey-louise: >-
+ Casey: I was putting off learning shaders for a long time, and I was also
+ curious if I could use them in p5.js. Then I heard about a grant for open
+ source, storytelling, and learning resource projects at ITP called
+ project-a-2-2-casey-louise: >-
+ . Since I wasn't finding much in the way of p5.js + shader documentation, I
+ decided to figure out how they're implemented in p5.js and create a resource
+ for others to learn. When I told Louise about the project, she was
+ immediately excited about learning and teaching shaders in p5.js. She's been
+ great about making sure the project is a learning resource and not just a
+ collection of examples.
+ project-a-3-1-casey-louise: 'Casey: Does '
+ project-a-3-2-casey-louise: ' count as a feature? I also love having the ability to share my programs on the web so that people don''t have to install special software or come to NYC to see my work.'
+ project-a-3-3-casey-louise: 'Louise: My favorite feature is '
+ project-a-3-4-casey-louise: ' and '
+ project-a-3-5-casey-louise: ' for transformation of the coordinate system to make generative visuals.'
+ project-a-4-1-casey-louise: >-
+ Casey: The beginning of the project (figuring out how things work) was us
+ reaching out to amazing people, asking questions, and asking for permission
+ to use their examples in our project.
+ adam-ferris-repo-casey-louise: Adam Ferriss' GitHub repo
+ project-a-4-2-casey-louise: ' really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to '
+ project-a-4-3-casey-louise: ' and '
+ project-a-4-4-casey-louise: ' (who worked on the '
+ webgl-casey-louise: WebGL implementation in p5.js
+ project-a-4-5-casey-louise: '), and they were super helpful.'
+ project-a-4-6-casey-louise: >-
+ Louise: The learning curve was pretty steep for getting shaders into p5.
+ Luckily, there were some very well-documented examples on GitHub by Adam
+ Ferriss. Our aim was to do so in a way that a complete beginner can
+ understand how to implement it, so it was as much a technical challenge as
+ it was a challenge in teaching code to strangers and beginners. Here we drew
+ inspiration from the way the
+ openframeworks-book-casey-louise: openFrameworks book
+ project-a-4-7-casey-louise: ' is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.'
+ project-a-5-1-casey-louise: 'Check out the '
+ project-a-5-2-casey-louise: ' to explore our peers'' amazing grant projects!'
+ pronouns-nonbinary: (they/them)
+ creator-from-moon: 'From Athens, Georgia'
+ posters-by: Posters By
+ project-a-1-1-moon: >-
+ Moon: I'm a graphic designer, visual artist, and design educator. This
+ summer, I taught a graphic design course in the University of Georgia
+ Cortona program in Italy, introducing some basics of p5.js. This fall, I am
+ planning to teach and to study digital platforms at UGA.
+ project-a-1-2-moon: 'My former colleague, '
+ project-a-1-3-moon: ', invited me to '
+ project-a-1-4-moon: ' in '
+ pcd-la-moon: LA in January 2019
+ project-a-1-5-moon: >-
+ . They helped me with the tools and logics of p5.js. It was an excellent
+ teaching and learning experience.
+ project-a-2-1-moon: 'We followed basic tutorials, '
+ codetrain-moon: Daniel's videos on YouTube
+ project-a-2-2-moon: ', and '
+ p5-reference-moon: Reference on the p5.js website
+ project-a-2-3-moon: .
+ project-a-3-1-moon: 'My favorite function is related to '
+ project-a-3-2-moon: ' and '
+ project-a-3-3-moon: ': '
+ project-a-3-4-moon: >-
+ . I was able to use and to teach this tool to visualize various ideas about
+ time in motion.
+ project-a-4-1-moon: >-
+ It was challenging for me, a beginner, to understand the overall structure
+ of p5.js and how code works in general. I had to repeat the p5.js basics a
+ couple of times, and then I drew a chart to memorize and to teach the way I
+ understood the p5.js structure and code with strong constraints I set up. It
+ was an excellent teaching and learning experience.
+ project-a-5-1-moon: 'Check out the '
+ project-a-5-2-moon: ' in Milan, Italy.'
teach:
- teach-title2: "가르치기"
- teach-intro1: "모든 교육은 고유의 목표, 메시지, 조건, 환경을 담습니다. "
- teach-intro2: "이 페이지는 p5.js 워크숍, 강의, 교보재 아카이브를 통해 전세계 p5 교육자 및 학습자들을 연결합니다. 여러분의 p5 교육 경험을 "
- teach-intro3: "이 링크에서 공유 또는 추천"
- teach-intro4: "하세요!"
- teach-heading: "p5 교육 자료"
- teach-search-filter: "검색 필터"
- teach-filter1: "다양성 & 포용 : "
- teach-filter1-label1: "젠더"
- teach-filter1-label2: "인종 & 민족"
- teach-filter1-label3: "언어"
- teach-filter1-label4: "뉴로타입"
- teach-filter1-label5: "장애"
- teach-filter1-label6: "계급"
- teach-filter1-label7: "종교"
- teach-filter1-label8: "(하위-)문화"
- teach-filter1-label9: "정치적 견해"
- teach-filter1-label10: "나이"
- teach-filter1-label11: "기술적 숙련도"
- teach-filter1-label12: "직업"
- teach-filter1-label13: "#noCodeSnobs"
- teach-filter1-label14: "#newKidLove"
- teach-filter1-label15: "#unassumeCore"
- teach-filter1-label16: "#BlackLivesMatter"
-
- teach-filter2: "장소 : "
- teach-filter2-label1: "아프리카"
- teach-filter2-label2: "아시아"
- teach-filter2-label3: "유럽"
- teach-filter2-label4: "북미"
- teach-filter2-label5: "오세아니아"
- teach-filter2-label6: "남미"
- teach-filter2-label7: "가상-온라인 "
-
- teach-filter3: "년도 : "
-
- teach-filter4: "난이도 : "
- teach-filter4-label1: "초급"
- teach-filter4-label2: "중급"
- teach-filter4-label3: "고급"
-
- teach-case-subtitle1: "장소 & 일시"
- teach-case-subtitle2: "참여자"
- teach-case-subtitle3: "난이도"
- teach-case-subtitle4: "목표"
- teach-case-subtitle5: "방법 & 교보재"
-
- teach-case1-title: "p5.js à l'Ubuntu Party!"
- teach-case1-lead-name: "Basile Pesin"
- teach-case1-content1: "2020 우분투 행사(Ubuntu Party), "
- teach-case1-content1-1: "Cité des Sciences et de l'Industrie, Paris, France"
- teach-case1-content2: "Any age, including children and parents, young and older adults."
- teach-case1-content3: "Advanced"
- teach-case1-content4: "To introduce a new public to programming through fun and compelling examples. "
- teach-case1-content5: "Method: in-person workshop, 1 hour per session, with different participant each times. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board."
- teach-case1-content5-1: "Materials: The exercises I gave where accessible through p5.js web-editor links available in "
-
- teach-case2-title: "Making The Thing that Makes the Thing: Exploring Generative Art & Design with p5.js"
- teach-case2-lead-name: "Priti Pandurangan & Ajith Ranka"
- teach-case2-content1: "National Institute of Design, Bangalore"
- teach-case2-content1-1: "2020 February 8, 2:30-4:00 PM"
- teach-case2-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case2-content3: "Priti: Intermediate & Ajith: Advanced"
- teach-case2-content4: "To explore generative art & design and recreate some classical works with p5.js. "
- teach-case2-content5: "Methods: In-person, collaborative, hands-on workshop."
- teach-case2-content5-1: "Materials: "
- teach-case2-content5-2: "course page "
- teach-case2-content5-3: "linking to sketches on the p5 editor, "
- teach-case2-content5-4: "interactive reference guide "
- teach-case2-content5-5: "to p5 basics"
-
- teach-case3-title: "CC Fest (Creative Coding Festival)"
- teach-case3-lead-name: "Saber"
- teach-case3-speech: "Love p5.js. It has meant so much to me, my students, and this community."
- teach-case3-content1: " New York, Los Angeles, San Francisco, Virtual-Online "
- teach-case3-content1-1: " Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual"
- teach-case3-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case3-content3: "Intermediate"
- teach-case3-content4: "To build a teacher and student community around p5 for middle and high school."
- teach-case3-content5: "A half-day of workshop led by volunteer teachers. We saw lots of different methods and materials. Most used some sort of slides or documentation, some live coding using an editor, with work time for participant to remix."
- teach-case3-content5-1: "CC Fest Lessons page"
- teach-case3-content5-2: " for teaching materials"
- teach-case3-content5-3: "More photos"
-
- teach-case4-title: "Taller Introducción a la Programación Creativa con p5.js"
- teach-case4-lead-name: "Aarón Montoya-Moraga"
- teach-case4-speech: "p5.js is my happy place "
- teach-case4-content1: " PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online "
- teach-case4-content1-1: " 2018 November 14, 3 hours"
- teach-case4-content2: "I had around 16 students in the workshop, and a team including 3 people from the PlusCode festival, and one person at the venue."
- teach-case4-content3: "Elementary, Intermediate, Advanced"
- teach-case4-content4: "Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish :)"
- teach-case4-content5: "I used the material on this "
- teach-case4-content5-1: "GitHub repo"
- teach-case4-content5-2: ", we used the p5.js web editor, we had a three hour long workshop"
- teach-case4-content5-3: "+CODE electronic art festival 2018, Argentina"
- teach-case4-content5-4: ", Medium"
-
- teach-case5-title: "Introduction to Generative Drawing"
- teach-case5-lead-name: "Adam Herst"
- teach-case5-speech: "My greatest source of uncertainty in developing the workshop was whether it was trying to teach art to programmers or to teach programming to artists."
- teach-case5-content1: "Inter/Access"
- teach-case5-content1-1: " (artist-run centre), Toronto, Ontario, Canada"
- teach-case5-content1-2: "In-person with a self-paced workbook for remote work"
- teach-case5-content1-3: " 2020 February 12, 7PM-9PM"
- teach-case5-content2: "15 artists"
- teach-case5-content3: "Elementary"
- teach-case5-content4: "To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form."
- teach-case5-content5: "A printed workbook with activities that used the p5.js web editor to show how translate an physical drawing into a digital drawing."
- teach-case5-content5-1: "Processing Community Day 2019: Generative Drawing at Inter/Access"
- teach-case5-content5-2: "Introduction to Generative Drawing Letter PDF"
- teach-case5-content5-3: "Introduction to Generative Drawing Booklet PDF"
-
- teach-case6-title: "Open Lecture, Creative Coding: 2020"
- teach-case6-lead-name: "Shunsuke Takawo"
- teach-case6-speech: "I love p5.js because it's so easy to read and write code in p5.js. Coding in your everyday life!"
- teach-case6-content1: " Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online "
- teach-case6-content1-1: " 2020 March 16-18, 1-7 PM"
- teach-case6-content2: "Students of Kyoto University of Art and Design, and anyone."
- teach-case6-content3: "Elementary"
- teach-case6-content4: "Making code as a tool for artistic expression."
- teach-case6-content5: "Dropbox Paper, p5.js web editor."
- teach-case6-content5-1: "Syllabus"
- teach-case6-content5-2: "Day 1"
- teach-case6-content5-3: "Day 2"
- teach-case6-content5-4: "Day 3"
- teach-case6-content5-5: ", YouTube"
-
- teach-case7-title: "Creative Coding for Static Graphics"
- teach-case7-lead-name: "Shunsuke Takawo"
- teach-case7-speech: "Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you to give it a try!"
- teach-case7-content1: " FabCafe MTRL, Tokyo, Japan"
- teach-case7-content1-1: " 2019 September 15, 4-7 PM "
- teach-case7-content2: "Anyone who wants to try coding in p5.js."
- teach-case7-content3: "Intermediate"
- teach-case7-content4: "To code from the graphic design's perspective."
- teach-case7-content5: "Dropbox Paper, p5.js web editor."
- teach-case7-content5-1: "Syllabus & Material"
-
- teach-case8-title: "Generative Typography"
- teach-case8-lead-name: "Dae In Chung"
- teach-case8-content1: " Baltimore, Maryland, USA & Virtual-Online "
- teach-case8-content1-1: " 2019 January 21 - May 08, every Wednesday, 4-10 PM"
- teach-case8-content2: "14 undergrads and grad students who had little to no experience in coding."
- teach-case8-content3: "Elementary"
- teach-case8-content4: "Experiment with typographic forms and structures through computation."
- teach-case8-content5: "Methods: online/offline lectures and critiques."
- teach-case8-content5-1: "Materials: p5js online editor, Github, youtube tutorials."
- teach-case8-content5-2: "Works of participants"
-
- teach-case9-title: "Machine Learning for the Web"
- teach-case9-lead-name: "Yining Shi"
- teach-case9-content1: " ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA"
- teach-case9-content1-1: "2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM"
- teach-case9-content2: "Students at Interactive Telecommunications Program, New York University. 16 people."
- teach-case9-content3: "Elementary, Intermediate"
- teach-case9-content4: "The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js."
- teach-case9-content5: "This class is a mix of lectures, coding sessions, group discussions, and presentations. I used "
- teach-case9-content5-1: "GitHub"
- teach-case9-content5-2: " to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes."
- teach-case9-content5-3: "Methods: online/offline lectures and critiques."
-
- teach-case10-title: "Introduction to p5.js and JavaScript"
- teach-case10-lead-name: "Nico Reski"
- teach-case10-content1: " Currently available as self-study at own pace with accompanying slides, linked below."
- teach-case10-content3: "Beginner, Elementary"
- teach-case10-content4: "Introduce learners (potentially with no coding experiences at all) to the very basics of p5.js (and JavaScript), in order to encourage creative coding and enable them to pursue own projects in a safe environment."
- teach-case10-content5: "p5.js source code (for the introductory project), JavaScript source code (illustrating some basic JavaScript functionalities), accompanying slides in .pdf format, all hosted publicly on GitHub. "
- teach-case10-content5-1: "Overview"
- teach-case10-content5-2: " of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage."
-
- teach-case11-title: "Digital Weaving & Physical Computing Workshop Series"
- teach-case11-lead-name: "Qianqian Ye & Evelyn Masso"
- teach-case11-content1: " Womens Center for Creative Work (WCCW), Los Angeles, CA, US"
- teach-case11-content1-1: " 2019 October 19 - November 02, every Saturday 3-6 PM"
- teach-case11-content2: "15 women and non-binary artists, designer, makers, programers. "
- teach-case11-content3: "Elementary"
- teach-case11-content4: "Over the course of three workshops, we will draw and create patterns using p5.js, an open-source graphical library; we will learn and apply computational concepts to transform patterns and finally, we will bring a weaving to life with electronic microcontrollers."
- teach-case11-content5: "Methods: small team session"
- teach-case11-content5-1: "Materials: slides, p5.js web editor, pen and paper to draw pattern, physical pattern weaving tool."
- teach-case11-content5-2: "Workshop Slide #1"
- teach-case11-content5-3: "Workshop Slide #2"
- teach-case11-content5-4: "Workshop Information"
- teach-case11-content5-5: " on WCCW website."
-
- teach-case12-title: "Signing Coders"
- teach-case12-lead-name: "Taeyoon Choi"
- teach-case12-speech: "I'm working on a new series of coding class for Disabled students in South Korea. I'm researching about the pedagogy and translation. I plan to hold workshops in December 2020. The project is supported by the Open Society Foundation Human Rights Initiative and Korea Disability Arts & Culture Center."
- teach-case12-content1: " WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea."
- teach-case12-content1-1: "5 Sessions, each 2~3 hours"
- teach-case12-content2: "Deaf and Hard of Hearing students age 10~50 who live in NYC."
- teach-case12-content3: "Elementary"
- teach-case12-content4: "To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts."
- teach-case12-content5: "We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts."
- teach-case12-content5-1: "Syllabus & Material"
- teach-case12-content5-2: "More photos"
+ teach-title2: 가르치기
+ teach-intro1: '모든 교육은 고유의 목표, 메시지, 조건, 환경을 담습니다. '
+ teach-intro2: '이 페이지는 p5.js 워크숍, 강의, 교보재 아카이브를 통해 전세계 p5 교육자 및 학습자들을 연결합니다. 여러분의 p5 교육 경험을 '
+ teach-intro3: 이 링크에서 공유 또는 추천
+ teach-intro4: 하세요!
+ teach-heading: p5 교육 자료
+ teach-search-filter: 검색 필터
+ teach-filter1: '다양성 & 포용 : '
+ teach-filter1-label1: 젠더
+ teach-filter1-label2: 인종 & 민족
+ teach-filter1-label3: 언어
+ teach-filter1-label4: 뉴로타입
+ teach-filter1-label5: 장애
+ teach-filter1-label6: 계급
+ teach-filter1-label7: 종교
+ teach-filter1-label8: (하위-)문화
+ teach-filter1-label9: 정치적 견해
+ teach-filter1-label10: 나이
+ teach-filter1-label11: 기술적 숙련도
+ teach-filter1-label12: 직업
+ teach-filter1-label13: '#noCodeSnobs'
+ teach-filter1-label14: '#newKidLove'
+ teach-filter1-label15: '#unassumeCore'
+ teach-filter1-label16: '#BlackLivesMatter'
+ teach-filter2: '장소 : '
+ teach-filter2-label1: 아프리카
+ teach-filter2-label2: 아시아
+ teach-filter2-label3: 유럽
+ teach-filter2-label4: 북미
+ teach-filter2-label5: 오세아니아
+ teach-filter2-label6: 남미
+ teach-filter2-label7: '가상-온라인 '
+ teach-filter3: '년도 : '
+ teach-filter4: '난이도 : '
+ teach-filter4-label1: 초급
+ teach-filter4-label2: 중급
+ teach-filter4-label3: 고급
+ teach-case-subtitle1: 장소 & 일시
+ teach-case-subtitle2: 참여자
+ teach-case-subtitle3: 난이도
+ teach-case-subtitle4: 목표
+ teach-case-subtitle5: 방법 & 교보재
+ teach-case1-title: p5.js at Ubuntu Party!
+ teach-case1-lead-name: Basile Pesin
+ teach-case1-content1: '2020 우분투 행사(Ubuntu Party), '
+ teach-case1-content1-1: 'Cité des Sciences et de l''Industrie, Paris, France'
+ teach-case1-content2: 'Any age, including children and parents, young and older adults.'
+ teach-case1-content3: Advanced
+ teach-case1-content4: >-
+ To introduce a new public to programming through fun and compelling
+ examples.
+ teach-case1-content5: >-
+ Method: in-person workshop, 1 hour per session, with different participant
+ each times. The students were using (Ubuntu) machines with the p5.js web
+ editor. I was teaching using a video projector as well as a board.
+ teach-case1-content5-1: >-
+ Materials: The exercises I gave where accessible through p5.js web-editor
+ links available in
+ teach-case2-title: >-
+ Making The Thing that Makes the Thing: Exploring Generative Art & Design
+ with p5.js
+ teach-case2-lead-name: Priti Pandurangan & Ajith Ranka
+ teach-case2-content1: 'National Institute of Design, Bangalore'
+ teach-case2-content1-1: '2020 February 8, 2:30-4:00 PM'
+ teach-case2-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case2-content3: 'Priti: Intermediate & Ajith: Advanced'
+ teach-case2-content4: >-
+ To explore generative art & design and recreate some classical works
+ with p5.js.
+ teach-case2-content5: 'Methods: In-person, collaborative, hands-on workshop.'
+ teach-case2-content5-1: ''
+ teach-case2-content5-2: 'Course page '
+ teach-case2-content5-3: 'linking to sketches on the p5 editor, '
+ teach-case2-content5-4: 'interactive reference guide '
+ teach-case2-content5-5: to p5 basics
+ teach-case3-title: CC Fest (Creative Coding Festival)
+ teach-case3-lead-name: Saber
+ teach-case3-speech: 'Love p5.js. It has meant so much to me, my students, and this community.'
+ teach-case3-content1: ' New York, Los Angeles, San Francisco, Virtual-Online '
+ teach-case3-content1-1: ' Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual'
+ teach-case3-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case3-content3: Intermediate
+ teach-case3-content4: >-
+ To build a teacher and student community around p5 for middle and high
+ school.
+ teach-case3-content5: >-
+ A half-day of workshop led by volunteer teachers. We saw lots of different
+ methods and materials. Most used some sort of slides or documentation, some
+ live coding using an editor, with work time for participant to remix.
+ teach-case3-content5-1: CC Fest Lessons page
+ teach-case3-content5-2: ' for teaching materials'
+ teach-case3-content5-3: More photos
+ teach-case4-title: Introduction to Creative Programming with p5.js
+ teach-case4-lead-name: Aarón Montoya-Moraga
+ teach-case4-speech: 'p5.js is my happy place '
+ teach-case4-content1: ' PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online '
+ teach-case4-content1-1: ' 2018 November 14, 3 hours'
+ teach-case4-content2: >-
+ I had around 16 students in the workshop, and a team including 3 people from
+ the PlusCode festival, and one person at the venue.
+ teach-case4-content3: 'Elementary, Intermediate, Advanced'
+ teach-case4-content4: >-
+ Introduction to beginners and artists of graphic web programming and open
+ source, using p5.js, in Spanish :)
+ teach-case4-content5: 'I used the material on this '
+ teach-case4-content5-1: GitHub repo
+ teach-case4-content5-2: ', we used the p5.js web editor, we had a three hour long workshop'
+ teach-case4-content5-3: '+CODE electronic art festival 2018, Argentina'
+ teach-case4-content5-4: ', Medium'
+ teach-case5-title: Introduction to Generative Drawing
+ teach-case5-lead-name: Adam Herst
+ teach-case5-speech: >-
+ My greatest source of uncertainty in developing the workshop was whether it
+ was trying to teach art to programmers or to teach programming to artists.
+ teach-case5-content1: Inter/Access
+ teach-case5-content1-1: ' (artist-run centre), Toronto, Ontario, Canada'
+ teach-case5-content1-2: In-person with a self-paced workbook for remote work
+ teach-case5-content1-3: ' 2020 February 12, 7PM-9PM'
+ teach-case5-content2: 15 artists
+ teach-case5-content3: Elementary
+ teach-case5-content4: >-
+ To introduce p5.js to artists with little or no programming experience and
+ to suggest one way an analogue practice can migrate to a digital form.
+ teach-case5-content5: >-
+ A printed workbook with activities that used the p5.js web editor to show
+ how translate an physical drawing into a digital drawing.
+ teach-case5-content5-1: 'Processing Community Day 2019: Generative Drawing at Inter/Access'
+ teach-case5-content5-2: Introduction to Generative Drawing Letter PDF
+ teach-case5-content5-3: Introduction to Generative Drawing Booklet PDF
+ teach-case6-title: 'Open Lecture, Creative Coding: 2020'
+ teach-case6-lead-name: Shunsuke Takawo
+ teach-case6-speech: >-
+ I love p5.js because it's so easy to read and write code in p5.js. Coding in
+ your everyday life!
+ teach-case6-content1: ' Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online '
+ teach-case6-content1-1: ' 2020 March 16-18, 1-7 PM'
+ teach-case6-content2: 'Students of Kyoto University of Art and Design, and anyone.'
+ teach-case6-content3: Elementary
+ teach-case6-content4: Making code as a tool for artistic expression.
+ teach-case6-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case6-content5-1: Syllabus
+ teach-case6-content5-2: Day 1
+ teach-case6-content5-3: Day 2
+ teach-case6-content5-4: Day 3
+ teach-case6-content5-5: ', YouTube'
+ teach-case7-title: Creative Coding for Static Graphics
+ teach-case7-lead-name: Shunsuke Takawo
+ teach-case7-speech: >-
+ Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you
+ to give it a try!
+ teach-case7-content1: ' FabCafe MTRL, Tokyo, Japan'
+ teach-case7-content1-1: ' 2019 September 15, 4-7 PM '
+ teach-case7-content2: Anyone who wants to try coding in p5.js.
+ teach-case7-content3: Intermediate
+ teach-case7-content4: To code from the graphic design's perspective.
+ teach-case7-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case7-content5-1: Syllabus & Material
+ teach-case8-title: Generative Typography
+ teach-case8-lead-name: 정대인
+ teach-case8-content1: ' Baltimore, Maryland, USA & Virtual-Online '
+ teach-case8-content1-1: ' 2019 January 21 - May 08, every Wednesday, 4-10 PM'
+ teach-case8-content2: 14 undergrads and grad students who had little to no experience in coding.
+ teach-case8-content3: Elementary
+ teach-case8-content4: Experiment with typographic forms and structures through computation.
+ teach-case8-content5: 'Methods: online/offline lectures and critiques.'
+ teach-case8-content5-1: 'Materials: p5js online editor, Github, youtube tutorials.'
+ teach-case8-content5-2: Works of participants
+ teach-case9-title: Machine Learning for the Web
+ teach-case9-lead-name: Yining Shi
+ teach-case9-content1: ' ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA'
+ teach-case9-content1-1: '2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM'
+ teach-case9-content2: >-
+ Students at Interactive Telecommunications Program, New York University. 16
+ people.
+ teach-case9-content3: 'Elementary, Intermediate'
+ teach-case9-content4: >-
+ The goal of this class is to learn and understand common machine learning
+ techniques and apply them to generate creative outputs in the browser using
+ ml5.js and p5.js.
+ teach-case9-content5: >-
+ This class is a mix of lectures, coding sessions, group discussions, and
+ presentations. I used
+ teach-case9-content5-1: GitHub
+ teach-case9-content5-2: ' to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes.'
+ teach-case9-content5-3: 'Methods: online/offline lectures and critiques.'
+ teach-case10-title: Introduction to p5.js and JavaScript
+ teach-case10-lead-name: Nico Reski
+ teach-case10-content1: ' Currently available as self-study at own pace with accompanying slides, linked below.'
+ teach-case10-content3: 'Beginner, Elementary'
+ teach-case10-content4: >-
+ Introduce learners (potentially with no coding experiences at all) to the
+ very basics of p5.js (and JavaScript), in order to encourage creative coding
+ and enable them to pursue own projects in a safe environment.
+ teach-case10-content5: >-
+ p5.js source code (for the introductory project), JavaScript source code
+ (illustrating some basic JavaScript functionalities), accompanying slides in
+ .pdf format, all hosted publicly on GitHub.
+ teach-case10-content5-1: Overview
+ teach-case10-content5-2: ' of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage.'
+ teach-case11-title: Digital Weaving & Physical Computing Workshop Series
+ teach-case11-lead-name: Qianqian Ye & Evelyn Masso
+ teach-case11-content1: ' Womens Center for Creative Work (WCCW), Los Angeles, CA, US'
+ teach-case11-content1-1: ' 2019 October 19 - November 02, every Saturday 3-6 PM'
+ teach-case11-content2: '15 women and non-binary artists, designer, makers, programers. '
+ teach-case11-content3: Elementary
+ teach-case11-content4: >-
+ Over the course of three workshops, we will draw and create patterns using
+ p5.js, an open-source graphical library; we will learn and apply
+ computational concepts to transform patterns and finally, we will bring a
+ weaving to life with electronic microcontrollers.
+ teach-case11-content5: 'Methods: small team session'
+ teach-case11-content5-1: >-
+ Materials: slides, p5.js web editor, pen and paper to draw pattern, physical
+ pattern weaving tool.
+ teach-case11-content5-2: 'Workshop Slide #1'
+ teach-case11-content5-3: 'Workshop Slide #2'
+ teach-case11-content5-4: Workshop Information
+ teach-case11-content5-5: ' on WCCW website.'
+ teach-case12-title: Signing Coders
+ teach-case12-lead-name: 최태윤
+ teach-case12-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case12-content1: ' WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea.'
+ teach-case12-content1-1: '5 Sessions, each 2~3 hours'
+ teach-case12-content2: Deaf and Hard of Hearing students age 10~50 who live in NYC.
+ teach-case12-content3: Elementary
+ teach-case12-content4: >-
+ To help Deaf and Hard of Hearing students learn about computer programming
+ through playful exercises. To make ASL tutorial of basic coding concepts.
+ teach-case12-content5: >-
+ We used p5.js Web editor and code examples on the website. We also used
+ dice, playing cards and various paper tools to help students learn about
+ coding concepts.
+ teach-case12-content5-1: Syllabus & Material
+ teach-case12-content5-2: More photos
+ teach-case13-title: Painting with Code
+ teach-case13-lead-name: Andreas Refsgaard
+ teach-case13-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case13-content1: 'Copenhagen, Denmark'
+ teach-case13-content1-1: 2020 February 22
+ teach-case13-content2: A wide range of people.
+ teach-case13-content3: Intermediate
+ teach-case13-content4: >-
+ Get creatives, designers, artists and other people who don't typically use
+ code introduced to p5.js.
+ teach-case13-content5: 'Website, p5.js editor.'
+ teach-case13-content5-1: Material
+ teach-case14-title: Smarter Home 더 똑똑한 집
+ teach-case14-lead-name: 로렌 맥카시(Lauren McCarthy)
+ teach-case14-speech: >-
+ The Smarter Home / 더 똑똑한 집 American Arts Incubator 워크숍은 미래의 '더 똑똑한 집'을
+ 재상상합니다.
+ teach-case14-content1: ' 광주문화재단, 대한민국 광주광역시'
+ teach-case14-content1-1: 2020년 4월 19일 - 5월 11일
+ teach-case14-content1-2: ZERO1 American Art Incubator(AAI) 주최 및 지원
+ teach-case14-content2: 16명 (광주광역시 및 인근 지역 거주민)
+ teach-case14-content3: 초급 & 중급
+ teach-case14-content4: >-
+ 이 워크숍에서 참여자들은 p5.js와 ml5.js와 같은 기술로 미래의 스마트 홈을 재구성합니다. 한국 사회 속 여러 '홈'에서 포착되는
+ 기술의 역할들을 논의하며, 참여자들은 미래에 대한 비판적-낙관주의로 추동되는, '더 스마트한' 집에 대한 비전을 표현하고자 했습니다.
+ teach-case14-content5: 'p5.js, p5 웹에디터, ml5.js, 설치 작품. '
+ teach-case14-content5-1: '1) "더 똑똑한 집"이라는 개념을 프로토타이핑하며, 각자만의 고유한 언어로서 어떤 사적인 공간에 기술을 들이는 방식을 연구 '
+ teach-case14-content5-2: '2) 총 4개의 참여자팀으로 나뉘어, 하나의 "더 똑똑한 집"을 구성하는 4개의 ''방'' 개념의 작품을 각 팀이 담당'
+ teach-case14-content5-3: >-
+ 3) 머신 러닝, 오디오 프로세싱, 컴퓨터 비전 기술을 활용하여, '더 똑똑한 집' 속 사람의 존재를 추정, 이에 반응할 수 있는 기술
+ 구현
+ teach-case14-content5-4: >-
+ 4) 이 모든 것이 하나의 "더 똑똑한 집" 설치물을 이루는, 서로 연결된 4개의 방들로 구축되며 각 방은 해당 팀만의 문제의식을 다루는
+ 논의의 장으로서 제시
+ teach-case14-content5-5: 워크숍 사진
+ teach-case15-title: Introduction to p5js
+ teach-case15-lead-name: Bérenger Recoules (a.k.a b2renger)
+ teach-case15-content1: 'L''École de Design Nantes Atlantique, France'
+ teach-case15-content1-1: Since 2018 and ongoing
+ teach-case15-content2: Students from l'école de design Nantes Atlantique'
+ teach-case15-content3: Elementary
+ teach-case15-content4: 'To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ teach-case15-content5: GitHub Readme File
+ teach-case15-content5-1: ' : a text tutorial in French'
+ teach-case16-title: "50+ 코딩 클럽: 오손(\U0001F590)도손(孫) 내 인생 첫 코딩 아트"
+ teach-case16-lead-name: 염인화
+ teach-case16-speech: >-
+ 이 워크숍은 2020 프로세싱 재단 펠로우십 프로젝트 'p5 for 50+'의 연장선에서, 국립아시아문화전당(ACC)의 지원을 받아
+ 개최되었습니다.
+ teach-case16-content1: ' 국립아시아문화전당(ACC), 대한민국 광주광역시 & 가상-온라인'
+ teach-case16-content1-1: '(대면) 2020년 11월 20-28일, 매주 금요일 및 토요일; (비대면) 2020년 12월 이후 유투브 비디오 시청 가능'
+ teach-case16-content2: '전체 8명, 6명의 중장년 및 노년층 참여자와 2명의 자녀'
+ teach-case16-content2-1: 1) 스스로를 중장년 및 노년층이라 정의하는 사람
+ teach-case16-content2-2: 2) 위의 1번에 해당하는 사람과 동반하는 전연령대 사람
+ teach-case16-content3: 초급
+ teach-case16-content4: >-
+ 이 워크숍은 비영어권 국가 50+세 인구의 디지털 문해력과 권리 향상을 목표로하며, 특히 코딩 교육에 대한 이들의 물리적, 언어적,
+ 심리적 장벽을 낮추고자 스마트폰 기반의 p5.js 크리에이티브 코딩을 학습을 진행하였습니다.
+ teach-case16-content5: p5for50+ 웹앱
+ teach-case16-content5-1: >-
+ (기존 p5.js 웹에디터를 스마트폰 기반 웹앱에 임베드), 웹에디터로 제작된 p5 스케치를 현장에서 출력, 액자에 담아 참여자들에게
+ 배포.
+ teach-case16-content5-2: 커리큘럼
+ teach-case16-content5-3: 유투브
+ teach-case16-content5-4: 워크숍 사진
+ teach-case17-title: Programming Applied to Visual and Interactive Art
+ teach-case17-lead-name: Sebastián Zavatarelli
+ teach-case17-speech: >-
+ The course is part of the extension courses on the trans-departmental area
+ of multimedia arts of National University of the Arts in Argentina.
+ teach-case17-content1: ' Buenos Aires, Argentina. Virtual & Online'
+ teach-case17-content1-1: '2020 September 15 - October 14 every Wednesday 6:30-9:00 PM'
+ teach-case17-content2: Around 10 people. Mostly women.
+ teach-case17-content3: Elementary & Intermediate
+ teach-case17-content4: >-
+ The course is intended for artists who want to start using current
+ technological tools for the development of their works. It can also be used
+ by those who want to get started in computer programming through a simple,
+ visual, accessible and fun programming environment.
+ teach-case17-content5: >-
+ p5.js web editor. Online through Zoom platform and material uploaded in
+ Moodle.
+ teach-case17-content5-1: More pictures
diff --git a/src/data/libraries/libraries.json b/src/data/libraries/libraries.json
index 564ee12a48..c2ab21b645 100644
--- a/src/data/libraries/libraries.json
+++ b/src/data/libraries/libraries.json
@@ -44,16 +44,6 @@
}
]
},
- {
- "name": "blizard.js",
- "url": "https://github.com/Slitherlizard/blizard.js ",
- "authors": [
- {
- "name": "Rohan Samra-O'Neill",
- "url": "https://github.com/rohanThegreaTT"
- }
- ]
- },
{
"name": "p5.bots",
"url": "https://github.com/sarahgp/p5bots",
@@ -420,6 +410,16 @@
}
]
},
+ {
+ "name": "p5.xr",
+ "url": "http://p5xr.org/#/",
+ "authors": [
+ {
+ "name": "Stalgia Grigg",
+ "url": "http://www.stalgiagrigg.name/"
+ }
+ ]
+ },
{
"name": "p5.3D",
"url": "https://github.com/FreddieRa/p5.3D",
diff --git a/src/data/reference/en.json b/src/data/reference/en.json
index 483e4ede85..524db96e3b 100644
--- a/src/data/reference/en.json
+++ b/src/data/reference/en.json
@@ -392,7 +392,7 @@
},
"triangle": {
"description": [
- "Draws a trangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point."
+ "Draws a triangle to the canvas. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point."
],
"params": {
"x1": "Number: x-coordinate of the first point",
@@ -425,7 +425,7 @@
"description": [
"Modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are interpreted. ",
"The default mode is CORNER, which interprets the first two parameters as the upper-left corner of the shape, while the third and fourth parameters are its width and height. ",
- "rectMode(CORNERS) interprets the first two parameters as the location of one of the corner, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not neccesary that the first corner be the upper left corner. ",
+ "rectMode(CORNERS) interprets the first two parameters as the location of one of the corner, and the third and fourth parameters as the location of the diagonally opposite corner. Note, the rectangle is drawn between the coordinates, so it is not necessary that the first corner be the upper left corner. ",
"rectMode(CENTER) interprets the first two parameters as the shape's center point, while the third and fourth parameters are its width and height. ",
"rectMode(RADIUS) also uses the first two parameters as the shape's center point, but uses the third and fourth parameters to specify half of the shapes's width and height respectively. ",
"The parameter to this method must be written in ALL CAPS because they are predefined as constants in ALL CAPS and Javascript is a case-sensitive language."
@@ -578,7 +578,7 @@
"a": "Number: coordinate of first control point",
"b": "Number: coordinate of first point on the curve",
"c": "Number: coordinate of second point on the curve",
- "d": "Number: coordinate of second conrol point",
+ "d": "Number: coordinate of second control point",
"t": "Number: value between 0 and 1"
}
},
@@ -709,12 +709,12 @@
},
"DEGREES": {
"description": [
- "Constant to be used with angleMode() function, to set the mode which p5.js interprates and calculates angles (either DEGREES or RADIANS)."
+ "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either DEGREES or RADIANS)."
]
},
"RADIANS": {
"description": [
- "Constant to be used with angleMode() function, to set the mode which p5.js interprates and calculates angles (either RADIANS or DEGREES)."
+ "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either RADIANS or DEGREES)."
]
},
"CORNER": {},
@@ -1028,7 +1028,7 @@
"function": {
"description": [
"Creates and names a function . A function is a set of statements that perform a task. ",
- "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commmas. ",
+ "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by separating them with commas. ",
"From the MDN entry : Declares a function with the specified parameters."
]
},
@@ -1072,7 +1072,7 @@
"for": {
"description": [
"for creates a loop that is useful for executing one section of code multiple times. ",
- "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are seperated by ; (semi-colon).In case of an empty expression, only a semi-colon is written. ",
+ "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written. ",
"The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression. ",
"As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser. ",
"From the MDN entry : Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once."
@@ -1219,7 +1219,7 @@
"rotate": {
"description": [
"Rotates a shape by the amount specified by the angle parameter. This function accounts for angleMode , so angles can be entered in either RADIANS or DEGREES. ",
- "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All tranformations are reset when draw() begins again. ",
+ "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. Transformations apply to everything that happens after and subsequent calls to the function accumulates the effect. For example, calling rotate(HALF_PI) and then rotate(HALF_PI) is the same as rotate(PI). All transformations are reset when draw() begins again. ",
"Technically, rotate() multiplies the current transformation matrix by a rotation matrix. This function can be further controlled by the push() and pop() ."
],
"params": {
@@ -1230,7 +1230,7 @@
"rotateX": {
"description": [
"Rotates a shape around X axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. ",
- "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again."
+ "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again."
],
"params": {
"angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode"
@@ -1239,7 +1239,7 @@
"rotateY": {
"description": [
"Rotates a shape around Y axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. ",
- "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again."
+ "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again."
],
"params": {
"angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode"
@@ -1249,7 +1249,7 @@
"description": [
"Rotates a shape around Z axis by the amount specified in angle parameter. The angles can be entered in either RADIANS or DEGREES. ",
"This method works in WEBGL mode only. ",
- "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All tranformations are reset when draw() begins again."
+ "Objects are always rotated around their relative position to the origin and positive numbers rotate objects in a clockwise direction. All transformations are reset when draw() begins again."
],
"params": {
"angle": "Number: the angle of rotation, specified in radians or degrees, depending on current angleMode"
@@ -5711,7 +5711,7 @@
},
"p5.MonoSynth": {
"description": [
- "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthetisers should be built inheriting from this class."
+ "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthesizers should be built inheriting from this class."
],
"play": {
"description": [
@@ -5908,7 +5908,7 @@
"SoundFile object with a path to a file. ",
"The p5.SoundFile may not be available immediately because it loads the file information asynchronously. ",
"To do something with the sound as soon as it loads pass the name of a function as the second parameter. ",
- "Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatability, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works."
+ "Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatibility, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works."
],
"params": {
"path": "String|Array: path to a sound file (String). Optionally, you may include multiple file formats in an array. Alternately, accepts an object from the HTML5 File API, or a p5.File.",
@@ -6314,7 +6314,7 @@
"p5.Signal": {
"description": [
"p5.Signal is a constant audio-rate signal used by p5.Oscillator and p5.Envelope for modulation math. ",
- "This is necessary because Web Audio is processed on a seprate clock. For example, the p5 draw loop runs about 60 times per second. But the audio clock must process samples 44100 times per second. If we want to add a value to each of those samples, we can't do it in the draw loop, but we can do it by adding a constant-rate audio signal.tone.js."
],
"returns": "Tone.Signal: A Signal object from the Tone.js library",
@@ -6865,7 +6865,7 @@
},
"p5.Reverb": {
"description": [
- "Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has paramters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. ",
+ "Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has parameters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. ",
"This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
],
"process": {
@@ -6995,7 +6995,7 @@
],
"params": {
"steps": "Number: (Optional) Steps in the part",
- "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quater note (default is 1/16, a sixteenth note)"
+ "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quarter note (default is 1/16, a sixteenth note)"
},
"setBPM": {
"description": [
@@ -7207,7 +7207,7 @@
},
"p5.Compressor": {
"description": [
- "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on indivudal sound sources in addition to the master output. ",
+ "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on individual sound sources in addition to the master output. ",
"This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
],
"compressor": {
@@ -7230,7 +7230,7 @@
},
"set": {
"description": [
- "Set the paramters of a compressor."
+ "Set the parameters of a compressor."
],
"params": {
"attack": "Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
@@ -7362,7 +7362,7 @@
},
"p5.Gain": {
"description": [
- "A gain node is usefull to set the relative volume of sound. It's typically used to build mixers."
+ "A gain node is useful to set the relative volume of sound. It's typically used to build mixers."
],
"setInput": {
"description": [
diff --git a/src/data/reference/es.json b/src/data/reference/es.json
index 06c5411d88..4b95f42988 100644
--- a/src/data/reference/es.json
+++ b/src/data/reference/es.json
@@ -2,14 +2,10 @@
"h1": "Referencia",
"reference-search": "Busca en la API",
"reference-description1": "¿No encuentras lo que buscas? Quizás debas revisar en",
- "reference-description2": "o",
"reference-description3": "Puedes descargar una versión de la referencia.",
- "reference-contribute1": "Si ves algún error o tienes alguna sugerencia",
"reference-contribute2": "por favor dinos",
"reference-error1": "¿Encontraste algún error?",
- "reference-error2": "está documentado y definido en",
"reference-error3": "Por favor siéntete libre de ",
- "reference-error4": "editar el archivo",
"reference-error5": "y de indicar un pull request.",
"reference-example": "Ejemplo",
"reference-description": "Descripción",
@@ -18,26 +14,24 @@
"reference-syntax": "Sintaxis",
"reference-returns": "Retorna",
"Color": "Color",
- "Shape": "Forma",
+ "Color Conversion": "Color Conversion",
"Creating & Reading": "Creación y lectura",
"Setting": "Configuración",
+ "Shape": "Forma",
"2D Primitives": "Primitivas 2D",
"Attributes": "Atributos",
"Curves": "Curvas",
"Vertex": "Vértices",
- "3D Models": "Modelos 3D",
- "3D Primitives": "Primitivas 3D",
"Constants": "Constantes",
- "Structure": "Estructura",
"Environment": "Ambiente",
+ "Structure": "Estructura",
"DOM": "DOM",
"Rendering": "Render",
+ "Foundation": "Foundation",
"Transform": "Transformar",
"Data": "Datos",
+ "LocalStorage": "LocalStorage",
"Dictionary": "Diccionario",
- "Array Functions": "Funciones de arreglo",
- "Conversion": "Conversión",
- "String Functions": "Funciones de String",
"Events": "Eventos",
"Acceleration": "Aceleración",
"Keyboard": "Teclado",
@@ -50,189 +44,241 @@
"Input": "Entrada",
"Output": "Salida",
"Table": "Tabla",
- "Time & Date": "Tiempo & Fecha",
- "XML": "XML",
"Math": "Matemáticas",
"Calculation": "Cálculo",
+ "Vector": "Vector",
"Noise": "Ruido",
+ "Random": "Random",
"Trigonometry": "Trigonometría",
"Typography": "Tipografía",
- "Font": "Fuente",
+ "Array Functions": "Funciones de arreglo",
+ "Conversion": "Conversión",
+ "String Functions": "Funciones de String",
+ "Time & Date": "Tiempo & Fecha",
+ "3D Primitives": "Primitivas 3D",
"Lights, Camera": "Luces, cámara",
- "Camera": "Cámara",
+ "Interaction": "Interaction",
"Lights": "Luces",
+ "3D Models": "Modelos 3D",
"Material": "Materiales",
+ "Camera": "Cámara",
"p5": {
+ "description": [
+ "This is the p5 instance constructor. ",
+ "A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload() , setup() , and/or draw() properties on it for running a sketch. ",
+ "A p5 sketch can run in \"global\" or \"instance\" mode: \"global\" - all properties and methods are attached to the window \"instance\" - all properties and methods are bound to this p5 object"
+ ],
+ "returns": "P5: a p5 instance",
+ "params": {
+ "sketch": "Function: a closure that can set optional preload() , setup() , and/or draw() properties on the given p5 instance",
+ "node": "HTMLElement: (Optional) element to attach canvas to"
+ },
"alpha": {
"description": [
"Extrae el valor de alpha de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"blue": {
"description": [
"Extrae el valor de azul de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"brightness": {
"description": [
"Extrae el valor de brillo HSB de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"color": {
"description": [
- "Crea colores para ser almacenados en variables del tipo color. Los parámetros son interpretados como valores RGB o HSB, dependiendo del modo actual de color según colorMode)(). El modo por defecto es RGB con valores entre 0 y 255 y, por lo tanto, la función color(255, 204, 0) retorna un color amarillo brillante. Nota que si solo se provee un valor a la función color(), será interpretado como un valor en escala de grises. Añade un segundo valor, y será usado como transparencia alpha. Cuando se especifican tres valores, son interpretados como valores RGB o HSB. Al añadir un cuarto valor se aplica transparencia alpha. Si se provee solo un parámetro de tipo string, será interpretado como un string de color compatible con CSS.Los colores son almacenados como números o arreglos."
+ "Crea colores para ser almacenados en variables del tipo color. Los parámetros son interpretados como valores RGB o HSB, dependiendo del modo actual de color según colorMode)(). El modo por defecto es RGB con valores entre 0 y 255 y, por lo tanto, la función color(255, 204, 0) retorna un color amarillo brillante. Nota que si solo se provee un valor a la función color(), será interpretado como un valor en escala de grises. Añade un segundo valor, y será usado como transparencia alpha. Cuando se especifican tres valores, son interpretados como valores RGB o HSB. Al añadir un cuarto valor se aplica transparencia alpha. Si se provee solo un parámetro de tipo string, será interpretado como un string de color compatible con CSS.Los colores son almacenados como números o arreglos.",
+ "",
+ ""
],
+ "returns": "Arreglo: color resultante",
"params": {
- "v1": "Número|String: número especificando el valor entre blanco y negro.",
- "v2": "Número: valor de alpha relativo al rango de color actual (por defecto es 0-100)",
- "v3": "Número|String: valor de rojo o tinte relativo al rango de color actual, o un string de color",
- "alpha": "Número: valor de verde o saturación relativo al rango de color actual",
- "UNKNOWN-PARAM-5": "Número: valor de azul o brillo relativo al rango de color actual"
- },
- "returns": "Arreglo: color resultante"
+ "gray": "Número|String: número especificando el valor entre blanco y negro.",
+ "alpha": "Número: valor de alpha relativo al rango de color actual (por defecto es 0-255)",
+ "v1": "Número|String: valor de rojo o tinte relativo al rango de color actual, o un string de color",
+ "v2": "Número: valor de verde o saturación relativo al rango de color actual",
+ "v3": "Número: valor de azul o brillo relativo al rango de color actual",
+ "value": "String: a color string",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color"
+ }
},
"green": {
"description": [
"Extrae el valor de verde de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"hue": {
"description": [
- "Extrae el valor de tinte de un color o de un arreglo de pixeles. El tinte (hue) existe en HSB y HSL. Esta función retorna el tinte normalizado HSB que cuando se le provee un objeto de color HSB (o cuando se le provee un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará el tinte normalizado según HSB en otro caso. (Estos valores solo son diferentes si la configuración de valor de tinte máximo de cada sistema es diferente.)"
+ "Extrae el valor de tinte de un color o de un arreglo de pixeles. El tinte (hue) existe en HSB y HSL. Esta función retorna el tinte normalizado HSB que cuando se le provee un objeto de color HSB (o cuando se le provee un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará el tinte normalizado según HSB en otro caso. (Estos valores solo son diferentes si la configuración de valor de tinte máximo de cada sistema es diferente.)",
+ ""
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"lerpColor": {
"description": [
- "Mezcla dos colores para encontrar un tercer color según la combinación de ambos. El parámetro amt es la cantidad a interpolar entre los dos valores, donde 0.0 es igual al primer color, 0.1 es muy cercano al primer color, 0.5 está a medio camino entre ambos, etc. Un valor menor que 0 será tratado como 0. Del mismo modo, valores sobre 1 serán tratados como 1. Esto es distinto al comportamiento de lerp(), pero necesario porque de otra manera los números fuera de rango producirían colores no esperados y extraños. La manera en que los colores son interpolados depende del modo de color actual."
+ "Mezcla dos colores para encontrar un tercer color según la combinación de ambos. El parámetro amt es la cantidad a interpolar entre los dos valores, donde 0.0 es igual al primer color, 0.1 es muy cercano al primer color, 0.5 está a medio camino entre ambos, etc. Un valor menor que 0 será tratado como 0. Del mismo modo, valores sobre 1 serán tratados como 1. Esto es distinto al comportamiento de lerp(), pero necesario porque de otra manera los números fuera de rango producirían colores no esperados y extraños. La manera en que los colores son interpolados depende del modo de color actual.",
+ ""
],
+ "returns": "Arreglo/Número: color interpolado",
"params": {
"c1": "Arreglo/Número: interpola desde este color",
"c2": "Arreglo/Número: interpola hacia este color",
"amt": "Número: número entre 0 y 1"
- },
- "returns": "Arreglo/Número: color interpolado"
+ }
},
"lightness": {
"description": [
"Extrae el valor de luminosidad HSL de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"red": {
"description": [
"Extrae el valor de rojo de un color o de un arreglo de pixeles."
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"saturation": {
"description": [
- "Extrae el valor de saturación de un color o de un arreglo de pixeles. La saturación es escalada en HSB y HSL de forma distinta. Esta función retornará la saturación HSB cuando le sea provisto un objeto de color HSB (o cuando le sea provisto un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará saturación HSL."
+ "Extrae el valor de saturación de un color o de un arreglo de pixeles. La saturación es escalada en HSB y HSL de forma distinta. Esta función retornará la saturación HSB cuando le sea provisto un objeto de color HSB (o cuando le sea provisto un arreglo de pixeles mientras el modo de color es HSB), pero por defecto retornará saturación HSL.",
+ ""
],
+ "returns": "el objeto p5",
"params": {
"color": "Objeto: objeto p5.Color o arreglo de pixeles"
- },
- "returns": "el objeto p5"
+ }
},
"background": {
"description": [
- "La función background() define el color usado como fondo del lienzo p5.js. El fondo por defecto es gris claro. Esta función es típicamente usada dentro de draw() para despejar o borrar la ventana mostrada al inicio de cada cuadro, pero puede ser usada dentro de setup() para definir el fondo en el primer cuadro de la animación o si el fondo solo necesita ser definido una vez."
+ "La función background() define el color usado como fondo del lienzo p5.js. El fondo por defecto es gris claro. Esta función es típicamente usada dentro de draw() para despejar o borrar la ventana mostrada al inicio de cada cuadro, pero puede ser usada dentro de setup() para definir el fondo en el primer cuadro de la animación o si el fondo solo necesita ser definido una vez.",
+ "",
+ "",
+ "",
+ ""
],
"params": {
- "v1": "Color: cualquier valor creado con la función color()",
- "v2": "Número: opacidad del fondo relativo al rango de color actual (por defecto es 0-100)",
- "v3": "colorstring: string de color, formatos posibles: enteros rgb() o rgba(), porcentajes rgb() o rgba(), hex 3 dígitos, hex 6 dígitos",
- "a": "Número: especifica un valor entre blanco y negro",
- "UNKNOWN-PARAM-5": "Número: valor de rojo o hue (dependiendo del modo de color actual)",
- "UNKNOWN-PARAM-6": "Número: valor de verde o saturación (dependiendo del modo de color actual)",
- "UNKNOWN-PARAM-7": "Número: valor de azul o brillo (dependiendo del modo de color actual)",
- "UNKNOWN-PARAM-8": "p5.Image: imagen creada con loadImage() o createImage(), para ser definida como fondo (debe ser del mismo tamaño que la ventana del bosquejo)"
- },
- "returns": "el objeto p5"
+ "color": "Color: cualquier valor creado con la función color()",
+ "colorstring": "colorstring: string de color, formatos posibles: enteros rgb() o rgba(), porcentajes rgb() o rgba(), hex 3 dígitos, hex 6 dígitos",
+ "a": "Número: opacidad del fondo relativo al rango de color actual (por defecto es 0-255)",
+ "gray": "Número: especifica un valor entre blanco y negro",
+ "v1": "Número: valor de rojo o hue (dependiendo del modo de color actual)",
+ "v2": "Número: valor de verde o saturación (dependiendo del modo de color actual)",
+ "v3": "Número: valor de azul o brillo (dependiendo del modo de color actual)",
+ "values": "Number[]: an array containing the red, green, blue and alpha components of the color",
+ "image": "p5.Image: imagen creada con loadImage() o createImage(), para ser definida como fondo (debe ser del mismo tamaño que la ventana del bosquejo)"
+ }
},
"clear": {
"description": [
"Borra los pixeles del buffer. Esta función solo funciona en objetos p5.Canvas creados con la función createCanvas(); no funcionará con la ventana principal. A diferencia del contexto principal de gráficas, los pixeles en las áreas gráficas adicionales creadas con createGraphics() pueden ser entera o parcialmente transparentes. Esta función borra todo para hacer los pixeles 100% transparentes."
- ],
- "returns": "el objeto p5"
+ ]
},
"colorMode": {
"description": [
- "colorMode() cambia la manera en que p5.js interpreta los datos de color. Por defecto, los parámetros de fill(), stroke(), background() y color() son definidos por valores entre 0 y 255 en modo RGB. Esto es equivalente a definir el modo de color según colorMode(RGB, 255). Definir el modo de color en colorMode(HSB) permite usar el sistema HSB. Por defecto, este modo de color es colorMode(HSB, 360, 100, 100, 1). También se puede usar HSL. Nota: los objetos de color existentes recuerdan el modo en que fueron creados, por lo que puedes cambiar el modo como quieras, sin afectar su apariencia."
+ "colorMode() cambia la manera en que p5.js interpreta los datos de color. Por defecto, los parámetros de fill(), stroke(), background() y color() son definidos por valores entre 0 y 255 en modo RGB. Esto es equivalente a definir el modo de color según colorMode(RGB, 255). Definir el modo de color en colorMode(HSB) permite usar el sistema HSB. Por defecto, este modo de color es colorMode(HSB, 360, 100, 100, 1). También se puede usar HSL. Nota: los objetos de color existentes recuerdan el modo en que fueron creados, por lo que puedes cambiar el modo como quieras, sin afectar su apariencia.",
+ ""
],
"params": {
"mode": "Constante: RGB o HSB, correspondiente a Rojo/Verde/Azul o tinte/saturación/brillo (o luminosidad)",
+ "max": "Number: (Optional) range for all values",
"max1": "Número: rango de rojo o tinte, dependiendo del modo de color actual, o rango para todos los valores",
"max2": "Número: rango de verde o saturación, dependiendo del modo de color actual.",
"max3": "Número: rango de azul o brillo/luminosidad, dependiendo del modo de color actual.",
"maxA": "Número: rango de transparencia alpha"
- },
- "returns": "el objeto p5"
+ }
},
"fill": {
"description": [
- "Define el color usado para el relleno de figuras geométricas. Por ejemplo, si ejecutas fill(204, 102, 0), todas las figuras a continuación tendrán relleno naranja. Este color es especificado en términos de color RGB o HSB, dependiendo del modo de color según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del relleno."
+ "Define el color usado para el relleno de figuras geométricas. Por ejemplo, si ejecutas fill(204, 102, 0), todas las figuras a continuación tendrán relleno naranja. Este color es especificado en términos de color RGB o HSB, dependiendo del modo de color según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del relleno.",
+ "",
+ ""
],
"params": {
"v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo, tinte (dependiendo del modo de color actual), o arreglo de color, o string de color CSS.",
"v2": "Número: valor de verde o saturación (dependiendo del modo de color actual)",
"v3": "Número: valor de azul o brillo (dependiendo del modo de color actual)",
- "alpha": "Número: opacidad del fondo"
- },
- "returns": "el objeto p5"
+ "alpha": "Número: opacidad del fondo",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the fill color"
+ }
},
"noFill": {
"description": [
"Deshabilita el relleno de figuras geométricas. Si tanto noStroke() como noFill() son ejecutados, nada será dibujado en pantalla."
- ],
- "returns": "el objeto p5"
+ ]
},
"noStroke": {
"description": [
"Deshabilita el dibujo de los trazos (bordes). Si tanto noStroke() como noFill() son ejecutados, nada será dibujado en pantalla."
- ],
- "returns": "el objeto p5"
+ ]
},
"stroke": {
"description": [
- "Define el color usado para dibujar líneas y bordes de figuras. Este color especificado en términos de color RGB o HSB, dependiendo del modo de color actual según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del trazado."
+ "Define el color usado para dibujar líneas y bordes de figuras. Este color especificado en términos de color RGB o HSB, dependiendo del modo de color actual según colorMode() (el dominio de color por defecto es RGB, con cada valor en el rango entre 0 y 255). Si se provee un argumento tipo string, los tipos RGB, RGBA y CSS hexadecimal están soportados. Un objeto Color p5 puede ser provisto para definir el color del trazado.",
+ "",
+ ""
],
"params": {
"v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo, tinte (dependiendo del modo de color actual), o arreglo de color, o string de color CSS.",
"v2": "Número: valor de verde o saturación (dependiendo del modo de color actual)",
"v3": "Número: valor de azul o brillo (dependiendo del modo de color actual)",
- "alpha": "Número: opacidad del fondo"
- },
- "returns": "el objeto p5"
+ "alpha": "Número: opacidad del fondo",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the stroke color"
+ }
+ },
+ "erase": {
+ "description": [
+ "All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase() . ",
+ "Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual."
+ ],
+ "params": {
+ "strengthFill": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's fill. This will default to 255 when no argument is given, which is full strength.",
+ "strengthStroke": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's stroke. This will default to 255 when no argument is given, which is full strength."
+ }
+ },
+ "noErase": {
+ "description": [
+ "Ends erasing that was started with erase() . The fill() , stroke() , and blendMode() settings will return to what they were prior to calling erase() ."
+ ]
},
"arc": {
"description": [
- "Dibuja un arco en la pantalla. Si se llama con solo a, b, c, d, start y stop, el arco se dibuja como un pastel abierto. Si el modo se provee, el arco será dibujado abierto, o como acorde, o como pastel, según lo especificado. El origen puede ser cambiado con la función ellipseMode(). Nota que si dibujas un círculo completo (ej: 0 a TWO_PI) aparecerá en blanco, porque 0 y TWO_PI son la misma posición en el círculo unitario. La mejor manera de manejar esto es usar la función ellipse() para una elipse cerrada, y la función arc() para generar solo secciones de una elipse."
+ "Dibuja un arco en la pantalla. Si se llama con solo a, b, c, d, start y stop, el arco se dibuja como un pastel abierto. Si el modo se provee, el arco será dibujado abierto, o como acorde, o como pastel, según lo especificado. El origen puede ser cambiado con la función ellipseMode(). Nota que si dibujas un círculo completo (ej: 0 a TWO_PI) aparecerá en blanco, porque 0 y TWO_PI son la misma posición en el círculo unitario. La mejor manera de manejar esto es usar la función ellipse() para una elipse cerrada, y la función arc() para generar solo secciones de una elipse.",
+ ""
],
"params": {
"x": "Número: coordenada x del arco de elipse.",
@@ -241,21 +287,32 @@
"h": "Número: altura del arco de elipse.",
"start": "Número: ángulo inicial del arco de elipse.",
"stop": "Número: ángulo final del arco de elipse.",
- "mode": "Constante: parámetro opcional para determinar la manera de dibujar el arco."
- },
- "returns": "el objeto p5"
+ "mode": "Constante: parámetro opcional para determinar la manera de dibujar el arco.",
+ "detail": "Number: (Optional) optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the arc. Default value is 25."
+ }
},
"ellipse": {
"description": [
- "Dibuja una elipse (óvalo) en la pantalla. Una elipse con igual ancho y altura es un círculo. Por defecto, los primeros dos parámetros definen la ubicación, y el tercero y cuarto definen el ancho y altura de la figura. Si no especifica una altura, el valor del ancho es usado como ancho y altura. El origen puede ser cambiado con la función ellipseMode()."
+ "Dibuja una elipse (óvalo) en la pantalla. Una elipse con igual ancho y altura es un círculo. Por defecto, los primeros dos parámetros definen la ubicación, y el tercero y cuarto definen el ancho y altura de la figura. Si no especifica una altura, el valor del ancho es usado como ancho y altura. El origen puede ser cambiado con la función ellipseMode().",
+ ""
],
"params": {
"x": "Número: coordenada x de la elipse.",
"y": "Número: coordenada y de la elipse.",
"w": "Número: ancho de la elipse.",
- "h": "Número: altura de la elipse."
- },
- "returns": "el objeto p5"
+ "h": "Número: altura de la elipse.",
+ "detail": "Integer: number of radial sectors to draw (for WebGL mode)"
+ }
+ },
+ "circle": {
+ "description": [
+ "Draws a circle to the screen. A circle is a simple closed shape.It is the set of all points in a plane that are at a given distance from a given point, the centre.This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the centre of the circle.",
+ "y": "Number: y-coordinate of the centre of the circle.",
+ "d": "Number: diameter of the circle."
+ }
},
"line": {
"description": [
@@ -265,9 +322,10 @@
"x1": "Número: coordenada x del primer punto.",
"y1": "Número: coordenada y del primer punto.",
"x2": "Número: coordenada x del segundo punto.",
- "y2": "Número: coordenada y del segundo punto."
- },
- "returns": "el objeto p5"
+ "y2": "Número: coordenada y del segundo punto.",
+ "z1": "Number: the z-coordinate of the first point",
+ "z2": "Number: the z-coordinate of the second point"
+ }
},
"point": {
"description": [
@@ -275,9 +333,10 @@
],
"params": {
"x": "Número: coordenada x.",
- "y": "Número: coordenada y ."
- },
- "returns": "el objeto p5"
+ "y": "Número: coordenada y .",
+ "z": "Number: (Optional) the z-coordinate (for WebGL mode)",
+ "coordinate_vector": "p5.Vector: the coordinate vector"
+ }
},
"quad": {
"description": [
@@ -291,13 +350,17 @@
"x3": "Número: coordenada x del tercer punto.",
"y3": "Número: coordenada y del tercer punto.",
"x4": "Número: coordenada x del cuarto punto.",
- "y4": "Número: coordenada y del cuarto punto."
- },
- "returns": "el objeto p5"
+ "y4": "Número: coordenada y del cuarto punto.",
+ "z1": "Number: the z-coordinate of the first point",
+ "z2": "Number: the z-coordinate of the second point",
+ "z3": "Number: the z-coordinate of the third point",
+ "z4": "Number: the z-coordinate of the fourth point"
+ }
},
"rect": {
"description": [
- "Dibuja un rectángulo en la pantalla. Un rectángulo es una figura de cuatro lados con cada ángulo interior de noventa grados. Por defecto, los dos primeros parámetros definen la ubicación de la esquina superior izquierda, el tercero el ancho y el cuarto la altura. La manera en que estos parámetros son interpretados, sin embargo, puede ser cambiado con la función rectMode(). Los parámetros quinto, sexto, séptimo y octavo, si son especificados, determinan el radio de la esquina superior derecha, superior izquierda, inferior derecha e inferior izquierda, respectivamente. Si se omite un parámetro de radio de esquina, se usa el radio especificado por el valor anterior en la lista."
+ "Dibuja un rectángulo en la pantalla. Un rectángulo es una figura de cuatro lados con cada ángulo interior de noventa grados. Por defecto, los dos primeros parámetros definen la ubicación de la esquina superior izquierda, el tercero el ancho y el cuarto la altura. La manera en que estos parámetros son interpretados, sin embargo, puede ser cambiado con la función rectMode(). Los parámetros quinto, sexto, séptimo y octavo, si son especificados, determinan el radio de la esquina superior derecha, superior izquierda, inferior derecha e inferior izquierda, respectivamente. Si se omite un parámetro de radio de esquina, se usa el radio especificado por el valor anterior en la lista.",
+ ""
],
"params": {
"x": "Número: coordenada x del rectángulo.",
@@ -308,10 +371,24 @@
"tr": "Número: radio opcional de la esquina superior derecha.",
"br": "Número: radio opcional de la esquina inferior derecha.",
"bl": "Número: radio opcional de la esquina inferior izquierda.",
- "UNKNOWN-PARAM-9": "Número:",
- "UNKNOWN-PARAM-10": "Número:"
- },
- "returns": "el objeto p5"
+ "detailX": "Número:",
+ "detailY": "Número:"
+ }
+ },
+ "square": {
+ "description": [
+ "Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called \"s\" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, may be changed with the rectMode() function. ",
+ "The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the square.",
+ "y": "Number: y-coordinate of the square.",
+ "s": "Number: side size of the square.",
+ "tl": "Number: (Optional) optional radius of top-left corner.",
+ "tr": "Number: (Optional) optional radius of top-right corner.",
+ "br": "Number: (Optional) optional radius of bottom-right corner.",
+ "bl": "Number: (Optional) optional radius of bottom-left corner."
+ }
},
"triangle": {
"description": [
@@ -324,56 +401,61 @@
"y2": "Número: coordenada y del segundo punto.",
"x3": "Número: coordenada x del tercer punto.",
"y3": "Número: coordenada y del tercer punto."
- },
- "returns": "el objeto p5"
+ }
},
"ellipseMode": {
"description": [
- "Modifica la ubicación de donde las elipses son dibujadas, cambiando la manera en que los parámetros dados a ellipse() son interpretados. El modo por defecto es ellipseMode(CENTER), que interpreta los dos primeros parámetros de ellipse() como el centro de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(RADIUS) también usa los dos primeros parámetros de ellipse() como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. ellipseMode(CORNER) interpreta los dos primeros parámetros de ellipse() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(CORNERS) interpreta los dos primeros parámetros de ellipse() como la ubicación de una esquina del rectángulo contenedor de la elipse, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. El parámetro debe ser escrito en MAYÚSCULAS porque Javascript es una lenguaje de programación que distingue entre mayúsculas y minúsculas."
+ "Modifica la ubicación de donde las elipses son dibujadas, cambiando la manera en que los parámetros dados a ellipse() son interpretados. El modo por defecto es ellipseMode(CENTER), que interpreta los dos primeros parámetros de ellipse() como el centro de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(RADIUS) también usa los dos primeros parámetros de ellipse() como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. ellipseMode(CORNER) interpreta los dos primeros parámetros de ellipse() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son el ancho y la altura. ellipseMode(CORNERS) interpreta los dos primeros parámetros de ellipse() como la ubicación de una esquina del rectángulo contenedor de la elipse, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. El parámetro debe ser escrito en MAYÚSCULAS porque Javascript es una lenguaje de programación que distingue entre mayúsculas y minúsculas.",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "Constante: puede ser CENTER, RADIUS, CORNER, o CORNERS."
- },
- "returns": "el objeto p5"
+ }
},
"noSmooth": {
"description": [
"Dibuja las figuras geométricas con bordes no suaves (aliasing). Notar que smooth() está activo por defecto, así que es necesario ejectuar noSmooth() para deshabilitar el suavizado de las figuras geométricas, imágenes y tipografías."
- ],
- "returns": "el objeto p5"
+ ]
},
"rectMode": {
"description": [
- "Modifica la ubicación en que los rectángulos son dibujados, cambiando la manera en que los parámetros dados a rect() son interpretados. El modo por defecto es rectMode(CORNER), que interpreta los primeros dos parámetros de rect() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son su ancho y altura. rectMode(CORNERS) interpreta los dos primeros parámetros de rect() como la ubicación de una esquina, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. rectMode(CENTER) interpreta los dos primeros parámetros de rect() como el punto central de la figura, mientas que los parámetros tercero y cuarto son su ancho y altura. rectMode(RADIUS) también usa los dos primeros parámetros de rect()= como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. Los parámetros deben ser escritos en MAYÚSCULAS porque Javascript es un lenguaje que distingue entre mayúsculas y minúsculas."
+ "Modifica la ubicación en que los rectángulos son dibujados, cambiando la manera en que los parámetros dados a rect() son interpretados. El modo por defecto es rectMode(CORNER), que interpreta los primeros dos parámetros de rect() como la esquina superior izquierda de la figura, mientras que los parámetros tercero y cuarto son su ancho y altura. rectMode(CORNERS) interpreta los dos primeros parámetros de rect() como la ubicación de una esquina, y los parámetros tercero y cuarto como la ubicación de la esquina opuesta. rectMode(CENTER) interpreta los dos primeros parámetros de rect() como el punto central de la figura, mientas que los parámetros tercero y cuarto son su ancho y altura. rectMode(RADIUS) también usa los dos primeros parámetros de rect()= como el punto central de la figura, pero usa los parámetros tercero y cuarto para especificar la mitad del ancho y la altura de la figura. Los parámetros deben ser escritos en MAYÚSCULAS porque Javascript es un lenguaje que distingue entre mayúsculas y minúsculas.",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "Constante: puede ser CORNER, CORNERS, CENTER, o RADIUS."
- },
- "returns": "el objeto p5"
+ }
},
"smooth": {
"description": [
"Dibuja todas las figuras geométricas con bordes suaves (sin aliasing). smooth() también mejorará la calidad de las imágenes cuyo tamaño ha sido modificado. Notar que smooth() está activo por defecto; noSmooth() puede ser usado para deshabilitar el suavizado de las figuras geométricas, imágenes y tipografía."
- ],
- "returns": "el objeto p5"
+ ]
},
"strokeCap": {
"description": [
- "Define el estilo de rendering de los extremos de las líneas. Estos extremos pueden ser cuadrados, extendidos o redondeados, cada uno de estos especifados con los parámetros correspondientes: SQUARE, PROJECT, y ROUND. El extremo por defecto es redonedeado (ROUND)."
+ "Define el estilo de rendering de los extremos de las líneas. Estos extremos pueden ser cuadrados, extendidos o redondeados, cada uno de estos especifados con los parámetros correspondientes: SQUARE, PROJECT, y ROUND. El extremo por defecto es redonedeado (ROUND).",
+ ""
],
"params": {
"cap": "Constante: puede ser SQUARE, PROJECT, o ROUND."
- },
- "returns": "el objeto p5"
+ }
},
"strokeJoin": {
"description": [
- "Define el estilo de las uniones que conectan segmentos de líneas. Estas uniones pueden ser tipo inglete, biseladas o redondeadas, y especificadas con los parámetros correspondientes: MITER, BEVEL, y ROUND. La unión por defecto es MITER."
+ "Define el estilo de las uniones que conectan segmentos de líneas. Estas uniones pueden ser tipo inglete, biseladas o redondeadas, y especificadas con los parámetros correspondientes: MITER, BEVEL, y ROUND. La unión por defecto es MITER.",
+ ""
],
"params": {
"join": "Constante: puede ser MITER, BEVEL, o ROUND."
- },
- "returns": "el objeto p5"
+ }
},
"strokeWeight": {
"description": [
@@ -381,54 +463,62 @@
],
"params": {
"weight": "Número: el peso (en pixeles) del trazado"
- },
- "returns": "el objeto p5"
+ }
},
"bezier": {
"description": [
- "Dibuja una curva Bezier cúbica en la pantalla. Estas curvas están definidas por una serie de puntos ancla y de control. Los primeros dos parámetros especifican el primer punto ancla y los dos últimos especifican el otro punto ancla, que se convierten en los puntos primero y último de la curva. Los parámetros en el medio especifican los dos puntos de control que definen la forma de la curva. De forma aproximada, los puntos de control atraen la curva hacia ellos. Las curvas Bezier fueron desarrolladas por el ingeniero automotriz Pierre Bezier, y son comúnmente usadas en gráficas computacionales para definir curvas de pendiente suave. Ver también curve()."
+ "Dibuja una curva Bezier cúbica en la pantalla. Estas curvas están definidas por una serie de puntos ancla y de control. Los primeros dos parámetros especifican el primer punto ancla y los dos últimos especifican el otro punto ancla, que se convierten en los puntos primero y último de la curva. Los parámetros en el medio especifican los dos puntos de control que definen la forma de la curva. De forma aproximada, los puntos de control atraen la curva hacia ellos. Las curvas Bezier fueron desarrolladas por el ingeniero automotriz Pierre Bezier, y son comúnmente usadas en gráficas computacionales para definir curvas de pendiente suave. Ver también curve().",
+ ""
],
"params": {
"x1": "Número: coordenada x del primer punto ancla",
"y1": "Número: coordenada y del primer punto ancla",
- "z1": "Número: coordenada x del primer punto de control",
"x2": "Número: coordenada y del primer punto de control",
"y2": "Número: coordenada x del segundo punto de control",
- "z2": "Número: coordenada y del segundo punto de control",
"x3": "Número: coordenada x del segundo punto ancla",
"y3": "Número: coordenada y del segundo punto ancla",
- "z3": "Número: coordenada z del primer punto ancla",
"x4": "Número: coordenada z del primer punto de control",
"y4": "Número: coordenada z del segundo punto ancla",
+ "z1": "Número: coordenada x del primer punto de control",
+ "z2": "Número: coordenada y del segundo punto de control",
+ "z3": "Número: coordenada z del primer punto ancla",
"z4": "Número: coordenada z del segundo punto de control"
- },
- "returns": "el objeto p5"
+ }
+ },
+ "bezierDetail": {
+ "description": [
+ "Sets the resolution at which Bezier's curve is displayed. The default value is 20. ",
+ "Note, This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information."
+ ],
+ "params": {
+ "detail": "Number: resolution of the curves"
+ }
},
"bezierPoint": {
"description": [
"Evalua la curva Bezier en la posición t para los puntos a, b, c, d. Los parámetros a y d son los puntos primero y último de la curva, mientras que b y c son los puntos de control. El parámetro final t varía entre 0 y 1. Esto puede ser realizado una vez con las coordenadas x y una segunda vez con las coordenadas y para obtener la ubicación de la curva Bezier en t."
],
+ "returns": "el valor de la curva Bezier en la posición t",
"params": {
"a": "Número: coordenada del primer punto de la curva",
"b": "Número: coordenada del primer punto de control de la curva",
"c": "Número: coordenada del segundo punto de control de la curva",
"d": "Número: coordenada del segundo punto de la curva",
"t": "Número: valor entre 0 y 1"
- },
- "returns": "el valor de la curva Bezier en la posición t"
+ }
},
"bezierTangent": {
"description": [
"Evalua la tangente de la curva Bezier en la posición t para los puntos a, b, c, d. Los parámetros a y d son los puntos primero y último de la curva, mientras que b y c son los puntos de control. El parámetro final t varía entre 0 1."
],
+ "returns": "la tangente en la posición t",
"params": {
"a": "Número: coordenada del primer punto de la curva",
"b": "Número: coordenada del primer punto de control de la curva",
"c": "Número: coordenada del segundo punto de control de la curva",
"d": "Número: coordenada del segundo punto de la curva",
"t": "Número: valor entre 0 y 1"
- },
- "returns": "la tangente en la posición t"
+ }
},
"curve": {
"description": [
@@ -437,18 +527,26 @@
"params": {
"x1": "Número: coordenada x del punto de control inicial",
"y1": "Número: coordenada y del punto de control inicial",
- "z1": "Número: coordenada x del primer punto",
"x2": "Número: coordenada y del primer punto",
"y2": "Número: coordenada x del segundo punto",
- "z2": "Número: coordenada y del segundo punto",
"x3": "Número: coordenada x del punto de control final",
"y3": "Número: coordenada y del punto de control final",
- "z3": "Número: coordenada z del punto de control inicial",
"x4": "Número: coordenada z del primer punto",
"y4": "Número: coordenada z del segundo punto",
+ "z1": "Número: coordenada x del primer punto",
+ "z2": "Número: coordenada y del segundo punto",
+ "z3": "Número: coordenada z del punto de control inicial",
"z4": "Número: coordenada z del punto de control final"
- },
- "returns": "Objeto: el objeto p5"
+ }
+ },
+ "curveDetail": {
+ "description": [
+ "Sets the resolution at which curves display. The default value is 20 while the minimum value is 3. ",
+ "This function is only useful when using the WEBGL renderer as the default canvas renderer does not use this information."
+ ],
+ "params": {
+ "resolution": "Number: resolution of the curves"
+ }
},
"curveTightness": {
"description": [
@@ -456,53 +554,54 @@
],
"params": {
"amount": "Número: deformación de los vértices originales"
- },
- "returns": "el objeto p5"
+ }
},
"curvePoint": {
"description": [
"Evalua la curva en la posición t para los puntos a, b, c, d. El parámetro t varía entre 0 y 1, los puntos a y d son puntos en la cruva, y b y c son los puntos de control. Esto puede ser hecho una vez con las coordenadas x y una segunda vez con las coordenadas y para obtener la ubicación de la curva en t."
],
+ "returns": "el objeto p5",
"params": {
"a": "Número: coordenada del primer punto de la curva",
"b": "Número: coordenada del primer punto de control de la curva",
"c": "Número: coordenada del segundo punto de control de la curva",
"d": "Número: coordenada del segundo punto de la curva",
"t": "Número: valor entre 0 y 1"
- },
- "returns": "el objeto p5"
+ }
},
"curveTangent": {
"description": [
"Evalua la tangente de la curva en la posición t para los puntos a, b, c, d. El parámetro t varía entre 0 y 1, a y d son los puntos de la curva, b y c son los puntos de control."
],
+ "returns": "la tangente en la posición t",
"params": {
"a": "Número: coordenada del primer punto de la curva",
"b": "Número: coordenada del primer punto de control de la curva",
"c": "Número: coordenada del segundo punto de control de la curva",
"d": "Número: coordenada del segundo punto de la curva",
"t": "Número: valor entre 0 y 1"
- },
- "returns": "la tangente en la posición t"
+ }
},
"beginContour": {
"description": [
- "Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro."
- ],
- "returns": "el objeto p5"
+ "Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro.",
+ ""
+ ]
},
"beginShape": {
"description": [
- "El uso de las funciones beginShape() y endShape() permiten la creación de figuras más complejas. beginShape() empieza la grabación de vértices para una figura, mientras que endShape() termina la grabación. El valor del parámetro kind (tipo) define qué tipo de figuras serán creadas a partir de los vértices. Si no se especifica un modo, la figura puede ser cualquier polígono irregular. Los parámetros disponibles para beginShape() son POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, y QUAD_STRIP. Después de llamar a la función beginShape(), debe ser seguida por una serie de comandos vertex(). Para detener el dibujo de la figura, ejecuta endShape(). Cada figura será dibujada con el color de trazo y el color de relleno actual. Transformaciones como translate(), rotate(), y scale() no funcionan dentro de beginShape(). Tampoco es posible usar otras figuras como ellipse() o rect() dentro de beginShape()."
+ "El uso de las funciones beginShape() y endShape() permiten la creación de figuras más complejas. beginShape() empieza la grabación de vértices para una figura, mientras que endShape() termina la grabación. El valor del parámetro kind (tipo) define qué tipo de figuras serán creadas a partir de los vértices. Si no se especifica un modo, la figura puede ser cualquier polígono irregular. Los parámetros disponibles para beginShape() son POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, y QUAD_STRIP. Después de llamar a la función beginShape(), debe ser seguida por una serie de comandos vertex(). Para detener el dibujo de la figura, ejecuta endShape(). Cada figura será dibujada con el color de trazo y el color de relleno actual. Transformaciones como translate(), rotate(), y scale() no funcionan dentro de beginShape(). Tampoco es posible usar otras figuras como ellipse() o rect() dentro de beginShape().",
+ "",
+ ""
],
"params": {
"kind": "Constante: puede ser POINTS, LINES, TRIANGLES, TRIANGLE_FAN TRIANGLE_STRIP, QUADS, o QUAD_STRIP"
- },
- "returns": "el objeto p5"
+ }
},
"bezierVertex": {
"description": [
- "Especifica las coordenadas de un vértice para una curva Bezier. Cada llamada a la función bezierVertex() define la posición de dos puntos de control y un punto ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que bezierVertex() es usada dentro de una llamada a beginShape(), debe ser antecedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE (modo) a beginShape()."
+ "Especifica las coordenadas de un vértice para una curva Bezier. Cada llamada a la función bezierVertex() define la posición de dos puntos de control y un punto ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que bezierVertex() es usada dentro de una llamada a beginShape(), debe ser antecedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE (modo) a beginShape().",
+ ""
],
"params": {
"x2": "Número: coordenada x del primer punto de control la curva",
@@ -510,25 +609,28 @@
"x3": "Número: coordenada x del segundo punto de control la curva",
"y3": "Número: coordenada y del segundo punto de control la curva",
"x4": "Número: coordenada x del primer punto ancla",
- "y4": "Número: coordenada y del primer punto ancla"
- },
- "returns": "el objeto p5"
+ "y4": "Número: coordenada y del primer punto ancla",
+ "z2": "Number: z-coordinate for the first control point (for WebGL mode)",
+ "z3": "Number: z-coordinate for the second control point (for WebGL mode)",
+ "z4": "Number: z-coordinate for the anchor point (for WebGL mode)"
+ }
},
"curveVertex": {
"description": [
- "Especifica las coordenadas de un vértice para una curva. Esta función solo puede ser usada entre beginShape() y endShape() y cuando no se ha especificado el parámetro MODE en la función beginShape(). Los puntos primero y último en una serie de líneas curveVertex() serán usados para guiar el inicio y final de una curva. Un mínimo de cuatro puntos es requerido para dibujar una pequeña curva entre los puntos segundo y tercero, Añadir un quinto punto con curveVertex() dibujará la curva entre los puntos segundo, tercero y cuarto. La función curveVertex() es una implementación de las splines de Catmull-Rom."
+ "Especifica las coordenadas de un vértice para una curva. Esta función solo puede ser usada entre beginShape() y endShape() y cuando no se ha especificado el parámetro MODE en la función beginShape(). Los puntos primero y último en una serie de líneas curveVertex() serán usados para guiar el inicio y final de una curva. Un mínimo de cuatro puntos es requerido para dibujar una pequeña curva entre los puntos segundo y tercero, Añadir un quinto punto con curveVertex() dibujará la curva entre los puntos segundo, tercero y cuarto. La función curveVertex() es una implementación de las splines de Catmull-Rom.",
+ ""
],
"params": {
"x": "Número: coordenada x del vértice",
- "y": "Número: coordenada y del vértice"
- },
- "returns": "el objeto p5"
+ "y": "Número: coordenada y del vértice",
+ "z": "Number: (Optional) z-coordinate of the vertex (for WebGL mode)"
+ }
},
"endContour": {
"description": [
- "Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro."
- ],
- "returns": "el objeto p5"
+ "Usa las funciones beginContour() y endContour() para crear figuras negativas dentro de figuras como el centro de la letra 'O'. beginContour() empieza la grabación de los vértices para la figura y endContour() finaliza la grabación. Los vértices que definen una figura negativa deben ser definidos en la dirección opuesta a la figura exterior. Primero dibuja los vértices de la figura exterior en el orden de las manecillas del reloj, y luego para figuras internas, dibuja vértices en el sentido contrario a las manecillas del reloj. Estas funciones solo pueden ser usadas dentro de un par beginShape()/endShape() y transformaciones como translate(), rotate(), y scale() no funcionan dentro de un par beginContour()/endContour(). Tampoco es posible usar otras figuras, como elupse() o rect() dentro.",
+ ""
+ ]
},
"endShape": {
"description": [
@@ -536,20 +638,21 @@
],
"params": {
"mode": "Constante: usa CLOSE para cerrar la figura."
- },
- "returns": "el objeto p5"
+ }
},
"quadraticVertex": {
"description": [
- "Especifica las coordenadas de vértices par curvas Bezier cuadráticas. Cada llamada a quadraticVertex() define la posición de uno de los puntos de control y ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que quadraticVertex() es usada dentro de una llamada a beginShape(), debe ser precedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre un par beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE de beginShape()."
+ "Especifica las coordenadas de vértices par curvas Bezier cuadráticas. Cada llamada a quadraticVertex() define la posición de uno de los puntos de control y ancla de una curva Bezier, añadiendo un nuevo segmento a la línea o figura. La primera vez que quadraticVertex() es usada dentro de una llamada a beginShape(), debe ser precedida por una llamada a la función vertex() para definir el primer punto ancla. Esta función debe ser usada entre un par beginShape() y endShape() y solo cuando no se ha especificado el parámetro MODE de beginShape().",
+ ""
],
"params": {
"cx": "Número: coordenada x del punto de control",
"cy": "Número: coordenada y del punto de control",
"x3": "Número: coordenada x del punto ancla",
- "y3": "Número: coordenada y del punto ancla"
- },
- "returns": "el objeto p5"
+ "y3": "Número: coordenada y del punto ancla",
+ "cz": "Number: z-coordinate for the control point (for WebGL mode)",
+ "z3": "Number: z-coordinate for the anchor point (for WebGL mode)"
+ }
},
"vertex": {
"description": [
@@ -557,207 +660,186 @@
],
"params": {
"x": "Número: coordenada x del vértice",
- "y": "Número: coordenada y del vértice"
- },
- "returns": "el objeto p5"
+ "y": "Número: coordenada y del vértice",
+ "z": "Number: z-coordinate of the vertex",
+ "u": "Number: (Optional) the vertex's texture u-coordinate",
+ "v": "Number: (Optional) the vertex's texture v-coordinate"
+ }
},
- "loadModel": {
+ "P2D": {
"description": [
- "Carga un modelo 3d desde un archivo OBJ. Una de las limitaciones del formato OBJ es que no trae incorporado un sentido de escala. Esto significa que los modelos exportados por distintos programas pueden ser de tamaños radicalmente distintos. Si tu modelo no está siendo mostrado en pantalla, trata llamando a la función loadMode() con el parámetro de normalización configurado como verdadero. Esto escalará el tamaño del modelo a una escala apropiada para p5. También puedes hacer cambios adicionales al tamaño final de tu modelo con la función scale()."
- ],
- "params": {
- "path": "String: ubicación del modelo a cargar",
- "normalize": "Boolean: Si es verdadero (true), escala el modelo a un tamaño estandarizado al momento de cargarlo.",
- "successCallback": "Función(p5.Geometry3D): función a ser llamada cuando el modelo se cargue. Será pasada al modelo del objeto 3D.",
- "failureCallback": "Función(evento): llamada con el error evento si la imagen no falla al cargar."
- },
- "returns": "el objeto p5.Geometry3D"
- },
- "model": {
- "description": ["Hace el render de un modelo 3D en la pantalla."],
- "params": {
- "model": "p5.Geometry: modelo 3D cargado para realizar render"
- },
- "returns": "el objeto p5"
- },
- "plane": {
- "description": ["Dibuja un plano con ancho y altura dados."],
- "params": {
- "width": "Número: ancho del plano",
- "height": "Número: altura del plano",
- "detailX": "Número: número opcional de subdivisiones triangulares en la dimensión x",
- "detailY": "Número: número opcional de subdivisiones triangulares en la dimensión y"
- },
- "returns": "el objeto p5"
- },
- "box": {
- "description": ["Dibuja una caja con ancho, altura y profundidad dados."],
- "params": {
- "width": "Número: ancho de la caja",
- "Height": "Número: altura de la caja",
- "depth": "Número: profundidad de la caja",
- "detailX": "Número: número opcional de subdivisiones triangulares en la dimensión x",
- "detailY": "Número: número opcional de subdivisiones triangulares en la dimensión y"
- },
- "returns": "el objeto p5"
- },
- "sphere": {
- "description": ["Dibuja una esfera de radio dado."],
- "params": {
- "radius": "Número: radio del círculo",
- "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
- "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16"
- },
- "returns": "el objeto p5"
- },
- "cylinder": {
- "description": ["Dibuja un cilindro de radio y altura dados."],
- "params": {
- "radius": "Número: radio de la superficie",
- "height": "Número: altura del cilindro",
- "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
- "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16"
- },
- "returns": "el objeto p5"
- },
- "cone": {
- "description": ["Dibuja un cono de radio y altura dados."],
- "params": {
- "radius": "Número: radio de la superficie inferior",
- "height": "Número: altura del cono",
- "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
- "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16"
- },
- "returns": "el objeto p5"
- },
- "ellipsoid": {
- "description": ["Dibuja un elipsoide de radio dado."],
- "params": {
- "radiusx": "Número: radio x del círculo",
- "radiusy": "Número: radio y del círculo",
- "radiusz": "Número: radio z del círculo",
- "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24. Evita números mayores a 150 que podrían colapsar el navegador.",
- "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16. Evita números mayores a 150 que podrían colapsar el navegador."
- },
- "returns": "el objeto p5"
+ "The default, two-dimensional renderer."
+ ]
},
- "torus": {
- "description": ["Dibuja un toroide con radio y tubo dado."],
- "params": {
- "radius": "Número: radio del anillo completo",
- "tubeRadius": "Número: radio del tubo",
- "detailX": "Número: radio z del círculo",
- "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24.",
- "UNKNOWN-PARAM-5": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16."
- },
- "returns": "el objeto p5"
+ "WEBGL": {
+ "description": [
+ "One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z"
+ ]
},
+ "ARROW": {},
+ "CROSS": {},
+ "HAND": {},
+ "MOVE": {},
+ "TEXT": {},
+ "WAIT": {},
"HALF_PI": {
"description": [
"HALF_PI es una constante matemática de valor 1.57079632679489661923. Es la mitad de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos()."
- ],
- "returns": "el objeto p5"
+ ]
},
"PI": {
"description": [
"PI es una constante matemática de valor 3.14159265358979323846. Es la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos()."
- ],
- "returns": "el objeto p5"
+ ]
},
"QUARTER_PI": {
"description": [
"QUARTER_PI es una constante matemática de valor 0.7853982. Es un cuarto de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos()."
- ],
- "returns": "el objeto p5"
+ ]
},
"TAU": {
"description": [
"TAU es un alias de TWO_PI, una constante matemática de valor 6.28318530717958647693. Es el doble de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos()."
- ],
- "returns": "el objeto p5"
+ ]
},
"TWO_PI": {
"description": [
"TWO_PI es una constante matemática de valor 6.28318530717958647693. Es el doble de la razón entre la circunferencia de un círculo y su diámetro. Es útil en combinación con las funciones trigonométricas sin() y cos()."
- ],
- "returns": "el objeto p5"
- },
- "preload": {
- "description": [
- "La función preload() es ejecutada antes de setup(), es usada para manejar la carga asíncrona de archivos externos. Si se define una función preload(), setup() esperará hasta que las llamadas a funciones load hayan terminado. Solo se deben incluir instrucciones de carga dentro de preload() (loadImage, loadJSON, loadFont, loadStrings, etc)."
- ],
- "returns": "el objeto p5"
- },
- "setup": {
- "description": [
- "La función setup() es ejecutada una vez, cuando el programa empieza. Es usada para definir propiedades iniciales como amaño de la pantalla y color de fondo y para cargar medios como imágenes y tipografías cuando el programa empieza. Solo puede haber una función setup() en cada programa y no debe ser llamada después de su ejecución inicial. Nota: las variables declaradas dentro de setup() no son accesibles dentro de otras funciones, como draw()."
- ],
- "returns": "el objeto p5"
- },
- "draw": {
- "description": [
- "La función draw() es ejecutada después de setup(), y ejecuta contínuamente las líneas de código dentro de su bloque hasta que el programa es detenido o se ejecuta la función noLoop(). Notar que si noLoop() es ejecutada dentro de setup(), draw() igualmente será ejecutado una vez antes de parar. La función draw() es ejecutada automáticamente y nunca debiera ser ejecutada explícitamente. Siempre debería ser controlada con noLoop(), redraw() y loop(). Después de que noLoop() detiene la ejecución del código dentro de draw(), redraw() causa que el código dentro de draw() se ejecute una vez, y loop() causa que el código dentro de draw() siga ejecutándose de forma continua. El número de veces que draw() se ejecuta por segundo puede ser controlado con la función frameRate(). Solo puede haber una función draw() en cada bosquejo, y draw() solo debe existir si quieres que el código corra de forma continua, o para procesar eventos como mousePressed(). Algunas veces, podrías querer ejecutar una función draw() vacía, como se mostró en el ejemplo más arriba. Es importante notar que el sistema de coordenadas de dibujo será reiniciado al principio de cada ejecución de la función draw(). Si cualquier transformación es hecha dentro de draw() (por ejemplo: escalar, rotar, trasladar), sus efectos serán anulados al principio de cada ejecución de draw(), así que las transformaciones no se acumulan en el tiempo. Por el otro lado, el estilo aplicado (color de relleno, color de trazado) sí se mantendrá en efecto. "
- ],
- "returns": "el objeto p5"
- },
- "remove": {
- "description": [
- "Remueve el bosquejo de p5 completamente. Esto removerá el lienzo y cualquier otro elemento creado por p5.js. También detendrá el bucle de dibujo y desvinculará cualquier propiedad o método global de la ventana. Dejará una variable p5 en caso que quieras crear un nuevo bosquejo p5. Si quieres, puedes definir p5 = null para borrar esta variable."
- ],
- "returns": "el objeto p5"
- },
- "noLoop": {
- "description": [
- "Detiene la ejecución continua del código de draw() de p5.js. Si se llama a la función loop(), el código dentro de draw() empieza a correr de forma continua nuevamente. Si se usa noLoop() dentro de setup(), debe ser la última línea de código dentro del bloque. Cuando se usa noLoop(), no es posible manipular o acceder a la pantalla dentro de las funciones que manejan eventos como mousePressed() o keyPressed(). En vez de eso, usa estas funciones para llamar a redraw() o loop(), que permitirán la ejecución de draw(), lo que permite el refresco correcto de la pantalla. Esto significa que cuando noLoop() ha sido ejecutado, no se sigue dibujando, y funciones como saveFrame() o loadPixels() no se pueden usar. Notar que si el bosquejo es escalado, redraw() será llamado para actualizar el bosquejo, incluso si noLoop() ha sido ejecutada. Por otro lado, el bosquejo entrará a un estado singular, hasta que loop() sea ejecutado."
- ],
- "returns": "el objeto p5"
+ ]
},
- "loop": {
+ "DEGREES": {
"description": [
- "Por defecto, p5.js repite de forma continua la función draw(), ejecutado el código dentro de su bloque. Sin embargo, el bucle de dibujo puede ser detenido llamando a la función noLoop(). En ese caso, el bucle de draw() puede ser retomado con loop()."
- ],
- "returns": "el objeto p5"
+ "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either DEGREES or RADIANS)."
+ ]
},
- "push": {
+ "RADIANS": {
"description": [
- "La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading()."
- ],
- "returns": "el objeto p5"
+ "Constant to be used with angleMode() function, to set the mode which p5.js interprets and calculates angles (either RADIANS or DEGREES)."
+ ]
},
- "pop": {
- "description": [
- "La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading()."
+ "CORNER": {},
+ "CORNERS": {},
+ "RADIUS": {},
+ "RIGHT": {},
+ "LEFT": {},
+ "CENTER": {},
+ "TOP": {},
+ "BOTTOM": {},
+ "BASELINE": {},
+ "POINTS": {},
+ "LINES": {},
+ "LINE_STRIP": {},
+ "LINE_LOOP": {},
+ "TRIANGLES": {},
+ "TRIANGLE_FAN": {},
+ "TRIANGLE_STRIP": {},
+ "QUADS": {},
+ "QUAD_STRIP": {},
+ "TESS": {},
+ "CLOSE": {},
+ "OPEN": {},
+ "CHORD": {},
+ "PIE": {},
+ "PROJECT": {},
+ "SQUARE": {},
+ "ROUND": {},
+ "BEVEL": {},
+ "MITER": {},
+ "RGB": {},
+ "HSB": {
+ "description": [
+ "HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB ."
]
},
- "redraw": {
+ "HSL": {},
+ "AUTO": {
"description": [
- "Ejecuta una vez el código dentro de la función draw(). Esta función permite al programa actualizar la ventana mostrada solamente cuando es necesario, por ejemplo, cuando un evento registrado por mousePressed() o keyPressed() ocurre. En la estructura de un programa, solo hace sentido llamar a redraw() dentro de eventos como mousePressed(). Esto es porque redraw() no hace que draw() se ejecute de forma inmediata (solo define una indicación de que se necesita un refresco). La función redraw() no funciona de forma correcta cuando se llama dentro de la función draw(). Para habilitar y deshabilitar animaciones, usa las funcioens loop() y noLoop(). Adicionalmente, puedes definir el número de veces que se dibuja por cada llamada a este método. Para esto, añade un entero como parámetro único a la función, que señale cuántas veces se requiere dibujar."
- ],
- "params": {
- "n": "Entero: redibuja n-veces. Por defecto el valor es 1"
- },
- "returns": "el objeto p5"
+ "AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time."
+ ]
},
+ "ALT": {},
+ "BACKSPACE": {},
+ "CONTROL": {},
+ "DELETE": {},
+ "DOWN_ARROW": {},
+ "ENTER": {},
+ "ESCAPE": {},
+ "LEFT_ARROW": {},
+ "OPTION": {},
+ "RETURN": {},
+ "RIGHT_ARROW": {},
+ "SHIFT": {},
+ "TAB": {},
+ "UP_ARROW": {},
+ "BLEND": {},
+ "REMOVE": {},
+ "ADD": {},
+ "DARKEST": {},
+ "LIGHTEST": {},
+ "DIFFERENCE": {},
+ "SUBTRACT": {},
+ "EXCLUSION": {},
+ "MULTIPLY": {},
+ "SCREEN": {},
+ "REPLACE": {},
+ "OVERLAY": {},
+ "HARD_LIGHT": {},
+ "SOFT_LIGHT": {},
+ "DODGE": {},
+ "BURN": {},
+ "THRESHOLD": {},
+ "GRAY": {},
+ "OPAQUE": {},
+ "INVERT": {},
+ "POSTERIZE": {},
+ "DILATE": {},
+ "ERODE": {},
+ "BLUR": {},
+ "NORMAL": {},
+ "ITALIC": {},
+ "BOLD": {},
+ "BOLDITALIC": {},
+ "LINEAR": {},
+ "QUADRATIC": {},
+ "BEZIER": {},
+ "CURVE": {},
+ "STROKE": {},
+ "FILL": {},
+ "TEXTURE": {},
+ "IMMEDIATE": {},
+ "IMAGE": {},
+ "NEAREST": {},
+ "REPEAT": {},
+ "CLAMP": {},
+ "MIRROR": {},
+ "LANDSCAPE": {},
+ "PORTRAIT": {},
+ "GRID": {},
+ "AXES": {},
"print": {
"description": [
- "La función print() escribe en la consola del navegador. Esta función es a menudo de ayuda para observar los datos que un programa está produciendo. Esta función crea una nueva línea de texto por cada ejecución de la función. Elementos individuales pueden ser separados por comillas ('') y unidos con el operador de adición (+). Aunque print() es similar a console.log(), no llama a console.log() directamente, para simular una manera más simple de entender el comportamiento del programa. Por esto mismo, es más lento. Para resultados más rápidos, usar directamente console.log()."
+ "La función print() escribe en la consola del navegador. Esta función es a menudo de ayuda para observar los datos que un programa está produciendo. Esta función crea una nueva línea de texto por cada ejecución de la función. Elementos individuales pueden ser separados por comillas ('') y unidos con el operador de adición (+). Aunque print() es similar a console.log(), no llama a console.log() directamente, para simular una manera más simple de entender el comportamiento del programa. Por esto mismo, es más lento. Para resultados más rápidos, usar directamente console.log().",
+ ""
],
"params": {
"contents": "Cualquiera: cualquier combinación de número, string, objeto, boolean o arreglo a imprimir"
- },
- "returns": "el objeto p5"
+ }
},
"frameCount": {
"description": [
"La variable de sistema frameCount contiene el número de cuadros (frames) que se han mostrado desde que el programa empezó a ejecutarse. Dentro de setup() el valor es 0, después de la primera iteración de draw() es 1, etc."
- ],
- "returns": "el objeto p5"
+ ]
+ },
+ "deltaTime": {
+ "description": [
+ "The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds. ",
+ "This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate."
+ ]
},
"focused": {
"description": [
"Confirma si la ventana de un programa de p5.js está en foco, lo que significa que el bosquejo aceptará entradas desde el ratón o teclado. Esta variable es verdadera (true) si la ventana está en foco y falsa (false) si no."
- ],
- "returns": "el objeto p5"
+ ]
},
"cursor": {
"description": [
@@ -767,72 +849,66 @@
"type": "Número|Constante: puede ser ARROW, CROSS, HAND, MOVE, TEXT, o WAIT, o la dirección de una imagen",
"x": "Número: el punto activo horizontal del cursor",
"y": "Número: el punto activo vertical del cursor"
- },
- "returns": "el objeto p5"
+ }
},
"frameRate": {
"description": [
- "Especifica el número de cuadros mostrados por segundo. Por ejemplo, la llamada a la función frameRate(30), tratará de refrescar 30 veces por segundo. Si el procesador no es lo suficientemente rápido para mantener la tasa especificada, la tasa de cuadros por segundo no será lograda. Definir la tasa de cuadros por segundo dentro de setup() es lo recomendable. La tasa por defecto es de 60 veces por segundo. Esto es lo mismo que setFrameRate(val). Llamar a la función frameRate() sin argumentos retorna la tasa actual. Esto es lo mismo que getFrameRate(). Llamar a la función frameRate() con arugmentos que no son de tipo número o no son positivos también retornarán la tasa actual."
+ "Especifica el número de cuadros mostrados por segundo. Por ejemplo, la llamada a la función frameRate(30), tratará de refrescar 30 veces por segundo. Si el procesador no es lo suficientemente rápido para mantener la tasa especificada, la tasa de cuadros por segundo no será lograda. Definir la tasa de cuadros por segundo dentro de setup() es lo recomendable. La tasa por defecto es de 60 veces por segundo. Esto es lo mismo que setFrameRate(val). Llamar a la función frameRate() sin argumentos retorna la tasa actual. Esto es lo mismo que getFrameRate(). Llamar a la función frameRate() con arugmentos que no son de tipo número o no son positivos también retornarán la tasa actual.",
+ "",
+ ""
],
"params": {
"fps": "Número: número de cuadros a ser mostrados cada segundo."
- },
- "returns": "la tasa de cuadros por segundo (frameRate) actual"
+ }
},
"noCursor": {
- "description": ["Esconde el cursor."],
- "returns": "el objeto p5"
+ "description": [
+ "Esconde el cursor."
+ ]
},
"displayWidth": {
"description": [
"Variable de sistema que almacena el ancho de la pantalla mostrada. Esto es usado para correr un programa a pantalla completa en cualquier dimensión de pantalla."
- ],
- "returns": "el objeto p5"
+ ]
},
"displayHeight": {
"description": [
"Variable de sistema que almacena la altura de la pantalla mostrada. Esto es usado para correr un programa a pantalla completa en cualquier dimensión de pantalla."
- ],
- "returns": "el objeto p5"
+ ]
},
"windowWidth": {
"description": [
"Variable de sistema que almacena el ancho interior de la ventana del navegador, equivale a window.innerWidth."
- ],
- "returns": "el objeto p5"
+ ]
},
"windowHeight": {
"description": [
"Variable de sistema que almacena la altura interior de la ventana del navegador, equivale a window.innerHeight."
- ],
- "returns": "el objeto p5"
+ ]
},
"windowResized": {
"description": [
"La función windowResized() es llamada cada vez que la ventana del navegador cambia de tamaño. Es un buen lugar para cambiar las dimensiones del lienzo o hacer cualquier otro ajuste necesario para acomodar las nuevas dimensiones de la ventana."
- ],
- "returns": "el objeto p5"
+ ]
},
"width": {
"description": [
"Variable de sistema que almacena el ancho del lienzo dibujado. Este valor es definido por el primer parámetro de la función createCanvas(). Por ejemplo, la llamada a la función (320, 240) define la variable width al valor 320. El valor por defecto de ancho es de 100 si es que createCanvas() no ha sido usado en el programa."
- ],
- "returns": "el objeto p5"
+ ]
},
"height": {
"description": [
"ariable de sistema que almacena la altura del lienzo dibujado. Este valor es definido por el primer parámetro de la función createCanvas(). Por ejemplo, la llamada a la función (320, 240) define la variable width al valor 240. El valor por defecto de ancho es de 100 si es que createCanvas() no ha sido usado en el programa."
- ],
- "returns": "el objeto p5"
+ ]
},
"fullscreen": {
"description": [
"Si se da un argumento, define que el bosquejo esté a pantalla completa basado en el valor del argumento. Si no se da un argumento, retorna el estado actual de pantalla completa. Notar que debido a restricciones del navegador esto solo puede ser llamado con una entrada de parte del usuario, por ejemplo, cuando se presiona el ratón como en el ejemplo."
],
+ "returns": "Boolean: estado de pantalla completa actual",
"params": {
"val": "Boolean: define si el bosquejo debe estar a pantalla completa o no."
- },
- "returns": "Boolean: estado de pantalla completa actual"
+ }
},
"pixelDensity": {
"description": [
@@ -840,8 +916,7 @@
],
"params": {
"val": "Número: si es que el bosquejo debe ser escalado y cuánto."
- },
- "returns": "Número: densidad de pixeles actual del bosquejo"
+ }
},
"displayDensity": {
"description": [
@@ -850,11 +925,15 @@
"returns": "Número: la densidad de pixeles actual del monitor"
},
"getURL": {
- "description": ["Retorna la URL actual."],
+ "description": [
+ "Retorna la URL actual."
+ ],
"returns": "String: URL"
},
"getURLPath": {
- "description": ["Retorna la dirección URL como un arreglo"],
+ "description": [
+ "Retorna la dirección URL como un arreglo"
+ ],
"returns": "Arreglo: los componentes de la dirección"
},
"getURLParams": {
@@ -863,1691 +942,6488 @@
],
"returns": "Objeto: parámetros de la URL"
},
- "createCanvas": {
+ "preload": {
"description": [
- "Crea un elemento canvas en el documento, y define sus dimensiones medidas en pixeles. Este método debe ser llamado solo una vez al comienzo de la función setup(). Llamar a la función createCanvas() más de una vez en un bosquejo puede resultar en comportamientos impredecibles. Si quieres más de un lienzo donde dibujar, debes usar la función createGraphics() (escondido por defecto, pero puede ser mostrado), Las variables de sistema width (ancho) y height (altura) son definidas por los parámetros pasados a la función. Si createCanvas() no es usado, la ventana tendrá un tamaño por defecto de 100 x 100 pixeles. Para más maneras de posicionar el lienzo, ver la sección de posición del lienzo."
- ],
- "params": {
- "w": "Número: ancho del lienzo",
- "h": "Número: altura del lienzo",
- "renderer": "Constante: P2D o WEBGL"
- },
- "returns": "Objeto: lienzo generado"
+ "La función preload() es ejecutada antes de setup(), es usada para manejar la carga asíncrona de archivos externos. Si se define una función preload(), setup() esperará hasta que las llamadas a funciones load hayan terminado. Solo se deben incluir instrucciones de carga dentro de preload() (loadImage, loadJSON, loadFont, loadStrings, etc).",
+ ""
+ ]
},
- "resizeCanvas": {
+ "setup": {
"description": [
- "Redimensiona el linezo al ancho y la altura dados. El lienzo será borrado y la función draw() será llamada inmediatamente, permitiendo que el bosquejo se ajuste al nuevo lienzo"
- ],
- "returns": "el objeto p5"
+ "La función setup() es ejecutada una vez, cuando el programa empieza. Es usada para definir propiedades iniciales como amaño de la pantalla y color de fondo y para cargar medios como imágenes y tipografías cuando el programa empieza. Solo puede haber una función setup() en cada programa y no debe ser llamada después de su ejecución inicial. Nota: las variables declaradas dentro de setup() no son accesibles dentro de otras funciones, como draw().",
+ ""
+ ]
},
- "noCanvas": {
+ "draw": {
"description": [
- "Remueve el lienzo por defecto para un bosquejo de p5 que no requiere un lienzo."
- ],
- "returns": "el objeto p5"
+ "La función draw() es ejecutada después de setup(), y ejecuta contínuamente las líneas de código dentro de su bloque hasta que el programa es detenido o se ejecuta la función noLoop(). Notar que si noLoop() es ejecutada dentro de setup(), draw() igualmente será ejecutado una vez antes de parar. La función draw() es ejecutada automáticamente y nunca debiera ser ejecutada explícitamente. Siempre debería ser controlada con noLoop(), redraw() y loop(). Después de que noLoop() detiene la ejecución del código dentro de draw(), redraw() causa que el código dentro de draw() se ejecute una vez, y loop() causa que el código dentro de draw() siga ejecutándose de forma continua. El número de veces que draw() se ejecuta por segundo puede ser controlado con la función frameRate(). Solo puede haber una función draw() en cada bosquejo, y draw() solo debe existir si quieres que el código corra de forma continua, o para procesar eventos como mousePressed(). Algunas veces, podrías querer ejecutar una función draw() vacía, como se mostró en el ejemplo más arriba. Es importante notar que el sistema de coordenadas de dibujo será reiniciado al principio de cada ejecución de la función draw(). Si cualquier transformación es hecha dentro de draw() (por ejemplo: escalar, rotar, trasladar), sus efectos serán anulados al principio de cada ejecución de draw(), así que las transformaciones no se acumulan en el tiempo. Por el otro lado, el estilo aplicado (color de relleno, color de trazado) sí se mantendrá en efecto. ",
+ "",
+ "",
+ "",
+ ""
+ ]
},
- "createGraphics": {
+ "remove": {
"description": [
- "Crea y retorna un nuevo objeto p5.Renderer. Usa esta clase si necesitas dibujar fuera de pantalla en un buffer gráfico. Los dos parámetros definen el ancho y la altura en pixeles."
- ],
- "params": {
- "w": "Número: ancho del buffer gráfico fuera de pantalla",
- "h": "Número: altura del buffer gráfico fuera de pantalla",
- "renderer": "Constante: P2D o WEBGL, si no se define es P2D por defecto"
- },
- "returns": "buffer gráfico fuera de pantalla"
+ "Remueve el bosquejo de p5 completamente. Esto removerá el lienzo y cualquier otro elemento creado por p5.js. También detendrá el bucle de dibujo y desvinculará cualquier propiedad o método global de la ventana. Dejará una variable p5 en caso que quieras crear un nuevo bosquejo p5. Si quieres, puedes definir p5 = null para borrar esta variable."
+ ]
},
- "blendMode": {
+ "disableFriendlyErrors": {
"description": [
- "Combina los pixeles en la ventana según el modo definido. Existen distintas maneras de combinar los pixeles de la fuente (A) con los ya existentes en la pantalla mostrada (B). TODO"
- ],
- "params": {
- "mode": "Constante: modo de combinar del lienzo"
- },
- "returns": "el objeto p5"
+ "Allows for the friendly error system (FES) to be turned off when creating a sketch, which can give a significant boost to performance when needed. See disabling the friendly error system ."
+ ]
},
- "applyMatrix": {
+ "let": {
"description": [
- "Multiplica la matriz actual por la especificada según los parámetros. Esto es muy lento porque tratará de calcular el inverso de la transformada, así que evítalo cuando sea posible"
- ],
- "params": {
- "a": "Número: números que definen la matriz 3x2 a multiplicar",
- "b": "Número: números que definen la matriz 3x2 a multiplicar",
- "c": "Número: números que definen la matriz 3x2 a multiplicar",
- "d": "Número: números que definen la matriz 3x2 a multiplicar",
- "e": "Número: números que definen la matriz 3x2 a multiplicar",
- "f": "Número: números que definen la matriz 3x2 a multiplicar"
- },
- "returns": "el objeto p5"
+ "Creates and names a new variable. A variable is a container for a value. ",
+ "Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within. ",
+ "From the MDN entry : Declares a block scope local variable, optionally initializing it to a value."
+ ]
},
- "resetMatrix": {
- "description": ["Reemplaza la matriz actual con la matriz identidad"],
- "returns": "el objeto p5"
+ "const": {
+ "description": [
+ "Creates and names a new constant. Like a variable created with let , a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const. ",
+ "Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists. ",
+ "From the MDN entry : Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared."
+ ]
},
- "rotate": {
+ "===": {
"description": [
- "Rota una figura según el monto especificado por el parámetro ángulo. Esta función toma en cuenta el modo de ángulo definido por angleMode(), así que los ángulos pueden ser ingresados en radianes o grados. Los objetos son siempre rotados según su posición relativa al origen y los números positivos rotan en la dirección de las manecillas del reloj. Las transformaciones se aplican a todo lo que ocurre de forma posterior y las subsecuentes llamadas a la función acumulan el efecto. Por ejemplo, llamar a la función rotate(HALF_PI) y luego rotate(HALF_PI) equivale a una llamada a rotate(PI). Todas las transformaciones son anuladas cuando la función draw() comienza nuevamente. Técnicamente, rotate() multiplica la matriz de transformación actual por una matriz de rotación. Esta función puede ser controlada además con las funciones push() y pop()."
- ],
- "params": {
- "angle": "Ángulo: el ángulo de rotación, especificado en radianes o grados, dependiendo de angleMode()",
- "axis": "Número: ángulo en radianes",
- "UNKNOWN-PARAM-3": "p5.Vector|Arreglo: eje sobre el que se rota"
- },
- "returns": "el objeto p5"
+ "The strict equality operator === checks to see if two values are equal and of the same type. ",
+ "A comparison expression always evaluates to a boolean . ",
+ "From the MDN entry : The non-identity operator returns true if the operands are not equal and/or not of the same type. ",
+ "Note: In some examples around the web you may see a double-equals-sign == , used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them."
+ ]
},
- "rotateX": {
- "description": ["Rota en torno al eje X"],
- "params": {
- "angle": "Número: ángulo en radianes"
- },
- "returns": "el objeto p5"
+ ">": {
+ "description": [
+ "The greater than operator \">> evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN. "
+ ]
},
- "rotateY": {
- "description": ["Rota en torno al eje Y"],
- "params": {
- "angle": "Número: ángulo en radianes"
- },
- "returns": "el objeto p5"
+ ">=": {
+ "description": [
+ "The greater than or equal to operator =\">>= evaluates to true if the left value is greater than or equal to the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
},
- "rotateZ": {
+ "<": {
"description": [
- "Rota en torno al eje Z,. Sólo disponible en el modo WEBGL."
- ],
- "params": {
- "angle": "Número: ángulo en radianes"
- },
- "returns": "el objeto p5"
+ "The less than operator < evaluates to true if the left value is less than the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
},
- "scale": {
+ "<=": {
"description": [
- "Aumenta o decrementa el tamaño de una figura por medio de expandir o contraer sus vértices. Los objetos siempre escalan desde su origen relativo al sistema de coordenadas. Los valores de escalamiento son porcentajes decimales. Por ejemplo, la llamada a la función scale(2.0) aumenta la dimensión de una figura en un 200%. Las transformaciones se aplican a todo lo que ocurre después y llamadas subsecuentes a la función multiplican el efecto. Por ejemplo, llamar a scale(2.0) y luego a scale(1.5) equivale a llamar a scale(3.0). Si la función scale() es llamad dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. El uso de esta función con el parámetro z está solo disponible en el modo WEBGL. Esta función puede también ser controlada con las funciones push() y pop()."
- ],
- "params": {
- "s": "Número | p5.Vector| Arreglo: porcentaje a escalar del objeto, o porcentaje a esacalar del objeto en el eje x si se dan múltiples argumentos",
- "y": "Número: porcentaje a escalar el objeto en el eje y",
- "z": "Número: porcentaje a escalar el objeto en el eje z (sólo en modo WEBGL)"
- },
- "returns": "el objeto p5"
+ "The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
},
- "shearX": {
+ "if-else": {
"description": [
- "Corta la figura en torno al eje x según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearX(PI/2) y luego a shearX(PI/2) equivale a llamar a shearX(PI). Si shearX() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearX() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop()."
- ],
- "params": {
- "angle": "Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode()"
- },
- "returns": "el objeto p5"
+ "The if-else statement helps control the flow of your code. ",
+ "A condition is placed between the parenthesis following 'if', when that condition evalues to truthy , the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy , the code between the curly braces of 'else' block is run instead. Writing an else block is optional. ",
+ "From the MDN entry : The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed"
+ ]
},
- "shearY": {
+ "function": {
"description": [
- "Corta la figura en torno al eje y según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearY(PI/2) y luego a shearY(PI/2) equivale a llamar a shearY(PI). Si shearY() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearY() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop()."
- ],
- "params": {
- "angle": "Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode()"
- },
- "returns": "el objeto p5"
+ "Creates and names a function . A function is a set of statements that perform a task. ",
+ "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commas. ",
+ "From the MDN entry : Declares a function with the specified parameters."
+ ]
},
- "translate": {
+ "return": {
"description": [
- "Especifica una cantidad a desplazar los objetos dentro de la ventana mostrada. El parámetro x especifica la traslación de izquierda a derecha, el parámetro y especifica la traslación de arriba a abajo. Las transformaciones son acumulativas y aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a translate(50, 0) y luego a translate(20, 0) equivale a llamar a translate(70, 0). Si translate() es llamado dentro de draw(), la transformación es anulada cada vez que el bucle empieza nuevamente. Esta función peude ser controlada con las funciones push() y pop()."
- ],
- "params": {
- "x": "Número: traslación izquierda-derecha",
- "y": "Número: traslación arriba-abajo",
- "z": "Número: traslación adelante-atrás (solo en modo WEBGL)"
- },
- "returns": "el objeto p5"
+ "Specifies the value to be returned by a function. For more info checkout the MDN entry for return ."
+ ]
},
- "deviceOrientation": {
+ "boolean": {
"description": [
- "La variable de sistema deviceOrientation siempre contiene la orientación del dispositivo. El valor de esta variable será o landscape (paisaje) o portrait (retrato). Si la información no está disponible, su valor será undefined."
+ "Convierte un número o string a su representación en boolean. Para números, cualquier valor distinto de cero (positivo o ne gativo), evalua a true, mientras que cero evalua a falso. Para un string, el valor true evalua a true, mientras que cualquier otro valor evalua a falso. Cuando un arreglo de números o strings es introducido, entonces un arreglo de booleans de la misma longitud es retornado."
],
- "returns": "el objeto p5"
+ "returns": "Boolean: representación en formato boolean del valor",
+ "params": {
+ "n": "String|Boolean|Número|Arreglo: valor a procesar"
+ }
},
- "accelerationX": {
+ "string": {
"description": [
- "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje X. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(\"). ",
+ "From the MDN entry : A string is a sequence of characters used to represent text."
+ ]
},
- "accelerationY": {
+ "number": {
"description": [
- "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Y. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number. ",
+ "The MDN entry for number "
+ ]
},
- "accelerationZ": {
+ "object": {
"description": [
- "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Z. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "From MDN's object basics : An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)"
+ ]
},
- "pAccelerationX": {
+ "class": {
"description": [
- "La variable de sistema pAccelerationX siempré contiene la aceleración del dispositivo en el eje X, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "Creates and names a class which is a template for the creation of objects . ",
+ "From the MDN entry : The class declaration creates a new Class with a given name using prototype-based inheritance."
+ ]
},
- "pAccelerationY": {
+ "for": {
"description": [
- "La variable de sistema pAccelerationY siempré contiene la aceleración del dispositivo en el eje Y, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "for creates a loop that is useful for executing one section of code multiple times. ",
+ "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written. ",
+ "The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression. ",
+ "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser. ",
+ "From the MDN entry : Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once."
+ ]
},
- "pAccelerationZ": {
+ "while": {
"description": [
- "La variable de sistema pAccelerationZ siempré contiene la aceleración del dispositivo en el eje Z, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
- ],
- "returns": "el objeto p5"
+ "while creates a loop that is useful for executing one section of code multiple times. ",
+ "With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while , so if the condition is initially false the loop body, or statement, will never execute. ",
+ "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser. ",
+ "From the MDN entry : The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement."
+ ]
},
- "rotationX": {
+ "createCanvas": {
"description": [
- "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado."
+ "Crea un elemento canvas en el documento, y define sus dimensiones medidas en pixeles. Este método debe ser llamado solo una vez al comienzo de la función setup(). Llamar a la función createCanvas() más de una vez en un bosquejo puede resultar en comportamientos impredecibles. Si quieres más de un lienzo donde dibujar, debes usar la función createGraphics() (escondido por defecto, pero puede ser mostrado), Las variables de sistema width (ancho) y height (altura) son definidas por los parámetros pasados a la función. Si createCanvas() no es usado, la ventana tendrá un tamaño por defecto de 100 x 100 pixeles. Para más maneras de posicionar el lienzo, ver la sección de posición del lienzo.",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "returns": "Objeto: lienzo generado",
+ "params": {
+ "w": "Número: ancho del lienzo",
+ "h": "Número: altura del lienzo",
+ "renderer": "Constante: P2D o WEBGL"
+ }
},
- "rotationY": {
+ "resizeCanvas": {
"description": [
- "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado."
+ "Redimensiona el linezo al ancho y la altura dados. El lienzo será borrado y la función draw() será llamada inmediatamente, permitiendo que el bosquejo se ajuste al nuevo lienzo"
],
- "returns": "el objeto p5"
+ "params": {
+ "w": "Number: width of the canvas",
+ "h": "Number: height of the canvas",
+ "noRedraw": "Boolean: (Optional) don't redraw the canvas immediately"
+ }
},
- "rotationZ": {
+ "noCanvas": {
"description": [
- "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje y. El valor está representado entre 0 y 360 grados. A diferencia de rotationX y rotationY, esta variable está solo disponible en dispositivos equipados con una brújula interna. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado."
- ],
- "returns": "el objeto p5"
+ "Remueve el lienzo por defecto para un bosquejo de p5 que no requiere un lienzo."
+ ]
},
- "pRotationX": {
+ "createGraphics": {
"description": [
- "La variable de sistema pRotationX siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-180 grados. pRotationX puede ser usado en conjunto con rotationX para determinar la dirección de rotación del dispositivo a lo largo del eje x."
+ "Crea y retorna un nuevo objeto p5.Renderer. Usa esta clase si necesitas dibujar fuera de pantalla en un buffer gráfico. Los dos parámetros definen el ancho y la altura en pixeles."
],
- "returns": "el objeto p5"
+ "returns": "buffer gráfico fuera de pantalla",
+ "params": {
+ "w": "Número: ancho del buffer gráfico fuera de pantalla",
+ "h": "Número: altura del buffer gráfico fuera de pantalla",
+ "renderer": "Constante: P2D o WEBGL, si no se define es P2D por defecto"
+ }
},
- "pRotationY": {
+ "blendMode": {
"description": [
- "La variable de sistema pRotationY siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-90 grados. pRotationY puede ser usado en conjunto con rotationY para determinar la dirección de rotación del dispositivo a lo largo del eje y."
+ "Combina los pixeles en la ventana según el modo definido. Existen distintas maneras de combinar los pixeles de la fuente (A) con los ya existentes en la pantalla mostrada (B). TODO",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "mode": "Constante: modo de combinar del lienzo"
+ }
},
- "pRotationZ": {
+ "drawingContext": {
"description": [
- "La variable de sistema pRotationZ siempre contiene la rotación del dispositivo en el eje z, en el cuadro anterior al actual. El valor está representado entre 0 y 359 grados. pRotationZ puede ser usado en conjunto con rotationZ para determinar la dirección de rotación del dispositivo a lo largo del eje z."
- ],
- "returns": "el objeto p5"
+ "The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example shown. This is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');. See this reference for the native canvas API for possible drawing functions you can call."
+ ]
},
- "setMoveThreshold": {
+ "noLoop": {
"description": [
- "La función setMoveThreshold() es usada para definir el umbral para detectar movimiento de la función deviceMoved(). El valor umbral por defecto es 0.5"
- ],
- "params": {
- "value": "Número: el valor umbral"
- },
- "returns": "el objeto p5"
+ "Detiene la ejecución continua del código de draw() de p5.js. Si se llama a la función loop(), el código dentro de draw() empieza a correr de forma continua nuevamente. Si se usa noLoop() dentro de setup(), debe ser la última línea de código dentro del bloque. Cuando se usa noLoop(), no es posible manipular o acceder a la pantalla dentro de las funciones que manejan eventos como mousePressed() o keyPressed(). En vez de eso, usa estas funciones para llamar a redraw() o loop(), que permitirán la ejecución de draw(), lo que permite el refresco correcto de la pantalla. Esto significa que cuando noLoop() ha sido ejecutado, no se sigue dibujando, y funciones como saveFrame() o loadPixels() no se pueden usar. Notar que si el bosquejo es escalado, redraw() será llamado para actualizar el bosquejo, incluso si noLoop() ha sido ejecutada. Por otro lado, el bosquejo entrará a un estado singular, hasta que loop() sea ejecutado.",
+ "",
+ "",
+ ""
+ ]
},
- "setShakeThreshold": {
+ "loop": {
"description": [
- "La función setShakeThreshold() es usada para definir el umbral para detectar agitamiento de la función deviceShaken(). El valor umbral por defecto es 30."
- ],
- "params": {
- "value": "Número: el valor umbral"
- },
- "returns": "el objeto p5"
+ "Por defecto, p5.js repite de forma continua la función draw(), ejecutado el código dentro de su bloque. Sin embargo, el bucle de dibujo puede ser detenido llamando a la función noLoop(). En ese caso, el bucle de draw() puede ser retomado con loop().",
+ "",
+ ""
+ ]
},
- "deviceMoved": {
+ "isLooping": {
"description": [
- "La función deviceMoved() es llamada cuando el dispositivo es movido en una cantidad mayor al valor umbral en el eje X, Y o Z. El valor umbral por defecto es 0.5"
- ],
- "returns": "el objeto p5"
+ "By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop() , isLooping() returns the current state for use within custom event handlers."
+ ]
},
- "deviceTurned": {
+ "push": {
"description": [
- "La función deviceTurned() es llamada cuando el dispositivo es girado en más de 90 grados de modo continuo. El eje que gatilla la función deviceTurned() es almacenado en la variable turnAxis. El método deviceTurned() puede ser restringido para gatillar en cualquier eje: X, Y o Z, comparando la variable turnAxis con X, Y o Z."
- ],
- "returns": "el objeto p5"
+ "La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().",
+ "",
+ ""
+ ]
},
- "deviceShaken": {
+ "pop": {
"description": [
- "La función deviceShaken() es llamada cuando la aceleración total de los cambios de accelerationX y accelerationY son mayores al valor umbral. El valor umbral por defecto es 30"
- ],
- "returns": "el objeto p5"
+ "La función push() graba la configuración actual de estilo de dibujo, y pop() restaura esta configuración. Notar que estas funciones siempre son usadas en conjunto. Permiten cambiar las configuraciones de estilo y transformaciones y luego volver a lo que tenías. Cuando un nuevo estado es iniciado con push(), construye encima de la información actual de estilo y transformación. Las funciones push() y pop() pueden ser embebidas para proveer más control (ver el segundo ejemplo para una demostración). push() almacena información relacionada a la configuración de estado de transformación y de estulo actual, controlada por las siguientes funciones: fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().",
+ "",
+ ""
+ ]
},
- "keyIsPressed": {
+ "redraw": {
"description": [
- "La variable boolean de sistema keyIsPressed es verdadera (true) cuando cualquier tecla es presionada y falsa (false) si no hay ninguna tecla presionada"
+ "Ejecuta una vez el código dentro de la función draw(). Esta función permite al programa actualizar la ventana mostrada solamente cuando es necesario, por ejemplo, cuando un evento registrado por mousePressed() o keyPressed() ocurre. En la estructura de un programa, solo hace sentido llamar a redraw() dentro de eventos como mousePressed(). Esto es porque redraw() no hace que draw() se ejecute de forma inmediata (solo define una indicación de que se necesita un refresco). La función redraw() no funciona de forma correcta cuando se llama dentro de la función draw(). Para habilitar y deshabilitar animaciones, usa las funcioens loop() y noLoop(). Adicionalmente, puedes definir el número de veces que se dibuja por cada llamada a este método. Para esto, añade un entero como parámetro único a la función, que señale cuántas veces se requiere dibujar.",
+ "",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "n": "Entero: redibuja n-veces. Por defecto el valor es 1"
+ }
},
- "key": {
+ "p5": {
"description": [
- "La variable de sistema key siempre contiene el valor más reciente de la tecla del teclado presionada. Para tener los mejores resultados, es mejor usarla dentro de la función keyTyped(). Para teclas sin valor ASCII, usa la variable keyCode "
+ "The p5() constructor enables you to activate \"instance mode\" instead of normal \"global mode\". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info. ",
+ "By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called \"instance mode\". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace. ",
+ "Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself. ",
+ "Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode."
],
- "returns": "el objeto p5"
+ "params": {
+ "sketch": "Object: a function containing a p5.js sketch",
+ "node": "String|Object: ID or pointer to HTML DOM node to contain sketch in"
+ }
},
- "keyCode": {
+ "applyMatrix": {
"description": [
- "La variable keyCode es usada para detectar teclas especiales, como BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. También puedes revisar las teclas especiales buscando el código keyCode de cualquier tecla en internet."
+ "Multiplica la matriz actual por la especificada según los parámetros. Esto es muy lento porque tratará de calcular el inverso de la transformada, así que evítalo cuando sea posible",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "a": "Número: números que definen la matriz 3x2 a multiplicar",
+ "b": "Número: números que definen la matriz 3x2 a multiplicar",
+ "c": "Número: números que definen la matriz 3x2 a multiplicar",
+ "d": "Número: números que definen la matriz 3x2 a multiplicar",
+ "e": "Número: números que definen la matriz 3x2 a multiplicar",
+ "f": "Número: números que definen la matriz 3x2 a multiplicar"
+ }
},
- "keyPressed": {
+ "resetMatrix": {
"description": [
- "La función keyPressed() es llamada una vez cada vez que una tecla es presionada. El código keyCode de la tecla presionada es almacenado en la variable keyCode. Para las teclas sin valor ASCII, usa la variable keyCode. Puedes comprobar si la variable keyCode es igual a BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. Para las teclas con valor ASCII que son presionadas, el valor es almacenado en la variable key. Sin embargo, no distingue entre letras mayúsculas y minúsculas. Por esta razón, es recomendable usar la función keyTyped() para leer la variable key, que sí distingue entre mayúsculas y minúsculas. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
- ],
- "returns": "el objeto p5"
+ "Reemplaza la matriz actual con la matriz identidad"
+ ]
},
- "keyReleased": {
+ "rotate": {
"description": [
- "La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ "Rota una figura según el monto especificado por el parámetro ángulo. Esta función toma en cuenta el modo de ángulo definido por angleMode(), así que los ángulos pueden ser ingresados en radianes o grados. Los objetos son siempre rotados según su posición relativa al origen y los números positivos rotan en la dirección de las manecillas del reloj. Las transformaciones se aplican a todo lo que ocurre de forma posterior y las subsecuentes llamadas a la función acumulan el efecto. Por ejemplo, llamar a la función rotate(HALF_PI) y luego rotate(HALF_PI) equivale a una llamada a rotate(PI). Todas las transformaciones son anuladas cuando la función draw() comienza nuevamente. Técnicamente, rotate() multiplica la matriz de transformación actual por una matriz de rotación. Esta función puede ser controlada además con las funciones push() y pop().",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "angle": "Ángulo: el ángulo de rotación, especificado en radianes o grados, dependiendo de angleMode()",
+ "axis": "p5.Vector|Arreglo: eje sobre el que se rota"
+ }
},
- "keyTyped": {
+ "rotateX": {
"description": [
- "la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ "Rota en torno al eje X",
+ ""
],
"params": {
- "UNKNOWN-PARAM-1": "Número: el valor umbral"
- },
- "returns": "el objeto p5"
+ "angle": "Número: ángulo en radianes"
+ }
},
- "keyIsDown": {
+ "rotateY": {
"description": [
- "La función keyIsDown() comprueba si la tecla está presionada. Puede ser usada si tienes un objeto que se mueve, y quieres que varias teclas sean capaces de afectar este comportamiento de manera simultánea, como cuando mueves una imagen de forma diagonal. Puedes ingresar cualquier número representando el código de tecla keyCode de la tecla, o usar cualquier de los nombres de la variable keyCode."
+ "Rota en torno al eje Y",
+ ""
],
"params": {
- "code": "Número: la tecla a buscar"
- },
- "returns": "el objeto p5"
+ "angle": "Número: ángulo en radianes"
+ }
},
- "mouseX": {
+ "rotateZ": {
"description": [
- "La variable de sistema mouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) del lienzo."
+ "Rota en torno al eje Z,. Sólo disponible en el modo WEBGL.",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "angle": "Número: ángulo en radianes"
+ }
},
- "mouseY": {
+ "scale": {
"description": [
- "La variable de sistema mouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) del lienzo."
+ "Aumenta o decrementa el tamaño de una figura por medio de expandir o contraer sus vértices. Los objetos siempre escalan desde su origen relativo al sistema de coordenadas. Los valores de escalamiento son porcentajes decimales. Por ejemplo, la llamada a la función scale(2.0) aumenta la dimensión de una figura en un 200%. Las transformaciones se aplican a todo lo que ocurre después y llamadas subsecuentes a la función multiplican el efecto. Por ejemplo, llamar a scale(2.0) y luego a scale(1.5) equivale a llamar a scale(3.0). Si la función scale() es llamad dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. El uso de esta función con el parámetro z está solo disponible en el modo WEBGL. Esta función puede también ser controlada con las funciones push() y pop().",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "s": "Número | p5.Vector| Arreglo: porcentaje a escalar del objeto, o porcentaje a esacalar del objeto en el eje x si se dan múltiples argumentos",
+ "y": "Número: porcentaje a escalar el objeto en el eje y",
+ "z": "Número: porcentaje a escalar el objeto en el eje z (sólo en modo WEBGL)",
+ "scales": "p5.Vector|Number[]: per-axis percents to scale the object"
+ }
},
- "pmouseX": {
+ "shearX": {
"description": [
- "La variable de sistema pmouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo."
+ "Corta la figura en torno al eje x según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearX(PI/2) y luego a shearX(PI/2) equivale a llamar a shearX(PI). Si shearX() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearX() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop().",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "angle": "Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode()"
+ }
},
- "pmouseY": {
+ "shearY": {
"description": [
- "La variable de sistema pmouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo."
+ "Corta la figura en torno al eje y según el monto especificado por el parámetro ángulo. Los ángulos deben ser especificados según el modo actual de ángulo angleMode(). Los objetos son siempre cortados según su posición relativa al origen y los números positivos cortan los objetos en la dirección de las manecillas del reloj. Las transformaciones aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a shearY(PI/2) y luego a shearY(PI/2) equivale a llamar a shearY(PI). Si shearY() es llamado dentro de draw(), la transformación es anulada cuando el bucle empieza nuevamente. Técnicamente, shearY() multiplica la matriz de transformación actual por una matriz de rotación. La función puede ser controlada con las funciones push() y pop().",
+ "",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "angle": "Número: ángulo de corte especificado en radianes o grados, dependiendo del modo de ángulo actual angleMode()"
+ }
},
- "winMouseX": {
+ "translate": {
"description": [
- "La variable de sistema winMouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) de la ventana del navegador."
+ "Especifica una cantidad a desplazar los objetos dentro de la ventana mostrada. El parámetro x especifica la traslación de izquierda a derecha, el parámetro y especifica la traslación de arriba a abajo. Las transformaciones son acumulativas y aplican a todo lo que ocurre después y llamadas posteriores a la misma función acumulan el efecto. Por ejemplo, llamar a translate(50, 0) y luego a translate(20, 0) equivale a llamar a translate(70, 0). Si translate() es llamado dentro de draw(), la transformación es anulada cada vez que el bucle empieza nuevamente. Esta función peude ser controlada con las funciones push() y pop().",
+ ""
],
- "returns": "el objeto p5"
+ "params": {
+ "x": "Número: traslación izquierda-derecha",
+ "y": "Número: traslación arriba-abajo",
+ "z": "Número: traslación adelante-atrás (solo en modo WEBGL)",
+ "vector": "p5.Vector: the vector to translate by"
+ }
},
- "winMouseY": {
+ "storeItem": {
"description": [
- "La variable de sistema winMouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) de la ventana del navegador."
+ "Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem . Sensitive data such as passwords or personal information should not be stored in local storage."
],
- "returns": "el objeto p5"
+ "params": {
+ "key": "String",
+ "value": "String|Number|Object|Boolean|p5.Color|p5.Vector"
+ }
},
- "pwinMouseX": {
+ "getItem": {
"description": [
- "La variable de sistema pwinMouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador."
+ "Returns the value of an item that was stored in local storage using storeItem()"
],
- "returns": "el objeto p5"
+ "returns": "Number|Object|String|Boolean|p5.Color|p5.Vector: Value of stored item",
+ "params": {
+ "key": "String: name that you wish to use to store in local storage"
+ }
},
- "pwinMouseY": {
+ "clearStorage": {
"description": [
- "La variable de sistema pwinMouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador."
- ],
- "returns": "el objeto p5"
+ "Clears all local storage items set with storeItem() for the current domain."
+ ]
},
- "mouseButton": {
+ "removeItem": {
"description": [
- "P5.js automáticamente rastrea si el botón del ratón está presionado y cuál botón está presionado. El valor de la variable de sistema mouseButton es o LEFT, RIGHT o CENTER dependiendo de cual fue el último botón presionado. Advertencia: diferentes navegadores pueden diferir."
+ "Removes an item that was stored with storeItem()"
],
- "returns": "el objeto p5"
+ "params": {
+ "key": "String"
+ }
},
- "mouseIsPressed": {
+ "createStringDict": {
"description": [
- "La variable boolean de sistema mouseIsPressed es verdadera (true) si el ratón está siendo presionado, y falsa (false) en caso contrario."
+ "Creates a new instance of p5.StringDict using the key-value pair or the object you provide."
],
- "returns": "el objeto p5"
+ "returns": "p5.StringDict: ",
+ "params": {
+ "key": "String",
+ "value": "String",
+ "object": "Object: object"
+ }
},
- "mouseMoved": {
+ "createNumberDict": {
"description": [
- "La función mouseMoved() es llamada cada vez que el ratón se mueve y un botón del ratón no está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ "Creates a new instance of p5.NumberDict using the key-value pair or object you provide."
],
- "returns": "el objeto p5"
+ "returns": "p5.NumberDict: ",
+ "params": {
+ "key": "Number",
+ "value": "Number",
+ "object": "Object: object"
+ }
},
- "mouseDragged": {
+ "select": {
"description": [
- "La función mouseDragged() es llamada cada vez que el ratón se mueve y un botón del ratón está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ "Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element . The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element|null: p5.Element containing node found",
+ "params": {
+ "selectors": "String: CSS selector string of element to search for",
+ "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within"
+ }
},
- "mousePressed": {
+ "selectAll": {
"description": [
- "La función mousePressed() es llamada cada vez que un botón del ratón está siendo presionado. La variable mouseButton (ver la referencia) puede ser usada para determinar cual botón está siendo presionado. Si no se define una función mousePressed(), la función touchStarted() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ "Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Element s in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element[]: Array of p5.Element s containing nodes found",
+ "params": {
+ "selectors": "String: CSS selector string of elements to search for",
+ "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within"
+ }
},
- "mouseReleased": {
+ "removeElements": {
"description": [
- "La función mouseReleased() es llamada cada vez que un botón del ratón es soltado. Si no se define una función mouseReleased(), la función touchEnded() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
- ],
- "returns": "el objeto p5"
+ "Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics . Event handlers are removed, and element is removed from the DOM."
+ ]
},
- "mouseClicked": {
+ "changed": {
"description": [
- "La función mouseClicked() es llamada cada vez que un botón del ratón es presionado y luego soltado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ "The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener."
],
- "returns": "el objeto p5"
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when the value of an element changes. if false is passed instead, the previously firing function will no longer fire."
+ }
},
- "mouseWheel": {
+ "input": {
"description": [
- "La función mouseWheel() es llamada cada vez que se detecta un evento de rueda de ratón vertical, ya sea gatillado por un ratón o por un touchpad. La propiedad event.delta retorna el monto que el ratón ha avanzado. Estos valores pueden ser positivos o negativos, dependiendo de la dirección de navegación (en OS X con natural scrolling, los signos son invertidos). Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. Debido al soporte actual del evento wheel en Safari, la función podría solo funcionar si return false es incluido cuando se usa Safari."
+ "The .input() function is called when any user input is detected with an element. The input event is often used to detect keystrokes in a input element, or changes on a slider element. This can be used to attach an element specific event listener."
],
- "returns": "el objeto p5"
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when any user input is detected within the element. if false is passed instead, the previously firing function will no longer fire."
+ }
},
- "touchX": {
+ "createDiv": {
"description": [
- "La variable de sistema touchX siempre contiene la posición horizontal de un dedo, relativo al origen (0, 0) del lienzo. Esto funciona mejor con interacciones de un dedo a la vez. Para interacciones multi-dedo, usar el arreglo touches[]"
+ "Creates a
element in the DOM with given inner HTML."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "touchY": {
+ "createP": {
"description": [
- "La variable de sistema touchY siempre contiene la posición vertical de un dedo, relativo al origen (0, 0) del lienzo. Esto funciona mejor con interacciones de un dedo a la vez. Para interacciones multi-dedo, usar el arreglo touches[]"
+ "Creates a ",
+ " element in the DOM with given inner HTML. Used for paragraph length text."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "ptouchX": {
+ "createSpan": {
"description": [
- "La variable de sistema ptouchX siempre contiene la posición horizontal de un dedo, relativo al origen (0, 0) del lienzo, en el cuadro anterior al actual. Esto funciona mejor con interacciones de un dedo a la vez. Para interacciones multi-dedo, usar el arreglo touches[]"
+ "Creates a element in the DOM with given inner HTML."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "ptouchY": {
+ "createImg": {
"description": [
- "La variable de sistema ptouchY siempre contiene la posición vertical de un dedo, relativo al origen (0, 0) del lienzo, en el cuadro anterior al actual. Esto funciona mejor con interacciones de un dedo a la vez. Para interacciones multi-dedo, usar el arreglo touches[]"
+ "Creates an element in the DOM with given src and alternate text."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "src": "String: src path or url for image",
+ "alt": "String: alternate text to be used if image does not load. You can use also an empty string (\"\") if that an image is not intended to be viewed.",
+ "crossOrigin": "String: crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string(\"\") is passed, CORS is not used",
+ "successCallback": "Function: (Optional) callback to be called once image data is loaded with the p5.Element as argument"
+ }
},
- "winTouchX": {
+ "createA": {
"description": [
- "La variable de sistema winTouchX siempre contiene la posición horizontal de un dedo, relativo al origen (0, 0) de la ventana."
+ "Creates an element in the DOM for including a hyperlink."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "href": "String: url of page to link to",
+ "html": "String: inner html of link element to display",
+ "target": "String: (Optional) target where new link should open, could be _blank, _self, _parent, _top."
+ }
},
- "winTouchY": {
+ "createSlider": {
"description": [
- "La variable de sistema winTouchY siempre contiene la posición vertical de un dedo, relativo al origen (0, 0) de la ventana."
+ "Creates a slider element in the DOM. Use .size() to set the display length of the slider."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "min": "Number: minimum value of the slider",
+ "max": "Number: maximum value of the slider",
+ "value": "Number: (Optional) default value of the slider",
+ "step": "Number: (Optional) step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)"
+ }
},
- "pwinTouchX": {
+ "createButton": {
"description": [
- "La variable de sistema pwinTouchX siempre contiene la posición horizontal de un dedo, relativo al origen (0, 0) de la ventana, en el cuadro anterior al actual."
+ "Creates a element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "label": "String: label displayed on the button",
+ "value": "String: (Optional) value of the button"
+ }
},
- "pwinTouchY": {
+ "createCheckbox": {
"description": [
- "La variable de sistema pwinTouchY siempre contiene la posición verticañ de un dedo, relativo al origen (0, 0) de la ventana, en el cuadro anterior al actual."
+ "Creates a checkbox element in the DOM. Calling .checked() on a checkbox returns if it is checked or not"
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "label": "String: (Optional) label displayed after checkbox",
+ "value": "Boolean: (Optional) value of the checkbox; checked is true, unchecked is false"
+ }
},
- "touches[]": {
+ "createSelect": {
"description": [
- "La variable de sistema touches[] contiene un arreglo de las posiciones de todos los puntos de toque actuales, relativos al origen (0, 0) del lienzo, y también identificadores para cada toque mientras se mueve. Cada elemento en el arreglo es un objeto con las propiedas x, y e identidad."
+ "Creates a dropdown menu element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box. .option(name, [value]) can be used to set options for the select after it is created. .value() will return the currently selected option. .selected() will return current dropdown element which is an instance of p5.Element .selected(value) can be used to make given option selected by default when the page first loads. .disable() marks whole of dropdown element as disabled. .disable(value) marks given option as disabled "
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: ",
+ "params": {
+ "multiple": "Boolean: (Optional) true if dropdown should support multiple selections",
+ "existing": "Object: DOM select element"
+ }
},
- "touchIsDown": {
+ "createRadio": {
"description": [
- "La variable boolean de sistema touchIsDown es verdadera (true) si en la pantalla hay un toque y falsa (false) si no."
+ "Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element . .option(value, [label]) can be used to create a new option for the element. If an option with a value already exists, it will be returned. Optionally, a label can be provided as second argument for the option. .remove(value) can be used to remove an option for the element. .value() method will return the currently selected value. .selected() method will return the currently selected input element. .selected(value) method will select the option and return it. .disable(Boolean) method will enable/disable the whole radio button element. "
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "containerElement": "Object: An container HTML Element either a div or span inside which all existing radio inputs will be considered as options.",
+ "name": "String: (Optional) A name parameter for each Input Element."
+ }
},
- "touchStarted": {
+ "createColorPicker": {
"description": [
- "La función touchStarted() es llamada una vez, cada vez que un toque nuevo es registrado. Si la función touchStarted() no ha sido definida, la función mouseIsPressed() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ "Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "value": "String|p5.Color: (Optional) default color of element"
+ }
},
- "touchMoved": {
+ "createInput": {
"description": [
- "La función touchStarted() es llamada una vez, cada vez que es registrado el movimiento de un toque. Si la función touchMoved() no ha sido definida, la función mouseDragged() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ "Creates an element in the DOM for text input. Use .size() to set the display length of the box."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "value": "String: default value of the input box",
+ "type": "String: (Optional) type of text, ie text, password etc. Defaults to text. Needs a value to be specified first."
+ }
},
- "touchEnded": {
+ "createFileInput": {
"description": [
- "La función touchEnded() es llamada una vez, cada vez que un toque finaliza. Si la función touchEnded() no ha sido definida, la función mouseReleased() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ "Creates an element in the DOM of type 'file'. This allows users to select local files for use in a sketch."
],
- "returns": "el objeto p5"
+ "returns": "p5.Element: pointer to p5.Element holding created DOM element",
+ "params": {
+ "callback": "Function: callback function for when a file is loaded",
+ "multiple": "Boolean: (Optional) optional, to allow multiple files to be selected"
+ }
},
- "createImage": {
+ "createVideo": {
"description": [
- "Crea una nueva p5.Image (el tipo de datos para almacenar imágenes). Esto provee un nuevo buffer de pixeles para jugar. Define el tamaño del buffer con los parámetros de ancho y altuar. .pixels da acceso a un arreglo conteniendo los valores de todos los pixeles en la ventana mostrada. Estos valores son números. Este arreglo es del tamaño (incluyendo un factor apropiado de pixelDensity) de la ventana mostrada x4, representando los valroes R, G, B, A en orden para cada pixel., moviendo de izquierda a derecha en cada fila, y luego bajando de columna. Ver .pixels para mayor información. Podría ser más simple usar set() y get(). Antes de acceder a los pixeles de una imagen, los datos deben ser cargados con la función loadPixels(). Después de que el arreglo de datos ha sido modificado, la función updatePixels() debe ejecutarse para actualizar los cambios."
+ "Creates an HTML5 element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image() . The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats."
],
+ "returns": "p5.MediaElement: pointer to video p5.Element ",
"params": {
- "width": "Entero: ancho en pixeles",
- "height": "Entero: altura en pixeles"
- },
- "returns": "el objeto p5"
+ "src": "String|String[]: path to a video file, or array of paths for supporting different browsers",
+ "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content"
+ }
},
- "saveCanvas": {
+ "createAudio": {
"description": [
- "Graba el lienzo actual como una imagen. En Safari, esto abrirá la imagen en la ventana y el usuario deberá proveer su propio nombre de archivo. Otros navegadores o grabarán el archivo de inmediato, o abrirán una ventana de diálogo."
+ "Creates a hidden HTML5 element in the DOM for simple audio playback. The first parameter can be either a single string path to a audio file, or an array of string paths to different formats of the same audio. This is useful for ensuring that your audio can play across different browsers, as each supports different formats. See this page for further information about supported formats ."
],
+ "returns": "p5.MediaElement: pointer to audio p5.Element ",
"params": {
- "selectedCanvas": "Canvas seleccionado: una variable representando un canvas HTML5 específico (opcional)",
- "filename": "String",
- "extension": "String: jpg o png"
- },
- "returns": "el objeto p5"
+ "src": "String|String[]: (Optional) path to an audio file, or array of paths for supporting different browsers",
+ "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content"
+ }
},
- "saveFrames": {
+ "VIDEO": {},
+ "AUDIO": {},
+ "createCapture": {
"description": [
- "Captura una secuencia de cuadros que pueden ser usados para crear una película. Acepta una función callback. Por ejemplo, puedes querer mandar los cuadros a un servidor donde pueden ser almacenados o convertidos en una película. Si no se provee una función callback, el navegador abrirá varios diálogos tratando de descargar todas las imágenes que han sido creadas. Con una función callback provista, los datos de imagen no son grabados por defecto, sino que son pasados como argumento a la función callback como un arreglo de objetos, con el tamaño del arreglo siendo igual al número total de cuadros."
+ "Creates a new HTML5 element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide() . The feed can be drawn onto the canvas using image() . The loadedmetadata property can be used to detect when the element has fully loaded (see second example). ",
+ "More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers. ",
+ "Security note : A new browser security specification requires that getUserMedia, which is behind createCapture() , only works when you're running the code locally, or on HTTPS. Learn more here and here ."
],
+ "returns": "p5.Element: capture video p5.Element ",
"params": {
- "filename": "String: ",
- "extension": "String: jpg o png",
- "duration": "Número: duración en segundos para grabar los cuadros",
- "framerate": "Número: tasa de cuadros por segundo a grabar",
- "callback": "Función: una función callback que será ejecutada para manejar los datos de imagen. Esta función deberá aceptar un arreglo como argumento. El arreglo contendrá el número especificado de cuadros como objetos. Cada objeto tiene tres propiedades: datos de imagen imageData, nombre del archivo y extensión"
- },
- "returns": "el objeto p5"
+ "type": "String|Constant|Object: type of capture, either VIDEO or AUDIO if none specified, default both, or a Constraints object",
+ "callback": "Function: (Optional) function to be called once stream has loaded"
+ }
},
- "loadImage": {
+ "createElement": {
"description": [
- "Carga una imagen desde una ruta de archivo y crea un objeto p5.Image. La imagen puede no estar inmediatamente disponible para render. Si quieres asegurarte que esté lista antes de hacer algo con ella, ubica la función loadImage() dentro de preload(). También puedes proveer una función callback para manejar la imagen cuando esté lista. La ruta a la imagen debe ser relativa al archivo HTML de tu bosquejo. Cargar desde una URL u otra ubicación remota podría estar bloqueado por las opciones de seguridad del navegador."
+ "Creates element with given tag in the DOM with given content."
],
+ "returns": "p5.Element: pointer to p5.Element holding created node",
"params": {
- "path": "String: ruta de la imagen a cargar",
- "successCallback": "Función(p5.Image): función a ser llamada una vez que la imagen sea cargada. Le será pasado el objeto p5.Image",
+ "tag": "String: tag for the new element",
+ "content": "String: (Optional) html content to be inserted into the element"
+ }
+ },
+ "deviceOrientation": {
+ "description": [
+ "La variable de sistema deviceOrientation siempre contiene la orientación del dispositivo. El valor de esta variable será o landscape (paisaje) o portrait (retrato). Si la información no está disponible, su valor será undefined."
+ ]
+ },
+ "accelerationX": {
+ "description": [
+ "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje X. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "accelerationY": {
+ "description": [
+ "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Y. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "accelerationZ": {
+ "description": [
+ "La variable de sistema accelerationX siempré contiene la aceleración del dispositivo en el eje Z. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "pAccelerationX": {
+ "description": [
+ "La variable de sistema pAccelerationX siempré contiene la aceleración del dispositivo en el eje X, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "pAccelerationY": {
+ "description": [
+ "La variable de sistema pAccelerationY siempré contiene la aceleración del dispositivo en el eje Y, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "pAccelerationZ": {
+ "description": [
+ "La variable de sistema pAccelerationZ siempré contiene la aceleración del dispositivo en el eje Z, del cuadro anterior al cuadro actual. El valor es representado en unidades de metros por segundo al cuadrado."
+ ]
+ },
+ "rotationX": {
+ "description": [
+ "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado.",
+ ""
+ ]
+ },
+ "rotationY": {
+ "description": [
+ "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje x. El valor está representado entre 0 y +/-180 grados. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado.",
+ ""
+ ]
+ },
+ "rotationZ": {
+ "description": [
+ "La variable de sistema rotationX siempre contiene la rotación del dispositivo en el eje y. El valor está representado entre 0 y 360 grados. A diferencia de rotationX y rotationY, esta variable está solo disponible en dispositivos equipados con una brújula interna. Nota: el orden en que las rotaciones son llamadas es importante, por ejemplo, si se usan juntas, deben ser llamadas en el orden Z-X-Y, en caso contrario podría haber un comportamiento errado.",
+ "",
+ ""
+ ]
+ },
+ "pRotationX": {
+ "description": [
+ "La variable de sistema pRotationX siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-180 grados. pRotationX puede ser usado en conjunto con rotationX para determinar la dirección de rotación del dispositivo a lo largo del eje x.",
+ ""
+ ]
+ },
+ "pRotationY": {
+ "description": [
+ "La variable de sistema pRotationY siempre contiene la rotación del dispositivo en el eje x, en el cuadro anterior al actual. El valor está representado entre 0 y +/-90 grados. pRotationY puede ser usado en conjunto con rotationY para determinar la dirección de rotación del dispositivo a lo largo del eje y.",
+ ""
+ ]
+ },
+ "pRotationZ": {
+ "description": [
+ "La variable de sistema pRotationZ siempre contiene la rotación del dispositivo en el eje z, en el cuadro anterior al actual. El valor está representado entre 0 y 359 grados. pRotationZ puede ser usado en conjunto con rotationZ para determinar la dirección de rotación del dispositivo a lo largo del eje z.",
+ ""
+ ]
+ },
+ "turnAxis": {
+ "description": [
+ "When a device is rotated, the axis that triggers the deviceTurned() method is stored in the turnAxis variable. The turnAxis variable is only defined within the scope of deviceTurned()."
+ ]
+ },
+ "setMoveThreshold": {
+ "description": [
+ "La función setMoveThreshold() es usada para definir el umbral para detectar movimiento de la función deviceMoved(). El valor umbral por defecto es 0.5"
+ ],
+ "params": {
+ "value": "Número: el valor umbral"
+ }
+ },
+ "setShakeThreshold": {
+ "description": [
+ "La función setShakeThreshold() es usada para definir el umbral para detectar agitamiento de la función deviceShaken(). El valor umbral por defecto es 30."
+ ],
+ "params": {
+ "value": "Número: el valor umbral"
+ }
+ },
+ "deviceMoved": {
+ "description": [
+ "La función deviceMoved() es llamada cuando el dispositivo es movido en una cantidad mayor al valor umbral en el eje X, Y o Z. El valor umbral por defecto es 0.5"
+ ]
+ },
+ "deviceTurned": {
+ "description": [
+ "La función deviceTurned() es llamada cuando el dispositivo es girado en más de 90 grados de modo continuo. El eje que gatilla la función deviceTurned() es almacenado en la variable turnAxis. El método deviceTurned() puede ser restringido para gatillar en cualquier eje: X, Y o Z, comparando la variable turnAxis con X, Y o Z.",
+ ""
+ ]
+ },
+ "deviceShaken": {
+ "description": [
+ "La función deviceShaken() es llamada cuando la aceleración total de los cambios de accelerationX y accelerationY son mayores al valor umbral. El valor umbral por defecto es 30"
+ ]
+ },
+ "keyIsPressed": {
+ "description": [
+ "La variable boolean de sistema keyIsPressed es verdadera (true) cuando cualquier tecla es presionada y falsa (false) si no hay ninguna tecla presionada"
+ ]
+ },
+ "key": {
+ "description": [
+ "La variable de sistema key siempre contiene el valor más reciente de la tecla del teclado presionada. Para tener los mejores resultados, es mejor usarla dentro de la función keyTyped(). Para teclas sin valor ASCII, usa la variable keyCode "
+ ]
+ },
+ "keyCode": {
+ "description": [
+ "La variable keyCode es usada para detectar teclas especiales, como BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. También puedes revisar las teclas especiales buscando el código keyCode de cualquier tecla en internet."
+ ]
+ },
+ "keyPressed": {
+ "description": [
+ "La función keyPressed() es llamada una vez cada vez que una tecla es presionada. El código keyCode de la tecla presionada es almacenado en la variable keyCode. Para las teclas sin valor ASCII, usa la variable keyCode. Puedes comprobar si la variable keyCode es igual a BACKSPACE, DELETE, ENTER, RETURN, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. Para las teclas con valor ASCII que son presionadas, el valor es almacenado en la variable key. Sin embargo, no distingue entre letras mayúsculas y minúsculas. Por esta razón, es recomendable usar la función keyTyped() para leer la variable key, que sí distingue entre mayúsculas y minúsculas. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.",
+ "",
+ "",
+ ""
+ ]
+ },
+ "keyReleased": {
+ "description": [
+ "La función keyReleased() es llamada una vez cada vez que una tecla es soltada. Ver key y keyCode para más información. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ ]
+ },
+ "keyTyped": {
+ "description": [
+ "la función keyTyped es llamada cava vez que una tecla es presionada, excepto cuando son presionadas la steclas de acción como Ctrl, Shift y Alt, que son ignoradas. La tecla presionada más reciente será almacenada en la variable key. Por la forma en que los sistemas operativos manejan la repetición de teclas, mantener presionada una tecla puede causar múltiples llamadas a keyTyped() (y también keyReleased()). La tasa de repetición es definida por el sistema operativo y según cómo cada computador está configurado. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por teclas. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método.",
+ ""
+ ]
+ },
+ "keyIsDown": {
+ "description": [
+ "La función keyIsDown() comprueba si la tecla está presionada. Puede ser usada si tienes un objeto que se mueve, y quieres que varias teclas sean capaces de afectar este comportamiento de manera simultánea, como cuando mueves una imagen de forma diagonal. Puedes ingresar cualquier número representando el código de tecla keyCode de la tecla, o usar cualquier de los nombres de la variable keyCode."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "code": "Número: la tecla a buscar"
+ }
+ },
+ "movedX": {
+ "description": [
+ "The variable movedX contains the horizontal movement of the mouse since the last frame"
+ ]
+ },
+ "movedY": {
+ "description": [
+ "The variable movedY contains the vertical movement of the mouse since the last frame"
+ ]
+ },
+ "mouseX": {
+ "description": [
+ "La variable de sistema mouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) del lienzo."
+ ]
+ },
+ "mouseY": {
+ "description": [
+ "La variable de sistema mouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) del lienzo."
+ ]
+ },
+ "pmouseX": {
+ "description": [
+ "La variable de sistema pmouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo."
+ ]
+ },
+ "pmouseY": {
+ "description": [
+ "La variable de sistema pmouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) del lienzo."
+ ]
+ },
+ "winMouseX": {
+ "description": [
+ "La variable de sistema winMouseX siempre contiene la posición horizontal actual del ratón, relativa al origen (0, 0) de la ventana del navegador."
+ ]
+ },
+ "winMouseY": {
+ "description": [
+ "La variable de sistema winMouseY siempre contiene la posición vertical actual del ratón, relativa al origen (0, 0) de la ventana del navegador."
+ ]
+ },
+ "pwinMouseX": {
+ "description": [
+ "La variable de sistema pwinMouseX siempre contiene la posición horizontal actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador."
+ ]
+ },
+ "pwinMouseY": {
+ "description": [
+ "La variable de sistema pwinMouseY siempre contiene la posición vertical actual del ratón, en el cuadro anterior al actual, relativa al origen (0, 0) de la ventana del navegador."
+ ]
+ },
+ "mouseButton": {
+ "description": [
+ "P5.js automáticamente rastrea si el botón del ratón está presionado y cuál botón está presionado. El valor de la variable de sistema mouseButton es o LEFT, RIGHT o CENTER dependiendo de cual fue el último botón presionado. Advertencia: diferentes navegadores pueden diferir."
+ ]
+ },
+ "mouseIsPressed": {
+ "description": [
+ "La variable boolean de sistema mouseIsPressed es verdadera (true) si el ratón está siendo presionado, y falsa (false) en caso contrario."
+ ]
+ },
+ "mouseMoved": {
+ "description": [
+ "La función mouseMoved() es llamada cada vez que el ratón se mueve y un botón del ratón no está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "mouseDragged": {
+ "description": [
+ "La función mouseDragged() es llamada cada vez que el ratón se mueve y un botón del ratón está siendo presionado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "mousePressed": {
+ "description": [
+ "La función mousePressed() es llamada cada vez que un botón del ratón está siendo presionado. La variable mouseButton (ver la referencia) puede ser usada para determinar cual botón está siendo presionado. Si no se define una función mousePressed(), la función touchStarted() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "mouseReleased": {
+ "description": [
+ "La función mouseReleased() es llamada cada vez que un botón del ratón es soltado. Si no se define una función mouseReleased(), la función touchEnded() será llamada en su reemplazo, si es que está definida. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "mouseClicked": {
+ "description": [
+ "La función mouseClicked() es llamada cada vez que un botón del ratón es presionado y luego soltado. Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "doubleClicked": {
+ "description": [
+ "The doubleClicked() function is executed every time a event listener has detected a dblclick event which is a part of the DOM L3 specification. The doubleClicked event is fired when a pointing device button (usually a mouse's primary button) is clicked twice on a single element. For more info on the dblclick event refer to mozilla's documentation here: https://developer.mozilla.org/en-US/docs/Web/Events/dblclick "
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
+ },
+ "mouseWheel": {
+ "description": [
+ "La función mouseWheel() es llamada cada vez que se detecta un evento de rueda de ratón vertical, ya sea gatillado por un ratón o por un touchpad. La propiedad event.delta retorna el monto que el ratón ha avanzado. Estos valores pueden ser positivos o negativos, dependiendo de la dirección de navegación (en OS X con natural scrolling, los signos son invertidos). Los navegadores pueden tener comportamientos por defecto asociados a distintos eventos del ratón. Para prevenir cualquier comportamiento por defecto, añade return false como última línea de este método. Debido al soporte actual del evento wheel en Safari, la función podría solo funcionar si return false es incluido cuando se usa Safari."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional WheelEvent callback argument."
+ }
+ },
+ "requestPointerLock": {
+ "description": [
+ "The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience."
+ ]
+ },
+ "exitPointerLock": {
+ "description": [
+ "The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc"
+ ]
+ },
+ "touches": {
+ "description": [
+ "The system variable touches[] contains an array of the positions of all current touch points, relative to (0, 0) of the canvas, and IDs identifying a unique touch as it moves. Each element in the array is an object with x, y, and id properties. ",
+ "The touches[] array is not supported on Safari and IE on touch-based desktops (laptops)."
+ ]
+ },
+ "touchStarted": {
+ "description": [
+ "La función touchStarted() es llamada una vez, cada vez que un toque nuevo es registrado. Si la función touchStarted() no ha sido definida, la función mouseIsPressed() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
+ },
+ "touchMoved": {
+ "description": [
+ "La función touchStarted() es llamada una vez, cada vez que es registrado el movimiento de un toque. Si la función touchMoved() no ha sido definida, la función mouseDragged() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
+ },
+ "touchEnded": {
+ "description": [
+ "La función touchEnded() es llamada una vez, cada vez que un toque finaliza. Si la función touchEnded() no ha sido definida, la función mouseReleased() será llamada en su lugar, si es que está definida. Los navegadores tienen distintos comportamientos por defecto asociados a distintos eventos gatillados por toque. Para prevenir cualquier comportamiento por defecto para este evento, añade return false al final de este método."
+ ],
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
+ },
+ "createImage": {
+ "description": [
+ "Crea una nueva p5.Image (el tipo de datos para almacenar imágenes). Esto provee un nuevo buffer de pixeles para jugar. Define el tamaño del buffer con los parámetros de ancho y altuar. .pixels da acceso a un arreglo conteniendo los valores de todos los pixeles en la ventana mostrada. Estos valores son números. Este arreglo es del tamaño (incluyendo un factor apropiado de pixelDensity) de la ventana mostrada x4, representando los valroes R, G, B, A en orden para cada pixel., moviendo de izquierda a derecha en cada fila, y luego bajando de columna. Ver .pixels para mayor información. Podría ser más simple usar set() y get(). Antes de acceder a los pixeles de una imagen, los datos deben ser cargados con la función loadPixels(). Después de que el arreglo de datos ha sido modificado, la función updatePixels() debe ejecutarse para actualizar los cambios.",
+ "",
+ ""
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "width": "Entero: ancho en pixeles",
+ "height": "Entero: altura en pixeles"
+ }
+ },
+ "saveCanvas": {
+ "description": [
+ "Graba el lienzo actual como una imagen. En Safari, esto abrirá la imagen en la ventana y el usuario deberá proveer su propio nombre de archivo. Otros navegadores o grabarán el archivo de inmediato, o abrirán una ventana de diálogo."
+ ],
+ "params": {
+ "selectedCanvas": "Canvas seleccionado: una variable representando un canvas HTML5 específico (opcional)",
+ "filename": "String",
+ "extension": "String: jpg o png"
+ }
+ },
+ "saveFrames": {
+ "description": [
+ "Captura una secuencia de cuadros que pueden ser usados para crear una película. Acepta una función callback. Por ejemplo, puedes querer mandar los cuadros a un servidor donde pueden ser almacenados o convertidos en una película. Si no se provee una función callback, el navegador abrirá varios diálogos tratando de descargar todas las imágenes que han sido creadas. Con una función callback provista, los datos de imagen no son grabados por defecto, sino que son pasados como argumento a la función callback como un arreglo de objetos, con el tamaño del arreglo siendo igual al número total de cuadros.",
+ ""
+ ],
+ "params": {
+ "filename": "String: ",
+ "extension": "String: jpg o png",
+ "duration": "Número: duración en segundos para grabar los cuadros",
+ "framerate": "Número: tasa de cuadros por segundo a grabar",
+ "callback": "Función: una función callback que será ejecutada para manejar los datos de imagen. Esta función deberá aceptar un arreglo como argumento. El arreglo contendrá el número especificado de cuadros como objetos. Cada objeto tiene tres propiedades: datos de imagen imageData, nombre del archivo y extensión"
+ }
+ },
+ "loadImage": {
+ "description": [
+ "Carga una imagen desde una ruta de archivo y crea un objeto p5.Image. La imagen puede no estar inmediatamente disponible para render. Si quieres asegurarte que esté lista antes de hacer algo con ella, ubica la función loadImage() dentro de preload(). También puedes proveer una función callback para manejar la imagen cuando esté lista. La ruta a la imagen debe ser relativa al archivo HTML de tu bosquejo. Cargar desde una URL u otra ubicación remota podría estar bloqueado por las opciones de seguridad del navegador.",
+ "",
+ "",
+ ""
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "path": "String: ruta de la imagen a cargar",
+ "successCallback": "Función(p5.Image): función a ser llamada una vez que la imagen sea cargada. Le será pasado el objeto p5.Image",
"failureCallback": "Función(evento): llamada con el evento error si es que la carga de la imagen falla."
- },
- "returns": "el objeto p5"
+ }
+ },
+ "image": {
+ "description": [
+ "Dibuja una imagen en el lienzo principal del bosquejo p5.js.",
+ "",
+ ""
+ ],
+ "params": {
+ "img": "p5.Image: la imagen a mostrar",
+ "x": "Número: la coordenada x donde se ubicará la esquina superior de la imagen",
+ "y": "Número: la coordenada y donde se ubicará la esquina superior de la imagen",
+ "width": "Número: ancho de la imagen a dibujar",
+ "height": "Número: altura de la imagen a dibujar",
+ "dx": "Número: la coordenada x en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen",
+ "dy": "Número: la coordenada y en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen",
+ "dWidth": "Número: ancho de la imagen a dibujar en el lienzo de destino",
+ "dHeight": "Número: altura de la imagen a dibujar en el lienzo de destino",
+ "sx": "Número: la coordenada x de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino",
+ "sy": "Número: la coordenada y de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino",
+ "sWidth": "Número: el ancho del subrectángulo de la imagen original a dibujar en el lienzo de destino",
+ "sHeight": "Número: la altura del subrectángulo de la imagen original a dibujar en el lienzo de destino"
+ }
+ },
+ "tint": {
+ "description": [
+ "Define el valor de relleno para mostrar imágenes. Las imágenes pueden ser teñidas en colores específicos o hacerse transparentes al incluir un valor alpha. Para aplicar transparencia a una imagen sin afectar su color, usa blanco como color de teñido y especifica un valor alpha. Por ejemplo, tint(255, 128) hará una imagen 50% transparente (asumiendo el rango alpha por defecto entre 0 y 255, el que puede ser modificado con la función colorMode()). El valor del parámetro gris debe ser menor o igual al actual valor máximo según lo especificado por colorMode(). El valor máximo por defecto es 255.",
+ "",
+ ""
+ ],
+ "params": {
+ "v1": "Número|Arreglo: valor de gris, rojo o tinte (dependiendo del modo de color actual), o un arreglo de colores",
+ "v2": "Número|Arreglo: valor de verde o saturación (dependiendo del modo de color actual)",
+ "v3": "Número|Arreglo: valor de azul o brillo (dependiendo del modo de color actual)",
+ "alpha": "Número|Arreglo: opacidad del fondo",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the tint color"
+ }
+ },
+ "noTint": {
+ "description": [
+ "Remueve el valor actual de relleno para mostrar imágenes y revierte a mostrar las imágenes con sus colores originales."
+ ]
+ },
+ "imageMode": {
+ "description": [
+ "Define el modo de imagen. Modifica la ubicación desde la que las imágenes son dibujadas, por medio de cambiar la manera en que los parámetros dados a image() son interpretados. El modo por defecto es imageMode(CORNER), que interpreta los paráemtros segundo y tercero de image() como la posición de la esquina superior izquierda de la imagen. Si se dan dos parámetros adicionales, son usados para definir el ancho y la altura la imagen. imageMode(CORNERS) interpreta los paráemtros segundo y tercero de image() como la ubicación de una esquina, y los parámetros cuarto y quinto como la ubicación de la esquina opuesta. imageMode(CENTER) interpreta los parámetros segundo y tercero de image() como el punto central de la imagen. Si dos parámetros adicionales son especificados, son usados para definir el ancho y la altura de la imagen.",
+ "",
+ ""
+ ],
+ "params": {
+ "mode": "Constante: puede ser CORNER, CORNERS, o CENTER"
+ }
+ },
+ "pixels": {
+ "description": [
+ "Uint8ClampedArray containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity ) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays will have more pixels[] (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. On a retina display, there will be 160,000. ",
+ "The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): let d = pixelDensity(); for (let i = 0; i < d; i++) { for (let j = 0; j < d; j++) { // loop over index = 4 * ((y * d + j) * width * d + (x * d + i)); pixels[index] = r; pixels[index+1] = g; pixels[index+2] = b; pixels[index+3] = a; } } ",
+ "While the above method is complex, it is flexible enough to work with any pixelDensity. Note that set() will automatically take care of setting all the appropriate values in pixels[] for a given (x, y) at any pixelDensity, but the performance may not be as fast when lots of modifications are made to the pixel 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. ",
+ "Note that this is not a standard javascript array. This means that standard javascript functions such as slice() or arrayCopy() do not work."
+ ]
+ },
+ "blend": {
+ "description": [
+ "Copia una región de pixeles de una imagen a otra, usando un modo específico de mezcla para hacer la operación. Los modos disponibles de mezcla son: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | NORMAL"
+ ],
+ "params": {
+ "srcImage": "p5.Image: imagen fuente",
+ "sx": "Entero: coordenada x de la esquina superior izquierda de la fuente",
+ "sy": "Entero: coordenada y de la esquina superior izquierda de la fuente",
+ "sw": "Entero: ancho de la imagen fuente",
+ "sh": "Entero: altura de la imagen fuente",
+ "dx": "Entero: coordenada x de la esquina superior izquierda del destino",
+ "dy": "Entero: coordenada y de la esquina superior izquierda del destino",
+ "dw": "Entero: ancho de la imagen destino",
+ "dh": "Entero: altura de la imagen destino",
+ "blendMode": "Constante: el modo de mezcla"
+ }
+ },
+ "copy": {
+ "description": [
+ "Copia una región del lienzo a otra región del lienzo desde una imagen usada como el parámetro srcImage en el lienzo. Si la fuente y el destino no son del mismo tamaño, automáticamente redimensionará los pixeles de la fuente para calzar con la región especificada como destino."
+ ],
+ "params": {
+ "srcImage": "p5.Image: imagen fuente",
+ "sx": "Entero: coordenada x de la esquina superior izquierda de la fuente",
+ "sy": "Entero: coordenada y de la esquina superior izquierda de la fuente",
+ "sw": "Entero: ancho de la imagen fuente",
+ "sh": "Entero: altura de la imagen fuente",
+ "dx": "Entero: coordenada x de la esquina superior izquierda de destino",
+ "dy": "Entero: coordenada y de la esquina superior izquierda de destino",
+ "dw": "Entero: ancho de la imagen de destino",
+ "dh": "Entero: altura de la imagen de destino"
+ }
+ },
+ "filter": {
+ "description": [
+ "Aplica un filtro al lienzo. Las opciones posibles son: THRESHOLD, que convierte la imagen a pixeles blancos y negros dependiendo de si están arriba o abajo del umbral definido por el parámetro. El parámetro debe estar entre 0.0 (negro) y 1.0 (blanco). Si no se especifica ningún valor, el valor por defecto es 0.5. GRAY, convierte cualquier color en la imagen a un equivalente en la escala de grises, no tiene parámetros. OPAQUE, hace que el canal alpha sea totalmente opaco, no tiene parámetros. INVERT, hace que cada pixel tenga su valor inverso, no tiene parámetros. POSTERIZE, limita cada canal de la imagen a un número de colores especificado como parámetro. El parámetro puede definir entre 2 y 255 valores, pero los resultados más notorios se dan con valores bajos. BLUR, hace que la imagen sea borrosa con un proceso Gaussiano, siendo el parámetro el nivel de cuán borroso es el resultado, si no se usa ningún parámetro, el parámetro por defecto es 1, a mayores valores es más borroso el resultado. ERODE, reduce las áreas claras, no tiene parámetros. DILATE, aumenta las áreas claras, no tiene parámetros.",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "filterType": "Constante: ",
+ "filterParam": "Número: un parámetro opcional único a cada filtro, ver más arriba"
+ }
+ },
+ "get": {
+ "description": [
+ "Retorna un arreglo de valores RGBA por cada pixel o toma una sección de una imagen. Si no especifican parámetros, se retorna la imagen entera. Usa los parámetros x e y para obtener el valor de un pixel. Toma una sección de la ventana mostrada si especificas los parámetros adicionales w y h. Cuando se obtiene una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el actual mode imagen definido por imageMode(). Si el pixel solicitado está fuera de la imagen, se retorna el valor [0, 0, 0, 255]. Para obtener los números escalados según los rangoes de color actuales y tomar en cuenta el modo de color según colorMode(), usa getColor() en vez de get(). Tomar el valor de un pixel con get(x, y) es fácil, pero no tan rápido como tomar los datos directamente desde pixels[]. La instrucción equivalente a get(x, y) usando pixels[] con densidad de pixeles d es var off = (y width + x) d * 4; [pixels[off], pixels[off+1], pixels[off+2], pixels[off+3]]. Ver la referencia de pixels[] para mayor información.",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "returns": "Arreglo|p5.Image: valores de pixel en la posición (x, y) en formato arreglo RGBAs o p5.Image",
+ "params": {
+ "x": "Número: coordenada x del pixel",
+ "y": "Número: coordenada y del pixel",
+ "w": "Número: ancho",
+ "h": "Número: altura"
+ }
+ },
+ "loadPixels": {
+ "description": [
+ "Carga los datos de los pixeles en pantalla al arreglo pixels[]. Esta función siempre debe ser llamada antes de leer o escribir en el arreglo pixels[]"
+ ]
+ },
+ "set": {
+ "description": [
+ "Cambia el color de cualquier pixel, o pone una imagen directamente en la ventana. Los parámetros x e y especifican el pixel a cambiar y c especifica el valor del color. Puede ser un objeto p5.Color o un arreglo de pixeles RGBA. También puede ser un valor único en escala de grises. Cuando se define una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el modo actual de imagen según imageMode(). Después de usar set(), debes llamar a updatePixels()' para que tus cambios aparezcan. Esta función debería ser llamada una vez que todos los pixeles han sido definidos. Definir el color de un solo pixel con set(x, y) es fácil, pero es tan rápido como poner los datos directamente en el arreglo pixels[]. Definir los valores de pixels[] directamente puede ser complicado cuando se trabaja con un monitor retina, pero tendrá un mejor desempeño cuando muchos pixeles necesiten ser definidos directamente en cada iteración. Ver la referencia de pixels[] para mayor información.",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "Número: coordenada x del pixel",
+ "y": "Número: coordenada y del pixel",
+ "c": "Número|Arreglo|Objeto: inserta un valor en escala de grises | un arreglo de pixeles | un objeto p5.Color | un objeto p5.Image a copiar"
+ }
+ },
+ "updatePixels": {
+ "description": [
+ "Actualiza la ventana mostrada con los datos del arreglo pixels[]. Se usa en conjunto con loadPixels(). Si solo estás leyendo pixeles desde el arreglo, no hay necesidad de llamar a updatePixels() - actualizar es solo necesario para aplicar cambios. updatePixels() debe ser llamada cada vez que el arreglo de pixeles es manipulado o si se llama a la función set()."
+ ],
+ "params": {
+ "x": "Número: coordenada x de la esquina superior izquierda de la región a actualizar",
+ "y": "Número: coordenada y de la esquina superior izquierda de la región a actualizar",
+ "w": "Número: ancho de la región a actualizar",
+ "h": "Número: altura de la región a actualizar"
+ }
+ },
+ "loadJSON": {
+ "description": [
+ "Carga un archivo JSON desde un archivo o una URL, y retorna un objeto o un arreglo. Este método es asíncrono, lo que significa que puede que no termine antes que se ejecute la siguiente línea en tu bosquejo.",
+ "",
+ ""
+ ],
+ "returns": "Objeto|Arreglo: datos JSON",
+ "params": {
+ "path": "String: nombre de archivo o URL a cargar",
+ "jsonpOptions": "Object: (Optional) options object for jsonp related settings",
+ "datatype": "Función: función a ser ejecutada después de que loadJSON() finalice, los datos son pasados como primer argumento",
+ "callback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento",
+ "errorCallback": "String: json o jsonp"
+ }
+ },
+ "loadStrings": {
+ "description": [
+ "Lee los contenidos de un archivo y crea un arreglo de Strings de sus líneas individuales. Si el nombre del archivo es usado como parámetro, como en el ejemplo anterior, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (empieza con / en Unix y Linux, o una letra representando el disco en Windows), o el parámetro de nombre de archivo puede ser una URL donde esté el archivo dentro de una red. Este método es asíncrono, lo que significa que puede ser que su ejecución no termine antes de que se ejecute la siguiente línea del bosquejo.",
+ "",
+ "",
+ ""
+ ],
+ "returns": "Arreglo: un arreglo de Strings",
+ "params": {
+ "filename": "String: nombre de archivo o URL a cargar",
+ "callback": "Función: función a ser ejecutada después de que loadStrings() finalice, el arreglo es pasado como primer argumento",
+ "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
+ }
+ },
+ "loadTable": {
+ "description": [
+ "Lee los contenidos de un archivo o URL y crea un objeto p5.Table con sus valores. Si un archivo es especificado, debe ser ubicado en el directorio data del bosquejo. El parámetro de nombre de archivo puede también ser una URL de un archivo en línea. Por defecto, se asume que el archivo está separado por comas (formato CSV), La tabla sólo busca una fila de encabezado si es que se incluye la opción header. Las opciones posibles incluyen: csv: se procesan los datos como valores separados por comas, tsv: se procesan los datos como separados por tabulación, header: la tabla tiene una fila de encabezados (títulos). Si se incluyenn múltiples opciones, se deben ingresar como parámetros separados por comas. Todos los archivos son cargados y grabados usando codificación UTF-8. Este método es asíncrono, lo que significa que su ejecución puede no haber terminado antes de que se ejecute la siguiente línea del bosquejo. Si se llama a loadTable() dentro de preload() se garantiza que se complete la operación antes de que setup() y draw() sean llamadas. Fuera de preload(), puedes suplir una función callback para manejar el objeto.",
+ "",
+ ""
+ ],
+ "returns": "Objeto Table conteniendo los datos",
+ "params": {
+ "filename": "String: nombre de archivo o URL a cargar",
+ "extension": "String: (Optional) parse the table by comma-separated values \"csv\", semicolon-separated values \"ssv\", or tab-separated values \"tsv\"",
+ "header": "String: (Optional) \"header\" to indicate table has header row",
+ "callback": "String|Strings: header, csv, tsv",
+ "errorCallback": "Función: función a ser ejecutada después de que loadTable() finalice, el arreglo es pasado como primer argumento. Si es exitosa, el objeto Table es pasado como primer argumento, en caso contrario se pasa el valor boolean false."
+ }
+ },
+ "loadXML": {
+ "description": [
+ "Lee los contenidos de un archivo y crea un objeto XML con sus valores. Si el nombre del archivo es usado como parámetro, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (que empieza con / en Unix y Linux, o con una letra que simbolice el disco duro en Windows). También se puede usar como parámetro de nombre de archivo una URL para un archivo en una red. Este método es asíncrono, lo que significa que su ejecución puede no estar completa antes de que se ejecute la siguiente línea de código en el bosquejo. Llamar a loadXML() dentro de preload() garantiza que la operación se complete antes de que setup() y draw() sean llamados. Fuera de preload(), puedes suplir una función callBack para manejar el objeto.",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "returns": "objeto XML que contiene los datos",
+ "params": {
+ "filename": "String: nombre de archivo o URL a cargar",
+ "callback": "Función: función a ser ejecutada después de que loadXML() finalice, el objeto XML es pasado como primer argumento",
+ "errorCallback": "Función: la función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
+ }
+ },
+ "loadBytes": {
+ "description": [
+ "This method is suitable for fetching files up to size of 64MB."
+ ],
+ "returns": "Object: an object whose 'bytes' property will be the loaded buffer",
+ "params": {
+ "file": "String: name of the file or URL to load",
+ "callback": "Function: (Optional) function to be executed after loadBytes() completes",
+ "errorCallback": "Function: (Optional) function to be executed if there is an error"
+ }
+ },
+ "httpGet": {
+ "description": [
+ "Método para ejecutar una solicitud HTTP GET. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "path": "String: nombre del archivo o URL a cargar",
+ "datatype": "Objeto: parámetro de datos pasados con la solicitud enviada",
+ "data": "String: json, jsonp, xml o text",
+ "callback": "Función: función a ser ejecutada después de que httpGet() finalice, los datos son pasados como primer argumento",
+ "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
+ }
+ },
+ "httpPost": {
+ "description": [
+ "Método para ejecutar una solicitud HTTP POST. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "path": "String: nombre del archivo o URL a cargar",
+ "datatype": "Objeto: parámetro de datos pasados con la solicitud enviada",
+ "data": "String: json, jsonp, xml o text",
+ "callback": "Función: función a ser ejecutada después de que httpPost() finalice, los datos son pasados como primer argumento",
+ "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
+ }
+ },
+ "httpDo": {
+ "description": [
+ "Método para ejecutar una solicitud HTTP. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto. También puedes pasar un objeto especificando todos los parámetros de la solicitud siguiendo los ejemplos dentro de las llamadas de reqwest()"
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "path": "String: nombre del archivo o URL a cargar",
+ "method": "Objeto: parámetro de datos pasados con la solicitud enviada",
+ "datatype": "String: json, jsonp, xml o text",
+ "data": "Función: función a ser ejecutada después de que httpDo() finalice, los datos son pasados como primer argumento",
+ "callback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento",
+ "errorCallback": "Function: (Optional) function to be executed if there is an error, response is passed in as first argument",
+ "options": "Object: Request object options as documented in the \"fetch\" API reference "
+ }
+ },
+ "createWriter": {
+ "returns": "p5.PrintWriter: ",
+ "params": {
+ "name": "String: name of the file to be created",
+ "extension": "String (Optional)"
+ }
+ },
+ "save": {
+ "description": [
+ "Graba una imagen, text, json, csv, wav o html. Hace que la descarga ocurra en el computador cliente. Notar que no es recomendado llamar a save() dentro de draw() si está en bucle, porque la función save() abrirá una ventana de diálogo en cada cuadro. El comportamiento por defecto es grabar el lienzo como una imagen. Puedes opcionalmente especificar un nombre de archivo. Por ejemplo: TODO. Alternativamente, el primer parámetro puede ser un puntero a un lienzo p5.Element, un arreglo de Strings, un arreglo de JSON, un objeto JSON, un p5.Table, un p5.Image, o un p5.SoundFile (requiere p5.sound). El segundo parámetro es el nombre del archivo (incluyendo la extensión). El tercer parámetro es para opciones específicas a este tipo de objeto. Este método grabará un archivo que se austa a los parámetros dados. Por ejemplo: TODO. "
+ ],
+ "params": {
+ "objectOrFilename": "Objeto|String: si se provee un nombre de archivo, se grabará el lienzo como una imagen con la extensión png o jpg, dependiendo del nombre del archivo. Si se provee un objeto, se grabará dependiendo del objeto y el nombre del archivo (ver los ejemplos anteriores)",
+ "filename": "String: Si se provee un objeto como el primer parámetro, entonces el segundo parámetro indica el nombre del archivo, y debe incluir la extensión apropiada (ver los ejemplos anteriores).",
+ "options": "Boolean|String: opciones adicionales depndiendo del tipo de archivo. Por ejemplo, cuando se graba un archivo JSON, true indica que la salida será optimizada según el tamaño del archivo, en vez de por legibilidad."
+ }
+ },
+ "saveJSON": {
+ "description": [
+ "Escribe los contenidos de un arreglo o un objeto JSON a un archivo .json. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ ],
+ "params": {
+ "json": "Arreglo|Objeto:",
+ "filename": "String",
+ "optimize": "Boolean: si es verdadero (true), remueve los saltos de línea del archivo de salida para optimizar el tamaño del archivo, en desmedro de la legibilidad."
+ }
+ },
+ "saveStrings": {
+ "description": [
+ "Escribe un arreglo de Strings a un archivo de texto, una línea por String. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ ],
+ "params": {
+ "list": "Arreglo: arreglo de Strings a ser escrito",
+ "filename": "String: nombre del archivo de salida",
+ "extension": "String: (Optional) the filename's extension",
+ "isCRLF": "Boolean: (Optional) if true, change line-break to CRLF"
+ }
+ },
+ "saveTable": {
+ "description": [
+ "Escribe los contenidos de un objeto Table a un archivo. Por defecto es un archivo de texto con valores separados por coma (csv), pero también puede usar separación por tabulación (tsv), o generar una tabla HTML (html). El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ ],
+ "params": {
+ "Table": "p5.Table: the Table object to save to a file",
+ "filename": "String: el nombre del archivo en el que Table será grabado",
+ "options": "String: puede ser tsv, csv o html."
+ }
+ },
+ "abs": {
+ "description": [
+ "Calcula el valor absoluto (magnitud) de un número. Usa Math.abs(). El valor absoluto de un número es siempre positivo."
+ ],
+ "returns": "Número: valor absoluto del número dado",
+ "params": {
+ "n": "Número: número a computar"
+ }
+ },
+ "ceil": {
+ "description": [
+ "Calcula el entero más cercano que es mayor o igual que el valor del parámetro. Usa Math.ceil(). Por ejemplo, ceil(9.03) retorna el valor 10."
+ ],
+ "returns": "Número: número redondeado hacia arriba",
+ "params": {
+ "n": "Número: número a redondear"
+ }
+ },
+ "constrain": {
+ "description": [
+ "Restringe un valor a estar entre un valor mínimo y uno máximo."
+ ],
+ "returns": "Número: número restringido",
+ "params": {
+ "n": "Número: número a restringir",
+ "low": "Número: límite mínimo",
+ "high": "Número: límite máximo"
+ }
+ },
+ "dist": {
+ "description": [
+ "Calcula la distancia entre dos puntos"
+ ],
+ "returns": "Número: distancia entre los dos puntos",
+ "params": {
+ "x1": "Número: la coordenada x del primer punto",
+ "y1": "Número: la coordenada y del primer punto",
+ "x2": "Número: la coordenada x del segundo punto",
+ "y2": "Número: la coordenada y del segundo punto",
+ "z1": "Número: la coordenada z del primer punto",
+ "z2": "Número: la coordenada z del segundo punto"
+ }
+ },
+ "exp": {
+ "description": [
+ "Retorna el número de Euler (2.71828...) elevado al parámetro n. Usa Math.exp()."
+ ],
+ "returns": "e^n",
+ "params": {
+ "n": "Número: exponente a elevar"
+ }
+ },
+ "floor": {
+ "description": [
+ "Calcula el valor entero más cercano que es menor o igual al parámetro. Usa Math.floor()."
+ ],
+ "returns": "Número: número redondeado hacia abajo",
+ "params": {
+ "n": "Número: número a ser redondeado hacia abajo"
+ }
+ },
+ "lerp": {
+ "description": [
+ "Calcula un número entre dos números a un incremento específico. El parámetro amt es la cantidad a interpolar entre los dos valores donde 0.0 es igual al primer punto, 0.1 está muy cerca del primer punto, 0.5 está a medio camino entre ambos números, etc. La función lerp es conveniente para crear movimiento a lo largo de un camino recto y para dibujar líneas punteadas."
+ ],
+ "returns": "Número: valor interpolado",
+ "params": {
+ "start": "Número: primer valor",
+ "stop": "Número: segundo valor",
+ "amt": "Número: número entre 0.0 y 1.0"
+ }
+ },
+ "log": {
+ "description": [
+ "Calcula el logaritmo natural (logaritmo con base e) de un número. Esta función espera que el parámetro n sea de un valor más grande que 0.0. Usa Math.log()."
+ ],
+ "returns": "Número: logaritmo naturla de n",
+ "params": {
+ "n": "Number: number greater than 0"
+ }
+ },
+ "mag": {
+ "description": [
+ "Calcula la magnitud (o tamaño) de un vector. Un vector es una dirección en el espacio comúnmente usada en gráfica computacional y álgebra lineal. Como no tiene posición de inicio, la magnitud del vector puede ser pensada como la distancia entre la coordenada 0,0 a su valor x,y. Por lo tanto, mag() es un atajo a escribir dist(0, 0, x, y)."
+ ],
+ "returns": "Número: magnitud del vector entre (0, 0) y (a, b)",
+ "params": {
+ "a": "Número: primer valor",
+ "b": "Número: segundo valor"
+ }
+ },
+ "map": {
+ "description": [
+ "Escala un nombre de un rango a otro rango. En el primer ejemplo anterior, el número 25 es convertido de un valor en el rango entre 0 y 100 a un valor cuyo rango está entre el borde izquierdo de la ventana (0) y el borde derecho (ancho).",
+ ""
+ ],
+ "returns": "Número: número escalado",
+ "params": {
+ "value": "Número: el valor a ser convertido",
+ "start1": "Número: límite inferior del rango actual",
+ "stop1": "Número: límite superior del rango actual",
+ "start2": "Número: límite inferior del rango deseado",
+ "stop2": "Número: límite superior del rango deseado",
+ "withinBounds": "Boolean: (Optional) constrain the value to the newly mapped range"
+ }
+ },
+ "max": {
+ "description": [
+ "Determina el valor más grande en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo."
+ ],
+ "returns": "Número: número máximo",
+ "params": {
+ "n0": "Number: Number to compare",
+ "n1": "Number: Number to compare",
+ "nums": "Número|Arreglo: números a comparar"
+ }
+ },
+ "min": {
+ "description": [
+ "Determina el valor más pequeño en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo."
+ ],
+ "returns": "Número: número mínimo",
+ "params": {
+ "n0": "Number: Number to compare",
+ "n1": "Number: Number to compare",
+ "nums": "Número|Arreglo: números a comparar"
+ }
+ },
+ "norm": {
+ "description": [
+ "Normaliza un número de un rango a otro rango entre 0 y 1. Es idéntico a map(value, low, high, 0, 1). Los números fuera del rango no son saturados a 0 o 1, porque los números fuera de rango son muchas veces intencionales y útiles (ver el segundo ejemplo más arriba)"
+ ],
+ "returns": "Número: número normalizado",
+ "params": {
+ "value": "Número: valor entrante a ser normalizado",
+ "start": "Número: límite inferior del rango actual",
+ "stop": "Número: límite superior del rango actual"
+ }
+ },
+ "pow": {
+ "description": [
+ "Facilita las expresiones exponenciales. La función pow() es una manera eficiente de multiplicar números po sí mismos (o sus recíprocos) en grandes cantidades. Por ejemplo, pow(3, 5) es equivalente a la expresión 3*3*3*3*3 y pow (3, -5) es equivalente a 1/3*3*3*3*3. Usa Math.pow()."
+ ],
+ "returns": "n^e",
+ "params": {
+ "n": "Número: base de la expresión exponencial",
+ "e": "Número: potencia a la que se eleva la base"
+ }
+ },
+ "round": {
+ "description": [
+ "Calcula el entero más cercano al parámetro n. Por ejemplo, round(133.8) retorna el valor 134. Usa la función Math.round()."
+ ],
+ "returns": "Número: número redondeado",
+ "params": {
+ "n": "Número: número a redondear",
+ "decimals": "Number: (Optional) number of decimal places to round to, default is 0"
+ }
+ },
+ "sq": {
+ "description": [
+ "Eleva al cuadrado un número (lo multiplica por sí mismo), El resultado es siempre un número positivo, porque multiplicar dos números negativos siempre resulta en un número positivo."
+ ],
+ "returns": "Número: número elevado al cuadrado",
+ "params": {
+ "n": "Número: número a elevar al cuadrado"
+ }
+ },
+ "sqrt": {
+ "description": [
+ "Calcula la raíz cuadrada de un número. La raíz cuadrada de un número es siempre positiva, aunque puede haber una raíz cuadrada válida que sea negativa. La raíz cuadrada s de un número a es tal que s*s = a. Es lo opuesto a elevar al cuadrado. Usa Math.sqrt()."
+ ],
+ "returns": "Número: raíz cuadrada del número",
+ "params": {
+ "n": "Número: número no negativo al que se le calcula la raíz cuadrada"
+ }
+ },
+ "fract": {
+ "description": [
+ "Calculates the fractional part of a number."
+ ],
+ "returns": "Number: fractional part of x, i.e, {x}",
+ "params": {
+ "num": "Number: Number whose fractional part needs to be found out"
+ }
+ },
+ "createVector": {
+ "description": [
+ "Crea un nuevo objeto p5.Vector (el tipo de datos para almacenar vectores). Esto provee un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "x": "Número: componente x del vector",
+ "y": "Número: componente y del vector",
+ "z": "Número: componente z del vector"
+ }
+ },
+ "noise": {
+ "description": [
+ "Retorna el valor del ruido Perlin en las coordenadas específicas. El ruido Perlin es un generador de secuencias aleatorias produciendo una sucesión de números más naturalmente ordenada y armónica, en comparación con la función estándar random(). Fue inventada por Ken Perlin en los 1980s y ha sido usada desde entonces en aplicaciones gráficas para producir texturas procedurales, movimiento natural, figuras, terrenos, etc. La principal diferencia con la función random() es definida en una espacio infinito n-dimensional donde cada par de coordenadas corresponde a un valor fijo semi-aleatorio (fijado solo durante el tiempo de vida del programa; ver la función noiseSeed()). p5.js puede calcular ruido 1D, 2D y 3D, dependiendo del número de coordenadas dado. El valor resultante siempre estará entre 0.0 y 1.0. El valor de ruido puede ser animado moviéndose a través del espacio del ruido como fue demostrado en el ejemplo superior. Las dimensiones segunda y tercera también pueden ser interpretadas como tiempo. El ruido está estructurado de forma similar a una señal de audio, con respecto al uso de la función de las frecuencias. De forma similar al conecpto de armónicas en física, el ruido Perlin es calculado a lo largo de varias octavas que se han sumado para dar forma al resultado final. Otra manera de ajustar el caracter de la secuencia resultante es la escala de las coordenadas de entrada. Como la función trabaja en un espacio infinito, el valor de las coordenadas no importa como tal, solo la distancia entre las coordenadas sucesivas importa (por ejemplo: cuando se usa noise() dentro de un bucle). Como regla general, a menor la diferencia entre coordenadas, más suave es el ruido resultante. Pasos entre 0.005 y 0.03 funcionan mejor para la mayor parte de las aplicaciones, pero esto diferirá dependiendo del uso."
+ ],
+ "returns": "valor de ruido Perlin (entre 0 y 1) en las coordenadas especificadas",
+ "params": {
+ "x": "Número: coordenada x en el espacio del ruido",
+ "y": "Número: coordenada y en el espacio del ruido",
+ "z": "Número: coordenada z en el espacio del ruido"
+ }
+ },
+ "noiseDetail": {
+ "description": [
+ "Ajusta el caracter y nivel de detalle producido por la función de ruido Perlin. Similar al concepto de armónicas en física, el ruido es calculado a lo largo de varias octavas. Las octavas más graves contribuyen de forma más significativa a la señal de salida y como define la intensidad general del ruido, mientras que las octavas más altas crean detalles más finos en la secuencia de ruido. Por defecto, el ruido es calculado a lo largo de 4 octavas, con cada octava contribuyendo exactamente la mitad que su predecesora, partiendo con una intensidad de 50% para la primera octava. Este tamaño de caída puede ser cambiado al añadir un parámetro adicional a la función. Por ejemplo, un factor de caída de 75% significa que cada octava tendrá un 75% de impacto (25% menos) que la octava anterior. Cualquier valor entre 0.0 y 1.0 es válido, sin embargo nota que valores superiores a 0.5 pueden resultar en que noise() retorne valores mayores a 1.0. Al cambiar estos parámetros, la señal creada por noise() puede ser adaptada para calzar con necesidades y características específicas."
+ ],
+ "params": {
+ "lod": "Número: número de octavas a ser usadas por el ruido",
+ "falloff": "Número: factor de caída para cada octava"
+ }
+ },
+ "noiseSeed": {
+ "description": [
+ "Define el valor semilla para la función noise(). Por defecto, noise() produce diferentes resultados cada vez que el programa es ejecutado. Defines el parámetro value a una constante para que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado"
+ ],
+ "params": {
+ "seed": "Número: el valor semilla"
+ }
+ },
+ "randomSeed": {
+ "description": [
+ "Define la semilla para la función random(). Por defecto, la función random() produce diferentes resultados cada vez que el programa es ejecutado. Definir el parámetro semilla como una constante hace que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado.",
+ ""
+ ],
+ "params": {
+ "seed": "Número: el valor semilla"
+ }
+ },
+ "random": {
+ "description": [
+ "Retorna un número aleaotorio de tipo float (punto flotante). Acepta 0, 1 o 2 argumentos. Si no se le da un argumento, retorna un número aleatorio entre 0 y 1 (sin incluir 1). Si se da un argumento y es un número, retorna un número aleatorio entre 0 y hasta (pero sin incluir) el parámetro. Si se da un argumento y es un arreglo, retorna una elemento al azar del arreglo. Si se dan dos argumentos, retorna un número aleatorio entre el primer argumento y hasta (pero sin incluir) el segundo argumento.",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "returns": "Número: el número aleatorio o un elemento aleatorio de un conjunto de opciones",
+ "params": {
+ "min": "Número: el límite inferior (inclusivo)",
+ "max": "Número: el límite superio (exclusivo)",
+ "choices": "Arreglo: el arreglo del cual se elige"
+ }
+ },
+ "randomGaussian": {
+ "description": [
+ "Retorna un número aleatorio ajjustado a una distribución Gaussiana o normal. No existe teóricamente un valor mínimo o máximo que la función randomGaussian() pueda retornar. En vez de eso, existe solo una muy baja probabilidad de retornar valores lejos de la media, y una alta probabilidad de retornar números cercanos a la media. Acepta 0, 1 o 2 argumentos. Si no tiene argumentos, retorna una media de 0 y una desviación estándar de 1. Si tiene un argumento, el argumento es la media (y la desviación estándar es 1). Si tiene dos argumentos, el primero es la media y el segundo es la desviación estándar."
+ ],
+ "returns": "el número aleatorio",
+ "params": {
+ "mean": "Número: la media",
+ "sd": "Número: la desviación estándar"
+ }
+ },
+ "acos": {
+ "description": [
+ "El inverso de la función cos(), retorna el arcocoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre 0 y PI (3.1415927)."
+ ],
+ "returns": "Número: el arcocoseno del valor",
+ "params": {
+ "value": "Número: el valor al que se aplica arcocoseno"
+ }
+ },
+ "asin": {
+ "description": [
+ "El inverso de la función sin(), retorna el arcoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre -PI/2 y PI/2 ."
+ ],
+ "returns": "Número: el arcoseno del valor",
+ "params": {
+ "value": "Número: el valor al que se aplica arcoseno"
+ }
+ },
+ "atan": {
+ "description": [
+ "El inverso de la función tan(), retorna el arcotangente de un valor. Esta función espera valores entre -Infinito e Infinito (exclusivo) y los valores retornados están en el rango entre -PI/2 y PI/2 ."
+ ],
+ "returns": "Número: el arcotangente del valor",
+ "params": {
+ "value": "Número: el valor al que se aplica arcotangente"
+ }
+ },
+ "atan2": {
+ "description": [
+ "Calcula el ángulo (en radianes) desde un punto específico al origen, medido desde el eje x positivo. Los valores retornados son de tipo float entre -PI/2 y PI/2. La función atan2() es más frecuentemente usada para orientar figuras figuras geométricas según la posición del cursor. Nota: la coordenada y del punto es el primer parámetro, y la coordenada x es el segundo parámetro, debido a la estructura para calcular la tangente.",
+ ""
+ ],
+ "returns": "Número: el arcotangente del punto dado",
+ "params": {
+ "y": "Número: coordenada y del punto",
+ "x": "Número: coordenada x del punto"
+ }
+ },
+ "cos": {
+ "description": [
+ "calcula el coseno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ ],
+ "returns": "Número: el coseno del ángulo",
+ "params": {
+ "angle": "Número: el ángulo"
+ }
+ },
+ "sin": {
+ "description": [
+ "calcula el seno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ ],
+ "returns": "Número: el seno del ángulo",
+ "params": {
+ "angle": "Número: el ángulo"
+ }
+ },
+ "tan": {
+ "description": [
+ "calcula la tangente de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ ],
+ "returns": "Número: la tangente del ángulo",
+ "params": {
+ "angle": "Número: el ángulo"
+ }
+ },
+ "degrees": {
+ "description": [
+ "Convierte una medida en radianes a su correspondiente valor en grados. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes."
+ ],
+ "returns": "el ángulo convertido",
+ "params": {
+ "radians": "Número: valor en radianes a ser convertido a grados."
+ }
+ },
+ "radians": {
+ "description": [
+ "Convierte una medida en grados a su correspondiente valor en radianes. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes."
+ ],
+ "returns": "el ángulo convertido",
+ "params": {
+ "degrees": "Número: valor en grados a ser convertido a radianes."
+ }
+ },
+ "angleMode": {
+ "description": [
+ "Define el modo actual de p5 para interpretar ángulos. El modo por defecto es en RADIANS (radianes)."
+ ],
+ "params": {
+ "mode": "CONSTANTE: puede ser RADIANS (radianes) o DEGREES (grados)"
+ }
+ },
+ "textAlign": {
+ "description": [
+ "Define el alineamiento actual para dibujar texto. Acepta dos argumentos: horizAlign(LEFT, CENTER o RIGHT) y vertAlign(TOP, BOTTOM, CENTER, o BASELINE). El parámetro horizAlign se refiere al valor x de la función text(), mientras que vel parámetro vertAlign al valor y. Así que si escribes textAlign(LEFT), estás alineando el borde izquierdo de tu texto al valor x dado en la función text(). Si escribes textAlign(RIGHT, TOP), estás alineando el borde derecho de tu texto con el valor x y el borde superior con el valor y del texto.",
+ "",
+ ""
+ ],
+ "params": {
+ "horizAlign": "Constante: alineamiento horizontal, puede ser LEFT, CENTER o RIGHT",
+ "vertAlign": "Constante: alineamiento vertical, puede ser TOP, BOTTOM, CENTER o BASELINE"
+ }
+ },
+ "textLeading": {
+ "description": [
+ "Define o retorna el espaciado, en pixeles, entre líneas de texto. Esta configuración será usada en todas las llamadas posteriores a la función text()."
+ ],
+ "params": {
+ "leading": "Número: el tamaño en pixeles de espaciamiento entre líneas"
+ }
+ },
+ "textSize": {
+ "description": [
+ "Define o retorna el tamaño actual de la tipografía. Este tamaño será usado en todas las llamadas posteriores a la función text(). El tamaño de la tipografía es medido en pixeles."
+ ],
+ "params": {
+ "theSize": "Número: el tamaño en pixeles de las letras en pixeles"
+ }
+ },
+ "textStyle": {
+ "description": [
+ "Define o retorna el estilo actual de la tipografía. Puede ser NORMAL (normal), ITALIC (cursivo) o BOLD (destacado). Notar que puede ser anulado por estilo CSS. Para tipografías que no sean de sistema (opentype, truetype, etc.), usa loadFont()."
+ ],
+ "params": {
+ "theStyle": "Número|Constante: estilo del texto, puede ser NORMAL, ITALIC o BOLD"
+ }
+ },
+ "textWidth": {
+ "description": [
+ "Calcula y retorna el ancho de cualquier caracter o string."
+ ],
+ "returns": "Número",
+ "params": {
+ "theText": "String: el String de caracteres a medir"
+ }
+ },
+ "textAscent": {
+ "description": [
+ "Returns the ascent of the current font at its current size. The ascent represents the distance, in pixels, of the tallest character above the baseline."
+ ],
+ "returns": "Number: "
+ },
+ "textDescent": {
+ "description": [
+ "Returns the descent of the current font at its current size. The descent represents the distance, in pixels, of the character with the longest descender below the baseline."
+ ],
+ "returns": "Number: "
+ },
+ "loadFont": {
+ "description": [
+ "Carga un archivo de fuente de letra (.otf, .ttf) desde un archivo o URL, y retorna un objeto PFont. Este método es asíncrono, lo que significa que puede que no finalice antes de que la siguiente línea en tu bosquejo sea ejecutada. La ubicación del archivo debe ser relativo al archivo HTML que lo vincula con tu bosquejo. Cargar desde una URL u otra ubicación remota puede ser bloqueado por las opciones de seguridad del navegador.",
+ ""
+ ],
+ "returns": "Objeto: objeto p5.Font",
+ "params": {
+ "path": "String: número del archivo o URL a cargar",
+ "callback": "Función: función a ser ejecutada después de que loadFont() es completada",
+ "onError": "Function: (Optional) function to be executed if an error occurs"
+ }
+ },
+ "text": {
+ "description": [
+ "Dibuja texto en la pantalla. Muestra la información especificada en el primer parámetro en la pantalla, en la posición especificada por los parámetros adicionales. Una fuente por defecto será usada a menos que una fuente sea definida por la función textFont() y un tamaño por defecto será usado a menos que se use la función textSize(). Cambia el color del texto con la función fill(). Cambia la apariencia del texto con las funciones stroke() y strokeWeight(). El texto se muestra en relación a la función textAlign(), que da la opción de dibujar a la izuiqerda, derecha y centro de las coordenadas. Los parámetros x2 e y2 definen un área rectangular donde mostrar el texto y solo puede ser usado por los datos tipo String. Cuando estos parámetros son especificados, son interpretados según la configuración de rectMode(). El texto que no cabe completamente dentro del rectángulo especificado no será dibujado en pantalla.",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "str": "String: símbolos alfanuméricos a ser mostrados",
+ "x": "Número: coordenada x del texto",
+ "y": "Número: coordenada y del texto",
+ "x2": "Número: por defecto, el ancho de la caja contenedora del texto, ver rectMode() para más información",
+ "y2": "Número: por defecto, la altura de la caja contenedora del texto, ver rectMode() para más información"
+ }
+ },
+ "textFont": {
+ "description": [
+ "Define la función actual con la que se dibujará el contenido de la función text()",
+ ""
+ ],
+ "returns": "Objeto",
+ "params": {
+ "font": "Objeto|String: una fuente cargada con loadFont(), o un String representando una tipografía segura de la web (una fuente ampliamente disponible a lo largo de todos los sistemas).",
+ "size": "Number: (Optional) the font size to use"
+ }
+ },
+ "append": {
+ "description": [
+ "Añade un valor al final de un arreglo. Extiende el largo de un arreglo en una unidad. Usa la función Array.push()"
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "array": "Arreglo: Arreglo al que se agregará el dato",
+ "value": "Cualquiera: a ser añadido al arreglo"
+ }
+ },
+ "arrayCopy": {
+ "description": [
+ "Copia el arreglo (o una parte del arreglo) a otro arreglo. El arreglo fuente es copiado al arreglo de destino, empezando por la posición especificada por srcPosition y a la posición especificada por dstPosition. El número de elementos a copiar es determinado por el largo. Notar que al copiar valores se sobreescriben los valores existentes en el arreglo de destino. Para anexar valores en vez de sobreescribirlos, usa la función concat(). La versión simplificada con dos argumentos, arrayCopy(src, dest), copia un arreglo entero a otro del mismo tamaño. Es equivaletne a arrayCopy(src, 0, dst, 0, src.length). Usar esta función es mucho más eficiente para copiar datos de un arreglo que iterar con un bucle for() y copiar cada elemento individualmente. ",
+ "",
+ ""
+ ],
+ "params": {
+ "src": "Arreglo: el arreglo fuente",
+ "srcPosition": "Número: posición inicial en el arreglo fuente",
+ "dst": "Arreglo: el arreglo de destino",
+ "dstPosition": "Número: posición inicial del arreglo de destino",
+ "length": "Número: númeor de elementos del arreglo a ser copiados"
+ }
+ },
+ "concat": {
+ "description": [
+ "Concatena dos arreglos, usa la función Array.concat(). No modifica los arreglos de entrada."
+ ],
+ "returns": "Arreglo: el arreglo concatenado",
+ "params": {
+ "a": "Arreglo: primer arreglo a concatenar",
+ "b": "Arreglo: segundo arreglo a concatenar"
+ }
+ },
+ "reverse": {
+ "description": [
+ "Invierte el orden un arreglo, usa Array.reverse()."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "list": "Arreglo: arreglo a ser invertido"
+ }
+ },
+ "shorten": {
+ "description": [
+ "Disminuye un arreglo en un elemento y retorna el arreglo más corto, usa Array.pop()."
+ ],
+ "returns": "Arreglo: el arreglo acortado",
+ "params": {
+ "list": "Lista: arreglo a acortar"
+ }
+ },
+ "shuffle": {
+ "description": [
+ "Ordena aleatoriamente los elementos de un arreglo. Implementa el algoritmo Fisher Yates."
+ ],
+ "returns": "Arreglo: retorna el arreglo ordenado",
+ "params": {
+ "array": "Arreglo: Arreglo a ordenar",
+ "bool": "Boolean: modifica el arreglo"
+ }
+ },
+ "sort": {
+ "description": [
+ "Ordena un arreglo de números, desde el más pequeño al más grande, o pone un arreglo de palabras en orden alfabético. El arreglo original no es modificado, un nuevo arreglo ordenado es retornado. El parámetro count define el número de elementos a ordenar. Por ejemplo, si hay 12 elementos en un arreglo y count es 5, los primeros 5 elementos del arreglo serán ordenados."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "list": "Arreglo: arreglo a ordenar",
+ "count": "Número: número de elementos a ordenar, empezando desde 0"
+ }
+ },
+ "splice": {
+ "description": [
+ "Inserta un valor o un arreglo de valores en un arreglo existente El primer parámetro especifica el arreglo inicial a ser modificado, y el segundo parámetro define los datos a insertarse. El tercer parámetro es un índice que especifica la posición del arreglo a partir de la que se insertarán los datos. Recuerda que el índice del arreglo empieza en 0, así que la primera posición es 0, la segunda es 1, etc."
+ ],
+ "returns": "el objeto p5",
+ "params": {
+ "list": "Arreglo: arreglo a ser modificado",
+ "value": "Cualquiera: valor a ser introducido",
+ "position": "Número: posición del arreglo donde se inserta el dato"
+ }
+ },
+ "subset": {
+ "description": [
+ "Extrae un arreglo de elementos de un arreglo existente. El parámetro list define el arreglo desde el cual los elementos serán copiados, y los parámetros start y count especifican cuáles elementos extraer. Si no especifica count, los elementos serán extraidos desde el principio. Esta función no modifica el arreglo original"
+ ],
+ "returns": "Arreglo: arreglo de elementos extraidos",
+ "params": {
+ "list": "Arreglo: arreglo del cual se extrae",
+ "start": "Número: posición de donde empezar a extraer",
+ "count": "Número: número de valores a extraer"
+ }
+ },
+ "float": {
+ "description": [
+ "Convierte un String a su representación de punto flotante. Los contenidos de un String deben parecerse a un número, en otro caso NaN es retornado. Por ejemplo, float('1234.56') evalua a 1234.56, pero float('giraffe') retorna NaN. Cuando un arreglo de valores es pasado, un arreglo de floats del mismo largo es retornado.",
+ ""
+ ],
+ "returns": "Número: representación en punto flotante de un string",
+ "params": {
+ "str": "String: string a ser procesado"
+ }
+ },
+ "int": {
+ "description": [
+ "Convierte un boolean, string o float a su representación en número entero. Cuando un arreglo de valores es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ ],
+ "returns": "Número: valor representado como entero",
+ "params": {
+ "n": "String|Boolean|Number: value to parse",
+ "radix": "Integer: (Optional) the radix to convert to (default: 10)",
+ "ns": "String|Boolean|Número|Arreglo: valor a procesar"
+ }
+ },
+ "str": {
+ "description": [
+ "Convierte un boolean, string, o número a su representación en string. Cuando un arreglo de valores es introducido, entonces un arreglo de strings de la misma longitud es retornado."
+ ],
+ "returns": "String: valor representado como string",
+ "params": {
+ "n": "String|Boolean|Número|Arreglo: valor a procesar"
+ }
+ },
+ "byte": {
+ "description": [
+ "Convierte un número, string o boolean a su representación en byte. Un byte puede solo ser un número entero entre -128 y 127, así que cuando un valor fuera de este rango es convertido, se hace wrap a la representación correspondiente en byte. Cuando un arreglo de números, string, o booleans es introducido, entonces un arreglo de bytes de la misma longitud es retornado."
+ ],
+ "returns": "Número: representación en formato byte del valor",
+ "params": {
+ "n": "String|Boolean|Número|Arreglo: valor a procesar",
+ "ns": "Array: values to parse"
+ }
+ },
+ "char": {
+ "description": [
+ "Convierte un número o string a su representaciómo como un string de un único caracter. Si se provee un parámetro, es primero pasado como entero y luego evaluado como un string de un único caracter. Cuando un arreglo de números o strings es introducido, entonces un arreglo de strings de un único caracter de la misma longitud es retornado."
+ ],
+ "returns": "String: representación en formato string del valor",
+ "params": {
+ "n": "String|Número|Arreglo: valor a procesar",
+ "ns": "Array: values to parse"
+ }
+ },
+ "unchar": {
+ "description": [
+ "Convierte un string de un único caracter a su correspondiente representación como valor entero. Cuando un arreglo de strings de un caracter es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ ],
+ "returns": "Número: representación en formato entero del valor",
+ "params": {
+ "n": "String|Arreglo: valor a procesar",
+ "ns": "Array: values to parse"
+ }
+ },
+ "hex": {
+ "description": [
+ "Convierte un número a su correspondiente representación como hexadecimal. Si se ingersa un segundo parámetro, es usado para definir el número de caracteres a generar en la notación hexadecimal. Cuando un arreglo es introducido, entonces un arreglo de strings en notación hexadecimal de la misma longitud es retornado."
+ ],
+ "returns": "String: representación en formato string hexadecimal del valor",
+ "params": {
+ "n": "Número|Arreglo: valor a procesar",
+ "digits": "Number (Optional)",
+ "ns": "Number[]: array of values to parse"
+ }
+ },
+ "unhex": {
+ "description": [
+ "Convierte una representación en string de un número hexadecimal a su correspondiente representación como valor entero. Cuando un arreglo de strings en notación hexadecimal es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ ],
+ "returns": "Número: representación en formato entero del valor hexadecimal",
+ "params": {
+ "n": "String|Arreglo: valor a procesar",
+ "ns": "Array: values to parse"
+ }
+ },
+ "join": {
+ "description": [
+ "Combina una arreglo de Strings en un String, cada uno separado por los caracteres usados como parámetro separator. Para unir arreglos de enteros o floats, es necesario primero convertirlos a Strings usando las funciones nf() o nfs()."
+ ],
+ "returns": "String: String unificado",
+ "params": {
+ "list": "Arreglo: arreglo de Strings a ser unidos",
+ "separator": "String: String a ser posicionado entre cada item"
+ }
+ },
+ "match": {
+ "description": [
+ "Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de largo 1 (con el texto coincidente como primer elemento del arreglo) será retornado. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[0] de una coincidencia de expresión regular retorna el string coincidente, y el grupo de coincidencia empieza en el elemento[1] (el primer grupo es [1], el segundo es [2], etc).",
+ "",
+ ""
+ ],
+ "returns": "Arreglo: arreglo de Strings encontrados",
+ "params": {
+ "str": "String: el String a ser buscado",
+ "regexp": "String: la expresión regular a ser usada para buscar coincidencias"
+ }
+ },
+ "matchAll": {
+ "description": [
+ "Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna una lista de grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings bidimensional. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de dos dimensiones es retornado, pero es de largo 1. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo 2D. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[i][0] de una coincidencia de expresión regular retorna el string coincidente completo, y el grupo de coincidencia empieza en el elemento[i][1] (el primer grupo es [i][1], el segundo es [i][2], etc).",
+ "",
+ ""
+ ],
+ "returns": "Arreglo: arreglo 2D de Strings encontrados",
+ "params": {
+ "str": "String: el String a ser buscado",
+ "regexp": "String: la expresión regular a ser usada para buscar coincidencias"
+ }
+ },
+ "nf": {
+ "description": [
+ "Función de utilidad para formatear números a strings. Existen dos veriones: una para formatear floats, y una para formatear enteros. Los valores de los dígitos y los parámetros left y right siempre deben ser enteros positivos"
+ ],
+ "returns": "String|Arreglo: String formateada",
+ "params": {
+ "num": "Número|Arreglo: el número a formatear",
+ "left": "Número: número de dígitos a la izquierda del punto decimal",
+ "right": "Número: número de dígitos a la derecha del punto decimal",
+ "nums": "Array: the Numbers to format"
+ }
+ },
+ "nfc": {
+ "description": [
+ "Función de utilidad para formatear números en strings y poner las comas apropiadas para señalar múltiplos de mil. Hay dos versiones: una para números enteros y otra para arreglos de enteros. El valor del parámetro right debe siempre ser un entero positivo."
+ ],
+ "returns": "String|Arreglo: String formateada",
+ "params": {
+ "num": "Número|Arreglo: el número a formatear",
+ "right": "Número: número de dígitos a la derecha del punto decimal",
+ "nums": "Array: the Numbers to format"
+ }
+ },
+ "nfp": {
+ "description": [
+ "Función de utilidad para formatear números en strings. Similar a nf() pero pone un signo + en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos."
+ ],
+ "returns": "String|Arreglo: String formateada",
+ "params": {
+ "num": "Número|Arreglo: el número a formatear",
+ "left": "Número: número de dígitos a la izquierda del punto decimal",
+ "right": "Número: número de dígitos a la derecha del punto decimal",
+ "nums": "Number[]: the Numbers to format"
+ }
+ },
+ "nfs": {
+ "description": [
+ "Función de utilidad para formatear números en strings. Similar a nf() pero pone un espacio en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos."
+ ],
+ "returns": "String|Arreglo: String formateada",
+ "params": {
+ "num": "Número|Arreglo: el número a formatear",
+ "left": "Número: número de dígitos a la izquierda del punto decimal",
+ "right": "Número: número de dígitos a la derecha del punto decimal",
+ "nums": "Array: the Numbers to format"
+ }
+ },
+ "split": {
+ "description": [
+ "La función split usa String.split(), corta un String en pedazos usando un caracter o String como delimitador. El parámetro delim especifica el caracter o caracteres que marcan los bordes entre cada pieza. Un arreglo String[] es retornado, que contiene cada una de las piezas. La función splitTokens() funciona de forma similar, excepto que divide usango un rango de caracteres en vez de usar un caracter o una secuencia de caracteres específicos.",
+ ""
+ ],
+ "returns": "Arreglo: arreglo de Strings",
+ "params": {
+ "value": "String: el String a ser dividido",
+ "delim": "String: el String usado para separar los datos"
+ }
+ },
+ "splitTokens": {
+ "description": [
+ "La función splitTokens() divide un String en uno o varios caracteres delimitadores o tokens. El parámetro delim especifica el o los caracteres a ser usados como borde. Si no se especifican caracteres delim, cualquier caracter tipo whitespace será usado para dividir. Los caracteres whitespace incluyen tabulación (\t), nueva línea (\n), retorno de carro (\r), entrada de formulario (\f), y espacio.",
+ ""
+ ],
+ "returns": "Arreglo: arreglo de Strings",
+ "params": {
+ "value": "String: el String a ser dividido",
+ "delim": "String: lista de Strings individuales que serán usados como separadores"
+ }
+ },
+ "trim": {
+ "description": [
+ "Remueve caracteres tipo whitespace (espacio en blanco) del comienzo y el final de un String. En adición a los caracteres estámdar de whitespace como espacio, retorno de carro y tabulación, esta función también remueve el caracter Unicode nbsp."
+ ],
+ "returns": "String|Arreglo: un String o arreglo de Strings recortados.",
+ "params": {
+ "str": "String: a String to be trimmed",
+ "strs": "Array: an Array of Strings to be trimmed"
+ }
+ },
+ "day": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función day() retorna el día actual como un valor entre 1 y 31."
+ ],
+ "returns": "Número: el día actual"
+ },
+ "hour": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función hour() retorna la hora actual como un valor entre 0 y 23."
+ ],
+ "returns": "Número: la hora actual"
+ },
+ "minute": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función minute() retorna el minuto actual como un valor entre 0 y 59."
+ ],
+ "returns": "Número: el minuto actual"
+ },
+ "millis": {
+ "description": [
+ "Retorna el número de milisegundos (milésimas de segundo) desde que el programa empezó a correr. La información es usada a menudo para temporizar eventos y animar secuencias"
+ ],
+ "returns": "Número: el número de milisegundos desde que empezó el programa"
+ },
+ "month": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función month() retorna el mes actual como un valor entre 1 y 12."
+ ],
+ "returns": "Número: el mes actual"
+ },
+ "second": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función second() retorna el mes actual como un valor entre 0 y 59."
+ ],
+ "returns": "Número: el segundo actual"
+ },
+ "year": {
+ "description": [
+ "p5.js se comunica con el reloj de tu computador. La función year() retorna el año actual como un entero (2014, 2015, 2015, etc)."
+ ],
+ "returns": "Número: el año actual"
+ },
+ "plane": {
+ "description": [
+ "Dibuja un plano con ancho y altura dados."
+ ],
+ "params": {
+ "width": "Número: ancho del plano",
+ "height": "Número: altura del plano",
+ "detailX": "Número: número opcional de subdivisiones triangulares en la dimensión x",
+ "detailY": "Número: número opcional de subdivisiones triangulares en la dimensión y"
+ }
+ },
+ "box": {
+ "description": [
+ "Dibuja una caja con ancho, altura y profundidad dados."
+ ],
+ "params": {
+ "width": "Número: ancho de la caja",
+ "Height": "Número: altura de la caja",
+ "depth": "Número: profundidad de la caja",
+ "detailX": "Número: número opcional de subdivisiones triangulares en la dimensión x",
+ "detailY": "Número: número opcional de subdivisiones triangulares en la dimensión y"
+ }
+ },
+ "sphere": {
+ "description": [
+ "Dibuja una esfera de radio dado.",
+ ""
+ ],
+ "params": {
+ "radius": "Número: radio del círculo",
+ "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
+ "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16"
+ }
+ },
+ "cylinder": {
+ "description": [
+ "Dibuja un cilindro de radio y altura dados.",
+ ""
+ ],
+ "params": {
+ "radius": "Número: radio de la superficie",
+ "height": "Número: altura del cilindro",
+ "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
+ "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16",
+ "bottomCap": "Boolean: (Optional) whether to draw the bottom of the cylinder",
+ "topCap": "Boolean: (Optional) whether to draw the top of the cylinder"
+ }
+ },
+ "cone": {
+ "description": [
+ "Dibuja un cono de radio y altura dados.",
+ ""
+ ],
+ "params": {
+ "radius": "Número: radio de la superficie inferior",
+ "height": "Número: altura del cono",
+ "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24",
+ "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16",
+ "cap": "Boolean: (Optional) whether to draw the base of the cone"
+ }
+ },
+ "ellipsoid": {
+ "description": [
+ "Dibuja un elipsoide de radio dado.",
+ ""
+ ],
+ "params": {
+ "radiusx": "Número: radio x del círculo",
+ "radiusy": "Número: radio y del círculo",
+ "radiusz": "Número: radio z del círculo",
+ "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24. Evita números mayores a 150 que podrían colapsar el navegador.",
+ "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16. Evita números mayores a 150 que podrían colapsar el navegador."
+ }
+ },
+ "torus": {
+ "description": [
+ "Dibuja un toroide con radio y tubo dado.",
+ ""
+ ],
+ "params": {
+ "radius": "Número: radio del anillo completo",
+ "tubeRadius": "Número: radio del tubo",
+ "detailX": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 24.",
+ "detailY": "Número: opcional, número de segmentos, a mayor número de segmentos la geometría es más suave, por defecto es 16."
+ }
+ },
+ "orbitControl": {
+ "description": [
+ "Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity."
+ ],
+ "params": {
+ "sensitivityX": "Number: (Optional) sensitivity to mouse movement along X axis",
+ "sensitivityY": "Number: (Optional) sensitivity to mouse movement along Y axis",
+ "sensitivityZ": "Number: (Optional) sensitivity to scroll movement along Z axis"
+ }
+ },
+ "debugMode": {
+ "description": [
+ "debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop. ",
+ "By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid."
+ ],
+ "params": {
+ "mode": "Constant: either GRID or AXES",
+ "gridSize": "Number: (Optional) size of one side of the grid",
+ "gridDivisions": "Number: (Optional) number of divisions in the grid",
+ "xOff": "Number: (Optional) X axis offset from origin (0,0,0)",
+ "yOff": "Number: (Optional) Y axis offset from origin (0,0,0)",
+ "zOff": "Number: (Optional) Z axis offset from origin (0,0,0)",
+ "axesSize": "Number: (Optional) size of axes icon",
+ "gridXOff": "Number (Optional)",
+ "gridYOff": "Number (Optional)",
+ "gridZOff": "Number (Optional)",
+ "axesXOff": "Number (Optional)",
+ "axesYOff": "Number (Optional)",
+ "axesZOff": "Number (Optional)"
+ }
+ },
+ "noDebugMode": {
+ "description": [
+ "Turns off debugMode() in a 3D sketch."
+ ]
+ },
+ "ambientLight": {
+ "description": [
+ "Crea una luz ambiente con color"
+ ],
+ "params": {
+ "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
+ "v2": "Número: opcional, valor de verde o saturación",
+ "v3": "Número: opcional, valor de azul o brillo",
+ "alpha": "Número: opcional, valor de opacidad",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the ambient light color"
+ }
+ },
+ "specularColor": {
+ "description": [
+ "Set's the color of the specular highlight when using a specular material and specular light. ",
+ "This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect. ",
+ "Note: specularColor is equivalent to the processing function lightSpecular ."
+ ],
+ "params": {
+ "v1": "Number: red or hue value relative to the current color range",
+ "v2": "Number: green or saturation value relative to the current color range",
+ "v3": "Number: blue or brightness value relative to the current color range",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the ambient light color"
+ }
+ },
+ "directionalLight": {
+ "description": [
+ "Crea una luz direccional con color y dirección",
+ ""
+ ],
+ "params": {
+ "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
+ "v2": "Número: opcional, valor de verde o saturación",
+ "v3": "Número: opcional, valor de azul o brillo",
+ "position": "p5.Vector: the direction of the light",
+ "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value",
+ "x": "Número|p5.Vector: dirección del eje x o un p5.Vector",
+ "y": "Número: opcional, dirección del eje y",
+ "z": "Número: opcional, dirección del eje z"
+ }
+ },
+ "pointLight": {
+ "description": [
+ "Crea una luz puntual con color y posición",
+ ""
+ ],
+ "params": {
+ "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
+ "v2": "Número: opcional, valor de verde o saturación",
+ "v3": "Número: opcional, valor de azul o brillo",
+ "x": "Número|p5.Vector: dirección del eje x o un p5.Vector",
+ "y": "Número: opcional, dirección del eje y",
+ "z": "Número: opcional, dirección del eje z",
+ "position": "p5.Vector: the position of the light",
+ "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value"
+ }
+ },
+ "lights": {
+ "description": [
+ "Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1) . 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."
+ ]
+ },
+ "lightFalloff": {
+ "description": [
+ "Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation: ",
+ "d = distance from light position to vertex position ",
+ "falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)"
+ ],
+ "params": {
+ "constant": "Number: constant value for determining falloff",
+ "linear": "Number: linear value for determining falloff",
+ "quadratic": "Number: quadratic value for determining falloff"
+ }
+ },
+ "spotLight": {
+ "description": [
+ "Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle. ",
+ "A maximum of 5 spotLight can be active at one time"
+ ],
+ "params": {
+ "v1": "Number: red or hue value (depending on the current color mode),",
+ "v2": "Number: green or saturation value",
+ "v3": "Number: blue or brightness value",
+ "x": "Number: x axis position",
+ "y": "Number: y axis position",
+ "z": "Number: z axis position",
+ "rx": "Number: x axis direction of light",
+ "ry": "Number: y axis direction of light",
+ "rz": "Number: z axis direction of light",
+ "angle": "Number: (Optional) optional parameter for angle. Defaults to PI/3",
+ "conc": "Number: (Optional) optional parameter for concentration. Defaults to 100",
+ "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value",
+ "position": "p5.Vector: the position of the light",
+ "direction": "p5.Vector: the direction of the light"
+ }
+ },
+ "noLights": {
+ "description": [
+ "This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch."
+ ]
+ },
+ "loadModel": {
+ "description": [
+ "Carga un modelo 3d desde un archivo OBJ. Una de las limitaciones del formato OBJ es que no trae incorporado un sentido de escala. Esto significa que los modelos exportados por distintos programas pueden ser de tamaños radicalmente distintos. Si tu modelo no está siendo mostrado en pantalla, trata llamando a la función loadMode() con el parámetro de normalización configurado como verdadero. Esto escalará el tamaño del modelo a una escala apropiada para p5. También puedes hacer cambios adicionales al tamaño final de tu modelo con la función scale().",
+ "",
+ "",
+ ""
+ ],
+ "returns": "el objeto p5.Geometry3D",
+ "params": {
+ "path": "String: ubicación del modelo a cargar",
+ "normalize": "Boolean: Si es verdadero (true), escala el modelo a un tamaño estandarizado al momento de cargarlo.",
+ "successCallback": "Función(p5.Geometry3D): función a ser llamada cuando el modelo se cargue. Será pasada al modelo del objeto 3D.",
+ "failureCallback": "Función(evento): llamada con el error evento si la imagen no falla al cargar.",
+ "fileType": "String: (Optional) The file extension of the model (.stl, .obj)."
+ }
+ },
+ "model": {
+ "description": [
+ "Hace el render de un modelo 3D en la pantalla."
+ ],
+ "params": {
+ "model": "p5.Geometry: modelo 3D cargado para realizar render"
+ }
+ },
+ "loadShader": {
+ "description": [
+ "Loads a custom shader from the provided vertex and fragment shader paths. The shader files are loaded asynchronously in the background, so this method should be used in preload() . ",
+ "For now, there are three main types of shaders. p5 will automatically supply appropriate vertices, normals, colors, and lighting attributes if the parameters defined in the shader match the names."
+ ],
+ "returns": "p5.Shader: a shader object created from the provided vertex and fragment shader files.",
+ "params": {
+ "vertFilename": "String: path to file containing vertex shader source code",
+ "fragFilename": "String: path to file containing fragment shader source code",
+ "callback": "Function: (Optional) callback to be executed after loadShader completes. On success, the Shader object is passed as the first argument.",
+ "errorCallback": "Function: (Optional) callback to be executed when an error occurs inside loadShader. On error, the error is passed as the first argument."
+ }
+ },
+ "createShader": {
+ "returns": "p5.Shader: a shader object created from the provided vertex and fragment shaders.",
+ "params": {
+ "vertSrc": "String: source code for the vertex shader",
+ "fragSrc": "String: source code for the fragment shader"
+ }
+ },
+ "shader": {
+ "description": [
+ "The shader() function lets the user provide a custom shader to fill in shapes in WEBGL mode. Users can create their own shaders by loading vertex and fragment shaders with loadShader() ."
+ ],
+ "params": {
+ "s": "p5.Shader: (Optional) the desired p5.Shader to use for rendering shapes."
+ }
+ },
+ "resetShader": {
+ "description": [
+ "This function restores the default shaders in WEBGL mode. Code that runs after resetShader() will not be affected by previously defined shaders. Should be run after shader() ."
+ ]
+ },
+ "normalMaterial": {
+ "description": [
+ "Material normal para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ ]
+ },
+ "texture": {
+ "description": [
+ "Textura para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ ],
+ "params": {
+ "tex": "p5.Image|p5.MediaElement|p5.Graphics: gráfica bidimensional para hacer render como textura."
+ }
+ },
+ "textureMode": {
+ "description": [
+ "Sets the coordinate space for texture mapping. The default mode is IMAGE which refers to the actual coordinates of the image. NORMAL refers to a normalized space of values ranging from 0 to 1. This function only works in WEBGL mode. ",
+ "With IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1)."
+ ],
+ "params": {
+ "mode": "Constant: either IMAGE or NORMAL"
+ }
+ },
+ "textureWrap": {
+ "description": [
+ "Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 - 1 range. There are three options: CLAMP, REPEAT, and MIRROR. ",
+ "CLAMP causes the pixels at the edge of the texture to extend to the bounds REPEAT causes the texture to tile repeatedly until reaching the bounds MIRROR works similarly to REPEAT but it flips the texture with every new tile ",
+ "REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.). ",
+ "This method will affect all textures in your sketch until a subsequent textureWrap call is made. ",
+ "If only one argument is provided, it will be applied to both the horizontal and vertical axes."
+ ],
+ "params": {
+ "wrapX": "Constant: either CLAMP, REPEAT, or MIRROR",
+ "wrapY": "Constant: (Optional) either CLAMP, REPEAT, or MIRROR"
+ }
+ },
+ "ambientMaterial": {
+ "description": [
+ "Material ambiente para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ ],
+ "params": {
+ "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS",
+ "v2": "Número: opcional, valor de verde o saturación",
+ "v3": "Número: opcional, valor de azul o brillo",
+ "color": "Number[]|String|p5.Color: color, color Array, or CSS color string"
+ }
+ },
+ "emissiveMaterial": {
+ "description": [
+ "Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect."
+ ],
+ "params": {
+ "v1": "Number: gray value, red or hue value (depending on the current color mode),",
+ "v2": "Number: (Optional) green or saturation value",
+ "v3": "Number: (Optional) blue or brightness value",
+ "a": "Number: (Optional) opacity",
+ "color": "Number[]|String|p5.Color: color, color Array, or CSS color string"
+ }
+ },
+ "specularMaterial": {
+ "description": [
+ "Material espejo para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo."
+ ],
+ "params": {
+ "gray": "Number: number specifying value between white and black.",
+ "alpha": "Número: opcional, valor de opacidad",
+ "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS",
+ "v2": "Número: opcional, valor de verde o saturación",
+ "v3": "Número: opcional, valor de azul o brillo",
+ "color": "Number[]|String|p5.Color: color Array, or CSS color string"
+ }
+ },
+ "shininess": {
+ "description": [
+ "Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1."
+ ],
+ "params": {
+ "shine": "Number: Degree of Shininess. Defaults to 1."
+ }
+ },
+ "camera": {
+ "description": [
+ "Define la posición de la cámara",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "Número: valor de la posición de la cámara en el eje x",
+ "y": "Número: valor de la posición de la cámara en el eje y",
+ "z": "Número: valor de la posición de la cámara en el eje z",
+ "centerX": "Number: (Optional) x coordinate representing center of the sketch",
+ "centerY": "Number: (Optional) y coordinate representing center of the sketch",
+ "centerZ": "Number: (Optional) z coordinate representing center of the sketch",
+ "upX": "Number: (Optional) x component of direction 'up' from camera",
+ "upY": "Number: (Optional) y component of direction 'up' from camera",
+ "upZ": "Number: (Optional) z component of direction 'up' from camera"
+ }
+ },
+ "perspective": {
+ "description": [
+ "Define la perspectiva de la cámara",
+ ""
+ ],
+ "params": {
+ "fovy": "Número: frustum del campo de visión vertical de la cámara, de abajo hacia arriba, en grados",
+ "aspect": "Número: frustum de la relación de aspecto de la cámara",
+ "near": "Número: frustum del largo del plano cercano",
+ "far": "Número: frustum del largo del plano lejano"
+ }
+ },
+ "ortho": {
+ "description": [
+ "Define la cámara ortogonal"
+ ],
+ "params": {
+ "left": "Número: define el frustum del plano izquierdo de la cámara",
+ "right": "Número: define el frustum del plano derecho de la cámara",
+ "bottom": "Número: define el frustum del plano inferior de la cámara",
+ "top": "Número: define el frustum del plano superior de la cámara",
+ "near": "Número: define el frustum del plano cercano de la cámara",
+ "far": "Número: define el frustum del plano lejano de la cámara"
+ }
+ },
+ "frustum": {
+ "description": [
+ "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 visible; anything outside those planes is not visible. ",
+ "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective() ."
+ ],
+ "params": {
+ "left": "Number: (Optional) camera frustum left plane",
+ "right": "Number: (Optional) camera frustum right plane",
+ "bottom": "Number: (Optional) camera frustum bottom plane",
+ "top": "Number: (Optional) camera frustum top plane",
+ "near": "Number: (Optional) camera frustum near plane",
+ "far": "Number: (Optional) camera frustum far plane"
+ }
+ },
+ "createCamera": {
+ "description": [
+ "Creates a new p5.Camera object and tells the renderer to use that camera. Returns the p5.Camera object."
+ ],
+ "returns": "p5.Camera: The newly created camera object."
+ },
+ "setCamera": {
+ "description": [
+ "Sets rendererGL's current camera to a p5.Camera object. Allows switching between multiple cameras."
+ ],
+ "params": {
+ "cam": "p5.Camera: p5.Camera object"
+ }
+ },
+ "setAttributes": {
+ "description": [
+ "Set attributes for the WebGL Drawing context. This is a way of adjusting how the WebGL renderer works to fine-tune the display and performance. ",
+ "Note that this will reinitialize the drawing context if called after the WebGL canvas is made. ",
+ "If an object is passed as the parameter, all attributes not declared in the object will be set to defaults. ",
+ "The available attributes are: alpha - indicates if the canvas contains an alpha buffer default is true ",
+ "depth - indicates whether the drawing buffer has a depth buffer of at least 16 bits - default is true ",
+ "stencil - indicates whether the drawing buffer has a stencil buffer of at least 8 bits ",
+ "antialias - indicates whether or not to perform anti-aliasing default is false (true in Safari) ",
+ "premultipliedAlpha - indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha default is false ",
+ "preserveDrawingBuffer - if true the buffers will not be cleared and and will preserve their values until cleared or overwritten by author (note that p5 clears automatically on draw loop) default is true ",
+ "perPixelLighting - if true, per-pixel lighting will be used in the lighting shader otherwise per-vertex lighting is used. default is true."
+ ],
+ "params": {
+ "key": "String: Name of attribute",
+ "value": "Boolean: New value of named attribute",
+ "obj": "Object: object with key-value pairs"
+ }
+ },
+ "sampleRate": {
+ "description": [
+ "Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing."
+ ],
+ "returns": "Number: samplerate samples per second"
+ },
+ "freqToMidi": {
+ "description": [
+ "Returns the closest MIDI note value for a given frequency."
+ ],
+ "returns": "Number: MIDI note value",
+ "params": {
+ "frequency": "Number: A freqeuncy, for example, the \"A\" above Middle C is 440Hz"
+ }
+ },
+ "midiToFreq": {
+ "description": [
+ "Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators."
+ ],
+ "returns": "Number: Frequency value of the given MIDI note",
+ "params": {
+ "midiNote": "Number: The number of a MIDI note"
+ }
+ },
+ "soundFormats": {
+ "description": [
+ "List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter."
+ ],
+ "params": {
+ "formats": "String: (Optional) i.e. 'mp3', 'wav', 'ogg'"
+ }
+ },
+ "getAudioContext": {
+ "description": [
+ "Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API . ",
+ "Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below."
+ ],
+ "returns": "Object: AudioContext for this sketch"
+ },
+ "userStartAudio": {
+ "description": [
+ "It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome , which create the Web Audio API's Audio Context in a suspended state. ",
+ "In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio(). ",
+ "userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016)."
+ ],
+ "returns": "Promise: Returns a Promise that resolves when the AudioContext state is 'running'",
+ "params": {
+ "element(s)": "Element|Array: (Optional) This argument can be an Element, Selector String, NodeList, p5.Element, jQuery Element, or an Array of any of those.",
+ "callback": "Function: (Optional) Callback to invoke when the AudioContext has started"
+ }
+ },
+ "loadSound": {
+ "description": [
+ "loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files."
+ ],
+ "returns": "SoundFile: Returns a p5.SoundFile",
+ "params": {
+ "path": "String|Array: Path to the sound file, or an array with paths to soundfiles in multiple formats i.e. ['sound.ogg', 'sound.mp3']. Alternately, accepts an object: either from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if there is an error loading the file.",
+ "whileLoading": "Function: (Optional) Name of a function to call while file is loading. This function will receive the percentage loaded so far, from 0.0 to 1.0."
+ }
+ },
+ "createConvolver": {
+ "description": [
+ "Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response."
+ ],
+ "returns": "p5.Convolver: ",
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call if loading is successful. The object will be passed in as the argument to the callback function.",
+ "errorCallback": "Function: (Optional) function to call if loading is not successful. A custom error will be passed in as the argument to the callback function."
+ }
+ },
+ "setBPM": {
+ "description": [
+ "Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts."
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ },
+ "saveSound": {
+ "description": [
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob ."
+ ],
+ "params": {
+ "soundFile": "p5.SoundFile: p5.SoundFile that you wish to save",
+ "fileName": "String: name of the resulting .wav file."
+ }
+ }
+ },
+ "p5.Color": {
+ "description": [
+ "Cada color almacena el modo de color y los niveles máximos que se aplicaron en el momento de su construcción. Estos se utilizan para interpretar los argumentos de entrada (en la construcción y más tarde para esa instancia de color) y para formatear el output, p. ej. cuando se solicita la saturation() . ",
+ "Internamente almacenamos una matriz que representa los valores ideales de RGBA en forma de coma flotante, normalizada de 0 a 1. A partir de esto, calculamos el color de pantalla más cercano (niveles de RGBA de 0 a 255) y lo exponemos al renderizador. ",
+ "También almacenamos en caché normalizado, componentes de coma flotante de color flotante del color en varias representaciones a medida que se calculan. Esto se hace para evitar repetir una conversión que ya se ha realizado."
+ ],
+ "setRed": {
+ "description": [
+ "La función setRed establece el componente rojo de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255."
+ ],
+ "params": {
+ "red": "Number: the new red value"
+ }
+ },
+ "setGreen": {
+ "description": [
+ "La función setGreen establece el componente verde de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255."
+ ],
+ "params": {
+ "green": "Number: the new green value"
+ }
+ },
+ "setBlue": {
+ "description": [
+ "La función setBlue establece el componente azul de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255."
+ ],
+ "params": {
+ "blue": "Number: the new blue value"
+ }
+ },
+ "setAlpha": {
+ "description": [
+ "La función setAlpha establece el valor de transparencia (alfa) de un color. El rango depende de su modo de color, en el modo RGB predeterminado está entre 0 y 255."
+ ],
+ "params": {
+ "alpha": "Number: the new alpha value"
+ }
+ }
+ },
+ "p5.Element": {
+ "description": [
+ "Clase base para todos los elementos añadidos al bosuqejo, incluyendo lienzo, buffers de gráficas, y otros elementos HTML. Los métodos en azul están incluidos en la funcionalidad base, los métodos en marrón son añadidos con la biblioteca p5.dom. No se ejecutan directamente, pero los objetos p5.Element son creados llamando a las funciones createCanvas(), createGraphics(), o en la biblioteca p5.dom, createDiv, createImg, createInput, etc."
+ ],
+ "params": {
+ "elt": "String: node DOM envolvente.",
+ "pInst": "Objeto: puntero a instancia p5."
+ },
+ "elt": {
+ "description": [
+ "Underlying HTML element. All normal HTML methods can be called on this."
+ ]
+ },
+ "parent": {
+ "description": [
+ "Attaches the element to the parent specified. A way of setting the container for the element. Accepts either a string ID, DOM node, or p5.Element . If no arguments given, parent node is returned. For more ways to position the canvas, see the positioning the canvas wiki page."
+ ],
+ "params": {
+ "parent": "String|p5.Element|Object: the ID, DOM node, or p5.Element of desired parent element"
+ }
+ },
+ "id": {
+ "description": [
+ "Sets the ID of the element. If no ID argument is passed in, it instead returns the current ID of the element. Note that only one element can have a particular id in a page. The .class() function can be used to identify multiple elements with the same class name."
+ ],
+ "params": {
+ "id": "String: ID of the element"
+ }
+ },
+ "class": {
+ "description": [
+ "Adds given class to the element. If no class argument is passed in, it instead returns a string containing the current class(es) of the element."
+ ],
+ "params": {
+ "class": "String: class to add"
+ }
+ },
+ "mousePressed": {
+ "description": [
+ "The .mousePressed() function is called once after every time a mouse button is pressed over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is pressed over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "doubleClicked": {
+ "description": [
+ "The .doubleClicked() function is called once after every time a mouse button is pressed twice over the element. This can be used to attach element and action specific event listeners."
+ ],
+ "returns": "p5.Element: ",
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is double clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseWheel": {
+ "description": [
+ "The mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners. ",
+ "The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callback function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel. ",
+ "On OS X with \"natural\" scrolling enabled, the event.deltaY values are reversed."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is scrolled over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseReleased": {
+ "description": [
+ "The mouseReleased() function is called once after every time a mouse button is released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is released over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseClicked": {
+ "description": [
+ "The .mouseClicked() function is called once after a mouse button is pressed and released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap.This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseMoved": {
+ "description": [
+ "The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOver": {
+ "description": [
+ "The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves onto the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOut": {
+ "description": [
+ "The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves off of an element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchStarted": {
+ "description": [
+ "The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch starts over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchMoved": {
+ "description": [
+ "The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchEnded": {
+ "description": [
+ "The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch ends over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragOver": {
+ "description": [
+ "The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragLeave": {
+ "description": [
+ "The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged off the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "addClass": {
+ "description": [
+ "Adds specified class to the element."
+ ],
+ "params": {
+ "class": "String: name of class to add"
+ }
+ },
+ "removeClass": {
+ "description": [
+ "Removes specified class from the element."
+ ],
+ "params": {
+ "class": "String: name of class to remove"
+ }
+ },
+ "hasClass": {
+ "description": [
+ "Checks if specified class already set to element"
+ ],
+ "returns": "Boolean: a boolean value if element has specified class",
+ "params": {
+ "c": "String: class name of class to check"
+ }
+ },
+ "toggleClass": {
+ "description": [
+ "Toggles element class"
+ ],
+ "params": {
+ "c": "String: class name to toggle"
+ }
+ },
+ "child": {
+ "description": [
+ "Attaches the element as a child to the parent specified. Accepts either a string ID, DOM node, or p5.Element . If no argument is specified, an array of children DOM nodes is returned."
+ ],
+ "returns": "Node[]: an array of child nodes",
+ "params": {
+ "child": "String|p5.Element: (Optional) the ID, DOM node, or p5.Element to add to the current element"
+ }
+ },
+ "center": {
+ "description": [
+ "Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally."
+ ],
+ "params": {
+ "align": "String: (Optional) passing 'vertical', 'horizontal' aligns element accordingly"
+ }
+ },
+ "html": {
+ "description": [
+ "If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element."
+ ],
+ "returns": "String: the inner HTML of the element",
+ "params": {
+ "html": "String: (Optional) the HTML to be placed inside the element",
+ "append": "Boolean: (Optional) whether to append HTML to existing"
+ }
+ },
+ "position": {
+ "description": [
+ "Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme . If no arguments given, the function returns the x and y position of the element. found documentation on how to be more specific with object type https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc "
+ ],
+ "returns": "Object: object of form { x: 0, y: 0 } containing the position of the element in an object",
+ "params": {
+ "x": "Number: (Optional) x-position relative to upper left of window (optional)",
+ "y": "Number: (Optional) y-position relative to upper left of window (optional)",
+ "positionType": "String: it can be static, fixed, relative, sticky, initial or inherit (optional)"
+ }
+ },
+ "style": {
+ "description": [
+ "Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately."
+ ],
+ "returns": "String: value of property",
+ "params": {
+ "property": "String: property to be set",
+ "value": "String|p5.Color: value to assign to property"
+ }
+ },
+ "attribute": {
+ "description": [
+ "Adds a new attribute or changes the value of an existing attribute on the specified element. If no value is specified, returns the value of the given attribute, or null if attribute is not set."
+ ],
+ "returns": "String: value of attribute",
+ "params": {
+ "attr": "String: attribute to set",
+ "value": "String: value to assign to attribute"
+ }
+ },
+ "removeAttribute": {
+ "description": [
+ "Removes an attribute on the specified element."
+ ],
+ "params": {
+ "attr": "String: attribute to remove"
+ }
+ },
+ "value": {
+ "description": [
+ "Either returns the value of the element if no arguments given, or sets the value of the element."
+ ],
+ "returns": "String|Number: value of the element",
+ "params": {
+ "value": "String|Number"
+ }
+ },
+ "show": {
+ "description": [
+ "Shows the current element. Essentially, setting display:block for the style."
+ ]
+ },
+ "hide": {
+ "description": [
+ "Hides the current element. Essentially, setting display:none for the style."
+ ]
+ },
+ "size": {
+ "description": [
+ "Sets the width and height of the element. AUTO can be used to only adjust one dimension at a time. If no arguments are given, it returns the width and height of the element in an object. In case of elements which need to be loaded, such as images, it is recommended to call the function after the element has finished loading."
+ ],
+ "returns": "Object: the width and height of the element in an object",
+ "params": {
+ "w": "Number|Constant: width of the element, either AUTO, or a number",
+ "h": "Number|Constant: (Optional) height of the element, either AUTO, or a number"
+ }
+ },
+ "remove": {
+ "description": [
+ "Removes the element, stops all media streams, and deregisters all listeners."
+ ]
+ },
+ "drop": {
+ "description": [
+ "Registers a callback that gets called every time a file that is dropped on the element has been loaded. p5 will load every dropped file into memory and pass it as a p5.File object to the callback. Multiple files dropped at the same time will result in multiple calls to the callback. ",
+ "You can optionally pass a second callback which will be registered to the raw drop event. The callback will thus be provided the original DragEvent . Dropping multiple files at the same time will trigger the second callback once per drop, whereas the first callback will trigger for each loaded file."
+ ],
+ "params": {
+ "callback": "Function: callback to receive loaded file, called for each file dropped.",
+ "fxn": "Function: (Optional) callback triggered once when files are dropped with the drop event."
+ }
+ }
+ },
+ "p5.Graphics": {
+ "description": [
+ "Contenedor fino alrededor de un renderizador, que se utilizará para crear un objeto de búfer de gráficos. Use esta clase si necesita dibujar en un búfer de gráficos fuera de la pantalla. Los dos parámetros definen el ancho y el alto en píxeles. Los campos y métodos para esta clase son extensos, pero reflejan la API de dibujo normal para p5."
+ ],
+ "params": {
+ "w": "Número: ancho",
+ "h": "Número: altura",
+ "renderer": "Constant: renderer el renderizador a utilizar, ya sea P2D o WEBGL",
+ "pInst": "P5: pointer a una instancia p5 (Opcional)"
+ },
+ "reset": {
+ "description": [
+ "Restablece ciertos valores, como los modificados por funciones en la categoría Transformar y en la categoría Luces que no se restablecen automáticamente con objetos gráficos de búfer. Llamando a esto en draw() copiará el comportamiento del canvas estándar."
+ ]
+ },
+ "remove": {
+ "description": [
+ "Elimina un objeto Graphics de la página y libera todos los recursos asociados con él."
+ ]
+ }
+ },
+ "p5.Renderer": {
+ "description": [
+ "Main graphics and rendering context, as well as the base API implementation for p5.js \"core\". To be used as the superclass for Renderer2D and Renderer3D classes, respectively."
+ ],
+ "params": {
+ "elt": "String: DOM node that is wrapped",
+ "pInst": "P5: (Optional) pointer to p5 instance",
+ "isMainCanvas": "Boolean: (Optional) whether we're using it as main canvas"
+ }
+ },
+ "JSON": {
+ "stringify": {
+ "description": [
+ "From the MDN entry : The JSON.stringify() method converts a JavaScript object or value to a JSON string ."
+ ],
+ "params": {
+ "object": "Object: :Javascript object that you would like to convert to JSON"
+ }
+ }
+ },
+ "console": {
+ "log": {
+ "description": [
+ "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably. ",
+ "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome , Edge , and Safari . With the online p5 editor the console is embedded directly in the page underneath the code editor. ",
+ "From the MDN entry : The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects ."
+ ],
+ "params": {
+ "message": "String|Expression|Object: :Message that you would like to print to the console"
+ }
+ }
+ },
+ "p5.TypedDict": {
+ "description": [
+ "Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class."
+ ],
+ "size": {
+ "description": [
+ "Returns the number of key-value pairs currently stored in the Dictionary."
+ ],
+ "returns": "Integer: the number of key-value pairs in the Dictionary"
+ },
+ "hasKey": {
+ "description": [
+ "Returns true if the given key exists in the Dictionary, otherwise returns false."
+ ],
+ "returns": "Boolean: whether that key exists in Dictionary",
+ "params": {
+ "key": "Number|String: that you want to look up"
+ }
+ },
+ "get": {
+ "description": [
+ "Returns the value stored at the given key."
+ ],
+ "returns": "Number|String: the value stored at that key",
+ "params": {
+ "the": "Number|String: key you want to access"
+ }
+ },
+ "set": {
+ "description": [
+ "Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String"
+ }
+ },
+ "create": {
+ "description": [
+ "Creates a new key-value pair in the Dictionary."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String",
+ "obj": "Object: key/value pair"
+ }
+ },
+ "clear": {
+ "description": [
+ "Removes all previously stored key-value pairs from the Dictionary."
+ ]
+ },
+ "remove": {
+ "description": [
+ "Removes the key-value pair stored at the given key from the Dictionary."
+ ],
+ "params": {
+ "key": "Number|String: for the pair to remove"
+ }
+ },
+ "print": {
+ "description": [
+ "Logs the set of items currently stored in the Dictionary to the console."
+ ]
+ },
+ "saveTable": {
+ "description": [
+ "Converts the Dictionary into a CSV file for local download."
+ ]
+ },
+ "saveJSON": {
+ "description": [
+ "Converts the Dictionary into a JSON file for local download."
+ ]
+ }
+ },
+ "p5.StringDict": {
+ "description": [
+ "A simple Dictionary class for Strings."
+ ]
+ },
+ "p5.NumberDict": {
+ "description": [
+ "Una simple clase de Diccionario para Números."
+ ],
+ "add": {
+ "description": [
+ "Agregue el número dado al valor actualmente almacenado en la clave dada. La suma luego reemplaza el valor previamente almacenado en el Diccionario."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to add to",
+ "Number": "Number: to add to the value"
+ }
+ },
+ "sub": {
+ "description": [
+ "Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to subtract from",
+ "Number": "Number: to subtract from the value"
+ }
+ },
+ "mult": {
+ "description": [
+ "Resta el número dado del valor actualmente almacenado en la clave dada. La diferencia luego reemplaza el valor previamente almacenado en el Diccionario."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to multiply",
+ "Amount": "Number: to multiply the value by"
+ }
+ },
+ "div": {
+ "description": [
+ "Divida el número dado con el valor actualmente almacenado en la clave dada. El cociente luego reemplaza el valor previamente almacenado en el Diccionario."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to divide",
+ "Amount": "Number: to divide the value by"
+ }
+ },
+ "minValue": {
+ "description": [
+ "Devuelve el número más bajo actualmente almacenado en el Diccionario."
+ ],
+ "returns": "Number: "
+ },
+ "maxValue": {
+ "description": [
+ "Devuelve el número más alto actualmente almacenado en el Diccionario."
+ ],
+ "returns": "Number: "
+ },
+ "minKey": {
+ "description": [
+ "Devuelve la clave más baja utilizada actualmente en el Diccionario."
+ ],
+ "returns": "Number: "
+ },
+ "maxKey": {
+ "description": [
+ "Devuelve la clave más alta utilizada actualmente en el Diccionario."
+ ],
+ "returns": "Number: "
+ }
+ },
+ "p5.MediaElement": {
+ "description": [
+ "Extiende p5.Element para manejar audio y video. Además de los métodos de p5.Element , también contiene métodos para controlar los medios. No se llama directamente, pero p5.MediaElement s se crea llamando a createVideo , createAudio y createCapture ."
+ ],
+ "params": {
+ "elt": "String: nodo DOM que está envuelto"
+ },
+ "src": {
+ "description": [
+ "Ruta a la fuente del elemento multimedia."
+ ],
+ "returns": "String: src"
+ },
+ "play": {
+ "description": [
+ "Reproduce un elemento multimedia HTML5."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Detiene un elemento multimedia HTML5 (establece la hora actual en cero)"
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pausa un elemento multimedia HTML5."
+ ]
+ },
+ "loop": {
+ "description": [
+ "Establezca 'loop' en verdadero para un elemento multimedia HTML5 y comienza a reproducir."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "Set 'loop' to false for an HTML5 media element. Element will stop when it reaches the end."
+ ]
+ },
+ "autoplay": {
+ "description": [
+ "Establezca 'loop' en falso para un elemento multimedia HTML5. El elemento se detendrá cuando llegue al final."
+ ],
+ "params": {
+ "shouldAutoplay": "Boolean: whether the element should autoplay"
+ }
+ },
+ "volume": {
+ "description": [
+ "Establece el volumen para este elemento multimedia HTML5. Si no se proporciona ningún argumento, devuelve el volumen actual."
+ ],
+ "returns": "Number: current volume",
+ "params": {
+ "val": "Number: volume between 0.0 and 1.0"
+ }
+ },
+ "speed": {
+ "description": [
+ "Si no se dan argumentos, devuelve la velocidad de reproducción actual del elemento. El parámetro de velocidad establece la velocidad donde 2.0 reproducirá el elemento dos veces más rápido, 0.5 reproducirá a la mitad de la velocidad y -1 reproducirá el elemento a velocidad normal en reversa (tenga en cuenta que no todos los navegadores admiten la reproducción hacia atrás e incluso si lo hacen, la reproducción podría no ser fluido.)"
+ ],
+ "returns": "Number: current playback speed of the element",
+ "params": {
+ "speed": "Number: speed multiplier for element playback"
+ }
+ },
+ "time": {
+ "description": [
+ "Si no se dan argumentos, devuelve la hora actual del elemento. Si se proporciona un argumento, la hora actual del elemento se establece a la indicada."
+ ],
+ "returns": "Number: current time (in seconds)",
+ "params": {
+ "time": "Number: time to jump to (in seconds)"
+ }
+ },
+ "duration": {
+ "description": [
+ "Devuelve la duración del elemento multimedia HTML5."
+ ],
+ "returns": "Number: duration"
+ },
+ "onended": {
+ "description": [
+ "Programe un evento para ser llamado cuando el elemento de audio o video llegue al final. Si el elemento está looping, esto no se llamará. El elemento se pasa como argumento para el onended callback."
+ ],
+ "params": {
+ "callback": "Function: function to call when the soundfile has ended. The media element will be passed in as the argument to the callback."
+ }
+ },
+ "connect": {
+ "description": [
+ "Envíe la salida de audio de este elemento a un objeto audioNode o p5.sound especificado. Si no se proporciona ningún elemento, se conecta a la salida maestra de p5. Esa conexión se establece cuando este método se llama por primera vez. Todas las conexiones se eliminan mediante el método .disconnect (). ",
+ "Este método está destinado a ser utilizado con la biblioteca de complementos p5.sound.js."
+ ],
+ "params": {
+ "audioNode": "AudioNode|Object: AudioNode from the Web Audio API, or an object from the p5.sound library"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Desconecta todo el enrutamiento de audio web, incluso a la salida maestra. Esto es útil si desea redirigir la salida a través de efectos de audio, por ejemplo."
+ ]
+ },
+ "showControls": {
+ "description": [
+ "Muestra los controles de MediaElement predeterminados, según lo determine el navegador web."
+ ]
+ },
+ "hideControls": {
+ "description": [
+ "Ocultar los controles predeterminados de mediaElement."
+ ]
+ },
+ "addCue": {
+ "description": [
+ "Programe eventos para que se activen cada vez que un MediaElement (audio / video) llegue a un punto de referencia de reproducción. ",
+ "Acepta una función de devolución de llamada, un tiempo (en segundos) para activar el callback y un parámetro opcional para el callback. ",
+ "El tiempo pasará como primer parámetro a la función de callback, y param será el segundo parámetro."
+ ],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
+ "params": {
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "Eliminar una devolución de llamada en función de su ID. La identificación es devuelta por el método addCue."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "Elimine todos los callbacks que originalmente se habían programado mediante el método addCue."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ }
+ },
+ "p5.File": {
+ "description": [
+ "Base class for a file. Used for Element.drop and createFileInput."
+ ],
+ "params": {
+ "file": "File: File that is wrapped"
+ },
+ "file": {
+ "description": [
+ "Underlying File object. All normal File methods can be called on this."
+ ]
+ },
+ "type": {
+ "description": [
+ "File type (image, text, etc.)"
+ ]
+ },
+ "subtype": {
+ "description": [
+ "File subtype (usually the file extension jpg, png, xml, etc.)"
+ ]
+ },
+ "name": {
+ "description": [
+ "File name"
+ ]
+ },
+ "size": {
+ "description": [
+ "File size"
+ ]
+ },
+ "data": {
+ "description": [
+ "URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML"
+ ]
+ }
+ },
+ "p5.Image": {
+ "description": [
+ "Crea un nuevo p5.Image . Un p5.Image es una representación de una imagen respaldada por un canvas. ",
+ "p5 puede mostrar imágenes .gif, .jpg y .png. Las imágenes pueden mostrarse en espacio 2D y 3D. Antes de usar una imagen, debe cargarse con la función loadImage() . La clase p5.Image contiene campos para el ancho y alto de la imagen, así como una matriz llamada pixels[] que contiene los valores para cada píxel en la imagen. ",
+ "Los métodos descritos a continuación permiten un fácil acceso a los píxeles de la imagen y al canal alfa y simplifican el proceso de composición. ",
+ "Antes de usar la matriz de pixels[] , asegúrese de usar el método loadPixels() en la imagen para asegurarse de que los datos de píxeles estén cargados correctamente."
+ ],
+ "params": {
+ "width": "Número de ancho:",
+ "height": "Número de altura:"
+ },
+ "width": {
+ "description": [
+ "Ancho de la imagen."
+ ]
+ },
+ "height": {
+ "description": [
+ "Altura de imagen."
+ ]
+ },
+ "pixels": {
+ "description": [
+ "Matriz que contiene los valores para todos los píxeles en la ventana de visualización. Estos valores son números. Esta matriz es el tamaño (incluya un factor apropiado para la densidad de píxeles) de la ventana de visualización x4, que representa los valores R, G, B, A en orden para cada píxel, moviéndose de izquierda a derecha a través de cada fila, luego hacia abajo en cada columna. La retina y otras pantallas de alta densidad pueden tener más píxeles (por un factor de densidad de píxeles ^ 2). Por ejemplo, si la imagen es de 100x100 píxeles, habrá 40,000. Con pixelDensity = 2, habrá 160,000. Los primeros cuatro valores (índices 0-3) en la matriz serán los valores R, G, B, A del píxel en (0, 0). Los segundos cuatro valores (índices 4-7) contendrán los valores R, G, B, A del píxel en (1, 0). Más generalmente, para establecer valores para un píxel en (x, y): let d = pixelDensity(); for (let i = 0; i < d; i++) { for (let j = 0; j < d; j++) { // loop over index = 4 * ((y * d + j) * width * d + (x * d + i)); pixels[index] = r; pixels[index+1] = g; pixels[index+2] = b; pixels[index+3] = a; } } ",
+ "Antes de acceder a esta matriz, los datos deben cargarse con la función loadPixels() . Después de que se hayan modificado los datos de la matriz, se debe ejecutar la función updatePixels() para actualizar los cambios."
+ ]
+ },
+ "loadPixels": {
+ "description": [
+ "Carga los datos de píxeles para esta imagen en el atributo [píxeles]."
+ ]
+ },
+ "updatePixels": {
+ "description": [
+ "Actualiza el canvas de respaldo para esta imagen con el contenido de la matriz [píxeles]. ",
+ "Si esta imagen es un GIF animado, los píxeles se actualizarán en el cuadro que se muestra actualmente"
+ ],
+ "params": {
+ "x": "Integer: x-offset of the target update area for the underlying canvas",
+ "y": "Integer: y-offset of the target update area for the underlying canvas",
+ "w": "Integer: height of the target update area for the underlying canvas",
+ "h": "Integer: height of the target update area for the underlying canvas"
+ }
+ },
+ "get": {
+ "description": [
+ "Obtiene una región de píxeles de una imagen. ",
+ "Si no se pasan parámetros, se devuelve toda la imagen. Si x e y son los únicos parámetros pasados, se extrae un solo píxel. Si se pasan todos los parámetros, se extrae una región rectangular y se devuelve un p5.Image ."
+ ],
+ "returns": "p5.Image: the rectangle p5.Image ",
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "w": "Number: width",
+ "h": "Number: height"
+ }
+ },
+ "set": {
+ "description": [
+ "Establece el color de un solo píxel o escribe una imagen en este p5.Image . ",
+ "Tenga en cuenta que para una gran cantidad de píxeles esto será más lento que manipular directamente la matriz de píxeles y luego llamar a updatePixels() ."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "a": "Number|Number[]|Object: grayscale value | pixel array | a p5.Color | image to copy"
+ }
+ },
+ "resize": {
+ "description": [
+ "Cambiar el tamaño de la imagen a un nuevo ancho y alto. Para hacer que la imagen escale proporcionalmente, use 0 como valor para el parámetro ancho o alto. Por ejemplo, para hacer que el ancho de una imagen sea de 150 píxeles y cambiar la altura con la misma proporción, use cambiar el tamaño (150, 0)."
+ ],
+ "params": {
+ "width": "Number: the resized image width",
+ "height": "Number: the resized image height"
+ }
+ },
+ "copy": {
+ "description": [
+ "Copia una región de píxeles de una imagen a otra. Si no se especifica srcImage, se usa como fuente. Si las regiones de origen y destino no son del mismo tamaño, automáticamente redimensionará los píxeles de origen para que se ajusten a la región de destino especificada."
+ ],
+ "params": {
+ "srcImage": "p5.Image|p5.Element: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height"
+ }
+ },
+ "mask": {
+ "description": [
+ "Enmascara parte de una imagen para que no se muestre cargando otra imagen y usando su canal alfa como canal alfa para esta imagen."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image"
+ }
+ },
+ "filter": {
+ "description": [
+ "Aplica un filtro de imagen a un p5.Image "
+ ],
+ "params": {
+ "filterType": "Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter",
+ "filterParam": "Number: (Optional) an optional parameter unique to each filter, see above"
+ }
+ },
+ "blend": {
+ "description": [
+ "Copia una región de píxeles de una imagen a otra, utilizando un modo de blend específico para realizar la operación."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height",
+ "blendMode": "Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/ "
+ }
+ },
+ "save": {
+ "description": [
+ "Guarda la imagen en un archivo y obliga al navegador a descargarla. Acepta dos cadenas para nombre de archivo y extensión de archivo Admite png (predeterminado), jpg y gif Tenga en cuenta que el archivo solo se descargará como un GIF animado si la p5.Image se cargó desde un archivo GIF."
+ ],
+ "params": {
+ "filename": "String: give your file a name",
+ "extension": "String: 'png' or 'jpg'"
+ }
+ },
+ "reset": {
+ "description": [
+ "Inicia un GIF animado en el estado inicial."
+ ]
+ },
+ "getCurrentFrame": {
+ "description": [
+ "Obtiene el índice del marco que está visible actualmente en un GIF animado."
+ ],
+ "returns": "Number: The index for the currently displaying frame in animated GIF"
+ },
+ "setFrame": {
+ "description": [
+ "Establece el índice del marco que está visible actualmente en un GIF animado"
+ ],
+ "params": {
+ "index": "Number: the index for the frame that should be displayed"
+ }
+ },
+ "numFrames": {
+ "description": [
+ "Devuelve el número de fotogramas en un GIF animado"
+ ],
+ "returns": "Number: "
+ },
+ "play": {
+ "description": [
+ "Reproduce un GIF animado que se detuvo con pause() "
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pausa un GIF animado."
+ ]
+ },
+ "delay": {
+ "description": [
+ "Cambia el retraso entre fotogramas en un GIF animado. Hay un segundo parámetro opcional que indica un índice para una trama específica que debería tener su retraso modificado. Si no se proporciona ningún índice, todos los cuadros tendrán el nuevo retraso."
+ ],
+ "params": {
+ "d": "Number: the amount in milliseconds to delay between switching frames",
+ "index": "Number: (Optional) the index of the frame that should have the new delay value {optional}"
+ }
+ }
+ },
+ "p5.PrintWriter": {
+ "params": {
+ "filename": "String",
+ "extension": "String (Optional)"
+ },
+ "write": {
+ "description": [
+ "Writes data to the PrintWriter stream"
+ ],
+ "params": {
+ "data": "Array: all data to be written by the PrintWriter"
+ }
+ },
+ "print": {
+ "description": [
+ "Writes data to the PrintWriter stream, and adds a new line at the end"
+ ],
+ "params": {
+ "data": "Array: all data to be printed by the PrintWriter"
+ }
+ },
+ "clear": {
+ "description": [
+ "Clears the data already written to the PrintWriter object"
+ ]
+ },
+ "close": {
+ "description": [
+ "Closes the PrintWriter"
+ ]
+ }
+ },
+ "p5.Table": {
+ "description": [
+ "Los objetos Table almacenan datos con múltiples filas y columnas, tal como una hoja de cálculo tradicional. Los objetos Table pueden ser generados desde cero, dinámicamente, o usando datos desde un archivo existente."
+ ],
+ "params": {
+ "rows": "Arreglo: un arreglo de objetos p5.TableRow"
+ },
+ "columns": {
+ "description": [
+ "Una matriz que contiene los nombres de las columnas en la tabla, si el \"header\" la tabla se carga con el parámetro \"header\"."
+ ]
+ },
+ "rows": {
+ "description": [
+ "Una matriz que contiene los objetos p5.TableRow que forman las filas de la tabla. El mismo resultado que llamar getRows() "
+ ]
+ },
+ "addRow": {
+ "description": [
+ "Use addRow() para agregar una nueva fila de datos a un objeto p5.Table . Por defecto, se crea una fila vacía. Por lo general, almacenaría una referencia a la nueva fila en un objeto TableRow (consulte newRow en el ejemplo anterior) y luego establecería valores individuales usando set() . ",
+ "Si se incluye un objeto p5.TableRow como parámetro, entonces esa fila se duplica y se agrega a la tabla."
+ ],
+ "returns": "p5.TableRow: the row that was added",
+ "params": {
+ "row": "p5.TableRow: (Optional) row to be added to the table"
+ }
+ },
+ "removeRow": {
+ "description": [
+ "Elimina una fila del objeto de tabla."
+ ],
+ "params": {
+ "id": "Integer: ID number of the row to remove"
+ }
+ },
+ "getRow": {
+ "description": [
+ "Devuelve una referencia al p5.TableRow especificado. La referencia se puede utilizar para obtener y establecer valores de la fila seleccionada."
+ ],
+ "returns": "p5.TableRow: p5.TableRow object",
+ "params": {
+ "rowID": "Integer: ID number of the row to get"
+ }
+ },
+ "getRows": {
+ "description": [
+ "Obtiene todas las filas de la tabla. Devuelve una matriz de p5.TableRow s."
+ ],
+ "returns": "p5.TableRow[]: Array of p5.TableRow s"
+ },
+ "findRow": {
+ "description": [
+ "Encuentra la primera fila de la tabla que contiene el valor proporcionado y devuelve una referencia a esa fila. Incluso si varias filas son posibles coincidencias, solo se devuelve la primera fila coincidente. La columna a buscar puede especificarse por su ID o título."
+ ],
+ "returns": "p5.TableRow: ",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "findRows": {
+ "description": [
+ "Encuentra las filas en la tabla que contienen el valor proporcionado y devuelve referencias a esas filas. Devuelve una matriz, por lo que debe usarse para recorrer en iteración todas las filas, como se muestra en el ejemplo anterior. La columna a buscar puede especificarse por su ID o título."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "matchRow": {
+ "description": [
+ "Encuentra la primera fila de la tabla que coincide con la expresión regular proporcionada y devuelve una referencia a esa fila. Incluso si varias filas son posibles coincidencias, solo se devuelve la primera fila coincidente. La columna a buscar puede especificarse por su ID o título."
+ ],
+ "returns": "p5.TableRow: TableRow object",
+ "params": {
+ "regexp": "String|RegExp: The regular expression to match",
+ "column": "String|Integer: The column ID (number) or title (string)"
+ }
+ },
+ "matchRows": {
+ "description": [
+ "Encuentra las filas en la tabla que coinciden con la expresión regular proporcionada y devuelve referencias a esas filas. Devuelve una matriz, por lo que debe usarse para recorrer en iteración todas las filas, como se muestra en el ejemplo. La columna a buscar puede especificarse por su ID o título."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "regexp": "String: The regular expression to match",
+ "column": "String|Integer: (Optional) The column ID (number) or title (string)"
+ }
+ },
+ "getColumn": {
+ "description": [
+ "Recupera todos los valores en la columna especificada y los devuelve como una matriz. La columna se puede especificar por su ID o título."
+ ],
+ "returns": "Array: Array of column values",
+ "params": {
+ "column": "String|Number: String or Number of the column to return"
+ }
+ },
+ "clearRows": {
+ "description": [
+ "Elimina todas las filas de una tabla. Mientras se eliminan todas las filas, se mantienen las columnas y los títulos de las columnas."
+ ]
+ },
+ "addColumn": {
+ "description": [
+ "Use addColumn() para agregar una nueva columna a un objeto Table . Por lo general, querrá especificar un título, por lo que la columna puede ser referenciada fácilmente más tarde por su nombre. (Si no se especifica ningún título, el título de la nueva columna será nulo)."
+ ],
+ "params": {
+ "title": "String: (Optional) title of the given column"
+ }
+ },
+ "getColumnCount": {
+ "description": [
+ "Devuelve el número total de columnas en una tabla."
+ ],
+ "returns": "Integer: Number of columns in this table"
+ },
+ "getRowCount": {
+ "description": [
+ "Devuelve el número total de filas en una tabla."
+ ],
+ "returns": "Integer: Number of rows in this table"
+ },
+ "removeTokens": {
+ "description": [
+ "Elimina cualquiera de los caracteres especificados (o \"tokens\"). ",
+ "Si no se especifica ninguna columna, se procesan los valores en todas las columnas y filas. Se puede hacer referencia a una columna específica por su ID o título."
+ ],
+ "params": {
+ "chars": "String: String listing characters to be removed",
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "trim": {
+ "description": [
+ "Recorta los espacios en blanco iniciales y finales, como los espacios y las pestañas, a partir de los valores de la tabla de cadenas. Si no se especifica ninguna columna, los valores en todas las columnas y filas se recortan. Se puede hacer referencia a una columna específica por su ID o título."
+ ],
+ "params": {
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "removeColumn": {
+ "description": [
+ "Use removeColumn() para eliminar una columna existente de un objeto Table. La columna que se eliminará puede identificarse por su título (una Cadena) o su valor de índice (un int). removeColumn (0) eliminaría la primera columna, removeColumn (1) eliminaría la segunda columna, y así sucesivamente."
+ ],
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "set": {
+ "description": [
+ "Almacena un valor en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String|Number: value to assign"
+ }
+ },
+ "setNum": {
+ "description": [
+ "Almacena un valor flotante en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "Number: value to assign"
+ }
+ },
+ "setString": {
+ "description": [
+ "Almacena un valor de cadena en la fila y columna especificadas de la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String: value to assign"
+ }
+ },
+ "get": {
+ "description": [
+ "Recupera un valor de la fila y columna especificadas en la Tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Recupera un valor flotante de la fila y columna especificadas en la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "Recupera un valor de cadena de la fila y columna especificadas en la tabla. La fila se especifica por su ID, mientras que la columna se puede especificar por su ID o título."
+ ],
+ "returns": "String: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getObject": {
+ "description": [
+ "Recupera todos los datos de la tabla y los devuelve como un objeto. Si se pasa un nombre de columna, cada objeto de fila se almacenará con ese atributo como título."
+ ],
+ "returns": "Object: ",
+ "params": {
+ "headerColumn": "String: (Optional) Name of the column which should be used to title each row object (optional)"
+ }
+ },
+ "getArray": {
+ "description": [
+ "Recupera todos los datos de la tabla y los devuelve como una matriz multidimensional."
+ ],
+ "returns": "Array: "
+ }
+ },
+ "p5.TableRow": {
+ "description": [
+ "Un objeto TableRow representa una única fila de datos, grabados en columnas, de una tabla. Un objeto TableRow contiene tanto un arreglo ordenado, como un objeto JSON desordenado.",
+ ""
+ ],
+ "params": {
+ "str": "String: opcional, puebla la fila con una serie de valores, separados por el separador",
+ "separator": "String: por defecto, valores separados por coma (csv)"
+ },
+ "set": {
+ "description": [
+ "Stores a value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number: The value to be stored"
+ }
+ },
+ "setNum": {
+ "description": [
+ "Stores a Float value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "Number|String: The value to be stored as a Float"
+ }
+ },
+ "setString": {
+ "description": [
+ "Stores a String value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number|Boolean|Object: The value to be stored as a String"
+ }
+ },
+ "get": {
+ "description": [
+ "Retrieves a value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Retrieves a Float value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "Number: Float Floating point number",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "Retrieves an String value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "String: String",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ }
+ },
+ "p5.XML": {
+ "description": [
+ "XML es una representación de un objeto XML, capaz de procesar código XML. Usa loadXML() para cargar archivos externos XML y crear objetos XML"
+ ],
+ "getParent": {
+ "description": [
+ "Gets a copy of the element's parent. Returns the parent as another p5.XML object."
+ ],
+ "returns": "p5.XML: element parent"
+ },
+ "getName": {
+ "description": [
+ "Gets the element's full name, which is returned as a String."
+ ],
+ "returns": "String: the name of the node"
+ },
+ "setName": {
+ "description": [
+ "Sets the element's name, which is specified as a String."
+ ],
+ "params": {
+ "the": "String: new name of the node"
+ }
+ },
+ "hasChildren": {
+ "description": [
+ "Checks whether or not the element has any children, and returns the result as a boolean."
+ ],
+ "returns": "Boolean: "
+ },
+ "listChildren": {
+ "description": [
+ "Get the names of all of the element's children, and returns the names as an array of Strings. This is the same as looping through and calling getName() on each child element individually."
+ ],
+ "returns": "String[]: names of the children of the element"
+ },
+ "getChildren": {
+ "description": [
+ "Returns all of the element's children as an array of p5.XML objects. When the name parameter is specified, then it will return all children that match that name."
+ ],
+ "returns": "p5.XML[]: children of the element",
+ "params": {
+ "name": "String: (Optional) element name"
+ }
+ },
+ "getChild": {
+ "description": [
+ "Returns the first of the element's children that matches the name parameter or the child of the given index.It returns undefined if no matching child is found."
+ ],
+ "returns": "p5.XML: ",
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "addChild": {
+ "description": [
+ "Appends a new child to the element. The child can be specified with either a String, which will be used as the new tag's name, or as a reference to an existing p5.XML object. A reference to the newly created child is returned as an p5.XML object."
+ ],
+ "params": {
+ "node": "p5.XML: a p5.XML Object which will be the child to be added"
+ }
+ },
+ "removeChild": {
+ "description": [
+ "Removes the element specified by name or index."
+ ],
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "getAttributeCount": {
+ "description": [
+ "Counts the specified element's number of attributes, returned as an Number."
+ ],
+ "returns": "Integer: "
+ },
+ "listAttributes": {
+ "description": [
+ "Gets all of the specified element's attributes, and returns them as an array of Strings."
+ ],
+ "returns": "String[]: an array of strings containing the names of attributes"
+ },
+ "hasAttribute": {
+ "description": [
+ "Checks whether or not an element has the specified attribute."
+ ],
+ "returns": "Boolean: true if attribute found else false",
+ "params": {
+ "the": "String: attribute to be checked"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Returns an attribute value of the element as an Number. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, the value 0 is returned."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "getString": {
+ "description": [
+ "Returns an attribute value of the element as an String. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, null is returned."
+ ],
+ "returns": "String: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "setAttribute": {
+ "description": [
+ "Sets the content of an element's attribute. The first parameter specifies the attribute name, while the second specifies the new content."
+ ],
+ "params": {
+ "name": "String: the full name of the attribute",
+ "value": "Number|String|Boolean: the value of the attribute"
+ }
+ },
+ "getContent": {
+ "description": [
+ "Returns the content of an element. If there is no such content, defaultValue is returned if specified, otherwise null is returned."
+ ],
+ "returns": "String: ",
+ "params": {
+ "defaultValue": "String: (Optional) value returned if no content is found"
+ }
+ },
+ "setContent": {
+ "description": [
+ "Sets the element's content."
+ ],
+ "params": {
+ "text": "String: the new content"
+ }
+ },
+ "serialize": {
+ "description": [
+ "Serializes the element into a string. This function is useful for preparing the content to be sent over a http request or saved to file."
+ ],
+ "returns": "String: Serialized string of the element"
+ }
+ },
+ "p5.Vector": {
+ "description": [
+ "Una clase para describir un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. El tipo de datos, sin embargo, graba los componentes del vector (x, y para 2D y x,y,z para 3D). La magnitud y la dirección pueden ser calculados con los métodos mag() y heading(). En muchos de los ejemplos de p5.js, verás que p5.Vector es usado para describir una posición, velocidad o aceleración. Por ejemplo, si consideras un rectángulo moviéndose a lo largo de la pantalla, en cada instante tiene una posición (un vector que apunta desde el origen hasta su ubicación), una velocidad(la tasa a la que la posición del objeto cambia por unidad de tiempo, expresada como vector), y aceleración (la tasa a la que la velocidad del objeto cambia por unidad de tiempo, expresada como vector). Como los vectores representan grupos de valores, no podemos simplemente usar las operaciones tradicionales de adición, multiplicación, etc. En vez de eso, necesitaremos hacer matemática de vectores, lo que es simplificado con los métodos dentro de la clase p5.Vector.",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "Número: componente x del vector",
+ "y": "Número: componente y del vector",
+ "z": "Número: componente z del vector"
+ },
+ "x": {
+ "description": [
+ "The x component of the vector"
+ ]
+ },
+ "y": {
+ "description": [
+ "The y component of the vector"
+ ]
+ },
+ "z": {
+ "description": [
+ "The z component of the vector"
+ ]
+ },
+ "set": {
+ "description": [
+ "Sets the x, y, and z component of the vector using two or three separate variables, the data from a p5.Vector , or the values from a float array."
+ ],
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Number[]: the vector to set"
+ }
+ },
+ "copy": {
+ "description": [
+ "Gets a copy of the vector, returns a p5.Vector object."
+ ],
+ "returns": "p5.Vector: the copy of the p5.Vector object"
+ },
+ "add": {
+ "description": [
+ "Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a p5.Vector , the others acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to be added",
+ "y": "Number: (Optional) the y component of the vector to be added",
+ "z": "Number: (Optional) the z component of the vector to be added",
+ "value": "p5.Vector|Number[]: the vector to add",
+ "v1": "p5.Vector: a p5.Vector to add",
+ "v2": "p5.Vector: a p5.Vector to add",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "rem": {
+ "description": [
+ "Gives remainder of a vector when it is divided by another vector. See examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of divisor vector",
+ "y": "Number: the y component of divisor vector",
+ "z": "Number: the z component of divisor vector",
+ "value": "p5.Vector | Number[]: divisor vector",
+ "v1": "p5.Vector: dividend p5.Vector ",
+ "v2": "p5.Vector: divisor p5.Vector "
+ }
+ },
+ "sub": {
+ "description": [
+ "Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a p5.Vector , the other acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to subtract",
+ "y": "Number: (Optional) the y component of the vector to subtract",
+ "z": "Number: (Optional) the z component of the vector to subtract",
+ "value": "p5.Vector|Number[]: the vector to subtract",
+ "v1": "p5.Vector: a p5.Vector to subtract from",
+ "v2": "p5.Vector: a p5.Vector to subtract",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y, and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector, the x, y, z components of both vectors are multiplied by each other (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "n": "Number: The number to multiply with the vector",
+ "x": "Number: The number to multiply with the x component of the vector",
+ "y": "Number: The number to multiply with the y component of the vector",
+ "z": "Number: (Optional) The number to multiply with the z component of the vector",
+ "arr": "Number[]: The array to multiply with the components of the vector",
+ "v": "p5.Vector: The vector to multiply with the components of the original vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "div": {
+ "description": [
+ "Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and z components of two vectors against each other. When dividing a vector by a scalar, the x, y, and z components of the vector are all divided by the scalar. When dividing a vector by a vector, the x, y, z components of the source vector are treated as the dividend, and the x, y, z components of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "n": "Number: The number to divide the vector by",
+ "x": "Number: The number to divide with the x component of the vector",
+ "y": "Number: The number to divide with the y component of the vector",
+ "z": "Number: (Optional) The number to divide with the z component of the vector",
+ "arr": "Number[]: The array to divide the components of the vector by",
+ "v": "p5.Vector: The vector to divide the components of the original vector by",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "mag": {
+ "description": [
+ "Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).)"
+ ],
+ "returns": "Number: magnitude of the vector",
+ "params": {
+ "vecT": "p5.Vector: the vector to return the magnitude of"
+ }
+ },
+ "magSq": {
+ "description": [
+ "Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z) .) Faster if the real length is not required in the case of comparing vectors, etc."
+ ],
+ "returns": "Number: squared magnitude of the vector"
+ },
+ "dot": {
+ "description": [
+ "Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context."
+ ],
+ "returns": "Number: the dot product",
+ "params": {
+ "x": "Number: x component of the vector",
+ "y": "Number: (Optional) y component of the vector",
+ "z": "Number: (Optional) z component of the vector",
+ "value": "p5.Vector: value component of the vector or a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "cross": {
+ "description": [
+ "Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new p5.Vector . See the examples for more context."
+ ],
+ "returns": "p5.Vector: p5.Vector composed of cross product",
+ "params": {
+ "v": "p5.Vector: p5.Vector to be crossed",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "dist": {
+ "description": [
+ "Calculates the Euclidean distance between two points (considering a point as a vector object)."
+ ],
+ "returns": "Number: the distance",
+ "params": {
+ "v": "p5.Vector: the x, y, and z coordinates of a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "normalize": {
+ "description": [
+ "Normalize the vector to length 1 (make it a unit vector)."
+ ],
+ "returns": "p5.Vector: normalized p5.Vector "
+ },
+ "limit": {
+ "description": [
+ "Limit the magnitude of this vector to the value used for the max parameter."
+ ],
+ "params": {
+ "max": "Number: the maximum magnitude for the vector"
+ }
+ },
+ "setMag": {
+ "description": [
+ "Set the magnitude of this vector to the value used for the len parameter."
+ ],
+ "params": {
+ "len": "Number: the new length for this vector"
+ }
+ },
+ "heading": {
+ "description": [
+ "Calculate the angle of rotation for this vector(only 2D vectors). p5.Vectors created using createVector() will take the current angleMode into consideration, and give the angle in radians or degree accordingly."
+ ],
+ "returns": "Number: the angle of rotation"
+ },
+ "rotate": {
+ "description": [
+ "Rotate the vector by an angle (only 2D vectors), magnitude remains the same"
+ ],
+ "params": {
+ "angle": "Number: the angle of rotation"
+ }
+ },
+ "angleBetween": {
+ "description": [
+ "Calculates and returns the angle (in radians) between two vectors."
+ ],
+ "returns": "Number: the angle between (in radians)",
+ "params": {
+ "value": "p5.Vector: the x, y, and z components of a p5.Vector "
+ }
+ },
+ "lerp": {
+ "description": [
+ "Linear interpolate the vector to another vector"
+ ],
+ "params": {
+ "x": "Number: the x component",
+ "y": "Number: the y component",
+ "z": "Number: the z component",
+ "amt": "Number: the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between.",
+ "v": "p5.Vector: the p5.Vector to lerp to",
+ "v1": "p5.Vector",
+ "v2": "p5.Vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "reflect": {
+ "description": [
+ "Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D This method acts on the vector directly"
+ ],
+ "params": {
+ "surfaceNormal": "p5.Vector: the p5.Vector to reflect about, will be normalized by this method"
+ }
+ },
+ "array": {
+ "description": [
+ "Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the p5.Vector.copy() method to copy into your own array."
+ ],
+ "returns": "Number[]: an Array with the 3 values"
+ },
+ "equals": {
+ "description": [
+ "Equality check against a p5.Vector "
+ ],
+ "returns": "Boolean: whether the vectors are equals",
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Array: the vector to compare"
+ }
+ },
+ "fromAngle": {
+ "description": [
+ "Make a new 2D vector from an angle"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "angle": "Number: the desired angle, in radians (unaffected by angleMode )",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "fromAngles": {
+ "description": [
+ "Make a new 3D vector from a pair of ISO spherical angles"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "theta": "Number: the polar angle, in radians (zero is up)",
+ "phi": "Number: the azimuthal angle, in radians (zero is out of the screen)",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "random2D": {
+ "description": [
+ "Make a new 2D unit vector from a random angle"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ },
+ "random3D": {
+ "description": [
+ "Make a new random 3D unit vector."
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ }
+ },
+ "p5.Font": {
+ "description": [
+ "Clase base para manipulación de tipografía"
+ ],
+ "params": {
+ "pInst": "Objeto: puntero a la instancia p5"
+ },
+ "font": {
+ "description": [
+ "Underlying opentype font implementation"
+ ]
+ },
+ "textBounds": {
+ "description": [
+ "Returns a tight bounding box for the given text string using this font"
+ ],
+ "returns": "Object: a rectangle object with properties: x, y, w, h",
+ "params": {
+ "line": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: (Optional) font size to use (optional) Default is 12.",
+ "options": "Object: (Optional) opentype options (optional) opentype fonts contains alignment and baseline options. Default is 'LEFT' and 'alphabetic'"
+ }
+ },
+ "textToPoints": {
+ "description": [
+ "Computes an array of points following the path for specified text"
+ ],
+ "returns": "Array: an array of points, each with x, y, alpha (the path angle)",
+ "params": {
+ "txt": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: font size to use (optional)",
+ "options": "Object: (Optional) an (optional) object that can contain: sampleFactor - the ratio of path-length to number of samples (default=.1); higher values yield more points and are therefore more precise simplifyThreshold - if set to a non-zero value, collinear points will be be removed from the polygon; the value represents the threshold angle to use when determining whether two edges are collinear"
+ }
+ }
+ },
+ "p5.Camera": {
+ "description": [
+ "This class describes a camera for use in p5's WebGL mode . It contains camera position, orientation, and projection information necessary for rendering a 3D scene. ",
+ "New p5.Camera objects can be made through the createCamera() function and controlled through the methods described below. A camera created in this way will use a default position in the scene and a default perspective projection until these properties are changed through the various methods available. It is possible to create multiple cameras, in which case the current camera can be set through the setCamera() method. ",
+ "Note: The methods below operate in two coordinate systems: the 'world' coordinate system describe positions in terms of their relationship to the origin along the X, Y and Z axes whereas the camera's 'local' coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. The move() method, for instance, moves the camera along its own axes, whereas the setPosition() method sets the camera's position in world-space."
+ ],
+ "params": {
+ "rendererGL": "RendererGL: instance of WebGL renderer"
+ },
+ "perspective": {
+ "description": [
+ "Sets a perspective projection for a p5.Camera object and sets parameters for that projection according to perspective() syntax."
+ ]
+ },
+ "ortho": {
+ "description": [
+ "Sets an orthographic projection for a p5.Camera object and sets parameters for that projection according to ortho() syntax."
+ ]
+ },
+ "frustum": {},
+ "pan": {
+ "description": [
+ "Panning rotates the camera view to the left and right."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "tilt": {
+ "description": [
+ "Tilting rotates the camera view up and down."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "lookAt": {
+ "description": [
+ "Reorients the camera to look at a position in world space."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ },
+ "camera": {
+ "description": [
+ "Sets a camera's position and orientation. This is equivalent to calling camera() on a p5.Camera object."
+ ]
+ },
+ "move": {
+ "description": [
+ "Move camera along its local axes while maintaining current camera orientation."
+ ],
+ "params": {
+ "x": "Number: amount to move along camera's left-right axis",
+ "y": "Number: amount to move along camera's up-down axis",
+ "z": "Number: amount to move along camera's forward-backward axis"
+ }
+ },
+ "setPosition": {
+ "description": [
+ "Set camera position in world-space while maintaining current camera orientation."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ }
+ },
+ "p5.Geometry": {
+ "description": [
+ "p5 Geometry class"
+ ],
+ "params": {
+ "detailX": "Integer: (Optional) number of vertices on horizontal surface",
+ "detailY": "Integer: (Optional) number of vertices on horizontal surface",
+ "callback": "Function: (Optional) function to call upon object instantiation."
+ },
+ "computeFaces": {
+ "description": [
+ "computes faces for geometry objects based on the vertices."
+ ]
+ },
+ "computeNormals": {
+ "description": [
+ "computes smooth normals per vertex as an average of each face."
+ ]
+ },
+ "averageNormals": {
+ "description": [
+ "Averages the vertex normals. Used in curved surfaces"
+ ]
+ },
+ "averagePoleNormals": {
+ "description": [
+ "Averages pole normals. Used in spherical primitives"
+ ]
+ },
+ "normalize": {
+ "description": [
+ "Modifies all vertices to be centered within the range -100 to 100."
+ ]
+ }
+ },
+ "p5.Shader": {
+ "description": [
+ "Clase Shader para el modo WEBGL"
+ ],
+ "params": {
+ "renderer": "p5.RendererGL: una instancia de p5.RendererGL que servirá de contexto GL para este nuevo p5.Shader",
+ "vertSrc": "String: código fuente para el vertex shader (en forma de string)",
+ "fragSrc": "String: código fuente para el fragment shader (en forma de string)"
+ },
+ "setUniform": {
+ "description": [
+ "Wrapper de las funciones gl.uniform. Como almacenamos información de uniform en el shader, la podemos usar para revisar los datos provistos y llamar a la función apropiada."
+ ],
+ "params": {
+ "uniformName": "String: the name of the uniform in the shader program",
+ "data": "Object|Number|Boolean|Number[]: the data to be associated with that uniform; type varies (could be a single numerical value, array, matrix, or texture / sampler reference)"
+ }
+ }
+ },
+ "p5.sound": {
+ "getMasterVolume": {
+ "description": [
+ "Returns a number representing the master amplitude (volume) for sound in this sketch."
+ ],
+ "returns": "Number: Master amplitude (volume) for sound in this sketch. Should be between 0.0 (silence) and 1.0."
+ },
+ "masterVolume": {
+ "description": [
+ "Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal. ",
+ "How This Works : When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module. ",
+ "If no value is provided, returns a Web Audio API Gain Node"
+ ],
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
+ },
+ "soundOut": {
+ "description": [
+ "p5.soundOut is the p5.sound master output. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output."
+ ]
+ }
+ },
+ "p5.Effect": {
+ "description": [
+ "Effect is a base class for audio effects in p5. This module handles the nodes and methods that are common and useful for current and future effects. ",
+ "This class is extended by p5.Distortion , p5.Compressor , p5.Delay , p5.Filter , p5.Reverb ."
+ ],
+ "params": {
+ "ac": "Object: (Optional) Reference to the audio context of the p5 object",
+ "input": "AudioNode: (Optional) Gain Node effect wrapper",
+ "output": "AudioNode: (Optional) Gain Node effect wrapper",
+ "_drywet": "Object: (Optional) Tone.JS CrossFade node (defaults to value: 1)",
+ "wet": "AudioNode: (Optional) Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly."
+ },
+ "amp": {
+ "description": [
+ "Set the output volume of the filter."
+ ],
+ "params": {
+ "vol": "Number: (Optional) amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts until rampTime",
+ "tFromNow": "Number: (Optional) schedule this event to happen in tFromNow seconds"
+ }
+ },
+ "chain": {
+ "description": [
+ "Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments"
+ ],
+ "params": {
+ "arguments": "Object: (Optional) Chain together multiple sound objects"
+ }
+ },
+ "drywet": {
+ "description": [
+ "Adjust the dry/wet value."
+ ],
+ "params": {
+ "fade": "Number: (Optional) The desired drywet value (0 - 1.0)"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Filter": {
+ "description": [
+ "A p5.Filter uses a Web Audio Biquad Filter to filter the frequency response of an input source. Subclasses include: p5.LowPass : Allows frequencies below the cutoff frequency to pass through, and attenuates frequencies above the cutoff. p5.HighPass : The opposite of a lowpass filter. p5.BandPass : Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. ",
+ "The .res() method controls either width of the bandpass, or resonance of the low/highpass cutoff frequency. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "params": {
+ "type": "String: (Optional) 'lowpass' (default), 'highpass', 'bandpass'"
+ },
+ "biquadFilter": {
+ "description": [
+ "The p5.Filter is built with a Web Audio BiquadFilter Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Filter an audio signal according to a set of filter parameters."
+ ],
+ "params": {
+ "Signal": "Object: An object that outputs audio",
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance/Width of the filter frequency from 0.001 to 1000"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the frequency and the resonance of the filter."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance (Q) from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set the filter frequency, in Hz, from 10 to 22050 (the range of human hearing, although in reality most people hear in a narrower range)."
+ ],
+ "returns": "Number: value Returns the current frequency value",
+ "params": {
+ "freq": "Number: Filter Frequency",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "res": {
+ "description": [
+ "Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency."
+ ],
+ "returns": "Number: value Returns the current res value",
+ "params": {
+ "res": "Number: Resonance/Width of filter freq from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "gain": {
+ "description": [
+ "Controls the gain attribute of a Biquad Filter. This is distinctly different from .amp() which is inherited from p5.Effect .amp() controls the volume via the output gain node p5.Filter.gain() controls the gain parameter of a Biquad Filter node."
+ ],
+ "returns": "Number: Returns the current or updated gain value",
+ "params": {
+ "gain": "Number"
+ }
+ },
+ "toggle": {
+ "description": [
+ "Toggle function. Switches between the specified type and allpass"
+ ],
+ "returns": "Boolean: [Toggle value]"
+ },
+ "setType": {
+ "description": [
+ "Set the type of a p5.Filter. Possible types include: \"lowpass\" (default), \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"peaking\", \"notch\", \"allpass\"."
+ ],
+ "params": {
+ "t": "String"
+ }
+ }
+ },
+ "p5.LowPass": {
+ "description": [
+ "Constructor: new p5.LowPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('lowpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.HighPass": {
+ "description": [
+ "Constructor: new p5.HighPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('highpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.BandPass": {
+ "description": [
+ "Constructor: new p5.BandPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('bandpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.Oscillator": {
+ "description": [
+ "Creates a signal that oscillates between -1.0 and 1.0. By default, the oscillation takes the form of a sinusoidal shape ('sine'). Additional types include 'triangle', 'sawtooth' and 'square'. The frequency defaults to 440 oscillations per second (440Hz, equal to the pitch of an 'A' note). ",
+ "Set the type of oscillation with setType(), or by instantiating a specific oscillator: p5.SinOsc , p5.TriOsc , p5.SqrOsc , or p5.SawOsc . "
+ ],
+ "params": {
+ "freq": "Number: (Optional) frequency defaults to 440Hz",
+ "type": "String: (Optional) type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square'"
+ },
+ "start": {
+ "description": [
+ "Start an oscillator. ",
+ "Starting an oscillator on a user gesture will enable audio in browsers that have a strict autoplay policy, including Chrome and most mobile devices. See also: userStartAudio()."
+ ],
+ "params": {
+ "time": "Number: (Optional) startTime in seconds from now.",
+ "frequency": "Number: (Optional) frequency in Hz."
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops."
+ ],
+ "params": {
+ "secondsFromNow": "Number: Time, in seconds from now."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal."
+ ],
+ "returns": "AudioParam: gain If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's gain/amplitude/volume)",
+ "params": {
+ "vol": "Number|Object: between 0 and 1.0 or a modulating signal/oscillator",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set frequency of an oscillator to a value. Or, pass in an object such as an oscillator to modulate the frequency with an audio signal."
+ ],
+ "returns": "AudioParam: Frequency If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's frequency",
+ "params": {
+ "Frequency": "Number|Object: Frequency in Hz or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Ramp time (in seconds)",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at x seconds from now"
+ }
+ },
+ "setType": {
+ "description": [
+ "Set type to 'sine', 'triangle', 'sawtooth' or 'square'."
+ ],
+ "params": {
+ "type": "String: 'sine', 'triangle', 'sawtooth' or 'square'."
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "pan": {
+ "description": [
+ "Pan between Left (-1) and Right (1)"
+ ],
+ "params": {
+ "panning": "Number: Number between -1 and 1",
+ "timeFromNow": "Number: schedule this event to happen seconds from now"
+ }
+ },
+ "phase": {
+ "description": [
+ "Set the phase of an oscillator between 0.0 and 1.0. In this implementation, phase is a delay time based on the oscillator's current frequency."
+ ],
+ "params": {
+ "phase": "Number: float between 0.0 and 1.0"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "number": "Number: Constant number to add"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the p5.Oscillator's output amplitude by a fixed value (i.e. turn it up!). Calling this method again will override the initial mult() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with multiplied output",
+ "params": {
+ "number": "Number: Constant number to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this oscillator's amplitude values to a given range, and return the oscillator. Calling this method again will override the initial scale() with new values."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.SinOsc": {
+ "description": [
+ "Constructor: new p5.SinOsc(). This creates a Sine Wave Oscillator and is equivalent to new p5.Oscillator('sine') or creating a p5.Oscillator and then calling its method setType('sine'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.TriOsc": {
+ "description": [
+ "Constructor: new p5.TriOsc(). This creates a Triangle Wave Oscillator and is equivalent to new p5.Oscillator('triangle') or creating a p5.Oscillator and then calling its method setType('triangle'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SawOsc": {
+ "description": [
+ "Constructor: new p5.SawOsc(). This creates a SawTooth Wave Oscillator and is equivalent to new p5.Oscillator('sawtooth') or creating a p5.Oscillator and then calling its method setType('sawtooth'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SqrOsc": {
+ "description": [
+ "Constructor: new p5.SqrOsc(). This creates a Square Wave Oscillator and is equivalent to new p5.Oscillator('square') or creating a p5.Oscillator and then calling its method setType('square'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.MonoSynth": {
+ "description": [
+ "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthesizers should be built inheriting from this class."
+ ],
+ "play": {
+ "description": [
+ "Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope. Defaults to 0.15 seconds."
+ }
+ },
+ "triggerAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play"
+ }
+ },
+ "triggerRelease": {
+ "description": [
+ "Trigger the release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "secondsFromNow": "Number: time to trigger the release"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set values like a traditional ADSR envelope ."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "attack": {
+ "description": [
+ "Getters and Setters"
+ ]
+ },
+ "decay": {},
+ "sustain": {},
+ "release": {},
+ "amp": {
+ "description": [
+ "MonoSynth amp"
+ ],
+ "returns": "Number: new volume value",
+ "params": {
+ "vol": "Number: desired volume",
+ "rampTime": "Number: (Optional) Time to reach new volume"
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.AudioVoice": {
+ "description": [
+ "Base class for monophonic synthesizers. Any extensions of this class should follow the API and implement the methods below in order to remain compatible with p5.PolySynth();"
+ ],
+ "connect": {
+ "description": [
+ "Connect to p5 objects or Web Audio Nodes"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect from soundOut"
+ ]
+ }
+ },
+ "p5.PolySynth": {
+ "description": [
+ "An AudioVoice is used as a single voice for sound synthesis. The PolySynth class holds an array of AudioVoice, and deals with voices allocations, with setting notes to be played, and parameters to be set."
+ ],
+ "params": {
+ "synthVoice": "Number: (Optional) A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth",
+ "maxVoices": "Number: (Optional) Number of voices, defaults to 8;"
+ },
+ "notes": {
+ "description": [
+ "An object that holds information about which notes have been played and which notes are currently being played. New notes are added as keys on the fly. While a note has been attacked, but not released, the value of the key is the audiovoice which is generating that note. When notes are released, the value of the key becomes undefined."
+ ]
+ },
+ "polyvalue": {
+ "description": [
+ "A PolySynth must have at least 1 voice, defaults to 8"
+ ]
+ },
+ "AudioVoice": {
+ "description": [
+ "Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice."
+ ]
+ },
+ "play": {
+ "description": [
+ "Play a note by triggering noteAttack and noteRelease with sustain time"
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note to play (ranging from 0 to 127 - 60 being a middle C)",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
+ },
+ "noteADSR": {
+ "description": [
+ "noteADSR sets the envelope for a specific note that has just been triggered. Using this method modifies the envelope of whichever audiovoice is being used to play the desired note. The envelope should be reset before noteRelease is called in order to prevent the modified envelope from being used on other notes."
+ ],
+ "params": {
+ "note": "Number: (Optional) Midi note on which ADSR should be set.",
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope."
+ ],
+ "params": {
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "noteAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of a MonoSynth. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note on which attack should be triggered.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)/",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds)"
+ }
},
- "image": {
+ "noteRelease": {
"description": [
- "Dibuja una imagen en el lienzo principal del bosquejo p5.js."
+ "Trigger the Release of an AudioVoice note. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
],
"params": {
- "img": "p5.Image: la imagen a mostrar",
- "dx": "Número: la coordenada x donde se ubicará la esquina superior de la imagen",
- "dy": "Número: la coordenada y donde se ubicará la esquina superior de la imagen",
- "dWidth": "Número: ancho de la imagen a dibujar",
- "dHeight": "Número: altura de la imagen a dibujar",
- "sx": "Número: la coordenada x en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen",
- "sy": "Número: la coordenada y en el lienzo de destino donde se ubicará la esquina superior izquierda de la imagen",
- "sWidth": "Número: ancho de la imagen a dibujar en el lienzo de destino",
- "sHeight": "Número: altura de la imagen a dibujar en el lienzo de destino",
- "UNKNOWN-PARAM-10": "Número: la coordenada x de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino",
- "UNKNOWN-PARAM-11": "Número: la coordenada y de la esquina superior izquierda del subrectángulo de la imagen original a dibujar en el lienzo de destino",
- "UNKNOWN-PARAM-12": "Número: el ancho del subrectángulo de la imagen original a dibujar en el lienzo de destino",
- "UNKNOWN-PARAM-13": "Número: la altura del subrectángulo de la imagen original a dibujar en el lienzo de destino"
- },
- "returns": "el objeto p5"
+ "note": "Number: (Optional) midi note on which attack should be triggered. If no value is provided, all notes will be released.",
+ "secondsFromNow": "Number: (Optional) time to trigger the release"
+ }
},
- "tint": {
+ "connect": {
"description": [
- "Define el valor de relleno para mostrar imágenes. Las imágenes pueden ser teñidas en colores específicos o hacerse transparentes al incluir un valor alpha. Para aplicar transparencia a una imagen sin afectar su color, usa blanco como color de teñido y especifica un valor alpha. Por ejemplo, tint(255, 128) hará una imagen 50% transparente (asumiendo el rango alpha por defecto entre 0 y 255, el que puede ser modificado con la función colorMode()). El valor del parámetro gris debe ser menor o igual al actual valor máximo según lo especificado por colorMode(). El valor máximo por defecto es 255."
+ "Connect to a p5.sound / Web Audio object."
],
"params": {
- "v1": "Número|Arreglo: valor de gris, rojo o tinte (dependiendo del modo de color actual), o un arreglo de colores",
- "v2": "Número|Arreglo: valor de verde o saturación (dependiendo del modo de color actual)",
- "v3": "Número|Arreglo: valor de azul o brillo (dependiendo del modo de color actual)",
- "alpha": "Número|Arreglo: opacidad del fondo"
- },
- "returns": "el objeto p5"
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
},
- "noTint": {
+ "disconnect": {
"description": [
- "Remueve el valor actual de relleno para mostrar imágenes y revierte a mostrar las imágenes con sus colores originales."
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.SoundFile": {
+ "description": [
+ "SoundFile object with a path to a file. ",
+ "The p5.SoundFile may not be available immediately because it loads the file information asynchronously. ",
+ "To do something with the sound as soon as it loads pass the name of a function as the second parameter. ",
+ "Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatibility, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works."
+ ],
+ "params": {
+ "path": "String|Array: path to a sound file (String). Optionally, you may include multiple file formats in an array. Alternately, accepts an object from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if file fails to load. This function will receive an error or XMLHttpRequest object with information about what went wrong.",
+ "whileLoadingCallback": "Function: (Optional) Name of a function to call while file is loading. That function will receive progress of the request to load the sound file (between 0 and 1) as its first parameter. This progress does not account for the additional time needed to decode the audio data."
+ },
+ "isLoaded": {
+ "description": [
+ "Returns true if the sound file finished loading successfully."
],
- "returns": "el objeto p5"
+ "returns": "Boolean: "
},
- "imageMode": {
+ "play": {
"description": [
- "Define el modo de imagen. Modifica la ubicación desde la que las imágenes son dibujadas, por medio de cambiar la manera en que los parámetros dados a image() son interpretados. El modo por defecto es imageMode(CORNER), que interpreta los paráemtros segundo y tercero de image() como la posición de la esquina superior izquierda de la imagen. Si se dan dos parámetros adicionales, son usados para definir el ancho y la altura la imagen. imageMode(CORNERS) interpreta los paráemtros segundo y tercero de image() como la ubicación de una esquina, y los parámetros cuarto y quinto como la ubicación de la esquina opuesta. imageMode(CENTER) interpreta los parámetros segundo y tercero de image() como el punto central de la imagen. Si dos parámetros adicionales son especificados, son usados para definir el ancho y la altura de la imagen."
+ "Play the p5.SoundFile"
],
"params": {
- "mode": "Constante: puede ser CORNER, CORNERS, o CENTER"
- },
- "returns": "el objeto p5"
+ "startTime": "Number: (Optional) (optional) schedule playback to start (in seconds from now).",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) amplitude (volume) of playback",
+ "cueStart": "Number: (Optional) (optional) cue start time in seconds",
+ "duration": "Number: (Optional) (optional) duration of playback in seconds"
+ }
},
- "pixels[]": {
+ "playMode": {
"description": [
- "Arreglo tipo Uint8ClampedArray conteniendo los valores de todos los pixeles en la ventana mostrada. Estos valores son números. Este arreglo es del tamaño (incluyendo el factor apropiado de pixelDensity) de la ventana desplegada x4, representando los valores R, G, B, A por cada pixel, moviéndose de izquierda a derecha en cada fila, bajando una columna a la vez. Los monitores Retina y otros de alta densidad tendrán más pixeles en el arreglo (por un factor de pixelDensity al cuadrado). Por ejemplo, si la imagen es de 100 x 100 pixeles, habrán 40.000 valores. En un monitor retina, habrán 160.000. Los primeros cuatro valores (índices 0 a 4) en el arreglo serán los valores R, G, B, A del pixel en la posición (0, 0). Los siguientes cuatro valores (índices 4 a 7) serán los valores R, G, B, A del pixel en la posición (1, 0). De forma más general, para definir los valores de un pixel en (x, y): TODO. Aunque el método descrito es complejo, es lo suficientemente flexible como para trabajar con cualquier densidad de pixeles. Notar que set() inmediatamente se hace cargo de definir los valores apropiados en el arreglo pixels[] para un (x, y) dado a cualquier densidad de pixeles, pero el desempeño puede ser no tan rápido cuando muchas modificaciones son hechas en el arreglo de pixeles. Antes de acceder a este arreglo, los datos deben ser cargados con la función loadPixels(). Después de que el arreglo de datos ha sido modificado, la función updatePixels() debe ser ejecutada para refrescar los cambios. Notar que este no es un arreglo standard de Javascript. Esto significa que las funciones Javascript como slice() o arrayCopy() no funcionan."
+ "p5.SoundFile has two play modes: restart and sustain. Play Mode determines what happens to a p5.SoundFile if it is triggered while in the middle of playback. In sustain mode, playback will continue simultaneous to the new playback. In restart mode, play() will stop playback and start over. With untilDone, a sound will play only if it's not already playing. Sustain is the default mode."
],
- "returns": "el objeto p5"
+ "params": {
+ "str": "String: 'restart' or 'sustain' or 'untilDone'"
+ }
},
- "blend": {
+ "pause": {
"description": [
- "Copia una región de pixeles de una imagen a otra, usando un modo específico de mezcla para hacer la operación. Los modos disponibles de mezcla son: BLEND | DARKEST | LIGHTEST | DIFFERENCE | MULTIPLY| EXCLUSION | SCREEN | REPLACE | OVERLAY | HARD_LIGHT | SOFT_LIGHT | DODGE | BURN | ADD | NORMAL"
+ "Pauses a file that is currently playing. If the file is not playing, then nothing will happen. ",
+ "After pausing, .play() will resume from the paused position. If p5.SoundFile had been set to loop before it was paused, it will continue to loop after it is unpaused with .play()."
],
"params": {
- "srcImage": "p5.Image: imagen fuente",
- "sx": "Entero: coordenada x de la esquina superior izquierda de la fuente",
- "sy": "Entero: coordenada y de la esquina superior izquierda de la fuente",
- "sw": "Entero: ancho de la imagen fuente",
- "sh": "Entero: altura de la imagen fuente",
- "dx": "Entero: coordenada x de la esquina superior izquierda del destino",
- "dy": "Entero: coordenada y de la esquina superior izquierda del destino",
- "dw": "Entero: ancho de la imagen destino",
- "dh": "Entero: altura de la imagen destino",
- "blendMode": "Constante: el modo de mezcla"
- },
- "returns": "el objeto p5"
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now"
+ }
},
- "copy": {
+ "loop": {
"description": [
- "Copia una región del lienzo a otra región del lienzo desde una imagen usada como el parámetro srcImage en el lienzo. Si la fuente y el destino no son del mismo tamaño, automáticamente redimensionará los pixeles de la fuente para calzar con la región especificada como destino."
+ "Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd."
],
"params": {
- "srcImage": "p5.Image: imagen fuente",
- "sx": "Entero: coordenada x de la esquina superior izquierda de la fuente",
- "sy": "Entero: coordenada y de la esquina superior izquierda de la fuente",
- "sw": "Entero: ancho de la imagen fuente",
- "sh": "Entero: altura de la imagen fuente",
- "dx": "Entero: coordenada x de la esquina superior izquierda de destino",
- "dy": "Entero: coordenada y de la esquina superior izquierda de destino",
- "dw": "Entero: ancho de la imagen de destino",
- "dh": "Entero: altura de la imagen de destino"
- },
- "returns": "el objeto p5"
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) playback volume",
+ "cueLoopStart": "Number: (Optional) (optional) startTime in seconds",
+ "duration": "Number: (Optional) (optional) loop duration in seconds"
+ }
},
- "filter": {
+ "setLoop": {
"description": [
- "Aplica un filtro al lienzo. Las opciones posibles son: THRESHOLD, que convierte la imagen a pixeles blancos y negros dependiendo de si están arriba o abajo del umbral definido por el parámetro. El parámetro debe estar entre 0.0 (negro) y 1.0 (blanco). Si no se especifica ningún valor, el valor por defecto es 0.5. GRAY, convierte cualquier color en la imagen a un equivalente en la escala de grises, no tiene parámetros. OPAQUE, hace que el canal alpha sea totalmente opaco, no tiene parámetros. INVERT, hace que cada pixel tenga su valor inverso, no tiene parámetros. POSTERIZE, limita cada canal de la imagen a un número de colores especificado como parámetro. El parámetro puede definir entre 2 y 255 valores, pero los resultados más notorios se dan con valores bajos. BLUR, hace que la imagen sea borrosa con un proceso Gaussiano, siendo el parámetro el nivel de cuán borroso es el resultado, si no se usa ningún parámetro, el parámetro por defecto es 1, a mayores valores es más borroso el resultado. ERODE, reduce las áreas claras, no tiene parámetros. DILATE, aumenta las áreas claras, no tiene parámetros."
+ "Set a p5.SoundFile's looping flag to true or false. If the sound is currently playing, this change will take effect when it reaches the end of the current playback."
],
"params": {
- "filterType": "Constante: ",
- "filterParam": "Número: un parámetro opcional único a cada filtro, ver más arriba"
- },
- "returns": "el objeto p5"
+ "Boolean": "Boolean: set looping to true or false"
+ }
},
- "get": {
+ "isLooping": {
+ "description": [
+ "Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPlaying": {
+ "description": [
+ "Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPaused": {
+ "description": [
+ "Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "stop": {
"description": [
- "Retorna un arreglo de valores RGBA por cada pixel o toma una sección de una imagen. Si no especifican parámetros, se retorna la imagen entera. Usa los parámetros x e y para obtener el valor de un pixel. Toma una sección de la ventana mostrada si especificas los parámetros adicionales w y h. Cuando se obtiene una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el actual mode imagen definido por imageMode(). Si el pixel solicitado está fuera de la imagen, se retorna el valor [0, 0, 0, 255]. Para obtener los números escalados según los rangoes de color actuales y tomar en cuenta el modo de color según colorMode(), usa getColor() en vez de get(). Tomar el valor de un pixel con get(x, y) es fácil, pero no tan rápido como tomar los datos directamente desde pixels[]. La instrucción equivalente a get(x, y) usando pixels[] con densidad de pixeles d es var off = (y width + x) d * 4; [pixels[off], pixels[off+1], pixels[off+2], pixels[off+3]]. Ver la referencia de pixels[] para mayor información."
+ "Stop soundfile playback."
],
"params": {
- "the": "Número: coordenada x del pixel",
- "UNKNOWN-PARAM-2": "Número: coordenada y del pixel",
- "UNKNOWN-PARAM-3": "Número: ancho",
- "UNKNOWN-PARAM-4": "Número: altura"
- },
- "returns": "Arreglo|p5.Image: valores de pixel en la posición (x, y) en formato arreglo RGBAs o p5.Image"
+ "startTime": "Number: (Optional) (optional) schedule event to occur in seconds from now"
+ }
},
- "loadPixels": {
+ "setVolume": {
"description": [
- "Carga los datos de los pixeles en pantalla al arreglo pixels[]. Esta función siempre debe ser llamada antes de leer o escribir en el arreglo pixels[]"
+ "Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal."
],
- "returns": "el objeto p5"
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
},
- "set": {
+ "pan": {
"description": [
- "Cambia el color de cualquier pixel, o pone una imagen directamente en la ventana. Los parámetros x e y especifican el pixel a cambiar y c especifica el valor del color. Puede ser un objeto p5.Color o un arreglo de pixeles RGBA. También puede ser un valor único en escala de grises. Cuando se define una imagen, los parámetros x e y definen las coordenadas de la esquina superior izquierda de la imagen, sin importar el modo actual de imagen según imageMode(). Después de usar set(), debes llamar a updatePixels()' para que tus cambios aparezcan. Esta función debería ser llamada una vez que todos los pixeles han sido definidos. Definir el color de un solo pixel con set(x, y) es fácil, pero es tan rápido como poner los datos directamente en el arreglo pixels[]. Definir los valores de pixels[] directamente puede ser complicado cuando se trabaja con un monitor retina, pero tendrá un mejor desempeño cuando muchos pixeles necesiten ser definidos directamente en cada iteración. Ver la referencia de pixels[] para mayor información."
+ "Set the stereo panning of a p5.sound object to a floating point number between -1.0 (left) and 1.0 (right). Default is 0.0 (center)."
],
"params": {
- "key": "Número: coordenada x del pixel",
- "value": "Número: coordenada x del pixel",
- "UNKNOWN-PARAM-3": "Número: coordenada y del pixel",
- "UNKNOWN-PARAM-4": "Número|Arreglo|Objeto: inserta un valor en escala de grises | un arreglo de pixeles | un objeto p5.Color | un objeto p5.Image a copiar"
- },
- "returns": "el objeto p5"
+ "panValue": "Number: (Optional) Set the stereo panner",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
},
- "updatePixels": {
- "example": "",
+ "getPan": {
"description": [
- "Actualiza la ventana mostrada con los datos del arreglo pixels[]. Se usa en conjunto con loadPixels(). Si solo estás leyendo pixeles desde el arreglo, no hay necesidad de llamar a updatePixels() - actualizar es solo necesario para aplicar cambios. updatePixels() debe ser llamada cada vez que el arreglo de pixeles es manipulado o si se llama a la función set()."
+ "Returns the current stereo pan position (-1.0 to 1.0)"
+ ],
+ "returns": "Number: Returns the stereo pan setting of the Oscillator as a number between -1.0 (left) and 1.0 (right). 0.0 is center and default."
+ },
+ "rate": {
+ "description": [
+ "Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer."
],
"params": {
- "x": "Número: coordenada x de la esquina superior izquierda de la región a actualizar",
- "y": "Número: coordenada y de la esquina superior izquierda de la región a actualizar",
- "w": "Número: ancho de la región a actualizar",
- "h": "Número: altura de la región a actualizar"
- },
- "returns": "el objeto p5"
+ "playbackRate": "Number: (Optional) Set the playback rate. 1.0 is normal, .5 is half-speed, 2.0 is twice as fast. Values less than zero play backwards."
+ }
},
- "loadFont": {
+ "duration": {
+ "description": [
+ "Returns the duration of a sound file in seconds."
+ ],
+ "returns": "Number: The duration of the soundFile in seconds."
+ },
+ "currentTime": {
+ "description": [
+ "Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards."
+ ],
+ "returns": "Number: currentTime of the soundFile in seconds."
+ },
+ "jump": {
"description": [
- "Carga un archivo de fuente de letra (.otf, .ttf) desde un archivo o URL, y retorna un objeto PFont. Este método es asíncrono, lo que significa que puede que no finalice antes de que la siguiente línea en tu bosquejo sea ejecutada. La ubicación del archivo debe ser relativo al archivo HTML que lo vincula con tu bosquejo. Cargar desde una URL u otra ubicación remota puede ser bloqueado por las opciones de seguridad del navegador."
+ "Move the playhead of a soundfile that is currently playing to a new position and a new duration, in seconds. If none are given, will reset the file to play entire duration from start to finish. To set the position of a soundfile that is not currently playing, use the play or loop methods."
],
"params": {
- "path": "String: número del archivo o URL a cargar",
- "callback": "Función: función a ser ejecutada después de que loadFont() es completada"
- },
- "returns": "Objeto: objeto p5.Font"
+ "cueTime": "Number: cueTime of the soundFile in seconds.",
+ "duration": "Number: duration in seconds."
+ }
},
- "loadJSON": {
+ "channels": {
+ "description": [
+ "Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2."
+ ],
+ "returns": "Number: [channels]"
+ },
+ "sampleRate": {
+ "description": [
+ "Return the sample rate of the sound file."
+ ],
+ "returns": "Number: [sampleRate]"
+ },
+ "frames": {
+ "description": [
+ "Return the number of samples in a sound file. Equal to sampleRate * duration."
+ ],
+ "returns": "Number: [sampleCount]"
+ },
+ "getPeaks": {
"description": [
- "Carga un archivo JSON desde un archivo o una URL, y retorna un objeto o un arreglo. Este método es asíncrono, lo que significa que puede que no termine antes que se ejecute la siguiente línea en tu bosquejo."
+ "Returns an array of amplitude peaks in a p5.SoundFile that can be used to draw a static waveform. Scans through the p5.SoundFile's audio buffer to find the greatest amplitudes. Accepts one parameter, 'length', which determines size of the array. Larger arrays result in more precise waveform visualizations. ",
+ "Inspired by Wavesurfer.js."
],
+ "returns": "Float32Array: Array of peaks.",
"params": {
- "path": "String: nombre de archivo o URL a cargar",
- "datatype": "Función: función a ser ejecutada después de que loadJSON() finalice, los datos son pasados como primer argumento",
- "callback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento",
- "errorCallback": "String: json o jsonp"
- },
- "returns": "Objeto|Arreglo: datos JSON"
+ "length": "Number: (Optional) length is the size of the returned array. Larger length results in more precision. Defaults to 5*width of the browser window."
+ }
},
- "loadStrings": {
+ "reverseBuffer": {
+ "description": [
+ "Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example)."
+ ]
+ },
+ "onended": {
"description": [
- "Lee los contenidos de un archivo y crea un arreglo de Strings de sus líneas individuales. Si el nombre del archivo es usado como parámetro, como en el ejemplo anterior, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (empieza con / en Unix y Linux, o una letra representando el disco en Windows), o el parámetro de nombre de archivo puede ser una URL donde esté el archivo dentro de una red. Este método es asíncrono, lo que significa que puede ser que su ejecución no termine antes de que se ejecute la siguiente línea del bosquejo."
+ "Schedule an event to be called when the soundfile reaches the end of a buffer. If the soundfile is playing through once, this will be called when it ends. If it is looping, it will be called when stop is called."
],
"params": {
- "filename": "String: nombre de archivo o URL a cargar",
- "callback": "Función: función a ser ejecutada después de que loadStrings() finalice, el arreglo es pasado como primer argumento",
- "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
- },
- "returns": "Arreglo: un arreglo de Strings"
+ "callback": "Function: function to call when the soundfile has ended."
+ }
},
- "loadTable": {
+ "connect": {
"description": [
- "Lee los contenidos de un archivo o URL y crea un objeto p5.Table con sus valores. Si un archivo es especificado, debe ser ubicado en el directorio data del bosquejo. El parámetro de nombre de archivo puede también ser una URL de un archivo en línea. Por defecto, se asume que el archivo está separado por comas (formato CSV), La tabla sólo busca una fila de encabezado si es que se incluye la opción header. Las opciones posibles incluyen: csv: se procesan los datos como valores separados por comas, tsv: se procesan los datos como separados por tabulación, header: la tabla tiene una fila de encabezados (títulos). Si se incluyenn múltiples opciones, se deben ingresar como parámetros separados por comas. Todos los archivos son cargados y grabados usando codificación UTF-8. Este método es asíncrono, lo que significa que su ejecución puede no haber terminado antes de que se ejecute la siguiente línea del bosquejo. Si se llama a loadTable() dentro de preload() se garantiza que se complete la operación antes de que setup() y draw() sean llamadas. Fuera de preload(), puedes suplir una función callback para manejar el objeto."
+ "Connects the output of a p5sound object to input of another p5.sound object. For example, you may connect a p5.SoundFile to an FFT or an Effect. If no parameter is given, it will connect to the master output. Most p5sound objects connect to the master output when they are created."
],
"params": {
- "filename": "String: nombre de archivo o URL a cargar",
- "callback": "String|Strings: header, csv, tsv",
- "errorCallback": "Función: función a ser ejecutada después de que loadTable() finalice, el arreglo es pasado como primer argumento. Si es exitosa, el objeto Table es pasado como primer argumento, en caso contrario se pasa el valor boolean false."
- },
- "returns": "Objeto Table conteniendo los datos"
+ "object": "Object: (Optional) Audio object that accepts an input"
+ }
},
- "loadXML": {
+ "disconnect": {
"description": [
- "Lee los contenidos de un archivo y crea un objeto XML con sus valores. Si el nombre del archivo es usado como parámetro, el archivo debe estar ubicado en el directorio del bosquejo. Alternativamente, el archivo puede ser cargado desde cualquier lugar del computador local usando una dirección absoluta (que empieza con / en Unix y Linux, o con una letra que simbolice el disco duro en Windows). También se puede usar como parámetro de nombre de archivo una URL para un archivo en una red. Este método es asíncrono, lo que significa que su ejecución puede no estar completa antes de que se ejecute la siguiente línea de código en el bosquejo. Llamar a loadXML() dentro de preload() garantiza que la operación se complete antes de que setup() y draw() sean llamados. Fuera de preload(), puedes suplir una función callBack para manejar el objeto."
+ "Disconnects the output of this p5sound object."
+ ]
+ },
+ "setPath": {
+ "description": [
+ "Reset the source for this SoundFile to a new path (URL)."
],
"params": {
- "filename": "String: nombre de archivo o URL a cargar",
- "callback": "Función: función a ser ejecutada después de que loadXML() finalice, el objeto XML es pasado como primer argumento",
- "errorCallback": "Función: la función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
- },
- "returns": "objeto XML que contiene los datos"
+ "path": "String: path to audio file",
+ "callback": "Function: Callback"
+ }
},
- "httpGet": {
+ "setBuffer": {
"description": [
- "Método para ejecutar una solicitud HTTP GET. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto."
+ "Replace the current Audio Buffer with a new Buffer."
],
"params": {
- "path": "String: nombre del archivo o URL a cargar",
- "datatype": "Objeto: parámetro de datos pasados con la solicitud enviada",
- "data": "String: json, jsonp, xml o text",
- "callback": "Función: función a ser ejecutada después de que httpGet() finalice, los datos son pasados como primer argumento",
- "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
- },
- "returns": "el objeto p5"
+ "buf": "Array: Array of Float32 Array(s). 2 Float32 Arrays will create a stereo source. 1 will create a mono source."
+ }
},
- "httpPost": {
+ "processPeaks": {
"description": [
- "Método para ejecutar una solicitud HTTP POST. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto."
+ "processPeaks returns an array of timestamps where it thinks there is a beat. ",
+ "This is an asynchronous function that processes the soundfile in an offline audio context, and sends the results to your callback function. ",
+ "The process involves running the soundfile through a lowpass filter, and finding all of the peaks above the initial threshold. If the total number of peaks are below the minimum number of peaks, it decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached."
],
+ "returns": "Array: Array of timestamped peaks",
"params": {
- "path": "String: nombre del archivo o URL a cargar",
- "datatype": "Objeto: parámetro de datos pasados con la solicitud enviada",
- "data": "String: json, jsonp, xml o text",
- "callback": "Función: función a ser ejecutada después de que httpPost() finalice, los datos son pasados como primer argumento",
- "errorCallback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
- },
- "returns": "el objeto p5"
+ "callback": "Function: a function to call once this data is returned",
+ "initThreshold": "Number: (Optional) initial threshold defaults to 0.9",
+ "minThreshold": "Number: (Optional) minimum threshold defaults to 0.22",
+ "minPeaks": "Number: (Optional) minimum number of peaks defaults to 200"
+ }
},
- "httpDo": {
+ "addCue": {
"description": [
- "Método para ejecutar una solicitud HTTP. Si no se especifica el tipo de datos, p5 tratará de adivinar basándose en la URL, usando texto por defecto. También puedes pasar un objeto especificando todos los parámetros de la solicitud siguiendo los ejemplos dentro de las llamadas de reqwest()"
+ "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. ",
+ "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. ",
+ "Time will be passed as the first parameter to the callback function, and param will be the second parameter."
],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
"params": {
- "path": "String: nombre del archivo o URL a cargar",
- "method": "Objeto: parámetro de datos pasados con la solicitud enviada",
- "datatype": "String: json, jsonp, xml o text",
- "data": "Función: función a ser ejecutada después de que httpDo() finalice, los datos son pasados como primer argumento",
- "callback": "Función: función a ser ejecutada si es que hay un error, la respuesta es pasada como primer argumento"
- },
- "returns": "el objeto p5"
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "Remove a callback based on its ID. The ID is returned by the addCue method."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "Remove all of the callbacks that had originally been scheduled via the addCue method."
+ ]
},
"save": {
"description": [
- "Graba una imagen, text, json, csv, wav o html. Hace que la descarga ocurra en el computador cliente. Notar que no es recomendado llamar a save() dentro de draw() si está en bucle, porque la función save() abrirá una ventana de diálogo en cada cuadro. El comportamiento por defecto es grabar el lienzo como una imagen. Puedes opcionalmente especificar un nombre de archivo. Por ejemplo: TODO. Alternativamente, el primer parámetro puede ser un puntero a un lienzo p5.Element, un arreglo de Strings, un arreglo de JSON, un objeto JSON, un p5.Table, un p5.Image, o un p5.SoundFile (requiere p5.sound). El segundo parámetro es el nombre del archivo (incluyendo la extensión). El tercer parámetro es para opciones específicas a este tipo de objeto. Este método grabará un archivo que se austa a los parámetros dados. Por ejemplo: TODO. "
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. To upload a file to a server, see getBlob "
],
"params": {
- "filename": "Objeto|String: si se provee un nombre de archivo, se grabará el lienzo como una imagen con la extensión png o jpg, dependiendo del nombre del archivo. Si se provee un objeto, se grabará dependiendo del objeto y el nombre del archivo (ver los ejemplos anteriores)",
- "extension": "String: Si se provee un objeto como el primer parámetro, entonces el segundo parámetro indica el nombre del archivo, y debe incluir la extensión apropiada (ver los ejemplos anteriores).",
- "UNKNOWN-PARAM-3": "Boolean|String: opciones adicionales depndiendo del tipo de archivo. Por ejemplo, cuando se graba un archivo JSON, true indica que la salida será optimizada según el tamaño del archivo, en vez de por legibilidad."
- },
- "returns": "el objeto p5"
+ "fileName": "String: (Optional) name of the resulting .wav file."
+ }
},
- "saveJSON": {
+ "getBlob": {
"description": [
- "Escribe los contenidos de un arreglo o un objeto JSON a un archivo .json. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ "This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a \"Blob \". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData."
+ ],
+ "returns": "Blob: A file-like data object"
+ }
+ },
+ "p5.Amplitude": {
+ "description": [
+ "Amplitude measures volume between 0.0 and 1.0. Listens to all p5sound by default, or use setInput() to listen to a specific sound source. Accepts an optional smoothing value, which defaults to 0."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) between 0.0 and .999 to smooth amplitude readings (defaults to 0)"
+ },
+ "setInput": {
+ "description": [
+ "Connects to the p5sound instance (master output) by default. Optionally, you can pass in a specific source (i.e. a soundfile)."
],
"params": {
- "json": "Arreglo|Objeto:",
- "name": "String: ",
- "optimize": "Boolean: si es verdadero (true), remueve los saltos de línea del archivo de salida para optimizar el tamaño del archivo, en desmedro de la legibilidad."
- },
- "returns": "el objeto p5"
+ "snd": "SoundObject|undefined: (Optional) set the sound source (optional, defaults to master output)",
+ "smoothing": "Number|undefined: (Optional) a range between 0.0 and 1.0 to smooth amplitude readings"
+ }
},
- "saveStrings": {
+ "getLevel": {
"description": [
- "Escribe un arreglo de Strings a un archivo de texto, una línea por String. El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ "Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop."
],
+ "returns": "Number: Amplitude as a number between 0.0 and 1.0",
"params": {
- "list": "Arreglo: arreglo de Strings a ser escrito",
- "filename": "String: nombre del archivo de salida"
- },
- "returns": "el objeto p5"
+ "channel": "Number: (Optional) Optionally return only channel 0 (left) or 1 (right)"
+ }
},
- "saveTable": {
+ "toggleNormalize": {
"description": [
- "Escribe los contenidos de un objeto Table a un archivo. Por defecto es un archivo de texto con valores separados por coma (csv), pero también puede usar separación por tabulación (tsv), o generar una tabla HTML (html). El proceso de grabación del archivo y su ubicación pueden variar entre navegadores web."
+ "Determines whether the results of Amplitude.process() will be Normalized. To normalize, Amplitude finds the difference the loudest reading it has processed and the maximum amplitude of 1.0. Amplitude adds this difference to all values to produce results that will reliably map between 0.0 and 1.0. However, if a louder moment occurs, the amount that Normalize adds to all the values will change. Accepts an optional boolean parameter (true or false). Normalizing is off by default."
],
"params": {
- "table": "Table: el objeto Table a ser grabado en un archivo",
- "filename": "String: el nombre del archivo en el que Table será grabado",
- "options": "String: puede ser tsv, csv o html."
- },
- "returns": "el objeto p5"
+ "boolean": "Boolean: (Optional) set normalize to true (1) or false (0)"
+ }
},
- "day": {
+ "smooth": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función day() retorna el día actual como un valor entre 1 y 31."
+ "Smooth Amplitude analysis by averaging with the last analysis frame. Off by default."
],
- "returns": "Número: el día actual"
+ "params": {
+ "set": "Number: smoothing from 0.0 <= 1"
+ }
+ }
+ },
+ "p5.FFT": {
+ "description": [
+ "FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform. ",
+ "Once instantiated, a p5.FFT object can return an array based on two types of analyses: • FFT.waveform() computes amplitude values along the time domain. The array indices correspond to samples across a brief moment in time. Each value represents amplitude of the waveform at that sample of time. • FFT.analyze() computes amplitude values along the frequency domain. The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Use with getEnergy() to measure amplitude at specific frequencies, or within a range of frequencies. ",
+ "FFT analyzes a very short snapshot of sound called a sample buffer. It returns an array of amplitude measurements, referred to as bins. The array is 1024 bins long by default. You can change the bin array length, but it must be a power of 2 between 16 and 1024 in order for the FFT algorithm to function correctly. The actual size of the FFT buffer is twice the number of bins, so given a standard sample rate, the buffer is 2048/44100 seconds long."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8.",
+ "bins": "Number: (Optional) Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024."
},
- "hour": {
+ "setInput": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función hour() retorna la hora actual como un valor entre 0 y 23."
+ "Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch."
],
- "returns": "Número: la hora actual"
+ "params": {
+ "source": "Object: (Optional) p5.sound object (or web audio API source node)"
+ }
},
- "minute": {
+ "waveform": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función minute() retorna el minuto actual como un valor entre 0 y 59."
+ "Returns an array of amplitude values (between -1.0 and +1.0) that represent a snapshot of amplitude readings in a single buffer. Length will be equal to bins (defaults to 1024). Can be used to draw the waveform of a sound."
],
- "returns": "Número: el minuto actual"
+ "returns": "Array: Array Array of amplitude values (-1 to 1) over time. Array length = bins.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "precision": "String: (Optional) If any value is provided, will return results in a Float32 Array which is more precise than a regular array."
+ }
},
- "millis": {
+ "analyze": {
"description": [
- "Retorna el número de milisegundos (milésimas de segundo) desde que el programa empezó a correr. La información es usada a menudo para temporizar eventos y animar secuencias"
+ "Returns an array of amplitude values (between 0 and 255) across the frequency spectrum. Length is equal to FFT bins (1024 by default). The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Must be called prior to using getEnergy()."
],
- "returns": "Número: el número de milisegundos desde que empezó el programa"
+ "returns": "Array: spectrum Array of energy (amplitude/volume) values across the frequency spectrum. Lowest energy (silence) = 0, highest possible is 255.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "scale": "Number: (Optional) If \"dB,\" returns decibel float measurements between -140 and 0 (max). Otherwise returns integers from 0-255."
+ }
},
- "month": {
+ "getEnergy": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función month() retorna el mes actual como un valor entre 1 y 12."
+ "Returns the amount of energy (volume) at a specific frequency , or the average amount of energy between two frequencies. Accepts Number(s) corresponding to frequency (in Hz), or a String corresponding to predefined frequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\"). Returns a range between 0 (no energy/volume at that frequency) and 255 (maximum energy). NOTE: analyze() must be called prior to getEnergy(). Analyze() tells the FFT to analyze frequency data, and getEnergy() uses the results determine the value at a specific frequency or range of frequencies. "
],
- "returns": "Número: el mes actual"
+ "returns": "Number: Energy Energy (volume/amplitude) from 0 and 255.",
+ "params": {
+ "frequency1": "Number|String: Will return a value representing energy at this frequency. Alternately, the strings \"bass\", \"lowMid\" \"mid\", \"highMid\", and \"treble\" will return predefined frequency ranges.",
+ "frequency2": "Number: (Optional) If a second frequency is given, will return average amount of energy that exists between the two frequencies."
+ }
},
- "second": {
+ "getCentroid": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función second() retorna el mes actual como un valor entre 0 y 59."
+ "Returns the spectral centroid of the input signal. NOTE: analyze() must be called prior to getCentroid(). Analyze() tells the FFT to analyze frequency data, and getCentroid() uses the results determine the spectral centroid. "
],
- "returns": "Número: el segundo actual"
+ "returns": "Number: Spectral Centroid Frequency Frequency of the spectral centroid in Hz."
},
- "year": {
+ "smooth": {
"description": [
- "p5.js se comunica con el reloj de tu computador. La función year() retorna el año actual como un entero (2014, 2015, 2015, etc)."
+ "Smooth FFT analysis by averaging with the last analysis frame."
],
- "returns": "Número: el año actual"
+ "params": {
+ "smoothing": "Number: 0.0 < smoothing < 1.0. Defaults to 0.8."
+ }
},
- "createVector": {
+ "linAverages": {
"description": [
- "Crea un nuevo objeto p5.Vector (el tipo de datos para almacenar vectores). Esto provee un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección."
+ "Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. NOTE: analyze() must be called prior to linAverages(). Analyze() tells the FFT to analyze frequency data, and linAverages() uses the results to group them into a smaller set of averages. "
],
+ "returns": "Array: linearAverages Array of average amplitude values for each group",
"params": {
- "x": "Número: componente x del vector",
- "y": "Número: componente y del vector",
- "z": "Número: componente z del vector"
- },
- "returns": "el objeto p5"
+ "N": "Number: Number of returned frequency groups"
+ }
},
- "abs": {
+ "logAverages": {
"description": [
- "Calcula el valor absoluto (magnitud) de un número. Usa Math.abs(). El valor absoluto de un número es siempre positivo."
+ "Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands NOTE: analyze() must be called prior to logAverages(). Analyze() tells the FFT to analyze frequency data, and logAverages() uses the results to group them into a smaller set of averages. "
],
+ "returns": "Array: logAverages Array of average amplitude values for each group",
"params": {
- "n": "Número: número a computar"
- },
- "returns": "Número: valor absoluto del número dado"
+ "octaveBands": "Array: Array of Octave Bands objects for grouping"
+ }
},
- "ceil": {
+ "getOctaveBands": {
"description": [
- "Calcula el entero más cercano que es mayor o igual que el valor del parámetro. Usa Math.ceil(). Por ejemplo, ceil(9.03) retorna el valor 10."
+ "Calculates and Returns the 1/N Octave Bands N defaults to 3 and minimum central frequency to 15.625Hz. (1/3 Octave Bands ~= 31 Frequency Bands) Setting fCtr0 to a central value of a higher octave will ignore the lower bands and produce less frequency groups."
],
+ "returns": "Array: octaveBands Array of octave band objects with their bounds",
"params": {
- "n": "Número: número a redondear"
- },
- "returns": "Número: número redondeado hacia arriba"
+ "N": "Number: Specifies the 1/N type of generated octave bands",
+ "fCtr0": "Number: Minimum central frequency for the lowest band"
+ }
+ }
+ },
+ "p5.Signal": {
+ "description": [
+ "p5.Signal is a constant audio-rate signal used by p5.Oscillator and p5.Envelope for modulation math. ",
+ "This is necessary because Web Audio is processed on a separate clock. For example, the p5 draw loop runs about 60 times per second. But the audio clock must process samples 44100 times per second. If we want to add a value to each of those samples, we can't do it in the draw loop, but we can do it by adding a constant-rate audio signal.tone.js."
+ ],
+ "returns": "Tone.Signal: A Signal object from the Tone.js library",
+ "fade": {
+ "description": [
+ "Fade to value, for smooth transitions"
+ ],
+ "params": {
+ "value": "Number: Value to set this signal",
+ "secondsFromNow": "Number: (Optional) Length of fade, in seconds from now"
+ }
},
- "constrain": {
+ "setInput": {
"description": [
- "Restringe un valor a estar entre un valor mínimo y uno máximo."
+ "Connect a p5.sound object or Web Audio node to this p5.Signal so that its amplitude values can be scaled."
],
"params": {
- "n": "Número: número a restringir",
- "low": "Número: límite mínimo",
- "high": "Número: límite máximo"
- },
- "returns": "Número: número restringido"
+ "input": "Object"
+ }
},
- "dist": {
- "description": ["Calcula la distancia entre dos puntos"],
+ "add": {
+ "description": [
+ "Add a constant value to this audio signal, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalAdd."
+ ],
+ "returns": "p5.Signal: object",
"params": {
- "x1": "Número: la coordenada x del primer punto",
- "y1": "Número: la coordenada y del primer punto",
- "z1": "Número: la coordenada z del primer punto",
- "x2": "Número: la coordenada x del segundo punto",
- "y2": "Número: la coordenada y del segundo punto",
- "z2": "Número: la coordenada z del segundo punto"
- },
- "returns": "Número: distancia entre los dos puntos"
+ "number": "Number"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply this signal by a constant value, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalMult."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this signal value to a given range, and return the result as an audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalScale."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply",
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Envelope": {
+ "description": [
+ "Envelopes are pre-defined amplitude distribution over time. Typically, envelopes are used to control the output volume of an object, a series of fades referred to as Attack, Decay, Sustain and Release ( ADSR ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can control an Oscillator's frequency like this: osc.freq(env). ",
+ "Use setRange to change the attack/release level. Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime. ",
+ "Use the play method to play the entire envelope, the ramp method for a pingable trigger, or triggerAttack / triggerRelease to trigger noteOn/noteOff."
+ ],
+ "attackTime": {
+ "description": [
+ "Time until envelope reaches attackLevel"
+ ]
+ },
+ "attackLevel": {
+ "description": [
+ "Level once attack is complete."
+ ]
+ },
+ "decayTime": {
+ "description": [
+ "Time until envelope reaches decayLevel."
+ ]
+ },
+ "decayLevel": {
+ "description": [
+ "Level after decay. The envelope will sustain here until it is released."
+ ]
+ },
+ "releaseTime": {
+ "description": [
+ "Duration of the release portion of the envelope."
+ ]
+ },
+ "releaseLevel": {
+ "description": [
+ "Level at the end of the release."
+ ]
},
- "exp": {
+ "set": {
"description": [
- "Retorna el número de Euler (2.71828...) elevado al parámetro n. Usa Math.exp()."
+ "Reset the envelope with a series of time/value pairs."
],
"params": {
- "n": "Número: exponente a elevar"
- },
- "returns": "e^n"
+ "attackTime": "Number: Time (in seconds) before level reaches attackLevel",
+ "attackLevel": "Number: Typically an amplitude between 0.0 and 1.0",
+ "decayTime": "Number: Time",
+ "decayLevel": "Number: Amplitude (In a standard ADSR envelope, decayLevel = sustainLevel)",
+ "releaseTime": "Number: Release Time (in seconds)",
+ "releaseLevel": "Number: Amplitude"
+ }
},
- "floor": {
+ "setADSR": {
"description": [
- "Calcula el valor entero más cercano que es menor o igual al parámetro. Usa Math.floor()."
+ "Set values like a traditional ADSR envelope ."
],
"params": {
- "n": "Número: número a ser redondeado hacia abajo"
- },
- "returns": "Número: número redondeado hacia abajo"
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
},
- "lerp": {
+ "setRange": {
"description": [
- "Calcula un número entre dos números a un incremento específico. El parámetro amt es la cantidad a interpolar entre los dos valores donde 0.0 es igual al primer punto, 0.1 está muy cerca del primer punto, 0.5 está a medio camino entre ambos números, etc. La función lerp es conveniente para crear movimiento a lo largo de un camino recto y para dibujar líneas punteadas."
+ "Set max (attackLevel) and min (releaseLevel) of envelope."
],
"params": {
- "start": "Número: primer valor",
- "stop": "Número: segundo valor",
- "amt": "Número: número entre 0.0 y 1.0"
- },
- "returns": "Número: valor interpolado"
+ "aLevel": "Number: attack level (defaults to 1)",
+ "rLevel": "Number: release level (defaults to 0)"
+ }
},
- "log": {
+ "setInput": {
"description": [
- "Calcula el logaritmo natural (logaritmo con base e) de un número. Esta función espera que el parámetro n sea de un valor más grande que 0.0. Usa Math.log()."
+ "Assign a parameter to be controlled by this envelope. If a p5.Sound object is given, then the p5.Envelope will control its output gain. If multiple inputs are provided, the env will control all of them."
],
"params": {
- "message": "Número: número más grande que 0"
- },
- "returns": "Número: logaritmo naturla de n"
+ "inputs": "Object: (Optional) A p5.sound object or Web Audio Param."
+ }
},
- "mag": {
+ "setExp": {
"description": [
- "Calcula la magnitud (o tamaño) de un vector. Un vector es una dirección en el espacio comúnmente usada en gráfica computacional y álgebra lineal. Como no tiene posición de inicio, la magnitud del vector puede ser pensada como la distancia entre la coordenada 0,0 a su valor x,y. Por lo tanto, mag() es un atajo a escribir dist(0, 0, x, y)."
+ "Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically."
],
"params": {
- "a": "Número: primer valor",
- "b": "Número: segundo valor"
- },
- "returns": "Número: magnitud del vector entre (0, 0) y (a, b)"
+ "isExp": "Boolean: true is exponential, false is linear"
+ }
},
- "map": {
+ "play": {
"description": [
- "Escala un nombre de un rango a otro rango. En el primer ejemplo anterior, el número 25 es convertido de un valor en el rango entre 0 y 100 a un valor cuyo rango está entre el borde izquierdo de la ventana (0) y el borde derecho (ancho)."
+ "Play tells the envelope to start acting on a given input. If the input is a p5.sound object (i.e. AudioIn, Oscillator, SoundFile), then Envelope will control its output volume. Envelopes can also be used to control any Web Audio Audio Param. "
],
"params": {
- "value": "Número: el valor a ser convertido",
- "start1": "Número: límite inferior del rango actual",
- "stop1": "Número: límite superior del rango actual",
- "start2": "Número: límite inferior del rango deseado",
- "stop2": "Número: límite superior del rango deseado"
- },
- "returns": "Número: número escalado"
+ "unit": "Object: A p5.sound object or Web Audio Param.",
+ "startTime": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
},
- "max": {
+ "triggerAttack": {
"description": [
- "Determina el valor más grande en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo."
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go. Input can be any p5.sound object, or a Web Audio Param ."
],
"params": {
- "nums": "Número|Arreglo: números a comparar"
- },
- "returns": "Número: número máximo"
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time from now (in seconds)"
+ }
},
- "min": {
+ "triggerRelease": {
"description": [
- "Determina el valor más pequeño en una secuencia de números, y luego retorna ese valor. max() acepta cualquier número de parámetros tipo número, o un arreglo de cualquier largo."
+ "Trigger the Release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
],
"params": {
- "nums": "Número|Arreglo: números a comparar"
- },
- "returns": "Número: número mínimo"
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time to trigger the release"
+ }
},
- "norm": {
+ "ramp": {
"description": [
- "Normaliza un número de un rango a otro rango entre 0 y 1. Es idéntico a map(value, low, high, 0, 1). Los números fuera del rango no son saturados a 0 o 1, porque los números fuera de rango son muchas veces intencionales y útiles (ver el segundo ejemplo más arriba)"
+ "Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime."
],
"params": {
- "value": "Número: valor entrante a ser normalizado",
- "start": "Número: límite inferior del rango actual",
- "stop": "Número: límite superior del rango actual"
- },
- "returns": "Número: número normalizado"
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: When to trigger the ramp",
+ "v": "Number: Target value",
+ "v2": "Number: (Optional) Second target value (optional)"
+ }
},
- "pow": {
+ "add": {
"description": [
- "Facilita las expresiones exponenciales. La función pow() es una manera eficiente de multiplicar números po sí mismos (o sus recíprocos) en grandes cantidades. Por ejemplo, pow(3, 5) es equivalente a la expresión 3*3*3*3*3 y pow (3, -5) es equivalente a 1/3*3*3*3*3. Usa Math.pow()."
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with new values."
],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
"params": {
- "n": "Número: base de la expresión exponencial",
- "e": "Número: potencia a la que se eleva la base"
- },
- "returns": "n^e"
+ "number": "Number: Constant number to add"
+ }
},
- "round": {
+ "mult": {
"description": [
- "Calcula el entero más cercano al parámetro n. Por ejemplo, round(133.8) retorna el valor 134. Usa la función Math.round()."
+ "Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values."
],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
"params": {
- "n": "Número: número a redondear"
- },
- "returns": "Número: número redondeado"
+ "number": "Number: Constant number to multiply"
+ }
},
- "sq": {
+ "scale": {
"description": [
- "Eleva al cuadrado un número (lo multiplica por sí mismo), El resultado es siempre un número positivo, porque multiplicar dos números negativos siempre resulta en un número positivo."
+ "Scale this envelope's amplitude values to a given range, and return the envelope. Calling this method again will override the initial scale() with new values."
],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
"params": {
- "n": "Número: número a elevar al cuadrado"
- },
- "returns": "Número: número elevado al cuadrado"
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Pulse": {
+ "description": [
+ "Creates a Pulse object, an oscillator that implements Pulse Width Modulation. The pulse is created with two oscillators. Accepts a parameter for frequency, and to set the width between the pulses. See p5.Oscillator for a full list of methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in oscillations per second (Hz)",
+ "w": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
},
- "sqrt": {
+ "width": {
"description": [
- "Calcula la raíz cuadrada de un número. La raíz cuadrada de un número es siempre positiva, aunque puede haber una raíz cuadrada válida que sea negativa. La raíz cuadrada s de un número a es tal que s*s = a. Es lo opuesto a elevar al cuadrado. Usa Math.sqrt()."
+ "Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation)."
],
"params": {
- "n": "Número: número no negativo al que se le calcula la raíz cuadrada"
- },
- "returns": "Número: raíz cuadrada del número"
+ "width": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
+ }
+ }
+ },
+ "p5.Noise": {
+ "description": [
+ "Noise is a type of oscillator that generates a buffer with random values."
+ ],
+ "params": {
+ "type": "String: Type of noise can be 'white' (default), 'brown' or 'pink'."
},
- "noise": {
+ "setType": {
"description": [
- "Retorna el valor del ruido Perlin en las coordenadas específicas. El ruido Perlin es un generador de secuencias aleatorias produciendo una sucesión de números más naturalmente ordenada y armónica, en comparación con la función estándar random(). Fue inventada por Ken Perlin en los 1980s y ha sido usada desde entonces en aplicaciones gráficas para producir texturas procedurales, movimiento natural, figuras, terrenos, etc. La principal diferencia con la función random() es definida en una espacio infinito n-dimensional donde cada par de coordenadas corresponde a un valor fijo semi-aleatorio (fijado solo durante el tiempo de vida del programa; ver la función noiseSeed()). p5.js puede calcular ruido 1D, 2D y 3D, dependiendo del número de coordenadas dado. El valor resultante siempre estará entre 0.0 y 1.0. El valor de ruido puede ser animado moviéndose a través del espacio del ruido como fue demostrado en el ejemplo superior. Las dimensiones segunda y tercera también pueden ser interpretadas como tiempo. El ruido está estructurado de forma similar a una señal de audio, con respecto al uso de la función de las frecuencias. De forma similar al conecpto de armónicas en física, el ruido Perlin es calculado a lo largo de varias octavas que se han sumado para dar forma al resultado final. Otra manera de ajustar el caracter de la secuencia resultante es la escala de las coordenadas de entrada. Como la función trabaja en un espacio infinito, el valor de las coordenadas no importa como tal, solo la distancia entre las coordenadas sucesivas importa (por ejemplo: cuando se usa noise() dentro de un bucle). Como regla general, a menor la diferencia entre coordenadas, más suave es el ruido resultante. Pasos entre 0.005 y 0.03 funcionan mejor para la mayor parte de las aplicaciones, pero esto diferirá dependiendo del uso."
+ "Set type of noise to 'white', 'pink' or 'brown'. White is the default."
],
"params": {
- "x": "Número: coordenada x en el espacio del ruido",
- "y": "Número: coordenada y en el espacio del ruido",
- "z": "Número: coordenada z en el espacio del ruido"
- },
- "returns": "valor de ruido Perlin (entre 0 y 1) en las coordenadas especificadas"
+ "type": "String: (Optional) 'white', 'pink' or 'brown'"
+ }
+ }
+ },
+ "p5.AudioIn": {
+ "description": [
+ "Get audio from an input, i.e. your computer's microphone. ",
+ "Turn the mic on/off with the start() and stop() methods. When the mic is on, its volume can be measured with getLevel or by connecting an FFT object. ",
+ "If you want to hear the AudioIn, use the .connect() method. AudioIn does not connect to p5.sound output by default to prevent feedback. ",
+ "Note: This uses the getUserMedia/ Stream API, which is not supported by certain browsers. Access in Chrome browser is limited to localhost and https, but access over http may be limited. "
+ ],
+ "params": {
+ "errorCallback": "Function: (Optional) A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access."
},
- "noiseDetail": {
+ "input": {},
+ "output": {},
+ "stream": {},
+ "mediaStream": {},
+ "currentSource": {},
+ "enabled": {
"description": [
- "Ajusta el caracter y nivel de detalle producido por la función de ruido Perlin. Similar al concepto de armónicas en física, el ruido es calculado a lo largo de varias octavas. Las octavas más graves contribuyen de forma más significativa a la señal de salida y como define la intensidad general del ruido, mientras que las octavas más altas crean detalles más finos en la secuencia de ruido. Por defecto, el ruido es calculado a lo largo de 4 octavas, con cada octava contribuyendo exactamente la mitad que su predecesora, partiendo con una intensidad de 50% para la primera octava. Este tamaño de caída puede ser cambiado al añadir un parámetro adicional a la función. Por ejemplo, un factor de caída de 75% significa que cada octava tendrá un 75% de impacto (25% menos) que la octava anterior. Cualquier valor entre 0.0 y 1.0 es válido, sin embargo nota que valores superiores a 0.5 pueden resultar en que noise() retorne valores mayores a 1.0. Al cambiar estos parámetros, la señal creada por noise() puede ser adaptada para calzar con necesidades y características específicas."
+ "Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access."
+ ]
+ },
+ "amplitude": {
+ "description": [
+ "Input amplitude, connect to it by default but not to master out"
+ ]
+ },
+ "start": {
+ "description": [
+ "Start processing audio input. This enables the use of other AudioIn methods like getLevel(). Note that by default, AudioIn is not connected to p5.sound's output. So you won't hear anything unless you use the connect() method. ",
+ "Certain browsers limit access to the user's microphone. For example, Chrome only allows access from localhost and over https. For this reason, you may want to include an errorCallback—a function that is called in case the browser won't provide mic access."
],
"params": {
- "lod": "Número: número de octavas a ser usadas por el ruido",
- "falloff": "Número: factor de caída para cada octava"
- },
- "returns": "el objeto p5"
+ "successCallback": "Function: (Optional) Name of a function to call on success.",
+ "errorCallback": "Function: (Optional) Name of a function to call if there was an error. For example, some browsers do not support getUserMedia."
+ }
},
- "noiseSeed": {
+ "stop": {
"description": [
- "Define el valor semilla para la función noise(). Por defecto, noise() produce diferentes resultados cada vez que el programa es ejecutado. Defines el parámetro value a una constante para que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado"
+ "Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access."
+ ]
+ },
+ "connect": {
+ "description": [
+ "Connect to an audio unit. If no parameter is provided, will connect to the master output (i.e. your speakers). "
],
"params": {
- "seed": "Número: el valor semilla"
- },
- "returns": "el objeto p5"
+ "unit": "Object: (Optional) An object that accepts audio input, such as an FFT"
+ }
},
- "acos": {
+ "disconnect": {
"description": [
- "El inverso de la función cos(), retorna el arcocoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre 0 y PI (3.1415927)."
+ "Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers. "
+ ]
+ },
+ "getLevel": {
+ "description": [
+ "Read the Amplitude (volume level) of an AudioIn. The AudioIn class contains its own instance of the Amplitude class to help make it easy to get a microphone's volume level. Accepts an optional smoothing value (0.0 < 1.0). NOTE: AudioIn must .start() before using .getLevel(). "
],
+ "returns": "Number: Volume level (between 0.0 and 1.0)",
"params": {
- "value": "Número: el valor al que se aplica arcocoseno"
- },
- "returns": "Número: el arcocoseno del valor"
+ "smoothing": "Number: (Optional) Smoothing is 0.0 by default. Smooths values based on previous values."
+ }
},
- "asin": {
+ "amp": {
"description": [
- "El inverso de la función sin(), retorna el arcoseno de un valor. Esta función espera valores entre -1 y 1 y los valores retornados están en el rango entre -PI/2 y PI/2 ."
+ "Set amplitude (volume) of a mic input between 0 and 1.0. "
],
"params": {
- "value": "Número: el valor al que se aplica arcoseno"
- },
- "returns": "Número: el arcoseno del valor"
+ "vol": "Number: between 0 and 1.0",
+ "time": "Number: (Optional) ramp time (optional)"
+ }
},
- "atan": {
+ "getSources": {
"description": [
- "El inverso de la función tan(), retorna el arcotangente de un valor. Esta función espera valores entre -Infinito e Infinito (exclusivo) y los valores retornados están en el rango entre -PI/2 y PI/2 ."
+ "Returns a list of available input sources. This is a wrapper for https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "and it returns a Promise. "
],
+ "returns": "Promise: Returns a Promise that can be used in place of the callbacks, similar to the enumerateDevices() method",
"params": {
- "value": "Número: el valor al que se aplica arcotangente"
- },
- "returns": "Número: el arcotangente del valor"
+ "successCallback": "Function: (Optional) This callback function handles the sources when they have been enumerated. The callback function receives the deviceList array as its only argument",
+ "errorCallback": "Function: (Optional) This optional callback receives the error message as its argument."
+ }
},
- "atan2": {
+ "setSource": {
"description": [
- "Calcula el ángulo (en radianes) desde un punto específico al origen, medido desde el eje x positivo. Los valores retornados son de tipo float entre -PI/2 y PI/2. La función atan2() es más frecuentemente usada para orientar figuras figuras geométricas según la posición del cursor. Nota: la coordenada y del punto es el primer parámetro, y la coordenada x es el segundo parámetro, debido a la estructura para calcular la tangente."
+ "Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "navigator.mediaDevices.enumerateDevices(). "
],
"params": {
- "y": "Número: coordenada y del punto",
- "x": "Número: coordenada x del punto"
- },
- "returns": "Número: el arcotangente del punto dado"
+ "num": "Number: position of input source in the array"
+ }
+ }
+ },
+ "p5.EQ": {
+ "description": [
+ "p5.EQ is an audio effect that performs the function of a multiband audio equalizer. Equalization is used to adjust the balance of frequency compoenents of an audio signal. This process is commonly used in sound production and recording to change the waveform before it reaches a sound output device. EQ can also be used as an audio effect to create interesting distortions by filtering out parts of the spectrum. p5.EQ is built using a chain of Web Audio Biquad Filter Nodes and can be instantiated with 3 or 8 bands. Bands can be added or removed from the EQ by directly modifying p5.EQ.bands (the array that stores filters). ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "returns": "Object: p5.EQ object",
+ "params": {
+ "_eqsize": "Number: (Optional) Constructor will accept 3 or 8, defaults to 3"
},
- "cos": {
+ "bands": {
"description": [
- "calcula el coseno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ "The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7"
+ ]
+ },
+ "process": {
+ "description": [
+ "Process an input by connecting it to the EQ"
],
"params": {
- "angle": "Número: el ángulo"
- },
- "returns": "Número: el coseno del ángulo"
+ "src": "Object: Audio source"
+ }
+ }
+ },
+ "p5.Panner3D": {
+ "description": [
+ "Panner3D is based on the Web Audio Spatial Panner Node . This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space. ",
+ "The position is relative to an Audio Context Listener , which can be accessed by p5.soundOut.audiocontext.listener"
+ ],
+ "panner": {
+ "description": [
+ " Web Audio Spatial Panner Node ",
+ "Properties include "
+ ]
},
- "sin": {
+ "process": {
"description": [
- "calcula el seno de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ "Connect an audio sorce"
],
"params": {
- "angle": "Número: el ángulo"
- },
- "returns": "Número: el seno del ángulo"
+ "src": "Object: Input source"
+ }
},
- "tan": {
+ "set": {
"description": [
- "calcula la tangente de un ángulo. Esta función toma en cuenta el modo actual de ángulo según angleMode(). Los valores son retornados en el rango entre -1 y 1."
+ "Set the X,Y,Z position of the Panner"
],
+ "returns": "Array: Updated x, y, z values as an array",
"params": {
- "angle": "Número: el ángulo"
- },
- "returns": "Número: la tangente del ángulo"
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
},
- "degrees": {
+ "positionX": {
"description": [
- "Convierte una medida en radianes a su correspondiente valor en grados. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes."
+ "Getter and setter methods for position coordinates"
],
- "params": {
- "radians": "Número: valor en radianes a ser convertido a grados."
- },
- "returns": "el ángulo convertido"
+ "returns": "Number: updated coordinate value"
},
- "radians": {
+ "positionY": {
"description": [
- "Convierte una medida en grados a su correspondiente valor en radianes. Radianes y grados son dos maneras de calcular lo mismo. Hay 360 grados en un círculo y 2*PI radianes en un círculo. Por ejemplo, 90 grados equivalen a PI/2 radianes."
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "positionZ": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orient": {
+ "description": [
+ "Set the X,Y,Z position of the Panner"
],
+ "returns": "Array: Updated x, y, z values as an array",
"params": {
- "degrees": "Número: valor en grados a ser convertido a radianes."
- },
- "returns": "el ángulo convertido"
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
},
- "angleMode": {
+ "orientX": {
"description": [
- "Define el modo actual de p5 para interpretar ángulos. El modo por defecto es en RADIANS (radianes)."
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientY": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientZ": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "setFalloff": {
+ "description": [
+ "Set the rolloff factor and max distance"
],
"params": {
- "mode": "CONSTANTE: puede ser RADIANS (radianes) o DEGREES (grados)"
- },
- "returns": "el objeto p5"
+ "maxDistance": "Number (Optional)",
+ "rolloffFactor": "Number (Optional)"
+ }
},
- "randomSeed": {
+ "maxDist": {
"description": [
- "Define la semilla para la función random(). Por defecto, la función random() produce diferentes resultados cada vez que el programa es ejecutado. Definir el parámetro semilla como una constante hace que retorne la misma secuencia de números pseudo-aleatorios cada vez que el programa es ejecutado."
+ "Maxium distance between the source and the listener"
],
+ "returns": "Number: updated value",
"params": {
- "seed": "Número: el valor semilla"
- },
- "returns": "el objeto p5"
+ "maxDistance": "Number"
+ }
},
- "random": {
+ "rollof": {
"description": [
- "Retorna un número aleaotorio de tipo float (punto flotante). Acepta 0, 1 o 2 argumentos. Si no se le da un argumento, retorna un número aleatorio entre 0 y 1 (sin incluir 1). Si se da un argumento y es un número, retorna un número aleatorio entre 0 y hasta (pero sin incluir) el parámetro. Si se da un argumento y es un arreglo, retorna una elemento al azar del arreglo. Si se dan dos argumentos, retorna un número aleatorio entre el primer argumento y hasta (pero sin incluir) el segundo argumento."
+ "How quickly the volume is reduced as the source moves away from the listener"
],
+ "returns": "Number: updated value",
"params": {
- "min": "Número: el límite inferior (inclusivo)",
- "max": "Número: el límite superio (exclusivo)",
- "UNKNOWN-PARAM-3": "Arreglo: el arreglo del cual se elige"
- },
- "returns": "Número: el número aleatorio o un elemento aleatorio de un conjunto de opciones"
+ "rolloffFactor": "Number"
+ }
+ }
+ },
+ "p5.Delay": {
+ "description": [
+ "Delay is an echo effect. It processes an existing sound source, and outputs a delayed version of that sound. The p5.Delay can produce different effects depending on the delayTime, feedback, filter, and type. In the example below, a feedback of 0.5 (the default value) will produce a looping delay that decreases in volume by 50% each repeat. A filter will cut out the high frequencies so that the delay does not sound as piercing as the original source. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "leftDelay": {
+ "description": [
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
},
- "randomGaussian": {
+ "rightDelay": {
"description": [
- "Retorna un número aleatorio ajjustado a una distribución Gaussiana o normal. No existe teóricamente un valor mínimo o máximo que la función randomGaussian() pueda retornar. En vez de eso, existe solo una muy baja probabilidad de retornar valores lejos de la media, y una alta probabilidad de retornar números cercanos a la media. Acepta 0, 1 o 2 argumentos. Si no tiene argumentos, retorna una media de 0 y una desviación estándar de 1. Si tiene un argumento, el argumento es la media (y la desviación estándar es 1). Si tiene dos argumentos, el primero es la media y el segundo es la desviación estándar."
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
+ },
+ "process": {
+ "description": [
+ "Add delay to an audio signal according to a set of delay parameters."
],
"params": {
- "mean": "Número: la media",
- "sd": "Número: la desviación estándar"
- },
- "returns": "el número aleatorio"
+ "Signal": "Object: An object that outputs audio",
+ "delayTime": "Number: (Optional) Time (in seconds) of the delay/echo. Some browsers limit delayTime to 1 second.",
+ "feedback": "Number: (Optional) sends the delay back through itself in a loop that decreases in volume each time.",
+ "lowPass": "Number: (Optional) Cutoff frequency. Only frequencies below the lowPass will be part of the delay."
+ }
},
- "textAlign": {
+ "delayTime": {
"description": [
- "Define el alineamiento actual para dibujar texto. Acepta dos argumentos: horizAlign(LEFT, CENTER o RIGHT) y vertAlign(TOP, BOTTOM, CENTER, o BASELINE). El parámetro horizAlign se refiere al valor x de la función text(), mientras que vel parámetro vertAlign al valor y. Así que si escribes textAlign(LEFT), estás alineando el borde izquierdo de tu texto al valor x dado en la función text(). Si escribes textAlign(RIGHT, TOP), estás alineando el borde derecho de tu texto con el valor x y el borde superior con el valor y del texto."
+ "Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0."
],
"params": {
- "horizAlign": "Constante: alineamiento horizontal, puede ser LEFT, CENTER o RIGHT",
- "vertAlign": "Constante: alineamiento vertical, puede ser TOP, BOTTOM, CENTER o BASELINE"
- },
- "returns": "el objeto p5"
+ "delayTime": "Number: Time (in seconds) of the delay"
+ }
},
- "textLeading": {
+ "feedback": {
"description": [
- "Define o retorna el espaciado, en pixeles, entre líneas de texto. Esta configuración será usada en todas las llamadas posteriores a la función text()."
+ "Feedback occurs when Delay sends its signal back through its input in a loop. The feedback amount determines how much signal to send each time through the loop. A feedback greater than 1.0 is not desirable because it will increase the overall output each time through the loop, creating an infinite feedback loop. The default value is 0.5"
],
+ "returns": "Number: Feedback value",
"params": {
- "leading": "Número: el tamaño en pixeles de espaciamiento entre líneas"
- },
- "returns": "el objeto p5"
+ "feedback": "Number|Object: 0.0 to 1.0, or an object such as an Oscillator that can be used to modulate this param"
+ }
},
- "textSize": {
+ "filter": {
"description": [
- "Define o retorna el tamaño actual de la tipografía. Este tamaño será usado en todas las llamadas posteriores a la función text(). El tamaño de la tipografía es medido en pixeles."
+ "Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency."
],
"params": {
- "theSize": "Número: el tamaño en pixeles de las letras en pixeles"
- },
- "returns": "el objeto p5"
+ "cutoffFreq": "Number|Object: A lowpass filter will cut off any frequencies higher than the filter frequency.",
+ "res": "Number|Object: Resonance of the filter frequency cutoff, or an object (i.e. a p5.Oscillator) that can be used to modulate this parameter. High numbers (i.e. 15) will produce a resonance, low numbers (i.e. .2) will produce a slope."
+ }
},
- "textStyle": {
+ "setType": {
"description": [
- "Define o retorna el estilo actual de la tipografía. Puede ser NORMAL (normal), ITALIC (cursivo) o BOLD (destacado). Notar que puede ser anulado por estilo CSS. Para tipografías que no sean de sistema (opentype, truetype, etc.), usa loadFont()."
+ "Choose a preset type of delay. 'pingPong' bounces the signal from the left to the right channel to produce a stereo effect. Any other parameter will revert to the default delay setting."
],
"params": {
- "theStyle": "Número|Constante: estilo del texto, puede ser NORMAL, ITALIC o BOLD"
- },
- "returns": "el objeto p5"
+ "type": "String|Number: 'pingPong' (1) or 'default' (0)"
+ }
},
- "textWidth": {
+ "amp": {
"description": [
- "Calcula y retorna el ancho de cualquier caracter o string."
+ "Set the output level of the delay effect."
],
"params": {
- "theText": "String: el String de caracteres a medir"
- },
- "returns": "Número"
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
},
- "text": {
+ "connect": {
"description": [
- "Dibuja texto en la pantalla. Muestra la información especificada en el primer parámetro en la pantalla, en la posición especificada por los parámetros adicionales. Una fuente por defecto será usada a menos que una fuente sea definida por la función textFont() y un tamaño por defecto será usado a menos que se use la función textSize(). Cambia el color del texto con la función fill(). Cambia la apariencia del texto con las funciones stroke() y strokeWeight(). El texto se muestra en relación a la función textAlign(), que da la opción de dibujar a la izuiqerda, derecha y centro de las coordenadas. Los parámetros x2 e y2 definen un área rectangular donde mostrar el texto y solo puede ser usado por los datos tipo String. Cuando estos parámetros son especificados, son interpretados según la configuración de rectMode(). El texto que no cabe completamente dentro del rectángulo especificado no será dibujado en pantalla."
+ "Send output to a p5.sound or web audio object"
],
"params": {
- "str": "String: símbolos alfanuméricos a ser mostrados",
- "x": "Número: coordenada x del texto",
- "y": "Número: coordenada y del texto",
- "x2": "Número: por defecto, el ancho de la caja contenedora del texto, ver rectMode() para más información",
- "y2": "Número: por defecto, la altura de la caja contenedora del texto, ver rectMode() para más información"
- },
- "returns": "Objeto"
+ "unit": "Object"
+ }
},
- "textFont": {
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Reverb": {
+ "description": [
+ "Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has parameters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "process": {
"description": [
- "Define la función actual con la que se dibujará el contenido de la función text()"
+ "Connect a source to the reverb, and assign reverb parameters."
],
"params": {
- "font": "Objeto|String: una fuente cargada con loadFont(), o un String representando una tipografía segura de la web (una fuente ampliamente disponible a lo largo de todos los sistemas)."
- },
- "returns": "Objeto"
+ "src": "Object: p5.sound / Web Audio object with a sound output.",
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
},
- "append": {
+ "set": {
"description": [
- "Añade un valor al final de un arreglo. Extiende el largo de un arreglo en una unidad. Usa la función Array.push()"
+ "Set the reverb settings. Similar to .process(), but without assigning a new input."
],
"params": {
- "array": "Arreglo: Arreglo al que se agregará el dato",
- "value": "Cualquiera: a ser añadido al arreglo"
- },
- "returns": "el objeto p5"
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
},
- "arrayCopy": {
+ "amp": {
"description": [
- "Copia el arreglo (o una parte del arreglo) a otro arreglo. El arreglo fuente es copiado al arreglo de destino, empezando por la posición especificada por srcPosition y a la posición especificada por dstPosition. El número de elementos a copiar es determinado por el largo. Notar que al copiar valores se sobreescriben los valores existentes en el arreglo de destino. Para anexar valores en vez de sobreescribirlos, usa la función concat(). La versión simplificada con dos argumentos, arrayCopy(src, dest), copia un arreglo entero a otro del mismo tamaño. Es equivaletne a arrayCopy(src, 0, dst, 0, src.length). Usar esta función es mucho más eficiente para copiar datos de un arreglo que iterar con un bucle for() y copiar cada elemento individualmente. "
+ "Set the output level of the reverb effect."
],
"params": {
- "src": "Arreglo: el arreglo fuente",
- "srcPosition": "Número: posición inicial en el arreglo fuente",
- "dst": "Arreglo: el arreglo de destino",
- "dstPosition": "Número: posición inicial del arreglo de destino",
- "length": "Número: númeor de elementos del arreglo a ser copiados"
- },
- "returns": "el objeto p5"
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
},
- "concat": {
+ "connect": {
"description": [
- "Concatena dos arreglos, usa la función Array.concat(). No modifica los arreglos de entrada."
+ "Send output to a p5.sound or web audio object"
],
"params": {
- "a": "Arreglo: primer arreglo a concatenar",
- "b": "Arreglo: segundo arreglo a concatenar"
- },
- "returns": "Arreglo: el arreglo concatenado"
+ "unit": "Object"
+ }
},
- "reverse": {
- "description": ["Invierte el orden un arreglo, usa Array.reverse()."],
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Convolver": {
+ "description": [
+ "p5.Convolver extends p5.Reverb. It can emulate the sound of real physical spaces through a process called convolution . ",
+ "Convolution multiplies any audio input by an \"impulse response\" to simulate the dispersion of sound over time. The impulse response is generated from an audio file that you provide. One way to generate an impulse response is to pop a balloon in a reverberant space and record the echo. Convolution can also be used to experiment with sound. ",
+ "Use the method createConvolution(path) to instantiate a p5.Convolver with a path to your impulse response audio file."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call when loading succeeds",
+ "errorCallback": "Function: (Optional) function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong."
+ },
+ "convolverNode": {
+ "description": [
+ "Internally, the p5.Convolver uses the a Web Audio Convolver Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Connect a source to the convolver."
+ ],
"params": {
- "list": "Arreglo: arreglo a ser invertido"
- },
- "returns": "el objeto p5"
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
},
- "shorten": {
+ "impulses": {
"description": [
- "Disminuye un arreglo en un elemento y retorna el arreglo más corto, usa Array.pop()."
+ "If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method."
+ ]
+ },
+ "addImpulse": {
+ "description": [
+ "Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method."
],
"params": {
- "list": "Lista: arreglo a acortar"
- },
- "returns": "Arreglo: el arreglo acortado"
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
},
- "shuffle": {
+ "resetImpulse": {
"description": [
- "Ordena aleatoriamente los elementos de un arreglo. Implementa el algoritmo Fisher Yates."
+ "Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item."
],
"params": {
- "array": "Arreglo: Arreglo a ordenar",
- "bool": "Boolean: modifica el arreglo"
- },
- "returns": "Arreglo: retorna el arreglo ordenado"
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
},
- "sort": {
+ "toggleImpulse": {
"description": [
- "Ordena un arreglo de números, desde el más pequeño al más grande, o pone un arreglo de palabras en orden alfabético. El arreglo original no es modificado, un nuevo arreglo ordenado es retornado. El parámetro count define el número de elementos a ordenar. Por ejemplo, si hay 12 elementos en un arreglo y count es 5, los primeros 5 elementos del arreglo serán ordenados."
+ "If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses Array. Accepts a parameter to identify which impulse you wish to use, identified either by its original filename (String) or by its position in the .impulses Array (Number). You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename."
],
"params": {
- "list": "Arreglo: arreglo a ordenar",
- "count": "Número: número de elementos a ordenar, empezando desde 0"
- },
- "returns": "el objeto p5"
+ "id": "String|Number: Identify the impulse by its original filename (String), or by its position in the .impulses Array (Number)."
+ }
+ }
+ },
+ "p5.Phrase": {
+ "description": [
+ "A phrase is a pattern of musical events over time, i.e. a series of notes and rests. ",
+ "Phrases must be added to a p5.Part for playback, and each part can play multiple phrases at the same time. For example, one Phrase might be a kick drum, another could be a snare, and another could be the bassline. ",
+ "The first parameter is a name so that the phrase can be modified or deleted later. The callback is a a function that this phrase will call at every step—for example it might be called playNote(value){}. The array determines which value is passed into the callback at each step of the phrase. It can be numbers, an object with multiple numbers, or a zero (0) indicates a rest so the callback won't be called)."
+ ],
+ "params": {
+ "name": "String: Name so that you can access the Phrase.",
+ "callback": "Function: The name of a function that this phrase will call. Typically it will play a sound, and accept two parameters: a time at which to play the sound (in seconds from now), and a value from the sequence array. The time should be passed into the play() or start() method to ensure precision.",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
},
- "splice": {
+ "sequence": {
"description": [
- "Inserta un valor o un arreglo de valores en un arreglo existente El primer parámetro especifica el arreglo inicial a ser modificado, y el segundo parámetro define los datos a insertarse. El tercer parámetro es un índice que especifica la posición del arreglo a partir de la que se insertarán los datos. Recuerda que el índice del arreglo empieza en 0, así que la primera posición es 0, la segunda es 1, etc."
+ "Array of values to pass into the callback at each step of the phrase. Depending on the callback function's requirements, these values may be numbers, strings, or an object with multiple parameters. Zero (0) indicates a rest."
+ ]
+ }
+ },
+ "p5.Part": {
+ "description": [
+ "A p5.Part plays back one or more p5.Phrases. Instantiate a part with steps and tatums. By default, each step represents a 1/16th note. ",
+ "See p5.Phrase for more about musical timing."
+ ],
+ "params": {
+ "steps": "Number: (Optional) Steps in the part",
+ "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quarter note (default is 1/16, a sixteenth note)"
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo of this part, in Beats Per Minute."
],
"params": {
- "list": "Arreglo: arreglo a ser modificado",
- "value": "Cualquiera: valor a ser introducido",
- "position": "Número: posición del arreglo donde se inserta el dato"
- },
- "returns": "el objeto p5"
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: (Optional) Seconds from now"
+ }
},
- "subset": {
+ "getBPM": {
"description": [
- "Extrae un arreglo de elementos de un arreglo existente. El parámetro list define el arreglo desde el cual los elementos serán copiados, y los parámetros start y count especifican cuáles elementos extraer. Si no especifica count, los elementos serán extraidos desde el principio. Esta función no modifica el arreglo original"
+ "Returns the tempo, in Beats Per Minute, of this part."
],
- "params": {
- "list": "Arreglo: arreglo del cual se extrae",
- "start": "Número: posición de donde empezar a extraer",
- "count": "Número: número de valores a extraer"
- },
- "returns": "Arreglo: arreglo de elementos extraidos"
+ "returns": "Number: "
},
- "float": {
+ "start": {
"description": [
- "Convierte un String a su representación de punto flotante. Los contenidos de un String deben parecerse a un número, en otro caso NaN es retornado. Por ejemplo, float('1234.56') evalua a 1234.56, pero float('giraffe') retorna NaN. Cuando un arreglo de valores es pasado, un arreglo de floats del mismo largo es retornado."
+ "Start playback of this part. It will play through all of its phrases at a speed determined by setBPM."
],
"params": {
- "str": "String: string a ser procesado"
- },
- "returns": "Número: representación en punto flotante de un string"
+ "time": "Number: (Optional) seconds from now"
+ }
},
- "int": {
+ "loop": {
"description": [
- "Convierte un boolean, string o float a su representación en número entero. Cuando un arreglo de valores es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ "Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM."
],
"params": {
- "ns": "String|Boolean|Número|Arreglo: valor a procesar"
- },
- "returns": "Número: valor representado como entero"
+ "time": "Number: (Optional) seconds from now"
+ }
},
- "str": {
+ "noLoop": {
"description": [
- "Convierte un boolean, string, o número a su representación en string. Cuando un arreglo de valores es introducido, entonces un arreglo de strings de la misma longitud es retornado."
+ "Tell the part to stop looping."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again."
],
"params": {
- "n": "String|Boolean|Número|Arreglo: valor a procesar"
- },
- "returns": "String: valor representado como string"
+ "time": "Number: (Optional) seconds from now"
+ }
},
- "boolean": {
+ "pause": {
"description": [
- "Convierte un número o string a su representación en boolean. Para números, cualquier valor distinto de cero (positivo o ne gativo), evalua a true, mientras que cero evalua a falso. Para un string, el valor true evalua a true, mientras que cualquier otro valor evalua a falso. Cuando un arreglo de números o strings es introducido, entonces un arreglo de booleans de la misma longitud es retornado."
+ "Pause the part. Playback will resume from the current step."
],
"params": {
- "n": "String|Boolean|Número|Arreglo: valor a procesar"
- },
- "returns": "Boolean: representación en formato boolean del valor"
+ "time": "Number: seconds from now"
+ }
},
- "byte": {
+ "addPhrase": {
"description": [
- "Convierte un número, string o boolean a su representación en byte. Un byte puede solo ser un número entero entre -128 y 127, así que cuando un valor fuera de este rango es convertido, se hace wrap a la representación correspondiente en byte. Cuando un arreglo de números, string, o booleans es introducido, entonces un arreglo de bytes de la misma longitud es retornado."
+ "Add a p5.Phrase to this Part."
],
"params": {
- "n": "String|Boolean|Número|Arreglo: valor a procesar"
- },
- "returns": "Número: representación en formato byte del valor"
+ "phrase": "p5.Phrase: reference to a p5.Phrase"
+ }
},
- "char": {
+ "removePhrase": {
"description": [
- "Convierte un número o string a su representaciómo como un string de un único caracter. Si se provee un parámetro, es primero pasado como entero y luego evaluado como un string de un único caracter. Cuando un arreglo de números o strings es introducido, entonces un arreglo de strings de un único caracter de la misma longitud es retornado."
+ "Remove a phrase from this part, based on the name it was given when it was created."
],
"params": {
- "n": "String|Número|Arreglo: valor a procesar"
- },
- "returns": "String: representación en formato string del valor"
+ "phraseName": "String"
+ }
},
- "unchar": {
+ "getPhrase": {
"description": [
- "Convierte un string de un único caracter a su correspondiente representación como valor entero. Cuando un arreglo de strings de un caracter es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ "Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array."
],
"params": {
- "n": "String|Arreglo: valor a procesar"
- },
- "returns": "Número: representación en formato entero del valor"
+ "phraseName": "String"
+ }
},
- "hex": {
+ "replaceSequence": {
"description": [
- "Convierte un número a su correspondiente representación como hexadecimal. Si se ingersa un segundo parámetro, es usado para definir el número de caracteres a generar en la notación hexadecimal. Cuando un arreglo es introducido, entonces un arreglo de strings en notación hexadecimal de la misma longitud es retornado."
+ "Find all sequences with the specified name, and replace their patterns with the specified array."
],
"params": {
- "n": "Número|Arreglo: valor a procesar"
- },
- "returns": "String: representación en formato string hexadecimal del valor"
+ "phraseName": "String",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
+ }
},
- "unhex": {
+ "onStep": {
"description": [
- "Convierte una representación en string de un número hexadecimal a su correspondiente representación como valor entero. Cuando un arreglo de strings en notación hexadecimal es introducido, entonces un arreglo de enteros de la misma longitud es retornado."
+ "Set the function that will be called at every step. This will clear the previous function."
],
"params": {
- "n": "String|Arreglo: valor a procesar"
- },
- "returns": "Número: representación en formato entero del valor hexadecimal"
+ "callback": "Function: The name of the callback you want to fire on every beat/tatum."
+ }
+ }
+ },
+ "p5.Score": {
+ "description": [
+ "A Score consists of a series of Parts. The parts will be played back in order. For example, you could have an A part, a B part, and a C part, and play them back in this order new p5.Score(a, a, b, a, c)"
+ ],
+ "params": {
+ "parts": "p5.Part: (Optional) One or multiple parts, to be played in sequence."
},
- "join": {
+ "start": {
"description": [
- "Combina una arreglo de Strings en un String, cada uno separado por los caracteres usados como parámetro separator. Para unir arreglos de enteros o floats, es necesario primero convertirlos a Strings usando las funciones nf() o nfs()."
+ "Start playback of the score."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop playback of the score."
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pause playback of the score."
+ ]
+ },
+ "loop": {
+ "description": [
+ "Loop playback of the score."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes."
+ ]
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo for all parts in the score"
],
"params": {
- "list": "Arreglo: arreglo de Strings a ser unidos",
- "separator": "String: String a ser posicionado entre cada item"
- },
- "returns": "String: String unificado"
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ }
+ },
+ "p5.SoundLoop": {
+ "description": [
+ "SoundLoop"
+ ],
+ "params": {
+ "callback": "Function: this function will be called on each iteration of theloop",
+ "interval": "Number|String: (Optional) amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second."
},
- "match": {
+ "musicalTimeMode": {
+ "description": [
+ "musicalTimeMode uses Tone.Time convention true if string, false if number"
+ ]
+ },
+ "maxIterations": {
+ "description": [
+ "Set a limit to the number of loops to play. defaults to Infinity"
+ ]
+ },
+ "start": {
"description": [
- "Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de largo 1 (con el texto coincidente como primer elemento del arreglo) será retornado. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[0] de una coincidencia de expresión regular retorna el string coincidente, y el grupo de coincidencia empieza en el elemento[1] (el primer grupo es [1], el segundo es [2], etc)."
+ "Start the loop"
],
"params": {
- "str": "String: el String a ser buscado",
- "regexp": "String: la expresión regular a ser usada para buscar coincidencias"
- },
- "returns": "Arreglo: arreglo de Strings encontrados"
+ "timeFromNow": "Number: (Optional) schedule a starting time"
+ }
},
- "matchAll": {
+ "stop": {
"description": [
- "Esta función es usada para aplicar una expresión regular a una porción de texto, y retorna una lista de grupos coincidentes (elementos encontrados entre paréntesis) como un arreglo de Strings bidimensional. Si no existen coincidencias, se retorna el valor null. Si no se especifican grupos en la expresión regular, pero la secuencia coincide, un arreglo de dos dimensiones es retornado, pero es de largo 1. Para usar la función, primero comprueba si el resultado es null. Si el resultado es null, entonces la secuencia no tuvo coincidencias. Si la secuencia tuvo coincidencias, retorna un arreglo 2D. Si exsiten grupos (especificados como conjuntos de paréntesis) en la expresión regular, entonces los contenidos de cada uno serán retornados en el arreglo. El elemento[i][0] de una coincidencia de expresión regular retorna el string coincidente completo, y el grupo de coincidencia empieza en el elemento[i][1] (el primer grupo es [i][1], el segundo es [i][2], etc)."
+ "Stop the loop"
],
"params": {
- "str": "String: el String a ser buscado",
- "regexp": "String: la expresión regular a ser usada para buscar coincidencias"
- },
- "returns": "Arreglo: arreglo 2D de Strings encontrados"
+ "timeFromNow": "Number: (Optional) schedule a stopping time"
+ }
},
- "nf": {
+ "pause": {
"description": [
- "Función de utilidad para formatear números a strings. Existen dos veriones: una para formatear floats, y una para formatear enteros. Los valores de los dígitos y los parámetros left y right siempre deben ser enteros positivos"
+ "Pause the loop"
],
"params": {
- "num": "Número|Arreglo: el número a formatear",
- "left": "Número: número de dígitos a la izquierda del punto decimal",
- "right": "Número: número de dígitos a la derecha del punto decimal"
- },
- "returns": "String|Arreglo: String formateada"
+ "timeFromNow": "Number: (Optional) schedule a pausing time"
+ }
},
- "nfc": {
+ "syncedStart": {
"description": [
- "Función de utilidad para formatear números en strings y poner las comas apropiadas para señalar múltiplos de mil. Hay dos versiones: una para números enteros y otra para arreglos de enteros. El valor del parámetro right debe siempre ser un entero positivo."
+ "Synchronize loops. Use this method to start two more more loops in synchronization or to start a loop in synchronization with a loop that is already playing This method will schedule the implicit loop in sync with the explicit master loop i.e. loopToStart.syncedStart(loopToSyncWith)"
],
"params": {
- "num": "Número|Arreglo: el número a formatear",
- "right": "Número: número de dígitos a la derecha del punto decimal"
- },
- "returns": "String|Arreglo: String formateada"
+ "otherLoop": "Object: a p5.SoundLoop to sync with",
+ "timeFromNow": "Number: (Optional) Start the loops in sync after timeFromNow seconds"
+ }
},
- "nfp": {
+ "bpm": {
"description": [
- "Función de utilidad para formatear números en strings. Similar a nf() pero pone un signo + en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos."
+ "Getters and Setters, setting any paramter will result in a change in the clock's frequency, that will be reflected after the next callback beats per minute (defaults to 60)"
+ ]
+ },
+ "timeSignature": {
+ "description": [
+ "number of quarter notes in a measure (defaults to 4)"
+ ]
+ },
+ "interval": {
+ "description": [
+ "length of the loops interval"
+ ]
+ },
+ "iterations": {
+ "description": [
+ "how many times the callback has been called so far"
+ ]
+ }
+ },
+ "p5.Compressor": {
+ "description": [
+ "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on individual sound sources in addition to the master output. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "compressor": {
+ "description": [
+ "The p5.Compressor is built with a Web Audio Dynamics Compressor Node "
+ ]
+ },
+ "process": {
+ "description": [
+ "Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams"
],
"params": {
- "num": "Número|Arreglo: el número a formatear",
- "left": "Número: número de dígitos a la izquierda del punto decimal",
- "right": "Número: número de dígitos a la derecha del punto decimal"
- },
- "returns": "String|Arreglo: String formateada"
+ "src": "Object: Sound source to be connected",
+ "attack": "Number: (Optional) The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: (Optional) The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: (Optional) The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
},
- "nfs": {
+ "set": {
"description": [
- "Función de utilidad para formatear números en strings. Similar a nf() pero pone un espacio en frente de los números positivos y un signo - en frente de números negativos. Hay dos versiones, una para formatear floats y otra para formatear enteros. Los valores de los parámetros left y right deben siempre ser enteros positivos."
+ "Set the parameters of a compressor."
],
"params": {
- "num": "Número|Arreglo: el número a formatear",
- "left": "Número: número de dígitos a la izquierda del punto decimal",
- "right": "Número: número de dígitos a la derecha del punto decimal"
- },
- "returns": "String|Arreglo: String formateada"
+ "attack": "Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
},
- "split": {
+ "attack": {
"description": [
- "La función split usa String.split(), corta un String en pedazos usando un caracter o String como delimitador. El parámetro delim especifica el caracter o caracteres que marcan los bordes entre cada pieza. Un arreglo String[] es retornado, que contiene cada una de las piezas. La función splitTokens() funciona de forma similar, excepto que divide usango un rango de caracteres en vez de usar un caracter o una secuencia de caracteres específicos."
+ "Get current attack or set value w/ time ramp"
],
"params": {
- "value": "String: el String a ser dividido",
- "delim": "String: el String usado para separar los datos"
- },
- "returns": "Arreglo: arreglo de Strings"
+ "attack": "Number: (Optional) Attack is the amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "splitTokens": {
+ "knee": {
"description": [
- "La función splitTokens() divide un String en uno o varios caracteres delimitadores o tokens. El parámetro delim especifica el o los caracteres a ser usados como borde. Si no se especifican caracteres delim, cualquier caracter tipo whitespace será usado para dividir. Los caracteres whitespace incluyen tabulación (\t), nueva línea (\n), retorno de carro (\r), entrada de formulario (\f), y espacio."
+ "Get current knee or set value w/ time ramp"
],
"params": {
- "value": "String: el String a ser dividido",
- "delim": "String: lista de Strings individuales que serán usados como separadores"
- },
- "returns": "Arreglo: arreglo de Strings"
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "trim": {
+ "ratio": {
"description": [
- "Remueve caracteres tipo whitespace (espacio en blanco) del comienzo y el final de un String. En adición a los caracteres estámdar de whitespace como espacio, retorno de carro y tabulación, esta función también remueve el caracter Unicode nbsp."
+ "Get current ratio or set value w/ time ramp"
],
"params": {
- "column": "String|Arreglo: un String o arreglo de Strings a ser recortados."
- },
- "returns": "String|Arreglo: un String o arreglo de Strings recortados."
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "camera": {
- "description": ["Define la posición de la cámara"],
+ "threshold": {
+ "description": [
+ "Get current threshold or set value w/ time ramp"
+ ],
"params": {
- "x": "Número: valor de la posición de la cámara en el eje x",
- "y": "Número: valor de la posición de la cámara en el eje y",
- "z": "Número: valor de la posición de la cámara en el eje z"
- },
- "returns": "p5: el objeto p5"
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "perspective": {
- "description": ["Define la perspectiva de la cámara"],
+ "release": {
+ "description": [
+ "Get current release or set value w/ time ramp"
+ ],
"params": {
- "fovy": "Número: frustum del campo de visión vertical de la cámara, de abajo hacia arriba, en grados",
- "aspect": "Número: frustum de la relación de aspecto de la cámara",
- "near": "Número: frustum del largo del plano cercano",
- "far": "Número: frustum del largo del plano lejano"
- },
- "returns": "p5: el objeto p5"
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "ortho": {
- "description": ["Define la cámara ortogonal"],
+ "reduction": {
+ "description": [
+ "Return the current reduction value"
+ ],
+ "returns": "Number: Value of the amount of gain reduction that is applied to the signal"
+ }
+ },
+ "p5.SoundRecorder": {
+ "description": [
+ "Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or can be assigned a specific source with setInput(). ",
+ "The record() method accepts a p5.SoundFile as a parameter. When playback is stopped (either after the given amount of time, or with the stop() method), the p5.SoundRecorder will send its recording to that p5.SoundFile for playback."
+ ],
+ "setInput": {
+ "description": [
+ "Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch."
+ ],
"params": {
- "left": "Número: define el frustum del plano izquierdo de la cámara",
- "right": "Número: define el frustum del plano derecho de la cámara",
- "bottom": "Número: define el frustum del plano inferior de la cámara",
- "top": "Número: define el frustum del plano superior de la cámara",
- "near": "Número: define el frustum del plano cercano de la cámara",
- "far": "Número: define el frustum del plano lejano de la cámara"
- },
- "returns": "p5: el objeto p5"
+ "unit": "Object: (Optional) p5.sound object or a web audio unit that outputs sound"
+ }
},
- "ambientLight": {
- "description": ["Crea una luz ambiente con color"],
+ "record": {
+ "description": [
+ "Start recording. To access the recording, provide a p5.SoundFile as the first parameter. The p5.SoundRecorder will send its recording to that p5.SoundFile for playback once recording is complete. Optional parameters include duration (in seconds) of the recording, and a callback function that will be called once the complete recording has been transfered to the p5.SoundFile."
+ ],
"params": {
- "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
- "v2": "Número: opcional, valor de verde o saturación",
- "v3": "Número: opcional, valor de azul o brillo",
- "alpha": "Número: opcional, valor de opacidad"
- },
- "returns": "el objeto p5"
+ "soundFile": "p5.SoundFile: p5.SoundFile",
+ "duration": "Number: (Optional) Time (in seconds)",
+ "callback": "Function: (Optional) The name of a function that will be called once the recording completes"
+ }
},
- "directionalLight": {
- "description": ["Crea una luz direccional con color y dirección"],
- "params": {
- "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
- "v2": "Número: opcional, valor de verde o saturación",
- "v3": "Número: opcional, valor de azul o brillo",
- "x": "Número: opcional, valor de opacidad",
- "y": "Número|p5.Vector: dirección del eje x o un p5.Vector",
- "z": "Número: opcional, dirección del eje y",
- "UNKNOWN-PARAM-7": "Número: opcional, dirección del eje z"
- },
- "returns": "el objeto p5"
+ "stop": {
+ "description": [
+ "Stop the recording. Once the recording is stopped, the results will be sent to the p5.SoundFile that was given on .record(), and if a callback function was provided on record, that function will be called."
+ ]
+ }
+ },
+ "p5.PeakDetect": {
+ "description": [
+ "PeakDetect works in conjunction with p5.FFT to look for onsets in some or all of the frequency spectrum. ",
+ " To use p5.PeakDetect, call update in the draw loop and pass in a p5.FFT object. ",
+ " You can listen for a specific part of the frequency spectrum by setting the range between freq1 and freq2. ",
+ "threshold is the threshold for detecting a peak, scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud as 1.0. ",
+ " The update method is meant to be run in the draw loop, and frames determines how many loops must pass before another peak can be detected. For example, if the frameRate() = 60, you could detect the beat of a 120 beat-per-minute song with this equation: framesPerPeak = 60 / (estimatedBPM / 60 ); ",
+ " Based on example contribtued by @b2renger, and a simple beat detection explanation by Felix Turner . "
+ ],
+ "params": {
+ "freq1": "Number: (Optional) lowFrequency - defaults to 20Hz",
+ "freq2": "Number: (Optional) highFrequency - defaults to 20000 Hz",
+ "threshold": "Number: (Optional) Threshold for detecting a beat between 0 and 1 scaled logarithmically where 0.1 is 1/2 the loudness of 1.0. Defaults to 0.35.",
+ "framesPerPeak": "Number: (Optional) Defaults to 20."
},
- "pointLight": {
- "description": ["Crea una luz puntual con color y posición"],
- "params": {
- "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color actual), o arreglo de color o String de color CSS",
- "v2": "Número: opcional, valor de verde o saturación",
- "v3": "Número: opcional, valor de azul o brillo",
- "x": "Número: opcional, valor de opacidad",
- "y": "Número|p5.Vector: dirección del eje x o un p5.Vector",
- "z": "Número: opcional, dirección del eje y",
- "UNKNOWN-PARAM-7": "Número: opcional, dirección del eje z"
- },
- "returns": "p5: el objeto p5"
+ "isDetected": {
+ "description": [
+ "isDetected is set to true when a peak is detected."
+ ]
},
- "normalMaterial": {
+ "update": {
"description": [
- "Material normal para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ "The update method is run in the draw loop. ",
+ "Accepts an FFT object. You must call .analyze() on the FFT object prior to updating the peakDetect because it relies on a completed FFT analysis."
],
- "returns": "p5: el objeto p5"
+ "params": {
+ "fftObject": "p5.FFT: A p5.FFT object"
+ }
},
- "texture": {
+ "onPeak": {
"description": [
- "Textura para geometría. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ "onPeak accepts two arguments: a function to call when a peak is detected. The value of the peak, between 0.0 and 1.0, is passed to the callback."
],
"params": {
- "tex": "p5.Image|p5.MediaElement|p5.Graphics: gráfica bidimensional para hacer render como textura."
- },
- "returns": "p5: el objeto p5"
- },
- "ambientMaterial": {
+ "callback": "Function: Name of a function that will be called when a peak is detected.",
+ "val": "Object: (Optional) Optional value to pass into the function when a peak is detected."
+ }
+ }
+ },
+ "p5.Gain": {
+ "description": [
+ "A gain node is useful to set the relative volume of sound. It's typically used to build mixers."
+ ],
+ "setInput": {
"description": [
- "Material ambiente para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ "Connect a source to the gain node."
],
"params": {
- "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS",
- "v2": "Número: opcional, valor de verde o saturación",
- "v3": "Número: opcional, valor de azul o brillo",
- "UNKNOWN-PARAM-4": "Número: opcional, valor de opacidad"
- },
- "returns": "p5: el objeto p5"
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
},
- "specularMaterial": {
+ "connect": {
"description": [
- "Material espejo para geometría con un color dado. Puedes ver todos los posibles materiales en este ejemplo (TODO)."
+ "Send output to a p5.sound or web audio object"
],
"params": {
- "v1": "Número|Arreglo|String|p5.Color: valor de gris, rojo o tinte (dependiendo del modo de color), o arreglo de color, o String de color CSS",
- "v2": "Número: opcional, valor de verde o saturación",
- "v3": "Número: opcional, valor de azul o brillo",
- "UNKNOWN-PARAM-4": "Número: opcional, valor de opacidad"
- },
- "returns": "p5: el objeto p5"
- }
- },
- "p5.RendererGL": {
- "returns": "p5: el objeto p5"
- },
- "p5.Shader": {
- "description": ["Clase Shader para el modo WEBGL"],
- "params": {
- "renderer": "p5.RendererGL: una instancia de p5.RendererGL que servirá de contexto GL para este nuevo p5.Shader",
- "vertSrc": "String: código fuente para el vertex shader (en forma de string)",
- "fragSrc": "String: código fuente para el fragment shader (en forma de string)"
+ "unit": "Object"
+ }
},
- "setUniform": {
+ "disconnect": {
"description": [
- "Wrapper de las funciones gl.uniform. Como almacenamos información de uniform en el shader, la podemos usar para revisar los datos provistos y llamar a la función apropiada."
+ "Disconnect all output."
]
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the gain node."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
}
},
- "p5.Table": {
+ "p5.Distortion": {
"description": [
- "Los objetos Table almacenan datos con múltiples filas y columnas, tal como una hoja de cálculo tradicional. Los objetos Table pueden ser generados desde cero, dinámicamente, o usando datos desde un archivo existente."
+ "A Distortion effect created with a Waveshaper Node, with an approach adapted from Kevin Ennis ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
],
"params": {
- "rows": "Arreglo: un arreglo de objetos p5.TableRow"
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
},
- "returns": "p5.Table: el objeto p5.Table generado"
- },
- "p5.TableRow": {
- "description": [
- "Un objeto TableRow representa una única fila de datos, grabados en columnas, de una tabla. Un objeto TableRow contiene tanto un arreglo ordenado, como un objeto JSON desordenado."
- ],
- "params": {
- "str": "String: opcional, puebla la fila con una serie de valores, separados por el separador",
- "separator": "String: por defecto, valores separados por coma (csv)"
+ "WaveShaperNode": {
+ "description": [
+ "The p5.Distortion is built with a Web Audio WaveShaper Node ."
+ ]
},
- "returns": "el objeto p5"
- },
- "p5.XML": {
- "description": [
- "XML es una representación de un objeto XML, capaz de procesar código XML. Usa loadXML() para cargar archivos externos XML y crear objetos XML"
- ],
- "params": {
- "UNKNOWN-PARAM-1": "String:"
+ "process": {
+ "description": [
+ "Process a sound source, optionally specify amount and oversample values."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
},
- "returns": "p5.XML: el objeto p5.XML generado"
- },
- "p5.Vector": {
- "description": [
- "Una clase para describir un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. El tipo de datos, sin embargo, graba los componentes del vector (x, y para 2D y x,y,z para 3D). La magnitud y la dirección pueden ser calculados con los métodos mag() y heading(). En muchos de los ejemplos de p5.js, verás que p5.Vector es usado para describir una posición, velocidad o aceleración. Por ejemplo, si consideras un rectángulo moviéndose a lo largo de la pantalla, en cada instante tiene una posición (un vector que apunta desde el origen hasta su ubicación), una velocidad(la tasa a la que la posición del objeto cambia por unidad de tiempo, expresada como vector), y aceleración (la tasa a la que la velocidad del objeto cambia por unidad de tiempo, expresada como vector). Como los vectores representan grupos de valores, no podemos simplemente usar las operaciones tradicionales de adición, multiplicación, etc. En vez de eso, necesitaremos hacer matemática de vectores, lo que es simplificado con los métodos dentro de la clase p5.Vector."
- ],
- "params": {
- "x": "Número: componente x del vector",
- "y": "Número: componente y del vector",
- "z": "Número: componente z del vector"
+ "set": {
+ "description": [
+ "Set the amount and oversample of the waveshaper distortion."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
},
- "returns": "el objeto p5"
- },
- "p5.Font": {
- "description": ["Clase base para manipulación de tipografía"],
- "params": {
- "pInst": "Objeto: puntero a la instancia p5"
+ "getAmount": {
+ "description": [
+ "Return the distortion amount, typically between 0-1."
+ ],
+ "returns": "Number: Unbounded distortion amount. Normal values range from 0-1."
},
- "returns": "el objeto p5"
- },
- "p5.Element": {
- "description": [
- "Clase base para todos los elementos añadidos al bosuqejo, incluyendo lienzo, buffers de gráficas, y otros elementos HTML. Los métodos en azul están incluidos en la funcionalidad base, los métodos en marrón son añadidos con la biblioteca p5.dom. No se ejecutan directamente, pero los objetos p5.Element son creados llamando a las funciones createCanvas(), createGraphics(), o en la biblioteca p5.dom, createDiv, createImg, createInput, etc."
- ],
- "params": {
- "elt": "String: node DOM envolvente.",
- "pInst": "Objeto: puntero a instancia p5."
+ "getOversample": {
+ "description": [
+ "Return the oversampling."
+ ],
+ "returns": "String: Oversample can either be 'none', '2x', or '4x'."
}
}
}
\ No newline at end of file
diff --git a/src/data/reference/ko.json b/src/data/reference/ko.json
index c46d0eff96..18cc7c18e9 100644
--- a/src/data/reference/ko.json
+++ b/src/data/reference/ko.json
@@ -2,14 +2,10 @@
"h1": "레퍼런스",
"reference-search": "API 검색",
"reference-description1": "찾는 항목이 없다면, 다음의 페이지를 살펴보세요:",
- "reference-description2": "",
"reference-description3": "오프라인 버전 다운로드",
- "reference-contribute1": "잘못된 부분이나 제안사항이 있다면",
"reference-contribute2": "여기로 알려주세요.",
"reference-error1": "오타나 버그를 발견했다면",
- "reference-error2": "관련 문서는 이곳에 있습니다: ",
"reference-error3": "p5.js에 기여하고 싶다면, ",
- "reference-error4": "파일을 수정하고",
"reference-error5": "에 풀 리퀘스트(pull request) 해주세요!",
"reference-example": "예제",
"reference-description": "설명",
@@ -18,26 +14,24 @@
"reference-syntax": "문법",
"reference-returns": "반환",
"Color": "색상",
- "Shape": "도형",
+ "Color Conversion": "Color Conversion",
"Creating & Reading": "만들기 & 읽기",
"Setting": "설정하기",
+ "Shape": "도형",
"2D Primitives": "2D 기본 조형",
"Attributes": "설정 속성",
"Curves": "곡선",
"Vertex": "꼭지점",
- "3D Models": "3D 모델",
- "3D Primitives": "3D 기본 조형",
"Constants": "상수",
- "Structure": "구조",
"Environment": "환경 설정",
+ "Structure": "구조",
"DOM": "DOM",
"Rendering": "렌더링",
+ "Foundation": "Foundation",
"Transform": "변형",
"Data": "데이터",
+ "LocalStorage": "LocalStorage",
"Dictionary": "사전",
- "Array Functions": "배열 기능",
- "Conversion": "변환",
- "String Functions": "문자열 기능",
"Events": "이벤트",
"Acceleration": "가속도",
"Keyboard": "키보드",
@@ -50,218 +44,257 @@
"Input": "입력",
"Output": "출력",
"Table": "테이블",
- "Time & Date": "날짜 & 시간",
- "XML": "XML",
"Math": "수학",
- "Vector": "벡터",
"Calculation": "계산",
- "Random": "랜덤",
+ "Vector": "벡터",
"Noise": "노이즈",
+ "Random": "랜덤",
"Trigonometry": "삼각법",
"Typography": "타이포그래피",
- "Font": "폰트",
+ "Array Functions": "배열 기능",
+ "Conversion": "변환",
+ "String Functions": "문자열 기능",
+ "Time & Date": "날짜 & 시간",
+ "3D Primitives": "3D 기본 조형",
"Lights, Camera": "조명, 카메라",
"Interaction": "인터랙션",
- "Camera": "카메라",
"Lights": "조명",
+ "3D Models": "3D 모델",
"Material": "재질(Material)",
+ "Camera": "카메라",
"p5": {
+ "description": [
+ "p5 인스턴스 생성자 입니다.",
+ "p5 인스턴스는 p5 스케치와 관련된 모든 속성과 메소드를 보유합니다. 도래할 스케치 클로저(closure)를 예상하고, 생성된 p5 캔버스를 노드에 연결하기 위해 선택적으로 노드 매개변수를 취할 수 있습니다. 스케치 클로저는 새로이 생성된 p5 인스턴스를 유일한 인수로 취하며, 또 선택적으로, 스케치 실행을 위해 preload() , setup() , 그리고/또는 draw() 속성을 담을 수 있습니다.",
+ "p5 스케치는 \"전역\" 또는 \"인스턴스\" 모드에서 실행됩니다: \"전역 모드\" - 모든 속성과 메소드가 윈도우에 속함 \"인스턴스 모드\" - 모든 속성과 메소드가 특정 p5 객체에 구속됨"
+ ],
+ "returns": "P5: p5 인스턴스",
+ "params": {
+ "sketch": "함수: 주어진 p5 인스턴스에 선택적으로 preload() , setup() , 그리고/또는 draw() 속성을 설정할 수 있는 클로저",
+ "node": "HTMLElement: (선택 사항) 캔버스에 속할 요소"
+ },
"alpha": {
"description": [
"픽셀 배열로부터 알파값을 추출합니다."
],
+ "returns": "알파값",
"params": {
"color": "p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상"
- },
- "returns": "알파값"
+ }
},
"blue": {
"description": [
"색상 또는 픽셀 배열로부터 파랑값을 추출합니다."
],
+ "returns": "파랑값",
"params": {
"color": "p5.Color 객체, 색상 요소, CSS 색상"
- },
- "returns": "파랑값"
+ }
},
"brightness": {
"description": [
"색상 또는 픽셀 배열로부터 HSB 밝기값을 추출합니다."
],
+ "returns": "밝기값",
"params": {
"color": "p5.Color 객체, 색상 요소, CSS 색상"
- },
- "returns": "밝기값"
+ }
},
"color": {
"description": [
- "색상 함수를 이용해 색상 데이터의 매개변수를 저장해보세요. 이 때, 매개변수는 colorMode()의 설정에 따라 RGB 또는 HSB 값으로 처리됩니다. 기본 모드인 RGB값은 0부터 255까지이며, 따라서 color(255,204,0)와 같은 함수는 밝은 노랑색을 반환하게 됩니다. 만약에 color() 함수에 매개변수가 1개만 적히면, 회색 음영(grayscale)값으로 처리됩니다. 여기에 추가되는 두번째 변수는 투명도를 설정할 수 있는 알파값으로서 처리됩니다. 세번째 변수가 추가되었을 때 비로소 RGB나 HSB값으로 처리되지요. RGB나 HSB값을 정하는 3개의 변수가 존재할 때 추가되는 네번째 변수는 알파값으로 적용됩니다. 나아가, p5는 RGB, RGBA, Hex CSS 색상 문자열과 모든 색상명 문자열 역시 지원합니다. 그 경우, 알파값은 괄호 내 2번째 매개변수 추가를 통해서가 아닌, RGBA 형식에 따라 지정될 수 있습니다."
+ "색상 함수를 이용해 색상 데이터의 매개변수를 저장해보세요. 이 때, 매개변수는 colorMode()의 설정에 따라 RGB 또는 HSB 값으로 처리됩니다. 기본 모드인 RGB값은 0부터 255까지이며, 따라서 color(255,204,0)와 같은 함수는 밝은 노랑색을 반환하게 됩니다. 만약에 color() 함수에 매개변수가 1개만 적히면, 회색 음영(grayscale)값으로 처리됩니다. 여기에 추가되는 두번째 변수는 투명도를 설정할 수 있는 알파값으로서 처리됩니다. 세번째 변수가 추가되었을 때 비로소 RGB나 HSB값으로 처리되지요. RGB나 HSB값을 정하는 3개의 변수가 존재할 때 추가되는 네번째 변수는 알파값으로 적용됩니다. 나아가, p5는 RGB, RGBA, Hex CSS 색상 문자열과 모든 색상명 문자열 역시 지원합니다. 그 경우, 알파값은 괄호 내 2번째 매개변수 추가를 통해서가 아닌, RGBA 형식에 따라 지정될 수 있습니다.",
+ "",
+ ""
],
+ "returns": "색상 결과",
"params": {
- "v1": "숫자: 흑과 백 사이의 값 지정",
- "v2": "숫자: 현재 색상 범위(기본값: 0-255)에 대한 알파값)",
- "v3": "숫자: 현재 색상 범위 내 빨강색(R) 또는 색조값 지정",
- "alpha": "숫자: 현재 색상 범위 내 파랑색(B) 또는 색조값 지정",
- "UNKNOWN-PARAM-5": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-6": "숫자[]: RGB 및 알파값을 포함한 숫자열"
- },
- "returns": "색상 결과"
+ "gray": "숫자: 흑과 백 사이의 값 지정",
+ "alpha": "숫자: 현재 색상 범위(기본값: 0-255)에 대한 알파값)",
+ "v1": "숫자: 현재 색상 범위 내 빨강색(R) 또는 색조값 지정",
+ "v2": "Number: green or saturation value relative to the current color range",
+ "v3": "숫자: 현재 색상 범위 내 파랑색(B) 또는 색조값 지정",
+ "value": "문자열: 색상 문자열",
+ "values": "숫자[]: RGB 및 알파값을 포함한 숫자열",
+ "color": "p5.Color"
+ }
},
"green": {
"description": [
"색상 또는 픽셀 배열로부터 초록값을 추출합니다."
],
+ "returns": "초록값",
"params": {
"color": "p5.Color 객체, 색상 요소, CSS 색상"
- },
- "returns": "초록값"
+ }
},
"hue": {
"description": [
- "색상 또는 픽셀 배열로부터 색조를 추출합니다. 색조는 HSB와 HSL상 모두 존재합니다. 이 함수는 HSB 색상 객체를 사용할 경우(또는 HSB 색상 모드로 지정된 픽셀 배열을 사용할 경우) HSB로 표준화된 색조 값을 반환합니다. 기본값으로는 HSL로 표준화된 색조를 반환합니다. (단, 최대 색조를 별도 지정한 경우 다른 값을 반환합니다.)"
+ "색상 또는 픽셀 배열로부터 색조를 추출합니다. 색조는 HSB와 HSL상 모두 존재합니다. 이 함수는 HSB 색상 객체를 사용할 경우(또는 HSB 색상 모드로 지정된 픽셀 배열을 사용할 경우) HSB로 표준화된 색조 값을 반환합니다. 기본값으로는 HSL로 표준화된 색조를 반환합니다. (단, 최대 색조를 별도 지정한 경우 다른 값을 반환합니다.)",
+ ""
],
+ "returns": "색조",
"params": {
"color": "객체, 색상 요소 또는 CSS 색상"
- },
- "returns": "색조"
+ }
},
"lerpColor": {
"description": [
- "두 가지 색상을 혼합하고, 그 사이에 존재하는 제 3의 색상을 찾습니다. 여기서 매개변수 amt는 두 개의 값 사이를 선형적으로 보간합니다. 예를 들어, 0.0은 첫 번째 값과 동일한 색상값을, 0.1은 첫 번째 값에 매우 가까운 색상값을, 0.5는 두 값 사이의 중간 색상값을 나타내는 식입니다. 이 때, 0 미만의 값은 0으로, 1이상의 값은 1로 자동 변환됩니다. 이 점에서 lerpColor()는 lerp()와 다르게 작동하는 셈인데, 이처럼 lerpColor()는 색상값을 0과 1사이로 조정하여 지정된 범위를 벗어난 색상 생성을 방지합니다. 또한, 색상이 보간되는 방식은 현재 지정된 색상 모드에 따라 달라집니다."
+ "두 가지 색상을 혼합하고, 그 사이에 존재하는 제 3의 색상을 찾습니다. 여기서 매개변수 amt는 두 개의 값 사이를 선형적으로 보간합니다. 예를 들어, 0.0은 첫 번째 값과 동일한 색상값을, 0.1은 첫 번째 값에 매우 가까운 색상값을, 0.5는 두 값 사이의 중간 색상값을 나타내는 식입니다. 이 때, 0 미만의 값은 0으로, 1이상의 값은 1로 자동 변환됩니다. 이 점에서 lerpColor()는 lerp()와 다르게 작동하는 셈인데, 이처럼 lerpColor()는 색상값을 0과 1사이로 조정하여 지정된 범위를 벗어난 색상 생성을 방지합니다. 또한, 색상이 보간되는 방식은 현재 지정된 색상 모드에 따라 달라집니다.",
+ ""
],
+ "returns": "p5.Color: 선형적으로 보간된 색상",
"params": {
"c1": "이 색상으로부터 선형 보간",
"c2": "이 색상을 향해 선형 보간",
"amt": "숫자: 0과 1 사이의 숫자"
- },
- "returns": "p5.Color: 선형적으로 보간된 색상"
+ }
},
"lightness": {
"description": [
"색상 또는 픽셀 배열로부터 HSL 명도를 추출합니다."
],
+ "returns": "숫자: 명도",
"params": {
"color": "p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상"
- },
- "returns": "숫자: 명도"
+ }
},
"red": {
"description": [
"색상 또는 픽셀 배열로부터 빨강값을 추출합니다."
],
+ "returns": "숫자: 빨강값",
"params": {
"color": "p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상"
- },
- "returns": "숫자: 빨강값"
+ }
},
"saturation": {
"description": [
- "색상 또는 픽셀 배열로부터 채도값을 추출합니다. 채도값은 HSB와 HSL에서 각각 다르게 측정됩니다. 이 함수는 HSL 채도를 기본값으로 제공합니다. 하지만, HSB 색상 객체가 제공 될 때 (또는 색상 모드가 HSB이면서 픽셀 배열이 제공될 때) HSB 채도값을 반환합니다."
+ "색상 또는 픽셀 배열로부터 채도값을 추출합니다. 채도값은 HSB와 HSL에서 각각 다르게 측정됩니다. 이 함수는 HSL 채도를 기본값으로 제공합니다. 하지만, HSB 색상 객체가 제공 될 때 (또는 색상 모드가 HSB이면서 픽셀 배열이 제공될 때) HSB 채도값을 반환합니다.",
+ ""
],
+ "returns": "숫자: 채도값",
"params": {
"color": "p5.Color|숫자 배열[]|문자열: p5.Color 객체, 색상 요소 또는 CSS 색상"
- },
- "returns": "숫자: 채도값"
+ }
},
"background": {
"description": [
- "background() 함수는 p5.js 캔버스의 배경색을 설정합니다. 배경색의 기본값은 투명입니다. 이 함수는 주로 draw() 함수 안에 위치하며, 매 프레임마다 윈도우 화면을 초기화하기 위해 사용됩니다. 하지만, 애니메이션의 첫 프레임 배경을 지정하거나 배경색을 최초 한번만 지정할 경우, setup() 함수 안에 쓰이기도 합니다. 색상은 현재 색상 모드(colorMode)에 따라 RGB, HSB, 또는 HSL값으로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다. p5.Color 객체를 통해 배경색을 설정할 수 있습니다. p5.Image를 통해 배경 이미지를 설정할 수 있습니다."
+ "background() 함수는 p5.js 캔버스의 배경색을 설정합니다. 배경색의 기본값은 투명입니다. 이 함수는 주로 draw() 함수 안에 위치하며, 매 프레임마다 윈도우 화면을 초기화하기 위해 사용됩니다. 하지만, 애니메이션의 첫 프레임 배경을 지정하거나 배경색을 최초 한번만 지정할 경우, setup() 함수 안에 쓰이기도 합니다. 색상은 현재 색상 모드(colorMode)에 따라 RGB, HSB, 또는 HSL값으로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다. p5.Color 객체를 통해 배경색을 설정할 수 있습니다. p5.Image를 통해 배경 이미지를 설정할 수 있습니다.",
+ "",
+ "",
+ "",
+ ""
],
"params": {
- "v1": "p5.Color: color() 함수로 생성된 모든 값",
- "v2": "문자열, 지원되는 문자열 형식: 색상 문자열, 정수의 rgb()나 rgba(), 백분율의 rgb()나 rgba(), 3자리 숫자의 hex, 6자리 숫자의 hex",
- "v3": "숫자: 현재 색상 범위에 따른 배경색 투명도 (기본값은 0-255) (선택 사항)",
- "a": "숫자: 흑과 백 사이의 값 지정",
- "UNKNOWN-PARAM-5": "숫자: 빨강값 또는 색조값 (현재 색상 모드에 따라 상이)",
- "UNKNOWN-PARAM-6": "숫자: 초록값 또는 채도값 (현재 색상 모드에 따라 상이)",
- "UNKNOWN-PARAM-7": "숫자: 파랑값 또는 밝기값 (현재 색상 모드에 따라 상이)",
- "UNKNOWN-PARAM-8": "숫자 배열[]: 빨강값, 초록값, 파랑값, 알파값을 포함한 배열",
- "UNKNOWN-PARAM-9": "p5.Image: loadImage()나 createImage()로 생성된 이미지를 배경 이미지로 설정하는 경우 (스케치 화면과 반드시 동일한 사이즈일 것)"
- },
- "returns": "p5 객체"
+ "color": "p5.Color: color() 함수로 생성된 모든 값",
+ "colorstring": "문자열, 지원되는 문자열 형식: 색상 문자열, 정수의 rgb()나 rgba(), 백분율의 rgb()나 rgba(), 3자리 숫자의 hex, 6자리 숫자의 hex",
+ "a": "숫자: 현재 색상 범위에 따른 배경색 투명도 (기본값은 0-255) (선택 사항)",
+ "gray": "숫자: 흑과 백 사이의 값 지정",
+ "v1": "숫자: 빨강값 또는 색조값 (현재 색상 모드에 따라 상이)",
+ "v2": "숫자: 초록값 또는 채도값 (현재 색상 모드에 따라 상이)",
+ "v3": "숫자: 파랑값 또는 밝기값 (현재 색상 모드에 따라 상이)",
+ "values": "숫자 배열[]: 빨강값, 초록값, 파랑값, 알파값을 포함한 배열",
+ "image": "p5.Image: loadImage()나 createImage()로 생성된 이미지를 배경 이미지로 설정하는 경우 (스케치 화면과 반드시 동일한 사이즈일 것)"
+ }
},
"clear": {
"description": [
"버퍼에 있는 픽셀들을 클리어하는 함수로, 오직 캔버스만 클리어하게 됩니다. createVideo()나 createDiv()와 같은, createX()류의 메소드로 지정된 객체들을 제거하진 않습니다. 메인 그래픽이 아닌, createGraphics()로 생성된 부가적인 그래픽의 경우, 그 전체 또는 일부를 투명하게 처리할 수 있습니다. 이 함수는 모든 픽셀을 100% 투명하게 만듭니다."
- ],
- "returns": "p5 객체"
+ ]
},
"colorMode": {
"description": [
- "colorMode()는 p5.js가 색상 데이터를 해석하는 방식을 결정합니다. 기본값으로, fill(), stroke(), background(), color()의 매개변수는 RGB 색상 모드에서 처리되며, 그 범위는 0부터 255까지입니다. 이 기본값은 colorMode(RGB, 255)와 동일한 효과를 지닙니다. colorMode(HSB)로 설정을 변경하면 HSB 색상 시스템을 사용할 수 있습니다. HSB 색상 시스템은 그 기본값으로 colorMode(HSB, 360, 100, 100, 1)와 같이 설정됩니다. 색상 모드는 HSL로도 설정가능합니다. 참고: 모든 색상 객체들은 생성 당시에 지정된 색상 모드를 반영합니다. 따라서, 이미 생성된 색상 객체 중 일부에만 적용되는 색상 모드를 지정할 수도 있습니다."
+ "colorMode()는 p5.js가 색상 데이터를 해석하는 방식을 결정합니다. 기본값으로, fill(), stroke(), background(), color()의 매개변수는 RGB 색상 모드에서 처리되며, 그 범위는 0부터 255까지입니다. 이 기본값은 colorMode(RGB, 255)와 동일한 효과를 지닙니다. colorMode(HSB)로 설정을 변경하면 HSB 색상 시스템을 사용할 수 있습니다. HSB 색상 시스템은 그 기본값으로 colorMode(HSB, 360, 100, 100, 1)와 같이 설정됩니다. 색상 모드는 HSL로도 설정가능합니다. 참고: 모든 색상 객체들은 생성 당시에 지정된 색상 모드를 반영합니다. 따라서, 이미 생성된 색상 객체 중 일부에만 적용되는 색상 모드를 지정할 수도 있습니다.",
+ ""
],
"params": {
"mode": "상수: RGB(빨강Red/초록Green/파랑색Blue), HSB(색조Hue/채도Saturation/밝기Brightness), HSL(색조Hue/채도Saturation/명도Lightness) 중 하나",
+ "max": "Number: (Optional) range for all values",
"max1": "숫자: 모든 값들의 범위 (선택 사항)",
"max2": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값",
"max3": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값",
"maxA": "숫자: 알파값의 범위 (선택 사항)"
- },
- "returns": "p5 객체"
+ }
},
"fill": {
"description": [
- "도형의 면을 채울 색상을 지정합니다. 예를 들어, fill(204, 102, 0) 함수를 실행하면, 이 명령어 다음에 그려진 모든 도형들이 주황색으로 칠해집니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다."
+ "도형의 면을 채울 색상을 지정합니다. 예를 들어, fill(204, 102, 0) 함수를 실행하면, 이 명령어 다음에 그려진 모든 도형들이 주황색으로 칠해집니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 알파값의 기본 제공 범위 역시 0부터 255까지입니다. 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다.",
+ "",
+ ""
],
"params": {
"v1": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값",
"v2": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값",
"v3": "숫자:현재 지정된 색상 모드의 색상 범위에 따른 파랑값 또는 밝기값",
"alpha": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-5": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-6": "숫자: 회색값",
- "UNKNOWN-PARAM-7": "숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열",
- "UNKNOWN-PARAM-8": "p5.Color: 면채우기 색상"
- },
- "returns": "p5 객체"
+ "value": "문자열: 색상 문자열",
+ "gray": "숫자: 회색값",
+ "values": "숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열",
+ "color": "p5.Color: 면채우기 색상"
+ }
},
"noFill": {
"description": [
"도형에 색을 채우지 않도록 설정합니다. noStroke() 과 noFill()을 동시에 사용하면, 화면에 아무것도 나타나지 않습니다."
- ],
- "returns": "p5 객체"
+ ]
},
"noStroke": {
"description": [
"선이나 윤곽선을 그리지 않도록 설정합니다. noStroke() 과 noFill()을 동시에 사용하면, 화면에 아무것도 나타나지 않습니다."
- ],
- "returns": "p5 객체"
+ ]
},
"stroke": {
"description": [
- "그려질 선 또는 도형 윤곽선의 색상을 설정합니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다. p5.Color 객체를 통해 선의 색상을 설정할 수 있습니다."
+ "그려질 선 또는 도형 윤곽선의 색상을 설정합니다. 이 때, 색상값은 colorMode()로 지정된 현재의 색상 모드에 따라 RGB 또는 HSB로 지정됩니다. (기본값으로 제공되는 색상 모드는 RGB이고, 그 색상 범위는 0부터 255까지 해당합니다.) 단일한 문자열 인수에 대해 RGB, RGBA, Hex CSS 색상 문자열과 더불어 명명된 모든 색상 문자열이 지원됩니다. 단, 투명도인 알파값을 설정하기 위해서는 반드시 RGBA를 사용해야합니다. p5.Color 객체를 통해 선의 색상을 설정할 수 있습니다.",
+ "",
+ ""
],
"params": {
"v1": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 빨강값 또는 색조값",
"v2": "숫자: 현재 지정된 색상 모드의 색상 범위에 따른 초록값 또는 채도값",
"v3": "숫자:현재 지정된 색상 모드의 색상 범위에 따른 파랑값 또는 밝기값",
"alpha": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-5": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-6": "숫자: 회색값",
- "UNKNOWN-PARAM-7": "숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열",
- "UNKNOWN-PARAM-8": "p5.Color: 선의 색상"
- },
- "returns": "p5 객체"
+ "value": "문자열: 색상 문자열",
+ "gray": "숫자: 회색값",
+ "values": "숫자 배열[]: 색상의 빨강값, 초록값, 파랑값, 그리고 알파값을 포함한 배열",
+ "color": "p5.Color: 선의 색상"
+ }
+ },
+ "erase": {
+ "description": [
+ "erase() 함수의 영향을 받는 모든 드로잉을 캔버스로부터 지웁니다. 지워진 영역은 캔버스 이면의 웹 페이지 화면을 드러냅니다. 이러한 지우기 행위는 noErase() 로 취소할 수 있습니다. ",
+ "erase() 함수와 noErase() 함수 사이에서 image() 나 background() 로 그려진 드로잉은 캔버스에서 지워지지 않습니다."
+ ],
+ "params": {
+ "strengthFill": "(선택 사항) 숫자: 도형의 면을 지우는 강도로서의 (0부터 255사이) 숫자. 별도 지정한 숫자가 없는 경우, 최고 강도인 255가 기본값으로 적용",
+ "strengthStroke": "(선택 사항) 숫자: (Optional) 도형의 테두리를 지우는 강도로서의 (0부터 255사이) 숫자. 별도 지정한 숫자가 없는 경우, 최고 강도인 255가 기본값으로 적용"
+ }
+ },
+ "noErase": {
+ "description": [
+ "erase() 의 지우기 행위를 중단합니다. fill() , stroke() , 그리고 blendMode() 함수로 설정된 사항들은 erase() 함수가 호출되기 전의 상태로 돌아갑니다."
+ ]
},
"arc": {
"description": [
- "화면에 호, 즉 아치형 선을 그립니다. x좌표, y좌표, w(너비), h(높이), 시작점, 끝점을 지정하면 호는 열린 파이 조각의 형태로 그려집니다. 모드 변수를 설정하기에 따라, 호는 각각 반원(OPEN), 닫힌 반원(CHORD), 닫힌 파이 조각(PIE) 형태로 그려집니다. ellipseMode() 함수를 이용하면 시작점을 변경할 수 있습니다. 만약 원 하나를 그리기 위해 arc()의 시작점을 0으로, 끝점을 TWO_PI으로 설정할 경우, 시작점과 끝점이 동일하여 아무것도 그려지지 않습니다. 원을 그릴 때는 ellipse() 함수를, 원의 일부를 그릴 때는 arc() 함수를 이용하세요."
+ "화면에 호, 즉 아치형 선을 그립니다. x좌표, y좌표, w(너비), h(높이), 시작점, 끝점을 지정하면 호는 열린 파이 조각의 형태로 그려집니다. 모드 변수를 설정하기에 따라, 호는 각각 반원(OPEN), 닫힌 반원(CHORD), 닫힌 파이 조각(PIE) 형태로 그려집니다. ellipseMode() 함수를 이용하면 시작점을 변경할 수 있습니다. 만약 원 하나를 그리기 위해 arc()의 시작점을 0으로, 끝점을 TWO_PI으로 설정할 경우, 시작점과 끝점이 동일하여 아무것도 그려지지 않습니다. 원을 그릴 때는 ellipse() 함수를, 원의 일부를 그릴 때는 arc() 함수를 이용하세요.",
+ ""
],
"params": {
"x": "숫자: 호를 포함하는 원의 x좌표",
"y": "숫자: 호를 포함하는 원의 y좌표값",
"w": "숫자: 호를 포함하는 원의 너비값",
"h": "숫자: 호를 포함하는 원의 높이값",
- "start": "숫자: 부채각(radians)에 따른, 호의 시작점 각도값",
- "stop": "숫자: 부채각(radians)에 따른, 호의 끝점 각도값",
+ "start": "숫자: 원주호(radians)에 따른, 호의 시작점 각도값",
+ "stop": "숫자: 원주호(radians)에 따른, 호의 끝점 각도값",
"mode": "상수: 호를 그리는 방식들로, CHORD, PIEC, OPEN 중 선택 가능 (선택 사항)",
"detail": "숫자: WebGL 모드를 위한 선택적 변수로, 호의 윤곽선을 구성하는 꼭지점 개수를 지정. 기본값은 25. (선택 사항)"
- },
- "returns": "p5 객체"
+ }
},
"ellipse": {
"description": [
- "화면에 타원을 그립니다. 너비와 높이가 동일한 값으로 지정될 경우, 원이 그려집니다. 처음 두 변수는 각각 타원의 x좌표와 y좌표를, 3번째와 4번째 변수는 각각 타원의 너비와 높이를 지정합니다. 높이값 입력을 생략할 경우, 너비값이 높이값으로 동일하게 적용됩니다. 너비나 높이에 음수로 입력해도 그 절대값이 반영됩니다. ellipseMode() 함수를 이용하면 타원의 시작점을 원의 중심으로 지정할 지의 여부를 결정할 수 있습니다."
+ "화면에 타원을 그립니다. 너비와 높이가 동일한 값으로 지정될 경우, 원이 그려집니다. 처음 두 변수는 각각 타원의 x좌표와 y좌표를, 3번째와 4번째 변수는 각각 타원의 너비와 높이를 지정합니다. 높이값 입력을 생략할 경우, 너비값이 높이값으로 동일하게 적용됩니다. 너비나 높이에 음수로 입력해도 그 절대값이 반영됩니다. ellipseMode() 함수를 이용하면 타원의 시작점을 원의 중심으로 지정할 지의 여부를 결정할 수 있습니다.",
+ ""
],
"params": {
"x": "숫자: 타원의 x좌표",
@@ -269,8 +302,17 @@
"w": "숫자: 타원의 너비값",
"h": "숫자: 타원의 높이값",
"detail": "정수: 타원을 몇 개의 부분으로 나누어 그릴 것인지 지정 (WebGL 모드용)"
- },
- "returns": "p5 객체"
+ }
+ },
+ "circle": {
+ "description": [
+ "화면에 원을 그립니다. 원은 닫힌 도형으로, 중심점으로부터 주어진 거리에있는 모든 점들의 집합입니다.이 함수는 높이와 너비가 다른 타원을 그려내는 ellipse() 함수와는 달리, 너비와 높이가 모두 동일한 원을 그립니다. 이 경우, 높이와 너비는 원의 지름과 같습니다. 기본값으로, 처음 두 매개변수는 원의 중심 위치를 설정하고, 세 번째 매개 변수는 원의 지름을 설정합니다."
+ ],
+ "params": {
+ "x": "숫자: 원 중심점의 x좌표",
+ "y": "숫자: 원 중심점의 y좌표",
+ "d": "숫자: 원의 지름"
+ }
},
"line": {
"description": [
@@ -279,12 +321,11 @@
"params": {
"x1": "숫자: 1번째 점의 x좌표값",
"y1": "숫자: 1번째 점의 y좌표값",
- "z1": "숫자: 2번째 점의 x좌표값",
"x2": "숫자: 2번째 점의 y좌표값",
"y2": "숫자: 1번째 점의 z좌표값",
+ "z1": "숫자: 2번째 점의 x좌표값",
"z2": "숫자: 2번째 점의 z좌표값"
- },
- "returns": "p5 객체"
+ }
},
"point": {
"description": [
@@ -293,9 +334,9 @@
"params": {
"x": "숫자: x좌표값",
"y": "숫자: y좌표값",
- "z": "숫자: z좌표값 (WebGL 모드용)"
- },
- "returns": "p5 객체"
+ "z": "숫자: z좌표값 (WebGL 모드용)",
+ "coordinate_vector": "p5.Vector: the coordinate vector"
+ }
},
"quad": {
"description": [
@@ -304,22 +345,22 @@
"params": {
"x1": "숫자: 1번째 꼭지점의 x좌표값",
"y1": "숫자: 1번째 꼭지점의 y좌표값",
- "z1": "숫자: 2번째 꼭지점의 x좌표값",
"x2": "숫자: 2번째 꼭지점의 y좌표값",
"y2": "숫자: 3번째 꼭지점의 x좌표값",
- "z2": "숫자: 3번째 꼭지점의 y좌표값",
"x3": "숫자: 4번째 꼭지점의 x좌표값",
"y3": "숫자: 4번째 꼭지점의 y좌표값",
- "z3": "숫자: 1번째 꼭지점의 z좌표값",
"x4": "숫자: 2번째 꼭지점의 z좌표값",
"y4": "숫자: 3번째 꼭지점의 z좌표값",
+ "z1": "숫자: 2번째 꼭지점의 x좌표값",
+ "z2": "숫자: 3번째 꼭지점의 y좌표값",
+ "z3": "숫자: 1번째 꼭지점의 z좌표값",
"z4": "숫자: 4번째 꼭지점의 z좌표값"
- },
- "returns": "p5 객체"
+ }
},
"rect": {
"description": [
- "화면에 직사각형을 그립니다. 직사각형은 변이 4개이고 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 처음 두 변수는 좌측 상단 꼭지점의 좌표를, 3번째 변수는 사각형의 너비를, 4번째 변수는 그 높이를 설정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. 5번째, 6번째, 7번째, 8번째 매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다."
+ "화면에 직사각형을 그립니다. 직사각형은 변이 4개이고 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 처음 두 변수는 좌측 상단 꼭지점의 좌표를, 3번째 변수는 사각형의 너비를, 4번째 변수는 그 높이를 설정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. 5번째, 6번째, 7번째, 8번째 매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다.",
+ ""
],
"params": {
"x": "숫자: 직사각형의 x좌표값",
@@ -330,14 +371,14 @@
"tr": "숫자: 우측 상단 모퉁이 각도값. (선택 사항)",
"br": "숫자: 우측 하단 모퉁이 각도값. (선택 사항)",
"bl": "숫자: 좌측 하단 모퉁이 각도값. (선택 사항)",
- "UNKNOWN-PARAM-9": "정수: x축 방향의 선분 수 (WebGL 모드용)",
- "UNKNOWN-PARAM-10": "정수: y축 방향의 선분 수 (WebGL 모드용)"
- },
- "returns": "p5 객체"
+ "detailX": "정수: x축 방향의 선분 수 (WebGL 모드용)",
+ "detailY": "정수: y축 방향의 선분 수 (WebGL 모드용)"
+ }
},
"square": {
"description": [
- "화면에 정사각형을 그립니다. 정사각형은 동일한 길이의 네 개의 변을 갖고, 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 이 함수는 rect()함수의 특수한 사례와도 같은데, 너비와 높이가 같고 변의 길이를 라는 매개변수로 처리하게 됩니다. 기본값으로, 처음 두 변수는 처음 두 변수는 좌측 상단 꼭지점의 좌표를, 3번째 변수는 변의 길이를 지정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. 5번째, 6번째, 7번째매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다."
+ "화면에 정사각형을 그립니다. 정사각형은 동일한 길이의 네 개의 변을 갖고, 모든 변 사이의 각도가 90도인 도형을 뜻합니다. 이 함수는 rect()함수의 특수한 사례와도 같은데, 너비와 높이가 같고 변의 길이를 라는 매개변수로 처리하게 됩니다. 기본값으로, 처음 두 변수는 처음 두 변수는 좌측 상단 꼭지점의 좌표를, 3번째 변수는 변의 길이를 지정합니다. rectMode() 함수로 사각형 그리기 모드를 변경하면, 모든 매개변수값들이 달리 해석됩니다. 5번째, 6번째, 7번째매개변수를 입력하면, 각각 좌측 상단, 우측 상단, 우측 하단, 좌측 하단 모퉁이들의 각도를 지정하게 됩니다. 이 때 특정 각도 변수가 누락되면, 직전에 입력된 변수와 동일한 값이 적용됩니다.",
+ ""
],
"params": {
"x": "숫자: 정사각형의 x좌표값",
@@ -347,8 +388,7 @@
"tr": "숫자: 우측 상단 모퉁이 각도값. (선택 사항)",
"br": "숫자: 우측 하단 모퉁이 각도값. (선택 사항)",
"bl": "숫자: 좌측 하단 모퉁이 각도값. (선택 사항)"
- },
- "returns": "p5 객체"
+ }
},
"triangle": {
"description": [
@@ -361,56 +401,61 @@
"y2": "숫자:2번째 꼭지점의 y좌표값",
"x3": "숫자:3번째 꼭지점의 x좌표값",
"y3": "숫자:3번째 꼭지점의 y좌표값"
- },
- "returns": ""
+ }
},
"ellipseMode": {
"description": [
- "ellipse(), circle(), 그리고 arc() 함수의 매개변수들이 해석되는 방식을 변경하여, 타원이 그려지는 시작점 위치를 변경합니다. 기본적으로 제공되는 모드는 ellipseMode(CENTER) 함수와도 같습니다. 이는 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. ellipseMode(RADIUS) 역시 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. ellipseMode(CORNER)는 ellipse() 함수의 처음 두 매개변수를 도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이로 해석합니다. ellipseMode(CORNERS)는 ellipse() 함수의 처음 두 매개변수를 도형의 바운딩 박스 중 한 모퉁이의 위치값으로서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. 이 함수의 모든 매개변수(CENTER, RADIUS, CORNER, CORNERS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다."
+ "ellipse(), circle(), 그리고 arc() 함수의 매개변수들이 해석되는 방식을 변경하여, 타원이 그려지는 시작점 위치를 변경합니다. 기본적으로 제공되는 모드는 ellipseMode(CENTER) 함수와도 같습니다. 이는 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. ellipseMode(RADIUS) 역시 ellipse() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. ellipseMode(CORNER)는 ellipse() 함수의 처음 두 매개변수를 도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이로 해석합니다. ellipseMode(CORNERS)는 ellipse() 함수의 처음 두 매개변수를 도형의 바운딩 박스 중 한 모퉁이의 위치값으로서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. 이 함수의 모든 매개변수(CENTER, RADIUS, CORNER, CORNERS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다.",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "상수:CENTER, RADIUS, CORNER, 또는 CORNERS"
- },
- "returns": ""
+ }
},
"noSmooth": {
"description": [
"모든 그래픽의 가장자리를 울퉁불퉁하게 처리합니다. smooth() 함수는 2D 모드상 언제나 기본값으로 활성화되며, 그래픽을 부드럽게 처리합니다. 따라서, noSmooth() 함수를 호출해야만 도형, 이미지, 폰트 등의 부드러운 처리를 비활성화할 수 있습니다. 반면, 3D 모드에서는 noSmooth()가 기본값으로 활성화됩니다. 따라서, smooth() 함수를 호출해야만 부드러운 처리가 가능합니다."
- ],
- "returns": ""
+ ]
},
"rectMode": {
"description": [
- "rect() 함수의 매개변수들이 해석되는 방식을 변경하여, 직사각형이 그려지는 시작점 위치를 변경합니다. 기본적으로 제공되는 모드는 rectMode(CORNER) 함수와도 같습니다. 이는 rect() 함수의 처음 두 매개변수를도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이값로서 해석합니다. rectMode(CORNERS)는 rect() 함수의 처음 두 매개변수를 한 모퉁이의 위치값으로 서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. ellipseMode(CENTER)는 rect() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. rectMode(RADIUS) 역시 rect() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. 이 함수의 모든 매개변수(CORNER, CORNERS, CENTER, RADIUS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다."
+ "rect() 함수의 매개변수들이 해석되는 방식을 변경하여, 직사각형이 그려지는 시작점 위치를 변경합니다. 기본적으로 제공되는 모드는 rectMode(CORNER) 함수와도 같습니다. 이는 rect() 함수의 처음 두 매개변수를도형의 좌측 상단을 기준으로 해석하고, 3번째와 4번째 변수를 각각 그 너비와 높이값로서 해석합니다. rectMode(CORNERS)는 rect() 함수의 처음 두 매개변수를 한 모퉁이의 위치값으로 서 해석합니다. 그리고, 3번째와 4번째 변수는 그 정반대 모퉁이의 위치값으로 해석합니다. ellipseMode(CENTER)는 rect() 함수의 처음 두 매개변수를 타원의 중심점으로, 3번째와 4번째 변수를 각각 그 너비와 높이값으로서 해석합니다. rectMode(RADIUS) 역시 rect() 함수의 처음 두 매개변수를 타원의 중심점으로 해석하나, 3번째와 4번째 변수를 각각 너비와 높이의 중간 지점값으로 해석합니다. 이 함수의 모든 매개변수(CORNER, CORNERS, CENTER, RADIUS)들은 반드시 대문자로 작성되어야 합니다. 자바스크립트에서는 대소문자 구분이 매우 중요하답니다.",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "상수:CORNER, CORNERS, CENTER 또는 RADIUS"
- },
- "returns": ""
+ }
},
"smooth": {
"description": [
"모든 그래픽을 부드럽게 처리하며, 불러온 이미지 또는 크기가 재조정된 이미지의 화질을 향상합니다. smooth()는 2D 모드상 언제나 기본값으로 활성화되며. 따라서, noSmooth() 함수를 호출해야만 도형, 이미지, 폰트 등의 부드러운 그래픽 처리를 비활성화할 수 있습니다. 반면, 3D 모드에서는 noSmooth()가 기본값으로 활성화됩니다. 따라서, smooth() 함수를 호출해야만 부드러운 그래픽 처리가 가능합니다."
- ],
- "returns": ""
+ ]
},
"strokeCap": {
"description": [
- "선의 양끝에 대한 렌더링 스타일을 설정합니다. 선의 양끝은 매개변수 SQAURE로 각지게, PROJECT로 조금 더 길게, 그리고 ROUND로 둥글게 처리될 수 있습니다. 이 중에서 ROUND는 기본값으로 적용됩니다."
+ "선의 양끝에 대한 렌더링 스타일을 설정합니다. 선의 양끝은 매개변수 SQAURE로 각지게, PROJECT로 조금 더 길게, 그리고 ROUND로 둥글게 처리될 수 있습니다. 이 중에서 ROUND는 기본값으로 적용됩니다.",
+ ""
],
"params": {
"cap": "상수:SQUARE, PROJECT 또는 ROUND"
- },
- "returns": ""
+ }
},
"strokeJoin": {
"description": [
- "두 선분 간의 이음새에 대한 스타일을 설정합니다. 이음새는 매개변수 MITER로 각지게, BEVEL로 베벨 처리되듯 비스듬히 깎인 형태로, ROUND로 둥글게 처리될 수 있습니다. 이 중에서 MITER는 기본값으로 적용됩니다."
+ "두 선분 간의 이음새에 대한 스타일을 설정합니다. 이음새는 매개변수 MITER로 각지게, BEVEL로 베벨 처리되듯 비스듬히 깎인 형태로, ROUND로 둥글게 처리될 수 있습니다. 이 중에서 MITER는 기본값으로 적용됩니다.",
+ ""
],
"params": {
"join": "상수:MITER, BEVEL 또는 ROUND"
- },
- "returns": ""
+ }
},
"strokeWeight": {
"description": [
@@ -418,63 +463,62 @@
],
"params": {
"weight": "숫자:선의 두께 (픽셀 단위)"
- },
- "returns": ""
+ }
},
"bezier": {
"description": [
- "화면에 3차 베지어 곡선을 그립니다. 베지어 곡선은 일련의 고정점 및 제어점들로 정의됩니다. 처음 두 매개변수는 1번째 고정점을, 마지막 두 매개변수는 마지막 고정점을 지정합니다. 중간의 두 매개변수는 두 개의 제어점을 지정하며, 이는 곧 곡선의 모양을 정의하게 됩니다. 여기서 제어점은 그 자신을 향해 곡선을 당기는 역할을 합니다. 베지어 곡선은 프랑스 출신 자동차 엔지니어인 피에르 베지어(Pierre Bezier)가 개발하였으며, 컴퓨터 그래픽상 부드럽게 경사진 곡선을 정의하는 데에 주로 사용됩니다. curve()도 참고하세요."
+ "화면에 3차 베지어 곡선을 그립니다. 베지어 곡선은 일련의 고정점 및 제어점들로 정의됩니다. 처음 두 매개변수는 1번째 고정점을, 마지막 두 매개변수는 마지막 고정점을 지정합니다. 중간의 두 매개변수는 두 개의 제어점을 지정하며, 이는 곧 곡선의 모양을 정의하게 됩니다. 여기서 제어점은 그 자신을 향해 곡선을 당기는 역할을 합니다. 베지어 곡선은 프랑스 출신 자동차 엔지니어인 피에르 베지어(Pierre Bezier)가 개발하였으며, 컴퓨터 그래픽상 부드럽게 경사진 곡선을 정의하는 데에 주로 사용됩니다. curve()도 참고하세요.",
+ ""
],
"params": {
"x1": "숫자: 1번째 고정점의 x좌표값",
"y1": "숫자: 1번째 고정점의 y좌표값",
- "z1": "숫자: 1번째 제어점의 x좌표값",
- "x2": "숫자: 1번째 제어점의 y좌표값",
- "y2": "숫자: 2번째 제어점의 x좌표값",
- "z2": "숫자: 2번째 제어점의 y좌표값",
- "x3": "숫자: 2번째 고정점의 x좌표값",
- "y3": "숫자: 2번째 고정점의 y좌표값",
- "z3": "숫자: 1번째 고정점의 z좌표값",
- "x4": "숫자: 1번째 제어점의 z좌표값",
- "y4": "숫자: 2번째 제어점의 z좌표값",
+ "x2": "숫자: 1번째 제어점의 x좌표값",
+ "y2": "숫자: 1번째 제어점의 y좌표값",
+ "x3": "숫자: 2번째 제어점의 x좌표값",
+ "y3": "숫자: 2번째 제어점의 y좌표값",
+ "x4": "숫자: 2번째 고정점의 x좌표값",
+ "y4": "숫자: 2번째 고정점의 y좌표값",
+ "z1": "숫자: 1번째 고정점의 z좌표값",
+ "z2": "숫자: 1번째 제어점의 z좌표값",
+ "z3": "숫자: 2번째 제어점의 z좌표값",
"z4": "숫자: 2번째 고정점의 z좌표값"
- },
- "returns": ""
+ }
},
"bezierDetail": {
"description": [
- "베지어 곡선들의 해상도를 설정합니다. 기본값은 20입니다. 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다."
+ "베지어 곡선들의 해상도를 설정합니다. 기본값은 20입니다. 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다.",
+ ""
],
"params": {
"detail": "숫자: 곡선들의 해상도값"
- },
- "returns": ""
+ }
},
"bezierPoint": {
"description": [
"점 a, b, c, d로 정의된 베지어 곡선에서 위치 t를 계산합니다. 매개변수 a와 d는 각각 곡선의 1번째 점과 마지막 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. 함수는 먼저 x좌표를 호출한 다음, y좌표를 호출하여 위치 t를 찾게됩니다."
],
+ "returns": "숫자: 위치 t에 해당하는 베지어 곡선의 값",
"params": {
"a": "숫자: 곡선의 1번째 점 좌표값",
"b": "숫자: 1번째 제어점 좌표값",
"c": "숫자: 2번째 제어점 좌표값",
"d": "숫자: 곡선의 2번째 점 좌표값",
"t": "숫자: 0과 1 사이의 값"
- },
- "returns": "숫자: 위치 t에 해당하는 베지어 곡선의 값"
+ }
},
"bezierTangent": {
"description": [
"위치 t에서 곡선의 점 a, b, c, d에 대한 탄젠트를 계산합니다. 매개변수 a와 d는 각각 곡선의 1번째 점과 마지막 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다."
],
+ "returns": "숫자: 위치 t에 해당하는 탄젠트",
"params": {
"a": "숫자: 곡선의 1번째 점 좌표값",
"b": "숫자: 1번째 제어점 좌표값",
"c": "숫자: 2번째 제어점 좌표값",
"d": "숫자: 곡선의 2번째 점 좌표값",
"t": "숫자: 0과 1 사이의 값"
- },
- "returns": "숫자: 위치 t에 해당하는 탄젠트"
+ }
},
"curve": {
"description": [
@@ -483,27 +527,26 @@
"params": {
"x1": "숫자: 최초 제어점의 x좌표값",
"y1": "숫자: 최초 제어점의 y좌표값",
- "z1": "숫자: 1번째 점의 x좌표값",
"x2": "숫자: 1번째 점의 y좌표값",
"y2": "숫자: 2번째 점의 x좌표값",
- "z2": "숫자: 2번째 점의 y좌표값",
"x3": "숫자: 마지막 제어점의 x좌표값",
"y3": "숫자: 마지막 제어점의 y좌표값",
- "z3": "숫자: 최초 제어점의 z좌표값",
"x4": "숫자: 1번째 점의 z좌표값",
"y4": "숫자: 2번째 점의 z좌표값",
+ "z1": "숫자: 1번째 점의 x좌표값",
+ "z2": "숫자: 2번째 점의 y좌표값",
+ "z3": "숫자: 최초 제어점의 z좌표값",
"z4": "숫자: 마지막 제어점의 z좌표값"
- },
- "returns": ""
+ }
},
"curveDetail": {
"description": [
- "곡선들의 해상도를 설정합니다. 기본값은 20이고, 최소값은 3입니다. 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다."
+ "곡선들의 해상도를 설정합니다. 기본값은 20이고, 최소값은 3입니다. 이 함수는 WebGL 렌더러용으로만 사용되며, 기본 캔버스 렌더러에서는 이 함수를 사용하지 않습니다.",
+ ""
],
"params": {
"resolution": "숫자: 곡선들의 해상도값"
- },
- "returns": ""
+ }
},
"curveTightness": {
"description": [
@@ -511,83 +554,83 @@
],
"params": {
"amount": "숫자: 원래 꼭지점으로부터 변형된 정도의 양"
- },
- "returns": ""
+ }
},
"curvePoint": {
"description": [
"점 a, b, c, d로 정의된 곡선에서 위치 t를 계산합니다. 매개변수 a와 d는 곡선의 제어점에, b와 c는 각각 곡선의 시작점과 끝점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다. 함수는 먼저 x좌표를 호출한 다음, y좌표를 호출하여 위치 t를 찾게됩니다."
],
+ "returns": "숫자: 위치 t에 해당하는 베지어값",
"params": {
"a": "숫자: 곡선의 1번째 제어점 좌표값",
"b": "숫자: 1번째 점 좌표값",
"c": "숫자: 2번째 점 좌표값",
"d": "숫자: 곡선의 2번째 제어점 좌표값",
"t": "숫자: 0과 1 사이의 값"
- },
- "returns": "숫자: 위치 t에 해당하는 베지어값"
+ }
},
"curveTangent": {
"description": [
"위치 t에서 곡선의 점 a, b, c, d에 대한 탄젠트를 계산합니다. 매개변수 a와 d는 각각 곡선 위 점에, b와 c는 제어점에 해당합니다. 마지막 매개변수인 t는 0과 1사이에서 표현됩니다."
],
+ "returns": "숫자: 위치 t에 해당하는 탄젠트",
"params": {
"a": "숫자: 곡선의 1번째 점 좌표값",
"b": "숫자: 1번째 제어점 좌표값",
"c": "숫자: 2번째 제어점 좌표값",
"d": "숫자: 곡선의 2번째 점 좌표값",
"t": "숫자: 0과 1 사이의 값"
- },
- "returns": "숫자: 위치 t에 해당하는 탄젠트"
+ }
},
"beginContour": {
"description": [
- "beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭지점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭지점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭지점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. beginContour()/endContour() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다."
- ],
- "returns": ""
+ "beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭지점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭지점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭지점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. beginContour()/endContour() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다.",
+ ""
+ ]
},
"beginShape": {
"description": [
- "beginShape()과 endShape()를 사용하여 좀 더 복잡한 모양을 만들 수 있습니다. beingShape()은 도형의 꼭지점을 기록하기 시작하고, endShape()은 그 기록을 중지합니다. 함수의 매개변수를 통해 꼭지점으로 어떤 도형을 그릴지 결정할 수 있습니다. 별도의 매개변수가 지정되지 않으면, 비정형의 다각형이 그려집니다. beginShape()에 쓰이는 매개변수로는 POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, 그리고 TESS(WebGL 전용)가 있습니다. beginShape() 함수를 호출한 다음, 꼭지점 지정을 위해 vertex() 명령문을 반드시 작성해야 합니다. 도형그리기를 멈추려면 endShape() 함수를 호출하면 됩니다. 각 도형은 현재 지정된 선그리기(stroke) 및 면채우기(fill) 색상으로 그려집니다."
+ "beginShape()과 endShape()를 사용하여 좀 더 복잡한 모양을 만들 수 있습니다. beingShape()은 도형의 꼭지점을 기록하기 시작하고, endShape()은 그 기록을 중지합니다. 함수의 매개변수를 통해 꼭지점으로 어떤 도형을 그릴지 결정할 수 있습니다. 별도의 매개변수가 지정되지 않으면, 비정형의 다각형이 그려집니다. beginShape()에 쓰이는 매개변수로는 POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP, 그리고 TESS(WebGL 전용)가 있습니다. beginShape() 함수를 호출한 다음, 꼭지점 지정을 위해 vertex() 명령문을 반드시 작성해야 합니다. 도형그리기를 멈추려면 endShape() 함수를 호출하면 됩니다. 각 도형은 현재 지정된 선그리기(stroke) 및 면채우기(fill) 색상으로 그려집니다.",
+ "",
+ ""
],
"params": {
"kind": "상수: POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS 또는 QUAD_STRIP (선택 사항)"
- },
- "returns": ""
+ }
},
"bezierVertex": {
"description": [
- "베지어 곡선의 꼭지점 좌표를 지정합니다. bezierVertex()은 매 호출마다 베지어 곡선의 제어점 2개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. bezierVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. beginShape() 함수 안에 작성된 bezierVertex()를 호출하기에 앞서, vertex() 함수를 bezierVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. bezierVertex() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다."
+ "베지어 곡선의 꼭지점 좌표를 지정합니다. bezierVertex()은 매 호출마다 베지어 곡선의 제어점 2개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. bezierVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. beginShape() 함수 안에 작성된 bezierVertex()를 호출하기에 앞서, vertex() 함수를 bezierVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. bezierVertex() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다.",
+ ""
],
"params": {
"x2": "숫자: 1번째 제어점의 x좌표값",
"y2": "숫자: 1번째 제어점의 y좌표값",
- "z2": "숫자: 2번째 제어점의 x좌표값",
"x3": "숫자: 2번째 제어점의 y좌표값",
"y3": "숫자: 고정점의 x좌표값",
- "z3": "숫자: 고정점의 y좌표값",
"x4": "숫자: 1번째 제어점의 z좌표값 (WebGL 모드용)",
"y4": "숫자: 2번째 제어점의 z좌표값 (WebGL 모드용)",
+ "z2": "숫자: 2번째 제어점의 x좌표값",
+ "z3": "숫자: 고정점의 y좌표값",
"z4": "숫자: 고정점의 z좌표값 (WebGL 모드용)"
- },
- "returns": ""
+ }
},
"curveVertex": {
"description": [
- "곡선의 꼭지점 좌표를 지정합니다. 이 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다. 또한, 이 함수는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 2개의 매개변수가, 3D 모드에서는 3개의 매개변수가 필요합니다. curveVertex()로 그려진 일련의 선들 중 1번째 점과 마지막 점을 통해 각각 전체 곡선의 시작점과 끝점을 알 수 있습니다. 2번째와 3번째 사이에도 작은 곡선을 만들기 위해선 최소 4개의 점들이 필요합니다. curveVertex() 함수로 5번째 점을 추가하면 함수는 2번째, 3번째, 4번째 점들 사이에 곡선을 그립니다. curveVertex() 함수는 캣멀롬 스플라인(Catmull-Rom Spline)을 구현합니다. "
+ "곡선의 꼭지점 좌표를 지정합니다. 이 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다. 또한, 이 함수는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 2개의 매개변수가, 3D 모드에서는 3개의 매개변수가 필요합니다. curveVertex()로 그려진 일련의 선들 중 1번째 점과 마지막 점을 통해 각각 전체 곡선의 시작점과 끝점을 알 수 있습니다. 2번째와 3번째 사이에도 작은 곡선을 만들기 위해선 최소 4개의 점들이 필요합니다. curveVertex() 함수로 5번째 점을 추가하면 함수는 2번째, 3번째, 4번째 점들 사이에 곡선을 그립니다. curveVertex() 함수는 캣멀롬 스플라인(Catmull-Rom Spline)을 구현합니다. ",
+ ""
],
"params": {
"x": "숫자: 꼭지점의 x좌표값",
"y": "숫자: 꼭지점의 y좌표값",
"z": "숫자: 꼭지점의 z좌표값 (WebGL 모드용)(선택 사항)"
- },
- "returns": ""
+ }
},
"endContour": {
"description": [
- "beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭지점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭지점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭지점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. beginContour()/endContour() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다."
- ],
- "returns": ""
+ "beginContour()와 endContour() 함수를 사용하여 특정 도형 내부에 그 음수 좌표에 상응하는 동일한 도형 윤곽선을 그릴 수 있습니다. 예를 들어, 동그라미의 안쪽에 또다른 작은 동그라미를 그릴 수 있습니다. beginContour()는 도형의 꼭지점을 기록하기 시작하고, endContour()는 그 기록을 중지합니다. 이 때, 안쪽의 도형을 정의하는 꼭지점은 바깥쪽의 도형과 반대 순서로 그려져야 합니다. 먼저 바깥에 위치한 원래 도형의 꼭지점을 시계 방향으로 그리고, 그 다음 내부의 도형을 시계 반대 방향으로 그립니다. beginContour()/endContour() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야 합니다. 또한, beingContour()/endContour() 함수 사이에는 translate(), rotate(), scale()과 같은 변형 함수나 ellipse() 및 rect()와 같은 도형그리기 함수가 사용될 수 없습니다.",
+ ""
+ ]
},
"endShape": {
"description": [
@@ -595,22 +638,21 @@
],
"params": {
"mode": "상수: CLOSE로 도형 닫기(선택 사항)"
- },
- "returns": ""
+ }
},
"quadraticVertex": {
"description": [
- "2차 베지어 곡선의 꼭지점 좌표를 지정합니다. quadraticVertex()은 매 호출마다 베지어 곡선의 제어점 1개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. beginShape() 함수 안에 작성된 quadraticVertex()를 호출하기에 앞서, vertex() 함수를 quadraticVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. quadraticVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. quadraticVertex() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다."
+ "2차 베지어 곡선의 꼭지점 좌표를 지정합니다. quadraticVertex()은 매 호출마다 베지어 곡선의 제어점 1개와 고정점 1개의 위치를 정의하고, 이 새로운 선분을 선 또는 도형에 더합니다. beginShape() 함수 안에 작성된 quadraticVertex()를 호출하기에 앞서, vertex() 함수를 quadraticVertex() 윗줄에 작성하여 곡선의 1번째 고정점을 설정해야 합니다. quadraticVertex()는 WebGL상 2D 및 3D 모드 모두에 적용될 수 있습니다. 2D 모드에서는 6개의 매개변수가, 3D 모드에서는 9개의 매개변수(z좌표값 포함)가 필요합니다. quadraticVertex() 함수는 반드시 beginShape()/endShape() 함수 사이에 작성되어야하며, beginShape() 함수에 MODE나 POINTS 매개변수가 지정되지 않은 경우에만 사용가능 합니다.",
+ ""
],
"params": {
"cx": "숫자: 제어점의 x좌표값",
"cy": "숫자: 제어점의 y좌표값",
- "cz": "숫자: 고정점의 x좌표값",
"x3": "숫자: 고정점의 y좌표값",
"y3": "숫자: 제어점의 z좌표값 (WebGL 모드용)",
+ "cz": "숫자: 고정점의 x좌표값",
"z3": "숫자: 고정점의 z좌표값 (WebGL 모드용)"
- },
- "returns": ""
+ }
},
"vertex": {
"description": [
@@ -622,178 +664,182 @@
"z": "숫자: 꼭지점의 z좌표값",
"u": "숫자: 꼭지점의 u좌표값(선택 사항)",
"v": "숫자: 꼭지점의 v좌표값(선택 사항)"
- },
- "returns": ""
- },
- "plane": {
- "description": [
- "사용자가 지정한 너비와 높이로 평면을 그립니다."
- ],
- "params": {
- "width": "숫자: 평면의 너비값 (선택 사항)",
- "height": "숫자: 평면의 높이값 (선택 사항)",
- "detailX": "정수: x-차원상의 삼각 세분면 개수 (선택 사항)",
- "detailY": "정수: y-차원상의 삼각 세분면 개수 (선택 사항)"
- },
- "returns": ""
- },
- "box": {
- "description": [
- "사용자가 지정한 너비, 높이, 깊이로 상자를 그립니다."
- ],
- "params": {
- "width": "숫자: 상자의 너비값 (선택 사항)",
- "Height": "숫자: 상자의 높이값 (선택 사항)",
- "depth": "숫자: 상자의 깊이값 (선택 사항)",
- "detailX": "정수: x-차원상의 삼각 세분면 개수 (선택 사항)",
- "detailY": "정수: y-차원상의 삼각 세분면 개수 (선택 사항)"
- },
- "returns": ""
- },
- "sphere": {
- "description": [
- "사용자가 지정한 반지름으로 구를 그립니다. detailX와 detailY는 각각 구에 대한 x-차원과 y-차원상의 삼각 세분면 개수를 정합니다. 세분면이 많아질수록 구가 매끄러워집니다. detailX와 detailY 모두 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다."
- ],
- "params": {
- "radius": "숫자: 원의 반지름 (선택 사항)",
- "detailX": "정수: x-차원상의 삼각 세분면 (선택 사항)",
- "detailY": "정수: y-차원상의 삼각 세분면 (선택 사항)"
- },
- "returns": ""
- },
- "cylinder": {
- "description": [
- "사용자가 지정한 반지름과 높이로 원기둥을 그립니다. detailX와 detailY는 각각 원기둥에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원기둥이 매끄러워집니다. detailX와 detailY 모두 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다."
- ],
- "params": {
- "radius": "숫자: 원기둥의 높이 (선택 사항)",
- "height": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
- "detailX": "정수: y-차원상의 세분면 개수, 기본값은 1 (선택 사항)",
- "detailY": "불리언: 원기둥의 밑바닥면을 그릴 지의 여부 (선택 사항)",
- "bottomCap": "불리언: 원기둥의 윗면을 그릴 지의 여부 (선택 사항)"
- },
- "returns": ""
- },
- "cone": {
- "description": [
- "사용자가 지정한 반지름과 높이로 원뿔을 그립니다. detailX와 detailY는 각각 원뿔에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원뿔이 매끄러워집니다. detailX의 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다."
- ],
- "params": {
- "radius": "숫자: 밑표면의 반지름 (선택 사항)",
- "height": "숫자: 원뿔의 높이 (선택 사항)",
- "detailX": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
- "detailY": "정수: y-차원상의 세분면 개수, 기본값은 1 (선택 사항)",
- "cap": "불리언: 원뿔의 밑바닥면을 그릴 지의 여부 (선택 사항)"
- },
- "returns": ""
- },
- "ellipsoid": {
- "description": [
- "사용자가 지정한 반지름으로 타원면을 그립니다. detailX와 detailY는 각각 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 타원면이 매끄러워집니다. 가급적 detailX와 detailY의 값이 150을 넘어가면 브라우저가 중단될 수 있습니다."
- ],
- "params": {
- "radiusx": "숫자: 타원면의 x-반지름값 (선택 사항)",
- "radiusy": "숫자: 타원면의 y-반지름값 (선택 사항)",
- "radiusz": "숫자: 타원면의 z-반지름값 (선택 사항)",
- "detailX": "정수: 세분면의 개수, 기본값은 24(선택 사항)"
- },
- "returns": ""
- },
- "torus": {
- "description": [
- "사용자가 지정한 반지름과 튜브 반지름으로 원환을 그립니다. detailX와 detailY는 각각 원환에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원환이 매끄러워집니다. detailX과 detailY의 권장 최대값은 각각 24와 16입니다. 4나 6처럼 조금 더 적은 값으로 설정하면, 원환이 아닌 새로운 모양을 만들 수 있습니다."
- ],
- "params": {
- "radius": "숫자: 전체 원환의 반지름 (선택 사항)",
- "tubeRadius": "숫자: 튜브의 반지름 (선택 사항)",
- "detailX": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
- "detailY": "정수: y-차원상의 세분면 개수, 기본값은 16 (선택 사항)"
- },
- "returns": ""
+ }
},
- "loadModel": {
+ "P2D": {
"description": [
- "OBJ 또는 STL 파일로부터 3D 모델을 불러옵니다. loadModel() 함수는 반드시 preload() 함수 안에 작성되어야 하며, 이로써 3D 모델을 코드 실행에 앞서 온전히 불러올 수 있습니다. OBJ와 STL 파일 형식의 한계 중 하나는 빌트인 스케일 기능이 제공되지 않는다는 것입니다. 즉, 파일을 불러오는 소프트웨어 프로그램에 따라 3D 모델의 크기가 상이해집니다. 3D 모델이 보이지 않는다면 loadModel() 함수에 표준화된 매개변수인 true를 입력해 보세요. 또한 불러온 3D 모델의 크기는 scale() 함수로 변경할 수 있습니다. 색상이 지정된 STL 파일은 현재 지원하지 않아, 색상 요소가 제거된 상태로 렌더링될 수 있습니다."
- ],
- "params": {
- "path": "문자열: 불러올 3D 모델의 파일 경로",
- "normalize": "불리언: 참(true)이면, 3D 모델을 표준화된 크기로 불러오기",
- "successCallback": "함수(p5.Geometry): 3D 모델을 불러온 뒤 일회적으로 호출되는 함수로, 3D 모델 객체를 전달. (선택 사항)",
- "failureCallback": "함수(Event):3D 모델 불러오기를 실패할 경우 이벤트 에러와 함께 호출 (선택 사항)"
- },
- "returns": "p5.Geometry: p5.Geometry 객체"
+ "The default, two-dimensional renderer."
+ ]
},
- "model": {
+ "WEBGL": {
"description": [
- "화면에 3D 모델을 렌더링합니다."
- ],
- "params": {
- "model": "p5.Geometry: 렌더링할, 불러온 3D 모델"
- },
- "returns": ""
+ "One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z"
+ ]
},
+ "ARROW": {},
+ "CROSS": {},
+ "HAND": {},
+ "MOVE": {},
+ "TEXT": {},
+ "WAIT": {},
"HALF_PI": {
"description": [
"HALF_PI는 1.57079632679489661923 값을 갖는 상수입니다. 지름에 대한 원주율의 절반에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다."
- ],
- "returns": ""
+ ]
},
"PI": {
"description": [
"PI는 3.14159265358979323846 값을 갖는 상수입니다. 지름에 대한 원주율을 의미하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다."
- ],
- "returns": ""
+ ]
},
"QUARTER_PI": {
"description": [
"QUARTER_PI는 0.7853982 값을 갖는 상수입니다. 지름에 대한 원주율의 1/4에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다."
- ],
- "returns": ""
+ ]
},
"TAU": {
"description": [
"TAU는 TWO_PI의 약어로, 이는 6.28318530717958647693 값을 갖는 상수입니다. 지름에 대한 원주율의 2배에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다."
- ],
- "returns": ""
+ ]
},
"TWO_PI": {
"description": [
"TWO_PI는6.28318530717958647693 값을 갖는 상수입니다. 지름에 대한 원주율의 2배에 해당하며, 삼각 함수 sin()과 cos()와 함께 쓰면 더욱 유용합니다."
- ],
- "returns": ""
+ ]
},
"DEGREES": {
"description": [
"p5.js가 각도를 해석하고 계산하는 방법을 설정하기 위해, angleMode() 함수와 그 매개변수(DEGREES 또는 RADIANS)를 사용합니다."
- ],
- "returns": ""
+ ]
},
"RADIANS": {
"description": [
"p5.js가 각도를 해석하고 계산하는 방법을 설정하기 위해, angleMode() 함수와 그 매개변수(DEGREES 또는 RADIANS)를 사용합니다."
- ],
- "returns": ""
+ ]
+ },
+ "CORNER": {},
+ "CORNERS": {},
+ "RADIUS": {},
+ "RIGHT": {},
+ "LEFT": {},
+ "CENTER": {},
+ "TOP": {},
+ "BOTTOM": {},
+ "BASELINE": {},
+ "POINTS": {},
+ "LINES": {},
+ "LINE_STRIP": {},
+ "LINE_LOOP": {},
+ "TRIANGLES": {},
+ "TRIANGLE_FAN": {},
+ "TRIANGLE_STRIP": {},
+ "QUADS": {},
+ "QUAD_STRIP": {},
+ "TESS": {},
+ "CLOSE": {},
+ "OPEN": {},
+ "CHORD": {},
+ "PIE": {},
+ "PROJECT": {},
+ "SQUARE": {},
+ "ROUND": {},
+ "BEVEL": {},
+ "MITER": {},
+ "RGB": {},
+ "HSB": {
+ "description": [
+ "HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB ."
+ ]
},
+ "HSL": {},
+ "AUTO": {
+ "description": [
+ "AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time."
+ ]
+ },
+ "ALT": {},
+ "BACKSPACE": {},
+ "CONTROL": {},
+ "DELETE": {},
+ "DOWN_ARROW": {},
+ "ENTER": {},
+ "ESCAPE": {},
+ "LEFT_ARROW": {},
+ "OPTION": {},
+ "RETURN": {},
+ "RIGHT_ARROW": {},
+ "SHIFT": {},
+ "TAB": {},
+ "UP_ARROW": {},
+ "BLEND": {},
+ "REMOVE": {},
+ "ADD": {},
+ "DARKEST": {},
+ "LIGHTEST": {},
+ "DIFFERENCE": {},
+ "SUBTRACT": {},
+ "EXCLUSION": {},
+ "MULTIPLY": {},
+ "SCREEN": {},
+ "REPLACE": {},
+ "OVERLAY": {},
+ "HARD_LIGHT": {},
+ "SOFT_LIGHT": {},
+ "DODGE": {},
+ "BURN": {},
+ "THRESHOLD": {},
+ "GRAY": {},
+ "OPAQUE": {},
+ "INVERT": {},
+ "POSTERIZE": {},
+ "DILATE": {},
+ "ERODE": {},
+ "BLUR": {},
+ "NORMAL": {},
+ "ITALIC": {},
+ "BOLD": {},
+ "BOLDITALIC": {},
+ "LINEAR": {},
+ "QUADRATIC": {},
+ "BEZIER": {},
+ "CURVE": {},
+ "STROKE": {},
+ "FILL": {},
+ "TEXTURE": {},
+ "IMMEDIATE": {},
+ "IMAGE": {},
+ "NEAREST": {},
+ "REPEAT": {},
+ "CLAMP": {},
+ "MIRROR": {},
+ "LANDSCAPE": {},
+ "PORTRAIT": {},
+ "GRID": {},
+ "AXES": {},
"print": {
"description": [
- "print() 함수는 브라우저 콘솔창에 출력할 때 사용됩니다. 프로그램이 생성하는 데이터를 확인할 때 주로 도움됩니다. 함수는 매번 호출될 때마다 콘솔창에 새로운 텍스트 줄을 만듭니다. 개별 요소는 큰따옴표로 분리하고, 더하기 연산자(+)로 두 요소를 결합할 수 있습니다. 인수없이 print()를 호출하면, window.print()와 동일하게 브라우저상 인쇄 기능을 켭니다. 콘솔창에 빈 줄을 출력하려면 print('\n')을 작성하면 됩니다."
+ "print() 함수는 브라우저 콘솔창에 출력할 때 사용됩니다. 프로그램이 생성하는 데이터를 확인할 때 주로 도움됩니다. 함수는 매번 호출될 때마다 콘솔창에 새로운 텍스트 줄을 만듭니다. 개별 요소는 큰따옴표로 분리하고, 더하기 연산자(+)로 두 요소를 결합할 수 있습니다. 인수없이 print()를 호출하면, window.print()와 동일하게 브라우저상 인쇄 기능을 켭니다. 콘솔창에 빈 줄을 출력하려면 print('\n')을 작성하면 됩니다.",
+ ""
],
"params": {
"contents": "전부: 출력할 숫자, 문자열, 객체, 불리언, 배열의 조합"
- },
- "returns": ""
+ }
},
"frameCount": {
"description": [
"시스템 변수 frameCount는 프로그램 시작 이후 화면에 나타난 프레임의 개수를 측정합니다. setup() 함수의 기본값은 0이고, draw() 함수의 첫번째 반복 실행이 마치면 1씩 증가하는 식입니다."
- ],
- "returns": ""
+ ]
+ },
+ "deltaTime": {
+ "description": [
+ "The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds. ",
+ "This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate."
+ ]
},
"focused": {
"description": [
"p5.js 프로그램이 등장하는 화면창의 초점이 맞는지 여부를 확인하며, 이는 곧 스케치가 마우스나 키보드 입력을 허용한다는 것을 의미합니다. 화면창의 초점이 맞으면 변수는 true이고, 그렇지 않으면 false입니다."
- ],
- "returns": ""
+ ]
},
"cursor": {
"description": [
@@ -803,74 +849,66 @@
"type": "문자열|상수: ARROW, CROSS, HAND, MOVE, TEXT, WAIT. CSS 요소인 'grab', 'progress', 'cell' 등. 외부: 커서 이미지의 경로(허용 파일 확장자:.cur, .gif, .jpg, .jpeg, .png, url 주소. 참고: https://developer.mozilla.org/en-US/docs/Web/CSS/cursor",
"x": "숫자: 커서의 수평 활성 지점 (32미만으로 지정) (선택 사항)",
"y": "숫자: 커서의 수직 활성 지점 (32미만으로 지정) (선택 사항)"
- },
- "returns": ""
+ }
},
"frameRate": {
"description": [
- "화면에 나타날 프레임 수를 매 초단위로 지정합니다. 예를 들어, frameRate(30)은 초당 30회씩 새로 고침을 시도합니다. 프로세서가 지정된 속도를 유지할만큼 빠르지 않다면, 프레임 속도에 달성되지 않습니다. setup() 함수 내에서 프레임 속도를 설정하는 것을 권장합니다. 기본값으로 제공되는 프레임 속도는 디스플레이의 프레임 속도(즉, '새로 고침 빈도')를 기준으로 합니다. 초당 24 프레임 정도면 애니메이션을 부드럽게 재생할 수 있습니다. 이 함수는 setFrameRate(val)와 동일한 효과를 갖습니다. 별도의 인수없이 frameRate() 함수를 호출하면 현재 프레임 속도가 반환됩니다. 프레임 속도를 반환하기 위해서는 draw() 함수를 한 번 이상 실행해야 합니다. 이는 getFrameRate() 함수와도 동일합니다. 숫자형이 아니거나 양수가 아닌 숫자형의 인수로 frameRate() 함수를 호출하면 마찬가지로 현재 프레임 속도를 반환합니다."
+ "화면에 나타날 프레임 수를 매 초단위로 지정합니다. 예를 들어, frameRate(30)은 초당 30회씩 새로 고침을 시도합니다. 프로세서가 지정된 속도를 유지할만큼 빠르지 않다면, 프레임 속도에 달성되지 않습니다. setup() 함수 내에서 프레임 속도를 설정하는 것을 권장합니다. 기본값으로 제공되는 프레임 속도는 디스플레이의 프레임 속도(즉, '새로 고침 빈도')를 기준으로 합니다. 초당 24 프레임 정도면 애니메이션을 부드럽게 재생할 수 있습니다. 이 함수는 setFrameRate(val)와 동일한 효과를 갖습니다. 별도의 인수없이 frameRate() 함수를 호출하면 현재 프레임 속도가 반환됩니다. 프레임 속도를 반환하기 위해서는 draw() 함수를 한 번 이상 실행해야 합니다. 이는 getFrameRate() 함수와도 동일합니다. 숫자형이 아니거나 양수가 아닌 숫자형의 인수로 frameRate() 함수를 호출하면 마찬가지로 현재 프레임 속도를 반환합니다.",
+ "",
+ ""
],
"params": {
"fps": "숫자:매 초당 화면에 나타날 프레임 수"
- },
- "returns": ""
+ }
},
"noCursor": {
"description": [
"화면상 커서를 숨깁니다."
- ],
- "returns": ""
+ ]
},
"displayWidth": {
"description": [
"pixelDensity() 함수의 기본값에 따라 화면의 너비값을 저장하는 시스템 변수입니다. 모든 디스플레이에서 프로그램을 전체 화면으로 실행시킬 때 사용합니다. 실제 화면 크기값을 반환하려면 여기에 pixelDensity를 곱하면 됩니다."
- ],
- "returns": ""
+ ]
},
"displayHeight": {
"description": [
"pixelDensity() 함수의 기본값에 따라 화면의 높이값을 저장하는 시스템 변수입니다. 모든 디스플레이에서 프로그램을 전체 화면으로 실행시킬 때 사용합니다. 실제 화면 크기값을 반환하려면 여기에 pixelDensity를 곱하면 됩니다."
- ],
- "returns": ""
+ ]
},
"windowWidth": {
"description": [
"사용자의 윈도우 화면 너비값을 저장해주는 시스템 변수로, window.innerWidth에 매핑됩니다."
- ],
- "returns": ""
+ ]
},
"windowHeight": {
"description": [
"사용자의 윈도우 화면 높이값을 저장해주는 시스템 변수로, window.innerHeight에 매핑됩니다."
- ],
- "returns": ""
+ ]
},
"windowResized": {
"description": [
"windowResized() 함수는 브라우저 창의 크기가 조정될 때마다 한 번씩 호출됩니다. 캔버스 크기를 재조정하거나 새 윈도우 화면의 크기에 맞춰 조정할 때 유용합니다."
- ],
- "returns": ""
+ ]
},
"width": {
"description": [
"생성된 캔버스의 너비값을 저장하는 시스템 변수입니다. 이 값은 createCanvas() 함수의 1번째 매개변수로서 지정됩니다. createCanvas(320, 240)는 너비 변수를 320으로 설정한 사례입니다. 프로그램에 createCanvase()를 사용하지 않을 경우, 너비는 기본값인 100으로 설정됩니다."
- ],
- "returns": ""
+ ]
},
"height": {
"description": [
"생성된 캔버스의 높이값을 저장하는 시스템 변수입니다. 이 값은 createCanvas() 함수의 2번째 매개변수로서 지정됩니다. createCanvas(320, 240)는 높이 변수를 240으로 설정한 사례입니다. 프로그램에 createCanvase()를 사용하지 않을 경우, 높이는 기본값인 100으로 설정됩니다."
- ],
- "returns": ""
+ ]
},
"fullscreen": {
"description": [
"사용자가 지정한 인수값을 기준으로 스케치를 전체 화면으로 설정합니다. 인수를 지정하지 않으면 현재 전체 화면 모드를 반환합니다. 위의 예제는 브라우저 제한으로 인해 마우스 입력과같은 사용자 입력이 있을 때 이 함수를 호출합니다."
],
+ "returns": "불리언: 현재 전체 화면 상태",
"params": {
"val": "불리언: 스케치를 전체 화면 모드로 실행할 지의 여부 (선택 사항)"
- },
- "returns": "불리언: 현재 전체 화면 상태"
+ }
},
"pixelDensity": {
"description": [
@@ -878,8 +916,7 @@
],
"params": {
"val": "숫자: 스케치의 픽셀 크기를 조정할 지 여부 또는 조정값"
- },
- "returns": ""
+ }
},
"displayDensity": {
"description": [
@@ -907,319 +944,160 @@
},
"preload": {
"description": [
- "preload() 함수는 setup() 함수 직전에 호출되며, 외부 파일의 비동기 불러오기를 차단하기 위해 사용됩니다. preload() 함수로 외부 파일 사전 불러오기가 설정되면, setup() 함수는 불러오기 호출이 완료될 때까지 대기합니다. 불러오기 호출 이외의 다른 함수(loadImage, loadJOSN, loadFont, loadString)는 preload() 함수 안에 포함되지 않아야 합니다. 만약 비동기 불러오기를 선호한다면, 불러오기 메소드를 setup() 함수 안에 포함시키거나, 그 외의 영역에서 callback 매개변수를 사용하여 호출하면 됩니다. 기본값으로 'loading..'이라는 텍스트가 화면에 나타납니다. 나만의 로딩 페이지를 만들려면 id가 p5_loading으로 지정된 HTML 요소를 추가하면 됩니다. 자세한 정보는 여기 서 확인하세요."
- ],
- "returns": ""
+ "preload() 함수는 setup() 함수 직전에 호출되며, 외부 파일의 비동기 불러오기를 차단하기 위해 사용됩니다. preload() 함수로 외부 파일 사전 불러오기가 설정되면, setup() 함수는 불러오기 호출이 완료될 때까지 대기합니다. 불러오기 호출 이외의 다른 함수(loadImage, loadJOSN, loadFont, loadString)는 preload() 함수 안에 포함되지 않아야 합니다. 만약 비동기 불러오기를 선호한다면, 불러오기 메소드를 setup() 함수 안에 포함시키거나, 그 외의 영역에서 callback 매개변수를 사용하여 호출하면 됩니다. 기본값으로 'loading..'이라는 텍스트가 화면에 나타납니다. 나만의 로딩 페이지를 만들려면 id가 p5_loading으로 지정된 HTML 요소를 추가하면 됩니다. 자세한 정보는 여기 서 확인하세요.",
+ ""
+ ]
},
"setup": {
"description": [
- "setup() 함수는 프로그램 실행시 단 한번 호출됩니다. 함수는 화면 크기나 배경색 등의 초기 환경 요소를 정의하고, 또 이미지나 폰트같은 미디어 파일을 불러오는 데에 쓰입니다. setup() 함수는 프로그램당 한 개씩만 존재할 수 있으며, 최초 한 번 실행된 이후에는 재호출되지 않아야 합니다. 참고: setup() 함수 안에 선언된 변수는, draw() 함수를 비롯한 여타 함수들이 접근할 수 없습니다."
- ],
- "returns": ""
+ "setup() 함수는 프로그램 실행시 단 한번 호출됩니다. 함수는 화면 크기나 배경색 등의 초기 환경 요소를 정의하고, 또 이미지나 폰트같은 미디어 파일을 불러오는 데에 쓰입니다. setup() 함수는 프로그램당 한 개씩만 존재할 수 있으며, 최초 한 번 실행된 이후에는 재호출되지 않아야 합니다. 참고: setup() 함수 안에 선언된 변수는, draw() 함수를 비롯한 여타 함수들이 접근할 수 없습니다.",
+ ""
+ ]
},
"draw": {
"description": [
- "draw() 함수는 setup() 함수 직후에 호출되며, 프로그램 실행이 중단되거나 noLoop() 함수가 호출되기 전까지 블록 내에 포함된 코드들을 계속 실행합니다. 만약 setup() 함수에서 noLoop()가 호출된다면, draw() 함수는 단 한 번 실행됩니다. draw() 함수는 자동으로 호출되며, 명시적으로 호출하면 안됩니다. draw() 함수는 항상 noLoop(), redraw(), 그리고 loop() 함수로 제어됩니다. noLoop()함수가 draw() 함수에 포함된 코드 실행을 멈추면, redraw() 함수가 draw() 함수 안에 포함된 코드들을 한 번만 실행하게 됩니다. loop() 함수의 경우, draw() 함수 안에 있는 코드를 계속해서 반복적으로 실행되게 합니다. draw() 함수가 초당 호출되는 횟수는 frameRate() 함수를 통해 조정할 수 있습니다. draw() 함수는 한 스케치당 한 번만 작성되어야 하며, 코드를 계속 실행하거나 mousePressed()와 같은 이벤트를 처리할 때 반드시 필요합니다. 때로는 위의 예제처럼 비어있는 draw() 함수를 호출하기도 합니다. 드로잉의 좌표계가 매 draw() 함수가 호출될 때마다 리셋되는 점에 유의하세요. draw() 함수 안에서 변형 함수(scale, rotate, translate)가 실행될 경우, draw() 함수가 재호출되는 시점에 그 효과들은 무효화되고, 따라서 시간이 지나도 변형 내용이 누적되지 않습니다. 반면, 한 번 선언된 스타일(fill, stroke 등)은 계속해서 적용됩니다."
- ],
- "returns": ""
+ "draw() 함수는 setup() 함수 직후에 호출되며, 프로그램 실행이 중단되거나 noLoop() 함수가 호출되기 전까지 블록 내에 포함된 코드들을 계속 실행합니다. 만약 setup() 함수에서 noLoop()가 호출된다면, draw() 함수는 단 한 번 실행됩니다. draw() 함수는 자동으로 호출되며, 명시적으로 호출하면 안됩니다. draw() 함수는 항상 noLoop(), redraw(), 그리고 loop() 함수로 제어됩니다. noLoop()함수가 draw() 함수에 포함된 코드 실행을 멈추면, redraw() 함수가 draw() 함수 안에 포함된 코드들을 한 번만 실행하게 됩니다. loop() 함수의 경우, draw() 함수 안에 있는 코드를 계속해서 반복적으로 실행되게 합니다. draw() 함수가 초당 호출되는 횟수는 frameRate() 함수를 통해 조정할 수 있습니다. draw() 함수는 한 스케치당 한 번만 작성되어야 하며, 코드를 계속 실행하거나 mousePressed()와 같은 이벤트를 처리할 때 반드시 필요합니다. 때로는 위의 예제처럼 비어있는 draw() 함수를 호출하기도 합니다. 드로잉의 좌표계가 매 draw() 함수가 호출될 때마다 리셋되는 점에 유의하세요. draw() 함수 안에서 변형 함수(scale, rotate, translate)가 실행될 경우, draw() 함수가 재호출되는 시점에 그 효과들은 무효화되고, 따라서 시간이 지나도 변형 내용이 누적되지 않습니다. 반면, 한 번 선언된 스타일(fill, stroke 등)은 계속해서 적용됩니다.",
+ "",
+ "",
+ "",
+ ""
+ ]
},
"remove": {
"description": [
"전체 p5 스케치를 제거합니다. 이 함수는 캔버스와 p5.js로 생성한 모든 요소들을 제거합니다. 또한, 그리기 반복(draw loop)를 중지하고, 윈도우 전역 범위에서 선언된 속성이나 메소드의 구속력을 해제합니다. 새로운 p5 스케치를 만들고자 할 경우에는 변수 p5를 남겨둡니다. 원한다면 p5 = null로 처리하여 이를 제거할 수 있습니다. p5 라이브러리로 생성한 모든 함수, 변수, 그리고 객체가 제거되지만, 사용자가 코드로 생성한 여타 전역 변수들은 그대로 유지됩니다."
- ],
- "returns": ""
+ ]
},
"disableFriendlyErrors": {
"description": [
"스케치를 만드는 동안 '친근한 에러 시스템(Friendly Error System, FES)'을 필요시 비활성화하여 성능을 향상시킵니다. 친근한 에러 시스템 비활성화하기 를 참고하세요."
- ],
- "returns": ""
- },
- "noLoop": {
- "description": [
- "p5.js가 draw() 함수 안에 포함된 코드를 계속 실행하지 않도록 합니다. loop() 함수가 호출될 경우, draw() 함수 안의 코드가 다시 계속 실행 됩니다. setup() 함수 안에 noLoop() 함수를 사용할 경우, setup() 함수 블록의 가장 마지막 줄에 작성합니다. noLoop()을 사용하면, mousePressed()나 keyPressed()와 같은 이벤트 처리 함수를 통해 화면에 접근하거나 조정할 수 없습니다. 대신, redraw()나 loop() 함수들을 이용하여, 화면 업데이트 함수인 draw()를 재실행시켜 이벤트 처리 함수를 실행할 수 있습니다. 다시 말해, noLoop() 함수가 호출된다는 것은 draw()가 실행되지 않으며, saveFrame()이나 loadPixels()와 같은 함수 역시 사용할 수 없음을 뜻합니다. 스케치 크기를 재조정하면, noLoop() 함수가 호출되지 않더라도 redraw()가 호출되어 스케치를 업데이트하는 점에 유의하세요. 그렇지 않으면, 스케치는 loop()가 호출될 때까지 예기치 못한 반응을 보일 수 있습니다."
- ],
- "returns": ""
- },
- "loop": {
- "description": [
- "기본값으로, p5.js는 draw() 함수 안에 포함된 코드를 계속해서 반복 실행(loop)합니다. 하지만, draw() 함수의 반복 실행 기능은 noLoop() 함수를 통해 중단될 수 있습니다. 그 경우, draw()의 반복 실행 기능은 loop() 함수를 통해 재개할 수 있습니다."
- ],
- "returns": ""
- },
- "push": {
- "description": [
- "push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의하세요. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제를 참고하세요.) push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader()"
- ],
- "returns": ""
- },
- "pop": {
- "description": [
- "push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의하세요. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제를 참고하세요.) push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader()"
]
},
- "redraw": {
- "description": [
- "draw() 함수 안에 포함된 코드를 한 번 재실행합니다. 이 함수를 통해 필요시에만 화면을 업데이트할 수 있습니다. mousePressed()나 keyPressed()가 지정한 이벤트를 발생시킬 때가 그 예입니다. 프로그램의 구조를 고려하면, mousePressed()와 같은 이벤트 함수에 redraw()를 호출하는 것이 좋습니다. 이는 redraw()가 draw()함수를 즉각적으로 실행시키지 않기 때문입니다. redraw()는 화면 업데이트가 필요함을 알리는 표식 설정만합니다."
- ],
- "params": {
- "n": "정수: n번 간 redraw() 함수 실행. 기본값은 1 (선택 사항)"
- },
- "returns": ""
- },
- "p5": {
- "description": [
- "p5() 생성자로 전역 모드 대신 인스턴스 모드를 활성화할 수 있습니다. 이는 고급 활용 사례에 해당합니다. 간단한 설명과 예제가 아래에 포함되어 있습니다. 자세한 내용은 다니엘 쉬프만(Dan Shiffman)의 Coding Train 비디오 튜토리얼 또는 이 페이지를 참조하세요. 기본값으로, 모든 p5.js 함수들은 전역 네임스페이스에 속합니다. (즉, 화면창 객체에 구속됩니다.) 이는, p5.js 함수들을 ellipse(), fill()과 같은 이름으로 불러올 수 있음을 뜻합니다. 하지만, 이러한 방식은 자바스크립트의 여타 (동기식 또는 비동기식) 라이브러리를 사용하거나 긴 코딩을 작성할 때 다소 불편할 수 있습니다. 따라서, p5.js는 인스턴스 모드를 통해 이 문제를 해결할 수 있는 방법을 지원합니다. 인스턴스 모드에서는 모든 p5 함수의 전역 네임 스페이스를 오염시키는 대신, 이를 단일 변수에 구속되게 만듭니다. 선택적으로, 캔버스나 다른 요소에 추가할 두 번째 인수로서 기본 컨테이너를 지정할 수 있습니다. HTML상 요소의 id나 노드 자체를 추가(append)할 수 있습니다. 이처럼 인스턴스를 만들면, 단일 웹페이지에 두 개 이상의 p5 스케치를 사용할 수 있게 됩니다. 각각의 고유한 설정 변수에 의거하기 때문입니다. 물론, 전역 모드에서도 iframe 기능을 이용하면 복수의 스케치를 웹페이지에 사용할 수 있습니다."
- ],
- "params": {
- "sketch": "객체: p5.js 스케치를 포함하는 함수",
- "node": "문자열|객체: 스케치를 포함할 HTML DOM 노드 ID 또는 포인터"
- },
- "returns": ""
- },
- "select": {
- "description": [
- "지정한 ID, 클래스, 또는 태그 이름(접두어 '#'로 ID를, '.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element를 반환합니다. 클래스나 태그의 이름이 2개 이상의 요소로 지정된 경우, 1번째 요소만 반환됩니다. DOM 노드는 .elt로 검섹할 수 있습니다. 아무 것도 검색되지 않을 경우 null을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다."
- ],
- "params": {
- "name": "문자열: 검색할 요소의 id, 클래스, 또는 태그 이름",
- "container": "문자열|p5.Element|HTML 요소: id, p5.Element, 또는 HTML 요소 내에서 검색(선택 사항)"
- },
- "returns": "검색된 노드를 포함한 p5.Element"
- },
- "selectAll": {
- "description": [
- "지정한 클래스 또는 태그 이름('.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element 배열로 반환합니다. DOM 노드는 .elt로 검색할 수 있습니다. 아무 것도 검색되지 않을 경우 빈 배열을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다."
- ],
- "params": {
- "name": "문자열: 검색할 요소의 클래스 또는 태그 이름",
- "container": "문자열: id, p5.Element, 또는 HTML 요소 내에서 검색(선택 사항)"
- },
- "returns": "검색된 노드를 포함한 p5.Element 배열"
- },
- "removeElements": {
- "description": [
- "createCanvase() 또는 createGraphics()로 생성된 캔버스와 그래픽을 제외하고, p5로 생성된 모든 요소를 제거합니다. 이벤트 핸들러 역시 제거되며, 요소가 DOM에서 제거됩니다."
- ],
- "params": {},
- "returns": ""
- },
- "changed": {
- "description": [
- ".changed() 함수는 요소값이 변경될 때 호출됩니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다."
- ],
- "params": {
- "fxn": "함수|불리언: 요소값이 변경될 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가"
- },
- "returns": ""
- },
- "input": {
- "description": [
- ".input() 함수는 요소가 사용자 입력을 감지할 때 호출됩니다. 입력 이벤트는 키 또는 슬라이더 요소의 변경을 감지합니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다."
- ],
- "params": {
- "fxn": "함수|불리언: 요소가 사용자 입력을 감지할 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가"
- },
- "returns": ""
- },
- "createDiv": {
- "description": [
- "주어진 내부 HTML을 사용하여 DOM에
요소를 생성합니다."
- ],
- "params": {
- "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
- },
- "createP": {
+ "let": {
"description": [
- "주어진 내부 HTML을 사용하여 DOM에
요소를 생성합니다. 문단형 텍스트 작성시 사용됩니다."
- ],
- "params": {
- "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "새로운 변수를 생성하고 그 이름을 지정합니다. 변수는 값을 담는 컨테이너입니다. let으로 선언된 변수는 블록 단위의 적용 범위를 갖습니다. 즉, 변수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다.MDN Entry 에서 발췌: 블록 범위의 지역 변수를 선언하고, 선택적으로 그 값을 초기화합니다.",
+ "",
+ ""
+ ]
},
- "createSpan": {
+ "const": {
"description": [
- "주어진 내부 HTML을 사용하여 DOM에 요소를 생성합니다."
- ],
- "params": {
- "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "새로운 상수를 생성하고 그 이름을 지정합니다. 마치 let으로 생성된 변수처럼, const로 생성된 상수는 값을 담는 컨테이너입니다. 하지만, 상수는 한 번 산언된 다음 변경할 수 없습니다. const로 선언된 상수는 블록 단위의 적용 범위를 갖습니다. 즉, 상수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다. 상수는 자신이 존재하고 있는 범위 내에서 재선언될 수 없습니다.MDN Entry 에서 발췌: 읽기만 가능한 상수를 선언합니다. const는 블록 단위로 적용되며, let으로 선언된 변수들과 유사합니다. 상수값은 재지정을 통해 변경될 수 없으며, 재선언될 수 없습니다.",
+ "",
+ ""
+ ]
},
- "createImg": {
+ "===": {
"description": [
- "주어진 src와 대체 텍스트(alt text)를 사용하여 DOM에 요소를 생성합니다."
- ],
- "params": {
- "src": "문자열: 이미지의 src 또는 url 경로",
- "alt": "문자열: 이미지가 로드되지 않을 경우 사용할 대체 텍스트 . 빈 문자열(\" \")로 이미지 숨기기 가능",
- "crossOrigin": "문자열: img 요소의 교차 출처 속성(crossOrigin property) . '익명(anonymous)' 또는 '사용 자격 증명(use-credentials)'을 통해 교차 출처 권한이 있는 이미지를 검색하세요. 이는 캔버스에 이미지를 사용하기 위함이며, 빈 문자열(\" \")이 전달된 경우 교차 출처 리소스 공유(CORS)는 사용되지 않습니다.",
- "successCallback": "gkatn: 인수로 지정된 p5.Element가 이미지 데이터를 불러왔을 때 호출되는 콜백 함수 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "완전 항등 연산자 '===' 는 두 값이 같으면서 동시에 동일한 유형인지 여부를 확인합니다. 비교 표현식은 항상 불리언으로 연산됩니다.MDN Entry 에서 발췌: 이 연산자는 피연산자들이 동일한 값이 아니고/또는 동일한 유형이 아닐 때 참(true)을 반환합니다. 웹상의 몇몇 예제에서 피연산자 간의 비교를 위해 이중 등호(==)를 사용하는 것을 볼 수 있습니다. 이는 자바스크립트상의 완전 항등 연산자(===)에 해당하지 않으며, 두 피연산자의 값들을 비교하기에 앞서, 그 유형이 동일한지의 여부를 비교하게 됩니다.",
+ "",
+ "",
+ ""
+ ]
},
- "createA": {
+ ">": {
"description": [
- "DOM에 하이퍼링크를 포함한 요소를 생성합니다."
- ],
- "params": {
- "href": "문자열: 링크될 페이지 url",
- "html": "문자열: 화면에 보여질 링크 요소의 내부 HTML",
- "target": "문자열: 새로운 링크가 보여질 대상, _blank, _self, _parent, _top 중 지정 가능 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "비교 연산자 > 는 왼쪽 값이 오른쪽 값보다 큰 경우 참(true)으로 연산합니다.MDN 발췌 비교 연산자 상세 설명 "
+ ]
},
- "createSlider": {
+ ">=": {
"description": [
- "DOM에 슬라이더 요소를 생성합니다. .size() 함수로 슬라이더의 길이를 설정합니다."
- ],
- "params": {
- "min": "숫자: 슬라이더의 최소값",
- "max": "숫자: 슬라이더의 최대값",
- "value": "숫자: 슬라이더의 기본값(선택 사항)",
- "step": "숫자: 슬라이더의 단위당 이동 크기(이동 크기가 0으로 지정된 경우, 슬라이더는 최소값과 최대값 사이를 부드럽게 이동합니다.)(선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "비교 연산자 >= 는 왼쪽 값이 오른쪽 값보다 크거나 같은 경우 참(true)로 연산합니다.MDN 발췌 비교 연산자 상세 설명 ",
+ ""
+ ]
},
- "createButton": {
+ "<": {
"description": [
- "DOM에 요소를 생성합니다. .size() 함수로 버튼의 크기를 설정합니다. .mousePressed() 함수로 버튼이 클릭됐을 때의 행동을 지정합니다."
- ],
- "params": {
- "label": "문자열: 버튼 위에 나타나는 레이블",
- "value": "문자열: 버튼값 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "비교 연산자 < 는 왼쪽 값이 오른쪽 값보다 작은 경우 참(true)으로 연산합니다.MDN 발췌 비교 연산자 상세 설명 ",
+ ""
+ ]
},
- "createCheckbox": {
+ "<=": {
"description": [
- "DOM에 체크박스 요소를 생성합니다. .checked() 함수를 통해 체크되었는지의 여부를 반환합니다."
- ],
- "params": {
- "label": "문자열: 체크박스 위에 나타나는 레이블 (선택 사항)",
- "value": "불리언: 체크박스의 값: 체크는 참(true), 체크 해제는 거짓(false) (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "비교 연산자 <= 는 왼쪽 값이 오른쪽 값보다 작거나 같은 경우 참(true)로 연산합니다.MDN 발췌 비교 연산자 상세 설명 ",
+ ""
+ ]
},
- "createSelect": {
+ "if-else": {
"description": [
- "DOM에 드롭다운 메뉴 요소를 생성합니다. 이미 생성된 셀렉트 박스(select box)를 선택할 경우, p5.Element에 select-box 메소드를 지정하는 데에도 쓰입니다. 셀렉트 박스 생성 후, .option() 메소드로 선택지(option)를 설정할 수 있습니다. .selected() 메소드는 p5.Element 인스턴스인 현재 드롭다운 요소를 반환합니다. .selected() 메소드는 특정 선택지를 최초 페이지 로드시의 기본값으로서 설정할 수 있습니다. .disable() 메소드는 특정 선택지를 비활성화하고, 별도로 지정된 인수가 없는 경우엔 전체 드롭다운 요소를 비활성화 상태로 표시합니다."
- ],
- "params": {
- "multiple": "불리언: 드롭다운이 여러 개의 선택지를 제공할 경우 참(true) (선택 사항)",
- "UNKNOWN-PARAM-2": "객체: DOM 셀렉트 요소"
- },
- "returns": "p5.Element"
+ "if-else문으로 코드의 흐름을 제어할 수 있습니다. 'if' 바로 다음 괄호 안에 조건을 지정할 수 있으며, 조건이 참(truthy) 으로 연산되면 뒤따른 중괄호 사이의 코드가 실행됩니다. 조건이 거짓(falsy) 으로 연산되면 'else' 뒤에 오는 중괄호 사이의 코드가 대신 실행됩니다.MDN Entry 에서 발췌: 지정된 조건이 참일 경우, if문은 명령문을 실행합니다. 조건이 거짓이면 다른 명령문을 실행할 수 잇습니다.",
+ "",
+ ""
+ ]
},
- "createRadio": {
+ "function": {
"description": [
- "DOM에 라디오 버튼 요소를 생성합니다. 라디오 버튼 생성 후, .option() 메소드로 옵션을 설정할 수 있습니다. .value() 메소드는 현재 선택된 옵션을 반환합니다."
- ],
- "params": {
- "divId": "문자열: 생성된 div와 input field 각각의 id 및 이름 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "새로운 함수(function) 를 생성하고 그 이름을 지정합니다. 함수란, 작업을 수행하는 일련의 명령문을 뜻합니다. 선택적으로, 함수는 매개변수를 가질 수 있습니다.매개변수(parameter) 란, 특정 함수에만 그 사용 범위가 지정된 변수를 뜻하며 함수 호출시 그 값을 지정할 수 있습니다.MDN Entry 에서 발췌: 사용자가 지정한 매개변수를 사용하여 함수를 선언합니다.",
+ "",
+ ""
+ ]
},
- "createColorPicker": {
+ "return": {
"description": [
- "DOM에 색상 입력을 위한 색상 추출(colorPicker) 요소를 생성합니다. .value() 메소드는 색상의 헥사(Hex) 문자열(#rrggbb)을 반환합니다. .color() 메소드는 현재 선택된 색상의 p5.Color 객체를 반환합니다."
- ],
- "params": {
- "value": "문자열|p5.Color: 요소의 색상 기본값 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "함수가 반환할 값을 지정합니다. MDN Entry 발췌 함수(function) 상세 설명 "
+ ]
},
- "createInput": {
+ "boolean": {
"description": [
- "DOM에 텍스트 입력을 위한 요소를 생성합니다. .size() 함수로 상자의 크기를 설정합니다."
+ "불리언(boolean)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 불리언은 참(true) 또는 거짓(false)으로 값을 나타냅니다.MDN Entry 에서 발췌: 불리언은 논리적 개체를 나타내며 참(true) 또는 거짓(false)이라는 두 개의 값만 갖습니다."
],
+ "returns": "Boolean: boolean representation of value",
"params": {
- "value": "문자열: 입력 상자의 기본값 (선택 사항)",
- "type": "문자열: 텍스트 유형 (예: text, password 등) 기본값은 text (선택 사항)"
- },
- "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터"
+ "n": "String|Boolean|Number|Array: value to parse"
+ }
},
- "createFileInput": {
+ "string": {
"description": [
- "'파일(file)' 유형의 DOM에 요소를 생성합니다. 스케치에 사용할 로컬 파일을 선택할 수 있게 됩니다."
- ],
- "params": {
- "callback": "함수: 파일이 로드될 때의 콜백 함수 (선택 사항)",
- "multiple": "문자열: 여러 파일 선택 허용 (선택 사항)"
- },
- "returns": "p5.Element: 생성된 DOM 요소를 담고있는 p5.Element에 대한 포인터"
+ "문자열(string)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 문자열은 일련의 텍스트 문자들을 뜻하며, 자바스크립트에서 문자열 값은 작은 따옴표나 큰따옴표로 묶여 표현됩니다.MDN Entry 에서 발췌: 문자열은 텍스트를 나타낼 때 사용하는 일련의 문자들입니다.",
+ ""
+ ]
},
- "createVideo": {
+ "number": {
"description": [
- "DOM에 간단한 오디오/비디오 재생을 위한 HTML5 요소를 생성합니다. 화면에 나타나기가 기본값이며, .hide()로 숨길 수 있습니다. video() 함수를 통해 캔버스에 그릴 수 있습니다. 1번째 매개변수는 비디오 파일에 대한 단일 문자열 경로이거나, 또는 동일한 비디오 파일이 여러 개의 형식을 갖는 경우, 문자열 경로들의 배열로 지정됩니다. 특히, 다양한 파일 형식을 지정하여 여러 종류의 브라우저에서 재생될 수 있도록 하는 데에 용이합니다. 지원되는 파일 형식에 대한 자세한 내용은 이 페이지 를 참고하세요. "
- ],
- "params": {
- "src": "문자열|문자열 배열[]: 비디오 파일 경로, 또는 경로들의 배열(여러 종류의 브라우저 지원)",
- "callback": "함수: 브라우저의 미디어 재생가능 상태를 뜻하는, 'canplaythrough' 이벤트 발생시에 호출되는 함수. 추가 버퍼링 없이도, 미디어를 끝까지 재생할 수 있는 충분한 데이터가 로드된 것으로 평가. (선택 사항)"
- },
- "returns": "p5.MediaElement: 비디오 p5.Element에 대한 포인터"
+ "숫자(number)는 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 숫자는 정수 또는 10진수로 표현됩니다.MDN Entry 발췌 숫자(number) 상세 설명 ",
+ ""
+ ]
},
- "createAudio": {
+ "object": {
"description": [
- "DOM에 간단한 오디오 재생을 위한 HTML5 요소를 생성합니다. 1번째 매개변수는 오디오 파일에 대한 단일 문자열 경로이거나, 또는 동일한 오디오 파일이 여러 개의 형식을 갖는 경우, 문자열 경로들의 배열로 지정됩니다. 특히, 다양한 파일 형식을 지정하여 여러 종류의 브라우저에서 재생될 수 있도록 하는 데에 용이합니다. 지원되는 파일 형식에 대한 자세한 내용은 이 페이지 를 참고하세요. "
- ],
- "params": {
- "src": "문자열|문자열 배열[]: 오디오 파일 경로, 또는 경로들의 배열(여러 종류의 브라우저 지원)",
- "callback": "함수: 브라우저의 미디어 재생가능 상태를 뜻하는, 'canplaythrough' 이벤트 발생시에 호출되는 함수. 추가 버퍼링 없이도, 미디어를 끝까지 재생할 수 있는 충분한 데이터가 로드된 것으로 평가. (선택 사항)"
- },
- "returns": "p5.MediaElement: 오디오 p5.Element에 대한 포인터"
+ "MDN Entry 발췌 객체(object) 기초 설명 : 객체(object)는 데이터 그리고/또는 함수의 모음을 뜻합니다. 일반적으로 여러 개의 변수와 함수로 구성됩니다. 변수와 함수가 객체 안에 포함된 경우, 각각을 속성(property)과 메소드(method)라 부릅니다."
+ ]
},
- "VIDEO": {
+ "class": {
"description": [
+ "클래스(class)를 생성하고 그 이름을 지정합니다. 클래스는 객체(object) 생성을 위한 하나의 템플릿입니다.MDN Entry 에서 발췌: 클래스 선언을 통해 새로운 Class를 생성합니다. 이 때, 새로운 Class의 이름은 프로토타입 기반 상속을 통해 지정됩니다.",
""
- ],
- "params": {
- "UNKNOWN-PARAM-1": ""
- },
- "returns": ""
+ ]
},
- "AUDIO": {
+ "for": {
"description": [
+ "for문을 사용하여 특정 섹션의 코드에 대한 반복문(loop)을 만듭니다. 'for 반복문(for loop)'은 괄호 속 3개의 다른 표현식들로 구성되며, 각각의 표현식은 모두 선택 사항입니다. 이 표현식들은 반복 실행(loop)의 횟수를 제어합니다. 1번째 표현식은 반복문의 초기 상태를 설정하는 명령문입니다. 2번째 표현식은 매 반복 실행에 앞서 조건 충족 여부를 확인합니다. 이 표현식이 거짓(false)를 반환하면 반복 실행이 종료됩니다. 3번째 표현식은 반복문의 가장 마지막 단계에 실행됩니다. for 반복문의 본문(중괄호 사이의 영역)에 포함된 코드는 2번째와 3번째 표현식의 연산과정 사이에 실행됩니다. 여타 반복문과 마찬가지로, for 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. 앞서 설명된 2번째 표현식을 통해, for 반복문의 조건이 거짓으로 연산되는 시점을 정할 수 있습니다. for반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않으면, 브라우저가 중단될 수 있습니다.MDN Entry 에서 발췌: for 반복문은 조건이 거짓(false)으로 연산될 때까지 지정된 명령문을 실행합니다. 명령문을 실행한 후에는 조건 충족 여부를 다시 평가하여, 명령문이 최소 1번 실행되도록 합니다.",
+ "",
+ "",
+ "",
""
- ],
- "params": {
- "UNKNOWN-PARAM-1": ""
- },
- "returns": ""
- },
- "createCapture": {
- "description": [
- "웹캠의 오디오/비디오 피드를 담는 요소를 생성합니다. 이 요소는 캔버스와는 별개로 작동합니다. '화면에 나타내기'가 기본값으로 주어지며, .hide()를 사용하여 화면으로부터 숨길 수 있습니다. image() 함수를 사용하여 피드를 캔버스에 그릴 수 있습니다. loadedmetadata 속성을 사용하여 요소가 완전히 로드된 시점을 감지할 수 있습니다. (2번째 예제 참고) 피드의 구체적인 속성은 제약 조건(Constraints) 객체를 전달할 수 있습니다. 속성 및 제약 조건 객체와 관련해서는 W3C 사양 을 참고하세요. 모든 브라우저가 이 기능을 지원하지 않는 점에 유의하세요. 보안 정보: 최신 브라우저 보안 사양은 createCapture() 이면의 getUserMedia() 메소드가 로컬 또는 HTTPS에서 코드 실행시에만 작동할 것을 요구합니다. 자세한 사항은 여기 와 여기 서 확인하세요. "
- ],
- "params": {
- "type": "문자열|상수|객체: 캡처 유형, VIDEO 또는 AUDIO 중 하나로 지정 가능. 별도의 매개변수가 지정되지 않을 경우 기본값으로 둘 다 또는 제약 조건 객체",
- "callback": "함수: 스트림 로드 완료 후 1번 호출되는 함수 (선택 사항)"
- },
- "returns": ""
+ ]
},
- "createElement": {
+ "while": {
"description": [
- "지정된 콘텐츠를 지닌 DOM에 태그된 요소를 생성합니다."
- ],
- "params": {
- "tag": "문자열: 새로운 요소의 태그",
- "content": "문자열: 요소 안에 삽입될 HTML 콘텐츠 (선택 사항)"
- },
- "returns": ""
+ "while문을 사용하여 특정 섹션의 코드에 대한 반복문(loop)을 만듭니다. 'while 반복문(while loop)'을 사용하면, 소괄호 속 조건이 거짓(false)이 될 때까지 중괄호 속 본문의 코드가 반복적으로 실행됩니다. for 반복문과 달리, while 반복문은 그 본문 속 코드를 실행하기 앞서 조건 충족 여부를 먼저 확인합니다. 따라서, 최초 실행시 조건이 거짓일 경우, while문 속 본문과 명령문은 절대 실행되지 않습니다. 여타 반복문과 마찬가지로, while 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. while 반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않을 경우, 브라우저가 중단될 수 있습니다.MDN Entry 에서 발췌: while 반복문은 조건이 참(true)인 경우에 한해 지정된 명령문을 실행합니다. 명령문 실행에 앞서 조건 충족 여부가 평가됩니다.",
+ "",
+ "",
+ ""
+ ]
},
"createCanvas": {
"description": [
- "캔버스를 생성하고 픽셀 단위로 크기를 설정합니다. createCanvas()는 setup() 함수 시작시 단 한 번만 실행되어야 합니다. createCanvas()를 한 번 이상 호출하면 스케치가 예기치 못한 반응을 보일 수 있습니다. 두 개 이상의 캔버스가 필요하다면 createGraphics()를 이용하세요. 설정된 캔버스 사이즈는 시스템 변수인 너비(width)와 높이(height)에 각각 저장됩니다. createCanvas() 함수를 생략하면, 스케치의 크기는 기본값인 100x100 픽셀로 지정됩니다. 캔버스의 위치 지정 방법을 알고싶다면, 캔버스 위치 지정하기 위키 페이지를 참고하세요."
+ "캔버스를 생성하고 픽셀 단위로 크기를 설정합니다. createCanvas()는 setup() 함수 시작시 단 한 번만 실행되어야 합니다. createCanvas()를 한 번 이상 호출하면 스케치가 예기치 못한 반응을 보일 수 있습니다. 두 개 이상의 캔버스가 필요하다면 createGraphics()를 이용하세요. 설정된 캔버스 사이즈는 시스템 변수인 너비(width)와 높이(height)에 각각 저장됩니다. createCanvas() 함수를 생략하면, 스케치의 크기는 기본값인 100x100 픽셀로 지정됩니다. 캔버스의 위치 지정 방법을 알고싶다면, 캔버스 위치 지정하기 위키 페이지를 참고하세요.",
+ "",
+ ""
],
+ "returns": "p5.Renderer",
"params": {
"w": "숫자: 캔버스의 너비값",
"h": "숫자: 캔버스의 높이값",
"renderer": "상수: P2D 또는 WEBGL (선택 사항)"
- },
- "returns": "p5.Renderer"
+ }
},
"resizeCanvas": {
"description": [
@@ -1229,238 +1107,100 @@
"w": "숫자: 캔버스의 너비값",
"h": "숫자: 캔버스의 높이값",
"noRedraw": "불리언: 캔버스를 곧바로 다시 그리지 않도록 처리할지의 여부 (선택 사항)"
- },
- "returns": ""
+ }
},
"noCanvas": {
"description": [
"캔버스가 불필요한 p5 스케치를 위해 기본적으로 제공되는 캔버스를 제거합니다."
- ],
- "returns": ""
+ ]
},
"createGraphics": {
"description": [
"새로운 p5.Renderer 객체를 생성하고 반환합니다. 화면 밖 그래픽 버퍼(off-screen graphic buffer)에 그리려면 이 클래스를 사용하세요. 2개의 매개변수는 너비와 높이를 픽셀 단위로 지정합니다."
],
+ "returns": "p5.Graphics: 화면 밖 그래픽 버퍼",
"params": {
"w": "숫자: 화면 밖 그래픽 버퍼의 너비값",
"h": "숫자: 화면 밖 그래픽 버퍼의 높이값",
"renderer": "상수:P2D 또는 WEBGL, 기본값은 P2D"
- },
- "returns": "p5.Graphics: 화면 밖 그래픽 버퍼"
+ }
},
"blendMode": {
"description": [
- "사용자가 지정한 모드에 따라 디스플레이 화면상의 픽셀들을 혼합합니다. 소스 픽셀 (A)를 디스플레이 화면 (B)상에 있는 픽셀과 혼합하기 위해 다음 모드를 선택할 수 있습니다:BLEND - 색상 선형 보간:C = (A)*계수 + (B). 기본 혼합 모드입니다.ADD - (A)와 (B)의 합DARKEST - 가장 어두운 색상만 혼합됩니다:C = min(A*계수, B).LIGHTEST - 가장 밝은 색상만 혼합됩니다.:C = max(A*계수, B).DIFFERENCE - 기본 이미지에서 색상값을 뺄셈합니다.EXCLUSION - DIFFERENCE와 유사하지만 덜 극적입니다.MULTIPLY - 색상을 곱하는 것으로, 결과값은 좀 더 어둡습니다.SCREEN - MULTIPLY와 반대로 색상의 반전된 값을 사용합니다.REPLACE - 픽셀이 다른 픽셀을 완전히 대체하며 알파값(투명도)를 사용하지 않습니다.OVERLAY - MULTIPLY와 SCREEN의 혼합으로, 어두운 값을 곱하고 밝은 값의 반전된 값을 사용합니다. (2D)HARD_LIGHT - 회색값이 50%보다 높으면 SCREEN로, 낮으면 MULTIPLY로 처리합니다. (2D)SOFT_LIGHT - DARKEST와 LIGHTEST 혼합으로, OVERLAY처럼 작동하나 덜 강합니다. (2D)DODGE - 밝은 색조를 더 밝게 처리하고 대비를 높이며, 어두운 영역은 무시합니다. (2D)BURN - 어두운 영역이 적용되어 대비가 증가하고 밝기는 무시됩니다. (2D)SUBTRACT - (A)와 (B)의 나머지(3D) (2D)는 2D 렌더러에서만 작동하는 혼합 모드를 뜻합니다. (3D)는 WEBGL 렌더러에서만 작동하는 혼합 모드를 뜻합니다."
+ "사용자가 지정한 모드에 따라 디스플레이 화면상의 픽셀들을 혼합합니다. 소스 픽셀 (A)를 디스플레이 화면 (B)상에 있는 픽셀과 혼합하기 위해 다음 모드를 선택할 수 있습니다:BLEND - 색상 선형 보간:C = (A)*계수 + (B). 기본 혼합 모드입니다.ADD - (A)와 (B)의 합DARKEST - 가장 어두운 색상만 혼합됩니다:C = min(A*계수, B).LIGHTEST - 가장 밝은 색상만 혼합됩니다.:C = max(A*계수, B).DIFFERENCE - 기본 이미지에서 색상값을 뺄셈합니다.EXCLUSION - DIFFERENCE와 유사하지만 덜 극적입니다.MULTIPLY - 색상을 곱하는 것으로, 결과값은 좀 더 어둡습니다.SCREEN - MULTIPLY와 반대로 색상의 반전된 값을 사용합니다.REPLACE - 픽셀이 다른 픽셀을 완전히 대체하며 알파값(투명도)를 사용하지 않습니다.OVERLAY - MULTIPLY와 SCREEN의 혼합으로, 어두운 값을 곱하고 밝은 값의 반전된 값을 사용합니다. (2D)HARD_LIGHT - 회색값이 50%보다 높으면 SCREEN로, 낮으면 MULTIPLY로 처리합니다. (2D)SOFT_LIGHT - DARKEST와 LIGHTEST 혼합으로, OVERLAY처럼 작동하나 덜 강합니다. (2D)DODGE - 밝은 색조를 더 밝게 처리하고 대비를 높이며, 어두운 영역은 무시합니다. (2D)BURN - 어두운 영역이 적용되어 대비가 증가하고 밝기는 무시됩니다. (2D)SUBTRACT - (A)와 (B)의 나머지(3D) (2D)는 2D 렌더러에서만 작동하는 혼합 모드를 뜻합니다. (3D)는 WEBGL 렌더러에서만 작동하는 혼합 모드를 뜻합니다.",
+ ""
],
"params": {
"mode": "상수:캔버스에 설정되는 혼합 모드. BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD, REMOVE 또는 SUBTRACT 중 하나"
- },
- "returns": ""
+ }
},
"drawingContext": {
"description": [
"p5.js API는 다양한 그래픽 제작 기능들을 제공하지만, p5에 노출되지 않는 HTML5 고유의 캔버스 기능이 있습니다. 그러한 기능들은 예제처럼 drawingContext 변수를 사용하여 직접 호출할 수 있습니다. 이는 canvas.getContext('2d') 또는 canvas.getContext('webgl') 함수를 호출하는 것과도 같습니다. 호출 가능한 함수를 확인하려면 기본 캔버스 API 레퍼런스 를 참고하세요."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": "TODO"
+ ]
},
- "setAttributes": {
+ "noLoop": {
"description": [
- "WebGL 드로잉 컨텍스트의 속성을 설정하여 WebGL 렌더러가 화면과 성능을 미세 조정할 수 있도록 합니다. WebGL 캔버스를 생성한 후에 이 함수를 호출하면 드로잉 컨텍스트가 다시 초기화되는 점에 유의하세요. 객체가 매개변수로 전달될 경우, 객체에 선언되지 않은 모든 속성은 기본값으로 처리됩니다. 사용한 가능한 속성은 다음과 같습니다: alpha - 캔버스에 알파 버퍼가 있는지의 여부를 나타냅니다. 기본값은 참(true)입니다. stencil - 드로잉 버퍼에 8비트 이상의 스텐실 버퍼가 있는지 여부를 나타냅니다. antialias - 안티앨리어싱 기본값을 수행할지 여부를 나타냅니다. (Safari에서는 참) premultipliedAlpha - 드로잉 버퍼에 포함된 색상이 미리 곱해진 알파 기본값을 포함하는 지의 여부에 대해, 페이지 컴포지터가 거짓(false)으로 가정하고 있음을 나타냅니다. perPixelLighting - 참(true)이라면, 픽셀당 라이팅(per-pixel Lighting)이 라이팅 셰이더에 사용됩니다. 그렇지 않다면, 꼭지점당 라이팅(per-vertex lighting)이 사용됩니다. 기본값은 참입니다."
- ],
- "params": {
- "key": "문자열: 속성명",
- "value": "불리언: 명명된 속성의 새로운 값",
- "UNKNOWN-PARAM-3": "객체: 주요값들의 쌍을 갖는 객체"
- }
- },
- "let": {
- "description": [
- "새로운 변수를 생성하고 그 이름을 지정합니다. 변수는 값을 담는 컨테이너입니다. let으로 선언된 변수는 블록 단위의 적용 범위를 갖습니다. 즉, 변수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다.MDN Entry 에서 발췌: 블록 범위의 지역 변수를 선언하고, 선택적으로 그 값을 초기화합니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "const": {
- "description": [
- "새로운 상수를 생성하고 그 이름을 지정합니다. 마치 let으로 생성된 변수처럼, const로 생성된 상수는 값을 담는 컨테이너입니다. 하지만, 상수는 한 번 산언된 다음 변경할 수 없습니다. const로 선언된 상수는 블록 단위의 적용 범위를 갖습니다. 즉, 상수가 작성된 블록 내에서만 존재하고 사용될 수 있음을 뜻합니다. 상수는 자신이 존재하고 있는 범위 내에서 재선언될 수 없습니다.MDN Entry 에서 발췌: 읽기만 가능한 상수를 선언합니다. const는 블록 단위로 적용되며, let으로 선언된 변수들과 유사합니다. 상수값은 재지정을 통해 변경될 수 없으며, 재선언될 수 없습니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "===": {
- "description": [
- "완전 항등 연산자 '===' 는 두 값이 같으면서 동시에 동일한 유형인지 여부를 확인합니다. 비교 표현식은 항상 불리언으로 연산됩니다.MDN Entry 에서 발췌: 이 연산자는 피연산자들이 동일한 값이 아니고/또는 동일한 유형이 아닐 때 참(true)을 반환합니다. 웹상의 몇몇 예제에서 피연산자 간의 비교를 위해 이중 등호(==)를 사용하는 것을 볼 수 있습니다. 이는 자바스크립트상의 완전 항등 연산자(===)에 해당하지 않으며, 두 피연산자의 값들을 비교하기에 앞서, 그 유형이 동일한지의 여부를 비교하게 됩니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- ">": {
- "description": [
- "비교 연산자 > 는 왼쪽 값이 오른쪽 값보다 큰 경우 참(true)으로 연산합니다.MDN 발췌 비교 연산자 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- ">=": {
- "description": [
- "비교 연산자 >= 는 왼쪽 값이 오른쪽 값보다 크거나 같은 경우 참(true)로 연산합니다.MDN 발췌 비교 연산자 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "<": {
- "description": [
- "비교 연산자 < 는 왼쪽 값이 오른쪽 값보다 작은 경우 참(true)으로 연산합니다.MDN 발췌 비교 연산자 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "<=": {
- "description": [
- "비교 연산자 <= 는 왼쪽 값이 오른쪽 값보다 작거나 같은 경우 참(true)로 연산합니다.MDN 발췌 비교 연산자 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "if-else": {
- "description": [
- "if-else문으로 코드의 흐름을 제어할 수 있습니다. 'if' 바로 다음 괄호 안에 조건을 지정할 수 있으며, 조건이 참(truthy) 으로 연산되면 뒤따른 중괄호 사이의 코드가 실행됩니다. 조건이 거짓(falsy) 으로 연산되면 'else' 뒤에 오는 중괄호 사이의 코드가 대신 실행됩니다.MDN Entry 에서 발췌: 지정된 조건이 참일 경우, if문은 명령문을 실행합니다. 조건이 거짓이면 다른 명령문을 실행할 수 잇습니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "function": {
- "description": [
- "새로운 함수(function) 를 생성하고 그 이름을 지정합니다. 함수란, 작업을 수행하는 일련의 명령문을 뜻합니다. 선택적으로, 함수는 매개변수를 가질 수 있습니다.매개변수(parameter) 란, 특정 함수에만 그 사용 범위가 지정된 변수를 뜻하며 함수 호출시 그 값을 지정할 수 있습니다.MDN Entry 에서 발췌: 사용자가 지정한 매개변수를 사용하여 함수를 선언합니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "return": {
- "description": [
- "함수가 반환할 값을 지정합니다. MDN Entry 발췌 함수(function) 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "string": {
- "description": [
- "문자열(string)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 문자열은 일련의 텍스트 문자들을 뜻하며, 자바스크립트에서 문자열 값은 작은 따옴표나 큰따옴표로 묶여 표현됩니다.MDN Entry 에서 발췌: 문자열은 텍스트를 나타낼 때 사용하는 일련의 문자들입니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
- },
- "number": {
- "description": [
- "숫자(number)는 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 숫자는 정수 또는 10진수로 표현됩니다.MDN Entry 발췌 숫자(number) 상세 설명 "
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
+ "p5.js가 draw() 함수 안에 포함된 코드를 계속 실행하지 않도록 합니다. loop() 함수가 호출될 경우, draw() 함수 안의 코드가 다시 계속 실행 됩니다. setup() 함수 안에 noLoop() 함수를 사용할 경우, setup() 함수 블록의 가장 마지막 줄에 작성합니다. noLoop()을 사용하면, mousePressed()나 keyPressed()와 같은 이벤트 처리 함수를 통해 화면에 접근하거나 조정할 수 없습니다. 대신, redraw()나 loop() 함수들을 이용하여, 화면 업데이트 함수인 draw()를 재실행시켜 이벤트 처리 함수를 실행할 수 있습니다. 다시 말해, noLoop() 함수가 호출된다는 것은 draw()가 실행되지 않으며, saveFrame()이나 loadPixels()와 같은 함수 역시 사용할 수 없음을 뜻합니다. 스케치 크기를 재조정하면, noLoop() 함수가 호출되지 않더라도 redraw()가 호출되어 스케치를 업데이트하는 점에 유의하세요. 그렇지 않으면, 스케치는 loop()가 호출될 때까지 예기치 못한 반응을 보일 수 있습니다.",
+ "",
+ "",
+ ""
+ ]
},
- "object": {
+ "loop": {
"description": [
- "MDN Entry 발췌 객체(object) 기초 설명 : 객체(object)는 데이터 그리고/또는 함수의 모음을 뜻합니다. 일반적으로 여러 개의 변수와 함수로 구성됩니다. 변수와 함수가 객체 안에 포함된 경우, 각각을 속성(property)과 메소드(method)라 부릅니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
+ "기본값으로, p5.js는 draw() 함수 안에 포함된 코드를 계속해서 반복 실행(loop)합니다. 하지만, draw() 함수의 반복 실행 기능은 noLoop() 함수를 통해 중단될 수 있습니다. 그 경우, draw()의 반복 실행 기능은 loop() 함수를 통해 재개할 수 있습니다.",
+ "",
+ ""
+ ]
},
- "class": {
+ "isLooping": {
"description": [
- "클래스(class)를 생성하고 그 이름을 지정합니다. 클래스는 객체(object) 생성을 위한 하나의 템플릿입니다.MDN Entry 에서 발췌: 클래스 선언을 통해 새로운 Class를 생성합니다. 이 때, 새로운 Class의 이름은 프로토타입 기반 상속을 통해 지정됩니다."
- ],
- "params": {
- "class": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
+ "By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop() , isLooping() returns the current state for use within custom event handlers."
+ ]
},
- "for": {
+ "push": {
"description": [
- "for문을 사용하여 특정 섹션의 코드에 대한 반복문(loop)을 만듭니다. 'for 반복문(for loop)'은 괄호 속 3개의 다른 표현식들로 구성되며, 각각의 표현식은 모두 선택 사항입니다. 이 표현식들은 반복 실행(loop)의 횟수를 제어합니다. 1번째 표현식은 반복문의 초기 상태를 설정하는 명령문입니다. 2번째 표현식은 매 반복 실행에 앞서 조건 충족 여부를 확인합니다. 이 표현식이 거짓(false)를 반환하면 반복 실행이 종료됩니다. 3번째 표현식은 반복문의 가장 마지막 단계에 실행됩니다. for 반복문의 본문(중괄호 사이의 영역)에 포함된 코드는 2번째와 3번째 표현식의 연산과정 사이에 실행됩니다. 여타 반복문과 마찬가지로, for 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. 앞서 설명된 2번째 표현식을 통해, for 반복문의 조건이 거짓으로 연산되는 시점을 정할 수 있습니다. for반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않으면, 브라우저가 중단될 수 있습니다.MDN Entry 에서 발췌: for 반복문은 조건이 거짓(false)으로 연산될 때까지 지정된 명령문을 실행합니다. 명령문을 실행한 후에는 조건 충족 여부를 다시 평가하여, 명령문이 최소 1번 실행되도록 합니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
+ "push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의하세요. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제를 참고하세요.) push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader()",
+ "",
+ ""
+ ]
},
- "while": {
+ "pop": {
"description": [
- "while문을 사용하여 특정 섹션의 코드에 대한 반복문(loop)을 만듭니다. 'while 반복문(while loop)'을 사용하면, 소괄호 속 조건이 거짓(false)이 될 때까지 중괄호 속 본문의 코드가 반복적으로 실행됩니다. for 반복문과 달리, while 반복문은 그 본문 속 코드를 실행하기 앞서 조건 충족 여부를 먼저 확인합니다. 따라서, 최초 실행시 조건이 거짓일 경우, while문 속 본문과 명령문은 절대 실행되지 않습니다. 여타 반복문과 마찬가지로, while 반복문 역시 반복이 '종료'되는 시점이나, 조건을 더이상 충족하지 않아 거짓(false)으로 연산되는 시점을 명시해야 합니다. while 반복문의 조건이 언젠가 거짓으로 처리되는 시점을 지정함으로써, 해당 반복문이 무한으로 실행되지 않도록 처리하기 위함입니다. 그렇지 않을 경우, 브라우저가 중단될 수 있습니다.MDN Entry 에서 발췌: while 반복문은 조건이 참(true)인 경우에 한해 지정된 명령문을 실행합니다. 명령문 실행에 앞서 조건 충족 여부가 평가됩니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "",
- "UNKNOWN-PARAM-2": ""
- },
- "returns": ""
+ "push() 함수는 현재의 드로잉 스타일 설정과 변형을 저장하고, pop() 함수는 이 설정들을 복구합니다. 이 함수들은 항상 함께 쓰이는 점에 유의하세요. 이 함수들을 통해 스타일과 변형 설정을 변경한 뒤에도 이전 설정 상태로 돌아갈 수 있습니다. push()와 pop() 함수들은 설정 사항에 대해 좀 더 많은 권한을 제공합니다. (두 번째 예제를 참고하세요.) push()는 다음의 함수들을 통해 지정된 현재 변형 상태 및 스타일 설정 사항을 저장합니다: fill(), noFill(), noStroke(), stroke(), tint(), noTint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textSize(), textLeading(), applyMatrix(), resetMatrix(), rotate(), scale(), shearX(), shearY(), translate(), noiseSeed(). WebGL 모드에서는 다음의 함수들을 통해 지정된, 더욱 다양한 스타일 설정 사항이 저장될 수 있습니다: setCamera(), ambientLight(), directionalLight(), pointLight(), texture(), specularMaterial(), shininess(), normalMaterial(), 그리고 shader()",
+ "",
+ ""
+ ]
},
- "JSON": {
+ "redraw": {
"description": [
+ "draw() 함수 안에 포함된 코드를 한 번 재실행합니다. 이 함수를 통해 필요시에만 화면을 업데이트할 수 있습니다. mousePressed()나 keyPressed()가 지정한 이벤트를 발생시킬 때가 그 예입니다. 프로그램의 구조를 고려하면, mousePressed()와 같은 이벤트 함수에 redraw()를 호출하는 것이 좋습니다. 이는 redraw()가 draw()함수를 즉각적으로 실행시키지 않기 때문입니다. redraw()는 화면 업데이트가 필요함을 알리는 표식 설정만합니다.",
+ "",
+ "",
""
],
- "methods": [
- "MDN Entry 에서 발췌: JSON.stringify() 메소드는 자바스크립트 객체나 값을 JSON 문자열로 변환합니다.",
- ""
- ],
- "returns": ""
+ "params": {
+ "n": "정수: n번 간 redraw() 함수 실행. 기본값은 1 (선택 사항)"
+ }
},
- "console": {
+ "p5": {
"description": [
+ "p5() 생성자로 전역 모드 대신 인스턴스 모드를 활성화할 수 있습니다. 이는 고급 활용 사례에 해당합니다. 간단한 설명과 예제가 아래에 있습니다. 자세한 내용은 다니엘 쉬프만(Dan Shiffman)의 코딩 트레인(Coding Train) 비디오 튜토리얼 또는 이 페이지 를 참조하세요. 기본값으로, 모든 p5.js 함수들은 전역 네임스페이스에 속합니다. (즉, 화면창 객체에 구속됩니다.) 이는, p5.js 함수들을 ellipse(), fill()과 같은 이름으로 불러올 수 있음을 뜻합니다. 하지만, 이러한 방식은 자바스크립트의 여타 (동기식 또는 비동기식) 라이브러리를 사용하거나 긴 코딩을 작성할 때 다소 불편할 수 있습니다. 따라서, p5.js는 인스턴스 모드를 통해 이 문제를 해결할 수 있는 방법을 지원합니다. 인스턴스 모드에서는 모든 p5 함수의 전역 네임 스페이스를 오염시키는 대신, 이를 단일 변수에 구속되게 만듭니다. 선택적으로, 캔버스나 다른 요소에 추가할 두 번째 인수로서 기본 컨테이너를 지정할 수 있습니다. HTML상 요소의 id나 노드 자체를 추가(append)할 수 있습니다. 이처럼 인스턴스를 만들면, 단일 웹페이지에 두 개 이상의 p5 스케치를 사용할 수 있게 됩니다. 각각의 고유한 설정 변수에 의거하기 때문입니다. 물론, 전역 모드에서도 iframe 기능을 이용하면 복수의 스케치를 웹페이지에 사용할 수 있습니다.",
+ "",
+ "",
""
],
- "methods": [
- "브라우저의 웹 콘솔창에 메시지를 인쇄합니다. p5의 경우, print()와 console.log()를 모두 사용할 수 있습니다. 콘솔은 사용자의 브라우저에 따라 달라집니다. Firefox , Chrome , Edge , Safari 에서 콘솔을 여는 방법에 대한 링크는 다음과 같습니다. 온라인 p5 에디터 의 경우, 콘솔창이 코드 에디터 하단에 임베드 되어있습니다. MDN Entry 에서 발췌: 콘솔 메소드 log()는 웹 콘솔에 메시지를 출력합니다. 메시지는 단일 문열(선택적으로, 대체값과 함께)이거나 한 개 이상의 자바스크립트 객체일 수 있습니다.",
- ""
- ],
- "returns": ""
+ "params": {
+ "sketch": "객체: p5.js 스케치를 포함하는 함수",
+ "node": "문자열|객체: 스케치를 포함할 HTML DOM 노드 ID 또는 포인터"
+ }
},
"applyMatrix": {
"description": [
- "현재 행렬(matrix)에 매개변수로 지정된 행렬을 곱합니다. 평행 이동과 같은 연속 이동(translate), 크기 조정(scale), 전단(shear), 회전(rotate)을 한 번에 수행할 수 있습니다. 변환행렬 위키피디아 에서 더 많은 정보를 확인할 수 있습니다. 이 때, 인수들은 WHATWG 사양 에 따라 그 이름이 지정되며, 다음과 같은 형식의 변환 행렬에 상응합니다:
"
+ "현재 행렬(matrix)에 매개변수로 지정된 행렬을 곱합니다. 평행 이동과 같은 연속 이동(translate), 크기 조정(scale), 전단(shear), 회전(rotate)을 한 번에 수행할 수 있습니다. 변환행렬 위키피디아 에서 더 많은 정보를 확인할 수 있습니다. 이 때, 인수들은 WHATWG 사양 에 따라 그 이름이 지정되며, 다음과 같은 형식의 변환 행렬에 상응합니다:
",
+ "",
+ ""
],
"params": {
"a": "숫자: 곱할 2x3 행렬 정의",
@@ -1469,93 +1209,96 @@
"d": "숫자: 곱할 2x3 행렬 정의",
"e": "숫자: 곱할 2x3 행렬 정의",
"f": "숫자: 곱할 2x3 행렬 정의"
- },
- "returns": ""
+ }
},
"resetMatrix": {
"description": [
"현재 행렬을 항등 행렬로 바꿉니다."
- ],
- "returns": ""
+ ]
},
"rotate": {
"description": [
- "사용자가 지정한 각도 매개변수에 따라 도형을 회전합니다. 이 함수는 angleMode() 함수의 영향을 받으며, 괄호 안에 RADIANS 또는 DEGREES를 입력하여 각도가 해석되는 방식을 지정할 수 있습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 회전하며, 양수를 입력할 경우 시계 방향으로 객체를 회전합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, rotate(HALF_PI)를 호출한 뒤 rotate(HALF_PI)를 호출하면, 결과적으로 rotate(PI)와 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. 좀 더 기술적으로 설명하자면, rotate() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다."
+ "사용자가 지정한 각도 매개변수에 따라 도형을 회전합니다. 이 함수는 angleMode() 함수의 영향을 받으며, 괄호 안에 RADIANS 또는 DEGREES를 입력하여 각도가 해석되는 방식을 지정할 수 있습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 회전하며, 양수를 입력할 경우 시계 방향으로 객체를 회전합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, rotate(HALF_PI)를 호출한 뒤 rotate(HALF_PI)를 호출하면, 결과적으로 rotate(PI)와 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. 좀 더 기술적으로 설명하자면, rotate() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다.",
+ "",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 회전각",
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각",
"axis": "p5.Vector|숫자 배열[]: (3D의 경우,) 회전축 (선택 사항)"
- },
- "returns": ""
+ }
},
"rotateX": {
"description": [
- "x축을 따라 회전합니다."
+ "x축을 따라 회전합니다.",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
- },
- "returns": ""
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
+ }
},
"rotateY": {
"description": [
- "y축을 따라 회전합니다."
+ "y축을 따라 회전합니다.",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
- },
- "returns": ""
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
+ }
},
"rotateZ": {
"description": [
- "z축을 따라 회전합니다. (WebGL 모드 전용)"
+ "z축을 따라 회전합니다. (WebGL 모드 전용)",
+ "",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
- },
- "returns": ""
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 회전각"
+ }
},
"scale": {
"description": [
- "꼭지점을 확장하거나 축소하여 도형의 크기를 키우거나 줄입니다. 객체의 크기는 언제나 좌표계에 대한 상대적 원점을 기준으로 조정됩니다. 크기값들은 10진수 백분율로 지정됩니다. 예를 들어, scale(2.0) 함수를 호출하면 도형의 크기를 200% 증가시킵니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, scale(2.0)을 호출한 뒤 scale(1.5)를 호출하면, 결과적으로 scale(3.0)과 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. 매개변수 z는 오직 WebGL 모드에서만 사용 가능합니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다."
+ "꼭지점을 확장하거나 축소하여 도형의 크기를 키우거나 줄입니다. 객체의 크기는 언제나 좌표계에 대한 상대적 원점을 기준으로 조정됩니다. 크기값들은 10진수 백분율로 지정됩니다. 예를 들어, scale(2.0) 함수를 호출하면 도형의 크기를 200% 증가시킵니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용됩니다. 예를 들어, scale(2.0)을 호출한 뒤 scale(1.5)를 호출하면, 결과적으로 scale(3.0)과 동일한 효과를 갖습니다. 모든 변형은 draw() 함수가 다시 시작하는 시점에 리셋됩니다. 매개변수 z는 오직 WebGL 모드에서만 사용 가능합니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다.",
+ "",
+ ""
],
"params": {
"s": "숫자|p5.Vector|숫자 배열[]:객체 크기를 조정하는 백분율, 또는 여러 인수를 지정할 경우 x축에서의 객체 크기 배율을 조정하는 백분율",
"y": "숫자: y축에서의 객체 크기를 조정하는 백분율 (선택 사항)",
"z": "숫자: z축에서의 객체 크기를 조정하는 백분율(WebGL 모드용)(선택 사항)",
- "UNKNOWN-PARAM-4": "p5.Vector|숫자 배열[]: 축을 기준으로 객체의 크기 조정"
- },
- "returns": ""
+ "scales": "p5.Vector|숫자 배열[]: 축을 기준으로 객체의 크기 조정"
+ }
},
"shearX": {
"description": [
- "사용자가 지정한 각도 매개변수에 따라 도형을 x축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, shearX(PI/2)를 호출한 뒤 shearX(PI/2)를 또 호출하면, 결과적으로 shearX(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearX()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 보다 기술적으로 설명하자면, shearX() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다."
+ "사용자가 지정한 각도 매개변수에 따라 도형을 x축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, shearX(PI/2)를 호출한 뒤 shearX(PI/2)를 또 호출하면, 결과적으로 shearX(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearX()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 보다 기술적으로 설명하자면, shearX() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다.",
+ "",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 전단각"
- },
- "returns": ""
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 전단각"
+ }
},
"shearY": {
"description": [
- "사용자가 지정한 각도 매개변수에 따라 도형을 y축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, shearY(PI/2)를 호출한 뒤 shearY(PI/2)를 또 호출하면, 결과적으로 shearY(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearY()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 보다 기술적으로 설명하자면, shearY() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다."
+ "사용자가 지정한 각도 매개변수에 따라 도형을 y축에서 전단(shear)합니다. 이 함수는 angleMode() 함수의 영향을 받습니다. 객체는 항상 원점에 대한 상대적 위치를 중심으로 전단되며, 양수를 입력할 경우 시계 방향으로 객체를 전단합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, shearY(PI/2)를 호출한 뒤 shearY(PI/2)를 또 호출하면, 결과적으로 shearY(PI)와 동일한 효과를 갖습니다. draw() 함수 내에서 shearY()를 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 보다 기술적으로 설명하자면, shearY() 함수는 현재 변환 행렬에 회전 행렬을 곱하는 셈입니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다.",
+ "",
+ ""
],
"params": {
- "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(부채각) 또는 DEGREES(도)의 설정 사항에 따른 전단각"
- },
- "returns": ""
+ "angle": "숫자: 현재 angleMode의 매개변수인 RADIANS(원주호) 또는 DEGREES(도)의 설정 사항에 따른 전단각"
+ }
},
"translate": {
"description": [
- "디스플레이 화면 내에서 객체를 이동시킬 양을 지정합니다. 매개변수 x는 좌/우 이동을, 매개변수 y는 상/하 이동을 지정합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, translate(50, 0)를 호출한 뒤 translate(20, 0)를 또 호출하면, 결과적으로 translate(70, 0)와 동일한 효과를 갖습니다. draw() 함수 내에서 translate()을 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다."
+ "디스플레이 화면 내에서 객체를 이동시킬 양을 지정합니다. 매개변수 x는 좌/우 이동을, 매개변수 y는 상/하 이동을 지정합니다. 이러한 변형(transformation) 함수는 그것이 호출된 뒤 후속적으로 호출된 모든 변형 함수들에 적용되어, 그 효과들이 축적됩니다. 예를 들어, translate(50, 0)를 호출한 뒤 translate(20, 0)를 또 호출하면, 결과적으로 translate(70, 0)와 동일한 효과를 갖습니다. draw() 함수 내에서 translate()을 호출하면, 반복 실행이 다시 시작되는 시점에 모든 변형 내용이 리셋됩니다. 이 함수는 push()와 pop() 함수를 통해 추가적으로 제어 가능합니다.",
+ ""
],
"params": {
"x": "숫자: 좌/우 이동",
"y": "숫자: 상/하 이동",
"z": "숫자: 앞/뒤 이동(WebGL 모드용)",
- "UNKNOWN-PARAM-4": "p5.Vector: 이동시킬 벡터"
- },
- "returns": ""
+ "vector": "p5.Vector: 이동시킬 벡터"
+ }
},
"storeItem": {
"description": [
@@ -1564,24 +1307,21 @@
"params": {
"key": "문자열:",
"value": "문자열|숫자|객체|불리언|p5.Color|p5.Vector:"
- },
- "returns": ""
+ }
},
"getItem": {
"description": [
"storeItem()로 저장한 항목(item)의 값을 로컬 저장소로부터 반환합니다."
],
+ "returns": "숫자|객체|문자열|불리언|p5.Color|p5.Vector: 저장된 항목의 값",
"params": {
"key": "문자열: 로컬 저장소에 저장시 사용할 이름"
- },
- "returns": "숫자|객체|문자열|불리언|p5.Color|p5.Vector: 저장된 항목의 값"
+ }
},
"clearStorage": {
"description": [
"현재 영역에서 storeItem()으로 설정된 모든 로컬 저장소 항목(item)을 제거합니다."
- ],
- "params": {},
- "returns": ""
+ ]
},
"removeItem": {
"description": [
@@ -1589,403 +1329,323 @@
],
"params": {
"key": "문자열"
- },
- "returns": ""
+ }
},
"createStringDict": {
"description": [
"키-값(key-value) 쌍 또는 사용자가 지정한 객체를 사용하여 p5.StringDict의 새로운 인스턴스를 생성합니다."
],
+ "returns": "p5.StringDict:",
"params": {
"key": "문자열:",
"value": "문자열:",
- "UNKNOWN-PARAM-3": "객체: 객체"
- },
- "returns": "p5.StringDict:"
+ "object": "객체: 객체"
+ }
},
"createNumberDict": {
"description": [
"키-값(key-value) 쌍 또는 사용자가 지정한 객체를 사용하여 p5.NumberDict의 새로운 인스턴스를 생성합니다."
],
+ "returns": "p5.NumberDict:",
"params": {
"key": "숫자:",
"value": "숫자",
- "UNKNOWN-PARAM-3": "객체: 객체"
- },
- "returns": "p5.NumberDict:"
+ "object": "객체: 객체"
+ }
},
- "append": {
+ "select": {
"description": [
- "사용 불가: append()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.push(value) 를 대신 사용하세요. 배열의 끝에 값을 추가하여, 그 길이를 1씩 확장합니다. Array.push()에 매핑합니다."
+ "지정한 ID, 클래스, 또는 태그 이름(접두어 '#'로 ID를, '.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element를 반환합니다. 클래스나 태그의 이름이 2개 이상의 요소로 지정된 경우, 1번째 요소만 반환됩니다. DOM 노드는 .elt로 검섹할 수 있습니다. 아무 것도 검색되지 않을 경우 null을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다."
],
+ "returns": "검색된 노드를 포함한 p5.Element",
"params": {
- "array": "배열: 추가할 배열",
- "value": "전부: 배열에 추가될 모든 것"
- },
- "returns": "추가된 배열"
+ "selectors": "String: CSS selector string of element to search for",
+ "container": "문자열|p5.Element|HTML 요소: id, p5.Element, 또는 HTML 요소 내에서 검색(선택 사항)"
+ }
},
- "arrayCopy": {
+ "selectAll": {
"description": [
- "사용 불가: copyArray()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. 배열(또는 그 일부)을 다른 배열에 복사합니다. src 배열이 dst 배열에 복사되며, srcPosition으로 지정된 위치에서 시작하여 dstPosition으로 지정된 위치를 향합니다. 복사할 요소의 개수는 배열의 길이로 결정됩니다. 값을 복사하면 대상 배열의 기존값을 덮어씁니다. 덮어쓰기없이 값을 추가하려면 concat()을 사용하세요. "
+ "지정한 클래스 또는 태그 이름('.'로 클래스 지정 가능, 태그는 별도의 접두어 없음)에 해당하는 요소를 페이지 내에서 검색하고, p5.Element 배열로 반환합니다. DOM 노드는 .elt로 검색할 수 있습니다. 아무 것도 검색되지 않을 경우 빈 배열을 반환합니다. 검색할 컨테이너를 별도로 지정할 수 있습니다."
],
+ "returns": "검색된 노드를 포함한 p5.Element 배열",
"params": {
- "src": "",
- "srcPosition": "",
- "dst": "",
- "dstPosition": "",
- "length": ""
- },
- "returns": ""
+ "selectors": "String: CSS selector string of elements to search for",
+ "container": "문자열: id, p5.Element, 또는 HTML 요소 내에서 검색(선택 사항)"
+ }
},
- "concat": {
+ "removeElements": {
"description": [
- "사용 불가: concat()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. arr1.concat(arr2) 를 대신 사용하세요. "
- ],
- "params": {
- "a": "",
- "b": ""
- },
- "returns": ""
+ "createCanvase() 또는 createGraphics()로 생성된 캔버스와 그래픽을 제외하고, p5로 생성된 모든 요소를 제거합니다. 이벤트 핸들러 역시 제거되며, 요소가 DOM에서 제거됩니다."
+ ]
},
- "reverse": {
+ "changed": {
"description": [
- "사용 불가: reverse()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다.array.reverse() 를 대신 사용하세요."
+ ".changed() 함수는 요소값이 변경될 때 호출됩니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다."
],
"params": {
- "list": ""
- },
- "returns": ""
+ "fxn": "함수|불리언: 요소값이 변경될 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가"
+ }
},
- "shorten": {
+ "input": {
"description": [
- "사용 불가: shorten()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.pop() 를 대신 사용하세요. "
+ ".input() 함수는 요소가 사용자 입력을 감지할 때 호출됩니다. 입력 이벤트는 키 또는 슬라이더 요소의 변경을 감지합니다. 특정 요소의 이벤트 리스너와 연결하는 데에 사용됩니다."
],
"params": {
- "list": ""
- },
- "returns": ""
+ "fxn": "함수|불리언: 요소가 사용자 입력을 감지할 때 발생하는 함수. 거짓(false)이 전달되면 이전 실행 함수는 더이상 실행 불가"
+ }
},
- "shuffle": {
+ "createDiv": {
"description": [
- "사용 불가: shuffle()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. 자바스크립트의 배열 섞기 를 대신 사용하세요.피셔-예이츠(Fisher-Yates) 셔플 알고리즘 을 구현합니다."
+ "주어진 내부 HTML을 사용하여 DOM에
요소를 생성합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "array": "",
- "bool": ""
- },
- "returns": ""
+ "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
+ }
},
- "sort": {
+ "createP": {
"description": [
- "사용 불가: sort()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.sort() 를 대신 사용하세요. "
+ "주어진 내부 HTML을 사용하여 DOM에
요소를 생성합니다. 문단형 텍스트 작성시 사용됩니다.",
+ ""
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "list": "",
- "count": ""
- },
- "returns": ""
+ "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
+ }
},
- "splice": {
+ "createSpan": {
"description": [
- "사용 불가: splice()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.splice() 를 대신 사용하세요. "
+ "주어진 내부 HTML을 사용하여 DOM에 요소를 생성합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "list": "",
- "value": "",
- "position": ""
- },
- "returns": ""
+ "html": "문자열: 요소를 생성한 내부 HTML (선택 사항)"
+ }
},
- "subset": {
+ "createImg": {
"description": [
- "사용 불가:subset()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.slice() 를 대신 사용하세요. "
+ "주어진 src와 대체 텍스트(alt text)를 사용하여 DOM에 요소를 생성합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "list": "",
- "start": "",
- "count": ""
- },
- "returns": ""
+ "src": "문자열: 이미지의 src 또는 url 경로",
+ "alt": "문자열: 이미지가 로드되지 않을 경우 사용할 대체 텍스트 . 빈 문자열(\" \")로 이미지 숨기기 가능",
+ "crossOrigin": "문자열: img 요소의 교차 출처 속성(crossOrigin property) . '익명(anonymous)' 또는 '사용 자격 증명(use-credentials)'을 통해 교차 출처 권한이 있는 이미지를 검색하세요. 이는 캔버스에 이미지를 사용하기 위함이며, 빈 문자열(\" \")이 전달된 경우 교차 출처 리소스 공유(CORS)는 사용되지 않습니다.",
+ "successCallback": "gkatn: 인수로 지정된 p5.Element가 이미지 데이터를 불러왔을 때 호출되는 콜백 함수 (선택 사항)"
+ }
},
- "float": {
+ "createA": {
"description": [
- "문자열을 실수(float), 즉 부동 소수점 숫자형 표현으로 변환합니다. 이 때, 문자열의 구문은 숫자 형식과 유사해야 합니다. 그렇지 않으면 NaN(숫자 아님)이 반환됩니다. 예컨대, float (\"1234.56\")은 1234.56으로 연산되지만, float (\"giraffe\")는 NaN을 반환합니다. 전달된 배열과 길이가 동일한 실수 배열이 반환됩니다."
+ "DOM에 하이퍼링크를 포함한 요소를 생성합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "str": "문자열: 구문 분석할 실수 문자열"
- },
- "returns": "숫자: 문자열의 부동 소수점 숫자형 표현"
+ "href": "문자열: 링크될 페이지 url",
+ "html": "문자열: 화면에 보여질 링크 요소의 내부 HTML",
+ "target": "문자열: 새로운 링크가 보여질 대상, _blank, _self, _parent, _top 중 지정 가능 (선택 사항)"
+ }
},
- "int": {
+ "createSlider": {
"description": [
- "불리언(boolean), 문자열(string), 부동소수점 숫자(float)를 정수(int)형 표현으로 변환합니다. 전달된 배열과 길이가 동일한 정수 배열이 반환됩니다."
+ "DOM에 슬라이더 요소를 생성합니다. .size() 함수로 슬라이더의 길이를 설정합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "n": "문자열|불리언|숫자: 구문 분석할 값",
- "radix": "정수: 기수로 변환 (기본값: 10) (선택 사항)",
- "UNKNOWN-PARAM-3": "배열: 구문 분석할 값"
- },
- "returns": "숫자: 값의 정수형 표현"
+ "min": "숫자: 슬라이더의 최소값",
+ "max": "숫자: 슬라이더의 최대값",
+ "value": "숫자: 슬라이더의 기본값(선택 사항)",
+ "step": "숫자: 슬라이더의 단위당 이동 크기(이동 크기가 0으로 지정된 경우, 슬라이더는 최소값과 최대값 사이를 부드럽게 이동합니다.)(선택 사항)"
+ }
},
- "str": {
+ "createButton": {
"description": [
- "불리언(boolean), 문자열(string), 또는 숫자를 문자열 표현으로 변환합니다. 전달된 배열과 길이가 동일한 문자열 배열이 반환됩니다."
+ "DOM에 요소를 생성합니다. .size() 함수로 버튼의 크기를 설정합니다. .mousePressed() 함수로 버튼이 클릭됐을 때의 행동을 지정합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "n": "문자열|불리언|숫자: 구문 분석할 값"
- },
- "returns": "숫자: 값의 문자열 표현"
+ "label": "문자열: 버튼 위에 나타나는 레이블",
+ "value": "문자열: 버튼값 (선택 사항)"
+ }
},
- "boolean": {
+ "createCheckbox": {
"description": [
- "불리언(boolean)은 자바스크립트에서 지정한 7개의 기본 데이터 유형 중 하나입니다. 불리언은 참(true) 또는 거짓(false)으로 값을 나타냅니다.MDN Entry 에서 발췌: 불리언은 논리적 개체를 나타내며 참(true) 또는 거짓(false)이라는 두 개의 값만 갖습니다."
+ "DOM에 체크박스 요소를 생성합니다. .checked() 함수를 통해 체크되었는지의 여부를 반환합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "UNKNOWN-PARAM-1": ""
- },
- "returns": ""
+ "label": "문자열: 체크박스 위에 나타나는 레이블 (선택 사항)",
+ "value": "불리언: 체크박스의 값: 체크는 참(true), 체크 해제는 거짓(false) (선택 사항)"
+ }
},
- "byte": {
+ "createSelect": {
"description": [
- "숫자, 숫자의 문자열 표현, 또는 불리언을 바이트 표현으로 변환합니다. 바이트는 -128과 127 사이의 정수이므로, 이 범위를 벗어난 값은 상응하는 바이트 표현에 래핑됩니다. 숫자, 문자열, 또는 불리언 값의 배열을 전달하면, 동일한 길이의 바이트 배열이 반환됩니다."
+ "DOM에 드롭다운 메뉴 요소를 생성합니다. 이미 생성된 셀렉트 박스(select box)를 선택할 경우, p5.Element에 select-box 메소드를 지정하는 데에도 쓰입니다. 셀렉트 박스 생성 후, .option() 메소드로 선택지(option)를 설정할 수 있습니다. .selected() 메소드는 p5.Element 인스턴스인 현재 드롭다운 요소를 반환합니다. .selected() 메소드는 특정 선택지를 최초 페이지 로드시의 기본값으로서 설정할 수 있습니다. .disable() 메소드는 특정 선택지를 비활성화하고, 별도로 지정된 인수가 없는 경우엔 전체 드롭다운 요소를 비활성화 상태로 표시합니다."
],
+ "returns": "p5.Element",
"params": {
- "n": "문자열|불리언|숫자: 구문 분석할 값",
- "UNKNOWN-PARAM-2": "배열: 구문 분석할 값"
- },
- "returns": "값의 바이트형 표현"
+ "multiple": "불리언: 드롭다운이 여러 개의 선택지를 제공할 경우 참(true) (선택 사항)",
+ "existing": "객체: DOM 셀렉트 요소"
+ }
},
- "char": {
+ "createRadio": {
"description": [
- "숫자나 문자열을 단일 문자형(character) 문자열 표현으로 변환합니다. 사용자가 별도 지정한 문자열 매개변수의 경우, 먼저 정수로서 구문 분석된 후 단일 문자형 문자열로 변환됩니다. 숫자 또는 문자열 값의 배열을 전달하면, 동일한 길이의 단일 문자형 문자열이 반환됩니다."
+ "DOM에 라디오 버튼 요소를 생성합니다. 라디오 버튼 생성 후, .option() 메소드로 옵션을 설정할 수 있습니다. .value() 메소드는 현재 선택된 옵션을 반환합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "n": "문자열|숫자: 구문 분석할 값",
- "UNKNOWN-PARAM-2": "배열: 구문 분석할 값"
- },
- "returns": "값의 문자열 표현"
+ "containerElement": "Object: An container HTML Element either a div or span inside which all existing radio inputs will be considered as options.",
+ "name": "String: (Optional) A name parameter for each Input Element."
+ }
},
- "unchar": {
+ "createColorPicker": {
"description": [
- "단일 문자형 문자열 표현을 정수로 변환합니다. 단일 문자열 문자열 값의 배열을 전달하면, 동일한 길이의 정수 배열이 반환됩니다."
- ],
- "params": {
- "n": "문자열: 구문 분석할 값",
- "UNKNOWN-PARAM-2": "배열: 구문 분석할 값"
- },
- "returns": "값의 정수형 표현"
- },
- "hex": {
- "description": [
- "숫자를 16진수 문자열로 변환합니다. 전달된 2번째 매개변수는 16진수 표기법으로 생성할 문자 개수를 설정합니다. 배열이 전달되면, 동일한 길이를 갖는 16진수 문자열을 반환합니다."
- ],
- "params": {
- "n": "숫자: 구문 분석할 값",
- "digits": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-3": "숫자 배열[]: 구문 분석할 숫자 값들 배열"
- },
- "returns": "값의 16진수 문자열 표현"
- },
- "unhex": {
- "description": [
- "16진수 문자열 표현을 정수로 변환합니다. 16진수 문자열 값의 배열을 전달하면, 동일한 길이의 정수 배열이 반환됩니다."
- ],
- "params": {
- "n": "문자열: 구문 분석할 값",
- "UNKNOWN-PARAM-2": "배열: 구문 분석할 값"
- },
- "returns": "16진수 값의 정수형 표현"
- },
- "join": {
- "description": [
- "문자열 배열을 결합하여 하나의 문자열을 만듭니다. 각 문자열은 사용자가 구분자 매개변수로 지정한 문자를 통해 구분됩니다. 정수(int) 또는 실수(float) 배열을 결합하려면, 먼저 nf() 또는 nfs()를 통해 문자열로 변환되어야 합니다."
- ],
- "params": {
- "list": "배열: 결합할 문자열 배열",
- "separator": "문자열: 각 항목 사이에 놓일 문자열"
- },
- "returns": "문자열: 결합된 문자열"
- },
- "match": {
- "description": [
- "이 함수는 정규 표현식을 텍스트로 적용하고, 매치하는 그룹(괄호 안 요소들) 리스트를 문자열 배열로 반환합니다. 매치하는 내용이 없는 경우, null을 반환합니다. 정규 표현식에 그룹이 지정되지 않지만 시퀀스가 일치하는 경우, 길이가 1인 배열(일치하는 텍스트가 배열의 첫번째 요소인 배열)을 반환합니다. match() 함수 사용시, 결과값이 null인지를 잘 확인하세요. 결과가 null이면 시퀀스도 일치하지 않는다는 뜻입니다. 시퀀스가 일치하는 경우, 배열이 반환됩니다. 그룹(괄호들로 지정)이 정규식 표현인 경우, 각각의 내용들이 배열로 반환됩니다. 매치하는 정규식 표현의 요소[0]는 모든 매칭 문자열을 반환하는데, 이 경우 매칭 그룹은 요소[1](첫 번째 그룹은 [1], 두번째 그룹은 [2])에서 시작합니다."
- ],
- "params": {
- "str": "문자열: 검색할 문자열",
- "regexp": "문자열: 매칭에 사용될 정규식 표현"
- },
- "returns": "검색된 문자열들의 배열"
- },
- "matchAll": {
- "description": [
- "이 함수는 정규 표현식을 텍스트로 적용하고, 매치하는 그룹(괄호 안 요소들)의 리스트를 2차원 문자열 배열로 반환합니다. 매치하는 내용이 없는 경우, null을 반환합니다. 정규 표현식에 그룹이 지정되지 않지만 시퀀스가 일치하는 경우, 2차원 배열이 반환되지만 2번째 차원의 길이는 1이 됩니다. matchAll() 함수 사용시, 결과값이 null인지를 잘 확인하세요. 결과가 null이면 시퀀스도 일치하지 않는다는 뜻입니다. 시퀀스가 일치하는 경우, 2D 배열이 반환됩니다. 그룹(괄호들로 지정)이 정규식 표현인 경우, 각각의 내용들이 배열로 반환됩니다. 카운터 변수 i가 있는 반복문을 가정할 때, 매칭되는 정규식의 [i][0] 요소는 모든 매칭 문자열을 반환하고, 매칭 그룹은 [i][1](첫 번째 그룹은 [i][1], 두번째 그룹은 [i][2], ...)에서 시작합니다."
- ],
- "params": {
- "str": "문자열: 검색할 문자열",
- "regexp": "문자열: 매칭에 사용될 정규식 표현"
- },
- "returns": "검색된 문자열들의 2D 배열"
- },
- "nf": {
- "description": [
- "숫자를 문자열로 형식화하는 기능으로, 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수로는 각각 자릿수(digit), 소수점 기준 왼쪽 자릿수(left), 소수점 기준 오른쪽 자릿수(right)를 지정할 수 있으며, 이 매개변수 값들은 항상 양의 정수여야 합니다. 참고: left와 right 매개변수 사용시, 그 값이 현재 숫자의 자릿수 길이보다 클 경우 자릿수를 맞추기 위해 매개변수에 0이 붙는 점에 유의하세요. 예를 들어, 현재 숫자가 123.2이고 전달된 left 매개변수가 4인 경우, 그 길이가 num의 정수 부분인 123의 길이(즉, 3)보다 큽니다. 이 경우, 0123.2가 반환됩니다. right 매개변수의 경우에도 마찬가지로 값이 3인 정수 123.200이 반환됩니다."
+ "DOM에 색상 입력을 위한 색상 추출(colorPicker) 요소를 생성합니다. .value() 메소드는 색상의 헥사(Hex) 문자열(#rrggbb)을 반환합니다. .color() 메소드는 현재 선택된 색상의 p5.Color 객체를 반환합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "num": "숫자|문자열: 형식화할 숫자",
- "left": "정수|문자열: 소수점 기준 왼쪽의 자릿수(선택 사항)",
- "right": "정수|문자열: 소수점 기준 오른쪽의 자릿수(선택 사항)",
- "UNKNOWN-PARAM-4": "배열: 형식화할 숫자들"
- },
- "returns": "문자열: 형식화된 문자열"
+ "value": "문자열|p5.Color: 요소의 색상 기본값 (선택 사항)"
+ }
},
- "nfc": {
+ "createInput": {
"description": [
- "숫자를 문자열로 형식화하고 1000을 단위로 표시하기 위해 쉼표를 배치하는 기능입니다. 크게 두 가지 버전이 제공되는데, 하나는 정수(int)를 형식화하는 것이고, 다른 하나는 정수 배열을 형식화합니다. 매개변수의 값들은 항상 양의 정수여야 합니다."
+ "DOM에 텍스트 입력을 위한 요소를 생성합니다. .size() 함수로 상자의 크기를 설정합니다."
],
+ "returns": "p5.Element: 생성된 노드를 담고있는 p5.Element에 대한 포인터",
"params": {
- "num": "숫자|문자열: 형식화할 숫자",
- "right": "정수|문자열: 소수점 기준 오른쪽의 자릿수(선택 사항)",
- "UNKNOWN-PARAM-3": "배열: 형식화할 숫자들"
- },
- "returns": "문자열: 형식화된 문자열"
+ "value": "문자열: 입력 상자의 기본값 (선택 사항)",
+ "type": "문자열: 텍스트 유형 (예: text, password 등) 기본값은 text (선택 사항)"
+ }
},
- "nfp": {
+ "createFileInput": {
"description": [
- "숫자를 문자열로 형식화하는 기능입니다. nf()와 유사하나, 양수 앞에 '+'를, 음수 앞에 '-' 기호를 추가합니다. 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수 중, 소수점 기준 왼쪽 자릿수(left)와 소수점 기준 오른쪽 자릿수(right)의 값은 항상 양의 정수여야 합니다."
+ "'파일(file)' 유형의 DOM에 요소를 생성합니다. 스케치에 사용할 로컬 파일을 선택할 수 있게 됩니다."
],
+ "returns": "p5.Element: 생성된 DOM 요소를 담고있는 p5.Element에 대한 포인터",
"params": {
- "num": "숫자: 형식화할 숫자",
- "left": "정수: 소수점 기준 왼쪽의 자릿수(선택 사항)",
- "right": "정수: 소수점 기준 오른쪽의 자릿수(선택 사항)",
- "UNKNOWN-PARAM-4": "숫자 배열[]: 형식화할 숫자들"
- },
- "returns": "문자열: 형식화된 문자열"
+ "callback": "함수: 파일이 로드될 때의 콜백 함수 (선택 사항)",
+ "multiple": "문자열: 여러 파일 선택 허용 (선택 사항)"
+ }
},
- "nfs": {
+ "createVideo": {
"description": [
- "숫자를 문자열로 형식화하는 기능입니다. nf()와 유사하나, '-' 기호가 붙은 음수와 정렬할 경우를 위해 '_(공백)' 기호를 양수 앞에 추가합니다. nfs()는 주로 음수가 아닌 숫자의 자릿수에 음수를 맞출 때 사용됩니다. (명확한 이해를 위해 예제를 참고하세요.) 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수 중, 자릿수(digit), 소수점 기준 왼쪽 자릿수(left)와 소수점 기준 오른쪽 자릿수(right)의 값은 항상 양의 정수여야 합니다. (IMP): 정렬 결과는 사용자의 타입페이스에 따라 달라집니다. 참고: left와 right 매개변수 사용시, 그 값이 현재 숫자의 자릿수 길이보다 클 경우 자릿수를 맞추기 위해 매개변수에 0이 붙는 점에 유의하세요. 예를 들어, 현재 숫자가 123.2이고 전달된 left 매개변수가 4인 경우, 그 길이가 num의 정수 부분인 123의 길이(즉, 3)보다 큽니다. 이 경우, 0123.2가 반환됩니다. right 매개변수의 경우에도 마찬가지로 값이 3인 정수 123.200이 반환됩니다."
+ "DOM에 간단한 오디오/비디오 재생을 위한 HTML5 요소를 생성합니다. 화면에 나타나기가 기본값이며, .hide()로 숨길 수 있습니다. video() 함수를 통해 캔버스에 그릴 수 있습니다. 1번째 매개변수는 비디오 파일에 대한 단일 문자열 경로이거나, 또는 동일한 비디오 파일이 여러 개의 형식을 갖는 경우, 문자열 경로들의 배열로 지정됩니다. 특히, 다양한 파일 형식을 지정하여 여러 종류의 브라우저에서 재생될 수 있도록 하는 데에 용이합니다. 지원되는 파일 형식에 대한 자세한 내용은 이 페이지 를 참고하세요. "
],
+ "returns": "p5.MediaElement: 비디오 p5.Element에 대한 포인터",
"params": {
- "num": "숫자: 형식화할 숫자",
- "left": "정수: 소수점 기준 왼쪽의 자릿수(선택 사항)",
- "right": "정수: 소수점 기준 오른쪽의 자릿수(선택 사항)",
- "UNKNOWN-PARAM-4": "배열: 형식화할 숫자들"
- },
- "returns": "문자열: 형식화된 문자열"
+ "src": "문자열|문자열 배열[]: 비디오 파일 경로, 또는 경로들의 배열(여러 종류의 브라우저 지원)",
+ "callback": "함수: 브라우저의 미디어 재생가능 상태를 뜻하는, 'canplaythrough' 이벤트 발생시에 호출되는 함수. 추가 버퍼링 없이도, 미디어를 끝까지 재생할 수 있는 충분한 데이터가 로드된 것으로 평가. (선택 사항)"
+ }
},
- "split": {
+ "createAudio": {
"description": [
- "split() 함수는 String.split()에 매핑되며, 구분 기호를 사용하여 문자 또는 문자열을 분할합니다. 분리 문자(delim) 매개변수는 분할 경계를 나타낼 기호를 지정합니다. 각 조각들을 포함한 문자열 배열이 반환됩니다. splitTokens() 역시 비슷하게 작동하나, 특정 문자나 시퀀스 대신 여러 개의 분리 문자를 분할한다는 점에서 다릅니다."
+ "DOM에 간단한 오디오 재생을 위한 HTML5 요소를 생성합니다. 1번째 매개변수는 오디오 파일에 대한 단일 문자열 경로이거나, 또는 동일한 오디오 파일이 여러 개의 형식을 갖는 경우, 문자열 경로들의 배열로 지정됩니다. 특히, 다양한 파일 형식을 지정하여 여러 종류의 브라우저에서 재생될 수 있도록 하는 데에 용이합니다. 지원되는 파일 형식에 대한 자세한 내용은 이 페이지 를 참고하세요. "
],
+ "returns": "p5.MediaElement: 오디오 p5.Element에 대한 포인터",
"params": {
- "value": "문자열: 분할될 문자열",
- "delim": "문자열: 데이터 분할에 쓰이는 문자열"
- },
- "returns": "문자열 배열[]: 문자열들의 배열"
+ "src": "문자열|문자열 배열[]: 오디오 파일 경로, 또는 경로들의 배열(여러 종류의 브라우저 지원)",
+ "callback": "함수: 브라우저의 미디어 재생가능 상태를 뜻하는, 'canplaythrough' 이벤트 발생시에 호출되는 함수. 추가 버퍼링 없이도, 미디어를 끝까지 재생할 수 있는 충분한 데이터가 로드된 것으로 평가. (선택 사항)"
+ }
},
- "splitTokens": {
+ "VIDEO": {},
+ "AUDIO": {},
+ "createCapture": {
"description": [
- "splitTokens() 함수는 일명 '토큰(token)'이라 불리는, 하나 이상의 분리 문자를 사용하여 문자열을 분할합니다. 분리 문자(delim) 매개변수를 지정하지 않는 경우, 공백 문자를 사용하여 분할합니다. 공백 문자는 탭(\\t), 줄바꾸기(\\n), 캐리지 반환(CR: Carriage Return)(\\r), 폼 피드(FF: Form Feed)(\\f), 그리고 공백을 포함합니다."
+ "웹캠의 오디오/비디오 피드를 담는 요소를 생성합니다. 이 요소는 캔버스와는 별개로 작동합니다. '화면에 나타내기'가 기본값으로 주어지며, .hide()를 사용하여 화면으로부터 숨길 수 있습니다. image() 함수를 사용하여 피드를 캔버스에 그릴 수 있습니다. loadedmetadata 속성을 사용하여 요소가 완전히 로드된 시점을 감지할 수 있습니다. (2번째 예제 참고) 피드의 구체적인 속성은 제약 조건(Constraints) 객체를 전달할 수 있습니다. 속성 및 제약 조건 객체와 관련해서는 W3C 사양 을 참고하세요. 모든 브라우저가 이 기능을 지원하지 않는 점에 유의하세요. 보안 정보: 최신 브라우저 보안 사양은 createCapture() 이면의 getUserMedia() 메소드가 로컬 또는 HTTPS에서 코드 실행시에만 작동할 것을 요구합니다. 자세한 사항은 여기 와 여기 서 확인하세요. ",
+ "",
+ ""
],
+ "returns": "p5.Element: capture video p5.Element ",
"params": {
- "value": "문자열: 분할될 문자열",
- "delim": "문자열: 데이터 분할에 쓰이는 문자열"
- },
- "returns": "문자열 배열[]:문자열들의 배열"
+ "type": "문자열|상수|객체: 캡처 유형, VIDEO 또는 AUDIO 중 하나로 지정 가능. 별도의 매개변수가 지정되지 않을 경우 기본값으로 둘 다 또는 제약 조건 객체",
+ "callback": "함수: 스트림 로드 완료 후 1번 호출되는 함수 (선택 사항)"
+ }
},
- "trim": {
+ "createElement": {
"description": [
- "문자열 앞뒤의 공백 문자를 제거합니다. 공백, 캐리지 반환(CR: Carriage Return), 탭과 같은 표준 공백 문자 외에, 유니코드 'nbsp' 문자도 제거합니다."
+ "지정된 콘텐츠를 지닌 DOM에 태그된 요소를 생성합니다."
],
+ "returns": "p5.Element: pointer to p5.Element holding created node",
"params": {
- "column": "문자열: 트리밍될 문자열",
- "UNKNOWN-PARAM-2": "배열: 트리밍될 문자열 배열"
- },
- "returns": "문자열: 트리밍된 문자열"
+ "tag": "문자열: 새로운 요소의 태그",
+ "content": "문자열: 요소 안에 삽입될 HTML 콘텐츠 (선택 사항)"
+ }
},
"deviceOrientation": {
"description": [
"시스템 변수 deviceOrientation는 기기의 방향을 담습니다. 변수값은 LANDSCAPE(가로) 또는 PORTRAIT(세로)로 설정가능합니다. 사용 가능한 데이터가 없는 경우, '정의되지 않음(undefined)로 설정됩니다."
- ],
- "returns": ""
+ ]
},
"accelerationX": {
"description": [
"시스템 변수 accelerationX는 기기의 x축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"accelerationY": {
"description": [
"시스템 변수 accelerationY는 기기의 y축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"accelerationZ": {
"description": [
"시스템 변수 accelerationZ는 기기의 z축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"pAccelerationX": {
"description": [
"시스템 변수 pAccelerationX는 기기의 직전 프레임부터 현재 프레임까지의 x축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"pAccelerationY": {
"description": [
"시스템 변수 pAccelerationY는 기기의 직전 프레임부터 현재 프레임까지의 y축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"pAccelerationZ": {
"description": [
"시스템 변수 pAccelerationZ는 기기의 직전 프레임부터 현재 프레임까지의 z축상 가속도값을 담습니다. 값은 초당 미터 제곱으로 표기됩니다."
- ],
- "returns": ""
+ ]
},
"rotationX": {
"description": [
- "시스템 변수 rotationX는 기기의 x축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -180부터 180까지이고, RADIANS로 설정된 경우 -PI부터 PI까지입니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 rotationX는 기기의 x축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -180부터 180까지이고, RADIANS로 설정된 경우 -PI부터 PI까지입니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다.",
+ ""
+ ]
},
"rotationY": {
"description": [
- "시스템 변수 rotationY는 기기의 y축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 -PI/2부터 PI/2까지입니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 rotationY는 기기의 y축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 -PI/2부터 PI/2까지입니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다.",
+ ""
+ ]
},
"rotationZ": {
"description": [
- "시스템 변수 rotationZ는 기기의 z축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 0부터 360까지이고, RADIANS로 설정된 경우 0부터 2*PI까지입니다. rotationX 및 rotationY와는 달리, 이 변수는 나침반이 내장된 기기에 한해 사용가능합니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 rotationZ는 기기의 z축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 0부터 360까지이고, RADIANS로 설정된 경우 0부터 2*PI까지입니다. rotationX 및 rotationY와는 달리, 이 변수는 나침반이 내장된 기기에 한해 사용가능합니다. 참고: rotation 함수를 호출하는 순서에 유의하세요. 여러 축에 대한 회전 함수를 동시에 사용할 경우, 반드시 Z-X-Y 순서로 호출해야 합니다. 그렇지 않으면 예기지 못한 결과가 발생할 수 있습니다.",
+ "",
+ ""
+ ]
},
"pRotationX": {
"description": [
- "시스템 변수 pRotationX는 기기의 직전 프레임부터 현재 프레임까지의 x축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -180부터 180까지이고, RADIANS로 설정된 경우 -PI부터 PI까지입니다. pRotationX와 rotationX를 함께 사용하여 기기의 x축상 회전 방향을 정할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 pRotationX는 기기의 직전 프레임부터 현재 프레임까지의 x축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -180부터 180까지이고, RADIANS로 설정된 경우 -PI부터 PI까지입니다. pRotationX와 rotationX를 함께 사용하여 기기의 x축상 회전 방향을 정할 수 있습니다.",
+ ""
+ ]
},
"pRotationY": {
"description": [
- "시스템 변수 pRotationY는 기기의 직전 프레임부터 현재 프레임까지의 y축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 -PI/2부터 PI/2까지입니다. pRotationY와 rotationY를 함께 사용하여 기기의 y축상 회전 방향을 정할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 pRotationY는 기기의 직전 프레임부터 현재 프레임까지의 y축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 -PI/2부터 PI/2까지입니다. pRotationY와 rotationY를 함께 사용하여 기기의 y축상 회전 방향을 정할 수 있습니다.",
+ ""
+ ]
},
"pRotationZ": {
"description": [
- "시스템 변수 pRotationZ는 기기의 직전 프레임부터 현재 프레임까지의 z축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 0부터 2*PI까지입니다. pRotationZ와 rotationZ를 함께 사용하여 기기의 z축상 회전 방향을 정할 수 있습니다."
- ],
- "returns": ""
+ "시스템 변수 pRotationZ는 기기의 직전 프레임부터 현재 프레임까지의 z축상 회전값을 담습니다. 스케치의 angleMode()가 DEGREES로 설정된 경우 값의 범위는 -90부터 90까지이고, RADIANS로 설정된 경우 0부터 2*PI까지입니다. pRotationZ와 rotationZ를 함께 사용하여 기기의 z축상 회전 방향을 정할 수 있습니다.",
+ ""
+ ]
},
"turnAxis": {
"description": [
"장치가 회전시, deviceTurned() 메소드를 트리거하는 축을 turnAxis 변수에 저장합니다. turnAxis 변수는 deviceTurned() 함수가 지정한 범위 내에서만 정의됩니다."
- ],
- "returns": ""
+ ]
},
"setMoveThreshold": {
"description": [
@@ -1993,8 +1653,7 @@
],
"params": {
"value": "숫자: 임계값"
- },
- "returns": ""
+ }
},
"setShakeThreshold": {
"description": [
@@ -2002,180 +1661,173 @@
],
"params": {
"value": "数字:阈值"
- },
- "returns": ""
+ }
},
"deviceMoved": {
"description": [
"deviceMoved() 함수는 장치가 X,Y,Z 축을 따라 임계값 이상으로 이동할 때 호출됩니다. 기본 임계값은 0.5입니다. 임계값은 setMoveThreshold()로 변경할 수 있습니다."
- ],
- "returns": ""
+ ]
},
"deviceTurned": {
"description": [
- "deviceTurned() 함수는 기기가 90도 이상을 계속해서 회전할 때 호출됩니다. deviceTurned() 메소드를 트리거하는 축이 turnAxis 변수에 저장됩니다. turnAxis 변수를 X,Y,Z와 비교하여, 메소드를 트리거할 축을 정하고 해당 설정을 잠글 수 있습니다."
- ],
- "returns": ""
+ "deviceTurned() 함수는 기기가 90도 이상을 계속해서 회전할 때 호출됩니다. deviceTurned() 메소드를 트리거하는 축이 turnAxis 변수에 저장됩니다. turnAxis 변수를 X,Y,Z와 비교하여, 메소드를 트리거할 축을 정하고 해당 설정을 잠글 수 있습니다.",
+ ""
+ ]
},
"deviceShaken": {
"description": [
"deviceShaken() 함수는 accelerationX와 accelerationY의 전체 가속도 변화량이 임계값보다 클 때 호출됩니다. 기본 임계값은 30입니다. 임계값은 setShakeThreshold()로 변경할 수 있습니다."
- ],
- "returns": ""
+ ]
},
"keyIsPressed": {
"description": [
"불리언 시스템 변수 keyIsPressed입니다. 자판키를 누르면 참(true)을, 누르지 않을 때 거짓(false)을 반환합니다."
- ],
- "returns": ""
+ ]
},
"key": {
"description": [
"시스템 변수 key는 가장 마지막으로 입력된 자판키값을 담습니다. keyTyped() 함수를 통해 대소문자를 반영할 수 있습니다. ASCII 자판키가 아닌 경우, keyCode 변수를 사용하세요."
- ],
- "returns": ""
+ ]
},
"keyCode": {
"description": [
"다음의 keyCode 변수로 특수키 입력을 감지할 수 있습니다: BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW. keycode.info 에서 원하는 자판키의 keyCode를 확인할 수 있습니다."
- ],
- "returns": ""
+ ]
},
"keyPressed": {
"description": [
- "keyPressed() 함수는 자판을 누를 때마다 한 번씩 호출됩니다. 누른 키의 keyCode는 keyCode 변수에 저장됩니다. ASCII 자판키가 아닌 경우, keyCode 변수를 사용하세요. keyCode가 BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW에 해당하는지의 여부를 확인할 수 있습니다. ASCII 자판키의 경우, 가장 마지막으로 누른 자판키값이 key 변수에 저장되나, 대소문자가 구분되지 않습니다. 대소문자 구분을 원할 경우, keyTyped()를 통해 key 변수를 받을 수 있습니다. 컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다. 자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
- ],
- "returns": ""
+ "keyPressed() 함수는 자판을 누를 때마다 한 번씩 호출됩니다. 누른 키의 keyCode는 keyCode 변수에 저장됩니다. ASCII 자판키가 아닌 경우, keyCode 변수를 사용하세요. keyCode가 BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW에 해당하는지의 여부를 확인할 수 있습니다. ASCII 자판키의 경우, 가장 마지막으로 누른 자판키값이 key 변수에 저장되나, 대소문자가 구분되지 않습니다. 대소문자 구분을 원할 경우, keyTyped()를 통해 key 변수를 받을 수 있습니다. 컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다. 자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다.",
+ "",
+ "",
+ ""
+ ]
},
"keyReleased": {
"description": [
"keyReleased() 함수는 자판을 놓을 때마다 한 번씩 호출됩니다. 자세한 내용은 key 와 keyCode 를 참고하세요. 자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
- ],
- "returns": ""
+ ]
},
"keyTyped": {
"description": [
- "keyTyped() 함수는 자판을 누를 때마다 한번씩 호출되지만, 백스페이즈, 딜리트, 컨트롤, 쉬프트, 알트키는 무시됩니다. 언급된 자판키 입력 감지를 원할 경우, keyPressed() 함수를 사용하면 됩니다. 가장 마지막으로 입력된 자판키값이 key 변수에 저장됩니다. 컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. (keyReleased()도 마찬가지 입니다.) 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다. 자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
- ],
- "returns": ""
+ "keyTyped() 함수는 자판을 누를 때마다 한번씩 호출되지만, 백스페이즈, 딜리트, 컨트롤, 쉬프트, 알트키는 무시됩니다. 언급된 자판키 입력 감지를 원할 경우, keyPressed() 함수를 사용하면 됩니다. 가장 마지막으로 입력된 자판키값이 key 변수에 저장됩니다. 컴퓨터 운영 체제의 자판키 입력 반복 처리 방식으로 인해, 자판키를 계속 누르면 keyTyped()를 여러 번 호출하는 경우가 발생할 수 있습니다. (keyReleased()도 마찬가지 입니다.) 반복 속도는 운영 체제와 컴퓨터 구성 방식마다 다릅니다. 자판키 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다.",
+ ""
+ ]
},
"keyIsDown": {
"description": [
"keyIsDown() 함수는 키가 현재 내려가있는지, 즉 눌리는지의 여부를 확인합니다. 이미지를 대각선으로 움직일 때처럼, 동시에 여러 자판키가 객체의 이동 방향에 영향을 주도록 설정할 때 사용됩니다. 여기 에 나열된 keyCode 변수 이름이나 keyCode 숫자를 넣을 수 있습니다."
],
+ "returns": "자판을 눌렀는지 아닌지의 여부",
"params": {
"code": "숫자: 확인할 자판키"
- },
- "returns": "자판을 눌렀는지 아닌지의 여부"
+ }
},
"movedX": {
"description": [
"movedX 변수는 직전 프레임 이후의 마우스 수평 이동을 담습니다."
- ],
- "returns": ""
+ ]
},
"movedY": {
"description": [
"movedY 변수는 직전 프레임 이후의 마우스 수직 이동을 담습니다."
- ],
- "returns": ""
+ ]
},
"mouseX": {
"description": [
"시스템 변수 mouseX는 캔버스 (0,0)에 대한 마우스의 현재 수평 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 마우스 입력 대신 터치가 사용될 경우, mouseX는 가장 마지막 터치 지점의 x좌표값을 담습니다."
- ],
- "returns": ""
+ ]
},
"mouseY": {
"description": [
"시스템 변수 mouseY는 캔버스 (0,0)에 대한 마우스의 현재 수직 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 마우스 입력 대신 터치가 사용될 경우, mouseY는 가장 마지막 터치 지점의 y좌표값을 담습니다."
- ],
- "returns": ""
+ ]
},
"pmouseX": {
"description": [
"시스템 변수 pmouseX는 직전 프레임에서의 캔버스 (0,0)에 대한 마우스 및 터치 수평 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 참고: pmouseX는 매 터치 이벤트가 시작할 때마다 현재의 mouseX값으로 리셋됩니다."
- ],
- "returns": ""
+ ]
},
"pmouseY": {
"description": [
"시스템 변수 pmouseY는 직전 프레임에서의 캔버스 (0,0)에 대한 마우스 및 터치 수직 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 참고: pmouseY는 매 터치 이벤트가 시작할 때마다 현재의 mouseY값으로 리셋됩니다."
- ],
- "returns": ""
+ ]
},
"winMouseX": {
"description": [
"시스템 변수 winMouseX는 캔버스 (0,0)에 대한 마우스의 현재 수평 위치를 담습니다."
- ],
- "returns": ""
+ ]
},
"winMouseY": {
"description": [
"시스템 변수 winMouseY는 캔버스 (0,0)에 대한 마우스의 현재 수직 위치를 담습니다."
- ],
- "returns": ""
+ ]
},
"pwinMouseX": {
"description": [
"시스템 변수 pwinMouseX는 직전 프레임에서의 캔버스 (0,0)에 대한 마우스 수평 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 참고: pwinMouseX는 매 터치 이벤트가 시작할 때마다 현재의 winMouseX값으로 리셋됩니다."
- ],
- "returns": ""
+ ]
},
"pwinMouseY": {
"description": [
"시스템 변수 pwinMouseY는 직전 프레임에서의 캔버스 (0,0)에 대한 마우스 수직 위치를 담습니다. 2D상 (0,0)은 좌측 상단, WebGL상에서는 (-너비/2, 높이/2)를 의미합니다. 참고: pwinMouseY는 매 터치 이벤트가 시작할 때마다 현재의 winMouseY값으로 리셋됩니다."
- ],
- "returns": ""
+ ]
},
"mouseButton": {
"description": [
"p5는 마우스 버튼을 눌렀는 지의 여부와 어떤 버튼을 눌렀는지를 자동으로 추적합니다. 시스템 변수 mouseButton의 값은 마지막으로 누른 버튼에 따라 LEFT, RIGHT, 또는 CENTER로 처리됩니다. 경고: 브라우저에 따라 마우스 버튼을 다르게 추적할 수 있습니다."
- ],
- "returns": ""
+ ]
},
"mouseIsPressed": {
"description": [
"불리언 시스템 변수 mouseIsPressed는 마우스가 눌렸을 경우 참(true)이고 그렇지 않을 경우 거짓(false)로 처리됩니다."
- ],
- "returns": ""
+ ]
},
"mouseMoved": {
"description": [
"mouseMoved() 함수는 마우스 버튼이 눌리지 않은 상태에서 움직일 때마다 한 번씩 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseDragged": {
"description": [
"mouseDragged() 함수는 마우스 버튼이 눌린 상태에서 움직일 때마다 한 번씩 호출됩니다. mouseDragged() 함수가 정의되지 않고, touchMoved() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mousePressed": {
"description": [
"mousePressed() 함수는 마우스 버튼이 눌릴 때마다 한 번씩 호출됩니다. 이 때, mouseButton 변수(관련 레퍼런스 참고)를 통해 어떤 마우스 버튼이 눌렸는지 확인할 수 있습니다. mousePressed() 함수가 정의되지 않고, touchStarted() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseReleased": {
"description": [
"mouseReleased() 함수는 마우스 버튼이 놓일 때마다 한 번씩 호출됩니다. mouseReleased() 함수가 정의되지 않고, touchEnded() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseClicked": {
"description": [
"mouseClicked() 함수는 마우스 버튼이 눌리고 놓일 때마다 한 번씩 호출됩니다. 이 함수는 마우스 왼쪽 버튼을 클릭할 때 실행되며, 브라우저마다 마우스 클릭을 다르게 처리하는 점에 유의하세요. 클릭하거나 놓을 여타 마우스 버튼을 처리하려면 mousePressed() 또는 mouseReleased()를 참고하세요. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"doubleClicked": {
"description": [
"doubleClicked() 함수는 이벤트 리스너가 DOM L3 사양 중 하나인 더블 클릭(dbclick)을 감지할 때마다 실행됩니다. doubleClicked 이벤트는 포인팅 장치의 버튼(보통, 마우스 기본 버튼)을 특정 요소 위에서 두 번 연속 클릭시 시작합니다. dbclick 이벤트에 대한 자세한 정보는 Mozilla 문서 에서 확인하세요."
],
"params": {
- "fxn": "객체: MouseEvent 콜백 인수 (선택 사항)"
+ "event": "Object: (Optional) optional MouseEvent callback argument."
}
},
"mouseWheel": {
@@ -2183,33 +1835,31 @@
"mouseWheel() 함수는 실제 마우스 휠 또는 터치 패드상의 수직 마우스 휠 이벤트를 감지할 때마다 실행됩니다. event.delta 속성은 마우스 휠이 스크롤된 양을 값으로 반환합니다. 값은 스크롤 방향에 따라 양수 또는 음수 부호와 함께 표기됩니다. ('자연' 스크롤이 활성화된 OS X의 경우, 부호가 반전됩니다.) 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다. 현재 Safari의 경우 'wheel' 이벤트를 지원하는 관계로, 메소드에 \"return false\"를 포함해야 함수가 예상대로 작동할 수 있습니다."
],
"params": {
- "fxn": "객체: WheelEvent 콜백 인수 (선택 사항)"
+ "event": "Object: (Optional) optional WheelEvent callback argument."
}
},
"requestPointerLock": {
"description": [
"requestPointerLock() 함수는 포인터를 현재 위치로 잠그고 숨깁니다. movedX와 movedY를 사용하여 draw() 함수의 마지막 호출 이후에 마우스가 이동한 값을 가져올 수 있습니다. 모든 브라우저가 이 기능을 지원하지는 않습니다. 이 함수를 사용하면 마우스를 특정 방향으로 계속 움직여도 화면 밖으로 벗어나지 않도록 처리할 수 있습니다. 1인칭 시점 구현 등에 용이합니다."
- ],
- "returns": ""
+ ]
},
"exitPointerLock": {
"description": [
"exitPointerLock() 함수는 이전에 설정된 포인터 잠금 을 종료합니다. UI 요소 활성화 등을 위해 사용됩니다."
- ],
- "returns": ""
+ ]
},
"touches": {
"description": [
- "시스템 변수 touches[]는 캔버스 (0,0)에 대한 현재의 모든 터치 포인트 위치, 그리고 터치를 식별하는 고유 ID를 담습니다.배열 속 요소들은 각각 x, y, 그리고 id 속성을 갖는 객체들입니다. touch[] 배열은 터치 기반 데스크톱 및 노트북상의 Safari나 Internet Explorer에서 지원되지 않습니다."
- ],
- "returns": ""
+ "시스템 변수 touches[]는 캔버스 (0,0)에 대한 현재의 모든 터치 포인트 위치, 그리고 터치를 식별하는 고유 ID를 담습니다.배열 속 요소들은 각각 x, y, 그리고 id 속성을 갖는 객체들입니다. touch[] 배열은 터치 기반 데스크톱 및 노트북상의 Safari나 Internet Explorer에서 지원되지 않습니다.",
+ ""
+ ]
},
"touchStarted": {
"description": [
"touchStarted() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. touchStarted() 함수가 정의되지 않고, mousePressed() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
"params": {
- "fxn": "객체: TouchEvent 콜백 인수 (선택 사항)"
+ "event": "Object: (Optional) optional TouchEvent callback argument."
}
},
"touchMoved": {
@@ -2217,7 +1867,7 @@
"touchMoved() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. touchMoved() 함수가 정의되지 않고, mouseDragged() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
"params": {
- "fxn": "객체: TouchEvent 콜백 인수 (선택 사항)"
+ "event": "Object: (Optional) optional TouchEvent callback argument."
}
},
"touchEnded": {
@@ -2225,18 +1875,20 @@
"touchEnded() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. touchEnded() 함수가 정의되지 않고, mouseReleased() 함수가 정의된 경우, 후자가 대신 호출됩니다. 마우스 입력을 통한 이벤트 발생이 브라우저 기본값으로 설정되어있는 경우, 메소드 말미에 \"return false\"를 넣어 브라우저 기본값 이벤트 발생을 방지할 수 있습니다."
],
"params": {
- "fxn": "객체: TouchEvent 콜백 인수 (선택 사항)"
+ "event": "Object: (Optional) optional TouchEvent callback argument."
}
},
"createImage": {
"description": [
- "새로운 p5.Image(이미지 저장을 위한 데이터 유형)를 생성합니다. 이 함수는 새 픽셀 버퍼를 제공합니다. 너비 및 높이 매개변수로 버퍼 크기를 설정하세요. .pixels를 통해 디스플레이 화면의 모든 픽셀값이 담긴 배열에 접근합니다. 픽셀값은 숫자로 표현됩니다. 배열은 디스플레이 화면의 4배 크기(픽셀 밀도에 대한 인수 포함)로, 각 픽셀에 대한 R, G, B, A값을 나타냅니다. 배열은 행의 좌에서 우로, 그 다음 열로 내려가는 순으로 채워집니다. 자세한 내용은 .pixels 레퍼런스를 참고하세요. 몇몇 경우에서는 set() 및 get() 함수를 사용하는 편이 더 편리할 수 있습니다. 이미지의 픽셀에 접근하기에 앞서, loadPixels() 함수를 통해 픽셀을 불러와야 합니다. 또한, 배열 데이터를 수정한 후에는 updatePixels()로 수정된 내용을 반영해야 합니다."
+ "새로운 p5.Image(이미지 저장을 위한 데이터 유형)를 생성합니다. 이 함수는 새 픽셀 버퍼를 제공합니다. 너비 및 높이 매개변수로 버퍼 크기를 설정하세요. .pixels를 통해 디스플레이 화면의 모든 픽셀값이 담긴 배열에 접근합니다. 픽셀값은 숫자로 표현됩니다. 배열은 디스플레이 화면의 4배 크기(픽셀 밀도에 대한 인수 포함)로, 각 픽셀에 대한 R, G, B, A값을 나타냅니다. 배열은 행의 좌에서 우로, 그 다음 열로 내려가는 순으로 채워집니다. 자세한 내용은 .pixels 레퍼런스를 참고하세요. 몇몇 경우에서는 set() 및 get() 함수를 사용하는 편이 더 편리할 수 있습니다. 이미지의 픽셀에 접근하기에 앞서, loadPixels() 함수를 통해 픽셀을 불러와야 합니다. 또한, 배열 데이터를 수정한 후에는 updatePixels()로 수정된 내용을 반영해야 합니다.",
+ "",
+ ""
],
+ "returns": "p5.Image: p5.Image 객체",
"params": {
"width": "정수: 픽셀 단위 너비값",
"height": "정수: 픽셀 단위 높이값"
- },
- "returns": "p5.Image: p5.Image 객체"
+ }
},
"saveCanvas": {
"description": [
@@ -2246,12 +1898,12 @@
"selectedCanvas": "p5.Element|HTMLCanvasElement: 특정 HTML5 캔버스를 나타내는 변수 (선택 사항)",
"filename": "문자열: (선택 사항)",
"extension": "문자열: 'jpg' 또는 'png' (선택 사항)"
- },
- "returns": ""
+ }
},
"saveFrames": {
"description": [
- "동영상 제작에 사용되는 일련의 프레임을 캡처합니다. 콜백을 허용하는 함수로, 프레임을 서버로 보내 저장하거나 동영상으로 변환할 수 있습니다. 콜백을 지정하지 않으면, 생성된 모든 이미지 다운로드를 위한 대화 상자가 브라우저에 팝업창으로 나타납니다. 콜백을 지정할 경우 이미지 데이터를 자동 저장하는 대신, 총 프레임 수와 동일한 갯수의 크기를 갖는 객체 배열을 콜백 함수에 인수로서 전달합니다. saveFrames() 함수는 애니메이션의 처음 15개의 프레임만 저장합니다. 재생 시간이 더 긴 애니메이션을 내보내려면 ccapture.js 와 같은 라이브러리를 확인하세요."
+ "동영상 제작에 사용되는 일련의 프레임을 캡처합니다. 콜백을 허용하는 함수로, 프레임을 서버로 보내 저장하거나 동영상으로 변환할 수 있습니다. 콜백을 지정하지 않으면, 생성된 모든 이미지 다운로드를 위한 대화 상자가 브라우저에 팝업창으로 나타납니다. 콜백을 지정할 경우 이미지 데이터를 자동 저장하는 대신, 총 프레임 수와 동일한 갯수의 크기를 갖는 객체 배열을 콜백 함수에 인수로서 전달합니다. saveFrames() 함수는 애니메이션의 처음 15개의 프레임만 저장합니다. 재생 시간이 더 긴 애니메이션을 내보내려면 ccapture.js 와 같은 라이브러리를 확인하세요.",
+ ""
],
"params": {
"filename": "문자열:",
@@ -2259,65 +1911,71 @@
"duration": "숫자: 프레임을 저장할 시간(초)",
"framerate": "숫자: 저장할 프레임 속도",
"callback": "함수(배열): 이미지 데이터를 처리하는 콜백 함수. 이 함수는 배열을 인수로만 받습니다. 지정된 개수의 객체 프레임이 배열에 포함됩니다. 각 객체는 다음의 3가지 속성을 가집니다: imageData - 이미지/옥텟 스트림, 파일명, 파일 확장자 (선택 사항)"
- },
- "returns": ""
+ }
},
"loadImage": {
"description": [
- "사용자가 지정한 경로로부터 이미지를 불러오고 p5.Image를 생성합니다. 이미지를 불러와도 곧바로 렌더링되지 않는 경우가 있습니다. 여타 작업을 수행하기에 앞서 이미지 로드를 완료하려면, loadImage()를 preload() 함수 안에서 호출하면 됩니다. 또는, 로드가 완료된 이미지 처리를 위한 콜백 함수를 지정할 수 있습니다. 이미지 경로는 스케치에 링크된 HTML 파일에 대한 상대 경로를 사용합니다. URL이나 원격 경로를 이용하면 브라우저의 보안 설정에 따라 이미지를 불러오는 데에 문제가 생길 수 있습니다."
+ "사용자가 지정한 경로로부터 이미지를 불러오고 p5.Image를 생성합니다. 이미지를 불러와도 곧바로 렌더링되지 않는 경우가 있습니다. 여타 작업을 수행하기에 앞서 이미지 로드를 완료하려면, loadImage()를 preload() 함수 안에서 호출하면 됩니다. 또는, 로드가 완료된 이미지 처리를 위한 콜백 함수를 지정할 수 있습니다. 이미지 경로는 스케치에 링크된 HTML 파일에 대한 상대 경로를 사용합니다. URL이나 원격 경로를 이용하면 브라우저의 보안 설정에 따라 이미지를 불러오는 데에 문제가 생길 수 있습니다.",
+ "",
+ "",
+ ""
],
+ "returns": "p5.Image: p5.Image 객체",
"params": {
"path": "문자열: 불러올 이미지 경로",
"successCallback": "함수(p5.Image): 이미지 불러오기 후 호출되는 함수로, p5.Image가 전달됩니다. (선택 사항)",
"failureCallback": "함수(Event): 이미지 불러오기 실패시 이벤트 에러와 함께 호출되는 함수 (선택 사항)"
- },
- "returns": "p5.Image: p5.Image 객체"
+ }
},
"image": {
"description": [
- "p5.js 캔버스에 이미지를 그립니다. image() 함수의 사용 방법은 다음과 같습니다. (1) 가장 간단한 방법은 img, x, y 3개의 변수를 사용하는 방법입니다. x, y는 이미지의 (x,y) 좌표값 위치입니다. (2) img, x, y에 더해 이미지의 너비와 높이를 설정하는 2개의 변수를 추가로 사용합니다. (3) 8개의 변수를 사용합니다. 먼저, 변수 구별을 위해 p5.js에서 사용하는 용어를 배워봅시다. 첫 번째 용어는 '목적지 사각형(destination rectagle)'으로, dx, dy 등의 변수가 이에 해당합니다. 두 번째 용어는 '원본 이미지(source image)'로, sx, sy등의 변수가 이에 해당합니다. '원본 이미지'의 크기 설정을 통해 이미지의 일부만을 화면상 나타나게할 수 있습니다. 자세한 사항은 아래 도식을 참고하세요."
+ "p5.js 캔버스에 이미지를 그립니다. image() 함수의 사용 방법은 다음과 같습니다. (1) 가장 간단한 방법은 img, x, y 3개의 변수를 사용하는 방법입니다. x, y는 이미지의 (x,y) 좌표값 위치입니다. (2) img, x, y에 더해 이미지의 너비와 높이를 설정하는 2개의 변수를 추가로 사용합니다. (3) 8개의 변수를 사용합니다. 먼저, 변수 구별을 위해 p5.js에서 사용하는 용어를 배워봅시다. 첫 번째 용어는 '목적지 사각형(destination rectagle)'으로, dx, dy 등의 변수가 이에 해당합니다. 두 번째 용어는 '원본 이미지(source image)'로, sx, sy등의 변수가 이에 해당합니다. '원본 이미지'의 크기 설정을 통해 이미지의 일부만을 화면상 나타나게할 수 있습니다. 자세한 사항은 아래 도식을 참고하세요.",
+ "",
+ ""
],
"params": {
"img": "p5.Image, p5.Element: 화면에 나타낼 이미지",
- "dx": "숫자: 왼쪽 위 모서리의 x좌표값",
- "dy": "숫자: 왼쪽 위 모서리의 y좌표값",
- "dWidth": "숫자: 이미지 너비값 (선택 사항)",
- "dHeight": "숫자: 이미지 높이값 (선택 사항)",
- "sx": "숫자: 원본 이미지를 배치할 목적지 사각형의 x좌표값",
- "sy": "숫자: 원본 이미지를 배치할 목적지 사각형의 y좌표값",
- "sWidth": "숫자: 목적지 사각형의 너비값",
- "sHeight": "숫자: 목적지 사각형의 높이값",
- "UNKNOWN-PARAM-10": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 x좌표값",
- "UNKNOWN-PARAM-11": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 y좌표값",
- "UNKNOWN-PARAM-12": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 너비값 (선택 사항)",
- "UNKNOWN-PARAM-13": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 높이값 (선택 사항)"
+ "x": "숫자: 왼쪽 위 모서리의 x좌표값",
+ "y": "숫자: 왼쪽 위 모서리의 y좌표값",
+ "width": "숫자: 이미지 너비값 (선택 사항)",
+ "height": "숫자: 이미지 높이값 (선택 사항)",
+ "dx": "숫자: 원본 이미지를 배치할 목적지 사각형의 x좌표값",
+ "dy": "숫자: 원본 이미지를 배치할 목적지 사각형의 y좌표값",
+ "dWidth": "숫자: 목적지 사각형의 너비값",
+ "dHeight": "숫자: 목적지 사각형의 높이값",
+ "sx": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 x좌표값",
+ "sy": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 y좌표값",
+ "sWidth": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 너비값 (선택 사항)",
+ "sHeight": "숫자: 목적지 사각형에 배치할 원본 이미지 일부의 높이값 (선택 사항)"
}
},
"tint": {
"description": [
- "화면에 나타날 이미지의 면채우기 값을 설정합니다. 이미지에 색조를 입히거나 알파값을 통해 투명도를 조정할 수 있습니다. 이미지 본래의 색상을 유지하면서 투명도를 적용하려면, 흰색 색조에 알파값을 지정하면 됩니다. 예를 들어 tint(255, 128)는 이미지를 50% 투명하게 만듭니다. (기본 알파 범위 0-255를 가정, 범위는 colorMode()로 조정 가능) 회색값 매개변수는 현재 colorMode()에 따른 최대값보다 작거나 같아야합니다. 기본 최대값은 255입니다."
+ "화면에 나타날 이미지의 면채우기 값을 설정합니다. 이미지에 색조를 입히거나 알파값을 통해 투명도를 조정할 수 있습니다. 이미지 본래의 색상을 유지하면서 투명도를 적용하려면, 흰색 색조에 알파값을 지정하면 됩니다. 예를 들어 tint(255, 128)는 이미지를 50% 투명하게 만듭니다. (기본 알파 범위 0-255를 가정, 범위는 colorMode()로 조정 가능) 회색값 매개변수는 현재 colorMode()에 따른 최대값보다 작거나 같아야합니다. 기본 최대값은 255입니다.",
+ "",
+ ""
],
"params": {
"v1": "숫자: 현재 색상 범위에 대한 빨강값 또는 색조값",
"v2": "숫자: 현재 색상 범위에 대한 초록값 또는 채도값",
"v3": "숫자: 현재 색상 범위에 대한 파랑값 또는 밝기값",
"alpha": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-5": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-6": "숫자: 회색값",
- "UNKNOWN-PARAM-7": "숫자 배열[]: 색상의 R, G, B & 알파값을 담는 배열",
- "UNKNOWN-PARAM-8": "p5.Color: 입힐 색조의 색상]"
- },
- "returns": ""
+ "value": "문자열: 색상 문자열",
+ "gray": "숫자: 회색값",
+ "values": "숫자 배열[]: 색상의 R, G, B & 알파값을 담는 배열",
+ "color": "p5.Color: 입힐 색조의 색상]"
+ }
},
"noTint": {
"description": [
"화면에 나타날 이미지의 현재 면채우기 값을 제거하고 이미지의 본래 색상으로 되돌아갑니다."
- ],
- "returns": ""
+ ]
},
"imageMode": {
"description": [
- "이미지의 모드를 설정합니다. image()의 매개변수가 해석되는 방식을 변경하여 이미지가 그려지는 위치를 수정합니다. 기본 모드는 imageMode(CORNER)이며, image()의 2번째 및 3번째 매개변수를 이미지의 좌측 상단 모퉁이의 좌표값으로 해석합니다. 추가 매개변수 2개를 통해 이미지의 너비와 높이도 설정할 수 있습니다. imageMode(CORNERS)는 image()의 2번째 및 3번째 매개변수를 모퉁이 한 개의 좌표값으로 해석합니다. 그리고, 4번째 및 5번째 매개변수를 그 반대편 모퉁이의 좌표값으로 해석합니다. imageMode(CENTER)는 2번째 및 3번째 매개변수를 이미지의 중심점 좌표값으로 해석합니다. 추가 매개변수 2개를 통해 이미지의 너비와 높이도 설정할 수 있습니다."
+ "이미지의 모드를 설정합니다. image()의 매개변수가 해석되는 방식을 변경하여 이미지가 그려지는 위치를 수정합니다. 기본 모드는 imageMode(CORNER)이며, image()의 2번째 및 3번째 매개변수를 이미지의 좌측 상단 모퉁이의 좌표값으로 해석합니다. 추가 매개변수 2개를 통해 이미지의 너비와 높이도 설정할 수 있습니다. imageMode(CORNERS)는 image()의 2번째 및 3번째 매개변수를 모퉁이 한 개의 좌표값으로 해석합니다. 그리고, 4번째 및 5번째 매개변수를 그 반대편 모퉁이의 좌표값으로 해석합니다. imageMode(CENTER)는 2번째 및 3번째 매개변수를 이미지의 중심점 좌표값으로 해석합니다. 추가 매개변수 2개를 통해 이미지의 너비와 높이도 설정할 수 있습니다.",
+ "",
+ ""
],
"params": {
"mode": "상수: CORNER, CORNERS 또는 CENTER"
@@ -2325,9 +1983,12 @@
},
"pixels": {
"description": [
- "디스플레이 화면의 모든 픽셀값을 담는 Uint8ClampedArray 입니다. 픽셀값은 숫자로 표현됩니다. 배열은 디스플레이 화면의 4배 크기(픽셀 밀도에 대한 인수 포함)로, 각 픽셀에 대한 R, G, B, A값을 나타냅니다. 배열은 행의 좌에서 우로, 그 다음 열로 내려가는 순으로 채워집니다. Retina를 비롯한 기타 고밀도 디스플레이는 (pixelDensity^2 계수로 인해) 크기가 더 큰 픽셀 배열[]을 갖기도 합니다. 일반 디스플레이 화면상 이미지가 100x100 픽셀이고 그 배열이 40,000이라면, Retina에서 배열은 160,000이 됩니다. 배열상 처음 4개의 값들(즉, 인덱스 0-3)은 (0,0) 픽셀에서의 R, G, B, A값을, 그 다음 4개의 값들(즉, 인덱스 4-7)은 (1,0) 픽셀에서의 R, G, B, A값을 담습니다. 특정 좌표 (x,y)에서의 픽셀값을 설정하는 방법은 아래의 예제와 같습니다. 다소 복잡해보이는 예제지만, 모든 픽셀 밀도(pixelDensity)를 사용할 수 있을정도로 유연합니다. set()은 임의의 pixelDensity에서 주어진 (x,y)에 대한 픽셀 배열[]의 모든 값들을 자동으로 설정합니다. 배열을 여러 차례 수정할 경우, 성능이 느려질 수 있습니다. 이 레퍼런스는 표준 자바스크립트 배열이 아니고, 따라서 slice()나 arrayCopy()와 같은 표준 자바스크립트 함수가 작동하지 않는 점에 유의하세요. "
- ],
- "returns": ""
+ "디스플레이 화면의 모든 픽셀값을 담는 Uint8ClampedArray 입니다. 픽셀값은 숫자로 표현됩니다. 배열은 디스플레이 화면의 4배 크기(픽셀 밀도에 대한 인수 포함)로, 각 픽셀에 대한 R, G, B, A값을 나타냅니다. 배열은 행의 좌에서 우로, 그 다음 열로 내려가는 순으로 채워집니다. Retina를 비롯한 기타 고밀도 디스플레이는 (pixelDensity^2 계수로 인해) 크기가 더 큰 픽셀 배열[]을 갖기도 합니다. 일반 디스플레이 화면상 이미지가 100x100 픽셀이고 그 배열이 40,000이라면, Retina에서 배열은 160,000이 됩니다. 배열상 처음 4개의 값들(즉, 인덱스 0-3)은 (0,0) 픽셀에서의 R, G, B, A값을, 그 다음 4개의 값들(즉, 인덱스 4-7)은 (1,0) 픽셀에서의 R, G, B, A값을 담습니다. 특정 좌표 (x,y)에서의 픽셀값을 설정하는 방법은 아래의 예제와 같습니다. 다소 복잡해보이는 예제지만, 모든 픽셀 밀도(pixelDensity)를 사용할 수 있을정도로 유연합니다. set()은 임의의 pixelDensity에서 주어진 (x,y)에 대한 픽셀 배열[]의 모든 값들을 자동으로 설정합니다. 배열을 여러 차례 수정할 경우, 성능이 느려질 수 있습니다. 이 레퍼런스는 표준 자바스크립트 배열이 아니고, 따라서 slice()나 arrayCopy()와 같은 표준 자바스크립트 함수가 작동하지 않는 점에 유의하세요. ",
+ "",
+ "",
+ "",
+ ""
+ ]
},
"blend": {
"description": [
@@ -2344,8 +2005,7 @@
"dw": "정수: 대상 이미지 너비값",
"dh": "정수: 대상 이미지 높이값",
"blendMode": "상수: 혼합 모드. BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL 중 하나"
- },
- "returns": ""
+ }
},
"copy": {
"description": [
@@ -2361,47 +2021,58 @@
"dy": "정수: 대상 영역의 좌측 상단 모퉁이 y좌표값",
"dw": "정수: 대상 이미지 너비값",
"dh": "정수: 대상 이미지 높이값"
- },
- "returns": ""
+ }
},
"filter": {
"description": [
- "캔버스에 필터를 적용합니다. GRAY: 이미지의 모든 색상을 그레이 스케일로 변환합니다. 별도의 매개변수를 사용하지 않습니다. OPAQUE: 알파 채널을 완전히 불투명하게 설정합니다. 별도의 매개변수를 사용하지 않습니다. INVERT: 각 픽셀을 그 역의 값으로 설정합니다. 별도의 매개변수를 사용하지 않습니다. POSTERIZE: 이미지의 각 채널을 매개변수로 지정한 색상 수로 제한합니다. 매개변수는 2부터 255사이의 값으로 설정 가능하나, 낮은 범위에서 가장 두드러진 결과를 볼 수 있습니다. BLUR: 블러 범위를 설정하는 level 매개변수를 사용하여 가우시안 블러를 실행합니다. 별도의 매개변수를 지정하지 않으면, 반경 1의 가우시안 블러와 동일한 효과가 됩니다. 값이 클수록 흐림 정도가 증가합니다. ERODE: 밝은 영역을 줄입니다. 별도의 매개변수를 사용하지 않습니다. DILATE: 밝은 영역을 증가시킵니다. 별도의 매개변수를 사용하지 않습니다. WebGL 모드에서는 filter()가 작동하지 않으나, 커스텀 셰이더를 사용하여 유사한 효과를 얻을 수 있습니다. 아담 페리스(Adam Ferriss)가 작성한 셰이더 예제 중, filter()와 유사한 효과를 나타내는 예제들이 있으니 참고하세요."
+ "캔버스에 필터를 적용합니다. GRAY: 이미지의 모든 색상을 그레이 스케일로 변환합니다. 별도의 매개변수를 사용하지 않습니다. OPAQUE: 알파 채널을 완전히 불투명하게 설정합니다. 별도의 매개변수를 사용하지 않습니다. INVERT: 각 픽셀을 그 역의 값으로 설정합니다. 별도의 매개변수를 사용하지 않습니다. POSTERIZE: 이미지의 각 채널을 매개변수로 지정한 색상 수로 제한합니다. 매개변수는 2부터 255사이의 값으로 설정 가능하나, 낮은 범위에서 가장 두드러진 결과를 볼 수 있습니다. BLUR: 블러 범위를 설정하는 level 매개변수를 사용하여 가우시안 블러를 실행합니다. 별도의 매개변수를 지정하지 않으면, 반경 1의 가우시안 블러와 동일한 효과가 됩니다. 값이 클수록 흐림 정도가 증가합니다. ERODE: 밝은 영역을 줄입니다. 별도의 매개변수를 사용하지 않습니다. DILATE: 밝은 영역을 증가시킵니다. 별도의 매개변수를 사용하지 않습니다. WebGL 모드에서는 filter()가 작동하지 않으나, 커스텀 셰이더를 사용하여 유사한 효과를 얻을 수 있습니다. 아담 페리스(Adam Ferriss)가 작성한 셰이더 예제 중, filter()와 유사한 효과를 나타내는 예제들이 있으니 참고하세요.",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"filterType": "상수: THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE, BLUR 중 하나. 각 필터에 대한 문서는 Filters.js를 참조.",
"filterParam": "숫자: 각 필터 고유의 선택적 매개변수 (선택 사항)"
- },
- "returns": ""
+ }
},
"get": {
"description": [
- "지정된 픽셀 영역 또는 단일 픽셀을 캔버스로부터 받아옵니다. 특정 픽셀에 대한 [R,G,B,A] 값의 배열이나, 이미지의 한 영역을 반환합니다. 별도의 매개변수를 지정하지 않는 경우, 전체 이미지를 반환합니다. 매개변수 x, y를 통해 특정 픽셀의 좌표값을 받아올 수 있습니다. 추가 매개변수 w, h를 통해 디스플레이 창의 한 영역을 지정할 수도 있습니다. 이미지를 받아올 때, 매개변수 x와 y는 현재 imageMode()와 관계없이 좌측 상단 모퉁이의 좌표값을 정의합니다. get(x,y) 함수로 픽셀 1개의 색상을 받아오는 것은 쉬운 방법이지만, pixels[] 배열로부터 직접 데이터를 받아오는 것만큼 빠르진 않습니다. pixels[] 배열과 픽셀 밀도 매개변수 d를 사용하여 get(x,y)과 동일한 효과를 나타낼 수 있고, 구체적인 명령문은 다음의 예제와 같습니다. 더 많은 정보는 pixels[] 레퍼런스를 확인하세요. p5.Image 객체의 하위 이미지로부터 색상 배열을 추출하는 방법은 p5.Image.get()에서 참고하세요."
+ "지정된 픽셀 영역 또는 단일 픽셀을 캔버스로부터 받아옵니다. 특정 픽셀에 대한 [R,G,B,A] 값의 배열이나, 이미지의 한 영역을 반환합니다. 별도의 매개변수를 지정하지 않는 경우, 전체 이미지를 반환합니다. 매개변수 x, y를 통해 특정 픽셀의 좌표값을 받아올 수 있습니다. 추가 매개변수 w, h를 통해 디스플레이 창의 한 영역을 지정할 수도 있습니다. 이미지를 받아올 때, 매개변수 x와 y는 현재 imageMode()와 관계없이 좌측 상단 모퉁이의 좌표값을 정의합니다. get(x,y) 함수로 픽셀 1개의 색상을 받아오는 것은 쉬운 방법이지만, pixels[] 배열로부터 직접 데이터를 받아오는 것만큼 빠르진 않습니다. pixels[] 배열과 픽셀 밀도 매개변수 d를 사용하여 get(x,y)과 동일한 효과를 나타낼 수 있고, 구체적인 명령문은 다음의 예제와 같습니다. 더 많은 정보는 pixels[] 레퍼런스를 확인하세요. p5.Image 객체의 하위 이미지로부터 색상 배열을 추출하는 방법은 p5.Image.get()에서 참고하세요.",
+ "",
+ "",
+ "",
+ ""
],
+ "returns": "p5.Image: 직사각형 p5.Image",
"params": {
- "the": "숫자: 픽셀의 x좌표값",
- "UNKNOWN-PARAM-2": "숫자: 픽셀의 y좌표값",
- "UNKNOWN-PARAM-3": "숫자: 너비",
- "UNKNOWN-PARAM-4": "숫자: 높이"
- },
- "returns": "p5.Image: 직사각형 p5.Image"
+ "x": "숫자: 픽셀의 x좌표값",
+ "y": "숫자: 픽셀의 y좌표값",
+ "w": "숫자: 너비",
+ "h": "숫자: 높이"
+ }
},
"loadPixels": {
"description": [
"디스플레이 창의 픽셀 데이터를 pixels[] 배열에 불러옵니다. 이 함수는 pixels[] 배열을 작성하거나 읽어오기 전에 호출되어야 합니다. set() 함수 또는 pixels[] 배열 직접 조작을 통한 변경 사항만 반영합니다."
- ],
- "returns": ""
+ ]
},
"set": {
"description": [
- "특정 픽셀의 색상을 변경하거나, 디스플레이 창에 이미지를 직접 작성합니다. 매개변수 x와 y는 변경할 픽셀을 지정하고, 매개변수 c는 색상값을 지정합니다. 색상값으로는 p5.Color 객체, [R,G,B,A] 베열, 또는 단일 그레이 스케일값을 사용할 수 있습니다. 이미지 설정시, 매개변수 x와 y는 현재 imageMode()와 관계없이 좌측 상단 모퉁이의 좌표값을 정의합니다. set() 함수 사용 후에는 반드시 updatePixels()를 호출하여 변경 사항을 반영해야 합니다. 호출 시점은 픽셀 설정을 완료한 이후이면서 동시에, .get() 또는 그리기 함수 호출 이전이어야 합니다. set(x,y) 함수로 픽셀 1개의 색상을 받아오는 것은 쉬운 방법이지만, pixels[] 배열로부터 직접 데이터를 받아오는 것만큼 빠르진 않습니다. 레티나 디스플레이에선 pixels[] 배열값을 직접 설정하는 것이 복잡할 수 있으나, 많은 양의 픽셀들이 반복 실행되도록 설정된 경우 그 작업 성능이 향상됩니다. 자세한 내용은 pixels[]를 참고하세요. "
+ "특정 픽셀의 색상을 변경하거나, 디스플레이 창에 이미지를 직접 작성합니다. 매개변수 x와 y는 변경할 픽셀을 지정하고, 매개변수 c는 색상값을 지정합니다. 색상값으로는 p5.Color 객체, [R,G,B,A] 베열, 또는 단일 그레이 스케일값을 사용할 수 있습니다. 이미지 설정시, 매개변수 x와 y는 현재 imageMode()와 관계없이 좌측 상단 모퉁이의 좌표값을 정의합니다. set() 함수 사용 후에는 반드시 updatePixels()를 호출하여 변경 사항을 반영해야 합니다. 호출 시점은 픽셀 설정을 완료한 이후이면서 동시에, .get() 또는 그리기 함수 호출 이전이어야 합니다. set(x,y) 함수로 픽셀 1개의 색상을 받아오는 것은 쉬운 방법이지만, pixels[] 배열로부터 직접 데이터를 받아오는 것만큼 빠르진 않습니다. 레티나 디스플레이에선 pixels[] 배열값을 직접 설정하는 것이 복잡할 수 있으나, 많은 양의 픽셀들이 반복 실행되도록 설정된 경우 그 작업 성능이 향상됩니다. 자세한 내용은 pixels[]를 참고하세요. ",
+ "",
+ ""
],
"params": {
- "key": "숫자: 픽셀의 x좌표값",
- "value": "숫자: 픽셀의 y좌표값",
- "UNKNOWN-PARAM-3": "숫자|숫자 배열[]|객체: 그레이스케일 값 기입|픽셀 배열|p5.Color객체|복사할p5.Image"
- },
- "returns": ""
+ "x": "숫자: 픽셀의 x좌표값",
+ "y": "숫자: 픽셀의 y좌표값",
+ "c": "Number|Number[]|Object: insert a grayscale value | a pixel array | a p5.Color object | a p5.Image to copy"
+ }
},
"updatePixels": {
"description": [
@@ -2412,97 +2083,109 @@
"y": "숫자: 업데이트할 영역의 좌측 상단 모퉁이 y좌표값 (선택 사항)",
"w": "숫자: 업데이트할 영역의 너비값 (선택 사항)",
"h": "숫자: 업데이트할 영역의 높이값 (선택 사항)"
- },
- "returns": ""
+ }
},
"loadJSON": {
"description": [
- "파일 또는 URL로부터 JSON 파일을 불러오고, 객체를 반환합니다. JSON 파일에 배열이 포함된 경우, 인덱스 번호를 키(key)로 사용하여 객체를 반환할 수 있습니다. 이는 비동기적 메소드으로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. JSONP는 polyfill을 통해 지원되며, 여기 의 구문에 따라 JSON 콜백 함수가 정의한 객체를 2번째 인수로 전달할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다. [1번째 예제] preload() 함수 안에 loadJSON() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다."
+ "파일 또는 URL로부터 JSON 파일을 불러오고, 객체를 반환합니다. JSON 파일에 배열이 포함된 경우, 인덱스 번호를 키(key)로 사용하여 객체를 반환할 수 있습니다. 이는 비동기적 메소드으로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. JSONP는 polyfill을 통해 지원되며, 여기 의 구문에 따라 JSON 콜백 함수가 정의한 객체를 2번째 인수로 전달할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다. [1번째 예제] preload() 함수 안에 loadJSON() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다.",
+ "",
+ ""
],
+ "returns": "객체|배열: JSON 데이터",
"params": {
"path": "문자열: 불러올 파일명 또는 URL",
"jsonpOptions": "객체: jsonp 관련 설정을 위한 객체 (선택 사항)",
"datatype": "문자열: \"json\" 또는 \"jsonp\"",
"callback": "함수: loadJSON()이 완료된 이후 실행될 함수, 데이터를 1번재 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "객체|배열: JSON 데이터"
+ }
},
"loadStrings": {
"description": [
- "파일의 내용을 읽어와 개별 행에 대한 문자열 배열을 생성합니다. 위의 예제처럼 파일명(filename)을 매개변수로 사용할 경우, 해당 파일이 스케치 디렉토리/폴더(directory/folder) 안에 있어야 합니다. 절대 경로(Unix 및 Linux의 경우 with/on 으로, 윈도우의 경우 드라이브 문자로 시작)로도 로컬 컴퓨터로부터 파일을 불러올 수 있습니다. 또는, 매개변수 filename을 URL 또는 네트워크상의 파일로 지정할 수 있습니다. 이는 비동기적 메소드으로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다. [1번째 예제] preload() 함수 안에 loadStrings() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다."
+ "파일의 내용을 읽어와 개별 행에 대한 문자열 배열을 생성합니다. 위의 예제처럼 파일명(filename)을 매개변수로 사용할 경우, 해당 파일이 스케치 디렉토리/폴더(directory/folder) 안에 있어야 합니다. 절대 경로(Unix 및 Linux의 경우 with/on 으로, 윈도우의 경우 드라이브 문자로 시작)로도 로컬 컴퓨터로부터 파일을 불러올 수 있습니다. 또는, 매개변수 filename을 URL 또는 네트워크상의 파일로 지정할 수 있습니다. 이는 비동기적 메소드으로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다. [1번째 예제] preload() 함수 안에 loadStrings() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다.",
+ "",
+ "",
+ ""
],
+ "returns": "문자열 배열[]: 문자열들의 배열",
"params": {
"filename": "문자열: 불러올 파일명 또는 URL",
"callback": "함수: loadStrings()이 완료된 이후 실행될 함수, 배열을 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "문자열 배열[]: 문자열들의 배열"
+ }
},
"loadTable": {
"description": [
- "파일 또는 URL의 내용을 읽어와 그 값으로 p5.Table 객체를 만듭니다. 특정 파일을 지정하려면, 해당 파일이 'data' 폴더 안에 있어야 합니다. 매개변수 filename는 온라인 파일 URL로도 지정 가능합니다. 기본값으로, 파일 내용이 쉼표 단위로 구분된 것(CSV 형식)으로 간주합니다. 'header' 옵션이 포함된 경우, 헤더 행만 찾습니다. 가능한 옵션은 다음과 같습니다:csv - 테이블을 쉼표로 구분된 값으로서 구문 분석 tsv - 테이블을 탭으로 구분된 값으로서 구문 분석 header - 테이블에 헤더 행이 있음을 표기 여러 옵션을 사용할 경우, 매개변수들을 쉼표로 구분하여 전달할 수 있습니다. 예를 들면 다음과 같습니다:loadTable('my_csv_file.csv', 'csv', 'header'); 불러오기 및 저장된 모든 파일은 UTF-8 인코딩을 사용합니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 그 경우, preload() 함수 안에 loadTable() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. preload() 함수 밖의 영역에서 콜백 함수를 작성하여 객체를 처리할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다."
+ "파일 또는 URL의 내용을 읽어와 그 값으로 p5.Table 객체를 만듭니다. 특정 파일을 지정하려면, 해당 파일이 'data' 폴더 안에 있어야 합니다. 매개변수 filename는 온라인 파일 URL로도 지정 가능합니다. 기본값으로, 파일 내용이 쉼표 단위로 구분된 것(CSV 형식)으로 간주합니다. 'header' 옵션이 포함된 경우, 헤더 행만 찾습니다. 가능한 옵션은 다음과 같습니다:csv - 테이블을 쉼표로 구분된 값으로서 구문 분석 tsv - 테이블을 탭으로 구분된 값으로서 구문 분석 header - 테이블에 헤더 행이 있음을 표기 여러 옵션을 사용할 경우, 매개변수들을 쉼표로 구분하여 전달할 수 있습니다. 예를 들면 다음과 같습니다:loadTable('my_csv_file.csv', 'csv', 'header'); 불러오기 및 저장된 모든 파일은 UTF-8 인코딩을 사용합니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 그 경우, preload() 함수 안에 loadTable() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. preload() 함수 밖의 영역에서 콜백 함수를 작성하여 객체를 처리할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다.",
+ "",
+ ""
],
+ "returns": "객체: 데이터를 포함한 Table 객체",
"params": {
"filename": "문자열: 불러올 파일명 또는 URL",
- "options": "문자열: \"header\" \"csv\" \"tsv\"",
+ "extension": "String: (Optional) parse the table by comma-separated values \"csv\", semicolon-separated values \"ssv\", or tab-separated values \"tsv\"",
+ "header": "String: (Optional) \"header\" to indicate table has header row",
"callback": "함수: loadTable()이 완료된 이후 실행될 함수, 성공시 Table 객체를 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "객체: 데이터를 포함한 Table 객체"
+ }
},
"loadXML": {
"description": [
- "파일의 내용을 읽어와 그 값으로 XML 객체를 생성합니다. 위의 예제처럼 파일명(filename)을 매개변수로 사용할 경우, 해당 파일이 스케치 디렉토리/폴더(directory/folder) 안에 있어야 합니다. 절대 경로(Unix 및 Linux의 경우 with/on 으로, 윈도우의 경우 드라이브 문자로 시작)로도 로컬 컴퓨터로부터 파일을 불러올 수 있습니다. 또는, 매개변수 filename을 URL 또는 네트워크상의 파일로 지정할 수 있습니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 그 경우, preload() 함수 안에 loadXML() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. preload() 함수 밖의 영역에서 콜백 함수를 작성하여 객체를 처리할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다."
+ "파일의 내용을 읽어와 그 값으로 XML 객체를 생성합니다. 위의 예제처럼 파일명(filename)을 매개변수로 사용할 경우, 해당 파일이 스케치 디렉토리/폴더(directory/folder) 안에 있어야 합니다. 절대 경로(Unix 및 Linux의 경우 with/on 으로, 윈도우의 경우 드라이브 문자로 시작)로도 로컬 컴퓨터로부터 파일을 불러올 수 있습니다. 또는, 매개변수 filename을 URL 또는 네트워크상의 파일로 지정할 수 있습니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 그 경우, preload() 함수 안에 loadXML() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. preload() 함수 밖의 영역에서 콜백 함수를 작성하여 객체를 처리할 수 있습니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다.",
+ "",
+ "",
+ "",
+ ""
],
+ "returns": "객체: 데이터를 포함한 XML 객체",
"params": {
"filename": "문자열: 불러올 파일명 또는 URL",
"callback": "함수: loadXML()이 완료된 이후 실행될 함수, XML 객체를 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "객체: 데이터를 포함한 XML 객체"
+ }
},
"loadBytes": {
"description": [
"이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다."
],
+ "returns": "객체: 'bytes' 속성을 로드 완료된 버퍼로서 갖는 객체",
"params": {
"file": "문자열: 불러올 파일명 또는 URL",
"callback": "함수: loadBytes()가 완료된 이후 실행될 함수 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수 (선택 사항)"
- },
- "returns": "객체: 'bytes' 속성을 로드 완료된 버퍼로서 갖는 객체"
+ }
},
"httpGet": {
"description": [
"HTTP GET 요청을 실행하는 메소드입니다. 별도의 데이터 유형(datatype)을 지정하지 않을 경우, p5는 URL을 기본값 텍스트로서 가정합니다. 이는 httpDo(path, 'GET')을 호출하는 것과 동일한 효과를 갖습니다. ‘binary’ 데이터 형식은 Blob 객체를, ‘arrayBuffer’ 데이터 형식은 지정된 형식의 배열(예: Uint8Array)을 초기화할 ArrayBuffer를 반환합니다."
],
+ "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부.",
"params": {
"path": "문자열: 불러올 파일명 또는 URL",
"datatype": "문자열: \"json\",\"jsonp\",\"binary\",\"arrayBuffer\",\"xml\" 또는 \"text\"",
"data": "객체:불리언: 요청과 함께 전달되는 매개변수 데이터 (선택 사항)",
"callback": "함수: httpGet()이 완료된 이후 실행될 함수, 데이터를 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부."
+ }
},
"httpPost": {
"description": [
"HTTP POST 요청을 실행하는 메소드입니다. 별도의 데이터 유형(datatype)을 지정하지 않을 경우, p5는 URL을 기본값 텍스트로서 가정합니다. 이는 httpDo(path, 'POST')를 호출하는 것과 동일한 효과를 갖습니다."
],
+ "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부",
"params": {
"path": "문자열: 불러올 파일명 또는 URL",
"datatype": "문자열: \"json\",\"jsonp\",\"binary\",\"arrayBuffer\",\"xml\" 또는 \"text\". 생략할 경우, httpPost()가 임의로 가정합니다.",
"data": "객체:불리언: 요청과 함께 전달되는 매개변수 데이터 (선택 사항)",
"callback": "함수: httpPost()가 완료된 이후 실행될 함수, 데이터를 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부"
+ }
},
"httpDo": {
"description": [
"HTTP 요청을 실행하는 메소드입니다. 별도의 데이터 유형(datatype)을 지정하지 않을 경우, p5는 URL을 기본값 텍스트로서 가정합니다. 고급 응용 단계에서는 경로를 1번째 인수로, 객체를 2번째 인수로 전달할 수 있습니다. 서명은 Fetch API 사양을 따릅니다. 이 방법은 최대 64MB 크기의 파일을 불러오는 데에 적합합니다."
],
+ "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부",
"params": {
"path": "문자열: 불러올 파일명 또는 URL",
"method": "문자열: \"GET\", \"POST\", \"PUT\" 중 하나, 기본값은 \"GET\"",
@@ -2510,30 +2193,25 @@
"data": "객체: 요청과 함께 전달되는 매개변수 데이터 (선택 사항)",
"callback": "함수: httpDo()가 완료된 이후 실행될 함수, 데이터를 1번째 인수로 전달 (선택 사항)",
"errorCallback": "함수: 에러 발생시 실행될 함수, 반응(response)이 1번째 인수로 전달 (선택 사항)",
- "UNKNOWN-PARAM-7": "객체: Fetch API 레퍼런스 에 따른 요청(request) 객체 옵션"
- },
- "returns": "약속: 작업 성공시 데이터로 해결되는 약속, 또는 오류 발생시 거부"
+ "options": "객체: Fetch API 레퍼런스 에 따른 요청(request) 객체 옵션"
+ }
},
"createWriter": {
- "description": [
- ""
- ],
+ "returns": "p5.PrintWriter",
"params": {
"name": "문자열: 생성될 파일의 이름",
"extension": "문자열: (선택 사항)"
- },
- "returns": "p5.PrintWriter"
+ }
},
"save": {
"description": [
"이미지, 텍스트, json, csv, wav, 또는 html을 저장합니다. 클라이언트 컴퓨터에 다운로드 대화 상자가 뜹니다. save() 함수는 매 프레임마다 새로운 저장 대화 상자를 엽니다. 따라서, 반복 실행되는 함수인 draw() 안에서 save()를 호출하지 않는 것을 권장합니다. 기본 동작은 캔버스를 이미지로 저장하는 것입니다. 선택적으로 파일명을 지정할 수 있습니다. 예를 들면 다음과 같습니다:CODE BLOCK PENDING 또는, 1번째 매개변수를 캔버스 p5.Element애 대한 포인터, JSON 배열, JSON 객체, p5.Table, p5.Image, p5.SoundFile(p5.sound 필요)로 지정할 수 있습니다. 2번째 매개변수로 파일명(확장자 포함)을 지정합니다. 3번째는 객체 유형에 따른 옵션을 설정합니다. 이 메소드는 사용자가 지정한 매개변수에 따라 파일을 저장합니다. 예를 들면, 다음과 같습니다:CODE BLOCK PENDING "
],
"params": {
- "filename": "객체|문자열: 지정된 파일명에 따라 캔버스를 png 또는 jpg 확장자 이미지로 저장합니다. 객체 지정시, 객체와 파일명에 따라 저장합니다. (위의 예제 참고) (선택 사항)",
- "extension": "문자열: 객체를 1번째 매개변수로 지정할 경우, 2번째 매개변수는 파일명을 지시하게 되며, 이 경우 적절한 파일 확장자를 포함해야 합니다. (위의 예제 참고) (선택 사항) ",
- "UNKNOWN-PARAM-3": "불리언|문자열: 파일 유형에 따른 추가 옵션. 예를 들어 JSON을 저장할 경우, 참(true)은 결과물의 가독성이 아닌, 결과물 파일 크기의 최적화를 뜻합니다. (선택 사항)"
- },
- "returns": ""
+ "objectOrFilename": "객체|문자열: 지정된 파일명에 따라 캔버스를 png 또는 jpg 확장자 이미지로 저장합니다. 객체 지정시, 객체와 파일명에 따라 저장합니다. (위의 예제 참고) (선택 사항)",
+ "filename": "문자열: 객체를 1번째 매개변수로 지정할 경우, 2번째 매개변수는 파일명을 지시하게 되며, 이 경우 적절한 파일 확장자를 포함해야 합니다. (위의 예제 참고) (선택 사항) ",
+ "options": "불리언|문자열: 파일 유형에 따른 추가 옵션. 예를 들어 JSON을 저장할 경우, 참(true)은 결과물의 가독성이 아닌, 결과물 파일 크기의 최적화를 뜻합니다. (선택 사항)"
+ }
},
"saveJSON": {
"description": [
@@ -2541,10 +2219,9 @@
],
"params": {
"json": "배열|객체:",
- "name": "문자열:",
+ "filename": "String",
"optimize": "불리언: 참(true)일 경우, 출력 파일상 줄바꿈과 공백을 제거하여 파일 크기를 최적화합니다. (가독성은 최적화 제외) (선택 사항)"
- },
- "returns": ""
+ }
},
"saveStrings": {
"description": [
@@ -2555,157 +2232,115 @@
"filename": "문자열: 결과값을 위한 파일명",
"extension": "문자열: filename의 확장자 (선택 사항)",
"isCRLF": "불리언: 참(true)일 경우, 줄바꿈을 CRLF로 변환 (선택 사항)"
- },
- "returns": ""
+ }
},
"saveTable": {
"description": [
"테이블(Table) 객체의 내용을 파일에 작성합니다. 쉼표 단위로 값을 구분하는 텍스트 파일('csv')이 기본값으로 설정되지만, 탭 구분('tsv') 또는 HTML 테이블('html')도 생성가능합니다. 파일 저장 처리 방식 및 저장 파일 위치는 웹 브라우저마다 다릅니다."
],
"params": {
- "table": "p5.Table: 파일에 저장할 Table 객체",
+ "Table": "p5.Table: the Table object to save to a file",
"filename": "문자열: Table을 저장할 파일명",
"options": "문자열: 可以是 \"tsv\", \"csv\", \"html\" 중 하나 (선택 사항)"
- },
- "returns": ""
+ }
},
- "day": {
+ "abs": {
"description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. day() 함수는 현재 날짜를 1부터 31에 해당하는 값으로 반환합니다."
+ "숫자의 절대값(크기)을 계산합니다. Math.abs()에 매핑합니다. 숫자의 절대값은 항상 양수입니다."
],
- "returns": "정수: 현재 날짜"
- },
- "hour": {
- "description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. hour() 함수는 현재 시를 0부터 23에 해당하는 값으로 반환합니다."
- ],
- "returns": "정수: 현재 시"
- },
- "minute": {
- "description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. minute() 함수는 현재 분을 0부터 59에 해당하는 값으로 반환합니다."
- ],
- "returns": "정수: 현재 분"
- },
- "millis": {
- "description": [
- "스케치의 시작(즉, setup() 함수 호출 시점)이후의 시간을 밀리 세컨드(1/1000초)로 반환합니다. 주로 타이밍 이벤트나 애니메이션 시퀀스에 사용됩니다."
- ],
- "returns": "숫자: 스케치의 시작 이후의 밀리 세컨드 단위 시간"
- },
- "month": {
- "description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. month() 함수는 현재 월을 1부터 12에 해당하는 값으로 반환합니다."
- ],
- "returns": "정수: 현재 월"
- },
- "second": {
- "description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. second() 함수는 현재 초를 0부터 59에 해당하는 값으로 반환합니다."
- ],
- "returns": "정수: 현재 초"
- },
- "year": {
- "description": [
- "p5.js는 컴퓨터의 시계와도 통신합니다. second() 함수는 현재 년도를 정수로 반환합니다. (2014, 2015, 2016, 등)"
- ],
- "returns": "정수: 현재 년도"
- },
- "abs": {
- "description": [
- "숫자의 절대값(크기)을 계산합니다. Math.abs()에 매핑합니다. 숫자의 절대값은 항상 양수입니다."
- ],
- "params": {
- "n": "숫자: 계산할 숫자"
- },
- "returns": "숫자: 지정된 숫자의 절대값"
+ "returns": "숫자: 지정된 숫자의 절대값",
+ "params": {
+ "n": "숫자: 계산할 숫자"
+ }
},
"ceil": {
"description": [
"매개변수의 값보다 크거나 같은 수들 중, 가장 가까운 정수(int)값을 계산합니다. 예를 들어, Math.ceil()에 매핑합니다. 예를 들어, ceil(9.03)은 값 10을 반환합니다."
],
+ "returns": "정수: 반올림된 숫자",
"params": {
"n": "숫자: 반올림할 숫자"
- },
- "returns": "정수: 반올림된 숫자"
+ }
},
"constrain": {
"description": [
"값을 최소값과 최대값 사이에 제한합니다."
],
+ "returns": "숫자: 제한된 숫자",
"params": {
"n": "수자: 제한할 숫자",
"low": "숫자: 최소 한계",
"high": "숫자: 최대 한계"
- },
- "returns": "숫자: 제한된 숫자"
+ }
},
"dist": {
"description": [
"2차원 또는 3차원 상 두 점 사이의 거리를 계산합니다."
],
+ "returns": "숫자: 두 점 사이의 거리",
"params": {
"x1": "숫자: 1번째 점의 x좌표값",
"y1": "숫자: 1번째 점의 y좌표값",
- "z1": "숫자: 2번째 점의 x좌표값",
"x2": "숫자: 2번째 점의 y좌표값",
"y2": "숫자: 1번째 점의 z좌표값",
+ "z1": "숫자: 2번째 점의 x좌표값",
"z2": "숫자: 2번째 점의 z좌표값"
- },
- "returns": "숫자: 두 점 사이의 거리"
+ }
},
"exp": {
"description": [
"매개변수 n을 지수로 삼는 거듭 제곱 형식으로 오일러(Euler)의 수 e(2.71828...)를 반환합니다. Math.exp()에 매핑합니다."
],
+ "returns": "숫자: e^n",
"params": {
"n": "숫자: 거듭 제곱의 지수"
- },
- "returns": "숫자: e^n"
+ }
},
"floor": {
"description": [
"매개변수의 값보다 작거나 같은 수들 중, 가장 가까운 정수(int)값을 계산합니다. Math.floor()에 매핑합니다."
],
+ "returns": "정수: 반내림된 숫자",
"params": {
"n": "숫자: 반내림할 숫자"
- },
- "returns": "정수: 반내림된 숫자"
+ }
},
"lerp": {
"description": [
"지정된 증분(increment)을 통해 두 숫자 사이의 특정 숫자를 계산합니다. 여기서 매개변수 amt는 두 개의 값 사이를 선형적으로 보간합니다. 예를 들어, 0.0은 첫 번째 값과 동일한 색상값을, 0.1은 첫 번째 값에 매우 가까운 색상값을, 0.5는 두 값 사이의 중간 색상값을 나타내는 식입니다. 이 때, 0 미만의 값과 1이상의 값은 지정된 2개의 숫자의 비율에 따라 자동 처리됩니다. lerp() 함수는 직선 경로를 따라 모션을 생성하고 점선을 그리는 데에 사용됩니다."
],
+ "returns": "숫자: 선형보간된 값",
"params": {
"start": "숫자: 1번째 값",
"stop": "숫자: 2번째 값",
"amt": "숫자: 숫자"
- },
- "returns": "숫자: 선형보간된 값"
+ }
},
"log": {
"description": [
"숫자의 자연 로그(밑이 e인 로그)를 계산합니다. 함수는 매개변수 n을 0.0보다 큰 값으로 예측합니다. Math.log()에 매핑합니다"
],
+ "returns": "숫자: n의 자연 로그",
"params": {
- "message": "숫자: 0보다 큰 숫자"
- },
- "returns": "숫자: n의 자연 로그"
+ "n": "Number: number greater than 0"
+ }
},
"mag": {
"description": [
"벡터의 크기(또는 길이)를 계산합니다. 벡터는 컴퓨터 그래픽과 선형 대수에서 일반적으로 사용되며, 공간 속 방향을 뜻합니다. 벡터에는 시작점 개념이 없으므로, 그 크기는 좌표 0,0에서 x,y값까지의 거리에 비유할 수 있습니다. 이 점에서 mag()는 dist(0, 0, x, y)와 동일한 효과를 갖고 보다 간단하게 표현한 셈입니다."
],
+ "returns": "숫자: (0,0)에서 (a,b)까지의 벡터 크기",
"params": {
"a": "숫자: 1번째 값",
"b": "숫자: 2번째 값"
- },
- "returns": "숫자: (0,0)에서 (a,b)까지의 벡터 크기"
+ }
},
"map": {
"description": [
- "숫자의 범위를 다른 범위로 다시 매핑합니다. 첫 번째 예제의 숫자 25는 화면상 좌측 상단 모퉁이(0)부터 우측 변(너비)에 이르는 범위에 해당하는데, 이는 0부터 100 사이에 해당하는 본래 범위에서 변환된 것입니다."
+ "숫자의 범위를 다른 범위로 다시 매핑합니다. 첫 번째 예제의 숫자 25는 화면상 좌측 상단 모퉁이(0)부터 우측 변(너비)에 이르는 범위에 해당하는데, 이는 0부터 100 사이에 해당하는 본래 범위에서 변환된 것입니다.",
+ ""
],
+ "returns": "숫자: 다시 매핑된 숫자",
"params": {
"value": "숫자: 변환할 값",
"start1": "숫자: 값의 현재 범위의 하한",
@@ -2713,110 +2348,109 @@
"start2": "숫자: 값의 대상 범위의 하한",
"stop2": "숫자: 값의 대상 범위의 상한",
"withinBounds": "불리언: 값을 새로 매핑된 범위에 제한 (선택 사항)"
- },
- "returns": "숫자: 다시 매핑된 숫자"
+ }
},
"max": {
"description": [
"일련의 숫자들 중, 가장 큰 값을 확인하고 이를 반환합니다. max() 함수는 매개변수 Number로 지정된 모든 숫자 또는 모든 길의의 배열을 허용합니다."
],
+ "returns": "숫자: 최대 숫자",
"params": {
"n0": "숫자: 비교할 숫자",
"n1": "숫자: 비교할 숫자",
- "UNKNOWN-PARAM-3": "숫자 배열[]: 비교할 숫자"
- },
- "returns": "숫자: 최대 숫자"
+ "nums": "숫자 배열[]: 비교할 숫자"
+ }
},
"min": {
"description": [
"일련의 숫자들 중, 가장 작은 값을 확인하고 이를 반환합니다. min() 함수는 매개변수 Number로 지정된 모든 숫자 또는 모든 길의의 배열을 허용합니다."
],
+ "returns": "숫자: 최소 숫자",
"params": {
"n0": "숫자: 비교할 숫자",
"n1": "숫자: 비교할 숫자",
- "UNKNOWN-PARAM-3": "숫자 배열[]: 비교할 숫자"
- },
- "returns": "숫자: 최소 숫자"
+ "nums": "숫자 배열[]: 비교할 숫자"
+ }
},
"norm": {
"description": [
"특정 범위 내의 숫자를 0과 1 범위의 값으로 정규화합니다. 이는 map(value, low, high, 0, 1)과도 동일한 효과를 갖습니다. 숫자가 0과 1 범위를 벗어나더라도, 사용자의 의도와 활용 가능성을 감안하여 0과 1 사이의 값으로 재고정하지 않습니다. (위의 예제를 참고하세요.) "
],
+ "returns": "숫자: 정규화된 숫자",
"params": {
"value": "숫자: 정규화될 값",
"start": "숫자: 값의 현재 범위 하한",
"stop": "숫자: 값의 현재 범위 상한"
- },
- "returns": "숫자: 정규화된 숫자"
+ }
},
"pow": {
"description": [
"pow() 함수는 지수 식을 효율적으로 사용하는 한 방법으로, 특정 숫자(또는 그 역수)를 반복하여 곱할 수 있습니다. 예를 들어, pow(3,5)는 3 x 3 x 3 x 3 x 3과 같고, pow(3,-5)는 1 / 3 x 3 x 3 x 3 x 3과 같습니다. Math.pow()에 매핑합니다. "
],
+ "returns": "숫자:n^e",
"params": {
"n": "숫자: 지수 식의 밑",
"e": "숫자: 거듭 제곱의 지수"
- },
- "returns": "숫자:n^e"
+ }
},
"round": {
"description": [
"매개변수 n에 가장 가까운 정수를 계산합니다. 예를 들어, round(133.8)은 값 134를 반환합니다. Math.round()에 매핑합니다."
],
+ "returns": "정수: 반올림된 숫자",
"params": {
"n": "숫자: 반올림할 숫자",
"decimals": "숫자: 반올림할 소수점 자릿수, 기본값은 0 (선택 사항)"
- },
- "returns": "정수: 반올림된 숫자"
+ }
},
"sq": {
"description": [
"숫자를 제곱합니다. (즉, 숫자 자신을 곱합니다.) 두 개의 음수를 곱하면 그 결과는 항상 양수로 나옵니다. 예를 들어, -1 * -1 = 1 처럼요."
],
+ "returns": "숫자: 제곱된 숫자",
"params": {
"n": "숫자: 제곱할 숫자"
- },
- "returns": "숫자: 제곱된 숫자"
+ }
},
"sqrt": {
"description": [
"숫자의 제곱근을 계산합니다. 유효한 음의 근이 있더라도 제곱근은 항상 양수가 됩니다. 숫자 a의 제곱근은 s * s = a와 같습니다. 제곱의 반대입니다. Math.sqrt()에 매핑됩니다."
],
+ "returns": "숫자: 숫자의 제곱근",
"params": {
"n": "숫자: 음수가 아닌 제곱근"
- },
- "returns": "숫자: 숫자의 제곱근"
+ }
},
- "fract()": {
+ "fract": {
"description": [
- "숫자의 소수 부분을 계산합니다."
+ "Calculates the fractional part of a number."
],
+ "returns": "Number: fractional part of x, i.e, {x}",
"params": {
- "num": "숫자: 소수 부분 파악이 필요한 숫자"
- },
- "returns": "x의 소수 부분, 예: {x}"
+ "num": "Number: Number whose fractional part needs to be found out"
+ }
},
- "createVector()": {
+ "createVector": {
"description": [
- "새로운 p5.Vector (벡터 저장을 위한 데이터 유형)를 생성합니다. 2차원 및 3차원 벡터, 그리고 유클리드(기하학) 벡터를 제공합니다. 벡터는 크기와 방향을 모두 지닌 개체입니다."
+ "Creates a new p5.Vector (the datatype for storing vectors). This provides a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction."
],
+ "returns": "p5.Vector: ",
"params": {
- "x": "숫자: 벡터의 x성분 (선택 사항)",
- "y": "숫자: 벡터의 y성분 (선택 사항)",
- "z": "숫자: 벡터의 z성분 (선택 사항)"
- },
- "returns": "p5.Vector"
+ "x": "Number: (Optional) x component of the vector",
+ "y": "Number: (Optional) y component of the vector",
+ "z": "Number: (Optional) z component of the vector"
+ }
},
"noise": {
"description": [
"지정된 좌표에서의 펄린 노이즈(Perlin noise)값을 반환합니다. 일반 random() 함수에 비해, 펄린 노이즈는 고조파 연속 숫자를 보다 자연스러운 시퀀스로 생성합니다. 켄 펄린(Ken Perlin)이 1980년대에 발명하였으며, 그래픽 응용 프로그램상 절차적 텍스처, 자연스러운 모션, 형상, 지형 등을 생성하는 데에 사용됩니다.random() 함수와의 주요 차이점은, 펄린 노이즈가 반-무작위 값을 갖는 고정 좌표쌍을 n차원의 무한 공간에서 정의한다는 점에 있습니다. (이는 프로그램의 수명 동안에만 고정되며, 관련해서는 noiseSeed()함수를 참고하세요.) p5.js는 사용자가 지정한 좌표 개수에 따라 1D, 2D, 3D 노이즈를 계산할 수 있습니다. 결과값은 항상 0.0과 1.0 사이입니다. 위의 예제처럼, 노이즈값은 공간 이동을 통해 애니메이션화 될 수 있습니다. 2차원 및 3차원 역시 시간으로 해석될 수 있습니다. 노이즈 함수의 주파수 사용은 실제 오디오 신호와 유사하게 구성됩니다. 물리학에서의 고조파 개념과 마찬가지로, 펄린 노이즈는 여러 옥타브에 걸쳐 계산되며, 최종 결과 생성을 위해 모든 옥타브를 합칩니다. 입력 좌표값의 크기를 통해서도 결과 시퀀스의 문자를 조정할 수 있습니다. 함수는 무한 공간 속에서 작동하기 때문에 좌표값이 크게 중요하지 않지만, 연속된 좌표들 사이의 거리만큼은 중요합니다 (예: 반복문 내에서 noise()를 실행하는 경우). 일반적으로, 좌표들 간의 거리차가 적을수록 노이즈 시퀀스가 더 매끄러워집니다. 0.0005부터 0.03 사이의 단계가 대부분의 응용 프로그램에서 사용하기에 가장 적합하나, 사용에 따라 달라질 수 있습니다."
],
+ "returns": "숫자: 지정된 좌표에서의 펄린 노이즈 값 (0과 1 사이)",
"params": {
"x": "숫자: 노이즈 공간 속 x좌표값",
"y": "숫자: 노이즈 공간 속 y좌표값",
"z": "숫자: 노이즈 공간 속 z좌표값"
- },
- "returns": "숫자: 지정된 좌표에서의 펄린 노이즈 값 (0과 1 사이)"
+ }
},
"noiseDetail": {
"description": [
@@ -2825,8 +2459,7 @@
"params": {
"lod": "숫자: 노이즈가 사용한 옥타브 개수",
"falloff": "숫자: 각 옥타브에 대한 감소 계수"
- },
- "returns": ""
+ }
},
"noiseSeed": {
"description": [
@@ -2834,139 +2467,144 @@
],
"params": {
"seed": "숫자: 시드값"
- },
- "returns": ""
+ }
},
"randomSeed": {
"description": [
- "random() 함수의 시드(seed) 값을 설정합니다. 기본적으로, random()은 소프트웨어 프로그램이 실행될 때마다 매번 다른 결과를 생성합니다. 매 실행마다 동일한 유사-난수(random)를 반환하려면 매개변수 value를 상수로 설정하세요. "
+ "random() 함수의 시드(seed) 값을 설정합니다. 기본적으로, random()은 소프트웨어 프로그램이 실행될 때마다 매번 다른 결과를 생성합니다. 매 실행마다 동일한 유사-난수(random)를 반환하려면 매개변수 value를 상수로 설정하세요. ",
+ ""
],
"params": {
"seed": "숫자: 시드값"
- },
- "returns": ""
+ }
},
"random": {
"description": [
- "임의의 부동 소수점 숫자, 즉 실수(float)를 반환합니다. 0, 1, 또는 2개의 인수를 사용합니다. 별도의 인수를 지정하지 않을 경우, 0부터 1미만 사이의 난수(random)를 반환합니다. 1개의 인수를 숫자로 지정한 경우, 0부터 해당 숫자 미만 사이의 난수를 반환합니다. 1개의 인수를 배열로 지정한 경우, 해당 배열로부터 임의의 요소를 반환합니다. 2개의 인수를 지정한 경우, 1번째 인수에서 2번째 인수 미만 사이의 난수를 반환합니다."
+ "임의의 부동 소수점 숫자, 즉 실수(float)를 반환합니다. 0, 1, 또는 2개의 인수를 사용합니다. 별도의 인수를 지정하지 않을 경우, 0부터 1미만 사이의 난수(random)를 반환합니다. 1개의 인수를 숫자로 지정한 경우, 0부터 해당 숫자 미만 사이의 난수를 반환합니다. 1개의 인수를 배열로 지정한 경우, 해당 배열로부터 임의의 요소를 반환합니다. 2개의 인수를 지정한 경우, 1번째 인수에서 2번째 인수 미만 사이의 난수를 반환합니다.",
+ "",
+ "",
+ "",
+ "",
+ ""
],
+ "returns": "숫자: 난수",
"params": {
"min": "숫자: (해당 숫자를 포함한) 하한 (선택 사항)",
"max": "숫자: (해당 숫자를 제외한) 상한 (선택 사항)",
- "UNKNOWN-PARAM-3": "배열: 요소를 골라올 배열"
- },
- "returns": "숫자: 난수"
+ "choices": "배열: 요소를 골라올 배열"
+ }
},
"randomGaussian": {
"description": [
"가우스 및 정규 분포에 맞는 난수를 반환합니다. randomGaussian()이 반환할 수 있는 최소값이나 최대값 개념은 이론상 없습니다. 평균으로부터 멀리 떨어진 값이 반환될 확률은 매우 낮고, 평균 근처의 숫자가 반환될 확률이 높습니다. 0, 1, 또는 2개의 인수를 사용합니다. 별도의 인수를 지정하지 않을 경우, 평균으로 0을, 표준 편차로 1을 반환합니다. 1개의 인수를 지정한 경우, 해당 인수가 평균입니다. (표준 편차는 1) 2개의 인수를 지정한 경우, 1번째 인수는 평균, 2번째 인수는 표준 편차입니다."
],
+ "returns": "숫자: 난수",
"params": {
"mean": "숫자: 평균",
"sd": "숫자: 표준 편차"
- },
- "returns": "숫자: 난수"
+ }
},
"acos": {
"description": [
"cos()함수의 역으로, 값의 아크 코사인을 반환합니다. 이 함수는 -1부터 1까지 범위 내의 값을 예상하고, 0부터 PI(3.1415927)까지 범위 내의 값을 반환합니다."
],
+ "returns": "숫자: 지정된 값의 아크 코사인",
"params": {
"value": "숫자: 아크 코사인으로 반환될 값"
- },
- "returns": "숫자: 지정된 값의 아크 코사인"
+ }
},
"asin": {
"description": [
"sin()함수의 역으로, 값의 아크 사인을 반환합니다. 이 함수는 -1부터 1까지 범위 내의 값을 예상하고, -PI/2부터 PI/2까지 범위 내의 값을 반환합니다."
],
+ "returns": "숫자: 지정된 값의 아크 사인",
"params": {
"value": "숫자: 아크 사인으로 반환될 값"
- },
- "returns": "숫자: 지정된 값의 아크 사인"
+ }
},
"atan": {
"description": [
"tan()함수의 역으로, 값의 아크 탄젠트를 반환합니다. 이 함수는 -무한부터 무한 미만까지 범위 내의 값을 예상하고, -PI/2부터 PI/2까지 범위 내의 값을 반환합니다."
],
+ "returns": "숫자: 지정된 값의 아크 탄젠트",
"params": {
"value": "숫자: 아크 탄젠트로 반환될 값"
- },
- "returns": "숫자: 지정된 값의 아크 탄젠트"
+ }
},
"atan2": {
"description": [
- "양의 x축상의 특정 좌표로부터 좌표 원점을 향한 각도(부채각, radian)를 계산합니다. 값은 PI부터 -PI까지 범위 내의 실수(float)로 반환됩니다. atan2() 함수는 도형을 커서 위치에 맞추는 데에 자주 사용됩니다. 참고: 접선 계산 방식에 따라 1번째 매개변수를 점의 y좌표로, 2번째 매개변수를 x좌표로 지정합니다."
+ "양의 x축상의 특정 좌표로부터 좌표 원점을 향한 각도(원주호, radian)를 계산합니다. 값은 PI부터 -PI까지 범위 내의 실수(float)로 반환됩니다. atan2() 함수는 도형을 커서 위치에 맞추는 데에 자주 사용됩니다. 참고: 접선 계산 방식에 따라 1번째 매개변수를 점의 y좌표로, 2번째 매개변수를 x좌표로 지정합니다.",
+ ""
],
+ "returns": "지정된 점의 아크 탄젠트",
"params": {
"y": "숫자: 점의 y좌표값",
"x": "숫자: 점의 x좌표값"
- },
- "returns": "지정된 점의 아크 탄젠트"
+ }
},
"cos": {
"description": [
"각도의 코사인을 계산합니다. 이 함수는 현재 설정된 angleMode를 반영합니다. 값은 -1부터 1까지의 범위 내에서 반환됩니다."
],
+ "returns": "숫자: 각도의 코사인",
"params": {
"angle": "숫자: 각도"
- },
- "returns": "숫자: 각도의 코사인"
+ }
},
"sin": {
"description": [
"각도의 사인을 계산합니다. 이 함수는 현재 설정된 angleMode를 반영합니다. 값은 -1부터 1까지의 범위 내에서 반환됩니다."
],
+ "returns": "숫자: 각도의 사인",
"params": {
"angle": "숫자: 각도"
- },
- "returns": "숫자: 각도의 사인"
+ }
},
"tan": {
"description": [
"각도의 탄젠트를 계산합니다. 이 함수는 현재 설정된 angleMode를 반영합니다. 모든 실수 범위 내에서의 값을 반환됩니다."
],
+ "returns": "숫자: 각도의 탄젠트",
"params": {
"angle": "숫자: 각도"
- },
- "returns": "숫자: 각도의 탄젠트"
+ }
},
"degrees": {
"description": [
- "부채각(radian) 측정값을 도(degree) 단위에 해당하는 값으로 변환합니다. 부채각과 도는 같은 것을 측정하는 2개의 다른 단위입니다. 원은 360도이면서 동시에 2*PI 부채각이기도 합니다. 또, 90° = PI/2 = 1.5707964 가 성립합니다. 이 함수는 현재 설정된 angleMode를 반영하지 않습니다."
+ "원주호(radian) 측정값을 도(degree) 단위에 해당하는 값으로 변환합니다. 원주호과 도는 같은 것을 측정하는 2개의 다른 단위입니다. 원은 360도이면서 동시에 2*PI 원주호이기도 합니다. 또, 90° = PI/2 = 1.5707964 가 성립합니다. 이 함수는 현재 설정된 angleMode를 반영하지 않습니다."
],
+ "returns": "숫자: 변환된 각도",
"params": {
- "radians": "숫자: 도 단위로 변환할 부채각값"
- },
- "returns": "숫자: 변환된 각도"
+ "radians": "숫자: 도 단위로 변환할 원주호값"
+ }
},
"radians": {
"description": [
- "도(degree) 측정값을 부채각(radian) 단위에 해당하는 값으로 변환합니다. 부채각과 도는 같은 것을 측정하는 2개의 다른 단위입니다. 원은 360도이면서 동시에 2*PI 부채각이기도 합니다. 또, 90° = PI/2 = 1.5707964 가 성립합니다. 이 함수는 현재 설정된 angleMode를 반영하지 않습니다"
+ "도(degree) 측정값을 원주호(radian) 단위에 해당하는 값으로 변환합니다. 원주호과 도는 같은 것을 측정하는 2개의 다른 단위입니다. 원은 360도이면서 동시에 2*PI 원주호이기도 합니다. 또, 90° = PI/2 = 1.5707964 가 성립합니다. 이 함수는 현재 설정된 angleMode를 반영하지 않습니다"
],
+ "returns": "숫자: 변환된 각도",
"params": {
- "degrees": "숫자: 부채각 단위로 변환할 도 값"
- },
- "returns": "숫자: 변환된 각도"
+ "degrees": "숫자: 원주호 단위로 변환할 도 값"
+ }
},
"angleMode": {
"description": [
- "p5의 현재 모드를 설정합니다. 기본 모드는 RADIANS(부채각) 입니다."
+ "p5의 현재 모드를 설정합니다. 기본 모드는 RADIANS(원주호) 입니다."
],
"params": {
"mode": "상수: RADIANS 또는 DEGREES 중 하나"
- },
- "returns": ""
+ }
},
"textAlign": {
"description": [
- "텍스트 그리기에 대한 현재 정렬을 설정합니다. horizAlign(LEFT, CENTER, 또는 RIGHT)와 vertAlign(TOP, BOTTOM, CENTER, 또는 BASELINE)이라는 2개의 인수를 받습니다. 매개변수 horizAlign은 text() 함수의 x값을, 매개변수 vertAlign은 y값을 참조합니다. 따라서, textAlign(LEFT)는 텍스트의 왼쪽 가장자리를 text()에서 지정된 x값에 정렬합니다. textAlign(RIGHT, TOP)은 텍스트의 오른쪽 가장자리를 x값에, 텍스트의 가장자리 위쪽을 y값에 정렬합니다."
+ "텍스트 그리기에 대한 현재 정렬을 설정합니다. horizAlign(LEFT, CENTER, 또는 RIGHT)와 vertAlign(TOP, BOTTOM, CENTER, 또는 BASELINE)이라는 2개의 인수를 받습니다. 매개변수 horizAlign은 text() 함수의 x값을, 매개변수 vertAlign은 y값을 참조합니다. 따라서, textAlign(LEFT)는 텍스트의 왼쪽 가장자리를 text()에서 지정된 x값에 정렬합니다. textAlign(RIGHT, TOP)은 텍스트의 오른쪽 가장자리를 x값에, 텍스트의 가장자리 위쪽을 y값에 정렬합니다.",
+ "",
+ ""
],
"params": {
"horizAlign": "상수: 가로 정렬, LEFT, CENTER, 또는 RIGHT 중 하나",
"vertAlign": "상수: 세로 정렬, TOP, BOTTOM, CENTER, 또는 BASELINE 중 하나"
- },
- "returns": ""
+ }
},
"textLeading": {
"description": [
@@ -2974,8 +2612,7 @@
],
"params": {
"leading": "숫자: 픽셀 단위의 행간 간격"
- },
- "returns": ""
+ }
},
"textSize": {
"description": [
@@ -2983,8 +2620,7 @@
],
"params": {
"theSize": "숫자: 픽셀 단위의 폰트 크기"
- },
- "returns": ""
+ }
},
"textStyle": {
"description": [
@@ -2992,17 +2628,16 @@
],
"params": {
"theStyle": "상수: 글꼴 설정, NORMAL, ITALIC, 또는 BOLD 중 하나"
- },
- "returns": ""
+ }
},
"textWidth": {
"description": [
"문자 또는 텍스트 문자열의 너비를 계산하고 반환합니다."
],
+ "returns": "숫자",
"params": {
"theText": "문자열: 측정할 문자열"
- },
- "returns": "숫자"
+ }
},
"textAscent": {
"description": [
@@ -3018,18 +2653,22 @@
},
"loadFont": {
"description": [
- "파일 또는 URL로부터 폰트 파일(.otf, .ttf)을 불러오고, PFont 객체를 반환합니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 폰트의 경로는 스케치상 링크된 HTML 파일을 기준으로 합니다. 브라우저의 내장 보안으로 인해 URL 또는 다른 원격 경로에서 폰트를 불러오는 것이 차단될 수 있습니다. [1번째 예제] preload() 함수 안에 loadJSON() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다."
+ "파일 또는 URL로부터 폰트 파일(.otf, .ttf)을 불러오고, PFont 객체를 반환합니다. 이는 비동기적 메소드로, 스케치상의 다음 코드 줄이 실행되기 전에 함수 실행이 완료되지 않을 수 있습니다. 폰트의 경로는 스케치상 링크된 HTML 파일을 기준으로 합니다. 브라우저의 내장 보안으로 인해 URL 또는 다른 원격 경로에서 폰트를 불러오는 것이 차단될 수 있습니다. [1번째 예제] preload() 함수 안에 loadJSON() 함수를 호출하여, 모든 불러오기 작업이 setup()과 draw() 함수가 호출되기에 앞서 완료되도록 처리합니다. [2번째 예제] preload() 함수 밖의 영역에서 콜백 함수를 2번째 예제와 같이 작성하여 객체를 처리할 수 있습니다.",
+ ""
],
+ "returns": "p5.Font: p5.Font 객체",
"params": {
"path": "문자열: 불러올 파일명 또는 URL",
"callback": "함수: loadFont()가 완료된 이후 실행될 함수 (선택 사항)",
"onError": "함수: 에러 발생시 실행될 함수"
- },
- "returns": "p5.Font: p5.Font 객체"
+ }
},
"text": {
"description": [
- "화면에 텍스트를 그립니다. 1번째 매개변수로 지정된 정보를 추가 매개변수로 지정한 화면 위치에 나타냅니다. textFont() 함수로 별도 폰트를 지정하지 않을 경우, 기본 폰트가 사용됩니다. textSize()로 별도의 글자 크기를 지정하지 않을 경우, 기본 글자 크기가 사용됩니다. fill() 함수로 텍스트의 색상을 변경할 수 있습니다. stroke() 및 strokeWeight() 함수로 텍스트의 윤곽선을 변경할 수 있습니다. 텍스트는 textAlign() 함수의 매개변수에 따라 좌표를 기준으로 왼쪽, 오른쪽, 그리고 중심에서 텍스트를 그릴 수 있습니다. 매개변수 x2와 y2는 화면에 나타날 텍스트 상자의 영역을 정의하며, 문자열 데이터에만 사용됩니다. 이 매개변수들은 현재 rectMode() 설정에 따라 해석됩니다. 사용자가 지정한 텍스트 상자 크기에 맞지 않는 텍스트는 그려지지 않습니다. 별도의 x2와 y2를 지정하지 않을 경우, 기준선 정렬이 기본값으로 제공됩니다. 즉, 텍스트가 x와 y로부터 위쪽으로 그려집니다. WebGL: 개방형(opentype)/트루 타입(truetype) 폰트만 지원됩니다. 반드시 loadFont() 메소드를 사용하여 폰트를 불러와야 합니다. (위의 예제 참고) stroke()는 현재 WebGL 모드에서 아무런 효과를 갖지 않습니다."
+ "화면에 텍스트를 그립니다. 1번째 매개변수로 지정된 정보를 추가 매개변수로 지정한 화면 위치에 나타냅니다. textFont() 함수로 별도 폰트를 지정하지 않을 경우, 기본 폰트가 사용됩니다. textSize()로 별도의 글자 크기를 지정하지 않을 경우, 기본 글자 크기가 사용됩니다. fill() 함수로 텍스트의 색상을 변경할 수 있습니다. stroke() 및 strokeWeight() 함수로 텍스트의 윤곽선을 변경할 수 있습니다. 텍스트는 textAlign() 함수의 매개변수에 따라 좌표를 기준으로 왼쪽, 오른쪽, 그리고 중심에서 텍스트를 그릴 수 있습니다. 매개변수 x2와 y2는 화면에 나타날 텍스트 상자의 영역을 정의하며, 문자열 데이터에만 사용됩니다. 이 매개변수들은 현재 rectMode() 설정에 따라 해석됩니다. 사용자가 지정한 텍스트 상자 크기에 맞지 않는 텍스트는 그려지지 않습니다. 별도의 x2와 y2를 지정하지 않을 경우, 기준선 정렬이 기본값으로 제공됩니다. 즉, 텍스트가 x와 y로부터 위쪽으로 그려집니다. WebGL: 개방형(opentype)/트루 타입(truetype) 폰트만 지원됩니다. 반드시 loadFont() 메소드를 사용하여 폰트를 불러와야 합니다. (위의 예제 참고) stroke()는 현재 WebGL 모드에서 아무런 효과를 갖지 않습니다.",
+ "",
+ "",
+ ""
],
"params": {
"str": "문자열|객체|배열|숫자|불리언: 표시할 영숫자 기호",
@@ -3037,679 +2676,4754 @@
"y": "숫자: 텍스트의 y좌표값",
"x2": "숫자: 기본값은 텍스트 상자의 너비, 자세한 사항은 rectMode()를 확인하세요. (선택 사항)",
"y2": "숫자: 기본값은 텍스트 상자의 높이, 자세한 사항은 rectMode()를 확인하세요. (선택 사항)"
- },
- "returns": ""
+ }
},
"textFont": {
"description": [
- "text() 함수로 그릴 현재 폰트를 설정합니다. WebGL: loadFont()를 통해 불러온 폰트만 지원합니다."
+ "text() 함수로 그릴 현재 폰트를 설정합니다. WebGL: loadFont()를 통해 불러온 폰트만 지원합니다.",
+ ""
],
+ "returns": "현재 폰트",
"params": {
"font": "객체|문자열: loadFont()로 불러온 폰트 또는 웹 안전 폰트 (일반적으로 모든 시스템에서 사용가능한 폰트)를 나타내는 문자열",
"size": "숫자: 사용할 폰트 크기 (선택 사항)"
- },
- "returns": "현재 폰트"
+ }
},
- "orbitControl": {
+ "append": {
"description": [
- "마우스 또는 트랙 패드로 3D 스케치 주위를 움직일 수 있습니다. 마우스 왼쪽 버튼을 클릭 후 드래그하면 스케치 중심을 기준으로 카메라 위치가 회전합니다. 마우스 오른쪽 버튼을 클릭 후 드래그하면 회전없이 카메라 위치가 이동합니다. 마우스 휠(스크롤)을 사용하면 카메라 위치가 스케치와 더 가까워지거나 멀어집니다. 함수 호출시, x축과 y축상의 마우스 이동에 대한 민감도를 매개변수를 사용할 수 있습니다. 별도로 지정한 매개변수없이 함수를 호출하면 orbitControl(1,1)과 동일한 효과를 갖습니다. 민감도 매개변수를 음수로 입력하면 각 축의 이동 방향을 지정할 수 있습니다."
+ "사용 불가: append()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.push(value) 를 대신 사용하세요. 배열의 끝에 값을 추가하여, 그 길이를 1씩 확장합니다. Array.push()에 매핑합니다."
],
+ "returns": "추가된 배열",
"params": {
- "sensitivityX": "숫자: X축상의 마우스 이동에 대한 민감도 (선택 사항)",
- "sensitivityY": "숫자: Y축상의 마우스 이동에 대한 민감도 (선택 사항)",
- "sensitivityZ": "숫자: Z축상의 마우스 이동에 대한 민감도 (선택 사항)"
+ "array": "배열: 추가할 배열",
+ "value": "전부: 배열에 추가될 모든 것"
}
},
- "debugMode": {
+ "arrayCopy": {
"description": [
- "debugMode()는 3D 스케치 상의 '지면'을 표현하는 그리드와 더불어, +X, +Y, +Z 방향을 나타내는 좌표축 아이콘을 추가 시각화합니다. 별도로 지정한 매개변수없이 함수를 호출하면, 기본 그리드와 좌표축 아이콘이 생성됩니다. 또는, 위의 예제처럼 별도의 매개변수를 지정하여 그리드/좌표축의 위치와 크기를 조정할 수 있습니다. 그리드는 가장 마지막으로 사용된 윤곽선(stroke)의 색과 두께로 그려집니다. 선에 대한 매개변수를 지정하려면, draw() 반복문이 끝나기 직전에 stroke() 함수와 strokeWeight() 호출하면 됩니다. 기본적으로, 그리드는 XZ 평면을 따라 스케치의 원점(0,0,0)을 통과하며, 좌표축 아이콘은 원점에서 상쇄(offset)됩니다. 그리드 및 좌표축 아이콘 모두 현재 캔버스 크기에 따라 그 크기가 조정됩니다. 그리드는 기본 카메라 뷰와 평행하게 실행됩니다. 따라서, 그리드를 전체적으로 조망하려면, debugMode와 orbitControl을 함께 사용하면 됩니다."
+ "사용 불가: copyArray()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. 배열(또는 그 일부)을 다른 배열에 복사합니다. src 배열이 dst 배열에 복사되며, srcPosition으로 지정된 위치에서 시작하여 dstPosition으로 지정된 위치를 향합니다. 복사할 요소의 개수는 배열의 길이로 결정됩니다. 값을 복사하면 대상 배열의 기존값을 덮어씁니다. 덮어쓰기없이 값을 추가하려면 concat()을 사용하세요. ",
+ "",
+ ""
],
"params": {
- "gridSize": "상수: GRID 또는 AXES 중 하나",
- "gridDivisions": "숫자: 그리드 한 변의 크기 (선택 사항)",
- "gridXOff": "숫자: 그리드 분할 개수 (선택 사항)",
- "gridYOff": "숫자: 원점(0,0,0)으로부터의 X축 상쇄값 (선택 사항)",
- "gridZOff": "숫자: 원점(0,0,0)으로부터의 Y축 상쇄값 (선택 사항)",
- "axesSize": "숫자: 원점(0,0,0)으로부터의 Z축 상쇄값 (선택 사항)",
- "axesXOff": "숫자: 좌표축 아이콘 크기 (선택 사항)",
- "axesYOff": "숫자: (선택 사항)",
- "axesZOff": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-10": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-11": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-12": "숫자: (선택 사항)",
- "UNKNOWN-PARAM-13": "숫자: (선택 사항)"
+ "src": "",
+ "srcPosition": "",
+ "dst": "",
+ "dstPosition": "",
+ "length": ""
}
},
- "noDebugMode": {
- "description": [
- "3D 스케치의 debugMode() 실행을 종료합니다."
- ]
- },
- "ambientLight": {
+ "concat": {
"description": [
- "색상을 갖는 앰비언트 라이트를 생성합니다. 앰비언트 라이트는 별도의 광원없이 캔버스의 모든 영역에서 나오는 조명을 뜻합니다."
+ "사용 불가: concat()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. arr1.concat(arr2) 를 대신 사용하세요. "
],
+ "returns": "Array: concatenated array",
"params": {
- "v1": "숫자: 현재 색상 범위에 따른 빨강값 또는 색조값",
- "v2": "현재 색상 범위에 따른 초록값 또는 채도값",
- "v3": "현재 색상 범위에 따른 파랑값 또는 밝기값",
- "alpha": "숫자: 알파값 (선택 사항)",
- "UNKNOWN-PARAM-5": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-6": "숫자: 회색값",
- "UNKNOWN-PARAM-7": "숫자 배열[]: 색상의 R, G, B & 알파값 성분을 포함한 배열",
- "UNKNOWN-PARAM-8": "p5.Color: 앰비언트 라이트 색상"
- },
- "returns": ""
+ "a": "",
+ "b": ""
+ }
},
- "specularColor": {
+ "reverse": {
"description": [
- "스페큘러 재질(material)과 조명에 쓰이는 스페큘러 하이라이트 색상을 설정합니다. 이 메소드를 specularMaterial() 및 shininess() 함수에 결합하여 스페큘러 하이라이트를 설정할 수 있습니다. 기본값은 흰색, 즉 (255,25,255)이며, specularMaterial() 함수 이전에 메소드가 호출되지 않을 경우 사용됩니다. 참고: specularColor는 프로세싱 함수 lightSpecular 와 동읠한 효과를 갖습니다."
+ "사용 불가: reverse()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다.array.reverse() 를 대신 사용하세요."
],
+ "returns": "Array: the reversed list",
"params": {
- "v1": "숫자: 현재 색상 범위에 따른 빨강값 또는 색조값",
- "v2": "숫자: 현재 색상 범위에 따른 초록값 또는 채도값",
- "v3": "숫자: 현재 색상 범위에 따른 파랑값 또는 밝기값",
- "UNKNOWN-PARAM-4": "문자열: 색상 문자열",
- "UNKNOWN-PARAM-5": "숫자: 회색값",
- "UNKNOWN-PARAM-6": "숫자 배열[]: 색상의 R, G, B & 알파값 성분을 포함한 배열",
- "UNKNOWN-PARAM-7": "p5.Color: 앰비언트 라이트 색상"
+ "list": ""
}
},
- "directionalLight": {
+ "shorten": {
"description": [
- "색상과 방향을 갖는 디렉셔널 라이트를 생성합니다. 한 번에 최대 5개의 directionalLight를 활성화할 수 있습니다."
+ "사용 불가: shorten()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.pop() 를 대신 사용하세요. "
],
+ "returns": "Array: shortened Array",
"params": {
- "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값",
- "v3": "숫자: 파랑값 또는 밝기값",
- "x": "p5.Vector:조명의 방향",
- "y": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값",
- "z": "숫자: x축 방향",
- "UNKNOWN-PARAM-7": "숫자: y축 방향",
- "UNKNOWN-PARAM-8": "숫자: z축 방향"
- },
- "returns": ""
+ "list": ""
+ }
},
- "pointLight": {
+ "shuffle": {
"description": [
- "색상과 조명 위치를 갖는 포인트 라이트를 생성합니다. 한 번에 최대 5개의 pointlLight를 활성화할 수 있습니다."
+ "사용 불가: shuffle()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. 자바스크립트의 배열 섞기 를 대신 사용하세요.피셔-예이츠(Fisher-Yates) 셔플 알고리즘 을 구현합니다."
],
+ "returns": "Array: shuffled Array",
"params": {
- "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값",
- "v3": "숫자: 파랑값 또는 밝기값",
- "x": "숫자: x축 위치",
- "y": "숫자: y축 위치",
- "z": "숫자: z축 위치",
- "UNKNOWN-PARAM-7": "p5.Vector: 조명의 위치",
- "UNKNOWN-PARAM-8": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
- },
- "returns": ""
- },
- "lights": {
- "description": [
- "기본 앰비언트 라이트와 디렉셔널 라이트를 설정합니다. 기본값은 ambientLight(128, 128, 128)과 directionalLight(128, 128, 128, 0, 0, -1)입니다. 반복 프로그램에서 조명의 지속성을 확보하려면 조명을 draw() 안에 작성해야 합니다. 반복 프로그램의 setup() 안에 작성할 경우, 반복문의 최초 실행시에만 조명 효과가 발생합니다."
- ]
+ "array": "",
+ "bool": ""
+ }
},
- "lightFalloff": {
+ "sort": {
"description": [
- "포인트 라이트의 감소율을 설정합니다. 코드 내에서 생성된 요소에만 영향을 줍니다. 기본값은 lightFalloff (1.0, 0.0, 0.0)이며, 사용자가 지정한 매개변수를 다음의 감소량 계산 방정식에서 사용할 수 있습니다: d = 조명 위치에서 꼭지점 위치까지의 거리 감소량 = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)"
+ "사용 불가: sort()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.sort() 를 대신 사용하세요. "
],
+ "returns": "Array: the sorted list",
"params": {
- "constant": "숫자: 감소량 결정을 위한 상수값",
- "linear": "선형 숫자: 감소량 결정을 위한 선형값",
- "quadratic": "2차 숫자: 감소량 결정을 위한 2차값"
+ "list": "",
+ "count": ""
}
},
- "spotLight": {
+ "splice": {
"description": [
- "사용자가 지정한 색상, 위치, 조명 방향, 각도, 농도로 스포트라이트를 생성합니다. 여기서의 '각도'는 스포트라이트 원뿔의 개구부에 대한 각도를 의미합니다. 농도는 빛을 중앙으로 집중시키는 값을 뜻합니다. 각도와 농도는 모두 선택 사항이나, 농도 지정을 위해 각도를 반드시 지정해야합니다. 한 번에 최대 5개의 spotLight를 활성화할 수 있습니다."
+ "사용 불가: splice()는 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.splice() 를 대신 사용하세요. "
],
+ "returns": "Array: the list",
"params": {
- "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값",
- "v3": "숫자: 파랑값 또는 밝기값",
- "x": "숫자: x축 위치",
- "y": "숫자: y축 위치",
- "z": "숫자: z축 위치",
- "rx": "숫자: 조명의 x축 방향",
- "ry": "숫자: 조명의 y축 방향",
- "rz": "숫자: 조명의 z축 방향",
- "angle": "숫자: 각도 매개변수. 기본값은 PI/3 (선택 사항)",
- "conc": "숫자: 농도 매개변수. 기본값은 100 (선택 사항)",
- "UNKNOWN-PARAM-12": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값",
- "UNKNOWN-PARAM-13": "p5.Vector: 조명의 위치",
- "UNKNOWN-PARAM-14": "p5.Vector: 조명의 방향"
+ "list": "",
+ "value": "",
+ "position": ""
}
},
- "noLights": {
- "description": [
- "noLights() 함수 호출 이후에 렌더링된 재질(material)들로부터 모든 조명을 제거합니다. 모든 후속 메소드에 영향을 줍니다. noLights() 이후에 작성된 조명 메소드를 호출할 경우, 스케치상 조명이 다시 활성화됩니다. "
- ]
- },
- "loadShader": {
+ "subset": {
"description": [
- "버텍스 및 프래그먼트 셰이더 경로로부터 커스텀 셰이더를 불러옵니다. 셰이더 파일은 배경 화면과 비동기적으로 로드되므로, 이 메소드는 preload()에서 사용해야 합니다. 현재 3가지 유형의 셰이더를 지원합니다. p5는 셰이더상 정의된 매개변수 이름과 일치하는 버텍스, 법선(normal), 색상, 조명 속성을 자동으로 제공합니다."
+ "사용 불가:subset()은 더이상 사용 불가하며, p5의 추후 버전에서 제거됩니다. array.slice() 를 대신 사용하세요. "
],
+ "returns": "Array: Array of extracted elements",
"params": {
- "vertFilename": "문자열: 버텍스 셰이더 소스 코드 파일의 경로",
- "fragFilename": "문자열: 프래그먼트 셰이더의 소스 코드 파일 경로",
- "callback": "함수: 문자열: 프래그먼트 셰이더의 소스 코드 파일 경로",
- "errorCallback": "함수: loadShader()가 완료된 이후 실행될 함수. 성공시, 셰이더 객체를 1번재 인수로 전달 (선택 사항)",
- "UNKNOWN-PARAM-5": "함수: loadShader 내에서 에러 발생시 실행될 함수. 에러 발생시, 에러를 1번째 인수로 전달 (선택 사항)"
- },
- "returns": "p5.Shader: 지정된 버텍스 및 프래그먼트 셰이더 파일로부터 생성된 셰이더 객체"
+ "list": "",
+ "start": "",
+ "count": ""
+ }
},
- "createShader": {
+ "float": {
"description": [
+ "문자열을 실수(float), 즉 부동 소수점 숫자형 표현으로 변환합니다. 이 때, 문자열의 구문은 숫자 형식과 유사해야 합니다. 그렇지 않으면 NaN(숫자 아님)이 반환됩니다. 예컨대, float (\"1234.56\")은 1234.56으로 연산되지만, float (\"giraffe\")는 NaN을 반환합니다. 전달된 배열과 길이가 동일한 실수 배열이 반환됩니다.",
""
],
+ "returns": "숫자: 문자열의 부동 소수점 숫자형 표현",
"params": {
- "vertSrc": "문자열: 버텍스 셰이더의 소스 코드",
- "fragSrc": "문자열: 프래그먼트 셰이더의 소스 코드"
- },
- "returns": "p5.Shader: 지정된 버텍스 및 프래그먼트 셰이더 파일로부터 생성된 셰이더 객체"
+ "str": "문자열: 구문 분석할 실수 문자열"
+ }
},
- "shader": {
+ "int": {
"description": [
- "shader() 함수를 통해 WebGL 모드상의 도형을 커스텀 셰이더로 채울 수 있습니다. loadShader()로 버텍스 및 프래그먼트 셰이더를 불러와 사용자 자체적으로 셰이더를 생성할 수 있습니다."
+ "불리언(boolean), 문자열(string), 부동소수점 숫자(float)를 정수(int)형 표현으로 변환합니다. 전달된 배열과 길이가 동일한 정수 배열이 반환됩니다."
],
+ "returns": "숫자: 값의 정수형 표현",
"params": {
- "s": "p5.Shader: 도형 렌더링에 사용하기 원하는 p5.Shader (선택 사항)"
+ "n": "문자열|불리언|숫자: 구문 분석할 값",
+ "radix": "정수: 기수로 변환 (기본값: 10) (선택 사항)",
+ "ns": "배열: 구문 분석할 값"
}
},
- "resetShader": {
+ "str": {
"description": [
- "이 함수는 WebGL 모드 기본 셰이더를 복원합니다. resetShader() 이후에 실행되는 코드는 그 이전에 정의된 셰이더의 영향을 받지 않습니다. 반드시 shader() 함수 이후에 실행되어야 합니다. "
- ]
+ "불리언(boolean), 문자열(string), 또는 숫자를 문자열 표현으로 변환합니다. 전달된 배열과 길이가 동일한 문자열 배열이 반환됩니다."
+ ],
+ "returns": "숫자: 값의 문자열 표현",
+ "params": {
+ "n": "문자열|불리언|숫자: 구문 분석할 값"
+ }
},
- "normalMaterial": {
+ "byte": {
"description": [
- "도형의 기본 재질(material)은 조명의 영향을 받지 않습니다. 반사성을 갖지 않으며, 종종 디버깅을 위한 자리표시자(placeholder)로 사용됩니다. X축을 향한 표면은 빨강, Y축을 향한 표면은 초록, Z축을 향한 표면은 파랑이 됩니다. 이 예제 에서 사용가능한 모든 재질들을 확인할 수 있습니다."
+ "숫자, 숫자의 문자열 표현, 또는 불리언을 바이트 표현으로 변환합니다. 바이트는 -128과 127 사이의 정수이므로, 이 범위를 벗어난 값은 상응하는 바이트 표현에 래핑됩니다. 숫자, 문자열, 또는 불리언 값의 배열을 전달하면, 동일한 길이의 바이트 배열이 반환됩니다."
],
- "returns": ""
+ "returns": "값의 바이트형 표현",
+ "params": {
+ "n": "문자열|불리언|숫자: 구문 분석할 값",
+ "ns": "배열: 구문 분석할 값"
+ }
},
- "texture": {
+ "char": {
"description": [
- "도형의 텍스처. 예제 에서 사용가능한 다른 재질들을 확인하세요."
+ "숫자나 문자열을 단일 문자형(character) 문자열 표현으로 변환합니다. 사용자가 별도 지정한 문자열 매개변수의 경우, 먼저 정수로서 구문 분석된 후 단일 문자형 문자열로 변환됩니다. 숫자 또는 문자열 값의 배열을 전달하면, 동일한 길이의 단일 문자형 문자열이 반환됩니다."
],
+ "returns": "값의 문자열 표현",
"params": {
- "tex": "p5.Image|p5.MediaElement|p5.Graphics: 텍스처로 렌더링할 2차원 그래픽"
- },
- "returns": ""
+ "n": "문자열|숫자: 구문 분석할 값",
+ "ns": "배열: 구문 분석할 값"
+ }
},
- "textureMode": {
+ "unchar": {
"description": [
- "텍스처 매핑을 위한 좌표 공간을 설정합니다. 기본 모드는 IMAGE로, 이미지의 실제 좌표를 나타냅니다. NORMAL은 0부터 1 사이의 정규화된 값의 공간을 나타냅니다. 이 함수는 WebGL 모드에서만 작동합니다. 예를 들어, IMAGE 모드에서 100 x 200 픽셀 이미지를 사용할 경우, 이미지를 사각면(quad)의 전체 크기에 매핑하기 위해 점 (0,0) (100, 0) (100,200) (0,200)이 필요합니다. 동일한 매핑을 NORMAL 모드에서 할 경우 (0,0) (1,0) (1,1) (0,1)입니다."
+ "단일 문자형 문자열 표현을 정수로 변환합니다. 단일 문자열 문자열 값의 배열을 전달하면, 동일한 길이의 정수 배열이 반환됩니다."
],
+ "returns": "값의 정수형 표현",
"params": {
- "mode": "상수: IMAGE 또는 NORMAL 중 하나"
- },
- "returns": ""
+ "n": "문자열: 구문 분석할 값",
+ "ns": "배열: 구문 분석할 값"
+ }
},
- "textureWrap": {
+ "hex": {
"description": [
- "전역 텍스처 래핑 모드를 설정합니다. UV가 0부터 1까지의 범위를 벗어날 때의 텍스처 동작을 제어합니다. CLAMP, REPEAT, MIRROR의 3가지 옵션이 있습니다. CLAMP는 텍스처의 가장자리 픽셀 경계를 확장합니다. REPEAT는 경계에 도달할 때까지 텍스처가 반복적으로 타일링되도록 합니다. MIRROR는 REPEAT와 유사하지만, 매 타일마다 텍스처를 뒤집는다는 점에서 다릅니다. REPEAT & MIRROR는 텍스처의 크기가 2의 배수 단위(128, 256, 512, 1024 등)인 경우에 한해서만 사용 가능합니다. 이 메소드는 그 이후에 작성된 textureWrap이 호출되기 전까지의 스케치 위 모든 텍스처에 영향을 줍니다. 1개의 인수만 지정할 경우, 해당 인수가 수직 및 수평축 모두에 적용됩니다."
+ "숫자를 16진수 문자열로 변환합니다. 전달된 2번째 매개변수는 16진수 표기법으로 생성할 문자 개수를 설정합니다. 배열이 전달되면, 동일한 길이를 갖는 16진수 문자열을 반환합니다."
],
+ "returns": "값의 16진수 문자열 표현",
"params": {
- "wrapX": "상수: CLAMP, REPEAT, 또는 MIRROR 중 하나",
- "wrapY": "상수: CLAMP, REPEAT, 또는 MIRROR 중 하나 (선택 사항)"
- },
- "returns": ""
+ "n": "숫자: 구문 분석할 값",
+ "digits": "숫자: (선택 사항)",
+ "ns": "숫자 배열[]: 구문 분석할 숫자 값들 배열"
+ }
},
- "ambientMaterial": {
+ "unhex": {
"description": [
- "지정된 색상의 도형에 입힐 앰비언트 재질입니다. 앰비언트 재질은 앰비언트 라이트 아래에서 객체가 반사하는 색상을 정의합니다. 예를 들어, 객체의 앰비언트 재질이 순수 빨강이고 앰비언트 라이트가 순수 초록인 경우, 객체는 빛을 반사하지 않습니다. 사용가능한 모든 재질 을 확인하세요."
+ "16진수 문자열 표현을 정수로 변환합니다. 16진수 문자열 값의 배열을 전달하면, 동일한 길이의 정수 배열이 반환됩니다."
],
+ "returns": "16진수 값의 정수형 표현",
"params": {
- "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
+ "n": "문자열: 구문 분석할 값",
+ "ns": "배열: 구문 분석할 값"
+ }
+ },
+ "join": {
+ "description": [
+ "문자열 배열을 결합하여 하나의 문자열을 만듭니다. 각 문자열은 사용자가 구분자 매개변수로 지정한 문자를 통해 구분됩니다. 정수(int) 또는 실수(float) 배열을 결합하려면, 먼저 nf() 또는 nfs()를 통해 문자열로 변환되어야 합니다."
+ ],
+ "returns": "문자열: 결합된 문자열",
+ "params": {
+ "list": "배열: 결합할 문자열 배열",
+ "separator": "문자열: 각 항목 사이에 놓일 문자열"
+ }
+ },
+ "match": {
+ "description": [
+ "이 함수는 정규 표현식을 텍스트로 적용하고, 매치하는 그룹(괄호 안 요소들) 리스트를 문자열 배열로 반환합니다. 매치하는 내용이 없는 경우, null을 반환합니다. 정규 표현식에 그룹이 지정되지 않지만 시퀀스가 일치하는 경우, 길이가 1인 배열(일치하는 텍스트가 배열의 첫번째 요소인 배열)을 반환합니다. match() 함수 사용시, 결과값이 null인지를 잘 확인하세요. 결과가 null이면 시퀀스도 일치하지 않는다는 뜻입니다. 시퀀스가 일치하는 경우, 배열이 반환됩니다. 그룹(괄호들로 지정)이 정규식 표현인 경우, 각각의 내용들이 배열로 반환됩니다. 매치하는 정규식 표현의 요소[0]는 모든 매칭 문자열을 반환하는데, 이 경우 매칭 그룹은 요소[1](첫 번째 그룹은 [1], 두번째 그룹은 [2])에서 시작합니다.",
+ "",
+ ""
+ ],
+ "returns": "검색된 문자열들의 배열",
+ "params": {
+ "str": "문자열: 검색할 문자열",
+ "regexp": "문자열: 매칭에 사용될 정규식 표현"
+ }
+ },
+ "matchAll": {
+ "description": [
+ "이 함수는 정규 표현식을 텍스트로 적용하고, 매치하는 그룹(괄호 안 요소들)의 리스트를 2차원 문자열 배열로 반환합니다. 매치하는 내용이 없는 경우, null을 반환합니다. 정규 표현식에 그룹이 지정되지 않지만 시퀀스가 일치하는 경우, 2차원 배열이 반환되지만 2번째 차원의 길이는 1이 됩니다. matchAll() 함수 사용시, 결과값이 null인지를 잘 확인하세요. 결과가 null이면 시퀀스도 일치하지 않는다는 뜻입니다. 시퀀스가 일치하는 경우, 2D 배열이 반환됩니다. 그룹(괄호들로 지정)이 정규식 표현인 경우, 각각의 내용들이 배열로 반환됩니다. 카운터 변수 i가 있는 반복문을 가정할 때, 매칭되는 정규식의 [i][0] 요소는 모든 매칭 문자열을 반환하고, 매칭 그룹은 [i][1](첫 번째 그룹은 [i][1], 두번째 그룹은 [i][2], ...)에서 시작합니다.",
+ "",
+ ""
+ ],
+ "returns": "검색된 문자열들의 2D 배열",
+ "params": {
+ "str": "문자열: 검색할 문자열",
+ "regexp": "문자열: 매칭에 사용될 정규식 표현"
+ }
+ },
+ "nf": {
+ "description": [
+ "숫자를 문자열로 형식화하는 기능으로, 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수로는 각각 자릿수(digit), 소수점 기준 왼쪽 자릿수(left), 소수점 기준 오른쪽 자릿수(right)를 지정할 수 있으며, 이 매개변수 값들은 항상 양의 정수여야 합니다. 참고: left와 right 매개변수 사용시, 그 값이 현재 숫자의 자릿수 길이보다 클 경우 자릿수를 맞추기 위해 매개변수에 0이 붙는 점에 유의하세요. 예를 들어, 현재 숫자가 123.2이고 전달된 left 매개변수가 4인 경우, 그 길이가 num의 정수 부분인 123의 길이(즉, 3)보다 큽니다. 이 경우, 0123.2가 반환됩니다. right 매개변수의 경우에도 마찬가지로 값이 3인 정수 123.200이 반환됩니다."
+ ],
+ "returns": "문자열: 형식화된 문자열",
+ "params": {
+ "num": "숫자|문자열: 형식화할 숫자",
+ "left": "정수|문자열: 소수점 기준 왼쪽의 자릿수(선택 사항)",
+ "right": "정수|문자열: 소수점 기준 오른쪽의 자릿수(선택 사항)",
+ "nums": "배열: 형식화할 숫자들"
+ }
+ },
+ "nfc": {
+ "description": [
+ "숫자를 문자열로 형식화하고 1000을 단위로 표시하기 위해 쉼표를 배치하는 기능입니다. 크게 두 가지 버전이 제공되는데, 하나는 정수(int)를 형식화하는 것이고, 다른 하나는 정수 배열을 형식화합니다. 매개변수의 값들은 항상 양의 정수여야 합니다."
+ ],
+ "returns": "문자열: 형식화된 문자열",
+ "params": {
+ "num": "숫자|문자열: 형식화할 숫자",
+ "right": "정수|문자열: 소수점 기준 오른쪽의 자릿수(선택 사항)",
+ "nums": "배열: 형식화할 숫자들"
+ }
+ },
+ "nfp": {
+ "description": [
+ "숫자를 문자열로 형식화하는 기능입니다. nf()와 유사하나, 양수 앞에 '+'를, 음수 앞에 '-' 기호를 추가합니다. 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수 중, 소수점 기준 왼쪽 자릿수(left)와 소수점 기준 오른쪽 자릿수(right)의 값은 항상 양의 정수여야 합니다."
+ ],
+ "returns": "문자열: 형식화된 문자열",
+ "params": {
+ "num": "숫자: 형식화할 숫자",
+ "left": "정수: 소수점 기준 왼쪽의 자릿수(선택 사항)",
+ "right": "정수: 소수점 기준 오른쪽의 자릿수(선택 사항)",
+ "nums": "숫자 배열[]: 형식화할 숫자들"
+ }
+ },
+ "nfs": {
+ "description": [
+ "숫자를 문자열로 형식화하는 기능입니다. nf()와 유사하나, '-' 기호가 붙은 음수와 정렬할 경우를 위해 '_(공백)' 기호를 양수 앞에 추가합니다. nfs()는 주로 음수가 아닌 숫자의 자릿수에 음수를 맞출 때 사용됩니다. (명확한 이해를 위해 예제를 참고하세요.) 실수(float) 형식과 정수(int) 형식의 두 가지 버전이 있습니다. 매개변수 중, 자릿수(digit), 소수점 기준 왼쪽 자릿수(left)와 소수점 기준 오른쪽 자릿수(right)의 값은 항상 양의 정수여야 합니다. (IMP): 정렬 결과는 사용자의 타입페이스에 따라 달라집니다. 참고: left와 right 매개변수 사용시, 그 값이 현재 숫자의 자릿수 길이보다 클 경우 자릿수를 맞추기 위해 매개변수에 0이 붙는 점에 유의하세요. 예를 들어, 현재 숫자가 123.2이고 전달된 left 매개변수가 4인 경우, 그 길이가 num의 정수 부분인 123의 길이(즉, 3)보다 큽니다. 이 경우, 0123.2가 반환됩니다. right 매개변수의 경우에도 마찬가지로 값이 3인 정수 123.200이 반환됩니다."
+ ],
+ "returns": "문자열: 형식화된 문자열",
+ "params": {
+ "num": "숫자: 형식화할 숫자",
+ "left": "정수: 소수점 기준 왼쪽의 자릿수(선택 사항)",
+ "right": "정수: 소수점 기준 오른쪽의 자릿수(선택 사항)",
+ "nums": "배열: 형식화할 숫자들"
+ }
+ },
+ "split": {
+ "description": [
+ "split() 함수는 String.split()에 매핑되며, 구분 기호를 사용하여 문자 또는 문자열을 분할합니다. 분리 문자(delim) 매개변수는 분할 경계를 나타낼 기호를 지정합니다. 각 조각들을 포함한 문자열 배열이 반환됩니다. splitTokens() 역시 비슷하게 작동하나, 특정 문자나 시퀀스 대신 여러 개의 분리 문자를 분할한다는 점에서 다릅니다.",
+ ""
+ ],
+ "returns": "문자열 배열[]: 문자열들의 배열",
+ "params": {
+ "value": "문자열: 분할될 문자열",
+ "delim": "문자열: 데이터 분할에 쓰이는 문자열"
+ }
+ },
+ "splitTokens": {
+ "description": [
+ "splitTokens() 함수는 일명 '토큰(token)'이라 불리는, 하나 이상의 분리 문자를 사용하여 문자열을 분할합니다. 분리 문자(delim) 매개변수를 지정하지 않는 경우, 공백 문자를 사용하여 분할합니다. 공백 문자는 탭(\\t), 줄바꾸기(\\n), 캐리지 반환(CR: Carriage Return)(\\r), 폼 피드(FF: Form Feed)(\\f), 그리고 공백을 포함합니다.",
+ ""
+ ],
+ "returns": "문자열 배열[]:문자열들의 배열",
+ "params": {
+ "value": "문자열: 분할될 문자열",
+ "delim": "문자열: 데이터 분할에 쓰이는 문자열"
+ }
+ },
+ "trim": {
+ "description": [
+ "문자열 앞뒤의 공백 문자를 제거합니다. 공백, 캐리지 반환(CR: Carriage Return), 탭과 같은 표준 공백 문자 외에, 유니코드 'nbsp' 문자도 제거합니다."
+ ],
+ "returns": "문자열: 트리밍된 문자열",
+ "params": {
+ "str": "문자열: 트리밍될 문자열",
+ "strs": "배열: 트리밍될 문자열 배열"
+ }
+ },
+ "day": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. day() 함수는 현재 날짜를 1부터 31에 해당하는 값으로 반환합니다."
+ ],
+ "returns": "정수: 현재 날짜"
+ },
+ "hour": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. hour() 함수는 현재 시를 0부터 23에 해당하는 값으로 반환합니다."
+ ],
+ "returns": "정수: 현재 시"
+ },
+ "minute": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. minute() 함수는 현재 분을 0부터 59에 해당하는 값으로 반환합니다."
+ ],
+ "returns": "정수: 현재 분"
+ },
+ "millis": {
+ "description": [
+ "스케치의 시작(즉, setup() 함수 호출 시점)이후의 시간을 밀리 세컨드(1/1000초)로 반환합니다. 주로 타이밍 이벤트나 애니메이션 시퀀스에 사용됩니다."
+ ],
+ "returns": "숫자: 스케치의 시작 이후의 밀리 세컨드 단위 시간"
+ },
+ "month": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. month() 함수는 현재 월을 1부터 12에 해당하는 값으로 반환합니다."
+ ],
+ "returns": "정수: 현재 월"
+ },
+ "second": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. second() 함수는 현재 초를 0부터 59에 해당하는 값으로 반환합니다."
+ ],
+ "returns": "정수: 현재 초"
+ },
+ "year": {
+ "description": [
+ "p5.js는 컴퓨터의 시계와도 통신합니다. second() 함수는 현재 년도를 정수로 반환합니다. (2014, 2015, 2016, 등)"
+ ],
+ "returns": "정수: 현재 년도"
+ },
+ "plane": {
+ "description": [
+ "사용자가 지정한 너비와 높이로 평면을 그립니다."
+ ],
+ "params": {
+ "width": "숫자: 평면의 너비값 (선택 사항)",
+ "height": "숫자: 평면의 높이값 (선택 사항)",
+ "detailX": "정수: x-차원상의 삼각 세분면 개수 (선택 사항)",
+ "detailY": "정수: y-차원상의 삼각 세분면 개수 (선택 사항)"
+ }
+ },
+ "box": {
+ "description": [
+ "사용자가 지정한 너비, 높이, 깊이로 상자를 그립니다."
+ ],
+ "params": {
+ "width": "숫자: 상자의 너비값 (선택 사항)",
+ "Height": "숫자: 상자의 높이값 (선택 사항)",
+ "depth": "숫자: 상자의 깊이값 (선택 사항)",
+ "detailX": "정수: x-차원상의 삼각 세분면 개수 (선택 사항)",
+ "detailY": "정수: y-차원상의 삼각 세분면 개수 (선택 사항)"
+ }
+ },
+ "sphere": {
+ "description": [
+ "사용자가 지정한 반지름으로 구를 그립니다. detailX와 detailY는 각각 구에 대한 x-차원과 y-차원상의 삼각 세분면 개수를 정합니다. 세분면이 많아질수록 구가 매끄러워집니다. detailX와 detailY 모두 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "radius": "숫자: 원의 반지름 (선택 사항)",
+ "detailX": "정수: x-차원상의 삼각 세분면 (선택 사항)",
+ "detailY": "정수: y-차원상의 삼각 세분면 (선택 사항)"
+ }
+ },
+ "cylinder": {
+ "description": [
+ "사용자가 지정한 반지름과 높이로 원기둥을 그립니다. detailX와 detailY는 각각 원기둥에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원기둥이 매끄러워집니다. detailX와 detailY 모두 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "radius": "숫자: 원기둥의 높이 (선택 사항)",
+ "height": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
+ "detailX": "정수: y-차원상의 세분면 개수, 기본값은 1 (선택 사항)",
+ "detailY": "불리언: 원기둥의 밑바닥면을 그릴 지의 여부 (선택 사항)",
+ "bottomCap": "불리언: 원기둥의 윗면을 그릴 지의 여부 (선택 사항)",
+ "topCap": "Boolean: (Optional) whether to draw the top of the cylinder"
+ }
+ },
+ "cone": {
+ "description": [
+ "사용자가 지정한 반지름과 높이로 원뿔을 그립니다. detailX와 detailY는 각각 원뿔에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원뿔이 매끄러워집니다. detailX의 권장 최대값은 24입니다. 24보다 높은 값을 사용하면 경고창이 뜨거나 브라우저가 느려질 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "radius": "숫자: 밑표면의 반지름 (선택 사항)",
+ "height": "숫자: 원뿔의 높이 (선택 사항)",
+ "detailX": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
+ "detailY": "정수: y-차원상의 세분면 개수, 기본값은 1 (선택 사항)",
+ "cap": "불리언: 원뿔의 밑바닥면을 그릴 지의 여부 (선택 사항)"
+ }
+ },
+ "ellipsoid": {
+ "description": [
+ "사용자가 지정한 반지름으로 타원면을 그립니다. detailX와 detailY는 각각 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 타원면이 매끄러워집니다. 가급적 detailX와 detailY의 값이 150을 넘어가면 브라우저가 중단될 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "radiusx": "숫자: 타원면의 x-반지름값 (선택 사항)",
+ "radiusy": "숫자: 타원면의 y-반지름값 (선택 사항)",
+ "radiusz": "숫자: 타원면의 z-반지름값 (선택 사항)",
+ "detailX": "정수: 세분면의 개수, 기본값은 24(선택 사항)",
+ "detailY": "Integer: (Optional) number of segments, the more segments the smoother geometry default is 16. Avoid detail number above 150, it may crash the browser."
+ }
+ },
+ "torus": {
+ "description": [
+ "사용자가 지정한 반지름과 튜브 반지름으로 원환을 그립니다. detailX와 detailY는 각각 원환에 대한 x-차원과 y-차원상의 세분면 개수를 정합니다. 세분면이 많아질수록 원환이 매끄러워집니다. detailX과 detailY의 권장 최대값은 각각 24와 16입니다. 4나 6처럼 조금 더 적은 값으로 설정하면, 원환이 아닌 새로운 모양을 만들 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "radius": "숫자: 전체 원환의 반지름 (선택 사항)",
+ "tubeRadius": "숫자: 튜브의 반지름 (선택 사항)",
+ "detailX": "정수: x-차원상의 세분면 개수, 기본값은 24 (선택 사항)",
+ "detailY": "정수: y-차원상의 세분면 개수, 기본값은 16 (선택 사항)"
+ }
+ },
+ "orbitControl": {
+ "description": [
+ "마우스 또는 트랙 패드로 3D 스케치 주위를 움직일 수 있습니다. 마우스 왼쪽 버튼을 클릭 후 드래그하면 스케치 중심을 기준으로 카메라 위치가 회전합니다. 마우스 오른쪽 버튼을 클릭 후 드래그하면 회전없이 카메라 위치가 이동합니다. 마우스 휠(스크롤)을 사용하면 카메라 위치가 스케치와 더 가까워지거나 멀어집니다. 함수 호출시, x축과 y축상의 마우스 이동에 대한 민감도를 매개변수를 사용할 수 있습니다. 별도로 지정한 매개변수없이 함수를 호출하면 orbitControl(1,1)과 동일한 효과를 갖습니다. 민감도 매개변수를 음수로 입력하면 각 축의 이동 방향을 지정할 수 있습니다."
+ ],
+ "params": {
+ "sensitivityX": "숫자: X축상의 마우스 이동에 대한 민감도 (선택 사항)",
+ "sensitivityY": "숫자: Y축상의 마우스 이동에 대한 민감도 (선택 사항)",
+ "sensitivityZ": "숫자: Z축상의 마우스 이동에 대한 민감도 (선택 사항)"
+ }
+ },
+ "debugMode": {
+ "description": [
+ "debugMode()는 3D 스케치 상의 '지면'을 표현하는 그리드와 더불어, +X, +Y, +Z 방향을 나타내는 좌표축 아이콘을 추가 시각화합니다. 별도로 지정한 매개변수없이 함수를 호출하면, 기본 그리드와 좌표축 아이콘이 생성됩니다. 또는, 위의 예제처럼 별도의 매개변수를 지정하여 그리드/좌표축의 위치와 크기를 조정할 수 있습니다. 그리드는 가장 마지막으로 사용된 윤곽선(stroke)의 색과 두께로 그려집니다. 선에 대한 매개변수를 지정하려면, draw() 반복문이 끝나기 직전에 stroke() 함수와 strokeWeight() 호출하면 됩니다. 기본적으로, 그리드는 XZ 평면을 따라 스케치의 원점(0,0,0)을 통과하며, 좌표축 아이콘은 원점에서 상쇄(offset)됩니다. 그리드 및 좌표축 아이콘 모두 현재 캔버스 크기에 따라 그 크기가 조정됩니다. 그리드는 기본 카메라 뷰와 평행하게 실행됩니다. 따라서, 그리드를 전체적으로 조망하려면, debugMode와 orbitControl을 함께 사용하면 됩니다.",
+ ""
+ ],
+ "params": {
+ "mode": "상수: GRID 또는 AXES 중 하나",
+ "gridSize": "숫자: 그리드 한 변의 크기 (선택 사항)",
+ "gridDivisions": "숫자: 그리드 분할 개수 (선택 사항)",
+ "xOff": "숫자: 원점(0,0,0)으로부터의 X축 상쇄값 (선택 사항)",
+ "yOff": "숫자: 원점(0,0,0)으로부터의 Y축 상쇄값 (선택 사항)",
+ "zOff": "숫자: 원점(0,0,0)으로부터의 Z축 상쇄값 (선택 사항)",
+ "axesSize": "숫자: 좌표축 아이콘 크기 (선택 사항)",
+ "gridXOff": "숫자: (선택 사항)",
+ "gridYOff": "숫자: (선택 사항)",
+ "gridZOff": "숫자: (선택 사항)",
+ "axesXOff": "숫자: (선택 사항)",
+ "axesYOff": "숫자: (선택 사항)",
+ "axesZOff": "숫자: (선택 사항)"
+ }
+ },
+ "noDebugMode": {
+ "description": [
+ "3D 스케치의 debugMode() 실행을 종료합니다."
+ ]
+ },
+ "ambientLight": {
+ "description": [
+ "색상을 갖는 앰비언트 라이트를 생성합니다. 앰비언트 라이트는 별도의 광원없이 캔버스의 모든 영역에서 나오는 조명을 뜻합니다."
+ ],
+ "params": {
+ "v1": "숫자: 현재 색상 범위에 따른 빨강값 또는 색조값",
+ "v2": "현재 색상 범위에 따른 초록값 또는 채도값",
+ "v3": "현재 색상 범위에 따른 파랑값 또는 밝기값",
+ "alpha": "숫자: 알파값 (선택 사항)",
+ "value": "문자열: 색상 문자열",
+ "gray": "숫자: 회색값",
+ "values": "숫자 배열[]: 색상의 R, G, B & 알파값 성분을 포함한 배열",
+ "color": "p5.Color: 앰비언트 라이트 색상"
+ }
+ },
+ "specularColor": {
+ "description": [
+ "스페큘러 재질(material)과 조명에 쓰이는 스페큘러 하이라이트 색상을 설정합니다. 이 메소드를 specularMaterial() 및 shininess() 함수에 결합하여 스페큘러 하이라이트를 설정할 수 있습니다. 기본값은 흰색, 즉 (255,25,255)이며, specularMaterial() 함수 이전에 메소드가 호출되지 않을 경우 사용됩니다. 참고: specularColor는 프로세싱 함수 lightSpecular 와 동읠한 효과를 갖습니다.",
+ "",
+ ""
+ ],
+ "params": {
+ "v1": "숫자: 현재 색상 범위에 따른 빨강값 또는 색조값",
+ "v2": "숫자: 현재 색상 범위에 따른 초록값 또는 채도값",
+ "v3": "숫자: 현재 색상 범위에 따른 파랑값 또는 밝기값",
+ "value": "문자열: 색상 문자열",
+ "gray": "숫자: 회색값",
+ "values": "숫자 배열[]: 색상의 R, G, B & 알파값 성분을 포함한 배열",
+ "color": "p5.Color: 앰비언트 라이트 색상"
+ }
+ },
+ "directionalLight": {
+ "description": [
+ "색상과 방향을 갖는 디렉셔널 라이트를 생성합니다. 한 번에 최대 5개의 directionalLight를 활성화할 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값",
+ "v3": "숫자: 파랑값 또는 밝기값",
+ "position": "p5.Vector:조명의 방향",
+ "color": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값",
+ "x": "숫자: x축 방향",
+ "y": "숫자: y축 방향",
+ "z": "숫자: z축 방향"
+ }
+ },
+ "pointLight": {
+ "description": [
+ "색상과 조명 위치를 갖는 포인트 라이트를 생성합니다. 한 번에 최대 5개의 pointlLight를 활성화할 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값",
+ "v3": "숫자: 파랑값 또는 밝기값",
+ "x": "숫자: x축 위치",
+ "y": "숫자: y축 위치",
+ "z": "숫자: z축 위치",
+ "position": "p5.Vector: 조명의 위치",
+ "color": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
+ }
+ },
+ "lights": {
+ "description": [
+ "기본 앰비언트 라이트와 디렉셔널 라이트를 설정합니다. 기본값은 ambientLight(128, 128, 128)과 directionalLight(128, 128, 128, 0, 0, -1)입니다. 반복 프로그램에서 조명의 지속성을 확보하려면 조명을 draw() 안에 작성해야 합니다. 반복 프로그램의 setup() 안에 작성할 경우, 반복문의 최초 실행시에만 조명 효과가 발생합니다."
+ ]
+ },
+ "lightFalloff": {
+ "description": [
+ "포인트 라이트의 감소율을 설정합니다. 코드 내에서 생성된 요소에만 영향을 줍니다. 기본값은 lightFalloff (1.0, 0.0, 0.0)이며, 사용자가 지정한 매개변수를 다음의 감소량 계산 방정식에서 사용할 수 있습니다: d = 조명 위치에서 꼭지점 위치까지의 거리 감소량 = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)",
+ "",
+ ""
+ ],
+ "params": {
+ "constant": "숫자: 감소량 결정을 위한 상수값",
+ "linear": "선형 숫자: 감소량 결정을 위한 선형값",
+ "quadratic": "2차 숫자: 감소량 결정을 위한 2차값"
+ }
+ },
+ "spotLight": {
+ "description": [
+ "사용자가 지정한 색상, 위치, 조명 방향, 각도, 농도로 스포트라이트를 생성합니다. 여기서의 '각도'는 스포트라이트 원뿔의 개구부에 대한 각도를 의미합니다. 농도는 빛을 중앙으로 집중시키는 값을 뜻합니다. 각도와 농도는 모두 선택 사항이나, 농도 지정을 위해 각도를 반드시 지정해야합니다. 한 번에 최대 5개의 spotLight를 활성화할 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "v1": "숫자: (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값",
+ "v3": "숫자: 파랑값 또는 밝기값",
+ "x": "숫자: x축 위치",
+ "y": "숫자: y축 위치",
+ "z": "숫자: z축 위치",
+ "rx": "숫자: 조명의 x축 방향",
+ "ry": "숫자: 조명의 y축 방향",
+ "rz": "숫자: 조명의 z축 방향",
+ "angle": "숫자: 각도 매개변수. 기본값은 PI/3 (선택 사항)",
+ "conc": "숫자: 농도 매개변수. 기본값은 100 (선택 사항)",
+ "color": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값",
+ "position": "p5.Vector: 조명의 위치",
+ "direction": "p5.Vector: 조명의 방향"
+ }
+ },
+ "noLights": {
+ "description": [
+ "noLights() 함수 호출 이후에 렌더링된 재질(material)들로부터 모든 조명을 제거합니다. 모든 후속 메소드에 영향을 줍니다. noLights() 이후에 작성된 조명 메소드를 호출할 경우, 스케치상 조명이 다시 활성화됩니다. "
+ ]
+ },
+ "loadModel": {
+ "description": [
+ "OBJ 또는 STL 파일로부터 3D 모델을 불러옵니다. loadModel() 함수는 반드시 preload() 함수 안에 작성되어야 하며, 이로써 3D 모델을 코드 실행에 앞서 온전히 불러올 수 있습니다. OBJ와 STL 파일 형식의 한계 중 하나는 빌트인 스케일 기능이 제공되지 않는다는 것입니다. 즉, 파일을 불러오는 소프트웨어 프로그램에 따라 3D 모델의 크기가 상이해집니다. 3D 모델이 보이지 않는다면 loadModel() 함수에 표준화된 매개변수인 true를 입력해 보세요. 또한 불러온 3D 모델의 크기는 scale() 함수로 변경할 수 있습니다. 색상이 지정된 STL 파일은 현재 지원하지 않아, 색상 요소가 제거된 상태로 렌더링될 수 있습니다.",
+ "",
+ "",
+ ""
+ ],
+ "returns": "p5.Geometry: p5.Geometry 객체",
+ "params": {
+ "path": "문자열: 불러올 3D 모델의 파일 경로",
+ "normalize": "불리언: 참(true)이면, 3D 모델을 표준화된 크기로 불러오기",
+ "successCallback": "함수(p5.Geometry): 3D 모델을 불러온 뒤 일회적으로 호출되는 함수로, 3D 모델 객체를 전달. (선택 사항)",
+ "failureCallback": "함수(Event):3D 모델 불러오기를 실패할 경우 이벤트 에러와 함께 호출 (선택 사항)",
+ "fileType": "String: (Optional) The file extension of the model (.stl, .obj)."
+ }
+ },
+ "model": {
+ "description": [
+ "화면에 3D 모델을 렌더링합니다."
+ ],
+ "params": {
+ "model": "p5.Geometry: 렌더링할, 불러온 3D 모델"
+ }
+ },
+ "loadShader": {
+ "description": [
+ "버텍스 및 프래그먼트 셰이더 경로로부터 커스텀 셰이더를 불러옵니다. 셰이더 파일은 배경 화면과 비동기적으로 로드되므로, 이 메소드는 preload()에서 사용해야 합니다. 현재 3가지 유형의 셰이더를 지원합니다. p5는 셰이더상 정의된 매개변수 이름과 일치하는 버텍스, 법선(normal), 색상, 조명 속성을 자동으로 제공합니다.",
+ ""
+ ],
+ "returns": "p5.Shader: 지정된 버텍스 및 프래그먼트 셰이더 파일로부터 생성된 셰이더 객체",
+ "params": {
+ "vertFilename": "문자열: 버텍스 셰이더 소스 코드 파일의 경로",
+ "fragFilename": "문자열: 프래그먼트 셰이더의 소스 코드 파일 경로",
+ "callback": "함수: loadShader()가 완료된 이후 실행될 함수. 성공시, 셰이더 객체를 1번재 인수로 전달 (선택 사항)",
+ "errorCallback": "함수: loadShader 내에서 에러 발생시 실행될 함수. 에러 발생시, 에러를 1번째 인수로 전달 (선택 사항)"
+ }
+ },
+ "createShader": {
+ "returns": "p5.Shader: 지정된 버텍스 및 프래그먼트 셰이더 파일로부터 생성된 셰이더 객체",
+ "params": {
+ "vertSrc": "문자열: 버텍스 셰이더의 소스 코드",
+ "fragSrc": "문자열: 프래그먼트 셰이더의 소스 코드"
+ }
+ },
+ "shader": {
+ "description": [
+ "shader() 함수를 통해 WebGL 모드상의 도형을 커스텀 셰이더로 채울 수 있습니다. loadShader()로 버텍스 및 프래그먼트 셰이더를 불러와 사용자 자체적으로 셰이더를 생성할 수 있습니다."
+ ],
+ "params": {
+ "s": "p5.Shader: 도형 렌더링에 사용하기 원하는 p5.Shader (선택 사항)"
+ }
+ },
+ "resetShader": {
+ "description": [
+ "이 함수는 WebGL 모드 기본 셰이더를 복원합니다. resetShader() 이후에 실행되는 코드는 그 이전에 정의된 셰이더의 영향을 받지 않습니다. 반드시 shader() 함수 이후에 실행되어야 합니다. "
+ ]
+ },
+ "normalMaterial": {
+ "description": [
+ "도형의 기본 재질(material)은 조명의 영향을 받지 않습니다. 반사성을 갖지 않으며, 종종 디버깅을 위한 자리표시자(placeholder)로 사용됩니다. X축을 향한 표면은 빨강, Y축을 향한 표면은 초록, Z축을 향한 표면은 파랑이 됩니다. 이 예제 에서 사용가능한 모든 재질들을 확인할 수 있습니다."
+ ]
+ },
+ "texture": {
+ "description": [
+ "도형의 텍스처. 예제 에서 사용가능한 다른 재질들을 확인하세요."
+ ],
+ "params": {
+ "tex": "p5.Image|p5.MediaElement|p5.Graphics: 텍스처로 렌더링할 2차원 그래픽"
+ }
+ },
+ "textureMode": {
+ "description": [
+ "텍스처 매핑을 위한 좌표 공간을 설정합니다. 기본 모드는 IMAGE로, 이미지의 실제 좌표를 나타냅니다. NORMAL은 0부터 1 사이의 정규화된 값의 공간을 나타냅니다. 이 함수는 WebGL 모드에서만 작동합니다. 예를 들어, IMAGE 모드에서 100 x 200 픽셀 이미지를 사용할 경우, 이미지를 사각면(quad)의 전체 크기에 매핑하기 위해 점 (0,0) (100, 0) (100,200) (0,200)이 필요합니다. 동일한 매핑을 NORMAL 모드에서 할 경우 (0,0) (1,0) (1,1) (0,1)입니다.",
+ ""
+ ],
+ "params": {
+ "mode": "상수: IMAGE 또는 NORMAL 중 하나"
+ }
+ },
+ "textureWrap": {
+ "description": [
+ "전역 텍스처 래핑 모드를 설정합니다. UV가 0부터 1까지의 범위를 벗어날 때의 텍스처 동작을 제어합니다. CLAMP, REPEAT, MIRROR의 3가지 옵션이 있습니다. CLAMP는 텍스처의 가장자리 픽셀 경계를 확장합니다. REPEAT는 경계에 도달할 때까지 텍스처가 반복적으로 타일링되도록 합니다. MIRROR는 REPEAT와 유사하지만, 매 타일마다 텍스처를 뒤집는다는 점에서 다릅니다. REPEAT & MIRROR는 텍스처의 크기가 2의 배수 단위(128, 256, 512, 1024 등)인 경우에 한해서만 사용 가능합니다. 이 메소드는 그 이후에 작성된 textureWrap이 호출되기 전까지의 스케치 위 모든 텍스처에 영향을 줍니다. 1개의 인수만 지정할 경우, 해당 인수가 수직 및 수평축 모두에 적용됩니다.",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "wrapX": "상수: CLAMP, REPEAT, 또는 MIRROR 중 하나",
+ "wrapY": "상수: CLAMP, REPEAT, 또는 MIRROR 중 하나 (선택 사항)"
+ }
+ },
+ "ambientMaterial": {
+ "description": [
+ "지정된 색상의 도형에 입힐 앰비언트 재질입니다. 앰비언트 재질은 앰비언트 라이트 아래에서 객체가 반사하는 색상을 정의합니다. 예를 들어, 객체의 앰비언트 재질이 순수 빨강이고 앰비언트 라이트가 순수 초록인 경우, 객체는 빛을 반사하지 않습니다. 사용가능한 모든 재질 을 확인하세요."
+ ],
+ "params": {
+ "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
+ "v3": "숫자: 파랑값 또는 밝기값 (선택 사항)",
+ "color": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
+ }
+ },
+ "emissiveMaterial": {
+ "description": [
+ "재질의 방사형 색상을 설정합니다. 여기서의 '방사형'은 사실상 잘못된 표현입니다. 주변 도형에도 영향을 미치는 조명을 직접 방사한다기 보다는, 마치 객체가 빛나는 것처럼 보이기 때문입니다. 방사형 재질은 별도의 조명이 없어도 화면상 최대 강도로 빛날 수 있습니다."
+ ],
+ "params": {
+ "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
+ "v3": "숫자: 파랑값 또는 밝기값 (선택 사항)",
+ "a": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값",
+ "color": "Number[]|String|p5.Color: color, color Array, or CSS color string"
+ }
+ },
+ "specularMaterial": {
+ "description": [
+ "지정된 색상의 도형에 입힐 스페큘러 재질입니다. 스페큘러 재질은 반짝이는 반사 재질입니다. 앰비언트 재질과 마찬가지로, 앰비언트 조명 아래에서 객체가 반사하는 색상을 정의합니다. 예를 들어, 객체의 스페큘러 재질이 순수 빨강이고 앰비언트 라이트가 순수 초록인 경우, 객체는 빛을 반사하지 않습니다. 스페큘러 재질은 포인트 라이트나 디렉셔널 라이트 등 모든 조명들의 광원 색상을 반영합니다. 사용가능한 모든 재질 을 확인하세요."
+ ],
+ "params": {
+ "gray": "Number: number specifying value between white and black.",
+ "alpha": "Number: (Optional) alpha value relative to current color range (default is 0-255)",
+ "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
+ "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
"v3": "숫자: 파랑값 또는 밝기값 (선택 사항)",
- "UNKNOWN-PARAM-4": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
- },
- "returns": ""
+ "color": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
+ }
+ },
+ "shininess": {
+ "description": [
+ "셰이더 표면의 광택 양을 설정합니다. specularMaterial()과 함께 사용하여 도형의 재질 속성을 설정할 수 있습니다. 기본값이자 최소값은 1입니다."
+ ],
+ "params": {
+ "shine": "Number: Degree of Shininess. Defaults to 1."
+ }
+ },
+ "camera": {
+ "description": [
+ "3D 스케치의 카메라 위치를 설정합니다. 이 함수의 매개변수들은 카메라의 위치, 스케치의 중심(카메라가 가리키는 위치), 그리고 위쪽 방향(카메라의 오리엔테이션)을 정의합니다. 이 함수는 카메라 이동을 시뮬레이션하여, 객체를 다양한 각도에서 볼 수 있도록 합니다. 객체 자체가 아닌 카메라를 움직이는 점에 유의하세요. 예를 들어, centerX 값이 양수인 경우, 카메라는 스케치의 우측으로 회전하여 마치 객체가 왼쪽으로 움직이듯 보이게 합니다. 이 예제 에서 카메라의 위치 이동 방식을 확인하세요. 별도의 인수를 지정하지 않는 경우, 함수는 camera (0, 0, (height / 2.0) / tan (PI * 30.0 / 180.0), 0, 0, 0, 0, 1, 0)에 해당하는 기본 카메라를 생성합니다.",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "숫자: x축에서의 카메라 위치값 (선택 사항)",
+ "y": "숫자: y축에서의 카메라 위치값 (선택 사항)",
+ "z": "숫자: z축에서의 카메라 위치값 (선택 사항)",
+ "centerX": "숫자: 스케치 중심의 x좌표값 (선택 사항)",
+ "centerY": "숫자: 스케치 중심의 y좌표값 (선택 사항)",
+ "centerZ": "숫자: 스케치 중심의 z좌표값 (선택 사항)",
+ "upX": "숫자: 카메라로부터 위쪽 방향의 x성분 (선택 사항)",
+ "upY": "숫자: 카메라로부터 위쪽 방향의 y성분 (선택 사항)",
+ "upZ": "숫자: 카메라로부터 위쪽 방향의 z성분 (선택 사항)"
+ }
+ },
+ "perspective": {
+ "description": [
+ "3D 스케치의 카메라 투시 투영법을 설정합니다. 이 투영법은 거리 단축 착시효과를 통해 깊이감을 나타냅니다. 카메라로부터 가까운 객체는 실제 크기로 보이고, 멀리 떨어진 객체는 더 작아 보입니다. 이 함수의 매개변수는 수직 시야, 종횡비(일반적으로, 너비/높이), 그리고 근거리 및 원거리에서 잘리는 평면을 통해 보이는 (즉, 카메라가 보는), 절두체 구도(카메라가 객체를 보는, 잘린 피라미드형 구도)를 정의합니다. 별도의 인수를 지정하지 않는 경우, 기본값은 perspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0)과도 동일한 효과를 가지며, 여기서 eyeZ는((height/2.0) / tan(PI60.0/360.0))과 같습니다.",
+ ""
+ ],
+ "params": {
+ "fovy": "숫자: 하단에서 상단에 이르는 카메라의 절두체형 수직 시야각, angleMode 단위에 해당 (선택 사항)",
+ "aspect": "숫자: 카메라의 절두체형 종횡비 (선택 사항)",
+ "near": "숫자: 절두 근거리 길이 (선택 사항)",
+ "far": "숫자: 절두 원거리 길이 (선택 사항)"
+ }
+ },
+ "ortho": {
+ "description": [
+ "3D 스케치의 카메라 직교 투영법을 설정하고, 객체에 대한 상자 모양의 절두체 구도를 정의합니다. 이 투영법은 동일한 차원상의 객체들을 카메라로부터 떨어져있는 거리와 상관없이 모두 동일한 크기로 나타냅니다. 이 함수의 매개변수는 좌우가 최소 및 최대 x값이고, 상하가 최소 및 최대 y값이며, 원근이 최소 및 최대 z값인 절두체 구도를 지정합니다. 별도의 매개변수를 지정하지 않는 경우, 기본값은 ortho(-width/2, width/2, -height/2, height/2)입니다."
+ ],
+ "params": {
+ "left": "숫자: 카메라 절두체의 왼쪽 평면 (선택 사항)",
+ "right": "숫자: 카메라 절두체의 오른쪽 평면 (선택 사항)",
+ "bottom": "숫자: 카메라 절두체의 아래쪽 평면 (선택 사항)",
+ "top": "숫자: 카메라 절두체의 위쪽 평면 (선택 사항)",
+ "near": "숫자: 카메라 절두체의 가까운 평면 (선택 사항)",
+ "far": "숫자: 카메라 절두체의 먼 평면 (선택 사항)"
+ }
+ },
+ "frustum": {
+ "description": [
+ "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 visible; anything outside those planes is not visible. ",
+ "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective() ."
+ ],
+ "params": {
+ "left": "Number: (Optional) camera frustum left plane",
+ "right": "Number: (Optional) camera frustum right plane",
+ "bottom": "Number: (Optional) camera frustum bottom plane",
+ "top": "Number: (Optional) camera frustum top plane",
+ "near": "Number: (Optional) camera frustum near plane",
+ "far": "Number: (Optional) camera frustum far plane"
+ }
+ },
+ "createCamera": {
+ "description": [
+ "새로운 p5.Camera 객체를 생성하고 렌더러에게 해당 카메라를 사용하도록 지시합니다. p5.Camera 객체를 반환합니다."
+ ],
+ "returns": "p5.Camera: 새로 생성된 카메라 객체"
+ },
+ "setCamera": {
+ "description": [
+ "rendererGL의 현재 카메라를 p5.Camera 객체로 설정합니다. 여러 카메라 간의 화면 전환이 가능합니다."
+ ],
+ "params": {
+ "cam": "p5.Camera: p5.Camera 객체"
+ }
+ },
+ "setAttributes": {
+ "description": [
+ "WebGL 드로잉 컨텍스트의 속성을 설정하여 WebGL 렌더러가 화면과 성능을 미세 조정할 수 있도록 합니다. WebGL 캔버스를 생성한 후에 이 함수를 호출하면 드로잉 컨텍스트가 다시 초기화되는 점에 유의하세요. 객체가 매개변수로 전달될 경우, 객체에 선언되지 않은 모든 속성은 기본값으로 처리됩니다. 사용한 가능한 속성은 다음과 같습니다: alpha - 캔버스에 알파 버퍼가 있는지의 여부를 나타냅니다. 기본값은 참(true)입니다. stencil - 드로잉 버퍼에 8비트 이상의 스텐실 버퍼가 있는지 여부를 나타냅니다. antialias - 안티앨리어싱 기본값을 수행할지 여부를 나타냅니다. (Safari에서는 참) premultipliedAlpha - 드로잉 버퍼에 포함된 색상이 미리 곱해진 알파 기본값을 포함하는 지의 여부에 대해, 페이지 컴포지터가 거짓(false)으로 가정하고 있음을 나타냅니다. perPixelLighting - 참(true)이라면, 픽셀당 라이팅(per-pixel Lighting)이 라이팅 셰이더에 사용됩니다. 그렇지 않다면, 꼭지점당 라이팅(per-vertex lighting)이 사용됩니다. 기본값은 참입니다.",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "key": "문자열: 속성명",
+ "value": "불리언: 명명된 속성의 새로운 값",
+ "obj": "객체: 주요값들의 쌍을 갖는 객체"
+ }
+ },
+ "sampleRate": {
+ "description": [
+ "Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing."
+ ],
+ "returns": "Number: samplerate samples per second"
+ },
+ "freqToMidi": {
+ "description": [
+ "Returns the closest MIDI note value for a given frequency."
+ ],
+ "returns": "Number: MIDI note value",
+ "params": {
+ "frequency": "Number: A freqeuncy, for example, the \"A\" above Middle C is 440Hz"
+ }
+ },
+ "midiToFreq": {
+ "description": [
+ "Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators."
+ ],
+ "returns": "Number: Frequency value of the given MIDI note",
+ "params": {
+ "midiNote": "Number: The number of a MIDI note"
+ }
+ },
+ "soundFormats": {
+ "description": [
+ "List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter."
+ ],
+ "params": {
+ "formats": "String: (Optional) i.e. 'mp3', 'wav', 'ogg'"
+ }
+ },
+ "getAudioContext": {
+ "description": [
+ "Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API . ",
+ "Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below."
+ ],
+ "returns": "Object: AudioContext for this sketch"
+ },
+ "userStartAudio": {
+ "description": [
+ "It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome , which create the Web Audio API's Audio Context in a suspended state. ",
+ "In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio(). ",
+ "userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016)."
+ ],
+ "returns": "Promise: Returns a Promise that resolves when the AudioContext state is 'running'",
+ "params": {
+ "element(s)": "Element|Array: (Optional) This argument can be an Element, Selector String, NodeList, p5.Element, jQuery Element, or an Array of any of those.",
+ "callback": "Function: (Optional) Callback to invoke when the AudioContext has started"
+ }
+ },
+ "loadSound": {
+ "description": [
+ "loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files."
+ ],
+ "returns": "SoundFile: Returns a p5.SoundFile",
+ "params": {
+ "path": "String|Array: Path to the sound file, or an array with paths to soundfiles in multiple formats i.e. ['sound.ogg', 'sound.mp3']. Alternately, accepts an object: either from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if there is an error loading the file.",
+ "whileLoading": "Function: (Optional) Name of a function to call while file is loading. This function will receive the percentage loaded so far, from 0.0 to 1.0."
+ }
+ },
+ "createConvolver": {
+ "description": [
+ "Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response."
+ ],
+ "returns": "p5.Convolver: ",
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call if loading is successful. The object will be passed in as the argument to the callback function.",
+ "errorCallback": "Function: (Optional) function to call if loading is not successful. A custom error will be passed in as the argument to the callback function."
+ }
+ },
+ "setBPM": {
+ "description": [
+ "Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts."
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ },
+ "saveSound": {
+ "description": [
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob ."
+ ],
+ "params": {
+ "soundFile": "p5.SoundFile: p5.SoundFile that you wish to save",
+ "fileName": "String: name of the resulting .wav file."
+ }
+ }
+ },
+ "p5.Color": {
+ "description": [
+ "Each color stores the color mode and level maxes that was applied at the time of its construction. These are used to interpret the input arguments (at construction and later for that instance of color) and to format the output e.g. when saturation() is requested. ",
+ "Internally, we store an array representing the ideal RGBA values in floating point form, normalized from 0 to 1. From this we calculate the closest screen color (RGBA levels from 0 to 255) and expose this to the renderer. ",
+ "We also cache normalized, floating point components of the color in various representations as they are calculated. This is done to prevent repeating a conversion that has already been performed."
+ ],
+ "setRed": {
+ "description": [
+ "The setRed function sets the red component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "red": "Number: the new red value"
+ }
+ },
+ "setGreen": {
+ "description": [
+ "The setGreen function sets the green component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "green": "Number: the new green value"
+ }
+ },
+ "setBlue": {
+ "description": [
+ "The setBlue function sets the blue component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "blue": "Number: the new blue value"
+ }
+ },
+ "setAlpha": {
+ "description": [
+ "The setAlpha function sets the transparency (alpha) value of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "alpha": "Number: the new alpha value"
+ }
+ }
+ },
+ "p5.Element": {
+ "description": [
+ "캔버스, 그래픽 버퍼, 기타 HTML 요소를 비롯하여, 스케치에 추가된 모든 요소(element)들을 위한 기본 클래스입니다. p5.Element 클래스는 직접 호출되지 않지만, 그 객체는 createCanvas, createGraphics, createDiv, createImg, createInput 호출을 통해 생성됩니다."
+ ],
+ "params": {
+ "elt": "문자열: 래핑된 DOM 노드",
+ "pInst": "P5: p5 인스턴스에 대한 포인터 (선택 사항)"
+ },
+ "elt": {
+ "description": [
+ "기본 HTML 요소로, 모든 일반 HTML 메소드를 호출."
+ ]
+ },
+ "parent": {
+ "description": [
+ "지정된 부모 클래스에 요소를 연결합니다. 요소의 컨테이너를 설정하는 방법입니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 부모 노드가 반환됩니다. 캔버스 배치하는 다른 방법들은 이 위키 페이지 를 참고하세요."
+ ],
+ "params": {
+ "parent": "String|p5.Element|Object: the ID, DOM node, or p5.Element of desired parent element"
+ }
+ },
+ "id": {
+ "description": [
+ "요소의 ID를 설정합니다. 별도로 지정한 ID 인수가 없으면, 요소의 현재 ID를 반환합니다. 요소당 1개의 특정 id를 가질 수 있습니다. .class() 함수는 동일한 클래스 이름을 가진 여러 요소들을 식별하는 데에 사용됩니다."
+ ],
+ "params": {
+ "id": "String: ID of the element"
+ }
+ },
+ "class": {
+ "description": [
+ "사용자가 지정한 클래스를 요소에 더합니다. 별도로 지정한 클래스 인수가 없으면, 요소의 현재 클래스(들)를 포함하는 문자열을 반환합니다."
+ ],
+ "params": {
+ "class": "String: class to add"
+ }
+ },
+ "mousePressed": {
+ "description": [
+ ".mousePressed() 함수는 요소 위에서 마우스 버튼이 눌릴 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is pressed over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "doubleClicked": {
+ "description": [
+ ".doubleClicked() 함수는 요소 위에서 마우스 버튼을 빠르게 두 번 클릭할 때마다 한 번씩 호출됩니다. 요소에 행동 특정적 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "returns": "p5.Element: ",
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is double clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseWheel": {
+ "description": [
+ ".mouseWheel() 함수는 요소 위에서 마우스 휠을 스크롤 할 때마다 한 번싹 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. 이 함수에서는 콜백 함수를 인수로서 사용할 수 있습니다. 그 경우, 요소 위에서 휠 이벤트가 발생할 때마다 콜백 함수가 하나의 event 인수로서 전달됩니다. event.deltaY 속성은 마우스 휠이 위쪽으로 회전하거나 사용자로부터 멀어지면 음수값을 반환하고, 그 반대 방향에선 양수값을 반환합니다. event.deltaX 속성은 마우스 가로 휠 스크롤을 읽는다는 점을 제외하고 event.deltaY와 동일하게 작동합니다.",
+ "",
+ ""
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is scrolled over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseReleased": {
+ "description": [
+ ".mouseReleased() 함수는 요소 위에서 마우스 버튼을 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is released over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseClicked": {
+ "description": [
+ ".mouseClicked() 함수는 요소 위에서 마우스 버튼을 클릭한 뒤 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseMoved": {
+ "description": [
+ ".mouseMoved() 함수는 마우스가 요소 위에서 움직일 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOver": {
+ "description": [
+ ".mouseOver() 함수는 마우스가 요소 위에 올라올 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves onto the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOut": {
+ "description": [
+ ".mouseOut() 함수는 마우스가 요소 위에서 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves off of an element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchStarted": {
+ "description": [
+ ".touchStarted() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch starts over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchMoved": {
+ "description": [
+ ".touchMoved() 함수는 터치 움직임이 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchEnded": {
+ "description": [
+ ".touchEnded() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch ends over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragOver": {
+ "description": [
+ ".dragOver() 함수는 요소 위에 파일을 드래그할 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragLeave": {
+ "description": [
+ ".dragLeave() 함수는 드래그된 파일이 요소 영역을 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged off the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "addClass": {
+ "description": [
+ "요소에 특정 클래스를 추가합니다."
+ ],
+ "params": {
+ "class": "String: name of class to add"
+ }
+ },
+ "removeClass": {
+ "description": [
+ "요소로부터 특정 클래스를 제거합니다."
+ ],
+ "params": {
+ "class": "String: name of class to remove"
+ }
+ },
+ "hasClass": {
+ "description": [
+ "요소에 이미 클래스가 설정되어 있는지 확인합니다."
+ ],
+ "returns": "Boolean: a boolean value if element has specified class",
+ "params": {
+ "c": "String: class name of class to check"
+ }
+ },
+ "toggleClass": {
+ "description": [
+ "요소 클래스를 토글합니다."
+ ],
+ "params": {
+ "c": "String: class name to toggle"
+ }
+ },
+ "child": {
+ "description": [
+ "지정된 부모 클래스에 요소를 자식으로서 연결합니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 자식 DOM 노드 배열이 반환됩니다. "
+ ],
+ "returns": "Node[]: an array of child nodes",
+ "params": {
+ "child": "String|p5.Element: (Optional) the ID, DOM node, or p5.Element to add to the current element"
+ }
+ },
+ "center": {
+ "description": [
+ "p5 Element를 수직으로, 수평으로, 또는 수직 및 수평으로 가운데 정렬합니다. 별도로 지정한 부모가 있는 경우 부모를 기준으로, 부모가 없는 경우 그 자신을 기준으로 합니다. 별도로 지정한 인수가 없으면 요소는 수직 및 수평으로 정렬됩니다."
+ ],
+ "params": {
+ "align": "String: (Optional) passing 'vertical', 'horizontal' aligns element accordingly"
+ }
+ },
+ "html": {
+ "description": [
+ "사용자가 별도로 지정한 인수로서 요소의 내부 HTML을 설정하며, 기존의 모든 HTML를 대체합니다. 참(true)이 그 2번째 인수로서 포함된 경우, 기존의 모든 HTML을 대체하는 대신 새로운 HTML을 추가(append)합니다. 별도로 지정한 인수가 없으면 요소의 내부 HTML을 반환합니다."
+ ],
+ "returns": "String: the inner HTML of the element",
+ "params": {
+ "html": "String: (Optional) the HTML to be placed inside the element",
+ "append": "Boolean: (Optional) whether to append HTML to existing"
+ }
+ },
+ "position": {
+ "description": [
+ "요소의 위치를 설정합니다. 별도로 지정한 위치 유형 인수가 없는 경우, 화면창의 (0,0)을 기준으로 합니다. 기본적으로, 이 메소드를 통해 position:absolute와 left 및 top 스타일 속성을 설정합니다. 선택적으로, 3번째 인수를 통해 x 및 y 좌표의 위치 지정 체계 를 설정할 수 있습니다. 별도로 지정한 인수가 없으면 함수는 요소의 x와 y의 위치를 반환합니다."
+ ],
+ "returns": "Object: object of form { x: 0, y: 0 } containing the position of the element in an object",
+ "params": {
+ "x": "Number: (Optional) x-position relative to upper left of window (optional)",
+ "y": "Number: (Optional) y-position relative to upper left of window (optional)",
+ "positionType": "String: it can be static, fixed, relative, sticky, initial or inherit (optional)"
+ }
+ },
+ "style": {
+ "description": [
+ "별도 지정한 값(2번째 인수)으로 CSS 스타일 속성(1번째 인수)을 설정합니다. 1개의 인수만 지정할 경우, .style()은 주어진 속성의 값을 반환합니다. 그러나 이 인수를 CSS 구문('text-align:center')으로 작성할 경우, .style()은 CSS를 설정합니다."
+ ],
+ "returns": "String: value of property",
+ "params": {
+ "property": "String: property to be set",
+ "value": "String|p5.Color: value to assign to property"
+ }
+ },
+ "attribute": {
+ "description": [
+ "사용자가 지정한 요소에 새 속성을 추가하거나, 요소의 기존 속성값을 변경합니다. 별도로 지정한 값이 없는 경우 주어진 속성의 값을 반환하고, 속성이 설정되지 않은 경우 null을 반환합니다. "
+ ],
+ "returns": "String: value of attribute",
+ "params": {
+ "attr": "String: attribute to set",
+ "value": "String: value to assign to attribute"
+ }
+ },
+ "removeAttribute": {
+ "description": [
+ "요소로부터 속성을 제거합니다."
+ ],
+ "params": {
+ "attr": "String: attribute to remove"
+ }
+ },
+ "value": {
+ "description": [
+ "별도로 지정한 인수가 없는 경우, 요소의 값을 반환하거나 설정합니다."
+ ],
+ "returns": "String|Number: value of the element",
+ "params": {
+ "value": "String|Number"
+ }
+ },
+ "show": {
+ "description": [
+ "현재 요소를 보여줍니다. display:block로 스타일을 설정합니다."
+ ]
+ },
+ "hide": {
+ "description": [
+ "현재 요소를 숨깁니다. display:none으로 스타일을 설정합니다."
+ ]
+ },
+ "size": {
+ "description": [
+ "요소의 너비와 높이를 설정합니다. AUTO는 한 번에 한 개의 수치를 조정하는 데에 쓰입니다. 별도로 지정한 인수가 없는 경우, 객체 속 요소의 너비와 높이를 반환합니다. 이미지 파일과 같이 불러오기가 필요한 요소의 경우, 불러오기가 완료된 후 함수를 호출하는 것을 권장합니다."
+ ],
+ "returns": "Object: the width and height of the element in an object",
+ "params": {
+ "w": "Number|Constant: width of the element, either AUTO, or a number",
+ "h": "Number|Constant: (Optional) height of the element, either AUTO, or a number"
+ }
+ },
+ "remove": {
+ "description": [
+ "요소를 제거하고, 모든 미디어 스트림을 중지하며, 모든 리스너를 해제합니다."
+ ]
+ },
+ "drop": {
+ "description": [
+ "요소에 드롭된 파일이 로드될 때마다 호출되는 콜백을 등록합니다. p5는 메모리에 드롭된 모든 파일을 로드하고 이를 p5.File 객체로서 콜백에 전달합니다. 동시에 여러 파일을 드롭할 경우, 콜백이 여러 번 호출됩니다. 선택적으로, raw 드롭 이벤트에 등록될 2번째 콜백을 전달할 수 있습니다. 이 경우, 콜백에 본래 DragEvent도 제공됩니다. 동시에 여러 파일을 드롭하면 2번째 콜백이 드롭당 한 번씩 발생하며, 1번째 콜백은 로드된 파일당 한 번씩 발생합니다.",
+ ""
+ ],
+ "params": {
+ "callback": "Function: callback to receive loaded file, called for each file dropped.",
+ "fxn": "Function: (Optional) callback triggered once when files are dropped with the drop event."
+ }
+ }
+ },
+ "p5.Graphics": {
+ "description": [
+ "렌더러을 둘러싼 얇은 래퍼(wrapper)로, 그래픽 버퍼 객체를 생성하는 데에 사용합니다. 화면 밖 그래픽 버퍼에 그리려면 이 클래스를 사용하세요. 2개의 매개변수는 너비와 높이를 픽셀 단위로 지정합니다. 이 클래스의 필드와 메소드는 확장성이 있으나, p5를 위한 일반적인 드로잉 API를 반영합니다. p5.Element를 확장합니다."
+ ],
+ "params": {
+ "w": "숫자: 너비값",
+ "h": "숫자: 높이값",
+ "renderer": "상수: 사용할 렌더러, P2D 또는 WEBGL",
+ "pInst": "P5: p5 인스턴스에 대한 포인터 (선택 사항)"
+ },
+ "reset": {
+ "description": [
+ "그래픽 버퍼 객체로 자동 재설정되지 않은 특정값들(예: 레퍼런스 중 변형(Transform) 또는 조명(Light) 항목에 해당하는 함수들로서 지정된 값들). 이 메소드를 draw() 함수 안에서 호출하면, 기본 캔버스의 행위를 복제합니다."
+ ]
+ },
+ "remove": {
+ "description": [
+ "페이지에서 그래픽 객체를 제거하고 이 객체에 연결된 모든 소스들을 연결 해제합니다."
+ ]
+ }
+ },
+ "p5.Renderer": {
+ "description": [
+ "Main graphics and rendering context, as well as the base API implementation for p5.js \"core\". To be used as the superclass for Renderer2D and Renderer3D classes, respectively."
+ ],
+ "params": {
+ "elt": "String: DOM node that is wrapped",
+ "pInst": "P5: (Optional) pointer to p5 instance",
+ "isMainCanvas": "Boolean: (Optional) whether we're using it as main canvas"
+ }
+ },
+ "JSON": {
+ "stringify": {
+ "description": [
+ "From the MDN entry : The JSON.stringify() method converts a JavaScript object or value to a JSON string ."
+ ],
+ "params": {
+ "object": "Object: :Javascript object that you would like to convert to JSON"
+ }
+ }
+ },
+ "console": {
+ "log": {
+ "description": [
+ "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably. ",
+ "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome , Edge , and Safari . With the online p5 editor the console is embedded directly in the page underneath the code editor. ",
+ "From the MDN entry : The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects ."
+ ],
+ "params": {
+ "message": "String|Expression|Object: :Message that you would like to print to the console"
+ }
+ }
+ },
+ "p5.TypedDict": {
+ "description": [
+ "모든 p5.Dictionary 유형을 위한 기본 클래스 입니다. 사용자가 지정한 사전(Dictionary) 클래스는 이 클래스를 상속할 수 있습니다."
+ ],
+ "size": {
+ "description": [
+ "사전 안에 현재 저장된 키-값(key-value) 쌍의 개수를 반환합니다."
+ ],
+ "returns": "Integer: the number of key-value pairs in the Dictionary"
+ },
+ "hasKey": {
+ "description": [
+ "지정된 키(key)가 사전 안에 존재할 경우 참(true)을, 그렇지 않으면 거짓(false)를 반환합니다."
+ ],
+ "returns": "Boolean: whether that key exists in Dictionary",
+ "params": {
+ "key": "Number|String: that you want to look up"
+ }
+ },
+ "get": {
+ "description": [
+ "지정된 키에 저장된 값을 반환합니다."
+ ],
+ "returns": "Number|String: the value stored at that key",
+ "params": {
+ "the": "Number|String: key you want to access"
+ }
+ },
+ "set": {
+ "description": [
+ "지정된 키가 사전 안에 존재할 경우 연관된 값을 반환합니다. 그렇지 않으면 새로운 키-값 쌍이 추가됩니다."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String"
+ }
+ },
+ "create": {
+ "description": [
+ "새로운 키-값 쌍을 사전 안에 생성합니다."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String",
+ "obj": "Object: key/value pair"
+ }
+ },
+ "clear": {
+ "description": [
+ "기존에 저장된 모든 키-값 쌍들을 사전으로부터 제거합니다."
+ ]
+ },
+ "remove": {
+ "description": [
+ "특정 키에 저장된 키-값 쌍을 사전으로부터 제거합니다."
+ ],
+ "params": {
+ "key": "Number|String: for the pair to remove"
+ }
+ },
+ "print": {
+ "description": [
+ "Dictionary에 현재 저장된 항목들의 로그를 콘솔창에 출력합니다."
+ ]
+ },
+ "saveTable": {
+ "description": [
+ "로컬 다운로드를 위해 사전을 CSV 파일로 변환합니다."
+ ]
+ },
+ "saveJSON": {
+ "description": [
+ "로컬 다운로드를 위해 사전을 JSON 파일로 변환합니다."
+ ]
+ }
+ },
+ "p5.StringDict": {
+ "description": [
+ "A simple Dictionary class for Strings."
+ ]
+ },
+ "p5.NumberDict": {
+ "description": [
+ "숫자를 위한 간단한 사전 클래스 p5.TypedDict를 확장합니다."
+ ],
+ "add": {
+ "description": [
+ "특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 더하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to add to",
+ "Number": "Number: to add to the value"
+ }
+ },
+ "sub": {
+ "description": [
+ "특정 키에 현재 저장된 값에서 사용자가 지정한 숫자를 빼고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to subtract from",
+ "Number": "Number: to subtract from the value"
+ }
+ },
+ "mult": {
+ "description": [
+ "특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 곱하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to multiply",
+ "Amount": "Number: to multiply the value by"
+ }
+ },
+ "div": {
+ "description": [
+ "특정 키에 현재 저장된 값을 사용자가 지정한 숫자로 나누고, 그 몫은 사전 안에 저장되어있던 기존값을 대체합니다."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to divide",
+ "Amount": "Number: to divide the value by"
+ }
+ },
+ "minValue": {
+ "description": [
+ "사전 안에 현재 저장된 값들 중 가장 낮은 숫자를 반환합니다."
+ ],
+ "returns": "Number: "
+ },
+ "maxValue": {
+ "description": [
+ "사전 안에 현재 저장된 값들 중 가장 높은 숫자를 반환합니다."
+ ],
+ "returns": "Number: "
+ },
+ "minKey": {
+ "description": [
+ "사전에서 사용된 키들 중 가장 낮은 키를 반환합니다."
+ ],
+ "returns": "Number: "
+ },
+ "maxKey": {
+ "description": [
+ "사전에서 사용된 키들 중 가장 높은 키를 반환합니다."
+ ],
+ "returns": "Number: "
+ }
+ },
+ "p5.MediaElement": {
+ "description": [
+ "오디오/비디오 처리를 위해 p5.Element를 확장합니다. p5.Element의 메소드 뿐 아니라, 미디어 제어를 위한 메소드도 포함합니다. p5.MediaElements는 직접 호출되지 않지만, createVideo, createAudio, CreateCapture 호출을 통해 생성됩니다."
+ ],
+ "params": {
+ "elt": "문자열: 래핑된 DOM 노드"
+ },
+ "src": {
+ "description": [
+ "미디어 요소 소스 경로"
+ ],
+ "returns": "String: src"
+ },
+ "play": {
+ "description": [
+ "HTML5 미디어 요소를 재생합니다."
+ ]
+ },
+ "stop": {
+ "description": [
+ "HTML5 미디어 요소를 중지합니다. (현재 시간을 0으로 설정)"
+ ]
+ },
+ "pause": {
+ "description": [
+ "HTML5 미디어 요소를 일시정지합니다."
+ ]
+ },
+ "loop": {
+ "description": [
+ "HTML5 미디어 요소의 반복을 참(true)로 설정하고, 재생 시작합니다."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "HTML5 미디어 요소의 반복을 거짓(false)으로 설정합니다. 종료 시점에 도달하면 요소가 중지합니다."
+ ]
+ },
+ "autoplay": {
+ "description": [
+ "HTML5 미디어 요소 자동재생 여부 설정"
+ ],
+ "params": {
+ "shouldAutoplay": "Boolean: whether the element should autoplay"
+ }
+ },
+ "volume": {
+ "description": [
+ "HTML5 미디어 요소의 볼륨을 설정합니다. 별도로 지정한 인수가 없으면, 현재 볼륨을 반환합니다."
+ ],
+ "returns": "Number: current volume",
+ "params": {
+ "val": "Number: volume between 0.0 and 1.0"
+ }
+ },
+ "speed": {
+ "description": [
+ "별도로 지정한 인수가 없으면, 요소의 현재 재생 속도를 반환하빈다. 속도 매개변수는 2.0일 때 2배속으로, 0.5일 때 0.5배속으로, -1일 때 정상 속도로 역재생합니다. (모든 브라우저가 역재생을 지원하지 않으며, 일부 지원 브라우저에서도 부드럽게 재생되지 않을 수 있습니다.)"
+ ],
+ "returns": "Number: current playback speed of the element",
+ "params": {
+ "speed": "Number: speed multiplier for element playback"
+ }
+ },
+ "time": {
+ "description": [
+ "별도로 지정한 인수가 없을 경우, 요소의 현재 시간을 반환합니다. 인수가 지정될 경우, 요소의 현재 시간이 해당 인수로 설정됩니다."
+ ],
+ "returns": "Number: current time (in seconds)",
+ "params": {
+ "time": "Number: time to jump to (in seconds)"
+ }
+ },
+ "duration": {
+ "description": [
+ "HTML5 미디어 요소의 지속 시간을 반환합니다."
+ ],
+ "returns": "Number: duration"
+ },
+ "onended": {
+ "description": [
+ "오디오/비디오 요소가 종료 시점에 도달할 때 호출할 이벤트를 예약합니다. 요소가 반복하는 경우 호출되지 않습니다. 요소는 oneded 콜백에 인수로 전달됩니다."
+ ],
+ "params": {
+ "callback": "Function: function to call when the soundfile has ended. The media element will be passed in as the argument to the callback."
+ }
+ },
+ "connect": {
+ "description": [
+ "요소가 출력한 오디오를 특정 audioNode나 p5.sound 객체로 보냅니다. 요소가 없는 경우, p5의 마스터 출력에 연결합니다. 모든 연결은 .disconnect() 메소드로 제거할 수 있습니다. p5.sound.js 애드온 라이브러리로 이러한 방법을 사용할 수 있습니다.",
+ ""
+ ],
+ "params": {
+ "audioNode": "AudioNode|Object: AudioNode from the Web Audio API, or an object from the p5.sound library"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "마스터 출력을 비롯하여 모든 웹 오디오 라우팅을 분리합니다. 사용 예: 오디오 효과를 통해 출력을 다시 라우팅할 때"
+ ]
+ },
+ "showControls": {
+ "description": [
+ "웹 브라우저가 지정한 기본 미디어 요소(MediaElement) 컨트롤을 나타냅니다."
+ ]
+ },
+ "hideControls": {
+ "description": [
+ "기본 미디어 요소(MediaElement) 컨트롤을 숨깁니다."
+ ]
+ },
+ "addCue": {
+ "description": [
+ "오디오/비디오와 같은 미디어 요소(MediaElement)가 재생 큐 지점에 도달할 때 발생할 이벤트를 예약합니다. 콜백 함수, 콜백이 발생할 시간(초 단위), 콜백에 대한 선택적 매개변수를 허용합니다. 1번째 매개변수는 시간(time)을, 2번째 매개변수는 param을 콜백 함수에 전달합니다.",
+ "",
+ ""
+ ],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
+ "params": {
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "ID를 기반으로 콜백을 제거합니다. ID는 addCue 메소드로 반환됩니다."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "addCue 메소드로 예약된 모든 콜백을 제거합니다."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ }
+ },
+ "p5.File": {
+ "description": [
+ "파일을 위한 기본 클래스입니다. Element.drop()과 createFileInput()에 사용됩니다."
+ ],
+ "params": {
+ "file": "파일: 래핑된 파일"
+ },
+ "file": {
+ "description": [
+ "기본 파일 객체. 모든 일반 File 메소드를 호출할 수 있습니다."
+ ]
+ },
+ "type": {
+ "description": [
+ "파일 유형 (이미지, 텍스트 등)"
+ ]
+ },
+ "subtype": {
+ "description": [
+ "파일 하위 유형 (주로 jpg, png, xml 등의 파일 확장자)"
+ ]
+ },
+ "name": {
+ "description": [
+ "파일명"
+ ]
+ },
+ "size": {
+ "description": [
+ "파일 크기"
+ ]
+ },
+ "data": {
+ "description": [
+ "이미지 데이터를 담는 URL 문자열"
+ ]
+ }
+ },
+ "p5.Image": {
+ "description": [
+ "Creates a new p5.Image . A p5.Image is a canvas backed representation of an image. ",
+ "p5 can display .gif, .jpg and .png images. Images may be displayed in 2D and 3D space. Before an image is used, it must be loaded with the loadImage() function. The p5.Image class contains fields for the width and height of the image, as well as an array called pixels[] that contains the values for every pixel in the image. ",
+ "The methods described below allow easy access to the image's pixels and alpha channel and simplify the process of compositing. ",
+ "Before using the pixels[] array, be sure to use the loadPixels() method on the image to make sure that the pixel data is properly loaded."
+ ],
+ "params": {
+ "width": "Number",
+ "height": "Number"
+ },
+ "width": {
+ "description": [
+ "Image width."
+ ]
+ },
+ "height": {
+ "description": [
+ "Image height."
+ ]
+ },
+ "pixels": {
+ "description": [
+ "Array containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays may have more pixels (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. With pixelDensity = 2, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): let d = pixelDensity(); for (let i = 0; i < d; i++) { for (let j = 0; j < d; j++) { // loop over index = 4 * ((y * d + j) * width * d + (x * d + i)); pixels[index] = r; pixels[index+1] = g; pixels[index+2] = b; pixels[index+3] = a; } } ",
+ "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."
+ ]
+ },
+ "loadPixels": {
+ "description": [
+ "Loads the pixels data for this image into the [pixels] attribute."
+ ]
+ },
+ "updatePixels": {
+ "description": [
+ "Updates the backing canvas for this image with the contents of the [pixels] array. ",
+ "If this image is an animated GIF then the pixels will be updated in the frame that is currently displayed."
+ ],
+ "params": {
+ "x": "Integer: x-offset of the target update area for the underlying canvas",
+ "y": "Integer: y-offset of the target update area for the underlying canvas",
+ "w": "Integer: height of the target update area for the underlying canvas",
+ "h": "Integer: height of the target update area for the underlying canvas"
+ }
+ },
+ "get": {
+ "description": [
+ "Get a region of pixels from an image. ",
+ "If no params are passed, the whole image is returned. If x and y are the only params passed a single pixel is extracted. If all params are passed a rectangle region is extracted and a p5.Image is returned."
+ ],
+ "returns": "p5.Image: the rectangle p5.Image ",
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "w": "Number: width",
+ "h": "Number: height"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the color of a single pixel or write an image into this p5.Image . ",
+ "Note that for a large number of pixels this will be slower than directly manipulating the pixels array and then calling updatePixels() ."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "a": "Number|Number[]|Object: grayscale value | pixel array | a p5.Color | image to copy"
+ }
+ },
+ "resize": {
+ "description": [
+ "Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0)."
+ ],
+ "params": {
+ "width": "Number: the resized image width",
+ "height": "Number: the resized image height"
+ }
+ },
+ "copy": {
+ "description": [
+ "Copies a region of pixels from one image to another. If no srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region."
+ ],
+ "params": {
+ "srcImage": "p5.Image|p5.Element: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height"
+ }
+ },
+ "mask": {
+ "description": [
+ "Masks part of an image from displaying by loading another image and using its alpha channel as an alpha channel for this image."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image"
+ }
+ },
+ "filter": {
+ "description": [
+ "Applies an image filter to a p5.Image "
+ ],
+ "params": {
+ "filterType": "Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter",
+ "filterParam": "Number: (Optional) an optional parameter unique to each filter, see above"
+ }
+ },
+ "blend": {
+ "description": [
+ "Copies a region of pixels from one image to another, using a specified blend mode to do the operation."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height",
+ "blendMode": "Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/ "
+ }
+ },
+ "save": {
+ "description": [
+ "Saves the image to a file and force the browser to download it. Accepts two strings for filename and file extension Supports png (default), jpg, and gif Note that the file will only be downloaded as an animated GIF if the p5.Image was loaded from a GIF file."
+ ],
+ "params": {
+ "filename": "String: give your file a name",
+ "extension": "String: 'png' or 'jpg'"
+ }
+ },
+ "reset": {
+ "description": [
+ "Starts an animated GIF over at the beginning state."
+ ]
+ },
+ "getCurrentFrame": {
+ "description": [
+ "Gets the index for the frame that is currently visible in an animated GIF."
+ ],
+ "returns": "Number: The index for the currently displaying frame in animated GIF"
+ },
+ "setFrame": {
+ "description": [
+ "Sets the index of the frame that is currently visible in an animated GIF"
+ ],
+ "params": {
+ "index": "Number: the index for the frame that should be displayed"
+ }
+ },
+ "numFrames": {
+ "description": [
+ "Returns the number of frames in an animated GIF"
+ ],
+ "returns": "Number: "
+ },
+ "play": {
+ "description": [
+ "Plays an animated GIF that was paused with pause() "
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pauses an animated GIF."
+ ]
+ },
+ "delay": {
+ "description": [
+ "Changes the delay between frames in an animated GIF. There is an optional second parameter that indicates an index for a specific frame that should have its delay modified. If no index is given, all frames will have the new delay."
+ ],
+ "params": {
+ "d": "Number: the amount in milliseconds to delay between switching frames",
+ "index": "Number: (Optional) the index of the frame that should have the new delay value {optional}"
+ }
+ }
+ },
+ "p5.PrintWriter": {
+ "params": {
+ "filename": "String",
+ "extension": "String (Optional)"
+ },
+ "write": {
+ "description": [
+ "PrintWriter 스트림에 데이터를 작성합니다."
+ ],
+ "params": {
+ "data": "Array: all data to be written by the PrintWriter"
+ }
+ },
+ "print": {
+ "description": [
+ "PrintWriter 스트림에 데이터를 작성하고, 마지막에 새로운 한 줄을 추가합니다."
+ ],
+ "params": {
+ "data": "Array: all data to be printed by the PrintWriter"
+ }
+ },
+ "clear": {
+ "description": [
+ "PrintWriter 객체에 이미 작성된 데이터를 제거합니다."
+ ]
+ },
+ "close": {
+ "description": [
+ "PrintWriter를 종료합니다."
+ ]
+ }
+ },
+ "p5.Table": {
+ "description": [
+ "테이블 객체는 기존의 스프레트 시트처럼 복수의 행과 열에 데이터를 저장합니다. 동적으로 새로운 테이블을 생성하거나, 기존 파일 데이터를 사용하여 생성할 수 있습니다."
+ ],
+ "params": {
+ "rows": "p5.TableRow 배열[]: p5.TableRow 객체의 배열 (선택 사항)"
+ },
+ "columns": {
+ "description": [
+ "테이블의 행명을 담는 배열. 테이블의 헤더(header)를 함께 불러올 경우, header 매개변수."
+ ]
+ },
+ "rows": {
+ "description": [
+ "테이블의 행을 채우는 p5.TableRow 객체의 배열. getRows() 호출과 동일한 결과를 갖습니다."
+ ]
+ },
+ "addRow": {
+ "description": [
+ "addRow()를 사용하여 p5.Table 객체에 새로운 행 데이터를 추가할 수 있습니다. 기본값으로 빈 행이 생성됩니다. 일반적으로, TableRow 객체에 있는 새로운 행에 레퍼런스를 저장하고 (위의 예제 중 newRow 참고), set()을 사용하여 각각의 개별값을 설정합니다. p5.TableRow 객체를 매개변수로 지정할 경우, 행을 복제하여 테이블에 추가합니다.",
+ ""
+ ],
+ "returns": "p5.TableRow: the row that was added",
+ "params": {
+ "row": "p5.TableRow: (Optional) row to be added to the table"
+ }
+ },
+ "removeRow": {
+ "description": [
+ "테이블 객체에서 행을 제거합니다."
+ ],
+ "params": {
+ "id": "Integer: ID number of the row to remove"
+ }
+ },
+ "getRow": {
+ "description": [
+ "지정된 p5.TableRow에 레퍼런스를 반환합니다. 반환된 레퍼런스는 지정된 행의 값을 받아오거나 설정할 때 사용할 수 있습니다."
+ ],
+ "returns": "p5.TableRow: p5.TableRow object",
+ "params": {
+ "rowID": "Integer: ID number of the row to get"
+ }
+ },
+ "getRows": {
+ "description": [
+ "테이블의 모든 행을 받아옵니다. p5.TableRow 배열들을 반환합니다."
+ ],
+ "returns": "p5.TableRow[]: Array of p5.TableRow s"
+ },
+ "findRow": {
+ "description": [
+ "지정된 값을 포함하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 여러 개의 행들이 지정된 값을 포함하더라도, 오직 1번째 행만 반환됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다."
+ ],
+ "returns": "p5.TableRow: ",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "findRows": {
+ "description": [
+ "지정된 값을 포함하는 테이블 행들을 검색하고, 해당 행들의 레퍼런스를 반환합니다. 반환된 배열은 위의 예제처럼 모든 행을 반복 처리하는 데에 사용됩니다.ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "matchRow": {
+ "description": [
+ "지정된 정규 표현식과 매칭하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 반환된 배열은 모든 행을 반복 처리하는 데에 사용됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다."
+ ],
+ "returns": "p5.TableRow: TableRow object",
+ "params": {
+ "regexp": "String|RegExp: The regular expression to match",
+ "column": "String|Integer: The column ID (number) or title (string)"
+ }
+ },
+ "matchRows": {
+ "description": [
+ "Finds the rows in the Table that match the regular expression provided, and returns references to those rows. Returns an array, so for must be used to iterate through all the rows, as shown in the example. The column to search may be specified by either its ID or title."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "regexp": "String: The regular expression to match",
+ "column": "String|Integer: (Optional) The column ID (number) or title (string)"
+ }
+ },
+ "getColumn": {
+ "description": [
+ "특정 열의 모든 값들을 가져와 배열로 반환합니다. 열은 그 ID 또는 제목(title)으로 지정가능합니다."
+ ],
+ "returns": "Array: Array of column values",
+ "params": {
+ "column": "String|Number: String or Number of the column to return"
+ }
+ },
+ "clearRows": {
+ "description": [
+ "테이블로부터 모든 행을 제거합니다. 모든 행들이 제거되어도 열과 열 제목은 유지됩니다."
+ ]
+ },
+ "addColumn": {
+ "description": [
+ "addColumn()을 사용하여 p5.Table 객체에 새로운 열 데이터를 추가할 수 있습니다. 일반적으로 열 제목을 설정하여 이후 쉽게 참조되도록 합니다. (별도의 제목을 지정하지 않는 경우, 새로운 열의 제목은 null이 됩니다.)"
+ ],
+ "params": {
+ "title": "String: (Optional) title of the given column"
+ }
+ },
+ "getColumnCount": {
+ "description": [
+ "테이블의 전체 열 개수를 반환합니다."
+ ],
+ "returns": "Integer: Number of columns in this table"
+ },
+ "getRowCount": {
+ "description": [
+ "테이블의 전체 행 개수를 반환합니다."
+ ],
+ "returns": "Integer: Number of rows in this table"
+ },
+ "removeTokens": {
+ "description": [
+ "지정된 문자(또는 '토큰')을 제거합니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다.",
+ ""
+ ],
+ "params": {
+ "chars": "String: String listing characters to be removed",
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "trim": {
+ "description": [
+ "문자열 테이블 값에서 스페이스나 탭과 같은 선행 및 후행 공백을 자릅니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다."
+ ],
+ "params": {
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "removeColumn": {
+ "description": [
+ "removeColumn()을 사용하여 테이블 객체로부터 특정 열을 제거합니다. 제거될 열은 그 제목(문자열) 또는 인덱스 값(정수)로 식별할 수 있습니다. removeColumn(0)은 1번째 열을, removeColumn(1)은 2번째 열을 제거합니다."
+ ],
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "set": {
+ "description": [
+ "테이블 중 지정된 행과 열에 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String|Number: value to assign"
+ }
+ },
+ "setNum": {
+ "description": [
+ "테이블 중 지정된 행과 열에 실수(float)값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "Number: value to assign"
+ }
+ },
+ "setString": {
+ "description": [
+ "테이블 중 지정된 행과 열에 문자열 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String: value to assign"
+ }
+ },
+ "get": {
+ "description": [
+ "테이블 중 지정된 행과 열에 값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "이블 중 지정된 행과 열에 실수(float)값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "테이블 중 지정된 행과 열에 문자열 값을 받아옵니다. 행은 ID로,ø 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "returns": "String: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getObject": {
+ "description": [
+ "모든 테이블 데이터를 받아와 객체로 반환합니다. 열 이름이 전달될 경우, 각 행 객체는 해당 속성을 제목으로 저장합니다."
+ ],
+ "returns": "Object: ",
+ "params": {
+ "headerColumn": "String: (Optional) Name of the column which should be used to title each row object (optional)"
+ }
+ },
+ "getArray": {
+ "description": [
+ "모든 테이블 데이터를 받아와 다차원 배열로 반환합니다."
+ ],
+ "returns": "Array: "
+ }
+ },
+ "p5.TableRow": {
+ "description": [
+ "TableRow 객체는 테이블 중 열에 저장된 데이터 값들의 단일 행을 표현합니다. 테이블 행은 정렬된 배열과 정렬되지 않은 JSON 객체를 모두 포함합니다.",
+ ""
+ ],
+ "params": {
+ "str": "문자열: 구분 기호로 분리된 문자열값으로 행 채우기 (선택 사항)",
+ "separator": "문자열: 기본값은 쉼표 단위 구분(csv) (선택 사항)"
+ },
+ "set": {
+ "description": [
+ "TableRow의 지정된 열에 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number: The value to be stored"
+ }
+ },
+ "setNum": {
+ "description": [
+ "TableRow의 지정된 열에 실수(float)값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "Number|String: The value to be stored as a Float"
+ }
+ },
+ "setString": {
+ "description": [
+ "TableRow의 지정된 열에 문자열 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number|Boolean|Object: The value to be stored as a String"
+ }
+ },
+ "get": {
+ "description": [
+ "TableRow의 지정된 열로부터 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다. "
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "TableRow의 지정된 열로부터 실수(float)값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "returns": "Number: Float Floating point number",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "TableRow의 지정된 열로부터 문자열 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다."
+ ],
+ "returns": "String: String",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ }
+ },
+ "p5.XML": {
+ "description": [
+ "XML은 XML 코드를 구문 분석할 수 있는 XML 객체의 표현입니다. loadXML()을 사용하여 외부 XML 파일을 불러와 XML 객체를 생성합니다."
+ ],
+ "getParent": {
+ "description": [
+ "요소 부모의 복사본을 가져와, 부모를 또다른 p5.XML 객체로 반환합니다."
+ ],
+ "returns": "p5.XML: element parent"
+ },
+ "getName": {
+ "description": [
+ "요소의 전체 이름을 가져와 문자열로 반환합니다."
+ ],
+ "returns": "String: the name of the node"
+ },
+ "setName": {
+ "description": [
+ "문자열로 설정된 요소 이름을 지정합니다."
+ ],
+ "params": {
+ "the": "String: new name of the node"
+ }
+ },
+ "hasChildren": {
+ "description": [
+ "요소의 자식 유무 여부를 확인하고, 그 결과를 불리언으로 반환합니다."
+ ],
+ "returns": "Boolean: "
+ },
+ "listChildren": {
+ "description": [
+ "모든 요소의 자식 이름을 가져와 그 값들을 문자열 배열로 반환합니다. 이는 각 자식 요소마다 getName()을 호출하는 것과 동일한 효과를 갖습니다."
+ ],
+ "returns": "String[]: names of the children of the element"
+ },
+ "getChildren": {
+ "description": [
+ "요소의 모든 자식을 p5.XML 객체 배열로 반환합니다. 이름 매개변수를 지정할 경우, 해당 변수명과 일치하는 모든 자식을 반환합니다."
+ ],
+ "returns": "p5.XML[]: children of the element",
+ "params": {
+ "name": "String: (Optional) element name"
+ }
+ },
+ "getChild": {
+ "description": [
+ "이름 매개변수 또는 지정된 인덱스의 자식과 일치하는 요소의 1번째 자식을 반환합니다. 일치하는 자식을 찾지 못하는 경우, 'undefined'를 반환합니다."
+ ],
+ "returns": "p5.XML: ",
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "addChild": {
+ "description": [
+ "요소에 새로운 자식을 추가합니다. 자식은 문자열로 지정될 수 있으며, 이는 새로운 태그명 또는 기존 p5.XML 객체에 대한 레퍼런스로서 사용할 수 있습니다. 새로 추가된 자식에 대한 레퍼런스는 p5.XML 객체로 반환됩니다. "
+ ],
+ "params": {
+ "node": "p5.XML: a p5.XML Object which will be the child to be added"
+ }
+ },
+ "removeChild": {
+ "description": [
+ "이름 또는 인덱스로 지정된 요소를 제거합니다"
+ ],
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "getAttributeCount": {
+ "description": [
+ "지정된 요소의 속성 개수를 숫자로 반환합니다."
+ ],
+ "returns": "Integer: "
+ },
+ "listAttributes": {
+ "description": [
+ "지정된 요소의 모든 속성을 가져와 문자열 배열로 반환합니다."
+ ],
+ "returns": "String[]: an array of strings containing the names of attributes"
+ },
+ "hasAttribute": {
+ "description": [
+ "요소가 지정된 속성을 갖는지 여부를 확인합니다."
+ ],
+ "returns": "Boolean: true if attribute found else false",
+ "params": {
+ "the": "String: attribute to be checked"
+ }
+ },
+ "getNum": {
+ "description": [
+ "요소의 속성값을 숫자로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 defaultValue를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 값 0을 반환합니다."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "getString": {
+ "description": [
+ "요소의 속성값을 문자열로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 null을 반환합니다."
+ ],
+ "returns": "String: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "setAttribute": {
+ "description": [
+ "요소 속성의 내용을 설정합니다. 1번째 매개변수는 속성명을, 2번째 매개변수는 새로운 내용을 지정합니다."
+ ],
+ "params": {
+ "name": "String: the full name of the attribute",
+ "value": "Number|String|Boolean: the value of the attribute"
+ }
+ },
+ "getContent": {
+ "description": [
+ "요소의 내용을 반환합니다. 매개변수 defaultValue가 지정되고 내용이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 내용이 존재하지 않으면 null을 반환합니다."
+ ],
+ "returns": "String: ",
+ "params": {
+ "defaultValue": "String: (Optional) value returned if no content is found"
+ }
+ },
+ "setContent": {
+ "description": [
+ "요소의 내용을 설정합니다."
+ ],
+ "params": {
+ "text": "String: the new content"
+ }
+ },
+ "serialize": {
+ "description": [
+ "요소를 문자열로 직렬화합니다. 요소의 내용을 http 요청으로 전송하거나 파일 저장을 준비할 때 사용됩니다."
+ ],
+ "returns": "String: Serialized string of the element"
+ }
+ },
+ "p5.Vector": {
+ "description": [
+ "2차원 및 3차원 벡터, 특히 유클리드 (기하학) 벡터를 설명하는 클래스입니다. 벡터는 크기와 방향을 모두 지닌 개체입니다. 하지만, 그 데이터 유형은 벡터의 성분(2D의 경우 x와 y, 3D의 경우 x, y, z)을 저장합니다. 크기와 방향은 각각 mag() 및 heading() 메소드를 통해 접근할 수 있습니다. p5.Vector는 위치, 속도, 가속을 다루는 수많은 p5.js 예제에서 사용됩니다. 예를 들어, 화면을 가로질러 움직이는 직사각형을 만들려면, 이 물체의 위치(원점에서 그 위치를 가리키는 벡터), 속도(단위 시간당 객체의 위치가 변하는 속도, 벡터로 표시), 그리고 가속도(단위 시간당 객체의 속도가 변하는 속도, 벡터로 표시)를 반드시 고려해야합니다. 벡터는 그룹화된 값들을 나타냅니다. 따라서, 전통적인 덧셈/곱셈 대신, p5.Vector 클래스 내부의 벡터 수학 메소드를 사용해서 계산해야 합니다.",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "숫자: 벡터의 x성분 (선택 사항)",
+ "y": "숫자: 벡터의 y성분 (선택 사항)",
+ "z": "숫자: 벡터의 z성분 (선택 사항)"
+ },
+ "x": {
+ "description": [
+ "벡터의 x성분"
+ ]
+ },
+ "y": {
+ "description": [
+ "벡터의 y성분"
+ ]
+ },
+ "z": {
+ "description": [
+ "벡터의 z성분"
+ ]
+ },
+ "set": {
+ "description": [
+ "두 세개의 개별 변수, p5.Vector 데이터, 또는 실수(float) 배열의 값들을 사용하여 벡터의 x, y, z성분을 설정합니다."
+ ],
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Number[]: the vector to set"
+ }
+ },
+ "copy": {
+ "description": [
+ "벡터의 복사본을 가져와 p5.Vector 객체를 반환합니다."
+ ],
+ "returns": "p5.Vector: the copy of the p5.Vector object"
+ },
+ "add": {
+ "description": [
+ "x, y, z성분을 벡터에 더하거나, 한 벡터를 다른 벡터에 더하거나, 또는 2개의 독립 벡터를 더합니다. 2개의 독립 벡터를 더하는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to be added",
+ "y": "Number: (Optional) the y component of the vector to be added",
+ "z": "Number: (Optional) the z component of the vector to be added",
+ "value": "p5.Vector|Number[]: the vector to add",
+ "v1": "p5.Vector: a p5.Vector to add",
+ "v2": "p5.Vector: a p5.Vector to add",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "rem": {
+ "description": [
+ "한 벡터를 다른 벡터로 나눈 뒤의 나머지 벡터를 제공합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "params": {
+ "x": "Number: the x component of divisor vector",
+ "y": "Number: the y component of divisor vector",
+ "z": "Number: the z component of divisor vector",
+ "value": "p5.Vector | Number[]: divisor vector",
+ "v1": "p5.Vector: dividend p5.Vector ",
+ "v2": "p5.Vector: divisor p5.Vector "
+ }
+ },
+ "sub": {
+ "description": [
+ "x, y, z성분을 벡터에서 빼거나, 한 벡터에서 다른 벡터를 빼거나, 또는 2개의 독립 벡터를 뺍니다. 2개의 독립 벡터를 빼는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to subtract",
+ "y": "Number: (Optional) the y component of the vector to subtract",
+ "z": "Number: (Optional) the z component of the vector to subtract",
+ "value": "p5.Vector|Number[]: the vector to subtract",
+ "v1": "p5.Vector: a p5.Vector to subtract from",
+ "v2": "p5.Vector: a p5.Vector to subtract",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "mult": {
+ "description": [
+ "벡터에 스칼라를 곱합니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "params": {
+ "n": "Number: The number to multiply with the vector",
+ "x": "Number: The number to multiply with the x component of the vector",
+ "y": "Number: The number to multiply with the y component of the vector",
+ "z": "Number: (Optional) The number to multiply with the z component of the vector",
+ "arr": "Number[]: The array to multiply with the components of the vector",
+ "v": "p5.Vector: The vector to multiply with the components of the original vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "div": {
+ "description": [
+ "벡터를 스칼라로 나눕니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "params": {
+ "n": "Number: The number to divide the vector by",
+ "x": "Number: The number to divide with the x component of the vector",
+ "y": "Number: The number to divide with the y component of the vector",
+ "z": "Number: (Optional) The number to divide with the z component of the vector",
+ "arr": "Number[]: The array to divide the components of the vector by",
+ "v": "p5.Vector: The vector to divide the components of the original vector by",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "mag": {
+ "description": [
+ "벡터의 크기(길이)를 계산하고 그 결과를 실수(float)으로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.)"
+ ],
+ "returns": "Number: magnitude of the vector",
+ "params": {
+ "vecT": "p5.Vector: the vector to return the magnitude of"
+ }
+ },
+ "magSq": {
+ "description": [
+ "벡터의 제곱 크기를 계산하고 그 결과를 실수(float)로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.) 벡터를 비교하는 등의 경우에서 실제 길이를 포함하지 않으면 더 빠르게 계산됩니다."
+ ],
+ "returns": "Number: squared magnitude of the vector"
+ },
+ "dot": {
+ "description": [
+ "두 벡터의 내적을 계산합니다. 2개의 독립 벡터의 내적을 계산하는 메소드는 정적 메소드에 해당합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "returns": "Number: the dot product",
+ "params": {
+ "x": "Number: x component of the vector",
+ "y": "Number: (Optional) y component of the vector",
+ "z": "Number: (Optional) z component of the vector",
+ "value": "p5.Vector: value component of the vector or a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "cross": {
+ "description": [
+ "두 벡터의 외적으로 구성된 벡터를 계산하고 반환합니다. 정적 및 비정적 메소드 모두 새로운 p5.Vector를 반환합니다. 자세한 내용은 예제를 참고하세요."
+ ],
+ "returns": "p5.Vector: p5.Vector composed of cross product",
+ "params": {
+ "v": "p5.Vector: p5.Vector to be crossed",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "dist": {
+ "description": [
+ "두 점 사이의 유클리드 거리를 계산합니다 (점을 벡터 객체로 간주)."
+ ],
+ "returns": "Number: the distance",
+ "params": {
+ "v": "p5.Vector: the x, y, and z coordinates of a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "normalize": {
+ "description": [
+ "벡터를 길이 1로 정규화합니다. (단위 벡터로 만듭니다.)"
+ ],
+ "returns": "p5.Vector: normalized p5.Vector "
+ },
+ "limit": {
+ "description": [
+ "벡터의 크기를 매개변수 max 의 값으로 제한합니다."
+ ],
+ "params": {
+ "max": "Number: the maximum magnitude for the vector"
+ }
+ },
+ "setMag": {
+ "description": [
+ "벡터의 크기를 매개변수 len 의 값으로 제한합니다."
+ ],
+ "params": {
+ "len": "Number: the new length for this vector"
+ }
+ },
+ "heading": {
+ "description": [
+ "벡터의 회전 각도를 계산합니다. (2D 벡터만 해당)"
+ ],
+ "returns": "Number: the angle of rotation"
+ },
+ "rotate": {
+ "description": [
+ "벡터를 특정 각도로 회전하되(2D 벡터만 해당), 크기는 동일하게 유지합니다."
+ ],
+ "params": {
+ "angle": "Number: the angle of rotation"
+ }
+ },
+ "angleBetween": {
+ "description": [
+ "두 벡터 사이의 각도(원주호, radian)를 계산하고 반환합니다."
+ ],
+ "returns": "Number: the angle between (in radians)",
+ "params": {
+ "value": "p5.Vector: the x, y, and z components of a p5.Vector "
+ }
+ },
+ "lerp": {
+ "description": [
+ "한 벡터와 다른 벡터를 선형적으로 보간합니다."
+ ],
+ "params": {
+ "x": "Number: the x component",
+ "y": "Number: the y component",
+ "z": "Number: the z component",
+ "amt": "Number: the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between.",
+ "v": "p5.Vector: the p5.Vector to lerp to",
+ "v1": "p5.Vector",
+ "v2": "p5.Vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "reflect": {
+ "description": [
+ "2D 선 또는 3D 평면의 법선에 들어오는 벡터를 반영합니다. 이 메소드는 벡터에 직접 작용합니다."
+ ],
+ "params": {
+ "surfaceNormal": "p5.Vector: the p5.Vector to reflect about, will be normalized by this method"
+ }
+ },
+ "array": {
+ "description": [
+ "벡터의 표현을 실수 배열로 반환합니다. 이는 일시적으로만 사용됩니다. 다른 경우에도, p5.Vector.copy() 메소드를 통해 배열에 내용을 복사해야 합니다."
+ ],
+ "returns": "Number[]: an Array with the 3 values"
+ },
+ "equals": {
+ "description": [
+ "p5.Vector에 대한 평등 검사"
+ ],
+ "returns": "Boolean: whether the vectors are equals",
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Array: the vector to compare"
+ }
+ },
+ "fromAngle": {
+ "description": [
+ "특정 각도에서 새로운 2D 벡터를 생성합니다."
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "angle": "Number: the desired angle, in radians (unaffected by angleMode )",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "fromAngles": {
+ "description": [
+ "Make a new 3D vector from a pair of ISO spherical angles"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "theta": "Number: the polar angle, in radians (zero is up)",
+ "phi": "Number: the azimuthal angle, in radians (zero is out of the screen)",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "random2D": {
+ "description": [
+ "임의의 각도에서 새로운 2D 단위 벡터를 생성합니다."
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ },
+ "random3D": {
+ "description": [
+ "새로운 임의의 3D 단위 벡터를 생성합니다."
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ }
+ },
+ "p5.Font": {
+ "description": [
+ "폰트 조정을 위한 기본 클래스"
+ ],
+ "params": {
+ "pInst": "P5: p5 인스턴스 포인터 (선택 사항)"
+ },
+ "font": {
+ "description": [
+ "기본 개방형 글꼴 구현"
+ ]
+ },
+ "textBounds": {
+ "description": [
+ "이 폰트로 지정된 텍스트 문자열에 대한 바운딩 박스를 반환합니다. (현재 텍스트 한 줄씩만 지원합니다.)"
+ ],
+ "returns": "Object: a rectangle object with properties: x, y, w, h",
+ "params": {
+ "line": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: (Optional) font size to use (optional) Default is 12.",
+ "options": "Object: (Optional) opentype options (optional) opentype fonts contains alignment and baseline options. Default is 'LEFT' and 'alphabetic'"
+ }
+ },
+ "textToPoints": {
+ "description": [
+ "지정된 텍스트 경로를 따르는 점들의 배열을 계산합니다."
+ ],
+ "returns": "Array: an array of points, each with x, y, alpha (the path angle)",
+ "params": {
+ "txt": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: font size to use (optional)",
+ "options": "Object: (Optional) an (optional) object that can contain: sampleFactor - the ratio of path-length to number of samples (default=.1); higher values yield more points and are therefore more precise simplifyThreshold - if set to a non-zero value, collinear points will be be removed from the polygon; the value represents the threshold angle to use when determining whether two edges are collinear"
+ }
+ }
+ },
+ "p5.Camera": {
+ "description": [
+ "p5의 WebGL 모드 용 카메라를 위한 클래스입니다. 3D씬 렌더링에 필요한 카메라 위치, 방향, 투영 정보 등을 포함합니다. createCamera()로 새로운 p5.Camera 객체를 생성하고, 아래의 메소드들을 통해 이를 제어할 수 있습니다. 이러한 방식으로 생성된 카메라는, 여타 메소드들을 통해 변경하지 않는 한, 화면에 기본값으로 설정된 위치 및 투시 투영법을 사용합니다. 여러 대의 카메라 생성 또한 가능한데, 이 경우 setCamera() 메소드로 현재 카메라를 설정할 수 있습니다. 참고: 아래의 메소드들은 다음 2개의 좌표계에서 작동합니다: 월드 좌표계는 X,Y,Z축 상의 원점에 대한 위치를 나타내는 반면, 로컬 좌표계는 카메라 시점에서의 위치(좌-우, 위-아래, 앞-뒤)를 나타냅니다. move() 메소드는 카메라의 자체 축을 따라 움직이는 반면, setPosition()은 월드 스페이스에서의 카메라의 위치를 설정합니다.",
+ "",
+ ""
+ ],
+ "params": {
+ "rendererGL": "RendererGL: instance of WebGL renderer"
+ },
+ "perspective": {
+ "description": [
+ "p5.Camera 객체의 투시 투영법을 설정하고, perspective() 구문에 따라 해당 투영법의 매개변수를 설정합니다."
+ ]
+ },
+ "ortho": {
+ "description": [
+ "p5.Camera 객체의 직교 투영법을 설정하고, ortho() 구문에 따라 해당 투영법의 매개변수를 설정합니다."
+ ]
+ },
+ "frustum": {},
+ "pan": {
+ "description": [
+ "패닝은 카메라 화면을 좌우로 회전합니다."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "tilt": {
+ "description": [
+ "틸트는 카메라 화면을 상하로 회전합니다."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "lookAt": {
+ "description": [
+ "월드 스페이스 위치에서 보도록 카메라 방향을 조정합니다."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ },
+ "camera": {
+ "description": [
+ "카메라의 위치와 방향을 설정합니다. p5.Camera 객체에 camera()를 호출하는 것과 동일한 효과를 갖습니다."
+ ]
+ },
+ "move": {
+ "description": [
+ "현재 카메라 방향을 유지하면서 그 로컬축을 따라 이동합니다."
+ ],
+ "params": {
+ "x": "Number: amount to move along camera's left-right axis",
+ "y": "Number: amount to move along camera's up-down axis",
+ "z": "Number: amount to move along camera's forward-backward axis"
+ }
+ },
+ "setPosition": {
+ "description": [
+ "현재 카메라 방향을 유지하면서 카메라의 위치를 월드 스페이스에서의 위치로 설정합니다."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ }
+ },
+ "p5.Geometry": {
+ "description": [
+ "p5 기하 클래스"
+ ],
+ "params": {
+ "detailX": "정수: 수평 표면 위의 꼭지점 개수 (선택 사항)",
+ "detailY": "정수: 수직 표면 위의 꼭지점 개수 (선택 사항)",
+ "callback": "함수: 객체를 인스턴스화할 때 호출할 함수"
+ },
+ "computeFaces": {
+ "description": [
+ "computes faces for geometry objects based on the vertices."
+ ]
+ },
+ "computeNormals": {
+ "description": [
+ "꼭지점 당 부드러운 법선을 각 면의 평균으로서 계산합니다."
+ ]
+ },
+ "averageNormals": {
+ "description": [
+ "꼭지점 법선의 평균을 구합니다. 곡면에 사용됩니다."
+ ]
+ },
+ "averagePoleNormals": {
+ "description": [
+ "극점 법선의 평균을 구합니다. 구형의 기초 조형에 사용됩니다."
+ ]
+ },
+ "normalize": {
+ "description": [
+ "모든 꼭지점이 -100부터 100사이의 중심에 오도록 수정합니다."
+ ]
+ }
+ },
+ "p5.Shader": {
+ "description": [
+ "WebGL 모드를 위한 셰이더 클래스"
+ ],
+ "params": {
+ "renderer": "p5.RendererGL: 새로운 p5.Shader에 GL 문맥을 제공하는 p5.RendererGL 인스턴스",
+ "vertSrc": "문자열: 버텍스 셰이더의 소스 코드 (문자열 형식)",
+ "fragSrc": "문자열: 프래그먼트 셰이더의 소스 코드 (문자열 형식)"
+ },
+ "setUniform": {
+ "description": [
+ "Wrapper around gl.uniform functions. As we store uniform info in the shader we can use that to do type checking on the supplied data and call the appropriate function."
+ ],
+ "params": {
+ "uniformName": "String: the name of the uniform in the shader program",
+ "data": "Object|Number|Boolean|Number[]: the data to be associated with that uniform; type varies (could be a single numerical value, array, matrix, or texture / sampler reference)"
+ }
+ }
+ },
+ "p5.sound": {
+ "getMasterVolume": {
+ "description": [
+ "Returns a number representing the master amplitude (volume) for sound in this sketch."
+ ],
+ "returns": "Number: Master amplitude (volume) for sound in this sketch. Should be between 0.0 (silence) and 1.0."
+ },
+ "masterVolume": {
+ "description": [
+ "Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal. ",
+ "How This Works : When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module. ",
+ "If no value is provided, returns a Web Audio API Gain Node"
+ ],
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
+ },
+ "soundOut": {
+ "description": [
+ "p5.soundOut is the p5.sound master output. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output."
+ ]
+ }
+ },
+ "p5.Effect": {
+ "description": [
+ "Effect is a base class for audio effects in p5. This module handles the nodes and methods that are common and useful for current and future effects. ",
+ "This class is extended by p5.Distortion , p5.Compressor , p5.Delay , p5.Filter , p5.Reverb ."
+ ],
+ "params": {
+ "ac": "Object: (Optional) Reference to the audio context of the p5 object",
+ "input": "AudioNode: (Optional) Gain Node effect wrapper",
+ "output": "AudioNode: (Optional) Gain Node effect wrapper",
+ "_drywet": "Object: (Optional) Tone.JS CrossFade node (defaults to value: 1)",
+ "wet": "AudioNode: (Optional) Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly."
+ },
+ "amp": {
+ "description": [
+ "Set the output volume of the filter."
+ ],
+ "params": {
+ "vol": "Number: (Optional) amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts until rampTime",
+ "tFromNow": "Number: (Optional) schedule this event to happen in tFromNow seconds"
+ }
+ },
+ "chain": {
+ "description": [
+ "Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments"
+ ],
+ "params": {
+ "arguments": "Object: (Optional) Chain together multiple sound objects"
+ }
+ },
+ "drywet": {
+ "description": [
+ "Adjust the dry/wet value."
+ ],
+ "params": {
+ "fade": "Number: (Optional) The desired drywet value (0 - 1.0)"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Filter": {
+ "description": [
+ "A p5.Filter uses a Web Audio Biquad Filter to filter the frequency response of an input source. Subclasses include: p5.LowPass : Allows frequencies below the cutoff frequency to pass through, and attenuates frequencies above the cutoff. p5.HighPass : The opposite of a lowpass filter. p5.BandPass : Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. ",
+ "The .res() method controls either width of the bandpass, or resonance of the low/highpass cutoff frequency. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "params": {
+ "type": "String: (Optional) 'lowpass' (default), 'highpass', 'bandpass'"
+ },
+ "biquadFilter": {
+ "description": [
+ "The p5.Filter is built with a Web Audio BiquadFilter Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Filter an audio signal according to a set of filter parameters."
+ ],
+ "params": {
+ "Signal": "Object: An object that outputs audio",
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance/Width of the filter frequency from 0.001 to 1000"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the frequency and the resonance of the filter."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance (Q) from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set the filter frequency, in Hz, from 10 to 22050 (the range of human hearing, although in reality most people hear in a narrower range)."
+ ],
+ "returns": "Number: value Returns the current frequency value",
+ "params": {
+ "freq": "Number: Filter Frequency",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "res": {
+ "description": [
+ "Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency."
+ ],
+ "returns": "Number: value Returns the current res value",
+ "params": {
+ "res": "Number: Resonance/Width of filter freq from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "gain": {
+ "description": [
+ "Controls the gain attribute of a Biquad Filter. This is distinctly different from .amp() which is inherited from p5.Effect .amp() controls the volume via the output gain node p5.Filter.gain() controls the gain parameter of a Biquad Filter node."
+ ],
+ "returns": "Number: Returns the current or updated gain value",
+ "params": {
+ "gain": "Number"
+ }
+ },
+ "toggle": {
+ "description": [
+ "Toggle function. Switches between the specified type and allpass"
+ ],
+ "returns": "Boolean: [Toggle value]"
+ },
+ "setType": {
+ "description": [
+ "Set the type of a p5.Filter. Possible types include: \"lowpass\" (default), \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"peaking\", \"notch\", \"allpass\"."
+ ],
+ "params": {
+ "t": "String"
+ }
+ }
+ },
+ "p5.LowPass": {
+ "description": [
+ "Constructor: new p5.LowPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('lowpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.HighPass": {
+ "description": [
+ "Constructor: new p5.HighPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('highpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.BandPass": {
+ "description": [
+ "Constructor: new p5.BandPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('bandpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.Oscillator": {
+ "description": [
+ "Creates a signal that oscillates between -1.0 and 1.0. By default, the oscillation takes the form of a sinusoidal shape ('sine'). Additional types include 'triangle', 'sawtooth' and 'square'. The frequency defaults to 440 oscillations per second (440Hz, equal to the pitch of an 'A' note). ",
+ "Set the type of oscillation with setType(), or by instantiating a specific oscillator: p5.SinOsc , p5.TriOsc , p5.SqrOsc , or p5.SawOsc . "
+ ],
+ "params": {
+ "freq": "Number: (Optional) frequency defaults to 440Hz",
+ "type": "String: (Optional) type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square'"
+ },
+ "start": {
+ "description": [
+ "Start an oscillator. ",
+ "Starting an oscillator on a user gesture will enable audio in browsers that have a strict autoplay policy, including Chrome and most mobile devices. See also: userStartAudio()."
+ ],
+ "params": {
+ "time": "Number: (Optional) startTime in seconds from now.",
+ "frequency": "Number: (Optional) frequency in Hz."
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops."
+ ],
+ "params": {
+ "secondsFromNow": "Number: Time, in seconds from now."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal."
+ ],
+ "returns": "AudioParam: gain If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's gain/amplitude/volume)",
+ "params": {
+ "vol": "Number|Object: between 0 and 1.0 or a modulating signal/oscillator",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set frequency of an oscillator to a value. Or, pass in an object such as an oscillator to modulate the frequency with an audio signal."
+ ],
+ "returns": "AudioParam: Frequency If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's frequency",
+ "params": {
+ "Frequency": "Number|Object: Frequency in Hz or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Ramp time (in seconds)",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at x seconds from now"
+ }
+ },
+ "setType": {
+ "description": [
+ "Set type to 'sine', 'triangle', 'sawtooth' or 'square'."
+ ],
+ "params": {
+ "type": "String: 'sine', 'triangle', 'sawtooth' or 'square'."
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "pan": {
+ "description": [
+ "Pan between Left (-1) and Right (1)"
+ ],
+ "params": {
+ "panning": "Number: Number between -1 and 1",
+ "timeFromNow": "Number: schedule this event to happen seconds from now"
+ }
+ },
+ "phase": {
+ "description": [
+ "Set the phase of an oscillator between 0.0 and 1.0. In this implementation, phase is a delay time based on the oscillator's current frequency."
+ ],
+ "params": {
+ "phase": "Number: float between 0.0 and 1.0"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "number": "Number: Constant number to add"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the p5.Oscillator's output amplitude by a fixed value (i.e. turn it up!). Calling this method again will override the initial mult() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with multiplied output",
+ "params": {
+ "number": "Number: Constant number to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this oscillator's amplitude values to a given range, and return the oscillator. Calling this method again will override the initial scale() with new values."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.SinOsc": {
+ "description": [
+ "Constructor: new p5.SinOsc(). This creates a Sine Wave Oscillator and is equivalent to new p5.Oscillator('sine') or creating a p5.Oscillator and then calling its method setType('sine'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.TriOsc": {
+ "description": [
+ "Constructor: new p5.TriOsc(). This creates a Triangle Wave Oscillator and is equivalent to new p5.Oscillator('triangle') or creating a p5.Oscillator and then calling its method setType('triangle'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SawOsc": {
+ "description": [
+ "Constructor: new p5.SawOsc(). This creates a SawTooth Wave Oscillator and is equivalent to new p5.Oscillator('sawtooth') or creating a p5.Oscillator and then calling its method setType('sawtooth'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SqrOsc": {
+ "description": [
+ "Constructor: new p5.SqrOsc(). This creates a Square Wave Oscillator and is equivalent to new p5.Oscillator('square') or creating a p5.Oscillator and then calling its method setType('square'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.MonoSynth": {
+ "description": [
+ "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthesizers should be built inheriting from this class."
+ ],
+ "play": {
+ "description": [
+ "Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope. Defaults to 0.15 seconds."
+ }
+ },
+ "triggerAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play"
+ }
+ },
+ "triggerRelease": {
+ "description": [
+ "Trigger the release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "secondsFromNow": "Number: time to trigger the release"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set values like a traditional ADSR envelope ."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "attack": {
+ "description": [
+ "Getters and Setters"
+ ]
+ },
+ "decay": {},
+ "sustain": {},
+ "release": {},
+ "amp": {
+ "description": [
+ "MonoSynth amp"
+ ],
+ "returns": "Number: new volume value",
+ "params": {
+ "vol": "Number: desired volume",
+ "rampTime": "Number: (Optional) Time to reach new volume"
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.AudioVoice": {
+ "description": [
+ "Base class for monophonic synthesizers. Any extensions of this class should follow the API and implement the methods below in order to remain compatible with p5.PolySynth();"
+ ],
+ "connect": {
+ "description": [
+ "Connect to p5 objects or Web Audio Nodes"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect from soundOut"
+ ]
+ }
+ },
+ "p5.PolySynth": {
+ "description": [
+ "An AudioVoice is used as a single voice for sound synthesis. The PolySynth class holds an array of AudioVoice, and deals with voices allocations, with setting notes to be played, and parameters to be set."
+ ],
+ "params": {
+ "synthVoice": "Number: (Optional) A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth",
+ "maxVoices": "Number: (Optional) Number of voices, defaults to 8;"
+ },
+ "notes": {
+ "description": [
+ "An object that holds information about which notes have been played and which notes are currently being played. New notes are added as keys on the fly. While a note has been attacked, but not released, the value of the key is the audiovoice which is generating that note. When notes are released, the value of the key becomes undefined."
+ ]
+ },
+ "polyvalue": {
+ "description": [
+ "A PolySynth must have at least 1 voice, defaults to 8"
+ ]
+ },
+ "AudioVoice": {
+ "description": [
+ "Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice."
+ ]
+ },
+ "play": {
+ "description": [
+ "Play a note by triggering noteAttack and noteRelease with sustain time"
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note to play (ranging from 0 to 127 - 60 being a middle C)",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
+ },
+ "noteADSR": {
+ "description": [
+ "noteADSR sets the envelope for a specific note that has just been triggered. Using this method modifies the envelope of whichever audiovoice is being used to play the desired note. The envelope should be reset before noteRelease is called in order to prevent the modified envelope from being used on other notes."
+ ],
+ "params": {
+ "note": "Number: (Optional) Midi note on which ADSR should be set.",
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope."
+ ],
+ "params": {
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "noteAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of a MonoSynth. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note on which attack should be triggered.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)/",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds)"
+ }
+ },
+ "noteRelease": {
+ "description": [
+ "Trigger the Release of an AudioVoice note. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note on which attack should be triggered. If no value is provided, all notes will be released.",
+ "secondsFromNow": "Number: (Optional) time to trigger the release"
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.SoundFile": {
+ "description": [
+ "SoundFile object with a path to a file. ",
+ "The p5.SoundFile may not be available immediately because it loads the file information asynchronously. ",
+ "To do something with the sound as soon as it loads pass the name of a function as the second parameter. ",
+ "Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatibility, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works."
+ ],
+ "params": {
+ "path": "String|Array: path to a sound file (String). Optionally, you may include multiple file formats in an array. Alternately, accepts an object from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if file fails to load. This function will receive an error or XMLHttpRequest object with information about what went wrong.",
+ "whileLoadingCallback": "Function: (Optional) Name of a function to call while file is loading. That function will receive progress of the request to load the sound file (between 0 and 1) as its first parameter. This progress does not account for the additional time needed to decode the audio data."
+ },
+ "isLoaded": {
+ "description": [
+ "Returns true if the sound file finished loading successfully."
+ ],
+ "returns": "Boolean: "
+ },
+ "play": {
+ "description": [
+ "Play the p5.SoundFile"
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule playback to start (in seconds from now).",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) amplitude (volume) of playback",
+ "cueStart": "Number: (Optional) (optional) cue start time in seconds",
+ "duration": "Number: (Optional) (optional) duration of playback in seconds"
+ }
+ },
+ "playMode": {
+ "description": [
+ "p5.SoundFile has two play modes: restart and sustain. Play Mode determines what happens to a p5.SoundFile if it is triggered while in the middle of playback. In sustain mode, playback will continue simultaneous to the new playback. In restart mode, play() will stop playback and start over. With untilDone, a sound will play only if it's not already playing. Sustain is the default mode."
+ ],
+ "params": {
+ "str": "String: 'restart' or 'sustain' or 'untilDone'"
+ }
+ },
+ "pause": {
+ "description": [
+ "Pauses a file that is currently playing. If the file is not playing, then nothing will happen. ",
+ "After pausing, .play() will resume from the paused position. If p5.SoundFile had been set to loop before it was paused, it will continue to loop after it is unpaused with .play()."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now"
+ }
+ },
+ "loop": {
+ "description": [
+ "Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) playback volume",
+ "cueLoopStart": "Number: (Optional) (optional) startTime in seconds",
+ "duration": "Number: (Optional) (optional) loop duration in seconds"
+ }
+ },
+ "setLoop": {
+ "description": [
+ "Set a p5.SoundFile's looping flag to true or false. If the sound is currently playing, this change will take effect when it reaches the end of the current playback."
+ ],
+ "params": {
+ "Boolean": "Boolean: set looping to true or false"
+ }
+ },
+ "isLooping": {
+ "description": [
+ "Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPlaying": {
+ "description": [
+ "Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPaused": {
+ "description": [
+ "Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "stop": {
+ "description": [
+ "Stop soundfile playback."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur in seconds from now"
+ }
+ },
+ "setVolume": {
+ "description": [
+ "Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal."
+ ],
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
+ },
+ "pan": {
+ "description": [
+ "Set the stereo panning of a p5.sound object to a floating point number between -1.0 (left) and 1.0 (right). Default is 0.0 (center)."
+ ],
+ "params": {
+ "panValue": "Number: (Optional) Set the stereo panner",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "getPan": {
+ "description": [
+ "Returns the current stereo pan position (-1.0 to 1.0)"
+ ],
+ "returns": "Number: Returns the stereo pan setting of the Oscillator as a number between -1.0 (left) and 1.0 (right). 0.0 is center and default."
+ },
+ "rate": {
+ "description": [
+ "Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer."
+ ],
+ "params": {
+ "playbackRate": "Number: (Optional) Set the playback rate. 1.0 is normal, .5 is half-speed, 2.0 is twice as fast. Values less than zero play backwards."
+ }
+ },
+ "duration": {
+ "description": [
+ "Returns the duration of a sound file in seconds."
+ ],
+ "returns": "Number: The duration of the soundFile in seconds."
+ },
+ "currentTime": {
+ "description": [
+ "Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards."
+ ],
+ "returns": "Number: currentTime of the soundFile in seconds."
+ },
+ "jump": {
+ "description": [
+ "Move the playhead of a soundfile that is currently playing to a new position and a new duration, in seconds. If none are given, will reset the file to play entire duration from start to finish. To set the position of a soundfile that is not currently playing, use the play or loop methods."
+ ],
+ "params": {
+ "cueTime": "Number: cueTime of the soundFile in seconds.",
+ "duration": "Number: duration in seconds."
+ }
+ },
+ "channels": {
+ "description": [
+ "Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2."
+ ],
+ "returns": "Number: [channels]"
+ },
+ "sampleRate": {
+ "description": [
+ "Return the sample rate of the sound file."
+ ],
+ "returns": "Number: [sampleRate]"
+ },
+ "frames": {
+ "description": [
+ "Return the number of samples in a sound file. Equal to sampleRate * duration."
+ ],
+ "returns": "Number: [sampleCount]"
+ },
+ "getPeaks": {
+ "description": [
+ "Returns an array of amplitude peaks in a p5.SoundFile that can be used to draw a static waveform. Scans through the p5.SoundFile's audio buffer to find the greatest amplitudes. Accepts one parameter, 'length', which determines size of the array. Larger arrays result in more precise waveform visualizations. ",
+ "Inspired by Wavesurfer.js."
+ ],
+ "returns": "Float32Array: Array of peaks.",
+ "params": {
+ "length": "Number: (Optional) length is the size of the returned array. Larger length results in more precision. Defaults to 5*width of the browser window."
+ }
+ },
+ "reverseBuffer": {
+ "description": [
+ "Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example)."
+ ]
+ },
+ "onended": {
+ "description": [
+ "Schedule an event to be called when the soundfile reaches the end of a buffer. If the soundfile is playing through once, this will be called when it ends. If it is looping, it will be called when stop is called."
+ ],
+ "params": {
+ "callback": "Function: function to call when the soundfile has ended."
+ }
+ },
+ "connect": {
+ "description": [
+ "Connects the output of a p5sound object to input of another p5.sound object. For example, you may connect a p5.SoundFile to an FFT or an Effect. If no parameter is given, it will connect to the master output. Most p5sound objects connect to the master output when they are created."
+ ],
+ "params": {
+ "object": "Object: (Optional) Audio object that accepts an input"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnects the output of this p5sound object."
+ ]
+ },
+ "setPath": {
+ "description": [
+ "Reset the source for this SoundFile to a new path (URL)."
+ ],
+ "params": {
+ "path": "String: path to audio file",
+ "callback": "Function: Callback"
+ }
+ },
+ "setBuffer": {
+ "description": [
+ "Replace the current Audio Buffer with a new Buffer."
+ ],
+ "params": {
+ "buf": "Array: Array of Float32 Array(s). 2 Float32 Arrays will create a stereo source. 1 will create a mono source."
+ }
+ },
+ "processPeaks": {
+ "description": [
+ "processPeaks returns an array of timestamps where it thinks there is a beat. ",
+ "This is an asynchronous function that processes the soundfile in an offline audio context, and sends the results to your callback function. ",
+ "The process involves running the soundfile through a lowpass filter, and finding all of the peaks above the initial threshold. If the total number of peaks are below the minimum number of peaks, it decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached."
+ ],
+ "returns": "Array: Array of timestamped peaks",
+ "params": {
+ "callback": "Function: a function to call once this data is returned",
+ "initThreshold": "Number: (Optional) initial threshold defaults to 0.9",
+ "minThreshold": "Number: (Optional) minimum threshold defaults to 0.22",
+ "minPeaks": "Number: (Optional) minimum number of peaks defaults to 200"
+ }
+ },
+ "addCue": {
+ "description": [
+ "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. ",
+ "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. ",
+ "Time will be passed as the first parameter to the callback function, and param will be the second parameter."
+ ],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
+ "params": {
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "Remove a callback based on its ID. The ID is returned by the addCue method."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "Remove all of the callbacks that had originally been scheduled via the addCue method."
+ ]
+ },
+ "save": {
+ "description": [
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. To upload a file to a server, see getBlob "
+ ],
+ "params": {
+ "fileName": "String: (Optional) name of the resulting .wav file."
+ }
+ },
+ "getBlob": {
+ "description": [
+ "This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a \"Blob \". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData."
+ ],
+ "returns": "Blob: A file-like data object"
+ }
+ },
+ "p5.Amplitude": {
+ "description": [
+ "Amplitude measures volume between 0.0 and 1.0. Listens to all p5sound by default, or use setInput() to listen to a specific sound source. Accepts an optional smoothing value, which defaults to 0."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) between 0.0 and .999 to smooth amplitude readings (defaults to 0)"
+ },
+ "setInput": {
+ "description": [
+ "Connects to the p5sound instance (master output) by default. Optionally, you can pass in a specific source (i.e. a soundfile)."
+ ],
+ "params": {
+ "snd": "SoundObject|undefined: (Optional) set the sound source (optional, defaults to master output)",
+ "smoothing": "Number|undefined: (Optional) a range between 0.0 and 1.0 to smooth amplitude readings"
+ }
+ },
+ "getLevel": {
+ "description": [
+ "Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop."
+ ],
+ "returns": "Number: Amplitude as a number between 0.0 and 1.0",
+ "params": {
+ "channel": "Number: (Optional) Optionally return only channel 0 (left) or 1 (right)"
+ }
+ },
+ "toggleNormalize": {
+ "description": [
+ "Determines whether the results of Amplitude.process() will be Normalized. To normalize, Amplitude finds the difference the loudest reading it has processed and the maximum amplitude of 1.0. Amplitude adds this difference to all values to produce results that will reliably map between 0.0 and 1.0. However, if a louder moment occurs, the amount that Normalize adds to all the values will change. Accepts an optional boolean parameter (true or false). Normalizing is off by default."
+ ],
+ "params": {
+ "boolean": "Boolean: (Optional) set normalize to true (1) or false (0)"
+ }
+ },
+ "smooth": {
+ "description": [
+ "Smooth Amplitude analysis by averaging with the last analysis frame. Off by default."
+ ],
+ "params": {
+ "set": "Number: smoothing from 0.0 <= 1"
+ }
+ }
+ },
+ "p5.FFT": {
+ "description": [
+ "FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform. ",
+ "Once instantiated, a p5.FFT object can return an array based on two types of analyses: • FFT.waveform() computes amplitude values along the time domain. The array indices correspond to samples across a brief moment in time. Each value represents amplitude of the waveform at that sample of time. • FFT.analyze() computes amplitude values along the frequency domain. The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Use with getEnergy() to measure amplitude at specific frequencies, or within a range of frequencies. ",
+ "FFT analyzes a very short snapshot of sound called a sample buffer. It returns an array of amplitude measurements, referred to as bins. The array is 1024 bins long by default. You can change the bin array length, but it must be a power of 2 between 16 and 1024 in order for the FFT algorithm to function correctly. The actual size of the FFT buffer is twice the number of bins, so given a standard sample rate, the buffer is 2048/44100 seconds long."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8.",
+ "bins": "Number: (Optional) Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024."
+ },
+ "setInput": {
+ "description": [
+ "Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch."
+ ],
+ "params": {
+ "source": "Object: (Optional) p5.sound object (or web audio API source node)"
+ }
+ },
+ "waveform": {
+ "description": [
+ "Returns an array of amplitude values (between -1.0 and +1.0) that represent a snapshot of amplitude readings in a single buffer. Length will be equal to bins (defaults to 1024). Can be used to draw the waveform of a sound."
+ ],
+ "returns": "Array: Array Array of amplitude values (-1 to 1) over time. Array length = bins.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "precision": "String: (Optional) If any value is provided, will return results in a Float32 Array which is more precise than a regular array."
+ }
+ },
+ "analyze": {
+ "description": [
+ "Returns an array of amplitude values (between 0 and 255) across the frequency spectrum. Length is equal to FFT bins (1024 by default). The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Must be called prior to using getEnergy()."
+ ],
+ "returns": "Array: spectrum Array of energy (amplitude/volume) values across the frequency spectrum. Lowest energy (silence) = 0, highest possible is 255.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "scale": "Number: (Optional) If \"dB,\" returns decibel float measurements between -140 and 0 (max). Otherwise returns integers from 0-255."
+ }
+ },
+ "getEnergy": {
+ "description": [
+ "Returns the amount of energy (volume) at a specific frequency , or the average amount of energy between two frequencies. Accepts Number(s) corresponding to frequency (in Hz), or a String corresponding to predefined frequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\"). Returns a range between 0 (no energy/volume at that frequency) and 255 (maximum energy). NOTE: analyze() must be called prior to getEnergy(). Analyze() tells the FFT to analyze frequency data, and getEnergy() uses the results determine the value at a specific frequency or range of frequencies. "
+ ],
+ "returns": "Number: Energy Energy (volume/amplitude) from 0 and 255.",
+ "params": {
+ "frequency1": "Number|String: Will return a value representing energy at this frequency. Alternately, the strings \"bass\", \"lowMid\" \"mid\", \"highMid\", and \"treble\" will return predefined frequency ranges.",
+ "frequency2": "Number: (Optional) If a second frequency is given, will return average amount of energy that exists between the two frequencies."
+ }
+ },
+ "getCentroid": {
+ "description": [
+ "Returns the spectral centroid of the input signal. NOTE: analyze() must be called prior to getCentroid(). Analyze() tells the FFT to analyze frequency data, and getCentroid() uses the results determine the spectral centroid. "
+ ],
+ "returns": "Number: Spectral Centroid Frequency Frequency of the spectral centroid in Hz."
+ },
+ "smooth": {
+ "description": [
+ "Smooth FFT analysis by averaging with the last analysis frame."
+ ],
+ "params": {
+ "smoothing": "Number: 0.0 < smoothing < 1.0. Defaults to 0.8."
+ }
+ },
+ "linAverages": {
+ "description": [
+ "Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. NOTE: analyze() must be called prior to linAverages(). Analyze() tells the FFT to analyze frequency data, and linAverages() uses the results to group them into a smaller set of averages. "
+ ],
+ "returns": "Array: linearAverages Array of average amplitude values for each group",
+ "params": {
+ "N": "Number: Number of returned frequency groups"
+ }
+ },
+ "logAverages": {
+ "description": [
+ "Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands NOTE: analyze() must be called prior to logAverages(). Analyze() tells the FFT to analyze frequency data, and logAverages() uses the results to group them into a smaller set of averages. "
+ ],
+ "returns": "Array: logAverages Array of average amplitude values for each group",
+ "params": {
+ "octaveBands": "Array: Array of Octave Bands objects for grouping"
+ }
+ },
+ "getOctaveBands": {
+ "description": [
+ "Calculates and Returns the 1/N Octave Bands N defaults to 3 and minimum central frequency to 15.625Hz. (1/3 Octave Bands ~= 31 Frequency Bands) Setting fCtr0 to a central value of a higher octave will ignore the lower bands and produce less frequency groups."
+ ],
+ "returns": "Array: octaveBands Array of octave band objects with their bounds",
+ "params": {
+ "N": "Number: Specifies the 1/N type of generated octave bands",
+ "fCtr0": "Number: Minimum central frequency for the lowest band"
+ }
+ }
+ },
+ "p5.Signal": {
+ "description": [
+ "p5.Signal is a constant audio-rate signal used by p5.Oscillator and p5.Envelope for modulation math. ",
+ "This is necessary because Web Audio is processed on a separate clock. For example, the p5 draw loop runs about 60 times per second. But the audio clock must process samples 44100 times per second. If we want to add a value to each of those samples, we can't do it in the draw loop, but we can do it by adding a constant-rate audio signal.tone.js."
+ ],
+ "returns": "Tone.Signal: A Signal object from the Tone.js library",
+ "fade": {
+ "description": [
+ "Fade to value, for smooth transitions"
+ ],
+ "params": {
+ "value": "Number: Value to set this signal",
+ "secondsFromNow": "Number: (Optional) Length of fade, in seconds from now"
+ }
+ },
+ "setInput": {
+ "description": [
+ "Connect a p5.sound object or Web Audio node to this p5.Signal so that its amplitude values can be scaled."
+ ],
+ "params": {
+ "input": "Object"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a constant value to this audio signal, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalAdd."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply this signal by a constant value, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalMult."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this signal value to a given range, and return the result as an audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalScale."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply",
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Envelope": {
+ "description": [
+ "Envelopes are pre-defined amplitude distribution over time. Typically, envelopes are used to control the output volume of an object, a series of fades referred to as Attack, Decay, Sustain and Release ( ADSR ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can control an Oscillator's frequency like this: osc.freq(env). ",
+ "Use setRange to change the attack/release level. Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime. ",
+ "Use the play method to play the entire envelope, the ramp method for a pingable trigger, or triggerAttack / triggerRelease to trigger noteOn/noteOff."
+ ],
+ "attackTime": {
+ "description": [
+ "Time until envelope reaches attackLevel"
+ ]
+ },
+ "attackLevel": {
+ "description": [
+ "Level once attack is complete."
+ ]
+ },
+ "decayTime": {
+ "description": [
+ "Time until envelope reaches decayLevel."
+ ]
+ },
+ "decayLevel": {
+ "description": [
+ "Level after decay. The envelope will sustain here until it is released."
+ ]
+ },
+ "releaseTime": {
+ "description": [
+ "Duration of the release portion of the envelope."
+ ]
+ },
+ "releaseLevel": {
+ "description": [
+ "Level at the end of the release."
+ ]
+ },
+ "set": {
+ "description": [
+ "Reset the envelope with a series of time/value pairs."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds) before level reaches attackLevel",
+ "attackLevel": "Number: Typically an amplitude between 0.0 and 1.0",
+ "decayTime": "Number: Time",
+ "decayLevel": "Number: Amplitude (In a standard ADSR envelope, decayLevel = sustainLevel)",
+ "releaseTime": "Number: Release Time (in seconds)",
+ "releaseLevel": "Number: Amplitude"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set values like a traditional ADSR envelope ."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "setRange": {
+ "description": [
+ "Set max (attackLevel) and min (releaseLevel) of envelope."
+ ],
+ "params": {
+ "aLevel": "Number: attack level (defaults to 1)",
+ "rLevel": "Number: release level (defaults to 0)"
+ }
+ },
+ "setInput": {
+ "description": [
+ "Assign a parameter to be controlled by this envelope. If a p5.Sound object is given, then the p5.Envelope will control its output gain. If multiple inputs are provided, the env will control all of them."
+ ],
+ "params": {
+ "inputs": "Object: (Optional) A p5.sound object or Web Audio Param."
+ }
+ },
+ "setExp": {
+ "description": [
+ "Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically."
+ ],
+ "params": {
+ "isExp": "Boolean: true is exponential, false is linear"
+ }
+ },
+ "play": {
+ "description": [
+ "Play tells the envelope to start acting on a given input. If the input is a p5.sound object (i.e. AudioIn, Oscillator, SoundFile), then Envelope will control its output volume. Envelopes can also be used to control any Web Audio Audio Param. "
+ ],
+ "params": {
+ "unit": "Object: A p5.sound object or Web Audio Param.",
+ "startTime": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
+ },
+ "triggerAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go. Input can be any p5.sound object, or a Web Audio Param ."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time from now (in seconds)"
+ }
+ },
+ "triggerRelease": {
+ "description": [
+ "Trigger the Release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time to trigger the release"
+ }
+ },
+ "ramp": {
+ "description": [
+ "Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: When to trigger the ramp",
+ "v": "Number: Target value",
+ "v2": "Number: (Optional) Second target value (optional)"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "number": "Number: Constant number to add"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "number": "Number: Constant number to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this envelope's amplitude values to a given range, and return the envelope. Calling this method again will override the initial scale() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Pulse": {
+ "description": [
+ "Creates a Pulse object, an oscillator that implements Pulse Width Modulation. The pulse is created with two oscillators. Accepts a parameter for frequency, and to set the width between the pulses. See p5.Oscillator for a full list of methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in oscillations per second (Hz)",
+ "w": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
+ },
+ "width": {
+ "description": [
+ "Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation)."
+ ],
+ "params": {
+ "width": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
+ }
+ }
+ },
+ "p5.Noise": {
+ "description": [
+ "Noise is a type of oscillator that generates a buffer with random values."
+ ],
+ "params": {
+ "type": "String: Type of noise can be 'white' (default), 'brown' or 'pink'."
+ },
+ "setType": {
+ "description": [
+ "Set type of noise to 'white', 'pink' or 'brown'. White is the default."
+ ],
+ "params": {
+ "type": "String: (Optional) 'white', 'pink' or 'brown'"
+ }
+ }
+ },
+ "p5.AudioIn": {
+ "description": [
+ "Get audio from an input, i.e. your computer's microphone. ",
+ "Turn the mic on/off with the start() and stop() methods. When the mic is on, its volume can be measured with getLevel or by connecting an FFT object. ",
+ "If you want to hear the AudioIn, use the .connect() method. AudioIn does not connect to p5.sound output by default to prevent feedback. ",
+ "Note: This uses the getUserMedia/ Stream API, which is not supported by certain browsers. Access in Chrome browser is limited to localhost and https, but access over http may be limited. "
+ ],
+ "params": {
+ "errorCallback": "Function: (Optional) A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access."
+ },
+ "input": {},
+ "output": {},
+ "stream": {},
+ "mediaStream": {},
+ "currentSource": {},
+ "enabled": {
+ "description": [
+ "Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access."
+ ]
+ },
+ "amplitude": {
+ "description": [
+ "Input amplitude, connect to it by default but not to master out"
+ ]
+ },
+ "start": {
+ "description": [
+ "Start processing audio input. This enables the use of other AudioIn methods like getLevel(). Note that by default, AudioIn is not connected to p5.sound's output. So you won't hear anything unless you use the connect() method. ",
+ "Certain browsers limit access to the user's microphone. For example, Chrome only allows access from localhost and over https. For this reason, you may want to include an errorCallback—a function that is called in case the browser won't provide mic access."
+ ],
+ "params": {
+ "successCallback": "Function: (Optional) Name of a function to call on success.",
+ "errorCallback": "Function: (Optional) Name of a function to call if there was an error. For example, some browsers do not support getUserMedia."
+ }
+ },
+ "stop": {
+ "description": [
+ "Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access."
+ ]
+ },
+ "connect": {
+ "description": [
+ "Connect to an audio unit. If no parameter is provided, will connect to the master output (i.e. your speakers). "
+ ],
+ "params": {
+ "unit": "Object: (Optional) An object that accepts audio input, such as an FFT"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers. "
+ ]
+ },
+ "getLevel": {
+ "description": [
+ "Read the Amplitude (volume level) of an AudioIn. The AudioIn class contains its own instance of the Amplitude class to help make it easy to get a microphone's volume level. Accepts an optional smoothing value (0.0 < 1.0). NOTE: AudioIn must .start() before using .getLevel(). "
+ ],
+ "returns": "Number: Volume level (between 0.0 and 1.0)",
+ "params": {
+ "smoothing": "Number: (Optional) Smoothing is 0.0 by default. Smooths values based on previous values."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set amplitude (volume) of a mic input between 0 and 1.0. "
+ ],
+ "params": {
+ "vol": "Number: between 0 and 1.0",
+ "time": "Number: (Optional) ramp time (optional)"
+ }
+ },
+ "getSources": {
+ "description": [
+ "Returns a list of available input sources. This is a wrapper for https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "and it returns a Promise. "
+ ],
+ "returns": "Promise: Returns a Promise that can be used in place of the callbacks, similar to the enumerateDevices() method",
+ "params": {
+ "successCallback": "Function: (Optional) This callback function handles the sources when they have been enumerated. The callback function receives the deviceList array as its only argument",
+ "errorCallback": "Function: (Optional) This optional callback receives the error message as its argument."
+ }
+ },
+ "setSource": {
+ "description": [
+ "Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "navigator.mediaDevices.enumerateDevices(). "
+ ],
+ "params": {
+ "num": "Number: position of input source in the array"
+ }
+ }
+ },
+ "p5.EQ": {
+ "description": [
+ "p5.EQ is an audio effect that performs the function of a multiband audio equalizer. Equalization is used to adjust the balance of frequency compoenents of an audio signal. This process is commonly used in sound production and recording to change the waveform before it reaches a sound output device. EQ can also be used as an audio effect to create interesting distortions by filtering out parts of the spectrum. p5.EQ is built using a chain of Web Audio Biquad Filter Nodes and can be instantiated with 3 or 8 bands. Bands can be added or removed from the EQ by directly modifying p5.EQ.bands (the array that stores filters). ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "returns": "Object: p5.EQ object",
+ "params": {
+ "_eqsize": "Number: (Optional) Constructor will accept 3 or 8, defaults to 3"
+ },
+ "bands": {
+ "description": [
+ "The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7"
+ ]
+ },
+ "process": {
+ "description": [
+ "Process an input by connecting it to the EQ"
+ ],
+ "params": {
+ "src": "Object: Audio source"
+ }
+ }
+ },
+ "p5.Panner3D": {
+ "description": [
+ "Panner3D is based on the Web Audio Spatial Panner Node . This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space. ",
+ "The position is relative to an Audio Context Listener , which can be accessed by p5.soundOut.audiocontext.listener"
+ ],
+ "panner": {
+ "description": [
+ " Web Audio Spatial Panner Node ",
+ "Properties include "
+ ]
+ },
+ "process": {
+ "description": [
+ "Connect an audio sorce"
+ ],
+ "params": {
+ "src": "Object: Input source"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the X,Y,Z position of the Panner"
+ ],
+ "returns": "Array: Updated x, y, z values as an array",
+ "params": {
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
+ },
+ "positionX": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "positionY": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "positionZ": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orient": {
+ "description": [
+ "Set the X,Y,Z position of the Panner"
+ ],
+ "returns": "Array: Updated x, y, z values as an array",
+ "params": {
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
+ },
+ "orientX": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientY": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientZ": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "setFalloff": {
+ "description": [
+ "Set the rolloff factor and max distance"
+ ],
+ "params": {
+ "maxDistance": "Number (Optional)",
+ "rolloffFactor": "Number (Optional)"
+ }
+ },
+ "maxDist": {
+ "description": [
+ "Maxium distance between the source and the listener"
+ ],
+ "returns": "Number: updated value",
+ "params": {
+ "maxDistance": "Number"
+ }
+ },
+ "rollof": {
+ "description": [
+ "How quickly the volume is reduced as the source moves away from the listener"
+ ],
+ "returns": "Number: updated value",
+ "params": {
+ "rolloffFactor": "Number"
+ }
+ }
+ },
+ "p5.Delay": {
+ "description": [
+ "Delay is an echo effect. It processes an existing sound source, and outputs a delayed version of that sound. The p5.Delay can produce different effects depending on the delayTime, feedback, filter, and type. In the example below, a feedback of 0.5 (the default value) will produce a looping delay that decreases in volume by 50% each repeat. A filter will cut out the high frequencies so that the delay does not sound as piercing as the original source. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "leftDelay": {
+ "description": [
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
+ },
+ "rightDelay": {
+ "description": [
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
+ },
+ "process": {
+ "description": [
+ "Add delay to an audio signal according to a set of delay parameters."
+ ],
+ "params": {
+ "Signal": "Object: An object that outputs audio",
+ "delayTime": "Number: (Optional) Time (in seconds) of the delay/echo. Some browsers limit delayTime to 1 second.",
+ "feedback": "Number: (Optional) sends the delay back through itself in a loop that decreases in volume each time.",
+ "lowPass": "Number: (Optional) Cutoff frequency. Only frequencies below the lowPass will be part of the delay."
+ }
+ },
+ "delayTime": {
+ "description": [
+ "Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0."
+ ],
+ "params": {
+ "delayTime": "Number: Time (in seconds) of the delay"
+ }
+ },
+ "feedback": {
+ "description": [
+ "Feedback occurs when Delay sends its signal back through its input in a loop. The feedback amount determines how much signal to send each time through the loop. A feedback greater than 1.0 is not desirable because it will increase the overall output each time through the loop, creating an infinite feedback loop. The default value is 0.5"
+ ],
+ "returns": "Number: Feedback value",
+ "params": {
+ "feedback": "Number|Object: 0.0 to 1.0, or an object such as an Oscillator that can be used to modulate this param"
+ }
+ },
+ "filter": {
+ "description": [
+ "Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency."
+ ],
+ "params": {
+ "cutoffFreq": "Number|Object: A lowpass filter will cut off any frequencies higher than the filter frequency.",
+ "res": "Number|Object: Resonance of the filter frequency cutoff, or an object (i.e. a p5.Oscillator) that can be used to modulate this parameter. High numbers (i.e. 15) will produce a resonance, low numbers (i.e. .2) will produce a slope."
+ }
+ },
+ "setType": {
+ "description": [
+ "Choose a preset type of delay. 'pingPong' bounces the signal from the left to the right channel to produce a stereo effect. Any other parameter will revert to the default delay setting."
+ ],
+ "params": {
+ "type": "String|Number: 'pingPong' (1) or 'default' (0)"
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the delay effect."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Reverb": {
+ "description": [
+ "Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has parameters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "process": {
+ "description": [
+ "Connect a source to the reverb, and assign reverb parameters."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output.",
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
+ },
+ "set": {
+ "description": [
+ "Set the reverb settings. Similar to .process(), but without assigning a new input."
+ ],
+ "params": {
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the reverb effect."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Convolver": {
+ "description": [
+ "p5.Convolver extends p5.Reverb. It can emulate the sound of real physical spaces through a process called convolution . ",
+ "Convolution multiplies any audio input by an \"impulse response\" to simulate the dispersion of sound over time. The impulse response is generated from an audio file that you provide. One way to generate an impulse response is to pop a balloon in a reverberant space and record the echo. Convolution can also be used to experiment with sound. ",
+ "Use the method createConvolution(path) to instantiate a p5.Convolver with a path to your impulse response audio file."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call when loading succeeds",
+ "errorCallback": "Function: (Optional) function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong."
+ },
+ "convolverNode": {
+ "description": [
+ "Internally, the p5.Convolver uses the a Web Audio Convolver Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Connect a source to the convolver."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
+ },
+ "impulses": {
+ "description": [
+ "If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method."
+ ]
+ },
+ "addImpulse": {
+ "description": [
+ "Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
+ },
+ "resetImpulse": {
+ "description": [
+ "Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
+ },
+ "toggleImpulse": {
+ "description": [
+ "If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses Array. Accepts a parameter to identify which impulse you wish to use, identified either by its original filename (String) or by its position in the .impulses Array (Number). You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename."
+ ],
+ "params": {
+ "id": "String|Number: Identify the impulse by its original filename (String), or by its position in the .impulses Array (Number)."
+ }
+ }
+ },
+ "p5.Phrase": {
+ "description": [
+ "A phrase is a pattern of musical events over time, i.e. a series of notes and rests. ",
+ "Phrases must be added to a p5.Part for playback, and each part can play multiple phrases at the same time. For example, one Phrase might be a kick drum, another could be a snare, and another could be the bassline. ",
+ "The first parameter is a name so that the phrase can be modified or deleted later. The callback is a a function that this phrase will call at every step—for example it might be called playNote(value){}. The array determines which value is passed into the callback at each step of the phrase. It can be numbers, an object with multiple numbers, or a zero (0) indicates a rest so the callback won't be called)."
+ ],
+ "params": {
+ "name": "String: Name so that you can access the Phrase.",
+ "callback": "Function: The name of a function that this phrase will call. Typically it will play a sound, and accept two parameters: a time at which to play the sound (in seconds from now), and a value from the sequence array. The time should be passed into the play() or start() method to ensure precision.",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
+ },
+ "sequence": {
+ "description": [
+ "Array of values to pass into the callback at each step of the phrase. Depending on the callback function's requirements, these values may be numbers, strings, or an object with multiple parameters. Zero (0) indicates a rest."
+ ]
+ }
+ },
+ "p5.Part": {
+ "description": [
+ "A p5.Part plays back one or more p5.Phrases. Instantiate a part with steps and tatums. By default, each step represents a 1/16th note. ",
+ "See p5.Phrase for more about musical timing."
+ ],
+ "params": {
+ "steps": "Number: (Optional) Steps in the part",
+ "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quarter note (default is 1/16, a sixteenth note)"
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo of this part, in Beats Per Minute."
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: (Optional) Seconds from now"
+ }
+ },
+ "getBPM": {
+ "description": [
+ "Returns the tempo, in Beats Per Minute, of this part."
+ ],
+ "returns": "Number: "
+ },
+ "start": {
+ "description": [
+ "Start playback of this part. It will play through all of its phrases at a speed determined by setBPM."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "loop": {
+ "description": [
+ "Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "noLoop": {
+ "description": [
+ "Tell the part to stop looping."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "pause": {
+ "description": [
+ "Pause the part. Playback will resume from the current step."
+ ],
+ "params": {
+ "time": "Number: seconds from now"
+ }
+ },
+ "addPhrase": {
+ "description": [
+ "Add a p5.Phrase to this Part."
+ ],
+ "params": {
+ "phrase": "p5.Phrase: reference to a p5.Phrase"
+ }
+ },
+ "removePhrase": {
+ "description": [
+ "Remove a phrase from this part, based on the name it was given when it was created."
+ ],
+ "params": {
+ "phraseName": "String"
+ }
+ },
+ "getPhrase": {
+ "description": [
+ "Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array."
+ ],
+ "params": {
+ "phraseName": "String"
+ }
+ },
+ "replaceSequence": {
+ "description": [
+ "Find all sequences with the specified name, and replace their patterns with the specified array."
+ ],
+ "params": {
+ "phraseName": "String",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
+ }
+ },
+ "onStep": {
+ "description": [
+ "Set the function that will be called at every step. This will clear the previous function."
+ ],
+ "params": {
+ "callback": "Function: The name of the callback you want to fire on every beat/tatum."
+ }
+ }
+ },
+ "p5.Score": {
+ "description": [
+ "A Score consists of a series of Parts. The parts will be played back in order. For example, you could have an A part, a B part, and a C part, and play them back in this order new p5.Score(a, a, b, a, c)"
+ ],
+ "params": {
+ "parts": "p5.Part: (Optional) One or multiple parts, to be played in sequence."
+ },
+ "start": {
+ "description": [
+ "Start playback of the score."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop playback of the score."
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pause playback of the score."
+ ]
+ },
+ "loop": {
+ "description": [
+ "Loop playback of the score."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes."
+ ]
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo for all parts in the score"
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ }
+ },
+ "p5.SoundLoop": {
+ "description": [
+ "SoundLoop"
+ ],
+ "params": {
+ "callback": "Function: this function will be called on each iteration of theloop",
+ "interval": "Number|String: (Optional) amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second."
},
- "emissiveMaterial": {
+ "musicalTimeMode": {
"description": [
- "재질의 방사형 색상을 설정합니다. 여기서의 '방사형'은 사실상 잘못된 표현입니다. 주변 도형에도 영향을 미치는 조명을 직접 방사한다기 보다는, 마치 객체가 빛나는 것처럼 보이기 때문입니다. 방사형 재질은 별도의 조명이 없어도 화면상 최대 강도로 빛날 수 있습니다."
+ "musicalTimeMode uses Tone.Time convention true if string, false if number"
+ ]
+ },
+ "maxIterations": {
+ "description": [
+ "Set a limit to the number of loops to play. defaults to Infinity"
+ ]
+ },
+ "start": {
+ "description": [
+ "Start the loop"
],
"params": {
- "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
- "v3": "숫자: 파랑값 또는 밝기값 (선택 사항)",
- "a": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
- },
- "returns": ""
+ "timeFromNow": "Number: (Optional) schedule a starting time"
+ }
},
- "specularMaterial": {
+ "stop": {
"description": [
- "지정된 색상의 도형에 입힐 스페큘러 재질입니다. 스페큘러 재질은 반짝이는 반사 재질입니다. 앰비언트 재질과 마찬가지로, 앰비언트 조명 아래에서 객체가 반사하는 색상을 정의합니다. 예를 들어, 객체의 스페큘러 재질이 순수 빨강이고 앰비언트 라이트가 순수 초록인 경우, 객체는 빛을 반사하지 않습니다. 스페큘러 재질은 포인트 라이트나 디렉셔널 라이트 등 모든 조명들의 광원 색상을 반영합니다. 사용가능한 모든 재질 을 확인하세요."
+ "Stop the loop"
],
"params": {
- "v1": "숫자: 회색값, (현재 색상 모드에 따른) 빨강값 또는 색조값",
- "v2": "숫자: 초록값 또는 채도값 (선택 사항)",
- "v3": "숫자: 파랑값 또는 밝기값 (선택 사항)",
- "UNKNOWN-PARAM-4": "숫자 배열[]|문자열|p5.Color: 색상 배열, CSS 색상 문자열, 또는 p5.Color 값"
- },
- "returns": ""
+ "timeFromNow": "Number: (Optional) schedule a stopping time"
+ }
},
- "shininess": {
+ "pause": {
"description": [
- "셰이더 표면의 광택 양을 설정합니다. specularMaterial()과 함께 사용하여 도형의 재질 속성을 설정할 수 있습니다. 기본값이자 최소값은 1입니다."
+ "Pause the loop"
],
- "returns": "숫자: 광택 정도. 기본값은 1."
+ "params": {
+ "timeFromNow": "Number: (Optional) schedule a pausing time"
+ }
},
- "camera": {
+ "syncedStart": {
"description": [
- "3D 스케치의 카메라 위치를 설정합니다. 이 함수의 매개변수들은 카메라의 위치, 스케치의 중심(카메라가 가리키는 위치), 그리고 위쪽 방향(카메라의 오리엔테이션)을 정의합니다. 이 함수는 카메라 이동을 시뮬레이션하여, 객체를 다양한 각도에서 볼 수 있도록 합니다. 객체 자체가 아닌 카메라를 움직이는 점에 유의하세요. 예를 들어, centerX 값이 양수인 경우, 카메라는 스케치의 우측으로 회전하여 마치 객체가 왼쪽으로 움직이듯 보이게 합니다. 이 예제 에서 카메라의 위치 이동 방식을 확인하세요. 별도의 인수를 지정하지 않는 경우, 함수는 camera (0, 0, (height / 2.0) / tan (PI * 30.0 / 180.0), 0, 0, 0, 0, 1, 0)에 해당하는 기본 카메라를 생성합니다."
+ "Synchronize loops. Use this method to start two more more loops in synchronization or to start a loop in synchronization with a loop that is already playing This method will schedule the implicit loop in sync with the explicit master loop i.e. loopToStart.syncedStart(loopToSyncWith)"
],
"params": {
- "x": "숫자: x축에서의 카메라 위치값 (선택 사항)",
- "y": "숫자: y축에서의 카메라 위치값 (선택 사항)",
- "z": "숫자: z축에서의 카메라 위치값 (선택 사항)",
- "centerX": "숫자: 스케치 중심의 x좌표값 (선택 사항)",
- "centerY": "숫자: 스케치 중심의 y좌표값 (선택 사항)",
- "centerZ": "숫자: 스케치 중심의 z좌표값 (선택 사항)",
- "upX": "숫자: 카메라로부터 위쪽 방향의 x성분 (선택 사항)",
- "upY": "숫자: 카메라로부터 위쪽 방향의 y성분 (선택 사항)",
- "upZ": "숫자: 카메라로부터 위쪽 방향의 z성분 (선택 사항)"
- },
- "returns": ""
+ "otherLoop": "Object: a p5.SoundLoop to sync with",
+ "timeFromNow": "Number: (Optional) Start the loops in sync after timeFromNow seconds"
+ }
},
- "perspective": {
+ "bpm": {
+ "description": [
+ "Getters and Setters, setting any paramter will result in a change in the clock's frequency, that will be reflected after the next callback beats per minute (defaults to 60)"
+ ]
+ },
+ "timeSignature": {
+ "description": [
+ "number of quarter notes in a measure (defaults to 4)"
+ ]
+ },
+ "interval": {
+ "description": [
+ "length of the loops interval"
+ ]
+ },
+ "iterations": {
+ "description": [
+ "how many times the callback has been called so far"
+ ]
+ }
+ },
+ "p5.Compressor": {
+ "description": [
+ "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on individual sound sources in addition to the master output. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "compressor": {
+ "description": [
+ "The p5.Compressor is built with a Web Audio Dynamics Compressor Node "
+ ]
+ },
+ "process": {
"description": [
- "3D 스케치의 카메라 투시 투영법을 설정합니다. 이 투영법은 거리 단축 착시효과를 통해 깊이감을 나타냅니다. 카메라로부터 가까운 객체는 실제 크기로 보이고, 멀리 떨어진 객체는 더 작아 보입니다. 이 함수의 매개변수는 수직 시야, 종횡비(일반적으로, 너비/높이), 그리고 근거리 및 원거리에서 잘리는 평면을 통해 보이는 (즉, 카메라가 보는), 절두체 구도(카메라가 객체를 보는, 잘린 피라미드형 구도)를 정의합니다. 별도의 인수를 지정하지 않는 경우, 기본값은 perspective(PI/3.0, width/height, eyeZ/10.0, eyeZ10.0)과도 동일한 효과를 가지며, 여기서 eyeZ는((height/2.0) / tan(PI60.0/360.0))과 같습니다."
+ "Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams"
],
"params": {
- "fovy": "숫자: 하단에서 상단에 이르는 카메라의 절두체형 수직 시야각, angleMode 단위에 해당 (선택 사항)",
- "aspect": "숫자: 카메라의 절두체형 종횡비 (선택 사항)",
- "near": "숫자: 절두 근거리 길이 (선택 사항)",
- "far": "숫자: 절두 원거리 길이 (선택 사항)"
- },
- "returns": ""
+ "src": "Object: Sound source to be connected",
+ "attack": "Number: (Optional) The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: (Optional) The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: (Optional) The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
},
- "ortho": {
+ "set": {
"description": [
- "3D 스케치의 카메라 직교 투영법을 설정하고, 객체에 대한 상자 모양의 절두체 구도를 정의합니다. 이 투영법은 동일한 차원상의 객체들을 카메라로부터 떨어져있는 거리와 상관없이 모두 동일한 크기로 나타냅니다. 이 함수의 매개변수는 좌우가 최소 및 최대 x값이고, 상하가 최소 및 최대 y값이며, 원근이 최소 및 최대 z값인 절두체 구도를 지정합니다. 별도의 매개변수를 지정하지 않는 경우, 기본값은 ortho(-width/2, width/2, -height/2, height/2)입니다."
+ "Set the parameters of a compressor."
],
"params": {
- "left": "숫자: 카메라 절두체의 왼쪽 평면 (선택 사항)",
- "right": "숫자: 카메라 절두체의 오른쪽 평면 (선택 사항)",
- "bottom": "숫자: 카메라 절두체의 아래쪽 평면 (선택 사항)",
- "top": "숫자: 카메라 절두체의 위쪽 평면 (선택 사항)",
- "near": "숫자: 카메라 절두체의 가까운 평면 (선택 사항)",
- "far": "숫자: 카메라 절두체의 먼 평면 (선택 사항)"
- },
- "returns": ""
+ "attack": "Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
},
- "frustrum": {
+ "attack": {
"description": [
- "매개변수에 따른 원근 매트릭스를 설정합니다. 절두체는 상단이 잘린 피라미드와 유사한 형태를 갖는 도형입니다. 피라미드의 상단에 가상의 눈이 달려있다고 가정한다면, 나머지 6개의 평면은 3D 뷰를 렌더링할 때 시야를 잘라내는 평면으로서 기능합니다. 따라서, 이 잘라내기 평면들의 안쪽에 위치한 것들만 보이고, 그 바깥에 위치한 것들은 보이지 않습니다. frustrum()을 통해 렌더링 화면의 원근을 변경할 수 있으나, perspective()를 사용하면 동일한 설정을 보다 간편하게 표현할 수 있습니다."
+ "Get current attack or set value w/ time ramp"
],
- "params": [
- "숫자: 카메라 절두체의 왼쪽 평면 (선택 사항)",
- "숫자: 카메라 절두체의 오른쪽 평면 (선택 사항)",
- "숫자: 카메라 절두체의 아래쪽 평면 (선택 사항)",
- "숫자: 카메라 절두체의 위쪽 평면 (선택 사항)",
- "숫자: 카메라 절두체의 가까운 평면 (선택 사항)",
- "숫자: 카메라 절두체의 먼 평면 (선택 사항)"
- ]
+ "params": {
+ "attack": "Number: (Optional) Attack is the amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "createCamera": {
+ "knee": {
"description": [
- "새로운 p5.Camera 객체를 생성하고 렌더러에게 해당 카메라를 사용하도록 지시합니다. p5.Camera 객체를 반환합니다."
+ "Get current knee or set value w/ time ramp"
],
- "returns": "p5.Camera: 새로 생성된 카메라 객체"
+ "params": {
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
},
- "setCamera": {
+ "ratio": {
"description": [
- "rendererGL의 현재 카메라를 p5.Camera 객체로 설정합니다. 여러 카메라 간의 화면 전환이 가능합니다."
+ "Get current ratio or set value w/ time ramp"
],
"params": {
- "cam": "p5.Camera: p5.Camera 객체"
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
}
+ },
+ "threshold": {
+ "description": [
+ "Get current threshold or set value w/ time ramp"
+ ],
+ "params": {
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "release": {
+ "description": [
+ "Get current release or set value w/ time ramp"
+ ],
+ "params": {
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "reduction": {
+ "description": [
+ "Return the current reduction value"
+ ],
+ "returns": "Number: Value of the amount of gain reduction that is applied to the signal"
}
},
- "p5.Shader": {
+ "p5.SoundRecorder": {
"description": [
- "WebGL 모드를 위한 셰이더 클래스"
+ "Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or can be assigned a specific source with setInput(). ",
+ "The record() method accepts a p5.SoundFile as a parameter. When playback is stopped (either after the given amount of time, or with the stop() method), the p5.SoundRecorder will send its recording to that p5.SoundFile for playback."
],
- "params": {
- "renderer": "p5.RendererGL: 새로운 p5.Shader에 GL 문맥을 제공하는 p5.RendererGL 인스턴스",
- "vertSrc": "문자열: 버텍스 셰이더의 소스 코드 (문자열 형식)",
- "fragSrc": "문자열: 프래그먼트 셰이더의 소스 코드 (문자열 형식)"
+ "setInput": {
+ "description": [
+ "Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch."
+ ],
+ "params": {
+ "unit": "Object: (Optional) p5.sound object or a web audio unit that outputs sound"
+ }
},
- "setUniform": {
+ "record": {
"description": [
- [
- "gl.uniform 함수를 감싸는 래퍼입니다. 정형의 정보를 셰이더에 저장하여, 데이터의 유형 검사를 수행하고 적절한 함수를 호출할 수 있습니다."
- ]
+ "Start recording. To access the recording, provide a p5.SoundFile as the first parameter. The p5.SoundRecorder will send its recording to that p5.SoundFile for playback once recording is complete. Optional parameters include duration (in seconds) of the recording, and a callback function that will be called once the complete recording has been transfered to the p5.SoundFile."
+ ],
+ "params": {
+ "soundFile": "p5.SoundFile: p5.SoundFile",
+ "duration": "Number: (Optional) Time (in seconds)",
+ "callback": "Function: (Optional) The name of a function that will be called once the recording completes"
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop the recording. Once the recording is stopped, the results will be sent to the p5.SoundFile that was given on .record(), and if a callback function was provided on record, that function will be called."
]
}
},
- "p5.Table": {
+ "p5.PeakDetect": {
"description": [
- "테이블 객체는 기존의 스프레트 시트처럼 복수의 행과 열에 데이터를 저장합니다. 동적으로 새로운 테이블을 생성하거나, 기존 파일 데이터를 사용하여 생성할 수 있습니다."
+ "PeakDetect works in conjunction with p5.FFT to look for onsets in some or all of the frequency spectrum. ",
+ " To use p5.PeakDetect, call update in the draw loop and pass in a p5.FFT object. ",
+ " You can listen for a specific part of the frequency spectrum by setting the range between freq1 and freq2. ",
+ "threshold is the threshold for detecting a peak, scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud as 1.0. ",
+ " The update method is meant to be run in the draw loop, and frames determines how many loops must pass before another peak can be detected. For example, if the frameRate() = 60, you could detect the beat of a 120 beat-per-minute song with this equation: framesPerPeak = 60 / (estimatedBPM / 60 ); ",
+ " Based on example contribtued by @b2renger, and a simple beat detection explanation by Felix Turner . "
],
"params": {
- "rows": "p5.TableRow 배열[]: p5.TableRow 객체의 배열 (선택 사항)"
+ "freq1": "Number: (Optional) lowFrequency - defaults to 20Hz",
+ "freq2": "Number: (Optional) highFrequency - defaults to 20000 Hz",
+ "threshold": "Number: (Optional) Threshold for detecting a beat between 0 and 1 scaled logarithmically where 0.1 is 1/2 the loudness of 1.0. Defaults to 0.35.",
+ "framesPerPeak": "Number: (Optional) Defaults to 20."
},
- "fields": [
- "테이블의 행명을 담는 배열. 테이블의 헤더(header)를 함께 불러올 경우, header 매개변수.",
- "테이블의 행을 채우는 p5.TableRow 객체의 배열. getRows() 호출과 동일한 결과를 갖습니다."
- ],
- "methods": [
- "addRow()를 사용하여 p5.Table 객체에 새로운 행 데이터를 추가할 수 있습니다. 기본값으로 빈 행이 생성됩니다. 일반적으로, TableRow 객체에 있는 새로운 행에 레퍼런스를 저장하고 (위의 예제 중 newRow 참고), set()을 사용하여 각각의 개별값을 설정합니다. p5.TableRow 객체를 매개변수로 지정할 경우, 행을 복제하여 테이블에 추가합니다.",
- "테이블 객체에서 행을 제거합니다.",
- "지정된 p5.TableRow에 레퍼런스를 반환합니다. 반환된 레퍼런스는 지정된 행의 값을 받아오거나 설정할 때 사용할 수 있습니다.",
- "테이블의 모든 행을 받아옵니다. p5.TableRow 배열들을 반환합니다.",
- "지정된 값을 포함하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 여러 개의 행들이 지정된 값을 포함하더라도, 오직 1번째 행만 반환됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다.",
- "지정된 값을 포함하는 테이블 행들을 검색하고, 해당 행들의 레퍼런스를 반환합니다. 반환된 배열은 위의 예제처럼 모든 행을 반복 처리하는 데에 사용됩니다.ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다.",
- "지정된 정규 표현식과 매칭하는 테이블 행 중 1번째 행을 검색하고, 해당 행의 레퍼런스를 반환합니다. 반환된 배열은 모든 행을 반복 처리하는 데에 사용됩니다. ID 또는 제목(title) 설정을 통해 검색할 열도 지정가능합니다.",
- "특정 열의 모든 값들을 가져와 배열로 반환합니다. 열은 그 ID 또는 제목(title)으로 지정가능합니다.",
- "테이블로부터 모든 행을 제거합니다. 모든 행들이 제거되어도 열과 열 제목은 유지됩니다.",
- "addColumn()을 사용하여 p5.Table 객체에 새로운 열 데이터를 추가할 수 있습니다. 일반적으로 열 제목을 설정하여 이후 쉽게 참조되도록 합니다. (별도의 제목을 지정하지 않는 경우, 새로운 열의 제목은 null이 됩니다.)",
- "테이블의 전체 열 개수를 반환합니다.",
- "테이블의 전체 행 개수를 반환합니다.",
- "지정된 문자(또는 '토큰')을 제거합니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다.",
- "문자열 테이블 값에서 스페이스나 탭과 같은 선행 및 후행 공백을 자릅니다. 별도의 열을 지정하지 않는 경우, 모든 행과 열 속 값들이 처리됩니다. 열은 ID 또는 제목으로 참조가능합니다.",
- "removeColumn()을 사용하여 테이블 객체로부터 특정 열을 제거합니다. 제거될 열은 그 제목(문자열) 또는 인덱스 값(정수)로 식별할 수 있습니다. removeColumn(0)은 1번째 열을, removeColumn(1)은 2번째 열을 제거합니다.",
- "테이블 중 지정된 행과 열에 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다.",
- "테이블 중 지정된 행과 열에 실수(float)값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다.",
- "테이블 중 지정된 행과 열에 문자열 값을 저장합니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다.",
- "테이블 중 지정된 행과 열에 값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다.",
- "이블 중 지정된 행과 열에 실수(float)값을 받아옵니다. 행은 ID로, 열은 ID 또는 제목으로 지정가능합니다.",
- "테이블 중 지정된 행과 열에 문자열 값을 받아옵니다. 행은 ID로,ø 열은 ID 또는 제목으로 지정가능합니다.",
- "모든 테이블 데이터를 받아와 객체로 반환합니다. 열 이름이 전달될 경우, 각 행 객체는 해당 속성을 제목으로 저장합니다.",
- "모든 테이블 데이터를 받아와 다차원 배열로 반환합니다."
- ]
- },
- "p5.TableRow": {
- "description": [
- "TableRow 객체는 테이블 중 열에 저장된 데이터 값들의 단일 행을 표현합니다. 테이블 행은 정렬된 배열과 정렬되지 않은 JSON 객체를 모두 포함합니다."
- ],
- "params": {
- "str": "문자열: 구분 기호로 분리된 문자열값으로 행 채우기 (선택 사항)",
- "separator": "문자열: 기본값은 쉼표 단위 구분(csv) (선택 사항)"
+ "isDetected": {
+ "description": [
+ "isDetected is set to true when a peak is detected."
+ ]
},
- "methods": [
- "TableRow의 지정된 열에 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다.",
- "TableRow의 지정된 열에 실수(float)값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다.",
- "TableRow의 지정된 열에 문자열 값을 저장합니다. 열은 ID 또는 제목으로 지정가능합니다.",
- "TableRow의 지정된 열로부터 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다. ",
- "TableRow의 지정된 열로부터 실수(float)값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다.",
- "TableRow의 지정된 열로부터 문자열 값을 받습니다. 열은 ID 또는 제목으로 지정가능합니다."
- ]
- },
- "p5.XML": {
- "description": [
- "XML은 XML 코드를 구문 분석할 수 있는 XML 객체의 표현입니다. loadXML()을 사용하여 외부 XML 파일을 불러와 XML 객체를 생성합니다."
- ],
- "methods": [
- "요소 부모의 복사본을 가져와, 부모를 또다른 p5.XML 객체로 반환합니다.",
- "요소의 전체 이름을 가져와 문자열로 반환합니다.",
- "문자열로 설정된 요소 이름을 지정합니다.",
- "요소의 자식 유무 여부를 확인하고, 그 결과를 불리언으로 반환합니다.",
- "모든 요소의 자식 이름을 가져와 그 값들을 문자열 배열로 반환합니다. 이는 각 자식 요소마다 getName()을 호출하는 것과 동일한 효과를 갖습니다.",
- "요소의 모든 자식을 p5.XML 객체 배열로 반환합니다. 이름 매개변수를 지정할 경우, 해당 변수명과 일치하는 모든 자식을 반환합니다.",
- "이름 매개변수 또는 지정된 인덱스의 자식과 일치하는 요소의 1번째 자식을 반환합니다. 일치하는 자식을 찾지 못하는 경우, 'undefined'를 반환합니다.",
- "요소에 새로운 자식을 추가합니다. 자식은 문자열로 지정될 수 있으며, 이는 새로운 태그명 또는 기존 p5.XML 객체에 대한 레퍼런스로서 사용할 수 있습니다. 새로 추가된 자식에 대한 레퍼런스는 p5.XML 객체로 반환됩니다. ",
- "이름 또는 인덱스로 지정된 요소를 제거합니다.",
- "지정된 요소의 속성 개수를 숫자로 반환합니다.",
- "지정된 요소의 모든 속성을 가져와 문자열 배열로 반환합니다.",
- "요소가 지정된 속성을 갖는지 여부를 확인합니다.",
- "요소의 속성값을 숫자로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 defaultValue를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 값 0을 반환합니다.",
- "요소의 속성값을 문자열로 반환합니다. 매개변수 defaultValue가 지정되고 속성이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 속성이 존재하지 않으면 null을 반환합니다.",
- "요소 속성의 내용을 설정합니다. 1번째 매개변수는 속성명을, 2번째 매개변수는 새로운 내용을 지정합니다.",
- "요소의 내용을 반환합니다. 매개변수 defaultValue가 지정되고 내용이 존재하지 않으면 'defaultValue'를 반환합니다. 매개변수 defaultValue가 지정되지 않고 내용이 존재하지 않으면 null을 반환합니다.",
- "요소의 내용을 설정합니다.",
- "요소를 문자열로 직렬화합니다. 요소의 내용을 http 요청으로 전송하거나 파일 저장을 준비할 때 사용됩니다."
- ]
- },
- "p5.Camera": {
- "description": [
- "p5의 WebGL 모드 용 카메라를 위한 클래스입니다. 3D씬 렌더링에 필요한 카메라 위치, 방향, 투영 정보 등을 포함합니다. createCamera()로 새로운 p5.Camera 객체를 생성하고, 아래의 메소드들을 통해 이를 제어할 수 있습니다. 이러한 방식으로 생성된 카메라는, 여타 메소드들을 통해 변경하지 않는 한, 화면에 기본값으로 설정된 위치 및 투시 투영법을 사용합니다. 여러 대의 카메라 생성 또한 가능한데, 이 경우 setCamera() 메소드로 현재 카메라를 설정할 수 있습니다. 참고: 아래의 메소드들은 다음 2개의 좌표계에서 작동합니다: 월드 좌표계는 X,Y,Z축 상의 원점에 대한 위치를 나타내는 반면, 로컬 좌표계는 카메라 시점에서의 위치(좌-우, 위-아래, 앞-뒤)를 나타냅니다. move() 메소드는 카메라의 자체 축을 따라 움직이는 반면, setPosition()은 월드 스페이스에서의 카메라의 위치를 설정합니다."
- ],
- "methods": [
- "p5.Camera 객체의 투시 투영법을 설정하고, perspective() 구문에 따라 해당 투영법의 매개변수를 설정합니다.",
- "p5.Camera 객체의 직교 투영법을 설정하고, ortho() 구문에 따라 해당 투영법의 매개변수를 설정합니다.",
- "",
- "패닝은 카메라 화면을 좌우로 회전합니다.",
- "틸트는 카메라 화면을 상하로 회전합니다.",
- "월드 스페이스 위치에서 보도록 카메라 방향을 조정합니다.",
- "카메라의 위치와 방향을 설정합니다. p5.Camera 객체에 camera()를 호출하는 것과 동일한 효과를 갖습니다.",
- "현재 카메라 방향을 유지하면서 그 로컬축을 따라 이동합니다.",
- "현재 카메라 방향을 유지하면서 카메라의 위치를 월드 스페이스에서의 위치로 설정합니다."
- ]
- },
- "p5.Geometry": {
- "description": [
- "p5 기하 클래스"
- ],
- "params": {
- "detailX": "정수: 수평 표면 위의 꼭지점 개수 (선택 사항)",
- "detailY": "정수: 수직 표면 위의 꼭지점 개수 (선택 사항)",
- "callback": "함수: 객체를 인스턴스화할 때 호출할 함수"
+ "update": {
+ "description": [
+ "The update method is run in the draw loop. ",
+ "Accepts an FFT object. You must call .analyze() on the FFT object prior to updating the peakDetect because it relies on a completed FFT analysis."
+ ],
+ "params": {
+ "fftObject": "p5.FFT: A p5.FFT object"
+ }
},
- "methods": [
- "",
- "꼭지점 당 부드러운 법선을 각 면의 평균으로서 계산합니다.",
- "꼭지점 법선의 평균을 구합니다. 곡면에 사용됩니다.",
- "극점 법선의 평균을 구합니다. 구형의 기초 조형에 사용됩니다.",
- "모든 꼭지점이 -100부터 100사이의 중심에 오도록 수정합니다."
- ]
+ "onPeak": {
+ "description": [
+ "onPeak accepts two arguments: a function to call when a peak is detected. The value of the peak, between 0.0 and 1.0, is passed to the callback."
+ ],
+ "params": {
+ "callback": "Function: Name of a function that will be called when a peak is detected.",
+ "val": "Object: (Optional) Optional value to pass into the function when a peak is detected."
+ }
+ }
},
- "p5.Vector": {
+ "p5.Gain": {
"description": [
- "2차원 및 3차원 벡터, 특히 유클리드 (기하학) 벡터를 설명하는 클래스입니다. 벡터는 크기와 방향을 모두 지닌 개체입니다. 하지만, 그 데이터 유형은 벡터의 성분(2D의 경우 x와 y, 3D의 경우 x, y, z)을 저장합니다. 크기와 방향은 각각 mag() 및 heading() 메소드를 통해 접근할 수 있습니다. p5.Vector는 위치, 속도, 가속을 다루는 수많은 p5.js 예제에서 사용됩니다. 예를 들어, 화면을 가로질러 움직이는 직사각형을 만들려면, 이 물체의 위치(원점에서 그 위치를 가리키는 벡터), 속도(단위 시간당 객체의 위치가 변하는 속도, 벡터로 표시), 그리고 가속도(단위 시간당 객체의 속도가 변하는 속도, 벡터로 표시)를 반드시 고려해야합니다. 벡터는 그룹화된 값들을 나타냅니다. 따라서, 전통적인 덧셈/곱셈 대신, p5.Vector 클래스 내부의 벡터 수학 메소드를 사용해서 계산해야 합니다."
+ "A gain node is useful to set the relative volume of sound. It's typically used to build mixers."
],
- "params": {
- "x": "숫자: 벡터의 x성분 (선택 사항)",
- "y": "숫자: 벡터의 y성분 (선택 사항)",
- "z": "숫자: 벡터의 z성분 (선택 사항)"
+ "setInput": {
+ "description": [
+ "Connect a source to the gain node."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
},
- "fields": [
- "벡터의 x성분",
- "벡터의 y성분",
- "벡터의 z성분"
- ],
- "methods": [
- "String(v) 또는 v.toString()을 호출하여 벡터 v의 문자열 표현을 반환합니다. 주로 콘솔창에서 벡터 로그를 확인할 때 사용됩니다.",
- "두 세개의 개별 변수, p5.Vector 데이터, 또는 실수(float) 배열의 값들을 사용하여 벡터의 x, y, z성분을 설정합니다.",
- "벡터의 복사본을 가져와 p5.Vector 객체를 반환합니다.",
- "x, y, z성분을 벡터에 더하거나, 한 벡터를 다른 벡터에 더하거나, 또는 2개의 독립 벡터를 더합니다. 2개의 독립 벡터를 더하는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요.",
- "한 벡터를 다른 벡터로 나눈 뒤의 나머지 벡터를 제공합니다. 자세한 내용은 예제를 참고하세요.",
- "x, y, z성분을 벡터에서 빼거나, 한 벡터에서 다른 벡터를 빼거나, 또는 2개의 독립 벡터를 뺍니다. 2개의 독립 벡터를 빼는 메소드는 정적 메소드에 해당하며, p5.Vector를 반환합니다. 다른 메소드들은 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요.",
- "벡터에 스칼라를 곱합니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요.",
- "벡터를 스칼라로 나눕니다. 정적 메소드인 경우 새로운 p5.Vector를 생성하는 반면, 정적 메소드가 아닌 경우 벡터에 직접 작용합니다. 자세한 내용은 예제를 참고하세요.",
- "벡터의 크기(길이)를 계산하고 그 결과를 실수(float)으로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.)",
- "벡터의 제곱 크기를 계산하고 그 결과를 실수(float)로 반환합니다. (이는 수식 sqrt(x*x + y*y + z*z)과도 같습니다.) 벡터를 비교하는 등의 경우에서 실제 길이를 포함하지 않으면 더 빠르게 계산됩니다.",
- "두 벡터의 내적을 계산합니다. 2개의 독립 벡터의 내적을 계산하는 메소드는 정적 메소드에 해당합니다. 자세한 내용은 예제를 참고하세요.",
- "두 벡터의 외적으로 구성된 벡터를 계산하고 반환합니다. 정적 및 비정적 메소드 모두 새로운 p5.Vector를 반환합니다. 자세한 내용은 예제를 참고하세요.",
- "두 점 사이의 유클리드 거리를 계산합니다 (점을 벡터 객체로 간주).",
- "벡터를 길이 1로 정규화합니다. (단위 벡터로 만듭니다.)",
- "벡터의 크기를 매개변수 max 의 값으로 제한합니다.",
- "벡터의 크기를 매개변수 len 의 값으로 제한합니다.",
- "벡터의 회전 각도를 계산합니다. (2D 벡터만 해당)",
- "벡터를 특정 각도로 회전하되(2D 벡터만 해당), 크기는 동일하게 유지합니다.",
- "두 벡터 사이의 각도(부채각, radian)를 계산하고 반환합니다.",
- "한 벡터와 다른 벡터를 선형적으로 보간합니다.",
- "2D 선 또는 3D 평면의 법선에 들어오는 벡터를 반영합니다. 이 메소드는 벡터에 직접 작용합니다.",
- "벡터의 표현을 실수 배열로 반환합니다. 이는 일시적으로만 사용됩니다. 다른 경우에도, p5.Vector.copy() 메소드를 통해 배열에 내용을 복사해야 합니다.",
- "p5.Vector에 대한 평등 검사",
- "특정 각도에서 새로운 2D 벡터를 생성합니다.",
- "임의의 각도에서 새로운 2D 단위 벡터를 생성합니다.",
- "새로운 임의의 3D 단위 벡터를 생성합니다."
- ]
- },
- "p5.File": {
- "description": [
- "파일을 위한 기본 클래스입니다. Element.drop()과 createFileInput()에 사용됩니다."
- ],
- "params": {
- "file": "파일: 래핑된 파일"
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
},
- "fields": [
- "기본 파일 객체. 모든 일반 File 메소드를 호출할 수 있습니다.",
- "파일 유형 (이미지, 텍스트 등)",
- "파일 하위 유형 (주로 jpg, png, xml 등의 파일 확장자)",
- "파일명",
- "파일 크기",
- "이미지 데이터를 담는 URL 문자열"
- ],
- "returns": ""
- },
- "p5.Graphics": {
- "description": [
- "렌더러을 둘러싼 얇은 래퍼(wrapper)로, 그래픽 버퍼 객체를 생성하는 데에 사용합니다. 화면 밖 그래픽 버퍼에 그리려면 이 클래스를 사용하세요. 2개의 매개변수는 너비와 높이를 픽셀 단위로 지정합니다. 이 클래스의 필드와 메소드는 확장성이 있으나, p5를 위한 일반적인 드로잉 API를 반영합니다. p5.Element를 확장합니다."
- ],
- "params": {
- "w": "숫자: 너비값",
- "h": "숫자: 높이값",
- "renderer": "상수: 사용할 렌더러, P2D 또는 WEBGL",
- "pInst": "P5: p5 인스턴스에 대한 포인터 (선택 사항)"
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
},
- "methods": [
- "그래픽 버퍼 객체로 자동 재설정되지 않은 특정값들(예: 레퍼런스 중 변형(Transform) 또는 조명(Light) 항목에 해당하는 함수들로서 지정된 값들). 이 메소드를 draw() 함수 안에서 호출하면, 기본 캔버스의 행위를 복제합니다.",
- "페이지에서 그래픽 객체를 제거하고 이 객체에 연결된 모든 소스들을 연결 해제합니다."
- ]
+ "amp": {
+ "description": [
+ "Set the output level of the gain node."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ }
},
- "p5.Font": {
+ "p5.Distortion": {
"description": [
- "폰트 조정을 위한 기본 클래스"
+ "A Distortion effect created with a Waveshaper Node, with an approach adapted from Kevin Ennis ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
],
"params": {
- "pInst": "P5: p5 인스턴스 포인터 (선택 사항)"
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
},
- "fields": "기본 개방형 글꼴 구현",
- "methods": [
- "이 폰트로 지정된 텍스트 문자열에 대한 바운딩 박스를 반환합니다. (현재 텍스트 한 줄씩만 지원합니다.)",
- "지정된 텍스트 경로를 따르는 점들의 배열을 계산합니다."
- ]
- },
- "p5.Element": {
- "description": [
- "캔버스, 그래픽 버퍼, 기타 HTML 요소를 비롯하여, 스케치에 추가된 모든 요소(element)들을 위한 기본 클래스입니다. p5.Element 클래스는 직접 호출되지 않지만, 그 객체는 createCanvas, createGraphics, createDiv, createImg, createInput 호출을 통해 생성됩니다."
- ],
- "params": {
- "elt": "문자열: 래핑된 DOM 노드",
- "pInst": "P5: p5 인스턴스에 대한 포인터 (선택 사항)"
+ "WaveShaperNode": {
+ "description": [
+ "The p5.Distortion is built with a Web Audio WaveShaper Node ."
+ ]
},
- "fields": [
- "기본 HTML 요소로, 모든 일반 HTML 메소드를 호출."
- ],
- "methods": [
- "지정된 부모 클래스에 요소를 연결합니다. 요소의 컨테이너를 설정하는 방법입니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 부모 노드가 반환됩니다. 캔버스 배치하는 다른 방법들은 이 위키 페이지 를 참고하세요.",
- "요소의 ID를 설정합니다. 별도로 지정한 ID 인수가 없으면, 요소의 현재 ID를 반환합니다. 요소당 1개의 특정 id를 가질 수 있습니다. .class() 함수는 동일한 클래스 이름을 가진 여러 요소들을 식별하는 데에 사용됩니다.",
- "사용자가 지정한 클래스를 요소에 더합니다. 별도로 지정한 클래스 인수가 없으면, 요소의 현재 클래스(들)를 포함하는 문자열을 반환합니다.",
- ".mousePressed() 함수는 요소 위에서 마우스 버튼이 눌릴 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".doubleClicked() 함수는 요소 위에서 마우스 버튼을 빠르게 두 번 클릭할 때마다 한 번씩 호출됩니다. 요소에 행동 특정적 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".mouseWheel() 함수는 요소 위에서 마우스 휠을 스크롤 할 때마다 한 번싹 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다. 이 함수에서는 콜백 함수를 인수로서 사용할 수 있습니다. 그 경우, 요소 위에서 휠 이벤트가 발생할 때마다 콜백 함수가 하나의 event 인수로서 전달됩니다. event.deltaY 속성은 마우스 휠이 위쪽으로 회전하거나 사용자로부터 멀어지면 음수값을 반환하고, 그 반대 방향에선 양수값을 반환합니다. event.deltaX 속성은 마우스 가로 휠 스크롤을 읽는다는 점을 제외하고 event.deltaY와 동일하게 작동합니다.",
- ".mouseReleased() 함수는 요소 위에서 마우스 버튼을 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".mouseClicked() 함수는 요소 위에서 마우스 버튼을 클릭한 뒤 놓을 때마다 한 번씩 호출됩니다. 터치 스크린 기반의 모바일 브라우저에서는 손가락 탭을 통해 이벤트가 발생합니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".mouseMoved() 함수는 마우스가 요소 위에서 움직일 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".mouseOver() 함수는 마우스가 요소 위에 올라올 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".mouseOut() 함수는 마우스가 요소 위에서 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".touchStarted() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".touchMoved() 함수는 터치 움직임이 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".touchEnded() 함수는 터치가 등록될 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".dragOver() 함수는 요소 위에 파일을 드래그할 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- ".dragLeave() 함수는 드래그된 파일이 요소 영역을 벗어날 때마다 한 번씩 호출됩니다. 요소에 이벤트 리스너를 연결하는 데에 사용됩니다.",
- "요소에 특정 클래스를 추가합니다.",
- "요소로부터 특정 클래스를 제거합니다.",
- "요소에 이미 클래스가 설정되어 있는지 확인합니다.",
- "요소 클래스를 토글합니다.",
- "지정된 부모 클래스에 요소를 자식으로서 연결합니다. 문자열 ID, DOM 노드, 또는 p5.Element를 허용합니다. 별도의 인수가 지정되지 않을 경우, 자식 DOM 노드 배열이 반환됩니다. ",
- "p5 Element를 수직으로, 수평으로, 또는 수직 및 수평으로 가운데 정렬합니다. 별도로 지정한 부모가 있는 경우 부모를 기준으로, 부모가 없는 경우 그 자신을 기준으로 합니다. 별도로 지정한 인수가 없으면 요소는 수직 및 수평으로 정렬됩니다.",
- "사용자가 별도로 지정한 인수로서 요소의 내부 HTML을 설정하며, 기존의 모든 HTML를 대체합니다. 참(true)이 그 2번째 인수로서 포함된 경우, 기존의 모든 HTML을 대체하는 대신 새로운 HTML을 추가(append)합니다. 별도로 지정한 인수가 없으면 요소의 내부 HTML을 반환합니다.",
- "요소의 위치를 설정합니다. 별도로 지정한 위치 유형 인수가 없는 경우, 화면창의 (0,0)을 기준으로 합니다. 기본적으로, 이 메소드를 통해 position:absolute와 left 및 top 스타일 속성을 설정합니다. 선택적으로, 3번째 인수를 통해 x 및 y 좌표의 위치 지정 체계 를 설정할 수 있습니다. 별도로 지정한 인수가 없으면 함수는 요소의 x와 y의 위치를 반환합니다.",
- "별도 지정한 값(2번째 인수)으로 CSS 스타일 속성(1번째 인수)을 설정합니다. 1개의 인수만 지정할 경우, .style()은 주어진 속성의 값을 반환합니다. 그러나 이 인수를 CSS 구문('text-align:center')으로 작성할 경우, .style()은 CSS를 설정합니다.",
- "사용자가 지정한 요소에 새 속성을 추가하거나, 요소의 기존 속성값을 변경합니다. 별도로 지정한 값이 없는 경우 주어진 속성의 값을 반환하고, 속성이 설정되지 않은 경우 null을 반환합니다. ",
- "요소로부터 속성을 제거합니다.",
- "별도로 지정한 인수가 없는 경우, 요소의 값을 반환하거나 설정합니다.",
- "현재 요소를 보여줍니다. display:block로 스타일을 설정합니다.",
- "현재 요소를 숨깁니다. display:none으로 스타일을 설정합니다.",
- "요소의 너비와 높이를 설정합니다. AUTO는 한 번에 한 개의 수치를 조정하는 데에 쓰입니다. 별도로 지정한 인수가 없는 경우, 객체 속 요소의 너비와 높이를 반환합니다. 이미지 파일과 같이 불러오기가 필요한 요소의 경우, 불러오기가 완료된 후 함수를 호출하는 것을 권장합니다.",
- "요소를 제거하고, 모든 미디어 스트림을 중지하며, 모든 리스너를 해제합니다.",
- "요소에 드롭된 파일이 로드될 때마다 호출되는 콜백을 등록합니다. p5는 메모리에 드롭된 모든 파일을 로드하고 이를 p5.File 객체로서 콜백에 전달합니다. 동시에 여러 파일을 드롭할 경우, 콜백이 여러 번 호출됩니다. 선택적으로, raw 드롭 이벤트에 등록될 2번째 콜백을 전달할 수 있습니다. 이 경우, 콜백에 본래 DragEvent도 제공됩니다. 동시에 여러 파일을 드롭하면 2번째 콜백이 드롭당 한 번씩 발생하며, 1번째 콜백은 로드된 파일당 한 번씩 발생합니다."
- ]
- },
- "p5.PrintWriter": {
- "description": [
- ""
- ],
- "methods": [
- "PrintWriter 스트림에 데이터를 작성합니다.",
- "PrintWriter 스트림에 데이터를 작성하고, 마지막에 새로운 한 줄을 추가합니다.",
- "PrintWriter 객체에 이미 작성된 데이터를 제거합니다.",
- "PrintWriter를 종료합니다."
- ]
- },
- "p5.MediaElement": {
- "description": [
- "오디오/비디오 처리를 위해 p5.Element를 확장합니다. p5.Element의 메소드 뿐 아니라, 미디어 제어를 위한 메소드도 포함합니다. p5.MediaElements는 직접 호출되지 않지만, createVideo, createAudio, CreateCapture 호출을 통해 생성됩니다."
- ],
- "params": {
- "elt": "문자열: 래핑된 DOM 노드"
+ "process": {
+ "description": [
+ "Process a sound source, optionally specify amount and oversample values."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
},
- "fields": [
- "미디어 요소 소스 경로"
- ],
- "methods": [
- "HTML5 미디어 요소를 재생합니다.",
- "HTML5 미디어 요소를 중지합니다. (현재 시간을 0으로 설정)",
- "HTML5 미디어 요소를 일시정지합니다.",
- "HTML5 미디어 요소의 반복을 참(true)로 설정하고, 재생 시작합니다.",
- "HTML5 미디어 요소의 반복을 거짓(false)으로 설정합니다. 종료 시점에 도달하면 요소가 중지합니다.",
- "HTML5 미디어 요소 자동재생 여부 설정",
- "HTML5 미디어 요소의 볼륨을 설정합니다. 별도로 지정한 인수가 없으면, 현재 볼륨을 반환합니다.",
- "별도로 지정한 인수가 없으면, 요소의 현재 재생 속도를 반환하빈다. 속도 매개변수는 2.0일 때 2배속으로, 0.5일 때 0.5배속으로, -1일 때 정상 속도로 역재생합니다. (모든 브라우저가 역재생을 지원하지 않으며, 일부 지원 브라우저에서도 부드럽게 재생되지 않을 수 있습니다.)",
- "별도로 지정한 인수가 없을 경우, 요소의 현재 시간을 반환합니다. 인수가 지정될 경우, 요소의 현재 시간이 해당 인수로 설정됩니다.",
- "HTML5 미디어 요소의 지속 시간을 반환합니다.",
- "오디오/비디오 요소가 종료 시점에 도달할 때 호출할 이벤트를 예약합니다. 요소가 반복하는 경우 호출되지 않습니다. 요소는 oneded 콜백에 인수로 전달됩니다.",
- "요소가 출력한 오디오를 특정 audioNode나 p5.sound 객체로 보냅니다. 요소가 없는 경우, p5의 마스터 출력에 연결합니다. 모든 연결은 .disconnect() 메소드로 제거할 수 있습니다. p5.sound.js 애드온 라이브러리로 이러한 방법을 사용할 수 있습니다.",
- "마스터 출력을 비롯하여 모든 웹 오디오 라우팅을 분리합니다. 사용 예: 오디오 효과를 통해 출력을 다시 라우팅할 때",
- "웹 브라우저가 지정한 기본 미디어 요소(MediaElement) 컨트롤을 나타냅니다.",
- "기본 미디어 요소(MediaElement) 컨트롤을 숨깁니다.",
- "오디오/비디오와 같은 미디어 요소(MediaElement)가 재생 큐 지점에 도달할 때 발생할 이벤트를 예약합니다. 콜백 함수, 콜백이 발생할 시간(초 단위), 콜백에 대한 선택적 매개변수를 허용합니다. 1번째 매개변수는 시간(time)을, 2번째 매개변수는 param을 콜백 함수에 전달합니다.",
- "ID를 기반으로 콜백을 제거합니다. ID는 addCue 메소드로 반환됩니다.",
- "addCue 메소드로 예약된 모든 콜백을 제거합니다."
- ],
- "returns": ""
- },
- "p5.TypedDict": {
- "description": [
- "모든 p5.Dictionary 유형을 위한 기본 클래스 입니다. 사용자가 지정한 사전(Dictionary) 클래스는 이 클래스를 상속할 수 있습니다."
- ],
- "methods": [
- "사전 안에 현재 저장된 키-값(key-value) 쌍의 개수를 반환합니다.",
- "지정된 키(key)가 사전 안에 존재할 경우 참(true)을, 그렇지 않으면 거짓(false)를 반환합니다.",
- "지정된 키에 저장된 값을 반환합니다.",
- "지정된 키가 사전 안에 존재할 경우 연관된 값을 반환합니다. 그렇지 않으면 새로운 키-값 쌍이 추가됩니다.",
- "새로운 키-값 쌍을 사전 안에 생성합니다.",
- "기존에 저장된 모든 키-값 쌍들을 사전으로부터 제거합니다.",
- "특정 키에 저장된 키-값 쌍을 사전으로부터 제거합니다.",
- "Dictionary에 현재 저장된 항목들의 로그를 콘솔창에 출력합니다.",
- "로컬 다운로드를 위해 사전을 CSV 파일로 변환합니다.",
- "로컬 다운로드를 위해 사전을 JSON 파일로 변환합니다."
- ],
- "returns": ""
- },
- "p5.NumberDict": {
- "description": [
- "숫자를 위한 간단한 사전 클래스 p5.TypedDict를 확장합니다."
- ],
- "params": {
- "UNKNOWN-PARAM-1": "특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 더하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다.",
- "UNKNOWN-PARAM-2": "특정 키에 현재 저장된 값에서 사용자가 지정한 숫자를 빼고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다.",
- "UNKNOWN-PARAM-3": "특정 키에 현재 저장된 값에 사용자가 지정한 숫자를 곱하고, 그 결과값은 사전 안에 저장되어있던 기존값을 대체합니다.",
- "UNKNOWN-PARAM-4": "특정 키에 현재 저장된 값을 사용자가 지정한 숫자로 나누고, 그 몫은 사전 안에 저장되어있던 기존값을 대체합니다.",
- "UNKNOWN-PARAM-5": "사전 안에 현재 저장된 값들 중 가장 낮은 숫자를 반환합니다.",
- "UNKNOWN-PARAM-6": "사전 안에 현재 저장된 값들 중 가장 높은 숫자를 반환합니다.",
- "UNKNOWN-PARAM-7": "사전에서 사용된 키들 중 가장 낮은 키를 반환합니다.",
- "UNKNOWN-PARAM-8": "사전에서 사용된 키들 중 가장 높은 키를 반환합니다."
- },
- "returns": ""
+ "set": {
+ "description": [
+ "Set the amount and oversample of the waveshaper distortion."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
+ },
+ "getAmount": {
+ "description": [
+ "Return the distortion amount, typically between 0-1."
+ ],
+ "returns": "Number: Unbounded distortion amount. Normal values range from 0-1."
+ },
+ "getOversample": {
+ "description": [
+ "Return the oversampling."
+ ],
+ "returns": "String: Oversample can either be 'none', '2x', or '4x'."
+ }
}
}
\ No newline at end of file
diff --git a/src/data/reference/zh-Hans.json b/src/data/reference/zh-Hans.json
index 75315cdc51..a80dbe187d 100644
--- a/src/data/reference/zh-Hans.json
+++ b/src/data/reference/zh-Hans.json
@@ -2,14 +2,10 @@
"h1": "参考文献",
"reference-search": "搜寻 API",
"reference-description1": "找不到您要的条目吗?您或许要查看",
- "reference-description2": "或",
"reference-description3": "You can download an offline version of the reference.",
- "reference-contribute1": "发现任何错误或有任何建议吗",
"reference-contribute2": "请让我们知道",
"reference-error1": "发现错字或错误吗?",
- "reference-error2": "的文献被记录在",
"reference-error3": "非常欢迎您",
- "reference-error4": "更改该文件",
"reference-error5": "并开启一个 pull request。",
"reference-example": "范例",
"reference-description": "说明",
@@ -18,26 +14,24 @@
"reference-syntax": "语法",
"reference-returns": "返回",
"Color": "颜色",
- "Shape": "形状",
+ "Color Conversion": "Color Conversion",
"Creating & Reading": "创造及读取",
"Setting": "设置",
+ "Shape": "形状",
"2D Primitives": "2D 形状",
"Attributes": "属性",
"Curves": "弧形",
"Vertex": "顶点",
- "3D Models": "3D 模型",
- "3D Primitives": "3D 形状",
"Constants": "常量",
- "Structure": "结构",
"Environment": "环境",
+ "Structure": "结构",
"DOM": "DOM",
"Rendering": "渲染",
+ "Foundation": "Foundation",
"Transform": "变形",
"Data": "资料",
+ "LocalStorage": "LocalStorage",
"Dictionary": "字典",
- "Array Functions": "数组函数",
- "Conversion": "转换",
- "String Functions": "字符串函数",
"Events": "事件",
"Acceleration": "加速度",
"Keyboard": "键盘",
@@ -50,190 +44,241 @@
"Input": "输入",
"Output": "输出",
"Table": "表格",
- "Time & Date": "时间和日期",
- "XML": "XML",
"Math": "数学",
"Calculation": "计算",
+ "Vector": "Vector",
"Noise": "噪声",
+ "Random": "Random",
"Trigonometry": "三角学",
"Typography": "字体",
- "Font": "字形",
+ "Array Functions": "数组函数",
+ "Conversion": "转换",
+ "String Functions": "字符串函数",
+ "Time & Date": "时间和日期",
+ "3D Primitives": "3D 形状",
"Lights, Camera": "灯光、相机",
- "Camera": "相机",
+ "Interaction": "Interaction",
"Lights": "灯光",
+ "3D Models": "3D 模型",
"Material": "材料",
+ "Camera": "相机",
"p5": {
+ "description": [
+ "This is the p5 instance constructor. ",
+ "A p5 instance holds all the properties and methods related to a p5 sketch. It expects an incoming sketch closure and it can also take an optional node parameter for attaching the generated p5 canvas to a node. The sketch closure takes the newly created p5 instance as its sole argument and may optionally set preload() , setup() , and/or draw() properties on it for running a sketch. ",
+ "A p5 sketch can run in \"global\" or \"instance\" mode: \"global\" - all properties and methods are attached to the window \"instance\" - all properties and methods are bound to this p5 object"
+ ],
+ "returns": "P5: a p5 instance",
+ "params": {
+ "sketch": "Function: a closure that can set optional preload() , setup() , and/or draw() properties on the given p5 instance",
+ "node": "HTMLElement: (Optional) element to attach canvas to"
+ },
"alpha": {
- "description": ["从颜色或像素数组中提取透明度(alpha)值。"],
+ "description": [
+ "从颜色或像素数组中提取透明度(alpha)值。"
+ ],
+ "returns": "数字:该透明度值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该透明度值"
+ }
},
"blue": {
- "description": ["从颜色或像素数组中提取蓝色彩值。"],
+ "description": [
+ "从颜色或像素数组中提取蓝色彩值。"
+ ],
+ "returns": "数字:该蓝色彩值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该蓝色彩值"
+ }
},
"brightness": {
- "description": ["从颜色或像素数组中提取 HSB 的亮度值。"],
+ "description": [
+ "从颜色或像素数组中提取 HSB 的亮度值。"
+ ],
+ "returns": "数字:该亮度值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该亮度值"
+ }
},
"color": {
"description": [
- "创造颜色物件并将其存放在颜色变量内。依当时的颜色模式而定,参数可被解读成 RGB 或 HSB 值。默认模式为 RGB 值从 0 至 255,因此调用函数 color(255, 204, 0) 将返回亮黄色。 请注意如果 color() 值被提供一个参数,它将被解读成灰阶值;增加多一个参数,它将被用来定义透明度。当被提供三个参数时,它们将被解读成 RGB 或 HSB 值;增加第四个参数将定义透明度。 如果只提供单一字符串参数,RGB、RGBA 和 十六进制 CSS 颜色字符串都为受支持的模式。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。"
+ "创造颜色物件并将其存放在颜色变量内。依当时的颜色模式而定,参数可被解读成 RGB 或 HSB 值。默认模式为 RGB 值从 0 至 255,因此调用函数 color(255, 204, 0) 将返回亮黄色。 请注意如果 color() 值被提供一个参数,它将被解读成灰阶值;增加多一个参数,它将被用来定义透明度。当被提供三个参数时,它们将被解读成 RGB 或 HSB 值;增加第四个参数将定义透明度。 如果只提供单一字符串参数,RGB、RGBA 和 十六进制 CSS 颜色字符串都为受支持的模式。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。",
+ "",
+ ""
],
+ "returns": "p5.Color:返回的颜色",
"params": {
- "v1": "数字:一个定义白与黑之间的数值",
- "v2": "数字:透明度值,需在被定义的范围内(默认为 0 至 255)",
- "v3": "数字:红彩值或色调值,需在被定义的范围内",
- "alpha": "数字:绿彩值或饱和度值,需在被定义的范围内",
- "UNKNOWN-PARAM-5": "数字:蓝彩值或亮度值,需在被定义的范围内",
- "UNKNOWN-PARAM-6": "字符串:颜色字符串",
- "UNKNOWN-PARAM-7": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-8": "p5.Color:"
- },
- "returns": "p5.Color:返回的颜色"
+ "gray": "数字:一个定义白与黑之间的数值",
+ "alpha": "数字:透明度值,需在被定义的范围内(默认为 0 至 255)",
+ "v1": "数字:红彩值或色调值,需在被定义的范围内",
+ "v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
+ "v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
+ "value": "字符串:颜色字符串",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "color": "p5.Color:"
+ }
},
"green": {
- "description": ["从颜色或像素数组中提取绿色彩值。"],
+ "description": [
+ "从颜色或像素数组中提取绿色彩值。"
+ ],
+ "returns": "数字:该绿色彩值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该绿色彩值"
+ }
},
"hue": {
"description": [
- "从颜色或像素数组中提取色调值。 色调值可在 HSB 及 HSL 颜色中找到。此函数会返回标准化 HSB 值的色调值只要被提供的参数是 HSB 颜色物件(或如果被提供的参数是像素数组,颜色模式是 HSB),不然默认将会返回标准化 HSL 值的色调值。(两者的值只有在这两个不同的系统有不同的最高色调值时才会有差别)"
+ "从颜色或像素数组中提取色调值。 色调值可在 HSB 及 HSL 颜色中找到。此函数会返回标准化 HSB 值的色调值只要被提供的参数是 HSB 颜色物件(或如果被提供的参数是像素数组,颜色模式是 HSB),不然默认将会返回标准化 HSL 值的色调值。(两者的值只有在这两个不同的系统有不同的最高色调值时才会有差别)",
+ ""
],
+ "returns": "数字:该色调值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该色调值"
+ }
},
"lerpColor": {
"description": [
- "混合两个颜色以找到一个介于它们之间的颜色。 amt 参数代表两个值之间插入的量,0.0 代表第一个颜色、0.1 代表非常接近第一个颜色、0.5 代表两个颜色之间的一半等等。低于 0 的值将被当作 0 看待。这和 lerp() 的行为不一样不过这是因为在范围外的值可能产生奇怪和意料之外的颜色。"
+ "混合两个颜色以找到一个介于它们之间的颜色。 amt 参数代表两个值之间插入的量,0.0 代表第一个颜色、0.1 代表非常接近第一个颜色、0.5 代表两个颜色之间的一半等等。低于 0 的值将被当作 0 看待。这和 lerp() 的行为不一样不过这是因为在范围外的值可能产生奇怪和意料之外的颜色。",
+ ""
],
+ "returns": "p5.Color:插值颜色",
"params": {
"c1": "p5.Color:从这颜色开始插入",
"c2": "p5.Color:在这颜色结束插入",
"amt": "数字:一个介于 0 和 1 的数字"
- },
- "returns": "p5.Color:插值颜色"
+ }
},
"lightness": {
- "description": ["从颜色或像素数组中提取 HSL 的光度值。"],
+ "description": [
+ "从颜色或像素数组中提取 HSL 的光度值。"
+ ],
+ "returns": "数字:该光度值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该光度值"
+ }
},
"red": {
- "description": ["从颜色或像素数组中提取红色彩值。"],
+ "description": [
+ "从颜色或像素数组中提取红色彩值。"
+ ],
+ "returns": "数字:该红色彩值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该红色彩值"
+ }
},
"saturation": {
"description": [
- "从颜色或像素数组中提取饱和度值。 饱和度在 HSB 和 HSL 模式中的缩放比例不同。此函数将会返回 HSB 值的饱和度值只要被提供的参数是 HSB 颜色物件(或如果被提供的参数是像素数组,颜色模式是 HSB),不然默认将会返回 HSL 值的饱和度值。"
+ "从颜色或像素数组中提取饱和度值。 饱和度在 HSB 和 HSL 模式中的缩放比例不同。此函数将会返回 HSB 值的饱和度值只要被提供的参数是 HSB 颜色物件(或如果被提供的参数是像素数组,颜色模式是 HSB),不然默认将会返回 HSL 值的饱和度值。",
+ ""
],
+ "returns": "数字:该饱和度值",
"params": {
"color": "p5.Color | 数字数组 | 字符串:p5.Color 物件、颜色部件或 CSS 颜色值"
- },
- "returns": "数字:该饱和度值"
+ }
},
"background": {
"description": [
- "background() 函数设定 p5.js 画布的背景颜色。默认背景颜色为浅灰色。这函数通常用在 draw() 函数内以在各画面开始时清空画布,不过它也能在 setup() 内使用以定义第一个画面的背景颜色或当背景颜色只需要被定义一次时。 背景颜色可用 RGB、HSB 或 HSL 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义背景颜色。 p5.Image 也能被用来提供背景图像。"
- ],
- "params": {
- "v1": "p5.Color:任何使用 color() 函数创造的颜色",
- "v2": "字符串:颜色字符串,可接受的格式包括:整数 rgb() 或 rgba()、百分率 rgb() 或 rgba()、3 位十六进制、6 位十六进制",
- "v3": "数字:透明度值,需在被定义的范围内(默认为 0 至 255)",
- "a": "数字:一个定义白与黑之间的数值",
- "UNKNOWN-PARAM-5": "数字:红彩值或色调值(取决于当时的颜色模式)",
- "UNKNOWN-PARAM-6": "数字:绿彩值或饱和度值(取决于当时的颜色模式)",
- "UNKNOWN-PARAM-7": "数字:蓝彩值或亮度值(取决于当时的颜色模式)",
- "UNKNOWN-PARAM-8": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-9": "p5.Image:一个使用 loadImage() 或 createImage() 创造的图像,用以设定背景图像(必须和画布有相同的大小)"
- },
- "returns": ""
+ "background() 函数设定 p5.js 画布的背景颜色。默认背景颜色为浅灰色。这函数通常用在 draw() 函数内以在各画面开始时清空画布,不过它也能在 setup() 内使用以定义第一个画面的背景颜色或当背景颜色只需要被定义一次时。 背景颜色可用 RGB、HSB 或 HSL 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义背景颜色。 p5.Image 也能被用来提供背景图像。",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "color": "p5.Color:任何使用 color() 函数创造的颜色",
+ "colorstring": "字符串:颜色字符串,可接受的格式包括:整数 rgb() 或 rgba()、百分率 rgb() 或 rgba()、3 位十六进制、6 位十六进制",
+ "a": "数字:透明度值,需在被定义的范围内(默认为 0 至 255)",
+ "gray": "数字:一个定义白与黑之间的数值",
+ "v1": "数字:红彩值或色调值(取决于当时的颜色模式)",
+ "v2": "数字:绿彩值或饱和度值(取决于当时的颜色模式)",
+ "v3": "数字:蓝彩值或亮度值(取决于当时的颜色模式)",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "image": "p5.Image:一个使用 loadImage() 或 createImage() 创造的图像,用以设定背景图像(必须和画布有相同的大小)"
+ }
},
"clear": {
"description": [
"清除图形缓冲区内的像素。这函数只能用于使用 createCanvas() 函数创造的 p5.Canvas 物件,而不能用于主要的显示窗口。使用 createGraphics() 创造的图形缓冲并不像主要的图形缓冲,它们能是完全透明或半透明的。这函数将清空所有东西使每个像素都是 100% 透明。"
- ],
- "returns": ""
+ ]
},
"colorMode": {
"description": [
- "colorMode() 改变 p5.js 解读颜色资料的方式。默认情况下,fill()、stroke()、background() 及 color() 的参数都是介于 0 至 255 的 RGB 颜色值。这和设置 colorMode(RGB, 255) 的效果一样。设置 colorMode(HSB) 让您使用 HSB 模式,默认情况下,这代表 colorMode(HSB, 360, 100, 100, 1)。您也可以使用 HSL。"
+ "colorMode() 改变 p5.js 解读颜色资料的方式。默认情况下,fill()、stroke()、background() 及 color() 的参数都是介于 0 至 255 的 RGB 颜色值。这和设置 colorMode(RGB, 255) 的效果一样。设置 colorMode(HSB) 让您使用 HSB 模式,默认情况下,这代表 colorMode(HSB, 360, 100, 100, 1)。您也可以使用 HSL。",
+ ""
],
"params": {
"mode": "常量: RGB、HSB 或 HSL,分别代表红绿蓝及色调/饱和度/亮度(或光度)",
- "max1": "数字:所有数值的最大值",
- "max2": "数字:红色值或色调值的最大值,取决于当时的颜色模式",
- "max3": "数字:绿色值或饱和度值的最大值,取决于当时的颜色模式",
- "maxA": "数字:蓝色值或亮度/光度值的最大值,取决于当时的颜色模式",
- "UNKNOWN-PARAM-6": "数字:透明度值的最大值"
- },
- "returns": ""
+ "max": "数字:所有数值的最大值",
+ "max1": "数字:红色值或色调值的最大值,取决于当时的颜色模式",
+ "max2": "数字:绿色值或饱和度值的最大值,取决于当时的颜色模式",
+ "max3": "数字:蓝色值或亮度/光度值的最大值,取决于当时的颜色模式",
+ "maxA": "数字:透明度值的最大值"
+ }
},
"fill": {
"description": [
- "设置形状的填充色。比如说,如果您调用 fill(204, 102, 0),所有接下来的形状都会被填上橙色。这颜色可用 RGB 或 HSB 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义填充颜色。"
+ "设置形状的填充色。比如说,如果您调用 fill(204, 102, 0),所有接下来的形状都会被填上橙色。这颜色可用 RGB 或 HSB 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义填充颜色。",
+ "",
+ ""
],
"params": {
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
"v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
"alpha": "数字:",
- "UNKNOWN-PARAM-5": "字符串:颜色字符串",
- "UNKNOWN-PARAM-6": "数字:灰阶值",
- "UNKNOWN-PARAM-7": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-8": "p5.Color:填充色"
- },
- "returns": ""
+ "value": "字符串:颜色字符串",
+ "gray": "数字:灰阶值",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "color": "p5.Color:填充色"
+ }
},
"noFill": {
"description": [
"禁用形状填充。如果 noStroke() 和 noFill() 都被调用的话,没有形状会被画在荧幕上。"
- ],
- "returns": ""
+ ]
},
"noStroke": {
"description": [
"禁用形状外线。如果 noStroke() 和 noFill() 都被调用的话,没有形状会被画在荧幕上。"
- ],
- "returns": ""
+ ]
},
"stroke": {
"description": [
- "设置形状的外形线色。这颜色可用 RGB 或 HSB 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义外形线颜色。"
+ "设置形状的外形线色。这颜色可用 RGB 或 HSB 颜色定义,取决于当时的颜色模式(默认色彩空间是 RGB,而每个数值都介于 0 至 255 之间)。默认透明度值也介于 0 至 255 之间。 如果所提供的参数是单一字符串,RGB、RGBA 和十六进制 CSS 颜色字符串及所有命名颜色都可以使用。在这情况下,提供第二个参数以定义透明度值并不被支持,而需使用 RGBA 字符串。 p5.Color 物件也能被用来定义外形线颜色。",
+ "",
+ ""
],
"params": {
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
"v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
"alpha": "数字:",
- "UNKNOWN-PARAM-5": "字符串:颜色字符串",
- "UNKNOWN-PARAM-6": "数字:灰阶值",
- "UNKNOWN-PARAM-7": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-8": "p5.Color:外形线色"
- },
- "returns": ""
+ "value": "字符串:颜色字符串",
+ "gray": "数字:灰阶值",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "color": "p5.Color:外形线色"
+ }
+ },
+ "erase": {
+ "description": [
+ "All drawing that follows erase() will subtract from the canvas.Erased areas will reveal the web page underneath the canvas.Erasing can be canceled with noErase() . ",
+ "Drawing done with image() and background() in between erase() and noErase() will not erase the canvas but works as usual."
+ ],
+ "params": {
+ "strengthFill": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's fill. This will default to 255 when no argument is given, which is full strength.",
+ "strengthStroke": "Number: (Optional) A number (0-255) for the strength of erasing for a shape's stroke. This will default to 255 when no argument is given, which is full strength."
+ }
+ },
+ "noErase": {
+ "description": [
+ "Ends erasing that was started with erase() . The fill() , stroke() , and blendMode() settings will return to what they were prior to calling erase() ."
+ ]
},
"arc": {
"description": [
- "在荧幕上画个弧形。如果函数调用只提供 x、y、w、h、start 及 stop 参数,弧形将会被画成开放的饼形段。如果提供 mode 参数,弧形可是开放式半圆形(OPEN)、封闭式半圆形(CHORD)或封闭式饼形段(PIE)。原点可使用 ellipseMode() 函数设定。"
+ "在荧幕上画个弧形。如果函数调用只提供 x、y、w、h、start 及 stop 参数,弧形将会被画成开放的饼形段。如果提供 mode 参数,弧形可是开放式半圆形(OPEN)、封闭式半圆形(CHORD)或封闭式饼形段(PIE)。原点可使用 ellipseMode() 函数设定。",
+ ""
],
"params": {
"x": "数字:弧形的椭圆形的 x 坐标",
@@ -242,13 +287,14 @@
"h": "数字:弧形的椭圆形的高度",
"start": "数字:弧形开始的角度,用弧度定义",
"stop": "数字:弧形结束的角度,用弧度定义",
- "mode": "常数:可选参数用以定义弧形的画法,可用 CHORD、PIE 或 OPEN"
- },
- "returns": ""
+ "mode": "常数:可选参数用以定义弧形的画法,可用 CHORD、PIE 或 OPEN",
+ "detail": "Number: (Optional) optional parameter for WebGL mode only. This is to specify the number of vertices that makes up the perimeter of the arc. Default value is 25."
+ }
},
"ellipse": {
"description": [
- "在荧幕上画个椭圆形。宽度和高度相同的椭圆形为正圆形。在默认上,前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。如果高度参数没有被提供的话,宽度参数值将为用来定义高度和宽度。如果高度或宽度为负数,函数将会取绝对值。原点可使用 ellipseMode() 函数设定。"
+ "在荧幕上画个椭圆形。宽度和高度相同的椭圆形为正圆形。在默认上,前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。如果高度参数没有被提供的话,宽度参数值将为用来定义高度和宽度。如果高度或宽度为负数,函数将会取绝对值。原点可使用 ellipseMode() 函数设定。",
+ ""
],
"params": {
"x": "数字:椭圆形的 x 坐标",
@@ -256,8 +302,17 @@
"w": "数字:椭圆形的宽度",
"h": "数字:椭圆形的高度",
"detail": "整数:椭圆形的径向扇区数"
- },
- "returns": ""
+ }
+ },
+ "circle": {
+ "description": [
+ "Draws a circle to the screen. A circle is a simple closed shape.It is the set of all points in a plane that are at a given distance from a given point, the centre.This function is a special case of the ellipse() function, where the width and height of the ellipse are the same. Height and width of the ellipse correspond to the diameter of the circle. By default, the first two parameters set the location of the centre of the circle, the third sets the diameter of the circle."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the centre of the circle.",
+ "y": "Number: y-coordinate of the centre of the circle.",
+ "d": "Number: diameter of the circle."
+ }
},
"line": {
"description": [
@@ -266,12 +321,11 @@
"params": {
"x1": "数字:第一个点的 x 坐标",
"y1": "数字:第一个点的 y 坐标",
- "z1": "数字:第二个点的 x 坐标",
"x2": "数字:第二个点的 y 坐标",
"y2": "数字:第一个点的 z 坐标",
+ "z1": "数字:第二个点的 x 坐标",
"z2": "数字:第二个点的 z 坐标"
- },
- "returns": ""
+ }
},
"point": {
"description": [
@@ -280,9 +334,9 @@
"params": {
"x": "数字:x 坐标",
"y": "数字:y 坐标",
- "z": "数字:z 坐标(用于 WEBGL 模式"
- },
- "returns": ""
+ "z": "数字:z 坐标(用于 WEBGL 模式",
+ "coordinate_vector": "p5.Vector: the coordinate vector"
+ }
},
"quad": {
"description": [
@@ -291,22 +345,22 @@
"params": {
"x1": "数字:第一个点的 x 坐标",
"y1": "数字:第一个点的 y 坐标",
- "z1": "数字:第二个点的 x 坐标",
"x2": "数字:第二个点的 y 坐标",
"y2": "数字:第三个点的 x 坐标",
- "z2": "数字:第三个点的 y 坐标",
"x3": "数字:第四个点的 x 坐标",
"y3": "数字:第四个点的 y 坐标",
- "z3": "数字:",
"x4": "数字:",
"y4": "数字:",
+ "z1": "数字:第二个点的 x 坐标",
+ "z2": "数字:第三个点的 y 坐标",
+ "z3": "数字:",
"z4": "数字:"
- },
- "returns": ""
+ }
},
"rect": {
"description": [
- "在荧幕上画个方形。方形是每个角都为九十度的四边形。在默认上,前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。这些参数被解读的方式可用 rectMode() 函数改变。 如果提供第五、六、七及八个参数,将定义左上角、右上角、右下角及左下角的拐角半径。没被定义的拐角半径参数将被定义为参数列内上一个定义的拐角半径值。"
+ "在荧幕上画个方形。方形是每个角都为九十度的四边形。在默认上,前两个参数将定义位置而第三和第四个参数将定义形状的宽度和高度。这些参数被解读的方式可用 rectMode() 函数改变。 如果提供第五、六、七及八个参数,将定义左上角、右上角、右下角及左下角的拐角半径。没被定义的拐角半径参数将被定义为参数列内上一个定义的拐角半径值。",
+ ""
],
"params": {
"x": "数字:方形的 x 坐标",
@@ -317,10 +371,24 @@
"tr": "数字:可选性右上角拐角半径值",
"br": "数字:可选性右下角拐角半径值",
"bl": "数字:可选性左下角拐角半径值",
- "UNKNOWN-PARAM-9": "整数:x 方向段数",
- "UNKNOWN-PARAM-10": "整数:y 方向段数"
- },
- "returns": ""
+ "detailX": "整数:x 方向段数",
+ "detailY": "整数:y 方向段数"
+ }
+ },
+ "square": {
+ "description": [
+ "Draws a square to the screen. A square is a four-sided shape with every angle at ninety degrees, and equal side size. This function is a special case of the rect() function, where the width and height are the same, and the parameter is called \"s\" for side size. By default, the first two parameters set the location of the upper-left corner, the third sets the side size of the square. The way these parameters are interpreted, may be changed with the rectMode() function. ",
+ "The fourth, fifth, sixth and seventh parameters, if specified, determine corner radius for the top-left, top-right, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the square.",
+ "y": "Number: y-coordinate of the square.",
+ "s": "Number: side size of the square.",
+ "tl": "Number: (Optional) optional radius of top-left corner.",
+ "tr": "Number: (Optional) optional radius of top-right corner.",
+ "br": "Number: (Optional) optional radius of bottom-right corner.",
+ "bl": "Number: (Optional) optional radius of bottom-left corner."
+ }
},
"triangle": {
"description": [
@@ -333,56 +401,61 @@
"y2": "数字:第二个点的 y 坐标",
"x3": "数字:第三个点的 x 坐标",
"y3": "数字:第三个点的 y 坐标"
- },
- "returns": ""
+ }
},
"ellipseMode": {
"description": [
- "更改 ellipse() 参数被解读的方式,用以更改椭圆形被画在画布上的位置。 默认模式为 ellipseMode(CENTER),ellipse() 前两个参数将被解读成椭圆形的中心点,而第三和第四个参数为宽度和高度。 ellipseMode(RADIUS) 将 ellipse() 的前两个参数解读成形状的中心点,但是第三和第四个参数被用于定义形状的半径宽度和半径高度 ellipseMode(CORNER) 将 ellipse() 的前两个参数解读成形状左上角的位置,而第三和第四个参数为宽度和高度 ellipseMode(CORNERS) 将 ellipse() 的前两个参数解读成形状其中一个角落的位置,而第三和第四个参数则被解读成对面角落的位置。 参数必须全是大写因为 Javascript 是个区分大小写的编程语言。"
+ "更改 ellipse() 参数被解读的方式,用以更改椭圆形被画在画布上的位置。 默认模式为 ellipseMode(CENTER),ellipse() 前两个参数将被解读成椭圆形的中心点,而第三和第四个参数为宽度和高度。 ellipseMode(RADIUS) 将 ellipse() 的前两个参数解读成形状的中心点,但是第三和第四个参数被用于定义形状的半径宽度和半径高度 ellipseMode(CORNER) 将 ellipse() 的前两个参数解读成形状左上角的位置,而第三和第四个参数为宽度和高度 ellipseMode(CORNERS) 将 ellipse() 的前两个参数解读成形状其中一个角落的位置,而第三和第四个参数则被解读成对面角落的位置。 参数必须全是大写因为 Javascript 是个区分大小写的编程语言。",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "常量:CENTER、RADIUS、CORNER 或 CORNERS"
- },
- "returns": ""
+ }
},
"noSmooth": {
"description": [
"所有形状的边缘都为锯齿状。注意 smooth() 为默认模式所以您必须调用 noSmooth() 以禁用平滑形状、图像及字体。"
- ],
- "returns": ""
+ ]
},
"rectMode": {
"description": [
- "更改 rect() 参数被解读的方式,用以更改方形被画在画布上的位置。 默认模式为 rectMode(CORNER), rect() 前两个参数将被解读成形状的左上角的位置,而第三和第四个参数为宽度和高度。 rectMode(CORNERS) 将 rect() 的前两个参数解读成形状其中一个角落的位置,而第三和第四个参数则被解读成对面角落的位置。 rectMode(CENTER) 将 rect() 的前两个参数解读成形状的中心点,而第三和第四个参数为宽度和高度。 rectMode(RADIUS) 也将的前两个参数解读成形状的中心点,但第三和第四个参数被用来定义形状一半的宽度和一半的高度。 参数必须全是大写因为 Javascript 是个区分大小写的编程语言。"
+ "更改 rect() 参数被解读的方式,用以更改方形被画在画布上的位置。 默认模式为 rectMode(CORNER), rect() 前两个参数将被解读成形状的左上角的位置,而第三和第四个参数为宽度和高度。 rectMode(CORNERS) 将 rect() 的前两个参数解读成形状其中一个角落的位置,而第三和第四个参数则被解读成对面角落的位置。 rectMode(CENTER) 将 rect() 的前两个参数解读成形状的中心点,而第三和第四个参数为宽度和高度。 rectMode(RADIUS) 也将的前两个参数解读成形状的中心点,但第三和第四个参数被用来定义形状一半的宽度和一半的高度。 参数必须全是大写因为 Javascript 是个区分大小写的编程语言。",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"mode": "常量:CORNER、CORNERS、CENTER 或 RADIUS"
- },
- "returns": ""
+ }
},
"smooth": {
"description": [
"所有形状的边缘都为非锯齿(平滑)状。smooth() 也将提高调整过大小的图像的素质。注意 smooth() 为默认模式;noSmooth() 也能用来禁用平滑形状、图像及字体。"
- ],
- "returns": ""
+ ]
},
"strokeCap": {
"description": [
- "定义线条顶点的风格。顶点风格可以是方形、扩展式或圆形,它们个别参数为:SQUARE、PROJECT 及 ROUND。默认模式为 ROUND。"
+ "定义线条顶点的风格。顶点风格可以是方形、扩展式或圆形,它们个别参数为:SQUARE、PROJECT 及 ROUND。默认模式为 ROUND。",
+ ""
],
"params": {
"cap": "常量:SQUARE、PROJECT 或 ROUND"
- },
- "returns": ""
+ }
},
"strokeJoin": {
"description": [
- "定义线条连接的风格。这些链接可以是尖角、斜角或圆角,它们个别参数为:MITER、BEVEL 及 ROUND。默认模式为 MITER。"
+ "定义线条连接的风格。这些链接可以是尖角、斜角或圆角,它们个别参数为:MITER、BEVEL 及 ROUND。默认模式为 MITER。",
+ ""
],
"params": {
"join": "常量:MITER、BEVEL 或 ROUND"
- },
- "returns": ""
+ }
},
"strokeWeight": {
"description": [
@@ -390,63 +463,62 @@
],
"params": {
"weight": "数字:线条的粗度(像素单位)"
- },
- "returns": ""
+ }
},
"bezier": {
"description": [
- "在荧幕上画个三次贝塞尔曲线。这些曲线是由一系列锚点和控制点所定义的。前两个参数定义第一个锚点而最后两个参数定义另一个锚点,这也是曲线的第一和最后一个点。中间的参数是用来定义控制点的位置并将决定曲线的形状。一般来说,控制点会将曲线“拉”向它们的方向。"
+ "在荧幕上画个三次贝塞尔曲线。这些曲线是由一系列锚点和控制点所定义的。前两个参数定义第一个锚点而最后两个参数定义另一个锚点,这也是曲线的第一和最后一个点。中间的参数是用来定义控制点的位置并将决定曲线的形状。一般来说,控制点会将曲线“拉”向它们的方向。",
+ ""
],
"params": {
"x1": "数字:第一个锚点的 x 坐标",
"y1": "数字:第一个锚点的 y 坐标",
- "z1": "数字:第一个控制点的 x 坐标",
"x2": "数字:第一个控制点的 y 坐标",
"y2": "数字:第二个控制点的 x 坐标",
- "z2": "数字:第二个控制点的 y 坐标",
"x3": "数字:第二个锚点的 x 坐标",
"y3": "数字:第二个锚点的 y 坐标",
- "z3": "数字:第一个锚点的 z 坐标",
"x4": "数字:第一个控制点的 z 坐标",
"y4": "数字:第二个锚点的 z 坐标",
+ "z1": "数字:第一个控制点的 x 坐标",
+ "z2": "数字:第二个控制点的 y 坐标",
+ "z3": "数字:第一个锚点的 z 坐标",
"z4": "数字:第二个控制点的 z 坐标"
- },
- "returns": ""
+ }
},
"bezierDetail": {
"description": [
- "定义贝塞尔曲线的解析度 默认值为 20。 这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。"
+ "定义贝塞尔曲线的解析度 默认值为 20。 这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。",
+ ""
],
"params": {
"detail": "数字:曲线的解析度"
- },
- "returns": ""
+ }
},
"bezierPoint": {
"description": [
"计算在 a、b、c、d 点定义的贝塞尔曲线上 t 位置的坐标。a 和 d 参数分别为曲线上第一和最后一个点,而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。这函数可以先调用 x 坐标然后在调用 y 坐标已找到曲线上 t 位置的点坐标。"
],
+ "returns": "数字:贝塞尔曲线上 t 位置的值",
"params": {
"a": "数字:曲线上第一个点的坐标",
"b": "数字:第一个控制点的坐标",
"c": "数字:第二个控制点的坐标",
"d": "数字:曲线上第二个点的坐标",
"t": "数字:介于 0 和 1 之间的值"
- },
- "returns": "数字:贝塞尔曲线上 t 位置的值"
+ }
},
"bezierTangent": {
"description": [
"计算在 a、b、c、d 点定义的贝塞尔曲线上 t 位置的切线值。a 和 d 参数分别为曲线上第一和最后一个点,而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。"
],
+ "returns": "数字:贝塞尔曲线上 t 位置的切线值",
"params": {
"a": "数字:曲线上第一个点的坐标",
"b": "数字:第一个控制点的坐标",
"c": "数字:第二个控制点的坐标",
"d": "数字:曲线上第二个点的坐标",
"t": "数字:介于 0 和 1 之间的值"
- },
- "returns": "数字:贝塞尔曲线上 t 位置的切线值"
+ }
},
"curve": {
"description": [
@@ -455,27 +527,26 @@
"params": {
"x1": "数字:起点控制点的 x 坐标",
"y1": "数字:起点控制点的 y 坐标",
- "z1": "数字:第一个点的 x 坐标",
"x2": "数字:第一个点的 y 坐标",
"y2": "数字:第二个点的 x 坐标",
- "z2": "数字:第二个点的 y 坐标",
"x3": "数字:终点控制点的 x 坐标",
"y3": "数字:终点控制点的 y 坐标",
- "z3": "数字:起点控制点的 z 坐标",
"x4": "数字:第一个点的 z 坐标",
"y4": "数字:第二个点的 z 坐标",
+ "z1": "数字:第一个点的 x 坐标",
+ "z2": "数字:第二个点的 y 坐标",
+ "z3": "数字:起点控制点的 z 坐标",
"z4": "数字:终点控制点的 z 坐标"
- },
- "returns": ""
+ }
},
"curveDetail": {
"description": [
- "定义曲线的解析度 默认值为 20。 这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。"
+ "定义曲线的解析度 默认值为 20。 这函数只有在 WEBGL 模式下有效果因为默认画布渲染模式并不会使用这设定。",
+ ""
],
"params": {
"resolution": "数字:曲线的解析度"
- },
- "returns": ""
+ }
},
"curveTightness": {
"description": [
@@ -483,53 +554,54 @@
],
"params": {
"amount": "数字:从原顶点的变形量"
- },
- "returns": ""
+ }
},
"curvePoint": {
"description": [
"计算在 a、b、c、d 点定义的曲线上 t 位置的坐标。a 和 d 参数分别为曲线上第一和最后一个点,而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。这函数可以先调用 x 坐标然后在调用 y 坐标已找到曲线上 t 位置的点坐标。"
],
+ "returns": "数字:贝塞尔曲线上 t 位置的值",
"params": {
"a": "数字:曲线上第一个点的坐标",
"b": "数字:第一个控制点的坐标",
"c": "数字:第二个控制点的坐标",
"d": "数字:曲线上第二个点的坐标",
"t": "数字:介于 0 和 1 之间的值"
- },
- "returns": "数字:贝塞尔曲线上 t 位置的值"
+ }
},
"curveTangent": {
"description": [
"计算在 a、b、c、d 点定义的曲线上 t 位置的切线值。a 和 d 参数分别为曲线上第一和最后一个点,而 b 和 c 为控制点。最后一个 t 参数可在 0 和 1 的范围内。"
],
+ "returns": "数字:贝塞尔曲线上 t 位置的切线值",
"params": {
"a": "数字:曲线上第一个点的坐标",
"b": "数字:第一个控制点的坐标",
"c": "数字:第二个控制点的坐标",
"d": "数字:曲线上第二个点的坐标",
"t": "数字:介于 0 和 1 之间的值"
- },
- "returns": "数字:贝塞尔曲线上 t 位置的切线值"
+ }
},
"beginContour": {
"description": [
- "使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状,比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向(顺时或逆时针)必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的,那么它里面的形状的顶点需是逆时针方向定义。 这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。"
- ],
- "returns": ""
+ "使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状,比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向(顺时或逆时针)必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的,那么它里面的形状的顶点需是逆时针方向定义。 这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。",
+ ""
+ ]
},
"beginShape": {
"description": [
- "使用 beginShape() 及 endShape() 函数可让您创造更复杂的形状。beginShape() 将开始记录形状的顶点而 endShape() 则停止记录。所提供的参数将决定由所提供的顶点该画出怎样的形状。如果模式没有被提供,所定义的形状可以是任何不规则的多边形。 可提供给 beginShape() 的参数包括 POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS 及 QUAD_STRIP。在调用 beginShape() 函数之后,一系列 vertex() 函数必须接着调用。调用 endShape() 以停止绘制形状。每个形状都将会有由当时外线色所定义的外线色及当时的填充色。 变形函数如 translate()、rotate() 及 scale() 在 beginShape() 内不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在beginShape()里面使用。"
+ "使用 beginShape() 及 endShape() 函数可让您创造更复杂的形状。beginShape() 将开始记录形状的顶点而 endShape() 则停止记录。所提供的参数将决定由所提供的顶点该画出怎样的形状。如果模式没有被提供,所定义的形状可以是任何不规则的多边形。 可提供给 beginShape() 的参数包括 POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS 及 QUAD_STRIP。在调用 beginShape() 函数之后,一系列 vertex() 函数必须接着调用。调用 endShape() 以停止绘制形状。每个形状都将会有由当时外线色所定义的外线色及当时的填充色。 变形函数如 translate()、rotate() 及 scale() 在 beginShape() 内不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在beginShape()里面使用。",
+ "",
+ ""
],
"params": {
"kind": "常量:POINTS、LINES、TRIANGLES、TRIANGLE_FAN、TRIANGLE_STRIP、QUADS 或 QUAD_STRIP"
- },
- "returns": ""
+ }
},
"bezierVertex": {
"description": [
- "定义贝塞尔曲线的顶点坐标。每次调用 bezierVertex() 将定义贝塞尔曲线的两个控制点和一个锚点,以在线或形状上增加一个新部分。 在 beginShape() 内第一次调用 bezierVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。"
+ "定义贝塞尔曲线的顶点坐标。每次调用 bezierVertex() 将定义贝塞尔曲线的两个控制点和一个锚点,以在线或形状上增加一个新部分。 在 beginShape() 内第一次调用 bezierVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。",
+ ""
],
"params": {
"x2": "数字:第一个控制点的 x 坐标",
@@ -537,25 +609,28 @@
"x3": "数字:第二个控制点的 x 坐标",
"y3": "数字:第二个控制点的 y 坐标",
"x4": "数字:第一个锚点的 x 坐标",
- "y4": "数字:第二个锚点的 x 坐标"
- },
- "returns": ""
+ "y4": "数字:第二个锚点的 x 坐标",
+ "z2": "Number: z-coordinate for the first control point (for WebGL mode)",
+ "z3": "Number: z-coordinate for the second control point (for WebGL mode)",
+ "z4": "Number: z-coordinate for the anchor point (for WebGL mode)"
+ }
},
"curveVertex": {
"description": [
- "定义曲线顶点的坐标。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。 在一系列 curveVertex() 线条中第一个和最后一个点将被用来引导曲线的起点和终点。至少必须提供四个点以画一个介于第二和第三个点的小曲线。增加第五个点将会在第二、第三及第四个点之间画个曲线。curveVertex() 函数使用的是 Catmull-Rom 样条函数。"
+ "定义曲线顶点的坐标。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。 在一系列 curveVertex() 线条中第一个和最后一个点将被用来引导曲线的起点和终点。至少必须提供四个点以画一个介于第二和第三个点的小曲线。增加第五个点将会在第二、第三及第四个点之间画个曲线。curveVertex() 函数使用的是 Catmull-Rom 样条函数。",
+ ""
],
"params": {
"x": "数字:顶点的 x 坐标",
- "y": "数字:顶点的 y 坐标"
- },
- "returns": ""
+ "y": "数字:顶点的 y 坐标",
+ "z": "Number: (Optional) z-coordinate of the vertex (for WebGL mode)"
+ }
},
"endContour": {
"description": [
- "使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状,比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向(顺时或逆时针)必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的,那么它里面的形状的顶点需是逆时针方向定义。 这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。"
- ],
- "returns": ""
+ "使用 beginContour() 及 endContour() 函数以在其他形状内创造剪影形状,比如说 “O” 字母内的空间。beginContour() 将开始记录形状的顶点而 endContour() 则停止记录。定义剪影形状的顶点定义的方向(顺时或逆时针)必须和包含它的形状不同。如果外形的顶点是顺时针方向定义的,那么它里面的形状的顶点需是逆时针方向定义。 这些函数只能在一对 beginShape()/endShape() 函数之间使用而变形函数如 translate()、rotate() 及 scale() 在一对 beginContour()/endContour() 内并不会有任何效果。其他形状如 ellipse() 或 rect() 也不能在里面使用。",
+ ""
+ ]
},
"endShape": {
"description": [
@@ -563,20 +638,21 @@
],
"params": {
"mode": "常量:使用 CLOSE 以关闭形状"
- },
- "returns": ""
+ }
},
"quadraticVertex": {
"description": [
- "定义二次贝塞尔曲线顶点的坐标。每次调用 quadraticVertex() 将定义贝塞尔曲线的一个控制点和一个锚点,以在线或形状上增加一个新部分。在 beginShape() 内第一次调用 quadraticVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。"
+ "定义二次贝塞尔曲线顶点的坐标。每次调用 quadraticVertex() 将定义贝塞尔曲线的一个控制点和一个锚点,以在线或形状上增加一个新部分。在 beginShape() 内第一次调用 quadraticVertex() 之前必须先调用一次 vertex() 以定义第一个锚点。这函数只能在 beginShape() 和 endShape() 之间使用并且也只能在 beginShape() 没有任何 MODE(模式)参数的情况下使用。",
+ ""
],
"params": {
"cx": "数字:控制点的 x 坐标",
"cy": "数字:控制点的 y 坐标",
"x3": "数字:锚点的 x 坐标",
- "y3": "数字:锚点的 y 坐标"
- },
- "returns": ""
+ "y3": "数字:锚点的 y 坐标",
+ "cz": "Number: z-coordinate for the control point (for WebGL mode)",
+ "z3": "Number: z-coordinate for the anchor point (for WebGL mode)"
+ }
},
"vertex": {
"description": [
@@ -588,220 +664,182 @@
"z": "数字:顶点的 z 坐标",
"u": "数字:顶点的纹理 u 坐标",
"v": "数字:顶点的纹理 v 坐标"
- },
- "returns": ""
+ }
},
- "loadModel": {
+ "P2D": {
"description": [
- "从一个 OBJ 档案加载一个三维模型。 OBJ 格式的其中一个限制是它没有内建的大小值。这表示不同程式输出的模型可能有非常不同的大小。如果您的模型没被展示的话,请试着调用 loadModel() 并给予 normalized 参数“真”(true)值。这会将模型缩放成适合 p5 的大小。您也可以使用 scale() 函数对您的模型最后大小做与更多的调整。"
- ],
- "params": {
- "path": "字符串:要加载的模型的路径",
- "normalize": "布尔值:如果为真,在加载时将模型缩放成标准大小。",
- "successCallback": "函数(p5.Geometry):此函数将在模型完成加载后被调用,将被给予该三维模型为参数。",
- "failureCallback": "函数(Event):如果模型加载失败,此函数将被调用并给予错误事件(event)为参数。"
- },
- "returns": "p5.Geometry:p5.Geometry 物件"
- },
- "model": {
- "description": ["将一个三维模型渲染在荧幕上。"],
- "params": {
- "model": "p5.Geometry:要渲染的已加载的模型"
- },
- "returns": ""
- },
- "plane": {
- "description": ["用给予的宽度和高度画一个平面。"],
- "params": {
- "width": "数字:平面的宽度",
- "height": "数字:平面的高度",
- "detailX": "整数:(可选)在 x 轴的三角形细分数",
- "detailY": "整数:(可选)在 y 轴的三角形细分数"
- },
- "returns": ""
- },
- "box": {
- "description": ["用给予的宽度、高度及深度画一个立方体。"],
- "params": {
- "width": "数字:立方体的宽度",
- "Height": "数字:立方体的高度",
- "depth": "数字:立方体的深度",
- "detailX": "整数:(可选)在 x 轴的三角形细分数",
- "detailY": "整数:(可选)在 y 轴的三角形细分数"
- },
- "returns": ""
- },
- "sphere": {
- "description": ["用给予的半径画一个球形。"],
- "params": {
- "radius": "数字:球形的半径",
- "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
- "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 16"
- },
- "returns": ""
- },
- "cylinder": {
- "description": ["用给予的半径和高度画一个圆筒形。"],
- "params": {
- "radius": "数字:表面的半径",
- "height": "数字:圆筒形的高度",
- "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
- "detailY": "整数:y 轴分割的数量,越多分割几何形越平滑,默认值为 1",
- "bottomCap": "布尔值:是否该画圆筒形的底部",
- "topCap": "布尔值:是否该画圆筒形的顶部"
- },
- "returns": ""
- },
- "cone": {
- "description": ["用给予的半径和高度画一个锥体形。"],
- "params": {
- "radius": "数字:底部表面的半径",
- "height": "数字:锥体形的高度",
- "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
- "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 1",
- "cap": "布尔值:是否该画锥体形的底部"
- },
- "returns": ""
- },
- "ellipsoid": {
- "description": ["用给予的半径画一个椭球形。"],
- "params": {
- "radiusx": "数字:椭球形 x 轴的半径",
- "radiusy": "数字:椭球形 y 轴的半径",
- "radiusz": "数字:椭球形 z 轴的半径",
- "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24。避免多于 150 的细节数量,因为它可能是浏览器停止运作。",
- "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 16。避免多于 150 的细节数量,因为它可能是浏览器停止运作。"
- },
- "returns": ""
+ "The default, two-dimensional renderer."
+ ]
},
- "torus": {
- "description": ["用给予的半径和管半径画一个圆环形。"],
- "params": {
- "radius": "数字:整个圆环形的半径",
- "tubeRadius": "数字:圆管的半径",
- "detailX": "整数:x 轴分割的数量,越多分割几何形越平滑,默认值为 24。",
- "detailY": "整数:y 轴分割的数量,越多分割几何形越平滑,默认值为 16。"
- },
- "returns": ""
+ "WEBGL": {
+ "description": [
+ "One of the two render modes in p5.js: P2D (default renderer) and WEBGL Enables 3D render by introducing the third dimension: Z"
+ ]
},
+ "ARROW": {},
+ "CROSS": {},
+ "HAND": {},
+ "MOVE": {},
+ "TEXT": {},
+ "WAIT": {},
"HALF_PI": {
"description": [
"HALF_PI 是个值为 1.57079632679489661923 的数学常量。它是圆形周长与直径的比例的一半。它能有效的与三角函数如 sin() 及 cos() 一起使用。"
- ],
- "returns": ""
+ ]
},
"PI": {
"description": [
"PI 是个值为 3.14159265358979323846 的数学常量。它是圆形周长与直径的比例。它能有效的与三角函数如 sin() 及 cos() 一起使用。"
- ],
- "returns": ""
+ ]
},
"QUARTER_PI": {
"description": [
"QUARTER_PI 是个值为 0.7853982 的数学常量。它是圆形周长与直径的比例的四分之一。它能有效的与三角函数如 sin() 及 cos() 一起使用。"
- ],
- "returns": ""
+ ]
},
"TAU": {
"description": [
"TAU 是 TWO_PI 的别名,是个值为 6.28318530717958647693 的数学常量。它是圆形周长与直径的比例的两倍。它能有效的与三角函数如 sin() 及 cos() 一起使用。"
- ],
- "returns": ""
+ ]
},
"TWO_PI": {
"description": [
"TWO_PI 是个值为 6.28318530717958647693 的数学常量。它是圆形周长与直径的比例的两倍。它能有效的与三角函数如 sin() 及 cos() 一起使用。"
- ],
- "returns": ""
+ ]
},
"DEGREES": {
"description": [
"与 angleMode() 函数一起使用的常量,用于设定 p5.js 如何解读及计算角度(可以是 DEGREES 或 RADIANS)。"
- ],
- "returns": ""
+ ]
},
"RADIANS": {
"description": [
"与 angleMode() 函数一起使用的常量,用于设定 p5.js 如何解读及计算角度(可以是 DEGREES 或 RADIANS)。"
- ],
- "returns": ""
- },
- "preload": {
- "description": [
- "在 setup() 之前被调用,preload() 函数可用来以阻断的方式处理异步加载外来文件。如果 preload 函数有被定义,setup() 将等到其中的加载工作都完成后才开始执行。preload 函数只能含有加载函数(如 loadImage、loadJSON、loadFont、loadStrings 等)。如果您想使用异步加载,加载函数可在 setup() 内或任何其他地方调用,您只需使用其回调函数参数。 在默认情况下 “loading...” 字眼将会被显示。如果您想只做您自己的加载页面,只需在您也页面上加个 id 为 “p5_loading” 的 HTML 元素。更多详情请查看这里 。"
- ],
- "returns": ""
- },
- "setup": {
- "description": [
- "setup() 函数将在程式开始时被调用一次。它可在程序开始时被用来定义初始的环境属性如荧幕大小、背景颜色及媒体加载如图像及字体。每个程序只能有一个 setup() 函数并且他不能在一开始执行后再次被调用。 请注意:在 setup() 内定义的变量并不能在其他函数内使用,这包括 draw() 。"
- ],
- "returns": ""
- },
- "draw": {
- "description": [
- "在 setup() 之后被调用,draw() 函数将持续地重复执行其中的代码直到该程式终止或当 noLoop() 被调用。注意如果 noLoop() 在 setup() 内被调用,draw() 仍然会被执行一个然后才停止。draw() 将会自动被调用并不应该被直接调用。 您应该使用 noLoop()、redraw() 及 loop() 来控制它。当 noLoop() 停止执行 draw() 内的代码,redraw() 会使 draw() 内的代码执行一次,而 loop() 将会使 draw() 内的代码继续重复执行。 每一秒 draw() 执行的次数可使用 frameRate() 函数来控制。 每个绘图只能有一个 draw() 函数,而如果您想持续重复执行代码或处理事件如 mousePressed(),draw() 必须存在。有时候您的程式可能会有空白的 draw() 函数,如以上的范例所示。 请特别注意绘图坐标系统将在每次 draw() 在开始被调用时重置。任何在 draw() 内执行的变形指令(如 scale、rotate、translate)将会在下一个 draw() 开始时复原,所以变形指令并不会随着时间积累。另一方面,样式(如 fill、stroke等)将会持续同样的效果。"
- ],
- "returns": ""
- },
- "remove": {
- "description": [
- "移除整个 p5 绘图。这函数将移除画布及任何由 p5.js 创造的元素。它也会终止绘图循环及解除任何被绑定在窗口对象的属性或函数。它会留下一个 p5 变量以防您还想创造一个新的 p5 绘图。您也可以舍去 p5 = null 以完全删除它。虽然所有由 p5 程式库所创造的函数、变量和物件将会被移除,任何其他由您的代码所定义的公共变量将会被保留。"
- ],
- "returns": ""
- },
- "noLoop": {
- "description": [
- "停止 p5.js 持续重复执行 draw() 内的代码。如果 loop() 被调用,draw() 内的代码将开始继续重复执行。如果 noLoop() 在 setup() 被调用,它应该是代码块的最后一行代码。 在使用 noLoop() 时,您并不能在事件处理函数如 mousePressed() 或 keyPressed() 内操纵或存取荧幕。不过您可以使用哪些函数调用 redraw() 或 loop(),从而执行 draw(),以正确的更新荧幕。这表示当 noLoop() 被调用后,您不能绘制任何东西,同时某些函数如 saveFrame() 或 loadPixels() 也不能使用。 注意如果绘图的大小改变,redraw() 将会被调用以更新绘图,即使 noLoop() 已经被调用,不然绘图将会处于一个奇怪的状态直到 loop() 再次被调用。"
- ],
- "returns": ""
- },
- "loop": {
- "description": [
- "在默认下,p5.js 将会循环执行 draw() 内的代码。不过 draw() 循环能使用 noLoop() 停止。在这情况下 draw() 循环可使用 loop() 函数恢复执行。"
- ],
- "returns": ""
- },
- "push": {
- "description": [
- "push() 函数将储存当时的绘画样式设置及变形,而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时,它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。(请参考第二个范例) push() 将现有的变形及样式设置资料储存上来,这包括以下的函数:fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。"
- ],
- "returns": ""
+ ]
},
- "pop": {
- "description": [
- "push() 函数将储存当时的绘画样式设置及变形,而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时,它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。(请参考第二个范例) push() 将现有的变形及样式设置资料储存上来,这包括以下的函数:fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。"
+ "CORNER": {},
+ "CORNERS": {},
+ "RADIUS": {},
+ "RIGHT": {},
+ "LEFT": {},
+ "CENTER": {},
+ "TOP": {},
+ "BOTTOM": {},
+ "BASELINE": {},
+ "POINTS": {},
+ "LINES": {},
+ "LINE_STRIP": {},
+ "LINE_LOOP": {},
+ "TRIANGLES": {},
+ "TRIANGLE_FAN": {},
+ "TRIANGLE_STRIP": {},
+ "QUADS": {},
+ "QUAD_STRIP": {},
+ "TESS": {},
+ "CLOSE": {},
+ "OPEN": {},
+ "CHORD": {},
+ "PIE": {},
+ "PROJECT": {},
+ "SQUARE": {},
+ "ROUND": {},
+ "BEVEL": {},
+ "MITER": {},
+ "RGB": {},
+ "HSB": {
+ "description": [
+ "HSB (hue, saturation, brightness) is a type of color model. You can learn more about it at HSB ."
]
},
- "redraw": {
+ "HSL": {},
+ "AUTO": {
"description": [
- "执行在 draw() 内的代码一次。这函数让该程序只在需要的时候更新显示窗口,比如说当 mousePressed() 或 keyPressed()事件被触发时。 再构造程式时,只有在如 mousePressed() 之类的时间内调用 redraw() 才有意义,因为 redraw() 并不会直接调用 draw() (它只会表示绘图有需要更新)。 redraw() 函数并不会在 draw() 内正常运作。以启用/禁用动画,请使用 loop() 及 noLoop()。 此外您也能定义每次调用 redraw() 将使 draw() 被调用几次。您这需给予一个整数参数已表示执行的次数。"
- ],
- "params": {
- "n": "整数:重绘 n 次。默认值为 1"
- },
- "returns": ""
+ "AUTO allows us to automatically set the width or height of an element (but not both), based on the current height and width of the element. Only one parameter can be passed to the size function as AUTO, at a time."
+ ]
},
+ "ALT": {},
+ "BACKSPACE": {},
+ "CONTROL": {},
+ "DELETE": {},
+ "DOWN_ARROW": {},
+ "ENTER": {},
+ "ESCAPE": {},
+ "LEFT_ARROW": {},
+ "OPTION": {},
+ "RETURN": {},
+ "RIGHT_ARROW": {},
+ "SHIFT": {},
+ "TAB": {},
+ "UP_ARROW": {},
+ "BLEND": {},
+ "REMOVE": {},
+ "ADD": {},
+ "DARKEST": {},
+ "LIGHTEST": {},
+ "DIFFERENCE": {},
+ "SUBTRACT": {},
+ "EXCLUSION": {},
+ "MULTIPLY": {},
+ "SCREEN": {},
+ "REPLACE": {},
+ "OVERLAY": {},
+ "HARD_LIGHT": {},
+ "SOFT_LIGHT": {},
+ "DODGE": {},
+ "BURN": {},
+ "THRESHOLD": {},
+ "GRAY": {},
+ "OPAQUE": {},
+ "INVERT": {},
+ "POSTERIZE": {},
+ "DILATE": {},
+ "ERODE": {},
+ "BLUR": {},
+ "NORMAL": {},
+ "ITALIC": {},
+ "BOLD": {},
+ "BOLDITALIC": {},
+ "LINEAR": {},
+ "QUADRATIC": {},
+ "BEZIER": {},
+ "CURVE": {},
+ "STROKE": {},
+ "FILL": {},
+ "TEXTURE": {},
+ "IMMEDIATE": {},
+ "IMAGE": {},
+ "NEAREST": {},
+ "REPEAT": {},
+ "CLAMP": {},
+ "MIRROR": {},
+ "LANDSCAPE": {},
+ "PORTRAIT": {},
+ "GRID": {},
+ "AXES": {},
"print": {
"description": [
- "print() 函数将写入浏览器的控制台区。这函数适用于查看程式生成的资料。这函数每一次被调用将创造新的一行字串。个别元素可使用引号(\"\")分隔并使用加号(+)连接在一起。"
+ "print() 函数将写入浏览器的控制台区。这函数适用于查看程式生成的资料。这函数每一次被调用将创造新的一行字串。个别元素可使用引号(\"\")分隔并使用加号(+)连接在一起。",
+ ""
],
"params": {
"contents": "任何:任何要写进控制台的数字、字符串、物件、布尔值或数组的组合"
- },
- "returns": ""
+ }
},
"frameCount": {
"description": [
"系统变量 frameCount 存着自程序开始已被展示的影格数量。在 setup() 这值为 0,在第一次执行 draw() 后为 1 等等。"
- ],
- "returns": ""
+ ]
+ },
+ "deltaTime": {
+ "description": [
+ "The system variable deltaTime contains the time difference between the beginning of the previous frame and the beginning of the current frame in milliseconds. ",
+ "This variable is useful for creating time sensitive animation or physics calculation that should stay constant regardless of frame rate."
+ ]
},
"focused": {
"description": [
"确定 p5.js 程式正在运行的窗口是否获得“焦点”,这表示绘图可接受滑鼠或键盘输入。如果窗口获得焦点,次变量为 “true” 否则为 “false”。"
- ],
- "returns": ""
+ ]
},
"cursor": {
"description": [
@@ -811,72 +849,66 @@
"type": "字符串|常量:ARROW、CROSS、HAND、MOVE、TEXT 或图像的路径",
"x": "数字:鼠标的横向活跃点",
"y": "数字:鼠标的直向活跃点"
- },
- "returns": ""
+ }
},
"frameRate": {
"description": [
- "定义每一秒应该显示的影格数。比如说,调用 frameRate(30) 将使绘图每秒刷新 30 次。如果处理器没法跟上所定义的速率,该帧率将不会被达到。建议在 setup() 内设置帧率。默认的帧率值为每秒 60 影格。这和调用 setFrameRate(val) 的效果一样。 调用 frameRate() 但不给予任何参数将会返回当时的帧率。draw() 函数必须至少执行一次它才会返回帧率。这和调用 getFrameRate() 的效果一样。 调用 frameRate() 并给予任何不是数字或正数的参数也将会返回当时的帧率。"
+ "定义每一秒应该显示的影格数。比如说,调用 frameRate(30) 将使绘图每秒刷新 30 次。如果处理器没法跟上所定义的速率,该帧率将不会被达到。建议在 setup() 内设置帧率。默认的帧率值为每秒 60 影格。这和调用 setFrameRate(val) 的效果一样。 调用 frameRate() 但不给予任何参数将会返回当时的帧率。draw() 函数必须至少执行一次它才会返回帧率。这和调用 getFrameRate() 的效果一样。 调用 frameRate() 并给予任何不是数字或正数的参数也将会返回当时的帧率。",
+ "",
+ ""
],
"params": {
"fps": "数字:每一秒该显示的影格数"
- },
- "returns": ""
+ }
},
"noCursor": {
- "description": ["隐藏鼠标。"],
- "returns": ""
+ "description": [
+ "隐藏鼠标。"
+ ]
},
"displayWidth": {
"description": [
"储存整个荧幕宽度的系统变量。这可用来在任何大小的荧幕制作任何大小的全屏程序。"
- ],
- "returns": ""
+ ]
},
"displayHeight": {
"description": [
"储存整个荧幕高度的系统变量。这可用来在任何大小的荧幕制作任何大小的全屏程序。"
- ],
- "returns": ""
+ ]
},
"windowWidth": {
"description": [
"储存窗口内部宽度的系统变量, 此函数映射 window.innerWidth。"
- ],
- "returns": ""
+ ]
},
"windowHeight": {
"description": [
"储存窗口内部高度的系统变量, 此函数映射 window.innerHeight。"
- ],
- "returns": ""
+ ]
},
"windowResized": {
"description": [
"windowResized() 函数将在每次浏览器窗口缩放时被调用。这是个适合缩放画布及或任何其他调整以符合新的窗口大小的地方。"
- ],
- "returns": ""
+ ]
},
"width": {
"description": [
"储存画布宽度的系统变量。这值是由 createCanvas() 函数的第一个参数所定义。比如说,调用函数 createCanvas(320, 240) 将定义此宽度变量为 320。如果一个程式没有使用 createCanvas() 宽度值将默认为 100。"
- ],
- "returns": ""
+ ]
},
"height": {
"description": [
"储存画布高度的系统变量。这值是由 createCanvas() 函数的第二个参数所定义。比如说,调用函数 createCanvas(320, 240) 将定义此高度变量为 240。如果一个程式没有使用 createCanvas() 高度值将默认为 100。"
- ],
- "returns": ""
+ ]
},
"fullscreen": {
"description": [
"如果提供一个参数,依该参数而定该绘图是否是全屏。如果没有给予任何参数,将返回当时的全屏状态。注意因为浏览器限制,此函数只能在使用者输入时调用,比如说在滑鼠点击时如以上范例。"
],
+ "returns": "布尔值:当时的全屏状态",
"params": {
"val": "布尔值:该绘图是否应该是全屏"
- },
- "returns": "布尔值:当时的全屏状态"
+ }
},
"pixelDensity": {
"description": [
@@ -884,35 +916,188 @@
],
"params": {
"val": "数字:绘图是否应该缩放及缩放多少"
- },
- "returns": "数字:该绘图的像素密度"
+ }
},
"displayDensity": {
- "description": ["返回正在运行该绘图的显示器的像素密度。"],
+ "description": [
+ "返回正在运行该绘图的显示器的像素密度。"
+ ],
"returns": "数字:该显示器的像素密度"
},
"getURL": {
- "description": ["返回当下的网址。"],
+ "description": [
+ "返回当下的网址。"
+ ],
"returns": "字符串:网址"
},
"getURLPath": {
- "description": ["返回当下的网址的路径数组"],
+ "description": [
+ "返回当下的网址的路径数组"
+ ],
"returns": "字符串[]:路径组"
},
"getURLParams": {
- "description": ["返回当下网址的参数物件"],
+ "description": [
+ "返回当下网址的参数物件"
+ ],
"returns": "物件:网址参数"
},
+ "preload": {
+ "description": [
+ "在 setup() 之前被调用,preload() 函数可用来以阻断的方式处理异步加载外来文件。如果 preload 函数有被定义,setup() 将等到其中的加载工作都完成后才开始执行。preload 函数只能含有加载函数(如 loadImage、loadJSON、loadFont、loadStrings 等)。如果您想使用异步加载,加载函数可在 setup() 内或任何其他地方调用,您只需使用其回调函数参数。 在默认情况下 “loading...” 字眼将会被显示。如果您想只做您自己的加载页面,只需在您也页面上加个 id 为 “p5_loading” 的 HTML 元素。更多详情请查看这里 。",
+ ""
+ ]
+ },
+ "setup": {
+ "description": [
+ "setup() 函数将在程式开始时被调用一次。它可在程序开始时被用来定义初始的环境属性如荧幕大小、背景颜色及媒体加载如图像及字体。每个程序只能有一个 setup() 函数并且他不能在一开始执行后再次被调用。 请注意:在 setup() 内定义的变量并不能在其他函数内使用,这包括 draw() 。",
+ ""
+ ]
+ },
+ "draw": {
+ "description": [
+ "在 setup() 之后被调用,draw() 函数将持续地重复执行其中的代码直到该程式终止或当 noLoop() 被调用。注意如果 noLoop() 在 setup() 内被调用,draw() 仍然会被执行一个然后才停止。draw() 将会自动被调用并不应该被直接调用。 您应该使用 noLoop()、redraw() 及 loop() 来控制它。当 noLoop() 停止执行 draw() 内的代码,redraw() 会使 draw() 内的代码执行一次,而 loop() 将会使 draw() 内的代码继续重复执行。 每一秒 draw() 执行的次数可使用 frameRate() 函数来控制。 每个绘图只能有一个 draw() 函数,而如果您想持续重复执行代码或处理事件如 mousePressed(),draw() 必须存在。有时候您的程式可能会有空白的 draw() 函数,如以上的范例所示。 请特别注意绘图坐标系统将在每次 draw() 在开始被调用时重置。任何在 draw() 内执行的变形指令(如 scale、rotate、translate)将会在下一个 draw() 开始时复原,所以变形指令并不会随着时间积累。另一方面,样式(如 fill、stroke等)将会持续同样的效果。",
+ "",
+ "",
+ "",
+ ""
+ ]
+ },
+ "remove": {
+ "description": [
+ "移除整个 p5 绘图。这函数将移除画布及任何由 p5.js 创造的元素。它也会终止绘图循环及解除任何被绑定在窗口对象的属性或函数。它会留下一个 p5 变量以防您还想创造一个新的 p5 绘图。您也可以舍去 p5 = null 以完全删除它。虽然所有由 p5 程式库所创造的函数、变量和物件将会被移除,任何其他由您的代码所定义的公共变量将会被保留。"
+ ]
+ },
+ "disableFriendlyErrors": {
+ "description": [
+ "Allows for the friendly error system (FES) to be turned off when creating a sketch, which can give a significant boost to performance when needed. See disabling the friendly error system ."
+ ]
+ },
+ "let": {
+ "description": [
+ "Creates and names a new variable. A variable is a container for a value. ",
+ "Variables that are declared with let will have block-scope. This means that the variable only exists within the block that it is created within. ",
+ "From the MDN entry : Declares a block scope local variable, optionally initializing it to a value."
+ ]
+ },
+ "const": {
+ "description": [
+ "Creates and names a new constant. Like a variable created with let , a constant that is created with const is a container for a value, however constants cannot be reassigned once they are declared. Although it is noteworthy that for non-primitive data types like objects & arrays, their elements can still be changeable. So if a variable is assigned an array, you can still add or remove elements from the array but cannot reassign another array to it. Also unlike let, you cannot declare variables without value using const. ",
+ "Constants have block-scope. This means that the constant only exists within the block that it is created within. A constant cannot be redeclared within a scope in which it already exists. ",
+ "From the MDN entry : Declares a read-only named constant. Constants are block-scoped, much like variables defined using the 'let' statement. The value of a constant can't be changed through reassignment, and it can't be redeclared."
+ ]
+ },
+ "===": {
+ "description": [
+ "The strict equality operator === checks to see if two values are equal and of the same type. ",
+ "A comparison expression always evaluates to a boolean . ",
+ "From the MDN entry : The non-identity operator returns true if the operands are not equal and/or not of the same type. ",
+ "Note: In some examples around the web you may see a double-equals-sign == , used for comparison instead. This is the non-strict equality operator in Javascript. This will convert the two values being compared to the same type before comparing them."
+ ]
+ },
+ ">": {
+ "description": [
+ "The greater than operator \">> evaluates to true if the left value is greater than the right value. There is more info on comparison operators on MDN. "
+ ]
+ },
+ ">=": {
+ "description": [
+ "The greater than or equal to operator =\">>= evaluates to true if the left value is greater than or equal to the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
+ },
+ "<": {
+ "description": [
+ "The less than operator < evaluates to true if the left value is less than the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
+ },
+ "<=": {
+ "description": [
+ "The less than or equal to operator <= evaluates to true if the left value is less than or equal to the right value. ",
+ "There is more info on comparison operators on MDN. "
+ ]
+ },
+ "if-else": {
+ "description": [
+ "The if-else statement helps control the flow of your code. ",
+ "A condition is placed between the parenthesis following 'if', when that condition evalues to truthy , the code between the following curly braces is run. Alternatively, when the condition evaluates to falsy , the code between the curly braces of 'else' block is run instead. Writing an else block is optional. ",
+ "From the MDN entry : The 'if' statement executes a statement if a specified condition is truthy. If the condition is falsy, another statement can be executed"
+ ]
+ },
+ "function": {
+ "description": [
+ "Creates and names a function . A function is a set of statements that perform a task. ",
+ "Optionally, functions can have parameters. Parameters are variables that are scoped to the function, that can be assigned a value when calling the function.Multiple parameters can be given by seperating them with commas. ",
+ "From the MDN entry : Declares a function with the specified parameters."
+ ]
+ },
+ "return": {
+ "description": [
+ "Specifies the value to be returned by a function. For more info checkout the MDN entry for return ."
+ ]
+ },
+ "boolean": {
+ "description": [
+ "转换一个数字或字符串成其布尔值。在数字上,任何非零的值(无论正负)都将转换为 true,而零将转换为 false。在字符串上,\"true\" 将转换成 true,而任何其他值都会转换成 false。当给予一数组的数字或字符串时,将返回一个等同大小的布尔值数组。"
+ ],
+ "returns": "布尔值:该值的布尔值",
+ "params": {
+ "n": "字符串|布尔值|数字|数组:该解析的值"
+ }
+ },
+ "string": {
+ "description": [
+ "A string is one of the 7 primitive data types in Javascript. A string is a series of text characters. In Javascript, a string value must be surrounded by either single-quotation marks(') or double-quotation marks(\"). ",
+ "From the MDN entry : A string is a sequence of characters used to represent text."
+ ]
+ },
+ "number": {
+ "description": [
+ "A number is one of the 7 primitive data types in Javascript. A number can be a whole number or a decimal number. ",
+ "The MDN entry for number "
+ ]
+ },
+ "object": {
+ "description": [
+ "From MDN's object basics : An object is a collection of related data and/or functionality (which usually consists of several variables and functions — which are called properties and methods when they are inside objects.)"
+ ]
+ },
+ "class": {
+ "description": [
+ "Creates and names a class which is a template for the creation of objects . ",
+ "From the MDN entry : The class declaration creates a new Class with a given name using prototype-based inheritance."
+ ]
+ },
+ "for": {
+ "description": [
+ "for creates a loop that is useful for executing one section of code multiple times. ",
+ "A 'for loop' consists of three different expressions inside of a parenthesis, all of which are optional.These expressions are used to control the number of times the loop is run.The first expression is a statement that is used to set the initial state for the loop.The second expression is a condition that you would like to check before each loop. If this expression returns false then the loop will exit.The third expression is executed at the end of each loop. These expression are separated by ; (semi-colon).In case of an empty expression, only a semi-colon is written. ",
+ "The code inside of the loop body (in between the curly braces) is executed between the evaluation of the second and third expression. ",
+ "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. The test condition with a for loop is the second expression detailed above. Ensuring that this expression can eventually become false ensures that your loop doesn't attempt to run an infinite amount of times, which can crash your browser. ",
+ "From the MDN entry : Creates a loop that executes a specified statement until the test condition evaluates to false. The condition is evaluated after executing the statement, resulting in the specified statement executing at least once."
+ ]
+ },
+ "while": {
+ "description": [
+ "while creates a loop that is useful for executing one section of code multiple times. ",
+ "With a 'while loop', the code inside of the loop body (between the curly braces) is run repeatedly until the test condition (inside of the parenthesis) evaluates to false. The condition is tested before executing the code body with while , so if the condition is initially false the loop body, or statement, will never execute. ",
+ "As with any loop, it is important to ensure that the loop can 'exit', or that the test condition will eventually evaluate to false. This is to keep your loop from trying to run an infinite amount of times, which can crash your browser. ",
+ "From the MDN entry : The while statement creates a loop that executes a specified statement as long as the test condition evaluates to true.The condition is evaluated before executing the statement."
+ ]
+ },
"createCanvas": {
"description": [
- "在文件内创造一个画布元素,并以像素定义其大小。这函数只应该在 setup() 开始时被调用一次。在同一个绘图里调用 createCanvas 多过一次将造成难以预料的行为。如果你想要使用多过一个绘图画布您可以使用 createGraphics(默认上会被隐藏可是可以被显示)。 给予这函数的宽度和高度参数将被用来定义 width 和 height 系统变量。如果 createCanvas() 没有被使用,画布将会被给予默认大小 100x100。 以知更多放置画布的方法,请参考画布放置维基 (英文页面)。"
+ "在文件内创造一个画布元素,并以像素定义其大小。这函数只应该在 setup() 开始时被调用一次。在同一个绘图里调用 createCanvas 多过一次将造成难以预料的行为。如果你想要使用多过一个绘图画布您可以使用 createGraphics(默认上会被隐藏可是可以被显示)。 给予这函数的宽度和高度参数将被用来定义 width 和 height 系统变量。如果 createCanvas() 没有被使用,画布将会被给予默认大小 100x100。 以知更多放置画布的方法,请参考画布放置维基 (英文页面)。",
+ "",
+ ""
],
+ "returns": "p5.Renderer:",
"params": {
"w": "数字:画布的宽度",
"h": "数字:画布的高度",
"renderer": "常量:P2D 或 WEBGL"
- },
- "returns": "p5.Renderer:"
+ }
},
"resizeCanvas": {
"description": [
@@ -922,46 +1107,100 @@
"w": "数字:画布的宽度",
"h": "数字:画布的高度",
"noRedraw": "布尔值:不要马上更新画布"
- },
- "returns": ""
+ }
},
"noCanvas": {
- "description": ["如果该 p5 绘图不需要画布,此函数将移除默认画布。"],
- "returns": ""
+ "description": [
+ "如果该 p5 绘图不需要画布,此函数将移除默认画布。"
+ ]
},
"createGraphics": {
"description": [
"创造及返回一个新的 p5.Renderer 物件。如果您需要在一个画面外的图形缓冲区作画,您可以使用这个函数。前两个参数将定义宽度和高度像素。"
],
+ "returns": "buffer gráfico fuera de pantalla",
"params": {
"w": "数字:画面外图形缓冲区的宽度",
"h": "数字:画面外图形缓冲区的高度",
"renderer": "常量:P2D 或 WEBGL,默认为 P2D"
- },
- "returns": "buffer gráfico fuera de pantalla"
+ }
},
"blendMode": {
"description": [
- "根据所设定的模式在显示窗口内混合像素。以下模式选择可用来混合源像素(A)与已经在显示窗口的像素(B):BLEND - 颜色线性插值:C = A*系数 + B。这是默认混合模式。ADD - A 与 B 的总和DARKEST - 将显示当中最深的颜色:C = min(A*系数, B)。LIGHTEST - 将显示当中最浅的颜色:C = max(A*系数, B)。DIFFERENCE - 从底下的图像中减去颜色。EXCLUSION - 与 DIFFERENCE 相似但不那么强烈。MULTIPLY - 将颜色相乘,效果一定会更暗。SCREEN - 与 MULTIPLY 相反,使用颜色的反值。REPLACE - 像素将完全盖过其他像素并将不会使用透明度值。OVERLAY - MULTIPLY 及 SCREEN 和混合。暗值将相乘,亮值将相乘反值。HARD_LIGHT - 当高于 50% 灰时 SCREEN,低于时 MULTIPLY。SOFT_LIGHT - DARKEST 及 LIGHTEST 的混合。与 OVERLAY 的效果相似,但不那么强烈。DODGE - 使浅色更浅及增加对比度,忽略暗色。BURN - 是深色更深及增加对比度,忽略浅色。 "
+ "根据所设定的模式在显示窗口内混合像素。以下模式选择可用来混合源像素(A)与已经在显示窗口的像素(B):BLEND - 颜色线性插值:C = A*系数 + B。这是默认混合模式。ADD - A 与 B 的总和DARKEST - 将显示当中最深的颜色:C = min(A*系数, B)。LIGHTEST - 将显示当中最浅的颜色:C = max(A*系数, B)。DIFFERENCE - 从底下的图像中减去颜色。EXCLUSION - 与 DIFFERENCE 相似但不那么强烈。MULTIPLY - 将颜色相乘,效果一定会更暗。SCREEN - 与 MULTIPLY 相反,使用颜色的反值。REPLACE - 像素将完全盖过其他像素并将不会使用透明度值。OVERLAY - MULTIPLY 及 SCREEN 和混合。暗值将相乘,亮值将相乘反值。HARD_LIGHT - 当高于 50% 灰时 SCREEN,低于时 MULTIPLY。SOFT_LIGHT - DARKEST 及 LIGHTEST 的混合。与 OVERLAY 的效果相似,但不那么强烈。DODGE - 使浅色更浅及增加对比度,忽略暗色。BURN - 是深色更深及增加对比度,忽略浅色。 ",
+ ""
],
"params": {
"mode": "常量:画布的混合模式。BLEND、DARKEST、LIGHTEST、DIFFERENCE、MULTIPLY、EXCLUSION、SCREEN、REPLACE、OVERLAY、HARD_LIGHT、SOFT_LIGHT、DODGE、BURN、ADD 或 NORMAL"
- },
- "returns": ""
+ }
},
- "setAttributes": {
+ "drawingContext": {
+ "description": [
+ "The p5.js API provides a lot of functionality for creating graphics, but there is some native HTML5 Canvas functionality that is not exposed by p5. You can still call it directly using the variable drawingContext, as in the example shown. This is the equivalent of calling canvas.getContext('2d'); or canvas.getContext('webgl');. See this reference for the native canvas API for possible drawing functions you can call."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "停止 p5.js 持续重复执行 draw() 内的代码。如果 loop() 被调用,draw() 内的代码将开始继续重复执行。如果 noLoop() 在 setup() 被调用,它应该是代码块的最后一行代码。 在使用 noLoop() 时,您并不能在事件处理函数如 mousePressed() 或 keyPressed() 内操纵或存取荧幕。不过您可以使用哪些函数调用 redraw() 或 loop(),从而执行 draw(),以正确的更新荧幕。这表示当 noLoop() 被调用后,您不能绘制任何东西,同时某些函数如 saveFrame() 或 loadPixels() 也不能使用。 注意如果绘图的大小改变,redraw() 将会被调用以更新绘图,即使 noLoop() 已经被调用,不然绘图将会处于一个奇怪的状态直到 loop() 再次被调用。",
+ "",
+ "",
+ ""
+ ]
+ },
+ "loop": {
+ "description": [
+ "在默认下,p5.js 将会循环执行 draw() 内的代码。不过 draw() 循环能使用 noLoop() 停止。在这情况下 draw() 循环可使用 loop() 函数恢复执行。",
+ "",
+ ""
+ ]
+ },
+ "isLooping": {
+ "description": [
+ "By default, p5.js loops through draw() continuously, executing the code within it. If the sketch is stopped with noLoop() or resumed with loop() , isLooping() returns the current state for use within custom event handlers."
+ ]
+ },
+ "push": {
+ "description": [
+ "push() 函数将储存当时的绘画样式设置及变形,而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时,它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。(请参考第二个范例) push() 将现有的变形及样式设置资料储存上来,这包括以下的函数:fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。",
+ "",
+ ""
+ ]
+ },
+ "pop": {
+ "description": [
+ "push() 函数将储存当时的绘画样式设置及变形,而 pop() 将恢复这些设置。注意这两个函数需要一起使用。它们让您改变样式及变形设置然后再回到您之前的设置。当使用 push() 开始一个新的状态时,它将继续建立在当时的样式和变形上。push() 和 pop() 函数可被重复嵌入以提供更复杂的控制。(请参考第二个范例) push() 将现有的变形及样式设置资料储存上来,这包括以下的函数:fill()、stroke()、tint()、strokeWeight()、strokeCap()、strokeJoin()、imageMode()、rectMode()、ellipseMode()、colorMode()、textAlign()、textFont()、textMode()、textSize()、textLeading()。",
+ "",
+ ""
+ ]
+ },
+ "redraw": {
"description": [
- "设置 WebGL 绘图环境的属性。这是调整 WebGL 渲染器的一个方法,可用于微调显示及性能。这函数应该在 setup() 内使用。可使用的属性为: alpha - 表示画布是否有透明度缓冲,默认为 true depth - 表示绘图缓冲是否有至少 16 bits 的深度缓冲 - 默认为 true stencil - 表示绘图缓冲是否有至少 8 bits 的模版缓冲 antialias - 表示是否应该执行抗锯齿,默认为 false premultipliedAlpha - 表示页面合成器将假设绘图缓冲存在着预乘透明值的颜色,默认为 false preserveDrawingBuffer - 如果为真缓冲区将不会被清空并将会保留现有的值直到它们被清空或被作者覆盖(注意 p5 在绘图循环将自动清空),默认为 true perPixelLighting - 如果为真,照明着色器将使用个别像素照明。默认为 false"
+ "执行在 draw() 内的代码一次。这函数让该程序只在需要的时候更新显示窗口,比如说当 mousePressed() 或 keyPressed()事件被触发时。 再构造程式时,只有在如 mousePressed() 之类的时间内调用 redraw() 才有意义,因为 redraw() 并不会直接调用 draw() (它只会表示绘图有需要更新)。 redraw() 函数并不会在 draw() 内正常运作。以启用/禁用动画,请使用 loop() 及 noLoop()。 此外您也能定义每次调用 redraw() 将使 draw() 被调用几次。您这需给予一个整数参数已表示执行的次数。",
+ "",
+ "",
+ ""
],
"params": {
- "key": "字符串:属性名",
- "value": "布尔值:属性的新值",
- "UNKNOWN-PARAM-3": "物件:有键值对的物件"
+ "n": "整数:重绘 n 次。默认值为 1"
+ }
+ },
+ "p5": {
+ "description": [
+ "The p5() constructor enables you to activate \"instance mode\" instead of normal \"global mode\". This is an advanced topic. A short description and example is included below. Please see Dan Shiffman's Coding Train video tutorial or this tutorial page for more info. ",
+ "By default, all p5.js functions are in the global namespace (i.e. bound to the window object), meaning you can call them simply ellipse(), fill(), etc. However, this might be inconvenient if you are mixing with other JS libraries (synchronously or asynchronously) or writing long programs of your own. p5.js currently supports a way around this problem called \"instance mode\". In instance mode, all p5 functions are bound up in a single variable instead of polluting your global namespace. ",
+ "Optionally, you can specify a default container for the canvas and any other elements to append to with a second argument. You can give the ID of an element in your html, or an html node itself. ",
+ "Note that creating instances like this also allows you to have more than one p5 sketch on a single web page, as they will each be wrapped up with their own set up variables. Of course, you could also use iframes to have multiple sketches in global mode."
+ ],
+ "params": {
+ "sketch": "Object: a function containing a p5.js sketch",
+ "node": "String|Object: ID or pointer to HTML DOM node to contain sketch in"
}
},
"applyMatrix": {
"description": [
- "将现有的矩阵乘于由参数所定义的矩阵。这是个强大的功能并能够同时执行平移、缩放、切变及旋转。您能在维基百科 了解更多关于变形矩阵的资讯。 这里的参数命名跟着 WHATWG 规范 (英文页面)的命名方式并代表着一个如下的变形矩阵:
"
+ "将现有的矩阵乘于由参数所定义的矩阵。这是个强大的功能并能够同时执行平移、缩放、切变及旋转。您能在维基百科 了解更多关于变形矩阵的资讯。 这里的参数命名跟着 WHATWG 规范 (英文页面)的命名方式并代表着一个如下的变形矩阵:
",
+ "",
+ ""
],
"params": {
"a": "数字:定义该乘于的 2x3 矩阵",
@@ -970,379 +1209,686 @@
"d": "数字:定义该乘于的 2x3 矩阵",
"e": "数字:定义该乘于的 2x3 矩阵",
"f": "数字:定义该乘于的 2x3 矩阵"
- },
- "returns": ""
+ }
},
"resetMatrix": {
- "description": ["将现有的矩阵替换成单位矩阵。"],
- "returns": ""
+ "description": [
+ "将现有的矩阵替换成单位矩阵。"
+ ]
},
"rotate": {
"description": [
- "将一个形状根据参数所定义的角度旋转。这函数将考虑角度模式,所以角度可以是弧度或角度定义。 所有物件都会绕着原点旋转而正数将使物件在顺时针方向旋转。此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 rotate(HALF_PI) 然后 rotate(HALF_PI) 效果会与 rotate(PI) 相同。所有变形将会在 draw() 重新开始时恢复。"
+ "将一个形状根据参数所定义的角度旋转。这函数将考虑角度模式,所以角度可以是弧度或角度定义。 所有物件都会绕着原点旋转而正数将使物件在顺时针方向旋转。此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 rotate(HALF_PI) 然后 rotate(HALF_PI) 效果会与 rotate(PI) 相同。所有变形将会在 draw() 重新开始时恢复。",
+ "",
+ ""
],
"params": {
"angle": "数字:旋转的角度,根据当时的角度模式,以弧度或角度定义",
"axis": "p5.Vector|数字[]:(3D 模式下)旋转轴"
- },
- "returns": ""
+ }
},
"rotateX": {
- "description": ["绕着 x 轴旋转。"],
+ "description": [
+ "绕着 x 轴旋转。",
+ ""
+ ],
"params": {
"angle": "数字:旋转角度,根据当时的角度模式,以弧度或角度定义"
- },
- "returns": ""
+ }
},
"rotateY": {
- "description": ["绕着 y 轴旋转。"],
+ "description": [
+ "绕着 y 轴旋转。",
+ ""
+ ],
"params": {
"angle": "数字:旋转角度,根据当时的角度模式,以弧度或角度定义"
- },
- "returns": ""
+ }
},
"rotateZ": {
- "description": ["绕着 x 轴旋转。只适用于 WEBGL 模式。"],
+ "description": [
+ "绕着 x 轴旋转。只适用于 WEBGL 模式。",
+ "",
+ ""
+ ],
"params": {
"angle": "数字:旋转角度,根据当时的角度模式,以弧度或角度定义"
- },
- "returns": ""
+ }
},
"scale": {
"description": [
- "通过扩大和收缩顶点,放大或缩小形状。形状物件将会从坐标系统的原点开始缩放。缩放值为十进制百分比。比如说,调用函数 scale(2.0) 将使该形状放大 200%。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积相乘。比如说,调用 scale(2.0) 然后 scale(1.5) 效果会与 scale(3.0) 相同。如果 scale() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 给予此函数一个 z 参数只在 WEBGL 模式下受支持。这函数能使用 push() 及 pop() 控制。"
+ "通过扩大和收缩顶点,放大或缩小形状。形状物件将会从坐标系统的原点开始缩放。缩放值为十进制百分比。比如说,调用函数 scale(2.0) 将使该形状放大 200%。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积相乘。比如说,调用 scale(2.0) 然后 scale(1.5) 效果会与 scale(3.0) 相同。如果 scale() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 给予此函数一个 z 参数只在 WEBGL 模式下受支持。这函数能使用 push() 及 pop() 控制。",
+ "",
+ ""
],
"params": {
"s": "数字|p5.Vector|数字[]:缩放物件的百分比,或如果给予多个参数 x 轴的缩放百分比",
"y": "数字:y 轴的缩放百分比",
"z": "数字:z 轴的缩放百分比(只适用于 WEBGL 模式)",
- "UNKNOWN-PARAM-4": "p5.Vector|数字[]:各轴缩放百分比"
- },
- "returns": ""
+ "scales": "p5.Vector|数字[]:各轴缩放百分比"
+ }
},
"shearX": {
"description": [
- "有角度参数所定义的形状 x 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 shearX(PI/2) 然后 shearX(PI/2) 效果会与 shearX(PI) 相同。如果 shearX() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 技术上,shearX() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。"
+ "有角度参数所定义的形状 x 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 shearX(PI/2) 然后 shearX(PI/2) 效果会与 shearX(PI) 相同。如果 shearX() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 技术上,shearX() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。",
+ "",
+ ""
],
"params": {
"angle": "数字:根据当时的角度模式,以弧度或角度定义和切变角度"
- },
- "returns": ""
+ }
},
"shearY": {
"description": [
- "有角度参数所定义的形状 y 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 shearY(PI/2) 然后 shearY(PI/2) 效果会与 shearY(PI) 相同。如果 shearY() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 技术上,shearY() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。"
+ "有角度参数所定义的形状 y 轴切变量。角度必须符合当时的角度模式。形状物件将会从坐标系统的原点开始切变而正数表示切变方向为顺时针方向。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 shearY(PI/2) 然后 shearY(PI/2) 效果会与 shearY(PI) 相同。如果 shearY() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。 技术上,shearY() 将现有的变形矩阵乘以一个旋转矩阵。这函数能使用 push() 及 pop() 控制。",
+ "",
+ ""
],
"params": {
"angle": "数字:根据当时的角度模式,以弧度或角度定义和切变角度"
- },
- "returns": ""
+ }
},
"translate": {
"description": [
- "定义在显示窗口内平移物件的量。x 参数将定义左/右平移,y 参数将定义上/下平移。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 translate(50, 0) 然后 translate(20, 0) 效果会与 translate(70, 0) 相同。如果 translate() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。这函数能使用 push() 及 pop() 控制。"
+ "定义在显示窗口内平移物件的量。x 参数将定义左/右平移,y 参数将定义上/下平移。 此变形将影响接下来所有的绘图并且接下来此函数调用效果将累积。比如说,调用 translate(50, 0) 然后 translate(20, 0) 效果会与 translate(70, 0) 相同。如果 translate() 在 draw() 内被调用,变形将会在下一次循环开始时恢复。这函数能使用 push() 及 pop() 控制。",
+ ""
],
"params": {
"x": "数字:左/右平移",
"y": "数字:上/下平移",
"z": "数字:前/后平移(只适用于 WEBGL 模式)",
- "UNKNOWN-PARAM-4": "p5.Vector:平移向量"
- },
- "returns": ""
+ "vector": "p5.Vector:平移向量"
+ }
},
- "deviceOrientation": {
+ "storeItem": {
"description": [
- "deviceOrientation 系统变量将会储存设备的旋转方向。此变量的值可以是 ‘landscape’ 或 ‘portrait’。如果没有资料可用他会被定义成 ‘undefined’。LANDSCAPE 或 PORTRAIT。"
+ "Stores a value in local storage under the key name. Local storage is saved in the browser and persists between browsing sessions and page reloads. The key can be the name of the variable but doesn't have to be. To retrieve stored items see getItem . Sensitive data such as passwords or personal information should not be stored in local storage."
],
- "returns": ""
+ "params": {
+ "key": "String",
+ "value": "String|Number|Object|Boolean|p5.Color|p5.Vector"
+ }
},
- "accelerationX": {
+ "getItem": {
"description": [
- "accelerationX 系统变量将会储存设备的 x 轴加速度。值的单位为每平方秒米。"
+ "Returns the value of an item that was stored in local storage using storeItem()"
],
- "returns": ""
+ "returns": "Number|Object|String|Boolean|p5.Color|p5.Vector: Value of stored item",
+ "params": {
+ "key": "String: name that you wish to use to store in local storage"
+ }
},
- "accelerationY": {
+ "clearStorage": {
"description": [
- "accelerationY 系统变量将会储存设备的 y 轴加速度。值的单位为每平方秒米。"
- ],
- "returns": ""
+ "Clears all local storage items set with storeItem() for the current domain."
+ ]
},
- "accelerationZ": {
+ "removeItem": {
"description": [
- "accelerationZ 系统变量将会储存设备的 z 轴加速度。值的单位为每平方秒米。"
+ "Removes an item that was stored with storeItem()"
],
- "returns": ""
+ "params": {
+ "key": "String"
+ }
},
- "pAccelerationX": {
+ "createStringDict": {
"description": [
- "pAccelerationX 系统变量将会储存上一个影格该设备的 x 轴加速度。值的单位为每平方秒米。"
+ "Creates a new instance of p5.StringDict using the key-value pair or the object you provide."
],
- "returns": ""
+ "returns": "p5.StringDict: ",
+ "params": {
+ "key": "String",
+ "value": "String",
+ "object": "Object: object"
+ }
},
- "pAccelerationY": {
+ "createNumberDict": {
"description": [
- "pAccelerationY 系统变量将会储存上一个影格该设备的 y 轴加速度。值的单位为每平方秒米。"
+ "Creates a new instance of p5.NumberDict using the key-value pair or object you provide."
],
- "returns": ""
+ "returns": "p5.NumberDict: ",
+ "params": {
+ "key": "Number",
+ "value": "Number",
+ "object": "Object: object"
+ }
},
- "pAccelerationZ": {
+ "select": {
"description": [
- "pAccelerationZ 系统变量将会储存上一个影格该设备的 z 轴加速度。值的单位为每平方秒米。"
+ "Searches the page for the first element that matches the given CSS selector string (can be an ID, class, tag name or a combination) and returns it as a p5.Element . The DOM node itself can be accessed with .elt. Returns null if none found. You can also specify a container to search within."
],
- "returns": ""
+ "returns": "p5.Element|null: p5.Element containing node found",
+ "params": {
+ "selectors": "String: CSS selector string of element to search for",
+ "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within"
+ }
},
- "rotationX": {
+ "selectAll": {
"description": [
- "rotationX 系统变量将会储存设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。"
+ "Searches the page for elements that match the given CSS selector string (can be an ID a class, tag name or a combination) and returns them as p5.Element s in an array. The DOM node itself can be accessed with .elt. Returns an empty array if none found. You can also specify a container to search within."
],
- "returns": ""
+ "returns": "p5.Element[]: Array of p5.Element s containing nodes found",
+ "params": {
+ "selectors": "String: CSS selector string of elements to search for",
+ "container": "String|p5.Element|HTMLElement: (Optional) CSS selector string, p5.Element , or HTML element to search within"
+ }
},
- "rotationY": {
+ "removeElements": {
"description": [
- "rotationY 系统变量将会储存设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。"
- ],
- "returns": ""
+ "Removes all elements created by p5, except any canvas / graphics elements created by createCanvas or createGraphics . Event handlers are removed, and element is removed from the DOM."
+ ]
},
- "rotationZ": {
+ "changed": {
"description": [
- "rotationZ 系统变量将会储存设备在 z 轴的旋转角度。值介于 0 与 359 度之间。 与 rotationX 及 rotationY 不同的是,这变量只能在有内建指南针的设备使用。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。"
+ "The .changed() function is called when the value of an element changes. This can be used to attach an element specific event listener."
],
- "returns": ""
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when the value of an element changes. if false is passed instead, the previously firing function will no longer fire."
+ }
},
- "pRotationX": {
+ "input": {
"description": [
- "pRotationX 系统变量将会储存上一个影格该设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。 pRotationX 可以和 rotationX 一起使用以找出设备 x 轴的旋转方向。"
+ "The .input() function is called when any user input is detected with an element. The input event is often used to detect keystrokes in a input element, or changes on a slider element. This can be used to attach an element specific event listener."
],
- "returns": ""
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when any user input is detected within the element. if false is passed instead, the previously firing function will no longer fire."
+ }
},
- "pRotationY": {
+ "createDiv": {
"description": [
- "pRotationY 系统变量将会储存上一个影格该设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。 pRotationY 可以和 rotationY 一起使用以找出设备 y 轴的旋转方向。"
+ "Creates a
element in the DOM with given inner HTML."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "pRotationZ": {
+ "createP": {
"description": [
- "pRotationZ 系统变量将会储存上一个影格该设备在 z 轴的旋转角度。值介于 0 与 359 度之间。 pRotationZ 可以和 rotationZ 一起使用以找出设备 z 轴的旋转方向。"
+ "Creates a ",
+ " element in the DOM with given inner HTML. Used for paragraph length text."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "setMoveThreshold": {
+ "createSpan": {
"description": [
- "setMoveThreshold() 函数可用来设置 deviceMoved() 函数的移动阈值。默认阈值为 0.5。"
+ "Creates a element in the DOM with given inner HTML."
],
+ "returns": "p5.Element: pointer to p5.Element holding created node",
"params": {
- "value": "数字:阈值"
- },
- "returns": ""
+ "html": "String: (Optional) inner HTML for element created"
+ }
},
- "setShakeThreshold": {
+ "createImg": {
"description": [
- "setShakeThreshold() 函数可用来设置 deviceShaken() 函数的摇动阈值。默认阈值为 30。"
+ "Creates an element in the DOM with given src and alternate text."
],
+ "returns": "p5.Element: pointer to p5.Element holding created node",
"params": {
- "value": "数字:阈值"
- },
- "returns": ""
+ "src": "String: src path or url for image",
+ "alt": "String: alternate text to be used if image does not load. You can use also an empty string (\"\") if that an image is not intended to be viewed.",
+ "crossOrigin": "String: crossOrigin property of the img element; use either 'anonymous' or 'use-credentials' to retrieve the image with cross-origin access (for later use with canvas. if an empty string(\"\") is passed, CORS is not used",
+ "successCallback": "Function: (Optional) callback to be called once image data is loaded with the p5.Element as argument"
+ }
},
- "deviceMoved": {
+ "createA": {
"description": [
- "deviceMoved() 函数将在设备在 X、Y 或 Z 轴被移动多过阈值时被调用。默认阈值为 0.5。"
+ "Creates an element in the DOM for including a hyperlink."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "href": "String: url of page to link to",
+ "html": "String: inner html of link element to display",
+ "target": "String: (Optional) target where new link should open, could be _blank, _self, _parent, _top."
+ }
},
- "deviceTurned": {
+ "createSlider": {
"description": [
- "deviceTurned() 函数将在设备被连续旋转多过 90 度时被调用。 触发 deviceTurned() 的旋转轴将被储存在 turnAxis 变量中。deviceTurned() 函数能被锁定在 X、Y 或 Z 以确保只有所定义的轴会导致函数被调用,您只需比较 turnAxis 变量和 'X'、'Y' 或 'Z' 字符串。"
+ "Creates a slider element in the DOM. Use .size() to set the display length of the slider."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "min": "Number: minimum value of the slider",
+ "max": "Number: maximum value of the slider",
+ "value": "Number: (Optional) default value of the slider",
+ "step": "Number: (Optional) step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value)"
+ }
},
- "deviceShaken": {
+ "createButton": {
"description": [
- "deviceShaken() 函数将在设备的 accelerationX 及 accelerationY 加速度值改变超过阈值。默认阈值为 30。"
+ "Creates a element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "label": "String: label displayed on the button",
+ "value": "String: (Optional) value of the button"
+ }
},
- "keyIsPressed": {
+ "createCheckbox": {
"description": [
- "keyIsPressed 布尔系统变量将会在任何键被按下时为真(true)而没键被按下时为假(false)。"
+ "Creates a checkbox element in the DOM. Calling .checked() on a checkbox returns if it is checked or not"
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "label": "String: (Optional) label displayed after checkbox",
+ "value": "Boolean: (Optional) value of the checkbox; checked is true, unchecked is false"
+ }
},
- "key": {
+ "createSelect": {
"description": [
- "key 系统变量将会储存上一个被键入的键盘键值。以获得正确的大小写,最好在 keyTyped() 内使用。至于非 ASCII 值的键,请使用 keyCode 变量。"
+ "Creates a dropdown menu element in the DOM. It also helps to assign select-box methods to p5.Element when selecting existing select box. .option(name, [value]) can be used to set options for the select after it is created. .value() will return the currently selected option. .selected() will return current dropdown element which is an instance of p5.Element .selected(value) can be used to make given option selected by default when the page first loads. .disable() marks whole of dropdown element as disabled. .disable(value) marks given option as disabled "
],
- "returns": ""
+ "returns": "p5.Element: ",
+ "params": {
+ "multiple": "Boolean: (Optional) true if dropdown should support multiple selections",
+ "existing": "Object: DOM select element"
+ }
},
- "keyCode": {
+ "createRadio": {
"description": [
- "keyCode 变量可用来探测特别键如 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW 是否被按下。您也可以使用特别网站如 keycode.info 以找出自定义键的 keyCode。"
+ "Creates a radio button element in the DOM.It also helps existing radio buttons assign methods of p5.Element . .option(value, [label]) can be used to create a new option for the element. If an option with a value already exists, it will be returned. Optionally, a label can be provided as second argument for the option. .remove(value) can be used to remove an option for the element. .value() method will return the currently selected value. .selected() method will return the currently selected input element. .selected(value) method will select the option and return it. .disable(Boolean) method will enable/disable the whole radio button element. "
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "containerElement": "Object: An container HTML Element either a div or span inside which all existing radio inputs will be considered as options.",
+ "name": "String: (Optional) A name parameter for each Input Element."
+ }
},
- "keyPressed": {
+ "createColorPicker": {
"description": [
- "keyPressed() 函数将会在每一次任何键被按下时被调用。被按下的键的 keyCode 将被储存在 keyCode 变量内。 对于非 ASCII 值的键,请使用 keyCode 变量。您能查看 keyCode 是否等于 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW。 至于 ASCII 键值它们的值会被储存在 key 变量内。不过,它并不会分辨大小写。因此,建议使用 keyTyped() 以读取 key 变量,因为其大小写在这里会被分辨出来。 取决于操作系统如何处理按键重复,按住一个键可能使 keyTyped() (及 keyReleased())被调用多过一次。重复的速度应操作系统及该电脑的设置而定。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
+ "Creates a colorPicker element in the DOM for color input. The .value() method will return a hex string (#rrggbb) of the color. The .color() method will return a p5.Color object with the current chosen color."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "value": "String|p5.Color: (Optional) default color of element"
+ }
},
- "keyReleased": {
+ "createInput": {
"description": [
- "keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
+ "Creates an element in the DOM for text input. Use .size() to set the display length of the box."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "value": "String: default value of the input box",
+ "type": "String: (Optional) type of text, ie text, password etc. Defaults to text. Needs a value to be specified first."
+ }
},
- "keyTyped": {
+ "createFileInput": {
"description": [
- "keyTyped() 函数将会在每一次任何键被按下时被调用,可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。 取决于操作系统如何处理按键重复,按住一个键可能使 keyTyped() (及 keyReleased())被调用多过一次。重复的速度应操作系统及该电脑的设置而定。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
+ "Creates an element in the DOM of type 'file'. This allows users to select local files for use in a sketch."
],
- "returns": ""
+ "returns": "p5.Element: pointer to p5.Element holding created DOM element",
+ "params": {
+ "callback": "Function: callback function for when a file is loaded",
+ "multiple": "Boolean: (Optional) optional, to allow multiple files to be selected"
+ }
},
- "keyIsDown": {
+ "createVideo": {
"description": [
- "keyIsDown() 函数将查看被提供的键是否正被按下。它能在当您需要使用多个不同的键同时用来移动一个物件时使用(如将一个图像往斜移动)。您能给予任何代表该键的 keyCode 会任何此页 的 keyCode 变量名为参数。"
+ "Creates an HTML5 element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image() . The first parameter can be either a single string path to a video file, or an array of string paths to different formats of the same video. This is useful for ensuring that your video can play across different browsers, as each supports different formats. See this page for further information about supported formats."
],
+ "returns": "p5.MediaElement: pointer to video p5.Element ",
"params": {
- "code": "数字:该查看的键"
- },
- "returns": ""
+ "src": "String|String[]: path to a video file, or array of paths for supporting different browsers",
+ "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content"
+ }
},
- "mouseX": {
+ "createAudio": {
"description": [
- "mouseX 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的横向位置。如果使用的是触动而不是滑鼠的话,mouseX 将会储存上一个触动点的 x 值。"
+ "Creates a hidden HTML5 element in the DOM for simple audio playback. The first parameter can be either a single string path to a audio file, or an array of string paths to different formats of the same audio. This is useful for ensuring that your audio can play across different browsers, as each supports different formats. See this page for further information about supported formats ."
],
- "returns": ""
+ "returns": "p5.MediaElement: pointer to audio p5.Element ",
+ "params": {
+ "src": "String|String[]: (Optional) path to an audio file, or array of paths for supporting different browsers",
+ "callback": "Function: (Optional) callback function to be called upon 'canplaythrough' event fire, that is, when the browser can play the media, and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content"
+ }
},
- "mouseY": {
+ "VIDEO": {},
+ "AUDIO": {},
+ "createCapture": {
"description": [
- "mouseY 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的直向位置。如果使用的是触动而不是滑鼠的话,mouseY 将会储存上一个触动点的 y 值。"
+ "Creates a new HTML5 element that contains the audio/video feed from a webcam. The element is separate from the canvas and is displayed by default. The element can be hidden using .hide() . The feed can be drawn onto the canvas using image() . The loadedmetadata property can be used to detect when the element has fully loaded (see second example). ",
+ "More specific properties of the feed can be passing in a Constraints object. See the W3C spec for possible properties. Note that not all of these are supported by all browsers. ",
+ "Security note : A new browser security specification requires that getUserMedia, which is behind createCapture() , only works when you're running the code locally, or on HTTPS. Learn more here and here ."
],
- "returns": ""
+ "returns": "p5.Element: capture video p5.Element ",
+ "params": {
+ "type": "String|Constant|Object: type of capture, either VIDEO or AUDIO if none specified, default both, or a Constraints object",
+ "callback": "Function: (Optional) function to be called once stream has loaded"
+ }
+ },
+ "createElement": {
+ "description": [
+ "Creates element with given tag in the DOM with given content."
+ ],
+ "returns": "p5.Element: pointer to p5.Element holding created node",
+ "params": {
+ "tag": "String: tag for the new element",
+ "content": "String: (Optional) html content to be inserted into the element"
+ }
+ },
+ "deviceOrientation": {
+ "description": [
+ "deviceOrientation 系统变量将会储存设备的旋转方向。此变量的值可以是 ‘landscape’ 或 ‘portrait’。如果没有资料可用他会被定义成 ‘undefined’。LANDSCAPE 或 PORTRAIT。"
+ ]
+ },
+ "accelerationX": {
+ "description": [
+ "accelerationX 系统变量将会储存设备的 x 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "accelerationY": {
+ "description": [
+ "accelerationY 系统变量将会储存设备的 y 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "accelerationZ": {
+ "description": [
+ "accelerationZ 系统变量将会储存设备的 z 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "pAccelerationX": {
+ "description": [
+ "pAccelerationX 系统变量将会储存上一个影格该设备的 x 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "pAccelerationY": {
+ "description": [
+ "pAccelerationY 系统变量将会储存上一个影格该设备的 y 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "pAccelerationZ": {
+ "description": [
+ "pAccelerationZ 系统变量将会储存上一个影格该设备的 z 轴加速度。值的单位为每平方秒米。"
+ ]
+ },
+ "rotationX": {
+ "description": [
+ "rotationX 系统变量将会储存设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。",
+ ""
+ ]
+ },
+ "rotationY": {
+ "description": [
+ "rotationY 系统变量将会储存设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。",
+ ""
+ ]
+ },
+ "rotationZ": {
+ "description": [
+ "rotationZ 系统变量将会储存设备在 z 轴的旋转角度。值介于 0 与 359 度之间。 与 rotationX 及 rotationY 不同的是,这变量只能在有内建指南针的设备使用。 注意:旋转的顺序很重要,比如说,如果同时使用它们必须依 Z-X-Y 的顺序调用或可能会有难以预料的行为。",
+ "",
+ ""
+ ]
+ },
+ "pRotationX": {
+ "description": [
+ "pRotationX 系统变量将会储存上一个影格该设备在 x 轴的旋转角度。值介于 0 与 +/-180 度之间。 pRotationX 可以和 rotationX 一起使用以找出设备 x 轴的旋转方向。",
+ ""
+ ]
+ },
+ "pRotationY": {
+ "description": [
+ "pRotationY 系统变量将会储存上一个影格该设备在 y 轴的旋转角度。值介于 0 与 +/-90 度之间。 pRotationY 可以和 rotationY 一起使用以找出设备 y 轴的旋转方向。",
+ ""
+ ]
+ },
+ "pRotationZ": {
+ "description": [
+ "pRotationZ 系统变量将会储存上一个影格该设备在 z 轴的旋转角度。值介于 0 与 359 度之间。 pRotationZ 可以和 rotationZ 一起使用以找出设备 z 轴的旋转方向。",
+ ""
+ ]
+ },
+ "turnAxis": {
+ "description": [
+ "When a device is rotated, the axis that triggers the deviceTurned() method is stored in the turnAxis variable. The turnAxis variable is only defined within the scope of deviceTurned()."
+ ]
+ },
+ "setMoveThreshold": {
+ "description": [
+ "setMoveThreshold() 函数可用来设置 deviceMoved() 函数的移动阈值。默认阈值为 0.5。"
+ ],
+ "params": {
+ "value": "数字:阈值"
+ }
+ },
+ "setShakeThreshold": {
+ "description": [
+ "setShakeThreshold() 函数可用来设置 deviceShaken() 函数的摇动阈值。默认阈值为 30。"
+ ],
+ "params": {
+ "value": "数字:阈值"
+ }
+ },
+ "deviceMoved": {
+ "description": [
+ "deviceMoved() 函数将在设备在 X、Y 或 Z 轴被移动多过阈值时被调用。默认阈值为 0.5。"
+ ]
+ },
+ "deviceTurned": {
+ "description": [
+ "deviceTurned() 函数将在设备被连续旋转多过 90 度时被调用。 触发 deviceTurned() 的旋转轴将被储存在 turnAxis 变量中。deviceTurned() 函数能被锁定在 X、Y 或 Z 以确保只有所定义的轴会导致函数被调用,您只需比较 turnAxis 变量和 'X'、'Y' 或 'Z' 字符串。",
+ ""
+ ]
+ },
+ "deviceShaken": {
+ "description": [
+ "deviceShaken() 函数将在设备的 accelerationX 及 accelerationY 加速度值改变超过阈值。默认阈值为 30。"
+ ]
+ },
+ "keyIsPressed": {
+ "description": [
+ "keyIsPressed 布尔系统变量将会在任何键被按下时为真(true)而没键被按下时为假(false)。"
+ ]
+ },
+ "key": {
+ "description": [
+ "key 系统变量将会储存上一个被键入的键盘键值。以获得正确的大小写,最好在 keyTyped() 内使用。至于非 ASCII 值的键,请使用 keyCode 变量。"
+ ]
+ },
+ "keyCode": {
+ "description": [
+ "keyCode 变量可用来探测特别键如 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW 是否被按下。您也可以使用特别网站如 keycode.info 以找出自定义键的 keyCode。"
+ ]
+ },
+ "keyPressed": {
+ "description": [
+ "keyPressed() 函数将会在每一次任何键被按下时被调用。被按下的键的 keyCode 将被储存在 keyCode 变量内。 对于非 ASCII 值的键,请使用 keyCode 变量。您能查看 keyCode 是否等于 BACKSPACE、DELETE、ENTER、RETURN、TAB、ESCAPE、SHIFT、CONTROL、OPTION、ALT、UP_ARROW、DOWN_ARROW、LEFT_ARROW、RIGHT_ARROW。 至于 ASCII 键值它们的值会被储存在 key 变量内。不过,它并不会分辨大小写。因此,建议使用 keyTyped() 以读取 key 变量,因为其大小写在这里会被分辨出来。 取决于操作系统如何处理按键重复,按住一个键可能使 keyTyped() (及 keyReleased())被调用多过一次。重复的速度应操作系统及该电脑的设置而定。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。",
+ "",
+ "",
+ ""
+ ]
+ },
+ "keyReleased": {
+ "description": [
+ "keyReleased() 函数将会在每一次任何键被释放时被调用。请查看 key 及 keyCode 以知更多详情。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
+ ]
+ },
+ "keyTyped": {
+ "description": [
+ "keyTyped() 函数将会在每一次任何键被按下时被调用,可是会忽略操作键如 Ctrl、Shift 及 Alt。被按下的键的 keyCode 将被储存在 keyCode 变量内。 取决于操作系统如何处理按键重复,按住一个键可能使 keyTyped() (及 keyReleased())被调用多过一次。重复的速度应操作系统及该电脑的设置而定。 不同浏览器可能会有不同附属于个别键盘事件的默认行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。",
+ ""
+ ]
+ },
+ "keyIsDown": {
+ "description": [
+ "keyIsDown() 函数将查看被提供的键是否正被按下。它能在当您需要使用多个不同的键同时用来移动一个物件时使用(如将一个图像往斜移动)。您能给予任何代表该键的 keyCode 会任何此页 的 keyCode 变量名为参数。"
+ ],
+ "returns": "Boolean: whether key is down or not",
+ "params": {
+ "code": "数字:该查看的键"
+ }
+ },
+ "movedX": {
+ "description": [
+ "The variable movedX contains the horizontal movement of the mouse since the last frame"
+ ]
+ },
+ "movedY": {
+ "description": [
+ "The variable movedY contains the vertical movement of the mouse since the last frame"
+ ]
+ },
+ "mouseX": {
+ "description": [
+ "mouseX 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的横向位置。如果使用的是触动而不是滑鼠的话,mouseX 将会储存上一个触动点的 x 值。"
+ ]
+ },
+ "mouseY": {
+ "description": [
+ "mouseY 系统变量将会储存当时的鼠标相对于画布 (0, 0) 位置的的直向位置。如果使用的是触动而不是滑鼠的话,mouseY 将会储存上一个触动点的 y 值。"
+ ]
},
"pmouseX": {
"description": [
"pmouseX 系统变量将会储存上一个影格鼠标或触动点相对于画布 (0, 0) 位置的的横向位置。"
- ],
- "returns": ""
+ ]
},
"pmouseY": {
"description": [
"pmouseY 系统变量将会储存上一个影格鼠标或触动点相对于画布 (0, 0) 位置的的直向位置。"
- ],
- "returns": ""
+ ]
},
"winMouseX": {
"description": [
"winMouseX 系统变量将会储存当时鼠标相对于窗口 (0, 0) 位置的横向位置。"
- ],
- "returns": ""
+ ]
},
"winMouseY": {
"description": [
"winMouseY 系统变量将会储存当时鼠标相对于窗口 (0, 0) 位置的直向位置。"
- ],
- "returns": ""
+ ]
},
"pwinMouseX": {
"description": [
"pwinMouseX 系统变量将会储存上一个影格鼠标相对于窗口 (0, 0) 位置的横向位置。"
- ],
- "returns": ""
+ ]
},
"pwinMouseY": {
"description": [
"pwinMouseY 系统变量将会储存上一个影格鼠标相对于窗口 (0, 0) 位置的直向位置。"
- ],
- "returns": ""
+ ]
},
"mouseButton": {
"description": [
"p5 将自动记录滑鼠键是否被按下及哪个键被按下。mouseButton 系统变量的值可能是 LEFT、RIGHT 或 CENTER,取决于上一个被按下的滑鼠键。请注意:不同的浏览器可能记录不同的 mouseButton 值。"
- ],
- "returns": ""
+ ]
},
"mouseIsPressed": {
"description": [
"mouseIsPressed 系统变量将会在滑鼠键被按下时为真(true),而没按下时为假(false)。"
- ],
- "returns": ""
+ ]
},
"mouseMoved": {
"description": [
"mouseMoved() 函数将在每次鼠标移动而滑鼠键没有被按下的时候被调用。 不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseDragged": {
"description": [
"mouseDragged() 函数将在每次鼠标移动及滑鼠键正被按下的时候被调用。如果 mouseDragged() 函数并未有被定义,touchMoved() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mousePressed": {
"description": [
"mousePressed() 函数将在每次滑鼠键被按下时被调用。mouseButton 函数(请参考其文献)可以被用来探测哪一个滑鼠键刚被按下。如果 mousePressed() 函数并未有被定义,touchStarted() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseReleased": {
"description": [
"mouseReleased() 函数将在每次滑鼠键被释放时被调用。如果 mouseReleased() 函数并未有被定义,touchEnded() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseClicked": {
"description": [
"mouseClicked() 函数将在滑鼠键被按下然后被释放后被调用。 不同浏览器处理滑鼠点击的方式不大一样,所以这函数只有在滑鼠左键被点击时才保证会被触发。如果想要处理其他滑鼠键的点击或释放事件,请参考 mousePressed() 或 mouseReleased()。 不同浏览器可能有不同附属于个别滑鼠事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"doubleClicked": {
"description": [
"doubleClicked() 函数将在 dblclick 事件被触发式被调用,dblclick 时间是 DOM L3 规范的一部分。doubleClicked 将在滑鼠键(通常为左键)连续两次在同样一个元素上点击时被触发。以知更多详情请参考 Mozilla 的参考文献:https://developer.mozilla.org/en-US/docs/Web/Events/dblclick 。"
- ]
+ ],
+ "params": {
+ "event": "Object: (Optional) optional MouseEvent callback argument."
+ }
},
"mouseWheel": {
"description": [
"mouseWheel() 函数将在每次直向滑鼠滚轮事件被触发式被调用,可以由实际的滑鼠滚轮或摸板触发。 event.delta 属性将返回滑鼠滚轮所滚动的量。这值可以是正数或负数,取决于滚动的方向(在 OS X 如果启用“自然”滚屏方向,正反方向将相反)。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional WheelEvent callback argument."
+ }
+ },
+ "requestPointerLock": {
+ "description": [
+ "The function requestPointerLock() locks the pointer to its current position and makes it invisible. Use movedX and movedY to get the difference the mouse was moved since the last call of draw. Note that not all browsers support this feature. This enables you to create experiences that aren't limited by the mouse moving out of the screen even if it is repeatedly moved into one direction. For example, a first person perspective experience."
+ ]
+ },
+ "exitPointerLock": {
+ "description": [
+ "The function exitPointerLock() exits a previously triggered pointer Lock for example to make ui elements usable etc"
+ ]
},
"touches": {
"description": [
- "touches[] 系统变量将储存一个含有现在所有触动点相对于画布 (0, 0) 位置的位置数组,及分辨个别触动点移动时的 ID。数组内的每个元素都会有 x、y 及 id 属性。 touches[] 数组并不受 Safari 及 IE 移动设备(包括手提电脑)所支持。"
- ],
- "returns": ""
+ "touches[] 系统变量将储存一个含有现在所有触动点相对于画布 (0, 0) 位置的位置数组,及分辨个别触动点移动时的 ID。数组内的每个元素都会有 x、y 及 id 属性。 touches[] 数组并不受 Safari 及 IE 移动设备(包括手提电脑)所支持。",
+ ""
+ ]
},
"touchStarted": {
"description": [
"touchStarted() 函数将在每次触动事件被触发时被调用。如果 touchStarted() 函数并未有被定义,mousePressed() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
},
"touchMoved": {
"description": [
"touchMoved() 函数将在每次触点移动事件被触发时被调用。如果 touchMoved() 函数并未有被定义,mouseDragged() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
},
"touchEnded": {
"description": [
"touchEnded() 函数将在每次触动结束时被调用。如果 touchEnded() 函数并未有被定义,mouseReleased() 函数有被定义的话将会被调用。 不同浏览器可能有不同附属于个别触动事件的行为。以防止这些默认行为发生,只需在函数尾端加 “return false”。"
],
- "returns": ""
+ "params": {
+ "event": "Object: (Optional) optional TouchEvent callback argument."
+ }
},
"createImage": {
"description": [
- "创造一个新的 p5.Image 物件(储存图像的数据类型)。这将提供一个全新的像素缓冲供您使用。缓冲区的大小将由所提供的宽度和高度参数决定。 .pixels 将提供一个含有所有像素资料的数组。这些值都为数字。这数组的大小为(同时考虑像素密度)显示窗口的大小 x4,分别代表每个像素由左到右,上到下的 R、G、B、A 值。请参考 .pixels 文献。您也能使用更简单的 set() 或 get()。 在获取一个图像的像素之前,像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后,updatePixels() 函数必须被调用以更新图像资料。"
+ "创造一个新的 p5.Image 物件(储存图像的数据类型)。这将提供一个全新的像素缓冲供您使用。缓冲区的大小将由所提供的宽度和高度参数决定。 .pixels 将提供一个含有所有像素资料的数组。这些值都为数字。这数组的大小为(同时考虑像素密度)显示窗口的大小 x4,分别代表每个像素由左到右,上到下的 R、G、B、A 值。请参考 .pixels 文献。您也能使用更简单的 set() 或 get()。 在获取一个图像的像素之前,像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后,updatePixels() 函数必须被调用以更新图像资料。",
+ "",
+ ""
],
+ "returns": "p5.Image:p5.Image 物件",
"params": {
"width": "整数:像素宽度",
"height": "整数:像素宽度"
- },
- "returns": "p5.Image:p5.Image 物件"
+ }
},
"saveCanvas": {
"description": [
@@ -1352,12 +1898,12 @@
"selectedCanvas": "p5.Element|HTMLCanvasElement:una variable representando un canvas HTML5 específico (opcional)",
"filename": "字符串",
"extension": "字符串:'jpg' 或 'png'"
- },
- "returns": ""
+ }
},
"saveFrames": {
"description": [
- "捕捉一系列可用于制作影响的影格图像。接受回调函数。比如说,您可能想要将影格传送至伺服器以方便储存或转变成影像。如果回调函数没有被提供,浏览器将弹出储存文件对话框以尝试下载所有刚被创造的图像。如果提供回调函数,图像资料默认上并不会被储存而是以物件数组的形式被转送至回调函数做参数,数组大小为储存影格的总数。"
+ "捕捉一系列可用于制作影响的影格图像。接受回调函数。比如说,您可能想要将影格传送至伺服器以方便储存或转变成影像。如果回调函数没有被提供,浏览器将弹出储存文件对话框以尝试下载所有刚被创造的图像。如果提供回调函数,图像资料默认上并不会被储存而是以物件数组的形式被转送至回调函数做参数,数组大小为储存影格的总数。",
+ ""
],
"params": {
"filename": "字符串",
@@ -1365,75 +1911,84 @@
"duration": "数字:该捕捉的影格的秒数",
"framerate": "数字:捕捉影格的帧率",
"callback": "函数(数组):一个用来处理图像资料的回调函数。此函数将会被给予一个数组为参数。此数组将会储存所定义的捕捉影格物件。每一个物件都会有三个属性:imageData - 为 image/octet-stream 类型、filename 及 extension。"
- },
- "returns": ""
+ }
},
"loadImage": {
"description": [
- "从被给予的路径加载一个图像并使用其图像创造一个 p5.Image 物件。 该图像或许不能立刻被渲染,如果您想要保证您在图像加载完毕后才开始做任何事情,您可以将 loadImage() 函数调用在 preload() 里。您也能提供回调函数以在图像加载完毕时处理图像资料。 图像的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载图像可能会被浏览器的内建安全模式阻止。"
+ "从被给予的路径加载一个图像并使用其图像创造一个 p5.Image 物件。 该图像或许不能立刻被渲染,如果您想要保证您在图像加载完毕后才开始做任何事情,您可以将 loadImage() 函数调用在 preload() 里。您也能提供回调函数以在图像加载完毕时处理图像资料。 图像的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载图像可能会被浏览器的内建安全模式阻止。",
+ "",
+ "",
+ ""
],
+ "returns": "p5.Image:p5.Image 物件",
"params": {
"path": "字符串:欲加载的图像的路径",
"successCallback": "函数(p5.Image):图像加载结束调用的函数。会被给予 p5.Image 做参数。",
"failureCallback": "函数(错误物件):如果图像加载失败此函数将被调用并给予错误物件做参数。"
- },
- "returns": "p5.Image:p5.Image 物件"
+ }
},
"image": {
"description": [
- "在 p5 画布上画一个图像。 此函数能使用几个不同数量的参数。最简单的用法只需要三个参数:img(图像)、x 及 y - (x, y) 为图像的位置。多两个可选参数能用来定义绘制图像的宽度及高度。 此函数也能使用所有八个数字参数。以分辨所有的参数,p5.js 在以下将使用“终点方形”(应对于 “dx”、“dy” 等)及“原图像”(应对于 “sx”、“sy”等)的名词。提供“原图像”大小可用来显示原图像的一个子部分而不需要显示整个图像。以下图表能解释得更清楚: "
+ "在 p5 画布上画一个图像。 此函数能使用几个不同数量的参数。最简单的用法只需要三个参数:img(图像)、x 及 y - (x, y) 为图像的位置。多两个可选参数能用来定义绘制图像的宽度及高度。 此函数也能使用所有八个数字参数。以分辨所有的参数,p5.js 在以下将使用“终点方形”(应对于 “dx”、“dy” 等)及“原图像”(应对于 “sx”、“sy”等)的名词。提供“原图像”大小可用来显示原图像的一个子部分而不需要显示整个图像。以下图表能解释得更清楚: ",
+ "",
+ ""
],
"params": {
"img": "p5.Image|p5.Element:该显示的图像",
- "dx": "数字:图像左上角的 x 坐标",
- "dy": "数字:图像左上角的 y 坐标",
- "dWidth": "数字:绘制图像的宽度",
- "dHeight": "数字:绘制图像的高度",
- "sx": "数字:绘制图像的终点方形的 x 坐标位置",
- "sy": "数字:绘制图像的终点方形的 y 坐标位置",
- "sWidth": "数字:终点方形的宽度",
- "sHeight": "数字:终点方形的高度",
- "UNKNOWN-PARAM-10": "数字:该画进终点方形的原图像子部分的 x 坐标",
- "UNKNOWN-PARAM-11": "数字:该画进终点方形的原图像子部分的 y 坐标",
- "UNKNOWN-PARAM-12": "数字:该画进终点方形的原图像子部分的宽度",
- "UNKNOWN-PARAM-13": "数字:该画进终点方形的原图像子部分的高度"
- },
- "returns": ""
+ "x": "数字:图像左上角的 x 坐标",
+ "y": "数字:图像左上角的 y 坐标",
+ "width": "数字:绘制图像的宽度",
+ "height": "数字:绘制图像的高度",
+ "dx": "数字:绘制图像的终点方形的 x 坐标位置",
+ "dy": "数字:绘制图像的终点方形的 y 坐标位置",
+ "dWidth": "数字:终点方形的宽度",
+ "dHeight": "数字:终点方形的高度",
+ "sx": "数字:该画进终点方形的原图像子部分的 x 坐标",
+ "sy": "数字:该画进终点方形的原图像子部分的 y 坐标",
+ "sWidth": "数字:该画进终点方形的原图像子部分的宽度",
+ "sHeight": "数字:该画进终点方形的原图像子部分的高度"
+ }
},
"tint": {
"description": [
- "定义显示图像的填色值。图像能着色成所定义的颜色或提供透明度值以使其透明化。 如想是图像透明化但不想影响其颜色,可使用白色为着色值并定义透明度值。比如说,tint(255, 128) 将会使一个图像成为 50% 透明(假设为默认透明度范围 0-255,可使用 colorMode() 调整)。 灰阶值参数必须低于或等于当时 colorMode() 所定义的最高值。默认最高值为 255。"
+ "定义显示图像的填色值。图像能着色成所定义的颜色或提供透明度值以使其透明化。 如想是图像透明化但不想影响其颜色,可使用白色为着色值并定义透明度值。比如说,tint(255, 128) 将会使一个图像成为 50% 透明(假设为默认透明度范围 0-255,可使用 colorMode() 调整)。 灰阶值参数必须低于或等于当时 colorMode() 所定义的最高值。默认最高值为 255。",
+ "",
+ ""
],
"params": {
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
"v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
"alpha": "数字:",
- "UNKNOWN-PARAM-5": "字符串:颜色字符串",
- "UNKNOWN-PARAM-6": "数字:灰阶值",
- "UNKNOWN-PARAM-7": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-8": "p5.Color:着色色值"
- },
- "returns": ""
+ "value": "字符串:颜色字符串",
+ "gray": "数字:灰阶值",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "color": "p5.Color:着色色值"
+ }
},
"noTint": {
- "description": ["移除当时显示图像的填色值并将其恢复成显示图形的原色调。"],
- "returns": ""
+ "description": [
+ "移除当时显示图像的填色值并将其恢复成显示图形的原色调。"
+ ]
},
"imageMode": {
"description": [
- "定义图像模式。更改 image() 解读参数的方式以更改图像开始绘制的位置。默认模式为 imageMode(CORNER),此模式将解读第二及第三个参数为图像的左上角位置。如果加多两个参数,它们则被用来定义图像的宽度和高度。 imageMode(CORNERS) 将使 image() 函数解读第二及第三个参数为一个角落的位置,而第四个第五个参数为对面角落的位置。 imageMode(CENTER) 将使 image() 函数解读第二及第三个参数为图像的中心点。如果提供多两个参数,它们将被用来定义图像的宽度和高度。"
+ "定义图像模式。更改 image() 解读参数的方式以更改图像开始绘制的位置。默认模式为 imageMode(CORNER),此模式将解读第二及第三个参数为图像的左上角位置。如果加多两个参数,它们则被用来定义图像的宽度和高度。 imageMode(CORNERS) 将使 image() 函数解读第二及第三个参数为一个角落的位置,而第四个第五个参数为对面角落的位置。 imageMode(CENTER) 将使 image() 函数解读第二及第三个参数为图像的中心点。如果提供多两个参数,它们将被用来定义图像的宽度和高度。",
+ "",
+ ""
],
"params": {
"mode": "常量:CORNER、CORNERS 或 CENTER"
- },
- "returns": ""
+ }
},
"pixels": {
"description": [
- "此数组为一个储存显示窗口内所有像素值的 Uint8ClampedArray。这些值都为数字。这数组的大小为(同时考虑像素密度)显示窗口的大小 x4,分别代表每个像素由左到右,上到下的 R、G、B、A 值。视网膜显示及其他高密度显示器将会有更多像素(pixelDensity^2 倍)。比如说,如果图像为 100x100 像素,总共会有 40,000 个元素在 pixels[] 数组内。而在一个视网膜显示,将会有 160,000 个元素。 数组内最初四个值(指数 0-3)将会是在坐标 (0, 0) 的像素的 R、G、B、A 值。下四个值(指数 4-7)将会是在坐标 (1, 0) 的像素的 R、G、B、A 值。一般上,如果要设置像素 (x, y) 的值: CODE BLOCK PENDING 虽然以上的方式有点复杂,它能提供足够的弹性以应对任何像素密度的显示。注意 set() 将会自动处理设定所有在任何像素密度下 (x, y) 坐标在 pixels[] 内的值,不过程序性能可能在像素数组被更改很多次时时不佳。 在使用这个数组之前,像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后,updatePixels() 函数必须被调用以更新图像资料。 注意这不是个普通的 Javascript 数组。这表示 Javascript 数组函数如 slice() 或 arrayCopy() 将不会有效果。"
- ],
- "returns": ""
+ "此数组为一个储存显示窗口内所有像素值的 Uint8ClampedArray。这些值都为数字。这数组的大小为(同时考虑像素密度)显示窗口的大小 x4,分别代表每个像素由左到右,上到下的 R、G、B、A 值。视网膜显示及其他高密度显示器将会有更多像素(pixelDensity^2 倍)。比如说,如果图像为 100x100 像素,总共会有 40,000 个元素在 pixels[] 数组内。而在一个视网膜显示,将会有 160,000 个元素。 数组内最初四个值(指数 0-3)将会是在坐标 (0, 0) 的像素的 R、G、B、A 值。下四个值(指数 4-7)将会是在坐标 (1, 0) 的像素的 R、G、B、A 值。一般上,如果要设置像素 (x, y) 的值: CODE BLOCK PENDING 虽然以上的方式有点复杂,它能提供足够的弹性以应对任何像素密度的显示。注意 set() 将会自动处理设定所有在任何像素密度下 (x, y) 坐标在 pixels[] 内的值,不过程序性能可能在像素数组被更改很多次时时不佳。 在使用这个数组之前,像素资料必须先使用 loadPixels() 函数加载。在数组资料被修改后,updatePixels() 函数必须被调用以更新图像资料。 注意这不是个普通的 Javascript 数组。这表示 Javascript 数组函数如 slice() 或 arrayCopy() 将不会有效果。",
+ "",
+ "",
+ "",
+ ""
+ ]
},
"blend": {
"description": [
@@ -1450,8 +2005,7 @@
"dw": "整数:终点图像的宽度",
"dh": "整数:终点图像的高度",
"blendMode": "常量:混合模式。BLEND、DARKEST、LIGHTEST、DIFFERENCE、MULTIPLY、EXCLUSION、SCREEN、REPLACE、OVERLAY、HARD_LIGHT、SOFT_LIGHT、DODGE、BURN、ADD 或 NORMAL。"
- },
- "returns": ""
+ }
},
"copy": {
"description": [
@@ -1467,47 +2021,58 @@
"dy": "整数:终点图像左上角的 y 坐标",
"dw": "整数:终点图像的宽度",
"dh": "整数:终点图像的高度"
- },
- "returns": ""
+ }
},
"filter": {
"description": [
- "在画布上使用过滤器。 预设选择为: THRESHOLD 将图像转换成黑与白像素,取决于它们是否高于或低于所定义的 level 参数值。参数值必须在 0.0(黑色)与 1.0(白色)之间。如果并没有提供参数的话,默认将设为 0.5。 GRAY 将图像内的颜色转换成灰阶色。不使用任何参数。 OPAQUE 设置所有透明度值成完全不透明。不使用任何参数。 INVERT 设置每个像素成其反值。不使用任何参数。 POSTERIZE 将限制每个图像的彩色通道至参数所定义的颜色数。参数值可以介于 2 至 255 之间,但是效果会在较低值是比较明显。 BLUR 将使用 level 参数所定义的模糊度执行高斯模糊。如果没有提供参数,模糊度为高斯模糊半径为 1。越大的值越模糊。 ERODE 减少亮区。不使用任何参数。 DILATE 增加亮区。不使用任何参数。"
+ "在画布上使用过滤器。 预设选择为: THRESHOLD 将图像转换成黑与白像素,取决于它们是否高于或低于所定义的 level 参数值。参数值必须在 0.0(黑色)与 1.0(白色)之间。如果并没有提供参数的话,默认将设为 0.5。 GRAY 将图像内的颜色转换成灰阶色。不使用任何参数。 OPAQUE 设置所有透明度值成完全不透明。不使用任何参数。 INVERT 设置每个像素成其反值。不使用任何参数。 POSTERIZE 将限制每个图像的彩色通道至参数所定义的颜色数。参数值可以介于 2 至 255 之间,但是效果会在较低值是比较明显。 BLUR 将使用 level 参数所定义的模糊度执行高斯模糊。如果没有提供参数,模糊度为高斯模糊半径为 1。越大的值越模糊。 ERODE 减少亮区。不使用任何参数。 DILATE 增加亮区。不使用任何参数。",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
],
"params": {
"filterType": "常量:THRESHOLD、GRAY、OPAQUE、INVERT、POSTERIZE、BLUR、ERODE、DILATE 或 BLUR。",
"filterParam": "数字:每个过滤器独有的可选性参数,请看以上"
- },
- "returns": ""
+ }
},
"get": {
"description": [
- "返回任何像素值的一个为 [R,G,B,A] 的数组或捕捉图像的一部分。如果没有提供任何参数,将会返回整个图像。可使用 x 及 y 参数以取得一个像素的值。多加定义 w 及 h 参数可取的显示窗口的一部分。当在取得图像时,x 及 y 参数将定义图像的左上角坐标值,无论当时的图像模式为何。 如果欲取得的像素在图像外,将返回 [0,0,0,255]。以取得根据当时的颜色值范围及颜色模式的数字,请使用 getColor 而不是 get。 使用 get(x, y) 以取得一个像素的颜色相对来说简单,但是其速度并没有直接从 pixels[] 数组获取数据来的快。与使用 get(x, y) 有相同的效果但使用 pixels[] 及像素密度 d 的范例如下 var x, y, d; // 设置这为坐标 var off = (y width + x) d * 4; var components = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; print(components); 请参考 pixels[] 文献以知更多详情。"
+ "返回任何像素值的一个为 [R,G,B,A] 的数组或捕捉图像的一部分。如果没有提供任何参数,将会返回整个图像。可使用 x 及 y 参数以取得一个像素的值。多加定义 w 及 h 参数可取的显示窗口的一部分。当在取得图像时,x 及 y 参数将定义图像的左上角坐标值,无论当时的图像模式为何。 如果欲取得的像素在图像外,将返回 [0,0,0,255]。以取得根据当时的颜色值范围及颜色模式的数字,请使用 getColor 而不是 get。 使用 get(x, y) 以取得一个像素的颜色相对来说简单,但是其速度并没有直接从 pixels[] 数组获取数据来的快。与使用 get(x, y) 有相同的效果但使用 pixels[] 及像素密度 d 的范例如下 var x, y, d; // 设置这为坐标 var off = (y width + x) d * 4; var components = [ pixels[off], pixels[off + 1], pixels[off + 2], pixels[off + 3] ]; print(components); 请参考 pixels[] 文献以知更多详情。",
+ "",
+ "",
+ "",
+ ""
],
+ "returns": "数字[]|p5.Image:在 x,y 的像素值数组或 p5.Image",
"params": {
- "the": "数字:像素的 x 坐标",
- "UNKNOWN-PARAM-2": "数字:像素的 y 坐标",
- "UNKNOWN-PARAM-3": "数字:宽度",
- "UNKNOWN-PARAM-4": "数字:高度"
- },
- "returns": "数字[]|p5.Image:在 x,y 的像素值数组或 p5.Image"
+ "x": "数字:像素的 x 坐标",
+ "y": "数字:像素的 y 坐标",
+ "w": "数字:宽度",
+ "h": "数字:高度"
+ }
},
"loadPixels": {
"description": [
"将显示窗口的像素资料加载到 pixels[] 数组里。这函数必须在读写 pixels[] 之前被调用。注意只有使用 set() 或直接修改 pixels[] 的改变会发生。"
- ],
- "returns": ""
+ ]
},
"set": {
"description": [
- "改变任何像素的颜色,或直接在显示窗口内绘画一个图像。 x 及 y 参数用于定义该改变的像素而 c 参数用于定义颜色值。这可以是一个 p5.Color 物件或一个 [R, G, B, A] 像素数组。它也能是一个灰阶值。在设定一个图像时,x 及 y 参数将定义图像左上角的坐标值,无论当时的图像模式为何。 在使用 set() 后,您必须调用 updatePixels() 以使您的改变生效。这应该在所有像素都被设定后才被调用,而且也必须在调用 get() 或绘制图像之前调用。 使用 set(x, y) 设置一个像素的颜色相对来说简单,但使其速度并没有直接将数据写在 pixels[] 数组里来的快。直接使用 pixels[] 设置像素值可能在使用视网膜显示器时比较复杂,不过它会在每一个循环有很多像素需要被设定时表现得更好。 请参考 pixels[] 文献以知更多详情。"
+ "改变任何像素的颜色,或直接在显示窗口内绘画一个图像。 x 及 y 参数用于定义该改变的像素而 c 参数用于定义颜色值。这可以是一个 p5.Color 物件或一个 [R, G, B, A] 像素数组。它也能是一个灰阶值。在设定一个图像时,x 及 y 参数将定义图像左上角的坐标值,无论当时的图像模式为何。 在使用 set() 后,您必须调用 updatePixels() 以使您的改变生效。这应该在所有像素都被设定后才被调用,而且也必须在调用 get() 或绘制图像之前调用。 使用 set(x, y) 设置一个像素的颜色相对来说简单,但使其速度并没有直接将数据写在 pixels[] 数组里来的快。直接使用 pixels[] 设置像素值可能在使用视网膜显示器时比较复杂,不过它会在每一个循环有很多像素需要被设定时表现得更好。 请参考 pixels[] 文献以知更多详情。",
+ "",
+ ""
],
"params": {
- "key": "数字:像素的 x 坐标",
- "value": "数字:像素的 y 坐标",
- "UNKNOWN-PARAM-3": "数字|数字[]|物件:插入一个灰阶值 | 一个像素数组 | 一个 p5.Color 物件 | 一个用于复制的 p5.Image"
- },
- "returns": ""
+ "x": "数字:像素的 x 坐标",
+ "y": "数字:像素的 y 坐标",
+ "c": "数字|数字[]|物件:插入一个灰阶值 | 一个像素数组 | 一个 p5.Color 物件 | 一个用于复制的 p5.Image"
+ }
},
"updatePixels": {
"description": [
@@ -1518,106 +2083,109 @@
"y": "数字:欲更新的区域的左上角 y 坐标",
"w": "数字:欲更新的区域的宽度",
"h": "数字:欲更新的区域的高度"
- },
- "returns": ""
- },
- "loadFont": {
- "description": [
- "从一个文件或网址加载一个 opentype 字形文件(.otf、.ttf),将返回一个 p5.Font 物件。这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。 字形的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载字形可能会被浏览器的内建安全模式阻止。"
- ],
- "params": {
- "path": "字符串:该加载的字形名字或网址",
- "callback": "函数:在 loadFont() 完成后该调用的函数",
- "onError": "函数:在发生错误时该调用的函数"
- },
- "returns": "p5.Font:p5.Font 物件"
+ }
},
"loadJSON": {
"description": [
- "从一个文件或网址加载一个 JSON 文件,将返回一个物件。注意如果该 JSON 文件内涵一个数组,此函数仍然会返回一个以数字为指数的物件。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。JSONP 功能支持是由填充工具所提供而您可以使用第二个参数来定义一个有 JSON 回调定义的物件,只需跟从这里的指示 。"
+ "从一个文件或网址加载一个 JSON 文件,将返回一个物件。注意如果该 JSON 文件内涵一个数组,此函数仍然会返回一个以数字为指数的物件。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。JSONP 功能支持是由填充工具所提供而您可以使用第二个参数来定义一个有 JSON 回调定义的物件,只需跟从这里的指示 。",
+ "",
+ ""
],
+ "returns": "物件:JSON 数据",
"params": {
"path": "字符串:该加载的文件名或网址",
"jsonpOptions": "物件:关于 jsonp 设置的设置物件",
"datatype": "字符串:\"json\" 或 \"jsonp\"",
"callback": "函数:在 loadJSON() 完成后该执行的函数,返回的数据将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": "物件:JSON 数据"
+ }
},
"loadStrings": {
"description": [
- "读取一个文件的内容并使用个别字行创造一个字符串数组。如果文件名被用作第一个参数,如以上范例,该文件必须被储存在绘图文件夹内。 除此之外,该文件也能从本地电脑任何位置加载,只需使用绝对路径(任何在 Unix 及 Linux 内由 / 开始的路径,或在 Windows 内由驱动器符号开始的路径),又或者任何在网络上的文件网址也能用来当作 filename 参数。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。"
+ "读取一个文件的内容并使用个别字行创造一个字符串数组。如果文件名被用作第一个参数,如以上范例,该文件必须被储存在绘图文件夹内。 除此之外,该文件也能从本地电脑任何位置加载,只需使用绝对路径(任何在 Unix 及 Linux 内由 / 开始的路径,或在 Windows 内由驱动器符号开始的路径),又或者任何在网络上的文件网址也能用来当作 filename 参数。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。",
+ "",
+ "",
+ ""
],
+ "returns": "字符串[]:字符串数组",
"params": {
"filename": "字符串:该加载的文件名或网址",
"callback": "函数:在 loadStrings() 完成后该执行的函数,返回的数组将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": "字符串[]:字符串数组"
+ }
},
"loadTable": {
"description": [
- "读取一个文件的内容并使用其内容创造一个 p5.Table 物件。如果文件名被用作第一个参数,该文件必须被储存在绘图文件夹内。文件名参数也能是一个在网络上的文件的网址。默认上,该文件被假定为以逗号分隔(格式为 CSV)。该表格只会在 ‘header’ 设置被使用时才会寻找标签。 可使用的设置包括:csv - 将表格解析为逗号分隔值 tsv - 将表格解析为制表符分隔值 header - 这表格有标签行 当使用多个设置时,您只需将他们分为个别的参数并使用逗号分隔。例如:loadTable('my_csv_file.csv', 'csv', 'header'); 所有加载及储存的文件都需使用 UTF-8 编码。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成 在 preload() 外,您可以提供一个回调函数以处理加载物件。"
+ "读取一个文件的内容并使用其内容创造一个 p5.Table 物件。如果文件名被用作第一个参数,该文件必须被储存在绘图文件夹内。文件名参数也能是一个在网络上的文件的网址。默认上,该文件被假定为以逗号分隔(格式为 CSV)。该表格只会在 ‘header’ 设置被使用时才会寻找标签。 可使用的设置包括:csv - 将表格解析为逗号分隔值 tsv - 将表格解析为制表符分隔值 header - 这表格有标签行 当使用多个设置时,您只需将他们分为个别的参数并使用逗号分隔。例如:loadTable('my_csv_file.csv', 'csv', 'header'); 所有加载及储存的文件都需使用 UTF-8 编码。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成 在 preload() 外,您可以提供一个回调函数以处理加载物件。",
+ "",
+ ""
],
+ "returns": "物件:含有数据的 Table 物件",
"params": {
"filename": "字符串:该加载的文件名或网址",
- "options": "字符串:\"header\" \"csv\" \"tsv\"",
+ "extension": "String: (Optional) parse the table by comma-separated values \"csv\", semicolon-separated values \"ssv\", or tab-separated values \"tsv\"",
+ "header": "String: (Optional) \"header\" to indicate table has header row",
"callback": "函数:在 loadTable() 完成后该执行的函数,返回的 Table 物件将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": "物件:含有数据的 Table 物件"
+ }
},
"loadXML": {
"description": [
- "读取一个文件的内容并使用其内容创造一个 XML 物件。如果文件名被用作第一个参数,该文件必须被储存在绘图文件夹内。 除此之外,该文件也能从本地电脑任何位置加载,只需使用绝对路径(任何在 Unix 及 Linux 内由 / 开始的路径,或在 Windows 内由驱动器符号开始的路径),又或者任何在网络上的文件网址也能用来当作 filename 参数。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成 在 preload() 外,您可以提供一个回调函数以处理加载物件。"
+ "读取一个文件的内容并使用其内容创造一个 XML 物件。如果文件名被用作第一个参数,该文件必须被储存在绘图文件夹内。 除此之外,该文件也能从本地电脑任何位置加载,只需使用绝对路径(任何在 Unix 及 Linux 内由 / 开始的路径,或在 Windows 内由驱动器符号开始的路径),又或者任何在网络上的文件网址也能用来当作 filename 参数。 这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。在 preload() 内调用 loadTable() 将保证加载工作会在 setup() 及 draw() 被调用前完成 在 preload() 外,您可以提供一个回调函数以处理加载物件。",
+ "",
+ "",
+ "",
+ ""
],
+ "returns": "物件:含有数据的 XML 物件",
"params": {
"filename": "字符串:该加载的文件名或网址",
"callback": "函数:在 loadXML() 完成后该执行的函数,返回的 XML 物件将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": "物件:含有数据的 XML 物件"
+ }
},
"loadBytes": {
- "description": [""],
+ "description": [
+ ""
+ ],
+ "returns": "物件:一个 ‘bytes’ 属性将为被加载的缓冲区的物件",
"params": {
"file": "字符串:该加载的文件名或网址",
"callback": "函数:在 load() 完成后该执行的函数",
"errorCallback": "函数:在发生错误时该执行的函数"
- },
- "returns": "物件:一个 ‘bytes’ 属性将为被加载的缓冲区的物件"
+ }
},
"httpGet": {
"description": [
"执行 HTTP GET 请求的函数。如果数据类型(datatype)没有被定义的话,p5 将会尝试根据网址猜返回数据的类型,默认为文字。这和调用 httpDo(path, 'GET') 的效果一样。‘binary’ 数据类型将会返回一个 Blob 物件,而 ‘arrayBuffer’ 数据类型将会返回一个 ArrayBuffer 并可用来创造类型化数组(如 Uint8Array)。"
],
+ "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.",
"params": {
"path": "字符串:该加载的文件名或网址",
"datatype": "字符串:\"json\"、\"jsonp\"、\"binary\"、\"arrayBuffer\"、\"xml\"或\"text\"",
"data": "物件|布尔值:与请求一起传送的参数资料",
"callback": "函数:在 httpGet() 完成后该执行的函数,返回的资料物件将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": ""
+ }
},
"httpPost": {
"description": [
"执行 HTTP POST 请求的函数。如果数据类型(datatype)没有被定义的话,p5 将会尝试根据网址猜返回数据的类型,默认为文字。这和调用 httpDo(path, 'POST') 的效果一样。"
],
+ "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.",
"params": {
"path": "字符串:该加载的文件名或网址",
"datatype": "字符串:\"json\"、\"jsonp\"、\"xml\" 或 \"text\"。如果不提供此参数,httpPost() 将尝试猜",
"data": "物件|布尔值:与请求一起传送的参数资料",
"callback": "函数:在 httpPost() 完成后该执行的函数,返回的资料物件将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数"
- },
- "returns": ""
+ }
},
"httpDo": {
"description": [
"执行 HTTP 请求的函数。如果数据类型(datatype)没有被定义的话,p5 将会尝试根据网址猜返回数据的类型,默认为文字。 如果需要更高等的使用法,您可以在第一个参数给予路径而第二个参数给予一个物件,物件内容设置与 Fetch API 规范的一样。"
],
+ "returns": "Promise: A promise that resolves with the data when the operation completes successfully or rejects with the error after one occurs.",
"params": {
"path": "字符串:该加载的文件名或网址",
"method": "字符串:\"GET\"、\"POST\" 或 \"PUT\",默认为 \"GET\"",
@@ -1625,12 +2193,11 @@
"data": "物件|布尔值:与请求一起传送的参数资料",
"callback": "函数:在 httpDo() 完成后该执行的函数,返回的资料物件将会是函数第一个参数",
"errorCallback": "函数:在发生错误时该执行的函数,回复将会是函数第一个参数",
- "UNKNOWN-PARAM-7": "物件:Request 物件,请参考 “fetch” API 文献 以了解可使用设置"
- },
- "returns": ""
+ "options": "物件:Request 物件,请参考 “fetch” API 文献 以了解可使用设置"
+ }
},
"createWriter": {
- "description": [""],
+ "returns": "p5.PrintWriter: ",
"params": {
"name": "字符串:该创造的文件的名",
"extension": "字符串:"
@@ -1641,11 +2208,10 @@
"储存一个图像、文字、JSON、csv、wav 或 html 文件。将提示客户电脑下载文件。注意 save() 函数不建议在正在循环执行的 draw 函数内使用,因为每一次被调用 save() 函数将会弹出一个储存对话框。 默认上此函数将储存画布成一个图像。您也可以选择定义一个文件名。例如:CODE BLOCK PENDING 除此之外,第一个参数也能是个画布 p5.Element 的对象、字符串数组、JSON 数组、JSON 物件、p5.Table、p5.Image 或 p5.SoundFile(需要 p5.sound)。第二个参数为文件名(包括扩展名)。第三个参数适用于特别给这一类物件的设定。这函数将会储存一个符合给予的参数的文件。例如:CODE BLOCK PENDING "
],
"params": {
+ "objectOrFilename": "Object|String: (Optional) If filename is provided, will save canvas as an image with either png or jpg extension depending on the filename. If object is provided, will save depending on the object and filename (see examples above).",
"filename": "物件|字符串:如果所提供的是文件名,此函数将会使用该文件名加上 png 或 jpg 文件扩展名来储存画布为一个图像。如果所提供的是物件,此函数则会一物件所定义的方式储存文件(请参考以上范例)。",
- "extension": "字符串:如果所提供的第一个参数为物件,那第二个参数则定义文件名,同时必须包括适当的文件扩展名(请参考以上范例)。",
- "UNKNOWN-PARAM-3": "布尔值|字符串:依文件类型而定的设定。比如说,在储存 JSON 时,true 表示输出文件将会针对文件大小进行优化,而同时牺牲可读性。"
- },
- "returns": ""
+ "options": "布尔值|字符串:依文件类型而定的设定。比如说,在储存 JSON 时,true 表示输出文件将会针对文件大小进行优化,而同时牺牲可读性。"
+ }
},
"saveJSON": {
"description": [
@@ -1653,10 +2219,9 @@
],
"params": {
"json": "数组|物件:",
- "name": "字符串:",
+ "filename": "String",
"optimize": "布尔值:如果为 true,将移除输出文件内的换行符及空格以优化文件大小(但牺牲可读性)"
- },
- "returns": ""
+ }
},
"saveStrings": {
"description": [
@@ -1665,165 +2230,117 @@
"params": {
"list": "字符串[]:该输出的字符串数组",
"filename": "字符串:输出文件的名字",
- "extension": "字符串:文件扩展名"
- },
- "returns": ""
+ "extension": "字符串:文件扩展名",
+ "isCRLF": "Boolean: (Optional) if true, change line-break to CRLF"
+ }
},
"saveTable": {
"description": [
"将一个表格(Table)物件的内容写进一个文件内。默认将储存为逗号分隔值('csv')的文字文件但也可以使用制表符分隔('tsv')或生成一个 HTML 表格('html')。文件的储存方式及地点在不同浏览器之间有所不同。"
],
"params": {
- "table": "p5.Table:该储存在文件内的表格物件",
+ "Table": "p5.Table: the Table object to save to a file",
"filename": "字符串:储存表格文件的名字",
"options": "字符串:可以是 \"tsv\"、\"csv\" 或 \"html\""
- },
- "returns": ""
+ }
},
- "day": {
+ "abs": {
"description": [
- "p5.js 将与您的电脑的时钟沟通,day() 函数将返回当天的日期天数在 1 - 31 的范围内。"
+ "计算一个数字的绝对值(大小值)。映射到 Math.abs()。一个数字的绝对值一定是个正数。"
],
- "returns": "整数:当天的日期天数"
+ "returns": "数字:被给予数字的绝对值",
+ "params": {
+ "n": "数字:用于计算的数字"
+ }
},
- "hour": {
+ "ceil": {
"description": [
- "p5.js 将与您的电脑的时钟沟通,hour() 函数将返回当时时间的小时数在 0 - 23 的范围内。"
+ "计算最靠近并大于或等于参数值的整数。映射到 Math.ceil()。比如说,ceil(9.03) 将返回 10。"
],
- "returns": "整数:当时时间的小时数"
+ "returns": "整数:取整后的数字",
+ "params": {
+ "n": "数字:该取整的数字"
+ }
},
- "minute": {
+ "constrain": {
"description": [
- "p5.js 将与您的电脑的时钟沟通,minute() 函数将返回当时时间的分钟数在 0 - 59 的范围内。"
- ],
- "returns": "整数:当时时间的分钟数"
- },
- "millis": {
- "description": [
- "返回自程序开始以来的毫秒(一秒的一千分之一)数。这资料一般可用于定时事件及动画序列。"
- ],
- "returns": "整数:自程序开始以来的毫秒数"
- },
- "month": {
- "description": [
- "p5.js 将与您的电脑的时钟沟通,month() 函数将返回当天的日期月数在 1 - 12 的范围内。"
- ],
- "returns": "整数:当时日期的月数"
- },
- "second": {
- "description": [
- "p5.js 将与您的电脑的时钟沟通,second() 函数将返回当时时间的秒数在 0 - 59 的范围内。"
- ],
- "returns": "整数:当时时间的秒数"
- },
- "year": {
- "description": [
- "p5.js 将与您的电脑的时钟沟通,year() 函数将返回当天的日期年数为一个整数(2014、2015、2016等等)。"
- ],
- "returns": "整数:当时日期的年数"
- },
- "createVector": {
- "description": [
- "创造一个新的 p5.Vector 向量(用以储存向量的数据类型)。此函数将提供一个二维或三维的向量,准确来说一个欧几里得(也称为几何)向量。向量为一个有大小及方向的量。"
- ],
- "params": {
- "x": "数字:该向量的 x 分量",
- "y": "数字:该向量的 y 分量",
- "z": "数字:该向量的 z 分量"
- },
- "returns": "p5.Vector"
- },
- "abs": {
- "description": [
- "计算一个数字的绝对值(大小值)。映射到 Math.abs()。一个数字的绝对值一定是个正数。"
+ "限制一个数字于最低值与最高值之间。"
],
- "params": {
- "n": "数字:用于计算的数字"
- },
- "returns": "数字:被给予数字的绝对值"
- },
- "ceil": {
- "description": [
- "计算最靠近并大于或等于参数值的整数。映射到 Math.ceil()。比如说,ceil(9.03) 将返回 10。"
- ],
- "params": {
- "n": "数字:该取整的数字"
- },
- "returns": "整数:取整后的数字"
- },
- "constrain": {
- "description": ["限制一个数字于最低值与最高值之间。"],
+ "returns": "数字:被限制后的数字",
"params": {
"n": "数字:该限制的数字",
"low": "数字:最低值",
"high": "数字:最高值"
- },
- "returns": "数字:被限制后的数字"
+ }
},
"dist": {
- "description": ["计算两点之间的距离。"],
+ "description": [
+ "计算两点之间的距离。"
+ ],
+ "returns": "数字:两点之间的距离",
"params": {
"x1": "数字:第一个点的 x 坐标",
"y1": "数字:第一个点的 y 坐标",
- "z1": "数字:第二个点的 x 坐标",
"x2": "数字:第二个点的 y 坐标",
"y2": "数字:第一个点的 z 坐标",
+ "z1": "数字:第二个点的 x 坐标",
"z2": "数字:第二个点的 z 坐标"
- },
- "returns": "数字:两点之间的距离"
+ }
},
"exp": {
"description": [
"返回欧拉数 e (2.71828...)提升到由参数 n 定义的指数。映射到 Math.exp()。"
],
+ "returns": "数字:e^n",
"params": {
"n": "数字:该提升的指数"
- },
- "returns": "数字:e^n"
+ }
},
"floor": {
"description": [
"计算最靠近并小于或等于参数值的整数。映射到 Math.floor()。"
],
+ "returns": "整数:取整后的数字",
"params": {
"n": "数字:该取整的数字"
- },
- "returns": "整数:取整后的数字"
+ }
},
"lerp": {
"description": [
"计算一个介于两个数字之间所定义的插值量位置的数字。amt 参数为两个值之间的插值量,0.0 为第一个值,0.1 为非常接近第一个值,0.5 为两者之间等等。lerp 函数可用来沿着直线制作动画及绘制虚线。"
],
+ "returns": "数字:插值",
"params": {
"start": "数字:第一个值",
"stop": "数字:第二个值",
"amt": "数字:介于 0.0 与 1.0 之间的数字"
- },
- "returns": "数字:插值"
+ }
},
"log": {
"description": [
"计算一个数字的自然对数(e 为底数的对数)。这函数需要 n 参数大于 0.0。映射到 Math.log()。"
],
+ "returns": "数字:n 的自然对数",
"params": {
- "message": "数字:大于 0 的数字"
- },
- "returns": "数字:n 的自然对数"
+ "n": "Number: number greater than 0"
+ }
},
"mag": {
"description": [
"计算一个向量的大小(或长度)。向量为一个空间内的方向,通常用于电脑图形及线性代数。因为它没有“开始”位置,一个向量的大小可以被想成是 0,0 坐标与向量 x,y 坐标之间的距离。因此,mag() 是 dist(0, 0, x, y) 的缩写。"
],
+ "returns": "数字:从 (0, 0) 至 (a, b) 的向量的大小",
"params": {
"a": "数字:第一个值",
"b": "数字:第二个值"
- },
- "returns": "数字:从 (0, 0) 至 (a, b) 的向量的大小"
+ }
},
"map": {
"description": [
- "从一个范围内映射一个数字去另一个范围。 在以上第一个范例,25 被从 0 至 100 之间的范围映射去窗口最左方 (0) 至最右方 (width) 的范围内。"
+ "从一个范围内映射一个数字去另一个范围。 在以上第一个范例,25 被从 0 至 100 之间的范围映射去窗口最左方 (0) 至最右方 (width) 的范围内。",
+ ""
],
+ "returns": "数字:映射后的数字",
"params": {
"value": "数字:该转换的值",
"start1": "数字:现在值的最低值",
@@ -1831,89 +2348,109 @@
"start2": "数字:目标值的最低值",
"stop2": "数字:目标值的最高值",
"withinBounds": "布尔值:限制目标值在最高及最低值之间"
- },
- "returns": "数字:映射后的数字"
+ }
},
"max": {
"description": [
"找出一系列数字中最大的值,并返回该值。max() 能接受任何数量的数字参数,或是一个任何大小的数组。"
],
+ "returns": "数字:最高值的数字",
"params": {
"n0": "数字:用于比较的数字",
"n1": "数字:用于比较的数字",
- "UNKNOWN-PARAM-3": "数字[]:用于比较的数字"
- },
- "returns": "数字:最高值的数字"
+ "nums": "Number[]: Numbers to compare"
+ }
},
"min": {
"description": [
"找出一系列数字中最小的值,并返回该值。min() 能接受任何数量的数字参数,或是一个任何大小的数组。"
],
+ "returns": "数字:最低值的数字",
"params": {
"n0": "数字:用于比较的数字",
"n1": "数字:用于比较的数字",
- "UNKNOWN-PARAM-3": "数字[]:用于比较的数字"
- },
- "returns": "数字:最低值的数字"
+ "nums": "Number[]: Numbers to compare"
+ }
},
"norm": {
"description": [
"将一个数字由一个范围标准化成介于 0 及 1 之间的值。与 map(value, low, high, 0, 1) 的效果相同。在范围外的数字将不会被限制在 0 与 1 之间,因为范围外的值通常是有意及有用的。(参考以上第二个范例)"
],
+ "returns": "数字:标准化后的数字",
"params": {
"value": "数字:该标准化的值",
"start": "数字:现在值的最低值",
"stop": "数字:现在值的最高值"
- },
- "returns": "数字:标准化后的数字"
+ }
},
"pow": {
"description": [
"执行幂运算。pow() 函数是个能有效率地将数字大量乘于自己(或其倒数)的方式。比如说,pow(3, 5) 等同于 3*3*3*3*3 而 pow(3, -5) 等同于 1 / (3*3*3*3*3)。映射到 Math.pow()。"
],
+ "returns": "数字:n^e",
"params": {
"n": "数字:幂运算的底数",
"e": "数字:幂运算的指数"
- },
- "returns": "数字:n^e"
+ }
},
"round": {
"description": [
"计算最靠近 n 参数的整数。比如说,round(133.8) 将返回 134。映射到 Math.round()。"
],
+ "returns": "整数:取整后的数字",
"params": {
- "n": "数字:该取整的数字"
- },
- "returns": "整数:取整后的数字"
+ "n": "数字:该取整的数字",
+ "decimals": "Number: (Optional) number of decimal places to round to, default is 0"
+ }
},
"sq": {
"description": [
"平方一个数字(将数字乘于自己)。结果一定是个正数,因为将两个负数相乘一定会有一个正数结果。比如说 -1 * -1 = 1。"
],
+ "returns": "数字:平方后的数字",
"params": {
"n": "数字:该平方的数字"
- },
- "returns": "数字:平方后的数字"
+ }
},
"sqrt": {
"description": [
"计算一个数字的平方根。一个数字的平方根一定是个正数,虽然也可能有正确的负数平方根。一个数字 a 的平方根 s 有以下属性 s*s = a。此函数为取平方的相反。映射到 Math.sqrt()。"
],
+ "returns": "数字:取平方根后的数字",
"params": {
"n": "数字:该取平方根的非负数"
- },
- "returns": "数字:取平方根后的数字"
+ }
+ },
+ "fract": {
+ "description": [
+ "Calculates the fractional part of a number."
+ ],
+ "returns": "Number: fractional part of x, i.e, {x}",
+ "params": {
+ "num": "Number: Number whose fractional part needs to be found out"
+ }
+ },
+ "createVector": {
+ "description": [
+ "创造一个新的 p5.Vector 向量(用以储存向量的数据类型)。此函数将提供一个二维或三维的向量,准确来说一个欧几里得(也称为几何)向量。向量为一个有大小及方向的量。"
+ ],
+ "returns": "p5.Vector",
+ "params": {
+ "x": "数字:该向量的 x 分量",
+ "y": "数字:该向量的 y 分量",
+ "z": "数字:该向量的 z 分量"
+ }
},
"noise": {
"description": [
"返回所定义坐标的柏林噪声值。柏林噪声是个用来生成比 random() 所能生成更自然及更谐波的随机数字系列。在 1980 年代有 Ken Perlin 所发明,柏林噪声至今常被用在图形应用程序中生成程序纹理、自然运动、形状、地形等等。 柏林噪声与 random() 函数最主要的不同点在于前者是在一个无限的 n 维空间内定义的,这空间内每一对坐标都相对于一个固定的半随机值(只有在程序进行时为固定的;请参考 noiseSeed() 函数)。p5.js 能计算 1 维、2 维及 3 维噪声,这取决于所给予的坐标数。返回的值一定会在 0.0 至 1.0 之间。噪音值可以通过在噪音空间内移动以制成动画,如以上范例所示。第二及第三个空间维度也能被解读成时间。 所生成的噪音结构上和一般音频信号相似,尤其是此函数的频率。与物理学上谐波的概念相似,泊林噪音也是在计算几个八度后再将其结果加起来以得到最后的结果。 另外一个控制返回随机数系列的特征的方法是控制输入坐标值的大小。因为此函数能在无限之的空内内应用,输入坐标的值并不重要,只有个别坐标之间的距离需要被注意(如在循环内使用 noise() 时)。一般来说坐标之间的距离越小,生成噪声随机数列将会越平滑。介于 0.005-0.03 之间的距离应该适合大多数应用场合,不过这可能因应用需求而变。"
],
+ "returns": "数字:柏林噪声在特定坐标的值(介于 0 与 1 之间)",
"params": {
"x": "数字:噪声空间的 x 坐标",
"y": "数字:噪声空间的 y 坐标",
"z": "数字:噪声空间的 z 坐标"
- },
- "returns": "数字:柏林噪声在特定坐标的值(介于 0 与 1 之间)"
+ }
},
"noiseDetail": {
"description": [
@@ -1922,8 +2459,7 @@
"params": {
"lod": "数字:噪音该使用的八度数",
"falloff": "数字:每个八度的衰退因数"
- },
- "returns": ""
+ }
},
"noiseSeed": {
"description": [
@@ -1931,137 +2467,144 @@
],
"params": {
"seed": "数字:随机种子值"
- },
- "returns": ""
+ }
+ },
+ "randomSeed": {
+ "description": [
+ "定义 random() 使用的随机种子值。 默认上,random() 将在每一次改程序被执行时生成不同的结果。只需定义 seed 参数至一个常量就能确保每一次软件执行时都会返回一样的伪随机数。",
+ ""
+ ],
+ "params": {
+ "seed": "数字:随机种子值"
+ }
+ },
+ "random": {
+ "description": [
+ "返回一个随机的浮点数。 可使用 0、1 或 2 个参数。 如果并没有定义任何参数,将返回一个介于 0 与 1(但不包括 1)的随机数。 如果只定义一个参数并且该参数为数字,将返回一个介于 0 与 该数字(但不包括该数字)的随机数。 如果值定义一个参数并且该参数为数组,将返回该数组中随机一个元素。 如果定义两个参数,将返回一个介于第一个参数与第二个参数(但不包括第二个参数)的随机数。",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "returns": "数字:随机数",
+ "params": {
+ "min": "数字:最低值(包括此值)",
+ "max": "数字:最高值(不包括此值)",
+ "choices": "数组:供选择的数组"
+ }
+ },
+ "randomGaussian": {
+ "description": [
+ "返回一个符合高斯,或正态,分布的随机数。理论上 randomGaussian() 没有最高或最低返回值。不过,差均值很多的值被返回的机率将会很低;而接近均质的值被返回的机率将会相对较高。 可使用 0、1 或 2 个参数。 如果并没有定义任何参数,将使用均值为 0 与 标准差为 1。 如果只定义一个参数,该参数将为均值(标准差为 1)。 如果定义两个参数,第一个参数为均值,第二个参数为标准差。"
+ ],
+ "returns": "数字:随机数",
+ "params": {
+ "mean": "数字:均值",
+ "sd": "数字:标准偏差"
+ }
},
"acos": {
"description": [
"cos() 的反值,将返回一个值的反余弦值。此函数接受介于 -1 与 1 之间的值并将返回介于 0 与 PI(3.1415927)之间的值。"
],
+ "returns": "数字:该值的反余弦值",
"params": {
"value": "数字:该取反余弦值的值"
- },
- "returns": "数字:该值的反余弦值"
+ }
},
"asin": {
"description": [
"sin() 的反值,将返回一个值的反正弦值。此函数接受介于 -1 与 1 之间的值并将返回介于 -PI/2 与 PI/2 之间的值。"
],
+ "returns": "数字:该值的反正弦值",
"params": {
"value": "数字:该取反正弦值的值"
- },
- "returns": "数字:该值的反正弦值"
+ }
},
"atan": {
"description": [
"tan() 的反值,将返回一个值的反正切值。此函数接受介于 -Infinity 与 Infinity(包括 Infinity)之间的值并将返回介于 -PI/2 与 PI/2 之间的值。"
],
+ "returns": "数字:该值的反正切值",
"params": {
"value": "数字:该取反正切值的值"
- },
- "returns": "数字:该值的反正切值"
+ }
},
"atan2": {
"description": [
- "计算从一个被定义的点到坐标原点的弧度,并由正 x 轴开始计算。将返回介于 PI 与 -PI 之间的浮点数。atan2() 函数通常用于定向几何图形至鼠标的位置。 注意:第一个参数为 y 坐标,而第二个参数为 x 坐标,这是为了适应计算正切值的结构。"
+ "计算从一个被定义的点到坐标原点的弧度,并由正 x 轴开始计算。将返回介于 PI 与 -PI 之间的浮点数。atan2() 函数通常用于定向几何图形至鼠标的位置。 注意:第一个参数为 y 坐标,而第二个参数为 x 坐标,这是为了适应计算正切值的结构。",
+ ""
],
+ "returns": "数字:该点的反正切值",
"params": {
"y": "数字:该点的 y 坐标",
"x": "数字:该点的 x 坐标"
- },
- "returns": "数字:该点的反正切值"
+ }
},
"cos": {
"description": [
"计算一个角度的余弦值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。"
],
+ "returns": "数字:该角度的余弦值",
"params": {
"angle": "数字:角度"
- },
- "returns": "数字:该角度的余弦值"
+ }
},
"sin": {
"description": [
"计算一个角度的正弦值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。"
],
+ "returns": "数字:该角度的正弦值",
"params": {
"angle": "数字:角度"
- },
- "returns": "数字:该角度的正弦值"
+ }
},
"tan": {
"description": [
"计算一个角度的正切值。此函数将使用当时的角度模式。返回值将介于 -1 与 1 之间的值。"
],
+ "returns": "数字:该角度的正切值",
"params": {
"angle": "数字:角度"
- },
- "returns": "数字:该角度的正切值"
+ }
},
"degrees": {
"description": [
"将一个弧度值转换成其相对的角度值。弧度和角度为两个测量同样一个东西的方法。一个圆形里有 360 度而也有 2*PI 个弧度。比如说,90° = PI/2 = 1.5707964。此函数将不会使用当时的角度模式。"
],
+ "returns": "数字:转换后的角度值",
"params": {
"radians": "数字:由弧度转换成角度的值"
- },
- "returns": "数字:转换后的角度值"
+ }
},
"radians": {
"description": [
"将一个角度值转换成其相对的弧度值。弧度和角度为两个测量同样一个东西的方法。一个圆形里有 360 度而也有 2*PI 个弧度。比如说,90° = PI/2 = 1.5707964。此函数将不会使用当时的角度模式。"
],
+ "returns": "数字:转换后的角度值",
"params": {
"degrees": "数字:由角度转换成弧度的值"
- },
- "returns": "数字:转换后的角度值"
+ }
},
"angleMode": {
- "description": ["定义当时 p5 的角度模式。默认模式为 RADIANS(弧度)。"],
- "params": {
- "mode": "常量:RADIANS 或 DEGREES"
- },
- "returns": ""
- },
- "randomSeed": {
- "description": [
- "定义 random() 使用的随机种子值。 默认上,random() 将在每一次改程序被执行时生成不同的结果。只需定义 seed 参数至一个常量就能确保每一次软件执行时都会返回一样的伪随机数。"
- ],
- "params": {
- "seed": "数字:随机种子值"
- },
- "returns": ""
- },
- "random": {
- "description": [
- "返回一个随机的浮点数。 可使用 0、1 或 2 个参数。 如果并没有定义任何参数,将返回一个介于 0 与 1(但不包括 1)的随机数。 如果只定义一个参数并且该参数为数字,将返回一个介于 0 与 该数字(但不包括该数字)的随机数。 如果值定义一个参数并且该参数为数组,将返回该数组中随机一个元素。 如果定义两个参数,将返回一个介于第一个参数与第二个参数(但不包括第二个参数)的随机数。"
- ],
- "params": {
- "min": "数字:最低值(包括此值)",
- "max": "数字:最高值(不包括此值)",
- "UNKNOWN-PARAM-3": "数组:供选择的数组"
- },
- "returns": "数字:随机数"
- },
- "randomGaussian": {
"description": [
- "返回一个符合高斯,或正态,分布的随机数。理论上 randomGaussian() 没有最高或最低返回值。不过,差均值很多的值被返回的机率将会很低;而接近均质的值被返回的机率将会相对较高。 可使用 0、1 或 2 个参数。 如果并没有定义任何参数,将使用均值为 0 与 标准差为 1。 如果只定义一个参数,该参数将为均值(标准差为 1)。 如果定义两个参数,第一个参数为均值,第二个参数为标准差。"
+ "定义当时 p5 的角度模式。默认模式为 RADIANS(弧度)。"
],
"params": {
- "mean": "数字:均值",
- "sd": "数字:标准偏差"
- },
- "returns": "数字:随机数"
+ "mode": "常量:RADIANS 或 DEGREES"
+ }
},
"textAlign": {
"description": [
- "定义绘制问题的对齐方向。使用两个参数:horizAlign(LEFT、CENTER 或 RIGHT)及 vertAlign(TOP、BOTTOM、CENTER 或 BASELINE)。 horizAlign 参数为 text() 函数的 x 值,而 vertAlign 参数为 y 值。 因此如果您使用 textAlign(LEFT),您将会使文字最左方对齐 text() 函数所使用的 x 参数。如果您使用 textAlign(RIGHT, TOP),您将会使文字最右方对齐 x 值而文字最上方对齐 y 值。"
+ "定义绘制问题的对齐方向。使用两个参数:horizAlign(LEFT、CENTER 或 RIGHT)及 vertAlign(TOP、BOTTOM、CENTER 或 BASELINE)。 horizAlign 参数为 text() 函数的 x 值,而 vertAlign 参数为 y 值。 因此如果您使用 textAlign(LEFT),您将会使文字最左方对齐 text() 函数所使用的 x 参数。如果您使用 textAlign(RIGHT, TOP),您将会使文字最右方对齐 x 值而文字最上方对齐 y 值。",
+ "",
+ ""
],
"params": {
"horizAlign": "常量:水平对齐,LEFT、CENTER 或 RIGHT",
"vertAlign": "常量:垂直对齐,TOP、BOTTOM、CENTER 或 BASELINE"
- },
- "returns": ""
+ }
},
"textLeading": {
"description": [
@@ -2069,8 +2612,7 @@
],
"params": {
"leading": "数字:行与行之间的像素距离"
- },
- "returns": ""
+ }
},
"textSize": {
"description": [
@@ -2078,8 +2620,7 @@
],
"params": {
"theSize": "数字:字体的像素大小"
- },
- "returns": ""
+ }
},
"textStyle": {
"description": [
@@ -2087,15 +2628,16 @@
],
"params": {
"theStyle": "常量:字体的风格,可以是 NORMAL、ITALIC 或 BOLD"
- },
- "returns": ""
+ }
},
"textWidth": {
- "description": ["计算及返回任何字符或字符串的宽度。"],
+ "description": [
+ "计算及返回任何字符或字符串的宽度。"
+ ],
+ "returns": "数字",
"params": {
"theText": "字符串:该测量的字符串"
- },
- "returns": "数字"
+ }
},
"textAscent": {
"description": [
@@ -2104,12 +2646,29 @@
"returns": "数字"
},
"textDescent": {
- "description": ["返回当时字体在当时所定的大小的下端线高度。"],
+ "description": [
+ "返回当时字体在当时所定的大小的下端线高度。"
+ ],
"returns": "数字"
},
+ "loadFont": {
+ "description": [
+ "从一个文件或网址加载一个 opentype 字形文件(.otf、.ttf),将返回一个 p5.Font 物件。这函数为异步进行,这表示它可能不会在您绘图的下一行代码执行前完成。 字形的路径应该相对于链接您的绘图的 HTML 文件。从其他 URL 或远程位置加载字形可能会被浏览器的内建安全模式阻止。",
+ ""
+ ],
+ "returns": "p5.Font:p5.Font 物件",
+ "params": {
+ "path": "字符串:该加载的字形名字或网址",
+ "callback": "函数:在 loadFont() 完成后该调用的函数",
+ "onError": "函数:在发生错误时该调用的函数"
+ }
+ },
"text": {
"description": [
- "将文字绘制在荧幕上。显示第一个参数内的资料在荧幕上由其他参数所定义的位置。将会使用默认字形除非使用 textFont() 函数定义使用其他字形同时也将使用默认大小除非使用 textSize() 定义文字大小。文字的颜色可使用 fill() 函数定义。可使用 stroke() 及 strokeWeight() 函数添加文字外形线。 文字显示将位于 textAlign() 函数所定义的位置,您可将文字绘制在坐标的左边、右边或中间。 x2 及 y2 参数将定义一个方形文字显示区而且只适用于字符串资料类型。当这两个参数被定义时,它们将使用当时的 rectMode() 设置被解读。不符合方形大小的文字将不会被绘制在荧幕上。"
+ "将文字绘制在荧幕上。显示第一个参数内的资料在荧幕上由其他参数所定义的位置。将会使用默认字形除非使用 textFont() 函数定义使用其他字形同时也将使用默认大小除非使用 textSize() 定义文字大小。文字的颜色可使用 fill() 函数定义。可使用 stroke() 及 strokeWeight() 函数添加文字外形线。 文字显示将位于 textAlign() 函数所定义的位置,您可将文字绘制在坐标的左边、右边或中间。 x2 及 y2 参数将定义一个方形文字显示区而且只适用于字符串资料类型。当这两个参数被定义时,它们将使用当时的 rectMode() 设置被解读。不符合方形大小的文字将不会被绘制在荧幕上。",
+ "",
+ "",
+ ""
],
"params": {
"str": "字符串|物件|数组|数字|布尔值:该显示的字母数字符号",
@@ -2117,30 +2676,34 @@
"y": "数字:文字的 y 坐标",
"x2": "数字:默认上,文字格的宽度,请参考 rectMode()",
"y2": "数字:默认上,文字格的高度,请参考 rectMode()"
- },
- "returns": ""
+ }
},
"textFont": {
- "description": ["定义使用 text() 函数绘制文字时该使用的字形。"],
+ "description": [
+ "定义使用 text() 函数绘制文字时该使用的字形。",
+ ""
+ ],
+ "returns": "Object: the current font",
"params": {
"font": "物件|字符串:一个使用 loadFont() 加载的字形,或一个代表 Web 安全字体(一个所有系统都通用的字形)的字符串",
"size": "数字:字形大小"
- },
- "returns": ""
+ }
},
"append": {
"description": [
"弃用:append() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.push(value) 。 在数组的尾端增加一个值。将增加数组的一个大小。映射到 Array.push()。"
],
+ "returns": "Array: the array that was appended to",
"params": {
"array": "数组:该附加到的数组",
"value": "任何:该附加进数组的元素"
- },
- "returns": ""
+ }
},
"arrayCopy": {
"description": [
- "弃用:arrayCopy() 已被弃用并将会在未来的 p5 版本中移除。 复制一个数组(或该数组的一部分)去另外一个数组。src 数组将会被复制去 dst 数组,开端位置由 srcPosition 参数定义并复制进由 dstPosition 定义的位置。该复制的元素数量由 length 参数定义。注意在复制元素时该元素将覆盖终点数组原有的元素。如果想要添加元素,请使用 use concat()。 简化版本将只使用两个参数:arrayCopy(src, dst) 将复制整个数组去另一个相同大小的数组。这等同于使用 arrayCopy(src, 0, dst, 0, src.length)。 使用这函数将比使用 for 循环数组内每一个元素并一一复制来的更有效率。"
+ "弃用:arrayCopy() 已被弃用并将会在未来的 p5 版本中移除。 复制一个数组(或该数组的一部分)去另外一个数组。src 数组将会被复制去 dst 数组,开端位置由 srcPosition 参数定义并复制进由 dstPosition 定义的位置。该复制的元素数量由 length 参数定义。注意在复制元素时该元素将覆盖终点数组原有的元素。如果想要添加元素,请使用 use concat()。 简化版本将只使用两个参数:arrayCopy(src, dst) 将复制整个数组去另一个相同大小的数组。这等同于使用 arrayCopy(src, 0, dst, 0, src.length)。 使用这函数将比使用 for 循环数组内每一个元素并一一复制来的更有效率。",
+ "",
+ ""
],
"params": {
"src": "数组:原数组",
@@ -2148,375 +2711,586 @@
"dst": "数组:终点数组",
"dstPosition": "数字:在终点数组内的开端指数",
"length": "数字:该复制的元素量"
- },
- "returns": ""
+ }
},
"concat": {
"description": [
"弃用:concat() 已被弃用并将会在未来的 p5 版本中移除。请改用 arr1.concat(arr2) 。 串接两个数组,映射到 Array.concat()。将不会修改原有数组。"
],
+ "returns": "数组:串接后的数组",
"params": {
"a": "数组:串接的第一个数组",
"b": "数组:串接的第二个数组"
- },
- "returns": "数组:串接后的数组"
+ }
},
"reverse": {
"description": [
"弃用:reverse() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.reverse() 。 倒转数组内元素的次序,映射到 Array.reverse()。"
],
+ "returns": "Array: the reversed list",
"params": {
"list": "数组:该倒转的数组"
- },
- "returns": ""
+ }
},
"shorten": {
"description": [
"弃用:shorten() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.pop() 。 将数组减少一个元素并返回缩短后的数组,映射到 Array.pop()。"
],
+ "returns": "数组:缩短后的数组",
"params": {
"list": "数组:该缩短的数组"
- },
- "returns": "数组:缩短后的数组"
+ }
},
"shuffle": {
"description": [
"弃用:shuffle() 已被弃用并将会在未来的 p5 版本中移除。请参考使用 Javascript 混洗数组 (英文页面)。 随机排列数组内的元素。使用 Fisher-Yates 混洗函数。"
],
+ "returns": "数组:混洗后的数组",
"params": {
"array": "数组:该混洗的数组",
"bool": "布尔值:修改所给予的数组"
- },
- "returns": "数组:混洗后的数组"
+ }
},
"sort": {
"description": [
"弃用:sort() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.sort() 。 将一个含有数字的数组有最小到最大值重新排列,或将一个含有文字的数组依字母顺序排列。原数组将不会被修改,而将会返回重新排列后的数组。count 参数定义该排列的元素量。比如说,如果数组内有 12 个元素而 count 被设为 5,只有数组内前五个元素将会被排列。"
],
+ "returns": "Array: the sorted list",
"params": {
"list": "数组:该排列的数组",
"count": "整数:该排列的元素数,由 0 开始"
- },
- "returns": ""
+ }
},
"splice": {
"description": [
"弃用:splice() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.splice() 。 在一个原有的数组内添加一个值或另一数组的值。第一个参数定义该修改的数组,而第二个参数定义该添加的资料。第三个参数为该添加元素的位置的数组指数。(记得数组指数从零开始,因此第一个位置为 0,而第二的位置为 1 等等。)"
],
+ "returns": "Array: the list",
"params": {
"list": "数组:拼接进的数组",
"value": "任何:欲拼接进数组的值",
"position": "整数:数组内该添加该元素的位置"
- },
- "returns": ""
+ }
},
"subset": {
"description": [
"弃用:subset() 已被弃用并将会在未来的 p5 版本中移除。请改用 array.slice() 。 从一个现有的数组中提取一数组的元素。list 参数定义该复制提取元素的数组,而 start 及 count 参数定义该提取哪一些元素。如果没有提供 count 参数,那将会提取数组由开头到结尾的元素。在定义 start 参数时,记得数组第一个指数为 0。这函数将不会修改原数组。"
],
+ "returns": "数组:提取出来的元素数组",
"params": {
"list": "数组:该提取元素的数组",
"start": "整数:开始位置",
"count": "整数:提取元素数"
- },
- "returns": "数组:提取出来的元素数组"
+ }
},
"float": {
"description": [
- "将一个字符串转换成其浮点值。字符串内内容必须是数字,不然将返回 NaN(不是数字)。比如说,float(\"1234.56\") 将返回 1234.56,但 float(\"giraffe\") 将返回 NaN。 当给予一数组的值时,将返回一个等同大小的浮点数组。"
+ "将一个字符串转换成其浮点值。字符串内内容必须是数字,不然将返回 NaN(不是数字)。比如说,float(\"1234.56\") 将返回 1234.56,但 float(\"giraffe\") 将返回 NaN。 当给予一数组的值时,将返回一个等同大小的浮点数组。",
+ ""
],
+ "returns": "数字:该字符串的浮点值",
"params": {
"str": "字符串:该解析的浮点字符串"
- },
- "returns": "数字:该字符串的浮点值"
+ }
},
"int": {
"description": [
"转换一个布尔值、字符串或浮点值成其整数值。当给予一数组的值时,将返回一个等同大小的整数数组。"
],
+ "returns": "数字:该值的整数值",
"params": {
"n": "字符串|布尔值|数字:该解析的值",
"radix": "整数:该转换成的基数",
- "UNKNOWN-PARAM-3": "数组:该解析的值"
- },
- "returns": "数字:该值的整数值"
+ "ns": "数组:该解析的值"
+ }
},
"str": {
"description": [
"转换一个布尔值、字符串或数字成其字符串值。当给予一数组的值时,将返回一个等同大小的字符串数组。"
],
+ "returns": "字符串:该值的字符串值",
"params": {
"n": "字符串|布尔值|数字|数组:该解析的值"
- },
- "returns": "字符串:该值的字符串值"
- },
- "boolean": {
- "description": [
- "转换一个数字或字符串成其布尔值。在数字上,任何非零的值(无论正负)都将转换为 true,而零将转换为 false。在字符串上,\"true\" 将转换成 true,而任何其他值都会转换成 false。当给予一数组的数字或字符串时,将返回一个等同大小的布尔值数组。"
- ],
- "params": {
- "n": "字符串|布尔值|数字|数组:该解析的值"
- },
- "returns": "布尔值:该值的布尔值"
+ }
},
"byte": {
"description": [
"转换一个数字、代表数字的字符串或布尔值成其字节值.一个字节只能是一个介于 -128 与 127 之间的整数,因此如果在这范围外的值被转换时,它将会绕回相对的字节值。当给予一数组的数字、字符串或布尔值时,将返回一个等同大小的字节数组。"
],
+ "returns": "数字:该值的字节值",
"params": {
"n": "字符串|布尔值|数字:该解析的值",
- "UNKNOWN-PARAM-2": "数组:该解析的值"
- },
- "returns": "数字:该值的字节值"
+ "ns": "数组:该解析的值"
+ }
},
"char": {
"description": [
"转换一个数字或字符串成其单一字符的值。如果提供一个字符串参数,它将会先被解析成整数然后再被转换成单一字符。当给予一数组的数字或字符串时,将返回一个等同大小的单一字符数组。"
],
+ "returns": "字符串:该值的字符串值",
"params": {
"n": "字符串|数字:该解析的值",
- "UNKNOWN-PARAM-2": "数组:该解析的值"
- },
- "returns": "字符串:该值的字符串值"
+ "ns": "数组:该解析的值"
+ }
},
"unchar": {
"description": [
"转换一个单一字符成其整数值。当给予一数组的单一字符值时,将返回一个等同大小的整数数组。"
],
+ "returns": "数字:该值的整数值",
"params": {
"n": "字符串:该解析的值",
- "UNKNOWN-PARAM-2": "数组:该解析的值"
- },
- "returns": "数字:该值的整数值"
+ "ns": "数组:该解析的值"
+ }
},
"hex": {
"description": [
"转换一个数字成其十六进制值的字符串。如果提供第二个参数,它将被用来定义该生成的十六进制值的字符量。当给予一数组时,将返回一个等同大小的十六进制字符串数组。"
],
+ "returns": "字符串:该值的十六进制值",
"params": {
"n": "数字:该解析的值",
"digits": "数字",
- "UNKNOWN-PARAM-3": "数字[]:该解析的值"
- },
- "returns": "字符串:该值的十六进制值"
+ "ns": "数字[]:该解析的值"
+ }
},
"unhex": {
"description": [
"转换一个十六进制字符串成其整数值。当给予一数组的十六进制字符串时,将返回一个等同大小的整数数组。"
],
+ "returns": "数字:该十六进制值的整数值",
"params": {
"n": "数字:该解析的值",
- "UNKNOWN-PARAM-2": "数组:该解析的值"
- },
- "returns": "数字:该十六进制值的整数值"
+ "ns": "数组:该解析的值"
+ }
},
"join": {
"description": [
"将一数组的字符串合成一个字符串,每一个元素由 separator 参数定义的字符分隔开。如果要连接整数或浮点数数组,它们必须先使用 nf() 或 nfs() 转换成字符串。"
],
+ "returns": "字符串:连接后的字符串",
"params": {
"list": "数组:该连接的字符串",
"separator": "字符串:在个元素之间穿插的字符串"
- },
- "returns": "字符串:连接后的字符串"
+ }
},
"match": {
"description": [
- "这函数可被用来在一段文字上应用正则表达式,并将返回含有符合表达式的组合(在括号内的元素)的字符串数组。如果没找到任何匹配组合,将返回 null。如果正则表达式内没有定义任何组合,但有搜寻到匹配序列,将返回一个大小为 1 的数组(匹配的文字为数组的第一个元素)。 使用此函数时,先查看结果是否为 null。如果结果为 null,那表示该段文字没有匹配序列。如果有找到匹配序列,将返回一个数组。 如果正则表达式内有组合(由括号定义),那个别内容将会以数组的形式返回。正则表达式匹配返回的元素 [0] 将会是整个匹配的字符串,而匹配组合将从元素 [1] 开始(第一组为 [1]、第二组为 [2] 等)。"
+ "这函数可被用来在一段文字上应用正则表达式,并将返回含有符合表达式的组合(在括号内的元素)的字符串数组。如果没找到任何匹配组合,将返回 null。如果正则表达式内没有定义任何组合,但有搜寻到匹配序列,将返回一个大小为 1 的数组(匹配的文字为数组的第一个元素)。 使用此函数时,先查看结果是否为 null。如果结果为 null,那表示该段文字没有匹配序列。如果有找到匹配序列,将返回一个数组。 如果正则表达式内有组合(由括号定义),那个别内容将会以数组的形式返回。正则表达式匹配返回的元素 [0] 将会是整个匹配的字符串,而匹配组合将从元素 [1] 开始(第一组为 [1]、第二组为 [2] 等)。",
+ "",
+ ""
],
+ "returns": "数组:搜寻到的字符串数组",
"params": {
"str": "字符串:在此字符串内搜寻",
"regexp": "字符串:用于搜寻的正则表达式"
- },
- "returns": "数组:搜寻到的字符串数组"
+ }
},
"matchAll": {
"description": [
- "这函数可被用来在一段文字上应用正则表达式,并将返回含有符合表达式的组合(在括号内的元素)的二维字符串数组。如果没找到任何匹配组合,将返回 null。如果正则表达式内没有定义任何组合,但有搜寻到匹配序列,仍然将返回一个二维数组,但第二维度数组的大小将为一。 使用此函数时,先查看结果是否为 null。如果结果为 null,那表示该段文字没有匹配序列。如果有找到匹配序列,将返回一个二维数组。 如果正则表达式内有组合(由括号定义),那个别内容将会以数组的形式返回。假设有一个有计算其变量 i 的循环,正则表达式匹配返回的元素 [i][0] 将会是整个匹配的字符串,而匹配组合将从元素 [i][1] 开始(第一组为 [i][1]、第二组为 [i][2] 等)。"
+ "这函数可被用来在一段文字上应用正则表达式,并将返回含有符合表达式的组合(在括号内的元素)的二维字符串数组。如果没找到任何匹配组合,将返回 null。如果正则表达式内没有定义任何组合,但有搜寻到匹配序列,仍然将返回一个二维数组,但第二维度数组的大小将为一。 使用此函数时,先查看结果是否为 null。如果结果为 null,那表示该段文字没有匹配序列。如果有找到匹配序列,将返回一个二维数组。 如果正则表达式内有组合(由括号定义),那个别内容将会以数组的形式返回。假设有一个有计算其变量 i 的循环,正则表达式匹配返回的元素 [i][0] 将会是整个匹配的字符串,而匹配组合将从元素 [i][1] 开始(第一组为 [i][1]、第二组为 [i][2] 等)。",
+ "",
+ ""
],
+ "returns": "字符串[]:搜寻到的二维字符串数组",
"params": {
"str": "字符串:在此字符串内搜寻",
"regexp": "字符串:用于搜寻的正则表达式"
- },
- "returns": "字符串[]:搜寻到的二维字符串数组"
+ }
},
"nf": {
"description": [
"用于将数字格式化成字符串的辅助函数。此函数有两个版本:一个用于格式化浮点数,另一个用于格式化整数。参数 left 及 right 的值必须是正整数。"
],
+ "returns": "字符串:格式化后的字符串",
"params": {
"num": "数字|字符串:该格式化的数字",
"left": "整数|字符串:小数点左边的位数",
"right": "整数|字符串:小数点右边的位数",
- "UNKNOWN-PARAM-4": "数组:该格式化的数字"
- },
- "returns": "字符串:格式化后的字符串"
+ "nums": "数组:该格式化的数字"
+ }
},
"nfc": {
"description": [
"用于将数字格式化成字符串并在适当的地方添加逗号以示意 1000 位的辅助函数。此函数有两个版本:一个用于格式化整数,另一个用于格式化一数组的整数。参数 right 的值必须是正整数。"
],
+ "returns": "字符串:格式化后的字符串",
"params": {
"num": "数字|字符串:该格式化的数字",
"right": "整数|字符串:小数点左边的位数",
- "UNKNOWN-PARAM-3": "整数|字符串:小数点右边的位数",
- "UNKNOWN-PARAM-4": "数组:该格式化的数字"
- },
- "returns": "字符串:格式化后的字符串"
+ "nums": "数组:该格式化的数字"
+ }
},
"nfp": {
"description": [
"用于将数字格式化成字符串的辅助函数。与 nf() 相似但会在正数前加个 \"+\" 号而在负数前加个 \"-\" 号。此函数有两个版本:一个用于格式化浮点数,另一个用于格式化整数。参数 left 及 right 的值必须是正整数。"
],
+ "returns": "字符串:格式化后的字符串",
"params": {
"num": "数字|字符串:该格式化的数字",
"left": "整数|字符串:小数点右边的位数",
- "right": "数组:该格式化的数字"
- },
- "returns": "字符串:格式化后的字符串"
+ "right": "数组:该格式化的数字",
+ "nums": "Number[]: the Numbers to format"
+ }
},
"nfs": {
"description": [
"用于将数字格式化成字符串的辅助函数。与 nf() 相似但会在正数前加个 \" \"(空格)而在负数前加个 \"-\" 号。此函数有两个版本:一个用于格式化浮点数,另一个用于格式化整数。参数 left 及 right 的值必须是正整数。"
],
+ "returns": "字符串:格式化后的字符串",
"params": {
"num": "数字:该格式化的数字",
"left": "整数:小数点左边的位数",
"right": "整数:小数点右边的位数",
- "UNKNOWN-PARAM-4": "数组:该格式化的数字"
- },
- "returns": "字符串:格式化后的字符串"
+ "nums": "数组:该格式化的数字"
+ }
},
"split": {
"description": [
- "split() 函数映射到 String.split(),它使用一个字符或字符串为分隔号以将另一个字符串拆分成多个部分。delim 参数定义用于标示各个部分之间边界的字符或字符串。将返回一个含有各个部分的字符串数组。 splitTokens() 函数也与此函数相似,不过它将使用一系列字符以拆分字符串而不是使用特别定义的单一字符或字符串。"
+ "split() 函数映射到 String.split(),它使用一个字符或字符串为分隔号以将另一个字符串拆分成多个部分。delim 参数定义用于标示各个部分之间边界的字符或字符串。将返回一个含有各个部分的字符串数组。 splitTokens() 函数也与此函数相似,不过它将使用一系列字符以拆分字符串而不是使用特别定义的单一字符或字符串。",
+ ""
],
+ "returns": "字符串[]:字符串数组",
"params": {
"value": "字符串:还拆分的字符串",
"delim": "字符串:用于分隔资料的字符串"
- },
- "returns": "字符串[]:字符串数组"
+ }
},
"splitTokens": {
"description": [
- "splitTokens() 函数将在一个或多个字符(或 “tokens”)所标示的地方拆分一个字符串。delim 参数将定义用于标示各个部分之间边界的字符或字符串。 如果 delim 参数没有被定义,此函数将使用任何空白字符拆分。空白字符包括制表符(\\t)、换行符(\\n)、回车符(\\r)、新页符(\\f)及空格。"
+ "splitTokens() 函数将在一个或多个字符(或 “tokens”)所标示的地方拆分一个字符串。delim 参数将定义用于标示各个部分之间边界的字符或字符串。 如果 delim 参数没有被定义,此函数将使用任何空白字符拆分。空白字符包括制表符(\\t)、换行符(\\n)、回车符(\\r)、新页符(\\f)及空格。",
+ ""
],
+ "returns": "字符串[]:字符串数组",
"params": {
"value": "字符串:还拆分的字符串",
"delim": "字符串:用于分隔资料的字符串列"
- },
- "returns": "字符串[]:字符串数组"
+ }
},
"trim": {
"description": [
"从一个字符串的前端及后端删除空白字符。除了一般的空白字符如空格、回车及制表符之外,这函数也将删除 Unicode “nbsp” 字符。"
],
+ "returns": "字符串:修剪后的字符串",
"params": {
- "column": "字符串:该修剪的字符串",
- "UNKNOWN-PARAM-2": "数组:该修剪的字符串数组"
- },
- "returns": "字符串:修剪后的字符串"
+ "str": "字符串:该修剪的字符串",
+ "strs": "数组:该修剪的字符串数组"
+ }
},
- "camera": {
+ "day": {
"description": [
- "定义在一个三维绘图内相机的位置。此函数的行为与 gluLookAt 相似,不过它会覆盖原有的模型视图矩阵而不会在原有的模型视图上添加任何变形。当没有给予任何参数时,此函数将定义默认相机为 camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);"
+ "p5.js 将与您的电脑的时钟沟通,day() 函数将返回当天的日期天数在 1 - 31 的范围内。"
],
- "params": {
- "x": "数字:相机在 x 轴的位置",
- "y": "数字:相机在 y 轴的位置",
- "z": "数字:相机在 z 轴的位置",
- "centerX": "数字:代表绘图中心点的 x 坐标",
- "centerY": "数字:代表绘图中心点的 y 坐标",
- "centerZ": "数字:代表绘图中心点的 z 坐标",
- "upX": "数字:相机向上方向量的 x 分量",
- "upY": "数字:相机向上方向量的 y 分量",
- "upZ": "数字:相机向上方向量的 z 分量"
- },
- "returns": ""
+ "returns": "整数:当天的日期天数"
},
- "perspective": {
+ "hour": {
"description": [
- "定义透视相机。当没有给予任何参数时,此函数将定义默认相机为 perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) 其中 cameraZ 为 ((height/2.0) / tan(PI60.0/360.0));"
+ "p5.js 将与您的电脑的时钟沟通,hour() 函数将返回当时时间的小时数在 0 - 23 的范围内。"
],
- "params": {
- "fovy": "数字:相机视锥的垂直视野,使用角度模式单位定义视野底部到顶部的角度",
- "aspect": "数字:相机视锥的长宽比",
- "near": "数字:视锥近平面的长度",
- "far": "数字:视锥远平面的长度"
- },
- "returns": ""
- },
- "ortho": {
- "description": ["定义正射相机。"],
- "params": {
- "left": "数字:相机视锥的左平面",
- "right": "数字:相机视锥的右平面",
- "bottom": "数字:相机视锥的底平面",
- "top": "数字:相机视锥的顶平面",
- "near": "数字:相机视锥的近平面",
- "far": "数字:相机视锥的远平面"
- },
- "returns": ""
+ "returns": "整数:当时时间的小时数"
},
- "ambientLight": {
- "description": ["使用所定义的颜色创造一个环境光。"],
- "params": {
- "v1": "数字:红彩值或色调值,需在被定义的范围内",
- "v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
- "v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
- "alpha": "数字:",
- "UNKNOWN-PARAM-5": "字符串:颜色字符串",
- "UNKNOWN-PARAM-6": "数字:灰阶值",
- "UNKNOWN-PARAM-7": "数字[]:一个有红、绿、蓝及透明度值的数组",
- "UNKNOWN-PARAM-8": "p5.Color:环境光色"
- },
- "returns": ""
+ "minute": {
+ "description": [
+ "p5.js 将与您的电脑的时钟沟通,minute() 函数将返回当时时间的分钟数在 0 - 59 的范围内。"
+ ],
+ "returns": "整数:当时时间的分钟数"
},
- "directionalLight": {
- "description": ["使用所定义的颜色及方向创造一个定向光。"],
- "params": {
- "v1": "数字:红彩值或色调值,需在被定义的范围内",
- "v2": "数字:绿彩值或饱和度值",
- "v3": "数字:蓝彩值或亮度值",
- "x": "p5.Vector:光的方向",
- "y": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值",
- "z": "数字:x 轴方向",
- "UNKNOWN-PARAM-7": "数字:y 轴方向",
- "UNKNOWN-PARAM-8": "数字:z 轴方向"
- },
- "returns": ""
+ "millis": {
+ "description": [
+ "返回自程序开始以来的毫秒(一秒的一千分之一)数。这资料一般可用于定时事件及动画序列。"
+ ],
+ "returns": "整数:自程序开始以来的毫秒数"
},
- "pointLight": {
- "description": ["使用所定义的颜色及灯光位置创造一个点光源。"],
- "params": {
+ "month": {
+ "description": [
+ "p5.js 将与您的电脑的时钟沟通,month() 函数将返回当天的日期月数在 1 - 12 的范围内。"
+ ],
+ "returns": "整数:当时日期的月数"
+ },
+ "second": {
+ "description": [
+ "p5.js 将与您的电脑的时钟沟通,second() 函数将返回当时时间的秒数在 0 - 59 的范围内。"
+ ],
+ "returns": "整数:当时时间的秒数"
+ },
+ "year": {
+ "description": [
+ "p5.js 将与您的电脑的时钟沟通,year() 函数将返回当天的日期年数为一个整数(2014、2015、2016等等)。"
+ ],
+ "returns": "整数:当时日期的年数"
+ },
+ "plane": {
+ "description": [
+ "用给予的宽度和高度画一个平面。"
+ ],
+ "params": {
+ "width": "数字:平面的宽度",
+ "height": "数字:平面的高度",
+ "detailX": "整数:(可选)在 x 轴的三角形细分数",
+ "detailY": "整数:(可选)在 y 轴的三角形细分数"
+ }
+ },
+ "box": {
+ "description": [
+ "用给予的宽度、高度及深度画一个立方体。"
+ ],
+ "params": {
+ "width": "数字:立方体的宽度",
+ "Height": "数字:立方体的高度",
+ "depth": "数字:立方体的深度",
+ "detailX": "整数:(可选)在 x 轴的三角形细分数",
+ "detailY": "整数:(可选)在 y 轴的三角形细分数"
+ }
+ },
+ "sphere": {
+ "description": [
+ "用给予的半径画一个球形。",
+ ""
+ ],
+ "params": {
+ "radius": "数字:球形的半径",
+ "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
+ "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 16"
+ }
+ },
+ "cylinder": {
+ "description": [
+ "用给予的半径和高度画一个圆筒形。",
+ ""
+ ],
+ "params": {
+ "radius": "数字:表面的半径",
+ "height": "数字:圆筒形的高度",
+ "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
+ "detailY": "整数:y 轴分割的数量,越多分割几何形越平滑,默认值为 1",
+ "bottomCap": "布尔值:是否该画圆筒形的底部",
+ "topCap": "布尔值:是否该画圆筒形的顶部"
+ }
+ },
+ "cone": {
+ "description": [
+ "用给予的半径和高度画一个锥体形。",
+ ""
+ ],
+ "params": {
+ "radius": "数字:底部表面的半径",
+ "height": "数字:锥体形的高度",
+ "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24",
+ "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 1",
+ "cap": "布尔值:是否该画锥体形的底部"
+ }
+ },
+ "ellipsoid": {
+ "description": [
+ "用给予的半径画一个椭球形。",
+ ""
+ ],
+ "params": {
+ "radiusx": "数字:椭球形 x 轴的半径",
+ "radiusy": "数字:椭球形 y 轴的半径",
+ "radiusz": "数字:椭球形 z 轴的半径",
+ "detailX": "整数:分割的数量,越多分割几何形越平滑,默认值为 24。避免多于 150 的细节数量,因为它可能是浏览器停止运作。",
+ "detailY": "整数:分割的数量,越多分割几何形越平滑,默认值为 16。避免多于 150 的细节数量,因为它可能是浏览器停止运作。"
+ }
+ },
+ "torus": {
+ "description": [
+ "用给予的半径和管半径画一个圆环形。",
+ ""
+ ],
+ "params": {
+ "radius": "数字:整个圆环形的半径",
+ "tubeRadius": "数字:圆管的半径",
+ "detailX": "整数:x 轴分割的数量,越多分割几何形越平滑,默认值为 24。",
+ "detailY": "整数:y 轴分割的数量,越多分割几何形越平滑,默认值为 16。"
+ }
+ },
+ "orbitControl": {
+ "description": [
+ "Allows movement around a 3D sketch using a mouse or trackpad. Left-clicking and dragging will rotate the camera position about the center of the sketch, right-clicking and dragging will pan the camera position without rotation, and using the mouse wheel (scrolling) will move the camera closer or further from the center of the sketch. This function can be called with parameters dictating sensitivity to mouse movement along the X and Y axes. Calling this function without parameters is equivalent to calling orbitControl(1,1). To reverse direction of movement in either axis, enter a negative number for sensitivity."
+ ],
+ "params": {
+ "sensitivityX": "Number: (Optional) sensitivity to mouse movement along X axis",
+ "sensitivityY": "Number: (Optional) sensitivity to mouse movement along Y axis",
+ "sensitivityZ": "Number: (Optional) sensitivity to scroll movement along Z axis"
+ }
+ },
+ "debugMode": {
+ "description": [
+ "debugMode() helps visualize 3D space by adding a grid to indicate where the ‘ground’ is in a sketch and an axes icon which indicates the +X, +Y, and +Z directions. This function can be called without parameters to create a default grid and axes icon, or it can be called according to the examples above to customize the size and position of the grid and/or axes icon. The grid is drawn using the most recently set stroke color and weight. To specify these parameters, add a call to stroke() and strokeWeight() just before the end of the draw() loop. ",
+ "By default, the grid will run through the origin (0,0,0) of the sketch along the XZ plane and the axes icon will be offset from the origin. Both the grid and axes icon will be sized according to the current canvas size. Note that because the grid runs parallel to the default camera view, it is often helpful to use debugMode along with orbitControl to allow full view of the grid."
+ ],
+ "params": {
+ "mode": "Constant: either GRID or AXES",
+ "gridSize": "Number: (Optional) size of one side of the grid",
+ "gridDivisions": "Number: (Optional) number of divisions in the grid",
+ "xOff": "Number: (Optional) X axis offset from origin (0,0,0)",
+ "yOff": "Number: (Optional) Y axis offset from origin (0,0,0)",
+ "zOff": "Number: (Optional) Z axis offset from origin (0,0,0)",
+ "axesSize": "Number: (Optional) size of axes icon",
+ "gridXOff": "Number (Optional)",
+ "gridYOff": "Number (Optional)",
+ "gridZOff": "Number (Optional)",
+ "axesXOff": "Number (Optional)",
+ "axesYOff": "Number (Optional)",
+ "axesZOff": "Number (Optional)"
+ }
+ },
+ "noDebugMode": {
+ "description": [
+ "Turns off debugMode() in a 3D sketch."
+ ]
+ },
+ "ambientLight": {
+ "description": [
+ "使用所定义的颜色创造一个环境光。"
+ ],
+ "params": {
+ "v1": "数字:红彩值或色调值,需在被定义的范围内",
+ "v2": "数字:绿彩值或饱和度值,需在被定义的范围内",
+ "v3": "数字:蓝彩值或亮度值,需在被定义的范围内",
+ "alpha": "数字:",
+ "value": "字符串:颜色字符串",
+ "gray": "数字:灰阶值",
+ "values": "数字[]:一个有红、绿、蓝及透明度值的数组",
+ "color": "p5.Color:环境光色"
+ }
+ },
+ "specularColor": {
+ "description": [
+ "Set's the color of the specular highlight when using a specular material and specular light. ",
+ "This method can be combined with specularMaterial() and shininess() functions to set specular highlights. The default color is white, ie (255, 255, 255), which is used if this method is not called before specularMaterial(). If this method is called without specularMaterial(), There will be no effect. ",
+ "Note: specularColor is equivalent to the processing function lightSpecular ."
+ ],
+ "params": {
+ "v1": "Number: red or hue value relative to the current color range",
+ "v2": "Number: green or saturation value relative to the current color range",
+ "v3": "Number: blue or brightness value relative to the current color range",
+ "value": "String: a color string",
+ "gray": "Number: a gray value",
+ "values": "Number[]: an array containing the red,green,blue & and alpha components of the color",
+ "color": "p5.Color: the ambient light color"
+ }
+ },
+ "directionalLight": {
+ "description": [
+ "使用所定义的颜色及方向创造一个定向光。",
+ ""
+ ],
+ "params": {
+ "v1": "数字:红彩值或色调值,需在被定义的范围内",
+ "v2": "数字:绿彩值或饱和度值",
+ "v3": "数字:蓝彩值或亮度值",
+ "position": "p5.Vector:光的方向",
+ "color": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值",
+ "x": "数字:x 轴方向",
+ "y": "数字:y 轴方向",
+ "z": "数字:z 轴方向"
+ }
+ },
+ "pointLight": {
+ "description": [
+ "使用所定义的颜色及灯光位置创造一个点光源。",
+ ""
+ ],
+ "params": {
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值",
"v3": "数字:蓝彩值或亮度值",
"x": "数字:x 轴方向",
"y": "数字:y 轴方向",
"z": "数字:z 轴方向",
- "UNKNOWN-PARAM-7": "p5.Vector:光的方向",
- "UNKNOWN-PARAM-8": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
- },
- "returns": ""
+ "position": "p5.Vector:光的方向",
+ "color": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
+ }
+ },
+ "lights": {
+ "description": [
+ "Sets the default ambient and directional light. The defaults are ambientLight(128, 128, 128) and directionalLight(128, 128, 128, 0, 0, -1) . 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."
+ ]
+ },
+ "lightFalloff": {
+ "description": [
+ "Sets the falloff rates for point lights. It affects only the elements which are created after it in the code. The default value is lightFalloff(1.0, 0.0, 0.0), and the parameters are used to calculate the falloff with the following equation: ",
+ "d = distance from light position to vertex position ",
+ "falloff = 1 / (CONSTANT + d * LINEAR + ( d * d ) * QUADRATIC)"
+ ],
+ "params": {
+ "constant": "Number: constant value for determining falloff",
+ "linear": "Number: linear value for determining falloff",
+ "quadratic": "Number: quadratic value for determining falloff"
+ }
+ },
+ "spotLight": {
+ "description": [
+ "Creates a spotlight with a given color, position, direction of light, angle and concentration. Here, angle refers to the opening or aperture of the cone of the spotlight, and concentration is used to focus the light towards the center. Both angle and concentration are optional, but if you want to provide concentration, you will also have to specify the angle. ",
+ "A maximum of 5 spotLight can be active at one time"
+ ],
+ "params": {
+ "v1": "Number: red or hue value (depending on the current color mode),",
+ "v2": "Number: green or saturation value",
+ "v3": "Number: blue or brightness value",
+ "x": "Number: x axis position",
+ "y": "Number: y axis position",
+ "z": "Number: z axis position",
+ "rx": "Number: x axis direction of light",
+ "ry": "Number: y axis direction of light",
+ "rz": "Number: z axis direction of light",
+ "angle": "Number: (Optional) optional parameter for angle. Defaults to PI/3",
+ "conc": "Number: (Optional) optional parameter for concentration. Defaults to 100",
+ "color": "Number[]|String|p5.Color: color Array, CSS color string, or p5.Color value",
+ "position": "p5.Vector: the position of the light",
+ "direction": "p5.Vector: the direction of the light"
+ }
+ },
+ "noLights": {
+ "description": [
+ "This function will remove all the lights from the sketch for the subsequent materials rendered. It affects all the subsequent methods. Calls to lighting methods made after noLights() will re-enable lights in the sketch."
+ ]
+ },
+ "loadModel": {
+ "description": [
+ "从一个 OBJ 档案加载一个三维模型。 OBJ 格式的其中一个限制是它没有内建的大小值。这表示不同程式输出的模型可能有非常不同的大小。如果您的模型没被展示的话,请试着调用 loadModel() 并给予 normalized 参数“真”(true)值。这会将模型缩放成适合 p5 的大小。您也可以使用 scale() 函数对您的模型最后大小做与更多的调整。",
+ "",
+ "",
+ ""
+ ],
+ "returns": "p5.Geometry:p5.Geometry 物件",
+ "params": {
+ "path": "字符串:要加载的模型的路径",
+ "normalize": "布尔值:如果为真,在加载时将模型缩放成标准大小。",
+ "successCallback": "函数(p5.Geometry):此函数将在模型完成加载后被调用,将被给予该三维模型为参数。",
+ "failureCallback": "函数(Event):如果模型加载失败,此函数将被调用并给予错误事件(event)为参数。",
+ "fileType": "String: (Optional) The file extension of the model (.stl, .obj)."
+ }
+ },
+ "model": {
+ "description": [
+ "将一个三维模型渲染在荧幕上。"
+ ],
+ "params": {
+ "model": "p5.Geometry:要渲染的已加载的模型"
+ }
},
"loadShader": {
"description": [
- "从所定义的顶点及片断着色器文件路径加载自定的着色器。着色器是在背景异步加载的,因此此函数应该在 preload() 内使用。 现在为止有三种主要的着色器种类。只要相对的参数有在着色器内被定义,p5 将会自动提供相对的顶点、法线、颜色及灯光属性。"
+ "从所定义的顶点及片断着色器文件路径加载自定的着色器。着色器是在背景异步加载的,因此此函数应该在 preload() 内使用。 现在为止有三种主要的着色器种类。只要相对的参数有在着色器内被定义,p5 将会自动提供相对的顶点、法线、颜色及灯光属性。",
+ ""
],
+ "returns": "p5.Shader:由所定义的顶点及片断着色器所创造的着色器物件",
"params": {
"vertFilename": "字符串:存有顶点着色器源代码的文件的路径",
- "fragFilename": "字符串:存有片断着色器源代码的文件的路径"
- },
- "returns": "p5.Shader:由所定义的顶点及片断着色器所创造的着色器物件"
+ "fragFilename": "字符串:存有片断着色器源代码的文件的路径",
+ "callback": "Function: (Optional) callback to be executed after loadShader completes. On success, the Shader object is passed as the first argument.",
+ "errorCallback": "Function: (Optional) callback to be executed when an error occurs inside loadShader. On error, the error is passed as the first argument."
+ }
},
"createShader": {
- "description": [""],
+ "returns": "p5.Shader:由所定义的顶点及片断着色器所创造的着色器物件",
"params": {
"vertSrc": "字符串:顶点着色器的源代码",
"fragSrc": "字符串:片断着色器的源代码"
- },
- "returns": "p5.Shader:由所定义的顶点及片断着色器所创造的着色器物件"
+ }
},
"shader": {
"description": [
@@ -2526,11 +3300,15 @@
"s": "p5.Shader:欲用于渲染形状用的 p5.Shader"
}
},
+ "resetShader": {
+ "description": [
+ "This function restores the default shaders in WEBGL mode. Code that runs after resetShader() will not be affected by previously defined shaders. Should be run after shader() ."
+ ]
+ },
"normalMaterial": {
"description": [
"形状的法线材料。您可在此范例 查看所有可用的材料。"
- ],
- "returns": ""
+ ]
},
"texture": {
"description": [
@@ -2538,8 +3316,29 @@
],
"params": {
"tex": "p5.Image|p5.MediaElement|p5.Graphics:该渲染成纹理的二维图像"
- },
- "returns": ""
+ }
+ },
+ "textureMode": {
+ "description": [
+ "Sets the coordinate space for texture mapping. The default mode is IMAGE which refers to the actual coordinates of the image. NORMAL refers to a normalized space of values ranging from 0 to 1. This function only works in WEBGL mode. ",
+ "With IMAGE, if an image is 100 x 200 pixels, mapping the image onto the entire size of a quad would require the points (0,0) (100, 0) (100,200) (0,200). The same mapping in NORMAL is (0,0) (1,0) (1,1) (0,1)."
+ ],
+ "params": {
+ "mode": "Constant: either IMAGE or NORMAL"
+ }
+ },
+ "textureWrap": {
+ "description": [
+ "Sets the global texture wrapping mode. This controls how textures behave when their uv's go outside of the 0 - 1 range. There are three options: CLAMP, REPEAT, and MIRROR. ",
+ "CLAMP causes the pixels at the edge of the texture to extend to the bounds REPEAT causes the texture to tile repeatedly until reaching the bounds MIRROR works similarly to REPEAT but it flips the texture with every new tile ",
+ "REPEAT & MIRROR are only available if the texture is a power of two size (128, 256, 512, 1024, etc.). ",
+ "This method will affect all textures in your sketch until a subsequent textureWrap call is made. ",
+ "If only one argument is provided, it will be applied to both the horizontal and vertical axes."
+ ],
+ "params": {
+ "wrapX": "Constant: either CLAMP, REPEAT, or MIRROR",
+ "wrapY": "Constant: (Optional) either CLAMP, REPEAT, or MIRROR"
+ }
},
"ambientMaterial": {
"description": [
@@ -2549,94 +3348,4082 @@
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值",
"v3": "数字:蓝彩值或亮度值",
- "UNKNOWN-PARAM-4": "数字:透明度",
- "UNKNOWN-PARAM-5": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
- },
- "returns": ""
+ "color": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
+ }
+ },
+ "emissiveMaterial": {
+ "description": [
+ "Sets the emissive color of the material used for geometry drawn to the screen. This is a misnomer in the sense that the material does not actually emit light that effects surrounding polygons. Instead, it gives the appearance that the object is glowing. An emissive material will display at full strength even if there is no light for it to reflect."
+ ],
+ "params": {
+ "v1": "Number: gray value, red or hue value (depending on the current color mode),",
+ "v2": "Number: (Optional) green or saturation value",
+ "v3": "Number: (Optional) blue or brightness value",
+ "a": "Number: (Optional) opacity",
+ "color": "Number[]|String|p5.Color: color, color Array, or CSS color string"
+ }
},
"specularMaterial": {
"description": [
"使用所给予颜色定义形状的镜面材料。您可在此范例 查看所有可用的材料。"
],
"params": {
+ "gray": "Number: number specifying value between white and black.",
+ "alpha": "数字:透明度",
"v1": "数字:红彩值或色调值,需在被定义的范围内",
"v2": "数字:绿彩值或饱和度值",
"v3": "数字:蓝彩值或亮度值",
- "UNKNOWN-PARAM-4": "数字:透明度",
- "UNKNOWN-PARAM-5": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
- },
- "returns": ""
- }
- },
- "p5.RendererGL": {
- "returns": "p5: 该 p5 物件"
- },
- "p5.Shader": {
- "description": ["Clase Shader para el modo WEBGL"],
- "params": {
- "renderer": "p5.RendererGL: una instancia de p5.RendererGL que servirá de contexto GL para este nuevo p5.Shader",
- "vertSrc": "String: código fuente para el vertex shader (en forma de string)",
- "fragSrc": "String: código fuente para el fragment shader (en forma de string)"
+ "color": "数字[]|字符串|p5.Color:颜色数组、CSS 颜色字符串或 p5.Color 颜色值"
+ }
},
- "setUniform": {
+ "shininess": {
"description": [
- "Wrapper de las funciones gl.uniform. Como almacenamos información de uniform en el shader, la podemos usar para revisar los datos provistos y llamar a la función apropiada."
- ]
- }
- },
- "p5.Table": {
- "description": [
- "Los objetos Table almacenan datos con múltiples filas y columnas, tal como una hoja de cálculo tradicional. Los objetos Table pueden ser generados desde cero, dinámicamente, o usando datos desde un archivo existente."
- ],
- "params": {
- "rows": "Arreglo: un arreglo de objetos p5.TableRow"
- },
- "returns": "p5.Table: 该 p5 物件.Table generado"
- },
- "p5.TableRow": {
- "description": [
- "Un objeto TableRow representa una única fila de datos, grabados en columnas, de una tabla. Un objeto TableRow contiene tanto un arreglo ordenado, como un objeto JSON desordenado."
- ],
- "params": {
- "str": "String: opcional, puebla la fila con una serie de valores, separados por el separador",
- "separator": "String: por defecto, valores separados por coma (csv)"
+ "Sets the amount of gloss in the surface of shapes. Used in combination with specularMaterial() in setting the material properties of shapes. The default and minimum value is 1."
+ ],
+ "params": {
+ "shine": "Number: Degree of Shininess. Defaults to 1."
+ }
},
- "returns": "该 p5 物件"
- },
- "p5.XML": {
- "description": [
- "XML es una representación de un objeto XML, capaz de procesar código XML. Usa loadXML() para cargar archivos externos XML y crear objetos XML"
- ],
- "params": {
- "UNKNOWN-PARAM-1": "String:"
+ "camera": {
+ "description": [
+ "定义在一个三维绘图内相机的位置。此函数的行为与 gluLookAt 相似,不过它会覆盖原有的模型视图矩阵而不会在原有的模型视图上添加任何变形。当没有给予任何参数时,此函数将定义默认相机为 camera(0, 0, (height/2.0) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "x": "数字:相机在 x 轴的位置",
+ "y": "数字:相机在 y 轴的位置",
+ "z": "数字:相机在 z 轴的位置",
+ "centerX": "数字:代表绘图中心点的 x 坐标",
+ "centerY": "数字:代表绘图中心点的 y 坐标",
+ "centerZ": "数字:代表绘图中心点的 z 坐标",
+ "upX": "数字:相机向上方向量的 x 分量",
+ "upY": "数字:相机向上方向量的 y 分量",
+ "upZ": "数字:相机向上方向量的 z 分量"
+ }
},
- "returns": "p5.XML: 该 p5 物件.XML generado"
- },
- "p5.Vector": {
- "description": [
- "Una clase para describir un vector de dos o tres dimensiones, específicamente un vector euclideano (también conocido como geométrico). Un vector es una entidad que tiene tanto magnitud como dirección. El tipo de datos, sin embargo, graba los componentes del vector (x, y para 2D y x,y,z para 3D). La magnitud y la dirección pueden ser calculados con los métodos mag() y heading(). En muchos de los ejemplos de p5.js, verás que p5.Vector es usado para describir una posición, velocidad o aceleración. Por ejemplo, si consideras un rectángulo moviéndose a lo largo de la pantalla, en cada instante tiene una posición (un vector que apunta desde el origen hasta su ubicación), una velocidad(la tasa a la que la posición del objeto cambia por unidad de tiempo, expresada como vector), y aceleración (la tasa a la que la velocidad del objeto cambia por unidad de tiempo, expresada como vector). Como los vectores representan grupos de valores, no podemos simplemente usar las operaciones tradicionales de adición, multiplicación, etc. En vez de eso, necesitaremos hacer matemática de vectores, lo que es simplificado con los métodos dentro de la clase p5.Vector."
- ],
- "params": {
- "x": "Número: componente x del vector",
- "y": "Número: componente y del vector",
- "z": "Número: componente z del vector"
+ "perspective": {
+ "description": [
+ "定义透视相机。当没有给予任何参数时,此函数将定义默认相机为 perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ*10.0) 其中 cameraZ 为 ((height/2.0) / tan(PI60.0/360.0));",
+ ""
+ ],
+ "params": {
+ "fovy": "数字:相机视锥的垂直视野,使用角度模式单位定义视野底部到顶部的角度",
+ "aspect": "数字:相机视锥的长宽比",
+ "near": "数字:视锥近平面的长度",
+ "far": "数字:视锥远平面的长度"
+ }
},
- "returns": "该 p5 物件"
- },
- "p5.Font": {
- "description": ["Clase base para manipulación de tipografía"],
- "params": {
- "pInst": "物件:puntero a la instancia p5"
+ "ortho": {
+ "description": [
+ "定义正射相机。"
+ ],
+ "params": {
+ "left": "数字:相机视锥的左平面",
+ "right": "数字:相机视锥的右平面",
+ "bottom": "数字:相机视锥的底平面",
+ "top": "数字:相机视锥的顶平面",
+ "near": "数字:相机视锥的近平面",
+ "far": "数字:相机视锥的远平面"
+ }
},
- "returns": "该 p5 物件"
+ "frustum": {
+ "description": [
+ "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 visible; anything outside those planes is not visible. ",
+ "Setting the frustum changes the perspective of the scene being rendered. This can be achieved more simply in many cases by using perspective() ."
+ ],
+ "params": {
+ "left": "Number: (Optional) camera frustum left plane",
+ "right": "Number: (Optional) camera frustum right plane",
+ "bottom": "Number: (Optional) camera frustum bottom plane",
+ "top": "Number: (Optional) camera frustum top plane",
+ "near": "Number: (Optional) camera frustum near plane",
+ "far": "Number: (Optional) camera frustum far plane"
+ }
+ },
+ "createCamera": {
+ "description": [
+ "Creates a new p5.Camera object and tells the renderer to use that camera. Returns the p5.Camera object."
+ ],
+ "returns": "p5.Camera: The newly created camera object."
+ },
+ "setCamera": {
+ "description": [
+ "Sets rendererGL's current camera to a p5.Camera object. Allows switching between multiple cameras."
+ ],
+ "params": {
+ "cam": "p5.Camera: p5.Camera object"
+ }
+ },
+ "setAttributes": {
+ "description": [
+ "设置 WebGL 绘图环境的属性。这是调整 WebGL 渲染器的一个方法,可用于微调显示及性能。这函数应该在 setup() 内使用。可使用的属性为: alpha - 表示画布是否有透明度缓冲,默认为 true depth - 表示绘图缓冲是否有至少 16 bits 的深度缓冲 - 默认为 true stencil - 表示绘图缓冲是否有至少 8 bits 的模版缓冲 antialias - 表示是否应该执行抗锯齿,默认为 false premultipliedAlpha - 表示页面合成器将假设绘图缓冲存在着预乘透明值的颜色,默认为 false preserveDrawingBuffer - 如果为真缓冲区将不会被清空并将会保留现有的值直到它们被清空或被作者覆盖(注意 p5 在绘图循环将自动清空),默认为 true perPixelLighting - 如果为真,照明着色器将使用个别像素照明。默认为 false",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "params": {
+ "key": "字符串:属性名",
+ "value": "布尔值:属性的新值",
+ "obj": "物件:有键值对的物件"
+ }
+ },
+ "sampleRate": {
+ "description": [
+ "Returns a number representing the sample rate, in samples per second, of all sound objects in this audio context. It is determined by the sampling rate of your operating system's sound card, and it is not currently possile to change. It is often 44100, or twice the range of human hearing."
+ ],
+ "returns": "Number: samplerate samples per second"
+ },
+ "freqToMidi": {
+ "description": [
+ "Returns the closest MIDI note value for a given frequency."
+ ],
+ "returns": "Number: MIDI note value",
+ "params": {
+ "frequency": "Number: A freqeuncy, for example, the \"A\" above Middle C is 440Hz"
+ }
+ },
+ "midiToFreq": {
+ "description": [
+ "Returns the frequency value of a MIDI note value. General MIDI treats notes as integers where middle C is 60, C# is 61, D is 62 etc. Useful for generating musical frequencies with oscillators."
+ ],
+ "returns": "Number: Frequency value of the given MIDI note",
+ "params": {
+ "midiNote": "Number: The number of a MIDI note"
+ }
+ },
+ "soundFormats": {
+ "description": [
+ "List the SoundFile formats that you will include. LoadSound will search your directory for these extensions, and will pick a format that is compatable with the client's web browser. Here is a free online file converter."
+ ],
+ "params": {
+ "formats": "String: (Optional) i.e. 'mp3', 'wav', 'ogg'"
+ }
+ },
+ "getAudioContext": {
+ "description": [
+ "Returns the Audio Context for this sketch. Useful for users who would like to dig deeper into the Web Audio API . ",
+ "Some browsers require users to startAudioContext with a user gesture, such as touchStarted in the example below."
+ ],
+ "returns": "Object: AudioContext for this sketch"
+ },
+ "userStartAudio": {
+ "description": [
+ "It is not only a good practice to give users control over starting audio. This policy is enforced by many web browsers, including iOS and Google Chrome , which create the Web Audio API's Audio Context in a suspended state. ",
+ "In these browser-specific policies, sound will not play until a user interaction event (i.e. mousePressed()) explicitly resumes the AudioContext, or starts an audio node. This can be accomplished by calling start() on a p5.Oscillator, play() on a p5.SoundFile, or simply userStartAudio(). ",
+ "userStartAudio() starts the AudioContext on a user gesture. The default behavior will enable audio on any mouseUp or touchEnd event. It can also be placed in a specific interaction function, such as mousePressed() as in the example below. This method utilizes StartAudioContext , a library by Yotam Mann (MIT Licence, 2016)."
+ ],
+ "returns": "Promise: Returns a Promise that resolves when the AudioContext state is 'running'",
+ "params": {
+ "element(s)": "Element|Array: (Optional) This argument can be an Element, Selector String, NodeList, p5.Element, jQuery Element, or an Array of any of those.",
+ "callback": "Function: (Optional) Callback to invoke when the AudioContext has started"
+ }
+ },
+ "loadSound": {
+ "description": [
+ "loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter. Using a local server is recommended when loading external files."
+ ],
+ "returns": "SoundFile: Returns a p5.SoundFile",
+ "params": {
+ "path": "String|Array: Path to the sound file, or an array with paths to soundfiles in multiple formats i.e. ['sound.ogg', 'sound.mp3']. Alternately, accepts an object: either from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if there is an error loading the file.",
+ "whileLoading": "Function: (Optional) Name of a function to call while file is loading. This function will receive the percentage loaded so far, from 0.0 to 1.0."
+ }
+ },
+ "createConvolver": {
+ "description": [
+ "Create a p5.Convolver. Accepts a path to a soundfile that will be used to generate an impulse response."
+ ],
+ "returns": "p5.Convolver: ",
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call if loading is successful. The object will be passed in as the argument to the callback function.",
+ "errorCallback": "Function: (Optional) function to call if loading is not successful. A custom error will be passed in as the argument to the callback function."
+ }
+ },
+ "setBPM": {
+ "description": [
+ "Set the global tempo, in beats per minute, for all p5.Parts. This method will impact all active p5.Parts."
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ },
+ "saveSound": {
+ "description": [
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. For uploading audio to a server, use p5.SoundFile.saveBlob ."
+ ],
+ "params": {
+ "soundFile": "p5.SoundFile: p5.SoundFile that you wish to save",
+ "fileName": "String: name of the resulting .wav file."
+ }
+ }
+ },
+ "p5.Color": {
+ "description": [
+ "Each color stores the color mode and level maxes that was applied at the time of its construction. These are used to interpret the input arguments (at construction and later for that instance of color) and to format the output e.g. when saturation() is requested. ",
+ "Internally, we store an array representing the ideal RGBA values in floating point form, normalized from 0 to 1. From this we calculate the closest screen color (RGBA levels from 0 to 255) and expose this to the renderer. ",
+ "We also cache normalized, floating point components of the color in various representations as they are calculated. This is done to prevent repeating a conversion that has already been performed."
+ ],
+ "setRed": {
+ "description": [
+ "The setRed function sets the red component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "red": "Number: the new red value"
+ }
+ },
+ "setGreen": {
+ "description": [
+ "The setGreen function sets the green component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "green": "Number: the new green value"
+ }
+ },
+ "setBlue": {
+ "description": [
+ "The setBlue function sets the blue component of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "blue": "Number: the new blue value"
+ }
+ },
+ "setAlpha": {
+ "description": [
+ "The setAlpha function sets the transparency (alpha) value of a color. The range depends on your color mode, in the default RGB mode it's between 0 and 255."
+ ],
+ "params": {
+ "alpha": "Number: the new alpha value"
+ }
+ }
},
"p5.Element": {
"description": [
- "Clase base para todos los elementos añadidos al bosuqejo, incluyendo lienzo, buffers de gráficas, y otros elementos HTML. Los métodos en azul están incluidos en la funcionalidad base, los métodos en marrón son añadidos con la biblioteca p5.dom. No se ejecutan directamente, pero los objetos p5.Element son creados llamando a las funciones createCanvas(), createGraphics(), o en la biblioteca p5.dom, createDiv, createImg, createInput, etc."
+ "Base class for all elements added to a sketch, including canvas, graphics buffers, and other HTML elements. It is not called directly, but p5.Element objects are created by calling createCanvas , createGraphics , createDiv , createImg , createInput , etc."
],
"params": {
- "elt": "String: node DOM envolvente.",
- "pInst": "Objeto: puntero a instancia p5."
+ "elt": "String: DOM node that is wrapped",
+ "pInst": "P5: (Optional) pointer to p5 instance"
+ },
+ "elt": {
+ "description": [
+ "Underlying HTML element. All normal HTML methods can be called on this."
+ ]
+ },
+ "parent": {
+ "description": [
+ "Attaches the element to the parent specified. A way of setting the container for the element. Accepts either a string ID, DOM node, or p5.Element . If no arguments given, parent node is returned. For more ways to position the canvas, see the positioning the canvas wiki page."
+ ],
+ "params": {
+ "parent": "String|p5.Element|Object: the ID, DOM node, or p5.Element of desired parent element"
+ }
+ },
+ "id": {
+ "description": [
+ "Sets the ID of the element. If no ID argument is passed in, it instead returns the current ID of the element. Note that only one element can have a particular id in a page. The .class() function can be used to identify multiple elements with the same class name."
+ ],
+ "params": {
+ "id": "String: ID of the element"
+ }
+ },
+ "class": {
+ "description": [
+ "Adds given class to the element. If no class argument is passed in, it instead returns a string containing the current class(es) of the element."
+ ],
+ "params": {
+ "class": "String: class to add"
+ }
+ },
+ "mousePressed": {
+ "description": [
+ "The .mousePressed() function is called once after every time a mouse button is pressed over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is pressed over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "doubleClicked": {
+ "description": [
+ "The .doubleClicked() function is called once after every time a mouse button is pressed twice over the element. This can be used to attach element and action specific event listeners."
+ ],
+ "returns": "p5.Element: ",
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is double clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseWheel": {
+ "description": [
+ "The mouseWheel() function is called once after every time a mouse wheel is scrolled over the element. This can be used to attach element specific event listeners. ",
+ "The function accepts a callback function as argument which will be executed when the wheel event is triggered on the element, the callback function is passed one argument event. The event.deltaY property returns negative values if the mouse wheel is rotated up or away from the user and positive in the other direction. The event.deltaX does the same as event.deltaY except it reads the horizontal wheel scroll of the mouse wheel. ",
+ "On OS X with \"natural\" scrolling enabled, the event.deltaY values are reversed."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is scrolled over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseReleased": {
+ "description": [
+ "The mouseReleased() function is called once after every time a mouse button is released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is released over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseClicked": {
+ "description": [
+ "The .mouseClicked() function is called once after a mouse button is pressed and released over the element. Some mobile browsers may also trigger this event on a touch screen, if the user performs a quick tap.This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when mouse is clicked over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseMoved": {
+ "description": [
+ "The .mouseMoved() function is called once every time a mouse moves over the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOver": {
+ "description": [
+ "The .mouseOver() function is called once after every time a mouse moves onto the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves onto the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "mouseOut": {
+ "description": [
+ "The .mouseOut() function is called once after every time a mouse moves off the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a mouse moves off of an element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchStarted": {
+ "description": [
+ "The .touchStarted() function is called once after every time a touch is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch starts over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchMoved": {
+ "description": [
+ "The .touchMoved() function is called once after every time a touch move is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch moves over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "touchEnded": {
+ "description": [
+ "The .touchEnded() function is called once after every time a touch is registered. This can be used to attach element specific event listeners."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a touch ends over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragOver": {
+ "description": [
+ "The .dragOver() function is called once after every time a file is dragged over the element. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged over the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "dragLeave": {
+ "description": [
+ "The .dragLeave() function is called once after every time a dragged file leaves the element area. This can be used to attach an element specific event listener."
+ ],
+ "params": {
+ "fxn": "Function|Boolean: function to be fired when a file is dragged off the element. if false is passed instead, the previously firing function will no longer fire."
+ }
+ },
+ "addClass": {
+ "description": [
+ "Adds specified class to the element."
+ ],
+ "params": {
+ "class": "String: name of class to add"
+ }
+ },
+ "removeClass": {
+ "description": [
+ "Removes specified class from the element."
+ ],
+ "params": {
+ "class": "String: name of class to remove"
+ }
+ },
+ "hasClass": {
+ "description": [
+ "Checks if specified class already set to element"
+ ],
+ "returns": "Boolean: a boolean value if element has specified class",
+ "params": {
+ "c": "String: class name of class to check"
+ }
+ },
+ "toggleClass": {
+ "description": [
+ "Toggles element class"
+ ],
+ "params": {
+ "c": "String: class name to toggle"
+ }
+ },
+ "child": {
+ "description": [
+ "Attaches the element as a child to the parent specified. Accepts either a string ID, DOM node, or p5.Element . If no argument is specified, an array of children DOM nodes is returned."
+ ],
+ "returns": "Node[]: an array of child nodes",
+ "params": {
+ "child": "String|p5.Element: (Optional) the ID, DOM node, or p5.Element to add to the current element"
+ }
+ },
+ "center": {
+ "description": [
+ "Centers a p5 Element either vertically, horizontally, or both, relative to its parent or according to the body if the Element has no parent. If no argument is passed the Element is aligned both vertically and horizontally."
+ ],
+ "params": {
+ "align": "String: (Optional) passing 'vertical', 'horizontal' aligns element accordingly"
+ }
+ },
+ "html": {
+ "description": [
+ "If an argument is given, sets the inner HTML of the element, replacing any existing html. If true is included as a second argument, html is appended instead of replacing existing html. If no arguments are given, returns the inner HTML of the element."
+ ],
+ "returns": "String: the inner HTML of the element",
+ "params": {
+ "html": "String: (Optional) the HTML to be placed inside the element",
+ "append": "Boolean: (Optional) whether to append HTML to existing"
+ }
+ },
+ "position": {
+ "description": [
+ "Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window. Essentially, this sets position:absolute and left and top properties of style. If an optional third argument specifying position type is given, the x and y coordinates will be interpreted based on the positioning scheme . If no arguments given, the function returns the x and y position of the element. found documentation on how to be more specific with object type https://stackoverflow.com/questions/14714314/how-do-i-comment-object-literals-in-yuidoc "
+ ],
+ "returns": "Object: object of form { x: 0, y: 0 } containing the position of the element in an object",
+ "params": {
+ "x": "Number: (Optional) x-position relative to upper left of window (optional)",
+ "y": "Number: (Optional) y-position relative to upper left of window (optional)",
+ "positionType": "String: it can be static, fixed, relative, sticky, initial or inherit (optional)"
+ }
+ },
+ "style": {
+ "description": [
+ "Sets the given style (css) property (1st arg) of the element with the given value (2nd arg). If a single argument is given, .style() returns the value of the given property; however, if the single argument is given in css syntax ('text-align:center'), .style() sets the css appropriately."
+ ],
+ "returns": "String: value of property",
+ "params": {
+ "property": "String: property to be set",
+ "value": "String|p5.Color: value to assign to property"
+ }
+ },
+ "attribute": {
+ "description": [
+ "Adds a new attribute or changes the value of an existing attribute on the specified element. If no value is specified, returns the value of the given attribute, or null if attribute is not set."
+ ],
+ "returns": "String: value of attribute",
+ "params": {
+ "attr": "String: attribute to set",
+ "value": "String: value to assign to attribute"
+ }
+ },
+ "removeAttribute": {
+ "description": [
+ "Removes an attribute on the specified element."
+ ],
+ "params": {
+ "attr": "String: attribute to remove"
+ }
+ },
+ "value": {
+ "description": [
+ "Either returns the value of the element if no arguments given, or sets the value of the element."
+ ],
+ "returns": "String|Number: value of the element",
+ "params": {
+ "value": "String|Number"
+ }
+ },
+ "show": {
+ "description": [
+ "Shows the current element. Essentially, setting display:block for the style."
+ ]
+ },
+ "hide": {
+ "description": [
+ "Hides the current element. Essentially, setting display:none for the style."
+ ]
+ },
+ "size": {
+ "description": [
+ "Sets the width and height of the element. AUTO can be used to only adjust one dimension at a time. If no arguments are given, it returns the width and height of the element in an object. In case of elements which need to be loaded, such as images, it is recommended to call the function after the element has finished loading."
+ ],
+ "returns": "Object: the width and height of the element in an object",
+ "params": {
+ "w": "Number|Constant: width of the element, either AUTO, or a number",
+ "h": "Number|Constant: (Optional) height of the element, either AUTO, or a number"
+ }
+ },
+ "remove": {
+ "description": [
+ "Removes the element, stops all media streams, and deregisters all listeners."
+ ]
+ },
+ "drop": {
+ "description": [
+ "Registers a callback that gets called every time a file that is dropped on the element has been loaded. p5 will load every dropped file into memory and pass it as a p5.File object to the callback. Multiple files dropped at the same time will result in multiple calls to the callback. ",
+ "You can optionally pass a second callback which will be registered to the raw drop event. The callback will thus be provided the original DragEvent . Dropping multiple files at the same time will trigger the second callback once per drop, whereas the first callback will trigger for each loaded file."
+ ],
+ "params": {
+ "callback": "Function: callback to receive loaded file, called for each file dropped.",
+ "fxn": "Function: (Optional) callback triggered once when files are dropped with the drop event."
+ }
+ }
+ },
+ "p5.Graphics": {
+ "description": [
+ "Thin wrapper around a renderer, to be used for creating a graphics buffer object. Use this class if you need to draw into an off-screen graphics buffer. The two parameters define the width and height in pixels. The fields and methods for this class are extensive, but mirror the normal drawing API for p5."
+ ],
+ "params": {
+ "w": "Number: width",
+ "h": "Number: height",
+ "renderer": "Constant: the renderer to use, either P2D or WEBGL",
+ "pInst": "P5: (Optional) pointer to p5 instance"
+ },
+ "reset": {
+ "description": [
+ "Resets certain values such as those modified by functions in the Transform category and in the Lights category that are not automatically reset with graphics buffer objects. Calling this in draw() will copy the behavior of the standard canvas."
+ ]
+ },
+ "remove": {
+ "description": [
+ "Removes a Graphics object from the page and frees any resources associated with it."
+ ]
+ }
+ },
+ "p5.Renderer": {
+ "description": [
+ "Main graphics and rendering context, as well as the base API implementation for p5.js \"core\". To be used as the superclass for Renderer2D and Renderer3D classes, respectively."
+ ],
+ "params": {
+ "elt": "String: DOM node that is wrapped",
+ "pInst": "P5: (Optional) pointer to p5 instance",
+ "isMainCanvas": "Boolean: (Optional) whether we're using it as main canvas"
+ }
+ },
+ "JSON": {
+ "stringify": {
+ "description": [
+ "From the MDN entry : The JSON.stringify() method converts a JavaScript object or value to a JSON string ."
+ ],
+ "params": {
+ "object": "Object: :Javascript object that you would like to convert to JSON"
+ }
+ }
+ },
+ "console": {
+ "log": {
+ "description": [
+ "Prints a message to your browser's web console. When using p5, you can use print and console.log interchangeably. ",
+ "The console is opened differently depending on which browser you are using. Here are links on how to open the console in Firefox , Chrome , Edge , and Safari . With the online p5 editor the console is embedded directly in the page underneath the code editor. ",
+ "From the MDN entry : The Console method log() outputs a message to the web console. The message may be a single string (with optional substitution values), or it may be any one or more JavaScript objects ."
+ ],
+ "params": {
+ "message": "String|Expression|Object: :Message that you would like to print to the console"
+ }
+ }
+ },
+ "p5.TypedDict": {
+ "description": [
+ "Base class for all p5.Dictionary types. Specifically typed Dictionary classes inherit from this class."
+ ],
+ "size": {
+ "description": [
+ "Returns the number of key-value pairs currently stored in the Dictionary."
+ ],
+ "returns": "Integer: the number of key-value pairs in the Dictionary"
+ },
+ "hasKey": {
+ "description": [
+ "Returns true if the given key exists in the Dictionary, otherwise returns false."
+ ],
+ "returns": "Boolean: whether that key exists in Dictionary",
+ "params": {
+ "key": "Number|String: that you want to look up"
+ }
+ },
+ "get": {
+ "description": [
+ "Returns the value stored at the given key."
+ ],
+ "returns": "Number|String: the value stored at that key",
+ "params": {
+ "the": "Number|String: key you want to access"
+ }
+ },
+ "set": {
+ "description": [
+ "Updates the value associated with the given key in case it already exists in the Dictionary. Otherwise a new key-value pair is added."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String"
+ }
+ },
+ "create": {
+ "description": [
+ "Creates a new key-value pair in the Dictionary."
+ ],
+ "params": {
+ "key": "Number|String",
+ "value": "Number|String",
+ "obj": "Object: key/value pair"
+ }
+ },
+ "clear": {
+ "description": [
+ "Removes all previously stored key-value pairs from the Dictionary."
+ ]
+ },
+ "remove": {
+ "description": [
+ "Removes the key-value pair stored at the given key from the Dictionary."
+ ],
+ "params": {
+ "key": "Number|String: for the pair to remove"
+ }
+ },
+ "print": {
+ "description": [
+ "Logs the set of items currently stored in the Dictionary to the console."
+ ]
+ },
+ "saveTable": {
+ "description": [
+ "Converts the Dictionary into a CSV file for local download."
+ ]
+ },
+ "saveJSON": {
+ "description": [
+ "Converts the Dictionary into a JSON file for local download."
+ ]
+ }
+ },
+ "p5.StringDict": {
+ "description": [
+ "A simple Dictionary class for Strings."
+ ]
+ },
+ "p5.NumberDict": {
+ "description": [
+ "A simple Dictionary class for Numbers."
+ ],
+ "add": {
+ "description": [
+ "Add the given number to the value currently stored at the given key. The sum then replaces the value previously stored in the Dictionary."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to add to",
+ "Number": "Number: to add to the value"
+ }
+ },
+ "sub": {
+ "description": [
+ "Subtract the given number from the value currently stored at the given key. The difference then replaces the value previously stored in the Dictionary."
+ ],
+ "params": {
+ "Key": "Number: for the value you wish to subtract from",
+ "Number": "Number: to subtract from the value"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the given number with the value currently stored at the given key. The product then replaces the value previously stored in the Dictionary."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to multiply",
+ "Amount": "Number: to multiply the value by"
+ }
+ },
+ "div": {
+ "description": [
+ "Divide the given number with the value currently stored at the given key. The quotient then replaces the value previously stored in the Dictionary."
+ ],
+ "params": {
+ "Key": "Number: for value you wish to divide",
+ "Amount": "Number: to divide the value by"
+ }
+ },
+ "minValue": {
+ "description": [
+ "Return the lowest number currently stored in the Dictionary."
+ ],
+ "returns": "Number: "
+ },
+ "maxValue": {
+ "description": [
+ "Return the highest number currently stored in the Dictionary."
+ ],
+ "returns": "Number: "
+ },
+ "minKey": {
+ "description": [
+ "Return the lowest key currently used in the Dictionary."
+ ],
+ "returns": "Number: "
+ },
+ "maxKey": {
+ "description": [
+ "Return the highest key currently used in the Dictionary."
+ ],
+ "returns": "Number: "
+ }
+ },
+ "p5.MediaElement": {
+ "description": [
+ "Extends p5.Element to handle audio and video. In addition to the methods of p5.Element , it also contains methods for controlling media. It is not called directly, but p5.MediaElement s are created by calling createVideo , createAudio , and createCapture ."
+ ],
+ "params": {
+ "elt": "String: DOM node that is wrapped"
+ },
+ "src": {
+ "description": [
+ "Path to the media element source."
+ ],
+ "returns": "String: src"
+ },
+ "play": {
+ "description": [
+ "Play an HTML5 media element."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stops an HTML5 media element (sets current time to zero)."
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pauses an HTML5 media element."
+ ]
+ },
+ "loop": {
+ "description": [
+ "Set 'loop' to true for an HTML5 media element, and starts playing."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "Set 'loop' to false for an HTML5 media element. Element will stop when it reaches the end."
+ ]
+ },
+ "autoplay": {
+ "description": [
+ "Set HTML5 media element to autoplay or not. If no argument is specified, by default it will autoplay."
+ ],
+ "params": {
+ "shouldAutoplay": "Boolean: whether the element should autoplay"
+ }
+ },
+ "volume": {
+ "description": [
+ "Sets volume for this HTML5 media element. If no argument is given, returns the current volume."
+ ],
+ "returns": "Number: current volume",
+ "params": {
+ "val": "Number: volume between 0.0 and 1.0"
+ }
+ },
+ "speed": {
+ "description": [
+ "If no arguments are given, returns the current playback speed of the element. The speed parameter sets the speed where 2.0 will play the element twice as fast, 0.5 will play at half the speed, and -1 will play the element in normal speed in reverse.(Note that not all browsers support backward playback and even if they do, playback might not be smooth.)"
+ ],
+ "returns": "Number: current playback speed of the element",
+ "params": {
+ "speed": "Number: speed multiplier for element playback"
+ }
+ },
+ "time": {
+ "description": [
+ "If no arguments are given, returns the current time of the element. If an argument is given the current time of the element is set to it."
+ ],
+ "returns": "Number: current time (in seconds)",
+ "params": {
+ "time": "Number: time to jump to (in seconds)"
+ }
+ },
+ "duration": {
+ "description": [
+ "Returns the duration of the HTML5 media element."
+ ],
+ "returns": "Number: duration"
+ },
+ "onended": {
+ "description": [
+ "Schedule an event to be called when the audio or video element reaches the end. If the element is looping, this will not be called. The element is passed in as the argument to the onended callback."
+ ],
+ "params": {
+ "callback": "Function: function to call when the soundfile has ended. The media element will be passed in as the argument to the callback."
+ }
+ },
+ "connect": {
+ "description": [
+ "Send the audio output of this element to a specified audioNode or p5.sound object. If no element is provided, connects to p5's main output. That connection is established when this method is first called. All connections are removed by the .disconnect() method. ",
+ "This method is meant to be used with the p5.sound.js addon library."
+ ],
+ "params": {
+ "audioNode": "AudioNode|Object: AudioNode from the Web Audio API, or an object from the p5.sound library"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all Web Audio routing, including to main output. This is useful if you want to re-route the output through audio effects, for example."
+ ]
+ },
+ "showControls": {
+ "description": [
+ "Show the default MediaElement controls, as determined by the web browser."
+ ]
+ },
+ "hideControls": {
+ "description": [
+ "Hide the default mediaElement controls."
+ ]
+ },
+ "addCue": {
+ "description": [
+ "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. ",
+ "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. ",
+ "Time will be passed as the first parameter to the callback function, and param will be the second parameter."
+ ],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
+ "params": {
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "Remove a callback based on its ID. The ID is returned by the addCue method."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "Remove all of the callbacks that had originally been scheduled via the addCue method."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ }
+ },
+ "p5.File": {
+ "description": [
+ "Base class for a file. Used for Element.drop and createFileInput."
+ ],
+ "params": {
+ "file": "File: File that is wrapped"
+ },
+ "file": {
+ "description": [
+ "Underlying File object. All normal File methods can be called on this."
+ ]
+ },
+ "type": {
+ "description": [
+ "File type (image, text, etc.)"
+ ]
+ },
+ "subtype": {
+ "description": [
+ "File subtype (usually the file extension jpg, png, xml, etc.)"
+ ]
+ },
+ "name": {
+ "description": [
+ "File name"
+ ]
+ },
+ "size": {
+ "description": [
+ "File size"
+ ]
+ },
+ "data": {
+ "description": [
+ "URL string containing either image data, the text contents of the file or a parsed object if file is JSON and p5.XML if XML"
+ ]
+ }
+ },
+ "p5.Image": {
+ "description": [
+ "Creates a new p5.Image . A p5.Image is a canvas backed representation of an image. ",
+ "p5 can display .gif, .jpg and .png images. Images may be displayed in 2D and 3D space. Before an image is used, it must be loaded with the loadImage() function. The p5.Image class contains fields for the width and height of the image, as well as an array called pixels[] that contains the values for every pixel in the image. ",
+ "The methods described below allow easy access to the image's pixels and alpha channel and simplify the process of compositing. ",
+ "Before using the pixels[] array, be sure to use the loadPixels() method on the image to make sure that the pixel data is properly loaded."
+ ],
+ "params": {
+ "width": "Number",
+ "height": "Number"
+ },
+ "width": {
+ "description": [
+ "Image width."
+ ]
+ },
+ "height": {
+ "description": [
+ "Image height."
+ ]
+ },
+ "pixels": {
+ "description": [
+ "Array containing the values for all the pixels in the display window. These values are numbers. This array is the size (include an appropriate factor for pixelDensity) of the display window x4, representing the R, G, B, A values in order for each pixel, moving from left to right across each row, then down each column. Retina and other high density displays may have more pixels (by a factor of pixelDensity^2). For example, if the image is 100x100 pixels, there will be 40,000. With pixelDensity = 2, there will be 160,000. The first four values (indices 0-3) in the array will be the R, G, B, A values of the pixel at (0, 0). The second four values (indices 4-7) will contain the R, G, B, A values of the pixel at (1, 0). More generally, to set values for a pixel at (x, y): let d = pixelDensity(); for (let i = 0; i < d; i++) { for (let j = 0; j < d; j++) { // loop over index = 4 * ((y * d + j) * width * d + (x * d + i)); pixels[index] = r; pixels[index+1] = g; pixels[index+2] = b; pixels[index+3] = a; } } ",
+ "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."
+ ]
+ },
+ "loadPixels": {
+ "description": [
+ "Loads the pixels data for this image into the [pixels] attribute."
+ ]
+ },
+ "updatePixels": {
+ "description": [
+ "Updates the backing canvas for this image with the contents of the [pixels] array. ",
+ "If this image is an animated GIF then the pixels will be updated in the frame that is currently displayed."
+ ],
+ "params": {
+ "x": "Integer: x-offset of the target update area for the underlying canvas",
+ "y": "Integer: y-offset of the target update area for the underlying canvas",
+ "w": "Integer: height of the target update area for the underlying canvas",
+ "h": "Integer: height of the target update area for the underlying canvas"
+ }
+ },
+ "get": {
+ "description": [
+ "Get a region of pixels from an image. ",
+ "If no params are passed, the whole image is returned. If x and y are the only params passed a single pixel is extracted. If all params are passed a rectangle region is extracted and a p5.Image is returned."
+ ],
+ "returns": "p5.Image: the rectangle p5.Image ",
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "w": "Number: width",
+ "h": "Number: height"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the color of a single pixel or write an image into this p5.Image . ",
+ "Note that for a large number of pixels this will be slower than directly manipulating the pixels array and then calling updatePixels() ."
+ ],
+ "params": {
+ "x": "Number: x-coordinate of the pixel",
+ "y": "Number: y-coordinate of the pixel",
+ "a": "Number|Number[]|Object: grayscale value | pixel array | a p5.Color | image to copy"
+ }
+ },
+ "resize": {
+ "description": [
+ "Resize the image to a new width and height. To make the image scale proportionally, use 0 as the value for the wide or high parameter. For instance, to make the width of an image 150 pixels, and change the height using the same proportion, use resize(150, 0)."
+ ],
+ "params": {
+ "width": "Number: the resized image width",
+ "height": "Number: the resized image height"
+ }
+ },
+ "copy": {
+ "description": [
+ "Copies a region of pixels from one image to another. If no srcImage is specified this is used as the source. If the source and destination regions aren't the same size, it will automatically resize source pixels to fit the specified target region."
+ ],
+ "params": {
+ "srcImage": "p5.Image|p5.Element: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height"
+ }
+ },
+ "mask": {
+ "description": [
+ "Masks part of an image from displaying by loading another image and using its alpha channel as an alpha channel for this image."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image"
+ }
+ },
+ "filter": {
+ "description": [
+ "Applies an image filter to a p5.Image "
+ ],
+ "params": {
+ "filterType": "Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter",
+ "filterParam": "Number: (Optional) an optional parameter unique to each filter, see above"
+ }
+ },
+ "blend": {
+ "description": [
+ "Copies a region of pixels from one image to another, using a specified blend mode to do the operation."
+ ],
+ "params": {
+ "srcImage": "p5.Image: source image",
+ "sx": "Integer: X coordinate of the source's upper left corner",
+ "sy": "Integer: Y coordinate of the source's upper left corner",
+ "sw": "Integer: source image width",
+ "sh": "Integer: source image height",
+ "dx": "Integer: X coordinate of the destination's upper left corner",
+ "dy": "Integer: Y coordinate of the destination's upper left corner",
+ "dw": "Integer: destination image width",
+ "dh": "Integer: destination image height",
+ "blendMode": "Constant: the blend mode. either BLEND, DARKEST, LIGHTEST, DIFFERENCE, MULTIPLY, EXCLUSION, SCREEN, REPLACE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN, ADD or NORMAL. Available blend modes are: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity http://blogs.adobe.com/webplatform/2013/01/28/blending-features-in-canvas/ "
+ }
+ },
+ "save": {
+ "description": [
+ "Saves the image to a file and force the browser to download it. Accepts two strings for filename and file extension Supports png (default), jpg, and gif Note that the file will only be downloaded as an animated GIF if the p5.Image was loaded from a GIF file."
+ ],
+ "params": {
+ "filename": "String: give your file a name",
+ "extension": "String: 'png' or 'jpg'"
+ }
+ },
+ "reset": {
+ "description": [
+ "Starts an animated GIF over at the beginning state."
+ ]
+ },
+ "getCurrentFrame": {
+ "description": [
+ "Gets the index for the frame that is currently visible in an animated GIF."
+ ],
+ "returns": "Number: The index for the currently displaying frame in animated GIF"
+ },
+ "setFrame": {
+ "description": [
+ "Sets the index of the frame that is currently visible in an animated GIF"
+ ],
+ "params": {
+ "index": "Number: the index for the frame that should be displayed"
+ }
+ },
+ "numFrames": {
+ "description": [
+ "Returns the number of frames in an animated GIF"
+ ],
+ "returns": "Number: "
+ },
+ "play": {
+ "description": [
+ "Plays an animated GIF that was paused with pause() "
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pauses an animated GIF."
+ ]
+ },
+ "delay": {
+ "description": [
+ "Changes the delay between frames in an animated GIF. There is an optional second parameter that indicates an index for a specific frame that should have its delay modified. If no index is given, all frames will have the new delay."
+ ],
+ "params": {
+ "d": "Number: the amount in milliseconds to delay between switching frames",
+ "index": "Number: (Optional) the index of the frame that should have the new delay value {optional}"
+ }
+ }
+ },
+ "p5.PrintWriter": {
+ "params": {
+ "filename": "String",
+ "extension": "String (Optional)"
+ },
+ "write": {
+ "description": [
+ "Writes data to the PrintWriter stream"
+ ],
+ "params": {
+ "data": "Array: all data to be written by the PrintWriter"
+ }
+ },
+ "print": {
+ "description": [
+ "Writes data to the PrintWriter stream, and adds a new line at the end"
+ ],
+ "params": {
+ "data": "Array: all data to be printed by the PrintWriter"
+ }
+ },
+ "clear": {
+ "description": [
+ "Clears the data already written to the PrintWriter object"
+ ]
+ },
+ "close": {
+ "description": [
+ "Closes the PrintWriter"
+ ]
+ }
+ },
+ "p5.Table": {
+ "description": [
+ "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."
+ ],
+ "params": {
+ "rows": "p5.TableRow[]: (Optional) An array of p5.TableRow objects"
+ },
+ "columns": {
+ "description": [
+ "An array containing the names of the columns in the table, if the \"header\" the table is loaded with the \"header\" parameter."
+ ]
+ },
+ "rows": {
+ "description": [
+ "An array containing the p5.TableRow objects that make up the rows of the table. The same result as calling getRows() "
+ ]
+ },
+ "addRow": {
+ "description": [
+ "Use addRow() to add a new row of data to a p5.Table object. By default, an empty row is created. Typically, you would store a reference to the new row in a TableRow object (see newRow in the example above), and then set individual values using set() . ",
+ "If a p5.TableRow object is included as a parameter, then that row is duplicated and added to the table."
+ ],
+ "returns": "p5.TableRow: the row that was added",
+ "params": {
+ "row": "p5.TableRow: (Optional) row to be added to the table"
+ }
+ },
+ "removeRow": {
+ "description": [
+ "Removes a row from the table object."
+ ],
+ "params": {
+ "id": "Integer: ID number of the row to remove"
+ }
+ },
+ "getRow": {
+ "description": [
+ "Returns a reference to the specified p5.TableRow . The reference can then be used to get and set values of the selected row."
+ ],
+ "returns": "p5.TableRow: p5.TableRow object",
+ "params": {
+ "rowID": "Integer: ID number of the row to get"
+ }
+ },
+ "getRows": {
+ "description": [
+ "Gets all rows from the table. Returns an array of p5.TableRow s."
+ ],
+ "returns": "p5.TableRow[]: Array of p5.TableRow s"
+ },
+ "findRow": {
+ "description": [
+ "Finds the first row in the Table that contains the value provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title."
+ ],
+ "returns": "p5.TableRow: ",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "findRows": {
+ "description": [
+ "Finds the rows in the Table that contain the value provided, and returns references to those rows. Returns an Array, so for must be used to iterate through all the rows, as shown in the example above. The column to search may be specified by either its ID or title."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "value": "String: The value to match",
+ "column": "Integer|String: ID number or title of the column to search"
+ }
+ },
+ "matchRow": {
+ "description": [
+ "Finds the first row in the Table that matches the regular expression provided, and returns a reference to that row. Even if multiple rows are possible matches, only the first matching row is returned. The column to search may be specified by either its ID or title."
+ ],
+ "returns": "p5.TableRow: TableRow object",
+ "params": {
+ "regexp": "String|RegExp: The regular expression to match",
+ "column": "String|Integer: The column ID (number) or title (string)"
+ }
+ },
+ "matchRows": {
+ "description": [
+ "Finds the rows in the Table that match the regular expression provided, and returns references to those rows. Returns an array, so for must be used to iterate through all the rows, as shown in the example. The column to search may be specified by either its ID or title."
+ ],
+ "returns": "p5.TableRow[]: An Array of TableRow objects",
+ "params": {
+ "regexp": "String: The regular expression to match",
+ "column": "String|Integer: (Optional) The column ID (number) or title (string)"
+ }
+ },
+ "getColumn": {
+ "description": [
+ "Retrieves all values in the specified column, and returns them as an array. The column may be specified by either its ID or title."
+ ],
+ "returns": "Array: Array of column values",
+ "params": {
+ "column": "String|Number: String or Number of the column to return"
+ }
+ },
+ "clearRows": {
+ "description": [
+ "Removes all rows from a Table. While all rows are removed, columns and column titles are maintained."
+ ]
+ },
+ "addColumn": {
+ "description": [
+ "Use addColumn() to add a new column to a Table object. Typically, you will want to specify a title, so the column may be easily referenced later by name. (If no title is specified, the new column's title will be null.)"
+ ],
+ "params": {
+ "title": "String: (Optional) title of the given column"
+ }
+ },
+ "getColumnCount": {
+ "description": [
+ "Returns the total number of columns in a Table."
+ ],
+ "returns": "Integer: Number of columns in this table"
+ },
+ "getRowCount": {
+ "description": [
+ "Returns the total number of rows in a Table."
+ ],
+ "returns": "Integer: Number of rows in this table"
+ },
+ "removeTokens": {
+ "description": [
+ "Removes any of the specified characters (or \"tokens\"). ",
+ "If no column is specified, then the values in all columns and rows are processed. A specific column may be referenced by either its ID or title."
+ ],
+ "params": {
+ "chars": "String: String listing characters to be removed",
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "trim": {
+ "description": [
+ "Trims leading and trailing whitespace, such as spaces and tabs, from String table values. If no column is specified, then the values in all columns and rows are trimmed. A specific column may be referenced by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: (Optional) Column ID (number) or name (string)"
+ }
+ },
+ "removeColumn": {
+ "description": [
+ "Use removeColumn() to remove an existing column from a Table object. The column to be removed may be identified by either its title (a String) or its index value (an int). removeColumn(0) would remove the first column, removeColumn(1) would remove the second column, and so on."
+ ],
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "set": {
+ "description": [
+ "Stores a value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String|Number: value to assign"
+ }
+ },
+ "setNum": {
+ "description": [
+ "Stores a Float value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "Number: value to assign"
+ }
+ },
+ "setString": {
+ "description": [
+ "Stores a String value in the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: column ID (Number) or title (String)",
+ "value": "String: value to assign"
+ }
+ },
+ "get": {
+ "description": [
+ "Retrieves a value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Retrieves a Float value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "Retrieves a String value from the Table's specified row and column. The row is specified by its ID, while the column may be specified by either its ID or title."
+ ],
+ "returns": "String: ",
+ "params": {
+ "row": "Integer: row ID",
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getObject": {
+ "description": [
+ "Retrieves all table data and returns as an object. If a column name is passed in, each row object will be stored with that attribute as its title."
+ ],
+ "returns": "Object: ",
+ "params": {
+ "headerColumn": "String: (Optional) Name of the column which should be used to title each row object (optional)"
+ }
+ },
+ "getArray": {
+ "description": [
+ "Retrieves all table data and returns it as a multidimensional array."
+ ],
+ "returns": "Array: "
+ }
+ },
+ "p5.TableRow": {
+ "description": [
+ "A TableRow object represents a single row of data values, stored in columns, from a table. ",
+ "A Table Row contains both an ordered array, and an unordered JSON object."
+ ],
+ "params": {
+ "str": "String: (Optional) optional: populate the row with a string of values, separated by the separator",
+ "separator": "String: (Optional) comma separated values (csv) by default"
+ },
+ "set": {
+ "description": [
+ "Stores a value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number: The value to be stored"
+ }
+ },
+ "setNum": {
+ "description": [
+ "Stores a Float value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "Number|String: The value to be stored as a Float"
+ }
+ },
+ "setString": {
+ "description": [
+ "Stores a String value in the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "params": {
+ "column": "String|Integer: Column ID (Number) or Title (String)",
+ "value": "String|Number|Boolean|Object: The value to be stored as a String"
+ }
+ },
+ "get": {
+ "description": [
+ "Retrieves a value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "String|Number: ",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Retrieves a Float value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "Number: Float Floating point number",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ },
+ "getString": {
+ "description": [
+ "Retrieves an String value from the TableRow's specified column. The column may be specified by either its ID or title."
+ ],
+ "returns": "String: String",
+ "params": {
+ "column": "String|Integer: columnName (string) or ID (number)"
+ }
+ }
+ },
+ "p5.XML": {
+ "description": [
+ "XML is a representation of an XML object, able to parse XML code. Use loadXML() to load external XML files and create XML objects."
+ ],
+ "getParent": {
+ "description": [
+ "Gets a copy of the element's parent. Returns the parent as another p5.XML object."
+ ],
+ "returns": "p5.XML: element parent"
+ },
+ "getName": {
+ "description": [
+ "Gets the element's full name, which is returned as a String."
+ ],
+ "returns": "String: the name of the node"
+ },
+ "setName": {
+ "description": [
+ "Sets the element's name, which is specified as a String."
+ ],
+ "params": {
+ "the": "String: new name of the node"
+ }
+ },
+ "hasChildren": {
+ "description": [
+ "Checks whether or not the element has any children, and returns the result as a boolean."
+ ],
+ "returns": "Boolean: "
+ },
+ "listChildren": {
+ "description": [
+ "Get the names of all of the element's children, and returns the names as an array of Strings. This is the same as looping through and calling getName() on each child element individually."
+ ],
+ "returns": "String[]: names of the children of the element"
+ },
+ "getChildren": {
+ "description": [
+ "Returns all of the element's children as an array of p5.XML objects. When the name parameter is specified, then it will return all children that match that name."
+ ],
+ "returns": "p5.XML[]: children of the element",
+ "params": {
+ "name": "String: (Optional) element name"
+ }
+ },
+ "getChild": {
+ "description": [
+ "Returns the first of the element's children that matches the name parameter or the child of the given index.It returns undefined if no matching child is found."
+ ],
+ "returns": "p5.XML: ",
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "addChild": {
+ "description": [
+ "Appends a new child to the element. The child can be specified with either a String, which will be used as the new tag's name, or as a reference to an existing p5.XML object. A reference to the newly created child is returned as an p5.XML object."
+ ],
+ "params": {
+ "node": "p5.XML: a p5.XML Object which will be the child to be added"
+ }
+ },
+ "removeChild": {
+ "description": [
+ "Removes the element specified by name or index."
+ ],
+ "params": {
+ "name": "String|Integer: element name or index"
+ }
+ },
+ "getAttributeCount": {
+ "description": [
+ "Counts the specified element's number of attributes, returned as an Number."
+ ],
+ "returns": "Integer: "
+ },
+ "listAttributes": {
+ "description": [
+ "Gets all of the specified element's attributes, and returns them as an array of Strings."
+ ],
+ "returns": "String[]: an array of strings containing the names of attributes"
+ },
+ "hasAttribute": {
+ "description": [
+ "Checks whether or not an element has the specified attribute."
+ ],
+ "returns": "Boolean: true if attribute found else false",
+ "params": {
+ "the": "String: attribute to be checked"
+ }
+ },
+ "getNum": {
+ "description": [
+ "Returns an attribute value of the element as an Number. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, the value 0 is returned."
+ ],
+ "returns": "Number: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "getString": {
+ "description": [
+ "Returns an attribute value of the element as an String. If the defaultValue parameter is specified and the attribute doesn't exist, then defaultValue is returned. If no defaultValue is specified and the attribute doesn't exist, null is returned."
+ ],
+ "returns": "String: ",
+ "params": {
+ "name": "String: the non-null full name of the attribute",
+ "defaultValue": "Number: (Optional) the default value of the attribute"
+ }
+ },
+ "setAttribute": {
+ "description": [
+ "Sets the content of an element's attribute. The first parameter specifies the attribute name, while the second specifies the new content."
+ ],
+ "params": {
+ "name": "String: the full name of the attribute",
+ "value": "Number|String|Boolean: the value of the attribute"
+ }
+ },
+ "getContent": {
+ "description": [
+ "Returns the content of an element. If there is no such content, defaultValue is returned if specified, otherwise null is returned."
+ ],
+ "returns": "String: ",
+ "params": {
+ "defaultValue": "String: (Optional) value returned if no content is found"
+ }
+ },
+ "setContent": {
+ "description": [
+ "Sets the element's content."
+ ],
+ "params": {
+ "text": "String: the new content"
+ }
+ },
+ "serialize": {
+ "description": [
+ "Serializes the element into a string. This function is useful for preparing the content to be sent over a http request or saved to file."
+ ],
+ "returns": "String: Serialized string of the element"
+ }
+ },
+ "p5.Vector": {
+ "description": [
+ "A class to describe a two or three dimensional vector, specifically a Euclidean (also known as geometric) vector. A vector is an entity that has both magnitude and direction. The datatype, however, stores the components of the vector (x, y for 2D, and x, y, z for 3D). The magnitude and direction can be accessed via the methods mag() and heading() . ",
+ "In many of the p5.js examples, you will see p5.Vector used to describe a position, velocity, or acceleration. For example, if you consider a rectangle moving across the screen, at any given instant it has a position (a vector that points from the origin to its location), a velocity (the rate at which the object's position changes per time unit, expressed as a vector), and acceleration (the rate at which the object's velocity changes per time unit, expressed as a vector). ",
+ "Since vectors represent groupings of values, we cannot simply use traditional addition/multiplication/etc. Instead, we'll need to do some \"vector\" math, which is made easy by the methods inside the p5.Vector class."
+ ],
+ "params": {
+ "x": "Number: (Optional) x component of the vector",
+ "y": "Number: (Optional) y component of the vector",
+ "z": "Number: (Optional) z component of the vector"
+ },
+ "x": {
+ "description": [
+ "The x component of the vector"
+ ]
+ },
+ "y": {
+ "description": [
+ "The y component of the vector"
+ ]
+ },
+ "z": {
+ "description": [
+ "The z component of the vector"
+ ]
+ },
+ "set": {
+ "description": [
+ "Sets the x, y, and z component of the vector using two or three separate variables, the data from a p5.Vector , or the values from a float array."
+ ],
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Number[]: the vector to set"
+ }
+ },
+ "copy": {
+ "description": [
+ "Gets a copy of the vector, returns a p5.Vector object."
+ ],
+ "returns": "p5.Vector: the copy of the p5.Vector object"
+ },
+ "add": {
+ "description": [
+ "Adds x, y, and z components to a vector, adds one vector to another, or adds two independent vectors together. The version of the method that adds two vectors together is a static method and returns a p5.Vector , the others acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to be added",
+ "y": "Number: (Optional) the y component of the vector to be added",
+ "z": "Number: (Optional) the z component of the vector to be added",
+ "value": "p5.Vector|Number[]: the vector to add",
+ "v1": "p5.Vector: a p5.Vector to add",
+ "v2": "p5.Vector: a p5.Vector to add",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "rem": {
+ "description": [
+ "Gives remainder of a vector when it is divided by another vector. See examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of divisor vector",
+ "y": "Number: the y component of divisor vector",
+ "z": "Number: the z component of divisor vector",
+ "value": "p5.Vector | Number[]: divisor vector",
+ "v1": "p5.Vector: dividend p5.Vector ",
+ "v2": "p5.Vector: divisor p5.Vector "
+ }
+ },
+ "sub": {
+ "description": [
+ "Subtracts x, y, and z components from a vector, subtracts one vector from another, or subtracts two independent vectors. The version of the method that subtracts two vectors is a static method and returns a p5.Vector , the other acts directly on the vector. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "x": "Number: the x component of the vector to subtract",
+ "y": "Number: (Optional) the y component of the vector to subtract",
+ "z": "Number: (Optional) the z component of the vector to subtract",
+ "value": "p5.Vector|Number[]: the vector to subtract",
+ "v1": "p5.Vector: a p5.Vector to subtract from",
+ "v2": "p5.Vector: a p5.Vector to subtract",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiplies the vector by a scalar, multiplies the x, y, and z components from a vector, or multiplies the x, y, and z components of two independent vectors. When multiplying a vector by a scalar, the x, y, and z components of the vector are all multiplied by the scalar. When multiplying a vector by a vector, the x, y, z components of both vectors are multiplied by each other (for example, with two vectors a and b: a.x * b.x, a.y * b.y, a.z * b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "n": "Number: The number to multiply with the vector",
+ "x": "Number: The number to multiply with the x component of the vector",
+ "y": "Number: The number to multiply with the y component of the vector",
+ "z": "Number: (Optional) The number to multiply with the z component of the vector",
+ "arr": "Number[]: The array to multiply with the components of the vector",
+ "v": "p5.Vector: The vector to multiply with the components of the original vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "div": {
+ "description": [
+ "Divides the vector by a scalar, divides a vector by the x, y, and z arguments, or divides the x, y, and z components of two vectors against each other. When dividing a vector by a scalar, the x, y, and z components of the vector are all divided by the scalar. When dividing a vector by a vector, the x, y, z components of the source vector are treated as the dividend, and the x, y, z components of the argument is treated as the divisor (for example with two vectors a and b: a.x / b.x, a.y / b.y, a.z / b.z). The static version of this method creates a new p5.Vector while the non static version acts on the vector directly. Additionally, you may provide arguments to this function as an array. See the examples for more context."
+ ],
+ "params": {
+ "n": "Number: The number to divide the vector by",
+ "x": "Number: The number to divide with the x component of the vector",
+ "y": "Number: The number to divide with the y component of the vector",
+ "z": "Number: (Optional) The number to divide with the z component of the vector",
+ "arr": "Number[]: The array to divide the components of the vector by",
+ "v": "p5.Vector: The vector to divide the components of the original vector by",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)",
+ "v0": "p5.Vector",
+ "v1": "p5.Vector"
+ }
+ },
+ "mag": {
+ "description": [
+ "Calculates the magnitude (length) of the vector and returns the result as a float (this is simply the equation sqrt(x*x + y*y + z*z).)"
+ ],
+ "returns": "Number: magnitude of the vector",
+ "params": {
+ "vecT": "p5.Vector: the vector to return the magnitude of"
+ }
+ },
+ "magSq": {
+ "description": [
+ "Calculates the squared magnitude of the vector and returns the result as a float (this is simply the equation (x*x + y*y + z*z) .) Faster if the real length is not required in the case of comparing vectors, etc."
+ ],
+ "returns": "Number: squared magnitude of the vector"
+ },
+ "dot": {
+ "description": [
+ "Calculates the dot product of two vectors. The version of the method that computes the dot product of two independent vectors is a static method. See the examples for more context."
+ ],
+ "returns": "Number: the dot product",
+ "params": {
+ "x": "Number: x component of the vector",
+ "y": "Number: (Optional) y component of the vector",
+ "z": "Number: (Optional) z component of the vector",
+ "value": "p5.Vector: value component of the vector or a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "cross": {
+ "description": [
+ "Calculates and returns a vector composed of the cross product between two vectors. Both the static and non static methods return a new p5.Vector . See the examples for more context."
+ ],
+ "returns": "p5.Vector: p5.Vector composed of cross product",
+ "params": {
+ "v": "p5.Vector: p5.Vector to be crossed",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "dist": {
+ "description": [
+ "Calculates the Euclidean distance between two points (considering a point as a vector object)."
+ ],
+ "returns": "Number: the distance",
+ "params": {
+ "v": "p5.Vector: the x, y, and z coordinates of a p5.Vector ",
+ "v1": "p5.Vector: the first p5.Vector ",
+ "v2": "p5.Vector: the second p5.Vector "
+ }
+ },
+ "normalize": {
+ "description": [
+ "Normalize the vector to length 1 (make it a unit vector)."
+ ],
+ "returns": "p5.Vector: normalized p5.Vector "
+ },
+ "limit": {
+ "description": [
+ "Limit the magnitude of this vector to the value used for the max parameter."
+ ],
+ "params": {
+ "max": "Number: the maximum magnitude for the vector"
+ }
+ },
+ "setMag": {
+ "description": [
+ "Set the magnitude of this vector to the value used for the len parameter."
+ ],
+ "params": {
+ "len": "Number: the new length for this vector"
+ }
+ },
+ "heading": {
+ "description": [
+ "Calculate the angle of rotation for this vector(only 2D vectors). p5.Vectors created using createVector() will take the current angleMode into consideration, and give the angle in radians or degree accordingly."
+ ],
+ "returns": "Number: the angle of rotation"
+ },
+ "rotate": {
+ "description": [
+ "Rotate the vector by an angle (only 2D vectors), magnitude remains the same"
+ ],
+ "params": {
+ "angle": "Number: the angle of rotation"
+ }
+ },
+ "angleBetween": {
+ "description": [
+ "Calculates and returns the angle (in radians) between two vectors."
+ ],
+ "returns": "Number: the angle between (in radians)",
+ "params": {
+ "value": "p5.Vector: the x, y, and z components of a p5.Vector "
+ }
+ },
+ "lerp": {
+ "description": [
+ "Linear interpolate the vector to another vector"
+ ],
+ "params": {
+ "x": "Number: the x component",
+ "y": "Number: the y component",
+ "z": "Number: the z component",
+ "amt": "Number: the amount of interpolation; some value between 0.0 (old vector) and 1.0 (new vector). 0.9 is very near the new vector. 0.5 is halfway in between.",
+ "v": "p5.Vector: the p5.Vector to lerp to",
+ "v1": "p5.Vector",
+ "v2": "p5.Vector",
+ "target": "p5.Vector: (Optional) the vector to receive the result (Optional)"
+ }
+ },
+ "reflect": {
+ "description": [
+ "Reflect the incoming vector about a normal to a line in 2D, or about a normal to a plane in 3D This method acts on the vector directly"
+ ],
+ "params": {
+ "surfaceNormal": "p5.Vector: the p5.Vector to reflect about, will be normalized by this method"
+ }
+ },
+ "array": {
+ "description": [
+ "Return a representation of this vector as a float array. This is only for temporary use. If used in any other fashion, the contents should be copied by using the p5.Vector.copy() method to copy into your own array."
+ ],
+ "returns": "Number[]: an Array with the 3 values"
+ },
+ "equals": {
+ "description": [
+ "Equality check against a p5.Vector "
+ ],
+ "returns": "Boolean: whether the vectors are equals",
+ "params": {
+ "x": "Number: (Optional) the x component of the vector",
+ "y": "Number: (Optional) the y component of the vector",
+ "z": "Number: (Optional) the z component of the vector",
+ "value": "p5.Vector|Array: the vector to compare"
+ }
+ },
+ "fromAngle": {
+ "description": [
+ "Make a new 2D vector from an angle"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "angle": "Number: the desired angle, in radians (unaffected by angleMode )",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "fromAngles": {
+ "description": [
+ "Make a new 3D vector from a pair of ISO spherical angles"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object",
+ "params": {
+ "theta": "Number: the polar angle, in radians (zero is up)",
+ "phi": "Number: the azimuthal angle, in radians (zero is out of the screen)",
+ "length": "Number: (Optional) the length of the new vector (defaults to 1)"
+ }
+ },
+ "random2D": {
+ "description": [
+ "Make a new 2D unit vector from a random angle"
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ },
+ "random3D": {
+ "description": [
+ "Make a new random 3D unit vector."
+ ],
+ "returns": "p5.Vector: the new p5.Vector object"
+ }
+ },
+ "p5.Font": {
+ "description": [
+ "Base class for font handling"
+ ],
+ "params": {
+ "pInst": "P5: (Optional) pointer to p5 instance"
+ },
+ "font": {
+ "description": [
+ "Underlying opentype font implementation"
+ ]
+ },
+ "textBounds": {
+ "description": [
+ "Returns a tight bounding box for the given text string using this font"
+ ],
+ "returns": "Object: a rectangle object with properties: x, y, w, h",
+ "params": {
+ "line": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: (Optional) font size to use (optional) Default is 12.",
+ "options": "Object: (Optional) opentype options (optional) opentype fonts contains alignment and baseline options. Default is 'LEFT' and 'alphabetic'"
+ }
+ },
+ "textToPoints": {
+ "description": [
+ "Computes an array of points following the path for specified text"
+ ],
+ "returns": "Array: an array of points, each with x, y, alpha (the path angle)",
+ "params": {
+ "txt": "String: a line of text",
+ "x": "Number: x-position",
+ "y": "Number: y-position",
+ "fontSize": "Number: font size to use (optional)",
+ "options": "Object: (Optional) an (optional) object that can contain: sampleFactor - the ratio of path-length to number of samples (default=.1); higher values yield more points and are therefore more precise simplifyThreshold - if set to a non-zero value, collinear points will be be removed from the polygon; the value represents the threshold angle to use when determining whether two edges are collinear"
+ }
+ }
+ },
+ "p5.Camera": {
+ "description": [
+ "This class describes a camera for use in p5's WebGL mode . It contains camera position, orientation, and projection information necessary for rendering a 3D scene. ",
+ "New p5.Camera objects can be made through the createCamera() function and controlled through the methods described below. A camera created in this way will use a default position in the scene and a default perspective projection until these properties are changed through the various methods available. It is possible to create multiple cameras, in which case the current camera can be set through the setCamera() method. ",
+ "Note: The methods below operate in two coordinate systems: the 'world' coordinate system describe positions in terms of their relationship to the origin along the X, Y and Z axes whereas the camera's 'local' coordinate system describes positions from the camera's point of view: left-right, up-down, and forward-backward. The move() method, for instance, moves the camera along its own axes, whereas the setPosition() method sets the camera's position in world-space."
+ ],
+ "params": {
+ "rendererGL": "RendererGL: instance of WebGL renderer"
+ },
+ "perspective": {
+ "description": [
+ "Sets a perspective projection for a p5.Camera object and sets parameters for that projection according to perspective() syntax."
+ ]
+ },
+ "ortho": {
+ "description": [
+ "Sets an orthographic projection for a p5.Camera object and sets parameters for that projection according to ortho() syntax."
+ ]
+ },
+ "frustum": {},
+ "pan": {
+ "description": [
+ "Panning rotates the camera view to the left and right."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "tilt": {
+ "description": [
+ "Tilting rotates the camera view up and down."
+ ],
+ "params": {
+ "angle": "Number: amount to rotate camera in current angleMode units. Greater than 0 values rotate counterclockwise (to the left)."
+ }
+ },
+ "lookAt": {
+ "description": [
+ "Reorients the camera to look at a position in world space."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ },
+ "camera": {
+ "description": [
+ "Sets a camera's position and orientation. This is equivalent to calling camera() on a p5.Camera object."
+ ]
+ },
+ "move": {
+ "description": [
+ "Move camera along its local axes while maintaining current camera orientation."
+ ],
+ "params": {
+ "x": "Number: amount to move along camera's left-right axis",
+ "y": "Number: amount to move along camera's up-down axis",
+ "z": "Number: amount to move along camera's forward-backward axis"
+ }
+ },
+ "setPosition": {
+ "description": [
+ "Set camera position in world-space while maintaining current camera orientation."
+ ],
+ "params": {
+ "x": "Number: x position of a point in world space",
+ "y": "Number: y position of a point in world space",
+ "z": "Number: z position of a point in world space"
+ }
+ }
+ },
+ "p5.Geometry": {
+ "description": [
+ "p5 Geometry class"
+ ],
+ "params": {
+ "detailX": "Integer: (Optional) number of vertices on horizontal surface",
+ "detailY": "Integer: (Optional) number of vertices on horizontal surface",
+ "callback": "Function: (Optional) function to call upon object instantiation."
+ },
+ "computeFaces": {
+ "description": [
+ "computes faces for geometry objects based on the vertices."
+ ]
+ },
+ "computeNormals": {
+ "description": [
+ "computes smooth normals per vertex as an average of each face."
+ ]
+ },
+ "averageNormals": {
+ "description": [
+ "Averages the vertex normals. Used in curved surfaces"
+ ]
+ },
+ "averagePoleNormals": {
+ "description": [
+ "Averages pole normals. Used in spherical primitives"
+ ]
+ },
+ "normalize": {
+ "description": [
+ "Modifies all vertices to be centered within the range -100 to 100."
+ ]
+ }
+ },
+ "p5.Shader": {
+ "description": [
+ "Shader class for WEBGL Mode"
+ ],
+ "params": {
+ "renderer": "p5.RendererGL: an instance of p5.RendererGL that will provide the GL context for this new p5.Shader",
+ "vertSrc": "String: source code for the vertex shader (as a string)",
+ "fragSrc": "String: source code for the fragment shader (as a string)"
+ },
+ "setUniform": {
+ "description": [
+ "Wrapper around gl.uniform functions. As we store uniform info in the shader we can use that to do type checking on the supplied data and call the appropriate function."
+ ],
+ "params": {
+ "uniformName": "String: the name of the uniform in the shader program",
+ "data": "Object|Number|Boolean|Number[]: the data to be associated with that uniform; type varies (could be a single numerical value, array, matrix, or texture / sampler reference)"
+ }
+ }
+ },
+ "p5.sound": {
+ "getMasterVolume": {
+ "description": [
+ "Returns a number representing the master amplitude (volume) for sound in this sketch."
+ ],
+ "returns": "Number: Master amplitude (volume) for sound in this sketch. Should be between 0.0 (silence) and 1.0."
+ },
+ "masterVolume": {
+ "description": [
+ "Scale the output of all sound in this sketch Scaled between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal. ",
+ "How This Works : When you load the p5.sound module, it creates a single instance of p5sound. All sound objects in this module output to p5sound before reaching your computer's output. So if you change the amplitude of p5sound, it impacts all of the sound in this module. ",
+ "If no value is provided, returns a Web Audio API Gain Node"
+ ],
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
+ },
+ "soundOut": {
+ "description": [
+ "p5.soundOut is the p5.sound master output. It sends output to the destination of this window's web audio context. It contains Web Audio API nodes including a dyanmicsCompressor (.limiter), and Gain Nodes for .input and .output."
+ ]
+ }
+ },
+ "p5.Effect": {
+ "description": [
+ "Effect is a base class for audio effects in p5. This module handles the nodes and methods that are common and useful for current and future effects. ",
+ "This class is extended by p5.Distortion , p5.Compressor , p5.Delay , p5.Filter , p5.Reverb ."
+ ],
+ "params": {
+ "ac": "Object: (Optional) Reference to the audio context of the p5 object",
+ "input": "AudioNode: (Optional) Gain Node effect wrapper",
+ "output": "AudioNode: (Optional) Gain Node effect wrapper",
+ "_drywet": "Object: (Optional) Tone.JS CrossFade node (defaults to value: 1)",
+ "wet": "AudioNode: (Optional) Effects that extend this class should connect to the wet signal to this gain node, so that dry and wet signals are mixed properly."
+ },
+ "amp": {
+ "description": [
+ "Set the output volume of the filter."
+ ],
+ "params": {
+ "vol": "Number: (Optional) amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts until rampTime",
+ "tFromNow": "Number: (Optional) schedule this event to happen in tFromNow seconds"
+ }
+ },
+ "chain": {
+ "description": [
+ "Link effects together in a chain Example usage: filter.chain(reverb, delay, panner); May be used with an open-ended number of arguments"
+ ],
+ "params": {
+ "arguments": "Object: (Optional) Chain together multiple sound objects"
+ }
+ },
+ "drywet": {
+ "description": [
+ "Adjust the dry/wet value."
+ ],
+ "params": {
+ "fade": "Number: (Optional) The desired drywet value (0 - 1.0)"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.js-sound, Web Audio Node, or use signal to control an AudioParam"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Filter": {
+ "description": [
+ "A p5.Filter uses a Web Audio Biquad Filter to filter the frequency response of an input source. Subclasses include: p5.LowPass : Allows frequencies below the cutoff frequency to pass through, and attenuates frequencies above the cutoff. p5.HighPass : The opposite of a lowpass filter. p5.BandPass : Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range. ",
+ "The .res() method controls either width of the bandpass, or resonance of the low/highpass cutoff frequency. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "params": {
+ "type": "String: (Optional) 'lowpass' (default), 'highpass', 'bandpass'"
+ },
+ "biquadFilter": {
+ "description": [
+ "The p5.Filter is built with a Web Audio BiquadFilter Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Filter an audio signal according to a set of filter parameters."
+ ],
+ "params": {
+ "Signal": "Object: An object that outputs audio",
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance/Width of the filter frequency from 0.001 to 1000"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the frequency and the resonance of the filter."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in Hz, from 10 to 22050",
+ "res": "Number: (Optional) Resonance (Q) from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set the filter frequency, in Hz, from 10 to 22050 (the range of human hearing, although in reality most people hear in a narrower range)."
+ ],
+ "returns": "Number: value Returns the current frequency value",
+ "params": {
+ "freq": "Number: Filter Frequency",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "res": {
+ "description": [
+ "Controls either width of a bandpass frequency, or the resonance of a low/highpass cutoff frequency."
+ ],
+ "returns": "Number: value Returns the current res value",
+ "params": {
+ "res": "Number: Resonance/Width of filter freq from 0.001 to 1000",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "gain": {
+ "description": [
+ "Controls the gain attribute of a Biquad Filter. This is distinctly different from .amp() which is inherited from p5.Effect .amp() controls the volume via the output gain node p5.Filter.gain() controls the gain parameter of a Biquad Filter node."
+ ],
+ "returns": "Number: Returns the current or updated gain value",
+ "params": {
+ "gain": "Number"
+ }
+ },
+ "toggle": {
+ "description": [
+ "Toggle function. Switches between the specified type and allpass"
+ ],
+ "returns": "Boolean: [Toggle value]"
+ },
+ "setType": {
+ "description": [
+ "Set the type of a p5.Filter. Possible types include: \"lowpass\" (default), \"highpass\", \"bandpass\", \"lowshelf\", \"highshelf\", \"peaking\", \"notch\", \"allpass\"."
+ ],
+ "params": {
+ "t": "String"
+ }
+ }
+ },
+ "p5.LowPass": {
+ "description": [
+ "Constructor: new p5.LowPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('lowpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.HighPass": {
+ "description": [
+ "Constructor: new p5.HighPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('highpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.BandPass": {
+ "description": [
+ "Constructor: new p5.BandPass() Filter. This is the same as creating a p5.Filter and then calling its method setType('bandpass'). See p5.Filter for methods."
+ ]
+ },
+ "p5.Oscillator": {
+ "description": [
+ "Creates a signal that oscillates between -1.0 and 1.0. By default, the oscillation takes the form of a sinusoidal shape ('sine'). Additional types include 'triangle', 'sawtooth' and 'square'. The frequency defaults to 440 oscillations per second (440Hz, equal to the pitch of an 'A' note). ",
+ "Set the type of oscillation with setType(), or by instantiating a specific oscillator: p5.SinOsc , p5.TriOsc , p5.SqrOsc , or p5.SawOsc . "
+ ],
+ "params": {
+ "freq": "Number: (Optional) frequency defaults to 440Hz",
+ "type": "String: (Optional) type of oscillator. Options: 'sine' (default), 'triangle', 'sawtooth', 'square'"
+ },
+ "start": {
+ "description": [
+ "Start an oscillator. ",
+ "Starting an oscillator on a user gesture will enable audio in browsers that have a strict autoplay policy, including Chrome and most mobile devices. See also: userStartAudio()."
+ ],
+ "params": {
+ "time": "Number: (Optional) startTime in seconds from now.",
+ "frequency": "Number: (Optional) frequency in Hz."
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop an oscillator. Accepts an optional parameter to determine how long (in seconds from now) until the oscillator stops."
+ ],
+ "params": {
+ "secondsFromNow": "Number: Time, in seconds from now."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the amplitude between 0 and 1.0. Or, pass in an object such as an oscillator to modulate amplitude with an audio signal."
+ ],
+ "returns": "AudioParam: gain If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's gain/amplitude/volume)",
+ "params": {
+ "vol": "Number|Object: between 0 and 1.0 or a modulating signal/oscillator",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "freq": {
+ "description": [
+ "Set frequency of an oscillator to a value. Or, pass in an object such as an oscillator to modulate the frequency with an audio signal."
+ ],
+ "returns": "AudioParam: Frequency If no value is provided, returns the Web Audio API AudioParam that controls this oscillator's frequency",
+ "params": {
+ "Frequency": "Number|Object: Frequency in Hz or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Ramp time (in seconds)",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at x seconds from now"
+ }
+ },
+ "setType": {
+ "description": [
+ "Set type to 'sine', 'triangle', 'sawtooth' or 'square'."
+ ],
+ "params": {
+ "type": "String: 'sine', 'triangle', 'sawtooth' or 'square'."
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "pan": {
+ "description": [
+ "Pan between Left (-1) and Right (1)"
+ ],
+ "params": {
+ "panning": "Number: Number between -1 and 1",
+ "timeFromNow": "Number: schedule this event to happen seconds from now"
+ }
+ },
+ "phase": {
+ "description": [
+ "Set the phase of an oscillator between 0.0 and 1.0. In this implementation, phase is a delay time based on the oscillator's current frequency."
+ ],
+ "params": {
+ "phase": "Number: float between 0.0 and 1.0"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "number": "Number: Constant number to add"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the p5.Oscillator's output amplitude by a fixed value (i.e. turn it up!). Calling this method again will override the initial mult() with a new value."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with multiplied output",
+ "params": {
+ "number": "Number: Constant number to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this oscillator's amplitude values to a given range, and return the oscillator. Calling this method again will override the initial scale() with new values."
+ ],
+ "returns": "p5.Oscillator: Oscillator Returns this oscillator with scaled output",
+ "params": {
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.SinOsc": {
+ "description": [
+ "Constructor: new p5.SinOsc(). This creates a Sine Wave Oscillator and is equivalent to new p5.Oscillator('sine') or creating a p5.Oscillator and then calling its method setType('sine'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.TriOsc": {
+ "description": [
+ "Constructor: new p5.TriOsc(). This creates a Triangle Wave Oscillator and is equivalent to new p5.Oscillator('triangle') or creating a p5.Oscillator and then calling its method setType('triangle'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SawOsc": {
+ "description": [
+ "Constructor: new p5.SawOsc(). This creates a SawTooth Wave Oscillator and is equivalent to new p5.Oscillator('sawtooth') or creating a p5.Oscillator and then calling its method setType('sawtooth'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.SqrOsc": {
+ "description": [
+ "Constructor: new p5.SqrOsc(). This creates a Square Wave Oscillator and is equivalent to new p5.Oscillator('square') or creating a p5.Oscillator and then calling its method setType('square'). See p5.Oscillator for methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Set the frequency"
+ }
+ },
+ "p5.MonoSynth": {
+ "description": [
+ "A MonoSynth is used as a single voice for sound synthesis. This is a class to be used in conjunction with the PolySynth class. Custom synthesizers should be built inheriting from this class."
+ ],
+ "play": {
+ "description": [
+ "Play tells the MonoSynth to start playing a note. This method schedules the calling of .triggerAttack and .triggerRelease."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope. Defaults to 0.15 seconds."
+ }
+ },
+ "triggerAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "String | Number: the note you want to play, specified as a frequency in Hertz (Number) or as a midi value in Note/Octave format (\"C4\", \"Eb3\"...etc\") See Tone . Defaults to 440 hz",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play"
+ }
+ },
+ "triggerRelease": {
+ "description": [
+ "Trigger the release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "secondsFromNow": "Number: time to trigger the release"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set values like a traditional ADSR envelope ."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "attack": {
+ "description": [
+ "Getters and Setters"
+ ]
+ },
+ "decay": {},
+ "sustain": {},
+ "release": {},
+ "amp": {
+ "description": [
+ "MonoSynth amp"
+ ],
+ "returns": "Number: new volume value",
+ "params": {
+ "vol": "Number: desired volume",
+ "rampTime": "Number: (Optional) Time to reach new volume"
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.AudioVoice": {
+ "description": [
+ "Base class for monophonic synthesizers. Any extensions of this class should follow the API and implement the methods below in order to remain compatible with p5.PolySynth();"
+ ],
+ "connect": {
+ "description": [
+ "Connect to p5 objects or Web Audio Nodes"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect from soundOut"
+ ]
+ }
+ },
+ "p5.PolySynth": {
+ "description": [
+ "An AudioVoice is used as a single voice for sound synthesis. The PolySynth class holds an array of AudioVoice, and deals with voices allocations, with setting notes to be played, and parameters to be set."
+ ],
+ "params": {
+ "synthVoice": "Number: (Optional) A monophonic synth voice inheriting the AudioVoice class. Defaults to p5.MonoSynth",
+ "maxVoices": "Number: (Optional) Number of voices, defaults to 8;"
+ },
+ "notes": {
+ "description": [
+ "An object that holds information about which notes have been played and which notes are currently being played. New notes are added as keys on the fly. While a note has been attacked, but not released, the value of the key is the audiovoice which is generating that note. When notes are released, the value of the key becomes undefined."
+ ]
+ },
+ "polyvalue": {
+ "description": [
+ "A PolySynth must have at least 1 voice, defaults to 8"
+ ]
+ },
+ "AudioVoice": {
+ "description": [
+ "Monosynth that generates the sound for each note that is triggered. The p5.PolySynth defaults to using the p5.MonoSynth as its voice."
+ ]
+ },
+ "play": {
+ "description": [
+ "Play a note by triggering noteAttack and noteRelease with sustain time"
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note to play (ranging from 0 to 127 - 60 being a middle C)",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
+ },
+ "noteADSR": {
+ "description": [
+ "noteADSR sets the envelope for a specific note that has just been triggered. Using this method modifies the envelope of whichever audiovoice is being used to play the desired note. The envelope should be reset before noteRelease is called in order to prevent the modified envelope from being used on other notes."
+ ],
+ "params": {
+ "note": "Number: (Optional) Midi note on which ADSR should be set.",
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set the PolySynths global envelope. This method modifies the envelopes of each monosynth so that all notes are played with this envelope."
+ ],
+ "params": {
+ "attackTime": "Number: (Optional) Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "noteAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of a MonoSynth. Similar to holding down a key on a piano, but it will hold the sustain level until you let go."
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note on which attack should be triggered.",
+ "velocity": "Number: (Optional) velocity of the note to play (ranging from 0 to 1)/",
+ "secondsFromNow": "Number: (Optional) time from now (in seconds)"
+ }
+ },
+ "noteRelease": {
+ "description": [
+ "Trigger the Release of an AudioVoice note. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "note": "Number: (Optional) midi note on which attack should be triggered. If no value is provided, all notes will be released.",
+ "secondsFromNow": "Number: (Optional) time to trigger the release"
+ }
+ },
+ "connect": {
+ "description": [
+ "Connect to a p5.sound / Web Audio object."
+ ],
+ "params": {
+ "unit": "Object: A p5.sound or Web Audio object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all outputs"
+ ]
+ },
+ "dispose": {
+ "description": [
+ "Get rid of the MonoSynth and free up its resources / memory."
+ ]
+ }
+ },
+ "p5.SoundFile": {
+ "description": [
+ "SoundFile object with a path to a file. ",
+ "The p5.SoundFile may not be available immediately because it loads the file information asynchronously. ",
+ "To do something with the sound as soon as it loads pass the name of a function as the second parameter. ",
+ "Only one file path is required. However, audio file formats (i.e. mp3, ogg, wav and m4a/aac) are not supported by all web browsers. If you want to ensure compatibility, instead of a single file path, you may include an Array of filepaths, and the browser will choose a format that works."
+ ],
+ "params": {
+ "path": "String|Array: path to a sound file (String). Optionally, you may include multiple file formats in an array. Alternately, accepts an object from the HTML5 File API, or a p5.File.",
+ "successCallback": "Function: (Optional) Name of a function to call once file loads",
+ "errorCallback": "Function: (Optional) Name of a function to call if file fails to load. This function will receive an error or XMLHttpRequest object with information about what went wrong.",
+ "whileLoadingCallback": "Function: (Optional) Name of a function to call while file is loading. That function will receive progress of the request to load the sound file (between 0 and 1) as its first parameter. This progress does not account for the additional time needed to decode the audio data."
+ },
+ "isLoaded": {
+ "description": [
+ "Returns true if the sound file finished loading successfully."
+ ],
+ "returns": "Boolean: "
+ },
+ "play": {
+ "description": [
+ "Play the p5.SoundFile"
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule playback to start (in seconds from now).",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) amplitude (volume) of playback",
+ "cueStart": "Number: (Optional) (optional) cue start time in seconds",
+ "duration": "Number: (Optional) (optional) duration of playback in seconds"
+ }
+ },
+ "playMode": {
+ "description": [
+ "p5.SoundFile has two play modes: restart and sustain. Play Mode determines what happens to a p5.SoundFile if it is triggered while in the middle of playback. In sustain mode, playback will continue simultaneous to the new playback. In restart mode, play() will stop playback and start over. With untilDone, a sound will play only if it's not already playing. Sustain is the default mode."
+ ],
+ "params": {
+ "str": "String: 'restart' or 'sustain' or 'untilDone'"
+ }
+ },
+ "pause": {
+ "description": [
+ "Pauses a file that is currently playing. If the file is not playing, then nothing will happen. ",
+ "After pausing, .play() will resume from the paused position. If p5.SoundFile had been set to loop before it was paused, it will continue to loop after it is unpaused with .play()."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now"
+ }
+ },
+ "loop": {
+ "description": [
+ "Loop the p5.SoundFile. Accepts optional parameters to set the playback rate, playback volume, loopStart, loopEnd."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur seconds from now",
+ "rate": "Number: (Optional) (optional) playback rate",
+ "amp": "Number: (Optional) (optional) playback volume",
+ "cueLoopStart": "Number: (Optional) (optional) startTime in seconds",
+ "duration": "Number: (Optional) (optional) loop duration in seconds"
+ }
+ },
+ "setLoop": {
+ "description": [
+ "Set a p5.SoundFile's looping flag to true or false. If the sound is currently playing, this change will take effect when it reaches the end of the current playback."
+ ],
+ "params": {
+ "Boolean": "Boolean: set looping to true or false"
+ }
+ },
+ "isLooping": {
+ "description": [
+ "Returns 'true' if a p5.SoundFile is currently looping and playing, 'false' if not."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPlaying": {
+ "description": [
+ "Returns true if a p5.SoundFile is playing, false if not (i.e. paused or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "isPaused": {
+ "description": [
+ "Returns true if a p5.SoundFile is paused, false if not (i.e. playing or stopped)."
+ ],
+ "returns": "Boolean: "
+ },
+ "stop": {
+ "description": [
+ "Stop soundfile playback."
+ ],
+ "params": {
+ "startTime": "Number: (Optional) (optional) schedule event to occur in seconds from now"
+ }
+ },
+ "setVolume": {
+ "description": [
+ "Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume). 1.0 is the maximum amplitude of a digital sound, so multiplying by greater than 1.0 may cause digital distortion. To fade, provide a rampTime parameter. For more complex fades, see the Envelope class. ",
+ "Alternately, you can pass in a signal source such as an oscillator to modulate the amplitude with an audio signal."
+ ],
+ "params": {
+ "volume": "Number|Object: Volume (amplitude) between 0.0 and 1.0 or modulating signal/oscillator",
+ "rampTime": "Number: (Optional) Fade for t seconds",
+ "timeFromNow": "Number: (Optional) Schedule this event to happen at t seconds in the future"
+ }
+ },
+ "pan": {
+ "description": [
+ "Set the stereo panning of a p5.sound object to a floating point number between -1.0 (left) and 1.0 (right). Default is 0.0 (center)."
+ ],
+ "params": {
+ "panValue": "Number: (Optional) Set the stereo panner",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "getPan": {
+ "description": [
+ "Returns the current stereo pan position (-1.0 to 1.0)"
+ ],
+ "returns": "Number: Returns the stereo pan setting of the Oscillator as a number between -1.0 (left) and 1.0 (right). 0.0 is center and default."
+ },
+ "rate": {
+ "description": [
+ "Set the playback rate of a sound file. Will change the speed and the pitch. Values less than zero will reverse the audio buffer."
+ ],
+ "params": {
+ "playbackRate": "Number: (Optional) Set the playback rate. 1.0 is normal, .5 is half-speed, 2.0 is twice as fast. Values less than zero play backwards."
+ }
+ },
+ "duration": {
+ "description": [
+ "Returns the duration of a sound file in seconds."
+ ],
+ "returns": "Number: The duration of the soundFile in seconds."
+ },
+ "currentTime": {
+ "description": [
+ "Return the current position of the p5.SoundFile playhead, in seconds. Time is relative to the normal buffer direction, so if reverseBuffer has been called, currentTime will count backwards."
+ ],
+ "returns": "Number: currentTime of the soundFile in seconds."
+ },
+ "jump": {
+ "description": [
+ "Move the playhead of a soundfile that is currently playing to a new position and a new duration, in seconds. If none are given, will reset the file to play entire duration from start to finish. To set the position of a soundfile that is not currently playing, use the play or loop methods."
+ ],
+ "params": {
+ "cueTime": "Number: cueTime of the soundFile in seconds.",
+ "duration": "Number: duration in seconds."
+ }
+ },
+ "channels": {
+ "description": [
+ "Return the number of channels in a sound file. For example, Mono = 1, Stereo = 2."
+ ],
+ "returns": "Number: [channels]"
+ },
+ "sampleRate": {
+ "description": [
+ "Return the sample rate of the sound file."
+ ],
+ "returns": "Number: [sampleRate]"
+ },
+ "frames": {
+ "description": [
+ "Return the number of samples in a sound file. Equal to sampleRate * duration."
+ ],
+ "returns": "Number: [sampleCount]"
+ },
+ "getPeaks": {
+ "description": [
+ "Returns an array of amplitude peaks in a p5.SoundFile that can be used to draw a static waveform. Scans through the p5.SoundFile's audio buffer to find the greatest amplitudes. Accepts one parameter, 'length', which determines size of the array. Larger arrays result in more precise waveform visualizations. ",
+ "Inspired by Wavesurfer.js."
+ ],
+ "returns": "Float32Array: Array of peaks.",
+ "params": {
+ "length": "Number: (Optional) length is the size of the returned array. Larger length results in more precision. Defaults to 5*width of the browser window."
+ }
+ },
+ "reverseBuffer": {
+ "description": [
+ "Reverses the p5.SoundFile's buffer source. Playback must be handled separately (see example)."
+ ]
+ },
+ "onended": {
+ "description": [
+ "Schedule an event to be called when the soundfile reaches the end of a buffer. If the soundfile is playing through once, this will be called when it ends. If it is looping, it will be called when stop is called."
+ ],
+ "params": {
+ "callback": "Function: function to call when the soundfile has ended."
+ }
+ },
+ "connect": {
+ "description": [
+ "Connects the output of a p5sound object to input of another p5.sound object. For example, you may connect a p5.SoundFile to an FFT or an Effect. If no parameter is given, it will connect to the master output. Most p5sound objects connect to the master output when they are created."
+ ],
+ "params": {
+ "object": "Object: (Optional) Audio object that accepts an input"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnects the output of this p5sound object."
+ ]
+ },
+ "setPath": {
+ "description": [
+ "Reset the source for this SoundFile to a new path (URL)."
+ ],
+ "params": {
+ "path": "String: path to audio file",
+ "callback": "Function: Callback"
+ }
+ },
+ "setBuffer": {
+ "description": [
+ "Replace the current Audio Buffer with a new Buffer."
+ ],
+ "params": {
+ "buf": "Array: Array of Float32 Array(s). 2 Float32 Arrays will create a stereo source. 1 will create a mono source."
+ }
+ },
+ "processPeaks": {
+ "description": [
+ "processPeaks returns an array of timestamps where it thinks there is a beat. ",
+ "This is an asynchronous function that processes the soundfile in an offline audio context, and sends the results to your callback function. ",
+ "The process involves running the soundfile through a lowpass filter, and finding all of the peaks above the initial threshold. If the total number of peaks are below the minimum number of peaks, it decreases the threshold and re-runs the analysis until either minPeaks or minThreshold are reached."
+ ],
+ "returns": "Array: Array of timestamped peaks",
+ "params": {
+ "callback": "Function: a function to call once this data is returned",
+ "initThreshold": "Number: (Optional) initial threshold defaults to 0.9",
+ "minThreshold": "Number: (Optional) minimum threshold defaults to 0.22",
+ "minPeaks": "Number: (Optional) minimum number of peaks defaults to 200"
+ }
+ },
+ "addCue": {
+ "description": [
+ "Schedule events to trigger every time a MediaElement (audio/video) reaches a playback cue point. ",
+ "Accepts a callback function, a time (in seconds) at which to trigger the callback, and an optional parameter for the callback. ",
+ "Time will be passed as the first parameter to the callback function, and param will be the second parameter."
+ ],
+ "returns": "Number: id ID of this cue, useful for removeCue(id)",
+ "params": {
+ "time": "Number: Time in seconds, relative to this media element's playback. For example, to trigger an event every time playback reaches two seconds, pass in the number 2. This will be passed as the first parameter to the callback function.",
+ "callback": "Function: Name of a function that will be called at the given time. The callback will receive time and (optionally) param as its two parameters.",
+ "value": "Object: (Optional) An object to be passed as the second parameter to the callback function."
+ }
+ },
+ "removeCue": {
+ "description": [
+ "Remove a callback based on its ID. The ID is returned by the addCue method."
+ ],
+ "params": {
+ "id": "Number: ID of the cue, as returned by addCue"
+ }
+ },
+ "clearCues": {
+ "description": [
+ "Remove all of the callbacks that had originally been scheduled via the addCue method."
+ ]
+ },
+ "save": {
+ "description": [
+ "Save a p5.SoundFile as a .wav file. The browser will prompt the user to download the file to their device. To upload a file to a server, see getBlob "
+ ],
+ "params": {
+ "fileName": "String: (Optional) name of the resulting .wav file."
+ }
+ },
+ "getBlob": {
+ "description": [
+ "This method is useful for sending a SoundFile to a server. It returns the .wav-encoded audio data as a \"Blob \". A Blob is a file-like data object that can be uploaded to a server with an http request. We'll use the httpDo options object to send a POST request with some specific options: we encode the request as multipart/form-data, and attach the blob as one of the form values using FormData."
+ ],
+ "returns": "Blob: A file-like data object"
+ }
+ },
+ "p5.Amplitude": {
+ "description": [
+ "Amplitude measures volume between 0.0 and 1.0. Listens to all p5sound by default, or use setInput() to listen to a specific sound source. Accepts an optional smoothing value, which defaults to 0."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) between 0.0 and .999 to smooth amplitude readings (defaults to 0)"
+ },
+ "setInput": {
+ "description": [
+ "Connects to the p5sound instance (master output) by default. Optionally, you can pass in a specific source (i.e. a soundfile)."
+ ],
+ "params": {
+ "snd": "SoundObject|undefined: (Optional) set the sound source (optional, defaults to master output)",
+ "smoothing": "Number|undefined: (Optional) a range between 0.0 and 1.0 to smooth amplitude readings"
+ }
+ },
+ "getLevel": {
+ "description": [
+ "Returns a single Amplitude reading at the moment it is called. For continuous readings, run in the draw loop."
+ ],
+ "returns": "Number: Amplitude as a number between 0.0 and 1.0",
+ "params": {
+ "channel": "Number: (Optional) Optionally return only channel 0 (left) or 1 (right)"
+ }
+ },
+ "toggleNormalize": {
+ "description": [
+ "Determines whether the results of Amplitude.process() will be Normalized. To normalize, Amplitude finds the difference the loudest reading it has processed and the maximum amplitude of 1.0. Amplitude adds this difference to all values to produce results that will reliably map between 0.0 and 1.0. However, if a louder moment occurs, the amount that Normalize adds to all the values will change. Accepts an optional boolean parameter (true or false). Normalizing is off by default."
+ ],
+ "params": {
+ "boolean": "Boolean: (Optional) set normalize to true (1) or false (0)"
+ }
+ },
+ "smooth": {
+ "description": [
+ "Smooth Amplitude analysis by averaging with the last analysis frame. Off by default."
+ ],
+ "params": {
+ "set": "Number: smoothing from 0.0 <= 1"
+ }
+ }
+ },
+ "p5.FFT": {
+ "description": [
+ "FFT (Fast Fourier Transform) is an analysis algorithm that isolates individual audio frequencies within a waveform. ",
+ "Once instantiated, a p5.FFT object can return an array based on two types of analyses: • FFT.waveform() computes amplitude values along the time domain. The array indices correspond to samples across a brief moment in time. Each value represents amplitude of the waveform at that sample of time. • FFT.analyze() computes amplitude values along the frequency domain. The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Use with getEnergy() to measure amplitude at specific frequencies, or within a range of frequencies. ",
+ "FFT analyzes a very short snapshot of sound called a sample buffer. It returns an array of amplitude measurements, referred to as bins. The array is 1024 bins long by default. You can change the bin array length, but it must be a power of 2 between 16 and 1024 in order for the FFT algorithm to function correctly. The actual size of the FFT buffer is twice the number of bins, so given a standard sample rate, the buffer is 2048/44100 seconds long."
+ ],
+ "params": {
+ "smoothing": "Number: (Optional) Smooth results of Freq Spectrum. 0.0 < smoothing < 1.0. Defaults to 0.8.",
+ "bins": "Number: (Optional) Length of resulting array. Must be a power of two between 16 and 1024. Defaults to 1024."
+ },
+ "setInput": {
+ "description": [
+ "Set the input source for the FFT analysis. If no source is provided, FFT will analyze all sound in the sketch."
+ ],
+ "params": {
+ "source": "Object: (Optional) p5.sound object (or web audio API source node)"
+ }
+ },
+ "waveform": {
+ "description": [
+ "Returns an array of amplitude values (between -1.0 and +1.0) that represent a snapshot of amplitude readings in a single buffer. Length will be equal to bins (defaults to 1024). Can be used to draw the waveform of a sound."
+ ],
+ "returns": "Array: Array Array of amplitude values (-1 to 1) over time. Array length = bins.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "precision": "String: (Optional) If any value is provided, will return results in a Float32 Array which is more precise than a regular array."
+ }
+ },
+ "analyze": {
+ "description": [
+ "Returns an array of amplitude values (between 0 and 255) across the frequency spectrum. Length is equal to FFT bins (1024 by default). The array indices correspond to frequencies (i.e. pitches), from the lowest to the highest that humans can hear. Each value represents amplitude at that slice of the frequency spectrum. Must be called prior to using getEnergy()."
+ ],
+ "returns": "Array: spectrum Array of energy (amplitude/volume) values across the frequency spectrum. Lowest energy (silence) = 0, highest possible is 255.",
+ "params": {
+ "bins": "Number: (Optional) Must be a power of two between 16 and 1024. Defaults to 1024.",
+ "scale": "Number: (Optional) If \"dB,\" returns decibel float measurements between -140 and 0 (max). Otherwise returns integers from 0-255."
+ }
+ },
+ "getEnergy": {
+ "description": [
+ "Returns the amount of energy (volume) at a specific frequency , or the average amount of energy between two frequencies. Accepts Number(s) corresponding to frequency (in Hz), or a String corresponding to predefined frequency ranges (\"bass\", \"lowMid\", \"mid\", \"highMid\", \"treble\"). Returns a range between 0 (no energy/volume at that frequency) and 255 (maximum energy). NOTE: analyze() must be called prior to getEnergy(). Analyze() tells the FFT to analyze frequency data, and getEnergy() uses the results determine the value at a specific frequency or range of frequencies. "
+ ],
+ "returns": "Number: Energy Energy (volume/amplitude) from 0 and 255.",
+ "params": {
+ "frequency1": "Number|String: Will return a value representing energy at this frequency. Alternately, the strings \"bass\", \"lowMid\" \"mid\", \"highMid\", and \"treble\" will return predefined frequency ranges.",
+ "frequency2": "Number: (Optional) If a second frequency is given, will return average amount of energy that exists between the two frequencies."
+ }
+ },
+ "getCentroid": {
+ "description": [
+ "Returns the spectral centroid of the input signal. NOTE: analyze() must be called prior to getCentroid(). Analyze() tells the FFT to analyze frequency data, and getCentroid() uses the results determine the spectral centroid. "
+ ],
+ "returns": "Number: Spectral Centroid Frequency Frequency of the spectral centroid in Hz."
+ },
+ "smooth": {
+ "description": [
+ "Smooth FFT analysis by averaging with the last analysis frame."
+ ],
+ "params": {
+ "smoothing": "Number: 0.0 < smoothing < 1.0. Defaults to 0.8."
+ }
+ },
+ "linAverages": {
+ "description": [
+ "Returns an array of average amplitude values for a given number of frequency bands split equally. N defaults to 16. NOTE: analyze() must be called prior to linAverages(). Analyze() tells the FFT to analyze frequency data, and linAverages() uses the results to group them into a smaller set of averages. "
+ ],
+ "returns": "Array: linearAverages Array of average amplitude values for each group",
+ "params": {
+ "N": "Number: Number of returned frequency groups"
+ }
+ },
+ "logAverages": {
+ "description": [
+ "Returns an array of average amplitude values of the spectrum, for a given set of Octave Bands NOTE: analyze() must be called prior to logAverages(). Analyze() tells the FFT to analyze frequency data, and logAverages() uses the results to group them into a smaller set of averages. "
+ ],
+ "returns": "Array: logAverages Array of average amplitude values for each group",
+ "params": {
+ "octaveBands": "Array: Array of Octave Bands objects for grouping"
+ }
+ },
+ "getOctaveBands": {
+ "description": [
+ "Calculates and Returns the 1/N Octave Bands N defaults to 3 and minimum central frequency to 15.625Hz. (1/3 Octave Bands ~= 31 Frequency Bands) Setting fCtr0 to a central value of a higher octave will ignore the lower bands and produce less frequency groups."
+ ],
+ "returns": "Array: octaveBands Array of octave band objects with their bounds",
+ "params": {
+ "N": "Number: Specifies the 1/N type of generated octave bands",
+ "fCtr0": "Number: Minimum central frequency for the lowest band"
+ }
+ }
+ },
+ "p5.Signal": {
+ "description": [
+ "p5.Signal is a constant audio-rate signal used by p5.Oscillator and p5.Envelope for modulation math. ",
+ "This is necessary because Web Audio is processed on a separate clock. For example, the p5 draw loop runs about 60 times per second. But the audio clock must process samples 44100 times per second. If we want to add a value to each of those samples, we can't do it in the draw loop, but we can do it by adding a constant-rate audio signal.tone.js."
+ ],
+ "returns": "Tone.Signal: A Signal object from the Tone.js library",
+ "fade": {
+ "description": [
+ "Fade to value, for smooth transitions"
+ ],
+ "params": {
+ "value": "Number: Value to set this signal",
+ "secondsFromNow": "Number: (Optional) Length of fade, in seconds from now"
+ }
+ },
+ "setInput": {
+ "description": [
+ "Connect a p5.sound object or Web Audio node to this p5.Signal so that its amplitude values can be scaled."
+ ],
+ "params": {
+ "input": "Object"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a constant value to this audio signal, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalAdd."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply this signal by a constant value, and return the resulting audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalMult."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this signal value to a given range, and return the result as an audio signal. Does not change the value of the original signal, instead it returns a new p5.SignalScale."
+ ],
+ "returns": "p5.Signal: object",
+ "params": {
+ "number": "Number: to multiply",
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Envelope": {
+ "description": [
+ "Envelopes are pre-defined amplitude distribution over time. Typically, envelopes are used to control the output volume of an object, a series of fades referred to as Attack, Decay, Sustain and Release ( ADSR ). Envelopes can also control other Web Audio Parameters—for example, a p5.Envelope can control an Oscillator's frequency like this: osc.freq(env). ",
+ "Use setRange to change the attack/release level. Use setADSR to change attackTime, decayTime, sustainPercent and releaseTime. ",
+ "Use the play method to play the entire envelope, the ramp method for a pingable trigger, or triggerAttack / triggerRelease to trigger noteOn/noteOff."
+ ],
+ "attackTime": {
+ "description": [
+ "Time until envelope reaches attackLevel"
+ ]
+ },
+ "attackLevel": {
+ "description": [
+ "Level once attack is complete."
+ ]
+ },
+ "decayTime": {
+ "description": [
+ "Time until envelope reaches decayLevel."
+ ]
+ },
+ "decayLevel": {
+ "description": [
+ "Level after decay. The envelope will sustain here until it is released."
+ ]
+ },
+ "releaseTime": {
+ "description": [
+ "Duration of the release portion of the envelope."
+ ]
+ },
+ "releaseLevel": {
+ "description": [
+ "Level at the end of the release."
+ ]
+ },
+ "set": {
+ "description": [
+ "Reset the envelope with a series of time/value pairs."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds) before level reaches attackLevel",
+ "attackLevel": "Number: Typically an amplitude between 0.0 and 1.0",
+ "decayTime": "Number: Time",
+ "decayLevel": "Number: Amplitude (In a standard ADSR envelope, decayLevel = sustainLevel)",
+ "releaseTime": "Number: Release Time (in seconds)",
+ "releaseLevel": "Number: Amplitude"
+ }
+ },
+ "setADSR": {
+ "description": [
+ "Set values like a traditional ADSR envelope ."
+ ],
+ "params": {
+ "attackTime": "Number: Time (in seconds before envelope reaches Attack Level",
+ "decayTime": "Number: (Optional) Time (in seconds) before envelope reaches Decay/Sustain Level",
+ "susRatio": "Number: (Optional) Ratio between attackLevel and releaseLevel, on a scale from 0 to 1, where 1.0 = attackLevel, 0.0 = releaseLevel. The susRatio determines the decayLevel and the level at which the sustain portion of the envelope will sustain. For example, if attackLevel is 0.4, releaseLevel is 0, and susAmt is 0.5, the decayLevel would be 0.2. If attackLevel is increased to 1.0 (using setRange), then decayLevel would increase proportionally, to become 0.5.",
+ "releaseTime": "Number: (Optional) Time in seconds from now (defaults to 0)"
+ }
+ },
+ "setRange": {
+ "description": [
+ "Set max (attackLevel) and min (releaseLevel) of envelope."
+ ],
+ "params": {
+ "aLevel": "Number: attack level (defaults to 1)",
+ "rLevel": "Number: release level (defaults to 0)"
+ }
+ },
+ "setInput": {
+ "description": [
+ "Assign a parameter to be controlled by this envelope. If a p5.Sound object is given, then the p5.Envelope will control its output gain. If multiple inputs are provided, the env will control all of them."
+ ],
+ "params": {
+ "inputs": "Object: (Optional) A p5.sound object or Web Audio Param."
+ }
+ },
+ "setExp": {
+ "description": [
+ "Set whether the envelope ramp is linear (default) or exponential. Exponential ramps can be useful because we perceive amplitude and frequency logarithmically."
+ ],
+ "params": {
+ "isExp": "Boolean: true is exponential, false is linear"
+ }
+ },
+ "play": {
+ "description": [
+ "Play tells the envelope to start acting on a given input. If the input is a p5.sound object (i.e. AudioIn, Oscillator, SoundFile), then Envelope will control its output volume. Envelopes can also be used to control any Web Audio Audio Param. "
+ ],
+ "params": {
+ "unit": "Object: A p5.sound object or Web Audio Param.",
+ "startTime": "Number: (Optional) time from now (in seconds) at which to play",
+ "sustainTime": "Number: (Optional) time to sustain before releasing the envelope"
+ }
+ },
+ "triggerAttack": {
+ "description": [
+ "Trigger the Attack, and Decay portion of the Envelope. Similar to holding down a key on a piano, but it will hold the sustain level until you let go. Input can be any p5.sound object, or a Web Audio Param ."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time from now (in seconds)"
+ }
+ },
+ "triggerRelease": {
+ "description": [
+ "Trigger the Release of the Envelope. This is similar to releasing the key on a piano and letting the sound fade according to the release level and release time."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: time to trigger the release"
+ }
+ },
+ "ramp": {
+ "description": [
+ "Exponentially ramp to a value using the first two values from setADSR(attackTime, decayTime) as time constants for simple exponential ramps. If the value is higher than current value, it uses attackTime, while a decrease uses decayTime."
+ ],
+ "params": {
+ "unit": "Object: p5.sound Object or Web Audio Param",
+ "secondsFromNow": "Number: When to trigger the ramp",
+ "v": "Number: Target value",
+ "v2": "Number: (Optional) Second target value (optional)"
+ }
+ },
+ "add": {
+ "description": [
+ "Add a value to the p5.Oscillator's output amplitude, and return the oscillator. Calling this method again will override the initial add() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "number": "Number: Constant number to add"
+ }
+ },
+ "mult": {
+ "description": [
+ "Multiply the p5.Envelope's output amplitude by a fixed value. Calling this method again will override the initial mult() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "number": "Number: Constant number to multiply"
+ }
+ },
+ "scale": {
+ "description": [
+ "Scale this envelope's amplitude values to a given range, and return the envelope. Calling this method again will override the initial scale() with new values."
+ ],
+ "returns": "p5.Envelope: Envelope Returns this envelope with scaled output",
+ "params": {
+ "inMin": "Number: input range minumum",
+ "inMax": "Number: input range maximum",
+ "outMin": "Number: input range minumum",
+ "outMax": "Number: input range maximum"
+ }
+ }
+ },
+ "p5.Pulse": {
+ "description": [
+ "Creates a Pulse object, an oscillator that implements Pulse Width Modulation. The pulse is created with two oscillators. Accepts a parameter for frequency, and to set the width between the pulses. See p5.Oscillator for a full list of methods."
+ ],
+ "params": {
+ "freq": "Number: (Optional) Frequency in oscillations per second (Hz)",
+ "w": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
+ },
+ "width": {
+ "description": [
+ "Set the width of a Pulse object (an oscillator that implements Pulse Width Modulation)."
+ ],
+ "params": {
+ "width": "Number: (Optional) Width between the pulses (0 to 1.0, defaults to 0)"
+ }
+ }
+ },
+ "p5.Noise": {
+ "description": [
+ "Noise is a type of oscillator that generates a buffer with random values."
+ ],
+ "params": {
+ "type": "String: Type of noise can be 'white' (default), 'brown' or 'pink'."
+ },
+ "setType": {
+ "description": [
+ "Set type of noise to 'white', 'pink' or 'brown'. White is the default."
+ ],
+ "params": {
+ "type": "String: (Optional) 'white', 'pink' or 'brown'"
+ }
+ }
+ },
+ "p5.AudioIn": {
+ "description": [
+ "Get audio from an input, i.e. your computer's microphone. ",
+ "Turn the mic on/off with the start() and stop() methods. When the mic is on, its volume can be measured with getLevel or by connecting an FFT object. ",
+ "If you want to hear the AudioIn, use the .connect() method. AudioIn does not connect to p5.sound output by default to prevent feedback. ",
+ "Note: This uses the getUserMedia/ Stream API, which is not supported by certain browsers. Access in Chrome browser is limited to localhost and https, but access over http may be limited. "
+ ],
+ "params": {
+ "errorCallback": "Function: (Optional) A function to call if there is an error accessing the AudioIn. For example, Safari and iOS devices do not currently allow microphone access."
+ },
+ "input": {},
+ "output": {},
+ "stream": {},
+ "mediaStream": {},
+ "currentSource": {},
+ "enabled": {
+ "description": [
+ "Client must allow browser to access their microphone / audioin source. Default: false. Will become true when the client enables access."
+ ]
+ },
+ "amplitude": {
+ "description": [
+ "Input amplitude, connect to it by default but not to master out"
+ ]
+ },
+ "start": {
+ "description": [
+ "Start processing audio input. This enables the use of other AudioIn methods like getLevel(). Note that by default, AudioIn is not connected to p5.sound's output. So you won't hear anything unless you use the connect() method. ",
+ "Certain browsers limit access to the user's microphone. For example, Chrome only allows access from localhost and over https. For this reason, you may want to include an errorCallback—a function that is called in case the browser won't provide mic access."
+ ],
+ "params": {
+ "successCallback": "Function: (Optional) Name of a function to call on success.",
+ "errorCallback": "Function: (Optional) Name of a function to call if there was an error. For example, some browsers do not support getUserMedia."
+ }
+ },
+ "stop": {
+ "description": [
+ "Turn the AudioIn off. If the AudioIn is stopped, it cannot getLevel(). If re-starting, the user may be prompted for permission access."
+ ]
+ },
+ "connect": {
+ "description": [
+ "Connect to an audio unit. If no parameter is provided, will connect to the master output (i.e. your speakers). "
+ ],
+ "params": {
+ "unit": "Object: (Optional) An object that accepts audio input, such as an FFT"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect the AudioIn from all audio units. For example, if connect() had been called, disconnect() will stop sending signal to your speakers. "
+ ]
+ },
+ "getLevel": {
+ "description": [
+ "Read the Amplitude (volume level) of an AudioIn. The AudioIn class contains its own instance of the Amplitude class to help make it easy to get a microphone's volume level. Accepts an optional smoothing value (0.0 < 1.0). NOTE: AudioIn must .start() before using .getLevel(). "
+ ],
+ "returns": "Number: Volume level (between 0.0 and 1.0)",
+ "params": {
+ "smoothing": "Number: (Optional) Smoothing is 0.0 by default. Smooths values based on previous values."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set amplitude (volume) of a mic input between 0 and 1.0. "
+ ],
+ "params": {
+ "vol": "Number: between 0 and 1.0",
+ "time": "Number: (Optional) ramp time (optional)"
+ }
+ },
+ "getSources": {
+ "description": [
+ "Returns a list of available input sources. This is a wrapper for https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "and it returns a Promise. "
+ ],
+ "returns": "Promise: Returns a Promise that can be used in place of the callbacks, similar to the enumerateDevices() method",
+ "params": {
+ "successCallback": "Function: (Optional) This callback function handles the sources when they have been enumerated. The callback function receives the deviceList array as its only argument",
+ "errorCallback": "Function: (Optional) This optional callback receives the error message as its argument."
+ }
+ },
+ "setSource": {
+ "description": [
+ "Set the input source. Accepts a number representing a position in the array returned by getSources(). This is only available in browsers that support https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices\" ",
+ "navigator.mediaDevices.enumerateDevices(). "
+ ],
+ "params": {
+ "num": "Number: position of input source in the array"
+ }
+ }
+ },
+ "p5.EQ": {
+ "description": [
+ "p5.EQ is an audio effect that performs the function of a multiband audio equalizer. Equalization is used to adjust the balance of frequency compoenents of an audio signal. This process is commonly used in sound production and recording to change the waveform before it reaches a sound output device. EQ can also be used as an audio effect to create interesting distortions by filtering out parts of the spectrum. p5.EQ is built using a chain of Web Audio Biquad Filter Nodes and can be instantiated with 3 or 8 bands. Bands can be added or removed from the EQ by directly modifying p5.EQ.bands (the array that stores filters). ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "returns": "Object: p5.EQ object",
+ "params": {
+ "_eqsize": "Number: (Optional) Constructor will accept 3 or 8, defaults to 3"
+ },
+ "bands": {
+ "description": [
+ "The p5.EQ is built with abstracted p5.Filter objects. To modify any bands, use methods of the p5.Filter API, especially gain and freq. Bands are stored in an array, with indices 0 - 3, or 0 - 7"
+ ]
+ },
+ "process": {
+ "description": [
+ "Process an input by connecting it to the EQ"
+ ],
+ "params": {
+ "src": "Object: Audio source"
+ }
+ }
+ },
+ "p5.Panner3D": {
+ "description": [
+ "Panner3D is based on the Web Audio Spatial Panner Node . This panner is a spatial processing node that allows audio to be positioned and oriented in 3D space. ",
+ "The position is relative to an Audio Context Listener , which can be accessed by p5.soundOut.audiocontext.listener"
+ ],
+ "panner": {
+ "description": [
+ " Web Audio Spatial Panner Node ",
+ "Properties include "
+ ]
+ },
+ "process": {
+ "description": [
+ "Connect an audio sorce"
+ ],
+ "params": {
+ "src": "Object: Input source"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the X,Y,Z position of the Panner"
+ ],
+ "returns": "Array: Updated x, y, z values as an array",
+ "params": {
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
+ },
+ "positionX": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "positionY": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "positionZ": {
+ "description": [
+ "Getter and setter methods for position coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orient": {
+ "description": [
+ "Set the X,Y,Z position of the Panner"
+ ],
+ "returns": "Array: Updated x, y, z values as an array",
+ "params": {
+ "xVal": "Number",
+ "yVal": "Number",
+ "zVal": "Number",
+ "time": "Number"
+ }
+ },
+ "orientX": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientY": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "orientZ": {
+ "description": [
+ "Getter and setter methods for orient coordinates"
+ ],
+ "returns": "Number: updated coordinate value"
+ },
+ "setFalloff": {
+ "description": [
+ "Set the rolloff factor and max distance"
+ ],
+ "params": {
+ "maxDistance": "Number (Optional)",
+ "rolloffFactor": "Number (Optional)"
+ }
+ },
+ "maxDist": {
+ "description": [
+ "Maxium distance between the source and the listener"
+ ],
+ "returns": "Number: updated value",
+ "params": {
+ "maxDistance": "Number"
+ }
+ },
+ "rollof": {
+ "description": [
+ "How quickly the volume is reduced as the source moves away from the listener"
+ ],
+ "returns": "Number: updated value",
+ "params": {
+ "rolloffFactor": "Number"
+ }
+ }
+ },
+ "p5.Delay": {
+ "description": [
+ "Delay is an echo effect. It processes an existing sound source, and outputs a delayed version of that sound. The p5.Delay can produce different effects depending on the delayTime, feedback, filter, and type. In the example below, a feedback of 0.5 (the default value) will produce a looping delay that decreases in volume by 50% each repeat. A filter will cut out the high frequencies so that the delay does not sound as piercing as the original source. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "leftDelay": {
+ "description": [
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
+ },
+ "rightDelay": {
+ "description": [
+ "The p5.Delay is built with two Web Audio Delay Nodes , one for each stereo channel."
+ ]
+ },
+ "process": {
+ "description": [
+ "Add delay to an audio signal according to a set of delay parameters."
+ ],
+ "params": {
+ "Signal": "Object: An object that outputs audio",
+ "delayTime": "Number: (Optional) Time (in seconds) of the delay/echo. Some browsers limit delayTime to 1 second.",
+ "feedback": "Number: (Optional) sends the delay back through itself in a loop that decreases in volume each time.",
+ "lowPass": "Number: (Optional) Cutoff frequency. Only frequencies below the lowPass will be part of the delay."
+ }
+ },
+ "delayTime": {
+ "description": [
+ "Set the delay (echo) time, in seconds. Usually this value will be a floating point number between 0.0 and 1.0."
+ ],
+ "params": {
+ "delayTime": "Number: Time (in seconds) of the delay"
+ }
+ },
+ "feedback": {
+ "description": [
+ "Feedback occurs when Delay sends its signal back through its input in a loop. The feedback amount determines how much signal to send each time through the loop. A feedback greater than 1.0 is not desirable because it will increase the overall output each time through the loop, creating an infinite feedback loop. The default value is 0.5"
+ ],
+ "returns": "Number: Feedback value",
+ "params": {
+ "feedback": "Number|Object: 0.0 to 1.0, or an object such as an Oscillator that can be used to modulate this param"
+ }
+ },
+ "filter": {
+ "description": [
+ "Set a lowpass filter frequency for the delay. A lowpass filter will cut off any frequencies higher than the filter frequency."
+ ],
+ "params": {
+ "cutoffFreq": "Number|Object: A lowpass filter will cut off any frequencies higher than the filter frequency.",
+ "res": "Number|Object: Resonance of the filter frequency cutoff, or an object (i.e. a p5.Oscillator) that can be used to modulate this parameter. High numbers (i.e. 15) will produce a resonance, low numbers (i.e. .2) will produce a slope."
+ }
+ },
+ "setType": {
+ "description": [
+ "Choose a preset type of delay. 'pingPong' bounces the signal from the left to the right channel to produce a stereo effect. Any other parameter will revert to the default delay setting."
+ ],
+ "params": {
+ "type": "String|Number: 'pingPong' (1) or 'default' (0)"
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the delay effect."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Reverb": {
+ "description": [
+ "Reverb adds depth to a sound through a large number of decaying echoes. It creates the perception that sound is occurring in a physical space. The p5.Reverb has parameters for Time (how long does the reverb last) and decayRate (how much the sound decays with each echo) that can be set with the .set() or .process() methods. The p5.Convolver extends p5.Reverb allowing you to recreate the sound of actual physical spaces through convolution. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "process": {
+ "description": [
+ "Connect a source to the reverb, and assign reverb parameters."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output.",
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
+ },
+ "set": {
+ "description": [
+ "Set the reverb settings. Similar to .process(), but without assigning a new input."
+ ],
+ "params": {
+ "seconds": "Number: (Optional) Duration of the reverb, in seconds. Min: 0, Max: 10. Defaults to 3.",
+ "decayRate": "Number: (Optional) Percentage of decay with each echo. Min: 0, Max: 100. Defaults to 2.",
+ "reverse": "Boolean: (Optional) Play the reverb backwards or forwards."
+ }
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the reverb effect."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ }
+ },
+ "p5.Convolver": {
+ "description": [
+ "p5.Convolver extends p5.Reverb. It can emulate the sound of real physical spaces through a process called convolution . ",
+ "Convolution multiplies any audio input by an \"impulse response\" to simulate the dispersion of sound over time. The impulse response is generated from an audio file that you provide. One way to generate an impulse response is to pop a balloon in a reverberant space and record the echo. Convolution can also be used to experiment with sound. ",
+ "Use the method createConvolution(path) to instantiate a p5.Convolver with a path to your impulse response audio file."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: (Optional) function to call when loading succeeds",
+ "errorCallback": "Function: (Optional) function to call if loading fails. This function will receive an error or XMLHttpRequest object with information about what went wrong."
+ },
+ "convolverNode": {
+ "description": [
+ "Internally, the p5.Convolver uses the a Web Audio Convolver Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Connect a source to the convolver."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
+ },
+ "impulses": {
+ "description": [
+ "If you load multiple impulse files using the .addImpulse method, they will be stored as Objects in this Array. Toggle between them with the toggleImpulse(id) method."
+ ]
+ },
+ "addImpulse": {
+ "description": [
+ "Load and assign a new Impulse Response to the p5.Convolver. The impulse is added to the .impulses array. Previous impulses can be accessed with the .toggleImpulse(id) method."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
+ },
+ "resetImpulse": {
+ "description": [
+ "Similar to .addImpulse, except that the .impulses Array is reset to save memory. A new .impulses array is created with this impulse as the only item."
+ ],
+ "params": {
+ "path": "String: path to a sound file",
+ "callback": "Function: function (optional)",
+ "errorCallback": "Function: function (optional)"
+ }
+ },
+ "toggleImpulse": {
+ "description": [
+ "If you have used .addImpulse() to add multiple impulses to a p5.Convolver, then you can use this method to toggle between the items in the .impulses Array. Accepts a parameter to identify which impulse you wish to use, identified either by its original filename (String) or by its position in the .impulses Array (Number). You can access the objects in the .impulses Array directly. Each Object has two attributes: an .audioBuffer (type: Web Audio AudioBuffer) and a .name, a String that corresponds with the original filename."
+ ],
+ "params": {
+ "id": "String|Number: Identify the impulse by its original filename (String), or by its position in the .impulses Array (Number)."
+ }
+ }
+ },
+ "p5.Phrase": {
+ "description": [
+ "A phrase is a pattern of musical events over time, i.e. a series of notes and rests. ",
+ "Phrases must be added to a p5.Part for playback, and each part can play multiple phrases at the same time. For example, one Phrase might be a kick drum, another could be a snare, and another could be the bassline. ",
+ "The first parameter is a name so that the phrase can be modified or deleted later. The callback is a a function that this phrase will call at every step—for example it might be called playNote(value){}. The array determines which value is passed into the callback at each step of the phrase. It can be numbers, an object with multiple numbers, or a zero (0) indicates a rest so the callback won't be called)."
+ ],
+ "params": {
+ "name": "String: Name so that you can access the Phrase.",
+ "callback": "Function: The name of a function that this phrase will call. Typically it will play a sound, and accept two parameters: a time at which to play the sound (in seconds from now), and a value from the sequence array. The time should be passed into the play() or start() method to ensure precision.",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
+ },
+ "sequence": {
+ "description": [
+ "Array of values to pass into the callback at each step of the phrase. Depending on the callback function's requirements, these values may be numbers, strings, or an object with multiple parameters. Zero (0) indicates a rest."
+ ]
+ }
+ },
+ "p5.Part": {
+ "description": [
+ "A p5.Part plays back one or more p5.Phrases. Instantiate a part with steps and tatums. By default, each step represents a 1/16th note. ",
+ "See p5.Phrase for more about musical timing."
+ ],
+ "params": {
+ "steps": "Number: (Optional) Steps in the part",
+ "tatums": "Number: (Optional) Divisions of a beat, e.g. use 1/4, or 0.25 for a quarter note (default is 1/16, a sixteenth note)"
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo of this part, in Beats Per Minute."
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: (Optional) Seconds from now"
+ }
+ },
+ "getBPM": {
+ "description": [
+ "Returns the tempo, in Beats Per Minute, of this part."
+ ],
+ "returns": "Number: "
+ },
+ "start": {
+ "description": [
+ "Start playback of this part. It will play through all of its phrases at a speed determined by setBPM."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "loop": {
+ "description": [
+ "Loop playback of this part. It will begin looping through all of its phrases at a speed determined by setBPM."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "noLoop": {
+ "description": [
+ "Tell the part to stop looping."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop the part and cue it to step 0. Playback will resume from the begining of the Part when it is played again."
+ ],
+ "params": {
+ "time": "Number: (Optional) seconds from now"
+ }
+ },
+ "pause": {
+ "description": [
+ "Pause the part. Playback will resume from the current step."
+ ],
+ "params": {
+ "time": "Number: seconds from now"
+ }
+ },
+ "addPhrase": {
+ "description": [
+ "Add a p5.Phrase to this Part."
+ ],
+ "params": {
+ "phrase": "p5.Phrase: reference to a p5.Phrase"
+ }
+ },
+ "removePhrase": {
+ "description": [
+ "Remove a phrase from this part, based on the name it was given when it was created."
+ ],
+ "params": {
+ "phraseName": "String"
+ }
+ },
+ "getPhrase": {
+ "description": [
+ "Get a phrase from this part, based on the name it was given when it was created. Now you can modify its array."
+ ],
+ "params": {
+ "phraseName": "String"
+ }
+ },
+ "replaceSequence": {
+ "description": [
+ "Find all sequences with the specified name, and replace their patterns with the specified array."
+ ],
+ "params": {
+ "phraseName": "String",
+ "sequence": "Array: Array of values to pass into the callback at each step of the phrase."
+ }
+ },
+ "onStep": {
+ "description": [
+ "Set the function that will be called at every step. This will clear the previous function."
+ ],
+ "params": {
+ "callback": "Function: The name of the callback you want to fire on every beat/tatum."
+ }
+ }
+ },
+ "p5.Score": {
+ "description": [
+ "A Score consists of a series of Parts. The parts will be played back in order. For example, you could have an A part, a B part, and a C part, and play them back in this order new p5.Score(a, a, b, a, c)"
+ ],
+ "params": {
+ "parts": "p5.Part: (Optional) One or multiple parts, to be played in sequence."
+ },
+ "start": {
+ "description": [
+ "Start playback of the score."
+ ]
+ },
+ "stop": {
+ "description": [
+ "Stop playback of the score."
+ ]
+ },
+ "pause": {
+ "description": [
+ "Pause playback of the score."
+ ]
+ },
+ "loop": {
+ "description": [
+ "Loop playback of the score."
+ ]
+ },
+ "noLoop": {
+ "description": [
+ "Stop looping playback of the score. If it is currently playing, this will go into effect after the current round of playback completes."
+ ]
+ },
+ "setBPM": {
+ "description": [
+ "Set the tempo for all parts in the score"
+ ],
+ "params": {
+ "BPM": "Number: Beats Per Minute",
+ "rampTime": "Number: Seconds from now"
+ }
+ }
+ },
+ "p5.SoundLoop": {
+ "description": [
+ "SoundLoop"
+ ],
+ "params": {
+ "callback": "Function: this function will be called on each iteration of theloop",
+ "interval": "Number|String: (Optional) amount of time (if a number) or beats (if a string, following Tone.Time convention) for each iteration of the loop. Defaults to 1 second."
+ },
+ "musicalTimeMode": {
+ "description": [
+ "musicalTimeMode uses Tone.Time convention true if string, false if number"
+ ]
+ },
+ "maxIterations": {
+ "description": [
+ "Set a limit to the number of loops to play. defaults to Infinity"
+ ]
+ },
+ "start": {
+ "description": [
+ "Start the loop"
+ ],
+ "params": {
+ "timeFromNow": "Number: (Optional) schedule a starting time"
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop the loop"
+ ],
+ "params": {
+ "timeFromNow": "Number: (Optional) schedule a stopping time"
+ }
+ },
+ "pause": {
+ "description": [
+ "Pause the loop"
+ ],
+ "params": {
+ "timeFromNow": "Number: (Optional) schedule a pausing time"
+ }
+ },
+ "syncedStart": {
+ "description": [
+ "Synchronize loops. Use this method to start two more more loops in synchronization or to start a loop in synchronization with a loop that is already playing This method will schedule the implicit loop in sync with the explicit master loop i.e. loopToStart.syncedStart(loopToSyncWith)"
+ ],
+ "params": {
+ "otherLoop": "Object: a p5.SoundLoop to sync with",
+ "timeFromNow": "Number: (Optional) Start the loops in sync after timeFromNow seconds"
+ }
+ },
+ "bpm": {
+ "description": [
+ "Getters and Setters, setting any paramter will result in a change in the clock's frequency, that will be reflected after the next callback beats per minute (defaults to 60)"
+ ]
+ },
+ "timeSignature": {
+ "description": [
+ "number of quarter notes in a measure (defaults to 4)"
+ ]
+ },
+ "interval": {
+ "description": [
+ "length of the loops interval"
+ ]
+ },
+ "iterations": {
+ "description": [
+ "how many times the callback has been called so far"
+ ]
+ }
+ },
+ "p5.Compressor": {
+ "description": [
+ "Compressor is an audio effect class that performs dynamics compression on an audio input source. This is a very commonly used technique in music and sound production. Compression creates an overall louder, richer, and fuller sound by lowering the volume of louds and raising that of softs. Compression can be used to avoid clipping (sound distortion due to peaks in volume) and is especially useful when many sounds are played at once. Compression can be used on individual sound sources in addition to the master output. ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "compressor": {
+ "description": [
+ "The p5.Compressor is built with a Web Audio Dynamics Compressor Node "
+ ]
+ },
+ "process": {
+ "description": [
+ "Performs the same function as .connect, but also accepts optional parameters to set compressor's audioParams"
+ ],
+ "params": {
+ "src": "Object: Sound source to be connected",
+ "attack": "Number: (Optional) The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: (Optional) The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: (Optional) The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
+ },
+ "set": {
+ "description": [
+ "Set the parameters of a compressor."
+ ],
+ "params": {
+ "attack": "Number: The amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "knee": "Number: A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "ratio": "Number: The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1"
+ }
+ },
+ "attack": {
+ "description": [
+ "Get current attack or set value w/ time ramp"
+ ],
+ "params": {
+ "attack": "Number: (Optional) Attack is the amount of time (in seconds) to reduce the gain by 10dB, default = .003, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "knee": {
+ "description": [
+ "Get current knee or set value w/ time ramp"
+ ],
+ "params": {
+ "knee": "Number: (Optional) A decibel value representing the range above the threshold where the curve smoothly transitions to the \"ratio\" portion. default = 30, range 0 - 40",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "ratio": {
+ "description": [
+ "Get current ratio or set value w/ time ramp"
+ ],
+ "params": {
+ "ratio": "Number: (Optional) The amount of dB change in input for a 1 dB change in output default = 12, range 1 - 20",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "threshold": {
+ "description": [
+ "Get current threshold or set value w/ time ramp"
+ ],
+ "params": {
+ "threshold": "Number: The decibel value above which the compression will start taking effect default = -24, range -100 - 0",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "release": {
+ "description": [
+ "Get current release or set value w/ time ramp"
+ ],
+ "params": {
+ "release": "Number: The amount of time (in seconds) to increase the gain by 10dB default = .25, range 0 - 1",
+ "time": "Number: (Optional) Assign time value to schedule the change in value"
+ }
+ },
+ "reduction": {
+ "description": [
+ "Return the current reduction value"
+ ],
+ "returns": "Number: Value of the amount of gain reduction that is applied to the signal"
+ }
+ },
+ "p5.SoundRecorder": {
+ "description": [
+ "Record sounds for playback and/or to save as a .wav file. The p5.SoundRecorder records all sound output from your sketch, or can be assigned a specific source with setInput(). ",
+ "The record() method accepts a p5.SoundFile as a parameter. When playback is stopped (either after the given amount of time, or with the stop() method), the p5.SoundRecorder will send its recording to that p5.SoundFile for playback."
+ ],
+ "setInput": {
+ "description": [
+ "Connect a specific device to the p5.SoundRecorder. If no parameter is given, p5.SoundRecorer will record all audible p5.sound from your sketch."
+ ],
+ "params": {
+ "unit": "Object: (Optional) p5.sound object or a web audio unit that outputs sound"
+ }
+ },
+ "record": {
+ "description": [
+ "Start recording. To access the recording, provide a p5.SoundFile as the first parameter. The p5.SoundRecorder will send its recording to that p5.SoundFile for playback once recording is complete. Optional parameters include duration (in seconds) of the recording, and a callback function that will be called once the complete recording has been transfered to the p5.SoundFile."
+ ],
+ "params": {
+ "soundFile": "p5.SoundFile: p5.SoundFile",
+ "duration": "Number: (Optional) Time (in seconds)",
+ "callback": "Function: (Optional) The name of a function that will be called once the recording completes"
+ }
+ },
+ "stop": {
+ "description": [
+ "Stop the recording. Once the recording is stopped, the results will be sent to the p5.SoundFile that was given on .record(), and if a callback function was provided on record, that function will be called."
+ ]
+ }
+ },
+ "p5.PeakDetect": {
+ "description": [
+ "PeakDetect works in conjunction with p5.FFT to look for onsets in some or all of the frequency spectrum. ",
+ " To use p5.PeakDetect, call update in the draw loop and pass in a p5.FFT object. ",
+ " You can listen for a specific part of the frequency spectrum by setting the range between freq1 and freq2. ",
+ "threshold is the threshold for detecting a peak, scaled between 0 and 1. It is logarithmic, so 0.1 is half as loud as 1.0. ",
+ " The update method is meant to be run in the draw loop, and frames determines how many loops must pass before another peak can be detected. For example, if the frameRate() = 60, you could detect the beat of a 120 beat-per-minute song with this equation: framesPerPeak = 60 / (estimatedBPM / 60 ); ",
+ " Based on example contribtued by @b2renger, and a simple beat detection explanation by Felix Turner . "
+ ],
+ "params": {
+ "freq1": "Number: (Optional) lowFrequency - defaults to 20Hz",
+ "freq2": "Number: (Optional) highFrequency - defaults to 20000 Hz",
+ "threshold": "Number: (Optional) Threshold for detecting a beat between 0 and 1 scaled logarithmically where 0.1 is 1/2 the loudness of 1.0. Defaults to 0.35.",
+ "framesPerPeak": "Number: (Optional) Defaults to 20."
+ },
+ "isDetected": {
+ "description": [
+ "isDetected is set to true when a peak is detected."
+ ]
+ },
+ "update": {
+ "description": [
+ "The update method is run in the draw loop. ",
+ "Accepts an FFT object. You must call .analyze() on the FFT object prior to updating the peakDetect because it relies on a completed FFT analysis."
+ ],
+ "params": {
+ "fftObject": "p5.FFT: A p5.FFT object"
+ }
+ },
+ "onPeak": {
+ "description": [
+ "onPeak accepts two arguments: a function to call when a peak is detected. The value of the peak, between 0.0 and 1.0, is passed to the callback."
+ ],
+ "params": {
+ "callback": "Function: Name of a function that will be called when a peak is detected.",
+ "val": "Object: (Optional) Optional value to pass into the function when a peak is detected."
+ }
+ }
+ },
+ "p5.Gain": {
+ "description": [
+ "A gain node is useful to set the relative volume of sound. It's typically used to build mixers."
+ ],
+ "setInput": {
+ "description": [
+ "Connect a source to the gain node."
+ ],
+ "params": {
+ "src": "Object: p5.sound / Web Audio object with a sound output."
+ }
+ },
+ "connect": {
+ "description": [
+ "Send output to a p5.sound or web audio object"
+ ],
+ "params": {
+ "unit": "Object"
+ }
+ },
+ "disconnect": {
+ "description": [
+ "Disconnect all output."
+ ]
+ },
+ "amp": {
+ "description": [
+ "Set the output level of the gain node."
+ ],
+ "params": {
+ "volume": "Number: amplitude between 0 and 1.0",
+ "rampTime": "Number: (Optional) create a fade that lasts rampTime",
+ "timeFromNow": "Number: (Optional) schedule this event to happen seconds from now"
+ }
+ }
+ },
+ "p5.Distortion": {
+ "description": [
+ "A Distortion effect created with a Waveshaper Node, with an approach adapted from Kevin Ennis ",
+ "This class extends p5.Effect . Methods amp() , chain() , drywet() , connect() , and disconnect() are available."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ },
+ "WaveShaperNode": {
+ "description": [
+ "The p5.Distortion is built with a Web Audio WaveShaper Node ."
+ ]
+ },
+ "process": {
+ "description": [
+ "Process a sound source, optionally specify amount and oversample values."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
+ },
+ "set": {
+ "description": [
+ "Set the amount and oversample of the waveshaper distortion."
+ ],
+ "params": {
+ "amount": "Number: (Optional) Unbounded distortion amount. Normal values range from 0-1.",
+ "oversample": "String: (Optional) 'none', '2x', or '4x'."
+ }
+ },
+ "getAmount": {
+ "description": [
+ "Return the distortion amount, typically between 0-1."
+ ],
+ "returns": "Number: Unbounded distortion amount. Normal values range from 0-1."
+ },
+ "getOversample": {
+ "description": [
+ "Return the oversampling."
+ ],
+ "returns": "String: Oversample can either be 'none', '2x', or '4x'."
}
}
-}
+}
\ No newline at end of file
diff --git a/src/data/zh-Hans.yml b/src/data/zh-Hans.yml
index 61a9457e0e..075d0d843c 100644
--- a/src/data/zh-Hans.yml
+++ b/src/data/zh-Hans.yml
@@ -1,1059 +1,1495 @@
-Skip-To-Content: "跳到内容"
-Language-Settings: "语言设定"
-Sidebar-Title: "网站导航"
-Home: "主页"
-Editor: "编辑器"
-Download: "下载"
-Donate: "Donate"
-Start: "入门"
-Reference: "参考文献"
-Libraries: "程式库"
-Learn: "学习"
-Examples: "范例"
-Books: "书籍"
-Community: "社群"
-Contribute: "贡献"
-Forum: "论坛"
-Showcase: "Showcase"
-footerxh1: "归功于"
-footer1: "p5.js 的原"
-footer2: "并在"
-footer3: "和"
-footer4: "的支持下由其合作社群所开发。形象及平面设计"
-
-tagline1: "Processing 的趣味结合 JavaScript 的俏皮"
-tagline2: "Processing 的简易性结合 JavaScript 的灵活性"
-tagline3: "Processing 的直觉结合 JavaScript 的力量"
-tagline4: "Processing 的创意结合 JavaScript 的活跃性"
-tagline5: "Processing 的社群结合 JavaScript 的社群"
-tagline6: "Processing 的力量结合 JavaScript 的范围"
-tagline7: "The P5.js community stands in solidarity with Black Lives Matter."
-
+Skip-To-Content: 跳到内容
+Language-Settings: 语言设定
+Sidebar-Title: 网站导航
+Home: 主页
+Editor: 编辑器
+Download: 下载
+Donate: 捐献
+Start: 入门
+Reference: 参考文献
+Libraries: 程式库
+Learn: 学习
+Examples: 范例
+Books: 书籍
+Community: 社群
+Contribute: 贡献
+Forum: 论坛
+Showcase: 案例展示
+footerxh1: 归功于
+footer1: p5.js 目前由
+footer2: 的原
+footer3: 并在
+footer4: 和
+footer5: 的支持下由其合作社群所开发。形象及平面设计
+tagline1: Processing 的趣味结合 JavaScript 的俏皮
+tagline2: Processing 的简易性结合 JavaScript 的灵活性
+tagline3: Processing 的直觉结合 JavaScript 的力量
+tagline4: Processing 的创意结合 JavaScript 的活跃性
+tagline5: Processing 的社群结合 JavaScript 的社群
+tagline6: Processing 的力量结合 JavaScript 的范围
+tagline7: The P5.js community stands in solidarity with Black Lives Matter.
home:
- start-creating: "使用 p5 编辑器开始创作!"
- p1xh1: "你好!"
- p1x1: "p5.js 是个 JavaScript 创意编程程式库,其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人!p5.js 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。"
- p1x2: "p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外,您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图,这包括了 HTML5 物件如文字、输入框、视屏、摄像头及音频。"
- p2xh2: "社群"
- p2x1: "我们声援及支持所有人,不论他们来自不同性别认同、性取向、种族、国籍、语言、神经型、大小、能力、阶级、宗教、文化、次文化、政治观点、年龄、技能等级、职业或背景。我们了解并不是所有人都有多余的时间、金钱或能力以活跃的参与社群活动但我们同时认可及鼓励各种参与方式。我们致力于促进障碍消除及培养能力。我们都是学习者。"
- p2x2: "p5.js 是 "
- p2x3: " 于今日的网页的诠释。我们的活动及运作由 "
- p2x4: " 所支持。"
- p2x5: "了解更多关于"
- p2x6: "我们的社群"
- p2x7: "。"
-
- p3xh2: "入门"
- p3xp1: "使用 "
- p3xp2: " 制作您的第一个绘图。以了解更多关于如何使用 p5.js 绘图及其各种功能请参考"
- p3xp3: "入门页面"
- p3xp4: "及"
- p3xp5: "参考文献"
- p3xp6: "。"
-
- p4xh2: "参与"
- p4xp1: "我们有各种方式让您贡献给 p5.js:"
- p4xp2: "参与方式包括"
- p4xp3: "分享您制作的项目!"
- p4xp4: "使用 p5.js 教学。"
- p4xp5: "举办个聚会。"
- p4xp6: "贡献代码。"
-
- sketch_credits: "Sketch Credits"
- sketch_info: "Hunminjeongeum2020 created by Seonghyeon Kim"
-
+ start-creating: 使用 p5 编辑器开始创作!
+ p1xh1: 你好!
+ p1x1: >-
+ p5.js 是个 JavaScript 创意编程程式库,其专注在让编程更易于使用及更加广泛的包容艺术家、设计师、教育家、初学者以及任何其他人!p5.js
+ 是个免费及开源的软件因为我们相信所有人都应该能自由使用软件及用于学习软件的工具。
+ p1x2: >-
+ p5.js 使用绘图的比喻并有一副完整的绘画功能。除此之外,您也不单限于您的绘图画布。您可以将您整个浏览器页面当作您的绘图,这包括了 HTML5
+ 物件如文字、输入框、视屏、摄像头及音频。
+ p2xh2: 社群
+ p2x1: >-
+ 我们声援及支持所有人,不论他们来自不同性别认同、性取向、种族、国籍、语言、神经型、大小、能力、阶级、宗教、文化、次文化、政治观点、年龄、技能等级、职业或背景。我们了解并不是所有人都有多余的时间、金钱或能力以活跃的参与社群活动但我们同时认可及鼓励各种参与方式。我们致力于促进障碍消除及培养能力。我们都是学习者。
+ p2x2: 'p5.js 是 '
+ p2x3: ' 于今日的网页的诠释。我们的活动及运作由 '
+ p2x4: ' 所支持。'
+ p2x5: 了解更多关于
+ p2x6: 我们的社群
+ p2x7: 。
+ p3xh2: 入门
+ p3xp1: '使用 '
+ p3xp2: ' 制作您的第一个绘图。以了解更多关于如何使用 p5.js 绘图及其各种功能请参考'
+ p3xp3: 入门页面
+ p3xp4: 及
+ p3xp5: 参考文献
+ p3xp6: 。
+ p4xh2: 参与
+ p4xp1: 我们有各种方式让您贡献给 p5.js:
+ p4xp2: 参与方式包括
+ p4xp3: 分享您制作的项目!
+ p4xp4: 使用 p5.js 教学。
+ p4xp5: 举办个聚会。
+ p4xp6: 贡献代码。
+ sketch_credits: Sketch Credits
+ sketch_info: Hunminjeongeum2020 created by Seonghyeon Kim
copyright:
- copyright-title: "版权信息"
- copyright1: "p5.js 编程库是个免费开源的软件;您可以在 Free Software Foundation 的"
- copyright2: " 2.1版条款下分布及/或修改该软件。"
- copyright3: "参考文献是在"
- copyright4: "许可下允许任何人重用该文献只要该用处为非商业化及原作者有被归功。"
-
+ copyright-title: 版权信息
+ copyright1: p5.js 编程库是个免费开源的软件;您可以在 Free Software Foundation 的
+ copyright2: ' 2.1版条款下分布及/或修改该软件。'
+ copyright3: 参考文献是在
+ copyright4: 许可下允许任何人重用该文献只要该用处为非商业化及原作者有被归功。
get started:
- get-started-title: "入门"
- get-started1: "This page walks you through setting up a p5.js project and making your first sketch."
- get-started2: "The easiest way to start is using the "
- get-started3: "p5.js editor"
- get-started4: ", you can open the web editor and can scroll down to "
- get-started5: "Your First Sketch"
- get-started6: ". If you would like to work on the the desktop version of p5.js you can scroll down to"
- get-started7: "downloading instructions"
- settingUp-title: "Setting up p5.js with an editor on your own computer"
- download-title: "Downloading a copy of the p5.js library"
- hosted-title: "Using a hosted version of the p5.js library"
- download1: "最简易的起点是使用"
- download2: "p5.js 完整版"
- download3: "下载所提供的空白范例。"
- download4: "查看 index.html 您可以发现其中有个 p5.js 的链接。如果您想要使用极简化的档案(以加速网页加载的速度),将链接档案名改为 p5.min.js"
- download5: "另外,您也可以选择链接去网络上的 p5.js 文档。所有 p5.js 版本都被上载到多个 CDN (Content Delivery Network) 上,您可在此链接参考所有 p5.js 版本:"
- download6: "。接下来您只需要将链接改为:"
- download7: "一个极简但完整的 HTML 档案如下:"
- environment-title: "编程环境"
- environment1: "您可以使用任何"
- environmentlink: "https://zh.wikipedia.org/wiki/%E6%BA%90%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8"
- environment2: "代码编程器"
- environment3: "。以下为设置"
- environment4: "的步骤。其他不错的代码编程器包括"
- environment5: "和"
- environment6: "如果您使用荧幕阅读器但不使用 p5 Editor,您可考虑使用 "
- environment7: " 或 "
- environment8: "开启 Sublime。选择 File 目录项目然后选择 Open... 接着在对话框中选择含有您的 .html 及 .js 档案的文件夹。在窗口左边的文件栏您应该能看到文件夹的名字在最上方而往下都是该文件夹里面所含的档案。"
- environment9: "点击 sketch.js 档案即会在右边开启该档案,您也能在这时更改该档案。"
- environment10: "p5 starter code opened up in sublime editor."
- environment11: "在文件浏览器内双击 index.html 以在您的网页浏览器内开启该档案,或您也可以直接在网页浏览器内的网址栏输入:"
- environment12: "file:///html文件在硬盘上的位置/"
- environment13: "以查看您的绘图。"
- your-first-sketch-title: "Your First Sketch"
- your-first-sketch-intro1: "In the "
- your-first-sketch-intro2: "https://editor.p5js.org/"
- your-first-sketch-intro3: "p5.js web editor"
- your-first-sketch-intro4: " you should find the following code:"
- your-first-sketch1: "After the "
- your-first-sketch2: " include this line of code: "
- your-first-sketch3: "Now your code should be like this: "
- your-first-sketch4: "The line you just added draws an ellipse, with its center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels."
- your-first-sketch5: "On the editor press play to display your code in action!"
- your-first-sketch6: "If you are using a screen reader, you must turn on the accessible outputs in the p5 online editor, outside the editor you must add the accessibility library in your html. To learn more visit "
- your-first-sketch7: "using p5 with a screen reader tutorial"
- your-first-sketch8: "If you've typed everything correctly, this will appear in the display window:"
- your-first-sketch9: "canvas has a circle of width and height 50 at position 80 x and 80 y"
- your-first-sketch10: "If nothing appears, the editor may be having trouble understanding what you’ve typed. If this happens, make sure that you've copied the example code exactly: the numbers should be contained within parentheses and have commas between each of them, the line should end with a semicolon, and ellipse has to be spelled correctly."
- your-first-sketch11: "One of the most difficult things about getting started with programming is that you have to be very specific about the syntax. The browser isn't always smart enough to know what you mean, and can be quite fussy about the placement of punctuation. You'll get used to it with a little practice. In the bottom left of the editor you will find the console section. Here, you can find messages from the editor with details about any errors it encounters."
- your-first-sketch12: "Next, we'll skip ahead to a sketch that's a little more exciting. Modify the last example to try this:"
- your-first-sketch13: "This program creates a canvas that is 400 pixels wide and 400 pixels high, and then starts drawing white circles at the position of the mouse. When a mouse button is pressed, the circle color changes to black. Run the code, move the mouse, and click to experience it."
- your-first-sketch14: "canvas has multiple circles drawn on it following the path of the mouse"
- first-sketch-heading1: "Code snippet with ellipse"
- first-sketch-heading2: "Note for screenreader users"
- first-sketch-heading3: "Code snippet with interaction"
- what-next-title: "下一步"
- learn1: "Check out the "
- learn2: "learn page"
- learn3: " and "
- learn4: "examples page"
- learn5: " for more."
- learn6: "Watch "
- learn7: "The Coding Train"
- learn8: " and "
- learn9: "Kadenze"
- learn10: " video tutorials."
- reference1: "View the "
- reference2: " reference"
- reference3: " for full documentation."
- learn11: "If you wish to use p5 with a screenreader, check out the "
- learn12: "p5 with a screenreader tutorial"
- processing-transition1: "If you have used Processing in the past, read the "
- processing-transition2: "https://github.com/processing/p5.js/wiki/Processing-transition"
- processing-transition3: "Processing transition tutorial"
- processing-transition4: " to learn how to convert from Processing to p5.js, and the main differences between them."
- book1: "Parts of this tutorial were adapted from the book, Getting Started with p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015. Copyright © 2015. All rights reserved. Last modified at the p5.js 2019 Contributors Conference."
-
+ get-started-title: 入门
+ get-started1: >-
+ This page walks you through setting up a p5.js project and making your first
+ sketch.
+ get-started2: 'The easiest way to start is using the '
+ get-started3: p5.js editor
+ get-started4: ', you can open the web editor and can scroll down to '
+ get-started5: Your First Sketch
+ get-started6: >-
+ . If you would like to work on the the desktop version of p5.js you can
+ scroll down to
+ get-started7: downloading instructions
+ get-started-button: Copy
+ settingUp-title: Setting up p5.js with an editor on your own computer
+ download-title: Downloading a copy of the p5.js library
+ hosted-title: Using a hosted version of the p5.js library
+ download1: 最简易的起点是使用
+ download2: p5.js 完整版
+ download3: 下载所提供的空白范例。
+ download8: 'After download, you need to set up a local server. See instructions '
+ download9: here
+ download10: >-
+ . Run your local server within the downloaded folder and on your browser, go
+ to
+ download11: 'http://localhost:{your-port-num}/empty-example'
+ download4: >-
+ 查看 index.html 您可以发现其中有个 p5.js 的链接。如果您想要使用极简化的档案(以加速网页加载的速度),将链接档案名改为
+ p5.min.js
+ download5: >-
+ 另外,您也可以选择链接去网络上的 p5.js 文档。所有 p5.js 版本都被上载到多个 CDN (Content Delivery Network)
+ 上,您可在此链接参考所有 p5.js 版本:
+ download6: 。接下来您只需要将链接改为:
+ download7: 一个极简但完整的 HTML 档案如下:
+ environment-title: 编程环境
+ environment1: 您可以使用任何
+ environmentlink: >-
+ https://zh.wikipedia.org/wiki/%E6%BA%90%E4%BB%A3%E7%A0%81%E7%BC%96%E8%BE%91%E5%99%A8
+ environment2: 代码编程器
+ environment3: 。以下为设置
+ environment4: 的步骤。其他不错的代码编程器包括
+ environment5: 和
+ environment6: '如果您使用荧幕阅读器但不使用 p5 Editor,您可考虑使用 '
+ environment7: ' 或 '
+ environment8: >-
+ 开启 Sublime。选择 File 目录项目然后选择 Open... 接着在对话框中选择含有您的 .html 及 .js
+ 档案的文件夹。在窗口左边的文件栏您应该能看到文件夹的名字在最上方而往下都是该文件夹里面所含的档案。
+ environment9: 点击 sketch.js 档案即会在右边开启该档案,您也能在这时更改该档案。
+ environment10: p5 starter code opened up in sublime editor.
+ environment11: 在文件浏览器内双击 index.html 以在您的网页浏览器内开启该档案,或您也可以直接在网页浏览器内的网址栏输入:
+ environment12: 'file:///html文件在硬盘上的位置/'
+ environment14: ' (or '
+ environment15: 'http://localhost:{your-port-num}/empty-example'
+ environment16: ' if you are using a local server)'
+ environment13: 以查看您的绘图。
+ your-first-sketch-title: Your First Sketch
+ your-first-sketch-intro1: 'In the '
+ your-first-sketch-intro2: 'https://editor.p5js.org/'
+ your-first-sketch-intro3: p5.js web editor
+ your-first-sketch-intro4: ' you should find the following code:'
+ your-first-sketch1: 'After the '
+ your-first-sketch2: ' include this line of code: '
+ your-first-sketch3: 'Now your code should be like this: '
+ your-first-sketch4: >-
+ The line you just added draws an ellipse, with its center 50 pixels over
+ from the left and 50 pixels down from the top, with a width and height of 80
+ pixels.
+ your-first-sketch5: On the editor press play to display your code in action!
+ your-first-sketch6: >-
+ If you are using a screen reader, you must turn on the accessible outputs in
+ the p5 online editor, outside the editor you must add the accessibility
+ library in your html. To learn more visit
+ your-first-sketch7: using p5 with a screen reader tutorial
+ your-first-sketch8: >-
+ If you've typed everything correctly, this will appear in the display
+ window:
+ your-first-sketch9: canvas has a circle of width and height 50 at position 80 x and 80 y
+ your-first-sketch10: >-
+ If nothing appears, the editor may be having trouble understanding what
+ you’ve typed. If this happens, make sure that you've copied the example code
+ exactly: the numbers should be contained within parentheses and have commas
+ between each of them, the line should end with a semicolon, and ellipse has
+ to be spelled correctly.
+ your-first-sketch11: >-
+ One of the most difficult things about getting started with programming is
+ that you have to be very specific about the syntax. The browser isn't always
+ smart enough to know what you mean, and can be quite fussy about the
+ placement of punctuation. You'll get used to it with a little practice. In
+ the bottom left of the editor you will find the console section. Here, you
+ can find messages from the editor with details about any errors it
+ encounters.
+ your-first-sketch12: >-
+ Next, we'll skip ahead to a sketch that's a little more exciting. Modify the
+ last example to try this:
+ your-first-sketch13: >-
+ This program creates a canvas that is 400 pixels wide and 400 pixels high,
+ and then starts drawing white circles at the position of the mouse. When a
+ mouse button is pressed, the circle color changes to black. Run the code,
+ move the mouse, and click to experience it.
+ your-first-sketch14: canvas has multiple circles drawn on it following the path of the mouse
+ first-sketch-heading1: Code snippet with ellipse
+ first-sketch-heading2: Note for screenreader users
+ first-sketch-heading3: Code snippet with interaction
+ what-next-title: 下一步
+ learn1: 'Check out the '
+ learn2: learn page
+ learn3: ' and '
+ learn4: examples page
+ learn5: ' for more.'
+ learn6: 'Watch '
+ learn7: The Coding Train
+ learn8: ' and '
+ learn9: Kadenze
+ learn10: ' video tutorials.'
+ reference1: 'View the '
+ reference2: ' reference'
+ reference3: ' for full documentation.'
+ learn11: 'If you wish to use p5 with a screenreader, check out the '
+ learn12: p5 with a screenreader tutorial
+ processing-transition1: 'If you have used Processing in the past, read the '
+ processing-transition2: 'https://github.com/processing/p5.js/wiki/Processing-transition'
+ processing-transition3: Processing transition tutorial
+ processing-transition4: ' to learn how to convert from Processing to p5.js, and the main differences between them.'
+ book1: >-
+ Parts of this tutorial were adapted from the book, Getting Started with
+ p5.js, by Lauren McCarthy, Casey Reas, and Ben Fry, O'Reilly / Make 2015.
+ Copyright © 2015. All rights reserved. Last modified at the p5.js 2019
+ Contributors Conference.
download:
- Download: "下载"
- download-intro: "欢迎!虽然此页面的标题为“下载”,此页面其实包括了一系列可以用来下载程式库或在网上开始使用程式库的链接。我们在这里尝试将初学者最可能需要的链接摆在第一位,而较有经验的使用者能在此页面下方找到其他有用的链接。"
- editor-title: "编辑器"
- p5.js-editor: "p5.js 编辑器"
- p5.js-editor-intro: "此链接将开启 p5.js 编辑器网页已让您能直接开始使用 p5.js。"
- editor-includes: "使用 p5.js Editor 开始编写程式,不需要任何另外的设置!"
- complete-library-title: "完整程式库"
- complete-library-intro1: "这是个包含 p5.js 程式库、p5.sound 附加程式库及范例项目的下载文件。它并不包含编辑器。请参考"
- complete-library-intro2: "入门"
- complete-library-intro3: "以了解如何设置一个 p5.js 项目。"
- p5.js-complete: "p5.js 完整版"
- includes-1: "包含"
- includes-2: "p5.js、p5.sound.js 及空白范例"
- includes-3: "版本"
- single-files-title: "单一文件"
- single-files-intro: "这些是 p5.js 程式库文件的下载网址或网上链接。它们并不包括任何其他文件。"
- single-file: "单一文件:"
- p5.js-uncompressed: "易读版本"
- compressed: "极简化版本"
- link: "链接:"
- statically-hosted-file: "静态链接文件"
- etc-title: "Github 资源"
- older-releases: "旧版本/更新日志"
- github-repository: "程式代码库(GitHub)"
- report-bugs: "报告问题、缺陷及错误"
- supported-browsers: "浏览器支持"
-
- support-title: "支持 p5.js!"
- support-options: "支持方式"
- support-1: "p5.js 是个免费及开源的软件。我们想要使我们的社群尽可能开放及包容。您能成为 Processing Foundation 的"
- support-2: "会员"
- support-3: "以帮我助们的工作,您能以个人、工作室或教育机构的身份参与。您也能单"
- support-4: "捐款"
- support-5: "而不需要成为会员。"
- support-6: "个人"
- support-7: "$25"
- support-8: "工作室"
- support-9: "$250"
- support-10: "教育机构"
- support-11: "$5/学生或 $500"
- support-12: "您的会员籍将帮助软件开发(支持 p5.js、Processing.py、Processing 给 Android 与 ARM 设备、教育资源如编程范例与教程、"
- support-13: "奖学金"
- support-14: "及"
- support-15: "社群活动)"
- support-16: "。我们需要您的帮助!"
- support-17: "p5.js 贡献者会议在匹兹堡的 CMU STUDIO for Creative Inquiry 举行(图像由:Taeyoon Choi)"
- support-18: "Processing Fellow Saskia Freeke 在伦敦组织的 Code Liberation x Processing (代码解放 x Processing)研讨会(图像由:Code Liberation Foundation)"
- support-19: "SFPC主持的 “学习如何教导,教导如何学习” 会议(图像由Kira Simon-Kennedy)"
- support-20: "Processing Foundation Fellow Cassie Tarakajian 在 Code Art Miami 组织的研讨会(图像由:Christian Arévalo Photography)"
- support-21: "Taeyoon Choi 及 ASL(美式手语)翻译员在 Signing Coders p5.js(p5.js 手语编程员)研讨会(图像由:Taeyoon Choi)"
- support-22: "Google Summer of Code(Google 夏日程式码大赛)开幕(图像由:Taeyoon Choi)"
- support-23: "Processing Foundation Fellow Cassie Tarakajian 在 Code Art Miami 组织的研讨会(图像由:Christian Arévalo Photography)"
- support-24: "Luisa Pereira 及 Yeseul Song 帮助举办一个手语为主的 p5.js 研讨会,由 Taeyoon Choi 带领(图像由:Taeyoon Choi)"
- support-25: "p5.js 贡献者会议在匹兹堡的 CMU STUDIO for Creative Inquiry 举行(图像由:Taeyoon Choi)"
- support-26: "Processing Fellow Digital Citizens Lab 在 International Center of Photography 所主持的 STEM(科学、科技、工程、数学)教学小组(图像由:International Center of Photography)"
- support-27: "在智利圣地亚哥的 p5.js 研讨会的参与者,由 Aarón Montoya-Moraga 带领(图像由:Aarón Montoya-Moraga)"
- support-28: "Claire Kearney-Volpe 帮助举办一个手语为主的 p5.js 研讨会,由 Taeyoon Choi 带领(图像由:Taeyoon Choi)"
- support-29: "Processing Foundation Fellow DIY Girls 在洛杉矶举办的创意编程课程(图像由:DIY Girls)"
- support-30: "Processing Fellow Digital Citizens Lab"
- support-31: "UCLA DMA 及 NYU ITP 的 p5.js 聚会"
- support-32: "Processing Foundation"
- support-33: "在原本的 Processing 软件多过十年的工作后成立于 2012 年。Processing Foundation 原旨为提升视觉艺术界的软件素养及提升科技界的视觉素养 — 并让这些领域更加接近不同的社群。我们的目标是赋予来自不同兴趣及背景的人学习编程与用编程制作创意作品的权利,尤其是那些可能无法得到这些工具及资源的人。"
- support-17-alt: ""
- support-18-alt: ""
- support-19-alt: ""
- support-20-alt: ""
- support-21-alt: ""
- support-22-alt: ""
- support-23-alt: ""
- support-24-alt: ""
- support-25-alt: ""
- support-26-alt: ""
- support-27-alt: ""
- support-28-alt: ""
- support-29-alt: ""
- support-30-alt: ""
- support-31-alt: ""
-
+ Download: 下载
+ download-intro: >-
+ 欢迎!虽然此页面的标题为“下载”,此页面其实包括了一系列可以用来下载程式库或在网上开始使用程式库的链接。我们在这里尝试将初学者最可能需要的链接摆在第一位,而较有经验的使用者能在此页面下方找到其他有用的链接。
+ editor-title: 编辑器
+ p5.js-editor: p5.js 编辑器
+ p5.js-editor-intro: 此链接将开启 p5.js 编辑器网页已让您能直接开始使用 p5.js。
+ editor-includes: 使用 p5.js Editor 开始编写程式,不需要任何另外的设置!
+ complete-library-title: 完整程式库
+ complete-library-intro1: 这是个包含 p5.js 程式库、p5.sound 附加程式库及范例项目的下载文件。它并不包含编辑器。请参考
+ complete-library-intro2: 入门
+ complete-library-intro3: 以了解如何设置一个 p5.js 项目。
+ p5.js-complete: p5.js 完整版
+ includes-1: 包含
+ includes-2: p5.js、p5.sound.js 及空白范例
+ includes-3: 版本
+ single-files-title: 单一文件
+ single-files-intro: 这些是 p5.js 程式库文件的下载网址或网上链接。它们并不包括任何其他文件。
+ single-file: 单一文件:
+ p5.js-uncompressed: 易读版本
+ compressed: 极简化版本
+ link: 链接:
+ statically-hosted-file: 静态链接文件
+ etc-title: Github 资源
+ older-releases: 旧版本/更新日志
+ github-repository: 程式代码库(GitHub)
+ report-bugs: 报告问题、缺陷及错误
+ supported-browsers: 浏览器支持
+ support-title: 支持 p5.js!
+ support-options: 支持方式
+ support-1: 我们需要您的帮助!p5.js 是免费的开源软件。我们希望使我们的社区尽可能的开放和包容。您可以通过向支持 p5.js 的组织
+ support-2: 捐款来支持这项工作。您的捐款可以支持 p5.js 的软件开发、制作范例代码及教程之类的教育资源、
+ support-3: 奖学金
+ support-4: 及
+ support-5: 社群活动。
+ support-17: p5.js 贡献者会议在匹兹堡的 CMU STUDIO for Creative Inquiry 举行(图像由:Taeyoon Choi)
+ support-18: >-
+ Processing Fellow Saskia Freeke 在伦敦组织的 Code Liberation x Processing (代码解放 x
+ Processing)研讨会(图像由:Code Liberation Foundation)
+ support-19: SFPC主持的 “学习如何教导,教导如何学习” 会议(图像由Kira Simon-Kennedy)
+ support-20: >-
+ Processing Foundation Fellow Cassie Tarakajian 在 Code Art Miami
+ 组织的研讨会(图像由:Christian Arévalo Photography)
+ support-21: >-
+ Taeyoon Choi 及 ASL(美式手语)翻译员在 Signing Coders p5.js(p5.js
+ 手语编程员)研讨会(图像由:Taeyoon Choi)
+ support-22: Google Summer of Code(Google 夏日程式码大赛)开幕(图像由:Taeyoon Choi)
+ support-23: >-
+ Processing Foundation Fellow Cassie Tarakajian 在 Code Art Miami
+ 组织的研讨会(图像由:Christian Arévalo Photography)
+ support-24: >-
+ Luisa Pereira 及 Yeseul Song 帮助举办一个手语为主的 p5.js 研讨会,由 Taeyoon Choi
+ 带领(图像由:Taeyoon Choi)
+ support-25: p5.js 贡献者会议在匹兹堡的 CMU STUDIO for Creative Inquiry 举行(图像由:Taeyoon Choi)
+ support-26: >-
+ Processing Fellow Digital Citizens Lab 在 International Center of Photography
+ 所主持的 STEM(科学、科技、工程、数学)教学小组(图像由:International Center of Photography)
+ support-27: 在智利圣地亚哥的 p5.js 研讨会的参与者,由 Aarón Montoya-Moraga 带领(图像由:Aarón Montoya-Moraga)
+ support-28: >-
+ Claire Kearney-Volpe 帮助举办一个手语为主的 p5.js 研讨会,由 Taeyoon Choi 带领(图像由:Taeyoon
+ Choi)
+ support-29: Processing Foundation Fellow DIY Girls 在洛杉矶举办的创意编程课程(图像由:DIY Girls)
+ support-30: Processing Fellow Digital Citizens Lab
+ support-31: UCLA DMA 及 NYU ITP 的 p5.js 聚会
+ support-32: Processing Foundation
+ support-33: >-
+ 在原本的 Processing 软件多过十年的工作后成立于 2012 年。Processing Foundation
+ 原旨为提升视觉艺术界的软件素养及提升科技界的视觉素养 —
+ 并让这些领域更加接近不同的社群。我们的目标是赋予来自不同兴趣及背景的人学习编程与用编程制作创意作品的权利,尤其是那些可能无法得到这些工具及资源的人。
+ support-17-alt: ''
+ support-18-alt: ''
+ support-19-alt: ''
+ support-20-alt: ''
+ support-21-alt: ''
+ support-22-alt: ''
+ support-23-alt: ''
+ support-24-alt: ''
+ support-25-alt: ''
+ support-26-alt: ''
+ support-27-alt: ''
+ support-28-alt: ''
+ support-29-alt: ''
+ support-30-alt: ''
+ support-31-alt: ''
learn:
- learn-title: "学习"
- teach-title2: "Teach"
- learn1: "以下教程将提供更多深入及详细的步骤,专注于特定的主题。请参考"
- learn2: "范例页面"
- learn3: "以查看 p5.js 多种功能的简单范例。"
- introduction-to-p5js-title: "p5.js 简介"
- hello-p5js-title: "Hello p5.js"
- hello-p5js: "This short video will introduce you to the library and what you can do with it."
- getting-started-title: "入门简介"
- getting-started: "欢迎来到 p5.js! 这简介将涵盖 p5.js 的基本设置。"
- p5js-overview-title: "一览 p5.js"
- p5js-overview: "p5.js 主要功能的介绍"
- p5js-processing-title: "p5.js 及 Processing"
- p5js-processing: "两者之间的差别及如何将两者之间互相转换。"
- p5-screen-reader-title: "p5 及荧幕阅读器"
- p5-screen-reader: "设置 p5 以让它可以和荧幕阅读器一起使用。(英文内文)"
- using-local-server-title: "本地伺服器"
- using-local-server: "如何在 Mac OSX、Windows 或 Linux 上设置本地伺服器。"
- p5js-wiki-title: "p5.js wiki"
- p5js-wiki: "Additonal documentation and tutorials contributed by the community"
- connecting-p5js-title: "链接 p5.js"
- creating-libraries-title: "制作程式库"
- creating-libraries: "制作 p5.js 附加程式库。"
- nodejs-and-socketio-title: "node.js 及 socket.io"
- nodejs-and-socketio: "链接 node.js 伺服器及 p5.js,通过 socket.io 通讯。"
- programming-topics-title: "编程问题"
- beyond-the-canvas-title: "画布之外"
- beyond-the-canvas: "创建及控制画布以外的元素。"
- 3d-webgl-title: "3D/WebGL"
- 3d-webgl: "使用 p5.js WebGL 模式制作高级图形程式。"
- color-title: "颜色"
- color: "数码颜色的简介。"
- coordinate-system-and-shapes-title: "坐标系统与图形"
- coordinate-system-and-shapes: "利用坐标系统绘制简单图形。"
- interactivity-title: "互动性"
- interactivity: "鼠标与键盘的互动简介。"
- program-flow-title: "程序流程"
- program-flow: "p5.js 控制程序流程简介。"
- curves-title: "曲线"
- curves: "介绍 p5.js 中的三种曲线:弧形,样条曲线和 Bézier 曲线。"
- becoming-a-better-programmer-title: "成为更好的程式设计师"
- debugging-title: "调试"
- debugging: "调试程序的简介。"
- optimizing-title: "优化 p5.js 程式"
- optimizing: "此教程包含技巧及窍门以进一步优化您的程式,使它执行得更快更顺畅。"
- test-driven-development-title: "单元测试及测试驱动开发"
- test-driven-development: "避免安装时不必要的烦恼。什么是单元测试?如何使用单元测试?作者 Andy Timmons。"
- contributing-to-the-community-title: "回馈社群"
- development-title: "开发"
- development: "开发设置简介及一览。"
- looking-inside-title: "窥看 p5"
- looking-inside: "一个简单易懂的教程,当中含括了 p5.js 源代码的文件格局及开发工具,作者 Luisa Pereira。"
- writing-tutorial-title: "编写教程"
- writing-tutorial: "编写 p5.js 教程的指南。"
- writing-a-tutorial-title: "p5.js 回馈指南"
- writing-a-tutorial-author: "教程作者为 Tega Brain。"
- writing-a-tutorial-1: "我们欢迎教育家、合作者和一般爱好者开发更多 p5.js 教程。p5.js 旨在让创意编程及开源软件开发更易接近及吸引更多元化的社群,同时我们也很高兴能够公开的发布 p5.js 开发的完整过程及教程。我们现有的教程含括了各种课题如:学习使用 p5.js、编程技巧及如何帮助开发开源项目。"
- writing-a-tutorial-2: "我们欢迎任何人提交全新教程,这份指南将包括新教程的提议、准备和提交的所需步骤。"
- writing-a-tutorial-how-start-title: "如何开始:"
- writing-a-tutorial-how-start-1: "先确定您所建议的课题尚未被涵盖,在此链接有"
- writing-a-tutorial-how-start-2: "一个列表"
- writing-a-tutorial-how-start-3: "列出了正在进行中的教程。如果您想开发的课题被列为正在进行中 (in progress),您或许能帮助完成该项目或为现有的项目做预备发布的工作,您只需联络我们。"
- writing-a-tutorial-how-start-4: "如果您的课题尚未被涵盖及尚未被列为正在进行中,请寄份电子邮件去 education@p5js.org 并简略的讲述您所建议的教程。"
- writing-a-tutorial-how-prepare-title: "如何准备网上 p5.js 教程:"
- writing-a-tutorial-how-prepare-1: "当您以准备发布您的教程,请按着以下步骤准备您的教程给 p5.js 的网页。"
- writing-a-tutorial-how-prepare-2: "将您的教程写在一个命名为 tutorial-name.hbs 的文件并跟从"
- writing-a-tutorial-how-prepare-3: "这基本结构"
- writing-a-tutorial-how-prepare-4: "。如该文件所示,它必须有以下开端:"
- writing-a-tutorial-how-prepare-5: "您的教程文件夹将被置放在 p5.js 网站一个命名为“tutorials”的文件夹内。index.hbs 是"
- writing-a-tutorial-how-prepare-6: "p5.js 教程的主页"
- writing-a-tutorial-how-prepare-7: "而 test-tutorial.hbs 为空白范例教程。"
- writing-a-tutorial-how-prepare-8: "所有内容必须被包含在以下标签内:"
- writing-a-tutorial-how-prepare-9: "内容格式可以使用 <h1>、<h2> 及 <p> 段落标签定义,如"
- writing-a-tutorial-how-prepare-10: "空白范例教程所示。"
- writing-a-tutorial-how-prepare-11: "如果您的教程包含图像,它们必须被置放在 p5 网站的 asset 文件夹,该文件夹位于 src/assets/learn/test-tutorial/images 如以下所示。"
- writing-a-tutorial-how-prepare-12: "以在 HTML 页面内格式化您的源代码,请使用以下标签:"
- writing-a-tutorial-embedding-title: "嵌入 p5.js 绘图"
- writing-a-tutorial-embedding-1: "使用 p5.js 的一个好处是您可以制作动画驱动、互动性或可编辑的教程,方便更简易的演示程式设计概念。您的范例必须是 p5.js 绘图而它能用以下两种方式嵌入在您的教程中。"
- writing-a-tutorial-embedding-2: "如果该范例需保持可编辑性,如在 p5.js 网站的"
- writing-a-tutorial-embedding-3: "参考文献"
- writing-a-tutorial-embedding-4: "内,该 p5 绘图必须使用 p5.js 部件以嵌入在 HTML 页面内,请使用"
- writing-a-tutorial-embedding-5: "这指南"
- writing-a-tutorial-embedding-6: "以了解如何使用该部件嵌入 p5.js 绘图,部件"
- writing-a-tutorial-embedding-7: "。您也可以在"
- writing-a-tutorial-embedding-8: "空白范例教程内"
- writing-a-tutorial-embedding-9: "查看使用范例。"
- writing-a-tutorial-embedding-10: "如果该范例必须是动画驱动或互动性的但并不需要是可编辑的,该 p5.js 绘图需使用 iframe 以嵌入在页面内,如以下所示。"
- writing-a-tutorial-iframe-title: "使用 iframe 嵌入 p5 绘图"
- writing-a-tutorial-iframe-1: "iframe 让您能在原有的页面上开启一个通往另一个页面的窗口,同时该页面并不能直接和原有页面互动。在此例, 原有页面内会被嵌入一个含有您 p5.js 绘图的 index.html 窗口。"
- writing-a-tutorial-iframe-2: "在 /src/assets/learn 文件夹内,将您的 p5 绘图置放在一个命名为您的绘图名的文件夹内如以下截图所示。这文件夹是您置放所有 iframe 内将使用的图像及 p5 绘图的地方。"
- writing-a-tutorial-iframe-3: "在含有您的 p5 范例的子文件夹内应该含有一个 sketch.js 文件及一个 embed.html 文件。"
- writing-a-tutorial-iframe-4: "请确保 embed.html 内的 p5 程式库有正确的链接。如果您的文件结构和以上相同,p5.js 程式库的链接将会是 \"../../../js/p5.min.js\"。"
- writing-a-tutorial-iframe-5: "这时你可以将 p5.js 绘图文件以 iframe 的方式嵌入在您的教程的 .hbs 文件中。iframe 嵌入代码如下:"
- writing-a-tutorial-iframe-6: "以格式化 iframe,您可以将以下包括在文件内或使用样式表:"
- writing-a-tutorial-iframe-7: "在以下链接您可以直接查看绘图:"
- writing-a-tutorial-iframe-8: "而在以下您可以查看绘图被嵌入在 p5 网页中:"
- writing-a-tutorial-iframe-9: "还有一项您需要注意的是您必须设置 iframe 的大小,以确保其大小不会随着窗口大小而改变。"
- writing-a-tutorial-iframe-10: "另外,p5.js 程式库的文件链接并不是在 .eps 文件内(如其他教程),而是在您的 HTML 页面内(通常是 embed.html)。"
- writing-a-tutorial-iframe-11: "更多关于嵌入 p5.js 绘图的信息可在"
- writing-a-tutorial-embed-iframe-12: "以下链接查找。"
- writing-a-tutorial-finishing-title: "结束"
- writing-a-tutorial-finishing-1: "一旦您完成编辑您的教程并且您的教程已经被许可,分叉 p5.js 网站的代码库,如以上所示的步骤准备您的教程然后开启一个 pull request 给 p5.js 网站的代码库以便我们能发布您的教程!"
- writing-a-tutorial-finishing-2: "谢谢!"
- color-description1: "以下教程来自于由 Daniel Shiffman 篇写的《 Learning Processing 》(原文英文),并由 Morgan Kaufmann 出版,© 2008 Elsevier Inc。版权所有。此教程由 Kelly Chang 移植成 P5 代码。如果您发现任何错误或有任何评论,"
- color-description2: "请联络我们。"
- color-p1x1: "在数码世界中,当我们要介绍一个颜色时,我们需要有一定的精确度。单纯说“嘿,你能把那圆形变成蓝绿色吗?”并不足够。在这,颜色可以被定义为在一个范围内的数字。让我们从最简单的范例开始:黑白色或灰渐色。0 为纯黑色,255 为纯白色。在两者之间任何数字 – 50、87、162、209 等等 – 都是介于黑与白之间的灰色。"
- color-p2x1: "只要在任何东西被画在画布上之前使用 "
- color-p2x2: " 及 "
- color-p2x3: " 函数,我们能设置任何图形的颜色。我们也能使用 "
- color-p2x4: " 函数来设定窗口的背景颜色。如下范例。"
- color-code1: "background(255); // 设置背景颜色为白色 \n stroke(0); // 设置外线颜色为黑色 \n fill(150); // 设置填充色为灰色 \n rect(50,50,75,100); // 绘制四方形"
- color-p3x1: "使用 "
- color-p3x2: " 及 "
- color-p3x3: "函数将会分别去除外线色灰填充色。我们直觉上可能会以为“ stroke(0) ”表示没有外线,可是我们必须记得 0 在这并不代表“无”,然而是代表黑色。此外,我们必须记得不要同时去除 "
- color-p3x4: " 及 "
- color-p3x5: " 不然不会有任何图形出现在画布上!"
- color-p4x1: "以此同时,如果我们绘制两个图形,p5.js 将会使用最近(代码内从上至下)所定义的外线色及填充色值。"
- color-rgb-title: "RGB 颜色值"
- color-rgb-p1x1: "您还记得手指绘画吗?选择混合三原色,我们能混合出任何颜色。同时混合所有颜色的结果是个浑浊的褐色。添加越多颜料,给颜色将会变得更暗。数码颜色也是使用三原色的混合来构造新的颜色的,但是它和颜料的混合原理不一样。首先,其原色为:红、绿、蓝(也为 RGB 颜色,Red、Green、Blue)。而当您在混合荧幕上的颜色时,您将混合的是光而不是颜料,因此它的混合原理并不一样。"
- color-rgb-li1: "红 + 绿 = 黄"
- color-rgb-li2: "红 + 蓝 = 紫"
- color-rgb-li3: "绿 + 蓝 = 青(蓝绿色)"
- color-rgb-li4: "红 + 绿 + 蓝 = 白"
- color-rgb-li5: "无色 = 黑"
- color-rgb-p2x1: "这假设所有色颜色都为最亮的亮度,但是您也能同时使用一系列的颜色值,因此一些红加上一些绿再加上一些蓝将等于灰,而一点红加上一点蓝将等于深紫色。虽然这可能需要一点时间来习惯,随着您编程及使用 RGB 颜色值来试验的经验越多,您会对它越熟悉,就如使用您的手指来混合颜色一样。当然您不能单纯说“混合一些红与一点蓝”,您必须提供确切的数值。就如灰渐值,个别颜色的值也是由介于 0(不使用任何该颜色)与 255(完全使用该颜色)之间,而他们的顺序为红(R)、绿(G)及蓝(B)。通过更多的试验您将会对 RGB 颜色更加熟悉,不过接下来我们将介绍一些使用常用颜色的代码。"
- color-transparency-title: "颜色透明度"
- color-transparency-p1x1: "除了个别颜色的红、绿、蓝值之外,我们也能提供多一个可选性的值,此值被称为该颜色的 “alpha” 值。Alpha 代表透明度,当您要绘制多个重叠部分透视的图形时,透明度在这就特别有用。一个图像的 alpha 值有时也会被称为该图像的 “alpha channel”。"
- color-transparency-p2x1: "我们必须记得像素并不是真的透明的,这单纯是个使用混合颜色所达成的便利错觉。p5.js 在幕后将会使用该颜色的数值再加上一定百分率的另外一个颜色,创作出混合颜色的视觉错觉。(如果您有兴趣编程一个“粉色镜片”,您可以从这开始。)"
- color-transparency-p3x1: "Alpha 值也是介于 0 与 255 之间,0 代表完全透明而 255 代表完全不透明。"
- color-custom-ranges-title: "自定义颜色值范围"
- color-custom-ranges-p1x1: "介于 0 与 255 之间的 RGB 颜色值并不是 p5.js 唯一定义颜色的方法,事实上,我们能使用多种方法来定义颜色。比如说,您可能比较偏向于使用 0 至 100(如百分比)来定义颜色。为此您可以使用 "
- color-custom-ranges-p2x1: "以上函数表示:“OK,我们要使用红、绿、蓝值来定义颜色。而他们的值将介于 0 至 100 之间。"
- color-custom-ranges-p3x1: "虽然一般上这么做不会提供任何便利,您可以为个别颜色值提供不同的数值范围:"
- color-custom-ranges-p4x1: "这时此函数表示:“红色值将会是介于 0 至 100 之间,绿色值将会是介于 0 至 500 之间,蓝色值将会是介于 0 至 10 之间,而 alpha 至将会是介于 0 至 255 之间。"
- color-custom-ranges-p5x1: "最后,虽然您通常在编程时只需要用到 RGB 色值,您也能使用 HSB(色调、饱和度及亮度)模式来定义颜色。简单来说,HSB 色值使用方法如下:"
- color-custom-ranges-li1x1: "色调"
- color-custom-ranges-li1x2: "—色调值,默认上介于 0 至 255 之间。"
- color-custom-ranges-li2x1: "饱和度"
- color-custom-ranges-li2x2: "—该颜色的饱和度,默认上介于 0 至 255 之间。"
- color-custom-ranges-li3x1: "亮度"
- color-custom-ranges-li3x2: "—该颜色的亮度,默认上介于 0 至 255 之间。"
- color-custom-ranges-p6x1: "使用函数 "
- color-custom-ranges-p6x2: " 您就能设定您自选的数字范围。有些人会比较偏好使用介于 0 至 360 之间的数值来定义色调(就如色轮的 360 度一样)及 0 至 100 之间的数值来定义饱和度及亮度(介于 0% 至 100%)。"
- coordinate-system-description1: "以下教程来自于由 Daniel Shiffman 篇写的《 "
- coordinate-system-description2: "Learning Processing"
- coordinate-system-description3: " 》(原文英文),并由 Morgan Kaufmann 出版,© 2008 Elsevier Inc。版权所有。此教程由移植成 P5 代码。如果您发现任何错误或有任何评论,"
- coordinate-system-description4: "请联络我们"
- coordinate-system-description5: "。"
- coordinate-system-description-title: "坐标系统及图形"
- coordinate-system-description-p1x1: "在我们开始使用 p5 编程前,我们得先回到我们初中二时的记忆,找出一张坐标纸并画一条直线。两点之间最短的距离正是一条直线,我们将使用坐标纸上的直线的两点作为起点。"
- coordinate-system-description-p2x1: "以上图解显示一条介于点 A (1,0) 及点 B (4,5) 的直线。如果您想要指示您的朋友画出一样的直线,您或许会对他说:“请从点一、零开始画一条直线去点四、五”。 那么现在暂时想象您的朋友是个电脑而您想要指示这位数码朋友如何画在荧幕上出一样的直线。这情况下您也能使用一样的指示(只不过现在您可以跳过任何客气话但是必须使用精准的格式来表达)。该指示将会是如下:"
- coordinate-system-description-p3x1: "就算您还没学习过编写程式的语法,以上的语句应该仍然多少都能理解。我们提供电脑一个指令(我们称这指令为 function 或函数)以让其画出直线(line)。此外,我们也提供一些用于定义该直线的参数:从点 A (1,0) 至点 B (4,5)。 如果您假想这行代码为一个句子,这函数就是个动词而参数就是宾语。这代码句子使用分号作为句尾符号而不是句号。"
- coordinate-system-description-p4x1: "这里关键是了解电脑屏幕就只是个比较花俏的坐标纸。荧幕上每一个像素都代表着一个坐标 - 或两个数字:“x”(横向)及 “y”(纵向)- 代表着在空间内一点的位置。而我们的工作就是指定该在这些像素坐标位置出现的图形及颜色。"
- coordinate-system-description-p5x1: "不过,这里有个需要注意的东西。那张来自初中二的坐标纸(使用笛卡尔坐标系)将 (0,0) 放置在正中央,y 轴由下至上 x 轴由左至右。但是电脑窗口的坐标系在 y 轴的方向是相反的。(0,0) 被定义在左上角并往右边及往下延伸。"
- coordinate-system-simple-shapes-title: "基本图形"
- coordinate-system-simple-shapes-p1x1: "大多数使用 p5 的编程范例一般都会使视觉上的绘图范例。本质上,这些范例都和绘制图形及设定像素有关。我们将从绘制四种基本图形开始。"
- coordinate-system-simple-shapes-p2x1: "针对每个形状,我们需要问我们需要什么资料才可以定义该图形的位置及大小(更之后其颜色)然后再了解 p5 如何接收这些信息。在以下的绘图内,我们将使用一个宽度为 100 像素及高度为 100 像素的画布。"
- coordinate-system-simple-shapes-p3x1: ""
- coordinate-system-simple-shapes-p3x2: " (点)是最简单的图形同时也是个不错的起点。以绘制一个点(point),我们只需要提供 x 及 y 坐标。"
- coordinate-system-simple-shapes-p4x1: ""
- coordinate-system-simple-shapes-p4x2: " (直线)也不会特别困难,我们只需提供两个点 (x1,y1) 及 (x2,y2):"
- coordinate-system-simple-shapes-p5x1: "当我们想要绘制一个 "
- coordinate-system-simple-shapes-p5x2: " (四方形)时,这就会变得比较复杂一点。在 p5 内,一个四方形是由其左上角的坐标点与其宽度及高度来定义的。"
- coordinate-system-simple-shapes-p6x1: "第二个绘制四方形的方法是定义其中心点的位置,然后定义其宽度及高度。如果我们想要使用这方法,我们必须先表示我们要使用 "
- coordinate-system-simple-shapes-p6x2: " 模式然后才输入绘制四方形的指示。请注意 p5 有区分大小写字母。"
- coordinate-system-simple-shapes-p7x1: "最后我们也能使用两个点来绘制一个四方形(分别定义左上角及右下角)。这模式为 "
- coordinate-system-simple-shapes-p7x2: "。请注意这范例在荧幕上显示的结果和上方的范例一样。"
- coordinate-system-simple-shapes-p8x1: "当我们对于绘制一个四方形有了不错的掌握时,绘制一个 "
- coordinate-system-simple-shapes-p8x2: " (椭圆形)可是轻而易举。事实上,它和绘制 "
- coordinate-system-simple-shapes-p8x3: " (四方形)一样,唯一不同的是椭圆形将会被绘制在所定义的四方形内。"
- coordinate-system-simple-shapes-p8x4: " 的默认模式为 "
- coordinate-system-simple-shapes-p8x5: " 而不是 "
- coordinate-system-simple-shapes-p8x6: "。"
- coordinate-system-simple-shapes-p9x1: "现在让我们来看看一些使用更实际绘图设置的程式代码。我们将使用一个大小为 200 乘 200 的画布大小。请注意我们这里使用的 createCanvas() 函数内所设定的画布高度及宽度。"
- teach-desc: "Teach a p5 workshop or class, or create teaching materials!"
-test-tutorial:
-
+ learn-title: 学习
+ teach-title2: Teach
+ learn1: 以下教程将提供更多深入及详细的步骤,专注于特定的主题。请参考
+ learn2: 范例页面
+ learn3: 以查看 p5.js 多种功能的简单范例。
+ introduction-to-p5js-title: p5.js 简介
+ hello-p5js-title: Hello p5.js
+ hello-p5js: >-
+ This short video will introduce you to the library and what you can do with
+ it.
+ getting-started-title: 入门简介
+ getting-started: 欢迎来到 p5.js! 这简介将涵盖 p5.js 的基本设置。
+ p5js-overview-title: 一览 p5.js
+ p5js-overview: p5.js 主要功能的介绍
+ p5js-processing-title: p5.js 及 Processing
+ p5js-processing: 两者之间的差别及如何将两者之间互相转换。
+ p5-screen-reader-title: p5 及荧幕阅读器
+ p5-screen-reader: 设置 p5 以让它可以和荧幕阅读器一起使用。(英文内文)
+ using-local-server-title: 本地伺服器
+ using-local-server: 如何在 Mac OSX、Windows 或 Linux 上设置本地伺服器。
+ p5js-wiki-title: p5.js wiki
+ p5js-wiki: Additonal documentation and tutorials contributed by the community
+ connecting-p5js-title: 链接 p5.js
+ creating-libraries-title: 制作程式库
+ creating-libraries: 制作 p5.js 附加程式库。
+ nodejs-and-socketio-title: node.js 及 socket.io
+ nodejs-and-socketio: 链接 node.js 伺服器及 p5.js,通过 socket.io 通讯。
+ programming-topics-title: 编程问题
+ beyond-the-canvas-title: 画布之外
+ beyond-the-canvas: 创建及控制画布以外的元素。
+ 3d-webgl-title: 3D/WebGL
+ 3d-webgl: 使用 p5.js WebGL 模式制作高级图形程式。
+ color-title: 颜色
+ color: 数码颜色的简介。
+ coordinate-system-and-shapes-title: 坐标系统与图形
+ coordinate-system-and-shapes: 利用坐标系统绘制简单图形。
+ interactivity-title: 互动性
+ interactivity: 鼠标与键盘的互动简介。
+ program-flow-title: 程序流程
+ program-flow: p5.js 控制程序流程简介。
+ curves-title: 曲线
+ curves: 介绍 p5.js 中的三种曲线:弧形,样条曲线和 Bézier 曲线。
+ becoming-a-better-programmer-title: 成为更好的程式设计师
+ debugging-title: 调试
+ debugging: 调试程序的简介。
+ optimizing-title: 优化 p5.js 程式
+ optimizing: 此教程包含技巧及窍门以进一步优化您的程式,使它执行得更快更顺畅。
+ test-driven-development-title: 单元测试及测试驱动开发
+ test-driven-development: 避免安装时不必要的烦恼。什么是单元测试?如何使用单元测试?作者 Andy Timmons。
+ contributing-to-the-community-title: 回馈社群
+ development-title: 开发
+ development: 开发设置简介及一览。
+ looking-inside-title: 窥看 p5
+ looking-inside: 一个简单易懂的教程,当中含括了 p5.js 源代码的文件格局及开发工具,作者 Luisa Pereira。
+ writing-tutorial-title: 编写教程
+ writing-tutorial: 编写 p5.js 教程的指南。
+ writing-a-tutorial-title: p5.js 回馈指南
+ writing-a-tutorial-author: 教程作者为 Tega Brain。
+ writing-a-tutorial-1: >-
+ 我们欢迎教育家、合作者和一般爱好者开发更多 p5.js 教程。p5.js
+ 旨在让创意编程及开源软件开发更易接近及吸引更多元化的社群,同时我们也很高兴能够公开的发布 p5.js
+ 开发的完整过程及教程。我们现有的教程含括了各种课题如:学习使用 p5.js、编程技巧及如何帮助开发开源项目。
+ writing-a-tutorial-2: 我们欢迎任何人提交全新教程,这份指南将包括新教程的提议、准备和提交的所需步骤。
+ writing-a-tutorial-how-start-title: 如何开始:
+ writing-a-tutorial-how-start-1: 先确定您所建议的课题尚未被涵盖,在此链接有
+ writing-a-tutorial-how-start-2: 一个列表
+ writing-a-tutorial-how-start-3: >-
+ 列出了正在进行中的教程。如果您想开发的课题被列为正在进行中 (in
+ progress),您或许能帮助完成该项目或为现有的项目做预备发布的工作,您只需联络我们。
+ writing-a-tutorial-how-start-4: 如果您的课题尚未被涵盖及尚未被列为正在进行中,请寄份电子邮件去 education@p5js.org 并简略的讲述您所建议的教程。
+ writing-a-tutorial-how-prepare-title: 如何准备网上 p5.js 教程:
+ writing-a-tutorial-how-prepare-1: 当您以准备发布您的教程,请按着以下步骤准备您的教程给 p5.js 的网页。
+ writing-a-tutorial-how-prepare-2: 将您的教程写在一个命名为 tutorial-name.hbs 的文件并跟从
+ writing-a-tutorial-how-prepare-3: 这基本结构
+ writing-a-tutorial-how-prepare-4: 。如该文件所示,它必须有以下开端:
+ writing-a-tutorial-how-prepare-5: 您的教程文件夹将被置放在 p5.js 网站一个命名为“tutorials”的文件夹内。index.hbs 是
+ writing-a-tutorial-how-prepare-6: p5.js 教程的主页
+ writing-a-tutorial-how-prepare-7: 而 test-tutorial.hbs 为空白范例教程。
+ writing-a-tutorial-how-prepare-8: 所有内容必须被包含在以下标签内:
+ writing-a-tutorial-how-prepare-9: 内容格式可以使用 <h1>、<h2> 及 <p> 段落标签定义,如
+ writing-a-tutorial-how-prepare-10: 空白范例教程所示。
+ writing-a-tutorial-how-prepare-11: >-
+ 如果您的教程包含图像,它们必须被置放在 p5 网站的 asset 文件夹,该文件夹位于
+ src/assets/learn/test-tutorial/images 如以下所示。
+ writing-a-tutorial-how-prepare-12: 以在 HTML 页面内格式化您的源代码,请使用以下标签:
+ writing-a-tutorial-embedding-title: 嵌入 p5.js 绘图
+ writing-a-tutorial-embedding-1: >-
+ 使用 p5.js 的一个好处是您可以制作动画驱动、互动性或可编辑的教程,方便更简易的演示程式设计概念。您的范例必须是 p5.js
+ 绘图而它能用以下两种方式嵌入在您的教程中。
+ writing-a-tutorial-embedding-2: 如果该范例需保持可编辑性,如在 p5.js 网站的
+ writing-a-tutorial-embedding-3: 参考文献
+ writing-a-tutorial-embedding-4: 内,该 p5 绘图必须使用 p5.js 部件以嵌入在 HTML 页面内,请使用
+ writing-a-tutorial-embedding-5: 这指南
+ writing-a-tutorial-embedding-6: 以了解如何使用该部件嵌入 p5.js 绘图,部件
+ writing-a-tutorial-embedding-7: 。您也可以在
+ writing-a-tutorial-embedding-8: 空白范例教程内
+ writing-a-tutorial-embedding-9: 查看使用范例。
+ writing-a-tutorial-embedding-10: 如果该范例必须是动画驱动或互动性的但并不需要是可编辑的,该 p5.js 绘图需使用 iframe 以嵌入在页面内,如以下所示。
+ writing-a-tutorial-iframe-title: 使用 iframe 嵌入 p5 绘图
+ writing-a-tutorial-iframe-1: >-
+ iframe 让您能在原有的页面上开启一个通往另一个页面的窗口,同时该页面并不能直接和原有页面互动。在此例, 原有页面内会被嵌入一个含有您 p5.js
+ 绘图的 index.html 窗口。
+ writing-a-tutorial-iframe-2: >-
+ 在 /src/assets/learn 文件夹内,将您的 p5 绘图置放在一个命名为您的绘图名的文件夹内如以下截图所示。这文件夹是您置放所有
+ iframe 内将使用的图像及 p5 绘图的地方。
+ writing-a-tutorial-iframe-3: 在含有您的 p5 范例的子文件夹内应该含有一个 sketch.js 文件及一个 embed.html 文件。
+ writing-a-tutorial-iframe-4: >-
+ 请确保 embed.html 内的 p5 程式库有正确的链接。如果您的文件结构和以上相同,p5.js 程式库的链接将会是
+ "../../../js/p5.min.js"。
+ writing-a-tutorial-iframe-5: 这时你可以将 p5.js 绘图文件以 iframe 的方式嵌入在您的教程的 .hbs 文件中。iframe 嵌入代码如下:
+ writing-a-tutorial-iframe-6: 以格式化 iframe,您可以将以下包括在文件内或使用样式表:
+ writing-a-tutorial-iframe-7: 在以下链接您可以直接查看绘图:
+ writing-a-tutorial-iframe-8: 而在以下您可以查看绘图被嵌入在 p5 网页中:
+ writing-a-tutorial-iframe-9: 还有一项您需要注意的是您必须设置 iframe 的大小,以确保其大小不会随着窗口大小而改变。
+ writing-a-tutorial-iframe-10: 另外,p5.js 程式库的文件链接并不是在 .eps 文件内(如其他教程),而是在您的 HTML 页面内(通常是 embed.html)。
+ writing-a-tutorial-iframe-11: 更多关于嵌入 p5.js 绘图的信息可在
+ writing-a-tutorial-embed-iframe-12: 以下链接查找。
+ writing-a-tutorial-finishing-title: 结束
+ writing-a-tutorial-finishing-1: >-
+ 一旦您完成编辑您的教程并且您的教程已经被许可,分叉 p5.js 网站的代码库,如以上所示的步骤准备您的教程然后开启一个 pull request 给
+ p5.js 网站的代码库以便我们能发布您的教程!
+ writing-a-tutorial-finishing-2: 谢谢!
+ color-description1: >-
+ 以下教程来自于由 Daniel Shiffman 篇写的《 Learning Processing 》(原文英文),并由 Morgan Kaufmann
+ 出版,© 2008 Elsevier Inc。版权所有。此教程由 Kelly Chang 移植成 P5 代码。如果您发现任何错误或有任何评论,
+ color-description2: 请联络我们。
+ color-p1x1: >-
+ 在数码世界中,当我们要介绍一个颜色时,我们需要有一定的精确度。单纯说“嘿,你能把那圆形变成蓝绿色吗?”并不足够。在这,颜色可以被定义为在一个范围内的数字。让我们从最简单的范例开始:黑白色或灰渐色。0
+ 为纯黑色,255 为纯白色。在两者之间任何数字 – 50、87、162、209 等等 – 都是介于黑与白之间的灰色。
+ color-p2x1: '只要在任何东西被画在画布上之前使用 '
+ color-p2x2: ' 及 '
+ color-p2x3: ' 函数,我们能设置任何图形的颜色。我们也能使用 '
+ color-p2x4: ' 函数来设定窗口的背景颜色。如下范例。'
+ color-code1: |-
+ background(255); // 设置背景颜色为白色
+ stroke(0); // 设置外线颜色为黑色
+ fill(150); // 设置填充色为灰色
+ rect(50,50,75,100); // 绘制四方形
+ color-p3x1: '使用 '
+ color-p3x2: ' 及 '
+ color-p3x3: >-
+ 函数将会分别去除外线色灰填充色。我们直觉上可能会以为“ stroke(0) ”表示没有外线,可是我们必须记得 0
+ 在这并不代表“无”,然而是代表黑色。此外,我们必须记得不要同时去除
+ color-p3x4: ' 及 '
+ color-p3x5: ' 不然不会有任何图形出现在画布上!'
+ color-p4x1: 以此同时,如果我们绘制两个图形,p5.js 将会使用最近(代码内从上至下)所定义的外线色及填充色值。
+ color-rgb-title: RGB 颜色值
+ color-rgb-p1x1: >-
+ 您还记得手指绘画吗?选择混合三原色,我们能混合出任何颜色。同时混合所有颜色的结果是个浑浊的褐色。添加越多颜料,给颜色将会变得更暗。数码颜色也是使用三原色的混合来构造新的颜色的,但是它和颜料的混合原理不一样。首先,其原色为:红、绿、蓝(也为
+ RGB 颜色,Red、Green、Blue)。而当您在混合荧幕上的颜色时,您将混合的是光而不是颜料,因此它的混合原理并不一样。
+ color-rgb-li1: 红 + 绿 = 黄
+ color-rgb-li2: 红 + 蓝 = 紫
+ color-rgb-li3: 绿 + 蓝 = 青(蓝绿色)
+ color-rgb-li4: 红 + 绿 + 蓝 = 白
+ color-rgb-li5: 无色 = 黑
+ color-rgb-p2x1: >-
+ 这假设所有色颜色都为最亮的亮度,但是您也能同时使用一系列的颜色值,因此一些红加上一些绿再加上一些蓝将等于灰,而一点红加上一点蓝将等于深紫色。虽然这可能需要一点时间来习惯,随着您编程及使用
+ RGB
+ 颜色值来试验的经验越多,您会对它越熟悉,就如使用您的手指来混合颜色一样。当然您不能单纯说“混合一些红与一点蓝”,您必须提供确切的数值。就如灰渐值,个别颜色的值也是由介于
+ 0(不使用任何该颜色)与 255(完全使用该颜色)之间,而他们的顺序为红(R)、绿(G)及蓝(B)。通过更多的试验您将会对 RGB
+ 颜色更加熟悉,不过接下来我们将介绍一些使用常用颜色的代码。
+ color-transparency-title: 颜色透明度
+ color-transparency-p1x1: >-
+ 除了个别颜色的红、绿、蓝值之外,我们也能提供多一个可选性的值,此值被称为该颜色的 “alpha” 值。Alpha
+ 代表透明度,当您要绘制多个重叠部分透视的图形时,透明度在这就特别有用。一个图像的 alpha 值有时也会被称为该图像的 “alpha channel”。
+ color-transparency-p2x1: >-
+ 我们必须记得像素并不是真的透明的,这单纯是个使用混合颜色所达成的便利错觉。p5.js
+ 在幕后将会使用该颜色的数值再加上一定百分率的另外一个颜色,创作出混合颜色的视觉错觉。(如果您有兴趣编程一个“粉色镜片”,您可以从这开始。)
+ color-transparency-p3x1: Alpha 值也是介于 0 与 255 之间,0 代表完全透明而 255 代表完全不透明。
+ color-custom-ranges-title: 自定义颜色值范围
+ color-custom-ranges-p1x1: >-
+ 介于 0 与 255 之间的 RGB 颜色值并不是 p5.js 唯一定义颜色的方法,事实上,我们能使用多种方法来定义颜色。比如说,您可能比较偏向于使用
+ 0 至 100(如百分比)来定义颜色。为此您可以使用
+ color-custom-ranges-p2x1: 以上函数表示:“OK,我们要使用红、绿、蓝值来定义颜色。而他们的值将介于 0 至 100 之间。
+ color-custom-ranges-p3x1: 虽然一般上这么做不会提供任何便利,您可以为个别颜色值提供不同的数值范围:
+ color-custom-ranges-p4x1: >-
+ 这时此函数表示:“红色值将会是介于 0 至 100 之间,绿色值将会是介于 0 至 500 之间,蓝色值将会是介于 0 至 10 之间,而 alpha
+ 至将会是介于 0 至 255 之间。
+ color-custom-ranges-p5x1: 最后,虽然您通常在编程时只需要用到 RGB 色值,您也能使用 HSB(色调、饱和度及亮度)模式来定义颜色。简单来说,HSB 色值使用方法如下:
+ color-custom-ranges-li1x1: 色调
+ color-custom-ranges-li1x2: —色调值,默认上介于 0 至 360 之间。
+ color-custom-ranges-li2x1: 饱和度
+ color-custom-ranges-li2x2: —该颜色的饱和度,默认上介于 0 至 100 之间。
+ color-custom-ranges-li3x1: 亮度
+ color-custom-ranges-li3x2: —该颜色的亮度,默认上介于 0 至 100 之间。
+ color-custom-ranges-p6x1: '使用函数 '
+ color-custom-ranges-p6x2: ' 您就能设定您自选的数字范围。有些人会比较偏好使用介于 0 至 360 之间的数值来定义色调(就如色轮的 360 度一样)及 0 至 100 之间的数值来定义饱和度及亮度(介于 0% 至 100%)。'
+ coordinate-system-description1: '以下教程来自于由 Daniel Shiffman 篇写的《 '
+ coordinate-system-description2: Learning Processing
+ coordinate-system-description3: ' 》(原文英文),并由 Morgan Kaufmann 出版,© 2008 Elsevier Inc。版权所有。此教程由移植成 P5 代码。如果您发现任何错误或有任何评论,'
+ coordinate-system-description4: 请联络我们
+ coordinate-system-description5: 。
+ coordinate-system-description-title: 坐标系统及图形
+ coordinate-system-description-p1x1: >-
+ 在我们开始使用 p5
+ 编程前,我们得先回到我们初中二时的记忆,找出一张坐标纸并画一条直线。两点之间最短的距离正是一条直线,我们将使用坐标纸上的直线的两点作为起点。
+ coordinate-system-description-p2x1: >-
+ 以上图解显示一条介于点 A (1,0) 及点 B (4,5)
+ 的直线。如果您想要指示您的朋友画出一样的直线,您或许会对他说:“请从点一、零开始画一条直线去点四、五”。
+ 那么现在暂时想象您的朋友是个电脑而您想要指示这位数码朋友如何画在荧幕上出一样的直线。这情况下您也能使用一样的指示(只不过现在您可以跳过任何客气话但是必须使用精准的格式来表达)。该指示将会是如下:
+ coordinate-system-description-p3x1: >-
+ 就算您还没学习过编写程式的语法,以上的语句应该仍然多少都能理解。我们提供电脑一个指令(我们称这指令为 function
+ 或函数)以让其画出直线(line)。此外,我们也提供一些用于定义该直线的参数:从点 A (1,0) 至点 B (4,5)。
+ 如果您假想这行代码为一个句子,这函数就是个动词而参数就是宾语。这代码句子使用分号作为句尾符号而不是句号。
+ coordinate-system-description-p4x1: >-
+ 这里关键是了解电脑屏幕就只是个比较花俏的坐标纸。荧幕上每一个像素都代表着一个坐标 - 或两个数字:“x”(横向)及 “y”(纵向)-
+ 代表着在空间内一点的位置。而我们的工作就是指定该在这些像素坐标位置出现的图形及颜色。
+ coordinate-system-description-p5x1: >-
+ 不过,这里有个需要注意的东西。那张来自初中二的坐标纸(使用笛卡尔坐标系)将 (0,0) 放置在正中央,y 轴由下至上 x
+ 轴由左至右。但是电脑窗口的坐标系在 y 轴的方向是相反的。(0,0) 被定义在左上角并往右边及往下延伸。
+ coordinate-system-simple-shapes-title: 基本图形
+ coordinate-system-simple-shapes-p1x1: 大多数使用 p5 的编程范例一般都会使视觉上的绘图范例。本质上,这些范例都和绘制图形及设定像素有关。我们将从绘制四种基本图形开始。
+ coordinate-system-simple-shapes-p2x1: >-
+ 针对每个形状,我们需要问我们需要什么资料才可以定义该图形的位置及大小(更之后其颜色)然后再了解 p5
+ 如何接收这些信息。在以下的绘图内,我们将使用一个宽度为 100 像素及高度为 100 像素的画布。
+ coordinate-system-simple-shapes-p3x1: ''
+ coordinate-system-simple-shapes-p3x2: ' (点)是最简单的图形同时也是个不错的起点。以绘制一个点(point),我们只需要提供 x 及 y 坐标。'
+ coordinate-system-simple-shapes-p4x1: ''
+ coordinate-system-simple-shapes-p4x2: ' (直线)也不会特别困难,我们只需提供两个点 (x1,y1) 及 (x2,y2):'
+ coordinate-system-simple-shapes-p5x1: '当我们想要绘制一个 '
+ coordinate-system-simple-shapes-p5x2: ' (四方形)时,这就会变得比较复杂一点。在 p5 内,一个四方形是由其左上角的坐标点与其宽度及高度来定义的。'
+ coordinate-system-simple-shapes-p6x1: '第二个绘制四方形的方法是定义其中心点的位置,然后定义其宽度及高度。如果我们想要使用这方法,我们必须先表示我们要使用 '
+ coordinate-system-simple-shapes-p6x2: ' 模式然后才输入绘制四方形的指示。请注意 p5 有区分大小写字母。'
+ coordinate-system-simple-shapes-p7x1: '最后我们也能使用两个点来绘制一个四方形(分别定义左上角及右下角)。这模式为 '
+ coordinate-system-simple-shapes-p7x2: 。请注意这范例在荧幕上显示的结果和上方的范例一样。
+ coordinate-system-simple-shapes-p8x1: '当我们对于绘制一个四方形有了不错的掌握时,绘制一个 '
+ coordinate-system-simple-shapes-p8x2: ' (椭圆形)可是轻而易举。事实上,它和绘制 '
+ coordinate-system-simple-shapes-p8x3: ' (四方形)一样,唯一不同的是椭圆形将会被绘制在所定义的四方形内。'
+ coordinate-system-simple-shapes-p8x4: ' 的默认模式为 '
+ coordinate-system-simple-shapes-p8x5: ' 而不是 '
+ coordinate-system-simple-shapes-p8x6: 。
+ coordinate-system-simple-shapes-p9x1: >-
+ 现在让我们来看看一些使用更实际绘图设置的程式代码。我们将使用一个大小为 200 乘 200 的画布大小。请注意我们这里使用的
+ createCanvas() 函数内所设定的画布高度及宽度。
+ teach-desc: 'Teach a p5 workshop or class, or create teaching materials!'
+test-tutorial: null
libraries:
- Libraries: "程式库"
- core-libraries: "核心程式库"
- community-libraries: "社群贡献程式库"
- libraries-created-by: "作者:"
- p5.sound: "p5.sound 使用 Web Audio 扩展 p5 的功能,提供音频输入、播放、分析及合成功能。"
- p5.accessibility: "p5.accessibility 让视力障碍者能够更容易接触 p5 画布。"
- asciiart: "p5.asciiart 是个简单易使用的图像 - ASCII 画作转换器。"
- p5.ble: "一个启用 BLE 装置及 p5 绘图之间的沟通的 Javascript 编程库。"
- blizard.js: "一个简化 DOM 操纵的编程库。"
- p5.bots: "p5.bots 让您通过网页浏览器和 Arduino(或其他微处理器)互动。您可以使用传感器资料来驱动绘图会使用绘图来驱动 LED、马达等等!"
- p5.clickable: "事件驱动、易使用的 p5.js 按钮编程库。"
- p5.cmyk.js: "CMYK 色彩空间。"
- p5.collide2D: "p5.collide2D 提供一系列工具适用于计算在 p5.js 内的 2D 几何形状的碰撞检测。"
- p5.createloop: "使用一行编码制作运用噪声及 GIF 输出的动画循环。"
- p5.dimensions: "p5.dimensions 扩展 p5.js 的向量功能以包括更高维数的计算。"
- p5.EasyCam: "简单的3D摄像机控制,具有惯性平移,缩放和旋转功能。 主要贡献者 Thomas Diewald。"
- p5.experience: "提供 p5.js 附加事件聆听功能并用以制作基于画布的网页应用程序的程式库。"
- p5.func: "p5.func 是个提供新物件及时间、频率和空间函数操作的 p5 扩展程式库。"
- p5.geolocation: "p5.geolocation 提供给 p5.js 获取、观察、计算使用者地理位置及地理围栏的功能。"
- p5.gibber: "p5.gibber 提供快速音乐排序及音频合成功能。"
- grafica.js: "grafica.js 让您在您的 p5.js 绘图中添加简单但高度可配置的 2D 图表。"
- p5.gui: "p5.gui 提供您的 p5.js 绘图一系列图形用户界面。"
- p5.localmessage: "p5.localmessage 提供一个简易的界面以在不同绘图之间传递信息并使同时使用多个视窗制作绘图更容易!"
- marching: "光栅到向量转换,等值面。"
- mappa: "Mappa 提供一系列给静态地图、重叠地图及地理数据的工具。特别适用于制作使用地理位置的应用程式。"
- ml5.js: "建在Tensorflow.js的基础之上,ml5.js提供更简单的网页中使用机器学习算法和模型的方法。"
- p5.play: "p5.play 提供图像、动画、输入及碰撞检测功能以方便制作游戏或游戏类程式。"
- p5.particle: "Particle 及 Fountain 物件可以用以制作数据驱动效果,该数据可来自使用者互动或 JSON 文件。"
- p5.Riso: "p5.Riso 是个用来生成适合 Risograph 印刷的文件的程式库。它能帮助您将您的绘图转换成多色印刷。"
- rita.js: "RiTa.js 提供语言分析功能并也提供生成文字的功能。"
- Rotating knobs: "使用自定图形及自定返回值范围,制作您能旋转的旋钮。"
- p5.scenemanager: "p5.SceneManager 帮助您制作有多个状态/场景的绘图。各个场景就比如一个在主要绘图内的绘图。"
- p5.screenPosition: "在 p5.js 内添加来自 Processing 的 screenX 及 screenY 功能。"
- p5.scribble: "绘制看起来粗略的 2D 形状。作者为 Janneck Wullschleger,来源自 Processing 原有程式库的代码移植。"
- p5.serial: "p5.serial 让不同设备使用串联通讯 (RS-232) 与在网页浏览器内的 p5 绘图沟通。"
- Shape5: "Shape5 是个基本的 2D 程式库,用于教导第一次学习使用代码的小学生。"
- p5.shape.js: "一个为 p5.js 添加更多简单图形的程式库。"
- p5.speech: "p5.speech 提供简单易用的 Web Speech 及语音识别的 API,使制作能说能听的绘图更加容易。"
- p5.start2d.js: "使用像素、毫米、厘米或英寸为单位来制作 2D 静态艺术的 p5 附加程式库。"
- p5.tiledmap: "p5.tiledmap 提供绘图及便利功能以在您的绘图中加入地图。"
- p5.touchgui: "p5.js 多点触控及鼠标图形用户界面程式库。"
- tramontana: "Tramontana 是个可以用在多种设备上(iOS、Android、tramontana Board等)制作互动环境、互动空间或单纯测试大规模实验的简易平台。"
- vida: "Vida 是个添加摄像头(或视屏)运动测试及团块跟踪功能的简单程式库。"
- p5.voronoi: "p5.voronoi 提供您的 p5.js 绘图一系列用以绘制及使用 voronoi 图的工具。"
- p5.3D: "WebGL 3D 文字及图像。"
- using-a-library-title: "如何使用程式库"
- using-a-library1: "p5.js 程式库可以是任何扩展或延伸 p5.js 核心功能的 JavaScript 代码,它们主要分为两种。核心程式库("
- using-a-library3: ")是 p5.js 正式发布组的一部分,而社群贡献程式库是由 p5.js 社群成员持有、开发及维持的。"
- using-a-library4: "如果您想在您的绘图内加入任何附加程式库,您只需在 HTML 文件内添加程式库的链接,此链接必须发生在 p5.js 的链接之后。一个 HTML 范例如下:"
- create-your-own-title: "制作附加程式库"
- create-your-own1: "p5.js 欢迎任何人所制作的附加程式库!请参考"
- create-your-own2: "程式库编辑教程(英文页面)"
- create-your-own3: "以了解更多关于如何制作附加程式库的步骤。"
- create-your-own4: "如果您编辑了一个附加程式库并且希望将其显示在此页面,请填入这份表格!"
-
+ Libraries: 程式库
+ core-libraries: 核心程式库
+ community-libraries: 社群贡献程式库
+ libraries-created-by: 作者:
+ p5.sound: p5.sound 使用 Web Audio 扩展 p5 的功能,提供音频输入、播放、分析及合成功能。
+ p5.accessibility: p5.accessibility 让视力障碍者能够更容易接触 p5 画布。
+ asciiart: p5.asciiart 是个简单易使用的图像 - ASCII 画作转换器。
+ p5.ble: 一个启用 BLE 装置及 p5 绘图之间的沟通的 Javascript 编程库。
+ p5.bots: p5.bots 让您通过网页浏览器和 Arduino(或其他微处理器)互动。您可以使用传感器资料来驱动绘图会使用绘图来驱动 LED、马达等等!
+ p5.clickable: 事件驱动、易使用的 p5.js 按钮编程库。
+ p5.cmyk.js: CMYK 色彩空间。
+ p5.collide2D: p5.collide2D 提供一系列工具适用于计算在 p5.js 内的 2D 几何形状的碰撞检测。
+ p5.createloop: 使用一行编码制作运用噪声及 GIF 输出的动画循环。
+ p5.dimensions: p5.dimensions 扩展 p5.js 的向量功能以包括更高维数的计算。
+ p5.EasyCam: 简单的3D摄像机控制,具有惯性平移,缩放和旋转功能。 主要贡献者 Thomas Diewald。
+ p5.experience: 提供 p5.js 附加事件聆听功能并用以制作基于画布的网页应用程序的程式库。
+ p5.func: p5.func 是个提供新物件及时间、频率和空间函数操作的 p5 扩展程式库。
+ p5.geolocation: p5.geolocation 提供给 p5.js 获取、观察、计算使用者地理位置及地理围栏的功能。
+ p5.gibber: p5.gibber 提供快速音乐排序及音频合成功能。
+ grafica.js: grafica.js 让您在您的 p5.js 绘图中添加简单但高度可配置的 2D 图表。
+ p5.gui: p5.gui 提供您的 p5.js 绘图一系列图形用户界面。
+ p5.localmessage: p5.localmessage 提供一个简易的界面以在不同绘图之间传递信息并使同时使用多个视窗制作绘图更容易!
+ marching: 光栅到向量转换,等值面。
+ mappa: Mappa 提供一系列给静态地图、重叠地图及地理数据的工具。特别适用于制作使用地理位置的应用程式。
+ ml5.js: 建在Tensorflow.js的基础之上,ml5.js提供更简单的网页中使用机器学习算法和模型的方法。
+ p5.play: p5.play 提供图像、动画、输入及碰撞检测功能以方便制作游戏或游戏类程式。
+ p5.particle: Particle 及 Fountain 物件可以用以制作数据驱动效果,该数据可来自使用者互动或 JSON 文件。
+ p5.Riso: p5.Riso 是个用来生成适合 Risograph 印刷的文件的程式库。它能帮助您将您的绘图转换成多色印刷。
+ rita.js: RiTa.js 提供语言分析功能并也提供生成文字的功能。
+ Rotating knobs: 使用自定图形及自定返回值范围,制作您能旋转的旋钮。
+ p5.scenemanager: p5.SceneManager 帮助您制作有多个状态/场景的绘图。各个场景就比如一个在主要绘图内的绘图。
+ p5.screenPosition: 在 p5.js 内添加来自 Processing 的 screenX 及 screenY 功能。
+ p5.scribble: 绘制看起来粗略的 2D 形状。作者为 Janneck Wullschleger,来源自 Processing 原有程式库的代码移植。
+ p5.serial: p5.serial 让不同设备使用串联通讯 (RS-232) 与在网页浏览器内的 p5 绘图沟通。
+ Shape5: Shape5 是个基本的 2D 程式库,用于教导第一次学习使用代码的小学生。
+ p5.shape.js: 一个为 p5.js 添加更多简单图形的程式库。
+ p5.speech: p5.speech 提供简单易用的 Web Speech 及语音识别的 API,使制作能说能听的绘图更加容易。
+ p5.start2d.js: 使用像素、毫米、厘米或英寸为单位来制作 2D 静态艺术的 p5 附加程式库。
+ p5.tiledmap: p5.tiledmap 提供绘图及便利功能以在您的绘图中加入地图。
+ p5.touchgui: p5.js 多点触控及鼠标图形用户界面程式库。
+ tramontana: >-
+ Tramontana 是个可以用在多种设备上(iOS、Android、tramontana
+ Board等)制作互动环境、互动空间或单纯测试大规模实验的简易平台。
+ vida: Vida 是个添加摄像头(或视屏)运动测试及团块跟踪功能的简单程式库。
+ p5.voronoi: p5.voronoi 提供您的 p5.js 绘图一系列用以绘制及使用 voronoi 图的工具。
+ p5.xr: 一个使用p5创建VR和AR草图的库。
+ p5.3D: WebGL 3D 文字及图像。
+ using-a-library-title: 如何使用程式库
+ using-a-library1: p5.js 程式库可以是任何扩展或延伸 p5.js 核心功能的 JavaScript 代码,它们主要分为两种。核心程式库(
+ using-a-library3: )是 p5.js 正式发布组的一部分,而社群贡献程式库是由 p5.js 社群成员持有、开发及维持的。
+ using-a-library4: 如果您想在您的绘图内加入任何附加程式库,您只需在 HTML 文件内添加程式库的链接,此链接必须发生在 p5.js 的链接之后。一个 HTML 范例如下:
+ create-your-own-title: 制作附加程式库
+ create-your-own1: p5.js 欢迎任何人所制作的附加程式库!请参考
+ create-your-own2: 程式库编辑教程(英文页面)
+ create-your-own3: 以了解更多关于如何制作附加程式库的步骤。
+ create-your-own4: 如果您编辑了一个附加程式库并且希望将其显示在此页面,请填入这份表格!
community:
- community-title: "社群"
- community-statement-title: "p5.js 社群宣言"
- community-statement1: "p5.js 是个对探索使用科技创作艺术及设计感兴趣的社群。"
- community-statement2: "我们声援及支持所有人,不论他们来自不同性别认同、性取向、种族、国籍、语言、神经型、大小、能力、阶级、宗教、文化、次文化、政治观点、年龄、技能等级、职业或背景。我们了解并不是所有人都有多余的时间、金钱或能力以活跃的参与社群活动但我们同时认可及鼓励各种参与方式。我们致力于促进障碍消除及培养能力。我们都是学习者。"
- community-statement3: "我们喜欢以下井号标签:#noCodeSnobs(因为我们重视社群多过效率)、#newKidLove(因为我们都曾经刚起步)、#unassumeCore(因为我们不假设预有知识)及 #BlackLivesMatter(因为当然)。"
- in-practice-title: "实践:"
- in-practice1: "我们不假设预有知识也不隐射有些东西是所有人都应该知道的。"
- in-practice2: "我们坚持积极的回应反馈请求,不论它们有多复杂。"
- in-practice3: "我们欢迎新人并且优先考虑其他人的学习。我们致力于将如新人的热情带入我们的工作,因为我们相信新人和专家对我们来说都一样重要。"
- in-practice4: "我们积极的承认及验证各种不同的贡献。"
- in-practice5: "我们永远都愿意给予帮助或指导。"
- in-times-conflict-title: "在起冲突时:"
- in-times-conflict1: "我们聆听。"
- in-times-conflict2: "我们清楚地表达自己同时理解其他人的感受。"
- in-times-conflict3: "如果错在我们,我们承认错误、道歉及为我们的举止负责任。"
- in-times-conflict4: "我们会一直寻求方法以改善我们自己及我们的社群。"
- in-times-conflict5: "我们致力于在我们的社群内保持尊敬及开放性。"
- in-times-conflict6: "我们让所有人都感到他们的意见都有被聆听。"
- in-times-conflict7: "在我们的互动中,我们保持细心及友善。"
- in-the-future-title: "在未来:"
- in-the-future1: "未来就是现在。"
- notes-title: "Notes"
- notes1: "Please also see our "
- notes2: "p5.js Code of Conduct"
- notes3: "。此宣言可根据 "
- notes4: "Creative Commons license"
- notes5: " 条款下使用。请随意分享及更改并注明出处。"
-
- contribute-title: "贡献"
- contribute1: "我们的社群都会一直需要各种不同的帮助。"
- develop-title: "开发。"
- develop1: "GitHub"
- develop2: "是源代码被储存、议题被记录及关于代码的谈论发生的主要地方。请参考"
- develop3: "开发教程"
- develop4: "以开始开发代码或"
- develop5: "制作您的附加程式库。"
- document-title: "文献。"
- document1: "所有人都喜欢参考文献。我们需要帮助"
- document2: "移植范例"
- document3: "、"
- document4: "添加参考文献"
- document5: "及制作教程。"
- teach-title: "教学。"
- teach1: "教导研讨会、课程、朋友或合作者!在 Twitter 上标记 @p5xjs,我们将尽所能分享您的成果。"
- create-title: "制作。"
- create1: "p5.js 在寻找设计师、艺术家、代码编程师等以将您具创意及惊人的作业展示在主页上,同时您的作业也能启发其他人。请将您的作业呈交至"
- create2: "hello@p5js.org"
- create3: "。"
- donate-title: "捐献。"
- donate1: "p5.js 是个免费且开源的软件,由一群艺术家所制作。您可捐赠给"
- donate2: "Processing Foundation"
- donate3: "以帮助支持 p5.js 的开发工作。"
- contributors-conference-title: "p5.js 贡献者会议"
- contributors-conference1: "虽然我们大多数的工作都在网上进行,我们仍然会在现实中聚集。我们已在"
- contributors-conference2: " Pittsburgh, PA 的 Carnegie Mellon University 举办了两次贡献者会议。这会议聚集了多位艺术家、设计师、软件开发员及教育家以推进 p5.js 的发展。"
- participants-title: "参与者"
- support-title: "支持"
- support1: "我们的贡献者会议地点位于"
- support2: "在 Carnegie Mellon University 内,并为一个给非典型、抗学科及跨学院研究的学术实验室,研究重点为艺术、科技及文化的交接。"
- support3: "这项活动资金来自于"
- support4: "所提供的资助及来自以下赞助者的慷慨支持:"
- support5: "及"
- support6: "谢谢!"
- mailing-list-title: "邮件列表"
- mailing-list-1: "请输入您的电子邮件地址以接收偶尔来自 Processing Foundation 的更新消息。"
-
- 2015contributors-conference-title: "贡献者会议 2015"
- 2015contributors-conference-date: "5月25日至31日"
- 2015contributors-conference1: "30个来自各种不同背景的参与者聚集在一起并花了一个星期在"
- 2015contributors-conference2: "提善 p5.js 编程环境的源代码、参考文献及社区外展工具。参与者来自香港、西雅图、洛杉矶、波士顿及纽约,多数都是在创意科技、互动设计及新媒体艺术的职业专家但另外也包括了数位来自 Carnegie Mellon’s Schools of Art and Architecture 的大学本科和研究生。"
- 2015contributors-conference3: "摄影师为 Taeyoon Choi"
- 2015contributors-conference-diversity-title: "多元平等"
- 2015contributors-conference-diversity1: "在技术开发的同时,这次会议的另外一个主要焦点为推广、社群及多元平等。会议由一个小组会议开始"
- 2015contributors-conference-diversity2: "Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and the Internet"
- 2015contributors-conference-diversity3: "(多元平等:七个在种族、性别、能力及阶级的声音,给 FLOSS(免费与开源软件)及互联网)。"
- 2015contributors-conference-diversity4: "举办者为"
- 2015contributors-conference-diversity5: "及"
- 2015contributors-conference-diversity6: ","
- 2015contributors-conference-diversity7: "该小组会议发生于2015年5月25日(星期二),地点在 Carnegie Mellon University 的 Kresge Auditorium。演说者包括"
- 2015contributors-conference-diversity8: "及"
- 2015contributors-conference-diversity9: "。"
- 2015cc_1: "来自不同背景的参与者微笑着并用他们的双手做一个代表 p5 的标志"
- 2015cc_2: "参与者们在草坪上跳跃、微笑以及高举双手"
- 2015cc_3: "一位女士使用她的手提电脑呈现 p5.js 社群宣言"
- 2015cc_4: "一位女士有声有色的对着一个麦克风演说,同时两位男性合作者在旁观"
- 2015cc_5: "参与者们专注地对着课室前方微笑"
- 2015cc_6: "一位女士使用麦克风对着三位女性学生阅读关于 p5.js 的资料"
- 2015cc_7: "参与者们围着一个贴了多个便利贴的白板而坐,同时一位女性学生对着一个麦克风进行演说"
- 2015cc_8: "参与者们围着一张桌子坐着并看着对方的手提电脑,对比代码"
- 2015cc_9: "贴着不同颜色便利贴的白板,便利贴上写着关于编程的笔记"
- 2015cc_10: "一位女士对着麦克风演说着关于重视不同的技能,同时一群使用着手提电脑的参与者在一个课室内观看她的幻灯片"
- 2015cc_11: "一位女士在一个讲堂内的讲台上演说,同时三位参与者坐在舞台上而另三位参与者使用视屏通话呈现在舞台幕布上"
- 2015cc_12: "参与者在课室内使用他们的手提电脑工作的顶视图"
- 2015cc_13: "五个人围着圈子进行讨论"
- 2015cc_14: "五个人围着圈子并使用他们的手提电脑交换笔记"
- 2015cc_15: "在课室内的一位男士使用麦克风对着一群参与者进行演说"
- 2019contributors-conference-title: "贡献者会议 2019"
- 2019contributors-conference-date: "8月13日至18日"
- 2019contributors-conference1: "一群35位来自不同身份背景的参与者聚集在 "
- 2019contributors-conference2: " 以进展源代码、参考文献及社群扩展工具并同时探索现时 p5.js 编程环境的状况。这次的会议专注于通过多学科的角度促进对话,并包括了来自各种不同身份背景的参与者所代表,其中有来自创意科技、互动设计及新媒体艺术的参与者。参与者被分成多个工作小组,其主题为:辅助、表演内的音乐及代码、创意科技景观及国际化。"
- 2019contributors-conference3: "视屏由 Qianqian Ye 所制作"
- 2019contributors-conference4: "摄影师为 Jacquelyn Johnson"
- outputs: "成果"
- output1: "。一个高度灵活的三角形、正方形、六边形及八边形格框 p5.js 附加程式库。作者为 Aren Davey。"
- output2: "。一系列用于制作多设备、多人游戏的模版文件,多个客户端可同时连接至同一个服侍页面作者为 L05。"
- output3: "使用 "
- output3-1: " 制作的实验,用于测试 softCompile、OSC 界面功能并在 MIDI 设置演示加入了连接性功能。这是个 p5.js 合作性实时编码视屏骑师环境!作者为 Ted Davis。"
- output4: "一个由 American Artist 带领的小组,主题为 Blackness and Gender in Virtual Space,同时参与者有 shawné michaelain holloway 及 LaJuné McMillian。"
- output5: "由 Everest Pipkin 及 Jon Chambers 带领的研讨会。"
- output6: "一个"
- output6-1: " p5.js 笔记界面"
- output6-2: "的样板。作者为 Allison Parrish。"
- output7: "Stalgia Grigg、LaJuné McMillian、Aatish Bhatia 及 Jon Chambers 所制作的新艺术装置。"
- output8: "p5.js 全球贡献者工具包。"
- output8-1: "作者为 Aarón Montoya-Moraga、Kenneth Lim、Guillermo Montecinos、Qianqian Ye、Dorothy R. Santos 及 Yasheng She."
- output9: "如何编写非暴力创意代码。"
- output9-1: "一个由 Olivia Ross 所带领的小型杂志。"
- output10: "p5.js 网站的整修以加强其可用性。其包括了屏幕阅读其可用性的进展以及改善主页、下载、入门及参考文献页面。贡献者包括 Claire Kearney-Volpe、Sina Bahram、Kate Hollenbach、Olivia Ross、Luis Morales-Navarro、Lauren McCarthy 及 Evelyn Masso。"
- output11: "由 Luisa Pereira、Jun Shern Chan、Shefali Nayak、Sona Lee、Ted Davis 及 Carlos Garcia 所带来的合作性表演。"
- output12: "由 Natalie Braginsky 所带来的表演。"
- output13: "p5 编辑器的 p5.js 附加程式库系统设计。作者为 Cassie Tarakajian 及 Luca Damasco。"
- output14: "连接 p5 及其他程式库的原型。作者为 Alex Yixuan Xu 及 Lauren Valley。"
- output15: "由 Golan Levin 带领的闭幕营火会。"
- 2019cc_1: "一位男士在大学讲台上向满座的课堂作演讲"
- 2019cc_2: "参与者们围着长桌一边吃午餐一边进行讨论"
- 2019cc_3: "参与者们在一个课室内,其中一些在手提电脑上工作,另一些则在交谈"
- 2019cc_4: "课室内的参与者们在他们的手提电脑上工作"
- 2019cc_5: "参与者们在一个阴暗的课室内开会"
- 2019cc_6: "一位女士对着课室内来自不同背景的参与者们演讲"
- 2019cc_7: "参与者们在一个忙碌的课室内交谈"
- 2019cc_8: "一位女士使用麦克风对着课室内的参与者们演讲"
- 2019cc_9: "一位参与者坐在满是关于匿名数据问题的文字投影前,在讲台上演讲"
- 2019cc_10: "一位拿着麦克风的参与者坐在关于 p5.js 除了能增加易接近性之外的功能不会再添正新功能的文字前,对着其他参与者演讲"
- 2019cc_11: "一位女士使用麦克风对着其他参与者们演讲"
- 2019cc_12: "一位男士使用麦克风对着其他参与者们演讲"
- 2019cc_13: "参与者们坐在课室内专注地在聆听演说"
- 2019cc_14: "参与者们坐在课室内专注地在聆听演说"
- 2019cc_15: "一位女士使用麦克风背对着 “sacred boundaries” 文字,对着其他参与者们演讲"
- 2019cc_16: "俯视参与者们聆听着坐在一个 3D 渲染的人模型前的小组讲坛"
- 2019cc_17: "参与者们围着桌子坐着并在查看一个荧幕上的代码"
- 2019cc_18: "坐在真人大小的泰迪熊旁边的一位女士在她的手提电脑上工作"
- 2019cc_19: "站在户外的参与者们微笑着"
- 2019cc_20: "四位参与者围成一个圈子交谈"
- 2019cc_21: "参与者们坐在户外一起享用午餐"
- 2019cc_22: "参与者们围着一个 U 形的桌子坐着并对着课室的前方"
- 2019cc_23: "一位男士坐在课室的前方使用麦克风有声有色地进行演讲"
- 2019cc_24: "参与者们微笑着并举着双手的团体照"
- 2019cc_25: "一群人围着由四个 LCD 萤幕组成的营火坐着"
-
+ community-title: 社群
+ community-statement-title: p5.js 社群宣言
+ community-statement1: p5.js 是个对探索使用科技创作艺术及设计感兴趣的社群。
+ community-statement2: >-
+ 我们声援及支持所有人,不论他们来自不同性别认同、性取向、种族、国籍、语言、神经型、大小、能力、阶级、宗教、文化、次文化、政治观点、年龄、技能等级、职业或背景。我们了解并不是所有人都有多余的时间、金钱或能力以活跃的参与社群活动但我们同时认可及鼓励各种参与方式。我们致力于促进障碍消除及培养能力。我们都是学习者。
+ community-statement3: >-
+ 我们喜欢以下井号标签:#noCodeSnobs(因为我们重视社群多过效率)、#newKidLove(因为我们都曾经刚起步)、#unassumeCore(因为我们不假设预有知识)及
+ #BlackLivesMatter(因为当然)。
+ in-practice-title: 实践:
+ in-practice1: 我们不假设预有知识也不隐射有些东西是所有人都应该知道的。
+ in-practice2: 我们坚持积极的回应反馈请求,不论它们有多复杂。
+ in-practice3: 我们欢迎新人并且优先考虑其他人的学习。我们致力于将如新人的热情带入我们的工作,因为我们相信新人和专家对我们来说都一样重要。
+ in-practice4: 我们积极的承认及验证各种不同的贡献。
+ in-practice5: 我们永远都愿意给予帮助或指导。
+ in-times-conflict-title: 在起冲突时:
+ in-times-conflict1: 我们聆听。
+ in-times-conflict2: 我们清楚地表达自己同时理解其他人的感受。
+ in-times-conflict3: 如果错在我们,我们承认错误、道歉及为我们的举止负责任。
+ in-times-conflict4: 我们会一直寻求方法以改善我们自己及我们的社群。
+ in-times-conflict5: 我们致力于在我们的社群内保持尊敬及开放性。
+ in-times-conflict6: 我们让所有人都感到他们的意见都有被聆听。
+ in-times-conflict7: 在我们的互动中,我们保持细心及友善。
+ in-the-future-title: 在未来:
+ in-the-future1: 未来就是现在。
+ notes-title: Notes
+ notes1: 'Please also see our '
+ notes2: p5.js Code of Conduct
+ notes3: '。此宣言可根据 '
+ notes4: Creative Commons license
+ notes5: ' 条款下使用。请随意分享及更改并注明出处。'
+ contribute-title: 贡献
+ contribute1: 我们的社群都会一直需要各种不同的帮助。
+ develop-title: 开发。
+ develop1: GitHub
+ develop2: 是源代码被储存、议题被记录及关于代码的谈论发生的主要地方。请参考
+ develop3: 开发教程
+ develop4: 以开始开发代码或
+ develop5: 制作您的附加程式库。
+ document-title: 文献。
+ document1: 所有人都喜欢参考文献。我们需要帮助
+ document2: 移植范例
+ document3: 、
+ document4: 添加参考文献
+ document5: 及制作教程。
+ teach-title: 教学。
+ teach1: 教导研讨会、课程、朋友或合作者!在 Twitter 上标记 @p5xjs,我们将尽所能分享您的成果。
+ create-title: 制作。
+ create1: p5.js 在寻找设计师、艺术家、代码编程师等以将您具创意及惊人的作业展示在主页上,同时您的作业也能启发其他人。请将您的作业呈交至
+ create2: hello@p5js.org
+ create3: 。
+ donate-title: 捐献。
+ donate1: p5.js 是个免费且开源的软件,由一群艺术家所制作。您可捐赠给
+ donate2: Processing Foundation
+ donate3: 以帮助支持 p5.js 的开发工作。
+ contributors-conference-title: p5.js 贡献者会议
+ contributors-conference1: 虽然我们大多数的工作都在网上进行,我们仍然会在现实中聚集。我们已在
+ contributors-conference2: ' Pittsburgh, PA 的 Carnegie Mellon University 举办了两次贡献者会议。这会议聚集了多位艺术家、设计师、软件开发员及教育家以推进 p5.js 的发展。'
+ participants-title: 参与者
+ support-title: 支持
+ support1: 我们的贡献者会议地点位于
+ support2: 在 Carnegie Mellon University 内,并为一个给非典型、抗学科及跨学院研究的学术实验室,研究重点为艺术、科技及文化的交接。
+ support3: 这项活动资金来自于
+ support4: 所提供的资助及来自以下赞助者的慷慨支持:
+ support5: 及
+ support6: 谢谢!
+ mailing-list-title: 邮件列表
+ mailing-list-1: 请输入您的电子邮件地址以接收偶尔来自 Processing Foundation 的更新消息。
+ 2015contributors-conference-title: 贡献者会议 2015
+ 2015contributors-conference-date: 5月25日至31日
+ 2015contributors-conference1: 30个来自各种不同背景的参与者聚集在一起并花了一个星期在
+ 2015contributors-conference2: >-
+ 提善 p5.js
+ 编程环境的源代码、参考文献及社区外展工具。参与者来自香港、西雅图、洛杉矶、波士顿及纽约,多数都是在创意科技、互动设计及新媒体艺术的职业专家但另外也包括了数位来自
+ Carnegie Mellon’s Schools of Art and Architecture 的大学本科和研究生。
+ 2015contributors-conference3: 摄影师为 Taeyoon Choi
+ 2015contributors-conference-diversity-title: 多元平等
+ 2015contributors-conference-diversity1: 在技术开发的同时,这次会议的另外一个主要焦点为推广、社群及多元平等。会议由一个小组会议开始
+ 2015contributors-conference-diversity2: >-
+ Diversity: Seven Voices on Race, Gender, Ability & Class for FLOSS and
+ the Internet
+ 2015contributors-conference-diversity3: (多元平等:七个在种族、性别、能力及阶级的声音,给 FLOSS(免费与开源软件)及互联网)。
+ 2015contributors-conference-diversity4: 举办者为
+ 2015contributors-conference-diversity5: 及
+ 2015contributors-conference-diversity6: ,
+ 2015contributors-conference-diversity7: >-
+ 该小组会议发生于2015年5月25日(星期二),地点在 Carnegie Mellon University 的 Kresge
+ Auditorium。演说者包括
+ 2015contributors-conference-diversity8: 及
+ 2015contributors-conference-diversity9: 。
+ 2015cc_1: 来自不同背景的参与者微笑着并用他们的双手做一个代表 p5 的标志
+ 2015cc_2: 参与者们在草坪上跳跃、微笑以及高举双手
+ 2015cc_3: 一位女士使用她的手提电脑呈现 p5.js 社群宣言
+ 2015cc_4: 一位女士有声有色的对着一个麦克风演说,同时两位男性合作者在旁观
+ 2015cc_5: 参与者们专注地对着课室前方微笑
+ 2015cc_6: 一位女士使用麦克风对着三位女性学生阅读关于 p5.js 的资料
+ 2015cc_7: 参与者们围着一个贴了多个便利贴的白板而坐,同时一位女性学生对着一个麦克风进行演说
+ 2015cc_8: 参与者们围着一张桌子坐着并看着对方的手提电脑,对比代码
+ 2015cc_9: 贴着不同颜色便利贴的白板,便利贴上写着关于编程的笔记
+ 2015cc_10: 一位女士对着麦克风演说着关于重视不同的技能,同时一群使用着手提电脑的参与者在一个课室内观看她的幻灯片
+ 2015cc_11: 一位女士在一个讲堂内的讲台上演说,同时三位参与者坐在舞台上而另三位参与者使用视屏通话呈现在舞台幕布上
+ 2015cc_12: 参与者在课室内使用他们的手提电脑工作的顶视图
+ 2015cc_13: 五个人围着圈子进行讨论
+ 2015cc_14: 五个人围着圈子并使用他们的手提电脑交换笔记
+ 2015cc_15: 在课室内的一位男士使用麦克风对着一群参与者进行演说
+ 2019contributors-conference-title: 贡献者会议 2019
+ 2019contributors-conference-date: 8月13日至18日
+ 2019contributors-conference1: '一群35位来自不同身份背景的参与者聚集在 '
+ 2019contributors-conference2: ' 以进展源代码、参考文献及社群扩展工具并同时探索现时 p5.js 编程环境的状况。这次的会议专注于通过多学科的角度促进对话,并包括了来自各种不同身份背景的参与者所代表,其中有来自创意科技、互动设计及新媒体艺术的参与者。参与者被分成多个工作小组,其主题为:辅助、表演内的音乐及代码、创意科技景观及国际化。'
+ 2019contributors-conference3: 视屏由 Qianqian Ye 所制作
+ 2019contributors-conference4: 摄影师为 Jacquelyn Johnson
+ outputs: 成果
+ output1: 。一个高度灵活的三角形、正方形、六边形及八边形格框 p5.js 附加程式库。作者为 Aren Davey。
+ output2: 。一系列用于制作多设备、多人游戏的模版文件,多个客户端可同时连接至同一个服侍页面作者为 L05。
+ output3: '使用 '
+ output3-1: ' 制作的实验,用于测试 softCompile、OSC 界面功能并在 MIDI 设置演示加入了连接性功能。这是个 p5.js 合作性实时编码视屏骑师环境!作者为 Ted Davis。'
+ output4: >-
+ 一个由 American Artist 带领的小组,主题为 Blackness and Gender in Virtual Space,同时参与者有
+ shawné michaelain holloway 及 LaJuné McMillian。
+ output5: 由 Everest Pipkin 及 Jon Chambers 带领的研讨会。
+ output6: 一个
+ output6-1: ' p5.js 笔记界面'
+ output6-2: 的样板。作者为 Allison Parrish。
+ output7: Stalgia Grigg、LaJuné McMillian、Aatish Bhatia 及 Jon Chambers 所制作的新艺术装置。
+ output8: p5.js 全球贡献者工具包。
+ output8-1: >-
+ 作者为 Aarón Montoya-Moraga、Kenneth Lim、Guillermo Montecinos、Qianqian
+ Ye、Dorothy R. Santos 及 Yasheng She.
+ output9: 如何编写非暴力创意代码。
+ output9-1: 一个由 Olivia Ross 所带领的小型杂志。
+ output10: >-
+ p5.js 网站的整修以加强其可用性。其包括了屏幕阅读其可用性的进展以及改善主页、下载、入门及参考文献页面。贡献者包括 Claire
+ Kearney-Volpe、Sina Bahram、Kate Hollenbach、Olivia Ross、Luis
+ Morales-Navarro、Lauren McCarthy 及 Evelyn Masso。
+ output11: >-
+ 由 Luisa Pereira、Jun Shern Chan、Shefali Nayak、Sona Lee、Ted Davis 及 Carlos
+ Garcia 所带来的合作性表演。
+ output12: 由 Natalie Braginsky 所带来的表演。
+ output13: p5 编辑器的 p5.js 附加程式库系统设计。作者为 Cassie Tarakajian 及 Luca Damasco。
+ output14: 连接 p5 及其他程式库的原型。作者为 Alex Yixuan Xu 及 Lauren Valley。
+ output15: 由 Golan Levin 带领的闭幕营火会。
+ 2019cc_1: 一位男士在大学讲台上向满座的课堂作演讲
+ 2019cc_2: 参与者们围着长桌一边吃午餐一边进行讨论
+ 2019cc_3: 参与者们在一个课室内,其中一些在手提电脑上工作,另一些则在交谈
+ 2019cc_4: 课室内的参与者们在他们的手提电脑上工作
+ 2019cc_5: 参与者们在一个阴暗的课室内开会
+ 2019cc_6: 一位女士对着课室内来自不同背景的参与者们演讲
+ 2019cc_7: 参与者们在一个忙碌的课室内交谈
+ 2019cc_8: 一位女士使用麦克风对着课室内的参与者们演讲
+ 2019cc_9: 一位参与者坐在满是关于匿名数据问题的文字投影前,在讲台上演讲
+ 2019cc_10: 一位拿着麦克风的参与者坐在关于 p5.js 除了能增加易接近性之外的功能不会再添正新功能的文字前,对着其他参与者演讲
+ 2019cc_11: 一位女士使用麦克风对着其他参与者们演讲
+ 2019cc_12: 一位男士使用麦克风对着其他参与者们演讲
+ 2019cc_13: 参与者们坐在课室内专注地在聆听演说
+ 2019cc_14: 参与者们坐在课室内专注地在聆听演说
+ 2019cc_15: 一位女士使用麦克风背对着 “sacred boundaries” 文字,对着其他参与者们演讲
+ 2019cc_16: 俯视参与者们聆听着坐在一个 3D 渲染的人模型前的小组讲坛
+ 2019cc_17: 参与者们围着桌子坐着并在查看一个荧幕上的代码
+ 2019cc_18: 坐在真人大小的泰迪熊旁边的一位女士在她的手提电脑上工作
+ 2019cc_19: 站在户外的参与者们微笑着
+ 2019cc_20: 四位参与者围成一个圈子交谈
+ 2019cc_21: 参与者们坐在户外一起享用午餐
+ 2019cc_22: 参与者们围着一个 U 形的桌子坐着并对着课室的前方
+ 2019cc_23: 一位男士坐在课室的前方使用麦克风有声有色地进行演讲
+ 2019cc_24: 参与者们微笑着并举着双手的团体照
+ 2019cc_25: 一群人围着由四个 LCD 萤幕组成的营火坐着
books:
- books-title: "书籍"
- book-1-title: "Getting Started with p5.js"
- book-1-authors: "Lauren McCarthy, Casey Reas, and Ben Fry. Illustrations by Taeyoon Choi."
- book-1-publisher: "Published October 2015, Maker Media. "
- book-1-pages: "246 pages. "
- book-1-type: "Paperback."
- book-1-description: "Written by the lead p5.js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML."
- book-1-order-a: "Order Print/Ebook from O'Reilly"
- book-1-order-b: "Order from Amazon"
- book-2-title: "Introduction to p5.js (Spanish Edition)"
- book-2-authors: "Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón Montoya-Moraga. Illustrations by Taeyoon Choi."
- book-2-publisher: "Published 2018, Processing Foundation, Inc. "
- book-2-pages: "246 pages. "
- book-2-type: "Soft cover."
- book-2-description: "Written by the lead p5.js developer and the founders of Processing, this book provides an introduction to the creative possibilities of today's Web, using JavaScript and HTML."
- book-2-order-a: "Order the PDF from The Processing Foundation Press"
- book-2-order-b: "Order the physical version from Amazon"
- book-3-title: "Generative Design"
- book-3-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-3-publisher: "Published October 30, 2018, Princeton Architectural Press; Reprint edition. "
- book-3-pages: "255 pages. "
- book-3-type: "Paperback."
- book-3-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-3-order-a: "Order from Princeton Architectural Press"
- book-3-order-b: "Order from Amazon"
- book-4-title: "Generative Gestaltung (German Edition)"
- book-4-authors: "Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni."
- book-4-publisher: "Published March 1, 2018, Schmidt Hermann Verlag. "
- book-4-pages: "256 pages. "
- book-4-type: "Hardcover."
- book-4-description: "By using simple languages such as JavaScript in p5.js, artists and makers can create everything from interactive typography and textiles to 3D-printed furniture to complex and elegant infographics."
- book-4-order-a: "Order from Verlag Hermann Schmidt"
- book-4-order-b: "Order from Amazon"
- book-5-title: "Learn JavaScript with p5.js"
- book-5-authors: "Engin Arslan."
- book-5-publisher: "Published 2018, Apress. "
- book-5-pages: "217 pages. "
- book-5-type: "Paperback."
- book-5-description: "Learn coding from scratch in a highly engaging and visual manner using the vastly popular JavaScript with the programming library p5.js. The skills you will acquire from this book are highly transferable to a myriad of industries and can be used towards building web applications, programmable robots, or generative art. "
- book-5-order-a: "Order from Apress"
- book-5-order-b: "Order from Amazon"
-
+ books-title: 书籍
+ book-1-title: Getting Started with p5.js
+ book-1-authors: 'Lauren McCarthy, Casey Reas, and Ben Fry. Illustrations by Taeyoon Choi.'
+ book-1-publisher: 'Published October 2015, Maker Media. '
+ book-1-pages: '246 pages. '
+ book-1-type: Paperback.
+ book-1-description: >-
+ Written by the lead p5.js developer and the founders of Processing, this
+ book provides an introduction to the creative possibilities of today's Web,
+ using JavaScript and HTML.
+ book-1-order-a: Order Print/Ebook from O'Reilly
+ book-1-order-b: Order from Amazon
+ book-2-title: Introduction to p5.js (Spanish Edition)
+ book-2-authors: >-
+ Lauren McCarthy, Casey Reas, and Ben Fry. Translated by Aarón
+ Montoya-Moraga. Illustrations by Taeyoon Choi.
+ book-2-publisher: 'Published 2018, Processing Foundation, Inc. '
+ book-2-pages: '246 pages. '
+ book-2-type: Soft cover.
+ book-2-description: >-
+ Written by the lead p5.js developer and the founders of Processing, this
+ book provides an introduction to the creative possibilities of today's Web,
+ using JavaScript and HTML.
+ book-2-order-a: Order the PDF from The Processing Foundation Press
+ book-2-order-b: Order the physical version from Amazon
+ book-3-title: Generative Design
+ book-3-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-3-publisher: 'Published October 30, 2018, Princeton Architectural Press; Reprint edition. '
+ book-3-pages: '255 pages. '
+ book-3-type: Paperback.
+ book-3-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-3-order-a: Order from Princeton Architectural Press
+ book-3-order-b: Order from Amazon
+ book-4-title: Generative Gestaltung (German Edition)
+ book-4-authors: 'Benedikt Gross, Hartmut Bohnacker, Julia Laub and Claudius Lazzeroni.'
+ book-4-publisher: 'Published March 1, 2018, Schmidt Hermann Verlag. '
+ book-4-pages: '256 pages. '
+ book-4-type: Hardcover.
+ book-4-description: >-
+ By using simple languages such as JavaScript in p5.js, artists and makers
+ can create everything from interactive typography and textiles to 3D-printed
+ furniture to complex and elegant infographics.
+ book-4-order-a: Order from Verlag Hermann Schmidt
+ book-4-order-b: Order from Amazon
+ book-5-title: Learn JavaScript with p5.js
+ book-5-authors: Engin Arslan.
+ book-5-publisher: 'Published 2018, Apress. '
+ book-5-pages: '217 pages. '
+ book-5-type: Paperback.
+ book-5-description: >-
+ Learn coding from scratch in a highly engaging and visual manner using the
+ vastly popular JavaScript with the programming library p5.js. The skills you
+ will acquire from this book are highly transferable to a myriad of
+ industries and can be used towards building web applications, programmable
+ robots, or generative art.
+ book-5-order-a: Order from Apress
+ book-5-order-b: Order from Amazon
+ book-6-title: 'Aesthetic Programming: A Handbook of Software Studies'
+ book-6-authors: 'Winnie Soon, Geoff Cox. '
+ book-6-publisher: 'Published 2020, Open Humanities Press. '
+ book-6-pages: '298 pages. '
+ book-6-type: Hardcover.
+ book-6-description: >-
+ Using p5.js, this book introduces and demonstrates the reflexive practice
+ of aesthetic programming, engaging with learning to program as a way to
+ understand and question existing technological objects and paradigms, and
+ to explore the potential for reprogramming wider eco-socio-technical
+ systems.
+ book-6-order-a: Download the PDF (FREE)
+ book-6-order-b: Order from Barnes & Noble
examples:
- Examples: "范例"
- back-examples: "返回"
- Structure: "结构"
- Form: "形状"
- Data: "资料"
- Arrays: "数组"
- Control: "控制"
- Image: "图像"
- Color: "颜色"
- Math: "数学"
- Simulate: "模拟"
- Interaction: "互动"
- Objects: "物件"
- Lights: "灯光"
- Motion: "Motion"
- Instance_Mode: "实例模式"
- Dom: "DOM"
- Drawing: "Drawing"
- Transform: "Transform"
- Typography: "Typography"
- 3D: "3D"
- Input: "Input"
- Sound: "音频"
- Advanced_Data: "Advanced Data"
- Mobile: "移动设备"
- Hello_P5: "Hello p5"
-
+ Examples: 范例
+ back-examples: 返回
+ Structure: 结构
+ Form: 形状
+ Data: 资料
+ Arrays: 数组
+ Control: 控制
+ Image: 图像
+ Color: 颜色
+ Math: 数学
+ Simulate: 模拟
+ Interaction: 互动
+ Objects: 物件
+ Lights: 灯光
+ Motion: Motion
+ Instance_Mode: 实例模式
+ Dom: DOM
+ Drawing: Drawing
+ Transform: Transform
+ Typography: Typography
+ 3D: 3D
+ Input: Input
+ Advanced_Data: Advanced Data
+ Sound: 音频
+ Mobile: 移动设备
+ Hello_P5: Hello p5
reference:
- Reference: "参考文献"
-
+ Reference: 参考文献
showcase:
- showcase-title: "Showcase"
- showcase-intro1: "这是p5.js展示区,由"
- showcase-intro2: "在2019年建立,目前由"
- showcase-intro3: "策划。我们在展示人们如何使用p5.js使创意工作,学习和开源变得更加有趣和包容。我们在一起,共同建立社区。在2019年夏季,我们邀请了一些创作者来分享更多有关他们如何通过不同项目和作品使用p5.js。"
- showcase-intro4: "2020年夏季展示区现已开始接受报名,提名某人的p5.js作品或您自己的作品在这里进行展示!"
- nominate-project: "提名作品"
- showcase-featuring: "Featuring"
- project-tag-art: "Art"
- project-tag-design: "Design"
- project-tag-code: "Code"
- project-tag-curriculum: "Curriculum"
- project-tag-documentation: "Documentation"
- project-tag-game: "Game"
- project-tag-library: "Library"
- project-tag-organizing: "Organizing"
- project-tag-tool: "Tool"
- project-tag-tutorial: "Tutorial"
- project-roni: "Programmed Plotter Drawings"
- credit-roni: "Roni Cantor"
- description-roni: "Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a plotter and pens."
- project-phuong: "Airi Flies"
- credit-phuong: "Phuong Ngo"
- description-phuong: "In this game developed with p5.play, help Airi fly by saying PEW. Created to encourage people to get out of their comfort zone and feel more confident about themselves regardless of what they do and how they look or sound."
- project-daein: "Chillin'"
- credit-daein: "Dae In Chung"
- description-daein: "An interactive typographic poster that uses a mobile device's motion sensor with p5.js."
- project-qianqian: "Qtv"
- credit-qianqian: "Qianqian Ye"
- description-qianqian: "A video channel with 1-minute videos in Mandarin about creative coding, art, and technology, including p5.js tutorials for beginners. Available on YouTube, Instagram, Bilibili, and TikTok."
- project-casey-louise: "p5.js Shaders"
- credit-casey-louise: "Casey Conchinha, Louise Lessél"
- description-casey-louise: "A resource for learning the what, why, and how of using shaders in p5.js."
- project-moon-xin: "Moving Responsive Posters"
- credit-moon-xin: "Moon Jang, Xin Xin, and students"
- description-moon-xin: "Browser-based moving posters that use graphical systems, transformation methods, and p5.js to address the connotations of a word less than 8 letters. Designed by students for a graphic design course (Visual Narrative Systems) at the University of Georgia."
-
-
- created-by: "Created By"
- pronouns-female: "(she/her)"
- creator-from-roni-cantor: "From Toronto, Canada"
- project-links: "Project Links"
- project-links-text-1-roni-cantor: "Example sketch in p5.js Web Editor"
- project-links-text-2-roni-cantor: "AxiDraw V3 demo video"
- project-q-1-1: "What are you up to?"
- project-q-1-2: "How did you get started with p5.js?"
- project-a-1-1-roni-cantor: "I just graduated from Ryerson University's New Media program. Coming from 4 years of coding and making robots, I decided to take a break and play with some more traditional forms of art—while still coding and playing with robots."
- project-a-1-2-roni-cantor: "I first started using p5.js at "
- project-a-1-3-roni-cantor: "! After using "
- project-a-1-4-roni-cantor: " for many years, I wanted to try something new."
- project-q-2: "How did you use p5.js in this project?"
- project-a-2-1-roni-cantor: "I used p5.js in this project to generate the sine wave and lerp (linear interpolation) formulas and display the visuals in the "
- project-a-2-2-roni-cantor: ". I then used a feature in my code that exported my programmed graphic into an "
- project-a-2-3-roni-cantor: " file. I needed an SVG file to give to the plotter—an "
- project-a-2-4-roni-cantor: "—so that it understood where to draw the lines that I programmed. I sent this information to the plotter with a program called "
- project-a-2-5-roni-cantor: "!"
- project-q-3: "What's your favorite p5.js feature?"
- project-a-3-roni-cantor: " because lines are fun and \"lerp\" is a fun word to say!"
- project-q-4: "Did you face any challenges working on this project? If so, how did you overcome them?"
- project-a-4-roni-cantor: "It was my first time using p5.js, Inkscape, and a plotter! I really benefited from the people around me who had used p5 before, as well as online guides and forums."
- project-q-5: "What's a cool thing we should check out?"
- project-a-5-roni-cantor: " on Instagram—super cool analog plotter stuff."
- project-q-6: "Where can people learn more about you?"
- project-a-6-roni-cantor: " (Instagram)"
-
- project-resources: "Project Resources"
- creator-from-qianqian: "Los Angeles, California"
- interview-link-qianqian: "Processing Foundation interview with Qianqian Ye"
- project-a-1-1-qianqian: "I am a Chinese artist and designer based in Los Angeles."
- project-a-1-2-qianqian: "My partner introduced me to p5.js, which I learned mainly by watching free online video tutorials. My first p5.js project was drawing some shapes with different colors."
- project-a-2-1-qianqian: "This project started with an idea of teaching my mom, who lives in China and doesn’t speak English, to code with p5.js. This project was difficult on multiple levels, and I wanted to start by identifying the main reasons why it’s more challenging for someone like my mother to learn to code—primarily due to the lack of free creative coding education resources. Most of the free resources to learn creative coding are unavailable in China. The p5.js tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are inaccessible in China because of internet censorship."
- project-a-2-2-qianqian: "I learned a lot from YouTube videos such as the "
- project-a-2-3-qianqian: ", but the more I watched coding tutorials online, the more I realized how difficult it is to find other womxn and people of color teaching coding, especially in Mandarin. I wanted to help other Chinese womxn relate to creative coding."
- project-a-2-4-qianqian: "I am working on opening up the video channels to other Chinese creatives who want to contribute to the educational resource together, like interviews and guest tutorials. If you are interested in teaching/talking about creative coding in Mandarin, HMU!"
- project-a-3-1-qianqian: "The "
- project-a-3-2-qianqian: " is my favorite feature. It makes web-based creative coding seamless."
- project-a-4-1-qianqian: "Learning to code in a second language was difficult and the lack of community made this process even harder. I hope to speak from my experience as a beginner and someone who once felt like an outsider to the creative coding and video tutorial world."
- project-a-4-2-qianqian: "I spend a lot of time researching the latest technology for my videos. In the end, I decided on using my phone to record and iMovie to edit. I hope to encourage others that it doesn’t take a lot of expensive gears to get started making instructional videos."
- project-a-4-3-qianqian: "Another issue I came across was my own fear of putting myself online. I first had to get over my anxiety of making mistakes in the videos or receiving negative comments online. Often womxn and people of color are targets for online harassment. I’m hoping to help set an example for other womxn and people of color that it’s ok to put yourselves online and strengthen your communities by sharing your knowledge. Eventually, we will be able to stop online harassment by creating strong diverse communities."
- project-a-5-1-qianqian: "I am very excited about "
- project-a-5-2-qianqian: " in LA."
-
- creator-from-phuong: "From Kyiv, Ukraine"
- project-a-1-1-phuong: "I'm a creative coder and designer, a "
- link-1-phuong: "Play Airi Flies!"
- link-2-phuong: "Code for AiriFlies on GitHub"
- link-3-phuong: "More info in Phuong Ngo's portfolio"
- project-a-1-2-phuong: " diversity scholarship recipient, and just a curious creature."
- project-a-1-3-phuong: "I was taking a course at the School of Machines in Berlin this summer called! \""
- project-a-1-4-phuong: ",\" mainly taught by "
- project-a-2-1-phuong: "I used p5.js to work on the visual part of the game. The animation sprites for Airi and the ghosts were drawn on an iPad app called "
- project-a-2-2-phuong: " and then integrated into "
- project-a-2-3-phuong: " code. I mainly used examples at p5.play as a reference."
- project-a-2-4-phuong: "For the endless scrolling background, I found a "
- p5-sketch-by-chjno-phuong: "p5 sketch by chjno"
- project-a-2-5-phuong: ". I set a condition so whenever the word \"pew\" or a mouse click was detected, the scrolling speed would change to make an illusion of Airi flying up. When the user does not do anything, the scrolling speed is negative, which makes it look like Airi is falling down."
- project-a-2-6-phuong: "For sound recognition, I used "
- project-a-2-7-phuong: " (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word \"pew\" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with "
- project-a-3-1-phuong: "I really love how easily you can create, manipulate, and delete HTML blocks and classes with the "
- project-a-3-2-phuong: " via "
- project-a-3-3-phuong: " etc. But my most favorite function is "
- project-a-3-4-phuong: ", since this is where you create magic."
- project-a-4-1-phuong: "There were a lot of challenges simply because p5.js was something new to me. I did not work much with JavaScript in general before. Reading documentation and searching for similar examples helped a lot."
- project-a-5-1-phuong: "Check out "
- school-of-machines-phuong: "School of Machines' courses"
- project-a-5-2-phuong: "! They try hard to connect the most creative people in the world and they do it well so far. ❤️"
-
- pronouns-male: "(he/him)"
- creator-from-chung: "From Baltimore, Maryland"
- link-1-casey-louise: "p5.js Shaders guide"
- link-2-casey-louise: "Glitch collection of p5.js shader examples"
- link-1-chung: "View Chillin'"
- link-2-chung: "Code for Chillin' on GitHub"
- link-3-chung: "More info in Dae In Chung's Portfolio"
- project-a-1-1-chung: "I am a graphic designer and a faculty member at Maryland Institute College of Art, where I mainly teach coding (with p5.js and Processing, of course) and motion graphics."
- project-a-1-2-chung: "I have been using "
- project-a-1-3-chung: " for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online."
- project-a-2-1-chung: "This summer, I gave myself a challenge of making typographic posters with coding, and this is one of the posters I made. I didn’t know until very recently that I could use motion sensor data with p5.js. I was also watching "
- dan-shiffman-matterjs-tutorial: "Dan Shiffman’s matter.js tutorial videos"
- project-a-2-2-chung: ", so I thought why not combine the two and practice what I was learning?"
- project-a-3-1-chung: "There are many things I love about p5.js such as the online community and beginner friendliness. What I really like right now is the "
- project-a-3-2-chung: ", with which I can not only work online for myself but also share URLs quickly in the present mode. For this project in particular, I had to do a lot of testing on my phone, and it was much easier and quicker than committing to GitHub."
- project-a-4-1-chung: "I had some troubles with handling font, alpha channel and z-depth in "
- project-a-4-2-chung: " mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of "
- project-a-4-3-chung: " and build a tool for myself."
- project-a-5-1-chung: "As mentioned above, if you want to render out frames and video files out of p5.js sketches, check out my "
- project-a-5-2-chung: " and let me know what you think."
-
- creator-from-casey-louise: "From New York, New York"
- project-a-1-1-casey-louise: "Casey: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces, physical and digital."
- project-a-1-2-casey-louise: "Louise: I'm a student at NYU ITP who's interested in computer graphics and interactive spaces based on sensor technologies."
- project-a-1-3-casey-louise: "Casey: I started learning p5.js in 2018 in my first semester at ITP, though I had been dabbling in "
- project-a-1-4-casey-louise: " since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone."
- project-a-1-5-casey-louise: "Louise: I initially learned p5.js to make a website I was creating more playful. I’m a C# programmer, so this was a good segway into JavaScript for me."
- project-a-2-1-casey-louise: "Casey: I was putting off learning shaders for a long time, and I was also curious if I could use them in p5.js. Then I heard about a grant for open source, storytelling, and learning resource projects at ITP called "
- project-a-2-2-casey-louise: ". Since I wasn't finding much in the way of p5.js + shader documentation, I decided to figure out how they're implemented in p5.js and create a resource for others to learn. When I told Louise about the project, she was immediately excited about learning and teaching shaders in p5.js. She's been great about making sure the project is a learning resource and not just a collection of examples."
- project-a-3-1-casey-louise: "Casey: Does "
- project-a-3-2-casey-louise: " count as a feature? I also love having the ability to share my programs on the web so that people don't have to install special software or come to NYC to see my work."
- project-a-3-3-casey-louise: "Louise: My favorite feature is "
- project-a-3-4-casey-louise: " and "
- project-a-3-5-casey-louise: " for transformation of the coordinate system to make generative visuals."
- project-a-4-1-casey-louise: "Casey: The beginning of the project (figuring out how things work) was us reaching out to amazing people, asking questions, and asking for permission to use their examples in our project. "
- adam-ferris-repo-casey-louise: "Adam Ferriss' GitHub repo"
- project-a-4-2-casey-louise: " really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to "
- project-a-4-3-casey-louise: " and "
- project-a-4-4-casey-louise: " (who worked on the "
- webgl-casey-louise: "WebGL implementation in p5.js"
- project-a-4-5-casey-louise: "), and they were super helpful."
- project-a-4-6-casey-louise: "Louise: The learning curve was pretty steep for getting shaders into p5. Luckily, there were some very well-documented examples on GitHub by Adam Ferriss. Our aim was to do so in a way that a complete beginner can understand how to implement it, so it was as much a technical challenge as it was a challenge in teaching code to strangers and beginners. Here we drew inspiration from the way the "
- openframeworks-book-casey-louise: "openFrameworks book"
- project-a-4-7-casey-louise: " is written. A fun \"hey, it’s not hard and you can do it too\" approach is what we believe in."
- project-a-5-1-casey-louise: "Check out the "
- project-a-5-2-casey-louise: " to see our peers' amazing grant projects!"
-
- pronouns-nonbinary: "(they/them)"
- creator-from-moon: "From Athens, Georgia"
- posters-by: "Posters By"
- project-a-1-1-moon: "Moon: I'm a graphic designer, visual artist, and design educator. This summer, I taught a graphic design course in the University of Georgia Cortona program in Italy, introducing some basics of p5.js. This fall, I am planning to teach and to study digital platforms at UGA."
- project-a-1-2-moon: "My former colleague, "
- project-a-1-3-moon: ", invited me to "
- project-a-1-4-moon: " in "
- pcd-la-moon: "LA in January 2019"
- project-a-1-5-moon: ". They helped me with the tools and logics of p5.js. It was an excellent teaching and learning experience."
- project-a-2-1-moon: "We followed basic tutorials, "
- codetrain-moon: "Daniel's videos on YouTube"
- project-a-2-2-moon: ", and "
- p5-reference-moon: "Reference on the p5.js website"
- project-a-2-3-moon: "."
- project-a-3-1-moon: "My favorite function is related to "
- project-a-3-2-moon: " and "
- project-a-3-3-moon: ": "
- project-a-3-4-moon: ". I was able to use and to teach this tool to visualize various ideas about time in motion."
- project-a-4-1-moon: "It was challenging for me, a beginner, to understand the overall structure of p5.js and how code works in general. I had to repeat the p5.js basics a couple of times, and then I drew a chart to memorize and to teach the way I understood the p5.js structure and code with strong constraints I set up. It was an excellent teaching and learning experience."
- project-a-5-1-moon: "Check out the "
- project-a-5-2-moon: " in Milan, Italy."
-
+ showcase-title: Showcase
+ showcase-intro1: 这是p5.js展示区,由
+ showcase-intro2: 在2019年建立,目前由
+ showcase-intro3: >-
+ 策划。我们在展示人们如何使用p5.js使创意工作,学习和开源变得更加有趣和包容。我们在一起,共同建立社区。在2019年夏季,我们邀请了一些创作者来分享更多有关他们如何通过不同项目和作品使用p5.js。
+ showcase-intro4: 2020年夏季展示区现已开始接受报名,提名某人的p5.js作品或您自己的作品在这里进行展示!
+ nominate-project: 提名作品
+ showcase-featuring: Featuring
+ project-tag-art: Art
+ project-tag-design: Design
+ project-tag-code: Code
+ project-tag-curriculum: Curriculum
+ project-tag-documentation: Documentation
+ project-tag-game: Game
+ project-tag-library: Library
+ project-tag-organizing: Organizing
+ project-tag-tool: Tool
+ project-tag-tutorial: Tutorial
+ project-roni: Programmed Plotter Drawings
+ credit-roni: Roni Cantor
+ description-roni: >-
+ Sine waves and lerps generated in p5.js, exported as SVG, and drawn with a
+ plotter and pens.
+ project-phuong: Airi Flies
+ credit-phuong: Phuong Ngo
+ description-phuong: >-
+ In this game developed with p5.play, help Airi fly by saying PEW. Created to
+ encourage people to get out of their comfort zone and feel more confident
+ about themselves regardless of what they do and how they look or sound.
+ project-daein: Chillin'
+ credit-daein: Dae In Chung
+ description-daein: >-
+ An interactive typographic poster that uses a mobile device's motion sensor
+ with p5.js.
+ project-qianqian: Qtv
+ credit-qianqian: Qianqian Ye
+ description-qianqian: >-
+ A video channel with 1-minute videos in Mandarin about creative coding, art,
+ and technology, including p5.js tutorials for beginners. Available on
+ YouTube, Instagram, Bilibili, and TikTok.
+ project-casey-louise: p5.js Shaders
+ credit-casey-louise: 'Casey Conchinha, Louise Lessél'
+ description-casey-louise: 'A resource for learning the what, why, and how of using shaders in p5.js.'
+ project-moon-xin: Moving Responsive Posters
+ credit-moon-xin: 'Moon Jang, Xin Xin, and students'
+ description-moon-xin: >-
+ Browser-based moving posters that use graphical systems, transformation
+ methods, and p5.js to address the connotations of a word less than 8
+ letters. Designed by students for a graphic design course (Visual Narrative
+ Systems) at the University of Georgia.
+ created-by: Created By
+ pronouns-female: (she/her)
+ creator-from-roni-cantor: 'From Toronto, Canada'
+ project-links: Project Links
+ project-links-text-1-roni-cantor: Example sketch in p5.js Web Editor
+ project-links-text-2-roni-cantor: AxiDraw V3 demo video
+ project-q-1-1: What are you up to?
+ project-q-1-2: How did you get started with p5.js?
+ project-a-1-1-roni-cantor: >-
+ I just graduated from Ryerson University's New Media program. Coming from 4
+ years of coding and making robots, I decided to take a break and play with
+ some more traditional forms of art—while still coding and playing with
+ robots.
+ project-a-1-2-roni-cantor: 'I first started using p5.js at '
+ project-a-1-3-roni-cantor: '! After using '
+ project-a-1-4-roni-cantor: ' for many years, I wanted to try something new.'
+ project-q-2: How did you use p5.js in this project?
+ project-a-2-1-roni-cantor: >-
+ I used p5.js in this project to generate the sine wave and lerp (linear
+ interpolation) formulas and display the visuals in the
+ project-a-2-2-roni-cantor: >-
+ . I then used a feature in my code that exported my programmed graphic into
+ an
+ project-a-2-3-roni-cantor: ' file. I needed an SVG file to give to the plotter—an '
+ project-a-2-4-roni-cantor: >-
+ —so that it understood where to draw the lines that I programmed. I sent
+ this information to the plotter with a program called
+ project-a-2-5-roni-cantor: '!'
+ project-q-3: What's your favorite p5.js feature?
+ project-a-3-roni-cantor: ' because lines are fun and "lerp" is a fun word to say!'
+ project-q-4: >-
+ Did you face any challenges working on this project? If so, how did you
+ overcome them?
+ project-a-4-roni-cantor: >-
+ It was my first time using p5.js, Inkscape, and a plotter! I really
+ benefited from the people around me who had used p5 before, as well as
+ online guides and forums.
+ project-q-5: What's a cool thing we should check out?
+ project-a-5-roni-cantor: ' on Instagram—super cool analog plotter stuff.'
+ project-q-6: Where can people learn more about you?
+ project-a-6-roni-cantor: ' (Instagram)'
+ project-resources: Project Resources
+ creator-from-qianqian: 'Los Angeles, California'
+ interview-link-qianqian: Processing Foundation interview with Qianqian Ye
+ project-a-1-1-qianqian: I am a Chinese artist and designer based in Los Angeles.
+ project-a-1-2-qianqian: >-
+ My partner introduced me to p5.js, which I learned mainly by watching free
+ online video tutorials. My first p5.js project was drawing some shapes with
+ different colors.
+ project-a-2-1-qianqian: >-
+ This project started with an idea of teaching my mom, who lives in China and
+ doesn’t speak English, to code with p5.js. This project was difficult on
+ multiple levels, and I wanted to start by identifying the main reasons why
+ it’s more challenging for someone like my mother to learn to code—primarily
+ due to the lack of free creative coding education resources. Most of the
+ free resources to learn creative coding are unavailable in China. The p5.js
+ tutorials on YouTube as well as the p5.js Twitter and Instagram accounts are
+ inaccessible in China because of internet censorship.
+ project-a-2-2-qianqian: 'I learned a lot from YouTube videos such as the '
+ project-a-2-3-qianqian: >-
+ , but the more I watched coding tutorials online, the more I realized how
+ difficult it is to find other womxn and people of color teaching coding,
+ especially in Mandarin. I wanted to help other Chinese womxn relate to
+ creative coding.
+ project-a-2-4-qianqian: >-
+ I am working on opening up the video channels to other Chinese creatives who
+ want to contribute to the educational resource together, like interviews and
+ guest tutorials. If you are interested in teaching/talking about creative
+ coding in Mandarin, HMU!
+ project-a-3-1-qianqian: 'The '
+ project-a-3-2-qianqian: ' is my favorite feature. It makes web-based creative coding seamless.'
+ project-a-4-1-qianqian: >-
+ Learning to code in a second language was difficult and the lack of
+ community made this process even harder. I hope to speak from my experience
+ as a beginner and someone who once felt like an outsider to the creative
+ coding and video tutorial world.
+ project-a-4-2-qianqian: >-
+ I spend a lot of time researching the latest technology for my videos. In
+ the end, I decided on using my phone to record and iMovie to edit. I hope to
+ encourage others that it doesn’t take a lot of expensive gears to get
+ started making instructional videos.
+ project-a-4-3-qianqian: >-
+ Another issue I came across was my own fear of putting myself online. I
+ first had to get over my anxiety of making mistakes in the videos or
+ receiving negative comments online. Often womxn and people of color are
+ targets for online harassment. I’m hoping to help set an example for other
+ womxn and people of color that it’s ok to put yourselves online and
+ strengthen your communities by sharing your knowledge. Eventually, we will
+ be able to stop online harassment by creating strong diverse communities.
+ project-a-5-1-qianqian: 'I am very excited about '
+ project-a-5-2-qianqian: ' in LA.'
+ creator-from-phuong: 'From Kyiv, Ukraine'
+ project-a-1-1-phuong: 'I''m a creative coder and designer, a '
+ link-1-phuong: Play Airi Flies!
+ link-2-phuong: Code for AiriFlies on GitHub
+ link-3-phuong: More info in Phuong Ngo's portfolio
+ project-a-1-2-phuong: ' diversity scholarship recipient, and just a curious creature.'
+ project-a-1-3-phuong: >-
+ I was taking a course at the School of Machines in Berlin this summer
+ called! "
+ project-a-1-4-phuong: '," mainly taught by '
+ project-a-2-1-phuong: >-
+ I used p5.js to work on the visual part of the game. The animation sprites
+ for Airi and the ghosts were drawn on an iPad app called
+ project-a-2-2-phuong: ' and then integrated into '
+ project-a-2-3-phuong: ' code. I mainly used examples at p5.play as a reference.'
+ project-a-2-4-phuong: 'For the endless scrolling background, I found a '
+ p5-sketch-by-chjno-phuong: p5 sketch by chjno
+ project-a-2-5-phuong: >-
+ . I set a condition so whenever the word "pew" or a mouse click was
+ detected, the scrolling speed would change to make an illusion of Airi
+ flying up. When the user does not do anything, the scrolling speed is
+ negative, which makes it look like Airi is falling down.
+ project-a-2-6-phuong: 'For sound recognition, I used '
+ project-a-2-7-phuong: ' (currently, there is a beta version not available in public yet, but it will be very soon!). I added around 120 samples of my classmates saying the word "pew" with different intonations and 80 samples of background noise to train it. Then I integrated the model into the game with '
+ project-a-3-1-phuong: >-
+ I really love how easily you can create, manipulate, and delete HTML blocks
+ and classes with the
+ project-a-3-2-phuong: ' via '
+ project-a-3-3-phuong: ' etc. But my most favorite function is '
+ project-a-3-4-phuong: ', since this is where you create magic.'
+ project-a-4-1-phuong: >-
+ There were a lot of challenges simply because p5.js was something new to me.
+ I did not work much with JavaScript in general before. Reading documentation
+ and searching for similar examples helped a lot.
+ project-a-5-1-phuong: 'Check out '
+ school-of-machines-phuong: School of Machines' courses
+ project-a-5-2-phuong: >-
+ ! They try hard to connect the most creative people in the world and they do
+ it well so far. ❤️
+ pronouns-male: (he/him)
+ creator-from-chung: 'From Baltimore, Maryland'
+ link-1-casey-louise: p5.js Shaders guide
+ link-2-casey-louise: Glitch collection of p5.js shader examples
+ link-1-chung: View Chillin'
+ link-2-chung: Code for Chillin' on GitHub
+ link-3-chung: More info in Dae In Chung's Portfolio
+ project-a-1-1-chung: >-
+ I am a graphic designer and a faculty member at Maryland Institute College
+ of Art, where I mainly teach coding (with p5.js and Processing, of course)
+ and motion graphics.
+ project-a-1-2-chung: 'I have been using '
+ project-a-1-3-chung: ' for some time, and when p5.js came along, I started using it without a second thought because it was easy to convert existing Processing code and share projects online.'
+ project-a-2-1-chung: >-
+ This summer, I gave myself a challenge of making typographic posters with
+ coding, and this is one of the posters I made. I didn’t know until very
+ recently that I could use motion sensor data with p5.js. I was also watching
+ dan-shiffman-matterjs-tutorial: Dan Shiffman’s matter.js tutorial videos
+ project-a-2-2-chung: ', so I thought why not combine the two and practice what I was learning?'
+ project-a-3-1-chung: >-
+ There are many things I love about p5.js such as the online community and
+ beginner friendliness. What I really like right now is the
+ project-a-3-2-chung: >-
+ , with which I can not only work online for myself but also share URLs
+ quickly in the present mode. For this project in particular, I had to do a
+ lot of testing on my phone, and it was much easier and quicker than
+ committing to GitHub.
+ project-a-4-1-chung: 'I had some troubles with handling font, alpha channel and z-depth in '
+ project-a-4-2-chung: ' mode. I am still not happy with all my decisions. But in general, it was helpful to search the forum and not to forget to break down problems into smaller ones and iterate little by little. Also, I had issues with rendering out video files directly out of p5.js. Screen recording was not an option because of intermittent frame rate drops (my laptop is pretty slow). After doing some research, I decided to learn some basics of '
+ project-a-4-3-chung: ' and build a tool for myself.'
+ project-a-5-1-chung: >-
+ As mentioned above, if you want to render out frames and video files out of
+ p5.js sketches, check out my
+ project-a-5-2-chung: ' and let me know what you think.'
+ creator-from-casey-louise: 'From New York, New York'
+ project-a-1-1-casey-louise: >-
+ Casey: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces, physical and digital.
+ project-a-1-2-casey-louise: >-
+ Louise: I'm a student at NYU ITP who's interested in computer graphics and
+ interactive spaces based on sensor technologies.
+ project-a-1-3-casey-louise: >-
+ Casey: I started learning p5.js in 2018 in my first semester at ITP, though
+ I had been dabbling in
+ project-a-1-4-casey-louise: ' since 2012. I was introduced to Processing by my friend Pedro while I was studying graphic design, and it blew my mind. The idea of making my own tools for creating graphics and interactive art piqued my interest, but once I actually tried it, I was hooked. The first project I can remember was an eye that followed you around the screen, and it was sad when you left it alone.'
+ project-a-1-5-casey-louise: >-
+ Louise: I initially learned p5.js to make a website I was creating more
+ playful. I’m a C# programmer, so this was a good segway into JavaScript for
+ me.
+ project-a-2-1-casey-louise: >-
+ Casey: I was putting off learning shaders for a long time, and I was also
+ curious if I could use them in p5.js. Then I heard about a grant for open
+ source, storytelling, and learning resource projects at ITP called
+ project-a-2-2-casey-louise: >-
+ . Since I wasn't finding much in the way of p5.js + shader documentation, I
+ decided to figure out how they're implemented in p5.js and create a resource
+ for others to learn. When I told Louise about the project, she was
+ immediately excited about learning and teaching shaders in p5.js. She's been
+ great about making sure the project is a learning resource and not just a
+ collection of examples.
+ project-a-3-1-casey-louise: 'Casey: Does '
+ project-a-3-2-casey-louise: ' count as a feature? I also love having the ability to share my programs on the web so that people don''t have to install special software or come to NYC to see my work.'
+ project-a-3-3-casey-louise: 'Louise: My favorite feature is '
+ project-a-3-4-casey-louise: ' and '
+ project-a-3-5-casey-louise: ' for transformation of the coordinate system to make generative visuals.'
+ project-a-4-1-casey-louise: >-
+ Casey: The beginning of the project (figuring out how things work) was us
+ reaching out to amazing people, asking questions, and asking for permission
+ to use their examples in our project.
+ adam-ferris-repo-casey-louise: Adam Ferriss' GitHub repo
+ project-a-4-2-casey-louise: ' really laid the groundwork for us in understanding how shaders work in p5.js and provided a framework of approachable examples for us to build on. For some specific p5.js-related issues we were having, we reached out to '
+ project-a-4-3-casey-louise: ' and '
+ project-a-4-4-casey-louise: ' (who worked on the '
+ webgl-casey-louise: WebGL implementation in p5.js
+ project-a-4-5-casey-louise: '), and they were super helpful.'
+ project-a-4-6-casey-louise: >-
+ Louise: The learning curve was pretty steep for getting shaders into p5.
+ Luckily, there were some very well-documented examples on GitHub by Adam
+ Ferriss. Our aim was to do so in a way that a complete beginner can
+ understand how to implement it, so it was as much a technical challenge as
+ it was a challenge in teaching code to strangers and beginners. Here we drew
+ inspiration from the way the
+ openframeworks-book-casey-louise: openFrameworks book
+ project-a-4-7-casey-louise: ' is written. A fun "hey, it’s not hard and you can do it too" approach is what we believe in.'
+ project-a-5-1-casey-louise: 'Check out the '
+ project-a-5-2-casey-louise: ' to see our peers'' amazing grant projects!'
+ pronouns-nonbinary: (they/them)
+ creator-from-moon: 'From Athens, Georgia'
+ posters-by: Posters By
+ project-a-1-1-moon: >-
+ Moon: I'm a graphic designer, visual artist, and design educator. This
+ summer, I taught a graphic design course in the University of Georgia
+ Cortona program in Italy, introducing some basics of p5.js. This fall, I am
+ planning to teach and to study digital platforms at UGA.
+ project-a-1-2-moon: 'My former colleague, '
+ project-a-1-3-moon: ', invited me to '
+ project-a-1-4-moon: ' in '
+ pcd-la-moon: LA in January 2019
+ project-a-1-5-moon: >-
+ . They helped me with the tools and logics of p5.js. It was an excellent
+ teaching and learning experience.
+ project-a-2-1-moon: 'We followed basic tutorials, '
+ codetrain-moon: Daniel's videos on YouTube
+ project-a-2-2-moon: ', and '
+ p5-reference-moon: Reference on the p5.js website
+ project-a-2-3-moon: .
+ project-a-3-1-moon: 'My favorite function is related to '
+ project-a-3-2-moon: ' and '
+ project-a-3-3-moon: ': '
+ project-a-3-4-moon: >-
+ . I was able to use and to teach this tool to visualize various ideas about
+ time in motion.
+ project-a-4-1-moon: >-
+ It was challenging for me, a beginner, to understand the overall structure
+ of p5.js and how code works in general. I had to repeat the p5.js basics a
+ couple of times, and then I drew a chart to memorize and to teach the way I
+ understood the p5.js structure and code with strong constraints I set up. It
+ was an excellent teaching and learning experience.
+ project-a-5-1-moon: 'Check out the '
+ project-a-5-2-moon: ' in Milan, Italy.'
teach:
- teach-title2: "Teach"
- teach-intro1: "Every teaching has its own unique goals, messages, conditions, and environments. "
- teach-intro2: "By documenting and sharing p5 workshops, classes, and materials, we hope to better connect the p5.js learner and educator communities around the world. "
- teach-intro3: "Share or recommend"
- teach-intro4: "your own teaching experiences, too!"
- teach-heading: "p5 Teaching Resources"
- teach-search-filter: "Search Filter"
- teach-filter1: "Diversity & Inclusion : "
- teach-filter1-label1: "Gender"
- teach-filter1-label2: "Race & Ethnicity"
- teach-filter1-label3: "Language"
- teach-filter1-label4: "Neuro-Type"
- teach-filter1-label5: "Ability"
- teach-filter1-label6: "Class"
- teach-filter1-label7: "Religion"
- teach-filter1-label8: "(Sub-)Culture"
- teach-filter1-label9: "Political Opinion"
- teach-filter1-label10: "Age"
- teach-filter1-label11: "Skill Level"
- teach-filter1-label12: "Occupation"
- teach-filter1-label13: "#noCodeSnobs"
- teach-filter1-label14: "#newKidLove"
- teach-filter1-label15: "#unassumeCore"
- teach-filter1-label16: "#BlackLivesMatter"
-
- teach-filter2: "Venue : "
- teach-filter2-label1: "Africa"
- teach-filter2-label2: "Asia"
- teach-filter2-label3: "Europe"
- teach-filter2-label4: "North America"
- teach-filter2-label5: "Oceania"
- teach-filter2-label6: "South America"
- teach-filter2-label7: "Virtual-Online "
-
- teach-filter3: "Year : "
-
- teach-filter4: "Level of Difficulty : "
- teach-filter4-label1: "Elementary"
- teach-filter4-label2: "Intermediate"
- teach-filter4-label3: "Advanced"
-
- teach-case-subtitle1: "Venue & Date"
- teach-case-subtitle2: "Participants"
- teach-case-subtitle3: "Level of Difficulty"
- teach-case-subtitle4: "Goals"
- teach-case-subtitle5: "Method & Materials"
-
- teach-case1-title: "p5.js à l'Ubuntu Party!"
- teach-case1-lead-name: "Basile Pesin"
- teach-case1-content1: "2020 Ubuntu Party, "
- teach-case1-content1-1: "Cité des Sciences et de l'Industrie, Paris, France"
- teach-case1-content2: "Any age, including children and parents, young and older adults."
- teach-case1-content3: "Advanced"
- teach-case1-content4: "To introduce a new public to programming through fun and compelling examples. "
- teach-case1-content5: "Method: in-person workshop, 1 hour per session, with different participant each times. The students were using (Ubuntu) machines with the p5.js web editor. I was teaching using a video projector as well as a board."
- teach-case1-content5-1: "Materials: The exercises I gave where accessible through p5.js web-editor links available in "
-
- teach-case2-title: "Making The Thing that Makes the Thing: Exploring Generative Art & Design with p5.js"
- teach-case2-lead-name: "Priti Pandurangan & Ajith Ranka"
- teach-case2-content1: "National Institute of Design, Bangalore"
- teach-case2-content1-1: "2020 February 8, 2:30-4:00 PM"
- teach-case2-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case2-content3: "Priti: Intermediate & Ajith: Advanced"
- teach-case2-content4: "To explore generative art & design and recreate some classical works with p5.js. "
- teach-case2-content5: "Methods: In-person, collaborative, hands-on workshop."
- teach-case2-content5-1: "Materials: "
- teach-case2-content5-2: "course page "
- teach-case2-content5-3: "linking to sketches on the p5 editor, "
- teach-case2-content5-4: "interactive reference guide "
- teach-case2-content5-5: "to p5 basics"
-
- teach-case3-title: "CC Fest (Creative Coding Festival)"
- teach-case3-lead-name: "Saber"
- teach-case3-speech: "Love p5.js. It has meant so much to me, my students, and this community."
- teach-case3-content1: " New York, Los Angeles, San Francisco, Virtual-Online "
- teach-case3-content1-1: " Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual"
- teach-case3-content2: "Our participants included art/design students & professionals, creative coding enthusiasts. We had close to 50 participants."
- teach-case3-content3: "Intermediate"
- teach-case3-content4: "To build a teacher and student community around p5 for middle and high school."
- teach-case3-content5: "A half-day of workshop led by volunteer teachers. We saw lots of different methods and materials. Most used some sort of slides or documentation, some live coding using an editor, with work time for participant to remix."
- teach-case3-content5-1: "CC Fest Lessons page"
- teach-case3-content5-2: " for teaching materials"
- teach-case3-content5-3: "More photos"
-
- teach-case4-title: "Taller Introducción a la Programación Creativa con p5.js"
- teach-case4-lead-name: "Aarón Montoya-Moraga"
- teach-case4-speech: "p5.js is my happy place "
- teach-case4-content1: " PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online "
- teach-case4-content1-1: " 2018 November 14, 3 hours"
- teach-case4-content2: "I had around 16 students in the workshop, and a team including 3 people from the PlusCode festival, and one person at the venue."
- teach-case4-content3: "Elementary, Intermediate, Advanced"
- teach-case4-content4: "Introduction to beginners and artists of graphic web programming and open source, using p5.js, in Spanish :)"
- teach-case4-content5: "I used the material on this "
- teach-case4-content5-1: "GitHub repo"
- teach-case4-content5-2: ", we used the p5.js web editor, we had a three hour long workshop"
- teach-case4-content5-3: "+CODE electronic art festival 2018, Argentina"
- teach-case4-content5-4: ", Medium"
-
- teach-case5-title: "Introduction to Generative Drawing"
- teach-case5-lead-name: "Adam Herst"
- teach-case5-speech: "My greatest source of uncertainty in developing the workshop was whether it was trying to teach art to programmers or to teach programming to artists."
- teach-case5-content1: "Inter/Access"
- teach-case5-content1-1: " (artist-run centre), Toronto, Ontario, Canada"
- teach-case5-content1-2: "In-person with a self-paced workbook for remote work"
- teach-case5-content1-3: " 2020 February 12, 7PM-9PM"
- teach-case5-content2: "15 artists"
- teach-case5-content3: "Elementary"
- teach-case5-content4: "To introduce p5.js to artists with little or no programming experience and to suggest one way an analogue practice can migrate to a digital form."
- teach-case5-content5: "A printed workbook with activities that used the p5.js web editor to show how translate an physical drawing into a digital drawing."
- teach-case5-content5-1: "Processing Community Day 2019: Generative Drawing at Inter/Access"
- teach-case5-content5-2: "Introduction to Generative Drawing Letter PDF"
- teach-case5-content5-3: "Introduction to Generative Drawing Booklet PDF"
-
- teach-case6-title: "Open Lecture, Creative Coding: 2020"
- teach-case6-lead-name: "Shunsuke Takawo"
- teach-case6-speech: "I love p5.js because it's so easy to read and write code in p5.js. Coding in your everyday life!"
- teach-case6-content1: " Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online "
- teach-case6-content1-1: " 2020 March 16-18, 1-7 PM"
- teach-case6-content2: "Students of Kyoto University of Art and Design, and anyone."
- teach-case6-content3: "Elementary"
- teach-case6-content4: "Making code as a tool for artistic expression."
- teach-case6-content5: "Dropbox Paper, p5.js web editor."
- teach-case6-content5-1: "Syllabus"
- teach-case6-content5-2: "Day 1"
- teach-case6-content5-3: "Day 2"
- teach-case6-content5-4: "Day 3"
- teach-case6-content5-5: ", YouTube"
-
- teach-case7-title: "Creative Coding for Static Graphics"
- teach-case7-lead-name: "Shunsuke Takawo"
- teach-case7-speech: "Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you to give it a try!"
- teach-case7-content1: " FabCafe MTRL, Tokyo, Japan"
- teach-case7-content1-1: " 2019 September 15, 4-7 PM "
- teach-case7-content2: "Anyone who wants to try coding in p5.js."
- teach-case7-content3: "Intermediate"
- teach-case7-content4: "To code from the graphic design's perspective."
- teach-case7-content5: "Dropbox Paper, p5.js web editor."
- teach-case7-content5-1: "Syllabus & Material"
-
- teach-case8-title: "Generative Typography"
- teach-case8-lead-name: "Dae In Chung"
- teach-case8-content1: " Baltimore, Maryland, USA & Virtual-Online "
- teach-case8-content1-1: " 2019 January 21 - May 08, every Wednesday, 4-10 PM"
- teach-case8-content2: "14 undergrads and grad students who had little to no experience in coding."
- teach-case8-content3: "Elementary"
- teach-case8-content4: "Experiment with typographic forms and structures through computation."
- teach-case8-content5: "Methods: online/offline lectures and critiques."
- teach-case8-content5-1: "Materials: p5js online editor, Github, youtube tutorials."
- teach-case8-content5-2: "Works of participants"
-
- teach-case9-title: "Machine Learning for the Web"
- teach-case9-lead-name: "Yining Shi"
- teach-case9-content1: " ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA"
- teach-case9-content1-1: "2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM"
- teach-case9-content2: "Students at Interactive Telecommunications Program, New York University. 16 people."
- teach-case9-content3: "Elementary, Intermediate"
- teach-case9-content4: "The goal of this class is to learn and understand common machine learning techniques and apply them to generate creative outputs in the browser using ml5.js and p5.js."
- teach-case9-content5: "This class is a mix of lectures, coding sessions, group discussions, and presentations. I used "
- teach-case9-content5-1: "GitHub"
- teach-case9-content5-2: " to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes."
- teach-case9-content5-3: "Methods: online/offline lectures and critiques."
-
- teach-case10-title: "Introduction to p5.js and JavaScript"
- teach-case10-lead-name: "Nico Reski"
- teach-case10-content1: " Currently available as self-study at own pace with accompanying slides, linked below."
- teach-case10-content3: "Beginner, Elementary"
- teach-case10-content4: "Introduce learners (potentially with no coding experiences at all) to the very basics of p5.js (and JavaScript), in order to encourage creative coding and enable them to pursue own projects in a safe environment."
- teach-case10-content5: "p5.js source code (for the introductory project), JavaScript source code (illustrating some basic JavaScript functionalities), accompanying slides in .pdf format, all hosted publicly on GitHub. "
- teach-case10-content5-1: "Overview"
- teach-case10-content5-2: " of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage."
-
- teach-case11-title: "Digital Weaving & Physical Computing Workshop Series"
- teach-case11-lead-name: "Qianqian Ye & Evelyn Masso"
- teach-case11-content1: " Womens Center for Creative Work (WCCW), Los Angeles, CA, US"
- teach-case11-content1-1: " 2019 October 19 - November 02, every Saturday 3-6 PM"
- teach-case11-content2: "15 women and non-binary artists, designer, makers, programers. "
- teach-case11-content3: "Elementary"
- teach-case11-content4: "Over the course of three workshops, we will draw and create patterns using p5.js, an open-source graphical library; we will learn and apply computational concepts to transform patterns and finally, we will bring a weaving to life with electronic microcontrollers."
- teach-case11-content5: "Methods: small team session"
- teach-case11-content5-1: "Materials: slides, p5.js web editor, pen and paper to draw pattern, physical pattern weaving tool."
- teach-case11-content5-2: "Workshop Slide #1"
- teach-case11-content5-3: "Workshop Slide #2"
- teach-case11-content5-4: "Workshop Information"
- teach-case11-content5-5: " on WCCW website."
-
- teach-case12-title: "Signing Coders"
- teach-case12-lead-name: "Taeyoon Choi"
- teach-case12-speech: "I'm working on a new series of coding class for Disabled students in South Korea. I'm researching about the pedagogy and translation. I plan to hold workshops in December 2020. The project is supported by the Open Society Foundation Human Rights Initiative and Korea Disability Arts & Culture Center."
- teach-case12-content1: " WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea."
- teach-case12-content1-1: "5 Sessions, each 2~3 hours"
- teach-case12-content2: "Deaf and Hard of Hearing students age 10~50 who live in NYC."
- teach-case12-content3: "Elementary"
- teach-case12-content4: "To help Deaf and Hard of Hearing students learn about computer programming through playful exercises. To make ASL tutorial of basic coding concepts."
- teach-case12-content5: "We used p5.js Web editor and code examples on the website. We also used dice, playing cards and various paper tools to help students learn about coding concepts."
- teach-case12-content5-1: "Syllabus & Material"
- teach-case12-content5-2: "More photos"
+ teach-title2: Teach
+ teach-intro1: >-
+ Every teaching has its own unique goals, messages, conditions, and
+ environments.
+ teach-intro2: >-
+ By documenting and sharing p5 workshops, classes, and materials, we hope to
+ better connect the p5.js learner and educator communities around the world.
+ teach-intro3: Share or recommend
+ teach-intro4: 'your own teaching experiences, too!'
+ teach-heading: p5 Teaching Resources
+ teach-search-filter: Search Filter
+ teach-filter1: 'Diversity & Inclusion : '
+ teach-filter1-label1: Gender
+ teach-filter1-label2: Race & Ethnicity
+ teach-filter1-label3: Language
+ teach-filter1-label4: Neuro-Type
+ teach-filter1-label5: Ability
+ teach-filter1-label6: Class
+ teach-filter1-label7: Religion
+ teach-filter1-label8: (Sub-)Culture
+ teach-filter1-label9: Political Opinion
+ teach-filter1-label10: Age
+ teach-filter1-label11: Skill Level
+ teach-filter1-label12: Occupation
+ teach-filter1-label13: '#noCodeSnobs'
+ teach-filter1-label14: '#newKidLove'
+ teach-filter1-label15: '#unassumeCore'
+ teach-filter1-label16: '#BlackLivesMatter'
+ teach-filter2: 'Venue : '
+ teach-filter2-label1: Africa
+ teach-filter2-label2: Asia
+ teach-filter2-label3: Europe
+ teach-filter2-label4: North America
+ teach-filter2-label5: Oceania
+ teach-filter2-label6: South America
+ teach-filter2-label7: 'Virtual-Online '
+ teach-filter3: 'Year : '
+ teach-filter4: 'Level of Difficulty : '
+ teach-filter4-label1: Elementary
+ teach-filter4-label2: Intermediate
+ teach-filter4-label3: Advanced
+ teach-case-subtitle1: Venue & Date
+ teach-case-subtitle2: Participants
+ teach-case-subtitle3: Level of Difficulty
+ teach-case-subtitle4: Goals
+ teach-case-subtitle5: Method & Materials
+ teach-case1-title: p5.js at Ubuntu Party!
+ teach-case1-lead-name: Basile Pesin
+ teach-case1-content1: '2020 Ubuntu Party, '
+ teach-case1-content1-1: 'Cité des Sciences et de l''Industrie, Paris, France'
+ teach-case1-content2: 'Any age, including children and parents, young and older adults.'
+ teach-case1-content3: Advanced
+ teach-case1-content4: >-
+ To introduce a new public to programming through fun and compelling
+ examples.
+ teach-case1-content5: >-
+ Method: in-person workshop, 1 hour per session, with different participant
+ each times. The students were using (Ubuntu) machines with the p5.js web
+ editor. I was teaching using a video projector as well as a board.
+ teach-case1-content5-1: >-
+ Materials: The exercises I gave where accessible through p5.js web-editor
+ links available in
+ teach-case2-title: >-
+ Making The Thing that Makes the Thing: Exploring Generative Art & Design
+ with p5.js
+ teach-case2-lead-name: Priti Pandurangan & Ajith Ranka
+ teach-case2-content1: 'National Institute of Design, Bangalore'
+ teach-case2-content1-1: '2020 February 8, 2:30-4:00 PM'
+ teach-case2-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case2-content3: 'Priti: Intermediate & Ajith: Advanced'
+ teach-case2-content4: >-
+ To explore generative art & design and recreate some classical works
+ with p5.js.
+ teach-case2-content5: 'Methods: In-person, collaborative, hands-on workshop.'
+ teach-case2-content5-1: ''
+ teach-case2-content5-2: 'Course page '
+ teach-case2-content5-3: 'linking to sketches on the p5 editor, '
+ teach-case2-content5-4: 'interactive reference guide '
+ teach-case2-content5-5: to p5 basics
+ teach-case3-title: CC Fest (Creative Coding Festival)
+ teach-case3-lead-name: Saber
+ teach-case3-speech: 'Love p5.js. It has meant so much to me, my students, and this community.'
+ teach-case3-content1: ' New York, Los Angeles, San Francisco, Virtual-Online '
+ teach-case3-content1-1: ' Twice a year in NYC for four years; once a year in LA for three years; once a year in SF for two years; now virtual'
+ teach-case3-content2: >-
+ Our participants included art/design students & professionals, creative
+ coding enthusiasts. We had close to 50 participants.
+ teach-case3-content3: Intermediate
+ teach-case3-content4: >-
+ To build a teacher and student community around p5 for middle and high
+ school.
+ teach-case3-content5: >-
+ A half-day of workshop led by volunteer teachers. We saw lots of different
+ methods and materials. Most used some sort of slides or documentation, some
+ live coding using an editor, with work time for participant to remix.
+ teach-case3-content5-1: CC Fest Lessons page
+ teach-case3-content5-2: ' for teaching materials'
+ teach-case3-content5-3: More photos
+ teach-case4-title: Introduction to Creative Programming with p5.js
+ teach-case4-lead-name: Aarón Montoya-Moraga
+ teach-case4-speech: 'p5.js is my happy place '
+ teach-case4-content1: ' PlusCode Media Arts Festival, Buenos Aires, Argentina & Virtual-Online '
+ teach-case4-content1-1: ' 2018 November 14, 3 hours'
+ teach-case4-content2: >-
+ I had around 16 students in the workshop, and a team including 3 people from
+ the PlusCode festival, and one person at the venue.
+ teach-case4-content3: 'Elementary, Intermediate, Advanced'
+ teach-case4-content4: >-
+ Introduction to beginners and artists of graphic web programming and open
+ source, using p5.js, in Spanish :)
+ teach-case4-content5: 'I used the material on this '
+ teach-case4-content5-1: GitHub repo
+ teach-case4-content5-2: ', we used the p5.js web editor, we had a three hour long workshop'
+ teach-case4-content5-3: '+CODE electronic art festival 2018, Argentina'
+ teach-case4-content5-4: ', Medium'
+ teach-case5-title: Introduction to Generative Drawing
+ teach-case5-lead-name: Adam Herst
+ teach-case5-speech: >-
+ My greatest source of uncertainty in developing the workshop was whether it
+ was trying to teach art to programmers or to teach programming to artists.
+ teach-case5-content1: Inter/Access
+ teach-case5-content1-1: ' (artist-run centre), Toronto, Ontario, Canada'
+ teach-case5-content1-2: In-person with a self-paced workbook for remote work
+ teach-case5-content1-3: ' 2020 February 12, 7PM-9PM'
+ teach-case5-content2: 15 artists
+ teach-case5-content3: Elementary
+ teach-case5-content4: >-
+ To introduce p5.js to artists with little or no programming experience and
+ to suggest one way an analogue practice can migrate to a digital form.
+ teach-case5-content5: >-
+ A printed workbook with activities that used the p5.js web editor to show
+ how translate an physical drawing into a digital drawing.
+ teach-case5-content5-1: 'Processing Community Day 2019: Generative Drawing at Inter/Access'
+ teach-case5-content5-2: Introduction to Generative Drawing Letter PDF
+ teach-case5-content5-3: Introduction to Generative Drawing Booklet PDF
+ teach-case6-title: 'Open Lecture, Creative Coding: 2020'
+ teach-case6-lead-name: Shunsuke Takawo
+ teach-case6-speech: >-
+ I love p5.js because it's so easy to read and write code in p5.js. Coding in
+ your everyday life!
+ teach-case6-content1: ' Kyoto University of Art and Design, Kyoto, Japan & Virtual-Online '
+ teach-case6-content1-1: ' 2020 March 16-18, 1-7 PM'
+ teach-case6-content2: 'Students of Kyoto University of Art and Design, and anyone.'
+ teach-case6-content3: Elementary
+ teach-case6-content4: Making code as a tool for artistic expression.
+ teach-case6-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case6-content5-1: Syllabus
+ teach-case6-content5-2: Day 1
+ teach-case6-content5-3: Day 2
+ teach-case6-content5-4: Day 3
+ teach-case6-content5-5: ', YouTube'
+ teach-case7-title: Creative Coding for Static Graphics
+ teach-case7-lead-name: Shunsuke Takawo
+ teach-case7-speech: >-
+ Coding in p5.js is a lot of fun. If you haven't started yet, I encourage you
+ to give it a try!
+ teach-case7-content1: ' FabCafe MTRL, Tokyo, Japan'
+ teach-case7-content1-1: ' 2019 September 15, 4-7 PM '
+ teach-case7-content2: Anyone who wants to try coding in p5.js.
+ teach-case7-content3: Intermediate
+ teach-case7-content4: To code from the graphic design's perspective.
+ teach-case7-content5: 'Dropbox Paper, p5.js web editor.'
+ teach-case7-content5-1: Syllabus & Material
+ teach-case8-title: Generative Typography
+ teach-case8-lead-name: Dae In Chung
+ teach-case8-content1: ' Baltimore, Maryland, USA & Virtual-Online '
+ teach-case8-content1-1: ' 2019 January 21 - May 08, every Wednesday, 4-10 PM'
+ teach-case8-content2: 14 undergrads and grad students who had little to no experience in coding.
+ teach-case8-content3: Elementary
+ teach-case8-content4: Experiment with typographic forms and structures through computation.
+ teach-case8-content5: 'Methods: online/offline lectures and critiques.'
+ teach-case8-content5-1: 'Materials: p5js online editor, Github, youtube tutorials.'
+ teach-case8-content5-2: Works of participants
+ teach-case9-title: Machine Learning for the Web
+ teach-case9-lead-name: Yining Shi
+ teach-case9-content1: ' ITP, NYU, 370 Jay St, Brooklyn, NY 11201, USA'
+ teach-case9-content1-1: '2019 March 09 - October 12, every Tuesday, 6:30-9:00 PM'
+ teach-case9-content2: >-
+ Students at Interactive Telecommunications Program, New York University. 16
+ people.
+ teach-case9-content3: 'Elementary, Intermediate'
+ teach-case9-content4: >-
+ The goal of this class is to learn and understand common machine learning
+ techniques and apply them to generate creative outputs in the browser using
+ ml5.js and p5.js.
+ teach-case9-content5: >-
+ This class is a mix of lectures, coding sessions, group discussions, and
+ presentations. I used
+ teach-case9-content5-1: GitHub
+ teach-case9-content5-2: ' to host class syllabus and all the coding materials, Google Slides for lectures and p5.js Web Editor for live coding sessions. Every week, there were one-on-one office hours to talk about any difficulties of coming up with an idea for the homework or any coding changes.'
+ teach-case9-content5-3: 'Methods: online/offline lectures and critiques.'
+ teach-case10-title: Introduction to p5.js and JavaScript
+ teach-case10-lead-name: Nico Reski
+ teach-case10-content1: ' Currently available as self-study at own pace with accompanying slides, linked below.'
+ teach-case10-content3: 'Beginner, Elementary'
+ teach-case10-content4: >-
+ Introduce learners (potentially with no coding experiences at all) to the
+ very basics of p5.js (and JavaScript), in order to encourage creative coding
+ and enable them to pursue own projects in a safe environment.
+ teach-case10-content5: >-
+ p5.js source code (for the introductory project), JavaScript source code
+ (illustrating some basic JavaScript functionalities), accompanying slides in
+ .pdf format, all hosted publicly on GitHub.
+ teach-case10-content5-1: Overview
+ teach-case10-content5-2: ' of the workshop and its contents (including all links to the material hosted on GitHub) on my academic webpage.'
+ teach-case11-title: Digital Weaving & Physical Computing Workshop Series
+ teach-case11-lead-name: Qianqian Ye & Evelyn Masso
+ teach-case11-content1: ' Womens Center for Creative Work (WCCW), Los Angeles, CA, US'
+ teach-case11-content1-1: ' 2019 October 19 - November 02, every Saturday 3-6 PM'
+ teach-case11-content2: '15 women and non-binary artists, designer, makers, programers. '
+ teach-case11-content3: Elementary
+ teach-case11-content4: >-
+ Over the course of three workshops, we will draw and create patterns using
+ p5.js, an open-source graphical library; we will learn and apply
+ computational concepts to transform patterns and finally, we will bring a
+ weaving to life with electronic microcontrollers.
+ teach-case11-content5: 'Methods: small team session'
+ teach-case11-content5-1: >-
+ Materials: slides, p5.js web editor, pen and paper to draw pattern, physical
+ pattern weaving tool.
+ teach-case11-content5-2: 'Workshop Slide #1'
+ teach-case11-content5-3: 'Workshop Slide #2'
+ teach-case11-content5-4: Workshop Information
+ teach-case11-content5-5: ' on WCCW website.'
+ teach-case12-title: Signing Coders
+ teach-case12-lead-name: Taeyoon Choi
+ teach-case12-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case12-content1: ' WRIC, New York City, USA & Seoul Museum of Art, Seoul, South Korea.'
+ teach-case12-content1-1: '5 Sessions, each 2~3 hours'
+ teach-case12-content2: Deaf and Hard of Hearing students age 10~50 who live in NYC.
+ teach-case12-content3: Elementary
+ teach-case12-content4: >-
+ To help Deaf and Hard of Hearing students learn about computer programming
+ through playful exercises. To make ASL tutorial of basic coding concepts.
+ teach-case12-content5: >-
+ We used p5.js Web editor and code examples on the website. We also used
+ dice, playing cards and various paper tools to help students learn about
+ coding concepts.
+ teach-case12-content5-1: Syllabus & Material
+ teach-case12-content5-2: More photos
+ teach-case13-title: Painting with Code
+ teach-case13-lead-name: Andreas Refsgaard
+ teach-case13-speech: >-
+ I'm working on a new series of coding class for Disabled students in South
+ Korea. I'm researching about the pedagogy and translation. I plan to hold
+ workshops in December 2020. The project is supported by the Open Society
+ Foundation Human Rights Initiative and Korea Disability Arts & Culture
+ Center.
+ teach-case13-content1: 'Copenhagen, Denmark'
+ teach-case13-content1-1: 2020 February 22
+ teach-case13-content2: A wide range of people.
+ teach-case13-content3: Intermediate
+ teach-case13-content4: >-
+ Get creatives, designers, artists and other people who don't typically use
+ code introduced to p5.js.
+ teach-case13-content5: 'Website, p5.js editor.'
+ teach-case13-content5-1: Material
+ teach-case14-title: Smarter Home
+ teach-case14-lead-name: Lauren McCarthy
+ teach-case14-speech: >-
+ The Smarter Home / 더 똑똑한 집 American Arts Incubator Workshop reimagines smart
+ homes of the future.
+ teach-case14-content1: ' Gwangju Cultural Foundation(GJCF), Gwangju, South Korea'
+ teach-case14-content1-1: 2020 April 19 - May 11
+ teach-case14-content1-2: ZERO1 American Art Incubator(AAI)
+ teach-case14-content2: 16 people (resident of Gwangju or surrounding areas)
+ teach-case14-content3: Elementary & Intermediate
+ teach-case14-content4: >-
+ To reimagine smart homes of the future, with such technologies as p5.js and
+ ml5.js. Spending a lot of time talking about the increasing role technology
+ is playing at home and in Korean society, the workshop aimed to offer a
+ vision of a smarter home driven by the participants' critical optimism for
+ the future.
+ teach-case14-content5: 'p5.js, p5 web editor, ml5.js, and installations. '
+ teach-case14-content5-1: >-
+ 1) We set out to prototype the concept of a “smarter home”, trying to bring
+ technology into personal space on our own terms.
+ teach-case14-content5-2: >-
+ 2) Breaking into four teams, each selected an issue to address through a
+ room they would create within our larger home structure.
+ teach-case14-content5-3: >-
+ 3) We incorporated machine learning, audio processing, and computer vision
+ techniques to track and respond to the presence of people.
+ teach-case14-content5-4: >-
+ 4) Together, these works make one installation, comprised of four
+ interconnected smart rooms that each provoke discussion.
+ teach-case14-content5-5: More pictures
+ teach-case15-title: Introduction to p5js
+ teach-case15-lead-name: Bérenger Recoules (a.k.a b2renger)
+ teach-case15-content1: 'L''École de Design Nantes Atlantique, France'
+ teach-case15-content1-1: Since 2018 and ongoing
+ teach-case15-content2: Students from l'école de design Nantes Atlantique'
+ teach-case15-content3: Elementary
+ teach-case15-content4: 'To get to know p5.js and its functionalities (DOM, audio, WebGL, etc.) '
+ teach-case15-content5: GitHub Readme File
+ teach-case15-content5-1: ' : a text tutorial in French'
+ teach-case16-title: "50+ Coding Club : My First Code Art with Handy(\U0001F590) and Family"
+ teach-case16-lead-name: Inhwa Yeom
+ teach-case16-speech: >-
+ This workshop was conducted in line with 'p5 for 50+' project, with supports
+ from 2020 Processing Foundation fellowship program and Asia Culture Center
+ (ACC).
+ teach-case16-content1: ' Asia Culture Center(ACC), Gwangju. Virtual & Online'
+ teach-case16-content1-1: >-
+ (In-Person) 2020 November 20 - 28, every Friday and Saturday;
+ (Virtual-Online) Anytime from 2020 December on via YouTube videos
+ teach-case16-content2: '8 people, composed of 6 older adults and their children'
+ teach-case16-content2-1: 1) Those who define themselves as older adults (age around 50 and older)
+ teach-case16-content2-2: '2) People from any age groups who accompany a person of 1) '
+ teach-case16-content3: Elementary
+ teach-case16-content4: >-
+ Addressing the digital literacy and rights of age 50+ population in a
+ non-English-speaking country, this workshop aimed to lower their physical,
+ lingual, and emotional barriers to learning coding with smartphone-based
+ p5.js editor.
+ teach-case16-content5: p5for50+ web app
+ teach-case16-content5-1: >-
+ a smartphone-based web app, having p5.js web editor embedded in it. Created
+ with the editor, the participants' p5 sketches were printed out and framed
+ on-site, and distributed as their materialized outcomes.
+ teach-case16-content5-2: Curriculum
+ teach-case16-content5-3: YouTube
+ teach-case16-content5-4: More pictures
+ teach-case17-title: Programming Applied to Visual and Interactive Art
+ teach-case17-lead-name: Sebastián Zavatarelli
+ teach-case17-speech: >-
+ The course is part of the extension courses on the trans-departmental area
+ of multimedia arts of National University of the Arts in Argentina.
+ teach-case17-content1: ' Buenos Aires, Argentina. Virtual & Online'
+ teach-case17-content1-1: '2020 September 15 - October 14 every Wednesday 6:30-9:00 PM'
+ teach-case17-content2: Around 10 people. Mostly women.
+ teach-case17-content3: Elementary & Intermediate
+ teach-case17-content4: >-
+ The course is intended for artists who want to start using current
+ technological tools for the development of their works. It can also be used
+ by those who want to get started in computer programming through a simple,
+ visual, accessible and fun programming environment.
+ teach-case17-content5: >-
+ p5.js web editor. Online through Zoom platform and material uploaded in
+ Moodle.
+ teach-case17-content5-1: More pictures
diff --git a/src/templates/layouts/default.hbs b/src/templates/layouts/default.hbs
index e6e0cf957c..d3c3fe83d3 100644
--- a/src/templates/layouts/default.hbs
+++ b/src/templates/layouts/default.hbs
@@ -3,11 +3,12 @@
-
+
{{title}} | p5.js
+
diff --git a/src/templates/pages/books/index.hbs b/src/templates/pages/books/index.hbs
index 39cbc9463d..19863c7cbf 100644
--- a/src/templates/pages/books/index.hbs
+++ b/src/templates/pages/books/index.hbs
@@ -136,6 +136,31 @@ slug: books/
+
+
+
+
+
+
+
+
+
+
diff --git a/src/templates/pages/community/index.hbs b/src/templates/pages/community/index.hbs
index 0875cef393..dc52d1d953 100644
--- a/src/templates/pages/community/index.hbs
+++ b/src/templates/pages/community/index.hbs
@@ -59,7 +59,7 @@ slug: community/
{{#i18n "teach-title"}}{{/i18n}} {{#i18n "teach1"}}{{/i18n}}
- {{#i18n "create-title"}}{{/i18n}} {{#i18n "create1"}}{{/i18n}}{{#i18n "create2"}}{{/i18n}} {{#i18n "create3"}}{{/i18n}}
+ {{#i18n "create-title"}}{{/i18n}} {{#i18n "create1"}}{{/i18n}}{{#i18n "create2"}}{{/i18n}} {{#i18n "create3"}}{{/i18n}}
{{#i18n "donate-title"}}{{/i18n}} {{#i18n "donate1"}}{{/i18n}}{{#i18n "donate2"}}{{/i18n}} {{#i18n "donate3"}}{{/i18n}}
diff --git a/src/templates/pages/download/index.hbs b/src/templates/pages/download/index.hbs
index f1c2c29357..d9ac8e4470 100644
--- a/src/templates/pages/download/index.hbs
+++ b/src/templates/pages/download/index.hbs
@@ -36,7 +36,7 @@ slug: download/
{{#i18n "environment-title"}}{{/i18n}}
@@ -166,6 +188,8 @@ function draw() {
{{#i18n "environment11"}}{{/i18n}} {{#i18n "environment12"}}{{/i18n}}
+ {{#i18n "environment14"}}{{/i18n}} {{#i18n "environment15"}}{{/i18n}}
+ {{#i18n "environment16"}}{{/i18n}}
{{#i18n "environment13"}}{{/i18n}}
@@ -179,9 +203,7 @@ function draw() {
$(this).html(html);
});
});
-
-
{{> footer}}
@@ -189,5 +211,5 @@ function draw() {
{{> asterisk}}
-
+
diff --git a/src/templates/pages/index.hbs b/src/templates/pages/index.hbs
index 6fd56a6d2f..a1969787dc 100644
--- a/src/templates/pages/index.hbs
+++ b/src/templates/pages/index.hbs
@@ -17,6 +17,7 @@ slug: /
{{#i18n "p1xh1"}}{{/i18n}}
{{#i18n "p1x1"}}{{/i18n}}
{{#i18n "p1x2"}}{{/i18n}}
+ Check out the new p5.js 2020 showcase!
{{#i18n "start-creating"}}{{/i18n}}
{{#i18n "p2xh2"}}{{/i18n}}
@@ -43,8 +44,8 @@ slug: /
target="_blank">{{#i18n "p4xp6"}}{{/i18n}}
- {{#i18n "sketch_credits"}}{{/i18n}}
- {{#i18n "sketch_info"}}{{/i18n}}
+ {{!-- {{#i18n "sketch_credits"}}{{/i18n}}
+ {{#i18n "sketch_info"}}{{/i18n}}
--}}
{{> footer}}
@@ -59,5 +60,5 @@ slug: /
*
-
+ {{!-- --}}
\ No newline at end of file
diff --git a/src/templates/pages/learn/README.md b/src/templates/pages/learn/README.md
new file mode 100644
index 0000000000..888f3c9cc1
--- /dev/null
+++ b/src/templates/pages/learn/README.md
@@ -0,0 +1,15 @@
+# Learn page
+
+* The index.hbs file contained here is auto-generated. To make changes, do not edit this file directly.
+* To add a tutorial:
+ * First add the tutorial itself as an hbs file in this folder. Name the file something that makes sense (for example: "how-to-blah.hbs"). Use hyphens to replace spaces.
+ * If there are any assets (images, etc) for the tutorial, place them in `src/assets/learn/FILENAME/`. See the other tutorial hbs files to see how to link to these assets.
+ * Go to `src/data/learn/` and add an entry into the `learn.json` file. Entries are structured in arrays that represent the different sections of the learn page. The name of the entry should correspond to the filename. (example: "how-to-blah")
+ * Next, you will open each of the yml files in `src/data` and add a two entries under the "learn:" heading. The order should correspond to the order in the `learn.json` file.
+ * The first entry should be that name you used in the previous step + "title" (example: "how-to-blah-title"). This is where you write the title you want to show up on the page for that tutorial.
+ * The second entry should be just the name you used in the previous step (example: "how-to-blah"). This is where you write the description you want to show up on the page for that tutorial.
+ * Repeat these steps for each of the yml files in `src/data`. If you don't know the language translation, you can add placeholders in English.
+ * Run `npm run watch` to build the site, and you should see the new tutorial added to p5js.org/learn.
+ * (Optional) Post on IG and Twitter that the tutorial has been added, tagging the creator if you know it.
+* To make changes to the learn page template, you can edit `learn.ejs`.
+* Note: Sometimes tutorials are hosted externally and this is fine. Follow the same steps as above, but skip the step of placing an hbs file in the folder. When you add the entry into `learn.json`, you place the link to the external URL instead of the filename.
diff --git a/src/templates/pages/learn/index.hbs b/src/templates/pages/learn/index.hbs
deleted file mode 100644
index c7cf7d45cd..0000000000
--- a/src/templates/pages/learn/index.hbs
+++ /dev/null
@@ -1,362 +0,0 @@
----
-title: learn
-slug: learn/
----
-
-
-
- {{> sidebar}}
-
-
-
-
- {{#i18n "learn-title"}}{{/i18n}}
-
- {{#i18n "learn1"}}{{/i18n}}
- {{#i18n "learn2"}}{{/i18n}}
- {{#i18n "learn3"}}{{/i18n}}
-
-
-
- {{#i18n "introduction-to-p5js-title"}}{{/i18n}}
-
-
-
-
-
-
{{#i18n "getting-started"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "p5js-overview"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "p5js-processing"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "using-local-server"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "p5js-wiki"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "p5-screen-reader"}}{{/i18n}}
-
-
-
-
-
-
-
- {{#i18n "connecting-p5js-title"}}{{/i18n}}
-
-
-
-
-
-
{{#i18n "nodejs-and-socketio"}}{{/i18n}}
-
-
-
-
-
-
-
- {{#i18n "programming-topics-title"}}{{/i18n}}
-
-
-
-
-
-
{{#i18n "beyond-the-canvas"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "3d-webgl"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "color"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "coordinate-system-and-shapes"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "curves"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "interactivity"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "program-flow"}}{{/i18n}}
-
-
-
-
-
-
-
- {{#i18n "becoming-a-better-programmer-title"}}{{/i18n}}
-
-
-
-
-
-
{{#i18n "debugging"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "optimizing"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "test-driven-development"}}{{/i18n}}
-
-
-
-
-
-
-
- {{#i18n "contributing-to-the-community-title"}}{{/i18n}}
-
-
-
-
-
-
{{#i18n "development"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "looking-inside"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
-
-
{{#i18n "writing-tutorial"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
{{#i18n "creating-libraries"}}{{/i18n}}
-
-
-
-
-
-
-
-
-
- {{> footer}}
-
-
-
- {{> asterisk}}
-
-
diff --git a/src/templates/pages/libraries/README.md b/src/templates/pages/libraries/README.md
new file mode 100644
index 0000000000..fc9454fc51
--- /dev/null
+++ b/src/templates/pages/libraries/README.md
@@ -0,0 +1,12 @@
+# Libraries page
+
+* The index.hbs file contained here is auto-generated. To make changes, do not edit this file directly.
+* Contributed libraries are submitted via [this form](https://docs.google.com/forms/d/e/1FAIpQLSdWWb95cfvosaIFI7msA7XC5zOEVsNruaA5klN1jH95ESJVcw/viewform), and here are the [form responses](https://drive.google.com/drive/u/0/folders/1DNsXp3s35NX_T4Unq4kRvH3i2TSoh44w).
+* To add a library:
+ * Go to `src/data/libraries/` and add an entry into the `libraries.json` file. Entries are listed alphabetically.
+ * Open each of the yml files in `src/data` and add an entry for the library name using the description text provided in the form response. The name of that entry should be the same as the "name" field in the `libraries.json` entry you just made. If you are missing the text for a particular translation, add an entry in English as a placeholder.
+ * Download the image linked under "400x118 grayscale preview image" and place it in `src/assets/img/libraries/`. It should be named "LIBRARYNAME.jpg", for example, "p5.xr.jpg" or "mappa.jpg".
+ * Run `npm run watch` to build the site, and you should see the new library added to p5js.org/libraries.
+ * Gray out the name of the library in the [form responses](https://drive.google.com/drive/u/0/folders/1DNsXp3s35NX_T4Unq4kRvH3i2TSoh44w) sheet, so we know it's been added.
+ * (Optional) Post on IG and Twitter that the library has been added, tagging the creator if they provided their username.
+* To make changes to the libraries page template, you can edit `libraries.ejs`.
\ No newline at end of file
diff --git a/src/templates/pages/reference/assets/all.css b/src/templates/pages/reference/assets/all.css
deleted file mode 100644
index 2f86072615..0000000000
--- a/src/templates/pages/reference/assets/all.css
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! normalize.css v1.1.0 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}button,html,input,select,textarea{font-family:sans-serif}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}h2{margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:courier new,monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:after,q:before{content:"";content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ol,nav ul{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure,form{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}.tagline{display:none}#home-page #home{pointer-events:none}#home-page #home a{pointer-events:all!important}#home .button_box a{color:#ed225d!important}#home .button_box a:hover{color:#fff!important}#lockup>a{position:relative;display:block;width:200px;height:90px}#logo_image{position:absolute;top:0}#menu,#menu.top_menu{list-style:none;font-family:Montserrat,sans-serif;width:100%;margin:0 0 1em;padding:0;height:100%;font-size:1.3em}#menu.top_menu li{display:inline}#home-sketch{position:absolute;top:0;left:0;z-index:-2}#home-sketch-frame{position:fixed;width:100%;height:100%;left:0;top:0;z-index:-2;overflow:hidden;pointer-events:all;border:0}#credits{position:fixed;bottom:0;left:0;z-index:2;padding:1em;font-size:.7em}.focus{border:1px solid #ed225d}.focus,.focus_blue{padding:.4em;margin:4em 1.75em 0 0;padding:.5em 1em 0;color:#333!important}.focus_blue{border:1px solid #2d7bb6}.button_box{border:1px solid #ed225d;padding:.4em .6em;margin:.5em 0;font-family:Montserrat,sans-serif;display:inline-block}.button_box,.button_box a{color:#333!important}.button_box a:hover{color:#fff!important}.download_box{border:1px solid #ed225d;padding:.4em;margin:0 1.75em 0 0;width:18.65em;color:#333!important;height:7.45em;position:relative}.button_box:hover,.download_box:hover{border:1px solid #ed225d;background:#ed225d;color:#fff!important}.download_box.half_box{width:10.83em;margin-right:1.75em;float:left}.download_box.half_box.last_box{margin-right:0}.download_box .download_name{font-size:1em;margin:0;padding-bottom:.3em;border-bottom:.09em dashed;border-bottom-color:#ed225d;line-height:1.2;font-family:Montserrat,sans-serif;display:block}.download_box:hover .download_name{-webkit-text-stroke-width:0;border-bottom-color:#fff}.download_box p{font-size:.65em;margin:0;position:absolute;bottom:1em}.download_box svg{height:.65em;width:.65em;position:absolute;bottom:3.5em}.download_box:hover svg{fill:#fff}.download_box h4+p{display:block}#download-page .link_group{width:100%;margin-bottom:3em}.download_box{margin-top:1em}.support div.download_box{margin-top:1em;margin-bottom:1em}#download-page .support p{font-size:.8em;position:static;margin-top:.3em}#slideshow{margin:1em 0}#slideshow p{font-size:.8em;color:#ababab;line-height:1.2em;margin-top:.5em}.extra{color:#fff;position:absolute;bottom:.65em;right:.9em;font-weight:700;-ms-transform:rotate(-12deg);-webkit-transform:rotate(-12deg);-o-transform:rotate(-12deg);transform:rotate(-12deg);font-size:.8em}.tutorial-title{border-bottom:4px dotted #ed225d;padding-bottom:10px;margin-bottom:10px}#examples-page .column{margin-bottom:2em}#reference-page main h1{float:left}.reference-group h2{font-size:1.5em}.reference-group h3{font-size:1em;font-family:Montserrat,sans-serif;margin-top:.5em}#reference-page ul{margin-top:.5em}div.reference-group{display:inline-block}div.reference-subgroups{margin:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}div.reference-subgroup{width:11em;margin-bottom:1em}#reference-page .params table p{display:inline;font-size:inherit}#reference-page .param-optional{color:#afafaf}#item h2{margin:.777em 0 0;font-size:1.444em;font-weight:inherit;font-family:inconsolatamedium,consolas,monospace;color:#00a1d3!important}#item h3{font-size:1.33em;margin:1em 0 0}.description{clear:both;display:block;width:100%}.item-wrapper,.list-wrapper{float:left;outline:none!important}.paramname{display:inline-block;width:8em;font-size:1.2em}.paramtype p{display:inline;font-size:1em}.paramtype{display:inline-block;font-size:1.2em;width:20em;vertical-align:top}.example-content .edit_space,.example-content pre{position:absolute!important;top:.5em!important;left:120px!important;padding-top:0!important;border:none!important}pre.norender{left:0!important;margin-left:0!important}.example-content pre{margin-top:0!important;width:30.5em!important}.example-content .edit_space{margin:-.5em 0 0 -.5em!important}.example_container .edit_space{position:absolute!important;top:0;left:0}.example_container pre{top:0;left:0;width:100%}.example div{position:relative}.example_container button{position:absolute;top:.25em}.edit_space button{font-family:Montserrat,sans-serif;font-size:1em;color:#ccc;border:1px solid hsla(0,0%,78%,.15);background:transparent;outline:none}.example_container.editing button,.example_container button:hover{color:#2d7bb6;border-color:rgba(45,123,182,.25)}.edit_button{left:21.42em}.reset_button{left:24em}.copy_button{left:27.33em}.display_button{margin-bottom:2em;font-family:Montserrat,sans-serif;font-size:1em;color:#2d7bb6;border:1px solid rgba(45,123,182,.25);background:transparent;outline:none}.example_container{width:36em;border-top:.09em dashed;border-top-color:#333;padding-top:.5em;margin-top:1em}form{pointer-events:all}#search_button{background:url(../img/search.png) 100% no-repeat}#search input[type=search],#search input[type=text]{border:1px solid hsla(0,0%,78%,.5);font-family:Montserrat,sans-serif;font-size:2.25em;width:9.75em}#search .twitter-typeahead .tt-hint,#search ::-webkit-input-placeholder{color:#ccc}:-moz-placeholder,:-ms-input-placeholder,::-moz-placeholder{color:#ccc}#search input[type=text]:focus{color:#2d7bb6;outline-color:#2d7bb6;outline-width:1px;outline-style:solid}#search .twitter-typeahead .tt-dropdown-menu{background-color:#fff}#search .twitter-typeahead .tt-suggestion.tt-cursor{color:#333;background-color:#eee}#search .twitter-typeahead .tt-suggestion p{margin:0}#search .twitter-typeahead .tt-suggestion p .small{font-size:12px;color:#666}#search{float:right}#search .twitter-typeahead .tt-dropdown-menu{border:1px solid rgba(0,0,0,.2);padding:.5em;max-height:200px;overflow-y:auto;font-size:1em;line-height:1.4em}#search .twitter-typeahead .tt-suggestion{padding:3px 20px;line-height:24px;cursor:pointer}#search .twitter-typeahead .empty-message{padding:8px 20px 1px;font-size:14px;line-height:24px}#search_button{float:right}a.code.core{color:#333}a.code.addon{color:#704f21}button,html,input,select{color:#222}textarea{line-height:1.45em;padding:.5em 1em;border:none}body{font-size:1em;line-height:1.4}::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}img{vertical-align:middle}img.med_left{width:300px;float:left}img.med_right{width:300px;float:right}img.small_left{width:200px;float:left}img.smaller_left{width:140px;float:left}img.small_right{width:200px;float:right}img.smaller_right{width:140px;float:right}img.small_center{width:200px;margin-left:250px}img.small{width:160px}img.med{width:400px}img.med_center{width:400px;margin-left:150px}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.contribute-form{font-family:Montserrat,sans-serif}.contribute-form input,.contribute-form textarea,textarea{border:1px solid #ccc;border-radius:4px;padding:5px;font-size:14px}.contribute-form textarea{width:350px}.contribute-form #form-help{font-size:small;color:#ababab}.contribute-form #required-asterisk{color:#ec245e}.contribute-form #input-title{font-size:medium;margin-top:15px}.contribute-form #hide-message{display:none}.contribute-button{color:#333;background-color:#fff;border-color:#ccc;margin-bottom:0;font-size:medium;border:1px solid transparent}.contribution-info li{margin-bottom:2px;margin-left:20px;font-size:medium}.contribution-info ul{margin-bottom:15px}#contribute-item{font-size:.75em;text-align:left;display:inline-block;width:320px;height:250px;float:left;border:1px solid #ed225d;margin:0 25px 25px 0;position:relative}.contribute-item-container{position:absolute;z-index:20;margin:0;padding:10px}.container{height:100px;position:relative;margin-top:1.5em}#infoi,#navi{width:100%;height:100%;position:absolute;top:0;left:0}#infoi{z-index:10}h3.contribute-title{font-size:1.33em;margin:0 0 27px;padding-bottom:.3em;border-bottom:.09em dashed;border-bottom-color:#ed225d}.label{position:relative}.label h3{color:#fff;position:absolute;top:0;margin:1em}.label:hover h3{color:#ed225d}h3{font-size:1.33em;margin:1em 0 0}#exampleDisplay,#exampleEditor,#exampleFrame{width:36em;border:none}#exampleDisplay{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column}#popupExampleFrame{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1000;border:none}#exampleDisplay button{color:#2d7bb6;border-color:rgba(45,123,182,.25);float:right;margin:.5em 0 0 .5em;background:hsla(0,0%,100%,.7);position:absolute;left:0;z-index:2}#exampleDisplay .edit_button{left:25.42em;top:-2.5em}#exampleDisplay .reset_button{left:28em;top:-2.5em}#exampleDisplay .copy_button{left:31.33em;top:-2.5em}#exampleDisplay button:hover{background:#fff}#exampleDisplay .edit_space{position:relative;-webkit-box-ordinal-group:4;-webkit-order:3;-ms-flex-order:3;order:3}#exampleFrame{height:22em;-webkit-box-ordinal-group:3;-webkit-order:2;-ms-flex-order:2;order:2}#exampleEditor{height:500em;width:710px;overflow:hidden;margin-top:.5em;color:#222;font-family:inconsolatamedium,Consolas,Monaco,Andale Mono,monospace;font-size:1em!important;background-color:#fff;line-height:1em;-webkit-box-ordinal-group:5;-webkit-order:4;-ms-flex-order:4;order:4}.ace_info{background-color:#d7e5f5!important}.ace_warning{background-color:gold!important;color:#fff!important}.ace_error{background-color:tomato!important;color:#fff!important}.ace_numeric,.ace_tag{color:#dc3787!important}.ace_attribute-name,.ace_class,.ace_type{color:#704f21!important}.ace_function,.ace_keyword,.ace_support{color:#00a1d3!important}.ace_comment{color:#a0a0a0!important}.ace_string{color:#a67f59!important}.ace_operator{color:#333!important}.ace_regexp{color:#e90!important}.ace-gutter,.ace-gutter-layer{color:#333!important}.ace_folding-enabled{width:10px!important;color:#333!important}.ace_gutter-cell{background-image:none!important;padding-left:10px!important;overflow:hidden!important;background-color:#afafaf!important}.attribution{background-color:#eee;font-size:15px;padding:10px;margin:30px 0}.gallery-item{font-size:.75em;text-align:center;display:inline-block;margin:10px}.gallery-item a:hover{border:none;opacity:.8}.gallery-item p{margin:5px}img.gallery-img{width:200px;height:200px}.gallery-source{color:#afafaf;font-size:1em;margin:0!important}.chromeframe{margin:.2em 0;background:#ccc;color:#000;padding:.2em 0}@font-face{font-family:inconsolatamedium;src:url(fonts/inconsolata.eot);src:url(fonts/inconsolata.eot?#iefix) format("embedded-opentype"),url(fonts/inconsolata.woff) format("woff"),url(fonts/inconsolata.ttf) format("truetype"),url(fonts/inconsolata.svg#inconsolatamedium) format("svg");font-weight:400;font-style:normal}*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}html{font-size:1.25em}body{margin:0;background-color:#fff;font-family:Times;font-weight:400;line-height:1.45;color:#333}p{font-size:1.2em;margin:.5em 0}.freeze{overflow:hidden}#menu li a:focus:active,#menu li a:focus:hover,#menu li a:link,#menu li a:visited{color:#ed225d;background:transparent;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}a:link,a:visited{color:#2d7bb6;text-decoration:none}#reference a:hover,a:active,a:hover{color:#ed225d;text-decoration:none;padding-bottom:.11em;border-bottom:.11em dashed;border-bottom-color:#ed225d;-webkit-transition:border-bottom 30ms linear;-o-transition:border-bottom 30ms linear;transition:border-bottom 30ms linear}a.nounderline:hover{border:none}.here{color:#ed225d!important;text-decoration:none;padding-bottom:.1em;border-bottom:transparent;border-bottom-color:#ed225d}.highlight{background-color:rgba(237,34,93,.15)}.container>div:first-of-type{margin-top:2em}h1,h2,h3,h4,h5{margin:1.414em 0 .5em;font-weight:inherit;line-height:1.2;font-family:Montserrat,sans-serif}h1{font-size:2.25em;margin:0}h2{font-size:1.5em;margin:1em 0 0}.code{font-family:inconsolatamedium,consolas,monospace}#backlink{margin:1.2em .444em 0 0;font-family:Montserrat,sans-serif;float:right}#backlink a{color:#afafaf}#backlink a:hover{color:#ed225d;border-bottom:none}#promo,#promo:visited{width:100%;background:#98fb98;padding:0;margin:0;text-align:center;padding:.4em 0;background:#74ffb7;background:-webkit-radial-gradient(circle,#74ffb7 0,#8afff2 100%);background:-o-radial-gradient(circle,#74ffb7 0,#8afff2 100%);background:radial-gradient(circle,#74ffb7 0,#8afff2 100%);font-family:Montserrat,sans-serif;color:#ed225d!important}#promo:hover{background:#ed225d;color:#fff!important}#promo-link{margin:0!important;padding:0}#family a:link,#family a:visited{margin:.4em}#family a:active,#family a:hover{margin:.4em;border:none}#family{position:absolute;z-index:9999;top:0;left:0;width:100%;border-bottom:1px solid;overflow:none;margin:0;border-bottom-color:rgba(51,51,51,.5);-webkit-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333;background-color:hsla(0,0%,100%,.85)}#processing-sites{margin:.375em 0}#processing-sites li{list-style:none;display:inline-block;margin:0}#processing-sites li:first-child{margin-left:2em}#processing-sites li:last-child{float:right;margin-right:2em}#family form{float:right;padding:.375em .75em;margin-right:.25em}#family form input[type=text]{visibility:hidden;width:0;margin:0;color:#333;border:1px solid #3796d1;font-family:Roboto!important;font-weight:400;font-size:1em;-webkit-transition:width .1s;-o-transition:width .1s;transition:width .1s;outline:none}#family form.form__open input[type=text]{visibility:visible;width:9.75em}#family form input[type=submit]{background:url(../img/search.png) 50% no-repeat;border:none;outline:none}.code-snippet{margin:0 0 0 1em;width:90%;clear:both}.column-span{margin:0 0 0 1em;padding:0;float:left}.method_description p{margin-top:0}main{padding:0}.spacer{clear:both}ul{list-style:none}li,ul{margin:0;padding:0}ul.list_view{margin:.5em 0 0 1em;padding:0;list-style:disc;list-style-position:outside;font-size:1.2em}ul.inside{margin:0 0 0 2em;padding:0;list-style:disc;list-style-position:inside}.image-row img{width:48%;height:14.3%}.image-row img+img{float:right;margin-right:0;margin-bottom:.25em}img,main div img{margin:.5em .5em 0 0;width:100%}p+img{margin-top:0}.video{width:100%}#lockup{position:absolute;top:-5.75em;left:1.25em;height:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#lockup object{margin:0;padding:0;border:none}#lockup a:focus{outline:0}.logo{margin:0;padding:0;border:none;margin-bottom:.4em;height:4.5em;width:9.75em}#lockup p{color:#ed225d;font-size:.7em;font-family:Montserrat,sans-serif;margin:.5em 0 0 8.5em}#lockup a:link{border:transparent;height:4.5em;width:9.75em}.caption{margin-bottom:2.5em}.caption p,.caption span{text-align:right;font-size:.7em;font-family:Montserrat,sans-serif;padding-top:.25em}footer{clear:both;border-top:.1em dashed;border-top-color:#ed225d;margin-top:2em}.videoWrapper{position:relative;padding-bottom:56.25%;height:0;margin-top:.5em}.videoWrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}.ir{background-color:transparent;border:0;overflow:hidden;*text-indent:-9999px}.ir:before{content:"";display:block;width:0;height:150%}.hidden{display:none!important;visibility:hidden}.sr-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}.clearfix{*zoom:1}#notMobile-message{display:none;-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}#asterisk-design-element,#isMobile-displayButton,.separator-design-element{display:none}.pointerevents #asterisk-design-element,.pointerevents .separator-design-element{pointer-events:none;display:inline-block}@media (min-width:769px){.container{width:49em!important;margin:11.5em auto}main{width:36em;padding:0!important}footer{width:48em}}@media (min-width:720px){.container{margin:11.5em auto;width:100%;padding:.8em 0 0;height:auto;min-height:100%;background-color:rgba(51,51,51,0)}#home-page{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:row;-ms-flex-wrap:row;flex-wrap:row}main{padding:0 1em 0 0}#family,.small,footer,small{font-size:.7em}footer{clear:both}#i18n-btn{position:absolute;top:4em;right:1em}#i18n-btn a,#menu{font-family:Montserrat,sans-serif}#menu{list-style:none;margin:0 .75em 0 -1.85em;width:7.3em;height:100%;border-top:transparent;border-bottom:transparent;padding:0;font-size:.83em;z-index:100;position:relative;top:0}#menu li{float:none;margin:0 0 1em;text-align:right}#menu li:nth-child(11){margin-top:3em;padding-top:.5em}.left-column{width:48%;float:left}.right-column{width:48%;float:right;margin-right:0;margin-bottom:.25em}.narrow-left-column{width:32%;float:left}.wide-right-column{width:64%;float:right;margin-right:0;margin-bottom:.25em}.book{font-size:.7em}.column_0,.column_1,.column_2{float:left;width:11.333em}.column_0,.column_1{margin-right:1em}#collection-list-nav{width:100%;clear:both;border-bottom:1px dashed rgba(0,0,0,.2)}#collection-list-categories{font-family:Montserrat,sans-serif;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin:1em 0 1.5em}#collection-list-categories ul{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}#collection-list{margin:0}.group-name.first{margin-top:0!important}.column.group-name{margin-bottom:1em}#library-page .group-name:hover{color:#ed225d}#library-page .group-name{margin:2em 0 .5em}#library-page .column{margin-top:1em}#list{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:1em}}@media (max-width:719px){.tagline{display:none!important}#family{display:none}#i18n-btn{position:absolute;top:.5em;right:.7em}#search{float:left;margin-bottom:1em}#search,#search input[type=text]{width:100%}#lockup{position:absolute;top:2em;left:1em}.column-span{margin:0 1em;padding:0;float:left}#menu,#menu.top_menu{margin:6em 0 .5em;font-size:1.3em;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}#menu li{display:inline}#contribute-item:first-child{margin-left:0}.download_box{width:96%}.download_box.half_box{width:46%;margin-right:4%;float:left}#etc_list{font-size:1.2em;margin-top:1em}#asterisk-design-element,.separator-design-element{display:none!important;pointer-events:none}pre[class*=language-]{padding:.5em;width:14em}code{word-wrap:break-word;word-break:break-all}#credits{position:relative!important;z-index:2;margin-top:-7em;padding:0 2em 3em 1em;font-size:.5em;float:right;width:100%;text-align:right}#credits,#home-sketch-frame{display:none}#exampleDisplay,#exampleEditor,#exampleFrame{width:100%}#exampleDisplay .edit_button{left:-.58em}#exampleDisplay .reset_button{left:3em}#exampleDisplay .copy_button{left:6.44em}#exampleEditor{margin-top:3em;width:100%}.small,footer,small{font-size:.5em}}@media (max-width:400px){#i18n{margin-top:.75em!important}body{margin-top:-.75em!important}}iframe{border:none}.cnv_div{display:inline-block}#i18n-buttons{margin:0}#i18n-buttons li{list-style:none;display:inline-block;margin-left:.5em}#i18n-btn a{border:none!important;outline:none!important;background:none!important;font-size:.7em;color:#ababab;cursor:pointer!important;z-index:5}#i18n-btn a:hover{color:#ed225d}#i18n-btn a.disabled{color:#ed225d!important;cursor:default!important}#asterisk-design-element{position:fixed;z-index:-1!important;opacity:.6;pointer-events:none}.separator-design-element{width:.33em;height:.33em;margin:0 .09em .18em;display:inline-block;overflow:hidden;text-indent:-100%;background:transparent url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgdmlld0JveD0iMCAwIDI4IDI4Ij48cGF0aCBkPSJNMTYuOSAxMC4zbDguNS0yLjYgMS43IDUuMiAtOC41IDIuOSA1LjMgNy41IC00LjQgMy4yIC01LjYtNy4zTDguNSAyNi4zbC00LjMtMy4zIDUuMy03LjJMMC45IDEyLjZsMS43LTUuMiA4LjYgMi44VjEuNGg1LjhWMTAuM3oiIHN0eWxlPSJmaWxsOiNFRDIyNUQ7c3Ryb2tlOiNFRDIyNUQiLz48L3N2Zz4=");-webkit-background-size:.33em .33em;background-size:.33em}#home-page #asterisk-design-element{bottom:-8%;right:20%;height:12em;width:12em;opacity:1}#examples-page #asterisk-design-element,#learn-page #asterisk-design-element,#other-content-types-page #asterisk-design-element{bottom:-14%;left:-20%;height:25em;width:25em;-webkit-transform:rotate(-1deg);-ms-transform:rotate(-1deg);-o-transform:rotate(-1deg);transform:rotate(-1deg)}#books-page #asterisk-design-element,#libraries-page #asterisk-design-element{bottom:-19%;right:-16%;height:28em;width:28em;-webkit-transform:rotate(2deg);-ms-transform:rotate(2deg);-o-transform:rotate(2deg);transform:rotate(2deg)}#community-page #asterisk-design-element,#get-started-page #asterisk-design-element{top:-30%;right:-40%;height:44em;width:44em;-webkit-transform:rotate(9deg);-ms-transform:rotate(9deg);-o-transform:rotate(9deg);transform:rotate(9deg)}#download-page #asterisk-design-element,#reference-page #asterisk-design-element{top:7%;left:1%;height:10em;width:10em;-webkit-transform:rotate(-21deg);-ms-transform:rotate(-21deg);-o-transform:rotate(-21deg);transform:rotate(-21deg)}.email-octopus-email-address{color:#ed225d;text-decoration:none;padding-bottom:.11em;outline:none;border:none;border-bottom:.11em dashed;border-bottom-color:#ed225d;-webkit-transition:border-bottom 30ms linear;-o-transition:border-bottom 30ms linear;transition:border-bottom 30ms linear;width:13em}.email-octopus-form-row-hp,.email-octopus-form-row-subscribe button{position:absolute;left:-5000px}.email-octopus-email-address::-webkit-input-placeholder{color:#ababab}.email-octopus-email-address:-moz-placeholder,.email-octopus-email-address::-moz-placeholder{color:#ababab}.email-octopus-email-address:-ms-input-placeholder{color:#ababab}@media (min-width:720px){.email-octopus-email-address{width:20em}}code[class*=language-],pre[class*=language-],textarea{color:#222;font-family:inconsolatamedium,Consolas,Monaco,Andale Mono,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;font-size:1em!important}pre[class*=language-]{position:relative;padding:.5em 1em;margin:.5em 0 0 -.5em;border-left:.5em solid #afafaf;background-color:#fff;background-image:-webkit-linear-gradient(transparent 50%,rgba(69,142,209,.06) 0);background-image:-o-linear-gradient(transparent 50%,rgba(69,142,209,.06) 50%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(50%,transparent),color-stop(50%,rgba(69,142,209,.06)));background-image:linear-gradient(transparent 50%,rgba(69,142,209,.06) 0);-webkit-background-size:2.9em 2.9em;background-size:2.9em 2.9em;-webkit-background-origin:content-box;background-origin:content-box;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{margin-bottom:1em}:not(pre)>code[class*=language-]{position:relative;padding:.2em;border-radius:.3em;color:#333;border:1px solid rgba(0,0,0,.1)}:not(pre)>code[class*=language-]:after,pre[class*=language-]:after{right:.75em;left:auto}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#a0a0a0}.token.punctuation{color:#666}.token.boolean,.token.constant,.token.function-name,.token.number,.token.property,.token.symbol,.token.tag{color:#dc3787}.token.attr-name,.token.builtin,.token.function,.token.selector,.token.string{color:#00a1d3}.token.entity,.token.operator,.token.url,.token.variable{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.class-name,.token.keyword{color:#704f21}.token.important,.token.regex{color:#e90}.language-css .token.string,.style .token.string{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.important{font-weight:400}.token.entity{cursor:help}.namespace{opacity:.7}@media screen and (max-width:767px){pre[class*=language-]:after,pre[class*=language-]:before{bottom:14px;-webkit-box-shadow:none;box-shadow:none}}.token.cr:before,.token.lf:before,.token.tab:not(:empty):before{color:#e0d7d1}pre.line-numbers{padding-left:3.8em;counter-reset:a}pre.line-numbers,pre.line-numbers>code{position:relative}.line-numbers .line-numbers-rows{position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.8em;width:3em;letter-spacing:-1px;border-right:1px solid #999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.line-numbers-rows>span{pointer-events:none;display:block;counter-increment:a}.line-numbers-rows>span:before{content:counter(a);color:#999;display:block;padding-right:.8em;text-align:right}
-/*# sourceMappingURL=maps/all.css.map */
\ No newline at end of file
diff --git a/src/templates/pages/reference/assets/css/external-small.png b/src/templates/pages/reference/assets/css/external-small.png
deleted file mode 100644
index 759a1cdcb5..0000000000
Binary files a/src/templates/pages/reference/assets/css/external-small.png and /dev/null differ
diff --git a/src/templates/pages/reference/assets/css/logo.png b/src/templates/pages/reference/assets/css/logo.png
deleted file mode 100644
index c82444af95..0000000000
Binary files a/src/templates/pages/reference/assets/css/logo.png and /dev/null differ
diff --git a/src/templates/pages/reference/assets/css/main.css b/src/templates/pages/reference/assets/css/main.css
deleted file mode 100644
index cdfe209e8d..0000000000
--- a/src/templates/pages/reference/assets/css/main.css
+++ /dev/null
@@ -1,783 +0,0 @@
-/*
-Font sizes for all selectors other than the body are given in percentages,
-with 100% equal to 13px. To calculate a font size percentage, multiply the
-desired size in pixels by 7.6923076923.
-
-Here's a quick lookup table:
-
-10px - 76.923%
-11px - 84.615%
-12px - 92.308%
-13px - 100%
-14px - 107.692%
-15px - 115.385%
-16px - 123.077%
-17px - 130.769%
-18px - 138.462%
-19px - 146.154%
-20px - 153.846%
-*/
-
-html {
- background: #fff;
- color: #333;
- overflow-y: scroll;
-}
-
-body {
- /*font: 13px/1.4 'Lucida Grande', 'Lucida Sans Unicode', 'DejaVu Sans', 'Bitstream Vera Sans', 'Helvetica', 'Arial', sans-serif;*/
- font: 13px/1.4 'Helvetica', 'Arial', sans-serif;
- margin: 0;
- padding: 0;
-}
-
-/* -- Links ----------------------------------------------------------------- */
-a {
- color: #356de4;
- text-decoration: none;
-}
-
-.hidden {
- display: none;
-}
-
-a:hover { text-decoration: underline; }
-
-/* "Jump to Table of Contents" link is shown to assistive tools, but hidden from
- sight until it's focused. */
-.jump {
- position: absolute;
- padding: 3px 6px;
- left: -99999px;
- top: 0;
-}
-
-.jump:focus { left: 40%; }
-
-/* -- Paragraphs ------------------------------------------------------------ */
-p { margin: 1.3em 0; }
-dd p, td p { margin-bottom: 0; }
-dd p:first-child, td p:first-child { margin-top: 0; }
-
-/* -- Headings -------------------------------------------------------------- */
-h1, h2, h3, h4, h5, h6 {
- color: #D98527;/*was #f80*/
- font-family: 'Trebuchet MS', sans-serif;
- font-weight: bold;
- line-height: 1.1;
- margin: 1.1em 0 0.5em;
-}
-
-h1 {
- font-size: 184.6%;
- color: #30418C;
- margin: 0.75em 0 0.5em;
-}
-
-h2 {
- font-size: 153.846%;
- color: #E48A2B;
-}
-
-h3 { font-size: 138.462%; }
-
-h4 {
- border-bottom: 1px solid #DBDFEA;
- color: #E48A2B;
- font-size: 115.385%;
- font-weight: normal;
- padding-bottom: 2px;
-}
-
-h5, h6 { font-size: 107.692%; }
-
-/* -- Code and examples ----------------------------------------------------- */
-code, kbd, pre, samp {
- font-family: Menlo, Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
- font-size: 92.308%;
- line-height: 1.35;
-}
-
-p code, p kbd, p samp, li code {
- background: #FCFBFA;
- border: 1px solid #EFEEED;
- padding: 0 3px;
-}
-
-a code, a kbd, a samp,
-pre code, pre kbd, pre samp,
-table code, table kbd, table samp,
-.intro code, .intro kbd, .intro samp,
-.toc code, .toc kbd, .toc samp {
- background: none;
- border: none;
- padding: 0;
-}
-
-pre.code, pre.terminal, pre.cmd {
- overflow-x: auto;
- *overflow-x: scroll;
- padding: 0.3em 0.6em;
-}
-
-pre.code {
- background: #FCFBFA;
- border: 1px solid #EFEEED;
- border-left-width: 5px;
-}
-
-pre.terminal, pre.cmd {
- background: #F0EFFC;
- border: 1px solid #D0CBFB;
- border-left: 5px solid #D0CBFB;
-}
-
-/* Don't reduce the font size of // elements inside
- blocks. */
-pre code, pre kbd, pre samp { font-size: 100%; }
-
-/* Used to denote text that shouldn't be selectable, such as line numbers or
- shell prompts. Guess which browser this doesn't work in. */
-.noselect {
- -moz-user-select: -moz-none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-
-/* -- Lists ----------------------------------------------------------------- */
-dd { margin: 0.2em 0 0.7em 1em; }
-dl { margin: 1em 0; }
-dt { font-weight: bold; }
-
-/* -- Tables ---------------------------------------------------------------- */
-caption, th { text-align: left; }
-
-table {
- border-collapse: collapse;
- width: 100%;
-}
-
-td, th {
- border: 1px solid #fff;
- padding: 5px 12px;
- vertical-align: top;
-}
-
-td { background: #E6E9F5; }
-td dl { margin: 0; }
-td dl dl { margin: 1em 0; }
-td pre:first-child { margin-top: 0; }
-
-th {
- background: #D2D7E6;/*#97A0BF*/
- border-bottom: none;
- border-top: none;
- color: #000;/*#FFF1D5*/
- font-family: 'Trebuchet MS', sans-serif;
- font-weight: bold;
- line-height: 1.3;
- white-space: nowrap;
-}
-
-
-/* -- Layout and Content ---------------------------------------------------- */
-#doc {
- margin: auto;
- min-width: 1024px;
-}
-
-.content { padding: 0 20px 0 25px; }
-
-.sidebar {
- padding: 0 15px 0 10px;
-}
-#bd {
- padding: 7px 0 130px;
- position: relative;
- width: 99%;
-}
-
-/* -- Table of Contents ----------------------------------------------------- */
-
-/* The #toc id refers to the single global table of contents, while the .toc
- class refers to generic TOC lists that could be used throughout the page. */
-
-.toc code, .toc kbd, .toc samp { font-size: 100%; }
-.toc li { font-weight: bold; }
-.toc li li { font-weight: normal; }
-
-/* -- Intro and Example Boxes ----------------------------------------------- */
-/*
-.intro, .example { margin-bottom: 2em; }
-.example {
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- -moz-box-shadow: 0 0 5px #bfbfbf;
- -webkit-box-shadow: 0 0 5px #bfbfbf;
- box-shadow: 0 0 5px #bfbfbf;
- padding: 1em;
-}
-.intro {
- background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
-}
-*/
-
-/* -- Other Styles ---------------------------------------------------------- */
-
-/* These are probably YUI-specific, and should be moved out of Selleck's default
- theme. */
-
-.button {
- border: 1px solid #dadada;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- color: #444;
- display: inline-block;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 92.308%;
- font-weight: bold;
- padding: 4px 13px 3px;
- -moz-text-shadow: 1px 1px 0 #fff;
- -webkit-text-shadow: 1px 1px 0 #fff;
- text-shadow: 1px 1px 0 #fff;
- white-space: nowrap;
-
- background: #EFEFEF; /* old browsers */
- background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
-}
-
-.button:hover {
- border-color: #466899;
- color: #fff;
- text-decoration: none;
- -moz-text-shadow: 1px 1px 0 #222;
- -webkit-text-shadow: 1px 1px 0 #222;
- text-shadow: 1px 1px 0 #222;
-
- background: #6396D8; /* old browsers */
- background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
-}
-
-.newwindow { text-align: center; }
-
-.header .version em {
- display: block;
- text-align: right;
-}
-
-
-#classdocs .item {
- border-bottom: 1px solid #466899;
- margin: 1em 0;
- padding: 1.5em;
-}
-
-#classdocs .item .params p,
- #classdocs .item .returns p,{
- display: inline;
-}
-
-#classdocs .item em code, #classdocs .item em.comment {
- color: green;
-}
-
-#classdocs .item em.comment a {
- color: green;
- text-decoration: underline;
-}
-
-#classdocs .foundat {
- font-size: 11px;
- font-style: normal;
-}
-
-.attrs .emits {
- margin-left: 2em;
- padding: .5em;
- border-left: 1px dashed #ccc;
-}
-
-abbr {
- border-bottom: 1px dashed #ccc;
- font-size: 80%;
- cursor: help;
-}
-
-.prettyprint li.L0,
-.prettyprint li.L1,
-.prettyprint li.L2,
-.prettyprint li.L3,
-.prettyprint li.L5,
-.prettyprint li.L6,
-.prettyprint li.L7,
-.prettyprint li.L8 {
- list-style: decimal;
-}
-
-ul li p {
- margin-top: 0;
-}
-
-.method .name {
- font-size: 110%;
-}
-
-.apidocs .methods .extends .method,
-.apidocs .properties .extends .property,
-.apidocs .attrs .extends .attr,
-.apidocs .events .extends .event {
- font-weight: bold;
-}
-
-.apidocs .methods .extends .inherited,
-.apidocs .properties .extends .inherited,
-.apidocs .attrs .extends .inherited,
-.apidocs .events .extends .inherited {
- font-weight: normal;
-}
-
-#hd {
- background: whiteSmoke;
- background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
- border-bottom: 1px solid #DFDFDF;
- padding: 0 15px 1px 20px;
- margin-bottom: 15px;
-}
-
-#hd img {
- margin-right: 10px;
- vertical-align: middle;
-}
-
-
-/* -- API Docs CSS ---------------------------------------------------------- */
-
-/*
-This file is organized so that more generic styles are nearer the top, and more
-specific styles are nearer the bottom of the file. This allows us to take full
-advantage of the cascade to avoid redundant style rules. Please respect this
-convention when making changes.
-*/
-
-/* -- Generic TabView styles ------------------------------------------------ */
-
-/*
-These styles apply to all API doc tabviews. To change styles only for a
-specific tabview, see the other sections below.
-*/
-
-.yui3-js-enabled .apidocs .tabview {
- visibility: hidden; /* Hide until the TabView finishes rendering. */
- _visibility: visible;
-}
-
-.apidocs .tabview.yui3-tabview-content { visibility: visible; }
-.apidocs .tabview .yui3-tabview-panel { background: #fff; }
-
-/* -- Generic Content Styles ------------------------------------------------ */
-
-/* Headings */
-h2, h3, h4, h5, h6 {
- border: none;
- color: #30418C;
- font-weight: bold;
- text-decoration: none;
-}
-
-.link-docs {
- float: right;
- font-size: 15px;
- margin: 4px 4px 6px;
- padding: 6px 30px 5px;
-}
-
-.apidocs { zoom: 1; }
-
-/* Generic box styles. */
-.apidocs .box {
- border: 1px solid;
- border-radius: 3px;
- margin: 1em 0;
- padding: 0 1em;
-}
-
-/* A flag is a compact, capsule-like indicator of some kind. It's used to
- indicate private and protected items, item return types, etc. in an
- attractive and unobtrusive way. */
-.apidocs .flag {
- background: #bababa;
- border-radius: 3px;
- color: #fff;
- font-size: 11px;
- margin: 0 0.5em;
- padding: 2px 4px 1px;
-}
-
-/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
-.apidocs .meta {
- background: #f9f9f9;
- border-color: #efefef;
- color: #555;
- font-size: 11px;
- padding: 3px 6px;
-}
-
-.apidocs .meta p { margin: 0; }
-
-/* Deprecation warning. */
-.apidocs .box.deprecated,
-.apidocs .flag.deprecated {
- background: #fdac9f;
- border: 1px solid #fd7775;
-}
-
-.apidocs .box.deprecated p { margin: 0.5em 0; }
-.apidocs .flag.deprecated { color: #333; }
-
-/* Module/Class intro description. */
-.apidocs .intro {
- background: #f0f1f8;
- border-color: #d4d8eb;
-}
-
-/* Loading spinners. */
-#bd.loading .apidocs,
-#api-list.loading .yui3-tabview-panel {
- background: #fff url(../img/spinner.gif) no-repeat center 70px;
- min-height: 150px;
-}
-
-#bd.loading .apidocs .content,
-#api-list.loading .yui3-tabview-panel .apis {
- display: none;
-}
-
-.apidocs .no-visible-items { color: #666; }
-
-/* Generic inline list. */
-.apidocs ul.inline {
- display: inline;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.apidocs ul.inline li { display: inline; }
-
-/* Comma-separated list. */
-.apidocs ul.commas li:after { content: ','; }
-.apidocs ul.commas li:last-child:after { content: ''; }
-
-/* Keyboard shortcuts. */
-kbd .cmd { font-family: Monaco, Helvetica; }
-
-/* -- Generic Access Level styles ------------------------------------------- */
-.apidocs .item.protected,
-.apidocs .item.private,
-.apidocs .index-item.protected,
-.apidocs .index-item.deprecated,
-.apidocs .index-item.private {
- display: none;
-}
-
-.show-deprecated .item.deprecated,
-.show-deprecated .index-item.deprecated,
-.show-protected .item.protected,
-.show-protected .index-item.protected,
-.show-private .item.private,
-.show-private .index-item.private {
- display: block;
-}
-
-.hide-inherited .item.inherited,
-.hide-inherited .index-item.inherited {
- display: none;
-}
-
-/* -- Generic Item Index styles --------------------------------------------- */
-.apidocs .index { margin: 1.5em 0 3em; }
-
-.apidocs .index h3 {
- border-bottom: 1px solid #efefef;
- color: #333;
- font-size: 13px;
- margin: 2em 0 0.6em;
- padding-bottom: 2px;
-}
-
-.apidocs .index .no-visible-items { margin-top: 2em; }
-
-.apidocs .index-list {
- border-color: #efefef;
- font-size: 12px;
- list-style: none;
- margin: 0;
- padding: 0;
- -moz-column-count: 4;
- -moz-column-gap: 10px;
- -moz-column-width: 170px;
- -ms-column-count: 4;
- -ms-column-gap: 10px;
- -ms-column-width: 170px;
- -o-column-count: 4;
- -o-column-gap: 10px;
- -o-column-width: 170px;
- -webkit-column-count: 4;
- -webkit-column-gap: 10px;
- -webkit-column-width: 170px;
- column-count: 4;
- column-gap: 10px;
- column-width: 170px;
-}
-
-.apidocs .no-columns .index-list {
- -moz-column-count: 1;
- -ms-column-count: 1;
- -o-column-count: 1;
- -webkit-column-count: 1;
- column-count: 1;
-}
-
-.apidocs .index-item { white-space: nowrap; }
-
-.apidocs .index-item .flag {
- background: none;
- border: none;
- color: #afafaf;
- display: inline;
- margin: 0 0 0 0.2em;
- padding: 0;
-}
-
-/* -- Generic API item styles ----------------------------------------------- */
-.apidocs .args {
- display: inline;
- margin: 0 0.5em;
-}
-
-.apidocs .flag.chainable { background: #46ca3b; }
-.apidocs .flag.protected { background: #9b86fc; }
-.apidocs .flag.private { background: #fd6b1b; }
-.apidocs .flag.async { background: #356de4; }
-.apidocs .flag.required { background: #e60923; }
-
-.apidocs .item {
- border-bottom: 1px solid #efefef;
- margin: 1.5em 0 2em;
- padding-bottom: 2em;
-}
-
-.apidocs .item h4,
-.apidocs .item h5,
-.apidocs .item h6 {
- color: #333;
- font-family: inherit;
- font-size: 100%;
-}
-
-.apidocs .item .description p,
-.apidocs .item pre.code {
- margin: 1em 0 0;
-}
-
-.apidocs .item .meta {
- background: none;
- border: none;
- padding: 0;
-}
-
-.apidocs .item .name {
- display: inline;
- font-size: 14px;
-}
-
-.apidocs .item .type,
-.apidocs .item .type a,
-.apidocs .returns-inline {
- color: #555;
-}
-
-.apidocs .item .type,
-.apidocs .returns-inline {
- font-size: 11px;
- margin: 0 0 0 0;
-}
-
-.apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
-.apidocs .item .type a:hover { border: none; }
-
-/* -- Item Parameter List --------------------------------------------------- */
-.apidocs .params-list {
- list-style: square;
- margin: 1em 0 0 2em;
- padding: 0;
-}
-
-.apidocs .param { margin-bottom: 1em; }
-
-.apidocs .param .type,
-.apidocs .param .type a {
- color: #666;
-}
-
-.apidocs .param .type {
- margin: 0 0 0 0.5em;
- *margin-left: 0.5em;
-}
-
-.apidocs .param-name { font-weight: bold; }
-
-/* -- Item "Emits" block ---------------------------------------------------- */
-.apidocs .item .emits {
- background: #f9f9f9;
- border-color: #eaeaea;
-}
-
-/* -- Item "Returns" block -------------------------------------------------- */
-.apidocs .item .returns .type,
-.apidocs .item .returns .type a {
- font-size: 100%;
- margin: 0;
-}
-
-/* -- Class Constructor block ----------------------------------------------- */
-.apidocs .constructor .item {
- border: none;
- padding-bottom: 0;
-}
-
-/* -- File Source View ------------------------------------------------------ */
-.apidocs .file pre.code,
-#doc .apidocs .file pre.prettyprint {
- background: inherit;
- border: none;
- overflow: visible;
- padding: 0;
-}
-
-.apidocs .L0,
-.apidocs .L1,
-.apidocs .L2,
-.apidocs .L3,
-.apidocs .L4,
-.apidocs .L5,
-.apidocs .L6,
-.apidocs .L7,
-.apidocs .L8,
-.apidocs .L9 {
- background: inherit;
-}
-
-/* -- Submodule List -------------------------------------------------------- */
-.apidocs .module-submodule-description {
- font-size: 12px;
- margin: 0.3em 0 1em;
-}
-
-.apidocs .module-submodule-description p:first-child { margin-top: 0; }
-
-/* -- Sidebar TabView ------------------------------------------------------- */
-#api-tabview { margin-top: 0.6em; }
-
-#api-tabview-filter,
-#api-tabview-panel {
- border: 1px solid #dfdfdf;
-}
-
-#api-tabview-filter {
- border-bottom: none;
- border-top: none;
- padding: 0.6em 10px 0 10px;
-}
-
-#api-tabview-panel { border-top: none; }
-#api-filter { width: 97%; }
-
-/* -- Content TabView ------------------------------------------------------- */
-#classdocs .yui3-tabview-panel { border: none; }
-
-/* -- Source File Contents -------------------------------------------------- */
-.prettyprint li.L0,
-.prettyprint li.L1,
-.prettyprint li.L2,
-.prettyprint li.L3,
-.prettyprint li.L5,
-.prettyprint li.L6,
-.prettyprint li.L7,
-.prettyprint li.L8 {
- list-style: decimal;
-}
-
-/* -- API options ----------------------------------------------------------- */
-#api-options {
- font-size: 11px;
- margin-top: 2.2em;
- position: absolute;
- right: 1.5em;
-}
-
-/*#api-options label { margin-right: 0.6em; }*/
-
-/* -- API list -------------------------------------------------------------- */
-#api-list {
- margin-top: 1.5em;
- *zoom: 1;
-}
-
-.apis {
- font-size: 12px;
- line-height: 1.4;
- list-style: none;
- margin: 0;
- padding: 0.5em 0 0.5em 0.4em;
-}
-
-.apis a {
- border: 1px solid transparent;
- display: block;
- margin: 0 0 0 -4px;
- padding: 1px 4px 0;
- text-decoration: none;
- _border: none;
- _display: inline;
-}
-
-.apis a:hover,
-.apis a:focus {
- background: #E8EDFC;
- background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
- border-color: #AAC0FA;
- border-radius: 3px;
- color: #333;
- outline: none;
-}
-
-.api-list-item a:hover,
-.api-list-item a:focus {
- font-weight: bold;
- text-shadow: 1px 1px 1px #fff;
-}
-
-.apis .message { color: #888; }
-.apis .result a { padding: 3px 5px 2px; }
-
-.apis .result .type {
- right: 4px;
- top: 7px;
-}
-
-.api-list-item .yui3-highlight {
- font-weight: bold;
-}
-
diff --git a/src/templates/pages/reference/assets/fonts/inconsolata.eot b/src/templates/pages/reference/assets/fonts/inconsolata.eot
deleted file mode 100644
index 4b076884d0..0000000000
Binary files a/src/templates/pages/reference/assets/fonts/inconsolata.eot and /dev/null differ
diff --git a/src/templates/pages/reference/assets/fonts/inconsolata.otf b/src/templates/pages/reference/assets/fonts/inconsolata.otf
deleted file mode 100644
index e7e1fa0cd7..0000000000
Binary files a/src/templates/pages/reference/assets/fonts/inconsolata.otf and /dev/null differ
diff --git a/src/templates/pages/reference/assets/fonts/inconsolata.svg b/src/templates/pages/reference/assets/fonts/inconsolata.svg
deleted file mode 100644
index 2feb4e38c3..0000000000
--- a/src/templates/pages/reference/assets/fonts/inconsolata.svg
+++ /dev/null
@@ -1,240 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/src/templates/pages/reference/assets/fonts/inconsolata.ttf b/src/templates/pages/reference/assets/fonts/inconsolata.ttf
deleted file mode 100644
index 2e8649b73d..0000000000
Binary files a/src/templates/pages/reference/assets/fonts/inconsolata.ttf and /dev/null differ
diff --git a/src/templates/pages/reference/assets/fonts/inconsolata.woff b/src/templates/pages/reference/assets/fonts/inconsolata.woff
deleted file mode 100644
index 41990c1dde..0000000000
Binary files a/src/templates/pages/reference/assets/fonts/inconsolata.woff and /dev/null differ
diff --git a/src/templates/pages/reference/assets/img/p5js.svg b/src/templates/pages/reference/assets/img/p5js.svg
deleted file mode 100644
index eaf5b87618..0000000000
--- a/src/templates/pages/reference/assets/img/p5js.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/src/templates/pages/reference/assets/img/spinner.gif b/src/templates/pages/reference/assets/img/spinner.gif
deleted file mode 100644
index 44f96ba68c..0000000000
Binary files a/src/templates/pages/reference/assets/img/spinner.gif and /dev/null differ
diff --git a/src/templates/pages/reference/assets/js/api-filter.js b/src/templates/pages/reference/assets/js/api-filter.js
deleted file mode 100644
index d442e54306..0000000000
--- a/src/templates/pages/reference/assets/js/api-filter.js
+++ /dev/null
@@ -1,56 +0,0 @@
-YUI.add('api-filter', function (Y) {
-
-Y.APIFilter = Y.Base.create('apiFilter', Y.Base, [Y.AutoCompleteBase], {
- // -- Initializer ----------------------------------------------------------
- initializer: function () {
- this._bindUIACBase();
- this._syncUIACBase();
- },
- getDisplayName: function(name) {
-
- Y.each(Y.YUIDoc.meta.allModules, function(i) {
- if (i.name === name && i.displayName) {
- name = i.displayName;
- }
- });
-
- if (this.get('queryType') === 'elements') {
- name = '<' + name + '>';
- }
-
- return name;
- }
-
-}, {
- // -- Attributes -----------------------------------------------------------
- ATTRS: {
- resultHighlighter: {
- value: 'phraseMatch'
- },
-
- // May be set to "classes", "elements" or "modules".
- queryType: {
- value: 'classes'
- },
-
- source: {
- valueFn: function() {
- var self = this;
- return function(q) {
- var data = Y.YUIDoc.meta[self.get('queryType')],
- out = [];
- Y.each(data, function(v) {
- if (v.toLowerCase().indexOf(q.toLowerCase()) > -1) {
- out.push(v);
- }
- });
- return out;
- };
- }
- }
- }
-});
-
-}, '3.4.0', {requires: [
- 'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources'
-]});
diff --git a/src/templates/pages/reference/assets/js/api-list.js b/src/templates/pages/reference/assets/js/api-list.js
deleted file mode 100644
index e8f650d5d5..0000000000
--- a/src/templates/pages/reference/assets/js/api-list.js
+++ /dev/null
@@ -1,255 +0,0 @@
-YUI.add('api-list', function (Y) {
-
-var Lang = Y.Lang,
- YArray = Y.Array,
-
- APIList = Y.namespace('APIList'),
-
- classesNode = Y.one('#api-classes'),
- elementsNode = Y.one('#api-elements'),
- inputNode = Y.one('#api-filter'),
- modulesNode = Y.one('#api-modules'),
- tabviewNode = Y.one('#api-tabview'),
-
- tabs = APIList.tabs = {},
-
- filter = APIList.filter = new Y.APIFilter({
- inputNode : inputNode,
- maxResults: 1000,
-
- on: {
- results: onFilterResults
- }
- }),
-
- search = APIList.search = new Y.APISearch({
- inputNode : inputNode,
- maxResults: 100,
-
- on: {
- clear : onSearchClear,
- results: onSearchResults
- }
- }),
-
- tabview = APIList.tabview = new Y.TabView({
- srcNode : tabviewNode,
- panelNode: '#api-tabview-panel',
- render : true,
-
- on: {
- selectionChange: onTabSelectionChange
- }
- }),
-
- focusManager = APIList.focusManager = tabviewNode.plug(Y.Plugin.NodeFocusManager, {
- circular : true,
- descendants: '#api-filter, .yui3-tab-panel-selected .api-list-item a, .yui3-tab-panel-selected .result a',
- keys : {next: 'down:40', previous: 'down:38'}
- }).focusManager,
-
- LIST_ITEM_TEMPLATE =
- ' ' +
- '{displayName} ' +
- ' ';
-
-// -- Init ---------------------------------------------------------------------
-
-// Duckpunch FocusManager's key event handling to prevent it from handling key
-// events when a modifier is pressed.
-Y.before(function (e, activeDescendant) {
- if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
- return new Y.Do.Prevent();
- }
-}, focusManager, '_focusPrevious', focusManager);
-
-Y.before(function (e, activeDescendant) {
- if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) {
- return new Y.Do.Prevent();
- }
-}, focusManager, '_focusNext', focusManager);
-
-// Create a mapping of tabs in the tabview so we can refer to them easily later.
-tabview.each(function (tab, index) {
- var name = tab.get('label').toLowerCase();
-
- tabs[name] = {
- index: index,
- name : name,
- tab : tab
- };
-});
-
-// Switch tabs on Ctrl/Cmd-Left/Right arrows.
-tabviewNode.on('key', onTabSwitchKey, 'down:37,39');
-
-// Focus the filter input when the `/` key is pressed.
-Y.one(Y.config.doc).on('key', onSearchKey, 'down:83');
-
-// Keep the Focus Manager up to date.
-inputNode.on('focus', function () {
- focusManager.set('activeDescendant', inputNode);
-});
-
-// Update all tabview links to resolved URLs.
-tabview.get('panelNode').all('a').each(function (link) {
- link.setAttribute('href', link.get('href'));
-});
-
-// -- Private Functions --------------------------------------------------------
-function getFilterResultNode() {
- var queryType = filter.get('queryType');
- return queryType === 'classes' ? classesNode
- : queryType === 'elements' ? elementsNode : modulesNode;
-}
-
-// -- Event Handlers -----------------------------------------------------------
-function onFilterResults(e) {
- var frag = Y.one(Y.config.doc.createDocumentFragment()),
- resultNode = getFilterResultNode(),
- typePlural = filter.get('queryType'),
- typeSingular = typePlural === 'classes' ? 'class' : typePlural === 'elements' ? 'element' : 'module';
-
- if (e.results.length) {
- YArray.each(e.results, function (result) {
- frag.append(Lang.sub(LIST_ITEM_TEMPLATE, {
- rootPath : APIList.rootPath,
- displayName : filter.getDisplayName(result.highlighted),
- name : result.text,
- typePlural : typePlural,
- typeSingular: typeSingular
- }));
- });
- } else {
- frag.append(
- '' +
- 'No ' + typePlural + ' found.' +
- ' '
- );
- }
-
- resultNode.empty(true);
- resultNode.append(frag);
-
- focusManager.refresh();
-}
-
-function onSearchClear(e) {
-
- focusManager.refresh();
-}
-
-function onSearchKey(e) {
- var target = e.target;
-
- if (target.test('input,select,textarea')
- || target.get('isContentEditable')) {
- return;
- }
-
- e.preventDefault();
-
- inputNode.focus();
- focusManager.refresh();
-}
-
-function onSearchResults(e) {
- var frag = Y.one(Y.config.doc.createDocumentFragment());
-
- if (e.results.length) {
- YArray.each(e.results, function (result) {
- frag.append(result.display);
- });
- } else {
- frag.append(
- '' +
- 'No results found. Maybe you\'ll have better luck with a ' +
- 'different query?' +
- ' '
- );
- }
-
-
- focusManager.refresh();
-}
-
-function onTabSelectionChange(e) {
- var tab = e.newVal,
- name = tab.get('label').toLowerCase();
-
- tabs.selected = {
- index: tab.get('index'),
- name : name,
- tab : tab
- };
-
- switch (name) {
- case 'elements':// fallthru
- case 'classes': // fallthru
- case 'modules':
- filter.setAttrs({
- minQueryLength: 0,
- queryType : name
- });
-
- search.set('minQueryLength', -1);
-
- // Only send a request if this isn't the initially-selected tab.
- if (e.prevVal) {
- filter.sendRequest(filter.get('value'));
- }
- break;
-
- case 'everything':
- filter.set('minQueryLength', -1);
- search.set('minQueryLength', 1);
-
- if (search.get('value')) {
- search.sendRequest(search.get('value'));
- } else {
- inputNode.focus();
- }
- break;
-
- default:
- // WTF? We shouldn't be here!
- filter.set('minQueryLength', -1);
- search.set('minQueryLength', -1);
- }
-
- if (focusManager) {
- setTimeout(function () {
- focusManager.refresh();
- }, 1);
- }
-}
-
-function onTabSwitchKey(e) {
- var currentTabIndex = tabs.selected.index;
-
- if (!(e.ctrlKey || e.metaKey)) {
- return;
- }
-
- e.preventDefault();
-
- switch (e.keyCode) {
- case 37: // left arrow
- if (currentTabIndex > 0) {
- tabview.selectChild(currentTabIndex - 1);
- inputNode.focus();
- }
- break;
-
- case 39: // right arrow
- if (currentTabIndex < (Y.Object.size(tabs) - 2)) {
- tabview.selectChild(currentTabIndex + 1);
- inputNode.focus();
- }
- break;
- }
-}
-
-}, '3.4.0', {requires: [
- 'api-filter', 'api-search', 'event-key', 'node-focusmanager', 'tabview'
-]});
diff --git a/src/templates/pages/reference/assets/js/api-search.js b/src/templates/pages/reference/assets/js/api-search.js
deleted file mode 100644
index 175f6a6179..0000000000
--- a/src/templates/pages/reference/assets/js/api-search.js
+++ /dev/null
@@ -1,98 +0,0 @@
-YUI.add('api-search', function (Y) {
-
-var Lang = Y.Lang,
- Node = Y.Node,
- YArray = Y.Array;
-
-Y.APISearch = Y.Base.create('apiSearch', Y.Base, [Y.AutoCompleteBase], {
- // -- Public Properties ----------------------------------------------------
- RESULT_TEMPLATE:
- '' +
- '' +
- '{name} ' +
- '{resultType} ' +
- '{description}
' +
- '{class} ' +
- ' ' +
- ' ',
-
- // -- Initializer ----------------------------------------------------------
- initializer: function () {
- this._bindUIACBase();
- this._syncUIACBase();
- },
-
- // -- Protected Methods ----------------------------------------------------
- _apiResultFilter: function (query, results) {
- // Filter components out of the results.
- return YArray.filter(results, function (result) {
- return result.raw.resultType === 'component' ? false : result;
- });
- },
-
- _apiResultFormatter: function (query, results) {
- return YArray.map(results, function (result) {
- var raw = Y.merge(result.raw), // create a copy
- desc = raw.description || '';
-
- // Convert description to text and truncate it if necessary.
- desc = Node.create('' + desc + '
').get('text');
-
- if (desc.length > 65) {
- desc = Y.Escape.html(desc.substr(0, 65)) + ' …';
- } else {
- desc = Y.Escape.html(desc);
- }
-
- raw['class'] || (raw['class'] = '');
- raw.description = desc;
-
- // Use the highlighted result name.
- raw.name = result.highlighted;
-
- return Lang.sub(this.RESULT_TEMPLATE, raw);
- }, this);
- },
-
- _apiTextLocator: function (result) {
- return result.displayName || result.name;
- }
-}, {
- // -- Attributes -----------------------------------------------------------
- ATTRS: {
- resultFormatter: {
- valueFn: function () {
- return this._apiResultFormatter;
- }
- },
-
- resultFilters: {
- valueFn: function () {
- return this._apiResultFilter;
- }
- },
-
- resultHighlighter: {
- value: 'phraseMatch'
- },
-
- resultListLocator: {
- value: 'data.results'
- },
-
- resultTextLocator: {
- valueFn: function () {
- return this._apiTextLocator;
- }
- },
-
- source: {
- value: '/api/v1/search?q={query}&count={maxResults}'
- }
- }
-});
-
-}, '3.4.0', {requires: [
- 'autocomplete-base', 'autocomplete-highlighters', 'autocomplete-sources',
- 'escape'
-]});
diff --git a/src/templates/pages/reference/assets/js/apidocs.js b/src/templates/pages/reference/assets/js/apidocs.js
deleted file mode 100644
index af9ac32209..0000000000
--- a/src/templates/pages/reference/assets/js/apidocs.js
+++ /dev/null
@@ -1,376 +0,0 @@
-YUI().use(
- 'yuidoc-meta',
- 'api-list', 'history-hash', 'node-screen', 'node-style', 'pjax',
-function (Y) {
-
-var win = Y.config.win,
- localStorage = win.localStorage,
-
- bdNode = Y.one('#bd'),
-
- pjax,
- defaultRoute,
-
- classTabView,
- selectedTab;
-
-// Kill pjax functionality unless serving over HTTP.
-if (!Y.getLocation().protocol.match(/^https?\:/)) {
- Y.Router.html5 = false;
-}
-
-// Create the default route with middleware which enables syntax highlighting
-// on the loaded content.
-defaultRoute = Y.Pjax.defaultRoute.concat(function (req, res, next) {
- prettyPrint();
- bdNode.removeClass('loading');
-
- next();
-});
-
-pjax = new Y.Pjax({
- container : '#docs-main',
- contentSelector: '#docs-main > .content',
- linkSelector : '#bd a',
- titleSelector : '#xhr-title',
-
- navigateOnHash: true,
- root : '/',
- routes : [
- // -- / ----------------------------------------------------------------
- {
- path : '/(index.html)?',
- callbacks: defaultRoute
- },
-
- // -- /elements/* -------------------------------------------------------
- {
- path : '/elements/:element.html*',
- callbacks: defaultRoute
- },
-
- // -- /classes/* -------------------------------------------------------
- {
- path : '/classes/:class.html*',
- callbacks: [defaultRoute, 'handleClasses']
- },
-
- // -- /files/* ---------------------------------------------------------
- {
- path : '/files/*file',
- callbacks: [defaultRoute, 'handleFiles']
- },
-
- // -- /modules/* -------------------------------------------------------
- {
- path : '/modules/:module.html*',
- callbacks: defaultRoute
- }
- ]
-});
-
-// -- Utility Functions --------------------------------------------------------
-
-pjax.checkVisibility = function (tab) {
- tab || (tab = selectedTab);
-
- if (!tab) { return; }
-
- var panelNode = tab.get('panelNode'),
- visibleItems;
-
- // If no items are visible in the tab panel due to the current visibility
- // settings, display a message to that effect.
- visibleItems = panelNode.all('.item,.index-item').some(function (itemNode) {
- if (itemNode.getComputedStyle('display') !== 'none') {
- return true;
- }
- });
-
- panelNode.all('.no-visible-items').remove();
-
- if (!visibleItems) {
- if (Y.one('#index .index-item')) {
- panelNode.append(
- '' +
- '
' +
- 'Some items are not shown due to the current visibility ' +
- 'settings. Use the checkboxes at the upper right of this ' +
- 'page to change the visibility settings.' +
- '
' +
- '
'
- );
- } else {
- panelNode.append(
- '' +
- '
' +
- 'This class doesn\'t provide any methods, properties, ' +
- 'attributes, or events.' +
- '
' +
- '
'
- );
- }
- }
-
- // Hide index sections without any visible items.
- Y.all('.index-section').each(function (section) {
- var items = 0,
- visibleItems = 0;
-
- section.all('.index-item').each(function (itemNode) {
- items += 1;
-
- if (itemNode.getComputedStyle('display') !== 'none') {
- visibleItems += 1;
- }
- });
-
- section.toggleClass('hidden', !visibleItems);
- section.toggleClass('no-columns', visibleItems < 4);
- });
-};
-
-pjax.initClassTabView = function () {
- if (!Y.all('#classdocs .api-class-tab').size()) {
- return;
- }
-
- if (classTabView) {
- classTabView.destroy();
- selectedTab = null;
- }
-
- classTabView = new Y.TabView({
- srcNode: '#classdocs',
-
- on: {
- selectionChange: pjax.onTabSelectionChange
- }
- });
-
- pjax.updateTabState();
- classTabView.render();
-};
-
-pjax.initLineNumbers = function () {
- var hash = win.location.hash.substring(1),
- container = pjax.get('container'),
- hasLines, node;
-
- // Add ids for each line number in the file source view.
- container.all('.linenums>li').each(function (lineNode, index) {
- lineNode.set('id', 'l' + (index + 1));
- lineNode.addClass('file-line');
- hasLines = true;
- });
-
- // Scroll to the desired line.
- if (hasLines && /^l\d+$/.test(hash)) {
- if ((node = container.getById(hash))) {
- win.scroll(0, node.getY());
- }
- }
-};
-
-pjax.initRoot = function () {
- var terminators = /^(?:classes|files|elements|modules)$/,
- parts = pjax._getPathRoot().split('/'),
- root = [],
- i, len, part;
-
- for (i = 0, len = parts.length; i < len; i += 1) {
- part = parts[i];
-
- if (part.match(terminators)) {
- // Makes sure the path will end with a "/".
- root.push('');
- break;
- }
-
- root.push(part);
- }
-
- pjax.set('root', root.join('/'));
-};
-
-pjax.updateTabState = function (src) {
- var hash = win.location.hash.substring(1),
- defaultTab, node, tab, tabPanel;
-
- function scrollToNode() {
- if (node.hasClass('protected')) {
- Y.one('#api-show-protected').set('checked', true);
- pjax.updateVisibility();
- }
-
- if (node.hasClass('private')) {
- Y.one('#api-show-private').set('checked', true);
- pjax.updateVisibility();
- }
-
- setTimeout(function () {
- // For some reason, unless we re-get the node instance here,
- // getY() always returns 0.
- var node = Y.one('#classdocs').getById(hash);
- win.scrollTo(0, node.getY() - 70);
- }, 1);
- }
-
- if (!classTabView) {
- return;
- }
-
- if (src === 'hashchange' && !hash) {
- defaultTab = 'index';
- } else {
- if (localStorage) {
- defaultTab = localStorage.getItem('tab_' + pjax.getPath()) ||
- 'index';
- } else {
- defaultTab = 'index';
- }
- }
-
- if (hash && (node = Y.one('#classdocs').getById(hash))) {
- if ((tabPanel = node.ancestor('.api-class-tabpanel', true))) {
- if ((tab = Y.one('#classdocs .api-class-tab.' + tabPanel.get('id')))) {
- if (classTabView.get('rendered')) {
- Y.Widget.getByNode(tab).set('selected', 1);
- } else {
- tab.addClass('yui3-tab-selected');
- }
- }
- }
-
- // Scroll to the desired element if this is a hash URL.
- if (node) {
- if (classTabView.get('rendered')) {
- scrollToNode();
- } else {
- classTabView.once('renderedChange', scrollToNode);
- }
- }
- } else {
- tab = Y.one('#classdocs .api-class-tab.' + defaultTab);
-
- // When the `defaultTab` node isn't found, `localStorage` is stale.
- if (!tab && defaultTab !== 'index') {
- tab = Y.one('#classdocs .api-class-tab.index');
- }
-
- if (classTabView.get('rendered')) {
- Y.Widget.getByNode(tab).set('selected', 1);
- } else {
- tab.addClass('yui3-tab-selected');
- }
- }
-};
-
-pjax.updateVisibility = function () {
- var container = pjax.get('container');
-
- container.toggleClass('hide-inherited',
- !Y.one('#api-show-inherited').get('checked'));
-
- container.toggleClass('show-deprecated',
- Y.one('#api-show-deprecated').get('checked'));
-
- container.toggleClass('show-protected',
- Y.one('#api-show-protected').get('checked'));
-
- container.toggleClass('show-private',
- Y.one('#api-show-private').get('checked'));
-
- pjax.checkVisibility();
-};
-
-// -- Route Handlers -----------------------------------------------------------
-
-pjax.handleClasses = function (req, res, next) {
- var status = res.ioResponse.status;
-
- // Handles success and local filesystem XHRs.
- if (res.ioResponse.readyState === 4 && (!status || (status >= 200 && status < 300))) {
- pjax.initClassTabView();
- }
-
- next();
-};
-
-pjax.handleFiles = function (req, res, next) {
- var status = res.ioResponse.status;
-
- // Handles success and local filesystem XHRs.
- if (res.ioResponse.readyState === 4 && (!status || (status >= 200 && status < 300))) {
- pjax.initLineNumbers();
- }
-
- next();
-};
-
-// -- Event Handlers -----------------------------------------------------------
-
-pjax.onNavigate = function (e) {
- var hash = e.hash,
- originTarget = e.originEvent && e.originEvent.target,
- tab;
-
- if (hash) {
- tab = originTarget && originTarget.ancestor('.yui3-tab', true);
-
- if (hash === win.location.hash) {
- pjax.updateTabState('hashchange');
- } else if (!tab) {
- win.location.hash = hash;
- }
-
- e.preventDefault();
- return;
- }
-
- // Only scroll to the top of the page when the URL doesn't have a hash.
- this.set('scrollToTop', !e.url.match(/#.+$/));
-
- bdNode.addClass('loading');
-};
-
-pjax.onOptionClick = function (e) {
- pjax.updateVisibility();
-};
-
-pjax.onTabSelectionChange = function (e) {
- var tab = e.newVal,
- tabId = tab.get('contentBox').getAttribute('href').substring(1);
-
- selectedTab = tab;
-
- // If switching from a previous tab (i.e., this is not the default tab),
- // replace the history entry with a hash URL that will cause this tab to
- // be selected if the user navigates away and then returns using the back
- // or forward buttons.
- if (e.prevVal && localStorage) {
- localStorage.setItem('tab_' + pjax.getPath(), tabId);
- }
-
- pjax.checkVisibility(tab);
-};
-
-// -- Init ---------------------------------------------------------------------
-
-pjax.on('navigate', pjax.onNavigate);
-
-pjax.initRoot();
-pjax.upgrade();
-pjax.initClassTabView();
-pjax.initLineNumbers();
-pjax.updateVisibility();
-
-Y.APIList.rootPath = pjax.get('root');
-
-Y.one('#api-options').delegate('click', pjax.onOptionClick, 'input');
-
-Y.on('hashchange', function (e) {
- pjax.updateTabState('hashchange');
-}, win);
-
-});
diff --git a/src/templates/pages/reference/assets/js/reference.js b/src/templates/pages/reference/assets/js/reference.js
deleted file mode 100644
index b5f849aaed..0000000000
--- a/src/templates/pages/reference/assets/js/reference.js
+++ /dev/null
@@ -1,4949 +0,0 @@
-(function () {
-// https://github.com/umdjs/umd/blob/master/templates/returnExports.js
-(function (root, factory) {
- if (typeof define === 'function' && define.amd) {
- define('documented-method',[], factory);
- } else if (typeof module === 'object' && module.exports) {
- module.exports = factory();
- } else {
- root.DocumentedMethod = factory();
- }
-}(this, function () {
- function extend(target, src) {
- Object.keys(src).forEach(function(prop) {
- target[prop] = src[prop];
- });
- return target;
- }
-
- function DocumentedMethod(classitem) {
- extend(this, classitem);
-
- if (this.overloads) {
- // Make each overload inherit properties from their parent
- // classitem.
- this.overloads = this.overloads.map(function(overload) {
- return extend(Object.create(this), overload);
- }, this);
-
- if (this.params) {
- throw new Error('params for overloaded methods should be undefined');
- }
-
- this.params = this._getMergedParams();
- }
- }
-
- DocumentedMethod.prototype = {
- // Merge parameters across all overloaded versions of this item.
- _getMergedParams: function() {
- var paramNames = {};
- var params = [];
-
- this.overloads.forEach(function(overload) {
- if (!overload.params) {
- return;
- }
- overload.params.forEach(function(param) {
- if (param.name in paramNames) {
- return;
- }
- paramNames[param.name] = param;
- params.push(param);
- });
- });
-
- return params;
- }
- };
-
- return DocumentedMethod;
-}));
-
-/**
- * @license RequireJS text 2.0.10 Copyright (c) 2010-2012, The Dojo Foundation All Rights Reserved.
- * Available via the MIT or new BSD license.
- * see: http://github.com/requirejs/text for details
- */
-/*jslint regexp: true */
-/*global require, XMLHttpRequest, ActiveXObject,
- define, window, process, Packages,
- java, location, Components, FileUtils */
-
-define('text',['module'], function (module) {
- 'use strict';
-
- var text, fs, Cc, Ci, xpcIsWindows,
- progIds = ['Msxml2.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.4.0'],
- xmlRegExp = /^\s*<\?xml(\s)+version=[\'\"](\d)*.(\d)*[\'\"](\s)*\?>/im,
- bodyRegExp = /]*>\s*([\s\S]+)\s*<\/body>/im,
- hasLocation = typeof location !== 'undefined' && location.href,
- defaultProtocol = hasLocation && location.protocol && location.protocol.replace(/\:/, ''),
- defaultHostName = hasLocation && location.hostname,
- defaultPort = hasLocation && (location.port || undefined),
- buildMap = {},
- masterConfig = (module.config && module.config()) || {};
-
- text = {
- version: '2.0.10',
-
- strip: function (content) {
- //Strips declarations so that external SVG and XML
- //documents can be added to a document without worry. Also, if the string
- //is an HTML document, only the part inside the body tag is returned.
- if (content) {
- content = content.replace(xmlRegExp, "");
- var matches = content.match(bodyRegExp);
- if (matches) {
- content = matches[1];
- }
- } else {
- content = "";
- }
- return content;
- },
-
- jsEscape: function (content) {
- return content.replace(/(['\\])/g, '\\$1')
- .replace(/[\f]/g, "\\f")
- .replace(/[\b]/g, "\\b")
- .replace(/[\n]/g, "\\n")
- .replace(/[\t]/g, "\\t")
- .replace(/[\r]/g, "\\r")
- .replace(/[\u2028]/g, "\\u2028")
- .replace(/[\u2029]/g, "\\u2029");
- },
-
- createXhr: masterConfig.createXhr || function () {
- //Would love to dump the ActiveX crap in here. Need IE 6 to die first.
- var xhr, i, progId;
- if (typeof XMLHttpRequest !== "undefined") {
- return new XMLHttpRequest();
- } else if (typeof ActiveXObject !== "undefined") {
- for (i = 0; i < 3; i += 1) {
- progId = progIds[i];
- try {
- xhr = new ActiveXObject(progId);
- } catch (e) {}
-
- if (xhr) {
- progIds = [progId]; // so faster next time
- break;
- }
- }
- }
-
- return xhr;
- },
-
- /**
- * Parses a resource name into its component parts. Resource names
- * look like: module/name.ext!strip, where the !strip part is
- * optional.
- * @param {String} name the resource name
- * @returns {Object} with properties "moduleName", "ext" and "strip"
- * where strip is a boolean.
- */
- parseName: function (name) {
- var modName, ext, temp,
- strip = false,
- index = name.indexOf("."),
- isRelative = name.indexOf('./') === 0 ||
- name.indexOf('../') === 0;
-
- if (index !== -1 && (!isRelative || index > 1)) {
- modName = name.substring(0, index);
- ext = name.substring(index + 1, name.length);
- } else {
- modName = name;
- }
-
- temp = ext || modName;
- index = temp.indexOf("!");
- if (index !== -1) {
- //Pull off the strip arg.
- strip = temp.substring(index + 1) === "strip";
- temp = temp.substring(0, index);
- if (ext) {
- ext = temp;
- } else {
- modName = temp;
- }
- }
-
- return {
- moduleName: modName,
- ext: ext,
- strip: strip
- };
- },
-
- xdRegExp: /^((\w+)\:)?\/\/([^\/\\]+)/,
-
- /**
- * Is an URL on another domain. Only works for browser use, returns
- * false in non-browser environments. Only used to know if an
- * optimized .js version of a text resource should be loaded
- * instead.
- * @param {String} url
- * @returns Boolean
- */
- useXhr: function (url, protocol, hostname, port) {
- var uProtocol, uHostName, uPort,
- match = text.xdRegExp.exec(url);
- if (!match) {
- return true;
- }
- uProtocol = match[2];
- uHostName = match[3];
-
- uHostName = uHostName.split(':');
- uPort = uHostName[1];
- uHostName = uHostName[0];
-
- return (!uProtocol || uProtocol === protocol) &&
- (!uHostName || uHostName.toLowerCase() === hostname.toLowerCase()) &&
- ((!uPort && !uHostName) || uPort === port);
- },
-
- finishLoad: function (name, strip, content, onLoad) {
- content = strip ? text.strip(content) : content;
- if (masterConfig.isBuild) {
- buildMap[name] = content;
- }
- onLoad(content);
- },
-
- load: function (name, req, onLoad, config) {
- //Name has format: some.module.filext!strip
- //The strip part is optional.
- //if strip is present, then that means only get the string contents
- //inside a body tag in an HTML string. For XML/SVG content it means
- //removing the declarations so the content can be inserted
- //into the current doc without problems.
-
- // Do not bother with the work if a build and text will
- // not be inlined.
- if (config.isBuild && !config.inlineText) {
- onLoad();
- return;
- }
-
- masterConfig.isBuild = config.isBuild;
-
- var parsed = text.parseName(name),
- nonStripName = parsed.moduleName +
- (parsed.ext ? '.' + parsed.ext : ''),
- url = req.toUrl(nonStripName),
- useXhr = (masterConfig.useXhr) ||
- text.useXhr;
-
- // Do not load if it is an empty: url
- if (url.indexOf('empty:') === 0) {
- onLoad();
- return;
- }
-
- //Load the text. Use XHR if possible and in a browser.
- if (!hasLocation || useXhr(url, defaultProtocol, defaultHostName, defaultPort)) {
- text.get(url, function (content) {
- text.finishLoad(name, parsed.strip, content, onLoad);
- }, function (err) {
- if (onLoad.error) {
- onLoad.error(err);
- }
- });
- } else {
- //Need to fetch the resource across domains. Assume
- //the resource has been optimized into a JS module. Fetch
- //by the module name + extension, but do not include the
- //!strip part to avoid file system issues.
- req([nonStripName], function (content) {
- text.finishLoad(parsed.moduleName + '.' + parsed.ext,
- parsed.strip, content, onLoad);
- });
- }
- },
-
- write: function (pluginName, moduleName, write, config) {
- if (buildMap.hasOwnProperty(moduleName)) {
- var content = text.jsEscape(buildMap[moduleName]);
- write.asModule(pluginName + "!" + moduleName,
- "define(function () { return '" +
- content +
- "';});\n");
- }
- },
-
- writeFile: function (pluginName, moduleName, req, write, config) {
- var parsed = text.parseName(moduleName),
- extPart = parsed.ext ? '.' + parsed.ext : '',
- nonStripName = parsed.moduleName + extPart,
- //Use a '.js' file name so that it indicates it is a
- //script that can be loaded across domains.
- fileName = req.toUrl(parsed.moduleName + extPart) + '.js';
-
- //Leverage own load() method to load plugin value, but only
- //write out values that do not have the strip argument,
- //to avoid any potential issues with ! in file names.
- text.load(nonStripName, req, function (value) {
- //Use own write() method to construct full module value.
- //But need to create shell that translates writeFile's
- //write() to the right interface.
- var textWrite = function (contents) {
- return write(fileName, contents);
- };
- textWrite.asModule = function (moduleName, contents) {
- return write.asModule(moduleName, fileName, contents);
- };
-
- text.write(pluginName, nonStripName, textWrite, config);
- }, config);
- }
- };
-
- if (masterConfig.env === 'node' || (!masterConfig.env &&
- typeof process !== "undefined" &&
- process.versions &&
- !!process.versions.node &&
- !process.versions['node-webkit'])) {
- //Using special require.nodeRequire, something added by r.js.
- fs = require.nodeRequire('fs');
-
- text.get = function (url, callback, errback) {
- try {
- var file = fs.readFileSync(url, 'utf8');
- //Remove BOM (Byte Mark Order) from utf8 files if it is there.
- if (file.indexOf('\uFEFF') === 0) {
- file = file.substring(1);
- }
- callback(file);
- } catch (e) {
- errback(e);
- }
- };
- } else if (masterConfig.env === 'xhr' || (!masterConfig.env &&
- text.createXhr())) {
- text.get = function (url, callback, errback, headers) {
- var xhr = text.createXhr(), header;
- xhr.open('GET', url, true);
-
- //Allow plugins direct access to xhr headers
- if (headers) {
- for (header in headers) {
- if (headers.hasOwnProperty(header)) {
- xhr.setRequestHeader(header.toLowerCase(), headers[header]);
- }
- }
- }
-
- //Allow overrides specified in config
- if (masterConfig.onXhr) {
- masterConfig.onXhr(xhr, url);
- }
-
- xhr.onreadystatechange = function (evt) {
- var status, err;
- //Do not explicitly handle errors, those should be
- //visible via console output in the browser.
- if (xhr.readyState === 4) {
- status = xhr.status;
- if (status > 399 && status < 600) {
- //An http 4xx or 5xx error. Signal an error.
- err = new Error(url + ' HTTP status: ' + status);
- err.xhr = xhr;
- errback(err);
- } else {
- callback(xhr.responseText);
- }
-
- if (masterConfig.onXhrComplete) {
- masterConfig.onXhrComplete(xhr, url);
- }
- }
- };
- xhr.send(null);
- };
- } else if (masterConfig.env === 'rhino' || (!masterConfig.env &&
- typeof Packages !== 'undefined' && typeof java !== 'undefined')) {
- //Why Java, why is this so awkward?
- text.get = function (url, callback) {
- var stringBuffer, line,
- encoding = "utf-8",
- file = new java.io.File(url),
- lineSeparator = java.lang.System.getProperty("line.separator"),
- input = new java.io.BufferedReader(new java.io.InputStreamReader(new java.io.FileInputStream(file), encoding)),
- content = '';
- try {
- stringBuffer = new java.lang.StringBuffer();
- line = input.readLine();
-
- // Byte Order Mark (BOM) - The Unicode Standard, version 3.0, page 324
- // http://www.unicode.org/faq/utf_bom.html
-
- // Note that when we use utf-8, the BOM should appear as "EF BB BF", but it doesn't due to this bug in the JDK:
- // http://bugs.sun.com/bugdatabase/view_bug.do?bug_id=4508058
- if (line && line.length() && line.charAt(0) === 0xfeff) {
- // Eat the BOM, since we've already found the encoding on this file,
- // and we plan to concatenating this buffer with others; the BOM should
- // only appear at the top of a file.
- line = line.substring(1);
- }
-
- if (line !== null) {
- stringBuffer.append(line);
- }
-
- while ((line = input.readLine()) !== null) {
- stringBuffer.append(lineSeparator);
- stringBuffer.append(line);
- }
- //Make sure we return a JavaScript string and not a Java string.
- content = String(stringBuffer.toString()); //String
- } finally {
- input.close();
- }
- callback(content);
- };
- } else if (masterConfig.env === 'xpconnect' || (!masterConfig.env &&
- typeof Components !== 'undefined' && Components.classes &&
- Components.interfaces)) {
- //Avert your gaze!
- Cc = Components.classes,
- Ci = Components.interfaces;
- Components.utils['import']('resource://gre/modules/FileUtils.jsm');
- xpcIsWindows = ('@mozilla.org/windows-registry-key;1' in Cc);
-
- text.get = function (url, callback) {
- var inStream, convertStream, fileObj,
- readData = {};
-
- if (xpcIsWindows) {
- url = url.replace(/\//g, '\\');
- }
-
- fileObj = new FileUtils.File(url);
-
- //XPCOM, you so crazy
- try {
- inStream = Cc['@mozilla.org/network/file-input-stream;1']
- .createInstance(Ci.nsIFileInputStream);
- inStream.init(fileObj, 1, 0, false);
-
- convertStream = Cc['@mozilla.org/intl/converter-input-stream;1']
- .createInstance(Ci.nsIConverterInputStream);
- convertStream.init(inStream, "utf-8", inStream.available(),
- Ci.nsIConverterInputStream.DEFAULT_REPLACEMENT_CHARACTER);
-
- convertStream.readString(inStream.available(), readData);
- convertStream.close();
- inStream.close();
- callback(readData.value);
- } catch (e) {
- throw new Error((fileObj && fileObj.path || '') + ': ' + e);
- }
- };
- }
- return text;
-});
-
-
-define('text!tpl/search.html',[],function () { return 'search \n\n\n';});
-
-
-define('text!tpl/search_suggestion.html',[],function () { return '\n\n <%=name%> \n\n \n <% if (final) { %>\n constant\n <% } else if (itemtype) { %>\n <%=itemtype%> \n <% } %>\n\n <% if (className) { %>\n in <%=className%> \n <% } %>\n\n <% if (typeof is_constructor !== \'undefined\' && is_constructor) { %>\n constructor \n <% } %>\n \n\n
';});
-
-/*!
- * typeahead.js 0.10.2
- * https://github.com/twitter/typeahead.js
- * Copyright 2013-2014 Twitter, Inc. and other contributors; Licensed MIT
- */
-define('typeahead',[], function() {
-
-//(function($) {
-
-
- var _ = {
- isMsie: function() {
- return /(msie|trident)/i.test(navigator.userAgent) ? navigator.userAgent.match(/(msie |rv:)(\d+(.\d+)?)/i)[2] : false;
- },
- isBlankString: function(str) {
- return !str || /^\s*$/.test(str);
- },
- escapeRegExChars: function(str) {
- return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
- },
- isString: function(obj) {
- return typeof obj === "string";
- },
- isNumber: function(obj) {
- return typeof obj === "number";
- },
- isArray: $.isArray,
- isFunction: $.isFunction,
- isObject: $.isPlainObject,
- isUndefined: function(obj) {
- return typeof obj === "undefined";
- },
- bind: $.proxy,
- each: function(collection, cb) {
- $.each(collection, reverseArgs);
- function reverseArgs(index, value) {
- return cb(value, index);
- }
- },
- map: $.map,
- filter: $.grep,
- every: function(obj, test) {
- var result = true;
- if (!obj) {
- return result;
- }
- $.each(obj, function(key, val) {
- if (!(result = test.call(null, val, key, obj))) {
- return false;
- }
- });
- return !!result;
- },
- some: function(obj, test) {
- var result = false;
- if (!obj) {
- return result;
- }
- $.each(obj, function(key, val) {
- if (result = test.call(null, val, key, obj)) {
- return false;
- }
- });
- return !!result;
- },
- mixin: $.extend,
- getUniqueId: function() {
- var counter = 0;
- return function() {
- return counter++;
- };
- }(),
- templatify: function templatify(obj) {
- return $.isFunction(obj) ? obj : template;
- function template() {
- return String(obj);
- }
- },
- defer: function(fn) {
- setTimeout(fn, 0);
- },
- debounce: function(func, wait, immediate) {
- var timeout, result;
- return function() {
- var context = this, args = arguments, later, callNow;
- later = function() {
- timeout = null;
- if (!immediate) {
- result = func.apply(context, args);
- }
- };
- callNow = immediate && !timeout;
- clearTimeout(timeout);
- timeout = setTimeout(later, wait);
- if (callNow) {
- result = func.apply(context, args);
- }
- return result;
- };
- },
- throttle: function(func, wait) {
- var context, args, timeout, result, previous, later;
- previous = 0;
- later = function() {
- previous = new Date();
- timeout = null;
- result = func.apply(context, args);
- };
- return function() {
- var now = new Date(), remaining = wait - (now - previous);
- context = this;
- args = arguments;
- if (remaining <= 0) {
- clearTimeout(timeout);
- timeout = null;
- previous = now;
- result = func.apply(context, args);
- } else if (!timeout) {
- timeout = setTimeout(later, remaining);
- }
- return result;
- };
- },
- noop: function() {}
- };
- var VERSION = "0.10.2";
- var tokenizers = function(root) {
- return {
- nonword: nonword,
- whitespace: whitespace,
- obj: {
- nonword: getObjTokenizer(nonword),
- whitespace: getObjTokenizer(whitespace)
- }
- };
- function whitespace(s) {
- return s.split(/\s+/);
- }
- function nonword(s) {
- return s.split(/\W+/);
- }
- function getObjTokenizer(tokenizer) {
- return function setKey(key) {
- return function tokenize(o) {
- return tokenizer(o[key]);
- };
- };
- }
- }();
- var LruCache = function() {
- function LruCache(maxSize) {
- this.maxSize = maxSize || 100;
- this.size = 0;
- this.hash = {};
- this.list = new List();
- }
- _.mixin(LruCache.prototype, {
- set: function set(key, val) {
- var tailItem = this.list.tail, node;
- if (this.size >= this.maxSize) {
- this.list.remove(tailItem);
- delete this.hash[tailItem.key];
- }
- if (node = this.hash[key]) {
- node.val = val;
- this.list.moveToFront(node);
- } else {
- node = new Node(key, val);
- this.list.add(node);
- this.hash[key] = node;
- this.size++;
- }
- },
- get: function get(key) {
- var node = this.hash[key];
- if (node) {
- this.list.moveToFront(node);
- return node.val;
- }
- }
- });
- function List() {
- this.head = this.tail = null;
- }
- _.mixin(List.prototype, {
- add: function add(node) {
- if (this.head) {
- node.next = this.head;
- this.head.prev = node;
- }
- this.head = node;
- this.tail = this.tail || node;
- },
- remove: function remove(node) {
- node.prev ? node.prev.next = node.next : this.head = node.next;
- node.next ? node.next.prev = node.prev : this.tail = node.prev;
- },
- moveToFront: function(node) {
- this.remove(node);
- this.add(node);
- }
- });
- function Node(key, val) {
- this.key = key;
- this.val = val;
- this.prev = this.next = null;
- }
- return LruCache;
- }();
- var PersistentStorage = function() {
- var ls, methods;
- try {
- ls = window.localStorage;
- ls.setItem("~~~", "!");
- ls.removeItem("~~~");
- } catch (err) {
- ls = null;
- }
- function PersistentStorage(namespace) {
- this.prefix = [ "__", namespace, "__" ].join("");
- this.ttlKey = "__ttl__";
- this.keyMatcher = new RegExp("^" + this.prefix);
- }
- if (ls && window.JSON) {
- methods = {
- _prefix: function(key) {
- return this.prefix + key;
- },
- _ttlKey: function(key) {
- return this._prefix(key) + this.ttlKey;
- },
- get: function(key) {
- if (this.isExpired(key)) {
- this.remove(key);
- }
- return decode(ls.getItem(this._prefix(key)));
- },
- set: function(key, val, ttl) {
- if (_.isNumber(ttl)) {
- ls.setItem(this._ttlKey(key), encode(now() + ttl));
- } else {
- ls.removeItem(this._ttlKey(key));
- }
- return ls.setItem(this._prefix(key), encode(val));
- },
- remove: function(key) {
- ls.removeItem(this._ttlKey(key));
- ls.removeItem(this._prefix(key));
- return this;
- },
- clear: function() {
- var i, key, keys = [], len = ls.length;
- for (i = 0; i < len; i++) {
- if ((key = ls.key(i)).match(this.keyMatcher)) {
- keys.push(key.replace(this.keyMatcher, ""));
- }
- }
- for (i = keys.length; i--; ) {
- this.remove(keys[i]);
- }
- return this;
- },
- isExpired: function(key) {
- var ttl = decode(ls.getItem(this._ttlKey(key)));
- return _.isNumber(ttl) && now() > ttl ? true : false;
- }
- };
- } else {
- methods = {
- get: _.noop,
- set: _.noop,
- remove: _.noop,
- clear: _.noop,
- isExpired: _.noop
- };
- }
- _.mixin(PersistentStorage.prototype, methods);
- return PersistentStorage;
- function now() {
- return new Date().getTime();
- }
- function encode(val) {
- return JSON.stringify(_.isUndefined(val) ? null : val);
- }
- function decode(val) {
- return JSON.parse(val);
- }
- }();
- var Transport = function() {
- var pendingRequestsCount = 0, pendingRequests = {}, maxPendingRequests = 6, requestCache = new LruCache(10);
- function Transport(o) {
- o = o || {};
- this._send = o.transport ? callbackToDeferred(o.transport) : $.ajax;
- this._get = o.rateLimiter ? o.rateLimiter(this._get) : this._get;
- }
- Transport.setMaxPendingRequests = function setMaxPendingRequests(num) {
- maxPendingRequests = num;
- };
- Transport.resetCache = function clearCache() {
- requestCache = new LruCache(10);
- };
- _.mixin(Transport.prototype, {
- _get: function(url, o, cb) {
- var that = this, jqXhr;
- if (jqXhr = pendingRequests[url]) {
- jqXhr.done(done).fail(fail);
- } else if (pendingRequestsCount < maxPendingRequests) {
- pendingRequestsCount++;
- pendingRequests[url] = this._send(url, o).done(done).fail(fail).always(always);
- } else {
- this.onDeckRequestArgs = [].slice.call(arguments, 0);
- }
- function done(resp) {
- cb && cb(null, resp);
- requestCache.set(url, resp);
- }
- function fail() {
- cb && cb(true);
- }
- function always() {
- pendingRequestsCount--;
- delete pendingRequests[url];
- if (that.onDeckRequestArgs) {
- that._get.apply(that, that.onDeckRequestArgs);
- that.onDeckRequestArgs = null;
- }
- }
- },
- get: function(url, o, cb) {
- var resp;
- if (_.isFunction(o)) {
- cb = o;
- o = {};
- }
- if (resp = requestCache.get(url)) {
- _.defer(function() {
- cb && cb(null, resp);
- });
- } else {
- this._get(url, o, cb);
- }
- return !!resp;
- }
- });
- return Transport;
- function callbackToDeferred(fn) {
- return function customSendWrapper(url, o) {
- var deferred = $.Deferred();
- fn(url, o, onSuccess, onError);
- return deferred;
- function onSuccess(resp) {
- _.defer(function() {
- deferred.resolve(resp);
- });
- }
- function onError(err) {
- _.defer(function() {
- deferred.reject(err);
- });
- }
- };
- }
- }();
- var SearchIndex = function() {
- function SearchIndex(o) {
- o = o || {};
- if (!o.datumTokenizer || !o.queryTokenizer) {
- $.error("datumTokenizer and queryTokenizer are both required");
- }
- this.datumTokenizer = o.datumTokenizer;
- this.queryTokenizer = o.queryTokenizer;
- this.reset();
- }
- _.mixin(SearchIndex.prototype, {
- bootstrap: function bootstrap(o) {
- this.datums = o.datums;
- this.trie = o.trie;
- },
- add: function(data) {
- var that = this;
- data = _.isArray(data) ? data : [ data ];
- _.each(data, function(datum) {
- var id, tokens;
- id = that.datums.push(datum) - 1;
- tokens = normalizeTokens(that.datumTokenizer(datum));
- _.each(tokens, function(token) {
- var node, chars, ch;
- node = that.trie;
- chars = token.split("");
- while (ch = chars.shift()) {
- node = node.children[ch] || (node.children[ch] = newNode());
- node.ids.push(id);
- }
- });
- });
- },
- get: function get(query) {
- var that = this, tokens, matches;
- tokens = normalizeTokens(this.queryTokenizer(query));
- _.each(tokens, function(token) {
- var node, chars, ch, ids;
- if (matches && matches.length === 0) {
- return false;
- }
- node = that.trie;
- chars = token.split("");
- while (node && (ch = chars.shift())) {
- node = node.children[ch];
- }
- if (node && chars.length === 0) {
- ids = node.ids.slice(0);
- matches = matches ? getIntersection(matches, ids) : ids;
- } else {
- matches = [];
- return false;
- }
- });
- return matches ? _.map(unique(matches), function(id) {
- return that.datums[id];
- }) : [];
- },
- reset: function reset() {
- this.datums = [];
- this.trie = newNode();
- },
- serialize: function serialize() {
- return {
- datums: this.datums,
- trie: this.trie
- };
- }
- });
- return SearchIndex;
- function normalizeTokens(tokens) {
- tokens = _.filter(tokens, function(token) {
- return !!token;
- });
- tokens = _.map(tokens, function(token) {
- return token.toLowerCase();
- });
- return tokens;
- }
- function newNode() {
- return {
- ids: [],
- children: {}
- };
- }
- function unique(array) {
- var seen = {}, uniques = [];
- for (var i = 0; i < array.length; i++) {
- if (!seen[array[i]]) {
- seen[array[i]] = true;
- uniques.push(array[i]);
- }
- }
- return uniques;
- }
- function getIntersection(arrayA, arrayB) {
- var ai = 0, bi = 0, intersection = [];
- arrayA = arrayA.sort(compare);
- arrayB = arrayB.sort(compare);
- while (ai < arrayA.length && bi < arrayB.length) {
- if (arrayA[ai] < arrayB[bi]) {
- ai++;
- } else if (arrayA[ai] > arrayB[bi]) {
- bi++;
- } else {
- intersection.push(arrayA[ai]);
- ai++;
- bi++;
- }
- }
- return intersection;
- function compare(a, b) {
- return a - b;
- }
- }
- }();
- var oParser = function() {
- return {
- local: getLocal,
- prefetch: getPrefetch,
- remote: getRemote
- };
- function getLocal(o) {
- return o.local || null;
- }
- function getPrefetch(o) {
- var prefetch, defaults;
- defaults = {
- url: null,
- thumbprint: "",
- ttl: 24 * 60 * 60 * 1e3,
- filter: null,
- ajax: {}
- };
- if (prefetch = o.prefetch || null) {
- prefetch = _.isString(prefetch) ? {
- url: prefetch
- } : prefetch;
- prefetch = _.mixin(defaults, prefetch);
- prefetch.thumbprint = VERSION + prefetch.thumbprint;
- prefetch.ajax.type = prefetch.ajax.type || "GET";
- prefetch.ajax.dataType = prefetch.ajax.dataType || "json";
- !prefetch.url && $.error("prefetch requires url to be set");
- }
- return prefetch;
- }
- function getRemote(o) {
- var remote, defaults;
- defaults = {
- url: null,
- wildcard: "%QUERY",
- replace: null,
- rateLimitBy: "debounce",
- rateLimitWait: 300,
- send: null,
- filter: null,
- ajax: {}
- };
- if (remote = o.remote || null) {
- remote = _.isString(remote) ? {
- url: remote
- } : remote;
- remote = _.mixin(defaults, remote);
- remote.rateLimiter = /^throttle$/i.test(remote.rateLimitBy) ? byThrottle(remote.rateLimitWait) : byDebounce(remote.rateLimitWait);
- remote.ajax.type = remote.ajax.type || "GET";
- remote.ajax.dataType = remote.ajax.dataType || "json";
- delete remote.rateLimitBy;
- delete remote.rateLimitWait;
- !remote.url && $.error("remote requires url to be set");
- }
- return remote;
- function byDebounce(wait) {
- return function(fn) {
- return _.debounce(fn, wait);
- };
- }
- function byThrottle(wait) {
- return function(fn) {
- return _.throttle(fn, wait);
- };
- }
- }
- }();
- (function(root) {
- var old, keys;
- old = root.Bloodhound;
- keys = {
- data: "data",
- protocol: "protocol",
- thumbprint: "thumbprint"
- };
- root.Bloodhound = Bloodhound;
- function Bloodhound(o) {
- if (!o || !o.local && !o.prefetch && !o.remote) {
- $.error("one of local, prefetch, or remote is required");
- }
- this.limit = o.limit || 5;
- this.sorter = getSorter(o.sorter);
- this.dupDetector = o.dupDetector || ignoreDuplicates;
- this.local = oParser.local(o);
- this.prefetch = oParser.prefetch(o);
- this.remote = oParser.remote(o);
- this.cacheKey = this.prefetch ? this.prefetch.cacheKey || this.prefetch.url : null;
- this.index = new SearchIndex({
- datumTokenizer: o.datumTokenizer,
- queryTokenizer: o.queryTokenizer
- });
- this.storage = this.cacheKey ? new PersistentStorage(this.cacheKey) : null;
- }
- Bloodhound.noConflict = function noConflict() {
- root.Bloodhound = old;
- return Bloodhound;
- };
- Bloodhound.tokenizers = tokenizers;
- _.mixin(Bloodhound.prototype, {
- _loadPrefetch: function loadPrefetch(o) {
- var that = this, serialized, deferred;
- if (serialized = this._readFromStorage(o.thumbprint)) {
- this.index.bootstrap(serialized);
- deferred = $.Deferred().resolve();
- } else {
- deferred = $.ajax(o.url, o.ajax).done(handlePrefetchResponse);
- }
- return deferred;
- function handlePrefetchResponse(resp) {
- that.clear();
- that.add(o.filter ? o.filter(resp) : resp);
- that._saveToStorage(that.index.serialize(), o.thumbprint, o.ttl);
- }
- },
- _getFromRemote: function getFromRemote(query, cb) {
- var that = this, url, uriEncodedQuery;
- query = query || "";
- uriEncodedQuery = encodeURIComponent(query);
- url = this.remote.replace ? this.remote.replace(this.remote.url, query) : this.remote.url.replace(this.remote.wildcard, uriEncodedQuery);
- return this.transport.get(url, this.remote.ajax, handleRemoteResponse);
- function handleRemoteResponse(err, resp) {
- err ? cb([]) : cb(that.remote.filter ? that.remote.filter(resp) : resp);
- }
- },
- _saveToStorage: function saveToStorage(data, thumbprint, ttl) {
- if (this.storage) {
- this.storage.set(keys.data, data, ttl);
- this.storage.set(keys.protocol, location.protocol, ttl);
- this.storage.set(keys.thumbprint, thumbprint, ttl);
- }
- },
- _readFromStorage: function readFromStorage(thumbprint) {
- var stored = {}, isExpired;
- if (this.storage) {
- stored.data = this.storage.get(keys.data);
- stored.protocol = this.storage.get(keys.protocol);
- stored.thumbprint = this.storage.get(keys.thumbprint);
- }
- isExpired = stored.thumbprint !== thumbprint || stored.protocol !== location.protocol;
- return stored.data && !isExpired ? stored.data : null;
- },
- _initialize: function initialize() {
- var that = this, local = this.local, deferred;
- deferred = this.prefetch ? this._loadPrefetch(this.prefetch) : $.Deferred().resolve();
- local && deferred.done(addLocalToIndex);
- this.transport = this.remote ? new Transport(this.remote) : null;
- return this.initPromise = deferred.promise();
- function addLocalToIndex() {
- that.add(_.isFunction(local) ? local() : local);
- }
- },
- initialize: function initialize(force) {
- return !this.initPromise || force ? this._initialize() : this.initPromise;
- },
- add: function add(data) {
- this.index.add(data);
- },
- get: function get(query, cb) {
- var that = this, matches = [], cacheHit = false;
- matches = this.index.get(query);
- matches = this.sorter(matches).slice(0, this.limit);
- if (matches.length < this.limit && this.transport) {
- cacheHit = this._getFromRemote(query, returnRemoteMatches);
- }
- if (!cacheHit) {
- (matches.length > 0 || !this.transport) && cb && cb(matches);
- }
- function returnRemoteMatches(remoteMatches) {
- var matchesWithBackfill = matches.slice(0);
- _.each(remoteMatches, function(remoteMatch) {
- var isDuplicate;
- isDuplicate = _.some(matchesWithBackfill, function(match) {
- return that.dupDetector(remoteMatch, match);
- });
- !isDuplicate && matchesWithBackfill.push(remoteMatch);
- return matchesWithBackfill.length < that.limit;
- });
- cb && cb(that.sorter(matchesWithBackfill));
- }
- },
- clear: function clear() {
- this.index.reset();
- },
- clearPrefetchCache: function clearPrefetchCache() {
- this.storage && this.storage.clear();
- },
- clearRemoteCache: function clearRemoteCache() {
- this.transport && Transport.resetCache();
- },
- ttAdapter: function ttAdapter() {
- return _.bind(this.get, this);
- }
- });
- return Bloodhound;
- function getSorter(sortFn) {
- return _.isFunction(sortFn) ? sort : noSort;
- function sort(array) {
- return array.sort(sortFn);
- }
- function noSort(array) {
- return array;
- }
- }
- function ignoreDuplicates() {
- return false;
- }
- })(this);
- var html = {
- wrapper: '',
- dropdown: '',
- dataset: '
',
- suggestions: ' ',
- suggestion: '
'
- };
- var css = {
- wrapper: {
- position: "relative",
- display: "inline-block"
- },
- hint: {
- position: "absolute",
- top: "0",
- left: "0",
- borderColor: "transparent",
- boxShadow: "none"
- },
- input: {
- position: "relative",
- verticalAlign: "top",
- backgroundColor: "transparent"
- },
- inputWithNoHint: {
- position: "relative",
- verticalAlign: "top"
- },
- dropdown: {
- position: "absolute",
- top: "100%",
- left: "0",
- zIndex: "100",
- display: "none"
- },
- suggestions: {
- display: "block"
- },
- suggestion: {
- whiteSpace: "nowrap",
- cursor: "pointer"
- },
- suggestionChild: {
- whiteSpace: "normal"
- },
- ltr: {
- left: "0",
- right: "auto"
- },
- rtl: {
- left: "auto",
- right: " 0"
- }
- };
- if (_.isMsie()) {
- _.mixin(css.input, {
- backgroundImage: "url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)"
- });
- }
- if (_.isMsie() && _.isMsie() <= 7) {
- _.mixin(css.input, {
- marginTop: "-1px"
- });
- }
- var EventBus = function() {
- var namespace = "typeahead:";
- function EventBus(o) {
- if (!o || !o.el) {
- $.error("EventBus initialized without el");
- }
- this.$el = $(o.el);
- }
- _.mixin(EventBus.prototype, {
- trigger: function(type) {
- var args = [].slice.call(arguments, 1);
- this.$el.trigger(namespace + type, args);
- }
- });
- return EventBus;
- }();
- var EventEmitter = function() {
- var splitter = /\s+/, nextTick = getNextTick();
- return {
- onSync: onSync,
- onAsync: onAsync,
- off: off,
- trigger: trigger
- };
- function on(method, types, cb, context) {
- var type;
- if (!cb) {
- return this;
- }
- types = types.split(splitter);
- cb = context ? bindContext(cb, context) : cb;
- this._callbacks = this._callbacks || {};
- while (type = types.shift()) {
- this._callbacks[type] = this._callbacks[type] || {
- sync: [],
- async: []
- };
- this._callbacks[type][method].push(cb);
- }
- return this;
- }
- function onAsync(types, cb, context) {
- return on.call(this, "async", types, cb, context);
- }
- function onSync(types, cb, context) {
- return on.call(this, "sync", types, cb, context);
- }
- function off(types) {
- var type;
- if (!this._callbacks) {
- return this;
- }
- types = types.split(splitter);
- while (type = types.shift()) {
- delete this._callbacks[type];
- }
- return this;
- }
- function trigger(types) {
- var type, callbacks, args, syncFlush, asyncFlush;
- if (!this._callbacks) {
- return this;
- }
- types = types.split(splitter);
- args = [].slice.call(arguments, 1);
- while ((type = types.shift()) && (callbacks = this._callbacks[type])) {
- syncFlush = getFlush(callbacks.sync, this, [ type ].concat(args));
- asyncFlush = getFlush(callbacks.async, this, [ type ].concat(args));
- syncFlush() && nextTick(asyncFlush);
- }
- return this;
- }
- function getFlush(callbacks, context, args) {
- return flush;
- function flush() {
- var cancelled;
- for (var i = 0; !cancelled && i < callbacks.length; i += 1) {
- cancelled = callbacks[i].apply(context, args) === false;
- }
- return !cancelled;
- }
- }
- function getNextTick() {
- var nextTickFn;
- if (window.setImmediate) {
- nextTickFn = function nextTickSetImmediate(fn) {
- setImmediate(function() {
- fn();
- });
- };
- } else {
- nextTickFn = function nextTickSetTimeout(fn) {
- setTimeout(function() {
- fn();
- }, 0);
- };
- }
- return nextTickFn;
- }
- function bindContext(fn, context) {
- return fn.bind ? fn.bind(context) : function() {
- fn.apply(context, [].slice.call(arguments, 0));
- };
- }
- }();
- var highlight = function(doc) {
- var defaults = {
- node: null,
- pattern: null,
- tagName: "strong",
- className: null,
- wordsOnly: false,
- caseSensitive: false
- };
- return function hightlight(o) {
- var regex;
- o = _.mixin({}, defaults, o);
- if (!o.node || !o.pattern) {
- return;
- }
- o.pattern = _.isArray(o.pattern) ? o.pattern : [ o.pattern ];
- regex = getRegex(o.pattern, o.caseSensitive, o.wordsOnly);
- traverse(o.node, hightlightTextNode);
- function hightlightTextNode(textNode) {
- var match, patternNode;
- if (match = regex.exec(textNode.data)) {
- wrapperNode = doc.createElement(o.tagName);
- o.className && (wrapperNode.className = o.className);
- patternNode = textNode.splitText(match.index);
- patternNode.splitText(match[0].length);
- wrapperNode.appendChild(patternNode.cloneNode(true));
- textNode.parentNode.replaceChild(wrapperNode, patternNode);
- }
- return !!match;
- }
- function traverse(el, hightlightTextNode) {
- var childNode, TEXT_NODE_TYPE = 3;
- for (var i = 0; i < el.childNodes.length; i++) {
- childNode = el.childNodes[i];
- if (childNode.nodeType === TEXT_NODE_TYPE) {
- i += hightlightTextNode(childNode) ? 1 : 0;
- } else {
- traverse(childNode, hightlightTextNode);
- }
- }
- }
- };
- function getRegex(patterns, caseSensitive, wordsOnly) {
- var escapedPatterns = [], regexStr;
- for (var i = 0; i < patterns.length; i++) {
- escapedPatterns.push(_.escapeRegExChars(patterns[i]));
- }
- regexStr = wordsOnly ? "\\b(" + escapedPatterns.join("|") + ")\\b" : "(" + escapedPatterns.join("|") + ")";
- return caseSensitive ? new RegExp(regexStr) : new RegExp(regexStr, "i");
- }
- }(window.document);
- var Input = function() {
- var specialKeyCodeMap;
- specialKeyCodeMap = {
- 9: "tab",
- 27: "esc",
- 37: "left",
- 39: "right",
- 13: "enter",
- 38: "up",
- 40: "down"
- };
- function Input(o) {
- var that = this, onBlur, onFocus, onKeydown, onInput;
- o = o || {};
- if (!o.input) {
- $.error("input is missing");
- }
- onBlur = _.bind(this._onBlur, this);
- onFocus = _.bind(this._onFocus, this);
- onKeydown = _.bind(this._onKeydown, this);
- onInput = _.bind(this._onInput, this);
- this.$hint = $(o.hint);
- this.$input = $(o.input).on("blur.tt", onBlur).on("focus.tt", onFocus).on("keydown.tt", onKeydown);
- if (this.$hint.length === 0) {
- this.setHint = this.getHint = this.clearHint = this.clearHintIfInvalid = _.noop;
- }
- if (!_.isMsie()) {
- this.$input.on("input.tt", onInput);
- } else {
- this.$input.on("keydown.tt keypress.tt cut.tt paste.tt", function($e) {
- if (specialKeyCodeMap[$e.which || $e.keyCode]) {
- return;
- }
- _.defer(_.bind(that._onInput, that, $e));
- });
- }
- this.query = this.$input.val();
- this.$overflowHelper = buildOverflowHelper(this.$input);
- }
- Input.normalizeQuery = function(str) {
- return (str || "").replace(/^\s*/g, "").replace(/\s{2,}/g, " ");
- };
- _.mixin(Input.prototype, EventEmitter, {
- _onBlur: function onBlur() {
- this.resetInputValue();
- this.trigger("blurred");
- },
- _onFocus: function onFocus() {
- this.trigger("focused");
- },
- _onKeydown: function onKeydown($e) {
- var keyName = specialKeyCodeMap[$e.which || $e.keyCode];
- this._managePreventDefault(keyName, $e);
- if (keyName && this._shouldTrigger(keyName, $e)) {
- this.trigger(keyName + "Keyed", $e);
- }
- },
- _onInput: function onInput() {
- this._checkInputValue();
- },
- _managePreventDefault: function managePreventDefault(keyName, $e) {
- var preventDefault, hintValue, inputValue;
- switch (keyName) {
- case "tab":
- hintValue = this.getHint();
- inputValue = this.getInputValue();
- preventDefault = hintValue && hintValue !== inputValue && !withModifier($e);
- break;
-
- case "up":
- case "down":
- preventDefault = !withModifier($e);
- break;
-
- default:
- preventDefault = false;
- }
- preventDefault && $e.preventDefault();
- },
- _shouldTrigger: function shouldTrigger(keyName, $e) {
- var trigger;
- switch (keyName) {
- case "tab":
- trigger = !withModifier($e);
- break;
-
- default:
- trigger = true;
- }
- return trigger;
- },
- _checkInputValue: function checkInputValue() {
- var inputValue, areEquivalent, hasDifferentWhitespace;
- inputValue = this.getInputValue();
- areEquivalent = areQueriesEquivalent(inputValue, this.query);
- hasDifferentWhitespace = areEquivalent ? this.query.length !== inputValue.length : false;
- if (!areEquivalent) {
- this.trigger("queryChanged", this.query = inputValue);
- } else if (hasDifferentWhitespace) {
- this.trigger("whitespaceChanged", this.query);
- }
- },
- focus: function focus() {
- this.$input.focus();
- },
- blur: function blur() {
- this.$input.blur();
- },
- getQuery: function getQuery() {
- return this.query;
- },
- setQuery: function setQuery(query) {
- this.query = query;
- },
- getInputValue: function getInputValue() {
- return this.$input.val();
- },
- setInputValue: function setInputValue(value, silent) {
- this.$input.val(value);
- silent ? this.clearHint() : this._checkInputValue();
- },
- resetInputValue: function resetInputValue() {
- this.setInputValue(this.query, true);
- },
- getHint: function getHint() {
- return this.$hint.val();
- },
- setHint: function setHint(value) {
- this.$hint.val(value);
- },
- clearHint: function clearHint() {
- this.setHint("");
- },
- clearHintIfInvalid: function clearHintIfInvalid() {
- var val, hint, valIsPrefixOfHint, isValid;
- val = this.getInputValue();
- hint = this.getHint();
- valIsPrefixOfHint = val !== hint && hint.indexOf(val) === 0;
- isValid = val !== "" && valIsPrefixOfHint && !this.hasOverflow();
- !isValid && this.clearHint();
- },
- getLanguageDirection: function getLanguageDirection() {
- return (this.$input.css("direction") || "ltr").toLowerCase();
- },
- hasOverflow: function hasOverflow() {
- var constraint = this.$input.width() - 2;
- this.$overflowHelper.text(this.getInputValue());
- return this.$overflowHelper.width() >= constraint;
- },
- isCursorAtEnd: function() {
- var valueLength, selectionStart, range;
- valueLength = this.$input.val().length;
- selectionStart = this.$input[0].selectionStart;
- if (_.isNumber(selectionStart)) {
- return selectionStart === valueLength;
- } else if (document.selection) {
- range = document.selection.createRange();
- range.moveStart("character", -valueLength);
- return valueLength === range.text.length;
- }
- return true;
- },
- destroy: function destroy() {
- this.$hint.off(".tt");
- this.$input.off(".tt");
- this.$hint = this.$input = this.$overflowHelper = null;
- }
- });
- return Input;
- function buildOverflowHelper($input) {
- return $(' ').css({
- position: "absolute",
- visibility: "hidden",
- whiteSpace: "pre",
- fontFamily: $input.css("font-family"),
- fontSize: $input.css("font-size"),
- fontStyle: $input.css("font-style"),
- fontVariant: $input.css("font-variant"),
- fontWeight: $input.css("font-weight"),
- wordSpacing: $input.css("word-spacing"),
- letterSpacing: $input.css("letter-spacing"),
- textIndent: $input.css("text-indent"),
- textRendering: $input.css("text-rendering"),
- textTransform: $input.css("text-transform")
- }).insertAfter($input);
- }
- function areQueriesEquivalent(a, b) {
- return Input.normalizeQuery(a) === Input.normalizeQuery(b);
- }
- function withModifier($e) {
- return $e.altKey || $e.ctrlKey || $e.metaKey || $e.shiftKey;
- }
- }();
- var Dataset = function() {
- var datasetKey = "ttDataset", valueKey = "ttValue", datumKey = "ttDatum";
- function Dataset(o) {
- o = o || {};
- o.templates = o.templates || {};
- if (!o.source) {
- $.error("missing source");
- }
- if (o.name && !isValidName(o.name)) {
- $.error("invalid dataset name: " + o.name);
- }
- this.query = null;
- this.highlight = !!o.highlight;
- this.name = o.name || _.getUniqueId();
- this.source = o.source;
- this.displayFn = getDisplayFn(o.display || o.displayKey);
- this.templates = getTemplates(o.templates, this.displayFn);
- this.$el = $(html.dataset.replace("%CLASS%", this.name));
- }
- Dataset.extractDatasetName = function extractDatasetName(el) {
- return $(el).data(datasetKey);
- };
- Dataset.extractValue = function extractDatum(el) {
- return $(el).data(valueKey);
- };
- Dataset.extractDatum = function extractDatum(el) {
- return $(el).data(datumKey);
- };
- _.mixin(Dataset.prototype, EventEmitter, {
- _render: function render(query, suggestions) {
- if (!this.$el) {
- return;
- }
- var that = this, hasSuggestions;
- this.$el.empty();
- hasSuggestions = suggestions && suggestions.length;
- if (!hasSuggestions && this.templates.empty) {
- this.$el.html(getEmptyHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
- } else if (hasSuggestions) {
- this.$el.html(getSuggestionsHtml()).prepend(that.templates.header ? getHeaderHtml() : null).append(that.templates.footer ? getFooterHtml() : null);
- }
- this.trigger("rendered");
- function getEmptyHtml() {
- return that.templates.empty({
- query: query,
- isEmpty: true
- });
- }
- function getSuggestionsHtml() {
- var $suggestions, nodes;
- $suggestions = $(html.suggestions).css(css.suggestions);
- nodes = _.map(suggestions, getSuggestionNode);
- $suggestions.append.apply($suggestions, nodes);
- that.highlight && highlight({
- node: $suggestions[0],
- pattern: query
- });
- return $suggestions;
- function getSuggestionNode(suggestion) {
- var $el;
- $el = $(html.suggestion).append(that.templates.suggestion(suggestion)).data(datasetKey, that.name).data(valueKey, that.displayFn(suggestion)).data(datumKey, suggestion);
- $el.children().each(function() {
- $(this).css(css.suggestionChild);
- });
- return $el;
- }
- }
- function getHeaderHtml() {
- return that.templates.header({
- query: query,
- isEmpty: !hasSuggestions
- });
- }
- function getFooterHtml() {
- return that.templates.footer({
- query: query,
- isEmpty: !hasSuggestions
- });
- }
- },
- getRoot: function getRoot() {
- return this.$el;
- },
- update: function update(query) {
- var that = this;
- this.query = query;
- this.canceled = false;
- this.source(query, render);
- function render(suggestions) {
- if (!that.canceled && query === that.query) {
- that._render(query, suggestions);
- }
- }
- },
- cancel: function cancel() {
- this.canceled = true;
- },
- clear: function clear() {
- this.cancel();
- this.$el.empty();
- this.trigger("rendered");
- },
- isEmpty: function isEmpty() {
- return this.$el.is(":empty");
- },
- destroy: function destroy() {
- this.$el = null;
- }
- });
- return Dataset;
- function getDisplayFn(display) {
- display = display || "value";
- return _.isFunction(display) ? display : displayFn;
- function displayFn(obj) {
- return obj[display];
- }
- }
- function getTemplates(templates, displayFn) {
- return {
- empty: templates.empty && _.templatify(templates.empty),
- header: templates.header && _.templatify(templates.header),
- footer: templates.footer && _.templatify(templates.footer),
- suggestion: templates.suggestion || suggestionTemplate
- };
- function suggestionTemplate(context) {
- return "" + displayFn(context) + "
";
- }
- }
- function isValidName(str) {
- return /^[_a-zA-Z0-9-]+$/.test(str);
- }
- }();
- var Dropdown = function() {
- function Dropdown(o) {
- var that = this, onSuggestionClick, onSuggestionMouseEnter, onSuggestionMouseLeave;
- o = o || {};
- if (!o.menu) {
- $.error("menu is required");
- }
- this.isOpen = false;
- this.isEmpty = true;
- this.datasets = _.map(o.datasets, initializeDataset);
- onSuggestionClick = _.bind(this._onSuggestionClick, this);
- onSuggestionMouseEnter = _.bind(this._onSuggestionMouseEnter, this);
- onSuggestionMouseLeave = _.bind(this._onSuggestionMouseLeave, this);
- this.$menu = $(o.menu).on("click.tt", ".tt-suggestion", onSuggestionClick).on("mouseenter.tt", ".tt-suggestion", onSuggestionMouseEnter).on("mouseleave.tt", ".tt-suggestion", onSuggestionMouseLeave);
- _.each(this.datasets, function(dataset) {
- that.$menu.append(dataset.getRoot());
- dataset.onSync("rendered", that._onRendered, that);
- });
- }
- _.mixin(Dropdown.prototype, EventEmitter, {
- _onSuggestionClick: function onSuggestionClick($e) {
- this.trigger("suggestionClicked", $($e.currentTarget));
- },
- _onSuggestionMouseEnter: function onSuggestionMouseEnter($e) {
- this._removeCursor();
- this._setCursor($($e.currentTarget), true);
- },
- _onSuggestionMouseLeave: function onSuggestionMouseLeave() {
- this._removeCursor();
- },
- _onRendered: function onRendered() {
- this.isEmpty = _.every(this.datasets, isDatasetEmpty);
- this.isEmpty ? this._hide() : this.isOpen && this._show();
- this.trigger("datasetRendered");
- function isDatasetEmpty(dataset) {
- return dataset.isEmpty();
- }
- },
- _hide: function() {
- this.$menu.hide();
- },
- _show: function() {
- this.$menu.css("display", "block");
- },
- _getSuggestions: function getSuggestions() {
- return this.$menu.find(".tt-suggestion");
- },
- _getCursor: function getCursor() {
- return this.$menu.find(".tt-cursor").first();
- },
- _setCursor: function setCursor($el, silent) {
- $el.first().addClass("tt-cursor");
- !silent && this.trigger("cursorMoved");
- },
- _removeCursor: function removeCursor() {
- this._getCursor().removeClass("tt-cursor");
- },
- _moveCursor: function moveCursor(increment) {
- var $suggestions, $oldCursor, newCursorIndex, $newCursor;
- if (!this.isOpen) {
- return;
- }
- $oldCursor = this._getCursor();
- $suggestions = this._getSuggestions();
- this._removeCursor();
- newCursorIndex = $suggestions.index($oldCursor) + increment;
- newCursorIndex = (newCursorIndex + 1) % ($suggestions.length + 1) - 1;
- if (newCursorIndex === -1) {
- this.trigger("cursorRemoved");
- return;
- } else if (newCursorIndex < -1) {
- newCursorIndex = $suggestions.length - 1;
- }
- this._setCursor($newCursor = $suggestions.eq(newCursorIndex));
- this._ensureVisible($newCursor);
- },
- _ensureVisible: function ensureVisible($el) {
- var elTop, elBottom, menuScrollTop, menuHeight;
- elTop = $el.position().top;
- elBottom = elTop + $el.outerHeight(true);
- menuScrollTop = this.$menu.scrollTop();
- menuHeight = this.$menu.height() + parseInt(this.$menu.css("paddingTop"), 10) + parseInt(this.$menu.css("paddingBottom"), 10);
- if (elTop < 0) {
- this.$menu.scrollTop(menuScrollTop + elTop);
- } else if (menuHeight < elBottom) {
- this.$menu.scrollTop(menuScrollTop + (elBottom - menuHeight));
- }
- },
- close: function close() {
- if (this.isOpen) {
- this.isOpen = false;
- this._removeCursor();
- this._hide();
- this.trigger("closed");
- }
- },
- open: function open() {
- if (!this.isOpen) {
- this.isOpen = true;
- !this.isEmpty && this._show();
- this.trigger("opened");
- }
- },
- setLanguageDirection: function setLanguageDirection(dir) {
- this.$menu.css(dir === "ltr" ? css.ltr : css.rtl);
- },
- moveCursorUp: function moveCursorUp() {
- this._moveCursor(-1);
- },
- moveCursorDown: function moveCursorDown() {
- this._moveCursor(+1);
- },
- getDatumForSuggestion: function getDatumForSuggestion($el) {
- var datum = null;
- if ($el.length) {
- datum = {
- raw: Dataset.extractDatum($el),
- value: Dataset.extractValue($el),
- datasetName: Dataset.extractDatasetName($el)
- };
- }
- return datum;
- },
- getDatumForCursor: function getDatumForCursor() {
- return this.getDatumForSuggestion(this._getCursor().first());
- },
- getDatumForTopSuggestion: function getDatumForTopSuggestion() {
- return this.getDatumForSuggestion(this._getSuggestions().first());
- },
- update: function update(query) {
- _.each(this.datasets, updateDataset);
- function updateDataset(dataset) {
- dataset.update(query);
- }
- },
- empty: function empty() {
- _.each(this.datasets, clearDataset);
- this.isEmpty = true;
- function clearDataset(dataset) {
- dataset.clear();
- }
- },
- isVisible: function isVisible() {
- return this.isOpen && !this.isEmpty;
- },
- destroy: function destroy() {
- this.$menu.off(".tt");
- this.$menu = null;
- _.each(this.datasets, destroyDataset);
- function destroyDataset(dataset) {
- dataset.destroy();
- }
- }
- });
- return Dropdown;
- function initializeDataset(oDataset) {
- return new Dataset(oDataset);
- }
- }();
- var Typeahead = function() {
- var attrsKey = "ttAttrs";
- function Typeahead(o) {
- var $menu, $input, $hint;
- o = o || {};
- if (!o.input) {
- $.error("missing input");
- }
- this.isActivated = false;
- this.autoselect = !!o.autoselect;
- this.minLength = _.isNumber(o.minLength) ? o.minLength : 1;
- this.$node = buildDomStructure(o.input, o.withHint);
- $menu = this.$node.find(".tt-dropdown-menu");
- $input = this.$node.find(".tt-input");
- $hint = this.$node.find(".tt-hint");
- $input.on("blur.tt", function($e) {
- var active, isActive, hasActive;
- active = document.activeElement;
- isActive = $menu.is(active);
- hasActive = $menu.has(active).length > 0;
- if (_.isMsie() && (isActive || hasActive)) {
- $e.preventDefault();
- $e.stopImmediatePropagation();
- _.defer(function() {
- $input.focus();
- });
- }
- });
- $menu.on("mousedown.tt", function($e) {
- $e.preventDefault();
- });
- this.eventBus = o.eventBus || new EventBus({
- el: $input
- });
- this.dropdown = new Dropdown({
- menu: $menu,
- datasets: o.datasets
- }).onSync("suggestionClicked", this._onSuggestionClicked, this).onSync("cursorMoved", this._onCursorMoved, this).onSync("cursorRemoved", this._onCursorRemoved, this).onSync("opened", this._onOpened, this).onSync("closed", this._onClosed, this).onAsync("datasetRendered", this._onDatasetRendered, this);
- this.input = new Input({
- input: $input,
- hint: $hint
- }).onSync("focused", this._onFocused, this).onSync("blurred", this._onBlurred, this).onSync("enterKeyed", this._onEnterKeyed, this).onSync("tabKeyed", this._onTabKeyed, this).onSync("escKeyed", this._onEscKeyed, this).onSync("upKeyed", this._onUpKeyed, this).onSync("downKeyed", this._onDownKeyed, this).onSync("leftKeyed", this._onLeftKeyed, this).onSync("rightKeyed", this._onRightKeyed, this).onSync("queryChanged", this._onQueryChanged, this).onSync("whitespaceChanged", this._onWhitespaceChanged, this);
- this._setLanguageDirection();
- }
- _.mixin(Typeahead.prototype, {
- _onSuggestionClicked: function onSuggestionClicked(type, $el) {
- var datum;
- if (datum = this.dropdown.getDatumForSuggestion($el)) {
- this._select(datum);
- }
- },
- _onCursorMoved: function onCursorMoved() {
- var datum = this.dropdown.getDatumForCursor();
- this.input.setInputValue(datum.value, true);
- this.eventBus.trigger("cursorchanged", datum.raw, datum.datasetName);
- },
- _onCursorRemoved: function onCursorRemoved() {
- this.input.resetInputValue();
- this._updateHint();
- },
- _onDatasetRendered: function onDatasetRendered() {
- this._updateHint();
- },
- _onOpened: function onOpened() {
- this._updateHint();
- this.eventBus.trigger("opened");
- },
- _onClosed: function onClosed() {
- this.input.clearHint();
- this.eventBus.trigger("closed");
- },
- _onFocused: function onFocused() {
- this.isActivated = true;
- this.dropdown.open();
- },
- _onBlurred: function onBlurred() {
- this.isActivated = false;
- this.dropdown.empty();
- this.dropdown.close();
- this.setVal("", true); //LM
- },
- _onEnterKeyed: function onEnterKeyed(type, $e) {
- var cursorDatum, topSuggestionDatum;
- cursorDatum = this.dropdown.getDatumForCursor();
- topSuggestionDatum = this.dropdown.getDatumForTopSuggestion();
- if (cursorDatum) {
- this._select(cursorDatum);
- $e.preventDefault();
- } else if (this.autoselect && topSuggestionDatum) {
- this._select(topSuggestionDatum);
- $e.preventDefault();
- }
- },
- _onTabKeyed: function onTabKeyed(type, $e) {
- var datum;
- if (datum = this.dropdown.getDatumForCursor()) {
- this._select(datum);
- $e.preventDefault();
- } else {
- this._autocomplete(true);
- }
- },
- _onEscKeyed: function onEscKeyed() {
- this.dropdown.close();
- this.input.resetInputValue();
- },
- _onUpKeyed: function onUpKeyed() {
- var query = this.input.getQuery();
- this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorUp();
- this.dropdown.open();
- },
- _onDownKeyed: function onDownKeyed() {
- var query = this.input.getQuery();
- this.dropdown.isEmpty && query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.moveCursorDown();
- this.dropdown.open();
- },
- _onLeftKeyed: function onLeftKeyed() {
- this.dir === "rtl" && this._autocomplete();
- },
- _onRightKeyed: function onRightKeyed() {
- this.dir === "ltr" && this._autocomplete();
- },
- _onQueryChanged: function onQueryChanged(e, query) {
- this.input.clearHintIfInvalid();
- query.length >= this.minLength ? this.dropdown.update(query) : this.dropdown.empty();
- this.dropdown.open();
- this._setLanguageDirection();
- },
- _onWhitespaceChanged: function onWhitespaceChanged() {
- this._updateHint();
- this.dropdown.open();
- },
- _setLanguageDirection: function setLanguageDirection() {
- var dir;
- if (this.dir !== (dir = this.input.getLanguageDirection())) {
- this.dir = dir;
- this.$node.css("direction", dir);
- this.dropdown.setLanguageDirection(dir);
- }
- },
- _updateHint: function updateHint() {
- var datum, val, query, escapedQuery, frontMatchRegEx, match;
- datum = this.dropdown.getDatumForTopSuggestion();
- if (datum && this.dropdown.isVisible() && !this.input.hasOverflow()) {
- val = this.input.getInputValue();
- query = Input.normalizeQuery(val);
- escapedQuery = _.escapeRegExChars(query);
- frontMatchRegEx = new RegExp("^(?:" + escapedQuery + ")(.+$)", "i");
- match = frontMatchRegEx.exec(datum.value);
- match ? this.input.setHint(val + match[1]) : this.input.clearHint();
- } else {
- this.input.clearHint();
- }
- },
- _autocomplete: function autocomplete(laxCursor) {
- var hint, query, isCursorAtEnd, datum;
- hint = this.input.getHint();
- query = this.input.getQuery();
- isCursorAtEnd = laxCursor || this.input.isCursorAtEnd();
- if (hint && query !== hint && isCursorAtEnd) {
- datum = this.dropdown.getDatumForTopSuggestion();
- datum && this.input.setInputValue(datum.value);
- this.eventBus.trigger("autocompleted", datum.raw, datum.datasetName);
- }
- },
- _select: function select(datum) {
- this.input.setQuery(datum.value);
- this.input.setInputValue(datum.value, true);
- this._setLanguageDirection();
- this.eventBus.trigger("selected", datum.raw, datum.datasetName);
- this.dropdown.close();
- _.defer(_.bind(this.dropdown.empty, this.dropdown));
- },
- open: function open() {
- this.dropdown.open();
- },
- close: function close() {
- this.dropdown.close();
- },
- setVal: function setVal(val) {
- if (this.isActivated) {
- this.input.setInputValue(val);
- } else {
- this.input.setQuery(val);
- this.input.setInputValue(val, true);
- }
- this._setLanguageDirection();
- },
- getVal: function getVal() {
- return this.input.getQuery();
- },
- destroy: function destroy() {
- this.input.destroy();
- this.dropdown.destroy();
- destroyDomStructure(this.$node);
- this.$node = null;
- }
- });
- return Typeahead;
- function buildDomStructure(input, withHint) {
- var $input, $wrapper, $dropdown, $hint;
- $input = $(input);
- $wrapper = $(html.wrapper).css(css.wrapper);
- $dropdown = $(html.dropdown).css(css.dropdown);
- $hint = $input.clone().css(css.hint).css(getBackgroundStyles($input));
- $hint.val("").removeData().addClass("tt-hint").removeAttr("id name placeholder").prop("disabled", true).attr({
- autocomplete: "off",
- spellcheck: "false"
- });
- $input.data(attrsKey, {
- dir: $input.attr("dir"),
- autocomplete: $input.attr("autocomplete"),
- spellcheck: $input.attr("spellcheck"),
- style: $input.attr("style")
- });
- $input.addClass("tt-input").attr({
- autocomplete: "off",
- spellcheck: false
- }).css(withHint ? css.input : css.inputWithNoHint);
- try {
- !$input.attr("dir") && $input.attr("dir", "auto");
- } catch (e) {}
- return $input.wrap($wrapper).parent().prepend(withHint ? $hint : null).append($dropdown);
- }
- function getBackgroundStyles($el) {
- return {
- backgroundAttachment: $el.css("background-attachment"),
- backgroundClip: $el.css("background-clip"),
- backgroundColor: $el.css("background-color"),
- backgroundImage: $el.css("background-image"),
- backgroundOrigin: $el.css("background-origin"),
- backgroundPosition: $el.css("background-position"),
- backgroundRepeat: $el.css("background-repeat"),
- backgroundSize: $el.css("background-size")
- };
- }
- function destroyDomStructure($node) {
- var $input = $node.find(".tt-input");
- _.each($input.data(attrsKey), function(val, key) {
- _.isUndefined(val) ? $input.removeAttr(key) : $input.attr(key, val);
- });
- $input.detach().removeData(attrsKey).removeClass("tt-input").insertAfter($node);
- $node.remove();
- }
- }();
- (function() {
- var old, typeaheadKey, methods;
- old = $.fn.typeahead;
- typeaheadKey = "ttTypeahead";
- methods = {
- initialize: function initialize(o, datasets) {
- datasets = _.isArray(datasets) ? datasets : [].slice.call(arguments, 1);
- o = o || {};
- return this.each(attach);
- function attach() {
- var $input = $(this), eventBus, typeahead;
- _.each(datasets, function(d) {
- d.highlight = !!o.highlight;
- });
- typeahead = new Typeahead({
- input: $input,
- eventBus: eventBus = new EventBus({
- el: $input
- }),
- withHint: _.isUndefined(o.hint) ? true : !!o.hint,
- minLength: o.minLength,
- autoselect: o.autoselect,
- datasets: datasets
- });
- $input.data(typeaheadKey, typeahead);
- }
- },
- open: function open() {
- return this.each(openTypeahead);
- function openTypeahead() {
- var $input = $(this), typeahead;
- if (typeahead = $input.data(typeaheadKey)) {
- typeahead.open();
- }
- }
- },
- close: function close() {
- return this.each(closeTypeahead);
- function closeTypeahead() {
- var $input = $(this), typeahead;
- if (typeahead = $input.data(typeaheadKey)) {
- typeahead.close();
- }
- }
- },
- val: function val(newVal) {
- return !arguments.length ? getVal(this.first()) : this.each(setVal);
- function setVal() {
- var $input = $(this), typeahead;
- if (typeahead = $input.data(typeaheadKey)) {
- typeahead.setVal(newVal);
- }
- }
- function getVal($input) {
- var typeahead, query;
- if (typeahead = $input.data(typeaheadKey)) {
- query = typeahead.getVal();
- }
- return query;
- }
- },
- destroy: function destroy() {
- return this.each(unattach);
- function unattach() {
- var $input = $(this), typeahead;
- if (typeahead = $input.data(typeaheadKey)) {
- typeahead.destroy();
- $input.removeData(typeaheadKey);
- }
- }
- }
- };
- $.fn.typeahead = function(method) {
- if (methods[method]) {
- return methods[method].apply(this, [].slice.call(arguments, 1));
- } else {
- return methods.initialize.apply(this, arguments);
- }
- };
- $.fn.typeahead.noConflict = function noConflict() {
- $.fn.typeahead = old;
- return this;
- };
- })();
-
-
-
-//})(window.jQuery);
-
-
-});
-define('searchView',[
- 'App',
- // Templates
- 'text!tpl/search.html',
- 'text!tpl/search_suggestion.html',
- // Tools
- 'typeahead'
-], function(App, searchTpl, suggestionTpl) {
-
- var searchView = Backbone.View.extend({
- el: '#search',
- /**
- * Init.
- */
- init: function() {
- var tpl = _.template(searchTpl);
- var className = 'form-control input-lg';
- var placeholder = 'Search reference';
- this.searchHtml = tpl({
- 'placeholder': placeholder,
- 'className': className
- });
- this.items = App.classes.concat(App.allItems);
-
- return this;
- },
- /**
- * Render input field with Typehead activated.
- */
- render: function() {
- // Append the view to the dom
- this.$el.append(this.searchHtml);
-
- // Render Typeahead
- var $searchInput = this.$el.find('input[type=text]');
- this.typeaheadRender($searchInput);
- this.typeaheadEvents($searchInput);
-
- return this;
- },
- /**
- * Apply Twitter Typeahead to the search input field.
- * @param {jquery} $input
- */
- typeaheadRender: function($input) {
- var self = this;
- $input.typeahead(null, {
- 'displayKey': 'name',
- 'minLength': 2,
- //'highlight': true,
- 'source': self.substringMatcher(this.items),
- 'templates': {
- 'empty': 'Unable to find any item that match the current query
',
- 'suggestion': _.template(suggestionTpl)
- }
- });
- },
- /**
- * Setup typeahead custom events (item selected).
- */
- typeaheadEvents: function($input) {
- var self = this;
- $input.on('typeahead:selected', function(e, item, datasetName) {
- var selectedItem = self.items[item.idx];
- select(selectedItem);
- });
- $input.on('keydown', function(e) {
- if (e.which === 13) { // enter
- var txt = $input.val();
- var f = _.find(self.items, function(it) { return it.name == txt; });
- if (f) {
- select(f);
- }
- } else if (e.which === 27) {
- $input.blur();
- }
- });
-
- function select(selectedItem) {
- var hash = App.router.getHash(selectedItem);//
- App.router.navigate(hash, {'trigger': true});
- $('#item').focus();
- }
- },
- /**
- * substringMatcher function for Typehead (search for strings in an array).
- * @param {array} array
- * @returns {Function}
- */
- substringMatcher: function(array) {
- return function findMatches(query, callback) {
- var matches = [], substrRegex, arrayLength = array.length;
-
- // regex used to determine if a string contains the substring `query`
- substrRegex = new RegExp(query, 'i');
-
- // iterate through the pool of strings and for any string that
- // contains the substring `query`, add it to the `matches` array
- for (var i=0; i < arrayLength; i++) {
- var item = array[i];
- if (substrRegex.test(item.name)) {
- // typeahead expects suggestions to be a js object
- matches.push({
- 'itemtype': item.itemtype,
- 'name': item.name,
- 'className': item.class,
- 'is_constructor': !!item.is_constructor,
- 'final': item.final,
- 'idx': i
- });
- }
- }
-
- callback(matches);
- };
- }
-
- });
-
- return searchView;
-
-});
-
-
-define('text!tpl/list.html',[],function () { return '<% _.each(groups, function(group){ %>\n \n
<%=group.name%> \n
\n <% _.each(group.subgroups, function(subgroup, ind) { %>\n
\n <% if (subgroup.name !== \'0\') { %>\n
<%=subgroup.name%> \n <% } %>\n
\n
\n <% }); %>\n
\n
\n<% }); %>\n';});
-
-define('listView',[
- 'App',
- // Templates
- 'text!tpl/list.html'
-], function (App, listTpl) {
- var striptags = function(html) {
- var div = document.createElement('div');
- div.innerHTML = html;
- return div.textContent;
- };
-
- var listView = Backbone.View.extend({
- el: '#list',
- events: {},
- /**
- * Init.
- */
- init: function () {
- this.listTpl = _.template(listTpl);
-
- return this;
- },
- /**
- * Render the list.
- */
- render: function (items, listCollection) {
- if (items && listCollection) {
- var self = this;
-
- // Render items and group them by module
- // module === group
- this.groups = {};
- _.each(items, function (item, i) {
-
- if (!item.private && item.file.indexOf('addons') === -1) { //addons don't get displayed on main page
-
- var group = item.module || '_';
- var subgroup = item.submodule || '_';
- if (group === subgroup) {
- subgroup = '0';
- }
- var hash = App.router.getHash(item);
-
- // fixes broken links for #/p5/> and #/p5/>=
- item.hash = item.hash.replace('>', '>');
-
- // Create a group list
- if (!self.groups[group]) {
- self.groups[group] = {
- name: group.replace('_', ' '),
- subgroups: {}
- };
- }
-
- // Create a subgroup list
- if (!self.groups[group].subgroups[subgroup]) {
- self.groups[group].subgroups[subgroup] = {
- name: subgroup.replace('_', ' '),
- items: []
- };
- }
-
- // hide the un-interesting constants
- if (group === 'Constants' && !item.example)
- return;
-
- if (item.class === 'p5') {
-
- self.groups[group].subgroups[subgroup].items.push(item);
-
- } else {
-
- var found = _.find(self.groups[group].subgroups[subgroup].items,
- function(i){ return i.name == item.class; });
-
- if (!found) {
-
- // FIX TO INVISIBLE OBJECTS: DH (see also router.js)
- var ind = hash.lastIndexOf('/');
- hash = item.hash.substring(0, ind).replace('p5/','p5.');
- self.groups[group].subgroups[subgroup].items.push({
- name: item.class,
- hash: hash
- });
- }
-
- }
- }
- });
-
- // Put the items html into the list
- var listHtml = self.listTpl({
- 'striptags': striptags,
- 'title': self.capitalizeFirst(listCollection),
- 'groups': self.groups,
- 'listCollection': listCollection
- });
-
- // Render the view
- this.$el.html(listHtml);
- }
-
- var renderEvent = new Event('reference-rendered');
- window.dispatchEvent(renderEvent);
-
- return this;
- },
- /**
- * Show a list of items.
- * @param {array} items Array of item objects.
- * @returns {object} This view.
- */
- show: function (listGroup) {
- if (App[listGroup]) {
- this.render(App[listGroup], listGroup);
- }
- App.pageView.hideContentViews();
-
- this.$el.show();
-
- return this;
- },
- /**
- * Helper method to capitalize the first letter of a string
- * @param {string} str
- * @returns {string} Returns the string.
- */
- capitalizeFirst: function (str) {
- return str.substr(0, 1).toUpperCase() + str.substr(1);
- }
-
-
-
- });
-
- return listView;
-
-});
-
-
-define('text!tpl/item.html',[],function () { return '<%=item.name%><% if (item.isMethod) { %>()<% } %> \n\n<% if (item.example) { %>\n\n
Examples \n\n
\n <% _.each(item.example, function(example, i){ %>\n <%= example %>\n <% }); %>\n
\n
\n<% } %>\n\n\n \n
Description \n\n <% if (item.deprecated) { %>\n
\n Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>\n
\n <% } %>\n \n\n
<%= item.description %> \n\n <% if (item.extends) { %>\n
Extends <%=item.extends%>
\n <% } %>\n\n <% if (item.module === \'p5.sound\') { %>\n
This function requires you include the p5.sound library. Add the following into the head of your index.html file:\n
<script src="path/to/p5.sound.js"></script>\n \n <% } %>\n\n <% if (item.constRefs) { %>\n
Used by:\n <%\n var refs = item.constRefs;\n for (var i = 0; i < refs.length; i ++) {\n var ref = refs[i];\n var name = ref;\n if (name.substr(0, 3) === \'p5.\') {\n name = name.substr(3);\n }\n if (i !== 0) {\n if (i == refs.length - 1) {\n %> and <%\n } else {\n %>, <%\n }\n }\n %><%= name %>() <%\n }\n %>\n
\n <% } %>\n
\n\n<% if (isConstructor || !isClass) { %>\n\n\n
Syntax \n
\n <% syntaxes.forEach(function(syntax) { %>\n
<%= syntax %>\n <% }) %>\n \n
\n\n\n<% if (item.params) { %>\n \n
Parameters \n
\n <% for (var i=0; i\n <% var p = item.params[i] %>\n \n <%=p.name%>
\n <% if (p.type) { %>\n \n <% var type = p.type.replace(/(p5\\.[A-Z][A-Za-z]*)/, \'
$1 \'); %>\n
<%=type%> : <%=p.description%>\n <% if (p.optional) { %> (Optional)<% } %>\n
\n <% } %>\n \n <% } %>\n \n
\n<% } %>\n\n<% if (item.return && item.return.type) { %>\n \n
Returns \n
<%=item.return.type%> : <%= item.return.description %>
\n
\n<% } %>\n\n<% } %>\n';});
-
-
-define('text!tpl/class.html',[],function () { return '\n<% if (typeof constructor !== \'undefined\') { %>\n\n <%=constructor%>\n
\n<% } %>\n\n<% let fields = _.filter(things, function(item) { return item.itemtype === \'property\' && item.access !== \'private\' }); %>\n<% if (fields.length > 0) { %>\n Fields \n \n <% _.each(fields, function(item) { %>\n \n \n <%= item.description %>
\n \n <% }); %>\n \n<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n Methods \n \n <% _.each(methods, function(item) { %>\n \n \n <%= item.description %>
\n \n <% }); %>\n \n<% } %>\n';});
-
-
-define('text!tpl/itemEnd.html',[],function () { return '\n \n\n\n\n \n \n';});
-
-// Copyright (C) 2006 Google Inc.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-
-/**
- * @fileoverview
- * some functions for browser-side pretty printing of code contained in html.
- *
- *
- * For a fairly comprehensive set of languages see the
- * README
- * file that came with this source. At a minimum, the lexer should work on a
- * number of languages including C and friends, Java, Python, Bash, SQL, HTML,
- * XML, CSS, Javascript, and Makefiles. It works passably on Ruby, PHP and Awk
- * and a subset of Perl, but, because of commenting conventions, doesn't work on
- * Smalltalk, Lisp-like, or CAML-like languages without an explicit lang class.
- *
- * Usage:
- * include this source file in an html page via
- * {@code }
- * define style rules. See the example page for examples.
- * mark the {@code } and {@code } tags in your source with
- * {@code class=prettyprint.}
- * You can also use the (html deprecated) {@code } tag, but the pretty
- * printer needs to do more substantial DOM manipulations to support that, so
- * some css styles may not be preserved.
- *
- * That's it. I wanted to keep the API as simple as possible, so there's no
- * need to specify which language the code is in, but if you wish, you can add
- * another class to the {@code } or {@code } element to specify the
- * language, as in {@code }. Any class that
- * starts with "lang-" followed by a file extension, specifies the file type.
- * See the "lang-*.js" files in this directory for code that implements
- * per-language file handlers.
- *
- * Change log:
- * cbeust, 2006/08/22
- *
- * Java annotations (start with "@") are now captured as literals ("lit")
- *
- * @requires console
- */
-
-// JSLint declarations
-/*global console, document, navigator, setTimeout, window, define */
-
-/** @define {boolean} */
-var IN_GLOBAL_SCOPE = true;
-
-/**
- * Split {@code prettyPrint} into multiple timeouts so as not to interfere with
- * UI events.
- * If set to {@code false}, {@code prettyPrint()} is synchronous.
- */
-window['PR_SHOULD_USE_CONTINUATION'] = true;
-
-/**
- * Pretty print a chunk of code.
- * @param {string} sourceCodeHtml The HTML to pretty print.
- * @param {string} opt_langExtension The language name to use.
- * Typically, a filename extension like 'cpp' or 'java'.
- * @param {number|boolean} opt_numberLines True to number lines,
- * or the 1-indexed number of the first line in sourceCodeHtml.
- * @return {string} code as html, but prettier
- */
-var prettyPrintOne;
-/**
- * Find all the {@code } and {@code } tags in the DOM with
- * {@code class=prettyprint} and prettify them.
- *
- * @param {Function} opt_whenDone called when prettifying is done.
- * @param {HTMLElement|HTMLDocument} opt_root an element or document
- * containing all the elements to pretty print.
- * Defaults to {@code document.body}.
- */
-var prettyPrint;
-
-
-(function () {
- var win = window;
- // Keyword lists for various languages.
- // We use things that coerce to strings to make them compact when minified
- // and to defeat aggressive optimizers that fold large string constants.
- var FLOW_CONTROL_KEYWORDS = ["break,continue,do,else,for,if,return,while"];
- var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,"auto,case,char,const,default," +
- "double,enum,extern,float,goto,inline,int,long,register,short,signed," +
- "sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];
- var COMMON_KEYWORDS = [C_KEYWORDS,"catch,class,delete,false,import," +
- "new,operator,private,protected,public,this,throw,true,try,typeof"];
- var CPP_KEYWORDS = [COMMON_KEYWORDS,"alignof,align_union,asm,axiom,bool," +
- "concept,concept_map,const_cast,constexpr,decltype,delegate," +
- "dynamic_cast,explicit,export,friend,generic,late_check," +
- "mutable,namespace,nullptr,property,reinterpret_cast,static_assert," +
- "static_cast,template,typeid,typename,using,virtual,where"];
- var JAVA_KEYWORDS = [COMMON_KEYWORDS,
- "abstract,assert,boolean,byte,extends,final,finally,implements,import," +
- "instanceof,interface,null,native,package,strictfp,super,synchronized," +
- "throws,transient"];
- var CSHARP_KEYWORDS = [JAVA_KEYWORDS,
- "as,base,by,checked,decimal,delegate,descending,dynamic,event," +
- "fixed,foreach,from,group,implicit,in,internal,into,is,let," +
- "lock,object,out,override,orderby,params,partial,readonly,ref,sbyte," +
- "sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort," +
- "var,virtual,where"];
- var COFFEE_KEYWORDS = "all,and,by,catch,class,else,extends,false,finally," +
- "for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then," +
- "throw,true,try,unless,until,when,while,yes";
- var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,
- "debugger,eval,export,function,get,null,set,undefined,var,with," +
- "Infinity,NaN"];
- var PERL_KEYWORDS = "caller,delete,die,do,dump,elsif,eval,exit,foreach,for," +
- "goto,if,import,last,local,my,next,no,our,print,package,redo,require," +
- "sub,undef,unless,until,use,wantarray,while,BEGIN,END";
- var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "and,as,assert,class,def,del," +
- "elif,except,exec,finally,from,global,import,in,is,lambda," +
- "nonlocal,not,or,pass,print,raise,try,with,yield," +
- "False,True,None"];
- var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "alias,and,begin,case,class," +
- "def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo," +
- "rescue,retry,self,super,then,true,undef,unless,until,when,yield," +
- "BEGIN,END"];
- var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "as,assert,const,copy,drop," +
- "enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv," +
- "pub,pure,ref,self,static,struct,true,trait,type,unsafe,use"];
- var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, "case,done,elif,esac,eval,fi," +
- "function,in,local,set,then,until"];
- var ALL_KEYWORDS = [
- CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,
- PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];
- var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;
-
- // token style names. correspond to css classes
- /**
- * token style for a string literal
- * @const
- */
- var PR_STRING = 'str';
- /**
- * token style for a keyword
- * @const
- */
- var PR_KEYWORD = 'kwd';
- /**
- * token style for a comment
- * @const
- */
- var PR_COMMENT = 'com';
- /**
- * token style for a type
- * @const
- */
- var PR_TYPE = 'typ';
- /**
- * token style for a literal value. e.g. 1, null, true.
- * @const
- */
- var PR_LITERAL = 'lit';
- /**
- * token style for a punctuation string.
- * @const
- */
- var PR_PUNCTUATION = 'pun';
- /**
- * token style for plain text.
- * @const
- */
- var PR_PLAIN = 'pln';
-
- /**
- * token style for an sgml tag.
- * @const
- */
- var PR_TAG = 'tag';
- /**
- * token style for a markup declaration such as a DOCTYPE.
- * @const
- */
- var PR_DECLARATION = 'dec';
- /**
- * token style for embedded source.
- * @const
- */
- var PR_SOURCE = 'src';
- /**
- * token style for an sgml attribute name.
- * @const
- */
- var PR_ATTRIB_NAME = 'atn';
- /**
- * token style for an sgml attribute value.
- * @const
- */
- var PR_ATTRIB_VALUE = 'atv';
-
- /**
- * A class that indicates a section of markup that is not code, e.g. to allow
- * embedding of line numbers within code listings.
- * @const
- */
- var PR_NOCODE = 'nocode';
-
-
-
- /**
- * A set of tokens that can precede a regular expression literal in
- * javascript
- * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html
- * has the full list, but I've removed ones that might be problematic when
- * seen in languages that don't support regular expression literals.
- *
- * Specifically, I've removed any keywords that can't precede a regexp
- * literal in a syntactically legal javascript program, and I've removed the
- * "in" keyword since it's not a keyword in many languages, and might be used
- * as a count of inches.
- *
- *
The link above does not accurately describe EcmaScript rules since
- * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works
- * very well in practice.
- *
- * @private
- * @const
- */
- var REGEXP_PRECEDER_PATTERN = '(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*';
-
- // CAVEAT: this does not properly handle the case where a regular
- // expression immediately follows another since a regular expression may
- // have flags for case-sensitivity and the like. Having regexp tokens
- // adjacent is not valid in any language I'm aware of, so I'm punting.
- // TODO: maybe style special characters inside a regexp as punctuation.
-
- /**
- * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally
- * matches the union of the sets of strings matched by the input RegExp.
- * Since it matches globally, if the input strings have a start-of-input
- * anchor (/^.../), it is ignored for the purposes of unioning.
- * @param {Array.} regexs non multiline, non-global regexs.
- * @return {RegExp} a global regex.
- */
- function combinePrefixPatterns(regexs) {
- var capturedGroupIndex = 0;
-
- var needToFoldCase = false;
- var ignoreCase = false;
- for (var i = 0, n = regexs.length; i < n; ++i) {
- var regex = regexs[i];
- if (regex.ignoreCase) {
- ignoreCase = true;
- } else if (/[a-z]/i.test(regex.source.replace(
- /\\u[0-9a-f]{4}|\\x[0-9a-f]{2}|\\[^ux]/gi, ''))) {
- needToFoldCase = true;
- ignoreCase = false;
- break;
- }
- }
-
- var escapeCharToCodeUnit = {
- 'b': 8,
- 't': 9,
- 'n': 0xa,
- 'v': 0xb,
- 'f': 0xc,
- 'r': 0xd
- };
-
- function decodeEscape(charsetPart) {
- var cc0 = charsetPart.charCodeAt(0);
- if (cc0 !== 92 /* \\ */) {
- return cc0;
- }
- var c1 = charsetPart.charAt(1);
- cc0 = escapeCharToCodeUnit[c1];
- if (cc0) {
- return cc0;
- } else if ('0' <= c1 && c1 <= '7') {
- return parseInt(charsetPart.substring(1), 8);
- } else if (c1 === 'u' || c1 === 'x') {
- return parseInt(charsetPart.substring(2), 16);
- } else {
- return charsetPart.charCodeAt(1);
- }
- }
-
- function encodeEscape(charCode) {
- if (charCode < 0x20) {
- return (charCode < 0x10 ? '\\x0' : '\\x') + charCode.toString(16);
- }
- var ch = String.fromCharCode(charCode);
- return (ch === '\\' || ch === '-' || ch === ']' || ch === '^')
- ? "\\" + ch : ch;
- }
-
- function caseFoldCharset(charSet) {
- var charsetParts = charSet.substring(1, charSet.length - 1).match(
- new RegExp(
- '\\\\u[0-9A-Fa-f]{4}'
- + '|\\\\x[0-9A-Fa-f]{2}'
- + '|\\\\[0-3][0-7]{0,2}'
- + '|\\\\[0-7]{1,2}'
- + '|\\\\[\\s\\S]'
- + '|-'
- + '|[^-\\\\]',
- 'g'));
- var ranges = [];
- var inverse = charsetParts[0] === '^';
-
- var out = ['['];
- if (inverse) { out.push('^'); }
-
- for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {
- var p = charsetParts[i];
- if (/\\[bdsw]/i.test(p)) { // Don't muck with named groups.
- out.push(p);
- } else {
- var start = decodeEscape(p);
- var end;
- if (i + 2 < n && '-' === charsetParts[i + 1]) {
- end = decodeEscape(charsetParts[i + 2]);
- i += 2;
- } else {
- end = start;
- }
- ranges.push([start, end]);
- // If the range might intersect letters, then expand it.
- // This case handling is too simplistic.
- // It does not deal with non-latin case folding.
- // It works for latin source code identifiers though.
- if (!(end < 65 || start > 122)) {
- if (!(end < 65 || start > 90)) {
- ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);
- }
- if (!(end < 97 || start > 122)) {
- ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);
- }
- }
- }
- }
-
- // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]
- // -> [[1, 12], [14, 14], [16, 17]]
- ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });
- var consolidatedRanges = [];
- var lastRange = [];
- for (var i = 0; i < ranges.length; ++i) {
- var range = ranges[i];
- if (range[0] <= lastRange[1] + 1) {
- lastRange[1] = Math.max(lastRange[1], range[1]);
- } else {
- consolidatedRanges.push(lastRange = range);
- }
- }
-
- for (var i = 0; i < consolidatedRanges.length; ++i) {
- var range = consolidatedRanges[i];
- out.push(encodeEscape(range[0]));
- if (range[1] > range[0]) {
- if (range[1] + 1 > range[0]) { out.push('-'); }
- out.push(encodeEscape(range[1]));
- }
- }
- out.push(']');
- return out.join('');
- }
-
- function allowAnywhereFoldCaseAndRenumberGroups(regex) {
- // Split into character sets, escape sequences, punctuation strings
- // like ('(', '(?:', ')', '^'), and runs of characters that do not
- // include any of the above.
- var parts = regex.source.match(
- new RegExp(
- '(?:'
- + '\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]' // a character set
- + '|\\\\u[A-Fa-f0-9]{4}' // a unicode escape
- + '|\\\\x[A-Fa-f0-9]{2}' // a hex escape
- + '|\\\\[0-9]+' // a back-reference or octal escape
- + '|\\\\[^ux0-9]' // other escape sequence
- + '|\\(\\?[:!=]' // start of a non-capturing group
- + '|[\\(\\)\\^]' // start/end of a group, or line start
- + '|[^\\x5B\\x5C\\(\\)\\^]+' // run of other characters
- + ')',
- 'g'));
- var n = parts.length;
-
- // Maps captured group numbers to the number they will occupy in
- // the output or to -1 if that has not been determined, or to
- // undefined if they need not be capturing in the output.
- var capturedGroups = [];
-
- // Walk over and identify back references to build the capturedGroups
- // mapping.
- for (var i = 0, groupIndex = 0; i < n; ++i) {
- var p = parts[i];
- if (p === '(') {
- // groups are 1-indexed, so max group index is count of '('
- ++groupIndex;
- } else if ('\\' === p.charAt(0)) {
- var decimalValue = +p.substring(1);
- if (decimalValue) {
- if (decimalValue <= groupIndex) {
- capturedGroups[decimalValue] = -1;
- } else {
- // Replace with an unambiguous escape sequence so that
- // an octal escape sequence does not turn into a backreference
- // to a capturing group from an earlier regex.
- parts[i] = encodeEscape(decimalValue);
- }
- }
- }
- }
-
- // Renumber groups and reduce capturing groups to non-capturing groups
- // where possible.
- for (var i = 1; i < capturedGroups.length; ++i) {
- if (-1 === capturedGroups[i]) {
- capturedGroups[i] = ++capturedGroupIndex;
- }
- }
- for (var i = 0, groupIndex = 0; i < n; ++i) {
- var p = parts[i];
- if (p === '(') {
- ++groupIndex;
- if (!capturedGroups[groupIndex]) {
- parts[i] = '(?:';
- }
- } else if ('\\' === p.charAt(0)) {
- var decimalValue = +p.substring(1);
- if (decimalValue && decimalValue <= groupIndex) {
- parts[i] = '\\' + capturedGroups[decimalValue];
- }
- }
- }
-
- // Remove any prefix anchors so that the output will match anywhere.
- // ^^ really does mean an anchored match though.
- for (var i = 0; i < n; ++i) {
- if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }
- }
-
- // Expand letters to groups to handle mixing of case-sensitive and
- // case-insensitive patterns if necessary.
- if (regex.ignoreCase && needToFoldCase) {
- for (var i = 0; i < n; ++i) {
- var p = parts[i];
- var ch0 = p.charAt(0);
- if (p.length >= 2 && ch0 === '[') {
- parts[i] = caseFoldCharset(p);
- } else if (ch0 !== '\\') {
- // TODO: handle letters in numeric escapes.
- parts[i] = p.replace(
- /[a-zA-Z]/g,
- function (ch) {
- var cc = ch.charCodeAt(0);
- return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';
- });
- }
- }
- }
-
- return parts.join('');
- }
-
- var rewritten = [];
- for (var i = 0, n = regexs.length; i < n; ++i) {
- var regex = regexs[i];
- if (regex.global || regex.multiline) { throw new Error('' + regex); }
- rewritten.push(
- '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');
- }
-
- return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');
- }
-
- /**
- * Split markup into a string of source code and an array mapping ranges in
- * that string to the text nodes in which they appear.
- *
- *
- * The HTML DOM structure:
- *
- * (Element "p"
- * (Element "b"
- * (Text "print ")) ; #1
- * (Text "'Hello '") ; #2
- * (Element "br") ; #3
- * (Text " + 'World';")) ; #4
- *
- *
- * corresponds to the HTML
- * {@code
print 'Hello ' + 'World';
}.
- *
- *
- * It will produce the output:
- *
- * {
- * sourceCode: "print 'Hello '\n + 'World';",
- * // 1 2
- * // 012345678901234 5678901234567
- * spans: [0, #1, 6, #2, 14, #3, 15, #4]
- * }
- *
- *
- * where #1 is a reference to the {@code "print "} text node above, and so
- * on for the other text nodes.
- *
- *
- *
- * The {@code} spans array is an array of pairs. Even elements are the start
- * indices of substrings, and odd elements are the text nodes (or BR elements)
- * that contain the text for those substrings.
- * Substrings continue until the next index or the end of the source.
- *
- *
- * @param {Node} node an HTML DOM subtree containing source-code.
- * @param {boolean} isPreformatted true if white-space in text nodes should
- * be considered significant.
- * @return {Object} source code and the text nodes in which they occur.
- */
- function extractSourceSpans(node, isPreformatted) {
- var nocode = /(?:^|\s)nocode(?:\s|$)/;
-
- var chunks = [];
- var length = 0;
- var spans = [];
- var k = 0;
-
- function walk(node) {
- var type = node.nodeType;
- if (type == 1) { // Element
- if (nocode.test(node.className)) { return; }
- for (var child = node.firstChild; child; child = child.nextSibling) {
- walk(child);
- }
- var nodeName = node.nodeName.toLowerCase();
- if ('br' === nodeName || 'li' === nodeName) {
- chunks[k] = '\n';
- spans[k << 1] = length++;
- spans[(k++ << 1) | 1] = node;
- }
- } else if (type == 3 || type == 4) { // Text
- var text = node.nodeValue;
- if (text.length) {
- if (!isPreformatted) {
- text = text.replace(/[ \t\r\n]+/g, ' ');
- } else {
- text = text.replace(/\r\n?/g, '\n'); // Normalize newlines.
- }
- // TODO: handle tabs here?
- chunks[k] = text;
- spans[k << 1] = length;
- length += text.length;
- spans[(k++ << 1) | 1] = node;
- }
- }
- }
-
- walk(node);
-
- return {
- sourceCode: chunks.join('').replace(/\n$/, ''),
- spans: spans
- };
- }
-
- /**
- * Apply the given language handler to sourceCode and add the resulting
- * decorations to out.
- * @param {number} basePos the index of sourceCode within the chunk of source
- * whose decorations are already present on out.
- */
- function appendDecorations(basePos, sourceCode, langHandler, out) {
- if (!sourceCode) { return; }
- var job = {
- sourceCode: sourceCode,
- basePos: basePos
- };
- langHandler(job);
- out.push.apply(out, job.decorations);
- }
-
- var notWs = /\S/;
-
- /**
- * Given an element, if it contains only one child element and any text nodes
- * it contains contain only space characters, return the sole child element.
- * Otherwise returns undefined.
- *
- * This is meant to return the CODE element in {@code
} when
- * there is a single child element that contains all the non-space textual
- * content, but not to return anything where there are multiple child elements
- * as in {@code ...... } or when there
- * is textual content.
- */
- function childContentWrapper(element) {
- var wrapper = undefined;
- for (var c = element.firstChild; c; c = c.nextSibling) {
- var type = c.nodeType;
- wrapper = (type === 1) // Element Node
- ? (wrapper ? element : c)
- : (type === 3) // Text Node
- ? (notWs.test(c.nodeValue) ? element : wrapper)
- : wrapper;
- }
- return wrapper === element ? undefined : wrapper;
- }
-
- /** Given triples of [style, pattern, context] returns a lexing function,
- * The lexing function interprets the patterns to find token boundaries and
- * returns a decoration list of the form
- * [index_0, style_0, index_1, style_1, ..., index_n, style_n]
- * where index_n is an index into the sourceCode, and style_n is a style
- * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to
- * all characters in sourceCode[index_n-1:index_n].
- *
- * The stylePatterns is a list whose elements have the form
- * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].
- *
- * Style is a style constant like PR_PLAIN, or can be a string of the
- * form 'lang-FOO', where FOO is a language extension describing the
- * language of the portion of the token in $1 after pattern executes.
- * E.g., if style is 'lang-lisp', and group 1 contains the text
- * '(hello (world))', then that portion of the token will be passed to the
- * registered lisp handler for formatting.
- * The text before and after group 1 will be restyled using this decorator
- * so decorators should take care that this doesn't result in infinite
- * recursion. For example, the HTML lexer rule for SCRIPT elements looks
- * something like ['lang-js', /<[s]cript>(.+?)<\/script>/]. This may match
- * '}\n * define style rules. See the example page for examples.\n * mark the {@code } and {@code } tags in your source with\n * {@code class=prettyprint.}\n * You can also use the (html deprecated) {@code } tag, but the pretty\n * printer needs to do more substantial DOM manipulations to support that, so\n * some css styles may not be preserved.\n * \n * That's it. I wanted to keep the API as simple as possible, so there's no\n * need to specify which language the code is in, but if you wish, you can add\n * another class to the {@code } or {@code } element to specify the\n * language, as in {@code }. Any class that\n * starts with \"lang-\" followed by a file extension, specifies the file type.\n * See the \"lang-*.js\" files in this directory for code that implements\n * per-language file handlers.\n * \n * Change log: \n * cbeust, 2006/08/22\n *
\n * Java annotations (start with \"@\") are now captured as literals (\"lit\")\n * \n * @requires console\n */\n\n// JSLint declarations\n/*global console, document, navigator, setTimeout, window, define */\n\n/** @define {boolean} */\nvar IN_GLOBAL_SCOPE = true;\n\n/**\n * Split {@code prettyPrint} into multiple timeouts so as not to interfere with\n * UI events.\n * If set to {@code false}, {@code prettyPrint()} is synchronous.\n */\nwindow['PR_SHOULD_USE_CONTINUATION'] = true;\n\n/**\n * Pretty print a chunk of code.\n * @param {string} sourceCodeHtml The HTML to pretty print.\n * @param {string} opt_langExtension The language name to use.\n * Typically, a filename extension like 'cpp' or 'java'.\n * @param {number|boolean} opt_numberLines True to number lines,\n * or the 1-indexed number of the first line in sourceCodeHtml.\n * @return {string} code as html, but prettier\n */\nvar prettyPrintOne;\n/**\n * Find all the {@code } and {@code } tags in the DOM with\n * {@code class=prettyprint} and prettify them.\n *\n * @param {Function} opt_whenDone called when prettifying is done.\n * @param {HTMLElement|HTMLDocument} opt_root an element or document\n * containing all the elements to pretty print.\n * Defaults to {@code document.body}.\n */\nvar prettyPrint;\n\n\n(function () {\n var win = window;\n // Keyword lists for various languages.\n // We use things that coerce to strings to make them compact when minified\n // and to defeat aggressive optimizers that fold large string constants.\n var FLOW_CONTROL_KEYWORDS = [\"break,continue,do,else,for,if,return,while\"];\n var C_KEYWORDS = [FLOW_CONTROL_KEYWORDS,\"auto,case,char,const,default,\" + \n \"double,enum,extern,float,goto,inline,int,long,register,short,signed,\" +\n \"sizeof,static,struct,switch,typedef,union,unsigned,void,volatile\"];\n var COMMON_KEYWORDS = [C_KEYWORDS,\"catch,class,delete,false,import,\" +\n \"new,operator,private,protected,public,this,throw,true,try,typeof\"];\n var CPP_KEYWORDS = [COMMON_KEYWORDS,\"alignof,align_union,asm,axiom,bool,\" +\n \"concept,concept_map,const_cast,constexpr,decltype,delegate,\" +\n \"dynamic_cast,explicit,export,friend,generic,late_check,\" +\n \"mutable,namespace,nullptr,property,reinterpret_cast,static_assert,\" +\n \"static_cast,template,typeid,typename,using,virtual,where\"];\n var JAVA_KEYWORDS = [COMMON_KEYWORDS,\n \"abstract,assert,boolean,byte,extends,final,finally,implements,import,\" +\n \"instanceof,interface,null,native,package,strictfp,super,synchronized,\" +\n \"throws,transient\"];\n var CSHARP_KEYWORDS = [JAVA_KEYWORDS,\n \"as,base,by,checked,decimal,delegate,descending,dynamic,event,\" +\n \"fixed,foreach,from,group,implicit,in,internal,into,is,let,\" +\n \"lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,\" +\n \"sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,\" +\n \"var,virtual,where\"];\n var COFFEE_KEYWORDS = \"all,and,by,catch,class,else,extends,false,finally,\" +\n \"for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,\" +\n \"throw,true,try,unless,until,when,while,yes\";\n var JSCRIPT_KEYWORDS = [COMMON_KEYWORDS,\n \"debugger,eval,export,function,get,null,set,undefined,var,with,\" +\n \"Infinity,NaN\"];\n var PERL_KEYWORDS = \"caller,delete,die,do,dump,elsif,eval,exit,foreach,for,\" +\n \"goto,if,import,last,local,my,next,no,our,print,package,redo,require,\" +\n \"sub,undef,unless,until,use,wantarray,while,BEGIN,END\";\n var PYTHON_KEYWORDS = [FLOW_CONTROL_KEYWORDS, \"and,as,assert,class,def,del,\" +\n \"elif,except,exec,finally,from,global,import,in,is,lambda,\" +\n \"nonlocal,not,or,pass,print,raise,try,with,yield,\" +\n \"False,True,None\"];\n var RUBY_KEYWORDS = [FLOW_CONTROL_KEYWORDS, \"alias,and,begin,case,class,\" +\n \"def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,\" +\n \"rescue,retry,self,super,then,true,undef,unless,until,when,yield,\" +\n \"BEGIN,END\"];\n var RUST_KEYWORDS = [FLOW_CONTROL_KEYWORDS, \"as,assert,const,copy,drop,\" +\n \"enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,\" +\n \"pub,pure,ref,self,static,struct,true,trait,type,unsafe,use\"];\n var SH_KEYWORDS = [FLOW_CONTROL_KEYWORDS, \"case,done,elif,esac,eval,fi,\" +\n \"function,in,local,set,then,until\"];\n var ALL_KEYWORDS = [\n CPP_KEYWORDS, CSHARP_KEYWORDS, JSCRIPT_KEYWORDS, PERL_KEYWORDS,\n PYTHON_KEYWORDS, RUBY_KEYWORDS, SH_KEYWORDS];\n var C_TYPES = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\\d*)\\b/;\n\n // token style names. correspond to css classes\n /**\n * token style for a string literal\n * @const\n */\n var PR_STRING = 'str';\n /**\n * token style for a keyword\n * @const\n */\n var PR_KEYWORD = 'kwd';\n /**\n * token style for a comment\n * @const\n */\n var PR_COMMENT = 'com';\n /**\n * token style for a type\n * @const\n */\n var PR_TYPE = 'typ';\n /**\n * token style for a literal value. e.g. 1, null, true.\n * @const\n */\n var PR_LITERAL = 'lit';\n /**\n * token style for a punctuation string.\n * @const\n */\n var PR_PUNCTUATION = 'pun';\n /**\n * token style for plain text.\n * @const\n */\n var PR_PLAIN = 'pln';\n\n /**\n * token style for an sgml tag.\n * @const\n */\n var PR_TAG = 'tag';\n /**\n * token style for a markup declaration such as a DOCTYPE.\n * @const\n */\n var PR_DECLARATION = 'dec';\n /**\n * token style for embedded source.\n * @const\n */\n var PR_SOURCE = 'src';\n /**\n * token style for an sgml attribute name.\n * @const\n */\n var PR_ATTRIB_NAME = 'atn';\n /**\n * token style for an sgml attribute value.\n * @const\n */\n var PR_ATTRIB_VALUE = 'atv';\n\n /**\n * A class that indicates a section of markup that is not code, e.g. to allow\n * embedding of line numbers within code listings.\n * @const\n */\n var PR_NOCODE = 'nocode';\n\n \n \n /**\n * A set of tokens that can precede a regular expression literal in\n * javascript\n * http://web.archive.org/web/20070717142515/http://www.mozilla.org/js/language/js20/rationale/syntax.html\n * has the full list, but I've removed ones that might be problematic when\n * seen in languages that don't support regular expression literals.\n *\n * Specifically, I've removed any keywords that can't precede a regexp\n * literal in a syntactically legal javascript program, and I've removed the\n * \"in\" keyword since it's not a keyword in many languages, and might be used\n * as a count of inches.\n *\n *
The link above does not accurately describe EcmaScript rules since\n * it fails to distinguish between (a=++/b/i) and (a++/b/i) but it works\n * very well in practice.\n *\n * @private\n * @const\n */\n var REGEXP_PRECEDER_PATTERN = '(?:^^\\\\.?|[+-]|[!=]=?=?|\\\\#|%=?|&&?=?|\\\\(|\\\\*=?|[+\\\\-]=|->|\\\\/=?|::?|<=?|>>?>?=?|,|;|\\\\?|@|\\\\[|~|{|\\\\^\\\\^?=?|\\\\|\\\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\\\s*';\n \n // CAVEAT: this does not properly handle the case where a regular\n // expression immediately follows another since a regular expression may\n // have flags for case-sensitivity and the like. Having regexp tokens\n // adjacent is not valid in any language I'm aware of, so I'm punting.\n // TODO: maybe style special characters inside a regexp as punctuation.\n\n /**\n * Given a group of {@link RegExp}s, returns a {@code RegExp} that globally\n * matches the union of the sets of strings matched by the input RegExp.\n * Since it matches globally, if the input strings have a start-of-input\n * anchor (/^.../), it is ignored for the purposes of unioning.\n * @param {Array.} regexs non multiline, non-global regexs.\n * @return {RegExp} a global regex.\n */\n function combinePrefixPatterns(regexs) {\n var capturedGroupIndex = 0;\n \n var needToFoldCase = false;\n var ignoreCase = false;\n for (var i = 0, n = regexs.length; i < n; ++i) {\n var regex = regexs[i];\n if (regex.ignoreCase) {\n ignoreCase = true;\n } else if (/[a-z]/i.test(regex.source.replace(\n /\\\\u[0-9a-f]{4}|\\\\x[0-9a-f]{2}|\\\\[^ux]/gi, ''))) {\n needToFoldCase = true;\n ignoreCase = false;\n break;\n }\n }\n \n var escapeCharToCodeUnit = {\n 'b': 8,\n 't': 9,\n 'n': 0xa,\n 'v': 0xb,\n 'f': 0xc,\n 'r': 0xd\n };\n \n function decodeEscape(charsetPart) {\n var cc0 = charsetPart.charCodeAt(0);\n if (cc0 !== 92 /* \\\\ */) {\n return cc0;\n }\n var c1 = charsetPart.charAt(1);\n cc0 = escapeCharToCodeUnit[c1];\n if (cc0) {\n return cc0;\n } else if ('0' <= c1 && c1 <= '7') {\n return parseInt(charsetPart.substring(1), 8);\n } else if (c1 === 'u' || c1 === 'x') {\n return parseInt(charsetPart.substring(2), 16);\n } else {\n return charsetPart.charCodeAt(1);\n }\n }\n \n function encodeEscape(charCode) {\n if (charCode < 0x20) {\n return (charCode < 0x10 ? '\\\\x0' : '\\\\x') + charCode.toString(16);\n }\n var ch = String.fromCharCode(charCode);\n return (ch === '\\\\' || ch === '-' || ch === ']' || ch === '^')\n ? \"\\\\\" + ch : ch;\n }\n \n function caseFoldCharset(charSet) {\n var charsetParts = charSet.substring(1, charSet.length - 1).match(\n new RegExp(\n '\\\\\\\\u[0-9A-Fa-f]{4}'\n + '|\\\\\\\\x[0-9A-Fa-f]{2}'\n + '|\\\\\\\\[0-3][0-7]{0,2}'\n + '|\\\\\\\\[0-7]{1,2}'\n + '|\\\\\\\\[\\\\s\\\\S]'\n + '|-'\n + '|[^-\\\\\\\\]',\n 'g'));\n var ranges = [];\n var inverse = charsetParts[0] === '^';\n \n var out = ['['];\n if (inverse) { out.push('^'); }\n \n for (var i = inverse ? 1 : 0, n = charsetParts.length; i < n; ++i) {\n var p = charsetParts[i];\n if (/\\\\[bdsw]/i.test(p)) { // Don't muck with named groups.\n out.push(p);\n } else {\n var start = decodeEscape(p);\n var end;\n if (i + 2 < n && '-' === charsetParts[i + 1]) {\n end = decodeEscape(charsetParts[i + 2]);\n i += 2;\n } else {\n end = start;\n }\n ranges.push([start, end]);\n // If the range might intersect letters, then expand it.\n // This case handling is too simplistic.\n // It does not deal with non-latin case folding.\n // It works for latin source code identifiers though.\n if (!(end < 65 || start > 122)) {\n if (!(end < 65 || start > 90)) {\n ranges.push([Math.max(65, start) | 32, Math.min(end, 90) | 32]);\n }\n if (!(end < 97 || start > 122)) {\n ranges.push([Math.max(97, start) & ~32, Math.min(end, 122) & ~32]);\n }\n }\n }\n }\n \n // [[1, 10], [3, 4], [8, 12], [14, 14], [16, 16], [17, 17]]\n // -> [[1, 12], [14, 14], [16, 17]]\n ranges.sort(function (a, b) { return (a[0] - b[0]) || (b[1] - a[1]); });\n var consolidatedRanges = [];\n var lastRange = [];\n for (var i = 0; i < ranges.length; ++i) {\n var range = ranges[i];\n if (range[0] <= lastRange[1] + 1) {\n lastRange[1] = Math.max(lastRange[1], range[1]);\n } else {\n consolidatedRanges.push(lastRange = range);\n }\n }\n \n for (var i = 0; i < consolidatedRanges.length; ++i) {\n var range = consolidatedRanges[i];\n out.push(encodeEscape(range[0]));\n if (range[1] > range[0]) {\n if (range[1] + 1 > range[0]) { out.push('-'); }\n out.push(encodeEscape(range[1]));\n }\n }\n out.push(']');\n return out.join('');\n }\n \n function allowAnywhereFoldCaseAndRenumberGroups(regex) {\n // Split into character sets, escape sequences, punctuation strings\n // like ('(', '(?:', ')', '^'), and runs of characters that do not\n // include any of the above.\n var parts = regex.source.match(\n new RegExp(\n '(?:'\n + '\\\\[(?:[^\\\\x5C\\\\x5D]|\\\\\\\\[\\\\s\\\\S])*\\\\]' // a character set\n + '|\\\\\\\\u[A-Fa-f0-9]{4}' // a unicode escape\n + '|\\\\\\\\x[A-Fa-f0-9]{2}' // a hex escape\n + '|\\\\\\\\[0-9]+' // a back-reference or octal escape\n + '|\\\\\\\\[^ux0-9]' // other escape sequence\n + '|\\\\(\\\\?[:!=]' // start of a non-capturing group\n + '|[\\\\(\\\\)\\\\^]' // start/end of a group, or line start\n + '|[^\\\\x5B\\\\x5C\\\\(\\\\)\\\\^]+' // run of other characters\n + ')',\n 'g'));\n var n = parts.length;\n \n // Maps captured group numbers to the number they will occupy in\n // the output or to -1 if that has not been determined, or to\n // undefined if they need not be capturing in the output.\n var capturedGroups = [];\n \n // Walk over and identify back references to build the capturedGroups\n // mapping.\n for (var i = 0, groupIndex = 0; i < n; ++i) {\n var p = parts[i];\n if (p === '(') {\n // groups are 1-indexed, so max group index is count of '('\n ++groupIndex;\n } else if ('\\\\' === p.charAt(0)) {\n var decimalValue = +p.substring(1);\n if (decimalValue) {\n if (decimalValue <= groupIndex) {\n capturedGroups[decimalValue] = -1;\n } else {\n // Replace with an unambiguous escape sequence so that\n // an octal escape sequence does not turn into a backreference\n // to a capturing group from an earlier regex.\n parts[i] = encodeEscape(decimalValue);\n }\n }\n }\n }\n \n // Renumber groups and reduce capturing groups to non-capturing groups\n // where possible.\n for (var i = 1; i < capturedGroups.length; ++i) {\n if (-1 === capturedGroups[i]) {\n capturedGroups[i] = ++capturedGroupIndex;\n }\n }\n for (var i = 0, groupIndex = 0; i < n; ++i) {\n var p = parts[i];\n if (p === '(') {\n ++groupIndex;\n if (!capturedGroups[groupIndex]) {\n parts[i] = '(?:';\n }\n } else if ('\\\\' === p.charAt(0)) {\n var decimalValue = +p.substring(1);\n if (decimalValue && decimalValue <= groupIndex) {\n parts[i] = '\\\\' + capturedGroups[decimalValue];\n }\n }\n }\n \n // Remove any prefix anchors so that the output will match anywhere.\n // ^^ really does mean an anchored match though.\n for (var i = 0; i < n; ++i) {\n if ('^' === parts[i] && '^' !== parts[i + 1]) { parts[i] = ''; }\n }\n \n // Expand letters to groups to handle mixing of case-sensitive and\n // case-insensitive patterns if necessary.\n if (regex.ignoreCase && needToFoldCase) {\n for (var i = 0; i < n; ++i) {\n var p = parts[i];\n var ch0 = p.charAt(0);\n if (p.length >= 2 && ch0 === '[') {\n parts[i] = caseFoldCharset(p);\n } else if (ch0 !== '\\\\') {\n // TODO: handle letters in numeric escapes.\n parts[i] = p.replace(\n /[a-zA-Z]/g,\n function (ch) {\n var cc = ch.charCodeAt(0);\n return '[' + String.fromCharCode(cc & ~32, cc | 32) + ']';\n });\n }\n }\n }\n \n return parts.join('');\n }\n \n var rewritten = [];\n for (var i = 0, n = regexs.length; i < n; ++i) {\n var regex = regexs[i];\n if (regex.global || regex.multiline) { throw new Error('' + regex); }\n rewritten.push(\n '(?:' + allowAnywhereFoldCaseAndRenumberGroups(regex) + ')');\n }\n \n return new RegExp(rewritten.join('|'), ignoreCase ? 'gi' : 'g');\n }\n\n /**\n * Split markup into a string of source code and an array mapping ranges in\n * that string to the text nodes in which they appear.\n *\n * \n * The HTML DOM structure:
\n * \n * (Element \"p\"\n * (Element \"b\"\n * (Text \"print \")) ; #1\n * (Text \"'Hello '\") ; #2\n * (Element \"br\") ; #3\n * (Text \" + 'World';\")) ; #4\n * \n * \n * corresponds to the HTML\n * {@code
print 'Hello ' + 'World';
}.
\n *\n * \n * It will produce the output:
\n * \n * {\n * sourceCode: \"print 'Hello '\\n + 'World';\",\n * // 1 2\n * // 012345678901234 5678901234567\n * spans: [0, #1, 6, #2, 14, #3, 15, #4]\n * }\n * \n * \n * where #1 is a reference to the {@code \"print \"} text node above, and so\n * on for the other text nodes.\n *
\n *\n * \n * The {@code} spans array is an array of pairs. Even elements are the start\n * indices of substrings, and odd elements are the text nodes (or BR elements)\n * that contain the text for those substrings.\n * Substrings continue until the next index or the end of the source.\n *
\n *\n * @param {Node} node an HTML DOM subtree containing source-code.\n * @param {boolean} isPreformatted true if white-space in text nodes should\n * be considered significant.\n * @return {Object} source code and the text nodes in which they occur.\n */\n function extractSourceSpans(node, isPreformatted) {\n var nocode = /(?:^|\\s)nocode(?:\\s|$)/;\n \n var chunks = [];\n var length = 0;\n var spans = [];\n var k = 0;\n \n function walk(node) {\n var type = node.nodeType;\n if (type == 1) { // Element\n if (nocode.test(node.className)) { return; }\n for (var child = node.firstChild; child; child = child.nextSibling) {\n walk(child);\n }\n var nodeName = node.nodeName.toLowerCase();\n if ('br' === nodeName || 'li' === nodeName) {\n chunks[k] = '\\n';\n spans[k << 1] = length++;\n spans[(k++ << 1) | 1] = node;\n }\n } else if (type == 3 || type == 4) { // Text\n var text = node.nodeValue;\n if (text.length) {\n if (!isPreformatted) {\n text = text.replace(/[ \\t\\r\\n]+/g, ' ');\n } else {\n text = text.replace(/\\r\\n?/g, '\\n'); // Normalize newlines.\n }\n // TODO: handle tabs here?\n chunks[k] = text;\n spans[k << 1] = length;\n length += text.length;\n spans[(k++ << 1) | 1] = node;\n }\n }\n }\n \n walk(node);\n \n return {\n sourceCode: chunks.join('').replace(/\\n$/, ''),\n spans: spans\n };\n }\n\n /**\n * Apply the given language handler to sourceCode and add the resulting\n * decorations to out.\n * @param {number} basePos the index of sourceCode within the chunk of source\n * whose decorations are already present on out.\n */\n function appendDecorations(basePos, sourceCode, langHandler, out) {\n if (!sourceCode) { return; }\n var job = {\n sourceCode: sourceCode,\n basePos: basePos\n };\n langHandler(job);\n out.push.apply(out, job.decorations);\n }\n\n var notWs = /\\S/;\n\n /**\n * Given an element, if it contains only one child element and any text nodes\n * it contains contain only space characters, return the sole child element.\n * Otherwise returns undefined.\n * \n * This is meant to return the CODE element in {@code
} when\n * there is a single child element that contains all the non-space textual\n * content, but not to return anything where there are multiple child elements\n * as in {@code ...... } or when there\n * is textual content.\n */\n function childContentWrapper(element) {\n var wrapper = undefined;\n for (var c = element.firstChild; c; c = c.nextSibling) {\n var type = c.nodeType;\n wrapper = (type === 1) // Element Node\n ? (wrapper ? element : c)\n : (type === 3) // Text Node\n ? (notWs.test(c.nodeValue) ? element : wrapper)\n : wrapper;\n }\n return wrapper === element ? undefined : wrapper;\n }\n\n /** Given triples of [style, pattern, context] returns a lexing function,\n * The lexing function interprets the patterns to find token boundaries and\n * returns a decoration list of the form\n * [index_0, style_0, index_1, style_1, ..., index_n, style_n]\n * where index_n is an index into the sourceCode, and style_n is a style\n * constant like PR_PLAIN. index_n-1 <= index_n, and style_n-1 applies to\n * all characters in sourceCode[index_n-1:index_n].\n *\n * The stylePatterns is a list whose elements have the form\n * [style : string, pattern : RegExp, DEPRECATED, shortcut : string].\n *\n * Style is a style constant like PR_PLAIN, or can be a string of the\n * form 'lang-FOO', where FOO is a language extension describing the\n * language of the portion of the token in $1 after pattern executes.\n * E.g., if style is 'lang-lisp', and group 1 contains the text\n * '(hello (world))', then that portion of the token will be passed to the\n * registered lisp handler for formatting.\n * The text before and after group 1 will be restyled using this decorator\n * so decorators should take care that this doesn't result in infinite\n * recursion. For example, the HTML lexer rule for SCRIPT elements looks\n * something like ['lang-js', /<[s]cript>(.+?)<\\/script>/]. This may match\n * '
-
-
-
-
-
- Languages : CH
- Javascript code prettifier
-
- Setup
-
- Download a distribution
- Include the script and stylesheets in your document
- (you will need to make sure the css and js file are on your server, and
- adjust the paths in the script and link tag)
-
-<link href="prettify.css" type="text/css" rel="stylesheet" />
-<script type="text/javascript" src="prettify.js"></script>
- Add onload="prettyPrint()" to your
- document's body tag.
- Modify the stylesheet to get the coloring you prefer
-
-
- Usage
- Put code snippets in
- <pre class="prettyprint">...</pre>
- or <code class="prettyprint">...</code>
- and it will automatically be pretty printed.
-
-
-
- The original
- Prettier
-
- class Voila {
-public:
- // Voila
- static const string VOILA = "Voila";
-
- // will not interfere with embedded tags .
-}
-
- class Voila {
-public:
- // Voila
- static const string VOILA = "Voila";
-
- // will not interfere with embedded tags .
-}
-
-
- FAQ
- Which languages does it work for?
- The comments in prettify.js are authoritative but the lexer
- should work on a number of languages including C and friends,
- Java, Python, Bash, SQL, HTML, XML, CSS, Javascript, and Makefiles.
- It works passably on Ruby, PHP, VB, and Awk and a decent subset of Perl
- and Ruby, but, because of commenting conventions, doesn't work on
- Smalltalk, or CAML-like languages.
-
- LISPy languages are supported via an extension:
- lang-lisp.js .
- And similarly for
- CSS ,
- Haskell ,
- Lua ,
- OCAML, SML, F# ,
- Visual Basic ,
- SQL ,
- Protocol Buffers , and
- WikiText ..
-
-
If you'd like to add an extension for your favorite language, please
- look at src/lang-lisp.js and file an
- issue including your language extension, and a testcase.
-
- How do I specify which language my code is in?
- You don't need to specify the language since prettyprint()
- will guess. You can specify a language by specifying the language extension
- along with the prettyprint class like so:
- <pre class="prettyprint lang-html ">
- The lang-* class specifies the language file extensions.
- File extensions supported by default include
- "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
- "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
- "xhtml", "xml", "xsl".
-</pre>
-
- It doesn't work on <obfuscated code sample> ?
- Yes. Prettifying obfuscated code is like putting lipstick on a pig
- — i.e. outside the scope of this tool.
-
- Which browsers does it work with?
- It's been tested with IE 6, Firefox 1.5 & 2, and Safari 2.0.4.
- Look at the test page to see if it
- works in your browser.
-
- What's changed?
- See the change log
-
- Why doesn't Prettyprinting of strings work on WordPress?
- Apparently wordpress does "smart quoting" which changes close quotes.
- This causes end quotes to not match up with open quotes.
-
This breaks prettifying as well as copying and pasting of code samples.
- See
- WordPress's help center for info on how to stop smart quoting of code
- snippets.
-
- How do I put line numbers in my code?
- You can use the linenums class to turn on line
- numbering. If your code doesn't start at line number 1, you can
- add a colon and a line number to the end of that class as in
- linenums:52.
-
-
For example
-
<pre class="prettyprint linenums:4 "
->// This is line 4.
-foo();
-bar();
-baz();
-boo();
-far();
-faz();
-<pre>
- produces
-// This is line 4.
-foo();
-bar();
-baz();
-boo();
-far();
-faz();
-
-
- How do I prevent a portion of markup from being marked as code?
- You can use the nocode class to identify a span of markup
- that is not code.
-
<pre class=prettyprint>
-int x = foo(); /* This is a comment <span class="nocode">This is not code</span>
- Continuation of comment */
-int y = bar();
-</pre>
-produces
-
-int x = foo(); /* This is a comment This is not code
- Continuation of comment */
-int y = bar();
-
-
- For a more complete example see the issue22
- testcase .
-
- I get an error message "a is not a function" or "opt_whenDone is not a function"
- If you are calling prettyPrint via an event handler, wrap it in a function.
- Instead of doing
-
- addEventListener('load', prettyPrint, false);
-
- wrap it in a closure like
-
- addEventListener('load', function (event) { prettyPrint() }, false);
-
- so that the browser does not pass an event object to prettyPrint which
- will confuse it.
-
-
-
-
-
-
diff --git a/src/templates/pages/reference/assets/vendor/prettify/prettify-min.css b/src/templates/pages/reference/assets/vendor/prettify/prettify-min.css
deleted file mode 100644
index d44b3a2282..0000000000
--- a/src/templates/pages/reference/assets/vendor/prettify/prettify-min.css
+++ /dev/null
@@ -1 +0,0 @@
-.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file
diff --git a/src/templates/pages/reference/assets/vendor/prettify/prettify-min.js b/src/templates/pages/reference/assets/vendor/prettify/prettify-min.js
deleted file mode 100644
index 4845d05d4b..0000000000
--- a/src/templates/pages/reference/assets/vendor/prettify/prettify-min.js
+++ /dev/null
@@ -1 +0,0 @@
-window.PR_SHOULD_USE_CONTINUATION=true;var prettyPrintOne;var prettyPrint;(function(){var O=window;var j=["break,continue,do,else,for,if,return,while"];var v=[j,"auto,case,char,const,default,double,enum,extern,float,goto,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile"];var q=[v,"catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof"];var m=[q,"alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,dynamic_cast,explicit,export,friend,inline,late_check,mutable,namespace,nullptr,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where"];var y=[q,"abstract,boolean,byte,extends,final,finally,implements,import,instanceof,null,native,package,strictfp,super,synchronized,throws,transient"];var T=[y,"as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,interface,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where"];var s="all,and,by,catch,class,else,extends,false,finally,for,if,in,is,isnt,loop,new,no,not,null,of,off,on,or,return,super,then,throw,true,try,unless,until,when,while,yes";var x=[q,"debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN"];var t="caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END";var J=[j,"and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None"];var g=[j,"alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END"];var I=[j,"case,done,elif,esac,eval,fi,function,in,local,set,then,until"];var B=[m,T,x,t+J,g,I];var f=/^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/;var D="str";var A="kwd";var k="com";var Q="typ";var H="lit";var M="pun";var G="pln";var n="tag";var F="dec";var K="src";var R="atn";var o="atv";var P="nocode";var N="(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*";function l(ab){var af=0;var U=false;var ae=false;for(var X=0,W=ab.length;X122)){if(!(am<65||ai>90)){ah.push([Math.max(65,ai)|32,Math.min(am,90)|32])}if(!(am<97||ai>122)){ah.push([Math.max(97,ai)&~32,Math.min(am,122)&~32])}}}}ah.sort(function(aw,av){return(aw[0]-av[0])||(av[1]-aw[1])});var ak=[];var aq=[];for(var at=0;atau[0]){if(au[1]+1>au[0]){ao.push("-")}ao.push(V(au[1]))}}ao.push("]");return ao.join("")}function Y(an){var al=an.source.match(new RegExp("(?:\\[(?:[^\\x5C\\x5D]|\\\\[\\s\\S])*\\]|\\\\u[A-Fa-f0-9]{4}|\\\\x[A-Fa-f0-9]{2}|\\\\[0-9]+|\\\\[^ux0-9]|\\(\\?[:!=]|[\\(\\)\\^]|[^\\x5B\\x5C\\(\\)\\^]+)","g"));var aj=al.length;var ap=[];for(var am=0,ao=0;am=2&&ak==="["){al[am]=Z(ai)}else{if(ak!=="\\"){al[am]=ai.replace(/[a-zA-Z]/g,function(aq){var ar=aq.charCodeAt(0);return"["+String.fromCharCode(ar&~32,ar|32)+"]"})}}}}return al.join("")}var ac=[];for(var X=0,W=ab.length;X=0;){U[ae.charAt(ag)]=aa}}var ah=aa[1];var ac=""+ah;if(!ai.hasOwnProperty(ac)){aj.push(ah);ai[ac]=null}}aj.push(/[\0-\uffff]/);X=l(aj)})();var Z=V.length;var Y=function(aj){var ab=aj.sourceCode,aa=aj.basePos;var af=[aa,G];var ah=0;var ap=ab.match(X)||[];var al={};for(var ag=0,at=ap.length;ag=5&&"lang-"===ar.substring(0,5);if(ao&&!(ak&&typeof ak[1]==="string")){ao=false;ar=K}if(!ao){al[ai]=ar}}var ad=ah;ah+=ai.length;if(!ao){af.push(aa+ad,ar)}else{var an=ak[1];var am=ai.indexOf(an);var ae=am+an.length;if(ak[2]){ae=ai.length-ak[2].length;am=ae-an.length}var au=ar.substring(5);C(aa+ad,ai.substring(0,am),Y,af);C(aa+ad+am,an,r(au,an),af);C(aa+ad+ae,ai.substring(ae),Y,af)}}aj.decorations=af};return Y}function i(V){var Y=[],U=[];if(V.tripleQuotedStrings){Y.push([D,/^(?:\'\'\'(?:[^\'\\]|\\[\s\S]|\'{1,2}(?=[^\']))*(?:\'\'\'|$)|\"\"\"(?:[^\"\\]|\\[\s\S]|\"{1,2}(?=[^\"]))*(?:\"\"\"|$)|\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$))/,null,"'\""])}else{if(V.multiLineStrings){Y.push([D,/^(?:\'(?:[^\\\']|\\[\s\S])*(?:\'|$)|\"(?:[^\\\"]|\\[\s\S])*(?:\"|$)|\`(?:[^\\\`]|\\[\s\S])*(?:\`|$))/,null,"'\"`"])}else{Y.push([D,/^(?:\'(?:[^\\\'\r\n]|\\.)*(?:\'|$)|\"(?:[^\\\"\r\n]|\\.)*(?:\"|$))/,null,"\"'"])}}if(V.verbatimStrings){U.push([D,/^@\"(?:[^\"]|\"\")*(?:\"|$)/,null])}var ab=V.hashComments;if(ab){if(V.cStyleComments){if(ab>1){Y.push([k,/^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/,null,"#"])}else{Y.push([k,/^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\r\n]*)/,null,"#"])}U.push([D,/^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/,null])}else{Y.push([k,/^#[^\r\n]*/,null,"#"])}}if(V.cStyleComments){U.push([k,/^\/\/[^\r\n]*/,null]);U.push([k,/^\/\*[\s\S]*?(?:\*\/|$)/,null])}if(V.regexLiterals){var aa=("/(?=[^/*])(?:[^/\\x5B\\x5C]|\\x5C[\\s\\S]|\\x5B(?:[^\\x5C\\x5D]|\\x5C[\\s\\S])*(?:\\x5D|$))+/");U.push(["lang-regex",new RegExp("^"+N+"("+aa+")")])}var X=V.types;if(X){U.push([Q,X])}var W=(""+V.keywords).replace(/^ | $/g,"");if(W.length){U.push([A,new RegExp("^(?:"+W.replace(/[\s,]+/g,"|")+")\\b"),null])}Y.push([G,/^\s+/,null," \r\n\t\xA0"]);var Z=/^.[^\s\w\.$@\'\"\`\/\\]*/;U.push([H,/^@[a-z_$][a-z_$@0-9]*/i,null],[Q,/^(?:[@_]?[A-Z]+[a-z][A-Za-z_$@0-9]*|\w+_t\b)/,null],[G,/^[a-z_$][a-z_$@0-9]*/i,null],[H,new RegExp("^(?:0x[a-f0-9]+|(?:\\d(?:_\\d+)*\\d*(?:\\.\\d*)?|\\.\\d\\+)(?:e[+\\-]?\\d+)?)[a-z]*","i"),null,"0123456789"],[G,/^\\[\s\S]?/,null],[M,Z,null]);return h(Y,U)}var L=i({keywords:B,hashComments:true,cStyleComments:true,multiLineStrings:true,regexLiterals:true});function S(W,ah,aa){var V=/(?:^|\s)nocode(?:\s|$)/;var ac=/\r\n?|\n/;var ad=W.ownerDocument;var ag=ad.createElement("li");while(W.firstChild){ag.appendChild(W.firstChild)}var X=[ag];function af(am){switch(am.nodeType){case 1:if(V.test(am.className)){break}if("br"===am.nodeName){ae(am);if(am.parentNode){am.parentNode.removeChild(am)}}else{for(var ao=am.firstChild;ao;ao=ao.nextSibling){af(ao)}}break;case 3:case 4:if(aa){var an=am.nodeValue;var ak=an.match(ac);if(ak){var aj=an.substring(0,ak.index);am.nodeValue=aj;var ai=an.substring(ak.index+ak[0].length);if(ai){var al=am.parentNode;al.insertBefore(ad.createTextNode(ai),am.nextSibling)}ae(am);if(!aj){am.parentNode.removeChild(am)}}}break}}function ae(al){while(!al.nextSibling){al=al.parentNode;if(!al){return}}function aj(am,at){var ar=at?am.cloneNode(false):am;var ap=am.parentNode;if(ap){var aq=aj(ap,1);var ao=am.nextSibling;aq.appendChild(ar);for(var an=ao;an;an=ao){ao=an.nextSibling;aq.appendChild(an)}}return ar}var ai=aj(al.nextSibling,0);for(var ak;(ak=ai.parentNode)&&ak.nodeType===1;){ai=ak}X.push(ai)}for(var Z=0;Z=U){aj+=2}if(Y>=ar){ac+=2}}}finally{if(au){au.style.display=ak}}}var u={};function d(W,X){for(var U=X.length;--U>=0;){var V=X[U];if(!u.hasOwnProperty(V)){u[V]=W}else{if(O.console){console.warn("cannot override language handler %s",V)}}}}function r(V,U){if(!(V&&u.hasOwnProperty(V))){V=/^\s*]*(?:>|$)/],[k,/^<\!--[\s\S]*?(?:-\->|$)/],["lang-",/^<\?([\s\S]+?)(?:\?>|$)/],["lang-",/^<%([\s\S]+?)(?:%>|$)/],[M,/^(?:<[%?]|[%?]>)/],["lang-",/^]*>([\s\S]+?)<\/xmp\b[^>]*>/i],["lang-js",/^
@@ -120,14 +119,24 @@ slug: reference/
// field
$("[aria-labelledby='reference-fields']").children('li').each(function (i) {
var fieldName = $(this).children('.paramname').children('a').text();
- $(this).children(':last').html('' + entry[fieldName].description + '
');
+ let descr = '';
+ var paragraphs = entry[fieldName].description;
+ for (var i in paragraphs) {
+ descr += '' + paragraphs[i] + '
';
+ }
+ $(this).children('.paramtype').html(descr);
});
// method
$("[aria-labelledby='reference-methods']").children('li').each(function (i) {
- var method = $(this).find(':first').children('a').text();
+ var method = $(this).children('.paramname').children('a').text();
// removes the brackets
var methodName = method.substring(0, method.length - 2);
- $(this).find(':last').html('' + entry[methodName].description + '
');
+ let descr = '';
+ var paragraphs = entry[methodName].description;
+ for (var i in paragraphs) {
+ descr += '' + paragraphs[i] + '
';
+ }
+ $(this).children('.paramtype').html(descr);
});
}
}
diff --git a/src/templates/pages/showcase/featuring/casey-louise.hbs b/src/templates/pages/showcase/featuring/casey-louise.hbs
index 96d445c494..1b9e2f20ac 100644
--- a/src/templates/pages/showcase/featuring/casey-louise.hbs
+++ b/src/templates/pages/showcase/featuring/casey-louise.hbs
@@ -13,8 +13,7 @@ slug: showcase/featuring/
Project Info
-
@@ -33,39 +32,75 @@ slug: showcase/featuring/
{{#i18n "project-links"}}{{/i18n}}
Q&A
-
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-casey-louise"}}{{/i18n}}
- {{#i18n "project-a-1-2-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-3-casey-louise"}}{{/i18n}}Processing {{#i18n "project-a-1-4-casey-louise"}}{{/i18n}}
- {{#i18n "project-a-1-5-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-casey-louise"}}{{/i18n}}xStory {{#i18n "project-a-2-2-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-3"}}{{/i18n}}
- {{#i18n "project-a-3-1-casey-louise"}}{{/i18n}}Shiffman {{#i18n "project-a-3-2-casey-louise"}}{{/i18n}}
- {{#i18n "project-a-3-3-casey-louise"}}{{/i18n}}push() {{#i18n "project-a-3-4-casey-louise"}}{{/i18n}}pop() {{#i18n "project-a-3-5-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-1-casey-louise"}}{{/i18n}}{{#i18n "adam-ferris-repo-casey-louise"}}{{/i18n}} {{#i18n "project-a-4-2-casey-louise"}}{{/i18n}}Kate Hollenbach {{#i18n "project-a-4-3-casey-louise"}}{{/i18n}}Stalgia Grigg {{#i18n "project-a-4-4-casey-louise"}}{{/i18n}}{{#i18n "webgl-casey-louise"}}{{/i18n}} {{#i18n "project-a-4-5-casey-louise"}}{{/i18n}}
- {{#i18n "project-a-4-6-casey-louise"}}{{/i18n}}{{#i18n "openframeworks-book-casey-louise"}}{{/i18n}} {{#i18n "project-a-4-7-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-5"}}{{/i18n}}
- {{#i18n "project-a-5-1-casey-louise"}}{{/i18n}}xStory GitHub {{#i18n "project-a-5-2-casey-louise"}}{{/i18n}}
-
- {{#i18n "project-q-6"}}{{/i18n}}
- Casey: cargocollective.com/kcconch , @kcconch (GitHub)
- Louise: louiselessel.com , @louiselessel (GitHub)
+
+
+
{{#i18n "project-q-1-1"}}{{/i18n}}
+
{{#i18n "project-a-1-1-casey-louise"}}{{/i18n}}
+
{{#i18n "project-a-1-2-casey-louise"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-1-2"}}{{/i18n}}
+
{{#i18n "project-a-1-3-casey-louise"}}{{/i18n}}Processing {{#i18n "project-a-1-4-casey-louise"}}{{/i18n}}
+
{{#i18n "project-a-1-5-casey-louise"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-2"}}{{/i18n}}
+
{{#i18n "project-a-2-1-casey-louise"}}{{/i18n}}xStory {{#i18n "project-a-2-2-casey-louise"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
{{#i18n "project-a-3-1-casey-louise"}}{{/i18n}}Shiffman {{#i18n "project-a-3-2-casey-louise"}}{{/i18n}}
+
+ {{#i18n "project-a-3-3-casey-louise"}}{{/i18n}}push() {{#i18n "project-a-3-4-casey-louise"}}{{/i18n}}pop() {{#i18n "project-a-3-5-casey-louise"}}{{/i18n}}
+
+
+
+
+
+
+
+
{{#i18n "project-q-5"}}{{/i18n}}
+
{{#i18n "project-a-5-1-casey-louise"}}{{/i18n}}xStory GitHub {{#i18n "project-a-5-2-casey-louise"}}{{/i18n}}
+
+
+
diff --git a/src/templates/pages/showcase/featuring/daein-chung.hbs b/src/templates/pages/showcase/featuring/daein-chung.hbs
index face3f2be7..ec7b602b6e 100644
--- a/src/templates/pages/showcase/featuring/daein-chung.hbs
+++ b/src/templates/pages/showcase/featuring/daein-chung.hbs
@@ -12,8 +12,7 @@ slug: showcase/featuring/
Project Info
-
@@ -30,8 +29,10 @@ slug: showcase/featuring/
{{#i18n "project-links"}}{{/i18n}}
@@ -41,26 +42,50 @@ slug: showcase/featuring/
Q&A
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-chung"}}{{/i18n}}
-
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-2-chung"}}{{/i18n}}Processing {{#i18n "project-a-1-3-chung"}}{{/i18n}}
-
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-chung"}}{{/i18n}}{{#i18n "dan-shiffman-matterjs-tutorial"}}{{/i18n}} {{#i18n "project-a-2-2-chung"}}{{/i18n}}
-
- {{#i18n "project-q-3"}}{{/i18n}}
- {{#i18n "project-a-3-1-chung"}}{{/i18n}}online editor {{#i18n "project-a-3-2-chung"}}{{/i18n}}
-
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-1-chung"}}{{/i18n}}WebGL {{#i18n "project-a-4-2-chung"}}{{/i18n}}Electron {{#i18n "project-a-4-3-chung"}}{{/i18n}}
-
- {{#i18n "project-q-5"}}{{/i18n}}
- {{#i18n "project-a-5-1-chung"}}{{/i18n}}Canvas Saver boilerplate {{#i18n "project-a-5-2-chung"}}{{/i18n}}
-
- {{#i18n "project-q-6"}}{{/i18n}}
- @cdaein (Instagram)
+
+
{{#i18n "project-q-1-1"}}{{/i18n}}
+
{{#i18n "project-a-1-1-chung"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-1-2"}}{{/i18n}}
+
{{#i18n "project-a-1-2-chung"}}{{/i18n}}Processing {{#i18n "project-a-1-3-chung"}}{{/i18n}}
+
+
+
+
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
{{#i18n "project-a-3-1-chung"}}{{/i18n}}online editor {{#i18n "project-a-3-2-chung"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-4"}}{{/i18n}}
+
{{#i18n "project-a-4-1-chung"}}{{/i18n}}WebGL {{#i18n "project-a-4-2-chung"}}{{/i18n}}Electron {{#i18n "project-a-4-3-chung"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-5"}}{{/i18n}}
+
{{#i18n "project-a-5-1-chung"}}{{/i18n}}Canvas Saver
+ boilerplate {{#i18n "project-a-5-2-chung"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-6"}}{{/i18n}}
+
@cdaein (Instagram)
+
diff --git a/src/templates/pages/showcase/featuring/moon-xin.hbs b/src/templates/pages/showcase/featuring/moon-xin.hbs
index a137d6236e..084b390e37 100644
--- a/src/templates/pages/showcase/featuring/moon-xin.hbs
+++ b/src/templates/pages/showcase/featuring/moon-xin.hbs
@@ -12,7 +12,8 @@ slug: showcase/featuring/
Project Info
-
+
@@ -41,28 +44,55 @@ slug: showcase/featuring/
Q&A
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-moon"}}{{/i18n}}
-
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-2-moon"}}{{/i18n}}Xin Xin {{#i18n "project-a-1-3-moon"}}{{/i18n}}Processing Community Day {{#i18n "project-a-1-4-moon"}}{{/i18n}}{{#i18n "pcd-la-moon"}}{{/i18n}} {{#i18n "project-a-1-5-moon"}}{{/i18n}}
-
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-moon"}}{{/i18n}}{{#i18n "codetrain-moon"}}{{/i18n}} {{#i18n "project-a-2-2-moon"}}{{/i18n}}{{#i18n "p5-reference-moon"}}{{/i18n}} {{#i18n "project-a-2-3-moon"}}{{/i18n}}
-
- {{#i18n "project-q-3"}}{{/i18n}}
- {{#i18n "project-a-3-1-moon"}}{{/i18n}}type {{#i18n "project-a-3-2-moon"}}{{/i18n}}transformation {{#i18n "project-a-3-3-moon"}}{{/i18n}}rotate() {{#i18n "project-a-3-4-moon"}}{{/i18n}}
-
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-1-moon"}}{{/i18n}}
-
- {{#i18n "project-q-5"}}{{/i18n}}
- {{#i18n "project-a-5-1-moon"}}{{/i18n}}Design Triennale {{#i18n "project-a-5-2-moon"}}{{/i18n}}
-
- {{#i18n "project-q-6"}}{{/i18n}}
- moonjang.com
- @borderrider (Instagram)
-
+
+
{{#i18n "project-q-1-1"}}{{/i18n}}
+
{{#i18n "project-a-1-1-moon"}}{{/i18n}}
+
+
+
+
+
+
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
{{#i18n "project-a-3-1-moon"}}{{/i18n}}type {{#i18n "project-a-3-2-moon"}}{{/i18n}}transformation {{#i18n "project-a-3-3-moon"}}{{/i18n}}rotate() {{#i18n "project-a-3-4-moon"}}{{/i18n}}
+
+
+
+
+
{{#i18n "project-q-4"}}{{/i18n}}
+
{{#i18n "project-a-4-1-moon"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-5"}}{{/i18n}}
+
{{#i18n "project-a-5-1-moon"}}{{/i18n}}Design Triennale {{#i18n "project-a-5-2-moon"}}{{/i18n}}
+
+
+
diff --git a/src/templates/pages/showcase/featuring/phuong-ngo.hbs b/src/templates/pages/showcase/featuring/phuong-ngo.hbs
index 6aeb73634a..db7bce4e4e 100644
--- a/src/templates/pages/showcase/featuring/phuong-ngo.hbs
+++ b/src/templates/pages/showcase/featuring/phuong-ngo.hbs
@@ -12,9 +12,7 @@ slug: showcase/featuring/
Project Info
-
-
-
+
@@ -41,28 +41,58 @@ slug: showcase/featuring/
Q&A
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-phuong"}}{{/i18n}}School of Machines, Making & Make-Believe {{#i18n "project-a-1-2-phuong"}}{{/i18n}}
-
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-3-phuong"}}{{/i18n}}Bots and Machine Learning {{#i18n "project-a-1-4-phuong"}}{{/i18n}}Yining Shi .
+
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-phuong"}}{{/i18n}}Pixaki {{#i18n "project-a-2-2-phuong"}}{{/i18n}}p5.play {{#i18n "project-a-2-3-phuong"}}{{/i18n}}
- {{#i18n "project-a-2-4-phuong"}}{{/i18n}}{{#i18n "p5-sketch-by-chjno-phuong"}}{{/i18n}} {{#i18n "project-a-2-5-phuong"}}{{/i18n}}
- {{#i18n "project-a-2-6-phuong"}}{{/i18n}}Google's Teachable Machine 2 {{#i18n "project-a-2-7-phuong"}}{{/i18n}}ml5.js .
-
- {{#i18n "project-q-3"}}{{/i18n}}
- {{#i18n "project-a-3-1-phuong"}}{{/i18n}}p5.js library {{#i18n "project-a-3-2-phuong"}}{{/i18n}}createDiv() , addClass() {{#i18n "project-a-3-3-phuong"}}{{/i18n}}draw() {{#i18n "project-a-3-4-phuong"}}{{/i18n}}
+
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-1-phuong"}}{{/i18n}}
+
- {{#i18n "project-q-5"}}{{/i18n}}
- {{#i18n "project-a-5-1-phuong"}}{{/i18n}}{{#i18n "school-of-machines-phuong"}}{{/i18n}} {{#i18n "project-a-5-2-phuong"}}{{/i18n}}
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
{{#i18n "project-a-3-1-phuong"}}{{/i18n}}p5.js
+ library {{#i18n "project-a-3-2-phuong"}}{{/i18n}}createDiv() ,
+ addClass() {{#i18n "project-a-3-3-phuong"}}{{/i18n}}draw() {{#i18n "project-a-3-4-phuong"}}{{/i18n}}
+
+
- {{#i18n "project-q-6"}}{{/i18n}}
- yonaymoris.me
+
+
{{#i18n "project-q-4"}}{{/i18n}}
+
{{#i18n "project-a-4-1-phuong"}}{{/i18n}}
+
+
+
+
@@ -72,4 +102,4 @@ slug: showcase/featuring/
{{> asterisk}}
-
+
\ No newline at end of file
diff --git a/src/templates/pages/showcase/featuring/qianqian-ye.hbs b/src/templates/pages/showcase/featuring/qianqian-ye.hbs
index a35a82039d..b0fb5f5eb4 100644
--- a/src/templates/pages/showcase/featuring/qianqian-ye.hbs
+++ b/src/templates/pages/showcase/featuring/qianqian-ye.hbs
@@ -12,9 +12,7 @@ slug: showcase/featuring/
Project Info
-
-
-
+
@@ -42,30 +41,47 @@ slug: showcase/featuring/
Q&A
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-2-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-qianqian"}}{{/i18n}}
- {{#i18n "project-a-2-2-qianqian"}}{{/i18n}}Coding Train {{#i18n "project-a-2-3-qianqian"}}{{/i18n}}
- {{#i18n "project-a-2-4-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-3"}}{{/i18n}}
- {{#i18n "project-a-3-1-qianqian"}}{{/i18n}}p5.js Web Editor {{#i18n "project-a-3-2-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-1-qianqian"}}{{/i18n}}
- {{#i18n "project-a-4-2-qianqian"}}{{/i18n}}
- {{#i18n "project-a-4-3-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-5"}}{{/i18n}}
- {{#i18n "project-a-5-1-qianqian"}}{{/i18n}}Tiny Tech Zines {{#i18n "project-a-5-2-qianqian"}}{{/i18n}}
-
- {{#i18n "project-q-6"}}{{/i18n}}
- qianqian-ye.com
+
+
{{#i18n "project-q-1-1"}}{{/i18n}}
+
{{#i18n "project-a-1-1-qianqian"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-1-2"}}{{/i18n}}
+
{{#i18n "project-a-1-2-qianqian"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-2"}}{{/i18n}}
+
{{#i18n "project-a-2-1-qianqian"}}{{/i18n}}
+
{{#i18n "project-a-2-2-qianqian"}}{{/i18n}}Coding Train {{#i18n "project-a-2-3-qianqian"}}{{/i18n}}
+
{{#i18n "project-a-2-4-qianqian"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
{{#i18n "project-a-3-1-qianqian"}}{{/i18n}}p5.js Web Editor {{#i18n "project-a-3-2-qianqian"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-4"}}{{/i18n}}
+
{{#i18n "project-a-4-1-qianqian"}}{{/i18n}}
+
{{#i18n "project-a-4-2-qianqian"}}{{/i18n}}
+
{{#i18n "project-a-4-3-qianqian"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-5"}}{{/i18n}}
+
{{#i18n "project-a-5-1-qianqian"}}{{/i18n}}Tiny Tech Zines {{#i18n "project-a-5-2-qianqian"}}{{/i18n}}
+
+
+
diff --git a/src/templates/pages/showcase/featuring/roni-cantor.hbs b/src/templates/pages/showcase/featuring/roni-cantor.hbs
index 7239e26786..ade359ae2e 100644
--- a/src/templates/pages/showcase/featuring/roni-cantor.hbs
+++ b/src/templates/pages/showcase/featuring/roni-cantor.hbs
@@ -9,13 +9,13 @@ slug: showcase/featuring/
{{#i18n "project-roni"}}{{/i18n}}
-
+
@@ -38,26 +40,48 @@ slug: showcase/featuring/
Q&A
- {{#i18n "project-q-1-1"}}{{/i18n}}
- {{#i18n "project-a-1-1-roni-cantor"}}{{/i18n}}
- {{#i18n "project-q-1-2"}}{{/i18n}}
- {{#i18n "project-a-1-2-roni-cantor"}}{{/i18n}}NYU ITP Camp {{#i18n "project-a-1-3-roni-cantor"}}{{/i18n}}Processing {{#i18n "project-a-1-4-roni-cantor"}}{{/i18n}}
-
- {{#i18n "project-q-2"}}{{/i18n}}
- {{#i18n "project-a-2-1-roni-cantor"}}{{/i18n}}p5.js Web Editor {{#i18n "project-a-2-2-roni-cantor"}}{{/i18n}}SVG {{#i18n "project-a-2-3-roni-cantor"}}{{/i18n}}AxiDraw V3 {{#i18n "project-a-2-4-roni-cantor"}}{{/i18n}}Inkscape {{#i18n "project-a-2-5-roni-cantor"}}{{/i18n}}
-
- {{#i18n "project-q-3"}}{{/i18n}}
- lerp() {{#i18n "project-a-3-roni-cantor"}}{{/i18n}}
-
- {{#i18n "project-q-4"}}{{/i18n}}
- {{#i18n "project-a-4-roni-cantor"}}{{/i18n}}
-
- {{#i18n "project-q-5"}}{{/i18n}}
- @gandyworks {{#i18n "project-a-5-roni-cantor"}}{{/i18n}}
-
- {{#i18n "project-q-6"}}{{/i18n}}
- ronicantor.com
- @roni.cantor {{#i18n "project-a-6-roni-cantor"}}{{/i18n}}
+
+
{{#i18n "project-q-1-1"}}{{/i18n}}
+
{{#i18n "project-a-1-1-roni-cantor"}}{{/i18n}}
+
+
+
{{#i18n "project-q-1-2"}}{{/i18n}}
+
{{#i18n "project-a-1-2-roni-cantor"}}{{/i18n}}NYU ITP Camp {{#i18n "project-a-1-3-roni-cantor"}}{{/i18n}}Processing {{#i18n "project-a-1-4-roni-cantor"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-2"}}{{/i18n}}
+
{{#i18n "project-a-2-1-roni-cantor"}}{{/i18n}}p5.js Web Editor {{#i18n "project-a-2-2-roni-cantor"}}{{/i18n}}SVG {{#i18n "project-a-2-3-roni-cantor"}}{{/i18n}}AxiDraw
+ V3 {{#i18n "project-a-2-4-roni-cantor"}}{{/i18n}}Inkscape {{#i18n "project-a-2-5-roni-cantor"}}{{/i18n}}
+
+
+
{{#i18n "project-q-3"}}{{/i18n}}
+
+ lerp() {{#i18n "project-a-3-roni-cantor"}}{{/i18n}}
+
+
+
+
{{#i18n "project-q-4"}}{{/i18n}}
+
{{#i18n "project-a-4-roni-cantor"}}{{/i18n}}
+
+
+
{{#i18n "project-q-5"}}{{/i18n}}
+
@gandyworks {{#i18n "project-a-5-roni-cantor"}}{{/i18n}}
+
+
diff --git a/src/templates/pages/teach/index.hbs b/src/templates/pages/teach/index.hbs
index e8164f3cca..910f8d913a 100644
--- a/src/templates/pages/teach/index.hbs
+++ b/src/templates/pages/teach/index.hbs
@@ -30,7 +30,8 @@ slug: teach/
- 🌺 {{#i18n "teach-filter1"}}{{/i18n}}
+
+ {{#i18n "teach-filter1"}}{{/i18n}}
{{#i18n "teach-filter1-label1"}}{{/i18n}}
{{#i18n "teach-filter1-label2"}}{{/i18n}}
{{#i18n "teach-filter1-label3"}}{{/i18n}}
@@ -50,7 +51,7 @@ slug: teach/
- 📍 {{#i18n "teach-filter2"}}{{/i18n}}
+ {{#i18n "teach-filter2"}}{{/i18n}}
{{#i18n "teach-filter2-label1"}}{{/i18n}}
{{#i18n "teach-filter2-label2"}}{{/i18n}}
@@ -63,7 +64,7 @@ slug: teach/
- 📅 {{#i18n "teach-filter3"}}{{/i18n}}
+ {{#i18n "teach-filter3"}}{{/i18n}}
~2014
2015
2016
@@ -71,9 +72,10 @@ slug: teach/
2018
2019
2020
+ 2021
- 📊 {{#i18n "teach-filter4"}}{{/i18n}}
+ {{#i18n "teach-filter4"}}{{/i18n}}
{{#i18n "teach-filter4-label1"}}{{/i18n}}
{{#i18n "teach-filter4-label2"}}{{/i18n}}
{{#i18n "teach-filter4-label3"}}{{/i18n}}
@@ -90,31 +92,58 @@ slug: teach/
- "{{#i18n "teach-case1-title"}}{{/i18n}}", {{#i18n "teach-case1-lead-name"}}{{/i18n}}
+
- "Making The Thing that Makes the Thing: Exploring Generative Art & Design with p5.js", Priti Pandurangan & Ajith Ranka
+ Signing Coders {{#i18n "teach-case12-lead-name"}}{{/i18n}} 2015~
- CC Fest (Creative Coding Festival), Saber
+
+
+ CC Fest (Creative Coding Festival)
+
+ Saber
+ 2016~
+
- "Taller Introducción a la Programación Creativa con p5.js", Aarón Montoya-Moraga
+
+
+ {{#i18n "teach-case4-title"}}{{/i18n}}
+ Aarón Montoya-Moraga
+ 2018
+
- "Introduction to Generative Drawing", Adam Herst
- Open Lecture "Creative Coding: 2020", Shunsuke Takawo
+ Introduction to p5js Bérenger Recoules (a.k.a. b2renger) 2018~
+ {{#i18n "teach-case14-title"}}{{/i18n}} Lauren McCarthy 2019
- "Creative Coding for Static Graphics", Shunsuke Takawo
+ Digital Weaving & Physical Computing Workshops Qianqian Ye & Evelyn Masso 2019
- "Generative Typography", Dae In Chung
+ Creative Coding for Static Graphics Shunsuke Takawo 2019
+
+ Machine Learning for the Web Yining Shi 2019
+
+ Generative Typography {{#i18n "teach-case8-lead-name"}}{{/i18n}} 2020
+
+ Making the Thing that Makes the Thing: Exploring Generative Art & Design with p5.js Priti Pandurangan & Ajith Ranka 2020
+
+ Introduction to Generative Drawing Adam Herst 2020
+
+ Open Lecture "Creative Coding: 2020 Shunsuke Takawo 2020
+
+ Painting with Code Andreas Refsgaard 2020
+
+ {{#i18n "teach-case1-title"}}{{/i18n}} {{#i18n "teach-case1-lead-name"}}{{/i18n}} 2020
+
+ {{#i18n "teach-case17-title"}}{{/i18n}} Sebastián Zavatarelli 2020
+
+ {{#i18n "teach-case16-title"}}{{/i18n}} {{#i18n "teach-case16-lead-name"}}{{/i18n}} 2020
+
+ Introduction to p5.js and JavaScript Nico Reski
- "Machine Learning for the Web", Yining Shi
- "Introduction to p5.js and JavaScript", Nico Reski
- "Digital Weaving & Physical Computing Workshop Series", Qianqian Ye & Evelyn Masso
- "Signing Coders", Taeyoon Choi
@@ -129,7 +158,7 @@ slug: teach/
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
-
+
×
+
+
+
×
+
+
+
+
+ {{#i18n "teach-case13-title"}}{{/i18n}}
+
+ {{#i18n "teach-case13-lead-name"}}{{/i18n}}
+
+ {{!-- "{{#i18n "teach-case13-speech"}}{{/i18n}}"
--}}
+
+
+
+
+
+
+ {{#i18n "teach-case-subtitle1"}}{{/i18n}}
{{#i18n "teach-case13-content1"}}{{/i18n}}
{{#i18n "teach-case13-content1-1"}}{{/i18n}}
+
+ {{#i18n "teach-case-subtitle2"}}{{/i18n}}
{{#i18n "teach-case13-content2"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-case-subtitle3"}}{{/i18n}}
{{#i18n "teach-case13-content3"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle4"}}{{/i18n}}
{{#i18n "teach-case13-content4"}}{{/i18n}}
+
+
+ 📝 {{#i18n "teach-case-subtitle5"}}{{/i18n}}
{{#i18n "teach-case13-content5"}}{{/i18n}}
🔗 {{#i18n "teach-case13-content5-1"}}{{/i18n}}
+
+
+ {{#i18n "teach-filter1-label1"}}{{/i18n}} {{#i18n "teach-filter1-label2"}}{{/i18n}} {{#i18n "teach-filter1-label9"}}{{/i18n}} {{#i18n "teach-filter1-label10"}}{{/i18n}} {{#i18n "teach-filter1-label11"}}{{/i18n}} {{#i18n "teach-filter1-label12"}}{{/i18n}}
+
+
+
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+ {{#i18n "teach-case14-title"}}{{/i18n}}
+
+ {{#i18n "teach-case14-lead-name"}}{{/i18n}}
+
+ "{{#i18n "teach-case14-speech"}}{{/i18n}}"
+
+
+
+
+
+
+ {{#i18n "teach-case-subtitle1"}}{{/i18n}}
{{#i18n "teach-case14-content1"}}{{/i18n}}
{{#i18n "teach-case14-content1-1"}}{{/i18n}}
{{#i18n "teach-case14-content1-2"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle2"}}{{/i18n}}
{{#i18n "teach-case14-content2"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-case-subtitle3"}}{{/i18n}}
{{#i18n "teach-case14-content3"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle4"}}{{/i18n}}
{{#i18n "teach-case14-content4"}}{{/i18n}}
+
+
+ 📝 {{#i18n "teach-case-subtitle5"}}{{/i18n}}
{{#i18n "teach-case14-content5"}}{{/i18n}}
+ {{#i18n "teach-case14-content5-1"}}{{/i18n}}
+ {{#i18n "teach-case14-content5-2"}}{{/i18n}}
+ {{#i18n "teach-case14-content5-3"}}{{/i18n}}
+ {{#i18n "teach-case14-content5-4"}}{{/i18n}}
+ 🔗 {{#i18n "teach-case14-content5-5"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-filter1-label1"}}{{/i18n}} {{#i18n "teach-filter1-label2"}}{{/i18n}} {{#i18n "teach-filter1-label3"}}{{/i18n}} {{#i18n "teach-filter1-label8"}}{{/i18n}} {{#i18n "teach-filter1-label10"}}{{/i18n}} {{#i18n "teach-filter1-label11"}}{{/i18n}} {{#i18n "teach-filter1-label12"}}{{/i18n}} {{#i18n "teach-filter1-label15"}}{{/i18n}}
+
+
+
+
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+ {{#i18n "teach-case15-title"}}{{/i18n}}
+
+ {{#i18n "teach-case15-lead-name"}}{{/i18n}}
+
+ {{!-- "{{#i18n "teach-case15-speech"}}{{/i18n}}"
--}}
+
+
+
+
+
+
+
+ {{#i18n "teach-case-subtitle1"}}{{/i18n}}
+ {{#i18n "teach-case15-content1"}}{{/i18n}} 🌐
+ {{#i18n "teach-case15-content1-1"}}{{/i18n}}
+
+
+
+
+ {{#i18n "teach-case-subtitle2"}}{{/i18n}}
+ {{#i18n "teach-case15-content2"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-case-subtitle3"}}{{/i18n}}
{{#i18n "teach-case15-content3"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle4"}}{{/i18n}}
{{#i18n "teach-case15-content4"}}{{/i18n}}
+
+
+ 📝 {{#i18n "teach-case-subtitle5"}}{{/i18n}}
🔗 {{#i18n "teach-case15-content5"}}{{/i18n}} {{#i18n "teach-case15-content5-1"}}{{/i18n}}
+
+
+ {{#i18n "teach-filter1-label1"}}{{/i18n}}
+
+
+
+
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+ {{#i18n "teach-case16-title"}}{{/i18n}}
+
+ {{#i18n "teach-case16-lead-name"}}{{/i18n}}
+
+ "{{#i18n "teach-case16-speech"}}{{/i18n}}"
+
+
+
+
+
+
+ {{#i18n "teach-case-subtitle1"}}{{/i18n}}
{{#i18n "teach-case16-content1"}}{{/i18n}} 🌐
{{#i18n "teach-case16-content1-1"}}{{/i18n}}
+
+ {{#i18n "teach-case-subtitle2"}}{{/i18n}}
{{#i18n "teach-case16-content2"}}{{/i18n}}
{{#i18n "teach-case16-content2-1"}}{{/i18n}}
{{#i18n "teach-case16-content2-2"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-case-subtitle3"}}{{/i18n}}
{{#i18n "teach-case16-content3"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle4"}}{{/i18n}}
{{#i18n "teach-case16-content4"}}{{/i18n}}
+
+
+ 📝 {{#i18n "teach-case-subtitle5"}}{{/i18n}}
🔗 {{#i18n "teach-case16-content5"}}{{/i18n}} {{#i18n "teach-case16-content5-1"}}{{/i18n}}
🔗 {{#i18n "teach-case16-content5-2"}}{{/i18n}} , {{#i18n "teach-case16-content5-3"}}{{/i18n}} , {{#i18n "teach-case16-content5-4"}}{{/i18n}}
+
+
+ {{#i18n "teach-filter1-label2"}}{{/i18n}} {{#i18n "teach-filter1-label3"}}{{/i18n}} {{#i18n "teach-filter1-label10"}}{{/i18n}} {{#i18n "teach-filter1-label11"}}{{/i18n}} {{#i18n "teach-filter1-label15"}}{{/i18n}}
+
+
+
+
+
+
+
+
+
+
+
+
×
+
+
+
+
+ {{#i18n "teach-case17-title"}}{{/i18n}}
+
+ {{#i18n "teach-case17-lead-name"}}{{/i18n}}
+
+ "{{#i18n "teach-case17-speech"}}{{/i18n}}"
+
+
+
+
+
+
+ {{#i18n "teach-case-subtitle1"}}{{/i18n}}
{{#i18n "teach-case17-content1"}}{{/i18n}} 🌐
{{#i18n "teach-case17-content1-1"}}{{/i18n}}
+
+ {{#i18n "teach-case-subtitle2"}}{{/i18n}}
{{#i18n "teach-case17-content2"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-case-subtitle3"}}{{/i18n}}
{{#i18n "teach-case17-content3"}}{{/i18n}}
+
+
+ {{#i18n "teach-case-subtitle4"}}{{/i18n}}
{{#i18n "teach-case17-content4"}}{{/i18n}}
+
+
+ 📝 {{#i18n "teach-case-subtitle5"}}{{/i18n}}
{{#i18n "teach-case17-content5"}}{{/i18n}}
🔗 {{#i18n "teach-case17-content5-1"}}{{/i18n}}
+
+
+
+ {{#i18n "teach-filter1-label1"}}{{/i18n}}
+ {{#i18n "teach-filter1-label2"}}{{/i18n}}
+ {{#i18n "teach-filter1-label3"}}{{/i18n}}
+ {{#i18n "teach-filter1-label6"}}{{/i18n}}
+ {{#i18n "teach-filter1-label7"}}{{/i18n}}
+ {{#i18n "teach-filter1-label9"}}{{/i18n}}
+ {{#i18n "teach-filter1-label10"}}{{/i18n}}
+ {{#i18n "teach-filter1-label13"}}{{/i18n}}
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/templates/partials/footer.hbs b/src/templates/partials/footer.hbs
index ee3fca411d..978949b4d3 100644
--- a/src/templates/partials/footer.hbs
+++ b/src/templates/partials/footer.hbs
@@ -3,6 +3,11 @@ title: footer
---
+
{{#i18n "footer1"}}{{/i18n}}Moira
+ Turner {{#i18n "footer2"}}{{/i18n}}Lauren Lee
+ McCarthy {{#i18n "footer3"}}{{/i18n}}Processing
+ Foundation {{#i18n "footer4"}}{{/i18n}}
+ NYU ITP . {{#i18n "footer5"}}{{/i18n}}Jerel Johnson . ©
+ Info.
+
\ No newline at end of file
diff --git a/src/templates/partials/header.hbs b/src/templates/partials/header.hbs
index eace9eb46a..601f00c75c 100644
--- a/src/templates/partials/header.hbs
+++ b/src/templates/partials/header.hbs
@@ -11,8 +11,7 @@ title: header
Processing for Pi
Processing Foundation
-
Skip to main content
-
-
\ No newline at end of file
+ {{!--
This season, we need your help! Click here to #SupportP5!
--}}
+
diff --git a/src/templates/partials/sidebar.hbs b/src/templates/partials/sidebar.hbs
index 621fd864c6..604976268b 100644
--- a/src/templates/partials/sidebar.hbs
+++ b/src/templates/partials/sidebar.hbs
@@ -19,7 +19,7 @@ slug: sidebar
{{#i18n "Examples"}}{{/i18n}}
{{#i18n "Books"}}{{/i18n}}
{{#i18n "Community"}}{{/i18n}}
-
{{#i18n "Showcase"}}{{/i18n}}
+
{{#i18n "Showcase"}}{{/i18n}}
{{#i18n "Forum"}}{{/i18n}}
GitHub
Twitter
diff --git a/src/yuidoc-p5-theme-src/scripts/tpl/item.html b/src/yuidoc-p5-theme-src/scripts/tpl/item.html
index 197aa6df1f..f38a5db283 100644
--- a/src/yuidoc-p5-theme-src/scripts/tpl/item.html
+++ b/src/yuidoc-p5-theme-src/scripts/tpl/item.html
@@ -13,7 +13,7 @@
Examples
<% } %>
-
+
Description
<% if (item.deprecated) { %>
@@ -21,7 +21,7 @@
Description
Deprecated: <%=item.name%><% if (item.isMethod) { %>()<% } %> is deprecated and will be removed in a future version of p5. <% if (item.deprecationMessage) { %><%=item.deprecationMessage%><% } %>
<% } %>
-
+
<%= item.description %>
@@ -61,11 +61,11 @@
Description
<% if (isConstructor || !isClass) { %>
-
+
Syntax
<% syntaxes.forEach(function(syntax) { %>
-
<%= syntax %>
+
<%= syntax %>
<% }) %>
diff --git a/src/yuidoc-p5-theme-src/scripts/tpl/library.html b/src/yuidoc-p5-theme-src/scripts/tpl/library.html
index ab183f813e..4b22e754a4 100644
--- a/src/yuidoc-p5-theme-src/scripts/tpl/library.html
+++ b/src/yuidoc-p5-theme-src/scripts/tpl/library.html
@@ -12,7 +12,7 @@
<%= module.name %> library
<% } %>
<% if (group.name !== module.name && group.name !== 'p5') { %>
<% if (group.hash) { %>
class="core"<% } %>><% } %>
- <%=group.name%>
+ <%=group.name%>
<% if (group.hash) { %> <% } %>
<% } %>
<% _.each(group.items.filter(function(item) {return item.access !== 'private'}), function(item) { %>
diff --git a/updatei18nFiles.js b/updatei18nFiles.js
new file mode 100644
index 0000000000..4840709bad
--- /dev/null
+++ b/updatei18nFiles.js
@@ -0,0 +1,71 @@
+const fs = require('fs');
+const flat = require('flat');
+const yaml = require('js-yaml');
+
+// updates the content of the translated i18n files for the Reference
+// so that they're up to date with the English version (en.json)
+function updateJSON(originalJSONPath, translatedJSONPath) {
+ const originalJSONFile = fs.readFileSync(originalJSONPath);
+ const originalJSON = JSON.parse(originalJSONFile);
+ const translJSONFile = fs.readFileSync(translatedJSONPath);
+
+ let translJSON;
+ try {
+ translJSON = JSON.parse(translJSONFile);
+ } catch (error) {
+ translJSON = {};
+ }
+
+ const newJSON = updatei18nObj(
+ flat.flatten(originalJSON, { delimiter: '/' }),
+ flat.flatten(translJSON, { delimiter: '/' })
+ );
+
+ fs.writeFileSync(
+ translatedJSONPath,
+ JSON.stringify(flat.unflatten(newJSON, { delimiter: '/' }), undefined, 2)
+ );
+}
+
+// updates the content of the translated i18n files for the Website
+// so that they're up to date with the English version (en.yml)
+function updateYAML(originalYAMLPath, translatedYAMLPath) {
+ const originalYAMLFile = fs.readFileSync(originalYAMLPath, 'utf8');
+ const originalYAML = yaml.safeLoad(originalYAMLFile);
+ const translYAMLFile = fs.readFileSync(translatedYAMLPath, 'utf8');
+ const translYAML = yaml.safeLoad(translYAMLFile);
+
+ const newYAML = updatei18nObj(
+ flat.flatten(originalYAML, { delimiter: '/' }),
+ flat.flatten(translYAML, { delimiter: '/' })
+ );
+
+ fs.writeFileSync(
+ translatedYAMLPath,
+ yaml.safeDump(flat.unflatten(newYAML, { delimiter: '/' }))
+ );
+}
+
+// ** using the original English text as default value **
+// merges the keys of the originalObj with the ones of the translatedObj,
+// in order to keep the translatedObj updated
+function updatei18nObj(originalObj, translatedObj) {
+ // if the translated object is empty
+ if (!translatedObj) {
+ return originalObj;
+ }
+ const newTranslatedObj = {};
+ for (var key in originalObj) {
+ if (key in translatedObj) {
+ newTranslatedObj[key] = translatedObj[key];
+ } else {
+ newTranslatedObj[key] = originalObj[key];
+ }
+ }
+ return newTranslatedObj;
+}
+
+module.exports = {
+ updateJSON,
+ updateYAML
+};