Computer-Ag am WvS Blog der Computer-AG am Werner von Siemens Gymnasium Berlin

16. Dezember 2016

16.12.2016

Letzte Mal in diesem Jahr. Michael ist da, Morten und Long Yang. Frau Spyra und Jens waren auch da. Nächste Mal im nächsten Jahr …;

9. Dezember 2016

9.12.2016

Heute vorletzte Mal in diesem Jahr. Erstmal keiner da. Angelo und Moritz wollten kommen. Angelo und Moritz sind da. Wir reden über den Beweis vom Satz von Pythagoras. Angelo und Moritz reden über irgendwas mit Prozessor Emulation (vom letzten Mal, Aufgabe die Michael mitgebracht hatte).

Julian ist auch da. Sie machen was mit HP-Plotter.

Den Schnee mit Parallaxeneffekt angepasst (kleinere Flocken langsamer):

 

 

<?php
error_reporting(E_NOTICE|E_ALL);
//echo $_SERVER["REMOTE_ADDR"];
// echo $_SERVER["HTTP_HOST"];

//~ call_user_func
//~ function_exists


class Request
{
public static $queries = array (
"reset",
//        "addClient",
"startStatus",
"stopStatus",
"checkMyTurn",
"checkIps",
"finished",
"admin"
);

public static function check()  {
foreach(self::$queries as $query) {
if (isset($_GET[$query])) {
$callMethod = array("Data",$query);
if (is_callable($callMethod)) {
call_user_func($callMethod);
}
return $query;
}
}
Data::addClient();
return "showPage";
}
}

abstract class SerializedData
{
protected function _write($filename, $data) {
file_put_contents($filename, serialize($data));
}

protected function _read($filename) {
return unserialize(file_get_contents($filename));
}

}

