Codificación creativa: crea piezas visuales con JavaScript
Un curso de Bruno ImbriziProgramador creativo
Un curso de Bruno Imbrizi, Programador creativo
Aprende los fundamentos de la programación y descubre cómo desarrollar, dibujar y animar imágenes y texto con código
Descubre la codificación creativa y no tendrás tiempo para aburrirte: siempre hay algo con lo que experimentar, nuevas técnicas que aprender e imágenes que crear. Para el codificador creativo Bruno Imbrizi, es la oportunidad perfecta para combinar la programación con su interés por los motion graphics y los elementos visuales. Ha trabajado para pequeñas agencias y también para conocidas marcas como Dell, Adidas y Universal Music.
En este curso, Bruno compartirá contigo su experiencia para ayudarte a crear impactantes piezas visuales mediante código. Explora los fundamentos de la programación y aprende a dibujar con codificación creativa en JavaScript.
¿Quieres ir más allá y ampliar tus conocimientos de programación? Echa un vistazo al segundo curso de Bruno, Programación creativa 2.0 con JavaScript: animación, sonido y color, donde te enseñará técnicas más avanzadas para crear composiciones con códigos de color, movimiento y sonido.
¿Qué aprenderás en este curso online?
21 lecciones & 39 recursos adicionales
Un entorno para dibujar
12 minutos, 39 segundos
Red
7 minutos, 51 segundos
Ruido
6 minutos, 40 segundos
GUI
11 minutos, 12 segundos
Texto
9 minutos, 26 segundos
Mapa de bits
10 minutos, 34 segundos
¿Qué incluye este curso?
Empezarás conociendo a Bruno Imbrizi, tu profesor en este curso, que te hablará de sus inicios en el diseño gráfico y de cómo combina esta disciplina con su interés por la programación. Luego, descubrirás qué plataformas le gusta usar y por qué, además de la gente que ha influido en su trabajo.
En la segunda unidad, explorarás los fundamentos de la codificación. Bruno te enseñará a configurar las herramientas principales antes de repasar conceptos de programación como variables, funciones, arrays y bucles. Más tarde, te indicará cómo mejorar tus ajustes antes de empezar una colección de dibujos.
A continuación, crearás un nuevo boceto digital usando varias transformaciones del lienzo. Después, aprenderás a usar trigonometría para distribuir formas alrededor de un círculo. Descubrirás cómo cambiar el tamaño de los bocetos y verás cómo usar funciones de utilidad que te ayudarán en tus siguientes diseños.
Entonces, para finalizar tu boceto, añadirás arcos y jugarás con diferentes valores en tus parámetros. También, diseñarás un boceto animado con agentes que se moverán sobre el lienzo y aprenderás a dibujar líneas entre ellos según su proximidad antes de pasar a exportar tu animación como un archivo de vídeo que podrás compartir online.
Llegado ese momento, volverás a revisar tu cuadrícula y descubrirás cómo hacerla más flexible y eficaz. Así pues, usarás generadores de ruido para mejorarla. Además, crearás un pequeño panel de control que te permitirá actualizar tus bocetos en tiempo real.
Por último, descubrirás cómo trabajar con texto en tus composiciones. Bruno te mostrará cómo dibujar, medir y establecer las propiedades de fuente antes de explicarte cómo actualizar tus letras usando solo el teclado. Para concluir el curso, aprenderás a leer valores cromáticos y le darás los últimos retoques a tu dibujo final.
¿Cuál es el proyecto del curso?
Diseñarás una serie de composiciones visuales creativas que se pueden ejecutar en un navegador web mediante código.
Proyectos de estudiantes del curso
¿A quién está dirigido este curso online?
Este curso está dirigido a cualquier persona interesada en la programación y en la creación de imágenes mediante código.
Requisitos y materiales
Se recomienda tener conocimientos básicos de matemáticas.
También necesitarás un computador con Node.js, un navegador web y un editor de texto.
Sistemas operativos:
⦁Linux ⦁SmartOS ⦁macOS 10.7 o superior ⦁Windows 2008 o superior
Requisitos del sistema:
⦁4GB RAM ⦁10GB de espacio libre
Opiniones
- hace 16 días
Great course, I wish I’d had a stronger foundation in coding before taking it.
- hace 1 mes
Excellent introductory course
- hace 2 meses
Great course!!!
- hace 2 meses
I loved this! I learned a lot and I sincerely recommend this course.
- hace 4 meses
Ótimo curso. O professor entende do assunto em profundidade e sabe transmitir muito bem o conteúdo. É uma excelente oportunidade como porta de entrada para a programação criativa.
Bruno cuenta con más de 10 años de experiencia y ha trabajado en agencias, estudios de diseño, productoras y conocidas marcas como Dell, Adidas y Universal Music. Ha aparecido en publicaciones online como WIRED o Londonist y ha recibido numerosos premios, como el Adobe Cutting Edge Award y el FITC a la mejor instalación digital.
Contenidos
- U1
Introducción
- Sobre mí
- Influencias
- U2
Fundamentos
- Configuración
- Variables y funciones
- Matrices y bucles
- Un entorno para dibujar
- U3
Transformación de croquis
- Transformar
- Anglos
- Funciones de utilidad
- Arcos
- U4
Agentes de croquis
- Objetos y clases
- Animación
- Líneas
- Salida de video
- U5
Ruido de boceto
- Red
- Ruido
- GUI
- U6
Tipo de boceto
- Texto
- Async
- Mapa de bits
- Glifos
- PF
Proyecto final
- Introducción a la codificación para diseñadores visuales
Qué esperar de un curso de Domestika
Aprende a tu ritmo
Disfruta aprendiendo desde casa, sin horarios y a tu ritmo. Tú decides cuándo seguir con cada unidad.
Aprende de los mejores profesionales
Aprende los métodos y técnicas más útiles con los mejores profesionales del sector creativo.
Conoce a profesores expertos
Cada profesor te transmitirá sus conocimientos con pasión, ofreciéndote explicaciones claras y una perspectiva profesional en cada lección.
Certificados
PLUSSi eres Plus, obtén un certificado personalizado y firmado por tu profesor. Compártelo en tu porfolio, en las redes sociales o donde quieras.
Ponte en primera fila
La alta calidad de los vídeos permitirá que no te pierdas ni un solo detalle. Gracias al acceso ilimitado, podrás ver las lecciones todas las veces que necesites para perfeccionar tus habilidades.
Comparte conocimientos e ideas
Pregunta, pide opinión y ofrece soluciones. Comparte tu experiencia de aprendizaje con otros estudiantes de la comunidad tan apasionados por la creatividad como tú.
Conecta con una comunidad creativa global
Esta comunidad cuenta con millones de usuarios de todo el mundo, personas curiosas y con ganas de explorar y expresar su creatividad.
Realiza cursos profesionalmente producidos
Domestika selecciona cuidadosamente los profesores y produce cada curso internamente para garantizar una experiencia de aprendizaje online excelente.
Preguntas frecuentes
La programación creativa es usar la programación para expresión artística o visual. Este curso te enseña a usar JavaScript, HTML y Canvas para crear visuales interactivos y arte generativo mediante experimentos prácticos de código.
Este curso está pensado para usuarios intermedios. Se recomienda tener conocimientos básicos de JavaScript y desarrollo web, pero los conceptos y herramientas clave se explican paso a paso para quienes ya tienen algo de experiencia programando.
Necesitarás un editor de código como Sublime Text o Visual Studio Code, Node.js, npm y un navegador web moderno. El curso también cubre cómo instalar y configurar todas las herramientas necesarias para proyectos de programación creativa.
Aprenderás a crear arte generativo, visuales interactivas y prototipos usando JavaScript, Canvas y tecnologías web. Los temas incluyen dibujar formas, transformaciones, animación, exportar gráficos y usar librerías como Canvas Sketch.
El curso te enseña a usar métodos del API Canvas de JavaScript como fillRect, arc y fillStyle para dibujar y estilizar rectángulos, círculos y otras formas directamente en el navegador.
Sí, aprenderás a exportar tus bocetos generativos como imágenes PNG o archivos de video usando Canvas Sketch CLI, junto con consejos para conseguir exportaciones de alta calidad.
Te guiarán para instalar Canvas Sketch, iniciar proyectos, manejar dimensiones dinámicas del canvas y ejecutar bocetos en tu navegador o terminal.