Merge pull request #3475 from ameybhavsar24/master

[p5.js/en] Added new library p5.js docs and some edits in html docs

2 files changed, 56 insertions, 1 deletions

diff --git a/html.html.markdown b/html.html.markdown
index 4d225aca..f01f139c 100644
--- a/html.html.markdown
+++ b/html.html.markdown
@@ -167,7 +167,7 @@ useful tips.
 
 HTML is written in files ending with `.html` or `.htm`. The mime type is
 `text/html`.
-
+**HTML is NOT a programming language**
 ## To Learn More
 
 * [wikipedia](https://en.wikipedia.org/wiki/HTML)
diff --git a/p5.html.markdown b/p5.html.markdown
new file mode 100644
index 00000000..61fe0705
--- /dev/null
+++ b/p5.html.markdown
@@ -0,0 +1,55 @@
+---
+category: tool
+tool: p5
+contributors:
+    - ["Amey Bhavsar", "https://github.com/ameybhavsar24"]
+filename: p5.js
+---
+p5.js is a JavaScript library that starts with the original goal of [Processing](http://processing.org"), to make coding accessible for artists, designers, educators, and beginners, and reinterprets this for today's web.
+Since p5 is a JavaScript library, you should learn [Javascript](https://learnxinyminutes.com/docs/javascript/) first.
+```js
+///////////////////////////////////
+// p5.js has two important functions to work with.
+
+function setup() {
+// the setup function gets executed just once when the window is loaded
+}
+function draw() {
+// the draw function gets called every single frame. This means that for a frameRate(30) it would get called 30 times per second.
+}
+
+// the following code explains all features
+
+function setup() {
+
+createCanvas(640, 480); // creates a new canvas element with 640px as width as 480px as height
+background(128); // changes the background color of the canvas, can accept rgb values like background(100,200,20) else grayscale values like background(0) = black or background(255) = white
+
+}
+
+function draw() {
+
+ellipse(10,10, 50,50); // creates a ellipse at the 10px from the left and 10px from the top with width adn height as 50 each, so its basically a cirle.
+//remember in p5.js the origin is at the top-left corner of the canvas
+
+  if (mouseIsPressed) { 
+  // mouseIsPressed is a boolean variable that changes to true if the mouse buttton is pressed down at that instant
+  
+    fill(0); // fill refers to the innner color or filling color of whatever shape you are going to draw next
+    
+  } else {
+  
+    fill(255); // you can give in rgb values like fill(72, 240, 80) to get colors, else a single values determines the grayscale where fill(255) stands for #FFF(white) and fill(0) stands for #000(black)
+    
+  }
+  
+  ellipse(mouseX, mouseY, 80, 80);
+  // mouseX is the x-coordinate of the mouse's current position and mouseY is the y-coordinate of the mouse's current position
+  
+  // the above code creates a circle wherever mouse's current position and fills it either black or white based on the mouseIsPressed
+}
+
+```
+## Further Reading
+* [p5.js | get started](http://p5js.org/get-started/) The official documentation
+* [Code! Programming for Beginners with p5.js - YouTube](https://www.youtube.com/watch?v=yPWkPOfnGsw&vl=en) Introduction and Coding challenges using Processing and p5.js by Coding Train