p5.js | Dequeue Operation in Queue
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.
Dequeue Operation in Queue: In Queue, accessing the content while removing it from the front end of the queue, is known as a Dequeue Operation.
Approach: A Dequeue operation may involve the following steps:
- Checks that the queue is empty or not. If the queue is empty then it produces an error and exit.
- If the queue is not empty then accesses the data element at which front end is pointing.
- Delete the element, using array.pop() operation on buffer.
- Return success.
Example 1: This example implements enqueue operation to create a queue.
<!DOCTYPE html> <html>   <head>     <title>Dequeue Operation in Queue</title>           <meta charset="UTF-8">       <script src=     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);         queue1.enqueue(25);     </script> </body>   </html>                              |
Output:
After Executing two Dequeue Operations by calling queue1.dequeue() function, the front value changes to 3.
Example 2:
<!DOCTYPE html> <html>   <head>     <title>Dequeue Operation in Queue</title>           <meta charset="UTF-8">       <script src=     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);         }                   // Dequeue function         Queue.prototype.dequeue = function() {             return this.array.shift();         }                   // 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);         queue1.enqueue(25);                   // Call to Dequeue Function         queue1.dequeue();         queue1.dequeue();     </script> </body>   </html>                        |
Output:
