Matrix Rain

{"name":"Matrix Rain","description":"Experience the nostalgia of the Matrix with this interactive Matrix rain project. Watch the iconic green characters fall down your screen just like in the movie!","photo":null,"view_count":10,"fork_count":0,"expires_at":null,"created_at":"2024-02-20T03:44:22.057030Z","updated_at":"2024-02-20T03:44:22.057031Z","user_id":28,"status":"PRIVATE","parent_id":null,"id":693,"user":{"photo":null,"email":null,"recess_id":"","created_at":"2023-12-21T15:44:32.712231Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"oldj","id":28,"password_hash":null,"updated_at":"2023-12-21T15:44:32.712233Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"var streams = [];\nvar fadeInterval = 0.9;\nvar symbolSize = 15;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(0);\n\n var y = 0;\n for (var i = 0; i <= height / symbolSize; i++) {\n var stream = new Stream();\n stream.generateSymbols(random(-2000, 0), y);\n streams.push(stream);\n y += 1.5 * symbolSize;\n }\n\n textFont(\"Courier New\");\n textSize(symbolSize);\n}\n\nfunction draw() {\n background(18, 3, 18);\n streams.forEach(function (stream) {\n stream.render();\n });\n if (frameCount % 480 === 0) {\n textSize(symbolSize * random(0.5, 3.0));\n }\n}\n\n// Define CodeSymbol\nfunction CodeSymbol(x, y, speed, first, opacity) {\n this.x = x;\n this.y = y;\n this.value;\n\n this.speed = speed;\n this.first = first;\n this.opacity = opacity;\n\n this.switchInterval = round(random(40, 80));\n\n this.setToRandomSymbol = function () {\n var charType = round(random(0, 2)); // Adjusted the range to 0-2 for alphanumeric and punctuation characters\n //var charType = 2\n if (frameCount % this.switchInterval == 0) {\n if (charType === 0) {\n // Generate alphanumeric characters\n var charCode = round(random(48, 122)); // ASCII range for common alphanumeric characters\n // Exclude non-alphanumeric characters from 58 to 64 and 91 to 96\n while (\n (charCode > 57 && charCode < 65) ||\n (charCode > 90 && charCode < 97)\n ) {\n charCode = round(random(48, 122));\n }\n this.value = String.fromCharCode(charCode);\n } else if (charType === 2) {\n // Generate common punctuation\n var punctuation = \"!@#$%^&*()-_+=[]{}|;:'\\\",.<>?/\";\n var randomIndex = floor(random(punctuation.length));\n this.value = punctuation.charAt(randomIndex);\n } else {\n // Randomly select from the nonsenseCodeSnippets array\n var randomIndex = floor(random(nonsenseCodeSnippets.length));\n this.value = nonsenseCodeSnippets[randomIndex];\n }\n }\n };\n\n this.rain = function () {\n // Adjust x more than symbolSize so that the strings don't overlap\n this.x = this.x >= width ? -symbolSize * 2 : this.x + this.speed;\n };\n}\n\nfunction Stream() {\n this.symbols = [];\n this.totalSymbols = round(random(1, 6));\n this.speed = random(1, 4);\n this.streamWidth = 0;\n\n this.generateSymbols = function (x, y) {\n var opacity = 255;\n var first = round(random(0, 5)) == 1;\n for (var i = 0; i <= this.totalSymbols; i++) {\n var symbol = new CodeSymbol(\n x + this.streamWidth, // Adjust x based on the width of the existing stream\n y,\n this.speed,\n first,\n opacity\n );\n symbol.setToRandomSymbol();\n this.symbols.push(symbol);\n this.streamWidth += textWidth(symbol.value); // Update streamWidth with the width of the current symbol\n opacity -= 255 / this.totalSymbols / fadeInterval;\n first = false;\n }\n };\n\n this.render = function () {\n this.symbols.forEach(function (symbol) {\n if (symbol.first) {\n fill(230, 130, 250, symbol.opacity);\n } else {\n fill(72, 61, 139, symbol.opacity);\n }\n text(symbol.value, symbol.x, symbol.y);\n symbol.rain();\n symbol.setToRandomSymbol();\n });\n };\n}\n\nvar nonsenseCodeSnippets = [\n 'console.log(\"Hello, World!\");',\n \"if (x > 0) { y += 2; } else { y -= 2; }\",\n \"function add(a, b) { return a + b; }\",\n \"for (var i = 0; i < 10; i++) { console.log(i); }\",\n 'var randomVar = \"Lorem ipsum dolor sit amet\";',\n \"if (condition) { doSomething(); } else { doSomethingElse(); }\",\n \"while (count < 5) { count++; }\",\n \"var array = [1, 2, 3, 4, 5];\",\n \"function multiply(a, b) { return a * b; }\",\n 'switch (value) { case 1: console.log(\"Case 1\"); break; default: console.log(\"Default Case\"); }',\n 'var obj = { name: \"John\", age: 25 };',\n 'setTimeout(function() { console.log(\"Delayed execution\"); }, 1000);',\n 'var result = (condition) ? \"True\" : \"False\";',\n \"for (var item of array) { console.log(item); }\",\n 'function divide(a, b) { if (b !== 0) { return a / b; } else { throw new Error(\"Division by zero!\"); } }',\n \"var sum = array.reduce(function(acc, curr) { return acc + curr; }, 0);\",\n 'try { throw new Error(\"An error occurred.\"); } catch (error) { console.error(error.message); }',\n \"const PI = 3.14159;\",\n \"function greet(name) { return `Hello, ${name}!`; }\",\n \"var resultArray = array.map(function(item) { return item * 2; });\",\n 'if (isValid) { console.log(\"Data is valid.\"); } else { console.warn(\"Invalid data.\"); }',\n 'while (true) { console.log(\"Infinite loop!\"); }',\n \"var randomNumber = Math.random();\",\n \"function subtract(a, b) { return a - b; }\",\n \"var currentDate = new Date();\",\n 'document.getElementById(\"myElement\").style.color = \"red\";',\n \"var square = function(x) { return x * x; };\",\n 'const colors = [\"red\", \"green\", \"blue\"];',\n \"function getRandomElement(arr) { return arr[Math.floor(Math.random() * arr.length)]; }\",\n \"class Person { constructor(name, age) { this.name = name; this.age = age; } }\",\n 'fetch(\"https://api.example.com/data\") .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));',\n \"const isEven = (number) => number % 2 === 0;\",\n \"const sumArray = (arr) => arr.reduce((acc, curr) => acc + curr, 0);\",\n \"const greetPerson = ({ name, age }) => `Hello, ${name}! You are ${age} years old.`;\",\n \"const doubleArray = (arr) => arr.map(item => item * 2);\",\n \"const squareRoot = (number) => Math.sqrt(number);\",\n 'const fetchData = async () => { try { const response = await fetch(\"https://api.example.com/data\"); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } };',\n \"const validateEmail = (email) => /^[^s@]+@[^s@]+.[^s@]+$/.test(email);\",\n \"const capitalizeString = (str) => str.charAt(0).toUpperCase() + str.slice(1);\",\n \"const sumArguments = (...args) => args.reduce((acc, curr) => acc + curr, 0);\",\n \"const filterEvenNumbers = (arr) => arr.filter(item => item % 2 === 0);\",\n \"const squareNumbers = (arr) => arr.map(item => item * item);\",\n \"const countOccurrences = (arr, target) => arr.reduce((acc, curr) => (curr === target ? acc + 1 : acc), 0);\",\n 'const reverseString = (str) => str.split(\"\").reverse().join(\"\");',\n \"const calculateAverage = (arr) => arr.reduce((acc, curr) => acc + curr, 0) / arr.length;\",\n \"const mergeArrays = (arr1, arr2) => [...arr1, ...arr2];\",\n \"const removeDuplicates = (arr) => [...new Set(arr)];\",\n \"const getRandomNumberInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;\",\n 'const generateRandomString = (length) => Array.from({ length }, () => String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33)).join(\"\");',\n \"const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);\",\n 'const isPalindrome = (str) => str.toLowerCase() === str.toLowerCase().split(\"\").reverse().join(\"\");',\n \"const convertToCamelCase = (str) => str.replace(/[-_](.)/g, (_, c) => c.toUpperCase());\",\n 'const formatCurrency = (amount, currency) => new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency }).format(amount);',\n \"const convertToBinary = (number) => number.toString(2);\",\n \"const findLargestNumber = (arr) => Math.max(...arr);\",\n \"const sleep = (milliseconds) => new Promise(resolve => setTimeout(resolve, milliseconds));\",\n \"const isValidPassword = (password) => /^(?=.*[A-Z])(?=.*[a-z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/.test(password);\",\n 'const generateUUID = () => \"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx\".replace(/[xy]/g, (c) => { const r = Math.random() * 16 | 0; const v = c === \"x\" ? r : (r & 0x3 | 0x8); return v.toString(16); });',\n \"const findMedian = (arr) => { const sortedArr = arr.slice().sort((a, b) => a - b); const mid = Math.floor(sortedArr.length / 2); return sortedArr.length % 2 !== 0 ? sortedArr[mid] : (sortedArr[mid - 1] + sortedArr[mid]) / 2; };\",\n \"const parseQueryString = (queryString) => Object.fromEntries(new URLSearchParams(queryString));\",\n \"const generateFibonacciSequence = (n) => { const sequence = [0, 1]; for (let i = 2; i < n; i++) { sequence[i] = sequence[i - 1] + sequence[i - 2]; } return sequence; };\",\n \"const validateCreditCard = (number) => /^d{4}-d{4}-d{4}-d{4}$/.test(number);\",\n \"const capitalizeWords = (str) => str.replace(/\\bw/g, (char) => char.toUpperCase());\",\n \"const countVowels = (str) => (str.match(/[aeiou]/gi) || []).length;\",\n \"const findIntersection = (arr1, arr2) => arr1.filter(value => arr2.includes(value));\",\n \"const calculateFactorial = (n) => n === 0 ? 1 : n * calculateFactorial(n - 1);\",\n 'const getWeekday = (dateString) => new Date(dateString).toLocaleDateString(\"en-US\", { weekday: \"long\" });',\n 'const reverseWords = (str) => str.split(\" \").reverse().join(\" \");',\n \"const encodeBase64 = (str) => btoa(unescape(encodeURIComponent(str)));\",\n \"const decodeBase64 = (str) => decodeURIComponent(escape(atob(str)));\",\n 'const convertToRomanNumeral = (number) => { const romanNumerals = [\"I\", \"IV\", \"V\", \"IX\", \"X\", \"XL\", \"L\", \"XC\", \"C\", \"CD\", \"D\", \"CM\", \"M\"]; let result = \"\"; for (let i = romanNumerals.length - 1; i >= 0; i--) { while (number >= romanNumerals[i]) { result += romanNumerals[i]; number -= romanNumerals[i]; } } return result; };',\n \"const mergeObjects = (obj1, obj2) => ({ ...obj1, ...obj2 });\",\n \"const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`;\",\n 'const padLeft = (str, length, padChar = \" \") => str.padStart(length, padChar);',\n \"const isLeapYear = (year) => (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);\",\n 'const formatPhoneNumber = (phoneNumber) => phoneNumber.replace(/(d{3})(d{3})(d{4})/, \"($1) $2-$3\");',\n \"const convertToTitleCase = (str) => str.toLowerCase().replace(/\\bw/g, (char) => char.toUpperCase());\",\n \"const getUniqueValues = (arr) => [...new Set(arr)];\",\n 'const generatePassword = (length) => Array.from({ length }, () => String.fromCharCode(Math.floor(Math.random() * (126 - 33 + 1)) + 33)).join(\"\");',\n \"const findGCD = (a, b) => b === 0 ? a : findGCD(b, a % b);\",\n \"const removeFalsyValues = (arr) => arr.filter(Boolean);\",\n \"const calculateHypotenuse = (a, b) => Math.sqrt(a ** 2 + b ** 2);\",\n \"const rotateArray = (arr, k) => arr.slice(-k).concat(arr.slice(0, arr.length - k));\",\n 'const replaceSpacesWithUnderscores = (str) => str.replace(/s/g, \"_\");',\n \"const getRandomElementWeighted = (arr, weights) => { const totalWeight = weights.reduce((acc, weight) => acc + weight, 0); let random = Math.random() * totalWeight; for (let i = 0; i < arr.length; i++) { random -= weights[i]; if (random <= 0) return arr[i]; } };\",\n \"const calculateExponential = (base, exponent) => base ** exponent;\",\n 'const truncateString = (str, maxLength) => str.length > maxLength ? str.slice(0, maxLength) + \"...\" : str;',\n \"const isValidDate = (dateString) => !isNaN(Date.parse(dateString));\",\n 'const calculateAverageWordLength = (str) => { const words = str.split(\" \"); const totalLength = words.reduce((acc, word) => acc + word.length, 0); return totalLength / words.length; };',\n \"const sortArrayDescending = (arr) => arr.slice().sort((a, b) => b - a);\",\n \"const getRandomElementExcept = (arr, element) => { const filteredArr = arr.filter(item => item !== element); return filteredArr[Math.floor(Math.random() * filteredArr.length)]; };\",\n \"const convertToBinaryString = (number) => number.toString(2);\",\n \"const countConsonants = (str) => (str.match(/[bcdfghjklmnpqrstvwxyz]/gi) || []).length;\",\n \"const calculateDistance = (x1, y1, x2, y2) => Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);\",\n \"const findMaxValueIndex = (arr) => arr.indexOf(Math.max(...arr));\",\n 'const getMonthName = (monthIndex) => new Date(2000, monthIndex, 1).toLocaleDateString(\"en-US\", { month: \"long\" });',\n \"const convertToHexadecimal = (number) => number.toString(16);\",\n \"const removeArrayDuplicates = (arr) => [...new Set(arr)];\",\n \"const calculateBMI = (weight, height) => weight / (height ** 2);\",\n \"const extractUniqueValues = (arr1, arr2) => [...new Set([...arr1, ...arr2])];\",\n \"const convertToDegrees = (radians) => radians * (180 / Math.PI);\",\n \"const findMinValueIndex = (arr) => arr.indexOf(Math.min(...arr));\",\n \"const getDayOfYear = (dateString) => { const date = new Date(dateString); const startOfYear = new Date(date.getFullYear(), 0, 0); const diff = date - startOfYear; const oneDay = 86400000; return Math.floor(diff / oneDay); };\",\n 'const removeNonAlphaNumeric = (str) => str.replace(/[^a-zA-Z0-9]/g, \"\");',\n \"const calculateCompoundInterest = (principal, rate, time) => principal * (1 + rate / 100) ** time - principal;\",\n 'const findLongestWord = (str) => str.split(\" \").reduce((longest, word) => word.length > longest.length ? word : longest, \"\");',\n \"const getDaysDifference = (dateString1, dateString2) => { const date1 = new Date(dateString1); const date2 = new Date(dateString2); const oneDay = 86400000; return Math.abs(Math.round((date2 - date1) / oneDay)); };\",\n \"const convertToLowerCase = (str) => str.toLowerCase();\",\n \"const calculateRectangleArea = (length, width) => length * width;\",\n \"const findMissingNumber = (arr) => { const n = arr.length + 1; const expectedSum = (n * (n + 1)) / 2; const actualSum = arr.reduce((acc, curr) => acc + curr, 0); return expectedSum - actualSum; };\",\n 'const extractDigits = (str) => str.replace(/D/g, \"\");',\n \"const calculateTriangleArea = (base, height) => 0.5 * base * height;\",\n \"const findFirstNonRepeatingCharacter = (str) => Array.from(str).find(char => str.indexOf(char) === str.lastIndexOf(char));\",\n \"const convertToUpperCase = (str) => str.toUpperCase();\",\n \"const reverseArray = (arr) => arr.slice().reverse();\",\n \"const calculatePercentage = (portion, total) => (portion / total) * 100;\",\n \"const findMaxStringLength = (arr) => Math.max(...arr.map(str => str.length));\",\n \"const generateRandomColor = () => `rgb(${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)}, ${Math.floor(Math.random() * 256)})`;\",\n];","style.css":"canvas {\n display: block;\n margin: 0 auto;\n border: 1px solid black;\n background-color: black;\n}","index.html":"\n\n\n\n \n \n Matrix Rain\n \n \n\n\n\n \n\n\n"},"chat_history":[],"assets":[],"messages_sent":5,"comments":[],"steps":[{"title":"Set up HTML file","instruction":"Create a basic HTML file with a canvas element for the project.","created_at":"2024-02-20T03:44:22.062844","project_id":693,"complete":false,"step_number":0,"updated_at":"2024-02-20T03:44:22.062846","id":3690},{"title":"Create falling characters","instruction":"Use p5.js to generate and animate falling green characters on the canvas.","created_at":"2024-02-20T03:44:22.062898","project_id":693,"complete":false,"step_number":1,"updated_at":"2024-02-20T03:44:22.062898","id":3691},{"title":"Add interactive mouse effects","instruction":"Implement interactive mouse effects to create ripples or distortions in the falling characters.","created_at":"2024-02-20T03:44:22.062936","project_id":693,"complete":false,"step_number":2,"updated_at":"2024-02-20T03:44:22.062937","id":3692},{"title":"Change character colors","instruction":"Allow users to change the color of the falling characters with keyboard input.","created_at":"2024-02-20T03:44:22.062973","project_id":693,"complete":false,"step_number":3,"updated_at":"2024-02-20T03:44:22.062973","id":3693},{"title":"Speed control for characters","instruction":"Implement functionality to control the speed of the falling characters using user input.","created_at":"2024-02-20T03:44:22.063008","project_id":693,"complete":false,"step_number":4,"updated_at":"2024-02-20T03:44:22.063008","id":3694},{"title":"Code rain effect","instruction":"Add a secondary layer of horizontally falling characters to create the 'code rain' effect.","created_at":"2024-02-20T03:44:22.063042","project_id":693,"complete":false,"step_number":5,"updated_at":"2024-02-20T03:44:22.063043","id":3695},{"title":"Customize character density","instruction":"Allow users to adjust the density of the falling characters on the screen.","created_at":"2024-02-20T03:44:22.063090","project_id":693,"complete":false,"step_number":6,"updated_at":"2024-02-20T03:44:22.063090","id":3696}]}