Yu Zhang

You don’t need to be a painter or a sculptor to express your creative side! The p5.js coding environment and graphics library let you turn your coding skills into imaginative creations, as well as quickly prototype interfaces and applications, visualize data, express creative ideas, or just play with code.

The projects in this series put the fun back into coding, inspiring you with creative JavaScript programming tasks that combine your creative abilities with computational thinking. As you work through each fun and engaging p5.js project, you’ll master design skills such as creating vibrant images from simple visual elements, animating artwork or photography, and even generating visuals for music. If you find your joy for code dwindling, let the exciting challenges in this liveProject revitalize your passion—and your JavaScript skills!

In this series of liveProjects, you’ll use the Java-based Processing platform to visualize common data structures and algorithms. Processing gives you direct access to a digital canvas and a powerful set of drawing primitives that allow you to generate stunning visualizations. Each liveProject in this series will cover visualizing a different kind of algorithm, improving your understanding of how the algorithm works through thoughtful graphic representation.

Expand your perspectives of what’s possible with programming. Creative Coding with Processing will revitalize your love for code and nurture your creative side with a series of inspiring projects rooted in the Java-based Processing language and coding environment!

The four parts in this series have been designed to inspire you and reawaken your coding creativity through engaging projects. You’ll learn to combine your computational skills with creative thinking as you use the Processing language to develop high-quality still graphics, interactive visuals, and audio-visual renderings. You’ll be amazed at how quickly you achieve beautiful and personal results that you can share with your friends, then show off in your coding portfolio.

In this liveProject, you’ll use p5.js to link and synchronize visual assets with audio material. You’ll start by simulating a 3D landscape, then animate a camera flight through the landscape, before cohesively setting your movie to music to create a music video.

In this liveProject, you’ll use p5.js to animate still photos or artwork. You’ll start by animating simple object images with interaction techniques, then animate landscape photos using layers and transparency. Finally, you’ll extend these techniques to creative drawing on images.

In this liveProject, you’ll work with p5.js to create and animate modern artwork. You’ll see how you can use code to replicate the abstract colors and shapes of Russian artist Kazimir Malevich and animate your reproduction into a moving 2D image, then explore the work of American sculptor Alexander Calder and see how it can be reproduced in both 2D and animated 3D.

In this liveProject, you’ll use the Processing creative coding environment to draw and animate abstract logos by combining simple visual elements. You’ll use color gradients to create vibrant icons, design complex shape-based logos, and combine the two techniques into exotic and interesting logo art.

In this liveProject, you’ll use the creative Processing creative coding environment to link and synchronize visual assets with audio material. You’ll start by simulating a 3D landscape, then animate a camera flight through the landscape, before cohesively setting your movie to music to create a music video.

In this liveProject, you’ll use the Processing creative coding environment to animate still photos or artwork. You’ll start by animating simple object images with interaction techniques, then animate landscape photos using layers and transparency. Finally, you’ll extend these techniques to creative drawing on images.

In this liveProject, you’ll work with the Processing environment to create and animate modern artwork. You’ll see how you can use code to replicate the abstract colors and shapes of Russian artist Kazimir Malevich and animate your reproduction into a moving 2D image, then explore the work of American sculptor Alexander Calder and how it can be reproduced in both 2D and animated 3D.

In this liveProject, you’ll use p5.js to draw and animate abstract logos by combining simple visual elements in new ways. You’ll use color gradients to create vibrant icons, design complex shape-based logos, and combine the two techniques into stylistic and interesting logo art.

In this liveProject, you’ll walk through the powerful MapReduce algorithm. MapReduce maps out data tasks to multiple processors, and then reduces all processors’ results to a single combination. You’ll use Processing to visualize MapReduce with twenty processor nodes, then animate the MapReduce algorithm with a streaming input dataset

In this liveProject, you’ll implement a multi-dimensional dataset and visualize it using dimension reduction on a Processing canvas. Dimension reduction helps select the most important features of a dataset, and is useful in machine learning. You’ll then explore distance functions and the k-Nearest-Neighbors algorithm to classify a new element.

In this liveProject, you’ll walk through the basics of tree and graph data structures, and explore two algorithms that can efficiently search these data structures. You’ll use the Breadth-First Search (BFS) algorithm to search a dataset structured as a tree, then move to Dijkstra’s algorithm to find the fastest path in a graph dataset.

In this liveProject, you’ll explore the basics of sort and search algorithms. You’ll begin by sorting a simple data structure with the “selection sort” algorithm, then use the state-of-the-art quicksort algorithm. You’ll use the Processing platform to visualize every step, before finally programming a binary search function and visualizing the search process on your sorted data structures.