Ahhhhhhhh My Face Is Bouncing

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_195":196,"_197":198},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_146":-5,"_20":147,"_22":148,"_149":150,"_151":152,"_25":153,"_24":-5,"_154":-5,"_155":-5,"_156":54,"_157":158,"_159":54,"_160":-5,"_161":-5,"_162":163},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","shouser","name","tank-1741717761388","branchName","main","version","path","","project",{"_35":92,"_13":14,"_47":93,"_94":-5,"_95":54,"_96":97,"_98":97,"_99":100,"_101":-5,"_102":103,"_104":-5,"_105":46,"_106":-5,"_107":-5,"_108":49,"_109":110,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":116,"_124":125,"_126":127,"_128":129,"_130":54},"tree",[71,72,73],"file","contents",[32,33,34],"upstream","pull","ahead","behind","envVars",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":69,"_51":-5,"_53":54,"_55":-5,"_18":70},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":24,"_51":62,"_53":54,"_55":-5,"_18":63},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":56},"id","c3b2d4be-fea6-11ef-8d42-569c3dd06744","tank.html","fileId","c3b2d55e-fea6-11ef-8d42-569c3dd06744","parentId","branchId","c03dc64a-fea6-11ef-ba99-569c3dd06744","branchVersion",3,"latest",true,"createdAt",["D",1741717767304],0,"fileType","content","\n\n \n \n \n \n Ahhhhhhhh My Face Is Bouncing\n \n \n \n \n \n \n

\n \n \n

