krachten op bal in x en y richting

toetsfuncties

1) rode bal kracht xk, is een wind naar rechts

2) rode bal xk kracht = 0, wind is gestopt

3) groene bal hogere snelheid in -x richting

4) lichtblauwe bal hogere snelheid in y richting

5) resetknop

krachten op bal in x en y richting terug naar de inleiding

De schets maakt gebruik van de class "Mover2", staat onder deze schets, en de class "Ruitjes"

De schets is een simulatie van de wet van Newton: kracht = massa x snelheid

In dit voorbeeld geldt massa = 1 dus kracht = snelheid in dit voorbeeld zijn dit yk = verticale snelheid en xk = horizontale snelheid

 

let mover1; let mover2; let mover3; let mover4;
 
function setup() { 
 createCanvas(windowWidth, windowHeight); 
 x = width/2; 
 y = height/2; 
 n = height/20; 
 //constructor 
 //1) en 2) x,y start positie bal, 3) xk = kracht in x richting 4) yk = kracht in y richting 
 //5) snelheid xv in x richting, 6) snelheid yv in y richting, 7) diameter bal , 8) kleur bal 
 //constructor       1  2  3   4     5  6   7     8 
 mover1 = new Mover2(x, y, 0, 0.001, 0, 0,  n, color(255,0,0));//rode bal 
 //mover 2 kracht in -x richting de bal stuitert naar links 
 mover2 = new Mover2(x, y, -0.001, 0, 0, 0, 2*n,color(0,255,0));//groene bal 
 //mover 3 kracht in -y richting dus de bal stuitert omhoog 
 mover3 = new Mover2(x, y, 0, -0.001, 0, 0, 2*n,color(0,255,255));//lichtblauwe bal 
 //mover 4 kracht in x richting de bal stuitert naar rechts 
 mover4 = new Mover2(x, y, 0.001, 0, 0, 0, 2*n,color(0,0,255));//blauwe bal 
 ruitjespap = new Ruitjes(n, x, y); 
} 

 
function draw() { 
 background('#E6FBFF'); 
 ruitjespap.display(); 
 mover1.edges(); 
 mover1.update(); 
 mover1.show(); 
 mover1.applyForce(); 

 
mover2.edges(); 
 mover2.update(); 
 mover2.show(); 
 mover2.applyForce(); 

 
mover3.edges(); 
 mover3.update(); 
 mover3.show(); 
 mover3.applyForce(); 

 
mover4.edges(); 
 mover4.update(); 
 mover4.show(); 
 mover4.applyForce(); 
} 

function keyPressed() { 
 if (key == '1') { 
 mover1.accSet();  //rode bal 
 mover1.xk = 0.005; 
} 
 if (key == '2') { 
 mover1.accSet(); //rode bal 
 mover1.xk = 0; 
} 
 if (key == '3') { 
 mover2.accSet();  //groene bal 
 mover2.xv = -0.1; 
} 
 if (key == '4') { 
 mover3.accSet();  //lichtblauwe bal 
 mover3.yv = 0.1; 
} 
 if (key == '5') { 
 setup(); 
} 
}

de class "Mover2"

yk kan je zwaartekracht noemen en is een kracht in in y richting
xk kan je wind noemen en is een kracht in x richting
als de bal de onderrand van het canvas raakt zal door edges (regel 31) de snelheidvector omdraaien de bal zal in omgekeerde richting bewegen.
gravity zal een vertraging veroorzaken als de snelheidsvariabele yv 0 wordt zal de bal weer naar beneden gaan
met als resultaat een langzaam uitdovend stuiter effect van de bal
Daniel Shiffmann noemt dit de Euler integratie

In de class Mover2 worden de snelheden yk en xk opgeteld bij de versnellingsvector "acc" (regel 18)

In regel 26 de "acc" vector op tellen bij de snelheidsvector "vel" (is een vector die steeds langer wordt)

In regel 28 de "vel" vector optellen bij de "pos" vector zo zal de bal zich versneld bewegen

 
class Mover2 {
 
  constructor(x, y, xk, yk, xv, yv, d, c) {
    this.c = c; this.d = d;  this.xk = xk; this.yk = yk;
    this.pos = createVector(x,y); // positie vector,
    this.vel = createVector(xv,yv); //snelheidsvector
    this.acc = createVector(0,0);   //versnellingsvector
}
 
  applyForce() {
  // de krachtvector wordt aangemaakt
  // this.kracht = createVector(this.xk,this.yk);
  // de krachtvector wordt opgeteld bij de versnellingsvector acc
  // this.acc.add(this.kracht);
  // dit mag ook: krachten xk en yk worden opgeteld bij de versnellingsvector
  // je hoef dan geen krachtvector aan te maken
    this.acc.add(this.xk,this.yk);
  }
//voor nieuwe instellingen met de toetsen moet de versnellingsvector 0,0 zijn
  accSet() {
    this.acc.set(0,0);
  }
 
  update(){
    this.vel.add(this.acc);
// door de snelheidsvector bij de positie vector op te tellen wordt de positie van de bal berekend
    this.pos.add(this.vel);
  }
 
  edges() {
    if (this.pos.y >= height-this.d/2) {
      this.pos.y = height-this.d/2;
      this.vel.y = this.vel.y * -1;
    }
    if (this.pos.y <= 0+this.d/2) {
      this.pos.y = 0+this.d/2;
      this.vel.y = this.vel.y * -1;
    }
    if (this.pos.x >= width-this.d/2) {
      this.pos.x = width-this.d/2;
      this.vel.x = this.vel.x * -1;
    }
    if (this.pos.x <= 0+this.d/2) {
      this.pos.x = 0+this.d/2;
      this.vel.x = this.vel.x * -1;
    }
  }
 
  show(){
    stroke(255,0,0);
    strokeWeight(2);
    fill(this.c);
    ellipse(this.pos.x, this.pos.y, this.d, this.d);
  }
}

Flevopink