How to resolve the algorithm Greyscale bars/Display step by step in the JavaScript programming language

Published on 12 May 2024 09:40 PM
#Javascript

How to resolve the algorithm Greyscale bars/Display step by step in the JavaScript programming language

Table of Contents

Problem Statement

The task is to display a series of vertical greyscale bars (contrast bars) with a sufficient number of bars to span the entire width of the display. For the top quarter of the display, the left hand bar should be black, and we then incrementally step through six shades of grey until we have a white bar on the right hand side of the display. (This gives a total of 8 bars) For the second quarter down, we start with white and step down through 14 shades of gray, getting darker until we have black on the right hand side of the display. (This gives a total of 16 bars). Halfway down the display, we start with black, and produce 32 bars, ending in white, and for the last quarter, we start with white and step through 62 shades of grey, before finally arriving at black in the bottom right hand corner, producing a total of 64 bars for the bottom quarter.

Let's start with the solution:

Step by Step solution about How to resolve the algorithm Greyscale bars/Display step by step in the JavaScript programming language

The provided source code is written in JavaScript and it creates a checkered pattern using the HTML5 canvas element. It does this by creating a canvas element and setting its width and height. It then gets the context of the canvas element and sets the fill style to black. It then iterates over each row and column of the canvas and draws a rectangle for each pixel. The fill style of each rectangle is set to a value ranging from 0 to 1, where 0 is completely transparent and 1 is completely opaque. The value is set to be 1 for the first column and then decreases linearly for each subsequent column. This creates a checkered pattern where the leftmost column is completely black and the rightmost column is completely transparent.

The variable direction determines which direction the pattern is drawn in. A value of 1 indicates that the pattern is drawn from left to right, and a value of 0 indicates that the pattern is drawn from right to left. The variable blackLeft determines whether the leftmost column of the pattern is black (1) or transparent (0).

The function fillRect takes four arguments: the x-coordinate of the top-left corner of the rectangle, the y-coordinate of the top-left corner of the rectangle, the width of the rectangle, and the height of the rectangle. In this case, the rectangle is drawn at the current pixel position, and the width and height of the rectangle are set to the width and height of the canvas divided by the number of rows and columns, respectively.

The result of running this code is a checkered pattern that is drawn on the canvas element.

Source code in the javascript programming language

<html><body>
<script type="text/javascript">
var width = 640; var height = 400;
var c = document.createElement("canvas");
c.setAttribute('id',    'myCanvas'); 
c.setAttribute('style', 'border:1px solid black;'); 
c.setAttribute('width',  width);
c.setAttribute('height', height); 
document.body.appendChild(c);
var ctx = document.getElementById('myCanvas').getContext("2d");

var columnCount = 8;    // number of columns 
var rowCount    = 4;    // number of rows
var direction   = 1;    // 1 = from left to right, 0 = from right to left
var blackLeft   = 1;    // black is left: 1 = true, 0 = false
for(var j = 0; j < rowCount; j++){  
    for(var i = 0; i < columnCount; i++){
        ctx.fillStyle = 'rgba(0,0,0,'+ (blackLeft-(1/(columnCount-1)*i))*direction +')';  
        ctx.fillRect(
            (width/columnCount)*i,(height/rowCount)*j,
            (width/columnCount),(height/rowCount)
            ); 
        }
    columnCount *= 2; 
    direction *= -1; 
    blackLeft = blackLeft ? 0 : 1;
    }
</script>
</body></html>

You may also check:How to resolve the algorithm Extensible prime generator step by step in the Phix programming language
You may also check:How to resolve the algorithm Repeat a string step by step in the Aime programming language
You may also check:How to resolve the algorithm Knapsack problem/0-1 step by step in the QB64 programming language
You may also check:How to resolve the algorithm Permutation test step by step in the Java programming language
You may also check:How to resolve the algorithm Shell one-liner step by step in the jq programming language