Visualise you Tunes with Code

The P5 coding environment


Table of Contents

  1. Create musical visualisations using coding with Javascript
  2. The P5 coding environment
  3. How digital sound works
  4. Coding
  5. Challenges
  6. Reference

The Environment

For this session, we will use the P5 online editor.

Go here:

P5 Editor


P5 coding environment

If you already have a login, click on Log in, or else Sign up:

P5 environment login

Using the Environment

P5 projects are called sketches.

When you start up the environment you will see the starter code:

Starter code

Click the run button to run your code:

P5 run

You should see a grey square:

Grey square

Add the line of code circle(200,200,50) as shown below to draw a circle:

Draw circle

Run the code again. You should see a white circle:

White circle

< Prev PageNext Page >Back to resources page

Table of Contents

  1. Create musical visualisations using coding with Javascript
  2. The P5 coding environment
  3. How digital sound works
  4. Coding
  5. Challenges
  6. Reference
©2024 - Think Create Learn Ltd