Arturo Fonseca

How Pointers Work

When I saw my colleagues struggling with the concepts of pointers in introductory programming classes, I thought of writing a program that could help them visualize what happens in the computer's memory when they run their programs.

So 2 years ago I started making a website that shows memory allocation of variables and their pointers as they are typed into a console.

As of now it can identify declaration and assignment of variables and pointers and their types, as well as dereferencing of pointers. It cannot yet identify arrays (which are sort of pointers, important ones!). I plan to use Vue.js to manage the visualization of the memory cells instead of p5.js and to finish it this year.

I talk more about it in the project's page below.

Code

Ecoleta (React)

This site was developed following the first edition of the brazilian Next Level Week online event organised by Rocketseat. This event was free to the public and consisted of 5 videos posted over a period of one week, teaching concepts of front and backend while collaboratively developing a website about finding solid waste collection points near you.

The backend consisted of a restful API made with NodeJS and the frontend was made with the JavaScript library React. I was very proud of the small modifications I made to the original project. You can check them out on the project's page by clicking the button below:

Code

Converter (Vue.js)

This is one of many small projects that I did while learning for the first time Vue.js, a JavaScript's framework for building frontend interfaces. I did it following a video from Programador BR but soon I got carried away with the reactiveness of the data biding that Vue offer and tried to exploit it as much as I could.

In this currency converter you can choose a base currency and type the value that you want to convert from in the top text field. As you type, the value is instantaneously converted to three main different currencies: the US Dollar, Euro and Canadian Dollar. But at each box of these types of currency you can type individual values just for their type. Also, the inversion conversion is available in three more boxes below.

Code

(Re)learning Vue.js

After 3 years of my first Vue.js projects, I felt the need to re-learn it from the beginning, starting from the Vue 2 guide. After running through the basics (conditional rendering, data biding, computed properties, etc) with a CDN script I wanted to try making Vue's Single File Components without using Vue's CLI, with the intention of learning all the little parts that make possible frontend web development of complex applications.

So, using this guide, I learned how to configure Webpack and Babel for bundling and (trans)compiling all the JS and Vue's files in a way that browsers can understand.

For the final stage of this project I plan to read the guide of Vue version 3 and use it with the CLI this time. It will be also a preparation for keep going with my HowPointersWork project.

Code

First Spring project

I made this site back in 2020, when I was trying get into a project funded by my university (and the federal Ministry of Health!) and this was part of their admission process. I passed and stayed in the project for almost 2 years.

It's about a school management system where you can do CRUD operations on classes (Turma), teachers (Professor) and students (Aluno).

It follows the MVC pattern: the backend was made with Java + Spring and uses PostgreSQL as the database manager while the frontend was made with basic HTML/CSS with Thymeleaf.

Curiosity: I wanted to show off my CSS skills so, for a moment during development, the version below existed:

Code

Selo ou não sê-lo (Tumblr)

My sister, Luiza Fonseca, is a visual artist and designer who sometimes asks me for help when she needs to make a website. It was no different when she had to do a project about making collective art while connecting different artists through letters!

She designed the entire site beforehand and decided to use the Tumblr platform to host it (which was a bit challenging due to its limitations, but less so than I had imagined). From there, I tried to implement it as close to her vision as possible. The titles and even the look of the cursor were drawn by her, creating a really unique look.

One small thing that I enjoyed doing in this project was the navigation drawer for mobile. I saw somewhere a menu icon that transformed itself in a close button and I really wanted to try with pure CSS. It worked, as you can see below.

The name of the site is a pun in portuguese referencing the famous Shakespeare's phrase "to be or not to be" using the word for "stamp" which is "selo" in brazilian portuguese.

Site

This very own website

This portfolio was made motivated by the Summer Geometry Initiative (SGI) by the Massachusetts Institute of Technology (MIT): a six-week summer research program about geometry processing. Unfortunately I didn't enter the program, but all the experience that I adquired in the proccess was extremely valueable for me. This site it's a proof of that! :)

I made it without much JavaScript (or any of its frameworks/libraries) and tried to keep it simple and a little bit unique. During development, I focused in learning how to develop accessible websites, especially for people who use the keyboard and screen readers to navigate on the web.

Well, actually I use one JS library in this site which is the MathJax library for displaying mathematical equations written in \( \LaTeX\) which is also accessible to screen reader users.

Code

Triangle Lerp

This one I've taken from a Twitter thread by Freya Holmér. I was used to the idea of linear interpolation for the Drawing Project, but I had never heard of interpolating between three points at the time.

As Freya says in her thread, to calculate the influence of each triangle vertex in an arbitrary point you have to take the area of the inner triangle opposite to that vertex. Then calculate the percentage of that area relative to the total area of the larger triangle.

A similar approach was used in the Ray Tracer project to make surfaces appear smoother in triangle meshes (Phong Shading).

Code

Times table

...times table? That's right! The GIF in the thumbnail is simply a 2 times table, where each point on the circumference is a number and each line connects a number to its double. Thus, 2 connects to 4, 3 connects to 6, and so on. In the image below we only have 12 numbers. So, from 6 and beyond we do what's called clock arithmetic, or more precisely, modular arithmetic. 0 is 12, 1 is 13, 2 is 14, and so on... This relation between the numbers is called congruence. That's why 6 connects to 0 and 7 connects to 2. We can call it the 2 times table module 12:

I discovered this in the Mathologer video. When you add more numbers, i.e., change the module, a cardioid starts to appear in the 2 times table:

And when you choose bigger numbers to represent their times table, intriguing patterns starts to appear:

Code

Vector field

I was first introduced to p5.js through the videos of Daniel Shiffman, one of the directors of The Processing Foundation. In his channel on YouTube, The Coding Train, I learned not only about the methods of p5.js but also the math and algorithms behind them.

As explained in the Coding Train playlist, Perlin noise is a random number generator where each number that it outputs is relatively close to the numbers that came before and after it.

In my code, I use these values to represent the angle of rotation of each tiny bar, which you can see in the GIF below. I use the sin function to map the colors blue and red to their rotation.

Code

Light and shadow

This one I got from the Nicky Case's article Sight and Light. It is all about how you can simulate light and its shadows for games. I had followed just half of the tutorial and produced the interaction below:

Play it Stop

Ah, I also have done this... thing:

Code

Julia sets

The Mandelbrot set is a set of complex numbers that look pretty when plotted in a complex plane like the one below:

To generate this is relative simple. It all boils down to the function below:

\(f_c(z) = z^2 + c\)

We will talk about the both complex numbers \(z\) and \(c\) soon. First, we need another pair of numbers:

• A positive number greater than 2. Let's call it the threshold;
• Another positive number. This time a larger one. This will be our number of iterations.

Now, we apply our function recursively to each pixel of an image representing the complex plane. We do this by making \(c\) the coordinate of the current pixel and \(z\) starting with the value \(0 + 0i\). As we iterate, \(z\) may or may not grow beyond our threshold. If it gets there before we reach the number of iterations, we stop the recursion and paint the pixel white. If not, we paint it black. That's it!

And Julia sets are almost the same thing, with \(c\) and \(z\) switching places, i.e., \(z\) will represent a pixel coordinate while \(c\) will be... an arbitrary constant! For each \(c\) we choose at the start of our process, we can make entirely different sets. Each of them possessing a unique complexity and beauty. And for making things even prettier we can add a little bit of math magic to the RGB values, changing them by how fast some of the inputs can reach our threshold, like the image below made with \(c = 0 - 0.8i\):

Finally, the GIF of the thumbnail of this project was made by changing \(c\) as the coordinates of the cursor. So at each new position of the mouse the function iterated thought all the pixels to render the image for that particular set. To save the processor, I made the function skip some pixels. This is why the colors are a bit washed out.

Code

Spirals

Matt Henderson's thread on Twitter about Euler spirals inspired me in this one.

It is really as simple as the description suggests: draw a line, rotate a certain angle, draw another line. But with each repetition, you add this certain angle, accumulating it. In the end you have a approximation of an Euler Spiral. And, if you choose the right angle you can have a Euler Spiral made of little Euler Spirals:

Code

Fourier series

The Fourier series it's a way of using sine and cosine functions to approximate other functions when summed, a bit like the Taylor series, which many learn in the Calculus course in university.

A very famous example on the internet are GIFs that show the Fourier series being used to express a square wave from sin functions. They beautifully represent the sines functions being added as circles that rotate around themselves, with different frequencies. So I tried to do the same, but interactively, with the help of Coding Train's video.

You can click the button below if you want to play with the visualization. Just be careful with the amount of circles you add if you are not in a "powerful" computer. I wouldn't recommend above 1000.

Play it Stop Code

Ray Tracer

This project was developed by me and my friend João Vítor throughout the course of Computer Graphics, taught by professor Selan Rodrigues dos Santos. It creates images representing 3D scenes described by XML files. All of this using the magic of ray tracing.

Ray tracing is a technique used to create 3D images where photo-realism is desired. It works by simulating photons of light as rays (vectors) that are shot at the scene from the viewer's perspective. The rays then travel through the scene being reflected, refracted or absorbed by objects. All of these interactions are calculated for each pixel of the image, defining its final color.

Doing this project was challenging because of its size. We had to take into account the camera, objects and their interactions with rays, different types of lights, different light models, parsing XML files and .obj files... At the same time it was very rewarding because at each step we could see the result of what we had done at that point.

In the end, we couldn't believe the images that our own program made! The (optional) spherical background made the reflective surfaces much more interesting!

Code

Drawing Project

This was the final project of the course Introduction to Programming Techniques, taught by professor Gustavo Girão in my second period. It was made by me and my friend Artur Santiago in the C programming language.

It's about drawing raster images in the PPM format with commands in a textfile. This is what it can draw:

• Lines;
• Circles;
• Rectangles;
• Bézier curves;
• Random Bézier curves!;
• Regular polygons;
• Fill tool.

I was amazed by how drawing lines in a computer screen was more complex than I thought. This was the first "big" project that I participated and it was a great learning experience about planning, implementing and organizing a project in group.

Code

Som Imaginário

This was the final project of the Embedded Systems course taught by Professor Mônica Magalhães Pereira.

It's an educational game about the physics of sound and how humans can perceive its origin. It is intended for primary and secondary school classrooms. The device, made with Arduino, two sound sensors, an LCD, a potentiometer and one stepper motor can indicate the origin of loud sounds, by measuring the difference in the time it takes for the sound to reach each sensor.

One of the game modes involves someone clapping their hands while the device tries to point to their location. Since the device only has 2 sound sensors, it can point to the opposite location of a particular sound. This can lead to discussions about why the device behaves like that and how it knows where to point to.

I was inspired by a video from the Smarter Every Day YouTube channel, as well as a video from Steve Mould's channel.

The game also involved a mobile app that I couldn't implement in time. Below there are some screens that I prototyped:

PS: The name of the project it's a reference to a brazilian band from the 70's.

Code