CONDEMNED to the DEPTHS: A Wizard Town Shortz Comic

// CONDEMNED TO THE DEPTHS // Title Panel p.art.path('ASSETS/1A/'); p.art.assets( { name: "title", src: "title.png", classNames: ["float-vertical-1"] }, { name: "subtitle", src: "subtitle.png", classNames: ["float-vertical-2"] } ); p.art.layers('art'); const xy = { title: [481,-65], subtitle: [462,508], }; p.step.create( // resetSealayer("red-clouds"), // resetSealayer("pink-clouds"), // resetSealayer("white-sea"), // resetSealayer("pink-sea"), // resetSealayer("red-sea"), // resetSealayer("deep-sea"), // resetSealayer("black-sea"), { a: 'title', l: 'art', e: "easeUp", d: s.time.SHORT*1.6, u: s.time.XLONG*2.2, xy: xy.title }, { a: 'subtitle', l: 'art', e: "easeUp", d: s.time.MEDIUM, u: s.time.XLONG*1.8, xy: xy.subtitle }, { code: function(){ if (!s.GENERATE_TITLE_BUBBLES) { s.GENERATE_TITLE_BUBBLES = true; creatingBubbles(); } } }, ); p.step.transition( { code: function(){ s.GENERATE_TITLE_BUBBLES = false; }, s: "after" }, { a: 'title', l: 'art', p: 'remove', e: 'easeOutUp', u: s.time.LONG*1.2, xy: xy.title }, { a: 'subtitle', l: 'art', p: 'remove', e: 'easeOutUp', d: s.time.SHORT, u: s.time.LONG*1.2, xy: xy.subtitle } ); p.destination.main = "[[1B]]";

// I CAST THE TRASH OF MY MEAL INTO THE OCEAN p.art.path('ASSETS/1B/'); p.art.assets( { name: "boat", classNames: ["anim-float-down-1"], type: "asset", src: "boat.png" }, ["text", "text.png"], // TRASH { name: "bag", src: "bag.png", }, { name: "canA", src: "canA.png", }, { name: "canB", src: "canB.png", }, { name: "milk", src: "milk.png", } ); p.art.layers('art'); const xy = { bag: [570,83], boat: [699,51], canA: [465,121], canB: [517,203], milk: [409,192], text: [109,13] }; p.step.create( { code: function(){ // buffer }, u: 1200, s: "after", }, // sealayers enterSealayer("red-clouds"), enterSealayer("pink-clouds"), enterSealayer("white-sea"), enterSealayer("pink-sea"), //boat { a: 'boat', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [50, 75, 0], position: [0,0,0] }), d: 3500, u: s.time.XLONG, xy: xy.boat }, // TRASH { a: 'bag', l: 'art', e: jinx.effects.extend('fadeIn', { fromPosition: [30, 50, 0], position: [0,0,0] }), d: s.time.LONG*1.2, u: s.time.SHORT*1.5, xy: xy.bag }, { a: 'canA', l: 'art', e: jinx.effects.extend('fadeIn', { fromPosition: [36, 43, 0], position: [0,0,0] }), d: s.time.XSHORT*1.3, u: s.time.SHORT*1.7, xy: xy.canA }, { a: 'milk', l: 'art', e: jinx.effects.extend('fadeIn', { fromPosition: [43, 36, 0], position: [0,0,0] }), d: s.time.XSHORT*1.6, u: s.time.SHORT*1.9, xy: xy.milk }, { a: 'canB', l: 'art', e: jinx.effects.extend('fadeIn', { fromPosition: [50, 30, 0], position: [0,0,0] }), d: s.time.XSHORT*1.6, u: s.time.SHORT*2.0, xy: xy.canB }, // TEXT { a: 'text', l: 'art', e: 'easeDown', d: s.time.XSHORT*4.25, u: s.time.XLONG*1.5, xy: xy.text } ); p.step.transition( exitSealayer("pink-sea", 250), exitSealayer("white-sea"), exitSealayer("pink-clouds"), exitSealayer("red-clouds"), { a: 'boat', l: 'art', p: 'remove', e: "easeOutUp", u: s.time.MEDIUM, xy: xy.boat }, { a: 'milk', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.milk }, { a: 'canB', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.canB }, { a: 'canA', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.canA }, { a: 'bag', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'text', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.SHORT, u: s.time.MEDIUM, xy: xy.text }, { code: function(){ // buffer }, u: 750, s: "after", } ); p.destination.main = "[[1C]]";

// I FIND I NOW TRUST ONLY THAT WHICH THE SEA HAS TAKEN TO BE TRULY GONE p.art.path('ASSETS/1C/'); p.art.assets( ["text", "text.png"], // trashes { name: "bag", src: "bag.png", }, { name: "cup", src: "cup.png", classNames: ["anim-float-down-4"], type: "asset" }, { name: "bubs-a", src: "bubs-a.png", classNames: ["anim-float-down-1"], type: "asset", }, { name: "bubs-b", src: "bubs-b.png", classNames: ["anim-float-down-2"], type: "asset", }, { name: "bubs-c", src: "bubs-c.png", classNames: ["anim-float-down-3"], type: "asset", }, { name: "milk", src: "milk.png", classNames: ["anim-float-down-4"], type: "asset" }, ); p.art.layers("art"); const xy = { bag: [367,305], bubs: [325,93], milk: [404,55], cup: [226,142], text: [538,182], }; p.step.create( { a: 'milk', l: 'art', e: 'easeDown', u: s.time.MEDIUM*1.4, xy: xy.milk }, { a: 'cup', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.MEDIUM*1.4, xy: xy.cup }, { a: 'bag', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.MEDIUM*1.4, xy: xy.bag }, { a: 'text', l: 'art', e: jinx.effects.extend('easeDown', {fromPosition: [0, -25, 0]}), d: s.time.SHORT*1.2, u: s.time.XLONG*1.5, xy: xy.text }, enterSealayer("red-sea", null, null, true), { a: 'bubs-a', l: 'art', e: "Bag Bubbles", d: s.time.SHORT*1.5, s: "with", u: s.time.MEDIUM*1.4, xy: xy.bubs }, { a: 'bubs-b', l: 'art', e: 'Bag Bubbles', d: 100*1.4, u: s.time.MEDIUM*1.4, xy: xy.bubs }, { a: 'bubs-c', l: 'art', e: 'Bag Bubbles', d: 100*1.4, u: s.time.MEDIUM*1.4, xy: xy.bubs } ); p.step.transition( exitSealayer("red-sea"), { a: 'bag', l: 'art', p: 'remove', e: "easeOutUp", u: s.time.MEDIUM, xy: xy.bag }, { a: 'bubs-a', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'bubs-c', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'bubs-b', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'cup', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.SHORT, u: s.time.MEDIUM, xy: xy.cup }, { a: 'milk', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.SHORT, u: s.time.MEDIUM, xy: xy.milk }, { a: 'text', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.SHORT, u: s.time.MEDIUM, xy: xy.text }, { code: function(){ // buffer }, u: 1000, s: "after", } ); p.destination.main = "[[1D]]";

// TOO MANY THINGS BOURNE BY LAND AND AIR HAVE THOUGH I BELIEVED THEM GONE INVARIABLY RETURNED TO HAUNT ME— p.art.path('ASSETS/1D/'); p.art.assets( ["text", "text.png"], { name: "jellies", src: "jellyfish-animation.gif", classNames: ["looping-jellies"], type: "asset" }, // TRASH { name: "bag", src: "../1C/bag.png", // classNames: ["anim-float-down-1"] }, { name: "rings", src: "rings.png", classNames: ["anim-float-down-1"], type: 'asset', }, { name: "silver", src: "silver.png", classNames: ["anim-float-down-2"], type: 'asset', }, { name: "bubs-a", src: "bubs-a.png", classNames: ["anim-float-down-3"], type: 'asset', }, { name: "bubs-b", src: "bubs-b.png", classNames: ["anim-float-down-4"], type: 'asset', }, ); p.art.layers("full-art", "art"); // jelly css setup const jellySrc = p.art.getAsset('jellies').getSrc(); const jellyRule = ( `.asset.looping-jellies { background-image: url("${jellySrc}"); }` ); const jellyStyleEl = document.createElement('style'); jellyStyleEl.id = "jelly-styles"; jellyStyleEl.textContent = jellyRule; $('body').append(jellyStyleEl); const xy = { bag: [340,362], jellies: [0,50], bubs: [280,171], rings: [148,187], silver: [230,12], text: [467,160], } // steps p.step.create( { a: 'jellies', l: 'full-art', e: jinx.effects.extend("fadeIn", { fromPosition: [-175, -50, 0], position: [0,0,0], easing: function (t) { return t*(2-t) }, complete: function() {console.log("jellies done")}, }), // d: s.time.SHORT, u: s.time.XLONG*2.5, xy: xy.jellies }, { a: 'silver', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.MEDIUM*1.4, xy: xy.silver }, { a: 'rings', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.MEDIUM*1.4, xy: xy.rings }, { a: 'bag', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.MEDIUM*1.4, xy: xy.bag }, { a: 'text', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG*1.8, xy: xy.text }, { a: 'bubs-a', l: 'art', e: 'Bag Bubbles', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'bubs-b', l: 'art', e: 'Bag Bubbles', d: 100, u: s.time.MEDIUM, xy: xy.bubs }, ); p.step.transition( { a: 'jellies', l: 'full-art', p: 'remove', e: "easeOutUp", // d: s.time.SHORT, u: s.time.XLONG, xy: xy.jellies }, { a: 'bag', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'bubs-b', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'bubs-a', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'rings', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.rings }, { a: 'silver', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.silver }, { a: 'text', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.SHORT, u: s.time.MEDIUM, xy: xy.text }, { code: function(){ // buffer }, u: 1000, s: "after", } ); p.destination.main = "[[2A]]";

// 2A MY DEBTS p.art.path('ASSETS/2A/'); p.art.assets( ["text", "text.png"], { name: "asset-gel", classNames: ['asset-2a-gel'], type: "text", }, { name: "fish-sprite-wrapper", type: "text", text: story.render("FISHES") }, // TRASH { name: "bag", src: "bag.png", // classNames: ["anim-float-down-1"] }, { name: "bag-bubs-a", src: "bag-bubs-a.png", classNames: ["anim-float-up-1"], type: "asset", }, { name: "bag-bubs-b", src: "bag-bubs-b.png", classNames: ["anim-float-up-2"], type: "asset", }, { name: "fries", src: "fries.png", classNames: ["anim-float-down-1"], type: "asset", }, { name: "ketchup", src: "ketchup.png", classNames: ["anim-float-down-2"], type: "asset", }, { name: "sauce", src: "sauce.png", classNames: ["anim-float-down-3"], type: "asset", }, ); p.art.layers("full-art", "art"); const xy = { fishes: [0,25], bag: [319,204], fries: [301,84], ketchup: [169,182], sauce: [207,58], text: [552,50], gel: [150,40], } p.step.create( { a: 'fish-sprite-wrapper', l: 'full-art', e: 'nearly-hidden', u: 1, }, fishSpriteHandler(), { a: "asset-gel", l: "art", e: "fadeIn", u: s.time.LONG, xy: xy.gel, }, { a: 'fish-sprite-wrapper', l: 'full-art', p: "effect", e: 'easeUp', s: "async", d: s.time.MEDIUM*1.8, u: s.time.XLONG*2, xy: xy.fishes, }, { a: 'sauce', l: 'art', e: 'easeDown', d: s.time.SHORT*0.8, u: s.time.LONG, xy: xy.sauce }, { a: 'fries', l: 'art', e: 'easeDown', d: s.time.SHORT*0.8, u: s.time.LONG, xy: xy.fries }, { a: 'ketchup', l: 'art', e: 'easeDown', d: s.time.SHORT*0.8, u: s.time.LONG, xy: xy.ketchup }, { a: 'bag', l: 'art', e: 'easeDown', d: s.time.SHORT*0.8, u: s.time.LONG, xy: xy.bag }, { a: 'bag-bubs-a', l: 'art', e: 'easeUp', d: s.time.SHORT, u: s.time.LONG, xy: xy.bag }, { a: 'bag-bubs-b', l: 'art', e: 'easeUp', d: s.time.XSHORT, u: s.time.LONG, xy: xy.bag }, // FISH & TEXT { a: 'text', l: 'art', e: 'easeDown', d: s.time.MEDIUM*2, u: s.time.XLONG*2, xy: xy.text }, enterSealayer("deep-sea", null, null, true), ); p.step.transition( exitSealayer("deep-sea"), { a: 'fish-sprite-wrapper', l: 'full-art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.LONG, xy: xy.fishes }, { a: 'bag', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'bag-bubs-a', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'bag-bubs-b', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'ketchup', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.ketchup }, { a: 'fries', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.fries }, { a: 'sauce', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.sauce }, { a: "asset-gel", l: "art", p: "remove", e: "fadeOut", u: s.time.MEDIUM, xy: xy.gel, }, { a: 'text', l: 'art', p: 'remove', e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.text }, { code: function(){ // buffer }, u: 1500, s: "after", } ); p.destination.main = "[[2B]]";

