Palette

ritocoのクリエイティブコーディング記録

Processing Community Day 2020 Tokyoに参加しました！

文章



ritocoです。

だいぶ前になってしまいますが、今年もProcessing のお祭り
Processing Community Day に参加しました。

f:id:ritocopalette:20200225104741j:plain 画像は PCD2020のTwitterから引用しました。

今年は運営側での参加でした！
主にayakoooさん（‪ @ayakooo_o ‬ ）のワークショップのお手伝いとお悩み相談を担当してました。



それ以外はProcessingをはじめとしたクリエイティブコーディングについていろんな方と会話してました。
すごく濃密な時間でした。付き合っていただいた方ありがとうございました。

以下、印象に残ったことを記述していきます。



目次





NEORTとのコラボ企画！

NEORTでPCD2020のハッシュタグをつけて作品投稿すると、投稿した作品が展示されるという企画です。
ワークショップが行われる会場の前で作品展示していました。

右下にQRコードがついていて作品ページにも飛べて、リアルタイムでハッシュタグをつけた作品が反映されるのでPCD中に作った作品も載るという。

でっかい作品が好きな私は終始語彙力が溶けていました。
自分の作品が来たときは うおおおグラデがAZAYAKA！！！最高！！！！ と思ってました。








キーノート


建築・CAD×Processingのお話

物づくりとProcessingの融合に惹かれました。
自分も近いことをやっているので、こういう事例があるのか…と終始驚きっぱなしでした。
細胞分裂の法則を用いたオブジェがPCDから経った今でも自分は結構印象に残っていてあれいいなぁ…と思いながら見てました👀

音楽とアルゴリズムの話

人間のプライドがコンピュータ生成の創造性を認めず常に過少評価される…
というのに共感。
大学で上記のような経験があって、割とこういうことってあるのだなとなんかホッとしたような…。
言語化されてスッキリし、ただただ共感でした。





ワークショップ

キーノートが終わってお昼時にはayakoooさんと控室で打ち合わせをして挙動と使うツールの操作方法を確認していました。

ayakoooさんのワークショップは Processing とAbleton Live を使ったオーディオビジュアルです。
Ableton Liveで演奏されるサウンドをProcessingに送って、それを音に合わせてビジュアルが動くということをやりました。




作品が静止画中心の自分には立ちはだかる壁が多かったのですが、1時間でなんとかなる程度まで持ってきてくださったayakoooさんに感謝です。
新しい知見が広がっていくのが体感でき、今まさにすごくPCDをしてるなと実感しました。


しかし技術的なトラブルとなると覚えたての自分にはカバーが厳しいかもと感じて。
授業開始前に近くにいらっしゃった Santa( ‪@santa_sukitoku ‬)さん に事情説明して「手伝っていただきたい」と申し出たら快諾していただきました。
またワークショップの受付開始時には、ayakoooさんの前のワークショップでサポートしていた yuki hikita( @ihopeenterwased )さん も手伝ってくれました。
あの時はありがとうございました。助かりました…！



講義の前半はインストールと動作確認しつつ基礎と基本の操作方法をやっていました。
講義の後半からは基礎をもとに、カラフルなビジュアルを音と合わせたり、Ableton Liveで音を作っていました。
いろんな人の助けがあって楽しんで挑戦させていただく機会を与えてくださったことが、本当にありがたかったです。 こういう機会は本当に貴重で、このワークショップのサポート担当を機に沢山の視点に触れることができたので、今この瞬間すごくPCDに携わってるなと感じました。
人の温かさに触れたPCDのワークショップでした。





お悩み相談

ワークショップが終わったあとすぐにお悩み相談コーナーへ。
10分で1テーマについて話し合いをするというものでした。
様々なテーマがありましたが、わたしのとこは「いろんな視点をもったたくさんの人たちとクリエイティブコーディングを通して仲よくするためにはどうしたらいい？」でした。

結論やまとめは以下になりました。（引用失礼します）


感想としては、立場問わずクリエイティブコーディングがしやすい環境を整えていくというのが今後非常に大切になってくるのかも…と聞いていて思いました。

