Vector Math in Art

Vector Math in Art

p5

JavaScript

template.html

(email?)

What's a Vector?

• It can be represented like a point:
  • ex: (2,3) where 2 is on x axis and 3 is on y
  • js: var point = {x:2, y:3};
    • var vector = point;

• Mathematical construct with:
  • magnitude (length)
  • direction (angle)
  • x, y, z, origin

Vector Basics

• Addition
• Subtraction
• Scaling

Vectors are useful for:

• relative positioning
• rotation
• perspective
• ... and physics

Relative Positioning

Vector Addition

object positioned relative to parent

Rotation

Coordinate Systems

Perspective

Projection

Show off some stuff:

• robot click tracker
• wave
• spiral
• flowers

Are you inspired?!

(Please be inspired!)

Ideas?

Collaborate

If we all build vector based models,

I can put them together in another model!