When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.

Animation
SkillShare logo

Creative Coding: Particle Images & Logos

Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.

     0 |
  • Reviews ( 0 )
Free
Creative Coding: Particle Images & Logos

Related Courses

This Course Includes

  • iconskillshare
  • icon0 (0 reviews )
  • icon2 hours 15 minutes
  • iconenglish
  • iconOnline - Self Paced
  • iconcourse
  • iconSkillShare

About Creative Coding: Particle Images & Logos

Project 1: Slice & Dice Effects on Images

HTML, CSS & JavaScript setup

How to organise anything into a grid

How to draw, crop & slice images with code

How to animate images with code

Mouse interactivity

How to find the distance between 2 points

Getting direction from point A to point B

Motion physics formula (friction & easing)

Moving the cells around

Performance optimizations

Creative coding experiments

Project 2: Particle Images

Project 2 setup

Converting images to code

How to use canvas

JavaScript classes and particle systems

Drawing rectangles

Drawing images

Drawing particle objects

Effect class

Code cleanup

Multiple randomized particles

drawImage method

How to center images on canvas

Particle motion

Pixel analysis with getImageData

Extracting coordinates and colors from pixel data

Turning images into particle systems

Animated particle transitions

Animation on button click

Mouse interactions and particle physics

Creating unique animated transitions

Particle assemble effect

Particle print effect

What You Will Learn?

  • Let's turn images into interactive animated pixels with physics (friction, easing) and let's make those pixels react to mouse. Discover the secrets of creative coding, from simple shapes to advanced algorithmic art in a single class..
  • The HTML canvas element is used to draw graphics on a web page. We can use it to draw lines, rectangles, circles, images, curves. Today we will go deep on rectangles and images, let me show you how far we can take it. Let's dive deep into creative coding and explore the possibilities of modern front end web development..
  • Learn the fundamentals of HTML canvas and discover how to develop, draw, and animate visuals and images with vanilla JavaScript. No frameworks and no libraries. I will explain all principles and techniques as we write our code line by line..
  • We will start by drawing a simple rectangle and image on canvas. We will learn how to turn these basic rectangles into a particle system and we will teach these particles how to take shape and colours of any image..
  • Have fun!.