changed 2 years ago  
Linked with GitHub

P5.js

Bouncing Ball

Learn the basics of P5.js, the workflow and how it works. We are going to draw simple shapes and move them in the space.

Interacting with the user

Let's interact! Manage different interactions between the user and P5.js

Reading an Input

Now we can connect it with the real world!

Let's build this simple circuit to read the value of an analog input like an LDR

Use this Arduino Code:












void setup() {
  // initialize digital pin LED_BUILTIN as an output.
  Serial.begin(9600);
  pinMode(A0, INPUT);
}

// the loop function runs over and over again forever
void loop() {
  Serial.println(analogRead(A0));
  delay(500);
}

We can use WebSerial API SUpported by Google Chrome and Microsoft Edge. This repo it's a nice implementation with p5js. You need to add the following link in the html page:

<script src="https://unpkg.com/@gohai/p5.webserial@^1/libraries/p5.webserial.js"></script>

OLD
For using the Serial port with p5 we will need to allow this comunication, to do it we can use a p5serial app developed by p5.js to enable it. Check this repository and download the p5serial app.

In p5.js we will need to add a library with the following line in the index.html:

<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>

Processing code for LDR Reading





























import processing.serial.*;
String lecture = "0";
int val = 0;

Serial myPort;

void setup() {
  size(1600, 900);
  myPort = new Serial(this, "COM17", 9600);
}

void draw() {
  if (myPort.available() > 0) {
    lecture = myPort.readStringUntil('\n');
    println(lecture);
    if (lecture != null) {
      lecture = trim(lecture);
      val = Integer.parseInt(lecture);
    }
  }
  background(20);
  fill(255, 204, 0);
  rect(100, 350, val, 200);
  fill(255);
  textSize(40);
  text(val, 100+(val/2), 470);
}
Select a repo