Instalacja P5.js

⊥Źródło: 1.2: p5.js Workflow – p5.js Tutorial

Krok pierwszy: instalowanie p5-manager

1. Instalujemy Node.js ze strony https://nodejs.org/en/
2. $ sudo npm install p5-manager -g Password:
   npm WARN deprecated babel-preset-es2015@6.24.1: 🙌 Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
   /usr/local/bin/p5 -> /usr/local/lib/node_modules/p5-manager/bin/p5-manager.js> fsevents@1.1.3 install /usr/local/lib/node_modules/p5-manager/node_modules/fsevents
   > node install[fsevents] Success: “/usr/local/lib/node_modules/p5-manager/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node” already installed
   Pass –update-binary to reinstall or –build-from-source to recompile
   + p5-manager@0.4.2
   added 440 packages in 13.828s
   Mac-mini-Jarogniew:~ yarogni7ew$
3. $ p5
   p5-manager version 0.4.2
   Mac-mini-Jarogniew:~ yarogni7ew$
4. $ pwd  [print working directory, informacja gdzie na komputerze znajduje się folder roboczy]
   /Users/yarogni7ew
   Mac-mini-Jarogniew:~ yarogni7ew$
5. $ cd Desktop/ 
   Mac-mini-Jarogniew:Desktop yarogni7ew$ pwd
   /Users/yarogni7ew/Desktop
   Mac-mini-Jarogniew:Desktop yarogni7ew$
6. $ p5 generate -b p5js_testowy
   p5-manager version 0.4.2
   create : p5js_testowy
   create : p5js_testowy/sketch.js
   create : p5js_testowy/index.html
   create : p5js_testowy/libraries
   create : p5js_testowy/libraries/p5.js
   create : p5js_testowy/libraries/p5.sound.js
   create : p5js_testowy/libraries/p5.dom.js
   Mac-mini-Jarogniew:Desktop yarogni7ew$

Krok drugi: instalowanie edytora

1. Ściągamy ze strony https://atom.io edytor i instalujemy go
2. Otwieramy nasz folder: p5js_testowy
3. Dokonujemy małej zmiany, ja dodałem ładniejszą zieleń → background(120, 255, 120);

   function setup() {
   	createCanvas(windowWidth, windowHeight);
   }
   
   function draw() {
   
   	background(120, 255, 120);
   
   }

4. Zapisujemy! cmd-S
   
5. Klikamy w index.html i w przeglądarce otwiera się zielone okno z adresem: file:///Users/yarogni7ew/Desktop/p5js_testowy/index.html

Krok trzeci: instalowanie edytora

W edytorze ATOM wchodzimy w Preferences… ⇒ +Install ⇒ atom-live-server
Po instalacji wchodzimy w zakładkę Packages ⇒ atom-live-server ⇒ Start server (ctrl-alt-L)