Skip to content

Homework MimiY 04

Jump to bottom Edit New page
mimiyin edited this page Nov 6, 2019 · 223 revisions

Responses | Link

Week 7

RESOURCES FROM CLASS

Questions (example questions)

  • Your questions here

READ / WATCH

Week 6

RESOURCES FROM CLASS

TEST YOURSELF

DO:

  • Next week you will be presenting your own assignments. Time limit is 5 minutes. Be prepared to point out 3 things in your sketch and how they're working. (e.g. Here's a loop, it's limit is being set by the mouse. This doohicky is an object and I have an array of 100 of them. They flicker and change color and when I click, I flip a boolean to make them start and stop flickering.)
  • Design a sketch in an object-oriented fashion. Follow these steps and see how far you get (even just doing the first couple steps is ok!)
    1. Make one single object with just variables.
    2. Put one or more functions in the object.
    3. Try manually making two objects.
    4. Duplicate the object using an array and make as many as you like!
  • If you are already working with classes/objects and arrays:
    1. Re-organize / break-down your classes into the "smallest functional units" possible.
    2. Try different ways to have your objects "communicate" with each other in some way.
  • In the end the goal is to have code in draw() that only makes calls to objects. Something like:
function draw() {
  background(0);
  
  // A single object
  apple.chop();
  // Another object
  orange.peel();
  
  // Calling a function on all of the objects in an array
  for (var i = 0; i < grapes.length; i++) {
    grapes[i].pluck();
  }
}

READ / WATCH

Examples

Questions (example questions)

  • What is the difference between array and arrayList? --Lulu
  • How do you make multiple classes, for example, I wanted to make another type of shape that falls from the tops of the screen but wasn't sure how I could use multiple classes without getting all of the variable mixed up? -- Lizzy
  • Can we go over the 'Extend' chapter? I can't figure out how to get BrowserSync working on my computer. - Pippa
  • How can you make text (or something in general) only appear for a particular interval of time? Use case: have instructions appear for 10 seconds then go away. --Nikhil

Homework Links

Week 5

Questions (example questions)

  • How to combine two functions that should be functioned in setup() and draw() with same variables into one function？
  • can we set up function which returns values with parameters, then it can be used many times in different functions?()----Wei
  • I made a rollover moustache into a function, and drawing a head to put the moustache on a separate function, but no matter how I order these two things - call moustache function before/after draw head function, define moustache function before/after define draw head function - the moustache always seems to be drawing behind the head. How do I get it to draw in front of the head?? -Julia
  • How can I make 4 mouse sensitive 3-d rectangles made up of lines (like my sketch but with 4 3-d squares instead of 1) - Lizzy
  • What's the difference between object and class? – Na
  • Adding to that, can we discuss when to have a class with behaviors vs. a function? - Christina

Homework Links

Week 4

Questions (example questions)

  • Your questions here.
  • What's the meaning of push and pop in p5.js.
  • How do you make shapes generate and move continuously from the side of the canvas? - Lizzy
  • Can you explain the floor() function? – Na
  • Is it possible to generate a random color inside a loop without making the color blink? – Na
  • My web editor crashes a lot and I have to start my sketch over. Any tips? – Cy
  • How can I work within shades of a color? Can you loop things that are individually drawn out? - Pippa

Homework Links

Week 3

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Worksheet 3

  • DO: 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 as below. Can you divide an idea into two parts and combine those parts? (e.g. One of you codes the input behaviors and the other one codes the output behaviors.) Can you swap sketches and riff of of your partner's work? You can post together or break off and complete the assignment individually.

    • 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.
    • Tie the above two together and have an interface element control the visual design or behavior of other elements in your sketch.

  • READ / WATCH

