p5.js

p5.js looks like an excellent framework and community to work with for building Simulations into wiki.

In this video The Coding Train introduces p5.js. What is it? What can you do with it? Where did it come from? What is its relationship with Processing? p5.js is both a lib... - youtube.com

p5.js is a JavaScript library that starts with the original goal of Processing, to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web - hello.p5js.org

p5.js | get started

Using the original metaphor of a Software Sketchbook, p5.js has a full set of drawing functionality. However, you're not limited to your drawing canvas, you can think of your whole browser page as your sketch! For this, p5.js has addon libraries that make it easy to interact with other HTML5 objects, including text, input, video, webcam, and sound - p5js.org

In this video, I demonstrate how to create a p5.js sketch using the Brackets code editor (http://brackets.io) and the "p5.js complete" download package (http... - youtube.com

# Beyond the canvas

p5.js allows your simulation to reach out Beyond the Canvas. Using the p5.dom add-on library, p5.js can be used to create and interact with HTML elements outside of the HTML5 Canvas.

This tutorial will explain more about how to use p5.dom - github

# Code Examples Take a look a some examples - p5js.org

Materials example

Load and Play Sound

Measuring Sound Amplitude

Here is a simple example code:

function setup() { createCanvas(640, 480); } function draw() { if (mouseIsPressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); }

# References and community

Frequently Asked Questions · processing/p5.js Wiki

processing/p5.js: p5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing. http://twitter.com/p5xjs —

# Downloads p5.min.js is about 250 KB and you can download the p5.js libraries or link to the CDN from here -p5js.org