Canvas not updating or not updating properly when code is edited in PJS environment
- Dominant language
- JavaScript
- Stars
- 776
- Forks
- 180
- PR merge metrics
- No merged PRs in 30d
Description
Several learners have been reporting frustrations on ZenDesk as well as in community discussions about output (the canvas) not updating, or not updating properly when certain changes to code are made in the ProcessingJS environment.
It's very likely this should be two (or more?) issues, but they feel as though they could be related.
This is generally reported in one of two forms:
- The student changes the value of some variable or property and expects a corresponding change on the canvas, but the code isn't re-executed (`runCode` isn't running, perhaps?)
- The student makes a change to their program, a minor edit, typically any edit (though sometimes the report is of a specific type of edit, it's often just pressing a single character) and the values for one or more parameters to ProcessingJS commands is "lost"-- such as reset to black for colors for things like `stroke`, `fill`, or `background`, or font size being reset to a default.
In [this program](https://www.khanacademy.org/computer-programming/ka-bug/5045078495723520) for example, changing (for example) the value of one of the parameters of the `ellipse()` or `fill()` call that is inside `thing.doesntLiveEdit()` doesn't effect a corresponding change to the canvas that the student expects. The restart button must be clicked to see the change. This seems to be specific to calling a function that is a method on an object; replacing with var thing = function() and calling that inside the draw loop in the example provided gives expected behavior (updates in realtime with a change to the code inside `thing()`).
I don't have a good example handy of the second type of bug (lost color / reset to black), but I believe it is currently being referred to as the "infamous color bug" in issue #444 and [this example program](https://www.khanacademy.org/computer-programming/the-color-bug/5782627868606464) by @DozenalFTW. I believe I've seen the question come up in Help Requests, usually framed as "why does everything go black?" or "why do I have to restart when I make changes to see the color?".
I haven't been able to find existing issues that quite match these, can anyone advise if they exist, or suggest whether to break these up and how? Thanks!
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the two reported behaviors in the linked KA programs, including the object-method example and the color-bug example referenced in issue #444. Inspect the live editor's runCode path and ProcessingJS edit handling, then separate the reports into actionable issues with reproduction steps and tests or verification for each fix.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100