2019年1月4日 – HIM.CO ヒム・カンパニー

6_1_1：p5.jsを使った画像の画風変換(Style Transfer) ml5.js JavaScript

2019年1月4日2019年2月10日投稿者: knagai

本稿は「ml5-examples/p5js/StyleTransfer/StyleTransfer_Image」で公開されているサンプルの解説です。次のリンクをクリックすると、実際の動作が確認できます。「p5.jsを使 […]

プログラミングはじめの一歩 JavaScript + p5.js編
5：暗号をといて箱を開ける
プログラミングはじめの一歩 JavaScript + p5.js編
4：言葉を覚えるロボット
プログラミングはじめの一歩 JavaScript + p5.js編
3：ロボットが水をまく日は？
プログラミングはじめの一歩 JavaScript + p5.js編
2：花を１列ずつ植える
プログラミングはじめの一歩 JavaScript + p5.js編
１：おかしに当たり券を入れる
プログラミングはじめの一歩 JavaScript + p5.js編
p5.js shader 基本的なサンプル 2 テクスチャ座標を使ったグラデーションシェーダー
p5.js shader 基本的なサンプル 1 グラデーションシェーダー
p5.js shader スタート 8 テクスチャ座標の使用
p5.js shader スタート 7 変数修飾子の使用
p5.js shader スタート 6 シェーダーの重要な概念
p5.js shader スタート 5 シェーダーの書き方
p5.js shader スタート 4 シェーダーの設定
p5.js shader スタート 3 シェーダーとは何か？
p5.js shader スタート 2 シェーダーを使う理由
p5.js shader スタート 1 p5.js shaderへようこそ
p5.js WebGL入門 8 3D カスタムシェイプ
p5.js WebGL入門 7 3D テキスト
p5.js WebGL入門 6 3Dモデル
p5.js WebGL入門 5 カメラ
p5.js WebGL入門 4 テクスチャ
p5.js WebGL入門 3 ライト、マテリアル
p5.js WebGL入門 2 3Dジオメトリ
p5.js WebGL入門 1 スタート
p5.jsで始めるWebGL
p5.jsコードの最適化
5: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植3
4: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植2
3: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 移植1
2: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 解説
1: Pathfinding(経路探索) Breadth-First Search(幅優先探索) アルゴリズム p5.js – 導入
6：エフェクト p5.sound.js サウンド
5：マイク入力と録音 p5.sound.js サウンド
4：サウンドの作成と加工(エンベロープ) p5.sound.js サウンド
3：サウンドの再生 p5.sound.js サウンド
2：サウンドアプリ p5.sound.js サウンド
1：音について p5.sound.js サウンド
p5.sound.js サウンドライブラリ
18：ハロー p5(Hello p5)
17：高度なデータ(Advanced Data)
16：入力(Input)
15：タイポグラフィ(Typography)
14：変換(Transform)
13：描画(Drawing)
12：モーション (Motion)
11：オブジェクト (Objects)
10：インタラクション (Interaction)
９：シミュレーション 2/2 (Simulate)
９：シミュレーション 1/2 (Simulate)
８：数学(Math)
７：カラー(Color)
６：イメージ(Image)
５：制御(Control)
４：配列(Arrays)
3：データ(Data)
２：形(Form)
１：構造(Structure)
p5.js サンプル解説
9_5：p5.play 「Jumper」プラットフォームゲーム
9_4：p5.play 「Angry Birds」もどきの「Angry Bernie」ゲームサンプル
9_3：p5.play 「ブロック崩し」ゲームサンプル
9_2：p5.play 「アステロイド」ゲームサンプル
9_1：p5.play 「ポン」ゲームサンプル
9：p5.play ゲームサンプル
8_3：p5.play マウス操作に関するプロパティ
8_2：p5.play マウス操作に関するイベントハンドラ
8_1：p5.play マウス操作に関する関数
8：p5.play マウス操作に対する応答
7_3：p5.play スプライトの点やピクセルに対する重なりチェック
7_2：p5.play スプライトの跳ね返り
7_1：p5.play スプライトの当たり判定
6：p5.play Group オブジェクト
5_6：p5.play スプライトのドラッグ
5_5：p5.play スプライトの削除
5_4：p5.play スプライトの移動
5_3：p5.play スプライトのアニメーションの変更
5_2：p5.play スプライトの外見
5_1：p5.play.Sprite オブジェクト
4：p5.play.SpriteSheet オブジェクト
3_2：p5.play.Animationオブジェクトのメソッドとプロパティ
3_1：p5.play.Animationオブジェクトの再生と停止
3：p5.play.Animationオブジェクト
2_2：p5.play スプライトシートアニメーションの基本
2_1：p5.play アニメーションの基本
1_1：スタート p5.play
1：p5.playとは？
14：ゲーム制作に役立つp5.play速習 Creative Coding p5.js
13_1：RiTaJS 入門 Creative Coding p5.js
13：外部ライブラリの使用 Creative Coding p5.js
12_2：ビデオの操作 Creative Coding p5.js
12_1：コントロール要素 Creative Coding p5.js
11：テキストと文字表現 Creative Coding p5.js
10：オブジェクトの工場としてのクラス Creative Coding p5.js
9：メソッドを持つオブジェクト Creative Coding p5.js
8：関数のつづき Creative Coding p5.js
7：配列とオブジェクト Creative Coding p5.js
6：メディアイメージとサウンド Creative Coding p5.js
5：変換と関数 Creative Coding p5.js
4_2：インタラクション Creative Coding p5.js
4_1：経時的変化 Creative Coding p5.js
3：式、変数、ループ Creative Coding p5.js
2：p5.js 初めの一歩 Creative Coding p5.js
1：ブラウザのコンソール内のJavaScript Creative Coding p5.js
クリエイティブコーディング Creative Coding p5.js
12：キャンバスを超えて p5.dom.js JavaScript
11_2：JSONデータ p5.js JavaScript
11_1：表データ p5.js JavaScript
11：データ p5.js JavaScript
10_4：ロボットの配列 p5.js JavaScript
10_3：オブジェクトの配列 p5.js JavaScript
10_2：繰り返しと配列 p5.js JavaScript
10_1：配列の作成 p5.js JavaScript
10：配列 p5.js JavaScript
9_1：OOP型ロボット p5.js JavaScript
9：オブジェクト p5.js JavaScript
8_4：関数でロボットを作成する p5.js JavaScript
8_3：値を返す p5.js JavaScript
8_2：関数の作成 p5.js JavaScript
8_1：関数の基本 p5.js JavaScript
8：関数 p5.js JavaScript
7_7：震えるロボット p5.js JavaScript
7_6：円運動 p5.js JavaScript
7_5：タイマー p5.js JavaScript
7_4：ランダム p5.js JavaScript
7_3：トゥイーン p5.js JavaScript
7_2：速度と方向 p5.js JavaScript
7_1：フレーム p5.js JavaScript
7：モーション p5.js JavaScript
6_7：SVGロボット p5.js JavaScript
6_6：カスタムフォントの使用 p5.js JavaScript
6_5：Webフォントの使用 p5.js JavaScript
6_4：フォント p5.js JavaScript
6_3：コールバック関数の使用 p5.js JavaScript
6_2：GIFとPNG、SVG p5.js JavaScript
6_1：イメージ p5.js JavaScript
6：メディア p5.js JavaScript
5_7：ロボットに変換を組み込む p5.js JavaScript
5_6：変換状態の保存と復元 p5.js JavaScript
5_5：拡大縮小(scale) p5.js JavaScript
5_4：連結アーム p5.js JavaScript
5_3：移動(translate)と回転(rotate) p5.js JavaScript
5_2：回転(rotate) p5.js JavaScript
5_1：移動(translate) p5.js JavaScript
5：移動、回転、拡大縮小 p5.js JavaScript
4_8：応答するロボット p5.js JavaScript
4_7：マッピング(対応付け) p5.js JavaScript
4_6：応答：キー p5.js JavaScript
4_5：応答：カーソル p5.js JavaScript
4_4：応答：クリック p5.js JavaScript
4_3：応答：イージングの導入 p5.js JavaScript
4_2：応答：マウスを追跡 p5.js JavaScript
4_1：応答： p5.js draw()関数を詳しく
3_3：p5.js ロボット四変化
3_2：p5.js アートサンプル
3_1：p5.js 変数
2_8：p5.js Robotの描画
2_7：p5.js シェイプを手作りする
2_6：p5.js カラーの設定
2_5：p5.js シェイプの属性の設定
2_4：p5.js 楕円(円)、円弧を描く。度とラジアンの扱い。
2_3：p5.js 線、四角形、三角形、長方形を描く
2_2：p5.js 点を描く
2_1：p5.js 描画
1_3：p5.js 複数の円をマウスで描く
1_2：p5.js 円を描く
1_1：p5.js スタート
11_5：ml5.js SketchRNN 絵を描く ml5.js JavaScript
11_4：ml5.js SketchRNN 最初の線を描画する ml5.js JavaScript
11_3：ml5.js SketchRNN 描く線の最初のデータを得るまで ml5.js JavaScript
11_2：ml5.js SketchRNNの基本サンプル ml5.js JavaScript
11_1：ml5.js SketchRNN ml5.js JavaScript
10_3：mobileNetを使ったWebカメラ画像のKNN分類 ml5.js JavaScript
10_2：ml5.KNNClassifier()の簡単な例 ml5.js JavaScript
10_1：KNN クラス分類 ml5.js JavaScript
9_5：king – man + woman = queen ml5.js JavaScript
9_4：ml5.word2vec()サンプル ml5.js JavaScript
9_3：似ているか？　似ていないか？ ml5.js JavaScript
9_2：Word2vecとは？ ml5.js JavaScript
9_1：Word2vec(単語の意味をベクトルで表現する) ml5.js JavaScript
8_2：YOLOとp5.jsによるリアルタイム物体検出 ml5.js JavaScript
8_1：YOLO ml5.js JavaScript
7_3：ビデオに対するPoseNetサンプル(１人の姿勢検出) ml5.js JavaScript
7_2：画像に対するPoseNetサンプル(１人の姿勢検出) ml5.js JavaScript
7_1：PoseNet (姿勢検出) ml5.js JavaScript
6_1_2：p5.jsを使ったビデオ画像の画風変換サンプル(Style Transfer) ml5.js JavaScript
6_1_1：p5.jsを使った画像の画風変換(Style Transfer) ml5.js JavaScript
6_1：画風変換(Style Transfer) ml5.js JavaScript
5_1_3：鼻歌音程モニター ml5.js JavaScript
5_1_2：ピッチ抽出ピアノ ml5.js JavaScript
5_1_1：ピッチ抽出(Pitch Detection)サンプル ml5.js JavaScript
5_1：ピッチ抽出(Pitch Detection) ml5.js JavaScript
4_1_2：LSTMの訓練(「不思議の国のアリス」モデルの作成) ml5.js JavaScript
4_1_1：LSTM 文章生成サンプル ml5.js JavaScript
4_1：文章の自動生成 ml5.js JavaScript
3_1_2：MobileNetによる特徴抽出を使用した画像回帰 ml5.js JavaScript
3_1_1：MobileNetによる特徴抽出を使用した画像分類 ml5.js JavaScript
3_1：特徴抽出(Feature Extraction) ml5.js JavaScript
2_1_5：MobileNetとp5.js、p5.speechを使った音声出力をともなうスカベンジャーハントゲーム ml5.js JavaScript
2_1_4：MobileNetとp5.js、p5.speechを使った音声出力をともなうWebカメラ画像分類 ml5.js JavaScript
2_1_3：MobileNetとp5.jsを使ったWebカメラ画像分類 ml5.js JavaScript
2_1_2：MobileNetとp5.jsを使った複数画像の分類サンプル ml5.js JavaScript
2_1_1：MobileNetとp5.jsを使った画像分類サンプル ml5.js JavaScript
2_1：画像分類(Image Classification) ml5.js JavaScript
1_2：Promiseとコールバックの使用に関する留意点 ml5.js JavaScript
1_1：ml5.jsの準備 ml5.js JavaScript
もっと優しく機械学習が行える ml5.js JavaScript
14_8：メモリ管理
14_7：訓練
14_6：モデルとレイヤー
14_5：演算
14_4：変数
14_3：テンソルの作成
14_2：テンソル(tensor)
14_1：TensorFlow.jsとは？
14：Tensorflow.js チュートリアル – TensorFlow.jsのコア概念入門
13_7：グラフを追加
13_6：報酬を割引き、勾配を重みに適用する
13_5：勾配と報酬の記録
13_4：行動を組み込む
13_3 カートポールを動かす
13_2 強化学習とは？
13_1 カートポールサンプルシンプルバージョン
13 強化学習：カートポールサンプルを探る
12_7 重みパラメータを探る
12_6 ３つのモデルの訓練と評価、推測
12_5 線形回帰モデルと多層パーセプトロン回帰モデル２種
12-4 エクセルを使ったデータの標準化と標準偏差
12_3 データの標準化と標準偏差
12_2 ボストンデータセットのロードとtf.Tensorオブジェクトへの変換
12_1 ボストンデータセット
12 ボストンデータセットによる多変数回帰
11 TensFlow.js サンプルファイルの実行方法
10_4 Node.jsのJavaScriptコードの記述と実行
10_3 Webアプリ用のFlickr API KeyとSecretの入手
10_2 Node.js環境の作成
10_1 Kerasモデルを訓練し、TensorFlow.jsモデルに変換して、サーバーに配置する
10 flickrからテスト用データを入手する
9_2_3 Keras由来のモデルの使用
9_2_2 表情認識用データの準備
9_2_1 HDF5モデルの入手と配置
9_2 Kerasモデルの利用
9_1 tensorflowjs converterを使えるようにする
9 tensorflowjs converter
8_3_2 姿勢検出(複数)
8_3_1 姿勢検出(1人)
8_3 posenet
8_2_1 coco-ssd 物体検出アプリ
8_2 coco-ssd
8_1_3 画像認識モバイルアプリ
8_1_2 mobilenetのテスト
8-1 mobilenet
8 訓練済みモデルの利用
7-7 手書き数字認識アプリ(UI考慮なし版)
7-6 モデルの推測結果の表示
7-5 モデルの構築と訓練
7-4 MNISTデータをtf.Tensorオブジェクトに変換する
7-3 MNISTラベルデータを開いて中身を得る
7-2 MNIST画像データを開いて中身を得る
7-1 MNISTデータセットとは？
7 MNISTデータと手書き数字認識アプリ
6_5 optimizer : 最適化アルゴリズム
6_4 loss : 誤差関数
6_3 モデルの中身その２
6_2 活性化関数
6_1 モデルの中身その１
6 モデルの本陣
5_1_6 推論その3 答え合わせ
5_1_5 推論その2 Tensor.argMax( axis? )メソッド
5_1_4 推論その１
5_1_3 モデルの訓練
5_1_2 モデルの構築
5_1_1 データの取得
5_1 2特徴量2クラス
5_1 1特徴量2クラス
5 あやめの分類
5_2_4 epochsはいくつがよいのか？
5_2_3 TensofFlow.jsのモデルの作成と訓練
5_2_2 グラフの描画関連
5_2_1 CSVファイルの読み込み
5_2 TensorFlow.jsでビール売上数を予測する
5_1 エクセルでビール売上数を予測する
5 ビール売上本数の予測
4_2 同じ問題に対して、異なるTensorFlow.jsモデルを試す
4_1 TensorFlow.jsで実装した論理ゲート
４論理ゲートをTensorFlow.jsで実装する
3-3 基本　その3 視覚化
3-2 基本　その2 訓練の進捗状況
3_1_4 モデルの推論
3_1_3 モデルの訓練
3_1_2 モデルの作成
3_1_1 データの取得
3-1 基本　その１ TensorFlow.jsの作業の流れ
3 スタート
2 準備
1-1-3 TensorFlow.jsに関する情報
1_1_2 誰に向いているのか？
1_1_1 TensorFlow.jsの特徴
1_1 TensorFlow.jsとは？
Web アニメーション (CSS Animations, CSS Transitions, Web Animations API)
11_3 Bird Monster
11_2 手作りイージング関数を使ったキャンバスアニメーション
11-1 そもそもイージング関数は一体何を…
11 カスタムイージング
10-10-3 getComputedTiming().progressの利用
10_10_2 getComputedTiming().currentIterationの利用
10_10_1 finishイベントの利用
10_10 アニメーションタイマーとしての利用
10_9_4 Promise系
10_9_3 再生系
10_9_2 タイム系
10_9_2 SVGのシークアニメーション
10_9_1 getComputedTiming()
10_9_1 エフェクト系
10_9 Animationオブジェクトのプロパティ
10_8 タイミングパラメータの書き方
10_7 キーフレームパラメータの書き方
10_6 アニメーションの再生状態
10_5 Animationオブジェクトのイベント
10_4 CSS Animationsの取得
10_3 Animationオブジェクトのメソッド
10_2_2 Web Animations APIアニメーションの基本　その２
10_2 Web Animations APIアニメーションの基本　その１
10_1_6 Web Animations APIアニメーションの特徴
10_1_5 Web Animations APIのモデル
10_1_4 Web Animations APIのコア概念
10_1_3 重要!! ブラウザの実験的な機能を有効化する方法
10_1_2 メリットとデメリット
10 Web Animations API
6_3 よいアニメーションにするには？
6_2 レイアウト変更や再描画をともなうプロパティ
6_1 ブラウザがWebページを表示するまでの仕組み
6 アニメーションのパフォーマンスを上げる
5_2 離散関数
5_1 連続関数
5 タイミング関数
4_5 CSS Transitionsのイベント
4_4 transtionプロパティ
4_3 CSS Transitionsのポイント
4_2 基本
4_1 CSS Transitionsの特徴
4 CSS Transitions
3_5 CSS Animationsのイベント
3_4 animationプロパティ
3_3 CSS Animationsのポイント
3_2 基本
3_1 CSS Animationsの特徴
3_CSS Animations
1_4 Webで見られるアニメーションの種類
1_3 Webアニメーション(CSSアニメーション)の場合
1_2 アニメーションが動いて見える原理
1_1 アニメーションとは？
1 Webアニメーションとは？
スマホなどのイラストなど
TensorFlow.jsことはじめ
Web Animationsことはじめ

月	火	水	木	金	土	日
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31