Questions (example questions)

  • When I set up a bouncing ball which will change direction when it hits a moving target, the bouncing ball will stop and "shake" for a while and then moves back.Don't know how to stop the "shaking"------Wei
  • Is there a way to switch back to your original variable values without redefining them again? -- Jake
  • Also, please please please tell me there is some trick to make translate and rotate make more sense. I keep loosing my objects when I rotate them and they end up off the canvas. -- Jake

Homework Links

Week 2

  • LINKS FROM CLASS:

  • TEST YOURSELF: Worksheet Post a url to your answers on the Google Doc.

  • 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.
    • e.g. Try refactoring your Week 1 HW by removing all the hard-coded numbers except for createCanvas(). Have some of the elements follow the mouse. Have some move independently. Have some move at random.
    • e.g. Do the above but change color, alpha, and/or strokeWeight instead of position.
    • Or do something completely different!

  • WATCH, READ, RUN CODE:

Questions (example questions)

  • I always can't remember the meaning of my variables. Lulu
  • Why must "let r=random(255)" be put inside a function, not outside? – Na
  • How to change the rate of the draw function ran per second? The eyebrow in my sketch shaked too anxiously after I put a random function into that.Maybe the problem is with the rate of the random function generate a new random number.
  • How can I embed my P5.js sketch into my squarespace blog? - Pippa
  • What does "Script error.(:line 0)"means? It happens when I set up wrong declares. - Wei Kang
  • How can I make a grid of ellipses disperse in many directions when I move the mouse rather than all moving in unison (as my sketch)? - Lizzy
  • Is it possible to initialize variables at the same time? (for example, x, y, i = 0) - Christina
  • How do you move multiple shapes towards the mouse without them all converging to the center? - Jake
  • How do you use scale() function to enlarge an object(s) over time? - Jake

Homework Links

Week 1

Questions | Examples

  • your question, your name
  • How to change the size of a triangle?, Dina
  • I cannot understand that Why I should write command like ‘fill(0)’ ‘noStroke()’ before the command of ‘rect()’ if I want to change the setting of the rectangle. Lu Lyu
  • How to put same elements in sequence without using copy and paste?----Wei Kang
  • Is there a way to have a stroke/outline around only part of a shape? -Julia
  • Is there a way to have all elements scale in relation to the canvas size? -Christina (I guess map(); will help you a lot! - Wen)
  • How do you rotate a shape? – Na (You can use rotate() to rotate it. - Wen)
  • Can you do a demonstration about arc? – Na
  • How do you fill the shape with pattern or image instead of color? - Wen
  • How to control the size of the processing sketch when it is embedded into a website? Can it be realized through some instructions in P5.js? -Tianjun
  • Can you talk about when to use Bezier curves and when regular curve functions are better, especially when making custom shapes? - Nikhil
  • How does ellipseMode(CENTER); work? - Lizzy (It means that the coordinate point will be set on the center of the ellipse, actually I think it's an easier way to draw an ellipse! - Wen)
  • How can you rotate objects and make arcs without PI? Also, why when I move different parts of my drawing around are other aspects moved? - Pippa

Add Your Homework

Week 4

  • RESOURCES FROM CLASS:

  • TEST YOURSELF: Complete Worksheet 4

  • DO: Make something with a lot of repetition, more than you want to hand-code. You could take something you've already done where there was a lot of repetition in the code and see if you can re-write it using a loop so that instead of 28 lines of code that call rect(), you have 1 line of code calls rect() inside of a loop that goes around 28 times. How do you need to rework the way you position that rect() in order to make it work in a loop? Try creating an algorithmic design with simple parameters. (One example is 10PRINT, example code).

  • READ / WATCH

    • Videos 5.1-5.3 in the learning p5.js series.
    • Getting Started with p5.js chapters 9-10

  • RUN CODE

Questions (example questions)

  • Your questions here.

Homework Links

  • Your Name -- [Title of Blog Post](Link to Blog Post), [Title of Sketch](Link to Sketch) -- any other comments
Add a custom footer
Add a custom sidebar
Clone this wiki locally