p5实现块状洞口动态效果-html代码-BFW代码库

p5实现块状洞口动态效果

代码语言：html

所属分类：动画

代码描述：p5实现块状洞口动态效果

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

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

<style>
/* Make the canvas element fill the screen. */
canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  border: none;
  margin: 0;
  z-index: -1;
}
</style>

</head>
<body translate="no">
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/p5-0.5.1.js"></script>
<script>
let numRockWaves = 30;
let rockBumps = 40;
let rockWaves = [];
let sandWaves = [];
let waveShades = [];

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  resetCanvas();
}

function resetCanvas(){
  //Calling resize canvas twice helps prevent scrollbars showing up.
  resizeCanvas(windowWidth, windowHeight);
  
  if (windowWidth > 600){
    rockBumps = 40;
  } else {
    rockBumps = 20;
  }
  
  orchestrateLandscape();
}

function setup(){
  createCanvas(windowWidth, windowHeight); 
  colorMode(HSB, 360, 100, 100, 1);
  
  rectMode(CENTER);
  
  textSize(22);
  textAlign(CENTER);
  textStyle(BOLD);
  textFont('Courier New');
  
  resetCanvas();
}

function orchestrateLandscape() {
  waveShades = [];
  rockWaves = [];
  
  for (let i = 1; i < numRockWaves; i++){
    let wavePoints = [];
    
    let zIndex = i;
    let yBaseHeight = 0;
    let yVariance = windowHeight / (numRockWaves * 2);
    
    for (let j = 0; j <= rockBumps; j++){
      let yPos = yBaseHeight + random(-yVariance, yVariance);
      if (j == 0){
        wavePoints.push([-windowWidth/2, yPos, zIndex]);
        continue;
      }

      if (j == rockBumps){
        wavePoints.push([windowWidth/2, yPos, zIndex]);
        continue;
      }

      let xPos = (windowWidth * j / rockBumps) + random(-5, 5) - windowWidth / 2;
      wavePoints.push([xPos, yPos, zIndex]);
    }
    
    wavePoints.push([windowWidth/2, windowHeight, zIndex]);
    wavePoints.push([-windowWidth/2, windowHeight, zIndex]);
    wavePoints.push([-wi.........完整代码请登录后点击上方下载按钮下载查看