魔法曼德布罗特粒子

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

// Magic Mandelbrot Particles - An Interactive Fractal Particle Simulation
// - Mouse controls where points are spawned
// - Click anywhere to clear trails
// - Press any key to clear points

// Created by Frank Force
// License Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License.

randomness  = .005 // how much randomness for each point
alpha       = .05  // background alpha, controls trails
life        = 500  // how long to keep particles alive
maxCount    = 2e3  // maximum number of particles
scale       = .9   // size of mandelbrot set
offset      = .2   // offset of mandelbrot set
spawnCount  = 5    // how many particles to spawn each frame
updateCount = 1    // how many updates each frame
juliaMode   = 0    // juia set mode
testMode    = 0    // fully random mode for testing
warmUp      = 1    // some random points on start so it's not blank

t=0
a=[]
A=B=2e3
x=c.getContext`2d`
x.fillRect(0,0,c.width,c.height)

requestAnimationFrame(u=_=>{

if (warmUp==1)
{
    warmUp=2
    for(k=100;k--;) u();
    warmUp=0
}

if (!warmUp)
  requestAnimationFrame(u)

if (c.width!=innerWidth || c.height!=innerHeight)
{
  // match canvas to inner size
  c.width=innerWidth
  c.height=innerHeight
  x.fillRect(0,0,c.width,c.height)
}

// background fill - make trails that dont leave trails!
for(i=3;i--;)
{
  x.globalCompositeOperation=i%2?'lighter':'difference'
  x.fillStyle=i%2?`hsl(0,0%,5%)`:'#FFF'
  x.fillRect(0,0,c.width,c.height)
}

// aspect ration correction
aspect=c.height/c.width
aspectScale=(aspect < 1)?scale*c.height/c.width:scale

// add points
for(i=spawnCount;i--;)
a.push(testMode||warmUp?
{
  X:X=A=Math.random()*3-2.5,
  Y:Y=B=Math.random()*4-2,
  A:X,B:Y,T:0
}:juliaMode?{
  X:X=A+Math.random()*4-2,
  Y:Y=B+Math.random()*4-2,
  T:0
}:{
  X:X=A+Math.random()*randomness*2-randomness,
  Y:Y=B+Math.random()*randomness*2-randomness,
  A:X,B:Y,T:0
})

// prevent going over max
if (a.length>maxCount)
 a.splice(0,a.length-maxCount)
 
// update and render the points
x.globalCompositeOperation='screen'
for(i=updateCount;i--;)
a.map((o,i)=>{with(o){
  r=Math.hypot(A,B)
  L=++T/life
  x.fillStyle=`hsl(${r*500+t*9+L*199},89%,${L=50-L*50}%)` 
  x.fillRect((X*aspectScale+1+offset)*c.width/2,(Y*aspectScale/aspect+1)*c.height/2,4,4)
  X=X*X-Y*Y+(Y=2*Y*X+B,A);
  X&&L>0?0:a.splice(i,1)
}})

// input
onkeydown=e=>{a=[];x.fillRect(0,0,c.width|=0,2e3)}
onmousedown=e=>x.fillRect(0,0,c.width|=0,2e3)
onmousemove=e=>
{
  A=(e.x/c.width*2-1-offset)/aspectScale
  B=aspect*(e.y/c.height*2-1)/aspectScale
}

//throw A+', '+B+' '+a.length //FF2020
t+=1/60})

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