p5.js | hide() Function
The hide() function is an inbuilt function which is used to hide the current element. Essentially display: none is used for this style.
This function requires p5.dom library. So add the following line in the head section of the index.html file.
javascript
<script language="javascript" type="text/javascript" src="path/to/p5.dom.js"></script> |
Syntax:
hide()
Parameters: This function does not accepts any parameters.
Below examples illustrate the hide() function in p5.js:
Example 1: This example uses hide() function to hide the div element.
javascript
function setup() { // Create Canvas of given size var cvs = createCanvas(600, 250);}function draw() { // Set the background color background('green'); // Use createDiv() function to // create a div element var myDiv1 = createDiv('zambiatek'); // Set the position of div element myDiv1.position(170, 30); // Set the div size myDiv1.size(200, 100); // Set the font-size of text myDiv1.style('font-size', '36px'); // Use createDiv() function to // create a div element var myDiv = createDiv('A computer science portal for zambiatek'); // Set the position of div element myDiv.position(180, 80); // Set the div size myDiv.size(200, 100); // Set the font-size of text myDiv.style('font-size', '24px'); // Set the font-size of text myDiv.style('border', '1px solid black'); // Set the font-size of text myDiv.style('text-align', 'center'); // Set the font color myDiv.style('color', 'white'); // Hide the div element myDiv.hide(); } |
Output:
Example 2: This example uses hide() and show() function to display the div element.
javascript
function setup() { // Create Canvas of given size var cvs = createCanvas(600, 250);}function draw() { // Set the background color background('green'); // Use createDiv() function to // create a div element var myDiv1 = createDiv('zambiatek'); // Set the position of div element myDiv1.position(170, 30); // Set the div size myDiv1.size(200, 100); // Set the font-size of text myDiv1.style('font-size', '36px'); // Use createDiv() function to // create a div element var myDiv = createDiv('A computer science portal for zambiatek'); // Set the position of div element myDiv.position(180, 80); // Set the div size myDiv.size(200, 100); // Set the font-size of text myDiv.style('font-size', '24px'); // Set the font-size of text myDiv.style('border', '1px solid black'); // Set the font-size of text myDiv.style('text-align', 'center'); // Set the font color myDiv.style('color', 'white'); // Hide the div element myDiv.hide(); // Show the div element myDiv.show();} |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek 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!
