Beispiel:FeTurbulence-2.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./Beispiel:Grundlayout.css">
<title>Urfilter: feTurbulence - 2</title>
<style>
figure {
box-sizing: border-box;
max-width: 60em;
margin: auto;
}
svg {
width: 96%;
padding:0;
margin:0;
background: white;
}
form {
width: 20em;
}
label {
display: block;
margin-top: 1em;
}
[type=range] {
display: block;
width: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
gap: 1em;
}
h1 {grid-column: 1 / -1;}
</style>
<script>
'use strict';
document.addEventListener('DOMContentLoaded', function () {
// listen to all changes in the form
document.querySelector('#control').addEventListener('input', changeSettings);
changeSettings(); // initialize with default values
});
function changeSettings() {
// select the turbulence filter element
const filterElement = document.querySelector('#turbulence feTurbulence');
// get input values
const baseFrequencyX = parseFloat(document.querySelector('#baseFrequencyX').value);
const baseFrequencyY = parseFloat(document.querySelector('#baseFrequencyY').value);
const numOctaves= parseFloat(document.querySelector('#numOctaves').value);
const type = document.querySelector('input[name="type"]:checked').value;
// set attributes on the filter
filterElement.setAttribute('baseFrequency', `${baseFrequencyX} ${baseFrequencyY}`);
filterElement.setAttribute('numOctaves', `${numOctaves}`);
filterElement.setAttribute('type', type);
return false;
}
</script>
</head>
<body>
<h1>feTurbulence mit <code>numOctaves</h1>
<form id="control">
<label for="baseFrequencyX">baseFrequencyX</label>
<input id="baseFrequencyX" type="range" min="0" max="1" value=".01" step="0.01">
<label for="baseFrequencyY">baseFrequencyY</label>
<input id="baseFrequencyY" type="range" min="0" max="1" value=".01" step="0.01">
<strong>Type:</strong>
<label>
<input type="radio" name="type" value="turbulence" checked> turbulence
</label>
<label>
<input type="radio" name="type" value="fractalNoise" > fractalNoise
</label>
<label for="numOctaves">numOctaves</label>
<input id="numOctaves" type="range" min="1" max="10" value="1" step="1">
</form>
<svg viewBox="0 0 520 360" >
<defs>
<symbol id="wolke">
<path stroke="blue" stroke-with="1" fill="skyblue"
d="m40,40 c0,0 20,-50 30,0 0,0 10,-40 40,0 0,0 40,-50 30,30 20,20 -0,30 -30,20 0,0 -20,50 -30,0 0,0 -30,50 -40,-20 0,0 -45,-30 0,-30" />
</symbol>
<filter id="turbulence">
<feTurbulence
id="turb"
type="turbulence"
baseFrequency="0.02"
numOctaves="4"
result="turb" />
<feDisplacementMap in="SourceGraphic" in2="turb" scale="50" />
</filter>
</defs>
<image href="https://wiki.selfhtml.org/images/5/54/Landscape.svg" x="10" width="500" height="300" style="filter:url(#turbulence)" />
</svg>
</body>
</html>