その手段の一つとして仲間やコミュニティを形成するというのも当てはまるのではないか…と個人的に思ってます。

あとは初めてクリエイティブコーディングをやる人が少しでも発信できる勇気、作るモチベーションが保てる環境を作る事も大切だと感じました。
何ができるかなわたしには。ブログを編集している今でも思っています。





全体を通して



f:id:ritocopalette:20200225112433j:plain:w400

やさしいせかいでした。
今年は ちにゅり（ @chinyuri_6v6 ）さんデザインのステッカーもいただきました。
ありがとうございます。
周りにProcessingの布教もできますし、Processingのコミュニティもあるという証明になるのでありがたいです。
サイトもメインビジュアルも素敵です…！



nasana( @nasana_x ) さんなど、はじめましての方に会えたのもよかったです。 名刺交換に応じていただいた方もありがとうございました。
じつは密かに楽しみにしていました。
またいろんな人と握手や名刺交換したいですね🤝


また企画者やメインの運営の方々の連携が行き届いていて、安心安全にボランティアに携わることができました。
勇気出してボランティア応募しますと言ってよかったです。ありがとうございました。


お悩み相談では自分のテーブルでも人によって「つくる」ということがどういうことなのかということを語っていた印象も強かったです。
いろんなことを通して投稿する勇気、作る勇気…。
それを踏み出す方法って何があるんだろうか。
やっぱり環境なのだろうか。
わたしは何ができるのか。


新幹線の中でスタバのラテを飲みながらそんなことを考えていました。

【Processing】"Processing iCompiler"と"つぶやきProcessing"で作品制作をしてみた

Processing / p5js



閲覧ありがとうございます。ritocoです。
今年もアドベントカレンダーに参加できたことが嬉しいです！
この記事はProcessing Advent Calendar 2019の21日目の記事です。
前日の記事は WGGさんの「p5.js と reveal.js でブラウザで動くインタラクティブなプレゼンを作る」でした！


目次





この記事を作ったきっかけ

最近の私は大学卒業までの準備の期間でもあるので、目まぐるしいぐらいの毎日を送ってます。
自分のキャパを社会人になる前に知ることができるのはありがたいのですが、クリエイティブコーディング関連の情報を遮断しがちになってしまい情報が追いつけない！いろいろな物事に追われて忙しくて余裕もって試行錯誤すらできない！という壁に当たっています。

それまで恥ずかしがらずに試験的に「とりあえず作り、気軽に残すこと」が習慣化していましたが、久々に制作するとなんだか肩に力が入ってしまったり、過去の自分と作品を比較してしまって手が動かなくなったり、その現状を把握した瞬間からモヤモヤしたり…ということがありました。
自分と似たような境遇の人もいるのでは？と感じたのと、自分への覚書ということであうとぷっちょしていきます。




つぶやきProcessing

手が動かせなくなった私にインスピレーションを！癒しを！！と思ってTwitterへ。
そしたらたまたまタイムラインに流れてきた はぅ君さんの つぶやきProcessing にこれだ！と思いました。
つぶやきProcessingについて、はぅ君さんのツイートを引用させて頂きます。




つぶやきProcessingのいいところは 「コードをTwitter上で気軽にシェアでき、誰もが閲覧できる」 「短いコードで得られる表現の発見がある」 という点です。

ちなみにProcessingアドベントカレンダーの2日目のはぅさんの記事にもう少し詳しく書かれているので、この機会に興味を持った方はぜひ閲覧してみてください！ haukun.projectroom.jp



Processing iCompilerを使ってもっと気軽に制作

今回使用したツールはすべてProcessing iCompilerというアプリです。
ブレンドモードが使えなかったり、コードのどこが間違ってるかハイライトしてくれない…などいろいろな制約があります。

しかし、
「電車の中など場所を選ばずに動かすことができる」
「スマホ上で動かし、それをTwitterにすぐ投稿できちゃう」
 という部分でみるとつぶやきProcessingとの相性がいいなと感じて取り入れてみました。

Processing iCompiler

Processing iCompiler

  • Frogg GmbH
  • 教育
  • 無料
