illuminated orb from the website and
then you open Luna Studio and you wait
for a while because this is a very slow
alpha and you are presented with
something like this and you know let’s
just go through the basics tutorial
really why not
what ahh in this tutorial you will learn
the basics of using nodes and the
interactive Luna editor you can perform
actions as described in the tutorials
yourself or simply press next and the
guide will make them for you next luna
studio contains many different panels
with a code representation or the file
tree view so this is the file tree view
here on the right with the fantastic
choice of contrast who like this is so
hard to read people I am yeah for now
we’ll focus on the visual editor click
on it to start working so this up here
is the visual editor I don’t even know
if this contrast if mouse pose say works
with this super black background but
anyway it’s a top window here click on
it to start working ok I will click on
it centering the view there are some
nodes created on the workspace before
press H to send through the workspace
and clearly see all the elements present
age okay cool so now we have these two
year we have radius up here and we have
inner radius down here position little
cursor to the right of the existing
nodes and press tab to open the Explorer
this is the control center of Luna
allowing you to search for notes add
them to the workspace and read the
documentation so if I just position my
cursor over over here and then I press
tab okay Luna Luna Explorer so this is
kinda sort of reminiscent of the command
alt p or like hitting an intelligence in
in Visual Studio code I think this
editor this editor is built an atom by
the way let me just okay
it wants me to type circle and I think
that circle here this is actually a
function doesn’t say much here where
where circle comes from which is a bit
annoying I don’t quite understand from
where it is I think it’s from this STD
graphics 2d library but not sure anyway
press the down arrow to unselect explore
sins and use your input okay so these
are the hints and this is input you say
to enter okay so your first connection
click on the output port of the radius
known and start start a connection ok
the output port they don’t say what the
output port is but I’ve poked around
this a little bit and the output port is
sort of sort of this thing so if if you
look at this node here you see that it
actually has two half circles and the
leftmost is the input port and the
rightmost is the output port I really
like to just remind myself that this is
what programming is about it’s about
transforming data that’s yes that’s all
it is and anyway click the output port
of the radius no to start ake a
connection and radius is just a value so
it only has an output port it doesn’t
have an input port and I click this and
I think that this it’s also showing me
the the data type here it’s a real
number and I click it and then I get
this thing where I can drag it and it
says now in little mmm tutorial box that
connecting the nodes click the input
port of the circle one node to finish
connecting so you see here like
this is input note here so we can also
see here that it says that it takes a
real real data type real number and I’m
just gonna click here Moo cool so
viewing the results you have just
created your first shape with a graphics
library now click the eye icon to the
right of the circle ones node name to
toggle the visualization where’s the i/o
it’s did this is the eye like it’s here
to the right of circle one and maybe
just like that
ah okay anything happened anything
happening I think that something should
yeah there there’s something happen yeah
this is like did you see how blazingly
fast that Haskell compiler whoops no
it’s not fast I believe though I want
you I feel that they will make this fast
eventually maybe he hypothetically it
could be fast d selecting the node
before adding other nodes we need to
deselect the one we’ve been working with
simply press escape to cancel selection
okay so okay you can use now see here
actually that my the low like the radius
thing here this doesn’t this node
doesn’t have an extra ring around it
neither does this inner radius thing
down here but circle one has this extra
ring around it and I will now press
escape to deselect it adding another
circle now let’s create the border of
our logo we’re creating a logo for
starters we’ll need another smaller
circle position the cursor to the right
of the inner radius node and press tab
okay so I’m gonna press like okay
position the cursor to the right of the
inner radius thing okay a hair so we’re
gonna great and you know to the right of
the inner radius we’re gonna press tab
here and I’m gonna type circle again and
on and select just my
yes denture okay and we like we’re gonna
do the same thing here we’re gonna
connect our inner radius value here
how do it it’s connected like click on
the output port of the injuries I have
to do exactly what the Torres says so
clicking the output port
now drag it drag it drag it and then
we’re gonna connect that to the input
port the this circle here so now this is
connected right we’re gonna click the
eye to see what has happened so far
come on oh oh come wait what did I is it
what is it doing
oh I I think it bowed out it’s not
showing me it didn’t enable the eye this
is so buggy and that’s okay
it’s not gonna allow me to click
the eye now the tutorial is a bit broken
but I know what the tutorial does
because I’ve already done it and below
circle to here it’s gonna be yes like as
you see here like the radius 32 produces
this circle then the inner radius is
going to produce this like a slightly
smaller circle I wait let’s continue
tutorial making the border now that we
have two circles of different sizes we
can subtract them to create the border
position the cursor to the right of both
circles and press tab now let me okay
fine I’ll do that now
I’m gonna like subtract the bigger the
small circle from the the bigger circle
so I’m gonna do circle 1 – circle – what
and press Enter monk double-click the
difference 1 node name to rename it okay
fine and we’re gonna rename that to
border fine
let’s see how our border looks okay
carefully click the eye icon alright
cool so now we see the border down here
I’m gonna expand see that you see it
well yeah it is still oh actually asked
me to scroll around that’s good
let me there deselecting the node before
adding our other nodes we need to
deselect the one we’ve been working with
okay hitting escape to deselect border
adding the body of our logo we have
prepared another node that draws the
body of the Luna logo oh it’s like a
cooking show where they have like oh we
have prepared the chicken already
pressed ok press tab to use it okay tap
[Music]
to use a component type logo body in a
radius type okay logo body in her radius
oh god can I do that no yes fine
I wanted to use the autocomplete but it
really wanted me to type it out view
only the results please wait super fast
super fast he’s really really slow
anyway while we were waiting I can
actually see here that logo body radius
is actually defined here so this is all
the the code for it this is what radius
secret lair yeah this is code for it
it’s not too bad so this is just a
function declaration this is the name of
it and here’s the first variable very
huskily this thing it’s no no prints or
anything it’s just it’s just very very
minimalistic language is it’s pretty
gorgeous actually okay mutant themselves
let’s see how the body logo body does
look click the eye icon of the logo body
want okay clicking nope
piggy
happen again I think what is
happening is that it’s so slow that I
click the eye and then I kind of reclick
the I don’t know it’s it’s really hard
to follow this tutorial because this
weirdness but it the logo is kind of
like this thing up here before anything
ok we almost need to deselect it
can I show no no no combining the blocks
now that we have both the body and the
border we can combine them together
position your cursor to the right of all
other nodes and press tab ok pressing
tab and then we go border border + logo
body 1 I’m present it’s using the
results it’s taking a long time ok let’s
see the results click the I icon to the
right of the someone notes name ok let’s
do this like with surgical carefulness
clicky yeah okay oh no it seems like our
logo has incorrect rotation let’s fix
that start by selecting this someone
node just click on it so yeah so you see
here that the logo is slightly off it
should be like now with the node
selected press tab when you bring up the
Explorer with another node selected it
will display hints contextually and
after accepting the result automatically
connect the notes ok tab type rotate
zero degrees rotate zero point zero and
let’s see the result click on the eye
alright let’s let’s do that ok all right
it kind of oh it’s not not in the
rendering engine it’s not really fast so
you see here that the visualization is
pretty big this little window but ok but
we haven’t rotated it rotated it any
like we rotated it zero so it’s not
changed now press ENTER again with
rotate node one select to expand to
detail you okay so this is the detail
view you can’t zoom these things I
believe if I do can I go in how to
assume yeah yeah cool instead of
connecting nodes you can also set their
values using various controls try
playing around with the control for real
numbers simply drag it around to set a
value try to figure out the correct
rotation on your own okay I know yeah
this should theoretically be live
updating I suppose but it like the
entire thing is so slow so will it
update will it update eventually who
knows it’s a bit sad that it does is so
slow because this is hypothetically
amazing if they can get it working just
right because there is a very nice
feeling that appears once you get
immediacy in your work oh now it updated
if I just can drag around and slide this
this degree value it just creates this
immediate very satisfactory connection
with my work it’s kind of like playing a
computer game where the controls
controls are really fast and responsive
as opposed to something that just tends
to drag on or drag like I press a button
and just there’s a slight delay I just
feel like and I feel clumsy you know ok
I’m pressing next you can also edit the
node expression whenever you want just
double-click it edit the expression of
the rotate one node I think I have to
wear oh I have to go up a little bit I
double click it here oh now I can edit
it like in line here
change the rotation value in the
expression to 30 degrees okay fine I did
Oh 30 point-0 degrees press ENTER to
accept and we’re done
Oh disappeared I think it’s reran during
or Enterprise reinterpreting whatever
congratulations you have just completed
your first project of Luna we encourage
you to play around with it a bit more
there’s a lot more to discover you can
also click the Luna logo in the top left
corner of the editor I’ll bring up the
dashboard to see what other project we
prepared for you and start a new one guy
that’s cool let me actually just
reorganize this a little bit I think
that this logo body here where does yeah
logo body in the radius okay so what
this does is that it takes the function
logo body and it train you grabs the
inner radius as the argument to that and
that gives us this output here which we
then trans like then passes an input
argument to the incorrectly rotated logo
some thing here and where does this logo
body come from so I can go up here and I
can expand to the main Luna project we
can see here that there are two things
defined here except the main function so
just to give you an idea about how
things work here main this by the way
it’s a textual representation of
everything we did today this is the text
for the entire graph so this is exactly
equivalent of what we did and this was
written as we were clicking around and
if you scroll up a bit we see the logo
body here the ones that gave us the deal
actually
tear thing this is what it looks like
and then there’s the half serger I think
that half Cirque is a is used by yeah
it’s used here so it’s a it’s another
function and like these things we can go
into the logo body and actually see how
that looks like in the in the graph
based language and that looks like this
this is the the entire thing pretty
funky oh did you see that it changed as
it evaluated the graph it started like
these things change
whoa sorry burp this this things changed
color so they are not brown and these
are blue and this is how Luna makes
distinctions between types you see that
this blue thing that means it’s it’s a
geo like a geographical geometric entity
like it’s it’s a with a circle and stuff
but these are just these are numbers
though the brown once the pretty funky
I’m do you think this is good idea of
expressing things I’m not even sure
myself I just think it’s super
interesting and stimulating to see
someone something so such a different
way of thinking about things
let me go back into main and just show
you a little bit so if I if I changed
something down here in the in the
text-based representation of the
language I can change this to you like
radius to 40 it will update that in the
up here eventually because so slow and
that will probably just give me like a
completely different final logo let me
show it to you will eventually show up
ah there we go
so I suppose it’s slightly bigger I’m
gonna change it to a bigger value like
60 see what happens I see you change
down here as well it’s always the text
based and it’s always sent oh really
thick right nice interesting my iPhone
just interpreted as what I said as hey
Siri and in Swedish she thought I said
the service landlord Wow sex baby and
she didn’t understand what I meant by
that and that’s that’s very reasonable
of her to not understand oh and now
things broke
I got runtime error this is an error
okay so it’s pretty cool though like
when an error happens like the way that
they make these things read it kind of
makes it very easy to see where things
went wrong so it expects a real here it
doesn’t really like that I’m using int
and quite know it white just can’t
coerce those because it feels like it
should but I I’m pretty sure that this
is a Haskell thing I believe I was
frustrated with the same thing when I
was when doing the the Haskell video
you’re interested in Haskell with you
could like it there by the way oh yeah
hello and that’s it for my short look at
Luna I just felt like checking out a new
programming language because it just
feels just like when people are doing
something that I feel is genuinely
inventive and like that you have a
little bit of guts to do something new
and cool it’s too broken to use for
something real yet but maybe this might
be useful for things in the
not-too-distant few decibel distant
future what do you think let me know in
the comments or the Fun Fun forum you
have just watched an episode of fun fun
function I release these every Monday
morning oh wait hundred GMT you can
subscribe here so that you don’t miss
the next run or you can just watch
another episode
right now by clicking here I am mpj until next Monday morning stay curious