[TEMPLATE] Your Name!

{"name":"[TEMPLATE] Animate Your Name","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":19,"fork_count":242,"expires_at":null,"created_at":"2025-08-06T08:51:09.201333Z","updated_at":"2025-08-06T08:51:09.201334Z","user_id":246,"status":"DELETED","parent_id":null,"id":1691,"user":{"photo":null,"email":"kristen@recess.gg","recess_id":"c4ad84f6-113d-480b-bc29-80549518b3ee","created_at":"2024-10-31T20:27:47.342142Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"chicothedog","id":246,"password_hash":"$2b$12$QgZsBBZ/7CFyOhVkfVhTNeoe4jAY.pIJOieTXeg0HWS23ZcCpiAeO","updated_at":"2024-10-31T20:27:47.342148Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"// NEXT STEPS:\n// Idea 1: Draw more words on multiple lines.\n// Idea 2: Create new transformations/animations for letters.\n// Idea 3: Have the background color change over time.\n// Idea 4: Make letters draggable, like fridge magnets.\n// Idea 5: Add a sound effect!\n\n/*\n ANIMATE YOUR NAME!\n————— template by Jippity —————\nBlock Letters by Jean Lambert Salvatori from Pixabay\n\nDraw your name on screen and animate it!\n\nHave fun as you begin your coding journey.\n\nEmail questions or bugs to support@jippity.pro\n*/\n\n// Put your name here! Make sure it's in between the \\\" \\\".\n/************************/\nconst myName = \\\"Jippity\\\";\n/************************/\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;\nlet backgroundGreen = 50;\nlet backgroundBlue = 150;\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\n// This saves space where we'll load our letter images.\nlet letters = {};\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// 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\n/* Now we just need to see how the individual animations work. */\n\n// First up, rotation.\n\n// We make some space in memory to store the angle of each letter that rotates.\nlet rotationAngles = {};\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\n// Up next, growing and shrinking the letter so it pulsates.\n\n// We make space in memory to store the size multiplier and the direction (getting bigger versus smaller).\nlet pulseScales = {};\nlet pulseDirections = {};\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\n// Last but not least, rainbow-izing a letter.\n\n// Make space in memory to keep track of the color of each rainbow-ized letter.\nlet rainbowTints = {};\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\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":[],"assets":[{"project_id":1691,"creator":null,"cloudinary_id":"oneffvwd1dkzqioonpun","deleted":false,"id":16799,"created_at":"2024-08-09T17:27:17.395484Z","name":"gif","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"twg8oesevh3tp5t7zm4w","deleted":false,"id":15780,"created_at":"2024-07-30T14:46:25.684299Z","name":"SS","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"zy9mz3zte2io7k1waibh","deleted":false,"id":6424,"created_at":"2024-05-31T19:42:12.194980Z","name":"letterZ","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"w3ldqrmzjtqq9csweize","deleted":false,"id":6423,"created_at":"2024-05-31T19:41:59.264628Z","name":"letterY","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"zhvf8re5dy3k5sccyr9a","deleted":false,"id":6422,"created_at":"2024-05-31T19:41:44.368117Z","name":"letterX","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"h5wmbnjk0ffsozyqfj83","deleted":false,"id":6421,"created_at":"2024-05-31T19:41:34.298419Z","name":"letterW","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"o29o7qoafnpavhslzbrv","deleted":false,"id":6420,"created_at":"2024-05-31T19:41:02.241447Z","name":"letterV","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"oomx3ug1eaebyo1lsyvm","deleted":false,"id":6419,"created_at":"2024-05-31T19:40:33.481767Z","name":"letterU","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"usg4c9db2r9kz4dsutoy","deleted":false,"id":6418,"created_at":"2024-05-31T19:40:15.421607Z","name":"letterT","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"wlc1qiqo50xpbokkjmra","deleted":false,"id":6417,"created_at":"2024-05-31T19:40:01.850898Z","name":"letterS","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"iwfogwugvu0i3zv5o4sg","deleted":false,"id":6416,"created_at":"2024-05-31T19:39:49.053131Z","name":"letterR","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"c9rb1u84ti7cvza8zxuo","deleted":false,"id":6415,"created_at":"2024-05-31T19:39:12.079559Z","name":"letterQ","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"zazbsjfdctkpcc27ritg","deleted":false,"id":6414,"created_at":"2024-05-31T19:38:52.684848Z","name":"letterP","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"tfomoj0jstfbc46akcea","deleted":false,"id":6413,"created_at":"2024-05-31T19:38:41.387650Z","name":"letterO","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"ozs4v5s80spdinqrslla","deleted":false,"id":6412,"created_at":"2024-05-31T19:38:26.107012Z","name":"letterN","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"kxvpqrpr6tf6w55iolp8","deleted":false,"id":6411,"created_at":"2024-05-31T19:38:12.631709Z","name":"letterM","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"mpp0fiak2isb5osalkr6","deleted":false,"id":6410,"created_at":"2024-05-31T19:38:02.196016Z","name":"letterL","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"x2s3mz260zyih98sfxqj","deleted":false,"id":6409,"created_at":"2024-05-31T19:37:50.501018Z","name":"letterK","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"jxaaxtpvmrarcqbnawjc","deleted":false,"id":6408,"created_at":"2024-05-31T19:37:27.835193Z","name":"letterJ","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"re96hbs1jadnnncosftj","deleted":false,"id":6406,"created_at":"2024-05-31T19:36:49.676578Z","name":"letterI","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"ihg0zqdibmqvfbvyjufq","deleted":false,"id":6405,"created_at":"2024-05-31T19:36:38.021603Z","name":"letterH","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"gz6gplunbzwmaluwlr4y","deleted":false,"id":6404,"created_at":"2024-05-31T19:36:25.874352Z","name":"letterG","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"ted4zc8q6aku2w6atrva","deleted":false,"id":6336,"created_at":"2024-05-31T19:33:17.826450Z","name":"letterF","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"xibntwcpvbmyfsrtja4s","deleted":false,"id":6296,"created_at":"2024-05-31T19:33:06.152669Z","name":"letterE","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"gb82j3k8qjw1mr1xuwq5","deleted":false,"id":6295,"created_at":"2024-05-31T19:32:40.724984Z","name":"letterD","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"j0eegiuu6cqfwhsjuxon","deleted":false,"id":6294,"created_at":"2024-05-31T19:32:22.568285Z","name":"letterC","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"qvzbfdsovb6zruye6v5o","deleted":false,"id":6293,"created_at":"2024-05-31T19:32:05.509452Z","name":"letterB","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"f8lgnemelwoe1vqcngdc","deleted":false,"id":6292,"created_at":"2024-05-31T19:31:54.597482Z","name":"letterA","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"hdpvermg4f6yl4mmitsh","deleted":false,"id":6291,"created_at":"2024-05-31T19:30:04.400909Z","name":"number9","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"vhxdqsbmmqs9sjhidhg4","deleted":false,"id":6289,"created_at":"2024-05-31T19:29:19.532821Z","name":"number8","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"qql6viq5bmqgnwdxhhvw","deleted":false,"id":6288,"created_at":"2024-05-31T19:29:08.569260Z","name":"number7","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"n8nujy0gmumzp32lljqv","deleted":false,"id":6287,"created_at":"2024-05-31T19:27:06.284226Z","name":"number6","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"nhuvsohthjzjq9oqbxdd","deleted":false,"id":6286,"created_at":"2024-05-31T19:26:47.685599Z","name":"number5","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"sflhpspo00f1nbcqmefe","deleted":false,"id":6285,"created_at":"2024-05-31T19:26:39.194784Z","name":"number4","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"fgyrydispdhm7scki91w","deleted":false,"id":6284,"created_at":"2024-05-31T19:26:28.688173Z","name":"number3","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"lsml2gzgppbrrjdobalp","deleted":false,"id":6283,"created_at":"2024-05-31T19:26:13.604744Z","name":"number2","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"bqhdgprk5uqi41dcsbeh","deleted":false,"id":6282,"created_at":"2024-05-31T19:26:00.630935Z","name":"number1","resource_type":"image","tags":null},{"project_id":1691,"creator":null,"cloudinary_id":"n1zg2fufnhouabfkyz2u","deleted":false,"id":6281,"created_at":"2024-05-31T19:25:49.324067Z","name":"number0","resource_type":"image","tags":null}],"messages_sent":54,"comments":[{"content":".","id":1302,"user_id":817,"user":{"photo":null,"email":"","recess_id":null,"created_at":"2025-10-08T03:48:12.389275Z","reset_token":null,"stripe_customer_id":"cus_TCClLqMnGBDKkC","seats":0,"username":"constantinelevin","id":817,"password_hash":"djghfsdfjkghds","updated_at":"2025-10-08T03:48:12.389282Z","reset_token_expiry":null,"subscription_status":"canceled"},"project_id":1691,"created_at":"2025-10-08T03:57:32.517319Z","updated_at":"2025-10-08T03:57:32.517320Z"},{"content":".","id":1306,"user_id":817,"user":{"photo":null,"email":"","recess_id":null,"created_at":"2025-10-08T03:48:12.389275Z","reset_token":null,"stripe_customer_id":"cus_TCClLqMnGBDKkC","seats":0,"username":"constantinelevin","id":817,"password_hash":"djghfsdfjkghds","updated_at":"2025-10-08T03:48:12.389282Z","reset_token_expiry":null,"subscription_status":"canceled"},"project_id":1691,"created_at":"2025-10-12T02:50:40.043157Z","updated_at":"2025-10-12T02:50:40.043158Z"}],"steps":[]}