Skip to content

Commit 362b293

Browse files
benhansen-iobenhansen-io
committed
Initial commit
0 parents  commit 362b293

14 files changed

+2894
-0
lines changed

‎README.md

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
Baroquesize Yourself
2+
====================
3+
4+
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.
5+
6+
The app can be viewed at [http://benjamin-hansen.com/baroque]().
7+
8+
Currently this app only runs properly on Chrome version 25 or later. Access to the web cam is through WebRTC.
9+
10+
Credits
11+
-------
12+
13+
* [Pixastic](http://www.pixastic.com/) - Used for all image processing primitives.
14+
* [SubtlePatterns](http://subtlepatterns.com/txture/) - Background wallpaper. Author: [Anatoli Nicolae](http://designchomp.com/).
15+
16+
License
17+
-------
18+
19+
Baroquesize Yourself
20+
Copyright (C) 2013 Benjamin Hansen
21+
22+
This program is free software: you can redistribute it and/or modify
23+
it under the terms of the GNU General Public License as published by
24+
the Free Software Foundation, either version 3 of the License, or
25+
(at your option) any later version.
26+
27+
This program is distributed in the hope that it will be useful,
28+
but WITHOUT ANY WARRANTY; without even the implied warranty of
29+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
30+
GNU General Public License for more details.
31+
32+
You should have received a copy of the GNU General Public License
33+
along with this program. If not, see <http://www.gnu.org/licenses/>.

‎image_manipulator.js

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
(function() {
2+
3+
IM = {}
4+
5+
window.processingGradientEffect = false;
6+
7+
IM.gradientRadiusEffect = function(ctx, effect, x, y, radius, totalIncrements, doIncrements, incrementAdjust) {
8+
if(doIncrements === undefined) {
9+
doIncrements = .4 * totalIncrements;
10+
}
11+
if(incrementAdjust === undefined) {
12+
incrementAdjust = 1;
13+
}
14+
if(processingGradientEffect == true) {
15+
console.log("double click, quiting");
16+
return;
17+
}
18+
var effectSmallerCircle = function (i) {
19+
if(i >= doIncrements) {
20+
processingGradientEffect = false;
21+
return;
22+
}
23+
ctx.save()
24+
ctx.beginPath();
25+
ctx.arc(x, y, (totalIncrements - i) / totalIncrements * radius, 2 * Math.PI, false)
26+
ctx.clip();
27+
effect(ctx, function () { ctx.restore(); effectSmallerCircle(i+incrementAdjust);});
28+
}
29+
30+
processingGradientEffect = true;
31+
effectSmallerCircle(0);
32+
}
33+
34+
// amount (-1, 1)
35+
IM.adjustBrightness = function (ctx, amount, callback) {
36+
var P = Pixastic(ctx);
37+
brightness = amount;
38+
contrast = 0;
39+
P["brightness"]({brightness: brightness, contrast: contrast}).done(function() {
40+
console.log("Done Adjusting Brightness");
41+
callback();
42+
}, function(p) {
43+
//progress.style.height = (p * 100) + "%";
44+
});
45+
46+
}
47+
48+
49+
IM.adjustContrast = function (ctx, amount) {
50+
if(processingGradientEffect) {
51+
return;
52+
}
53+
var P = Pixastic(ctx);
54+
brightness = -.5 * amount;
55+
contrast = .6 * amount;
56+
P["brightness"]({brightness: brightness, contrast: contrast}).done(function() {
57+
console.log("Done Adjusting Brightness");
58+
}, function(p) {
59+
//progress.style.height = (p * 100) + "%";
60+
});
61+
}
62+
63+
64+
IM.blur = function (ctx, kernelSize, callback) {
65+
var P = Pixastic(ctx);
66+
P["blur"]({kernelSize: kernelSize}).done(function() {
67+
console.log("Done adding blur");
68+
if(callback !== undefined) {
69+
callback();
70+
} else {
71+
console.log("null callback");
72+
}
73+
}, function(p) {
74+
//progress.style.height = (p * 100) + "%";
75+
});
76+
}
77+
78+
window.IM = IM
79+
80+
})();

‎index.css

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
body {
2+
width: 1040px;
3+
margin-left: auto;
4+
margin-right: auto;
5+
font-family: 'Asul', sans-serif;
6+
background-image: url("txture.png");
7+
background-color: #1a1918;
8+
}
9+
10+
hr {
11+
color: rgb(114, 64, 0);
12+
background-color: rgb(114, 64, 0);
13+
border: 0;
14+
height: 2px;
15+
}
16+
17+
#header {
18+
text-align: center;
19+
font-size: 30pt;
20+
font-weight: 700;
21+
color: rgb(224, 174, 69);
22+
padding: 20px;
23+
}
24+
25+
26+
#steps {
27+
display: inline-block;
28+
width: 280px;
29+
vertical-align: top;
30+
padding: 8px;
31+
margin-right: 15px;
32+
}
33+
34+
.step {
35+
display: block;
36+
clear: both;
37+
}
38+
39+
.step.current {
40+
font-weight: bold;
41+
}
42+
43+
#practical-instructions {
44+
text-align: justify;
45+
}
46+
47+
#center {
48+
display: inline-block;
49+
width: 410px;
50+
}
51+
52+
#video, #canvas, #steps, #instructions, #controls {
53+
border-style: solid;
54+
border-width: 2px;
55+
/*border-color: rgb(154, 104, 9);*/
56+
border-color: rgb(114, 64, 0);
57+
background-color: rgb(254, 204, 99);
58+
}
59+
60+
#video, #canvas {
61+
width: 400px;
62+
height: 300px;
63+
-webkit-touch-callout: none;
64+
-webkit-user-select: none;
65+
-khtml-user-select: none;
66+
-moz-user-select: none;
67+
-ms-user-select: none;
68+
user-select: none;
69+
}
70+
71+
#canvas {
72+
display: none;
73+
}
74+
75+
#controls {
76+
width: 390px;
77+
margin-top: 8px;
78+
padding: 5px;
79+
text-align: center;
80+
clear: both;
81+
}
82+
83+
#next {
84+
float: right;
85+
}
86+
87+
#instructions {
88+
display: inline-block;
89+
width: 280px;
90+
padding: 8px;
91+
vertical-align: top;
92+
margin-left: 15px;
93+
text-align: justify;
94+
}
95+
96+
#instr-title {
97+
text-align: center;
98+
font-size: 16pt;
99+
}
100+
101+
#c2, #c3, #c4 {
102+
display: none;
103+
}
104+
105+
#start-over {
106+
float: left;
107+
}
108+
109+
#reset {
110+
display: none;
111+
}
112+
113+
#clearfix {
114+
clear: both;
115+
}
116+
117+
button {
118+
cursor: pointer;
119+
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
120+
background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
121+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
122+
background-color:#ededed;
123+
-moz-border-radius:12px;
124+
-webkit-border-radius:12px;
125+
border-radius:12px;
126+
border:1px solid #dcdcdc;
127+
display:inline-block;
128+
color:#777777;
129+
font-family:arial;
130+
font-size:15px;
131+
font-weight:bold;
132+
padding:5px 13px;
133+
text-decoration:none;
134+
text-shadow:1px 1px 0px #ffffff;
135+
}button:hover {
136+
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
137+
background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
138+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
139+
background-color:#dfdfdf;
140+
}button:active {
141+
position:relative;
142+
top:1px;
143+
}button:disabled {
144+
background: #dfdfdf;
145+
cursor: default;
146+
}button:hover:disabled {
147+
filter:none;
148+
}button:active:disabled {
149+
top: 0px;
150+
}/* This imageless css button was generated by CSSButtonGenerator.com */
151+
152+
#capturebutton {
153+
-moz-border-radius: 35px;
154+
background-color: rgb(230, 50, 50);
155+
font-weight: bold;
156+
border-color: black;
157+
}
158+
159+
#capturebutton {
160+
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fa665a), color-stop(1, #d34639) );
161+
background:-moz-linear-gradient( center top, #fa665a 5%, #d34639 100% );
162+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fa665a', endColorstr='#d34639');
163+
background-color:#fa665a;
164+
-moz-border-radius: 35px;
165+
-webkit-border-radius: 35px;
166+
border-radius: 35px;
167+
width: 70px;
168+
height: 70px;
169+
border:1px solid #d83526;
170+
display:inline-block;
171+
color:#ffffff;
172+
padding: 0px 0px;
173+
font-family:arial;
174+
font-size:15px;
175+
font-weight:bold;
176+
text-decoration:none;
177+
text-shadow:1px 1px 0px #98231a;
178+
}#capturebutton:hover {
179+
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d34639), color-stop(1, #fa665a) );
180+
background:-moz-linear-gradient( center top, #d34639 5%, #fa665a 100% );
181+
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d34639', endColorstr='#fa665a');
182+
background-color:#d34639;
183+
}#capturebutton:active {
184+
position:relative;
185+
top:1px;
186+
}

