Creative Coding with p5.js

Animate an Image you own this product

This project is part of the liveProject series Creative Coding with p5.js
prerequisites
basic JavaScript • basics of p5.js • basic debugging
skills learned
p5.js file and image handling • p5.js draw layers and masks • p5.js interaction with mouse and keyboard
Yu Zhang & Mathias Funk
1 week · 6-9 hours per week · BEGINNER
filed under
try now

placing your order...

Don't refresh or navigate away from the page.
liveProject This project is part of the liveProject series Creative Coding with p5.js liveProjects give you the opportunity to learn new skills by completing real-world challenges in your local development environment. Solve practical problems, write working code, and analyze real data—with liveProject, you learn by doing. These self-paced projects also come with full liveBook access to select books for 90 days plus permanent access to other select Manning products. $17.99 $29.99 you save $12 (40%)
Animate an Image (liveProject) added to cart
continue shopping
adding to cart

choose your plan

pro

monthly
annual
$24.99
$249.99
only $20.83 per month
  • share your subscription with one other person
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free eBook every time you renew
  • choose twelve free eBooks per year
  • exclusive 50% discount on all purchases
  • Animate an Image eBook for free

team

monthly
annual
$49.99
$499.99
only $41.67 per month
  • five seats for your team
  • access to all Manning books, MEAPs, liveVideos, liveProjects, and audiobooks!
  • choose another free eBook every time you renew
  • choose twelve free eBooks per year
  • exclusive 50% discount on all purchases
  • Animate an Image eBook for free
Look inside
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.
This project is designed for learning purposes and is not a complete, production-ready application or solution.

book resources

When you start your liveProject, you get full access to the following books for 90 days.

project authors

Yu Zhang
Dr. Yu Zhang has a background in fine arts and design. Her PhD research investigates the theory and artistic practice of interactive technologies for public, large-scale installations. As a researcher and artist, she approaches visual art with mixed reality installations and projections, sensor-based interactives, and computational arts. She has been teaching design and art in international workshops and higher education for over ten years.
Mathias Funk
Dr. Mathias Funk is an Associate Professor in the Future Everyday group in the Department of Industrial Design at the Eindhoven University of Technology. He has a background in Computer Science and a Ph.D. in Electrical Engineering from Eindhoven University of Technology. Since 2011, he has taught creative programming, computational prototyping, and designing with data and connectivity, and built tools for design researchers.

prerequisites

For JavaScript programmers interested in developing or rediscovering their creativity with easy visual computing techniques.

TOOLS
  • Basic JavaScript
  • Basics of p5.js
TECHNIQUES
  • Basic debugging
  • Basic math such as linear algebra (vectors and vector addition) and geometry

you will learn

In this liveProject series, you’ll expand your perspectives on programming and turn a professional craft into a fun activity once again. By revisiting computational concepts from a creativity-inspired angle, you’ll learn how code can be an expressive and explorative tool instead of just a problem solver.

  • p5.js canvas and coordinate system basics
  • p5.js drawing primitives and transformations
  • p5.js file and image handling
  • p5.js draw layers and masks
  • p5.js interaction with mouse and keyboard

features

Self-paced
You choose the schedule and decide how much time to invest as you build your project.
Project roadmap
Each project is divided into several achievable steps.
Get Help
While within the liveProject platform, get help from other participants and our expert mentors.
Compare with others
For each step, compare your deliverable to the solutions by the author and other participants.
book resources
Get full access to select books for 90 days. Permanent access to excerpts from Manning products are also included, as well as references to other resources.
RECENTLY VIEWED