以HTML5畫CropCircle--save() & restore() & clip()

Your browser does not support the canvas element. 這個麥田圈不是很容易"反向工程",不過也剛好可以讓Jimmy's papa可以練習下列幾個重要的canvas函數,但是不知道製作麥田圈的"地外文明"人士是如何辦到的,Jimmy's papa試過很多方式微調參數,想讓中間剪裁出來的圓圈裡頭的黑白條紋,可以很精準的對應到兩旁同心圓的白黑條紋,可惜都會有些許的空隙出現,Jimmy's papa在想是否因為採用2d的作圖方式才會產生如此落差呢?

context.save()       //目前設定狀態存入堆疊
context.restore()    //回存設定狀態取自堆疊
context.translate()  //位移矩陣
context.rotate()     //旋轉矩陣
context.clip()       //剪裁遮罩

<canvas id="myCropCircle0426" width="600" height="300" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

<script type="text/javascript">
<!--

function drawTwinCircles(context,centerX,centerY,radius,d)
{
    context.save();
    context.translate(450,-150);
    context.rotate(Math.PI*2/4);
    //-----------
    context.fillStyle="black";
    context.beginPath();        
    context.arc(centerX+radius/6+d,centerY,radius/6,0, 2*Math.PI,false);
    context.fill();
    context.beginPath();        
    context.arc(centerX+radius*2-radius/6-d,centerY,radius/6,0, 2*Math.PI,false);
    context.fill();
    //-----------
    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.fill();
    context.lineWidth=10;
    context.strokeStyle="white"; 
    context.stroke();    


    context.restore();
}


function drawTwinConcentricCircles(context,centerX,centerY,radius,d)
{
    context.save();
    for (var i=6;i>0;i--)
    {
        if((i%2)==0)
            context.fillStyle="black";
        else
            context.fillStyle="white";
        context.beginPath();        
        context.arc(centerX+radius/6+d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
        context.beginPath();        
        context.arc(centerX+radius*2-radius/6-d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();

    }


    context.restore();
}


function drawFloatTwinConcentricCircles(context,centerX,centerY,radius,d)
{
    context.save();
    context.translate(450,-150);
    context.rotate(Math.PI*2/4);

    // Create a circular clipping path        
    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.clip();

    context.beginPath();
    context.arc(300,150,125-15,0,Math.PI*2,true);
    context.fill();

    for (var i=6;i>0;i--)
    {
        if((i%2)==0)
            context.fillStyle="white";
        else
            context.fillStyle="black";
        context.beginPath();        
        context.arc(centerX+radius/6+d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
        context.beginPath();        
        context.arc(centerX+radius*2-radius/6-d,centerY,radius/6*i,0, 2*Math.PI,false);
        context.fill();
    
    }


    context.restore();
}



    var canvas=document.getElementById("myCropCircle0426");
    var context=canvas.getContext("2d");

    var d = 3;

    var draw1=setTimeout("drawTwinCircles(context,150,150,150,d)",1000);
    var draw2=setTimeout("drawTwinConcentricCircles(context,150,150,150,d)",2000);
    var draw3=setTimeout("drawFloatTwinConcentricCircles(context,150,150,150,d)",3000);


-->
</script>

Joule Thief--焦耳神偷 吸" 電 "大法

Jimmy's papa最近在看很新奇的漩渦數學(不是火影忍者的漩渦鳴人喔!)時,不小心看到有人介紹Joule Thief這個簡單的電路,很好奇看完YouTube一堆影片後,Jimmy's papa在想如果線圈做得夠大的話,吸到的電不知道夠不夠啟動冰箱冷氣啊?

這段影片介紹如何以便宜的電子元件製作Joule Thief電路的LED照明,讓廢電池起死回生

Jimmy's papa還沒時間仔細研究這段影片,不過似乎是在實驗說12伏特的蓄電池可以用來驅動9瓦的省電燈泡

開始教Jimmy用BricxCC寫NXC程式

今天晚上教Jimmy在Ubuntu上用BricxCC寫NXC程式,就是很那種簡單的PlayTone程式,編譯完後,再以JNXT/Scratch將.rxe檔案Push到NXT機器人上,最後是執行程式,然後是回頭再次修改參數,當然我知道寫code對Jimmy來說太難了,但是我初步只想讓他對整個流程有個粗淺的印象