week1.day0.mariopaintmvp's Introduction

week1.day0.marioPaintMVP

Instructions

Use the command line to create a new project folder called marioPaintMVP
Inside of your project folder:
- Create a JS file, sketch.js
- Create an HTML file, index.html
- Make a reference to the JS file
- Reference the p5.js CDN in your HTML header
- Start your p5.js using the setup() function to define your canvas (500x500)
- Create the mouseDragged function (Read the p5.js documentation about how this function works).
- Inside of the function, create a simple shape that will be drawn at the mouse’s location
- Use the random() function from p5.js to create the shape with different dimensions each time the shape is created
  - NOTE: this is different from Math.random()
Large Tasks:
- Draw 3 boxes to the canvas and give them 3 different colors (these will serve as “buttons” for color selection).
- When the user clicks or presses on these “buttons”, the color values inside of the mouseDragged() function should change to match (See mouseClicked()).
  - HINT: Consider where the mouseX and mouseY is when the it’s clicked and what counts as being inside of the “button”.
- Finally, create a button for the user to clear the canvas completely and start over.

In addition to changing the dimension of the shape, also change the shape’s fill() color to a random color each time the mouse is dragged
- NOTE: on the Red-Green-Blue (RBG) scale, each color can have a value from 0-255
Instead of creating the same shape every time, create a rectangle or ellipse at random
- Bonus for creating a triangle, too!
On mouse click, have the background change to a random color