3D Seek

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var boxSz = 500;
var t;
var seekers = [];

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);

t = new Target();
  for (var i = 0; i < 12; i++) {
    seekers[i] = new Seeker();
  }

}

function draw() {
  background(100);
  translate(0, 0, -boxSz);

rotateY(frameCount * 0.002);

t.update();
  t.display();

for (var i = 0; i < seekers.length; i++) {
    seekers[i].update();
    seekers[i].seek(createVector(t.pos.x, t.pos.y, t.pos.z));
    seekers[i].display();

//seekers[i].seek(createVector(mouseX, mouseY));  
  }

drawBox();

}

function Seeker() {

this.pos = createVector(random(-boxSz * 2, boxSz * 2), random(-boxSz, boxSz * 2), random(boxSz * 2, boxSz * 4));
  this.vel = createVector(random(-2, 2), random(-2, 2), random(-2, 2));
  this.acc = createVector(0, 0), 0;
  this.sz = 10;
  this.maxSpeed = random(1, 5);
  this.maxForce = random(0.03, 0.1);
  this.trail = [];
  this.trailMax = int(random(10, 30));
  this.display = function() {

this.colorTint = 200;

for (var i = 0; i < this.trail.length; i++) {
      var pos = this.trail[i];

push();
      translate(pos.x, pos.y, pos.z);
      this.sz = map(i, 0, this.trailMax, 1, 8);
      this.colorTint = map(i, 0, this.trailMax, 100, 200);
      basicMaterial(this.colorTint);
      sphere(this.sz, 4);
      pop();
    }

push();
    translate(this.pos.x, this.pos.y, this.pos.z);
    basicMaterial(255);
    sphere(10, 8);
    pop();

}

this.update = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);

if (this.trail.length > this.trailMax) {
      this.trail.splice(0, 1);
    }

if (frameCount % 10 == 0) {
      var v = createVector(this.pos.x, this.pos.y, this.pos.z);
      this.trail.push(v);
    }
  }

this.applyForce = function(force) {
    this.acc.add(force);
  }
  this.seek = function(target) {
    var desired = p5.Vector.sub(target, this.pos);
    desired.setMag(this.maxSpeed);

var steering = p5.Vector.sub(desired, this.vel);
    steering.limit(this.maxForce);
    this.applyForce(steering);
  }
}

function Target() {
  this.pos = createVector(random(-boxSz, boxSz), random(-boxSz, boxSz), random(-boxSz, boxSz));
  this.newPos = createVector(0, 0);
  this.display = function() {
    //fill(255, 0, 0);
    push();
    translate(this.pos.x, this.pos.y, this.pos.z);
    basicMaterial(255, 0, 0);
    box(5);
    pop();
    if (frameCount % 200 === 0) {
      this.moveTarget();
    }
  }

this.update = function() {
    this.pos.x = lerp(this.pos.x, this.newPos.x, 0, 1);
    this.pos.y = lerp(this.pos.y, this.newPos.y, 0, 1);
  }
  this.moveTarget = function() {
    this.pos = createVector(random(-boxSz, boxSz), random(-boxSz, boxSz), random(-boxSz, boxSz));
  }
}

function drawBox() {
  // DRAW OUTLINE BOX
  stroke(120);
  //front
  line(-boxSz, -boxSz, boxSz, boxSz, -boxSz, boxSz);
  line(-boxSz, boxSz, boxSz, boxSz, boxSz, boxSz);
  line(-boxSz, -boxSz, boxSz, -boxSz, boxSz, boxSz);
  line(boxSz, -boxSz, boxSz, boxSz, boxSz, boxSz);

//back
  line(-boxSz, -boxSz, -boxSz, boxSz, -boxSz, -boxSz);
  line(-boxSz, boxSz, -boxSz, boxSz, boxSz, -boxSz);
  line(-boxSz, -boxSz, -boxSz, -boxSz, boxSz, -boxSz);
  line(boxSz, -boxSz, -boxSz, boxSz, boxSz, -boxSz);

//left top
  line(-boxSz, -boxSz, boxSz, -boxSz, -boxSz, -boxSz);
  //left bottom
  line(-boxSz, boxSz, -boxSz, -boxSz, boxSz, boxSz);
  //right top
  line(boxSz, -boxSz, boxSz, boxSz, -boxSz, -boxSz);
  // // right bottom
  line(boxSz, boxSz, -boxSz, boxSz, boxSz, boxSz);

}

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