Difference between revisions of "P5*js"

From Digipool-Wiki
Jump to: navigation, search
(Libraries)
(Libraries)
(12 intermediate revisions by 2 users not shown)
Line 27: Line 27:
 
* '''Textbox''' — Dom multi line Text input box - [[p5js-Dom-Textarea]]
 
* '''Textbox''' — Dom multi line Text input box - [[p5js-Dom-Textarea]]
 
* '''P5.GUI''' — Interfaces mit der [[p5.gui Librarie]]
 
* '''P5.GUI''' — Interfaces mit der [[p5.gui Librarie]]
* [[FaceTracking with clmtrackr and P5JS]]
 
* '''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]]
 
* '''OpenType.js''' — Fonts in Vektoren zerlegen — [[p5js and opentype.js]]
 
+
* '''FaceTracking''' — Erkennung von Augen, Mund und Nase — [[FaceTracking with clmtrackr and P5JS]]
<br>
+
* '''midi.js''' — Verwende MIDI zur Steuerung eines p5js-Sketches — [[p5js-any-midi-input]]
 
+
== 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 = '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>
Line 100: Line 58:
  
 
* [https://sites.google.com/view/creative-coding-for-kids/ creative-coding-for-kids]
 
* [https://sites.google.com/view/creative-coding-for-kids/ creative-coding-for-kids]
 +
 +
<br>
 +
 +
== P5JS + Data-Exchange or Database ==
 +
 +
* [[Arduino-Pubnub-P5JS]]
 +
* [[P5JS-Google-Firebase-Realtime-Database]]
 +
 +
<br>
 +
 +
== Veraltet ==
 +
 +
[[P5JS und Blynk]]
  
 
<br>
 
<br>

Revision as of 18:35, 11 June 2024

P5*js-logo.png

Setup


Code


Libraries


Publish WebApp


Publish App (Google Play Store)


Andere p5js Plattformen


Andere Tuturials


P5JS + Data-Exchange or Database


Veraltet

P5JS und Blynk