Web Editor Features

p5.js Web Editor Overview Outline

Introduction

• Hello, my name is Cassie Tarakajian and . .
  • I’m an artist, creative technologist . . .
  • I am the creator / lead developer of the new p5.js web editor funded via a Processing Foundation Fellowship
  • In this video, I’ll show you an overview of main features of the editor and how it works. You are welcome to ask you questions in the comment.
  • If you’re not familiar with it, the p5.js web editor is a website for creating and hosting p5.js sketches. It is designed to be beginner friendly—you can start writing code without needing to download or configure anything, or know anything about programming or p5.js.
  • For more about the philosophy of the editor and contributors see the “______” “welcome video” linked in the description below.
  • I’m going to assume a basic familiarity with p5.js and web development. If you are not, you can find a few resources linked in the video description.

**Running the Code **

• The first thing you’ll want to is go to URL and press the play (run?) button!
• On the left is your code! Here you have the basic skeleton of a p5.js sketch, a setup function creating a canvas, and a draw function drawing a grey background.
• On the right you have the running sketch, a gray canvas.
• I can change the code and make the background purple. . .
• But it’s still a grey canvas.
• By clicking run again, the sketch on the right updates.
• If I select this ‘auto-refresh’ button, whenever I change the code the sketch will re-run again automatically. Note this is similar to “live” coding, but it’s important to note that the sketch starts over from the beginning each time.
• Ok, now I’m going to add a circle and make it orange, and move it around with the mouse. This is primarily what the editor is for. Typing your JavaScript code that uses the p5 library and seeing the results right there in the browser!

Creating an Account and Saving Sketches

• If you already had an account you would just click login up here. But if you are watching this video, the editor is probably new to you and you’ll want to “sign up” for one!
• Click “Sign Up” and enter a username, e-mail, and password.
• You should now see on the top right “Hello, username!” -- this means you are logged in to your account. (You should also receive a verification e-mail at the address you entered.)
• Now you can save your sketch. File → Save
• Project Saved!
• Auto-Save Enabled! (the web editor will autosave every ______, you can disable this in the preferences if you like.)
• You might be wondering “what is the name of my sketch?”. The web editor has actually already named it for you, mine is “agile leather” here. . this is probably a good time for me to go ahead and change the name of the sketch to something more descriptive -- “p5 web editor video tutorial”
• You can change the name of your sketch as much as you like! What never changes, however, is the URL and this is how you can share your sketch with others.
• File → Share
  • Embedding the sketch on another page
  • Seeing the full screen sketch without code
  • A page with the code -- if someone goes to this link, they can’t change the code in your account, but they can “duplicate” the sketch into their account and make their own version! This is a great way to share examples with students.
• Duplicating

Console & Debugging

• The web editor features a JavaScript console built in, for help in debugging your sketches.
• Show the p5.js “print” function
• It also shows errors in your sketches
  • Show a syntax error
  • Show a friendly error
  • Show protection from infinite loops
• Linting warning/errors

Keyboard Shortcuts

Advanced Account Features

• My Sketches
• Examples
• Sketch and editor settings
• Account Settings

The Sidebar and basic file editing

• Opening/Closing sidebar
• Switching files
• Editing files
• Saving

Adding a JavaScript file

• Adding file
• Adding file to HTML
• Editing new file
• Renaming file
• Changing file in html
• Deleting file

Uploading and Using Media Files

• Add file via drag & drop
• Add file via clicking on the [ ] area
• Add different types of files
• And then use them in a sketch!
  • Extra - show one of these files in a folder

Accessibility

• Highlight the features that exist, but point that Mathura and/or Claire will go more in depth in another video
  • Semantic HTML
  • High-contrast theme
  • Lint warning sound
  • Aural outputs

Outro

• Thanks for watching!
• This video is part of the public release of the editor
• It will change over time as bugs get fixed and features get added
• Open to feedback—get in touch!
• Open to contributions—get in touch!
• Thanks again.