Recursos. Solo para los más curiosos

Recursos. Solo para los más curiosos#

Generación procedural#

Rendering#

WebGPU#

Web ML#

WebXR#

  • WebXR App Wonderland Engine. Web page.

  • Mattercraft. The next generation of 3D web tooling. A brand new creative tool for building rich 3D experiences for the web, including AR, VR and WebXR. Web site.

  • WebXR in Mattercraft: Rapid AR/VR creation for Apple Vision Pro, Quest 3 & ML2. Youtube video.

  • Switching from Unity to Wonderland Engine. Youtube video.

  • WebXR API. Immersive Web. Web page.

  • How to use WebXR with Unity - January 2024 Edition. Youtube video.

  • The BEST 👑 PC Builds for VR Gaming in 2024! - Ft. Meta Quest 3. Youtube video.

  • Top 5 WebXR Frameworks - Comparison By Jonathan Haleon November 14, 2019. Web page.

  • State of Compute: Maximizing Performance on Meta Quest. Youtube video.

  • Reality Accelerator Toolkit. Github repo.

  • Spatial Web Template. Github repo.

  • Immersive Web Emulator. Github repo.

  • Project Flowerbed. An immersive WebXR gardening experience written on top of THREE.JS. Github repo.

  • Learn to Create WebXR, VR and AR, Experiences with Three.JS. Youtube playlist.

  • Rendering immersive web experiences with Three.JS and WebXR. Web site.

  • Spatial Fusion. Mixed rality experience. https://spatialfusion.io/

  • Apple WWDC 2024 session on WebXR. Web site.

  • AWE Nite Mexico 2024 - Presentación de WebXR y Wonderland Engine. Youtube video.

  • Embracing WebGPU and WebXR With Three.js – Mr.doob, JSNation 2024. Youtube video.

Tools#

Cursos#

Artistas, diseñadores, studios#

  • Casey Reas.

  • feralfile.

  • Tony DeRose.

  • Tony DeRose.

  • Bruno Imbrizi.

  • Matt deslauriers.

  • Yi-Wen Lin (Wen).

  • Patrik Hübner. Generative design web site.

  • nowhere2run.

  • Tim Rodenbröker.

  • Thomas Latvys.

  • Entagma.

  • This is onformative. A studio for digital art and design. Web page.

  • Neri Oxman. Former Associate Professor of Media Arts and Sciences. Web page.

  • Design at the Intersection of Technology and Biology | Neri Oxman | TED Talks. Youtube video.

  • Andrey Ivashentsev. Web page.

  • Kishimisu Creative Developer. Web page.

  • Nabil Mansour. Cone marching project. Web page.

  • Bileam Tschepe. Berlin based artist and educator creating audio-reactive, interactive and organic digital artworks, systems and installations with TouchDesigner and artificial intelligence, collaborating with and teaching people worldwide. Web site.

  • Robert Hodgin. He is a co-creator of the Cinder C++ framework. Web page.

  • Sila Sveta. Web site.

  • Steve’s makerspace. With lot of resources. Web Page.

  • Brand new school. Web site.

  • I’m Joshua, an Interaction Designer. Web site.

  • Jacek Markusiewicz. Obra: Barbarians. Web site.

  • PixelLux: We create integrated designs that use light and video technologies to augment Environments. Web site.

  • SOSO limited. We imagine & build a better future through design & technology. Web site.

  • Artista Espen Kluge. Obra: alternatives. Aplicación de vectores. Web site.

  • Chris Barber. Web site. Instgram.

  • Tyler Hobbs. Web site.

  • Otto Mata. Web site.

  • Nervous System blog. explorations in generative design and natural phenomena. Web page.

  • My name is Tezumie, and I’m an artist based in the United States. I specialize in generative art, illustration, and pixel art. Web site.

  • Jason Dartford. Generative / Digital Artist. Unhealthily obsessed with geometry. Web site.

  • 256art. The only fully in-chain and open generative art platform. Web site.

  • Art Blocks is a digital platform where generative artists publish unique artworks using creative code. Web site.

  • Etienne Jacob. Making gifs with code. Web site.

  • Luna Maurer. Web site.

  • Licia He. Web site.

  • Graphic designer Hansje van Halem. Web site.

  • Anna Carreras. Web site.

  • variable.io, a generative design and data visualisation studio. We are a digital studio based in London working globally with brands, research groups and organizations on new ways of experiencing data; from concept ideation and art direction, to prototyping and production. Web site.

  • Marcin Ignac - a data artist and founder of studio Variable. Web site.

