2023-12-12 10:18:42 +00:00
|
|
|
|
<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部</title><meta name="title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部"><meta name="description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。"><meta name="keywords" content="ICT-Course,動画,オコゲ,オコゲ,blockly,プログラミング,上野学習塾"><meta name="author" content="ocogeclub"><meta name="robots" content="index, follow"><link rel="canonical" href="https://ocoge.club/2022-05-16_tf-janken/"><link rel="shortcut icon" type="image/png" href="/assets/img/favicon.png"><link rel="apple-touch-icon" href="/assets/img/apple-touch-icon.png"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"><script src="https://kit.fontawesome.com/73f7be0650.js" crossorigin="anonymous"></script><link rel="stylesheet" href="/assets/floatbox/floatbox.css"><script src="/assets/floatbox/floatbox.js" defer="defer"></script><link rel="stylesheet" href="/assets/css/ocmain.css"><link rel="stylesheet" href="/assets/css/main.css"><link rel="stylesheet" href="/assets/css/footer.css"><link rel="stylesheet" href="/assets/css/post.css"><meta property="og:image" content="https://ocoge.club/assets/img/ogp_janken.webp"><meta property="og:title" content="『オコゲ』でぐーちょきぱーを機械学習 | おこげ俱楽部"><meta property="og:description" content="『オコゲ』デスクトップ版の機能を動画でご紹介。サーマルカメラと TensorFlow を使ったインタラクティブでリアルタイムな機械学習。"><meta property="og:url" content="https://ocoge.club/2022-05-16_tf-janken/"><meta property="og:site_name" content="おこげ俱楽部"><meta name="twitter:card" content="summary"><meta name="twitter:site" content="@ocogeclub"></head><body class="flex flex-col h-screen bg-white text-gray-800 break-words"><header id="header" class="header-shadow bg-white px-6 py-5 z-50 fixed w-full top-0 transition-all transform ease-in-out duration-500"><div class="max-w-5xl mx-auto flex items-center flex-wrap justify-between"><div class="sm:mr-8"><a class="flex items-center" href="/"><span class="text-xl text-teal-700 font-semibold self-center"><img src="/assets/img/ocoge_title_kogecha.webp" title="おこげ俱楽部" alt="おこげ俱楽部" id="site_title"></span></a></div><nav id="menu" class="order-last md:order-none items-center flex-grow w-full md:w-auto md:flex hidden mt-2 md:mt-0"><a href="/about" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">About</a> <a href="/tags" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Tag List</a> <a href="https://cloud.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Cloud</a> <a href="https://mail.ocoge.club/" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">Mail</a> <a href="https://git.ocoge.club/ocogeclub/pages" target="_blank" rel="noopener" class="block mt-4 md:inline-block md:mt-0 font-medium text-gray-700 hover:text-teal-600 text-base mr-4">ocogIt</a></nav><form id="search" action="/search" class="order-last sm:o
|
2023-11-19 13:26:52 +00:00
|
|
|
|
</code></pre><p>これを温度によって色付けして描画することで次のような画像を得ることができます。</p><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_original.webp"><figcaption></figcaption></figure><div class="balloon"><div class="faceicon"><img src="/assets/img/tama.webp"><p></p></div><div class="chatting"><div class="think-l-bal-s"></div><div class="think-l-bal-l"></div><div class="tamathink"><p>見えないし</p></div></div></div><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_nosmooth.webp"><figcaption></figcaption></figure><p>20 倍に拡大してみました。これでも何が映っているのかなんとなくわかりますが、スムージングをかけることで少し見やすくなります。</p><figure class="center"><img loading="lazy" src="/assets/img/8x8hand_smooth.webp"><figcaption></figcaption></figure><p>手と言われれば、手。ちなみに左下のちょっとだけ赤い部分は、筆者の頭が写り込んだものです。最初、天井に温度が高い部分があるのかと思って上を見たりしていました w</p><p><span class="tsubuyaki">ところで、こんな感じの映像をどこかで見たことがありませんか？<br>そう、<a href="https://www.nintendo.co.jp/switch/as3ma/traning/index.html?cat=yubi" target="_new" title="">これ <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-from-square"></i></span> </a>です。まさか Joy-Con にサーマルカメラが内蔵されていようとは。テレビ CM を見て「おおお…」などと一人で盛り上がっていたのは内緒です。そのほか距離センサなどが同時に使用できるようになっている様子。ジャイロも入っているしホンマどえらいコントローラーやでぇ…</span></p><h2>やってみる</h2><p>プログラムは以下のようなものです。</p><figure class="center"><img loading="lazy" src="/assets/img/grideye-tensor_blocks.webp"><figcaption></figcaption></figure><p>※ボタンの作成など、本質に関係のない一部のブロックは折り畳み／省略しています。</p><p>センサで取得した画像はキャンバスに表示されるのようになっているので、これを「なし（手がかざされていない状態）」「ぐー」「ちょき」「ぱ」の４つのボタンを使って分類します。<br>キャンバス上の画像に対する推論は常時実行されていて、結果はマスコットキャラクターの横の吹き出しに表示されます。</p><p>学習を行う様子は動画をご覧ください。</p><p><video loading="lazy" controls="" src="/assets/img/grideye-tensorflow.mp4" style="margin: auto;"></video></p><ol><li>何も学習していない状態では「undefined」が表示される。センサーに手をかざしてじゃんけんの形を作っても反応なし</li><li>手をかざさない状態を「なし」ボタンをクリックして学習させる（このとき画面には「じゃんけん…」と表示）</li><li>同様にして「ぐー」「ちょき」「ぱ」を学習。いずれも２回クリックで正しい推論をするようになった。念のため３回クリック</li><li>その後はハンドポーズを正しく答えることができるようになる</li></ol><p>なんということでしょう。たった 3×4=12 回のクリックでぐーちょきぱー判別の機械学習ができてしまいました。上のプログラムでは使われていませんが、学習したデータを保存・復元するブロックもありますので、育てた学習データを他のプログラムから呼び出して利用することができます。</p><h2>ちょっと詳しく</h2><p>『オコゲ』では機械学習ライブラリとして、Google が開発した <a href="https://www.tensorflow.org/" target="_new" title="">TensorFlow <span style="color: gray; font-size: smaller;"><i class="fa-solid fa-arrow-up-right-
|
2023-04-02 12:15:58 +00:00
|
|
|
|
let disqus_config = function () {
|
|
|
|
|
|
this.page.url = 'https://ocoge.club/2022-05-16_tf-janken/';
|
|
|
|
|
|
this.page.identifier = '2022-05-16_tf-janken';
|
|
|
|
|
|
};
|
|
|
|
|
|
function loadComments() {
|
|
|
|
|
|
if (!disqusLoaded) {
|
|
|
|
|
|
disqusLoaded = true;
|
|
|
|
|
|
const d = document, s = d.createElement('script');
|
|
|
|
|
|
s.src = '//ocogeclub.disqus.com/embed.js';
|
|
|
|
|
|
(d.head || d.body).appendChild(s);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
if(!!window.IntersectionObserver) {
|
|
|
|
|
|
const disqusEl = document.getElementById('disqus_thread');
|
|
|
|
|
|
const intersectionObserver = new IntersectionObserver(function(entries, observer) {
|
|
|
|
|
|
if (entries && entries[0] && entries[0].isIntersecting) {
|
|
|
|
|
|
loadComments();
|
|
|
|
|
|
observer.unobserve(disqusEl);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
intersectionObserver.observe(disqusEl);
|
|
|
|
|
|
}</script></div></article></main><footer class="mt-20 px-10 py-8 bg-gray-200"><div id="footer-badge"><a href="https://git.ocoge.club/" target="_new"><img loading="lazy" src="/assets/img/git-ocogeclub.svg" class="footer-img"></a><a href="http://creativecommons.org/licenses/by-sa/4.0/deed.ja" target="_new"><img loading="lazy" src="/assets/img/License_BY-SA_4.0.svg" class="footer-img"></a></div><div class="max-w-5xl mx-auto text-gray-700 text-center">© 2023 <a href="/" class="font-medium" target="_blank" rel="noopener">おこげ俱楽部</a>. Made by <a href="https://ocoge.club" target="_blank" rel="noopener">ocogeclub</a> using <a href="https://www.11ty.dev" target="_blank" rel="noopener">Eleventy</a> and <a href="https://github.com/dafiulh/vredeburg" target="_blank" rel="noopener">Vredeburg</a>.<br></div></footer><script src="/assets/js/bundle.js"></script></body><script>window.addEventListener('load', (event) => {
|
2023-04-02 08:31:07 +00:00
|
|
|
|
document.getElementsByTagName('html')[0].style.display='block';
|
2023-04-02 12:15:58 +00:00
|
|
|
|
});</script></html>
|
