"I'm attempting to create a moderately
functional side scroller using different"
"forces and whatnot but the acceleration
of my object seems immediate and abrupt"
"going from 0 to acceleration to an
immediate constant acceleration"
*ect noises* "i'm
looking for advice how to simulate"
"gravity so that jumping can be
implemented such as when a user presses"
"a key to jump a force is exerted
displaying that jump" ok I think I get
this question this is a great programming
problem I think we can spend some time
working it out ok let's talk about when
I think we're gonna program here to
answer this first question so let's
imagine this is your canvas and you have
this sort of like scene where you have
this stick figure and the stick figure
is moving across like a platform this is
some standard kind of game I think right?
but somebody can post it in the chat
not a platform game it's like a side scroller maybe
that's what it's called
this person is moving this way and maybe
there are like different obstacles and
what you want is for this person this
character to be able to jump over those
obstacles not too dissimilar from like
Flappy Bird also right? in Flappy Bird
there's like... I just wanted to see if I could draw a bird. (laughs)
My alien bird, ooh look with some weird crazy dragon wings
or something, I don't know.. and i got lost lost my own
fantasy imagination there for a second. Sorry..
So umm, you can imagine this bird flying this
way and you press the key and it puts the
force pushing up so one of the things
that actually in most of my examples and if
you go back and watch all my nature of
code videos that are on youtube or the
videos that are for this Kadenze
course; generally you'll see that i have
these forces being applied continuously
gravity is always there, or an object is always
seeking a target so I think this is an
interesting thing to discuss what about
a kind of instantaneous force.
For example I'm just standing here and suddenly.. this GREAT Force just
instantaneously pushes me up from the
bottom., and I jump. So how would you
simulate that.. and of course like a
keypress or a mouse click could do
something like that so the other thing that I
think is interesting about this problem
is that umm.. you know; what what's moving
right in the world right if I move this
way I move this way right I'm..
here's this pen and I'm moving -- oh no I cant do it -- I'm moving 
towards the pen but what's not to say
that I can't do this optical illusion
the pen moving, am I moving or is the pen
moving? You can see because the background... The point is..,  -- that was a terrible demonstration --
the point is what happened.., what if I want the
background to move I want it to appear that
this person is moving but they're
actually, in the canvas, staying in the place
so that's kind of an interesting question
as well. So let's I.. I guess let's go see
if we can, let me come back here. Umm so let's see
what's to figure out where we're going to
program this. So umm, one thing I should do I think,
is let's not start from scratch so what
I'm going to do is I'm going to go to
"Github" and I have a lot of code and a
lot of places. I don't know what that means.. 
that sounds a little weird and I want to go to
repositories and I'm gonna look at this
one for right now. So I have a lot of
different nature of code repositories
for various simulation of physics' examples examples this has
some code that goes specifically with
that particular online course, so am just gonna
start from there and I'm going to just
download it as a zip
If you're wondering about Git and Github for only $0.00 you can watch my
Github tutorials.. is it popping up here?
--No-- because it doesn't do that. But I do have some Git and Github
tutorials they are free, you have to watch some adds
I might turn off the ads I don't know what to
do about the ads. Ok, so I think I
downloaded that and what am gonna do is show in Finder
I'm going to open up this folder and
uhh "session one", "session two" and let's put this folder
on the desktop just for right now, over
here; and let's find an example to start
with
session 2
three examples which to begin with? Let's
do the particles array one and I'm gonna..
what we're doing is actually
quite different than these examples so
I'm gonna use this p5 editor, even
though I haven't actually been using it
recently and these video tutorials. I have
been using Atom or Sublime. Uhh, ok but let's
just, let's look at what this example is doing.
Click, it says here click to add
particles so ok so you can see what this,
this is this is how my examples typically
look. Right.., my examples typically look like
okay there's a bunch of things in the
screen and there are various forces, one
force is gravity another force is wind.
So, I think when I click the mouse you can see
that there's this wind force suddenly
being applied; so in that sense a force is
being applied... one force is being applied
continuously - the gravity force, another
force is being applied only when the mouse
is held down. But, neither those are just
like a single one time force but let's
at least look at where in the code
that's happening
and them a going to completely restructure this example to do this platform thing. Ok, so uhh here
in the sketch we can see this happening
here. So umm, there are these particle
objects and the particle objects are in a
particles array and an applyForce function
is being called on each of those. applyForce(gravity) is always being called,
applyForce(wind) is only being called if
the mouse is pressed. Basic structure for
an example and now if I go to the
particle object here is the key thing
that I want to show you, this is the
applyForce function, so I you know I
don't know who's watching this or where
you're or why you're here or if you've already
left or what. But, just to mention briefly
these examples are built on Newton's
second law of motion which is stated
as 'force equals mass times acceleration'.
The definition of a force is a vector, a
thing that causes an object with mass to
accelerate so if I push something with a
force that object it has a mass, it's going to
accelerate so that's written this way
force equals mass times acceleration. It
can also be written as acceleration equals
force
divided by mass so if I go back over
here to the code you'll see that's exactly
what's happening here; the applyForce
function receives a force variable it
divided by mass and it adds it to the object's
acceleration now there's a lot more to
say about that so if you want to kind of
go back at what's a vector and how to
get all the way to this point then you
could go and watch either my just like a
walking advertisement for myself, but you
can watch the nature of code videos that
have on youtube or even better yet you might
just go and watch the videos that are
with on the Kadenze website for this
particular course. Where are we..,  ok so now
I need to completely restructure this
example because if you're still with me
what I'm trying to build is this... Well let's make a game, why not. Let's make a game where you're a
little person or a big person or an
alien or whatever it is and you're
running and obstacles are there and you've to jump over them. Ok so here we go, so I gotta.. I don't know if it
was so great to start with this
particular example because it's got a lot of
extra stuff in it but I'm gonna do "Save As.."
and am just going to put this on the
desktop right now and am gonna call this
the running game. Is that a thing "running
game"? I don't know what that is, I hope that's not
something like weird that I just called it. Ok so
what I want to do here is now have a
person and I'm gonna just say the
person forget about this mouse press
thing. Oh how's this font size? I feel like this
font size needs to be a litte big bigger. That looks good,
 I think you could read that. Let me know if
the font size is ok. Woow this is definitely a
record that there are eighty people watching
this on YouTube right now which kind of terrifying.
Ok, the person is a new particle and I have this like...
I have so many things that I want to do
in these videos, well let's how much time we have today.
It's 11:30 I got at least till 1 o'clock/1
p.m., then I will be attending, there is
an exhibition at ITP
of experimental storytelling things if anybody
wants to stop and say Hi.
Aah ok,  It's a little hot in here! So now what I want to do
is am just going to say let's umm.. am going to simplify some things.
This particle object is going to be my
person and I am going to take out this
idea of mass because that will make things a
little bit simpler and I am going to and
I will review all the pieces of this code
 once.. am gonna say, once things are kind of going.
I'm gonna say person dot update; a
person dot.. is it show or display? Let's see
what's the name of that function display
person dot display and let's just see and
the particle, and let's just rename this to
Person and I'm gonna say new *oops*. I'm gonna say
then new Person(); ok and let's see. So what do I
have now if I run this, good, I don't see
any errors
let's go *noo* and then I'm gonna go here and
I'm gonna just get rid this click to add
particles from the HTML file and I'm gonna run
this, ok; that's strangedidn't I delete
that? Did I not save it? There we go. Oh, ok so now
I've got my empty canvas. Now, ok so what I
I want this person, let's just make the person
a rectangle you will do this someday on
your own and make this more interesting
and actually I'm gonna just simplify
things and get rid of these arguments
and say the person is going to be at
pixel 50 and the location will be at Y
is..  height. So I'm gonna draw this person.
This is.. uhh everything is always so tricky
I'm gonna draw this person I wanna
draw this person just as a rectangle
kind of sitting on the bottom of the
screen so let's see, so the location is,
am I back here yet? No.
The location is the bottom of the screen
so now I want to, in the display
function, I want to make this a rectangle
so a rectangle at "this.x" and y is
the height but let's say height.. let's say
that the person is 50 pixels tall so
"this.y" minus 50 and like 20 pixels wide and
50 pixels high, and those should be variables
but let's just see if at the very least
we have, I don't see the person yet so
what's, what's missing
let's *let's let's* get rid of umm update for
a second. I still don't see the person, let's
see, let's uhh. Oh, "this.pos" is the name of
the variable, it's a vector object not
individual X's and Y's of course. There we go! So now
we're getting somewhere, yaay!! We have a little
square there at the bottom and I want
that person to move so let's put let's
put, sorry, let's put "update" back in.
Ok so, I'm at a point now where I can
take a moment to breathe and kind of I
just had to restructure that example, I, it probably
would have been, honestly been easier for me just to
program this from scratch but that's the
example we had. So the person has/is an
an object with an 'update' and a  'display'
function. Let's look at what it means to
be this person. The person has a position
which is where that person is on the
screen, a velocity - meaning its current
change in position and acceleration
which is the thing that's going to be
how does it's velocity change which is changed
by force.
So, let's, just to get a sort of
experiment going here what if I were to
say in the person's velocity instead of
being '(0, 0)' was/is '(1, 0)' so now if I
were to run this again we can see
there's the person moving. So we can
see that velocity, this velocity vector,
controls the person's movement. Now
interestingly enough let's place an
obstacle in the scene I wanna come to
tackle this weird viewport
question/problem first before I get
too far into this. So let's, let's place
an obstacle on the scene and I'm gonna
just say obstacle equals,  I'm gonna say, I'm gonna
make a variable called obstacle and I'm gonna
say obstacle equals createVector..
you know what, I'm just going to have the...
there's so many different ways I could do this.
I'm gonna say, you know what am gonna do? I think we are going to want an obstacle object so, for right
now I'm gonna do something totally silly which
is just hard code something in. So am going to make
 this a nice, some sort of purplish pinkish
