Initial commit

README.md

@@ -0,0 +1,33 @@
+Baroquesize Yourself
+====================
+
+A simple web app created for my History of Creativity (BYU Tech202) class' end of semester project. The app allows the user to take a picture of themselves and adjust the image to make the picture look more like baroque style art. The app was demoed at the "creativity fair" where my partner created a photo booth with baroque era props. The original app would allow you to send a link to your picture via your email, but it has been modified to allow you to download the image directly instead.
+
+The app can be viewed at [http://benjamin-hansen.com/baroque]().
+
+Currently this app only runs properly on Chrome version 25 or later. Access to the web cam is through WebRTC.
+
+Credits
+-------
+
+* [Pixastic](http://www.pixastic.com/) - Used for all image processing primitives.
+* [SubtlePatterns](http://subtlepatterns.com/txture/) - Background wallpaper. Author: [Anatoli Nicolae](http://designchomp.com/).
+
+License
+-------
+
+Baroquesize Yourself
+Copyright (C) 2013 Benjamin Hansen
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.

image_manipulator.js

@@ -0,0 +1,80 @@
+(function() {
+
+  IM = {}
+
+  window.processingGradientEffect = false;
+
+  IM.gradientRadiusEffect = function(ctx, effect, x, y, radius, totalIncrements, doIncrements, incrementAdjust) {
+    if(doIncrements === undefined) {
+      doIncrements = .4 * totalIncrements;
+    }
+    if(incrementAdjust === undefined) {
+      incrementAdjust = 1;
+    }
+    if(processingGradientEffect == true) {
+      console.log("double click, quiting");
+      return;
+    }
+    var effectSmallerCircle = function (i) {
+      if(i >= doIncrements) {
+        processingGradientEffect = false;
+        return;
+      }
+      ctx.save()
+      ctx.beginPath();
+      ctx.arc(x, y, (totalIncrements - i) / totalIncrements * radius, 2 * Math.PI, false)
+      ctx.clip();
+      effect(ctx, function () { ctx.restore(); effectSmallerCircle(i+incrementAdjust);});
+    }
+
+    processingGradientEffect = true;
+    effectSmallerCircle(0);
+  }
+
+  // amount (-1, 1)
+  IM.adjustBrightness = function (ctx, amount, callback) {
+    var P = Pixastic(ctx);
+    brightness = amount;
+    contrast = 0;
+    P["brightness"]({brightness: brightness, contrast: contrast}).done(function() {
+      console.log("Done Adjusting Brightness");
+      callback();
+    }, function(p) {
+      //progress.style.height = (p * 100) + "%";
+    });
+
+  }
+
+
+  IM.adjustContrast = function (ctx, amount) {
+    if(processingGradientEffect) {
+      return;
+    }
+    var P = Pixastic(ctx);
+    brightness = -.5 * amount;
+    contrast = .6 * amount;
+    P["brightness"]({brightness: brightness, contrast: contrast}).done(function() {
+      console.log("Done Adjusting Brightness");
+    }, function(p) {
+      //progress.style.height = (p * 100) + "%";
+    });
+  }
+
+
+  IM.blur = function (ctx, kernelSize, callback) {
+    var P = Pixastic(ctx);
+    P["blur"]({kernelSize: kernelSize}).done(function() {
+      console.log("Done adding blur");
+      if(callback !== undefined) {
+        callback();
+      } else {
+        console.log("null callback");
+      }
+    }, function(p) {
+      //progress.style.height = (p * 100) + "%";
+    });
+  }
+
+  window.IM = IM
+
+})();

index.css

@@ -0,0 +1,186 @@
+body {
+	width: 1040px;
+	margin-left: auto;
+	margin-right: auto;
+	font-family: 'Asul', sans-serif;
+	background-image: url("txture.png");
+	background-color: #1a1918;
+}
+
+hr {
+	color: rgb(114, 64, 0);
+	background-color: rgb(114, 64, 0);
+	border: 0;
+	height: 2px;
+}
+
+#header {
+	text-align: center;
+	font-size: 30pt;
+	font-weight: 700;
+	color: rgb(224, 174, 69);
+	padding: 20px;
+}
+
+
+#steps {
+	display: inline-block;
+	width: 280px;
+	vertical-align: top;
+	padding: 8px;
+	margin-right: 15px;
+}
+
+.step {
+	display: block;
+	clear: both;
+}
+
+.step.current {
+	font-weight: bold;
+}
+
+#practical-instructions {
+	text-align: justify;
+}
+
+#center {
+	display: inline-block;
+	width: 410px;
+}
+
+#video, #canvas, #steps, #instructions, #controls {
+	border-style: solid;
+	border-width: 2px;
+	/*border-color: rgb(154, 104, 9);*/
+	border-color: rgb(114, 64, 0);
+	background-color: rgb(254, 204, 99);
+}
+
+#video, #canvas {
+	width: 400px;
+	height: 300px;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+#canvas {
+	display: none;
+}
+
+#controls {
+	width: 390px;
+	margin-top: 8px;
+	padding: 5px;
+	text-align: center;
+	clear: both;
+}
+
+#next {
+	float: right;
+}
+
+#instructions {
+	display: inline-block;
+	width: 280px;
+	padding: 8px;
+	vertical-align: top;
+	margin-left: 15px;
+	text-align: justify;
+}
+
+#instr-title {
+	text-align: center;
+	font-size: 16pt;
+}
+
+#c2, #c3, #c4 {
+	display: none;
+}
+
+#start-over {
+	float: left;
+}
+
+#reset {
+	display: none;
+}
+
+#clearfix {
+	clear: both;
+}
+
+button {
+	cursor: pointer;
+	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
+	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
+	background-color:#ededed;
+	-moz-border-radius:12px;
+	-webkit-border-radius:12px;
+	border-radius:12px;
+	border:1px solid #dcdcdc;
+	display:inline-block;
+	color:#777777;
+	font-family:arial;
+	font-size:15px;
+	font-weight:bold;
+	padding:5px 13px;
+	text-decoration:none;
+	text-shadow:1px 1px 0px #ffffff;
+}button:hover {
+	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
+	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
+	background-color:#dfdfdf;
+}button:active {
+	position:relative;
+	top:1px;
+}button:disabled {
+	background: #dfdfdf;
+	cursor: default;
+}button:hover:disabled {
+	filter:none;
+}button:active:disabled {
+	top: 0px;
+}/* This imageless css button was generated by CSSButtonGenerator.com */
+
+#capturebutton {
+	-moz-border-radius: 35px;
+	background-color: rgb(230, 50, 50);
+	font-weight: bold;
+	border-color: black;
+}
+
+#capturebutton {
+	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
+	background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
+	background-color:#fa665a;
+	-moz-border-radius: 35px;
+	-webkit-border-radius: 35px;
+	border-radius: 35px;
+	width: 70px;
+	height: 70px;
+	border:1px solid #d83526;
+	display:inline-block;
+	color:#ffffff;
+	padding: 0px 0px;
+	font-family:arial;
+	font-size:15px;
+	font-weight:bold;
+	text-decoration:none;
+	text-shadow:1px 1px 0px #98231a;
+}#capturebutton:hover {
+	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
+	background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
+	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
+	background-color:#d34639;
+}#capturebutton:active {
+	position:relative;
+	top:1px;
+}

