p5.js | Enqueue Operation in Queue

04 Oct, 2021
What is Queue? A Queue is a linear structure which follows a particular order in which the operations are performed. The order is First In First Out (FIFO). A good example of a queue is any queue of consumers for a resource where the consumer that came first is served first. It takes constant time to add or remove an element in a queue.  
Queues should be used over arrays when we need to work with data in the FIFO form. Limitation of Queue: It can access only one element at a time. 
In JavaScript, arrays have methods like pop and shift that defines the Queue class: Enqueue and Dequeue operations. With this, a queue can be easily implemented.Basic skeleton of queue: Below example run using “$node skeleton.js” command to get basic queue skeleton.  
javascript
// Define Queue functionfunction Queue(array) {    this.array = [];    if (array) this.array = array;} // Add Get Buffer property to object// constructor which slices the arrayQueue.prototype.getBuffer = function() {    return this.array.slice();} // Add isEmpty properties to object constructor// which returns the length of the arrayQueue.prototype.isEmpty = function() {    return this.array.length == 0;} // Instance of the Queue classvar queue1 = new Queue(); //Queue { array: [] } console.log(queue1);
Example:  
javascript
<!DOCTYPE html><html> <head>    <title>Enqueue Operation</title>         <meta charset="UTF-8">     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"    type="text/javascript"></script>     <style>        body {            padding: 0;            margin: 0;        }        canvas {            vertical-align: top;        }    </style></head> <body>       <script>             // Define Queue function        function Queue(array) {            this.array = [];            if (array) this.array = array;        }                 // Add Get Buffer property to object        // constructor which slices the array        Queue.prototype.getBuffer = function() {            return this.array.slice();        }                 // Add isEmpty properties to object constructor        // which returns the length of the array        Queue.prototype.isEmpty = function() {            return this.array.length == 0;        }                 // Instance of the Queue class        var queue1 = new Queue(); // Queue { array: [] }                 console.log(queue1);                 // Add Push property to object constructor        // which push elements to the array        Queue.prototype.enqueue = function(value) {            this.array.push(value);        }                 function setup() {                         // Create Canvas of size display width * 300            createCanvas(displayWidth, 300);        }                 function draw() {                     // Set background color            background("grey");                         // Set stroke weight            strokeWeight(3);            textAlign(CENTER);            textSize(24);            text("Queue Implementation Using P5.js",                        windowWidth/2, 20);            textAlign(LEFT);            textSize(14);                     // Set stroke color            stroke('green');            line(10, 45, 90, 45);            rect(10, 30, 60, 30);            noStroke();            text("FRONT", 20, 50);                     // Display queue            for(var i = 0; i <= queue1['array'].length-1; i++) {                var p = 10;                translate(70, 0);                strokeWeight(3);                stroke('green');                line(10+p, 45, p+80, 45);                         rect(10+p, 30, 40+p, 30);                noStroke();                text(queue1['array'][i], 40, 50);                p += 10;            }                         // Set stroke color            stroke('green');            translate(70, 0);            rect(10, 30, 60, 30);            noStroke();            text("REAR", 20, 50);        }                 // Peek Function        Queue.prototype.peek = function() {            return this.array[this.array.length-1];        }                 // Driver Code        // Call to Enqueue operation        queue1.enqueue(1);        queue1.enqueue(2);        queue1.enqueue(3);        queue1.enqueue(19);        queue1.enqueue(11);        queue1.enqueue(15);        queue1.enqueue(14);        queue1.enqueue(18);    </script></body> </html>                                   
Output:  
After Enqueuing ’25’ by calling queue1.enqueue(25) function of rear changes to 25.  
 
anikaseth98
JavaScript-p5.js
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to Open URL in New Tab using JavaScript ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?