- CouseraのIntroduction to Computer Programmingを無料で終わらせる。
- WEEK1はJavaScriptのライブラリーP5.js
- 1.3 Getting started with Sleuth ここからは本当の初心者には無理？な気がする
- WEEK2は色RGBカラーと図形の描写をP５.jsで
- RGB colours
- Practice quiz
- Programing exercise 4: Code from scratch: Kandinsky（ハット気が付く芸術家の気持ち）
- Lesson 2.2: The console and debugging
- エラーが起きたら？誰に聞く？
CouseraのIntroduction to Computer Programmingを無料で終わらせる。
とりたいコースのFree Trialを押すと、クレジットカード情報を入れる画面になる。
７日間をすぎるとお金がかかるので、７日間で終わらせよう。
カード情報を入れると、Free TrialがGo To Courseに変わる。
WEEK1はJavaScriptのライブラリーP5.js
コースの画面。
WEEK1は1.1から1.3で構成されている。
Videoを押す。
英語が早い。スピードを変えてみる。
字幕は出ないがscriptを書いてくれている。
次のビデオを見る。
Video２ではプログラミングを学ぶ心得を話してくれる。
What is programming ? What is p5.js JSのライブラリーの説明
quiz Getting started with P5.js
operating system
library
code editor
programming language
code editor
programming language
library
operating system
building web applications and interactive websites
high performance computing applications
desktop applications
low level system code
a single programming instruction issued to the computer to do something
an application on your computer to run your code in
changes your code into binary so the computer can understand it.
a p5.js function
a collection of code written by someone else to speed up our development.
help pages for a programming language.
the collection of commands a programming language understands.
the files currently open in a code editor.
mobile accelerometer events
All of the answers are correct! However, DOM Access and sound require an additional library to work.
loading a displaying images
All of the answers are correct! However, DOM Access and sound require an additional library to work.
text and typography
All of the answers are correct! However, DOM Access and sound require an additional library to work.
Matrix transformations
All of the answers are correct! However, DOM Access and sound require an additional library to work.
drawing primitive shapes
All of the answers are correct! However, DOM Access and sound require an additional library to work.
interacting and manipulating the webpages DOM
All of the answers are correct! However, DOM Access and sound require an additional library to work.
loading and playing sound
All of the answers are correct! However, DOM Access and sound require an additional library to work.
user interaction with the mouse and keyboard
All of the answers are correct! However, DOM Access and sound require an additional library to work.
3d drawing
All of the answers are correct! However, DOM Access and sound require an additional library to work.
Running your first program with Brackets エディターの導入
Learn by hacking referenceを使いながら、コードをhackする学習法
Now it’s your turn to hack the robot. Here are some basic ideas to get you started:
- Change some numbers in the commands – observe what changes occur
- Comment out commands and see what disappears
- Copy and paste some of the commands and then change the numbers to create variation
Once you’ve orientated yourself try making some more deliberate changes. Here are some ideas to get you started:
- Change the shape of the robot’s nose
- Give the robot screwball eyes
- Change the colour of the robot
2D coordinate systems canvasを作る。
Videoを見ながら思う。
Videoを見ながら、試してみたい。
というわけで先に、ファイルをダウンロードしてエディターでいじれるようにする。
Readingで素材がダウンロードできます。
P5.jsではこう書く。
canvasを使うのに、関数を二つ用意する。
You’ve got one called setup and one called draw.
quiz 2D coordinate system
クイズを見る限り、この回で学ぶべきことはcanvasは座標を設定するものだ、ということだろうか。
createCanvas()
CreateCanvas()
CanvasCreate()
canvasCreate()
a command
a colour value
the smallest addressable point on the canvas or screen
the smallest rectangle you can draw in p5.js
bottom right
bottom left
top left
top right
down the canvas from top to bottom
across the canvas from left to right
across the canvas from right to left
up the canvas from bottom to top
up the canvas from bottom to top
across the canvas from right to left
down the canvas from top to bottom
across the canvas from left to right
the y coordinate
the x coordinate
Cartesian coordinates
curvilinea coordinates
polar coordinates
a number line
at y coordinate100, an x coordinate 200, with a width of 150 and height of 300
at x coordinate100, a y coordinate 200, with a height of 150 and width of 300
at y coordinate100, an x coordinate 200, with a height of 150 and width of 300
at x coordinate100, a y coordinate 200, with a width of 150 and height of 300
1.2 Code philosophy: What it feels like to code
コーディング（プログラミング）って、、、、
1.3 Getting started with Sleuth ここからは本当の初心者には無理？な気がする
There are many possible ways of investigating this case, but you
should use ONLY the following commands:
rect()
stroke() – Use only 255 or 0 for r,g,b values.
255と0で色を指定する？
これで通りました。
さて、、、このゲームを続けないと次に進めないようです。
ステージ３。。。指示を読まなくて危うくゲームオーバー
おんなじかぁ。つまんないなぁと思っていたら。失敗していた。
司令書を読み直すと。
RBGで255と０しか使ってはいけない。
rect()とfill()しか使ってはいけない。
書き直してみました。
おっと、Fillが大文字ではいけませんね。
書き直して出力すると以下のよう。
クリアしました。
CaSE202まで来たけど・・ながい・・・case202はコマンド＋Fを使う練習です。
特定の色の文字以外をコメントアウトするのに、/*が使えないとか・・・
特定の色のfillとstrokeを持つ文字を残してコメントアウトする課題。
コマンド＋Fで検索できることを知らなければきつい。
一つ足りていなかったらしい。
目で確認。
theがコメントアウトされていた。
見ると・・・fill一つに対して、複数のstrokeを指定できるらしい。
P5.jsの文法がわかってきたぞ・・・
同じ関数？でパロメータが変更されるまで、その関数は生きている。
CASE202 stage4
指示には
Only comment out text commands – leave fill & stroke, push and pop commands uncommented.
とあり、push()とpop()という関数が追加された。referenceをみよう。
はい。pushが、今までの関数をなしにしてデフォルトに戻す関数?star another new drawing state
違うようです。
popはよくわからなかったのでやりながら理解しよう。
CAASE301画像を配置する
コメントアウトしたら画像がうまく配置されているからそのままsubumitしたらダメだった。
どうやら、変数variablesを使って指定をする必要がある。
これは、初心者は無理でしょう。
できました。
次。
STAGE２。subtract operatorsを使えとのこと。ある一つの座標との相対的な位置を指定する。
– To do this you will need to combine add and subtract operators with variables
Bones karpinski for for each parameter.
– Do not create any new variables
– Do not add any additional commands
つまり足し算引き算をして場所を特定しろと？
これでできました。
STAGE3。
なんだこれ
指示は、同じく相対的な指定の仕方で画像の座標を特定すること。
新しい関数が出てきた。
指示書の条件を満たす書き方はこれしかないかなと思う。
通りました。
次。
何したらいいかわかりません。
Organise each syndicate member into an object. I’ve done one for you as an example.
ということで見本を見てみますと。
ここですね。コメントアウトされている文字から見つけます。
//define your new objects below
setup()で全て片付けてしまうという意味でしょうか。
真似をして書いてみました。
submit
だめ？
見つけました。
robbieKrayObject.
を真似してこちらも変えなくては
これでどや。
成功。
まだ６５％
次。CASE302
司令書を読むと。
– Edit startX to alter the starting position of the spotlight.
– Edit endX to stop the spotlight when it reaches the target.
ここをいじるということか。
– Make the spotlight move perfectly from you towards Sergy by adjusting the increments of x and y.
If you get everything correct then it will stop over the target.
Srygyって？人の名前？
– Adjust x and y using
* “+=” or “+”
* “-=” or “-”
全然わからないのでreferenceでanimationと調べる。
なるほど。
これでどうだ。
あかん。
おお、頭にライトを当てるのね。
あったてるね。
アニメーションが動いていないのが問題である気がするのだが。
あ。
x=x+1でした。
x= startX + 1と書いていました。
submit
同じ表示が出ました。何がダメなの？
何を直したらいいのかわからない。
endXにvalueを入れた。
ダメだった。
見直してみた。
If you get everything correct then it will stop over the target.
と書いてある。つまり、位置をうまく合わせるとendXで合わせなくても、ちょうどいいところでライトが止まるの？
止まりませんでした。
– Edit endX to stop the spotlight when it reaches the target.
って書いてあるし。
書く場所を変えてみた。
ダメだそうです。すすみません。
よくよくまた見てみる。
書く場所を変えた。
ダメだった。
そして、suspend。時間が経ったら挑戦できるのかな。
できる気が・・・
ちなみにこのP5.jsを使って色々遊んでいる記事がある。
先にCASE303をしよう。event handlerのお勉強
金庫を開ける動作を模倣するそうです。
なるほど。しかし、この書き方はなんだ？
referenceでmouseMovedを見る。
なるほど。
ifを使わないで記述ができるとな。
読み違えがあったので書き直し。
Aだけか！
///
凡ミスでした。
STAGE2は、イベントハンドラを自分で最初から書いて欲しいそうです。
あれ？・ちゃんと+＝使って書いたのに・・・
HDDではなくてHDOでした。
次のステージに行きます。
なんで４つあるの？
ここにきて、mouseのy座標のポジションを取得するのって、どうするんだっけと思ったが。P５
.jsでは気兼ねなくmouseYで座標を取得できるらしい。
取得するというより、mouseYと書けばポインタのy座標を表す。とリファレンスに書いてあった。
では、進めていこうと思ったら。if使ったらあかんやん。
なるほど・・・と思って、「こんなコードでいいのか？」と思いながら、試してみる。こっちの方が、シンプルだし。こう書けばいいやと思った。
気を使って書き直して、一発合格できると嬉しいね。
そして最後（飛ばしたやつは？）。
と思ったら、パスしてた！
WEEK2は色RGBカラーと図形の描写をP５.jsで
きつかったWEEK1。
ながすぎだろ？
Sleuthだけで２４時間くらいかかった気がする。
３hって何だろう。
メールを見たら、おめでとうメールが送られていた。
色を指定するために使う組み合わせの話。
Practice Quiz
RGBの値が３つとも同じ例えば（６、６、６）といった数値はグレースケールを表すと初めて知った。
In RGB colours if all 3 values are the same what do we know for definite about the colour?
こんな問いが出てきた。
An RGB colour value takes 24 bits of computer memory, 8 bits (or one byte) for red green and blue. How many colours does this mean we can store overall?
色に８bits使っているのだったら、２の８乗ではないかと思う。でもr,g,bにそれぞれ８bitsとも取れる。どっちだよ。
結果。
bitとbyte
単位としてはByteの方がbitより大きい。
文字数が多いByteの方が大きいと覚えようかな。
（０,２５６、２５６）という値は取らない。
RGB colours
White
Black
It will be red.
It is a greyscale colour.
It is a shade of brown.
None of the above.
not a valid colour value
purple
magenta
yellow
magenta
cyan
yellow
not a valid colour value
brown
not a valid colour value
purple
orange
(255,150,0)
0,255,127
(0,127,0)
(150,150,150)
3
256
16777216
167772160
16777216
2
255
256
先に進みます。
Video fill, stroke, noFill
argumentと言っているのは、parameterのこと。引数ひきすう。
Sleuthで散々やったことの話だった。
argumentの一つはarpha valueと言われることがある。optionalなvalueのことか。
ロボットの色が最初はfill(200);になっている。
なんのことかと思ったら、fill(200,200,200)の略らしい。
fill(r,b,g,opacity)。４つ目のargumentはopacity。
で、その作品をDiscussion Promptで発表。
Practice quiz
setup()はフレームごとに（一定時間ごとに）呼び出される。unityでも似たような設定をしたことがある。
こちらはopacityの問題。
こっちは間違えてしまった問題。
nn?opacityが２５５って何だろうとおもう。
illustratorなら１００止まりなのだが。（％表示）
これは色の話。
255は（255,255,255）の意味。
これと同じで、opacityの255は透明を表す（色がない）。opacity０は透過しないことを表す。と思ったら、逆だった。opacity０が透明を表す。opacity255は、透過しないことを表す。
試してみて、気がつきました。
Practice Quiz、やりました。
今回は全問正解でした。
学校のテストも全部コンピューターでやったらいいのに、と、思いました。
Programing exercise 4: Code from scratch: Kandinsky（ハット気が付く芸術家の気持ち）
プログラミング、理系の話だと日本では割り切られてしまいそうだが、海外では芸術と結びつける。
図形の書き方
strokeとかfill、どうしようかなーと思いながら、感じたこと。
Kandinskyは、単純に図形を並べるだけで美しさ、魅力が出るかを実験していたのだ。
実際にやってみて、わかった。
紙に書く、色を塗るでも良いけれど、頭を使って思考することで、彼の追体験をしたように思えた。
I felt I traced the feeling of Kandinsky. Purely geometric beauty.
Lesson 2.2: The console and debugging
JavaScriptでデバグをする（エラーを直す、バグをとる）ときのツール。
知らなかったなー。
ファイルを開いた状態で、ブラウザからJavaScript consoleを選ぶ。
エラーが起きたら？誰に聞く？
世界的に有名なサイト、スタックオバーフロー。stackしたらオーバーフロー
WEEK3
we want to start adding animations and interactions to our program.
だそうです。
mouseXを使ってこんなことが・・・マウスのポインタの位置に丸が書ける。
setup()は最初に読み込まれたきり、。drawはフレームごとに読まれる違いをここでまた理解した。
backgroundをdrawに置かなかったら、backgroundが更新されない！
argumentに書く方法が色々。
便利！cssで「画面のどこに配置するか」を散々こねくり回した経験からすると、とてもシンプル。
そして最後の宿題
クリックしたらポインタに追従する丸の色が代わるアプリを作ろう！
参考にするのはこれ。
作ってみた。
これで失敗。クリックしても色が変わらない・・・なぜか？！わかった！
fillをsetup()に置かないと、mousePressedが作動しても、フレーム毎にfill(255,255,255)に書き換えられてしまう。
ライブラリーって大事なのだなぁ。
日本の教育って・・・・どれだけ敷居が高いのか・・・と思う。
さて、頭を使うこの問題。
頭を使うというか、mouseX, mouseXと書かれていることが見えていたら正解できますね！
次の問題は、例のfillとdraw問題。
間違えました。
これも間違えました。
backgroundは図形の一種のようで、rectの後ろにbackgroundがあると、塗りつぶされるようです。
Try againを押して、１００％になるまでがんばるぞ！
Lesson 3.2: User-defined variables and objects
Practice Quiz
objectを使うとは？？？
operatorの話
Mathematical functions: random, min, max
ランダムを使うと、こんなことが・・・
そしてついに最後！Inspecting variables in the console
JavaScriptのエラーを見るのにconsoleを開いたことはある。
今度は変数の値を確認するためにもconosleを使おうというご指導。
コンソールの使い方で、文字列が欲しいなら””で囲むことに注意。
変数であるなら””はいらない。
operatorがdrawに書かれているときの注意。
コンソールにはなんと出てくるか。。。
正解は1,2,3,4,5・・・・
frameごとにaに１がプラスされる。
最後にまたデバグ
そして、エレガントなコードとは何かのVideo。
終わった？？？？？certificateをもらおう。
無料で終わるのか？キャンセルする必要性は？
気になったのでみてみると、、、、
キャンセルする必要がありそうです。
ヘルプページがあったのでみてみました。
materialにアクセスできなくなるのは惜しいけれど。
Payments after free trials
こっちにきちんと書いてありました。
Your free trial will automatically become a paid a subscription on the 8th day after you begin your trial.
To avoid being charged after your free trial ends, you need to cancel your free trial before it ends. Free trials end on the 7th day after you begin your trial. On the 8th day, your credit card will be charged for the first month of the subscription.
コメント