WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5

Size: px
Start display at page:

Download "WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 5"

Transcription

1 Kageyama (Kobe Univ.) / 55

2 WebGL Safari WebGL WebGL Safari Kageyama (Kobe Univ.) / 55

3 WebGL WebBL = HTML5 canvas JavaScript 3D CG API Web GPU OpenGL UI Kageyama (Kobe Univ.) / 55

4 WebGL WebGL Kageyama (Kobe Univ.) / 55

5 WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) / 55

6 WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) / 55

7 WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ Kageyama (Kobe Univ.) / 55

8 WebGL WebGL Web HTML + CSS + JavaScript WebGL HTML + CSS + JavaScript + OpenGL SL Kageyama (Kobe Univ.) / 55

9 WebGL n n Kageyama (Kobe Univ.) / 55

10 WebGL 頂点シェーダ用ソースコード (GLSL) 頂点 attribute 変数 ( 座標 色など ) 頂点シェーダ 組み込み変数 gl_position gl_frontfacing g_lpointsize ユーザ定義 uniform 変数 ( 変換行列 光源位置 ) ユーザ定義の varying 変数 Kageyama (Kobe Univ.) / 55

11 WebGL C OpenGL SL (Shading Language) 4 4 a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; v a r y i n g vec4 v C o l o r ; void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; } Kageyama (Kobe Univ.) / 55

12 WebGL a t t r i b u t e vec3 avertexpos ; a t r r i b u t e vec4 a V e r t e x C o l o r ; attribute RGBA 4 Kageyama (Kobe Univ.) / 55

13 WebGL u n i f o r m mat4 umvmatrix ; u n i f o r m mat4 upmatrix ; mat4 4 4 uniform Kageyama (Kobe Univ.) / 55

14 WebGL v a r y i n g vec4 v C o l o r ; varing (varying variable) varying gl Position gl FrontFacing gl PointSize Kageyama (Kobe Univ.) / 55

15 WebGL void main ( ) { g l P o s i t i o n = upmatrix umvmatrix vec4 ( avertexpos, 1. 0 ) ; v C o l o r = a V e r t e x C o l o r ; main varying gl Position varying vcolor Kageyama (Kobe Univ.) / 55

16 WebGL primitive assembly 3 OpenGL 1.x 3 Kageyama (Kobe Univ.) / 55

17 WebGL プリミティブ フラグメント Kageyama (Kobe Univ.) / 55

18 WebGL varying varying varying varyingvalue_1 varyingvalue_2 varyingvalue_3 Kageyama (Kobe Univ.) / 55

19 WebGL フラグメントシェーダ用 ソースコード (GLSL) 組み込み変数 gl_position gl_frontfacing g_lpointsize フラグメント シェーダ 組み込み変数 gl_fragcolor ユーザ定義 varying 変数 ユニフォーム変数 テクスチャ用サンプラ Kageyama (Kobe Univ.) / 55

20 WebGL p r e c i s i o n mediump f l o a t ; // p r e c i s i o n q u a l i f i e r v a r y i n g vec4 v C o l o r ; // void main ( ) { g l F r a g C o l o r = v C o l o r ; } Kageyama (Kobe Univ.) / 55

21 WebGL WebGL Web アプリ HTML + CSS + JavaScript + シェーダソースコード + オブジェクトデータ WebGL JavaScript API 頂点シェーダ プリミティブ組み立て ラスタ化 フラグメントシェーダ シザーテスト マルチサンプリング ステンシルテスト デプステスト アルファブレンディング ディザリング WebGL 用描画バッファ cavas の他の画像 スクリーン Kageyama (Kobe Univ.) / 55

22 WebGL scissors OpenGL Super Bible (2011, p.112) シザーテスト不合格 シザーテスト 合格 Kageyama (Kobe Univ.) / 55

23 WebGL OpenGL Super Bible (2011, p.382) Kageyama (Kobe Univ.) / 55

24 WebGL OpenGL Super Bible (2011, p.399) Kageyama (Kobe Univ.) / 55

25 WebGL Kageyama (Kobe Univ.) / 55

26 WebGL Kageyama (Kobe Univ.) / 55

27 WebGL Kageyama (Kobe Univ.) / 55

28 WebGL WebGL Kageyama (Kobe Univ.) / 55

29 WebGL WebGL webgl sample triangle 00.html Safari Kageyama (Kobe Univ.) / 55

30 WebGL 3 HTML WebGL canvas Kageyama (Kobe Univ.) / 55

31 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) / 55

32 WebGL webgl sample triangle 00.html <!DOCTYPE HTML> <html lang= en > <head> < t i t l e>webgl Sample T r i a n g l e 00</ t i t l e> <meta c h a r s e t= u t f 8 > <s t y l e type= t e x t / c s s > canvas { b o r d e r : 2 px s o l i d g r e y ; }. t e x t { p o s i t i o n : a b s o l u t e ; top : 40 px ; l e f t : 20 px ; font s i z e : 1. 5em ; Kageyama (Kobe Univ.) / 55

33 WebGL c o l o r : b l a c k ; } </ s t y l e> <s c r i p t type= t e x t / j a v a s c r i p t > v a r g l ; v a r canvas ; v a r shaderprogram ; v a r v e r t e x B u f f e r ; f u n c t i o n c r e a t e G L C o n t e x t ( canvas ) { v a r names = [ webgl, e x p e r i m e n t a l webgl ] ; v a r c o n t e x t = n u l l ; f o r ( v a r i =0; i<names. l e n g t h ; i ++) { t r y { Kageyama (Kobe Univ.) / 55

34 WebGL } c o n t e x t = canvas. g e t C o n t e x t ( names [ i ] ) ; } c a t c h ( e ) {} i f ( c o n t e x t ) { b reak ; } } i f ( c o n t e x t ) { c o n t e x t. viewportwidth = canvas. width ; c o n t e x t. v i e w p o r t H e i g h t = canvas. h e i g h t ; } e l s e { a l e r t ( F a i l e d to c r e a t e c o n t e x t. ) ; } r e t u r n c o n t e x t ; Kageyama (Kobe Univ.) / 55

35 WebGL f u n c t i o n l o a d S h a d e r ( type, s h a d e r S o u r c e ) { v a r s h a d e r = g l. c r e a t e S h a d e r ( t y p e ) ; g l. s h a d e r S o u r c e ( shader, s h a d e r S o u r c e ) ; g l. c o m p i l e S h a d e r ( s h a d e r ) ; } i f (! g l. g e t ShaderParameter ( shader, g l. COMPILE STATUS) ) { a l e r t ( E r r o r c o m p i l i n g s h a d e r + g l. g e t S h a d e r I n f o L o g ( s h a d e r ) ) ; g l. d e l e t e S h a d e r ( s h a d e r ) ; r e t u r n n u l l ; } r e t u r n s h a d e r ; f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = Kageyama (Kobe Univ.) / 55

36 WebGL v a r f r a g m e n t S h a d e r S o u r c e = p r e c i s i o n mediump f l o a t ; \n + v o i d main ( ) { \n + g l F r a g C o l o r = vec4 ( 0. 2, 0. 4, 0. 6, 1. 0 ) ; \n + } \n ; v a r v e r t e x S h a d e r = l o a d S h a d e r ( g l. VERTEX SHADER, v e r t e x S h a d e r S o u r c e ) ; v a r fragmentshader = l o a d S h a d e r ( g l.fragment SHADER, f r a g m e n t S h a d e r S o u r c e ) ; shaderprogram = g l. createprogram ( ) ; Kageyama (Kobe Univ.) / 55

37 WebGL g l. a t t a c h S h a d e r ( shaderprogram, v e r t e x S h a d e r ) ; g l. a t t a c h S h a d e r ( shaderprogram, fragmentshader ) ; g l. l i n k P r o g r a m ( shaderprogram ) ; i f (! g l. getprogramparameter ( shaderprogram, g l. LINK STATUS) ) { a l e r t ( F a i l e d to s e t u p s h a d e r. ) ; } g l. useprogram ( shaderprogram ) ; } shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; f u n c t i o n s e t u p B u f f e r s ( ) { Kageyama (Kobe Univ.) / 55

38 WebGL } v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; Kageyama (Kobe Univ.) / 55

39 WebGL g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; f u n c t i o n s t a r t u p ( ) { canvas = document. getelementbyid ( myglcanvas ) ; g l = c r e a t e G L C o n t e x t ( canvas ) ; s e t u p S h a d e r s ( ) ; s e t u p B u f f e r s ( ) ; g l. c l e a r C o l o r ( 0. 8, 0. 8, 0. 4, 1. 0 ) ; draw ( ) ; Kageyama (Kobe Univ.) / 55

40 WebGL } </ s c r i p t> </ head> <body onload= s t a r t u p ( ) ; > <canvas i d= myglcanvas width= 480 height= 480 ></ canvas> <d i v c l a s s= t e x t >H e l l o. This i s my f i r s t WebGL program.</ d i v> </ body> </ html> Kageyama (Kobe Univ.) / 55

