MEADOWBROOK P5JS
  • Fifth Grade Math Class
    • First Project
    • Openprocessing
    • Email from Weds
    • Practice
  • Tutorials
    • P5JS Intro >
      • Intro HW
    • Shapes >
      • Processing Hour of Code Poster
      • House
      • Shapes HW >
        • Shaded Triangles
    • Color >
      • Color and Shapes Review
      • Color HW
    • Arcs >
      • Introduction to Arcs
      • Thurs Arcs Homework
      • Four Shapes
      • Fri. Homework
      • 11.37 Two Arcs in Rectangle
    • Moving with the Mouse >
      • Shaded Arcs
      • Moving Mouse HW
    • Variables >
      • Draw Proportional Face >
        • Code for Head with Eyes
      • Pet Goat >
        • Pet Goat Solution Image
    • Distance >
      • Mouse inside a Circle
    • Map Command
    • Conditional Statements >
      • Detecting an Edge
      • Else Statement
      • Boolean Variables
    • Rotate, Translate, Push, Pop >
      • Scale
      • More on Push and Pop
    • Repeat Loops >
      • Nested Loops
    • Define Your Own Functions >
      • Functions
      • Functions and Return
    • Object Oriented Classes
    • Arrays >
      • Arrays and Loops
      • Arrays of Objects
      • Constructor Objects
      • Adding and Removing Objects in an Array
      • Clicking on Objects
  • Fifth Grade Math Class
    • First Project
    • Openprocessing
    • Email from Weds
    • Practice
  • Tutorials
    • P5JS Intro >
      • Intro HW
    • Shapes >
      • Processing Hour of Code Poster
      • House
      • Shapes HW >
        • Shaded Triangles
    • Color >
      • Color and Shapes Review
      • Color HW
    • Arcs >
      • Introduction to Arcs
      • Thurs Arcs Homework
      • Four Shapes
      • Fri. Homework
      • 11.37 Two Arcs in Rectangle
    • Moving with the Mouse >
      • Shaded Arcs
      • Moving Mouse HW
    • Variables >
      • Draw Proportional Face >
        • Code for Head with Eyes
      • Pet Goat >
        • Pet Goat Solution Image
    • Distance >
      • Mouse inside a Circle
    • Map Command
    • Conditional Statements >
      • Detecting an Edge
      • Else Statement
      • Boolean Variables
    • Rotate, Translate, Push, Pop >
      • Scale
      • More on Push and Pop
    • Repeat Loops >
      • Nested Loops
    • Define Your Own Functions >
      • Functions
      • Functions and Return
    • Object Oriented Classes
    • Arrays >
      • Arrays and Loops
      • Arrays of Objects
      • Constructor Objects
      • Adding and Removing Objects in an Array
      • Clicking on Objects
Search by typing & pressing enter

YOUR CART

P5JS - INTRODUCTION

Picture
 
  1. Watch hello processing introduction to learn about why artists use computer programming.
  2.  Bookmark two things in your bookmarks bar: p5js.org and editor.p5js.org
  3. The editor.p5js.org website opens with this text (comments were added below with // marks):
         
             function setup() { // happens only once
                    createCanvas(400, 400); // size of the canvas
              } // needed to close the setup() section
​
           function draw() { // repeats over and over
                   background(220); // 0 = black; 225 = white
             } // needed to close the draw section


  1. Create a new account on editor.p5js.org. Use your meadowbrook login name, email, and password.
  2. Go to the Settings (the pink gear) and make the font larger (size 20) and change the theme to high contrast.
  3. HW: Watch 1.3: Basics of drawing - p5.js Tutorial

Powered by Create your own unique website with customizable templates.