Jaume Sanchez spite

## gist:055a20748ef8a86bc23933d5550b2087
#if GL_FRAGMENT_PRECISION_HIGH == 1
  precision highp int;
  precision highp float;
#endif
uniform sampler2D uSampler;
uniform float time;
uniform float baseRotation1;
uniform float rotationSpeed1;
uniform float baseRotation2;
uniform float rotationSpeed2;

## superellipsoid
// https://en.wikipedia.org/wiki/Superellipsoid

function c(w, m) {
  const cv = Math.cos(w);
  return Math.sign(cv) * Math.abs(cv) ** m;
}

function s(w, m) {
  const sv = Math.sin(w);
  return Math.sign(sv) * Math.abs(sv) ** m;

## gist:051604efd1d971ab4b6ef1bc1ae2636e
function getTileFromLatLon(zoom, lat, lon) {
  const width = Math.pow(2, zoom);
  const height = Math.pow(2, zoom);
  const latRad = (lat * Math.PI) / 180;
  const x = ~~((width * (lon + 180)) / 360);
  const y = ~~(((1 - Math.asinh(Math.tan(latRad)) / Math.PI) / 2.0) * height);
  return {zoom, x, y};
}

## superellipse
// superellipse / Lamé curve
// https://en.wikipedia.org/wiki/Superellipse

const a = 0.4; // semi-diameter
const b = 0.4; // semi-diameter
const n = 1.5; // curve (<1, 1-2, >2)
const c = Math.cos(gamma); // gamma 0-2π
const s = Math.sin(gamma); // gamma 0-2π
const x = Math.pow(Math.abs(c), 2 / n) * a * Math.sign(c);
const y = Math.pow(Math.abs(s), 2 / n) * b * Math.sign(s);

## gist:b717794dc383bac91d856ad8d723e861
// Keep the tab busy with audio.

const audioCtx = new AudioContext();

const gainNode = audioCtx.createGain();
gainNode.gain.value = 0.1;
gainNode.connect(audioCtx.destination);

const oscillatorNode = audioCtx.createOscillator();
oscillatorNode.type = "square";

## WebGL NFT
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL NFT</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
    />
    <meta property="og:image" content="thumbnail.png" />

## index.svg

      
              1 file
            
          
              2 forks
            
          
              0 comments
            
          
              3 stars
            
          
                spite
                / index.svg
            
            
              Last active
              March 20, 2021 13:51
            
              
                WebGL in SVG via foreignObject
              
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## video from png ccapture
ffmpeg -r 60 -i %07d.png -c:v libx264 -vf fps=60 -crf 4 -preset slow -pix_fmt yuv420p out.mp4

## canals and bridges
KSKkMhIE7eo2t4up3NYvbKdbqbcdrsnbv7uJ5tNvR6tWvh81i_m23G-G73q-m-3wgumSvpecdrsnbv7uJ5tNfk_a9GzXL6r5-9EnrF0NleT946WZP3e3dTzbb_I916V73oh810_243Y-W9P-vnvcNcuF0TpbTdjrbldwtb3dNJvt5j0XrXNbjGz30_24P2vV-90kbv8x5F0t7umkXbwHpvWvGz30_24P2v5-dLrbg-Fpu919ojbm8e5hwNluV2N3i2dXDxolY0k8ab_I916NkvFdNtvN_N2rV-18-eSytOuZz7lrF0tzu2dXTzrt5j0Xr3Q_m23Y-a1f18-PSdfx8PLcjiXH3M52LRDnbKdbqbld7ubSebwHp3a9Gz3G-asfVr_n-3TButxjiXH3e5aBdTp3U3K7mk328R6NkvF9b8bs-q-m-3t0-S4v3vHCcbhHF3M5GO3C6p0bqbldwtbJeTz3m3_9Gz3i_W9P-vPm-nPu2QPxfpffE42C3e5GOPleTdrsbAeLynk3s92vPkfRfj9X9P-vPgEtdeE9C-_4wfO3mA3M5avcNluy1t7uB4tEv16Nbv97Nkvp9b8bs-q-uEytPuWNXbo7yF325u5ttwtJxtFuRyrjnJXbqb-eD5n2vyvy_N--oU3jqt5t7cbCcbhHFvOemcN3e39_9GzPtfjfr_n-3Hru_A11s-_xstqde7O3aCcbhbUcrjrZz1epa4UtgqmSXrsnb3k82mXj0b-eD5n2P2f_ffe-G_-R_-MsNmdV78WqduVTgaBVjrrV2tEvJ5128a-eD5X0vyf_fXS-m9-49vprthdM7q25tV7crJxtFuRytOuZzNcuF0tpuqy11A8WiXTzbbGNSv971Q_p9b8bs-q-5-9MWnu2G2ysrar5t1OnW_2E4txjiXH3e5GOvguNVtNvGp3_9qF9T7bj-Y-V-N-vPz8NUdy6012xOmdVb7caxbLfbCcbhbUcrjamc7lb4cLobKdbqbcdtzimbXt7iGgXLyrJ5128R6Nb

## streets and gardens
KSzZ2xDCZo15X5Vxzwhl3FLPQ_lzzTml3O-I6XT-s63X-Qb5F3zTvl3gLPGXeV_wwfn_L3fC-b5fU-r7fv-D--jq-m9H5-ng_16-ZelH-_K4nDLvL_Bzi8SZ5JwvdWeE9rplnVLvvWeot8i7ne-Gc5y4i8qcoee_L3lnxLvlXeUv86_n5-e-H_-FSXeyu8j__p6z3UX5NvP_9VxzwhfX8Dkfp8Tml3OLPi_10zwqff9Dtfy9TvfD_jyF5V5PPXen_D2f5_T4fL-j6lX3Lzw8fvv8x-fGuzTdl38KP_VeF8whfXs8AZ5lzzTmf7s8I6XTLPrWeftIP0GkXcLzTvl3gLPG-V5zwwl3pLPYXe5u8E_3zLPq-19g8Mf59_i8x--Uw-J--D2_C3n6_m3H-_K4nDLvL_BzvU_Jwi82Z5R0vm_Z1vvGkHa-i7ne-G8Hj-q8nn-O9HsLvc-J8zb5fU-r7F5Z_v3Hk-I-i82--0yvzWe1vI-5ZfYr8CX5puv59yvzrgfOsIvL_BzvUWknM-2Z5R0vmWknVDz7rF5h2zLulne-Gc5y4zrzlnn-Od5B7zL3lnx-W_H1LvuXem-XY-X_-D5f_my_eW5hti8CX5puv5VkH-KvC_5xg8u4HIDzLlfzs825HRLvm_Z1vv_h2zLuf6t8G8HjLvK-55vT-B7vc-J8vlXeU-r7ln5-e-H_-we9ZsvnVkH2_C3n6Czbef8r8K4nDLz7inZegs8SZ5JwvdWeE9rpn5Z1vvWeo9Lulne-Gc5y4zrzlnn-Od5B7zL3fCv8W_H1-6eRemPIv3TkH_-nRW_GtSve9Zsz7ZfY7LcF5puv59yvzrgfO87ifg8Llfzs825HR-a6nVLvv_h2zLuf69bxfMu8q8nnLvT-B7zL3fCv8W_H1Lzr7fm-79f4-PXV6Rrve9ZsvnVeYr8C3n6_mX5yvvCWeOs8uY5BzzLlfzs82Z5R0vmWeW97rlHaLv4We6t8Gc5y4vKXeeu8O9HsLvc-J8zb5lH1Dzr7ln5L
	#if GL_FRAGMENT_PRECISION_HIGH == 1
	precision highp int;
	precision highp float;
	#endif
	uniform sampler2D uSampler;
	uniform float time;
	uniform float baseRotation1;
	uniform float rotationSpeed1;
	uniform float baseRotation2;
	uniform float rotationSpeed2;
	// https://en.wikipedia.org/wiki/Superellipsoid

	function c(w, m) {
	const cv = Math.cos(w);
	return Math.sign(cv) * Math.abs(cv) ** m;
	}

	function s(w, m) {
	const sv = Math.sin(w);
	return Math.sign(sv) * Math.abs(sv) ** m;
	function getTileFromLatLon(zoom, lat, lon) {
	const width = Math.pow(2, zoom);
	const height = Math.pow(2, zoom);
	const latRad = (lat * Math.PI) / 180;
	const x = ~~((width * (lon + 180)) / 360);
	const y = ~~(((1 - Math.asinh(Math.tan(latRad)) / Math.PI) / 2.0) * height);
	return {zoom, x, y};
	}
	// superellipse / Lamé curve
	// https://en.wikipedia.org/wiki/Superellipse

	const a = 0.4; // semi-diameter
	const b = 0.4; // semi-diameter
	const n = 1.5; // curve (<1, 1-2, >2)
	const c = Math.cos(gamma); // gamma 0-2π
	const s = Math.sin(gamma); // gamma 0-2π
	const x = Math.pow(Math.abs(c), 2 / n) * a * Math.sign(c);
	const y = Math.pow(Math.abs(s), 2 / n) * b * Math.sign(s);
	// Keep the tab busy with audio.

	const audioCtx = new AudioContext();

	const gainNode = audioCtx.createGain();
	gainNode.gain.value = 0.1;
	gainNode.connect(audioCtx.destination);

	const oscillatorNode = audioCtx.createOscillator();
	oscillatorNode.type = "square";
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<title>WebGL NFT</title>
	<meta
	name="viewport"
	content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
	/>
	<meta property="og:image" content="thumbnail.png" />