# Intro to p5.js

### Test example https://xpablov.gitlab.io/webTestHtml/
(files available [here](https://gitlab.com/xpablov/webTestHtml))

### What is p5.js?
* javascript library (free/open software)
* based on processing.js
* easy to learn (aimed at artists, beginners, etc)
### Why use p5.js?
* minimal coding experience needed to start using it
* relatively unconstrained visual possibilities

### 2020 Showcase examples:
https://showcase.p5js.org/#/2020-All
* [Generative identity](https://showcase.p5js.org/#/2020-All/project-15/): [LIVE](https://malayvasa.me/)
Rules:
* Center Shape: the center shape of the visual is decided from the first alphabet of the name.
* Upper Shape: Does the name start and end with the same letter?
Yes - Downward Arrows
No - Diamond
* Lower Shape: Is the total number of alphabets in the name odd or even?
Odd - One Diamond
Even - Two Diamonds
* Circles In Orbiting Ring:
No. of circle orbiting in the Outer ring are determined by the number of vowels in the name.
* [Graphic beats](https://showcase.p5js.org/#/2020-All/project-20/): [LIVE](https://graphicbeats.net/)

### p5.js functions' specifics

#### `setup()`
- called once at the start of the program (automatically)
- only one setup() function per program

//SETUP EXAMPLE
function setup() {
  frameRate(24);
  createCanvas(800, 600);
}

#### `draw()`
- canvas is refreshed automatically (animation function)
- an *infinite* loop
- is called automatically
- only one draw() per program
- exectutions per second controlled by `frameRate()` function

//DRAW EXAMPLE
let x = 0;
function draw() {
  background(200);
  circle(100,100, x);
  
  if(x<100){
    x++;  //sets an upper limit to diamater
  }
}

#### `preload()`
- called before setup
- calls external assets (json, images, fonts, etc)
- both setup() and draw() will wait until preload() finishes running

#### `stroke()`
* object border color
* Accepts different paramenters, but commonly used with RGB coordinates (i.e. 3 values(0-255) + alpha)

#### `fill()`
* color inside the shapes
* Accepts different paramenters, but commonly used with RGB coordinates (i.e. 3 values(0-255) + alpha)

#### `map()`
* map one range to another range (e.g. 0 to 255 = 35-50)
* takes five arguments (value, minRangeA, maxRangeA, minRangeB, maxRangeB)

## Activity (for the initiatied):

This is an individual activity. This exercise has to be avialable in a public URL (gitlab page recommended):

1. Draw a face using p5.js (the more ecomplex, the better)
2. Call a json file and plot data from it (you can use the file in the example, but is better if you have an original json)
3. Paste your url in our [groups doc](https://aarhusuniversitet-my.sharepoint.com/:w:/g/personal/au615724_uni_au_dk/EWDZf5Bm5mhOnMJXOAJEf1ABWsO7eZ4k3uFaUETXfPLI3w?e=LNzg62)

## Recommended resources:
* [p5.js online editor](https://editor.p5js.org/)
* [p5.js documentation](https://p5js.org/)
* [The coding train "Programming with p5.js" tutorial](https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA) (fun and zero experience needed!)
* [Winnie Soon's (open) course on Aesthetic Programming](https://gitlab.com/siusoon/aesthetic-programming/-/tree/master/AP2020)