From e1783b6b7549a859e11a944ef88a31aefbfc7bc0 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Fri, 15 Feb 2019 15:30:29 +0530 Subject: Create p5.html.markdown --- p5.html.markdown | 1 + 1 file changed, 1 insertion(+) create mode 100644 p5.html.markdown (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown new file mode 100644 index 00000000..fa53dce2 --- /dev/null +++ b/p5.html.markdown @@ -0,0 +1 @@ +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. -- cgit v1.2.3 From ffe5af18c3a1d594cae3050ed7d41cff55691a38 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Fri, 15 Feb 2019 16:03:38 +0530 Subject: initial documentation of very basic start --- p5.html.markdown | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown index fa53dce2..61fe0705 100644 --- a/p5.html.markdown +++ b/p5.html.markdown @@ -1 +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 -- cgit v1.2.3 From 417e4deb7cc7e7841fd4866610fe4aefa1643989 Mon Sep 17 00:00:00 2001 From: Amey Bhavsar Date: Sun, 17 Feb 2019 16:51:39 +0530 Subject: Update p5.html.markdown --- p5.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown index 61fe0705..2c6da4c6 100644 --- a/p5.html.markdown +++ b/p5.html.markdown @@ -1,6 +1,7 @@ --- category: tool tool: p5 +name: p5 contributors: - ["Amey Bhavsar", "https://github.com/ameybhavsar24"] filename: p5.js -- cgit v1.2.3 From 49448703de12d4bb1e870f2bb223c29e2f100bad Mon Sep 17 00:00:00 2001 From: Divay Prakash Date: Sun, 24 Feb 2019 23:31:20 +0530 Subject: Update p5.html.markdown --- p5.html.markdown | 1 - 1 file changed, 1 deletion(-) (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown index 2c6da4c6..61fe0705 100644 --- a/p5.html.markdown +++ b/p5.html.markdown @@ -1,7 +1,6 @@ --- category: tool tool: p5 -name: p5 contributors: - ["Amey Bhavsar", "https://github.com/ameybhavsar24"] filename: p5.js -- cgit v1.2.3 From dafe447f0f30a03c8f8e2453715fa1abb873a73b Mon Sep 17 00:00:00 2001 From: Claudio Busatto Date: Tue, 26 Mar 2019 13:12:59 +0100 Subject: Fix the layout problem on the Webpage --- p5.html.markdown | 53 +++++++++++++++++++++++++---------------------------- 1 file changed, 25 insertions(+), 28 deletions(-) (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown index 61fe0705..3431f17d 100644 --- a/p5.html.markdown +++ b/p5.html.markdown @@ -2,54 +2,51 @@ category: tool tool: p5 contributors: - - ["Amey Bhavsar", "https://github.com/ameybhavsar24"] + - ['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 + // 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 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 - + 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 circle. + //remember in p5.js the origin is at the top-left corner of the canvas -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 -} + 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 + +- [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 -- cgit v1.2.3 From 7ec1bcc95d0d45c7d9e18633bc4108dc736d68bb Mon Sep 17 00:00:00 2001 From: Claudio Busatto Date: Tue, 26 Mar 2019 13:17:08 +0100 Subject: Include myself as a contributor --- p5.html.markdown | 1 + 1 file changed, 1 insertion(+) (limited to 'p5.html.markdown') diff --git a/p5.html.markdown b/p5.html.markdown index 3431f17d..be22d3e5 100644 --- a/p5.html.markdown +++ b/p5.html.markdown @@ -3,6 +3,7 @@ category: tool tool: p5 contributors: - ['Amey Bhavsar', 'https://github.com/ameybhavsar24'] + - ['Claudio Busatto', 'https://github.com/cjcbusatto'] filename: p5.js --- -- cgit v1.2.3