OSDN Git Service

Merge branch 'master' of git.sourceforge.jp:/gitroot/psychlops/silverlight
authorHOSOKAWA Kenchi <hskwk@inter7.jp>
Sun, 29 Aug 2010 02:07:11 +0000 (11:07 +0900)
committerHOSOKAWA Kenchi <hskwk@inter7.jp>
Sun, 29 Aug 2010 02:07:11 +0000 (11:07 +0900)
Conflicts:
test4/MainPage.xaml.cs
test4/PsychlopsMain.cs
test4/PsychlopsSilverlight4test.csproj
test4/TestPage.html

13 files changed:
dev4/PsychlopsSilverlight4.csproj
dev4/psychlops/core/graphic/canvas.cs
dev4/psychlops/core/graphic/font.cs
dev4/psychlops/core/graphic/image.cs
dev4/psychlops/core/graphic/module.cs
dev4/psychlops/core/graphic/shape.cs
dev4/psychlops/extention/math/solver.cs
test4/MainPage.xaml.cs
test4/PsychlopsMain.cs
test4/PsychlopsSilverlight4test.csproj
test4/Resources/logo.png [deleted file]
test4/Store.cs
test4/TestPage.html

index 62b4e86..f2dcc40 100644 (file)
     <Reference Include="System.Core" />\r
     <Reference Include="System.Windows.Controls, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />\r
     <Reference Include="System.Windows.Controls.Data, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />\r
-    <Reference Include="System.Windows.Controls.DataVisualization.Toolkit, Version=4.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />\r
     <Reference Include="System.Windows.Controls.Toolkit, Version=4.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />\r
     <Reference Include="System.Xml" />\r
     <Reference Include="System.Net" />\r
     <Reference Include="System.Windows.Browser" />\r
-    <Reference Include="WriteableBitmapEx, Version=0.9.0.0, Culture=neutral, processorArchitecture=MSIL">\r
-      <SpecificVersion>False</SpecificVersion>\r
+    <Reference Include="WriteableBitmapEx">\r
       <HintPath>WriteableBitmapEx\WriteableBitmapEx.dll</HintPath>\r
     </Reference>\r
   </ItemGroup>\r
   <ItemGroup>\r
-    <Compile Include="Pages\BinomialSolver.xaml.cs">\r
+    <None Include="Pages\BinomialSolver.xaml.cs">\r
       <DependentUpon>BinomialSolver.xaml</DependentUpon>\r
-    </Compile>\r
+    </None>\r
     <Compile Include="Properties\AssemblyInfo.cs" />\r
     <Compile Include="psychlops\core\app\app.cs" />\r
     <Compile Include="psychlops\core\app\misc.cs" />\r
     <Compile Include="psychlops\core\graphic\shape.cs" />\r
   </ItemGroup>\r
   <ItemGroup>\r
-    <Page Include="Pages\BinomialSolver.xaml">\r
+    <None Include="Pages\BinomialSolver.xaml">\r
       <SubType>Designer</SubType>\r
       <Generator>MSBuild:Compile</Generator>\r
-    </Page>\r
+    </None>\r
   </ItemGroup>\r
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Silverlight\$(SilverlightVersion)\Microsoft.Silverlight.CSharp.targets" />\r
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. \r
index c46f9fb..e037ef7 100644 (file)
@@ -1116,16 +1116,16 @@ namespace Psychlops
                        var bitmap = new BitmapImage();\r
                        bitmap.CreateOptions = BitmapCreateOptions.None;\r
                        bitmap.UriSource = uri;\r
-                       try\r
-                       {\r
+                       //try\r
+                       //{\r
                                var wbm = new System.Windows.Media.Imaging.WriteableBitmap(bitmap);\r
                                buffer = wbm;\r
-                       }\r
-                       catch (Exception e)\r
-                       {\r
-                               buffer = new WriteableBitmap(64, 64);\r
-                               buffer.ForEach(bitmap_drawChecker);\r
-                       }\r
+                       //}\r
+                       //catch (Exception e)\r
+                       //{\r
+                       //      buffer = new WriteableBitmap(64, 64);\r
+                       //      buffer.ForEach(bitmap_drawChecker);\r
+                       //}\r
                        self_rect.set(buffer.PixelWidth, buffer.PixelHeight);\r
                        AsyncBool = true;\r
                }\r
index e3a4b41..8ef3a14 100644 (file)
@@ -67,18 +67,24 @@ namespace Psychlops
 \r
                public Letters()\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        str_ = "";\r
                        font = Font.default_font;\r
                        align = HorizontalAlign.left;\r
                }\r
                public Letters(String init_str)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        str_ = init_str;\r
                        font_ = Font.default_font;\r
                        align = HorizontalAlign.center;\r
                }\r
                public Letters(String init_str, Font init_font)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        str_ = init_str;\r
                        font_ = init_font;\r
                        align = HorizontalAlign.right;\r
index f4c48d9..c56ea61 100644 (file)
@@ -21,6 +21,12 @@ namespace Psychlops{
                public Rectangle self_rect;\r
                protected bool AsyncBool;\r
 \r
+               public Image() \r
+               {\r
+                       self_rect = new Rectangle(1, 1);\r
+                       initialize__(1, 1);\r
+               }\r
+\r
                public Image(string uri)\r
                {\r
                        self_rect = new Rectangle();\r
index 6adecfd..e55a779 100644 (file)
@@ -120,9 +120,10 @@ namespace Psychlops
                        yellow = new Color(1, 1, 0, 1),\r
                        magenta = new Color(1, 0, 1, 1),\r
                        cyan = new Color(0, 1, 1, 1),\r
-                       white = new Color(1, 1, 1, 1),\r
                        gray = new Color(.5, .5, .5, 1),\r
-                       null_color = new Color(0, 0, 0, 0);\r
+                       white = new Color(1, 1, 1, 1),\r
+                       null_color = new Color(0, 0, 0, 0),\r
+                       transparent = new Color(0, 0, 0, 0);\r
 \r
        }\r
 \r
index b007b7f..aa0885d 100644 (file)
@@ -59,6 +59,8 @@ namespace Psychlops{
                        color = c;\r
                        thick = t;\r
                }\r
+               public static readonly Stroke null_line = new Stroke(Color.null_color, 0);\r
+               public static readonly Stroke hair_line = new Stroke(Color.white, 1);\r
        }\r
 \r
        public partial class Line : Shape\r
@@ -88,14 +90,20 @@ namespace Psychlops{
 \r
                public Line()\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.hair_line;\r
                        set(0,0,0,0);\r
                }\r
                public Line(double x1, double y1, double x2, double y2)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.hair_line;\r
                        set(x1, y1, x2, y2);\r
                }\r
                public Line(Point v1, Point v2)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.hair_line;\r
                        set(v1, v2);\r
                }\r
                public Line set(double x1, double y1, double x2, double y2)\r
@@ -172,14 +180,20 @@ namespace Psychlops{
 \r
                public Rectangle()\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        set(0,0);\r
                }\r
                public Rectangle(double wid, double hei)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        set(wid, hei);\r
                }\r
                public Rectangle(Rectangle another)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        v1 = another.v1;\r
                        v2 = another.v2;\r
                }\r
