Loading...
Day2-6:
メディアの利用
京都造形芸術大学
オープンレクチャー「クリエイティブコーディング:2020」
2020年3月16日(月)〜18日(水)
高尾俊介
(甲南女子大学 メディア表現学科講師)
作例
ファイル名
URL
048_画像の読み込み
https://editor.p5js.org/takawo2020/sketches/GIT0JtKc
049_画像の読み込み(2)(メディアファイルのアップロード)
https://editor.p5js.org/takawo2020/sketches/GIT0JtKc
050_画像の読み込み(3)イメージのリサイズ
https://editor.p5js.org/takawo2020/sketches/H-cJHa5H
051_画像の再構成
https://editor.p5js.org/takawo2020/sketches/amTLK2cB
052_画像の再構成(2)
https://editor.p5js.org/takawo2020/sketches/tgz8VR7L
053_画像の再構成(3)点描
https://editor.p5js.org/takawo2020/sketches/ixl52d95
054_画像の再構成(4)線描
https://editor.p5js.org/takawo2020/sketches/ipHacwQr
イメージ表示の基本
基本的な手順
画像をアップロード
p5.js Web Editorでの画像アップロード方法
Nov-28-2019 15-49-14
画像読み込みをコードで記述
表示,操作などを行う
すでに用意されているものを読み込む
https
:
//loremflickr.com/400/400
今回使用するイメージ
cat.png
文字データ
4-テキストの表示
Illustratorのようにフォントを選べてはいない.
p5.jsではフォントデータをロードしてテキストに割り当てられる.
p5.jsでは.otfファイルと.ttfファイルを読み込んで利用できる.
概要
https://fonts.google.com/
Google Fonts
からファイルをダウンロード
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
作例
ファイル名
URL
イメージ表示の基本
https://loremflickr.com/400/400
今回使用するイメージ
文字データ