-
Notifications
You must be signed in to change notification settings - Fork 4
/
404.html
94 lines (83 loc) · 2.84 KB
/
404.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/Tone.min.js"></script>
<script src="libraries/StartAudioContext.js"></script>
<style>
body {
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<script>
let canvas;
var w = document.documentElement.clientWidth;//width of window that is available for drawing
var h = document.documentElement.clientHeight;//width of window that is available for drawing
var bowie;
var fSize;
var ptsg, ptsp, ptsl;
var initialPixelDensity;
var letters=[];
var alpha;
function preload() {
bowie = loadFont("https://rethread.art/assets/webfonts/ChunkFive-Regular.otf");
}
function setup() {
colorMode(HSB, 360, 100, 100, 250)
canvas = createCanvas(w, h);
background(0, 0, 0);
fSize = 0.5*w;
alpha=10;
initialPixelDensity = 0.42
ptsg = bowie.textToPoints('4', 0.01*w, 0.85 * h, fSize, {
sampleFactor: initialPixelDensity,
simplifyThreshold: 0
})
letters.push(ptsg)
ptsp = bowie.textToPoints('0',0.36*w, 0.85 * h,fSize, {
sampleFactor: initialPixelDensity,
simplifyThreshold: 0
})
letters.push(ptsp)
ptsl = bowie.textToPoints('4',0.69*w, 0.85 * h, fSize, {
sampleFactor: initialPixelDensity,
simplifyThreshold: 0
})
letters.push(ptsl)
}
function draw() {
if (frameCount%42==0 && alpha>0.1){alpha-=0.5;}
background(0,0,0,alpha)
let p = pickpoint()
drawlettersinblack(p)
}
function pickpoint(){
let j = Math.floor(random()*letters.length);
let pts=letters[j]
let i = Math.floor(random()*pts.length);
let p = pts[i];
return p
}
function drawlettersinblack(p){
let pix_diam = random()*5+1;
noStroke();
fill(0, 0, 100);
let rad = Math.exp(random()*4)
let angle = radians(p.alpha + 90-(random()*180))
let x1=p.x+rad*cos(angle)
let y1=p.y+rad*sin(angle)
ellipse(x1, y1, pix_diam, pix_diam);
}
function windowResized() {
w = document.documentElement.clientWidth;//width of window that is available for drawing
h = document.documentElement.clientHeight;//width of window that is available for drawing
resizeCanvas(w, h);
}
</script>
</body>
</html>