In p5.js all images, fonts, shapes, etc. are set to smooth() by default, except for 3D models, there noSmooth() is active by default. As we know smooth() function smooths the edges of listed elements. So, conversely noSmooth() function restricts smoothing of edges of elements.
Smoothing of edges takes some time. So, If you want to run your p5.js sketch faster and you don’t care much about the visuals. You can use noSmooth() function.
Syntax:
noSmooth();
Parameters: The noSmooth() function does not accept any parameters.
Example 1:
function setup() {
// Create canvas of 400X400 px
createCanvas(400, 400);
} function draw() {
// Set background color to green
background( 'green' );
// No border to shapes
noStroke();
smooth(); // by Default
ellipse(0, 0, 500, 500);
noSmooth();
ellipse(400, 400, 500, 500);
} |
Output: Top ellipse is smooth and bottom ellipse is noSmooth
Example 2:
function setup() {
// Create canvas of 400X400 px
createCanvas(400, 400);
} function draw() {
// Set background color to green
background( 'green' );
// No border to shapes
noStroke();
push();
smooth(); // by Default
ellipse(100, width / 2, 100, 200);
pop();
push();
noSmooth(); // apply noSmooth()
fill(238, 80, 71); // red color
ellipse(300, width / 2, 100, 200);
pop();
} |
Output: