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

Author: lmccart

src/assets/css/main.css

@@ -306,7 +306,7 @@
 }
 
 #reference-page ul {
-  margin-top: 0.5em;
+  margin-top: 0;
 }
 
 div.reference-group {

src/data/examples/en/08_Math/19_parametricEquation.js

@@ -0,0 +1,44 @@
+/*
+ * @name Parametric Equations
+ * @description A parametric equation is where x and y
+ * coordinates are both written in terms of another letter. This is
+ * called a parameter and is usually given in the letter t or θ.
+ * The inspiration was taken from the YouTube channel of Alexander Miller.
+ */
+
+function setup(){
+  createCanvas(720,400);
+}
+
+// the parameter at which x and y depends is usually taken as either t or symbol of theta
+let t = 0;
+function draw(){
+  background('#fff');
+  translate(width/2,height/2);
+  stroke('#0f0f0f');
+  strokeWeight(1.5);
+  //loop for adding 100 lines
+  for(let i = 0;i<100;i++){
+    line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
+  }
+  t+=0.15;
+}
+// function to change initial x co-ordinate of the line
+function x1(t){
+  return sin(t/10)*125+sin(t/20)*125+sin(t/30)*125;
+}
+
+// function to change initial y co-ordinate of the line
+function y1(t){
+  return cos(t/10)*125+cos(t/20)*125+cos(t/30)*125;
+}
+
+// function to change final x co-ordinate of the line
+function x2(t){
+  return sin(t/15)*125+sin(t/25)*125+sin(t/35)*125;
+}
+
+// function to change final y co-ordinate of the line
+function y2(t){
+  return cos(t/15)*125+cos(t/25)*125+cos(t/35)*125;
+}

src/data/examples/en/09_Simulate/21_Particle.js

@@ -0,0 +1,69 @@
+/*
+ * @name Particles
+ * @description There is a light-weight JavaScript library named
+ * particle.js which creates a very pleasing particle system.
+ * This is an attempt to recreate that particle system using p5.js.
+ * Inspired by Particle.js, contributed by Sagar Arora.
+ */
+
+
+// this class describes the properties of a single particle.
+class Particle {
+// setting the co-ordinates, radius and the
+// speed of a particle in both the co-ordinates axes.
+  constructor(){
+    this.x = random(0,width);
+    this.y = random(0,height);
+    this.r = random(1,8);
+    this.xSpeed = random(-2,2);
+    this.ySpeed = random(-1,1.5);
+  }
+
+// creation of a particle.
+  createParticle() {
+    noStroke();
+    fill('rgba(200,169,169,0.5)');
+    circle(this.x,this.y,this.r);
+  }
+
+// setting the particle in motion.
+  moveParticle() {
+    if(this.x < 0 || this.x > width)
+      this.xSpeed*=-1;
+    if(this.y < 0 || this.y > height)
+      this.ySpeed*=-1;
+    this.x+=this.xSpeed;
+    this.y+=this.ySpeed;
+  }
+
+// this function creates the connections(lines)
+// between particles which are less than a certain distance apart
+  joinParticles(paraticles) {
+    particles.forEach(element =>{
+      let dis = dist(this.x,this.y,element.x,element.y);
+      if(dis<85) {
+        stroke('rgba(255,255,255,0.04)');
+        line(this.x,this.y,element.x,element.y);
+      }
+    });
+  }
+}
+
+// an array to add multiple particles
+let particles = [];
+
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/10;i++){
+    particles.push(new Particle());
+  }
+}
+
+function draw() {
+  background('#0f0f0f');
+  for(let i = 0;i<particles.length;i++) {
+    particles[i].createParticle();
+    particles[i].moveParticle();
+    particles[i].joinParticles(particles.slice(i));
+  }
+}

src/data/examples/es/08_Math/19_parametricEquation.js

@@ -0,0 +1,44 @@
+/*
+ * @name Parametric Equations
+ * @description A parametric equation is where x and y
+ * coordinates are both written in terms of another letter. This is
+ * called a parameter and is usually given in the letter t or θ.
+ * The inspiration was taken from the YouTube channel of Alexander Miller.
+ */
+
+function setup(){
+  createCanvas(720,400);
+}
+
+// the parameter at which x and y depends is usually taken as either t or symbol of theta
+let t = 0;
+function draw(){
+  background('#fff');
+  translate(width/2,height/2);
+  stroke('#0f0f0f');
+  strokeWeight(1.5);
+  //loop for adding 100 lines
+  for(let i = 0;i<100;i++){
+    line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
+  }
+  t+=0.15;
+}
+// function to change initial x co-ordinate of the line
+function x1(t){
+  return sin(t/10)*125+sin(t/20)*125+sin(t/30)*125;
+}
+
+// function to change initial y co-ordinate of the line
+function y1(t){
+  return cos(t/10)*125+cos(t/20)*125+cos(t/30)*125;
+}
+
+// function to change final x co-ordinate of the line
+function x2(t){
+  return sin(t/15)*125+sin(t/25)*125+sin(t/35)*125;
+}
+
+// function to change final y co-ordinate of the line
+function y2(t){
+  return cos(t/15)*125+cos(t/25)*125+cos(t/35)*125;
+}

src/data/examples/es/09_Simulate/21_Particle.js

