Difference between revisions of "P5*js"
From Digipool-Wiki
(→Code) |
|||
Line 26: | Line 26: | ||
* [[FaceTracking with clmtrackr and P5JS]] | * [[FaceTracking with clmtrackr and P5JS]] | ||
* P5js Example für Real-Time Datenaustausch mit Pubnub Server - [http://coursescript.com/notes/interactivecomputing/pubnub/ Pointillism with Pubnub] | * P5js Example für Real-Time Datenaustausch mit Pubnub Server - [http://coursescript.com/notes/interactivecomputing/pubnub/ Pointillism with Pubnub] | ||
+ | |||
+ | <br> | ||
+ | |||
+ | == p5js & Blynk == | ||
+ | |||
+ | <pre> | ||
+ | // 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 = 'WUn-y8JmXLEUE6xR7r9gF75Q7A2T7-Al'; | ||
+ | var myPin = 'V8' | ||
+ | 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() | ||
+ | } | ||
+ | </pre> | ||
<br> | <br> |
Revision as of 21:33, 27 January 2021
Contents
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
Libraries
- Button mit der DOM Library - p5js-DOM-Button
- Dom multi line Text input box - p5js-Dom-Textarea
- Interfaces mit der p5.gui Librarie
- FaceTracking with clmtrackr and P5JS
- P5js Example für Real-Time Datenaustausch mit Pubnub Server - Pointillism with Pubnub
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 = 'WUn-y8JmXLEUE6xR7r9gF75Q7A2T7-Al'; var myPin = 'V8' 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
Andere Tuturials