class Data extends SerializedData
{
private static $_ipsStorageFileName = "xmas_ips.ser";
private static $_statusFileName = "xmas_status.ser";


private function _writeIps($data) {
self::_write(self::$_ipsStorageFileName, $data);
}

private static function _getNextIp($finishedIp) {
$currentClients = self::readIps();
foreach($currentClients as $key => $clientIp) {
if ($finishedIp == $clientIp) {
$nextKey = $key + 1;
if ($nextKey == count($currentClients)) {
$nextKey = 0;
}
return $currentClients[$nextKey];
}
}
}

private static function _resetStatus() {
self::_write(self::$_statusFileName,array());
}

private static function _setStatus($ip, $startOrStop = "stop") {
$ipStatus = self::_read(self::$_statusFileName);
$ipStatus[$ip] = $startOrStop;
self::_write(self::$_statusFileName,$ipStatus);
}

public static function reset() {
self::_writeIps(array());
self::_resetStatus();
}

public static function readIps() {
return self::_read(self::$_ipsStorageFileName);
}

public function addClient() {
$ip = $_SERVER["REMOTE_ADDR"];
$currentClients = self::readIps();
$currentClients[] = $ip;
$currentClients = array_unique($currentClients);
self::_writeIps($currentClients);
self::_setStatus ($ip, "stop");
}

public static function startStatus() {
$currentClients = self::readIps();
self::_setStatus($currentClients[0], "start");
}

public static function stopStatus() {
$currentClients = self::readIps();
foreach($currentClients as $ip) {
self::_setStatus($ip, "stop");
}
}


public static function getStatus($ip) {
$ipStatus = self::_read(self::$_statusFileName);
return $ipStatus[$ip];
}

public static function getAllStatus() {
$ipStatus = self::_read(self::$_statusFileName);
return $ipStatus;
}

public static function finished()  {
$finishedIp = $_SERVER["REMOTE_ADDR"];
self::_setStatus($finishedIp, "stop");
self::_setStatus(self::_getNextIp($finishedIp), "start");
}

}
?>
<?php switch (Request::check()):
case "admin":?>
<h1>Admin</h1>
<ul>
<?php foreach(Request::$queries as $query):?>
<?php if(in_array($query, array("admin","finished"))) {continue;}?>
<li><a href="?<?=$query?>"><?=$query?></a></li>
<?php endforeach?>
<div style="border:1px solid black;margin-top:3em" id="output">
hier kommt was rein
</div>
<script>
outputDiv = document.getElementById("output");
myAnchors = document.getElementsByTagName("a");
url = new Array;
for (i=0; i < myAnchors.length; i++) {
url[i] = myAnchors[i].href;
myAnchors[i].onclick = function() {
var myAjax=new XMLHttpRequest();
myAjax.open("GET",this.href,true);
myAjax.onreadystatechange=function()  {
if (myAjax.readyState==4 && myAjax.status==200)     {
outputDiv.innerHTML = myAjax.responseText;
}
}
myAjax.send(null);
return false;
}
}
</script>
<?php break;?>
<?php case "reset":?>
<h1>resetialisierung gestartet</h1>
<h2> zum Beweis Ausgabe der Speicherdatei Ips:</h2>
<pre>
<?php var_dump(Data::readIps());?>
</pre>
<pre>
<h2>zum Beweis Ausgabe der Speicherdatei Status:</h2>
<pre>
<?php var_dump(Data::getAllStatus());?>
</pre>
<?php break;?>
<?php case "addClient":?>
<h1><?=htmlentities("Client hinzugefügt");?></h1>
<p> zum Beweis Ausgabe der Speicherdatei:</p>
<pre>
<?php var_dump(Data::readIps());?>
</pre>
<?php break;?>
<?php case "checkMyTurn":?><?php echo Data::getStatus($_SERVER["REMOTE_ADDR"])?><?php break;?>
<?php case "startStatus":?>
<?php case "checkIps":?>
<h1><?=htmlentities("Programm läuft")?></h1>
<h2>Angemeldete Client-Ips</h2>
<?php
$statusPerIp = Data::getAllStatus();
?>
<table>
<?php foreach(Data::readIps() as $ip):?>
<tr><td><?=$ip?></td><td>
<?=$statusPerIp[$ip]?></td>
</tr>
<?php endforeach?>
<pre>
<?php var_dump(Data::readIps())?>
</pre>
<pre>
<?php var_dump(Data::getAllStatus())?>
</pre>
<?php break;?>
<?php case "stopStatus":?>
<h1>Programm gestoppt</h1>
<pre>
<?php var_dump(Data::getAllStatus())?>
</pre>
<?php break;?>
<?php case "showPage":?>
<body style="padding:0;margin:0;background-color:#324;overflow:hidden">
<img id="background" src="gletschermond.jpg" style="position:absolute;top:0px;left:0px;width:1024px;z-index=-1">
<div id="imgdiv" style="padding:0;margin:0;width:1022px;overflow:hidden;height:768px">
<img id="weihnachtsmann" style="position:absolute;right:-150px;top:300px;" src="jens.png"; width="150px";>
<script type="text/javascript">
document.getElementById("background").style.width = screen.width +"px";
document.getElementById("imgdiv").style.width = (screen.width-2) +"px";
document.getElementById("imgdiv").style.height = (screen.height-2) +"px";
myImgStyle = document.getElementById("weihnachtsmann").style;
startPosition = -screen.width +2;//1022;//(-1* screen.width) +50;
startPosition = -screen.width +2;//1022;//(-1* screen.width) +50;
startPosition = -150;
//1022;//(-1* screen.width) +50;
//myImgStyle = document.getElementById("weihnachtsmann").style.right = startPosition + "px";
currentPosition = startPosition;
endPosition = 260;
endPosition = screen.width +150;
triggerPosition = endPosition - 150;
status = "stop";
timeOut = 20;
timeOut = 20;
pixelsPerMove = 8;
pixelsPerMove = 15;
finished = 0;
finishedTold = 0;
//alert(screen.width);
move = function() {
if (currentPosition < endPosition) { //&& status == "start"
if (currentPosition > triggerPosition && finishedTold == 0) {
tellFinished();
finishedTold = 1;
}
finished = 0;
myImgStyle.right = currentPosition + "px";
currentPosition += pixelsPerMove;
setTimeout("move()",timeOut);
} else {
currentPosition = startPosition;
myImgStyle.right = currentPosition + "px";
finishedTold = 0;
getStatus();
return;
}
}
getStatus = function() {
var startStopPage = "laufen.js.php?checkMyTurn";
var    myAjax=new XMLHttpRequest();
myAjax.open("GET",startStopPage,true);
myAjax.onreadystatechange=function()  {
if (myAjax.readyState==4 && myAjax.status==200)     {
//~ alert("Testausgabe: "+ myAjax.responseText);
//~ alert("Testausgabe finished: "+ finished);
//~ alert(typeof(myAjax.responseText.toString()));
//~ alert("myAjax.responseText.toString(): "+ myAjax.responseText.toString());
//~ alert(typeof("stop"));
//~ alert("start" == myAjax.responseText.toString());
if ("start" == myAjax.responseText.toString() && finished == 0) {
status = "start";
move();
} else {
status = "stop";
setTimeout("getStatus()",1000);
}
}
}
myAjax.send(null);
}
tellFinished = function() {
var finishedPage = "laufen.js.php?finished";
var    myAjax=new XMLHttpRequest();
myAjax.open("GET",finishedPage,true);
myAjax.onreadystatechange=function()  {
if (myAjax.readyState==4 && myAjax.status==200)     {
if (finished == 0) {
//alert("finished sent to server");
//finished = 1;
status = "stop";
}
return;
}
}
myAjax.send(null);
}
getStatus();

window.onload = function() {
DB=document.getElementsByTagName("body")[0];
//    DB.style.backgroundColor = "#000";
myFontSize = new Array;
for (i = 40; i<screen.width;i += 60) {
window["star"+i]=document.createTextNode("*");
window["div"+i]=document.createElement("div");
window["div"+i].appendChild(window["star"+i]);
DB.appendChild(window["div"+i]);
window["div"+i].style.color="#fff";
myFontSize[i] = Math.ceil(Math.random()*40);
myFontSize[i] = Math.ceil(Math.random()*30) + 10;
window["div"+i].style.fontSize=myFontSize[i] + "px";
window["div"+i].style.position="absolute";
window["div"+i].style.left=10 + i + "px";
window["div"+i].style.top="-"+(myFontSize[i] + 40)+"px";
window["y"+i]=-myFontSize-40;
window["x"+i] = i;
window["snow"+i] = function (j) {
fontSize = myFontSize[j];
//~ console.log(fontSize);
functionCall = 'window["snow'+j+'"]('+j+')';
if (window["y"+j]<screen.height + 20) {
//~ window["y"+j] += 3;
window["y"+j] += fontSize/5;
window["div"+j].style.top = window["y"+j] + "px";
window["div"+j].style.left = window["x"+j] + 2*Math.sin(window["y"+j]/5) + "px";
setTimeout(functionCall,100);
}    else {
window["y"+j]= -myFontSize[j];
setTimeout(functionCall,100);
}
}
functionCallNow = 'window["snow'+i+'"]('+i+')';
setTimeout(functionCallNow,Math.random()*50000);
}
// der eine stern, schlechter code ...;
star=document.createTextNode("*");
div=document.createElement("div");
div.appendChild(star);
//    DB.appendChild(div);
div.style.position="absolute";
div.style.left="10px";
div.style.top="10px";
div.style.color = "white";
y= -10;
x = 10;
snow = function () {
if (y<screen.height + 20) {
y += 1;
div.style.top = y + "px";
div.style.left = x + 2*Math.sin(y/3) + "px";
setTimeout("snow()",10);
}
else {
y= -10;
setTimeout("snow()",10);
}
}
//snow();
void(0);
}
</script>
</div>
<?php break;?>
<?php endswitch;?>


Und mit größenanpassung: 

<?php
error_reporting(E_NOTICE|E_ALL);
//echo $_SERVER["REMOTE_ADDR"];
// echo $_SERVER["HTTP_HOST"];

//~ call_user_func
//~ function_exists


class Request 
{
    public static $queries = array (
        "reset",
//        "addClient",
        "startStatus",
        "stopStatus",
        "checkMyTurn",
        "checkIps",
        "finished",
        "admin"
    );

    public static function check()  {
        foreach(self::$queries as $query) {
            if (isset($_GET[$query])) {
                $callMethod = array("Data",$query);
                if (is_callable($callMethod)) {
                    call_user_func($callMethod);
                }
                return $query;
            } 
        }
        Data::addClient();
        return "showPage";
    }    
}

abstract class SerializedData 
{
    protected function _write($filename, $data) {
        file_put_contents($filename, serialize($data));
    }

    protected function _read($filename) {
        return unserialize(file_get_contents($filename));
    }

}

class Data extends SerializedData
{
    private static $_ipsStorageFileName = "xmas_ips.ser";
    private static $_statusFileName = "xmas_status.ser";


    private function _writeIps($data) {
        self::_write(self::$_ipsStorageFileName, $data);
    }

    private static function _getNextIp($finishedIp) {
        $currentClients = self::readIps();
        foreach($currentClients as $key => $clientIp) {
            if ($finishedIp == $clientIp) {
                $nextKey = $key + 1;
                if ($nextKey == count($currentClients)) { 
                    $nextKey = 0;
                }
                return $currentClients[$nextKey];
            }
        }
    }

    private static function _resetStatus() {
        self::_write(self::$_statusFileName,array());
    }

    private static function _setStatus($ip, $startOrStop = "stop") {
        $ipStatus = self::_read(self::$_statusFileName);
        $ipStatus[$ip] = $startOrStop;
        self::_write(self::$_statusFileName,$ipStatus);
    }

    public static function reset() {
        self::_writeIps(array());
        self::_resetStatus();
    }

    public static function readIps() {
        return self::_read(self::$_ipsStorageFileName);
    }

    public function addClient() {
        $ip = $_SERVER["REMOTE_ADDR"];
        $currentClients = self::readIps();
        $currentClients[] = $ip;
        $currentClients = array_unique($currentClients);
        self::_writeIps($currentClients);
        self::_setStatus ($ip, "stop");
    }
    
    public static function startStatus() {
        $currentClients = self::readIps();
        self::_setStatus($currentClients[0], "start");
    }

    public static function stopStatus() {
        $currentClients = self::readIps();
        foreach($currentClients as $ip) {
            self::_setStatus($ip, "stop");
        }
    }


    public static function getStatus($ip) {
        $ipStatus = self::_read(self::$_statusFileName);
        return $ipStatus[$ip];
    }

    public static function getAllStatus() {
        $ipStatus = self::_read(self::$_statusFileName);
        return $ipStatus;
    }

    public static function finished()  {
        $finishedIp = $_SERVER["REMOTE_ADDR"];
        self::_setStatus($finishedIp, "stop");
        self::_setStatus(self::_getNextIp($finishedIp), "start");
    }

}
?>
<?php switch (Request::check()): 
case "admin":?>
    <h1>Admin</h1>
    <ul>
    <?php foreach(Request::$queries as $query):?>
    <?php if(in_array($query, array("admin","finished"))) {continue;}?>
    <li><a href="?<?=$query?>"><?=$query?></a></li>
    <?php endforeach?>
    <div style="border:1px solid black;margin-top:3em" id="output">
    hier kommt was rein
    </div>
    <script>
    outputDiv = document.getElementById("output");
    myAnchors = document.getElementsByTagName("a");
    url = new Array;
    for (i=0; i < myAnchors.length; i++) {
        url[i] = myAnchors[i].href;
        myAnchors[i].onclick = function() {
            var myAjax=new XMLHttpRequest();
            myAjax.open("GET",this.href,true);
            myAjax.onreadystatechange=function()  {
                if (myAjax.readyState==4 && myAjax.status==200)     {
                    outputDiv.innerHTML = myAjax.responseText;
                }
            }
            myAjax.send(null);
            return false;
        }    
    }
    </script>
<?php break;?>
<?php case "reset":?>
    <h1>resetialisierung gestartet</h1>
    <h2> zum Beweis Ausgabe der Speicherdatei Ips:</h2>
    <pre>
    <?php var_dump(Data::readIps());?>
    </pre>
    <pre>
    <h2>zum Beweis Ausgabe der Speicherdatei Status:</h2>
    <pre>
    <?php var_dump(Data::getAllStatus());?>
    </pre>
<?php break;?>
<?php case "addClient":?>
    <h1><?=htmlentities("Client hinzugefügt");?></h1>
    <p> zum Beweis Ausgabe der Speicherdatei:</p>
    <pre>
    <?php var_dump(Data::readIps());?>
    </pre>
<?php break;?>
<?php case "checkMyTurn":?><?php echo Data::getStatus($_SERVER["REMOTE_ADDR"])?><?php break;?>
<?php case "startStatus":?>
<?php case "checkIps":?>
    <h1><?=htmlentities("Programm läuft")?></h1>
    <h2>Angemeldete Client-Ips</h2>
    <?php 
    $statusPerIp = Data::getAllStatus();
    ?>
    <table>
    <?php foreach(Data::readIps() as $ip):?>
    <tr><td><?=$ip?></td><td>
    <?=$statusPerIp[$ip]?></td>
    </tr>
    <?php endforeach?>
    <pre>
    <?php var_dump(Data::readIps())?>
    </pre>
    <pre>
    <?php var_dump(Data::getAllStatus())?>
    </pre>
<?php break;?>
<?php case "stopStatus":?>
    <h1>Programm gestoppt</h1>
    <pre>
    <?php var_dump(Data::getAllStatus())?>
    </pre>
<?php break;?>
<?php case "showPage":?>
<body style="padding:0;margin:0;background-color:#324;overflow:hidden">
<img id="background" src="gletschermond.jpg" style="position:absolute;top:0px;left:0px;width:1024px;z-index=-1">
<div id="imgdiv" style="padding:0;margin:0;width:1022px;overflow:hidden;height:768px">
<img id="weihnachtsmann" style="position:absolute;right:-150px;top:300px;" src="jens.png"; width="150px";>
<script type="text/javascript">
document.getElementById("background").style.width = screen.width +"px";
document.getElementById("imgdiv").style.width = (screen.width-2) +"px";
document.getElementById("imgdiv").style.height = (screen.height-2) +"px";
myImgStyle = document.getElementById("weihnachtsmann").style;
startPosition = -screen.width +2;//1022;//(-1* screen.width) +50;
startPosition = -screen.width +2;//1022;//(-1* screen.width) +50;
startPosition = -150;
//1022;//(-1* screen.width) +50;
//myImgStyle = document.getElementById("weihnachtsmann").style.right = startPosition + "px";
currentPosition = startPosition;    
endPosition = 260;
endPosition = screen.width +150;
triggerPosition = endPosition - 150;
status = "stop";
timeOut = 20;
timeOut = 20;
pixelsPerMove = 8;
pixelsPerMove = 15;
finished = 0; 
finishedTold = 0;
//alert(screen.width);
move = function() {
    if (currentPosition < endPosition) { //&& status == "start"
        if (currentPosition > triggerPosition && finishedTold == 0) {
            tellFinished();
            finishedTold = 1;
        }
        finished = 0; 
        myImgStyle.right = currentPosition + "px";
        myImgStyle.top = 300 + 20*Math.sin(currentPosition/100) + "px";
        myImgStyle.width = 150 + 20*Math.sin(currentPosition/100) + "px";
        currentPosition += pixelsPerMove;
        setTimeout("move()",timeOut);
    } else {
        currentPosition = startPosition;    
        myImgStyle.right = currentPosition + "px";
        myImgStyle.top = 300 + 100*Math.sin(currentPosition) + "px";
        finishedTold = 0;
        getStatus();
        return; 
    }
}
getStatus = function() {
var startStopPage = "laufen.js.php?checkMyTurn";
var    myAjax=new XMLHttpRequest();
    myAjax.open("GET",startStopPage,true);
    myAjax.onreadystatechange=function()  {
        if (myAjax.readyState==4 && myAjax.status==200)     {
            //~ alert("Testausgabe: "+ myAjax.responseText);
            //~ alert("Testausgabe finished: "+ finished);
            //~ alert(typeof(myAjax.responseText.toString()));
            //~ alert("myAjax.responseText.toString(): "+ myAjax.responseText.toString());
            //~ alert(typeof("stop"));
            //~ alert("start" == myAjax.responseText.toString());
            if ("start" == myAjax.responseText.toString() && finished == 0) {
                status = "start";
                move();
            } else {
                status = "stop";
                setTimeout("getStatus()",1000);
            }
        }
    }
    myAjax.send(null);
}
tellFinished = function() {
    var finishedPage = "laufen.js.php?finished";
    var    myAjax=new XMLHttpRequest();
    myAjax.open("GET",finishedPage,true);
    myAjax.onreadystatechange=function()  {
        if (myAjax.readyState==4 && myAjax.status==200)     {
            if (finished == 0) {
                //alert("finished sent to server");
                //finished = 1;
                status = "stop";
            }
            return;
        }    
    }
    myAjax.send(null);
}
getStatus();

