Изучение случайности в JavaScript

В моем посте о создании утилиты цветовой палитры в Alpine.js случайность играла большую роль: каждый образец генерировался как композиция случайно выбранных значений Hue (0..360), Saturation (0..100) и Lightness (0..100). Когда я создавал эту демонстрацию, я наткнулся на Web Crypto API. Обычно при генерации случайных значений я использую метод Math.random(), но в документации MDN упоминается, что Crypto.getRandomValues() более безопасен. В итоге я решил попробовать Crypto (с фоллбэком на модуль Math по мере необходимости). Но это заставило меня задуматься, действительно ли «более безопасный» означает «более случайный» для моего варианта использования.

Посмотреть пример в моем проекте JavaScript Demos на GitHub.

Посмотреть код в моем проекте JavaScript Demos на GitHub.

Случайность, с точки зрения безопасности, имеет значение. Я не специалист по безопасности, но, насколько я понимаю, генератор псевдослучайных чисел (ГПСЧ) считается «безопасным» в том случае, когда последовательность чисел, которую он произведет или уже произвел, не может быть вычислена злоумышленником.

Когда речь идет о «генераторах случайных цветов», таких, как моя утилита для создания цветовой палитры, понятие «случайности» гораздо более расплывчато. В моем случае генерация цвета настолько случайна, насколько это «ощущается» пользователем. Другими словами, эффективность случайности является частью пользовательского опыта (UX).

С этой целью я хочу попробовать сгенерировать несколько случайных визуальных элементов, используя как Math.random(), так и crypto.getRandomValues(), чтобы посмотреть, будет ли один из методов существенно отличаться по ощущениям. Каждая попытка будет содержать случайно сгенерированный элемент <canvas> и случайно сгенерированный набор целых чисел. Затем я воспользуюсь своей (глубоко ошибочной) человеческой интуицией, чтобы понять, выглядит ли один из методов «лучше» другого.

Метод Math.random() работает, возвращая десятичное значение от 0 (включительно) до 1 (исключительно). Это можно использовать для генерации случайных целых чисел, взяв результат случайности и умножив его на диапазон возможных значений.

Другими словами, если Math.random() вернет 0.25, вы выберете значение, которое ближе всего к 25% в заданном диапазоне минимума-максимума. А если Math.random() вернет 0.97, вы выберете значение, которое ближе всего к 97% в заданном диапазоне минимума-максимума.

Метод crypto.getRandomValues() работает совсем по-другому. Вместо того чтобы вернуть вам единственное значение, он ожидает принять TypedArray с заранее выделенным размером (длиной). Затем метод .getRandomValues() заполняет этот массив случайными значениями, ограниченными минимумом/максимумом, которые может хранить данный тип.

Чтобы облегчить это исследование, я хочу, чтобы оба подхода работали примерно одинаково. Поэтому вместо того, чтобы иметь дело с десятичными числами в одном алгоритме и целыми числами в другом, я приведу результаты алгоритмов к десятичным числам. Это означает, что я должен превратить value, возвращаемое .getRandomValues(), в десятичное число (0..1):

value / ( maxValue + 1 )

Я инкапсулирую эту разницу в два метода, randFloatWithMath() и randFloatWithCrypto():

/** * С помощью модуля Math я возвращаю случайное число с плавающей запятой в диапазоне от 0 (включительно) до 1 (исключительно). */ function randFloatWithMath() {  return Math.random();  }  /** * С помощью модуля Crypto я возвращаю случайное число с плавающей запятой в диапазоне от 0 (включительно) до 1 (исключительно). */ function randFloatWithCrypto() {  var [ randomInt ] = crypto.getRandomValues( new Uint32Array( 1 ) ); var maxInt = 4294967295;  return ( randomInt / ( maxInt + 1 ) );  }

Имея эти два метода, я могу присвоить один из них переменной randFloat(), которая может быть использована для генерации случайных значений в заданном диапазоне, используя любой из алгоритмов:

/** * Я генерирую случайное целое число между заданными min и max, включительно. */ function randRange( min, max ) {  return ( min + Math.floor( randFloat() * ( max - min + 1 ) ) );  }

Теперь перейдем к созданию экспериментов. Пользовательский интерфейс небольшой и работает на Alpine.js. В каждом эксперименте используется один и тот же компонент Alpine.js, но его конструктор получает аргумент, который определяет, какая реализация randFloat() будет использоваться:

<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" type="text/css" href="./main.css" /> </head> <body>  <h1> <!-- Изучение случайности в JavaScript --> Exploring Randomness In JavaScript </h1>  <div class="side-by-side"> <section x-data="Explore( 'math' )"> <h2> <!-- Модуль Math --> Math Module </h2>  <!-- Очень большое количество случайных координат {X,Y}. --> <canvas x-ref="canvas" width="320" height="320"> </canvas>  <!-- Небольшое количество случайных значений координат. --> <p x-ref="list"></p>  <p> <!-- Длительность --> Duration: <span x-text="duration"></span> </p> </section>  <section x-data="Explore( 'crypto' )"> <h2> <!-- Модуль Crypto --> Crypto Module </h2>  <!-- Очень большое количество случайных координат {X,Y}. --> <canvas x-ref="canvas" width="320" height="320"> </canvas>  <!-- Небольшое количество случайных значений координат. --> <p x-ref="list"></p>  <p> <!-- Длительность --> Duration: <span x-text="duration"></span>ms </p> </section> </div>  <script type="text/javascript" src="./main.js" defer></script> <script type="text/javascript" src="../../vendor/alpine/3.13.5/alpine.3.13.5.min.js" defer></script>  </body> </html>

