Category: javascript

JSRobots Programming Game

TLDR: link (In mobile the interface is awful, but it’s your life)

I was at my company gathering the other day and I ended up chatting with a colleague, let’s call him Alberto, who has a young son. We were discussing that he would like to get his son interested in programming, and since I’ve also developed the passion for programming and computer science at a quite young age, he was asking for advice.

So I was trying to remember how I got interested in programming, and I have no answer for this, I guess it was a combination of my father introducing to it and me discovering the power to control this mistical thing that was the computer at the time, not obiquitous like they are now, with smartphones, smart devices and so on. But still, I think the my interest was very much related to the fact that programming gives you very powerful building tools to unleash your imagination. It’s like Lego, but you don’t have to ask your parents to buy you the new set to have more pieces, all the pieces are already there, you just have to discover them. In fact, this is the hard part: discover the tools and how to use them is the key. This can be a tedious and long process, and it’s difficult to focus for this much time especially at young age, you really just want to “play”.

But sometimes you find some ways to bridge the gap and that lets you have some quick results. After having a way to easily see how you can affect a digital world, here’s where you understand if you like programming or not. And I loved it.

So, back to me at a young age, I remember at some point, probably around 13 years old or so, already admittingly quite deep into the computer science world (I had already some little programming projects ongoing) I discovered a programming game called JRobots. It was inspired (actually more than that, almost only a Java port of that) by a much older game called CRobots (written in C). It’s a simple game in which you can program your bot to fight against others in an arena, defining its behaviour by coding its “brain”, which takes decisions on how to act at every time step.

But the JRobots game still had a lot of overhead to get started, install and setup the JVM, download the source, make it run correctly, download other people’s bots and make them run along with the rest. I was lucky to have the knowledge to do it, and spent some months playing with this game, learning trigonometry and implementing new ideas (algorithms) like no school teacher could have done, in a very funny way.

So, here you have JSRobots, a JS rewrite of the thing. As in JRobots, in this programming game you have to write some code to control the behaviour of your “robot”, which is then placed in an arena to combat with another bot (possibly written by someone else). I think this is a nice way to get closer to programming because with very few lines of code you can see the differences of behaviour of your robot, and you can iteratively make it better and see its improvements and fails. Behing written in JS and running entirely in the browser, this is a zero overhead way to start writing some code. You start with the given example, you try to change it, press one button and the code is executing, showing your impact in this digital world.

Current state of the project is it’s a proof of concept, and can be improved in many ways. Has no server side logic, I could add some to be able to submit your bot for others to play against, but I have to take into account some security concerns before implementing that. For the rest, It’s missing some debug options for sure, but it’s usable.

The rules and documentation for the game are provided on the website itself (thanks to chatGPT again, if it’s not clear enough complain to openAI) and if you wish to send me your bot to be added to the list of opponents please do. You can find one of my emails somewhere in this blog or in the internet or at nicassio.it/daniele

The code is also on github

Party Guestbook

Now in Barcelona, home parties are back again! So, following other projects I did for party guest entertainment, this time I decided to develop a digital Guestbook for people to use.. it was nice!

Also, this time I asked chatGPT to help me, and in 4 to 5 prompts I had it all done – with some tweaks afterwards. The way I interacted with chatGPT to produce some working code was nice, a first for me, but I would say very convenient. I had exactly in mind what I wanted, just didn’t know how to do it in detail without searching the internet. So here are a screenshot of the result and the prompts I used to build this:

ChatGPT prompts, with ChatGPT commenting on them:

[AI written content starts here]

Prompt 1: Node.js Express Server with Queue Endpoints

Prompt: Write a node.js Express server with two endpoints: a POST /add that adds a text to a queue, and a GET /queue that returns a JSON with the queue and empties it.

Description: This prompt asks for the creation of a Node.js Express server with two endpoints. The first endpoint (POST /add) should handle a POST request to add text to a queue. The second endpoint (GET /queue) should handle a GET request to retrieve the queue and empty it. The goal is to implement a basic queuing system using the provided endpoints.

Prompt 2: Serving Static Files in Express

Prompt: Modify the code so that every request to files in the public/ folder is served as normal files.

Description: This prompt involves modifying the Node.js Express server code to serve static files from a public/ directory. The goal is to ensure that any requests for files within the public/ folder are served as normal files, allowing them to be accessed by clients. This modification will enable the server to serve static content such as HTML, CSS, JavaScript files, images, and other assets stored in the public/ folder.

