Projects in Canary IslandsProjects in Canary IslandsCASE STUDY
An editorial infographic developed as an academic project to communicate complex information about drug use in a clear, visual, and accessible way. The goal was to demonstrate how information design can improve understanding of extensive content through effective visual organization.
The main challenge was to structure a large amount of data without overloading the composition. To achieve this, principles of visual hierarchy, editorial grids, and information architecture were applied, combining typography, graphics, iconography, and visual elements to facilitate an intuitive reading experience.
The result was a balanced and functional editorial piece that showcases expertise in information design, content organization, and visual communication, reinforcing the importance of design as a tool for conveying knowledge.
PROJECT SUMMARY
Design of an editorial infographic for a study on drugs, applying principles of visual hierarchy, grids, typography, graphics, and iconography to communicate complex information in a clear and organized manner.
https://angrafista.com/es/project/drugs-infographic This is a demo game that i have make it using three.js (https://threejs.org/)
Features PigCity (Pigopoli) — GTA-style 3D Web Game (Three.js + Rapier + Vite)
Open-world mafia-cartoon game running fully in browser. No heavy engine, no plugins: pure Three.js + WebGL, Rapier.js physics (WASM), Vite build. 60fps on entry-level laptops.
Tech stack
Three.js r160+ — rendering, scene graph, GLTFLoader, SkeletonUtils for skinned-mesh cloning, CSS2DRenderer for 3D-anchored UI (damage labels, dialog bubbles), procedural shader-based sky.
Rapier.js — deterministic WASM physics: capsule character controller, per-building colliders, kinematic vehicles, raycasts for gunfire and line-of-sight.
Vite — HMR, optimized bundle, asset pipeline.
PocketBase (self-hosted) — persistence, anonymous device-auth, IAP claim, server-side hooks for ad rewards.
Stripe Checkout — 4 IAP packs in test mode.
3D / Three.js features shipped
Modular city loaded from Kenney City Kit GLB, grid layout with central plaza and per-building colliders.
Animal trio (pig, rat, chicken) cloned via SkeletonUtils.clone() to preserve skinned animations, runtime hot-key switch.
Full combat system — 3 weapons (fist/pistol/shotgun) with cooldown, ammo, spread, distinct ranges. Camera-origin raycast so crosshair aligns to bullet impact. Sprite muzzle flash, pooled spark particles, floating damage labels via CSS2D.
Aim-driven TPS camera — orbital yaw + pitch that drives aim angle (not just height), lookAt projected far to prevent crosshair drifting onto the player's body.
Vehicles — kinematic controller with dedicated chase cam, E to enter/exit, vehicle HP, pedestrian ramming above 4 m/s triggers ballistic ragdoll (launch + spin).
NPCs — capsule pedestrian pool with HP, ragdoll-flop on death, timed despawn, i18n dialog with CSS2D speech bubbles.
Cop AI — notoriety system with decay, police spawn above threshold, siren audio, escape by range/time.
Mission state machine — repeatable Pizza Run, animated 3D waypoint arrow, soft/hard currency rewards.
Shop UI — HTML overlay with vehicle thumbnails rendered offscreen via a second Three.js renderer (fixed camera, transparent background).
Audio — Web Audio API with pooled MP3 SFX and looping music player with toggle.
HUD + minimap — real-time 2D canvas minimap, player/vehicle HP bars, dual-currency wallet, notoriety meter.
Architecture
Trust boundary: all economy mutations validated server-side via PocketBase hooks.
Save store with fallback: PocketBase primary → localStorage if offline.
Feature-modular layout: src/combat/, src/vehicle/, src/mission/, src/economy/, etc. Each system isolated and testable.
50+ unit tests (Vitest).
Result
MVP complete (Plan 01-07 of 8), playtested: walkable city, 3 characters, combat, vehicles, repeatable missions, dual-currency economy, Stripe test IAP, rewarded ads with daily cap.
#threejs #webgl #gamedev #javascript #3dweb #creativecoding #frontenddev #fullstack #freelancedeveloper #indiegame
