Skip to content
Related Articles

Related Articles

Improve Article

p5.js | Enqueue 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.

Limitation of Queue: It can access only one element at a time.

QUEUE

In JavaScript, arrays have methods like pop and shift that defines the Queue class: Enqueue and Dequeue operations. With this, a queue can be easily implemented.

Basic skeleton of queue: Below example run using “$node skeleton.js” command to get basic queue skelton.




// 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);

Example:




<!DOCTYPE html>
<html>
  
<head>
    <title>Enqueue Operation</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);
    </script>
</body>
  
</html>                                    

Output:

After Enqueuing ’25’ by calling queue1.enqueue(25) function of rear changes to 25.




My Personal Notes arrow_drop_up
Recommended Articles
Page :