Commit 02eff747 authored by Michael Murtaugh's avatar Michael Murtaugh

rewrite image loops, coordination between camera, search and collage

parent 20b7610f
......@@ -9,5 +9,5 @@
<script src="lib/collagecode.js"></script>
<script src="camera.js"></script>
</head>
<body></body>
<body id="camera"></body>
</html>
This diff is collapsed.
......@@ -32,27 +32,53 @@ document.addEventListener("DOMContentLoaded", function () {
console.log("bcast", data);
// if (data.msg == "face" || data.msg == "eye") {
// ctx.clearRect(0, 0, canvas.width, canvas.height);
if (data.msg == "eye") {
var img = new Image();
img.src = data.src;
img.addEventListener("load", function () {
ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
eyepos,
10,
data.rect.width,
data.rect.height);
// if (data.msg == "eye") {
// var img = new Image();
// img.src = data.src;
// img.addEventListener("load", function () {
// ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
// eyepos,
// 10,
// data.rect.width,
// data.rect.height);
// })
// eyepos += data.rect.width + 5;
// } else if (data.msg == "face") {
// var img = new Image();
// img.src = data.src;
// img.addEventListener("load", function () {
// ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
// data.rect.x,
// data.rect.y + 200,
// data.rect.width,
// data.rect.height);
// })
// }
if (data.msg == "collage") {
var img1 = new Image(),
img2 = new Image(),
img1_loaded = false,
img2_loaded = false;
function ddraw () {
console.log("ddraw")
if (img1_loaded && img2_loaded) {
ctx.drawImage(img1, 0, 0);
ctx.drawImage(img2, data.rect2.x, data.rect2.y, data.rect2.width, data.rect2.height,
data.rect1.x, data.rect1.y, data.rect1.width, data.rect1.height);
}
}
img1.addEventListener("load", function () {
img1_loaded = true;
ddraw();
})
img2.addEventListener("load", function () {
img2_loaded = true;
ddraw();
})
eyepos += data.rect.width + 5;
} else if (data.msg == "face") {
var img = new Image();
img.src = data.src;
img.addEventListener("load", function () {
ctx.drawImage(img, data.rect.x, data.rect.y, data.rect.width, data.rect.height,
data.rect.x,
data.rect.y + 200,
data.rect.width,
data.rect.height);
})
img1.src = data.src1;
img2.src = data.src2;
}
});
})
......@@ -347,6 +347,20 @@
function cc_identity() {
return cc_transform(1, 0, 0, 1, 0, 0);
}
function cc_frame_rect(frame, r, center) {
var w = frame.width, h = w * (r.height / r.width);
if (h >= frame.height) {
h = frame.height;
w = h * (r.width / r.height);
}
var x = 0, y = 0;
if (center) {
x = (frame.width - w) / 2;
y = (frame.height - h) / 2;
}
return cc_rect(x, y, w, h);
}
cc.frame_rect = cc_frame_rect;
cc.memoize = cc_memoize;
function cc_memoize(fn, keyfn) {
var results = {};
......
......@@ -2,57 +2,150 @@ document.addEventListener("DOMContentLoaded", function () {
var FONT = "Logisoso",
STATIC_BASE = "";
window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
var stripurlpat = new RegExp("^https?://.+?/(.*)$");
function urltopath (url) {
var m = stripurlpat.exec(url);
if (m !== null) { return m[1]; }
return url;
}
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
window.addEventListener("resize", function () {
function resize () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
})
}
window.addEventListener("resize", resize);
var sockaddr = window.location.protocol+'//'+window.location.host,
socket;
var src1, rect1;
console.log("opening connection to", sockaddr);
socket = io.connect();
socket.on("connect", function (data) {
// console.log("connect");
});
socket.on("record_image", function (data) {
// console.log("record_images", data);
loop.add_image(STATIC_BASE + data.image);
})
socket.on("record_end", function (data) {
// loop.run();
});
socket.on("facedetect", function (data) {
// console.log("facedetect", data);
faces.push(data[0]);
var i = loop.next(); // now showing the analyzed frame
if (i == 29) {
console.log("end of analysis, faces:", faces.length);
state = STATE_SHOW_ANALYSIS;
loop.run();
} else {
window.setTimeout(analyzeframe, 0);
socket.on("bcast", function (data) {
if (data.msg == "face") {
src1 = data.src;
rect1 = data.rect;
seeking = true;
next();
}
})
var seeking = false,
index = -1,
images,
numimages,
f,
curimage;
d3.json("archive.json", function (data) {
console.log("archive.json", data);
// wait for start signal...
function next() {
index += 1;
if (index >= images.length) { index = 0 };
curimage = new Image();
curimage.addEventListener("load", function () {
// ctx.drawImage(img, 0, 0);
// console.log("request", index);
window.requestAnimationFrame(draw);
//if (index+1 < numimages) {
// } else {
//}
});
curimage.src = images[index].path;
}
d3.json("archive3.json", function (data) {
console.log("archive data", data, data.length);
// wait for start signal...
images = data;
numimages = data.length;
// next();
// then loop through all the images showing them one by one...
var img = new Image();
img.addEventListener("load", function () {
ctx.drawImage(img, 0, 0);
})
img.src = data[0].path;
})
});
function fillTextC(ctx, msg) {
var text = ctx.measureText(msg),
size = parseInt(ctx.font);
ctx.fillText(msg, (ctx.canvas.width-text.width)/2, (ctx.canvas.height-size)/2);
}
var image2screen;
// function drawImageProp (ctx, img) {
// var iw = ctx.canvas.width,
// ih = iw * (ctx.canvas.height / ctx.canvas.width);
// ctx.drawImage(img, 0, 0, img.width, img.height,
// 0, 0, iw, ih);
// }
function draw () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
console.log("curimage", curimage, index);
var f = images[index]; // f is imagedata
if (curimage) {
var im_rect = cc.rect(0, 0, curimage.width, curimage.height),
r = cc.frame_rect(
cc.rect(0, 0, canvas.width, canvas.height),
im_rect, true
),
image2screen = cc.transform_from(im_rect, r);
ctx.drawImage(curimage, 0, 0, curimage.width, curimage.height,
r.x, r.y, r.width, r.height);
if (f && f.faces) {
ctx.strokeStyle = "blue";
ctx.lineWidth = 3;
f.faces.forEach(function (x) {
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect);
// face = ctx.getImageData(sr.x, sr.y, sr.width, sr.height);
// socket.emit("bcast", { msg: "face", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
if (seeking) {
console.log("found face");
seeking = false;
socket.emit("bcast", {
msg: "collage",
src1: src1,
rect1: rect1,
src2: urltopath(curimage.src),
rect2: im_rect
});
}
});
ctx.strokeStyle = "green";
f.eyes.forEach(function (x) {
var im_rect = cc.rect(x[0], x[1], x[2], x[3]),
sr = image2screen(im_rect);
// socket.emit("bcast", { msg: "eye", src: urltopath(loop.current_image().src), rect: im_rect });
ctx.strokeRect(sr.x, sr.y, sr.width, sr.height);
})
}
}
ctx.font = "100px Logisoso";
ctx.fillStyle = "#FF0"
ctx.textBaseline = "hanging";
ctx.fillText(""+index, 0, 0);
if (seeking) {
window.setTimeout(next, 1000);
}
}
})
......@@ -6,8 +6,13 @@
body {
font-family: "Logisoso", serif;
background: black;
color: white;
font-size: 36px;
}
body#camera {
background: red;
}
body#collage {
background: gray;
}
......
......@@ -9,5 +9,9 @@
<script src="lib/collagecode.js"></script>
<script src="text.js"></script>
</head>
<body></body>
<body>
<p>Hello world</p>
</body>
</html>
text/helloworld.png

5.9 KB | W: | H:

text/helloworld.png

1.66 KB | W: | H:

text/helloworld.png
text/helloworld.png
text/helloworld.png
text/helloworld.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -7,8 +7,8 @@ all: $(png_from_md)
# Implicit rule to know how to make .html from .md
%.png: %.md
convert -background lightblue -fill blue -font Corsiva -pointsize 36 \
-size 320x caption:@$< \
convert -background black -fill white -font ../fonts/Logisoso.ttf -pointsize 36 \
-size 640x480 -gravity Center caption:@$< \
$@
# special rule for debugging variables
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment