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
150
つぶやき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
27
クソドメインを取ろう
akatsuki1910
0
44
Reactのチュートリアルをしよう2
akatsuki1910
0
19
HTMLとCSSとコンポーネント
akatsuki1910
0
25
Reactのチュートリアルをしよう
akatsuki1910
0
24
Other Decks in Technology
See All in Technology
【新卒研修資料】数理最適化 / Mathematical Optimization
brainpadpr
29
14k
datadog-distribution-of-opentelemetry-collector-intro
tetsuya28
0
100
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.3k
生成AI活用のROI、どう測る? DMM.com 開発責任者から学ぶ「AI効果検証のノウハウ」 / ROI of AI
i35_267
3
120
結局QUICで通信は速くなるの?
kota_yata
8
7.4k
Intro to Software Startups: Spring 2025
arnabdotorg
0
270
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
130
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
180
AI関数が早くなったので試してみよう
kumakura
0
330
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
3
1.6k
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
170
UDDのススメ - 拡張版 -
maguroalternative
1
610
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Gamification - CAS2011
davidbonilla
81
5.4k
Thoughts on Productivity
jonyablonski
69
4.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Six Lessons from altMBA
skipperchong
28
4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.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をしよう ご清聴ありがとうございました