Skip to content
Related Articles

Related Articles

Improve Article

p5.js | Dequeue Operation in Queue

  • Last Updated : 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.
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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :