Aufgabenserie 07

In dieser Aufgabenserie lernst du mit For Loop umzugehen.

Weitere Informationen dazu findest du unter: For Loop

Aufgabe 01

Welche Zahlen werden in der Konsole ausgegeben?


function setup() {
  for(let i = 0; i <= 5; i++) {
    console.log(i);
  }
}

Lösung

In der Konsole werden die Zahlen 0, 1, 2, 3, 4, 5 ausgegeben.

Aufgabe 02

Welche Zahlen werden in der Konsole ausgegeben?


function setup() {
  for(let i = 10; i < 16; i++) {
    console.log(i);
  }
}

Lösung

In der Konsole werden die Zahlen 10, 11, 12, 13, 14, 15 ausgegeben

Aufgabe 03

Welche Zahlen werden in der Konsole ausgegeben?


function setup() {
  for(let i = 2; i > -4; i--) {
    console.log(i);
  }
}

Lösung

In der Konsole werden die Zahlen 2, 1, 0, -1, -2, -3 ausgegeben.

Aufgabe 04

Welche Zahlen werden in der Konsole ausgegeben?


function setup() {
  for(let i = 8; i <= 8.6; i = i + 0.1) {
    console.log(i);
  }
}

Lösung

In der Konsole werden die Zahlen 8, 8.1, 8.2, 8.3, 8.4, 8.5, 8.6 ausgegeben (gerundet!).

Aufgabe 05

Erstelle einen For Loop, welcher in der Konsole die Zahlen 0, 5, 10, 15, 20 ausgibt.

Lösung


function setup() {
  for(let i = 0; i <= 20; i = i + 5) {
    console.log(i);
  }
}

Aufgabe 06

Erstelle einen For Loop, welcher in der Konsole die Zahlen 0, 1, 4, 9, 16 ausgibt.

Tipp: Es sind die Quadratzahlen, welche du mit i * i berechnen kannst!

Lösung


function setup() {
  for(let i = 0; i <= 4; i++) {
    console.log(i * i);
  }
}

Aufgabe 07

Erstelle ein ähnliches Bild.

Kommentare

Eine Linie erstellst du folgendermassen: line(x1, x2, y1, y2)
Mit stroke(...) definierst du die Farbe der Linie.
Der Startpunkt jeder Linie ist oben in der Mitte.
Der Endpunkt ist unten an einer zufälligen x-Koordinate.

Lösung


function setup() {
  createCanvas(400, 400);
	
  background(100);
  
  stroke(255);
  
  // in der Mitte in waagrechter Richtung
  let x1 = width / 2;
  // ganz oben
  let y1 = 0;
  // ganz unten
  let y2 = height;

  for(let i = 0; i < 50; i++) {
    let x2 = random(width);   // erstellt für jede Linie eine zufällige x-Koordinate als Endpunkt
    line(x1, y1, x2, y2);  // zeichne die Linien
  }
}

Aufgabe 08

Erstelle eine ähnliche Animation.

Kommentare

Speichere die zufälligen x-Koordinaten der Linien in einem Array.
Speichere die Geschwindigkeit der Bewegung in einer Variablen.

Lösung


let xCoords = [];
let nLines = 50;
let x1;  // x1 und y2 werden in function setup() festgelegt
let y1 = 0;
let y2;
let x1_speed = 3;

function setup() {
  createCanvas(400, 400);
	
  for(let i = 0; i < nLines; i++) {
    xCoords[i] = random(width);
  }
  
  // da erst jetzt width und height definiert sind (createCanvas(400, 400))
  // werden erst hier x1 und y2 festgelegt
  x1 = width / 2;
  y2 = height;
	
}

function draw() {
  background(100);
  
  stroke(255);
  
  // alle Linien werden gezeichnet
  for(let i = 0; i < 50; i++) {
    line(x1, y1, xCoords[i], y2);
  }
  
  // hier wird die x-Koordinate des oberen Endes kontinuierlich verändert
  x1 = x1 + x1_speed;
  if(x1 > width || x1 < 0) {
    x1_speed = -x1_speed;  // ändere die Richtung, falls ein Rand berührt wird
  }
}

Bonus

Erstelle eine ähnliche Animation.

Lösung


let xCoords = [];
let nLines = 50;
let x1;
let y1 = 0;
let y2;
let x1_speed = 3;

function setup() {
  createCanvas(400, 400);
	
  for(let i = 0; i < nLines; i++) {
    xCoords[i] = random(width);
  }
  
  x1 = width / 2;
  y2 = height;
	
}

function draw() {
  background(100);
  
  stroke(255);
  
  
  for(let i = 0; i < 50; i++) {
    line(x1, y1, xCoords[i], y2);
    
    // ändere die unteren x-Koordinaten aller Linien
    xCoords[i] = xCoords[i] + 3;
    
    // falls die x-Koordinate über den rechten Rand wandert,
    // setze sie zurück auf 0
    if(xCoords[i] > width) {
    	xCoords[i] = 0;
    }
  }
  
  x1 = x1 + x1_speed;
  if(x1 > width || x1 < 0) {
    x1_speed = -x1_speed;
  }
}