Skip to content

Commit

Permalink
Sorting animation + update layout + img in txt + title
Browse files Browse the repository at this point in the history
  • Loading branch information
@Theo-Jaunet
Theo-Jaunet committed Jul 26, 2019
1 parent c0e32c8 commit a8c6300
Show file tree
Hide file tree
Showing 12 changed files with 219 additions and 259 deletions.
14 changes: 9 additions & 5 deletions css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,30 +9,34 @@
stroke-width: 2px;
}


a {
cursor: pointer;
}

.hiddensgrp rect {

stroke-width: 0.02px;
stroke: #FFF;
cursor: pointer;
}

.item-icon {
width: 20px;
height: auto;
}

.hiddensgrp rect:hover {
opacity: 0.6;
}


.walls {
stroke-width: 6px;
}

.nav {
border: solid #555555 1px;
cursor: pointer;
/* padding: 25px;
display: inline-block;*/
/* padding: 25px;
display: inline-block;*/
user-select: none;
outline: none;
}
Expand Down
2 changes: 1 addition & 1 deletion data/main.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion data/top/halfact.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion data/top/halfch.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion data/top/quatact.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion data/top/quatch.json
View file

Large diffs are not rendered by default.

60 changes: 12 additions & 48 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,18 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<div class="container" style="position: relative">

<div style="width: 35px;height: auto;display: inline-block;margin-right: 20px;position: absolute;left: 424px;top: 121px;z-index: 50">
<img class="play" style="width: 35px" src="assets/play-sign.svg">
<p id="stepctn" style="position: absolute;display: inline-block;left: -23px;width: 80px;top: 46px;user-focus: none;user-select: none">Step --/--</p>
<div style="width: 35px;height: auto;display: inline-block;margin-right: 20px;position: absolute;left: 488.5px;top: 74px;z-index: 50">
<img class="play" style="width: 35px;position: absolute;left: -43px" src="assets/play-sign.svg">
<input id="timebar" type="range" min="0" max="35" step="1" value="0" style="width: 292.5px;position: absolute;top: 14px;">
<p id="stepctn" style="position: absolute;display: inline-block;left: 80px;width: 80px;top: -18px;user-focus: none;user-select: none">Step --/--</p>
</div>
<div class="row" style="margin-top: 15px">
<div class="five columns" style="position: relative">

<p style="max-height: 100px;">We trained an agent to play DOOM using Deep Reinforcement learning. The agent has to pick items in a specific order : Armor -> Health Pack -> and Soul-sphere, with the shortest path possible.
<h5> What if an artificial doom Player had reduced memory?</h5>
<p style="max-height: 100px;">We trained an agent to play DOOM using Deep Reinforcement learning.
The agent has to gather items in a specific order : <br>Armor <img src="assets/armor.png" class="item-icon"> -> Health Pack <img src="assets/hp.png" class="item-icon"> -> and Soul-sphere <img src="assets/soul.png"
class="item-icon"> , with the
shortest path possible.
Let’s explore how changing the train agent memory influences its trajectory!</p>

</div>
Expand All @@ -73,9 +77,9 @@
</div>
</div>

<div class=" row" style="max-height: 650px">
<div class=" row" style="max-height: 665px;position: absolute;top:91px">
<div class="eight columns">
<svg class="" id="tool" style="height: auto;width: 100%;min-height: 660px;min-width: 785px">
<svg class="" id="tool" style="height: auto;width: 100%;min-height: 685px;min-width: 785px">
<defs>
<filter id="brightness">
<feComponentTransfer>
Expand All @@ -90,12 +94,6 @@
</linearGradient>
</defs>
</svg>
<div style="position: relative">

<!-- <div style="display: inline-block;width: 320px">
<input id="timebar" type="range" min="0" max="39" step="1" value="0" style="width: 290px;position: absolute;top: 14px;">
</div>-->
</div>
</div>
<div class="four columns" style="min-width: 350px">
<h5 style="width: 100%" id="card_title"> Full Memory</h5>
Expand All @@ -107,41 +105,7 @@ <h5 style="width: 100%" id="card_title"> Full Memory</h5>
</div>


<div class=" row" style="text-align: center">
<div class="twelve columns" style="margin-top: 25%;display: inline-block">
<div style="text-align: left;width: 800px;display: inline-block">
<h4 id="navprob">Navigation Problems</h4>

<ul>

<li>
What are navigation problems
</li>
<li>
Why are they important
</li>
<li>
Different approaches to tackle this problem
</li>
<li>
Our navigation problem: K-item in which the agent must gather items in a pre-defined order
</li>
</ul>
<p>
has Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>
</div>
</div>
</div>


<div class=" row" style="text-align: center">
<div class=" row" id="scrolltxt" style="text-align: center;margin-top: 60vh">
<div class="twelve columns" style="margin-top: 25%;display: inline-block">
<div style="text-align: left;width: 800px;display: inline-block">
<h4>Deep Reinforcement Learning and Memory</h4>
Expand Down
142 changes: 74 additions & 68 deletions js/drawVector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,16 @@ let col = d3.scaleLinear().domain([-1, 0, 1]).range(['#2266a6', '#effce5', '#bf6
let hst = 800;
let sels = [-1, -1];
let old_sels = [-1, -1];

let cur_tri = 'act';
let mono_col = d3.scaleLinear().domain([0.35, 1]).range(['#FFF', '#bf542f']).interpolate(d3.interpolateHcl);
let goplz = false;
let tri = {
'act': [17, 19, 16, 6, 1, 4, 12, 10, 8, 14, 11, 27, 29, 15, 30, 7, 22, 25, 0, 3, 13, 21, 5, 24, 18, 28, 2, 26, 20, 23, 9, 31],
'ch': [29, 12, 8, 7, 25, 15, 11, 24, 3, 30, 14, 22, 20, 21, 19, 27, 18, 2, 23, 9, 0, 5, 28, 10, 13, 4, 6, 26, 16, 1, 31, 17]
};

// let mono_col = d3.scaleLinear().domain([0, 0.6, 0.8, 1]).range(["EFF0E8", '#f2e7e9', "#aa5b65", "#6b111c"]).interpolate(d3.interpolateHcl);
tri['nm'] = d3.range(32);

let drag_behavior = d3.drag()
.on("start", dragstarted)
.on("drag", dragged);

function ve_init_rows(svg, data, height, width, mask, elem) {
d3.select('#linear-gradient stop').attr('offset', '0%');
Expand All @@ -25,7 +27,7 @@ function ve_init_rows(svg, data, height, width, mask, elem) {
hst += 30
}

ve_h = Math.min(((height - 120) / data[0].length), 60);
ve_h = Math.min(((height - 140) / data[0].length), 60);
ve_w = Math.min((width - hst - 10) / data.length, 13);

for (let w = 0; w < data.length; w++) {
Expand All @@ -35,46 +37,58 @@ function ve_init_rows(svg, data, height, width, mask, elem) {
.data(data[w])
.enter()
.append('rect')
.attr('order', (d, i) => i)
.style('cursor', (stage === '4' ? 'pointer' : 'default'))
.attr('order', (d, i) => {
if (goplz) return tri[cur_tri][i]; else return i
})
.attr('x', (hst + (w * ve_w)))
.attr('y', (d, i) => {

return (i * ve_h) + 20
if (goplz) return (tri[cur_tri].indexOf(i) * ve_h) + 20; else return (i * ve_h) + 20
}).attr('nb', (d, i) => {
return i
}).attr('width', ve_w)
.attr('height', ve_h)
.attr('fill', (d) => {
.attr('fill', (d, i) => {
if (mask !== undefined && mains[0] !== undefined) {
if (mask[i] < 0.1) {
d = mains[0].hiddens[w][i]
}
} else if (elem !== undefined) {
if (elem.length > 0) {
if (i === elem[0] || i === elem[1])
d = mains[0].hiddens[w][i]
}
}
return (isMono ? mono_col(Math.abs(d)) : col(d))
}).on('click', svg_click);
}


ve_rows = g.selectAll('rect');
init_current(tool[0], (hst - 10) + (ve_w / 2) + (curStep* ve_w), -10, 0);
mask_elems(tool[0], mask, data.length);

if (elem !== undefined)
if (elem.length > 0) {
sels = elem;
mask_elem(sels);

d3.select('#singleRed').moveToFront();
}
init_current(tool[0], (hst - 10) + (ve_w / 2) + (curStep * ve_w), -10, 0);

if (stage !== '2' || goplz) {

show_sel(curStep);
if (goplz) {
// ve_update_reorder(cur_tri)
}
mask_elems(tool[0], mask, data.length);

}
if (elem !== undefined)
if (elem.length > 0) {
sels = elem;
mask_elem(sels);

d3.select('#singleRed').moveToFront();
}

function ve_update(svg, data) {
}
show_sel(curStep);

ve_rows.transition().duration(200)
.attr('fill', (d, i) => {
return col(data[i])
})
}


function init_current(svg, offx, offy, step) {

d3.selectAll('.curt').remove();
Expand All @@ -83,10 +97,9 @@ function init_current(svg, offx, offy, step) {
svg.append('path')
.attr('d', "M 30.8,16.6 0.8,30.8 10,16.6 0.8,0.8 Z")
.attr('class', 'curt')
.attr('fill', '#a92234')
.attr('fill', '#183d4e')
.style('cursor', 'grab')
.attr('transform', 'translate(' + (ve_w * (step - 1) + (ve_w / 2) + offx) + ',' + (0 + offy) + ') rotate(' + (90) + ' ' + (15) + ' ' + (15) + ')')
.call(drag_behavior)

}

Expand Down Expand Up @@ -122,7 +135,13 @@ function mask_elems(svg, mask, nb) {
for (let i = 0; i < mask.length; i++) {

if (mask[i] < 0.1) {
let t = tsvg.rectangle(hst - getRandomArbitrary(0, 12), (i * ve_h) + 20 + (0.2 * ve_h), (ve_w * nb + (0.02 * nb)) + getRandomArbitrary(0, 12), ve_h * 0.6, {

let ind = i;

if (goplz) {
ind = tri[cur_tri].indexOf(i)
}
let t = tsvg.rectangle(hst - getRandomArbitrary(0, 12), (ind * ve_h) + 20 + (0.2 * ve_h), (ve_w * nb + (0.02 * nb)) + getRandomArbitrary(0, 12), ve_h * 0.6, {
fill: "url(#linear-gradient)",
fillWeight: getRandomArbitrary(5, 9), // thicker lines for hachure
hachureAngle: getRandomArbitrary(10, 70), // angle of hachure,
Expand All @@ -134,6 +153,8 @@ function mask_elems(svg, mask, nb) {
// $(t).css(' stroke-dasharray: 5000 50000;
document.getElementById('hiddensgrp').appendChild(t)
d3.select('#linear-gradient stop').transition().duration(2500).attr('offset', '100%')
let tg = d3.select(t).attr('index', ind).attr('class', 'mask').data([ind])
tg.selectAll('path').data([ind])
/*
d3.selectAll('#hiddensgrp path').style('stroke-dasharray', () => '2600px 2600px')
Expand Down Expand Up @@ -246,53 +267,38 @@ function svg_click() {
}


function dragstarted() {


}


function dragged() {
function ve_update_reorder(type) {
/* if (type !== cur_tri) {
d3.selectAll('.mask path').transition()
.duration(2575)
.style('transform', (d) => {
let tm = hst + (ve_w * (tdata.hiddens.length - 1) + (ve_w / 2) - 10);
// let v1 = ve_h * d;
let v1 = ve_h * tri[cur_tri].indexOf(d);
let dx = d3.event.sourceEvent.offsetX;
return 'translateY(' + (Math.abs(v1 - (ve_h * tri[type].indexOf(d))) + 20 + 'px)');
})
}*/

if (dx < hst - 10) {
dx = hst - 10
} else if (dx > tm) {
dx = tm
if (type === 'act') {
cur_tri = type;
or = tri[cur_tri]
} else {

let md = 999;
let mi = -1;

for (let i = 0; i < tdata.hiddens.length; i++) {
if (md > Math.abs(dx - (hst + (ve_w * (i - 1 > 0 ? i - 1 : 0.2) + (ve_w / 2) - 10)))) {

md = Math.abs(dx - (hst + (ve_w * (i - 1 > 0 ? i - 1 : 0.2) + (ve_w / 2) - 10)));
mi = i

}
}

curStep = mi;


d3.selectAll('.curt')
.attr("transform", shape => "translate(" + (dx) + ",-10) rotate(90 15 15) ");
up_curtxt(curStep, tdata.hiddens.length - 1);

show_sel(mi);
draw_agent_path(tool[0], tdata.positions[start + curStep], tdata.orientations[start + curStep], 10, 10);
drawImage(tool[0], 'data:image/png;base64,' + tdata.inputs[start + mi], tool[2]);
update_bars(tool[0], tdata.probabilities[start + mi]);
show_current(tool[0], (hst - 10) + (ve_w / 2), -10, mi)

cur_tri = type;
or = tri[cur_tri]
}

ve_rows
.attr('order', (d, i) => or.indexOf(i % 32))
.transition()
.duration(2575)
.attr('y', (d, i) => {
return (ve_h * or.indexOf(i % 32)) + 20;
}).on('end', mask_elems(tool[0], tdata.mask, tdata.hiddens.length))
}


function deler() {


Expand Down
Loading

0 comments on commit a8c6300

Please sign in to comment.