summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorDivay Prakash <divayprakash@users.noreply.github.com>2019-03-26 23:49:33 +0530
committerGitHub <noreply@github.com>2019-03-26 23:49:33 +0530
commit46cf7f35536e855d4060559c489d382507fd7a1b (patch)
tree88d62a78a14be6a1daeecfade0973069d27bd2ab
parent32fb77ce7cb8c9b895978077f3fec6211f028b59 (diff)
parent7ec1bcc95d0d45c7d9e18633bc4108dc736d68bb (diff)
Merge pull request #3506 from cjcbusatto/master
[p5/en] Fix layout problem on webpage
-rw-r--r--p5.html.markdown54
1 files changed, 26 insertions, 28 deletions
diff --git a/p5.html.markdown b/p5.html.markdown
index 61fe0705..be22d3e5 100644
--- a/p5.html.markdown
+++ b/p5.html.markdown
@@ -2,54 +2,52 @@
category: tool
tool: p5
contributors:
- - ["Amey Bhavsar", "https://github.com/ameybhavsar24"]
+ - ['Amey Bhavsar', 'https://github.com/ameybhavsar24']
+ - ['Claudio Busatto', 'https://github.com/cjcbusatto']
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