Francisco Presencia

×
17
Jul
2014

I love Black Boxes

article engineering

Since I was young I've been fascinated with the concept of Black Boxes. Not the plane ones, mind you, I'm talking about Engineering. The concept it's very simple: it's a something that gets something as Input and returns something as Output without the need of revealing the process.

Silly thing you may think. Well, it's actually one of the main advances in many Engineering fields and the one that allows us to bring complex systems to life. It's the a similar concept to encapsulation in programming and the good ol' divide and rule.

A practical example: cars. No one today knows exactly how every part in a car works. However, new cars are being released every day. There's however a team that handles the engine: the more you press the accelerometer (input) the more thrust that is generated (output). When the light sensor (input) detects low luminosity it turns the lights on (output). By considering these simplified systems as black boxes, there's no need for the engine designers to know anything about the lighting system or others, thus there's no one that needs to handle the complexity of the whole system.

This is also the main lesson I learned from Code Complete, a book that I recommend to anyone who already knows the basics of programming and wants to improve.

There are many good designers for the content of the black boxes. They are being poured, year after year, from Universities all around the world. However there's lack of people able to combine them to make things usable. Are you a black box designer? Do you spend most of the time writing code and solving equations or do you organize teams of people? I'm a black box designer myself, but I aspire to join them into something that matters.

×
13
Jul
2014

Pure css chart

After seeing chartjs.org and highcharts.com, I decided to try to do one chart by myself. I achieved this in 1 hour, and I'm happy that it's highly customizable by using pure css, flexible and interactive. The only thing that is missing are vertical labels, however when you hover each bar, you can see the value that you gave to it.

The main differences with other charting tools out there are:

  • Lightweight. No, really. I would call 0.7kb of CSS lightweight.
  • Highly customizable. Being based on CSS changing a color is just background: #FAA;
  • No javascript required. No need for slow computers to load the chart
  • Nice HTML markup. A lightweight PHP class will give you all the HTML you need.

Try the demo

×
10
Apr
2014

Hexapod

experiments collaborative

This is Spidey:

Spidey

The main objective for me was experimenting with rapid prototyping techniques, using materials suited for the task. For this, we used Arduino Mini with an extension shield, 12 servomotors, expanded polystyrene for the main body and some tape for tiding up.

I coded the arduino from the ground up with the sole objective to make it walk. Finally we delivered a more efficient than expected robot. I learned some harsh lessons, like being careful not to cross those legs, the basics of robotic walking and that too many cables can hinder the result.

For the next version:

I will make the code object oriented. Each leg will be an object, then the main Spider will contain the movements as methods and the legs as properties. Finally, after years learning those methaphores about objects and real life things, I will be able to actually use it in that way. I intend to make it walk forward, backwards, turn and something else.

×
6
Apr
2014

Hack for Good

collaborative university

Emi and I got into this programming competition out of the blue for a couple of days, focused around hacking for the good of others. We decided to go for a collaborative newspaper, since we thought it was something lacking in the society and that it was something that many would benefit from. The main idea was the chain of events:

  • Anyone can submit an article.
  • There's a filter with code. The article cannot contain above some % of wrong words. This is mainly to filter spam and trolls, not content.
  • The good enough articles are now in the moderation queue. There anyone can upvote/downvote the content.
  • The best articles of the day get into the main page.

So yes, it was something between Reddit, Wikipedia and StackOverflow. Unfortunately we didn't win, but it was a great learning experience.

×
2
Apr
2014

Html tree visualization

experiments

A project to represent the html of a page in a tree view

Try the demo

×
8
Mar
2014

Radar

experiments university

A small project in processing that plots a radar. It was achieved using an Ultrasound Sensor and a simple Servo Motor. We might use it for a competition, so the code won't be available until it is finished.

×
17
Feb
2014

ひらがな

experiments

This small experiment swaps characters from a text for their hiragana equivalent. It's only valid for Spanish, since the pronunciation it's similar to that of hiragana. You write a text, press a button and it converts some of its characters to hiragana, depending on the difficulty level.

Try the demo

×
18
Jan
2014

Mathematical music

projects university

The goal of this experiment is to understand the building blocks of music. This stems from the lack of a .sva for scalar vector audio and the question "How can we create mathematically perfect music?"

From the Fourier Series, we know that any periodic wave can be decomposed into a sum of periodic sine waves:

$$ s_{N}(x) = \frac{A_0}{2} + \sum_{i=1}^{n} A_n\cdot \sin(\tfrac{2\pi nx}{P}+\phi_n), \quad \scriptstyle \text{for integer}\ N\ \ge\ 1 $$

From wikipedia:

Wikipedia image

This could also be expressed as a sum of sines and cosines; however it's not needed for this case. An example of the equation above and its representation:

$$ f(t) = 0.4 sin (440 x + 1) + 0.2 sin (880 x + 2) + 0.2 sin (1320 x + 4) + 0.2 sin (2200 x + 4) + 0.2 sin (2640 x + 5) $$

Fourier's serie

So far so good. We already have a sound-looking wave. However, this is only when we zoom in. Real world audio waves look more like this:

Real wave shape

So we need to wrap the fourier transform with some decay at the end and some initial growth. The decay is easy, a simple (e ^ {-Bx})will suffice. This approaches 0 for values of t >> 0 and 1 for t ~ 0. For the growing cycle I decided to use (x ^ {A}) as the multiplication term, since it approaches 0 for values of t ~ 0 and the growth is limited when comparing it to the decay. However, these two factors will yield to a odd amplitude. For solving this, we take this wrapping function and make its maximum to be 1. This is the equation for the wrapper and it's representation:

$$ f_w(t) = \left( {B \over A} e \right) ^ {A} \cdot x ^ {A} \cdot e ^ {- B x} $$

Decay wave

So the final formula looks like this:

$$ f(t) = \left( {B \over A} e \right) ^ {A} \cdot x ^ {A} \cdot e ^ {- B x} \cdot \sum sin (n_i F_0 x + \phi_n) $$

It yields this image, which looks and sounds just like instruments sound.

Final shape

Now we need to figure out the coefficients for each instruments and many of them can be recreated without any noise.

×
8
Jan
2014

Unit testing

experiments

I wanted an easy and PHP-only simple unit testing script, so I wrote one. You can see it in action [NOT YET].

At the top left you have all the currently testable classes. At the left-bottom you have the errors that will arise (if any), and on the right you have the test with its possible exceptions.

×
1
Jan
2014

User Manager

projects cryptography

The link for the project: User Manager

I cannot begin to explain how much this project has taught me. I can outline the main challenges I faced anyway. However, in this particular project, each challenge was harder than some other full projects:

  • Refactoring. This is probably the first script I wrote around 3 years ago, when I started learning PHP. I've learned a great deal in the way, so the code was completely refactored aproximately once each 6 months.
  • Security. There are just too many concerns about security and trying to cover them all is daunting, to say little. While I know I haven't covered them all, I am proud of the amount I've covered so far. You can follow the progress of security bugs as I put them in Github.
  • External APIs. Facebook connect, Gmail's implementation of Oauth, Persona, Hotmail, Twitter, VK, etc. I've integrated several services to log in with and failed horrible at few others. Basically, I had to create a system that had the flexibility to support many different login methods, through javascript + php (Persona) or only through PHP (others).
×
23
Dec
2013

Meeting [under construction]

collaborative
Some extra information that is here only to ilustrate the problem. I'd much better be using a WYSIWYG program by now to add all of this amount of text.
×
15
Dec
2013

Matrix

experiments

I still remember how much the movie changed my train of thought back then. As a web programmer, I don't have much time to experiment with graphics as other people in videogames, optimizing frames or having a timer is something I was completely unaware of until I decided to try creating the Matrix.

It has been a great learning experience since now I know something about:

  • Handling real time graphics and colors
  • Updating the render screen on each frame
  • Optimization. Everything that is outside the screen should be deleted

What seemed like a simple task turned out to be much more complicated than I foresaw. Color gradients with javascript, clearing the characters outside the screen and precomputing how many columns would be were some of the things I had to do to make it work.

The Matrix for me it's a movie that changed part of my beliefs, but other people also have their own Matrix. What form does your Matrix take? Maybe a novel or a terror story?

Enter the Matrix

×
15
Dec
2013

HTML preprocessor

experiments

The link for the experiment: HTML Preprocessor.

Some documentations still needs to be done; however this is just a small personal experiment, nothing serious. I just want to learn about documentation now.

TODO: Integrate markdown easily (maybe just using the @ as normal text) because of the reasons outlined here: HAML sucks for content

×
10
Dec
2013

AdventurOS page

project collaborative

The link for the game's page: Adventuros

×
5
Dec
2013

Neural Network

university collaborative

The link for the project: Neural Network

×
7
Nov
2013

Robotic Contest

collaborative experiments

The link for the article in my university news (in Spanish): UPV News

×
25
Oct
2013

Creation of francisco.io

projects
Note: this is for the old version of Francisco.io

I have learned a lot creating this page. These are the main challenges that I faced while creating the web:

  • The back button. When you are viewing a #smth entry there's no easy way to detect when you click the back button. So I had to set up a background process in javascript with a non-consuming interval to check whether the page should change to the main one or not.
  • Sprites. While it's okay for a page like this to load few more images than needed, it is not okay for a big, intensive page. So I decided to over-optimize this site for the sake of learning about it. Also, minimization is in place.

Also, I had some great

×
4
Feb
2013

Secret Diary

projects cryptography

A project where I learned how to properly encrypt/decrypt data using the Rijndael algorithm, which is the strongest cipher known to date.

×
1
Jan
2009

Physics Olympics winner

university

The link for the news in Spanish: UV News