Khan / Khan/live-editor

Rendering Error in Chrome (ProcessingJS Program)

Open
#712 5 comments 0 reactions 0 assignees View on GitHub
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)

![scene 29 with error in Chrome - visualODE Demo version 0-16-9](https://user-images.githubusercontent.com/51820777/59505161-dbac8800-8e61-11e9-9cb5-3e3cdd34c0a1.PNG)

![scene 29 without error in Firefox - visualODE Demo version 0-16-9](https://user-images.githubusercontent.com/51820777/59505170-e2d39600-8e61-11e9-86d9-69cbebcd232f.PNG)

### 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.