p5.js入門 (全14回)
ビジュアルコーディングツールであるProcessingをJavaScriptに移植したp5.jsについて学んでいきます。
このレッスンでは p5.js 0.4.8 を使用しています。
-
#01 p5.jsとはなにか？ (01:45)
- 概要
- 公式サイト
- 必要となる知識
- レッスンにおける環境
-
#02 開発の準備を整えよう (02:23)
- index.htmlの作成
- p5.jsの読み込み
- myscript.jsの作成
-
#03 はじめてのp5.js (02:45)
- setup()、draw()
- createCanvas()
- background()
- rect()
- 変数
-
#04 色を表現してみよう (02:47)
- 1つの数値による表記
- 3つの数値による表記
- 透明度
- colorMode()
- CSS記法による表記
-
#05 rect()で長方形を描いてみよう (02:46)
- rect()
- width, height
- rectMode()
-
#06 ellipse()やline()を使ってみよう (02:30)
- ellipse()
- line()
-
#07 塗りと線の設定をしてみよう (02:31)
- color()
- fill()
- noFill()
- stroke()
- strokeWeight()
- noStroke()
-
#08 テキストの描画をしてみよう (02:58)
- text()
- textAlign()
- textSize()
- textFont()
- textStyle()
- 塗りと線の設定
-
#09 図形を変形させてみよう (02:58)
- push()
- pop()
- translate()
- rotate()
- scale()
-
#10 マウスとのインタラクション (02:44)
- mouseX, mouseY
- mouseIsPressed
- mousePressed()
-
#11 キー入力とのインタラクション (02:59)
- keyIsPressed
- keyTyped()
- keyPressed()
- key
- keyCode
-
#12 乱数を扱ってみよう (02:33)
- random()
- random(n)
- random(n, m)
-
#13 sin()､cos()を扱ってみよう (02:51)
- sin()
- cos()
-
#14 p5.domライブラリを使ってみよう (02:58)
- p5.dom
- createSlider()
- createButton()
#01 p5.jsとはなにか？
#13 sin()､cos()を扱ってみよう
2019年2月12日
補足情報 cos, sinについて
動画中で
x = sin(radians(angle)) * r;
y = cos(radians(angle)) * r;
としていましたが、正しくは、x方向がcos、y方向がsinなので、
x = cos(radians(angle)) * r;
y = sin(radians(angle)) * r;
となります。
円が描画されるスピードを変えて、もっとゆっくりと円が描画されるようにしたいのですが、どうすればいいですか？
補足情報 必要となる知識について
・JavaScript入門 (全24回)
http://dotinstall.com/lessons/basic_javascript_v2
使っているエディターであるAtomについては以下をご覧ください。
・Atom入門 (全13回)
http://dotinstall.com/lessons/basic_atom
p5.jsのもとになったProcessingについては以下をご覧ください。
・Processing入門 (全15回)
http://dotinstall.com/lessons/basic_processing_v2