My Academic Projects/Works


Fractals with Mandelbrot and Julia sets, using WebGL (FCT NOVA - October 2016)

A 3rd year's project, of the BSc. degree of Computer Sciences and Engineering made in FCT NOVA (Faculty of Sciences and Technology of New University of Lisbon), in the subject of Computer Graphics and Interfaces. This project was built using HTML, CSS, JavaScript and WebGL. The application allows to see Fractals' structures with multiple scales and, using some of the both Benoit Mandelbrot and Gaston Julia's sets, in the canvas of the Web browser!


Instructions:

a) Use 'Q' and 'A' keys dive/emerge;
b) Use click/drag/release in the canvas to move center point;
c) Choose the current Fractal's Set in use (Benoit Mandelbrot or Gaston Julia);
d) Choose also the current Factor to the Scale of the current Fractal in use;

2DFractalsMandelbrotJulia

Fractals with Mandelbrot and Julia sets, using WebGL (FCT NOVA - October 2016)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


3D Object Viewer for Geometric Solids, using WebGL (FCT NOVA - November 2016)

A 3rd year's project, of the BSc. degree of Computer Sciences and Engineering made in FCT NOVA (Faculty of Sciences and Technology of New University of Lisbon), in the subject of Computer Graphics and Interfaces. This project was built using HTML, CSS, JavaScript and WebGL. The application allows to visualize multiple 3D Geometric Solids, viewed by multiple projections and angles. The application allows also, see the 3D Geometric Solids in multiple colors, drawed in white Wired lines and even, painted and iluminated by custom Vertex/Fragment Shaders that the user can upload to the application, all this in the canvas of the Web browser!


Instructions:

a) Choose the pretended Visualization Options (Wired Draw, or Z-Buffer/Depth Test Method and Back Face Culling for Visibility Depth Control) for the current 3D Geometric Solid in use;
b) Choose the current 3D Geometric Solid in use from the available (Cube, Sphere, Quadrangular Pyramid, Torus, Cone and Cylinder);
c) Choose the current 3D Projection in use from the available (Oblique, Axonometric and Perspective) and their settings/adjustments;
d) Choose a custom color for the 3D Geometric Solid in use, by adjusting the colors' factors;
e) Upload custom Vertex/Fragment Shaders, to see the 3D Geometric Solid in use, painted and iluminated, in other ways;

3DObjectViewerGeometricSolids

3D Object Viewer for Geometric Solids using WebGL (FCT NOVA - November 2016)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


3D Object Modelling for an Industrial Automated Robotic Hand, using WebGL (FCT NOVA - December 2016)

A 3rd year's project, of the BSc. degree made in BSc. degree of Computer Sciences and Engineering made in FCT NOVA (Faculty of Sciences and Technology of New University of Lisbon), in the subject of Computer Graphics and Interfaces. This project was built using HTML, CSS, JavaScript and WebGL. The application allows to move and manipulate an Industrial Automated Robotic Hand, all using 3D Modelling and 3D Objects. The Robotic Hand can be moved along the floor, do grab movements and rotate some of its own components. The movements and actions of the Robotic Hand are always performed using the keyboard and you can see all the action of multiple angles, using an Axonometric Projection!


Instructions:

a) Use 'Q' and 'W' keys to rotate the Robotic Hand's arm;
b) Use 'A' and 'S' keys to rotate the Robotic Hand's upper joint;
c) Use 'Z' and 'X' keys to rotate the Robotic Hand's lower joint;
d) Use 'O' and 'P' keys to move the Robotic Hand's claws;
e) Use 'K' and 'L' keys to rotate the Robotic Hand's hand;
f) Use Left Arrow (←) key to move the Robotic Hand's base to the left;
g) Use Right Arrow (→) key to move the Robotic Hand's base to the right;
h) Use Up Arrow (↑) key to move the Robotic Hand's base forward;
i) Use Down Arrow (↓) key to move Robotic Hand's base backward;
j) Choose the pretended Angles Factors (Theta and Gamma Angles) for adjust the settings for the Axonometric Projection;

3DObjectModellingIndustrialAutomatedRoboticHand

3D Object Modelling for an Industrial Automated Robotic Hand, using WebGL (FCT NOVA - December 2016)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


Rotative Shapes' Dance using WebGL (FCT NOVA - October 2017)

A 3rd year's project, of the BSc. degree of Computer Sciences and Engineering made in FCT NOVA (Faculty of Sciences and Technology of New University of Lisbon), in the subject of Computer Graphics and Interfaces. This project was built using HTML, CSS, JavaScript and WebGL. The application allows to create multiple geometric shapes, in permanent rotation, with different colors and sizes and, with blur effect or not, by clicking in the canvas of the Web browser!


Instructions:

