p5.js-widget

by toolness

toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.

127 Stars 29 Forks Last release: Not found 173 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Build Status

This is a widget to make it easier to embed editable p5 sketches in blog posts, interactive curricula, and other places.

For more information on its usage, please see the website.

The rest of this documentation is about developing p5.js-widget, not using it.

Quick Start

git clone https://github.com/toolness/p5.js-widget.git
cd p5.js-widget
npm install
npm start

This will start a development server at http://localhost:8080/.

The development server automatically rebuilds the main JS bundle whenever you change any of its dependencies.

Note that this project uses TypeScript and React. Many source files use ECMAScript 2015, TypeScript and JSX, which can make the code look a bit unfamiliar.

If you're unfamiliar with React, consider reading the React Tutorial for p5 Programmers.

TypeScript Editor Support

While it's not required for making changes to the codebase, I highly recommend adding TypeScript Editor Support to your editor of choice. It really makes working on code a lot easier, thanks to auto-completion and a bunch of other useful features that make it feel like you've got an experienced coder watching your back.

CSS

Our CSS is intended to be as standards-compliant as possible, while leveraging new W3C standards to keep things easy to understand and maintain. To this end, we use PostCSS with a minimal number of plugins:

Tests

The test suite can be run on the development server at http://localhost:8080/test/, or on the command-line with

npm test
.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.