canvas丝带动画

下载代码

html

css

分享到微信朋友圈

html

css

* {
	box-sizing:border-box;
}
body {
	font-family:sans-serif;
	font-size:0.8em;
	background:#000;
}
canvas {
	max-width:100%;
	border-radius:400px;
}
#pmenu {
	border:none;
	cursor:pointer;
	padding:none;
	font-weight:bold;
	background:none;
	line-height:1;
	font-size:26pt;
}
div.mb {
	position:relative;
	margin:0;
	padding:0;
	text-align:center;
	font-weight:bold;
	border-top:1px dotted #BBB;
	border-right:1px solid transparent;
	border-bottom:1px solid transparent;
	border-left:1px solid transparent;
}
div.pholder {
	width:188px;
	padding:4px;
	height:25px;
}
div.slider {
	position:absolute;
	top:0px;
	left:0px;
	height:26px;
	opacity:0;
	background:hsl(240,30%,86%);
	display:block;
	width:70px;
	padding:4px 0;
	border-right:4px solid hsl(240,30%,74%);
}
/* 70 of 132 */
  div.rtext {
	position:absolute;
	top:0px;
	left:0px;
}
div.rlabel {
	display:inline-block;
	float:left;
	white-space:nowrap;
	padding:4px 0;
	width:120px;
}
div.rep {
	display:inline-block;
	float:left;
	width:32px;
	margin-right:2px;
	border-left:1px dotted #EEE;
	padding:4px 4px 4px 0;
	text-align:right;
}
div.inputdiv {
	position:absolute;
	top:0px;
	left:0px;
	height:26px;
	border:1px solid transparent;
}
input.range {
	height:24px;
	opacity:0.01;
	cursor:pointer;
	margin:0;
	width:152px;
}
input.cb {
	position:absolute;
	top:0;
	left:0;
	opacity:0.01;
	width:100%;
	height:24px;
	cursor:pointer;
	margin:0;
}
div.infoc {
	border:1px dotted #99F;
}
div.locksym {
	text-align:center;
	font-size:14px;
	padding:2px 0;
	color:black;
}
div.lockdiv {
	position:relative;
	padding:0;
	float:right;
	height:24px;
	height:26px;
	margin-top:-1px;
}

JavaScript

var CSIZE=400;

var canvas=document.querySelector('#cta');
onresize=function() {
  canvas.style.maxHeight=window.innerHeight-20+'px';
}

var ctx=canvas.getContext('2d');
ctx.translate(CSIZE,CSIZE);
ctx.rotate(-Math.PI/2);
ctx.lineWidth=4;

ctx.strokeStyle='hsl(180,90%,80%)';
ctx.fillStyle='hsla(0,0%,0%,0.05)';

onresize();

function getRandomInt(min, max, low) {
  var p=low?low:1;
  min=Math.ceil(min);
  max=Math.floor(max);
  return Math.floor(powerRandom(p)*(max-min))+min;
}

var primes=[2,3,5,7,11,13,17,19];

var cycsets={
  2:[2,4,6,8,10,12,14,16,18],
  3:[3,6,9,12,15,18],
  5:[5,10,15],
  7:[7,14],
  11:[11],
  13:[13],
  17:[17],
  19:[19]
};

var cycsets2={
  2:[2,4,8,16],
  3:[3,9],
  5:[5],
  7:[7],
  11:[11],
  13:[13],
  17:[17],
  19:[19]
};

function getFactors(n) {
  let a=[];
  for (let p of primes) {
    if (n%p==0) {
      a.push(p);
    }
  }
  return a;
}

function getCycleArray(n) {
  let a=new Set();
  for (let p of primes) {
    if (n%p==0) {
      for (let f of cycsets2[p]) {
        a.add(f);
      }
    }
  }
  return Array.from(a);
}