apps.apple.com




つぶやきProcessingの自分の作品例







やってみての感想

1.制作→編集→投稿までがiPhone（iPad）で一貫してできる
自分はiPhoneで制作しているので画面録画機能を使って描画しているところを記録したり、静止画はスクショしてトリミングしたりとiPhoneの機能を使ってTwitter用に編集し、場所を選ばずにすぐに投稿できる流れがあるのが最高です。
私は電車の中でやっていましたが、忙しい中でも隙間をみつけて気軽にできるのはすごく便利です。


2.制約されることで新しい発見が生まれやすい
つぶやきProcessingの１ツイートの文字数という制約と、Processing iCompilerの機能の制約が楽しいです。
特に限られた機能の中でやるのが逆に燃える人や、Processingの導入のお試しとしては場を選ばないなと感じています
この制約のコラボは無限の可能性が広がってそうだなとやっていて思いました。




冬休みに入ったらつぶやきProcessingで作ったものをPCで実行してさらに表現の幅を広げていきたいです…！！
ここまで読んでいただきありがとうございました。

【HELLO neo SHIBUYA】作品が展示されました【NEORT】

GLSL 文章



未だに実感がわかない


helloneoshibuya.jp

prtimes.jp



渋谷駅東口地下広場にてritocoの作品が展示されています。
期間は2019年11月1日（金）～12月7日（土）までです。

NEORTさん、そしてニイノミさん、 携わったすべての方々にこの場ですが感謝を述べます。
このような素敵なご機会をいただきありがとうございます。

ほかのスーパーキラキラクリエイターの皆様の作品に囲まれてとても恐縮です。
しかも1か月の長期。
ぜひ見かけた際はよろしくお願いします…！
以下、作品について。




作品について


渋谷（東京全体にも言えることですが）は
常に多くの情報・人・物が流れて変化し続ける街だなあ…と何回か来て思いました。
それにインスピレーションを受け、広大な海の海面をイメージした作品です。GLSLで制作しました。





作品ができるまで


正直ritocoの作品というよりもニイノミさんとの共作なのでは？
と思うほどニイノミさんを頼っていました。
作品の不具合があったり、ビックサイズのレンダリングでヒヤヒヤしている中、たくさん助けていただきました。
本当にありがとうございます。




最後に


いろんな経験をさせていただくなかで作品展示も１つの目標で夢でした。
初展示が渋谷という街で、アートも展示場所も大きいというのがいまだに実感できないです。
情報が解禁されたとき、１人、研究室で自分の中から何かいろいろ出るんじゃないかと思ったぐらい、うれしくて目頭が熱くなりました。

思えばcreative codingを始めてから、いろんな人のおかげで挑戦させていただくご機会をたくさんいただき、感謝してもしきれないぐらいです。

たくさんの情報・人・物が流れていく中で、作品に目をとめてくれる誰かががいて、その誰かの記憶に残ってもらえたら。
……こんなにうれしいことはないです。

来年から社会人なのでもっと様々なクリエイターさんと交流したいですし、お礼もしたいです。
とりあえず展示されているところを見に行かなくては…！
ここまで読んでいただきありがとうございました。
渋谷でアートもritocoも見かけた際はよろしくお願いします。

【技術書典6】本の表紙のソースコード

文章

f:id:ritocopalette:20190417021312j:plain

思い入れがたくさんある表紙。




感謝

4月14日（日）に行われた技術書典6で、 きゃべさん（@cab_kyabe）さんの本に表紙として参加させていただきました。
ご購入してくださった方、立ち寄ってくださった方、戦利品としてTwitterにあげてくださった方、ありがとうございました。





きゃべさんから「p5.jsを使う」というお話をいただいたときに真っ先に
それなら表紙もp5.jsで作成したい…！ と思ってワクワクドキドキしながら作成しました。

また今回の技術書典が終わったあと、個人的にきゃべさんの 「ml5.jsとp5.jsの楽しさが世に広まればいいなあと思います。」という言葉がとても印象的でした。






そこで、この言葉を受けてp5.jsの良さを広めるのなら私自身も力になれそう！と感じて、 表紙になったソースコードを公開します。
きゃべさんにも許可を頂きました。ありがとうございます。





