Superimposed Waveforms with Plot

by pleonardmusic1664

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Superimposed Waveforms Generator</title>
    <style>
        #plot {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>
<body>
    <h1>Superimposed Waveform Generator</h1>
    <label for="duration">Duration (seconds):</label>
    <input type="number" id="duration" value="1" step="0.1"><br>
    
    <h2>Waveform 1</h2>
    <label for="type1">Type:</label>
    <select id="type1">
        <option value="sine" selected>Sine</option>
        <option value="square">Square</option>
        <option value="sawtooth">Sawtooth</option>
        <option value="triangle">Triangle</option>
    </select>
    <label for="freq1">Frequency:</label>
    <input type="number" id="freq1" step="0.01" value="100">
    <label for="amp1">Amplitude:</label>
    <input type="number" id="amp1" step="0.01" value="1.0">
    <label for="phase1">Phase:</label>
    <select id="phase1">
        <option value="0" selected>0°</option>
        <option value="90">90°</option>
        <option value="180">180°</option>
        <option value="270">270°</option>
    </select>

    <h2>Waveform 2</h2>
    <label for="type2">Type:</label>
    <select id="type2">
        <option value="sine">Sine</option>
        <option value="square" selected>Square</option>
        <option value="sawtooth">Sawtooth</option>
        <option value="triangle">Triangle</option>
    </select>
    <label for="freq2">Frequency:</label>
    <input type="number" id="freq2" step="0.01" value="100">
    <label for="amp2">Amplitude:</label>
    <input type="number" id="amp2" step="0.01" value="0.75">
    <label for="phase2">Phase:</label>
    <select id="phase2">
        <option value="0">0°</option>
        <option value="90" selected>90°</option>
        <option value="180">180°</option>
        <option value="270">270°</option>
    </select>

   ...