tried to inset line within text, this is how far I got

Zolmeister · Oct 6, 2013 · 2ac6def · 2ac6def
1 parent 767b948
commit 2ac6def
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 6 deletions.
diff --git a/bindings.js b/bindings.js
@@ -17,13 +17,16 @@ var mouseDown = false
 window.onresize = function() {
   $canv.width = window.innerWidth
   $canv.height = window.innerHeight
-
   ctx = $canv.getContext('2d')
   ctx.lineJoin = 'round'
 
-  GAME.spawner.resize($canv.width, $canv.height)
-  GAME.levelBar.resize($canv.width, $canv.height)
-  GAME.levelBalls.resize($canv.width, $canv.height)
+  if(GAME.state === 'playing') {
+    GAME.spawner.resize($canv.width, $canv.height)
+    GAME.levelBar.resize($canv.width, $canv.height)
+    GAME.levelBalls.resize($canv.width, $canv.height)
+  } else {
+    drawMenu()
+  }
 }
 
 $canv.onmousedown = function(e){

diff --git a/color.js b/color.js
@@ -1,4 +1,7 @@
 function Color(r, g, b) {
+  if(r instanceof Array) {
+    return Color.apply(this, r)
+  }
   this.r = r
   this.g = g
   this.b = b

diff --git a/index.html b/index.html
@@ -1,7 +1,13 @@
 <!DOCTYPE html>
 <html>
     <head><title>Pond</title></head>
+    <style>@import url(http://fonts.googleapis.com/css?family=Marck+Script|Pacifico|Satisfy|Leckerli+One);</style>
     <body>
+        <span style='font-family:Leckerli One'>a</span>
+        <span style='font-family:Marck Script'>a</span>
+        <span style='font-family:Pacifico'>a</span>
+        <span style='font-family:Satisfy'>a</span>
+
         <canvas id='canv'></canvas>
         <span class='sound'>&#9835;</span>
         <style>

diff --git a/main.js b/main.js
@@ -15,6 +15,7 @@ if(debug){
 }
 
 function init() {
+  GAME.state = 'playing'
   GAME.player = new Fish(false)
   GAME.fishes = [GAME.player]
   GAME.spawner = new Spawner($canv.width, $canv.height, GAME.player, GAME.fishes)
@@ -23,6 +24,7 @@ function init() {
   GAME.levelBalls = new LevelBalls($canv.width, $canv.height)
   GAME.levelBallParticles = []
   GAME.endGameParticles = []
+  requestAnimFrame(draw)
 }
 
 // game loop
@@ -247,9 +249,124 @@ window.requestAnimFrame = (function(){
     window.mozRequestAnimationFrame
 })();
 
-init()
-requestAnimFrame(draw)
+setTimeout(drawMenu, 100)
+
+
+function drawMenu() {
+
+  // background
+  ctx.fillStyle = '#111'
+  ctx.fillRect(0, 0, $canv.width, $canv.height)
+
+  // title
+  drawFancyText(ctx, 'Pond', 150, 200, 200)
+
+  // button
+  ctx.fillStyle = '#444'
+  ctx.fillRect($canv.width * 2/10, $canv.height  / 2 - $canv.height / 4 / 2, $canv.width * 6/10,  $canv.height / 4)
+  //init()
+}
+
+function drawFancyText(ctx, text, size, x, y) {
+  //ctx.globalCompositeOperation = ''
+  var col1 = new Color(pallet[4])
+  ctx.strokeStyle = col1.rgb()
+  ctx.lineWidth = 6
+  ctx.font = size + 'px Leckerli One, cursive'
+
+  ctx.strokeText(text, x, y)
+  ctx.fillText(text, x, y)
+
+
+
+  ctx.font = size/2 + 'px Leckerli One, cursive'
+  ctx.strokeText('the', x-100, y - 60)
+  ctx.fillText('the', x-100, y - 60)
+  for( var i=0;i<text.length;i++) {
+    //drawFancyLetter(ctx, text[i], size, x + size * i/1.8, y)
+  }
 
+  var img = ctx.getImageData(0, 0, $canv.width, $canv.height)
+  var pixs = img.data
+  for(var px = 0; px < $canv.width*4; px+=4) {
+    var hitColor = false
+    var hitEmptyAfterColor = false
+    var filled = false
+    var startY = null
+    for(var py = 0; py < $canv.height*4; py+=4) {
+      var r = pixs[py*$canv.width + px]
+      if (r > 20) {
+        // color hit
+        if(!hitColor){
+          // first line, now we wait for the next one to interpolate
+          hitColor = true
+          startY = py
+        } else if(hitEmptyAfterColor){
+          // fill interpolated pixel
+          filled = true
+          var tx = px
+          var ty = startY + Math.floor((py - startY)/2)
+          // scan left and scan right to check for shorter distance
+          pixs[ty * $canv.width + tx + 1] = 255
+        }
+      } else if(hitColor) {
+        // empty hit after original hit
+        hitEmptyAfterColor = true
+        if(filled) {
+          filled = false
+          hitEmptyAfterColor = false
+          hitColor = false
+          startY = null
+        }
+      }
+    }
+  }
+  for(var py = 0; py < $canv.height*4; py+=4) {
+    var hitColor = false
+    var hitEmptyAfterColor = false
+    var filled = false
+    var startY = null
+    for(var px = 0; px < $canv.width*4; px+=4) {
+      var r = pixs[py*$canv.height + px]
+      if (r > 20) {
+        // color hit
+        if(!hitColor){
+          // first line, now we wait for the next one to interpolate
+          hitColor = true
+          startY = px
+        } else if(hitEmptyAfterColor){
+          // fill interpolated pixel
+          filled = true
+          var tx = startY + Math.floor((px - startY)/2)
+          var ty = py
+          // scan left and scan right to check for shorter distance
+          pixs[ty * $canv.height + tx + 1] = 255
+        }
+      } else if(hitColor) {
+        // empty hit after original hit
+        hitEmptyAfterColor = true
+        if(filled) {
+          filled = false
+          hitEmptyAfterColor = false
+          hitColor = false
+          startY = null
+        }
+      }
+    }
+  }
+  //ctx.clearRect(x-100, y-100, 400, 100)
+  ctx.putImageData(img, 0, 0)
+}
+function drawFancyLetter(ctx, letter, size, x, y) {
+  var col1 = new Color(255, 0, 100)
+  ctx.strokeStyle = col1.rgb()
+  ctx.lineWidth = 2
+  ctx.font = size + 'px Leckerli One'
+  ctx.fillText(letter, x, y)
+  ctx.strokeText(letter, x, y)
+  ctx.font = size+20 + 'px Leckerli One'
+  ctx.strokeText(letter, x-5, y+5)
+}
 
 // level debug
 //levelBalls.addBall()