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= 
"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>                         