processing / processing/p5.js

p5.js 2.0 🙏 P5LIVE

Open
#7,537 2 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Core p5.js 2.0+
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

p5.js 2.0 🙏 P5LIVE

Thread to discuss issues implementing v2.0 within P5LIVE, a live-coding fullscreen editor for p5.js.

Testing

Can install offline mode or use online.
To force 2.0, add the following snippet to very top of sketch, which disables p5, loads an external library, then inits p5:

/* manually load p5.js - v2.0 beta*/
// no p5
let libs = ['https://cdn.jsdelivr.net/npm/p5@2.0.0-beta.2/lib/p5.min.js']
new p5()

Can also replace the p5.js file in offline mode which is held in /includes/p5/p5.min.js.

WARNING: when digging under hood with offline mode, P5LIVE is a beast of spaghetti code in one file to win them all(!) = my poetic learning JS over the years.. it works.. it's beautiful to me, maybe ugly to others.. likely tricky to parse - so be it... main concept – all code runs within a sandboxed iframe – code from editor is joined with the libs, and passed into the <body> of /includes/templates/p5live_sketch.html doc.

Issues

  • draw() doesn't make it past 1 frameCount cycle
    • what changed under hood to cause that??
  • FES complains about overwriting global vars (frameCount / mouseX / mouseY / pmouseX / pmouseY)
    • is this global-overwrite FES necessary? floods console on every recompile (unless manually filtered).

Future Planning

  • default version is 1.0+ until _____ then 2.0?
    • how to deal with loading pre-2.0 files?
    • only mod-dated files after switch default to 2.0?
  • JSON style settings at top of sketch to custom load version of p5, ie let p5liveSettings = {version:'2.0.0'}, which uses CDN for online mode and offline potentially uses node fs to once download custom version if needed.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the P5LIVE testing links and its offline-mode files, especially /includes/p5/p5.min.js and /includes/templates/p5live_sketch.html. Reproduce the listed draw() frameCount behavior and FES global-variable warnings using the provided p5.js 2.0 beta loading snippet. Done means the compatibility issues and version-loading questions in the checklist have clear resolutions.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.