Vectors and motion
Week 5
Martin Bertko, Marek Dohnal
bertko.martin@gmail.com, dohnalmarek99@gmail.com
GENERATIVE DESIGN PROGRAMMING
Ciele, štruktúra hodiny
Vectors
ciele:
- vysvetlit 2 funkcie vektorov v programovaní:
- kontajner 2 hodnot s rovnakym pôvodom => čistota kodu
- matematicke operacie sluziace na pohyb
“However, using vectors will help organize your code and provide
a set of methods for common mathematical operations you’ll
need over and over and over again while programming motion.”
- zopakovať fyzikálny princíp polohy, rýchlosti a zrychlenia pre potreby
pohybu
- zaviest principy pohybu v p5 pre potreby buducich 2 tyzdnov - tam
bude ich lepsie použitie (agenti, motion design, pendulums, flowfield,
typografia)
- implementácia hry s pohybom
štruktura:
1. preco vektory
2. vektory v p5
3. pohyb
a. poloha
b. rychlost
c. zrychlenie
4. catch me if u can
5. game jam
GENERATIVE DESIGN PROGRAMMING
Introduction
Vectors
-paci sa mi DS pohlad na to, preco vlastne potrebujeme novu syntakticku konstrukciu - vektor => kvoli
prehladnosti. na tomto slide preto by som dal snippet 2 kodov, ktore ukazuju, ze pouzitie cisto premennych
dokaze kod skomplikovat.
https://natureofcode.com/vectors/#the-point-of-vectors
3 moznosti pre prednasku:
a) na prednaske iba ilustrovat priamo na kode, nepisat ho.
b) napisat simple kod ako napr. Bouncing Ball with No Vectors
1. najprv pohyb
2. potom rychlost
3. potom 3D? friction?
to bude dobre preto, aby sme sa k tomu vratili pri posune v teme. Nasledne si totiz predstavime
prepis tohto kodu na pohybovy vektor, potom pre rýchlostny.
c) nechat napisat simple kod na rozcvicku im - simple bouncing ball. Nasledne na tom ilustrovat
problemy.
GENERATIVE DESIGN PROGRAMMING
Feedbacks
Yes, we read them.
- cool project examples: http://www.generative-gestaltung.de/2/
- playlist:
https://open.spotify.com/playlist/6X185BlQApNN7mjiFFhPdi?si=34bd5ec6294d4281
GENERATIVE DESIGN PROGRAMMING
Create a ball that moves straight and bounces at a reflection angle
when it meets the edge of the canvas.
Ensure the ball moves quicker to the left than to the right.
Bouncing ball
EXERCISE
GENERATIVE DESIGN PROGRAMMING
Replace the ball with something else.
Just a pinch of adjustment...
EXERCISE MODIFICATION
Use this code
GENERATIVE DESIGN PROGRAMMING
Vectors in P5
Vectors
GENERATIVE DESIGN PROGRAMMING
p5.Vector
Vectors
- Can represent: position, velocity, acceleration, force, …
- Useful simplification of math operations.
Creating a vector object :
const v = createVector(x, y, [z])
// v.x returns x coordinate
// v.y returns y coordinate
/*
You could use new p5.Vector(x, y) instead,
however the p5 documentation recommends
createVector(x, y).
*/
x
y
GENERATIVE DESIGN PROGRAMMING
p5.Vector Methods
Vectors
- Some non-static methods change the vector object from which they are called.
- There are static equivalents which return a new vector object.
- They generally take scalars, other vector objects, and arrays as arguments.
Quick overview :
v.set(x, y)
w = v.copy()
v.rotate(angle)
v.angleBetween(u)
s = p5.Vector.dot(u, v)
w = p5.Vector.cross(u, v)
w = p5.Vector.random2D()
w = p5.Vector.slerp(u, v, amount)
// also interpolates magnitude
v.add(u)
w = p5.Vector.add(u, v)
sub(), mult(), div(), rem() //modulo
v.limit(magnitude)
length = v.mag()
v.setMag(magnitude)
distance = p5.Vector.dist(u, v)
w = p5.Vector.lerp(u, v, amount)
p5 reference
GENERATIVE DESIGN PROGRAMMING
Motion
Motion
GENERATIVE DESIGN PROGRAMMING
Position (vector), Displacement (vector)
Motion
position
- = location of an object with respect to time
- = a vector which starts at the origin and is directed towards point of interest
(it expresses both the distance of the point from the origin and its direction from the origin)
- used to help us find the location of one object relative to another object = displacement
displacement
- = the change in position of an object
- = a vector with the shortest distance between initial and final position of a point undergoing motion
a
b
b
-a
v
v = b - a
GENERATIVE DESIGN PROGRAMMING
- the rate of change of the object’s position with respect to time.
- basic algorithm for motion:
position = position + velocity
Velocity
Motion
Rewrite the bouncing ball
exercise using vectors.
Nature of Code, Ch. 1, Fig. 1.4
GENERATIVE DESIGN PROGRAMMING
- the rate of change of velocity
- advanced algorithm for motion:
1. velocity = velocity + acceleration
2. position = position + velocity
- [from The nature of Code]
“… acceleration doesn’t merely refer to speeding up or slowing down.
Rather, as this example has shown, it refers to any change in
velocity—magnitude or direction. “
- smoother motion is a result of a more indirect change in position
Acceleration
Motion
Add acceleration to the ball.
Convert code to the class named Ball.
GENERATIVE DESIGN PROGRAMMING
Position
Basic kinematic variables (recap)
Motion
Velocity Acceleration
iamge iamgeiamge
poznamky poznamky poznamky
mozno prec
GENERATIVE DESIGN PROGRAMMING
Make the ball accelerate towards the current mouse position.
Catch me if you can
EXERCISE
Taken from: The Nature Of Code
GENERATIVE DESIGN PROGRAMMING
GENERATIVE DESIGN PROGRAMMING
p5.Vector Applications
GENERATIVE DESIGN PROGRAMMING
p5 games
Motion
p5.js games collection
by: skgmmt by: 2sman
GENERATIVE DESIGN PROGRAMMING
Games inspirations
↓ by: p5play
by: Flappy.p5 →
GENERATIVE DESIGN PROGRAMMING
Game jam
EXERCISE
P5LIVE
Use vectors and motion to create a simple game in p5.js.
You can work in teams of three (preferred), two, or on your own.
Don’t forget to sketch your ideas on paper and assign work among you.
GENERATIVE DESIGN PROGRAMMING
Use vectors and motion to create a simple game in p5.js.
You can work in teams of three (preferred), two, or on your own.
Don’t forget to sketch your ideas on paper and assign work among you.
Prototyp 2024 invitation
BONUS
GENERATIVE DESIGN PROGRAMMING
Also taken from Daniel Shiffman, but modified a tiny bit
Example code
Drawing with a simple pendulum
EXERCISE
toto bude mozno vhodne do
dalsieho tyzdna, tam su
pendulums popisane
GENERATIVE DESIGN PROGRAMMING
Choose one of the following exercises and implement it yourself:
https://chatgpt.com/share/6715acbd-94d8-8012-bc0f-b3cb3ee8005b
Motion around us
EXERCISE
GENERATIVE DESIGN PROGRAMMING
Bouncing ball :
The Nature of Code, Chapter 1: Vectors
Linear interpolation :
lerp() in p5.js by Patt Vira
Sources
Vectors
GENERATIVE DESIGN PROGRAMMING
Did you enjoy working in P5.LIVE?
?
Feedback questions