Quelltext der Seite Jasmina

Sortierung der Bilder nach Datum:

<gallery>
TableauTag1.jpg|1.2.21

Bild1.jpg|3.2.21
Bild2.jpg|3.2.21
Bild 3.jpg|3.2.21

Bild 4.jpg|4.2.21
Bild 5.jpg|4.2.21

Bild 6.jpg|4.2.21

Bild 7.jpg|4.2.21

Bild 8.jpg|9.2.21

Bild 9.jpg|9.2.21
Bild 10.jpg|9.2.21
Bild 11.jpg|9.2.21
Bild 12.jpg|9.2.21

</gallery>


Neue Sortierung der Bilder nach abgewechselter Nummerierung von vorne nach hinten:

<gallery>
TableauTag1.jpg|1
Bild 12.jpg|12
Bild2.jpg|2
Bild 11.jpg|11
Bild 3.jpg|3
Bild 10.jpg|10
Bild 4.jpg|4
Bild 9.jpg|9
Bild 5.jpg|5
Bild 8.jpg|8
Bild 6.jpg|6
Bild 7.jpg|7
</gallery>





[[Datei:P5-rumprobiere.mp4|mini]]

Die obige Variable Counter bestimmt die Position des sich bewegenden Kreises. Sie wird regelmäßig um 20 erhöht, wodurch sich die Position des Kreises weiter Richtung rechts unten bewegt. Der Kreis ist jedoch nur sichtbar, wenn man nicht auf den Bildbereich klickt.
Die vertikalen und horizontalen rosa Streifen werden durch eine Schleife erzeugt, welche immer an der Position (50 + i, i) eine 10 Pixel breites (vertikale Streifen) oder 10 Pixel hohes (horizontale Streifen) Rechteck malt. Die Länge der Streifen wird durch `width/2` bestimmt und beträgt somit die halbe Breite des Bildes.




var c;

let counter = 0;

function setup() {
  c = createCanvas(windowWidth-20, windowHeight-20);
  frameRate(10);
}



function draw() {
  background(190);
  noStroke();
  counter = counter + 20; 
    if (counter >= 0.25 * width) {
    counter = 0;
  }
 if (! mouseIsPressed) {
      fill(255,105,180);
      ellipse(90 + 4 * counter,50 + 4 * counter,80,80);
    }
  for (let i = 0- 80 ; i < height; i += 20) {
    fill(255,105,180);
    rect(50 + i, i, width / 2, 10);
    fill(255,105,180);
    rect(50 + i, i, 10, width / 2);
  }
}





[[Datei:Lara.jpg|mini|Erstellt mit Hilfe von Lara S. ;)]]