\n \n\n","deleted",false,"label",[37],"c1cf35d4-fea6-11ef-b3db-569c3dd06744","README.md","c1cf367e-fea6-11ef-b3db-569c3dd06744",1,["D",1741717764135],"# Tank\n\nI wanted to visualize pushing my computer to its limits!\n",[58],"c3aca6b6-fea6-11ef-8f6c-569c3dd06744","scripts","e2f000f7-a968-4c8d-80c6-643e1acc66b3",2,["D",1741717767260],"directory",[65],{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":81,"_17":49,"_50":69,"_51":-5,"_53":54,"_55":-5,"_75":82,"_18":83},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":49,"_50":24,"_51":62,"_53":54,"_55":-5,"_75":79,"_18":80},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_75":76,"_18":77},["D",1741717767304],"children",[],[37],["D",1741717764135],[],[58],["D",1741717767260],[84],[65],{"_35":85,"_13":86,"_38":87,"_40":66,"_41":42,"_43":67,"_45":46,"_47":88,"_17":49,"_50":24,"_51":89,"_53":54,"_55":-5,"_75":90,"_18":91},"c3ac9d4c-fea6-11ef-8f6c-569c3dd06744","tank.js","c3ac9e00-fea6-11ef-8f6c-569c3dd06744",["D",1741717767260],"// Ahhhhhhhh My Face Is Bouncing\n\nlet xPos;\nlet yPos;\n\nlet xspeed;\nlet yspeed;\n\nlet dvd;\n\nlet faces = [];\n\nlet faceCount;\n\nlet r, g, b;\n\nclass Face {\n constructor(currImageSource, xPos, yPos, xSpeed, ySpeed, topTint) {\n this.faceRightImageSource = 'res/falafelFaceRight.png';\n this.faceLeftImageSource = 'res/falafelFaceLeft.png';\n\n this.topTint = topTint;\n this.xPos = xPos;\n this.yPos = yPos;\n this.xSpeed = xSpeed;\n this.ySpeed = ySpeed;\n this.currImageSource = currImageSource\n this.image = loadImage(currImageSource);\n }\n\n flip() {\n if (this.currImageSource == this.faceRightImageSource) {\n this.currImageSource = this.faceLeftImageSource;\n } else if (this.currImageSource == this.faceLeftImageSource) {\n this.currImageSource = this.faceRightImageSource;\n }\n\n this.image = loadImage(this.currImageSource); \n }\n\n move() {\n image(this.image, this.xPos, this.yPos);\n\n this.xPos = this.xPos + this.xSpeed;\n this.yPos = this.yPos + this.ySpeed;\n \n if (this.xPos + this.image.width >= width) {\n this.xSpeed = -this.xSpeed;\n this.xPos = width - this.image.width;\n this.tint();\n this.flip();\n } else if (this.xPos <= 0) {\n this.xSpeed = -this.xSpeed;\n this.xPos = 0;\n this.tint();\n this.flip();\n }\n \n if (this.yPos + this.image.height >= height) {\n this.ySpeed = -this.ySpeed;\n this.yPos = height - this.image.height;\n this.tint();\n } else if (this.yPos <= 0) {\n this.ySpeed = -this.ySpeed;\n this.yPos = 0;\n this.tint();\n }\n }\n\n tint() {\n r = random(50, this.topTint);\n g = random(50, this.topTint);\n b = random(50, this.topTint);\n\n tint(r, g, b);\n } \n}\n\nfunction preload() {}\n\nfunction setup(faceCount = 20) {\n createCanvas(windowWidth, windowHeight);\n console.log(\"setup\");\n console.log(faceCount);\n\n var i;\n for (i=0; i < faceCount; i++) {\n xPos = random(width);\n yPos = random(height);\n xspeed = random(6);\n yspeed = random(6);\n topTint = random(256);\n \n faces[i] = new Face('res/falafelFaceRight.png', xPos, yPos, xspeed, yspeed, topTint);\n }\n}\n\nfunction draw() {\n background(0);\n var i;\n animateCount = random(faceCount);\n\n for (i=0; i < animateCount; i++) {\n faces[i].move();\n }\n}\n\nfunction setFaceCount() {\n faceCount = document.getElementById('faceCount').value;\n console.log(faceCount)\n\n setup(faceCount);\n}\n",[],[65,86],"c03d7f8c-fea6-11ef-ba99-569c3dd06744",["D",1741717761503],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Imported from GitHub: sophiehouser/tank","imageUrl","userId","387c2a1a-af32-4662-ba80-cb97133b520c","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","a64c2ee7-6cd7-4fb7-9ff6-03782ed89739","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_145":141},"org",{"_11":12,"_139":-5,"_140":141,"_102":103,"_142":143,"_144":54},"branch",{"_17":44,"_13":16,"_35":42,"_131":92,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJzR3VCb2xOR0loZEIwRWg5cnlVZUt4ajlpQiJ9","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":92,"_13":14,"_47":191,"_94":-5,"_95":54,"_96":97,"_98":97,"_99":100,"_101":-5,"_102":103,"_104":-5,"_105":46,"_106":-5,"_107":-5,"_108":49,"_109":110,"_111":-5,"_112":-5,"_113":-5,"_114":-5,"_115":116,"_117":116,"_118":119,"_120":119,"_121":119,"_122":116,"_123":116,"_124":192,"_126":193,"_128":194,"_130":54},[179,181,182],"files",[179,180,181,182],"counts",{"_170":49,"_171":60,"_172":49,"_31":173,"_174":175},[164,165,166],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":68,"_17":49,"_50":69,"_51":-5,"_53":54,"_55":-5,"_18":169},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":61,"_17":49,"_50":24,"_51":62,"_53":54,"_55":-5,"_18":168},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_18":167},[37],[58],[65],"pulls","branches","forks",{"_176":49,"_178":49},"connections",{"_176":49,"_177":49},"count","unfilledCount","emptyCount",{"_35":64,"_13":65,"_38":66,"_40":-5,"_41":42,"_43":67,"_45":46,"_47":81,"_17":49,"_50":69,"_51":-5,"_53":54,"_55":-5,"_75":189,"_18":190},{"_35":85,"_13":86,"_38":87,"_40":66,"_41":42,"_43":67,"_45":46,"_47":88,"_17":49,"_50":24,"_51":89,"_53":54,"_55":-5,"_75":187,"_18":188},{"_35":57,"_13":58,"_38":59,"_40":-5,"_41":42,"_43":60,"_45":46,"_47":78,"_17":49,"_50":24,"_51":62,"_53":54,"_55":-5,"_75":185,"_18":186},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":74,"_17":49,"_50":24,"_51":52,"_53":54,"_55":-5,"_75":183,"_18":184},[],[37],[],[58],[],[65,86],[180],[65],["D",1741717761503],{"_11":12,"_145":141},{"_11":12,"_139":-5,"_140":141,"_102":103,"_142":143,"_144":54},{"_17":44,"_13":16,"_35":42,"_131":92,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":14,"_138":12},"ctx",{"_124":-5,"_161":228,"_229":230,"_231":232,"_233":54,"_234":54,"_235":54,"_236":46,"_237":-5,"_238":-7,"_239":-7,"_240":49,"_241":54,"_242":54,"_243":-5,"_244":54,"_245":54,"_246":54,"_247":-5},"ENV",{"_199":200,"_201":202,"_203":16,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223,"_224":225,"_226":227},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code