4.2: Nested Loops - p5.js Tutorial The Coding Train English Indonesian

4.2: Nested Loops - p5.js TutorialYouTube↗ IA↗(long shot)
Education 70.4K views 902 likes 15 dislikes 11 Sep 2015 Show Contributors 2

The Coding Train 1.8M subscribers United States YouTube↗

Contributed subtitles

English cutesexybabe69

Happy Computing with Dennis

I walked into this. You know what?

Ups. Aku berjalan ke dalam ini. Kau tahu apa, aku akan meninggalkan ini dalam video karena ini benar-benar

I'm going to leave this in the video because this really happened, and it's there. So the previous video I made, I just looked at really, really

terjadi dan itu ada. Sehingga video sebelumnya saya membuat kita melihat,

the basics of the control structure of the loop--

Aku hanya melihat benar-benar benar-benar Dasar-dasar dari struktur kontrol

a while loop, a for loop. For looping, this sort of primary looping

lingkaran. Sebuah loop sementara. Sebuah untuk loop, loop menjadi struktur looping utama yang saya

structure that I'm going to use for the rest of examples. And all I did was something very basic--

akan menggunakan untuk sisa contoh dan semua saya lakukan adalah sesuatu yang digunakan sangat dasar

use it to draw a repeating shape. And now it's up to you to figure out

untuk menggambar bentuk mengulangi dan sekarang itu terserah Anda untuk mencari tahu apa jenis

what kinds of creative things you can try to experiment with

dari hal-hal kreatif Anda dapat mencoba untuk Percobaan dengan menciptakan baru yang berbeda

to create different new kinds of patterns that you haven't explored before.

macam pola yang Anda belum dieksplorasi sebelumnya. Tapi saya pikir ada

But I think there are two key elements that I would like to discuss that I think will fill in a couple

dua elemen kunci yang saya ingin mendiskusikan, yang saya pikir akan mengisi

gaps in your knowledge here that will help

beberapa kesenjangan dalam pengetahuan Anda di sini yang akan membantu Anda melakukan lebih banyak barang dengan

you do more stuff with loops. So the first thing that I want to mention is I started talking about loops as if this is this new thing, but there actually is this draw function.

loop. Jadi hal pertama yang saya ingin menyebutkan, Anda tahu, saya mulai berbicara tentang loop seolah-olah ini adalah hal baru ini. Tapi ada sebenarnya fungsi imbang ini

And the one of the very first things I looked at in an earlier video is this draw function

dan salah satu hal pertama yang saya memandang dalam sebuah video sebelumnya adalah ini

is looping. And every time we get to the end of the draw function,

menggambar fungsi perulangan. Dan setiap kali Anda sampai ke akhir fungsi imbang

the screen is updated. Then the draw function repeats.

layar diperbarui, maka hasil imbang mengulangi fungsi, hal ditarik lagi

Stuff is drawn again. Screen is updated. So sometimes it gets a little bit confusing here.

Layar diperbarui. Jadi kadang-kadang mendapat sedikit membingungkan di sini jika Anda memiliki

If you have this loop, like there's this for loop that I just created in the previous example, which is inside the draw loop.

lingkaran ini, seperti ada ini untuk loop bahwa saya hanya dibuat dalam contoh sebelumnya yang ada di dalam menggambar lingkaran. Ini semua seperti datang kembali

This all comes back together because this video is all about nested loops because this is really

bersama-sama karena video ini adalah semua tentang bersarang loop karena ini adalah

a nested loop. Draw's looping. The for loop is looping. But the goal of this loop was to do what?

benar-benar loop bersarang. Draw perulangan, yang untuk loop perulangan. Tapi, benar, tujuannya loop ini adalah untuk melakukan apa? Hal itu untuk menggambar beberapa bentuk-lakukan hal yang sama

It was to draw multiple shapes, repeat the same ellipse

function over and over and over again.

fungsi elips berulang-ulang lagi.

However, if you're thinking about this kind of in almost

Namun, jika Anda, jika Anda berpikir untuk tentang jenis di hampir terlalu banyak

too much detail, you might have noticed while this loop is going, it's not

detail, Anda mungkin telah memperhatikan: sementara lingkaran ini akan tidak seperti yang Anda lihat

like you see like the first ellipse. Then you see the second one.

seperti elips pertama kemudian Anda melihat satu detik kemudian Anda melihat yang ketiga

Then you see the third one. Then you see the fourth one.

kemudian Anda melihat yang keempat. Kamu hanya melihat mereka semua.

You just see them all. You might also think to yourself, OK, well, it's drawing the one at a time,

Anda mungkin juga berpikir untuk diri sendiri apa-apa baik itu menarik mereka satu per satu tetapi

but it happened so fast. It looks like it's just all of it.

terjadi begitu cepat terlihat seperti itu hanya mereka semua. Jadi saya ingin mengingatkan Anda

So I would like to remind you that neither of those things is the case. In fact, the window, the canvas is not updated

bahwa tak satu pun dari hal-hal adalah kasus. Bahkan, jendela, kanvas, adalah

until the end of draw is reached. So the purpose of a for loop inside the draw loop

tidak diperbarui sampai akhir dari hasil imbang tercapai. Jadi, tujuan dari untuk loop di dalam loop imbang tidak

is not to animate something but rather to draw a whole bunch of things for each cycle of the draw

untuk menghidupkan sesuatu melainkan untuk menarik sejumlah besar hal-hal untuk setiap siklus

loop. If you want to animate things, you

loop imbang. Jika Anda ingin menghidupkan hal yang harus melakukan sesuatu yang sedikit

would have to do something slightly different. So let's take a look in this particular example.

berbeda. Jadi, mari kita lihat di ini contoh khusus. Jadi aku akan menggambar

So I'm going to draw these back in the middle-- these circles. So the circles are just there.

kembali ini di tengah, lingkaran ini, sehingga lingkaran hanya di sana, saya melihat

I'm seeing all of them. Nothing is changing. I could do a couple of things. One, I could add random for the blue value of the color.

semua mereka, tidak ada yang berubah. Aku bisa melakukan beberapa hal, satu, saya bisa menambahkan acak untuk nilai biru warna dan sekarang kami bisa melihat ... bahwa ... dapat Anda lihat itu?

Can you see that? Whoa, yeah, that's really like the worst-- let me make this random too because you can barely

Woah, ya, itu benar-benar seperti yang terburuk. Mari saya membuat ini acak juga,

see that. Now you can see that more.

karena Anda hampir tidak bisa melihat itu. Sekarang Anda bisa melihat bahwa lebih, kan? Sehingga Anda dapat melihat hasil imbang yang

So you can see that draw is looping over and over again, and the only thing that's changing

adalah perulangan lagi dan lagi dan -satunya yang berubah adalah bahwa

is that the color is changing. The location of these ellipses from that loop

warna berubah. Lokasi ini elips dari loop yang tinggal dalam

are staying the same.

sama.

I could do something kind of strange, and I could say let me add a variable like offset. And I could say draw every ellipse at the x. x is part of this loop.

Aku bisa melakukan sesuatu agak aneh, dan Aku bisa, katakanlah, izinkan saya menambahkan variabel seperti offset dan saya bisa mengatakan menggambar setiap elips di x. x adalah bagian dari lingkaran ini.

Oh my goodness, I'm flickering like crazy.

Ya Tuhan. Aku berkedip-kedip seperti gila kamera ini mengalami masalah tapi

This camera is having problems, but hopefully, you're going to be able to get through this video, anyway.

mudah-mudahan Anda akan bisa mendapatkan melalui video ini pula. The x,

X the same every time through. X is the same every time through draw

x adalah sama setiap kali melalui ... x adalah sama setiap kali melalui hasil imbang karena x adalah

because x is making me crazy governing the location of those circles.

apa (ini membuat saya gila) yang mengatur lokasi lingkaran mereka, tetapi jika aku

But if I were to say offset equals offset plus one, now you can see I'm offsetting the location of all of those

mengatakan, offset = mengimbangi + 1, sekarang Anda bisa melihat saya offseting lokasi

by some amount.

semua orang oleh beberapa jumlah. Jadi, Mei ini, ini adalah jenis seperti beberapa

These are kind of like a few strange quick things that I've added here.

semacam hal yang cepat aneh bahwa saya telah ditambahkan di sini, tapi titik apa yang saya

But the point of what I wanted to make is you just need to keep that in mind.

ingin membuat adalah Anda hanya perlu untuk terus itu dalam pikiran, benar,

This draw loop is for the purpose of refreshing that flip book metaphor, I think, works well or analogy. Someone will correct me. The flip book idea, you've got a page and then a next page

lingkaran imbang ini untuk tujuan menyegarkan bahwa buku flip metafora, saya pikir bekerja dengan baik, analogi. Seseorang akan benar saya ... yang ide buku flip, tepat, Anda punya halaman

and a next page and a next page. There's no flip book here.

dan kemudian halaman berikutnya dan halaman berikutnya dan halaman selanjutnya. Tidak ada buku flip sini, ini

This is in order to perform a repeating task on a single page

adalah dalam rangka untuk melakukan tugas mengulangi pada satu halaman di buku flip untuk

in the flip book for animation. So that's the first thing that I wanted to note.

animasi. Jadi, itulah hal pertama yang Aku ingin diperhatikan.

The other thing that comes up very often is kind of related to this because what

hal lain yang muncul sangat sering adalah jenis yang berhubungan dengan ini, karena apa

happens if now inside this loop, I put another loop? For every x, do something to every y.

yang terjadi jika sekarang, dalam loop ini, saya menempatkan loop lain. Untuk setiap x melakukan sesuatu untuk

And let's think about how that might be useful.

setiap y, dan mari kita berpikir tentang bagaimana mungkin berguna dan ini adalah jenis

And this is a kind of algorithm or process that comes up over and over again and again in any sort of computer graphics

algoritma atau proses yang muncul lebih dan lagi dan lagi dalam apapun

programming and other kinds of programming as well.

pemrograman komputer grafis dan jenis lain dari pemrograman juga.

Why? Because the canvas-- the thing that we're drawing to--

Mengapa? Karena kanvas-benda yang kita menggambar to-adalah dua dimensi

is a two-dimensional grid. It has pixels along the x-axis, and it has pixels along the y-axis.

jaringan. Ini memiliki piksel sepanjang sumbu x dan memiliki piksel sepanjang sumbu y, jadi jika saya

So if I would like to draw something for every x, fill in all the y's.

ingin menggambar sesuatu: untuk setiap x isi semua y, jadi, untuk x pertama

So for the first x do all the y's. For the next x, do all the y's.

melakukan semua y ini, untuk x berikutnya, melakukan semua y ini. Sekarang, untuk x selanjutnya, lakukan

Now for the next x, do all the y's. The way that that works is to say for var x equals zero,

melakukan semua y ini. Cara yang yang bekerja adalah untuk mengatakan: untuk var x sama dengan 0, sisa

the rest of the for loop, and then for every x-- assuming this x is going up--

untuk loop, dan kemudian untuk setiap x, dengan asumsi x ini akan naik, setiap kali Anda melakukan

every time you do an x, also do a y. So this is a little tricky to get used to,

x juga melakukan y. Jadi ini adalah sedikit rumit untuk membiasakan diri tapi itu sangat

but it's incredibly powerful and will open up

kuat dan akan membuka banyak kemungkinan. Anda tahu, Anda ingin

a lot of possibilities. If you want to program a game that involves a two-dimensional board of cells,

memprogram game yang melibatkan papan dua dimensi sel seperti

like chess or checkers, you're going to need some sort of structure like this.

catur atau halma, Anda akan membutuhkan semacam struktur seperti ini. Jika Anda menghendaki

If you want to learn about image processing, how do you read every pixel of an image

belajar tentang pengolahan gambar: bagaimana Anda membaca setiap pixel dari suatu gambar dan membuat

and make that pixel a little brighter, a little darker,

bahwa pixel sedikit lebih terang, sedikit gelap, atau menerapkan beberapa jenis lain dari efek

or apply some other kind of effect, you're going to need this kind of loop. So it comes up over and over again in so many things.

Anda akan membutuhkan semacam ini loop. Begitu, itu muncul lagi dan lagi dalam banyak

So let's look at that and applying the code.

sesuatu. Jadi, mari kita lihat yang diterapkan ke dalam kode dan aku masih di sini,

And I'm still here. Hopefully, it won't flicker and disappear too much.

mudah-mudahan saya tidak akan berkedip dan menghilang terlalu banyak.

So what I'm going to do, I'm going to get rid of this. I'm going to save this project as. I'm saving these because some day, I will upload them somewhere, I suppose.

Jadi, apa yang akan saya lakukan, saya akan mendapatkan menyingkirkan ini. Aku akan menyimpan proyek ini sebagai ... tabungan ini karena suatu hari nanti aku akan upload di suatu tempat saya kira. saya

I am going to remove this weird offset thing. I'll keep the random fill-- why not.

akan menghapus hal mengimbangi aneh. Aku akan terus mengisi acak. Kenapa tidak?

We don't need this offset. And what I want to do is add right here another loop.

Kita tidak perlu offset ini. Dan apa yang saya ingin lakukan adalah menambahkan di sini lagi lingkaran.

For y equals zero, y is less than or equal to height. Y goes up by 50 and draw the ellipse at x comma y.

Untuk y sama dengan 0; y kurang dari atau sama dengan tinggi; y naik sebesar 50 dan menarik

This is exactly what we were talking about.

elips di x koma y. Jadi semua yang saya lakukan adalah, sekarang, ini adalah persis apa yang kita bicarakan:

For every x, do every y. So my first x, do all the y's.

untuk setiap x, lakukan setiap y. Jadi pertama saya x, melakukan semua y ini. X berikutnya, melakukan semua y ini,

The next x, do all the y's.

dan mari kita lihat apakah ini bekerja.

And let's see if this works-- whoa. It did, so now we have this perfect grid of circles flashing random colors all over the window. How could you make those colors not random?

Whoa! Hal itu, jadi sekarang kita punya ini sempurna grid lingkaran berkedip warna acak seluruh jendela. Kau tahu, bagaimana mungkin Anda membuat warna-warna tidak acak, bagaimana

How might you apply some sort of pattern to it?

mungkin Anda menyediakan semacam Pola itu, bagaimana Anda bisa melakukan segala macam

How might you do all sorts of interesting things like have those circle start to shake a little bit?

hal menarik, seperti memiliki orang-orang lingkaran mulai goyang sedikit-sedikit

That's a little bit more complicated.

itu sedikit lebih rumit,

You're going to need some other tools and objects and rays

kita akan membutuhkan beberapa alat lain dan objek dan meningkatkan untuk sedikit lebih tetapi

for a bit more. But you can start to think about all of these possibilities.

Anda dapat mulai berpikir tentang semua ini kemungkinan. Dan saya hanya ingin menunjukkan

And I just want to point out that, again, if I were to take this loop--

bahwa lagi, jika saya harus mengambil ini loop ... Saya melakukan semacam ini mundur, saya

and I did this sort of backwards. I don't know why I'm showing you this because it works so nicely.

tidak tahu mengapa saya menunjukkan Anda ini karena ia bekerja begitu baik, tetapi jika aku

But if I were to not do it this way, if I were to do this two loops, this is what I've

untuk tidak melakukannya dengan cara ini. Kanan? Jika saya melakukan hal ini: dua loop, benar, ini adalah apa

got with two separate loops. I'm doing all the x's along the y column 200.

Aku punya dengan dua loop terpisah. Saya m melakukan semua x di sepanjang y kolom 200,

And now I'm doing all the y's along the y row 200.

dan sekarang saya sedang melakukan semua y adalah sepanjang x, maaf, sepanjang baris y 200, sekarang aku melakukan semua

Now I'm doing all the y's in the x column 200. So I don't know.

y ada di x kolom 200. Jadi, saya tidak tahu, saya punya ini dalam pikiran saya bahwa saya akan menunjukkan

I had this in my mind. I was going to show this first. And so now I'm showing this after,

Anda ini pertama dan jadi sekarang aku seperti menunjukkan Anda ini setelah, yang benar-benar tidak membuat

which really doesn't make a lot of sense. But I'm just like letting this video fly with all

banyak akal, tapi aku seperti membiarkan ini terbang video dengan semua keanehan nya

of its weirdness and error. So let me go back to what it was correctly.

dan kesalahan. Jadi, biarkan aku kembali ke apa itu adalah benar-yang semacam seperti

That was sort of pointless, can take that out. I think this is a nicer place to end, looking at this again.

gunanya untuk mengambil yang keluar-dan kita bisa ... Saya rasa ini adalah tempat yang lebih baik untuk mengakhiri, melihat ini lagi.

So what I've talked now about-- really very little but kind of giving you a running start here

Jadi, saya sudah bicara sekarang tentang benar-benar sangat sedikit tapi jenis memberikan Anda

and thinking about loops. The loop is something to repeat a certain task

berjalan mulai di sini untuk berpikir tentang loop. Sebuah lingkaran adalah sesuatu untuk mengulang

during one cycle of draw.

tugas tertentu selama satu siklus imbang. Maksudku, Anda dapat menggunakan loop di mana saja, tapi benar

And you can use a loop anywhere, but right now, I'm using it to draw multiple copies of a shape inside of draw.

sekarang saya menggunakannya untuk menarik beberapa salinan dari bentuk dalam imbang. Anda juga dapat menggunakan

You can also use a nested loop to see a grid. If you draw, remember is the flip book.

loop bersarang untuk melihat grid, jika, menggambar, ingat, adalah buku flip, sehingga setiap kali

So each time through draw, if you

melalui undian, jika Anda mengubah

change some aspect of the loop, I just

beberapa aspek dari loop, kau tahu aku hanya pikiran sesuatu yang benar-benar menarik

thought of something really interesting that we could try. Like for example, everything can be a variable right here.

bahwa kita bisa mencoba. Seperti, misalnya, semuanya bisa menjadi variabel, tepat,

The x loop stops at width. What if I were to put mouse x here?

sini x lingkaran berhenti di lebar. Bagaimana jika aku adalah untuk meletakkan mouse X di sini, jadi saya hanya ingin

So I would just want to dynamically loop up to where the mouse is. So now this loop, remember, is executing every single time, but the exit condition is changing every time

untuk secara dinamis lingkaran sampai ke tempat mouse. Jadi sekarang, lingkaran ini, ingat, adalah mengeksekusi setiap saat, tapi pintu keluar Kondisi berubah setiap kali melalui

through draw. And you're still watching. This was a little nugget here that's hopefully useful.

menggambar, dan jika Anda masih menonton, ini adalah kecil nugget di sini yang

OK, so that gives you the basics about loops, how loop works within draw, how you have a nested loop,

semoga bermanfaat. BAIK. Jadi, yang memberikan dasar-dasar tentang loop: bagaimana lingkaran bekerja dalam imbang, bagaimana Anda

and I need to make one more video, which

memiliki loop bersarang, dan saya harus membuat satu video lagi yang tidak akan terjadi hari ini

won't happen today because I now have to go do something else. But I want to look at an array and how loop relates to that. OK, thank you and goodbye.

karena saya harus pergi melakukan sesuatu yang lain, tapi saya ingin melihat array dan bagaimana lingkaran berkaitan dengan itu. BAIK. Terima kasih dan Selamat tinggal.

This is where I need to end.

Oh, ini adalah di mana saya harus klik.