2004 3 A Graduation Thesis of College of Engineering, Chubu University A Proposal of Programming Evironment of Visualization for Graphic Designer Ayako Takabatake
1 1 2 3 2.1... 3 2.2 4... 4 2.2.1... 4 2.2.2... 5 2.2.3... 7 2.2.4... 8 3 9 3.1 DBN... 9 3.1.1 DBN... 9 3.1.2 DBN... 10 3.1.3 DBN... 12 3.2 Processing... 13 3.2.1 Java Processing... 13 3.2.2 Processing... 14 3.2.3 Processing... 18 3.3 Adobe Scripting... 19 3.3.1 3 Adobe Scripting... 19 3.3.2 Adobe Scripting... 19 3.3.3 Adobe Scripting... 24 3.4... 24 iii
3.5... 25 4 27 4.1... 28 4.2... 29 4.3... 30 5 33 35 37 iv
2.1... 5 2.2... 5 2.3... 6 2.4... 6 2.5... 8 2.6... 8 3.1 DBN... 10 3.2 DBN 1... 11 3.3 DBN 2... 11 3.4 DBN 3... 11 3.5 Processing... 14 3.6 Processing... 16 3.7 Java... 16 3.8 Processing... 16 3.9 Scripting 1... 20 3.10 Scripting 2... 22 3.11 Scripting 3... 22 4.1... 27 4.2... 28 4.3 1... 30 4.4 2... 31 4.5 3... 31 v
3.1... 13 3.2... 25 4.1... 29 vii
1,,.,.,,.,,. 2, 3 Visualization System., 4,. 4,,. 1
2, 4. 4,,,. 2.1 (Visualization System),...,. Design By Numbers (DBN), Processing(P5), Adobe Scripting. 3
2 2.2 4, 4.,,,. 2.2.1, 2.,. 2.. x, y,,. 3D 2, 3. 3. x, y, x, (3 ),. 2 Processing 2.1..,.,. 4
2.2. 4 2.1: 2.2.2..,. DBN Processing 2.2. 2.2:.,. ( ),. 2.3 DBN 5
2 ( )., Processing 2.4..,. 2.3: 2.4: 6
2.2. 4 2.2.3 2...,.,,.,, dpi(dot per inch)..,,,,.,,,. / (, ).,,.,,. ( ),... 7
2 2.5.,.,,. 2.5: 2.2.4,... 2.6. Adobe Systems Illustrator.. 2.6: 8
3,, 3.,,,. 3.1 DBN MIT John Maeda, Design By Numbers (DBN)[1]. 3.1.1 DBN Maeda Design By Numbers (DBN),., WEB Java.,. DBN 9
3.,.,.,. 3.1.2 DBN DBN 2. Web DBN,. 3.1. 3.1: DBN,.,. 101 101 px. 3.2 3.1.2 DBN,. 3.2( 1). 3.3( 2) 10
3.1. DBN. 3.1.2( 3),. // #1 sample : bokasi // #3 sample : kousi Paper 0 Repeat A 0 100 { Repeat B 0 100 { Set [A B] (A+B) // #2 sample : mouse Paper 0 Forever { Set [<Mouse 1> <Mouse 2>] 100 Command Rectangle L B R T { Line L B R B Line R B R T Line R T L T Line L T L B Command RectInRect H V N S { Repeat B 0 N { Set A (B*S) Rectangle (H-A) (V-A) (A+H) (A+V) Paper 0 RectInRect 26 26 12 4 RectInRect 74 26 12 4 RectInRect 26 74 12 4 RectInRect 74 74 12 4 3.2: DBN 1 3.3: DBN 2 3.4: DBN 3 11
3 3.1.3 DBN 2002 4 2003 4, 4 DBN. DBN., DBN. DBN. 1. DBN,...... 2. DBN.. C (sin, cos, tan).,.,., C. 3.1,. DBN. 12
3.2. Processing 3.1: 2002 ( ) ( ) ( ) / 3 12 / 14 2 2 5 2003 ( ) ( ) ( ) / 6 12 / 9 4 2 2 3.2 Processing MIT Processing. 3.2.1 Java Processing Maeda Fry Reas, DBN Processing. DBN,., DBN 3 (JPEG, GIF, ). DBN, Processing Java Applet, Web.,. 13
3 3.2.2 Processing Processing Processing., Java. 3.5 Proce55ing.. :. :. :. :. :. :Java. ( Java html ) 3.5: Processing 14
3.2. Processing Processing, 3. Basic Mode :. Standard Mode :,. Advanced Mode : JAVA. Basic Mode, Standard Mode. DBN Standard Mode Processing.. Basic Mode, Standard Mode, 3.6. //Basic Mode sample //Standard Mode sample size(200, 200); background(255); nostroke(); color inside = color(143, 149, 229); color middle = color(90, 102, 242); color outside = color(12, 17, 76); fill(inside); ellipse(0, 0, 200, 200); fill(middle); ellipse(0, 0, 100, 100); fill(outside); ellipse(0, 0, 55, 55); void setup() { size(200, 200); nobackground(); refresh(); void refresh(){ fill(251, 182, 218); nostroke(); rect(0, 0, width, height); void loop() { stroke(255, 0, 0); if(mousepressed && pmousex!= 0 && pmousey!= 0) { line(mousex,mousey,pmousex,pmousey); 15
3 3.6: Processing Java Processing. Processing Java import,. Processing Java., Processing. 3.7: Java 3.8: Processing 16
3.2. Processing //programmed by JAVA //object.java import java.applet.applet; import java.awt.*; import java.lang.object; public class objects extends Applet{ public void init(){ createimage(150,100); setbackground(color.gray); public void paint(graphics g){ int line_x[] = {12,120,125; int line_y[] = {50,15,60; g.setcolor(color.white); g.fillrect(10,10,60,60); g.setcolor(color.black); g.drawrect(10,10,60,60); g.setcolor(color.white); g.filloval(80,10,60,60); g.setcolor(color.black); g.drawoval(80,10,60,60); g.setcolor(color.white); g.fillpolygon(line_x, line_y, 3); g.setcolor(color.black); g.drawpolygon(line_x, line_y, 3); //programmed by Processing size(150,100); rect(10,10,60,60); ellipse(80,10,60,60); triangle(12,50, 120,15, 125,60); 17
3 3.2.3 Processing 2003 5 2 Processing. Processing. 1... ( ),. Java, Java. Java Applet,. DBN,. DBN ( ).. 2.... DBN, C Java, Processing. Processing, Java (, ) Processing. 18
3.3. Adobe Scripting 3.3 Adobe Scripting Adobe Scripting Adobe Systems Illustrator, Photoshop., Illustrator, Photoshop,., Illustrator. 3.3.1 3 Adobe Scripting Adobe Illustrator 10, Adobe Photoshop 7. Adobe Scripting. Windows Visual Basic, Macintosh AppleScript, JavaScript 3. JavaScript., Adobe Scripting, Illustrator. JavaScript JavaScript Netscape,.,. HTML WEB. Web,. 3.3.2 Adobe Scripting Adobe Scripting Illustrator, Illustrator. Illustrator [...]. 19
3 Illustrator. Illustrator. JavaScript, 3.9. // Adobe Scripting sample 1 var N = 5120; var doc = documents.add(documentcolorspace.rgb, N/2, 1000); if(documents.length > 0){ var srcpath = "Macintosh HD:Users:populi:AS_Sample:raw.txt"; var thefile = new File(srcPath); var isopen = thefile.open("r"); if(isopen){ thefile.seek(0, 0); line = activedocument.pathitems.add(); var points = new Array(N); for(var i = 0; i < N; i++){ points[i] = new Array(2); for(i = 0; i < N; i++){ var contents = thefile.readln(); points[i][0] = i/2; points[i][1] = contents * 5000 +500; line.setentirepath(points); thefile.close(); 3.9: Scripting 1 20
3.3. Adobe Scripting, JavaScript Illustrator. 3.10, 3.11,. // Adobe Scripting sample 2 if (documents.length > 0 ){ var star = activedocument.pathitems.star(300, 230, 200, 150, 7); var mycolor = new Color(); var myrgb = new RGBColor(); myrgb.red = 255; myrgb.green = 110; myrgb.blue = 30; mycolor.rgb = myrgb; star.fillcolor = mycolor; star.strokecolor = mycolor; for(t=0;t<500;t+=5){ var x= Math.cos(t)*Math.cos(t)*500 + 50; var y= Math.sin(t)*Math.sin(t)*500 + 50; var z=t-100; var star1 = activedocument.pathitems.star(x, z, 20, 12, 7); var mycolor = new Color(); var mycolor2 = new Color(); var myrgb = new RGBColor(); myrgb.red = 230-0.3*t; myrgb.green = 255-0.5*t; myrgb.blue = 80; var myrgb2 = new RGBColor(); myrgb2.red = 0; myrgb2.green = 255; myrgb2.blue = 80; mycolor.rgb = myrgb; mycolor2.rgb = myrgb2; star1.fillcolor = mycolor; star1.strokecolor = mycolor2; 21
3 3.10: Scripting 2 3.11: Scripting 3 22
3.3. Adobe Scripting // Adobe Scripting sample 3 var IE = 480; var JE = 640; var doc = documents.add(documentcolorspace.rgb, (JE * 10)/10, (IE * 10)/10); function plot(i, j, red, green, blue){ var circle = activedocument.pathitems.ellipse((i+1)*10, (j+1)*10, 8, 8); mycolor = new Color(); myrgb = new RGBColor(); myrgb.red = parseint(red); myrgb.green = parseint(green); myrgb.blue = parseint(blue); mycolor.rgb = myrgb; circle.fillcolor = mycolor; circle.strokecolor = mycolor; return; if(documents.length > 0){ var srcpath = "Macintosh HD:Users:populi:AS_Sample:dots_color.dat"; var thefile = new File(srcPath); var isopen = thefile.open("r"); if(isopen){ thefile.seek(0, 0); for(var i = 0; i < IE; i++){ for(var j = 0; j < JE; j++){ var red = thefile.readln(); var green = thefile.readln(); var blue = thefile.readln(); if(i%10 == 0 && j%10 == 0){ var dots = plot((i), (j)-1, red, green, blue); thefile.close; 23
3 3.3.3 Adobe Scripting Adobe Scripting. 1..,. 2. Illustrator.. [ ]. Adobe Scripting 2004 illustrator CS. Illustrator., 2004 Adobe Scripting,. 3.4,..,. Web. Macromedia Fash,.,. 24
3.5. 3.5 2. 3.2. 3.2: DBN Processing Adobe Scriptng DBN Processing, Processing., DBN Processing.,,., Adobe Scripting,.,. 25
4, 4.1,.,,,. Illustrator., Illustrator,.,. 4.1: 27
4 4.1, ( 4.2 ).,.,, Illustrator. 4.2: 4.2,. 1. 1 2..,,.,, Illustrator. 28
4.2. 4.2 4.1.,.,,. 4.1: Rect Rect ( x, y, width, height ) ;. FillRect() FillRect ( x, y, width, height ) ;. Square() Square ( x, y ) ;. FillSquare() FillSquare ( x, y) ;. Circle() Circle ( x, y, r ) ;. FillCircle() fillcircle(x, y, r ) ;. Line() Line( x1, y1, x2, y2 ) ; PenColor() PenColor ( r, g, b ) ; PenKind() PenKind( thickness ) ; FillColor FillColor ( r, g, b ) ; Repeat Repeat n n. MousePoint MousePoint0 Mousepoint1. MouseX MouseX0 MouseX1 y. MouseY MouseY0 MouseY1 y. 29
4 4.3. 4.3,.. r = 0; Repeat MousePoint { FillColor(r, 0, 0); FillCircle(MouseX, MouseY, 10); r++; b = 150; Repeat MousePoint1 { FillColor(0, 0, b); Line(MouseX1, MouseY1, 300, 250); b--; 4.3: 1 30
4.3. 4.4,.. 4.4: 2 4.5 4.4., Illustrator.. 4.5: 3 31
5,,.,,. 33
,,.,,.,,. 35
[1] Jhon, M.(1999): Design By Numbers, MIT Press [2] Proce55ing http://proce55ing.net/ [3] Matt, W.(2002): Digital Information Graphics,Thames & Hudson Ltd, Digital Information Graphics, 2003 3 [4], Information Desighn Source Book,, 2003 10 [5] David, E. P. et al.(2003): Adobe Scripting, Wiley Publishing, Inc. [6] Adobe illustrator version 9.0, Plug-in Software Development Kit Programmer s Guide for Machintosh and Windows, Revised: October 1999 [7] Adobe illustrator version 9.0, Plug-in Software Development Function Reference for Machintosh and Windows, Revised: October 1999 [8] Netscape, netscape devedge, http://devedge.netscape.com/ [9], JavaScript,, 2002 1 [10] Sun Microsystems, Sun Microsystems, http://www.sun.com/index.xml [11] Sun Microsystems, The Source for Java Technology, http://java.sun.com/ [12], Java,, 2001 1 [13] Java2 Platform Std.Ed.v1.3 http://java.sun.com/ (http://java.sun.com/j2se/1.3/ja/docs/ja/api/java/util/jar/package-summary.html) [14],, Java,, 2001 6 [15], JAVA,, 1997 3 [16], CodeWarrior C,, 1996 12 25 [17], C++,, 2002 10 [18], C,, 1993 11 [19] B.W., D.M., C 2 ANSI,, 1989 6 37
[20], Visual C++6.0,, 1998 11 [21], Visual C++6.0 - -,, 1999 6 [22],,,, 1988 11 [23], 1, 2, 2001 4 [24] N.Matthew, R.Stones,, Linux UNIX,, 1999 3 [25] Jhon R.Levine, Tony Mason, Doug Brown,, lex and yacc, 1994 11 [26] Microsoft Corporation, UNIX Applcation Migration Guide, October 2002 http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnucmg/html/ucmgch07.asp [27] Microsoft Corporation, Services fot UNIX Home, http://www.microsoft.com/japan/windows/sfu/default.asp [28] MKS Inc, MKS Toolkit http://www.mkssoftware.com/ [29] TK, Visual C++ bison flex http://homepage1.nifty.com/hp tk prg/tip1.htm [30], nitoyon.com/vc++, http://www.nitoyon.com/myself/ 38
2004 3