yoppa.org

SFC – デザインとプログラミング 2020

動きを生みだす – アニメーションとベクトル

今回からいよいよ動きのある表現（= アニメーション）について扱っていきます。アニメーションを実現するには、まず時間を扱う基本構造を知る必要があります。p5.jsでは、setup(), draw() という2つのブロックにわけて、初期化と更新を行うことでアニメーションを実現しています。まず始めはこの基本構造について理解します。次に、これから動きを扱う際に、向きと大きさをもった「ベクトル」という概念を理解します。ベクトルを理解することで、位置や運動を整理して記述することが可能となります。最後に、この基本構造をベクトルを活用して簡単なアニメーションを作成します。

映像資料

スライド資料

本日の課題

本日の最終のコードを改造してプログラムにランダムな要素を追加してください

  • 例:
    • 円の色をランダムな色に
    • 円の大きさをランダムに
    • (応用) 円の動きをランダムに

OpenProcessingにタイトルをつけてアンケートから投稿してください。

今回から投稿する際にタグをつけて投稿します。今回のタグは「sfc_desipro201030」にしてください!

アンケートフォーム

提出課題

人気TOP5

おめでとうございます!!

Home Work２, チカチカ, まる, しゃぼん, 近づいたり離れたり…, 震える青　（反発面のランダム）, Shiva, Shiva, party, balls, NeonFlashDisappear, DesiPro_4_w_1, cider, エントロピー増大則, 目にわるそう, Blue Random, Reflection, hanabidayo, DiScO, 咲き乱れ, 重力ダンス, Moving Lights, あきのむし, random red, 課題1030, 寒さに弱い球体, Color Cells, 変身！の時のやつ, Gambler, イモムシ, Busy, Rain Drops, hotal, Random Sketch3, 図形たち, 加速するキャンバス, Dance Floor, へこむカラフル粘土, そして誰もいなくなった, My Sketch4, 迷子, 打ち上げ花火, ランダムな楕円, めがやばい, 色変バウンド, 炎の呼吸, ランダムアニメ, サーチライト, 銀河間航行 / INTERGALACTIC TRAVEL, 良い事, 青空を舞い上がる風船, Summer Candies, Spark, 煌めき, 散る桜　残る桜も　散る桜, little boxes bouncing in the present box, UFO, 頭に浮かんだ考えがまとまる過程, 鳥は嫌い、夕焼けは好き, scatter, Candy Cosmos, night, Psychedelic Bubble, 走馬灯, munimuni colorful, random particle, Paint it green, 弾幕シューティング　作ってみた, Hotaru, Ramdom Circle box, ランダムな円の動き, bubble, 弾幕シューティング　作ってみた, Jellyfish, ほたる, ランダムアニメーション, ステージライト, ゲーミング円, イルミネーションの世界, Sunrise & Sunset, 恐怖, Ceiling Lighting, Daydreaming, Curve Splash, ゲーミングラインアート, Can you find it?, 蛍, 課題３, 変色, sample, ぷにぷに, Jump in to water, It becomes snow, teamlabo, 1103practice, Inside Blood Vessel, Candy Pop, Sphere of Gravitation, 目を閉じたら見えそうなやつ, 10/30課題, 青の爆発, Vivid line, 今年のクリスマスツリー, A, Colorful Network, Ugoku kawaii Bubbles, 何度もリロードしてね, SPONGEBOB_Shake, 不可侵, Connection, とにかく / どんな方向にも, 円と見せかけて円, sea, onetime, チカチカする, 炒飯/Fatal_Miss, M & M, Random color&size, Raindrops, カラフル爆散, RandBalls, Paint Ball, Surface, てーーーテーれてれれー, Rotating Balls, 時々荒ぶる玉ども, 牛乳とコーンフレークのワルツ, Shibuya Crossing, 輝き, kadai03, 儚い流星群, 動く目, LET’S PARTAYYY, Flicker, 変な変な花びらみたいなやつ, Bound and change, 火花, びっくり箱, タピオカ　逃げろ！！！, Randomness(epilepsy warning), 変容, Ball Animation, bouncing ball, 仕分け, insect, 輝, ランダムde動くball, ???, チカチカ, sakura, In every direction, たくさんの二色, poping shower, にじ爆発, Randomness, RandomRandom, random size and color, Party time, イルミネーション気分, …vinnel, らんだむ, Click, Circle n Square, Dream-pop, 攻防(何回かリロードしてみてください。), 夏祭り, edmな雨, 幻覚, microOrganisms, animation_circle&rect, 世界貿易の可視化, 単から群 -数の限界-, 課題, bombombom, 迷子の銀河, アニメーションとベクトル, mysktech03, Laser, Cherry Blossoms, CPUish thingy, 円大きさ速度跳ね返りランダム, ぎょろぎょろはみんなが来るのを待っている, sodapop, My First Animation, 初めてのアニメーション, particle01, シャボンbubble, Autumn, 動かないんですけど、どこが間違っていますか？, RGB Circle, 蝶, Some Flavors, 蛍, Let it snow tonight, Time change, My Sketch2, Suspicious behavior, Home Work3, rainbow drops, wriggle cells, 1105, ばばばばばばばばばばばばばば, 暗闇の中の光, ボーナスステージ, 次世代線香花火, 泡, random, シャボン玉が弾けた後, 蛍と月の光, 特になし！, ランダムな色と大きさの円, Hotaru, 出来損ないクリスマス, 蝶々, 泡, Club House in the Showa period, fireworks, 壊れたテレビ, bLue, balls, 妖しく光る玉, 寄生虫, カラフルボール, More Rain, building, 発散と吸収, 寂しい雨, ぱらぱら, Blood, 百花繚乱, デザインとプログラミング, 円のばらつき, こうもりの群れ, odrmna, pearly party, 銀貨, Summer Night, Polka dots_random, ドキがムネムネ