p5.js | Enqueue Operation in Queue

0 0 2 minutes read

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 skeleton.

javascript

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

javascript

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

Output:

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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!