p5.js notes

Note

• All work is in the p5.js web editor.
• Planning to showcase my best visualizations in personal blog

Color

• When RGB are all equal, it becomes grayscale

background(100);
background(100,100,100); //does the same thing

Useful Variables

• mouseX and mouseY
• width and height (gives the width and height of canvas)
• windowWidth and windowSize (gives the current width and height of window canvas)

Useful functions

(Note: Functions like these should be inside functions like setup() or draw() or they will not be recognized)

• rectMode(CENTER)
  • useful to align everything in the middle
• stroke and strokeWeight
  • the outline and its width
• fill
  • fills color
• Map function
  • maps any value in a range to another value in a different range
  • ex) 1 from (0,100) to (0,255)
• createGraphics()
  • creates another canvas

let extraCanvas;
 
function setup()
{
	createCanvas(400,400);
	//making extra canvas
	extraCanvas = createGraphics(400,400);
	//making the new canvas clear so we can see the previous layer
	extraCanvas.clear(); 
}
 
function draw()
{
	Image(extraCanvas,0,0);
	// refer to extra canvas
	extracanvas.ellipse(mouseX,mouseY);
}

• random
  • returns a random value
  • (min, max), or (max)
• noise
  • refers to particular noise Perlin noise
  • noise function gives Perlin noise values