Week 3 (due Sep 13)

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 to the right. When it hits the right edge of the canvas, it reverses horizontal velocity, causing it to move leftward. The player’s goal is to touch the ball with the mouse when the ball is left of the center of the canvas. If that happens, the ball reverses direction and acquires a random vertical velocity. Once the ball is moving rightward, touching it again has no effect. Again the ball will bounce off the right side of the canvas, and since it has a vertical velocity, it can bounce off the top and bottom as well. If the player fails to touch the ball before it reaches the left edge of the canvas, the ball continues leftward out of sight. The game can only be restarted by reloading the web page.

Here is what a game might look like (only this example is rotated 90 degrees counterclockwise):

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

• 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.
• The ball must reverse horizontal direction from left to right only when the following are true:
  • The ball’s horizontal velocity is in the leftward direction.
  • The ball’s center is left of 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 horizontal direction by being touched, it receives a random vertical 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.

Be sure to include both Assignment-03-a and Assignment-03-b in one zip file. If you submit two separate files, only the last one will be graded.

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 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, 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).
• 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.