color and am going to say rectangle where this
window is 640 pixels wide so let's stick
it at 400 pixels make it 50 pixels wide
and 50 pixels high. So am doing the same
sort of thing here like this.
Oh no, 350, aah so this will be height minus 50. Ok so 
I'm just try to draw a red, another rectangle
that sits at the bottom and so what I
want is the idea here, for this example,
is as this thing is moving I want to
press the spacebar and have it jump over
that obstacle, this is what we're going
for.You guys still with me? Oh! 94
people, my head is exploding. Oh my god, this is totally
insane, this is not very good. What am I going to do? It will get better, maybe..
or not.
Ok so here's the thing, right
now we see the person moving towards the
obstacle what if I, because the person
has a forward velocity. So I want to keep
my physics kind of true to form with that forward
 velocity but what if I want to see the person
in place and the obstacle moving instead.
Well interestingly enough I think you
know, I'm kind of,  honestly, am not really like a game
programmer and they're might be, there are probably 
some very standard ways of doing these things
that I might be missing here but I might also
just be coming up with these sort of
things on the fly in exactly the same
way but the way that I would approach
this would be rather than setting the
velocity of this to zero and have given this
a velocity. What I might do is just
almost our view of the scene always to
be centered on this particular character
and the way I could do that is with
translate so the translate function
am going to write this down. The translate function,
and this is a kind of function that exists
across most computer graphics
environments,  so any type of OpenGL
programming environment, processing, p5 open frameworks probably like three.js
I don't know, who knows, they have their own way.
They? Is there a they with three.js, three.js - it? Whatever, it has
its own way of doing things. Ok so what
translate allows you to do is move the
point of origin. So the point of origin
by default in a canvas in the browser is
the top left corner - that is 0,0. So this
character is drawn relative to 0,0 but what
if I sort of think of, instead of drawing
the character relative to 0,0 but I always
position the origin relative to where
the character is. So in other words if
the character moves over here then I
just want to move the origin kind of over here
as well so that I always see.. the characters sort of staying in
place. Now I know that may not have been
the most succint or sensical way of
explaining that but, hopefully that made some sense to 
you and oh my god I think I might actually hit to a
hundred people today and so what I think
I can do here is right here I can add a
so let me just show you what I mean
by this. What if I were to just say
translate -100, 0 so I moved the
origin negative 100 pixels to the left
what does this do to our scene, well everything
is shifted over you can see how, right, let
me do that again. So and I'm gonna make
this a variable, am going to do something crazy I'm
gonna show you some wacky JavaScript
debugging craziness because I'm just feeling
like this is whatever today. I'm just, am
warming back up to doing this on a
weekly basis. Ok x equals.. x equals zero.
So I'm just gonna put translate here and
what I'm going to do is I'm going to run this
and I'm gonna go to this little gear
icon here
here so that I have a nice little
JavaScript console and right now if
I say x equals negative 100, you  can see how I'm
shifting things over, right? So I'm live
updating that value of x to kind of move
where that origin is, to move my view of
the scene like.. it's kind of like moving
the camera over so I think a nice way of
doing, *that wasn't the greatest
demonstration, I thought it was going to be a much more
interesting*. Umm, I think what would work
really well here's what if I just say
'person.pos.x' what if I always
just offset the view by that person's
x-position only not
it's x-position; negative it's x-position. Because as that
person's moving I want to offset the view
further back. So let's do that, let's run
this and you can see, look at that, now
the obstacle is moving. So the physics
haven't changed. Right? The physics of this
scenario are a hundred percent the same.
It's just our view is changing and I
could do like weird stuff like I could
say like times .5 and then you
kind of have this like weird like the
view is like the camera's moving but not
as fast and anyway that's kind of crazy.
 It's sort of hard to see, it  just looks like their
