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
73
つぶやきProcessingをしよう
akatsuki1910
December 08, 2022
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
後輩に伝えたいこと
akatsuki1910
0
2
難解(かもしれない)言語
akatsuki1910
1
27
Reactのチュートリアルをしよう3
akatsuki1910
0
13
クソドメインを取ろう
akatsuki1910
0
26
Reactのチュートリアルをしよう2
akatsuki1910
0
13
HTMLとCSSとコンポーネント
akatsuki1910
0
17
Reactのチュートリアルをしよう
akatsuki1910
0
15
そのコレクション合ってる?
akatsuki1910
0
17
第3回 TypeScriptを使おう
akatsuki1910
0
10
Other Decks in Technology
See All in Technology
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
140
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
190
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
AWS CodePipelineでコンテナアプリをデプロイした際に、古いイメージを自動で削除する
smt7174
1
120
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
480
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
君は隠しイベントを見つけれるか?
mujyun
0
300
新卒1年目が向き合う生成AI事業の開発を加速させる技術選定 / ai-web-launcher
cyberagentdevelopers
PRO
7
1.5k
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
Featured
See All Featured
Code Review Best Practice
trishagee
64
17k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
GraphQLの誤解/rethinking-graphql
sonatard
66
10k
How GitHub (no longer) Works
holman
311
140k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Teambox: Starting and Learning
jrom
132
8.7k
Typedesign – Prime Four
hannesfritz
39
2.4k
A Modern Web Designer's Workflow
chriscoyier
692
190k
Automating Front-end Workflow
addyosmani
1365
200k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.6k
Facilitating Awesome Meetings
lara
49
6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
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をしよう ご清聴ありがとうございました