超炫线条跟随效果p5.js

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

/*
* Same trick, different pony
* rinse + repeat
*/

let conf = {
  NUM_PARTICLES: 8,
  NUM_STRANDS: 12,
  FRAME_RATE: 60
}

let pos = {x: Math.random() * window.innerWidth + 1, y:Math.random() * window.innerHeight + 1}

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  frameRate(conf.FRAME_RATE)
  pos = {x: Math.random() * window.innerWidth + 1, y:Math.random() * window.innerHeight + 1}
}

class Strand {
  constructor () {
    this.p = []
    let p = this.p
    let r = Math.random() * 0.4
    this.sr = Math.random();
    while(conf.NUM_PARTICLES > p.length) {
      r = r * 0.2
      let particle = new Particle(1 - p.length/conf.NUM_PARTICLES, r)
      if (p.length > 0) {
        particle.follow = p[p.length - 1]
      }
      p.push(particle)
    }
  }
  
  draw () {
    let q1, q2, q3, q4;
    this.p.map(p => {
      p.update()
    })
    const sections = {a:[], b:[]}
    let i;
    for (i = this.p.length - 1; i >= 0; i--){
      noStroke()
      const pt = this.p[i]
      if (i === 0 || i === this.p.length - 1) {
        q1 = [pt.x, pt.y]
        q2 = [pt.x, pt.y]
        sections.a.push(q1) //to-end
      } else {
        q1 = [
          Math.cos(pt.a+HALF_PI)*pt.w + pt.x,
          Math.sin(pt.a+HALF_PI)*pt.w + pt.y
        ]
        q2 = [
          Math.cos(pt.a-HALF_PI)*pt.w + pt.x,
          Math.sin(pt.a-HALF_PI)*pt.w + pt.y
        ]
        sections.a.push(q1) //to-end
        sections.b.unshift(q2) //to-front
      }
      
      if (i < this.p.length-1 && pt.a !== null){
        fill(
          color(
            Math.sin(a/2000 * TWO_PI + this.sr*TWO_PI) * 45 + 20,
            Math.sin(a/2000 * TWO_PI + this.sr*TWO_PI) * 12 + pt.c * 0.8,
            Math.sin(a/2000 * TWO_PI + this.sr) * 95 + 20 + pt.c * 0.6,
            Math.cos(i/this.p.length * PI) * 250 * 0.1
          )
        )
        quad(q1[0], q1[1], q2[0], q2[1], q3[0], q3[1], q4[0], q4[1])
      }
      q4 = [q1[0], q1[1]]
      q3 = [q2[0], q2[1]]
    }
    let s = sections.a.concat(sections.b)
    noFill()
    for (i = 3; i < s.length; i++){
      let pts = [...s[i-3], ...s[i-2], ...s[i-1], ...s[i]]
      stroke(
        80 + Math.cos(a/2000 * TWO_PI) * 25,
        108 + Math.cos(a/2000 * TWO_PI) * 65,
        255,
        90
      );
      curve(...pts)
    }
  }
}

class Particle {
  constructor(n, r){
    try {
      this.x = mouseX
      this.y = mouseY
    } catch (e) {
      this.x = pos.x
      this.y = pos.y
    }
    this.vx = 0
    this.vy = 0
    this.c = Math.floor(n * 120 + 120)
    this.follow = null;
    this.a = null
    this.width = 32
    this.r = r || Math.random() * 0.04
  }
  
  update () {
    
    if (a % 2 === 0) {
      if (this.follow !== null){
        this.vx = this.vx * (0.68 - this.r / 2) - (this.x - this.follow.x) * (0.08 - this.r*0.2)
        this.vy = this.vy * (0.68 - this.r / 2) - (this.y - this.follow.y) * (0.08 - this.r*0.2)
      } else {
        if(mouseIsPressed){
          // on mouse-down, follow mouse
          this.vx = this.vx * (0.98 - this.r * 0.13) - (this.x - mouseX) * (0.01 + this.r*0.5)
          this.vy = this.vy * (0.98 - this.r * 0.13) - (this.y - mouseY) * (0.01 + this.r*0.5)
        } else {
          this.vx = this.vx * (0.98 - this.r * 0.3) - (this.x - pos.x) * (0.02 + this.r*0.4)
          this.vy = this.vy * (0.98 - this.r * 0.3) - (this.y - pos.y) * (0.02 + this.r*0.4)
        }
      }
    
      this.a = Math.atan2(this.vy, this.vx)
      let len = Math.min(this.vy * this.vy + this.vx * this.vx, 7500) / 3500
      len = sin(len * HALF_PI)
      this.w = this.width * len + 5
    }
    this.vx = this.vx * 0.89
    this.vy = this.vy * 0.89
    this.x += this.vx / (conf.FRAME_RATE/85)
    this.y += this.vy / (conf.FRAME_RATE/85)
  }
}

window.addEventListener('resize', ()=>setup())

const strands = []
while (strands.length < conf.NUM_STRANDS) {
  strands.push(new Strand())
}

let a = 0
/// every frame ... 
draw = () => {
  a = (a + 1) % 2000
  if (a % 12 === 0) {
    // pick a new random location every n frames
    pos = {
      x: (Math.random() * 0.5 + 0.25) * window.innerWidth,
      y: (Math.random() * 0.5 + 0.25) * window.innerHeight
    }
  }
  background(
    Math.cos(a/2000 * TWO_PI) * 65 + 50,
    40,
    Math.sin(a/2000 * TWO_PI) * 5 + 90,
    50
  );
  strands.forEach(s => s.draw())
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg