Aprende P5js

Unlock Creative Coding with p5.js

Dive into the world of interactive web design with p5.js, a powerful JavaScript library designed for artists, designers, educators, and aspiring programmers. Bring your creative visions to life with stunning animations and interactive visuals, all running seamlessly within web browsers. Built upon the foundation of Processing, p5.js offers unparalleled flexibility and control.

What You'll Learn:

• p5.js Fundamentals: Master the core concepts of p5.js, including event handling and fundamental drawing shapes.
• Basic Shapes & Drawing: Learn to draw essential shapes like squares, circles, rectangles, ellipses, arcs, lines, and quadrilaterals.
• Advanced Shapes & Curves: Explore creating polygons, Bézier curves, and custom functions for complex shapes. Learn to concatenate Bézier curves and build intricate designs with quadratic polygons. Create captivating stars and beautiful floral patterns.
• Interactive Events: Implement dynamic interactions using mouse movement events, including button states, scroll wheel control, and keyboard input (press and release).
• Text Manipulation: Dynamically manage and animate text within your p5.js projects. Learn to adjust font size, display text along Bézier curves, and import external fonts.
• HTML & DOM Integration: Build interactive user interfaces by creating HTML elements and DOM components such as buttons, input fields, checkboxes, sliders, radio buttons, color pickers, audio players, and video players.
• Transformations & Animation: Utilize rotation, translation, and scaling to manipulate objects. Master the pop() and push() functions for precise control over the drawing stack.
• WebGL for 3D Graphics: Explore WebGL to create compelling 3D figures including cubes, spheres, ellipsoids, toroids, and planes. Apply realistic materials (natural, ambient, and reflective) and control lighting to enhance your 3D scenes.
• Image Handling: Learn to load external images, display them on the canvas, apply filters and tints, manage transparency, and perform pixel reading and manipulation.

Who is this course for?

This course is ideal for web designers and developers who want to add interactive animations to their websites. Prior knowledge of JavaScript and HTML is recommended. A local or web server is required for loading external resources in the final module. Comprehensive course files and notes are provided throughout.