-
Notifications
You must be signed in to change notification settings - Fork 38
Homework Shawn Wednesday
A big part of learning at ITP is learning from each other. So share your work and in exchange you'll get to see everyone else's!
- Do your assignment.
- Contribute a question.
- Post documentation in the form of a blog post. Ideally something visual, some written thoughts, and code. If you are struggling with your sketch and can't get things to work, you should feel free to put your energy into writing about what didn't work (and vent any frustrations!).
- Post your sketch online.
-
SET UP:
- Download the p5.js editor
- Sign up for the ITP ICM Google Group
- Sign up for a Github Account. You need it to edit this wiki page.
-
DO:
- Create your own screen drawing: self-portrait, alien, monster, etc. Use only 2D primitive shapes – arc(), curve(), ellipse(), line(), point(), quad(), rect(), triangle() – and basic color functions – background(), colorMode(), fill(), noFill(), noStroke(), stroke(). Remember to use createCanvas() to specify the dimensions of your window.
-
READ AND WATCH:
-
ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)
Questions | Examples
- How do we use arc() ? I don't understand the start and stop angles. (i also do not entirely understand arcs)
- How can we flip arcs to flow right to left?
- How do we smooth lines that travel at an angle?
- How to combine shapes together? like square and ellipse? or Shapes like Pentagon? - Shir
- Is there a way to change position of an object to a new place like Null object in AE? - Shir
- What systems can I use to better to understand the outcomes of my curves and more efficiently place objects in relationship to one another? -Danielle
- How can programatically repeat shapes across a line or curve? - Leslie
- How can you loop a color change that is visible without using key down or mouse down, make it automatic (if?) - Regina
- Shawn Van Every -- documentation, sketch -- Isn't it beautiful?
- EunJee Kim -- documentation, sketch -- I LOVE MINIONS!
- Ian Gibson -- documentation, sketch -- Miss the weather most.
- Kevin Stirnweis -- documentation, [sketch] (http://www.itp.kevings.com/week1icm/) -- A life goal is to somehow make it to space.
- Rebecca (Marks) Leopold -- documentation, sketch --
- Juan Jose Egusquiza -- documentation, [sketch] (http://www.juanjoegusquiza.com/jose_week1/) --
- Francesca Rodriguez S. -- [documentation] (http://www.franrodriguezsawaya.com/icm/), [sketch] (http://www.franrodriguezsawaya.com/ICM/Fran_w1/) --
- Xiwei Huang -- documentation, sketch -- So cold on the floor.
- Zach Coble -- documentation, sketch
- Wangshu (Serena) Sun -- documentation, sketch -- I love the number seven!!
- Leslie Ruckman -- documentation, sketch -- It's a portal, click the button!
- Shir David -- documentation, sketch.
- Ravyn Whitley -- documentation, sketch
- Christina Choi -- [documentation] (http://www.itp.christinabc.com/class/icm), [sketch] (http://itp.christinabc.com/projects/goldengate/)
- Danielle Butler -- DanielleIsadora.com, Creature
- Reema Shah -- [documentation] (http://www.reemachine.com/?p=38), [sketch] (http://www.reemachine.com/shah_week1/)
- Regina Cantu -- [First ICM entry to my blog] (https://regina-cantu.squarespace.com/lola-does-itp), [some colorful shapes standing on each other] (https://alpha.editor.p5js.org/projects/BkSvii7h) -- This is the weirdest environment!
- Create a sketch that includes (all of these):
- One element controlled by the mouse.
- One element that changes over time, independently of the mouse.
- One element that is different every time you run the sketch.
Homework Links
- Shawn Van Every -- documentation, sketch -- Isn't it beautiful?
- Ian Gibson -- documentation, sketch -- You're fired!
- Kevin Stirnweis -- documentation, sketch -- FYI Moon is really helpful.
- EunJee Kim -- documentation, sketch -- I agree, Moon is super helpful.
- Xiwei Huang -- documentation, sketch -- move then press!
- Zach Coble - documentation, sketch -- digital concrete poetry?
- Francesca Rodriguez S. - documentation, sketch - Alice in wonderland!
- Rebecca Leopold - documentation, [sketch] (http://oldobjectsnewideas.com/_icm/09152015_riversmts/) -- vanishing point
- Danielle Butler -- documentation, sketch-- ya know, texture
- Juan Jose Egusquiza -- documentation, sketch
- Leslie Ruckman -- documentation, sketch
- Shir David -- documentation, sketch
- Christina Choi -- [documentation] (http://itp.christinabc.com/drawing-program/) [sketch] (http://itp.christinabc.com/projects/drawing%20program/)
- Reema Shah -- [documentation] (http://www.reemachine.com/2015/09/16/icm-week-2/), [sketch] (http://www.reemachine.com/shah_week2/)
- Wangshu (Serena) Sun -- [sketch] (http://www.sunwangshu.com/projects/fall-2015/icm/week02/flower3/)
- Ravyn Whitley -- documentation, [sketch] (http://www.ravynwhitley.com/beyonce_week2/)
- Read and Watch:
- variables mouseX, mouseY video tutorial
- variables video tutorial
- JS objects video tutorial
- random video tutorial
- map video tutorial
- Questions (example questions)
- How can I control randomized lines? Can I create a radial pattern? I want to have my sun rays dance!
- Is it possible to have two different "frame rates" or the appearance of it, for two different elements in a sketch? *Are there other ways I can time the appearance and disappearance of things other than with frameRate or mouseClick? *How can I add and layer multiple images? *If I make changes to my sketch whats the best way to update on cyberduck, does it automatically replace the older file? How do I best organize cyber duck in general? *how to make the Mouse draw only in Y or X axes? *Can I create an alternate state "draw" function where after the mouse clicks you are in a whole new draw function? Is this the same as just writing a new loop function?
- Links/Inspiration/Examples (Contribute at least 1 link below)
- Springs
- Loved
- Antichamber
- [Life of Pi] (http://journey.lifeofpimovie.com/)
- [Code and Theory] (http://www.codeandtheory.com/)
- []
-
This week, start working with more use interaction and adding logic into animations (bouncing ball, etc). Try working in pairs. Explore different ways to do that, one person coding, one looking for mistakes or bugs and keeping an eye on the overall.
- Try making a rollover, button, or slider from scratch. Compare your code to the examples on github. Later we'll look at how this compare to interface elements we'll get for free from the browser.
- Create an algorithmic design with simple parameters. (One example is 10PRINT, example code).
- Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.
-
READ / WATCH (Nothing required, read or watch what you find most helpful)
- Stay tuned for a PDF link to Getting Started with p5.js
- John Kuiphoff's animation tutorial
- Videos
Questions (example questions)
- how can i make a roll over for an object in motion? - rl
- Can I randomize the outcome of a mouse click or another action so a different if statement is used each time?
- How can I have my code effected by an analog sensor read out?
- Shawn Van Every -- [documentation] (), [sketch] (http://www.walking-productions.com/icm_2015/week3/)
- Ian Gibson -- [documentation] (http://www.iancgibson.com/gravity/), [sketch] (http://iancgibson.com/ICM-HW3/)
- Kevin Stirnweis -- documentation, sketch
- Xiwei Huang -- documentation, sketch --dumb game is always fun!
- Ravyn Whitley -- documentation, [sketch] (http://www.ravynwhitley.com/week3homeworkICM/)
- Francesca Rodriguez -- [documentation] (http://www.franrodriguezsawaya.com/2015/09/22/big-bang-theory/), [sketch] (http://www.franrodriguezsawaya.com/ICM/Fran_w3/)
- Christina Choi -- [documentation] (http://itp.christinabc.com/superbloodmoon/), [sketch] (http://itp.christinabc.com/projects/eclipse2/)
- Wangshu (Serena) Sun -- [documentation] (http://www.sunwangshu.com/2015/09/22/icm-week-03/), [sketch] (http://www.sunwangshu.com/projects/fall-2015/icm/week03/) -- Click the leaves quickly and see what~ Try scroll up and down as well.
- Shir David (+Juan José) -- documentation, sketch.
- EunJee Kim (+Serena Wangshu Sun) -- documentation, sketch
- Rebecca Leopold -- [documentation] (http://oldobjectsnewideas.com/09232015_rivers-grids-mts/), [sketch] (http://oldobjectsnewideas.com/_icm/09232015_gridsmts/).
- Danielle Butler -- [documentation] (http://www.danielleisadora.com/2015/09/23/intro-to-algorithms/), [sketch] (http://danielleisadora.com/week_3_combined/) -- Math, respect
- Juan Jose Egusquiza (+Shir) -- documentation, sketch
- Zach Coble -- documentation, sketch
- Leslie Ruckman -- documentation, sketch
-
The idea this week is to explore re-organizing your code. If you can, use an existing/previous project and restructure the code using functions and if you are ambitious with objects. If that isn't possible you can to try something new with the use of functions and objects. Aim to keep
setup()
anddraw()
as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. Possibilities (choose one or more):- Reorganize "groups of variables" into objects.
- Break code out of
setup()
anddraw()
into functions. - Use a function to draw a complex design multiple times with different arguments.
- If you are feeling ambitious, try embedding a function into an object.
-
READ / WATCH (Nothing required, read or watch what you find most helpful)
- Videos 5.1-5.4 in the learning p5.js series.
- Stay tuned for a PDF link to Getting Started with p5.js
-
Examples
Questions (example questions)
- Post your question here
- Shawn Van Every -- documentation, [sketches] (http://www.walking-productions.com/icm_2015/week4/)
- Ian Gibson -- documentation, sketch
- Kevin Stirnweis -- documentation, sketch
- Xiwei Huang -- documentation, sketch
- EunJee Kim -- documentation, sketch
- Reema Shah -- [documentation] (http://www.reemachine.com/2015/09/30/icm-weeks-3-4/), [sketch] (http://www.reemachine.com/shah_week4/)
- Wangshu (Serena) Sun -- [documentation] (http://www.sunwangshu.com/2015/09/30/icm-week-04-flower-valley/), [sketch] (http://sunwangshu.com/projects/fall-2015/icm/week04/) -- flower valley
- Shir David -- [documentation] (http://www.shirdaviditp.com/icm-week-4-piano-keyboard-colors-and-notes/), [sketch] (http://www.shirdaviditp.com/Projects/ICM/Shir_David_Week_04/Keyboard_02/)
- Juan Jose Egusquiza --[documentation] (http://www.juanjoegusquiza.com/week-4/), [sketch] (http://juanjoegusquiza.com/assig5.2/)
- Leslie Ruckman --[documentation] (http://www.leslieruckman.com/face-buttons-revisited/), [sketch] (http://www.leslieruckman.com/projects/ruckman_week4/)
- Rebecca Leopold [sketch] (http://oldobjectsnewideas.com/_icm/09272015_rby/) -- i only did about 1/4 the assignment this week.
- Ravyn Whitley [documentation] (http://www.ravynwhitley.com/week-4-homework-still-learning/), [sketch] (http://www.ravynwhitley.com/week_4_hw2/)
- Francesca Rodriguez [sketch] (http://www.franrodriguezsawaya.com/ICM/Fran_w4/) -- I was only able to make a function and an array.
- Zach Coble -- documentation, sketch
- Danielle Butler [documentation] (http://www.danielleisadora.com/2015/09/30/icm-week-5/), [sketch] (http://danielleisadora.com/seabottom/)
- Reminder! All ICM students meet at 11am in the lounge this Friday, Oct. 2nd!
- If you are looking for supplemental material, checkout Chapters 10 and 11 from Getting Started with p5.js
- Design a sketch in an object-oriented fashion. Follow these steps:
- Build a single object out of a class definition. Use a constructor and methods such as "display" and "move".
- Duplicate the object using an array and make as many as you like!
Can you make Smoke? Fireworks? Rain? Snow? A starry sky?
Questions (example questions)
- Post your question here
- Shawn Van Every -- documentation, [sketches] (http://www.walking-productions.com/icm_2015/week5/)
- Ian Gibson -- documentation, sketch
- Kevin Stirnweis -- documentation, sketch
- Shir David -- documentation, sketch
- EunJee Kim -- documentation, sketchI, sketchII
- Wangshu Sun -- documentation, sketch -- Shooting stars! Try move, scroll and click.
- Xiwei -- [documentation] (http://xiweihuang.com/?cat=3), [sketch] (http://xiweihuang.com/icm/hw/week5/)
- Danielle -- [documentation] (http://www.danielleisadora.com/wp-admin/post.php?post=171&action=edit), [a lonely seal] (http://danielleisadora.com/fish2/)
- Juan Jose Egusquiza -- [documentation] (http://www.juanjoegusquiza.com/using-arrays/), [sketch] (http://juanjoegusquiza.com/usingarrays/)
- Rebecca Leopold -- [documentation] (http://oldobjectsnewideas.com/10072015_leavespillarsblades/), [sketch] (http://oldobjectsnewideas.com/_icm/10062015_leavespillarsblades/)
- Zach Coble -- documentation, sketch
- Christina Choi -- [documentation] (http://itp.christinabc.com/class/icm/), [sketch] (http://itp.christinabc.com/projects/snowfall/)
- Francesca Rodriguez -- [sketch] http://www.franrodriguezsawaya.com/ICM/Fran_w5/
- Ravyn Whitley -- I did not have success this week :(. documentation
- Leslie Ruckman -- [documentation] (http://www.leslieruckman.com/eye-poke/), [sketch] (http://leslieruckman.com/projects/ruckman_week5/)
-
READ AND WATCH
- Chapter 13 in Getting Started with P5.js
- Tutorial: Beyond the Canvas in P5
- Introduction to HTML and CSS
- p5.js dom reference
- download examples
-
DO
- Create a webpage that extends beyond the canvas, using p5.dom.js.
Questions (example questions)
- When trying to change slider volume - do you get the information from "volume" inside the DOM library or you use the p5 "Sound Library"?..Could't figure how to connect my slider to the volume..
- Shawn Van Every -- examples from class
- Ian Gibson -- documentation, sketch
- Juan Jose Egusquiza -- sketch
- Zach Coble documentation, sketch
- Leslie Ruckman documentation, sketch
- Kevin Stirnweis documentation, sketch - this isn't working for me :/
- EunJee Kim documentation, sketch - SPARKLES
- Shir David documentation, sketch
- Ravyn Whitley sketch
- Christina Choi [documentation] (http://www.itp.christinabc.com/), [sketch] (http://itp.christinabc.com/projects/moonset/)
- Xiwei Huang [documentation] [sketch] (http://xiweihuang.com/icm/hw/week6dom/)
- Wangshu Sun [documentation] (http://www.sunwangshu.com/2015/10/14/week-07-a-hymmnos-transcriber/), [sketch] (http://sunwangshu.com/projects/fall-2015/icm/week07/) - Hymmnos transcriber
- Francesca Rodriguez [sketch] (http://www.franrodriguezsawaya.com/ICM/DOM+lines/) PROBLEMS!
- Danielle Butler [documentation] (http://www.danielleisadora.com), [sketch] (http://danielleisadora.com/submarine/)
-
READ AND WATCH
- Getting Started with p5.js - chapter 12
- Tutorial about data
- Tutorial about data from Shiffman's Text A to Z class - beware, has some advanced materials.
- Ideas and inspiration
- Art and the API, Jer Thorp
- The Anxieties of Big Data, Kate Crawford
-
DO
- Create a sketch that uses an external data source. Here are some ideas:
- Track any data over the course of a few days (exercise, sleep, computer use, emails sent, emails read, phone usage, eating, etc.). Create a JSON file with the data and visualize the results.
- Use weather data to affect elements in a sketch
- Gather data from a Google Form/Spreadsheet and use in a sketch.
- Create a sketch that uses an external data source. Here are some ideas:
Note that only the names in bold (1/2 of the class) on the wiki will present next week. The second half will present the "media" (video/sound) assignment the following week. You should all complete both assignments. Feel free e-mail me if you would like to switch weeks.
- Your Name [documentation](URL to Documentation), [sketch](URL to Sketch)
- Shawn examples from class
- Christina Choi [documentation] (http://itp.christinabc.com), [sketch] (http://itp.christinabc.com/projects/rainbows/)
- Danielle Butler [documentation] (http://www.danielleisadora.com/2015/10/28/data-feeling-its-power-and-impenetrability/) [sketch] (http://www.danielleisadora.com/foodata2/)
- EunJee Kim** [documentation] (http://eunjee-kim.com/2015/10/21/coding-with-data/), sketch
- Francesca Rodriguez Sawaya [sketch] (http://www.franrodriguezsawaya.com/ICM/Fran_w8/)
- Ian Gibson documentation, sketch
- Juan José Egúsquiza documentation, sketch
- Kevin G Stirnweis documentation, sketch
- Leslie E Ruckman documentation, sketch
- Ravyn L Whitley documentation, sketch
- Rebecca M Leopold documentation, [sketch1] (http://oldobjectsnewideas.com/_icm/10232015_weather/), sketch2
- Reema Shah
- Shir David documentation, [sketch] (http://www.shirdaviditp.com/Projects/ICM/Shir_David_Week_07/Cities/)
- Wangshu Sun documentation, sketch -- the Curiosity Rover
- Xiwei Huang [sketch] http://xiweihuang.com/icm/hw/week7data/
- Zach Coble documentation, sketch
- READ AND WATCH
- Chapter 7 in Getting Started with p5.js.
- All sound and video examples
- p5.sound reference
- Video/capture: p5.MediaElement reference
*DO
- Create a sketch that uses external media (sound or video). Some ideas are:
- Make something responsive to microphone input.
- Create a "photobooth" with augmented snapshots from a camera.
- Create a "painting" system that colors pixels according to camera input.
- Shawn examples from class
- Christina Choi [documentation] (http://www.itp.christinabc.com), [sketch] (http://itp.christinabc.com/projects/rainbows/)
- Danielle Butler [documentation] (http://www.danielleisadora.com/2015/10/28/icm-audio-and-video-a-peak-inside/) [sketch] (http://www.danielleisadora.com/window/)
- EunJee Kim [documentation] (http://eunjee-kim.com/2015/10/28/p5-audioinput/), sketch
- Francesca Rodriguez Sawaya [sketch] (http://www.franrodriguezsawaya.com/ICM/Fran_w9/)
- Ian Gibson documentation, sketch takes a minute to load
- Juan José Egúsquiza documentation, sketch
- Kevin Stirnweis documentation, sketch
- Leslie E Ruckman [sketch] (http://leslieruckman.com/projects/ruckman_week8/)
- Ravyn Whitley [documentation] (http://www.ravynwhitley.com/week-9-video-and-sound/), sketch
- Rebecca M Leopold
- Reema Shah [documentation] (http://www.reemachine.com/icm-week9), [sketch] (http://www.reemachine.com/shah_week9) <-- Work in progress!
- Shir David documentation, sketch
- Wangshu Sun documentation, sketch -- Capture Mirror
- Xiwei Huang sketch1,[sketch2](http://xiweihuang.com/icm/hw/week8soundcubes version2/)
- Zach Coble documentation, sketch
Final projects are a creative idea inspired by the concepts in this class. There is no requirement to use a particular aspect of programming. The idea and your enjoyment and interest in the idea is what counts. Some things to remember.
- Keeping things simple and small in scope is a plus. If your project idea is a big one, consider documenting the larger idea but implementing just a small piece of it.
- Also think about making a final project for a small audience, even one single person like a family member or friend. . . or yourself. This can be a good way to focus your idea and design process. "Generalizing" the idea can come later (or maybe not at all.)
- Final projects can be collaborations with anyone in any class.
- Final projects can be one part of a larger project integrated with Physical Computing or another class.
- Create a blog post documenting your idea for a final project and be prepared to present the idea in class. Your proposal should include the following (though feel free to use this as loose guidelines, you can document your idea however you see fit.)
- Title
- One sentence answering: "What is it?"
- Written description of the idea.
- How did you become interested in this idea?
- What is the audience?
- What questions do you have for the class (conceptual or technical)?
- Visual material (images, videos, hand-drawn sketches etc.) that demonstrate your idea.
- Links to any projects or references that inspired you.
- Links to in progress sketches that demonstrates any part of the idea.
- Questions for the class (conceptual or technical)
- Plan to present your idea in ~2-3 minutes leaving about 5 minutes for discussion.
- Kevin
- Ian
- EunJee
- Zach
- Ravyn
- Shir+Xiwei
- Xiwei+Shir
- Francesca
- Juan Jose
- [Danielle Butler] (http://www.danielleisadora.com/2015/11/04/icm-final-project-proposal/)
- [Christina Choi] (http://itp.christinabc.com/final-proposal/)
- [Leslie Ruckman] (http://www.leslieruckman.com/building-the-anternet-final-project-proposal/)
- [rebecca leopold] (http://oldobjectsnewideas.com/leaves-pillars-blades-one/)
- [Reema Shah] (http://www.reemachine.com/2015/11/04/final-project-proposals/)
- [Wangshu Sun] (http://www.sunwangshu.com/2015/10/29/pcomp-final-ideas/)
- [Examples from Class] (http://www.walking-productions.com/icm_2015/week11/)
- Final project presentations are Wedneday, December 2nd. In class presentations will be approximately 7 minutes each, I will be strict about the time to keep everything fair. We also need 10 minutes at the end to do course evaluations.
- Please post your final project documentation to a web page (blog post is fine) and link next to your name below. This is due Friday, December 18.
- It's up to you to figure out how to best document your project, here are some loose guidelines if you aren't sure what to include.
- Title
- Brief written description - Include some background; why you built it.
- Visual Documentation: sketch running online, images, video, etc.
- References: links to any related projects, code samples, etc.
- Source code (please cite any sources in the code comments)
- [Danielle] (http://Link to Presentation)
- Ian
- [Francesca](http://Link to Presentation)
- Kevin
- [EunJee](http://Link to Presentation)
- Zach: [documentation] (http://zachcoble.com/itp/icm-final-documentation/), [code] (https://github.com/coblezc/icm-final)
- [Juan Jose][http://www.juanjoegusquiza.com/icm-final-project-2/]
- BREAK: documentation
- [Leslie]documentation
- Xiwei+Shir
- Shir+Xiwei
- [Christina] (http://Link to Presentation)
- [Ravyn](http://Link to Presentation)
- [Rebecca] (http://Link to Presentation)
- Reema [documentation] (http://www.reemachine.com/2015/12/18/icm-final-project-bare-minimum/)
- [Wangshu] (http://Link to Presentation)