P5*js

Setup

• Online-Editor: https://editor.p5js.org/
• P5*JS Setup mit dem Texteditor: "Sublime Text" auf der lokalen Festplatte mit Safarie - P5*JS Sublime Setup

Code

• DIY Button — Einfaches Button Interfaces mit der einer eigenen Funktion — p5Button
• DIY Questionnaire — Einfaches Questionnaire Interfaces mit der einer eigenen Funktion — qFunction
• date — Kalender Datum mit Wochentagen setzen - p5js-calendar-weekday
• switch case — Konditionsabfrage mit mehreren Optionen — switch case
• Go to Webpage — Öffne einen Link zu einer anderen Seite mit — p5js open URL
• Get URL Parameters — Daten via URL Anhang übertargen — p5js URL Parameters
• Copy to Clipboard - Kopiere den Inhalt einer Variable als String in die Zwischenablage — p5js Copy Text to Clipboard
• Get Battery Level — Lese den aktuellen Batteriestatus aus — p5js get Battery Level
• Vibrations — Funktioniert nur mit Handys — p5js trigger Phone Vibrations

Libraries

• DOM Button — Designoptionen innerhalb der DOM Library - p5js-DOM-Button
• Textbox — Dom multi line Text input box - p5js-Dom-Textarea
• P5.GUI — Interfaces mit der p5.gui Librarie
• Pubnub Server — P5js Example für Real-Time Datenaustausch mit Server - Pointillism with Pubnub
• OpenType.js — Fonts in Vektoren zerlegen — p5js and opentype.js
• FaceTracking — Erkennung von Augen, Mund und Nase — FaceTracking with clmtrackr and P5JS

p5js & Blynk

// Get pin value from Blynk-Board with p5js
// Read Sensor Data via Internet from a Blynk Borad in p5*js
// !Dosen't work in the p5js-Online-Editor!


var myTorken = 'YourBlynkToken';
var myPin = 'D8' // can any digital, analog or virtual pin (A0, V1 ...)

var myURL;
var i = 0; // inputValue
var r; // rect size

function getValues(){
  myURL = 'http://blynk-cloud.com/' + myTorken + '/get/' + myPin;
  httpGet(myURL, 'text', false, function(response){
    i = response.replace(/[^a-zA-Z0-9]/g, '');
  });
}

function setup() {
  createCanvas(200, 200);
  getValues()
}

function draw() {
  background(220);
  text('klick to update', 20, 150);
  text(i, 20, 20);
  r = map(i, 0, 1024, 1, 160);
  rect(20, 50, r, 20);
}

function mousePressed(){
  getValues()
}

Publish WebApp

• Make your P5JS sketches look like an app on mobile devices
• Add a App-Icon to a p5js sketch - p5js-App-Icon
• Desktop and mobile a simple compromise solution — p5js-desktop-and-mobile

Publish App (Google Play Store)

• Wandele deine WebApp mit Android-Studio zu einer App um - Build App with Android-Studio
• Wandele deine WebApp mit PhoneGap zu einer App um - Build App with PhoneGap

Andere p5js Plattformen

• OpenProcessing.org
• p5Stamper

Andere Tuturials

• creative-coding-for-kids