Colordoku3D: puzzle 3D para desarrollar tu percepción del color

Abstract

[ES] El presente Trabajo Fin de Grado consiste en el diseño y desarrollo de un juego con fines educativos para los alumnos del Máster Habilitante en Arquitectura. La finalidad del juego es mejorar la percepción sobre el color y sus cualidades en los alumnos, usando recursos propios de su ámbito como el espacio tridimensional, la geometría descriptiva y el espacio de color. El juego consiste en la resolución de puzles de color entramados sobre las caras de figuras geométricas representadas en tres dimensiones. El objetivo que se ha de perseguir para completar los puzles es seguir la relación que se observa entre los colores y colorear las caras de la figura de manera que cada cara esté pintada de un color relacionado con el de sus caras colindantes. El concepto de espacio de color estará ligado a esta forma de resolución del puzle y es otro objetivo de aprendizaje del juego. El juego está implementado como una aplicación móvil para facilitar el acceso a los alumnos y su práctica en cualquier momento. Se estudian los distintos tipos de aplicación móvil, optando por un desarrollo híbrido para asegurar la accesibilidad al alumno independientemente de cuál sea el sistema operativo de su teléfono móvil. A nivel técnico, el desarrollo se ha realizado con el framework Ionic junto a las tecnologías web. Además, los gráficos 3D se han implementado mediante la librería Three.js de JavaScript y se hace uso del espacio de color HSL.

[EN] This final project involves the design and development of a game for educational purposes which is designed for use by students of the Enabling Architecture Master. The purpose of the game is to improve their perception of colour as well as its qualities, using resources from their area of expertise, such as three-dimensional space, descriptive geometry and the colour space. The game consists of solving colour puzzles placed on the faces of geometrical figures, which are represented in three dimensions. In order to complete the puzzles, it's necessary to follow the relationship between the colours and to colour the faces of the figures so that every face is painted with a colour that is related to the colours of the adjoining faces. The concept of colour space is associated with solving the puzzle and, therefore, is another learning goal of the game. The game is deployed as a mobile application to facilitate access for students and make it available at any time. After studying the different types of mobile applications, a 3 hybrid development was chosen in order to guarantee accessibility for students no matter which mobile operating system it runs on. At the technical level, the development has been completed using the Ionic Framework together with other web technologies. Besides, 3D graphics have been implemented using the Three.js Javascript library and using the HSL colour space.

[CA] El present Treball de Fi de Grau consisteix en el disseny i desenvolupament d'un joc amb finalitats educatives per als alumnes del Màster Habilitant en Arquitectura. La finalitat del joc és millorar la percepció sobre el color i les seues qualitats en els alumnes, usant recursos propis del seu àmbit com l'espai tridimensional, la geometria descriptiva i l'espai de color. El joc consisteix en la resolució de puzles de color entramats sobre les cares de figures geomètriques representades en tres dimensions. L'objectiu que s'ha de perseguir per a completar els puzles és seguir la relació que s'observa entre els colors i acolorir les cares de la figura de manera que cada cara estiga pintada d'un color relacionat amb el de les seues cares confrontants. El concepte d'espai de color estarà lligat a la forma de resolució del puzle i és un altre objectiu d'aprenentatge del joc. El joc està implementat com una aplicació mòbil per a facilitar l'accés als alumnes i la seua pràctica en qualsevol moment. S'estudien els diferents tipus d'aplicació mòbil, optant per un desenvolupament híbrid per a assegurar l'accessibilitat a l'alumne independentment de quin siga el sistema operatiu del seu telèfon mòbil. A nivell tècnic, el desenvolupament s'ha realitzat amb el framework Ionic juntament amb tecnologies web. A més, els gràfics 3D s'han implementat mitjançant la llibreria Three.js de Javascript i es fa ús de l'espai de color HSL.