update
This commit is contained in:
@@ -4,20 +4,22 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-scree grid grid-cols-1 items-center divide-y">
|
||||
<div class="flex justify-center pt-6">
|
||||
<div class="flex flex-col justify-center pt-6 text-center">
|
||||
<p class="text-2xl" id="browser-name">Detected Browser: Something</p>
|
||||
<p class="mt-2 text-gray-600 dark:text-gray-400">This visualization demonstrates the strength and uniformity of your
|
||||
browser's random number generator.</p>
|
||||
</div>
|
||||
<div class="flex justify-center pt-6">
|
||||
<canvas id="randNumCanvas" width="1000" height="1000"></canvas>
|
||||
<canvas id="randNumCanvas" width="1000" height="1000"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block js %}
|
||||
<script>
|
||||
"use strict";
|
||||
"use strict";
|
||||
|
||||
var vertexShaderSource = `#version 300 es
|
||||
var vertexShaderSource = `#version 300 es
|
||||
|
||||
// an attribute is an input (in) to a vertex shader.
|
||||
// It will receive data from a buffer
|
||||
@@ -42,7 +44,7 @@ void main() {
|
||||
}
|
||||
`;
|
||||
|
||||
var fragmentShaderSource = `#version 300 es
|
||||
var fragmentShaderSource = `#version 300 es
|
||||
|
||||
precision highp float;
|
||||
|
||||
@@ -56,143 +58,143 @@ void main() {
|
||||
}
|
||||
`;
|
||||
|
||||
function main() {
|
||||
// Get A WebGL context
|
||||
var canvas = document.querySelector("#randNumCanvas");
|
||||
var gl = canvas.getContext("webgl2");
|
||||
if (!gl) {
|
||||
return;
|
||||
}
|
||||
function main() {
|
||||
// Get A WebGL context
|
||||
var canvas = document.querySelector("#randNumCanvas");
|
||||
var gl = canvas.getContext("webgl2");
|
||||
if (!gl) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Use our boilerplate utils to compile the shaders and link into a program
|
||||
var program = webglUtils.createProgramFromSources(gl,
|
||||
// Use our boilerplate utils to compile the shaders and link into a program
|
||||
var program = webglUtils.createProgramFromSources(gl,
|
||||
[vertexShaderSource, fragmentShaderSource]);
|
||||
|
||||
// look up where the vertex data needs to go.
|
||||
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
|
||||
// look up where the vertex data needs to go.
|
||||
var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
|
||||
|
||||
// look up uniform locations
|
||||
var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
|
||||
var colorLocation = gl.getUniformLocation(program, "u_color");
|
||||
// look up uniform locations
|
||||
var resolutionUniformLocation = gl.getUniformLocation(program, "u_resolution");
|
||||
var colorLocation = gl.getUniformLocation(program, "u_color");
|
||||
|
||||
// Create a buffer
|
||||
var positionBuffer = gl.createBuffer();
|
||||
// Create a buffer
|
||||
var positionBuffer = gl.createBuffer();
|
||||
|
||||
// Create a vertex array object (attribute state)
|
||||
var vao = gl.createVertexArray();
|
||||
// Create a vertex array object (attribute state)
|
||||
var vao = gl.createVertexArray();
|
||||
|
||||
// and make it the one we're currently working with
|
||||
gl.bindVertexArray(vao);
|
||||
// and make it the one we're currently working with
|
||||
gl.bindVertexArray(vao);
|
||||
|
||||
// Turn on the attribute
|
||||
gl.enableVertexAttribArray(positionAttributeLocation);
|
||||
// Turn on the attribute
|
||||
gl.enableVertexAttribArray(positionAttributeLocation);
|
||||
|
||||
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
// Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
|
||||
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
|
||||
|
||||
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
|
||||
var size = 2; // 2 components per iteration
|
||||
var type = gl.FLOAT; // the data is 32bit floats
|
||||
var normalize = false; // don't normalize the data
|
||||
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
||||
var offset = 0; // start at the beginning of the buffer
|
||||
gl.vertexAttribPointer(
|
||||
// Tell the attribute how to get data out of positionBuffer (ARRAY_BUFFER)
|
||||
var size = 2; // 2 components per iteration
|
||||
var type = gl.FLOAT; // the data is 32bit floats
|
||||
var normalize = false; // don't normalize the data
|
||||
var stride = 0; // 0 = move forward size * sizeof(type) each iteration to get the next position
|
||||
var offset = 0; // start at the beginning of the buffer
|
||||
gl.vertexAttribPointer(
|
||||
positionAttributeLocation, size, type, normalize, stride, offset);
|
||||
|
||||
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
|
||||
webglUtils.resizeCanvasToDisplaySize(gl.canvas);
|
||||
|
||||
// Tell WebGL how to convert from clip space to pixels
|
||||
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||
// Tell WebGL how to convert from clip space to pixels
|
||||
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
|
||||
|
||||
// Clear the canvas
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
// Clear the canvas
|
||||
gl.clearColor(0, 0, 0, 0);
|
||||
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
||||
|
||||
// Tell it to use our program (pair of shaders)
|
||||
gl.useProgram(program);
|
||||
// Tell it to use our program (pair of shaders)
|
||||
gl.useProgram(program);
|
||||
|
||||
// Bind the attribute/buffer set we want.
|
||||
gl.bindVertexArray(vao);
|
||||
// Bind the attribute/buffer set we want.
|
||||
gl.bindVertexArray(vao);
|
||||
|
||||
// Pass in the canvas resolution so we can convert from
|
||||
// pixels to clipspace in the shader
|
||||
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
|
||||
//const array = new Uint16Array(30_000);
|
||||
//const randNum = self.crypto.getRandomValues(array);
|
||||
// draw 50 random rectangles in random colors
|
||||
var primitiveType = gl.TRIANGLES;
|
||||
var offset = 0;
|
||||
var count = 6;
|
||||
var counter = 0;
|
||||
var array2D = [];
|
||||
var y_cnt = 0;
|
||||
var x_cnt = 0;
|
||||
for (var size = 0; size < 1000; ++size) {
|
||||
array2D[size] = self.crypto.getRandomValues(new Uint16Array(1000));
|
||||
}
|
||||
for (var y = 0; y < 2000; y = y + 2) {
|
||||
for (var x = 0; x < 2000; x = x + 2) {
|
||||
setRectangle(gl, x, y, 2, 2);
|
||||
gl.uniform4f(colorLocation, 0.0, 0.0, 0.0, normalizeUint16(array2D[y/2][x/2]));
|
||||
gl.drawArrays(primitiveType, offset, count);
|
||||
counter++;
|
||||
// Pass in the canvas resolution so we can convert from
|
||||
// pixels to clipspace in the shader
|
||||
gl.uniform2f(resolutionUniformLocation, gl.canvas.width, gl.canvas.height);
|
||||
//const array = new Uint16Array(30_000);
|
||||
//const randNum = self.crypto.getRandomValues(array);
|
||||
// draw 50 random rectangles in random colors
|
||||
var primitiveType = gl.TRIANGLES;
|
||||
var offset = 0;
|
||||
var count = 6;
|
||||
var counter = 0;
|
||||
var array2D = [];
|
||||
var y_cnt = 0;
|
||||
var x_cnt = 0;
|
||||
for (var size = 0; size < 1000; ++size) {
|
||||
array2D[size] = self.crypto.getRandomValues(new Uint16Array(1000));
|
||||
}
|
||||
for (var y = 0; y < 2000; y = y + 2) {
|
||||
for (var x = 0; x < 2000; x = x + 2) {
|
||||
setRectangle(gl, x, y, 2, 2);
|
||||
gl.uniform4f(colorLocation, 0.0, 0.0, 0.0, normalizeUint16(array2D[y / 2][x / 2]));
|
||||
gl.drawArrays(primitiveType, offset, count);
|
||||
counter++;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Returns a random integer from 0 to range - 1.
|
||||
function randomInt(range) {
|
||||
return Math.floor(Math.random() * range);
|
||||
}
|
||||
// Returns a random integer from 0 to range - 1.
|
||||
function randomInt(range) {
|
||||
return Math.floor(Math.random() * range);
|
||||
}
|
||||
|
||||
function normalizeUint16(val) {
|
||||
return val/65535;
|
||||
|
||||
}
|
||||
function normalizeUint16(val) {
|
||||
return val / 65535;
|
||||
|
||||
// Fill the buffer with the values that define a rectangle.
|
||||
function setRectangle(gl, x, y, width, height) {
|
||||
var x1 = x;
|
||||
var x2 = x + width;
|
||||
var y1 = y;
|
||||
var y2 = y + height;
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
||||
x1, y1,
|
||||
x2, y1,
|
||||
x1, y2,
|
||||
x1, y2,
|
||||
x2, y1,
|
||||
x2, y2,
|
||||
]), gl.STATIC_DRAW);
|
||||
}
|
||||
}
|
||||
|
||||
main();
|
||||
// Fill the buffer with the values that define a rectangle.
|
||||
function setRectangle(gl, x, y, width, height) {
|
||||
var x1 = x;
|
||||
var x2 = x + width;
|
||||
var y1 = y;
|
||||
var y2 = y + height;
|
||||
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
|
||||
x1, y1,
|
||||
x2, y1,
|
||||
x1, y2,
|
||||
x1, y2,
|
||||
x2, y1,
|
||||
x2, y2,
|
||||
]), gl.STATIC_DRAW);
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
</script>
|
||||
<script>
|
||||
// Function to detect the browser name
|
||||
function detectBrowser() {
|
||||
// Function to detect the browser name
|
||||
function detectBrowser() {
|
||||
var userAgent = navigator.userAgent;
|
||||
if (userAgent.indexOf("Edg") > -1) {
|
||||
return "Microsoft Edge";
|
||||
return "Microsoft Edge";
|
||||
} else if (userAgent.indexOf("Chrome") > -1) {
|
||||
return "Chrome";
|
||||
return "Chrome";
|
||||
} else if (userAgent.indexOf("Firefox") > -1) {
|
||||
return "Firefox";
|
||||
return "Firefox";
|
||||
} else if (userAgent.indexOf("Safari") > -1) {
|
||||
return "Safari";
|
||||
return "Safari";
|
||||
} else if (userAgent.indexOf("Opera") > -1) {
|
||||
return "Opera";
|
||||
return "Opera";
|
||||
} else if (userAgent.indexOf("Trident") > -1 || userAgent.indexOf("MSIE") > -1) {
|
||||
return "Internet Explorer";
|
||||
return "Internet Explorer";
|
||||
}
|
||||
|
||||
return "Unknown";
|
||||
}
|
||||
}
|
||||
|
||||
// Get the browser name and display it
|
||||
var browserName = detectBrowser();
|
||||
document.getElementById("browser-name").innerText = "Detected Browser: " + browserName;
|
||||
// Get the browser name and display it
|
||||
var browserName = detectBrowser();
|
||||
document.getElementById("browser-name").innerText = "Detected Browser: " + browserName;
|
||||
</script>
|
||||
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user