Update Image Reference Examples on p5js.org to ES6

[stalgiag]

Update the Image section of the p5js reference to ES6. This will entail updating all of the examples that fall under @module Image.

As a step forward in the transition to ES6 all of the reference examples on p5js.org should be updated to use ES6 standard. This will often mean simply switching 'var' to 'let' or in some cases using es6 classes where applicable.

There are tons of resources online for learning about ES6. Here is an interactive guide that covers the biggest features.

[duskvirkus]

I’m planning to work on this issue. I do have a question though. It's part best practice and part beginner friendliness. @mlarghydracept @lmccart Should I use arrow notation for named functions? (like foo = () => {})

[duskvirkus]

Disregard previous question. I made the changes but I'm having problems passing the sample-linter (./util/sample-linter.js) when committing changes. I switched back to the master branch and hit the a similar error when running npm run grunt so I don't think it's my changes.

I'll dig into this problem later when I have more time but in the mean time if anyone has any pointers that would be helpful.

Error when trying to commit:

[10:47:44] node ./utils/sample-linter.js [started]
[10:47:45] node ./utils/sample-linter.js [failed]
[10:47:45] → × node ./utils/sample-linter.js found some errors. Please fix them and try committing again.

C:\Users\figraham\Code\github\p5.js\utils\sample-linter.js:174
            msg.column += this.lines[startLine].prefixLength;
                                                ^

TypeError: Cannot read property 'prefixLength' of undefined
    at Object.postprocess (C:\Users\figraham\Code\github\p5.js\utils\sample-linter.js:174:49)
    at linter.verifyAndFix.postprocess.problemLists (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\cli-engine.js:184:62)
    at Linter.verify (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\linter.js:1041:16)
    at Linter.verifyAndFix (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\linter.js:1135:29)
    at processText (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\cli-engine.js:178:32)
    at processFile (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\cli-engine.js:222:18)
    at fileList.map.fileInfo (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\cli-engine.js:537:20)
    at Array.map (<anonymous>)
    at CLIEngine.executeOnFiles (C:\Users\figraham\Code\github\p5.js\node_modules\eslint\lib\cli-engine.js:514:34)
    at eslintFiles (C:\Users\figraham\Code\github\p5.js\utils\sample-linter.js:219:23)
    at Object.<anonymous> (C:\Users\figraham\Code\github\p5.js\utils\sample-linter.js:236:16)
    at Module._compile (module.js:653:30)
    at Object.Module._extensions..js (module.js:664:10)
    at Module.load (module.js:566:32)
    at tryModuleLoad (module.js:506:12)
    at Function.Module._load (module.js:498:3)

Error from npm run grunt with no changes to master:

Running "eslint-samples:source" (eslint-samples) task
Warning: Cannot read property 'prefixLength' of undefined Use --force to continue.

Aborted due to warnings.
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! [email protected] grunt: `grunt`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the [email protected] grunt script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\figraham\AppData\Roaming\npm-cache\_logs\2018-12-13T18_05_50_650Z-debug.log

Note: checked log and it has no extra information.

[Spongman]

npm run grunt eslint-samples:source works fine for me on upstream/master.

try doing a git reset --hard first to ensure you have no local changes.

i notice you're on windows. do you have some global git line-ending change enforced?

[duskvirkus]

@Spongman Thanks for the advice! Turns out it was the line-endings. Followed this guide and everything seems is working great now.

[lmccart]

fixed with #3404