JSFiddle - React, Tailwind, and code Playground

by shtrih

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.js"></script>

CSS

html, body {
  margin: 0;
  padding: 0;
  background: #333;
}
canvas {
  display: block;
  position: absolute;
}
iframe {
  position: absolute;
  right: 0;
  height: 100%;
  width: 70%;
}

JavaScript

let counter,
  counterDelta,
  centerY,
  circleCenterY,
  animationsMap = new Map(),
  selectedKey,
  isCounterAnimation = false,
  isNotBottomTransparencyAnimation = true,
  sss = 0;
const data = [
  'Комбинезон химзащиты',
  'Рулон туалетной бумаги',
  'Респиратор',
  'Одноразовые перчатки',
  'Банка шпината',
  'Крышка от мусорного бака',
  'Ремонтный набор',
  'Антисептик',
  'Рука для фистинга имени Билли Херрингтона',
  'Сексуальные чулки',
  'Четырехлистный клевер',
  'Кукла вуду',
  'Набор выживальщика',
  'Наперсток удачи',
  'Переносной телепорт',
  'Футляр',
  'Жилетка Вассермана',
  'Стул мамы Мерфи',
  'Шиш кебаб',
  'Альпинистский трос',
  'Хакерский компьютер',
  'Корона короля петучей',
  'Благословение Хакса',
  'Порошок прозрения',
];

const radius = 120,
  diameter = radius * 2,
  count = 7,
  padding = 10,
  height_str = diameter / count - padding,
  counterInitial = -(height_str), //   + padding
  centerX = 80;

function setup() {
  frameRate(24);
  createCanvas(600, 400);
  centerY = (height - diameter) / 2;
  circleCenterY = centerY + radius;
  cyclesCount = (data.length - 1) * (height_str + padding) + padding;
  counter = counterInitial;
  textSize(23);
  textFont('Calibri');
  fill(200);

  idle = function() {
    animate(function(v) {
      isCounterAnimation = true;
      counter = v;
      counterDelta = 1;
    }, counter, counter + height_str + padding, 1000, function() {
      isCounterAnimation = false;
      counterDelta = 0;
      // setTimeout(idle, 1000);
    }, easeInOutCubic);
  }
  // idle();

  button = createButton('click me');
  button.position(width / 2, height);
  button.mousePressed(function() {
    if (!isCounterAnimation) {
      // counter = counterInitial;
      // const correction = data.length - selectedKey;
      const correction = 0;
      const randomKey = floor(random(data.length));
      //const randomKey = 0;
      button.elt.textContent = `Result ${randomKey} → ${data[data_key(data.length, 2...