The above GIF was rendered with Canvas2D and JavaScript. I used texel, a tool I am developing but have not yet released.
If you want to try this very experimental tool, install the latest working version like so:
npm install texel@1.0.15 --global
/** | |
* General-purpose NodeJS CLI/API wrapping the Stable-Diffusion python scripts. | |
* | |
* Note that this uses an older fork of stable-diffusion | |
* with the 'txt2img.py' script, and that script was modified to | |
* support the --outfile command. | |
*/ | |
var { spawn, exec } = require("child_process"); | |
var path = require("path"); |
import React, { useEffect } from 'react' | |
import gsap from 'gsap' | |
import { useFrame } from '@react-three/fiber' | |
// sync gsap raf to r3f raf | |
gsap.ticker.remove(gsap.updateRoot) | |
export const GsapTicker = () => { | |
const pg = React.useRef(0) | |
gsap.ticker.remove(gsap.updateRoot) |
<!doctype html> | |
<div id="sketch"></div> | |
<style> | |
body { | |
margin: 0; | |
overflow: hidden; | |
background: #383838; | |
} | |
#sketch { |
The above GIF was rendered with Canvas2D and JavaScript. I used texel, a tool I am developing but have not yet released.
If you want to try this very experimental tool, install the latest working version like so:
npm install texel@1.0.15 --global
"use strict"; | |
// animation utils | |
// =============== | |
const trackTime = id => { | |
const [entry] = performance.getEntriesByName(id); | |
if (!entry) { | |
performance.mark(id); |
A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.
Name | Stars | Last Commit | Description |
---|---|---|---|
three.js | ![GitHub |
fire(); | |
setInterval(fire, 300); | |
setInterval(unfire, 500); | |
function fire() { | |
$('#can').trigger(TRUMP.main.events[0]); | |
} |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
/* bling.js */ | |
window.$ = document.querySelectorAll.bind(document); | |
Node.prototype.on = window.on = function (name, fn) { | |
this.addEventListener(name, fn); | |
}; | |
NodeList.prototype.__proto__ = Array.prototype; |
$ ffmpeg -i input.mp4 -vcodec h264 -acodec mp2 output.mp4 |