/*---GLOBAL VARIABLES---*/ const USE_HANDLE = true; const USE_SELF_FEEDBACK_EVENTS = true; const HORSE_NUMBER = 4; const HORSE_SIZE = 21; const HORSE_LINE_SIZE = 8; const BUBBLE_SIZE = 12; const MIN_TIME = 22; const MAX_TIME = 24; const raceStepData = [ { type: 'start', threshold: 0, thresholdType: '%', // %, timeFromStart, timeUntilEnd registerRankingUpdates: false, registerBeliefUpdates: false, maxDistanceToLeaderForWinBelief: 800 }, { type: 'race', threshold: 3, thresholdType: 'timeFromStart', // %, timeFromStart, timeUntilEnd registerRankingUpdates: true, registerBeliefUpdates: true, maxDistanceToLeaderForWinBelief: 100 }, { type: 'race', threshold: 0.33, thresholdType: '%', // %, timeFromStart, timeUntilEnd registerRankingUpdates: true, registerBeliefUpdates: true, maxDistanceToLeaderForWinBelief: 60 }, { type: 'race', threshold: 0.5, thresholdType: '%', // %, timeFromStart, timeUntilEnd registerRankingUpdates: true, registerBeliefUpdates: true, maxDistanceToLeaderForWinBelief: 50 }, { type: 'race', threshold: 0.66, thresholdType: '%', // %, timeFromStart, timeUntilEnd registerRankingUpdates: true, registerBeliefUpdates: true, maxDistanceToLeaderForWinBelief: 30 }, { type: 'race', threshold: 3, thresholdType: 'timeUntilEnd', // %, timeFromStart, timeUntilEnd registerRankingUpdates: false, registerBeliefUpdates: false, maxDistanceToLeaderForWinBelief: 20 }, { type: 'end', threshold: 1, thresholdType: '%', // %, timeFromStart, timeUntilEnd registerRankingUpdates: false, registerBeliefUpdates: false, maxDistanceToLeaderForWinBelief: 0 } ]; const emotions = { // HOPE and FEAR are the two baseline emotions before and during the race 'hope': { minTimeBetweenEvents: 1, maxTimeBetweenEvents: 8, }, 'fear': { minTimeBetweenEvents: 1, maxTimeBetweenEvents: 8, }, // SATISFACTION, FEARS-CONFIRMED, RELIEF, DISAPPOINTMENT are emotions triggered for a reaction // during the race (ranking update) or at the end of the race when the winner crosses the line 'satisfaction': { minTimeBetweenEvents: 2, maxTimeBetweenEvents: 5, }, 'fears-confirmed': { minTimeBetweenEvents: 2, maxTimeBetweenEvents: 5, }, 'relief': { minTimeBetweenEvents: 2, maxTimeBetweenEvents: 5, }, 'disappointment': { minTimeBetweenEvents: 2, maxTimeBetweenEvents: 5, }, } /*---END VARIABLES---*/ const colors = ['#F02C03', '#FF950C', '#D8C029', '#7CDA01', '#0D8DFF', '#B02FF7']; const colors_NPC = ['#052F5F', '#005377', '#06A77D', '#D5C67A', '#F1A208', '#F24207']; const trackLength = 800; const trackHeight = HORSE_SIZE * HORSE_NUMBER + HORSE_LINE_SIZE * (HORSE_NUMBER - 1); const center = new Point(CANVAS_WIDTH/2, CANVAS_HEIGHT/2 + 20); let t = 0; /////////////////////////////////////////// // FUNCTION USED TO GENERATE THE CURVES /// /////////////////////////////////////////// function trajectory(x, a, b, k1, k2, amp, freq) { const c = 1 - (a*(1 + (Math.exp(-k1)-1)/k1) + (b/k2)); return (a*(x + (Math.exp(-x*k1)-1)/k1) + (b/k2)*Math.pow(x, k2) + c*x) + (amp*Math.sin(2*Math.PI*x*freq)); } /////////////////////////////////////////// function progress(x, {a, b, k1, k2, amp, freq, time}) { return trackLength * trajectory(x * MAX_TIME/time , a, b, k1, k2, amp, freq); } /////////////////////////////////////////// //////// PRESETS RANDOM GENERATION //////// /////////////////////////////////////////// function randomInRange(min, max) { return min + Math.random() * (max - min); } function round(number, count = 3) { return +(Math.round(number + "e+" + count) + "e-" + count); } const presets = new Array(HORSE_NUMBER).fill({}); function setupPresets() { for (let i = 0; i < HORSE_NUMBER; i++) { presets[i] = { // set a and b to 0 for linear curve a: round(randomInRange(0.3, 0.8)), //0.3, 0.8 b: round(randomInRange(0, 0.4)), //0, 0.4 k1: Math.floor(randomInRange(5, 30)), //5, 30 k2: 1 + i % 6, amp: round(randomInRange(0, 0.032)), freq: i % 3, time: randomInRange(MIN_TIME, MAX_TIME) } } } /////////////////////////////////////////// const clamp = (vmin, vmax, v) => Math.max(vmin, Math.min(v, vmax)); const lerp = (x, y, a) => x * (1 - a) + y * a; const invlerp = (x, y, a) => clamp(0, 1,(a - x) / (y - x)); const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a)); function arrayEquals(a, b) { return Array.isArray(a) && Array.isArray(b) && a.length === b.length && a.every((val, index) => val === b[index]); } //////////////////////////////// //////// TIMELINE CLASS //////// //////////////////////////////// class RaceTimeline { constructor(height = 110, color = 'black') { this.paper = new Group(); setupPresets(); this.horses = []; this.winnerTime = 1000; this.winnerIndex = -1; for (let i = 0; i < HORSE_NUMBER; i++) { this.horses.push({ name: `horse-${i}`, preset: presets[i], color: colors[i], progress: 0, distanceToLeader: 0 }); if (presets[i].time < this.winnerTime) { this.winnerTime = presets[i].time; this.winnerIndex = i; } } this.horsesGroup = new Group(); this.ranking = [1, 2, 3, 4, 5, 6]; this.rankingUpdatesCount = 0; this.rankingGroup = new Group(); this.line = new Shape.Rectangle({ point: [0, 0], size: [trackLength, 0], strokeWidth: 2, strokeColor: color }); this.line.position.set([center.x, height]); this.raceGroup = new Group(); this.debugViewDistanceToLeader = new Shape.Rectangle({ point: [20, 20], size: [0, 60], fillColor: '#DDDDDD' }); this.debugViewDistanceToLeader.sendToBack(); this.paper.addChildren([this.debugViewDistanceToLeader, this.raceGroup, this.horsesGroup, this.rankingGroup, this.line]); this.thresholdUpdatesGroup = new Group(); this.rankingUpdatesGroup = new Group(); this.paper.addChildren([this.thresholdUpdatesGroup, this.rankingUpdatesGroup]); this.spectators = [ new NPC("Spectator 1", 0, colors_NPC[0], 20), new NPC("Spectator 2", 1, colors_NPC[1], 40), new NPC("Spectator 3", 2, colors_NPC[2], 60), new NPC("Spectator 4", 3, colors_NPC[3], 80) ]; this.spectators[0].setup(new Point(100, 450)); this.spectators[1].setup(new Point(320, 450)); this.spectators[2].setup(new Point(540, 450)); this.spectators[3].setup(new Point(760, 450)); } setup() { this.setupThresholdUpdates(); setupRaceInGroup(this.raceGroup); setupDynamicRanking(this.rankingGroup); setupHorsesInGroup(this.horsesGroup); this.debugViewDistanceToLeader.size.height = this.raceGroup.children[1].bounds.height; this.debugViewDistanceToLeader.position = this.raceGroup.children[1].position; } getRaceStepThresholdNormalized(i) { let pos = 0; switch (raceStepData[i].thresholdType) { case '%': pos = raceStepData[i].threshold*(this.winnerTime/MAX_TIME); break; case 'timeFromStart': pos = raceStepData[i].threshold/MAX_TIME; break; case 'timeUntilEnd': pos = (this.winnerTime - raceStepData[i].threshold)/MAX_TIME; break; default: break; } return pos; } setupThresholdUpdates() { for (let i = 0; i < raceStepData.length; i++) { const rect = new Shape.Rectangle({ point: [0, 0], size: [3, 24], fillColor: "red", strokeColor: 'black' }); const pos = this.getRaceStepThresholdNormalized(i); rect.position = this.line.position + new Point((pos-0.5)*trackLength, 0); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [100, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-50, -36] }); descriptorRect.position = rect.position; descriptorGroup.addChildren([descriptorRect]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.thresholdUpdatesGroup.addChild(rect); } } setHorseProgress(horseIndex, x) { this.horses[horseIndex].progress = progress(x, this.horses[horseIndex].preset); } addRankingUpdate(x = 0.5, oldRanking = [0, 1, 2, 3, 4, 5], newRanking = [5, 4, 3, 2, 1, 0]) { const rect = new Shape.Rectangle({ point: [0, 0], size: [6, 15], fillColor: "orange", strokeColor: 'black' }); rect.position = this.line.position + new Point((x*(1/1)-0.5)*trackLength, 0); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [100, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-50, -28] }); descriptorRect.position = rect.position; const title = new PointText({ point: [0, 0], content: 'Ranking update', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 12 }); title.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 12); const oldRankingText = new PointText({ point: [0, 0], content: oldRanking, fillColor: 'red', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); oldRankingText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 28); const newRankingText = new PointText({ point: [0, 0], content: newRanking, fillColor: 'green', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); newRankingText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 42); descriptorGroup.addChildren([descriptorRect, title, oldRankingText, newRankingText]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.rankingUpdatesGroup.addChild(rect); } updateHorsesPositionsAndRanking(x) { const horsePositions = []; for (let i = 0; i < HORSE_NUMBER; i++) { this.setHorseProgress(i, x); this.horsesGroup.children[i].position.x = center.x - trackLength/2 + this.horses[i].progress; horsePositions.push({index: i, position: this.horses[i].progress}); } horsePositions.sort((a, b) => b.position - a.position); for (let i = 0; i < HORSE_NUMBER; i++) { const idx = horsePositions[i].index; this.rankingGroup.children[`horse-${idx}`].position.x = rankingOffset + BUBBLE_SIZE*(1+2.5*i); } const tmpArray = []; for (let i = 0; i < HORSE_NUMBER; i++) { tmpArray.push(horsePositions[i].index+1); } return tmpArray; } getCurrentRaceStepIndex(x) { let k = 0; for (let i = 1; i < raceStepData.length; i++) { if (x < this.getRaceStepThresholdNormalized(i)) { break; } k = i; } return k; } getMaxDistanceToLeader(x, raceStepIndex) { const leaderProgress = this.horses[this.ranking[0]-1].progress; if (raceStepIndex == raceStepData.length - 1) { const maxDistToLeader = raceStepData[raceStepIndex].maxDistanceToLeaderForWinBelief; return Math.min(leaderProgress, maxDistToLeader); } const dist0 = raceStepData[raceStepIndex].maxDistanceToLeaderForWinBelief; const dist1 = raceStepData[raceStepIndex+1].maxDistanceToLeaderForWinBelief; const x0 = this.getRaceStepThresholdNormalized(raceStepIndex); const x1 = this.getRaceStepThresholdNormalized(raceStepIndex+1); const dist = lerp(dist0, dist1, (x - x0)/(x1 - x0)); return Math.min(leaderProgress, dist); } update(x) { const raceStepIndex = this.getCurrentRaceStepIndex(x); const newRanking = this.updateHorsesPositionsAndRanking(x); let rankingWasUpdated = false; if (!arrayEquals(this.ranking, newRanking) && ( raceStepData[raceStepIndex].registerRankingUpdates || (raceStepData[raceStepIndex].type != 'start' && Math.abs(x - this.getRaceStepThresholdNormalized(raceStepIndex)) < 0.01) ) ) { this.addRankingUpdate(x, this.ranking, newRanking); this.ranking = [...newRanking]; this.rankingUpdatesCount += 1; rankingWasUpdated = this.rankingUpdatesCount > 1 ? true : false; } const horsesDistancesToLeader = []; for (let i = 0; i < HORSE_NUMBER; i++) { horsesDistancesToLeader.push(Math.abs(this.horses[this.ranking[0]-1].progress - this.horses[i].progress)); } const dist = this.getMaxDistanceToLeader(x, raceStepIndex); for (let i = 0; i < this.spectators.length; i++) { this.spectators[i].update(x, raceStepIndex, this.ranking, horsesDistancesToLeader, dist, rankingWasUpdated); } // Update of debug max distance to leader this.debugViewDistanceToLeader.size.width = dist; this.debugViewDistanceToLeader.position.x = this.horsesGroup.children[this.ranking[0]-1].position.x - this.debugViewDistanceToLeader.bounds.width/2; } reset() { this.updateHorsesPositionsAndRanking(0); this.rankingUpdatesGroup.removeChildren(); for (let i = 0; i < this.spectators.length; i++) { this.spectators[i].reset(); } } } class NPCTimeline { constructor(height = 100, color = 'black') { this.color = color; this.paper = new Group(); this.line = new Shape.Rectangle({ point: [0, 0], size: [trackLength, 0], strokeWidth: 2, strokeColor: this.color }); this.line.position.set([center.x, height]); this.paper.addChild(this.line); this.rankingUpdatesGroup = new Group(); this.paper.addChild(this.rankingUpdatesGroup); } addEmotionalTransition(x = 0.5, oldEmotion = "debug", newEmotion = "debug") { const rect = new Shape.Rectangle({ point: [0, 0], size: [12, 12], fillColor: "darkorange" }); rect.position = this.line.position + new Point((x-0.5)*trackLength, 0); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [100, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-50, -28] }); descriptorRect.position = rect.position; const title = new PointText({ point: [0, 0], content: 'Emotion update', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 12 }); title.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 12); const oldEmotionText = new PointText({ point: [0, 0], content: oldEmotion, fillColor: 'red', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); oldEmotionText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 28); const newEmotionText = new PointText({ point: [0, 0], content: newEmotion, fillColor: 'green', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); newEmotionText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 42); descriptorGroup.addChildren([descriptorRect, title, oldEmotionText, newEmotionText]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.rankingUpdatesGroup.addChild(rect); } addEmotionalEvent(x = 0.25, emotion = "debug", type = "reaction") { const rect = new Shape.Circle({ center: [0, 0], radius: 6, fillColor: type == "reaction" ? "orange" : "seagreen" }); rect.position = this.line.position + new Point((x-0.5)*trackLength, 0); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [100, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-50, -28] }); descriptorRect.position = rect.position; const title = new PointText({ point: [0, 0], content: 'Emotion event', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 12 }); title.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 12); const emotionText = new PointText({ point: [0, 0], content: emotion, fillColor: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); emotionText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 28); descriptorGroup.addChildren([descriptorRect, title, emotionText]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.rankingUpdatesGroup.addChild(rect); } addAbortedEmotionalEvent(x = 0.25, emotion = "debug") { const rect = new Shape.Circle({ center: [0, 0], radius: 4, fillColor: "red" }); rect.position = this.line.position + new Point((x-0.5)*trackLength, 0); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [100, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-50, -28] }); descriptorRect.position = rect.position; const title = new PointText({ point: [0, 0], content: 'Emotion event', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 12 }); title.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 12); const emotionText = new PointText({ point: [0, 0], content: emotion, fillColor: 'blue', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); emotionText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 28); const abortedText = new PointText({ point: [0, 0], content: "aborted!", fillColor: 'red', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); abortedText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 42); descriptorGroup.addChildren([descriptorRect, title, emotionText, abortedText]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.rankingUpdatesGroup.addChild(rect); } addBeliefUpdate(x = 0.75, oldBelief, newBelief) { const rect = new Path({ segments: [[0, -8], [8, 5], [-8, 5]], closed: true, fillColor: "deepblue" }); rect.position = this.line.position + new Point((x-0.5)*trackLength, 5); const descriptorGroup = new Group(); const descriptorRect = new Shape.Rectangle({ point: [0, 0], size: [120, 56], fillColor: "#eeeeee", strokeColor: "grey", strokeWidth: 1, pivot: [-60, -28] }); descriptorRect.position = rect.position; const title = new PointText({ point: [0, 0], content: 'Belief update', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 12 }); title.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 12); const oldBeliefText = new PointText({ point: [0, 0], content: oldBelief, fillColor: 'red', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); oldBeliefText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 28); const newBeliefText = new PointText({ point: [0, 0], content: newBelief, fillColor: 'green', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 12 }); newBeliefText.position = descriptorRect.position + new Point(descriptorRect.bounds.width/2, 42); descriptorGroup.addChildren([descriptorRect, title, oldBeliefText, newBeliefText]); descriptorGroup.visible = false; rect.onMouseEnter = function(event) { descriptorGroup.visible = true; } rect.onMouseLeave = function(event) { descriptorGroup.visible = false; } this.rankingUpdatesGroup.addChild(rect); } reset() { this.rankingUpdatesGroup.removeChildren(); } } /////////////////////////// //////// NPC CLASS //////// /////////////////////////// class NPC { constructor(name, horseIndex, color = new Color.random(), timelineHeight = 50) { this.color = color; this.name = name; this.horseIndex = horseIndex; this.horseRanking = 0; this.emotion = "hope"; this.belief = "might"; this.desire = "Win credits"; this.intention = `Bet on H${this.horseIndex+1}`; this.timeline = new NPCTimeline(timelineHeight, this.color); this.timeLastEmotionTransition = 1000; this.timeLastEmotionEvent = 1000; this.timeNextEmotionEvent = 1000; this.paper = new Group(); } setup(position = new Point(0, 0)) { const circle = new Shape.Circle({ center: [-14, -5], radius: 8, fillColor: this.color }); const nameText = new PointText({ point: [0, 0], content: this.name, fillColor: this.color, fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 14 }); const desireText = new PointText({ point: [0, 18], content: `Desire: ${this.desire}`, fillColor: '#404040', fontFamily: 'Segoe UI', fontSize: 14 }); const intentionText = new PointText({ point: [0, 36], content: `Intention: ${this.intention}`, fillColor: '#404040', fontFamily: 'Segoe UI', fontSize: 14 }); const beliefText = new PointText({ point: [0, 54], content: `Belief: H${this.horseIndex+1} ${this.belief} win (Rank: ${this.horseRanking+1})`, fillColor: '#404040', fontFamily: 'Segoe UI', fontSize: 14, name: 'belief' }); const emotionText = new PointText({ point: [0, 72], content: `Emotion: ${this.emotion}`, fillColor: '#404040', fontFamily: 'Segoe UI', fontSize: 14, name: 'emotion' }); this.paper.addChildren([circle, nameText, desireText, intentionText, beliefText, emotionText]); this.paper.pivot = new Point(0, 0); this.paper.position = position; } updateBelief(x, newBelief) { this.timeline.addBeliefUpdate(x, `F${this.horseIndex+1} ${this.belief} win`, `F${this.horseIndex+1} ${newBelief} win`); this.belief = newBelief; this.paper.children['belief'].content = `Belief: H${this.horseIndex+1} ${this.belief} win (${this.horseRanking})`; } updateEmotion(x, newEmotion) { this.timeline.addEmotionalTransition(x , this.emotion, newEmotion); this.emotion = newEmotion; this.paper.children['emotion'].content = `Emotion: ${this.emotion}`; } requestEmotionEvent(x, emotion) { if (emotion == this.emotion) { this.timeline.addEmotionalEvent(x, emotion, "reminder"); } else { this.timeline.addEmotionalEvent(x, emotion); } } computeBelief(raceStepIndex = 0, horseRanking = [], horsesDistancesToLeader = [], currentMaxDistanceToLeader = 100) { // will = first of the race // will not = last of the race // might = under the threshold distance, distance to first is shrinking? // might not = over the threshold distance, distance to second is shrinking?, ranking down? // is // is not /* if (!raceStepData[raceStepIndex].registerRankingUpdates) { return this.belief; } */ if (raceStepData[raceStepIndex].type == 'end') { if (horseRanking[0]-1 == this.horseIndex) { return "is"; } else { return "is not"; } } if (raceStepData[raceStepIndex].type == 'race') { if (horsesDistancesToLeader[this.horseIndex] < currentMaxDistanceToLeader) { return "might"; } else { return "might not"; } } return this.belief; } computeEmotion(oldBelief, newBelief) { if (oldBelief == "might" && newBelief == "might not") { return "fear"; } if (oldBelief == "might not" && newBelief == "might") { return "hope"; } // END OF RACE EMOTION if (oldBelief == "might" && newBelief == "is") { return "satisfaction"; } if (oldBelief == "might not" && newBelief == "is") { return "relief"; } if (oldBelief == "might" && newBelief == "is not") { return "disappointment"; } if (oldBelief == "might not" && newBelief == "is not") { return "fears-confirmed"; } } computeEmotionEvent(previousRanking, newRanking) { if (this.emotion == 'hope' && previousRanking > newRanking) { // new ranking is better return 'satisfaction'; } if (this.emotion == 'hope' && previousRanking < newRanking) { // new ranking is worse return 'disappointment'; } if (this.emotion == 'fear' && previousRanking > newRanking) { // new ranking is better return 'relief'; } if (this.emotion == 'fear' && previousRanking < newRanking) { // new ranking is worse return 'fears-confirmed'; } return null; } setNextEmotionEventTimeAtRandom(fromTime = 0) { const min = emotions[this.emotion].minTimeBetweenEvents; const max = emotions[this.emotion].maxTimeBetweenEvents; this.timeNextEmotionEvent = fromTime + randomInRange(min, max); } update(x = 0, raceStepIndex = 0, horsesRanking = [], horsesDistancesToLeader = [], currentMaxDistanceToLeader = 100, rankingWasUpdated = false) { const time = x * MAX_TIME; // Start event at start if (raceStepData[raceStepIndex].type == 'start' && time < 0.1) { this.requestEmotionEvent(0, "start"); this.timeLastEmotionEvent = 0; this.setNextEmotionEventTimeAtRandom(time); } // Update belief // Fi will/might/might not/will not win const belief = this.computeBelief(raceStepIndex, horsesRanking, horsesDistancesToLeader, currentMaxDistanceToLeader); const emotionMinUpdateTime = emotions[this.emotion].minTimeBetweenEvents; if (belief != this.belief) { const emotion = this.computeEmotion(this.belief, belief); this.updateBelief(x, belief); // Force emotion update at the end if (emotion != this.emotion && raceStepData[raceStepIndex].type == 'end') { this.updateEmotion(x, emotion); } // Minimal timer before a emotional transition if (emotion != this.emotion && Math.abs(this.timeLastEmotionTransition - time) > emotionMinUpdateTime) { this.updateEmotion(x, emotion); this.timeLastEmotionTransition = time; } } if (rankingWasUpdated) { for (let i = 0; i < horsesRanking.length; i ++) { if (horsesRanking[i] - 1 == this.horseIndex && i != this.horseRanking) { const emotionEvent = this.computeEmotionEvent(this.horseRanking, i); this.horseRanking = i; if (emotionEvent != null) { if (Math.abs(this.timeLastEmotionEvent - time) > emotionMinUpdateTime) { this.requestEmotionEvent(x, emotionEvent); this.timeLastEmotionEvent = time; } else { this.timeline.addAbortedEmotionalEvent(x, emotionEvent); } } } } } // Random timer between emotional events if (time > this.timeNextEmotionEvent && USE_SELF_FEEDBACK_EVENTS) { if (Math.abs(this.timeLastEmotionEvent - time) > emotionMinUpdateTime) { this.requestEmotionEvent(x, this.emotion); this.timeLastEmotionEvent = time; } else { this.timeline.addAbortedEmotionalEvent(x, this.emotion); } this.setNextEmotionEventTimeAtRandom(time); } } reset() { this.timeline.reset(); this.belief = "might"; this.horseRanking = 0; this.paper.children['belief'].content = `Belief: H${this.horseIndex+1} ${this.belief} win (${this.horseRanking})`; this.emotion = Math.random() < 0.5 ? "hope" : "fear"; this.paper.children['emotion'].content = `Emotion: ${this.emotion}`; } } //////////////////////////// //////// RACE SETUP //////// //////////////////////////// function setupRaceInGroup(group = new Group()) { const path = new Path({ segments: [[center.x - trackLength/2, center.y], [center.x + trackLength/2, center.y]], strokeColor: 'black', strokeWidth: 8, }); const start = new Path({ segments: [[center.x - trackLength/2 + 1, center.y], [center.x - trackLength/2 + 1, center.y - trackHeight]], strokeColor: 'black', strokeWidth: 2 }); const end = new Path({ segments: [[center.x + trackLength/2 - 1, center.y], [center.x + trackLength/2 - 1, center.y - trackHeight]], strokeColor: 'black', strokeWidth: 2 }); group.addChildren([path, start, end]); } function drawHorseBubbleInGroup(group, idx) { const text = new PointText({ point: [0, 0], content: idx+1, fillColor: colors[idx], fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: HORSE_SIZE, }); text.position.set([0, 0]); const shape = new Shape.Circle({ center: [0, 0], radius: BUBBLE_SIZE, strokeColor: 'black', fillColor: 'white' }); group.addChildren([shape, text]); } function setupHorsesInGroup(group) { for (let i = 0; i < HORSE_NUMBER; i++) { const drawGroup = new Group(); drawGroup.name = `horse-${i}`; drawHorseBubbleInGroup(drawGroup, i); drawGroup.position.set([center.x - trackLength/2, center.y - i * (HORSE_SIZE + HORSE_LINE_SIZE) - 12]); group.addChild(drawGroup); } } let rankingOffset = 0; function setupDynamicRanking(group) { const text = new PointText({ point: [0, 0], content: 'Ranking: ', fillColor: 'black', fontFamily: 'Segoe UI', fontWeight: 'bold', fontSize: 16 }); text.position.set([center.x - trackLength/2 + text.bounds.width/2 - 10, center.y + 80]); group.addChild(text); rankingOffset = text.position.x + text.bounds.width/2; for (let i = 0; i < HORSE_NUMBER; i++) { const drawGroup = new Group(); drawGroup.name = `horse-${i}`; drawHorseBubbleInGroup(drawGroup, i); drawGroup.position.set([text.position.x + text.bounds.width/2 + BUBBLE_SIZE*(1+2.5*i), center.y + 80]); group.addChild(drawGroup); } } //setupRace(); const timeline = new RaceTimeline(); timeline.setup(); function updateLoop(x) { timeline.update(x); } function resetAll() { timeline.reset(); } if (USE_HANDLE) { const BORDER_WIDTH = trackLength; const border = new Shape.Rectangle({ point: center - [BORDER_WIDTH/2, -30], size: [BORDER_WIDTH, 0], strokeColor: "black", strokeWidth: 2, opacity: 0.75 }); const timeHandle = new PointText({ point: [0, 0], content: '0.0', fillColor: 'black', fontFamily: 'Segoe UI', fontSize: 18, justification: 'left' }); timeHandle.pivot = timeHandle.position - new Point(timeHandle.bounds.width/2, 0); timeHandle.position = border.bounds.center - [trackLength/2 + 50, 0]; const handle = new Shape.Circle({ center: border.bounds.center - [trackLength/2, 0], radius: 10, fillColor: "black", opacity: 0.75 }); handle.onMouseEnter = function(event) { this.opacity = 1; } handle.onMouseLeave = function(event) { this.opacity = 0.75; } handle.onMouseDown = function(event) { this.selected = true; } handle.onMouseUp = function(event) { this.selected = false; } handle.onMouseDrag = function(event) { this.position.x += Math.max(0, event.delta.x); this.position.x = clamp(center.x - BORDER_WIDTH/2, center.x + BORDER_WIDTH/2, this.position.x); const val = (this.position.x - (center.x - BORDER_WIDTH/2))/(BORDER_WIDTH); timeHandle.content = round(val*MAX_TIME, 1); updateLoop(val); } const resetButton = new Shape.Circle({ center: border.bounds.center + [trackLength/2 + 50, 0], radius: 16, fillColor: "red", opacity: 0.6 }); resetButton.onMouseEnter = function(event) { this.opacity = 0.8; } resetButton.onMouseLeave = function(event) { this.opacity = 0.6; } resetButton.onMouseDown = function(event) { this.opacity = 1; } resetButton.onMouseUp = function(event) { this.opacity = 0.6; } resetButton.onClick = function(event) { // reset stuff resetAll(); timeHandle.content = '0.0'; handle.position.x = center.x - BORDER_WIDTH/2; } }