Skip to content

Homework Roopa Tuesday

Jump to bottom Edit New page
Angiezhao edited this page Dec 16, 2015 · 292 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 your assignment.
  2. Contribute a question.
  3. Post documentation. Something visual + your code. e.g. Blog post with code, screenshots, video. Put the URL to your post below.
  4. Post your sketch online with FTP. Put the URL to it below.
  5. Place a copy of your p5.js project folder in our class' shared Dropbox folder.

##Final Project Documentation

Post a link to your final project documentation here by Monday, December 14. 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)

Post your documentation here:

Week 10

###Final Project Proposals

Please link your name below to your final project proposal. It's up to you to figure out how to best demonstrate your idea, but I suggest you include the following:

  • Title
  • One sentence "What is it"?
  • How did you become interested in it?
  • Who is the audience?
  • Something visual for us to look at in class: drawings, images, video, etc.
  • A sample p5.js sketch that demonstrates a first step
  • References: links to related projects, code samples, etc.
  • Questions for the class (conceptual or technical)
  • Plan to present your idea in ~6-7 minutes, leaving about 3-4 minutes for discussion.
  • If you are collaborating with anyone (inside or outside of class), please let me know!
  • Here are some sample final project proposals.

Get laptop and phone use out of your system before class. This is a strict lids down session.

Post Proposal Here:

