good morning I think I am live do you
hear me
do you hear the soft sounds of the
ukulele in the background I'm wondering
because when I tested oh no you're not
hearing the ukulele oh definitely not
okay now I know what's wrong my voice is
coming through but
[Music]
hold on I will fix this this is very
important this is quite possibly the
most important thing of the day and here
we go
Oh
I know you're just hearing it through my
mic sorry I should have fixed this
before I started this is terrible
somebody eventually when this gets
published put in the cup pinned I'll put
a pin comment for the time code where
this actually starts we just see
something here no way here we go
no no
[Music]
yes okay there we go monitor through
the output device
I just start this over hold on gonna hit
stop and fix this people can't hear me
either
hold on voice alright hold on I'm
timeout I'm stopping this oh you hear me
okay
like half asleep but I starts this live
stream we can hear me okay okay but all
I just want to fix this sound thing
there we go I fixed it
just forget how to do this okay let's
start over
hello good morning welcome to the coding
train with me Daniel Schiffman so I'm a
little bit half-asleep today I don't
usually stream in the morning it's not
even really the morning frankly it's
10:40 I've been awake for like at least
like four and a half hours I get up very
early but it's been a very long week I
probably should like stream on Monday
not that my weekends are so restful but
I'm excited to be here I am ready
I've got like a scratchy throat like a
cold kind of it's getting close like
chilly in New York it's like it was like
the summer then it was sort of the fall
for like one day it's interacting so but
I'm excited to be here and do some
coding stuff I want to see if I have
anything to cover here
Simon is asking if I saw his suggestion
yes Simon has given an excellent
suggestion for octahedra which is a cube
with faces connected up I would
definitely like to get to that at some
point but I don't know if I'll get to
that today I am I'm excited to premiere
something wait a second
I have to wait till I get a message like
I have to create the fake scenario for
the thing that I want to premiere wait a
second
breaking those news breaking news this
is not going well
how do I turn my brain on there's got to
be a way to turn my brain on you know
what I think is a way to turn my brain
on coding let's just get started so one
of the things that I want to do today
and let me let me go to seven-segment
display actually you know what let's
let's take a moment here and go to the
coding train website you know what I
think the website might be broken cuz
it's supposed to show I think a note
here when I'm live-streaming
it's the most recent livestream that
it's showing is for March 14th
so Oktoberfest don't want to help fix
this on the website that would be a good
thing to fix
but I want to come here for a second ok
so I recently did a coding challenge 7
segment display and look at this this
has been really successful in my view in
the sense that it inspired a lot of
creative possibilities one that I really
want to look at shoot can I just do a
search on Twitter without logging in
maybe I can log in as the coding train
yep that was an easy way to do it and
there we go this is actually what I'm
looking for I love this from Sebastian
vane out 7-segment display combined with
p5.js and matter digest many here
um let's click on let's actually click
on all of them why not let's just look
through all of them really quickly
alright so we've got this one we've got
time maybe I don't know cool I love that
okay so this is wonderful because this
is exactly what Tom Scott talked about
in his video about 7-segment display
looking up and using a regular
expression to figure out what is the
longest word you can display on a seven
segment display we've got super trance
and
then dole maybe and so we can choose the
color of the display that's a really
nice feature and I really should be
crediting the people here so I probably
should click on them one at a time here
this is from Tom Seeley source code here
thank you Tom Seeley this is one from BL
for score and look at this oh wait I'm
in the wrong page this is nice it's
interactive this is relates to something
that I want to do today we've got
another clock from weimar shippers I
love this oh look at this and guess what
this is actually a new feature of the
p5.js web editor now when you share your
sketch with the full URL it you get a
little like bar on the top that has the
p5 logo the name of your sketch and a
credit so by Willie Waring you can still
get a view actually so let's see if we
can do this well if you go to file share
full screen there is still a full view
without it which is would be in bed so
if we go here and I switch to embed
there's still a full view without the
the p5 information all right so now we
also have another clock from swifty
turtle excellent name this is lovely
great work we have a seven segment
display from Tony Stark hey Tony Stark
thanks for contributing to the coding
train
look at this with all the segments to
find the binary stuff defined I don't
know this is a let's see if we can read
a bit more about what this is from
prasad pandit a decoder app so this is a
maybe an app that's helping you figure
out the encoding and decoding of the
binary stuff the binary numbers and how
those represented on the 7-segment
display itself we've got a processing
7-segment display so I should really
just to be a good person let's let's
actually run this code this is the one
thing that's a little bit tricky it's a
little bit harder oh this is just
actually a raw port so I don't actually
know
need to run this this looks like it's
just raw port thank you for that and
then we've got the object-oriented
refactoring so this let's take a look at
this because I have to say I take this
as a badge of honor but most people are
very nice to me in the comments but I
get a lot of the the negative comments
that I get which I don't necessarily you
is negative are your code is terrible
it's messy it's disorganized you should
you're teaching your variable names are
bad you should be teaching good code
practices and fair criticism guilty as
charged
but one of the things that I like to
emphasize and that's part of my process
which I recognize maybe isn't for
everybody is that messiness is part of
playful experimentation now you're right
software development requires care and
time and thoughtful engineering
commenting code organizing code these
are valuable and important skills but
sometimes you want to play around make
up an idea and I also view it as a
prompt to the viewer to think about what
I've done with my code and make and
change it to work for you and that could
mean organize it but I do aspire to you
know teach good practice and also use
good practices myself on this channel so
we'll see maybe I'll maybe I'll get
better point taken
all right so let's look at this one
though I really want to look at the code
for this one so one of the things I can
probably do actually I think if I just
click here in this new view it will take
me to the page with the code and we can
see look at this we've got a segment
class an off collar on off color and on
color a length and a width and a state
so this is really nice and look how
nicely documented this is so this is a
sort of format for self-documenting code
comments which will can be generated
into a documentation page display the
segment set on set off this is lovely
now let's see if we look here when we
see there's even now a 7 segment display
class which has
a set of segments in them it initializes
them it has the hex codes look at this
this is a really excellent work this is
excellent work who did this brew Alves I
know thank you so much
so all of you who are looking for a more
thoughtful refactoring and
reorganization of my quick and dirty
seven second display this is a great one
to look at and you can see now the main
program is just making new seven
segments but look at this let's see if
we can even figure out to make two of
these like how hard would it be now if I
say let's make two of them or me so I'm
gonna say create canvas six hundred four
hundred now this of course should use an
array but let's just say I want to put
two next to each other and I make two of
them and I want to display a digit
update you know these are counting and
maybe I want to also display a digit and
maybe I'll say like 10 minus index or
something now what's going on here I
don't actually see two of them so this
is where I might offer an idea for
improvement which is that the the offset
vector is hard-coded here so what if I
were able to give it an X and a Y then I
could add the X and y here then under in
sketch I could say let's have one at
like zero zero comma zero and let's have
one at 100 comma zero now interestingly
I've still not seen two of them let's
see like right why don't I see two of
them well let's take a look at how it's
drawing the offset vector whoops in
7-segment display this is like kind of a
private variable here but it must be
used somewhere where is it used
somewhere in maybe like a draw function
right transform oh look at this top oh
there's all these trance
whoa this is crazy kind of unbelievable
Wow generate display okay okay here's
what we need we need a push here and a
pop here that's my guess because my
guess is that the generate display
function is not self-contained so all of
these translations that happen here are
affecting other ones do transformations
this seems reasonable now why aren't I
still seeing two of them one two all
right so let's see here zero let's see
let's try to figure out what's going on
we have to debug this a bit more let's
change the on color huh so weird why why
are my changes not taking effect on
color stroke on color off color hmm
interesting
let's go back to just 400 by foreigners
bothering me that it's off the and now
let's do 100 so we've moved this both of
them over so also interestingly oh you
know what
aha where is the background being drawn
let's I think there's also an issue with
this which is a problem which is that
the background is being drawn here in
update so this is a problem because in
when the way I think about
object-oriented programming is that I
only want the object to know about and
do things that are part of that object
itself and background is not part of the
object background is part of the world
so this really needs to come out and be
here in draw and look at this now now we
have successfully
you know maybe made two of them whoops
so now we've got two of them so that's
good I've got two seven segment displays
why did my change of the color not
actually take effect it's a little bit
weird and it's not a super important
detail but I'm curious oh because
there's a set and a set on color so
somewhere else the color is being set
and so presumably that's happening here
it's actually here so it's interesting
like this is a bit I mean it's nice that
that's there but the color is actually
being set in the display itself so for
example if I were to change this now
we're going to see we're going to see it
now blue okay so anyway I'd sorry I got
went off on a bit of a tangent here
looking at this project I'm gonna save
this as well one thing that it would be
nice if the p5 editor could keep track
of where this came from but I'm gonna
I'm gonna do that myself
this was from object ordinary fracturing
so let's buy Bru all so let's a credit
brew all and over here so if anyone
wants to take a look at this revised
from brew all which is here and also
let's credit this github page alright so
this is the thing this is really this is
that here's an important tidbit that I
believe in with all of my heart and soul
and if I ever make a mistake in this
realm please let me know open source is
a thing and I encourage my students for
example to use open source code examples
in the creation of a project and
whatever the license might be right you
might find a license like open source
licensing is a big top
unto itself that would be lovely to
discuss in depth some open-source
licenses require attribution some have
restrictions on what you can use the
code for whether commercial or
non-commercial purposes some require
share back like if you make a change you
have to share that change back but some
open-source licenses notably like the
MIT license and the BSD license are very
permissive meaning yeah I don't I make
no warranties with this code whatsoever
and you do what you like anything goes
however I feel that it is good practice
to no matter the license credit your
sources so there are some situations
where that's certainly required but even
if it's not required I wouldn't want to
build on top of somebody else's code to
educational material even if it's open
sourced without crediting it back so
that's something that I always try to
remember to do and I would encourage you
as you make projects to always credit
back all right so I will this will get
hopefully left somewhere in the video's
description maybe somebody who has
privileges can share this in the in the
chat right now actually one thing that I
wanted to also mention housekeeping wise
is there have been some recent
improvements to the coding train website
which is pretty much a community project
I I do would like to apologize that
there are a lot of open poll requests
and issues I really need to do a better
job of maintaining this community
project and I'm hoping to figure out
ways in the future to get more people
involved in that maintenance but one of
the new things that happened recently
I'm gonna go under pull requests and
closed is look for this web editor it
might be further down here let's look
for this web yes add web editor to video
page so this is a feature that adds an
option to include a link to a coding
challenge our tutorial with the web
editor so if I look at any web page for
example this 7-segment display one let's
come back to this
here you can find weird
oh is it broken hey where are the
buttons there should be like buttons to
like download what if we broke something
oh I did 10 - in Dec people are wait
hold on I'm getting a note from the chat
10 - index is causing a bit of a problem
with this which is that 10 minus 0 is 10
and I want to go from 9 down to zero so
this should really be 10 minus index
minus 1 that should do the trick right 3
2 1 not yeah there we go okay thank you
for that back to what I was saying weird
where did it go let's go to a different
challenge
like for example let's go do coding
challenges and let's go to like that
this one also let's go to here okay so
this one is hasn't it I don't know why
it wasn't showing up and now there's two
rows of buttons which is weird some
stuff got messed up hey people feel free
to file github issues and pull requests
but so what's supposed to happen here is
that there is a link to view the code
which if I click here will take me to
the github page that has the actual code
there is a link to download the code
which if I click that will just trigger
an automatic download of the code as a
zip file
this is processing then there's live
example now live example this is not
active live example should point to the
p5.js version that runs in the browser
and I'm not sure why there isn't one for
the Lisa G occur delecia Shuker curve
table but there's also this oh and look
at this this now view code points to the
p5.js web editor one right which was the
new feature and this one
points to the web editor live version
look at that so I got to clean this up
figure out what should be here and what
shouldn't probably this should be if I'm
thinking about it
[Music]
view code is always nice to go to some
github repo download code is nice to
have right so this gives you a zipped
and then I would say the live example
should probably go to the p5.js web
editor if it's there or or github pages
URL if there's no p5.js web editor or
then nothing it's deactivated
if there is no live example so and so
this might be processing or you know or
a p5 this would also be processing or p5
but this live example would always be p5
so this is the implementation well you
can screenshot this and file this as a
github issue and then what I could use
help with actually is going back and all
the old challenges that don't have a p5
web editor version of them actually
creating them now here's the thing in
order for you to do this though I need
to give you access to the coding train
p5 web editor account because I think it
would be nice for this to show up under
the under the coding train account I
mean that's what I'm thinking
so you might have to get in touch maybe
somebody who's in the patron group or
the slack channel can help with that
specifically ok
don't tell me it's like okay it's only
11 all right
I'm really slow getting started today so
let me talk about what's on the horizon
here
let me I should sign in maybe there's I
don't know should probably sign in as
myself when I look at the YouTube page
but let me just see here is that
playlist public yet so a couple things
let me mention if you hadn't noticed my
friend Cal Akana
also because I have YouTube premium okay
no thanks I'm good okay sorry
sorry for that digression there with an
ad so recently the video tutorial with
Nabil has same for all was published
this was this is an edited version of a
live stream so if you are interested in
learning how to train a long short-term
memory network with tensorflow and then
running that in the browser this came
out I also wanted to just alert you to
some a text that Nabil added to the
description related to taking about data
and ethics and responsibility so I
encourage you to read through this
description here so I want to note that
that was published now what I'm also
looking for tonight welcome to let's see
created playlist
I think it's not a public playlist yet
let me look over here and see if I can
switch that give me a second
people are telling me to install
adblocker okay what is let me look at
this playlists might as well make this a
public playlist if people want to get
started looking at this stuff and at
playlist I think this is where I would
do this unlisted edit
how do you change iya public okay let's
make this public right now okay so now
if i refresh this i haven't released
these videos yet I'm still working on
the captions and various elements but if
I go here I there is now session 12 I
have released session 12 word Tyvek with
three video tutorials these are edited
from last week's livestream so if you
want to get started looking at this
stuff I'm gonna hopefully continue my
discussion of word Tyvek today alright
alright now it's time to have some fun
one of the things that and I know that's
a black screen right now I will fix that
in a second one of the things that I did
with the 7-segment display is in the
7-segment display I picked up
hexadecimal numbers this releaser this
is a paper towel where's my nice eraser
I picked up hexadecimal numbers from the
from the Wikipedia page about 7 segment
display and I converted those
hexadecimal numbers into binary sort of
and did bit shifting and bit and asking
on them and I kind of glossed over and a
hand waved the explanation of bit
shifting and bit masking and one of the
comments I got was I didn't understand
the bits part so what I'm gonna do today
is you know I thought like oh let me
just do like a 1 minute
binary numbers tutorial I think those
kinds of things exist on YouTube already
and probably are better than what I
could do you know because they're
explainer videos with animation
and sort of thoughtful diagramming and
so what I thought that I would do is do
two coding challenges around binary
numbers today and I would basically make
an interactive display to convert from
binary numbers to decimal numbers and
back and then I would sort of explain
what binary numbers are and then also
look at bit shifting and bit masking as
part of this so I don't that's exactly
the entire plan that I have I didn't try
coding any of this in advance so this is
what I'm going to do and I think that
doing this in the web editor will be
fine there's definitely some complicated
aspects of this let me close all these
windows let me save this there's an
issue by the way a current open issue
with the p5 web editor is that if you
rename a sketch and even if you saved it
it really thinks that you didn't save it
but how I'm used to go ahead I'm used to
that okay so binary numbers base two and
bits and bytes okay
let me get the chat open here to make
sure I haven't missed anything and
welcome new member breaking news this is
another breaking news let me credit
these people who made these breaking
news things Tristan thank you - Tristan
new member who made this wonderful let
me find who made these breaking news
things so Nick thank you -
soundcloud.com slash Nick ramstad slash
Schiffman breaking news Nick Ramsay made
this money and then there's another one
I have to find it
let's see
let's see let me find this under
community which video is this breaking
news
oh no don't I just search breaking news
on github by accident I mean uh I'm
looking at my youtube comments not on
github okay Zach Solomon on live stream
number live stream number internet is so
slow won't even tell me which number it
is live stream number 156 let's see if
this comes up live stream videos live
stream 156 meet the Landers the
revolutionary who's standing is from
under featuring the latest in high-tech
advancements the Landers set up in just
minutes and come with us thank you very
much all right where where are you Zach
Salomon there was a comment here about
breaking news
let's get that ad fine is it show up
here
SoundCloud soundcloud.com solo mozz
slash coating train breaking news oh
it's gone here we go so this one thank
you to Zach I'm here for all of your
coding trade breaking news that other
sound effects that I can use throughout
the
livestreams alright sorry for that
digression I am getting myself ready for
the coding challenge beginning of today
okay alright hello my live talking yes
going train this coding challenge is
brought to you by water I have water
today and I didn't last time my throat
is killing me after my livestream okay I
should really say water I drink it and
then I have to go pee which is what I
feel like I have to do right now but I'm
going to do this coding challenge
nonetheless ha-hee dino asks can i code
my data structures homework in p5 I
would love to know if that's Bobby
certainly you can do data structures in
p5 which is just a library for
JavaScript and you can create data
structures in JavaScript and visualize
them with p5 but I don't know what your
homework is exactly so if your homework
is create a linked list in C++ then
doing it in p5 won't do you a lot of
good but I have some videos where I do
different data structure stuff in
JavaScript and maybe that will help you
alright let's begin
hello welcome to a coding challenge
binary numbers alright so uh
oh wait wait hold on I want to reference
the 7-segment display Schiffman coding
train this really should come up
there we go this is making me crazy yeah
okay
hello welcome to a coding challenge now
I recently did a coding challenge number
117 about the 7-segment display and
there was weird code in there like this
like Val
greater than greater than shift
ampersand 1 oh my goodness what is this
I did something called bitwise
operations this is actually a bit
shifting and bit masking and let me tell
you I did not explain it well at all in
the video if I scroll down a look at the
comments so many of the comments were I
did not understand that pitch shifting
stuff so I've decided to do two coding
challenges the first one I'm doing right
now about binary numbers so if you don't
even know what binary numbers are you're
in the right place if you want to kind
of think about maybe a creative project
you might make around binary numbers
like a clock that is the time is
displayed in binary they're also in the
right place I am going to try to in this
coding challenge make a what am i doing
I can I just start over this is my one
mole again which I say every time now
the coding starts okay okay come on
energy energy hello welcome to a coding
challenge about binary numbers now I
previously did a coding challenge number
117 about the 7-segment display as
displayed right there and I had some
weird code in it like Val greater than
greater than shift ampersand 1 what that
is that well this is a bit shifting
operation and this is a bit masking
operation and I sort of explained it but
not really in that video in fact I
explained it rather terribly kind of
glossing over it and I got a ton of
comment about a few comments the ratio
of the percentage of comments
don't go up with all these tangents
editing is a thing editing is a thing
last time last time I think I have to
I'm gonna make it through this I just
gotta get going
it's really tortures to live viewers
that the chat will be full of rage again
wow so many read I don't usually do this
many retakes but today just happening
okay previous one was better
oh it's the fake energy and enthusiasm
oh my goodness alright real energy this
is authentic energy and enthusiasm I am
genuinely excited to talk about binary
numbers and don't hello and welcome to a
codec challenge this coding challenge is
a coding challenge about binary numbers
okay why am I doing this well previously
I did a coding challenge called the
7-segment display where I made the
7-segment display in an orange make it I
did these weird operations with this
greater than greater than and this
ampersand and these operations are known
as bit shifting and bit masking I really
did not explain those concepts well or
even at all in that challenge and I got
a bunch of comments saying I didn't
understand the whole bits part so let me
go backwards here in time travel back in
time or forward or whatever because you
could I'm just gonna do a video which
explains binary numbers I'm gonna do to
two challenges one to just explain
binary numbers and two to actually
explain bit shifting a bit masking so
first but I need to make these a coding
challenge so what I'll actually do let
me try it I think what might make sense
is to build a little visualization
system where if I type in a number a
decimal number a regular number I'll
talk about what a decimal number is in a
second then I see it
in binary and maybe I can click on the
binary number and change the bits and
then have it converted back into decimal
that's what I'm gonna try to do so okay
so if you've never heard about binary
numbers
welcome I am going to attempt to explain
right now so first of all before I even
explained binary numbers we've got to
understand this concept of a base the
base a number a number system like a
base 10 or a base 16 or a base 64 or
base 2 number system the base refers to
the number of possibilities of digits
that you can use to encode a particular
number it could be more than digits if
we get beyond 10 for example so we talk
base 10 with our 10 fingers and 10 toes
is the way we traditionally think about
numbers 10 or deca Dec and that's why we
call this decimal numbers so base 10 is
decimal numbers there are 1 2 3 4 5 6 7
8 9 I counted that wrong 1 2 3 4 5 6 7 8
9 10 10 digits when we get up to 9 right
we're counting up to 9 the next one we
have to go back to zero and then add an
extra spot then go to 11 and I'm going
off the off the lot now we could have
base to base 2 is binary 2 possibilities
by 0 1 1 0 1 1 this is me counting and
binary 1 0 0 right because I only have
and I could sort of add the zeros here I
only have two possible digits for each
spot in my numbering system so this is
binary
now other well-known encoding systems
like base 16 or hexadecimal allow for
well now for 16 and well how can we have
more than 10 well in hexadecimal when
you get after 9 yet the letter A then B
then C then D then e then F so you've
got 16 possible digits that's why if you
see something like this FF
this is a hexadecimal number I'm
thinking I'm thinking I'm thinking okay
so the reason why this is important in
computing is that computers actually
store everything in memory as in binary
a single spot for a single binary number
is called a bit so we could say that if
I were to sort of imagine the computer's
memory as a sequence of slots each slot
can have a 0 or a 1 in them 2 3 4 5 6 7
8 now 8 bits is referred to as a byte so
when you hear somebody say this file
takes takes up like 3,000 kilobytes well
a kilobyte is a certain amount of bytes
with a certain amount of bits let's talk
about how many spots in the computer's
memory or is required to store this
information so I'm taking a break for a
second I'm looking at the chat I kind of
want to start over again all right
so you might have noticed when you were
learning programming or p5 or different
things that like why there's so many
situations where there are 256
possibilities right the red 4 if you're
going to set the color of a shape you're
gonna draw the range is between 0 and
255 which is actually 256 possibilities
where interestingly enough right what is
the binary representation of 256 it is
if I just come back here and create
another set of slots 1 1 1 1 1 1 1 1 all
the bits being on in an in a single byte
is 256 counting from 0 to 255 it's
actually 255 excuse me but it's the 256
possibility counting from 0 to 255 is
something you can do within a single
byte this is why many systems are
optimized to work with powers of 2 2 4 8
16 32 this is native to how the computer
stores information so that 7 segment
display that looked like this it was
designed to have 8 possible options
because it can be the how the display is
shown rendered can be configured in a
single byte right is this spot a 0 or a
1 that means that maybe this is either
on or off what about this one on or off
now it's weird that it's called
7-segment because why isn't it an eight
segment display every eight segments
well that's because it also has an extra
seven segments but an extra spot for the
decimal point okay so that's some
background on binary numbers alright so
the next thing I'm gonna do
edit this part out is write an algorithm
okay all right okay I've got an idea
here so let's go back over to the
computer for a second because actually
JavaScript itself if I just like open up
a console here in the browser has
functions in it to convert between a
decimal numbers and binary numbers what
is the decimal representation of this
binary number for example what is the
binary representation of this decimal
number for what server that's really
what I'm doing in this coding challenge
I want to write an algorithm that can
convert back and forth now you don't
need to do this in JavaScript because
JavaScript will do this for you so for
example if I were to if I were to have a
binary number I'm gonna call it num
equal and I'm gonna put it in quotes
like as a string what was that number it
was zero one zero one one zero one zero
I can use the JavaScript built-in
function parse int give it that number
and I must explain what base is that
number in and that is and it's going to
give me the decimal equivalent ninety so
remember I said how remember how I said
FF is a number in hexadecimal well I can
now say parse int num in base 16 255
write FF is 255 and by the way let's
actually let's say parse int 1 2 3 4 1 2
3 4 that's also 255 so the parse int
function will take the string Lee text
representation of any number at any base
and convert it to decimal as long as you
give it the second argument base which
is also sometimes referred to as radix
so you pronounce that I don't know now
what if you want to go the other way
around like what if I have the number
255
and I want to get that exactly it's
telling me here what if I want to get
that what if I want to get that number
in in its binary representation well the
two string method will do that and I can
actually give that a base array so if I
say 255 to string actually I just say to
string it's actually gonna give me an
error because it's like you can't call a
function on a primitive value like a
number nut luckily if I put that in a
variable I could say num to string
whoops
num to string and I get the string 255
and now if I were to say num to string
base - I get the binary representation
so and I can also I could do this by the
way I think if I put it in parenthesis
or something like that I will get that
so now we've seen how JavaScript can do
all this for you automatically
now's the time for me finally to write
some code I could just use that but I'm
gonna be I feel like writing my I feel
like learning about how this binary
stuff works in a slightly more deep way
so I'm gonna write my own algorithms to
convert back and forth and I'm also
gonna create a visual system to make
that interactive pause for a second and
of course the chat is talking about
whether a thousand bits is a kilobyte or
a thousand 24 bits is a kilobyte and
that's why I didn't actually say it
either way let me get that I lost the
chat here
Oh dot dot what does the dot dot mean
alka ah XOR thank you
Simon is also maybe it's not breaking
news breaking news from the chat where's
the company from it's a decimal followed
by a dot oh how weird that's the
weirdest thing I have ever seen
why does that work so that works that's
so weird
okay octal yeah all I wanted to mention
that you can make up any all right okay
where's my eraser okay all right so
let's look at how this works first of
all I'm a you know this what I'm doing
in this video is it's just working
worrying about binary numbers and
decimal numbers but it would be
interesting to create your own as a
challenge to you after you watch this or
just go do it right now write a function
that takes two numbers in in any
arbitrary base and our one number in any
arbitrary base and can convert it to any
other arbitrary base because even though
I talked about decimal or hexadecimal or
binary we could just make up a we could
say base five or base three like base
three would be 0 1 2 3 1 0 1 1 1 2 1 3
this is so hard to do to 0 to 1 right
that's base I space for not phase 3 this
is base 4 because there's four possible
combination digits combinations ok so
but what I want to do here is if we're
in binary the easiest the easy way to
start is to the easy way to start is to
look at converting between binary and
decimal to decimal will also do decimal
to binary but let's start with binary to
decimal ok
so 0 I'm just going to make a little
table manually is 0 1 is 1 1 0 is 2 1 1
is 3 1 0 0 then is 4 you notice
something here we've got
what's important here is we've got zero
well sir hold on it's a little bit
confusing here the way yeah
yes sorry what's important here is
what's important here is this 1 this 2
and this 4 look at the pattern here
1 is a 1 1 0 is a 2 1 0 0 is a 4 can you
guess what 1 0 0 0 is going to be now
guess what it's 8
each bit represents the amount in
decimal yep each sorry each bit
represents a power of 2 this is 2 to the
0 that's 2 to the 1 that's 2 to the 2 2
squared this is 2 to the 3 so what we
can actually do to convert from binary
to decimal is use this pattern here is
this is this first binary digit a 0 or a
1 so hold on
I shouldn't plan this out shouldn't
practice this let's go back to that
number I think it was 90 oh boy
I think it was this I don't know it
wasn't I think it was this so this is
the way we could do it basically each
one of these spots this is 2 to the 0
this is 2 to the 1 that's 2 to the 2
that's 2 to the 3 that's 2 to the 4
heads 2 to the 5 this is 2 to the 6 this
is 2 to the 7 right so now 0 times this
is 0 1 times this is 2 0 times this is 0
1 times this is 8 1 times this is 16 we
got a 0 here what's what's 8 16 32 this
is 60
four and then this is zero so now I can
add all this up 64 plus 16 plus 8 plus 2
we've got 20 carry the 2 990 look at
this we have now converted between
binary representation and decimal whoo
okay let's go now and write the code to
actually do this and also let's
visualize it alright so let's start with
just a number which equals zero one zero
one one zero one zero okay and now we're
gonna write a function called binary to
decimal a decimal and it's going to take
a value and what I need to do is just
loop over all the digits and again
there's all sorts of fancy ways we could
probably lose in one line of code with a
higher order function and but we're
gonna do this in the long winded way to
really understand it I equals 0 I is
less than Val dot length I plus plus now
actually here's the thing if my death
binary number is a string I actually
want to start at this digit first all
right because I want I don't think this
could be any given length but I wanna
you know I want to add things starting
counting at zero so what I might do here
is actually say now the index equals
value dot length minus I minus 1 right
so let's say there's eight of them I
went when I is zero I want to look at
the 7th when I is one I want to look at
the six when I is 2 I'm going to look at
the fifth so we've got this now all I
need to say is let me get the bit is a
value car at I sorry car at index I want
to get that
is it a zero or one and I also need to
turn it into a number I'm just gonna use
parse int for that which by default will
turn it into a zero or 1 in decimal
without any and then I'm going to say
and I need a sum sum equals zero then
I'm going to say sum plus equal power 2
to the 8th power times bit so I'm
basically doing exactly this I am saying
for when I is zero go to this bit which
is the last character in the string and
then multiply it by x 2 to the ice power
oh shoot then multiply it by 2 to the
8th power okay then when that's all done
I'm going to return some all right now
so we could test this idea out like I
could just say now a console.log binary
to decimal none and look we've got 90
down here
[Music]
this is like a 45-minute video so far
where all I did was convert one number
two but anyway we're getting somewhere
now what I want to do that took me a
half an hour since I started how am I
making how is it possible that I'm
making a coding challenge and it's like
hours long
okay let's now visualize this binary
number so I'm gonna say let's let's make
a canvas that's like four hundred by 100
I'm gonna say background 255 and I'm
gonna say I four let a equal zero eyes
listen um dot length I plus plus and now
what I'm going to do is I'm going to say
the width of the the width of each I'm
gonna draw a rectangle for each bit and
the width the the size of each rectangle
is with / numb not length and then so I
want to draw I'm going to say fill zero
rectangle I times W 0 W height so I want
to draw a bunch of rectangles and let's
say stroke 255 just so I put something
around it and we'll say it's size is
minus 1 and minus 1 so minus 1 so there
you go
so I now have this visualization of all
the bits and I'm going to say the fill
is numb car at I times 255 there we go
and then let's make the stroke like a
grey so it shows up kind of no matter
what
so again boy my design
skills and let's say a stroke wait for I
really have terrible design skills oh
this is awful
but you see the idea it's like thicker
here and oh wow I don't like so this is
the idea that I am now and then I want
to say and I'm gonna say no loop here
create P create P binary to decimal numb
there we go Owen let's okay it's fine so
we can see here this is what I've got so
I'm gonna NGO you can't buy hold on just
timeout for a second I'm thinking
I'm just going to very briefly add
something to style dot CSS so because I
want the font color to be white
[Music]
what is that text color that was just
color font color no color oh that what
255 is not anything I'm just gonna oil
it just so that this is a bit more
legible I am going to very briefly just
edit the CSS here and I think I can add
color and then by the way I need to do
this in hexadecimal ffffff
shouldn't that be white now do I not
have enough EPS there we go I am going
to say size text size font size
it must be font size 64 point there we
go so now now I can see here so now any
binary number I put in here I will get
the decimal representation I'm
converting it and I'm visualizing it so
now you the viewer of this because kody
challenge is complete it's kind of a
very sad result but I am very excited
for you to do something better with this
so for example I would love to add the
feature where I like to do is click on
these and I can switch the bits so that
would be great
try that what if you know there's
probably some nice or more visually
pleasing way maybe I want to put text um
you know I oh I need to add something to
this I want to make this content
editable so I could actually edit this
let me just show you so what I could do
here is and let's let's put this let's
make let's just make it a div and I'm
gonna say create div just so it shows up
without all right here and now I'm gonna
say um I'm gonna say I'm just gonna add
this for you div equals creative div dot
attribute attribute I think it's the p5
way of doing this
content editable and I'll just say true
so I'm adding a HTML attribute to this
div which makes it content editable so
now what if I edit that I want to update
the bits so I have to convert the other
way I guess I could do that in another
video maybe I'm done right now pause
that stop this silliness of watching me
and go go to the URL that's in the
video's description to take a look at
this sketch and make your own beautiful
interactive version of this with ways
that I couldn't possibly imagine right
now alright thanks for watching and see
you soon I was terrible I almost want to
do the whole thing over again
[Music]
I'm looking at the chat the over give me
interesting suggestions zero to zero
isn't you can use binary literals in
JavaScript that as well yes I didn't
mean for this to be a coding challenge I
meant to just sort of like extra explain
take two it's like how long do you think
mean I don't know I don't know I guess I
should move on okay just now I'm
realizing I'm coding this maybe doesn't
make sense as a coding challenge maybe
it's really like a tutorial series
because it could be multi-part like I
can make it do it over again
what are you doing next asks Nasir make
the rectangles draggable like I mean
there's so many things I would like to
that I meant to sort of like do here
hold on
I'm thinking I don't write I know yes
but I felt like so Alessandra makes a
very good comment in the chat which is
the thing is this didn't really explain
the bit operations in the 7-segment
video yes that's definitely what I was
going to do next because not once I have
a visual system I can start to add like
shifting to it like what if I press the
right arrow and shift everything over I
sort of feel like I'm just torn as to
what to do here I kind of want to just
do that whole thing over again there's
like a second take now that I kind of
understand what it is I'm doing because
I can probably be much less long-winded
about it let me at least erase over here
I don't know if that will it was
ultimately these live streams are not
what the larger YouTube audience watches
the larger YouTube audience watches the
edited versions of these
I'm out of time I'm thinking about
redoing this over the color should be
the other way around
yeah they definitely should be no I
guess so I don't know let's guess I
could use Dom elements click on them I
want to do this one more time I'm gonna
do this one more time because I won't be
able to live with myself if I don't so I
apologize to everybody
okay all right
I'm I guess I'm just gonna make a new
sketch yeah here we go
okay
okay all right everyone the the IR irony
here is that I don't have very much time
and I'm gonna end up just doing only the
binary stuff today which I actually
don't really mind so much all right
everybody
so all of you watching live should just
go on with your day now go do something
else make yourself a cup of tea go watch
a different youtube videos play a game
of chess we'll go outside if it's a nice
day outside where you are may have
something to eat let's go do something
else
because I am literally going to do
exactly what I just did just just just
just to see what happens just I'm just
damn curious for this experiment if
actually I produce better content doing
something twice or whether the
spontaneousness of the first time is
actually better we'll find out won't we
okay oh no I'm in the wrong place here
we go okay so this is the thing maybe
this doesn't make sense as a coding
challenge I think I was just thinking
coding challenge because that's what but
all right all right we're gonna do it is
the coding challenge it's fine and then
we'll do addendum it's part multi-part
cuz why not or it'll be long it's gonna
be long that's fine all right I just
have to know that it's gonna be long at
the beginning hello and welcome to what
will undoubtedly be the longest video
you've ever watched my binary numbers so
why am I making this challenge here so I
made a coding challenge number 117
called the 7-segment display and what I
was doing was creating a visual
JavaScript HTML canvas version of a
7-segment display and to do that I had
some weird code in there Val greater
than greater than shift ampersand 1 and
that code but code right up there made
no sense to anybody and I tried to
explain it but I got a lot of comments
saying I didn't get what this was so
this is a bit shifting and bit masking
so before I can even get into that I
thought let's take a deep breath and
let's just enjoy and go back backwards
in time days of yore when we didn't have
anything but binary numbers and we had
to program everything in binary
I don't know that this never happened
for me but I can imagine there was a
time where this really happened so this
is a coding challenge where I will
explain what binary numbers are and then
I will create a sketch p5.js sketch in
JavaScript that converts a binary number
to a decimal number okay so maybe you're
even asking right now what is a binary
number what is a decimal number so
before I can even answer that we have to
talk about this idea of base base is
is a term that refers to the number of
possibilities in a counting system in a
number system so base 2 or binary there
are only two possibilities a 0 or a 1
base 10 10 Dec deca or decimal has 10
possibilities 0 through 9 there are
other well-known numbering systems that
get used often probably the one you see
in computing the most is base 16 or
hexadecimal and this actually has 16
possible digits 0 through 9 and also A
through F so when you see something like
this in CSS like FF 0 0 FF this is
hexadecimal encoding this FF in decimal
is 255 this 0 0 in decimal is 0 this FF
is 255 so this is the color this is a
representation of the color red of to
5500 of green and blue 255 so anyway so
this kind of encoding of information
exists and by the way in my 7 segment
display there were hexadecimal
representations of what should be
displayed on the 7-segment display okay
so hexadecimal is interesting I'm not
gonna do hexadecimal conversion in this
video but you know it's important to
realize like these are maybe something
that you see I think like base 8 is used
for like some file systems but um you
can make up anything like if you have
base for you just have four
possibilities maybe 0 1 2 or 3 and when
I say possibilities it it this defines
how you count and by the way this
historically there are all sorts of
alternative ways of counting I believe I
was looking and the Aztecs used maybe
units of like 0 then 20 then 40 then 800
then 8000 there's like these were the
idea and those were instead of digits
there were actually like drawings of
what so anyway so you look that up
somebody will make a nice explained our
YouTube video about
systems but if we have base 2 this means
there are only two possibilities so like
let's let's use base ten decimal because
we understand that ten fingers ten toes
that's why base ten is the convention 0
1 2 3 4 5 6 7 8 9 10 11 12 right because
once we get to 9 we've run out of
possibilities in a single digit so we
switch to 0 and then the next digit over
the tens unit becomes a 1 this is what
kids learn in elementary school in
counting in groups of 10 hundreds units
etc alright so but if I were doing this
in binary I would say 0 then I would say
1 and then I have run out of digits so I
have to say 1 0 and then 1 1 and then a
1 0 0 then 1 0 1 1 1 1 I'm totally like
this is the worst drawing ever and then
1 0 0 0 did I get that right no I
totally did not 1 0 0 1 0 1 1 1 0 then 1
1 1 and then 1 0 0 0 oh this is hard
ok let me match up some things for you
so something that's really interesting
here is 1 matches up with 1 1 0 matches
up with 2 1 0 0 matches up with four
five six seven one zero zero zero zero
matches up with eight notice that when
there is only the leading digit one and
everything else is a zero
there's a pattern here 1 2 4 8 maybe now
you could imagine what 1 0 0 0 0 is
going to be how about 16
whoops sorry 16 I should put that over
here 1 2 4 8 16 these numbers are
doubling so in fact each one of these
digits in binary represents not
the tens the twos so with a one this is
actually one this is actually 2 to the 0
power 2 this is 2 to the 1 power this is
2 squared 2 to the third power we're
doubling so this is by the way the
algorithm that I need to write in my
code to convert from binary
representation to decimal representation
are you ready to do that okay um I don't
know maybe that was better so far so I'm
going to show the thing in JavaScript
where you can actually it'll do this for
you all right
all right so actually before I write my
own algorithm I should point out that
this is the kind of thing that you can
actually do in JavaScript so first of
all I think you can make a number like
if you say 0b like if you put like the 0
then the B it's like oh now this numbers
gonna be in binary so like if I say like
1 0 that should be no oh whoops sorry
actually it is right hold on let me come
back here refresh this page oh god I
have to watch this crazy ad again okay
all right happy give an 8 now we come
back alright so one thing I want to show
you first is you can actually you you
don't need to write your own algorithm
do this conversion this is built into
the way that computers work and actually
javascript has several helpful front
help helper functions that'll do this
for you I think if I say for example a
equals zero B if I have a variable
that's equal zero B I can put any
encoding so like what if I put 1 1 1 1 1
1 1 1 actually the value of that's
actually 255 so this is I can actually
hard code a number in binary by saying 0
B I can also use this parse int function
so if I say parse int and give it a
string like 255 just converts it this
string to a number but I can do things
like say parse int 1 1 0 and then give
it a radix sort this is another word for
bass and say like what is the value of
the integer value the decimal integer
value of 1 1 0 in base 2 right it's 6 in
base if it were base 10
obviously it's honored and 10 so this is
that this will actually be done for you
just threw that parse int function but
let's go and actually write our own
algorithm for this yes there is a bell
ringing and let's go to the web editor
so let's let's just assume for the sake
of argument that the binary numbers that
I want to work with are going to be
strings
so I am going to make a number and I'm
going to make it a binary number and you
know there's a thing about like when you
have eight bits it's kind of important
here right each one of these is referred
to as a bit each spot in a binary number
is a bit when you have eight of them
that's a byte and so this has to do with
how things are stored in the computer's
memory right everything ultimately in
the depths of your computer is stored in
binary format and the amount of Spacek
takes up is the number of bytes or
kilobytes or gigabytes etc terabytes but
I'm going to waste a lot of space and
encode my binary number as a string so
let's just say let's just try something
really simple like 1 0 0 and we know
that should be 4 right 0 1 1 0 no that's
not 4
yeah it's 4 I lost my mind for a second
there right this is 0 this is 1 this is
2 this is 3 this is 4 so we should get
we do this right we'll get 4 ok now I
want to write a function I'm gonna call
it bin binary to decimal
it'll take in any arbitrary value which
is a string and we could make this much
more generic so by the way as a
challenge to you what if you made a
function like this which is just number
converter it takes a number and to base
a base and a second base so here's the
number in a given base give it back to
me in another base it'll be generic
that's a challenge for you to do now or
later or whenever you want ok so the
thing that I need to do is I need to
loop through the sorry I equals 0 I is
less than value dot length so if it's a
string I'm going to loop through the
string one character at a time so for
each character the way to convert it is
to add up all of the twos so for example
1 0 1 is 5 because it is 1 0 0 plus 0 0
1 is
1:01 and this is 4 and this is 1 so 1 0
1 is 5 so if I just start here and take
the first digit multiplied by 2 and take
the second digit multiplied by sorry x 1
the second digit x to the third digit
multiplied by 4 add all those things
together and by the way it's not just 1
to 4 it's 2 to the 0 2 to the 1 2 to the
2 2 to the 3 so it's the exponent that's
counting up so I'm going to say sum plus
equal power and now I need to get this
value so I need to get V I need to get
the 0 or the 1 so I'm gonna say the bit
equals a value car at I now here's the
thing mmm-hmm
this is an interesting question here
what is I when it starts at 0 I is
actually the string representation this
is the zero index so even though I want
to do the conversion by starting over
here I'm actually over here so I
actually want to get to the end of the I
want to start from the end of the array
another you write the end of the string
and a quick way that I can do that is by
saying val val dot length minus i minus
1 right if there are three digits I have
not I have 2 1 0 not 0 1 2 2 1 0 so 3
minus I minus 1 so sum equals power of 2
to the bit and I need to make this a
number so I'll just use parse int
because it's a string and then let's
just say console dot log some and I
think we're done sort of console that
logs some and let's see let's let's do a
binary binary to decimal Val and
actually so this should
returned numb sorry and oh there we go
for let's test some other ones out let's
add another 1/6
let's try one zero one zero zero this is
a byte right if all the ones are on in a
byte right
everything is on eight bits is a byte
and if everything is a one what do we
get
ok I need one more wait what's going on
well something is wrong no this isn't
right I've made a mistake too to the
parse int bit
by the way down low is asking why not
iterate from Val dot length minus one to
zero
what did I get wrong here
oh-oh-oh this is not right at all oh my
goodness I'm so wrong this code is not
correct at all so remember I am each
digit represents a 1 a 2 a 4 2 to the
8th power I actually even said that
somewhere somewhere I some time earlier
I'd say to be i2 power maybe only in my
head so what I'm actually doing is
taking that bit and multiplying it now
of course it's a string so I have to
convert it the string value it now this
is what I'm looking to do and now 255
there we go
boy huh so now it's getting there were
some right answers by accident so that
should be 4
this should be 5 yep look at the kid
have twos there that should be 18 so I
should probably write some error
handling right because actually this
would actually work if I put a 3 in
there it's gonna give me a number but it
makes no sense at all so and once again
I was what I wanted to show was that 8
bits all on gives me 255 and in fact
this is why we see again the range you
can store 256 possibilities in a single
bite a bite being 8 bits
256 in decimal or 2 digits in
hexadecimal okay I'm getting some
messages from the chat saying that maybe
it would be more intuitive to run the
loop backwards so yes but then I have to
so it's six of one half dozen of the
other as far as I'm concerned because I
either have to invert it here or I have
to invert it here
so I don't know which would be more I
mean I could have a counter so you know
I could do this counter equals zero and
I could run the loop backwards and then
increase the counter but I don't know
I'm gonna stick with what I have all
right now I said this was gonna be a
long one and I'm gonna let it just be a
long one you want to stick around
keep watching you could go through
something else but what I'm going to do
is now make this interactive so I want
to make something where I can actually
click here and I can turn on and off
bits and see the conversion live so
let's figure out how we're gonna do that
so I think I want to use some
object-oriented programming and I am
going to make a class I'm going to make
an add another javascript file called
bit j/s and I am going to make a bit
class and the bit class is going to have
a and let me take off this auto refresh
for right now it's gonna have an X I'm
gonna just it's gonna have an x and a y
and a psyche with a size maybe I'll make
it on a circle so it's gonna have like a
diameter I'll use a circle to represent
each bit and then it's going to have a
state right its state is going to be on
or off then I'm going to have a show
function or render I could call it where
I'm gonna say a stroke 255 let's make
the outline white and should it be I
know I can never figure this out is is
black on white on I don't know maybe I
should make it red and blue we'll figure
it out I'll we'll see how it looks so
I'm gonna say draw an ellipse at this
dot X this dot Y this dot diameter and
its fill is going to be 255 times this
dot state so in this case it would be
white if it's on so what I want to do
now is make an array and let's just
let's just use eight we'll do a byte and
actually so I could call this a byte
well that's probably like a bad word for
me to use because maybe that's reserved
somewhere in JavaScript but let's say I
equals zero I is less than eight I plus
plus and let's make a bit equals a new
bit at I times so let's say
I want to fit all eight across in mind I
could use Dom elements or something
that's gonna be easier to interact with
but I'm just going to draw them as
circles so I am going to say I need to
calculate a width which is the width of
the canvas divided by eight so I'm gonna
say it's its x value as I times with its
Y value will be at fifty and its
diameter will be W and I'm gonna say
byte index I equals that bit and I guess
I don't need a separate variable here
I'll just do this and then I want to say
here I want to say byte index I dot show
so what do we got oh let me turn back on
auto refresh and I've got some errors
show is undefined I see a show function
oh wait whoops I put these in the wrong
place the creation of them has to be in
setup and note stop don't all right
unbid is not to fight oh of course I
forgot that if I'm adding another
JavaScript class I need to make sure I
reference it from my HTML file and now
we're seeing and if I if all of them
have a state of on I'm not seeing
anything
so let's see oh I've got to pass in the
arguments X Y D so right now I want to
set the arguments based on this there we
go
there they are there's all my bits and
maybe I want to offset them a little bit
and maybe I actually want like this to
be their diameter to be like have a
little buffer in it whoops there we go
so this is looking nice there are my
bits thank you very much oh I'm excited
about this this is gonna be good
and now if I take the state and like
state zero
there we go so now let's make this state
let's actually also initialize the state
I'm just going to write that and in a
separate so I'm gonna set State and I'm
gonna actually say numb dot car at I so
I'm going to use the character sorry I'm
gonna use the the individual character
there to set the state of the particular
bit now set state is not a function
because I need to add that in here and
I'm going to say set state state and I'm
gonna say this dot state equals and I'll
add parse int in here just to make sure
it's a number and now what's going on
set state is not a function set state I
see that as a function sketch dot o is
not of course byte index I dot set state
there we go so now as I change values in
here it chain turns those bits on off
okay we're getting somewhere now what I
want to do is I'm going to add a decimal
I'm gonna say decimal P decimal P equals
create P grapey and then in the draw
loop and it's filly that I have a draw
loop here I don't need to continue to
draw but that's something that can
revise later I'm gonna say where's that
function binary to decimal binary to
decimal I'm going to say decimal P HTML
binary to decimal num and so now we
should see it says undefined whoo Oh cuz
it's console.log again
I want to return some okay 182 now you
can barely see that so let me go to my
CSS for a second and add a color and
guess what I'm gonna use accessible
we'll actually do it no I can use three
FS because it'll but um let's use six to
do RGB and let's also make the font size
like much bigger okay so now and let's
actually make this a just it's got this
extra because it's a paragraph element
actually this is so silly but I'm gonna
make it a div just so it shows up up
here okay so now this is not interactive
but I could do this and it does feel it
does look inverted right this really
looks like on/off on on the way that
I've kind of drawn this somehow the
black color looks like I've turned it on
so you know I could probably make the
background much darker like if I made
the background like 51 yes maybe this
look like stand still I don't know it's
so confusing
what if I'm a I don't know which is
which you tell me I my visual design
skills are kind of a disaster but if I
go back to this but anyway whichever way
I think it is I could actually just say
255 minus this and now right now it is
colored black when it is on and I could
say one zero one zero one zero zero one
we could see 169 okay should I make this
interactive I mean I've gone on for way
too long already
let's make because I need to make this
interactive do you know why because the
whole point of doing this was to talk
about pitch shifting and bit masking I'm
gonna get to that that I'll do in a
separate video let's make this
interactive so what do I need here I
need some sort of function to see if it
if this a bit contains a point so if so
what I need to do is calculate the
distance between this point and its
X&Y and then if the distance is less
than the radius which is the diameter
divided by two and it's this dot
diameter and I'm going to call this
toggle I'm actually just gonna I could
return I'm going to make this
toggle function then I'm going to say
this dot state equals now if the state
is a zero I want it to be a 1 if it's a
1 I want it to be a zero what's a nice
way of doing that I mean I could write
an if statement speed this part of me
thinking up I mean not okay I thought of
a way I could say not this times 1 right
wouldn't it
what's gonna give me a true with this
work
no we hold on yeah I know I could use
that silly ternary thing no I know not
state would work plus 1 mod 2 I love
that to the power of negative 1 well
these are all such good suggestions all
such good suggestions true or false
yeah yeah
all right so people give me great
suggestions like hold on I lost all the
suggestions now Oh anyway oh yeah people
are giving people give me great
suggestions like plus one modulus two to
the power of negative one I think I'm
just gonna admit to myself that really
what I meant was for this to be true or
false so I'm gonna the state's gonna be
false and when I say set state I'm gonna
do parse boolean it's that a function in
JavaScript let's see if it is and then I
could say not this dot state parse
boolean is not defined
there's no parse boolean but if I do
boolean ah there we go
okay so boolean is like a function I
guess or that will convert that to this
and then here what I want to do is I
could just say if this dot state fill 0
and of course this is rather awkward but
I don't care this is how I like to write
code there we go
mmm this is not this is no good no good
that didn't work
oh you know what those are strings so
this needs actually say parse int there
we go okay we're back we're back baby
okay now this boy there's lots of things
you could improve right all right now
what I can do is make these interactive
so I can now add the mousepressed
function and I can just say for and I
can loop through again once again I can
loop through and this should really be
byte length I can do this and I can look
through all of them and I can say toggle
whoops no and I can just call toggle
with the mouse coordinates and now look
at this oh but how come it's not
updating oh shoot it's been a half an
hour
especially not so bad so it's toggling
the toggling is working but it's not
updating why is it not updating because
oh I am converting this string this my
function converts a string so I could do
something like make the I could make the
buying it the decimal version of the
number out of the array of bit objects
but I think what might actually work
nicely here is for to make the string
out of it so what if what I do now is I
say in here I'm gonna say well let's go
I'm just gonna use that same variable
num equals an empty string and then I'm
gonna say num plus equal
oh this isn't set up sorry in draw plus
equal oh now I want to have a 0 or a 1
but in excited state so this is where I
have to use but I have to embrace the
ternary operator it's something that I
have never natively really understood
it's like never fit into my
brain but there's this thing called
ternary operator and it looks like this
the condition and if the condition is
true this is the result if it's false
this is the result we can make this
happen right now we can use that ternary
operator the condition is actually just
bite in X is 8 then I need the question
mark and this is so nice I just need to
have if it's true a 1 or a 0 its false
oh I need to say recreate that string
whoa look it's going crazy there we go
look at this now oh so lovely let's go
everybody we did it I made a binary
thing that you can click on bits and
convert it to a binary number now here's
the thing oh boy you the creative person
watching if you made to the end of this
video
wow you really are so big thank you I
can't believe it because this was
ridiculously long-winded to just explain
binary numbers but you now have the
opportunity to make something creative
here you could what if you made it you
could make a clock that displays the
time in binary maybe you could actually
also show the hexadecimal value you
could actually make this a form content
editable that you could convert
backwards how do you convert this as a
thought experiment for you I can come
back and do another video but how do you
convert not from binary to decimal
how would you convert from decimal to
binary I'll give you a hint it has to do
with division and the remainder I think
so there's so many things you could do
you can make a more interactive version
you could make a counter that sort of oh
this would be fun to have this like
count up in binary well that's kind of
like the clock you'll be in color other
ways of visualizing it you'll come up
with something I know you will you
always do thank you so much for watching
this coding challenge and I will I
remember at the beginning when I said
the whole point of this was talking
about pitch shifting a bit masking I
will come back
and I will do that so that will be in a
separate challenge I'm going to add some
buttons for shifting and masking alright
okay alright everybody I can't believe I
spent the entire two hours basically on
this of course I wasted half an hour and
I did it twice but I think we've got
something maybe hold on I gotta check my
schedule I sigh I sort of said I was
gonna be done at 12:30 but I really want
to do the masking and shifting because
there's gonna be some really cool stuff
you'll see what the shifting okay okay
let me let me check the calendar here
I'm on the calendar what time is the
thing 1 o'clock ok the thing I need to
go to is that one which is 40 minutes
from now I also need to get lunch but I
can bring lunch to the thing so I think
that if I'm done at 12:45 that's ok all
right everybody I don't know why but
this really pleases me I really like
this this is who I am
alright and that's actually and I think
I can actually get I think it would
actually be better I'm just gonna adjust
the code a little bit to
yeah
okay
all right so let me save this as
actually maybe I should make them all on
yeah
let me save this and save it as bits and
bytes here is the URL if somebody wants
to post this in the chat and now
duplicate yes duplicate well let me just
say interactive bits interactive bits
let's call it that then I'm gonna say
duplicate and I'm gonna call it
interactive bit well interactive bit
shifting okay let me organize the code a
little bit
all right
if it still works all right here we go
oh let me erase all this
okay okay I will read this Zachary and
the chat rightz read my joke
why do mathematicians always a mistake I
don't have like a laugh do I have a
laugh track no or like a bump
why do mathematicians always mistake
Halloween and Christmas because acht 31
equals Dec 25 I'm gonna put my salad I
do thank you very much thank you all
right um here we go
hello welcome to coding challenge bit
shifting so this is the second part sort
of of this coding challenge series about
binary numbers that all came from me
work me do implementing this in the
7-segment display video coding challenge
and then everybody asking what was that
that you did this shifting and masking
makes no sense to me so what I did in
the previous video if you actually
managed to watch that video was I
created this little interactive binary
to decimal converter system so this is a
single byte with eight bits every bit
being on I don't know maybe that should
be white if it's on black if it's off it
whatever but black in this case means
it's on and so you can see here if I
toggle all them off I have a 0 this is 1
this is 2 this is 3 this is 4 so I can
just toggle these bits on and off and
get the decimal representation of that
number ok so what do I want to do now
what I want to do now is add bit
shifting to this well what is bit
shifting and why would you ever want to
do it I don't know I mean I know what it
is why you would ever want to do it well
I needed to do it with my 7 segment
challenge so maybe that's the reason why
you
do it let's okay so let's say for the
sake of argument that we have the number
1 0 0 1 1 actually hold on let's say for
the sake of argument that we have the
number 0 1 0 1 1 0 1 0 so first of all I
need to convert this into decimal just
to I mean I don't need to to do bit
shifting but just to sort of think about
it so let's think about that this is 1
so this is 2 + 8 + 16 + 64 so that's 80
+ 10 is 90 so this number is 90 where's
my reciprocal okay so that's 90 so what
is bit shifting so bit shifting when you
take any number like the number 90 you
can ask to for the computer to think
about it in binary which it's already
doing that's actually what it's doing
and shift the bits around so I could say
shift to the right
or I could say shift to the left and I
could say shift by a certain amount so
let's say I just say shift to the right
by one so this is bit shifting and what
that actually does is it shifts all the
bits over so this is a 0 this is a 0
this shifts are here that's a 1 that's a
0 1 1 that's a 0 and this is a 1 now
interestingly enough I can tell you that
this is the number 45 I hope it's the
number 45 why this is what's really
interesting shifting the bits over by 1
is actually the same operation as
dividing by 2 think about the powers of
2 and a binary numbers work shifting to
the other way to the left is multiplying
by 2 look at this let's be sure about
this this is 1 2 4 8 16 32 so 40 + 5 45
I was right so this is what bit shifting
is basically does so in theory does when
you say 90 divided by 2 does it shift
the bits I don't know maybe but this is
actually I've heard I think this was
right that this is a faster way to / -
of course you can only do it with
integers and how floating point numbers
are representatives of bits is a whole
other discussion
but now what we can do is let's add this
feature to our code and by the way we
can shift by more than one at a time I
could shift by four bits etc but all
right
and you might be thinking yourself I
don't get it
why is this one a zero like wouldn't
there be some bit over here to shift in
well when you apply bit shifting you can
imagine that the number 90 if you were
represented in two bytes all of these
would be zeros so it always can only
sort of assume that thing to the right
of zero and whatever is here gets
shifted over and basically gets removed
so by the way if we tried to shift again
and divide this we would get what would
we get we get the number 22 we wouldn't
get 22 and a half because we get the
integer value of dividing that by 2
which takes off the decimal value ok
let's add that so let's go over here and
let's add a button let's add a shift B
button and let's say and I'm just using
shift button equals create button and
I'll put this in the button so now it's
it's so tiny but that's fine so this is
going to be my button whenever I click
it I'm going to shift the bits to the
right so how am I going to do this hmm
function so let's let's say shift shift
button shift bits so I'm going to write
a function called shift bits Q all of
the jokes about me being Daniel shift
man Mon chief ma what function with a C
and now is not a function
shift bits shift button Oh shift
dot mousepressed this is the p5 Dom
library that I will be able to attach a
function as event to when I click the
mouse on this button so now what I'm
gonna do is okay well here's the funny
thing is I I was doing this to show you
about bit shifting oh I guess I could
take that
Oh interesting oh look at this think
about ah this is really interesting so
what there's a couple ways I could
approach this problem if you watch the
previous video all of these are like a
bit object and I can I've kind of kept
all information about like its X&Y its
diameter and its state and I'm rendering
it but what I'm actually gonna do here
is I can take the decimal version right
so so this is a little bit of code here
I'm going to put into a function which
is going to be which is just gonna be a
function like get decimal so whatever
the state is I'm going to get
oh no that's get sorry get binary string
this is going to return the binary
string of whatever the visualization is
reporting so I'm gonna say get binary
string so now I'm back to what I had
before right but now in this shift bits
I can't do exactly this again so I want
to get the binary string then I want to
get the number then the value equals get
you close binary to decimal
oh that number then I want to say Val
equals Val shift by 1 so I want to shift
the bits over by 1 but now I'm gonna
have to convert that back to binary I
don't actually have a decimal to binary
function what I want to say now is num
equals decimal to binary right
of value so this is what I want to do I
want to be able to now anytime I click
this get the could get the conversion
back to decimal oh I have to write a new
function so this was binary to decimal
now I need to write a function I know I
knew I would have to do this I left this
as an exercise but I'm gonna need it now
decimal to binary now again I could get
JavaScript to do this for me natively
with two string so for example if I just
open up the console here and I were to
say let numb equals 90 I could say numb
to string two I'm done maybe I'll just
do this it'd be really nice to just do
this but I'm gonna do it myself
so what I'm going to do is I need to get
now I get a value in oh I'm using these
variable names and terrible ways I need
to do a refactoring of this with better
variable names and what I'm going to do
is and I know I'm going to always do
this as eight bits so this is a bit of a
constraint I don't have to be so super
generic here I'm gonna say int I know
not int let a equal zero ah I is less
than eight I plus plus and now what do I
want to do I need to divide it by so
here's the thing how do you this work
I'm pretty sure this is how you do it
let's say I'm going to take the value 90
and try to turn that into binary so my
theory here is that I'm going to divide
by 128 divided by 64 divided by 32
divided by 16 divided by 8 divided by 4
and you can see what I'm doing here I am
taking the thing same thing I did powers
of 2 but I'm going to use the division
operator what do I get when I say 90
divided by 128 I get a 0 90 divided by
64 I get a 1 remainder something 90
divided by 32
oh here's the thing
so what's the remainder okay so this is
what I need to the remainder here is
sorry 60 470 480 426 so this bit is
going to be a 1 and now I take that I
don't take do 9 u divided by 32 ah what
am I thinking here this is not what I
meant to do ah something fell over get
rid of this 9 here so this is 0
remainder 90 basically right 0 remainder
90 so that remainder comes over here now
it's 1 remainder 26 26 comes over here
26 divided by 32 is 0 remainder 26 26
divided by 16 is 1 remainder 10 right 10
divided by 8 is 1 remainder 2 you can
see where I'm going here so I should be
able to do this now come back over here
to the code it's weird how much fun this
is for me
so what I need to do now okay so I'm
starting with the number and I'm gonna
say the binary bits is this I'm going to
use a string and I'm going to go from 2
to the 7th I equals 0 I is greater than
equal I starts at 7 I goes down to 0 I -
- and the remained I'm going to need
this remainder value so the first thing
that I want to do is to call the divisor
equals power of 2 to the I then what I
want to do is I need to do integer
division so I want to say number I want
to say the the answer or the the value
the bit value equals number divided by
divisor pause for a second I lost my
chat
number by divisor this is kind of
awkward is there a way to do integer
I'll just use foot number divided by
divisor here's the thing I'm gonna use
floor so Java JavaScript natively it's
going to do everything as floating-point
if I were in like the Java programming
language it would just give me the
without the remainder so and then I'm
gonna say the remainder equals the
equals the hold on it lost my train of
thought for a second all right
I lost the chat over here because I'm
getting things are beeping at me to go
to meetings
okay what division it's like oh he's
modulus you can simply do mod two to the
I remainder equals numb okay sorry okay
I forgot I forgot something that I have
a whole video actually Golan Levin came
did a guest tutorial about a particular
operation called modulus represented I
think they operated students called
modulo and maybe they symbol is modulus
I can never remember this someone's
going to get a lot of comments telling
me the correct way to do this I could
just see it already but this gives you
the remainder of the division operation
so what I can do here and this by the
way this should be remainder and
remainder should be numb and then the
remainder is the remainder modulus
divisor right and now oh and this and
the bit value is bits plus equal bit
value boy is this possibly right and
then return bits where did I let's just
see if this function even works so one
thing I could do actually I'm just going
to go that the p5 web better consult
isn't interactive but I can go here to
the canvas frame and I can say right
what was that name of that function
decimal to binary and if I have the
decimal number like one hunt
I think that's right it works okay
it's 255 yeah okay great
so that works so now we're when I'm
shifting right what was I doing I was
shifting then I get decimal to binary
and then what do I need to do update
this is really in draw right in draw
there's a draw function somewhere this
is like update the states what oh no oh
no where do I do that
oh I did that here so I need to update
all the states so look I have a set
state function how convenient
so I also now once I do that I need to
go through and set the state to numb car
at I and and this probably has to be a
number but maybe I have that in set
state oh it's Bulli
right I forgot I have this whole crazy
thing to take this string which is 0 1
turn it into number and turn it into a
boolean perfect so it does that already
so now I can shift oh boy / 2 / - look
at this oh my goodness so I can now bit
shift wow this is let's go back to 90
right this is 90 whoops
90 okay ready here we go let's this is
gonna be exciting moment no no aah don't
click there no get back to 90 there we
go
but we now have interactive bit shifting
now you the viewer of this you probably
want to add shift the other way that
wouldn't be too hard to add I do just
add another button ship the other way
maybe I want to actually have like a
slide or shift by a certain number of
bits maybe I don't want to limit myself
to eight I want to have two bytes
displayed but there's all sorts of
possibilities now in terms of how I can
do bit shifting I've got a new bit
masking that's good because he's gonna
be another video here okay but there's a
couple things I want to I know everyone
is going crazy that I have the black is
on let's fix this let's make it more
clear so I don't leave leave everybody
in such a traumatized State so I'm gonna
make the background 51 and then I'm
going to in fill or I'm drawing it I am
going to and let's let's use a ternary
operator I'm comfortable with them now
so I'm gonna say fill this dot state if
this that state is on the Phyllis 255 or
if it's off zero there we go so this is
they're all off now they're on it looks
weird to me
Oh background 51 is like the same as the
actual anyway so and I could shift now
that's crazy yeah that looks better
right I'm shifting down okay I forgot
about you the viewer alright so I don't
know thrill me with your weird weird
variations on this I look forward to it
I do need to do something about bit
masking which I will do an ampersand and
or an or and Simon has been telling me
breaking news in the chat over and over
again I can also do X or so you can also
do X or as a bit wise operation so
thanks for watching this challenge and
I look forward to seeing what you make
share with me stuff in the comments all
your Corrections and complaints and
happy thoughts or whatever and I'll see
you again in another video goodbye all
right all right everybody I've got to go
oh yeah
Soyuz 51 oh yeah yeah okay use 51 for
disabled no oh yeah that's everything on
and then make the stroke weight for this
came from oh oh you're the chat scrolled
by it yeah this is better but maybe also
I want to just make this 200 yeah or
maybe I want to make the stroke then
zero how about that I don't know I can't
figure out what to do I don't make it
better
I am so visually challenged stroke like
what about if it was like pink or
something I'm so visually challenged I
think I'll just leave it let's just
leave it at this let's make the stroke
weight to not forty to two and let's
have them be off at the beginning I
could actually let's make it random at
the beginning sets state random - yeah I
was gonna add floor in here but let's
all right so that's good
every time it starts it's something
random okay
ah
Nathan writes second time in a row I've
super chatted Dan and it went past him
without noticing and Simon wants me to
show the gist okay so hold on let me
find well how come it goes away I don't
see it here but thank you Nathan you
solar liner I believe for the super chat
that is very kind of you I'm sorry that
I missed it I don't know how to like see
the super chat if it's like in the past
I don't have that maybe I can see it in
my view over here no top chat no live
chat super I can I can send a super chat
what if I send a super chat to myself
this is interesting
was it gonna let me so far it's letting
me hey it worked okay now can I see
previous ones no I don't think so sorry
I got a million messages here in github
I mean it's like okay a super chapter
floorliner tada now go to your meeting
thank you
I can probably see it in the history of
my whatever what you might call it
YouTube super I got to go get lunch I've
ten minutes to get lunch before this
thing I'm going to I don't want to be
too late to it but I do
oh and I forgot to record this thing to
disk again I'm sorry Matt see I can't
know why I can't remember that these
days I there was something that I wanted
to do there's something else Oh Simon's
just alright so gist github.com slash
Simon - Tiger let's find this gist
bitwise j s these are all the bitwise
operations and or XOR not who not would
be a fun one to do zero Phil shift left
zero Phil shift right and signed boy so
many more things to talk about
Chris ray asked are you going to word
Tyvek today sadly apparently no because
I make a list of things to do and I
think like it's I have two hours and I
take much longer to do them so I the
word to Beck's stuff I'm going to do
because I teaching it in my class
actually here at NYU next week so
hopefully it'll happen next week maybe
maybe I can find a time before next
Friday even to do it I do want to
mention one thing which is I'd be
curious for any feedback on this I've
been really trying to find a new
merchant
I shop people request merchandise and
actually if I just go to I think the
coding training channel and go to
community tab I posted a link there so
this is a bunch of new designs that I'm
actually wearing one of them right now
the microphone just went you know the
microphone is still attached to me you
can see never forget that this dot shirt
is here underneath so adjacent Haglund
who has done all the illustrations for
the coding train has made a whole new
set of designs with I'll refactor that
later never forget this dot and all the
different coding train characters so
I've been trying to find a good place to
have these available for people who are
interested and I really like this new
site called designed by humans so right
now it's just in progress there's very
few options
ooh apparently I can sign up and get 10%
off my next order can I go away from
that but for example if I click here I
think I can see like this shirt but
there's like other colors and there's
like anyway I'm curious for feedback
does this you don't have to buy anything
but you could sort of like click around
here just see how it works for you and
then a comment in this thread with any
feedback or things that would be helpful
then that would be that would be super
helpful to me I'm gonna try to launch
this hopefully sometime next week
and I believe this is this is my
question so Rahul asked can you send
those t-shirts to India one of the
reasons why I picked design for humans
is well one is they they seem to have a
nice policy in terms of the quality and
labor practices of the shirts that they
make so again I haven't done a deep dive
into this but a brief view of their site
seems like a good organization with good
quality stuff made in with good
practices and they also have
international shipping at reasonable
prices so check that for me Rahul even
if you don't buy anything if you could
click all the way into like where the
last step before you would buy or at
least calculates your shipping let me
know what that price is for you to India
you can send me a tweet or a comment on
that thread
in the community tab I would love to
know that all right everyone ma you are
so wonderful to give a shout out doesn't
need a shout out but I've been watching
smarter every day recently loved those
videos and watching them with my kids
random shout-out to a much larger
youtube channel than me
but i one of the things that I saw that
I was actually thinking of doing is a
coding challenges recent we can find it
a smarter every day I really need to go
this is something I'm thinking of doing
I never know like about reappropriation
other contests okay not the backwards
brain bicycle this one cannon shockwaves
let me find um he shows oh wow these are
like not skippable ads interesting I
don't have not skippable ads enabled for
my channel spectra by the way oh thank
you
ah okay oh my goodness the gaming Jin
writes I want to thank you for all the
videos you have made they're super
useful by the way I am deaf so I can't
hear you in the stream alright so I want
to just pause for a second to address
this I have been I'm really priority for
me as accessibility and I have all of my
video tutorials the edited versions that
come out of the livestream that I use
for my courses all of those are now
being captioned through rev.com and I
make sure that captions are there before
I upload publish them so I would like to
know I'd love to hear from you if those
captions are helpful and work for you I
some of my recent live streams and I
recognize the absurdity of me doing this
where the gaming Jin is not able to know
what I'm talking about right now there
are automated captions but I have been
trying to do live captioning with a
company called white coat captioning so
I'm gonna type a message to the gaming
jinn right now just in the chat please
get in touch via email or Twitter I'd
love to chat
captioning for accessibility so I'm
writing that in the chat right now there
is I do I think I have the automated
live captions which are something but
anyway I would love to I love to be in
touch to figure out ways to make the
live streams more accessible and I've
actually been asking YouTube about this
directly so somewhere in this video
Destin does frame differencing on the
slow motion this is it this is like
totally wild so this is a slow-motion
cannon firing but with a frame
differencing algorithm applied to it and
it really like shows these shock wave
patterns I was maybe I'll get in touch
with Destin I would love to get the raw
footage and try to implement the code
and I guess I could probably pull it off
the channel but I think I probably ought
to get permission to do this well that's
a giant Destin there if I'm saying the
name raise it Dustin or Destin but I
would love to get to try to do that in
processing I think that would be
interesting okay I was watching this
last night with my kids and they stayed
up way too late
no more smarter every day at night kids
you kids stay up late watch the smarter
every day but my kids go to bed on time
please thank you very much everybody I
have to go this is the end of today
[Music]
I'm gonna just check the chat
[Music]
Destin okay I am I recently had the
chance to meet Destin that was awesome
of him oh I was I played it cool though
alright looking at the chat we'll get
the chat all right all right everybody
do you dye your hair because you had
videos with gray hair you know I don't
it's a great question actually and I
think what it is is the green screen
actually makes the gray less also when I
have shorter hair it's not as obvious
and the focus will be off you can see
first of all you can see me with a
balding up here but I think for whatever
reason the a green screen maybe if I go
to the if I take that off this is very
important to address of course
[Music]
this is the question I'm choosing to
answer each oh wait no it's here what's
locked filters yeah I turn off the
filtering nope ah there we go all right
there's my baldness and my gray hair
plenty of gray hair but somehow the
camera makes me look younger we turn
that back on
[Music]
and
[Music]
I have to put this back no open
broadcaster you ill enough there we go
goodbye everybody good night see you
next week I have to find where I shut
the stream off awkwardly gonna be here
for a little longer Lotte be on the
lookout for my word to vex series which
is going to start publishing public as
soon as this weekend or Monday or
whatever and yeah