martinlaxenaire

/***
 Helper class to create text textures easily with curtains.js
 Supports:
    - vertical and horizontal text alignements
    - lowercase and uppercase
    - filled or stroked text

 Does not support:
    - right to left text (TODO)
    - custom letter spacing

vorg

//MIT License
//Copyright (c) 2021 Felix Westin
//Source: https://github.com/Fewes/MinimalAtmosphere

//Ported to GLSL by Marcin Ignac

#ifndef ATMOSPHERE_INCLUDED
#define ATMOSPHERE_INCLUDED

// -------------------------------------

luruke

/**
 * Try to fix iOS lock on audio.
 *
 * By default, audio on iOS is locked until a sound is played within a user interaction,
 * and then it plays normally the rest of the page session.
 */

// Inspired from https://github.com/goldfire/howler.js/blob/2.0/src/howler.core.js#L212

export default class IosUnlock {

donmccurdy

These are the build tools I prefer to use when starting a new JavaScript or TypeScript library. Most libraries I write run both in the browser and in node.js. Each project needs to be lightweight, and to minimize maintenance. And I need build chains for those libraries to pretty much "just work". That last part has become more important over time, as I've maintained more libraries and generally had less time to deal with dependencies and build system issues. For web applications, as opposed to libraries consumed in other projects, these choices may or may not make sense. These are opinionated choices, and will probably change over time.

Almost always:

• microbundle: Zero-config Rollup bundler, with optional TypeScript support
• tape: Test runner
• tap-spec: Clean test output

Occasionally:

donmccurdy

This post has been moved to my blog, under Color Management in three.js.

mattdesl

high res tiled rendering with canvas-sketch

Copy these files in the gist to a new folder. Generate a package.json:

cd folder-with-code
npm init -y

Then install deps:

Bleuje

// by Etienne JACOB
// uses a formula inspired by @ozachou_g (on twitter)

//click on canvas to generate a new one
//press key to save

float x,y,z,t;

float[] A = new float[12];
float[] f = new float[12];

m4n1ok

export const isAutoplaySupported = () => {
  // Detect if user can autoplay inline video
  // Works when user is on low-battery mode on IOS
  // Return promise from video.play
  const video = document.createElement('video')
  video.src = 'data:video/mp4;base64,AAAAIGZ0eXBtcDQyAAAAAG1wNDJtcDQxaXNvbWF2YzEAAATKbW9vdgAAAGxtdmhkAAAAANLEP5XSxD+VAAB1MAAAdU4AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAACFpb2RzAAAAABCAgIAQAE////9//w6AgIAEAAAAAQAABDV0cmFrAAAAXHRraGQAAAAH0sQ/ldLEP5UAAAABAAAAAAAAdU4AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAoAAAAFoAAAAAAAkZWR0cwAAABxlbHN0AAAAAAAAAAEAAHVOAAAH0gABAAAAAAOtbWRpYQAAACBtZGhkAAAAANLEP5XSxD+VAAB1MAAAdU5VxAAAAAAANmhkbHIAAAAAAAAAAHZpZGUAAAAAAAAAAAAAAABMLVNNQVNIIFZpZGVvIEhhbmRsZXIAAAADT21pbmYAAAAUdm1oZAAAAAEAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAw9zdGJsAAAAwXN0c2QAAAAAAAAAAQAAALFhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAoABaABIAAAASAAAAAAAAAABCkFWQyBDb2RpbmcAAAAAAAAAAAAAAAA

bvaughn

const createLogger = (backgroundColor, color) => {
  const logger = (message, ...args) => {
    if (logger.enabled === false) {
      return;
    }

    console.groupCollapsed(
      `%c${message}`,
      `background-color: ${backgroundColor}; color: ${color}; padding: 2px 4px;`,
      ...args

TimvanScherpenzeel

Implementing audio and video autoplay unlocking

Due to recent changes in the autoplay policy of Chrome 66 developers of interactive experiences on the web are facing new challenges regarding audio and video autoplay. The new policy has unfortunately broken many of the older experiences that rely on autoplaying audio and video.

So how to move forward?

Previous solutions

Previously developers used to face this issue on iOS mobile devices where the audio context was locked. Most developers fixed this by using the initial touch event of a user to unlock the audio.