Skip to content

Commit ee0a558

Browse files
bennadelbennadel
committed
Add Crypto random values demo.
1 parent 5f55665 commit ee0a558

File tree

4 files changed

+228
-0
lines changed

4 files changed

+228
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Exploring Randomness In JavaScript](https://bennadel.github.io/JavaScript-Demos/demos/web-crypto-rand)
1314
* [Color Palette Utility In Alpine.js](https://bennadel.github.io/JavaScript-Demos/demos/color-palette)
1415
* [Using Both Tab And Arrow Keys For Keyboard Navigation](https://bennadel.github.io/JavaScript-Demos/demos/tab-group)
1516
* [Using Margins With Four-Sided Positioning In CSS](https://bennadel.github.io/JavaScript-Demos/demos/four-sided-margins)

‎demos/web-crypto-rand/index.htm‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>
7+
Exploring Randomness In JavaScript
8+
</title>
9+
<link rel="stylesheet" type="text/css" href="./main.css" />
10+
</head>
11+
<body>
12+
13+
<h1>
14+
Exploring Randomness In JavaScript
15+
</h1>
16+
17+
<div class="side-by-side">
18+
<section x-data="Explore( 'math' )">
19+
<h2>
20+
Math Module
21+
</h2>
22+
23+
<!-- A very large number of random {X,Y} coordinates. -->
24+
<canvas
25+
x-ref="canvas"
26+
width="320"
27+
height="320">
28+
</canvas>
29+
30+
<!-- A very small number of random values coordinates. -->
31+
<p x-ref="list"></p>
32+
33+
<p>
34+
Duration: <span x-text="duration"></span>
35+
</p>
36+
</section>
37+
38+
<section x-data="Explore( 'crypto' )">
39+
<h2>
40+
Crypto Module
41+
</h2>
42+
43+
<!-- A very large number of random {X,Y} coordinates. -->
44+
<canvas
45+
x-ref="canvas"
46+
width="320"
47+
height="320">
48+
</canvas>
49+
50+
<!-- A very small number of random values coordinates. -->
51+
<p x-ref="list"></p>
52+
53+
<p>
54+
Duration: <span x-text="duration"></span>ms
55+
</p>
56+
</section>
57+
</div>
58+
59+
<script type="text/javascript" src="./main.js" defer></script>
60+
<script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.min.js" defer></script>
61+
62+
</body>
63+
</html>

‎demos/web-crypto-rand/main.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
2+
body {
3+
font-family: monospace ;
4+
font-size: 18px ;
5+
line-height: 1.4 ;
6+
}
7+
8+
.side-by-side {
9+
display: flex ;
10+
gap: 30px ;
11+
}
12+
13+
.side-by-side section {
14+
display: flex ;
15+
flex-direction: column ;
16+
flex: 0 0 min-content ;
17+
gap: 20px ;
18+
}
19+
20+
.side-by-side section > * {
21+
flex: 0 1 auto ;
22+
margin: 0 ;
23+
}
24+
25+
.side-by-side canvas {
26+
border: 2px solid deeppink ;
27+
}
28+
29+
.side-by-side p:nth-of-type(1) {
30+
line-height: 1.7 ;
31+
}

‎demos/web-crypto-rand/main.js‎

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
2+
/**
3+
* I return a random float between 0 (inclusive) and 1 (exclusive) using the Math module.
4+
*/
5+
function randFloatWithMath() {
6+
7+
return Math.random();
8+
9+
}
10+
11+
/**
12+
* I return a random float between 0 (inclusive) and 1 (exclusive) using the Crypto module.
13+
*/
14+
function randFloatWithCrypto() {
15+
16+
// This method works by filling the given array with random values of the given type.
17+
// In our case, we only need one random value, so we're going to pass in an array of
18+
// length 1.
19+
// --
20+
// Note: For better performance, we could cache the typed array and just keep passing
21+
// the same reference in (cuts performance in half). But, we're exploring the
22+
// randomness, not the performance.
23+
var [ randomInt ] = crypto.getRandomValues( new Uint32Array( 1 ) );
24+
var maxInt = 4294967295;
25+
26+
// Unlike Math.random(), crypto is giving us an integer. To feed this back into the
27+
// same kind of math equation, we have to convert the integer into decimal so that we
28+
// can figure out where in our range our randomness leads us.
29+
return ( randomInt / ( maxInt + 1 ) );
30+
31+
}
32+
33+
// ----------------------------------------------------------------------------------- //
34+
// ----------------------------------------------------------------------------------- //
35+
36+
function Explore( algorithm ) {
37+
38+
// Each instance of this Alpine.js component is assigned a different randomization
39+
// strategy for floats (0..1). Other than that, the component instances behave exactly
40+
// the same.
41+
var randFloat = ( algorithm === "math" )
42+
? randFloatWithMath
43+
: randFloatWithCrypto
44+
;
45+
46+
return {
47+
duration: 0,
48+
// Public methods.
49+
init: init,
50+
// Private methods.
51+
fillCanvas: fillCanvas,
52+
fillList: fillList,
53+
randRange: randRange
54+
}
55+
56+
// ---
57+
// PUBLIC METHODS.
58+
// ---
59+
60+
/**
61+
* I initialize the Alpine.js component.
62+
*/
63+
function init() {
64+
65+
var startedAt = Date.now();
66+
67+
this.fillCanvas();
68+
this.fillList();
69+
70+
this.duration = ( Date.now() - startedAt );
71+
72+
}
73+
74+
// ---
75+
// PRIVATE METHODS.
76+
// ---
77+
78+
/**
79+
* I populate the canvas with random {X,Y} pixels.
80+
*/
81+
function fillCanvas() {
82+
83+
var pixelCount = 200000;
84+
var canvas = this.$refs.canvas;
85+
var width = canvas.width;
86+
var height = canvas.height;
87+
88+
var context = canvas.getContext( "2d" );
89+
context.fillStyle = "deeppink";
90+
91+
for ( var i = 0 ; i < pixelCount ; i++ ) {
92+
93+
var x = this.randRange( 0, width );
94+
var y = this.randRange( 0, height );
95+
96+
// As we add more pixels, let's make the pixel colors increasingly opaque. I
97+
// was hoping that this might help show potential clustering of values.
98+
context.globalAlpha = ( i / pixelCount );
99+
context.fillRect( x, y, 1, 1 );
100+
101+
}
102+
103+
}
104+
105+
/**
106+
* I populate the list with random 0-9 values.
107+
*/
108+
function fillList() {
109+
110+
var list = this.$refs.list;
111+
var valueCount = 105;
112+
var values = [];
113+
114+
for ( var i = 0 ; i < valueCount ; i++ ) {
115+
116+
values.push( this.randRange( 0, 9 ) );
117+
118+
}
119+
120+
list.textContent = values.join( " " );
121+
122+
}
123+
124+
/**
125+
* I generate a random integer in between the given min and max, inclusive.
126+
*/
127+
function randRange( min, max ) {
128+
129+
return ( min + Math.floor( randFloat() * ( max - min + 1 ) ) );
130+
131+
}
132+
133+
}

0 commit comments

Comments
 (0)