だらっと学習帳

Processingとか p5.jsとか 好きです




というわけでOpenProcessingにチュートリアル記事などを書けるArticle Mode(Beta版)が追加されたそうです。
こんな感じで書いてみました↓


見出しがつけられたり画像やコードを埋め込めたりと、書き心地は悪くないです！なんとなく今流行りのnoteに近いかもです。
今はBeta版ということで利用者をTwitterやFacebookで募っているようです。
Article Mode利用対象者として手続きしてもらうと、スケッチ作成時にこんな感じの表示が出ました。
スクリーンショット 2019-02-21 21.24.01

Article Mode一番の見所は、コードのシンクロ機能があることです。
埋め込みコードの右上に緑色のまるいランプが灯っていると、それはシンクロが有効になっているコードということ！
なんと、ここで変更したコードの内容は実行スケッチ(▶️ボタンを押すと表示されるスケッチ)にも反映されるんです！
一部分だけ抜粋されたコードでもシンクロできるので、「この行をこんな風に変えてみて！」という説明が簡単にできちゃいそうです！

また、Articleが書かれたスケッチのリンクを開くと、自動的に最初の表示がArticleになるようです。
通常はスケッチが最初に表示されますが、Articleが最初に表示されることで多くの人に記事を読んでもらえそうです。

Article Modeに関する詳しい説明はこちらに書かれています。
Article Tutorial - OpenProcessing

今後のアップデートに期待です！



知らなかった……。
そして revisions.txt を調べてみるとcircle()、square()も追加されたとのこと！



というわけでさっそくProcessing3.5.3で動かしてみました。
スクリーンショット 2019-02-14 8.23.38
void setup() {

  size(400, 400);

}



void draw() {

  background(200);



  ellipse(60, 100, 50, 120);



  push();

  translate(200, 100);

  fill(255, 0, 0);

  strokeWeight(3);

  circle(0, 0, 70);

  pop();



  square(60, 250, 50);



  push();

  translate(150, 250);

  fill(0, 0, 255);

  noStroke();

  quad(0, 0, 50, 0, 50, 80, 0, 80);

  pop();



  rect(280, 270, 100, 60);

}

ちゃんとpushMatrix/popMatrixもpushStyle/popStyleも兼ねてますね。
circleはパラメータで(x位置, y位置, width兼height)を指定するのでまんまるが描けますし、
squareも同様に(x位置, y位置, width兼height)を指定するので正方形が描ける、というもののようです。
squareのリファレンスの文章が細かくて好きです。
A square is a four-sided shape with every angle at ninety degrees and each side is the same length.



【追記】
p5.jsにもcircle(), square()あるんですね…知らなかった……。

表題について、今の今まで気がつかなかった、というお話です。

Processingでは pushMatrix / popMatrixという座標を保存する関数が用意されています。
translateやrotateと合わせてよく使われる関数だと思います。

そしてpushMatrix/popMatrixに比べてややマイナーなんですが、 pushStyle / popStyle という関数があります。
描画に関する状態について保存し、popしたら解放(保存前の状態に戻る)する、というものです。
リファレンスを引用すると、以下の関数についての状態を保存するそうです。
fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), shapeMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading(), emissive(), specular(), shininess(), ambient()

p5.jsの話をすると、pushMatrixが push になっているのは知っていたんですが、
実はpushStyleもpushに吸収されているらしいんですよね。 pop も同様です。
リファレンスを見るとpush/popのサンプルコード下段がProcessingにおけるpushStyle/popStyleのものになっています。
上段に掲載されているスケッチだけ手を加えられていて、pushMatrix/popMatrix的な動きの説明になっています。
ただ、pushで保存できる状態は、上記に引用したpushStyleで保存できる状態とは一部異なっているようです。
p5.jsのリファレンスから引用すると、pushは以下に対応しています。
fill(), stroke(), tint(), strokeWeight(), strokeCap(), strokeJoin(), imageMode(), rectMode(), ellipseMode(), colorMode(), textAlign(), textFont(), textMode(), textSize(), textLeading().

p5.jsのpush/popでpushStyle/popStyle的な働きができるか実際に試してみました。
おお、できている……！


See the Pen
push_pop_sample by reona396 (@reona396)
on CodePen.




↑このページのトップヘ