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.

javascript

<!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:

javascript

<!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:

p5.js | Pop Operation in Stack

sarthak_ishu11

Improve

Article Tags :

p5.js | Dequeue Operation in Queue

Similar Reads

Thank You!

What kind of Experience do you want to share?