r7.dvi

Size: px

Start display at page:

Download "r7.dvi"

かずまさたておか
7 years ago
Views:

1 11 5 Web ? 50 1 ( ) 92.2 cm 1: 1? 1

2 ( ) ( 1) 1 / ( ) 1.2 AD DA AD ( = ) (?) DA ( = ) AD/DA mm! 2: 165mm 164.5mm 165.5mm 0.1mm? 0.01mm? AD ( 2) 3 2

3 : AD DA DA 3 ( ) ( )? ( ) ( ) : PCM( ) / ( ) CD 44KHz(1 44,000 ) 2 PC 8 16 (12 ) ,536 2 XKHz 2XKHz 20KHz 22KHz 44KHz 3

4 16 (CD 16 ) 5 (300 ) 44KHz 16? , = 422,400,000bits (8 ) 53 6 (1 24 ) 144,000,000 : (8KHz 64KHz ) ( ) ( ) ( / ) : PCM WAV QuickTime WAV Apple MP3 MPEG Layer MP3 CD1 50 CD DRM(Digital Rights Management) 1 CCCD( CD)? DRM PC 1 1 MIDI ( ) 4

5 2.2 C KHz (PCM ) lame MP3 madplay MP3 a : /* gensound.c --- generate sound wave */ #include <math.h> #include <stdio.h> #define SEC #define D double t[100]; unsigned short a[2]; /* n --- t 1! (0 99) hz --- Hz 440 vol --- vol 15000! pos */ wave(int n, double hz, double vol, double pos) { double x = sin(t[n] += 2*3.1416*hz/SEC); a[0] += (int)(vol*pos*x); a[1] += (int)(vol*(1-pos)*x); main() { int i; for(i = 0; i < 10*SEC; ++i) { /* 10 */ a[0] = a[1] = 15000; /* */ wave(0, 440, 1000, 0.5); if(i > 2*SEC) wave(1, 440*D*D*D*D, 1000, 0.2); if(i > 4*SEC) wave(2, 440*D*D*D*D*D*D*D, 1200, 0.8); if(i > 6*SEC) wave(3, 880, 800, 0.5); fwrite(a, sizeof(a), 1, stdout); /* */ sin ( ) 100 l = v p sinθ,r = v (1 p) sinθ l r v p (0.5 ) θ( ) 440Hz ( π i 0 1 i 1 1tick( ) 44KHz 44, π θ 100tick 2π 1tick 100 5

6 ? ( ) ? D D D D D D D D D D D D = 2 D 440 D 1 2 D 4 1 t 1 θ θ wave a[0] a[1] ( ) main i 0 440,000 ( 440,000tick 10 ) tick a[0] a[1] 15000( ) wave 440Hz if(i > 2*SEC && i < 3*SEC) wave(...) : % gcc gensound.c -lm sin -lm % a.out lame -rx - - madplay - lame madplay ( ) ( CRT ) AD (pixel) / 3 4 D = e ln2 12 6

7 4: ( ) (Red) (Green) (Blue) (RGB ) RGB 8 ( ) 1 24 (3 ) 24 5 RGB 3 RGB 3 6 RGB 3.2 RGB ( ) ( ) Unix xpaint( 5) gimp( gimp-2.3 xv ImageMagick : : 5 CSS rgb(,, ) RGB ( ) 7

8 5: xpaint ( ) ( ) 7 ( ) ( ) BMP(Windows Bitmap) Windows PBM(Portable Bitmap) Unix GIF WWW 256 JPEG WWW GIF 8 PNG WWW GIF 256 JPEG Web 3 (GIF JPEG PNG) ( ) 7 8 JPEG 8

9 6: 7: kdraw 3.3 / ( ) ( 6) 3 Unix tgif kdraw( 7) : / 9

10 9 PostScript (TeX ) PostScript PDF(Portable Document Format) PostScript WWW SVG(Scalable Vector Graphics) SVG MSIE SVG Web 3.4 RGB PPM : /* genimage.c --- create color PPM image */ #include <stdio.h> #define WIDTH 300 #define HEIGHT 200 struct { unsigned char r,g,b; img[height][width]; main() { makeimage(); printf("p6 %d %d 255\n", WIDTH, HEIGHT); fwrite(img, sizeof(img), 1, stdout); pset(int x, int y, int r, int g, int b) { if(x >= 0 && x < WIDTH && y >= 0 && y < HEIGHT) { img[y][x].r = r; img[y][x].g = g; img[y][x].b = b; makeimage() { int x, y, i; for(x = 0; x < WIDTH; ++x) { for(y = 0; y < HEIGHT; ++y) { pset(x, y, 150, 200, 100); for(i = 0; i < 100; ++i) { pset(i, i, 255, 0, 0); 9 ( ) ( ) 10

8: WIDTH HEIGHT struct... img buf 1 r g b 1 200 300 2 img main() makeimage() PPM ( / ) PPM img pset() x y OK img RGB makeimage() x 0 WIDTH y 0 HEIGHT (250,200,100) i (0,0),(1,1),.

11 8: WIDTH HEIGHT struct... img buf 1 r g b img main() makeimage() PPM ( / ) PPM img pset() x y OK img RGB makeimage() x 0 WIDTH y 0 HEIGHT (250,200,100) i (0,0),(1,1),... (99,99) ( ) genimage.c : gcc genimage.c a.out >test.ppm display test.ppm 8 display xv PPM RGB 3.5 PostScript PostScript PostScript %!PS-Adobe-2.0 PostScript %%BoundingBox: x300 ( ) showpage 11

12 newpath X Y moveto (X,Y ) X Y lineto (X,Y ) stroke lineto W setlinewidth Wpt ( 9) %!PS-Adobe-2.0 %%BoundingBox: newpath moveto lineto lineto lineto lineto stroke showpage 9: PostScript? T x T y translate X T x Y T y S x S y scale X S x Y S y D rotate ( )D N { repeat N 5 ( 10) %!PS-Adobe-2.0 %%BoundingBox: { newpath moveto lineto lineto lineto lineto stroke translate repeat showpage ( ) 2 12

13 10: / findfont S scalefont setfont ( )S X Y moveto ( ) show (X,Y ) show  This is Courier-Bold 12pt. Times-Roman 36pt. This is Helvetica 24pt. 11: ( 11) G setgray ( ) R G B setrgbcolor RGB ( ) %!PS-Adobe-2.0 %%BoundingBox: /Helvetica findfont 24 scalefont setfont moveto (This is Helvetica 24pt.) show /Times-Roman findfont 36 scalefont setfont moveto (Times$-Roman$ 36pt.) show /Courier-Bold findfont 12 scalefont setfont moveto (This is Courier-Bold 12pt.) show 13

14 0.5 setgray /Ryumin-Light-EUC-H findfont 40 scalefont setfont moveto ( ) show 5 rotate setrgbcolor /GothicBBB-Medium-EUC-H findfont 48 scalefont setfont moveto ( ) show showpage EUC 10 Emacs Ctrl-X RET f euc-jp RET EUC PostScript PostScript 3.6 TeX OPTION TeX 1. TeX Encapsulated PostScript (%%BoundingBox: PostScript ) PostScript convert test.ppm fig1.ps convert \documentclass \begin{document : \usepackage{graphicx 3. : \begin{center \includegraphics[scale=0.5]{fig1.ps \end{center 0.5 fig1.ps PS scale width=8cm platex platex xdvi dvips PS 10 EUC 11 PostScript EPS ps2eps EPS 14

15 4 3D OPTION 3 (3D) 3D 2D(2 )? 3D D 3 3D 3D 2 : 3 12 ( ) 12: ( lay tracing) 3 ( ) ( 13) ( ) D 15

16 13: 4.2 OPTION 1 ( ) ( ) ( 1 ) ( ) 1/20 ( ) MPEG QuickTime WindowsVideo(WMV) ( ) / 3D 3 ( ) 3 3 ( ) ( ) / PlayStation( ) 3 16

17 5 Web : SVG canvas 5.1 Web HTML5 Web HTML4.01 HTML W3C(WWW Consortium) HTML XML(eXtensible Markup Language) XML HTML " " <x> </x> <x /> XML XML W3C XML HTML XML 4.01 XML XHTML 1.0 XHTML 1.0 HTML 4.01 W3C XML XHTML 1.1 XHTML Opera Mozilla Apple WHATWG(Web Hypertext Applicaiton Technology Working Group) HTML W3C 2007 WHATWG HTML HTML5 XML SVG canvas HTML5 <svg>...</svg> <canvas>...</canvas> Mozilla ( ) 5.2 SVG SVG(Scalable Vector Graphics) XML HTML XML W3C Mozilla SVG Mozilla HTML <svg> </svg> SVG object 17

18 <!DOCTYPE html> <html> <head> <title>svg example</title> </head> <body> <object width="500" height="400" data="test1.svg" type="image/svg+xml"> (sorry, cannot display SVG on your browther...) </object> </body> </html> 1 DOCTYPE HTML HTML5 ( HTML5 HTML 4.01 ) object <object width=" " height=" " data="url" type=" "> </object> URL (MIME ) SVG data type img/svg+xml (XML SVG) SVG SVG SVG img ( ) test1.svg SVG <svg width="500" height="400" xmlns=" </svg> SVG <svg>...</svg> XML XML xmlns="url" SVG URL object SVG <rect x="x" y="y" width="w" height="h" /> XY ( rx=" " ry=" " ) <circle cx="x" cy="y" r="r" /> XY <ellipse cx="x" cy="y" rx="r x " ry="r y /> XY <line x1="x 1 y1="y 1 " x2="x 2 " y2="y 2 " /> 2 XY polygon points="x 1 Y 1 X n Y n " /> N XY 18

19 polyline points="x 1 Y 1 X n Y n " /> N XY path d=" " PostScript path M x y newpath x y moveto L x y x y lineto Z closepath m l rmoveto rlineto <text x="x" y="y"> </text> <g>...</g> style ( HTML CSS ) (g ) stroke: stroke-width: stroke-opacity: fill: none fill-opacity: font-family font-size font-weight font-style text-decoratin text HTML+CSS PostScript / / transform 1 translate(x,y) (X,Y ) scale(s) S 2 X Y rotate(d) rotate(d,x,y) D XY ( PostScript ) ( 14) test1.svg HTML <svg width="500" height="400" xmlns=" <rect x="10" y="10" width="60" height="40" style="fill: pink" /> <rect x="80" y="10" width="60" height="40" rx="10" ry="10" style="fill: none; stroke: blue; stroke-width: 4px" /> <g style="fill: none; stroke: green; stroke-width: 4px"> <circle cx="180" cy="50" r="25" /> <ellipse cx="260" cy="50" rx="40" ry="20" /> <polygon points=" " /> <path d="m l l l Z" /> </g> <g style="font-size: 40px"> <text x="10" y="150">this</text> <text x="120" y="150" transform="rotate(60,120,150)">is</text> <text x="100" y="90" transform="scale(2.0)">a pen</text> </g> </svg> 19

20 This is 60 a pen 14: SVG SVG HTML DOM JavaScript 1 <svg width="500" height="200" xmlns=" <script type="text/javascript"><![cdata[ function change() { var r1 = document.getelementbyid( r1 ); r1.setattribute("width", 80); r1.setattribute("height", 100); ]]></script> <rect x="10" y="10" width="60" height="40" style="fill: pink" onclick="change()" /> <rect id="r1" x="80" y="10" width="60" height="40" rx="10" ry="10" style="fill: none; stroke: blue; stroke-width: 4px" /> </svg> onclick JavaScript change() document.getelementbyid() id="r1" 2 2 setattribute() 20

21 JavaScript XML CDATA ( XML 5.3 canvas OPTION SVG W3C XML canvas WHATWG JavaScript ( ) Web ( 1 <!DOCTYPE html> <html> <head> <title>canvas example</title> <script type="text/javascript"> var canvas, ctx; function init() { canvas = document.getelementbyid( c0 ); ctx = canvas.getcontext( 2d ); ctx.fillstyle = rgb(200,220,255) ; ctx.fillrect(20, 20, 80, 60); </script> </head> <body onload="init()"> <canvas id="c0" width="400" height="300"> (canvas not supported on your browser...) </canvas> </body> </html> Mozilla canvas XML JavaScript init() (1) HTML canvas document.getelementbyid() (2) canvas getcontext( 2d ) ( 2 2d ) PostScript SVG fillrect(x, Y, W, H) strokerect(x, Y, W, H) clearrect(x, Y, W, H) ( ) filltext(, X, Y) 21

22 beginpath() moveto(x, Y) lineto(x, Y) arc(x, Y, R, D 1, D 2, B) closepath() stroke() fill() PostScript arc XY ( ) true false ( ) drawimage(img, X, Y) drawimage(img, X, Y, W, H) ( ) ( img ) canvas API( ) PostScript fillstyle strokestyle linewidth globalalpha 14 font 20px Times New Roman translate(x, Y) rotate(r) scale(s x, S y ) save() restore() ( 15) <!DOCTYPE html> <html> <head> <title>canvas example</title> <script type="text/javascript"> var canvas, ctx; function init() { canvas = document.getelementbyid( c0 ); ctx = canvas.getcontext( 2d ); ctx.fillstyle = rgb(200,220,255) ; ctx.fillrect(20, 20, 80, 60); addeventlistener( mousedown, mousedown, false); function mousedown(evt) { ctx.fillstyle = rgb(255,0,0) ; ctx.beginpath(); ctx.arc(evt.layerx, evt.layery, 10, 0, Math.PI*2, true); ctx.fill(); </script> </head> <body onload="init()"> <canvas id="c0" width="400" height="300" style="position:relative"> 14 rgba(r,g,b,a) A

23 (canvas not supported on your browser...) </canvas> </body> </html> 15: canvas 6 HTML CSS 5-1. gensound.c 5-2. gensound.c 5-3. genimage.c 5-4. genimage.c 23

24 5-5. PostScript a. b. ( ) c SVG canvas ( ) 7 ( ) 5 ( 10 ) 24

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