p5.js noSmooth() Function

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:

Javascript

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:

Javascript

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: