Objašnjenje koda: interaktivna vežba sa vektorima

U ovoj simulaciji koristimo biblioteku p5.js za crtanje dveju strelica-vektora koje možete prevlačiti mišem. Canvas dimenzija je 600×400 piksela, a koordinatni sistem je pomeren tako da se centar platna nalazi u sredini.

Globalne promenljive:

vectors — niz objekata, svaki sa komponentama vx, vy i bojom col.
dragging — referenca na trenutno prevlačeni vektor (ili null).

setup():

createCanvas(600, 400) i canvas.parent('sketch-holder') za vezivanje u HTML.
Generišemo dva nasumična vektora:
vectors.push({ vx: ..., vy: ..., col: ... });

draw():

background(240) čisti platno.
Crtamo X i Y ose kroz centar:
line(width/2,0, width/2,height); line(0,height/2, width,height/2);
Za svaki vektor pozivamo drawVector(v) koji:

translate() u centar, line() od (0,0) do (vx, –vy)
trianglom iscrtava glavu strelice
ellipse() crta “čvor” na kraju vektora

Interakcija:

mousePressed() — proverava da li je kliknuto unutar kruga radijusa 10 px oko glave vektora; ako jeste, čuva taj vektor u dragging.
mouseDragged() — dok je miš pritisnut, ažurira dragging.vx i dragging.vy prema trenutnoj poziciji miša.
mouseReleased() — postavlja dragging = null, prekidajući pomeranje.


// glavni niz i promenljiva za prevlačenje
let vectors = [];

let dragging = null;



function setup() {
  const canvas = createCanvas(600, 400);
  canvas.parent('sketch-holder');
  // Generiši dva nasumična vektora
  for (let i = 0; i < 2; i++) {
    vectors.push({
      vx: random(-150, 150),
      vy: random(-100, 100),
      col: i === 0 ? '#e63946' : '#2a9d8f'
    });
  }
}

function draw() {
  background(240);
  stroke(50);
  // nacrtaj ose kroz centar
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
  noStroke();

  // prikaži svaki vektor
  vectors.forEach(v => {
    drawVector(v);
  });
}

function drawVector(v) {
  push();
    translate(width/2, height/2);
    stroke(v.col);
    strokeWeight(3);
    line(0, 0, v.vx, -v.vy);
    // strelica
    push();
      translate(v.vx, -v.vy);
      rotate(-atan2(v.vy, v.vx));
      fill(v.col);
      noStroke();
      triangle(0, 0, -10, 5, -10, -5);
    pop();
    // čvor za povlačenje
    noStroke();
    fill(v.col);
    ellipse(v.vx, -v.vy, 12);
  pop();
}

function mousePressed() {
  const mx = mouseX - width/2;
  const my = -(mouseY - height/2);
  for (let v of vectors) {
    if (dist(mx, my, v.vx, v.vy) < 10) {
      dragging = v;
      break;
    }
  }
}

function mouseDragged() {
  if (dragging) {
    dragging.vx = mouseX - width/2;
    dragging.vy = -(mouseY - height/2);
  }
}

function mouseReleased() {
  dragging = null;
}

Operacije sa vektorima – aplikacija za vežbanje

U ovom kratkom videu je objašnjeno kako da upravljate interaktivnom aplikacijom za vežbanje vektorskih operacija. Ovde je sažeto objašnjenje koraka:

Podešavanje početnih vektora
U okviru plavog panela koristite slider-e da definišete komponente dva vektora (ili njihov poluprečnik i ugaone parametre).
Sabiranje i oduzimanje
Klikom na dugme “Saberi” (ili “Oduzmi”) vizuelno ćete spojiti vektore metodom paralelograma ili poligona.
Množenje skalarom
Unesite broj u polje “Skalar k” i pritisnite “Primeni k” da skalirate oba vektora.
Redosled operacija
Kombinujte više operacija u nizu: nakon svake promene pritisnite “Ažuriraj” da vidite rezultat na platnu.
Kontrole animacije
Dugmad Start, Pause i Reset vam omogućavaju da pokrenete, pauzirate ili poništite sve korake. Check-box je za uključivanje/isključivanje pomagača (mreže, koordinatnog sistema, indeksa vektora).

Detaljnije uputstvo, primeri i teorijska objašnjenja pogledajte u video-zapisu:

Šta je vektor?

Osnovne operacije

Objašnjenje koda: interaktivna vežba sa vektorima

Operacije sa vektorima – aplikacija za vežbanje