simplex-noise实现可调节参数图片水面波动镜像效果代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码描述：simplex-noise实现可调节参数图片水面波动镜像效果代码

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

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

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

  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
  
  
  
<style>
:root {
	--dark-color-h: 334.29;
	--dark-color-s: 32.03%;
	--dark-color-l: 30%;
	--light-color-h: 19.2;
	--light-color-s: 30.86%;
	--light-color-l: 84.12%;
	--dark-color: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		var(--dark-color-l)
	);
	--dark-color-lighter: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) + 10%)
	);
	--dark-color-darker: hsl(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) - 10%)
	);
	--dark-color-translucent: hsla(
		var(--dark-color-h),
		var(--dark-color-s),
		var(--dark-color-l),
		0.75
	);
	--dark-color-darker-translucent: hsla(
		var(--dark-color-h),
		var(--dark-color-s),
		calc(var(--dark-color-l) - 10%),
		0.75
	);
	--light-color: hsl(
		var(--light-color-h),
		var(--light-color-s),
		var(--light-color-l)
	);
	--light-color-lighter: hsl(
		var(--light-color-h),
		var(--light-color-s),
		calc(var(--light-color-l) + 10%)
	);
	--light-color-darker: hsl(
		var(--light-color-h),
		var(--light-color-s),
		calc(var(--light-color-l) - 10%)
	);
	--light-color-translucent: hsla(
		var(--light-color-h),
		var(--light-color-s),
		var(--light-color-l),
		0.75
	);
	--color-bg: var(--dark-color);
	--color-text: var(--light-color);
	--resources-bg-color: var(--dark-color-darker-translucent);
	--resources-active-color: color-mix(
		in srgb,
		var(--light-color) 75%,
		transparent
	);
	--resources-color: var(--color-text);
	--canvas-offset: 4rem;
	--max-canvas-width: 52.5rem;
	--max-canvas-height: 52.5rem;
	--tp-base-background-color: #432331;
	--tp-base-shadow-color: #432331;
	--tp-button-background-color: #e3d2ca;
	--tp-button-background-color-active: #f5eeeb;
	--tp-button-background-color-focus: #ece0db;
	--tp-button-background-color-hover: #e3d2ca;
	--tp-button-foreground-color: #432331;
	--tp-container-background-color: #533540;
	--tp-container-background-color-active: #6b4f57;
	--tp-container-background-color-focus: #634650;
	--tp-container-background-color-hover: #5b3d48;
	--tp-container-foreground-color: #e3d2ca;
	--tp-groove-foreground-color: #533540;
	--tp-input-background-color: #533540;
	--tp-input-background-color-active: #6b4f57;
	--tp-input-background-color-focus: #634650;
	--tp-input-background-color-hover: #5b3d48;
	--tp-input-foreground-color: #e3d2ca;
	--tp-label-foreground-color: #b39e9c;
	--tp-monitor-background-color: #381d29;
	--tp-monitor-foreground-color: #b39e9c;
}

*,
::after,
::before {
	border-style: solid;
	border-width: 0;
	box-sizing: border-box;
}

* {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	align-items: center;
	background: var(--color-bg);
	color: var(--color-text);
	display: grid;
	font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans",
		Arial, sans-serif;
	justify-items: center;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
	place-items: center;
	width: 100%;
}

canvas {
	--border-radius: clamp(0.5rem, 1.5vh, 1.5rem);
	background: var(--dark-color-darker-translucent);
	border-radius: var(--border-radius);
	box-shadow: 0 0.125rem 0.25rem var(--dark-color-darker-translucent);
	display: block;
	height: calc(min(100dvw, 100dvh) - var(--canvas-offset));
	max-block-size: var(--max-canvas-height);
	max-inline-size: var(--max-canvas-width);
	pointer-events: none;
	position: relative;
	width: calc(min(100dvw, 100dvh) - var(--canvas-offset));
	width: calc(
		min(100dvw, 100dvh) - var(--canvas-offset) - env(safe-area-inset-bottom)
	);
}

.tp-dfwv {
	padding: 0 0 3rem;
}

