- Hello, this is a quick follow-up video from my
Lissa Jous Coding Challenge which you can see
running here in a 400 X 400 window in processing.
What I'm going to do in this video
is take all this code, copy in the P5 just web
editor, and convert it all to JavaScript.
Can I do that in just like 5 minutes,
and get it running in canvas and the browser
so you can use that code if you want to make
a browser based version?
Let's see.
So this first thing I'm going to do is
I'm literally just going to take all the
code and copy/paste it.
So I'm going to do copy,
and then I'm going to come over here I'm going to do
paste, save.
And then I'm also going to create
right over here in this side bar
I can do like Add File, and I'm going to make a
file called curve.js.
And then I'm go into
curve.js, come back to processing, get my curve
tab, and go over here and paste that in.
So now I have both of those, and then I also
just want to go into index of html
and make sure that both JavaScript files
are referenced.
So now I'm ready to start
porting, and I'm going to do this in the
most manual way possible. I could use
regular expressions, or clever find and replace,
or write some code to convert it,
but I'm going to do it kind of one variable at a time.
So write all the data types.
This is just, ah, you know what?
I have an idea.
So I need to make a two-dimensional array
in JavaScript, and it's a little bit awkward.
I remember I wrote a function once called:
Make 2D array.
This is somebody else's project.
Minesweeper on code pen, but look there's my
Make 2D array function.
So I'm going to close that.
And I'm going to bring that into here.
Just put it at the top.
So now I have this Make a 2D array function.
I'm going to change the order of the arguments.
Columns, rows.
Rows, columns.
Ah!
Hopefully that's not
going to kill, going to do anything terrible.
So this is function.
This is createCanvas.
One thing that I need to do if I'm doing any
integer arithmetic, I've got to use floor.
Floor, because I want to take, I have to
manually take off the decimal plates.
And then this is now: make2Darray, rows, columns.
This is let, Let.
Okay, keep going down.
Function, Let,
Let,
Let.
The let song.
Let, Let, Let, Let song.
The let song.
Let, Let, Let, The let song.
The let song.
Let, Let, Let.
(laughter)
You're watching somebody sing the word, let,
over and over again, and copy/paste let.
Okay, so, I'm just going to take this out for a
second, because I don't know how this saving
is going to work.
Now class!
Oh thank goodness for Yessic's classes.
What a lucky day.
But this needs to change to constructor, and
now this dot.
This dot.
Never forget the this dot
There's going to be a lot of this dotting now in this.
So I got to add this dot everywhere.
This dot.
This dot, this dot, this dot.
Where did I miss it?
I don't need void.
Oh, I don't need float.
I don't need float.
Also, array list is not a thing we care about.
Brackets, just a plain old array.
And then I don't need void.
And then, this won't work,
but I can say for let v of this.path.
And then I feel like, did I use add somewhere?
Yeah, this has to be push.
Clear?
Is clear a JavaScript function?
I guess we'll find out.
Let me save, Run.
Okay, make 2D array is not defined.
Great job.
Oh, 'cause I have capital letters there.
Let's put that in here.
No, no, no, don't reload the site.
Just do this.
P vector is not defined!
Ah, Okay.
So that's also another one that I forgot.
This has to be createVector.
And createVector.
I think that should be good.
And now, Oh, current is not defined.
Huh, what is going on here?
Oh, this dot current.
This dot, this dot, this dot!
Current is not defined, line 37.
Also, this dot, this dot.
There we go, look at that.
Lissa drew a table in JavaScript.
Let's see how it performs.
So by the way, this URL will be linked in the video.
Let's try, I forget how I do this.
But if I do, I think if I say createCanvas
windowWidth?
Is that what it is?
NP5 windowWidth, windowHeight.
That will give me the whole thing.
There we go, and then if I do sketch,
or file, should save, file,
one more, share, full screen.
Here we go.
You know what?
This is running faster.
Crazily, I feel like this is running faster.
I should have just done this in JavaScript the whole time.
It looks, it's less like weirdly pixelated too.
Or maybe it is.
So look at that.
That's beautiful.
View.
I mean I'm sure you
can't see this because of the YouTube compression
so let me just go back here, and make this
something much bigger like 120.
And let me, let me go view.
Enter full screen.
And refresh.
Refresh.
Did I not save?
Save.
Refresh.
There we go.
Now, here it is, your JavaScript Lissa Jous Table.
So if you prefer to work in JavaScript,
you can take this code, or remix it in the P5
editor and some other project, share it with me.
This dot Lissa Jous.
#This.LissaJous.
And I look forward to seeing what you guys make!
Okay, goodbye.
See what you all make.
Goodbye.
(Ding)
Oh, wait a second, it broke.
Stop.
Stop the presses.
Clear is not a function.
JavaScript array prototype.
Let's look at what it is, what there is.
I mean I could just set it to another array,
but is there like some kind of just clear it?
I mean splice all of it, shift all of it, reverse
reduce all of it.
No, reduce is something else.
I don't know what it is, but I'm going to go
over here, and I know you can't see me right now,
I mean you can't see the code right now,
'cause I've done something horrible.
You know what?
I have a new key command.
Oh, nope, this one.
Okay I'm not here anymore but you're looking at the code.
This is probably how I should do all of my videos
No one wants to look at me.
What am I going to do
Oh, reset, curve, reset.
Where's reset?
This.path equals, and here I come back.
Haha I'm back!
And now save, and now refresh.
And here we go look.
So I'm going to leave.
I'm going to leave you with the end of this video
watching this beautiful Lissa Jous pattern image.
Goodbye, I'm still here.
I'm still here, goodbye.
Enjoy!