ertdfgcvb

#!/bin/sh
# ------------------------------------------------------------------------------
# Uses FFmpeg to create an H.264 encoded MPEG-4 movie at 30 fps from 
# an image sequence; filesize/quality can be tuned with the second parameter.
#
# ------------------------------------------------------------------------------
# Usage:
# > sh makemovie.sh imageFolder 20
# - imageFolder is a folder containing the images
# - 20 is an optional constant rate factor value,

esnho

#!/bin/bash

for folder in ./* ; do
  echo -e "${folder}"
  # ffmpeg -i input.file -q:v 0 -g 1 output.file
  # ffmpeg -r 1/5 -i img%03d.png -c:v libx264 -vf fps=25 -pix_fmt yuv420p out.mp4
  fBasename=$(basename "${folder}")
  echo -e "${fBasename} ---"
  ffmpeg -r 24 -i "${folder}/%04d.png" -c:v libx264 -q:v 0 -g 1 -vf fps=24 -pix_fmt yuv420p ${fBasename}.mp4
  # ffmpeg -r 24 -i "./Cube/%04d.png" -c:v libx264 -q:v 0 -g 1 -vf fps=24 -pix_fmt yuv420p test.mp4

whoisryosuke

The hook

useScrollPosition.js:

import { useRef, useLayoutEffect } from 'react'

const isBrowser = typeof window !== `undefined`

function getScrollPosition({ element, useWindow }) {

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:

mattdesl

canvas-sketch 1.0 Wishlist

• Parcel backend instead of browserify
• Better support for non-canvas sketches, e.g. rendering SVG or plain data sketch
• Better support in Glitch.com and similar sandboxes
• GUI parameters using decorator pattern in code
• HUD for things like timeline, rulers, play/pause button, frame number, etc
• Better p5.js support out of the box (copy + paste p5.js references should work)
• Environments:
• Browser

CharStiles

#ifdef GL_ES
precision highp float;
#endif

// These are defined by Kodelife, or whatever environment you are using.
uniform float time;
uniform vec2 resolution;

varying vec3 v_normal;
varying vec2 v_texcoord;

mattdesl

canvas-sketch + TypeScript

After installing canvas-sketch globally, create a new folder to hold your sketch:

mkdir my-sketch
cd my-sketch

Now run the following to generate a new default .ts file, package.json, etc:

mattdesl

MP4 from frame sequence + audio file

See the resulting 2K video on Vimeo

Let's say you export a sequence of PNGs from canvas-sketch animation into a tmp/ folder. If you have an audio file, you can use the below FFMPEG command to mix the frames and audio into a high quality MP4 file that can be uploaded to Twitter, Vimeo, etc.

Beat-Sync Generative Art

Let's say your canvas-sketch program isn't an animation, but instead exports hundreds of variations on a generative algorithm. You want to mash them all together to create a video that feels somewhat in sync with the music.

dominictarr

Hey everyone - this is not just a one off thing, there are likely to be many other modules in your dependency trees that are now a burden to their authors. I didn't create this code for altruistic motivations, I created it for fun. I was learning, and learning is fun. I gave it away because it was easy to do so, and because sharing helps learning too. I think most of the small modules on npm were created for reasons like this. However, that was a long time ago. I've since moved on from this module and moved on from that thing too and in the process of moving on from that as well. I've written way better modules than this, the internet just hasn't fully caught up.

@broros

otherwise why would he hand over a popular package to a stranger?

If it's not fun anymore, you get literally nothing from maintaining a popular package.

One time, I was working as a dishwasher in a restu

getify

"use strict";

[foo,bar] = TNG(foo,bar);
// NOTE: intentionally not TNG(..) wrapping useBaz(), so that it's
// basically like a "custom hook" that can be called only from other
// TNG-wrapped functions

function foo(origX,origY) {
   var [x,setX] = useState(origX);
   var [y,setY] = useState(origY);