vue实现树木生长过程效果-html代码-BFW代码库

代码语言：html

所属分类：动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  color: #fff;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
canvas {
  width: 100%;
  height: 100%;
}
#app {
  padding: 1rem;
  display: none;
  background: rgba(0,0,0,0.5);
}
#toggle-label {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 2rem;
}
#toggle {
  width: 0;
  height: 0;
  display: none;
}
#toggle:checked ~ #app {
  display: block;
  position: fixed;
  top: 2rem;
}
</style>

</head>
<body translate="no">
<canvas></canvas>
<label id="toggle-label" for="toggle">☰</label>
<input id="toggle" type="checkbox" />
<form id="app">
<div class="form-group">
<label for="seed">Semilla</label>
<input id="seed" type="number" min="0" v-model="seed" />
</div>
<div class="form-group">
<label for="generations">Generaciones</label>
<input id="generations" type="number" min="3" max="10" v-model="maxGenerations" />
</div>
<div class="form-group">
<label for="steps">Pasos</label>
<input id="steps" type="number" min="3" max="10" v-model="maxSteps" />
</div>
<div class="form-group">
<input id="length-x-generation" type="checkbox" v-model="lengthByGeneration" />
<label for="length-generation">¿Cambia la longitud con la generación?</label>
</div>
<fieldset>
<legend>Ramas</legend>
<div class="form-group">
<label for="branches-min">Ramas por rama (mínimo)</label>
<input type="number" min="1" :max="branchesMax" v-model="branchesMin" />
</div>
<div class="form-group">
<label for="branches-max">Ramas por rama (máximo)</label>
<input type="number" :min="branchesMin" max="10" v-model="branchesMax" />
</div>
<fieldset v-if="lengthByGeneration">
<legend>Longitud por generación</legend>
<div class="form-group">
<label for="lenght-min-x-generation-min">Longitud mínima (mínimo)</label>
<input id="length-min-x-generation-min" type="number" v-model="lengthMinByGenMin" />
</div>
<div class="form-group">
<label for="lenght-min-x-generation-max">Longitud mínima (máximo)</label>
<input id="length-min-x-generation-max" type="number" v-model="lengthMinByGenMax" />
</div>
<div class="form-group">
<label for="lenght-max-x-generation-min">Longitud máxima (mínimo)</label>
<input id="length-max-x-generation-min" type="number" v-model="lengthMaxByGenMin" />
</div>
<div class="form-group">
<label for="lenght-max-x-generation-max">Longitud máxima (máximo)</label>
<input id="length-max-x-generation-max" type="number" v-model="lengthMaxByGenMax" />
</div>
</fieldset>
<fieldset v-else="v-else">
<legend>Longitud</legend>
<div class="form-group">
<label for="lenght-min">Longitud mínima</label>
<input id="length-min" type="number" v-model="lengthMin" />
</div>
<div class="form-group">
<label for="lenght-max">Longitud máxima</label>
<input id="length-max" type="number" v-model="lengthMax" />
</div>
</fieldset>
</fieldset>
<fieldset>
<legend>Hojas</legend>
<div class="form-group">
<label for="leaf-generation">Generación en la que aparecen hojas</label>
<input id="leaf-generation" type="number" v-model="leafGeneration" />
</div>
<div class="form-group">
<label for="leaf-min">Hojas (mínimo)</label>
<input id="leaf-min" type="number" min="0" :max="leafMax" v-model="leafMin" />
</div>
<div class="form-group">
<label for="leaf-max">Hojas (máximo)</label>
<input id="leaf-max" type="number" :min="leafMin" max="10" v-model="leafMax" />
</div>
</fieldset>
<fieldset>
<legend>Raices</legend>
<div class="form-group">
<label for="roots-min">Raíces por raíz (mínimo)</label>
<input type="number" min="1" :max="rootsMax" v-model="rootsMin" />
</div>
<div class="form-group">
<label for="roots-max">Raíces por raíz (máximo)</label>
<input type="number" :min="rootsMin" max="10" v-model="rootsMax" />
</div>
</fieldset>
</form>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/vue.2.2.min.js"></script>
<script>
const vm = new Vue({
  el: '#app',
  data() {
    return {
      seed: 0,
      maxGenerations: 5,
      maxSteps: 5,
      branchesMin: 1,
      branchesMax: 3,
      rootsMin: 1,
      rootsMax: 3,
      leafGeneration: 3,
      leafMin: 0,
      leafMax: 3,
      lengthByGeneration: false,
      lengthMin: 8,
      lengthMax: 16,
      lengthMinByGenMin: 10,
      lengthMinByGenMax: 6,
      lengthMaxByGenMin: 18,
      lengthMaxByGenMax: 10 };

  },
  updated() {
    stop();
    branches.clear();
    leafs.clear();
    roots.clear();
    start();
  } });


const canvas = document.querySelector('canvas');
const cx = canvas.getContext('2d');

// TODO: Añadir una función gausiana para que en vez de ser
// totalmente aleatorio haya una cierta probabilidad
// de generar los valores de X manera.

// TODO: Aquí podriamos hacer una lista de componentes
// "renderizables" y "actualizables".
const roots = window.roots = new Set();
const branches = window.branches = new Set();
const leafs = window.leafs = new Set();

let frameID;

const MULTIPLIER = 1103515245;
const INCREMENT = 12345;
const MODULUS = Math.pow(2, 31);

function gradient(x, a, b) {
  return [
  linear(x, a[0], b[0]),
  linear(x, a[1], b[1]),
  linear(x, a[2], b[2])];

}

function clamp(value, min, max) {
  if (value < min) return min;
  if (value > max) return max;
  return value;
}

function linear(x, a, b) {
  return x * b + (1.0 - x) * a;
}

function lcg(x, a = MULTIPLIER, c = INCREMENT, m = MODULUS) {
  return (a * x + c) % m;
}

function randomizer(initialSeed = 0) {
  let seed = initialSeed;
  return function random(min = 0, max = 1) {
    seed = lcg(seed);
    return linear(seed / MODULUS, min, max);
  };
}

class Leaf {
  constructor(position, direction) {
    this.position = position;
    this.direction = direction;
    this.age = 0;
    this.maxAge = 10;
    this.random = randomizer(vm.$data.seed + leafs.size);
    this.size = this.random(5, 10);
    const [r, g, b] = gradient(this.random(), [0xaa, 0x99, 0x00], [0xff, 0xcc, 0x00]);
    th.........完整代码请登录后点击上方下载按钮下载查看