• Stars
    star
    337
  • Rank 125,256 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 10 years ago
  • Updated almost 8 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Deprecated desktop editor for p5.js

This editor has been deprecated, we will not be making further releases. We are turning our energy toward a web editor which will be released later this year. For now, we recommend using editors like Brackets, Atom, Sublime Text, or OpenProcessing.

p5.js Editor: a code editor designed for p5.js

The p5.js Editor is a simple coding environment designed for new programmers to get started with p5.js. It's modeled off of the Processing editor, and intended to provide a similar experience.

p5.js Editor Screenshot

Features

  • Code editor with syntax highlighting that supports javascript, p5.js syntax, html and css.
  • Creates and manages p5.js project folders
  • Automatically updates new releases of p5.js and add-on libraries
  • Runs sketches inside the editor or in the browser
  • Starts a local server for the user
  • Provides a basic logging console

Future Plans

  • Linux version
  • Integrated p5.js documentation
  • Update sketches live

Download

To get started, download the editor here, and visit p5js.org for more info on p5.js.

Development

When you're ready to get started, follow the direction below:

Prerequisites

  1. Node.js
  2. Git

Setup

  1. Clone this repo: git clone https://github.com/processing/p5.js-editor
  2. Enter the repo directory and install the development modules: npm install
  3. Install secondary modules: cd public and then npm install
  4. Install gulp.js globally: npm install gulp -g
  5. From the root directory of the repo run gulp: gulp
  6. Start up the app: npm run app

Workflow

Most development takes place in the app folder. Gulp will watch the files in the app folder, then bundle them up with Browserfiy, and send the results to the public folder.

The public folder contains the package.json for the application window, as well as the base index.html file for the application.

Below you'll find documentation for the different libraries we're using

Building

Just run the gulp task: gulp build

This will build Mac and Windows versions of the editor, and place them in dist/. Please note that due to an issue with file path lengths (to be fixed, evidently in the next version of npm), Mac users may run into an issue building the Windows version. To fix this install and run flatten-packages:

npm install -g flatten-packages
cd public
flatten-packages

And then run gulp build from the root directory of the project.

More Repositories

1

p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs โ€”
JavaScript
20,905
star
2

processing

Source code for the Processing Core and Development Environment (PDE)
Java
6,448
star
3

p5.js-web-editor

The p5.js Editor is a website for creating p5.js sketches, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! You can create, share, or remix p5.js sketches without needing to download or configure anything.
JavaScript
1,385
star
4

p5.js-sound

p5.sound brings the Processing approach to Web Audio and p5.js. Demos:
JavaScript
872
star
5

processing-android

Processing mode and core library to create Android apps with Processing
Java
766
star
6

processing-docs

[Deprecated] Processing reference, examples, tutorials, and website
HTML
371
star
7

processing-video

GStreamer-based video library for Processing
Java
272
star
8

p5.js-website-legacy

p5.js website built using Node.js, Grunt, YAML and Assemble
JavaScript
238
star
9

p5.js-video

JavaScript
175
star
10

processing-sound

Audio library for Processing built with JSyn
Java
146
star
11

processing-web-archive

Repository for the Processing.org web site, examples, reference, and dreams
HTML
128
star
12

processing-sound-archive

Archived Sound Library for Processing
HTML
125
star
13

processing-android-archive

Java
96
star
14

p5.accessibility

p5.accessibility.js makes the p5 canvas more accessible to people who are blind and visually impaired. It can be used with any p5.js sketch and it is used in the p5.js web editor.
JavaScript
74
star
15

processing-experimental

Experimental Mode for the PDE
Java
72
star
16

processing-website

Repository for the processing.org website
MDX
68
star
17

processing-templates

Library, Mode, and Tool templates
Java
60
star
18

p5.js-website-OLD

The website for p5.js.
JavaScript
60
star
19

Processing-Hour-Of-Code

Repository for an interactive one-hour Processing tutorial.
JavaScript
56
star
20

processing-eclipse

Eclipse plugin project for Processing
Java
50
star
21

processing-android-library-template

Processing Android Library Template for Gradle
CSS
33
star
22

p5.sound.js-ARCHIVE

new build of p5.sound.js library
JavaScript
33
star
23

processing-video-android

Processing Video implementation for Android
Java
32
star
24

processing-tool-template

Processing Tool Template for Eclipse
Java
28
star
25

processing-examples

Example files for "processing4" and "processing-website"
Processing
22
star
26

p5.js-libraries

TypeScript
21
star
27

processing-pi-website

Files for the pi.processing.org subdomain that documents Processing on the Raspberry Pi
CSS
16
star
28

p5.js-website

New p5.js website!
MDX
16
star
29

p5.js-getting-started-es

Spanish translation of Getting Started with p5.js
HTML
14
star
30

pr05-grant

Documentation related to the Processing Foundation Software Development Grant also known as `pr05`
13
star
31

processing4-javafx

JavaFX library for Processing 4
Java
11
star
32

processing-design-system

Processing
10
star
33

processing-library-template-gradle

Processing Library Template for Gradle and IntelliJ
Java
9
star
34

p5.sound.js

JavaScript
9
star
35

processing-javadocs

I am testing the idea of using github pages for javadocs
HTML
7
star
36

processing-android-website

Repository of the official Processing for Android website
HTML
7
star
37

processing-forum-archive

Bugs and details about the Processing Forum: http://forum.processing.org
7
star
38

p5.js-website-translator

Experimental web app to facilitate the p5.js website translation.
Vue
7
star
39

OSACC-p5.js-Access-Report

6
star
40

p5.js-showcase

JavaScript
6
star
41

p5.js-release

Holds the built, versioned releases of p5.js.
JavaScript
5
star
42

Processing-Foundation-GSoC

This repository is a central hub for all resources, project ideas, and guidelines related to the Google Summer of Code (GSoC) program at the Processing Foundation
4
star
43

processing-community-day-website

The website for Processing Community Day
CSS
2
star
44

cardboard-wrapper-sdk

Wrapper Library for Google's Cardboard sdk for VR
C++
2
star
45

processing-library-template

Java
2
star
46

processing-gsoc

1
star
47

processing-doclet

Java
1
star
48

p5.js-example

GLSL
1
star
49

p5.js-offline-reference

JavaScript
1
star