Skip to content

Homework Allison Thursday 2

Jump to bottom Edit New page
nanoud edited this page Dec 16, 2016 · 171 revisions

Guidelines

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!

  1. Do the assignment.
  2. Contribute a question.
  3. 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!).

Week 1

  • SET UP:

  • DO:

    • Here is an optional "take-home" quiz to test your knowledge. We'll be releasing one of these each week for self-study. We'll discuss answers next week in class.
    • Create your own screen drawing: self-portrait, alien, monster, etc. Use 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 and wrap all of your code inside a setup() function. Here's a sample example: Elegant Composition
    • Write a blog post about how computation applies to your interests. This could be a subject you've studied, a job you've worked, a personal hobby, or a cause you care about. What projects do you imagine making this term? What projects do you love? (Review and contribute to the ICM Inspiration Wiki page. In the same post (or a new one), document the process of creating your sketches. What pitfalls did you run into? What could you not figure out how to do? How was the experience of using the web editor? Did you post any issues to github?

  • READ AND WATCH:

    • Videos 1.1 - 1.3 -- note these were recorded last year and reference the desktop editor which we are no longer using this semester.
    • After you do your homework, watch 2.1 - 2.3 to preview next week's discussion.
    • If the YouTube ads / format bother you, please contact daniel.shiffman@nyu.edu for a link to a shared google drive folder.
    • If you prefer books, I suggest Chapters 1-3 of Getting Started with p5.js. If you are logged into the NYU network you can read it via safari books online.

  • ASK QUESTIONS: Contribute at least 1 question below. (Name optional.)

Questions | Examples

Add Your Homework

Week 2

  1. REVIEW - If you haven't already...
  • Variables videos 2.1-2.3 and 1st half of Chapter 4 of Getting Started with p5 (up to Example 4-5).
  • map() and random() videos 2.4 - 2.5
  1. DO:
  • 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.
    • (You can choose to build off of your week 1 design, but I might suggest starting over and working with one or two simple shapes in order to emphasize practicing with variables. See if you can eliminate all (or as much as you can) hard-coded numbers from the sketch.)
  • Here is an optional "take-home" quiz to test your knowledge.
  1. READ AND WATCH:
  • Videos
  • Getting Started with p5:
    • Read Chapters 5 (Response) and 8 (Motion).
    • Read the 2nd half of Chapter 4 on Loops (starting from Example 4-5 thru 4-13).
    • If you're interested, read Chapter 6 on Translate, Rotate and Scale.
  1. EXAMPLE CODE:

Questions (example questions)

  • question
  • Dols: How do we consolidate code? ... update, answered in video
  • How do I map background color to another function? For example, if I want the color of a shape that follows my cursor to match the color of the background, how do I do that? What if I wan to shape's color to match the background color when I click the mouse the the background color changes?

Homework Links

Week 3

Review

Allison's notes:

Re-watch Shiffman's videos for loops and conditionals (3.1 through 4.2) as needed.

Assignment

Create an interactive artwork that implements the concept of repetition with variation. Use at least one for loop. Your artwork should also incorporate an interactive interface element of your own design. For this assignment, work in pairs. Write a blog post with a link to your sketch and a description of your experience. Things to try:

  • Make a rollover, a button, or a slider from scratch. Compare your code to the examples in "Examples" below. 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 10 PRINT, see: 10PRINT example). Make your interface element control the appearance or behavior of the algorithmic design.
  • When working in teams, try working separately and then combining your work together. Overlay your sketches, or have the interface element you created control your partner's algorithmic design (and vice versa). Trade sketches and riff on your partner's work. Or, sit next to each other at one keyboard and take turns coding while looking over each other's shoulder.

Inspiration

Examples

Quiz (optional)

Try this quiz if you want to test your knowledge.

Read and watch for next week

Questions

  • Put your questions here.
  • Kripchak: The editor keeps suggesting that we change the "true" check from "==" to "===", por que? (+1 for Nate)
  • Kripchak: Why can't we declare variable "bgcol" as a 3 item array using color() at the top of our code, but we can in setup? (+1 for Nate)
  • Kripchak: How do I create a new text line in GitHub without making a bullet??
  • Dols: In the slider example, what is the pint of offsetX()?
  • Dols: If using a for loop, how do you control the translate/scale/rotate functions?
  • Dimos: Backgrounds overlapping ? solution ?
  • David: How do we figure out the location of a button if the button is constantly moving on screen?

Links

Week 4

Review

Allison's notes:

