PROYECT 4 – 2D/3D/4D


I started this super-motivated project with many ambitious ideas, which have gradually been reduced to more realistic results. I left Unity aside even though I wanted to go deeper in the future. I have focused on Proccessing because it is more related to external interactivity, from different sources. And it is also more complex when it comes to programming. This is another reason why I chose Proccessing to loosen up more with the programming.


My game is about an online node that wants to get all the data on the planet to take control of humanity. And it has to get as much data as possible from the different platforms that are known to everyone.

The idea of this game is that it would be combined with video mapping and people could interact with the game directly by moving their body.

So far, so good… But I found it very difficult to start working… the simple things like the movement of a sphere in proccessing or the displacement of an object with the keyboard, has made me take longer than expected



Given my limited knowledge of programming it’s taking me a long time to get what I want from the game. But on the other hand I’m starting to understand the basic concepts such as what One Class is, a builder, a function and how to use them.

The most complicated thing for me is to make good use of the arrays. I feel that I don’t get enough out of them.

Luckily I already have my main character moving in the X-axis and releasing independent projects from his position.

I also have different Spwane objects appearing from above, but I think I’ll have to change the way I’m creating them because it’s all the time the same object appearing in different places. However, the projectiles are totally independent objects. And why haven’t I done the same with the enemies? Because at the time of creating the enemies I didn’t know any other way to make them.



After that I had something to play with, but I didn’t really have anything, just a character moving around shooting projectiles and other objects spawning from top but without interaction!

So I was thinking for a long time to check ALL MY PROJECTILES AND MY SPAWN OBJECTS in real time and know if any of them comes in contact with another one of them.

The first thing I did was study more about objects, classes and functions. Then I transformed my projectiles and my enemies into different classes with their builders and functions.



This is where I start generating new objects for every time I press a key that causes a new object to be created and added to an ArrayList.
ArrayList enemies = new ArrayList();
And of course why I don’t use a normal Array instead of an ArrayList, because I tried it and it’s more complicated. Difficult for my current skills. However I can use ArrayList as if they were normal arrays, and also with extra functions like add(), which adds an object to the array and increases its total length! Likewise if I use remove(), I remove an element from the ArrayList and modify its total length as well! This is great! With only one line of code!

ArrayList<enemies> enems = new ArrayList<enemies>();
// contador para spawnear nuevos enemigos
  if (frameCount % 120 == 0 || spawn > 98 ){
    ene1 = new enemies();
  player.display(); // player controller

After this I discovered that by using a for I could show all my projectiles at the same time. And I did the same with the enemies

for (int i = 0; i< projs.size(); i++){
    //println("  Projectile nº: " + i + " Position : " + projs.get(i).pos);

Now I only needed the “simple” ones, to delete the objects from the array when they are intercepted or disappear from the screen. This process took me several long days.

I was going to post the code, but I don’t think anyone’s going to take that long to figure it out.

Once I managed to finish making it work, I implemented a point system for those functions to have a “solid” Prototype with which to continue adding material to it.


I was a little scared because I didn’t know what to use as 3D since I was working on a 2D project… But I came up with a great idea! To create a StartScreen for the prototype that was in 3D! So I was researching and watching several videos about processing and 3D, I have to say that it is VERY complicated and it takes a relatively good level of Arithmetic and Trigonometry. But there’s nothing you can’t learn by putting in the time and effort! Luckily I discovered that in the College Library there is a book called “Processing, A programming HandBook for Visual Designers and Artists” and there I learned a lot about sin(), cos(), pow()… And more that I will learn!

I thought a couple of objects in a 3D environment with a little text wouldn’t cost me much… 250 LINES OF CODE!

The first I got something that at first glance does not seem much but … only the cube and its movement with the mouse is 98% of the function StartScreen()!!!

The cube was difficult because I didn’t use any primitives! I created 8 points on the x,y,z axis and then linked them with lines. A lot of work but I can use each part of my cube individually, or use it all at once.


With the sound I had clear what I needed from the beginning, a background as a base. And some more for the movement, the shooting and the destruction. What I was looking for in this section was to go deeper into the capabilities of Processing.

I wanted a sound with rhythm, to bring out its sound spectrum, with 4 bands is more than enough. and to use the amplitude of each band as input for the temporal size of my enemies in real time.

Everything magnificent to work! But I see that it doesn’t work on the . mp3 and .wav files… I investigate and discover that Processing by default only takes AIFF files! So with Audition and Media Encoder I took my files and exported them again with the format I wanted and crossed out!

After that I only had to load the files following the Processing.Sound documentation and I haven’t had many problems to implement them, since my special effects are directly related to events I already have programmed in the game. I only had to go to each part and play each sound with a simple


Processing has in its sound library a function called FFT that analyzes the waveform of an audio.

I’ve only taken four to load minus the program. This function does if you put it inside Draw() it analyzes in real time the audio track and updates at the same time all the values in an Array in this case Array[4] where 4 is the number of bands we have chosen previously. Then we have to normalize those numbers because they give us a few useful raw results. And then we will assign them to the size of our enemies in real time!

I leave an exaggerated example to be understood, this will not exist in the final Prototype.

Dots resizing by the low amplitude of a song

Finals Conclusion

This project has challenged me and I have learned a lot, but I have not focused as much on my audience. I have decided to focus more on my needs as a designer, programmer, artist or whatever. It doesn’t help that I know how to solve a problem with a specific target. If I don’t have enough skills to develop the problem. I think we need to develop more our skills as individuals and create what we like. And not create for others to like. Following this methodology only reaches people in a cold way.

When a person creates something they should create it in which they would like to transmit to the world based on their point of view and their philosophy. The targets that we seem to be talking about are enemies rather than people will appear on their own if you create things with desire and good energy. No pressure, no stress. Because then all that is reflected in your work.

For my part, I know that the Prototype I have designed is far from being something consistent, leaving aside the visual design that I have not spent much time on, I have developed my programming skills a lot. And that make me very happy.

0001/0002 Workshop – C.R.A.P

Task of this week I’m working in design posters banners and webs using the basics design priciples.


First we need to understand propely this principles to apply that in our profesional or personal proyects. There is like kind of Laws of Grafic Design that works and if you know how to follow you can create Easy, Friendly dinamics Design that can Convey feeling emotions ….

For this task I have decided not to spend much time on the background. I preferred to focus on the content and how it should be distributed. I have also thought about the colors and how to play with them because it is one of my weaknesses.

After looking for several examples of inspiration I have decided to use Oranges, Browns and Yellows as a base color. And to generate contrast the blues.

Banner- Task
Poster – SteamPunk


Alejandra Ávila. (2019). 4 Principios básicos de diseño para diseñadores instruccionales.

Available at:

4 Principios básicos de diseño para diseñadores instruccionales
[Accessed 18 Dec. 2019].


What’s the plot?

Higgs Logo

A scientist Called Hipo has emulated the creation of the Univierse and the birth of the Human in a virtual machine.

But now Hipo encounters a serious problem! Virtual scientists try to discover the Boson of Higgs.

But if they do, they could make the real and virtual universe collapse into a temporary PARADOX!!

Hipo has too much sympathy for his virtual world to erase it, so he only has one way to remedy it. Interfering without humans realizing they are really a Virtual Machine!

To do this the Hipo will use the elements of nature to go undetected and save Higgs Bosson from being discovered!

Target specs:

Genre: Puzzle-Strategy
Target Rating: PEGI 3
Target Systems: Pc/Android/IOs
Average Game Lenght: 365

Promotion Video

Game Play

Short Mecanics

Its a click, drag and drop game. In which the player must decide between the 4 elements or the combination of them to complete each different level.

In each level you will find different challenges and Enemies in which you will be able to test your God Skills.

It is an evolutionary game in which the Higgs will change his attributes throughout his advancement.

It all depends on how you use your skills. Do you want to be good? or…?


WorkShop 0005 StoryTelling

I have enjoyed this Workshop a lot, and I would have enjoyed it more if I hadn’t had to start it again 3 times. The first time, I forgot to save it, or I didn’t save it, I don’t remember it well. And the second time I had a weird supper bug in which all the Passages() were blocked and I couldn’t edit them.

But anyway I have to say that repeating it 3 times has helped me to find out how many macros, code, css and ways to tell a story work.

Root – Interactive History.

For my interactive story I’ve been a little inspired by the game “The Standly Parable.” Or somehow try to show the Narration as they did in this game. I have discovered that it is not easy to tell a story with rhythm, only with words and a few links… You need to get the person’s attention and not get bored. On this subject I have to investigate and learn even more.

On the other hand I have seen that Twine is a great tool, not only to create Interactive Stories, but as Story board with code. This is great. Because I see it as a great way to prepare your projects, and then move them to other platforms.

//Three Act Structure

It took me a long time to get started. I knew approximately what I wanted to tell, but I didn’t know which way to go or which routes I wanted, how many characters, if my characters were going to talk a lot or not. The only thing that was relatively clear was the protagonist and the finals.

It was stuck and I couldn’t go on. But thanks to my partner Elisabella I managed to continue my interactive story. She recommended me to do the Three Act structure. And there to go putting the strongest points of my history. And from then on I added more and more information, more text and more possibilities.

This methodology for narrative has enchanted me, it has made me see that stories can be taken out of the mind, in a more orderly and meaningful way.

Walking Dead

The Standly Parable

// Time Code

:: StoryTitle
Delayed Text in SugarCube

:: Start
<<timed 5s>>
It has been 5 seconds. Show the text!

//Locks and Doors

:: StoryTitle
Lock and Key: Variable in SugarCube

:: Start
<<set $key to false>>

[[Back Room]]
[[Front Room]]

:: Back Room
<<if $key is false>>
    <<linkreplace "Pick up the key">><<set $key to true>>You have a key.<</linkreplace>>
    There is nothing here.

[[Front Room]]

:: Front Room
<<if $key is true>>
    Locked Door

[[Back Room]]

:: Exit
You found the key and went through the door!
<<link "Open dialog!">>
        Dialog.setup("Dialog");"Text within the dialog window");;

//Open Dialog

I used that Script to open a window, when pick up a object.

// Stadistics

This code modifies variables on screen, and updates them, to check them later. Although I have not used this code, I have left it here because I found it interesting enough to use in the future. Who knows.

:: StoryTitle
Player Statistics in SugarCube

:: Start
Empathy: \
<<link "[+]">>
    <<if $totalPoints gt 0>>
      <<set $empathy++>>
      <<set $totalPoints-->>
      <<replace "#empathyStat">><<print $empathy>><</replace>>
      <<replace "#pointsStat">><<print $totalPoints>><</replace>>
<<link "[-]">>
    <<if $empathy gt 0>>
      <<set $empathy-->>
      <<set $totalPoints++>>
      <<replace "#empathyStat">><<print $empathy>><</replace>>
      <<replace "#pointsStat">><<print $totalPoints>><</replace>>
Intelligence: \
<<link "[+]">>
    <<if $totalPoints gt 0>>
      <<set $intelligence++>>
      <<set $totalPoints-->>
      <<replace "#intelligenceStat">><<print $intelligence>><</replace>>
      <<replace "#pointsStat">><<print $totalPoints>><</replace>>
<<link "[-]">>
    <<if $intelligence gt 0>>
      <<set $intelligence-->>
      <<set $totalPoints++>>
      <<replace "#intelligenceStat">><<print $intelligence>><</replace>>
      <<replace "#pointsStat">><<print $totalPoints>><</replace>>
<<link "[Reset Points]">>
    <<set $empathy to 10>>
    <<set $intelligence to 10>>
    <<set $totalPoints to 5>>
    <<replace "#empathyStat">><<print $empathy>><</replace>>
    <<replace "#intelligenceStat">><<print $intelligence>><</replace>>
    <<replace "#pointsStat">><<print $totalPoints>><</replace>>

Empathy: <span id="empathyStat">10</span>
Intelligence: <span id="intelligenceStat">10</span>
Remaining Points: <span id="pointsStat">5</span>

[[Test Stats]]

:: StoryInit
<<set $empathy to 10>>
<<set $intelligence to 10>>
<<set $totalPoints to 5>>

:: Test Stats
<<linkreplace "Make an intelligence check?">>
    <<set _result to random(1, 6) + $intelligence >>
    <<if _result gte 15>>
    Intelligence Success! (_result >= 15)
    Intelligence Failure! (_result < 15)
<<linkreplace "Make an empathy check?">>
    <<set _result to random(1, 6) + $empathy >>
    <<if _result gte 15>>
    Emaphy Success! (_result >= 15)
    Empathy Failure! (_result < 15)


:: StoryTitle
Programmatic Undo in SugarCube

:: Start
[[Enter the Darkness]]

:: Enter the Darkness
<<back "You are not ready! Go back!">>

//Creating Headers And Footers

//You have to create a Passage with name as showing down.

:: StoryTitle
SugarCube: Headers and Footers

:: Start
This is content between the header and the footer.

:: PassageHeader
This is the header!

:: PassageFooter
This is the footer!

I wanted to create a Header on all pages because I want the player to have access to his inventory at all times. and be able to go back and continue.

I have also added an If to check if the current passage is inventory, so that the inventory link does not appear in inventory….. Loop!

// AddItemsInventory

After a little research I finally found a way to add items to my inventory with a click! the command I used is <> that receives text, and you can add in half what you want to happen when the player clicks. In my case I have added it.

<<if $inventory.indexOf("Scissors") == -1>>
		<<link "There is a Scissors here. ">>
		<<addToInv "Scissors">>
                <<goto [[Scissor]]>>
<<set $pass to previous()>>
	<<if previous() is "izquierda">>
			<<if $bucle === 2>>
			<<set $bucle to $bucle + 1>>
				2 [[izquierda]] 
				vamos por el <<print $bucle>> paso

		1 [[izquierda]] 

//RnG Choice

The moment Thinky leaves the house he has to decide whether or not to dodge! This attempt to dodge I have generated with the random() function, then check if X has come out, send it to a step and if it has generated another send it to another side.

The Code finally look like that:

	<<set _esquivar to random(2)>>
		<<if _esquivar is 0>> 
			<<set _out to "correr">>
			<<set _text to "Consiguio agacharse rapidapente y esquivarlo, el hombre tropezo, y se callo al suelo. Thinky aprovecho para ">>
			<<set _out to "Continuar">>
			<<set _text to "Thinky intento exquivarlo como pudo, pero fue demasiado lento y fue empujado hacia la carretera. ">>
                <<linkappend "esquivar. " t8n>>
                   <<print _text>> <<link _out>><<goto _out>><</link>>

//Funcion previous()

Using this function I’m giving dynamism to the story so that the character passing through the same places, have different events. But I have discovered a problem. And is that if you return with the macro <<back “back”>>, the function does not save anything.

So instead you have to use [[Back|”passage”]], using it so if you load the name.




// Twine Hosts

Music: Baclou [Full Length Dark Ambient Album], Moloch Conspiracy

Workshop 0004 Retro Game Challenge

// From Bomberman To Umai. ^^

I decided to make Bomberman, a game that reminds me of my childhood and was apparently easy to create with the naked eye.

But it turned out to be much more complex than I expected, collision mechanics that don’t work or can’t be done in arcade.makecode.

I felt very frustrated in not having anything solid finished, the basic mechanics of the game I could not create.

Since I didn’t know exactly how to get the exact collisions I used a way to trace my character’s position in real time.

I found on the internet that precisely in arcade.makecode there is a bug, where exactly was my problem. And apparently nobody has been able to solve it. The problem comes from the collision between Sprites(Projectiles) and Tales(Wall). When a Sprite is emitted from the player position, if the player is near Tale(wall), the projectile is not generated. Although the Wall Function is Off.

Why is this a problem?
Because bomberman has to put bombs close to the walls to break them. but when put close they are not generated.

Another problem I found was how to edit the walls when the explosion touches them.


After hours and hours of trying to put the game mechanics to work I have to say that I have surrendered… but here we welcome Umai. A small and intrepid adventurer with a mission!

I created a simple game, in which I distribute the objects through several loops depending on the colors of the Tile map, I have achieved that the player can not jump eternally putting a “If Sprite = Not in wall“, to code because it did not allow me the puzzle.

The function that I have taught the most time I could say that it is “to kill and not be killed” by the puppies.

Simple if to dont permit our character fly.

After all this I think I’ll start to understand better how maps and characters are generated in a game in a more automated way thanks to Loops and Arrays, this way I can generate many different maps with the same material.

And thas also to kill the player if go down the holes in the map, And the Win condition.


As a lesson from this work I have come to the conclusion that not everything is as easy as it seems. And it takes a lot of time and clarity to create a game in a decent and effective way. Sometimes it’s better to change your objective if you’re not solving it than to frustrate yourself in something that will cost you too much time and energy. Equally everything is learned. And I take with me many constructions of learned mechanics.

Starting With MicroBit

What its Microbit?

Microbit is an intermediate programming language that helps to develop Java through Blocks. And experiment with the device both virtually and physically.

Cach the ball

Today we have been doing different tutorials, to better understand how programming languages work at a more basic level.

Simple Animation

Researching with my partner we saw that there was also the possibility of programming with python.

But nothing here about Blocks, Just Coding and Export.

But if I have seen that there is much more documentation in some aspects

Stay On!(Balance) MicroBit

After doing several tutorials and a little curiosity how this small machine worked. I decided to try to make a game on my own using only the Acelorometer as Input.

The Game mechanics its simple

  1. If Player stay on the mid Led, you add Point To your Score.
  2. If Player stay arround but not in walls nothing happens. (still alive).
  3. If Player collision with walls lose Lives.

Getting Started

I’ve started initializing my variables. Score to 0 which is the player’s initial score, I set the position of the Sprite to X:2 Y:3. I have decided to put it in this position and not in the middle so that the player does not start picking up points and has to move from the beginning.


And to finish the beginning of the game I set the Game variable as true and the Equilibrium variable to 10 that count how many time the sprite colision with walls.

Now let’s go with the Block forever. I’ve decided to put it all inside a While.
That later I will talk about how to balance the rest of the points.
So in the While, I create a Variable called XMov, to move my sprite by X and call the acceleration input (mg) of X.

Reading the Documentation I saw that this input (acceleration (mg)) returns a range of +/-2000.

Then I check if XMov is -50, if it is the case I change the direction of Sprite from X to -1 and so I get the sprite to move to the left.
and pause so the game doesn’t go so fast.

I repeat the same previous action but this time I check if it is over 50 and change X sprite by 1 to go to the right. I decided to put 50 because if I put it lower the sensivity was too high and could not be controlled.

We also repeated the same action for Y.

Move sprite on X
Move Sprite on Y

And now that we have the movement of the sprite we will check when we want to increase the score or remove balance. I have done it with Several if. the First check if the Sprite is in the coordinates 2.2. If so, add Score, Score +3 (I like the number 3) and put a happy Sprite.

If not, I paused the game a little bit so that the player if he leaves the wall quickly does not lose life. And then I check if Sprite is at X=0, or Y=4, or X=4 or Y=0. If any of the above if true it means that the sprite is touching the wall therefore to the balance variable the rest -1, and I put the fail icon.

If equilibrium reaches 0 it exits While, erases the screen, and then shows the string “Score” and the Variable Score.

Reset Game

ahh I also set the A+B entry to Reset the game.

This would be the beginning, after here you could add more levels of difficulty the longer you are without dying. changing the sensivity.

My first contact with something more structured made in microbit, has been a small challenge, I have encountered difficulties in how to manage the walls but in the end I managed to make it work after several tests and calibrations.