P5.js development - setting

One summary

• Background color related (background/clear/clolorMode)
• Fill in related (fill/noFill)
• Stroke correlation (stroke/noStroke)
• Erase canvas related (erase/noErase)

Two Background color related (background/clear/clolorMode)

2.1 Attribute specification

No	attribute	explain
1	background	Background color
2	clear	Clear the pixels in the graphics buffer
3	colorMode	colorMode() change p5.js How to interpret color data

2.2 Example

Code

let value=51;
function setup() {
  background(value);
}
function mouseClicked()
{
  clear();
  colorMode(HSB, 100);
  background('red');
}

design sketch

3、 ... and Fill in related (fill/noFill)

3.1 Attribute specification

No	attribute	explain
1	fill	Fill color
2	noFill	Disable padding

3.2 Example

Code

function setup() {
  createCanvas(displayWidth, displayHeight);
  fill(51);
  rect(20, 20, 60, 60);
}

function mouseClicked()
{
  noFill();
  rect(30, 30, 80, 80);
}

design sketch

Four Stroke correlation (stroke/noStroke)

4.1 Attribute specification

No	attribute	explain
1	stroke	Stroke
2	noStroke	Disable stroke

4.2 Example

Code

function setup() {
  createCanvas(displayWidth, displayHeight);
  background(200);

}

function draw() {
  strokeWeight(4);
  stroke(51);
  rect(20, 20, 60, 60);
}

function mouseClicked()
{
  
  noStroke();
  rect(80, 80,60, 60);

}

design sketch

5、 ... and Erase canvas related (erase/noErase)

5.1 Attribute specification

No	attribute	explain
1	erase	Erase drawing
2	noErase	Cancel erase

5.2 Example

Code

function setup() {
  createCanvas(displayWidth, displayHeight);
  background(200);

}

function draw() {
  fill(250, 100, 100);
  rect(20, 20, 60, 60);
  erase();
}

function mouseClicked()
{
  
  ellipse(25, 30, 30);
  noErase();

}

design sketch