[TEMPLATE] Your Name!

{"name":"Animate Your Name 8-21-2025","description":"Create your own animated sprite world! Upload your favorite sprites and watch them come to life with this fun and interactive project.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/oneffvwd1dkzqioonpun","view_count":2,"fork_count":0,"expires_at":null,"created_at":"2025-08-21T18:51:11.283250Z","updated_at":"2025-08-21T18:51:11.283254Z","user_id":70,"status":"PRIVATE","parent_id":1691,"id":9712,"user":{"photo":null,"email":"kristen@jippity.pro","recess_id":"0c22a63e-e8fa-453f-a493-d113532a13c2","created_at":"2024-03-23T19:20:56.974481Z","reset_token":"GD2dODEjNUbAH88Yx-1HMTa4uc_OUtvTa0c5D-VKUhw","stripe_customer_id":"cus_RPbovGjLueUufv","seats":200,"username":"kris10","id":70,"password_hash":"$2b$12$abwA8Crfrc22ANEFpZErHeQDLvhr9RJOD0lMNLh7PJGrAn7M//qEC","updated_at":"2024-03-23T19:20:56.974485Z","reset_token_expiry":"2025-01-14T23:32:05.455609","subscription_status":"active"},"code":{"script.js":"/************************/\n\n// The background color will be a combination of Red, Green, and Blue.\n// The minimum for each is 0 and the maximum is 255.\n// Try changing the numbers!\nlet backgroundRed = 100;\n\nlet backgroundGreen = 50;\n\nlet backgroundBlue = 150;\n\n// This saves space where we'll load our letter images.\nlet letters = {};\n\n/* Now we just need to see how the individual animations work. */\n\n\n// We make some space in memory to store the angle of each letter that rotates.\nlet rotationAngles = {};\n\n\n// We make space in memory to store the size multiplier and the direction (getting bigger versus smaller).\nlet pulseScales = {};\n\nlet pulseDirections = {};\n\n\n// Make space in memory to keep track of the color of each rainbow-ized letter.\nlet rainbowTints = {};\n\nconst myName = \"Kristen\";\n\n// This fills in that space with each individual *asset* (image).\nfunction preload() {\n letters['a'] = loadImage(\"@asset('letterA')\");\n letters['b'] = loadImage(\"@asset('letterB')\");\n letters['c'] = loadImage(\"@asset('letterC')\");\n letters['d'] = loadImage(\"@asset('letterD')\");\n letters['e'] = loadImage(\"@asset('letterE')\");\n letters['f'] = loadImage(\"@asset('letterF')\");\n letters['g'] = loadImage(\"@asset('letterG')\");\n letters['h'] = loadImage(\"@asset('letterH')\");\n letters['i'] = loadImage(\"@asset('letterI')\");\n letters['j'] = loadImage(\"@asset('letterJ')\");\n letters['k'] = loadImage(\"@asset('letterK')\");\n letters['l'] = loadImage(\"@asset('letterL')\");\n letters['m'] = loadImage(\"@asset('letterM')\");\n letters['n'] = loadImage(\"@asset('letterN')\");\n letters['o'] = loadImage(\"@asset('letterO')\");\n letters['p'] = loadImage(\"@asset('letterP')\");\n letters['q'] = loadImage(\"@asset('letterQ')\");\n letters['r'] = loadImage(\"@asset('letterR')\");\n letters['s'] = loadImage(\"@asset('letterS')\");\n letters['t'] = loadImage(\"@asset('letterT')\");\n letters['u'] = loadImage(\"@asset('letterU')\");\n letters['v'] = loadImage(\"@asset('letterV')\");\n letters['w'] = loadImage(\"@asset('letterW')\");\n letters['x'] = loadImage(\"@asset('letterX')\");\n letters['y'] = loadImage(\"@asset('letterY')\");\n letters['z'] = loadImage(\"@asset('letterZ')\");\n}\n\n// This block of code runs once, right when the page loads.\nfunction setup() {\n //This sets up a \"Canvas\" — blank space where we can draw.\n createCanvas(windowWidth, windowHeight);\n // This mode means we measure images (like block letters) from their centers, not their top-left corners, as is the default.\n imageMode(CENTER);\n // This sets the background color.\n background(backgroundRed, backgroundGreen, backgroundBlue);\n // This line tells the computer to draw the name inside the \" \".\n // The code for drawName() is down below.\n drawName(myName);\n}\n\n// The function draw() runs over and over, 60 times per second.\n// That gives us the ability to animate images!\nfunction draw() {\n // Ensure we are in Red-Green-Blue color mode. (We will see another color mode later.)\n colorMode(RGB);\n // First, we re-draw the background...\n background(backgroundRed, backgroundGreen, backgroundBlue);\n // ...then, re-draw the name.\n drawName(myName);\n}\n\n/* How does drawName() work? Let's break it down.\nFor each letter in the name, we apply an animation.\nThree animations are already coded for you: rotate, grow, and rainbow. \nYou will tell the computer which animations to apply to which letter. */\n\n\nfunction drawName(name) {\n // Each letter 60 pixels of space to occupy...\n const letterWidth = 60;\n // ..and 5 pixels of space in between. (Try changing these nunmbers!)\n const letterSpacing = 5;\n\n // A little math to calculate the total width of the name...\n const totalWidth = name.length * (letterWidth + letterSpacing);\n // ...and where the first letter should be drawn horizontally...\n const startX = (width / 2) - (totalWidth / 2);\n // ... and vertically.\n const centerY = height / 2;\n\n // Keep track of where we are drawing each letter as we move to the right.\n let currentX = startX;\n\n /*************************************************************************/\n // Set your animations here. Each number is one letter, from left to right.\n const animationMap = {\n 0: rotateLetter, // \"J\" in \"JIPPITY\"...\n 1: growLetter, // ... first \"I\" in \"JIPPITY\"...\n 2: rainbowLetter, // ...and so on.\n 3: rainbowLetter,\n 4: growLetter,\n 5: rotateLetter,\n 6: growLetter,\n };\n /*************************************************************************/\n\n // This *for loop* goes through each letter and draws it with the proper animation.\n for (let i = 0; i < name.length; i++) {\n // Save the name of the current letter we're on.\n const char = name[i].toLowerCase();\n if (letters[char]) { // Make sure that letter exists, then...\n //... do some math to calculate where to place the letter.\n const letterX = currentX + letterWidth / 2;\n const letterY = centerY;\n // And give the letter a unique ID so we can keep track of it as it animates.\n const uniqueKey = `${char}${i}`;\n\n // These three chunks check if this letter's animation haven't started yet (they are 'undefined')...\n // ... and initializes them if so. (We'll see what this means a little lower down.)\n if (rotationAngles[uniqueKey] === undefined) {\n rotationAngles[uniqueKey] = 0;\n }\n\n if (pulseScales[uniqueKey] === undefined) {\n pulseScales[uniqueKey] = 1;\n }\n\n if (rainbowTints[uniqueKey] === undefined) {\n rainbowTints[uniqueKey] = 0;\n }\n\n // Then, go grab the correct animation from the animationMap you set up...\n const animate = animationMap[i];\n // ...and if it exists, perform the animatino with the right specifications: letter, ID, and placement.\n if (animate) {\n animate(char, uniqueKey, letterX, letterY, letterWidth);\n } else { // But if no animation is given, just draw the letter plain.\n push();\n translate(letterX, letterY);\n image(letters[char], 0, 0);\n pop();\n }\n // Finally, shift currentX over to prepare for the next letter.\n currentX += letterWidth + letterSpacing;\n }\n }\n}\n\nfunction rotateLetter(char, uniqueKey, letterX, letterY, letterWidth) {\n // We do a little math to check if the mouse is over a letter.\n if (mouseX > letterX - letterWidth / 2 && mouseX < letterX + letterWidth / 2 &&\n mouseY > letterY - letterWidth / 2 && mouseY < letterY + letterWidth / 2) {\n // And if it is, we increase the rotation angle a little bit (change this number to speed up or slow down the rotation).\n rotationAngles[uniqueKey] += 0.05;\n }\n\n // Now, draw the letter. [push() and pop() are useful for drawing something that has been transformed without transforming the whole canvas.]\n push();\n translate(letterX, letterY); // Slide to the right position...\n rotate(rotationAngles[uniqueKey]); // ...rotate...\n image(letters[char], 0, 0); // ... and draw the letter.\n pop();\n}\n\nfunction growLetter(char, uniqueKey, letterX, letterY, letterWidth) {\n // The biggest the letter will get will be double-size...\n const maxScale = 2.0;\n // ... and the smallest will be half.\n const minScale = 0.5;\n // A full cycle will take 5 seconds at 60 frames per second.\n const cycleDuration = 5 * 60;\n // This calculation works out how much we need to change the size of a letter each frame.\n const scaleSpeed = (maxScale - minScale) / (cycleDuration / 2);\n\n // If the letter animation hasn't started yet...\n if (pulseDirections[uniqueKey] === undefined) {\n pulseDirections[uniqueKey] = true; // ... make sure it starts by growing. (true = grow; false = shrink)\n }\n\n // If the mouse is over the letter...\n if (mouseX > letterX - letterWidth / 2 && mouseX < letterX + letterWidth / 2 &&\n mouseY > letterY - letterWidth / 2 && mouseY < letterY + letterWidth / 2) {\n\n if (pulseDirections[uniqueKey] == true) {\n pulseScales[uniqueKey] += scaleSpeed; // ... increase the size multpiler while growing...\n } else {\n pulseScales[uniqueKey] -= scaleSpeed; // ... and decrease it while shrinking.\n }\n\n\n if (pulseScales[uniqueKey] >= maxScale) { // If the letter reaches maximum size...\n pulseDirections[uniqueKey] = false; // ... set it to shrink.\n } else if (pulseScales[uniqueKey] <= minScale) { // And if it reaches minimum...\n pulseDirections[uniqueKey] = true; // ... set it to grow.\n }\n\n\n }\n // Then draw the letter, as before.\n push();\n translate(letterX, letterY);\n scale(pulseScales[uniqueKey]); // Except this time, scale instead of rotate.\n image(letters[char], 0, 0);\n pop();\n}\n\nfunction rainbowLetter(char, uniqueKey, letterX, letterY, letterWidth) {\n // We switch to Hue, Saturation, Lightness color mode because then all the colors of the rainbow are on a 0-to-360 clock.\n colorMode(HSL);\n\n // This number will control how fast we move through colors.\n const hueSpeed = 1;\n\n // If the mouse is over a letter...\n if (mouseX > letterX - letterWidth / 2 && mouseX < letterX + letterWidth / 2 &&\n mouseY > letterY - letterWidth / 2 && mouseY < letterY + letterWidth / 2) {\n if (rainbowTints[uniqueKey] === 0) { // ... and the letter hasn't been colored yet...\n rainbowTints[uniqueKey] = random(1, 360); // ... give it a random color.\n }\n // Then, change the color a little at a time.\n rainbowTints[uniqueKey] += hueSpeed;\n // And loop that number on a clock of 360 numbers.\n rainbowTints[uniqueKey] = (rainbowTints[uniqueKey] % 360) + 1;\n }\n\n // Draw the letter.\n push();\n translate(letterX, letterY);\n if (rainbowTints[uniqueKey] > 0) { // When this number *is* zero, the letter will stay white.\n tint(rainbowTints[uniqueKey], 100, 50); // tint() changes the color.\n }\n image(letters[char], 0, 0);\n pop();\n}\n\n","style.css":"","index.html":"\n\n\n\n \n \n [TEMPLATE] Your Name!\n \n\n\n\n \n \n\n\n"},"chat_history":[{"message":"Let's get started!\n Errors:\n","project_id":9712,"created_at":"2025-08-21T18:51:33.953601Z","output_tokens":null,"code_id":278283,"sender":"client_script","deleted":0,"input_tokens":null,"id":167893},{"message":"Great! Could you tell me a bit more about what you'd like to do with your project? I see that there are some ideas listed like drawing more words, adding animations, changing background colors, making letters draggable, and adding sound effects. Which of these ideas are you interested in exploring, or do you have a different feature in mind?","project_id":9712,"created_at":"2025-08-21T18:51:35.290703Z","output_tokens":85,"code_id":278283,"sender":"ai","deleted":0,"input_tokens":5460,"id":167894},{"message":"lets make it say Kristen instead of Jippity","project_id":9712,"created_at":"2025-08-21T18:51:47.421827Z","output_tokens":null,"code_id":278283,"sender":"human","deleted":0,"input_tokens":null,"id":167895},{"message":"To change the name from \"Jippity\" to \"Kristen,\" you'll need to update the `myName` variable in your JavaScript code. Let's make that change:\n\n```javascript\n// script.js\n// Put your name here! Make sure it's in between the \" \".\n/************************/\nconst myName = \"Kristen\";\n/************************/\n```\n\n- This change updates the `myName` variable to \"Kristen,\" so the program will draw and animate the letters of \"Kristen\" instead.\n- If you want to change the animations applied to each letter, you can update the `animationMap` within the `drawName` function. Let me know if you want to modify those as well!","project_id":9712,"created_at":"2025-08-21T18:51:48.237823Z","output_tokens":154,"code_id":278283,"sender":"ai","deleted":0,"input_tokens":5465,"id":167896}],"assets":[{"creator":null,"project_id":9712,"cloudinary_id":"n1zg2fufnhouabfkyz2u","deleted":false,"id":85073,"name":"number0","created_at":"2025-08-21T18:51:13.214121Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"bqhdgprk5uqi41dcsbeh","deleted":false,"id":85072,"name":"number1","created_at":"2025-08-21T18:51:13.166612Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"lsml2gzgppbrrjdobalp","deleted":false,"id":85071,"name":"number2","created_at":"2025-08-21T18:51:13.117459Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"fgyrydispdhm7scki91w","deleted":false,"id":85070,"name":"number3","created_at":"2025-08-21T18:51:13.070352Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"sflhpspo00f1nbcqmefe","deleted":false,"id":85069,"name":"number4","created_at":"2025-08-21T18:51:13.021598Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"nhuvsohthjzjq9oqbxdd","deleted":false,"id":85068,"name":"number5","created_at":"2025-08-21T18:51:12.972017Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"n8nujy0gmumzp32lljqv","deleted":false,"id":85067,"name":"number6","created_at":"2025-08-21T18:51:12.925092Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"qql6viq5bmqgnwdxhhvw","deleted":false,"id":85066,"name":"number7","created_at":"2025-08-21T18:51:12.877683Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"vhxdqsbmmqs9sjhidhg4","deleted":false,"id":85065,"name":"number8","created_at":"2025-08-21T18:51:12.830834Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"hdpvermg4f6yl4mmitsh","deleted":false,"id":85064,"name":"number9","created_at":"2025-08-21T18:51:12.782876Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"f8lgnemelwoe1vqcngdc","deleted":false,"id":85063,"name":"letterA","created_at":"2025-08-21T18:51:12.735213Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"qvzbfdsovb6zruye6v5o","deleted":false,"id":85062,"name":"letterB","created_at":"2025-08-21T18:51:12.687613Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"j0eegiuu6cqfwhsjuxon","deleted":false,"id":85061,"name":"letterC","created_at":"2025-08-21T18:51:12.637609Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"gb82j3k8qjw1mr1xuwq5","deleted":false,"id":85060,"name":"letterD","created_at":"2025-08-21T18:51:12.589828Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"xibntwcpvbmyfsrtja4s","deleted":false,"id":85059,"name":"letterE","created_at":"2025-08-21T18:51:12.542103Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"ted4zc8q6aku2w6atrva","deleted":false,"id":85058,"name":"letterF","created_at":"2025-08-21T18:51:12.495176Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"gz6gplunbzwmaluwlr4y","deleted":false,"id":85057,"name":"letterG","created_at":"2025-08-21T18:51:12.447874Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"ihg0zqdibmqvfbvyjufq","deleted":false,"id":85056,"name":"letterH","created_at":"2025-08-21T18:51:12.400817Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"re96hbs1jadnnncosftj","deleted":false,"id":85055,"name":"letterI","created_at":"2025-08-21T18:51:12.351180Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"jxaaxtpvmrarcqbnawjc","deleted":false,"id":85054,"name":"letterJ","created_at":"2025-08-21T18:51:12.304235Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"x2s3mz260zyih98sfxqj","deleted":false,"id":85053,"name":"letterK","created_at":"2025-08-21T18:51:12.257318Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"mpp0fiak2isb5osalkr6","deleted":false,"id":85052,"name":"letterL","created_at":"2025-08-21T18:51:12.210465Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"kxvpqrpr6tf6w55iolp8","deleted":false,"id":85051,"name":"letterM","created_at":"2025-08-21T18:51:12.163434Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"ozs4v5s80spdinqrslla","deleted":false,"id":85050,"name":"letterN","created_at":"2025-08-21T18:51:12.115673Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"tfomoj0jstfbc46akcea","deleted":false,"id":85049,"name":"letterO","created_at":"2025-08-21T18:51:12.067981Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"zazbsjfdctkpcc27ritg","deleted":false,"id":85048,"name":"letterP","created_at":"2025-08-21T18:51:12.020750Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"c9rb1u84ti7cvza8zxuo","deleted":false,"id":85047,"name":"letterQ","created_at":"2025-08-21T18:51:11.973856Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"iwfogwugvu0i3zv5o4sg","deleted":false,"id":85046,"name":"letterR","created_at":"2025-08-21T18:51:11.927025Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"wlc1qiqo50xpbokkjmra","deleted":false,"id":85045,"name":"letterS","created_at":"2025-08-21T18:51:11.880292Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"usg4c9db2r9kz4dsutoy","deleted":false,"id":85044,"name":"letterT","created_at":"2025-08-21T18:51:11.833433Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"oomx3ug1eaebyo1lsyvm","deleted":false,"id":85043,"name":"letterU","created_at":"2025-08-21T18:51:11.785909Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"o29o7qoafnpavhslzbrv","deleted":false,"id":85042,"name":"letterV","created_at":"2025-08-21T18:51:11.739088Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"h5wmbnjk0ffsozyqfj83","deleted":false,"id":85041,"name":"letterW","created_at":"2025-08-21T18:51:11.692044Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"zhvf8re5dy3k5sccyr9a","deleted":false,"id":85040,"name":"letterX","created_at":"2025-08-21T18:51:11.645186Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"w3ldqrmzjtqq9csweize","deleted":false,"id":85039,"name":"letterY","created_at":"2025-08-21T18:51:11.598222Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"zy9mz3zte2io7k1waibh","deleted":false,"id":85038,"name":"letterZ","created_at":"2025-08-21T18:51:11.547156Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"twg8oesevh3tp5t7zm4w","deleted":false,"id":85037,"name":"SS","created_at":"2025-08-21T18:51:11.499996Z","resource_type":"image","tags":[]},{"creator":null,"project_id":9712,"cloudinary_id":"oneffvwd1dkzqioonpun","deleted":false,"id":85036,"name":"gif","created_at":"2025-08-21T18:51:11.453375Z","resource_type":"image","tags":[]}],"messages_sent":1,"comments":[],"steps":[]}