Difference between revisions of "P5*js"

From Digipool-Wiki
Jump to: navigation, search
(Code)
(p5js & Blynk)
(12 intermediate revisions by one other user not shown)
Line 14: Line 14:
 
* '''date''' — Kalender Datum mit Wochentagen setzen - [[p5js-calendar-weekday]]
 
* '''date''' — Kalender Datum mit Wochentagen setzen - [[p5js-calendar-weekday]]
 
* '''switch case''' — Konditionsabfrage mit mehreren Optionen — [[switch case]]
 
* '''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]]
  
 
<br>
 
<br>
Line 19: Line 24:
 
== Libraries ==
 
== Libraries ==
  
* Button mit der DOM Library - [[p5js-DOM-Button]]
+
* '''DOM Button''' — Designoptionen innerhalb der DOM Library - [[p5js-DOM-Button]]
* Interfaces mit der [[p5.gui Librarie]]
+
* '''Textbox''' — Dom multi line Text input box - [[p5js-Dom-Textarea]]
* [[FaceTracking with clmtrackr and P5JS]]
+
* '''P5.GUI''' — Interfaces mit der [[p5.gui Librarie]]
* P5js Example für Real-Time Datenaustausch mit Pubnub Server - [http://coursescript.com/notes/interactivecomputing/pubnub/ Pointillism with Pubnub]
+
* '''Pubnub Server''' — P5js Example für Real-Time Datenaustausch mit Server - [http://coursescript.com/notes/interactivecomputing/pubnub/ 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]]
 +
 
 +
<br>
 +
 
 +
== p5js & Blynk ==
 +
 
 +
Mit diesem Code können Daten, die vom Blink-Board gemessen werden, von einer p5js-App gelesen werden. <br>
 +
[https://docs.blynk.io/en/blynk.cloud/get-datastream-value LINK]
 +
 
 +
<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 = '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()
 +
}
 +
</pre>
  
 
<br>
 
<br>

Revision as of 20:25, 11 February 2022

P5*js-logo.png

Setup


Code


Libraries


p5js & Blynk

Mit diesem Code können Daten, die vom Blink-Board gemessen werden, von einer p5js-App gelesen werden.
LINK

// 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


Publish App (Google Play Store)


Andere p5js Plattformen


Andere Tuturials