generative

Programmiert

Heft 1 1 : Aufruf für Beiträge für das 1 1 . Heft zum Thema „programmiert“ Beiträge, die sich anhand des
eigenen Unterrichts aber auch aus der Aussensicht auf das schulische Geschehen mit dem Thema beschäftigen
– insbesondere aus folgenden drei Feldern – sind sehr erwünscht.  Hier der vollständige Aufruf  (Text und Folien)
 

Landschaften oder Erhebungen

alternative landscape- skalieren nötig

Ice in JS

http://www.mikolaskova.cz/ice/ice_softw/ice_js_00/

mousedown neue Fläche an Mausposition

B: stop animation

C: save PNG

wird nach den ersten 20 objekten extrem langsam

Friday sailing

Inhalt eines HTML-Elements herunterladen

var text=document.getElementById("xml").innerHTML;
window.open('data:text/svg+xml;charset=utf-8,' + escape(text));

HTML 5 Canvas als SVG

JS Canvas als Bild slpeichern

 put_Image(c);

function put_Image(c)
{
    
    var image = c.toDataURL("image/png").replace("image/png", "image/octet-stream");  // here is the most important part because if you dont replace you will get a DOM 18 exception.

window.location.href=image; // it will save locally
            
       
  }
       

Kann ich den Speicherort bestimmen? Oder nur im Browser?

Das Bild vorher auf eine höhere Auflösung skalieren

Canvas Animation Framerate

Animation: requestAnimationFrame(animate)

Framerate: setTimeout (function(){...anim-code inkl. requestAnimFrame...},1000/fps);

 

 var fps = 100;
           

            function animate() {
                
                setTimeout(function(){
                var arrayLength = forms.length;
                for (var i = 0; i < arrayLength; i++) {
                    forms[i].scale();

                }
                form = new Form(x, y);
                if (fps>1)
                {fps=fps-1;}
                else{fps=0.3;}
//               alert(fps);

                forms.push(form);

                var arrayLength = forms.length;

                for (var i = 0; i < arrayLength; i++) {
                    draw_form(forms[i], ctx);

                }

                var min = -100;
                var max = window.innerWidth;
// and the formula is:
                var random = Math.floor(Math.random() * (max - min + 1)) + min;
                x = random;
                var random = Math.floor(Math.random() * (max - min + 1)) + min;
                y = random;

                requestAnimationFrame(animate);
            },1000/fps);
           
            }

sailing

flat

next

Ice in die dritte Sprache übersetzt- JavaScript

Processing - JavaScript/Canvas - JavaScript/SVG - JavaScript, JQuery

Anforderungen

  • muss im Browser laufen
  • beliebig manipulierbare Bezier-Kurven
  • skalierbar zum drucken
  • fullscreen- autodetect display

direkter als processing->processing in netbeans...>processing.js...

 

nachteil JavaScript

keine Klassen/Objekte

Processing Community ist mit ähnlicheren Problemen beschäftigt

Wie generiere ich mehrere Objekte, auf die ich auch später wieder zugreifen kann?

Nur via Array?

Brown Touch Ice

Subscribe to RSS - generative