DCRC

Multimedia Contents Design


 Instructor: HyungSeok Kim, Room 1202/New Millennium Hall, hyuskim@konkuk.ac.kr

Credit: 3

Lecture: Room 401, New Millennium Hall, 11:00 – 13:00, Tuesday/Thursday

Visiting hour: 15:00 – 17:00, Wednesday

Course web page: http://vr.konkuk.ac.kr (to be available in 2nd week)

 

Course objective:

1.     Design a multimedia application

2.     Discuss delivery methods of multimedia contents

3.     Practical programming exercise of HTML5/WebGL for multimedia programming

4.     Inter-media coordination methods implementation through term projects

 

Text:

No specific text. Additional materials recommended:

-      Digital multimedia, Nigel Chapman and Jenny Chapman, Wiley, 2004

-      WebGL Programming Guide, Kouichi Matsuda and Rodger Lea, Addison Wesley, 2013

 

Grading:

-      Attendance: 5% (2 late appearance is equal to 1 absent. 25%(8) absents will give no grade)

-      Assignments/class presentation: 25%

-      In class Quiz: 10%

-      Mid-term project: 30%

-      Final project: 30%

Note: Copy of assignments/exam/term project will give penalty equal to the maximum score to be given.

 

Term Project:

-      Goal: Design a Multimedia editor using HTML5/WebGL (Video+3D)

-      Team project by a team of two people

n  Team composition: to be reported by Sep. 8

-      Term project 1st interim report and presentation: Oct. 6

-      Term project 2nd interim report and presentation: Nov. 3

-      Term project final presentation: Dec. 8

 

Programming Assignment:

-      Given at every programming class, to be evaluated at the beginning of next class.

 

Prerequisites:

-      Knowledge on Java or C or C++ is helpful


기말고사 성적

평균: 41점

0-20 : 10명

21-30: 4명

        31-40: 11명

                41-50: 10명

                51-60: 4명

                60- : 8명


Schedule:



Week

Theory

Exercise

Notes

Phase 1: Video and Sound

Week1

C01 - Introduction

(Class Notes.pdf

(휴강1)

 

Week2

C02 – Multimedia Data Representation

Class Notes.pdf )

C03 – Introduction to Web

(Class02_Introduction To Web.pdf)

 

Week3

 

 

C04 – Introduction to JavaScript I

Class03_Introduction to JavaScript.pdf

(추석 휴강 1)

 

Week4

 

C05 – Introduction to JavaScript II

Class04_Introduction to JavaScript_PartII.pdf

C06 – Manipulating Images and Video

Class05_Manipulating Images and Video.pdf

painting.JPG Pattern_2.jpg sky.JPG

 

Week 5

 

C07 – Manipulating Video

Class06_Manipulating Video.pdf

Phase 2: Web GL

Week5

 

C08 – WebGL Introduction

Class07_WebGL Introduction.pdf

cuon-matrix.js cuon-utils.js webgl-debug.js webgl-utils.js

Week6

 

 

C09 – Vertex Buffers

Class08_VertexBuffers.pdf

C10 - Mid-term Presentation

Week7

 

 

C11 - Primitives

C12 – 3D Shapes

Class09_Primitives.pdf 

Class10_3D Shapes.pdf  

Week8

Mid-term Exam

(보강 – C13 – Java Script III) Class10_JSCont.pdf

Week9

 

C14 – Animation and Transformation

Class11_Transfomations.pdf

C15 - Transformation Exercise

Class12_Interactions.pdf

ClassD01_DesignProcess.pdf  

Phase 3:  Applications

Week10

 

 

C16 – Connecting 2D and 3D (Textures)

Class16_Textures.pdf

MCDObject.js WebGLApp.js

C17 - 2nd Interim Presentation

Week11

 

 

C18 – Texture Exerciese

Class19_Playing With Sound.pdf

 Homework

Sound Sample

Week12

 

C20 – Introduction to Virtual Reality

C00-VR.pdf

Class21_PlayingWithVideo.pdf 

Texture.js

Sample Movie

Sample Movie

Week13

 

ClassN22_FBO.pdf

ClassN23_Picking & Loading Obj.pdf

Picking Samples

WebGLApp2.js

PerPixelPointLight.fs PerPixelPointLight.vs

FramebufferObject.js  

OBJLoader3_tex.js

Week14

 

 

Class27_SpecialEffects.pdf

Class28_Particles.pdf

Sample Codes

BlendedCube2.js Fog.js HUD.js

particle.html (particle sample)

 Final Term Project 

Pre-submission

Week15

C26 - Conclusions

자체 평가표 - 최종.docx

C27 - Final Term Project Presentation

Week16

 

Final term Exam


Supplements:

OBJ file loader sample - OBJLoader3_tex.js


Class 04 - Supplements


    <div style="position:absolute;top:12%;left:43%;">Choose Color</div>

    <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>

    <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>

    <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>

    <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>

    <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>

    <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>

    <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white"onclick="color(this)"></div>


Class 09 Supplements


function updateBuffer(gl, vbo, vtxs, a_Position, a_Color) {

   var tempArray = new Float32Array(vtxs);

   gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

   gl.bufferData(gl.ARRAY_BUFFER, tempArray, gl.STATIC_DRAW);

   var FSIZE = tempArray.BYTES_PER_ELEMENT;

   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE*6, 0);

   gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, FSIZE*6, FSIZE*2);

   if (bBufferInit === false) {

    gl.enableVertexAttribArray(a_Position);

    gl.enableVertexAttribArray(a_Color);

    bBufferInit = true;

   }

}


function Point(x, y) {

    this.x = x;

    this.y = y;

}


function convertCoord(o, rect) {

    var out = new Point();

    out.x = ((o.x - rect.left) - rect.width/2)/(rect.width/2);

    out.y = (rect.height/2 - (o.y - rect.top))/(rect.height/2);

    

    return out;

}



function click2(ev, gl, canvas, vbo, a_Position, a_Color) {

  if (bSelect === true) return;

  var rect = ev.target.getBoundingClientRect() ;


  var o = new Point(ev.clientX, ev.clientY);


  var co = convertCoord(o, rect);

  // Store the coordinates to g_points array

  g_points.push(co.x); g_points.push(co.y);

  g_points.push(boxColor[0]);

  g_points.push(boxColor[1]);

  g_points.push(boxColor[2]);

  g_points.push(boxColor[3]);


  // Clear <canvas>

  gl.clear(gl.COLOR_BUFFER_BIT);


  var len = g_points.length/6;

  

  updateBuffer(gl,vbo,g_points,a_Position, a_Color);

  

  gl.drawArrays(gl.POINTS, 0, len);


  

}


var drawType = 0;

function changeDraw(obj) {

    if (obj.value === 'point')       drawType = 0;

    else if (obj.value === 'lines')  drawType = 1;  

    else if (obj.value === 'tries')  drawType = 2;

}

var bSelect = false;

function changeDrag(obj) {

    if (obj.value === 'draw')         

    {

        bSelect = false;

    }

    else if (obj.value === 'select')  

    {

        bSelect = true;

    }  

}


var dragStartPos = new Point();

var dragEndPos = new Point();

var bStartDrag = false;

function dragStart(e) {

    if (bSelect === false)   return;

    var rect = e.target.getBoundingClientRect() ;

    var curPos = new Point(e.clientX, e.clientY);

    dragStartPos = convertCoord(curPos, rect);

    bStartDrag = true;

}


function dragEnd(e, gl, canvas, vbo, vbo2, a_Position, a_Color) {

    if (bSelect === false)   return;

    var rect = e.target.getBoundingClientRect() ;

    var curPos = new Point(e.clientX, e.clientY);

    dragEndPos = convertCoord(curPos, rect);

    

    var selectedPoints = [];

    for (var i = 0; i < g_points.length; i=i+6)

    {

        var dx1, dx2;

        dx1 = g_points[i] - dragStartPos.x;

        dx2 = g_points[i] - dragEndPos.x;

        

        if (((g_points[i] - dragStartPos.x)*

                (g_points[i] - dragEndPos.x)) <= 0)

        {

            if (((g_points[i+1] - dragStartPos.y)*

                    (g_points[i+1] - dragEndPos.y)) <= 0)

            {

                selectedPoints.push(g_points[i]);

                selectedPoints.push(g_points[i+1]);

                selectedPoints.push(g_points[i+2]);

                selectedPoints.push(g_points[i+3]);

                selectedPoints.push(g_points[i+4]);

                selectedPoints.push(g_points[i+5]);

            }

        }

    }

    

    gl.clear(gl.COLOR_BUFFER_BIT);

  

    gl.bindBuffer(gl.ARRAY_BUFFER, vbo);

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 4*6, 0);

    gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 4*6, 4*2);

    gl.drawArrays(gl.POINTS, 0, g_points.length/6);

    

    var len = selectedPoints.length/6;

  

    updateBuffer(gl,vbo2,selectedPoints,a_Position, a_Color);

  

    if (drawType === 0)

    {

        gl.drawArrays(gl.POINTS, 0, len);

    }

    else if (drawType === 1)

        gl.drawArrays(gl.LINES, 0, len);

    else

        gl.drawArrays(gl.TRIANGLES, 0, len);

  


    bStartDrag = false;

}


Class 11 Samples - Cube


    var vertices = [

      1.0, 1.0, 1.0, 1, 1, 1, 1,

      -1.0, 1.0, 1.0, 1, 0, 1, 1, 

      -1.0, -1.0, 1.0, 1, 0, 0, 1, 

      1.0, -1.0, 1.0, 1, 1, 0, 1,

      1.0, -1.0, -1.0, 0, 1, 0, 1, 

      1.0, 1.0, -1.0, 0, 1, 1, 1,

      -1.0, 1.0, -1.0, 0, 0, 1, 1,

      -1.0, -1.0, -1.0, 0, 0, 0, 1

    ];

    

    var indices = [

        0, 1, 2, 0, 2, 3,

        0, 3, 4, 0, 4, 5, 

        0, 5, 6, 0, 6, 1,

        1, 6, 7, 1, 7, 2,

        7, 4, 3, 7, 3, 2,

        4, 7, 6, 4, 6, 5

    ];


Type 2


var vertices = [   // Coordinates

     1.0, 1.0, 1.0,  1, 0, 0, 1,   

     -1.0, 1.0, 1.0, 1, 0, 0, 1,   

     -1.0,-1.0, 1.0, 1, 0, 0, 1,      

     1.0,-1.0, 1.0, 1, 0, 0, 1,    // v0-v1-v2-v3 front

     1.0, 1.0, 1.0, 0, 1, 0, 1, 

     1.0,-1.0, 1.0, 0, 1, 0, 1,

     1.0,-1.0,-1.0, 0, 1, 0, 1,    

     1.0, 1.0,-1.0, 0, 1, 0, 1,   // v0-v3-v4-v5 right

     1.0, 1.0, 1.0, 0, 0, 1, 1,       

     1.0, 1.0,-1.0, 0, 0, 1, 1,     

     -1.0, 1.0,-1.0, 0, 0, 1, 1,  

     -1.0, 1.0, 1.0, 0, 0, 1, 1,    // v0-v5-v6-v1 up

    -1.0, 1.0, 1.0, 1, 1, 0, 1,  

    -1.0, 1.0,-1.0, 1, 1, 0, 1,  

    -1.0,-1.0,-1.0, 1, 1, 0, 1,   

    -1.0,-1.0, 1.0, 1, 1, 0, 1,  // v1-v6-v7-v2 left

    -1.0,-1.0,-1.0, 1, 0, 1, 1,     

    1.0,-1.0,-1.0, 1, 0, 1, 1,     

    1.0,-1.0, 1.0, 1, 0, 1, 1,    

    -1.0,-1.0, 1.0, 1, 0, 1, 1,   // v7-v4-v3-v2 down

     1.0,-1.0,-1.0, 0, 1, 1, 1,      

     -1.0,-1.0,-1.0, 0, 1, 1, 1,    

     -1.0, 1.0,-1.0, 0, 1, 1, 1 ,       

     1.0, 1.0,-1.0, 0, 1, 1, 1   // v4-v7-v6-v5 back

  ];

    

    var indices = [

     0, 1, 2,   0, 2, 3,    // front

     4, 5, 6,   4, 6, 7,    // right

     8, 9,10,   8,10,11,    // up

    12,13,14,  12,14,15,    // left

    16,17,18,  16,18,19,    // down

    20,21,22,  20,22,23     // back

   ];

End of Document