Top Content

Versión en EspañolES

Cómo crear arte generativo increíble con código JavaScript simple

Frank Force

Game Designer, Software Engineer

Please sign in to watch this workshop.

Bookmark

Github Project website

En lugar de dibujar manualmente cada imagen como en el arte tradicional, los artistas generativos escriben programas que son capaces de producir una variedad de resultados. En esta masterclass aprenderás cómo crear arte generativo increíble usando solo un navegador web y un editor de texto. Comenzando con conceptos básicos y avanzando hacia la teoría avanzada, cubriremos todo lo que necesitas saber.

This workshop has been presented at JS GameDev Summit 2022, check out the latest edition of this JavaScript Conference.

FAQ

El arte generativo involucra el uso de un sistema autónomo, como un programa de computadora, para crear obras de arte. Este tipo de arte explora cómo las reglas predefinidas o los algoritmos pueden dar lugar a obras visualmente interesantes y únicas.

Los emojis pueden ser utilizados como pinceles en la creación de arte generativo. Pueden ser integrados en el código de JavaScript para ser dibujados en el lienzo, modificando su tamaño, color y posición para crear patrones interesantes y dinámicas visuales.

Para empezar en arte generativo, se puede usar JavaScript puro para los ejemplos más sencillos. Herramientas como p5.js también son populares por ofrecer funciones avanzadas que facilitan la creación de sistemas complejos de partículas, animaciones y más.

El efecto de paralaje en arte generativo se puede lograr manipulando la velocidad y la dirección de los elementos gráficos en diferentes capas. Ajustando estos parámetros se puede simular profundidad y movimiento, dando un efecto más dinámico al arte.

Fx-hash es una plataforma que permite a los artistas generar y vender arte generativo como NFTs (tokens no fungibles). Los artistas programan obras que generan resultados únicos cada vez que se 'acuñan', ofreciendo una experiencia singular para cada comprador.

El ruido puede ser utilizado para añadir textura y realismo a las visualizaciones en arte generativo. Añadiendo pequeños valores aleatorios a las variables de color, posición o tamaño, se puede crear un efecto más orgánico y menos rígido.

Frank Force

165 min

12 Apr, 2022

Comments

Available in other languages:

Watch more workshops on topic

Crea un Juego Con PlayCanvas en 2 Horas

JSNation 2023

116 min

Crea un Juego Con PlayCanvas en 2 Horas

Top Content

Featured Workshop

Steven Yau

En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.

game development webgl

Introducción a WebXR con Babylon.js

JS GameDev Summit 2022

86 min

Introducción a WebXR con Babylon.js

Workshop

Gustavo Cordido

En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.

game development 3d

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

React Summit US 2023

28 min

El Potencial Caprichoso de los Marcos de Trabajo de JavaScript

Top Content

Josh Comeau

The Joy of React

The speaker discusses the whimsical and detailed work of Stripe, particularly their interactive and dynamic pages. They explain the use of React for building whimsical details and tracking mouse position. The speaker introduces React Spring for smooth animation and React3 Fiber for creating a 3D egg model. They also mention the use of Framer Motion and React server components for animating CSS properties.

design animations fun demos

¡Mejora el Rendimiento de Tus Juegos WebGL Unity!

JS GameDev Summit 2023

7 min

¡Mejora el Rendimiento de Tus Juegos WebGL Unity!

Top Content

Florin Ciornei

CrazyGames

The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.

performance game development react unity webgl webgl

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

React Day Berlin 2022

28 min

Animaciones Emocionales y Funcionales de la Interfaz de Usuario en React

Elizabet Oliveira

Xata

Today's Talk discussed the importance of UI animations in React, both functional and emotional. Examples were given using CSS and Framer Motion, with a focus on user feedback and accessibility. Design guidelines and animation usage were highlighted, as well as the consideration of negative emotions in animations. The Talk also touched on designing 404 error pages and concluded with gratitude to the audience and organizers.

react animations fun demos

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

Vue.js London 2023

27 min

TresJS, una forma declarativa de crear escenas 3D a partir de componentes Vue

Alvaro Saburido

Storyblok

The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.

vue vue 3 3d

Unreal Engine en WebAssembly/WebGPU

JS GameDev Summit 2022

33 min

Unreal Engine en WebAssembly/WebGPU

Top Content

Alex St. Louis

Co-founder and Chief Operating Officer @ Wonder Interactive

Alex Saint-Louis, co-founder of Wunder Interactive, shares the mission of bringing Unreal Engine to the browser, enabling cross-platform 3D applications and games. They are working on a WebGPU back end for Unreal Engine to push the limits of 3D on the web. Wunder Interactive has improved compression, built their own asset file system, and offers powerful tools for game developers. They are utilizing modern web technologies like WebAssembly, WebGL, and WebGPU, and plan to support other engines like Unity and Godot. The team aims to transform the industry by bringing console-quality games to the browser and providing an alternative distribution path. They are excited to bring Unreal Engine 5 to the web with WebGPU support and are working on WebXR support for cross-platform 3D experiences, including VR.

game development webgpu game engine webgl webassembly

De Blender a la Web - el Viaje de un Modelo 3D

React Advanced 2021

27 min

De Blender a la Web - el Viaje de un Modelo 3D

Top Content

Sara Vieira

Orama

This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.