1.1: Introduction - p5.js TutorialYouTube↗  IA↗(long shot)
Education  706.1K views 11.2K likes 163 dislikes   01 Sep 2015
The Coding Train 1.8M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Contributed subtitles
Korean Yuno Choi
French Gregory Berger
Turkish Vahid Çelik
German T4nzb3r
Italian Matteo Carotta
Portuguese (Brazil) Igor
Chinese (Taiwan) kilo
Spanish (Latin America) diespeso
Spanish (United States) Elías Burgos
Click to Play Video Click to Play Video
Hello! I'm making a video!
Ciao! Sto girando un video!
You are watching a video, I think ...
Tu stai guardando un video o almeno penso...
The goal of this video is to talk about something called p5.js
Lo scopo di questo video è di parlare di una cosa che si chiama p5.js
What is p5.js?
Che cos'è p5.js?
Who should you or might you be thinking about learning
Chi dovresti o potresti essere tu per pensare di imparare
this thing called p5.js from the very, very beginner stage
dalle fondamenta questa cosa che si chiama p5.js
without any experience with anything else whatsoever
senza alcuna esperienza in una qualsiasi altra cosa
and what might you use it for and what's going to happen?
e per cosa lo potresti usare, e che cosa succederà?
Am I making more videos? less videos? That sort of thing.
Sto creando più video? meno video? Qualcosa di questo tipo.
So, first let me give you a little context.
Quindi, prima di tutto permettimi di introdurti il contesto.
There is this thing called Processing.
C'è questa cosa che si chiama Processing.
Processing is a project that started in 2001
Processing è un progetto che fu iniziato nel 2001
by Casey Reas and Benjamin Fry
da Casey Reas e Benjamin Fry
The two of them were students together at the MIT media lab -
Loro due erano studenti all'MIT media lab
designers, artists, programmers - trying to make a tool
designers, artisti, programmatori che cercavano di creare uno strumento
that could help them with their own work.
che li potesse aiutare nel proprio lavoro.
Since then, since 2001, this idea of 'creative coding' - it's a complex term,
Da allora, dal 2001, questa idea di "programmazione creativa" (è un termine complesso),
but - 'creative applications through programming'
ma, "applicazione creative per mezzo della programmazione"
I like to think of it as 'creative expression through programming' -
Mi piace pensare a questo come ad una "espressione del pensiero creativo per mezzo della programmazione"
how do you communicate and express your ideas
Il modo in qui comunichi ed esprimi le tue idee
while making computational tools -
mentre creai uno strumento per la computazione
It's also like - if you know how to learn to program -
È un po' come se, nel caso tu sapessi come programmare
There's a lot of like, "Learn to program! Learn to program! Everyone's gotta
C'è molta roba del tipo: "Impara a programmare! Impara a programmare! Ognuno deve
learn to program! Aah!" kind of stuff going on these days -
imparare a programmare! Ecco!" questo è il tipo di cose che si sentono di questi tempi.
Take a deep breath, relax, you don't need to know how to program.
Fai un respiro profondo e rilassati, non ti serve saper programmare.
There's lots of great stuff in the world -
Ci sono un sacco di cose grandiose a questo mondo
you could learn how to play the violin, that's a wonderful thing,
potresti imparare a suonare il violino, che è una cosa meravigliosa,
but there is an aspect of learning to program that is very powerful in that
ma c'è una aspetto dell'imparare a programmare che è veramente potente
that software is something that drives so much of what we use.
poiché il software quella qualcosa che fa funzionare molte della cose che usiamo.
And if you want to not be stuck just, kind of using whatever software
E se tu un vuoi rimanere semplicemente ad usare un qualunque software
other people - large corporations -
altre persone, grandi corporazioni
if you want to be able to express yourself in new and different ways,
se vuoi essere in grado di esprimerti in modi nuovi e differenti,
learning to program is a great way to do that.
imparare a programmare è un ottimo modo per fare questo.
Also, and this is gonna kind of come around full circle here,
Anche, e qui si chiude il cerchio,
learning to program and have the results of what you program go in a browser
imparare a programmare per ritrovare i risultati della tua programmazione in un browser
on the web, so that other people can see those things -
sul web, cosicché altre persone possano vedere le cose che hai fatto -
that you can share and distribute easily - this is a very powerful thing.
che puoi condividere e distribuire facilmente, questa è una cosa molto potente.
So, interestingly enough, when Processing was first created, it was built on top of
Quindi, questo è abbastanza interessante, quando Processing è stato creato, è stato creato a partire da
a programming language called 'Java', which was all the rage back in 2001
un linguaggio di programmazione chiamato "Java" che era molto popolare nel 2001
and one of the reasons why Processing used Java is that
ed una delle ragioni per cui Processing usò Java è che
you can make these things called applets and applets would run in the web browser!
con esso puoi creare queste cose che si chiamano Applets, le quali possono essere eseguite in un web browser!
So you could program your thing in Processing, upload it to the web,
Per questo potevi programmare quel che volevi in Processing, caricarlo sul Web,
distribute it, all the world would see it, you'd become rich and famous
distribuirlo, e tutto il mondo lo avrebbe potuto vedere e tu saresti diventato ricco e famoso
or, even better, you don't become rich and famous
o, ancora meglio, tu non saresti diventato ricco e famoso,
but you do something good for the world - or both, perhaps!
ma avresti fatto qualcosa di buono per il mondo - o entrambe, magari!
then, that made a lot of sense.
quindi, questo aveva molto senso.
Fast-forward 14 years later, 2015,
Un balzo in avanti, 14 anni dopo, 2015,
when was the last time you saw a java applet on the web?
quand'è stata l'ultima volta che avete visto un Applet di Java sul Web?
If you saw it, it was just basically an experience with a giant error message
Se lo avete visto, è stata semplicemente un'esperienza connotata da un gigantesco messaggio d'errore
that told that your browser crashed and nothing worked.
che vi ha comunicato che il vostro browser ha crashato e che non funziona nulla.
The language these days of the browser is something called JavaScript.
Il linguaggio dei browser è al giorno d'oggi qualcosa che si chiama JavaScript.
And I'll say a bit more about that in a minute
Dirò qualcosa di più in merito in un minuto
JavaScript allows you to program and create all sorts of exciting things
JavaScript ti permette di programmare e creare ogni tipo si cose eccitanti
that happen in a web browser. If you're interested in creating unique
che accadono in un web browser. Se sei interessato a creare
and animated and creative web content, learning JavaScript, learning p5.js, is
contenuto web che sia unico, animato e creativo, imparare JavaScript, imparare p5.js, è
something you might be interested in.
qualcosa che ti potrebbe interessare.
Now, [...] some time in the last couple of years, a bunch of us were talking
Ora, [...] qualche volta durante quest'ultimo paio d'anni, una manciata di noi si è ritrovata a pensare
and we asked the question:
ed a chiedersi la seguente domanda:
"What language would you pick if Processing were being invented today?"
"Che linguaggio sceglieresti se Processing venisse inventato oggi?"
And somebody that answered that question in an interesting way,
E qualcuno rispose a quella domanda in un modo interessante,
her name is Lauren McCarthy.
il suo nome è Lauren McCarthy.
So, Lauren McCarthy began a project, in collaboration with the Processing f...
Laura McCarthy iniziò un progetto in collaborazione con la F... Procesasing
Processing is a not for profit foundation, so I was about to say Processing foundation -
Processing è un fondazione non a scopo di lucro, stavo dicendo: Fondazione Processing -
[...ramble...]
[...]
So Lauren said, "Ok, well, what if Processing was being invented today
Quindi, Lauren disse: "Ok, bene, cosa sarebbe Processing se venisse inventato oggi?
and the language, instead of Java, was JavaScript?"
la lingua che rimpiazzerebbe Java sarebbe JavaScript."
So this is what p5.js is, as a project.
Ecco questo tipo di progetto è ciò che è p5.js
I should just briefly mention, there's another wonderful project
Devo brevemente menzionare che esiste un altro progetto magnifico
called processing.js.
che si chiama Processin.js.
I know this is crazily confusing, I just want to briefly mention it.
Lo so che questo confonde incredibilmente, ma lo voglio citare brevemente.
processing.js is a project started by John Resig and many other people
Processing.js è un progetto iniziato da John Resig e molte altre persone
have worked on it since then.
che ci hanno lavorato da allora.
processing.js sort of tries to solve this other problem:
Processing.js in un certo senso cerca di risolvere un altro problema:
your java code can't run on the web as an applet anymore,
il codice scritto in Java non può più essere eseguito come un Applet attraverso il Web
what if we could behind-the-scenes translate it to JavaScript
ma cosa sarebbe se potessimo tradurlo in JavaScript dietro il sipario
so that it ran there?
così che esso possa essere eseguito anche sul web?
But this project, p5.js, is different in that it is a new project.
Comunque, questo progetto, p5.js, è differente poiché si tratta di un progetto nuovo.
We can now think wonderfully and happily about
Ora possiamo pensare felicemente a
that thing called Processing that I briefly spoke about,
quella cosa che di chiama Processing, di cui ho parlato brevemente,
but mostly right now, for the purpose of these videos,
ma principalmente ora, allo scopo di questo video,
we can now ignore this.
lo possiamo ignorare.
p5.js is an environment, a simple - hopefully simple -
p5.js è un ambiente, uno semplice - possibilmente semplice -
and beginner-friendly environment
un ambiente creato per i neofiti
to help you learn JavaScript,
con l'intento di aiutarti ad imparare JavaScript,
to make applications, computational, creative, interesting -
per creare applicazioni creative, interessanti,
hopefully interesting- things happen in the browser.
lo spero che siano interessanti - cose succedono nel browser.
And eventually, you could go in a lot of routes with this.
E possibilmente, potrai praticare molte strade diverse con questo strumento.
You might make art, you might make data visualization,
Magari farai dell'arte, o visualizzerai dei dati,
you might make websites, as like a web designer,
o farai dei siti web, così come da un web designer,
there's lots of paths that you might take
ci sono moltissime strade che potrai intraprendere
from this basic set of videos that I hope to make.
a partire da questa serie di video che intendo creare.
I think that's just about the full context.
penso che questo sia tutto in merito al contesto.
There's some other pieces to
Ci sono altri pezzi da aggiungere:
"how do you make something happen in the web browser",
"come fai succedere qualcosa nel browser",
you need more than JavaScript, you need these other things called
ti serve altro oltre a JavaScript, ti servono altre cose che si chiamano
HTML, CSS, and JavaScript,
HTML, CSS, e JavaScript,
but I think what I wanna do now, very briefly,
ma io penso a cosa voglio fare ora, (velocemente)
and I'm gonna pick this up in the next video,
e questo lo riprenderò nel prossimo video,
is just look at, open p5.js and do a few things with it,
in cui guarderemo ed apremo p5.js e lo userò per farci alcune cose
just so you get a sense of what kinds of things it can do.
così da darti un senso di che tipo di cose si possono fare con p5.js
What would be great is if I had a video that showed you like
Quel che sarebbe grandioso è se avessi un video che ti mostrasse
"Here are a bunch of awesome projects that are made with these kinds of tools."
"Questi sono un sacco di fantastici progetti che sono stati realizzati con strumenti di questo tipo".
Don't get me wrong, there's a lot of really amazing JavaScript framework.
Non mi fraintendere, ci sono un sacco di framework in JavaScript.
So I think a missing piece here --
penso che sto saltando pezzo --
Just like Processing was built on top of Java,
Così come Processing era stato costruito basandosi su Java,
it's a little bit different here
la cosa è un po' diversa qui
p5.js is not really built on top of JavaScript, it is a set of...
p5.js non è veramente costruito partendo da JavaScript, si tratta di un insieme di...
boy, this is a hard one ... and I was doing so well! [...]
(ragazzi! questa è difficile! .... stavo andando alla grande! ....)
What I think is useful to think of here for a moment is p5.js is two things:
Quel che penso è che sia utile pensare a questo per un momento come se p5.js fosse due cose:
One of these things is it's a library of functions.
Una di queste cose è una libreria di funzioni.
So, here's a great way of thinking about it.
Ecco, questo è un gran modo di pensare a questo.
Let's say you want to learn JavaScript. And you go to Google and you type,
Immaginiamo che tu voglia imparare JavaScript, e he tu vada su Google e che tu scriva:
"JavaScipt" - boom. Whoa! There's a lot of stuff out there.
"JavaSript". Boom! Whoa! Che un bel po' di roba la fuori.
There's like a million Stack Overflow posts, which is like
Ci sono qualcosa tipo un milione di messaggi di Stack Overflow, il quale è tipo
a place where people ask questions,
un posto dove la gente fa domande,
there's 15 million "this.js" things you could learn
ci sono 15 milioni "questo.js", cose che potresti imparare
and there's something called jQuery and there's so much.
e c'è qualcosa che si chiama jQuery e tanto altro.
So, one of the goals, I think, of p5.js is to give you a little bit of a sandbox,
Quindi uno degli obbiettivi di p5.js è quello di fornirti uno spazio di prova,
a walled garden, to learn some of the basics, and for that,
un giardino protetto, per imparare alcuni rudimenti, e per fare questo,
you get a library of functions,
ti viene data una libreria di funzioni,
to draw a circle, or draw a rectangle, or set a color
che servono a disegnare un cerchio, un rettangolo o per assegnare un colore
so you can just use some basic drawing functions to learn some of these
cosicché tu possa semplicemente usare alcune di queste funzioni di base per imparare
beginner steps of programming.
durante i primi passi da principiante in programmazione.
The other thing it is, and I think I need to move over to the computer here,
Un'altra cosa, ed ho bisogno di muovermi al sul computer,
The other thing it is is this thing here
Un'altra cosa è questa cosa qui
Sam Lavigne has created something called the p5.js editor
Sam Lavigne ha creato una cosa che è l'editor di p5.js
What this means is an application, a program on your computer that
Questo è un'applicazione, un programma sul tuo computer
you can launch and just start typing some code in and get your feet wet
che puoi eseguire ed iniziare subito a scrivere del codice per iniziare a mettere le mani in pasta
and start to experiment and learn a bit about code, without having to worry about
così da iniziare a sperimentare ed imparare un po' di programmazione, senza doveri preoccupare di
all of the larger pieces of things that you need in order to make something happen
tutte quelle altre cose di cui avresti bisogno perché qualcosa possa accadere
on a web page. We're gonna do it very simply here.
in una pagina web. Ora facciamo qualcosa di molto semplice.
So let's look at that for a second. So I'm going to launch this.
Diamogli uno sguardo per un secondo. Eseguo questo.
By the way, I just downloaded it. I haven't -- I've used it...
Da notare, l'ho appena scaricato. Non ho... L'ho usato...
but, I haven't on this computer. So, look:
ma non ancora su questo computer. Quindi, guarda:
"p5 is an application downloaded from the internet. Are you sure you want to open it?"
"p5 è un'applicazione scaricata da internet. Sei sicuro di volerlo aprire?"
So now's the time when you could say, "Eh, I'm just going to play the violin."
È ora il momento in cui puoi dire, "Preferisco andare a suonare il violino."
Or, "I'm going to go play frisbee - football - soccer."
oppure "Vado a giocare a friesbee, football o calcio."
But I'm going to open it. [...]
Invece io lo apro. [...]
A newer version of p5 is available. I don't want to download it right now -
Una nuova versione di p5 è disponibile. Non lo voglio scaricare adesso -
just hit ok. Oops, I do want to download it right now. Ok.
clicca ok, Oops , non lo voglio scaricare ora. Ok.
So this here ... [getting things opened]
Quindi ecco qui... [si sta aprendo]
this here is the p5.js editor.
questo qui è l'editor di p5.js
And if you look at it, it's already filled in a little bit of code for you.
e se osservi, c'è già un po' di codice per te.
So you can start to see, "Ah, I have to learn to program, I have to learn
Puoi iniziare ad osservare, "Ecco, devo iniziare ad imparare a programmare, devo iniziare ad imparare
some strange new language and syntax."
una nuova e strana lingua e sintassi."
function. draw. parentheses. curly bracket. curly bracket.
function; draw; parentheses; curly bracket; curly bracket.
These are some things that will come to light if you're for the first time
Alcune cose di illumineranno nella tua mente se è la tua prima volta
watching this video and looking at programming.
che guardi questo video e guardi come si programma.
So I'm gonna do a couple things here real quick.
farò un paio di cose molto velocemente.
One thing I'm gonna do is I'm gonna type in CreateCanvas and down here under draw
Una cosa farò è digitare CreativeCanvas e qui sotto draw()
I'm gonna type rectangle and I'm gonna type some other numbers
digiterò rectangle e digiterò alcuni numeri
and I'm going to zoom back out and hit play.
e riduco lo zoom e premo play.
And we can see here,
E possiamo vedere,
look what's happened.
guarda cosa è successo.
I wrote something that says, "createCanvas!"
Ho scritto qualcosa che dice, "crea una tela (canvas)!"
and what did that do? It made a canvas.
che cosa ha fatto? Ha creato una tela!
That's the canvas.
Questa è la tela. (canvas)
Then, down here, I wrote something that said rect, short for rectangle.
Quindi, qui sotto, ho scritto qualcosa che dice rect, tipo rettangolo.
What did it do? It made a rectangle.
Cos'ha fatto? Ha creato un rettangolo.
So these are the first pieces, the first things, that I'm going to show you
Questi sono i primi passi, i primi pezzi, che ti mostro.
in the next video.
Nel prossimo video
What lines of code do you start to write, and what do those lines of code do?
Che linee di codice scriverai e che cosa faranno quelle linee di codice?
With ps.js here, the first things we're gonna learn is how to, like, draw a picture.
Con p5.js la rima cosa che impareremo è come disegnare un'immagine.
And, by the way, this canvas is actually a little mini web browser that's opened.
Tra le altre cose, questa canvas è effettivamente un mini browser che si è aperto.
So as more and more videos come to pass, we can peel back some of these layers
Man mano che passeranno i video, scaveremo tra i livelli
and see how you might take this and put it on the web somewhere,
e vedremo come tu potrai far tesoro di questo e metterlo nel web,
share it, allow people to interact with it, that sort of thing.
per condividerlo, per permettere alla gente di interagirci, e altre cose del genere.
So, this video's ok. B+.
Quindi, questo video va bene, B+.
I think I'm going to keep it though and upload it and
Penso che terrò e che lo caricherò e che
someday there will be a better one... probably never...
un giorno ce ne sarà uno migliore... probabilmente mai...
This is the end. I'm gonna make another video and then upload that too
Questa è la fine. Farò un altro video e lo caricherò
and you can watch many of them.
e tu potrai vederne molti.
And I'm keeping a list - maybe I'll try to put a link in the description or something
Manterrò una lista - e tenterò di mettere un collegamento nella descrizione o qualcosa del genere
maybe a list of all the videos I'm going to make.
forse una lista di tutti i video che farò.
I'm gonna make a lot of intro ones and then some project-based ones like
ne farò molti di introduttivi ed a quel punto qualcuno basato su un progetto tipo
how to take a Google Spreadsheet and visualize it as a graph in JavaScript and
come prendere uno foglio di calcolo di Google per visualizzarlo come un grafico usando JavaScript e
try to do that in a short 10 minutes.
proverò a farlo in soli 10 minuti.
That's sort of my plan for this semester.
Questo è in un certo qual senso il mio piano per questo semestre.
Similar videos:

Introduction to Functions Tutorial
Survey Solutions
3.7K views 0 likes 0 dislikes 31 Aug 201567% match

Tutorial | An Introduction to Enscape 3.0
Enscape ArchDesign
30.8K views 486 likes 7 dislikes 04 Mar 202167% match

✏️ How To Design A Modern Logo | Start To Finish
Will Paterson
1.9M views 30.2K likes 1.9K dislikes 06 Jun 201736% match

Conditional Statements
CS50
40.5K views 84 likes 2 dislikes 07 Oct 201535% match










Make your photos MOVE and COME TO LIFE! Photoshop Tutorial
Peter McKinnon
3.3M views 90.3K likes 1.9K dislikes 07 Aug 201735% match

PANTHEON : BIG Update CLIMB ANY SURFACE
the Nathan NAPALM
1.6K views 70 likes 2 dislikes 30 Apr 202034% match

TEENS REACT TO 90s INTERNET
REACT
17.3M views 201.5K likes 0 dislikes 01 Jun 201434% match



Sketch like an Architect (Techniques + Tips from a Real Project)
30X40 Design Workshop
1.9M views 48.4K likes 903 dislikes 30 Sep 201834% match

English Speaking Practice | How to improve your English Speaking and Fluency: SHADOWING
Julian Northbrook
3M views 44.4K likes 1.1K dislikes 29 Aug 201334% match