From Shiffman: Videos 5.1-5.4 cover functions. ("Last year, I emphasized 'JavaScript object literals' over the 'JavaScript Constructor function' for making objects. I think this was a mistake. I'll discuss the distinction in class next week and might re-record these videos eventually, but keep that in mind as you watch. 6.4: The Constructor Function might be the most useful."---Shiffman)

Assignment

Re-work an existing assignment, using functions to compartmentalize your code. Write at least one function that takes parameters and one function that has a return value. If your existing assignments already make use of functions, or if you don't want to build on existing work, feel free to make a new experiment from scratch. Goals and things to try:

  • Break code out of setup() and draw() into functions.
  • Use a function to draw a complex design (like this) multiple times with different arguments.
  • Write a function to that returns the result of a mathematical operation that you need to do several times in your code.
  • Reorganize "groups of variables" into objects.
  • If you are feeling ambitious, try embedding a function into an object.

Examples

Quiz

An optional quiz to test your knowledge if you like.

Read and watch for next week

Nothing required, read or watch what you find most helpful. Suggestions:

  • Videos 6.1 through 6.11
  • Getting Started with p5.js chapters 9-10 (see e-mail re: PDF)

Questions

  • Dols: Can a function put out multiple returns?
  • Dols: How do we have changing variables in a function? Also related, how do we control the trans/rot/scale in a function?
  • Dimos: How can we get different results through text on an interactive object? For example: Each time a bouncing ball hits a rail (and different values for each rail or specific point on rail) ?

Links

Link to your homework assignments here.

Week 5

Review

Allison's notes:

See also:

  • Videos 6.1-6.11 cover more about objects, arrays, and the constructor function.
  • Getting Started with p5.js, chapters 10 and 11.

Assignment

Arrays and objects allow you to do something new with your programs: keep track of user action over the course of your sketch's execution. For this week's assignment, create a sketch that takes advantage of your new skills. The sketch should allow the user to use clicks, keypresses, etc. to add new elements to the scene (and potentially to remove them later). Your sketch should use (1) at least one array and (2) a constructor function that creates objects.

Additionally, in your blog post this week, please include some thoughts on the synthesis workshop, what you liked or didn't like about it, and any documentation of what you made.

Examples

Here's an index of my sketches in the p5.js web editor. Examples from class can be found here.

Read and watch for next week

Questions

  • Kripchak - Is there an easy way to draw a line pointing at the mouse but keeping it's own, unique length?
  • Kripchak - Can you do a splice command within an object? Is that a frowned upon practice??
  • Kripchak - Methods for doing delays, timers, etc.
  • Carlie - When you save functions to other js files, some of them may cause problem. What kind of function is better to be in a different file? What should we avoid?(like using variables from other files maybe?)
  • Carlie - Also more info about time, especially when you want to do the function in certain kind of condition and clear some earlier function at the same time.
  • Dols - Can we review multiple .js files and how to reference functions from those files?
  • Dols - What are the differences in prototype and constructor functions? When is one used over another?
  • David - How can we upload a different typeface to P5js and be rid of the "communist" Helvetica?
  • David- If I copy and paste code does that still mean I am coding?
  • Nate - How can I create a randomized condition for deleting (splicing?) an object?
  • Nate - Can we haz autosave?

Homework links

Add links to your homework (blog post and sketch) here.

Week 7

Review

Allison's notes:

See also:

Assignment

Create a sketch that it uses HTML controls (like buttons, sliders, text input fields) as a means of modifying the sketch's behavior in real time. (You can adapt a previous homework assignment for this if you'd like.) BONUS: Incorporate an HTML control from p5.dom that we didn't talk about in class. Alternatively or in addition, use p5.dom to modify other elements on the page (these elements could be added by hand in index.html or dynamically added by your code.)

Examples

Read and watch for next week

Please watch the video tutorials for working with APIs in p5.js. Review and contribute to this wiki list of data sources in anticipation of in-class exercises next week.

To read:

Questions

  • Carlie - How can we upload font file, like ttf file, and use them in p5js instead of embed the google link?
  • Carlie - What is the difference between using child() and parent()? Like I have div1 and div2, div1.child(div2) and div2.parent(div1) is the same thing right? Any example to show which one is better to be used in certain condition?
  • Carlie - Can we select one of the attributes of an object, get its value, save it in a variable and change it with p5js so that we can controlling CSS animation?
  • Carlie - How can we select with attributes like "name", "alt"?
  • Dols- How do we customize buttons, sliders, fill box etc.?
  • David- I would like to control the background with a slider? Also I have the same question as Chester.
  • Nate - how do we center buttons in CSS? Just with "style"?

