説明よりもコードで。

var box = {
  apple = {
    'size':"15cm",
    'color':'red'
  },
  lemon = {
    'size':"8cm",
    'color':'yellow'
  }
}
var propatyname = 'apple';

みたいな形があったとして、アップルを 変数propatyname で指定して、色を取得する場合は

console.log( box[propatyname]['color'] );

で問題ない。
問題ないんだけど、JSHintを通すと

[‘color’] is better written in dot notation.

と注意されてしまう。

ドットシンタックスの場合、キーをクォートで囲まないから当然こうじゃない。

console.log( box.propatyname.color );

じゃあ変数を指定したい場合はどうするんじゃい！と憤慨したものの、良く考えてみたら

console.log( box[propatyname].color );

これでいいじゃん、ということに気付く。
JSHintも通ったので多分合ってるんじゃなかろうか。

基本はドットシンタックス(.で区切る)で、変数の部分だけブラケット（[]で囲む）と覚えておきます。

三角関数を勉強中なのですが、数学としてだけ勉強しても上達しないので何かコードが書けるツールないかな～と思ってたところでp5.jsに出会いました。

使い方は

　1. p5.js(p5.min.js)をサイトに読み込む。
　2. setup()とdraw()という関数を用意して中に処理を書く。

でOK。

ちなみに setup() は最初に1回、drawは指定したフレーム数/秒で実行されます。
（何も指定しないと30フレーム/秒？）

こちらのコードをちょっといじって貼り付けてみました。

サンプル

リファレンスはこちら

今までcanvasを使った描画はやったことなかったのですが、こういう解り易いプラグインがあると一気に敷居が下がりますね（きっと他にもいっぱいある）

JavaScriptのvarについて大事な事２つ。
忘れそうなのでメモ。

「単独varパターン」のススメ
知らないと怖い「変数の巻き上げ」とは？

どちらも素晴らしい解説でした。

ついでにコードチェックツール。
jslint.com
単独Varパターンに対応してないとエラーが出るらしい。