Beispiel:FeTurbulence-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>

feTurbulence mit 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"> Type: <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>

Abgerufen am 26.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:FeTurbulence-2.html"