Start Coding with VSCode

Open the p5.js Folder

1. Press Alt + R to open the P5.js project.

Create a p5.js Project

1. Press cmd + shift + p to open the command palette and run Create a standard p5.js project.
2. When asked Do you want to create a new directory?, select Yes.
3. When asked What is the name of the new directory?, enter an appropriate name.
4. When asked Do you want to use a local or a hosted version?, select Hosted.

Project File Structure

• Project Name (folder)
  • index.html (file to open for preview)
  • sketch.js (file to write the main code)

Display in VSCode

1. To display the preview, open Project Name > index.html and click the magnifying glass icon in the top right corner.
   
   
2. The editor will display the file selected in the sidebar. Make sure the index.html file under Project Name is open.
3. The panel is used to display output results.
   1. Press Ctrl + J to open the panel. (Press Ctrl + J again to hide it)
   2. Select the Output tab.
   3. From the dropdown, click Embedded Live Preview Console.
      
      
4. Toggle the sidebar visibility with Ctrl + B.

Submit Your Test

Template for Drawing Problems

• Use the VSCode snippet p5-setup to create the setup() function.

function setup() {
    createCanvas(400, 400);
    // Code to draw shapes
}

Template for Output Problems

• Use the VSCode snippet p5-setup to create the setup() function.
• Use the print() function to output results.

// Example: Output the result of 1 + 1
function setup() {
    createCanvas(400, 400);
    print(1 + 1);
}