30:Tdc7,// p5 setup method creator createSetupMethod = (p5, globals) => { return () => { p5.createCanvas(...canvasSize()); p5.textFont("sans-serif"); const urlPrefix = "https://blindedcyclops.neocities.org/GGJ2019/"; globals.assets = { fridge: p5.loadImage(`${urlPrefix}fridge.png`), laundryBasket: p5.loadImage(`${urlPrefix}bedroom_laundry_basket.png`), laundryPile: p5.loadImage(`${urlPrefix}bedroom_laundry_pile.png`), laundryOverlay: p5.loadImage(`${urlPrefix}bedroom_laundry_dirty_overlay.png`), bedroomShelf: p5.loadImage(`${urlPrefix}bedroom_shelf.png`), bed: p5.loadImage(`${urlPrefix}bedroom_bed.png`), pillow: p5.loadImage(`${urlPrefix}bedroom_pillow.png`), banana: p5.loadImage(`${urlPrefix}kitchen_fruits_banana.png`), pear: p5.loadImage(`${urlPrefix}kitchen_fruits_orange_pear.png`), fryingPan: p5.loadImage(`${urlPrefix}kitchen_frying_pan.png`), platesClean: p5.loadImage(`${urlPrefix}kitchen_plates_clean.png`), platesDirty: p5.loadImage(`${urlPrefix}kitchen_plates_dirty.png`), potWithHandle: p5.loadImage(`${urlPrefix}kitchen_pot_with_handle.png`), potWithLid: p5.loadImage(`${urlPrefix}kitchen_pot_with_lid.png`), countertop: p5.loadImage(`${urlPrefix}kitchen_countertop.png`), chairBack: p5.loadImage(`${urlPrefix}chair_back.png`), chairProfile: p5.loadImage(`${urlPrefix}chair_profile.png`), kitchenTable: p5.loadImage(`${urlPrefix}kitchen-table.png`), kitchenShelf: p5.loadImage(`${urlPrefix}kitchen-shelf.png`), cartonMilk: p5.loadImage(`${urlPrefix}kitchen_carton_milk.png`), cartonJuice: p5.loadImage(`${urlPrefix}kitchen_carton_juice.png`), foodCans: p5.loadImage(`${urlPrefix}kitchen_food_cans.png`), jar: p5.loadImage(`${urlPrefix}kitchen_jar.png`), kitchenSink: p5.loadImage(`${urlPrefix}kitchen_sink.png`), stoveOn: p5.loadImage(`${urlPrefix}kitchen_stove_on.png`), stoveOff: p5.loadImage(`${urlPrefix}kitchen_stove_off.png`), umbrella: p5.loadImage(`${urlPrefix}door_umbrella.png`), umbrellaStand: p5.loadImage(`${urlPrefix}door_umbrella_stand.png`), doorToilet: p5.loadImage(`${urlPrefix}door_wc.png`), coatRack: p5.loadImage(`${urlPrefix}door_coat_rack.png`), door: p5.loadImage(`${urlPrefix}door.png`), bag: p5.loadImage(`${urlPrefix}door_bag.png`), coat: p5.loadImage(`${urlPrefix}door_coat.png`), litterBox: p5.loadImage(`${urlPrefix}door_litterbox.png`), livingRoomPlant: p5.loadImage(`${urlPrefix}livingroom_plant.png`), gameconsole: p5.loadImage(`${urlPrefix}livingroom_gameconsole.png`), controller1: p5.loadImage(`${urlPrefix}livingroom_controller_towards.png`), controller2: p5.loadImage(`${urlPrefix}livingroom_controller_away.png`), television: p5.loadImage(`${urlPrefix}livingroom_tv.png`), audioPlayer: p5.loadImage(`${urlPrefix}livingroom_audio_player.png`), couch: p5.loadImage(`${urlPrefix}livingroom_couch.png`), gamePutAway: p5.loadImage(`${urlPrefix}game_putawa.png`), gameOpened: p5.loadImage(`${urlPrefix}game_opened.png`), coffeeTable: p5.loadImage(`${urlPrefix}table_coffee.png`), outsideView: p5.loadImage(`${urlPrefix}window.png`), trash: p5.loadImage(`${urlPrefix}trash_bags.png`), portrait: p5.loadImage(`${urlPrefix}portrait_frame.png`), wallpaper: p5.loadImage(`${urlPrefix}wallpaper.png`), floor: p5.loadImage(`${urlPrefix}floor.png`), }; }; }31:T1ea1,// generating the studio createStudio = (p5, gl) => { const createActivity = createActivityGenerator(p5, gl); gl.createActivity = createActivity; const scaleFactor = gl.baseHeight / p5.height; const backWall = gl.baseHeight * 4 / 5 // ========================== // === Studio object tree === // ========================== // == Entrance == const entrance = { id: "entrance", x: 0, y: 0, width: 1700, height: gl.baseHeight, background: p5.color(196, 72, 32, 128), onClick: noop, children: { frontDoor: { x: 50, y: backWall - gl.assets.door.height + 10, img: gl.assets.door, }, coat: { x: 130 + gl.assets.door.width, y: backWall - gl.assets.door.height + 155, img: gl.assets.coat, }, coatRack: { x: 70 + gl.assets.door.width, y: backWall - gl.assets.door.height + 80, img: gl.assets.coatRack, }, umbrellaStand: { x: 340 + gl.assets.door.width, y: backWall - gl.assets.umbrellaStand.height + 70, img: gl.assets.umbrellaStand, children: { umbrella: { x: 10, y: -gl.assets.umbrella.height + 40, img: gl.assets.umbrella, }, }, }, portrait: { x: 500 + gl.assets.door.width, y: backWall - gl.assets.coatRack.height + 120, img: gl.assets.portrait, }, trash: { x: 900 + gl.assets.door.width, y: backWall - gl.assets.trash.height + 100, img: gl.assets.trash, }, litterBox: { x: 620 + gl.assets.door.width, y: backWall - gl.assets.litterBox.height + 150, img: gl.assets.litterBox, }, } }; // == Living Room == const livingRoom = { id: "livingRoom", x: entrance.width, y: 0, width: 2000, height: gl.baseHeight, background: p5.color(256, 192, 64, 128), onClick: noop, children: { outsideView: { x: 300, y: backWall - gl.assets.outsideView.height - 500, img: gl.assets.outsideView, }, shelf: { x: 1300, y: backWall + 80 - gl.assets.kitchenShelf.height, img: gl.assets.kitchenShelf }, television: { x: 1350, y: backWall + 120 - gl.assets.kitchenShelf.height - gl.assets.television.height, img: gl.assets.television, }, gameconsole: { x: 1000 + (gl.assets.television.width - gl.assets.gameconsole.width)/2, y: backWall - 70, img: gl.assets.gameconsole, }, controller1: { x: 1000, y: backWall + 20, img: gl.assets.controller1, }, audioPlayer: { x: 1600, y: backWall, img: gl.assets.audioPlayer, }, couch: { x: 150, y: backWall + 200 - gl.assets.couch.height, img: gl.assets.couch, children: { controller2: { x: 400, y: 220, img: gl.assets.controller2, }, }, }, livingRoomPlant: { x: 50, y: backWall - gl.assets.livingRoomPlant.height + 80, img: gl.assets.livingRoomPlant, }, }, }; // == Bedroom == const laundryBasket = { id: "laundryBasket", x: 50, y: backWall + 100 - gl.assets.laundryBasket.height, img: gl.assets.laundryBasket, }; const bedroomShelf = createActivity({ id: "bedroomShelf", x: laundryBasket.x + gl.assets.laundryBasket.width - 20, y: backWall - gl.assets.bedroomShelf.height + 50, img: gl.assets.bedroomShelf, children: { bedroomPlant: { x: 420, y: 60 - gl.assets.livingRoomPlant.height, img: gl.assets.livingRoomPlant, }, }, }); const bed = { id: "bed", x: bedroomShelf.x + gl.assets.bedroomShelf.width + 30, y: backWall - gl.assets.bed.height + 200, img: gl.assets.bed, children: { pillow2: { x: 520, y: 130, img: gl.assets.pillow }, laundryOverlay: { x: 450, y: 250, img: gl.assets.laundryOverlay, }, laundryPile: { x: 200, y: 100, img: gl.assets.laundryPile, }, }, } const bedRoom = { id: "bedRoom", x: livingRoom.x + livingRoom.width, y: 0, width: 2100, height: gl.baseHeight, onClick: noop, background: p5.color(128, 160, 196, 128), children: { bed, bedroomShelf, laundryBasket, } } // == Bathroom == const bathRoom = { id: "bathRoom", x: bedRoom.x + bedRoom.width, y: 0, width: gl.assets.doorToilet.width + 100, height: gl.baseHeight, onClick: noop, background: p5.color(96, 32, 128, 128), children: { bathRoomDoor: { x: 50, y: backWall - gl.assets.doorToilet.height + 5, img: gl.assets.doorToilet, }, }, }; // == Kitchen == const fridge = { x: 1800 - gl.assets.fridge.width, y: backWall - gl.assets.fridge.height + 150, img: gl.assets.fridge, children: { foodCans: { x: 150, y: 20 -gl.assets.foodCans.height/2, img: gl.assets.foodCans, }, jar: { x: gl.assets.foodCans.width + 170, y: 20 - gl.assets.jar.height/2, img: gl.assets.jar, }, }, }; const sink = { x: 50, y: backWall - gl.assets.kitchenSink.height - 210, img: gl.assets.kitchenSink, }; const countertop = { x: sink.x + gl.assets.kitchenSink.width + 10, y: backWall - gl.assets.countertop.height + 70, img: gl.assets.countertop, children: { platesDirty: { x: 10 + gl.assets.stoveOff.width * 2, y: -45, img: gl.assets.platesDirty, }, stove: { x: 40, y: -55, img: gl.assets.stoveOff }, }, }; const kitchenShelf = { x: countertop.x + 50, y: 600, img: gl.assets.kitchenShelf, children: { fryingPan: { x: 150, y: 100, img: gl.assets.fryingPan }, potWithLid: { x: gl.assets.potWithHandle.width + 10, y: 65 - gl.assets.potWithLid.height, img: gl.assets.potWithLid, }, potWithHandle: { x: 20, y: 70 - gl.assets.potWithHandle.height, img: gl.assets.potWithHandle, }, kitchenPlant: { x: 380, y: 50 - gl.assets.livingRoomPlant.height, img: gl.assets.livingRoomPlant, }, }, }; const kitchenTable = { x: 900, y: backWall + 400 - gl.assets.kitchenTable.height, img: gl.assets.kitchenTable, children: { chairProfile: { x: 0 - gl.assets.chairProfile.width/2 - 50, y: gl.assets.kitchenTable.height - gl.assets.chairProfile.height - 30, img: gl.assets.chairProfile, }, pear: { x: 140, y: -30, img: gl.assets.pear, }, banana: { x: 280, y: 0, img: gl.assets.banana, }, chairBack: { x: (gl.assets.kitchenTable.width - gl.assets.chairBack.width + 200) / 2, y: gl.assets.kitchenTable.height - gl.assets.chairBack.height + 20, img: gl.assets.chairBack, }, } }; const kitchen = { id: "kitchen", x: bathRoom.x + bathRoom.width, y: 0, width: 1850, height: gl.baseHeight, onClick: noop, background: p5.color(256, 192, 128, 128), children: { sink, countertop, fridge, kitchenShelf, kitchenTable, } } // Generate studio from finished schema const studio = gl.createActivity({ id: "studio", x: 0, y: 0, scaleFactor, width: kitchen.x + kitchen.width, height: gl.baseHeight, children: { entrance, livingRoom, bedRoom, bathRoom, kitchen, }, draw: noop, onClick: noop, inBounds: noop, callback: noop, }); overrideStudio(studio, p5, gl); console.log({studio}); gl.studio = studio; gl.AT.printTree(studio); }32:Tb35,function overrideStudio(studio, p5, gl){ const backWall = gl.baseHeight * 4 / 5; // Override root methods studio.draw = () => { p5.scale(1/studio.scaleFactor); // draw floor for(let y = backWall; y < gl.baseHeight; y += gl.assets.floor.height) { for(let x = 0; x < studio.width; x += gl.assets.floor.width) { p5.image(gl.assets.floor, x-studio.x, y); p5.image(gl.assets.floor, x-studio.x+studio.width, y); } } p5.stroke(0); p5.strokeWeight(5); p5.line(0, backWall, p5.width*studio.scaleFactor, backWall); // draw wallpaper for(let y = backWall - gl.assets.wallpaper.height; y > -gl.assets.wallpaper.height; y -= gl.assets.wallpaper.height) { for(let x = 0; x < studio.width; x += gl.assets.wallpaper.width) { p5.image(gl.assets.wallpaper, x-studio.x, y); p5.image(gl.assets.wallpaper, x-studio.x+studio.width, y); } } // draw child objects const cl = studio._childrenList; for(let i = 0; i < cl.length; i++) { // tint wallpaper per sub-room p5.fill(cl[i].background); p5.rect(cl[i].x - studio.x, 0, cl[i].width, backWall); p5.rect(cl[i].x + studio.width - studio.x, 0, cl[i].width, backWall); } for(let i = 0; i < cl.length; i++) { // draw subroom objects gl.AT.draw(cl[i], -studio.x, 0); } // just draw twice to handle wrap-around (no time to optimize) for(let i = 0; i < cl.length; i++) { gl.AT.draw(cl[i], studio.width - studio.x, 0); } p5.scale(studio.scaleFactor); }; studio.onClick = (x, y) => { const cl = studio._childrenList; x = ((x * studio.scaleFactor + studio.width + studio.x) % studio.width); y *= studio.scaleFactor; for(let i = cl.length-1; i >= 0; i--) { if (gl.AT.onClick(cl[i], x, y)) return true; } return false; }; studio.move = (dx) => { studio.x = (studio.x + studio.width + dx) % studio.width; } const {laundryPile, laundryOverlay} = studio.children.bedRoom.children.bed.children; chain.inBounds(laundryPile, (pile, x, y, old) => {return !pile.state.pickedUp;}); wrap.draw(laundryPile, (pile, x, y, old) => { if (!pile.state.pickedUp) old(x,y); }); laundryPile.onClick = (x, y) => { if (!laundryPile.state.pickedUp && laundryPile.inBounds(x, y)) { laundryPile.state.pickedUp = true; laundryPile.callback(); return false; } return false; }; chain.inBounds(laundryOverlay, (pile, x, y, old) => {return !pile.state.pickedUp;}); wrap.draw(laundryOverlay, (pile, x, y, old) => { if (!pile.state.pickedUp) old(x,y); }); laundryOverlay.onClick = (x, y) => { if (!laundryOverlay.state.pickedUp && laundryOverlay.inBounds(x, y)) { laundryOverlay.state.pickedUp = true; laundryOverlay.callback(); return false; } return false; }; }33:T519,// Current Studio Structure studioStructure = { return { entrance: { frontDoor: null, coat: null, coatRack: null, umbrellaStand: { umbrella: null, }, portrait: null, litterBox: null, trash: null, }, livingRoom: { outsideView: null, shelf: null, boardgame: null, television: null, gameconsole: null, coffeeTable: { controller1: null, audioPlayer: null, }, couch: { controller2: null, }, livingRoomPlant: null, }, bedRoom: { laundryBasket: null, bedroomShelf: { bedroomPlant: null, }, bed: { sheets: null, laundryOverlay: null, pillow2: null, laundryPile: null, }, }, bathRoom: { bathRoomDoor: null, }, kitchen: { sink: null, countertop: { platesDirty: null, stove: null, }, kitchenTable: { chairProfile: null, pear: null, banana: null, chairBack: null, }, kitchenShelf: { fryingPan: null, potWithLid: null, potWithHandle: null, kitchenPlant: null, }, fridge: { foodCans: null, jar: null, } } }; }34:T734,createActivityGenerator = (p5, globals) => { const createFB = createFallbackGenerators(p5); globals.createFB = createFB; let autoId = 0; const baseActivity = { // Name id: "", // Position & size x: p5.width/2, y: p5.height/2, width: 100, height: 100, // propagate event capture? // Methods draw: null, inBounds: null, onClick: null, callback: null, }; function createActivity(schema) { // === Base activity + overrides // To set various states, do state[key] = true or state[key] = false const uniqueState = { state: {}, children: {}, _childrenList: [], propagate: { draw: true, inBounds: true, onClick: true, } }; let activity = Object.assign(uniqueState, baseActivity, schema); const childrenList = []; activity._childrenList = childrenList; if (activity.children) { // initiate once to reduce GC pressure when iterating later // remember to expand if children gets expanded during runtime (create function to do so) const {children} = activity; const entries = Object.entries(children); for (let i = 0; i < entries.length; i++) { const [key, childSchema] = entries[i]; childSchema.id = key; const childActivity = createActivity(childSchema); activity.children[key] = childActivity; childrenList.push(childActivity); } } // === Default Fallbacks === if(!activity.id) activity.id = `auto_id_${++autoId}`; if (!activity.draw) createFB.draw(activity); if (!activity.inBounds) createFB.inBounds(activity); if (!activity.callback) createFB.callback(activity); if (!activity.onClick) createFB.onClick(activity); return activity; }; return createActivity; }35:T79e,createFallbackGenerators = (p5) => { const draw = (activity) => { if (activity.img) { activity.draw = (x, y) => { p5.scale(1/activity.scaleFactor); p5.image(activity.img, x + activity.x, y + activity.y); p5.scale(activity.scaleFactor); }; } else { activity.draw = DEBUG ? (x, y) => { // debugging code p5.stroke(255); p5.strokeWeight(5); p5.fill(0, 255, 128, 64); x = (x || 0) + activity.x; y = (y || 0) + activity.y; p5.rect(x, y, activity.width, activity.height); p5.textSize(20); p5.fill(0); p5.textAlign(p5.LEFT, p5.BASELINE); p5.text(activity.id, x+5, y+25); } : noop; } }; const inBounds = (activity) => { if (activity.img) { // do hit-detection based on sprite transparency activity.inBounds = (x, y) => { x = Math.floor(x - activity.x); y = Math.floor(y - activity.y); const {img} = activity; return ( x >= 0 && x < img.width && y >= 0 && y < img.height && img.get(x|0, y|0)[3] !== 0 ); } } else { activity.inBounds = (x, y) => { return ( x >= activity.x && x < activity.x+activity.width && y >= activity.y && y < activity.y+activity.height ); }; } }; const callback = (activity) => { activity.callback = DEBUG ? () => { console.log({ activity, msg: `callback triggered, id: ${activity.id}` }); doorbell.play(); } : () => doorbell.play(); }; const onClick = (activity) => { activity.onClick = (x, y) => { if (activity.inBounds(x, y)) { activity.callback(); return true; } else { return false; } } }; return { draw, inBounds, onClick, callback, }; }36:Tfc4,AT = { const AT = {}; AT.draw = function draw(node, x, y) { if (node){ x = x || 0; y = y || 0; if (node.draw) node.draw(x, y); if (node.children && node.propagate && node.propagate.draw){ const cl = node._childrenList; // position of children is always relative to parent // + because we shift position where sprite is drawn x = x + node.x; y = y + node.y; // draw all children for(let i = 0; i < cl.length; i++) { AT.draw(cl[i], x, y); } } } }; AT.inBounds = function inBounds(node, x, y) { if (node){ // node is drawn behind their children, so first test children and bail early // for the same reason we walk the child list backwards if (node.children && node.propagate && node.propagate.inBounds){ const cl = node._childrenList; // position is always relative to parent // - because we set origin to (node.x, node.y) for(let i = cl.length - 1; i >= 0 ; i--) { if(AT.inBounds(cl[i], x - node.x, y - node.y)) return true; } } return node.inBounds && node.inBounds(x, y); } }; AT.onClick = function onClick(node, x, y) { if (node){ // node is drawn behind their children, so first test children and bail early // for the same reason we walk the child list backwards if (node.children && node.propagate && node.propagate.onClick){ const cl = node._childrenList; // position is always relative to parent // - because we set origin to (node.x, node.y) for(let i = cl.length - 1; i >= 0 ; i--) { if (AT.onClick(cl[i], x - node.x, y - node.y)) return true; } } return node.onClick && node.onClick(x, y); } }; AT.pureTree = function pureTree(node) { let tree = {}; if (node.children) { let entries = Object.entries(node.children); for(let i = 0; i < entries.length; i++) { const [key, child] = entries[i]; tree[key] = AT.pureTree(child); } } return tree; }; AT.set = function set(node, stateTree) { const entries = Object.entries(stateTree); for(let i = 0; i < entries.length; i++) { const [key, childState] = entries[i]; if (key === "state") { Object.assign(node.state, childState); } else { const child = node.children[key]; if (child) AT.set(child, childState); } } } // test if state in tree matches query AT.is = function is(node, query) { // if (!node || !node.children || !node.state) return false; console.log({node, query}); const entries = Object.entries(query); for(let i = 0; i < entries.length; i++) { const [key, childQuery] = entries[i]; const child = node.children[key]; if (key === "state") { // if key === "state", then childQuery is an array of arrays of strings, // each of which is a set of keys. If one of these arrays has all of its // keys set in node.state, this part of the query succeeds (boolean OR) const {state} = node; let conditionMet = !childQuery.length; for(let j = 0; j < childQuery.length && !conditionMet; j++) { const states = childQuery[j]; conditionMet = true; for (let k = 0; k < states.length && conditionMet; k++){ conditionMet = state[states[k]]; console.log(states[k] + " present in " + key); } } if (conditionMet) continue else return false; } else { // console.log({key, child, childQuery}); if (child && AT.is(child, childQuery)) { continue; } else if (!child) console.log({err: key + " not present", node}); } return false; } // if we didn't bail at any point, query succeeded return true; } AT.printTree = function printTree(node) { console.log(JSON.stringify(AT.pureTree(node))); }; return AT; }37:T475,testAT = { let testResults = {}; let exampleTree = { state: {}, children: { a: { state: { foo: true, bar: true, }, children: {}, }, b: { state: { i: true }, children: { pos: { state: { moved: false }, children: {}, x: 0, // should be ignored by AT.is and AT.set y: 0, }, }, }, }, }; const q_bMoved = { b: { state: [["i"]], pos: { state: [["moved"]] } } }; const set_bMoved = { b: { pos: { state: { moved: true } } } }; const set_bi = { b: { state: { i: false } } }; const didMove1 = AT.is(exampleTree, q_bMoved); // expected: false AT.set(exampleTree, set_bMoved); const didMove2 = AT.is(exampleTree, q_bMoved); // expected: true AT.set(exampleTree, set_bi); const didMove3 = AT.is(exampleTree, q_bMoved); // expected: false testResults.didMove1 = { result: didMove1, expected: false }; testResults.didMove2 = { result: didMove2, expected: true }; testResults.didMove3 = { result: didMove3, expected: false }; return testResults; }38:[] 2e:{"title":"Opening Up","cells":[{"id":0,"value":"md`# Opening Up\n\n### *Home is where people come over*\n\n---\n\nClick canvas or button to go fullscreen and start. *(unfinished - currently it's just a doorbell simulator)*\n\nMade during [Global Game Jam 2019](https://globalgamejam.org/2019/games/opening). Theme: *\"What home means to you\"*\n\n- Code: Job van der Zwan\n- Art Assets: Torsten Hansson & Jaffar Salih\n- Scenario Logic: Jasmin Salih *(sadly we didn't get to implement this in time :( )*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"createSketch(p5 => {\n const globals = {\n studio: null,\n createActivity: null,\n createFB: {}, // Fallback default creators for activities\n override: {}, // Easy override generators\n AT, // ActivityTree helper functions\n \n // global constants\n // assume portrait full HD as base height\n baseHeight: 1920,\n scaleFactor: 1,\n\n // global state\n dragged: false,\n dx: 0,\n assets: {},\n\n // \"global\" functions that depend on p5\n inCanvasBounds: (x, y) => (x >= 0 && x < p5.width && y >= 0 && y < p5.height),\n };\n \n p5.setup = createSetupMethod(p5, globals);\n \n p5.draw = createDrawMethod(p5, globals);\n\n // initiate game upon entering fullscreen\n p5.windowResized = createResizeMethod(p5, globals);\n\n p5.mouseDragged = createMouseDragged(p5, globals);\n \n p5.mouseReleased = createMouseReleased(p5, globals);\n}) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"fullscreen = {\n const button = html`