Just use one version of the scripts in both the browser and in SkV8 by using feature detection to determine if we are running in a browser, and if the platform supports the Path() object. Also add oval, console.log, and the snow example code.

BUG=
R=robertphillips@google.com

Author: jcgregorio@google.com

Review URL: https://codereview.chromium.org/132413002

git-svn-id: http://skia.googlecode.com/svn/trunk@13031 2bbb7eff-a529-9590-31e7-b0007b416f81

8 files changed, 231 insertions, 126 deletions

diff --git a/experimental/SkV8Example/Path.cpp b/experimental/SkV8Example/Path.cpp
index 2b53a0f8e1..90574f40f0 100644
--- a/experimental/SkV8Example/Path.cpp
+++ b/experimental/SkV8Example/Path.cpp
@@ -43,13 +43,14 @@ void Path::AddToGlobal(Global* global) {
             gGlobal->getIsolate(), Path::ConstructPath);
     constructor->InstanceTemplate()->SetInternalFieldCount(1);
 
-    ADD_METHOD("close", ClosePath);
+    ADD_METHOD("closePath", ClosePath);
     ADD_METHOD("moveTo", MoveTo);
     ADD_METHOD("lineTo", LineTo);
     ADD_METHOD("quadraticCurveTo", QuadraticCurveTo);
     ADD_METHOD("bezierCurveTo", BezierCurveTo);
     ADD_METHOD("arc", Arc);
     ADD_METHOD("rect", Rect);
+    ADD_METHOD("oval", Oval);
 
     context->Global()->Set(String::NewFromUtf8(
             gGlobal->getIsolate(), "Path"), constructor->GetFunction());
@@ -191,3 +192,29 @@ void Path::Rect(const v8::FunctionCallbackInfo<Value>& args) {
     Path* path = Unwrap(args);
     path->fSkPath.addRect(rect);
 }
+
+void Path::Oval(const v8::FunctionCallbackInfo<Value>& args) {
+    if (args.Length() != 4 && args.Length() != 5) {
+        args.GetIsolate()->ThrowException(
+                v8::String::NewFromUtf8(
+                        args.GetIsolate(), "Error: 4 or 5 args required."));
+        return;
+    }
+    double x          = args[0]->NumberValue();
+    double y          = args[1]->NumberValue();
+    double radiusX    = args[2]->NumberValue();
+    double radiusY    = args[3]->NumberValue();
+    SkPath::Direction dir = SkPath::kCW_Direction;
+    if (args.Length() == 5 && !args[4]->BooleanValue()) {
+        dir = SkPath::kCCW_Direction;
+    }
+    Path* path = Unwrap(args);
+    SkRect rect = {
+        SkDoubleToScalar(x-radiusX),
+        SkDoubleToScalar(y-radiusX),
+        SkDoubleToScalar(x+radiusY),
+        SkDoubleToScalar(y+radiusY)
+    };
+
+    path->fSkPath.addOval(rect, dir);
+}
diff --git a/experimental/SkV8Example/Path.h b/experimental/SkV8Example/Path.h
index 0c697700cd..3c21c9c0f4 100644
--- a/experimental/SkV8Example/Path.h
+++ b/experimental/SkV8Example/Path.h
@@ -39,6 +39,7 @@ public:
     static void BezierCurveTo(const v8::FunctionCallbackInfo<v8::Value>& args);
     static void Arc(const v8::FunctionCallbackInfo<v8::Value>& args);
     static void Rect(const v8::FunctionCallbackInfo<v8::Value>& args);
+    static void Oval(const v8::FunctionCallbackInfo<v8::Value>& args);
 private:
     SkPath fSkPath;
 