@@ -348,10 +362,14 @@ namespace Psychlops{
 \r
                public Ellipse()\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        set(0,0);\r
                }\r
                public Ellipse(double wid, double hei)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        set(wid, hei);\r
                }\r
 \r
@@ -415,10 +433,14 @@ namespace Psychlops{
 \r
                public Polygon()\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        vertices = new System.Collections.Generic.List<Point>();\r
                }\r
                public Polygon(double[] verts)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        vertices = new System.Collections.Generic.List<Point>();\r
                        for (int i=0; i < verts.Length; i+=2)\r
                        {\r
@@ -428,6 +450,8 @@ namespace Psychlops{
                }\r
                public Polygon(Point[] verts)\r
                {\r
+                       fill = Color.white;\r
+                       stroke = Stroke.null_line;\r
                        vertices = new System.Collections.Generic.List<Point>();\r
                        foreach (Point p in verts)\r
                        {\r
index 2bca111..8aaafbb 100644 (file)
@@ -234,6 +234,7 @@ namespace Psychlops
 \r
                public class BinomialLikelihood\r
                {\r
+                       /*\r
                        public static void showWindow(Constants.Func1 f)\r
                        {\r
                                Main.canvas.api_canvas.Dispatcher.BeginInvoke(new Action<Constants.Func1>(showWindow_), f);\r
@@ -261,6 +262,7 @@ namespace Psychlops
                                System.Windows.Controls.ChildWindow page = new PsychlopsSilverlight4.Pages.BinomialSolver(f);\r
                                page.Show();\r
                        }\r
+                        * */\r
 \r
                        public int iteration;\r
 \r
index 5c0b625..e368a54 100644 (file)
@@ -10,6 +10,7 @@ namespace PsychlopsSilverlight4test
 #if DEBUG\r
                public System.Windows.Controls.TextBlock DebugConsole;\r
 #endif\r
+               System.Windows.Controls.Image img;\r
                public MainPage()\r
                {\r
                        InitializeComponent();\r
@@ -41,6 +42,17 @@ namespace PsychlopsSilverlight4test
                        //Psychlops.Internal.Main.widgetStack = Controller;\r
                        AppStatusBar.Text = "Now starting Psychlops environment... please wait a minute";\r
 \r
+                       /*\r
+                       var ur = new System.Uri("Resources/Benham.png", System.UriKind.RelativeOrAbsolute);\r
+                       var bitmap = new System.Windows.Media.Imaging.BitmapImage(ur);\r
+                       var img = new System.Windows.Controls.Image();\r
+                       img.Source = bitmap;\r
+                       System.Windows.Controls.Canvas.SetLeft(img, 100);\r
+                       System.Windows.Controls.Canvas.SetTop(img, 100);\r
+                       Controller.Children.Add(img);\r
+                        * */\r
+                        \r
+                        \r
                }\r
                protected void getFocusMouseEnter(object sender, System.Windows.Input.MouseEventArgs e) {\r
                        this.Focus();\r
@@ -48,6 +60,7 @@ namespace PsychlopsSilverlight4test
 \r
                private void CompositionTarget_Rendering(object sender, System.EventArgs e)\r
                {\r
+                       //Controller.Children.Clear();\r
                        if (Main.canvas != null) Main.canvas.executeFlip();\r
                        //if (nextIntervalFrame-- <= 0)\r
                        //{\r
index 859b016..120388a 100644 (file)
@@ -1,5 +1,5 @@
 \r
-///+ Prefix linkto BasicCode1\r
+///+ Prefix\r
 //// Lines for set up Psychlops environment\r
 using Psychlops;\r
 \r
@@ -7,62 +7,64 @@ namespace PsychlopsSilverlightApp
 {\r
 \r
        public class PsychlopsMain\r
-       {///- Prefix linkto BasicCode1\r
-\r
+       {///- Prefix\r
 \r
                ///+ Main Routine\r
                //// Psychlops runs at the first line of this function psychlops_main().\r
                public void psychlops_main()\r
                {\r
-                       ///+ 0 Declaration\r
-                       ////Prepare global parameters\r
-                       Canvas window = new Canvas(Canvas.window);\r
-                       Image img;\r
-                       Rectangle centerrect = new Rectangle(10, 10);\r
-                       int imageHsize = 100;\r
-                       int imageVsize = 60;\r
-                       double R, G, B;\r
-                       ///- 0 Declaration\r
-\r
-\r
-\r
-                       ///+ 1 Initialize\r
-                       ////Initialize image and set color to each pixel.\r
-                       img = new Image(imageHsize, imageVsize); //Allocate offscreen in main memory.\r
-                       Color col = new Color(0,0,0);\r
-                       for (int i = 0; i < imageHsize; i++)\r
-                       {\r
-                               for (int j = 0; j < imageVsize; j++)\r
-                               {\r
-                                       ///+ 1.1 set1\r
-                                       ////set colors for each pixels\r
-                                       R = Math.random(1.0) * 0.5; //Set R values. \r
-                                       G = Math.random(1.0) * 0.5; //Set G values.\r
-                                       B = Math.random(1.0) * 0.5; //Set B values. \r
-                                       col.set(R, G, B);\r
-                                       img.pix(i, j, col);\r
-                                       ///- 1.1 set1\r
-                                       centerrect.centering();\r
-                               }\r
-                       }\r
+                       ///+ 1\r
+                       //// Set a window for drawing stimulus\r
+                       Canvas window = new Canvas(300, 300); //Create a window. Here, window variables are preset mode.\r
+                       // You can write this statement as" Canvas window = new Canvas(Canvas.fullscreen); " for fullscreen mode\r
+                       // or as " Canvas window = new Canvas(1024, 768, 32, 60.0); " This statement changes screenmode to 1024 x 768, 32bit color, 60 Hz refresh.\r
+                       ///- 1\r
 \r
-                       //img.cache(); //Move offscreen from main memory to video RAM. (Optional)\r
-                       ///- 1 Initialize\r
+                       var FIGURE = Psychlops.Widgets.Browser.Element.byID("FIGURE");\r
+                       var SIZE_X = Psychlops.Widgets.Browser.Element.byID("SIZE_X");\r
+                       var SIZE_Y = Psychlops.Widgets.Browser.Element.byID("SIZE_Y");\r
+                       var SHIFT_X = Psychlops.Widgets.Browser.Element.byID("SHIFT_X");\r
+                       var SHIFT_Y = Psychlops.Widgets.Browser.Element.byID("SHIFT_Y");\r
+                       var COLOR_R = Psychlops.Widgets.Browser.Element.byID("COLOR_R");\r
+                       var COLOR_G = Psychlops.Widgets.Browser.Element.byID("COLOR_G");\r
+                       var COLOR_B = Psychlops.Widgets.Browser.Element.byID("COLOR_B");\r
 \r
-                       ///+ 2 drawing\r
-                       ////drawing offscreen\r
 \r
+                       ///+ 2\r
+                       ////  Set a figure size, position and color.\r
+                       Rectangle figure = new Rectangle();\r
+                       Ellipse figure2 = new Ellipse();\r
+\r
+                       window.flip(); // Reflect the drawing for the display by flipping frame buffers.\r
+                       // Till this point, you will not see drawn figures.\r
+                       ///- 2\r
+\r
+                       ///+ 3 \r
+                       //// Detect a Keyboard input\r
                        while (!Keyboard.esc.pushed())\r
                        {\r
 \r
-                               window.clear(Color.black); //Clear screen with black\r
-                               img.centering(); //centering the position to copy offscreen\r
-                               img.shift(100, 100); //centering the position to copy offscreen\r
-                               img.draw(); // copy offscreen onto the reverse side of window buffer.\r
-                               centerrect.draw(Color.red);// draw reference rectangle at the center.\r
+                               window.clear();\r
+\r
+                               if ("Rectangle".Equals(FIGURE))\r
+                               {\r
+                                       figure.set(SIZE_X, SIZE_Y); // Set the size of figure.\r
+                                       figure.centering();   // Centering the figure in the window\r
+                                       figure.shift(SHIFT_X, SHIFT_Y); // Displacing the figure by designated vector.    \r
+                                       figure.draw(new Color(COLOR_R, COLOR_G, COLOR_B)); // Drawing the rectangle with a designated color.\r
+                               }\r
+                               else\r
+                               {\r
+                                       figure2.set(SIZE_X, SIZE_Y); // Set the size of figure.\r
+                                       figure2.centering();   // Centering the figure in the window\r
+                                       figure2.shift(SHIFT_X, SHIFT_Y); // Displacing the figure by designated vector.    \r
+                                       figure2.draw(new Color(COLOR_R, COLOR_G, COLOR_B)); // Drawing the rectangle with a designated color.\r
+                               }\r
+\r
                                window.flip();\r
-                       }\r
-                       ///- 2 drawing\r
+\r
+                       } //exit a program when the escape key is pressed down.\r
+                       ///- 3\r
 \r
                }\r
                ///- Main Routine\r
@@ -70,3 +72,5 @@ namespace PsychlopsSilverlightApp
        }\r
 \r
 }\r
+\r
+\r
index 986e9ae..5c12523 100644 (file)
@@ -62,7 +62,9 @@
     <WarningLevel>4</WarningLevel>\r
   </PropertyGroup>\r
   <ItemGroup>\r
-    <Reference Include="PsychlopsSilverlight4, Version=1.0.0.0, Culture=neutral, processorArchitecture=MSIL" />\r
+    <Reference Include="PsychlopsSilverlight4">\r
+      <HintPath>..\dev4\Bin\Debug\PsychlopsSilverlight4.dll</HintPath>\r
+    </Reference>\r
     <Reference Include="System.Windows" />\r
     <Reference Include="mscorlib" />\r
     <Reference Include="system" />\r
@@ -71,6 +73,9 @@
     <Reference Include="System.Windows.Controls, Version=2.0.5.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35, processorArchitecture=MSIL" />\r
     <Reference Include="System.Xml" />\r
     <Reference Include="System.Windows.Browser" />\r
+    <Reference Include="WriteableBitmapEx">\r
+      <HintPath>..\dev4\WriteableBitmapEx\WriteableBitmapEx.dll</HintPath>\r
+    </Reference>\r
   </ItemGroup>\r
   <ItemGroup>\r
     <Compile Include="App.xaml.cs">\r
     <None Include="Properties\AppManifest.xml" />\r
   </ItemGroup>\r
   <ItemGroup>\r
-    <Resource Include="Resources\logo.png" />\r
-    <Content Include="PsychlopsSilverlight4.dll" />\r
     <Content Include="TestPage.html" />\r
   </ItemGroup>\r
+  <ItemGroup>\r
+    <Folder Include="Resources\" />\r
+  </ItemGroup>\r
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\Silverlight\$(SilverlightVersion)\Microsoft.Silverlight.CSharp.targets" />\r
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. \r
        Other similar extension points exist, see Microsoft.Common.targets.\r
diff --git a/test4/Resources/logo.png b/test4/Resources/logo.png
deleted file mode 100644 (file)
index ebdc130..0000000
Binary files a/test4/Resources/logo.png and /dev/null differ
index bff2e6d..e319002 100644 (file)
@@ -1,4 +1,396 @@
-/*\r
+\r
+/*\r
+using Psychlops;\r
+\r
+namespace PsychlopsSilverlight4test\r
+{\r
+\r
+       public class PsychlopsMain\r
+       {\r
+               void RectLuminance()\r
+               {\r
+                       Canvas display = new Canvas(Canvas.window);\r
+                       Psychlops.Solver.BinomialLikelihood.showWindow(Math.cumulativeNormalDistibution);\r
+                       Letters le = new Letters("Reload to restart");\r
+                       le.fill = Color.black;\r
+                       le.align = Letters.HorizontalAlign.center;\r
+\r
+                       while (!Keyboard.esc.pushed())\r
+                       {\r
+                               Display.clear(Color.white);\r
+                               le.centering().shift(-200,-10).draw();\r
+                               Display.flip();\r
+                       }\r
+\r
+               }\r
+\r
+\r
+               public void psychlops_main()\r
+               {\r
+                       RectLuminance();\r
+               }\r
+\r
+\r
+       }\r
+\r
+}\r
+\r
+*/\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+/*\r
+ using Psychlops;\r
+\r
+namespace PsychlopsSilverlight4test\r
+{\r
+\r
+       public class PsychlopsMain\r
+       {\r
+\r
+               Psychlops.Canvas cnvs;\r
+               int i;\r
+               double x, y, z, t, p, temp, xx, yy;\r
+\r
+               //Set Target Initial Value\r
+               double TargetEcce = 100.0, TargetSize = 5.0, TargetNumber = 5, Rotate = 0.0;\r
+\r
+               //Set Background Initial Value\r
+               double Axis = 0.0, BGRadii = 150, BGSize = 5.0;\r
+               Psychlops.Widgets.Slider thetaSpeed, DotNumber;\r
+               Image img;\r
+\r
+\r
+\r
+               public void psychlops_main()\r
+               {\r
+                       cnvs = new Canvas(500, 500);\r
+\r
+                       Psychlops.Solver.BinomialLikelihood.showWindow(Math.cumulativeNormalDistibution);\r
+\r
+\r
+                       img = new Image("Resources/logo.png");\r
+\r
+                       Interval rng = new Interval();\r
+                       thetaSpeed = new Psychlops.Widgets.Slider("Label", -10 <= rng <= 10, 3.0);\r
+                       DotNumber  = new Psychlops.Widgets.Slider("DotNum",   0 <= rng <= 100, 50.0);\r
+\r
+                       //Declare background dots and target\r
+                       Rectangle[] BGDot = new Rectangle[2048];\r
+                       for(int i=0; i<2048; i++){\r
+                               BGDot[i]=new Rectangle();\r
+                       }\r
+                       Rectangle[] Target= new Rectangle[10];\r
+                       for(int i=0; i<10; i++){\r
+                               Target[i]=new Rectangle();\r
+                       }\r
+\r
+\r
+                       //Declare Matrix to keep back ground dots' coordinate value\r
+                       double[] DotX=new double[2048];\r
+                       double[] DotY = new double[2048];\r
+\r
+\r
+                       //Set Independent variables to manipulate\r
+\r
+\r
+                       //Initialize positions of background dots\r
+                       for(int i=0; i<2048; i++){\r
+                               t=2.0*Math.PI*Math.random(1.0);\r
+                               p=2.0*Math.PI*Math.random(1.0);\r
+                               DotX[i]=t;\r
+                               DotY[i]=p;\r
+\r
+                               x=BGRadii*Math.cos(t)*Math.cos(p);\r
+                               y=BGRadii*Math.sin(t)*Math.cos(p);\r
+                               BGDot[i].set(BGSize, BGSize);\r
+                               BGDot[i].centering().shift(x,y);\r
+                       }\r
+\r
+                       //Initialize positions of targets\r
+                       for(int i=0; i<10; i++)Target[i].set(TargetSize, TargetSize);\r
+\r
+                       double COS, SIN;\r
+                       //DotNumber = 200;\r
+                       //Main stimulus loop\r
+                       while(true){\r
+                               //Clear the main window\r
+                               cnvs.clear();\r
+\r
+\r
+                               temp=Axis/360*2*Math.PI;\r
+                               COS=Math.cos(temp);\r
+                               SIN=Math.sin(temp);\r
+\r
+                               //Calculate positions of background dots and set them\r
+                               for(int i=0; i<DotNumber; i++){\r
+                                       //Calculate in polar coordinate\r
+                                       t=DotX[i]+2.0*Math.PI*thetaSpeed/360.0;\r
+                                       p=DotY[i];\r
+\r
+                                       //Save current position\r
+                                       DotX[i]=t;\r
+\r
+                                       //Convert to Decartes coordinate\r
+                                       x=BGRadii*Math.cos(t)*Math.cos(p);\r
+                                       y=BGRadii*Math.sin(t)*Math.cos(p);\r
+                                       z=BGRadii*Math.sin(p);\r
+                                       xx=x;\r
+                                       yy=SIN*y+COS*z;\r
+\r
+                                       //Set Dotsize and Draw them\r
+                                       BGDot[i].set(BGSize, BGSize);\r
+                                       BGDot[i].centering().shift(xx,yy);\r
+                                       BGDot[i].draw( Color.blue );\r
+                               }\r
+\r
+                               //Calculate positions of targets and set them\r
+                               temp=Rotate*2*Math.PI/360.0;\r
+                               for (int i = 0; i < 5; i++)\r
+                               {\r
+                                       t = 2.0 * Math.PI/TargetNumber;\r
+                                       x = TargetEcce*Math.cos(i*t+temp);\r
+                                       y = TargetEcce*Math.sin(i*t+temp);\r
+                                       Target[i].centering().shift(x,y);\r
+                                       Target[i].fill = Color.yellow;\r
+                                       Target[i].draw();\r
+                               }\r
+\r
+                               img.centering(Mouse.position).draw();\r
+\r
+                               cnvs.var(Mouse.position.x, 100, 100);\r
+                               cnvs.var(Mouse.position.y, 100, 140);\r
+\r
+                               //Reflect drawing at the next frame;\r
+                               cnvs.flip();\r
+                       }\r
+               }\r
+       }\r
+\r
+}\r
+*/\r
+\r
+\r
+/*using Psychlops;\r
+\r
+namespace PsychlopsSilverlight4test\r
+{\r
+       public class PsychlopsMain\r
+       {\r
+               public void psychlops_main()\r
+               {\r
+                       var figure_type = Psychlops.Widgets.Browser.Element.byID("FIGURE");\r
+                       var size_x = Psychlops.Widgets.Browser.Element.byID("SIZE_X");\r
+                       var size_y = Psychlops.Widgets.Browser.Element.byID("SIZE_Y");\r
+                       var shift_x = Psychlops.Widgets.Browser.Element.byID("SHIFT_X");\r
+                       var shift_y = Psychlops.Widgets.Browser.Element.byID("SHIFT_Y");\r
+                       var color_r = Psychlops.Widgets.Browser.Element.byID("COLOR_R");\r
+                       var color_g = Psychlops.Widgets.Browser.Element.byID("COLOR_G");\r
+                       var color_b = Psychlops.Widgets.Browser.Element.byID("COLOR_B");\r
+\r
+                       Canvas window = new Canvas(300, 300);\r
+\r
+                       var figure_r = new Rectangle();\r
+                       var figure_e = new Ellipse();\r
+                       Shape figure = figure_r;\r
+                       \r
+                       while (!Keyboard.esc.pushed())\r
+                       {\r
+                               if (System.String.Compare(figure_type, "Rectangle") == 0)\r
+                               {\r
+                                       figure_r.set(size_x, size_y);\r
+                                       figure = figure_r;\r
+                               }\r
+                               else\r
+                               {\r
+                                       figure_e.set(size_x, size_y);\r
+                                       figure = figure_e;\r
+                               }\r
+                               figure.fill = new Color(color_r, color_g, color_b);\r
+\r
+                               window.clear(Color.black);\r
+                               figure.centering().shift(shift_x, shift_y).draw();\r
+                               window.flip();\r
+                       }\r
+               }\r
+       }\r
+\r
+}\r
+\r
+\r
+\r
+\r
+/*\r
+using Psychlops;\r
+\r
+namespace Psychlops\r
+{\r
+\r
+       public class RandomDots\r
+       {\r
+               Rectangle dot;\r
+               public Point[] cood;\r
+               public RandomDots()\r
+               {\r
+                       cood = new Point[250];\r
+                       dot = new Rectangle(5, 5);\r
+               }\r
+               public void draw()\r
+               {\r
+                       dot.fill = Color.white;\r
+                       foreach (Point p in cood)\r
+                       {\r
+                               dot.centering(p).draw();\r
+                       }\r
+               }\r
+       }\r
+\r
+}\r
+\r
+\r
+\r
+namespace PsychlopsSilverlight4test\r
+{\r
+\r
+       public class PsychlopsMain\r
+       {\r
+               Canvas cnvs;\r
+               Image img;\r
+               Ellipse fixation;\r
+               Shape shape;\r
+               Color col;\r
+               int isize = 100;\r
+               double tfreq = 1;\r
+               int frames;\r
+               RandomDots dots;\r
+               Group g;\r
+\r
+               public void psychlops_main()\r
+               {\r
+                       cnvs = new Canvas(500, 500);\r
+                       g = new Group();\r
+                       img = new Image(isize * 2, isize * 2);\r
+                       Figures.drawGrating(ref img, 200, 200, 20, 1, 2, frames * 2.0 * Math.PI / tfreq / 60);\r
+                       g.append(img);\r
+                       g.rotation = 50;\r
+                       fixation = new Ellipse(10, 10);\r
+                       fixation.fill = Color.red;\r
+                       //var poly = new Rectangle(100, 100);\r
+                       var poly = new Letters("日本語");\r
+                       //var poly = new Polygon(); poly.append(0, 100); poly.append(-100, 0); poly.append(0, -100); poly.append(100, 0);\r
+                       //var poly = new Ellipse(100, 100);\r
+                       //var poly = new Line(0,0,100, 0);\r
+                       poly.fill = Color.red;\r
+                       poly.stroke = new Stroke { color = Color.yellow, thick = 1 };\r
+                       shape = poly;\r
+\r
+                       var rng = new Interval();\r
+                       var slider = new Psychlops.Widgets.Slider("tesrt", -100 <= rng <= 100);\r
+\r
+                       dots = new RandomDots();\r
+\r
+\r
+                       while (true)\r
+                       {\r
+                               frames++;\r
+\r
+\r
+                               cnvs.clear(new Color(Mouse.left.pressed() ? 0.75 : 0.5));\r
+                               col.set(Math.random(1.0));\r
+\r
+                               /*if (frames % 2 == 0)\r
+                               {\r
+                                       fixation.centering().shift(100, 100);\r
+                                       fixation.draw(new Stroke(Color.blue, 3));\r
+                               }* /\r
+\r
+                               fixation.centering().shift(slider, 0);\r
+                               fixation.draw(Color.red);\r
+\r
+                               //Figures.drawGabor(ref img, 20, 100, 1, 0, frames * 2.0 * Math.PI / tfreq / 60);\r
+                               //Figures.drawGaussian(ref img, 20, 1);\r
+                               //Figures.drawGrating(ref img, 200, 200, 20, 1, 2, frames * 2.0 * Math.PI / tfreq / 60);\r
+                               //img.centering(Mouse.position);\r
+                               //img.draw();\r
+                               g.centering(Mouse.position).draw();\r
+                               g.rotation += 1;\r
+\r
+                               shape.centering(Mouse.position).shift(100, 0);\r
+                               shape.draw();\r
+                               if (Keyboard.spc.pressed()) cnvs.var(Mouse.x, 100, 100);\r
+\r
+                               cnvs.var(frames, 0, 20);\r
+                               //slider.value = frames / 100.0;\r
+\r
+                               /*if (frames % 2 != 0)\r
+                               {\r
+                                       fixation.shift(100, 100);\r
+                                       fixation.draw(new Stroke(Color.green, 3));\r
+                               }* /\r
+\r
+                               for (int i = 0; i < dots.cood.Length; i++)\r
+                               {\r
+                                       dots.cood[i].set(Math.random(500), Math.random(500));\r
+                               }\r
+                               cnvs.var((double)slider, 200, 200);\r
+                               dots.draw();\r
+\r
+                               cnvs.flip();\r
+                       }\r
+               }\r
+       }\r
+}\r
+\r
+**/\r
+\r
+\r
+/*\r
+\r
+using Psychlops;\r
+namespace PsychlopsSilverlight4test\r
+{\r
+\r
+       public class PsychlopsMain\r
+       {\r
+               Canvas cnvs;\r
+               Rectangle[] rect;\r
+               int n;\r
+\r
+               public void psychlops_main()\r
+               {\r
+                       n = 1;\r
+                       cnvs = new Canvas(500, 500);\r
+                       rect = new Rectangle[n];\r
+                       for (int i = 0; i < n; i++)\r
+                       {\r
+                               rect[i] = new Rectangle(10, 10);\r
+                               rect[i].fill = Color.red;\r
+                       }\r
+                       Interval rng = new Interval();\r
+                       var slider = new Psychlops.Widgets.Slider("Label", -100 <= rng <= 100);\r
+\r
+                       while (true)\r
+                       {\r
+                               cnvs.clear();\r
+                               for (int i = 0; i < n; i++)\r
+                               {\r
+                                       rect[i].centering().shift(slider * i*3, i*3).draw();\r
+                               }\r
+                               cnvs.flip();\r
+                       }\r
+               }\r
+       }\r
+}\r
+\r
+*/\r
+\r
+/*\r
 using Psychlops;\r
 \r
 namespace PsychlopsSilverlight4test\r
index 44f4d11..8912261 100644 (file)
 \r
                <link rel="stylesheet" href="./css/import.css" type="text/css" media="screen,print" />\r
                <link rel="stylesheet" href="./css/jquery.lightbox-0.5.css" type="text/css" media="screen" />\r
-               <link rel="stylesheet" href="./css/tipTip.css" type="text/css" /> \r
+<link rel="stylesheet" href="./css/tipTip.css" type="text/css" /> \r
 \r
                <script type="text/javascript" src="./js/raphael-min.js"></script> \r
                <script type="text/javascript" src="./js/jquery-1.4.2.min.js"></script>\r
 \r
-               <script type="text/javascript" src="./js/createPos.js"></script>\r
-               <script type="text/javascript" src="./js/createLinkButton.js"></script>\r
-               <script type="text/javascript" src="./js/createVoronoi.js"></script>\r
-               <script type="text/javascript" src="./js/setLangButton.js"></script>\r
+       <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\r
 \r
 \r
-               <script type="text/javascript" src="./js/createVoronoiLine.js"></script>\r
                <script type="text/javascript" src="./js/loadJSON.js"></script>\r
 \r
-               <script type="text/javascript" src="./js/createLinkButton_psychlops.js"></script>\r
-\r
-\r
-\r
+               <script type="text/javascript" src="./js/buttonFunction.js"></script>\r
+               <script type="text/javascript" src="./js/jquery.rollover.js"></script>\r
 \r
                <script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
 \r
+               <script type="text/javascript" src="./js/setPos.js"></script>\r
+               <script type="text/javascript" src="./js/createNode.js"></script>\r
+               <script type="text/javascript" src="./js/createVoronoi.js"></script>\r
+\r
                <script type="text/javascript" src="./js/voronoi.js"></script>\r
 \r
+<script type="text/javascript" src="./js/jquery.tipTip.js"></script> \r
+\r
 \r
        <script type="text/javascript" src="./js/jquery.cookie.js"></script> \r
 \r
 \r
-               <script type="text/javascript" src="./js_basic/jquery-ui-1.8.2.custom.min.js"></script>\r
 \r
-               <link type="text/css" href="./css_basic/south-street/jquery-ui-1.8.2.custom.css" rel="stylesheet" />\r
-               <script type="text/javascript" src="./js_basic/fg.menu.js"></script>\r
-               <link type="text/css" href="./css_basic/fg.menu.css" rel="stylesheet" />\r
-               <script type="text/javascript" src="./js_basic/jQuery.spinTheWheel.js"></script>\r
-               <script type="text/javascript" src="./js_basic/jquery.highlight-3.js"></script>\r
 \r
-               <script type="text/javascript" src="./js_basic/prettify/prettify.js"></script>\r
+       <link type="text/css" href="./css_basic/south-street/jquery-ui-1.8.2.custom.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="./js_basic/fg.menu.js"></script>\r
+       <link type="text/css" href="./css_basic/fg.menu.css" rel="stylesheet" />\r
+       <script type="text/javascript" src="./js_basic/jQuery.spinTheWheel.js"></script>\r
+       <script type="text/javascript" src="./js_basic/jquery.highlight-3.js"></script>\r
+\r
+       <script type="text/javascript" src="./js_basic/prettify/prettify.js"></script>\r
+\r
+       <script type="text/javascript" src="./js_basic/silverlight_host.js"></script>\r
+       <link rel="stylesheet" type="text/css" href="./css_basic/silverlight_host.css" media="all">\r
+\r
+       <script type="text/javascript" src="./js_basic/basiccode.js"></script>\r
+       <script type="text/javascript" src="./js_basic/basiccode_function_highlighter.js"></script>\r
+       <link rel="stylesheet" type="text/css" href="./css_basic/basiccode.css" media="all">\r
 \r
-               <script type="text/javascript" src="./js_basic/silverlight_host.js"></script>\r
-               <link rel="stylesheet" type="text/css" href="./css_basic/silverlight_host.css" media="all">\r
 \r
-               <script type="text/javascript" src="./js_basic/basiccode.js"></script>\r
-               <script type="text/javascript" src="./js_basic/basiccode_function_highlighter.js"></script>\r
-               <link rel="stylesheet" type="text/css" href="./css_basic/basiccode.css" media="all">\r
 \r
 \r
                <script type="text/javascript">\r
 <!--\r
-               var naviwidth=200;\r
-               var naviheight=800;\r
+                       var naviwidth = 200;\r
+                       var naviheight = 800;\r
 \r
 \r
-               //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
-               var currentselectedID="basiccode_step1";\r
+                       //professionalにリンクするかどうかの判断するため、jsonのデータから情報を得るためのID\r
+                       var currentselectedID = "basiccode_step1";\r
 \r
-               //JSONからデータを利用するためindex\r
-               var currentselectedIndex;\r
+                       //JSONからデータを利用するためindex\r
+                       var currentselectedIndex;\r
 \r
-               //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
-               var professionalIndexs=new Array();\r
+                       //このデモとかかわりのあるlibrarys.jsonのインデックスを格納する配列\r
+                       var professionalIndexs = new Array();\r
 \r
-               //library.jsonから読み込んだデータを格納する配列\r
-               var librarys;\r
+                       //library.jsonから読み込んだデータを格納する配列\r
+                       var librarys;\r
 \r
-               //JSONデータをひとまとめにした配列\r
-               var linkbuttondata;\r
+                       //JSONデータをひとまとめにした配列\r
+                       var nodedatas;\r
 \r
+                       //現在開いているページのカテゴリのJSONデータを格納する配列\r
+                       var currentselectedCategory;\r
 \r
-               var lang="jp";\r
 \r
-               //GETからデータを取得\r
-               var lang="jp";\r
-               if(window.location.search.length!=0){\r
-                       temppath=window.location.search.substring(1).split('&');\r
+                       var lang = "jp";\r
 \r
-                       for (var i=0; i<temppath.length; i++){\r
-                               var temparray=temppath[i].split('=');\r
+                       if (window.location.search.length != 0) {\r
+                               var temppath = window.location.search.substring(1);\r
 \r
-                               //コンテンツのIDを取得\r
-                               if(temparray[0]=="id"){\r
-                                       currentselectedID=temparray[1];\r
-\r
-                               //言語取得\r
-                               }else if(temparray[0]=="lang" && temparray[1]=="en"){\r
-                                       lang="en";\r
+                               //lang取得\r
+                               if (temppath != null) {\r
+                                       var templang = temppath.split('=');\r
+                                       if (templang[0] == "lang" && templang[1] == "en") {\r
+                                               lang = "en";\r
+                                       }\r
                                }\r
                        }\r
-               }\r
-\r
 \r
-               //JSONを読み込み、処理を開始\r
-               window.onload = function(){\r
 \r
-                       $('#inner').html(\r
-                                       '<div style="float:right;" >'\r
-                                       +'<a href="./index.html?lang='+lang+'"><img id="smalllogo" class="semitransparent" src="./img/logo_small.png" /></a>'\r
-                                       +'</div>'\r
-                                       +'<div class="clearfix"></div>'\r
-                                       \r
 \r
-                                       +'<div style="text-align:right;" >'\r
-                                               +'<h1>Articles</h1>'\r
-                                       +'</div>'\r
 \r
-                                       +'<h2>'\r
-                                               +"Psychlops Tutorial"\r
-                                       +'</h2>'\r
-                       );\r
-                       \r
-                       var basiccode='using&nbsp;namespace&nbsp;Psychlops;'\r
-                       +'void&nbsp;psychlops_main()&nbsp;{'\r
-           +'Canvas&nbsp;window(Canvas::window);'\r
-               +'Psychlops::Rectangle&nbsp;figure;'\r
-                 +'figure.set(&nbsp;100,&nbsp;100&nbsp;);'\r
-                 +'figure.centering();'\r
-                 +'figure.shift(&nbsp;10,&nbsp;10&nbsp;);'\r
-                 +'figure.draw(&nbsp;Color(&nbsp;1,&nbsp;0,&nbsp;0)&nbsp;);'\r
-                 +'window.flip();'\r
-                 +'while(!Keyboard::esc.pushed()){}";'\r
-\r
-                       $('#showcodebutton').html(\r
-                               '<form action="./showcode.php" target="_blank" method="POST" enctype="multipart/form-data">'\r
-                               +'<input type="hidden" name="code" value='+basiccode+' />'\r
-                               +'<input type="submit" value="Get CS Code! " name="submit" />'\r
-                               +'</form>'\r
-                       );\r
-\r
-\r
-\r
-\r
-\r
-\r
-\r
-\r
-                               var paper=Raphael("basiccode_navi", 800, 260);\r
-\r
-                               var line;\r
-                               line =paper.path("M130 140 L180 140");\r
-                               line.attr({stroke: "#aaaaaa"});\r
-                               line =  paper.path("M230 140 L280 140");\r
-                               line.attr({stroke: "#aaaaaa"});\r
-                               line =  paper.path("M330 140 L380 140");\r
-                               line.attr({stroke: "#aaaaaa"});\r
-                               line =  paper.path("M430 140 L480 140");\r
-                               line.attr({stroke: "#aaaaaa"});\r
-                               line =  paper.path("M530 140 L580 140");\r
-                               line.attr({stroke: "#aaaaaa"});\r
+                       //JSONを読み込み、処理を開始\r
+                       window.onload = function () {\r
+                               loadParams('./json/library.json', callbackFunc);\r
+                       }\r
 \r
-                               createLinkButton_psychlops(100,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode1.html");\r
+                       function callbackFunc(params) {\r
+                               librarys = params.library;\r
+                               loadParams('./json/datas.json', callbackFunc1);\r
+                       }\r
 \r
-                               createLinkButton_psychlops(200,130, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode2.html");\r
 \r
-                               //3-1\r
-                               createLinkButton_psychlops(300,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1a.html");\r
-                               createLinkButton_psychlops(300,130+50, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1b.html");\r
-                               createLinkButton_psychlops(300,130+100, paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-1c.html");\r
 \r
-                               //3-2\r
-                               createLinkButton_psychlops(400,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2a.html");\r
-                               createLinkButton_psychlops(400,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode3-2b.html");\r
-                               \r
-                               //4-1\r
-                               createLinkButton_psychlops(500,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1a.html");\r
-                               createLinkButton_psychlops(500,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
-                               createLinkButton_psychlops(500,130+100,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-1b.html");\r
-                       \r
-                               //4-2\r
-                               createLinkButton_psychlops(600,130,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2a.html");\r
-                               createLinkButton_psychlops(600,130+50,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
-                               createLinkButton_psychlops(600,130+100,  paper,"jp","矩形を表示し、位置と色を変えます。", "./basiccode4-2b.html");\r
+                       function callbackFunc1(params) {\r
 \r
+                               currentselectedCategory = params.articles;\r
 \r
-                               var txt=paper.text(110, 110,"Step1");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               //現在開いているページのIDから、data.jsonの配列インデックスを取得\r
+                               for (i = 0; i < currentselectedCategory.length; i++) {\r
+                                       if (currentselectedCategory[i].id == currentselectedID) currentselectedIndex = i;\r
+                               }\r
 \r
 \r
-                               txt=paper.text(210,110,"Step2");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               var paper = Raphael("navi", naviwidth, naviheight);\r
 \r
+                               //カテゴリ別に分けられたJSONのデータをひとまとめにする\r
+                               var nodedatas = new Array();\r
+                               for (i = 0; i < params.visiondemo.length; i++) { nodedatas.push(params.visiondemo[i]); }\r
+                               for (i = 0; i < params.blogparts.length; i++) { nodedatas.push(params.blogparts[i]); }\r
+                               for (i = 0; i < params.articles.length; i++) { nodedatas.push(params.articles[i]); }\r
 \r
-                               txt=paper.text(310,110,"Step3-1");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(310+16, 100+38+16,"a");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               //位置を生成\r
+                               var posdatas = setPos(nodedatas.length, naviwidth - 100, naviheight - 200, 50, 160);\r
 \r
-                                       txt=paper.text(310+16, 100+38+50+16,"b");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(310+16, 100+38+100+16,"c");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               //母点を生成\r
+                               var generatrices_data = createNode(nodedatas, posdatas, naviwidth, naviheight, paper, lang);\r
 \r
+                               //ボロノイを生成\r
+                               var lines = setVoronoi(posdatas, naviwidth, naviheight);\r
+                               for (n = 0; n < lines.length; n++) {\r
+                                       pa = paper.path("M" + lines[n].sx + " " + lines[n].sy + " L" + lines[n].ex + " " + lines[n].ey);\r
 \r
-                               txt=paper.text(410,110,"Step3-2");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                                       pa.attr({ "stroke-width": "0.8" });\r
+                                       pa.attr({ "stroke": "#9D95A4" });\r
+                                       pa.attr({ "opacity": "0.8" });\r
+                               }\r
 \r
-                                       txt=paper.text(410+16, 100+38+16,"a");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(410+16, 100+38+50+16,"b");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               var flgx = 88;\r
+                               var flgy = 54;\r
+                               flg = paper.image("./img/currentpos.png", flgx, 0, 25, 77);\r
 \r
 \r
-                               txt=paper.text(510,110,"Step4-1");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(510+16, 100+38+16,"a");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               //言語を切り替える時に使う\r
+                               url = currentselectedCategory[currentselectedIndex].url;\r
 \r
-                                       txt=paper.text(510+16, 100+38+50+16,"b");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(510+16, 100+38+100+16,"c");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               $('#header').html(\r
+                               '<span class="highlight"><a href="./index.html"><img id="smalllogo" src="./img/logo_small.png" /></a></span>'\r
 \r
+                               + '<div style="text-align:right; float:right;" >'\r
+                               + '<img id="japanese" src="./img/japanese.png" onclick="buttonJP(url,0)" />'\r
+                               + '<img id="english" src="./img/english.png"  onclick="buttonEN(url,0)"/>'\r
+                               + '</div>'\r
+                               + '<div class="space30px"></div>'\r
+                               + '<h1>Library</h1>'\r
+                       );\r
 \r
-                               txt=paper.text(610,110,"Step4-2");\r
-                               txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               $('#tutoriallink1').html(\r
+                               "<a href='./basiccode_step1.html?lang=" + lang + "'>"\r
+                               + "<img src='./img/articles/basiccode01.jpg' />"\r
+                               + "</a>"\r
+                       );\r
 \r
-                                       txt=paper.text(610+16, 100+38+16,"a");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               $('#tutoriallink2').html(\r
+                               "<a href='./basiccode_step2.html?lang=" + lang + "'>"\r
+                               + "<img src='./img/articles/basiccode02.jpg' />"\r
+                               + "</a>"\r
+                       );\r
 \r
-                                       txt=paper.text(610+16, 100+38+50+16,"b");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
 \r
-                                       txt=paper.text(610+16, 100+38+100+16,"c");\r
-                                       txt.attr({"font-size":"14px", "font-family":"arial"});\r
+                               setButton(lang);\r
 \r
+                               $('.highlight a img').rollover();\r
 \r
+                               if (lang == "en") {\r
+                                       $("#japanese").hover(function () {\r
+                                               $(this).css("cursor", "pointer");\r
+                                       }, function () {\r
+                                               $(this).css("cursor", "default");\r
+                                       });\r
+                               }\r
 \r
-       }\r
+                               if (lang == "jp") {\r
+                                       $("#english").hover(function () {\r
+                                               $(this).css("cursor", "pointer");\r
+                                       }, function () {\r
+                                               $(this).css("cursor", "default");\r
+                                       });\r
+                               }\r
+                       }\r
 \r
 \r
-       $(document).ready( function(){ \r
-               $(".tooltip").tipTip({\r
-                       maxWidth: "auto",\r
-                       edgeOffset: 0,\r
-                       fadeIn:0,\r
-                       activation: "hover", //click\r
-                       defaultPosition: "top"\r
-               });\r
-       });\r
+                       $(document).ready(function () {\r
+                               $(".tooltip").tipTip({\r
+                                       maxWidth: "auto",\r
+                                       edgeOffset: 0,\r
+                                       fadeIn: 0,\r
+                                       activation: "hover", //click\r
+                                       defaultPosition: "top"\r
+                               });\r
+                       });\r
 \r
 //-->\r
                </script>\r
 <body>\r
 <div id="wrapper">\r
 \r
-       <div id="contents_basiccode"  style="margin-top:20px;">\r
+       <div id="navi">\r
+       <!-- #navi --></div>\r
+       \r
+       <div id="contents">\r
 \r
-               <div id="inner"></div>\r
-               \r
-               <div class="space40px"></div>\r
-               <h3>Basic Code : Step3-1a</h3>\r
-               <div class="space20px"></div>\r
+               <div id="header"></div>\r
 \r
-               <div id="code" style="float:left; width:400px;">\r
 \r
+               <div id="title"><h2>Basic Code Step1 </h2></div>\r
+\r
+               <div class="space30px"></div>\r
+\r
+               <div id="codecontents">\r
+       \r
+               <div id="code" style="float:left; width:400px;">\r
 \r
 <pre id="main_code" class="main prettyprint cpp">\r
-///+ Prefix linkto BasicCode1\r
+///+ Prefix\r
 //// Lines for set up Psychlops environment\r
 #include &lt;psychlops.h&gt;\r
 using namespace Psychlops;\r
-///- Prefix linkto BasicCode1\r
-\r
-\r
+///- Prefix\r
\r
 ///+ Main Routine\r
 //// Psychlops runs at the first line of this function psychlops_main().\r
 void psychlops_main() {\r
+       ///+ 1\r
+    //// Set a window for drawing stimulus\r
+    Canvas window(Canvas::window); //Create a window. Here, window variables are preset mode.\r
+    // You can write this statement as" Canvas window(Canvas::fullscreen); " for fullscreen mode\r
+    // or as " Canvas window(1024, 768, 32, 60.0); " This statement changes screenmode to 1024 x 768, 32bit color, 60 Hz refresh.\r
+       ///- 1\r
+       \r
+       ///+ 2\r
+       ////  Set a figure size, position and color.\r
+    Psychlops::Rectangle/*ID:FIGURE selector Rectangle Ellipse*/ figure; //Create a figure (Rectangle or Ellipse) variable.\r
     \r
-    ///+ 0 SetGlobal\r
-    ////Prepare global parameters\r
-     const int maxrectnum = 200;\r
-     int rectnum = 100/*ID:rectnumber 25.0 200.0 25.0*/;\r
-     double rectsize = 3.0/*ID:dotsize 1.0 10.0 1.0*/;\r
-     Psychlops::Rectangle rect[maxrectnum];\r
-     double rectcolorR[maxrectnum];\r
-     double rectcolorG[maxrectnum];\r
-     double rectcolorB[maxrectnum];\r
-    ///- 0 SetGlobal\r
-\r
-        Canvas window(Canvas::window);\r
-\r
-     ///+ 1 Initialize\r
-     ////Initialize\r
-     for(int i=0; i &lt; rectnum; i++){\r
-         ///+ 1.1\r
-         ////set positions and sizes\r
-         rect[i].set(rectsize, rectsize); //Set a size of rectangles.\r
-         rect[i].centering(); //Move Rectangles to the center.\r
-         rect[i].shift((i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectHGap 1.0 3.0 0.5*/,\r
-                                        (i - 0.5 * rectnum) * rectsize * 1.5/*ID:RectVGap 1.0 3.0 0.5*/); //Move Rectangles to initial positions\r
-         ///- 1.1\r
-\r
-         ///+ 1.2\r
-         ////set colors\r
-         rectcolorR[i]=(double)i * 0.5/*ID:RGain 0.0 1.0 0.5*//(double)rectnum; //Set R values. Note that "i" and "rectnum" is converted to double-type.\r
-         rectcolorG[i]=(double)i * 0.5/*ID:GGain 0.0 1.0 0.5*//(double)rectnum; //Set G values. Note that "i" and "rectnum" is converted to double-type.\r
-         rectcolorB[i]=(double)i * 0.5/*ID:BGain 0.0 1.0 0.5*//(double)rectnum; //Set B values. Note that "i" and "rectnum" is converted to double-type.\r
-         ///- 1.2\r
-    }\r
-    ///- 1 Initialize\r
+    figure.set( 100/*ID:SIZE_X 1 200 10*/, 100/*ID:SIZE_Y 1 200 10*/ ); // Set the size of figure.\r
+    figure.centering();   // Centering the figure in the window\r
+    figure.shift( 10/*ID:SHIFT_X -100 100 10*/, 10/*ID:SHIFT_Y -100 100 10*/ ); // Displacing the figure by designated vector.    \r
+    figure.draw( Color( 1.0/*ID:COLOR_R 0 1.0 0.1*/, 0.0/*ID:COLOR_G 0.0 1.0 0.1*/, 0.0/*ID:COLOR_B 0 1.0 0.1*/) ); // Drawing the rectangle with a designated color.\r
     \r
-    ///+ 2 drawing\r
-    ////drawing objects\r
-    while(!Keyboard::esc.pushed()){\r
-        window.clear(Color::black); //Clear window with black\r
-        for(int i=0; i &lt; rectnum; i++){\r
-            rect[i].draw(Color(rectcolorR[i], rectcolorG[i], rectcolorB[i])); //draw objects by designated colors.\r
-        }\r
-        window.flip();\r
-    }\r
-    ///- 2 drawing\r
-\r
+    window.flip(); // Reflect the drawing for the display by flipping frame buffers.\r
+                   // Till this point, you will not see drawn figures.\r
+       ///- 2\r
+    \r
+       ///+ 3 \r
+       //// Detect a Keyboard input\r
+    while(!Keyboard::esc.pushed()) {} //exit a program when the escape key is pressed down.\r
+    ///- 3\r
\r
 }\r
 ///- Main Routine\r
-</pre>\r
 \r
+</pre>\r
 \r
        <!-- #code --></div>\r
 \r
 \r
-       <div id="window" style="float:left; width:300px; height:300px; ">\r
-       <div class="desc_child"><span id="xap">./Bin/Debug/PsychlopsSilverlight4test.xap</span></div>\r
+       <div id="window" style="float:left; width:200px; height:300px; ">\r
+       <div class="desc_child"><span id="xap">Bin/Debug/PsychlopsSilverlight4test.xap</span></div>\r
        </div>\r
 \r
+       <!-- #codecontents --></div>\r
 \r
        <div class="clearfix"></div>\r
 \r
-       <br />\r
-       <br />\r
-       \r
-       <div id="showcodebutton" style="margin-left:40px;"></div>\r
-\r
-       <div id="basiccode_navi"></div>\r
 \r
-       <div class="space100px"></div>\r
+       <div style="text-align:right;">\r
+       <a class="txt" style="margin-right:200px;" href="./basiccode_step2.html">Next Step>></a>\r
+       </div>\r
 \r
-<!-- #contents --></div>\r
+       <div class="space40px"></div>\r
+       \r
+       <div id="comment">\r
+               上記の文字は<b>Psychlopsのコード</b>です。そしてコードの実行結果はコード右のウィンドウに表示されています。<br />\r
+               コード内の<b>太文字をクリック</b>するとマウス操作で値を変えることができ、結果がすぐに反映されます。\r
+               また、コード内の<b>青い文字をロールオーバ</b>すると、ポップアップで説明が現れます。\r
+       <!-- #comment --></div>\r
 \r
+</div>\r
 <!-- #wrapper --></div>\r
 </body>\r
-</html>
\ No newline at end of file
+</html>\r