p5js neno

Neno Effect

by mingjian sun

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>

CSS

body {
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

JavaScript

var opts = {
  len: 20, //六边形的单边长度
  count: 50, //场景一次多少条线
  rate: 20, //速度 越小越快
  dieChance: 0.05, //单次绘画失败进行重绘的几率
  spawnChance: 1,
  sparkChance: 0.1, //[0,1] 越大画出的六边形越多重
  sparkDist: 10, //闪烁点的距离
  sparkSize: 2, //闪烁点的大小
  color: 'hsl(hue,100%,light%)',
  contentLight: 60, // [0,100] 色块的亮度
  shadowToTimePropMult: 6, //五边形的内环阴影大小
  LightInputMultiplier: 0.03,
  cx: 0, //动画开始x坐标
  cy: 0, //动画开始y坐标
  bgColorArr: [0, 0, 0], //背景色数组
  repaintAlpha: 0.04,
  hueChange: 0.1
}

function Line() {
  this.opts = opts;
  this.reset();
}

Line.prototype.reset = function() {
  this.x = 0;
  this.y = 0;
  this.addedX = 0;
  this.addedY = 0;
  this.rad = 0;
  this.lightInputMultiplier = this.opts.LightInputMultiplier * Math.random();
  this.color = this.opts.color.replace('hue', tick * this.opts.hueChange)
  this.cumulativeTime = 0
  this.beginPhase()
}

Line.prototype.beginPhase = function() {
  this.x += this.addedX;
  this.y += this.addedY;
  this.time = 0;
  this.targetTime = (this.opts.rate * Math.random()) | 0;
  this.rad += baseRad * (Math.random() < 0.5 ? 1 : -1);
  this.addedX = Math.cos(this.rad);
  this.addedY = Math.sin(this.rad);
  if (Math.random() < this.opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) {
    this.reset();
  }
}

Line.prototype.step = function() {
  ++this.time;
  ++this.cumulativeTime;
  if (this.time >= this.targetTime) {
    this.beginPhase();
  }
  var prop = this.time / this.targetTime;
  var wave = Math.sin(prop * Math.PI / 2);
  var x = this.addedX * wave;
  var y = this.addedY * wave;
  ctx.shadowBlur = prop * this.opts.shadowToTimePropMult;
  ctx.fillStyle = ctx.shadowColor = this.color.replace('light', this.opts.contentLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier));
  rect(this.opts.cx + (this.x + x) * this.opts.len, this.opts.cy + (this.y + y) * this.opts.len, 2, 2);
  if (Math.random() < this.opts.sparkChance) {
    rect(this.opts.cx + (this.x + x) * this.opts.len +...