Coding Challenge #4: Purple Rain in ProcessingYouTube↗  IA↗(long shot)
Education  1.8M views 39.3K likes 1.2K dislikes   25 Apr 2016
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

Click to Play Video Click to Play Video
Hoi! Welkom bij de codeeruitdaging van vandaag!
ようこそ コーディングチャレンジへ
Vandaag maken we een werkende paarse regen (ter ere van Prince).
紫色の雨を降らせましょう 王子に敬意を表しましょう
Het enige wat ik heb voorbereid, is het kiezen van twee kleuren,
準備として2色選びました
die waren te vinden op het internet; dankjewel daarvoor.
インターネットで探しました
Paars voor de regen en een andere kleur voor de achtergrond.
雨の紫色と背景の色です
Ik gebruik de Processing programmeer- omgeving.
Processingの環境でコーディングします
Je kunt het vinden in de beschrijving onder de video en het downloaden.
Processingが知りたい方は 下の詳細欄からダウンロードできます
De code is geschreven in Java.
Java言語で書かれています
Ik maak ook een javascript versie die iets als "p5.js" zal heten.
p5.jsを使ったJavaScriptでも作るつもりです
Als je dit voorbeeld in je browser of op het internet wilt
ブラウザ上などで例を実行したい場合
afspelen, kun je deze code ook vinden in de beschrijving.
詳細欄からバージョンを選んで下さい
Okay, laten we starten: Het eerste wat ik moet doen is
では初めましょう まずはじめに
gewoon een 'setup'functie schrijven en ook een 'draw'functie.
setup関数とdraw関数です
Daarna voeg ik de 'size'functie toe.
さらにsize関数も
Wauw, mijn bril valt van mijn hoofd.
メガネがずって来たw
Ik ga deze geweldige kleur gebruiken als mijn achtergrond.
このキレイな色を背景色にしましょう
Oh en hier moeten nog extra haakjes en ik moet een puntkomma toevoegen.
余分なカッコだw セミコロンも追加します
Ik ga dit laten werken, kijk, daar gaan we.
実行します
Dus dit is de start; dit is het veld waar ik mijn paarse regen wil hebben.
よし これが最初のシーンです ここに紫の雨を降らせます
Om regen te maken, is het denk ik goed om een enkel object te creëren
雨を降らせるには雨玉が必要です
dat een regendruppel is, en om daarna een array te maken met veel regendruppels.
シングルオブジェクトを作成して配列にします
Ik ga verder en maak een nieuw tabblad dat ik 'drop' ga noemen.
タブを作成します dropと名付けます
"klasse" drop; een klasse is een template voor het maken van objecten in de Java programmeertaal; in de JavaScript versie zal dit eruit zien als een constructorfunctie, zoals je zult zien.
Dropクラスを作成します これはJava言語のオブジェクトテンプレートです JavaScriptでも同様のコンストラクタを作りました
Deze druppel zal een x-waarde hebben en ook een y-waarde.
dropはxとyを持ちます
Ik heb een functie nodig zodat de druppel zal vallen
雨玉が落ちるfall関数が必要です
en een functie zodat de regendruppel ook daadwerkelijk gemaakt wordt op het scherm
さらに画面に描画するshow関数も必要です
Hoe wil ik mijn druppel eruit laten zien?
どういう見た目にしようか
Laten we de druppel een lijn laten zijn zodat het eruit ziet als regen.
雨玉は線で表現しましょう 雨に見えるはずです
Een lijn, op x en y
lineに引数xとy
naar x en iets?
yは？
Bijvoorbeeld y plus iets, okay?
yに足していこうか
Iets zoals y plus 10
y＋10だ
En hoe moet de lijn eruit zien? Paars!
線は紫にするんだった！
Ik ga de paarse kleur hier vandaan halen.
紫色はここから
Ey, kom terug.
そして ここに
Dan in 'fall' typ ik y is gelijk aan y plus yspeed.
fall関数でy = y + yspeedとします
Okay, yspeed bestaat nog niet, dus ik ga die variabele maken.
変数yspeedを定義しておきます
Nu heb ik dit object gemaakt. Dit is het basis idee van het druppelobject.
このオブジェクトは雨玉の核となるアイデアです
Het heeft een x en een y en een yspeed om te vallen
xとy、yspeedを持ちます
y is gelijk aan y plus yspeed om te vallen
降らせるための y = y + yspeedと線の描画です
en dan een lijn om het te tekenen De druppel heeft beginwaarden nodig voor deze variabelen.
dropクラスの変数に初期値を定義します
Ik maak nu een druppel die start in het midden van het scherm
標準は真ん中から降らせます
en een druppel die start aan de bovenkant van het scherm terwijl
そして画面のトップから降らせます
snelheid gelijk blijft aan 1.
速度は1にします
Kijk of het werkt.
デバッグしましょう
Hier maken we een variabele 'drop' d is gelijk aan 'new drop'.
Dropクラスの変数を作って d = new Drop()します
Dan typ ik in 'draw' 'd' punt 'fall'. en dan 'd' punt 'show'.
draw関数にd.fall() d.show()を追記します
Ik denk dat ik genoeg code heb geschreven om het nu te testen.
十分だと思いますがテストします
Ik heb een 'drop' klasse; al de code voor de druppel,
Dropクラスは雨玉です
ik heb een 'drop' object. Kijk:
そしてDropオブジェクトを作りました 実行します
onze paarse druppel valt naar beneden.
紫の雨を確認しましょう
Daar is 'ie! Paarse regen; Daar is de paarse regen; hij valt.
ありました！紫の雨玉が降ってます！
Het is maar één druppel, het is duidelijk; wat ik nu moet doen is meer druppels maken
まだ1つの雨玉です もっと降らせます
Om veel druppels te maken, moet ik een array maken.
まず配列で沢山の雨玉を作ります
De manier waarop ik dat ga doen, is door dit te veranderen in een array.
方法はこれを配列にします
Kijk; de array syntaxis is van het soort drop met de haakjes en is gelijk
見て下さい 配列の構文は角括弧で中に雨玉の数を記述します
aan een nieuwe drop, en ik maak een array met 100 elementen.
配列は100個の要素を持ちます
In plaats van 1 druppel te maken, maak ik een loop
雨を作るには・・・
(ik denk dat dit misschien de miljoenste keer is in mijn leven dat ik de loop type)
ループさせます これは100万個の雨玉になるよね ループを記述します
de loop is de hele lengte van de array
配列の要素の数だけループさせます
ik type dat 'drops index i' en dat is een nieuwe druppel.
dropsの要素 i をnewします
Ik maak 100 nieuwe druppels in deze array.
配列100回分の雨になります
en dan moet er ook meer gedans in. Ik zal nooit goed genoeg zijn om te dansen
もっとわくわくするべきだ！ まだ十分なものではない
maar zou meer gedans moeten zijn voor dit specifieke geval terwijl ik dit aan
もっとわくわくして対話していこう
het programmeren ben. Ik scrol nu naar beneden naar 'draw' en type
draw関数に戻って♫
'drops index i' punt show; hier zou op z'n minst muziek moeten spelen.
drops [ i ].show()を追記して 最後に音楽を付けようかw
'drops index i' punt fall; Het maakt niet echt uit in wat voor volgorde deze zijn,
drops [ i ].fall()も追記します 順序はどっちでもいいです
maar ik zet fall vooraan en ga het nu af- spelen.
私はfall関数を先に記述します 実行します
Er zouden 100 druppels in het veld moeten zijn.
画面に100滴描画されるはずです
Maar er is er maar 1.
しかし1滴だけです
De reden dat r nog steeds maar 1 druppel is, is omdat alle druppels
理由は1つ 全ての雨玉が・・・
tegelijk op hetzelfde punt staan en met precies dezelfde snelheid bewegen.
同じ位置と速度で動いているからです
Ik moet ze een beetje toevallig maken.
少しランダムにしましょう
Eén ding dat ik kan doen is ze een random locatie toewijzen
ただランダムな位置にするだけです
dan kunnen we zien wat er daar gebeurt.
見てみましょう
Kijk, al mijn regen valt precies tegelijk
全ての雨玉が一緒に降ってます
Iets anders dat ik kan doen, is
もう1つできることは・・・
ze een random y-locatie geven
ランダムなY座標にすることです
Ze mogen niet buiten het scherm starten
画面の外側からなぜ降らせないのか
dus hun random locatie moet tussen -200 en -100 zijn, zodat ze in het scherm starten.
位置は-200から-100の間にするべきです これで離れます
En nu gaan we het opnieuw afspelen, zodat we het een beetje beter zien gaan
実行します 少しは良くなったでしょう
en nu zien we dat de regen in Spanje vooral
スペインの雨だ
op de vlakte valt.
平野に降り注ぐ
Nu gaan we de druppels een beetje meer verspreiden
もう少し広げましょう 速度が不自然だ もっと早くバラバラに降らせよう よし もっと降らせましょう
しかしこれでは全て消えてしまいます おそらく if (y > height)を追記し y = random(4, 10)を記述します ランダムに全ての雨玉が上にリセットされます よし
これで少しは雨らしいですね では もっとよくできるはずです 王子様の音楽を部屋に流せば もっとらしくなるでしょう
そんなことないか 何言ってるんだろ でも今日やりたかったこと 紫の雨だ それでは
もう少し改良しましょう 何をするかと言うと 雨の量を増やします いいね これです 多量の雨だ
さらに ええ さらに 線の長さを変数にします
線です 変数lenを定義します 10から20のランダムにします このような降雨になります
変数lenはらしくなるね さらにもっとらしくしましょう 現実の雨は一定の速度を持つ 重力によって引っ張られてます yspeed = yspeed ＋ 0.05とします
重力の値であり 加算されていきます もちろんリセット時にゼロにします これで現実感が出るかな あれ
どうなってる えっと なぜだろう ああ そうか もちろんだ
yspeedをこうして 少しはランダムな速度になったね 速度をゼロにしたことで一緒に降るようになってしまっていた 全て同じ速度だった
もっとバラバラにしよう 重力を強くしてみよう もっとよくなるはず 少しずつらしくなってるね
空白でよくできるはずだ たぶん 降り始めの値を大きくしよう 最初から広がってるね 様々なサイズと重力でさらに良くなる
もっと雨らしさを感じるには3次元が必要だ 仮想の視差エフェクト 近ければ速く 遠ければ遅く降ってる ストロークの厚みと大きさ、速度を上げよう
それじゃあ Z値を追加しよう ランダムな値だ 0から20にする
lenは・・・ 0が一番奥で20が手前だ zをmapして0から20そして10から20にする これは
近ければ長くて 遠ければ短いということです さらに速度もランダムではなくmapにします zが0から20で4から10です 近ければ速くなる
リセットした時もzに沿った同様の速度にします strokeWeightも追加します 変数thickはmapでZに沿って0から20です 遠ければ1px 近ければ3px厚くします
近ければ厚くなります できました 実際は3dではありません 0から20の変数を作りました
20に近づけば 線が厚く長く早くなります 0に遠ざかれば 線が細く短く遅くなります よし 見てみましょう まだ不十分だよね
重力に一工夫しないと 速度を上げよう 大きく違えば面白いな 重力を止めてみよう
重力がより強くなったね 重力なしでだ 2つ不可解だ わかった
float gravity = map(z, 0, 20, 0.01, 0.2) 重力もz値に紐付けるんだ よし 見てみよう 紫の雨はこれくらいかな
これが僕の紫の雨です 僕は賢いビジュアルデザイナーではないね 君がこのコードをより良くしてほしいな 例えば地面で跳ね上がるとか
破裂するパーティクルとか できたら 追加したバージョンを公開するよ 今日は12分で紫の雨を作りました
たぶんね 見てくれてありがとうございました ほんとに良い歌詞なら唱えたかも でも紫の霧とは歌いたくない
Ondertitels door de Amara.org-gemeenschap
モクモク沸く前にね 見てくれてありがとう 次の動画でお会いしましょう 次の動画でお会いしましょう
Similar videos:

#111 Lantern on the Wall, or Cityscape Without Perspective (Watercolor Cityscape Tutorial)
Watercolor Online with Michael Solovyev
6.7K views 397 likes 7 dislikes 26 Oct 202054% match
0 views 0 likes -1 dislikes 06 Jun 202654% match










✅The BEST CLASS and ACCESSORIES for the KAR98 in COD MOBILE (BEST CLASS KILO SEASON 9) ✅

3.1K views 130 likes 4 dislikes 20 Aug 202054% match



How to Start a Firewood Business
Jake Phelps
59.6K views 229 likes 143 dislikes 31 Oct 201654% match












PET ŞİŞELERDEN SANDAL YAPTIM!
Cihan Kosif
368.9K views 22.5K likes 1K dislikes 20 Jun 201954% match
0 views 0 likes -1 dislikes 06 Jun 202654% match










Quel avenir pour ma chaîne YouTube. A vous de décider. Je compte sur vous
Papy Nounn
20K views 1K likes 20 dislikes 24 Oct 202053% match
















Quel avenir pour ma chaîne en 2021. Je réagis à vos commentaires.
Papy Nounn
17.4K views 721 likes 18 dislikes 02 Nov 202053% match
















😱😱REPARER UN MUR APRES AVOIR ENLEVÉ LE CARRELAGE
Karo tuto the french tiler🇫🇷
454K views 8.1K likes 292 dislikes 12 Apr 202053% match










ВЕДЬМА ЗАСТАВИЛА ПОЖАЛЕТЬ ЧТО ЗАШЕЛ В ЕЕ ДОМ / HE WENT ALONE TO THE WITCH'S HOUSE
Tim Morozov
1M views 32.2K likes -1 dislikes 10 Jan 202153% match














✅The BEST CLASS and ACCESSORIES for the RAZORBACK in COD MOBILE (BEST CLASS RAZORBACK SEASON 9) ✅

4.3K views 186 likes 7 dislikes 15 Aug 202053% match
0 views 0 likes -1 dislikes 06 Jun 202653% match










How to trim thick diabetic toenails? Is this an Actor? Just Listen to this Diabetes Patient
Dr Nail Nipper
705.2K views 1.9K likes 444 dislikes 16 May 201753% match











Construction container - Débosselage des containers - J+7
Kerworkshop
10.6K views 224 likes 5 dislikes 02 Jan 202153% match






HOW TO MAKE A HOMEMADE LAVA LAMP
LaneVids & Dad Reviews Shorts
7.4M views 32.6K likes 5K dislikes 04 May 201253% match












✅La MEJOR CLASE y ACCESORIOS para la LK24 en COD MOBILE (MEJOR CLASE LK 24 TEMPORADA 12)✅

2.8K views 133 likes 5 dislikes 04 Sep 202053% match



# Humor Episode 3-Awesome funny story! Beware of missing belly button! Funny story / funny video
Strange story
944 views 109 likes 0 dislikes 22 Sep 202052% match







Deux en Un :Raffermie et les tend: EN VRAC? TOMBE ? C EST COMPLETEMENT RELACHÉ?HUMM JE TE COMPRENDS
AU COEUR DU BIEN ETRE
2.7K views 0 likes 0 dislikes 02 May 202052% match








Pakistani reaction on කරාටි ක්ලාස් | Karathe Class | Vini productions | Most Funny Video | Reaction
Maqbool Reaction
13.4K views 905 likes -1 dislikes 20 Jan 202152% match

Boisson puissante contre 1000 Maladies
L'ART DU TEINT PARFAIT,ELIXIR DEMARIE LEONIE COACH
308.5K views 0 likes 0 dislikes 06 Sep 201952% match










#116 Landscape Sketch, Wet on Wet Watercolor Technique (Watercolor Landscape Tutorial)
Watercolor Online with Michael Solovyev
4K views 266 likes 0 dislikes 30 Nov 202052% match

















PIZZA IN PADELLA CON COTTURA COMBO PADELLA GRILL | FoodVlogger
Carlo Gaiano
413.5K views 9.8K likes 393 dislikes 26 Apr 202052% match















DIY- FOLHAS FEITAS COM CIMENTO
TUDOPLANTA ARTESANATO COM CIMENTO
2K views 334 likes 4 dislikes 01 Dec 202052% match






Lär dig svenska - Min pappas gård - Learn Swedish - 71 undertexter
Learn Swedish with Marie!
9.1K views 715 likes 4 dislikes 30 May 202052% match












🏝칸쿤에서20분! 죽기전에 가봐야할 곳. (여행정보설명란에)
Inny's vlog
1.2K views 34 likes 0 dislikes 22 Oct 202052% match






How To BUILD The BEST HDTV ANTENNA! | Homemade HDTV Antenna DIY
LaneVids & Dad Reviews Shorts
1.8M views 5.6K likes 705 dislikes 08 Mar 201052% match












ANDREA & CAMILA, SPIRITUAL CLEANSING & HEAD MASSAGE, HAIR BRUSHING, ASMR, LIMPIA, духовное очищение
CUENCA LIMPIA
69.5K views 1.9K likes 41 dislikes 17 Mar 202152% match
















TELEFON İLE PROFESYONEL İNSTAGRAM FOTOĞRAFLARI ÇEKİN!!İPHONE
Gokhan Karakas
2.6K views 101 likes 4 dislikes 01 Dec 202052% match

















Small washing machine｜Recommended home appliances for dog/cat pet supplies and laundry sorting
猫とトキ 便利グッズとDIY
1.2K views 41 likes 0 dislikes 13 Jun 202052% match









The 4 Dollar Android Smartphone
Unbox Therapy
20.2M views 344.1K likes 10.2K dislikes 11 Mar 201652% match







Settings Privacy About Contact Donate