卡米爾 格子松 🏃🏃‍♀️

🔮🔮🔮 魔幻水晶球 🔮🔮🔮

http://cameo-motion-20210123-0801.cbh.vercel.app/cameo-motion/v3/cameo-ice/index.html

%%html
<iframe src="https://www.babylonjs.com/community/" width="100%" height="600" style="border:1px solid black;">
</iframe>
0.0s
Python
→

Why babylon.js ?

全世界最知名遊戲之一微軟公司 Minecraft 以及火紅遊戲 Temple Run 都是用 babylon.js 遊戲引擎來製作，他是純JavaScript而且Open Source很好改，網頁遊戲版本平均只要10MB下載量，相較於 Unity 平均網頁遊戲100MB，下載量可節省10倍以上。

Minecraft Temple Run

水晶球要如何改了就會動？五萬多行就算看不懂照樣「挖格子」，製作「模擬圖」

訣竅是什麼？搜尋找「眼睛看得到的字串」

https://demo.seitwerk.de/sw-ice/app.js

非程式設計師無法再創作，經過挖格子的魔法之後.......，八歲妞妞都能改

挖格子之後的視覺成果： https://csb-40cn4-gsxv8mrrz.vercel.app/

格子本尊長這樣： https://csb-40cn4-gsxv8mrrz.vercel.app/grid-ice.html

挖格子魔法如何實現？以跑跑圖為示範：

https://cameo-motion-20210123-0801.cbh.vercel.app/cameo-motion/v3/cameo-run-page/html/cameo-run-page.html

跑跑圖 Why Web Component?

因為包裝變成網頁元件用起來只要一行 tag 簡單方便（否則可能會需要copy paste 800行的程式碼）

Amcharts 模擬圖製作原本長怎樣？

%%html
<iframe src="https://www.amcharts.com/demos/#fancy" width="100%" height="600" style="border:1px solid black;">
</iframe>
0.0s
Python
→

包裝變成網頁元件之後長怎樣？

%%html
<iframe src="https://codesandbox.io/embed/cameo-radar-3hzzh?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="cameo-radar"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>
0.0s
Python
→

格子 Why Tabulator?

  • 001 美：美美的

  • 002 拉：可以任意拖拉Columns與拖拉Rows改順序（排行榜尤其需要）

  • 003 大：就算物聯網超大量資料都可以虛擬捲動 Virtual DOM 動態讀取小部分顯示

Why BroadcastChannel?

因為W3C標準內建廣播頻道，三行程式碼就能跨元件溝通（簡單秒懂），去除元件之間的相依性！

const bc = new BroadcastChannel('test_channel'); //註冊收聽一個頻道

bc.postMessage('This is a test message.'); //張貼訊息到頻道

bc.onmessage = function (ev) { console.log(ev); } // 收聽頻道傳過來的消息

所見即所改：網頁元件動圖+BroadcastChannel+Tabulator 架構

「單頁即產品」商業模式

amcharts 對工程師開發者

https://www.amcharts.com/demos

  • 好玩：無須登入就能玩，美學驚嘆

  • 好改：輕鬆改，簡單秒懂

  • 好轉賣：經銷商加值之後可以創造 100 倍以上的價值再售出，價值差距

  • 單頁即產品：運用在卡米爾數據動圖產品銷售上

卡米爾單頁及產品 對分析師

https://cameo-motion-20210123-0801.cbh.vercel.app/cameo-motion/v3/cameo-chart-demo-page/cameo-motion-demo.html

%%html
<iframe src="https://cameo-motion-20210123-0801.cbh.vercel.app/cameo-motion/v3/cameo-chart-demo-page/cameo-motion-demo.html" width="100%" height="600" style="border:1px solid black;">
</iframe>
0.0s
Python
→

目標客戶群

  1. 200W 工研院 企業推廣組 amcharts 6 張 數據動圖

  2. 350W 工研院 新興組 tableau 6張 數據動圖

  3. 99W 內政部 統計處 饒處長 實境動圖 BBC 範例

    https://www.youtube.com/watch?v=Z8t4k0Q8e8Y

  4. 99W 工研院 產業科技所所長 實境動圖 Youtube 直播室專案

  5. 工研院 國際投資新創案 數據動圖網站

  6. 國發會 資訊處

  7. 環保署 監資處

拋磚引玉 Three.js demo

https://threejs.org/examples/

拋磚引玉 Babylon.js demo

https://www.babylonjs.com/community/

拋磚引玉 喻為 BBC 實境動圖

什麼是格子松？格子松如何進行？

不是肉鬆、不是魚鬆，但有點像是馬拉松！我們兩個小時衝刺，讓大家體驗：一起挖格子，釋放「自由創作力」給使用者的樂趣

  • 30mins Hanes + Caro 賽前暖身！

  • 40mins 兩兩一組比賽「製作模擬圖」at nextjournal

  • 40mins 每組發表 2mins 與投票

    🌶依裴 🍐祐成

  • 🍅hanes 🥥幸蓉

  • 🥭怡婷 🥑佳珞

  • 🍋雅晴 🍈瑞鋒

  • 🌻泰萬 🍌紀靜

  • 🍓泊寰 🍑孟真

    🍇喻為 🍉培成

  • 🍏姿嘉️ 🍊承緯

  • 🍪佳敏 🍆秉祐

  • 🍒佳萱 🌽孝謙

  • 🍎采秀 🥦越程

  • 🥝嘉慧 🥬佩芸

產出目標 at nextjournal：

  • 客戶是誰？

  • 用什麼動圖？

  • 創造多少價值差距？

Runtimes (1)