Prompt 3: HTML Page for POST Submission

Prompt: Write an HTML page to submit a POST with a JSON payload populated with a text taken from a textarea as an input.

Description: In this prompt, the task is to create an HTML page that includes a form with a textarea input. The user will enter some text into the textarea, and upon submission, a POST request with a JSON payload should be sent to the server. The JSON payload should contain the text entered in the textarea. The purpose of this HTML page is to allow users to submit text to the server for further processing or storage.

Prompt 4: Displaying Queue Data Dynamically

Prompt: Write an HTML page that reads data from the queue with an async call every 10 seconds. Display the pieces of text that it reads from the queue in a random font, color, and size, and place them in a random position on the page.

Description: This prompt involves building an HTML page that fetches data from the server’s /queue endpoint every 10 seconds using an asynchronous call. The retrieved data represents a queue, and the goal is to dynamically display the text from the queue on the page. The displayed text should be styled randomly with fonts, colors, and sizes. Additionally, the text should be positioned randomly on the page, creating a visually dynamic and engaging display.

Prompt 5: Generating QR Code SVG for URL

Prompt: Write the HTML code for an SVG image representing a QR code for the URL https://giada.0bl.eu:3000/add.html.

Description: In this prompt, the task is to write the HTML code for an SVG image that represents a QR code for a specific URL. The provided URL is https://giada.0bl.eu:3000/add.html. The generated SVG image should be suitable for displaying a scannable QR code that, when scanned, will direct the user to the provided URL. The QR code is a widely used method for encoding and decoding information, often used for quickly accessing URLs or other data through mobile devices.

[AI written content ends here]

So, thanks to ChatGPT for helping me code this project, but also for helping me write this too long and inflated blog post. I guess you can paste all this into chatGPT and ask it to make a summary of it, in a net-zero information process that earns some money to openAI 🙂

Advanced Mortgage Calculator

 

 

amc

After my first post about a simpler mortgage calculator now I developed a more advanced one, especially designed to compare different mortgages, and calculate which one lets you pay less interest over time.

The app can be found here

amc2

Compared to the last tool, which just calculated the total interests and the installment amount, this app offers these other features:

  • charts of the installments over time
  • capability to add different types of events:
    • interest rate change
    • time renegotiation
    • amortization on time
    • amortization on installment amount

amc4

Adding events makes this tool extremely versatile and allows for simulating complex scenarios. You can compare a 10 year mortgage with a 20 years one in which you reduce the time amortizations with annual cash deposits, or a combination of different interest rates which may happen in some situations. The charts are updated automatically, and there is a comparison chart to make it easy to compare the two mortgages over time, focusing on the interest amount paid.

amc3amc5

Plani3D – Planimetry/map to 3D model

In the last days I’ve been working on this helper software to make it easy to turn a planimetry of a house into a simple 3D model to make it easy to visualize it or any modification you would want to make.

 

plani3deditor

Plani3D

plani3d_conpla

The functionalities are extremely limited and it may be buggy – it was only coded to suit my specific needs.

So far it lets you:

  • Load a custom image (planimetry, map)
  • Define a scale (so the 3d model will have the right measures)
  • Draw 3 types of entity with the mouse
    • Walls
    • Windows
    • Doors
  • Change thickness of walls
  • Generate the 3D model
    • saving the link will let you see it in the future too, the model gets encoded in the url (which could get veeery big)
  • Export the generated model as a GTLF file

Note: no deletion of added walls is possible at this time. Not even editing the generated model. It’s more a rapid prototype tool, doesn’t let you make things precisely.

The project can be tested here.

 

Teenage Engineering PO-33 KO drumset loader app

While there are some projects I’ve been doing lately that I’ve not written here yet, this is one of those I want to write up while it’s still hot – I could easily forget about it.

I recently bought a PO-33 KO by Teenage Engineering, which I think is an incredible music making device. It’s basically a handheld sampler, very easy to use, even if it has some limitations. I’ve been enjoying very much playing with it lately, but that’s not the point of this post! You can go see all the videos out there if you’re interesting in what it is and what it does.

The point of this post is that if you’ve been using it, you know it has some beautiful features, among which there’s the possibility of recording samples with the microphone or the line input. Everything is really fine while recording the melodic slots, but when it comes to recording drum slots, it begins to be a bit difficult to make the PO detect the various slices correctly. There’s a bit of frustation about this in the community, as you can find various videos on Youtube giving tips and tricks on the matter. In the end, it seems to be understood that the process is somewhat buggy, and it’s become accepted that you should probably use some of the available workarounds, like recording first in the melodic slots and then copying the slices to the drum section. By the way, these workarounds are slow and kind of impractical if you want to quickly move some drumset you’ve got on your PC to the PO.

I’ve seen people already doing this in various ways, trying to tackle the problem using other hardware or software which is not specific for the PO, but still the solutions seemed to me a bit suboptimal.

That’s why I wanted to try and solve the problem with a very simple webapp which basically allows to upload a series of sounds and then plays them in a hopefully PO-friendly way. It’s still in very early developement, but I’ve already been able to use it to upload some sample drums I had on my PC to the PO.

Right know it’s still pretty raw, but you can find it here: http://app.dmnk.cloud/po33-loader/

or on the Play Store here: https://play.google.com/store/apps/details?id=cloud.dmnk.po33loader2&hl=en_US&gl=US

Some quick instructions:

  1. press the buttons and select some  audio files representing your slices. You can select multiple files at once and it will place them in consecutive slots. The first sound is placed in every slot because as I understand it’s needed to play all 16 slots if you want a clean slicing.
  2. when you’re ready, press the desired destination drum slot (9-16)  plus the record button on the PO (as normally when you want to record there), and at the same time, start the playback on the app by pressing the red button (you’ll find it in the place of the record button on the PO background image of the app).
  3. you shoud hear all your sounds playing one after another and hopefully if either you’ve connected the PO with a jack-jack cable or you’re just placing it close to your speakers, the PO should be able to slice the sounds correctly.

You’ll notice that the sounds get cut in some cases, that’s because in my tests longer sounds have always been split by the PO in more slices. I decided that this tool should be only used with shorter sounds, more appropriate for the drum slots. If you need something longer, you’d better record it separately on a melodic slot and copy it manually to the drum section afterwards.

I hope this thing will be useful to someone! I may or may not make some improvements in the following days and then I may or may not update this blog post accordingly.

NotesLearn

I recently bought an alto saxophone. It was quite a while I haven’t seriously been playing an instrument, so I came across a little challenge when it was time to read a music sheet. You know, that thing with a pentagram and some notes of various shapes drawn over it.

Since playing a note on the saxophone is not straightforward as it would be on a piano, I actually had two separate challenges: the first was to recognize a note on the pentagram, the second was to play it well (it means play the correct note steadly for some seconds – and in tune).

So I decided to code a little app to aid me doing so. The app is pretty simple: it shows a (random) note on the pentagram, and then listens to the microphone waiting for a note, identifying the pitch and, after some seconds of playing, says if the played note was correct or not. This app has proven quite useful in the process of improving my reading accuracy and speed, and I guess it might be useful to someone else too.

It’s published here: https://dmnk.cloud/noteslearn.

Technical infos

On the technical side, it is entirely coded using Javascript, and has been a cool challenge to code since it was the first time for me interacting with the microphone data on a web app. It uses some advanced Audio features of HTML5, based on the AudioContext component. Recognizing the pitch was a minor issue, obtained by playing a bit with the FFT of the signal, some other challenges included volume thresholding and octave recognition (less trivial).

In the end, the result is pretty usable for my alto sax, even though it may be less accurate if used with other instruments I didn’t test. The piano version is not perfect, for some notes it needs to repeatedly play the key to make the app recognize it. I guess it should work best with constant-volume-notes kind of instruments, like violin or flute, but as I said it was only fully tested with my alto sax.

KangaMex

Hello everyone! It’s been a while since I last wrote a piece on this blog, since that a lot of things changed, but I still want to share some of my experiences with the world.

I’ll be making some brief posts to track some projects I’ve been working to in these almost 2 years of absence.

This post is about KangaMex, a messaging platform which idea is really simple, yet I didn’t find something like it when I needed it. The app is a delayed messaging service, or a service to send messages which will be delivered only at a specified date and time in the future. You write your message, set the unlock date and time, the recipient’s username, and send it. The recipient will be notified that he/she has an upcoming message, but will not be able to see it until the unlock time has come. Very simple, nice way to send delayed messages.

The app is at mex.kanga.life.