1 DLP for Virtual Environments (I)VRML EAI (External Authoring Interface)

2 DLP Objects and Virtual Worlds

3 VRML Scene Graph #VRML V2.0 utf8 Transform { translation 0 0 0rotation children [Shape {appearance Appearance { material Material { diffuseColor }} geometry Cylinder { height 2.0 radius 1.0}}]}

4 VRML Coordinate System-Z -X +X +Z -Y

5 Rotations in VRML Angle in radians 1 Rotation = <1, 0, 0, 1.57>The axis of rotation 1 Right-hand Rule

6 VRML Nodes, Fields, and Types#VRML V2.0 utf8 Transform { translation 0 0 0 rotation children [Shape {appearance Appearance { material Material { diffuseColor }} geometry Cylinder { height 2.0 radius 1.0}}]} translation SFVec3f rotation SFRotation diffuseColor SFColor height SFFloat

7 Design 3D Objects for DLP UseDefine object names on VRML nodes Manipulating values on the fields of defined objects #VRML V2.0 utf8 DEF cylinder Transform { translation 0 0 0 rotation children [Shape {appearance Appearance { material DEF cylinderMaterial Material { diffuseColor }} geometry Cylinder { height 2.0 radius 1.0}}]}

8 DLP 3D Predicates (bcilib)getSFVec3f(ObjectName,Field, X,Y,Z) setSFVec3f(ObjectName,Field, X,Y,Z) getSFRotation(ObjectName,Field, X,Y,Z,R) setSFRotation(ObjectName,Field,X,Y,Z,R) getSFColor(ObjectName,Field, R, G, B) setSFColor(ObjectName,Field, R, G, B) …….

9 DLP 3D Predicates (bcilib)loadURL(URL) getPosition(ObjectName,X,Y,Z) =getSFVec3f(ObjectName,translation,X,Y,Z) setPosition(ObjectName,X,Y,Z) =setSFVec3f(ObjectName,translation,X,Y,Z) getRotation(ObjectName,X,Y,Z,R) =getSFRotation(ObjectName, rotation,X,Y,Z,R) setRotation(ObjectName,X,Y,Z,R)

10 Launch DLP Objects from Web Browsers

11 Example: Moving Titles

12 Design 3D Objects #VRML V2.0 utf8DEF myViewpoint Viewpoint {position orientation } Transform { translation rotation children [Transform {translation rotation children Shape {appearance Appearance { texture ImageTexture { url "star1.jpg" repeatS TRUE repeatT TRUE } textureTransform TextureTransform {scale 30 10} material Material {diffuseColor emissiveColor }} geometry Cylinder { height 2000 radius 2.5 top TRUE bottom FALSE}} }]}

13 Transform {translation -2 3 50 scale 0.3 0.3 0.3children [Shape {appearance Appearance { material Material {diffuseColor 1 1 0 emissiveColor 1 0 0}}} Text { string "> Transform {translation scale Text { string "Distributed Logic Programming" }] } …… Sound {minFront 1000 minBack 1000 intensity 20 source AudioClip { loop TRUE url ["mozart38.wav"]}} { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/13/Transform+%7Btranslation+-2+3+50+scale+0.3+0.3+0.3.jpg", "name": "Transform {translation -2 3 50 scale 0.3 0.3 0.3", "description": "children [Shape {appearance Appearance { material Material {diffuseColor 1 1 0. emissiveColor 1 0 0}}} Text { string Intelligent Multimedia Technology }] } Transform {translation -2 3 30 scale 0.3 0.3 0.3. Text { string Distributed Logic Programming }] } …… Sound {minFront 1000 minBack 1000. intensity 20 source AudioClip { loop TRUE. url [ mozart38.wav ]}}", "width": "1024" } 14 DLP Program: Moving Title:-object titlemove0: [bcilib]. var count = 3000. var increment = 0.15. var url='./title/title0.wrl'. %note that the path is relative to ‘root.wrl’ in the html file. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(myViewpoint,position, X,Y,Z), Znew is Z - increment, setSFVec3f(myViewpoint, position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove0. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/14/DLP+Program%3A+Moving+Title.jpg", "name": "DLP Program: Moving Title", "description": ":-object titlemove0: [bcilib]. var count = 3000. var increment = 0.15. var url= ./title/title0.wrl . %note that the path is relative to ‘root.wrl’ in the html file. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(myViewpoint,position, X,Y,Z), Znew is Z - increment, setSFVec3f(myViewpoint, position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove0.", "width": "1024" } 15 Example: Moving Title (1)change the viewpoint’s position regularly the distance between the viewpoint and the title is stable. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/15/Example%3A+Moving+Title+%281%29.jpg", "name": "Example: Moving Title (1)", "description": "change the viewpoint’s position regularly. the distance between the viewpoint and the title is stable.", "width": "1024" } 16 ...... DEF title Transform {translation scale children [Shape {appearance Appearance { material Material {diffuseColor 1 1 0 emissiveColor 1 0 0}}} Text { string ”Multimedia Authoring II: Flying Title" }] } { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/16/......+DEF+title+Transform+%7Btranslation+-2+3+50+scale+0.3+0.3+0.3.+children+%5BShape+%7Bappearance+Appearance+%7B.jpg", "name": "...... DEF title Transform {translation -2 3 50 scale 0.3 0.3 0.3. children [Shape {appearance Appearance {", "description": "material Material {diffuseColor 1 1 0. emissiveColor 1 0 0}}} Text { string Multimedia Authoring II: Flying Title }] }", "width": "1024" } 17 DLP Program: Moving Title (1):-object titlemove1: [bcilib]. var count = 3000. var increment = 0.15. var url='./title/title0.wrl'. var distance = 5.0. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), Znew is Z - increment, setSFVec3f(myViewpoint,position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove1. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/17/DLP+Program%3A+Moving+Title+%281%29.jpg", "name": "DLP Program: Moving Title (1)", "description": ":-object titlemove1: [bcilib]. var count = 3000. var increment = 0.15. var url= ./title/title0.wrl . var distance = 5.0. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), Znew is Z - increment, setSFVec3f(myViewpoint,position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove1.", "width": "1024" } 18 Example: Moving Title (2)change the viewpoint’s position regularly change the title’s position regularly { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/18/Example%3A+Moving+Title+%282%29.jpg", "name": "Example: Moving Title (2)", "description": "change the viewpoint’s position regularly. change the title’s position regularly.", "width": "1024" } 19 DLP Program: Moving Title (2):-object titlemove2: [bcilib]. var count = 5000. var distance= var increment = 0.15. var url='./title/title1.wrl'. var countv=100. main :- text_area(Browser),set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). move_viewpoint(_V,_,0):-!. move_viewpoint(V,position(X,Y,Z),C):-C1 is C-1, Znew is Z-increment, setSFVec3f(V,position,X,Y,Znew), sleep(100), move_viewpoint(V,position(X,Y,Znew),C1). :-end_object titlemove2. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/19/DLP+Program%3A+Moving+Title+%282%29.jpg", "name": "DLP Program: Moving Title (2)", "description": ":-object titlemove2: [bcilib]. var count = 5000. var distance= 20.0. var increment = 0.15. var url= ./title/title1.wrl . var countv=100. main :- text_area(Browser),set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). move_viewpoint(_V,_,0):-!. move_viewpoint(V,position(X,Y,Z),C):-C1 is C-1, Znew is Z-increment, setSFVec3f(V,position,X,Y,Znew), sleep(100), move_viewpoint(V,position(X,Y,Znew),C1). :-end_object titlemove2.", "width": "1024" } 20 Example: Moving Title (3)change the viewpoint’s position regularly change the title’s position regularly change the text regularly { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/20/Example%3A+Moving+Title+%283%29.jpg", "name": "Example: Moving Title (3)", "description": "change the viewpoint’s position regularly. change the title’s position regularly. change the text regularly.", "width": "1024" } 21 DLP Program: Moving Title (3):-object titlemove3: [bcilib]. ...... move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), setTitleText(titletext,N), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). setTitleText(O,N):- I is N mod 5, title_text(I,T), setMFString(O, string, [T]). title_text(1, 'Multimedia Authoring II'):-!. title_text(2, 'Flying Title Example'):-!. title_text(3, 'Changing Title Strings'):-!. title_text(4, 'VRML+Java+ Prolog'):-!. title_text(0, 'Z. Huang 2002'):-!. title_text(_, 'Thank You very much!'):-!. :-end_object titlemove3. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/21/DLP+Program%3A+Moving+Title+%283%29.jpg", "name": "DLP Program: Moving Title (3)", "description": ":-object titlemove3: [bcilib]. ...... move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), setTitleText(titletext,N), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). setTitleText(O,N):- I is N mod 5, title_text(I,T), setMFString(O, string, [T]). title_text(1, Multimedia Authoring II ):-!. title_text(2, Flying Title Example ):-!. title_text(3, Changing Title Strings ):-!. title_text(4, VRML+Java+ Prolog ):-!. title_text(0, Z. Huang 2002 ):-!. title_text(_, Thank You very much! ):-!. :-end_object titlemove3.", "width": "1024" } 22 Exercises 1. Design a DLP program to implement a rolling text, namely,the text can move along Y-dimension from down to up. You can design your own vrml file, or download it from the website: 2. Based on the moving title example 3, design a DLP program to implement moving titles in which the texts and the colors of the titles are changed regularly, using the following fact format: title_text(1, 'Multimedia Authoring II', red):-!. title_text(2, 'Flying Title Example', yellow):-!. title_text(3, 'Changing Title Strings', green):-!. ...... The vrml file is available at: { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/22/Exercises+1.+Design+a+DLP+program+to+implement+a+rolling+text%2C+namely%2C.jpg", "name": "Exercises 1. Design a DLP program to implement a rolling text, namely,", "description": "the text can move along Y-dimension from down to up. You can design your own vrml file, or download it from the website: http://wasp.cs.vu.nl/mma2/examples/vrml/title/title7.wrl. 2. Based on the moving title example 3, design a DLP program to implement moving titles in which the texts and the colors of the titles are changed regularly, using the following fact format: title_text(1, Multimedia Authoring II , red):-!. title_text(2, Flying Title Example , yellow):-!. title_text(3, Changing Title Strings , green):-!. ...... The vrml file is available at: http://wasp.cs.vu.nl/mma2/examples/vrml/title/title2.wrl.", "width": "1024" } 23 Accessibility of your designAfter you have done your exercises, make them accessible and executable from your project web site. Add a brief description on them. Send your DLP source code to your TA by , and let him know the link of your MMA2 webpage. { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.com/12268242/72/images/23/Accessibility+of+your+design.jpg", "name": "Accessibility of your design", "description": "After you have done your exercises, make them accessible and executable from your project web site. Add a brief description on them. Send your DLP source code to your TA by email, and let him know the link of your MMA2 webpage.", "width": "1024" } 24 A recommended file structurebin dlpsys.jar,*.class, etc. classes examples dlp mma2 lib ex1.pl, ex1.htm,etc title title2.wrl title7.wrl, etc. vrml …... root.wrl dlpsys.jar,*.class, etc. classes exercises ex1.htm,etc www mma2 title title2.wrl,etc. vrml …... root.wrl

14 DLP Program: Moving Title:-object titlemove0: [bcilib]. var count = 3000. var increment = 0.15. var url='./title/title0.wrl'. %note that the path is relative to ‘root.wrl’ in the html file. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(myViewpoint,position, X,Y,Z), Znew is Z - increment, setSFVec3f(myViewpoint, position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove0.

15 Example: Moving Title (1)change the viewpoint’s position regularly the distance between the viewpoint and the title is stable.

16 ...... DEF title Transform {translation scale children [Shape {appearance Appearance { material Material {diffuseColor 1 1 0 emissiveColor 1 0 0}}} Text { string ”Multimedia Authoring II: Flying Title" }] }

17 DLP Program: Moving Title (1):-object titlemove1: [bcilib]. var count = 3000. var increment = 0.15. var url='./title/title0.wrl'. var distance = 5.0. main :- text_area(Browser), set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), Znew is Z - increment, setSFVec3f(myViewpoint,position,X,Y,Znew), sleep(150), move_title(N1). :-end_object titlemove1.

18 Example: Moving Title (2)change the viewpoint’s position regularly change the title’s position regularly

19 DLP Program: Moving Title (2):-object titlemove2: [bcilib]. var count = 5000. var distance= var increment = 0.15. var url='./title/title1.wrl'. var countv=100. main :- text_area(Browser),set_output(Browser), loadURL(url), sleep(3000), move_title(count). move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). move_viewpoint(_V,_,0):-!. move_viewpoint(V,position(X,Y,Z),C):-C1 is C-1, Znew is Z-increment, setSFVec3f(V,position,X,Y,Znew), sleep(100), move_viewpoint(V,position(X,Y,Znew),C1). :-end_object titlemove2.

20 Example: Moving Title (3)change the viewpoint’s position regularly change the title’s position regularly change the text regularly

21 DLP Program: Moving Title (3):-object titlemove3: [bcilib]. ...... move_title(0):-!. move_title(N):- N1 is N-1, getSFVec3f(title, translation, Xt,Yt,_Zt), getSFVec3f(myViewpoint,position, X,Y,Z), Zt is Z - distance, setSFVec3f(title, translation,Xt,Yt,Zt), setTitleText(titletext,N), move_viewpoint(myViewpoint,position(X,Y,Z), countv), move_title(N1). setTitleText(O,N):- I is N mod 5, title_text(I,T), setMFString(O, string, [T]). title_text(1, 'Multimedia Authoring II'):-!. title_text(2, 'Flying Title Example'):-!. title_text(3, 'Changing Title Strings'):-!. title_text(4, 'VRML+Java+ Prolog'):-!. title_text(0, 'Z. Huang 2002'):-!. title_text(_, 'Thank You very much!'):-!. :-end_object titlemove3.

22 Exercises 1. Design a DLP program to implement a rolling text, namely,the text can move along Y-dimension from down to up. You can design your own vrml file, or download it from the website: 2. Based on the moving title example 3, design a DLP program to implement moving titles in which the texts and the colors of the titles are changed regularly, using the following fact format: title_text(1, 'Multimedia Authoring II', red):-!. title_text(2, 'Flying Title Example', yellow):-!. title_text(3, 'Changing Title Strings', green):-!. ...... The vrml file is available at:

23 Accessibility of your designAfter you have done your exercises, make them accessible and executable from your project web site. Add a brief description on them. Send your DLP source code to your TA by , and let him know the link of your MMA2 webpage.

24 A recommended file structurebin dlpsys.jar,*.class, etc. classes examples dlp mma2 lib ex1.pl, ex1.htm,etc title title2.wrl title7.wrl, etc. vrml …... root.wrl dlpsys.jar,*.class, etc. classes exercises ex1.htm,etc www mma2 title title2.wrl,etc. vrml …... root.wrl