-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
74 lines (74 loc) · 2.62 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>WTF Text</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Quantico&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko&display=swap" rel="stylesheet">
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body>
<script>
let charSize=142.69,textString='TAYLOR.WTF',glitchedString='9k.WTF',jitterStrength=100,maxDist,pointerResponse=.0001,clickCount=0,fonts=['Orbitron','Quantico','Teko'];
function setup() {
createCanvas(windowWidth,windowHeight);
textAlign(CENTER,CENTER);
textSize(charSize);
colorMode(HSB,360,100,100);
maxDist=dist(0,0,width/2,height/2);
glitchText();
}
function draw() {
background(0);
noStroke();
let textWidth=glitchedString.length*charSize*.75;
let xStart=(width-textWidth)/2;
for(let i=0;i<glitchedString.length;i++) {
let hue=map(mouseX,0,width,200,340);
let saturation=map(mouseY,0,height,70,100);
fill(hue,saturation,100);
let x=xStart+i*charSize*0.75;
let y=height/2;
let distToPointer=dist(x,y,mouseX,mouseY)*pointerResponse;
let jitterStrengthScaled=map(distToPointer,0,maxDist,jitterStrength,0);
let angle=atan2(y-mouseY,x-mouseX);
let newX=x+cos(angle)*jitterStrengthScaled;
let newY=y+sin(angle)*jitterStrengthScaled;
textFont(fonts[i%fonts.length],charSize+distToPointer/10);
fill(255);
text(glitchedString[i],newX,newY);
}
}
function glitchText() {
glitchedString='';
for(let i=0;i<textString.length;i++) {
let glitchedChar=textString.charAt(i);
glitchedString+=glitchedChar;
}
for(let i=0;i<textString.length/4;i++) {
let glitchIndex=floor(random(textString.length));
glitchedString=glitchedString.substring(0,glitchIndex)+String.fromCharCode(floor(random(65535)))+glitchedString.substring(glitchIndex+1);
}
}
function mouseMoved() {
glitchText();
}
function mouseClicked() {
clickCount++;
if(clickCount>=5) {
window.location.href="https://market.taylor.wtf/";
} else {
glitchText();
}
}
</script>
</body>
</html>