1import ProcessingWrap from './ProcessingWrap';
2
3// See: https://github.com/expo/expo/pull/10229#discussion_r490961694
4// eslint-disable-next-line @typescript-eslint/ban-types
5export default ProcessingWrap<{}>(`'In and out' from openprocessing.org`, (p) => {
6  p.setup = () => {
7    p.strokeWeight(7);
8  };
9
10  const harom = (ax: number, ay: number, bx: number, by: number, level: number, ratio: number) => {
11    if (level <= 0) {
12      return;
13    }
14
15    const vx = bx - ax;
16    const vy = by - ay;
17    const nx = p.cos(p.PI / 3) * vx - p.sin(p.PI / 3) * vy;
18    const ny = p.sin(p.PI / 3) * vx + p.cos(p.PI / 3) * vy;
19    const cx = ax + nx;
20    const cy = ay + ny;
21    p.line(ax, ay, bx, by);
22    p.line(ax, ay, cx, cy);
23    p.line(cx, cy, bx, by);
24
25    harom(
26      ax * ratio + cx * (1 - ratio),
27      ay * ratio + cy * (1 - ratio),
28      ax * (1 - ratio) + bx * ratio,
29      ay * (1 - ratio) + by * ratio,
30      level - 1,
31      ratio
32    );
33  };
34
35  p.draw = () => {
36    p.background(240);
37    harom(
38      p.width - 142,
39      p.height - 142,
40      142,
41      p.height - 142,
42      6,
43      (p.sin((0.0005 * Date.now()) % (2 * p.PI)) + 1) / 2
44    );
45  };
46});
47