p5.js | Dequeue Operation in Queue

09 Jul, 2019
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="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);        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="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);        }                  // 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:
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 ?