crossing; but if they were multiple things moving
at different speeds you could maybe even get
some kind of crazy parallax effect but
anyway I'm gonna keep things simple
right now and just keep this. Only I
don't want the person I think all the
way at the left
I like them kind of shifted over so I'll
just shift it over by like 50 pixels,
so you can see this is now my view of the
game and what I want now is when I press
the spacebar for the the user to jump and guess
what this is actually super easy it's
not super easy in general but it's super
easy because all of the work of building
a kind of mini physics engine into this
example is already there. Now, admittedly I
haven't done that work in today's
session but if you're following along
and other materials you're kinda, that's,
your sort of ready for that. So in other
words we are, this is easy because I
already have this apply force function
so I have a mechanism for saying here's
a vector, stick that vector in the object
and normally that vector is put in, normally I 
don't know what normally means,  but as you saw my
other examples that vector might be
put in 'draw'. So for example if I were to
say
a force is createVector and I'm
just gonna give it like a little push to
the right so that it goes faster
actually let's have it, let's give it a
little push to the left
so that it slows down.This will be interesting and then if
I say 'person.applyForce()' you can see now
the person is slowing down and slowly 
moving backwards and it's weird because it really
looks like that other thing is moving, it's so hard to like..
I think like a more complex scene with a lot more things
you would have more of a sensation of
this particular character moving but you
can see here now if I could also do
something like if mouseIsPressed only
then will I apply this force. So here the
person is moving.. Ahh! I want to slow down
slow down slow down slow down go back,
backup backup backup you know what will
also help if the person was a little
animation of like a running person, you
know, obviously there's visual cues you could add to this, to make this better. Ok,
so you can see this is how we apply a
force now what I want to do is apply not
a continuous force in 'draw' over and over
again but a force only when a certain
event happens, so what I'm going to do is
I'm gonna add a function; this is something
specifically to the p5.js library that
function is going to be called keyPressed
Boy, am usually such a good typist and today's just 
a disaster and what I want to do is am just
gonna check like if the key is the spacebar that's a really easy way of just
checking like what key was pressed if
the key is the character space then this
is where I'm going to apply this force. So what
should that force be? And I'm gonna call
that a variable jump and I'm gonna
say createVector, now I want the user to
do what jump in the air, straight in the
air. So I'm gonna just give it a force
pointing up which is "0, 'some negative number' ". Now,  normally if you
..in alot of my other examples
you'll see generally forces have very,
small amounts .1, .01, .002379841.
Had a joke there, that I forgot to do
but I'll make it happen later.
Umm, it was a terrible joke anyway. So.. I just like lost my breath for a second, train of thought.
Okay, so normally you want sort of like a
small number because if a force is something being
applied continuously that thing
is going to up it's acceleration continuously
and numbers can get out of
control very fast in that kind of Canvas
animation environment, things going crazy. But this is
an instantaneous force for it to have an
effect it needs to be something rather large
so let's make this -1 and then
I just want to say person.applyForce
jump. Ok? So let's see if this is enough
for us. Here comes...There we go! I'm jumping.
Now interestingly enough, I win, I fly to the heavens.
 That was an easy game and no obstacle whatever will ever hit me again.
So why did that not appear to
do anything like you might imagine it
should?
Well remember if, if you apply force to
something moving up gonna move up and if
there's no force to push it back down
its not gonna move down that's like
newton's first law of motion. So we need
to have gravity in this world and so and
that is a force that should be applied
continuously in the opposite direction
so I'm gonna create a vector and I'm
gonna make this sort of a small vector
and I'm gonna say person.applyForce
gravity. So now I want to continuously
apply gravity. Oh I hit 100 people!! That's very
exciting, 103 people are watching on YouTube.
I should check the chat is it still working? Ok,
now so look at that what happened now? Oh no..
We've got a problem
gravity was applying and there's
apparently, this is a quicksand simulation. So I
don't have a sense of the ground here.
Now this is where we get into a lot of
trouble with our wanting to be true to
the physics of the world you know in
truth gravity is a force on me. So my
body is applying a force to the floor
and then there's like this like the 3rd
law of motion with the equal and
opposite and there's you know, tension force
because the floor is attached to some beams.
I don't know, I'm lost already but I
think this is a scenario where.. I know there was just
rectangle on the screen;
so I think we can probably just say you
know what don't go below the bottom. So
in that sense one of the things we could
do and this particle, this
person object actually from the previous
example has this edges function and so
let's use that function and let's forget
about this, this aspect of it. Let's just
say ok what do we do if this object is
going below, falling below the window
itself so this old code here, this old
cold like 'This Old House'. Anybody ever
watch 'This Old House' on PBS. Is this kind of
 like this old code?
Instead of "CodingRainbow" maybe I should just call it
'This Old Code'. Anyway let's see if anyone gets that
reference. I don't even know if I do it's sort of like this
weird childhood memory that like popped
into my head so this old code; I did have
a point here, was a bouncing code. So
something is falling its velocity
reverses direction and turns around.
So its for bouncing, but I dont really want bouncing here right now I mean I might want bouncing. What I want is
jump and stick. Stick the landing kind of
gymnastics stick the landing. So what
I'm gonna do actually is, am just going
to multiply its velocity times zero;
meaning if it hits the bottom its
velocity, multiplying its y-component
of its velocity makes its y-velocity zero meaning it's
 instantly stuck to the bottom. That's like the
least accurate physics simulation thing
I could ever possibly do but I think it
will work in this case and then I also
just wanna like, let's keep the position at
the height. So let's not get into like a
weird thing where it's like a little bit below. If it
goes below at any point, stop it from
moving set it back to the bottom. So now,
if we run this. Oops, ok person is not
defined. So I must have a syntax error
somewhere; so this is a, this a is a good
thing to happen because this will
happen to you. Let's look what did
 I add? Oh I think I, ooh I added..
I think I lost a curly bracket, that's all I did.
So look this, this closes this curly bracket
this closes that curly bracket and then I
needed a curly bracket for this whole
Person constructor function. Ok so let's run
this now.
The quicksand is still active. Ok so I think we have
  a problem which is that, I just didn't call that
edges function here; so I also want to,
after I update I want to call edges to
do that test for the edges as you can see, 
the person is not falling down. Now I could press jump
oh boy; so that force is way to week. Am not
making it over that square anytime soon.
So let's kind of just play with some
numbers here, let's give it like.. get
ten times as strong. There we go! Wooah, that was a
really high jump. Oh quick.. Ok so that worked so
you know maybe let's try half, split the
difference
That's pretty good, I might have to actually
time this correctly. Woah that was perfect. That was very exciting. Ok so it's kind of the
basic idea. I would love it if some of
you watching this, perhaps when I post
this code later, take this code and kind of put your
spin on it, try and add an animation, add a character,
add a sound, add multiple obstacles; maybe
think about the view. The view is like a
little bit weird right now but umm anyway....
