Skip to docs navigation

01.09 Hello Art From Code Assignment

Assignment Deliverables

  1. Create an image using the p5.js Web Editorexternal link .
  2. Save your final code as a Sketch and rename it to a title the contains, “Hello Art …”
  3. 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

  1. Use a minimum of 3 colors.
  2. Use each of the following Primitives at least once:
  3. Use each of the following Modifier functions at least once:
  4. Pay attention to the order of your code as you create.

Stretch Goals and Experiments to Try

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

Assignment Resources

Online Resources