.tp-fldv:not(.tp-fldv-expanded) > .tp-fldv_c {
	opacity: 0 !important;
}

.tp-lblv_l {
	pointer-events: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.tp-fldv.tp-fldv-expanded > .tp-fldv_c {
	opacity: 1 !important;
	transition-delay: 0s, 0.2s !important;
	transition-duration: 0.2s, 0.2s !important;
	transition-property: height, opacity !important;
}

.tp-fldv_c:has(.tp-demo-thumbnails) {
	margin-left: 0.25rem;
	padding-left: 0;
}

.tp-demo-thumbnails {
	display: grid;
	gap: 0.1875rem;
	grid-gap: 0.1875rem;
	grid-template-columns: repeat(4, 1fr);
	padding: 0 0.25rem 0.0625rem;
	width: 100%;
}

.tp-demo-thumbnail {
	align-items: center;
	aspect-ratio: 1;
	background-color: var(--cnt-bg);
	border-radius: 0.25rem;
	cursor: pointer;
	display: grid;
	height: auto;
	justify-items: center;
	overflow: hidden;
	place-items: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	width: 100%;
}

.tp-demo-thumbnail:after {
	aspect-ratio: 1;
	border: 0.125rem solid transparent;
	border-radius: 0.25rem;
	content: "";
	display: block;
	grid-area: 1/-1;
	pointer-events: none;
	position: relative;
	transition: border 0.3s;
	width: 100%;
}

.tp-demo-thumbnail:active:after {
	border: 0.125rem solid var(--cnt-fg);
}

.tp-demo-thumbnail img {
	border-radius: 0.25rem;
	display: block;
	grid-area: 1/-1;
	height: auto;
	-o-object-fit: cover;
	object-fit: cover;
	width: 100%;
}

.resources-layer {
	bottom: 0;
	display: block;
	position: fixed;
	right: 0;
	z-index: 1000;
}

.resources {
	background: var(--resources-bg-color);
	display: grid;
	font-size: 0.6875rem;
	font-weight: 300;
	grid-auto-flow: column;
	line-height: 1.3;
	padding: 0.5rem;
	pointer-events: auto;
}

.resources a {
	align-content: center;
	display: grid;
	justify-content: center;
	padding: 0 0.5rem;
	place-content: center;
	transition: color 0.2s ease-in-out;
}

.resources a,
.resources a:visited {
	color: var(--resources-color);
}

.resources a:active,
.resources a:focus-visible {
	color: var(--resources-active-color);
}

.resources a:focus-visible {
	outline: none;
}

.resources a:not(:first-child) {
	border-inline-start: thin solid currentColor;
}

@media (max-width: 51.29875em) {
	canvas {
		--border-radius: clamp(0.5rem, 2vh, 1rem);
	}
}

@media (hover: hover) and (pointer: fine) {
	.tp-demo-thumbnail:hover:not(:disabled):after {
		border: 0.125rem solid var(--cnt-fg);
	}

	.resources a:active:not(:hover),
	.resources a:hover {
		color: var(--resources-active-color);
	}
}
</style>


  
</head>

<body translate="no">
  
<canvas id="output"></canvas>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/utils-v3.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/simplex-noise.js"></script>
      <script type="module">
import { Pane, FolderApi } from "//repo.bfw.wiki/bfwrepo/js/tweakpane.4.0.3.js";

const TweakpaneUtils = {
  appendToFolderContent(folder, elements) {
    const checkAndAppend = () => {
      const folderContent = folder.element.querySelector(".tp-fldv_c");
      if (!folderContent) return false;

      (Array.isArray(elements) ? elements : [elements]).forEach(el => {
        if (!folderContent.contains(el)) {
          folderContent.appendChild(el);
        }
      });

      return true;
    };

    if (checkAndAppend()) return;

    const observer = new MutationObserver(() => {
      if (checkAndAppend()) {
        observer.disconnect();
      }
    });

    observer.observe(folder.element, { childList: true, subtree: true });
  },

  appendToRootPaneContent(pane, elements) {
    const checkAndAppend = () => {
      const rootContent = pane.element.querySelector(".tp-rotv_c");
      if (!rootContent) return false;

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