Seven Improvements in Stage 10
Every change is documented with a comment in Molecool.js itself.
Read the code below and look for the // Stage 8 and // Stage 10
annotations to see each improvement at the exact line where it was made.
| Element | Stage 8 Constructor Function | Stage 10 ES6 Class | Why |
|---|---|---|---|
| Class declaration | function Molecool(s, fd, kind) { … } |
class Molecool { … } |
Clarity of intent |
| Constructor | The outer function body is the constructor | constructor(s, fd, kind) { … } named method inside the class |
Standard, readable |
| Method definition | this.display = function(n) {…} — new copy per new Molecool() call |
display(n) {…} — one copy on Molecool.prototype, shared by all instances |
Memory efficiency |
| Local variables | var deltaX, var ratio, etc. — function-scoped, can leak |
let deltaX, let ratio, etc. — block-scoped |
ES6 best practice |
| Global leaks | temp = "" and distance = … — wrote to window.temp / window.distance silently |
let temp = "" and let distance = … — scoped to method |
Correctness |
| Constructor completeness | this.color and this.origColor left undefined — set only by a later setColor() call |
this.setColor(0) called at end of constructor — object fully valid immediately after new Molecool() |
OOP principle |
| Closure dead code | setVelocities() had this.speed = s reading constructor closure — dead code (immediately overwritten) |
Line removed — ES6 class methods cannot access constructor parameters via closure; dead code eliminated cleanly | Correctness |
new Molecool() to explore
the instance — though note that color() and grid
are p5.js/sketch globals, so methods that depend on them will only work inside
the live Stage 10 simulation.
The Source Code — Side by Side
Scroll inside each panel independently. Copy button copies the raw file, exactly as it appears in the project — ready to paste into any editor.
this inside the outer function
Molecool.prototype, shared by all instances
The Driver Sketch
A standalone p5.js sketch — 1 Lion + 4 Humans, elastic collisions, Aslan seeks.
Works with either Molecool version. Copy and paste into
editor.p5js.org alongside either
Molecool.js to run the demo immediately.
Open editor.p5js.org → New Sketch → replace
sketch.js content with this driver
→ click + to add a second file named Molecool.js
→ paste either Stage 8 or Stage 10 Molecool into it → Press .
Switch which Molecool.js you paste to see the behavior is identical from either design.
Single-file approach — p5.js editor (fastest):
Paste the full
Molecool.js source above this driver in one sketch.js file and press Play.
HTML file approach (embedding in a web page):
The driver
<script> tag must come
before the Molecool.js tag — not after it.
The driver declares var Grid = {} at load time, and
Molecool.js checks for Grid the instant it is parsed.
Load order in HTML is determined by tag order:
<script src="molecoolDriverSketch.js"></script> <!-- driver first: declares var Grid = {} -->
<script src="Molecool.js"></script> <!-- Molecool second: finds Grid already defined -->