本の表紙のソースコード

// ml5.jsとp5.jsでつくる機械学習コンテンツプログラミング_表紙



var spacer;

function setup() {

  createCanvas(1000, 1000, P2D);
  rectMode(CENTER);
  pixelDensity();
  noStroke();
  colorMode(HSB,360,100,100);
  background(170, 10,100);

  // 描画する図形の配置をランダムにする
  spacer = random(60,100); 

  // 削除すると図形が点滅
  noLoop();

}



function draw() {

  for (let x = 0; x < width; x += spacer) {
    for (let y = 0; y < height; y += spacer) {

    //図形の色指定
    fill(random(170,210), 85 ,random(20,100));

      //縦横に図形を置いていく
      rect(x + spacer / 2, y + spacer / 2,50,50);
      rect(x + spacer / 2, y + spacer / 2,50,50);

    }
  }
}





実行結果

 

f:id:ritocopalette:20190417025032p:plain


上のソースコードを実行すると並べられた図形の隙間が変わります。
並べられている図形の隙間の密度を変えるだけで見え方が変わってくるのが面白いです。
ソースコード中のnoⅬoop()を外すと図形が点滅してまたこれも面白いです。ちかちか。

 

実際の本と色味が違うのはPhotoshopで表紙用に色味を調整したためです。
また、１つ１つの図形が大きく見えるのは、表紙用に実際に出力した画像の縦横の大きさがかなり大きかったからです。

p5.jsにはお手軽に試せる Web Editor があるので下のURLにソースコードをコピペして試してみてください～。


editor.p5js.org



GitHubにもぺちっとな。
github.com





宣伝

遊び感覚で機械学習に触れてみよう！しかもJavaScriptで、ですよ！奥さん！

っていう本です。

よさげだなーと思った方は、以下のリンクからぜひ！！

 

cabbage63.booth.pm

 

cabbage63.booth.pm

 

 

 

 

 

とらのあな 秋葉原店A 3階でも取り扱っているみたいです。

大きくPOPが貼ってあって驚きました。

一枚一枚気持ちを込めて書いてるとのことなので、とても面白くて素敵だなと感じました。

 

ここまで読んでくださってありがとうございました。

 

 

私とProcessingときっかけ

文章

　
　

なぜこの記事を作成したのか

Processingを始めたきっかけや魅力に気づいたきっかけなど、さまざまな「きっかけ」を今なら言語化できるのでは？と感じ、記事として残そうと思いました。
また過去に募集した質問箱でも「きっかけ」や「理由」を尋ねてくる質問が多かったのもあって具体的に答える形で書いてみます。 ritocoの歴史みたいな視点で見てくれたら幸いです。
　
　 　

目次

　
　
　
　

私について

ritocoと申します。
名古屋に住む大学4年生です。所属してる学部は芸術系ですが、高校・大学の授業でC言語基礎を学んでからProcessingを学びました。
20歳の夏からProcessingや他クリエイティブコーディングで制作した作品をTwitterで投稿してます。
　
2019年2月にはProcessing Community Day Tokyoのワークショップ講師として参加させていただきました。
これを書いている今は Processing×紙表現 に興味があります。
　
　
　

Processingって？

簡単に説明するとコードを書いてビジュアルを生成していくクリエイティブなプログラミング開発環境です。
誰でも無料でインストールして開発することができます。
　

processing.org

　
　
　

Processingを知ったきっかけ

大学2年の履修登録がきっかけです。
シラバスを見て初めてProcessingのことについて触れていたので、ネットで検索したのが始まりでした。
　
　
　

Processingの授業を受講したきっかけ

単位が欲しいので流れで履修しました（直球）
しかしProcessing独特の座標の概念でつまづき自信喪失。
　
　
座標が何が何だかさっぱり
→　円を描いたのに、半円 しか表示されない
→　なんか円が消えたんだけど
→　もういいー飽きたー
　
みたいな感じで、履修申請をし直せる期間だったこともあり、単位取るのを諦めようと考えました。
　 　
でも
・先生が優しそうな方
・課題を出されると自分で理解してしっかりやらなきゃ感がある
・Perfume大好きな親友が目を輝かせながら「これ最後までやるわ！」と言ってる
・3年には単位をちゃんと取りきりたいという目標があった
という理由で、なるようになる！ な状態で受けていくことにしました。 　
　
　

