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

かたちとコード – p5.jsで図形を描くには?

October 13, 2020

この講義では、p5.jsを使用してコードによるデザインを行います。その最初の一歩として、コードによって「かたち」を描くにはどうすれば良いのか考えていきます。

まず始めに、1950年代〜70年代の、コンピューター黎明期から発展期におけるコード（プログラム）による様々な視覚表現について紹介します。過去の作家がどのようなアイデアで、何を表現しようとしてきたのか、その歴史を辿ります。

後半は、そうした歴史を踏まえた上で、 p5.jsで実際に図形を描いていきます。まずp5.jsの操作基本を解説し、簡単な図形を描きながらp5.jsでのプログラミングの基本を学びます。

動画資料

スライド資料

かたちとコード – p5.jsで図形を描くには?

本日の課題

テーマ: 「p5.js基本図形と色による画面構成」

ここまで解説したp5.jsの機能を活用して画面構成をしてみましょう

完成したら何かタイトルをつける
座標、色、数値による図形の描画に慣れるのが目的です
完成した作品はOpenProcessingに投稿してアンケートフォームからURLを提出
次回の授業の冒頭で簡単に作品をいくつか紹介します

アンケートフォーム

提出課題

人気TOP5!

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

Glow map, Moon Flower Box (硯箱), My First p5.js, RandomNodes, My first p5.js, 白黒の日本, BlackOut, Route 66, 初めてのp5js, 箱の中の楕円、そして線, 愛車, Euclidean algorithm, Shapes and Code, My first p5js, おでん, poker face, Grape, Programming NOW, Confused Robot, Equilibrium , 重なるシカクでも丸, note, 鬼滅の刃, 平面を貫く線, My First Sketch, go, Blink, hello p5.js, なんでもいい, 弾幕ゲームの絵, My Sketch, ganbatta.pink, 万華鏡, マクスウェルのp5.js, Homework No.1, Class-2-H.W., My Sketch1, なんちゃって平面充填, Home at night, 自然, アンパンマン, ヨルダンの国旗風, my sketch, 顔, 立体にに見えないこともない平面図形, RedPyramid, helmet, Quest Too Long, バルーンアート, ドラえもん, 骸骨, 野球のダイヤモンド, MY　FIRST　PINKBACK, おさかな, 土星, INFANCY, Doraemon, first sketch, My Water, Micky, カメラ, Honda RA272 F1 Car, Night Sky, DesiPro_2_w_1, 蜂, Netflix Logo, 黎明, my face, colorful dots, My first Sketch, Eye, おでん　-The First Take-, Cube that responds to temperature changes, Solar System, 焚火, ハロウィン, 隕石と人工衛星と地球, MachineEye, Cinderella Castle, 紙吹雪, cat, Now loading…, MARIO, サイケデリック, flower, フリーメイソン？, BOCHK tower, DORAEMON, Notepad, Feeling of High, japan, confusion, My first p5.js, 紫色人種, 波, Bubbles, 紙パックパクパク, 洒落た花瓶の模様, みっきー, First p5.js, My first p5.js　(cat), 超薄目で見れば三色旗, Light in Gloom, ミルフィーユ, chon, Smile, 草, watermelon, Doughnut, 四角と丸のぶつかり, 既視感, 1016, snowman, My First p5.js , Noise Practice 01, cryingman, Teaching Robot, circles, Black Hole, Orange, triangle mountain, smiley&tricolore, KaNaShi, Generation, A day, Cat, circleee, 波, ピエロ, Simple Micky, Upto you, W◯indow&Ubuntu Logo, “T”, Many Shades of Blue, よく見ると顔, ダーツ, 「「アンパンマン」」, Autumn Sparkles (秋のきらめき), SFC, 直線, dp_01, ブサイクなネコ, Switch, ellipse light, 赤と白と黒のマス目, Falling Petals, Eye, My Sketch #1, DORAEMON, 夏蛍, Light Bulb, Snowman, The Flag of Japan, Ol’ Tartan, heavy, My very first sketch : Tokyo, night, My Sketch1, Onsen Tamago, Lobsturn Table, Martini, 波と粒の境界　作ってみた, ミカン, ぺんぎん, inception totem, 空（そら）, ニュースアプリ, Sweet Pumpkin, rect!!!, Mt.Fuji, おやつの時間, Cafe Tile Wall, 生命の輝き, 非常口/EXIT, order, おでん, the landskape, MIX, Playing, First Work, 猫型ロボット, work01, かくかく四角, 旭日旗, Fireworks, penguin, 満点の星空, 最近のトレンド, 円と色, Lobotomy Corp. Logo, Normal Face, my first sketch, Dezapuro 1, 花, p5.js #1, 目を細めたらあの人, TCL, 試作, カレイドスコープ, 顔のない将棋, Photoshop, Optical Illusion ?, iPhone, RGB, あんぱん, 格子と図形, First, 小屋, The World, Japanese flag, ピタゴラスイッチ風, a tree, my dream house , Tukimi, はじめてのp5.js(お札), Complex Mesh with Pointer, kadai01, FACE, デザインとプログラミング2020第一回課題, iPhone, キホンの雁金, Stripe kawaii, Sushi, 螺旋花火, Color Ripples, 「Fall Guys」 *同タイトルのゲームに登場するキャラクターを描きました。, symmetry, Ranbow tower, 月, なにかをはき違えた扇風機, rect, Kirby☆, どらえもんもどき, Flowers, homework, Mario Pixel, my first p5js, flower, レジ入門, 天秤, “hello, world”, something floating, Like a twitter, Design&Programing1, ODEN, シンプルでカラフルな描画, donut, retro look, My First Sketch, 非対称ロボ, practice ellipse, LOVE EATER, My Mind, 雫の花, 課題, リンゴの木, Fake earth, 薄れていく線, 半径, お団子３兄弟,