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
\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
\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<% } %>\n\n<% let methods = _.filter(things, function(item) { return item.itemtype === \'method\' && item.access !== \'private\' }); %>\n<% if (methods.length > 0) { %>\n

Methods

\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 <% if (group.name !== module.name && group.name !== \'p5\') { %>\n <% if (group.hash) { %> class="core"<% } %>><% } %> \n

<%=group.name%>

\n <% if (group.hash) { %>

<% } %>\n <% } %>\n <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%>
\n <% t++; %>\n <% }); %>\n <% if (t >= Math.floor(totalItems/4)) { col++; 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 <% if (group.name !== module.name && group.name !== \'p5\') { %>\n <% if (group.hash) { %> class="core"<% } %>><% } %> \n

<%=group.name%>

\n <% if (group.hash) { %>

<% } %>\n <% } %>\n <% _.each(group.items.filter(function(item) {return item.access !== \'private\'}), function(item) { %>\n class="core"<% } %>><%=item.name%><% if (item.itemtype === \'method\') { %>()<%}%>
\n <% t++; %>\n <% }); %>\n <% if (t >= Math.floor(totalItems/4)) { col++; 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.Elements 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.Elements 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. " ], - "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. " ], - "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