Week 3 (due Sep 16)

Pong Game (photo from Wikipedia)

Your game will be for a single player. This is a non-standard game, so read the description carefully: A ball starts in the center of the canvas and moves upward. When it hits the top of the canvas, it reverses vertical velocity, causing it to move downward. The player’s goal is to touch the ball with the mouse when the ball is below the center of the canvas. If that happens, the ball reverses direction and acquires a random horizontal velocity from -5 to +5. Once the ball is moving upward, touching it again has no effect. Again the ball will bounce off the top of the canvas, and since it has a horizontal velocity, it must bounce off the sides as well. If the player fails to touch the ball before it reaches the bottom of the canvas, the ball continues downward out of sight. The game can only be restarted by reloading the web page.

Here is what a game might look like:

Other game details (if any) are left to you. The requirements you must satisfy are the following:

• The ball bounces off the top, left, and right 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.
• The ball must reverse vertical direction only when the following are true:
  • The ball’s vertical velocity is in the downward direction.
  • The ball’s center is below the center of the canvas.
  • The cursor (mouseX, mouseY) is within the borders of the ball. (You may find the function dist very useful here. Look it up at p5js.org.
• When the ball reverses vertical direction (by being touched), it receives a random horizontal velocity that must be in some reasonable range from negative to positive.
• Name your project UserID-03-b. For example, if your Andrew ID is placebo, then your project directory (folder) name should be placebo-03-b.
• Zip (compress) and upload your two project folders to our course Autolab tool, using the provided instructions.

You are free to add additional functions, which may include:

• Colors.
• Changing colors.
• Use a “Paddle” rather than the cursor to touch the ball.
• Additional constraints on hitting the ball, e.g. the paddle must be below the ball to reverse its direction.
• Horizontal velocity depends on how or where the ball is touched/hit.
• Sounds.
• Keeping score.
• Restarting the game automatically when the ball is missed.

5. Project-03: Dynamic Drawing

In this Project, which (as usual for Projects) is to be uploaded to 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 640×480 (or 480×640, 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, etc.
• Some parameters must move in contrary motion, e.g. larger and darker, left and right, clockwise and upward (are these really contrary? at least they are not similar motion).
• 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 are 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.