a) Click anywhere in the canvas to create a Rotative Shape;
b) Choose the current Shape's color, by adjusting the colors' factors;
c) Choose also the current Geometric Shape in use;
d) Choose the option to allow Blur Edges;
e) Choose the current direction (Clock Direction or the opposite) of the Geometric Shape;

RotativeShapesDance

Rotative Shapes' Dance using WebGL (FCT NOVA - October 2017)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


3D Object Modelling for a Flying Helicopter, using WebGL (FCT NOVA - December 2017)

A 3rd year's project, of the BSc. degree of Computer Sciences and Engineering made in FCT NOVA (Faculty of Sciences and Technology of New University of Lisbon), in the subject of Computer Graphics and Interfaces. This project was built using HTML, CSS, JavaScript and WebGL. The application allows to drive a Flying Helicopter above a city, all using 3D Modelling and 3D Objects. The Flying Helicopter it's drove using the keyboard and you can see all the action of multiple angles, using an Axonometric Projection!


Instructions:

a) Up arrow (↑) key to move up the Flying Helicopter;
b) Down arrow (↓) key to move down the Flying Helicopter;
c) Left arrow (←) key to make a circular move for the Flying Helicopter;
d) Choose the pretended Angles Factors (θ and γ Angles) for adjust the settings for the Axonometric Projection;

3DObjectModellingFlyingHelicopter

3D Object Modelling for a Flying Helicopter, using WebGL (FCT NOVA - December 2017)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


Everyone is a Hero - Mobile App, using Adobe Illustrator, Adobe Photoshop and Unity3D (FEUP - between September 2018 and December 2018)

A 1st year's project, of the MSc. degree of Informatics and Computing Engineering, in FEUP (Faculty of Engineering of University of Porto), in the subject of Software Development. This project was designed in Adobe Illustrator and Adobe Photoshop, and was developed in Unity3D. This project was developed with the collaboration of U.Porto MIL (U.Porto Media Innovation Labs), Bright Digital an IPO-Porto (Instituto Português de Oncologia do Porto). This project aims to offer interactive and appellative support and information to families, educators and volunteers of children who suffer of cancer diseases. Other goal of this app, it's to, in a near future, be linked to the video game app for these same children, called "Hope", that's being also developed by Bright Digital!

This Software & Development project was supervised by Prof. Hugo Sereno Ferreira, Prof. José Vilaça da Silva and Hernâni Zão Oliveria.


Mobile Application’s Versions of the Everyone is a Hero - Mobile App, in 2018:

Documents of the Everyone is a Hero - Mobile App, in 2018:

EveryoneIsAHeroMobileApp

Everyone is a Hero - Mobile App, using Adobe Illustrator, Adobe Photoshop and Unity3D (FEUP - between September 2018 and December 2018)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


My Personal and Self-Made Projects/Works


3D Object Modelling's Solar System with Sun, Planets, Dwarf Planets, Earth's Moon, Planets' Orbits and Trackball Controls, using Three.js (Between January 2019 and March 2019)

A self-made project, using Computer Graphics and 3D Modelling. This project was built using HTML, CSS, JavaScript, WebGL and Three.js. The application gives a vision of our Solar System and all its elements, all using 3D Modelling and 3D Objects. Each element presented (Sun, Planets, Dwarf Planets and Earth's Moon) have its respectively information when the mouse hover above of each one!


Instructions:

a) Press LEFT key in mouse/touchpad and MOVE/DRAG it to rotate;
b) Scroll the MIDDLE key in mouse or PINCH in touchpad to zoom on;
c) Press RIGHT key in mouse/touchpad and MOVE/DRAG it to pan;

It's currently in development (not finished yet)...

3DObjectModellingSolarSystem

3D Object Modelling's Solar System with Sun, Planets, Dwarf Planets, Earth's Moon, Planets' Orbits and Trackball Controls, using Three.js (Between January 2019 and March 2019)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***


3D Object Viewer Demo for Super Mario Bros. Characters, using Three.js and 3D COLLADA (COLLAborative Design Activity) Models (Between January 2019 and July 2019)

A self-made project, using Computer Graphics and 3D Modelling. This project was built using HTML, CSS, JavaScript, WebGL, Three.js and 3D COLLADA (COLLAborative Design Activity) Models from the Mario Kart 8 videogame for Nitendo Wii U. The application allows to view all the characters present in this videogame from Super Mario Bros.' Universe.


Instructions:

a) Select a character;
b) Select the version for the character you choose, if available more than one;

3DObjectViewerSuperMarioBros

3D Object Viewer Demo for Super Mario Bros. Characters, using Three.js and 3D COLLADA (COLLAborative Design Activity) Models (Between January 2019 and July 2019)



*** © Rúben André Barreiro - GitHub's Portfolio/Personal Blog - All rights reserved ***