Homework links

Add links to your homework (blog post and sketch) here.

Week 8

Review

Allison's notes:

See also:

As always, all in-class examples can be browsed here.

Here's the CSV we used in class.

Assignment

Create a sketch that loads external data (whether from an existing file or through a web API). Interpret this data visually or interactively.

Look here for potential data sets:

Read and watch for next week

Questions

  • Carlie - More explanation about using XML?
  • Carlie - how to get the i value in a loop if a element is clicked and use it to control another array?
  • Carlie - The OpenWeatherMap json is not working ... And can we use variable to complete the json link?
  • Nate - I want to take data from a particular block of JSON from a larger file and create a histogram of it without needing to separately call each block of the chart. Would this be done with a for loop that ends when the program runs through only the block I want to use?
  • Dols - How do we push values into an array?

Homework links

Add links to your homework (blog post and sketch) here.

Week 9

Review

Allison's notes:

See also:

As always, all in-class examples can be browsed here.

Media used in class:

Assignment

Create a sketch that uses external media. Once you've mastered the basics by making prototype sketches that play sounds, draw images to the screen, scrub video, etc., think a bit more deeply about how the data in the media can be used, beyond its most evident affordances. Interpret the media accordingly. BONUS: Don't make a video mirror or a sound board.

Examples:

Further reading:

Inspiration

Questions

Add your questions here.

  • DOLS: Can we use the MousePress function to change images used as textures? I'm guessing this can be done by changing the name of the "string/file name" when the mouse is clicked with a callback function, but I couldn't get it to work...
  • David: Is there a way we can call images from an API into a drawn object?
  • Nate: Is it possible to play just audio from external embedded source? Like if I wanted to embed a youtube video but only play the audio.
  • Carlie: When to use int?
  • Carlie: How to use particle library?

Homework links

Add links to your homework (blog post and sketch) here.

Week 10

Mobile notes

Examples from class:

Other examples and notes on the class syllabus.

Review for next week

Final project advice

Your final project should demonstrate mastery of the technical content of the class. You should develop an idea that is of interest to you and serves to advance your own research or artistic practice. Some advice:

  • Make the smallest project possible (but no smaller). Be mindful of your own capabilities and the amount of time you can reasonably devote to the project. A smaller project that works well and clearly expresses an idea or proves a point is much better than an incomplete attempt at a larger project.
  • Consider your audience. Who are you making the project for? How do you expect your audience to interact with your piece? What will their experience be like? Think about making a project intended just for you, or for a friend, or a small community. You don't have to make something intended for a general audience.

Keep in mind that you are encouraged to collaborate on your final project. You can do this with anyone in any ICM section. You can also combine your project with your final project for Physical Computing (or another class). In either case, make sure it's clear from your documentation who your collaborators are and what other classes you're targeting with the project.

Final project proposal

For next week, create a proposal for your final project. Be prepared to present for a few minutes on your idea, preferably with visual aid. Show us your inspirations or make a prototype (even if it's just on paper). Have an idea for a title in mind. Document your proposal on your blog and post a link to it below.

Here are some sample final project proposals.

Links to proposals

Add a link to your final project proposal below.

Final Project Documentation

  • Final project presentations are Thursday, December 8th. In class presentations will be approximately 7 minutes each, I will be strict about the time.
  • 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 16.
  • 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
    • Visual Documentation: sketch running online, images, video, etc.
    • References: links to related projects, code samples, etc.
    • Source code (please cite your sources in the code comments)

*Chester Dols and Carlie Zhang || Social Media Sustained Ecology

*David Temchulla Final Project - Final Project (http://alpha.editor.p5js.org/davidtemchulla/sketches/H1xWUdVDXg)

*Dimos Markopoulos - Final Project (https://alpha.editor.p5js.org/dimosthenium1/sketches/B1_tUQvmg)

*[Nate Padgett] (http://www.natepadgett.com/2016/12/16/icm-final-project-slingshot/) and [Michael Kripchak] (http://www.kripchak.com/2016/12/16/icm-final-project-writeup/)- SlingShot

*Yuhan Zhang-[Final Project] (http://yuhanzhang.space/2016/09/22/icm-week-2/)

*Nanou -[Final Project] (http://www.nanoud.com/category/icm/)

Add a custom footer
Add a custom sidebar
Clone this wiki locally