Sara/saragerretsen.nl
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of github.com:Scott-G-GD/portfolio-html-ver

Browse source
This commit is contained in:
Scott-G-GD 2022-11-15 22:41:54 +01:00
parent c5f7c4d1ab 23bf7058fa
commit 37f3305a5b
7 changed files with 176 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/boids-ecs-cover.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
assets/boids-ecs-dependency-graph.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
files/Resume.pdf Normal file
View file

Binary file not shown.

22
index.html
View file

@ -15,6 +15,7 @@
margin-bottom: 100px;
}
</style>
<script type="text/javascript" src="shared/jquery.min.js"></script>
<div id="site-header">
<script>$(function(){$("#site-header").load("shared/header.html");});</script>
@ -60,6 +61,16 @@
<h2 class="project-title">Stig Kart 64</h2>
<p class="project-card-role">C# Gameplay and physics programmer</p>
</a>
<a class="internal" href="projects/boids.html">
<div class="project-card" boids></div>
<div class="project-labels">
<p>c</p>
<p>sdl2</p>
<p>solo</p>
</div>
<h2 class="project-title">Boids</h2>
<p class="project-card-role">C Programmer</p>
</a>
<a class="internal" href="projects/gml-tile-movement.html">
<div class="project-card" gml-tile-movement></div>
<div class="project-labels">
@ -69,16 +80,6 @@
<h2 class="project-title">Tile Movement System</h2>
<p class="project-card-role">GML Programmer</p>
</a>
<a class="internal" href="projects/boids.html">
<div class="project-card" boids></div>
<div class="project-labels">
<p>c++</p>
<p>sfml</p>
<p>solo</p>
</div>
<h2 class="project-title">Boids</h2>
<p class="project-card-role">C++ Programmer</p>
</a>
</div>
</div>
</section>
@ -94,6 +95,7 @@
</div>
<div class="personal-info-photo"></div>
</div>
<a class="button internal" href="files/Resume.pdf">Resume</a>
<h2 id="experience">Experience</h2>
<div class="experience-grid" indented>

158
projects/boids.html
View file

