af/app/pages/development.vue

<template><NuxtLayout name="default">
    <template #headline>{{ headline }}</template>
    <template #tagline>{{ tagline }}</template>

    <main id="main" class="container mx-auto max-w-screen-lg sm:px-12 px-2 prose" aria-label="Development">
        <article class="body grid sm:grid-cols-2 grid-cols-1 gap-x-12 gap-y-0">
            <section class="full col-start-1 sm:col-span-2">
                <p>I have been writing code for as long as I can remember &ndash; yes, that must have been around 1990, with my Amiga 500. It has been a long journey, and I learned a thing or two along the way.</p>
            </section>
            <section class="left col-start-1 col-span-1">
                <p>One of these is that the “<em>what languages do you know?</em> ” question is largely irrelevant. Once you know a bunch of them, learning a new one is easy. The hard part is knowing how to attack a problem and solve it.</p>
            </section>
            <section class="right col-start-1 col-span-1 sm:col-start-2">
                <p><strong>Languages</strong> I know:</p>
                <ul>
                    <li>experienced: C, C++, Objective-C, XML, HTML, TypeScript, PHP, Ruby, Pure Data, Processing</li>
                    <li>familiar: Swift, JavaScript, Python, x86 and ARM assembly for system programming</li>
                    <li>learning: R, Julia, Haskell</li>
                </ul>
            </section>
            <section class="left col-start-1 col-span-1">
                <p>Knowing languages is only a small portion of the job. You also need to know how to not <a href="https://en.wikipedia.org/wiki/Reinventing_the_wheel">reinvent the wheel</a> all the time, how to design maintainable and scalable software architectures, and so on.</p>
            </section>
            <section class="right col-start-1 col-span-1 sm:col-start-2">
                <p><strong>Frameworks</strong> and other magic tricks:</p>
                <ul>
                    <li>Qt, Cinder, openFrameworks</li>
                    <li>Ruby on Rails, Sinatra</li>
                    <li>React, Vue.js, Nuxt.js</li>
                    <li>Arduino</li>
                    <li>Godot</li>
                </ul>
            </section>
            <section class="full col-start-1 sm:col-span-2">
                <p>I may be forgetting some, but bottom line: <strong>it's no use knowing stuff if you don't know what it's used for</strong>.</p>
                <h2>Things I've done</h2>
                <p>Enough talk, let's see some of the projects I worked on over the years.</p>
            </section>

            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_adriarattle">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>Adria's rattle</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <video autoplay loop muted class="rounded">
                        <source src="/images/rattle-site.mp4" type="video/mp4" />
                        Your browser does not support HTML5 video.
                    </video>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>I project-managed the co-design and development of the electronic replica and the info panel for the new permanent exhibition of <a href="https://www.culturaveneto.it/beni-culturali/beni-archeologici/5ced4b621ebd0e66c81d22bf">Adria's baby rattle</a> found in tomb 39 of the Ca' Cima archaeological site. I also developed the info panel and co-ordinated the group effort to produce the content.</p>
                    <p><strong>Technologies</strong>: Godot 4, ESP32.</p>
                    <p><a href="https://muse.beniculturali.unipd.it/case-studies/"><strong>Project website</strong></a> | <a href="https://gitlab.dei.unipd.it/prin-muse/interactive-panel-adria/"><strong>Source code</strong></a></p>
                </section>
            </section>

            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_autoritratto">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2 ">
                    <h3><em>Autoritratto per 4 camere e 4 voci</em></h3>
                    <p>Michele Sambin, 1977</p>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/autoritratto-2x.webp" type="image/webp" />
                            <source srcset="/images/autoritratto-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/autoritratto-2x.jpg" alt="«Autoritratto per 4 camere e 4 voci» by Michele Sambin" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>As part of an effort to restore and preserve old multi-media and interactive art installation, I collaborated with the team at the <a href="http://csc.dei.unipd.it/">CSC</a> to bring this performance art piece back to life in Virtual Reality.</p>
                    <p><strong>Technologies</strong>: Godot 4, OpenXR.</p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_cashorcard">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>Cash or Card?</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <figure>
                        <picture>
                            <source srcset="/images/cash_or_card-2x.webp" type="image/webp" />
                            <source srcset="/images/cash_or_card.jpg 1x, /images/cash_or_card-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/cash_or_card.jpg" alt="Circular Bells" />
                        </picture>
                    </figure>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>“Cash or Card?” is an educational puzzle-simulation video game to explore the theme of cash vs electronic payments. You play as a shopkeeper who has to earn enough money in 5 days and you need to choose how your customers are going to pay you.</p>
                    <p><strong>Technologies</strong>: Godot 4.</p>
                    <p><a href="https://edugames.andreafranceschini.org/games/cash_or_card/" title="Play Cash or Card online for free!"><strong>Play online</strong></a> | <a href="https://edugames.andreafranceschini.org/cash-or-card/"><strong>Description</strong></a> | <a href="https://edugames.andreafranceschini.org/wp-content/uploads/cash-or-card-gdd.pdf"><strong>GDD</strong></a> | <a href="https://github.com/Morpheu5/cash-or-card"><strong>Source code</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_rfk2d">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <h3>Robot Finds Kitten 2D for Godot Engine</h3>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/rfk2d-2x.webp" type="image/webp" />
                            <source srcset="/images/rfk2d.jpg 1x, /images/rfk2d-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/rfk2d.jpg" alt="Robot Finds Kitten 2D for Godot Engine" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>I wanted to learn <a href="https://godotengine.org/">Godot</a> so I made a port of the <a href="http://robotfindskitten.org/">famous zen simulation</a> Robot Finds Kitten which you can <a href="https://rfk.morpheu5.net/2d" title="Play Robot Finds Kitten 2D online for free!">play online here</a> for free! No ads! Pure zen!</p>
                    <p><strong>Technologies</strong>: Godot 3.</p>
                    <p><a href="https://rfk.morpheu5.net/2d" title="Play Robot Finds Kitten 2D online for free!"><strong>Play online</strong></a> | <a href="https://www.github.com/Morpheu5/RFK_Godot2D"><strong>Source code</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_circularbells">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>Circular Bells</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <figure>
                        <picture>
                            <source srcset="/images/cb_demo-2x.webp" type="image/webp" />
                            <source srcset="/images/cb_demo.jpg 1x, /images/cb_demo-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/cb_demo.jpg" alt="Circular Bells" />
                        </picture>
                    </figure>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>Circular Bells is a music app that for kids and grown ups to sit back and relax while playing with its brightly-coloured, ever-changing interface, and uplifting sounds.</p>
                    <p><strong>Technologies</strong>: C++, Cinder, iOS.</p>
                    <p><a href="https://itunes.apple.com/us/app/circular-bells/id1062362784?mt=8"><strong>App Store</strong></a> | <a href="https://www.youtube.com/watch?v=a_GSQNIT7xM"><strong>Demo</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_phdappios">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <h3>PhD music app for iPad</h3>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/phd-app-2x.webp" type="image/webp" />
                            <source srcset="/images/phd-app.jpg 1x, /images/phd-app-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/phd-app.jpg" alt="PhD app for iPad" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>In 2014, I needed to bring the app below with me to a conference for demos. I figured pretty soon that I was not going to bring the giant screen with me, so I did an iOS port which worked wonderfully. No, you can't have it. Yet. I'm designing a new version. You can have that once it's ready.</p>
                    <p><strong>Technologies</strong>: C++, Cinder, iOS.</p>
                    <p><a href="https://www.github.com/Morpheu5/SecondStudy-iPad"><strong>Source code</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_phdapp">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>PhD music app</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <figure>
                        <picture>
                            <source srcset="/images/table_2-2x.webp" type="image/webp" />
                            <source srcset="/images/table_2.jpg 1x, /images/table_2-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/table_2.jpg" alt="PhD app for large tabletop" />
                        </picture>
                    </figure>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>As part of my doctoral studies, I developed a collaborative music composition tabletop application to teach people how to compose and discuss melodies.</p>
                    <p><strong>Technologies</strong>: C++, Cinder, Pure Data.</p>
                    <p><a href="https://www.github.com/Morpheu5/FourthStudy"><strong>Source code</strong></a> | <a href="https://www.youtube.com/watch?v=AONzmnAHZ6w"><strong>Demo</strong></a></p>
                </section>
            </section>
            <section class="project full col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_aranaboo">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <h3>Aranaboo</h3>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/aranaboo-2x.webp" type="image/webp" />
                            <source srcset="/images/aranaboo.jpg 1x, /images/aranaboo-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/aranaboo.jpg" alt="Aranaboo" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>A game of peek-a-boo using face detection.</p>
                    <p><strong>Technologies</strong>: iOS.</p>
                    <p><a href="https://www.beyoucompany.com/?page_id=8"><strong>Web site</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_astronauta">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>Da grande voglio fare l'astronauta</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <figure>
                        <picture>
                            <source srcset="/images/astronauta-2x.webp" type="image/webp" />
                            <source srcset="/images/astronauta.jpg 1x, /images/astronauta-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/astronauta.jpg" alt="Da grande voglio fare l'astronauta" />
                        </picture>
                    </figure>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>An interactive book for children. The tale of a kid who wants to become an astronaut. I developed the iOS part of the project to completion, but sadly the app was never released.</p>
                    <p><strong>Technologies</strong>: iOS.</p>
                    <p><a href="https://www.behance.net/gallery/1201947/DA-GRANDE-VOGLIO-FARE-LASTRONAUTA-(-IPAD-APP)"><strong>Behance</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_bsc">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <h3>CRUSADE Bleeding Score Calculator</h3>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/bsc-2x.webp" type="image/webp" />
                            <source srcset="/images/bsc.jpg 1x, /images/bsc-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/bsc.jpg" alt="CRUSADE Bleeding Score Calculator" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>This app helps clinicians estimate a patient's baseline risk of in-hospital major bleeding during both ST and non-ST segment elevation myocardial infarction. Not that I know what that means. I was given a spreadsheet with some formulas, I was asked to make an iOS app, and so I did. Then the client did not want it anymore, so I published it myself.</p>
                    <p><strong>Technologies</strong>: iOS (Swift), Android (Kotlin).</p>
                    <p><a href="https://itunes.apple.com/us/app/crusade-bleeding-score-calculator/id454062627?mt=8"><strong>App Store</strong></a>, <a href="https://play.google.com/store/apps/details?id=net.morpheu5.bleedingscorecalculator"><strong>Google Play</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300 pb-3" id="project_doodle">
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <h3>Doodle</h3>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <figure>
                        <picture>
                            <source srcset="/images/doodle-2x.webp" type="image/webp" />
                            <source srcset="/images/doodle.png 1x, /images/doodle-2x.png 2x" type="image/png" />
                            <img class="rounded" srcset="/images/doodle.png" alt="Doodle" />
                        </picture>
                    </figure>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <p>I worked on the actual Reactable between 2008 and 2009, proposing a new approach to Western tonal music &ndash; the original support was quite minimal, I was tasked with making it a bit more usable.</p>
                    <p><strong>Technologies</strong>: C++, <a href="https://www.qt.io">Qt 4</a>, <a href="https://www.jackaudio.org">Jack</a>.</p>
                    <p><a href="https://www.github.com/Morpheu5/Doodle"><strong>Source code</strong></a> | <a href="https://vimeo.com/4325822"><strong>Demo</strong></a></p>
                </section>
            </section>
            <section class="project full col-start-1 sm:col-span-2 border-t-1 border-t-slate-300" id="project_tofus">
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <h3>tOfuS: the Framework OS</h3>
                </section>
                <section class="_right sm:float-right sm:w-1/2 sm:pl-2">
                    <figure>
                        <picture>
                            <source srcset="/images/tofus-2x.webp" type="image/webp" />
                            <source srcset="/images/tofus.jpg 1x, /images/tofus-2x.jpg 2x" type="image/jpeg" />
                            <img class="rounded" srcset="/images/tofus.jpg" alt="tOfuS" />
                        </picture>
                    </figure>
                </section>
                <section class="_left sm:float-left sm:w-1/2 sm:pr-2">
                    <p>Yes, there was a time when I worked on a toy operating system. It was good fun and I learned a lot about assembly code and bare-metal programming.</p>
                    <p><strong>Technologies</strong>: x86 assembly, C.</p>
                    <p><a href="https://www.github.com/Morpheu5/tOfuS"><strong>Source code</strong></a></p>
                </section>
            </section>
            <section class="full col-start-1 sm:col-span-2">
                <p class="calltoaction">Have a cool project in mind? <a href="/contact">Let's talk about it!</a></p>
            </section>
        </article>
    </main>
</NuxtLayout></template>

<script lang="ts" setup>
definePageMeta({
    layout: false
});

const headline = "Software development";
const tagline = "Not black magic";

const title = `${headline} ••• Andrea Franceschini, PhD`
const keywords = "software, development, music, learning, tabletop, research, the open university, university of cambridge, isaac physics, reactable";
const description = "All the bits and bobs that make computers go 'boop'.";

useState('pageClasses', () => ['development', 'page']);
useHead({
    title,
    meta: [
        { property: 'keywords', content: keywords },
        { property: 'DC.Title', content: title },
        { property: 'twitter:title', content: title },
        { property: 'og:title', content: title },
        { property: 'description', content: description },
        { property: 'DC.Description', content: description },
        { property: 'twitter:description', content: description },
        { property: 'og:description', content: description },
    ]
});
</script>