テクノロジア魔法学校１章の身につくスキルと関数一覧まとめ

<h1>～<h6>

囲んだ文章を見出しにします。

h1が最上位の見出し（大きい見出し）、
h6が最下位の見出し（小さい見出し）となります。

<img>

画像を表示するときに使います。
<img src="image.png">
のように使います。

<p>

Paragraphの略で、このタグで囲んだ文章をひとつの段落とします。

<br>

改行です。改行したい箇所に書きます。

<div>

このタグで囲んだ箇所をひとつのブロックとします。
CSSで文字色を変えたり、行の揃え位置を変えたいという場合に、このブロックの範囲で変えることができます。

プロパティ

説明

color

文字色をblackや#000000と書いて色を指定します。
rgb(v1, v2, v3)で色を指定することもできます。
https://ja.wikipedia.org/wiki/RGB

font-size

文字の大きさを指定します。

font-family

フォント（文字の種類）を指定します。

text-align

文章の揃え位置を指定します。
中央寄せの場合は center です。

border-style

枠線を指定します。
solid で最も一般的な1本線で囲みます。

border-color

枠線の色を指定します。
色の指定の仕方は color と同じです。

border-width

枠線の太さを指定します。

border-radius

枠線の丸みを指定します。（角を丸くします）
例えば30pxと指定した場合、
半径が30pxの円がちょうど角に収まる程度の丸みになります。

ellipse( x, y, w, [h] )

画面に円を表示します。画面の左上を0とし、ｘで水平方向、yで垂直方向の、円の中心点の位置を指定します。ｘは右方向、ｙは下方向に向かってプラスになります。

ｗは円の横幅（横直径）、ｈは円の高さ（縦直径）を指定します。
ｈは省略可能で、省略した場合は高さはｗの値と同じになります。
単位はpx(ピクセル）です。

fill(v1, v2, v3, [alpha])

図形を指定した色で塗りつぶします。v1,v2,v3にRGB値を指定します。
alphaは透明度の指定です（省略可能）。
0に近づくほど透明になります。それぞれの値の最大は255です。

色を黒くするだけの場合はfill(0)、
白くするだけの場合はfill(255)だけでも良いです。

background(v1, v2, v3, [alpha])

背景の色を指定します。引数はfillと同じです。

noStroke()

図形の輪郭線を消します。

draw()

繰り返し実行される関数です。
デフォルトで1秒間に60回実行します。
例えばこの関数の中に円を表示する関数を書くと、
1秒間に60回円を画面に描きます。

setup()

最初に1回だけ呼び出される関数です。
キャンバスの作成、背景色の設定など、
1回設定すれば良いものをこの関数内に書きます。

createCanvas(w, h)

指定したサイズのキャンバスを作ります。draw関数等で描かれる図形は、この作ったキャンバス内に描かれます。
wは横幅、hは縦幅、単位はpxです。

preload()

外部ファイル読み込み用の関数です。
画像ファイルや音楽ファイルなどをこの関数内で読み込みます。setup関数はこのpreload関数が実行し終わった後に実行されます。

loadImage()

画像ファイルを読み込みます。
loadImage('image.png')
のように使います。

loadSound()

音楽ファイルを読み込みます。
loadSound('sound.mp3')
のように使います。

image(img, x, y, [width], [height])

画像を表示します。幅と高さは省略可能です。

mouseClicked()

マウスをクリックしたタイミングで実行する関数です。

keyDown(key)

押下されたキーに応じてtrueかfalseを返します。
keyDown('up')と書いた場合、「↑」キー押下時にtrueを返します。

play()

loadSoundで読み込んだ音楽ファイルを
変数 mySoundに設定したとき、
mySound.play()のように使用します。
mySound.play()のタイミングでmySoundの音楽を流します。

playMode()

mySound.playMode('restart')のように使います。
restartを指定した場合、mySoundを再生中にもう一度mySoudを実行する命令が来た時、mySoundを最初から再生します。

isPlaying()

mySound.isPlaying()のように使い、音楽が再生中の場合はtrueを返します。

loop()

mySound.loop()のように使います。mySoundをループ再生します。

mouseX

マウスの水平方向の位置を取得します。
ellipse関数の x 部分に書くと、
円が横方向のみマウスに追従するようになります。

mouseY

システム変数。マウスの垂直方向の位置を取得します。
ellipse関数の y 部分に書くと、
円が縦方向のみマウスに追従するようになります。

mouseXと組み合わせて
ellipse(mouseX, mouseY, 200）のようにすることで、
マウスの座標に円を描くことができるようになります。

windowWidth

ウィンドウの横幅を取得します。

width

キャンバスの横幅を取得します。

windowHeight

ウィンドウの縦幅を取得します。

height

キャンバスの縦幅を取得します。