@@ -0,0 +1,69 @@
+/*
+ * @name Particles
+ * @description There is a light-weight JavaScript library named
+ * particle.js which creates a very pleasing particle system.
+ * This is an attempt to recreate that particle system using p5.js.
+ * Inspired by Particle.js, contributed by Sagar Arora.
+ */
+
+
+// this class describes the properties of a single particle.
+class Particle {
+// setting the co-ordinates, radius and the
+// speed of a particle in both the co-ordinates axes.
+  constructor(){
+    this.x = random(0,width);
+    this.y = random(0,height);
+    this.r = random(1,8);
+    this.xSpeed = random(-2,2);
+    this.ySpeed = random(-1,1.5);
+  }
+
+// creation of a particle.
+  createParticle() {
+    noStroke();
+    fill('rgba(200,169,169,0.5)');
+    circle(this.x,this.y,this.r);
+  }
+
+// setting the particle in motion.
+  moveParticle() {
+    if(this.x < 0 || this.x > width)
+      this.xSpeed*=-1;
+    if(this.y < 0 || this.y > height)
+      this.ySpeed*=-1;
+    this.x+=this.xSpeed;
+    this.y+=this.ySpeed;
+  }
+
+// this function creates the connections(lines)
+// between particles which are less than a certain distance apart
+  joinParticles(paraticles) {
+    particles.forEach(element =>{
+      let dis = dist(this.x,this.y,element.x,element.y);
+      if(dis<85) {
+        stroke('rgba(255,255,255,0.04)');
+        line(this.x,this.y,element.x,element.y);
+      }
+    });
+  }
+}
+
+// an array to add multiple particles
+let particles = [];
+
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/10;i++){
+    particles.push(new Particle());
+  }
+}
+
+function draw() {
+  background('#0f0f0f');
+  for(let i = 0;i<particles.length;i++) {
+    particles[i].createParticle();
+    particles[i].moveParticle();
+    particles[i].joinParticles(particles.slice(i));
+  }
+}

src/data/examples/zh-Hans/08_Math/19_parametricEquation.js

@@ -0,0 +1,44 @@
+/*
+ * @name Parametric Equations
+ * @description A parametric equation is where x and y
+ * coordinates are both written in terms of another letter. This is
+ * called a parameter and is usually given in the letter t or θ.
+ * The inspiration was taken from the YouTube channel of Alexander Miller.
+ */
+
+function setup(){
+  createCanvas(720,400);
+}
+
+// the parameter at which x and y depends is usually taken as either t or symbol of theta
+let t = 0;
+function draw(){
+  background('#fff');
+  translate(width/2,height/2);
+  stroke('#0f0f0f');
+  strokeWeight(1.5);
+  //loop for adding 100 lines
+  for(let i = 0;i<100;i++){
+    line(x1(t+i),y1(t+i),x2(t+i)+20,y2(t+i)+20);
+  }
+  t+=0.15;
+}
+// function to change initial x co-ordinate of the line
+function x1(t){
+  return sin(t/10)*125+sin(t/20)*125+sin(t/30)*125;
+}
+
+// function to change initial y co-ordinate of the line
+function y1(t){
+  return cos(t/10)*125+cos(t/20)*125+cos(t/30)*125;
+}
+
+// function to change final x co-ordinate of the line
+function x2(t){
+  return sin(t/15)*125+sin(t/25)*125+sin(t/35)*125;
+}
+
+// function to change final y co-ordinate of the line
+function y2(t){
+  return cos(t/15)*125+cos(t/25)*125+cos(t/35)*125;
+}

src/data/examples/zh-Hans/09_Simulate/21_Particle.js

@@ -0,0 +1,69 @@
+/*
+ * @name Particles
+ * @description There is a light-weight JavaScript library named
+ * particle.js which creates a very pleasing particle system.
+ * This is an attempt to recreate that particle system using p5.js.
+ * Inspired by Particle.js, contributed by Sagar Arora.
+ */
+
+
+// this class describes the properties of a single particle.
+class Particle {
+// setting the co-ordinates, radius and the
+// speed of a particle in both the co-ordinates axes.
+  constructor(){
+    this.x = random(0,width);
+    this.y = random(0,height);
+    this.r = random(1,8);
+    this.xSpeed = random(-2,2);
+    this.ySpeed = random(-1,1.5);
+  }
+
+// creation of a particle.
+  createParticle() {
+    noStroke();
+    fill('rgba(200,169,169,0.5)');
+    circle(this.x,this.y,this.r);
+  }
+
+// setting the particle in motion.
+  moveParticle() {
+    if(this.x < 0 || this.x > width)
+      this.xSpeed*=-1;
+    if(this.y < 0 || this.y > height)
+      this.ySpeed*=-1;
+    this.x+=this.xSpeed;
+    this.y+=this.ySpeed;
+  }
+
+// this function creates the connections(lines)
+// between particles which are less than a certain distance apart
+  joinParticles(paraticles) {
+    particles.forEach(element =>{
+      let dis = dist(this.x,this.y,element.x,element.y);
+      if(dis<85) {
+        stroke('rgba(255,255,255,0.04)');
+        line(this.x,this.y,element.x,element.y);
+      }
+    });
+  }
+}
+
+// an array to add multiple particles
+let particles = [];
+
+function setup() {
+  createCanvas(720, 400);
+  for(let i = 0;i<width/10;i++){
+    particles.push(new Particle());
+  }
+}
+
+function draw() {
+  background('#0f0f0f');
+  for(let i = 0;i<particles.length;i++) {
+    particles[i].createParticle();
+    particles[i].moveParticle();
+    particles[i].joinParticles(particles.slice(i));
+  }
+}

src/templates/pages/reference/index.hbs

@@ -4,6 +4,7 @@ slug: reference/
 ---
 
 <div id="reference-page">
+  
   {{> sidebar}}
 
   <div class="column-span">