All geek questions in one place

JavaScript binary operators

Working on a WebGL project, and I'm looking at the code from an example class. In one of the loops, this code was specified:

var c = (((i & 0x8) == 0) ^ ((j & 0x8)  == 0));

Variables ialso jpass to a certain value in a for loop. What does this statement mean? Does this mean the variable cis in hexadecimal?

var texSize = 64; 
var image1 = new Array(); 
for (var i =0; i<texSize; i++) 
    image1[i] = new Array(); 
for (var i =0; i<texSize; i++) 
    for ( var j = 0; j < texSize; j++) 
        image1[i][j] = new Float32Array(4); 
for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        image1[i][j] = [c, c, c, 1]; 
    }
+4
source share
2 answers

SMchrohan's answer is correct. The code basically creates a checkerboard texture.

?? & 0x8means that this expression will be true when bit 3 (0,1,2,3) is true. bit 3 in binary is true, each other is a set of 8 values ​​(0-7 is false, 8-15 is true, 16-23 is false, etc.).

== 0.

i, j.

^ , (true, false false, true) false, (false, false true, true). ^ , , false 0, true 1. 2 int ,

0 ^ 0 = 0
1 ^ 0 = 1
0 ^ 1 = 1
1 ^ 1 = 0

, image1 [0, 0, 0, 1], [1, 1, 1, 1]

var texSize = 64; 
var image1 = new Array(); 
for (var i =0; i<texSize; i++) 
    image1[i] = new Array(); 
for (var i =0; i<texSize; i++) 
    for ( var j = 0; j < texSize; j++) 
        image1[i][j] = new Float32Array(4); 
for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        image1[i][j] = [c, c, c, 1]; 
    }

// lets plot it

var ctx = document.createElement("canvas").getContext("2d");
document.body.appendChild(ctx.canvas);
ctx.canvas.width = texSize;
ctx.canvas.height = texSize;

for (var i =0; i<texSize; i++) 
    for (var j=0; j<texSize; j++) 
    { 
        var c = image1[i][j][0]
        ctx.fillStyle = c ? "red" : "yellow";
        ctx.fillRect(i, j, 1, 1);
    }
canvas { border: 1px solid black; }
<body></body>

, . texSize, , , Float32Array (, )

image1[i][j] = new Float32Array(4);

Float32Arrays JavaScript

image1[i][j] = [c, c, c, 1];

Float32Array .

, , 1 Float32Arrays. WebGL.

Uint8Array ,

var texSize = 64; 
var pixels = new Uint8Array(texSize * texSize * 4);

for (var i =0; i<texSize; i++)  {
    for (var j=0; j<texSize; j++) { 
        var c = (((i & 0x8) == 0) ^ ((j & 0x8) == 0)); 
        var p = c ? 255 : 0;
        var offset = (i * texSize + j) * 4;
        pixels[offset + 0] = p;  // red
        pixels[offset + 1] = p;  // green
        pixels[offset + 2] = p;  // blue
        pixels[offset + 3] = 255;// alpha
    }

}

2D- API

- , , .

+2

& .

^ xor.

0x8 8.

c 1, i, j, 1 4- , 0x8 ( 1000) 0.

:

i & 0x8 0 ( 0 4) 8 ( 1 ).

(i & 0x8) == 0 , .

(((i & 0x8) == 0) ^ ((j & 0x8) == 0)) 1, ((i & 0x8) == 0), ((j & 0x8) == 0) , 0, .

+1

Source: https://habr.com/ru/post/1584819/

More articles:


All Articles