Emotion Mover

{"name":"Emotion Mover","description":"Control the emotions of a smiley face as it moves around the screen in this interactive and fun project!","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-04-18T13:11:58.951865Z","updated_at":"2024-04-18T13:22:25.137850Z","user_id":79,"status":"PUBLIC","parent_id":null,"id":1199,"user":{"username":"mravery","id":79,"password_hash":"$2b$12$OiHmchUOvuYw584gZMXd1.TQ5SfD2rTId0RlIlHjBiNZEephx4aKm","updated_at":"2024-04-02T01:28:21.811772Z","reset_token_expiry":null,"subscription_status":null,"photo":null,"email":"aqldrum@gmail.com","recess_id":"f8d6d949-6377-42be-8380-2b66a8d9568c","created_at":"2024-04-02T01:28:21.811769Z","reset_token":null,"stripe_customer_id":null,"seats":null},"code":{"script.js":"let smileyX = 200;\nlet smileyY = 200;\nlet isFrowning = false; // Initial state is not frowning\n\nfunction setup() {\n createCanvas(400, 400);\n background(220);\n}\nfunction draw() {\n background(220);\n drawSmileyFace(200, 200);\n}\n\nfunction drawSmileyFace(x, y) {\n fill(255, 204, 0);\n ellipse(x, y, 200, 200); // Face\n fill(0);\n ellipse(x - 50, y - 40, 20, 20); // Left Eye\n ellipse(x + 50, y - 40, 20, 20); // Right Eye\n noFill();\n if (isFrowning) {\n arc(x, y + 20, 150, 100, PI, TWO_PI); // Frown\n } else {\n arc(x, y, 150, 100, 0, PI); // Smile\n }\n}\n\nfunction setup() {\n createCanvas(400, 400);\n background(220);\n smileyX = 200; // Initial X position\n smileyY = 200; // Initial Y position\n}\nfunction draw() {\n background(220);\n drawSmileyFace(smileyX, smileyY);\n}\n\nfunction draw() {\n background(220);\n handleMovement();\n drawSmileyFace(smileyX, smileyY);\n}\nfunction handleMovement() {\n if (keyIsDown(87)) { // W\n smileyY -= 5;\n }\n if (keyIsDown(83)) { // S\n smileyY += 5;\n }\n if (keyIsDown(65)) { // A\n smileyX -= 5;\n }\n if (keyIsDown(68)) { // D\n smileyX += 5;\n }\n}\n\nfunction keyPressed() {\n if (keyCode === 32) { // Spacebar\n isFrowning = !isFrowning; // Toggle frowning state\n }\n}","style.css":"","index.html":"\n\n\n \n \n Emotion Mover\n \n\n\n \n \n\n"},"chat_history":[{"deleted":0,"code_id":67770,"input_tokens":null,"id":36839,"project_id":1199,"sender":"human","message":"Let's get started!","created_at":"2024-04-18T13:12:08.069906Z","output_tokens":null},{"deleted":0,"code_id":67770,"input_tokens":null,"id":36840,"project_id":1199,"sender":"ai","message":"```javascript\nfunction draw() {\n background(220);\n drawSmileyFace(200, 200);\n}\n\nfunction drawSmileyFace(x, y) {\n fill(255, 204, 0);\n ellipse(x, y, 200, 200); // Face\n fill(0);\n ellipse(x - 50, y - 40, 20, 20); // Left Eye\n ellipse(x + 50, y - 40, 20, 20); // Right Eye\n noFill();\n arc(x, y, 150, 100, 0, PI); // Mouth\n}\n```\n\n- The `draw` function continuously clears the canvas and redraws the smiley face at position (200, 200).\n- Inside `drawSmileyFace`, different drawing functions (`fill`, `ellipse`, `arc`) are used to create the smiley face. `fill` changes the color, `ellipse` is used for the eyes and face, and `arc` is for the smile.\n- The smiley face is centered around `(x, y)`, making it easy to move by changing these parameters.","created_at":"2024-04-18T13:12:08.077386Z","output_tokens":null},{"deleted":0,"code_id":67772,"input_tokens":null,"id":36841,"project_id":1199,"sender":"human","message":"Now can we move the smiley face with WASD keys?","created_at":"2024-04-18T13:13:44.224679Z","output_tokens":null},{"deleted":0,"code_id":67772,"input_tokens":null,"id":36842,"project_id":1199,"sender":"ai","message":"```javascript\nfunction setup() {\n createCanvas(400, 400);\n background(220);\n smileyX = 200; // Initial X position\n smileyY = 200; // Initial Y position\n}\n```\n\n- Initializes the canvas size and background color.\n- Sets initial X and Y positions for the smiley face.\n\n```javascript\nfunction draw() {\n background(220);\n drawSmileyFace(smileyX, smileyY);\n}\n```\n\n- Clears the canvas and redraws the smiley face at its current position.\n\n```javascript\nfunction keyPressed() {\n if (key == 'w' || key == 'W') {\n smileyY -= 5; // Move up\n } else if (key == 's' || key == 'S') {\n smileyY += 5; // Move down\n } else if (key == 'a' || key == 'A') {\n smileyX -= 5; // Move left\n } else if (key == 'd' || key == 'D') {\n smileyX += 5; // Move right\n }\n}\n```\n\n- Checks which key is pressed and moves the smiley face accordingly by updating its X or Y position.\n- The smiley face moves up for 'W', down for 'S', left for 'A', and right for 'D'.","created_at":"2024-04-18T13:13:44.231131Z","output_tokens":null},{"deleted":0,"code_id":67774,"input_tokens":null,"id":36843,"project_id":1199,"sender":"human","message":"Can I hold down the WASD keys for continuous movement?","created_at":"2024-04-18T13:16:12.751663Z","output_tokens":null},{"deleted":0,"code_id":67774,"input_tokens":null,"id":36844,"project_id":1199,"sender":"ai","message":"```javascript\nfunction draw() {\n background(220);\n handleMovement();\n drawSmileyFace(smileyX, smileyY);\n}\n```\n\n- Integrates the movement handling directly into the `draw` function for continuous movement detection.\n\n```javascript\nfunction handleMovement() {\n if (keyIsDown(87)) { // W\n smileyY -= 5;\n }\n if (keyIsDown(83)) { // S\n smileyY += 5;\n }\n if (keyIsDown(65)) { // A\n smileyX -= 5;\n }\n if (keyIsDown(68)) { // D\n smileyX += 5;\n }\n}\n```\n\n- Checks if W, A, S, or D keys are currently being pressed down and updates the smiley face's position accordingly.\n- Uses `keyIsDown` with key codes for continuous movement detection.","created_at":"2024-04-18T13:16:12.758158Z","output_tokens":null},{"deleted":0,"code_id":67779,"input_tokens":null,"id":36845,"project_id":1199,"sender":"human","message":"Can we have the spacebar flip the arc upside down for a frown face?","created_at":"2024-04-18T13:18:45.468077Z","output_tokens":null},{"deleted":0,"code_id":67779,"input_tokens":null,"id":36846,"project_id":1199,"sender":"ai","message":"```javascript\nfunction drawSmileyFace(x, y) {\n fill(255, 204, 0);\n ellipse(x, y, 200, 200); // Face\n fill(0);\n ellipse(x - 50, y - 40, 20, 20); // Left Eye\n ellipse(x + 50, y - 40, 20, 20); // Right Eye\n noFill();\n if (isFrowning) {\n arc(x, y + 20, 150, 100, PI, TWO_PI); // Frown\n } else {\n arc(x, y, 150, 100, 0, PI); // Smile\n }\n}\n```\n\n- This modification to `drawSmileyFace` includes a condition to check if `isFrowning` is true. If so, it draws an arc that represents a frown; otherwise, it draws a smile.\n\n```javascript\nfunction keyPressed() {\n if (keyCode === 32) { // Spacebar\n isFrowning = !isFrowning; // Toggle frowning state\n }\n}\n```\n\n- This function toggles the `isFrowning` variable when the spacebar is pressed, switching between a smile and a frown.\n\nEnsure to declare the `isFrowning` variable at the top of your script file:\n\n```javascript\nlet smileyX = 200;\nlet smileyY = 200;\nlet isFrowning = false; // Initial state is not frowning\n```\n\n- Initializes `isFrowning` as false so the smiley face starts with a smile.","created_at":"2024-04-18T13:18:45.474414Z","output_tokens":null}],"assets":[],"messages_sent":4,"comments":[],"steps":[{"instruction":"Render a smiley face character on the canvas.","title":"Display smiley face on the screen","created_at":"2024-04-18T13:11:58.960760","project_id":1199,"complete":false,"step_number":0,"updated_at":"2024-04-18T13:11:58.960762","id":6270},{"instruction":"Allow the user to toggle the emotion of the smiley face between happy and sad using the spacebar.","title":"Toggle happy and sad emotions","created_at":"2024-04-18T13:11:58.960829","project_id":1199,"complete":false,"step_number":1,"updated_at":"2024-04-18T13:11:58.960830","id":6271},{"instruction":"Enable the smiley face to move around the screen using the WASD keys.","title":"Implement WASD movement controls","created_at":"2024-04-18T13:11:58.960882","project_id":1199,"complete":false,"step_number":2,"updated_at":"2024-04-18T13:11:58.960883","id":6272},{"instruction":"Incorporate background music that changes based on the smiley face's emotion.","title":"Add background music","created_at":"2024-04-18T13:11:58.960967","project_id":1199,"complete":false,"step_number":3,"updated_at":"2024-04-18T13:11:58.960968","id":6273},{"instruction":"Introduce interactive elements on the screen that react to the smiley face's emotions.","title":"Create interactive elements","created_at":"2024-04-18T13:11:58.961042","project_id":1199,"complete":false,"step_number":4,"updated_at":"2024-04-18T13:11:58.961042","id":6274},{"instruction":"Track and display points based on the smiley face's interactions with the environment.","title":"Implement score system","created_at":"2024-04-18T13:11:58.961086","project_id":1199,"complete":false,"step_number":5,"updated_at":"2024-04-18T13:11:58.961087","id":6275},{"instruction":"Incorporate visual effects to enhance the emotions and movements of the smiley face.","title":"Add visual effects","created_at":"2024-04-18T13:11:58.961129","project_id":1199,"complete":false,"step_number":6,"updated_at":"2024-04-18T13:11:58.961130","id":6276},{"instruction":"Introduce increasing levels of difficulty or complexity as the project progresses.","title":"Create level progression","created_at":"2024-04-18T13:11:58.961173","project_id":1199,"complete":false,"step_number":7,"updated_at":"2024-04-18T13:11:58.961173","id":6277}]}