adambard/learnxinyminutes-docs
1
1
Fork 0
mirror of https://github.com/adambard/learnxinyminutes-docs.git synced 2024-12-02 11:14:48 +03:00
Code Issues Projects Releases Wiki Activity

Merge pull request #3506 from cjcbusatto/master

Browse Source 
[p5/en] Fix layout problem on webpage
This commit is contained in:
Divay Prakash 2019-03-26 23:49:33 +05:30 committed by GitHub
commit 46cf7f3553
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
p5.html.markdown
View File

@ -2,45 +2,42 @@
category: tool category: tool
tool: p5 tool: p5
contributors: contributors:
- ["Amey Bhavsar", "https://github.com/ameybhavsar24"] - ['Amey Bhavsar', 'https://github.com/ameybhavsar24']
- ['Claudio Busatto', 'https://github.com/cjcbusatto']
filename: p5.js 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. 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. Since p5 is a JavaScript library, you should learn [Javascript](https://learnxinyminutes.com/docs/javascript/) first.
```js ```js
/////////////////////////////////// ///////////////////////////////////
// p5.js has two important functions to work with. // p5.js has two important functions to work with.
function setup() { 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() { 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 // the following code explains all features
function setup() { function setup() {
createCanvas(640, 480); // creates a new canvas element with 640px as width as 480px as height
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
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() { 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.
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
//remember in p5.js the origin is at the top-left corner of the canvas
if (mouseIsPressed) { if (mouseIsPressed) {
// mouseIsPressed is a boolean variable that changes to true if the mouse buttton is pressed down at that instant // 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 fill(0); // fill refers to the innner color or filling color of whatever shape you are going to draw next
} else { } 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) 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); ellipse(mouseX, mouseY, 80, 80);
@ -48,8 +45,9 @@ ellipse(10,10, 50,50); // creates a ellipse at the 10px from the left and 10px f
// the above code creates a circle wherever mouse's current position and fills it either black or white based on the mouseIsPressed // the above code creates a circle wherever mouse's current position and fills it either black or white based on the mouseIsPressed
} }
``` ```
## Further Reading ## 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