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:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