@ -12,16 +12,158 @@
</div>
</head>
<body>
<h1>Boids</h1>
<h1 id="version-2">Boids (ecs)</h1>
<section>
<h2 id="info-v2">Info</h2>
<div indented>
<p>Project type: C Simulation</p>
<p>Timeframe: 2022</p>
</div>
<h2 id="video-v2">Video</h2>
<iframe
src="https://www.youtube.com/embed/unTQRpplFGU?mute=1&loop=1&autoplay=1"
class="embed" youtube
></iframe>
<p>
The repository for the boids simulation.
</p>
<a class="internal" target="_blank" href="https://github.com/Scott-G-GD/boids-ecs">
<div class="github-block">
<div class="github-logo"></div>
<h2>Scott-G-GD/boids-ecs</h2>
</div>
</a>
<p>
The ecs library i wrote this for.
</p>
<a class="internal" target="_blank" href="https://github.com/Scott-G-GD/easy-ecs">
<div class="github-block">
<div class="github-logo"></div>
<h2>Scott-G-GD/easy-ecs</h2>
</div>
</a>
<h2 id="product-overview-v2">Product Overview</h2>
<p indented>
My second implementation of a <a href="https://en.wikipedia.org/wiki/Boids">boids simulation</a>. This time written in C using a combination of SDL2 for rendering and a self-made ecs library for object management.
The program includes a ui window which allows users to modify the settings of the boids at runtime.
</p>
<h2 id="project overview-v2">Project Overview</h2>
<p indented>
This was made as a stress test of a pure C entity-component-system library I was building for myself.
During the development of the boid simulation i managed to improve the ECS it was build around by multithreading it. As well as improving lookup times through binary search.
Both of which are rather rudimentary improvements i wanted to make, but the stress test not only made it more obvious they were needed, but also made it much more measurable when they worked.
</p>
<h2 id="architecture-v2">Modules</h2>
<div indented>
<p>
The program is split into a set of distinct submodules. The <i>ecs</i>, <i>adb</i>, <i>ui</i>, <i>engine</i> and <i>sim</i> modules.
Of these modules the adb and ecs modules are entirely standalone, the ui module depends only on <a href="https://www.libsdl.org/">SDL2</a>, the engine is dependent on all others except sim, and sim is dependent on engine.
</p>
<img src="../assets/boids-ecs-dependency-graph.png">
<h2 id="code-v2">Code</h2>
<p style="font-style:italic; font-weight:200; color:#777F" indented>
NOTE: Most of these modules were developed separately and as standalone libraries. As such, they have vastly differing naming conventions.
Still, each module is internally consistent about its own naming scheme. I just tend to switch style every project.
For clarity, the ecs and ui modules use camelCase while the adb, engine and sim modules all use snake_case.
</p>
<h3>Engine</h3>
<p>
The engine module provides the program's entry point and update/render/event loops. It communicates with the sim by declaring three functions as extern without defining them. The sim then defines them allowing the engine to call functions from the sim.
The functions in question are:
<ul>
<li><i>sim_config</i>, which allows the sim to configure important parts of the engine by adjusting a settings struct.</li>
<li><i>sim_init</i> this is called after all other modules are initialized and allows the sim to initialize its components, systems and entities, as well as load assets.</li>
<li><i>sim_quit</i> which gives the simulation the chance to clean up any allocated resources after the main loop ends but before the other modules are terminated.</li>
</ul>
</p>
<div class="code-box code-content" id="engine-sim-interaction">
<script>
$(function(){$("#engine-sim-interaction").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/engine-sim-interaction.html");});
</script>
</div>
<h3>Sim</h3>
<p>
The sim module is the only module that actually interacts with anything boid-specific. Whereas the other modules are more so supporting of the simulation.
The sim can be divided further into the part that interacts with the engine module, and the part that actually models and simulates the boids.
The part that interacts with the engine is responsible for registering components and systems with the ecs, loading assets, and spawning the boids.
</p>
<div class="code-box code-content" id="sim-init">
<script>
$(function(){$("#sim-init").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/boids-sim-init.html");});
</script>
</div>
<p>
The second part of the sim module are the functions that make the boids behave the way they do. The ones that run as systems from the ecs all follow the signature of an ecs system function. They take in a list of entities, a list of the corresponding component masks, the number of items in both lists, and the delta time of the current frame. They then loop over the entities and perform specific actions for each one. In order to avoid looping over every boid in the simulation every frame, for every boid. The boids cache boids that are within the range of the behaviour with the furthest range.
</p>
<div class="code-box code-content" id="boid-update-near">
<script>
$(function(){$("#boid-update-near").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/boid-update-near.html");});
</script>
</div>
<p>
When the boids that are close enough to interact have all been cached, the actually modifying systems start running. As a demonstration is the separation system, which keeps the boids apart from eachother to avoid all of them forming a singularity. For each boid, the system loops through all nearby boids, keeping a running average of the positions of each boid nearby enough to be within range. After all nearby boids have been accounted for, the boid's velocity is adjusted to move away from the calculated average.
</p>
<div class="code-box code-content" id="boid-separation">
<script>
$(function(){$("#boid-separation").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/boids-ecs-separation.html");});
</script>
</div>
<p>
Cohesion and alignment are similar enough that i wont place them here. Cohesion is the opposite of separation, and alignment is practically the same but with velocity instead of position.
The mouse does the same as cohesion but with the mouse, and thus without the need for an average. The wall behaviour pushes the boids back onto the screen when they exit it.
</p>
<h3>ECS</h3>
<p>
The <a href="https://en.wikipedia.org/wiki/Entity_component_system">entity-component-system (ecs)</a> module manages the runtime object model where Entities are numbers, Components are blocks of memory attached to an entity and Systems are function pointers with a component requirement. This is the library that the boids where made to test.
The below code consists of snippets showing initialization and uses of components systems and entities.
</p>
<div class="code-box code-content" id="ecs-demo">
<script>
$(function(){$("#ecs-demo").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/ecs-systems-usage.html");});
</script>
</div>
<h3>Asset database</h3>
<p>
The asset database (adb) module is the module responsible for managing asset data. So it has functions for loading data from files, getting loaded file data, and releasing data after it is no longer needed. To keep this module generic, it has runtime defined rules for managing files through file handler functions.
</p>
<div class="code-box code-content" style="overflow-x:hidden" id="load-asset">
<script>
$(function(){$("#load-asset").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/intended-adb-loading.html");});
</script>
</div>
<h3>UI</h3>
<p>
The ui module is based on the <a href="https://en.wikipedia.org/wiki/Immediate_mode_GUI">immediate mode graphical user interface (imgui)</a> paradigm. This is a paradigm where there is no intermediate storage between the gui and the data. The gui directly modifies the data and vice versa.
In my implementation this is done by sending the gui functions pointers to the data they represent as parameters.
</p>
<div class="code-box code-content" id="ui-demo">
<script>
$(function(){$("#ui-demo").load("https://raw.githubusercontent.com/Scott-G-GD/portfolio-code-highlighting/main/ui-module-boids.html");});
</script>
</div>
</section>
<h1 id="version-1" style="margin-top:4em">Boids (steering behaviours)</h1>
<section class="project">
<h2 id="info">Info</h2>
<h2>Info</h2>
<div indented>
<p>Project type: C++ Simulation</p>
<p>Timeframe: 2022</p>
</div>
<h2 id="video">Video</h2>
<h2 id="video-v1">Video</h2>
<iframe
src="https://www.youtube.com/embed/h6zuPfniL2s?mute=1&loop=1&autoplay=1"
class="embed" youtube
@ -34,17 +176,17 @@
</div>
</a>
<h2 id="product-overview">Product Overview</h2>
<h2 id="product-overview-v1">Product Overview</h2>
<p indented>
I worked on this for about week inspired by the lessons on steering behaviours at school.
My first version of a boids simulation. Written in C++ with sfml.
</p>
<h2 id="project-overview">Project Overview</h2>
<h2 id="project-overview-v1">Project Overview</h2>
<p indented>
An implementation of boids in C++ with sfml.
I worked on this for about week inspired by the lessons on steering behaviours at school.
</p>
<h2 id="code">Code</h2>
<h2 id="code-v1">Code</h2>
<div indented>
<h3>Boid</h3>

2
shared/projects.css
View file

@ -67,7 +67,7 @@
}
.project-card[boids] {
background-image: url('../assets/boids-cover.jpg');
background-image: url('../assets/boids-ecs-cover.jpg');
}
.project-card[gml-tile-movement] {

13
shared/style.css
View file

@ -178,6 +178,19 @@ p.experience-grid-time {
padding: 10px;
}
a.button {
background: rgb(0, 170, 255);
border-radius: 0.2em;
padding: 0.2em 1em;
font-weight: bold;
font-size: 1.25em;
border-radius: 100em;
}
a.button:hover {
background: rgb(162, 224, 255);
color: black;
}
@media only screen and (max-width: 640px) {
.personal-info-grid {
display: grid;