*train whistle* hello welcome to a Q&A video I'm
going to talk in this video about what
is the difference between p5.js and
processing, i'm probably in a moment going to say
exactly that same thing, because I'm actually
just after the fact recording an intro
because I went on for so long i decided
to drop to divide this particular
discussion into three parts. so the first
part i'm just going to kind of talk
about those real bigger picture of these
two different environments and what
programming languages they're built on
and kind of how that plays a role in
their features and ways that you work
with them and I'll diagram that on the
whiteboard the second part i'll actually
show the two different environments and
type some code side-by-side and look at
the editors and see some pieces of that
and in the third part i will make a list
of pros and cons of why you might want
to use one versus the other or where
one environment excel over the other
environment and as well as take some
questions from the live chat about
things that I missed
so that's going to be three videos if
you find them interesting please watch
them if you kind of don't please don't
watch them and offer you maybe in the
second part *train whistle*
hello welcome to a coding train Q&A
video in this video I'm going to answer
a question that I get a lot about the
project the software projects that are
maintained by something called the
processing foundation the processing
foundation was founded in 2012
its mission is to promote software
literacy within the visual arts and
beneficial literacy within technology
related fields and I would say
primarily also to make these fields
make this more accessible to diverse
communities and i encourage you to read
more about the processing foundation's
initiatives and projects and mission, all
on the process foundation website but
I'm not here to talk about the processing
foundation in this video because i have
this habit of doing that all the time
the question that i get a lot and this
question comes from someone named
shiffman ok so i posted this question
but it's only because people tweet and email it to me all the time
but you can actually ask your own
questions here other github repository
in the issues which I'll link to in this
video's description but the question
here is what is the difference between
p5.js and processing and the last time I
tried to make a video you'll see it in
this playlist answering the question I
really went into the history
of these projects and why they
exist and the philosphy and
principles behind them in and some
differences in that extent
but i didn't really get to what I think is
important and on a lot of people's minds
which is the technical differences
what are the
underlying programming languages behind
these environments
what kind of editors can i use with
these environments what kind of projects
what kind of features do they have
whats the difference between
the syntax and features of both
of these frameworks and that's what I
want to discuss in this particular video
ok so I'm gonna come over here to the
whiteboard for a second, hi! I'm over
here at the whiteboard now
so here's the thing, processing and p5.js
are I would say open source
frameworks software projects that are
kind of broad projects that involve
different aspects and so each one let's
think about each one as sort of
three categories so each one of these
projects is all three of these things
if some ways, a library
they're built on top of a programming
language and then for each one of these
that you might use you need someplace
where you would sort of type your code
and figure out how to use it an editor
so let's think about these three
categories for a second so p5 and
processing let's start with processing
so processing is built is written is a
library for so these are really kind of
one thing
it's really not three, it's really two.
processing is a library
for the java programming language
the library, the things that processing
is adding or building on top of, or
giving you features for are things
like drawing data hardware
sound
so maybe this is a good way of thinking about it
and maybe I could add more things here
so it's a library
meaning it's really ultimately what it
is one of the aspects of it if the
library of code that you can call
functions from, it's built on top of the
java programming language, there is an
editor for processing which I'll
say is like a desktop editor
so processing has a desktop editor
that you can download and use.
the language that p5 is written in and that
it is a library for is JavaScript and it
has libraries also for drawing and data
and sound
and hardware but I could keep
going with this list, but the primary
thing that i might add here HTML CSS or
maybe more importantly Dom.
because it's javascript,
and i'll get to this in a bit more
there's a big component of p5
involving the web, so now where do you
create projects using p5? Here is the thing:
processing which is a project that
started in 2001, in 2001 if
you wanted to write and compile and this
is a sort of an aspect to this as well and
create software sketches you would need
a code editor most code editors were
difficult to download install maybe you
need to use command line if you're just
using a text editor you have this big
giant complex environment like eclipse
so processing really the idea of
processing being an editor is really
fundamental to the project you download
this editor you open it up and you type
code in it you hit 'play' or a run button
you see the result of your code,
'E-Z peasy' so to speak so just as much at
processing is both a library with all
this functionality a place to call
those functions
in an editor in very fundamental to the
project. p5 in many ways that's a little
bit less the case because of the world
that we live in now and where you can
program for the web you know name your
favorite editor everybody has their you
can use added more supply more brackets
are codependent some of these are
web-based better just knowing their
desktop editors you can just have a you
can just use any text editor you can run
a server so there's all the fishes left
a little bit less of a fundamental piece
of the project out there was and I'm
gonna make a separate video about this i
think there was a p5 jas desktop editor
that we modeled after the processing one
of many similarities many differences as
well because ideas that simple thing you
downloaded tiger code you press the play
button you see the result
this has now been deprecated hopefully a
desktop editor will come back at some
point in lieu of developing an entire
web page editor so their website editor
is currently in development there's no
public release of it yet but certainly
when its release
I hope to have people who are working on
it comes and presented on the youtube
channel
Kathy target charts are occasions is
that is the lead developer of the People
vs web editor and the work that she is
doing is just but not else i'm very
excited to the point that will be able
to have that a public relief if there's
no this is not a new idea there are many
web-based editors symbol code pen
jsfiddle these are places where you just
go to your web browser you see a place
where you can type in code and you can
see the result of the code you could say
that you could share it
this is very powerful so while there are
a lot of options for web editors that
you can use we have decided to try to
make one that's kind of geared towards
people GS specifically and highly
tailored to a beginner so if you are a
teacher and you've got the group of you
know ninth graders on Saturday afternoon
for a couple hours you want to teach
them the beginning of learning to code
what would be the easiest way to do it
open up the browser everybody sign up
for an account type in your code hit
play save share that's kind of mp5 yes
to all the libraries are configured and
set up for you
that's kind of a goal of this this
particular web editor
project so this is the landscape between
these two things so now here i think it
is worth exploring for a second and then
i'm going to them kind of 102 things
going to do is just show you these two
environments and like make the same
program in both of them to see
highlights of differences and then I
also want to make a list of pros and
cons of why you like you want to use one
versus the other but let's let's spend a
minute here on Java and JavaScript and I
don't like to say versus just put a
little heart because i love you by the
way people think java is like not a
thing anymore but it's used so widely
and people don't like job but i like all
programming languages it's the place
that you can write some code and express
yourself and make something interesting
it's a good place to be might not be
your favorite but let's not be so mean
about java so Java is a programming
language i think it was started in 1991
but really more formally launched
probably 1995 everyone in the comments
can correct me here if you walk up and
the idea of java the big exciting thing
about java was write once run anywhere i
think with the acronym write once run
anywhere anywhere
whoa Rob war up at the Royce didn't have
like a good ring to it but um the idea
is if you were writing your code and C
or C++ you would have to rewrite your
code entirely if you move from a apple
computer to a windows computer to a
linux machine to a mobile phone to a
toaster and the idea of java the magic
was you didn't actually write code that
native to that computer you wrote code
is very generic way and then there you
would have something on that computer
called a java virtual machine so as long
as the Java Virtual Machine was part of
this device then your java code could
run on it the Java Virtual Machines
essentially job is to translate your
java code which turns into java bytecode
to that machine specific machine code so
this is what it was exciting and
powerful innovation and java really
adopt most of the same syntax as c++ and
it was also highly object-oriented
language for better or worse it can be
very very wordy and tedious and kind of
ugly in many ways are beautiful and
elegant depending on how you look at it
but what processing a lot of what
processing did with java is when you're
working in its desktop environment a lot
of the rapper code to sort of extra code
you need to put the beginning and end of
every program in java probably can add
for you behind the scenes so that makes
it a little bit simpler and some people
think of it wasn't really java it's it's
because it or is it but it really is
java however you are allowed to a not
have to live by this like very formal
object-oriented way of thinking although
you can of course two objects and you
don't need all of this extra java stuff
that looks very intimidating and
upsetting in a way on your like first
day looking to program to have that
handle this computer stuff that you know
what it means
so that's really what's going up what
happened profit now processing was also
in this is what I spent a lot of time in
my previous video check i'll try not to
harp on too much here
java made sense because they could
connect to a lot of hardware and
librarian for data and networking but it
also at the time there was something
called applet which were part of early
browser's javascript in many ways with
need to to complement the fact that
JavaScript might be a programming
language of the browser that would
complement applets but a way of running
your profit pitches in 2001 when process
of creating that export to Annapolis and
share it on the web can't do that so
much anymore so the JavaScript of
actually what kind of struck started
being developed around the same time a
little bit after it had other names like
mocha and maybe like live script because
and netscape and various companies that
were developed organizations that were
developing early browsers realized you
needed something to that you could write
code right in the
browser in your HTML in your file to
like control the behavior and logical
things that are happening on a webpage
and that's where javascript came from
now javaScript obviously is very
different now
in what year is that 2017 of that it was
back then that there's been many
different specifications for the
language there's there's an organization
called ICI ma is that when they were on
version like there's like es6 and early
term i haven't adopted the new syntax of
my video tutorials of JavaScript just
yet i can pick your very life doctor to
get to show you the environment but but
but but still it's quite different but
it still is fundamentally the language
of the browser a key difference however
is that while this is compiled code you
have to write your code and then run it
through a process that converts it into
you know zeros and ones that can be
executed an application javascript
doesn't work that way
javascript is what's known as an
interpreted language meaning the browser
just read your code and executed at the
same time which allows for a lot of
flexibility and exciting things like
live coding or changing code apply
running it typing your code in the
browser getting rest there's all sorts
of possibilities that you can explore
because it's interpreter on the fly and
can change as it's running over time as
opposed to send it to be compiled and
finished but and so invested these are
very different programming languages the
name is just there because of this thing
that applicants were there and
JavaScript supposed to complement that
and so but added some of the syntax for
a while is the same but the actual
quality of the language of JavaScript
ism do more functions are a job
everything about object
javascript is that can be object is
underrated but functions that sort of
this primary thing and this left of can
do want to that of course but that sort
of the primary think so p 5ks is just a
library for JavaScript so if you are
quoting full learning p5 yes what you're
learning to program in java script
and the library of functions that you're
calling to maybe draw or do things come
from p5 yes if you are learning
processing your learning the syntax of
the java programming language and how it
works and getting access to all these
libraries from profits to draw and do
that type of thing so and in truth at
least in my experience people say well I
don't want to use the framework because
i really want to learn the with a real
big
well guess what the real thing is
learning how to use different framework
so if you learn how to use P by jet
maybe you'll learn how to use 3jf RP
production or a no matter chance or fill
in the blanks doctor is different
libraries in different framework for the
languages
ok so that's kind of a rather
long-winded summary of all this and what
I want to do now is just show you the
two different environments and house
intact looks between them and then make
a lift of pros and cons between the two
Subtitles by the Amara.org community