// PAST LOVES WHO LEARNED AT LAST TO SHUN MY AFFECTIONS p.art.path('ASSETS/2B/'); p.art.assets( ["text", "text.png"], { name: "shark", src: "shark-iso.png", classNames: ["anim-float-left-3"], type: "asset" }, { name: "upfish", src: "shark-upfish.png", classNames: ["anim-float-down-1"], type: "asset" }, { name: "downfish", src: "shark-downfish.png", classNames: ["anim-float-down-2"], type: "asset" }, { name: "shark-white", src: "shark-iso-white.png", classNames: ["anim-float-left-3"], type: "asset" }, { name: "upfish-white", src: "shark-upfish-white.png", classNames: ["anim-float-down-1"], type: "asset" }, { name: "downfish-white", src: "shark-downfish-white.png", classNames: ["anim-float-down-2"], type: "asset" }, // HACK todo: asset instantiation { name: "barracuda#1", src: "barracuda.png", classNames: ["anim-float-right-1"], type: "asset" },{ name: "barracuda#2", src: "barracuda.png", classNames: ["anim-float-right-2"], type: "asset" }, // trashes { name: "crust", src: "crust1.png", classNames: ["anim-float-down-1"], type: "asset" }, { name: "cheese", src: "cheese.png", classNames: ["anim-float-down-2"], type: "asset" }, { name: "orangepeel", src: "orangepeel.png", classNames: ["anim-float-down-3"], type: "asset" }, { name: "banana", src: "banana.png", classNames: ["anim-float-down-4"], type: "asset" }, { name: "bag", src: "bag.png", // classNames: ["anim-float-down-1"], type: "asset" }, ); p.art.layers("art"); const xy = { bag: [746,288], banana: [585,290], barracuda1: [-300,100], barracuda2: [-157,241], cheese: [578,210], crust: [450,151], orangepeel: [690,239], shark: [835,41], text: [483,22], } p.step.create( // TRASH { a: 'crust', l: 'art', e: "easeDown", d: s.time.SHORT, u: s.time.XLONG, xy: xy.crust }, { a: 'cheese', l: 'art', e: "easeDown", d: s.time.SHORT, u: s.time.XLONG, xy: xy.cheese }, { a: 'orangepeel', l: 'art', e: "easeDown", d: s.time.SHORT, u: s.time.XLONG, xy: xy.orangepeel }, { a: 'banana', l: 'art', e: "easeDown", d: s.time.SHORT, u: s.time.XLONG, xy: xy.banana }, { a: 'bag', l: 'art', e: "easeDown", d: s.time.SHORT, u: s.time.XLONG, xy: xy.bag }, // FISH & TEXT // outlines { a: 'downfish-white', l: 'art', e: "easeLeftDown", d: s.time.LONG*0.8, u: s.time.XLONG, xy: xy.shark },{ a: 'shark-white', l: 'art', e: "easeLeftDown", s: 'with', u: s.time.XLONG, xy: xy.shark },{ a: 'upfish-white', l: 'art', e: "easeLeftDown", s: 'with', u: s.time.XLONG, xy: xy.shark }, { a: 'downfish', l: 'art', e: "easeLeftDown", u: s.time.XLONG, xy: xy.shark },{ a: 'shark', l: 'art', e: "easeLeftDown", s: 'with', u: s.time.XLONG, xy: xy.shark },{ a: 'upfish', l: 'art', e: "easeLeftDown", s: 'with', u: s.time.XLONG, xy: xy.shark }, { a: 'barracuda#2', l: 'art', e: "easeRightDown", d: s.time.MEDIUM, u: s.time.XLONG, xy: xy.barracuda2 }, { a: 'barracuda#1', l: 'art', e: "easeRightDown", d: s.time.XSHORT+20, u: s.time.XLONG, xy: xy.barracuda1 }, { a: 'text', l: 'art', e: "easeDown", d: s.time.MEDIUM*1.5, u: s.time.XLONG*1.8, xy: xy.text } ); const outDurationConst = 1.2; p.step.transition( // TRASH { a: 'bag', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.bag }, { a: 'banana', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.banana }, { a: 'barracuda#2', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.barracuda2 }, { a: 'downfish-white', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.shark },{ a: 'shark-white', l: 'art', p: "remove", e: "easeOutUp", s: 'with', u: s.time.MEDIUM*outDurationConst, xy: xy.shark }, { a: 'upfish-white', l: 'art', p: "remove", e: "easeOutUp", s: 'with', u: s.time.MEDIUM*outDurationConst, xy: xy.shark }, { a: 'downfish', l: 'art', p: "remove", e: "easeOutUp", u: s.time.MEDIUM*outDurationConst, xy: xy.shark },{ a: 'shark', l: 'art', p: "remove", e: "easeOutUp", s: 'with', u: s.time.MEDIUM*outDurationConst, xy: xy.shark },{ a: 'upfish', l: 'art', p: "remove", e: "easeOutUp", s: 'with', u: s.time.MEDIUM*outDurationConst, xy: xy.shark }, { a: 'orangepeel', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.orangepeel }, { a: 'cheese', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.cheese }, { a: 'crust', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.crust }, // FISH & TEXT // outlines { a: 'barracuda#1', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.barracuda1 }, { a: 'text', l: 'art', p: "remove", e: "easeOutUp", d: s.time.XSHORT, u: s.time.MEDIUM*outDurationConst, xy: xy.text }, { code: function(){ // buffer }, u: 500, s: "after", } ); p.destination.main = "[[2C]]";

// THE LONG EYE OF THE LAW AND THE ARM THAT FOLLOWS... p.art.path('ASSETS/2C/'); p.art.assets( ["text", "text.png"], { name: "whale", src: "whale.png", // classNames: ["anim-float-left-1"], type: "asset" }, // trashes { name: "bag", src: "bag.png", type: "asset" }, { name: "bubs", src: "bubs.png", classNames: ["anim-float-down-1"], type: "asset" }, { name: "bag-bubs-a", src: "bag-bubs-a.png", classNames: ["anim-float-down-2"], type: "asset" }, { name: "bag-bubs-b", src: "bag-bubs-b.png", classNames: ["anim-float-down-3"], type: "asset" }, { name: "chixleg", src: "chixleg.png", classNames: ["anim-float-down-2"], type: "asset" }, { name: "crust1", src: "crust2.png", classNames: ["anim-float-down-3"], type: "asset" }, { name: "crust2", src: "crust3.png", classNames: ["anim-float-down-1"], type: "asset" }, { name: "fish1", src: "fish1.png", classNames: ["anim-float-down-4"], type: "asset" }, ); p.art.layers('art'); const xy = { bag: [1074,352], bubs: [1030,343], chixleg: [1043,17], crust1: [931,59], crust2: [887,215], fish1: [1032,256], whale: [-599,-95], text: [903,139], } p.step.create( { a: 'whale', l: 'art', e: 'easeRightDown', u: 5000, xy: xy.whale }, { a: 'chixleg', l: 'art', e: 'easeDown', d: s.time.MEDIUM, u: s.time.XLONG, xy: xy.chixleg }, { a: 'crust1', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG, xy: xy.crust1 }, { a: 'text', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG, xy: xy.text }, enterSealayer("black-sea", 0, 0, true), { a: 'crust2', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG, xy: xy.crust2 }, { a: 'fish1', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG, xy: xy.fish1 }, { a: 'bag', l: 'art', e: 'easeDown', d: s.time.SHORT, u: s.time.XLONG, xy: xy.bag }, { a: 'bubs', l: 'art', e: 'easeUpSmall', d: s.time.MEDIUM, u: s.time.LONG, xy: xy.bubs }, { a: 'bag-bubs-a', l: 'art', e: 'easeUpSmall', d: s.time.XSHORT, u: s.time.LONG, s: 'with', xy: xy.bag }, { a: 'bag-bubs-b', l: 'art', e: 'easeUpSmall', d: s.time.XSHORT, u: s.time.LONG, xy: xy.bag }, ); p.step.transition( { a: 'whale', l: 'art', p: "remove", e: 'easeOutUp', u: 2200, xy: xy.whale }, { a: 'bag', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, exitSealayer("black-sea", 0, 3000, true), { a: 'bag-bubs-a', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'bag-bubs-b', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bag }, { a: 'bubs', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.bubs }, { a: 'fish1', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.fish1 }, { a: 'crust2', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.crust2 }, { a: 'text', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.text }, { a: 'crust1', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.crust1 }, { a: 'chixleg', l: 'art', p: "remove", e: 'easeOutUp', d: s.time.XSHORT, u: s.time.MEDIUM, xy: xy.chixleg }, ); p.destination.main = "[[2D]]";

