What is Normalisation ?

If you’ve ever done maths, you might remember that it is related to vectors.  Another word for it is unit vector. Well, the most common question might be to calculate the unit vector . . .

A normalised vector is just a vector in the same direction but magnitude 1 simple.

(Wonder what some maths textbook authors think or think children will understand . . .)

Implecations 

Well if the dirction is the same and the magnitude / length different we can build something that points towards an object but it’s length is whatever we desires it.

Imagine a pointer on a radar screen pointing towards an incoming object. The arrow does not need to touch the object but just points towards it.

)————————– >. .. – arrow. . .. . .. . .. . .. . . .. []- incoming object. … .. . .  .. .

A normalised vector allows us to determine the length while keeping direction according to our wish.

A normalised vector is of unit 1, so to put it to our desired length we just multiply the magnitude, no worry, direction remains the same, that’s the magic.

An example

A mouse-pointing code

void setup(){
  size(400,400);
}

void draw(){
background(255);
ellipse(200,200,30,30);
fill(0);
line(200,200,mouseX,mouseY);

}

Here the line points to the mouse but touches it, we don’t want that.

n1

To get the vector from point A to point B, i.e vector AB we do AO + OB or OB – OA

Vector target – Vector initial.

Here too we’ll do the same

we have two points

1 The location of the center

2 The location of the mouse , let’s start,

PVector location = new PVector(200,200);
PVector mouse = new PVector(mouseX,mouseY);

we replace the vectors in the line

line( location.x, location.y, mouse.x, mouse.y );

No we start the “Vector target – Vector initial”

mouse.sub(location);

Now if we press run, ou will get a very queer-looking result, why?

Because your origin is still at 0,0 and we need everything at the centre of the screen, so we do :

  translate(width/2,height/2);

Our code up to now inside draw() without normalisation :

  translate(width/2,height/2);
  PVector location = new PVector(200,200);
  PVector mouse = new PVector(mouseX,mouseY);
 
background(255);
ellipse(0,0,30,30);
fill(0);
mouse.sub(location);
line(0,0,mouse.x,mouse.y);

Notice the 0,0 in the ellipse and line, after translation. the origin is at the middle of the screen .. .

hum now we normalise

mouse.normalize();

The z is because of the American accent. Now our drawing is just a ball. why bec our line points to the mouse (same direction) but with magnitude 1px

See pic with centre ellipse removed : line looks like a dot (length of 1px)

norm2

To give it the desired length we use mult()

mouse.mult(50);
norm3

Now the line points to the mouse but with custom length 50

Radar basis code

void setup(){
  size(400,400);
}

void draw(){
  translate(width/2,height/2);
  PVector location = new PVector(200,200);
  PVector mouse = new PVector(mouseX,mouseY);
 
background(255);
ellipse(0,0,30,30);
fill(0);
mouse.sub(location);
mouse.normalize();
mouse.mult(50);
line(0,0,mouse.x,mouse.y);

}

Now let us play a bit . . .

finishedrad

The fancy radar code :

void radarPolish(){
for(int i =-600;i<600;i+=50){
  strokeWeight(2);
  stroke(0,255,0,75);
  noFill();
ellipse(0,0,i,i);
}
for(int i =-400;i<400;i+=20){
  stroke(255,0,255,100);
line(-200,i,200,i);
line(i,-200,i,200);
}

}
void setup(){
  size(400,400);
}

void draw(){
  
  background(0);
  pushMatrix();
  translate(width/2,height/2);
  radarPolish();
  PVector location = new PVector(200,200);
  PVector mouse = new PVector(mouseX,mouseY);
 


mouse.sub(location);
mouse.normalize();
mouse.mult(55);

stroke(0,255,0);
strokeWeight(5);
line(0,0,mouse.x,mouse.y);

stroke(200,255,75);
fill(200,255,75);
ellipse(0,0,30,30);

fill(255);
text("mouse over here",mouse.x+10,mouse.y+10);

popMatrix();

fill(255,0,0);
noStroke();
ellipse(mouseX,mouseY,30,30);
fill(255);
text(mouseX+" : "+mouseY,mouseX+20,mouseY+20);

}

Advertisements