p5实现canvas立方体矩阵动画效果代码-html代码-BFW代码库

p5实现canvas立方体矩阵动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现canvas立方体矩阵动画效果代码

下面为部分代码预览，完整代码请点击下载或在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 translate="no" >
  


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.4.0.js"></script>
      <script >
const colors = ["#2f3136", "#2a2b30", "#7d8187", "#1e1f23", "#5f6a89"];
const backgroundColor = "#000000";
const width = window.innerWidth;
const height = window.innerHeight;
const totalFrames = 1000;
let frameCount = 0;
let recording = false;

let c01 = (g) => {
  return constrain(g, 0, 1);
};

let ease = (p) => {
  p = c01(p);
  return 3 * p * p - 2 * p * p * p;
};

function easeInQuint(x) {
  return x * x * x * x * x;
}

function easeOutQuart(x) {
  return 1 - pow(1 - x, 4);
}

function easeOutExpo(x) {
  return x === 1 ? 1 : 1 - pow(2, -10 * x);
}

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

function draw() {
  frameCount += 1;
  let frameDelta = (2 * Math.PI * (frameCount % totalFrames)) / totalFrames;
  let delta = sin(frameDelta);
  
  colorMode(RGB);
  
  let bg = color(backgroundColor);
  background(bg);
  
  let w = 20;
  let h = 20;
  let size = 10;
  let space = 12;
  
  translate(0, -500, 0);
  scale(5);
  rotateX(HALF_PI / 1.5);
  rotateZ(frameCount * 0.002);

  translate(-w .........完整代码请登录后点击上方下载按钮下载查看