how many jakriborgs is that

From aaa9c0ab1e2906738293bc22f21dbd73c47cdf0c Mon Sep 17 00:00:00 2001 From: Brian Mount Date: Tue, 11 Dec 2012 03:39:12 -0800 Subject: [PATCH 1/6] default gh-pages view on how many jakriborgs is that --- antiplace.html | 480 ------------------------------------------------- index.html | 123 +++++++------ 2 files changed, 61 insertions(+), 542 deletions(-) delete mode 100644 antiplace.html diff --git a/antiplace.html b/antiplace.html deleted file mode 100644 index 9689da3..0000000 --- a/antiplace.html +++ /dev/null @@ -1,480 +0,0 @@ - - - - - - - - - - - - - - how many jakriborgs is that - - - - - - - - diff --git a/index.html b/index.html index 0a41710..9689da3 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,3 @@ - @@ -14,7 +13,7 @@ --> - sf building view + how many jakriborgs is that @@ -154,11 +159,11 @@ d3.select("body") .append("button") .attr("class", "go") - .html("b
u
i
l
d
i
n
g
s") + .html("a
d
d

J
a
k
r
i
b
o
r
g
s") .on("click", function (evt) { finder.map.remove() npos = d3.geo.mercator().scale(finder.ui.scale()).translate(finder.ui.translate()) - viewer = gimmeBuildings(npos.invert([650/2,550/2]), 18) + viewer = gimmeBuildings(npos.invert([650/2-256,550/2-256]), 18) d3.select(this).remove() setInstructions(); }) @@ -185,8 +190,8 @@ .center(home) .scale(Math.pow(2,(8+z))); -var width = window.innerWidth*2, - height = window.innerHeight*2 +var width = window.innerWidth*3, + height = window.innerHeight*3 if (width > height) width = height else height = width; @@ -267,9 +272,10 @@ // optionally, get per-tile bbox (argument is tms array [x,y,z]) // var bbox = tileUtil().unprojectedBounds -var meshes = []; // for later rotations etc +var meshes; // = []; // for later rotations etc function loadBuildings (jsonUrl, reproj) { + meshes = [] var distort; if (reproj) { var m = Math.cos(reproj[1]/180*Math.PI) / Math.cos(home[1]/180*Math.PI); @@ -288,14 +294,14 @@ e0.geometry.coordinates[0].forEach(function (e1, i1, c1) { var scrnCoord = proj(e1).map(distort) floorGeom.push( - v2d(scrnCoord[0], (-1)*scrnCoord[1]) + v2d(scrnCoord[0] + 256, (-1)*scrnCoord[1] - 256) ) }) var footprintshape2d = new THREE.Shape(floorGeom) var footprintExtrudable = new THREE.ExtrudeGeometry(footprintshape2d, { // height given + constant by inspection - amount: e0.properties? e0.properties.height*1.4: 12, height: 0, + amount: e0.properties? e0.properties.height*1.4: 14, height: 0, bevelEnabled: false, material: 0, extrudeMaterial: 1 }) @@ -304,6 +310,7 @@ var materialArray = [ frontMaterial, sideMaterial ]; footprintExtrudable.materials = materialArray; var bldg = new THREE.Mesh( footprintExtrudable, new THREE.MeshFaceMaterial() ); + bldg.matrixWorldNeedsUpdate = true; scene.add(bldg); meshes.push(bldg) }) @@ -353,6 +360,10 @@ } animate() +function moveCamera (d, u) { + camera.position[u] += d; +} + function moveFloor (d, u) { tileTextures.forEach(function (t) { t.position[u] += d; @@ -365,6 +376,19 @@ }) } +var modal = moveCamera + +function rotateBuildingCollection (collection, angle, orig) { + collection.forEach(function (bldg, i, c) { + bldg.geometry.vertices.forEach(function (v) { + var r = Math.sqrt(Math.pow((v.x - orig.x), 2) + Math.pow((v.y - orig.y), 2)) + //console.log(r, v.x, r*Math.cos(angle)) + // = r * Math.cos(angle) + // = r * Math.sin(angle) + }) + }) +} + // console.log type position debug var dsumx = 0, dsumy=0; @@ -372,27 +396,23 @@ var delta = 16; event = event || window.event; if (event.ctrlKey || event.altKey || event.metaKey) return; - var keycode = event.keyCode; + var keycode = event.keyCode + if (viewer.mode) modal = viewer.mode; switch(keycode){ case 37 : //left arrow event.preventDefault(); - camera.position.x -= delta; - //zoom.translate( proj( [dsumx, dsumy] )); + modal(-delta, "x") break; case 38 : // up arrow event.preventDefault(); - camera.position.y += delta; - //zoom.translate( proj( [dsumx, dsumy] )); + modal(delta, "y") break; case 39 : // right arrow - //event.preventDefault(); - camera.position.x += delta; - //zoom.translate( proj( [dsumx, dsumy] )); + modal(delta, "x") break; case 40 : //down arrow event.preventDefault(); - camera.position.y -= delta; - //zoom.translate( proj( [dsumx, dsumy] )); + modal(-delta, "y") break; case 72: // event.preventDefault(); @@ -446,6 +466,13 @@ moveBldgs(-delta, "y") dsumy-=delta; break; + /* TODO + case 82 : // ' + event.preventDefault(); + rotateBuildingCollection(meshes, Math.PI/20, meshes[0].geometry.vertices[0]) + dsumy-=delta; + break; + */ } camera.updateProjectionMatrix(); cancelAnimationFrame(animationId); @@ -454,7 +481,11 @@ } document.addEventListener('keydown',keydown,false); -return {proj:proj, more: loadBuildings} +return {proj:proj, more: loadBuildings, + mode:modal, + meshes: meshes, + move: {bldgs: moveBldgs, + tiles: moveFloor, camera: moveCamera} } } var uiFrag = "use arrows,
" + @@ -462,16 +493,44 @@ "l - lower
" + "x-d ↺ x
" + "z-s ↺ z
" + - "y-7 ↺ y

" + "y-7 ↺ y
"; + +function uiAdjuster (size) { + d3.select("div").attr("class", "adjuster") + .append("svg").data([[0,1],[0,-1],[-1,0],[1,0]]) + .enter().append("g") +} function setInstructions () { d3.select("#attrib").remove(); var tips = d3.select("body").append("div") .attr("class", "uifrag").html(uiFrag) .style("left", function () { return (window.innerWidth - 150) + "px" }) - tips.append("button").text("save").on("click", function () { + var editmessage = tips.append("p").attr("id", "editmessage") + tips.append("button").text("save an exportable image").on("click", function () { window.location = d3.select("canvas").node().toDataURL() }) + tips.append("button").text("move buildings").on("click", function () { + viewer.mode = viewer.move.bldgs; + editmessage.text("use the arrows to move the buildings") + }) + tips.append("button").text("move camera").on("click", function () { + viewer.mode = viewer.move.camera; + editmessage.text("use the arrows to change camera perspective") + }) + tips.append("button").text("move map imagery").on("click", function () { + viewer.mode = viewer.move.tiles; + editmessage.text("use the arrows to move the map imagery") + }) + tips.append("button").text("more Jakriborgs!").on("click", function () { + viewer.more("places/jakriborg/metakaolinized.json", [13.134547, 55.674644]) + viewer.mode = viewer.move.camera; + editmessage.text("use the arrows to move the map imagery") + }) + //d3.xml('style/compass.svg', "image/svg+xml", function (err, svg) { + // if (err) return; + // tips.node().appendChild(svg.documentElement); + //}) //tips.append("button").text("more jakriborgs").on("click", function () { // viewer.more("places/jakriborg/metakaolinized.json", [13.134547, 55.674644]) //}) diff --git a/style/po_style.css b/style/po_style.css new file mode 100644 index 0000000..024f5a3 --- /dev/null +++ b/style/po_style.css @@ -0,0 +1,39 @@ +.compass .back { + fill: #eee; + fill-opacity: .8; +} + +.compass .fore { + stroke: #999; + stroke-width: 1.5px; +} + +.compass rect.back.fore { + fill: #999; + fill-opacity: .3; + stroke: #eee; + stroke-width: 1px; + shape-rendering: crispEdges; +} + +.compass .direction { + fill: none; +} + +.compass .chevron { + fill: none; + stroke: #999; + stroke-width: 5px; +} + +.compass .zoom .chevron { + stroke-width: 4px; +} + +.compass .active .chevron, .compass .chevron.active { + stroke: #fff; +} + +.compass.active .active .direction { + fill: #999; +} From 41640aba1ce0cba4c72926fe9f72c4b24aa91e24 Mon Sep 17 00:00:00 2001 From: Brian Mount Date: Tue, 11 Dec 2012 18:51:54 -0800 Subject: [PATCH 4/6] terrain --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 7529202..e6f0f7e 100644 --- a/index.html +++ b/index.html @@ -176,7 +176,7 @@ , z = z || 16 //var home = [-122.410312, 37.761012] //var TILE_URL = "http://tile.stamen.com/toner-labels/" -var TILE_URL = tileUrl || "http://tile.stamen.com/toner/" +var TILE_URL = tileUrl || "http://tile.stamen.com/terrain/" var SAT_URL = "http://otile{H}.mqcdn.com/tiles/1.0.0/sat/" //var TILE_URL = "http://tile.stamen.com/watercolor/" var BLDG_URL = "../../_design/bldgs/_view/bldgs?bbox={B}" From bd122cc5237cc4afe67a3c6d406e4204f759d992 Mon Sep 17 00:00:00 2001 From: Brian Mount Date: Tue, 11 Dec 2012 19:03:10 -0800 Subject: [PATCH 5/6] attrib, tileset --- index.html | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e6f0f7e..9bdaf33 100644 --- a/index.html +++ b/index.html @@ -133,7 +133,9 @@ image.enter().append("img") .attr("class", "findertile") .attr("src", function(d) { - return "http://tile.stamen.com/toner/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) + return ("http://otile{S}.mqcdn.com/tiles/1.0.0/osm/"+d[2]+"/"+d[0]+"/"+d[1]+".jpg").replace(/{S}/, + Math.ceil(Math.random()*3))}) + //return "http://tile.stamen.com/terrain/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) .style("left", function(d) { return (d[0] << 8) + "px"; }) .style("top", function(d) { return (d[1] << 8) + "px"; }); } @@ -538,4 +540,8 @@ - +

+ Map tiles by Mapquest, + Data by OpenStreetMap, + [source] +

From 442bf803097d0bfb86c6b9adee10abd80230ba60 Mon Sep 17 00:00:00 2001 From: Brian Mount Date: Wed, 12 Dec 2012 18:06:23 -0800 Subject: [PATCH 6/6] mode thing --- index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 9bdaf33..21222bd 100644 --- a/index.html +++ b/index.html @@ -378,7 +378,7 @@ }) } -var modal = moveCamera +var mode = moveCamera function rotateBuildingCollection (collection, angle, orig) { collection.forEach(function (bldg, i, c) { @@ -399,22 +399,22 @@ event = event || window.event; if (event.ctrlKey || event.altKey || event.metaKey) return; var keycode = event.keyCode - if (viewer.mode) modal = viewer.mode; + if (viewer.mode) mode = viewer.mode; switch(keycode){ case 37 : //left arrow event.preventDefault(); - modal(-delta, "x") + mode(-delta, "x") break; case 38 : // up arrow event.preventDefault(); - modal(delta, "y") + mode(delta, "y") break; case 39 : // right arrow - modal(delta, "x") + mode(delta, "x") break; case 40 : //down arrow event.preventDefault(); - modal(-delta, "y") + mode(-delta, "y") break; case 72: // event.preventDefault(); @@ -484,7 +484,7 @@ document.addEventListener('keydown',keydown,false); return {proj:proj, more: loadBuildings, - mode:modal, + mode:mode, meshes: meshes, move: {bldgs: moveBldgs, tiles: moveFloor, camera: moveCamera} }