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
110
つぶやきProcessingをしよう
akatsuki1910
December 08, 2022
Tweet
Share
More Decks by akatsuki1910
See All by akatsuki1910
業務を効率化させるためのAIツール3選(超実践編)
akatsuki1910
0
14
後輩に伝えたいこと
akatsuki1910
0
4
難解(かもしれない)言語
akatsuki1910
1
31
Reactのチュートリアルをしよう3
akatsuki1910
0
15
クソドメインを取ろう
akatsuki1910
0
33
Reactのチュートリアルをしよう2
akatsuki1910
0
15
HTMLとCSSとコンポーネント
akatsuki1910
0
19
Reactのチュートリアルをしよう
akatsuki1910
0
18
そのコレクション合ってる?
akatsuki1910
0
22
Other Decks in Technology
See All in Technology
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
180
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
220
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
220
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
30→150人のエンジニア組織拡大に伴うアジャイル文化を醸成する役割と取り組みの変化
nagata03
0
180
OPENLOGI Company Profile for engineer
hr01
1
20k
EDRの検知の仕組みと検知回避について
chayakonanaika
12
5k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
300
IAMのマニアックな話2025
nrinetcom
PRO
4
930
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
380
Snowflake ML モデルを dbt データパイプラインに組み込む
estie
0
100
Featured
See All Featured
Designing Experiences People Love
moore
140
23k
Speed Design
sergeychernyshev
27
810
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Rails Girls Zürich Keynote
gr2m
94
13k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Being A Developer After 40
akosma
89
590k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
KATA
mclloyd
29
14k
Typedesign – Prime Four
hannesfritz
40
2.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Fireside Chat
paigeccino
34
3.2k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.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をしよう ご清聴ありがとうございました