tripscript/index.html at main · semicolin/tripscript · 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>TripScript</title>
        <!--<script src="lib/codemirror-min.js"></script>
        <link rel="stylesheet" href="lib/codemirror.css" />
        <link rel="stylesheet" href="lib/foldgutter.css" />
        <link rel="stylesheet" href="lib/show-hint.css" />-->
        <link href="lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
        <script src="lib/jquery-2.1.0.min.js"></script>
        <script src="lib/FileSaver.min.js"></script>
        <script src="lib/id3-minimized.js"></script>
        <script src="lib/jshint.js"></script>
        <!-- CodeMirror -->
        <link rel="stylesheet" href="lib/codemirror/lib/codemirror.css" />
        <script src="lib/codemirror/lib/codemirror.js"></script>
        <script src="lib/codemirror/mode/javascript/javascript.js"></script>
        <script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
        <script src="lib/codemirror/addon/fold/brace-fold.js"></script>
        <script src="lib/codemirror/addon/fold/comment-fold.js"></script>
        <script src="lib/codemirror/addon/fold/foldcode.js"></script>
        <script src="lib/codemirror/addon/fold/foldgutter.js"></script>
        <link rel="stylesheet" href="lib/codemirror/addon/fold/foldgutter.css" />
        <script src="lib/codemirror/addon/hint/anyword-hint.js"></script>
        <script src="lib/codemirror/addon/hint/show-hint.js"></script>
        <link rel="stylesheet" href="lib/codemirror/addon/hint/show-hint.css" />
        <script src="lib/codemirror/addon/lint/javascript-lint.js"></script>
        <script src="lib/codemirror/addon/lint/lint.js"></script>
        <link rel="stylesheet" href="lib/codemirror/addon/lint/lint.css" />
        <script src="lib/codemirror/addon/search/match-highlighter.js"></script>
        <!-- My Code -->
        <script src="examples.js"></script>
        <script src="trip.js"></script>
        <link rel="stylesheet" href="cm-theme.css" />
        <link rel="stylesheet" href="trip.css" />
    </head>
    <body>
        <div id="vis">
            <div id="status"></div>
            <div id="error"></div>
        </div>
        <div id="controls">
            <button id="toggle" title="Toggle Control Panel"><i class="fa fa-chevron-right"></i></button>
            <div id="playback">
                <button id="prev" title="Previous Song"><i class="fa fa-backward"></i></button>
                <button id="pause" title="Pause/Play"><i class="fa fa-pause"></i></button>
                <button id="next" title="Next Song"><i class="fa fa-forward"></i></button>
            </div>
            <div id="tabs">
                <button id="tabMusic" class="tab active" data-panel="#music" title="Show Music Playlist">Music</button>
                <button id="tabCode" class="tab" data-panel="#code" title="Show Script Editor">Code</button>
                <button id="tabDocs" class="tab" data-panel="#docs" title="Show Documentation">Docs</button>
                <button id="tabOptions" class="tab" data-panel="#options" title="Show Configuration Options">Options</button>
            </div>
            <div id="music" class="panel">
                <div class="toolbar">
                    <input type="file" id="file" multiple="multiple"></input>
                    <button id="browse">Add Files...</button>
                    <button id="clear">Clear</button>
                </div>
                <div id="playlist-wrapper">
                    <table id="playlist">
                        <thead>
                            <tr>
                                <td class="index num"></td>
                                <td class="artist">Artist</td>
                                <td class="album">Album</td>
                                <td class="track num">#.</td>
                                <td class="title">Title</td>
                                <td class="delete num"></td>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
            <div id="code" class="panel">
                <div class="toolbar">
                    <button id="scripts">[untitled]</button>
                    <button id="save" title="Save this script (Ctrl+S)">Save</button>
                    <button id="saveas" title="Save a copy of this script">Save As...</button>
                    <button id="export" title="Export all Scripts">Export All...</button>
                    <button id="import" title="Import Scripts">Import...</button>
                    <input type="file" id="import-file" accept="application/json"></input>
                    <button id="delete" title="Delete this script">Delete</button>
                    <button id="new" title="Create a new script">New</button>
                </div>
                <div id="editor"></div>
            </div>
            <div id="docs" class="panel">
                <h2>Introduction</h2>
                <p>
                    TripScript is a music visualization IDE built with Javascript, HTML5 Audio, and Canvas.
                    I made it so I could experiment with music visualization without continuously recompiling
                    the code, reloading the page, or restarting the music.
                </p>
                <p>
                    All of the busywork (setting up contexts, connecting audio nodes, etc.) is taken care of behind the scenes.
                    The interesting parts (drawing on canvas in response to music) are done in visualization scripts that can
                    be loaded dynamically and swapped in and out at run-time.
                </p>
                <h2>How it Works</h2>
                <p>
                    TripScript is purely a client-side application. There is no server-side code or database.
                    The scripts are saved to your browser's local storage, and can be exported to a JSON file for portability.
                </p>
                <p>
                    A visualization script is simply a block of javascript code that gets executed on every animation frame.
                    It is treated as the body of a function that receives the following arguments:
                </p>
                <dl>
                    <dt><span class="var">ctx</span></dt><dd><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D" target="_blank">2D rendering context</a> for the canvas.</dd>
                    <dt><span class="var">analyser</span></dt><dd>Web Audio API <a href="https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode" target="_blank">analyser node</a>.</dd>
                    <dt><span class="var">audioContext</span></dt><dd>Web Audio API <a href="https://developer.mozilla.org/en-US/docs/Web/API/AudioContext" target="_blank">audio context</a>.</dd>
                    <dt><span class="var">include</span></dt><dd>Function for loading other scripts.</dd>
                </dl>
                <h2>Analysing the Music</h2>
                <p>
                    You can access audio data directly through the <span class="var">analyser</span> and <span class="var">audioContext</span> variables.
                    I have also written a music library script that performs some common audio analysis tasks.
                    Take a look at the included sample scripts for examples of how to use it.
                </p>
                <h2>Drawing on Canvas</h2>
                <p>
                    The <span class="var">ctx</span> variable contains the drawing context for the canvas
                    so you can <span class="var">stroke</span> and <span class="var">fill</span> to your heart's content.
                    I have also written a drawing library script with functions for drawing simple shapes and lines.
                    Take a look at the built-in scripts for some simple examples of what can be done.
                    If this is your first time using canvas, check out <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial" target="_blank">Mozilla's Canvas Tutorial</a>.
                </p>
                <h2>Script Context</h2>
                <p>
                    The <span class="var">this</span> variable contains your script's context object,
                    which can be used to share state across multiple animation frames.
                    For example, you can create a frame counter like this:
                </p>
                <p>
                    <code class="cm-s-trip">
                        <span class="cm-keyword">this</span>.<span class="cm-property">counter</span> = <span class="cm-keyword">this</span>.<span class="cm-property">counter</span> || <span class="cm-number">0</span>;<br />
                        <span class="cm-keyword">this</span>.<span class="cm-property">counter</span> += <span class="cm-number">1</span>;<br />
                    </code>
                </p>
                <h2>Including Library Scripts</h2>
                <p>
                    Use the <span class="var">include()</span> function to load a library script.
                    It takes a single string argument: The name of the library to load.
                    It returns an object containing all of the public variables &amp; functions defined in that library.
                    Includes should always be done at the top of your script and should not be placed inside
                    functions, loops, or conditionals.
                </p>
                <p>
                    I have written 4 library scripts that you can include right out of the box.
                    For more information, open these scripts in the code editor and read the code comments.
                </p>
                <dl>
                    <dt class="string">Utilities/Color</dt><dd>Functions for constructing color strings.</dd>
                    <dt class="string">Utilities/Drawing</dt><dd>Functions for drawing stuff on the canvas.</dd>
                    <dt class="string">Utilities/Music</dt><dd>Functions for analysing music.</dd>
                    <dt class="string">Utilities/Transform</dt><dd>Functions for manipulating the transform matrix.</dd>
                </dl>
                <h2>Creating Library Scripts</h2>
                <p>
                    When a script is loaded from the <span class="var">include()</span> function,
                    its return value is stored and subsequent calls to <span class="var">include()</span> will simply return the existing object.
                    This means that included scripts will only execute on the very first animation frame.
                </p>
                <p>
                    To make functions available to the calling script, attach them to an object and return that object.
                    The built-in library scripts attach their functions to the context object, <span class="var">this</span>,
                    so they can also be used in unit tests or demos when opened as the active script.
                </p>
            </div>
            <div id="options" class="panel">
                <h2>Code Editor</h2>
                <p>
                    Warning: These options may cause input lag while typing in some browsers.
                </p>
                <ul>
                    <li><input type="checkbox" id="option-editor-fold" /> Code Folding</li>
                    <li><input type="checkbox" id="option-editor-lint" /> Highlight Syntax Errors</li>
                </ul>
            </div>
        </div>
        <script>Trip();</script>
    </body>
</html>