The WALKING WATER Mystery (in SPACE and SLOW MOTION!) - Smarter Every Day 160
SmarterEveryDay
5.5M views 166.6K likes 2.3K dislikes 03 Nov 201634% match

GDB
CS50
32K views 140 likes 8 dislikes 07 Oct 201534% match










Double Your Computer Graphics for Free
ThioJoe
2.6M views 40.4K likes 19.7K dislikes 08 Jul 201633% match

Luminar AI Review and Overview | My Honest First Impressions
Monzon Media
1.1K views 35 likes 0 dislikes 29 Dec 202033% match


Foundation Routine For Acne | How To Cover Pimples, Scars, Cystic Acne, Blackheads & Oil
Cassandra Bankson
29M views 221.9K likes 6K dislikes 15 Dec 201033% match



10 Tips to Make Your Computer Faster (For Free)
ThioJoe
5.4M views 109.6K likes 5.5K dislikes 05 Jan 201733% match

"YOU WON'T BELIEVE YOUR EYES!" - Smarter Every Day 142
SmarterEveryDay
10.6M views 180.4K likes 4.9K dislikes 30 Sep 201533% match



Is it Better to Learn Japanese Language in Japan? Students in Tokyo give tips
Ask Japanese
5.9K views 462 likes 7 dislikes 21 Aug 202033% match


Top Online Businesses To Start In 2020 For Beginners [WITH NO MONEY]
Mark Daniells
698 views 130 likes 0 dislikes 18 Mar 202033% match

What is Philosophy?: Crash Course Philosophy #1
CrashCourse
5.1M views 94.3K likes 1.4K dislikes 08 Feb 201632% match




Bonsai dừa các kiểu dáng bán chạy l cách làm dừa l How to make coconut bonsai
Đinh Ngọc Hiếu
902 views 24 likes 0 dislikes 07 Jul 202032% match

Election Day 2020
TheReportOfTheWeek
227.5K views 17.7K likes 201 dislikes 03 Nov 202032% match





AQUARIUM HARDSCAPE TUTORIAL FOR BEGINNERS - ROCK AND WOOD DECORATION IN PLANTED TANKS
Green Aqua
156.6K views 5.4K likes 61 dislikes 02 Sep 202032% match








TEENS REACT TO WINDOWS 95
REACT
15M views 0 likes 0 dislikes 06 Mar 201632% match



Diablo 2 Remaster Remake Resurrected EXPLAINED : All info we know so far 2021
the Nathan NAPALM
2.2K views 101 likes 7 dislikes 20 Feb 202132% match


How To Grow with 0 Views and 0 Subscribers
Video Creators
6.6M views 123.5K likes 8.8K dislikes 13 Feb 201432% match


Make $100 Per Day Work From Home Proofreading Jobs | ProofReading Jobs Online 2020

4.6K views 173 likes 5 dislikes 20 Sep 202032% match

Salman Khan TED Talk 2011 (from ted.com)
Khan Academy
5M views 32.9K likes 863 dislikes 09 Mar 201132% match




Data Types
CS50
61.8K views 185 likes 7 dislikes 07 Oct 201532% match










How to Take Charge of Your Life and Digital U Course Review with Valuable Bonuses

3K views 17 likes 3 dislikes 15 Nov 201832% match
















How to Animate | In Clip Studio Paint | Using the Blend Tool
Drawn 2 Animate
1.8K views 14 likes 2 dislikes 10 Mar 202132% match



Settings Privacy About Contact Donate