p5.jsさわってみた

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

p5jslogo

使い方は

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

でOK。

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

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

サンプル

リファレンスはこちら

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

jQueryの$(this)で指定した要素(HTML)をそのまま取得したい

ハマったのでメモ。

例えば二つのリストがあって、クリックしたらもう一方に対象の要素を複製したいとする。

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <!--ここに<li>要素を移動したい-->
</ul>
$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).html());
  });
});

何の疑いもなくこれでイケると思ってたのに実際は、

<ul id="list1">
  <li><span>要素1</span></li>
</ul>

<ul id="list2">
  <span>要素1</span>
  <!--ここに<li>要素を移動したい-->
</ul>

・・・外側の<li>がない;;

$(this).html() がthis(上の例の場合は<li>)の中身を取得するものだとは知らなかった><

対象の範囲としては

$(this).remove();//this自体が対象
$(this).empty()//thisの中身が対象
$(this).text()//thisの中身が対象

empty()やtext()の仲間なんですね(jQuery使い慣れてる人には当然の事?)

で、解決策。

$(function(){
  $("#list1 li").on("click",function(){
    $("#list2").append($(this).get(0).outerHTML);
  });
});

$(this).html() を $(this).get(0).outerHTMLに変えればOK。

get([index])
outerHTML

場当たりでコード書いてるからこういう基本的なことでハマってしまう。ドキュメント読んでからコード書く癖付けないとだめだなぁ;;

単独varパターン、関数の巻き上げのメモ

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

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

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

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