From 361509edeeab1f942028f8ec3e80d42ab8b5007b Mon Sep 17 00:00:00 2001 From: Theo Jaunet Date: Wed, 28 Aug 2019 18:46:05 +0200 Subject: [PATCH] upgrade --- css/custom.css | 38 ++++++++++++++++++-- data/presk.json | 1 + data/presk1.json | 1 + data/presk2.json | 1 + data/pseudopit.json | 1 + index.html | 4 +-- js/drawVector.js | 24 ++++++++++--- js/main.js | 87 ++++++++++++++++++++++++--------------------- js/observation.js | 2 ++ js/stage.js | 10 +++--- js/trajectory.js | 59 ++++++++++++++++++++---------- 11 files changed, 156 insertions(+), 72 deletions(-) create mode 100644 data/presk.json create mode 100644 data/presk1.json create mode 100644 data/presk2.json create mode 100644 data/pseudopit.json diff --git a/css/custom.css b/css/custom.css index 0f39f66..961ddf7 100644 --- a/css/custom.css +++ b/css/custom.css @@ -1,4 +1,14 @@ +.hum { + + stroke: #dbc81c !important; +} + +.fufu { + + stroke: #19c157 !important; +} + .traj path { stroke-width: 1.6px; @@ -54,13 +64,13 @@ a { outline: none; } - -.cell{ +.cell { width: 13px; height: 17px; border: 0.5px solid #333333; display: inline-block; } + .selected { border: solid #a92234 2px !important; } @@ -89,7 +99,6 @@ a { } .input-range { - -webkit-appearance: none; height: 200px; border-radius: 5px; background: #ccc; @@ -108,6 +117,10 @@ input::-moz-focus-inner { border: 0; } +input[type=range]::-moz-focus-outer { + border: 0; +} + input[type="range"] { -webkit-appearance: none; -moz-apperance: none; @@ -116,6 +129,7 @@ input[type="range"] { user-select: none; outline: none; width: 100%; + border: 0; background-image: -webkit-gradient( linear, left top, @@ -129,6 +143,7 @@ input[type="range"] { -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; + user-focus: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } @@ -148,3 +163,20 @@ input[type='range']::-webkit-slider-thumb { user-select: none; cursor: pointer; } + +input[type='range']::-moz-range-thumb { + -webkit-appearance: none !important; + background-color: #183d4e; + border: 1px solid #183d4e; + height: 18px; + width: 18px; + opacity: 1; + border-radius: 50%; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; + cursor: pointer; +} diff --git a/data/presk.json b/data/presk.json new file mode 100644 index 0000000..1768b55 --- /dev/null +++ b/data/presk.json @@ -0,0 +1 @@ +{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[248.8569335938,158.4353485107],[255.8835144043,142.4391479492],[256.9132537842,125.5984039307],[255.4078826904,111.2260437012],[248.2668914795,97.9460296631],[233.2746887207,85.3802032471],[212.4132843018,75.8755493164],[187.5229797363,70.1912384033],[159.9203033447,67.229598999],[130.488067627,66.1044769287],[99.8217926025,66.2180938721],[68.3231658936,67.1672363281],[36.2631072998,68.6799926758],[3.805480957,70.1282653809],[-28.8550720215,70.0579376221],[-61.4092254639,67.4044952393],[-93.8608398438,62.8655853271],[-126.1130523682,56.6274414062],[-157.6784210205,47.866607666],[-188.0347442627,36.0129547119],[-217.4991760254,21.9481811523],[-246.3620910645,6.3920135498],[-274.8192443848,-10.1701049805],[-303.0026550293,-27.410736084],[-331.2370147705,-44.7292480469],[-360.1767578125,-60.7775268555],[-390.3056030273,-73.6129760742],[-414.3552703857,-82.4570159912],[-430.5772247314,-88.4225311279],[-441.5193023682,-92.4464874268],[-448.9000091553,-95.1607818604],[-453.8785095215,-96.9916381836],[-458.8465118408,-91.3128662109],[-462.633102417,-76.6932067871],[-462.9929046631,-56.260635376],[-459.3376922607,-32.3628387451],[-452.8361816406,-6.1759490967],[-444.0069580078,21.3723297119],[-432.8779449463,49.484588623],[-420.1328582764,77.9433441162],[-406.2977294922,106.6358642578],[-391.7273712158,135.486038208],[-376.2784881592,164.2113952637],[-359.0377655029,191.9795227051],[-338.8814544678,217.3280181885],[-315.4042205811,238.7727813721],[-288.9250030518,255.0528411865],[-260.2976837158,265.2146606445],[-237.3414764404,271.2794189453],[-221.8572540283,275.3700561523],[-211.4130249023,278.1291809082],[-204.3683166504,279.9901275635],[-198.1344299316,274.3027496338],[-193.6930999756,259.6706542969],[-192.217956543,239.0654449463],[-192.8890228271,214.4472198486],[-195.446182251,187.2082519531],[-200.0660705566,158.3824462891],[-206.1481323242,128.5047302246]]} \ No newline at end of file diff --git a/data/presk1.json b/data/presk1.json new file mode 100644 index 0000000..dbc9ef3 --- /dev/null +++ b/data/presk1.json @@ -0,0 +1 @@ +{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[254.9782562256,151.230178833],[257.4223632812,138.1317596436],[254.0013580322,124.3294677734],[248.8273162842,112.6319732666],[245.3372955322,104.7417755127],[235.9658966064,98.2572174072],[218.9424438477,92.1103973389],[196.7014160156,86.6345825195],[170.8643798828,82.4187164307],[142.5970306396,79.1257171631],[112.6903991699,76.4552154541],[81.6781158447,74.2045898438],[49.9200439453,72.2371826172],[17.6589050293,70.4608154297],[-14.9415740967,68.8132781982],[-47.7347564697,66.8074188232],[-80.5669708252,63.7539978027],[-113.3247070312,59.4839782715],[-145.6086578369,52.9719543457],[-176.4688415527,42.747467041],[-205.3337860107,28.5904846191],[-232.7583770752,11.669128418],[-258.8950653076,-7.4323425293],[-284.0563964844,-28.0900421143],[-310.0200653076,-47.9972381592],[-337.7084655762,-65.0332336426],[-367.1336517334,-77.5530700684],[-390.710067749,-85.8433380127],[-406.6128540039,-91.4353790283],[-417.339630127,-95.2073974609],[-424.5751037598,-97.7517700195],[-429.4556121826,-99.4680633545],[-433.7151794434,-93.5928955078],[-436.0324554443,-78.846282959],[-435.2894439697,-58.3058929443],[-432.3382873535,-33.8841400146],[-427.8977355957,-6.8444366455],[-422.4526062012,21.9611206055],[-416.329864502,51.9577941895],[-409.7500457764,82.7579193115],[-402.4310302734,113.9819335938],[-393.2218933105,144.9787139893],[-380.6121520996,174.5804138184],[-363.7866973877,201.4241943359],[-342.6944122314,224.1786499023],[-317.8848114014,241.6671905518],[-290.3634185791,252.9733886719],[-261.4563903809,257.5057983398],[-238.5640563965,259.0142364502],[-223.1228790283,260.0316009521],[-209.3887329102,254.443862915],[-196.9572906494,240.3535003662],[-188.0045928955,220.0658721924],[-184.027923584,195.8048858643],[-185.3450317383,169.7340698242],[-189.448135376,141.8210296631],[-196.9080657959,113.2205505371]]} \ No newline at end of file diff --git a/data/presk2.json b/data/presk2.json new file mode 100644 index 0000000..9eab509 --- /dev/null +++ b/data/presk2.json @@ -0,0 +1 @@ +{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[257.1058502197,158.0023040771],[258.6767730713,146.8785705566],[252.4669952393,131.3953399658],[239.2864227295,114.9784393311],[220.2204437256,100.2967529297],[196.6112060547,89.3649291992],[169.8674468994,82.717956543],[141.0145874023,79.1069641113],[110.7391357422,77.543762207],[79.5041351318,77.3618774414],[47.6219024658,78.1116790771],[15.3030548096,79.489944458],[-17.3291168213,80.8475341797],[-50.1073608398,80.7160339355],[-82.447479248,77.1783905029],[-113.3455352783,68.9601135254],[-142.2360229492,56.1563415527],[-169.6778564453,40.1477661133],[-196.142578125,21.9774932861],[-221.9482116699,2.3491210938],[-247.5999755859,-17.9232788086],[-274.0131835938,-37.4250793457],[-302.0048217773,-54.1876220703],[-331.634552002,-66.5229797363],[-362.2975463867,-73.2355651855],[-386.5590057373,-76.707824707],[-402.9238433838,-79.0500488281],[-413.9622497559,-80.6300201416],[-421.4078826904,-81.6958007812],[-427.397644043,-75.3818664551],[-430.881942749,-60.3393554688],[-430.0752716064,-39.868850708],[-424.7196960449,-16.3474273682],[-416.1625976562,9.1711120605],[-405.4460144043,36.0366973877],[-393.2728729248,63.8108825684],[-380.1172637939,92.1979675293],[-366.2989196777,120.9984588623],[-352.0335540771,150.0777893066],[-337.0773925781,179.1259613037],[-320.4297943115,207.3173522949],[-300.8807983398,233.2098083496],[-277.9514312744,255.3225860596],[-258.9294891357,271.3678741455],[-246.0989532471,282.1905517578],[-237.4446411133,289.4904937744],[-231.6072692871,294.4143066406],[-222.9254302979,292.4571533203],[-211.4884033203,281.8966522217],[-200.6064300537,264.4520874023],[-191.8107452393,241.9408569336],[-185.0111846924,215.9506835938],[-184.6344146729,200.9480133057],[-188.0648803711,183.8985900879],[-195.0711364746,162.6258239746],[-204.6231689453,138.5634307861],[-215.8923950195,112.6193695068]]} \ No newline at end of file diff --git a/data/pseudopit.json b/data/pseudopit.json new file mode 100644 index 0000000..0476bf5 --- /dev/null +++ b/data/pseudopit.json @@ -0,0 +1 @@ +{"positions":[[-80.0,240.0],[-72.9032592773,239.5688323975],[-57.3142089844,239.8639831543],[-36.0520935059,241.3308563232],[-10.9104919434,243.009765625],[16.7949523926,245.409942627],[46.2259063721,245.9455871582],[76.7217407227,244.3581542969],[108.0255126953,241.9132995605],[139.2969055176,236.6040802002],[169.3508911133,227.00390625],[196.8508911133,212.5113372803],[220.4622955322,193.2011108398],[237.6701049805,176.6720123291],[249.2769317627,165.5227508545],[257.1058502197,158.0023040771],[262.386505127,152.9295654297],[260.8788909912,144.540725708],[250.8700561523,132.909072876],[233.9434661865,121.4550933838],[211.8544921875,111.8132019043],[186.2528076172,103.5366821289],[158.2256774902,96.6243591309],[128.5033721924,92.1104431152],[97.74949646,90.7833099365],[66.3184814453,91.7509155273],[34.4307098389,94.2663269043],[2.1750640869,97.3829650879],[-30.4002990723,99.4274597168],[-62.8778839111,98.3126373291],[-94.7856903076,93.3767852783],[-126.0629119873,85.324432373],[-156.1585388184,73.8938140869],[-183.8516693115,58.3180236816],[-208.5736236572,38.8119049072],[-231.1726226807,16.569229126],[-252.7040405273,-7.260635376],[-274.6472167969,-31.2021636963],[-298.4401702881,-53.3243255615],[-324.6643981934,-71.8543395996],[-353.1020355225,-85.3819122314],[-382.9609375,-92.8987579346],[-406.679977417,-96.9135437012],[-422.6789855957,-99.6216430664],[-433.4706573486,-101.448348999],[-443.3974609375,-96.0948028564],[-452.1689605713,-81.8882904053],[-457.529586792,-61.5220947266],[-457.9885406494,-37.4606323242],[-453.4866485596,-11.5170135498],[-445.5053863525,15.6352996826],[-435.177230835,43.6029205322],[-422.876739502,71.9012298584],[-408.0204772949,99.5868530273],[-390.2422180176,125.8313140869],[-370.3875274658,151.0022735596],[-349.1322174072,175.4491271973],[-326.63722229,199.0718994141],[-302.4261322021,220.9446258545],[-275.9654388428,239.4306030273],[-254.4725494385,252.6978759766],[-239.9753723145,261.6468200684],[-230.1968994141,267.6829376221],[-218.1054229736,267.2635955811],[-203.0215759277,258.7027587891],[-188.1396484375,243.2134246826],[-184.0027160645,224.5857391357],[-184.6813201904,207.6843109131],[-187.315246582,185.6622467041],[-191.4123382568,160.2110290527],[-196.4963531494,132.4467773438],[-202.6783599854,103.2352600098]]} \ No newline at end of file diff --git a/index.html b/index.html index 4d7efdb..3e80462 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@
+ style="width: 296px;position: absolute;top: -6px;left: -1px">

Step --/--

@@ -54,7 +54,7 @@
What if we Reduce the Memory of an Artificial Doom Player?
-

We built Doom player AI using Deep Reinforcement learning. +

We built Doom player AI using Deep Reinforcement learning. While playing, it builds and updates an inner representation (memory) of the game, its environment. Reducing this memory could help the player learning to complete its task and thus lower both its training time and energy consumption footprint.
diff --git a/js/drawVector.js b/js/drawVector.js index d6a607d..2b0bfea 100644 --- a/js/drawVector.js +++ b/js/drawVector.js @@ -6,7 +6,7 @@ let hst = 521; let sels = [-1, -1]; let old_sels = [-1, -1]; let cur_tri = 'nm'; -let mono_col = d3.scaleLinear().domain([0.35, 1]).range(['#FFF', '#bf542f']).interpolate(d3.interpolateHcl); +let mono_col = d3.scaleLinear().domain([0, 0.35, 1]).range(['#ffffe1', '#FEEAA9', '#cf582f']).interpolate(d3.interpolateHcl); let goplz = false; let tri = { 'act': [17, 16, 4, 12, 0, 18, 11, 7, 15, 19, 30, 3, 5, 8, 31, 25, 14, 29, 22, 6, 1, 24, 2, 20, 10, 28, 21, 9, 23, 27, 26, 13], @@ -103,7 +103,7 @@ function init_current(svg, offx, offy, step) { function show_current(svg, offx, offy, step) { svg.selectAll('.curt') - .attr('transform', 'translate(' + (ve_w * (step - 1) + (ve_w / 2) + offx) + ',' + (0 + offy) + ') rotate(' + (90) + ' ' + (15) + ' ' + (15) + ')') + .attr('transform', 'translate(' + (ve_w * (step - 1) + ((ve_w / 2) / 2) + offx) + ',' + (0 + offy) + ') rotate(' + (90) + ' ' + (15) + ' ' + (15) + ')') } @@ -116,10 +116,26 @@ function show_sel(step) { d3.selectAll('.hsel rect').style('stroke-width', '2.2px') let st = [hst + (ve_w * curStep + (0.02 * curStep)), (tdata.hiddens[0].length * ve_h) + 22]; - d3.select('#nlink').attr('points', "658," + (tool[2] - 105) + ",676," + (tool[2] - 105) + ", " + (st[0] + ve_w + 1.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0] - 1.5) + "," + (st[1] + 10)) + d3.select('#nlink').attr('points', "658," + (tool[2] - 105) + ",675," + (tool[2] - 105) + ", " + (st[0] + ve_w + 1.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0] - 1.5) + "," + (st[1] + 10)) } +function draw_border(svg, data) { + + let st = [hst, 20]; + let ed = [(ve_w * data.length + (0.02 * data.length)) - 1, (data[0].length * ve_h)]; + + + svg.append('rect') + .attr('x', st[0]) + .attr('y', st[1]) + .attr('width', ed[0]) + .attr('height', ed[1]) + .attr('stroke-width', '1') + .attr('stroke', 'rgb(85, 85, 85)') + .attr('fill', 'none') +} + function mask_elems(svg, mask, nb) { @@ -242,7 +258,7 @@ function link_model(svg, data) { .attr('id', 'nlink') .style("fill", "#233E34") .style('stroke-width', '0px') - .attr("points", "685," + (tool[2] - 107) + ",702," + (tool[2] - 107) + ", " + (st[0] + ve_w + 4.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0]) + "," + (st[1] + 10)); + .attr("points", "685," + (tool[2] - 107) + ",698," + (tool[2] - 107) + ", " + (st[0] + ve_w + 4.5) + "," + (st[1] + 10) + ", " + (st[0] + ve_w) + "," + (st[1]) + "," + (st[0]) + "," + st[1] + ", " + (st[0]) + "," + (st[1] + 10)); svg.append('line') diff --git a/js/main.js b/js/main.js index 03388e6..3bd835a 100644 --- a/js/main.js +++ b/js/main.js @@ -28,12 +28,25 @@ let area = d3.line() d3.json("data/main/res.json").then(function (data) { tdata = data; + loadALlTraj(); reportWindowSize(); + d3.json("data/presk1.json").then(function (data) { + let tbbox = tool[0].node().getBoundingClientRect(); + let traj_s = ((520 * tbbox.width) / 1300); + + // draw_traj(data.positions.slice(12, -1), tool[0], traj_s, traj_s, true, 'hum'); + d3.selectAll('.item').moveToFront(); + }) + // mains[0] = data; tdata['inputs'] = []; + + mains[0] = tdata; + draw_arrowV2(400, tool[2] - 30, 180, -1) + for (let i = 0; i < data.hiddens.length; i++) { getBase64ImageFromUrl('data/main/images/input' + i + '.jpg') .then(result => tdata['inputs'][i] = '' + result) @@ -41,10 +54,6 @@ d3.json("data/main/res.json").then(function (data) { } - mains[0] = tdata; - draw_arrowV2(400, tool[2] - 30, 180, -1) - - }); // bars_init(tool[0], tool[1], tool[2]); @@ -53,17 +62,39 @@ d3.json("data/main/res.json").then(function (data) { function meta_change(filename, index) { -/* if (index !== -1 && index !== undefined) { + if (index !== -1 && index !== undefined) { iz = '' + index[0] + '_' + index[1] - }*/ + } d3.json("data/" + filename).then(function (data) { if (stage !== '4') { + let tfinam = ''; + switch (stage) { + case "0": + tfinam = ''; + break; + case "1": + tfinam = 'rest' + iz + '_'; + break; + case "2": + tfinam = top_list[iz] + '_'; + break; + case "3": + tfinam = selecs_list[iz] + '_'; + break; + case "4": + tfinam = 'red' + iz + '_'; + break; + default: + tfinam = ''; + break + } + data['inputs'] = []; - for (let i = 0; i < tdata.hiddens.length; i++) { - getBase64ImageFromUrl('data/' + stfold[stage] + '/images/' + 'rest' + iz + '_input' + i + '.jpg') + for (let i = 0; i < data.hiddens.length; i++) { + getBase64ImageFromUrl('data/' + stfold[stage] + '/images/' + tfinam + 'input' + i + '.jpg') .then(result => data['inputs'][i] = '' + result) .catch(err => console.error(err)); } @@ -159,7 +190,7 @@ $('.play').on('click', function () { if (pl) { $(this).attr('src', 'assets/round-pause-button.svg'); - timer = setInterval(step, 100); + timer = setInterval(step, 115); step() } else { $(this).attr('src', 'assets/play-sign.svg'); @@ -215,7 +246,8 @@ function reportWindowSize() { $('.distrib').remove(); $('.arrow').remove(); traj_init(traj_s, traj_s); - draw_traj(tdata.positions, tool[0], traj_s, traj_s, true, 'main'); + tool[0].append("g").attr('class', 'traj'); + draw_traj(tdata.positions, tool[0], traj_s, traj_s, true, 'hum'); place_items(tool[0], tdata.positions[start]); draw_agent_path(tool[0], tdata.positions[start], tdata.orientations[start]); @@ -225,6 +257,8 @@ function reportWindowSize() { ve_init_rows(tool[0], tdata.hiddens, 633, 811, tdata.mask, -1); + draw_border(tool[0], tdata.hiddens); + drawModel(tool[0], tool[2]); show_sel(start); @@ -254,36 +288,6 @@ function chain_load(type) { } -function chain_load_top() { - - for (let i = 0; i < top_list.length; i++) { - let filename = 'top/' + top_list[i] + ".json"; - d3.json("data/" + filename).then(function (data) { - data = tofloat(data); - let tbbox = tool[0].node().getBoundingClientRect(); - let traj_s = ((450 * tbbox.width) / 1300); - draw_traj(data.positions, tool[0], traj_s, traj_s, false, 'temptr'); - top[i] = data - }) - - } -} - -function chain_load_DIY() { - - for (let i = 0; i < 32; i++) { - let filename = 'DIY/red' + i + ".json"; - d3.json("data/" + filename).then(function (data) { - data = tofloat(data); - let tbbox = tool[0].node().getBoundingClientRect(); - let traj_s = ((450 * tbbox.width) / 1300); - draw_traj(data.positions, tool[0], traj_s, traj_s, false, 'temptr'); - diy[i] = data - }) - } -} - - function load_step(st) { curStep = st - 1; @@ -300,11 +304,13 @@ function up_curtxt(step, total) { function loadALlTraj() { + d3.json("data/pos.json").then(function (data) { let tbbox = tool[0].node().getBoundingClientRect(); tool[1] = tbbox.width; tool[2] = tbbox.height; + tool[0].append("g").attr('class', 'traj'); let traj_s = ((50 * tbbox.width) / 1300); let keys = Object.keys(data); @@ -313,6 +319,7 @@ function loadALlTraj() { draw_traj(data[keys[i]], tool[0], traj_s, traj_s, false, 'traj-bg'); } + }) } diff --git a/js/observation.js b/js/observation.js index 7898ac3..47397d8 100644 --- a/js/observation.js +++ b/js/observation.js @@ -24,12 +24,14 @@ function drawImage(svg, url, height) { url = ('data/' + stfold[stage] + '/images/' + tfinam + 'input' + curStep + '.jpg'); + if (tdata['inputs'] !== undefined) { if (tdata['inputs'][curStep] !== undefined) { url = (stage === "4" ? 'data:image/png;base64,' : '') + tdata['inputs'][curStep]; } } + if (temp._groups[0][0] === null) { svg.append("svg:image") diff --git a/js/stage.js b/js/stage.js index d41cfdb..254887f 100644 --- a/js/stage.js +++ b/js/stage.js @@ -121,12 +121,12 @@ function update_stage(nb) { $('.random').remove(); - for (let i = 0; i < random.length; i++) { +/* for (let i = 0; i < random.length; i++) { draw_traj(random[i].positions, tool[0], traj_s, traj_s, false, 'sec-traj'); - } - if (random.length < 11) { - chain_load('random/rest') - } + }*/ + // if (random.length < 11) { + // chain_load('random/rest') + // } break; case "2": /* iz = 0; diff --git a/js/trajectory.js b/js/trajectory.js index 7160b90..8a32661 100644 --- a/js/trajectory.js +++ b/js/trajectory.js @@ -1,6 +1,6 @@ let mapx, mapy, traj_x, traj_y; let offx = -6; -let offy = 80; +let offy = 90; let agent; function traj_init(width, height) { @@ -29,7 +29,7 @@ function draw_traj(data, svg, width, height, cs, cla) { if (cs) { - let g = svg.append("g").attr('class', 'traj'); + let g = svg.select('.traj'); g.append("path") @@ -37,15 +37,15 @@ function draw_traj(data, svg, width, height, cs, cla) { .attr("d", line) .attr('stroke', '#fff') .attr('class', 'traj_bg') - .style('stroke-width', '10px') - .style("fill", "none") + .style('stroke-width', '7px') + .style("fill", "none"); g.append("path") .data([data]) .attr("d", line) .attr('stroke', 'steelblue') - .style('stroke-width', '6px') - .attr('class', 'traj_top') + .style('stroke-width', '5px') + .attr('class', 'traj_top '+cla) .style("fill", "none") @@ -64,15 +64,18 @@ function draw_traj(data, svg, width, height, cs, cla) { tpath.attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength) .transition() - .duration(3000) + .duration(4500) .attr("stroke-dashoffset", 0) } + // d3.selectAll('.traj_bg').moveToBack(); + // d3.selectAll('.traj_top').moveToBack(); - - d3.select('.traj_bg').moveToFront(); - d3.select('.traj_top').moveToFront(); - d3.select('.traj-sel').moveToFront(); + d3.selectAll('.traj_bg').moveToFront(); + d3.selectAll('.traj_top').moveToFront(); + d3.selectAll('.traj-sel').moveToFront(); + d3.selectAll('#agent').moveToFront(); d3.selectAll('.item').moveToFront(); + } @@ -84,8 +87,8 @@ function place_items(svg, st) { g.append("svg:image") .attr('x', traj_x(80) + offx + 1) .attr('y', traj_y(80) + offy - 15.5 + 1) - .attr('width', 45) - .attr('height', 57) + .attr('width', 38) + .attr('height', 38) .attr('class', 'item') .attr("xlink:href", 'assets/armorGreen.png') @@ -110,9 +113,9 @@ function place_items(svg, st) { g.append("svg:image") .attr('x', traj_x(-240) + offx + 1) - .attr('y', traj_y(80) + offy - 13.5 + 1) - .attr('width', 33) - .attr('height', 27) + .attr('y', traj_y(80) + offy - 26.5 + 1) + .attr('width', 29) + .attr('height', 29) .attr('class', 'item') .attr("xlink:href", 'assets/soul.png'); @@ -163,7 +166,7 @@ function place_items(svg, st) { function draw_walls(svg, offx, offy) { - let walls = [[-480.0, -480.0, -480.0, 320.0], [320.0, 320.0, 320.0, -480.0], [-320.0, -320.0, -320.0, -160.0], [-160.0, -480.0, -160.0, -320.0], [-160.0, -320.0, -160.0, -160.0], [-160.0, 160.0, -160.0, 320.0], [-160.0, 0.0, 0.0, 0.0], [0.0, 0.0, 160.0, 0.0], [0.0, 160.0, 160.0, 160.0], [160.0, -160.0, 320.0, -160.0]] + let walls = [[-480.0, -480.0, -480.0, 320.0], [320.0, 320.0, 320.0, -480.0], [-320.0, -335.0, -320.0, -147.0], [-160.0, -480.0, -160.0, -320.0], [-160.0, -325.0, -160.0, -160.0], [-160.0, 160.0, -160.0, 320.0], [-160.0, 0.0, 0.0, 0.0], [0.0, 0.0, 160.0, 0.0], [0.0, 160.0, 160.0, 160.0], [160.0, -160.0, 320.0, -160.0]] let g = svg.select('.traj'); @@ -178,8 +181,28 @@ function draw_walls(svg, offx, offy) { .attr('y1', (d) => traj_y(d[1]) + offy) .attr('y2', (d) => traj_y(d[3]) + offy) .attr('stroke', '#555555') - .attr('stroke-width', '6') + .attr('stroke-width', (d) => ((d[3] === 320.0 && d[1] === -480.0) || (d[1] === 320.0 && d[3] === -480.0)) ? '8' : '13') + .attr("stroke-linejoin", "round"); + + g.append('line') + .attr('x1', 0 + offx) + .attr('x2', 352.5 + offx) + .attr('y1', 107.5 + offy) + .attr('y2', 107.5 + offy) + .attr('stroke', '#555555') + .attr('stroke-width', '8') + .attr("stroke-linejoin", "round"); + + g.append('line') + .attr('x1', 6 + offx) + .attr('x2', 352.5 + offx) + .attr('y1', 407 + offy) + .attr('y2', 407 + offy) + .attr('stroke', '#555555') + .attr('stroke-width', '8') .attr("stroke-linejoin", "round") + + d3.selectAll('.item').moveToFront(); } function draw_agent_path(svg, pos, or) {