Falling Letter Rain

{"name":"Falling Letter Rain","description":"Experience the mesmerizing sight of falling letters leaving a fading trail as they descend down the screen and gracefully reset at the top to repeat the enchanting spectacle.","photo":null,"view_count":8,"fork_count":0,"expires_at":null,"created_at":"2024-01-16T21:26:18.704426Z","updated_at":"2024-01-16T21:26:18.704429Z","user_id":5,"status":"PUBLIC","parent_id":375,"id":378,"user":{"photo":null,"email":null,"recess_id":"b5574579-4904-b775-ad8e-eff5c085f819","created_at":"2023-12-12T12:00:51.087995Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"theop","id":5,"password_hash":null,"updated_at":"2023-12-12T12:00:51.087997Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let rain1y = 0\nlet rain2y = 100\nlet rain3y = 4\nlet rain4y = 50\nlet rain5y = 43\nlet rain6y = 9\nlet rain7y = 128\nlet rain8y = 64\nlet rain9y = 21\nlet rain10y = 18\nlet letters = [\"a\",\"b\",\"c\",\"d\",\"e\",\"f\",\"g\",\"h\",\"i\",\"j\",\"k\",\"l\",\"m\",\"n\",\"o\",\"p\",\"q\",\"r\",\"s\",\"t\",\"u\",\"v\",\"w\",\"x\",\"y\",\"z\",\",\"]\nfunction setup() {\n createCanvas(400, 400);\n}\nfunction draw() {\n fill(0,0,0,25);\n background(0,255,0);\n textSize(20)\n text(letters[floor(random(0,26))],0,rain1y);\n text(letters[floor(random(0,26))],40,rain2y);\n text(letters[floor(random(0,26))],80,rain3y);\n text(letters[floor(random(0,26))],120,rain4y);\n text(letters[floor(random(0,26))],160,rain5y);\n text(letters[floor(random(0,26))],200,rain6y);\n text(letters[floor(random(0,26))],240,rain7y);\n text(letters[floor(random(0,26))],280,rain8y);\n text(letters[floor(random(0,26))],320,rain9y);\n text(letters[floor(random(0,26))],380,rain10y);\n rain1y += 1;\n rain2y += 1;\n rain3y += 1;\n rain4y += 1;\n rain5y += 1;\n rain6y += 1;\n rain7y += 1;\n rain8y += 1;\n rain9y += 1;\n rain10y += 1;\n if (rain1y > 400) {\n rain1y = 0\n }\n if (rain2y > 400) {\n rain2y = 0\n }\n if (rain3y > 400) {\n rain3y = 0\n }\n if (rain4y > 400) {\n rain4y = 0\n }\n if (rain5y > 400) {\n rain5y = 0\n }\n if (rain6y > 400) {\n rain6y = 0\n }\n if (rain7y > 400) {\n rain7y = 0\n }\n if (rain8y > 400) {\n rain8y = 0\n }\n if (rain9y > 400) {\n rain9y = 0\n }\n if (rain10y > 400) {\n rain10y = 0\n }\n}\n","style.css":"","index.html":"\n\n\n \n \n Falling Letter Rain\n \n \n \n\n\n\n"},"chat_history":[],"assets":[],"messages_sent":0,"comments":[],"steps":[{"instruction":"Set up a canvas using HTML and CSS to display the simulation.","title":"Create Canvas","created_at":"2024-01-16T21:02:22.633271","project_id":378,"complete":false,"step_number":0,"updated_at":"2024-01-16T21:26:18.707964","id":2331},{"instruction":"Generate random letters and set their initial position at the top of the screen.","title":"Generate Random Letters","created_at":"2024-01-16T21:02:22.633344","project_id":378,"complete":false,"step_number":1,"updated_at":"2024-01-16T21:26:18.708066","id":2332},{"instruction":"Make the letters fall straight down by updating their position on each frame.","title":"Fall Straight Down","created_at":"2024-01-16T21:02:22.633396","project_id":378,"complete":false,"step_number":2,"updated_at":"2024-01-16T21:26:18.708137","id":2333},{"instruction":"Create a fading trail effect by drawing semi-transparent letters behind the falling letters.","title":"Fading Trail Effect","created_at":"2024-01-16T21:02:22.633464","project_id":378,"complete":false,"step_number":3,"updated_at":"2024-01-16T21:26:18.708212","id":2334},{"instruction":"Reset the position of letters when they reach the bottom of the screen to create a continuous flow of falling letters.","title":"Continuous Flow","created_at":"2024-01-16T21:02:22.633533","project_id":378,"complete":false,"step_number":4,"updated_at":"2024-01-16T21:26:18.708287","id":2335},{"instruction":"Use p5.js library to handle the animation and drawing of the falling letters.","title":"Animation Handling","created_at":"2024-01-16T21:02:22.633601","project_id":378,"complete":false,"step_number":5,"updated_at":"2024-01-16T21:26:18.708352","id":2336}]}