mattdesl

; draws a rectangle on canvas
(fn draw-rect (x y w h) (do
  (canvas/line x y (+ x w) y)
  (canvas/line (+ x w) y (+ x w) (+ y h))
  (canvas/line x (+ y h) (+ x w) (+ y h))
  (canvas/line x y x (+ y h))
))

; array utility - for-each
(fn each (arr itr)

michaelwooley

import type { Handle } from '@sveltejs/kit';
import config from '../svelte.config';
import { dev } from '$app/env';

/**
 * Factory that generates a function to update response headers in dev mode in order to
 * incorporate headers specified as part of vite config. If we don't do this, then fetching,
 * e.g., html @ "/" in dev mode will not include our headers!
 *
 * In prod, need to use adapter-specific means to specify custom headers.

mattdesl

Hicetnunc.xyz IPFS Pinning

💡 These steps will become easier, less technical, and more accessible as more open tools begin to emerge around Hicetnunc pinning. The steps below assume macOS but should work similarly across other platforms. This gist can be seen as a working draft toward more polished documentation; if you see any issues please post a comment below.

Basic Idea

Hicetnunc.xyz aims to be "decentralized" which means the OBJKTs are owned by the users, not the platform. So, in theory, if hicetnunc disappears, another marketplace could emerge on the same (user-owned) assets. But, this paradigm of decentralization means that you own the assets; so the responsibility to maintain them lies on the users, not the platform.

Of course, hicetnunc and some of its users will probably also make an effort to help maintain all the assets on its platform; but you should not rely purely on that, as it goes against the core ethos of dec

marioecg

#define PI 3.1415926538

uniform float time;
varying vec2 vUv;

float map(float value, float inMin, float inMax, float outMin, float outMax) {
  return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
}

// https://iquilezles.org/www/articles/distgradfunctions2d/distgradfunctions2d.htm

marioecg

  const int AMOUNT = 25;

  void main () {
    float TIME = uTime * 1.0;
    
    vec2 uv = scale * (gl_FragCoord.xy - .5 * uResolution.xy) / uResolution.y;
    // uv *= rotate(uv, angle1);
    uv.x *= 0.85;
    uv.y += 10.;

pigeonfresh

.booking-content-wrapper {
    position: relative;
    min-height: 15rem;
    padding: 0 0 3rem;

    @include theme($laColeccion $grandFiestaAmericana) {
      color: #fff;
      &::before {
        position: absolute;
        top: -1rem;

mattdesl

canvas-sketch + hooks test

Inspired by React hooks, seeing how it could work within canvas-sketch.

The hooks.js includes some limited features (mostly just registering unload() event and passing props to hooks), and also exports three basic hook examples: MousePosition, GUI, and KeyPress.

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:

chrisrzhou

function useResponsiveCanvas<T>(
  initialSize?: MinMaxPair,
): State {
  const canvasRef = useRef<HTMLCanvasElement>();
  const mountRef = useRef<HTMLDivElement>();
  const [size, setSize] = useState<MinMaxPair>([0, 0]);

  // set initial svg and size
  useEffect(() => {
    const canvas = document.createElement('canvas');

mattdesl

const sketcher = require('canvas-sketch-tool'); // not yet public

// Import geometry & utilities
const createRegl = require('regl');
const createPrimitive = require('primitive-icosphere');
const createCamera = require('perspective-camera');
const glslify = require('glslify');
const hexRgb = require('hex-rgb');

// Utility to convert hex string to [ r, g, b] floats