Daniel MarinoProduct designer living in New Hampshire2024-01-15T00:00:00Zhttps://iamdanielmarino.com/Daniel MarinoJS13K 2018 Retrospective2018-10-15T00:00:00Zhttps://iamdanielmarino.com/posts/js13k-2018-retrospective/<p>In one of my weekly developer emails, I saw a link for <a href="https://2018.js13kgames.com/">JS13KGames</a>. I've always wanted to create a video game. I asked my JavaScript-whiz buddy, <a href="https://github.com/braddunbar">Brad</a>, if he was interested in building a game with me. Without hesitation, he said “Yes!”</p>
<h3>Concept</h3>
<p>A couple of years ago I came up with the basic concept/mechanic of toggling layers on and off to create various platforming challenges. I had even sketched out several level designs, and cobbled together a super basic prototype using <a href="http://phaser.io/">Phaser.io</a>. I was pretty happy with this simple mechanic. On top of that our character movement would consist of basic platforming: moving left/right and jumping.</p>
<p>There are <a href="https://github.com/starzonmyarmz/js13k-2018/projects/1">other ideas</a> we had early on such as moving platforms/spikes, enemies, variances in gravity, as well as an in-game timer, but we ended up punting on those due to time and size constraints. Aside from adding complexity to our code, I think having the constraints challenged us to explore more with level design - as well as simplifying game play.</p>
<h3>Art Style, Design, and UX</h3>
<p>Originally, I envisioned the game having a pixel art style, but with the 13K and 30 day limits, I decided to simplify. Designing a minimum of 20 levels would take up quite a bit of time. Exploring pixel sprite and background designs would have prevented me from being able to create enough levels to make the game worth playing. I decided to stick with two colors.</p>
<p>I wanted to avoid using text to educate game mechanics. I took inspiration from countless video games (but specifically Super Mario World, Super Metroid, Megaman X), and started out by creating the first three levels that would introduce game mechanics one at a time. I then kept exploring various level designs until I had about six or seven solid levels.</p>
<figure><img src="https://iamdanielmarino.com/img/js13k2018-education.png" alt="original idea about education" loading="lazy" /><figcaption>Original idea for educating game controls to player</figcaption></figure>
<p>While Brad was developing the mechanics, I solicited the help of my son to help me design the character. It went through some variations, but the final character was pretty similar to what we started with. In my mind I could see his legs moving and his head bobbing. He originally had rounded corners, but that ended up making the <code>svg</code> output more complicated, so in the end we ditched them.</p>
<figure><img src="https://iamdanielmarino.com/img/js13k2018-characters.png" alt="character ideas" loading="lazy" /><figcaption>Other character ideas</figcaption></figure>
<p>I liked the idea of the <em>toggle</em> concept being carried through all the various screens, and not just the levels. So I designed the title, end, and controller screens with this in mind.</p>
<figure><img src="https://iamdanielmarino.com/img/js13k2018-font.png" alt="typeface" loading="lazy" /><figcaption><a href="https://github.com/starzonmyarmz/js13k-2018/blob/gh-pages/refs/onoff.otf">Custom typeface</a> designed for ONOFF</figcaption></figure>
<h3>Music and Sound Effects</h3>
<p>I procrastinated with sound for two weeks or so. At first I got hung up on the options available for creating music and sound effects, until I came across <a href="https://github.com/kevincennis/TinyMusic">TinyMusic</a>. I really liked the simplicity of it, that I was able to focus on music, not getting hung up on the plethora of styles and effects.</p>
<p>The <a href="http://jsfiddle.net/0k6tLnfd/8/">original track</a> I wrote was more driving, but lacked personality. I hemmed and hawed for a week, then one morning I just started humming a really silly tune, and it felt just right for the game. The second part of that song (with the walking bass line) came a week later. I was experimenting to see if I could get chords <a href="https://github.com/starzonmyarmz/js13k-2018/blob/gh-pages/src/sound.js#L327-L351">fade in and out</a>. Once I got that working the bass line just worked itself out, and I had the second half to my song.</p>
<p>For sound effects, I had found some effects I really liked on <a href="https://opengameart.org/">OpenGameArt</a> - however the file sizes were huge. No amount of resampling got them even close to 13K. So I ended up trying to <em>recreate</em> those sounds using TinyMusic.</p>
<h3>Development</h3>
<p>We didn’t think it was necessary to use <code>canvas</code>, and opted use <code>svg</code>. This allowed us to easily scale graphics, use CSS to flip the colors when the layers were toggled, as well as easily develop graphics. In a lot of cases, I hard coded graphics such as the <a href="https://github.com/starzonmyarmz/js13k-2018/blob/gh-pages/index.html#L135-L159">death animation</a> or the death counter, and then Brad would step in and wire it up with JavaScript.</p>
<p>I ran every graphic I created through <a href="https://jakearchibald.github.io/svgomg/">SVGOMG</a> which helped keep our SVG super lightweight. In some cases, I found it more performant to use plain old <code>rect</code>s or take advantage of SVG <code>pattern</code>s for the <a href="https://github.com/starzonmyarmz/js13k-2018/blob/gh-pages/index.html#L107-L118">numbers used</a> in the death and level counter, as well as the <a href="https://github.com/starzonmyarmz/js13k-2018/blob/gh-pages/index.html#L80-L93">spikes</a>.</p>
<p>I left the decision to Brad whether we should roll our own game mechanics or use an existing library. We both felt it would be more fun to write our own. This also gave us a lot more control over the file sizes and code quality. Using ES6 made the vast majority of the code easier to write, and we didn’t end up having to polyfill anything.</p>
<p>For level design, Brad had created the ability to bootstrap levels quickly just by passing in an array of coordinates for the character, goal, and platforms (including the layer they should exist on). After getting a little burnt out on level design, I messed around with creating some dynamically generated levels.</p>
<p>We developed right up to the very end. Within the last 12 hours before the deadline we rolled out Gamepad support, the ability to share and play custom levels, and wrote another song to play when the game is completed.</p>
<h3>Tooling and 13k</h3>
<p>Our tooling was minimal. We would run our JS, CSS, and HTML through minifiers - that’s it. We decided to build everything as minimal as possible from the beginning, so we didn’t really have to go back and rework anything to hit the 13k limit.</p>
<p>After building the game we were still far under 13k, so Brad decided to roll out a custom level editor! That actually turned out to be a huge help because it made it a lot faster to test out ideas, and generate level code that we could just paste into our game. We though it was so cool we decided to include it as a bonus with a day left before the deadline!</p>
<h3>Playtesting</h3>
<p>Aside from having our kids play the game frequently (and they did!) we invited a few friends to play with about a week left in the competition. They felt that the game mechanics felt good, and were fairly easy to figure out. Looking back I wish we had people play it sooner - only because we were scrambling around with a few days left to finish building the game. If we had received more drastic feedback, we would have been in a really tight spot.</p>
<h3>Wrap Up</h3>
<p>Brad and I had a blast working on the js13k this year! I’m really grateful to Brad and all his help, our friends who took the time to playtest and give us feedback, and especially our families who gave endless support, and endured hours and hours of that music loop!</p>
<p>If you haven’t yet, make sure you check out our game <a href="https://js13kgames.com/entries/onoff">ONOFF</a>!</p>
How I Manage Projects2020-02-12T00:00:00Zhttps://iamdanielmarino.com/posts/how-i-manage-projects/<p>As a Product Designer at <a href="https://getharvest.com/">Harvest</a>, part of my role is running projects. While I don’t believe there is a <em>right</em> or <em>wrong</em> way to manage projects, I do think there are some methods that can yield better results. I’m hardly an expert in this area, but I’d like to share some of the ways I find success in managing projects.</p>
<p>I should mention that these thoughts are my own. I’m extremely blessed to work for a company that gives some freedom as to how individuals run projects. Of course there are some fixed variables. For example, we all use Basecamp for tracking updates, and follow the same guidelines for communicating updates with other teams within Harvest.</p>
<h3>Ethos</h3>
<p>I don’t really have some profound wisdom to share. Basically, I try to stay out of the way as much as possible, leaving room for my teammates to get their work done. Their time, much like mine, is valuable. Out of respect, I try not to gum up the works with unnecessary meetings or emails. This doesn’t mean I’m out of the loop. We’re all generally aware of what the other person is working on.</p>
<h3>The Kickoff</h3>
<p>In preparation for the <em>Kickoff</em>, I prefer creating a Google Doc with the project details rather than a slideshow. It’s much easier to review and edit on the fly. I also don’t have to get hung up on the little things like <em>does this slide look pretty</em>.</p>
<p>Typically, I keep the Kickoff to 30 minutes or less. This isn’t the place to figure out technical or design decisions. We still might kick around some ideas and ask questions, but typically we breakout into smaller groups as needed. My preference is to have the Kickoff the Friday before the project starts. This allows my distributed team to hit the ground running first thing Monday morning.</p>
<h3>Weekly Hangout</h3>
<p>Once a week, our team will meet over a Google Hangout for about 20–30 minutes to discuss updates. We don’t necessarily try to solve problems in these meetings unless they’re quick and easy to figure out. The goal of these hangouts is to make sure we’re all on the same page throughout the course of the project.</p>
<h3>Daily Slack Check-in</h3>
<p>Simply put, I hate <em>unnecessary</em> meetings, and find that most others do too. They disrupt the flow of my work day, and I suspect they do for others too. I prefer daily check-ins on <a href="https://slack.com/">Slack</a> because it’s asynchronous. It allows my to get updates as breaks occur naturally throughout my day. I ask teammates to write a one- or two-sentence update. Basically what are you working on and is anything blocking you from completing it. Short and sweet.</p>
<p>Of course, if something is pressing or I’m blocking a todo from progressing, I ask my teammates to @ me, so that I get an immediate notification.</p>
<p>I know some people are into multiple email check-ins throughout the week (such as Basecamp’s automated check-ins). Personally, I dislike these—primarily because it feels like extra clutter in my inbox.</p>
<h3>Todos on Basecamp</h3>
<p>Previously I mentioned we all use <a href="https://basecamp.com/">Basecamp</a> at Harvest. I hold my teammates responsible for making todos, and keeping related discussions up-to-date. That means a developer may create multiple todos for building out a feature or creating a todo for me to apply some design polish.</p>
<p>That’s the bulk of it. Of course there are little things here and there that I didn’t go over, but this should give you a glimpse into how I manage projects.</p>
Trying Out Eleventy2020-02-18T00:00:00Zhttps://iamdanielmarino.com/posts/trying-out-eleventy/<p>As I started to think about blogging again, I began looking at options for hosting, CMS frameworks, static site generators, etc. <a href="http://www.11ty.dev/">Eleventy</a> has been in the mainstream for sometime now, and I've heard nothing but good things about it. I figured I should give it a shot.</p>
<p>There are no shortage of examples for using Eleventy, but I particularly found <a href="https://hankchizljaw.com/">Andy Bell’s</a> <a href="https://hebra.dev/">Hebra</a> starter kit, as well as the <a href="https://github.com/11ty/eleventy-base-blog">Eleventy Base Blog</a> to be excellent resources. I'm using <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> for templating. It more or less feels like <a href="https://shopify.github.io/liquid/">Liquid</a> which I'm familiar with from having used <a href="https://jekyllrb.com/">Jekyll</a>, as well as creating <a href="https://www.statemottoprints.com/">State Motto Prints</a>.</p>
<p>In the course of an afternoon, I was able to put together the <a href="https://github.com/starzonmyarmz/iamdanielmarino.com">bones of this redesign</a>. Over the past week, during my spare time, I've been adding polish, and getting deployments working with Github Pages. I'll continue to make tweaks here and there, but overall I feel good about it.</p>
Deploying My Eleventy Site to GitHub Pages2020-03-02T00:00:00Zhttps://iamdanielmarino.com/posts/deploying-my-eleventy-site-to-github-pages/<p>I really like <a href="https://pages.github.com/">GitHub Pages</a>, and have used it to host my site for a while. The biggest challenge of switching my site to <a href="https://www.11ty.dev/">Eleventy</a> was getting deployments to GitHub pages set up. I suppose I could have built my site locally, and then push that to the <code>gh-pages</code> branch, but that felt <em>wrong</em>. I prefer my <code>master</code> branch to be the source of my site, while <code>gh-pages</code> to only be the published content.</p>
<p>I’m aware of tools such as <a href="https://www.netlify.com/">Netlify</a> and <a href="https://travis-ci.com/">Travis CI</a> which aid in hosting or deployment processes. However I wasn’t looking to add another service into my tech stack. With some digging into <a href="https://github.com/features/actions">GitHub Actions</a>, this seemed like a plausible route for getting my site deployed without having to rely on an external service.</p>
<h3>Setting Up a GitHub Action</h3>
<p>GitHub Actions allow you to automate workflows such as code deployment, running tests, compressing images, and so much more. GitHub has a whole <em>Marketplace</em> where you can explore community-created actions. I’m using the <a href="https://github.com/marketplace/actions/github-pages-action">GitHub Pages action</a> which handles everything I need for deploying. My workflow is fairly simple, and is largely based on the instructions for <a href="https://github.com/marketplace/actions/github-pages-action#%EF%B8%8F-static-site-generators-with-nodejs">Static Site Generators with Node.js</a>. In <code>/.github/workflows/eleventy_build.yml</code>, I have the following:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token key atrule">name</span><span class="token punctuation">:</span> Eleventy Build<br /><br /><span class="token key atrule">on</span><span class="token punctuation">:</span><br /> <span class="token key atrule">push</span><span class="token punctuation">:</span><br /> <span class="token key atrule">branches</span><span class="token punctuation">:</span><br /> <span class="token punctuation">-</span> master<br /><br /><span class="token key atrule">jobs</span><span class="token punctuation">:</span><br /> <span class="token key atrule">deploy</span><span class="token punctuation">:</span><br /> <span class="token key atrule">runs-on</span><span class="token punctuation">:</span> ubuntu<span class="token punctuation">-</span><span class="token number">18.04</span><br /> <span class="token key atrule">steps</span><span class="token punctuation">:</span><br /> <span class="token punctuation">-</span> <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/checkout@v2<br /><br /> <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Setup Node<br /> <span class="token key atrule">uses</span><span class="token punctuation">:</span> actions/setup<span class="token punctuation">-</span>node@v1<br /> <span class="token key atrule">with</span><span class="token punctuation">:</span><br /> <span class="token key atrule">node-version</span><span class="token punctuation">:</span> <span class="token string">'10.x'</span><br /><br /> <span class="token punctuation">-</span> <span class="token key atrule">run</span><span class="token punctuation">:</span> npm ci<br /><br /> <span class="token punctuation">-</span> <span class="token key atrule">run</span><span class="token punctuation">:</span> npm run build<br /><br /> <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Deploy<br /> <span class="token key atrule">uses</span><span class="token punctuation">:</span> peaceiris/actions<span class="token punctuation">-</span>gh<span class="token punctuation">-</span>pages@v3<br /> <span class="token key atrule">with</span><span class="token punctuation">:</span><br /> <span class="token key atrule">deploy_key</span><span class="token punctuation">:</span> $<span class="token punctuation">{</span><span class="token punctuation">{</span> secrets.ACTIONS_DEPLOY_KEY <span class="token punctuation">}</span><span class="token punctuation">}</span><br /> <span class="token key atrule">publish_dir</span><span class="token punctuation">:</span> ./dist</code></pre>
<p>Depending on how your Eleventy project is set up you might need to make some tweaks to the defaults. I recommend checking out the rest of the <a href="https://github.com/marketplace/actions/github-pages-action#table-of-contents">documentation</a> to see what you can do.</p>
<h3>Hey GitHub, I’m Not Using Jekyll</h3>
<p>I found this to be the biggest hurdle, and it kind of buried in <a href="https://help.github.com/en/github/working-with-github-pages/about-github-pages#static-site-generators">GitHub’s documentation</a>. By default, GitHub tries to use Jekyll to build your site. If you’re using any syntax other than what Jekyll recognizes, then you <em>might</em> get errors and your build could potentially fail. The good news is the fix is really easy. In the root of your project, include an empty file <code>.nojekyll</code>.</p>
<h3>Committing the Package Lock file</h3>
<p>This GitHub action is an <em>automated environment</em>, so rather than use <code>npm install</code> our action should use <code>npm ci</code>. This ensures that you get a <em>clean install</em> of your dependencies. One of the requirements for using <code>npm ci</code> is that the project <strong>must</strong> have an existing <code>package-lock.json</code>. I’m not really sure what the norm is here, but I don’t typically commit this file. So if you fall into that category, make sure you get that file committed!</p>
<h3>Creating an NPM Build Script</h3>
<p>When it’s time for Eleventy to build your site when the <code>master</code> branch is pushed upstream, it needs to happen in the context of the Node environment. In my <code>package.json</code> I have a script mapped to the command <code>eleventy</code>:</p>
<pre class="language-json"><code class="language-json"><span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"eleventy"</span><br /><span class="token punctuation">}</span></code></pre>
<p>Now when <code>npm run build</code> runs in the GitHub action, it will know where to find the <code>eleventy</code> command.</p>
<h3>No SSH Deploy Key? No Deployment!</h3>
<p>For security purposes, GitHub requires that you have a <em>deploy key</em> and a corresponding <em>secret</em> set up in the repository that this GitHub Action is in. There’s handy <a href="https://github.com/marketplace/actions/github-pages-action#%EF%B8%8F-create-ssh-deploy-key">step by step guide with screenshots</a> on how to create the deploy key and secret, as well as adding them to the repository.</p>
<p>In my case I’ve labelled my deploy key <em>ACTIONS_DEPLOY_KEY</em>. This is case-sensitive, so make sure you pay attention to what you call your deploy key!</p>
<h3>Wrapping Up</h3>
<p>While I’m not sure if this is the best way to get my Eleventy site deployed to GitHub Pages, it meets my needs. As far as I can tell, this general deployment process would be fairly similar to set up with a service like Netlify or Travis CI. However I find it extremely satisfying not being dependent on extra services.</p>
Don’t Overthink Remote Working2020-03-13T00:00:00Zhttps://iamdanielmarino.com/posts/dont-overthink-remote-working/<p>The coronavirus is here, and as a result a lot of employers are asking employees to work remotely if possible. I’ve seen a fair share of <em>tips for remote working</em> blog posts this past week. I figured I’d cash in on the action and share my thoughts.</p>
<h2>Don’t Overthink It</h2>
<p>Most of the posts I’ve read, more or less, are saying the same things: have an enjoyable working environment, communicate with your team regularly, stick to a schedule, yada yada yada…</p>
<p>All of those are great, but also seem subjective. Maybe its because I’ve been a remote working for over 10 years, but I have a different point of view here. The best advice I have is: <strong>don’t overthink it</strong>. I’m not saying all those other things aren’t important, however if you spend too much time focusing on: <em>I have to do this</em> and <em>I have to do that</em>, you’ll probably find the transition will be more difficult and take longer.</p>
<h2>It is a Transition</h2>
<p>Simply be aware that remote working <em>is</em> a transition, especially if you’ve worked in an office environment for some time. And that’s ok! Recognize this, but try not to dwell on it too much. Do what you can to figure out how to get into <em>your</em> groove quickly. Maybe that means working in pajamas, or working at the kitchen table instead of a dedicated office, or whatever!</p>
<p>The fact is, it will take you a little time to get used to remote working. And you’ll likely have to try different things to find what works for you. Your preferences might also fluctuate over time. Be aware of the transition, and try not to overthink it.</p>
How to Process Customer Criticism2020-09-01T00:00:00Zhttps://iamdanielmarino.com/posts/how-to-process-customer-criticism/<p>Why do us product designers opt into a career where we’re regularly challenged to be vulnerable?! Design is super subjective, and everyone is a critic! Regardless of your education or how sharp your <em>design eye</em> is, you’ll never be able to please everyone. This is especially true when you work on a product that has thousands upon thousands of users!</p>
<p>One of my personal challenges of being a product designer is learning how to process customer criticism. Its an ongoing struggle for me because I tend to be very sensitive to criticism in general. I’ve grown thicker skin over time, but there are still some days where I get down in the dumps.</p>
<p>My knee jerk response is to cave in, and give everyone what they want (or demand) so we can all be happy. However, good product designers don’t cave. We take a breath and carefully processes the criticism.</p>
<h2>Digging into Customer Criticism</h2>
<p>It’s hard, but sometimes you need to dig underneath the harsh and sometimes-hurtful comments. Is there actual legitimate feedback? Even if a customer insults you, it doesn’t negate the fact that they’re having a poor experience.</p>
<p>Once you’ve pushed past the hurtful comments and processed the feedback, are there common themes or issues raised by these customers? Obviously, bugs should be fixed, but have you overlooked some UX considerations?</p>
<p>Be honest with yourself. If there are things you can improve, and time allows for it, you should improve them. Even the tiniest improvement can be enough to change someone’s reception to a design!</p>
<h2>Haters Gonna Hate</h2>
<p>What about the people that hate something just because they can? Sometimes you just have to accept the fact that some people aren’t going to like something. Some things to consider:</p>
<ul>
<li><strong>You’re more likely to hear negative feedback.</strong> People are more inclined to write a support ticket when they dislike something. For every person complaining about your design, there’s likely hundreds or thousands that really like it!</li>
<li><strong>Some folks like to complain for the sake of complaining.</strong> I’m not ashamed to admit that if someone tweets something nasty at us, I’ll often stalk them on Twitter for a bit to help get a read on the person. You’d be surprised (or maybe you wouldn’t) how often these folks are habitual complainers—wasting time tweeting at other companies. You’ll never please these people.</li>
<li><strong>Sometimes a thoughtful response will be appreciated.</strong> I don’t necessarily do this for every support request, but sometimes I’ll respond by explaining the reasoning of why a design was implemented the way it is. This does require a little care because you don’t want to sound like you don’t care about a person’s feedback. You still want to acknowledge the the customer’s complaint even if you’re not planning on changing the design. Sometimes these customers reply with a heartfelt appreciation for the explanation.</li>
<li><strong>If someone really dislikes your product, they’ll pack up and leave.</strong> It sounds harsh, but it’s reality. Obviously you don’t want an exodus, and if that’s the case you should probably take a step back and reexamine things. However, it’s quite possible your product isn’t the right fit for some particular people. That said, it’s also unlikely that one disliked design is going to drive a customer away.</li>
</ul>
<h2>Abusive Customers</h2>
<p>I don’t advocate taking abuse from customers on the chin. While I don’t think it’s okay to sling it back at your customers, I do think it’s fair game to call out hostile tone. I’m blessed to work for a <a href="https://www.getharvest.com/">company</a> that has a policy around handling abusive customers. Your company may also address how to handle these types of customers. If you’re in a position to make these types of policies I highly recommend you do!</p>
<h2>You’re Awesome</h2>
<p>I mean… maybe you’re not awesome? Regardless, dealing with customer criticism can be really hard! And at the end of a hard day—no matter how awesome you are or aren’t, <a href="https://media.giphy.com/media/13jJIY0llDdip2/giphy.gif">treat yoself</a>! Have a little extra dessert, play video games a little longer, crank some tunes extra loud! Try not to take customer criticism personally. Instead, look past the harsh tones, and try to find legitimate and actionable feedback.</p>
My GIF Workflow Using Eleventy, Netlify, and Alfred2021-02-13T00:00:00Zhttps://iamdanielmarino.com/posts/my-gif-workflow-using-eleventy-netlify-alfred/<p>I used to keep my GIFs on Dropbox in the <code>/public</code> directory. There was a time when Dropbox would serve content as HTML from this directory. This was a simple way to share my GIFs with the world. I even adopted an <a href="https://destroytoday.com/blog/gif-workflow">Alfred workflow</a> for quickly searching and copying my GIFs URL to the clipboard. Back in 2017, Dropbox disabled the ability to render HTML from the <code>/public</code> directory, and thus this workflow stopped working.</p>
<p>Since then I’ve been keeping my personal collection of GIFs in a GitHub repo—which has been just okay. I really missed having a quick way to search and copy URLs. To use a GIF I’d have to go to the repo, find the image, view the raw image, and finally manually copy the url from the browser. Lame.</p>
<p>A few weeks ago, I decided to give my GIF workflow an upgrade!</p>
<p>I started by turning my <a href="https://github.com/starzonmyarmz/gifs">GIFs repo</a> into a static site using <a href="https://www.11ty.dev/">Eleventy</a>. The static site consists of two primary things: a directory with all of my GIFs, and a <a href="https://github.com/starzonmyarmz/gifs/blob/main/src/gifs.njk">generated JSON file</a> listing all my GIFs (more on this in a bit).</p>
<p>I created a new site on Netlify that watches my GIFs repo, and runs a build process anytime I push to <code>main</code> branch. This only took a few minutes to set up, and all my GIFs are now easily accessible by URL.</p>
<p>I was still missing a component though—a quick and easy way to search for GIFs and copy their URLs. I built an <a href="https://github.com/starzonmyarmz/gifz-alfred-workflow/blob/main/index.js">Alfred script</a> using <a href="https://github.com/sindresorhus/alfy">Alfy</a> to handle this part. Alfy is so cool to work with, allowing you to build Alfred workflows using JavaScript and Node. The Alfred Script takes an input, and searches for it against the <a href="https://gifz.netlify.app/gifs.json">JSON file on the Netlify site</a>. When I find the GIF I want, it copies the URL to the clipboard.</p>
<figure><img src="https://iamdanielmarino.com/img/gif_workflow.gif" alt="My gif flow using Alfred App" loading="lazy" /></figure>
<p>This update was well-needed, and I find myself using my personal GIFs much more often now! I only wish I had done something like this much sooner.</p>
Gamedev.js Jam 2021 Retrospective2021-04-30T00:00:00Zhttps://iamdanielmarino.com/posts/gamedevjs-jam-2021-retrospective/<p>Recently, I participated in the <a href="https://gamedevjs.com/jam/2021/">Gamedev.js Jam 2021</a>: a 13-day competition to build a game that can run on the Web in a browser without extra plugins. This year’s theme for the competition was “mirror”, which could interpreted however participants chose. I had an itch I wanted to scratch, and the timing was right, so I decided to join.</p>
<p>You’d think JavaScript would be necessary to make an HTML5 game, but the <a href="https://codepen.io/collection/AKkZro?cursor=ZD0wJm89MCZwPTEmdj00">Internet has shown us</a> <em>it is</em> possible to make simple games without JavaScript. I wanted to see just how far I could take this limitation—especially in an environment where it is competing against other games.</p>
<h2>Game Concepts</h2>
<p><a href="https://starzonmyarmz.itch.io/hiero">Hiero</a> is the third game I’ve made (the first by myself), and by now I should have some sort of process to making a game, right? Well… I don’t really. So far, the process has been different for every game.</p>
<figure><img src="https://iamdanielmarino.com/img/hiero-title.jpg" alt="Hiero Title Screen" loading="lazy" /></figure>
<p>In my experience, working on various aspects of a game (artwork, sound, etc…) greatly influences the other aspects of the game, so I find myself ping ponging around. Over the course of 13 days, I ended up implementing three core concepts into Hiero.</p>
<ol>
<li><strong>Complete 15 puzzles within a short timeframe.</strong> Not really much to say about this other than the earlier puzzles start out pretty easy. This teaches the player how the game is played. Over time the puzzles ramp up in difficulty. To keep things fast-paced, the game is short.</li>
<li><strong>To complete a puzzle you have to find the mismatched shape.</strong> Each puzzle contains three to seven shapes. When hovering over a shape, a “mirrored” version of the shape is shown underneath. The catch is, in each puzzle one of the mirrored shapes doesn’t match. In some cases it’s a completely different shape, while in others it’s a very similar shape with a slight modification. This not only satisfied the “mirror” theme requirements, but also seemed to be a different and slightly-more challenging take on the classic which-one-doesn’t-belong concept.</li>
<li><strong>You can only make three mistakes.</strong> This was a last minute addition to Hiero. Without it, the game can be cheesed by spamming clicks on the shapes until solving a puzzle. This adds an extra challenge of forcing the player to be judicious with their selections.</li>
</ol>
<figure><img src="https://iamdanielmarino.com/img/hiero-gameplay.jpg" alt="Hiero Game Play" loading="lazy" /></figure>
<h2>Mechanics</h2>
<p>As mentioned earlier, I didn’t want to use any JavaScript. My game is primarily built around two CSS mechanics: checkboxes with insane selector magic to update the game’s state, and an in-game timer created with an animation delay. The resulting code is in no-way elegant! It’s quite messy, convoluted, and slightly laggy. The CSS weighs in at roughly 60K!</p>
<h3>Checkboxes</h3>
<p>Most interactions are triggered with an HTML checkbox. Take this example:</p>
<pre class="language-html"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“checkbox”</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“foo”</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>“foo”</span><span class="token punctuation">></span></span>Interactive element<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span>Hidden element triggered by checkbox state<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre>
<p>We <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/sass/_base.scss#L30-L35">visually hide</a> the <code><input></code> element using CSS, but we can still interact with it by clicking on a corresponding <code><label></code>. This works so long as the <code>for</code> attribute matches the <code><input></code>s <code>id</code> attribute. The input returns a checked/unchecked state, and if we keep these elements as siblings (as opposed to parents/children) we can use this state to trigger other elements using CSS:</p>
<pre class="language-css"><code class="language-css"><span class="token selector">div</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span><br /><span class="token punctuation">}</span><br /><br /><span class="token selector">#foo:checked ~ div</span> <span class="token punctuation">{</span><br /> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span><br /><span class="token punctuation">}</span></code></pre>
<p>Now this is a highly simplified example. I’m combining this checkbox functionality with CSS animations to time certain events such as scenes being loaded or triggering sound effects. Very little HTML is nested, and most elements are siblings to one another. One of the challenges was implementing the layout/design while keeping the HTML mostly flat. If I had nested elements a certain way, they wouldn't have been selectable with CSS.</p>
<h3>Time Limit</h3>
<p>When the player starts the game, it kicks off the <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/sass/_lose.scss#L36-L37">losing scene animation</a> with a 78-second delay. The only way to pause/stop the animation is to <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/sass/_transitions.scss#L40-L55">match the CSS selector</a> that determines if you beat the 15th puzzle, which simultaneously triggers the winning animation. Controlling animations this way is achieved using the <code>animation-play-state</code> CSS property.</p>
<h3>Triggering Sound</h3>
<p>Setting an <code><embed></code> element to <code>display: none</code> will prevent it’s content from loading until it’s <code>display</code> property is reverted. So by setting an <code><embed></code> source to a sound file, I was able to use this to load sound on demand. However, once the content is loaded, it’s here to stay. You can’t hide/unhide it to make it play again, stop it from playing, or even loop it. This trick also does not work with <code><audio></code>, <code><video></code>, or <code><iframe></code> elements.</p>
<p>I was able to use the same checkbox mechanics above, and in some cases, an element’s <code>:hover</code> state to change an <code><embed></code>s <code>display</code> property. These constraints made it challenging to work with sound, but I am very happy with how it came out.</p>
<h2>Artwork</h2>
<p>I knew I was going to need a decent amount of artwork for matching shapes—on top of the other game-supporting graphics. By chance, I discovered that there are a ton of Hieroglyphs available as unicode characters. This spearheaded the visual direction, and adds to the game’s ominous atmosphere.</p>
<p>As I sketched out ideas for the interface, the more I liked the idea of using my personal art style which combines hand-drawn illustrations and digital painting. As I started putting all the pieces together it started feeling a bit like a cartoon. This inspired my use of <a href="https://fonts.google.com/specimen/Kalam#standard-styles">Kalam</a> for the title screen. I wanted to use something a little more legible for the interface text, and landed on <a href="https://fonts.google.com/specimen/Josefin+Sans">Josefin Sans</a> which is inspired by geometric sans serif designs from the 1920s. To really help seal the deal on the old-school cartoon vibe, I added the film-grain overlaying textures, using CSS animation to <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/sass/_base.scss#L128-L135">shift the texture around</a>.</p>
<p>In my opinion, this game would have worked just as well without the mirror graphic. It certainly would have simplified development not having to incorporate it! However, it really helps to drive the jam’s theme, so why not. It also gave me an excuse to mess around with CSS 3d transforms and perspective which isn’t something I get to do too often.</p>
<p>The last thing I’d like to talk about in regards to the artwork is the “tunnel vision” gradient that occurs as you near the end of the time limit. This was an idea my daughter had while play testing for me. It really helps simultaneously create tension, panic, and focus. This was implemented at the last minute using a CSS <code>radial-gradient</code> and <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/sass/_base.scss#L139-L172">animating it’s appearance</a>.</p>
<figure><img src="https://iamdanielmarino.com/img/hiero-gradient.jpg" alt="Tunnel Vision Gradient" loading="lazy" /></figure>
<h2>Sound Design</h2>
<p>In the past, I've used JavaScript-powered, chiptune-styled sound. But that wouldn't really match the art style or ambiance. Also, I wanted to try something new!</p>
<p>The limitations for triggering sound created some challenging conditions for creating sound. I couldn’t always control when the player would trigger a scene transition. Syncing chord progressions, rhythm, and melodies together was practically impossible. My approach was to keep the sound atmospheric in a way where sounds could be independently layered.</p>
<p>The result was a bass layer of a single chord being held while randomly fluctuating effects on it. Next, a percussive track is layered on top when the player instantiates the game play. 30 seconds in the percussive track starts having echo effects slowly applied to help build intensity and uneasiness. Finally, a game over sound is layered in.</p>
<h2>Tools</h2>
<p>I’ve become a big fan of <a href="https://www.11ty.dev/">Eleventy</a> since using it for my blog, and ended up using it to generate the game. It makes life so much easier than having to hand code every puzzle. With Eleventy, I have a <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/src/_data/puzzles.json">JSON file</a> with all the puzzles, an <a href="https://mozilla.github.io/nunjucks/">Nunjucks</a> <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021/blob/main/src/index.njk#L25-L40">puzzle template</a>, and Eleventy just spits out the final HTML. One could argue that I’m using JavaScript by creating my game using Eleventy and Nunjucks, but I’m really just using those tools to optimize my workflow. The final output is HTML and CSS.</p>
<p>I used <a href="https://sass-lang.com/">Sass</a> for authoring CSS. I don’t always use Sass because I find the overhead isn’t always worth the benefits. However, in this case I really took advantage of Sass loops and logic statements which made it a lot faster/easier to generate a lot of the selector magic I shared earlier.</p>
<p>I use any paper and pencil I can find to illustrate, and then ink those with <a href="https://www.dickblick.com/products/sakura-pigma-micron-pen/">Microns</a>. Scan them in with my phone, and send them to my computer where I use <a href="https://www.pixelmator.com/pro/">Pixelmator</a> to paint and optimize images.</p>
<p>To create all the sounds, I used a <a href="https://www.arturia.com/products/hybrid-synths/minilab-mkii/overview">MiniLab MKII</a> midi controller by Arturia with <a href="https://www.ableton.com/en/live/">Ableton Live</a>, as well as <a href="https://www.audacityteam.org/">Audacity</a> to refine the sounds a bit. Creating sound for this game was a completely different experience for me compared to <a href="https://js13kgames.com/entries/onoff">ONOFF</a>, and I absolutely loved it! First of all, using a midi controller and Ableton are brand new tools for me. I spent two or three days doing nothing but messing around with sound and learning how to use Ableton. I really do see myself taking advantage of these tools in future projects!</p>
<p>The source is <a href="https://github.com/starzonmyarmz/gamedevjs-jam-2021">hosted on Github</a>, and I’m using a GH workflow that was shared with me by one of the other developers in the jam which generates a ZIP file of the game and assets, and uploads it to <a href="https://itch.io/jam/gamedevjs-2021/entries">Itch.io</a> where the game jam and games are hosted.</p>
<h2>Nice to Haves</h2>
<p>There are two primary things I really wish I could have put in the game, and would have had I not restricted myself from using JavaScript: a restart button on the end scenes, and the ability to randomize puzzles. The later would have added a lot more replay value. At the same time, it doesn’t bug me too much because I like the fact that everyone can beat the game after playing it a handful of times from memorizing the puzzle.</p>
<p>I suppose another minor <em>nice to have</em> would have been a counter letting you know how many strikes you have. That would have been easy enough to implement, but didn’t because I didn’t think it was too hard to keep track of strikes, nor did it add a lot of value by showing you those strikes.</p>
<h2>Also…</h2>
<p>What I haven’t mentioned yet is my son also joined the game jam! He’s been learning <a href="https://unity.com/">Unity</a> and <a href="https://www.blender.org/">Blender</a>, but has struggled to complete a full game. I suggested he work with me to get some experience.</p>
<p>After I shared my game idea, he decided to <a href="https://twitter.com/starzonmyarmz/status/1381928874272030722?s=20">go it alone</a>! We had a lot of fun pinging ideas of of each other, sharing each others pain and frustrations, and play testing! I’m very happy with how his game, <a href="https://glassedgmr.itch.io/mirror-madness">Mirror Madness</a> came out, and am very proud of him.</p>
<h2>Wrap Up</h2>
<p>Heiro was ranked 11th out of 88 submitted games. I was hoping for top 10, but I'm not going to complain—especially since the game only uses HTML and CSS mechanics! You can also check out the <a href="https://itch.io/jam/gamedevjs-2021/rate/1007795">full score breakdown</a>, if you feel so inclined. I’m extremely happy with how <a href="https://starzonmyarmz.itch.io/hiero">Hiero</a> came out—especially given the personal challenge of not using JavaScript! Thanks for everyone who played, and scored my game.</p>
<p>I’d like to thank my daughters for play testing and being brutally honest when I asked for feedback. They gave me great ideas and pushed me to make Hiero as good as it is. My son, for coming along for the ride for me. And my wife, for putting up with the shenanigans of her middle-aged husband, and for challenging me to always do my best.</p>
<p>I don’t know when I’ll make my next game, but the ideas are already brewing!</p>
GitHub Game Off 2021 Retrospective2022-02-19T00:00:00Zhttps://iamdanielmarino.com/posts/github-game-off-game-jam-2021-retrospective/<p>Recently, I completed the <a href="https://itch.io/jam/game-off-2021">GitHub Game Off</a>. With over 500 entries, this is the largest game jam I’ve been a part of. I had some lofty goals for this game, and I just about met them all. I’m extremely happy with how the game came out!</p>
<p>Like prior games I’ve made, I don’t tend to join a game jam unless I have some specific idea/mechanic I’d like to explore. I’d been wanting to tackle a mobile game for some time now while exploring motion/accelerometer mechanics.</p>
<h2>Mechanics</h2>
<p>The theme for this jam was “bug”. I don’t remember how I arrived at the concept and gameplay, but the gist is: a fly mysteriously gets sucked into a phone. By tilting your phone (utilizing the phone’s motion/accelerometer sensors), you move the fly to avoid colliding with objects on the phone’s screen. Tilting your phone at steeper angles increases the fly’s velocity and speed. While relatively basic, I found it challenging to get the mechanics just right, and reprogrammed this mechanic several times.</p>
<p>The game consists of seven auto-scrolling levels, progressing in difficulty as you complete them. Each one is scripted to be about a minute long. While the scrolling is scripted, there is quite a bit of randomness sprinkled into each level such as the placement and dimensions of objects.</p>
<figure><img src="https://iamdanielmarino.com/img/trapped_cover.png" alt="trapped promo screen" loading="lazy" /></figure>
<p>The game is hard to play. Really hard. My play testers got frustrated quickly—especially with the first round of testing. I did quite a lot of tweaking based on their feedback. I simplified the levels by adding larger gaps between objects and slowing the scrolling down. Even with the adjustments it’s still hard to play, but not so hard that it’s unenjoyable.</p>
<p>I decided I was okay with the level of difficulty. I wanted a game that made you feel good about making progress. I’ve played through the entire game probably five or six times now (aside from rigorous testing throughout), and I can get through from beginning to end in about 20—30 minutes.</p>
<h2>Graphics</h2>
<p>If you’ve seen the game before reading this, you might think I’m joking by calling the visuals “graphics”. Believe it or not, the choice of simplicity was purposeful. I intentionally used a handful of basic shapes and solid colors.</p>
<p>Each level resembles a popular mobile app (can you figure out which ones), and all the design is stripped down to each app’s bare essence. By keeping the design so minimal, the graphics doesn’t feel overly <em>iPhone</em> or <em>Android</em>, so players can relate regardless of what kind of phone they use. Here are a couple of sample screenshots:</p>
<figure><img src="https://iamdanielmarino.com/img/trapped_levels.png" alt="trapped levels" loading="lazy" /></figure>
<p>I did receive a lower ranking on the game’s graphics, and that’s fair. I can understand why people would want something more high-fidelity. I even questioned my judgement on the decision to go low-fi a few times, but in the end I think it really does enhanced the game’s vibe and playability.</p>
<p>While the game play graphics are primarily generated with code, there is a single sprite! It’s the <em>fly</em> character during the cut scenes. I wanted to try out using <a href="https://www.aseprite.org/">Aesprite</a>, so decided to make the fly in the pixel-art style.</p>
<h2>Audio</h2>
<p>I got a little carried away with audio, and put way more effort into it than I had to—especially for a game jam. If I’m being honest, I had the most fun when I was composing and producing audio than doing anything else for this game.</p>
<p>I didn’t really intend to go all in with the jazz-style of music, but after writing the initial theme I was locked in. I started out composing a simple melody for the title screen. A few days later I had an album’s worth of music! The music is inspired by pianists like Vince Guaraldi and Danillo Perez. I love how they combine simple, playful, and whimsical-sounding melodies—with a little dissonance thrown in for good measure.</p>
<iframe style="border: 0; width: 100%; height: 406px;" src="https://bandcamp.com/EmbeddedPlayer/album=1082942060/size=large/bgcol=ffffff/linkcol=eb4d55/artwork=none/transparent=true/" seamless=""><a href="https://danielmarino.bandcamp.com/album/trapped-soundtrack">trapped soundtrack by Daniel Marino</a></iframe>
<p>I’m a lot more proficient using <a href="https://www.ableton.com/en/live/">Ableton</a> and my <a href="https://www.arturia.com/products/hybrid-synths/minilab-mkii/overview">Arturia MiniLab MKII</a> since my <a href="https://iamdanielmarino.com/posts/gamedevjs-jam-2021-retrospective/">last game jam</a> and found it much simpler this time to produce music. In keeping with the minimalistic artwork style, I kept the instrumentation minimal as well: piano and drums only.</p>
<h2>Environment and Tooling</h2>
<p>Like my other games, the game is developed with HTML, CSS, and JS. I’m most comfortable with this tooling environment, and enjoy pushing myself to learn and do new things with it.</p>
<p>I’ve been experimenting with creating generative art using JavaScript and the <a href="https://p5js.org/">P5.js library</a>. I wasn’t sure how it would work as a game engine, but decided to try it out. In addition to P5, I also used a couple of additional libraries to help with <a href="https://github.com/mveteanu/p5.SceneManager">scene management</a> and <a href="https://github.com/bmoren/p5.collide2D">collision detection</a>. Some highlights working with P5:</p>
<ul>
<li>The output renders to a <code><canvas></code> element at 60fps, which makes the game quality pretty decent, and performant.</li>
<li>You can get started very quickly because <a href="https://developer.mozilla.org/en-US/docs/Games/Anatomy#building_a_main_loop_in_javascript">the loop</a> is handled automatically. There are also a ton of useful built in methods for creating and manipulating graphics.</li>
<li>It has built-in event listening for screen touching and device rotation, which was pretty helpful in my case.</li>
</ul>
<p>Despite those highlights, I honestly don’t know if I got as much mileage out of P5 to justify using it.</p>
<ul>
<li>I ended up having to create my own Class with various methods for drawing and manipulate shapes. This is mostly because I wanted to be consistent in how shapes were generated, as well as being able to easily set up consistent timings for shape manipulation.</li>
<li>I ran into problem using P5’s vector manipulation methods, and used plain ‘ole vanilla JS to calculate and manipulate shapes.</li>
</ul>
<h2>Developing a Browser-based, Mobile Game is Hard</h2>
<p>I kind of knew going into making a mobile game was going to come with its own set of challenges, but I wasn’t prepared for how difficult some of them would be to work out:</p>
<ul>
<li>iOS Safari, for better or worse, has a huge market share on mobile devices. Not only that, all browsers—whether it be Chrome or Firefox or whatever—on iOS get stuck using the same Webkit rendering engine as Safari. Unfortunately, iOS Safari seems to be a little behind in some features that are implemented, making it difficult to work around some challenges.</li>
<li>iOS requires <a href="https://github.com/starzonmyarmz/trapped/blob/main/src/game.js#L39-L50">acquiring the user’s permission to access device rotation events</a>—which not only hinders the user experience, but also adds some complicated code to handle this. It should be noted that P5 doesn't handle this on any level, and just assumes permission is granted from the start.</li>
<li>Itch.io doesn’t handle hosting browser-based mobile games very well. It also doesn’t help that neither iOS or Android make it easy to run cross-origin code. For various reasons working around this limitation is quite painful. In the end I published a QR code with a link to the game on Itch.io and published the actual game on GitHub Pages.</li>
<li>Developing and testing a browser-based mobile game locally is frustrating and kludgy. It’s slower than normal desktop-based development, and debugging was very hard. To access my localhost on my phone I used <a href="https://ngrok.com/">ngrok</a> to tunnel my localhost to a public server. I would then use the public URL in Safari on my iPhone. I could inspect the DOM and check the console for errors using Safari on my Mac.</li>
</ul>
<h2>Goals and Results</h2>
<p>I mentioned at the beginning of this post that I had some lofty goals. They were (in no particular order):</p>
<ul>
<li><strong>Complete a mobile game</strong>. Pretty sure I succeeded here!</li>
<li><strong>Build the game without any assistance</strong>. I did actually have a little help from my buddy, Brad with some of the finishing touches. That said, I did the vast majority of the development on my own, and I feel really good about that!</li>
<li><strong>Rank in the top 10% of games for the game jam</strong>. Overall, my game ranked 77th out of 526 submissions, which is about the top 15%. I’ll take it—especially for my first attempt at a mobile game. Also, I ranked 10th for <em>Audio</em> and 18th for <em>Innovation</em> which I think is awesome! You can check out <a href="https://itch.io/jam/game-off-2021/rate/1291063">my submission</a> for the score breakdown and player feedback.</li>
</ul>
<p>While I didn’t meet all my goals, I came pretty darn close. More importantly, I had a lot of fun with this game jam. I learned a lot and expanded my knowledge on using P5 as well as other various coding techniques.</p>
<p>Besides <a href="https://github.com/braddunbar">Brad</a>, I had help from other folks, and I’d be remiss if I didn’t thank them: <a href="https://matthewlettini.me/">Matthew</a> and <a href="https://twitter.com/dannywen">Danny</a> for play testing, as well as my kids for play testing and suggesting good ideas when I was feeling stuck. Lastly, my wife: not only does she play my games, but is very supportive, lets me vent about crappy API support, and inspires me to put everything I got into my work.</p>
<p>Be sure to give <a href="https://starzonmyarmz.itch.io/trapped">trapped</a> a play or check out the <a href="https://github.com/starzonmyarmz/trapped">source code</a>!</p>
Building a Random Music Sequencer with Preact2022-05-05T00:00:00Zhttps://iamdanielmarino.com/posts/building-a-random-music-sequencer-with-preact/<p>As I've composed music for video games, something that has piqued my interest is the concept of randomly generating music. Not that this is a new concept, but I was curious to see what I could come up with. Go ahead and check out the <a href="https://starzonmyarmz.github.io/rmg/">RMG-2021</a>.</p>
<h2>Design</h2>
<p>I love how sequencers look and feel—and there is so much variety as to how they're designed! I really wanted to recreate the vibe of using a physical sequencer, and referenced a lot of gear when designing the UI.
It was a bit of a balancing act to capture the essence of a physical sequencer while adapting it to a screen.</p>
<figure><img src="https://iamdanielmarino.com/img/rmg2021.png" alt="RMG-2021 Tiny Music Sequencer" loading="lazy" /></figure>
<h2>Preact</h2>
<p>One of my goals was to get better at understanding and using React. I really just wanted to get more familiar with the basics, so I went with <a href="https://preactjs.com/">Preact</a> which more or less offers the same API and low-level functionality. I'm also using <a href="https://github.com/developit/htm">HTM</a> which provides JSX-like syntax in vanilla JavaScript.</p>
<p>At first, I found it really difficult to buy in to the React/JSX ecosystem, but the more I work with it, the more I appreciate it. I'm still not super fond of writing HTML in JavaScript, but I'm getting over it.</p>
<h2>Sound</h2>
<p>When working with audio for <a href="https://js13kgames.com/entries/onoff">ONOFF</a>, I used <a href="https://github.com/kevincennis/TinyMusic">TinyMusic</a>, and I'm using it here too. Is it necessarily? No, but true to it's name—it's tiny, and offers a nice API. It simplifies authoring audio sequences in JavaScript. I'm even outputting the TinyMusic sequence syntax so it can be easily reference it.</p>
<h2>Features</h2>
<p>This is one of those projects that I could have easily kept adding features. At some point I had to call it <em>done</em> and ship it. Every feature I added ended up adding more complexity to using the sequencer. The RMG allows you to specify:</p>
<ul>
<li>The number of notes to use in the sequence</li>
<li>Which key the notes should be pulled from</li>
<li>A range of octaves to generate a sequence within</li>
<li>Snapping the total number of beats to an integer</li>
<li>Toggling the loop of the sequence</li>
<li>Toggling a metronome click, and adjusting various metronome settings</li>
<li>Adjusting various effects such as wave type, EQ, sweep, and decay</li>
<li>Adding a <em>pulse</em> effect to a sequence</li>
</ul>
<p>On top of these features you can also easily randomize all the settings, and share a sequence via URL.</p>
<h2>Random Sequences are Fun</h2>
<p>I've used <a href="https://starzonmyarmz.github.io/rmg/?notes=16&key=E&rangemin=2&rangemax=8&arrangement=B6+0.25%2CE2+2%2CF%234+0.75%2CD%238+1%2CC%234+4%2CF%237+4%2CD%236+0.75%2CD%238+2%2CG%235+0.75%2CC%238+1%2CC%236+0.25%2CD%233+0.25%2CC%233+1%2CF%238+2%2CD%238+0.5%2CD%233+0.5&tempo=314&wave=square&smoothing=0.38&staccato=0.34&bass=-9&mid=-1&treble=-1&loop=true">random sequences</a> generated by the RMG for various things: drumming along with sequences, challenging myself to <a href="https://soundcloud.com/starzonmyarmz/ollie">compose</a> <a href="https://soundcloud.com/starzonmyarmz/grind">music</a> around a random sequence, or even sending goofy sounds to my friends. It was a fun project, and I learned a lot.</p>
Free Radon album released2023-10-26T00:00:00Zhttps://iamdanielmarino.com/posts/free-radon/<p>A little over a year ago, I composed a handful of songs. If I had to fit them into a genre, I’d go with <em>Lofi</em> or <em>Chillvibes</em>. Or maybe <em>Not-Rock-n-Roll</em>. I don’t know—I’m so bad at classifying music.</p>
<p>I wasn’t sure what to do with the songs. I was experiencing some intense emotions when I was composing them. I’ve been doing a lot of emotional growth over this past year (and still am), and I feel like by releasing them into the wild would be cathartic for me. To acknowledge that that chapter in my life happened, and it’s okay. So with that, here’s <a href="https://danielmarino.bandcamp.com/album/free-radon">Free Radon</a>.</p>
<iframe style="border: 0; width: 100%; height: 274px;" src="https://bandcamp.com/EmbeddedPlayer/album=2458624556/size=large/bgcol=ffffff/linkcol=eb4d55/artwork=small/transparent=true/" seamless=""><a href="https://danielmarino.bandcamp.com/album/free-radon">Free Radon by Daniel Marino</a></iframe>
<p>So why <em>Free Radon</em>? I’d like to say I put a lot of thought into naming the album, but I didn’t. I needed cover art for the album, and I thought it would be fun to generate random artwork for it. So I used the <a href="https://p5js.org/">p5.js JavaScript library</a> to do so. I used the p5.js web editor, and when you create a new sketch it automatically creates a random name for it—in this case Free Radon. Speaking of using p5.js to create the artwork, you can <a href="https://editor.p5js.org/iamdanielmarino/sketches/0QgAM4zz3">view the script</a>, and mess around with it.</p>
<p>Hope you like the music. If you do, <a href="https://danielmarino.bandcamp.com/album/free-radon">share it with others</a>, or <a href="https://danielmarino.bandcamp.com/album/free-radon">buy it</a>, or <a href="https://danielmarino.bandcamp.com/album/free-radon">both</a>! If you don’t like it… oh well.</p>
Making Generative Art2024-01-13T00:00:00Zhttps://iamdanielmarino.com/posts/generative-art/<p>I saw <a href="https://joshuadavis.com/">Joshua Davis</a> give a talk over 10 years ago, and I was mesmorized. Not just by how engaging he was, but more so with the work he was doing with <em>generative art</em>.</p>
<p>I had never heard of generative art before, but I immediately fell in love with the concept of it. I like to draw, but I wouldn't consider myself much of an artist. I can work my way around Photoshop pretty comfortably, but again, wouldn't consider myself much of an artist. I didn't think much of generative art again for some time later.</p>
<p>Several years ago, I started toying with the idea fo experimenting with generative art. A buddy of mine, <a href="https://codepen.io/satchmorun">Arun</a> shared some of his work, and inspired me to go for it. So now I've been creating generative art for the past five years or so, but I've only recently started <a href="https://starzonmyarmz.github.io/generative-art/">sharing my experiments</a>.</p>
<p>Libraries like <a href="https://p5js.org/">P5.js</a> make it very approachable. And I'm a huge fan of P5! I even <a href="https://iamdanielmarino.com/posts/github-game-off-game-jam-2021-retrospective/">made a video game</a> with it. If you have the slightest interest in creating generative art, you should go for it! If you don't know where to start, I recommend checking out <a href="https://thecodingtrain.com/">The Coding Train</a> where you'll find some great tutorials for getting started with programming, and more specific tutorials for using the P5 library.</p>
<p>I love to write code. I love art. I love being creative. The idea that I can combine all these into a single hobby is so cool.</p>
Using the p5play JavaScript Game Engine2024-01-15T00:00:00Zhttps://iamdanielmarino.com/posts/using-the-p5play-library-for-making-games/<p>I was messing around with <a href="https://p5play.org/">p5play</a> last week to experiment with a game idea, and was pleasantly surprised by how easy it is to use. It was designed to be intuitive for beginners, such as students. In under a half hour I had created some common basic mechanics! Check it out:</p>
<p class="codepen" data-height="500" data-default-tab="js,result" data-slug-hash="WNmRzOK" data-user="starzonmyarmz" style="height: 500px; display: flex; align-items: center; justify-content: center; margin: 1em 0; padding: 1em;">
<span>See the Pen <a href="https://codepen.io/starzonmyarmz/pen/WNmRzOK">
p5play</a> by Daniel Marino (<a href="https://codepen.io/starzonmyarmz">@starzonmyarmz</a>)
on <a href="https://codepen.io/">CodePen</a>.</span>
</p>
<script async="" src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>
<h3>What I Like</h3>
<ul>
<li>It builds on top of <a href="https://p5js.org/">P5.js</a>. This means that I can leverage all the built-in features I'm already familiar with in P5. It even expands upon some built-in features in P5—like creating a new <a href="https://p5play.org/learn/canvas.html">Canvas</a>.</li>
<li>It uses the same <a href="https://piqnt.com/planck.js">Box2D physics simulator</a> that some popular games use. Some physics engines are a little floaty, while others are too constrained. This simulator has some really comfortable defaults out of the box.</li>
<li>The documentation is easy to follow along, and there's a <a href="https://discord.gg/3UTbqUgmPF">Discord server</a> where I can (and have) ask questions. I typically have gotten a response from the library maintainer, himself, within a couple of hours.</li>
</ul>
<h3>What I Dislike</h3>
<ul>
<li>Not everything is documented, and that's not necessarily a bad thing. However, there are some really handy properties and even methods available that I happened to come across by accident just from purusing the source code and outputting various p5play global methods to <code>console.log()</code>.</li>
<li>The licensing is a <a href="https://github.com/quinton-ashley/p5play-web/blob/main/LICENSING.md">little weird</a>. In short: its free to use for open source projects, but for professional use you need to pay for a license. I'm not going to argue whether you should have to pay for a license or not, but its definately something to be aware of.</li>
</ul>
<p>I'll definitely be keeping <a href="https://p5play.org/">p5play</a> in my toolkit the next time I want to prototype some game mechanics or participate in a game jam!</p>