Skip to content

Untangled Step by Step task

Jump to bottom
Ed Perkins edited this page Aug 12, 2021 · 20 revisions

P5 First Project Step by Step guide

Here are some steps to help you build a simple p5 sketch like the one on the front page of https://www.untangled.org.uk

They don't tell you exactly how to do it, but they help you break down a complex task into acheivable steps. Practice your git skills by committing to Git after each step.

Don't worry about how far you get, concentrate on having a good understanding of what you need to do and check that all of your group understands how you're solving the problems.

Also, remember to have fun, take your time and don't put pressure on yourselves to get everything done.

For this task you will be mob programming with support from coaches.

The Steps

1. Git basics

  1. Log in to your git account
  2. Clone the untangled-template repo
  3. Make a new repo on your account and change the project origin to point at it (coaches will help)
  4. Change something, make an initial commit and push to your new repo.

2. Running the project on your local machine

  1. Run the project following the instructions from untangled template README.md
  2. A browser window should open and you should see a white rectangle on a black background

3. Some basic editing

You may want to refer to the P5.js library docs in order to complete these next steps

This Video from Daniel Shiffman might be helpful

  1. Open the project in your code editor
  2. Edit the code to make the black background fill the screen
  3. Add a white circle of a similar size to the rectangle
  4. Change the background to white and the shapes to black
  5. Change the shapes to be coloured randomly when the page loads

4. Adding movement

This example from the P5.js website may give you some ideas

  1. Make the circle move in a straight line
  2. Make the rectangle move in a diagonal line
  3. Make both shapes bounce off the edges of the screen
  4. Make both shapes move randomly around the screen

5. Re-usable objects

  1. Remove the rectangle
  2. Make five circles with the same behaviour and properties as the first circle
  3. Create a Circle class, so that you can make any number of circles appear.

6. Adding extra features

  1. Turn the circles into hexagons
  2. Add a sound that gets triggered when the hexagons bounce off the screen edges
  3. Make the the big hexagons make a low pitched sound and smaller ones make a high pitched sound

7. Physics

  1. Make the hexagons attract and/or repel each other
Clone this wiki locally