41 WebGL HTML5 canvas getcontext method experimental-webgl getcontext method WebGLRenderingContext WebGL WebGLRenderingContext gl

42 WebGL GLSL GPU GPU HTML JavaScript GLSL fragmentshadersource Kageyama (Kobe Univ.) / 55

43 WebGL WebGLRenderingContext Kageyama (Kobe Univ.) / 55

44 WebGL GLSL attribute float, vec2, vec3, vec4, mat2, mat3x2, mat4x2, mat2x3, mat3, mat4x3, mat4, mat2x4, mat3x4 attribute attribute attribute

45 WebGL int BindAttribLocation(unit program, unit index, const char *name); name attribute index program GL index int GetAttribLocation(unit program, const char *name); attribute (name) Kageyama (Kobe Univ.) / 55

46 WebGL gl.useprogram(shaderprogram); shaderprogram. vertexpositionattribute = gl.getattriblocation(shaderprogram, avertexposition ); vertexpositionattribute shaderprogram. anynameisok = g l. g e t A t t r i b L o c a t i o n ( shaderprogram, a V e r t e x P o s i t i o n ) ; Kageyama (Kobe Univ.) / 55

47 WebGL f u n c t i o n s e t u p B u f f e r s ( ) { v e r t e x B u f f e r = g l. c r e a t e B u f f e r ( ) ; g l. b i n d B u f f e r ( g l. ARRAY BUFFER, v e r t e x B u f f e r ) ; v a r t r i a n g l e V e r t i c e s = [ 0. 0, 0. 0, 0. 0, 0. 8, 0. 0, 0. 0, 0. 0, 0. 5, 0. 0 ] ; g l. b u f f e r D a t a ( g l. ARRAY BUFFER, new F l o a t 3 2 A r r a y ( t r i a n g l e V e r t i c e s ), g l. STATIC DRAW) ; v e r t e x B u f f e r. i t e m S i z e = 3 ; v e r t e x B u f f e r. numberofitems = 3 ; } Kageyama (Kobe Univ.) / 55

48 WebGL WebGLRenderingContext createbuffer() WebGLBuffer JavaScript vertexbuffer vertexbuffer Kageyama (Kobe Univ.) / 55

49 WebGL f u n c t i o n draw ( ) { g l. v i e w p o r t ( 0, 0, g l. viewportwidth, g l. v i e w p o r t H e i g h t ) ; g l. c l e a r ( g l. COLOR BUFFER BIT) ; } g l. v e r t e x A t t r i b P o i n t e r ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e, v e r t e x B u f f e r. i t e m S i z e, g l. FLOAT, f a l s e, 0, 0) ; g l. e n a b l e V e r t e x A t t r i b A r r a y ( shaderprogram. v e r t e x P o s i t i o n A t t r i b u t e ) ; g l. drawarrays ( g l. TRIANGLES, 0, v e r t e x B u f f e r. numberofitems ) ; Kageyama (Kobe Univ.) / 55

50 Kageyama (Kobe Univ.) / 55

51 webgl sample triangle 01.html Kageyama (Kobe Univ.) / 55

