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/

Tools#

Cursos#

Artistas, diseñadores, studios#

Libros#

Math#

Física#

Sitios#

Videos#

Optimización#

Portafolios#

Video references#

Audio#

StoryTelling#

Thrends#

Papers#

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.

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.

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.

Contenido de esta página