Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
つぶやきProcessingをしよう
Search
akatsuki1910
December 08, 2022
Technology
0
140
つぶやきProcessingをしよう
akatsuki1910
December 08, 2022
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
お前、GCってまあ別に気にしなくていいだろって思いながらwebサイト作ってるだろ
akatsuki1910
0
9
業務を効率化させるためのAIツール3選(超実践編)
akatsuki1910
0
31
後輩に伝えたいこと
akatsuki1910
0
18
難解(かもしれない)言語
akatsuki1910
1
36
Reactのチュートリアルをしよう3
akatsuki1910
0
26
クソドメインを取ろう
akatsuki1910
0
43
Reactのチュートリアルをしよう2
akatsuki1910
0
18
HTMLとCSSとコンポーネント
akatsuki1910
0
25
Reactのチュートリアルをしよう
akatsuki1910
0
23
Other Decks in Technology
See All in Technology
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
460
shake-upを科学する
rsakata
6
580
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
320
american airlines®️ USA Contact Numbers: Complete 2025 Support Guide
supportflight
1
110
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
410
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
270
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
450
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
The Invisible Side of Design
smashingmag
301
51k
Unsuck your backbone
ammeep
671
58k
Music & Morning Musume
bryan
46
6.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Agile that works and the tools we love
rasmusluckow
329
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Transcript
つぶやきProcessingをしよう @lali
自己紹介 • 所属 : OPwebフロントエンジニア • AWSは何もわからない 最近上手く割れなかった割り箸 →
つぶやきProcessingとは
Processingとは 電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境 (IDE)である。アーティストによるコンテンツ制作作業のために、詳細な設定を行う関数 を排除している。 視覚的なフィードバックが即座に得られるため、初心者がプログラミン グを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Java を 単純化し、グラフィック機能に特化した言語といえる。 - Wikipedia
みんな大体p5.jsを 使っている Processingのロゴ p5.jsのロゴ
「#つぶやきProcessing」をつけて 280字(タグを除くと261字)でプログラムを書いて 何か良さそうなアレを作ろう
None
None
None
None
279文字
494文字 ここから短くしていきます
←① 最初のセットアップ(1回) ←② 毎フレーム描画(ループ)
t: 毎フレーム呼び出し background: 背景色 bezier: ベジェ曲線を作る ① ② ③ ④
① ② ③ ④ 六角形になるように座標指定 ベジェ曲線を作成
• let, const, functionの宣言を全部消す • let, const ◦ 無くても宣言できる ◦
再宣言も上書きも出来る • function ◦ アロー関数にすることで変数のように扱う
• 関数を省略可 ◦ アロー関数は1行の時returnがいらない • 関数,関数式,無名関数,即時関数... ◦ 関数にも色々ある ◦ thisの扱いで戸惑った方も多いはず
• JSにはシード値が存在しない ◦ 一意に定まるランダムな値は自分で作る しかない ◦ どのような乱数を用いるかは実行環境依 存のため
• setupを消す ◦ createCanvasは1回だけ呼び出し
閑話休題 ~ORの扱いについて~ • 前がtrueの場合は後ろを見ない ◦ pythonも同じ挙動をする ◦ 初期値を入れれる理由はそのせい ↑”a”は見てない
• tは最初は0 ◦ つまりcreateCanvasが呼ばれる • その後は0ではない ◦ つまりcreateCanvasは呼ばれない
• 値を変数化 ◦ 関数の引数内で行う • =は単純代入演算子 ◦ ただの演算子なので値が帰っ てくる ◦
a=b=0みたいなのができるの もそのおかげ
• 同じ式をまとめる ◦ s→vの順でしか呼ばれないのでzは 1回しか更新しなくてよい
• アロー関数の引数の値を用意 ◦ 引数の用意をするのは勝手なので
• 関数の引数に処理を突っ込む ◦ ワンライナーに出来る
• スペースを消す
• 共通化
363文字
つぶやきProcessing Editorを使う • コードを短くしてくれるすごいやつ • 特に改行を消してくれる • gifも生成出来る • JSはセミコロンorコンマがあるとワンライナーにできる
つぶやきProcessing Editorを使う 284文字
つぶやきProcessing Editorを使う 284文字 😢
どうしろって言うんだよ~~~
なんか共通化出来そう?
• 共通化 • ついでに小数を省略
🤔
閑話休題 ~スプレッド演算子~ • スプレッド演算子 ◦ C#に同じものがある ◦ pythonだとスター演算子にあたる? • よく配列の中を展開して新しい配列を作るのに使
われる ◦ ディープコピーが面倒な時に役立つ
閑話休題 ~スプレッド演算子~ • 実は引数にも用いることが出来る ◦ 残余引数とは違うので注意! ◦ 配列の長さは65536個まで!
閑話休題 ~スプレッド演算子~
• 関数で配列を作ってスプレッド演算子で吐き出す
279文字 🎉
つーいと
つぶやきProcessingの良さ • 用意するものがない ◦ 環境構築もいらない
つぶやきProcessingの良さ (仕事編) • 知らない言語仕様を知る機会を得れる ◦ 実はJSはCと深い関係が... • 数学の知識を無理やり使う ◦ sinとかcosとか急に使えない
• 業務に支障が出る書き方を知れる ◦ あらかじめeslintなどで防げる • ビルドされたコードを人力逆ビルド出来る
つぶやきProcessingの良さ (仕事じゃない編) • 少ないプログラムをちょっとの時間で書くだけなので日をまたぐ必要がない ◦ ずっと同じものを作り続けなくていいので切り替えがしやすい • Processingに慣れることが出来る ◦ three.jsやpixi.jsに応用出来る
◦ 処理順序やメモリ管理に敏感になる • ビジュアルプログラミングにはまる ◦ 世の中には「#つぶやきGLSL」とかいう変態タグがあるとか ...
つぶやきProcessingをしよう ご清聴ありがとうございました