https://www.dwitter.net/d/19095 설명

something-very-fishy.js

// c: canvas, x: canvas.getContext('2d'), S: Math.sin, C: Math.cos
// 아래 함수 내용은 초당 60회 불리고, 인자 t는 시작 후 지난 시간(초)이다.

// -----------
// 화면 초기화
// -----------

// 매 함수 호출마다 화면이 제거되진 않기 때문에 직접 지워 줘야 한다.
// 이전에 렌더링된 화면을 반투명 색깔로 덮어서 "꼬리"를 남긴다.
// 완전히 지울 경우 보통은 `c.width |= /*0으로 변환 가능한 수식*/`을 사용.

// 자바스크립트에서 x['asdf']와 x.asdf는 완전히 같은 의미.
x[
	// x.fillStyle, x.fillRect는 두 번 쓰기 때문에 이름을 이렇게 저장한다.
	a='fillStyle'
]=
	// `#abcd`는 `#abc` + alpha 0xdd에 해당.
	'#eff3';

x[b='fillRect'](
	// 화면 크기(1920x1080)를 알고 있기 때문에
	// 조금 더 크게 그려서 변수 초기화까지 같이 한다.
	// (원래 코드와 살짝 다름. `i=0`은 실수로 안 지운 것;)
	0,0,w=2e3,w);

// ---------------
// "물고기" 그리기
// ---------------

// "물고기"는 이전 프레임에서 그린 "꼬리"가 남아 있는 사각형이다.
// 사각형의 가로 크기와 세로 위치는 고정이고,
// 가로 위치는 sin 함수를 써서 뒷선 물고기가 앞지르기가 가능하며,
// 세로 크기는 +/-30 사이를 진동하며 헤엄치는 듯한 그림을 만든다.

x[a]='#0028';

// for 문에는 공짜(?) 세미콜론이 두 개나 있기 때문에 dweet에서 널리 쓰인다.
for(
	// u: 현재 몇픽셀만큼 전진했는가? 초당 800픽셀 이동한다.
	// i: 물고기 인덱스 = 앞지르기 및 스크롤 처리 전 물고기의 가로 위치.
	//    다음 프레임에서 전진해서 렌더링 위치가 바뀌어도
	//    물고기 인덱스가 같아야 연속된 애니메이션이 가능하다.
	u=i=
		// `a|0`은 a가 32비트 내의 양수일 때 소숫점 아래를 잘라낸다.
		// C부터 내려오는 유구한 전통 덕에 a 위치엔 보통 괄호가 필요 없다.
		t*800|0;
	// 스크롤 처리 후 화면에 보이게 되는 만큼(u ~ u + 화면 너비)만 반복.
	i++<w+u;
)
	x[b](
		// `i-u`는 스크롤 처리를 한 뒤의 실제 가로 위치이다.
		// 99를 뺀 건 왼쪽 끝이 비어 보이는 걸 막기 위함. (>60이면 오케이)
		// 앞지르기 효과를 위해 여기에 시간에 의존하는 +/-49 진동을 추가.
		i-u-99+S(i+t)*49,
		// 세로 위치는 흩뿌려야 하는데, 선형 변환은 (심지어 `S(i)` 등도)
		// 너무 패턴이 눈에 띄이기 때문에 이차 변환을 사용했다.
		// 파라미터 선정상 실제 물고기의 1/4 정도(cos 값이 0~0.56 사이)만
		// 나오는데, 어차피 그 바깥의 분포는 고르지 않으므로 이게 딱 좋다.
		C(i*i)*w,
		// 세로 크기는 지금까지 안 쓴 다른 변환을 사용해서
		// 애니메이션이 동기화되어 보이는 걸 최대한 막음.
		60,C(i+t*9)*30
	) // 자바스크립트에서는 대부분 세미콜론이 필요 없다.