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; }
#controls {
  z-index: 2;
  margin: 20px;
  position: absolute;
  top: 0; left: 0;
  color: white;
}
</style>




</head>

<body translate="no" >
  <div id="controls"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.0.10.2.js"></script>
      <script>
let rx = 0;
let ry = 0;
let dx = 0;
let dy = 0;

let g = (w, h) => {
  let g = createGraphics(w, h);
  g.colorMode(HSB, 1, 1, 1);
  return g;
}

let buffer1, buffer2, circs;
let pBuffer, sky;
let baseColor;
let size = 500;
let size2 = Math.hypot(size, size);
function setup (){
  pixelDensity(1);
  createCanvas(0, 0, WEBGL);
  colorMode(HSB, 1, 1, 1);
  windowResized();
  
  buffer1 = g(size, size);
  buffer2 = g(size, size);
  
  pBuffer = g(size2, size2);
  sky = loadImage("//repo.bfw.wiki/bfwrepo/image/625b6c41d20a5.jpeg");
}

let init = () => {
  baseColor = color(random(), random()*.5 + .5, random()*.1 + .2);
  
  circs = [];
  for (let i = 0; i < 50; i++){
    let r = random(10, 30);
    let x = random(size);
    let y = random(size);
    let col = color(0, .07);
    let blend = BLEND;
    if (random() < .5){
      col = color(random(), 1, random(), .04);
      blend = ADD;
    }
    circs.push({x, y, r, col, blend});
  }
}

let updatePlanet = () => {
  buffer1.push();
  buffer1.noStroke();
  for (let circ of circs){
    buffer1.blendMode(circ.blend);
    buffer1.fill(circ.col);
    buffer1.ellipse(circ.x, circ.y, circ.r);
  }
  buffer1.pop();
  
  buffe.........完整代码请登录后点击上方下载按钮下载查看