// 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 class="fish-sprite-wrapper">
<div id="fish-sprite-left" class="fish-sprite">
</div>
<div id="fish-sprite-middle" class="fish-sprite">
</div>
<div id="fish-sprite-right" class="fish-sprite">
</div>
<div id="fish-sprite-far" class="fish-sprite">
</div>
</div>
<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>
<div id="sealayers">
<div id="red-clouds" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="pink-clouds" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="white-sea" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="pink-sea" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="red-sea" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="deep-sea" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
<div id="black-sea" class="sealayer">
<div class="head"></div>
<div class="body"></div>
</div>
</div>
<%$(function(){
story.show("1A");
// exitSealayer("black-sea").code();
})%>