海流

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

Util = {};
Util.random = function(min, max) {
  return min + Math.random() * (max - min);
};
Util.map = function(a, b, c, d, e) {
  return (a - b) / (c - b) * (e - d) + d;
};
Util.lerp = function(value1, value2, amount) {
  return value1 + (value2 - value1) * amount;
};

Util.threeAngle = function(p0,p1,p2){
    var b = Math.pow(p1.x-p0.x,2) + Math.pow(p1.y-p0.y,2),
        a = Math.pow(p1.x-p2.x,2) + Math.pow(p1.y-p2.y,2),
        c = Math.pow(p2.x-p0.x,2) + Math.pow(p2.y-p0.y,2);
    return Math.acos( (a+b-c) / Math.sqrt(4*a*b) );
}

Tween = {};
Tween.linear = function(currentTime, start, degreeOfChange, duration) {
  return degreeOfChange * currentTime / duration + start;
};
Tween.easeInOutQuad = function(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * t * t + b;
  t--;
  return -c / 2 * (t * (t - 2) - 1) + b;
};
Tween.easeInOutExpo = function(t, b, c, d) {
  t /= d / 2;
  if (t < 1) return c / 2 * Math.pow(2, 10 * (t - 1)) + b;
  t--;
  return c / 2 * (-Math.pow(2, -10 * t) + 2) + b;
};

class Vector {
  constructor(x, y) {
    this.x = x || 0;
    this.y = y || 0;
  }
  set(x, y) {
    this.x = x;
    this.y = y;
  }
  add(vector) {
    this.x += vector.x;
    this.y += vector.y;
  }
  sub(vector) {
    this.x -= vector.x;
    this.y -= vector.y;
  }
  mult(scalar) {
    this.x *= scalar;
    this.y *= scalar;
  }
  div(scalar) {
    this.x /= scalar;
    this.y /= scalar;
  }
  limit(limit_value) {
    if (this.mag() > limit_value) this.setMag(limit_value);
  }
  mag() {
    return Math.hypot(this.x, this.y);
  }
  setMag(new_mag) {
    if (this.mag() > 0) {
      this.normalize();
    } else {
      this.x = 1;
      this.y = 0;
    }
    this.mult(new_mag);
  }
  dist(vector) {
    return new Vector(this.x - vector.x, this.y - vector.y).mag();
  }
  angle(vector){
    return Math.atan2(vector.y - this.y, vector.x - this.x);
  }
  normalize() {
    let mag = this.mag();
    if (mag > 0) {
      this.x /= mag;
      this.y /= mag;
    }
  }
  heading() {
    return Math.atan2(this.x, this.y);
  }
  setHeading(angle) {
    let mag = this.mag();
    this.x = Math.cos(angle) * mag;
    this.y = Math.sin(angle) * mag;
  }
  copy() {
    return new Vector(this.x, this.y);
  }
}
// init canvas
let canvas = document.getElementById("c");
(ctx = canvas.getContext("2d")),
  (H = canvas.height = 600),
  (W = canvas.width = 480);
ctx.lineCap = "round";
canvas.addEventListener("mousemove", event => mousemove(event), false);

let cursor = new Vector(W / 2, H / 1.2);

function mousemove(event) {
  cursor.x = event.pageX - canvas.offsetLeft;
  cursor.y = event.pageY - canvas.offsetTop;
}

// World variables
let gravity = new Vector(0, -0.3);

let color = ["#fa812a", "#d6570a", "#a13a0e"];
// Hair class

class Point {
  constructor(x, y) {
    this.position = new Vector(x, y);
    this.old_position = new Vector(x, y);
    this.pinned = false;
  }
}

class Link {
  constructor(p0, p1) {
    this.p0 = p0;
    this.p1 = p1;
    this.length = p0.position.dist(p1.position);
  }
}