52 webgl sample triangle 01.html f u n c t i o n s e t u p S h a d e r s ( ) { v a r v e r t e x S h a d e r S o u r c e = a t t r i b u t e vec3 a V e r t e x P o s i t i o n ; \n + v o i d main ( ) { \n + g l P o s i t i o n = vec4 ( a V e r t e x P o s i t i o n, 1. 0 ) ; \n + g l P o s i t i o n = vec4 ( 0. 2, 1. 0, 1. 0, 1. 0 ) ; // Here!! \n + } \n ; Kageyama (Kobe Univ.) / 55

53 Kageyama (Kobe Univ.) / 55

54 Kageyama (Kobe Univ.) / 55

55 webgl sample triangle 00.html 1. PDF 2. HTML PDF Web 5/19 5 Kageyama (Kobe Univ.) / 55

WebGL X LR301 Kageyama (Kobe Univ.) Visualization / 45

WebGL X LR301 Kageyama (Kobe Univ.) Visualization / 45 2014.05.13 X021 2014 LR301 Kageyama (Kobe Univ.) Visualization 2014.05.13 1 / 45 Kageyama (Kobe Univ.) Visualization 2014.05.13 2 / 45 Kageyama (Kobe Univ.) Visualization 2014.05.13 3 / 45 Web アプリ HTML

More information

WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54

WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54 WebGL *1 2013.05.07 *2 *1 X021 2013 LR301 *2 05/08: Kageyama (Kobe Univ.) Visualization 2013.05.07 *3 1 / 54 WebGL References Kageyama (Kobe Univ.) Visualization 2013.05.07 *4 2 / 54 Chrome Firefox http://www.khronos.org/webgl/wiki/demo_repository

More information

WebGL Safari WebGL Kageyama (Kobe Univ.) Visualization / 55

WebGL Safari WebGL   Kageyama (Kobe Univ.) Visualization / 55 WebGL WebGL 2014.04.22 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.04.22 1 / 55 WebGL Safari WebGL http://bit.ly/1qxgljb Kageyama (Kobe Univ.) Visualization 2014.04.22 2 / 55 Kageyama (Kobe Univ.)

More information

WebGL Kageyama (Kobe Univ.) Visualization / 39

WebGL Kageyama (Kobe Univ.) Visualization / 39 WebGL *1 WebGL 2013.04.30 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.04.30 1 / 39 WebGL Kageyama (Kobe Univ.) Visualization 2013.04.30 2 / 39 3 1 PC ID Kageyama (Kobe Univ.) Visualization

More information

Kageyama (Kobe Univ.) / 36

Kageyama (Kobe Univ.) / 36 DrawArrays DrawElements 05 1 2015.05.19 Kageyama (Kobe Univ.) 2015.05.19 1 / 36 Kageyama (Kobe Univ.) 2015.05.19 2 / 36 Kageyama (Kobe Univ.) 2015.05.19 3 / 36 Web アプリ HTML + CSS + JavaScript + シェーダソースコード

More information

3D CG Kageyama (Kobe Univ.) Visualization / 22

3D CG Kageyama (Kobe Univ.) Visualization / 22 WebGL 2014.07.15 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.07.15 1 / 22 3D CG Kageyama (Kobe Univ.) Visualization 2014.07.15 2 / 22 Kageyama (Kobe Univ.) Visualization 2014.07.15 3 / 22 GLSL OpenGL

More information

Kageyama (Kobe Univ.) 2015.06.23 2 / 41

Kageyama (Kobe Univ.) 2015.06.23 2 / 41 2015 2015.06.23 Kageyama (Kobe Univ.) 2015.06.23 1 / 41 Kageyama (Kobe Univ.) 2015.06.23 2 / 41 [ 1, +1] [ 1, +1] [ 1, +1] Kageyama (Kobe Univ.) 2015.06.23 3 / 41 Kageyama (Kobe Univ.) 2015.06.23 4 / 41

More information

6/ Kageyama (Kobe Univ.) / 39

6/ Kageyama (Kobe Univ.) / 39 DOM API 2015 2015.06.02 Kageyama (Kobe Univ.) 2015.06.02 1 / 39 6/9 1 6 9 2 Kageyama (Kobe Univ.) 2015.06.02 2 / 39 WebGL WebGL Kageyama (Kobe Univ.) 2015.06.02 3 / 39 WebGL canvas.getcontext() WebGLRenderingContext

More information

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37

WebGL *1 DOM API *1 X LR301 Kageyama (Kobe Univ.) Visualization / 37 WebGL *1 DOM API 2013.05.21 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.21 1 / 37 WebGL WebGL DOM References Kageyama (Kobe Univ.) Visualization 2013.05.21 2 / 37 WebGL WebGL Kageyama

More information

WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39

WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization / 39 WebGL DOM API 2014.05.27 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.05.27 1 / 39 WebGL WebGL DOM Kageyama (Kobe Univ.) Visualization 2014.05.27 2 / 39 WebGL WebGL Kageyama (Kobe Univ.) Visualization

More information

DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization / 34

DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization / 34 WebGL *1 DrawArrays DrawElements 2013.05.14 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.05.14 1 / 34 DrawArrays DrawElements References Kageyama (Kobe Univ.) Visualization 2013.05.14 2

More information

WebGL OpenGL GLSL Kageyama (Kobe Univ.) Visualization / 57

WebGL OpenGL GLSL Kageyama (Kobe Univ.) Visualization / 57 WebGL 2014.04.15 X021 2014 3 1F Kageyama (Kobe Univ.) Visualization 2014.04.15 1 / 57 WebGL OpenGL GLSL Kageyama (Kobe Univ.) Visualization 2014.04.15 2 / 57 WebGL Kageyama (Kobe Univ.) Visualization 2014.04.15

More information

OpenGL GLSL References Kageyama (Kobe Univ.) Visualization / 58

OpenGL GLSL References Kageyama (Kobe Univ.) Visualization / 58 WebGL *1 2013.04.23 *1 X021 2013 LR301 Kageyama (Kobe Univ.) Visualization 2013.04.23 1 / 58 OpenGL GLSL References Kageyama (Kobe Univ.) Visualization 2013.04.23 2 / 58 Kageyama (Kobe Univ.) Visualization

More information

C.1 GLSL ES 言語リファレンス この付録は WebGL 用のシェーダをプログラムするために使われるGLSL ES 言語のリファレンスである GLSL ESの詳細は GLSL_ES_Specifi

C.1 GLSL ES 言語リファレンス この付録は WebGL 用のシェーダをプログラムするために使われるGLSL ES 言語のリファレンスである GLSL ESの詳細は  GLSL_ES_Specifi 付録 C OpenGL ES Shading Language C.1 GLSL ES 言語リファレンス この付録は WebGL 用のシェーダをプログラムするために使われるGLSL ES 言語のリファレンスである GLSL ESの詳細は http://www.khronos.org/registry/gles/specs/2.0/ GLSL_ES_Specification_1.0.17.pdfの公式仕様書を参照していただきたい

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

Kageyama (Kobe Univ.) Visualization / 32

Kageyama (Kobe Univ.) Visualization / 32 WebGL 2014.06.24 X021 2014 Kageyama (Kobe Univ.) Visualization 2014.06.24 1 / 32 Kageyama (Kobe Univ.) Visualization 2014.06.24 2 / 32 Kageyama (Kobe Univ.) Visualization 2014.06.24 3 / 32 kobe u logo

More information

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

第3章 OpenGL の基礎

第3章 OpenGL の基礎 3 OpenGL April 20, 2012 1 / 23 31 ( ) OpenGL OpenGL 2 / 23 32 OpenGL OpenGL OpenGL (Open Graphics Library) Silicon Graphics, Inc 2 3 API (Application Program Interface) [4] UNIX OS Windows Macintosh CAD

More information

経営論集2011_07_小松先生.indd

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

More information

第3章 OpenGL の基礎

第3章 OpenGL の基礎 3 OpenGL April 11, 2017 1 / 28 3.1 ( ) OpenGL OpenGL 2 / 28 3.2 OpenGL OpenGL OpenGL (Open Graphics Library) Silicon Graphics, Inc. 2 3 API (Application Program Interface) [4] UNIX OS Windows Macintosh

More information

第7章 レンダリング

第7章 レンダリング 7 April 11, 2017 1 / 59 7.1 ( ) CG 3 ( ) 2 / 59 7.2 7.2.1 ( ) 3 (rendering) 1 / (hidden line/surface calculation) a (outer normal algorithm) b Z (Z-buffer algorithm) c (scan-line algorithm) 2 (shading)

More information

第7章 レンダリング

第7章 レンダリング 7 May 18, 2012 1 / 60 71 ( ) CG 3 ( ) 2 / 60 72 71 ( ) 3 (rendering) 1 / (hidden line/surface calculation) a (outer normal algorithm) b Z (Z-buffer algorithm) c (scan-line algorithm) 2 (shading) a (flat

More information

07_経営論集2010 小松先生.indd

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション OpenGL ES 3.0 最新情報と OpenGL 20 周年 株式会社ディジタルメディアプロフェッショナル大渕栄作 2012 Digital Media Professionals Inc. All rights reserved. 03/Dec/2012 Page 1 Agenda OpenGL ES 3.0 OpenGL 20 周年 2012 Digital Media Professionals

More information

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

コンピュータグラフィックス

コンピュータグラフィックス コンピュータグラフィックス 第 13 回 リアルタイム CG 理工学部 兼任講師藤堂英樹 CG 制作の主なワークフロー 3DCG ソフトウェアの場合 モデリング カメラ シーン アニメーション テクスチャ 質感 ライティング 画像生成 2015/12/21 コンピュータグラフィックス 2 リアルタイム CG CG をリアルタイムにする必要性 インタラクティブなユーザーとのやり取り 映像制作 モデリング,,

More information

スライド 1

スライド 1 Graphics with Processing 2008-12 モデリング http://vilab.org 塩澤秀和 1 12.1 3D モデリング モデリング 3Dモデルを作り上げること オブジェクト座標系で基本図形やポリゴンを組み合わせる テクスチャ x テクスチャ z y 2 12.2 オブジェクトの関数例 複雑なオブジェクトは, 大きさ 1 を目安としてモデリングし, 関数にしておくと利用しやすい

More information

コンピュータグラフィクス論

コンピュータグラフィクス論 コンピュータグラフィクス論 2015 年 4 月 9 日 高山健志 教員紹介 高山健志 ( 国立情報学研究所特任助教 ) http://research.nii.ac.jp/~takayama/ takayama@nii.ac.jp 蜂須賀恵也 ( 創造情報学専攻講師 ) http://www.ci.i.u-tokyo.ac.jp/~hachisuka/ thachisuka@siggraph.org

More information

2016 IP 1 1 1 1.1............................................. 1 1.2.............................................. 1 1.3............................................. 1 1.4.............................................

More information

1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...

More information

untitled

untitled FONT FACE=" " /FONT hp11.html FONT FACE=" " /FONT FONT FACE=" " HTML HP10.html HTML HTML HTML html head title /title font face=" " size="5" /fontbr font face=" " size="5" /fontbr font size="5" /fontbr

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

.....

..... Peace & Piece Version1.0Peace & Piece 2011/12/17 ..... A-1 CV B-1 C-1 D-1 E-1 F-1 Web G-1 H-1 I-1 J-1 K-1 L-1 M-1 FAQ B-2 D-2 E-2 F-2 H-2 D-3 F-3 CMS () Web Web Web 75 85 Z Web alt SEO SEO Web

More information

Java演習(4) -- 変数と型 --

Java演習(4)   -- 変数と型 -- 50 20 20 5 (20, 20) O 50 100 150 200 250 300 350 x (reserved 50 100 y 50 20 20 5 (20, 20) (1)(Blocks1.java) import javax.swing.japplet; import java.awt.graphics; (reserved public class Blocks1 extends

More information

謗域・ュ逕ィppt

謗域・ュ逕ィppt 情報工学 2017 年度後期第 5 回 [11 月 1 日 ] 静岡大学 工学研究科機械工学専攻ロボット 計測情報講座創造科学技術大学院情報科学専攻 三浦憲二郎 講義日程 第 6 回 11 月 8 日画像処理パート第 1 回 第 7 回 11 月 15 日 CGパート第 6 回 第 8 回 11 月 22 日 CGパート第 7 回 第 9 回 11 月 29 日 CGパート試験 講義アウトライン [11

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

1

1 ...1...37 1 HTML4.01 Transitional Frameset DOCTYPE 5.1.a 2 Windows Shift_JIS Linux Unix EUC jp meta 5.1.a 3 5.1.a JIS cm cc kg alt 4 5.4.a 5.4.a 5 alt alt alt alt alt alt="" alt 6 5.4.b 5.4.b 7 8 5.3.a

More information

Microsoft Word - ggbook.docx

Microsoft Word - ggbook.docx 62 4GPU (Graphics Processing Unit) 4.1 4.1.1 63 63 ( 64) " () " " " 64 63 4.1.2 () GPU (Graphics Procssing Unit) (Transform) (Lighting ) T & L (Transform and Lighting) " CG 4 4 4 4 () 4 4 4 4 4 4 4 16

More information

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

untitled

untitled 25 10 12 11 24 (1) 14 (2) 26 10 44 (3) (4) (5) 27 10 68 (6) (7) (8) 25 10 ( ) (1) (2) (3) ) city.yokohama.lg.jp city.yokohama.jp WEB WEB WEB WEB WEB WEB 1 25 10 WEB WEB (1) (2) (3) (4) 25 10 (1) WEB (2)

More information

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

More information

コンピュータグラフィクス論

コンピュータグラフィクス論 コンピュータグラフィクス論 2016 年 4 月 7 日 高山健志 教員紹介 高山健志 ( 国立情報学研究所特任助教 ) http://research.nii.ac.jp/~takayama/ takayama@nii.ac.jp 蜂須賀恵也 ( 創造情報学専攻講師 ) http://www.ci.i.u-tokyo.ac.jp/~hachisuka/ thachisuka@siggraph.org

More information

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.

1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2. 1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................

More information

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

0720

0720 DRM SNS WP WP UG Width of the Flash tag cloud Height of the Flash tag cloud Color of the tags 000000 Background color FFFFFF Use compatibility mode? WEB - HTML Color Names http://www.joomler.net/download/131-wordpress/890-wordpress-wp-cumulus-49kb.html

More information

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet 2012 Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheets CSS2 CSS3 Web Web2.0 Web3.0 Web IT Web Homepage

More information

Computer Graphics

Computer Graphics Graphics with Processing 2009-14 モデリング http://vilab.org 塩澤秀和 1 14.1 3D モデリング モデリング 3Dオブジェクト ( 物体 ) の形状を数値データの集合で表すこと オブジェクト座標系で基本図形やポリゴンを組み合わせる テクスチャ x テクスチャ z y 2 14.2 オブジェクトの関数化 複雑なオブジェクトは, 大きさ 1 を目安としてモデリングし,

More information

ohp.mgp

ohp.mgp 2019/06/11 A/B -- HTML/WWW(World Wide Web -- (TA:, [ 1 ] !!? Web Page http://edu-gw2.math.cst.nihon-u.ac.jp/~kurino VNC Server Address : 10.9.209.159 Password : vnc-2019 (2019/06/04 : : * * / / : (cf.

More information

1221 Transitionの指定項目

1221 Transitionの指定項目 1310-5 Animation-direction プロパティ animation-direction animation-direction プロパティには アニメーションのサイクルの全部または一部分を 通常通り実行するか逆回転で実行するかを指定します 値 説 明 normal reverse alternate alternate-reverse アニメーションの全ての繰り返しが指定された通りに実行される

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

19 3!! (+) (>) (++) (+=) for while 3.1!! (20, 20) (1)(Blocks1.java) import javax.swing.japplet; import java.awt.graphics;

19 3!! (+) (>) (++) (+=) for while 3.1!! (20, 20) (1)(Blocks1.java) import javax.swing.japplet; import java.awt.graphics; 19 3!!...... (+) (>) (++) (+=) for while 3.1!! 3.1.1 50 20 20 5 (20, 20) 3.1.1 (1)(Blocks1.java) public class Blocks1 extends JApplet { public void paint(graphics g){ 5 g.drawrect( 20, 20, 50, 20); g.drawrect(

More information

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

css.pdf

css.pdf 1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS

More information

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1...............

1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1............... 1 1 1............................ 1 2............................ 1 3 HTML5 CSS3................... 2 4........................ 2 2 3 1.............................. 3 2........................... 3 3......................

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション オブジェクト指向 プログラミング演習 第 2 回クラス インスタンス メソッド コンストラクタ 先週の出席確認 Webブラウザはどのようなプログラムでできているかこの問に答える前に Webブラウザとは 何か? 普段使ってますよね? Webブラウザを使ってできることと Webブラウザがやっていることを区別する必要がある 何をすれば Web ブラウザ と言えるのか NHK チコちゃんに叱られる! Web

More information

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/

More information

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="clipanime1.css"> </head> <

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます

More information

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

1 GPU GPGPU GPU CPU 2 GPU 2007 NVIDIA GPGPU CUDA[3] GPGPU CUDA GPGPU CUDA GPGPU GPU GPU GPU Graphics Processing Unit LSI LSI CPU ( ) DRAM GPU LSI GPU

1 GPU GPGPU GPU CPU 2 GPU 2007 NVIDIA GPGPU CUDA[3] GPGPU CUDA GPGPU CUDA GPGPU GPU GPU GPU Graphics Processing Unit LSI LSI CPU ( ) DRAM GPU LSI GPU GPGPU (I) GPU GPGPU 1 GPU(Graphics Processing Unit) GPU GPGPU(General-Purpose computing on GPUs) GPU GPGPU GPU ( PC ) PC PC GPU PC PC GPU GPU 2008 TSUBAME NVIDIA GPU(Tesla S1070) TOP500 29 [1] 2009 AMD

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

r3.dvi

r3.dvi 00 3 2000.6.10 0 Java ( 7 1 7 1 GSSM 1? 1 1.1 4 4a 4b / / 0 255 HTML X 0 255 16 (0,32,255 #0020FF Java xclock -bg #0020FF xclock ^C (Control C xclock 4c 1 import java.applet.applet; import java.awt.*;

More information

< F2D82518E9F8AD CC834F CC8CFC82AB82C68D4C>

< F2D82518E9F8AD CC834F CC8CFC82AB82C68D4C> 2 次関数のグラフの向きと広がり [Java アプレット ] [Java アプリケーション ] 1. はじめに 2 2 y=ax のグラフについて x の係数 aが正のときと負のときでは グラフにどのような違いがあるでしょうか 2 2 y=ax のグラフについて x の係数 aが正のとき 係数 aの値が大きくなるにつれて グラフの広がりはどうなるでしょうか 2 2 y=ax のグラフについて x の係数

More information

untitled

untitled 2007 IT G Google Map API WEB2.0 2007 8 23 GoogleMapAPI GoogleMapAPI Google Web URL XHTML JavaScript GoogleMAP LHACA FFFTP TeraPad Haruhiro Unno Japan Electronics College 1 GoogleMapAPI Web Google GMail

More information

r1.dvi

r1.dvi 2006 1 2006.10.6 ( 2 ( ) 1 2 1.5 3 ( ) Ruby Java Java Java ( Web Web http://lecture.ecc.u-tokyo.ac.jp/~kuno/is06/ / ( / @@@ ( 3 ) @@@ : ( ) @@@ (Q&A) ( ) 1 http://www.sodan.ecc.u-tokyo.ac.jp/cgi-bin/qbbs/view.cgi

More information

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

SmartBrowser_document_build30_update.pptx

SmartBrowser_document_build30_update.pptx SmartBrowser Update for ios / Version 1.3.1 build30 2017 年 8 月 株式会社ブルーテック 更新内容 - 概要 ios Version 1.3.1 build28 の更新内容について 1. 設定をQRから読み込み更新する機能 2.URLをQRから読み込み画面遷移する機能 3.WEBページのローカルファイル保存と外部インテントからの起動 4.JQuery-LoadImageライブラリの組み込み

More information

_勉強会_丸山さつき_v3

_勉強会_丸山さつき_v3 CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS

More information

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111207 演習

More information

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習

More information

3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to

3 top#index 1 web router.ex web/router.ex 12 scope /, NanoPlanner do 13 pipe_through browser get /, TopController, index 16 end URL / to 3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex

More information

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

r6.dvi

r6.dvi I 2005 6 2005.11.18 1 1.1 2 Hello, World public class r5ex2 extends JApplet { Font fn = new Font("Helvetica", Font.BOLD, 24); g2.setfont(fn); for(int i = 0; i < 10; ++i) { g2.setpaint(new Color(100+i*5,

More information

コンピューターグラフィックスS

コンピューターグラフィックスS 今日の内容 コンピューターグラフィックス S 第 8 回 () システム創成情報工学科尾下真樹 28 年度 Q2 前回の復習 演習 (2): ポリゴンモデルの描画 変換行列 の概要 座標系 視野変換 射影変換 のまとめ 教科書 ( 参考書 ) コンピュータグラフィックス CG-ATS 協会編集 出版 2 章 ビジュアル情報処理 -CG 画像処理入門 - CG-ATS 協会編集 出版 章 (-2~-3

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

愛知工業大学表1-4.indd

愛知工業大学表1-4.indd 23 3 11 25 10 10 15883 2652 150 30 32 3000 Web Web 24 2012 1 8 3 13 FM84.5 8 4CG 91 vol. 10 25 25 2013 1 13 CG 1 8 3 CG 1 Web 2 16 30 50 B3 2 2011 12 ver. 1 ver. 1 Ver. 2 3 Web DY 1 3 50.6 PC 72.8 PC Web

More information

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

HTML CSS CSS CSS A LIST APART Fluid Grid Fluid Image Media Queries Fluid Grid Grid Design Fluid Grid 60px 20px 620px 300px 960px 620 960 100 300 960 100 =64.58333% =31.25% 960px 60px 20px 960px 1 =60px

More information

JavaScript の使い方

JavaScript の使い方 JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static

More information

Taro13-第6章(まとめ).PDF

Taro13-第6章(まとめ).PDF % % % % % % % % 31 NO 1 52,422 10,431 19.9 10,431 19.9 1,380 2.6 1,039 2.0 33,859 64.6 5,713 10.9 2 8,292 1,591 19.2 1,591 19.2 1,827 22.0 1,782 21.5 1,431 17.3 1,661 20.0 3 1,948 1,541 79.1 1,541 79.1

More information