Merge branch 'master' of github.com:processing/p5.js-website into showcase

Author: lmccart

contributor_docs/Adding_examples.md

@@ -54,7 +54,7 @@ Examples help demonstrate different programming concepts and functionality of th
 4. [Grunt](https://gruntjs.com/) should now be installed, and you can use it to build the website by navigating to the top level directory and typing:
 
     ```bash
-    grunt server
+    npm run watch
     ```
 
 5. A local build of the p5js.org site should open in your web browser and you can navigate to the examples page to see your changes.

src/data/examples/en/09_Simulate/19_Bubblesort.js

@@ -0,0 +1,67 @@
+/*
+ * @name Bubble Sort
+ * @description Sorts the randomly distributed bars 
+ * according to their height in ascending order
+ * while simulating the whole sorting process.
+ * Took references from Coding Challenge by The Coding Train.
+ */
+
+let values = [];
+let i = 0;
+let j = 0;
+
+// The statements in the setup() function
+// execute once when the program begins
+// The array is filled with random values in setup() function.
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/8;i++){
+    values.push(random(height));
+  }
+}
+
+// The statements in draw() function are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(220);
+  bubbleSort();
+  simulateSorting();
+}
+
+// The bubbleSort() function sorts taking 8 elements of the array
+// per frame. The algorithm behind this function is 
+// bubble sort.
+function bubbleSort() {
+  for(let k = 0;k<8;k++){
+    if(i<values.length){
+      let temp = values[j];
+      if(values[j] > values[j+1]){
+        values[j] = values[j+1];
+        values[j+1] = temp;
+      }
+      j++;
+      
+      if(j>=values.length-i-1){
+        j = 0;
+        i++;
+      }
+    }
+    else{
+      noLoop();
+    }
+  }
+}
+
+// The simulateSorting() function helps in animating
+// the whole bubble sort algorithm
+// by drawing the rectangles using values
+// in the array as the length of the rectangle.
+function simulateSorting(){
+  for(let i = 0;i<values.length;i++){
+    stroke(100, 143, 143);
+     fill(50);
+     rect(i*8 , height, 8, -values[i],20);
+   }
+}

src/data/examples/en/09_Simulate/20_SteepingFeet.js

@@ -0,0 +1,80 @@
+/*
+ * @name Stepping Feet Illusion
+ * @description Stepping feet illusion is a very famous psychological experiment
+ * Both the bricks will appear to move at different speed
+ * even though they are moving at the same speed.
+ * Click the mouse inside Canvas to confirm that
+ * they are moving at the same speed.
+ * Contributed by Sagar Arora.
+ */
+
+// this class describes the structure
+// and movents of the brick
+class Brick{
+  constructor(bc, y){
+    this.brickColor = bc;
+    this.yPos = y;
+    this.xPos = 0;
+  }
+
+  // this function creates the brick
+  createBrick(){
+    fill(this.brickColor);
+    rect(this.xPos, this.yPos, 100, 50);
+  }
+
+  // this function sets the speed
+  // of movement of the brick to 1
+  setSpeed(){
+    this.xSpeed = 1;
+  }
+
+  // this function set the bricks in motion
+  moveBrick(){
+    this.xPos+=this.xSpeed;
+    if(this.xPos+100 >= width || this.xPos <= 0){
+      this.xSpeed*=-1;
+    }
+  }
+}
+
+function setup() {
+  createCanvas(720, 400);
+  createP("Keep the mouse clicked").style('color','#ffffff');
+  createP("to check whether the bricks").style('color','#ffffff');
+  createP("are moving at same speed or not").style('color','#ffffff');
+}
+
+// creating two bricks of 
+// colors white and black
+let brick1 = new Brick("white",100);
+let brick2 = new Brick("black",250);
+
+//
+brick1.setSpeed();
+brick2.setSpeed();
+
+function draw () {
+  background(0);
+  if(mouseIsPressed){
+    background(50);
+  }
+  brick1.createBrick();
+  brick1.moveBrick();
+  if(!mouseIsPressed){
+    createBars();
+  }
+  brick2.createBrick();
+  brick2.moveBrick();
+}
+
+// this function creates the black and
+// white bars across the screen
+function createBars() {
+  let len = 12;
+  for(let i = 0;i<width/len;i++){
+    fill("white");
+    if(i%2 == 0)
+    rect(i*len,height,len,-height);
+  }
+}

src/data/examples/es/09_Simulate/19_Bubblesort.js

