Stuart-Mouse.github.io/index.html at main · Stuart-Mouse/Stuart-Mouse.github.io · 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

<!DOCTYPE html>
<html>
    <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>My Projects</title>
		<meta name="description" content="">
		<meta name="keywords"    content="">
		<meta name="author"      content="Stuart Mouse">
		<meta name="viewport"    content="width=device-width, initial-scale=1.0">
		<link rel="shortcut icon" type="image/x-icon" href="images/randomizer/icon.ico">
		<link rel="stylesheet" type="text/css" href="style.css">
	</head>
    <body>


<canvas id="canvas" class="bg-wasm-canvas hide" oncontextmenu="event.preventDefault()"></canvas>
<!-- TODO: could figure out some way to `defer part of the output html for things like scripts that need to be run at end of block, or which should only be included once. -->
<!-- On a similar note, we should figure out a better way to scope certain scripts so that they don't refer to things outside the template unintentionally. -->
<script type="text/javascript">
    var Module = {};
    Module.canvas = document.getElementById('canvas');
</script>
<script async type="text/javascript" src="/bg_wasm.js"></script>
        <div class="content">

<div class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">

      <li><a href="/index.html">Home</a></li>

      <li><a href="/gon-parsers.html">GON Parsers</a></li>

      <li><a href="/game-dev.html">Game Dev</a></li>

      <li><a href="/blog/blog.html">Blog Posts</a></li>

  </ul>
</div>
            <h1>My Projects</h1>
            <p>
                This page is meant as a listing for some general projects, mostly programming related, which I've been working on.
                As some of these things become more complete they'll likely make their way to dedicated pages, and maybe even to the navigation bar!
            </p>

            <hr/>
            <h2>Music Collage</h2>
            <p>
                This is a sort of experimental project I've been working on with my brother, focused on using unique collages of icons as a way of exploring new music.
                I'm quite happy with how it turned out aesthetically, and though I would like to spend some time refactoring the code, it certainly gets the job done as is.
                <a href="https://joshuathomaswilson.com">Click here</a> to try it out, and please let us know what you think!
            </p>


<!-- TODO: add parameter for desired maximum image width -->


<div class="image-flex-grid">

      <div class="image-grid-item"><img src="/images/autumn-collage-1.png"></div>

      <div class="image-grid-item"><img src="/images/autumn-collage-2.png"></div>

</div>

            <p>
                On the technical side, this was my first real foray in Web Assembly, and frankly it was still much easier to write the required C code for this project than it was to write the Javascript (what a wreck of a language...).
                I definitely plan to make more use of WASM in the future, but hopefuly not using Emcripten or C++.
                With the Memory64 feature soon making its way into browsers, I hope to write my future WASM projects in Jai or Odin.
            </p>

            <hr/>
            <h2>Jai Modules</h2>

            <h3>Jai Dyncall</h3>
            <p>
                Dyncall is a C library for performing dynamic function calls where the target function and its paramter types are not known at compile-time.
                This is particularly useful for building a foreign function interface between languages, using the C ABI as a common bridge.
                For example, I used this library to develop a <a href="/lead-sheets.html">custom scripting language</a> in Jai which I use in the game I am building.
            </p>
            <p>
                This module provides Dyncall bindings for the Jai programming language with additional wrappers to augment the base functionality through use of reflection.
                You can read more about the module <a href="/jai-dyncall.html">here</a>.
            </p>

            <h3>Lead Sheets</h3>
            <p>
                Lead Sheets is a small scripting language that is designed to be multi-purpose and extensible.
                It offers somewhat unique metaprogramming facilites through directives which can view and manipulate AST both at parse-time and in the typechecking phase.
                I have used the same basic language to implement a declarative data format, as well as a user console and level scripting system for the game I am building.
            </p>
            <p>
                Currently, the language executes only through an AST tree-walker.
                In the future I plan to implement a bytecode VM to allow scripts to run more efficiently while still allowing for runtime-reflection.
            </p>
            <p>
                Below is a small little program running in Web Assembly (compiled from Jai code) showing the scripting language in action.
                You can view and modify the script and recompile it to alter the resulting visualization.
                You can also try the demo in full-screen <a href="/Mooviz">here</a>.
            </p>
            <iframe src="/Mooviz" style="
                width: 100%;
                height: 400px;
            " title="Mooviz WASM Demo"></iframe>

            <h3>Data Packer</h3>
            <p>
                My data packer module will automatically serialize and deserialize binary data using a Jai type info structure.
                When data is deserialized, the data packer can also leverage my complementary Jai-Convert module to remap the file data into internal data structures.
                This remapping facility makes the binary data robust to changes in a program's internal data structures across time.
            </p>
            <p>
                If you're familiar with protobuffs, this module is somewhat similar in concept.
                However, whereas protobuffs is intended for use as an interchange format, my data packer is geared primarily towards data storage.
                In the futue, I plan to add additional features such as compile-time tracking of data structures,
                building a sort of "type library" that will allow users to view the changes in their program's data structures over time.
            </p>

            <h3>HTML Templater</h3>
            <p>
                This whole website is generated using an html templating engine which I've also built in Jai.
                The template files contain Jai code blocks which allows the user to embed variables into the generated HTML or use flowd control constructs to stamp out blocks of HTML.
                Using Jai's metaprogramming facilities, it was quite easy to set up a build process which would preload the template files and turn those templates into rendering functions for each page.
                These templates can then call one another (optionally, with parameters) which makes it very easy to build reusable web components.
            </p>
            <p>
                This is still a work in progress, but the plan is to eventually tie this into an HTTP server to create a full framework for server-side rendering in Jai.
            </p>

            <hr/>
            <h2>GON Parsers</h2>
            <p>
                GON is, put simply, JSON without the BS. It's easier to read and edit, saving you time and energy.
                Go read about it <a href="/gon-parsers.html">here</a>.
            </p>
<pre><code><span style="color: var(--main-color-medium);">sample_object</span> <span style="color: var(--main-color-accent)">{</span>
    <span style="color: var(--main-color-medium);">file_name:</span> test.gon,
    <span style="color: var(--main-color-medium);">number:</span>    35.35,
    <span style="color: var(--main-color-medium);">string:</span>    "this is a string",
    <span style="color: var(--main-color-medium);">array:</span>     <span style="color: var(--main-color-accent)">[</span> 1 <span style="color: var(--main-color-accent)">[</span> 2.1, 2.2 <span style="color: var(--main-color-accent)">]</span> 3 <span style="color: var(--main-color-accent)">]</span>
    <span style="color: var(--main-color-medium);">nested_object:</span> <span style="color: var(--main-color-accent)">{</span>
        <span style="color: var(--main-color-medium);">number:</span> 53.53,
        <span style="color: var(--main-color-medium);">string:</span> "another string"
    <span style="color: var(--main-color-accent)">}</span>
<span style="color: var(--main-color-accent)">}</span></code></pre>

            <hr/>
            <h2>Game Development</h2>
            <p>
                I occasionally find the time to work on game development.
                If you want to see my current and previous projects, click <a href="/game-dev.html">here</a>.
            </p>


<!-- TODO: add parameter for desired maximum image width -->


<div class="image-flex-grid">

      <div class="image-grid-item"><img src="/images/odin-games/pong-1.png"></div>

      <div class="image-grid-item"><img src="/images/odin-games/mario-1.png"></div>

      <div class="image-grid-item"><img src="/images/odin-games/zelda-1.png"></div>

</div>


            <hr/>
        </div>
    </body>
</html>