Processingの魅力に気づいたきっかけ

プログラミングで何か表現ができた
という実感が初めて湧いたのが3回目の講義です。
Processingの図形処理を使ってパターン作るという内容で、課題は4種類のパターンを作って次週提出という内容でした。
　
楽しさに気付くまでは、先生から与えられたサンプルコードの値をスライド通りに打っていく「作業」になってて微妙でした。
しかし先述した「しっかり自分で消化して完成させなくてはいけない」という気持ちがとにかく強く、思いつきで、どうなるのかをひたすら試していくことにしました。
　
　
例として
　
「四角と丸を同じ画面で表示させてみよう」
　
「いつぞやの授業でやったカラーコードで色を指定できるみたいだから、カラーコード調べてみよかなぁ」
　
「調べてみたらforはCでも繰り返しだったけど、ここでも同じだから図形は繰り返されるかも？」
　
「透明度が色の濃淡なら、それを変えたら色の重なりでかわいくなるんじゃ？」
　
「あ、じゃあ丸の大きさとか大小で表現を変えても面白そう」
　
　
のように 　
「ちょっとした思いつき→ 動かす → 発見」 　
のProcessing無限ループにいつのまにか楽しくハマって、図形処理の概念やProcessing独特の座標処理に慣れていきました。
当時の作品はこんな感じ。
　
　

色が強い丸のパターン 　
　

具体的なものにチャレンジしたくて黒猫 　
　
　
円さえも描けずに挫折しかけましたが、Processing無限ループのおかげでしっかり何か表現できるようになりました。
このような成長が目に見えてわかるのがProcessingのよさだなと当時、感じてました。
　
　
　
　
　

Processingで自主制作したいと思ったきっかけ

上で述べたProcessing無限ループにハマり、Processingの作品を壁紙にしたら面白そうと思って、他にもそんな人がいないかなと調べてみました。
そしたら、当時大学生だったなめらかサンショウウオさんがすでにやって記事にしてるのを見つけました。
　
当時、Processingの作品を自分で調べたら今よりも海外の方の作品がよく検索で引っかかっていました。
その中で当時のなめらかサンショウウオさんのブログを見たときは
　
「日本にも自分と同じ年齢で作る方がいて、壁紙にしたら面白いという考え方の人がいる…！！」
　
という親近感が湧きました。
そして、Processingから生み出された今まで見たことない不思議なグラフィックに感化されて、私もこんな風に作ってみたいと強く思いました。
いつか、この方に 「ありがとうございました」 って言いたいなと当時からひそかに思ってました。
　
　
　
　
　

Processingを深く学ぶ・知ることになったきっかけ

毎週課題をこなすなかで
どうせやるなら周りと差をつけたい
すこし変わったことをしたい
と、当時は思ってたので色々調べて、以下をすごく頼りました。

　
　
公式のリファレンス

processing.org

Processingの辞書的な役割でした。
英語なのでGoogle翻訳を使って訳してました。 　
　
　
だらっと学習帳

blog.livedoor.jp

レオナさんが運営してるブログです。
当時の私は幾何学や図形処理パターンが面白い！と感じてたので、丸や四角以外はどうやって作るのかなと思ってた時に以下２つの記事を特に参考にしました。
　
qiita.com

blog.livedoor.jp 　
　
　
Processing 学習ノート

www.d-improvement.jp

表現の幅を広げるためによく利用してました。 サンプルコードが多いのでコピペして実行みたいなことを講義の時間によくやってました。 　
　
　
yoppa.org

yoppa.org

田所 淳さんのProcessing資料です。 毎週出される課題を乗り切るために参考にしました。
上のリンクから講義ノートの部分を見ると、他大学の授業資料が表示されます。
当時の講師の授業資料＋この資料で講義を受けていました。 　
　
　
　
また、大学の図書館にも2冊ほどProcessingの本があったので、それも目を通すことにしました。 　
　
・[普及版]ジェネラティブ・アート―Processingによる実践ガイド

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

Amazon

　
・Processingをはじめよう

Processingをはじめよう 第2版 (Make: PROJECTS)

Processingをはじめよう 第2版 (Make: PROJECTS)

Amazon
　
　
コードや長い文章よりも、ジェネラティブアートというものがあることや、使い方次第でたくさんのことができるところに魅了されてたので、Processingを深く知るきっかけになりました。 　
　
　
　

Processing作品を投稿しようと思ったきっかけ

課題違反がきっかけです。
受講していたProcessingの講義の最終課題はデータビジュアライズでした。
Processingで統計や、時間などデータを読み込んで可視化するというのが課題の内容です。
　
　
周りのほとんどの人が授業についてけなくて、サンプルコードをいじってギブアップ。私もその1人でした。
それだと後味が自分の中で悪かったので、少しでもProcessingに興味と熱があるということを示したくて、ジェネラティブアートっぽいのを提出しました。
　
　
今思えば芸術系の学科で最終課題で課題違反しにいくというクレイジー決断で落単も覚悟してました。
結果、熱が伝わったのか通って、先生からも
　
「今後もやってみなよ」
　
と言われて、夏休みを使ってProcessing制作に取り組むことになりました。
　
　
　
　
　

今日までのアウトプットのきっかけ

最初はInstagramでほぼ毎日投稿していました。
いろんな海外の人からコメントやメッセージをいただいて、それが励みになり、毎日投稿するキッカケになりました。
　
　
www.instagram.com 　
　
なんでInstagramなのかというと、当時のGoogle検索結果と絵の雰囲気から、海外の方にウケそうと感じていて、 Twitterよりも海外の方が集まりやすいInstagramで以下のアートを投稿してました。
　
　

　
Twitterもついでで始めたのですがInstagramの方が絵文字でのコミュニケーションが盛んで好きだったのと、 ビジュアル重視の投稿が多く刺激を受けたのでInstagramをメインに初期は活動をしていました。 　
　
　
次に冬休み。
夏休みの作品を見返して、線表現がジェネラティブアートっぽかったので自分でもっと簡単にできないかなと感じた時です。
ジェネラティブアートのウィキペディアに、複雑なアルゴリズムの考案なんたらかんたら…とお堅いことが書かれてて、頭の中がパンケーキなJD ritocoとしては複雑じゃないものをやりたいと感じてできたのが以下のアートの仕組み。 　
　
https://ritocopalette.hatenablog.com/entry/2018/04/29/173328?_ga=2.22151804.638529283.1554304321-375514223.1554113441ritocopalette.hatenablog.com 　
　
四角とか線を回転させてマウスで動かすだけ。
回転の速度を変えたらまた違う表現になる。
これができたときはすごく感動しました。 これを応用したのが以下のアートです。 　
　

　
　
（見るたびにiPhoneのごみ箱のスクショで恥ずかしい…）
こんなにTwitterでいいねをもらったのは人生で初めての経験だったので、とても驚きました。
このツイートを引用RTしてくれた方々から「アウトプットしていくことが大切」「今まで制作してきたものは駄作でも残しておく」というのを学んで、今日のritocoに至ります。 　
　
　
　

様々なきっかけがあって

過去に質問箱でいただいた様々な質問に、具体的に答える形で書いてみました。
最近ではProcessingが授業に組まれてることが増えてきているみたいなので、 もしかしたら自分と似たような境遇の方がいるかもしれないです。 その方に少しでも参考になったり、何か希望を見出せたならうれしいです。

トライアンドエラーをして、何かをアウトプットしていく・発信していくことが大切だなと様々なきっかけを経て思いました。
ここまで読んでくださり、ありがとうございました。
これからもよろしくお願いします！

twitter.com

Processing Community Day 2019 東京！

文章

f:id:ritocopalette:20190203211528p:plain

ritocoです。
Processing Community Day 2019 Tokyoの個人的な感想を熱が冷めないうちに書きます。


目次




イベントの概要


Processing Community Day（プロセッシング・コミュニティ・デー） とは？

Processing のユーザーの交流イベントで、アートとプログラミングのコミュニティの多様性を祝って世界各地で2019年1月15日から2月15日の間に開催されます。東京では2019年2月2日に Yahoo! LODGE にて開催されます。Processing のパイオニアや若手アーティストらによる講演やワークショップを通じて、クリエイティブなハックやアートに直に触れることができます。（Processing Community Day Tokyoの公式サイトより引用）


そもそもProcessing（プロセッシング）とは？

マサチューセッツ工科大学メディアラボ発祥の教育用プログラミング言語で、世界中で親しまれています。プログラミングの入門だけでなく、メディア・アートや科学研究など幅広い分野で用いられています。（Processing Community Day Tokyoの公式サイトより引用）

場所はYahoo! LODGEで行われました。
とにかく開放的で居心地がよかったです。
お菓子をもぐもぐできて、ゆるーい空気が流れていたのが印象的でした。





感想



１.全体的な感想

「最高」「生きててよかった」「救われた」ですね。
日常生活の中でProcessingやp5.jsを周りでやっている方って少ないと感じています。
Processingの講義は私の通う大学でもあったのですが、それが終わって以来、触っている方はほんの数人。

その中で今までずっと１人で正しいかどうかわからないまま突っ走ってきたので、会う方１人１人に「いつも見てます」と感想を直接言われるのはやっぱり救われました。
加えて、忙しい中、寄せ書きに応じてくださった方々に感謝です。
新幹線で一言一言読んでいたら嬉しくて目頭が熱くなりました。
一人じゃなくて、応援してくださる方がちゃんといると実感が湧きました。
ありがとうございました。




２.人生初のワークショップ（の講師）でした。

最初は機材のこともあって、バタバタしましたが無事に着地出来てよかったです。
人生初の講義でした。私自身もめちゃくちゃ学ぶことが多かったです。もう学びの宝庫です。

人にどうやったら伝わるのか、明確に人に課題を与えるためにはどうしたらいいか。
普段一人で「たーのしー！ エモーい！！」と語彙力をなくしてやっているので、その視点を持つことができたのが良かったです。
人に教えることはこういうことなのかと肌で体感できた貴重な機会でした。
梶田さんのフォローがめちゃプロかったです。
受付で写真撮影にも応じていただきありがとうございました。

また、参加してくださった方がワークショップ中にリラックス！と声をかけてくれたのも救いでした。
いただいた名刺も嬉しかったです、大切に保管します。
助け合いが当然という優しい世界。
ただただ優しい世界に触れることができて心が浄化されました。
スライドもう少し待っててください。追加のサンプルも編集中です。

【追記】2019/02/04に公開しました。よろしくお願いします。　　

github.com





３.なめらかサンショウウオさんに感謝を述べることができた


f:id:ritocopalette:20190203215758j:plain
（お互いが講師、アツい）
ritoco誕生のキッカケを与えてくださったなめらかサンショウウオさんに直接

「人生を変えてくださってありがとうございました」

と伝えることができてよかったです。
個人的にひそかに抱えてた目標。嬉しい。

「ritocoさんがTwitterに現れてからProcessingの空気が変わった。自分も久々に触ってみようと思った」
と言われたのがもう…（涙腺崩壊）

なめサンとは、ここぞというときだったのでたくさんお話しました。
初対面なのにとにかく話しやすかったです。
共感できることがとても多かった。切ないことも嬉しいことも楽しいことも面白いことも。
いろいろ良くしていただいてありがとうございました。
うぉ～（歓喜）



４.そのほか思ったこと


・「Processingを知ってる方が意外にも多かった」
イベントなので、周りはProcessingやってる・知ってる方は多いですが、自分が思っている以上に多かったのが印象的でした。 ２年前に私が本格的に遊び始めたとき、Processingの作品は海外の作品が多かったです。 こういうことって海外の方にウケるものなのかなと当時、女の勘で思っていたのでProcessingの国内の認知度が高いことに驚いたし嬉しかったです。 もっと国内で普及するように努めていきたいと感じました。


