MayContainGifs - day18

maycontaingifs-day18.markdown

MayContainGifs - day18

A Pen by Aysar Khalid on CodePen.

License.

script.js

let conf = {
  FRAME_RATE: 30,
  BG: [22, 25, 22, 150],
  NUM: 80,
  VELOCITY:6,
  DRAW: true,
  SCALE: 8,
  LENGTH: 10,
  HUE: 70,
};

let width = 520; //window.innerWidth
let height = 520; //window.innerHeight;
let vectorField = [];
noiseScale = 0.17;

const gui = new dat.GUI();

gui.add(conf, 'VELOCITY', 0.5, 20).step(0.5);
gui.add(conf, 'SCALE', 2, 20).step(0.5);
gui.add(conf, 'LENGTH', 4, 100).step(1);
gui.add(conf, 'HUE', 0, 255).step(1);
gui.add(conf, 'DRAW');

setup = () => {
  colorMode(HSB, 255);
  // width = window.innerWidth
  // height = window.innerHeight;
  createCanvas(width, height);
  frameRate(conf.FRAME_RATE);
  noFill();
  strokeWeight(2.8);
  setupNoise(3);
};

function setupNoise() {
  vectorField = []
  noiseCtx = createGraphics(width, height);
  noiseCtx._pixelDensity = 1;
  noiseCtx.noiseDetail(4, 0.35);
  for (var y = 0; y < Math.ceil(height / 1.5); y++) {
    vectorField[y] = [];
    for (var x = 0; x <  Math.ceil(width / 1.5); x++) {
      noiseVal = noiseCtx.noise(x * noiseScale, y * noiseScale) * 1;
      vectorField[y][x] = noiseVal;
      noiseCtx.stroke(noiseVal * 255);
      noiseCtx.point(x, y);
    }
  }
}

function Zombie (arr, col) {
  this.history = [...arr];
  this.col = col;
  this.update = function(){
    stroke([...this.col]);
    beginShape()
    this.history.forEach((pt, i) => {
      curveVertex(pt[0], pt[1])
    })
    endShape()
    this.history.pop();
    
    if (this.history.length === 0){
      return false
    }
    return true;
  }
}

function Traveler () {
  this.x = Math.random() * width;
  this.y = Math.random() * height;
  this.history=[[this.x, this.y]];
  this.vx = Math.random() * 10 - 5;
  this.vy = Math.random() * 2 - 1;
  this.e = 0.37;
  this.ao = Math.random() * 0.9 + 2;
  this.r = 16;
  this.col_hue = Math.sin(Math.pow(2, Math.random()) * Math.PI * 2) * 30;
  this.col_sat = 255;
  this.col_val = 205 + Math.sin(Math.pow(2, Math.random()) * Math.PI) * 50;
  
  this.update = function () {
    this.draw();
    let c = vectorField[Math.floor(this.y / conf.SCALE)][Math.floor(this.x / conf.SCALE)];
    let a = c * Math.PI * 2 + this.ao;
    this.r = c * 10 + 3;
    vx = Math.cos(a) * conf.VELOCITY;
    vy = Math.sin(a) * conf.VELOCITY;
    this.vx = vx * this.e + this.vx * ( 1 - this.e);
    this.vy = vy * this.e + this.vy * ( 1 - this.e);
    this.x = this.vx + this.x;
    this.y = this.vy + this.y;
    this.history.unshift([this.x,this.y])
    
    
    if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
      let col = [conf.HUE + this.col_hue, this.col_sat, this.col_val];
      let z = new Zombie(this.history, col);
      zombies.push(z)
      this.x = Math.random() * width
      this.y = height; 
      this.history=[[this.x, this.y]]
    }
    
    if (this.history.length > conf.LENGTH){
      this.history.pop()
    }
    
  }
  this.draw = function() {
    stroke(8);
    beginShape()
    this.history.forEach((pt, i) => {
      curveVertex(pt[0]+1, pt[1]+1)
    })
    endShape()
    let col = [conf.HUE + this.col_hue, this.col_sat, this.col_val];
    stroke(col);
    beginShape()
    this.history.forEach((pt, i) => {
      curveVertex(pt[0], pt[1])
    })
    endShape()
  }
}


const travelers = []
const zombies = []

for(var i = 0; i < conf.NUM; i++){
  var t = new Traveler()
  travelers.push(t)
}

let c = 0;
draw = () => {
  if (conf.DRAW === false) {
    return;
  }
   background(conf.BG); 
  
  zombies.filter(t => t.update())
  travelers.forEach(t => {t.update();})
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.1/dat.gui.js"></script>

style.css

body{
  overflow: hidden;
  background: rgb(22, 25, 22);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
#defaultCanvas0{
  display: block;
}
div#hello {
  font-family: "Arial Narrow", Arial, sans-serif;;
  font-size: 14px;
  letter-spacing: 1.2px;
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 14px;
  color: rgba(256, 256, 256, 0.9);
}

* {
  user-select: none;
}