window.onload = function() {
    DB=document.getElementsByTagName("body")[0];
//    DB.style.backgroundColor = "#000";
    myFontSize = new Array;
    for (i = 40; i<screen.width;i += 60) {
        window["star"+i]=document.createTextNode("*");
        window["div"+i]=document.createElement("div");
        window["div"+i].appendChild(window["star"+i]);
        DB.appendChild(window["div"+i]);
        window["div"+i].style.color="#fff";
        //~ myFontSize[i] = Math.ceil(Math.random()*40);
        myFontSize[i] = Math.ceil(Math.random()*30) + 10;
        window["div"+i].style.fontSize=myFontSize[i] + "px";
        window["div"+i].style.position="absolute";
        window["div"+i].style.left=10 + i + "px";
        window["div"+i].style.top="-"+(myFontSize[i] + 40)+"px";
        window["y"+i]=-myFontSize-40;
        window["x"+i] = i;
        window["snow"+i] = function (j) {
            fontSize = myFontSize[j];
            console.log(fontSize);
            functionCall = 'window["snow'+j+'"]('+j+')';
            if (window["y"+j]<screen.height + 20) {
                //~ window["y"+j] += 3;
                window["y"+j] += fontSize/20 ;
                window["div"+j].style.top = window["y"+j] + "px";
                window["div"+j].style.left = window["x"+j] + 2*Math.sin(window["y"+j]/5) + "px";
                setTimeout(functionCall,100);
        }    else {
                window["y"+j]= -myFontSize[j];
                setTimeout(functionCall,100);
            }
        }    
        functionCallNow = 'window["snow'+i+'"]('+i+')';
        setTimeout(functionCallNow,Math.random()*50000);
    }
    // der eine stern, schlechter code ...;
    star=document.createTextNode("*");
    div=document.createElement("div");
    div.appendChild(star);
//    DB.appendChild(div);
    div.style.position="absolute";
    div.style.left="10px";
    div.style.top="10px";
    div.style.color = "white";
    y= -10;
    x = 10;
    snow = function () {
        if (y<screen.height + 20) {
            y += 1;
            div.style.top = y + "px";
            div.style.left = x + 2*Math.sin(y/3) + "px";
            setTimeout("snow()",10);
        }
        else {
            y= -10;
            setTimeout("snow()",10);
        }
    }
    //snow();
void(0);
}
</script>
</div>
<?php break;?>
<?php endswitch;?>

2. Dezember 2016

2.12.2016

Filed under: Allgemein,canvas,Termine,Tisch — admin @ 16:02

Michael ist da, Morten und Angelo. Wir versuchen, Schneeflocken mit Canvas zu machen. Robert baut mit Canvas eine Schneeflocke. S.a. http://localhost/draw_circles.js.html bzw. http://stackoverflow.com/questions/11450030/moving-text-inside-canvas-using-html5. Angelo und Michael machen was mit Logisim.

 

 

   
  
 HTML 5 Animated Text
    <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script-->
<script type="text/javascript">
        var context;
        var text = "";
        var textDirection ="";

        window.onload = function()
        {
        DB=document.getElementsByTagName("body")[0]
       cvs = document.createElement("canvas");
       div = document.createElement("div");
       div.innerHTML = "***";
       DB.appendChild(div);
       DB.appendChild(cvs);
        //~ cvs = document.getElementById("cvs");
        height = screen.height;
        width = screen.width;
        cvs.height = height;
        cvs.width  = width;
            context = cvs.getContext("2d");      
    startY = 5
        startX = 580;
        interval = 50;
        pixelPerMove = 1;
        sinFactor = 5/2;
        textYFactor = 0.5;
            text = "*"; 
            snowFont = '30px _sans';
            snowColor = '#FF0000';
            //~ context.textBaseline = 'top';
        fillColor = '#2fa';
        
    textYpos = startY;
    textXpos = startX;
    textXrunner = 0; 
    textXincrement = 3;
     canvasDrawHeight = height/2;   
        setInterval("animate()", interval);


        //~ alert(height);
        };  

        function animate() {            
            // Clear screen
            context.clearRect(0, 0, width, height);
            context.globalAlpha = 1;
            context.fillStyle = fillColor;
            context.fillRect(0, 0, width, height);    

            var metrics = context.measureText(text);            
        var textWidth = metrics.width;

            //~ if (textDirection == "down") {
                textYpos += pixelPerMove;
        textXpos = textXpos + sinFactor*Math.sin(textYFactor*textYpos);

                if (textYpos > canvasDrawHeight - textWidth) {
                    //textDirection = "left";
                    textYpos  = startY;
                }
            //~ }
            //~ else {
                //~ textYpos -= 10;

                //~ if (textYpos < 10) {
                    //~ textDirection = "down";
                //~ }                    
            //~ }

            context.font = snowFont;
            context.fillStyle = snowColor;
            //~ context.textBaseline = 'top';
            context.fillText  ( text, textXpos, textYpos);    
          }    
          </script>
      
         <!--

<div id="page">
            <canvas id="cvs" width="600" height="600">
               Your browser does not support the HTML 5 Canvas.
            </canvas>
</div>


     -->