Pixel Party

{"name":"Colorful PixelArt","description":"Let your creativity flow with Pixel Party! Create beautiful pixel art with customizable brush sizes, a wide range of color options, and the ability to undo and redo your masterpiece. When you're done, export your pixel art as an image and share it with the world.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/oaa0d3ccmkaamkc0yjuu","view_count":52,"fork_count":2,"expires_at":null,"created_at":"2024-01-19T01:50:18.635395Z","updated_at":"2024-08-22T23:46:05.194335Z","user_id":25,"status":"PUBLIC","parent_id":null,"id":422,"user":{"photo":null,"email":"roserasp.rcl@gmail.com","recess_id":"b0325c1e-fa33-e420-3bbd-16e23deec92c","created_at":"2023-12-19T12:40:25.190376Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"unibunny","id":25,"password_hash":"$2b$12$T8DLx5HV8mYkO6ID/7yXxOe2XWdeWxkYEFlZHZ8igj1Ovbd.zs2aO","updated_at":"2023-12-19T12:40:25.190378Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let blocks = []\n\nfunction setup() {\n createCanvas(400, 400);\n\n\n for (var x = 0; x <= width; x += 5) {\n for (var y = 0; y <= height; y += 5) {\n blocks.push({\n x: x,\n y: y,\n color: [255, 255, 255]\n });\n }\n }\n}\n\nfunction draw() {\n\n background((frameCount + 150) % 200, (frameCount + 100) % 150, (frameCount + 200) % 250);//150, 200, 255\n\n frameRate(25)\n //strokeWeight(1);\n noStroke()\n //fullBlock();\n\n for (let block of blocks) {\n fill(block.color);\n rect(block.x, block.y, 4, 4);\n }\n\n}\n\nfunction block(x, y, c) {\n\n fill(255);\n\n if (\n mouseX < x + 2.5 &&\n mouseX > x - 2.5 &&\n mouseY < y + 2.5 &&\n mouseY > y - 2.5\n ) {\n fill(100)\n }\n\n rect(x, y, 5, 5);\n\n}\n\nfunction fullBlock() {\n for (var x = 0; x <= width; x += 5) {\n for (var y = 0; y <= height; y += 5) {\n block(x, y, 255);\n }\n }\n}\n\n\nfunction mousePressed() {\n colorBlock()\n}\n\nfunction mouseDragged() {\n colorBlock()\n}\n\nfunction colorBlock() {\n\n let xMap = map(mouseX, 0, width, 100, 255);\n let yMap = map(mouseY, 0, width, 100, 255)\n\n for (let block of blocks) {\n if (mouseX < block.x + 5 && mouseX > block.x && mouseY < block.y + 5 && mouseY > block.y) {\n block.color = [xMap, yMap, (mouseX / 2) + (mouseY / 2)];\n }\n }\n\n}","style.css":"","index.html":"\n\n\n\n \n \n Pixel Party\n \n \n\n\n\n \n\n\n"},"chat_history":[{"project_id":422,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-01-27T00:33:50.293705Z","output_tokens":null,"code_id":30261,"input_tokens":null,"id":17705},{"project_id":422,"sender":"ai","message":"Absolutely! The first thing I notice is that the current implementation only creates a grid of blocks and changes the color of the block under the mouse cursor. However, it does not yet allow the user to actually draw on this grid. \n\nLet's add this functionality by introducing a new function `mouseDragged()` which will be called automatically by p5.js framework whenever the user is dragging the mouse. \n\n```javascript\nlet colors = {\n 'r': 0,\n 'g': 0,\n 'b': 0\n};\n\nfunction mouseDragged() {\n for (var x = 0; x <= width; x += 5) {\n for (var y = 0; y <= height; y += 5) {\n if (mouseX < x + 5 && mouseX > x && mouseY < y + 5 && mouseY > y) {\n fill(colors.r, colors.g, colors.b);\n rect(x, y, 5, 5);\n }\n }\n }\n}\n```\n\nHere's what we're doing with this code:\n\n- We define a global variable `colors` to hold the current color values. For now, we set it to black `(r: 0, g: 0, b: 0)`.\n- We create a new function `mouseDragged()`.\n- Inside `mouseDragged()`, we loop through each block on the grid, similar to the `fullBlock()` function.\n- For each block, we check if the current mouse position is within the block.\n- If the mouse is within the block, we use the `fill()` function to change the drawing color to the current color, and we redraw the block with the new color using `rect()`.\n\nWith this change, you should be able to click and drag your mouse to draw on the grid. Each block that your mouse moves over while you're dragging will be filled with the current color.","deleted":0,"created_at":"2024-01-27T00:33:50.300706Z","output_tokens":null,"code_id":30261,"input_tokens":null,"id":17706},{"project_id":422,"sender":"human","message":"can we make a list of all the blocks, so we can change the colors.","deleted":0,"created_at":"2024-01-27T00:35:11.748529Z","output_tokens":null,"code_id":30263,"input_tokens":null,"id":17709},{"project_id":422,"sender":"ai","message":"Absolutely, let's create an array to hold all our blocks. Each block will be an object with properties for its position and its color.\n\n```javascript\nlet blocks = [];\n\nfunction setup() {\n createCanvas(400, 400);\n background(150, 200, 255);\n\n for (var x = 0; x <= width; x += 5) {\n for (var y = 0; y <= height; y += 5) {\n blocks.push({\n x: x,\n y: y,\n color: [255, 255, 255]\n });\n ","deleted":0,"created_at":"2024-01-27T00:35:11.754474Z","output_tokens":null,"code_id":30263,"input_tokens":null,"id":17710},{"project_id":422,"sender":"human","message":"can we make it like when the mouse clicks on a block, it turns black and stays black","deleted":0,"created_at":"2024-01-27T00:42:00.766117Z","output_tokens":null,"code_id":30290,"input_tokens":null,"id":17723},{"project_id":422,"sender":"ai","message":"Of course, we can modify our `mouseDragged()` function to set the color of the block under the mouse to black. We'll also need to adjust our `draw()` function to draw each block in its current color.\n\n```javascript\nfunction mouseDragged() {\n for (let block of blocks) {\n if (mouseX < block.x + 5 && mouseX > block.x && mouseY < block.y + 5 && mouseY > block.y) {\n block.color = [0, 0, 0];\n }\n }\n}\n\nfunction draw() {\n background(150, 200, 255);\n for (let block of blocks) {\n fill(block.color);\n rect(block.x, block.y, 5, 5);\n }\n}\n```\n\nHere's what these changes do:\n\n- In `mouseDragged()`, we now loop through each block in the `blocks` array. For each block, we check if the current mouse position is within the block. If the mouse is within the block, we set the block's color to black `(r: 0, g: 0, b: 0)`.\n- In `draw()`, we first clear the canvas with `background(150, 200, 255)`. Then we loop through each block in the `blocks` array. For each block, we set the drawing color to the block's color with `fill(block.color)`, and we draw the block with `rect(block.x, block.y, 5, 5)`.\n\nNow, when you click and drag your mouse, each block you move over will turn black and stay black.","deleted":0,"created_at":"2024-01-27T00:42:00.772981Z","output_tokens":null,"code_id":30290,"input_tokens":null,"id":17724}],"assets":[{"cloudinary_id":"oaa0d3ccmkaamkc0yjuu","name":"nale","deleted":false,"id":18749,"created_at":"2024-08-22T23:45:58.220786Z","project_id":422,"resource_type":"image"}],"messages_sent":3,"comments":[{"content":"RIGD","id":837,"user_id":149,"user":{"photo":null,"email":null,"recess_id":"22bca323-5521-4bb9-b6d5-5e6b5cc4523a","created_at":"2024-07-15T20:20:03.227887Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"dragon441","id":149,"password_hash":null,"updated_at":"2024-07-15T20:20:03.227891Z","reset_token_expiry":null,"subscription_status":null},"project_id":422,"created_at":"2024-09-09T19:42:15.289244Z","updated_at":"2024-09-09T19:42:15.289246Z"}],"steps":[]}