Skip to content
Snippets Groups Projects
Commit 934a3553 authored by Christopher Pietsch's avatar Christopher Pietsch
Browse files

various optimizations

parent 1a077109
Branches layer
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
css/style.css
+ 6
− 0
View file @ 934a3553
......@@ -28,6 +28,11 @@
/* todo: propper rewrite of the structure; */
html {
scroll-behavior: smooth;
}
body {
/* position: relative; */
-webkit-font-smoothing: antialiased;
......@@ -51,6 +56,7 @@ body {
canvas {
position: absolute;
/* cursor: none !important; */
/* cursor: pointer; */
}
......
index.html
+ 7
− 7
View file @ 934a3553
......@@ -21,7 +21,7 @@
<script src="js/vue.min.js"></script>
<script src="js/marked.min.js"></script>
<script src="js/lodash.min.js"></script>
<script src="js/pixi.min.js"></script>
<script src="js/pixi.min.5.js"></script>
<script src="js/pixi-packer-parser.js"></script>
<script src="js/loader.js"></script>
<script src="js/canvas.js"></script>
......@@ -77,13 +77,13 @@ cpietsch@gmail.com
<body>
<div id="hiddenreload"></div>
<div class="browserInfo">
<!-- <div class="browserInfo">
<p>This visualization is not optimized for mobile phones and needs WebGL enabled.</p>
<p>Please come back on a Computer.</p>
<span>💡</span>
</div>
</div> -->
<div class="search"></div>
<!-- <div class="search"></div> -->
<div class="page">
......@@ -131,12 +131,12 @@ cpietsch@gmail.com
</div>
</div>
<div class="navi hide">
<div class="navi" style="display: none">
<div class="time button active" data="time">time</div>
<div class="tsne button" data="tsne">similarity</div>
</div>
<div class="infobar sneak">
<div class="infobar sneak hide">
<div class="infobutton">
<svg width="16px" height="24px" viewBox="0 0 16 24">
<path d="M13.6824546,2 L3.7109392,11.9715154 L13.7394238,22" stroke="#FFF" stroke-width="5"></path>
......@@ -154,7 +154,7 @@ cpietsch@gmail.com
</div>
</div>
</div>
<div class="searchbar">
<div class="searchbar hide">
<input type="input" name="suche">
<div class="button">
<div class="openbutton"></div>
......
js/canvas.js
+ 135
− 81
View file @ 934a3553
......@@ -104,6 +104,11 @@ function Canvas() {
var tsne = []
var tsneIndex = {}
var scaleTo, scaleNow = 1;
var translateTo, translateNow =[0,0]
var scaleFactor = 0.9
function canvas() {}
......@@ -190,7 +195,7 @@ function Canvas() {
width: width + margin.left + margin.right,
height: height
};
renderer = new PIXI.WebGLRenderer(renderOptions);
renderer = new PIXI.Renderer(renderOptions);
renderer.backgroundColor = parseInt(config.style.canvasBackground.substring(1), 16)
window.renderer = renderer;
......@@ -256,10 +261,10 @@ function Canvas() {
vizContainer = d3.select(".viz")
.call(zoom)
.on("mousemove", mousemove)
// .on("mousemove", mousemove)
.on("dblclick.zoom", null)
.on("touchstart", function (d) {
mousemove(d);
// mousemove(d);
touchstart = new Date() * 1;
})
.on("touchend", function (d) {
......@@ -344,7 +349,9 @@ function Canvas() {
var mouse = d3.mouse(vizContainer.node());
var p = toScreenPoint(mouse);
var distance = 200
if(zoomI % 10 !== 0) return
var distance = 10
var best = nearest(p[0] - imgPadding, p[1] - imgPadding, {
d: distance,
......@@ -447,7 +454,7 @@ function Canvas() {
sleep = false;
}
d.sprite.visible = d.visible && d.sprite.alpha > 0.1;
d.sprite.visible = d.visible && d.sprite.alpha > 0.01;
// d.sprite.visible = d.visible;
......@@ -459,10 +466,31 @@ function Canvas() {
sleep = false;
}
d.sprite2.visible = d.sprite2.alpha > 0.1;
d.sprite2.visible = d.sprite2.alpha > 0.01;
//else d.sprite2.visible = d.visible;
}
});
diff = (-stage2.scale.x + scaleTo)*0.1;
if(Math.abs(diff) > 0.0001){
stage2.scale.x += diff
stage2.scale.y += diff
sleep = false
}
diff = (translateTo[0] - stage2.x) * 0.1;
if(Math.abs(diff) > 0.0001){
stage2.x += diff
sleep = false
}
diff = (translateTo[1] - stage2.y) * 0.1;
if(Math.abs(diff) > 0.0001){
stage2.y += diff
sleep = false
}
scaleNow = stage2.scale.x
translateNow = [stage2.x, stage2.y]
return sleep
}
......@@ -481,6 +509,7 @@ function Canvas() {
loadImages();
if (sleep) return
sleep = imageAnimation();
if(zoomI++ % 10 === 0) filterVisible();
renderer.render(stage);
}
......@@ -498,6 +527,7 @@ function Canvas() {
}
function zoomToImage(d, duration) {
return
state.zoomingToImage = true;
zoom.center(null);
loadMiddleImage(d);
......@@ -578,11 +608,12 @@ function Canvas() {
function showAllImages() {
data.forEach(function (d) {
d.alpha = d.active ? 1 : 0.2;;
d.alpha = d.active ? 1 : 0;
d.alpha2 = d.visible ? 1 : 0;
})
}
var zoomI = 0;
function zoomed() {
translate = d3.event.translate;
scale = d3.event.scale;
......@@ -592,38 +623,38 @@ function Canvas() {
var x1 = -1 * translate[0] / scale;
var x2 = (x1 + (widthOuter / scale));
if (d3.event.sourceEvent != null) {
if (x1 < 0) {
translate[0] = 0;
} else if (x2 > widthOuter) {
translate[0] = ((widthOuter * scale) - widthOuter) * -1;
}
// if (d3.event.sourceEvent != null) {
// if (x1 < 0) {
// translate[0] = 0;
// } else if (x2 > widthOuter) {
// translate[0] = ((widthOuter * scale) - widthOuter) * -1;
// }
zoom.translate([translate[0], translate[1]]);
// zoom.translate([translate[0], translate[1]]);
x1 = -1 * translate[0] / scale;
x2 = (x1 + (width / scale))
}
// x1 = -1 * translate[0] / scale;
// x2 = (x1 + (width / scale))
// }
if (zoomedToImageScale != 0 && scale > zoomedToImageScale*0.9 && !zoomedToImage && selectedImage && selectedImage.type == "image") {
// if (zoomedToImageScale != 0 && scale > zoomedToImageScale*0.9 && !zoomedToImage && selectedImage && selectedImage.type == "image") {
zoomedToImage = true;
zoom.center(null);
zoomedToImageScale = scale;
hideTheRest(selectedImage);
showDetail(selectedImage)
}
// zoomedToImage = true;
// zoom.center(null);
// zoomedToImageScale = scale;
// hideTheRest(selectedImage);
// showDetail(selectedImage)
// }
if (zoomedToImage && zoomedToImageScale *0.8 > scale) {
// console.log("clear")
zoomedToImage = false;
state.lastZoomed = 0;
showAllImages();
clearBigImages();
detailContainer.classed("hide", true)
}
// if (zoomedToImage && zoomedToImageScale *0.85 > scale) {
// // console.log("clear")
// zoomedToImage = false;
// state.lastZoomed = 0;
// // showAllImages();
// clearBigImages();
// detailContainer.classed("hide", true)
// }
timeline.update(x1, x2, scale, translate, scale1);
// timeline.update(x1, x2, scale, translate, scale1);
// toggle zoom overlays
if (scale > zoomBarrier) {
......@@ -631,17 +662,24 @@ function Canvas() {
d3.select(".searchbar").classed("hide", true);
d3.select(".infobar").classed("sneak", true);
} else {
d3.select(".tagcloud").classed("hide", false);
d3.select(".tagcloud").classed("hide", true);
d3.select(".searchbar").classed("hide", true);
d3.select(".infobar").classed("sneak", true);
// d3.select(".tagcloud").classed("hide", false);
d3.select(".searchbar").classed("hide", false);
}
stage2.scale.x = d3.event.scale;
stage2.scale.y = d3.event.scale;
stage2.x = d3.event.translate[0];
stage2.y = d3.event.translate[1];
scaleTo = d3.event.scale;
translateTo = [ d3.event.translate[0] , d3.event.translate[1]]
// stage2.scale.x = d3.event.scale;
// stage2.scale.y = d3.event.scale;
// stage2.x = d3.event.translate[0];
// stage2.y = d3.event.translate[1];
sleep = false
}
function zoomstart(d) {
......@@ -755,6 +793,7 @@ function Canvas() {
}
canvas.resetZoom = function () {
var duration = 1400;
extent = d3.extent(data, function (d) {
......@@ -762,12 +801,13 @@ function Canvas() {
});
var y = -extent[1]*2 -height -extent[0]/4;
// y = (extent[1] / -1.5) - bottomPadding
y = (extent[1] / -1.5) - bottomPadding
vizContainer
.call(zoom.translate(translate).event)
.transition().duration(duration)
.call(zoom.translate([-width/2, y]).scale(2).event)
// .transition().duration(duration)
.call(zoom.translate([0, y]).scale(1).event)
// .call(zoom.translate([-width/2, y]).scale(2).event)
}
canvas.split = function () {
......@@ -783,14 +823,17 @@ function Canvas() {
}
function filterVisible() {
var zoomScale = scale;
if (zoomedToImage) return;
var zoomScale = scaleNow;
console.log(scaleNow)
// var translate = translateNow
// if (zoomedToImage) return;
data.forEach(function (d, i) {
var p = d.sprite.position;
var x = (p.x / scale1) + translate[0] / zoomScale;
var y = ((p.y / scale1) + (translate[1]) / zoomScale);
var padding = (width/3) / scale;
var x = (p.x / scale1) + translateNow[0] / zoomScale;
var y = ((p.y / scale1) + (translateNow[1]) / zoomScale);
var padding = (width/8) / scale;
// padding = 0
if (x > (-padding) && x < ((width / zoomScale) + padding) && y + height < (height / zoomScale + padding) && y > (height * -1) - padding) {
d.visible = true;
......@@ -805,36 +848,38 @@ function Canvas() {
console.log(visible.length)
if (visible.length < 200) {
if (visible.length < 300) {
data.forEach(function (d) {
if (d.visible && d.loaded && d.active) {d.alpha2 = 1 }
if (d.visible && d.loaded && d.active) {d.alpha2 = 1; d.alpha = 0; }
else if (d.visible && !d.loaded && d.active) loadImagesCue.push(d);
else {d.alpha2 = 0}
else {d.alpha2 = 0; d.alpha = 1;}
})
}
// else {
// data.forEach(function (d) {
// d.alpha2 = 0;
// // d.alpha = 1
else {
data.forEach(function (d) {
d.alpha2 = 0;
d.alpha = 1
// d.visible = true;
// })
// }
})
}
}
function loadMiddleImage(d) {
if (d.loaded) {
d.alpha2 = 1;
d.alpha = 0;
return;
}
// console.log("load", d)
var url = config.loader.textures.detail.url + d.id + '.jpg'
var url = config.loader.textures.detail.url + d.id + '.png'
var texture = new PIXI.Texture.fromImage(url)
var sprite = new PIXI.Sprite(texture);
var update = function () {
sleep = false
d.visible = false
// d.visible = false
// d.alpha = 0;
}
sprite.on('added', update)
......@@ -863,7 +908,7 @@ function Canvas() {
state.lastZoomed = d.id;
var page = d.page ? '_' + d.page : ''
var url = config.loader.textures.big.url + d.id + page + ".jpg";
var url = config.loader.textures.big.url + d.id + page + ".png";
console.log(url)
......@@ -899,9 +944,10 @@ function Canvas() {
}
function loadImages() {
if (zooming) return;
if (zoomedToImage) return;
// if (zooming) return;
// if (zoomedToImage) return;
for (let index = 0; index < 4; index++) {
if (loadImagesCue.length) {
var d = loadImagesCue.pop();
// console.log(d.id)
......@@ -909,22 +955,30 @@ function Canvas() {
loadMiddleImage(d);
}
}
if (loadImagesCue.length) {
var d = loadImagesCue.pop();
// console.log(d.id)
if (!d.loaded) {
loadMiddleImage(d);
}
}
if (loadImagesCue.length) {
var d = loadImagesCue.pop();
// console.log(d.id)
if (!d.loaded) {
loadMiddleImage(d);
}
}
// if (loadImagesCue.length) {
// var d = loadImagesCue.pop();
// // console.log(d.id)
// if (!d.loaded) {
// loadMiddleImage(d);
// }
// }
// if (loadImagesCue.length) {
// var d = loadImagesCue.pop();
// // console.log(d.id)
// if (!d.loaded) {
// loadMiddleImage(d);
// }
// }
// if (loadImagesCue.length) {
// var d = loadImagesCue.pop();
// // console.log(d.id)
// if (!d.loaded) {
// loadMiddleImage(d);
// }
// }
// if (loadImagesCue.length) {
// var d = loadImagesCue.pop();
// console.log(d.id)
// if (!d.loaded) {
// loadMiddleImage(d);
......
js/viz.js
+ 4
− 2
View file @ 934a3553
......@@ -76,7 +76,7 @@ function init() {
var allTextures = {}
LoaderSprites()
.progress(function (textures) {
console.log("textures", textures)
// console.log("textures", textures)
allTextures = { ...textures, ...allTextures }
// Object.keys(textures).forEach(function (id) {
// if(i++ % 1000 == 0) console.log(i)
......@@ -99,6 +99,7 @@ function init() {
d.sprite.texture = allTextures[d.id]
if(i++ % 10000 == 0) console.log(i)
})
canvas.setMode("tsne")
})
.load(config.loader.textures.medium.url)
});
......@@ -135,6 +136,7 @@ function init() {
})
d3.selectAll(".navi .button")
.hide()
.on("click", function () {
var that = this;
var mode = d3.select(this).attr("data");
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment