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
Hide whitespace changes
Inline Side-by-side
docs/Instruction/tips/processing.md → docs/Instruction/tips/processing_arduino.md
+ 249
− 0
View file @ f44c611e
# 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
......@@ -40,7 +49,7 @@ void serialEvent(Serial p){
println(x);
}
```
## Example_2
## Example_1
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"
```
////////////////////////////add
////////////////////////////////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
////////////////////////////added
//////////////////////////////////////////////////////added
float max_distance;
......@@ -93,7 +102,9 @@ Ref. [Distance 2D](https://processing.org/examples/distance2d.html)
noStroke();
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)
}
}
////////////////////////////add
////////////////////////////////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
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"
```
/**
......@@ -174,11 +185,11 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
* and the oldest value is deleted.
*/
////////////////////////////add
////////////////////////////////////////////////////////add
import processing.serial.*;
Serial myPort;
int x;
////////////////////////////added
//////////////////////////////////////////////////////added
int num = 60;
float mx[] = new float[num];
......@@ -189,7 +200,9 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
noStroke();
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)
////////////////////////////add
////////////////////////////////////////////////////////add
void serialEvent(Serial p){
x = p.read(); // read value from serial
println(x);
}
////////////////////////////added
//////////////////////////////////////////////////////added
```
## Export as Applications
......@@ -233,197 +246,4 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
## 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() {
}
```
## 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)
moved to [this tip](./processing_to_p5_js.md)
docs/Instruction/tips/processing_to_p5_js.md 0 → 100644
+ 205
− 0
View file @ f44c611e
## 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>
```
docs/Instruction/tips_list.md
+ 2
− 1
View file @ f44c611e
......@@ -68,7 +68,8 @@
## Interface and application programming
- [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 Parts List](./tips/machine_building_parts_list.md)
......
docs/Instruction/week14.md
+ 2
− 1
View file @ f44c611e
......@@ -44,7 +44,8 @@
- 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)
- 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
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment