Skip to content

Instantly share code, notes, and snippets.

@liuzhenqi77

liuzhenqi77/liquid-particles-3D.htm

Forked from flying19880517/liquid-particles-3D.htm
Created December 10, 2023 05:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save liuzhenqi77/acc9444773666398c7a11c03d0d24604 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save liuzhenqi77/acc9444773666398c7a11c03d0d24604 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
liquid-particles-3D.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Liquid Particles 3D | spielzeugz.de/lab </title>
<meta name="description" content="HTML5 Demo, particles trapped in a sphere." />
<meta name="keywords" content="html5,canvas,javascript,particles,interactive,velocity,programming,flash" />
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#000000;
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="mainCanvas" width="1000" height="560"></canvas>
<div id="output"></div>
<script>
(function(){function w(){h.globalCompositeOperation="source-over";h.fillStyle="rgba(8,8,12,"+v+")";h.fillRect(0,0,f,k);h.globalCompositeOperation="lighter";0.75>v&&(v+=0.05);D=s-x;E=t-y;x=s;y=t;for(var a=f/1.15,l=f/8,p=f/2,r=Math.random,F=Math.abs,w=Math.sqrt,A=Math.cos,B=Math.sin,C=Math.atan2,H=G;H--;){var e=I[H],g=e.x,c=e.y,d=e.vX,b=e.vY,q=g-s,m=c-t,n=w(q*q+m*m),m=C(m,q),q=A(m),m=B(m);if(z&&n<p)var u=14*(1-n/p),d=d+(q*u+0.5-r()),b=b+(m*u+0.5-r());n<a&&(u=(1-n/a)*f*0.0014,d-=q*u,b-=m*u);n<l&&(n=
(1-n/l)*f*2.2E-4,d+=D*n,b+=E*n);d*=J;b*=J;F(d);F(b);g+=d;c+=b;g>f?g-=f:0>g&&(g=f+g);c>k?c-=k:0>c&&(c=k+c);e.vX=d;e.vY=b;e.x=g;e.y=c;d=e;b=g/f*Math.PI*2;c=c/k*Math.PI;b={theta:b,phi:c,x:-100*Math.sin(c)*Math.sin(b),y:-100*Math.cos(c),z:-100*Math.sin(c)*Math.cos(b)};d.pos3D=b;e.pos3D.z-=200;-299>e.pos3D.z||(d=300/(300+e.pos3D.z),b=e.pos3D.x*d+f/2,c=e.pos3D.y*d+k/2,h.fillStyle=e.color,h.beginPath(),h.arc(b,c,d,0,K,!0),h.closePath(),h.fill())}}function r(a){f=document.documentElement.clientWidth;k=document.documentElement.clientHeight;
p.width=f;p.height=k}function A(a){a=a?a:window.event;s=x=a.pageX;t=y=a.pageY;document.onmousemove=B}function B(a){a=a?a:window.event;s=a.pageX;t=a.pageY}function C(a){z=!0;return!1}function L(a){return z=!1}function M(){this.color="rgb("+Math.floor(255*Math.random())+","+Math.floor(255*Math.random())+","+Math.floor(255*Math.random())+")";this.size=this.vY=this.vX=this.x=this.y=0;this.pos3D={x:0,y:0,z:100}}var p,h,f=1E3,k=560,G=1750,I=[],J=0.96,K=2*Math.PI,v=0,s,t,D=0,E=0,x=0,y=0,z=!1;window.onload=
function(){p=document.getElementById("mainCanvas");if(p.getContext){document.getElementById("outer");document.getElementById("canvasContainer");h=p.getContext("2d");window.moveTo(0,0);window.resizeTo(screen.width,screen.height);r(null);for(var a=G;a--;){var l=new M;l.x=0.5*f;l.y=0.5*k;l.vX=Math.cos(a)*Math.random()*40;l.vY=Math.sin(a)*Math.random()*20;l.size=2;I[a]=l}document.onmousedown=C;document.onmouseup=L;document.onmousemove=A;window.onresize=r;r(null);setInterval(w,33)}}})();
</script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11054609-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
@liuzhenqi77
Copy link
Author

liuzhenqi77 commented Dec 10, 2023

https://terraquantum.swiss/

!(function () {
  function t() {
    (r.globalCompositeOperation = "source-over"),
      (r.fillStyle = "rgba(8,8,12," + v + ")"),
      r.fillRect(0, 0, m, l),
      (r.globalCompositeOperation = "lighter"),
      0.75 > v && (v += 0.05),
      (f = c - p),
      (g = d - w),
      (p = c),
      (w = d);
    for (
      var t = m / 1.15,
        o = m / 8,
        e = m / 2,
        n = Math.random,
        a = Math.abs,
        i = Math.sqrt,
        h = Math.cos,
        s = Math.sin,
        x = Math.atan2,
        z = 1350;
      z--;

    ) {
      var D = u[z],
        I = D.x,
        b = D.y,
        X = D.vX,
        Y = D.vY,
        C = i((E = I - c) * E + (P = b - d) * P),
        E = h((P = x(P, E))),
        P = s(P);
      if (y && C < e) {
        var B = 14 * (1 - C / e);
        (X = X + (E * B + 0.5 - n())), (Y = Y + (P * B + 0.5 - n()));
      }
      C < t && ((X -= E * (B = (1 - C / t) * m * 0.0014)), (Y -= P * B)),
        C < o && ((X += f * (C = (1 - C / o) * m * 22e-5)), (Y += g * C)),
        (Y *= 0.96),
        a((X *= 0.96)),
        a(Y),
        (I += X) > m ? (I -= m) : 0 > I && (I = m + I),
        (b += Y) > l ? (b -= l) : 0 > b && (b = l + b),
        (D.vX = X),
        (D.vY = Y),
        (D.x = I),
        (D.y = b),
        (X = D),
        (Y = {
          theta: (Y = (I / m) * Math.PI * 2),
          phi: (b = (b / l) * Math.PI),
          x: -100 * Math.sin(b) * Math.sin(Y),
          y: -100 * Math.cos(b),
          z: -100 * Math.sin(b) * Math.cos(Y),
        }),
        (X.pos3D = Y),
        (D.pos3D.z -= 200),
        -299 > D.pos3D.z ||
          ((X = 300 / (300 + D.pos3D.z)),
          (Y = D.pos3D.x * X + m / 2),
          (b = D.pos3D.y * X + l / 2),
          (r.fillStyle = D.color),
          r.beginPath(),
          r.arc(Y, b, X, 0, M, !0),
          r.closePath(),
          r.fill());
    }
  }
  function o(t) {
    (m = document.documentElement.clientWidth),
      (l = document.documentElement.clientHeight),
      (s.width = m),
      (s.height = l);
  }
  function e(t) {
    (t = t || window.event),
      (c = p = t.pageX),
      (d = w = t.pageY),
      (document.onmousemove = n);
  }
  function n(t) {
    (t = t || window.event), (c = t.pageX), (d = t.pageY);
  }
  function a(t) {
    return (y = !0), !1;
  }
  function i(t) {
    return (y = !1);
  }
  function h() {
    (this.color =
      "rgb(" +
      Math.floor(255 * Math.random()) +
      "," +
      Math.floor(255 * Math.random()) +
      "," +
      Math.floor(255 * Math.random()) +
      ")"),
      (this.size = this.vY = this.vX = this.x = this.y = 0),
      (this.pos3D = { x: 0, y: 0, z: 100 });
  }
  var s,
    r,
    c,
    d,
    m = 1e3,
    l = 560,
    u = [],
    M = 2 * Math.PI,
    v = 0,
    f = 0,
    g = 0,
    p = 0,
    w = 0,
    y = !1;

  var particlesAnimationOnLoad =  function () {
    if ((s = document.getElementById("ani")).getContext) {
      document.getElementById("bounce"),
        document.getElementById("canvasContainer"),
        (r = s.getContext("2d")),
        window.moveTo(0, 0),
        window.resizeTo(screen.width, screen.height),
        o();
      for (var n = 1350; n--; ) {
        var c = new h();
        (c.x = 0.5 * m),
          (c.y = 0.5 * l),
          (c.vX = Math.cos(n) * Math.random() * 40),
          (c.vY = Math.sin(n) * Math.random() * 20),
          (c.size = 2),
          (u[n] = c);
      }
      (document.onmousedown = a),
        (document.onmouseup = i),
        (document.onmousemove = e),
        (window.onresize = o),
        o(),
        setInterval(t, 33);
    }
  };


  var activateParticlesAnimation=function(){    
    if (!window.isMobile){
      particlesAnimationOnLoad();     
      $('#video_bg').detach();   
      //document.getElementById("video_bg").remove();
    }else{
      $('#video_bg').show();
      $('#ani').css('display','none');
      $('#bounce').css('display','none');
    }
  };

  window.onload = activateParticlesAnimation;
})();

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment