​​​📝​ Penn Week 14a – p5

​​Show and Tell Display Data 

​​https://lreinhardjr.github.io/exercises/javascript_objects/index.html
​​https://ruthchu.github.io/hw/display_data/index.html
​​https://cecilynish.github.io/projects/displaydata/index.html 
​​https://jasont2022.github.io/exercises/js-data-viz-2/
​​
​​
​​

​​JavaScript Libraries

​​
​​
 
User-uploaded image: giphy.gif
​​
​​
​​Javascript is the foundation of many different libraries. One such library is p5. A library is a JavaScript file that contains a bunch of functions, and those functions accomplish some useful task for your webpage.
​​
​​Most javascript libraries have documentation on how to use them and examples of sites that incorporate them.
​​
​​Libraries are also open source. This means that you can create a JS library on your own and put it into the world. Maybe one day you’ll discover something you find useful, and share it with the world.
​​
​​A couple websites that use p5.js
​​http://midnightcommercial.com/
​​https://spacetypegenerator.com/
​​
​​Other JavaScript Libraries
​​https://threejs.org/
​​https://tonejs.github.io/
​​https://d3js.org/
​​
​​
​​
​​

​​An Oral History on Processing

​​https://eyeondesign.aiga.org/processing-the-software-that-shaped-creative-coding/
​​and 
​​https://eyeondesign.aiga.org/an-oral-history-of-processing-part-two/
​​
​​

​​P5.js

​​For today’s activities, we’re going to use a JavaScript library called p5.js. You can use p5.js for artwork, data visualization, or simply in tandem with HTML, CSS and JavaScript
​​
 
​​
​​https://youtu.be/8j0UDiN7my4
​​
​​We’ll be using the P5 editor. Sign up for an account and link to it on your student portfolio: https://editor.p5js.org/
​​
​​→ your url should look like: https://editor.p5js.org/your_username/sketches
​​

​​The Web Editor

​​
 
User-uploaded image: 01_tasty_pet.png
​​Screenshot of p5.js web editor with circled numbers
​​You’re able to use the web editor w/o being logged in, but please create an account so that you can store and share your sketches.
​​