Hi! So I am here and I am making a video.
And what I would like to try to do
in this video is demonstrate uploading a p5 sketch
from your laptop to a server
so that other people can go to their own web browsers,
type in some URL, and see the marvellous,
wonderful work that you have done!
So, before I go to the computer and demonstrate steps
what I would like to do is discuss
all the different pieces at play here
it is actually kind of a simple thing in a way,
I'm probably overcomplacting it, but let's give this a try
you could just shut this off, or speed ahead like 5 minutes
if you just want to get to the guts here.
Ok, So ... what's happening,
you are working on a laptop and you have the p5 IDE
You are working in the P5 IDE, which if you zoom in on that,
you are writing some code and that code is JavaScript
You are writing code in Javascript
uh, there is a play button, somewhere in that IDE
and you hit play, when you hit play you see another window opens up,
that window is actually a browser window, and you see the result of your code
whatever you've written in you code, "draw circle", "draw rectangle",
all that stuff, it's there in this browser.
So all of this is just happening locally on you laptop.
Here is the thing that you might not consider, or have thought of
This.. in that step when you hit play, what happens ?
"Launch a server"
There is actually a server that's running, on your machine, your laptop
(I don't know why I'm assuming you are using a laptop
... that's what I'm using these days, so, maybe you are too)
That server is launch behind the scenes which serves up your sketch
and allows this browser window to see it.
And so, what we want to do is we want to find another server,
one that's not sitting in you laptop ans that is actually out in the Internet
( you know "the cloud"... I think I saw this in a video...
there is no "clouds", underground bunkers somewhere )
but a server somewhere, that other people could connect to
uh...lots of other laptops, they could connect to through some URL
and they could see you beautiful circles and squares
on their screen !
Because, you don't really... It's not really realistic at this point
for your laptop, for this little server to suddenly serve up to the world
and then everybody connect to you
( also... you know, this is possible but that's another story for another day)
So what you need to do is take this code and put it on that server
and figure out what that URL is
and then everyone else, will be able to see you beautiful circles and squares
that you spent so much time thinking about
where to put them ? what colours they should be ?
and purple and blue, I don't know, colours of the rainbow
it's a nice thing to think about!
Ahh, so !
So this is the steps that we want to do.
Now, here is another piece,
you are writing, we said, JavaScript code here
so you think all we need to do is take my JavaScript code
and put that on the server
but what's happening in the P5 IDE is in addition to the Javascript code
which might be called, a file, like "sketch.js",
that's where your code is sitting,
behind the scene and in some other video
( or somebody else will talk to you, I don't know when
but I am not going into this to much right now )
and this moment, there is another file called "index.html"
and when these requests are made this is really the file,
this is the core file, that gets sent back from the server
that gets loaded into the browser
and this file refers to to you JavaScript code
so, in turn, your JavaScript code is seen in the browser.
But, so these are the 2 files, and there's other files...
later you might have, you know images, and sound files
and there is something called CSS, which adds some styling and layout
and different things,
but ultimately, you need at least these 2 files
HHHhhhhhh ! !
I forgot something...
You need this 2 files and you need to send them to the server.
OK, what did I forget ?
There is also going to be a folder called "Lib"
and that folder called "Lib" is going to have other things in it
like a file called "p5.js"
that's the P5 library
You know there is a longer story here of "ok, well, you don't actually have to have
the P5 library here, you could refer to it somewhere else"
but for the sake of today, just so we can get through this video,
the way that... and this is how the IDE works
so it makes the most sense to just look at it this way.
You project is your code,
it's this html file which refers to your code
and then, also, the P5 library which allows you to write all this functions
like rect(), ellipse(), fill(), stroke()...
that sort of thing in your code
and also, by the way, the index.html file that is going to refer to that file too
so you got to get all these things up onto the server.
Then you got to know, you know, what's you URL ?
Well, presumably, you have a host you've registered for an account
with some company and they have given you lots of information
and, you know, uhhh... what your URL is
it's, you know, "blabla.com" and depending on if you make this into a directory,
then it's going to be /something/something
...well I guess when I show you on the computer
( if you're still watching...)
uhhh, this will become more... but ah !
How do you get this stuff to the server ?
There is lots of ways to do that.
All sort of interesting strange ways,
I have a personal favorite I'm using this way called "GitHub pages"
but I'm not going to do that in this video
and I probably shouldn't have mentioned that
(edit that out later ... except I'm not going to edit that later... because I don't edit these)
But , uhh, so , you need to do something called "FTP",
and this is where I'm very exited to say that I actually, I think I know what
that stands for: "File Transfer Protocol".
Because we want to transfer this files and we need some protocols
for transferring this files
and, in fact, most likely, what you actually need
is "SFTP", it depends on, what kind of hoster, server or whatever you have
"Secure ! File Transfer Protocol" because
you don't want anyone to hack in and see
your precious pink and purple, rainbow coloured shapes,
that you are uploading to the server
... hhhh, ok !
Soooo, uhh, so this is the picture of it
I went on to long about that now let's...ah, by the way
I haven't tried this yet
So, uh, so now we are going to go over to the computer
and actually walk through the steps and look at how to do this
(I'm gonna go over here now and see if this works)
Wooohaaaaa!!
Ok, oh! My computer went to sleep!
Come back! Ah, there we go, ok !
So, what do you need now ?
You need some software, You need software
(hop ! there you are ! you ! I mean, you are a camera
I guess you are a person, at some point but...)
You need some software
the software that I am using is a (let me zoom in on this)
called "Cyberduck".
This is FTP software it allows to FTP files but
you know, Google "FTP software" find your personal favourite
ask you friends who love to FTP on the week ends or whatever
uuh, but, you might as well look at Cyberduck. It's free and uh ...
it works!
So uh, now, but ok, so and I also have the p5 IDE
if you don't know where to get the p5 IDE
you want to go the the p5 js website that's p5js.org
and you want to go to "Download" and then you want to scroll down
and you want to download the editor
the Mac version OR... the Windows version ! which is
really exciting because, like a month ago that didn't exist
so, uuh, so I've already done that
so I don't need to do that and (hello ! ) so I'm just going to launch
Cyberduck, and you gonna see here the thing that I need to do is
I would like to "Open a Connection" to my server
( Ahhhh! Oh I don't know I made that full screen I don't want to do that
view, ooohh, shit, get out of that here we go)
uh, "Open a Connection" and now there is some information here
first thing I want to do is I want to change this to SFTP
and wouldn't it be nice if I knew (oh... sorry) the server address -laugh-
this is something you are going to have to know !
(I should, like, just pause this video, but I... there is nothing I can you, I had this set before)
"shiffman."... (oh shout) ..."imnyuad.com (it, like, what's the chance that that's right)
"dshiffman" and then my password very secret (and I can't say what it is)
(what's the chance that this works ? Ah! Ah, I'm a genius ! Ok guys
I'm really lucky.) So, I'm sorry about that, I still can
remember that, that's cool.
Ok, so, this is my URL. This is a bit of a strange URL
most likely, you are going to have something... (ramble)
you most likely have something, like, you know, uh...
funkyswesite.com or whatever your URL is
So your are not gonna have this strange sub-domain thing
but it's up to you whatever you registered with your host
that's what your are going to do
and then, your host is going to have different settups
there is, you know, a bunch of directories
uh, this is the directory of files
that actually are publicly viewable on the web
So your server is sitting there
and you can have all sort of files on this server
but there is usually a directory sometimes it's called like
"public_html" that usually a directory that is specified
so whatever you put in there those are the files
that you can actually see by making these requests
( ok, so uh, am I back here ?, I am )
So, ok, so we've logged in, that good and we'll leave that over there
I'm going to open up p5
I'm going to make a sketch and then say (oh boy ! I need to just think about
making the font bigger ... )
I'm going to say "createCanvas(400, 300);"
that's my favourite resolution ... what's yours?
I'm going to say background(0);
I'm going to say: fill(0, 100, 255);
I'm going to say: ellipse(200,150, 100, 100);
that's my favourite kind of ellipse
I'm going to hit "save", that's very important!
I'm going to hit "save". Now where do I save ?
Wherever I save this that's where these files,
all these extra files are actually going to end up.
So, I'm going to save it to the desktop
I'm gonna say I'm gonna call "shiffman_ week1"
referring to my name and it's week 1 of my semester
(...)
I don't know if anyone is going to watch this
beside the people who are like... required to
(...)
but ok, so, I'm gonna hit "save"
I didn't even test my code I should test my code
and then I hit "run" and you can see that it works
I have my beautiful circle, it's blue
hmm, I don't know it it's my favourite colour, but it works for today
uh, and now I'm gonna save it again
and then I'm gonna... look ! look at this directory
right here
This directory, if I look in that directory
(wow ! where did that go ?)
Hmm, now you can see
I've got those files I'm talking about
I've got "sketch.js" which is my code
I've got "index.html" which is my html file
you can look inside here and see what's in there
make changes to it if you want to play around
uh, and then you can see
here are the libraries
"p5.js" is the only one I'm actually using
but included are also
"p5.sound.js" which allows you to play sounds
and do all sorts of amazing sound stuff
"p5.dom.js" ... which allows you to do some
other interesting things that have to do with the dom
but, you know, I got to stop this video at some point.
So , now, what I'm going to do
(and really, I should have just started here)
I'm going to take this whole folder
(uh, ok, uuuuh, "edit on the disk" I don't know, may be if you want to
ahh, something weird happened I don't care)
I take this whole folder
and I'm going to upload it
uhh, and then I going to click "allow"
and , if we look we can see there
that folder is in there "shiffman-week1"
and there there is some other stuff
from , like, some other stuff I did at one point, a few month ago
but now, if you think about it
where is my URL ?
"shiffman.imnyuad.com" slash "shiffman_week1"
Ok, let's try this
(ok tatadaaa) I'm going to go to "shiffman.imnyuad.com/shiffman_week1"
Woohoo !! That worked ! See, look!
And now, all you have to do is,
I don't know, put this on your Twitter
or your Facebook, or e-mail it to your friends,
honestly just go and update that GitHub Wiki that is for class
and link it to you homework
So, uh, this is a thrilling day for me
that I recorded this video and that there is a circle here
I doubt this is a all a thrilling day for you
but I will see you again, at some point
and another video! maybe, maybe not?
Uh, I have to stop this now
Oh, I don't have a mouse ... I can't stop it, come on mouse
Ok, bye !!