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

add tips processing to p5js converter

parent b668cb15
No related branches found
No related tags found
No related merge requests found
Pipeline #301871 passed
# Processing and Arduino with Serial communication # Processing 4 and Arduino with Serial communication
## Example_1 ## Processing 4
[download](https://processing.org/download)
!!! attention
Use **MacOS(Intel 64-bit)** even your mac is Apple Silicon.
JAVA error will happen if you use MacOS(Apple Silicon)
## Basic codes
Arduino Arduino
...@@ -40,7 +49,7 @@ void serialEvent(Serial p){ ...@@ -40,7 +49,7 @@ void serialEvent(Serial p){
println(x); println(x);
} }
``` ```
## Example_2 ## Example_1
Ref. [Distance 2D](https://processing.org/examples/distance2d.html) Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
...@@ -80,11 +89,11 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -80,11 +89,11 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
=== "Distance 2D + Arduino serial" === "Distance 2D + Arduino serial"
``` ```
////////////////////////////add ////////////////////////////////////////////////////////add
import processing.serial.*; import processing.serial.*;
Serial myPort; Serial myPort;
int x; int x;
////////////////////////////added //////////////////////////////////////////////////////added
float max_distance; float max_distance;
...@@ -93,7 +102,9 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -93,7 +102,9 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
noStroke(); noStroke();
max_distance = dist(0, 0, width, height); max_distance = dist(0, 0, width, height);
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add ////////////////////////////////////////////////////////add
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
//////////////////////////////////////////////////////added
} }
...@@ -109,19 +120,19 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html) ...@@ -109,19 +120,19 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
} }
} }
////////////////////////////add ////////////////////////////////////////////////////////add
void serialEvent(Serial p){ void serialEvent(Serial p){
x = p.read(); // read value from serial x = p.read(); // read value from serial
println(x); println(x);
} }
////////////////////////////added //////////////////////////////////////////////////////added
``` ```
## Example_3 ## Example_2
Ref.[Storing Input](https://processing.org/examples/storinginput.html) Ref. [Storing Input](https://processing.org/examples/storinginput.html)
<hr /> <hr />
=== "Storing Input" === "Storing Input"
``` ```
/** /**
...@@ -174,11 +185,11 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -174,11 +185,11 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
* and the oldest value is deleted. * and the oldest value is deleted.
*/ */
////////////////////////////add ////////////////////////////////////////////////////////add
import processing.serial.*; import processing.serial.*;
Serial myPort; Serial myPort;
int x; int x;
////////////////////////////added //////////////////////////////////////////////////////added
int num = 60; int num = 60;
float mx[] = new float[num]; float mx[] = new float[num];
...@@ -189,7 +200,9 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -189,7 +200,9 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
noStroke(); noStroke();
fill(255, 153); fill(255, 153);
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port////add ////////////////////////////////////////////////////////add
myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
//////////////////////////////////////////////////////added
} }
...@@ -211,12 +224,12 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -211,12 +224,12 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
////////////////////////////add ////////////////////////////////////////////////////////add
void serialEvent(Serial p){ void serialEvent(Serial p){
x = p.read(); // read value from serial x = p.read(); // read value from serial
println(x); println(x);
} }
////////////////////////////added //////////////////////////////////////////////////////added
``` ```
## Export as Applications ## Export as Applications
...@@ -233,197 +246,4 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -233,197 +246,4 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
## Processing to P5.js Converter ## Processing to P5.js Converter
moved to [this tip](./processing_to_p5_js.md)
[Processing to P5.js Converter](https://pde2js.herokuapp.com/)
![](../images/processing/Processing_to_P5.js_Converter .png)
<hr />
=== "Processing code"
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
void setup() {
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw() {
background(51);
fill(255, 204);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 204);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}
```
=== "P5.js code "
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
```
## embed p5.js
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />
<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
</script>
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />
<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
</script>
```
## Open in other page
```
├── p5_js
│ ├── p5_js.md
│ ├── sketch.js
│ └── style.css
```
<hr />
=== "p5_js.md"
```
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="../sketch.js"></script>
</body>
</html>
```
=== "sketch.js"
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
```
=== "style.css"
```
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
```
Open in other page: [p5_js.md](./p5_js/p5_js.md)
## Processing to P5.js Converter
[Processing to P5.js Converter](https://pde2js.herokuapp.com/)
![](../images/processing/Processing_to_P5.js_Converter .png)
<hr />
=== "Processing code"
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
void setup() {
size(640, 360);
noStroke();
rectMode(CENTER);
}
void draw() {
background(51);
fill(255, 204);
rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
fill(255, 204);
int inverseX = width-mouseX;
int inverseY = height-mouseY;
rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}
```
=== "P5.js code "
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
```
## Open in new markdown page
link to : [p5_js.md](./p5_js/p5_js.md){target=_blank}
```
├── p5_js
│ ├── p5_js.md
│ ├── sketch.js
│ └── style.css
```
<hr />
=== "p5_js.md"
```
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="../style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="../sketch.js"></script>
</body>
</html>
```
=== "sketch.js"
```
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
```
=== "style.css"
```
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
```
!!! attention
Extra "../" at the beginning of paths are required in p5_js.md
```
<link rel="stylesheet" type="text/css" href="../style.css">
<script src="../sketch.js"></script>
```
## Embed p5.js in mkdocs
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />
<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
</script>
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />
<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
initializeFields();
createCanvas(640, 360);
noStroke();
rectMode(CENTER);
}
function draw() {
background(51);
fill(255, 204);
rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
fill(255, 204);
var inverseX = width - mouseX;
var inverseY = height - mouseY;
rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}
function initializeFields() {
}
</script>
```
...@@ -68,7 +68,8 @@ ...@@ -68,7 +68,8 @@
## Interface and application programming ## Interface and application programming
- [Blynk IOT](./tips/blynk.md) - [Blynk IOT](./tips/blynk.md)
- [Processing 4 and Arduino](./tips/processing.md) - [Processing 4 and Arduino](./tips/processing_arduino.md)
- [Processing 4 to P5.js Converter](./tips/processing_to_p5_js.md)
## Machine Building ## Machine Building
- [Machine Building Parts List](./tips/machine_building_parts_list.md) - [Machine Building Parts List](./tips/machine_building_parts_list.md)
......
...@@ -44,7 +44,8 @@ ...@@ -44,7 +44,8 @@
- Ref. [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/) - Ref. [Cell Cycle](https://n-e-r-v-o-u-s.com/cellCycle/)
- Arduino -> serial -> PC -> Processing -> App - Arduino -> serial -> PC -> Processing -> App
- Tips: [Processing and Arduino with Serial communication](./tips/processing.md) - Tips: [Processing and Arduino with Serial communication](./tips/processing_arduino.md)
- Tips: [Processing to P5.js Converter](./tips/processing_to_p5_js.md)
### p5.js ### p5.js
......
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