how to work with sublime text 2?

Answers

• blindfish

  April 2016

  Have you read the Getting started tutorial? :(|)

  You'll see that in principle you don't need anything extra to author p5js sketches in Sublime Text (or any other text editor); except a browser to open your files. There is no required compile step to run JS code!!!

  It is however a good idea to run a local server to test with; since you can run into security restrictions when trying to dynamically load local assets.
• GoToLoop

  April 2016 edited April 2016

  It is however a good idea to run a local server to test with; ...

  I dunno why folks don't state the obvious: Any Firefox based browser can freely run any JS scripts!
  And for Chrome based 1s, like SlimJet for example, just add "--allow-file-access-from-files" in its shortcut. Here's how mine is: "C:\Program Files\Slimjet\slimjet.exe" --allow-file-access-from-files
• GoToLoop

  April 2016 edited April 2016

  There's also an online IDE dedicated to p5.js: http://p5ide.HerokuApp.com/editor
  For hosting as well, I like this 1: http://p5js.SketchPad.cc
• GoToLoop

  April 2016 edited April 2016

  Here's some sketch entirely embedded in 1 ".html" file.
  It works in any up-to-date Chrome, Firefox and even IE11 based browsers.
  In IE11, just click to accept to run "blocked content" though. B-)

  It's available online in these 2 sketch hosting sites:

  1. http://p5js.SketchPad.cc/sp/pad/view/ro.$V3VWYDTmRb/latest
  2. http://CodePen.io/anon/pen/ZQjQmK?editors=0010#0

  Also running under Pjs library (Java/JS cross-mode): :> http://studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk

  Just copy and paste the code below, saving it as an ".html" file.
  Then double-click or drag it to some browser: :-bd

  <script src=http://p5js.org/js/p5.min.js async></script>
  
  <script>
  
  /**
   * Conglomerate of Points (v2.01)
   * Janosch & GoToLoop (2016-Feb-01)
   *
   * forum.Processing.org/two/discussion/14709/simple-p3-sketch-to-p5-js
   * studio.ProcessingTogether.com/sp/pad/export/ro.9lMOG-RZX8JDk
   *
   * p5js.ProcessingTogether.com/sp/pad/export/ro.CYuAGs4xyhzhKu
   * CodePen.io/anon/pen/ZQjQmK?editors=0010#0
   */
  
  "use strict";
  
  const EASE = .07, QTY = 10, DIAM = 10, FAR = 0xFF, NEAR = 20, AWAY = 150;
  const points = Array(QTY), tPoints = Array(QTY);
  
  function setup() {
    createCanvas(1000, 650);
    strokeWeight(.5).colorMode(RGB, FAR).ellipseMode(CENTER);
  
    for (let i = 0; i < QTY; ++i) {
      points[i]  = createVector(random(width), random(height));
      tPoints[i] = createVector(random(width), random(height));
    }
  }
  
  function draw() {
    background(243, 239, 232);
  
    for (let i = 0; i < QTY; ++i) {
      const xdist = tPoints[i].x - points[i].x;
      const ydist = tPoints[i].y - points[i].y;
  
      const x = points[i].x += EASE * .5 * xdist;
      const y = points[i].y += EASE * .5 * ydist;
  
      for (let j = i + 1; j < QTY; ++j) {
        const dst = dist(x, y, points[j].x, points[j].y);
  
        if (dst < FAR) {
          stroke(205, 106, 104, FAR - dst);
          line(x, y, points[j].x, points[j].y);
        }
      }
  
      const distance = .5 * (xdist*xdist + ydist*ydist);
  
      noStroke();
      fill(205, 106, 104, 200 - distance*EASE);     
      ellipse(x, y, DIAM, DIAM);
  
      if (distance <= NEAR) {
        points[i].set(tPoints[i]);
  
        tPoints[i].x = mouseX + random(-AWAY, AWAY);
        tPoints[i].y = mouseY + random(-AWAY, AWAY);
      }
    }
  }
  
  </script>
  
• letsprocessing

  April 2016

  Also you can create the following Build System file in {Path to Sublime Text folder}/Packages/User folder, choose new build system from Tools->Build System menu and run your scripts directly from the text editor with Ctrl+B command.

  // ProcessingJS.sublime-build
  
  {
      "cmd": ["{Path to Chrome/Firefox folder}", "$file"]
  }