Processing to p5 js

Processing to P5.js Converter¶

Processing codeP5.js 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);
}

/**
 * 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
│   ├── sketch.js
│   └── style.css

p5_js.mdsketch.jsstyle.css

<!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>

/**
 * 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() {
}

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>

Last update: May 7, 2022