mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
Fix the layout problem on the Webpage
This commit is contained in:
parent
32fb77ce7c
commit
dafe447f0f
@ -2,11 +2,13 @@
|
||||
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.
|
||||
@ -21,26 +23,20 @@ function draw() {
|
||||
// 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.
|
||||
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
|
||||
|
||||
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);
|
||||
@ -48,8 +44,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
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## 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
|
||||
|
Loading…
Reference in New Issue
Block a user