p5实现宇宙星体行星运行动画效果代码-html代码-BFW代码库

p5实现宇宙星体行星运行动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现宇宙星体行星运行动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  


  
  
  
  
<style>
* { margin:0; padding:0; } 
html, body { width:100%; height:100%; overflow: hidden; background:black;} 
canvas { display:block; }
</style>


  
  
</head>

<body translate="no">
  <div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5-1.9.0.js"></script>
      <script  >

let numArcs = 2000;
let zoomScale = 3;

function setup (){
  createCanvas();
  colorMode(HSB, 1, 1, 1);
  windowResized();
}

let spaceObject = ({col, hue, len, angle, radius, speed, target, isPlanet=false}) => 
                  ({col, hue, len, angle, radius, speed, target, isPlanet});

let rInt = (b, a=0) => floor(random(min(a, b), max(a, b)));

let init = () => {
  window.arcs       = [];
  window.planets    = [];
  window.stars      = [];
  
  window.numCircles = rInt(70, 120);
  window.radius     = min(width, height)*.45;
  window.arcSize    = radius/numCircles;
  window.center     = {x:0, y:0, radius, len:radius/2};
  
  window.baseHue  = random();
  window.hueRange = random(.2, .7)*(random() < .5 ? -1 : 1);
  window.colorMap = (amt, hueShift=0) => [(baseHue+amt*hueRange+hueShift)%1, amt, 1-amt];
  
  let variance = random(.05, .4);
  
  for (let i = 0; i < numArcs; i++){
    let radius = rInt(numCircles);
    let amt    = radius/numCircles + random(-variance, variance);
    amt = constrain(amt, 0, 1);
    
    arcs.push(spaceObject({
      col    : colorMap(amt),
      len    : random() < .2 ? 1/(TAU*radius) : random(PI/2),
      angle  : random(TAU),
      radius : radius*arcSize,
      speed  : random(0, .3) * (random() < .5 ? 1 : -1) * .02,
    }));
  }
  
  arcs = arcs.sort((a, b) => b.len-a.len);
  
  let numPlanets = rInt(2, 7);
  for (let i = 0; i < numPlanets; i++){
    let targetCenter = (planets.length > 0) && (random() < .5);
    let target = targetCenter ? planets[rInt(0, planets.length)] : center;
    let len    = random(.5, .7)*target.len;
    
    planets.push(spaceObject({
      hue      : random(-.15, .15), len,
      angle    : random(TAU),
      radius   : targetCenter ?  random(target.len/4) + (len+target.len)/2 :.........完整代码请登录后点击上方下载按钮下载查看