[{"data":1,"prerenderedAt":118},["ShallowReactive",2],{"project-en-metro5p":3},{"id":4,"title":5,"author":6,"body":7,"company":96,"date":97,"description":98,"extension":99,"highlight":100,"meta":101,"navigation":102,"path":103,"priority":104,"role":105,"section":106,"seo":107,"sitemap":108,"stem":109,"tags":110,"thumbnail":37,"year":116,"__hash__":117},"work\u002Fwork\u002Fen\u002Fmetro5p.md","metro5p","Salguento",{"type":8,"value":9,"toc":88},"minimark",[10,15,19,23,31,41,48,57,61,64,72,76,79],[11,12,14],"h2",{"id":13},"project","Project",[16,17,18],"p",{},"metro5p is a generative art experiment that recreates artworks found in São Paulo Metro stations through code. The application brings together two interactive reinterpretations and lets visitors change dimensions and color palettes before generating a new composition in the browser.",[11,20,22],{"id":21},"reinterpretations","Reinterpretations",[16,24,25,26,30],{},"L2-BVM draws from Fernando Lemos's ",[27,28,29],"em",{},"Des-Aceleração"," (1991), displayed at Brigadeiro station. The algorithm divides the canvas into a regular grid, splits each cell into two triangles, and combines random colors with directional gradients. Alternating diagonal orientations and rules that prevent selected color pairings preserve the reference's visual rhythm without reproducing a fixed image.",[16,32,33,38],{},[34,35],"img",{"alt":36,"src":37},"Composition from the L2-BVM experiment.","\u002Fimg\u002Fwork\u002Fmetro5p\u002Fcover-metro5p.png",[27,39,40],{},"Variation generated from a triangular grid.",[16,42,43,44,47],{},"L2-BVP interprets Cícero Dias's ",[27,45,46],{},"Cores e Formas"," (1991). A grid of weighted-width columns is subdivided into cells of varying heights. Each area receives an irregular triangle or quadrilateral, while shapes along the top and bottom edges help structure the composition.",[16,49,50,54],{},[34,51],{"alt":52,"src":53},"Composition from the L2-BVP experiment.","\u002Fimg\u002Fwork\u002Fmetro5p\u002Fl2-bvp.png",[27,55,56],{},"Variation built with cells and irregular polygons.",[11,58,60],{"id":59},"technical-architecture","Technical architecture",[16,62,63],{},"The project is a static multi-page application built with HTML, CSS, and JavaScript, with no framework or build step. Each page loads p5.js 1.4.1 from a CDN and runs its sketch in instance mode. The forms convert selected colors to RGB, remove the previous canvas, and start a new rendering with the supplied parameters.",[16,65,66,67,71],{},"The home page acts as a catalog, while the navbar and footer are shared HTML fragments loaded with ",[68,69,70],"code",{},"fetch",". A local HTTP server is therefore required; opening the files directly does not guarantee that these components will load.",[11,73,75],{"id":74},"scope","Scope",[16,77,78],{},"Generation happens entirely in the browser, with no backend or persistence. The project focuses on visual exploration and procedural variation: the same palette can produce different compositions on every run. The current version does not include automated tests or direct canvas export.",[16,80,81],{},[82,83,87],"a",{":rel":84,":target":85,"href":86},"noreferrer","_blank","https:\u002F\u002Fgithub.com\u002Fsalguento\u002Fmetro5p","GitHub",{"title":89,"searchDepth":90,"depth":90,"links":91},"",2,[92,93,94,95],{"id":13,"depth":90,"text":14},{"id":21,"depth":90,"text":22},{"id":59,"depth":90,"text":60},{"id":74,"depth":90,"text":75},"Self","2025-07","Generative reinterpretations of São Paulo Metro artworks with p5.js","md",false,{},true,"\u002Fwork\u002Fen\u002Fmetro5p","4","Creative Developer","lab",{"title":5,"description":98},{"loc":103},"work\u002Fen\u002Fmetro5p",[111,112,113,114,115],"JavaScript","p5.js","Canvas","Generative Art","HTML\u002FCSS",2025,"ZgaTVAypaqs-33PWYlYf7WLm2BRA3LZuY7ivC9q0v2Y",1785351609900]