Assignment #1A
Propose a Final Project

Our first assignment is to sketch a proposal for our final project. For years, I’ve been working with artists to develop electronic musical instruments, so it feels natural to propose a final project in that field. After studying the Fab Academy 2020 programme, I thought it would be a good idea to incorporate as many assignments as possible into the development of my final project. This would help me make the most of my time and prepare most of the components as early as possible.

1 - An experimental MIDI controller

My idea for the Fab Academy final project is to design a MIDI controller that uses sensors alongside the usual buttons and knobs. Although almost any kind of sensor can be used to modulate sound, it is hard to find musical interfaces, especially in the mainstream market, that go beyond a box with buttons and knobs. I aim to question this approach and come up with something new.
More specifically, I would like to develop an instrument that uses a gyroscope to interact with sound. I imagine a device that users could hold in their hands and rotate to change the sounds they play.

2 - structure of the device

The device should be as compact as possible, easy to handle, relatively quick to produce, and affordable. To achieve this, I thought about a “sandwich” structure: two 3D-printed shells surrounding a wooden element that the user will hold. I’ll also try to add visual feedback to show what the sensors are detecting. There will be 12 buttons on top of the device, with the gyroscope in the centre.

3 - circuits and code

At this stage, I think the best approach to the circuit design is to make an Arduino-compatible controller connected to the gyroscope, buttons, and visual feedback system. I may add a multiplexer chip to increase the number of available inputs. This should make development easier, as several Arduino libraries allow a controller to send MIDI data through a serial port or MIDI connector.

4 - Design considerations

Using a gyroscope alongside more familiar input devices changes the design of the object considerably. A device that can be twisted, turned, and moved around challenges the idea of a “correct” or “incorrect” orientation.

Assignment #1B
Create a website

After sketching a proposal for the final project, it’s time to create and upload a personal website to document my Fab Academy work. I’m not an experienced coder, but I have some experience from making my portfolio, which used GitHub rather than GitLab. The following paragraphs describe the steps I followed to make the website you are browsing now.

1 – Design

The first step was to define the design features I wanted for my Fab Academy blog. I chose a simple layout with a sidebar containing a logo and menu, and a main area for the content.

2 – Jekyll

To develop my website I used Jekyll. From Jekyll’s official website: “Jekyll is a static site generator. You give it text written in your favorite markup language and it uses layouts to create a static website. You can tweak how you want the site URLs to look like, what data gets displayed on the site, and more” Jekyll allows the user to set up a main CSS and HTML layout that can be used by simpler files that can be edited in Markdown. On top of this, there’s the possibility of downloading templates and then tweaking them to get what you want in (almost) no time… To install Jekyll on your computer (I’m using Linux Mint as an OS) you need to install a Ruby development environment, and then to run the following command:
- gem install jekyll bundler
Once Jekyll was installed on my computer, I downloaded a template called “Hyde”. I navigated to the template folder in my terminal and ran the following command:
bundle exec jekyll serve
This command runs the website locally. You can view it by opening your browser, Mozilla Firefox in my case, and going to:
http://localhost:4000
By doing this it is possible to see the website as it is, and check what your tweaks are doing.

3 – Customising the template with HTML, CSS, and Markdown

Once the template was running locally, I explored its folders and edited the files to get the layout I wanted.


I experimented with a Markdown-compatible text editor called “Remarkable”. After a few attempts, I added my favourite font, Roboto, and updated the sidebar with a logo and social media links.


The most challenging task was to modify the home page to include a grid gallery that makes each assignment easy to find. To learn how to arrange pictures in a grid, I followed this tutorial :


Setting up the grid completed the main development of my website. For each new assignment, I’ll create a page and write it in Markdown, a simple markup language that makes publishing new content quick and easy. Jekyll will then convert it into HTML for the website.

4 – Git: uploading the website

Once I was happy with the website, it was time to use Git to upload it so that everyone could see it. An important step in running a Jekyll website from our GitLab repository is to create a file called .gitlab-ci.yml and configure it using the Jekyll template, as shown below:


That wasn’t quite the end: I also had to adjust some Jekyll settings, following this tutorial
After that, I returned to the terminal and cloned the online repository using:

git clone https://gitlab.fabcloud.org/academany/fabacademy/2020/labs/crunchlab/students/nicolo-merendino.git

The URL depends on the repository you want to use. I then copied my website into the downloaded folder and ran the following commands:


git status

git add .

git commit -m "message"



git push -u origin master

After a few more tweaks, I had a working Fab Academy website. To investigate problems with a website, you can use your browser’s “Inspect element” tool to help locate the issue.

5 – Notes, takeaways, and plans for the future

If you can read this, the website is up and running, and I’m quite happy with it. Although I developed a much better understanding of the workflow, some aspects are still unclear to me. The HTML and the site structure could be cleaner and more efficient, so I’ll keep improving my skills throughout the course. I also used Inkscape to create some icons, a topic I’ll explore further in later assignments.