Skip to content
Snippets Groups Projects
Commit 777ed3de authored by yuichitamiya's avatar yuichitamiya
Browse files

add week interface and tips p5.js

parent 1c8a9e83
No related branches found
No related tags found
No related merge requests found
Pipeline #301524 passed
Showing
with 360 additions and 0 deletions
docs/Instruction/images/p5_js/p5_js_added.png

265 KiB

docs/Instruction/images/p5_js/p5_js_serial_listed.png

245 KiB

docs/Instruction/images/p5_js/p5_js_sketch_js.png

225 KiB

docs/Instruction/images/p5_js/p5_js_web_editor.png

232 KiB

docs/Instruction/images/p5_js/p5_js_zip.png

255 KiB

docs/Instruction/images/p5_js/p5_serialcontrol_app.png

348 KiB

docs/Instruction/images/p5_js/socket-serial-connection-2-1280x360.png

265 KiB

File added
docs/Instruction/images/processing/processing_app_made.png

298 KiB

docs/Instruction/images/processing/processing_export_app.png

507 KiB

docs/Instruction/images/processing/processing_export_options.png

588 KiB

# p5.js and Arduino
Ref. [Lab: Serial Input to P5.js](https://itp.nyu.edu/physcomp/labs/labs-serial-communication/lab-serial-input-to-the-p5-js-ide/#The_P5js_Serialport_Library)
## p5.js and Arduino
> When you use the p5.serialport library for P5.js, it communicates with a webSocket server in the P5.js IDE to give you access to serial devices attached to your computer. This lab shows you how to use P5 to control a microcontroller using asynchronous serial communication.
![](../images/p5_js/socket-serial-connection-2-1280x360.png)
## Install the P5.serialcontrol App
Download [P5.serialcontrol](https://github.com/p5-serial/p5.serialcontrol/releases)
![](../images/p5_js/p5_serialcontrol_app.png)
### Arduino sketch
```
void setup() {
Serial.begin(9600); // initialize serial communications
}
void loop() {
if (Serial.available() > 0) { // if there's serial data available
int inByte = Serial.read(); // read it
Serial.write(inByte); // send it back out as raw binary data
analogWrite(13, inByte); // use it to set the LED brightness
}
}
```
!!! note
Check the serial port in ArduinoIDE.
## Open p5.js Web Editor in browser
[p5.js Web Editor](https://editor.p5js.org/)
![](../images/p5_js/p5_js_web_editor.png)
Find this line
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
```
Then Add this in the next line
```
<script language="javascript" type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5.serialserver@0.0.28/lib/p5.serialport.js"></script>
```
![](../images/p5_js/p5_js_added.png)
Open ```Sketch.js``` and replace into this.
![](../images/p5_js/p5_js_sketch_js.png)
```
let serial; // variable to hold an instance of the serialport library
function setup() {
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on('list', printList); // set a callback function for the serialport list event
serial.list(); // list the serial ports
}
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (var i = 0; i < portList.length; i++) {
// Display the list the console:
console.log(i + portList[i]);
}
}
```
Press "Run" in p5.js Web editor then serial port is listed.
![](../images/p5_js/p5_js_serial_listed.png)
!!! Attention
this page is not finished
# Processing and Arduino with Serial communication
## Example_1
Arduino
```
void setup(){
Serial.begin(9600);
}
void loop(){
Serial.write(100);// 1 byte = 0-255
delay(1000);
Serial.write(200);// 256 goes to 0
delay(1000);
}
```
Processing
```
import processing.serial.*;
Serial myPort;
int x;
void setup(){
size(256, 256);// canvas size
myPort = new Serial(this, "/dev/tty.usbmodem1411", 9600); //port
}
void draw(){
background(255);
ellipse(x,100,50,50); //(center_x,center_y,width,height)
}
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
```
## Example_2
Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
<hr />
=== "Distance 2D"
```
/**
* Distance 2D.
*
* Move the mouse across the image to obscure and reveal the matrix.
* Measures the distance from the mouse to each square and sets the
* size proportionally.
*/
float max_distance;
void setup() {
size(640, 360);
noStroke();
max_distance = dist(0, 0, width, height);
}
void draw() {
background(0);
for(int i = 0; i <= width; i += 20) {
for(int j = 0; j <= height; j += 20) {
float size = dist(mouseX, mouseY, i, j);
size = size/max_distance * 66;
ellipse(i, j, size, size);
}
}
}
```
=== "Distance 2D + Arduino serial"
```
////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
////////////////////////////added
float max_distance;
void setup() {
size(640, 360);
noStroke();
max_distance = dist(0, 0, width, height);
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add
}
void draw() {
background(0);
for(int i = 0; i <= width; i += 20) {
for(int j = 0; j <= height; j += 20) {
float size = dist(x, mouseY, i, j);//////// changed mouseX to X
size = size/max_distance * 66;
ellipse(i, j, size, size);
}
}
}
////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
////////////////////////////added
```
## Example_3
Ref.[Storing Input](https://processing.org/examples/storinginput.html)
<hr />
=== "Storing Input"
```
/**
* Storing Input.
*
* Move the mouse across the screen to change the position
* of the circles. The positions of the mouse are recorded
* into an array and played back every frame. Between each
* frame, the newest value are added to the end of each array
* and the oldest value is deleted.
*/
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
size(640, 360);
noStroke();
fill(255, 153);
}
void draw() {
background(51);
// Cycle through the array, using a different entry on each frame.
// Using modulo (%) like this is faster than moving all the values over.
int which = frameCount % num;
mx[which] = mouseX;
my[which] = mouseY;
for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
int index = (which+1 + i) % num;
ellipse(mx[index], my[index], i, i);
}
}
```
=== "Storing Input + Arduino serial"
```
/**
* Storing Input.
*
* Move the mouse across the screen to change the position
* of the circles. The positions of the mouse are recorded
* into an array and played back every frame. Between each
* frame, the newest value are added to the end of each array
* and the oldest value is deleted.
*/
////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
////////////////////////////added
int num = 60;
float mx[] = new float[num];
float my[] = new float[num];
void setup() {
size(640, 360);
noStroke();
fill(255, 153);
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add
}
void draw() {
background(51);
// Cycle through the array, using a different entry on each frame.
// Using modulo (%) like this is faster than moving all the values over.
int which = frameCount % num;
mx[which] = x;//mouseX;////// changed mouseX to X
my[which] = mouseY;
for (int i = 0; i < num; i++) {
// which+1 is the smallest (the oldest in the array)
int index = (which+1 + i) % num;
ellipse(mx[index], my[index], i, i);
}
}
////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
////////////////////////////added
```
## Export as Applications
![](../images/processing/processing_export_app.png)
![](../images/processing/processing_export_options.png)
![](../images/processing/processing_app_made.png)
<video width="400" controls>
<source src="../../images/processing/app.mp4" type="video/mp4">
</video>
......@@ -6,6 +6,7 @@
- [Markdown in-page links](./tips/markdown_In-page_links.md)
- [Fullscreen background image](./tips/fullscreen_image_text_up.md)
- [embed video](./tips/embed_videos.md)
- [tab in markdown](./tips/tab_in_markdown.md)
## git
- [How to recover after rejected large files commit](http://academany.fabcloud.io/fabacademy/2021/labs/kannai/site/instruction/tips/git_manage_large_commit/)
......@@ -65,6 +66,10 @@
- [ESP32-CAM to switch bot](./tips/esp32-switch.md)
- [Find I2C OLED Address and Display original image](./tips/i2c_oled_address.md)
## Interface and application programming
- [Blynk IOT](./tips/blynk.md)
- [Processing 4 and Arduino](./tips/processing.md)
## Machine Building
- [Machine Building Parts List](./tips/machine_building_parts_list.md)
- [DRV8846_Stepperboard](./tips/DRV8846_Stepperboard.md)
......
......@@ -21,3 +21,44 @@
## Group Assignment
> compare as many tool options as possible
### Todo
- [last year](http://academany.fabcloud.io/fabacademy/2021/labs/kannai/site/group_assignments/week14/)
- Blynk
- https://blynk.io/
- Tips [Blynk IOT](./tips/blynk.md)
## Individual assignment
> write an application that interfaces a user with an
input &/or output device that you made
### User -> GUI -> input device
### output -> visualization -> User
### Todo
### Processing
- [site](https://processing.org/)
- Ref. [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/)
- Arduino -> serial -> PC -> Processing -> App
- Tips: [Processing and Arduino with Serial communication](./tips/processing.md)
### p5.js
- [site](https://p5js.org/)
- Arduino -> serial -> p5.serialcontroll app -> p5.js Web Editor
- Tips: [p5.js and Arduino])(./tips/p5_js.md)
### Assessment
[Assessment](https://fabacademy.org/2022/nueval/interface_and_application_programming.html)
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment