Der Cosinusgenerator

Aktuelle Programmier- und Auszeichnungssprachen HTML / CSS / JavaScript
1

Hallo liebe Leute, :smiley:

ich habe jetzt überall im Internet danach gesucht, aber ich finde es einfach nicht! Die Folien meines Dozenten taugen leider auch überhaupt nix :verzweifel:

Ich habe folgende Aufgabe bekommen:
Erstellen Sie die Anwendung Cosinusgenerator mit einer Schwingung mit 25 Bilder/s, 720 Pixel (horizontal) und im 16:9 Format:

Erstelle einen horizontalen Cosinus- Filmgenerator mit 25 Bilder/s (Bildfrequenz), Canvas mit 100%, 72 px horizontal (samplingrate).

P.s.: Ihr müsst jetzt auch keine Angst haben und denken das ihr meine Hausaufgaben macht. Die Aufgabe wurde schon ohne mich erledigt und ich würde trotzdem gerne verstehen wie das funktioniert und wie ich den Quellcode verändern muss damit ich eine Sichtbare Cosinuskurve bekomme. Meine Kollegen möchte ich ungern fragen, weil sie sonst selber kaum weiterkommen.

Hier ist der folgende HTML/JavaScript - Code dafür:

<html lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
     <title>Video Data: Filmgenerator</title>
	 

  </head>
  <body>
    <h1>Filmgenerator</h1>
    <input type="text" size="4" id="farbe" value="150"><label> Helligkeit</label>
    <button onclick="start()">play</button>
    <button onclick="stop()">stop</button>
    <p><canvas id="myCanvas" width="100" height="100">
	</p>
  
<script type="text/javascript"><!--

    var intervalId;
	  

    var elem = document.getElementById('myCanvas');
    var  farbe ;

  // Get the canvas 2d context.
    var context = elem.getContext('2d');

	cw = 720; // 720 pixel
    ch = 405; // 16: 9 Format (720 / 16 * 9 = 405)
    length= cw*ch*4; 
	elem.width = cw;
    elem.height = ch;
    var imgd = false,
    w = cw, h = ch,
    x = 0,  y = 0;

  // Not all browsers implement createImageData. On such browsers we obtain the 
  // ImageData object using the getImageData method. The worst-case scenario is 
  // to create an object *similar* to the ImageData object and hope for the best 
  // luck.
  if (context.createImageData) {
    imgd = context.createImageData(w, h);
  } else if (context.getImageData) {
    imgd = context.getImageData(0, 0, w, h);
  } else {
    imgd = {'width' : w, 'height' : h, 'data' : new Array(w*h*4)};
  }
	var pix = imgd.data;


     // call playback per samples array
function start() {
    farbe = parseFloat(document.getElementById("farbe").value);
    clearInterval(intervalId);
    intervalId = setInterval(playMedia, 25); // 25 bilder pro Sekunde
}
    // Loop over each pixel.
function playMedia() {
  for (var i = 0, n = pix.length; i < n; i += 4) {
    pix[i+4  ] = farbe; // the red channel // Rote Farbe
	pix[i+3  ] = farbe;     // the green channel
	pix[i+2  ] = farbe;     // the blue channel
    pix[i+3] = 255; // the alpha channel
	
  }

  // Draw the ImageData object.
  context.putImageData(imgd, x, y);
}

function stop() {
    clearInterval(intervalId);
}
    // --></script>
</body>
</html> ```
2

Sooo weit weg ist das doch gar nicht. Allerdings stimmen die Indizes hier nicht

pix[i+4  ] = farbe; // the red channel // Rote Farbe
pix[i+3  ] = farbe;     // the green channel
pix[i+2  ] = farbe;     // the blue channel
pix[i+3] = 255; // the alpha channel

Wo die 4,3,2,3 herkommen, ist nicht ganz klar. Das sollten 0,1,2,3 sein.

Ansonsten muss die “farbe” sich halt noch mit der Zeit ändern. Bin kein JavaScript-Experte, aber da KÖNNTE irgendwo GROB sowas wie

       var d = new Date();
       var n = d.getMilliseconds();
       var farbe = (0.5 + 0.5 * Math.cos(n / 1000.0 * Math.PI * 2)) * 255;

in der funktion stehen (die andere “farbe” braucht man wohl nicht - die ändert sich ja eh nie…)