01.09 Hello Art From Code Assignment

On this page

Assignment Deliverables

Create an image using the p5.js Web Editor .
Save your final code as a Sketch and rename it to a title the contains, “Hello Art …”
Enter the URL of the Sketch the the URL field of the Canvas Assignment

Assignment Overview

As an introduction to creating visual art with code, we will use the p5.js online Web Editor and basic Primitive Shape functions to create a visual image on the Canvas. The image content is up to you but should be your original creation. Although this is an experiment to become familiar with JavaScript and p5.js, make sure to push and challenge yourself with the image.

Think about what canvas size that you want to use. Will the image be representative, abstract, or both?

Assignment Requirements

Use a minimum of 3 colors.
Use each of the following Primitives at least once:
- ellipse() - ellipse() Reference
- circle() - circle() Reference
- line() - line() Reference
- point() - point() Reference
- quad() - quad() Reference
- rect() - rect() Reference
- square() - square() Reference
- triangle() - triangle() Reference
Use each of the following Modifier functions at least once:
- background() - background() Reference
- color() - color() Reference
- stroke() - stroke() Reference
- noStroke() - noStroke() Reference
- strokeWeight() - strokeWeight() Reference
- fill() - fill() Reference
- noFill() - noFill() Reference
- rectMode() - rectMode() Reference
- ellipseMode() - ellipseMode() Reference
Pay attention to the order of your code as you create.

Stretch Goals and Experiments to Try

Use mouseX and/or mouseY as a parameter in one or more of the functions to add interactivity to the image. mouseX Reference
Use the random() function to add variety to a parameter. random() Reference
Add an image file as media with loadImage() and use in the Sketch. loadImage() Reference
Try using curves.
Use gradients.
Use arc() - arc() Reference