Как видите, каждый компонент x-data="Explore" содержит два x-ref: canvas и list. Когда компонент инициализируется, он заполнит эти два x-ref случайными значениями с помощью методов fillCanvas() и fillList() соответственно.

Вот мой компонент JavaScript / Alpine.js:

/** * С помощью модуля Math я возвращаю случайное число с плавающей запятой в диапазоне от 0 (включительно) до 1 (исключительно). */ function randFloatWithMath() {  return Math.random();  }  /** * С помощью модуля Crypto я возвращаю случайное число с плавающей запятой в диапазоне от 0 (включительно) до 1 (исключительно). */ function randFloatWithCrypto() {  // Этот метод работает, заполняя массив случайными значениями заданного типа. // В нашем случае нам нужно только одно случайное значение, поэтому мы передадим массив     // длиной 1. // -- // Примечание: Для повышения производительности мы можем кэшировать типизированный массив и просто передавать // одну и ту же ссылку (это улучшает производительность вдвое). Но мы исследуем // случайность, а не производительность. var [ randomInt ] = crypto.getRandomValues( new Uint32Array( 1 ) ); var maxInt = 4294967295;  // В отличие от Math.random(), crypto генерирует нам целое число. Чтобы подставить его // в то же математическое уравнение, мы должны преобразовать целое число в десятичное, // чтобы получить такое же случайное значение. return ( randomInt / ( maxInt + 1 ) );  }  // ----------------------------------------------------------------------------------- // // ----------------------------------------------------------------------------------- //  function Explore( algorithm ) {  // Каждому компоненту Alpine.js назначается своя стратегия генерации случайных // чисел с плавающей запятой (0..1). В остальном компоненты ведут себя // одинаково. var randFloat = ( algorithm === "math" ) ? randFloatWithMath : randFloatWithCrypto ;  return { duration: 0, // Публичные методы. init: init, // Приватные методы. fillCanvas: fillCanvas, fillList: fillList, randRange: randRange }  // --- // ПУБЛИЧНЫЕ МЕТОДЫ. // ---  /** * Я инициализирую компонент Alpine.js. */ function init() {  var startedAt = Date.now();  this.fillCanvas(); this.fillList();  this.duration = ( Date.now() - startedAt );  }  // --- // ПРИВАТНЫЕ МЕТОДЫ. // ---  /** * Я заполняю canvas случайными пикселями {X,Y}. */ function fillCanvas() {  var pixelCount = 200000; var canvas = this.$refs.canvas; var width = canvas.width; var height = canvas.height;  var context = canvas.getContext( "2d" ); context.fillStyle = "deeppink";  for ( var i = 0 ; i < pixelCount ; i++ ) {  var x = this.randRange( 0, width ); var y = this.randRange( 0, height );  // По мере добавления новых пикселей изменяем их непрозрачность. // Я надеялся, что это поможет показать потенциальную кластеризацию значений.             context.globalAlpha = ( i / pixelCount ); context.fillRect( x, y, 1, 1 );  }  }  /** * Я заполняю список случайными значениями от 0 до 9. */ function fillList() {  var list = this.$refs.list; var valueCount = 105; var values = [];  for ( var i = 0 ; i < valueCount ; i++ ) {  values.push( this.randRange( 0, 9 ) );  }  list.textContent = values.join( " " );  }  /** * Я генерирую случайное целое число между заданными min и max, включительно. */ function randRange( min, max ) {  return ( min + Math.floor( randFloat() * ( max - min + 1 ) ) );  }  }

Когда мы запускаем этот пример, мы получаем следующий результат:

Как я уже говорил выше, случайность с человеческой точки зрения очень размыта. Она больше связана с ощущениями, чем с математическими вероятностями. Например, вероятность того, что в одном ряду появятся два одинаковых значения подряд, равна вероятности того, что в одном ряду появятся два разных значения подряд. Но для человека это ощущается по-другому.

Тем не менее, если сравнить эти визуализации случайной генерации, ни одна из них не кажется существенно отличающейся с точки зрения распределения. Конечно, модуль Crypto значительно медленнее (половина из этого — затраты на выделение ресурсов под TypedArray). Но с точки зрения «ощущений» ни один из них не является лучше другого.

Скажу лишь, что при использовании генерации в утилите цветовой палитры мне, вероятно, не было необходимости использовать модуль Crypto — возможно, стоило остановиться на Math. Это гораздо быстрее и ощущается таким же случайным. Я буду использовать модуль Crypto для работы с криптографией на стороне клиента (чего мне пока не приходилось делать).