Skip to content

Instantly share code, notes, and snippets.

@jniac
jniac / SimpleSwitch.tsx
Created November 24, 2021 09:05
React TSX Gist
import React from 'react'
import * as Animation from 'utils/Animation'
import * as MathUtils from 'math/utils'
import { Observable } from 'utils/Observable'
import { useComplexEffects } from 'utils/react'
import './Switch.css'
export const SimpleSwitch: React.FC<{
index?: number
paths?: React.ElementType[]
@jniac
jniac / bench.js
Created April 29, 2021 09:22
js bench
const map = new Map()
export const addToBench = (msg, cb) => {
if (typeof msg === 'function') {
msg = msg.name
}
const index = map.size
map.set(msg, {
index,
msg,
@jniac
jniac / easing.js
Last active April 30, 2021 21:50
easeInout, pcurve and math utilities
export const clamp01 = x => x < 0 ? 0 : x > 1 ? 1 : x
export const clamp = (x, min = 0, max = 1) => x < min ? min : x > max ? max : x
export const lerp = (a, b, x) => a + (b - a) * clamp01(x)
export const inverseLerp = (x, min, max) => clamp01((x - min) / (max - min))
export const map = (x, inMin, inMax, outMin, outMax) => lerp(outMin, outMax, inverseLerp(x, inMin, inMax))
@jniac
jniac / Variable.ts
Created April 15, 2021 16:49
Little value wrapper, animation purpose (tracking value changes)
/**
* TO BE DISCUSSED.
* This is a little wrapper that allows to animate any "abstract" variable.
* Callback may be provided to react on any value change.
* "old" allows to know the "old" (previous) value.
*/
type Callback = (variable: Variable) => void
export default class Variable {
@jniac
jniac / three-stage.js
Created January 12, 2021 12:32
quick "stage" script for prototyping w threejs
import { WebGLRenderer, PerspectiveCamera, Scene } from 'https://threejs.org/build/three.module.js'
import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js'
const renderer = new WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.append(renderer.domElement)
const camera = new PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.z = 5
@jniac
jniac / iterateDimensionsFrom.js
Last active November 25, 2020 23:22
get a n-dimensions array, iterate through indexes from a specified dimension
/**
* returns [1, 4, 12] from [4, 3, 2]
* @param {number[]} array
*/
function getArrayScale (array) {
let scale = 1
return array.map(dim => {
const x = scale
scale *= dim
return x
@jniac
jniac / index.mjs
Last active November 22, 2020 21:42
download google fonts (with node)
import fetch from 'node-fetch'
import fs from 'fs-extra'
const safeName = str => str.replace(/\W/g, '-')
const parseFontFace = fontFace => {
const [, url] = fontFace.match(/url\((.*?)\)/)
const [, family] = fontFace.match(/font-family: '(.*?)';/)
const [, style] = fontFace.match(/font-style: (.*?);/)
const [, weight] = fontFace.match(/font-weight: (.*?);/)
const removeHeadingWhitespaces = str => {
const lines = str.split('\n')
while (lines.length > 0 && /^\s*$/.test(lines[0])) {
lines.shift()
}
while (lines.length > 0 && /^\s*$/.test(lines[lines.length - 1])) {
lines.pop()
@jniac
jniac / html.js
Last active November 18, 2022 09:25
html generator based on template literals
// https://gist.github.com/jniac/1f1b8e57dbb320138af00680c090f94e
const parser = new DOMParser()
const html = (strings, ...inserts) => {
if (typeof strings === 'string') {
// html is used as a regular function, eg:
// html(`<div>${foo}</div>`)
@jniac
jniac / getVertigoCamera.js
Created June 23, 2020 13:17
get a "Vertigo" Camera for THREE
let VertigoCamera
const init = THREE => {
const {
Camera,
PerspectiveCamera,
OrthographicCamera,