title | description |
---|---|
Artsy Learns to Code v2 |
Second iteration on ALTC |
See the original ALTC write-up here for the previous iteration's abstract and structure.
Let's kick off another session of Artsy Learns to Code!
- It's social! Lets Artsy people interact across their normal silos
- Build empathy across Artsy
- It's fun! Boosts morale
- Empowers non-technical people
- Gets engineers used to teaching regularly
- Learners can opt to specify different areas of engineering/CS they'd like to learn about. We'll do our best to accomodate these requests, but won't guarantee that we can match mentors' expertises with learners' requests.
- If students don't have a specific idea for what they'd like to learn (which is totally ok!), we have a default suggested teaching plan: p5.js aka Processing in JS.
Similar to the previous ALTC, we'll aim to have trios: one mentor and two learners (depending on availability), who will be partners throughout Artsy Learns to Code. If fewer mentors are available, we can adjust accordingly.
As a default course, we'll recommend p5.js, a direct JS port of Processing. We hope that working with p5.js will be more engaging than a course on vanilla JS. It also embodies the Artsy value Art x Science.
We'll start with this youtube tutorial, which is taught by a professor at NYU's ITP (Interactive Telecommunications Program):
https://www.youtube.com/user/shiffman/playlists?view=50&sort=dd&shelf_id=2
In an effort to keep attendance up and keep learners motivated, we won't enforce a schedule that all learners should be following. Instead, groups can set their own cadence and work on a schedule that works for them.
Then groups can decide on what they might want to make with p5.js, and mentors can guide them. Teams are encouraged to use the p5.js online editor and Glitch to avoid local setup difficulties.
- Fundamentals:
- Syntax
- Data types & Variables
- Conditionals
- Functions
- Loops
- Arrays
- Objects
- Web Development:
- What is a library/package?
- How does JS/CSS/HTML interact with each other?
- What is a server? A client?
- https://github.com/alex/what-happens-when
- More General Software Development:
- Algorithms
- Classes/OOP
- SQL
- Passion to learn and try something new
- An open mind
- (Optional) Come with an idea of what they want to learn
- (Optional) Come with an idea of how much time they'd like to commit to
- Mentors should expect to spend 1-2 hrs a week of their time to meet regularly and answer questions async on slack.
- Mentors should come with an idea of how many weeks they'd like to commit to, but we recommend somewhere in the ballpark of 3-4 months, similar to the last ALTC. Actual timeline will be at mentor's discretion.
- Mentors should feel empowered to come up with their own teaching plan (and ideally share it with the rest of the mentors!). Note: mentors should consider the extra time required to craft their own teaching plan.
- Act as a resource for when learners have questions.
- Act as a motivator for when learners get frustrated.
- Normalize frustration (https://www.youtube.com/watch?v=QYjPBcqo1-s)
- If mentor group agrees to go the route of learning Processing.js, then the mentor should try to familiarize themselves with p5js, or at least follow along with the course.
Here are a couple examples that @sepans have created:
Project Name + Concept it teaches | Link |
---|---|
Bouncy bubble (conditionals) | https://editor.p5js.org/sepans/sketches/8I6gA3O-1 |
Damien Hirst (loops) | https://editor.p5js.org/sepans/sketches/o34yoVD3y |
Damien Hist 2 (array to store randomized colors) | https://editor.p5js.org/sepans/sketches/RBjEojE3g |
Bouncy DVD with Object (objects) | https://editor.p5js.org/sepans/sketches/jmu-Gb0u7 |
300 DVDs (objects + functions + arrays) | https://editor.p5js.org/sepans/sketches/yaafYKYN7 |
Sunglass (capturing data and displaying it) | https://editor.p5js.org/sepans/sketches/s9tmMft3R |
Load artwork image from artsy (API) | https://editor.p5js.org/sepans/sketches/NbuDfgC47 |
Even more resources that we compiled (thank you @sepans and @bhoggard!):
Resource Name | Link |
---|---|
Cool p5 sketches to tweak and play with | http://www.generative-gestaltung.de/2/ |
p5 editor | https://editor.p5js.org/ |
p5 video tutorials | https://www.youtube.com/user/shiffman/ |
p5 team on Gtlich | https://glitch.com/@p5js |
Tutorial examples | https://p5js.org/examples/ |
Reference | https://p5js.org/reference/ |
Openprocessing.org | http://openprocessing.org |
The Missing Semester of Your CS Education | https://missing.csail.mit.edu/ |