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

add convertor

parent ae52d9ac
No related branches found
No related tags found
No related merge requests found
Pipeline #301822 passed
docs/Instruction/images/processing/Processing_to_P5.js_Converter .png

277 KiB

...@@ -229,3 +229,66 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html) ...@@ -229,3 +229,66 @@ Ref.[Storing Input](https://processing.org/examples/storinginput.html)
<video width="400" controls> <video width="400" controls>
<source src="../../images/processing/app.mp4" type="video/mp4"> <source src="../../images/processing/app.mp4" type="video/mp4">
</video> </video>
## 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() {
}
```
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