// WOULD THAT MY MEMORIES COULD BE CAST INTO THE COLD EMBRACE OF THE DEEP p.art.path('ASSETS/2D/'); p.art.assets( ["bag", "../2C/bag.png"], ["text", "text.png"], { name: "bg-tile", src: "background-tile.png", classNames: ['bg-tile'], type: "asset" },{ name: "bg-mtn", src: "background-mountains.png", type: "asset" }, ["reartrash", "whalefall-reartrash.png"], ["fronttrash", "whalefall-fronttrash.png"], ["corpse", "whalefall.png"], { name: "lefteel", src: "whalefall-lefteel.png", classNames: ["anim-float-right-sm-1"], type: "asset" },{ name: "righteel", src: "whalefall-righteel.png", classNames: ["anim-float-right-sm-2"], type: "asset" }, { name: "credits", type: "text", classNames: ["credits", "modal"], text: story.render("CREDITS"), } ); /* css setup */ var bgSrc = p.art.getAsset('bg-tile').getSrc(); var mtnSrc = p.art.getAsset('bg-mtn').getSrc(); var styleRules = ( `.asset.bg-tile { background-image: url('${bgSrc}'); background-position: center; } .asset.bg-mtn { background-image: url('${mtnSrc}'); background-position: center; }`); var styleEl = document.createElement('style'); styleEl.id = "mtn-styles"; styleEl.textContent += styleRules; $('body').append(styleEl); p.art.layers("full-art", "art"); const bgDuration = 4500; const whaleDuration = 5000; const xy = { mountains: [-200,15], tile: [0,-6], whale: [-113,14], text: [350,35], } p.step.create( // trashes { a: 'bg-tile', l: 'full-art', e: "easeUp", u: bgDuration, xy: xy.tile }, { a: 'bg-mtn', l: 'art', e: "easeUp", u: bgDuration, xy: xy.mountains }, // whale & text { a: 'reartrash', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [0,15,0], position: [0,0,0] }), d: bgDuration*0.3, u: whaleDuration, xy: xy.whale, }, { a: 'lefteel', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [0,20,0], position: [0,0,0] }), u: whaleDuration+100, xy: xy.whale, }, { a: 'corpse', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [0,25,0], position: [0,0,0] }), u: whaleDuration, xy: xy.whale, }, { a: 'righteel', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [0,30,0], position: [0,0,0] }), u: whaleDuration, xy: xy.whale, }, { a: 'fronttrash', l: 'art', e: jinx.effects.extend("fadeIn", { fromPosition: [0,40,0], position: [0,0,0] }), u: whaleDuration, xy: xy.whale, }, { a: 'text', l: 'art', e: 'easeDownSmall', d: s.time.LONG*1.5, u: s.time.XLONG*1.8, xy: xy.text }, ); const outOfFrame = -750; const exitDuration = 6000; p.step.create( { a: 'bg-tile', l: 'full-art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame+50,0] }), d: 250, u: exitDuration, s: "after", xy: xy.tile, }, { a: 'bg-mtn', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame+50,0] }), u: exitDuration, xy: xy.mountains, }, { a: 'reartrash', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame+35,0] }), u: exitDuration, xy: xy.whale, }, { a: 'lefteel', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame+25,0] }), u: exitDuration, xy: xy.whale, }, { a: 'corpse', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame,0] }), u: exitDuration, xy: xy.whale, }, { a: 'righteel', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame-25,0] }), u: exitDuration, xy: xy.whale, }, { a: 'fronttrash', l: 'art', p: "effect", e: jinx.effects.extend("easeBoth", { fromPosition: [0,0,0], position: [0,outOfFrame-35,0] }), u: exitDuration, xy: xy.whale, }, { a: 'text', l: 'art', p: "effect", e: jinx.effects.extend('easeBoth', { fromPosition: [0,0,0], position: [0,outOfFrame-50,0] }), u: exitDuration, xy: xy.text, }, { a: "credits", l: "art", e: "easeUp", d: exitDuration/2, u: s.time.LONG, xy: [450,0] }, { s: "after", code: function() { jinx.wand.mode("panel"); jinx.wand.away(); s.GENERATE_TITLE_BUBBLES = true; creatingBubbles(); document.querySelector(".asset.credits").classList.add("active"); $(document).one("click", ".asset.credits.active #restart-story", function(){ $(document).trigger("jinx.panel.advance", p) }); } } ) const fadeAwayDuration = 1000; p.step.transition( { code: function(){ jinx.wand.mode("button"); }, s: "after", }, resetSealayer("red-clouds"), resetSealayer("pink-clouds"), resetSealayer("white-sea"), resetSealayer("pink-sea"), resetSealayer("red-sea"), resetSealayer("deep-sea"), { a: 'corpse', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, s: "after", }, { a: 'lefteel', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'righteel', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'reartrash', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'fronttrash', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'bg-tile', l: 'full-art', p: "effect", e: "fadeAway", u: fadeAwayDuration, d: fadeAwayDuration*0.4, }, { a: 'bg-mtn', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'text', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, }, { a: 'credits', l: 'art', p: "effect", e: "fadeAway", u: fadeAwayDuration, d: fadeAwayDuration*0.4 }, { code: function(){ const layer = document.getElementById("black-sea"); layer.classList.add("resetting"); window.setTimeout(function(){ layer.classList.remove("used"); layer.classList.remove("resetting"); }, 1000) }, u: 1000, s: "with", }, ); p.destination.to("1A");

<h1>CONDEMNED to the DEPTHS</h1> <a id="restart-story" href="javascript:void(0)">Play Again</a> <p>Written and drawn for Twine by Derek Timm-Brock with the Jinx engine. Released November 2019.</p> <p>Many thanks and much love to the patrons of Wizard Town for supporting the development of Jinx and this comic:</p> <p class="patrons"> <span class="patron">Ben Kicic</span> <span class="patron">Yung Hui</span> <span class="patron">Kellan Jett</span> <span class="patron">Brendan</span> <span class="patron">Craig Park</span> <span class="patron">Ian Isaboss</span> <span class="patron">David Brock</span> <span class="patron">Sam Fisher</span> <span class="patron">Steve Timm</span> <span class="patron">Paul Timm-Brock</span> <span class="patron">Barbara Timm-Brock</span> <span class="patron">Denny Post</span> </p> <p class="footer"> <a href="http://www.patreon.com/wizardtown">Support Wizard Town</a> <a href="http://www.wizard.town">More Comics</a> </p>

<div id="screensize-warn"> <div class="modal"> <h3>Warning!</h3> <p>CONDEMNED to the DEPTHS is an experience intended for large screens. Please resize your window, zoom out, or view this comic on a larger device.</p> <a id="accept-screensize" href="javascript:void(0)">Play Anyway</a> </div> </div>

<%$(function(){ story.show("1A"); // exitSealayer("black-sea").code(); })%>