-
- A spirograph is created by interlocking black circle outlines rotating around
- each other on a grey background. When the user clicks the space bar, the
- background turns white and paths of circles of various sizes in an indigo
- color are visible
-description: >-
- This sketch uses simple transformations to create a
-
- Spirograph-like effect with interlocking circles (called sines).
-
- Press the spacebar to switch between tracing and showing the underlying
- geometry.
-
- Example created by R. Luke
- DuBois.
-
- http://en.wikipedia.org/wiki/Spirograph
----
-
-
-# Example
diff --git a/src/content/examples/en/09_Simulate/07_LSystems.mdx b/src/content/examples/en/09_Simulate/07_LSystems.mdx
deleted file mode 100644
index f65aa4233a..0000000000
--- a/src/content/examples/en/09_Simulate/07_LSystems.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
- // TURTLE STUFF:
- let x, y; // the current position of the turtle
- let currentangle = 0; // which way the turtle is pointing
- let step = 20; // how much the turtle moves with each 'F'
- let angle = 90; // how much the turtle turns with a '-' or '+'
-
- // LINDENMAYER STUFF (L-SYSTEMS)
- let thestring = 'A'; // "axiom" or start of the string
- let numloops = 5; // how many iterations to pre-compute
- let therules = []; // array for rules
- therules[0] = ['A', '-BF+AFA+FB-']; // first rule
- therules[1] = ['B', '+AF-BFB-FA+']; // second rule
-
- let whereinstring = 0; // where in the L-system are we?
-
- function setup() {
- createCanvas(710, 400);
- background(255);
- stroke(0, 0, 0, 255);
-
- // start the x and y position at lower-left corner
- x = 0;
- y = height-1;
-
- // COMPUTE THE L-SYSTEM
- for (let i = 0; i < numloops; i++) {
- thestring = lindenmayer(thestring);
- }
- }
-
- function draw() {
-
- // draw the current character in the string:
- drawIt(thestring[whereinstring]);
-
- // increment the point for where we're reading the string.
- // wrap around at the end.
- whereinstring++;
- if (whereinstring > thestring.length-1) whereinstring = 0;
-
- }
-
- // interpret an L-system
- function lindenmayer(s) {
- let outputstring = ''; // start a blank output string
-
- // iterate through 'therules' looking for symbol matches:
- for (let i = 0; i < s.length; i++) {
- let ismatch = 0; // by default, no match
- for (let j = 0; j < therules.length; j++) {
- if (s[i] == therules[j][0]) {
- outputstring += therules[j][1]; // write substitution
- ismatch = 1; // we have a match, so don't copy over symbol
- break; // get outta this for() loop
- }
- }
- // if nothing matches, just copy the symbol over.
- if (ismatch == 0) outputstring+= s[i];
- }
-
- return outputstring; // send out the modified string
- }
-
- // this is a custom function that draws turtle commands
- function drawIt(k) {
-
- if (k=='F') { // draw forward
- // polar to cartesian based on step and currentangle:
- let x1 = x + step*cos(radians(currentangle));
- let y1 = y + step*sin(radians(currentangle));
- line(x, y, x1, y1); // connect the old and the new
-
- // update the turtle's position:
- x = x1;
- y = y1;
- } else if (k == '+') {
- currentangle += angle; // turn left
- } else if (k == '-') {
- currentangle -= angle; // turn right
- }
-
- // give me some random color values:
- let r = random(128, 255);
- let g = random(0, 192);
- let b = random(0, 50);
- let a = random(50, 100);
-
- // pick a gaussian (D&D) distribution for the radius:
- let radius = 0;
- radius += random(0, 15);
- radius += random(0, 15);
- radius += random(0, 15);
- radius = radius / 3;
-
- // draw the stuff:
- fill(r, g, b, a);
- ellipse(x, y, radius, radius);
- }
-title: L-Systems
-arialabel: >-
- Circles of various colors and patterns connected to each other by
- perpendicular black lines are drawn on the screen to form a grid formation
-description: >-
- This sketch creates an automated drawing based on a Lindenmayer
-
- or (L-) system. L-systems are often used in procedural graphics to make
-
- natural, geometric, or interesting "fractal-style" patterns.
-
- Example created by R. Luke
- DuBois.
-
- https://en.wikipedia.org/wiki/L-system
----
-
-
-# Example
diff --git a/src/content/examples/en/09_Simulate/08_Spring.js b/src/content/examples/en/09_Simulate/08_Spring/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/08_Spring.js
rename to src/content/examples/en/09_Simulate/08_Spring/code.js
diff --git a/src/content/examples/en/09_Simulate/08_Spring.mdx b/src/content/examples/en/09_Simulate/08_Spring/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/08_Spring.mdx
rename to src/content/examples/en/09_Simulate/08_Spring/description.mdx
diff --git a/src/content/examples/en/09_Simulate/09_Springs.mdx b/src/content/examples/en/09_Simulate/09_Springs.mdx
deleted file mode 100644
index 9d5067ab0f..0000000000
--- a/src/content/examples/en/09_Simulate/09_Springs.mdx
+++ /dev/null
@@ -1,161 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
- let num = 3;
- let springs = [];
-
- function setup() {
- createCanvas(710, 400);
- noStroke();
-
- springs[0] = new Spring(240, 260, 40, 0.98, 8.0, 0.1, springs, 0);
- springs[1] = new Spring(320, 210, 120, 0.95, 9.0, 0.1, springs, 1);
- springs[2] = new Spring(180, 170, 200, 0.90, 9.9, 0.1, springs, 2);
- }
-
- function draw() {
- background(51);
-
- for (let i = 0; i < num; i++) {
- springs[i].update();
- springs[i].display();
- }
- }
-
- function mousePressed() {
- for (let i = 0; i < num; i++) {
- springs[i].pressed();
- }
- }
-
- function mouseReleased() {
- for (let i = 0; i < num; i++) {
- springs[i].released();
- }
- }
-
- // Spring class
- function Spring (_x, _y, _s, _d, _m, _k_in, _others, _id) {
- // Screen values
- // this.xpos = _x;
- // this.ypos = _y;
-
- this.x_pos = _x;
- this.y_pos= _y;
-
- this.size = 20;
- this.size = _s;
-
- this.over = false;
- this.move = false;
-
- // Spring simulation constants
- this.mass = _m; // Mass
- this.k = 0.2; // Spring constant
- this.k = _k_in;
- this.damp = _d; // Damping
- this.rest_posx = _x; // Rest position X
- this.rest_posy = _y; // Rest position Y
-
- // Spring simulation variables
- //float pos = 20.0; // Position
- this.velx = 0.0; // X Velocity
- this.vely = 0.0; // Y Velocity
- this.accel = 0; // Acceleration
- this.force = 0; // Force
-
- this.friends = _others;
- this.id = _id;
-
- this.update = function() {
-
- if (this.move) {
- this.rest_posy = mouseY;
- this.rest_posx = mouseX;
- }
-
- this.force = -this.k * (this.y_pos - this.rest_posy); // f=-ky
- this.accel = this.force / this.mass; // Set the acceleration, f=ma == a=f/m
- this.vely = this.damp * (this.vely + this.accel); // Set the velocity
- this.y_pos = this.y_pos + this.vely; // Updated position
-
-
- this.force = -this.k * (this.x_pos - this.rest_posx); // f=-ky
- this.accel = this.force / this.mass; // Set the acceleration, f=ma == a=f/m
- this.velx = this.damp * (this.velx + this.accel); // Set the velocity
- this.x_pos = this.x_pos + this.velx; // Updated position
-
-
- if ((this.overEvent() || this.move) && !(this.otherOver()) ) {
- this.over = true;
- } else {
- this.over = false;
- }
- }
-
- // Test to see if mouse is over this spring
- this.overEvent = function() {
- let disX = this.x_pos - mouseX;
- let disY = this.y_pos - mouseY;
- let dis = createVector(disX, disY);
- if (dis.mag() < this.size / 2 ) {
- return true;
- } else {
- return false;
- }
- }
-
- // Make sure no other springs are active
- this.otherOver = function() {
- for (let i = 0; i < num; i++) {
- if (i != this.id) {
- if (this.friends[i].over == true) {
- return true;
- }
- }
- }
- return false;
- }
-
- this.display = function() {
- if (this.over) {
- fill(153);
- } else {
- fill(255);
- }
- ellipse(this.x_pos, this.y_pos, this.size, this.size);
- }
-
- this.pressed = function() {
- if (this.over) {
- this.move = true;
- } else {
- this.move = false;
- }
- }
-
- this.released = function() {
- this.move = false;
- this.rest_posx = this.y_pos;
- this.rest_posy = this.y_pos;
- }
- };
-title: Springs
-arialabel: >-
- Three white circles on a dark grey background. The user can drag each circle
- and the circle springs back and forth till finally settling in the original
- position
-description: >-
- Move the mouse over one of the circles and click to re-position.
-
- When you release the mouse, it will snap back into position.
-
- Each circle has a slightly different behavior.
-
-
This example is ported from the Processing website
----
-
-
-# Example
diff --git a/src/content/examples/en/09_Simulate/10_SoftBody.mdx b/src/content/examples/en/09_Simulate/10_SoftBody.mdx
deleted file mode 100644
index 0690f480b0..0000000000
--- a/src/content/examples/en/09_Simulate/10_SoftBody.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- // center point
- let centerX = 0.0, centerY = 0.0;
-
- let radius = 45, rotAngle = -90;
- let accelX = 0.0, accelY = 0.0;
- let deltaX = 0.0, deltaY = 0.0;
- let springing = 0.0009, damping = 0.98;
-
- //corner nodes
- let nodes = 5;
-
- //zero fill arrays
- let nodeStartX = [];
- let nodeStartY = [];
- let nodeX = [];
- let nodeY = [];
- let angle = [];
- let frequency = [];
-
- // soft-body dynamics
- let organicConstant = 1.0;
-
- function setup() {
- createCanvas(710, 400);
-
- //center shape in window
- centerX = width / 2;
- centerY = height / 2;
-
- //initialize arrays to 0
- for (let i = 0; i < nodes; i++){
- nodeStartX[i] = 0;
- nodeStartY[i] = 0;
- nodeY[i] = 0;
- nodeY[i] = 0;
- angle[i] = 0;
- }
-
- // iniitalize frequencies for corner nodes
- for (let i = 0; i < nodes; i++){
- frequency[i] = random(5, 12);
- }
-
- noStroke();
- frameRate(30);
- }
-
- function draw() {
- //fade background
- fill(0, 100);
- rect(0, 0, width, height);
- drawShape();
- moveShape();
- }
-
- function drawShape() {
- // calculate node starting locations
- for (let i = 0; i < nodes; i++){
- nodeStartX[i] = centerX + cos(radians(rotAngle)) * radius;
- nodeStartY[i] = centerY + sin(radians(rotAngle)) * radius;
- rotAngle += 360.0 / nodes;
- }
-
- // draw polygon
- curveTightness(organicConstant);
- fill(255);
- beginShape();
- for (let i = 0; i < nodes; i++){
- curveVertex(nodeX[i], nodeY[i]);
- }
- for (let i = 0; i < nodes-1; i++){
- curveVertex(nodeX[i], nodeY[i]);
- }
- endShape(CLOSE);
- }
-
- function moveShape() {
- //move center point
- deltaX = mouseX - centerX;
- deltaY = mouseY - centerY;
-
- // create springing effect
- deltaX *= springing;
- deltaY *= springing;
- accelX += deltaX;
- accelY += deltaY;
-
- // move predator's center
- centerX += accelX;
- centerY += accelY;
-
- // slow down springing
- accelX *= damping;
- accelY *= damping;
-
- // change curve tightness
- organicConstant = 1 - ((abs(accelX) + abs(accelY)) * 0.1);
-
- //move nodes
- for (let i = 0; i < nodes; i++){
- nodeX[i] = nodeStartX[i] + sin(radians(angle[i])) * (accelX * 2);
- nodeY[i] = nodeStartY[i] + sin(radians(angle[i])) * (accelY * 2);
- angle[i] += frequency[i];
- }
- }
-title: Soft Body
-arialabel: >-
- White pentagon on a black screen that morphs into a blob as it follows the
- user’s mouse
-description: |-
- Original example by Ira Greenberg.
-
Softbody dynamics simulation using curveVertex() and curveTightness().
----
-
-
-# Example
diff --git a/src/content/examples/en/09_Simulate/11_SmokeParticleSystem.js b/src/content/examples/en/09_Simulate/11_SmokeParticleSystem/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/11_SmokeParticleSystem.js
rename to src/content/examples/en/09_Simulate/11_SmokeParticleSystem/code.js
diff --git a/src/content/examples/en/09_Simulate/11_SmokeParticleSystem.mdx b/src/content/examples/en/09_Simulate/11_SmokeParticleSystem/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/11_SmokeParticleSystem.mdx
rename to src/content/examples/en/09_Simulate/11_SmokeParticleSystem/description.mdx
diff --git a/src/content/examples/en/09_Simulate/12_BrownianMotion.js b/src/content/examples/en/09_Simulate/12_BrownianMotion/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/12_BrownianMotion.js
rename to src/content/examples/en/09_Simulate/12_BrownianMotion/code.js
diff --git a/src/content/examples/en/09_Simulate/12_BrownianMotion.mdx b/src/content/examples/en/09_Simulate/12_BrownianMotion/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/12_BrownianMotion.mdx
rename to src/content/examples/en/09_Simulate/12_BrownianMotion/description.mdx
diff --git a/src/content/examples/en/09_Simulate/13_Chain.mdx b/src/content/examples/en/09_Simulate/13_Chain.mdx
deleted file mode 100644
index 8a67c04a47..0000000000
--- a/src/content/examples/en/09_Simulate/13_Chain.mdx
+++ /dev/null
@@ -1,69 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
- let s1, s2;
- let gravity = 9.0;
- let mass = 2.0;
-
- function setup() {
- createCanvas(720, 400);
- fill(255, 126);
- // Inputs: x, y, mass, gravity
- s1 = new Spring2D(0.0, width / 2, mass, gravity);
- s2 = new Spring2D(0.0, width / 2, mass, gravity);
- }
-
- function draw() {
- background(0);
- s1.update(mouseX, mouseY);
- s1.display(mouseX, mouseY);
- s2.update(s1.x, s1.y);
- s2.display(s1.x, s1.y);
- }
-
- function Spring2D(xpos, ypos, m, g) {
- this.x = xpos;// The x- and y-coordinates
- this.y = ypos;
- this.vx = 0; // The x- and y-axis velocities
- this.vy = 0;
- this.mass = m;
- this.gravity = g;
- this.radius = 30;
- this.stiffness = 0.2;
- this.damping = 0.7;
-
- this.update = function(targetX, targetY) {
- let forceX = (targetX - this.x) * this.stiffness;
- let ax = forceX / this.mass;
- this.vx = this.damping * (this.vx + ax);
- this.x += this.vx;
- let forceY = (targetY - this.y) * this.stiffness;
- forceY += this.gravity;
- let ay = forceY / this.mass;
- this.vy = this.damping * (this.vy + ay);
- this.y += this.vy;
- }
-
- this.display = function(nx, ny) {
- noStroke();
- ellipse(this.x, this.y, this.radius * 2, this.radius * 2);
- stroke(255);
- line(this.x, this.y, nx, ny);
- }
- }
-title: Chain
-arialabel: >-
- Two slightly opaque white circles connected by a white line. The user’s mouse
- moves the top of the string and the circles follow but are also affected by
- gravity.
-description: >-
- One mass is attached to the mouse position and the other is attached the
- position of the other mass. The gravity in the environment pulls down on both.
-
-
This example is ported from the Processing website
----
-
-
-# Example
diff --git a/src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem.js b/src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem.js
rename to src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem/code.js
diff --git a/src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem.mdx b/src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem.mdx
rename to src/content/examples/en/09_Simulate/14_SnowflakeParticleSystem/description.mdx
diff --git a/src/content/examples/en/09_Simulate/15_penrose_tiles.js b/src/content/examples/en/09_Simulate/15_penrose_tiles/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/15_penrose_tiles.js
rename to src/content/examples/en/09_Simulate/15_penrose_tiles/code.js
diff --git a/src/content/examples/en/09_Simulate/15_penrose_tiles.mdx b/src/content/examples/en/09_Simulate/15_penrose_tiles/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/15_penrose_tiles.mdx
rename to src/content/examples/en/09_Simulate/15_penrose_tiles/description.mdx
diff --git a/src/content/examples/en/09_Simulate/16_Recursive_Tree.js b/src/content/examples/en/09_Simulate/16_Recursive_Tree/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/16_Recursive_Tree.js
rename to src/content/examples/en/09_Simulate/16_Recursive_Tree/code.js
diff --git a/src/content/examples/en/09_Simulate/16_Recursive_Tree.mdx b/src/content/examples/en/09_Simulate/16_Recursive_Tree/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/16_Recursive_Tree.mdx
rename to src/content/examples/en/09_Simulate/16_Recursive_Tree/description.mdx
diff --git a/src/content/examples/en/09_Simulate/17_Mandelbrot.js b/src/content/examples/en/09_Simulate/17_Mandelbrot/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/17_Mandelbrot.js
rename to src/content/examples/en/09_Simulate/17_Mandelbrot/code.js
diff --git a/src/content/examples/en/09_Simulate/17_Mandelbrot.mdx b/src/content/examples/en/09_Simulate/17_Mandelbrot/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/17_Mandelbrot.mdx
rename to src/content/examples/en/09_Simulate/17_Mandelbrot/description.mdx
diff --git a/src/content/examples/en/09_Simulate/18_Koch.js b/src/content/examples/en/09_Simulate/18_Koch/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/18_Koch.js
rename to src/content/examples/en/09_Simulate/18_Koch/code.js
diff --git a/src/content/examples/en/09_Simulate/18_Koch.mdx b/src/content/examples/en/09_Simulate/18_Koch/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/18_Koch.mdx
rename to src/content/examples/en/09_Simulate/18_Koch/description.mdx
diff --git a/src/content/examples/en/09_Simulate/19_Bubblesort.js b/src/content/examples/en/09_Simulate/19_Bubblesort/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/19_Bubblesort.js
rename to src/content/examples/en/09_Simulate/19_Bubblesort/code.js
diff --git a/src/content/examples/en/09_Simulate/19_Bubblesort.mdx b/src/content/examples/en/09_Simulate/19_Bubblesort/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/19_Bubblesort.mdx
rename to src/content/examples/en/09_Simulate/19_Bubblesort/description.mdx
diff --git a/src/content/examples/en/09_Simulate/20_SteepingFeet.js b/src/content/examples/en/09_Simulate/20_SteepingFeet/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/20_SteepingFeet.js
rename to src/content/examples/en/09_Simulate/20_SteepingFeet/code.js
diff --git a/src/content/examples/en/09_Simulate/20_SteepingFeet.mdx b/src/content/examples/en/09_Simulate/20_SteepingFeet/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/20_SteepingFeet.mdx
rename to src/content/examples/en/09_Simulate/20_SteepingFeet/description.mdx
diff --git a/src/content/examples/en/09_Simulate/21_Particle.js b/src/content/examples/en/09_Simulate/21_Particle/code.js
similarity index 100%
rename from src/content/examples/en/09_Simulate/21_Particle.js
rename to src/content/examples/en/09_Simulate/21_Particle/code.js
diff --git a/src/content/examples/en/09_Simulate/21_Particle.mdx b/src/content/examples/en/09_Simulate/21_Particle/description.mdx
similarity index 100%
rename from src/content/examples/en/09_Simulate/21_Particle.mdx
rename to src/content/examples/en/09_Simulate/21_Particle/description.mdx
diff --git a/src/content/examples/en/09_Simulate/22_Quicksort.mdx b/src/content/examples/en/09_Simulate/22_Quicksort.mdx
deleted file mode 100644
index 5d9f56e76b..0000000000
--- a/src/content/examples/en/09_Simulate/22_Quicksort.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
-
- // width of each bar is taken as 8.
- let values = [];
- // The array 'states' helps in identifying the pivot index
- // at every step, and also the subarray which is being sorted
- // at any given time.
- let states = [];
-
- // The setup() function is called once when the program
- // starts. Here, we fill the array 'values' with random values
- // and the array 'states' with a value of -1 for each position.
- function setup() {
- createCanvas(710, 400);
- for(let i = 0; i < width/8; i++) {
- values.push(random(height));
- states.push(-1);
- }
- quickSort(0, values.length - 1);
- }
-
- // The statements in draw() function are executed continuously
- // until the program is stopped. Each statement is executed
- // sequentially and after the last line is read, the first
- // line is executed again.
- function draw() {
- background(140);
- for(let i = 0; i < values.length; i++) {
- // color coding
- if (states[i] == 0) {
- // color for the bar at the pivot index
- fill('#E0777D');
- } else if (states[i] == 1) {
- // color for the bars being sorted currently
- fill('#D6FFB7');
- } else {
- fill(255);
- }
- rect(i * 8, height - values[i], 8, values[i]);
- }
- }
-
- async function quickSort(start, end) {
- if (start > end) { // Nothing to sort!
- return;
- }
- // partition() returns the index of the pivot element.
- // Once partition() is executed, all elements to the
- // left of the pivot element are smaller than it and
- // all elements to its right are larger than it.
- let index = await partition(start, end);
- // restore original state
- states[index] = -1;
- await Promise.all(
- [quickSort(start, index - 1),
- quickSort(index + 1, end)
- ]);
- }
-
- // We have chosen the element at the last index as
- // the pivot element, but we could've made different
- // choices, e.g. take the first element as pivot.
- async function partition(start, end) {
- for (let i = start; i < end; i++) {
- // identify the elements being considered currently
- states[i] = 1;
- }
- // Quicksort algorithm
- let pivotIndex = start;
- // make pivot index distinct
- states[pivotIndex] = 0;
- let pivotElement = values[end];
- for (let i = start; i < end; i++) {
- if (values[i] < pivotElement) {
- await swap(i, pivotIndex);
- states[pivotIndex] = -1;
- pivotIndex++;
- states[pivotIndex] = 0;
- }
- }
- await swap(end, pivotIndex);
- for (let i = start; i < end; i++) {
- // restore original state
- if (i != pivotIndex) {
- states[i] = -1;
- }
- }
- return pivotIndex;
- }
-
- // swaps elements of 'values' at indices 'i' and 'j'
- async function swap(i, j) {
- // adjust the pace of the simulation by changing the
- // value
- await sleep(25);
- let temp = values[i];
- values[i] = values[j];
- values[j] = temp;
- }
-
- // custom helper function to deliberately slow down
- // the sorting process and make visualization easy
- function sleep(ms) {
- return new Promise(resolve => setTimeout(resolve, ms));
- }
-title: Quicksort
-arialabel: >-
- Bars of random heights are sorted from shortest to tallest left to right. The
- bars turn sage green and coral as they are sorted
-description: |-
- This is a simulation of the Quicksort
- sorting algorithm. We start with an array of bars
- and sort them according to their height in ascending
- order. References taken from a coding challenge by
- The Coding Train.
- Quicksort is a divide-and-conquer algorithm: it
- performs sorting by dividing the original array into
- smaller subarrays and solving them independently,
- loosely speaking. It involves picking an element of
- the array as the pivot element and partitioning the
- given array around the picked pivot.
- Partitioning refers to arranging the given array(or
- subarray) in such a way that all elements to the left
- of the pivot element are smaller than it and all
- elements to its right are larger than it. Thus, we have
- a reference point from where we proceed to sort the
- left and right 'halves' of the array, and eventually
- arrive at an array sorted in ascending order.
-
- More
----
-
-
-# Example
diff --git a/src/content/examples/en/10_Interaction/10_Tickle.js b/src/content/examples/en/10_Interaction/10_Tickle/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/10_Tickle.js
rename to src/content/examples/en/10_Interaction/10_Tickle/code.js
diff --git a/src/content/examples/en/10_Interaction/10_Tickle.mdx b/src/content/examples/en/10_Interaction/10_Tickle/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/10_Tickle.mdx
rename to src/content/examples/en/10_Interaction/10_Tickle/description.mdx
diff --git a/src/content/examples/en/10_Interaction/20_Follow1.js b/src/content/examples/en/10_Interaction/20_Follow1/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/20_Follow1.js
rename to src/content/examples/en/10_Interaction/20_Follow1/code.js
diff --git a/src/content/examples/en/10_Interaction/20_Follow1.mdx b/src/content/examples/en/10_Interaction/20_Follow1/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/20_Follow1.mdx
rename to src/content/examples/en/10_Interaction/20_Follow1/description.mdx
diff --git a/src/content/examples/en/10_Interaction/21_Follow2.js b/src/content/examples/en/10_Interaction/21_Follow2/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/21_Follow2.js
rename to src/content/examples/en/10_Interaction/21_Follow2/code.js
diff --git a/src/content/examples/en/10_Interaction/21_Follow2.mdx b/src/content/examples/en/10_Interaction/21_Follow2/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/21_Follow2.mdx
rename to src/content/examples/en/10_Interaction/21_Follow2/description.mdx
diff --git a/src/content/examples/en/10_Interaction/22_Follow3.js b/src/content/examples/en/10_Interaction/22_Follow3/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/22_Follow3.js
rename to src/content/examples/en/10_Interaction/22_Follow3/code.js
diff --git a/src/content/examples/en/10_Interaction/22_Follow3.mdx b/src/content/examples/en/10_Interaction/22_Follow3/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/22_Follow3.mdx
rename to src/content/examples/en/10_Interaction/22_Follow3/description.mdx
diff --git a/src/content/examples/en/10_Interaction/23_snake.js b/src/content/examples/en/10_Interaction/23_snake/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/23_snake.js
rename to src/content/examples/en/10_Interaction/23_snake/code.js
diff --git a/src/content/examples/en/10_Interaction/23_snake.mdx b/src/content/examples/en/10_Interaction/23_snake/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/23_snake.mdx
rename to src/content/examples/en/10_Interaction/23_snake/description.mdx
diff --git a/src/content/examples/en/10_Interaction/24_Wavemaker.js b/src/content/examples/en/10_Interaction/24_Wavemaker/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/24_Wavemaker.js
rename to src/content/examples/en/10_Interaction/24_Wavemaker/code.js
diff --git a/src/content/examples/en/10_Interaction/24_Wavemaker.mdx b/src/content/examples/en/10_Interaction/24_Wavemaker/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/24_Wavemaker.mdx
rename to src/content/examples/en/10_Interaction/24_Wavemaker/description.mdx
diff --git a/src/content/examples/en/10_Interaction/25_reach1.js b/src/content/examples/en/10_Interaction/25_reach1/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/25_reach1.js
rename to src/content/examples/en/10_Interaction/25_reach1/code.js
diff --git a/src/content/examples/en/10_Interaction/25_reach1.mdx b/src/content/examples/en/10_Interaction/25_reach1/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/25_reach1.mdx
rename to src/content/examples/en/10_Interaction/25_reach1/description.mdx
diff --git a/src/content/examples/en/10_Interaction/26_reach2.js b/src/content/examples/en/10_Interaction/26_reach2/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/26_reach2.js
rename to src/content/examples/en/10_Interaction/26_reach2/code.js
diff --git a/src/content/examples/en/10_Interaction/26_reach2.mdx b/src/content/examples/en/10_Interaction/26_reach2/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/26_reach2.mdx
rename to src/content/examples/en/10_Interaction/26_reach2/description.mdx
diff --git a/src/content/examples/en/10_Interaction/27_reach3.js b/src/content/examples/en/10_Interaction/27_reach3/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/27_reach3.js
rename to src/content/examples/en/10_Interaction/27_reach3/code.js
diff --git a/src/content/examples/en/10_Interaction/27_reach3.mdx b/src/content/examples/en/10_Interaction/27_reach3/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/27_reach3.mdx
rename to src/content/examples/en/10_Interaction/27_reach3/description.mdx
diff --git a/src/content/examples/en/10_Interaction/28_ArduinoSensor.js b/src/content/examples/en/10_Interaction/28_ArduinoSensor/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/28_ArduinoSensor.js
rename to src/content/examples/en/10_Interaction/28_ArduinoSensor/code.js
diff --git a/src/content/examples/en/10_Interaction/28_ArduinoSensor.mdx b/src/content/examples/en/10_Interaction/28_ArduinoSensor/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/28_ArduinoSensor.mdx
rename to src/content/examples/en/10_Interaction/28_ArduinoSensor/description.mdx
diff --git a/src/content/examples/en/10_Interaction/29_kaleidoscope.js b/src/content/examples/en/10_Interaction/29_kaleidoscope/code.js
similarity index 100%
rename from src/content/examples/en/10_Interaction/29_kaleidoscope.js
rename to src/content/examples/en/10_Interaction/29_kaleidoscope/code.js
diff --git a/src/content/examples/en/10_Interaction/29_kaleidoscope.mdx b/src/content/examples/en/10_Interaction/29_kaleidoscope/description.mdx
similarity index 100%
rename from src/content/examples/en/10_Interaction/29_kaleidoscope.mdx
rename to src/content/examples/en/10_Interaction/29_kaleidoscope/description.mdx
diff --git a/src/content/examples/en/11_Objects/01_Objects.js b/src/content/examples/en/11_Objects/01_Objects/code.js
similarity index 100%
rename from src/content/examples/en/11_Objects/01_Objects.js
rename to src/content/examples/en/11_Objects/01_Objects/code.js
diff --git a/src/content/examples/en/11_Objects/01_Objects.mdx b/src/content/examples/en/11_Objects/01_Objects/description.mdx
similarity index 100%
rename from src/content/examples/en/11_Objects/01_Objects.mdx
rename to src/content/examples/en/11_Objects/01_Objects/description.mdx
diff --git a/src/content/examples/en/11_Objects/02_Multiple_Objects.js b/src/content/examples/en/11_Objects/02_Multiple_Objects/code.js
similarity index 100%
rename from src/content/examples/en/11_Objects/02_Multiple_Objects.js
rename to src/content/examples/en/11_Objects/02_Multiple_Objects/code.js
diff --git a/src/content/examples/en/11_Objects/02_Multiple_Objects.mdx b/src/content/examples/en/11_Objects/02_Multiple_Objects/description.mdx
similarity index 100%
rename from src/content/examples/en/11_Objects/02_Multiple_Objects.mdx
rename to src/content/examples/en/11_Objects/02_Multiple_Objects/description.mdx
diff --git a/src/content/examples/en/11_Objects/03_Objects_Array.js b/src/content/examples/en/11_Objects/03_Objects_Array/code.js
similarity index 100%
rename from src/content/examples/en/11_Objects/03_Objects_Array.js
rename to src/content/examples/en/11_Objects/03_Objects_Array/code.js
diff --git a/src/content/examples/en/11_Objects/03_Objects_Array.mdx b/src/content/examples/en/11_Objects/03_Objects_Array/description.mdx
similarity index 100%
rename from src/content/examples/en/11_Objects/03_Objects_Array.mdx
rename to src/content/examples/en/11_Objects/03_Objects_Array/description.mdx
diff --git a/src/content/examples/en/11_Objects/03_Objects_Optional_Arguments.js b/src/content/examples/en/11_Objects/03_Objects_Optional_Arguments/code.js
similarity index 100%
rename from src/content/examples/en/11_Objects/03_Objects_Optional_Arguments.js
rename to src/content/examples/en/11_Objects/03_Objects_Optional_Arguments/code.js
diff --git a/src/content/examples/en/11_Objects/03_Objects_Optional_Arguments.mdx b/src/content/examples/en/11_Objects/03_Objects_Optional_Arguments/description.mdx
similarity index 100%
rename from src/content/examples/en/11_Objects/03_Objects_Optional_Arguments.mdx
rename to src/content/examples/en/11_Objects/03_Objects_Optional_Arguments/description.mdx
diff --git a/src/content/examples/en/12_Lights/02_Directional.js b/src/content/examples/en/12_Lights/02_Directional/code.js
similarity index 100%
rename from src/content/examples/en/12_Lights/02_Directional.js
rename to src/content/examples/en/12_Lights/02_Directional/code.js
diff --git a/src/content/examples/en/12_Lights/02_Directional.mdx b/src/content/examples/en/12_Lights/02_Directional/description.mdx
similarity index 100%
rename from src/content/examples/en/12_Lights/02_Directional.mdx
rename to src/content/examples/en/12_Lights/02_Directional/description.mdx
diff --git a/src/content/examples/en/12_Lights/05_Mixture.js b/src/content/examples/en/12_Lights/05_Mixture/code.js
similarity index 100%
rename from src/content/examples/en/12_Lights/05_Mixture.js
rename to src/content/examples/en/12_Lights/05_Mixture/code.js
diff --git a/src/content/examples/en/12_Lights/05_Mixture.mdx b/src/content/examples/en/12_Lights/05_Mixture/description.mdx
similarity index 100%
rename from src/content/examples/en/12_Lights/05_Mixture.mdx
rename to src/content/examples/en/12_Lights/05_Mixture/description.mdx
diff --git a/src/content/examples/en/13_Motion/01_non_orthogonal_reflection.js b/src/content/examples/en/13_Motion/01_non_orthogonal_reflection/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/01_non_orthogonal_reflection.js
rename to src/content/examples/en/13_Motion/01_non_orthogonal_reflection/code.js
diff --git a/src/content/examples/en/13_Motion/01_non_orthogonal_reflection.mdx b/src/content/examples/en/13_Motion/01_non_orthogonal_reflection/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/01_non_orthogonal_reflection.mdx
rename to src/content/examples/en/13_Motion/01_non_orthogonal_reflection/description.mdx
diff --git a/src/content/examples/en/13_Motion/02_Linear_Motion.js b/src/content/examples/en/13_Motion/02_Linear_Motion/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/02_Linear_Motion.js
rename to src/content/examples/en/13_Motion/02_Linear_Motion/code.js
diff --git a/src/content/examples/en/13_Motion/02_Linear_Motion.mdx b/src/content/examples/en/13_Motion/02_Linear_Motion/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/02_Linear_Motion.mdx
rename to src/content/examples/en/13_Motion/02_Linear_Motion/description.mdx
diff --git a/src/content/examples/en/13_Motion/03_Bounce.js b/src/content/examples/en/13_Motion/03_Bounce/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/03_Bounce.js
rename to src/content/examples/en/13_Motion/03_Bounce/code.js
diff --git a/src/content/examples/en/13_Motion/03_Bounce.mdx b/src/content/examples/en/13_Motion/03_Bounce/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/03_Bounce.mdx
rename to src/content/examples/en/13_Motion/03_Bounce/description.mdx
diff --git a/src/content/examples/en/13_Motion/04_Bouncy_Bubbles.js b/src/content/examples/en/13_Motion/04_Bouncy_Bubbles/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/04_Bouncy_Bubbles.js
rename to src/content/examples/en/13_Motion/04_Bouncy_Bubbles/code.js
diff --git a/src/content/examples/en/13_Motion/04_Bouncy_Bubbles.mdx b/src/content/examples/en/13_Motion/04_Bouncy_Bubbles/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/04_Bouncy_Bubbles.mdx
rename to src/content/examples/en/13_Motion/04_Bouncy_Bubbles/description.mdx
diff --git a/src/content/examples/en/13_Motion/05_Morph.js b/src/content/examples/en/13_Motion/05_Morph/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/05_Morph.js
rename to src/content/examples/en/13_Motion/05_Morph/code.js
diff --git a/src/content/examples/en/13_Motion/05_Morph.mdx b/src/content/examples/en/13_Motion/05_Morph/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/05_Morph.mdx
rename to src/content/examples/en/13_Motion/05_Morph/description.mdx
diff --git a/src/content/examples/en/13_Motion/06_Moving_On_Curves.js b/src/content/examples/en/13_Motion/06_Moving_On_Curves/code.js
similarity index 100%
rename from src/content/examples/en/13_Motion/06_Moving_On_Curves.js
rename to src/content/examples/en/13_Motion/06_Moving_On_Curves/code.js
diff --git a/src/content/examples/en/13_Motion/06_Moving_On_Curves.mdx b/src/content/examples/en/13_Motion/06_Moving_On_Curves/description.mdx
similarity index 100%
rename from src/content/examples/en/13_Motion/06_Moving_On_Curves.mdx
rename to src/content/examples/en/13_Motion/06_Moving_On_Curves/description.mdx
diff --git a/src/content/examples/en/13_Motion/07_Circle_Collision.mdx b/src/content/examples/en/13_Motion/07_Circle_Collision.mdx
deleted file mode 100644
index 355d564b9a..0000000000
--- a/src/content/examples/en/13_Motion/07_Circle_Collision.mdx
+++ /dev/null
@@ -1,156 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- class Ball {
- constructor(x, y, r) {
- this.position = new p5.Vector(x, y);
- this.velocity = p5.Vector.random2D();
- this.velocity.mult(3);
- this.r = r;
- this.m = r * 0.1;
- }
- update() {
- this.position.add(this.velocity);
- }
-
- checkBoundaryCollision() {
- if (this.position.x > width - this.r) {
- this.position.x = width - this.r;
- this.velocity.x *= -1;
- } else if (this.position.x < this.r) {
- this.position.x = this.r;
- this.velocity.x *= -1;
- } else if (this.position.y > height - this.r) {
- this.position.y = height - this.r;
- this.velocity.y *= -1;
- } else if (this.position.y < this.r) {
- this.position.y = this.r;
- this.velocity.y *= -1;
- }
- }
-
- checkCollision(other) {
- // Get distances between the balls components
- let distanceVect = p5.Vector.sub(other.position, this.position);
-
- // Calculate magnitude of the vector separating the balls
- let distanceVectMag = distanceVect.mag();
-
- // Minimum distance before they are touching
- let minDistance = this.r + other.r;
-
- if (distanceVectMag < minDistance) {
- let distanceCorrection = (minDistance - distanceVectMag) / 2.0;
- let d = distanceVect.copy();
- let correctionVector = d.normalize().mult(distanceCorrection);
- other.position.add(correctionVector);
- this.position.sub(correctionVector);
-
- // get angle of distanceVect
- let theta = distanceVect.heading();
- // precalculate trig values
- let sine = sin(theta);
- let cosine = cos(theta);
-
- /* bTemp will hold rotated ball this.positions. You
- just need to worry about bTemp[1] this.position*/
- let bTemp = [new p5.Vector(), new p5.Vector()];
-
- /* this ball's this.position is relative to the other
- so you can use the vector between them (bVect) as the
- reference point in the rotation expressions.
- bTemp[0].this.position.x and bTemp[0].this.position.y will initialize
- automatically to 0.0, which is what you want
- since b[1] will rotate around b[0] */
- bTemp[1].x = cosine * distanceVect.x + sine * distanceVect.y;
- bTemp[1].y = cosine * distanceVect.y - sine * distanceVect.x;
-
- // rotate Temporary velocities
- let vTemp = [new p5.Vector(), new p5.Vector()];
-
- vTemp[0].x = cosine * this.velocity.x + sine * this.velocity.y;
- vTemp[0].y = cosine * this.velocity.y - sine * this.velocity.x;
- vTemp[1].x = cosine * other.velocity.x + sine * other.velocity.y;
- vTemp[1].y = cosine * other.velocity.y - sine * other.velocity.x;
-
- /* Now that velocities are rotated, you can use 1D
- conservation of momentum equations to calculate
- the final this.velocity along the x-axis. */
- let vFinal = [new p5.Vector(), new p5.Vector()];
-
- // final rotated this.velocity for b[0]
- vFinal[0].x =
- ((this.m - other.m) * vTemp[0].x + 2 * other.m * vTemp[1].x) /
- (this.m + other.m);
- vFinal[0].y = vTemp[0].y;
-
- // final rotated this.velocity for b[0]
- vFinal[1].x =
- ((other.m - this.m) * vTemp[1].x + 2 * this.m * vTemp[0].x) /
- (this.m + other.m);
- vFinal[1].y = vTemp[1].y;
-
- // hack to avoid clumping
- bTemp[0].x += vFinal[0].x;
- bTemp[1].x += vFinal[1].x;
-
- /* Rotate ball this.positions and velocities back
- Reverse signs in trig expressions to rotate
- in the opposite direction */
- // rotate balls
- let bFinal = [new p5.Vector(), new p5.Vector()];
-
- bFinal[0].x = cosine * bTemp[0].x - sine * bTemp[0].y;
- bFinal[0].y = cosine * bTemp[0].y + sine * bTemp[0].x;
- bFinal[1].x = cosine * bTemp[1].x - sine * bTemp[1].y;
- bFinal[1].y = cosine * bTemp[1].y + sine * bTemp[1].x;
-
- // update balls to screen this.position
- other.position.x = this.position.x + bFinal[1].x;
- other.position.y = this.position.y + bFinal[1].y;
-
- this.position.add(bFinal[0]);
-
- // update velocities
- this.velocity.x = cosine * vFinal[0].x - sine * vFinal[0].y;
- this.velocity.y = cosine * vFinal[0].y + sine * vFinal[0].x;
- other.velocity.x = cosine * vFinal[1].x - sine * vFinal[1].y;
- other.velocity.y = cosine * vFinal[1].y + sine * vFinal[1].x;
- }
- }
-
- display() {
- noStroke();
- fill(204);
- ellipse(this.position.x, this.position.y, this.r * 2, this.r * 2);
- }
- }
- let balls = [new Ball(100, 400, 20), new Ball(700, 400, 80)];
- console.log(balls);
- function setup() {
- createCanvas(710, 400);
- }
-
- function draw() {
- background(51);
- for (let i = 0; i < balls.length; i++) {
- let b = balls[i];
- b.update();
- b.display();
- b.checkBoundaryCollision();
- balls[0].checkCollision(balls[1]);
- }
- }
-title: Circle Collision
-arialabel: >-
- One large light grey circle and one small grey circle collide and bounce off
- each other as they bounce off each other and off the edges of the dark grey
- background
-description: >-
- This is a port of the "Circle Collision" example from processing.org/examples
-
This example uses vectors for better visualization of physical Quantity
----
-
-
-# Example
diff --git a/src/content/examples/en/15_Instance_Mode/01_Instantiating.js b/src/content/examples/en/15_Instance_Mode/01_Instantiating/code.js
similarity index 100%
rename from src/content/examples/en/15_Instance_Mode/01_Instantiating.js
rename to src/content/examples/en/15_Instance_Mode/01_Instantiating/code.js
diff --git a/src/content/examples/en/15_Instance_Mode/01_Instantiating.mdx b/src/content/examples/en/15_Instance_Mode/01_Instantiating/description.mdx
similarity index 100%
rename from src/content/examples/en/15_Instance_Mode/01_Instantiating.mdx
rename to src/content/examples/en/15_Instance_Mode/01_Instantiating/description.mdx
diff --git a/src/content/examples/en/16_Dom/03_Input_Button.js b/src/content/examples/en/16_Dom/03_Input_Button/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/03_Input_Button.js
rename to src/content/examples/en/16_Dom/03_Input_Button/code.js
diff --git a/src/content/examples/en/16_Dom/03_Input_Button.mdx b/src/content/examples/en/16_Dom/03_Input_Button/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/03_Input_Button.mdx
rename to src/content/examples/en/16_Dom/03_Input_Button/description.mdx
diff --git a/src/content/examples/en/16_Dom/04_Slider.js b/src/content/examples/en/16_Dom/04_Slider/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/04_Slider.js
rename to src/content/examples/en/16_Dom/04_Slider/code.js
diff --git a/src/content/examples/en/16_Dom/04_Slider.mdx b/src/content/examples/en/16_Dom/04_Slider/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/04_Slider.mdx
rename to src/content/examples/en/16_Dom/04_Slider/description.mdx
diff --git a/src/content/examples/en/16_Dom/07_Modify_DOM.js b/src/content/examples/en/16_Dom/07_Modify_DOM/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/07_Modify_DOM.js
rename to src/content/examples/en/16_Dom/07_Modify_DOM/code.js
diff --git a/src/content/examples/en/16_Dom/07_Modify_DOM.mdx b/src/content/examples/en/16_Dom/07_Modify_DOM/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/07_Modify_DOM.mdx
rename to src/content/examples/en/16_Dom/07_Modify_DOM/description.mdx
diff --git a/src/content/examples/en/16_Dom/08_Video.js b/src/content/examples/en/16_Dom/08_Video/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/08_Video.js
rename to src/content/examples/en/16_Dom/08_Video/code.js
diff --git a/src/content/examples/en/16_Dom/08_Video.mdx b/src/content/examples/en/16_Dom/08_Video/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/08_Video.mdx
rename to src/content/examples/en/16_Dom/08_Video/description.mdx
diff --git a/src/content/examples/en/16_Dom/09_Video_Canvas.js b/src/content/examples/en/16_Dom/09_Video_Canvas/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/09_Video_Canvas.js
rename to src/content/examples/en/16_Dom/09_Video_Canvas/code.js
diff --git a/src/content/examples/en/16_Dom/09_Video_Canvas.mdx b/src/content/examples/en/16_Dom/09_Video_Canvas/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/09_Video_Canvas.mdx
rename to src/content/examples/en/16_Dom/09_Video_Canvas/description.mdx
diff --git a/src/content/examples/en/16_Dom/10_Video_Pixels.js b/src/content/examples/en/16_Dom/10_Video_Pixels/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/10_Video_Pixels.js
rename to src/content/examples/en/16_Dom/10_Video_Pixels/code.js
diff --git a/src/content/examples/en/16_Dom/10_Video_Pixels.mdx b/src/content/examples/en/16_Dom/10_Video_Pixels/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/10_Video_Pixels.mdx
rename to src/content/examples/en/16_Dom/10_Video_Pixels/description.mdx
diff --git a/src/content/examples/en/16_Dom/11_Capture.js b/src/content/examples/en/16_Dom/11_Capture/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/11_Capture.js
rename to src/content/examples/en/16_Dom/11_Capture/code.js
diff --git a/src/content/examples/en/16_Dom/11_Capture.mdx b/src/content/examples/en/16_Dom/11_Capture/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/11_Capture.mdx
rename to src/content/examples/en/16_Dom/11_Capture/description.mdx
diff --git a/src/content/examples/en/16_Dom/12_Drop.js b/src/content/examples/en/16_Dom/12_Drop/code.js
similarity index 100%
rename from src/content/examples/en/16_Dom/12_Drop.js
rename to src/content/examples/en/16_Dom/12_Drop/code.js
diff --git a/src/content/examples/en/16_Dom/12_Drop.mdx b/src/content/examples/en/16_Dom/12_Drop/description.mdx
similarity index 100%
rename from src/content/examples/en/16_Dom/12_Drop.mdx
rename to src/content/examples/en/16_Dom/12_Drop/description.mdx
diff --git a/src/content/examples/en/17_Drawing/00_Continuous_Lines.js b/src/content/examples/en/17_Drawing/00_Continuous_Lines/code.js
similarity index 100%
rename from src/content/examples/en/17_Drawing/00_Continuous_Lines.js
rename to src/content/examples/en/17_Drawing/00_Continuous_Lines/code.js
diff --git a/src/content/examples/en/17_Drawing/00_Continuous_Lines.mdx b/src/content/examples/en/17_Drawing/00_Continuous_Lines/description.mdx
similarity index 100%
rename from src/content/examples/en/17_Drawing/00_Continuous_Lines.mdx
rename to src/content/examples/en/17_Drawing/00_Continuous_Lines/description.mdx
diff --git a/src/content/examples/en/17_Drawing/01_Pattern.js b/src/content/examples/en/17_Drawing/01_Pattern/code.js
similarity index 100%
rename from src/content/examples/en/17_Drawing/01_Pattern.js
rename to src/content/examples/en/17_Drawing/01_Pattern/code.js
diff --git a/src/content/examples/en/17_Drawing/01_Pattern.mdx b/src/content/examples/en/17_Drawing/01_Pattern/description.mdx
similarity index 100%
rename from src/content/examples/en/17_Drawing/01_Pattern.mdx
rename to src/content/examples/en/17_Drawing/01_Pattern/description.mdx
diff --git a/src/content/examples/en/17_Drawing/02_Pulses.js b/src/content/examples/en/17_Drawing/02_Pulses/code.js
similarity index 100%
rename from src/content/examples/en/17_Drawing/02_Pulses.js
rename to src/content/examples/en/17_Drawing/02_Pulses/code.js
diff --git a/src/content/examples/en/17_Drawing/02_Pulses.mdx b/src/content/examples/en/17_Drawing/02_Pulses/description.mdx
similarity index 100%
rename from src/content/examples/en/17_Drawing/02_Pulses.mdx
rename to src/content/examples/en/17_Drawing/02_Pulses/description.mdx
diff --git a/src/content/examples/en/18_Transform/00_Translate.js b/src/content/examples/en/18_Transform/00_Translate/code.js
similarity index 100%
rename from src/content/examples/en/18_Transform/00_Translate.js
rename to src/content/examples/en/18_Transform/00_Translate/code.js
diff --git a/src/content/examples/en/18_Transform/00_Translate.mdx b/src/content/examples/en/18_Transform/00_Translate/description.mdx
similarity index 100%
rename from src/content/examples/en/18_Transform/00_Translate.mdx
rename to src/content/examples/en/18_Transform/00_Translate/description.mdx
diff --git a/src/content/examples/en/18_Transform/01_Scale.js b/src/content/examples/en/18_Transform/01_Scale/code.js
similarity index 100%
rename from src/content/examples/en/18_Transform/01_Scale.js
rename to src/content/examples/en/18_Transform/01_Scale/code.js
diff --git a/src/content/examples/en/18_Transform/01_Scale.mdx b/src/content/examples/en/18_Transform/01_Scale/description.mdx
similarity index 100%
rename from src/content/examples/en/18_Transform/01_Scale.mdx
rename to src/content/examples/en/18_Transform/01_Scale/description.mdx
diff --git a/src/content/examples/en/18_Transform/02_Rotate.js b/src/content/examples/en/18_Transform/02_Rotate/code.js
similarity index 100%
rename from src/content/examples/en/18_Transform/02_Rotate.js
rename to src/content/examples/en/18_Transform/02_Rotate/code.js
diff --git a/src/content/examples/en/18_Transform/02_Rotate.mdx b/src/content/examples/en/18_Transform/02_Rotate/description.mdx
similarity index 100%
rename from src/content/examples/en/18_Transform/02_Rotate.mdx
rename to src/content/examples/en/18_Transform/02_Rotate/description.mdx
diff --git a/src/content/examples/en/18_Transform/03_Arm.js b/src/content/examples/en/18_Transform/03_Arm/code.js
similarity index 100%
rename from src/content/examples/en/18_Transform/03_Arm.js
rename to src/content/examples/en/18_Transform/03_Arm/code.js
diff --git a/src/content/examples/en/18_Transform/03_Arm.mdx b/src/content/examples/en/18_Transform/03_Arm/description.mdx
similarity index 100%
rename from src/content/examples/en/18_Transform/03_Arm.mdx
rename to src/content/examples/en/18_Transform/03_Arm/description.mdx
diff --git a/src/content/examples/en/19_Typography/00_Letters.js b/src/content/examples/en/19_Typography/00_Letters/code.js
similarity index 100%
rename from src/content/examples/en/19_Typography/00_Letters.js
rename to src/content/examples/en/19_Typography/00_Letters/code.js
diff --git a/src/content/examples/en/19_Typography/00_Letters.mdx b/src/content/examples/en/19_Typography/00_Letters/description.mdx
similarity index 100%
rename from src/content/examples/en/19_Typography/00_Letters.mdx
rename to src/content/examples/en/19_Typography/00_Letters/description.mdx
diff --git a/src/content/examples/en/19_Typography/01_Words.js b/src/content/examples/en/19_Typography/01_Words/code.js
similarity index 100%
rename from src/content/examples/en/19_Typography/01_Words.js
rename to src/content/examples/en/19_Typography/01_Words/code.js
diff --git a/src/content/examples/en/19_Typography/01_Words.mdx b/src/content/examples/en/19_Typography/01_Words/description.mdx
similarity index 100%
rename from src/content/examples/en/19_Typography/01_Words.mdx
rename to src/content/examples/en/19_Typography/01_Words/description.mdx
diff --git a/src/content/examples/en/19_Typography/02_Text_Rotation.mdx b/src/content/examples/en/19_Typography/02_Text_Rotation.mdx
deleted file mode 100644
index 03e999fde3..0000000000
--- a/src/content/examples/en/19_Typography/02_Text_Rotation.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
-
- let font,
- fontsize = 32;
-
- let angleRotate = 0.0;
-
- function setup() {
- createCanvas(710, 400);
- background(0);
-
- // Ensure the .ttf or .otf font stored in the assets directory
- // is loaded before setup() and draw() are called
- font = loadFont('assets/SourceSansPro-Regular.otf');
-
- // Set text characteristics
- textFont(font);
- }
-
- function draw() {
- background(0);
-
- strokeWeight(1);
- stroke(153);
-
- push();
- let angle1 = radians(45);
- translate(100, 180);
- rotate(angle1);
- // Draw the letter to the screen
- text("45 DEGREES", 0, 0);
- line(0, 0, 150, 0);
- pop();
-
- push();
- let angle2 = radians(270);
- translate(200, 180);
- rotate(angle2);
- // Draw the letter to the screen
- text("270 DEGREES", 0, 0);
- line(0, 0, 150, 0);
- pop();
-
- push();
- translate(440, 180);
- rotate(radians(angleRotate));
- text(int(angleRotate) % 360 + " DEGREES ", 0, 0);
- line(0, 0, 150, 0);
- pop();
-
- angleRotate += 0.25;
-
- stroke(255, 0, 0);
- strokeWeight(4);
- point(100, 180);
- point(200, 180);
- point(440, 180);
- }
-title: Text Rotation
-arialabel: >-
- Three white lines on a black screen. One at 45 degrees, one at 270 degrees,
- and one line that turns clockwise and the degree label changes as the line
- turns.
-description: >-
- Draws letters to the screen and rotates them at different angles.
-
-
This example is ported from the Text Rotation
- example
-
- on the Processing website
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/00_geometries.js b/src/content/examples/en/20_3D/00_geometries/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/00_geometries.js
rename to src/content/examples/en/20_3D/00_geometries/code.js
diff --git a/src/content/examples/en/20_3D/00_geometries.mdx b/src/content/examples/en/20_3D/00_geometries/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/00_geometries.mdx
rename to src/content/examples/en/20_3D/00_geometries/description.mdx
diff --git a/src/content/examples/en/20_3D/01_sine_cosine_in_3D.js b/src/content/examples/en/20_3D/01_sine_cosine_in_3D/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/01_sine_cosine_in_3D.js
rename to src/content/examples/en/20_3D/01_sine_cosine_in_3D/code.js
diff --git a/src/content/examples/en/20_3D/01_sine_cosine_in_3D.mdx b/src/content/examples/en/20_3D/01_sine_cosine_in_3D/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/01_sine_cosine_in_3D.mdx
rename to src/content/examples/en/20_3D/01_sine_cosine_in_3D/description.mdx
diff --git a/src/content/examples/en/20_3D/02_multiple_lights.js b/src/content/examples/en/20_3D/02_multiple_lights/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/02_multiple_lights.js
rename to src/content/examples/en/20_3D/02_multiple_lights/code.js
diff --git a/src/content/examples/en/20_3D/02_multiple_lights.mdx b/src/content/examples/en/20_3D/02_multiple_lights/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/02_multiple_lights.mdx
rename to src/content/examples/en/20_3D/02_multiple_lights/description.mdx
diff --git a/src/content/examples/en/20_3D/03_materials.js b/src/content/examples/en/20_3D/03_materials/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/03_materials.js
rename to src/content/examples/en/20_3D/03_materials/code.js
diff --git a/src/content/examples/en/20_3D/03_materials.mdx b/src/content/examples/en/20_3D/03_materials/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/03_materials.mdx
rename to src/content/examples/en/20_3D/03_materials/description.mdx
diff --git a/src/content/examples/en/20_3D/04_textures.js b/src/content/examples/en/20_3D/04_textures/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/04_textures.js
rename to src/content/examples/en/20_3D/04_textures/code.js
diff --git a/src/content/examples/en/20_3D/04_textures.mdx b/src/content/examples/en/20_3D/04_textures/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/04_textures.mdx
rename to src/content/examples/en/20_3D/04_textures/description.mdx
diff --git a/src/content/examples/en/20_3D/05_ray_casting.mdx b/src/content/examples/en/20_3D/05_ray_casting.mdx
deleted file mode 100644
index f5deaf9851..0000000000
--- a/src/content/examples/en/20_3D/05_ray_casting.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- const objects = [];
- let eyeZ;
-
- function setup() {
- createCanvas(710, 400, WEBGL);
-
- eyeZ = 800; // The default distance the camera is away from the origin.
-
- objects.push(new IntersectPlane(1, 0, 0, -100, 0, 0)); // Left wall
- objects.push(new IntersectPlane(1, 0, 0, 100, 0, 0)); // Right wall
- objects.push(new IntersectPlane(0, 1, 0, 0, -100, 0)); // Bottom wall
- objects.push(new IntersectPlane(0, 1, 0, 0, 100, 0)); // Top wall
- objects.push(new IntersectPlane(0, 0, 1, 0, 0, 0)); // Back wall
-
- noStroke();
- ambientMaterial(250);
- }
-
- function draw() {
- background(0);
-
- // Lights
- pointLight(255, 255, 255, 0, 0, 400);
- ambientLight(244, 122, 158);
-
- // Left wall
- push();
- translate(-100, 0, 200);
- rotateY((90 * PI) / 180);
- plane(400, 200);
- pop();
-
- // Right wall
- push();
- translate(100, 0, 200);
- rotateY((90 * PI) / 180);
- plane(400, 200);
- pop();
-
- // Bottom wall
- push();
- translate(0, 100, 200);
- rotateX((90 * PI) / 180);
- plane(200, 400);
- pop();
-
- // Top wall
- push();
- translate(0, -100, 200);
- rotateX((90 * PI) / 180);
- plane(200, 400);
- pop();
-
- plane(200, 200); // Back wall
-
- const x = mouseX - width / 2;
- const y = mouseY - height / 2;
-
- const Q = createVector(0, 0, eyeZ); // A point on the ray and the default position of the camera.
- const v = createVector(x, y, -eyeZ); // The direction vector of the ray.
-
- let intersect; // The point of intersection between the ray and a plane.
- let closestLambda = eyeZ * 10; // The draw distance.
-
- for (let x = 0; x < objects.length; x += 1) {
- let object = objects[x];
- let lambda = object.getLambda(Q, v); // The value of lambda where the ray intersects the object
-
- if (lambda < closestLambda && lambda > 0) {
- // Find the position of the intersection of the ray and the object.
- intersect = p5.Vector.add(Q, p5.Vector.mult(v, lambda));
- closestLambda = lambda;
- }
- }
-
- // Cursor
- push();
- translate(intersect);
- fill(237, 34, 93);
- sphere(10);
- pop();
- }
-
- // Class for a plane that extends to infinity.
- class IntersectPlane {
- constructor(n1, n2, n3, p1, p2, p3) {
- this.normal = createVector(n1, n2, n3); // The normal vector of the plane
- this.point = createVector(p1, p2, p3); // A point on the plane
- this.d = this.point.dot(this.normal);
- }
-
- getLambda(Q, v) {
- return (-this.d - this.normal.dot(Q)) / this.normal.dot(v);
- }
- }
-title: Ray Casting
-arialabel: >-
- White square in the middle of a screen split diagonally between light pink and
- dark pink. The white square is a back wall and the pinks form 4 other walls.
- The user’s mouse controls a circle which turns into a 3D bump as it moves
- along the walls close to the front.
-description: |-
- Original example by Jonathan Watson.
-
Detecting the position of the mouse in 3D space with ray casting.
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/07_orbit_control.js b/src/content/examples/en/20_3D/07_orbit_control/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/07_orbit_control.js
rename to src/content/examples/en/20_3D/07_orbit_control/code.js
diff --git a/src/content/examples/en/20_3D/07_orbit_control.mdx b/src/content/examples/en/20_3D/07_orbit_control/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/07_orbit_control.mdx
rename to src/content/examples/en/20_3D/07_orbit_control/description.mdx
diff --git a/src/content/examples/en/20_3D/08_basic_shader.mdx b/src/content/examples/en/20_3D/08_basic_shader.mdx
deleted file mode 100644
index 83aa85de71..0000000000
--- a/src/content/examples/en/20_3D/08_basic_shader.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
-
- // this variable will hold our shader object
- let theShader;
-
- function preload(){
- // load the shader
- theShader = loadShader('assets/basic.vert', 'assets/basic.frag');
- }
-
- function setup() {
- // shaders require WEBGL mode to work
- createCanvas(710, 400, WEBGL);
- noStroke();
- }
-
- function draw() {
- // shader() sets the active shader with our shader
- shader(theShader);
-
- // rect gives us some geometry on the screen
- rect(0,0,width, height);
- }
-title: Basic Shader
-arialabel: Background with a cyan to purple gradient
-description: >-
- This is a basic example showing how to load shaders in p5.js.
-
-
To learn more about using shaders in p5.js: p5.js Shaders
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/09_shader_as_a_texture.mdx b/src/content/examples/en/20_3D/09_shader_as_a_texture.mdx
deleted file mode 100644
index c3daa33160..0000000000
--- a/src/content/examples/en/20_3D/09_shader_as_a_texture.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |2
-
-
- // this variable will hold our shader object
- let theShader;
- // this variable will hold our createGraphics layer
- let shaderTexture;
-
- let theta = 0;
-
- let x;
- let y;
- let outsideRadius = 200;
- let insideRadius = 100;
-
- function preload(){
- // load the shader
- theShader = loadShader('assets/texture.vert','assets/texture.frag');
- }
-
- function setup() {
- // shaders require WEBGL mode to work
- createCanvas(710, 400, WEBGL);
- noStroke();
-
- // initialize the createGraphics layers
- shaderTexture = createGraphics(710, 400, WEBGL);
-
- // turn off the createGraphics layers stroke
- shaderTexture.noStroke();
-
- x = -50;
- y = 0;
- }
-
- function draw() {
-
- // instead of just setting the active shader we are passing it to the createGraphics layer
- shaderTexture.shader(theShader);
-
- // here we're using setUniform() to send our uniform values to the shader
- theShader.setUniform("resolution", [width, height]);
- theShader.setUniform("time", millis() / 1000.0);
- theShader.setUniform("mouse", [mouseX, map(mouseY, 0, height, height, 0)]);
-
- // passing the shaderTexture layer geometry to render on
- shaderTexture.rect(0,0,width,height);
-
- background(255);
-
- // pass the shader as a texture
- texture(shaderTexture);
-
- translate(-150, 0, 0);
- push();
- rotateZ(theta * mouseX * 0.0001);
- rotateX(theta * mouseX * 0.0001);
- rotateY(theta * mouseX * 0.0001);
- theta += 0.05;
- sphere(125);
- pop();
-
- // passing a fifth parameter to ellipse for smooth edges in 3D
- ellipse(260,0,200,200,100);
- }
-title: Shader as a Texture
-arialabel: Sphere broken up into a square grid with a gradient in each grid.
-description: >-
- Shaders can be applied to 2D/3D shapes as textures.
-
-
To learn more about using shaders in p5.js: p5.js Shaders
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/10_passing_shader_uniforms.mdx b/src/content/examples/en/20_3D/10_passing_shader_uniforms.mdx
deleted file mode 100644
index a8877e1a4d..0000000000
--- a/src/content/examples/en/20_3D/10_passing_shader_uniforms.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |2
-
-
- // this variable will hold our shader object
- let theShader;
-
- function preload(){
- // load the shader
- theShader = loadShader('assets/uniforms.vert', 'assets/uniforms.frag');
- }
-
- function setup() {
- // shaders require WEBGL mode to work
- createCanvas(710, 400, WEBGL);
- noStroke();
-
- describe('a 2d example containing a sage green polygon, rotating in the middle of the sketch. As the mouse moves horizontally, the number of sides for the polygon change.')
- }
-
- function draw() {
- // shader() sets the active shader with our shader
- shader(theShader);
-
- // lets send the resolution, mouse, and time to our shader
- // the mouse x position will change the number of sides
- // before sending mouse + time we modify the data so it's more easily usable by the shader
- theShader.setUniform('resolution', [width * displayDensity(), height * displayDensity()]);
- theShader.setUniform('mouse', map(mouseX, 0, width, 0, 7));
- theShader.setUniform('time', frameCount * 0.01);
-
- // rect gives us some geometry on the screen
- rect(0,0,width, height);
- }
-title: Passing Shader Uniforms
-arialabel: >-
- Sage green shape in the middle of a dark purple background. As the user’s
- mouse moves left, the shape has less sides and as the user’s mouse moves
- right, the shape has more sides
-description: >-
- Uniforms are the way in which information is passed from p5 to the shader.
-
-
To learn more about using shaders in p5.js: p5.js Shaders
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/11_shader_using_webcam.mdx b/src/content/examples/en/20_3D/11_shader_using_webcam.mdx
deleted file mode 100644
index f52d6a1b67..0000000000
--- a/src/content/examples/en/20_3D/11_shader_using_webcam.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |2
-
-
- // this variable will hold our shader object
- let theShader;
- // this variable will hold our webcam video
- let cam;
-
- function preload(){
- // load the shader
- theShader = loadShader('assets/webcam.vert', 'assets/webcam.frag');
- }
-
- function setup() {
- // shaders require WEBGL mode to work
- createCanvas(710, 400, WEBGL);
- noStroke();
-
- cam = createCapture(VIDEO);
- cam.size(710, 400);
-
- cam.hide();
- }
-
- function draw() {
- // shader() sets the active shader with our shader
- shader(theShader);
-
- // passing cam as a texture
- theShader.setUniform('tex0', cam);
-
- // rect gives us some geometry on the screen
- rect(0,0,width,height);
- }
-title: Shader Using Webcam
-arialabel: Neon texture added to the scene displayed by the user’s built-in webcam
-description: >-
- The webcam can be passed to shaders as a texture.
-
-
To learn more about using shaders in p5.js: p5.js Shaders
----
-
-
-# Example
diff --git a/src/content/examples/en/20_3D/12_framebuffer_blur.js b/src/content/examples/en/20_3D/12_framebuffer_blur/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/12_framebuffer_blur.js
rename to src/content/examples/en/20_3D/12_framebuffer_blur/code.js
diff --git a/src/content/examples/en/20_3D/12_framebuffer_blur.mdx b/src/content/examples/en/20_3D/12_framebuffer_blur/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/12_framebuffer_blur.mdx
rename to src/content/examples/en/20_3D/12_framebuffer_blur/description.mdx
diff --git a/src/content/examples/en/20_3D/12_simple_feedback.js b/src/content/examples/en/20_3D/12_simple_feedback/code.js
similarity index 100%
rename from src/content/examples/en/20_3D/12_simple_feedback.js
rename to src/content/examples/en/20_3D/12_simple_feedback/code.js
diff --git a/src/content/examples/en/20_3D/12_simple_feedback.mdx b/src/content/examples/en/20_3D/12_simple_feedback/description.mdx
similarity index 100%
rename from src/content/examples/en/20_3D/12_simple_feedback.mdx
rename to src/content/examples/en/20_3D/12_simple_feedback/description.mdx
diff --git a/src/content/examples/en/21_Input/00_Clock.js b/src/content/examples/en/21_Input/00_Clock/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/00_Clock.js
rename to src/content/examples/en/21_Input/00_Clock/code.js
diff --git a/src/content/examples/en/21_Input/00_Clock.mdx b/src/content/examples/en/21_Input/00_Clock/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/00_Clock.mdx
rename to src/content/examples/en/21_Input/00_Clock/description.mdx
diff --git a/src/content/examples/en/21_Input/01_Constrain.js b/src/content/examples/en/21_Input/01_Constrain/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/01_Constrain.js
rename to src/content/examples/en/21_Input/01_Constrain/code.js
diff --git a/src/content/examples/en/21_Input/01_Constrain.mdx b/src/content/examples/en/21_Input/01_Constrain/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/01_Constrain.mdx
rename to src/content/examples/en/21_Input/01_Constrain/description.mdx
diff --git a/src/content/examples/en/21_Input/02_Easing.js b/src/content/examples/en/21_Input/02_Easing/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/02_Easing.js
rename to src/content/examples/en/21_Input/02_Easing/code.js
diff --git a/src/content/examples/en/21_Input/02_Easing.mdx b/src/content/examples/en/21_Input/02_Easing/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/02_Easing.mdx
rename to src/content/examples/en/21_Input/02_Easing/description.mdx
diff --git a/src/content/examples/en/21_Input/03_Keyboard.js b/src/content/examples/en/21_Input/03_Keyboard/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/03_Keyboard.js
rename to src/content/examples/en/21_Input/03_Keyboard/code.js
diff --git a/src/content/examples/en/21_Input/03_Keyboard.mdx b/src/content/examples/en/21_Input/03_Keyboard/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/03_Keyboard.mdx
rename to src/content/examples/en/21_Input/03_Keyboard/description.mdx
diff --git a/src/content/examples/en/21_Input/04_Milliseconds.mdx b/src/content/examples/en/21_Input/04_Milliseconds.mdx
deleted file mode 100644
index 128202f867..0000000000
--- a/src/content/examples/en/21_Input/04_Milliseconds.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
-
- let scale;
-
- function setup() {
- createCanvas(720, 400);
- noStroke();
- scale = width/20;
- }
-
- function draw() {
- let i;
- for ( i = 0; i < scale; i++) {
- colorMode(RGB, (i+1) * scale * 10);
- fill(millis()%((i+1) * scale * 10));
- rect(i*scale, 0, scale, height);
- }
- }
-title: Milliseconds
-arialabel: >-
- Background broken down in bars of various shades of grey. The fill of some of
- the bars randomly changes every millisecond to other shades of grey.
-description: >-
- A millisecond is 1/1000 of a second. Processing keeps track of the number of
- milliseconds a
-
- program has run. By modifying this number with the modulo(%) operator,
- different patterns in time are created.
-
-
This example is ported from the Milliseconds
- example
-
- on the Processing website
----
-
-
-# Example
diff --git a/src/content/examples/en/21_Input/05_Mouse1D.js b/src/content/examples/en/21_Input/05_Mouse1D/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/05_Mouse1D.js
rename to src/content/examples/en/21_Input/05_Mouse1D/code.js
diff --git a/src/content/examples/en/21_Input/05_Mouse1D.mdx b/src/content/examples/en/21_Input/05_Mouse1D/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/05_Mouse1D.mdx
rename to src/content/examples/en/21_Input/05_Mouse1D/description.mdx
diff --git a/src/content/examples/en/21_Input/06_Mouse2D.js b/src/content/examples/en/21_Input/06_Mouse2D/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/06_Mouse2D.js
rename to src/content/examples/en/21_Input/06_Mouse2D/code.js
diff --git a/src/content/examples/en/21_Input/06_Mouse2D.mdx b/src/content/examples/en/21_Input/06_Mouse2D/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/06_Mouse2D.mdx
rename to src/content/examples/en/21_Input/06_Mouse2D/description.mdx
diff --git a/src/content/examples/en/21_Input/07_Mouse_Functions.js b/src/content/examples/en/21_Input/07_Mouse_Functions/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/07_Mouse_Functions.js
rename to src/content/examples/en/21_Input/07_Mouse_Functions/code.js
diff --git a/src/content/examples/en/21_Input/07_Mouse_Functions.mdx b/src/content/examples/en/21_Input/07_Mouse_Functions/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/07_Mouse_Functions.mdx
rename to src/content/examples/en/21_Input/07_Mouse_Functions/description.mdx
diff --git a/src/content/examples/en/21_Input/08_Mouse_Signals.js b/src/content/examples/en/21_Input/08_Mouse_Signals/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/08_Mouse_Signals.js
rename to src/content/examples/en/21_Input/08_Mouse_Signals/code.js
diff --git a/src/content/examples/en/21_Input/08_Mouse_Signals.mdx b/src/content/examples/en/21_Input/08_Mouse_Signals/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/08_Mouse_Signals.mdx
rename to src/content/examples/en/21_Input/08_Mouse_Signals/description.mdx
diff --git a/src/content/examples/en/21_Input/09_MouseIsPressed.js b/src/content/examples/en/21_Input/09_MouseIsPressed/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/09_MouseIsPressed.js
rename to src/content/examples/en/21_Input/09_MouseIsPressed/code.js
diff --git a/src/content/examples/en/21_Input/09_MouseIsPressed.mdx b/src/content/examples/en/21_Input/09_MouseIsPressed/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/09_MouseIsPressed.mdx
rename to src/content/examples/en/21_Input/09_MouseIsPressed/description.mdx
diff --git a/src/content/examples/en/21_Input/10_Rollover.mdx b/src/content/examples/en/21_Input/10_Rollover.mdx
deleted file mode 100644
index c02cd245ad..0000000000
--- a/src/content/examples/en/21_Input/10_Rollover.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |-
-
- let squareX, squareY; // Position of square button
- let circleX, circleY; // Position of circle button
- let squareSize = 90; // Width/height of square
- let circleSize = 93; // Diameter of circle
-
- let squareColor;
- let circleColor;
- let baseColor;
-
- let squareOver = false;
- let circleOver = false;
-
- function setup() {
- createCanvas(710, 400);
- squareColor = color(0);
- circleColor = color(255);
- baseColor = color(102);
- circleX = width/2+circleSize/2+10;
- circleY = height/2;
- squareX = width/2-squareSize-10;
- squareY = height/2-squareSize/2;
- }
-
- function draw() {
- update(mouseX, mouseY);
-
- noStroke();
- if (squareOver) {
- background(squareColor);
- } else if (circleOver) {
- background(circleColor);
- } else {
- background(baseColor);
- }
-
- stroke(255);
- fill(squareColor);
- square(squareX, squareY, squareSize);
- stroke(0);
- fill(circleColor);
- circle(circleX, circleY, circleSize);
- }
-
- function update(x, y) {
- if( overCircle(circleX, circleY, circleSize) ) {
- circleOver = true;
- squareOver = false;
- } else if ( overSquare(squareX, squareY, squareSize) ) {
- squareOver = true;
- circleOver = false;
- } else {
- circleOver = squareOver = false;
- }
- }
-
- function overSquare(x, y, size) {
- if (mouseX >= x && mouseX <= x+size &&
- mouseY >= y && mouseY <= y+size) {
- return true;
- } else {
- return false;
- }
- }
-
- function overCircle(x, y, diameter) {
- const disX = x - mouseX;
- const disY = y - mouseY;
- if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
- return true;
- } else {
- return false;
- }
- }
-title: Rollover
-arialabel: >-
- Black square and white circle on grey background. The background turns black
- as the user’s mouth hovers over the black square and the background turns
- white as the user’s mouth hovers over the white square.
-description: >-
- Roll over the colored squares in the center of the image to change the color
- of the outside rectangle.
-
-
This example is ported from the Rollover example
-
- on the Processing website
----
-
-
-# Example
diff --git a/src/content/examples/en/21_Input/11_Storing_Input.js b/src/content/examples/en/21_Input/11_Storing_Input/code.js
similarity index 100%
rename from src/content/examples/en/21_Input/11_Storing_Input.js
rename to src/content/examples/en/21_Input/11_Storing_Input/code.js
diff --git a/src/content/examples/en/21_Input/11_Storing_Input.mdx b/src/content/examples/en/21_Input/11_Storing_Input/description.mdx
similarity index 100%
rename from src/content/examples/en/21_Input/11_Storing_Input.mdx
rename to src/content/examples/en/21_Input/11_Storing_Input/description.mdx
diff --git a/src/content/examples/en/22_Advanced_Data/00_Load_Saved_JSON.mdx b/src/content/examples/en/22_Advanced_Data/00_Load_Saved_JSON.mdx
deleted file mode 100644
index 66053e13c8..0000000000
--- a/src/content/examples/en/22_Advanced_Data/00_Load_Saved_JSON.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: >
-
-
- // Bubble class
-
- class Bubble {
- constructor(x, y, diameter, name) {
- this.x = x;
- this.y = y;
- this.diameter = diameter;
- this.radius = diameter / 2;
- this.name = name;
-
- this.over = false;
- }
-
- // Check if mouse is over the bubble
- rollover(px, py) {
- let d = dist(px, py, this.x, this.y);
- this.over = d < this.radius;
- }
-
- // Display the Bubble
- display() {
- stroke(0);
- strokeWeight(0.8);
- noFill();
- ellipse(this.x, this.y, this.diameter, this.diameter);
- if (this.over) {
- fill(0);
- textAlign(CENTER);
- text(this.name, this.x, this.y + this.radius + 20);
- }
- }
- }
-
-
- let data = {}; // Global object to hold results from the loadJSON call
-
- let bubbles = []; // Global array to hold all bubble objects
-
-
- // Put any asynchronous data loading in preload to complete before "setup" is
- run
-
- function preload() {
- data = loadJSON('assets/bubbles.json');
- }
-
-
- // Convert saved Bubble data into Bubble Objects
-
- function loadData() {
- let bubbleData = data['bubbles'];
- for (let i = 0; i < bubbleData.length; i++) {
- // Get each object in the array
- let bubble = bubbleData[i];
- // Get a position object
- let position = bubble['position'];
- // Get x,y from position
- let x = position['x'];
- let y = position['y'];
-
- // Get diameter and label
- let diameter = bubble['diameter'];
- let label = bubble['label'];
-
- // Put object in array
- bubbles.push(new Bubble(x, y, diameter, label));
- }
- }
-
-
- // Create a new Bubble each time the mouse is clicked.
-
- function mousePressed() {
- // Add diameter and label to bubble
- let diameter = random(40, 80);
- let label = 'New Label';
-
- // Append the new JSON bubble object to the array
- bubbles.push(new Bubble(mouseX, mouseY, diameter, label));
-
- // Prune Bubble Count if there are too many
- if (bubbles.length > 10) {
- bubbles.shift(); // remove first item from array
- }
- }
-
-
- function setup() {
- createCanvas(640, 360);
- loadData();
- }
-
-
- function draw() {
- background(255);
-
- // Display all bubbles
- for (let i = 0; i < bubbles.length; i++) {
- bubbles[i].display();
- bubbles[i].rollover(mouseX, mouseY);
- }
-
- // Label directions at bottom
- textAlign(LEFT);
- fill(0);
- text('Click to add bubbles.', 10, height - 10);
- }
-title: Load Saved JSON
-arialabel: 'When the user clicks on the screen, a small white circle appears with a label'
-description: >-
- Create a Bubble class, instantiate multiple bubbles using data from
-
- a JSON file, and display results on the screen.
-
- Because web browsers differ in where they save files, we do not make use of
-
- saveJSON(), unlike the Processing example.
-
- Based on Daniel Shiffman's LoadSaveJSON
- Example for Processing.
----
-
-
-# Example
diff --git a/src/content/examples/en/22_Advanced_Data/01_Load_Saved_Table.mdx b/src/content/examples/en/22_Advanced_Data/01_Load_Saved_Table.mdx
deleted file mode 100644
index 335ecff1b6..0000000000
--- a/src/content/examples/en/22_Advanced_Data/01_Load_Saved_Table.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: >
-
-
- // Bubble class
-
- class Bubble {
- constructor(x, y, diameter, name) {
- this.x = x;
- this.y = y;
- this.diameter = diameter;
- this.radius = diameter / 2;
- this.name = name;
-
- this.over = false;
- }
-
- // Check if mouse is over the bubble
- rollover(px, py) {
- let d = dist(px, py, this.x, this.y);
- this.over = d < this.radius;
- }
-
- // Display the Bubble
- display() {
- stroke(0);
- strokeWeight(0.8);
- noFill();
- ellipse(this.x, this.y, this.diameter, this.diameter);
- if (this.over) {
- fill(0);
- textAlign(CENTER);
- text(this.name, this.x, this.y + this.radius + 20);
- }
- }
- }
-
-
- let table; // Global object to hold results from the loadTable call
-
- let bubbles = []; // Global array to hold all bubble objects
-
-
- // Put any asynchronous data loading in preload to complete before "setup" is
- run
-
- function preload() {
- table = loadTable("assets/bubbles.csv", "header");
- }
-
-
- // Convert saved Bubble data into Bubble Objects
-
- function loadData() {
- const bubbleData = table.getRows();
- // The size of the array of Bubble objects is determined by the total number of rows in the CSV
- const length = table.getRowCount();
-
- for (let i = 0; i < length; i++) {
- // Get position, diameter, name,
- const x = bubbleData[i].getNum("x");
- const y = bubbleData[i].getNum("y");
- const diameter = bubbleData[i].getNum("diameter");
- const name = bubbleData[i].getString("name");
-
- // Put object in array
- bubbles.push(new Bubble(x, y, diameter, name));
- }
- }
-
-
- // Create a new Bubble each time the mouse is clicked.
-
- function mousePressed() {
- // Create a new row
- let row = table.addRow();
-
- let name = "New Bubble";
- let diameter = random(40, 80);
-
- // Set the values of that row
- row.setNum("x", mouseX);
- row.setNum("y", mouseY);
- row.setNum("diameter", diameter);
- row.setString("name", name);
-
- bubbles.push(new Bubble(mouseX, mouseY, diameter, name));
-
- // If the table has more than 10 rows
- if (table.getRowCount() > 10) {
- // Delete the oldest row
- table.removeRow(0);
- bubbles.shift();
- }
- }
-
-
- function setup() {
- createCanvas(640, 360);
- loadData();
- }
-
-
- function draw() {
- background(255);
-
- // Display all bubbles
- for (let i = 0; i < bubbles.length; i++) {
- bubbles[i].display();
- bubbles[i].rollover(mouseX, mouseY);
- }
-
- // Label directions at bottom
- textAlign(LEFT);
- fill(0);
- text("Click to add bubbles.", 10, height - 10);
- }
-title: Load Saved Table
-arialabel: Four white circles with labels
-description: >-
- Create a Bubble class, instantiate multiple bubbles using data from
-
- a csv file, and display results on the screen.
-
- Because web browsers differ in where they save files, we do not make use of
-
- saveTable(), unlike the Processing example.
-
- Based on Daniel Shiffman's LoadSaveTable
- Example for Processing.
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/00_Load_and_Play_Sound.mdx b/src/content/examples/en/33_Sound/00_Load_and_Play_Sound.mdx
deleted file mode 100644
index 4c47bbf2d4..0000000000
--- a/src/content/examples/en/33_Sound/00_Load_and_Play_Sound.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- let song;
-
- function setup() {
- song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
- createCanvas(720, 200);
- background(255, 0, 0);
- }
-
- function mousePressed() {
- if (song.isPlaying()) {
- // .isPlaying() returns a boolean
- song.stop();
- background(255, 0, 0);
- } else {
- song.play();
- background(0, 255, 0);
- }
- }
-title: Load and Play Sound
-arialabel: Red screen turns green when the user clicks on it and plays music
-description: >-
- Load sound during preload(). Play a sound when canvas is clicked.
-
-
To run this example locally, you will need
- the
-
- p5.sound library
-
- a sound file, and a running local
- server.
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/01_Preload_Sound.mdx b/src/content/examples/en/33_Sound/01_Preload_Sound.mdx
deleted file mode 100644
index ff0d71a700..0000000000
--- a/src/content/examples/en/33_Sound/01_Preload_Sound.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
-
- let song;
-
- function preload() {
- song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
- }
-
- function setup() {
- createCanvas(710, 200);
- song.loop(); // song is ready to play during setup() because it was loaded during preload
- background(0, 255, 0);
- }
-
- function mousePressed() {
- if (song.isPlaying()) {
- // .isPlaying() returns a boolean
- song.pause(); // .play() will resume from .pause() position
- background(255, 0, 0);
- } else {
- song.play();
- background(0, 255, 0);
- }
- }
-title: Preload SoundFile
-arialabel: >-
- On page load, a green screen plays music. When the user clicks on it, the
- screen turns red and stops playing music
-description: >-
- Call loadSound() during preload() to ensure that the
-
- sound is completely loaded before setup() is called. It's best to always
-
- call loadSound() in preload(), otherwise sounds won't necessarily be loaded
-
- by the time you want to play them in your sketch.
-
-
-
To run this example locally, you will need
- the
-
- p5.sound library
-
- a sound file, and a running local
- server.
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/02_soundFormats.js b/src/content/examples/en/33_Sound/02_soundFormats/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/02_soundFormats.js
rename to src/content/examples/en/33_Sound/02_soundFormats/code.js
diff --git a/src/content/examples/en/33_Sound/02_soundFormats.mdx b/src/content/examples/en/33_Sound/02_soundFormats/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/02_soundFormats.mdx
rename to src/content/examples/en/33_Sound/02_soundFormats/description.mdx
diff --git a/src/content/examples/en/33_Sound/03_Play_Mode.js b/src/content/examples/en/33_Sound/03_Play_Mode/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/03_Play_Mode.js
rename to src/content/examples/en/33_Sound/03_Play_Mode/code.js
diff --git a/src/content/examples/en/33_Sound/03_Play_Mode.mdx b/src/content/examples/en/33_Sound/03_Play_Mode/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/03_Play_Mode.mdx
rename to src/content/examples/en/33_Sound/03_Play_Mode/description.mdx
diff --git a/src/content/examples/en/33_Sound/04_Pan_SoundFile.js b/src/content/examples/en/33_Sound/04_Pan_SoundFile/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/04_Pan_SoundFile.js
rename to src/content/examples/en/33_Sound/04_Pan_SoundFile/code.js
diff --git a/src/content/examples/en/33_Sound/04_Pan_SoundFile.mdx b/src/content/examples/en/33_Sound/04_Pan_SoundFile/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/04_Pan_SoundFile.mdx
rename to src/content/examples/en/33_Sound/04_Pan_SoundFile/description.mdx
diff --git a/src/content/examples/en/33_Sound/05_Sound_Effect.js b/src/content/examples/en/33_Sound/05_Sound_Effect/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/05_Sound_Effect.js
rename to src/content/examples/en/33_Sound/05_Sound_Effect/code.js
diff --git a/src/content/examples/en/33_Sound/05_Sound_Effect.mdx b/src/content/examples/en/33_Sound/05_Sound_Effect/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/05_Sound_Effect.mdx
rename to src/content/examples/en/33_Sound/05_Sound_Effect/description.mdx
diff --git a/src/content/examples/en/33_Sound/06_Manipulate_Sound.js b/src/content/examples/en/33_Sound/06_Manipulate_Sound/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/06_Manipulate_Sound.js
rename to src/content/examples/en/33_Sound/06_Manipulate_Sound/code.js
diff --git a/src/content/examples/en/33_Sound/06_Manipulate_Sound.mdx b/src/content/examples/en/33_Sound/06_Manipulate_Sound/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/06_Manipulate_Sound.mdx
rename to src/content/examples/en/33_Sound/06_Manipulate_Sound/description.mdx
diff --git a/src/content/examples/en/33_Sound/07_Amplitude_Analysis.mdx b/src/content/examples/en/33_Sound/07_Amplitude_Analysis.mdx
deleted file mode 100644
index 29c8692d33..0000000000
--- a/src/content/examples/en/33_Sound/07_Amplitude_Analysis.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- let song, analyzer;
-
- function preload() {
- song = loadSound('assets/lucky_dragons_-_power_melody.mp3');
- }
-
- function setup() {
- createCanvas(710, 200);
- song.loop();
-
- // create a new Amplitude analyzer
- analyzer = new p5.Amplitude();
-
- // Patch the input to an volume analyzer
- analyzer.setInput(song);
- }
-
- function draw() {
- background(255);
-
- // Get the average (root mean square) amplitude
- let rms = analyzer.getLevel();
- fill(127);
- stroke(0);
-
- // Draw an ellipse with size based on volume
- ellipse(width / 2, height / 2, 10 + rms * 200, 10 + rms * 200);
- }
-title: Measuring Amplitude
-arialabel: >-
- Grey circle that increases and decreases in size based on the amplitude of the
- music playing
-description: >-
- Analyze the amplitude of sound with
-
- p5.Amplitude.
-
- Amplitude is the magnitude of vibration. Sound is vibration,
- so its amplitude is is closely related to volume / loudness.
-
- The getLevel() method takes an array
-
- of amplitude values collected over a small period of time (1024 samples).
-
- Then it returns the Root Mean Square (RMS) of these values.
-
-
- The original amplitude values for digital audio are between -1.0 and 1.0.
-
- But the RMS will always be positive, because it is squared.
-
- And, rather than use instantanous amplitude readings that are sampled at a
- rate
-
- of 44,100 times per second, the RMS is an average over time (1024 samples, in
- this case),
-
- which better represents how we hear amplitude.
-
-
-
- To run this example locally, you will need the
-
- p5.sound library
-
- a sound file, and a running local
- server.
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/08_Noise_Envelope.js b/src/content/examples/en/33_Sound/08_Noise_Envelope/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/08_Noise_Envelope.js
rename to src/content/examples/en/33_Sound/08_Noise_Envelope/code.js
diff --git a/src/content/examples/en/33_Sound/08_Noise_Envelope.mdx b/src/content/examples/en/33_Sound/08_Noise_Envelope/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/08_Noise_Envelope.mdx
rename to src/content/examples/en/33_Sound/08_Noise_Envelope/description.mdx
diff --git a/src/content/examples/en/33_Sound/09_Note_Envelope.js b/src/content/examples/en/33_Sound/09_Note_Envelope/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/09_Note_Envelope.js
rename to src/content/examples/en/33_Sound/09_Note_Envelope/code.js
diff --git a/src/content/examples/en/33_Sound/09_Note_Envelope.mdx b/src/content/examples/en/33_Sound/09_Note_Envelope/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/09_Note_Envelope.mdx
rename to src/content/examples/en/33_Sound/09_Note_Envelope/description.mdx
diff --git a/src/content/examples/en/33_Sound/10_Oscillator_Waveform.js b/src/content/examples/en/33_Sound/10_Oscillator_Waveform/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/10_Oscillator_Waveform.js
rename to src/content/examples/en/33_Sound/10_Oscillator_Waveform/code.js
diff --git a/src/content/examples/en/33_Sound/10_Oscillator_Waveform.mdx b/src/content/examples/en/33_Sound/10_Oscillator_Waveform/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/10_Oscillator_Waveform.mdx
rename to src/content/examples/en/33_Sound/10_Oscillator_Waveform/description.mdx
diff --git a/src/content/examples/en/33_Sound/11_Live_Input.js b/src/content/examples/en/33_Sound/11_Live_Input/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/11_Live_Input.js
rename to src/content/examples/en/33_Sound/11_Live_Input/code.js
diff --git a/src/content/examples/en/33_Sound/11_Live_Input.mdx b/src/content/examples/en/33_Sound/11_Live_Input/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/11_Live_Input.mdx
rename to src/content/examples/en/33_Sound/11_Live_Input/description.mdx
diff --git a/src/content/examples/en/33_Sound/12_FFT_Spectrum.js b/src/content/examples/en/33_Sound/12_FFT_Spectrum/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/12_FFT_Spectrum.js
rename to src/content/examples/en/33_Sound/12_FFT_Spectrum/code.js
diff --git a/src/content/examples/en/33_Sound/12_FFT_Spectrum.mdx b/src/content/examples/en/33_Sound/12_FFT_Spectrum/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/12_FFT_Spectrum.mdx
rename to src/content/examples/en/33_Sound/12_FFT_Spectrum/description.mdx
diff --git a/src/content/examples/en/33_Sound/13_Mic_Threshold.js b/src/content/examples/en/33_Sound/13_Mic_Threshold/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/13_Mic_Threshold.js
rename to src/content/examples/en/33_Sound/13_Mic_Threshold/code.js
diff --git a/src/content/examples/en/33_Sound/13_Mic_Threshold.mdx b/src/content/examples/en/33_Sound/13_Mic_Threshold/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/13_Mic_Threshold.mdx
rename to src/content/examples/en/33_Sound/13_Mic_Threshold/description.mdx
diff --git a/src/content/examples/en/33_Sound/14_Filter_LowPass.js b/src/content/examples/en/33_Sound/14_Filter_LowPass/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/14_Filter_LowPass.js
rename to src/content/examples/en/33_Sound/14_Filter_LowPass/code.js
diff --git a/src/content/examples/en/33_Sound/14_Filter_LowPass.mdx b/src/content/examples/en/33_Sound/14_Filter_LowPass/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/14_Filter_LowPass.mdx
rename to src/content/examples/en/33_Sound/14_Filter_LowPass/description.mdx
diff --git a/src/content/examples/en/33_Sound/15_Filter_BandPass.js b/src/content/examples/en/33_Sound/15_Filter_BandPass/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/15_Filter_BandPass.js
rename to src/content/examples/en/33_Sound/15_Filter_BandPass/code.js
diff --git a/src/content/examples/en/33_Sound/15_Filter_BandPass.mdx b/src/content/examples/en/33_Sound/15_Filter_BandPass/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/15_Filter_BandPass.mdx
rename to src/content/examples/en/33_Sound/15_Filter_BandPass/description.mdx
diff --git a/src/content/examples/en/33_Sound/16_Delay.js b/src/content/examples/en/33_Sound/16_Delay/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/16_Delay.js
rename to src/content/examples/en/33_Sound/16_Delay/code.js
diff --git a/src/content/examples/en/33_Sound/16_Delay.mdx b/src/content/examples/en/33_Sound/16_Delay/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/16_Delay.mdx
rename to src/content/examples/en/33_Sound/16_Delay/description.mdx
diff --git a/src/content/examples/en/33_Sound/17_Reverb.js b/src/content/examples/en/33_Sound/17_Reverb/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/17_Reverb.js
rename to src/content/examples/en/33_Sound/17_Reverb/code.js
diff --git a/src/content/examples/en/33_Sound/17_Reverb.mdx b/src/content/examples/en/33_Sound/17_Reverb/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/17_Reverb.mdx
rename to src/content/examples/en/33_Sound/17_Reverb/description.mdx
diff --git a/src/content/examples/en/33_Sound/18_Convolution_Reverb.mdx b/src/content/examples/en/33_Sound/18_Convolution_Reverb.mdx
deleted file mode 100644
index 94863b302c..0000000000
--- a/src/content/examples/en/33_Sound/18_Convolution_Reverb.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- let sound, env, cVerb, fft;
- let currentIR = 0;
- let rawImpulse;
-
- function preload() {
- // we have included both MP3 and OGG versions of all the impulses/sounds
- soundFormats('ogg', 'mp3');
-
- // create a p5.Convolver
- cVerb = createConvolver('assets/bx-spring');
-
- // add Impulse Responses to cVerb.impulses array, in addition to bx-spring
- cVerb.addImpulse('assets/small-plate');
- cVerb.addImpulse('assets/drum');
- cVerb.addImpulse('assets/beatbox');
- cVerb.addImpulse('assets/concrete-tunnel');
-
- // load a sound that will be processed by the p5.ConvultionReverb
- sound = loadSound('assets/Damscray_DancingTiger');
- }
-
- function setup() {
- createCanvas(710, 400);
- rawImpulse = loadSound('assets/' + cVerb.impulses[currentIR].name);
-
- // disconnect from master output...
- sound.disconnect();
- // ... and process with cVerb
- // so that we only hear the reverb
- cVerb.process(sound);
-
- fft = new p5.FFT();
- }
-
- function draw() {
- background(30);
- fill(0, 255, 40);
-
- let spectrum = fft.analyze();
-
- // Draw every value in the frequencySpectrum array as a rectangle
- noStroke();
- for (let i = 0; i < spectrum.length; i++) {
- let x = map(i, 0, spectrum.length, 0, width);
- let h = -height + map(spectrum[i], 0, 255, height, 0);
- rect(x, height, width / spectrum.length, h);
- }
- }
-
- function mousePressed() {
- // cycle through the array of cVerb.impulses
- currentIR++;
- if (currentIR >= cVerb.impulses.length) {
- currentIR = 0;
- }
- cVerb.toggleImpulse(currentIR);
-
- // play the sound through the impulse
- sound.play();
-
- // display the current Impulse Response name (the filepath)
- println('Convolution Impulse Response: ' + cVerb.impulses[currentIR].name);
-
- rawImpulse.setPath('assets/' + cVerb.impulses[currentIR].name);
- }
-
- // play the impulse (without convolution)
- function keyPressed() {
- rawImpulse.play();
- }
-title: Convolution Reverb
-arialabel: >-
- Sound with reverb plays when the user clicks the screen and lime green bars
- appear based on the amplitude of the sound
-description: >-
- The p5.Convolver can recreate the sound of actual
-
- spaces using convolution. Convolution takes an Impulse Response,
-
- (the sound of a room reverberating), and uses that to
-
- recreate the sound of that space.
Click to play a sound through
-
- convolution. Every time you click, the sound is convolved with
-
- a different Impulse Response. To hear the Impulse Response itself,
-
- press any key.
-
-
- To run this example locally, you will need the
-
- p5.sound library
-
- a sound file, and a running local server.
-
- These convolution samples are Creative Commons BY
-
-
-
- recordinghopkins
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/19_Record_Save.js b/src/content/examples/en/33_Sound/19_Record_Save/code.js
similarity index 100%
rename from src/content/examples/en/33_Sound/19_Record_Save.js
rename to src/content/examples/en/33_Sound/19_Record_Save/code.js
diff --git a/src/content/examples/en/33_Sound/19_Record_Save.mdx b/src/content/examples/en/33_Sound/19_Record_Save/description.mdx
similarity index 100%
rename from src/content/examples/en/33_Sound/19_Record_Save.mdx
rename to src/content/examples/en/33_Sound/19_Record_Save/description.mdx
diff --git a/src/content/examples/en/33_Sound/21_FreqModulation.mdx b/src/content/examples/en/33_Sound/21_FreqModulation.mdx
deleted file mode 100644
index 3444380ffe..0000000000
--- a/src/content/examples/en/33_Sound/21_FreqModulation.mdx
+++ /dev/null
@@ -1,232 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
-
- let carrier; // this is the oscillator we will hear
- let modulator; // this oscillator will modulate the frequency of the carrier
-
- let analyzer; // we'll use this visualize the waveform
-
- // the carrier frequency pre-modulation
- let carrierBaseFreq = 220;
-
- // min/max ranges for modulator
- let modMaxFreq = 112;
- let modMinFreq = 0;
- let modMaxDepth = 150;
- let modMinDepth = -150;
-
- function setup() {
- let cnv = createCanvas(800, 400);
- noFill();
-
- carrier = new p5.Oscillator('sine');
- carrier.amp(0); // set amplitude
- carrier.freq(carrierBaseFreq); // set frequency
- carrier.start(); // start oscillating
-
- // try changing the type to 'square', 'sine' or 'triangle'
- modulator = new p5.Oscillator('sawtooth');
- modulator.start();
-
- // add the modulator's output to modulate the carrier's frequency
- modulator.disconnect();
- carrier.freq(modulator);
-
- // create an FFT to analyze the audio
- analyzer = new p5.FFT();
-
- // fade carrier in/out on mouseover / touch start
- toggleAudio(cnv);
- }
-
- function draw() {
- background(30);
-
- // map mouseY to modulator freq between a maximum and minimum frequency
- let modFreq = map(mouseY, height, 0, modMinFreq, modMaxFreq);
- modulator.freq(modFreq);
-
- // change the amplitude of the modulator
- // negative amp reverses the sawtooth waveform, and sounds percussive
- //
- let modDepth = map(mouseX, 0, width, modMinDepth, modMaxDepth);
- modulator.amp(modDepth);
-
- // analyze the waveform
- waveform = analyzer.waveform();
-
- // draw the shape of the waveform
- stroke(255);
- strokeWeight(10);
- beginShape();
- for (let i = 0; i < waveform.length; i++) {
- let x = map(i, 0, waveform.length, 0, width);
- let y = map(waveform[i], -1, 1, -height / 2, height / 2);
- vertex(x, y + height / 2);
- }
- endShape();
-
- strokeWeight(1);
- // add a note about what's happening
- text('Modulator Frequency: ' + modFreq.toFixed(3) + ' Hz', 20, 20);
- text(
- 'Modulator Amplitude (Modulation Depth): ' + modDepth.toFixed(3),
- 20,
- 40
- );
- text(
- 'Carrier Frequency (pre-modulation): ' + carrierBaseFreq + ' Hz',
- width / 2,
- 20
- );
- }
-
- // helper function to toggle sound
- function toggleAudio(cnv) {
- cnv.mouseOver(function() {
- carrier.amp(1.0, 0.01);
- });
- cnv.touchStarted(function() {
- carrier.amp(1.0, 0.01);
- });
- cnv.mouseOut(function() {
- carrier.amp(0.0, 1.0);
- });
- }
-title: Frequency Modulation
-arialabel: >-
- White sound waves on black background change as the user moves their mouse.
- Labels of modulator frequency and amplitude change as the user moves their
- mouse too. There is also a label of carrier frequency at 220 Hz
-description: >-
- Frequency Modulation is a powerful form of synthesis.
-
- In its simplest form, FM involves two oscillators, referred
-
- to as the carrier and the modulator. As the modulator's waveform oscillates
-
- between some minimum and maximum amplitude value, that momentary value
-
- is added to ("modulates") the frequency of the carrier.
-
- The carrier is typically set to oscillate at an audible frequency
-
- that we perceive as a pitch—in this case, it is a sine wave oscilaltor at
- 220Hz,
-
- equivalent to an "A3" note. The carrier is connected to master output by
- default
-
- (this is the case for all p5.Oscillators).
-
- We will disconnect the modulator from master output,
-
- and instead connect to the frequency of the carrier:
-
- carrier.freq(modulator). This adds the output amplitude of the
-
- modulator to the frequency of the carrier.
-
-
-
- Modulation Depth describes how much the carrier frequency will
- modulate.
-
- It is based on the amplitude of the modulator.
-
- The modulator produces a continuous stream of amplitude values that we will
- add
-
- to the carrier frequency. An amplitude of zero means silence, so the
- modulation will
-
- have no effect. An amplitude of 1.0 scales the range of output values
-
- between +1.0 and -1.0. That is the standard range for sound that gets sent to
-
- your speakers, but in FM we are instead sending the modulator's output to the
- carrier frequency,
-
- where we'd barely notice the +1Hz / -1Hz modulation.
-
- So we will typically increase the amplitude ("depth") of the modulator to
- numbers much higher than what
-
- we might send to our speakers.
-
- Modulation Frequency is the speed of modulation. When the modulation
- frequency is lower
-
- than 20Hz, we stop hearing its frequency as pitch, and start to hear it as a
- beating rhythm.
-
- For example, try 7.5Hz at a depth of 20 to mimic the "vibrato" effect of an
- operatic vocalist.
-
- The term for this is Low Frequency Oscillator, or LFO. Modulators set to
- higher frequencies can
-
- also produce interesting effects, especially when the frequency has a harmonic
- relationship
-
- to the carrier signal. For example, listen to what happens when the
- modulator's frequency is
-
- half or twice that of the carrier. This is the basis for FM Synthesis,
- developed by John Chowning
-
- in the 1960s, which came to revolutionize synthesis in the 1980s and is often
- used to synthesize
-
- brass and bell-like sounds.
-
-
-
In this example,
-
- - MouseX controls the modulation depth (the amplitude of the modulator) from
- -150 to 150.
-
- When the modulator's amplitude is set to 0 (in the middle), notice how the
- modulation
-
- has no effect. The greater (the absolute value of) the number, the greater the
- effect.
-
- If the modulator waveform is symetrical like a square [], sine
- ~
-
- or triangle /\, the negative amplitude will be the same as
- positive amplitude.
-
- But in this example, the modulator is an asymetrical sawtooth wave, shaped
- like this /.
-
- When we multiply it by a negative number, it goes backwards like this \. To
- best
-
- observe the difference, try lowering the frequency.
-
-
-
- - MouseY controls the frequency of the modulator from 0 to 112 Hz.
-
- Try comparing modulation frequencies below the audible range (which starts
- around 20hz),
-
- and above it, especially in a harmonic relationship to the carrier frequency
- (which is 220hz, so
-
- try half that, 1/3, 1/4 etc...).
-
-
-
You will need to include the
-
- p5.sound library
-
- for this example to work in your own project.
----
-
-
-# Example
diff --git a/src/content/examples/en/33_Sound/22_AmplitudeModulation.mdx b/src/content/examples/en/33_Sound/22_AmplitudeModulation.mdx
deleted file mode 100644
index a6843edfd2..0000000000
--- a/src/content/examples/en/33_Sound/22_AmplitudeModulation.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |
-
- let carrier; // this is the oscillator we will hear
- let modulator; // this oscillator will modulate the amplitude of the carrier
- let fft; // we'll visualize the waveform
-
- function setup() {
- createCanvas(800, 400);
- noFill();
- background(30); // alpha
-
- carrier = new p5.Oscillator(); // connects to master output by default
- carrier.freq(340);
- carrier.amp(0);
- // carrier's amp is 0 by default, giving our modulator total control
-
- carrier.start();
-
- modulator = new p5.Oscillator('triangle');
- modulator.disconnect(); // disconnect the modulator from master output
- modulator.freq(5);
- modulator.amp(1);
- modulator.start();
-
- // Modulate the carrier's amplitude with the modulator
- // Optionally, we can scale the signal.
- carrier.amp(modulator.scale(-1, 1, 1, -1));
-
- // create an fft to analyze the audio
- fft = new p5.FFT();
- }
-
- function draw() {
- background(30, 30, 30, 100); // alpha
-
- // map mouseY to moodulator freq between 0 and 20hz
- let modFreq = map(mouseY, 0, height, 20, 0);
- modulator.freq(modFreq);
-
- let modAmp = map(mouseX, 0, width, 0, 1);
- modulator.amp(modAmp, 0.01); // fade time of 0.1 for smooth fading
-
- // analyze the waveform
- waveform = fft.waveform();
-
- // draw the shape of the waveform
- drawWaveform();
-
- drawText(modFreq, modAmp);
- }
-
- function drawWaveform() {
- stroke(240);
- strokeWeight(4);
- beginShape();
- for (let i = 0; i < waveform.length; i++) {
- let x = map(i, 0, waveform.length, 0, width);
- let y = map(waveform[i], -1, 1, -height / 2, height / 2);
- vertex(x, y + height / 2);
- }
- endShape();
- }
-
- function drawText(modFreq, modAmp) {
- strokeWeight(1);
- text('Modulator Frequency: ' + modFreq.toFixed(3) + ' Hz', 20, 20);
- text('Modulator Amplitude: ' + modAmp.toFixed(3), 20, 40);
- }
-title: Amplitude Modulation
-arialabel: >-
- White sound waves on black background change as the user moves their mouse.
- Labels of modulator frequency and amplitude change as the user moves their
- mouse too
-description: |-
- Amplitude Modulation involves two oscillators, referred
- to as the carrier and the modulator, where the modulator controls
- the carrier's amplitude.
-
- The carrier is typically set at an audible frequency (i.e. 440 Hz)
- and connected to master output by default. The carrier.amp is
- set to zero because we will have the modulator control its amplitude.
-
- The modulator is disconnected from master output. Instead, it is connected
- to the amplitude of the Carrier, like this: carrier.amp(modulator).
-
- In this example...
- - MouseX controls the amplitude of the modulator
- from 0 to 1. When the modulator's amplitude is set to 0, the
- amplitude modulation has no effect.
-
- - MouseY controls the frequency of the modulator from 0 to 20hz.
- This range is lower frequencies than humans can hear, and we perceive the
- modulation as a rhythm. This range can simulate effects such as Tremolo.
- Ring Modulation is a type of Amplitude Modulation where the original
- carrier signal is not present, and often involves modulation at a faster
- frequency.
-
- You will need to include the
- p5.sound library
- for this example to work in your own project.
----
-
-
-# Example
diff --git a/src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce.js b/src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce/code.js
similarity index 100%
rename from src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce.js
rename to src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce/code.js
diff --git a/src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce.mdx b/src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce/description.mdx
similarity index 100%
rename from src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce.mdx
rename to src/content/examples/en/35_Mobile/00_Acceleration_Ball_Bounce/description.mdx
diff --git a/src/content/examples/en/35_Mobile/01_Simple_Draw.js b/src/content/examples/en/35_Mobile/01_Simple_Draw/code.js
similarity index 100%
rename from src/content/examples/en/35_Mobile/01_Simple_Draw.js
rename to src/content/examples/en/35_Mobile/01_Simple_Draw/code.js
diff --git a/src/content/examples/en/35_Mobile/01_Simple_Draw.mdx b/src/content/examples/en/35_Mobile/01_Simple_Draw/description.mdx
similarity index 100%
rename from src/content/examples/en/35_Mobile/01_Simple_Draw.mdx
rename to src/content/examples/en/35_Mobile/01_Simple_Draw/description.mdx
diff --git a/src/content/examples/en/35_Mobile/02_Acceleration_Color.js b/src/content/examples/en/35_Mobile/02_Acceleration_Color/code.js
similarity index 100%
rename from src/content/examples/en/35_Mobile/02_Acceleration_Color.js
rename to src/content/examples/en/35_Mobile/02_Acceleration_Color/code.js
diff --git a/src/content/examples/en/35_Mobile/02_Acceleration_Color.mdx b/src/content/examples/en/35_Mobile/02_Acceleration_Color/description.mdx
similarity index 100%
rename from src/content/examples/en/35_Mobile/02_Acceleration_Color.mdx
rename to src/content/examples/en/35_Mobile/02_Acceleration_Color/description.mdx
diff --git a/src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce.js b/src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce/code.js
similarity index 100%
rename from src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce.js
rename to src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce/code.js
diff --git a/src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce.mdx b/src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce/description.mdx
similarity index 100%
rename from src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce.mdx
rename to src/content/examples/en/35_Mobile/03_Shake_Ball_Bounce/description.mdx
diff --git a/src/content/examples/en/35_Mobile/04_Tilted_3D_Box.js b/src/content/examples/en/35_Mobile/04_Tilted_3D_Box/code.js
similarity index 100%
rename from src/content/examples/en/35_Mobile/04_Tilted_3D_Box.js
rename to src/content/examples/en/35_Mobile/04_Tilted_3D_Box/code.js
diff --git a/src/content/examples/en/35_Mobile/04_Tilted_3D_Box.mdx b/src/content/examples/en/35_Mobile/04_Tilted_3D_Box/description.mdx
similarity index 100%
rename from src/content/examples/en/35_Mobile/04_Tilted_3D_Box.mdx
rename to src/content/examples/en/35_Mobile/04_Tilted_3D_Box/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/01_shapes.js b/src/content/examples/en/90_Hello_P5/01_shapes/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/01_shapes.js
rename to src/content/examples/en/90_Hello_P5/01_shapes/code.js
diff --git a/src/content/examples/en/90_Hello_P5/01_shapes.mdx b/src/content/examples/en/90_Hello_P5/01_shapes/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/01_shapes.mdx
rename to src/content/examples/en/90_Hello_P5/01_shapes/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/02_interactivity.js b/src/content/examples/en/90_Hello_P5/02_interactivity/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/02_interactivity.js
rename to src/content/examples/en/90_Hello_P5/02_interactivity/code.js
diff --git a/src/content/examples/en/90_Hello_P5/02_interactivity.mdx b/src/content/examples/en/90_Hello_P5/02_interactivity/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/02_interactivity.mdx
rename to src/content/examples/en/90_Hello_P5/02_interactivity/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/03_interactivity.js b/src/content/examples/en/90_Hello_P5/03_interactivity/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/03_interactivity.js
rename to src/content/examples/en/90_Hello_P5/03_interactivity/code.js
diff --git a/src/content/examples/en/90_Hello_P5/03_interactivity.mdx b/src/content/examples/en/90_Hello_P5/03_interactivity/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/03_interactivity.mdx
rename to src/content/examples/en/90_Hello_P5/03_interactivity/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/04_animate.js b/src/content/examples/en/90_Hello_P5/04_animate/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/04_animate.js
rename to src/content/examples/en/90_Hello_P5/04_animate/code.js
diff --git a/src/content/examples/en/90_Hello_P5/04_animate.mdx b/src/content/examples/en/90_Hello_P5/04_animate/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/04_animate.mdx
rename to src/content/examples/en/90_Hello_P5/04_animate/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/04_flocking.mdx b/src/content/examples/en/90_Hello_P5/04_flocking.mdx
deleted file mode 100644
index 95c9519cba..0000000000
--- a/src/content/examples/en/90_Hello_P5/04_flocking.mdx
+++ /dev/null
@@ -1,198 +0,0 @@
----
-layout: '@layouts/reference/ExampleLayout.astro'
-code: |+
-
- let boids = [];
-
- function setup() {
- createCanvas(720, 400);
-
- // Add an initial set of boids into the system
- for (let i = 0; i < 100; i++) {
- boids[i] = new Boid(random(width), random(height));
- }
- }
-
- function draw() {
- background(51);
- // Run all the boids
- for (let i = 0; i < boids.length; i++) {
- boids[i].run(boids);
- }
- }
-
- // Boid class
- // Methods for Separation, Cohesion, Alignment added
- class Boid {
- constructor(x, y) {
- this.acceleration = createVector(0, 0);
- this.velocity = p5.Vector.random2D();
- this.position = createVector(x, y);
- this.r = 3.0;
- this.maxspeed = 3; // Maximum speed
- this.maxforce = 0.05; // Maximum steering force
- }
-
- run(boids) {
- this.flock(boids);
- this.update();
- this.borders();
- this.render();
- }
-
- // Forces go into acceleration
- applyForce(force) {
- this.acceleration.add(force);
- }
-
- // We accumulate a new acceleration each time based on three rules
- flock(boids) {
- let sep = this.separate(boids); // Separation
- let ali = this.align(boids); // Alignment
- let coh = this.cohesion(boids); // Cohesion
- // Arbitrarily weight these forces
- sep.mult(2.5);
- ali.mult(1.0);
- coh.mult(1.0);
- // Add the force vectors to acceleration
- this.applyForce(sep);
- this.applyForce(ali);
- this.applyForce(coh);
- }
-
- // Method to update location
- update() {
- // Update velocity
- this.velocity.add(this.acceleration);
- // Limit speed
- this.velocity.limit(this.maxspeed);
- this.position.add(this.velocity);
- // Reset acceleration to 0 each cycle
- this.acceleration.mult(0);
- }
-
- // A method that calculates and applies a steering force towards a target
- // STEER = DESIRED MINUS VELOCITY
- seek(target) {
- let desired = p5.Vector.sub(target, this.position); // A vector pointing from the location to the target
- // Normalize desired and scale to maximum speed
- desired.normalize();
- desired.mult(this.maxspeed);
- // Steering = Desired minus Velocity
- let steer = p5.Vector.sub(desired, this.velocity);
- steer.limit(this.maxforce); // Limit to maximum steering force
- return steer;
- }
-
- // Draw boid as a circle
- render() {
- fill(127, 127);
- stroke(200);
- ellipse(this.position.x, this.position.y, 16, 16);
- }
-
- // Wraparound
- borders() {
- if (this.position.x < -this.r) this.position.x = width + this.r;
- if (this.position.y < -this.r) this.position.y = height + this.r;
- if (this.position.x > width + this.r) this.position.x = -this.r;
- if (this.position.y > height + this.r) this.position.y = -this.r;
- }
-
- // Separation
- // Method checks for nearby boids and steers away
- separate(boids) {
- let desiredseparation = 25.0;
- let steer = createVector(0, 0);
- let count = 0;
- // For every boid in the system, check if it's too close
- for (let i = 0; i < boids.length; i++) {
- let d = p5.Vector.dist(this.position, boids[i].position);
- // If the distance is greater than 0 and less than an arbitrary amount (0 when you are yourself)
- if ((d > 0) && (d < desiredseparation)) {
- // Calculate vector pointing away from neighbor
- let diff = p5.Vector.sub(this.position, boids[i].position);
- diff.normalize();
- diff.div(d); // Weight by distance
- steer.add(diff);
- count++; // Keep track of how many
- }
- }
- // Average -- divide by how many
- if (count > 0) {
- steer.div(count);
- }
-
- // As long as the vector is greater than 0
- if (steer.mag() > 0) {
- // Implement Reynolds: Steering = Desired - Velocity
- steer.normalize();
- steer.mult(this.maxspeed);
- steer.sub(this.velocity);
- steer.limit(this.maxforce);
- }
- return steer;
- }
-
- // Alignment
- // For every nearby boid in the system, calculate the average velocity
- align(boids) {
- let neighbordist = 50;
- let sum = createVector(0, 0);
- let count = 0;
- for (let i = 0; i < boids.length; i++) {
- let d = p5.Vector.dist(this.position, boids[i].position);
- if ((d > 0) && (d < neighbordist)) {
- sum.add(boids[i].velocity);
- count++;
- }
- }
- if (count > 0) {
- sum.div(count);
- sum.normalize();
- sum.mult(this.maxspeed);
- let steer = p5.Vector.sub(sum, this.velocity);
- steer.limit(this.maxforce);
- return steer;
- } else {
- return createVector(0, 0);
- }
- }
-
- // Cohesion
- // For the average location (i.e. center) of all nearby boids, calculate steering vector towards that location
- cohesion(boids) {
- let neighbordist = 50;
- let sum = createVector(0, 0); // Start with empty vector to accumulate all locations
- let count = 0;
- for (let i = 0; i < boids.length; i++) {
- let d = p5.Vector.dist(this.position, boids[i].position);
- if ((d > 0) && (d < neighbordist)) {
- sum.add(boids[i].position); // Add location
- count++;
- }
- }
- if (count > 0) {
- sum.div(count);
- return this.seek(sum); // Steer towards the location
- } else {
- return createVector(0, 0);
- }
- }
- }
-
-title: Flocking
-arialabel: >-
- Light grey circles on a dark grey background that travel across the screen in
- flocks or groups
-description: >-
- Demonstration of Craig Reynolds'
- "Flocking" behavior.
-
- (Rules: Cohesion, Separation, Alignment.)
-
- From natureofcode.com.
----
-
-
-# Example
diff --git a/src/content/examples/en/90_Hello_P5/05_weather.js b/src/content/examples/en/90_Hello_P5/05_weather/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/05_weather.js
rename to src/content/examples/en/90_Hello_P5/05_weather/code.js
diff --git a/src/content/examples/en/90_Hello_P5/05_weather.mdx b/src/content/examples/en/90_Hello_P5/05_weather/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/05_weather.mdx
rename to src/content/examples/en/90_Hello_P5/05_weather/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/06_drawing.js b/src/content/examples/en/90_Hello_P5/06_drawing/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/06_drawing.js
rename to src/content/examples/en/90_Hello_P5/06_drawing/code.js
diff --git a/src/content/examples/en/90_Hello_P5/06_drawing.mdx b/src/content/examples/en/90_Hello_P5/06_drawing/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/06_drawing.mdx
rename to src/content/examples/en/90_Hello_P5/06_drawing/description.mdx
diff --git a/src/content/examples/en/90_Hello_P5/07_song.js b/src/content/examples/en/90_Hello_P5/07_song/code.js
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/07_song.js
rename to src/content/examples/en/90_Hello_P5/07_song/code.js
diff --git a/src/content/examples/en/90_Hello_P5/07_song.mdx b/src/content/examples/en/90_Hello_P5/07_song/description.mdx
similarity index 100%
rename from src/content/examples/en/90_Hello_P5/07_song.mdx
rename to src/content/examples/en/90_Hello_P5/07_song/description.mdx