Lab Week 02 - Fall 2023

Tuesday, September 5, 2023

Introduction

This lab is set up so you can learn how to build up a full deliverable that you can submit for credit in this course. As you work on these steps with guidance from your teaching assistant, you should look toward your neighbor to see if they need help (or ask if you need help). You can collaborate in lab during these activities!

In this lab, you will

• Practice programming with mouse location and canvas width and height.
• Experiment with the random number generator.

Create a folder for this lab in your 15-104 folder/directory..

• Inside your 15-104 folder on your computer, create a new folder named lab-02.
• Now let’s try a few programming problems. Don’t worry if you don’t get all of them done. Try as many as you can. As you start each problem, download a copy of the zipped template2023-p5only.zip file, unzip the template and move the template-p5only folder into lab-02 and rename it using the letter of the problem, e.g. andrewID-02-A, andrewID-02-B, etc.
• For each problem, you will edit the sketch.js file to accomplish the task and then double-click on the associated index.html file to see the results. Your TA will pause the lab approximately every 15 minutes to discuss a sample solution in case you get stuck.

Problem A

Using the default size canvas in the starter file, draw four blue squares of size 50 X 50 at random locations on the canvas so that none of them fall outside the bounds of the canvas. See the first picture below. Your program should only draw four squares once. Once you have that done, modify the program so that it draws the four squares, then clears the canvas to the background and draws four random squares again, then clears the canvas to the background and draws four random squares again, etc. Finally, modify the program so that it does not clear the canvas so you get layers and layers of four random squares. See the second picture below.

 &

Problem B

Using the default size canvas in the starter file, make a circle with radius 50 that follows the mouse as you move it around the canvas. What happens if you repaint the background in your draw function? What happens if you don’t? Update the program once you have it running so that the diameter tracks the horizontal position of the mouse (the farther to the left, the smaller the diameter; the farther to the right, the larger the diameter). See the final picture below.

Problem C

Put a 20 X 20 square in each corner of a canvas (assuming the canvas is at least 40 X 40). Remember to use the environment variables width and height so that your program will work no matter what the canvas size is. Try out a few canvas sizes to make sure your program works as specified. See the picture below (for a canvas of size 400 X 150).

Problem D

Make the background of the canvas turn yellow if the mouse is in the top left quadrant, cyan if the mouse is in the top right quadrant, magenta if the mouse is in the bottom left quadrant, and white if the mouse is in the bottom right quadrant. (HINT: You can do this by layering if-else instructions.) Your program should work for any size canvas. (Be sure to try a few different canvases to make sure.)

Once you run out of time, you should submit your completed work for credit.

• Assuming you completed all four problems, your lab-02 folder should look something like this in terms of its organization (indentation indicates a subfolder or its contents):

  ---

        lab-02
            andrewID-02-A
                index.html
                sketch.js
            andrewID-02-B
                index.html
                sketch.js
            andrewID-02-C
                index.html
                sketch.js
            andrewID-02-D
                index.html
                sketch.js
      

  ---

• Compress your lab-02 folder into a zip file. Go to the lab-02 folder and right click and select the option to either compress or zip the contents of the folder. You should see a lab-02.zip file appear along with the lab subfolder in the 15-104 folder:

  ---

        lab-02
            andrewID-02-A
                index.html
                sketch.js
            andrewID-02-B
                index.html
                sketch.js
            andrewID-02-C
                index.html
                sketch.js
            andrewID-02-D
                index.html
                sketch.js
        lab-02.zip
      

  ---

• Hand in the lab-02.zip file to Autolab.
  • Go to autolab.andrew.cmu.edu and log in.
  • You should see 15-104 as your course. Click on that course. (If you don't see the course, let your TA know.)
  • Select the Lab 02 assessment and drag the lab-02.zip file into designated drop off area. Click the checkbox that indicates you are abiding by the Academic Integrity policy for the course. (You can collaborate for labs.)
  • Click SUBMIT to upload your file to us.