Books#

Math#

Física#

Sitios#

Videos#

Optimización#

Portafolios#

Video references#

Audio#

StoryTelling#

Thrends#

Papers#

  • Advanced Character Physics. Thomas Jakobsen.

  • StreamDiffusion: A Pipeline-level Solution for Real-time Interactive Generation. Web site.

  • The Fractal Flame Algorithm. pdf. Gihub backup

  • DyNCA: Real-Time Dynamic Texture Synthesis Using Neural Cellular Automata. Paper website.

  • Computational Life: How Well-formed, Self-replicating Programs Emerge from Simple Interaction. Website.

Data Viz#

Games#

p5.js#

SDF#

Live#

Virtual production#

Physical computing simulation#

Creative Coding#

  • Where there is data, there is design. Unlocking the potential of generative design and creative coding. Web page.

  • Creative Coding = unexplored territories | Tim Rodenbröker | TEDxUniPaderborn. Youtube video.

  • Tim Rodenbroeker site. Web page.

  • Creative Coding as a School of Thought. Web page.

  • public class Graphic_Design implements. An investigation towards bespoke Creative Coding programming courses in graphic design education. Web page.

  • What is Creative Coding? Web page.

  • A Cretive Coding Method. New stories. Future aesthetics. Generative design for brands. Web page.

Unity#

  • Introduction to the Universal Render Pipeline for advanced Unity creators. Web site.

  • Introduction to the Universal Render Pipeline for advanced Unity creators. Book.

  • The Universal Render Pipeline Cookbook. Book.

  • Level up your programming with game programming patterns. Web site.

  • Simplified Clean Architecture Design Pattern for Unity. Web Page.

  • Simple Clean Architecture. Web page.

  • A quick intro to Dependency Injection: what it is, and when to use it. Web page.

  • Book Download: Dependency Injection with Unity. Web page.

  • This is an example project of Unity GameEngine to explain the concept of «Simple Clean Architecture». Github repo.

  • Simple Clean Architecture Example for Unity without third party libraries. Github repo.

  • 5 Things to Know About Reactive Programming. Web site.

  • The Reactive Manifesto. Web site.

  • Software Architecture in Unity. Youtube video.

  • The Clean Code Blog. Web page.

  • Can you make SUCCESSFUL games with DIRTY CODE? Youtube video.

  • Learn Unity Beginner/Intermediate 2023 (FREE COMPLETE Course - Unity Tutorial). Youtube video.

  • Base defender clips. Youtube playlist.

  • Clean Architecture en español. Youtube playlist.

  • The secret to how to make your game look good in Unity | all you need to know about post processing. Youtube video.

  • Level_up_your_code_with_Game_Programming_Pattern. Ebook de Unity.

  • Game Programming Patterns Tutorials. Youtube playlist.

  • New Web platfrom support in Unity 6. Web page.

  • Unity profiling for web dev. Web page.

Web libraries#

Design#

  • Resilient Web Design by Jeremy Keith. Web site.

  • Design for developers by Mmdn Curriculum. Web site.

  • The latest in Material Design Google IO 2024. Youtube video.

Immersive web experiences#

  • Become a Three.js developer. Course. Web site.

  • What Are Interactive Websites? Web site.

  • 10 Striking 3D Website Examples (and How They’re Made). Web site.

Interactive Web experiences#

  • Incredibox. Music interactive experience. Web site.

  • Chrome music experiments. Web site.

  • Visualizing Music with p5.js. Web site <https://therewasaguy.github.io/p5-music-viz/>.

  • Cursos de cables.gl. Youtube channel.

  • Lights and Shadows Operators - getting started - Video Tutorial. Youtube video.

  • Mobile controlled visualization with Cables.gl. Algunos operadores están desactualizados. Youtube tutorial.

Blender#

TED Talks#

  • Lucas Rizzoto. Why I built my own time machine. Website.

  • Jorge Drexler. Poetry, music and identity. Website.

Biology#

  • Algorithmic Botany, the website of the Biological Modeling and Visualization research group in the Department of Computer Science at the University of Calgary. Web site.

  • The Algorithmic Beauty of Plants. Web site and book.

Conferences#

Generative Art#

  • Algorithmic Art as a subset of Generative Art. Website.

  • Generative Art for Beginners. By Franks laboratory. Youtube playlist.

  • Generative Art Museum. Web site.

  • TCAM Generative Art Museum. Web site.

  • Mathematical Art Digital Exhibition (MADE) at Queens College. Web site.

Shading languages#

  • TSL. Three.js Shading Language. Idea rápida: una capa de abstracción que permita generar código GLSL o WGSL, por ejemplo. Web site.

  • TSL Textures. Web site.

Artifitial life#

  • DyNCA: Real-Time Dynamic Texture Synthesis Using Neural Cellular Automata. Web site.

  • NoiseNCA: Noisy Seed Improves Spatio-Temporal Continuity of Neural Cellular Automata. Web site.

  • Computational Life: How Well-formed, Self-replicating Programs Emerge from Simple Interaction. Web site.

  • Cellular asciimata. Web site playgraund. Web site.

Touch designer#

OpenGL#

Web topics#

  • Implementing React From Scratch. Web site.

  • Plain Vanilla Components. Web site.

Hardware#

  • What is the Colmi R02? It’s a cheap (as in $20) «smart ring» / fitness wearable. Web site.

Creative algorithms#

Just algorithms, but with a creative twist.

  • Evolving JavaScript: Cultivating Genetic Algorithms for Creative Coding by Kevin Maes. Youtube video.

  • That Creative Code Page. An illustrated catalog of useful creative coding algorithms & techniques. Notion site.

  • p5.js Coding Tutorial | Differential Line Growth. Youtube video.

  • p5.js Coding Tutorial | Flocking Simulation with Quadtree. Youtube video.

  • p5.js Coding Tutorial | Quadtree 🌴 (how not to crash your program w +1,000 colliding particles!). Youtube video.

  • Punch Out Model Synthesis: A Stochastic Algorithm for Constraint Based Tiling Generation. Web site.

  • Steganography. Hiding text into an image. Web site.

  • ASimple Model of the Belousov-Zhabotinsky Reaction from First Principles. Alasdair Turner. Pdf.

  • p5.js Coding Tutorial | NileRed Logo (BZ Reaction). Youtube video.

  • Coding Challenge #17: Fractal Trees - Space Colonization. YouTube video.

  • Conway polyhedron notation. Web site.

Projection Mapping#

  • Real time projection mapping. Web page.

Coding Techniques#

Generative Design#

  • Design Lecture Series - Patrik Hübner. YouTube video.

  • GENERATIVE DESIGN, INTRO & Patrik Hübner. YouTube video.

  • Un proyecto hecho con el concepto de generative design. Web site.

  • La simulación del proyecto Brute. Web site.

  • crazy cool developers. Web site.

  • Un proyecto hecho con el concepto de generative design. Web site.

  • GENERATIVE DESIGN, Tim Rodenbröker. YouTube video.

  • GENERATIVE DESIGN, Vera van de Seyp. YouTube video.

  • GENERATIVE DESIGN, Just van Rossum. YouTube video.

  • Just Van Rossum - Type, Code and Movement. YouTube video.

  • Creative Coding Utrecht. Youtube channel.

  • Project plantfutures.io. Web site.

  • Brand Design System: Importance, Implementation and Examples. Web site.

  • Hirsch & Mann is a London based agency with a mission to create bold digital and physical experiences for premium brands worldwide. We offer our clients the complete range of design & technology services, creating immediate memorable experiences. Web site.

  • PEX is a collection of JavaScript modules the combination of which becomes a powerful 3D graphics library for the desktop and the web. Web site.

Generative art#

Ejemplos#

Borrar del historial de git un archivo#

A veces cuando estás trabajando con git te ocurre que por error incluyes en el historial del repositorio un archivo o un directorio grande. Cuando eso te pasa es muy posible que te des cuenta luego de un rato y borres de tu proyecto el archivo o directorio; sin embargo, cada que clonas el repositorio en otro computador notas que el repositorio sigue siendo muy grande. Lo que pasa es que el archivo o directorio aún está en el historial de git como un backup porque git no sabe que lo incluiste por equivocación y más bien te deja abierta la puerta para que lo recuperes en caso de necesitarlo. Incluso en Github puede ver el historial de tu repositorio. Si vas a un commit antiguo podrás ver que el archivo o directorio eliminado de tu versión más reciente del proyecto aún sigue en el repo. Entonces ¿Qué puedes hacer para eliminar del historial ese archivo o directorio para que no te aparezca en ninguno de los commits de la historia de tu proyecto? Sigue estos pasos:

  • Clona el repositorio en tu computador

  • Cámbiate al directorio de tu repositorio. Si ejecutas el comando ls -al podrás ver que allí está el directorio .git.

  • Ejecuta el comando:

    git filter-branch -f --index-filter "git rm -rf --cache --ignore-unmatch path_al directorio" HEAD

  • Si de casualidad en el path tienes espacios o caracteres como ñ, tildes, paréntesis, entre otros, debes marcarlos. Por ejemplo, supón que quieres borrar del historial la carpeta Library que está en el directorio My project (1), entones cuando escribas el path debes especificar esta carpeta como My\ project\ \(1\). Nota que tanto los espacios como los paréntesis en el nombre del directorio deben marcarse usando el carácter \. Te dejo un ejemplo:

    git filter-branch -f --index-filter "git rm -rf --cache --ignore-unmatch 01ruido/My\ project\ \(1\)/Library" HEAD

  • Una vez la operación sea exitosa, debes enviar el repositorio local a Github, pero necesitarás forzar esta operación:

    git push --force origin main

  • Por último, si todo sale bien podrás borrar el backup que hace git:

    rm -r -f refs/original/

Rutas largas en Windows#

Windows mantiene una limitación de tamaña de ruta de 260 caracteres. Esta limitación se presenta para mantener la compatibilidad con versiones antiguas del sistema operativo; sin embargo, esta limitación puede ser muy incómoda. Incluso a veces es necesario que crees tus proyectos en la raiz del volumen de tu sistema de archivos, por ejemplo, en la unidad C:. Afortunadamente, esta limitación se puede levantar. Para ello tendrás que crear una clave nueva en el registro de windows. Primero vas a verificar si la clave ya existe. Abre PowerShell y ejecuta:

Get-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem"

Busca si la clave LongPathsEnabled existe y si su valor es 1. Se es así, ya tienes levantada la restricción. Si no es así, entonces tendrás que escribir el registro de windws para crear la clave y hacerla igual a 1:

New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force

Advertencia

AGUANDO LA FIESTA

Ten presente que necestarás permisos de Administrador para hacer esta operación.

TDAxis#

Crea y transforma imágenes y sonidos con los movimientos de tu cuerpo aquí.

Hydraulic Erosion#

Aquí está el ejemplo.

Experimentos con audio#

En esta guía podrás realizar algunos experimentos con audio.

Atractor de Lorentz#

La siguiente figura (tomada de aquí) corresponde a un atractor de Lorenz que es un conjunto de soluciones caóticas de un sistema de Lorenz.

Atractor de Lorenz

Atractor de Lorenz#


Primero quiero que veas este video.

Ahora escucha el tema con una animación construida en Unity utilizando un atractor de Lorenz.

Te dejo una parte del código para que veas que no está compleja la cosa.

void Update()
{

    AudioListener.GetSpectrumData(spectrum, channelSelect, FFTWindow.Hanning);
    channelAvg = spectrum.Average();

    // cycle color over time
    sColor.H = hue;
    eColor.H= hue;
    line.startColor = sColor.ToColor();
    line.endColor = eColor.ToColor();
    line.startWidth = lineWidth * channelAvg * 1000;
    line.endWidth = lineWidth * channelAvg * 1000;
    hue += Time.deltaTime * oneOverColorCycleTime;
    //cycling the hue over time
    hue = hue % 1;

    float x0, y0, z0, x1, y1, z1;
    x0 = startX;
    y0 = 0;
    z0 = 0;
    float sigmaMod = sigma * channelAvg * 1000;

    for (int i = 0; i < iterations; i++)
    {
        x1 = x0 + h * sigmaMod * (y0 - x0);
        y1 = y0 + h * (x0 * (rho - z0) - y0);
        z1 = z0 + h * (x0 * y0 - beta * z0);
        x0 = x1;
        y0 = y1;
        z0 = z1;
        line.SetPosition(i, transform.position + new Vector3(x0, y0, z0));
    }
}

Exploración arduino-Blender#

Este es un experimento en construcción que busca conectar de algunas manera información del mundo físico con una simulación en Blender. Aún no hay resultados, solo estoy recolectando referencias e ideas.

¿Qué es la programación creativa?#

Tomado de este sitio:

Creative Coding is a process, based on exploration, iteration, reflection and discovery, where code is used as the primary medium to create a wide range of media artifacts.

MARK MITCHELL, OLIVER C. BOWN: TOWARDS A CREATIVITY SUPPORT TOOL IN PROCESSING. UNDERSTANDING THE NEEDS OF CREATIVE CODERS. ACM PRESS 2013, PAGE 143–146, CITED ACCORDING TO: STIG MØLLER HANSEN: PUBLIC CLASS GRAPHIC_DESIGN IMPLEMENTS CODE {//YES, BUT HOW?}: AN INVESTIGATION TOWARDS BESPOKE CREATIVE CODING PROGRAMMING COURSES IN GRAPHIC DESIGN EDUCATION, AARHUS 2019, PAGE 13. LINK

Según ChatGPT plus (septiembre 20 de 2023):

Creative coding refers to the use of computer programming as a means to produce artistic outputs. It’s a form of digital art where the emphasis is on the creative process and exploration, rather than just creating functional software. Creative coding often involves the generation of visuals, sound, animation, physical computing, and interactivity.

Dos herramientas para explorar:

  • p5.js - A JavaScript library that has its roots in Processing. It’s designed to make coding accessible for artists, designers, educators, and beginners.

  • TouchDesigner - A node-based visual programming language primarily used for real-time interactive multimedia content.

The creative coding community often participates in «live coding» events, where artists code in real-time to produce visuals and/or music, usually in front of an audience. These performances showcase the artistic and improvisational aspects of programming.

In essence, creative coding is about bridging the gap between art and technology, allowing artists to harness the power of computation in their artistic pursuits.

There’s a significant relationship between generative content generation and creative coding. In fact, generative methods are often a cornerstone of many creative coding projects. Here’s a breakdown of the relationship:

Definition of Generative Content Generation:

This refers to the automated creation of content (like images, music, stories, or patterns) based on a set of predefined rules, algorithms, or stochastic processes. The key principle behind generative content is that the output is not directly authored by a human, but rather is produced by a system designed by a human. The same generative system can produce a wide variety of different outputs, often surprising even its creator.

Creative Coding and Generative Content:

Many creative coding projects involve building systems that produce generative content. The creativity comes into play when designing the algorithms or rules that drive the generation. For instance, a creative coder might design an algorithm that simulates the growth of plants to generate digital artwork that looks like a forest.

Applications:

  • Visual Arts: Patterns, fractals, and generative adversarial networks (GANs) might be used to create unique pieces of artwork.

  • Music: Algorithms can be designed to produce melodies, rhythms, or entire compositions.

  • Interactive Installations: Creative coding can be used to create installations where the output (visuals, sounds) evolves based on user interaction or other inputs.

  • Animation and Motion Graphics: Generative methods can produce fluid, organic, or abstract animations.

  • Design: Patterns for textiles, wallpapers, or graphical elements can be algorithmically generated.

  • Live Coding: In live coding performances, artists often employ generative methods. The code they write in real-time sets up systems and processes that generate music or visuals, adding an element of unpredictability and spontaneity to the performance.

  • Exploration and Serendipity: One of the joys of generative content in creative coding is the sense of exploration. Since the output is determined by algorithms and sometimes random processes, even the creator may be surprised by the results. This serendipity can lead to delightful and unexpected artistic outcomes.

In summary, generative content generation is a major facet of creative coding. By designing systems and algorithms, creative coders can produce a vast array of unique and unpredictable artistic outputs.

¿Qué es algorithmic art?#

Información tomada de aquí.

In the 1960s, pioneers like Vera Molnár and Frieder Nake began using code to create art, leveraging computers, oscilloscopes, and plotter machines to produce images impossible to draw by hand. Their work was grounded in rules and instructions, with computer programs generating visuals based on these parameters. This marked the birth of generative art, where the «generative» aspect referred to the computer program, not the artist’s hand. The artist designed the rules, thus acting as the designer, with randomness adding slight variations to each visual output.

Algorithmic art is created by an autonomous system executing an algorithm, where the artist carefully designs the boundaries of its computational space and optionally defines the influence of randomness.

While collectors are typically more interested in the algorithm’s outcome than the algorithm itself, there’s an argument that the algorithm is the true artwork, as it embodies the artist’s primary effort. The generated outcomes are autonomously created, beyond the artist’s direct control.

Generative Design (ideas sueltas)#

  • Design is inherently embedded within the algorithm—essentially, the program itself is the design. (Just van Rossum).

  • Generative design—or the art of coding itself—is fundamentally about creating custom software. Sure, you can design using tools like Illustrator, Photoshop, or InDesign, but eventually, you’ll want to explore ideas that simply aren’t possible with those tools. That’s where this technology comes in, opening up a vast new world of possibilities for you to experiment and create. (Just van Rossum).

Interactive Code experiment#

Ejemplo interactivo de p5.js: