Submit Search
Upload
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
•
Download as PPTX, PDF
•
1 like
•
329 views
Yuxio tech
Follow
クリエイティブコーディングをはじめよう we are java-scripters! @12th
Read less
Read more
Technology
Report
Share
Report
Share
1 of 13
Download now
Recommended
姫路ゆるいWeb勉強会のご紹介
姫路ゆるいWeb勉強会のご紹介
Yuko Taniguchi
Slide pocket開発物語
Slide pocket開発物語
Yuxio tech
Sketch速習会@Wantedly
Sketch速習会@Wantedly
龍 宇佐美
今更聞けないWordPress
今更聞けないWordPress
Junko Nukaga
Laravelではじめる Webアプリケーション開発
Laravelではじめる Webアプリケーション開発
Yuxio tech
新卒2年目から始めるチームリーダー
新卒2年目から始めるチームリーダー
Yuxio tech
Start Sketch.app
Start Sketch.app
Shinichi Kogiso
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
Recommended
姫路ゆるいWeb勉強会のご紹介
姫路ゆるいWeb勉強会のご紹介
Yuko Taniguchi
Slide pocket開発物語
Slide pocket開発物語
Yuxio tech
Sketch速習会@Wantedly
Sketch速習会@Wantedly
龍 宇佐美
今更聞けないWordPress
今更聞けないWordPress
Junko Nukaga
Laravelではじめる Webアプリケーション開発
Laravelではじめる Webアプリケーション開発
Yuxio tech
新卒2年目から始めるチームリーダー
新卒2年目から始めるチームリーダー
Yuxio tech
Start Sketch.app
Start Sketch.app
Shinichi Kogiso
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
schoowebcampus
2018_sddayLT_5:Robin in LasVegas(仮)
2018_sddayLT_5:Robin in LasVegas(仮)
Service Design Network Japan Chapter
Webサイト入門
Webサイト入門
touhou
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
Meyco U
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
LightSwitch 結局何ができるの
LightSwitch 結局何ができるの
Yoshitaka Seo
スクリプト・プログラマー宣言
スクリプト・プログラマー宣言
kanemu
Photoshop & illustrator はここがスゴイ!
Photoshop & illustrator はここがスゴイ!
Mori Kazue
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
Daisuke Koshimizu
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
de:code 夏まつり クイズクライアント作ったよ!
de:code 夏まつり クイズクライアント作ったよ!
Kazumi IWANAGA
XcodeのTargetについてのTIPS
XcodeのTargetについてのTIPS
Yoichiro Sakurai
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西
chachaki chachaki
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
Hiroyuki Ishikawa
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
MasuqaT
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
慎一 古賀
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
More Related Content
Similar to 20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
schoowebcampus
2018_sddayLT_5:Robin in LasVegas(仮)
2018_sddayLT_5:Robin in LasVegas(仮)
Service Design Network Japan Chapter
Webサイト入門
Webサイト入門
touhou
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
Meyco U
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
anysense_ss
LightSwitch 結局何ができるの
LightSwitch 結局何ができるの
Yoshitaka Seo
スクリプト・プログラマー宣言
スクリプト・プログラマー宣言
kanemu
Photoshop & illustrator はここがスゴイ!
Photoshop & illustrator はここがスゴイ!
Mori Kazue
Sketchで変わるワークフロー
Sketchで変わるワークフロー
Asami Yamamoto
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
Daisuke Koshimizu
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
Erina Takei
de:code 夏まつり クイズクライアント作ったよ!
de:code 夏まつり クイズクライアント作ったよ!
Kazumi IWANAGA
XcodeのTargetについてのTIPS
XcodeのTargetについてのTIPS
Yoichiro Sakurai
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西
chachaki chachaki
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
Hiroyuki Ishikawa
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
MasuqaT
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
慎一 古賀
Similar to 20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
(20)
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
HTML5時代のモバイルWEBアプリケーションデザイン 先生:白石 俊平・秋葉 秀樹
2018_sddayLT_5:Robin in LasVegas(仮)
2018_sddayLT_5:Robin in LasVegas(仮)
Webサイト入門
Webサイト入門
Web制作勉強会 #2
Web制作勉強会 #2
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
【QRコードアーティストの自立戦略 ~ UX/UIデザインワークショップ】
Sketchのライセンスを更新した男の話
Sketchのライセンスを更新した男の話
LightSwitch 結局何ができるの
LightSwitch 結局何ができるの
スクリプト・プログラマー宣言
スクリプト・プログラマー宣言
Photoshop & illustrator はここがスゴイ!
Photoshop & illustrator はここがスゴイ!
Sketchで変わるワークフロー
Sketchで変わるワークフロー
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
jQueryを自分で書いてみよう!@第5回福岡マークアップ勉強会
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
オープンソースプロジェクトのはじめかた@Creators MeetUp #25
de:code 夏まつり クイズクライアント作ったよ!
de:code 夏まつり クイズクライアント作ったよ!
XcodeのTargetについてのTIPS
XcodeのTargetについてのTIPS
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
20140126 KA法ワークショップ@DevLOVElove関西
20140126 KA法ワークショップ@DevLOVElove関西
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
[クリエイティブハント2018]LT 道場破りしたらできちゃった/// #ゴーハント
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
C#のコード解析ってなんだ@20160825 CenterCLR.学生 #1
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
Recently uploaded
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
akihisamiyanaga1
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
sugiuralab
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
FumieNakayama
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
Yuki Kikuchi
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
UEHARA, Tetsutaro
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
FumieNakayama
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
博三 太田
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Recently uploaded
(14)
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
CTO, VPoE, テックリードなどリーダーポジションに登用したくなるのはどんな人材か?
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
TataPixel: 畳の異方性を利用した切り替え可能なディスプレイの提案
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
AWS の OpenShift サービス (ROSA) を使った OpenShift Virtualizationの始め方.pdf
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
自分史上一番早い2024振り返り〜コロナ後、仕事は通常ペースに戻ったか〜 by IoT fullstack engineer
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
デジタル・フォレンジックの最新動向(2024年4月27日情洛会総会特別講演スライド)
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
クラウドネイティブなサーバー仮想化基盤 - OpenShift Virtualization.pdf
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
モーダル間の変換後の一致性とジャンル表を用いた解釈可能性の考察 ~Text-to-MusicとText-To-ImageかつImage-to-Music...
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
20171002 クリエイティブコーディングをはじめよう we are java-scripters! @12th-(yuxioarts)
1.
クリエイティブコーディングをはじめよう ~アート表現ができるJavaScriptの世界~ We Are JavaScripters!
@12th ゆきしお TwitterID:YuxioArts
2.
目次 • 発表の目的 • 自己紹介 •
デザインとアートの違い • コンピューター上のアート • クリエイティブコーディングとは • JavaScriptを使用したクリエイティブコーディング • クリエイティブコーディングを学ぶことの意義
3.
発表の目的 クリエイティブコーディングを取り入れることで・・・ • JavaScriptでアート表現ができる • WEBサイト・エンジニアの表現の幅を広げることができる この2つを持って帰って頂ければと思います。
4.
自己紹介 <名前> ゆきしお TwitterID:YuxioArts <仕事> 本業:データアナリスト(2年目) 使用言語:SQL、Python <趣味> WEB開発 使用言語:HTML、CSS、PHP、Python、 JavaScript フレームワーク:Laravel(PHP) <一言> 最近、JavaScriptが好きになってReactや クリエイティブコーディングを勉強中
5.
デザインとアートの違い デザイン アート 客観的である 主観的である 設計する
表現する 問題解決 自己表現 アートとは「特殊な素材・手段・形式により、技巧を駆使して美を創造・表現しようとする人間活動、お よびその作品」 デザインとは「作ろうとするものの形態について、機能や生産工程などを考えて構成すること」 ー大辞林よりー ※個人的にデザインは構成よりも「設計」のほうがしっくりくるので、 本スライドでは、「設計する」とします。
6.
デザインとアートの違い 設計する 表現する TOPページは、企業の 顔。だから企業のイメー ジカラーであるこの色が いいと思う。 うんうん
7.
コンピューター上のアート • デジタルアート •
コンピューターミュージック • デジタル絵画 • クリエイティブコーディング
8.
クリエイティブコーディングとは ・表現力のあるものを創造することを目指すコーティング ・アーティストやデザイナーが創作に使えるプログラミング・ツール を作る創作活動 コーディングでアート的な表現することができます
9.
JavaScriptを使用したクリエイティブコーディング P5.js https://p5js.org/ Sketch.js http://soulwire.github.io/sketch.js/ 下記のサンプルは、Sketch.jsから。GithubやCodepenからすぐに利用可 能 BUBBLES 1 MILLION
PARTICLES PARTICLES
10.
JavaScriptを使用したクリエイティブコーディング Particles.js http://vincentgarreau.com/particles.js/ 下記のサンプルは、Codepenからすぐに利用可能
11.
クリエイティブコーディングを行う意義 1 WEBサイトの表現を広げることができる ⇒UXの向上につなげることができる 1 MILLION
PARTICLESの使用イメージ 宇宙関係の研究室のHP Particlesの使用イメージ AI関係の研究室・会社のHP WEBサイトの直感的イメージと結びつけ ユーザーに受け入れやすくなる
12.
クリエイティブコーディングを行う意義 2 エンジニアまたはコーディングができるデザイナーの表現力の向上 コーディング自体のマンネリ化防止 ちょっと息抜きに クリエイティブコーディング すっかー!
13.
Let’s クリエイティブコーディング
Editor's Notes
クリエイティブコーディング 聞いたことある方どのくらいいらっしゃいますか?
クリエイティブコーディングきいたことあるって方どのくらいいますか?
南麻布でデータアナリストをやっています。主にマーケティング関係の分析を行っています。
デザインは、問題解決のために設計する。アートは、自己表現というのが大きな違いです。
バブルス パーティクル
Download now