spectral.js实现颜色混合示例代码-html代码-BFW代码库

spectral.js实现颜色混合示例代码

代码语言：html

所属分类：其他

代码描述：spectral.js实现颜色混合示例代码，包含rgb混合、webgl shader混合。

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

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <style>
    body {
      padding: 0;
      margin: 0;
    }
  </style>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/p5.1.6.0.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/spectral.min.js"></script>
  <script type="text/javascript">
  
  </script>
</head>

<body style="font-family: Arial; color: #555555;">
  <main>
    <div style=" display: flex; justify-content: center; padding-top: 25px;">
      <div style="width: 100%; max-width: 850px;">
        <div style="padding: 0 25px;">
          
          <div id="container"></div>
          <div style="display: flex; justify-content: space-between; padding-bottom: 25px;">
            <div id="picker-1"></div>
            <div id="picker-2"></div>
          </div>
          <div style="font-size: 20px; padding-bottom: 25px;">
            Welcome to spectral.js, a powerful and versatile javascript library for achieving realistic color
            mixing.<br><br>

            Spectral.js is based on the Kubelka-Munk theory, a proven scientific model that simulates the
            way light interacts with paint to produce lifelike color mixing.<br><br>

            Spectral.js is incredibly user-friendly and easy to implement.<br><br>

            Whether you're a graphic designer, web developer, generative artist or just someone with an eye for
            aesthetics,
            spectral.js can take your color mixing to the next level.<br><br>

            Try it out today and experience the power and realism of Kubelka-Munk color mixing firsthand.
          </div>
        </div>
      </div>
    </div>
  </main>
  <script>
        let buffer;
    let shLinearMix, shSpectralMix;
    let colorPicker1, colorPicker2;
    let color1, color2;
    let renderRatio;
    let windowChanged;

    function windowResized() {
      let maxW = 800;
      let maxH = 450;
      let aspectRatio = maxH / maxW;

      let w = Math.min(800, document.querySelector('#container').clientWidth);
      let h = w * aspectRatio;

      renderRatio = w / maxW;

      resizeCanvas(w, h);
      buffer.resizeCanvas(w, 100 * renderRatio);

      windowChanged = true;
    }

    function setup_shaders() {
      let vertex = `
        #ifdef GL_ES
        precision mediump float;
        #endif

        attribute vec3 aPosition;

        void main() {
        vec4 positionVec4 = vec4(aPosition, 1.0);

          positionVec4.xy = positionVec4.xy * 2.0 - 1.0; 

          gl_Position = positionVec4;
        }
      `;

      let fragment_linear = `
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec4 u_color1;
        uniform vec4 u_color2;

        void main() {
            vec2 st = gl_FragCoord.xy / u_resolution.xy;

            st.y = 1.0 - st.y;

            vec4 col = mix(u_color1, u_color2, st.x); 

            gl_FragColor = col;
        }
      `;

      let fragment_.........完整代码请登录后点击上方下载按钮下载查看