hughsk/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
    <script src="p5.serialport.js"></script>
    <script src="sketch.js"></script>
  </body>
</html>

## p5.serialport.js
!function(t,e){"function"==typeof define&&define.amd?define("p5.serialport",["p5"],function(t){e(t)}):e("object"==typeof exports?require("../p5"):t.p5)}(this,function(t){t.SerialPort=function(t,e){var r=this;this.bufferSize=1,this.serialBuffer=[],this.serialConnected=!1,this.serialport=null,this.serialoptions=null,this.emitQueue=[],this.serialportList=[],this.hostname="string"==typeof t?t:"localhost",this.serverport="number"==typeof e?e:8081;try{this.socket=new WebSocket("ws://"+this.hostname+":"+this.serverport),console.log("ws://"+this.hostname+":"+this.serverport)}catch(t){void 0!==r.errorCallback&&r.errorCallback("Couldn't connect to the server, is it running?")}this.socket.onopen=function(t){if(console.log("opened socket"),serialConnected=!0,void 0!==r.connectedCallback&&r.connectedCallback(),r.emitQueue.length>0){for(var e=0;e<r.emitQueue.length;e++)r.emit(r.emitQueue[e]);r.emitQueue=[]}},this.socket.onmessage=function(t){var e=JSON.parse(t.data);void 0!==e.method?"echo"==e.method||("openserial"===e.method?void 0!==r.openCallback&&r.openCallback():"data"===e.method?(r.serialBuffer.push(e.data),void 0!==r.dataCallback&&r.serialBuffer.length>=r.bufferSize&&r.dataCallback(),void 0!==r.rawDataCallback&&r.rawDataCallback(e.data)):"list"===e.method?(r.serialportList=e.data,void 0!==r.listCallback&&r.listCallback(e.data)):"write"===e.method||("error"===e.method?void 0!==r.errorCallback&&r.errorCallback(e.data):console.log("Unknown Method: "+e))):console.log("Method Undefined: "+e)},this.socket.onclose=function(t){void 0!==r.closeCallback&&r.closeCallback()},this.socket.onerror=function(t){void 0!==r.errorCallback&&r.errorCallback()}},t.SerialPort.prototype.emit=function(t){this.socket.readyState==WebSocket.OPEN?this.socket.send(JSON.stringify(t)):this.emitQueue.push(t)},t.SerialPort.prototype.isConnected=function(){return!!self.serialConnected},t.SerialPort.prototype.list=function(t){return"function"==typeof t&&(this.listCallback=t),this.emit({method:"list",data:{}}),this.serialportList},t.SerialPort.prototype.open=function(t,e,r){"function"==typeof r&&(this.openCallback=r),this.serialport=t,this.serialoptions="object"==typeof e?e:{},this.emit({method:"openserial",data:{serialport:this.serialport,serialoptions:this.serialoptions}})},t.SerialPort.prototype.write=function(t){var e=null;e="number"==typeof t?[t]:"string"==typeof t?t:(Array.isArray(t),t),this.emit({method:"write",data:e})},t.SerialPort.prototype.read=function(){return this.serialBuffer.length>0?this.serialBuffer.shift():-1},t.SerialPort.prototype.readChar=function(){return this.serialBuffer.length>0?String.fromCharCode(this.serialBuffer.shift()):-1},t.SerialPort.prototype.readBytes=function(){if(this.serialBuffer.length>0){var t=this.serialBuffer.slice();return this.serialBuffer.length=0,t}return-1},t.SerialPort.prototype.readBytesUntil=function(t){console.log("Looking for: "+t.charCodeAt(0));var e=this.serialBuffer.indexOf(t.charCodeAt(0));if(-1!==e){var r=this.serialBuffer.slice(0,e+1);return this.serialBuffer=this.serialBuffer.slice(e,this.serialBuffer.length+e),r}return-1},t.SerialPort.prototype.readString=function(){for(var t=[],e=0;e<this.serialBuffer.length;e++)t.push(String.fromCharCode(this.serialBuffer[e]));return this.serialBuffer.length=0,t.join("")},t.SerialPort.prototype.readStringUntil=function(t){for(var e=[],r=0;r<this.serialBuffer.length;r++)e.push(String.fromCharCode(this.serialBuffer[r]));var o="",i=(e=e.join("")).indexOf(t);return i>-1&&(o=e.substr(0,i),this.serialBuffer=this.serialBuffer.slice(i+t.length)),o},t.SerialPort.prototype.readLine=function(){return this.readStringUntil("\r\n")},t.SerialPort.prototype.available=function(){return this.serialBuffer.length},t.SerialPort.prototype.last=function(){var t=this.serialBuffer.pop();return this.serialBuffer.length=0,t},t.SerialPort.prototype.lastChar=function(){return String.fromCharCode(this.last())},t.SerialPort.prototype.clear=function(){this.serialBuffer.length=0},t.SerialPort.prototype.stop=function(){},t.SerialPort.prototype.close=function(t){"function"==typeof t&&(this.closeCallback=t),this.emit({method:"close",data:{}})},t.SerialPort.prototype.onData=function(t){this.on("data",t)},t.SerialPort.prototype.onOpen=function(t){this.on("open",t)},t.SerialPort.prototype.onClose=function(t){this.on("close",t)},t.SerialPort.prototype.onError=function(t){this.on("error",t)},t.SerialPort.prototype.onList=function(t){this.on("list",t)},t.SerialPort.prototype.onConnected=function(t){this.on("connected",t)},t.SerialPort.prototype.onRawData=function(t){this.on("rawdata",t)},t.SerialPort.prototype.on=function(t,e){"open"==t?this.openCallback=e:"data"==t?this.dataCallback=e:"close"==t?this.closeCallback=e:"error"==t?this.errorCallback=e:"list"==t?this.listCallback=e:"connected"==t?this.connectedCallback=e:"rawdata"==t&&(this.rawDataCallback=e)}});

