Week 3 (due Sep 19)

In this assignment, you will create a very simple game. A ball (circle) will start in the center of the canvas and move in a horizontal direction (left or right) AND vertical direction (up or down). When the ball “hits” the edge of the canvas, it will bounce back in the opposite direction, either horizontally or vertically. (If it hits a corner, then both the ball will change direction both horizontally and vertically.) The rate that the ball moves in the horizontal and vertical direction is called its h-velocity and v-velocity, and each is represented by a random number between -5 and +5. The number indicates how many pixels the ball moves in that direction between each frame of the animation.

The requirements you must satisfy are the following:

• The canvas is of arbitrary size, but it is at least 200 X 200.
• The ball bounces off the top, right, and bottom sides of the canvas.
• The ball bounces when it first touches the side, e.g. when the right edge of the ball meets the right edge of the canvas.
• When the ball bounces off of the left or right side, the vertical velocity remains the same.
• When the ball bounces off the top or bottom side, the horizontal velocity stays the same.
• When the ball is “touched” by clicking inside its bounds, it receives a new random horizontal velocity and new random vertical velocity in the same valid range.
• The game continues until the user clicks the ball five times successfully or misses 10 times. Once this happens, the game should just stop with a green canvas or red canvas, respectively.

HINTS: You should define variables to store the x and y location of the ball, the horizontal and vertical velocity, and the number of good and bad points. You may use additional variables as needed.

Submit your sketch.js and index.html file to Autolab in your compressed zip file in a folder named andrewID-03-A.

4. Project-03: Dynamic Drawing

In this Project, which (as usual for Projects) is to be uploaded to Autolab as well as our course WordPress blog, you will create a drawing that changes when the mouse moves. Here are some examples to get you started thinking:

• Moving Art at SmaPhoArt.com,
• Animations at shutterstock.com,
• Gifs by David Whyte

Animation by David Whyte
(Notice that these images are not controlled by the mouse, but you can imagine that many could be.)

Here is an example written in p5.js and using the mouse. It is intentionally very basic, but it conveys some elements we expect to see in your project: the dynamics of the image are at least as important as the image itself, motion is controlled directly by the human gesture of mouse movement, multiple parameters are coordinated (in this case size and position of two squares) and coupled to the mouse movement (and notice that some parameters increase while others decrease). The comments at the end of the Project 2 description regarding minimally viable solutions apply here.

dynamic

function setup() {
    createCanvas(400, 400);
    rectMode(CENTER);
}

function draw() {
    background(0);
    fill(255, 255, 0);
    // restrict mouseX to 0-400
    var m = max(min(mouseX, 400), 0);
    var size = m * 350.0 / 400.0;
    rect(10 + m * 190.0 / 400.0, 200.0,
         size, size);
    fill(0, 0, 255);
    size = 350 - size;
    rect(200 + m * 190.0 / 400.0, 200.0,
         size, size);
}

Finally, here are the Project-03 Requirements: 

• Using a canvas size whose dimensions are 600×450 (or 450×600, whichever you prefer), create an interactive program in p5.js that generates a dynamic drawing controlled by the mouse.
• You can use mouseX, mouseY or both to control your image.
• You must control at least 4 different aspects of image elements – size, position, angle, color/shade, etc.
• Some parameters must move in contrary motion, e.g. lighter and darker, left and right, bigger and smaller, clockwise and counter-clockwise, etc.
• The image should not have random or non-deterministic elements. Each time the cursor moves to a particular point, the image should be the same.
• Comment your code – it should be easy to tell how the code works, e.g. explain coordinate calculations (“increases from 10 to 30 as mouse moves down”) and describe what parts of the drawing are drawn by different parts of your code. (Note: adding comments while you are programming to document your thought process is a good idea.)
• When you’re done:
  • Embed your p5.js sketch in a blog post on this site, using the (usual) instructions here. Make sure that your p5.js code is visible and attractively formatted in the post.
    • In your blog post, write a sentence or two reflecting on your process and product. In discussing your process, it would be nice to see any of your paper sketches from your notebook; these could be as simple as photos captured with your phone.
    • Label your project’s blog post with the Category Project-03-Dynamic-Drawing and your section, e.g. SectionA.
  • Submit your sketch.js and index.html file to Autolab in your compressed zip file in a folder named andrewID-03-Project.

5. Handin and post your work