
Created 2025-10-14
/** * ============================================================================ * = Animation Experiments = * ============================================================================ * * This is a series of animation experiments I created in Recho. */ const TAU = Math.PI*2; const animationRate = recho.number(1, {min: 1, max: 4, step: 1}); const cols = 75; const rows = 18; const aspectRatio = cols/rows*0.5; const frameRate = 60; const loopFrames = Math.floor(60/animationRate); const frameCount = recho.interval(1000/frameRate); const progress = (frameCount) => frameCount%loopFrames/loopFrames; //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ..................................00000000................................. //➜ ................................000000000000............................... //➜ ...............................00000000000000.............................. //➜ ...............................00000000000000.............................. //➜ ...............................00000000000000.............................. //➜ ................................000000000000............................... //➜ ..................................00000000................................. //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... //➜ ........................................................................... { const backgroundChar = '.'; const foregroundChar = '0'; const baseRadius = 0.3; const radiusAmplitude = 0.1; const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{ return new Array(cols).fill(0).map((_,c,colArray)=>{ const t = progress(frameCount); const y = r/rowArray.length-0.5; const x = (c/colArray.length-0.5)*aspectRatio; const radius = Math.sqrt(x*x+y*y); const char = radius > baseRadius+radiusAmplitude*Math.sin(t*TAU) ? backgroundChar : foregroundChar; return char; }).join(''); }).join('\n'); echo(frame); } //➜ {---CLE}{CI----}{-IRCLE}{CIR---}{------}{------}{CIRCLE}{C-----}{CIRCLE}{-- //➜ ---}{CIRC--}{----LE}{CIRC--}{------}{------}{------}{CIRCLE}{------}{CIRC-- //➜ {-IRCLE}{------}{CIRCLE}{------}{CIRCLE}{CI----}{----LE}{CIRC--}{---CLE}{C- //➜ -LE}{CI----}{-IRCLE}{------}{CIRCLE}{CIRCLE}{CI----}{--RCLE}{C-----}{CIRCLE //➜ {CIRCLE}{----LE}{CIR---}{--RCLE}{CIRCLE}{CIRCLE}{------}{CIRCLE}{----LE}{CI //➜ CLE}{C-----}{CIRCLE}{-----E}{CIRCL-}{-----E}{CIRCL-}{----LE}{CIR---}{-IRCLE //➜ {CIRCL-}{---CLE}{C-----}{CIRCLE}{------}{---CLE}{CIR---}{-IRCLE}{-----E}{CI //➜ CLE}{------}{CIRCL-}{---CLE}{C-----}{------}{-IRCLE}{-----E}{CIR---}{--RCLE //➜ {CIRC--}{--RCLE}{------}{CIRC--}{---CLE}{------}{CIRC--}{--RCLE}{------}{CI //➜ CLE}{------}{CIRC--}{--RCLE}{------}{CIRC--}{--RCLE}{------}{CIRC--}{--RCLE //➜ {CIRC--}{--RCLE}{------}{CIRC--}{---CLE}{------}{CIRC--}{--RCLE}{------}{CI //➜ CLE}{------}{CIRCL-}{---CLE}{C-----}{------}{-IRCLE}{-----E}{CIR---}{--RCLE //➜ {CIRCL-}{---CLE}{C-----}{CIRCLE}{------}{---CLE}{CIR---}{-IRCLE}{-----E}{CI //➜ CLE}{C-----}{CIRCLE}{-----E}{CIRCL-}{-----E}{CIRCL-}{----LE}{CIR---}{-IRCLE //➜ {CIRCLE}{----LE}{CIR---}{--RCLE}{CIRCLE}{CIRCLE}{------}{CIRCLE}{----LE}{CI //➜ -LE}{CI----}{-IRCLE}{------}{CIRCLE}{CIRCLE}{CI----}{--RCLE}{C-----}{CIRCLE //➜ {-IRCLE}{------}{CIRCLE}{------}{CIRCLE}{CI----}{----LE}{CIRC--}{---CLE}{C- //➜ ---}{CIRC--}{----LE}{CIRC--}{------}{------}{------}{CIRCLE}{------}{CIRC-- { const backgroundChars = '{------}'; const foregroundChars = '{CIRCLE}'; const layers = recho.number(3, {min: 1, max: 6, step: 1}); const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{ return new Array(cols).fill(0).map((_,c,colArray)=>{ const t = progress(frameCount); const y = r/rowArray.length-0.5; const x = (c/colArray.length-0.5)*aspectRatio; const backgroundCharOffset = r*Math.floor(backgroundChars.length/2); const backgroundCharIndex = (c+backgroundCharOffset)%backgroundChars.length; const foregroundCharOffset = r*Math.floor(foregroundChars.length/2); const foregroundCharIndex = (c+foregroundCharOffset)%foregroundChars.length; const radius = Math.sqrt(x*x+y*y); const char = Math.sin(radius*TAU*layers+t*TAU) > 0 ? backgroundChars[backgroundCharIndex] : foregroundChars[foregroundCharIndex]; return char; }).join(''); }).join('\n'); echo(frame); } //➜ ____________/______________\//\\/___________//\\//____________\\/__________ //➜ _________\//______________//\\//\\//_____\//\\//\\_______________\_________ //➜ _______\//\\______________\\//\\//\\//_\//\\//\\//_______________/\\/______ //➜ ____\\//\\//______________//\\//\\//\__/\\//\\//\\______________\\//\\/____ //➜ __\\//\\//\\______________\\//\\//\\____//\\//\\//______________//\\//\\/__ //➜ _\//\\//\\//\______________/\\//\\//____\\//\\//\\______________\\//\\//\\/ //➜ //\\//\\//\\//_______/\\//\______/\\_____/\______/\\//_________\//\\//\\//\ //➜ \\//\\//\\//\\____//\\//\\//\___________________\\//\\//\_____//\\//\\//\\/ //➜ //\\//\\//\\//\\//\\//\\//\\//\_______________\\//\\//\\//\\_/\\//\\//\\//\ //➜ \\//\\//\\//\\/__\//\\//\\//\\//\__/\\//\___\\//\\//\\//\\/___//\\//\\//\\/ //➜ //\\//\\//\\//\_//\\//\\//\\//_______________/\\//\\//\\//\\//\\//\\//\\//\ //➜ \\//\\//\\//\\_____/\\//\\//___________________/\\//\\//\\____//\\//\\//\\/ //➜ //\\//\\//\\/_________\\//\______/\_____//\______/\\//\_______\\//\\//\\//\ //➜ _\//\\//\\//______________//\\//\\//____\\//\\//\______________/\\//\\//\\/ //➜ ___\//\\//\\______________\\//\\//\\____//\\//\\//______________//\\//\\//_ //➜ _____\//\\//______________//\\//\\//\__/\\//\\//\\______________\\//\\//___ //➜ _______\//\_______________\\//\\//\\/_\\//\\//\\//______________//\\/______ //➜ __________/_______________//\\//\\/_____\\//\\//\\______________\\/________ { const backgroundChars = '_'; const foregroundChars = '//\\\\'; const layers = recho.number(2, {min: 1, max: 6, step: 1}); const layersAmplitude = recho.number(1, {min: 0, max: 3, step: 1}); const waveDensity = recho.number(1, {min: 0, max: 3, step: 1}); const waveAmplitude = recho.number(1, {min: 0, max: 2, step: 0.5}); const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{ return new Array(cols).fill(0).map((_,c,colArray)=>{ const t = progress(frameCount); const y = r/rowArray.length-0.5; const x = (c/colArray.length-0.5)*aspectRatio; const backgroundCharOffset = r*Math.floor(backgroundChars.length/2); const backgroundCharIndex = (c+backgroundCharOffset)%backgroundChars.length; const foregroundCharOffset = r*Math.floor(foregroundChars.length/2); const foregroundCharIndex = (c+foregroundCharOffset)%foregroundChars.length; const radius = Math.sqrt(x*x+y*y); const char = Math.sin(radius*TAU*layers+TAU*layersAmplitude*Math.sin(t*TAU)) > waveAmplitude*Math.sin(t*TAU+waveDensity*TAU*Math.atan(x/y)) ? backgroundChars[backgroundCharIndex] : foregroundChars[foregroundCharIndex]; return char; }).join(''); }).join('\n'); echo(frame); }