How to use the @remirror/core.randomInt function in @remirror/core

To help you get started, we’ve selected a few @remirror/core examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-state.ts View on Github external
}

    this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    // get the time past the previous frame
    const currentTime = new Date().getTime();
    if (!this.lastTime) {
      this.lastTime = currentTime;
    }
    const dt = (currentTime - this.lastTime) / 1000;
    this.lastTime = currentTime;

    if (this.shakeTime > 0) {
      this.shakeTime -= dt;
      const magnitude = (this.shakeTime / this.shakeTimeMax) * this.shakeIntensity;
      const shakeX = randomInt(-magnitude, magnitude);
      const shakeY = randomInt(-magnitude, magnitude);
      (this.view.dom as HTMLElement).style.transform = `translate(${shakeX}px,${shakeY}px)`;
    }
    this.drawParticles();
    requestAnimationFrame(this.loop);
  };
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-state.ts View on Github external
this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);

    // get the time past the previous frame
    const currentTime = new Date().getTime();
    if (!this.lastTime) {
      this.lastTime = currentTime;
    }
    const dt = (currentTime - this.lastTime) / 1000;
    this.lastTime = currentTime;

    if (this.shakeTime > 0) {
      this.shakeTime -= dt;
      const magnitude = (this.shakeTime / this.shakeTimeMax) * this.shakeIntensity;
      const shakeX = randomInt(-magnitude, magnitude);
      const shakeY = randomInt(-magnitude, magnitude);
      (this.view.dom as HTMLElement).style.transform = `translate(${shakeX}px,${shakeY}px)`;
    }
    this.drawParticles();
    requestAnimationFrame(this.loop);
  };
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-state.ts View on Github external
public spawnParticles = throttle(100, () => {
    const { selection } = this.view.state;
    const coords = this.view.coordsAtPos(selection.$anchor.pos);

    // Move the canvas
    this.canvas.style.top = `${window.scrollY}px`;
    this.canvas.style.left = `${window.scrollX}px`;

    const node = document.elementFromPoint(coords.left - 5, coords.top + 5);
    if (!node) {
      return;
    }

    const numParticles = randomInt(this.particleRange.min, this.particleRange.max);
    const textColor = getRGBComponents(node);
    for (let ii = 0; ii < numParticles; ii++) {
      const colorCode = this.colors[ii % this.colors.length];
      const r = parseInt(colorCode.slice(1, 3), 16);
      const g = parseInt(colorCode.slice(3, 5), 16);
      const b = parseInt(colorCode.slice(5, 7), 16);
      const color = [r, g, b];

      this.particles[ii] = this.particleEffect.createParticle({
        x: coords.left + 10,
        y: coords.top - 10,
        color,
        textColor,
        ctx: this.ctx,
        canvas: this.canvas,
      });
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x: x + 20,
      y: y - 10,
      alpha: 1,
      color,
      size: randomInt(5, 12),
      drag: 0.92,
      vx: randomInt(-3, 5),
      vy: randomInt(-3, 5),
      wander: 0.15,
      theta: (randomInt(0, 360) * Math.PI) / 180,
    };
  },
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x: x + 20,
      y: y - 10,
      alpha: 1,
      color,
      size: randomInt(5, 12),
      drag: 0.92,
      vx: randomInt(-3, 5),
      vy: randomInt(-3, 5),
      wander: 0.15,
      theta: (randomInt(0, 360) * Math.PI) / 180,
    };
  },
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
updateParticle({ particle, ctx }) {
    particle.x += particle.vx;
    particle.y += particle.vy;
    particle.vx *= particle.drag ?? DEFAULT_SPAWNING_DRAG;
    particle.vy *= particle.drag ?? DEFAULT_SPAWNING_DRAG;
    particle.theta = (particle.theta ?? createSpawningTheta()) + randomInt(-0.5, 0.5);
    particle.vx += Math.sin(particle.theta) * 0.1;
    particle.vy += Math.cos(particle.theta) * 0.1;
    particle.size *= 0.96;

    ctx.fillStyle = `rgba(${particle.color[0]},${particle.color[1]},${particle.color[2]},${particle.alpha})`;
    ctx.beginPath();
    ctx.arc(Math.round(particle.x - 1), Math.round(particle.y - 1), particle.size, 0, 2 * Math.PI);
    ctx.fill();
  },
};
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x: x + 20,
      y: y - 10,
      alpha: 1,
      color,
      size: randomInt(5, 12),
      drag: 0.92,
      vx: randomInt(-3, 5),
      vy: randomInt(-3, 5),
      wander: 0.15,
      theta: (randomInt(0, 360) * Math.PI) / 180,
    };
  },
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x,
      y: y + 10,
      alpha: 1,
      color,
      size: randomInt(2, 8),
      drag: DEFAULT_SPAWNING_DRAG,
      vx: randomInt(-3, 3),
      vy: randomInt(-3, 3),
      wander: 0.15,
      theta: createSpawningTheta(),
    };
  },
  updateParticle({ particle, ctx }) {
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x,
      y: y + 10,
      alpha: 1,
      color,
      size: randomInt(2, 8),
      drag: DEFAULT_SPAWNING_DRAG,
      vx: randomInt(-3, 3),
      vy: randomInt(-3, 3),
      wander: 0.15,
      theta: createSpawningTheta(),
    };
  },
  updateParticle({ particle, ctx }) {
github ifiokjr / remirror / @remirror / extension-epic-mode / src / epic-mode-effects.ts View on Github external
createParticle({ x, y, color }) {
    return {
      x: x + 20,
      y: y - 10,
      alpha: 1,
      color,
      size: randomInt(5, 12),
      drag: 0.92,
      vx: randomInt(-3, 5),
      vy: randomInt(-3, 5),
      wander: 0.15,
      theta: (randomInt(0, 360) * Math.PI) / 180,
    };
  },