@@ -0,0 +1,67 @@
+/*
+ * @name Bubble Sort
+ * @description Sorts the randomly distributed bars 
+ * according to their height in ascending order
+ * while simulating the whole sorting process.
+ * Took references from Coding Challenge by The Coding Train.
+ */
+
+let values = [];
+let i = 0;
+let j = 0;
+
+// The statements in the setup() function
+// execute once when the program begins
+// The array is filled with random values in setup() function.
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/8;i++){
+    values.push(random(height));
+  }
+}
+
+// The statements in draw() function are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(220);
+  bubbleSort();
+  simulateSorting();
+}
+
+// The bubbleSort() function sorts taking 8 elements of the array
+// per frame. The algorithm behind this function is 
+// bubble sort.
+function bubbleSort() {
+  for(let k = 0;k<8;k++){
+    if(i<values.length){
+      let temp = values[j];
+      if(values[j] > values[j+1]){
+        values[j] = values[j+1];
+        values[j+1] = temp;
+      }
+      j++;
+      
+      if(j>=values.length-i-1){
+        j = 0;
+        i++;
+      }
+    }
+    else{
+      noLoop();
+    }
+  }
+}
+
+// The simulateSorting() function helps in animating
+// the whole bubble sort algorithm
+// by drawing the rectangles using values
+// in the array as the length of the rectangle.
+function simulateSorting(){
+  for(let i = 0;i<values.length;i++){
+    stroke(100, 143, 143);
+     fill(50);
+     rect(i*8 , height, 8, -values[i],20);
+   }
+}

src/data/examples/es/09_Simulate/20_SteepingFeet.js

@@ -0,0 +1,80 @@
+/*
+ * @name Stepping Feet Illusion
+ * @description Stepping feet illusion is a very famous psychological experiment
+ * Both the bricks will appear to move at different speed
+ * even though they are moving at the same speed.
+ * Click the mouse inside Canvas to confirm that
+ * they are moving at the same speed.
+ * Contributed by Sagar Arora.
+ */
+
+// this class describes the structure
+// and movents of the brick
+class Brick{
+  constructor(bc, y){
+    this.brickColor = bc;
+    this.yPos = y;
+    this.xPos = 0;
+  }
+
+  // this function creates the brick
+  createBrick(){
+    fill(this.brickColor);
+    rect(this.xPos, this.yPos, 100, 50);
+  }
+
+  // this function sets the speed
+  // of movement of the brick to 1
+  setSpeed(){
+    this.xSpeed = 1;
+  }
+
+  // this function set the bricks in motion
+  moveBrick(){
+    this.xPos+=this.xSpeed;
+    if(this.xPos+100 >= width || this.xPos <= 0){
+      this.xSpeed*=-1;
+    }
+  }
+}
+
+function setup() {
+  createCanvas(720, 400);
+  createP("Keep the mouse clicked").style('color','#ffffff');
+  createP("to check whether the bricks").style('color','#ffffff');
+  createP("are moving at same speed or not").style('color','#ffffff');
+}
+
+// creating two bricks of 
+// colors white and black
+let brick1 = new Brick("white",100);
+let brick2 = new Brick("black",250);
+
+//
+brick1.setSpeed();
+brick2.setSpeed();
+
+function draw () {
+  background(0);
+  if(mouseIsPressed){
+    background(50);
+  }
+  brick1.createBrick();
+  brick1.moveBrick();
+  if(!mouseIsPressed){
+    createBars();
+  }
+  brick2.createBrick();
+  brick2.moveBrick();
+}
+
+// this function creates the black and
+// white bars across the screen
+function createBars() {
+  let len = 12;
+  for(let i = 0;i<width/len;i++){
+    fill("white");
+    if(i%2 == 0)
+    rect(i*len,height,len,-height);
+  }
+}

src/data/examples/zh-Hans/09_Simulate/19_Bubblesort.js

@@ -0,0 +1,67 @@
+/*
+ * @name Bubble Sort
+ * @description Sorts the randomly distributed bars 
+ * according to their height in ascending order
+ * while simulating the whole sorting process.
+ * Took references from Coding Challenge by The Coding Train.
+ */
+
+let values = [];
+let i = 0;
+let j = 0;
+
+// The statements in the setup() function
+// execute once when the program begins
+// The array is filled with random values in setup() function.
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/8;i++){
+    values.push(random(height));
+  }
+}
+
+// The statements in draw() function are executed until the
+// program is stopped. Each statement is executed in
+// sequence and after the last line is read, the first
+// line is executed again.
+function draw() {
+  background(220);
+  bubbleSort();
+  simulateSorting();
+}
+
+// The bubbleSort() function sorts taking 8 elements of the array
+// per frame. The algorithm behind this function is 
+// bubble sort.
+function bubbleSort() {
+  for(let k = 0;k<8;k++){
+    if(i<values.length){
+      let temp = values[j];
+      if(values[j] > values[j+1]){
+        values[j] = values[j+1];
+        values[j+1] = temp;
+      }
+      j++;
+      
+      if(j>=values.length-i-1){
+        j = 0;
+        i++;
+      }
+    }
+    else{
+      noLoop();
+    }
+  }
+}
+
+// The simulateSorting() function helps in animating
+// the whole bubble sort algorithm
+// by drawing the rectangles using values
+// in the array as the length of the rectangle.
+function simulateSorting(){
+  for(let i = 0;i<values.length;i++){
+    stroke(100, 143, 143);
+     fill(50);
+     rect(i*8 , height, 8, -values[i],20);
+   }
+}