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)