simplex-noise实现多彩圆滑线条波纹效果代码

代码语言:html

所属分类:其他

代码描述:simplex-noise实现多彩圆滑线条波纹效果代码

代码标签: simplex-noise 多彩 圆滑 线条 波纹

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

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

<head>

  <meta charset="UTF-8">

  
  
<style>
body, html {
  margin: 0;
  overflow: hidden;
}

canvas {
  display: block;
  cursor: pointer;
}
</style>



</head>

<body  >
  <canvas id="canvas"></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.min.js"></script>

      <script  >
/*
  Johan Karlsson, 2022
  https://twitter.com/DonKarlssonSan
  MIT License, see Details View
*/

let canvas;
let ctx;
let w, h;
let simplex;
let colors;
let colorTheme;

function setup() {
  canvas = document.querySelector("#canvas");
  ctx = canvas.getContext("2d");
  resize();
  window.addEventListener("resize", () => {
    resize();
    draw();
  });
  canvas.addEventListener("click", draw);
  setupColors();
}

function setupColors() {
  colors = [
    [
      "#A37BB3",
      "#693280",
      "#BEB6E6",
      "#E9D17E",
      "#B3A17B",
    ],
    [
      "#B0A387",
      "#7D673B",
      "#E3D2C6",
      "#8FE6D6",
      "#87B09D",
    ],
    [
      "#84AAAB",
      "#387678",
      "#C2DECF",
      "#E28C9B",
      "#AB849E",
    ],
    [
      "#7D89A.........完整代码请登录后点击上方下载按钮下载查看

网友评论0