Q&A #7.1: Comparing p5.js and Processing - Part 1

*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