Week 9

  • READ AND WATCH

    • Chapter 7 in Getting Started with P5.js.
    • Videos to come!

  • DO (You will present EITHER this assignment OR the data assignment next week. You can, of course, combine the two into one if you'd like!)

    • Develop a project that uses images and pixels, sound, or both. For this project you should document your work in a blog post in addition to creating the Processing sketch. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
      • Create a software mirror by designing an abstract drawing machine which you color according to pixels from live video.
      • Make a slideshow of images..
      • Make a "VJ turntable" for video.
      • Use Clmtrackr face tracking and create a particle system that emanates from a person's mouth or eyes or. . . .?

Questions

  • In the pointilism example in the dropbox, is it possible to make the ellipses appear more quickly? (Kasia)
  • Is there a way to append to an array sound files that were recorded on the local server, to later call them up to play at random? (Eric)
  • How do we make links on the canvas again? (Lisa)
  • How can you manipulate or change the speed of a video on P5? -- (Adi)
  • Had difficultly separating sound from a looping feature when both are turned on by the same conditional statement -- (Madeline)

Add homework here

Week 8

  • READ AND WATCH

  • DO (You will present EITHER this assignment OR the video and sound assignment on October 27. You can, of course, combine the two into one if you'd like!)

    • Create a sketch that uses an external data source. You can present in class using your laptop or put your sketch into dropbox. Here are some ideas:
      • Track personal data over the course of a few days (exercise, sleep, computer use, eating, etc.). Enter the data manually into a JSON file and visualize the results.
      • Count word frequencies in two different text sources (i.e. two different authors, two different newspapers, two different political speeches) and visualize the results.
      • Use weather data to affect elements in a sketch
      • Gather data from a google spreadsheet and use in a sketch.

Questions

  • Are there more visual ways to incorporate data from Google spreadsheets? (Kasia)
  • How can I style the text of a dropdown menu? Is Firefox particularly bad at loading data? My sketch won't load in that browser in particular. (Jasmine)
  • Do I have to use the draw function to place elements relative to the canvas? (lisa)
  • How does Twitter's API work?? Also, how do you save data that people input for later use? (The saveJson function didn't work for that purpose). (Eric)

Add Homework Here

Week 7

  • READ AND WATCH

  • DO

    • Create a webpage that extends beyond the canvas, using p5.dom.js. You are welcome to incorporate other javascript libraries as well if you're feeling ambitious. If you're stuck for ideas, you can try going back to the graphical user interface (GUI) elements that we experimented with in week 3, and try recreating that functionality with DOM elements.

Questions (example questions)

  • What's the difference between attribute and style? I wasn't able to use them interchangeably but I couldn't figure out the rules for them. Also, how do I clear the page and then put a new div on top? Lastly, how can I apply style to multiple things without having to copy and paste? (Jasmine)
  • What's the advantage of using the dom library over just writing the html directly in an html file? Also, how can you layer DOM elements without using the parent function? (Lisa)
  • I'm still trying to figure out some things with constructor functions. I was trying to build a function (to drag objects with the offset of the mouse, etc) that would apply to an array of objects (different sized rectangles), and was able to make them disappear if you hover over them (which is something!) but what is the best way to do this instead of having one function per object? You should be able to do this with one constructor function and an array of objects, right? (Eric)
  • Can you have a link to an external website inside of a string? If not, how could I make each new variable link to its own 3rd party page? (Kasia)

Add Homework Here

Week 5

  • READ AND WATCH

    • Videos to come!
    • Chapters 10 & 11 in Getting Started with P5.js

  • DO:

    • Design a sketch in an object-oriented fashion. Try to eliminate all code from setup() and draw() except for the core requirements (createCanvas(), background(), etc.) and calls to objects. Put the objects in an array if you can.
      • For example: Consider building a particle system. A particle system can be used to simulate: rain, snow, fireworks, explosions, smoke, etc. For this week, you would create a Particle constructor to describe a single particle, and try to get a whole bunch of particles on the screen using an array.
    • E-mail the code for your constructor to your assigned partner on the wiki. You'll get one from them too. Try incorporating the constructor sent to you into a sketch, and try to use an array to create a lot of objects from it. Write some thoughts about this process on your blog -- Did anything not work? Could you follow your partner's code? Were comments helpful? (If you are feeling saucy, you could try to use GitHub for this collaboration.)
    • Post a question about this week's assignment or content below.

  • PAIRS

    • Adi & Nikita
    • Aaron & Nilomee
    • Yao & Jasmine
    • Angie & Madeline
    • Sicong & Eric
    • Lisa & Naoki
    • Nicola & Serena
    • Andrew & Kasia

Questions (example questions)

  • When using arrays and constructors, what is the best way to join two objects together to display them both in draw at the same time (rather than simply drawing an ellipse, for example)? (Kasia)
  • How to prevent objects in older/former frames from drawing constantly? (Serena)
  • What license do you recommend posting under on Github? (Lisa)
  • Why does the random size function when in an array different when you do it in an If statement? In an array it randomized the sizes of each sphere, but it wasn't drawing the sizes constantly, but that did happen when I put it under an If statement. (Eric)
  • How do you use sine and cos in code to create images? (Adi)
  • With my sketch, I noticed that when I tried to draw the stars behind the sun, they did not appear. Can you help me troubleshoot that? (Nikita)
  • How do you use images with arrays? and with loaded images that have pre-defined limits, what do you put for the neccessary arguments? (Madeline)
  • How do you loop arrays? (Aaron)
  • How do I remove something from an array without it messing up the for loop? (How do we make 2D arrays with for loops? -- I forgot to write these earlier so I'll add them for next week if we don't get to them!) (Jasmine)

Add your homework here

Week 4

  • READ AND WATCH:

  • DO:

    • Homework: Work with functions in your sketch this week. Aim to keep setup() and draw() as clean as possible, and do everything (all calculations, drawing, etc.) in functions that you create yourself. If you are inspired by the power of modularity, feel free to elaborate on the assignment. Some ideas:
      • Use a function to draw a design in many different ways.
      • Use a function to draw a complex design multiple times.
      • Go back to a previous p5.js sketch and try to re-create it, this time utilizing functions. It is 100% legitimate for this week to turn in an assignment that works exactly the same way as before, but uses code reorganized into functions.
      • Invent your own exercise related to functions.

Questions (example questions)

  • Post your question here
  • Is there a way for one function to manipulate more than one shape's coordinates, like having one function formula be able to drag multiple rectangles? (Eric)
  • How can we include html elements in our sketches? (Kasia)
  • Is there a way to draw an eight-pointed star that doesn't involve sine and cosine? (lisa)
  • How can we move images around following certain trajectories? (Serena Xue)
  • If all conditions for if statements in functions are the same, is there a sure way to combine those ifs into one larger conditional?
  • How do we make it possible for people to input information (a string, like a guess of an answer to a question) into our sketch? I'm thinking something using p5.dom but we haven't gotten there yet and I haven't played around with it much. (Jasmine) *How do you draw and fill weird shapes (not ellipses, triangles, rectangles...) ? (Adi) *How do you use the if function based on colour and not position? For instance, if mouseX and mouseX are over a part of the screen that is black, do this. If this possible? (Adi)

Add your homework here

Week 3

  • READ AND WATCH:

  • DO:

    • Homework: In general this week, you should work with rule-based animation, motion, and interaction. You can use the ideas below or invent your own assignment. Start by working in pairs according to the wiki. Can you divide an idea into two parts and combine those parts? Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually. Some ideas:
      • Recreate Pong. Remember, start by thinking about all of the small elements you need in order to make the game and only combine them into a larger program when you have each part working.
      • Create a GUI (Graphical User Interface). Some examples of elements you can build are buttons, sliders, and rollovers. Examples on Github here. Later on we'll look at GUI elements we can get for free from the browser.
      • Create an algorithmic design with simple parameters. A good model is 10PRINT based on the examples provided here. You can also read the 10 Print book online as a PDF.
      • Consider tying the above two together and have a GUI control your 10PRINT visualization or motion sketch.
      • Invent your own exercise related to animation and interaction.

Questions (example questions)

  • Post your question here -Wondering how to make moving objects react to each other by "watching" each others' respective xy coordinates...?
  • How do you drag other shapes that are not ellipses and rectangles? How does the offset variable work?? (Eric)
  • How do you make it so you can't draw over something you've already drawn? (For example, in Snake, how do I make the player lose the game -- stop the drawing -- when it hits a previous line of the snake?) (Jasmine)
  • What's the best way to keep objects from intersection/overlapping? I feel like I did this a really roundabout way. (Lisa)
  • What's the best way to combine a 10PRINT with a GUI? (kasia)
  • Can we layer up different backgrounds, and even merge effects? If so, how? (Serena Xue) -How do you make the ball bounce against a moving object? (Adi Wiedersheim)
  • What is the best way to set multiple periphery limits i.e. moving in a maze (madeline)

Pairs

Arrange to spend a half hour working side by side to start your assignments together. You can do separate projects or continue on together with a single project.

  • Nilomee and Madeline
  • Sicong and Nicola
  • Xinyao and Aaron
  • Jasmine and Eric
  • Andrew and Serena
  • Kasia and Nikita
  • Adi and Lisa
  • Naoki and Angie

Add your homework here

Week 2

  1. 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.
  1. Start looking for computational projects that interest or inspire you. Add links below.
  1. READ AND WATCH:

Questions (example questions)

  • Can you make an object rotate whilst moving?//Adi
  • Is only RGB color used to select/define colors in p5.js? Nikita
  • Is there a way for p5 to count how many times an element (i.e. a sphere) appears? For example, if I wanted 600 spheres to appear and then stop when it got to that limit, how could I make that happen? (Kasia)
  • Is there a way to use noLoop()/loop() to affect some things but not affect others? (Jasmine)
  • How do you slow down the process of figures/shapes auto generating (through random sizing) by frame? (eric) *How do you randomize background on click without erasing what's in draw? (lisa)
  • Can we create our own function? if so, how? (Yuan Serena Xue)
  • What is the difference between parameters, attributes and arguments? //Nilomee
  • How can I use a loop to make the same animation reflect in multiple places? Will this require temporary variables? //Nilomee
  • Is there a way to reverse speed but randomize the degree at which the reverse happens? i.e. instead of -1*speed could you have it rotate and reverse at the same time? (madeline)

Pairs

Arrange to spend a half hour working side by side. You can do separate projects or continue on together with a single project.

  • Nilomee and Nicola
  • Sicong and Aaron
  • Xinyao and Eric
  • Jasmine and Serena
  • Andrew and Nikita
  • Kasia and Lisa
  • Adi and Anqi
  • Naoki and Madeline

Add your homework here

Week 1

Questions | Examples

  • What do each of the numbers in the code for a curve stand for?
  • How do arcs work? (I think it's the same question as above) Did a bunch of googling, but still not fully getting it. (Lisa) *With arcs, is there was a way create a "fill all" in between two open arcs that are within a larger shape? (madeline) or an order of operations to remember?
  • When your are about to finish up on your project and realize you want to move the entire drawing lower or to the bottom of your canvas, is there a way to move it without changing every single code? (Yuan Xue)
  • Is there another way to upload files through the FTP server if you only have a free wordpress blog? Or is there another alternative? (eric)
  • Is there an inspect element function for within the p5 editor? Or, a way to add a grid that can help you when positioning objects? (Jasmine)
  • Is there an easier way to determine the coordinates for the placement of shapes, etc.? I guessed for most of mine. (Nikita)
  • How to fill the color within curves? Using bezierVertex or something else? I beg some hints.(Anqi Zhao)
  • I couldn't figure out how to select colors more accurately. I tried combinations of RGB, but is their a way to have a color picker to be able to illustrate something more complex?
  • How to draw an arc using the half_pi argument. Does an additional function need to be called to use this?
  • Why doesn't online documentation designate limits of xy values in 2D space? would be helpful...
  • How do the Bezier curves work? //Adi

Add Your Homework

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