[RPG] 搖春花 more and more and animate

原本並沒有打算做 X搖錢樹（O搖春花）的，只是因為卡發糕卡太久～
又覺得效果不太好＝.＝|||...
剛好又碰到過年前，軍心渙散（反正大家都在等過年，也都不想多事）
是說有點閒，就開始想東想西的～
想說過年麻，大家都喜歡招財進寶一下～
所以～那就來搖一下好了XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

搖春花～

其實多搖幾下，會越來越多，最後就會變成下雨囉XD...

這次的重點在於， 越來越多的 span（＄），random，和 jquery animate 位移...

有大概試一下，在pc上 chrome/firefox 就大概可以上到 三百，四百個物件都感覺還好～
但是手機就....手機在一百多個物件後就開始有明顯的 lag...
（看硬體啦，我中階手機跑得挺痛苦的，但聽朋友測 ipad 順順）
所以將就配合一下，改成手機可以接受的數量就好了～
（原本想判別解析度，做物件數量差異，但後來想到還有直式/橫式，就懶了一_一）
不過寬度到是會影響 $ 字的大小（當量不夠大時，把東西變大，看起來也就滿滿的了XD）

單一作法其實都蠻簡單的（就是設定合理區間內，一直random）
不過就是整合了好幾種，好幾項～
花最多時間是在調整區間...
還有手殘改壞或是覺得效果不對時，在茫茫的參數海中找是誰的錯Orz...
（這篇的動畫又做太長，光要等他跑到那段，30s又過去了Orz...）

拼命用的 random function
function randIntRange(min, max)  {
var tmp = Math.floor(Math.random()*(max-min))+min;
return tmp;
}

jquery animate 有個優點就是，他同一個 元件(div/span) 的 animate 是有照順序的，但不同 元件要照順序還是只能用 setTimeout。不過也已經好用很多了，
貼一下噴錢的動畫實作

//多久位移一次（移動時間）
var pms = randInt(70)+50;
//每次位移x  （平移量x）
var dx = randInt(750)+10;
//每次位移y  （落下量y）
var dy = randInt(10)+5;
// 往右跑，或是往左跑 （方向）
var isup = randInt(10)+1;
//移動幾次
var ts = randInt(10)+5;

for(var i = 0 ; i < ts ; i++)  {
// 仿拋物線的位移量
var vx = Math.round(Math.pow(i*dx, 0.5));
var vy = dy*i;

if (isup > 5) {
tx -= vx;
}  else  {
tx += vx;
}
ty += vy;
// 修正不要跑出畫面（不然會跑出 scroll bar...但這參數沒有調很好，偶爾還是會）
if (ty > maxh-40) {
break;
}
if (tx > maxw-40) {
break;
}

// 交給 jquery animate 做移動～
$('#'+gid).animate({
left: tx,
top: ty,
opacity: 1
}, pms, function() {
;
});
}

[RPG] 發糕 canvas animate

在發糕篇～
http://www.realmofprogrammersgamble.website/journal/ch1/jour3.html

概念圖一開始出來的時後，是沒有發糕這個東西的～
就有人說，那顆蛋是不是也要裝飾什麼～
嗯？！一開始有想過在蛋上貼個「滿」「福」之類的...
後來就想到老媽這幾年都自己在做發糕～想說發糕底下用碗裝，跟底座也很像阿XD～
（就有一年陪老媽準備年菜時，偶有被訓過，發糕在蒸的時後，不能偷看，不能亂講話，靜靜等著就好....）

原本的發糕動畫，是 css transform，scale 從小到大～
但被嫌棄說...有 power point 的 fu...Orz...
聽了真是受傷（不過認真的想，這是事實沒錯～囧/）
不過說真的，我又沒看過發糕在發的時後，是長怎麼樣的XD...當年被禁止偷看阿阿阿～
後來就討論說，可能是像土司蛋糕膨起來的樣子吧O_o?...
（雖然後來實作出來像是烤麻糬XD，覺得這樣比較有趣麻^~^...）

這段動畫是用 canvas 畫出來的，真的是有寫到起孝的感覺Orz...
重點大概就是～ 數學真的很重要，canvas 的 ctx.globalCompositeOperation = 'destination-out' 好用，變量計算時，要用相對值（比率）而不是絕對值（螢幕大小問題）....

用 canvas 先畫出原圖，底下是個微倒梯形，上面則是圓形～
一開始用 lineTo/arc 畫範圍，但....有個問題在於算出來的小數點在畫面上被進/去位時，就有一條很蠢的細線.....最後是用 向量繪圖概念的 圖形相加減裁切，總算得到完美的土司形了...
http://www.w3schools.com/tags/canvas_globalcompositeoperation.asp
PS: canvas  基本的 clip 非常難用，可以用向量圖概念處理比較簡單

function cakeCurve(ctx, w, h, p) {
var of = 5;
var h2 = h-h/3;

//cx = w/2, cy = p, the point= 0, h2
var cx = w/2, cy = p;
var r = Math.round( Math.pow(Math.pow(cx, 2) + Math.pow(h2-cy, 2), 0.5) );
//console.log("cx="+cx+", cy="+cy+", r="+r);

ctx.beginPath();

if (p == 0) {
ctx.moveTo(0,h2);
}  else {
//x,y = w/2(cx), y=h2, sin= ??/r
var a1 = r*1.0/w*0.5;
var a2 = w*0.5/r;
ctx.arc(cx,cy, r , a2, a1);
}
ctx.lineTo(w ,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(of, h);
ctx.lineTo(0, h2);
ctx.moveTo(0,h2);
ctx.closePath();
ctx.fill();

//clip left coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(0,h2);
ctx.lineTo(of, h);
ctx.lineTo(0, h);
ctx.closePath();
ctx.fill();

//clip right coner...
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.moveTo(w,h2);
ctx.lineTo(w-of, h);
ctx.lineTo(w, h);
ctx.closePath();
ctx.fill();
}

接著就是讓他動起來～也沒啥就是 setTimeout 叫他拼命畫 Orz...
概念就是 frame rate (fps)， 反正 60 fps就已經看不出來了～
讓我意外的是，手機在畫沒有lag感...小塊的動畫要用 canvas 來重繪，看起來還是可行的～
（倒是之前蠢蠢的，沒注意到小螢幕變量要用 相對值，而不是絕對值...還以為是手機畫不出來Orz）

  drawCake('ccake', clrs[0], w, h, 0);
  var pms = 70;
  var delay = 0;
  for (var i = 0 ; i < clrs.length ; i ++) {
   var aa = "drawCake('ccake', '"+clrs[i]+"', "+w+", "+h+", "+(220-i*5)+")";
delay += pms;
setTimeout(aa, delay);
  }

function drawCake(cavId, clr, w, h, p, scale)  {
var canvas = document.getElementById(cavId);
    var ctx = canvas.getContext('2d');
canvas.width = w;
canvas.height = h;

if (scale) {
 ctx.scale(scale, scale);
}
var grd = ctx.createLinearGradient(0,0,0,h);
grd.addColorStop(1, clr);
grd.addColorStop(0.5, '#ff9100');
grd.addColorStop(0, '#e65100');

//ctx.fillStyle=clr;
ctx.fillStyle=grd;
cakeCurve(ctx, w, h, p)

//ctx.stroke();
}

不過因位調整變量，顏色等....實在讓我覺得太累了...
數學不好還硬要模擬物理，真是太為難了...
（塗色只用漸層，沒有陰影打光，fu 整個就不太好（跟整體的畫風有不協合感）～突然想到以前當 3D 遊戲剛出來時，那種粗糙生硬的 3D 模組和顏色，就像這種fu...還不如 2D苦工繪圖動畫）
一.一所以以後不會搞這種的，是說也沒有那麼多時間可以研究這塊Orz...

[RPG] 抖抖 jquery animate shake

在 css3 裡， animate 已經可以實用了～
不過在一些 互動式的動畫，我個人比較偏好用 jquery animate，主要是比較好控制～
因為有時後不只是單純的只有一個div在動～

是說～這個是只有自己shake一下啦XD...

http://www.realmofprogrammersgamble.website/journal/ch1/jour2.html

這隻點一下會抖一下XD...


先抓 圖的原始位置
t2x = parseInt($('#img_t2').css('left'));

晃動的位移
var ot = [3, -3, 3, -3, 3, 3];

click 時的 jquery animate
function rockDemon() {
for(var i = 0 ; i < ot.length ; i++)  {
$('#img_t2').animate({
left: t2x+ot[i],
}, pms, function() {
;
});
}
}

html submit to iframe and call parent function

最近用了一個古老的解法，就古老的系統只能用古老的解法～

主要是為了做出仿 ajax post input file 的行為
（那為什麼不用 jquery ajax post file 就好，就><...IE太舊在 ajax時不認識 file 這個 type）


所以這個解法的概念就是～
html XXX 內嵌一個 看不見(display:none) 的 iframe AAA，
然後把 form BBB（ input type="file", ） post submit 到 iframe AAA 裡～
其 form 的 action （把檔案傳到server） 後 response 結果 會在 iframe AAA裡，
因為 iframe AAA 算子視窗的一個，所以就可以 call parent XXX 裡的 function 做 refresh (就像 ajax 的 callback function)


就～ form （其實這個 form 內容可以用 jqeury.html(xxxx) 生成...可以藏得更裡面XD），target 指向 iframe ，
<form  enctype="multipart/form-data" action="xxxxx" id="sub-form" target="sub-iframe" method="POST" >
                                <input type="file" name="uploadFile" id="uploadFile">
</form>

<iframe style="display: none" id="sub-iframe" src="javascript:false;" name="sub-iframe"></iframe>

定個 callback function 進行後續動作，要傳值進去也是可以的～
function uploadFileCallback()   {
    .....
}


而在 action response 的內容時～
<html>
    <head>
    </head>
    <body onload="window.parent.uploadFileCallback();">
    </body>
</html>


題外話， 用 jquery.html() 組 form 的資料是可行的～可以實現動態 submit 不同的form 內容，然後只看表面上的code是看不出來的喔XD...

google Identity Toolkit Java quick start

Google 認證設定，首先參考官方文件～

https://developers.google.com/identity/toolkit/web/quickstart/java

先申請 google develop console 的 project～
要申請的前題～就是弄個 google帳號來～

其 API 要用 OAuth2 的認證～
所以在 [Credentials] 開始建 OAuth2 的設定 （Credentials建立項目，大多在左上角的 Create Credentials 按鈕裡...老實說常常找不到他就是＝_＝|||）

設定內容～要注意的是有些限制，先練習用 java quickstart 的設定

Authorized JavaScript Origins:
For this quick-start app, set this to: http://localhost:4567
Authorized Redirect URI:
For this quick-start app, set this to: http://localhost:4567/gitkit
重點是取得

Client ID 和 Client secret

新增API～
接著然後在 [Overview] search  "Identity Toolkit"

將剛剛設定的OAuth Client 指定過來
在 providers Google 的項目裡面，還可以下拉選取 client ID...如果多個的話也要看一下～

底下會生出對應的 Client configuration 和 Server configuration 抄起來，之後設定還要用QQ~

準備 Service Account
就是你看 Server configuration  裡面的  serviceAccountEmail 和 serviceAccountPrivateKeyFile 資料～那個要申請的～
Service Account 在 [Credentials]  新增～重點重點是～～要選 P12 的（之前呆呆的沒看文件QQ）就會產出下載 key檔...

在 service account manager 裡，可以再重gen P12 檔，可以產生多筆～～
但是之前的沒保留住...就～好像找不到地方再下載了＠＠b...所以檔案要留好～
（是說現在也不少 駭客 都是偷這些公私鑰檔，真的別太隨便就是）

service account 和 server conf 的對應資料寫法如下

"serviceAccountEmail": " 帳號ID @ 專案名.iam.gserviceaccount.com",
(在 service account manager 裡看到的 Email Address 項目就是)
 "serviceAccountPrivateKeyFile": "D:/xxxxx/xxxxxxxx-yyyy.p12",
(產生出來的 P12 檔 實體檔案路徑，看要放那隨你高興，路徑指對就好～)


在 client conf 內，還有差一個 api key，那就是再把他生一組 key 來用

接著把這 key 貼進 client conf 內～基本上，相關設定就差不多了～～

Client configuration
{
  "widgetUrl": "http://localhost:4567/gitkit",
  "signInSuccessUrl": "/",
  "signOutUrl": "/",
  "oobActionUrl": "/",
  "apiKey": "申請來的 browser Key",
  "siteName": "this site",
  "signInOptions": ["password","google"]
}

     
Server configuration
{
  "clientId": "申請來的 client Id",
  "projectId": "所建立的專案名",
  "serviceAccountEmail": "申請的 serviceAccount Email ",
  "serviceAccountPrivateKeyFile": " P12 檔放的地方",
  "widgetUrl": "http://localhost:4567/gitkit",
  "cookieName": "gtoken"
}

然後下載  Java quick start 包（他本身就是一個簡易的 http server）
https://github.com/googlesamples/identity-toolkit-java/archive/master.zip
（maven 包的，總之就是下載，解開，直接 import，complire...）

然後寫一個純文字檔 gitkit-server-config.json ，把 server conf 貼進去，放在 src 下
（因為 quickstart 寫死檔名了麻，如果想改名，應該就去改 Java Code 就可以）

把 P12 放在寫好的路徑下～

在 quickstart 解開的安裝包裡， 有個檔 templates/gitkit-widget.html
編輯開啟，把自己的 client conf 貼進去～ 還有是說 底下那段 conf 是也有不太一樣就是～
那段是特定要加給 servlet 讀進去改掉的內容 （JAVASCRIPT_ESCAPED_POST_BODY）～

  var config =
    // Copy and paste client configuration here
  ;
  // The HTTP POST body should be escaped by the server to prevent XSS
  window.google.identitytoolkit.start(
      '#gitkitWidgetDiv', // accepts any CSS selector
      config,
      'JAVASCRIPT_ESCAPED_POST_BODY');

然後終於～～～可以測試了Orz...
Run GitkitExample.java

http://localhost:4567/

然後按按紐，就會導去
http://localhost:4567/gitkit
接著 server 就會轉去 google 再下來了～～
（有興趣開 firebug就發現他有努力的在跑一些資料下來，不過基本上都是 google 自己做掉了，總之重點是有看有沒有紅字Orz...如果看到啥403 還 404 之類的，就大概知道問題在那）

然後就被嫌棄了XD...

如果你開 firebug 之類的看 console...應該就可以看到一串錯誤訊息，大概就是
https://www.googleapis.com/identitytoolkit/xxxxxxx?key=YYYYYYYY
確認一下，那個 apiKey的網段設定是怎樣的～
如果通過的話～就會看到 授權頁面囉～

授權頁的資訊在這裡設定的，包含連絡人等....

整體的設定可以說蠻混亂的，項目也很多～
不過目前我自己整理的說法大概就是～

應用應該都要用 domain name...申請時要有 naming...
然後開發時可以用 localhost （突然覺得localhost 真是個有趣的 domain name...XD）

Identity Toolkit API  --> 是 google api，每個 API 都要有 API_KEY 才能用
這個 API_KEY 還會對應 可使用的網址 pattern，production僅量設定死一點，以防別人盜用～

google 和你的server 認證的方式是 OAuth2 協定。這個協定會有 Server conf/Client conf。
申請的各種 clientId/ service account 和 公私鑰檔 就是為了完成  server conf/client conf 的內容～

而 Java/php/..etc quick start 都是一個簡單的範例 server，實作了如何應用 server conf/client conf 的內容和 google 溝通～
不過實際面後續還有如何將這些項目整進原本自己的系統內應用～

總覺得這路比想像的長阿|||Orz...