lsystem/index.html at main · danbgray/lsystem · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
<link rel="stylesheet" href="./style.css" />
<script src="./shaders.js"></script>
<script src="./lsystem.js"></script>
</head>
<body>

<div id="controls">
    <h2>L-System Controls</h2>
    <div>
        <label for="axiom">Axiom:</label>
        <input type="text" id="axiom" value="F">
    </div>
    <div style="margin-bottom: 20px;">
       <label for="rule">Rules (format: F=F+F--F+F):</label>
       <div id="ruleContainer" class="textarea-container">
          <div id="ruleMirror" class="mirror"></div>
          <textarea id="rule" rows="5">F=FF</textarea>
       </div>
       </textarea>
   </div>
    <div>
        <label for="depth">Recursion Depth:</label>
        <input type="number" id="depth" value="1" min="1" max="8">
    </div>
    <div class="input-group">
        <div id="centerControl" class="flex-item">
            <i class="fas fa-crosshairs"></i>
            <label for="centerX">Center:</label>
            <input type="number" id="centerX" value="0" step="any">
            <input type="number" id="centerY" value="0" step="any">
        </div>
    </div>
    <div>
        <label for="length">Segment Length:</label>
        <input type="number" id="length" value="0.1">
    </div>
    <div class="input-group">
        <div class="flex-item">
            <label for="wave">Animate:</label>
            <input type="number" id="wave" value="0">
        </div>
        <div class="flex-item">
            <label for="baseAngle">Angle:</label>
            <input type="number" id="baseAngle" value="60">
        </div>
        <div class="flex-item">
            <label for="currentAngle">˚</label>
            <input type="text" id="currentAngle" readonly>
        </div>
    </div>
    <div id="actionButtons" style="display: flex; align-items: center; justify-content: space-between; margin-top: 20px;">
      <button id="update">
          <i class="fas fa-link" style="margin-right: 10px;"></i>Link
      </button>
      <button id="tweet">
          <i class="fab fa-twitter" style="margin-right: 10px;"></i>Tweet
      </button>
    </div>
    <div id="shaderCodeContainer" style="margin-top: 20px;">
    <label for="shaderPresetSelector">Select Shader </label><select id="shaderPresetSelector">
      <option value="Custom">Select a Shader Preset</option>
      <!-- Options will be dynamically populated -->
    </select>
    <hr />
    <button id="toggleShaderCode">Edit Shader Code</button>
    <div id="shaderCodeContent" style="display: none;">
      <button id="updateShader">Update Shaders</button>
        <textarea id="vShader" rows="10" style="width: 100%;">
          attribute vec4 aVertexPosition;
          attribute float aDepth;
          attribute float aAxiom; // New attribute for axiom

          varying float vDepth;
          varying float vAxiom; // Pass axiom to fragment shader

          void main(void) {
              gl_Position = aVertexPosition;
              vDepth = aDepth;
              vAxiom = aAxiom;
          }
        </textarea>
        <textarea id="fShader" rows="10" style="width: 100%;">
          precision mediump float;

          varying float vDepth;
          varying float vAxiom;

          void main(void) {
              // Enhanced base color variation affected by axiom
              // Cycle through colors more broadly
              vec3 baseColor = vec3(sin(vAxiom * 0.2 + 1.0) * 0.5 + 0.5,
                                    cos(vAxiom * 0.2 + 2.0) * 0.5 + 0.5,
                                    sin(vAxiom * 0.2 + 3.0) * 0.5 + 0.5);

              // Adjust color brightness based on depth to ensure visibility
              // Use a non-linear transformation to avoid colors becoming too bright or too dark
              float brightnessFactor = clamp((cos(vDepth / 100. - 1.0) + 1.0) * 0.5, 0.3, 0.9);

              vec3 color = baseColor * brightnessFactor;

              gl_FragColor = vec4(color, 1.0);
          }

        </textarea>
    </div>
</div>

</div>

<canvas id="glcanvas" width="1024" height="768"></canvas>
<div id="dragMessage" style="display: none;"><!--<h2>Click In This Area</h2>--></div>
<div id="made-by">
by <a href="https://twitter.com/dbgray" target="_blank">@dbgray</a>
</div>
</body>
</html>