index.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link href='http://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet' type='text/css'>
+    <title>Baroquesize Yourself</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+  </head>
+  <body>
+    <div id="header">Baroquesize Yourself</div><div id="steps">
+      <span id="s1" class="step"><span class="steplabel">Step 1:</span> Take Picture</span>
+      <span id="s2" class="step"><span class="steplabel">Step 2:</span> Chiaroscuro</span>
+      <span id="s3" class="step"><span class="steplabel">Step 3:</span> Sfumato</span>
+      <span id="s4" class="step"><span class="steplabel">Step 4:</span> Share</span>
+    </div><div id="center">
+      <video id="video"></video>
+      <canvas id="canvas"></canvas>
+      <div id="whiteflash"></div>
+      <div id="controls">
+        <span id="c1" class="control">
+          <button id="capturebutton"></button>
+        </span>
+        <span id="c2" class="control">
+          <input id="lighten" value="lighten" name="adjust-brightness" type="radio" checked="checked"><label for="lighten">Lighten</label>
+          <input id="darken" value="darken" name="adjust-brightness" type="radio"><label for="darken">Darken</label>
+          &nbsp;
+          &nbsp;
+          &nbsp;
+          &nbsp;
+          <button id="adjust-contrast">Add Baroqueness</button>
+          <button id="reset">Reset</button>
+        </span>
+        <span id="c4" class="control">
+          <!--
+          <label for="email">Email: </label><input id="email" type="email" /><button id="send">Send</button>
+          -->
+          <button id="download">Download</button>
+        </span>
+        <hr>
+        <div id="practical-instructions">
+        </div>
+        <hr>
+        <button id="start-over">Start Over</button>
+        <button id="next">Next</button>
+        <div id="clearfix">
+        </div>
+      </div>
+      </div><div id="instructions">
+      <div id="instr-title">Take Picture</div><br>
+      <span id="instr-text"></span>
+    </div>
+    <script src="jquery-1.9.1.min.js"></script>
+    <script src="pixastic.js"></script>
+    <script src="pixastic.effects.js"></script>
+    <script src="pixastic.worker.js"></script>
+    <script type="text/javascript" src="videostreamer.js"></script>
+    <script type="text/javascript" src="image_manipulator.js"></script>
+    <script type="text/javascript" src="index.js"></script>
+  </body>
+</html>