Skip to content

Commit 4b4c1a8

Browse files
jackbdujackbdu
authored
[Example] Animation Experiments by Jack B. Du (#163)
* Create animation-experiments.recho.js * Delete app/examples/infinite-circles.recho.js
1 parent 2d87257 commit 4b4c1a8

File tree

2 files changed

+173
-76
lines changed

2 files changed

+173
-76
lines changed

‎app/examples/animation-experiments.recho.js‎

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
/**
2+
* @title Animation Experiments
3+
* @author Jack B. Du
4+
* @github jackbdu
5+
* @created 2025-10-14
6+
* @pull_request 163
7+
* @thumbnail_start 71
8+
*/
9+
10+
/**
11+
* ============================================================================
12+
* = Animation Experiments =
13+
* ============================================================================
14+
*
15+
* This is a series of animation experiments I created in Recho.
16+
*/
17+
18+
const TAU = Math.PI*2;
19+
20+
const animationRate = recho.number(1, {min: 1, max: 4, step: 1});
21+
22+
const cols = 75;
23+
const rows = 18;
24+
const aspectRatio = cols/rows*0.5;
25+
26+
const frameRate = 60;
27+
const loopFrames = Math.floor(60/animationRate);
28+
const frameCount = recho.interval(1000/frameRate);
29+
const progress = (frameCount) => frameCount%loopFrames/loopFrames;
30+
31+
//➜ ...........................................................................
32+
//➜ ...........................................................................
33+
//➜ ...........................................................................
34+
//➜ ...........................................................................
35+
//➜ ...........................................................................
36+
//➜ ...........................................................................
37+
//➜ ..................................00000000.................................
38+
//➜ ................................000000000000...............................
39+
//➜ ...............................00000000000000..............................
40+
//➜ ...............................00000000000000..............................
41+
//➜ ...............................00000000000000..............................
42+
//➜ ................................000000000000...............................
43+
//➜ ..................................00000000.................................
44+
//➜ ...........................................................................
45+
//➜ ...........................................................................
46+
//➜ ...........................................................................
47+
//➜ ...........................................................................
48+
//➜ ...........................................................................
49+
{
50+
const backgroundChar = '.';
51+
const foregroundChar = '0';
52+
const baseRadius = 0.3;
53+
const radiusAmplitude = 0.1;
54+
55+
const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{
56+
return new Array(cols).fill(0).map((_,c,colArray)=>{
57+
const t = progress(frameCount);
58+
const y = r/rowArray.length-0.5;
59+
const x = (c/colArray.length-0.5)*aspectRatio;
60+
61+
const radius = Math.sqrt(x*x+y*y);
62+
const char = radius > baseRadius+radiusAmplitude*Math.sin(t*TAU) ?
63+
backgroundChar : foregroundChar;
64+
65+
return char;
66+
}).join('');
67+
}).join('\n');
68+
echo(frame);
69+
}
70+
71+
//➜ {---CLE}{CI----}{-IRCLE}{CIR---}{------}{------}{CIRCLE}{C-----}{CIRCLE}{--
72+
//➜ ---}{CIRC--}{----LE}{CIRC--}{------}{------}{------}{CIRCLE}{------}{CIRC--
73+
//➜ {-IRCLE}{------}{CIRCLE}{------}{CIRCLE}{CI----}{----LE}{CIRC--}{---CLE}{C-
74+
//➜ -LE}{CI----}{-IRCLE}{------}{CIRCLE}{CIRCLE}{CI----}{--RCLE}{C-----}{CIRCLE
75+
//➜ {CIRCLE}{----LE}{CIR---}{--RCLE}{CIRCLE}{CIRCLE}{------}{CIRCLE}{----LE}{CI
76+
//➜ CLE}{C-----}{CIRCLE}{-----E}{CIRCL-}{-----E}{CIRCL-}{----LE}{CIR---}{-IRCLE
77+
//➜ {CIRCL-}{---CLE}{C-----}{CIRCLE}{------}{---CLE}{CIR---}{-IRCLE}{-----E}{CI
78+
//➜ CLE}{------}{CIRCL-}{---CLE}{C-----}{------}{-IRCLE}{-----E}{CIR---}{--RCLE
79+
//➜ {CIRC--}{--RCLE}{------}{CIRC--}{---CLE}{------}{CIRC--}{--RCLE}{------}{CI
80+
//➜ CLE}{------}{CIRC--}{--RCLE}{------}{CIRC--}{--RCLE}{------}{CIRC--}{--RCLE
81+
//➜ {CIRC--}{--RCLE}{------}{CIRC--}{---CLE}{------}{CIRC--}{--RCLE}{------}{CI
82+
//➜ CLE}{------}{CIRCL-}{---CLE}{C-----}{------}{-IRCLE}{-----E}{CIR---}{--RCLE
83+
//➜ {CIRCL-}{---CLE}{C-----}{CIRCLE}{------}{---CLE}{CIR---}{-IRCLE}{-----E}{CI
84+
//➜ CLE}{C-----}{CIRCLE}{-----E}{CIRCL-}{-----E}{CIRCL-}{----LE}{CIR---}{-IRCLE
85+
//➜ {CIRCLE}{----LE}{CIR---}{--RCLE}{CIRCLE}{CIRCLE}{------}{CIRCLE}{----LE}{CI
86+
//➜ -LE}{CI----}{-IRCLE}{------}{CIRCLE}{CIRCLE}{CI----}{--RCLE}{C-----}{CIRCLE
87+
//➜ {-IRCLE}{------}{CIRCLE}{------}{CIRCLE}{CI----}{----LE}{CIRC--}{---CLE}{C-
88+
//➜ ---}{CIRC--}{----LE}{CIRC--}{------}{------}{------}{CIRCLE}{------}{CIRC--
89+
{
90+
const backgroundChars = '{------}';
91+
const foregroundChars = '{CIRCLE}';
92+
93+
const layers = recho.number(3, {min: 1, max: 6, step: 1});
94+
95+
const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{
96+
97+
return new Array(cols).fill(0).map((_,c,colArray)=>{
98+
99+
const t = progress(frameCount);
100+
const y = r/rowArray.length-0.5;
101+
const x = (c/colArray.length-0.5)*aspectRatio;
102+
103+
const backgroundCharOffset = r*Math.floor(backgroundChars.length/2);
104+
const backgroundCharIndex = (c+backgroundCharOffset)%backgroundChars.length;
105+
const foregroundCharOffset = r*Math.floor(foregroundChars.length/2);
106+
const foregroundCharIndex = (c+foregroundCharOffset)%foregroundChars.length;
107+
108+
const radius = Math.sqrt(x*x+y*y);
109+
const char = Math.sin(radius*TAU*layers+t*TAU) > 0 ?
110+
backgroundChars[backgroundCharIndex] : foregroundChars[foregroundCharIndex];
111+
112+
return char;
113+
114+
}).join('');
115+
116+
}).join('\n');
117+
118+
echo(frame);
119+
}
120+
121+
//➜ ____________/______________\//\\/___________//\\//____________\\/__________
122+
//➜ _________\//______________//\\//\\//_____\//\\//\\_______________\_________
123+
//➜ _______\//\\______________\\//\\//\\//_\//\\//\\//_______________/\\/______
124+
//➜ ____\\//\\//______________//\\//\\//\__/\\//\\//\\______________\\//\\/____
125+
//➜ __\\//\\//\\______________\\//\\//\\____//\\//\\//______________//\\//\\/__
126+
//➜ _\//\\//\\//\______________/\\//\\//____\\//\\//\\______________\\//\\//\\/
127+
//➜ //\\//\\//\\//_______/\\//\______/\\_____/\______/\\//_________\//\\//\\//\
128+
//➜ \\//\\//\\//\\____//\\//\\//\___________________\\//\\//\_____//\\//\\//\\/
129+
//➜ //\\//\\//\\//\\//\\//\\//\\//\_______________\\//\\//\\//\\_/\\//\\//\\//\
130+
//➜ \\//\\//\\//\\/__\//\\//\\//\\//\__/\\//\___\\//\\//\\//\\/___//\\//\\//\\/
131+
//➜ //\\//\\//\\//\_//\\//\\//\\//_______________/\\//\\//\\//\\//\\//\\//\\//\
132+
//➜ \\//\\//\\//\\_____/\\//\\//___________________/\\//\\//\\____//\\//\\//\\/
133+
//➜ //\\//\\//\\/_________\\//\______/\_____//\______/\\//\_______\\//\\//\\//\
134+
//➜ _\//\\//\\//______________//\\//\\//____\\//\\//\______________/\\//\\//\\/
135+
//➜ ___\//\\//\\______________\\//\\//\\____//\\//\\//______________//\\//\\//_
136+
//➜ _____\//\\//______________//\\//\\//\__/\\//\\//\\______________\\//\\//___
137+
//➜ _______\//\_______________\\//\\//\\/_\\//\\//\\//______________//\\/______
138+
//➜ __________/_______________//\\//\\/_____\\//\\//\\______________\\/________
139+
{
140+
const backgroundChars = '_';
141+
const foregroundChars = '//\\\\';
142+
143+
const layers = recho.number(2, {min: 1, max: 6, step: 1});
144+
const layersAmplitude = recho.number(1, {min: 0, max: 3, step: 1});
145+
const waveDensity = recho.number(1, {min: 0, max: 3, step: 1});
146+
const waveAmplitude = recho.number(1, {min: 0, max: 2, step: 0.5});
147+
148+
const frame = new Array(rows).fill(0).map((_,r,rowArray)=>{
149+
150+
return new Array(cols).fill(0).map((_,c,colArray)=>{
151+
152+
const t = progress(frameCount);
153+
const y = r/rowArray.length-0.5;
154+
const x = (c/colArray.length-0.5)*aspectRatio;
155+
156+
const backgroundCharOffset = r*Math.floor(backgroundChars.length/2);
157+
const backgroundCharIndex = (c+backgroundCharOffset)%backgroundChars.length;
158+
const foregroundCharOffset = r*Math.floor(foregroundChars.length/2);
159+
const foregroundCharIndex = (c+foregroundCharOffset)%foregroundChars.length;
160+
161+
const radius = Math.sqrt(x*x+y*y);
162+
const char = Math.sin(radius*TAU*layers+TAU*layersAmplitude*Math.sin(t*TAU)) >
163+
waveAmplitude*Math.sin(t*TAU+waveDensity*TAU*Math.atan(x/y)) ?
164+
backgroundChars[backgroundCharIndex] : foregroundChars[foregroundCharIndex];
165+
166+
return char;
167+
168+
}).join('');
169+
170+
}).join('\n');
171+
172+
echo(frame);
173+
}

‎app/examples/infinite-circles.recho.js‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)