this.setCycles=function() {
    //if (Math.random()<0.3) {  // put symmetry control here
      //let ca=getFactors(this.cycleSet);
      let ca=getCycleArray(this.cycleSet);
      if (ca.length==0) {
	return this.cycleSet;
      }
      return ca[getRandomInt(0,ca.length)];
/*
    } else if (Math.random()<0.3) {  // put symmetry control here
      let ca=getFactors(ribbons.rCount);
      if (ca.length==0) {
	return this.cycleSet;
      }
      return ca[getRandomInt(0,ca.length)];
    } else {
      let ca=getCycleArray(ribbons.rCount);
      if (ca.length==0) {
	return this.cycleSet;
      }
      return ca[getRandomInt(0,ca.length)];
    }
*/
  }
  this.randomizeRadiiCount=function() {
    //rself.radiiCount=2+Math.round(2*Math.random());
    rself.radiiCount=2+getRandomInt(0,4);
  }
  this.randomizeRadii=function() {
    if (rself.radiiCount==5) {
      rself.r1=70-20*Math.random();
      rself.r2=20+(160-rself.r1)*Math.random();
      rself.r3=20+(200-rself.r1-rself.r2)*Math.random();
      rself.r4=20+(240-rself.r1-rself.r2-rself.r3)*Math.random();
      rself.r5=280-rself.r1-rself.r2-rself.r3-rself.r4;
    } else if (rself.radiiCount==4) {
      rself.r1=70-20*Math.random();
/*
      rself.r2=70-20*Math.random();
      rself.r3=70-20*Math.random();
      rself.r4=70-20*Math.random();
*/
//      rself.r1=20+160*Math.random();
      rself.r2=20+(200-rself.r1)*Math.random();
      rself.r3=20+(240-rself.r1-rself.r2)*Math.random();
      rself.r4=280-rself.r1-rself.r2-rself.r3;
      rself.r5=0;
    } else if (rself.radiiCount==3) {
      rself.r1=90-30*Math.random();
/*
      rself.r2=90-30*Math.random();
      rself.r3=90-30*Math.random();
*/
//      rself.r1=20+160*Math.random();
      rself.r2=20+(240-rself.r1)*Math.random();
      rself.r3=(280-rself.r1-rself.r2);
      rself.r4=0;
      rself.r5=0;
    } else if (rself.radiiCount==2) {
      let rr=210+70*Math.random();  // sum of radii from 210-280
      let rd=30-60*Math.random();
      rself.r1=(rd+rr)/2;
      rself.r2=(rr-rd)/2;
/*
      rself.r1=20+160*Math.random();
      rself.r2=280-rself.r1;
*/
      rself.r3=0;
      rself.r4=0;
      rself.r5=0;
    } else {
      //debugger;
    }
  }
  this.randomizeCycles=function() {
    rself.cycleSet=ribbons.goodCycleSet();
    rself.c1=rself.setCycles();
    rself.c2=rself.setCycles();
    rself.c3=rself.setCycles();
    rself.c4=rself.setCycles();
    rself.c0=getRandomInt(1,19,4);
  }
  this.randomizeTypes=function() {
    rself.type1=[-1,1][getRandomInt(0,2)];
    rself.type2=[-1,1][getRandomInt(0,2)];
    rself.type3=[-1,1][getRandomInt(0,2)];
    rself.type4=[-1,1][getRandomInt(0,2)];
  }
  this.getSP=function() {
    let sp=this.c0+this.c1;
    switch(this.radiiCount) {
      case 2:
	return sp;
      case 3:
	return sp+=this.c2;
      case 4:
	return sp+=(this.c2+this.c3);
      case 5:
	return sp+=(this.c2+this.c3+this.c4);
      default:
	return 0;
    }
  }
  this.controlledCycleChange=function(mod) {
    let count=0;
    let sMax=24;
    let sMin=15;
    do {
      mod();
      var sp=rself.getSP();
      if (count++>10) {
        return;
      }
    //} while (sp<rself.spMin || sp>rself.spMax);
    } while (sp>sMax++ || sp<sMin--);
  }
}

function cbLoc(p1,p2,frac) {
  var f1=.2;
  var f2=.8;
  var e1=Math.pow(1-frac,3)*p1;
  var e2=3*frac*Math.pow(1-frac,2)*(p1+(p2-p1)*f1);
  var e3=3*(1-frac)*Math.pow(frac,2)*(p1+(p2-p1)*f2);
  var e4=Math.pow(frac,3)*p2;
  return e1+e2+e3+e4;
}

ribbons.randomize();
ribbons.randomizeHues();

function bmov(btn) {
  btn.parentNode.parentNode.style.color='blue';
}

function bmou(btn) {
  btn.parentNode.parentNode.style.color='black';
}

function btnFocus(ctl) {
  ctl.parentNode.parentNode.className='mb infoc';
}

function btnBlur(ctl) {
  ctl.parentNode.parentNode.className='mb';
}

var rotateSpeedRanger=new Ranger({
  label:'Rotation speed',
  min:1,
  max:10,
  step:1,
  value:5,
  oninput:function(val) {
    //ribbons.DSinc=val*0.000025;
    ribbons.DSinc=val*0.00005-0.000045;
  },
});

var curveSpeedRanger=new Ranger({
  label:'Curve speed',
  min:1,
  max:10,
  step:1,
  value:5,
  oninput:function(val) {
    path.duration=50000/val-4500;
  },
});

/*
var colorCountRanger=new Ranger({
  label:'Color count',
  min:1,
  max:100,
  step:1,
  value:5,
  oninput:function(val) {
    ribbons.colorCount=parseInt(val);
    ribbons.randomizeHues();
  },
  lockInput:function(isLocked) { }
});
colorCountRanger.setValue(ribbons.colorCount);
*/

var changeRateRanger=new Ranger({
  label:'Change rate',
  min:0,
  max:10,
  step:1,
  value:3,
  oninput:function(val) {
    path.mf=val/10;
  }
});

start();

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