‎index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link href='http://fonts.googleapis.com/css?family=Asul:400,700' rel='stylesheet' type='text/css'>
5+
<title>Baroquesize Yourself</title>
6+
<link rel="stylesheet" type="text/css" href="index.css">
7+
</head>
8+
<body>
9+
<div id="header">Baroquesize Yourself</div><div id="steps">
10+
<span id="s1" class="step"><span class="steplabel">Step 1:</span> Take Picture</span>
11+
<span id="s2" class="step"><span class="steplabel">Step 2:</span> Chiaroscuro</span>
12+
<span id="s3" class="step"><span class="steplabel">Step 3:</span> Sfumato</span>
13+
<span id="s4" class="step"><span class="steplabel">Step 4:</span> Share</span>
14+
</div><div id="center">
15+
<video id="video"></video>
16+
<canvas id="canvas"></canvas>
17+
<div id="whiteflash"></div>
18+
<div id="controls">
19+
<span id="c1" class="control">
20+
<button id="capturebutton"></button>
21+
</span>
22+
<span id="c2" class="control">
23+
<input id="lighten" value="lighten" name="adjust-brightness" type="radio" checked="checked"><label for="lighten">Lighten</label>
24+
<input id="darken" value="darken" name="adjust-brightness" type="radio"><label for="darken">Darken</label>
25+
&nbsp;
26+
&nbsp;
27+
&nbsp;
28+
&nbsp;
29+
<button id="adjust-contrast">Add Baroqueness</button>
30+
<button id="reset">Reset</button>
31+
</span>
32+
<span id="c4" class="control">
33+
<!--
34+
<label for="email">Email: </label><input id="email" type="email" /><button id="send">Send</button>
35+
-->
36+
<button id="download">Download</button>
37+
</span>
38+
<hr>
39+
<div id="practical-instructions">
40+
</div>
41+
<hr>
42+
<button id="start-over">Start Over</button>
43+
<button id="next">Next</button>
44+
<div id="clearfix">
45+
</div>
46+
</div>
47+
</div><div id="instructions">
48+
<div id="instr-title">Take Picture</div><br>
49+
<span id="instr-text"></span>
50+
</div>
51+
<script src="jquery-1.9.1.min.js"></script>
52+
<script src="pixastic.js"></script>
53+
<script src="pixastic.effects.js"></script>
54+
<script src="pixastic.worker.js"></script>
55+
<script type="text/javascript" src="videostreamer.js"></script>
56+
<script type="text/javascript" src="image_manipulator.js"></script>
57+
<script type="text/javascript" src="index.js"></script>
58+
</body>
59+
</html>

0 commit comments

Comments
 (0)