## sketch.ino
/*

*/

#include <Adafruit_CircuitPlayground.h>

int baudRate = 9600;

void setup() {
  CircuitPlayground.begin();
  Serial.begin(baudRate);
}

void loop() {
  float time = millis() * 0.005;

  for (int i = 0; i < 10; i++) {
    CircuitPlayground.setPixelColor(i,
      brightness(i + 0, time),
      brightness(i + 2, time),
      brightness(i + 4, time)
    );
  }

  if (!Serial.available()) return;

  Serial.println(String(CircuitPlayground.motionY()));
}

int brightness(int id, float time) {
  return int(255.0f * (sin(float(id) + time) * 0.5f + 0.5f));
}

## sketch.js
var movement = 0
var position = 0
var serial

function setup () {
  createCanvas(windowWidth, windowHeight)

  serial = new p5.SerialPort()
  serial.on('list', onListPorts)
}

function draw () {
  background(0, 15, 35)

  var minRadius = 20
  var maxRadius = Math.min(width / 2, height / 2)

  fill(255, 255, 255)
  ellipse(width / 2 - position, height / 2, 50)
}

function onListPorts (ports) {
  console.log('ports:', ports)
  serial.on('data', onSerialData)
  serial.on('open', function (port) {
    console.log('port open:', port)
  })

  serial.open(ports[1])
}

function onSerialData () {
  var value = serial.readStringUntil('\n')
  if (!value) return

  position += parseFloat(value)
  if (position < -width / 2) position = -width / 2
  if (position > +width / 2) position = +width / 2
}
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.14/p5.min.js"></script>
	<script src="p5.serialport.js"></script>
	<script src="sketch.js"></script>
	</body>
	</html>
	/*

	*/

	#include <Adafruit_CircuitPlayground.h>

	int baudRate = 9600;

	void setup() {
	CircuitPlayground.begin();
	Serial.begin(baudRate);
	}

	void loop() {
	float time = millis() * 0.005;

	for (int i = 0; i < 10; i++) {
	CircuitPlayground.setPixelColor(i,
	brightness(i + 0, time),
	brightness(i + 2, time),
	brightness(i + 4, time)
	);
	}

	if (!Serial.available()) return;

	Serial.println(String(CircuitPlayground.motionY()));
	}

	int brightness(int id, float time) {
	return int(255.0f * (sin(float(id) + time) * 0.5f + 0.5f));
	}
	var movement = 0
	var position = 0
	var serial

	function setup () {
	createCanvas(windowWidth, windowHeight)

	serial = new p5.SerialPort()
	serial.on('list', onListPorts)
	}

	function draw () {
	background(0, 15, 35)

	var minRadius = 20
	var maxRadius = Math.min(width / 2, height / 2)

	fill(255, 255, 255)
	ellipse(width / 2 - position, height / 2, 50)
	}

	function onListPorts (ports) {
	console.log('ports:', ports)
	serial.on('data', onSerialData)
	serial.on('open', function (port) {
	console.log('port open:', port)
	})

	serial.open(ports[1])
	}

	function onSerialData () {
	var value = serial.readStringUntil('\n')
	if (!value) return

	position += parseFloat(value)
	if (position < -width / 2) position = -width / 2
	if (position > +width / 2) position = +width / 2
	}