[Music]
hello happy Friday I thought I would try
for an entrance it's actually work
we're started with nobody here for a
minute and just music playing and then I
enter did that happen is my microphone
off why are you hiding could you tell I
was hiding underneath the air and I
slipped that way I guess I could have a
computer over there though I start this
dream from anyway hello everyone welcome
today's Friday which means coding
training day
hello perhaps to the NYU Tandon student
I met at the library yesterday maybe
probably unlikely but if you're watching
say hello in the chat at Tandon is the
school for engineering at New York
University in Brooklyn and I'm often
there working in the library and every
time there's somebody come to expand
says hey watch my videos which is kind
of amazing because that really doesn't
happen to many other places or really
any other place frankly alright looks
like oh let me get my chat up here hello
to the oh I don't think I actually sent
a little notification here I'm gonna say
Channel I am live now if you're
wondering where I am sending this to I
there is a slack channel that you can
get an invite to by joining the patreon
or joining the YouTube thing through the
join membership blah blah blah blah blah
blah blah blah blah so today I will just
be saying blah the entire time I had
this idea that I wonder if I could do a
coding tutorial just through guttural
sounds and gesture but maybe today is
not the day to try doing that also might
not be the most accessible way to do a
tutorial so I
I'm going to talk about something called
word Tyvek today before I get into that
let me do some housekeeping not really
housekeeping but I'm so unprepared for
word to bec but I spent five minutes
preparing for this livestream by pulling
up a couple links of things I wanted to
show so first of all if you are not
already aware let's see if this actually
works processing Community Day is
happening in Los Angeles on January 19th
2019 that is a Saturday I believe it is
happening at UCLA and you can get your
tickets there early bird tickets are
available until October 31st I will be
there my kids will be there because we
have a new track for families and
there's lots of exciting wonderful stuff
that's happening that day so I encourage
you to come if you can now if you cannot
come to the Los Angeles prosecuted a
because maybe that is just not a place
you can get to reasonably check out PCD
worldwide there are at the moment many
processing community days in all these
cities around the world that is this is
kind of unbelievable and I wanted to
highlight one the organizers are some of
the organizers are alumni of the program
ITP where I teach and they are hosting a
processing community day in India it
looks to me like here they're actually
four in India I know it's probably like
around midnight is it midnight like
India like a half someplace they need a
half hour off so either midnight or
12:30 in India and I'll show you this
one here in Bangalore and February 2nd
2019 organized by these wonderful folks
Russia Ali who I believe is probably
actually just a couple floors down in
this building right now I kind of have a
fantasy of going to one of these
crossing and community days in India ll
see if we can I can make it up and a
little difficult to travel that's that
time of year so far but who knows all
right so that's one thing I want to
mention I also wanted to give a shout
out to coding trained viewer Eliza I
just discovered has a podcast we've kind
of like the most awesome
name ever unicorns fart pixels and I
have to admit I discovered it because
somebody mentioned that I was mentioned
and I listened to the episode where she
talks about coding train amongst other
things so there's a little bit of like
vanity here and me showing you this
podcast but so I did listen to episode
five first yesterday which talks about
Bob Ross and me and Patricio and coding
train and book of shaders and all sorts
of other things but I and I'm planning
to go back and listen to the other
episodes so I encourage you to check out
this wonderful podcast about web
development and creative coding it's
great unlike my frantic frenetic
behavior I feel like Eliza has a very
nice soothing comforting quality in her
voice in this podcast I wanted to
mention that I also wanted to mention as
a frame for reference that the Cody
crane has a website and for every coding
challenge that I do I have a page on the
website so I'm trying to get this better
but you could see so this is by the way
something that is an opportunity for the
community to contribute to so if you're
interested in helping with maintaining
this website that's wonderful Neil's
Webb did at Neal's Webb on github I
think did almost all of the work for
building this website out originally and
Watsonville have contributed I'll note
me I am so me who has made lots of
technical improvements that fixes and
advised on this and Austin who is also
contribute a lot of like the visual
design interface stuff but the reason
why I'm mentioning this is it's been a
little I guess I don't mention this
every video and it's been a little light
on the community contributions so this
is not the simplest system but if you're
looking for your first open source
contribution you can add a project that
you have made based on one of my
challenges to this page by following
these instructions and involves making a
pull request on github there's no
content management system for this other
than the github repository itself and
it's certainly something I could think
about incorporating the future but if
you're here I can click on this and we
can see this is Cole Spears look at this
rotate zoom with mouse scroll press
space or
enter for new leases you Lisa jus Lisa
jus shape and check console for 3d
leases you table position okay so I can
looks like I can rotate around this if I
hit the spacebar it starts over well
some of the other commands does not
remember anything scroll oh yeah scroll
I can zoom in and out so this is lovely
the scene I love seeing these
contributions of projects that people
have made and I'd like to if I can
remember highlight them on the live
streams as well I'll note that there is
this new button someone recently made a
pull request that I have this button
that just takes you right to the code
and then if I could manage to remember
to port which I already actually did but
there is actually already a to p5.js
port of this challenge and I believe
it's actually linked to right here but
this live example should actually take
you to it running in the browser but
it's not currently so that's something
that somebody could add to this page
that's missing and there's information
on this like see how to contribute stuff
all right so I wanted to mention that
also I've got all this new design stuff
that you might have seen thank you -
Jason Hagglund new characters and sort
of a new little train passenger :
they're like my friends this is this dot
over there so and there's the semicolon
the asterisk so I'm oh I love any design
ideas or feedback or to incorporate into
the site of some of the new materials
and I've posted a where is all this
stuff it is at github comm slash coding
training slash website if I go here
under issues yeah like I even posted an
issue here new coding terrain banner I
gave it the hack Tober fest tag there's
this hack tober fest thing going on I'm
trying to I guess which is run by
digital ocean when waiting for my
digital version sponsorship and if you
support open source projects you can
earn a limited edition t-shirt so I've
been trying to remember to tag various
things that I'm involved with with
Oktoberfest alright so I want to mention
that now one more thing if anyone
while you're watching right now I have a
little challenge for you to do while
you're watching I was going to do this
as part of the live stream but I think
it might be more efficient to have
somebody do this while I'm doing other
stuff and then give me the results so I
want to at some point today before I
leave
train a word to Veck train Network new
word Tyvek model with a source text and
I thought maybe it would be interesting
to see what happens if I use my nature
of codebook as the source text it's a
pretty decent amount of text it's not
huge obviously have a robust model and I
know the camera just went off I would
need a much larger body of text but this
something I think we could work with
right now so in order to do this so it's
a little bit tricky on this this is the
repo you want to be at Schiffman slash
the nature of code clone or download
this repo you're going to want to go
into chapters and then this is all of
the raw HTML all of the raw text of the
book welcome title page dedication ba ba
ba on all the different chapters so what
I what I need is to take all of these
HTML files strip out maybe using a red
regular expression or some kind of like
fancy Python thing that you know about
strip out all the HTML tags and leave it
with just the text the raw text of the
book and then concatenate it all into
one file so obviously we want one file
nature of code dot txt that is just the
raw text of the book and I'll use that
to train a word to Veck model this also
could be useful because I could use it
for my on LS TM example that I would
hope to make and why by the way it's ok
I I do this I don't want to be doing
this I don't want to be saying acronyms
and having people watching me going I
have to leave now this is not for me LST
m it is something that actually Nabil
Hussain was here last week against
presentation on but it's a kind of
neural network that can be used for
sequence data and for generating text
and so we're Tyvek is the thing maybe
who never heard about I don't claim to
be an expert on word Tyvek and all but I
am going to talk about it and show a
wonderful tutorial by Allison parish
which covers a lot about how word Tyvek
works and then try to play around make
some examples with worked effect today
all right uh yeah so Matthew brawn
it made a note in the chat here ignoring
the gem file dot lock vulnerability on
github yes I did conveniently ignore
that I couldn't actually so I now by the
way
so github when you have a project hosted
on github and one of you are packages
that your project is dependent on has a
security vulnerability and will give you
this alert and I was able to I had this
alert for all these node packages and I
know I do like NPM something on it and
you fix that and upgrade stuff and it
works able to do that I could not figure
out how to fix the gem file dot lock
vulnerabilities maybe I would have
totally accept a pull request on that if
that's a thing I think that's a thing
that somebody could do without me being
an administrator I don't know enough
about ruby stuff and frankly I don't
think oh no yeah oh this is for github
pages that's why it's in there so anyway
please don't fix it O'Neil's webOS say
don't fix it
Neels web in the chat stop stop all of
all all stop training train pulled stop
pearl the emergency brake I don't abuse
websites don't fix it I was expected by
the time I said that there would be more
information about why not - but that's
that for now all right let's see here I
think that's that was my introduction to
to the fact now I have to start doing
some content thing I said I was gonna do
word Tyvek and I think I should do work
Tyvek today ye but you know I made a
mistake because I'm going to talk about
word - back in my nyu class - week a
week and a half from now and typically
you might think that i have no idea what
i'm doing and i never practice and I'm
just winging it which is mostly true but
I do have a policy especially when I'm
trying a new topic I try to actually
look at it in my course first where I
have students that I can engage with and
talk about and get feedback from and ask
answer questions and get get tips on and
and I try to make a video about it so I
really should probably wait a couple
weeks but I've already put it as the
title of this and I got nothing else I
got nothing else besides I could do like
a flocking coding challenge which I keep
needing to do Oh actually I was thinking
of submitting a flock yet something
about flocking to Tom Scott's guest
thing I mean maybe I should maybe Tom
Scott but you'd be anyway I should
mention this just cuz this is a cool if
you're a youtuber or want to and want to
submit a Tom Scott was a wonderful
channel um TAS guests for one month
anyway I probably that makes sense for
me to submit anything I put the wrong
person for this but but anyway I'll
mention it now all right
oh no no this is this is visible yeah I
do not want a buzz I did I have my own
special by hands yeah I don't want to
talk about this this cup over here
anymore I won't even mention it
Thank You Sahil Khattar II I guess the
superjet is back on it was off its back
on okay all right ah Neil's web writes
breaking news everyone someone make me a
breaking news like a custom coding train
breaking news sound effect it should
have like dignity and then like you can
use my voice everyone boom boom boom
boom boom breaking news coding train
breaking news remix all that into
something amazing
I'll totally use it all the time a new
member on noob of arune thank you
welcome a new bob Varun I will be
sending out if you're a new member check
the community tab for the posts that you
can view that have a link to a Google
Form to get in the slack channel okay
Neil's web rights I have an updated
version locally but it's not pull
requested yet there is also some really
weird stuff where like weird stuff going
on with it that completely breaks
everything when you try to reinstall the
websites dependency it's awesome and I
finally got it working locally to toot I
I added the toot-toot although there is
a little like one of those emojis emojis
this is the sound for that emoji I think
but I have a big tooth to Jabba asks
what's going on
right now you're watching a person who
was desperately procrastinating by
randomly talking about nonsense in order
not to have to do a tutorial about word
Tyvek but I'm gonna stop procrastinating
and I'm gonna talk about word - Bek deep
breathing everyone okay alright so let's
get started so I need to pull up some
stuff here I want to first go to
github.com slash Schiffman /p v word -
Bek this is an old repo where I'm going
to pull some stuff from mostly I wanted
to grab this URL then I want to say
Alison parish a strange loop but would
also recommend this particular there's a
way there we go
this looks good I wanted to recommend
this particular talk from Alison which
is really amazing and then I also want
to let's see I'm looking for a reference
yeah I'm looking for here Oh thud this
is like the most roundabout way ever to
find this thing that I'm looking for
then I'm looking here word vector source
then I want to go here okay and then I
actually should keep this as well cuz
this is another reference that I used to
create that I to create this the
materials that are in my head that I'm
going to work on today and then there's
one other place oh yeah glove word Tyvek
yeah alright okay so now I have all my
references and I can begin okay
um hold on just looking here
here's a quick spreadsheet for the word
to Veck dist in case interesting wonder
what that is
all right hello India so many viewers
from India that's wonderful
alright so how am I gonna do this I have
no no plan my entire plan is this so
just give you some background I made a
little p5 module about word Tyvek maybe
this was a year ago two years ago
something like that a year and a half
ago interestingly what is word Tyvek
really the I mean is it the training a
group of related models that are used to
produce word word embeddings interesting
all right all right
oh sorry I'm over here all right I think
I'm just going to begin what I was going
to say was I think that today might
actually just be largely exploratory and
I just try a bunch of things and not
actually take the content and make
editor tutorial videos out of them else
to do it so why not why not just start
with Alison's tutorial okay
oh glove is not word Tyvek global
vectors forward representation yes sorry
but it does have so this is a great
point that is that Simon is making Simon
writes in the chat it is
Thank You Metsa for reminding me about
the LS TM intros I need to record glove
is perhaps using a different algorithm
we're Tyvek is a particular algorithm to
generate word embeddings or word vectors
word to Veck a word to vac model so to
speak
and glove I guess uses a different
particular algorithm but if I'm correct
the end result is the same it's a word
that is paired with a 300 dimensional
vector word embedding is also another
way of saying it so maybe I'm let me let
me put the glove stuff aside so that
that doesn't become a confusing thing
but let me just begin all right okay
all right here we go hello welcome to a
new session from I don't know is it the
machine learning course is that the
programming with Dex cores I don't know
I'm just here I'm just the person who's
here and this session which will be a
whole bunch of videos is about a topic
word Tyvek I ring the bell way too much
so first of all I want to mention
something very important I known about
word Tyvek and I've used it in projects
for a little while but I don't think I
ever really understood it and I don't
even know that I really do understand it
but I definitely improved my
understanding of it vastly after reading
this amazing tutorial by Allison parish
it's a post it as a gist on github it's
a Python notebook understanding word
vectors by Alison parish
you know honestly if I find being
truthful you should just stop this video
right now and read this instead you know
a few some people seem to like to listen
to me prattle on which is fine you could
keep watching if you so choose read this
after then at the very least and so this
tutorial is a released under Creative
Commons by 4.0 license the code itself
is the Creative Commons 0 license so you
can reuse this material which is what
I'm doing right now I don't usually do
this again I'm all our stuff is always
based on other people's stuff but this
this first video I'm really gonna like
talk through what's in this tutorial in
my own words but if you do the same
please reference with attribution
according to the license ok so I also
want to mention that Alison Parrish has
a wonderful talk it's on YouTube I will
link to it called experimental creative
writing with a vectorized word from a
strange loop conference so I also
encourage you to take a look at that as
inspiration and background for what it
is I want to show you my end goal with
this tutorial is to get to the point
where I have a p5 Java Script sketch in
the browser where I can do stuff with
word defect what has worked the point of
this video that you're watching right
now is I'm taking a very long time to
start is just to answer the question
what is word Tyvek by the end of it I
want to use word defect in two projects
to make weird stuff happen with text on
a webpage all right
how are you feeling so all right so
let's let me come over here for a second
because I've written word to back up
here that's gonna help me the idea of
word Tyvek and there's the this is a
machine learning process similar to
other things that I've done that looked
at like classification is this image a
cat or a dog or a regression analysis
what's the what's can you predict the
price of this house based on certain
properties of that house these are
classic machine learning examples word
Tyvek is a particular machine learning
model that produces something calls a
word embedded now what if it's a very
very fancy term and what it means is
that any given word like Apple can be
associated with numbers a vector this we
can basically somehow come up with this
sort of like numeric mathematical
essence of this word as some array of
numbers like zero point seven and one
point two and negative point zero point
3 4 5 etc etc and there's gonna be some
amount of numbers in here this seems
like a crazy thing why would I ever want
to have a word associated with an array
of numbers well one of the things that
one can do with arrays of numbers is
math linear algebra multiplying
subtracting averaging adding so we know
we can do that with arrays of numbers
and this is the kind of thing that
happens in lots of my other tutorials
with programming graphics and pixel
processing and machine learning
but one thing we wouldn't know how to do
is how would we say you know Apple plus
plus orange but that could be I was
trying to like come up with something a
good example this is what happens when
you don't play on these tutorials in
advance but to come up with an example
on the fly Apple plus purple with the
could this equal plum maybe right like
in other words like I'm trying to come
up with some it's like pseudo math like
let's take these two words and add them
together like cat plus cute
maybe that equals kitten can I take and
like we're not saying about
concatenation Apple purple we're saying
Apple plus purple could I get those sort
of mathematical essence of these words
add them together and get a new word
well the theory the prompt the idea here
that the argument that I that I am
making to you is that word Tyvek is a
mechanism by which you can do stuff like
this right there in your code if I could
quantify the word Apple as a series of
numbers and I could quantify the word
purple as a series of numbers then
couldn't I just add all those numbers
together I would get a new series of
numbers and then I might look and find
which word or has a set of numbers that
is most close to these set this set of
numbers how could I find the similarity
I could calculate a similarity score
between any two sets of numbers I can
find the word that has the most similar
to this Plus this and maybe it would be
plum why would it be plum is that magic
it's because what data that's word
defect model was trained on oh yes it's
the ladder
but and so I want to get to all of that
okay this is my sort of like a zoomed
out view of why we're doing this let's
come over and look at what Allison has
in her particular tutorial here which
are which is a really nice example if I
look at this we can say like well
imagine like a really simple case right
I was sort of saying over here each word
gets a list of maybe a hundred numbers
maybe it's three hundred numbers maybe
it's a thousand numbers this is up to us
to sort of figure out decide based on
what we're trying to do but what if we
simplify that and here's Allison's
example where each word gets essentially
two numbers and those numbers are data
properties of that word like a cuteness
score from 0 to 100 and a size from 0 to
100
so you could say kitten is 95 15 and
hamster is 80 comma 8 right there these
numbers that's sort of like the label is
tied to a set of data point data
properties so if that's the case then we
can look we could graph all of those and
we could say something like oh you know
like a horse and the dolphin are kind of
like similar in terms of size and in
terms of size and cuteness and then we
can start to do things but but actually
like we could do a mathematic
analysis like what is the actual
Euclidean distance Euclidean distance
means the number of well in this case
pixels or units between these two words
right here these are very similar
because they're physically close to each
other and we can also do things you can
think of those as and this is a nice
demonstration of this idea this is why
we talk about it as vectors right I have
a whole set of tutorials about vectors
describing as describing points in space
so for example a vector a velocity
vector if I have a particle in a
particle system and I wanted to go from
here to here this is its velocity its
change in location in essence this is
basically what I'm doing with an
operation like this for example what if
I said ok well Apple is over here and
then I'm going to add purple to it I'm
going to move by purples numbers and
over here I now find plum so when we
look at this in two dimensions it kind
of makes a we can sort of like our
brains can understand that two
dimensions is like the easiest dimension
I mean I have to define two dimension be
easier than one dimension one mentions
weird sometimes but and we could see
here that the relationship between
tarantula and hamster is just like
chicken and kittens may be close to
puppy right and so this I have to pause
for a second wow talk about improvising
I have no idea if this is making any
sense
all right oh wow sponge man already made
my nature of code dot txt
thank you I'll have to look back at that
in a little bit all right so what
allison is showing here is by moving
from let's say one word to another word
physically in space we can establish
this idea of word relationships chicken
is two kitten
as tarantula is to hamster now this is
all very arbitrary with like hard-coded
word vectors so the but this is just for
demonstration purposes and in two
dimensions so that our brains can kind
of process it ultimately if we have a
lot more information somehow about all
of these words in higher dimensional
space in vectors that have a hundred
dimensions a hundred numbers we can't
visualize that so easily there are
interesting techniques for called
dimension reduction reduction ality
reducing the dimensionality that we
could then draw like word clusters and
stuff and maybe I'll get to that later
but what I'm trying to say here is that
we can establish sophisticated complex
relationships between words in higher
dimensional space but in order to do
that it's useful to look at a single
example that ties words to numbers in a
low dimensional space that we can either
visualize or sort of like put into our
brains and so I've kind of described to
you
what word Tyvek is what the model looks
like when it's complete I haven't looked
at all about the training process right
the animals example is hard-coded I'm
gonna show you I'm gonna do a port of
one of Allison's examples of words
associated colors associated with
numbers right a color a word red is 255
comma zero comma zero that's a word to a
vector and that's going to be from a
data set and then the third thing that
I'm gonna do is look at what is
traditionally thought of as word to Veck
these higher dimensional large large
dictionaries of words and their
associated vectors those word embeddings
so that's going to be the journey here I
don't know how many videos it's gonna be
3 4 5 471 something like that and then
at some point I'll try to also do some
projects with that so in the next video
I'm going to do a port of Alison's
project which you can find all in Python
all the code in Python on that tutorial
that's linked in the description and I'm
gonna do a JavaScript port of it okay so
I'll see you there maybe or maybe not go
read that page it's excellent
ok good bye
all right uh so I have a question for
those of you viewing at home or wherever
you might be had you never heard of word
to Veck before and are you a beginner if
so hopefully all right okay
all right so we're gonna come down to
the color idea and I am going to
basically do this from scratch but I am
going to need to open oh no come back
come back
xkcd x.x yeah I want a new why is that
not opening in a new tab X okay I will
just do it manually open in a new tab
and close this this I still need you
just open up something here on this
computer in case I want to use it as a
reference this is me right yeah made
sense although I was only half listening
that's good or bad
all right okay github.com slash Roz
Vaughn says this was okay and
understandable Thank You Roz bond oh
yeah sorry I'm opening up I have a repo
which has code for doing this and in
case I get really stuck it would be
useful to have it as a reference if
you're looking for it it's ship github
slash shipment /p v - word Tyvek and i'm
looking at the word color vectors but
then what I want to get is
is the color data come on this is so
crazy how it won't control open in a new
tab okay so I'm gonna start with this
and I'm going I'm not gonna do this in
the p5 editor this I think is requires a
bit more so then I'm gonna go to the
desktop and do word to vac oops it
doesn't autofill if it doesn't exist but
I'm so used to like Gmail now just like
finishes my sentences for me I'm like
you know the directory name that I want
to make just tab finish it for me all
right now and then I want to do p5 G - B
and what do I wouldn't say a color let's
say color vectors oh I didn't I didn't
install this NPM - G NPM install p5
manager dusty so I use a tool called p5
manager which will spin up all the files
I need for a p5 project really quickly
and of course that didn't work as I made
all these workflow videos setting up all
of my settings and I need a like a fresh
user on this computer went back to this
user and none of the stuff is set up how
do I fix that thing again it's fix of
course I went over this in my video but
I can't remember it
fix NPM permissions and this is the way
that I like to do it I like to make a
directory called NPM global and this set
that as the path and then export that
and source but I'm using zsh so source z
RS r zs r CH c are these
our s Pro Z s HRC that's what it is
zs HRC there we go and now I should be
able to install that apologies that I'm
not explaining what I'm doing but I do
explain this in my work look let me get
back to the chat here whoo-hoo somebody
already made a breaking news sound
effect let's all this okay whip sigh
have my mute that somebody made a
breaking news sound effect which I am
throwing caution to the wind I'm just
gonna play live right now it's actually
pretty good
okay that is pretty good
all right and Simon is telling me that a
glove is faster than we're Tyvek great -
no thank you
okay now p5o you don't had this idea
oh I mentioned Tom Scott up my brain
needs to stay focused on one thing it
does not work that way
p5 - p5 G - B - B B I think it's G - B
color vectors let's try that okay that
worked then I want to I'm going to open
this up in Visual Studio code let's move
over a tiny bit and move over a tiny bit
and then let's get here I don't want the
libraries because I prefer to just use
the CDN and so I have to change the
template I'll do that eventually CDN
p5.js and let's grab this
I want them let's use them unified and
put that I don't want to follow the link
I just want to put this in here and then
I want to put this in here
I want to do this copy copy copy copy
copy copy copy I don't think I'm gonna
use sound so I can get rid of this I
don't need all this CSS nonsense and now
I am ready I can say no canvas
console.log hello
color vectors and I can run a server I
could run the light then I'm gonna say
run my server and now I really should
develop something that just spins all
this stuff up all at once localhost 8080
which I am amusingly googling instead of
oh there we go hello color vectors there
we go alright we're ready to start
coding now what I need to do is get
sorry I want to get where am I looking
for here I want this file and I'm gonna
put it in where to vak color vector it's
xkcd JSON and that's from here go back
to here and from here okay
all right yes Mathew Braun says copy the
CD ends to the templates of your future
self will be happy I know but I don't
want to waste the time do it now but I
won't remember before the next time I
come back and you're to tell me again
it's a vicious cycle that never ends
okay teeth knee
Hajduk is it tight teeth knee oh this is
gonna be that's gonna be good for some
stick later alright I need an eraser
which I have here need a marker which I
have here okay alright alright part two
of my word to vex series your back and I
thank you for that
hello I'm here to talk about word
vectors alright so let me let me mention
again well lots of people sorry are lots
of people are already doing my nature
code thing which is really cool okay
hello part two I think I'm on part two
of my word Tyvek series I'm talking
about word vectors word embeddings words
and numbers and how they go together now
let me be very clear here this
particular section this video is
directly based on this wonderful
tutorial by Alison parish called
understanding word vectors released
under the creative commons by 4.0
license if you also use this stuff
please attribute it according to the
license to allison parish i will include
a link to this in the video's tutorial i
talked a bit about word vectors in
general and about this tutorial and
other things that you might look at for
inspiration in the previous video and
now in this video i'm going to do a
direct port of i went too far away
ah there we go language with vectors
color so a lot of people who are well
who are watching this live at the moment
we're asking about I don't get it I sort
of get that that's like word well word
in vectors or word embeddings but like
what that made no sense when I would
just went on a tangent here so people
were asking in the previous video I
don't get it like I thought that word
vectors are just kind of like about the
meaning of the word or the meaning of
the word in its context or similarity
between words and I don't why what is
cuteness I have this example before I've
looked at Allison Parrish example with
like cuteness and sighs what does that
have to do anything so let me be clear
my goal is to get to the point where
we're talking about this more
generalized idea that ends that we get
word embeddings words paired with
numbers from a machine learning process
that generates these numbers according
to the way words appear in a very large
body of text but we're not doing that
yet I just want to look at this idea of
a vector space and some of the math
associated with it and how that can
transfer to text and this is exactly
what Allison Parrish does in her
tutorial and oh boy that was a mess
sorry buddy you know what we should keep
that and then someone should make like a
little animated a little animated a
little animated I kind of get this a
little animated thing wait hold on
oh oh here's everybody ah this is not
this was going well in its own way but
it's alright there's somebody talking in
the hallway kinda loud can you hear them
alright let's try this one more time
yes are on my ukulele hello darkness my
old friend I've come to talk with you
again yeah I guess I will just sort of
explain that again I don't even remember
what I said so okay all right m'kay demo
88 asks why you always have to click the
camera on and off I will refer you to
the television program losts from the 19
from the Ox what most los times in the
90s note it's early two-thousands
whatever I'll refer you to that program
where a button had to be pressed lest
and that button was not pressed the
world would cease to exist and I'll make
the case every 30 minutes
I'll put ok I'm slowly lost my momentum
so what I want to do is do a direct port
of this example from Allison parish
about language with vectors colors now
people were asking in the previous video
I kind of looked at Alice's example of
like Oh a word like an animal could be
paired with data like its size and its
cuteness what does that have to do with
word vadik embeddings weren't you oh
this camera lid off wait this
do not go off its cable is loose or its
plug is out it's like there we go it's
it's a kid it's it's a connection issue
ah jeez how many times all right I don't
even know where I was so so what I want
to do is go through this exact example
which is in this tutorial in Python and
port it's a JavaScript and what this
example is going to do it's going to
give us the opportunity to look at the
idea of a word paired with a particular
is this where I was I'm like oh and I
haven't even recording this to disk
everything what a mess I can do this I
can get past this part where I'm stuck
Thank You Siddharth I don't understand
why anyone would possibly give me a
super chat right now with what's going
on in the Prix but I think I'm gonna try
to just go from where I walked over
there that's yeah thank you for all
everything that you do so what I want to
do is a direct port of this example from
Allison Parrish that looks at language
with vectors colors now let me let me be
clear about something for a second in
the previous video I talked a little bit
about this example which was looking at
animals in a two dimensional space where
the x axis is like their size and the y
axis the size of x axes are cuteness and
is that word Tyvek well not exactly
this these are word embeddings meaning
there is a word embedded with some
numeric data that's the best way to
describe it but it's not exactly what
you will find if you look up the term
word to Veck word Tyvek is a particular
algorithm a machine learning algorithm
to take a large body of text and produce
these word embeddings high dimensional
arrays of numbers based on how the words
appear in context in that text I'm gonna
get to that a little bit later so sort
of in theory the theory of it is we'll
end up with this essence of the word and
words that are similar in meaning or
context or what if that's a big question
mark are going to live close to each
other in that 100 or 300 or a thousand
dimensional space but I'm making the
case and this is really from Allison
parish's tutorial that we can maybe
understand this concept or practice this
concept in a simpler way to start and
that simpler way will be to use a data
set so for example this is a data set
from the ER the color survey results
from X xkcd so who in the rainbow can
draw the line where the violent tint
ends and the orange tint begins it's
distinctly we see the difference of the
colors but where exactly does one first
blending enter into the other so with
sanity and insanity how apt okay this
got some bad language on it come back
family friendly friendly coding Channel
I want to use this data set it's the
xkcd color set it's the 954 most common
RGB monitor monitor colors as defined by
hundreds of thousand participants in a
color name survey you can see more
information about that survey here so
anyway but the data set itself is over
here on in the darius because that means
open source project corpora which has a
lot of interesting JSON data sets so i
have downloaded that data set and i have
it right here so the question is can we
turn this into a word to Veck like
scenario and what kind of strange
outcomes can happen if we could pair
each one of these words or sets of words
like cloudy blue with a set of numbers
all right so let's write some code to do
this Oh internet I'll a to Internet
which means I love you and I hate you I
late you internet I love you alright
let's write some code okay so first
thing I'm going to do is I'm going to
add to this preload function and I am
going to just create a data set I'm
going to say data equals low JSON xkcd
JSON and then I'm gonna say here in
setup console dot log data so let's make
sure this works I'm going to go to the
browser where I have my code running and
kind of set a setting
network I'm looking for Network disable
cache there we go okay so we can see
here that I have now loaded into that
variable that array of 949 colors each
one is an object with a label cloudy
blue under the color property and an
actual hex value so my goal right now is
to turn that into a list that looks more
like this the label with a number
apologies for a second here
need a tissue okay so all right so let
me first write a little bit of code to
kind of process that data so I am going
to let's write a function up you know
process data put in a separate function
and I'm gonna create a variable call it
vectors it's going to be an object and
in this in this object I first want to
go through everything in data and
actually everything that's in data is in
data colors so I'm going to say let
colors equal data dot colors then I'm
gonna say colors dot length Oh
audio fill autocomplete you do not
complete me colors and then I'm going to
get an individual color is colors index
I and then what I want to do is say
vectors create I'm gonna used create
vector so this is what's kind of
interesting about this I forgot why I
was doing this all right so here's the
thing right now the data
the data from that data file is just in
a big array and the array has a bunch of
objects in it color you know blue comma
RGB I forget what it is and then like
the hexadecimal you know value like this
it looks like this I want this to be in
a associative array a dictionary but I'm
just gonna use a JavaScript object for
that so just an object where the color
blue is the property name and the value
of that property and originally in my
head I was like oh I just need to
convert this into numbers and then I
could make a little array like zero
comma zero 255 but guess what I want to
do vector math my vector is three
dimensional because there's an RG and a
B there happens to be in p5 itself a
class called p5 vector I can make an
instance of it with the create vector
function so even though eventually later
if I'm gonna be doing vector math on a
hundred dimensional vector an array with
a hundred numbers in it this create
vector won't work it's a nice
coincidence that RGB has three
components just like a three dimensional
space plates look coordinate XYZ at
three dimensional vector so I can put in
here that p5 vector create vector 0
comma 0 comma 255 so that's what I'm
trying to write the code to do so I can
say vectors I so I'm going to say I'm
actually say label equals colors index
eye color and then RGB equals colors
index I dot and what what is it in here
it is hex it's under hex and actually
I'm pretty sure that in p5 if I have a
string like let s equal zero zero zero
this is a the hexadecimal code for red I
can say color s and it will give me a
color object that has the RGB values in
it so what I'm gonna do is a little
confusing because everything is called
color
so there's the colors inside of the JSON
file and each element of the colors
array has a color label and now there's
a p5 color function so there's a lot of
stuff called color it's all different
but I'm gonna say RGB equals the color
function with the hex thing passed
through it and then I can say RGB our
RGB gbg RGB B so now I'm gonna and then
the vectors with that label there we go
so this is just a little bit of data
cleanup to a format that I want to have
it I don't know if it really matters so
much but I think this is gonna help I
create an empty object they look at all
the stuff the data the weights in the
JSON file and then one at a time I make
a p5 vector out of the RGB values and
then I should I'm gonna say a return
vectors and I suppose that it would be
nice to like pass in this argument and I
could say let vectors and then I'm going
to say vectors equals and maybe I'll
call this like color vectors ok that did
not work can't read property lengths of
undefined sketch such as line 13 let's
console.log data it must have been
confused
oh boy I'm doing this in the wrong place
ha the whole point of preload is that
it's a function that you call to make
sure that data is ready before you get
to set up because it's loading data
loading our text file loading of media
files asynchronous in JavaScript and I'm
trying to simplify that this needs to be
in set up and now I should go to say
this here as well okay here we go there
we go now oh yeah okay hold on weird
what's going on oh oh there's a set up
down here too many setups motes are too
many setups
okay here we go this is gonna be right
eventually there we go
now I have basically a dictionary where
every single one of these colors is
paired with a p5 vector with these XY
and Z values no that's not right
that is not right at all a lot of zeros
in there let's see so there is no dot RG
or dot B property of a p5 color I made
that up completely red it can call the
red function and pass in the color green
blue this should work now just make it
up stuff that doesn't work okay
r is not defined this is RGB there we go
and there we go now this is looking
right right and algae is lives in the
vector space 84 comma 172 time a 104 all
right everybody I could just like have
this view of the comments right here
where everybody is saying all right all
right okay
okay thinking about this oh don't go
away computer screen come back how am i
doing timewise I've got about an hour
left out of hydration that's bad all
right
where's my eraser now that I have this
data set we can begin to imagine a
physical space a three-dimensional space
where all of these colors live all right
so there's an x-axis y-axis an x axis
and z axis which is actually coming out
from the wall here and one color might
be over here and another color might be
here one might be off in the distance
one might be very close up right so you
could imagine this I'm trying to draw
this 3-dimensional space on a
two-dimensional surface but you could
imagine now that I could do certain
things by what if I just did a random
walk what if I did a random walk
throughout this space what colors would
I find let's actually try let's try that
oh why not excellent starting point okay
so let's say where I'm going to start is
I am going to have a position and in
setup I'm gonna say position equals
create vector random 255
random 255 random 255 now what I want to
do basically is what if I pick a random
random space in that random vector in
that three dimensional space let me find
the word the color that is closest to
that so I'm gonna write a new function
which was I'm going to say call a find
nearest and this function is going to
take in a vector will call it V and what
it's going to do is it is going to I'm
gonna I probably need to do this I'm
gonna just get all of the keys out of
this array right this is a way in
JavaScript I think I could do a for of
loop let's try that right or for in loop
I think I can do a for I think with an
op write this the reason I'm stumbling
here is this is this looks like an array
because it's a whole list of all the
colors but it's not an array it's an
object where each each color name is the
key
and the value is the vector so I need to
iterate through all that stuff I can't
just use a regular loop but I think in
JavaScript I can say for let key-in
vectors and then I can say let and let's
I guess I'm gonna con I can't think of
another name for let Veck equals vectors
ki then let's find the distance between
oh you know what though
guess what what I want to do is actually
it would be kind of useful to what I
want to do is I want to create a list of
all the distances and then sort it
that's gonna be that's gonna be nice to
do so actually let me get this let me
get this list of keys key of keys and
sorry there's like a someone talking for
a second it's for of no for of is for an
array hey there's a new video from stand
up mass which is called vector my why am
i looking at my notifications right now
just see something here
all right I have a better way of doing
this yeah sorry I just looked up my code
for each room so me to use look at my
code let me actually go back Matt yeah
I don't think that's suit to interesting
me like going back and forth with all
the different ways of the four of loop
because let me just go back alright so
the first thing that I want to do is I
want to get a list of all of those
colors into an array so it's important
to note that it looks like I have an
array of all these things but this is
actually an object where the key every
all the keys of the object are the names
of the colors paired with the value
which is the vector but what if I could
sort this list by proximity to that
other vector well I needed an array to
be able to do that and so oh quick way I
can get an array is I can say keys
equals object keys from vectors this
gives me if I just console.log this and
I say find nearest you can see now I
just have an array of all the keys but I
can sort this I can say Keys dot sort
and now guess what if I call a sort
function I can always sort by an array
by my own arbitrary comparison of the
two elements so I'm going to use the
arrow syntax here and I'm going to write
a function that compares two arbitrary
elements a and B if you're not familiar
with this arrow notation it's like
declaring if it's a new way to declare a
function in es6 not so new and I'll
refer you to my video about the arrow
function but what I'm going to do now is
I want to say the distance one distance
one is the distance between the distance
between I'm going to pretend I have a
distance function for a second
vectors key a and vectors key
be oh no no no I'm sorry the distance
between V and vectors oh my goodness
yeah yeah between hey yeah sorry I got
confused for a second remember I'm
trying to tell the array which one is
closer to V so I somehow need to compute
the distance between that and my random
Walker right V and either A or B which
one is closer and then I can return D 1
minus D 2 because what sorting will do
is sorting will take the closest one up
sorry what's what sorting will do
sorting when you have two elements if
you return a negative number it puts a
before be a positive number puts be
before a let me the other way around but
can't remember and if it returns zero
then they're the same it doesn't need to
swap them so you're just telling the
sorting algorithm which one goes before
the other one so I'm gonna get a
negative number by comparing these two
values now of course I need to have a
distance function so I need to have a
distance function that can take a vector
and two vectors V 1 V 1 and V 2 and I
could just say return p5 dot vector dot
distance this is a little silly v1 v2 so
I really just rat am wrapping there is a
distance full function already function
distance that will take to p5 vectors
and I can get the distance between them
with p5 Becker not dist but here but
here I'm but I just want a and I'm doing
that exactly here so I think let's look
at this now I should be able to look
here so let's look at this again and
find nearest cannot read property dist
of undefined all right so hold on a
second let's make sure I have a vector
here let me actually call find nearest
from the code
oh I have to call it with something okay
no wonder was undefined you can't just
call the whole point of you calling fine
nearest with a particular vector who are
you okay so this now does this look
sorted to you let me actually unfold it
there's a lot of things there's a lot of
colors in here greenish blue teal ish
greenish teal green blue aquamarine see
- right doesn't that I picked some
arbitrary spot now what is that color
actually so here's the thing did I sort
it in the correct order that would be a
question
so let's console.log V and then
console.log also vectors sorry vectors
keys index zero this would be the first
one so in theory these should be two
very similar values let's see well I'm
console logging V in too many places 64
78 to - 52 53 69 84 so that makes sense
it's pretty close you know 172 money
right so this looks right if I sorted it
the other way I just I could never
remember which way the sorting works so
I just try it both ways if I sort it the
other way you'll see I'm getting the
furthest thing the color that's the most
different okay so now what I'm going to
do is I'm gonna add a draw loop and now
this function I want it to return keys
index zero I just want to get the
closest one and so what I'm going to do
is I in draw I'm gonna say fine nearest
and then I'm going to create a div with
that color in it I'm gonna say call it
color name so I don't want to override
the color variable color name
and then I'm going to say ha I'm gonna
I'm gonna say let V rant R equal P 5 dot
vector random it's a random 3d that
gives me a random vector I think random
3d will give me a random vector and then
I will say pause add R so this is random
walk I'm just going to randomly change
that vector and create a div for a new
color name and let's change the frame
rate to like five to like one so it does
this once per second let's take a look
so look at it this is my random walk you
can see that it's not getting very far
away it started with sepia so I should
probably take a bigger step right the
step is so small that it's mostly
wandering around the same color there
aren't that many colors so I'm gonna say
r dot multiply by 10 so I'm gonna make
that step much bigger boy let's try this
one more time
let's make it much bigger we can go a
little faster there we go so we can see
now I'm walking around there should be
like each one of these steps is this
fairly similar color to the previous one
so this is the idea I am performing a
mathematical operation in vector space
walking around a 3d vector I'm finding
the word that it's most closely
associated with that one by Euclidean
distance and then I am rendering that
word on the screen so this is pretty
good I think there are some more
probably some more interesting things we
could try to do let me take up a break
for a second and let me try to do one
more example with this data set just to
show you a bit more about like analogies
and vector math and then after that
we'll move to the actual an actual word
to Vectren model
why should I use the absolute value okay
so why should I use the absolute value
oh you know what past zero zero zero for
testing that's an interesting idea let's
do that so let's start with I mean I do
need to constrain it because I don't
think there's there's no negative
numbers in this data set whoops
right so this was starting with zero
zero zero all right um actually let me
come back let me let me not finish that
video over a second before I move on
let's actually just test something like
let's say for example I want to instead
of because it's random just to make sure
this is really doing what we think let
me start with like blue so I am going to
start with not color sorry create vector
I'm going to start with blue and let's
see what we get primary blue pure blue
true blue pure blue blue primary blue
now one thing one thing that's an issue
is I shouldn't
I really can't allow negative numbers
because if I'm wandering off to negative
land there's no negative numbers in my
data set so probably to make this a bit
more accurate in terms of this random
walk where do I have that in draw it's
right here I probably want to say paws
dot X there's probably a more thoughtful
way of doing this equals oh I could I
see this I could equals I need to stay
in sort of positive lands so constrain
paws dot X between 0 and 255 or I could
do like an absolute value or something
of the vector that would be weird but
let's just let's just do this as like a
sort of a quick solution so this will
keep me in that space
and let's run this again all it'll keep
me it'll keep me in that space and let's
run this again
and we can see now eventually after
enough time we're gonna walk away from
primary blue and end up sour and Barbie
pink Barney neon pink strong pink and if
you go back to Allison's tutorial which
all this is based on let me see if I
have that here oops
you can see Alison has a wonderful
example which does the following sorry
that I don't have this sorry if you go
back to Allison's example if you go back
to Alison parish's tutorial she has an
example which does something kind of
like this which starts with a little
poem roses are red and violets are blue
and then randomly walks around and then
you see it by the end we have roses are
brown orange violets are peacock blue so
you could imagine what is a creative
project you could do that takes this
idea and expands on it as an exercise
you might even just try to take my code
and make it do exactly what Allison's
example does in the tutorial and so I
feel like I want to do one more I'm not
one more example with this data set I
think before I go and look at the larger
context of the word to vac machine
learning system that will train a model
Oh set the text of that color where can
i okay I'm gonna go back and record all
of this stuff right let me go back to
where after that if I finish the
constrain
so even though I start with primary blue
you can see I've started walking around
and getting more I'm gonna I'm gonna end
up somewhere else eventually but these
colors are related as I'm going okay so
this is working pretty well the way I
imagined it and of course Steve and me I
am to me both you chatter like Hello set
the text of that color so let's do that
just to just to say that I think will be
more interesting so where I create the
div where do I do that
I create the div here and I'm gonna say
let div equal creative and I'm just
gonna use the p5 Dom library and say
style background color Oh background
color now too bad I didn't keep that hex
code cuz I got the hex code I could put
it right there let's keep the hex code
so where I do that where I process the
data let me add in vectors label oh it's
not an object
hmm it's fine I'll just use RGB I'm just
gonna use I could just say I'm use a
template literal RGB what is it the
vector is that the vector is vectors
color name because I just returned I
just returned I just returned the key so
I probably should I could have returned
the whole vector so many ways you could
do this and now RGB video VIX okay this
is easy this is fine way to do it
V dot this is like the CSS syntax V dot
Y V Z alright let's try this and that
should do the trick alright here we go
oh I put the background color alright I
meant to set the text color but how do I
set the text color font
no textcolor know CSS color she's
probably just color there we go okay so
now we can see really how it's all so we
can see how this is a random walk
through a color space and I would love
to let this go for a little while and
end up somewhere okay
so Alison Parrish in her tutorial
actually does something very similar to
this and I might as an exercise suggest
doing this she actually takes this poem
this idea of a poem roses are red
violets are blue and walks through the
color space for each of these I've done
just a little piece of that so what kind
of creative idea can you do visualizing
this three-dimensional color space
through words through color through a
random walk I I think I should do one
more I'm not sure yeah I think when I
try to do one more demonstration with
this data set and I'll do that in a
separate video and then I will come back
and actually finally go to the point
where we look at what does it mean to
take a pre train set of word embeddings
that's actually used the word to vecna
Xin learning model training process okay
see you there background color is better
real background color worked pretty well
yeah all right there was a super chat I
think with a question which I I think I
should try to answer can we draw a
circle of color variations with it yes
so I could use a canvas you know there's
lots of things I could do like for
example if I write here if I said create
canvas 100 comma 100 I could also do a
fill feed well in the draw function
separate from the divs I could say
background you know zero fill why is it
doing that fill and I need to do it with
V V X V Y V dot Z and then draw an
ellipse which is at 5050 you know 100
100
hundred so that if I go back to my
sketch unexpected token there's an extra
parenthesis there for no reason you can
see I'm always now as this is going down
the circle no so I probably could do
something where I get a dot next to each
one of these or something but you see
the idea and I could also in this case
maybe it would make sense do not create
a new div but just like replace the
previous div so for example I could do
let div equal here and then I could say
and set up a div equals creative with
nothing in it and then I could say a div
instead here like div dot HTML color
name and there we go so this is kind of
interesting where I could do it this way
where I'm just walking through it and
then drawing it okay let me go back to
the bottom of the chat doesn't the word
as a CSS style work oh that's
interesting
do it just yes some but do all of these
these this isn't the list of all the CSS
words that would be another data set
that I could use I don't think macaroni
and cheese is a CSS word okay
all right now I'm Allison has another
demonstration on this on her tutorial
all right which you could do like the
average color of a text
I'm reading this synonyms I mean maybe
this is really maybe that's enough I
mean I shouldn't do another one
maybe I'm kind of done with this
actually let's try doing something I
have the nature of code text so let's
try it let me find one of these nature
of code texts so there's this one from
sponge man
okay nature of code text raw download
call this an NOC txt and desktop work
Tyvek
whoops you'll see txt how big a file is
this it's only 550 this is the whole
book yeah makes sense all right so what
I want to do is let's test out this idea
first for a sec um let's get rid of all
this stuff and draw what I want to
figure out is how many make a sonnet
with color make it act visualize it in
3d all these are great suggestions what
I want to do is let me do let NOC and
I'm going to say
and I'm gonna say NOC equals
join lines join lines and then console
dot log and OC dolly so I'm just testing
just checking something here I want to
see whoops not there because desktop
this is supposed to be in there so there
okay definitely got the whole text of
the book what else on my console logging
that I don't need so one thing I want to
do is I just want to do something like
[Music]
let me find like so let me just see
we're NRC dot split this could be better
but split by all words
oh but there could be some of the colors
are two words but that's fine and then I
want to say if well actually I could use
a regular I'm trying to just trying to
figure out if any of how many of the
words in xkcd show up in so because I
was say if vectors words index I
console.log words index I so I'm
basically going through I could user I
maybe using a regular expression would
make more sense but let's let me just do
this for a sec so black/white grass gray
constructor constructor is a color in
the xkcd set that's weird
that doesn't make any sense
Oh constructor is a Oh the how they get
you
and what is it is own property I think I
have to use his own property I'm sorry
I'm just figuring this out myself right
now I think there might be a better way
to do this actually I should be looking
at the chat is own property words index
I let's see this has owned property has
owned property yes so right okay great
so these are all the words that I use in
nature of code but this isn't great
because I'm missing things that are two
words
so another way I could do this would be
to another way that I could do this
would be to all the and then create a
regular expression out of that key and
then let's try key match you know NOC
console.log NOC match projects and how
do I add the flag like this gee I think
that's how I do it let's see what this
does not
so new reg XP that's right why did that
give me that error 21 Oh reg that's Ajit
that's supposed to be G okay sorry about
that
right okay so red match to Brazilian
times gray so this works rose rust cream
t.t i say t o because no no it's got to
match it with a word boundary right t is
probably in a lot of words but not as
its own word so how would I do that
equals with a word boundary like this so
let me just see let me do this matches
if matches console.log matches I don't
want to print out all the null
it's got to match something this must
not be right
string includes would be better index of
yeah index uh but uh I don't know what
I'm doing here I this is sort of
pointless I think what I just want to do
is get a small section of the book so
and I'm not gonna like let me just get a
paragraph like uh uh here I'm gonna do
something different this will be good
rainbow Wikipedia
okay
let's rename this to a rainbow so this
definitely has the cut the word red in
it and let's let's actually I'm just
curious see what this gives me oh yeah
definitely
where's red
didn't match red why not
oh I know why I probably need to do this
right yeah there we go that's what I
needed to do so this is an annoying
thing if you back slash it's an escape
character but I actually want the back
slash I need to like escape the escape
character thank you very much
okay so sky sky violet violet okay so
what I'm gonna do this is fine okay I
have an idea now have an idea I'm not
gonna use regular expressions anyway but
I have an idea okay
okay okay I have an idea this is great
I'm gonna
okay
coating challenge now just is the
tutorial it's fine all right so let me
it's fine okay
I'm sorry what time is it oh I can do
this all right
okay
okay the word defect video number three
now I'm still not into the actual word
to Veck model itself yet I'm still just
playing around with this idea of words
being associated with numbers and the
example scenario that I'm using is a
color red blue steel which is a word
associated with numbers like it's red
value it's green value it's blue value
in RGB space okay so and all this is
based off of Allison parish's tutorial
understanding word vectors which is here
under the creative comments 4x4 BY 4.0
license please make sure your if you're
using this stuff also you attribute it
this that I have a breaking news track
alright hello and welcome to word to
vector tutorial number three I am not
yet actually to the part where I'm going
to use the word to Veck algorithm model
itself I'm still just in a place where
I'm looking at okay well I have words
and I have numbers what does that mean
what kind of things can I do with that
and the scenario that I'm using which is
from Allison parish's excellent
understanding word vectors tutorial
available under the Creative Commons 4.0
license please if you're basing stuff
off of what I'm doing also attribute
this in the scenario that we're looking
at is colors colors so and you can find
you could find that down here so what I
have is I have a p5 sketch which is
loading this color database of the 904
most common RGB monitor colors from an
xkcd survey and I have did a previous
tutorial so here here's my idea this is
what I would do in this video I am going
to take some text from the rainbow
Wikipedia page and I'm gonna say let's
sprinkle some red on it or sprinkle some
blue or sprinkle some of this color what
does it mean to add some color to it and
how
Tech's change so I our everything the
tiny bit of code here basically nothing
I introduced from the previous video I
introduced a variable called lines I'm
loading this text file where I just
copy-paste the Wikipedia content into
you can think of a different way of
doing this and then now what I'm gonna
do in setup is I have a global variable
called rainbow I'm gonna say rainbow
equals join when you load a text file in
p5 with load strings it gives you an
array where every line is on a different
is in a different element of the array
so I'm going to say join lines and I'm
gonna give it a delimiter like the BR
tag and then I'm just gonna in I'm gonna
now add said I'm going to say create pr8
books create PE rainbow so right now we
should have if I go here is we should
see and I'm gonna say no canvas although
I might wanna actually use the canvas a
little later we can see here I have all
that text now what I want to do actually
is I want to highlight and color
anything in the text that appears in the
X in the data in the color database so I
think actually what I want to do is
first split this up into words so I'm
gonna use rainbow dot split and you
could check out my tutorials about
regular expressions and word weird
counting and all that stuff where I do
this a lot I could definitely come up
with a better regular expression but I'm
just gonna split by anything that's not
a character that's a through Z or 1
through 0 through 9 so I'm gonna do this
then I'm going to say I equals 0 I is
less than words dot length I plus plus
and I'm gonna say create span words
index I this is gonna the BR stuff is
going to mess up I'm gonna say this or
the BR pull this work oh boy didn't like
that did it
I'm not gonna worry about that though
the BR stuff is gonna mess that up so
I'm just gonna make that a space instead
and now if i refresh this page there we
can see all the words whoops all the
words are together in one line need to
put spaces between them this is kind of
a terrible idea but I'll just do this
and now okay so here's the thing so now
here's the text what if that word what
if one of those words appears in the
color database
so let's look I'm gonna say let me just
say and actually another way that I
could do this I can use a for of loop
let word of words and then it's just a
little bit nicer to do it this way if
vectors word if it exists then what do I
want to do I want to make I want to get
the color is I want to say let color
equals that vectors word and then I want
to say I'm going to say let span equals
create span and I'm gonna say span dot
background style and I'm using once
again the p5 Dom library background
color I wish I'd save my code from the
previous video to write exactly the same
thing RGB and then I'm going to take
sorry uh CX CY and C Z Z dot y and C dot
Z so let's see if now we can see some of
those highlighted there great so
anything that was in that database I am
now highlighting sky sky red violet Rina
now the other thing I might as well do
is I might as well store those things so
let me keep track of color spans
as an array and I'm gonna add span into
this array and now I can start doing
stuff so what might I want to do first
of all one thing I could do which is
kind of interesting is let me just get
the average color of all those things so
what if I say my calluses say let keys
equal keys I'm also gonna save all of
those sorry time out for a second
there's a really loud noise I don't
think you guys can hear this
where my 4:15 oh I had to escape the
slash right
keys I'm gonna say Keys dot push the
word so let's just take a look I'm just
curious here console.log keys so we can
see these are these are the only things
in this text that matched and again I
should have checked for two or two pairs
of words and things I'm missing a lot of
steps here but you can improve my code
that would be wonderful
make your own version of this but let's
at least get the average color here so
let's see what the average color is so
now I can say average equals create
vector zero zero zero so any math that
you can do with numbers you can now do
with those words because now I can say
let key of keys and I can say Vee is
vectors that's associated with that key
average dot add and then at the end I
can say average dot divide the length of
all those keys then all I need to do is
get nearest find nearest that particular
vector and then console.log nearest
purplish so the average color of this
text and this is directly again from
Allison's tutorial she has something
very similar in it is purplish and if I
wanted to now I could create a canvas
you know very small 150 comma 50 and
then I could say background average X
average Y average dot Z and we would see
there it is so that's the average color
and its label is purplish now what if
what I wanted to do was actually add add
some color or subtract some color and
change the text so let's let's try to do
this dynamically this will be this is
gonna be hard but this will be extra fun
so I'm going to create three sliders
our equals our slider our slider gee
slider B slider and I'm gonna hope that
one of you watches this video and gets
inspired to make a really interesting
wonderful interface I'm gonna completely
ignore anything about interface design
here and just kind of do this raw our
slider equals create slider between 0
and 255 and starting with zero and I'm
gonna do the same thing and I'm again
these are p5 functions too and I could
obviously just write write these down
relevance into the HTML directly but now
I have three sliders and what I want to
do is anytime I change any of these
sliders so I'm gonna say our slider
input slider changed I'm going to call
this same function if any of the sliders
are changed so I'm going to assign this
slider changed event to all of these and
then I'm going to write this function
slider changed and now I need to get the
values R equals our slider value G
equals G slider value and B equals B
slider value now let me just make sure
this is working console.log RGB okay so
let me run this and now as I move these
sliders you can see anytime I move the
slider any of these sliders I'm getting
this color value now I'm gonna take that
color value and add it to these colors
and then have the words change with the
new color matting I probably should be
listed I should make it so I could
subtract color too so let's actually
make it let's just make it make it so I
can add or subtract some amount between
negative 100 and 100 negative 100 and
100 an egg ative 100 and 100 okay so now
in this slider change what I'm going to
do is I'm going to go through all of the
spans and keys I guess III need to I
could probably more thoughtful Laurie
factor this later
but men make these global variables and
I'm going to go through all of the spans
let's pan of color spans and I'm going
to get the key the the word is the HTML
of that span actually don't have to look
it up otherwise then the vector is the
vector associated with that word then
I'm going to say vector add RGB I think
this will work right this up this takes
that vector and adds these amounts to it
then I need to say nearest equals find
nearest oh I need to make a copy of it
so I don't actually want to change that
vector I need to make a copy of it so
I'm gonna say copy because I'm pulling
just a reference to the vector that's in
that object and you don't want to adjust
it that's the actual vectors associate
of the word I want a copy of it that I'm
gonna mess with and then I want to find
nearest to that and then I'm gonna say
span HTML that word so look at this
these are let's take a look at this
these are all the color words let me add
some more red to them this doesn't seem
to be working
oh I'm so excited to see this work what
did I do wrong
fine V span each Jim Oh nearest nearest
nearest right word is the original word
nearest is the new one after I added
that color I think this is gonna work
this is very exciting
so I need more space ready here we go uh
add a lot of red and I got bright red
and bright magenta let's add a lot of
green I got white already and a lot of
off-white white right if I add I take
away what subtract color I subtract
color now I've got black everything is
black so look at this you could take you
could take a whole text any novel you
like and you could say let's just
rewrite it with a little bit more red
and find any instance of any time of
color as reference and guess what when
we do this with a more generalized word
to vex system we could actually add
start to add this idea of a dread to
words that aren't actually colors we
might have a corpus that includes way
more than just these you know 496
whatever that number is color values so
hopefully you're starting to see the
idea here is that with the idea of word
embeddings with words associated with
vectors with text associated with
numbers that if I could do math to the
numbers I can go translate back into
words I can always translate those words
as the numbers to more math and
translate back and do all sorts of
strange transformations like this so
make a better version of this think
about what texture using fix that
problem for me where I look also for
like pairs of words that match make a
nice interface I don't know think about
the way you design this there's so many
possibilities I look forward to seeing
what you make with this and see you in
the next video where I actually now go
to look at the ml 5 library which has a
built-in class a built-in basically
feature that allows you to work with
word Tyvek without having to write all
the math yourself which is what I'm
mostly doing in this particular video ok
good bye
Oh change the background as well wait
stop hold the presses
ah I totally forgot data I must also
change change this as well V V X V dot Y
V dot Z okay here comes now as I'm
adding the colors it's also changing
it's also changing what's actually the
background color as well so we can see
we can see that that's actually changing
it alone which is a nicer way of looking
at it okay now I'm really going goodbye
Wow all right ray Jackson at Daniel
sponsors can't as well I'm not sure what
that is referencing a Wikipedia link to
repo Oh can't post links yeah I guess
you have to be a moderator Oh is there a
Lippo project that's like this does
Allison reference that and I'm just
completely forgotten it whoops blue
Lippo colors
oh I don't know interesting alright
everyone so this is it for today
basically I have a tiny bit more time I
don't want to launch into the next piece
of this I'm going to continue the word
to vex stuff next week
but what could I do in 30 minutes I can
do this probably like 15 minutes right
no problem definitely want to do this
[Music]
well I don't know what these are I don't
know what generator sorry you gotta
learn that that's pretty oh no this
hurts my brain come back down I like
this one though
[Music]
octahedron you know we should do all
right we're gonna do something I really
liked this video that Tom Scott put out
not this one not this one not this one
not this one not this one yes this one
no it's just you I think it's just you
alright so how this has got to be easy
right okay
all right co2 challenge Oh some thank
you Kraken you so you could use
something like this to make a matching
algorithm based off of user inputs
interesting interesting sierpinski
triangle that's a good one
haven't I done that already though
YouTube chat bot no no alright do this
[Music]
what kind of shape is at seven segments
one two three four five six seven eight
why is it why is it encoded I thought
there was something about there being
eight possibilities like a zero you
could have a zero or one you have seven
bits for seven segments why is there
eight is anybody watch this video I
don't feel like watching it right now
it's too long I won't have time to do
the challenge i watch the whole video I
guess I could watch it on a double speed
Oh decimal point that's why it's eight
okay
coding challenge I watched this video
from Tom Scott the other day which was
something about seven seconds displays
and what's the longest word you can
write with seven segment displays and
there's actually some code for how to do
this at the end and I thought yeah let's
make this in the P 5 web editor boy I'm
not ready for this
login its coding train so the first
thing that I need to do I think is I
need to actually make a 7 segment
display this is gonna be super awkward
because I'm gonna do this in a terrible
way but it's the only way that I could
think of to do it right now and I've
only got 30 minutes before I have to go
but now if you look at the how long this
video is even though I don't know how
long it's gonna be I expected me at
least 471 commits because this is gonna
run into a lot of problems but let's
write a function - let's call it 7
segments and let's call that function
with like some sort of like XY offset
and so I'm gonna say push I'm gonna say
pop and now I'm going to draw like so
what's one of those one of those
segments is one of those segments looks
I guess each segment looks kind of like
this right it's like sort of like a
rectangle with two triangles on the end
and then there's like another one here
here here here here here 1 2 3 4 5 6 7
and then there's 1/8 there's a decimal
point option so I'm just gonna I'm gonna
be lazy and just make these rectangles
right now and then we would get if I
have time I'll make it nicer you'll make
a much nicer version of it so let's make
let's make these rectangles so let's add
a so first let me say translate to that
x + y and then I'm going to say let's
draw it from mooners let's draw it from
the top down
it's a little bit weird below just
consider the top center I'm just a wreck
mode Center I'm going to say rekt pecs
why and 100 comma 10 let's do this and
I'm gonna say fill zero oh let's not put
the background here let's okay let's put
this I forgot what I was doing in here
oh no we're gonna go 200 200 what's
going on why is it down there can't miss
is 400 you're there you should be here
what's going on
only rectangles so disappointed hold on
can I start this challenge over wait
what did I do here Oh cuz I put the X
I'm the worst of the worst I'm hoarse I
want to start this challenge over cuz
now I know what I'm doing okay I got 30
minutes here we go
I mean how hard could it be to make this
nicer-looking this thing would have a
good idea for me okay wait hold on I'm
gonna I'm gonna cycle the camera let's
let me give give me one mulligan on this
because I preferred this not to have any
edits and where's my eraser and there's
gonna be fun this is so totally random
I'm gonna do it anyway hello welcome to
a coding challenge in this coding
challenge I'm gonna attempt to make a
seven segment display and then I'm going
to write the longest word you can write
with a seven segment display now this is
clearly based off of this Tom Scott
video I watched the other day that's
kind of interesting
take a little bit of code in it it talks
about the history of 7-segment displays
and what they can and cannot display
watch that video if you like I'm gonna
attempt to remake it in the P 5 editor
within about 30 minutes cuz I got
somewhere to be and let's see how this
goes I'm sure if you go and actually
look how long this video is it's longer
than 30 minutes I'm sure I'm gonna run
into a lot of problems but here's a p5
sketch if you've never seen p5 before
it's a JavaScript library you can create
JavaScript animations and drawings and
things right there and the browser also
by using the p5 editor lots of more
stuff about that and other places on my
channel I'm sure okay
so first I want to write a function
called like seven segments and let's
think about this so a 7 segment display
has seven segments and each one is kind
of like I'll shape like this you know a
little rectangle with two triangles I
might just do this as a rectangle to
start so there's one two three four five
six seven and then an eighth option
which is a dot so I need to brought
write a function that can basically
render all of these and either fill them
in or not and fill the dot in or not so
it was really ridiculous to kind of do
this in JavaScript the canvas but why
not it'll be fun I mean I'm having fun
are you having fun so let's start by
saying let me use translate so I'm going
to add a push and pop so that everything
that happens in this function is kind of
self-contained I'm going to allow give
it an x and y and so the first thing I'm
going to do is translate to this x and y
and then hmm what if we have so many
different ways to do this I don't know
let's say rectangle 0 0 100 comma 10
fill 0 and then I'm going to call
7-segment and let's just put this at
like 100 comma 100 so there we go it's
here's my 7 scalars one segment of my
seven second segment display over there
no it's probably should be like a little
thicker than that and obviously I'd want
to use variables for all these things
but now if I add a
second one I can say where would this go
negative 50 comma 0 20 100 oh that's not
the right place at all 20 okay let's
move it over 25 yeah there it goes oh
because I didn't use rec mode Center
interesting yeah that's fine let's not
use rec mode Center and let's push it
down a tiny bit there we go well this is
doing a horrible job let's do this and
do it at 190
oops I mean 90 there we go
oh it's 20 80 80
mm-hmm maybe this should be 10 a little
little day little space there no no not
that
this should be this should be 20 no no
no 30 there we go perfect
oh that's exactly how I always dreamed
it would be oh this is wasting a lot of
time yeah this is like so so this is
like very cringe coating okay 100 120
120 Oh beautiful 130 140 there we go
perfect oh my goodness look at those
segments this is beautiful
then now we just need this again but we
need to just go down quite a bit further
so like 170 170 and 240 270 280 and now
let's draw this at like 10 and 10 and so
now in theory that's what I want to do
is say no stroke no stroke oh no no I
wants a stroke zero a no fill so why
why oh because and the fill is there so
let me put this in here and let's so
there we go this is now my horribly
designed seven-second just like I can't
wait for people to redo this and
actually make it the proper 7-segment
display design but let's see here's the
thing now what I want to do is give it a
number like all I need to do is give it
a value and so I couldn't give it an
array maybe I should give it an array
like zero with that has zeros and ones
but technically speaking I just if I
want this to be somewhat pure and
related to the original 7-segment
display the idea is that I just give it
a number an 8-bit number separate out
all the bits and then apply the fills
according to what those bits are let's
try it so let's say how do I do this bit
stuff in JavaScript bit masking maybe
bit shifting I could do bit shifting or
masking bit masking JavaScript let me
explain what I mean by this oh boy
okay so what I mean by bit masking for
example is let's say I have some binary
number that's 8 bits 1 2 3 4 5 6 7 8
what if I just want to know is this
number a 0 or a 1
well I could do some kind of like an
operation like what if I did an and
operation with all one's right if I did
an and operation with all ones well no
no no no sorry
and and operation with zeros everywhere
except for the one bit that I'm looking
at then all of these will end up being
zeros and this will either be a 0 or a 1
so I could kind of test the value that
way I could also shift all the bits so
that this one always just ends up over
here and then I could do something and
then I could basically do an and
operation with just one something like
that right I'm leaving
left shift or an bitwise operators
oh it's a nice way to do it sorry I'm
looking at this tutorial here I can use
or ampersand so let's try all right so
let's assume we get this value and I'm
gonna I'm gonna say no loop here and
what I want to do is let's say say I'm
gonna say console actually let's just
look in let's play around in the console
for a second this is a nice way to
figure out JavaScript code like if I say
let's say I say the number 100 people
are producing all sorts of stuff with
the chat for me and I say shift by 1
does that make sense I get 50 it's like
divided by 2
think about that that's crazy 100 in
binary is there a nice look at this this
is 100 in binary if I shift this over by
2 I have 0 0 1 0 0 0 1 what if I say 50
in binary look get that right yes yes
but that's the same exact number but
shifted over fascinating amazing so what
I want to do is let's go back to here
and I used to do this stuff all the time
and no one ever has to do it anymore so
it's hard to like figure out on the fly
it really should plan this out in
advance ok so let's say first shift
first I don't want to shift at all so I
just want to know what is the value of
that last bit so if I do this I get a I
get a 0 if I do this I get a 1 right so
and and with a 1 will always give me the
last value of the bit so I should be
able to do this might be a I'm in some
other code this code is irrelevant from
a different tutorial
what I can do is I can basically say Val
so I want to say what is I'm gonna say
let result basically I want to say let's
do color mode color mode RGB one so I
just want to get a 0 or a 1 so I am
going to say fill the value shift no
shift ampersand 1
so that's filling it it's a 0 so if I
pass in one it's filling it a pass in a
2 its 0 3 a 4 so I shifted everything
over 1 and then masked it now I could
say for this one and I'm sure there's a
nice way to do this in a loop shift that
over then I could just do it by 2 by 3
by 4 and I probably don't have the order
right so by 1 by 2 by 3 whoops by 3 by 4
by 5 by 6 there we go so now if I say
pass it in 100 I get this 200 I get this
so whatever that theoretically that
value all I need to know is what number
corresponds to which letter okay so this
is good now we need some kind of
dictionary to show me all the letters
and how their what their corresponding
number is or a big array boy how am I
gonna do that does that even exist I
don't have to Google this for a little
bit and come back 7-segment display
dictionary or how about like specs
specification
No
oh here we go 128 states
I'm not using the convention but could I
adjust mind to the convention easily
right 0 1 2 you need to label your
segments correctly but yes you should be
able to get them I wasn't kidding when I
started to go at 5 oh I forgot out the
dot but the dots the easy part
I'm just like staring at this as if
that's gonna help oh I could have done
it like this
ah here we go alright I found what I was
looking for you can just change the
order easily yep alright
ABCDEF alright I'm back I found exactly
what I'm looking for which is the
hexadecimal encoding for the displaying
of the digits 0 through F this will help
me right because there's 0 1 2 3 4 5 6
so on on on on on on is the number 0
which should be this this in hexadecimal
could you just give me the non
accessible version of this but I think I
could probably just do this so if I go
back to my code right and I'm gonna pass
this in okay that clearly didn't work
but you can see that this gates gives me
1 2 3 everything on but this one so I
think the order is different so I'm my
order is oh yeah my order is like so
ridiculous it's top left right middle
the bottom left bottom left bottom right
box so I should really change the order
of mine really cockamamie way of doing
this so the next segment is the one
that's on the right so let me write some
comments here top top left top no that's
not right yeah top right middle bottom
left I think this is right I don't know
if this is right bottom right
whoops bottom right and then this one
should be hopefully the bottom and now
let's just make sure I'm right top oops
yep left yep
right yep middle no oops uh-oh this goes
here middle and bottom left okay I'm
pretty confident the rest is right okay
so the first one is the top so I think
it's backwards actually hold on okay so
all right so with zero if I go back to
Wikipedia zero is on and on and on and
on off so the middle is the last one
okay you go back here so the middle
should be the last one where is that one
middle that should be the last bit and
then middle is here
oh no no no the middle is the first one
because it's the only one that's
different middle okay and then what is
this I don't know what's next let's move
them all down
this is a boy I really messed this one
up okay all right so that's a zero and
by the way I should really design this
but all right so let's see so let's see
that right
trial and error is your friend a 1 a 1
interesting oh yeah oh these are the two
that these are the only two a one is
just these two so this one's right this
needs to switch a map of the letters to
the segments look up the Wikipedia are
they hold on we got to do this more
methodically all right what I want what
I want is not this right I want to know
which one of these write clearly G this
last one is the middle which for me is
the first one and then like if I look at
this the the middle is the last one then
the second two are the the last see ah
this is driving this is gonna drive me
totally crazy I don't want the
hexadecimal it's further up the page
further yeah further up the page you
don't see it though this oh this this is
showing me all the bits this image look
up the top of the wiki this is the order
abcdefg oh but they were numbered how am
I supposed to do that hey you know I'm
back you didn't have to watch that the
chat is full of rage apparently because
right in front of my face abcdefg okay I
just didn't recognize that because
they're letters and I'm thinking about
them as numbers okay so this the top it
goes and actually this is similar to how
I thought of it so if I go back to my
code here it should be but I think I'm
doing it backwards so I think the top
rectangle is the last one well let's
let's try it let's try it this way top
so it should be oh yeah so it should be
top is the first one is the top one
which is this one then to the right is
still is a is a tall one this is to the
left oh I screwed this up let me go back
to let me go back to like the actual
so this is now I think I so hold on
Matt's here I'm gonna we're gonna go
back and edit again yeah all the
comments are out of step that's why I'm
going back top
top left right
it all bottom-left okay I think this is
right now
oh thank you nobody in the slack chat
now chat cuz I can look at that thank
you for posting that for me okay
label them ABCD and not top bottom left
ya think
okay okay the chat is full of rage
they're all telling me it's there it's
there on the page it's there on the page
I am blind and so focused on the numeric
indices that I didn't realize that this
is it right here ABCD efg it's that
order and then of course there's also
this last one here so I should go back
to my comments my lovely comments and I
should say a and then top left is F and
top right is B the middle is G and the
bottom left is e C and then what's
letter do I have left D and now I can
just put them in order
ABCD efg hijk LMNOP qrs yes you're
watching a person singing the alphabet
song while coding it's very soothing
okay so this is good now I just need to
fix this vowel shift one shift to shift
three shift four shift five shift six
and then this should be good let's try
putting in some things that we should
get let's go back down to here and let's
see what we get here oh if I I might
have done it in Reverse which is fine I
could just use this number if I did
reverse let's find out okay so now let's
put in here there we go No
ah that didn't work it didn't work it's
five o'clock I have to go comments on
the lines themselves would be metre yeah
let's hold on yeah oh yeah I'm missing
the bit for the decimal point so let's
add that this doesn't look right but
let's at least add the bit for the
decimal point decimal point and then
shift seven and then I think this it's
all going to become clear we draw an
ellipse at like a hundred four hundred
ten ten where's that ellipse four
hundred two hundred trial and error is
my friend there we go a little smaller
beautiful a little bit up okay so now
let's say shift from seven to one so I
think actually this should be the first
one is shift by seven well this actually
work do I have to put these shift by
seven six five four three two one and
then this no shift hmm all right what
did I do wrong oh so close so close the
decimal is the first bit right so that
should be right why is this
yeah the middle maybe this must not be
the order right this must not actually
be the order I think this is telling me
the order middle this is actually the
order zero one two three four five six
seven eight yeah this is the order to be
honest it is the order is actually the
middle thing is first or last in my case
so that mess this misled me the ABCB the
actual thing that's first is the is the
is is G it goes G f GF a B well it's so
confusing g g fa b f whoops whoops come
back no come back cut paste and now
shift by seven shift by six shift by
five shift by four now shift by is this
right three two one and then the and
then zero okay so let's see here
this is right the question is is this it
keep going a be no then it is this one
this one this one this one this one
that's so then the order is a EDC
decimal point I think EDC decimal point
maybe as an EDC or CDE let's try II D
okay so zero is right now let's try some
other ones
oh go tom
I hope you've never watched this video
let's try one so let's try one gfa be
EDC decimal point the hora yeah no
kidding of horizontal segments are too
wide those pins on the led it isn't the
order no f GF a B EDC DP but it wasn't
the other order either it certainly was
the first one was this one alright hold
on I'm gonna trust the chat I should do
this again GF a be EDC DP I remember G
hold on let's do something fun let's do
one for each segment let's do function
no a a seven as is a I should really do
this I should really do this in a loop
and these should be objects and I could
order them in any way that I want it was
the other order the table is seven bit
hex it may be one bit out the abcdefg
you had before is perfect
alright let's go back to it
abcdefg so what so this is right why is
it not showing me a zero what's wrong
and now gfa be EDC is that correct
G F a b e e d c decimal place and we've
got half an hour past and now we've got
whoops and now we've got 7 6 5 4 3 2 1
and decimal place ok that's a zero now
let's try a 1 all right that's what I
had before that was wrong
oh that's just the link to what I'm
doing you weren't actually giving me a
correct answer okay hold on
Matt's here we're gonna make a crate
we're gonna go we're gonna go way back
and edit people watching the version of
this the final version of this will
never know the horror when they will
know the horror oops no no no
all right
and back to this
so what you're telling me okay
me I am semion yours you're shifting the
for the for the dot also seven which you
want to do zero I would think right
dinga dinga ding but how would i I see
so why is that wrong well so if I do
eight in the middle
I lost the YouTube chat you should
honestly redo this later and use a loop
or something no kidding
the DP is seven started six
so is this also correct like this the
decimal place is really first or last
right this is correct yes
is this correct I kind of want just over
from scratch yeah I think this is right
I think I got it right
not technically why not
I have to go I'm gonna come back and do
this again in like an hour I'm gonna
start over
well let's try
one
- except I really should do it the other
way around like
yeah
close enough that the issue you're
telling me is that it's not right
because the where is the decimal place
like which bit is the decimal place
okay the question is how can I make this
into something that Mattia can follow
so I'm gonna go back to I'm just gonna
start over I just this I should just do
this again right I don't know what to do
I'm lost
it's a matter if you put the decimal
place bit on the left or right of the
other bits I don't know that there's a
standard for that right right I'm not
gonna worry about the decimal place
right now and it make people want to
make it read all right I have the
question is now I think I've gone too
crazy that I'm just gonna do this again
I had some practice I mean I might as
well just start over right
okay
all right let's do it again I have to go
but I'm not going to okay
alright consider Opie
all right here we go whoops No
all right everybody here we go we're
gonna make this happen
oh right hello welcome to a coding
challenge I'm very excited about this
one and this is a second try by the way
the first try it's been about got really
like things went haywire they will go a
wire again but I'm going to give myself
about 30 minutes here late for have to
be to try to create a seven segment
display now I got this idea for watching
this Tom Scott video about seven segment
displays and Tom Scott talks a little
bit about how they work and looks at
like what kind of letters and numbers
they can display and uses a regular
expression to try to find the longest
word you can write with seven segments
displays so I mean this video I just
want to make I just want to make a
visualization of a seven segment display
which is in javascript in the browser in
canvas which is admittedly kind of a
ridiculous thing to do but I feel like
if I can make one then you the viewer
can take what I've done and make a
bigger display then you can display
different words you could implement Tom
Scott's code with the data files and
actually visualize that there's so many
possibilities all right so let's talk
about the seven segments the seven
segments of a seven segment display are
like this one - there's seven three four
five six seven now of course there's
they're like a nicer design but this
sort of looks like this they're kind of
tilted so I'm gonna make a very crude
version of it probably just with
rectangles and I'm not even gonna use an
array you could do this in an
object-oriented way to keep track of
each one of these as an individual
object then you get an array of object
at each one these things there's a lot
I'm gonna just do it in the crudest way
possible so first let me try to draw
this pattern and one thing that's gonna
be important is I do this it's a good
thing I'm on the second try cuz I really
botched this the first time is if I go
down here this order is super important
ABCDE
gee and decimal place and okay so I want
to draw them in this order so let me go
back to my code let me write a function
called 7 7 segment and then I'm going to
say at the beginning I'm gonna use push
and pop to kind of convey the ideas this
function I could make an object I kind
of would like to make an object yeah
whatever this function is going to draw
all of the segments relative to some
point so I could probably might make
sense to draw it relative to here it
might make sense of drought relative
let's try drawing it relative to here
right now so the first rectangle will be
and I'm gonna this is very gonna be very
hard coded I admittedly let's say it's
going to be a rectangle and it's going
to be let's let's go 10 pixels in 10
pixels down 100 pixels wide 10 pixels
high and let's say fill 0 quick
messaging me whoops fill 0 I know the
chat is gonna be full of rage again it's
just bound to happen oh I got to call
the function I've really lost my sense
of how to code call the function there
it is let's make it a little fatter and
let's put it 20 pixels in in 20 pixels
down and let's actually put it 40 pixels
in because the next one I want to do B
I'm going to put at it should start at
like a hundred and forty pixels 40
pixels down then it should be a 20
pixels wide 100 and I could have rotated
it but basically I want to do that then
I'm going to do the one on the left
no no what's next then further down
again so everything's the same each
length is 100 plus there's a buffer of
like 20 so I need to make this one 60 I
think there we go
and then what's next D and I should put
some comments here right this is a this
is B
this is seen of course I could create an
algorithm write a loop I'm gonna use
translate rotate so many possibilities
I'm not doing it that way there's seven
I could do well seven adi is at the
bottom d is actually really a but just a
lot further down like 220 it's just
guess there we go
260 up whoops no no no that's right now
what's after D a b c d e yes he is
actually like see he is very similar to
C but with the X values of a right which
is 40 and the Y value that's why is it
huh what did I do here oh maybe this one
is real hold on hold on everybody
yeah that's right this one this one is a
little bit off it's got to go oh it's
gonna be oh ah actually if these have to
be a little bit smaller I forgot about
the Buffalo buffer so this is actually a
little bit shorter like this there we go
that's kind of right and then the first
one also should be that most fun I've
had coding it looked nice just like hard
code rec it's like it's like that first
it's like the first week of learning to
program in p5 it's just like hard coding
shapes I love it
F which one's F F is up higher it's like
B but over so let's start with B yeah
start with B but move it to here there
we go and then this is f then G is the
middle whoo this is exciting G is most
is like a it's like a but it's halfway
down so like 140 yeah look at that my
seven segment display part one of this
now I'm just
keep going okay so here we go good
excellent okay now what I want to do is
I'm gonna say stroke zero and I'm gonna
say no fill okay whew I don't like how
that looks a little more can I get a
like a what if I just do like all of
these like a little bit less like 78 18
whoo I'm starting to like this 18 oh
come on just bear with me you don't mind
me doing this just go make yourself a
cup of tea I'll be done in a second
there's sometimes just like hard coding
stuff it's just like the loveliest
nicest thing to do I don't keep the chat
is full of rage the chat needs to relax
take a deep breath fine
this is soothing okay okay oh I like it
it's weird but I like it okay so this is
like nonsense what I've done you are
gonna make your own be much nicer
version of this with little triangles
and all sorts of stuff like that
I really botched it here but what I'm
gonna do now is I need to figure out a
way to turn each one of these on or off
I don't know where this pink marker come
came from but I love you pink marker so
how am I going to do that so the idea of
a 7-segment display is that each one of
these is a scientist by the way a
decimal point here which is why they're
eight is assigned a bit in an 8-bit
number so you could think of an array of
zeros and ones that has eight in it 0 0
2 3 4 5 so that's 9 right where I would
go 0 0 1 0 0 1 0 and then the decimal
place I think sometimes the decimal
places may be the first or the last bit
I'm not entirely sure trying to look up
the documentation for this so something
that I could do those instead of having
an array what if I had any generic
number 256 so I can use something called
bit shifting or bit masking so I can do
a bitwise operation oh this is I'm so
happy to do a bitwise operation you very
rarely in programming anymore especially
JavaScript actually shift the bits right
that's usually
you're doing in a matter of like glory
level place so let's say I have this
actually as a binary number and what I
want to do is I want to figure out which
one of the if this particular digit
let's say is on or off well if I do it
at what's called an and operation with
one right answer but the wrong number of
things here but you know whatever if I
do an and operation with one all of
these will always end up zero and then
if a one is here if a one sorry if a one
is here I will get a one if a zero is
here 0 and a 1 is a zero so I can if I
can shift the bits over and then and
with one I just have to not shift to
check this one shift by one shift by two
shift by three shift by four shift by
five supposed to throw etc so and in
order to do this in JavaScript
this is shift the bits to the right
shift the bits to the left and then this
is and I think also to an or if I wanted
to do an or operation so in other words
if I say for now here's the thing I've
kind of gone I went around in circles so
this one's trying this earlier I want I
need to do something to test so in other
words if I look down here this is you
can see this is if the encoding is ABCD
efg I don't know which one I'm doing G
right then that's 7 1 2 3 4 5 6 7 then
on on on on on on on off so to get a 0
presumably I pass this in and what I'm
gonna do and thank you to be I am sue me
for making this suggestion I'm gonna
pass in a value and what I'm gonna do
first is just shift it by 1 because I
got to get rid of the thing for the
decimal place so I'm actually just going
to shift it by one before I come in here
and I didn't actually do the decimal
place I'll let you do the decimal place
maybe your version so now what I'm gonna
do is I'm gonna say fill valve I 6 or 7
or 1 I don't know
now I'm lost I need to shift these all I
think I think the first I think if it's
ABCD efg yep I want to shift by
six yes and then ampersand it bitwise
with one right this is what I'm talking
about
and then I also probably now this is no
good I want to do color mode I also need
to do color mode RGB one so in other
words what I want is to get a zero a
zero means black and a one means white
so this now if I shift shift by five
shift by four shift by three I totally
did this wrong I've done it wrong again
but let's just get this out of here
shift by two shift by one and shift by
zero oh so close that doesn't look right
what did I do don't maybe I need to
shift the other way here hold on let's
do this
there we go yeah I don't know why I got
confused
so this is actually right I don't know I
was thinking I had to shift the bit out
of the place but actually I just start
with six here right if I shift the bit
out of the place oh sorry out of the way
then I need to start with seven here I
think that didn't work anyway I had it
right good enough okay that's a zero tip
of the fact that I kind of want it up
highlighted to be I kind of want it to
be inverted so I actually should say let
me write a function get color and the
value and the amount of shift and what
I'm going to do is return so I'm going
to say oh the red value people I think
warming in the chat they're saying I
want me to make it red the red value is
the value with the amount of shifting
and ampersand one and let's forget about
this color
thing and let's actually say a Matt
let's let's do this multiply this by 255
and say G be it actually this is silly
these can just be zero I'm only doing
the red value and then I'm gonna say
fill get color get color and shift by
six with that value a return color RGB
and here we go
alright this is very exciting I'm just
gonna sit here and copy-paste this
calmly smoothly
little by little four and by the way if
you were wondering why I'm not using a
loop here it's only because I want to
drive you crazy and I've lost my
semicolons a four three six five four
three two one zero
all right so what's going on 250 times
as value shift oh boy this has to be in
parentheses there we go oh but it's
backwards so 255 minus R minus R no no
no that was right actually it was right
and then it shouldn't be zero it should
be actually I should really let the
alpha be this and then if the Alpha is
zero here we go zero okay so now look at
this let's say let no
equal so now if I go here and I say this
is zero zero
oops no go away zero
lots of copy-pasting you can speed this
up somebody one two three four five five
six yes you're watching a person copy
paste these hexadecimal things one at a
time
six seven can we put some like music or
some animation and post-production here
speed this up I don't know anything
creative to make this look like a good
watch seven eight I don't know ten nine
I lost count nine okay now set numbs
index index let index equals zero and
then I'm gonna say frame rate one index
plus plus zero one two three four five
six and error okay so now we can say
index plus plus index equals index plus
one modulus nut noms length and I'm
gonna make the frame rate five and I'm
gonna zoom in on this and here we go oh
that's way too fast for me I can't
handle it let's put on some music
and thank you very much there's your
7-segment display counting through the
hexadecimal values for 0th row so now
here's the thing I've got an exercise
for you could you make a clock out of
this
could you make a big make this
object-oriented refine the code make the
design actually look like a nice seven
segment display being about colored make
a rainbow seven segment display so many
possibilities and also go back to this
video and if I scan here towards the end
this is the longest word apparently that
you can display on a 7 segment display
so follow Tom's code it's a node but
there's no reason why instead of using
like refile sync you can just use load
strings in p5 get that same database and
you can add this code in and do
something fun with it share with me I
mean share it with Tom Tom Scott this is
not endorsed by just did this on my own
but I think it could be some fun
possibilities of things you can make
during the p5 web editor share it on the
coding train comm website seven segment
displays somewhere share it with me on
Twitter at Schiffman or all those kind
of other places Mastodon whatever your
true dot space and I'll see you in a
future
[Music]
that was painful to white right watch
what joke
[Music]
you should have x20 this is going far
better than before all right everybody I
hope you enjoyed that there I just made
my guest video for Tom Scott's channel a
Matt chick we edit this by October 15th
and I'll just submit it I've got to go I
am half an hour late for this meeting I
was gonna go too but I stayed here
because I love you the viewers of the
coding train and I'm gonna save this now
I'm so incidentally you can get going
with the code right now someone could
paste this into the YouTube chat and I
will be back in a future coding
challenge I'm gonna continue the word to
vex stuff next Friday that's probably
the plan so that's my tentative plan is
continue word to Veck with and I'm gonna
use ml 5 and use the Jensen Python
package and do more stuff with that ok
thanks for watching everybody today and
add a round border to your rectangle
that's what I should have done anyway I
don't gonna change this stuff now you're
all much better than me and I'll see you
there ok Oh Nathan growl you're super
chat come on unnoticed okay hold on no
that's send a super time where do I find
them it doesn't there's no way if it
goes by without me seeing it oh wait
wait a solar liner is that you Nathan
growl who wouldn't have to
you have the rainbows in it that's
amazing
thank you solar liner rainbow super chat
made me so happy
dark background oh yeah
hold on
or how about
I think actually it looks best with this
and then
alright I'm gonna do the quick quick let
me what are some other like small
refinements and maybe I'll just do a
quick intro the rounded rectangle ooh I
like this
there we go this looks better right okay
okay
I know I know I'm just trying to think
of like what's 20 25 would be better
what
okay
how interesting
there that's even better okay well maybe
Austin okay okay what you are about to
watch is a coding challenge in a moment
I'm going to say hello welcome to the
coding challenge I apologize of the
zapping twice but I just wanted to show
you what it is at the at the beginning
and because I also made some refinements
thanks to things that people in the chat
suggested after I finished the coding
challenge so what I am tempted to make
here is ace what's called a seven
segment display this is based off a Tom
Scott video that I'll reference in a
second and you can see here here is the
final result and the things that I've
added after the coding challenge finish
we're a little bit of nicer colors and
rounded rectangles so it's a little bit
nicer so I hope you make something fun
with this and enjoy this coding
challenge where I do this in kind of a
way that's gonna make you want to
complain about my coding abilities but
that's fine complain away I'm here for
it in the comments at me all that stuff
enjoy and then one other option might be
alright I know that coding I know that
coding challenge seems like it just
ended but I people in the chat had some
additional suggestions that I was
tinkering so I want to just show you
these quick suggestions which are for
example I added rounded rectangles which
you could see makes it look kind of nice
and then also what I did is I said of a
stroke I gave the off segments like a
little bit of alpha so it's almost as if
they're appearing it feels more like an
actual lit seven segment display but I
think you are gonna be even more
creative in what you end up making with
this so I just wanted to show you those
little quick defense goodbye so I will I
will let Mathieu figure out whether it
makes sense to have an extra intro or an
extra thing at the end or neither and
then I have to do one III really is
going to shut this off and record these
but I think
what I'm going to do is just do it with
you guys watching so where's a good spot
here
but I'm gonna go ahead and get through
trying to find a nice thumbnail or
something II spot to pause
no this is good I'm standing in front of
Nabil this is actually it's weird that
he's like frozen here alright never mind
I'll just start with his outline this is
better like it's there okay okay oh and
I haven't been recording any of this to
disk
oh it's fine we can take it down from
YouTube hello welcome to another okay
hello welcome to a tutorial about long
short term memory networks neural
networks machine learning with a guest
Nabil Husein so what you're about to
watch is an edited version of a live
stream that happened a couple weeks ago
with Nabil Husein who is a
brooklyn-based
artist and educator a little bit a lot
more information about Nabil in this
video's description that you can check
out Nabil is going to show you how to
train a neural network to learn about
let me let me do this again I forgot
what I was doing here and I have to
mention spell dot run okay hello welcome
to a video tutorial this video tutorial
is part of the spell series so this is
sponsored by spell thanks very much go
to spell dot run slash coding trained to
sign up for an account before you fall
along with this tutorial if you want and
ok so what are you about to watch this
is an edited version of a live stream
that happened a couple weeks ago with
guest Nabil Husein Nabil has seen is a
brooklyn-based artist and educator he
has lots of super wonderful interesting
work and things that they've done that
you can learn more about on his website
which will be linked to in this video's
description I'm just going to show you
here is how to take a corpus of text and
train a machine learning system this
machine learning system will use
something called an LS TM it's a neural
network architecture that deals really
well that's really good for sequences
like sequences of words or characters or
musical notes
so he's going to train an LC I'm a model
off off a corpus of text he's going to
train that in the cloud using the spell
platform in tensorflow
then he's going to download the Train
model and use it in javascript in the
browser with ml5 to generate new text in
the style of the original corpus on
which it was trained so that's what
you're gonna watch from end and
beginning to end a full tutorial it's
going to use you're gonna want to have a
Python environment set up know a little
bit about spell and Knoll and also have
like a code editor so you can write some
JavaScript and code with HTML so
notifications go away notifications um
so hope you enjoy this video maybe Matt
you just do a little edit there since
this is just be professional so before
you begin you're gonna want to so before
you begin if you've never watched any of
my videos before you might want to take
a look at the workflow videos because
you're gonna need a code editor and a
Python environment I have videos about
how to set that stuff up as well as
probably look at just my intro to spell
video to understand how the cloud
computing platform works button to be
able to show you all that stuff
step-by-step through this video as well
so hope you enjoy it please if you make
something if you make your own a train
your own model make your own project
with this share it with me
at Schiffman on twitter share in the
comments here I would love to hear about
it ok enjoy it and thank you so much
Nabil and thank you so much spelled out
run
[Music]
alright that's done that's done what
about an outro I don't think I need an
outro maybe I need one just in case yeah
let's see let's go to the end of this
video
alright is it alright thank you so much
Nabil thank you to spell I hope you
enjoyed this video and again if you make
something if you if you train the model
and make your own project please share
it with me
in the comments below I'd love to hear
about it ok enjoy it I'll see you in a
future coding train video ok so that's
fine so I think that'll have to be good
enough always good to do these things at
the end and now I'm really gonna go save
[Music]
ok goodbye everybody
see you next Friday I don't know the
exact time yet but I will post it
hopefully by Wednesday or Thursday
subscribe quickly alarm bell you'll get
a notification all that sort of stuff
and I will see you more videos to come
there's so many things in the backlog of
being edited and uploaded so hopefully
you'll catch those and leave a comment
and all that sort of stuff thank you
there were too many people talking in
the background really look it was loud
all right one more time just in case I'm
basically just missing this meeting
anyway at this point which is fine I'm
not I'm not I'm not crucial to it I just
wanted to go to it
[Music]
okay it was fine someone in that in the
slack channel could you let me know if I
really need to do that again of course
they'll just take me two seconds
[Music]
you
[Music]
all right I could always redo it on
Monday anyway I'm gonna just do it one
more time just in case cuz it's
literally gonna take me less than a
minute and Matt's yeah and I'm also
gonna record I didn't wasn't recording
to disk so let me do that too it's fine
sorry wait go do something else now I'm
I'm streaming this bubsley is like a
backup hello welcome to a video tutorial
that's what happens on this channel I
guess um so this is this is sponsored by
spell thank you so much to spell for the
sponsorship what you're about to watch
is an edited version of a livestream
that happened a couple weeks ago with a
guest educator and artist fork Linnaeus
educator artist Nabil Hussain I
recommend that you check out his website
linked in this video's description to
learn more about his background and his
current work and all sorts of wonderful
stuff that he is up to so what you're
gonna see from beginning to end in this
video is the process for taking a corpus
of text training a machine learning
model this particular model is called
LST and long shirt short-term memory
neural network maybe we'll explain that
a bit more in the video and offer you
some resources to learn about it train a
model to learn about that text train it
in the cloud on spell you can go to
spell dot run slash coding train if you
want to sign up for that service and
follow along with the tutorial and then
download the train model then bring that
train model into the browser in the
JavaScript generate new text in the
style of the original text that the
model is trained on so you're gonna see
the full process for this tutorial
probably if you've never watched any of
my videos before you're new to coding
you might want to watch some of my
workflow videos that show you how to
like set up your environment you're
gonna need maybe a you're gonna need a
Python environment you're going to need
it a code editor and know how to run a
web page in your browser that you're
developing locally on your computer but
I have videos that show all that stuff I
also a video that introduces the spell
platform and give you some background
about how that works alright so I hope
you enjoyed this video if you make
something with this please share it with
me I would love to see what kind of
crazy and interesting and wacky and
original and fun and playful projects
you are inspired to make by learning how
to
do this thank you again to the Biel for
being here to have to make this tutorial
and for spell for the sponsorship okay
bye-bye
okay the only noises was off yeah it's
ro who's on the outro
well I made an extra one just in case
alright thank you so much to be all for
this wonderful tutorial again thank you
to spell for the sponsorship if you make
something with this please share it with
me I would really love to know about it
and I'll see you in a future tutorial
many more machine learning ml five
Python EE tensorflow EE things to come I
hope goodbye alright alright so anyway
alright now I am really really going
thank you for being here today I don't
know why vows having this like week of
just feeling like oh what am i doing I
don't know it I know my brain doesn't
work anymore none of my tutorials makes
sense anymore what am i doing
I know effect just felt like that all
week and I feel a little bit
re-energized I like doing this on Friday
too because I feel like work week is
over I'm gonna go home good have a beer
relax and spend time with family this
weekend and catch up on a lot of work on
Monday so I hope you also have a good
weekend get to spend time with friends
family whoever internet friends
real-life friends all those types of
things and I'm gonna go check out the
end of this meeting
send me your feedback makes a mastadon
box take a break from code for a while
and all that stuff okay here we go
goodbye