class Hair {
  constructor(x, y, angle, length, divisions) {
    this.position = new Vector(x, y);
    this.angle = angle || 0;
    this.length = length || 100;
    this.divisions = divisions || 3;
    this.points = [];
    this.links = [];
    this.thickness = 2;
    this.stiffness = 0.2;
    this.start_color = "#000";
    this.color = color;
    // add points
    for (let i = 0; i < divisions; i++) {
      let separation = this.length / divisions * i;
      let v = new Vector(0, 0);
      v.setMag(separation);
      v.setHeading(angle);
      v.add(this.position);
      this.points.push(new Point(v.x, v.y));
    }
    this.points[0].pinned = true;
    for (let i = 0; i < divisions - 1; i++) {
      this.links.push(new Link(this.points[i], this.points[i + 1]));
    }
  }
  update() {
    for (let i = 0; i < this.points.length; i++) {
      let point = this.points[i];

if (point.pinned) continue;
      let velocity = point.position.copy();
      velocity.sub(point.old_position);
      velocity.mult(0.98);
      point.old_position = point.position.copy();
      point.position.add(velocity);

point.position.x += Math.cos(this.angle) * (this.stiffness / i);
      point.position.y += Math.sin(this.angle) * (this.stiffness / i);

let distance = point.position.dist(cursor);

if (distance < force_contact.size) {
        let force = new Vector();

let angle = point.position.angle(cursor);
        force.setMag(Util.map(distance, 0, force_contact.size, 1.6, 0));
        force.setHeading(angle);
        point.position.sub(force);
      }

point.position.add(wind.value);
      point.position.add(gravity);
    }
    for (let i = 0; i < 5; i++) {
      this.links.forEach(link => {
        let distance = link.p0.position.dist(link.p1.position),
          difference = link.length - distance,
          percent = difference / distance / 2;
        let offset = new Vector(
          (link.p1.position.x - link.p0.position.x) * percent,
          (link.p1.position.y - link.p0.position.y) * percent
        );
        if (!link.p0.pinned) {
          link.p0.position.sub(offset);
        }
        if (!link.p1.pinned) {
          link.p1.position.add(offset);
        }
      });
    }
  }
  draw() {
    let distance = this.points[0].position.dist(cursor);
    if (distance < force_contact.size) {
      this.color = lerpColor(
      this.contact_color,
      this.start_color,
      Util.map(distance, 0, force_contact.size, 0, 1)
      );
    }else{
      this.color = this.start_color;
    }
    
    ctx.strokeStyle = this.color;
    ctx.lineWidth = this.thickness;
    ctx.beginPath();
    smooth(this.points.map(point => point.position));
    ctx.stroke();
  }
}

let land = {
  field: [],
  init: function() {

let div = 30;
  
  for (let y= H; y > 0;  y-= div){
  for (let x= W; x > 0; x-=div){
    let new_pos = new Vector(0,0);
    if(y % (div*2) < div){
      new_pos = new Vector(x,y);
    }else{
      new_pos = new Vector(x-(div/2),y);
        }
    
        let g = new Hair(
          new_pos.x,
          new_pos.y,
          -Math.PI / 2,
          Util.random(100, 300),
          6
        );
        
        g.color = lerpColor(
          "#2e069e",
          "#1dd2ac",
          Util.map(y, 0, H, 1, 0)
        );
        g.contact_color = lerpColor(
          "#ed3e6f",
          "#fff25e",
          Util.map(y, 0, H, 1, 0)
        );
        g.start_color = g.color;
        g.thickness = Util.random(10, 30);
        g.stiffness = Util.random(0.01, 2);
        this.field.unshift(g);

}
  }
    
  },
  update: function() {
    this.field.forEach(grass => {
      grass.update();
    });
  },
  draw: function() {
    this.field.forEach(grass => {
      grass.draw();
    });
  },
  render: function() {
    this.update();
    this.draw();
  }
};

land.init();

let force_contact = {
  size: 0,
  current:0,
  amplitude: 100,
  period: 80,
  min:60,
  update: function(){

let gradient = ctx.createRadialGradient(cursor.x,cursor.y, 0, cursor.x,cursor.y, this.size);
    
    
gradient.addColorStop(0, lerpColor(
          "#ed3e6f",
          "#fff25e",
          Util.map(cursor.y, 0, H, 1, 0)
        ));
gradient.addColorStop(1, 'rgba(255,150,150,0)');
ctx.fillStyle = gradient;
ctx.fillRect(cursor.x - this.size ,cursor.y - this.size , this.size * 2, this.size * 2);
    
    
    this.size =  this.min + Math.abs(this.amplitude * Math.cos(this.current / this.period));
    this.current += 1;
    
  },
}

function loop() {
  // main animation loop
  ctx.clearRect(0, 0, W, H);
  force_contact.update();
  wind.update()
  land.render();
  // update wind
  requestAnimationFrame(loop);
}

loop();

function smooth(points) {
  ctx.moveTo(points[0].x, points[0].y);
  for (i = 1; i < points.length - 2; i++) {
    var xc = (points[i].x + points[i + 1].x) / 2;
    var yc = (points[i].y + points[i + 1].y) / 2;
    ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
  }

ctx.quadraticCurveTo(
    points[i].x,
    points[i].y,
    points[i + 1].x,
    points[i + 1].y
  );
}

// https://gist.github.com/rosszurowski/67f04465c424a9bc0dae

function lerpColor(a, b, amount) {
  var ah = parseInt(a.replace(/#/g, ""), 16),
    ar = ah >> 16,
    ag = (ah >> 8) & 0xff,
    ab = ah & 0xff,
    bh = parseInt(b.replace(/#/g, ""), 16),
    br = bh >> 16,
    bg = (bh >> 8) & 0xff,
    bb = bh & 0xff,
    rr = ar + amount * (br - ar),
    rg = ag + amount * (bg - ag),
    rb = ab + amount * (bb - ab);

return (
    "#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1)
  );
}

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