p5实现三维点构成球体旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:p5实现三维点构成球体旋转动画效果代码

代码标签: p5 三维 球体 旋转 动画

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
body{
  margin: 0;
  overflow: clip;
  background: #1B2021;
}

main{
  display: flex;
  height: 100vh;
}

canvas{
  margin: auto;
}
</style>




</head>

<body  >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script  >
const colors = ["#fc0000", "#ffcc00"];
//const colors = ["#ff0000", "#00ff00", "#190E4F", "#03012C"];
const backgroundColor = "#cc3357";
const width = window.innerWidth;
const height = window.innerHeight;
const totalFrames = 1000;
let frameCount = 0;
let recording = false;

function setup() {
  canvas = createCanvas(width, height, WEBGL);
  noiseSeed(20);
  randomSeed(10);
}

function draw() {
  frameCount += 1;
  let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames;

  let bg = color(backgroundColor);
  background(bg);

  push();
  scale(3);
  rotateY(frameCount /.........完整代码请登录后点击上方下载按钮下载查看

网友评论0