p5实现波光粼粼动画效果代码-html代码-BFW代码库

p5实现波光粼粼动画效果代码

代码语言：html

所属分类：动画

代码描述：p5实现波光粼粼动画效果代码

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

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

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

  
</head>

<body>
  
 
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
      <script  >
let theShader;
let debug_div = document.querySelector('.debug-el');

const vertexShader = `
	// - - - .VERT FILE - - - 

	// This code is applied to every PIXEL.

	// THIS IS THE .VERT FILE. is used to place and position the pixel edits of the .frag file.

	// The .vert file indicates how each pixel in the shader should be colored.

	// - - - - - 

	// SETUP code

	// If GL_ES (Browser shader API) is deteced 
	#ifdef GL_ES

	// Indicate the precision of the shader
	// "highp" or "mediump" or "lowp"
	// float is the data type
	precision mediump float;
	#endif


	//"attribute" is calls the a global variable between the .vert and the OpenGLES environment. "vec3" indicates that the variable has 3 parameters (x, y, z). "aPosition" is a read-only variable defining the default position info of the shader. 

	attribute vec3 aPosition;


	varying vec3 vPos;


	// Shader coordinate system is opposite a p5 canvas. It starts in teh lower left corner (0.0, 0.0) and then goes to the upper right (1.0, 1.0). 
	// Everything is defined on a scale for 0-1.
	// So position x = 0, y = 0 or (0, 0) for a sketch, is position (0.0, 0.0) for the shader.
	// Position x = width, y = height or (width, height) for a sketch, is position (1.0, 1.0) for the shader.


	void main() {
		// For shaders in p5 we have to scale the position. Thi is how we do that.

		//Establish a vec4 which has 4 parameters. Take aPositon and add 1.0, the fourth vec4 postion parameter. (x,y,z,w). We aren't using z because we're operating in 2 diminsions. When w = 1.0 the vector is treated as a position. When w = 0.0 the vector is treated as a direction as is standard in vector math.
		// We want to move it to the center of the screen.
		vec4 positionVec4 = vec4(aPosition, 1.0);

		// Here we .........完整代码请登录后点击上方下载按钮下载查看