VTK Tutorial 3: Cross Product of 2 Vectors

In this (third) tutorial, we are going to graphically visualize the operation of taking the cross product of two vectors.

More examples and tutorials can be found here

Cross Product¶

The cross product of two vectors $a$ and $b$ results in another vector $c$ that is perpendicular to both $a$ and $b$ :

c = a \times b

(1)

where the direction of $c$ follows the RHR. Thus, cross product is anticommutative:

a \times b = - b \times a

(2)

The cross product is defined by the formula

a \times b = \left| a \right| \left| b \right| \sin{\theta} \cdot n

(3)

where

$\theta$ is the angle between $a$ and $b$ in the plane containing them (hence, it is between $0\degree$ and $180\degree$ )
$\left| a \right|$ and $\left| b \right|$ are the magnitudes (length) of the vectors $a$ and $b$ , and
$n$ is a unit vector that is perpendicular to both $a$ and $b$ . In other words, $n$ is the normal of the plain containing both $a$ and $b$ .

Vector is a direction with no fixed position¶

Mathmatically, a vector is used to specify the direction, or orientation, of an object (e.g. a line). As such, it has no fixed position in space. This is different than a line, where a line is specified as a fixed position $P$ and a orientation vector $n$ .

In this regard, the vector is often visualized as a line segment that has the fixed point at the origin.

Python Setup¶

import math
import numpy as np

# noinspection PyUnresolvedReferences
import vtkmodules.vtkInteractionStyle
# noinspection PyUnresolvedReferences
import vtkmodules.vtkRenderingOpenGL2
from vtkmodules.vtkCommonColor import vtkNamedColors
from vtkmodules.vtkCommonTransforms import vtkTransform
from vtkmodules.vtkFiltersSources import vtkLineSource
from vtkmodules.vtkFiltersSources import vtkSphereSource
from vtkmodules.vtkFiltersCore import vtkTubeFilter
from vtkmodules.vtkRenderingAnnotation import vtkAxesActor
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkPolyDataMapper,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
    vtkRenderer
)

The Rendering Pipeline¶

# Visualization Pipeline

# a renderer and render window
ren = vtkRenderer()
renWin = vtkRenderWindow()
renWin.SetWindowName('AISE 4025: point and axes')
renWin.SetSize( 640, 480 )
renWin.AddRenderer( ren )

# an interactor
iren = vtkRenderWindowInteractor()
iren.SetRenderWindow( renWin )

colors = vtkNamedColors()

Geometry¶

Let’s specify 2 vectors, one oriented in the $x$ -axis, the other at $y$ -axis with some lengths. For visualization purposes, use the origin of the cartesian coordinate system so they can be visualized as a line segment.

Origin = np.array([ 5, 6, 0])
orientation_1 = np.array([ 3, 0, 0 ])
orientation_2 = np.array([ 7, 4, 0 ])

a = orientation_1
b = orientation_2

$c = a \times b$

c = np.cross( a, b )

Representation of the $1^{st}$ Vector¶

line_a = vtkLineSource()
line_a.SetPoint1( Origin.tolist() )
line_a.SetPoint2( (Origin + a).tolist() )

# A line is rendered as a line of 1-pixel wide, difficult to see. 
# We are going to render it as a tube of a finite diameter instead.
tube_a = vtkTubeFilter()
tube_a.SetInputConnection( line_a.GetOutputPort() )
tube_a.SetRadius( 0.1 )
tube_a.SetNumberOfSides( 32 )

line_aMapper = vtkPolyDataMapper()
line_aMapper.SetInputConnection( tube_a.GetOutputPort() )

line_aActor = vtkActor()
line_aActor.SetMapper( line_aMapper )
line_aActor.GetProperty().SetColor( colors.GetColor3d( 'Red') )

Representation of the $2^{nd}$ Vector¶

line_b = vtkLineSource()
line_b.SetPoint1( Origin.tolist() )
line_b.SetPoint2( (Origin + b).tolist() )

# A line is rendered as a line of 1-pixel wide, difficult to see. 
# We are going to render it as a tube of a finite diameter instead.
tube_b = vtkTubeFilter()
tube_b.SetInputConnection( line_b.GetOutputPort() )
tube_b.SetRadius( 0.1 )
tube_b.SetNumberOfSides( 32 )

line_bMapper = vtkPolyDataMapper()
line_bMapper.SetInputConnection( tube_b.GetOutputPort() )

line_bActor = vtkActor()
line_bActor.SetMapper( line_bMapper )
line_bActor.GetProperty().SetColor( colors.GetColor3d( 'Green') )

Representation of the $3^{rd}$ Vector¶

line_c = vtkLineSource()
line_c.SetPoint1( Origin.tolist() )
line_c.SetPoint2( (Origin + c).tolist() )

# A line is rendered as a line of 1-pixel wide, difficult to see. 
# We are going to render it as a tube of a finite diameter instead.
tube_c = vtkTubeFilter()
tube_c.SetInputConnection( line_c.GetOutputPort() )
tube_c.SetRadius( 0.1 )
tube_c.SetNumberOfSides( 32 )

line_cMapper = vtkPolyDataMapper()
line_cMapper.SetInputConnection( tube_c.GetOutputPort() )

line_cActor = vtkActor()
line_cActor.SetMapper( line_cMapper )
line_cActor.GetProperty().SetColor( colors.GetColor3d( 'Blue') )

Add an axes¶

Add an x-y-z-axes to help us orient.

# add an 3D Axes
axes = vtkAxesActor()
axes.SetTotalLength( 10, 10, 10 )
axes.AxisLabelsOff()

# properties of the axes labels can be set as follows
# this sets the x axis label to red
axes.GetXAxisCaptionActor2D().GetCaptionTextProperty().SetColor(colors.GetColor3d('Red'));
axes.GetYAxisCaptionActor2D().GetCaptionTextProperty().SetColor(colors.GetColor3d('Green'));
axes.GetZAxisCaptionActor2D().GetCaptionTextProperty().SetColor(colors.GetColor3d('Blue'));

Add all actors into the render window¶

ren = vtkRenderer()
ren.AddActor( line_aActor )
ren.AddActor( line_bActor )
ren.AddActor( line_cActor )
ren.AddActor( axes )
ren.SetBackground( colors.GetColor3d('MidnightBlue'))
ren.SetBackground( 1, 1, 1 )

renWin = vtkRenderWindow()
renWin.AddRenderer(ren)
renWin.SetSize(640, 480)
renWin.SetWindowName('AISE 4025, Cross Product of Vectors')

iren = vtkRenderWindowInteractor()
iren.SetRenderWindow(renWin)

Draw to the renderer and start the user interaction¶

renWin.Render()
iren.Start()

Cross Product of two vectors — Figure 1:The cross product between the red vector with the green vector produces a blue vector that is perpendicular to both the red and green vectors.

Exercise¶

In fact, the origin for the purpose of visualization does not have to be at the origin of the coordinate system. To visualize the result of the cross product of two vectors, the origin in the code above can be simply a common point shared by both $a$ and $b$ .

change the values of the share point Origin and the direction of the vectors $a$ and $b$ ,
pay attention to the length of the vectors as visualized,
pay attention to the angles between each of these vectors,
write codes to determine the angles between these vectors and the length of each vectors.