・「Processingユーザーの幅が広い」
LTでProcessing×好きなこと（もの）みたいなスライドが印象的でした。
名前を挙げたいけど忘れてしまった。
その通りだなあと思える多様な考え方と多様な価値観とProcessingを使った応用力。
一人一人のProcessingのカタチを見ることができて、どれも魅力的でした。


・「母にTwitter、父にInstagramを監視される」
このイベントが終わってなぜ東京に行ったのかを両親に聞かれたのでPCDのことを伝えました。
結果SNSの監視されました。SNS二段構えですね。
これからは両親も見ていると思いながら発信します。時代だな……。




最後に

運営の皆さん、ボランティアスタッフの皆さん、人生初のワークショップを受講していただいた方、ご来場していただいた方、ノートに書いてくださった方、本当にありがとうございました。これからも遊びながらProcessingをはじめとしたクリエイティブコーディングをやっていきます。
これからもよろしくお願いします。



ProcessingでGLSLを実行してみた

GLSL 文章






はじめに


ritocoです。
今回はProcessingでGLSLを実行してみました！

自分がまとめるにあたって
以下のサイトを参考にさせていただきました。

https://solo-p5.tumblr.com/post/126177663372/processing%E3%81%A7%E3%82%B7%E3%82%A7%E3%83%BC%E3%83%80%E3%83%BC%E6%9B%B8%E3%81%8F%E3%81%9E
solo-p5.tumblr.com
thebookofshaders.com



画像はすべて2019年1月1日のものです。







早速やってみる


到達目標はこんな感じです。

f:id:ritocopalette:20190102221525p:plain



１　Processingに以下のソースコードをコピー


PShader shader;

void setup() {
  size(640, 360, OPENGL);                              //Open_GL対応した横640px * 縦360pxのカンバスを生成
  noStroke();                                            
}

void draw() {
 
  shader = loadShader("shader.frag");             //shader.frag（シェーダーファイル）を読み込む。
  shader.set("resolution", float(width), float(height));
  shader.set("mouse", float(mouseX), float(mouseY));
  shader.set("time", millis() / 10000.0);                    //shaderの速度
  shader(shader);
  rect(0,0,width,height);                                 
}



f:id:ritocopalette:20190102225847p:plain
貼り付けたらこんな感じになると思います。



やってて気づいたのですが 

  shader.set("resolution", float(width), float(height));
  shader.set("mouse", float(mouseX), float(mouseY));
  shader.set("time", millis() / 10000.0);



The Book of Shadersからそのままコピーしてしまうと
この３行の"resolution"、"mouse"、"time"が原因で動かない…みたいなことがありました。
u_mouseなどになっているので"u_"の部分を消しました。




２　Processingファイルを名前つけて保存する



f:id:ritocopalette:20190102221455p:plain

コピーしたProcessingのスケッチ（ソースコード）をそのままの名前で、必ず自分がわかる場所に保存。



３　GLSL Sandboxにアクセス


f:id:ritocopalette:20190102221501p:plain



４　タイトルのすぐ下の「creative new effect」をクリック


f:id:ritocopalette:20190102221505p:plain



５　デモ画面のソースコードをすべて選択してコピー


f:id:ritocopalette:20190102221509p:plain

全部しっかりコピーしないとエラー出るので注意です。
私は一番最後のカッコをコピーせずにやらかしました。確認大事。



６　テキストエディタにコピー


f:id:ritocopalette:20190102221515p:plain

私は今回Atomを使用しています。



７　「shader.frag」で２で作ったProcessingフォルダに名前を付けて保存



f:id:ritocopalette:20190102221519p:plain


８　Processingを開いて実行（再生ボタン）を押す


f:id:ritocopalette:20190102221522p:plain
ドキドキ。



９　できた！


f:id:ritocopalette:20190102221525p:plain






おわりに


自分での覚書でもあるので、ざっくりまとめてみました。
このshader.fragのファイルの中に自分で制作したGLSLを書くと、それがProcessingでも動きます。

閲覧ありがとうございました！