Coding Aufgaben

Diese Seite hält zusätzliche Inputs und Lösungshinweise bereit.

Etappen

Codeschnipsel

eine Ellipse


let r = 100;

function setup() {
  createCanvas(8*r, 8*r);
  colorMode(HSB, 360, 100, 100);
  translate(4*r, 4*r);
  background(230, 100, 95);
  noFill();
  strokeWeight(30);
  stroke(40,100,100);
  ellipse(0, 0, 2*r, 2*r);
}

Referenzlinks

optionaler Ausbau

translate() und rotate() in Aktion

optionale Referenzlinks

Ziel

Etappen

Codeschnipsel

Variablen: Deklaration, Initialisierung und Anwendung inkl. Konsolenausgabe


// Kommentar: Dev Tools im Browser mit F12 aktivieren >> Konsole anzeigen

// Variablen deklarieren
let pacX;
let pacY;
let richtung;

function setup() {
  createCanvas(800, 300);

  // Variablen initialisieren
  pacX = 150;
  pacY = height / 2;
  richtung = 4;

  // Variablen in der Konsole überwachen
  console.log(pacY);
  console.log(richtung);
}

function draw() {
  background(245);

  // Variablen verändern
  pacX = pacX + richtung;

  // Variablen anwenden
  strokeWeight(16);
  point(pacX, pacY);
}

Referenzlinks

optionaler Ausbau

optionale Referenzlinks

für Nerds

Ziel

Etappen

Referenzlinks

Demo

Etappen

Referenzlinks

Ziel

Etappen: Rastergenerierung animiert:

Codeschnipsel

verschachtelte for-Schleife:

let s = 20;      // globale Variablen

function setup() {
  colorMode(RGB, 15, 15, 15);
  createCanvas(16 * s, 16 * s);
  stroke(8);
  for (let x = 0; x < 16; x = x + 1) {
    for (let y = 0; y <= 16; y = y + 1) {
      fill(x);
      rect(x*s, y*s, s, s);
    }
  }
}

Codeschnipsel für 2D-Array

2D-Array: Deklaration und Initialisierung

let einmaleins = [];      // globale Variable

function setup() {
  for (let x=0; x<=10; x=x+1) {
    einmaleins[x] = [];
    for (let y=0; y<=10; y= y+1) {
      einmaleins[x][y] = x;
    }
  }
  console.log(einmaleins);
}

Referenzlinks

Etappen

Referenzlinks

Etappen

Referenzlinks

Erweiterung: AM-PM-Uhr

Referenzlinks

Demo

Varianten

Referenzlinks

Demo

Etappen

Referenzlinks

Demo

Etappen

Referenzlinks

Demo Variante rund

Skizzen

Demo Variante wabenförmig

Skizzen

Referenzlinks

Demo

Etappen

Referenzlinks

Etappen

Basiscode

Quadrate rekursiv diagonal


function setup() {
  createCanvas(700, 700);
  background(245);
  stroke(70);
  fill(170);
  rekQuadrat(0, 150);
}

function rekQuadrat(pos, seite) {
  fill(100+seite, 50, 50);
  square(pos, pos, seite);
  if (seite > 20) {
    rekQuadrat(pos+seite, seite * 0.8);
  }
}

Referenzlinks

für Bildliebhaber:innen

Mani Matter hat die Rekursion in seinem Lied "Bim Coiffeur" besungen. Als Hommage an Mani Matter können Sie ein Bild rekursiv wiedergeben. Dazu eignet sich auch das bewegte Bild der Webcam.

für Nerds

fs in ksw