01 Getting Started - p5.js Editor

What do we need to get started in p5.js?

Vocabulary

Console, Preview Pane, Coding Pane, Canvas, Sketch, Asset, Execute Code, Debug, HTML, CSS, JavaScript

Study Questions

  1. Why do we need a workflow setup?
  2. What is the difference between a console and preview pane in p5js editor?
  3. Why might it be good to develop a naming scheme for the titles of your programs?
  4. What is HTML? (see resourse links below and think about our class discussion)
  5. What is CSS?
  6. What is Javascript?

Activity

  • Watch Video #1 (below)
  • Visit p5js.org
  • Log-in via GOOGLE using your school account.
  • Play with p5.js settings, especially font-size & themes and select to your liking.
  • Follow class discussion on an organizing template for class projects.

Javascript File (*.js)

/*
Name:
Description: 
*/

//your well commented code below

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

HTML File (*.html)

CSS File (*.css)

html, body {
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
}

Practice Template for Activity 1.

  • Fill in a title and description based on what you’ve learned in this lesson.
  • Answer the vocabulary and study questions from this lesson.
  • Follow teacher discussion on project submission.

Resources

  1. Video: 01 Getting Started - p5.js Web Editor
  2. Link: HTML basics
  3. Link: CSS basics
  4. Link: Javascript basics
« ICM Home
02 Coordinate System and Given Functions »