Verge3D: eigener Code

Python-Funktionen transformieren

Im Browser ist nicht mehr Python die Sprache der Wahl, sondern JavaScript. Deshalb ist eine Übersetzung notwendig, die Implementierung der Logik für den Browser kann auf zweierlei Art und Weise erfolgen:

1. im Puzzle-Editor (wird später erläutert)

2. manuell in der schon genannten JavaScript-Funktion runCode (weiter unten gezeigt)

function runCode() {
 // add your code here, e.g. console.log('Hello, World!');

}

An dieser Stelle werden nur die Funktionen zur Übernahme bereitgestellt. Es gibt drei Funktionen/Abschnitte die ineinander greifen:

• Farben definieren

• TimeStamp erzeugen und zerlegen

• Elemente im Browser manipulieren (Farben austauschen)

function runCode() {
    // add your code here, e.g. console.log('Hello, World!');

    // add your code here, e.g. console.log('Hello, World!');
    //    myclock(); // ein einzelner Aufruf

    // colors
    
    var off = new v3d.Color(0x00ff00);
    var on = new v3d.Color(0xf0ff0);
    var sec_even = new v3d.Color(0x000fff);
    var sec_odd = new v3d.Color(0x00cccc);
    var quarter = new v3d.Color(0xff0000);

    // start the clock 
    setInterval(myclock, 1000);
	    
    function myclock () {
	// set colors for each object dependend of the content
	// in a timestamp
	
	var ts = getTimeStamp();
	var myObj = app.scene.getObjectByName('seconds');

	for (var key in ts) {
	    var myObj = app.scene.getObjectByName(key);
	    // all objects
	    if(ts[key] == true) {
		myObj.material.diffuseColor = on;
	     } else {
		 myObj.material.diffuseColor = off;
	     }
	    // quarter
	    if((ts[key] == true && key == 'minute_03') ||
	       (ts[key] == true && key == 'minute_06') ||
	       (ts[key] == true && key == 'minute_09' ))
	    {
		myObj.material.diffuseColor = quarter;
	    }
	    // seconds
	    if( ts[key] == true && key == 'seconds' ){
		myObj.material.diffuseColor = sec_even;
            } else if ( ts[key] == false && key == 'seconds' ) {
		myObj.material.diffuseColor = sec_odd;
	    }
	}
	return;
    }

    function getTimeStamp (){
   
     // get all parts of the actual time

     var datum = new Date()
     var timestamp =  {}
     // Sekunden
     timestamp.seconds = datum.getSeconds() % 2 > '0'
     // 5-hour parts
     timestamp.hour_01 = datum.getHours() > '4'
     timestamp.hour_02 = datum.getHours() > '9'
     timestamp.hour_03 = datum.getHours() > '14'
     timestamp.hour_04 = datum.getHours() > '19'
     // 1-hour parts
     timestamp.hour_05 = datum.getHours() % 5 > '0'
     timestamp.hour_06 = datum.getHours() % 5 > '1'
     timestamp.hour_07 = datum.getHours() % 5 > '2'
     timestamp.hour_08 = datum.getHours() % 5 > '3'
     //  5-minute parts
     timestamp.minute_01 = datum.getMinutes() > '4'
     timestamp.minute_02 = datum.getMinutes() > '9'
     timestamp.minute_03 = datum.getMinutes() > '14'
     timestamp.minute_04 = datum.getMinutes() > '19'
     timestamp.minute_05 = datum.getMinutes() > '24'
     timestamp.minute_06 = datum.getMinutes() > '29'
     timestamp.minute_07 = datum.getMinutes() > '34'
     timestamp.minute_08 = datum.getMinutes() > '39'
     timestamp.minute_09 = datum.getMinutes() > '44'
     timestamp.minute_10 = datum.getMinutes() > '49'
     timestamp.minute_11 = datum.getMinutes() > '54'
     //  1-minute parts
     console.log(datum.getMinutes() % 5);
     timestamp.minute_12 = datum.getMinutes() % 5 > '0'
     timestamp.minute_13 = datum.getMinutes() % 5 > '1'
     timestamp.minute_14 = datum.getMinutes() % 5 > '2'
     timestamp.minute_15 = datum.getMinutes() % 5 > '3'
     //console.log(timestamp);
     return timestamp;

    }
}
});