hydra_latk_001.js

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
licensed with CC BY-NC-SA 4.0 https://creativecommons.org/licenses/by-nc-sa/4.0
Nick Fox-Gieg  /  @n1ckfg  /  fox-gieg.com
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

await loadScript("https://unpkg.com/latk@1.0.3/latk.js")

latk = Latk.read("https://raw.githubusercontent.com/LightningArtist/latk-test-files/main/latk_logo.latk")

p = new P5({mode: 'WEBGL'}) // loads p5js library, comment this line after using it once
p.hide() // hide p5js canvas.

counter = 0
marktime = 0
fps = (1.0 / 12.0) * 1000.0
rot = 0

p.draw = () => {
  p.background(0)
  p.rotateY(p.radians(rot))
  rot += 0.03
  if (latk.ready) {
    for (let layer of latk.layers) {
      for (let strokeObj of layer.frames[counter].strokes) {
        p.stroke(strokeObj.color[0] * 255, strokeObj.color[1] * 255, strokeObj.color[2] * 255)
        p.strokeWeight(4)
        p.noFill()
        p.beginShape()
        for (let point of strokeObj.points) {
          x = point.co[2] * p.height - p.height/4
          y = point.co[1] * -p.height + p.height/12
          z = point.co[0] * p.height
          p.vertex(x, y, z)
        }
        p.endShape()
      }
    }
	
    t = p.millis()
    if (t > marktime + fps) {
    	counter++
    	if (counter > latk.layers[0].frames.length-1) counter = 0
   		marktime = t
    }
  }
}

s0.init({src: p.canvas})

src(s0).repeat(4, 4).scroll(0.1,-0.3,0.05,0.05).out()