https://danzafono.com/sketch.js

1let fps = 60, multiplier = 1, fakeFrameCount = 0
2let letters = []
3let font, fontUi
4let spawner,
5  touch = false,
6  ui, ly, snapshots = [],
7  clrs = {
8    clrMode: 0,
9    bg: 0,
10    bgD: 0,
11    ltr: 255,
12    ltrD: 255,
13    extra: 150,
14    update: function(){
15      this.bg = lerp(this.bg, this.bgD, 0.03 * multiplier)
16      this.ltr = lerp(this.ltr, this.ltrD, 0.05 * multiplier)
17      if (this.bg > 150) this.ltrD = 0
18      else this.ltrD = 255
19    },
20    resetBg: function(){
21      if (this.clrMode == 0) {
22        this.bgD = 0
23        this.extra = 150
24      }
25      else if (this.clrMode == 1) {
26        this.bgD = 255
27        this.extra = 180
28      }
29      else if (this.clrMode == 2) {
30        this.bgD = 160
31        this.extra = 255
32      }
33    },
34
35    changeClrMode: function(){
36      this.clrMode = (this.clrMode+1)%3
37      this.resetBg()
38
39    },
40
41    setClrMode: function(v){
42      this.clrMode = v
43      this.resetBg()
44    }
45
46
47  }, linkOpened = false
48
49let opt = options["none"]
50
51function preload() {
52  font = loadFont('assets/Gallique-Light.otf')
53  fontUi = loadFont('assets/ABCDiatype-Regular-Trial.otf')
54}
55
56
57function setup() {
58  createCanvas(windowWidth, windowHeight)
59
60  ui = new Ui()
61  ui.init()
62  ly = new Layout()
63  ly.loadSlide()
64  setTimeout(() => {setDarkMode(1)}, 3000)
65  spawner = new Spawner()
66  frameRate(fps)
67}
68
69function draw() {
70  linkOpened = false
71  multiplier = map(frameRate(), 30, 60, 2, 1)
72  fakeFrameCount += multiplier
73  clrs.update()
74  spawner.update()
75  background(clrs.bg)
76  for (let i = 0; i < letters.length; i++) {
77    let l = letters[i];
78    if (l.update()) {
79      letters.splice(i, 1)
80      i--;
81    } else l.draw()
82  }
83  ly.draw()
84  ui.draw()
85}
86
87function mouseReleased() {
88  if (!ui.checkClick()) ly.click()
89}
90
91function touchStarted() {
92  touch = true
93}
94
95function touchEnded() {
96  if (!ui.checkClick()) ly.click()
97  touch = false
98}
99
100// function keyReleased() {
101//   if (key == ' ') resetFromStart()
102//   else if (key == '5') endExperience()
103//   else if (key == '4') goToPlayground()
104// }
105
106function windowResized() {
107  resizeCanvas(windowWidth, windowHeight)
108  ui.init()
109  ly.loadSlide(true)
110}
111
112
113function Spawner() {
114  this.spawnLetter = function(l, pos, angle, o) {
115    letters.push(new Letter(l, pos, angle, o))
116    this.nLetra++
117    let c = opt.word.charAt(this.nLetra % opt.word.length).toUpperCase()
118
119    this.wNext = letterW(c, parseInt(opt.size))
120  }
121
122  this.pos = createVector(0, 0)
123  this.posDes = createVector(0, 0)
124  this.nLetra = 0
125  this.a = 0
126  this.timer = 0
127  this.tStop = 0
128  this.mouseStopped = true
129  this.posMouse = createVector(0, 0)
130  this.posWalker = createVector(0, 0)
131  this.vel = createVector(1, 1)
132  if (opt.spawn_on) this.spawnLetter(opt.word.charAt(this.nLetra % opt.word.length).toUpperCase(), this.pos.copy(), 0, opt)
133
134  this.center = function(){
135    this.pos = createVector(width*0.5, height*0.5)
136    this.posDes = createVector(width*0.5, height*0.5)
137    this.posWalker = createVector(width*0.5, height*0.5)
138    this.posMouse = createVector(width*0.5, height*0.5)
139    this.mouseStopped = true
140    this.tStop = this.timer - 100;
141  }
142
143  this.spawn = function() {
144    if (letters.length > 0) {
145      let lastL = letters[letters.length - 1];
146      let p_l = p5.Vector.sub(this.posDes, lastL.pos);
147      let dis = this.wNext * 0.5 + lastL.w * 0.5
148      if (p_l.mag() > dis) {
149        p_l.setMag(dis)
150        this.pos = p5.Vector.add(lastL.pos, p_l)
151
152        this.spawnLetter(opt.word.charAt(this.nLetra % opt.word.length).toUpperCase(), this.pos.copy(), p_l.heading(), opt)
153
154        this.spawn()
155
156      }
157    } else {
158      this.pos = this.posWalker.copy()
159      this.nLetra = 0
160      this.spawnLetter(opt.word.charAt(this.nLetra % opt.word.length).toUpperCase(), this.pos.copy(), 0, opt)
161
162    }
163
164  }
165
166  this.walk = function() {
167    let vRot = 0.1
168    let a = map(noise(frameCount * 0.01), 0, 1, -vRot, vRot)
169    this.vel.rotate(a)
170    this.vel.setMag(opt.spaw_speed * multiplier)
171    this.posWalker.add(this.vel)
172
173
174    if (this.posWalker.x < 0) this.vel.reflect(createVector(1, 0))
175    else if (this.posWalker.x > width) this.vel.reflect(createVector(-1, 0))
176    else if (this.posWalker.y < 0) this.vel.reflect(createVector(0, 1))
177    else if (this.posWalker.y > height) this.vel.reflect(createVector(0, -1))
178    this.posWalker.x = constrain(this.posWalker.x, 0, width)
179    this.posWalker.y = constrain(this.posWalker.y, 0, height)
180  }
181
182  this.update = function() {
183    if (mobile && !touch) {
184      this.walk()
185    } else if (mobile) {
186      this.posWalker.set(mouseX, mouseY)
187    }
188
189    if (mobile && !touch ){
190      this.posMouse = this.posWalker.copy()
191    } else {
192      let mousePos = createVector(mouseX, mouseY)
193      let _mousePos = createVector(pmouseX, pmouseY)

194      let mouse_mouse = p5.Vector.sub(mousePos, _mousePos)
195      let dSq = mouse_mouse.magSq()
196      if (abs(dSq) < 5) {
197        if (!this.mouseStopped) {
198          this.mouseStopped = true
199          this.tStop = this.timer;
200        } else if (this.mouseStopped && this.timer - this.tStop > 100) {
201          this.walk()
202          this.posMouse = this.posWalker.copy()
203        }
204      } else {
205        this.posMouse.set(mouseX, mouseY)
206        this.posWalker.set(mouseX, mouseY)
207        this.mouseStopped = false
208      }
209    }
210
211    opt.spawUpdate(this);
212    if (opt.spawn_on) this.spawn()
213    this.timer++;
214  }
215
216  this.draw = function() {
217    fill(255, 0, 0)
218    noStroke()
219    circle(this.posDes.x, this.posDes.y, 10)
220
221    fill(0, 255, 0)
222    circle(this.pos.x, this.pos.y, 10)
223  }
224
225}
226
227function Letter(_l, pos, angle, o, lock = false, _link) {
228  this.opt = o
229  this.pos = pos;
230  this.char = _l
231  this.size = 0
232  this.maxSize = o.size
233  this.w = letterW(this.char, this.maxSize)
234  this.angle = angle
235  this.t = 0
236  this.lifespan = o.lifespan
237  this.grow = o.grow
238  this.shrink = o.shrink
239  this.speed = createVector(0, 0)
240  this.angSpeed = 0
241  this.seed = random(1);
242  this.lock = lock
243  this.link = _link
244
245  this.setSize = function() {
246    let t = round(this.t)
247    if (t <= this.grow) {
248      let p = norm(t, 0, this.grow)
249      this.size = lerp(0, this.maxSize, p)
250    } else if (t >= this.grow + this.lifespan) {
251      let p = norm(t, this.grow + this.lifespan, this.grow + this.lifespan + this.shrink)
252      this.size = lerp(this.maxSize, 0,p)
253    } else this.size = this.maxSize
254  }
255
256  this.update = function() {
257    if (this.char == ' ' && this.t > 10) return true
258    let totalT = this.grow + this.lifespan + this.shrink;
259    if (this.t <= totalT && (this.t < totalT * this.opt.start_movement * 0.01 && this.lock) || !this.lock) this.t += multiplier
260    this.setSize();
261
262    if (this.t > totalT * this.opt.start_movement * 0.01 && !this.lock) this.opt.movementUpdate(this);
263    if (this.t > totalT) return true
264  }
265
266  this.unlock = function() {
267    this.lock = false
268  }
269
270  this.translate = function(v) {
271    this.pos.add(v)
272  }
273
274  this.checkMouseOver = function(){
275    let border = 20
276    if(mouseX > this.pos.x - this.w*0.5-border && mouseX < this.pos.x + this.w*0.5+border && mouseY > this.pos.y - this.maxSize*0.5-border && mouseY < this.pos.y + this.maxSize*0.5+border) return true
277    else return false
278  }
279
280  this.copy = function(){
281    return {
282      pos: this.pos.copy(),
283      char : this.char,
284      size : this.size,
285      angle : this.angle
286    }
287  }
288
289  this.draw = function() {
290    noStroke()
291    let c = clrs.ltr
292    if (this.link) {
293      if (this.lock){
294         if (this.checkMouseOver()) c = clrs.extra
295      }
296    }
297    fill(c)
298
299
300    textAlign(CENTER, CENTER)
301    textSize(round(this.size))
302    textFont(font)
303
304    push()
305    translate(this.pos.x, this.pos.y)
306    rotate(this.angle)
307    text(this.char, 0, 0)
308
309    if (this.link) {
310      let w = letterW(this.char, this.size)
311      noFill()
312      stroke(c)
313      strokeWeight(map(this.size, 0, this.maxSize, 0, 1))
314      translate(-w*0.5, this.size * 0.6)
315      line(0,0,w, 0)
316      line()
317    }
318    pop()
319  }
320}