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
44
Reactのチュートリアルをしよう2
akatsuki1910
0
18
HTMLとCSSとコンポーネント
akatsuki1910
0
25
Reactのチュートリアルをしよう
akatsuki1910
0
23
Other Decks in Technology
See All in Technology
microCMSではじめるAIライティング
himaratsu
0
120
AWS CDKの仕組み / how-aws-cdk-works
gotok365
10
890
ポストコロナ時代の SaaS におけるコスト削減の意義
izzii
1
260
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
210
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
Claude Code に プロジェクト管理やらせたみた
unson
8
4.9k
Copilot coding agentにベットしたいCTOが開発組織で取り組んだこと / GitHub Copilot coding agent in Team
tnir
0
150
ゼロからはじめる採用広報
yutadayo
4
1k
伴走から自律へ: 形式知へと導くSREイネーブリングによる プロダクトチームの信頼性オーナーシップ向上 / SRE NEXT 2025
visional_engineering_and_design
3
230
LLM時代の検索
shibuiwilliam
2
640
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
510
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
640
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Optimizing for Happiness
mojombo
379
70k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Navigating Team Friction
lara
187
15k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Typedesign – Prime Four
hannesfritz
42
2.7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
It's Worth the Effort
3n
185
28k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Making Projects Easy
brettharned
116
6.3k
Speed Design
sergeychernyshev
32
1k
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をしよう ご清聴ありがとうございました