diff --git a/experimental/SkV8Example/SkV8Example.cpp b/experimental/SkV8Example/SkV8Example.cpp
index 6eb8d89e04..eb0e713376 100644
--- a/experimental/SkV8Example/SkV8Example.cpp
+++ b/experimental/SkV8Example/SkV8Example.cpp
@@ -156,12 +156,28 @@ SkOSWindow* create_sk_window(void* hwnd, int argc, char** argv) {
     Isolate* isolate = Isolate::GetCurrent();
     Global* global = new Global(isolate);
 
+
+    // Set up things to look like a browser by creating
+    // a console object that invokes our print function.
+    const char* startupScript =
+            "function Console() {};                   \n"
+            "Console.prototype.log = function() {     \n"
+            "  var args = Array.prototype.slice.call(arguments).join(' '); \n"
+            "  print(args);                      \n"
+            "};                                       \n"
+            "console = new Console();                 \n";
+
+    if (!global->parseScript(startupScript)) {
+        printf("Failed to parse startup script: %s.\n", FLAGS_infile[0]);
+        exit(1);
+    }
+
     const char* script =
-"function onDraw(canvas) {              \n"
-"    canvas.fillStyle = '#00FF00';      \n"
-"    canvas.fillRect(20, 20, 100, 100); \n"
-"    canvas.inval();                    \n"
-"}                                      \n";
+            "function onDraw(canvas) {              \n"
+            "    canvas.fillStyle = '#00FF00';      \n"
+            "    canvas.fillRect(20, 20, 100, 100); \n"
+            "    canvas.inval();                    \n"
+            "}                                      \n";
 
     SkAutoTUnref<SkData> data;
     if (FLAGS_infile.count()) {
@@ -179,6 +195,7 @@ SkOSWindow* create_sk_window(void* hwnd, int argc, char** argv) {
         exit(1);
     }
 
+
     JsContext* jsContext = new JsContext(global);
 
     if (!jsContext->initialize()) {
diff --git a/experimental/SkV8Example/compare/gears.html b/experimental/SkV8Example/compare/gears.html
index b59664a8a1..a53789c9dc 100644
--- a/experimental/SkV8Example/compare/gears.html
+++ b/experimental/SkV8Example/compare/gears.html
@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
 </head>
 <body>
-    <canvas id=gears width=500 height=400>
-    <script src="gears.js" type="text/javascript" charset="utf-8"></script>
+    <canvas id=gears width=500 height=500>
+    <script src="../gears.js" type="text/javascript" charset="utf-8"></script>
 </body>
 </html>
diff --git a/experimental/SkV8Example/compare/gears.js b/experimental/SkV8Example/compare/gears.js
deleted file mode 100644
index cca8213d98..0000000000
--- a/experimental/SkV8Example/compare/gears.js
+++ /dev/null
@@ -1,93 +0,0 @@
-var NumTeeth = 24;
-var Delta = Math.PI/90;
-var NumGears = 60;
-var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"];
-var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"];
-
-
-function drawGear(ctx, r) {
-  var dT = Math.PI*2/NumTeeth;
-  var dTq = dT/4;
-  var outer = r;
-  var inner = 0.7 * r;
-  ctx.beginPath();
-  for (var i=0; i<NumTeeth; i+=2) {
-    ctx.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
-    ctx.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
-    ctx.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
-    ctx.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
-  }
-  ctx.closePath();
-  ctx.stroke();
-};
-
-function draw3DGear(ctx, angle, faceColor, sideColor, r) {
-  ctx.fillStyle = faceColor;
-  ctx.strokeStyle = sideColor;
-  ctx.rotate(angle);
-  drawGear(ctx, r);
-  for (var i=0; i < 20; i++) {
-    ctx.rotate(-angle);
-    ctx.translate(0.707, 0.707);
-    ctx.rotate(angle);
-    drawGear(ctx, r);
-  }
-  ctx.fill()
-  ctx.rotate(-angle);
-}
-
-function draw3DGearAt(ctx, x, y, r, angle, faceColor, sideColor) {
-  ctx.save();
-  ctx.translate(x, y);
-  draw3DGear(ctx, angle, faceColor, sideColor, r);
-  ctx.restore();
-}
-
-var anim = function() {
-  var canvas = document.getElementById('gears');
-  var ctx = canvas.getContext("2d");
-  var ticks=0;
-  var rotation = 0;
-  var gears = [];
-
-  for (var i=0; i<NumGears; i++) {
-    color = Math.floor(Math.random()*FaceColors.length);
-    gears.push({
-        x: Math.random()*500,
-        y: Math.random()*500,
-        r: Math.random()*100+5,
-        faceColor: FaceColors[color],
-        sideColor: SideColors[color]
-    });
-  }
-
-  function draw() {
-    ctx.resetTransform();
-    ctx.fillStyle = 'white';
-    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-    rotation += Delta;
-    if (rotation >= Math.PI*2) {
-      rotation = 0;
-    }
-
-    for (var i=0; i < gears.length; i++) {
-      draw3DGearAt(ctx, gears[i].x,  gears[i].y, gears[i].r, rotation,
-          gears[i].faceColor, gears[i].sideColor); }
-
-    ticks++;
-    requestAnimationFrame(draw);
-  }
-
-  requestAnimationFrame(draw);
-
-
-  function fps() {
-    console.log(ticks);
-    ticks = 0;
-  }
-
-  setInterval(fps, 1000);
-}();
-
-
diff --git a/experimental/SkV8Example/compare/snow.html b/experimental/SkV8Example/compare/snow.html
new file mode 100644
index 0000000000..cc5ad0cb75
--- /dev/null
+++ b/experimental/SkV8Example/compare/snow.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Snow</title>
+    <meta charset="utf-8" />
+</head>
+<body>
+    <canvas id=snow width=500 height=500>
+    <script src="../snow.js" type="text/javascript" charset="utf-8"></script>
+</body>
+</html>
diff --git a/experimental/SkV8Example/gears.js b/experimental/SkV8Example/gears.js
index 89547a278d..7eb4c5b198 100644
--- a/experimental/SkV8Example/gears.js
+++ b/experimental/SkV8Example/gears.js
@@ -1,45 +1,78 @@
+var IS_SKV8 = typeof document == "undefined";
+var HAS_PATH = typeof Path != "undefined";
+
 var NumTeeth = 24;
 var NumGears = 60;
 var DeltaTheta = Math.PI/90;
 var FaceColors = ["#000099", "#006600", "#990000", "#EEEE00"];
 var SideColors = ["#0000FF", "#009900", "#FF0000", "#CCCC00"];
 
-function gearPath(r) {
-  var outer = r;
-  var inner = 0.7 * r;
+function makeGear(pathLike, r) {
   var dT = Math.PI*2/NumTeeth;
   var dTq = dT/4;
-  p = new Path();
-  p.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer);
+  var outer = r;
+  var inner = 0.7 * r;
+  pathLike.moveTo(Math.sin(-2*dTq)*outer, Math.cos(-2*dTq)*outer);
   for (var i=0; i<NumTeeth; i+=2) {
-    p.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
-    p.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
-    p.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
-    p.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
+    pathLike.lineTo(Math.sin(dT*i-dTq)*outer, Math.cos(dT*i-dTq)*outer);
+    pathLike.lineTo(Math.sin(dT*i+dTq)*inner, Math.cos(dT*i+dTq)*inner);
+    pathLike.lineTo(Math.sin(dT*(i+1)-dTq)*inner, Math.cos(dT*(i+1)-dTq)*inner);
+    pathLike.lineTo(Math.sin(dT*(i+1)+dTq)*outer, Math.cos(dT*(i+1)+dTq)*outer);
+  }
+}
+
+function gearPath(r) {
+  if (HAS_PATH) {
+    p = new Path();
+    makeGear(p, r)
+    p.closePath();
+    return p;
+  } else {
+    return null;
+  }
+}
+
+function strokeGear(ctx, gear) {
+  if (HAS_PATH) {
+    ctx.stroke(gear.path);
+  } else {
+    ctx.beginPath();
+    makeGear(ctx, gear.r);
+    ctx.closePath();
+    ctx.stroke();
+  }
+}
+
+function fillGear(ctx) {
+  if (HAS_PATH) {
+    ctx.fill(gear.path);
+  } else {
+    ctx.beginPath();
+    makeGear(ctx, gear.r);
+    ctx.closePath();
+    ctx.fill();
   }
-  p.close();
-  return p;
 }
 
-function draw3DGear(ctx, angle, faceColor, sideColor, path) {
-  ctx.strokeStyle = sideColor;
-  ctx.fillStyle = faceColor;
+function draw3DGear(ctx, angle, gear) {
+  ctx.strokeStyle = gear.sideColor;
+  ctx.fillStyle = gear.faceColor;
   ctx.rotate(angle);
-  ctx.stroke(path);
+  strokeGear(ctx, gear);
   for (var i=0; i < 20; i++) {
     ctx.rotate(-angle);
     ctx.translate(0.707, 0.707);
     ctx.rotate(angle);
-    ctx.stroke(path);
+    strokeGear(ctx, gear);
   }
-  ctx.fill(path)
+  fillGear(ctx, gear);
   ctx.rotate(-angle);
 }
 
-function draw3DGearAt(ctx, x, y, angle, path, faceColor, sideColor) {
+function draw3DGearAt(ctx, angle, gear) {
   ctx.save();
-  ctx.translate(x, y);
-  draw3DGear(ctx, angle, faceColor, sideColor, path);
+  ctx.translate(gear.x, gear.y);
+  draw3DGear(ctx, angle, gear);
   ctx.restore();
 }
 
@@ -50,10 +83,12 @@ var onDraw = function() {
 
   for (var i=0; i<NumGears; i++) {
     color = Math.floor(Math.random()*FaceColors.length);
+    r = Math.random()*100+5;
     gears.push({
         x: Math.random()*500,
         y: Math.random()*500,
-        path: gearPath(Math.random()*100+5),
+        path: gearPath(r),
+        r: r,
         faceColor: FaceColors[color],
         sideColor: SideColors[color]
     });
@@ -68,16 +103,18 @@ var onDraw = function() {
     }
 
     for (var i=0; i < gears.length; i++) {
-      draw3DGearAt(ctx, gears[i].x,  gears[i].y, rotation, gears[i].path,
-          gears[i].faceColor, gears[i].sideColor);
+      gear = gears[i];
+      draw3DGearAt(ctx, rotation, gear);
     }
 
     ticks++;
-    inval();
+    if (IS_SKV8) {
+      inval();
+    }
   };
 
   function fps() {
-    print(ticks);
+    console.log(ticks);
     ticks = 0;
     setTimeout(fps, 1000);
   };
@@ -86,3 +123,16 @@ var onDraw = function() {
 
   return draw;
 }();
+
+if (!IS_SKV8) {
+  window.onload = function(){
+    var canvas = document.getElementById("gears");
+    var ctx = canvas.getContext("2d");
+    function drawCallback() {
+      onDraw(ctx);
+      setTimeout(drawCallback, 1);
+    }
+    setTimeout(drawCallback, 1);
+  }
+}
+
diff --git a/experimental/SkV8Example/snow.js b/experimental/SkV8Example/snow.js
new file mode 100644
index 0000000000..87ce119198
--- /dev/null
+++ b/experimental/SkV8Example/snow.js
@@ -0,0 +1,92 @@
+var IS_SKV8 = typeof document == "undefined";
+
+function circlePath(r) {
+  if (IS_SKV8) {
+    var p = new Path();
+    p.oval(0, 0, r, r);
+    p.closePath();
+    return p;
+  } else {
+    return null;
+  }
+}
+
+var onDraw = function() {
+  var W = 500;
+  var H = 500;
+  var NumParticles = 100;
+
+  var angle = 0;
+  var ticks = 0;
+  var particles =[];
+
+  for (var i = 0; i < NumParticles; i++) {
+    particles[i] = {
+      x:    Math.floor(Math.random()*W),
+      y:    Math.floor(Math.random()*H),
+      r:    Math.floor(Math.random()*7+1),
+      path: circlePath(Math.random()*7+1),
+    }
+  }
+
+  function draw(ctx) {
+    ctx.fillStyle = "#ADD8E6";
+    ctx.fillRect(0, 0, W-1, H-1);
+    ctx.fillStyle = "#FFFFFF";
+
+    angle += 0.0039;
+    for (var i = 0; i < particles.length; i++) {
+      var p = particles[i];
+      p.x += Math.floor(Math.sin(angle)*5.0);
+      p.y += 0.6*p.r;
+      if (p.x > W) {
+        p.x-=W;
+      }
+      if (p.x < 0) {
+        p.x += W;
+      }
+      if(p.y>(H+1)){
+        p.y = 0;
+      }
+      if (IS_SKV8) {
+        ctx.save();
+        ctx.translate(p.x, p.y);
+        ctx.fill(p.path);
+        ctx.restore();
+      } else {
+        ctx.beginPath();
+        ctx.moveTo(p.x, p.y);
+        ctx.arc(p.x, p.y, p.r, 0, 2*Math.PI, true);
+        ctx.closePath();
+        ctx.fill();
+      }
+    };
+
+    ticks++;
+    if (IS_SKV8) {
+      inval();
+    }
+  }
+
+  function fps() {
+    console.log(ticks);
+    ticks = 0;
+    setTimeout(fps, 1000);
+  }
+
+  setTimeout(fps, 1000);
+
+  return draw;
+}();
+
+if (!IS_SKV8) {
+  window.onload = function(){
+    var canvas = document.getElementById("snow");
+    var ctx = canvas.getContext("2d");
+    function drawCallback() {
+      onDraw(ctx);
+      setTimeout(drawCallback, 1);
+    }
+    setTimeout(drawCallback, 1);
+  }
+}