Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Chroma
ID	5253213609181184
Created	8 months ago, 1713266210505
Updated	8 months ago, 1713266265753
Code	var SCORE_CHECK_AMOUNTS = [300, 1000, 3000, 6000, 10000]; var TURNS_PER_CHECK = 10; var PIECE_TYPES_CHANCES = [15, 40]; // 1 shape, 2 shapes var SEAL_CHANCE = 0.16; var CHROMA_CHANCE = 0.09; var BG_COLOR = 25; var DARK_COLOR = 12; var LIGHT_COLOR = 230; var GRID_COLOR = 150; var BUTTON_GLOW_SPEED = 0.05; var FLYER_UNSELECTED_SCALING = 0.8; var FLYER_SCALING_SPEED = 0.05; var FLYER_MOVE_SPEED = 0.2; var FLYER_ROTATE_SPEED = 10; var CLEAR_DELAY = 10; var UPGRADE_DELAY = 40; var FLASHER_SPEED = 0.06; var CLEAR_RESULT_DURATION = 80; var TEXT_SHRINK_SPEED = 0.15; var GAME_MESSAGE_DURATION = 120; var GMAD = 20; // game message animation duration // GRID var SEAL_SIZE = 25; var SCALER = 42; // grid scale var SHAPE_SIZE = 85; var PLACEABLE_DIAMETER = 20; var CORES = []; var GRID_LINES = []; var PLUS_DOTS = []; var PORTAL_LINES; // {line, shape, isActive} var activePortalLines = []; // for render // TEXTURE var NOISE_SCALE = 0.012; var IMAGES_AMOUNT = 3; var SHAPES_COLORS_NAMES = ["GREEN", "ORANGE", "BLUE", "PINK"]; var SHAPES_COLORS = [ // green [ [138, 242, 34], [30, 100, 23], ], // orange [ [255, 212, 92], [145, 77, 25], ], // blue [ [110, 210, 255], [31, 77, 156], ], // pink [ [255, 150, 255], [145, 25, 100], ], ]; // CONTROLS var sounds = {}; var ALL_SQUARES = []; var ALL_TRIANGLES = []; var ALL_SHAPES; var scene = "START"; // START / PLAY / END var touchCountdown = 0; var startTime = 0; var totalScore = 0; var totalAdded = 0; var multiplier = 2.0; var adder = 0; var temporaryAdder = 0; var scoreCheckIndex = 0; var animations = { resultDelay: 0, scoreCheckCountDown: 0, scoreScaler: 1, adderScaler: 1, multScaler: 1, // 2 }; var TEXTURE_LOADER, PLAY_SCENE, TUTORIAL, SCENE_TRANSITION, START_SCENE; function checkShape(){} function generatePiece(){} function generatePieceFlyer(){} function generatePlaceables(){} function getLine(){} function initializeGridData(){} function _playSound(){} size(600, 600, P2D); var Btn = (function () { // customRender: null \|\| function(x, y) function Btn(x, y, w, h, customRender, clicked) { var _this = this; this.x = x; this.y = y; this.w = w; this.h = h; this.customRender = customRender; this.clicked = function () { _this.glow = 1; _playSound(sounds.buttonClicked, 4); clicked(); }; this.glow = 1; // 0 to 1 this.isHovered = false; } Btn.prototype.render = function () { if (this.customRender) {this.customRender(this.x, this.y);} // check hover if (SCENE_TRANSITION.nextScene === null && mouseX > this.x - this.w / 2 && mouseX < this.x + this.w / 2 && mouseY > this.y - this.h / 2 && mouseY < this.y + this.h / 2) { if (!this.isHovered) { this.glow = 1; // glow up on initial hover } else { this.glow = max(0.2, this.glow - BUTTON_GLOW_SPEED); // hovered glow level } this.isHovered = true; cursor(HAND); } else { // not hovered this.isHovered = false; this.glow = max(0, this.glow - BUTTON_GLOW_SPEED); } // draw button frame strokeWeight(this.glow * 10 + 2); fill(255, this.glow * 110); stroke(LIGHT_COLOR); rect(this.x, this.y, this.w, this.h, 8); }; return Btn; }()); // orientation for each of the 6 shapes in a core var GRID_ORI = [0, 60, 30, 90, 60, 30]; function easeOutElastic(x) { var c4 = (2 * Math.PI) / 3; return x === 0 ? 0 : x === 1 ? 1 : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1; } function shapeIsSquare(shape) { // below index 4 is triangle return shape.shapeIndex >= 4; } function randomInt(start, end) { return Math.floor(Math.random() * end + start); } function getRandomItem(arr) { return arr[randomInt(0, arr.length)]; } function nsi(n) { // normalize square index while (n < 0) {n += 4;} while (n >= 4) {n -= 4;} return n; } // code from https://stackoverflow.com/a/34474547 function lineIsHovered(point1, point2) { var dxL = point2[0] - point1[0]; var dyL = point2[1] - point1[1]; var dxP = mouseX - point1[0]; var dyP = mouseY - point1[1]; var squareLen = dxL * dxL + dyL * dyL; var dotProd = dxP * dxL + dyP * dyL; var crossProd = dyP * dxL - dxP * dyL; var distance = Math.abs(crossProd) / Math.sqrt(squareLen); return dotProd >= 0 && dotProd <= squareLen && distance < 7; // line width here } function getShapeColor(colorIndex, shadeIndex) { var c = SHAPES_COLORS[colorIndex][shadeIndex]; return color(c[0], c[1], c[2]); } function newRenderData(isSquare, colorIndex) { if (typeof colorIndex !== "number") {colorIndex = randomInt(0, 4);} var randomNum = random(); var special = "NONE"; if (scoreCheckIndex > 0 \|\| PLAY_SCENE.turnsLeft < TURNS_PER_CHECK) { if (randomNum < SEAL_CHANCE) {special = "X";} else if (randomNum < SEAL_CHANCE + CHROMA_CHANCE) {special = "CHROMA";} } return { imgNeg: isSquare ? TEXTURE_LOADER.negativeImages.square : TEXTURE_LOADER.negativeImages.triangle, img: getRandomItem((isSquare ? TEXTURE_LOADER.squareImages : TEXTURE_LOADER.triangleImages)[colorIndex]), textureOri: isSquare ? randomInt(0, 4) * 90 : randomInt(0, 3) * 120, colorIndex: colorIndex, special: special, isSquare: isSquare, }; } function getPortalLine(index) { var realIndex = index; if (index < 0) { realIndex = index + PORTAL_LINES.length; } else if (index >= PORTAL_LINES.length) { realIndex = index - PORTAL_LINES.length; } return PORTAL_LINES[realIndex]; } var tooltip = { isShown: false, progress: 0, content: "", bgSize: [0, 0], set: function (content, bgSize) { tooltip.isShown = true; tooltip.content = content; tooltip.bgSize = bgSize; }, render: function () { if (this.isShown) { this.progress = min(1, this.progress + 0.1); } else { this.progress = max(0, this.progress - 0.1); } if (this.progress > 0) { var yValue = mouseY + 30; var xValue = constrain(mouseX, this.bgSize[0] / 2, width - this.bgSize[0] / 2); noStroke(); fill(DARK_COLOR, this.progress * 220); rect(xValue, this.bgSize[1] / 2 + yValue, this.bgSize[0], this.bgSize[1]); textSize(20); fill(LIGHT_COLOR, this.progress * 255); text(this.content, xValue, this.bgSize[1] / 2 + yValue); } }, }; TEXTURE_LOADER = { isLoading: true, _groupIndex: 0, _colorIndex: 0, LOAD_SPEED: 500, textureSeed: 0, textureGraphics: null, textureProgress: 0, negativeImages: { square: null, triangle: null }, // 4 colors, each with 3 images squareImages: [], triangleImages: [], squareMask: null, triangleMask: null, createMasks: function () { var maskGraphics = createGraphics(150, 150, P2D); maskGraphics.background(0); maskGraphics.rectMode(CENTER); maskGraphics.noStroke(); maskGraphics.rect(maskGraphics.width / 2, maskGraphics.height / 2, 130, 130); this.squareMask = maskGraphics.get(); // negative square mask maskGraphics = createGraphics(150, 150, P2D); maskGraphics.background(0); maskGraphics.rectMode(CENTER); maskGraphics.noStroke(); maskGraphics.fill(255, 170); // transparency maskGraphics.rect(maskGraphics.width / 2, maskGraphics.height / 2, 130, 130); var negSquareMask = maskGraphics.get(); maskGraphics.background(255); this.negativeImages.square = maskGraphics.get(); this.negativeImages.square.mask(negSquareMask); var r = 34; var rsqrt3 = r * sqrt(3); maskGraphics = createGraphics(150, 150, P2D); maskGraphics.background(0); noStroke(); maskGraphics.triangle(maskGraphics.width / 2, maskGraphics.height / 2 - r * 2, maskGraphics.width / 2 - rsqrt3, maskGraphics.height / 2 + r, maskGraphics.width / 2 + rsqrt3, maskGraphics.height / 2 + r); this.triangleMask = maskGraphics.get(); // negative triangle mask maskGraphics = createGraphics(150, 150, P2D); maskGraphics.background(0); maskGraphics.strokeJoin(ROUND); maskGraphics.strokeWeight(20); maskGraphics.noStroke(); maskGraphics.fill(255, 170); // transparency maskGraphics.triangle(maskGraphics.width / 2, maskGraphics.height / 2 - r * 2, maskGraphics.width / 2 - rsqrt3, maskGraphics.height / 2 + r, maskGraphics.width / 2 + rsqrt3, maskGraphics.height / 2 + r); var negTriangleMask = maskGraphics.get(); maskGraphics.background(255); this.negativeImages.triangle = maskGraphics.get(); this.negativeImages.triangle.mask(negTriangleMask); }, // throughout multple frames createTexture: function () { var c1 = getShapeColor(this._colorIndex, 0); var c2 = getShapeColor(this._colorIndex, 1); if (this.textureProgress === 0) { this.textureGraphics.background(255, 0, 0); } for (var i = 0; i < this.LOAD_SPEED; i++) { var x = this.textureProgress % this.textureGraphics.width; var y = floor(this.textureProgress / this.textureGraphics.width); var noiseValue = noise(x * NOISE_SCALE, (y + this.textureSeed) * NOISE_SCALE); if (noiseValue > 0.5 && noiseValue < 0.54) { this.textureGraphics.stroke(c1); } else { this.textureGraphics.stroke(lerpColor(c1, c2, round(noiseValue * 10) / 10)); } this.textureGraphics.point(x, y); this.textureProgress++; } }, // create all shape images for a color createShapeImages: function () { // done with a color? if (this._groupIndex >= IMAGES_AMOUNT) { this._colorIndex++; // complete loading? if (this._colorIndex >= SHAPES_COLORS.length) { this.isLoading = false; // cleanup this.squareMask = null; this.triangleMask = null; this.textureGraphics = null; return; } this._groupIndex = 0; // reset for next color } // create new texture? if (this.textureProgress === 0) { this.textureSeed = random(-99999, 99999); this.textureGraphics = createGraphics(150, 150, P2D); this.textureGraphics.strokeWeight(2); // fix transparency return this.createTexture(); } // still creating texture? else if (this.textureProgress < 22500) { return this.createTexture(); } var sis = this.squareImages[this._colorIndex]; var tis = this.triangleImages[this._colorIndex]; if (this._groupIndex === 0) { // add new images group sis = []; tis = []; } // add to group var si = this.textureGraphics.get(); si.mask(this.squareMask); sis.push(si); var ti = this.textureGraphics.get(); ti.mask(this.triangleMask); tis.push(ti); this._groupIndex++; this.squareImages[this._colorIndex] = sis; this.triangleImages[this._colorIndex] = tis; this.textureProgress = 0; }, }; var TITLE_DATA = "134,95?125,88?123,87?121,86?118,86?115,85?111,85?108,85?100,87?97,89?93,90?85,96?79,104?76,108?74,112?72,117?68,127?67,131?65,141?64,146?65,160?66,165?67,170?69,175?71,179?72,183?77,190?79,193?82,196?86,199?89,201?95,205?98,207?101,208?104,209?107,209?113,208?115,207?122,203?125,201?128,198?130,195?133,193?134,190?136,189?138,187?0,0?174,89?173,162?174,187?175,191?176,194?177,201?0,0?175,169?180,159?182,156?184,154?187,152?188,151?190,151?192,151?196,150?198,150?199,149?201,149?202,151?203,153?205,158?206,162?209,170?211,183?212,190?213,202?0,0?246,148?248,159?249,165?250,171?251,187?252,198?253,205?254,212?0,0?253,172?254,161?256,158?258,155?260,153?262,151?264,150?268,149?270,149?272,148?274,149?276,150?278,150?279,151?280,153?281,154?282,154?283,155?0,0?342,150?333,149?330,150?328,151?325,153?323,155?321,158?317,163?316,166?314,174?316,195?317,199?320,207?324,212?329,216?333,217?337,217?341,216?344,215?346,214?348,213?350,211?352,209?356,204?357,201?358,199?360,197?361,194?362,186?363,183?362,171?361,164?359,161?358,159?356,157?353,155?351,154?349,152?347,151?342,149?341,148?340,148?0,0?392,147?393,219?0,0?392,177?398,165?401,162?406,156?408,153?411,152?413,151?416,154?419,158?420,161?422,168?423,176?422,195?423,219?0,0?425,175?431,164?433,161?439,156?444,153?446,153?448,153?449,153?452,155?454,161?455,165?454,179?453,194?454,223?0,0?524,160?515,157?513,157?511,158?509,159?507,160?505,161?503,162?501,163?497,168?495,171?493,175?492,179?491,183?490,187?491,206?492,209?496,214?498,217?500,219?502,221?507,223?510,223?512,223?514,223?516,222?520,220?522,219?525,215?526,213?528,210?529,206?530,205?0,0?531,154?528,164?529,175?530,185?531,198?532,205?534,229?535,232?0,0?42,212?43,212?45,214?47,217?50,222?53,227?55,229?57,232?58,233?59,234?60,235?61,235?62,236?63,237?64,238?68,240?71,241?75,242?79,243?84,243?89,243?94,244?97,244?104,244?107,245?112,245?116,246?121,246?125,246?129,247?131,247?132,247?134,247?136,247?137,247?138,247?140,247?141,247?142,247?145,247?147,248?149,249?151,250?155,251?159,252?163,253?166,255?171,257?175,257?177,259?180,259?181,260?183,260?185,260?189,261?194,262?197,262?199,262?203,262?207,262?213,261?216,261?218,261?223,260?228,259?232,258?235,257?237,257?239,256?241,256?245,255?248,254?250,254?253,253?255,253?257,253?260,253?266,253?271,253?275,253?277,253?279,253?281,253?285,253?291,253?293,253?294,253?295,253?296,253?298,253?302,253?307,253?309,253?310,253?311,251?314,251?318,250?319,249?321,247?322,247?325,245?328,243?331,242?332,241?333,240?335,239?336,238?337,237?338,235?339,234?340,234?341,234?342,233?343,231?344,230?345,229?347,226?349,224?350,223?351,223?353,217?354,215?355,213?356,211?357,209?0,0?524,89?522,94?521,98?519,102?517,106?516,108?515,108?514,109?513,110?511,112?510,113?509,113?507,114?506,115?505,116?503,116?502,117?501,117?500,117?499,118?497,118?496,119?495,119?493,120?491,120?489,120?488,120?487,120?485,120?483,120?481,120?479,120?477,119?472,118?467,116?463,116?462,116?461,115?460,115?459,115?457,115?455,114?451,114?450,114?447,114?446,113?443,112?439,112?436,112?433,112?431,112?427,111?423,110?419,110?411,110?407,110?403,110?401,110?400,110?399,110?398,110?396,110?393,112?392,112?391,113?389,113?386,114?382,115?380,116?379,116?378,116?377,117?376,117?373,118?367,118?363,118?362,118?358,119?355,120?350,120?347,121?346,122?344,123?343,123?342,124?341,125?339,126?336,128?335,130?334,131?333,132?331,133?330,134?329,135?328,136?327,138?326,139?325,140?323,141?322,143?321,144?319,146?318,152?317,156?316,157?0,0"; START_SCENE = { tutorialOn: true, touchscreenOn: false, loadingTextProgress: 1, TDArray: TITLE_DATA.split("?").map(function (s) { return s.split(",").map(function (n) { return Number(n); }); }), t: 1, layer2Graphics: null, titleSetup: function () { this.layer2Graphics = createGraphics(600, 300, P2D); this.layer2Graphics.background(0, 0); this.layer2Graphics.stroke(BG_COLOR); this.layer2Graphics.strokeWeight(15); this.setUpButtons(); background(BG_COLOR); }, titleDone: false, displayLoadingProgress: 0, render: function () { // update title if (!this.titleDone) { // faster drawing for (var i = 0; i < 2; i++) { var pos1 = this.TDArray[this.t]; var pos2 = this.TDArray[this.t - 1]; this.t++; if (pos1[0] !== 0 && pos2[0] !== 0) { strokeWeight(25); colorMode(HSB, 255); stroke(map(pos1[0], 0, width, 0, 255), 255, 255); colorMode(RGB, 255); line(pos1[0], pos1[1], pos2[0], pos2[1]); this.layer2Graphics.line(pos1[0], pos1[1], pos2[0], pos2[1]); } image(this.layer2Graphics, width / 2, this.layer2Graphics.height / 2); if (this.t >= this.TDArray.length) { this.titleDone = true; TEXTURE_LOADER.LOAD_SPEED = 3000; // actual load speed break; } } } // render loading text else if (this.loadingTextProgress > 0) { noStroke(); textSize(30 + this.loadingTextProgress * 5); fill(255, (1 - this.loadingTextProgress) * 140); text("Loading", 300, 450); this.loadingTextProgress = max(0, this.loadingTextProgress - 0.1); } // is still loading texture? var loadingProgress = 1; if (TEXTURE_LOADER.isLoading) { TEXTURE_LOADER.createShapeImages(); var GRAPHICS_DONE = TEXTURE_LOADER._colorIndex * IMAGES_AMOUNT + TEXTURE_LOADER._groupIndex; loadingProgress = min(1, GRAPHICS_DONE / (IMAGES_AMOUNT * SHAPES_COLORS.length)); } // done loading? else { noStroke(); fill(BG_COLOR); rect(width / 2, 400, width, 200); this.buttons.play.render(); this.buttons.tutorialToggle.render(); this.buttons.touchscreenToggle.render(); } // gradient load bar if (this.displayLoadingProgress < 1) { noStroke(); this.displayLoadingProgress = min(loadingProgress, this.displayLoadingProgress + 0.01); colorMode(HSB, 255); fill(this.displayLoadingProgress * 255, 255, 255); colorMode(RGB, 255); rect(this.displayLoadingProgress * width, 598, 6, 6); } }, mouseClicked: function () { for (var key in this.buttons) { if (this.buttons[key].isHovered) {return this.buttons[key].clicked();} } }, buttons: { play: null, tutorialToggle: null, touchscreenToggle: null, }, setUpButtons: function () { var _this = this; this.buttons.play = new Btn(160, 400, 220, 100, function (x, y) { noStroke(); textSize(40); fill(LIGHT_COLOR); text("Play", x, y); }, function () { initializeGridData(); SCENE_TRANSITION.switchScene("PLAY"); }); this.buttons.tutorialToggle = new Btn(440, 370, 220, 40, function (x, y) { noStroke(); textSize(18); fill(LIGHT_COLOR); text("tutorial", x, y); if (_this.tutorialOn) {fill(LIGHT_COLOR);} else {noFill();} strokeWeight(2); stroke(LIGHT_COLOR); ellipse(x - 85, y, 15, 15); }, function () { _this.tutorialOn = !_this.tutorialOn; }); this.buttons.touchscreenToggle = new Btn(440, 430, 220, 40, function (x, y) { noStroke(); textSize(18); fill(LIGHT_COLOR); text("touchscreen", x, y); if (_this.touchscreenOn) {fill(LIGHT_COLOR);} else {noFill();} strokeWeight(2); stroke(LIGHT_COLOR); ellipse(x - 85, y, 15, 15); }, function () { _this.touchscreenOn = !_this.touchscreenOn; }); }, }; PLAY_SCENE = { popupMessage: "", gameEnded: false, finalClearAll: false, turnsLeft: 0, activePlusDot: null, negShapes: [], // Piece: {type, flyer, placeables} pieces: [], pieceBtns: [], selectedPieceIndex: null, hoveredPlaceable: null, confirmHoveredPlaceable: null, placeableGenIndex: 0, isClearing: false, pendingScoreCheck: false, pendingCheckClear: false, // {shape, progress(0 to 1)} placementFlashers: [], // {shape, progress(0 to 1), hasCleared} clearFlasers: [], numFlashers: [], sealFlashers: [], multIsActive: false, multColorIndex: null, plusDot: null, useNeg: false, negButton: new Btn(70, 110, 110, 30, function (x, y) { textSize(20); noStroke(); fill(LIGHT_COLOR); text(PLAY_SCENE.useNeg ? "NEGATIVE" : "POSITIVE", x, y); }, function () { PLAY_SCENE.toggleNeg(); }), toggleNeg: function () { this.useNeg = !this.useNeg; this.placeableGenIndex = 0; // reset generation for (var i = 0; i < 3; i++) { this.pieces[i].isNeg = this.useNeg; this.pieces[i].placeables = []; this.pieceBtns[i].glow = 1; } }, refreshMult: function () { this.multIsActive = false; var prevColorIndex = this.multColorIndex; while (prevColorIndex === this.multColorIndex) { this.multColorIndex = randomInt(0, 4); } animations.multScaler = 2; }, refreshPlusDot: function () { // look for a different pos than current var prevPlusDot = this.plusDot; var remainingPositions = PLUS_DOTS.slice(0); while (remainingPositions.length > 0) { var newPlusDotIndex = randomInt(0, remainingPositions.length); var newPlusDot = remainingPositions[newPlusDotIndex]; // not previous one if (prevPlusDot !== newPlusDot) { // check if not surrounded var isSurrounded = true; for (var i = 0; i < newPlusDot.shapes.length; i++) { if (newPlusDot.shapes[i].renderData === null \|\| newPlusDot.shapes[i].renderData.willBeCleared) { isSurrounded = false; break; } } if (!isSurrounded) { this.plusDot = newPlusDot; break; } } remainingPositions.splice(newPlusDotIndex, 1); } this.addSealFlasher(this.plusDot.pos); // spawn animation }, checkCollectPlus: function () { var isSurrounded = true; for (var i = 0; i < this.plusDot.shapes.length; i++) { if (this.plusDot.shapes[i].renderData === null) { isSurrounded = false; break; } } if (isSurrounded) { animations.adderScaler = 2; adder += 10; this.refreshPlusDot(); return true; } return false; }, initializeGame: function () { var _this = this; TUTORIAL.index = 0; startTime = Date.now(); // timer totalAdded = 0; totalScore = 0; multiplier = 2.0; adder = 0; temporaryAdder = 0; scoreCheckIndex = 0; animations = { resultDelay: 0, scoreCheckCountDown: 0, scoreScaler: 1, adderScaler: 1, multScaler: 1, }; this.useNeg = false; this.popupMessage = ""; this.gameEnded = false; this.finalClearAll = false; this.placeableGenIndex = 0; this.selectedPieceIndex = null; this.pendingCheckClear = false; this.pendingScoreCheck = false; this.isClearing = false; this.confirmHoveredPlaceable = null; this.placementFlashers = []; this.clearFlasers = []; this.numFlashers = []; this.sealFlashers = []; this.multColorIndex = null; this.refreshMult(); this.turnsLeft = TURNS_PER_CHECK; this.plusDotIndex = null; this.refreshPlusDot(); // make piece buttons (if no pieces) if (this.pieceBtns.length === 0) { var btnWidth = width / 3; var btnHeight = 130; var btnY = height - btnHeight / 2; this.pieceBtns = [ new Btn(btnWidth / 2, btnY, btnWidth * 0.95, btnHeight * 0.9, null, function () { return _this.pieceBtnClicked(0); }), new Btn(btnWidth / 2 + btnWidth, btnY, btnWidth * 0.95, btnHeight * 0.9, null, function () { return _this.pieceBtnClicked(1); }), new Btn(btnWidth / 2 + btnWidth * 2, btnY, btnWidth * 0.95, btnHeight * 0.9, null, function () { return _this.pieceBtnClicked(2); }), ]; } // generate 3 pieces for (var i = 0; i < 3; i++) { this.pieces[i] = generatePiece(i); } // reset each shape for (var i = 0; i < ALL_SHAPES.length; i++) { var shape = ALL_SHAPES[i]; shape.renderData = null; if (shape.portalNeighbor) {shape.portalNeighbor = null;} } // reset portal lines activePortalLines = []; for (var i = 0; i < PORTAL_LINES.length; i++) { PORTAL_LINES[i].isActive = false; } // spawn shapes on board for (var i = 0; i < SHAPES_COLORS.length; i++) { var randomShape = null; // make sure to pick a shape without neighbor while (randomShape === null) { randomShape = getRandomItem(ALL_SHAPES); for (var nb = 0; nb < randomShape.nShapes.length; nb++) { if (randomShape.nShapes[nb] && randomShape.nShapes[nb].renderData !== null) { randomShape = null; // not this one break; } } } randomShape.renderData = newRenderData(shapeIsSquare(randomShape), i); } }, spawnPortal: function () { // infinite-loop protect loop for (var ilp = 0; ilp < 1000; ilp++) { var PLIndex = randomInt(0, PORTAL_LINES.length); var thisPL = getPortalLine(PLIndex); // skip if this portal is already active if (thisPL.isActive) { continue; } // chance to skip if 1 of adjacent portals is also active else if (getPortalLine(PLIndex - 1).isActive \|\| getPortalLine(PLIndex + 1).isActive) { if (random() < 0.9) { continue; } } var parnerPL = getPortalLine(PLIndex + 9); // plus half of total portals thisPL.isActive = true; parnerPL.isActive = true; activePortalLines.push(thisPL); activePortalLines.push(parnerPL); thisPL.shape.portalNeighbor = parnerPL.shape; parnerPL.shape.portalNeighbor = thisPL.shape; // spawn flashers for (var i = 0; i <= 1; i += 0.2) { this.addSealFlasher([ thisPL.gridLine[1][0] + (thisPL.gridLine[0][0] - thisPL.gridLine[1][0]) * i, thisPL.gridLine[1][1] + (thisPL.gridLine[0][1] - thisPL.gridLine[1][1]) * i, ]); } for (var i = 0; i <= 1; i += 0.2) { this.addSealFlasher([ parnerPL.gridLine[1][0] + (parnerPL.gridLine[0][0] - parnerPL.gridLine[1][0]) * i, parnerPL.gridLine[1][1] + (parnerPL.gridLine[0][1] - parnerPL.gridLine[1][1]) * i, ]); } break; } this.clearShapes(); // check clear again }, renderPieces: function () { // have selected piece rendered last var pieceIndices = [0, 1, 2]; if (this.selectedPieceIndex !== null) { pieceIndices.splice(pieceIndices.indexOf(this.selectedPieceIndex), 1); pieceIndices.push(this.selectedPieceIndex); } for (var i = 0; i < pieceIndices.length; i++) { // render piece flyer pushMatrix(); var piece = this.pieces[pieceIndices[i]]; var flyer = piece.flyer; translate(flyer.pos[0], flyer.pos[1]); rotate(flyer.r); scale(flyer.scaling); // render each fshape for (var f = 0; f < flyer.fShapes.length; f++) { var fShape = flyer.fShapes[f]; pushMatrix(); translate(fShape.pos[0], fShape.pos[1]); rotate(fShape.r + fShape.renderData.textureOri); if (piece.isNeg) { image(fShape.renderData.imgNeg, 0, 0, SHAPE_SIZE, SHAPE_SIZE); } // not negative? else { image(fShape.renderData.img, 0, 0, SHAPE_SIZE, SHAPE_SIZE); // render special if (fShape.renderData.special === "X") { rotate(-flyer.r - fShape.r - fShape.renderData.textureOri); noStroke(); ellipse(0, 0, SEAL_SIZE, SEAL_SIZE); stroke(LIGHT_COLOR); line(-5, -5, 5, 5); line(-5, 5, 5, -5); } else if (fShape.renderData.special === "CHROMA") { // change texture after a bit if (frameCount % 30 === 0) { fShape.renderData.img = getRandomItem((fShape.renderData.isSquare ? TEXTURE_LOADER.squareImages : TEXTURE_LOADER.triangleImages)[randomInt(0, 4)]); fShape.renderData.textureOri = fShape.renderData.isSquare ? randomInt(0, 4) * 90 : randomInt(0, 3) * 120; } noStroke(); ellipse(0, 0, 10, 10); } } popMatrix(); } popMatrix(); // update flyer animation var targetPos = flyer.default.pos; var targetRotation = flyer.r; // is selected piece? if (pieceIndices[i] === this.selectedPieceIndex) { // check to show tooltip: no space if (this.placeableGenIndex > 2 && this.pieces[pieceIndices[i]].placeables.length === 0) { tooltip.set("No possible placement.", [265, 50]); } // grow to normal scaling if (flyer.scaling < 1) { flyer.scaling = min(1, flyer.scaling + FLYER_SCALING_SPEED); } // is hovered on placeable? if (this.hoveredPlaceable !== null) { targetPos = this.hoveredPlaceable.pos; // rotation shortcut if (abs(this.hoveredPlaceable.r - flyer.r) > 180) { if (this.hoveredPlaceable.r > flyer.r) { flyer.r += 360; } else {flyer.r -= 360;} } targetRotation = this.hoveredPlaceable.r; } else { targetPos = [mouseX, mouseY]; } } // piece not selected? else { // grow to default scaling if (flyer.scaling < FLYER_UNSELECTED_SCALING) { flyer.scaling = min(FLYER_UNSELECTED_SCALING, flyer.scaling + FLYER_SCALING_SPEED); } else if (flyer.scaling > FLYER_UNSELECTED_SCALING) { flyer.scaling = max(FLYER_UNSELECTED_SCALING, flyer.scaling - FLYER_SCALING_SPEED); } targetRotation = flyer.default.r; } // update pos var distX = abs(targetPos[0] - flyer.pos[0]); var distY = abs(targetPos[1] - flyer.pos[1]); if (distX !== 0 \|\| distY !== 0) { // minimum speed var speedX = max(distX * FLYER_MOVE_SPEED, 1); var speedY = max(distY * FLYER_MOVE_SPEED, 1); // going left vs right if (flyer.pos[0] < targetPos[0]) { flyer.pos[0] = min(targetPos[0], flyer.pos[0] + speedX); } else { flyer.pos[0] = max(targetPos[0], flyer.pos[0] - speedX); } // going down vs up if (flyer.pos[1] < targetPos[1]) { flyer.pos[1] = min(targetPos[1], flyer.pos[1] + speedY); } else { flyer.pos[1] = max(targetPos[1], flyer.pos[1] - speedY); } } // update rotation if (targetRotation > flyer.r) { flyer.r = min(flyer.r + FLYER_ROTATE_SPEED, targetRotation); } else if (targetRotation < flyer.r) { flyer.r = max(flyer.r - FLYER_ROTATE_SPEED, targetRotation); } } }, checkHoverPlaceables: function () { if (this.selectedPieceIndex === null) {return;} var placeables = this.pieces[this.selectedPieceIndex].placeables; for (var i = 0; i < placeables.length; i++) { var placeable = placeables[i]; // check hover if (this.hoveredPlaceable === null && dist(mouseX, mouseY, placeable.pos[0], placeable.pos[1]) < PLACEABLE_DIAMETER * 1 // hover range ) { this.hoveredPlaceable = placeable; cursor(HAND); break; } } }, renderPlacedShapes: function () { fill(DARK_COLOR); strokeWeight(5); for (var i = 0; i < ALL_SHAPES.length; i++) { var shape = ALL_SHAPES[i]; if (shape.renderData === null) {continue;} pushMatrix(); translate(shape.centerPos[0], shape.centerPos[1]); rotate(GRID_ORI[shape.shapeIndex] + shape.renderData.textureOri); image(shape.renderData.img, 0, 0, SHAPE_SIZE, SHAPE_SIZE); // render special if (shape.renderData.special === "X") { rotate(-GRID_ORI[shape.shapeIndex] - shape.renderData.textureOri); noStroke(); ellipse(0, 0, SEAL_SIZE, SEAL_SIZE); stroke(LIGHT_COLOR); line(-5, -5, 5, 5); line(-5, 5, 5, -5); // tooltip if (PLAY_SCENE.selectedPieceIndex === null && dist(mouseX, mouseY, shape.centerPos[0], shape.centerPos[1]) < SEAL_SIZE / 2) { tooltip.set("Clear this shape\nto increase\nMULTIPLIER by 0.1", [210, 85]); } } else if (shape.renderData.special === "CHROMA") { // change texture after a bit if (frameCount % 30 === 0) { shape.renderData.img = getRandomItem((shape.renderData.isSquare ? TEXTURE_LOADER.squareImages : TEXTURE_LOADER.triangleImages)[randomInt(0, 4)]); shape.renderData.textureOri = shape.renderData.isSquare ? randomInt(0, 4) * 90 : randomInt(0, 3) * 120; } noStroke(); ellipse(0, 0, 10, 10); // tooltip if (PLAY_SCENE.selectedPieceIndex === null && dist(mouseX, mouseY, shape.centerPos[0], shape.centerPos[1]) < SEAL_SIZE / 2) { tooltip.set("This shape matches color\nwith all adjacents.", [280, 60]); } } popMatrix(); } }, renderPlacementFlashers: function () { noStroke(); for (var i = this.placementFlashers.length - 1; i >= 0; i--) { var fl = this.placementFlashers[i]; fl.progress = min(1, fl.progress + FLASHER_SPEED); fill(255, sin(fl.progress * 180) * 255); beginShape(); for (var v = 0; v < fl.shape.points.length; v++) { vertex(fl.shape.points[v][0], fl.shape.points[v][1]); } endShape(CLOSE); if (fl.progress >= 1) {this.placementFlashers.splice(i, 1);} } }, renderClearFlashers: function () { // set up clearing after placing animation if (this.pendingCheckClear && this.placementFlashers.length === 0) { this.pendingCheckClear = false; this.clearShapes(); if (this.turnsLeft === 0) {this.pendingScoreCheck = true;} } for (var i = this.clearFlasers.length - 1; i >= 0; i--) { var fl = this.clearFlasers[i]; if (fl.delay-- > 0) {continue;} // flasher cover if (fl.progress < 1) { fl.progress = min(1, fl.progress + FLASHER_SPEED); fill(LIGHT_COLOR, sin(fl.progress * 180) * 255); beginShape(); for (var v = 0; v < fl.shape.points.length; v++) { vertex(fl.shape.points[v][0], fl.shape.points[v][1]); } endShape(CLOSE); if (fl.progress >= 1) {this.clearFlasers.splice(i, 1);} } // actually clear & set up numFlashers if (!fl.hasCleared && fl.progress >= 0.5) { fl.hasCleared = true; fl.shape.renderData = null; this.triggerClear(); _playSound(sounds.shapeCleared, min(temporaryAdder * 0.1, 7)); this.numFlashers.push({ pos: fl.shape.centerPos, addedScore: "+" + floor(adder + temporaryAdder * (this.multIsActive ? multiplier : 1)), progress: 0, }); } } }, renderNumFlashers: function () { textSize(20); for (var i = this.numFlashers.length - 1; i >= 0; i--) { var fl = this.numFlashers[i]; fl.progress += 0.018; // text duration fill(LIGHT_COLOR, min(255, (1 - fl.progress) * 1500)); text(fl.addedScore, fl.pos[0], fl.pos[1]); if (fl.progress >= 1) {this.numFlashers.splice(i, 1);} } }, renderTotalScore: function () { textSize(40 * animations.scoreScaler); animations.scoreScaler = max(1, animations.scoreScaler - TEXT_SHRINK_SPEED); fill(DARK_COLOR); rect(75, 55, 130, 60, 10); fill(LIGHT_COLOR); text(animations.resultDelay > 0 ? "+" + floor(totalAdded) : floor(totalScore), 75, 55); // tooltip if (PLAY_SCENE.selectedPieceIndex === null && mouseX > 10 && mouseX < 140 && mouseY > 25 && mouseY < 85) { tooltip.set("Psst... when you pass\nthe last score check,\nall shapes will be\ncleared. Try to have\nmany shapes by then.", [255, 130]); } }, renderScoreCheck: function () { fill(DARK_COLOR); rect(525, 58, 120, 76, 10); textSize(40); fill(LIGHT_COLOR); text(SCORE_CHECK_AMOUNTS[scoreCheckIndex], 525, 50); textSize(20); fill(LIGHT_COLOR); text(this.turnsLeft + " left", 525, 80); // line through if score already met if (totalScore >= SCORE_CHECK_AMOUNTS[scoreCheckIndex]) { stroke(LIGHT_COLOR); strokeWeight(3); line(480, 47, 570, 47); noStroke(); } // flash when less than 4 turns if (this.turnsLeft < 4 && totalScore < SCORE_CHECK_AMOUNTS[scoreCheckIndex]) { fill(255, max(0, cos(frameCount * 5) * 50 + 30)); rect(525, 58, 120, 76, 10); } // tooltip if (PLAY_SCENE.selectedPieceIndex === null && mouseX > 465 && mouseX < 585 && mouseY > 20 && mouseY < 96) { tooltip.set("SCORE CHECK #".concat(scoreCheckIndex + 1, ": get\n").concat(SCORE_CHECK_AMOUNTS[scoreCheckIndex], " score to pass,\n").concat(this.turnsLeft, " turns remaining."), [235, 80]); } }, renderMultiplier: function () { var spinTime = frameCount * (this.multIsActive ? 10 : 1); var multColor = getShapeColor(this.multColorIndex,0); fill(multColor); arc(70, 400, 85, 85, spinTime, spinTime + 50); arc(70, 400, 85, 85, spinTime + 180, spinTime + 230); fill(DARK_COLOR); ellipse(70, 400, 80, 80); fill(multColor); textSize(28 * animations.multScaler); animations.multScaler = max(1, animations.multScaler - TEXT_SHRINK_SPEED); text("x" + multiplier.toFixed(1), 70, 400); // tooltip if (PLAY_SCENE.selectedPieceIndex === null && dist(mouseX, mouseY, 70, 400) < 40) { tooltip.set("MULTIPLIER: x".concat(multiplier.toFixed(1), " all\nscore gained when\nclearing ").concat(SHAPES_COLORS_NAMES[this.multColorIndex], " shapes.\nChange color after."), [250, 110]); } }, renderAdder: function () { var spinTime = -frameCount * (1 + adder * 0.05); fill(LIGHT_COLOR); arc(530, 400, 85, 85, spinTime - 50, spinTime); arc(530, 400, 85, 85, spinTime - 230, spinTime - 180); fill(DARK_COLOR); ellipse(530, 400, 80, 80); fill(LIGHT_COLOR); textSize(28 * animations.adderScaler); animations.adderScaler = max(1, animations.adderScaler - TEXT_SHRINK_SPEED); text("+" + (adder + temporaryAdder), 530, 400); // tooltip if (PLAY_SCENE.selectedPieceIndex === null && dist(mouseX, mouseY, 530, 400) < 40) { tooltip.set("ADDER: Each shape cleared\ntemporarily +10 ADDER.\n(extra score for more\nshapes cleared in 1 turn)", [295, 110]); } }, triggerClear: function () { animations.resultDelay = CLEAR_RESULT_DURATION; temporaryAdder += 10; totalAdded += adder + temporaryAdder * (this.multIsActive ? multiplier : 1); // trigger animations animations.adderScaler = 2; animations.scoreScaler = 1.5; }, updateAnimations: function () { // animations completed? if (animations.resultDelay-- === 0) { temporaryAdder = 0; // reset to base adder animations.adderScaler = 2; totalScore += totalAdded; animations.scoreScaler = 2; if (this.multIsActive) {this.refreshMult();} this.isClearing = false; } }, addSealFlasher: function (pos) { this.sealFlashers.push({ pos: pos, progress: 0 }); }, renderSealFlashers: function () { noStroke(); for (var i = this.sealFlashers.length - 1; i >= 0; i--) { var fl = this.sealFlashers[i]; fl.progress += 0.03; // seal flasher speed fill(LIGHT_COLOR, min(255, (1 - fl.progress) * 300)); ellipse(fl.pos[0], fl.pos[1], SEAL_SIZE, SEAL_SIZE); if (fl.progress >= 1) {this.sealFlashers.splice(i, 1);} } }, render: function () { // reset this.hoveredPlaceable = null; tooltip.isShown = false; background(BG_COLOR); generatePlaceables(); this.checkHoverPlaceables(); this.renderPlacementFlashers(); this.renderPlacedShapes(); noStroke(); this.updateAnimations(); this.renderTotalScore(); this.renderScoreCheck(); this.renderMultiplier(); this.renderAdder(); this.negButton.render(); noStroke(); this.renderNumFlashers(); this.renderClearFlashers(); // render grid lines stroke(GRID_COLOR); strokeWeight(2); for (var i = 0; i < GRID_LINES.length; i++) { var l = GRID_LINES[i]; if (l === null) {continue;} line(l[0][0], l[0][1], l[1][0], l[1][1]); } // render portal lines strokeWeight(7); for (var i = 0; i < activePortalLines.length; i++) { var _a = activePortalLines[i], gridLine = _a.gridLine, shape = _a.shape; stroke(255); line(gridLine[0][0], gridLine[0][1], gridLine[1][0], gridLine[1][1]); if ((this.selectedPieceIndex === null) & lineIsHovered(gridLine[0], gridLine[1])) { fill(255, 100 + cos(frameCount * 7) * 50); noStroke(); beginShape(); for (var v = 0; v < shape.points.length; v++) { vertex(shape.points[v][0], shape.points[v][1]); } endShape(CLOSE); // the other shape beginShape(); for (var v = 0; v < shape.portalNeighbor.points.length; v++) { vertex(shape.portalNeighbor.points[v][0], shape.portalNeighbor.points[v][1]); } endShape(CLOSE); // tooltip tooltip.set("PORTAL: allows these 2\nshapes to be adjacent.", [260, 60]); } } // render placeable hints if (this.selectedPieceIndex !== null) { var piece = this.pieces[this.selectedPieceIndex]; if (piece.isNeg) { stroke(255, 0, 0); } else { stroke(255, 255, 0); } strokeWeight(10); if (this.hoveredPlaceable) { point(this.hoveredPlaceable.pos[0], this.hoveredPlaceable.pos[1]); } else { var placeables = piece.placeables; for (var i = 0; i < placeables.length; i++) { var placeable = placeables[i]; point(placeable.pos[0], placeable.pos[1]); } } } // render plus dot noStroke(); fill(LIGHT_COLOR); ellipse(this.plusDot.pos[0], this.plusDot.pos[1], SEAL_SIZE, SEAL_SIZE); stroke(DARK_COLOR); strokeWeight(5); line(this.plusDot.pos[0], this.plusDot.pos[1] - 6, this.plusDot.pos[0], this.plusDot.pos[1] + 6); line(this.plusDot.pos[0] - 6, this.plusDot.pos[1], this.plusDot.pos[0] + 6, this.plusDot.pos[1]); // tooltip & highlight shapes if (PLAY_SCENE.selectedPieceIndex === null && dist(mouseX, mouseY, this.plusDot.pos[0], this.plusDot.pos[1]) < SEAL_SIZE / 2) { tooltip.set("Completely surround\nthis to permanently\n+10 ADDER.", [235, 85]); noStroke(); fill(255, 30 + cos(frameCount * 7) * 30); for (var i = 0; i < this.plusDot.shapes.length; i++) { var points = this.plusDot.shapes[i].points; beginShape(); for (var j = 0; j < points.length; j++) { vertex(points[j][0], points[j][1]); } endShape(CLOSE); } } this.renderSealFlashers(); // render button frame for (var i = 0; i < 3; i++) { this.pieceBtns[i].render(); } fill(DARK_COLOR); strokeWeight(5); this.renderPieces(); // show confirm if (START_SCENE.touchscreenOn && this.confirmHoveredPlaceable !== null) { if (this.confirmHoveredPlaceable !== this.hoveredPlaceable) { this.confirmHoveredPlaceable = null; } else { tooltip.set("Tap it again to place.", [255, 40]); } } // set negative tooltip on hover for (var i = 0; i < this.pieceBtns.length; i++) { if (this.pieces[i].isNeg && this.pieceBtns[i].isHovered) { tooltip.set("NEGATIVE: place on existing\nshapes to clear them.", [310, 50]); break; } } tooltip.render(); var setMessage = false; // do score check if (this.pendingScoreCheck && !this.isClearing) { this.pendingScoreCheck = false; // enough score? if (totalScore >= SCORE_CHECK_AMOUNTS[scoreCheckIndex]) { this.popupMessage = "Score check passed"; setMessage = true; // any more score checks? continue if (scoreCheckIndex < SCORE_CHECK_AMOUNTS.length - 1) { scoreCheckIndex++; this.turnsLeft = TURNS_PER_CHECK; this.spawnPortal(); } // last check? else { this.gameEnded = true; this.finalClearAll = true; } } else { this.popupMessage = "Score check failed"; setMessage = true; this.gameEnded = true; } } // set message? if (setMessage) {animations.scoreCheckCountDown = GAME_MESSAGE_DURATION;} // render message if (animations.scoreCheckCountDown > 0) { var factor = 1; if (animations.scoreCheckCountDown < GMAD) { // intro animation factor = animations.scoreCheckCountDown / GMAD; } else if (animations.scoreCheckCountDown > GAME_MESSAGE_DURATION - GMAD) { // outro animation factor = (GAME_MESSAGE_DURATION - animations.scoreCheckCountDown) / GMAD; } noStroke(); fill(DARK_COLOR); rect(300, 250, width, 100 * factor); fill(LIGHT_COLOR, factor * 255); textSize(40); text(this.popupMessage, 300, 250); animations.scoreCheckCountDown--; // message finish? if (animations.scoreCheckCountDown === 0) { if (this.gameEnded && !this.finalClearAll) { SCENE_TRANSITION.switchScene("END"); } } } // final clear updates if (this.finalClearAll && !this.finalClearAllStarted) { this.clearShapes(); this.finalClearAllStarted = true; } if (this.finalClearAllStarted && this.clearFlasers.length === 0 && animations.resultDelay < 0) { this.finalClearAllStarted = false; this.finalClearAll = false; SCENE_TRANSITION.switchScene("END"); } TUTORIAL.update(); }, mouseClicked: function () { if (this.gameEnded) {return;} // placing a piece (hovering on placeable & no more flashers) if (this.hoveredPlaceable !== null) { // cancel if still calculating placeables OR not added last score OR game over if (this.placeableGenIndex < 3 \|\| this.isClearing \|\| this.gameEnded) { return; } if (START_SCENE.touchscreenOn) { if (this.confirmHoveredPlaceable === null) { this.confirmHoveredPlaceable = this.hoveredPlaceable; return; } this.confirmHoveredPlaceable = null; } var piece = this.pieces[this.selectedPieceIndex]; var flyer = piece.flyer; var negShapes = []; for (var i = 0; i < flyer.fShapes.length; i++) { var shape = this.hoveredPlaceable.shapes[i]; if (piece.isNeg) { negShapes.push(shape); } // apply renderData to real shapes else { var renderData = flyer.fShapes[i].renderData; shape.renderData = renderData; renderData.textureOri += this.hoveredPlaceable.r + flyer.fShapes[i].r - GRID_ORI[shape.shapeIndex]; } this.placementFlashers.push({ shape: shape, progress: 0, }); } // make new piece this.pieces[this.selectedPieceIndex] = generatePiece(this.selectedPieceIndex); for (var i = 0; i < this.pieces.length; i++) { this.pieces[i].placeables = []; // clear all placeables } this.selectedPieceIndex = null; // deselect this.placeableGenIndex = 0; // trigger recalculate this.pendingCheckClear = true; this.negShapes = negShapes; this.turnsLeft--; if (this.useNeg) { this.toggleNeg(); // set back to positive } _playSound(sounds.piecePlaced, 2); return; } // piece button clicked for (var i = 0; i < this.pieceBtns.length; i++) { if (this.pieceBtns[i].isHovered) { return this.pieceBtns[i].clicked(); } } // neg button clicked if (this.negButton.isHovered) { return this.negButton.clicked(); } }, pieceBtnClicked: function (pieceIndex) { this.selectedPieceIndex = this.selectedPieceIndex !== pieceIndex ? pieceIndex : null; if (START_SCENE.tutorialOn && TUTORIAL.index === 0) { TUTORIAL.popupProgress = 1; } }, // check to clear clearShapes: function () { var checkedShapes = {}; var groups = []; var clearedShapes = []; // if placed a negative piece, use the piece shapes if (this.negShapes.length > 0) { for (var i = 0; i < this.negShapes.length; i++) { if (this.negShapes[i].renderData !== null) { clearedShapes.push(this.negShapes[i]); } } this.negShapes = []; // reset } // final clear (won) would clear all shapes else if (this.finalClearAll) { for (var i = 0; i < ALL_SHAPES.length; i++) { if (ALL_SHAPES[i].renderData !== null) { clearedShapes.push(ALL_SHAPES[i]); } } } // normal clearing else { for (var i = 0; i < ALL_SHAPES.length; i++) { if (ALL_SHAPES[i].renderData === null \|\| ALL_SHAPES[i].renderData.special === "CHROMA") { continue; } checkShape(ALL_SHAPES[i], checkedShapes, groups, [], true); } for (var i = 0; i < groups.length; i++) { var group = groups[i]; if (group.length >= 4) {clearedShapes = clearedShapes.concat(group);} } } clearedShapes.sort(function (shapeA, shapeB) { return shapeA.centerPos[0] - shapeB.centerPos[0]; }); this.isClearing = clearedShapes.length > 0; var chromas = []; var delayCounter = 0; var applyExtraDelay = this.checkCollectPlus(); for (var i = 0; i < clearedShapes.length; i++) { var cs = clearedShapes[i]; // skip this chroma shape in group if already added if (cs.renderData.special === "CHROMA") { if (chromas.includes(cs)) {continue;} chromas.push(cs); } // activate mult (not chroma & match color with mult color) if (cs.renderData.special !== "CHROMA" && cs.renderData.colorIndex === this.multColorIndex) { this.multIsActive = true; } // consume seal if (cs.renderData.special === "X") { applyExtraDelay = true; cs.renderData.special = "NONE"; multiplier += 0.1; animations.multScaler = 2; this.addSealFlasher(cs.centerPos); } cs.renderData.willBeCleared = true; this.clearFlasers.push({ delay: delayCounter++ * CLEAR_DELAY, shape: cs, progress: 0, textProgress: 0, }); } totalAdded = 0; // reset added sum from last turn if (applyExtraDelay) { _playSound(sounds.piecePlaced, 6); for (var i = 0; i < this.clearFlasers.length; i++) { this.clearFlasers[i].delay += UPGRADE_DELAY; } } }, }; function checkShape(shape, checkedShapes, groups, currentGroup, doesAddToGroups // for the first shape in group only ) { // empty or already checked if (shape.renderData === null \|\| checkedShapes[shape.shapeID]) {return;} // if is chroma, check if already added to group if (shape.renderData.special === "CHROMA") { // exit if already added this to group if (currentGroup.includes(shape)) { {return;} } } else { checkedShapes[shape.shapeID] = true; // mark checked if not chroma } currentGroup.push(shape); // add self to group if (doesAddToGroups) {groups.push(currentGroup);} var neighbors = shape.nShapes.slice(0); if (shape.portalNeighbor) { neighbors.push(shape.portalNeighbor); } for (var nb = 0; nb < neighbors.length; nb++) { var nShape = neighbors[nb]; // jump to that shape if same color OR is chroma if (nShape && nShape.renderData !== null && (nShape.renderData.colorIndex === currentGroup[0].renderData.colorIndex \|\| nShape.renderData.special === "CHROMA")) { checkShape(nShape, checkedShapes, groups, currentGroup); } } } TUTORIAL = { index: 0, popupAlpha: 1, popupProgress: 0, x: 300, y: 40, h: 80, msg: null, update: function () { if (!START_SCENE.tutorialOn \|\| this.index > 3) { return; } var PS = PLAY_SCENE; switch (this.index) { // select piece and place case 0: // didn't place a piece yet? if (PS.turnsLeft === TURNS_PER_CHECK) { if (PS.selectedPieceIndex === null) { this.msg = "Welcome! Select a piece below."; } else { this.msg = "Move it to a yellow dot\nthen click to place."; } } else { this.nextTutorial(); } break; case 1: this.msg = "Link 4 or more shapes with the\nsame color together to clear them."; // close when score if (totalScore !== 0) { this.nextTutorial(); } break; case 2: this.msg = "Hover on stuffs to\nlearn more about them."; // close when select piece if (PLAY_SCENE.selectedPieceIndex !== null) { this.nextTutorial(); } break; case 3: this.msg = "Pass 5 score checks to win.\nGood luck!"; // close when place if (PLAY_SCENE.placementFlashers.length !== 0) { this.nextTutorial(); } break; } // check hover to hide if (mouseY < this.y + this.h / 2) { this.popupAlpha = max(0, this.popupAlpha - 0.2); } else { this.popupAlpha = min(1, this.popupAlpha + 0.2); } noStroke(); fill(0, this.popupAlpha * 220); rect(this.x, this.y, width, this.h); fill(LIGHT_COLOR, this.popupAlpha * 255); textSize(24); text(this.msg, this.x, this.y); if (this.popupProgress > 0) { fill(255, this.popupProgress * 120); rect(this.x, this.y, width, this.h); this.popupProgress = max(0, this.popupProgress - 0.05); } }, nextTutorial: function () { if (this.index < 3) { this.popupProgress = 1; } else { START_SCENE.tutorialOn = false; } this.index++; }, }; (function(){ var doc = "document"; this["document" \|\| 0].body.setAttribute("style", "touch-action: manipulation;"); })(); var PIECE_TYPES = [ // 1 shape ["T", "S"], // 2 shapes ["TT", "ST", "ST"], // 3 shapes ["STT", "TTS", "STS", "TST-", "TST^"], ]; // return Piece: {type, flyer, placeables, isNeg} function generatePiece(pieceIndex) { var randomNum = random(100); var shapesCountIndex; if (randomNum < PIECE_TYPES_CHANCES[0] && (scoreCheckIndex > 0 \|\| PLAY_SCENE.turnsLeft < 10)) { shapesCountIndex = 0; } else if (randomNum < PIECE_TYPES_CHANCES[0] + PIECE_TYPES_CHANCES[1]) { shapesCountIndex = 1; } else { shapesCountIndex = 2; } var type = getRandomItem(PIECE_TYPES[shapesCountIndex]); for (var i = 0; i < PLAY_SCENE.pieces.length; i++) { if (i === pieceIndex) {continue;} if (PLAY_SCENE.pieces[i].type === type) { return generatePiece(pieceIndex); // reroll } } var btnCenterPos = [ PLAY_SCENE.pieceBtns[pieceIndex].x, PLAY_SCENE.pieceBtns[pieceIndex].y, ]; return { type: type, flyer: generatePieceFlyer(type, btnCenterPos), placeables: [], isNeg: false, }; } // return Flyer: { fShapes, default{pos,r}, pos, r, scaling } // FShape: { renderData(see grid), r, pos, } function generatePieceFlyer(type, btnCenterPos) { var flyer = { fShapes: [], // could be modified by type default: { pos: btnCenterPos, r: 0 }, pos: null, r: 0, scaling: 0, }; var MS = CORES[4].shapes; // model shapes var MS2 = CORES[6].shapes; // other core var midPos; switch (type) { case "T": // center triangle flyer.fShapes.push({ renderData: newRenderData(false), r: 0, pos: [0, 0], }); flyer.default.pos[1] += 10; break; case "S": // center square flyer.fShapes.push({ renderData: newRenderData(true), r: 0, pos: [0, 0], }); break; case "TT": // center triangle flyer.fShapes.push({ renderData: newRenderData(false), r: 0, pos: [0, 0], }); // other triangle flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[1], pos: [ MS[1].centerPos[0] - MS[0].centerPos[0], MS[1].centerPos[1] - MS[0].centerPos[1], ], }); flyer.default.pos[0] += 20; flyer.default.r = 90; break; case "ST": midPos = [ (MS[4].points[1][0] + MS[4].points[2][0]) / 2, (MS[4].points[1][1] + MS[4].points[2][1]) / 2, ]; // center square flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[4], pos: [MS[4].centerPos[0] - midPos[0], MS[4].centerPos[1] - midPos[1]], }); flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[1], pos: [MS[1].centerPos[0] - midPos[0], MS[1].centerPos[1] - midPos[1]], }); flyer.default.pos[0] += 10; flyer.default.r = 30; break; case "TST-": midPos = [ (MS[4].points[1][0] + MS[4].points[2][0]) / 2, (MS[4].points[1][1] + MS[4].points[2][1]) / 2, ]; // square flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[4], pos: [MS[4].centerPos[0] - midPos[0], MS[4].centerPos[1] - midPos[1]], }); // triangle front flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[1], pos: [MS[1].centerPos[0] - midPos[0], MS[1].centerPos[1] - midPos[1]], }); // triangle back flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[0], pos: [MS2[0].centerPos[0] - midPos[0], MS2[0].centerPos[1] - midPos[1]], }); flyer.default.pos[0] += 35; flyer.default.r = 30; break; case "TST^": midPos = [ (MS[4].points[1][0] + MS[4].points[2][0]) / 2, (MS[4].points[1][1] + MS[4].points[2][1]) / 2, ]; // square flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[4], pos: [MS[4].centerPos[0] - midPos[0], MS[4].centerPos[1] - midPos[1]], }); // triangle right (facing down) flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[1], pos: [MS[1].centerPos[0] - midPos[0], MS[1].centerPos[1] - midPos[1]], }); // triangle left (facing down) flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[2], pos: [MS[2].centerPos[0] - midPos[0], MS[2].centerPos[1] - midPos[1]], }); flyer.default.pos[0] += 24; flyer.default.pos[1] += 12; flyer.default.r = 75; break; case "STT": midPos = [ (MS[4].points[2][0] + MS[4].points[3][0]) / 2, (MS[4].points[2][1] + MS[4].points[3][1]) / 2, ]; // square flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[4], pos: [MS[4].centerPos[0] - midPos[0], MS[4].centerPos[1] - midPos[1]], }); // triangle adjacent to square flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[2], pos: [MS[2].centerPos[0] - midPos[0], MS[2].centerPos[1] - midPos[1]], }); // other triangle flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[3], pos: [MS[3].centerPos[0] - midPos[0], MS[3].centerPos[1] - midPos[1]], }); flyer.default.pos[0] -= 5; flyer.default.pos[1] += 15; flyer.default.r = 330; break; case "TTS": midPos = [ (MS[5].points[3][0] + MS[5].points[0][0]) / 2, (MS[5].points[3][1] + MS[5].points[0][1]) / 2, ]; // other triangle flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[2], pos: [MS[2].centerPos[0] - midPos[0], MS[2].centerPos[1] - midPos[1]], }); // triangle adjacent to square flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[3], pos: [MS[3].centerPos[0] - midPos[0], MS[3].centerPos[1] - midPos[1]], }); // square flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[5], pos: [MS[5].centerPos[0] - midPos[0], MS[5].centerPos[1] - midPos[1]], }); flyer.default.pos[0] += 5; flyer.default.pos[1] += 15; flyer.default.r = 30; break; case "STS": // center triangle flyer.fShapes.push({ renderData: newRenderData(false), r: GRID_ORI[1], pos: [0, 0], }); // square left (facing down) flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[4], pos: [ MS[4].centerPos[0] - MS[1].centerPos[0], MS[4].centerPos[1] - MS[1].centerPos[1], ], }); // square right (facing down) flyer.fShapes.push({ renderData: newRenderData(true), r: GRID_ORI[5], pos: [ MS[5].centerPos[0] - MS[1].centerPos[0], MS[5].centerPos[1] - MS[1].centerPos[1], ], }); flyer.default.pos[1] -= 22; break; } // apply default to render flyer.pos = flyer.default.pos.slice(0); flyer.r = flyer.default.r; return flyer; } // Placeable: { pos, r, shapes[] (same order as fShapes) } function generatePlaceables() { // don't generate if there are still flashers if (PLAY_SCENE.placementFlashers.length > 0 \|\| PLAY_SCENE.clearFlasers.length > 0) { return; } // already done with 0,1,2 if (PLAY_SCENE.placeableGenIndex > 2) {return;} var piece = PLAY_SCENE.pieces[PLAY_SCENE.placeableGenIndex]; var placeables = []; switch (piece.type) { case "T": for (var i = 0; i < ALL_TRIANGLES.length; i++) { var t = ALL_TRIANGLES[i]; if (t.renderData === null \|\| piece.isNeg) { placeables.push({ pos: t.centerPos, r: GRID_ORI[t.shapeIndex], shapes: [t], }); } } break; case "S": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.renderData === null \|\| piece.isNeg) { placeables.push({ pos: s.centerPos, r: GRID_ORI[s.shapeIndex], shapes: [s], }); } } break; case "TT": for (var i = 0; i < ALL_TRIANGLES.length; i++) { var t = ALL_TRIANGLES[i]; if (t.nShapes[0] && ((t.renderData === null && t.nShapes[0].renderData === null) \|\| piece.isNeg)) { var ORI = [0, 180, 270, 90]; placeables.push({ pos: t.centerPos, r: ORI[t.shapeIndex], shapes: [t, t.nShapes[0]], }); } } break; case "ST": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.renderData === null \|\| piece.isNeg) { // check the 4 neighbor triangles for (var nb = 0; nb < s.nShapes.length; nb++) { if (s.nShapes[nb] && (s.nShapes[nb].renderData === null \|\| piece.isNeg)) { var midPos = [ (s.points[nsi(nb)][0] + s.points[nsi(1 + nb)][0]) / 2, (s.points[nsi(nb)][1] + s.points[nsi(1 + nb)][1]) / 2, ]; var r = s.shapeIndex === 5 ? 120 : 90; placeables.push({ pos: midPos, r: nb * 90 - r, shapes: [s, s.nShapes[nb]], }); } } } } break; case "TST-": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.renderData === null \|\| piece.isNeg) { // check the 4 neighbor triangles for (var nb = 0; nb < s.nShapes.length; nb++) { if (s.nShapes[nb] && (s.nShapes[nb].renderData === null \|\| piece.isNeg)) { var otherT = s.nShapes[nsi(nb + 2)]; if (otherT && (otherT.renderData === null \|\| piece.isNeg)) { var midPos = [ (s.points[nsi(nb)][0] + s.points[nsi(1 + nb)][0]) / 2, (s.points[nsi(nb)][1] + s.points[nsi(1 + nb)][1]) / 2, ]; var r = s.shapeIndex === 5 ? 120 : 90; placeables.push({ pos: midPos, r: nb * 90 - r, shapes: [s, s.nShapes[nb], otherT], }); } } } } } break; case "TST^": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.renderData === null \|\| piece.isNeg) { // check the 4 neighbor triangles for (var nb = 0; nb < s.nShapes.length; nb++) { if (s.nShapes[nb] && (s.nShapes[nb].renderData === null \|\| piece.isNeg)) { var otherT = s.nShapes[nsi(nb + 1)]; if (otherT && (otherT.renderData === null \|\| piece.isNeg)) { var midPos = [ (s.points[nsi(nb)][0] + s.points[nsi(1 + nb)][0]) / 2, (s.points[nsi(nb)][1] + s.points[nsi(1 + nb)][1]) / 2, ]; var r = s.shapeIndex === 5 ? 120 : 90; placeables.push({ pos: midPos, r: nb * 90 - r, shapes: [s, s.nShapes[nb], otherT], }); } } } } } break; case "STT": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.shapeIndex === 4 && (s.renderData === null \|\| piece.isNeg)) { // check the 4 neighbor triangles for (var nb = 0; nb < s.nShapes.length; nb++) { var t1 = s.nShapes[nb]; if (t1 && (t1.renderData === null \|\| piece.isNeg)) { var t2 = t1.nShapes[0]; if (t2 && (t2.renderData === null \|\| piece.isNeg)) { var midPos = [ (s.points[nsi(nb)][0] + s.points[nsi(1 + nb)][0]) / 2, (s.points[nsi(nb)][1] + s.points[nsi(1 + nb)][1]) / 2, ]; placeables.push({ pos: midPos, r: nb * 90 - 180, shapes: [s, t1, t2], }); } } } } } break; case "TTS": for (var i = 0; i < ALL_SQUARES.length; i++) { var s = ALL_SQUARES[i]; if (s.shapeIndex === 5 && (s.renderData === null \|\| piece.isNeg)) { // check the 4 neighbor triangles for (var nb = 0; nb < s.nShapes.length; nb++) { var t1 = s.nShapes[nb]; if (t1 && (t1.renderData === null \|\| piece.isNeg)) { var t2 = t1.nShapes[0]; if (t2 && (t2.renderData === null \|\| piece.isNeg)) { var midPos = [ (s.points[nsi(nb)][0] + s.points[nsi(1 + nb)][0]) / 2, (s.points[nsi(nb)][1] + s.points[nsi(1 + nb)][1]) / 2, ]; placeables.push({ pos: midPos, r: nb * 90 + 90, shapes: [t2, t1, s], }); } } } } } break; case "STS": for (var i = 0; i < ALL_TRIANGLES.length; i++) { var t = ALL_TRIANGLES[i]; var s1 = t.nShapes[2]; var s2 = t.nShapes[1]; if (s1 && s2 && ((t.renderData === null && s1.renderData === null && s2.renderData === null) \|\| piece.isNeg)) { var ORI = [180, 0, 90, 270]; placeables.push({ pos: t.centerPos, r: ORI[t.shapeIndex], shapes: [t, s1, s2], }); } } break; } piece.placeables = placeables; PLAY_SCENE.placeableGenIndex++; } // make all shapes for a core // nCores is neighbor cores var _shapeID = 0; function makeShapesAndLines(core, N_CORE, skippedShapeIndex, SP) { var cores = N_CORE.map(function (index) { if (index === null) {return null;} else {return CORES[index];} }); cores.unshift(core); // add main core too // add shapes to core core.shapes = SP.map(function (pairs, shapeIndex) { // skip this shape? if (skippedShapeIndex === shapeIndex) { return null; } _shapeID++; var shape = { shapeID: _shapeID, shapeIndex: shapeIndex, points: [], renderData: null, }; // add points // if point not exist then shape is null for (var pairIndex = 0; pairIndex < pairs.length; pairIndex++) { var _a = pairs[pairIndex], coreIndex = _a[0], pointIndex = _a[1]; // This core doesn't exist? if (cores[coreIndex] === null) { return null; } else { shape.points.push(cores[coreIndex].points[pointIndex]); } } // add .centerPos & add shape to all shapes arrays if (shapeIsSquare(shape)) { shape.centerPos = [ (shape.points[0][0] + shape.points[2][0]) / 2, (shape.points[0][1] + shape.points[2][1]) / 2, ]; ALL_SQUARES.push(shape); } else { shape.centerPos = [ (shape.points[0][0] + shape.points[1][0] + shape.points[2][0]) / 3, (shape.points[0][1] + shape.points[1][1] + shape.points[2][1]) / 3, ]; ALL_TRIANGLES.push(shape); } return shape; }); var lines = [ getLine(core.shapes[0], 0, 1), getLine(core.shapes[0], 0, 2), getLine(core.shapes[0], 1, 2), getLine(core.shapes[1], 0, 2), getLine(core.shapes[1], 1, 2), getLine(core.shapes[2], 0, 1), getLine(core.shapes[3], 0, 1), getLine(core.shapes[2], 0, 2), getLine(core.shapes[2], 1, 2), getLine(core.shapes[3], 0, 2), ]; // ALL SHAPES array ALL_SHAPES = ALL_SQUARES.concat(ALL_TRIANGLES); // sorted for portals to work ALL_SHAPES.sort(function (shapeA, shapeB) { return shapeA.centerPos[0] - shapeB.centerPos[0]; }); } // also push line into GRID_LINES function getLine(shape, point1Index, point2Index) { if (shape === null) {return null;} var l = [shape.points[point1Index], shape.points[point2Index]]; GRID_LINES.push(l); return l; } function initializeGridData() { var SCALED_SQRT_3 = Math.sqrt(3) * SCALER; var S_SQ3 = SCALER + SCALED_SQRT_3; var gx = width / 2; // grid x var gy = height / 2 - SCALER * 1.5; // grid y var POINTS_POS = [ [gx, gy - S_SQ3 * 2], [gx - S_SQ3, gy - S_SQ3], [gx + S_SQ3, gy - S_SQ3], [gx - S_SQ3 * 2, gy], [gx, gy], [gx + S_SQ3 * 2, gy], [gx - S_SQ3, gy + S_SQ3], [gx + S_SQ3, gy + S_SQ3], [gx, gy + S_SQ3 * 2], ]; // add cores (with .points) POINTS_POS.forEach(function (ppos) { CORES.push({ points: [ // top, bottom, left, right [ppos[0], ppos[1] - SCALED_SQRT_3], [ppos[0], ppos[1] + SCALED_SQRT_3], [ppos[0] - SCALER, ppos[1]], [ppos[0] + SCALER, ppos[1]], ], }); }); // clockwise nCores around a core (index) var N_CORES = [ [null, null, 2, 4, 1, null], [null, 0, 4, 6, 3, null], [null, null, 5, 7, 4, 0], [null, 1, 6, null, null, null], [0, 2, 7, 8, 6, 1], [null, null, null, null, 7, 2], [1, 4, 8, null, null, 3], [2, 5, null, null, 8, 4], [4, 7, null, null, null, 6], ]; // in order of core.shapes // [ [coreIndex, pointIndex], ...] var SHAPES_POINTS = [ // shape-type: points // up-triangle: top,left,right [ [0, 0], [0, 2], [0, 3], ], // down-triangle: left,right,bottom [ [0, 2], [0, 3], [0, 1], ], // left-triangle: left,top,bottom [ [5, 3], [0, 1], [4, 0], ], // right-triangle: right,top,bottom [ [3, 2], [0, 1], [4, 0], ], // left square: left,top,right,bottom [ [5, 0], [0, 2], [0, 1], [5, 3], ], // right square: left,top,right,bottom [ [0, 1], [0, 3], [3, 0], [3, 2], ], ]; // add .shapes to cores (also add lines to gridLines) CORES.forEach(function (core, i) { var skippedShapeIndex = null; if (i === 0) {skippedShapeIndex = 0;} if (i === 8) {skippedShapeIndex = 1;} makeShapesAndLines(core, N_CORES[i], skippedShapeIndex, SHAPES_POINTS); }); // add edge lines that were left out getLine(CORES[0].shapes[1], 0, 1); getLine(CORES[0].shapes[4], 0, 1); getLine(CORES[0].shapes[5], 1, 2); getLine(CORES[1].shapes[4], 0, 1); getLine(CORES[2].shapes[5], 1, 2); getLine(CORES[3].shapes[5], 3, 0); getLine(CORES[5].shapes[4], 2, 3); getLine(CORES[6].shapes[5], 3, 0); getLine(CORES[7].shapes[4], 2, 3); var plusDotShapesCount = {}; // {pos.toString(): {pos, shapes[])} // triangle: [triangle, square(left), square(right)] var N_SHAPE_INDICES = [ // [ [nCoreIndex (+1), shapeIndex(from that core)], ... ] // triangle: other triangle, sLeft, sRight // square: matched with points [ [0, 1], [6, 5], [2, 4], ], [ [0, 0], [0, 5], [0, 4], ], [ [0, 3], [5, 5], [0, 4], ], [ [0, 2], [0, 5], [3, 4], ], [ [6, 3], [0, 1], [0, 2], [5, 0], ], [ [0, 1], [2, 2], [3, 0], [0, 3], ], ]; // add .nShapes to each of .shapes CORES.forEach(function (core, coreIndex) { var cores = N_CORES[coreIndex].map(function (index) { if (index === null) {return null;} else {return CORES[index];} }); cores.unshift(core); // add main core too core.shapes.forEach(function (shape, shapeIndex) { if (!shape) {return;} var nShapeIndices = N_SHAPE_INDICES[shapeIndex]; shape.nShapes = nShapeIndices.map(function (_a) { var _coreIndex = _a[0], nShapeIndex = _a[1]; // This core doesn't exist? if (cores[_coreIndex] === null) { return null; } else { return cores[_coreIndex].shapes[nShapeIndex]; } }); // also count shapes for making plus dots for (var i = 0; i < shape.points.length; i++) { var pos = shape.points[i]; var key = pos[0] + "," + pos[1]; if (plusDotShapesCount[key]) {plusDotShapesCount[key].shapes.push(shape);} else { // create new pos counter plusDotShapesCount[key] = { pos: pos, shapes: [shape], }; } } }); }); // filter plus dots for (var key in plusDotShapesCount) { var posCounter = plusDotShapesCount[key]; if (posCounter.shapes.length === 5) { PLUS_DOTS.push(posCounter); // add this plus dot if has 5 shapes } } // make portal lines PORTAL_LINES = [ // [line index, shape index] [27, 0], [63, 2], [7, 5], [61, 10], [60, 16], [62, 22], [18, 27], [64, 32], [43, 34], [46, 35], [66, 33], [56, 30], [68, 25], [59, 19], [67, 13], [50, 8], [65, 3], [30, 1], ].map(function (item) { return { gridLine: GRID_LINES[item[0]], shape: ALL_SHAPES[item[1]], }; }); } var FLAME_THRESHOLDS = [ // darker, brighter [0, [10, 10, 10], [250, 250, 250]], [500, [227, 230, 70], [227, 230, 70]], [2000, [0, 0, 0], [60, 200, 60]], [5000, [0, 0, 0], [46, 196, 255]], [9000, [0, 0, 0], [238, 48, 255]], [15000, [145, 71, 255], [0, 0, 0]], [20000, [255, 5, 5], [0, 0, 0]], [25000, [255, 255, 255], [255, 255, 255]], ]; var FLAME_STARTING_DURATION = 50; // ms var FLAME_ADDITIONAL_DURATION = 8; // ms var FLAME_WIDTH = 300; var FLAME_PIXEL_COUNT = 20; // amount across flame width var FLAME_NOISE_SCALE = 0.16; var FLAME_SPEED_FACTOR = 0.1; var END_SCENE = { preventInfiniteLoopCounter: 0, timePlayed: null, targetScorePos: null, scorePos: null, doneWithScore: false, flameIndex: 0, progressCountUpMax: 0, progressCountUp: 0, shrinkProgress: 0, afterScoreProgress: 0, replayButton: new Btn(480, 350, 170, 60, function (x, y) { textSize(24); noStroke(); fill(LIGHT_COLOR); text("Play again", x, y); }, function () { SCENE_TRANSITION.switchScene("PLAY"); }), initialize: function () { // reset button this.replayButton.isHovered = false; this.replayButton.glow = 1; this.preventInfiniteLoopCounter = 0; this.timePlayed = null; this.targetScorePos = [width / 2, height / 2]; this.scorePos = [width / 2, height / 2]; this.doneWithScore = false; this.flameIndex = 0; this.progressCountUpMax = FLAME_STARTING_DURATION; this.progressCountUp = 0; this.shrinkProgress = 0; this.afterScoreProgress = 0; // set time played var timeElapsed = Date.now() - startTime; var minute = floor(timeElapsed / 60000); var sec = floor((timeElapsed % 60000) / 1000) + ""; if (sec.length === 1) { sec = "0" + sec; } this.timePlayed = "Time played\n".concat(minute, ":").concat(sec); }, render: function () { background(BG_COLOR); var isLastFlame = this.flameIndex === FLAME_THRESHOLDS.length - 1; var _a = FLAME_THRESHOLDS[min(this.flameIndex, FLAME_THRESHOLDS.length - 1)], startingScore = _a[0], c1 = _a[1], c2 = _a[2]; var endingScore = this.flameIndex < FLAME_THRESHOLDS.length - 1 ? FLAME_THRESHOLDS[this.flameIndex + 1][0] : totalScore; c1 = color(c1[0], c1[1], c1[2]); c2 = color(c2[0], c2[1], c2[2]); var displayScore; if (this.doneWithScore) { displayScore = totalScore; } else { // set score based on progress displayScore = floor(lerp(startingScore, endingScore, this.progressCountUp / this.progressCountUpMax)); // check to stop animating score if (displayScore > totalScore) { displayScore = totalScore; this.doneWithScore = true; } } pushMatrix(); // update pos if (this.doneWithScore) { this.targetScorePos[0] = 200; } this.scorePos[0] += (this.targetScorePos[0] - this.scorePos[0]) * 0.1; this.scorePos[1] += (this.targetScorePos[1] - this.scorePos[1]) * 0.1; // update shrink if (this.shrinkProgress > 0) { this.shrinkProgress = max(0, this.shrinkProgress - 0.08); } translate(this.scorePos[0], this.scorePos[1]); scale(1 + this.shrinkProgress * 0.4); // render score bg var FLAME_PIXEL_SIZE = FLAME_WIDTH / FLAME_PIXEL_COUNT; noStroke(); fill(DARK_COLOR); rect(0, 0, FLAME_WIDTH, 80, 0, 0, 30, 30); // render score textSize(60); fill(this.flameIndex < 5 ? c2 : c1); if (isLastFlame) { fill(255, 150 + cos(frameCount * 10) * 100); } text(displayScore, 0, 0); // render flames var flameHeightCount = this.flameIndex * 3; var HALF_FLAME_WIDTH = FLAME_WIDTH / 2; var renderPixSize = FLAME_PIXEL_SIZE * 1.04; for (var x = 0; x < FLAME_PIXEL_COUNT; x++) { if (isLastFlame) { colorMode(HSB, 255); c1 = color((x / FLAME_PIXEL_COUNT) * 255, 255, 255); c2 = color(((frameCount % 360) / 360) * 255, 100, 255); colorMode(RGB, 255); } for (var y = 0; y < flameHeightCount; y++) { var noiseValue = noise(x * FLAME_NOISE_SCALE, (y - frameCount * this.flameIndex * FLAME_SPEED_FACTOR) * FLAME_NOISE_SCALE); noiseValue += (y - flameHeightCount / 2) * 0.03; if (noiseValue > 0.4 && noiseValue < 0.5) { // FIRE OUTLINE fill(c2); } else if (noiseValue <= 0.4) { // FIRE WALLS if (x === 0 \|\| x === FLAME_PIXEL_COUNT - 1 \|\| y === flameHeightCount - 1) { fill(c2); } else { if (isLastFlame) { fill(c1); } else { fill(lerpColor(c2, c1, round(max(0, noiseValue) * 15) / (this.flameIndex < 5 ? 10 : 5))); } } } else { continue; // emptiness } rect((x + 0.5) * FLAME_PIXEL_SIZE - HALF_FLAME_WIDTH, -40 - (y + 0.5) * FLAME_PIXEL_SIZE, renderPixSize, renderPixSize); } } popMatrix(); // update score & flames when not transitioning if (SCENE_TRANSITION.progress >= 1 && !this.doneWithScore) { if (this.progressCountUp === this.progressCountUpMax) { if (this.flameIndex < FLAME_THRESHOLDS.length - 1) { _playSound(sounds.piecePlaced, 2); this.flameIndex++; this.shrinkProgress = 1; } this.progressCountUpMax = FLAME_STARTING_DURATION + this.flameIndex * FLAME_ADDITIONAL_DURATION; this.progressCountUp = 0; this.targetScorePos[1] = height / 2 + this.flameIndex * 20; // moved down if (displayScore >= totalScore) {this.doneWithScore = true;} } this.progressCountUp++; // force exit after around 16.7 seconds if (this.preventInfiniteLoopCounter++ > 600) { this.doneWithScore = true; } } if (this.doneWithScore) { this.afterScoreProgress = min(1, this.afterScoreProgress + 0.01); // render time played noStroke(); textSize(easeOutElastic(this.afterScoreProgress) * 28); fill(LIGHT_COLOR); text(this.timePlayed, 480, 250); this.replayButton.render(); } }, mouseClicked: function () { if (this.doneWithScore && this.replayButton.isHovered) { this.replayButton.clicked(); } }, }; sounds.buttonClicked = getSound("rpg/battle-swing"); sounds.piecePlaced = getSound("rpg/hit-splat"); sounds.shapeCleared = getSound("rpg/water-bubble"); sounds.buttonClicked.audio.preservesPitch = false; sounds.piecePlaced.audio.preservesPitch = false; sounds.shapeCleared.audio.preservesPitch = false; function _playSound(sound, rate){ sound.audio.currentTime = 0; sound.audio.playbackRate = 1 + rate; playSound(sound); } // configs rectMode(CENTER); imageMode(CENTER); textAlign(CENTER, CENTER); strokeJoin(ROUND); textSize(40); textFont(createFont("monospace")); TEXTURE_LOADER.createMasks(); START_SCENE.titleSetup(); function draw() { touchCountdown--; cursor(ARROW); if (scene === "PLAY") { PLAY_SCENE.render(); } else if (scene === "START") { START_SCENE.render(); } else if (scene === "END") { END_SCENE.render(); } SCENE_TRANSITION.update(); } function mouseClicked() { if (touchCountdown > 0) {return;} else {touchCountdown = 5;} if (scene === "PLAY") { PLAY_SCENE.mouseClicked(); } else if (scene === "START") { START_SCENE.mouseClicked(); } else if (scene === "END") { END_SCENE.mouseClicked(); } } SCENE_TRANSITION = { progress: 1, isClosing: true, prevScene: null, nextScene: null, switchScene: function (nextScene) { this.nextScene = nextScene; this.progress = 0; this.isClosing = true; }, update: function () { if (this.progress < 1) { this.progress += 0.04; fill(BG_COLOR); noStroke(); if (this.isClosing) { triangle(width, height, width, height - this.progress * height * 2, width - width * this.progress * 2, height); } else { triangle(0, 0, (width - this.progress * width) * 2, 0, 0, (height - this.progress * height) * 2); } // check done if (this.progress >= 1 && this.isClosing) { scene = this.nextScene; this.nextScene = null; this.progress = 0; this.isClosing = false; if (scene === "PLAY") {PLAY_SCENE.initializeGame();} else if (scene === "END") {END_SCENE.initialize();} } } }, };
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgOvY0biqCQw
Votes	48
Spin-Offs	2
Type	PJS
Width	600
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	Logix Indie
Author Name	logixindie
Author ID	kaid_392376572178111917340371
Author Profile Access	PUBLIC

Archive Data

Added	8 months ago, 1713302853247
Updated	8 months ago, 1713302853247
Source Deleted	unknown