1.5: How to upload your sketch – p5.js Tutorial


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 !!

Leave a Reply

Your email address will not be published. Required fields are marked *