Javascript // get the canvas and the 2D context for it var
canvasElement = document.getElementById("myCanvas"); var context =
canvasElement.getContext("2d"); // set the font and size
context.font = "20px Georgia"; // clear an area and render hello
world at position (10,50) context.clearRect(0.0.300,150);
context.fillText("Hello World!", 10, 50); HTML // define the canvas
size with the tag in the HTML doc
Slide 9
XAML // Set rendering location and text style C# // Set text
private void YourFunction(object sender,
Windows.UI.Xaml.RoutedEventArgs e) { greetingOutput.Text = "Hello
World!"; }
Slide 10
Slide 11
Slide 12
Wheres ?? Wheres DirectX??
Slide 13
Slide 14
Slide 15
Slide 16
Slide 17
Slide 18
Slide 19
Slide 20
Slide 21
Slide 22
Slide 23
Slide 24
Slide 25
Slide 26
Slide 27
Slide 28
Slide 29
Slide 30
Slide 31
Slide 32
Slide 33
//The incoming vertex' position attribute vec4 position; //And
its color attribute vec3 color; //The varying statement tells the
shader pipeline that this variable //has to be passed on to the
next stage (to the fragment shader) varying vec3 colorVarying;
//The shader entry point is the main method void main() {
colorVarying = color; //Pass the color to the fragment shader
gl_Position = position; //Copy the position }
Slide 34
// Define the vertex and pixel shader structs struct
VertexShaderInput { float3 pos : POSITION; float4 color : COLOR; };
struct PixelShaderInput { float4 pos : SV_POSITION; float4 color :
COLOR; }; // Pass position and color values from Vert struct to
Pixel struct (adding W and Alpha) PixelShaderInput
SimpleVertexShader(VertexShaderInput input) { PixelShaderInput
vertexShaderOutput; vertexShaderOutput.pos = float4(input.pos,
1.0f); vertexShaderOutput.color = float4(input.color, 1.0f); return
vertexShaderOutput; }
Slide 35
varying vec3 colorVarying; void main() { //Create a vec4 from
the vec3 by padding a 1.0 for alpha //and assign that color to be
this fragment's color gl_FragColor = vec4(colorVarying, 1.0);
}
Slide 36
// Collect input from vertex shader struct PixelShaderInput {
float4 pos : SV_POSITION; float4 color : COLOR; }; // Set the pixel
color value for the specified Renter Target float4
SimplePixelShader(PixelShaderInput input) : SV_TARGET { return
input.color; }
// Bind shaders to pipeline (both VS and FS are in a program)
glUseProgram(m_shader->getProgram()); // (Input Assembly) Get
attachment point for position and color attributes
m_positionLocation = glGetAttribLocation(m_shader->getProgram(),
"position); glEnableVertexAttribArray(m_positionLocation);
m_colorLocation = glGetAttribColor(m_shader->getProgram(),
color); glEnableVertexAttribArray(m_colorLocation); // Bind the
vertex buffer object glBindBuffer(GL_ARRAY_BUFFER,
m_geometryBuffer); glVertexAttribPointer(m_positionLocation, 4,
GL_FLOAT, GL_FALSE, 0, NULL); glBindBuffer(GL_ARRAY_BUFFER,
m_colorBuffer); glVertexAttribPointer(m_colorLocation, 3, GL_FLOAT,
GL_FALSE, 0, NULL); // Draw a triangle of 3 vertices!
glDrawArray(GL_TRIANGLES, 0, 3);
Slide 38
// Binding Shaders to pipeline (VS and PS)
m_d3dDeviceContext->VSSetShader(vertexShader.Get(),nullptr,0);
m_d3dDeviceContext->PSSetShader(pixelShader.Get(),nullptr,0); //
Declaring the expected inputs to the shaders
m_d3dDeviceContext->IASetInputLayout(inputLayout.Get());
m_d3dDeviceContext->IASetVertexBuffers(0, 1,
vertexBuffer.GetAddressOf(), &stride, &offset); // Set
primitives topology
m_d3dDeviceContext->IASetPrimitiveTopology(D3D11_PRIMITIVE_TOPOLOGY_TRIANGLELIST);
// Draw a triangle of 3 vertices!
m_d3dDeviceContext->Draw(ARRAYSIZE(triangleVertices),0);
Slide 39
Slide 40
Dr. Seuss Collection Little Critter Collection Smithsonian 5
Little Monkeys Berenstain Bears Oceanhouse Media book titles
Slide 41
Slide 42
Slide 43
Slide 44
Slide 45
Slide 46
Slide 47
Slide 48
// Get the user application data folder
Windows::Storage::StorageFolder^ localFolder =
ApplicationData::Current- >LocalFolder; // Create an asynch task
to open the file concurrency::task getFileOperation(localFolder-
>GetFileAsync(fileName)); // Read the contents of the file
asynchronously getFileOperation.then([this,
m_d2dContext](StorageFile^ file){ return
FileIO::ReadBufferAsync(file); }).then([this,
m_d2dContext](concurrency::task previousOperation) {... }
Slide 49
Slide 50
// In Direct2D/DirectWrite, manipulating text is // equivalent
to manipulating bitmaps // Set up scale, rotation & translation
transforms // These can be animated each frame D2D1::Matrix3x2F r =
D2D1::Matrix3x2F::Rotation(angle); D2D1::Matrix3x2F s =
D2D1::Matrix3x2F::Scale(scale.x, scale.y); D2D1::Matrix3X2F t =
D2D1::Matrix3X2F::Translate(x, y);
m_d2dContext.SetTransform(s*r*t); // If bitmap
m_d2dContext->DrawBitmap(bitmap.Get(), args); // If text
m_textLayout.Get()->Draw(m_d2dContext, args);
