Rendering Error in Chrome (ProcessingJS Program)
- Dominant language
- JavaScript
- Stars
- 776
- Forks
- 180
- PR merge metrics
- No merged PRs in 30d
Description
Hi! I’m experiencing an issue with a [ProcessingJS project](https://www.khanacademy.org/computer-programming/visualode-library-and-demo/6127327220629504) I’m developing. It appears to be browser-related: on Windows 7, my code works perfectly in Firefox but not in Chrome.
### Problem Description
The project is a software library for differential equations, and the problem occurs when plotting function graphs: some of the graphs seem to be filled in as if they were 2D shapes, rather than curves as they should be. I have used noFill() to prevent this, but it is not working in Chrome.
### Chrome Rendering (Incorrect) vs. Firefox Rendering (Correct)


### Where Problem Occurs
The two main sections of the code are the library and the demo. Each feature of the library is demonstrated in a demo scene, and these can be navigated via "Back" and "Next" buttons on the canvas.
The scenes that demonstrate new features are labeled at the bottom of the canvas. For example, in the screenshots above, the 30th scene is labeled as scene[29], and its code is located in a function stored at index 29 of an array called scene (this array serves as a lookup table).
**The problematic behavior can be viewed by navigating in the canvas to the scenes labeled scene[29], scene[30], scene[41], and scene[43].**
The function I've named drawFunc() draws the graphs (i.e. the curves) in question, and it's called in all four of these scenes. This may be a good place to start troubleshooting, but the code looks okay to me (it does run perfectly in Firefox).
In case it helps to see how drawFunc() is being called, the definitions for all scenes begin on line 4433. (The project consists of over 7000 lines, but that's largely because I've embedded complete library documentation into the program, as comments.)
### What I've Tried
I've tried clearing my browser cache, running the program in incognito mode, and manually disabling all Chrome extensions. Still, it would be helpful to know if others can reproduce the problem.
Also, another user on Khan Academy pointed out that the error only occurs as a special case. Specifically, the problem appears to occur only when the stroke weight exceeds 1. (For example, the problem does not occur when 1.75 is changed to 1 on line 5673. The problem does occur with a value of 2.)
### Possible Causes
I'm not certain, but I believe this problem occurred between early January and now, without any changes in the code. So, it may be related to a Chrome update.
### A Possibly Related Problem
In Chrome, it appears that if the program is run and no action is taken by the user for more than five minutes (i.e. the user does not click "Next"), then "Oh noes!" guy says that a function is taking too long to run. Before five minutes elapse, he's happy. Like the main problem described above, this does not occur in Firefox.
### Thank you!
To anyone taking a look at this, thank you so much for your time!! I would really appreciate any guidance you can give.
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the linked ProcessingJS project and reproduce the rendering difference in Chrome and Firefox by opening scenes scene[29], scene[30], scene[41], and scene[43]. Read drawFunc() and the scene definitions beginning around line 4433, including the stroke-weight example around line 5673. Done means identifying the Chrome-specific cause and confirming that the affected graphs render as curves without regressions.
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
- Mostly clear
- Newbie friendliness
- 35/100