diff --git a/de-DE/code/starter/background.png b/de-DE/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/de-DE/code/starter/background.png differ diff --git a/de-DE/code/starter/main.py b/de-DE/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/de-DE/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/de-DE/code/starter/project_config.yml b/de-DE/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/de-DE/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/de-DE/images/banner.png b/de-DE/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/de-DE/images/banner.png differ diff --git a/de-DE/images/step_1.png b/de-DE/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/de-DE/images/step_1.png differ diff --git a/de-DE/images/step_2.png b/de-DE/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/de-DE/images/step_2.png differ diff --git a/de-DE/images/step_3.png b/de-DE/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/de-DE/images/step_3.png differ diff --git a/de-DE/images/step_4.png b/de-DE/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/de-DE/images/step_4.png differ diff --git a/de-DE/images/step_5.png b/de-DE/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/de-DE/images/step_5.png differ diff --git a/de-DE/images/step_6.png b/de-DE/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/de-DE/images/step_6.png differ diff --git a/de-DE/images/step_7.png b/de-DE/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/de-DE/images/step_7.png differ diff --git a/de-DE/images/step_8.png b/de-DE/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/de-DE/images/step_8.png differ diff --git a/de-DE/meta.yml b/de-DE/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/de-DE/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/de-DE/resources/dataframe.json b/de-DE/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/de-DE/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/de-DE/resources/mentor.md b/de-DE/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/de-DE/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/de-DE/solutions/main.py b/de-DE/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/de-DE/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/de-DE/step_1.md b/de-DE/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/de-DE/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/de-DE/step_2.md b/de-DE/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/de-DE/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/de-DE/step_3.md b/de-DE/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/de-DE/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/de-DE/step_4.md b/de-DE/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/de-DE/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/de-DE/step_5.md b/de-DE/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/de-DE/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/de-DE/step_6.md b/de-DE/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/de-DE/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/de-DE/step_7.md b/de-DE/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/de-DE/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/de-DE/step_8.md b/de-DE/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/de-DE/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/es-419/code/starter/background.png b/es-419/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/es-419/code/starter/background.png differ diff --git a/es-419/code/starter/main.py b/es-419/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/es-419/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/es-419/code/starter/project_config.yml b/es-419/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/es-419/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/es-419/images/banner.png b/es-419/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/es-419/images/banner.png differ diff --git a/es-419/images/step_1.png b/es-419/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/es-419/images/step_1.png differ diff --git a/es-419/images/step_2.png b/es-419/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/es-419/images/step_2.png differ diff --git a/es-419/images/step_3.png b/es-419/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/es-419/images/step_3.png differ diff --git a/es-419/images/step_4.png b/es-419/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/es-419/images/step_4.png differ diff --git a/es-419/images/step_5.png b/es-419/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/es-419/images/step_5.png differ diff --git a/es-419/images/step_6.png b/es-419/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/es-419/images/step_6.png differ diff --git a/es-419/images/step_7.png b/es-419/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/es-419/images/step_7.png differ diff --git a/es-419/images/step_8.png b/es-419/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/es-419/images/step_8.png differ diff --git a/es-419/meta.yml b/es-419/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/es-419/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/es-419/resources/dataframe.json b/es-419/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/es-419/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/es-419/resources/mentor.md b/es-419/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/es-419/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/es-419/solutions/main.py b/es-419/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/es-419/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/es-419/step_1.md b/es-419/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/es-419/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/es-419/step_2.md b/es-419/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/es-419/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/es-419/step_3.md b/es-419/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/es-419/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/es-419/step_4.md b/es-419/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/es-419/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/es-419/step_5.md b/es-419/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/es-419/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/es-419/step_6.md b/es-419/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/es-419/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/es-419/step_7.md b/es-419/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/es-419/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/es-419/step_8.md b/es-419/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/es-419/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/fr-FR/code/starter/background.png b/fr-FR/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/fr-FR/code/starter/background.png differ diff --git a/fr-FR/code/starter/main.py b/fr-FR/code/starter/main.py new file mode 100644 index 0000000..a0a15c4 --- /dev/null +++ b/fr-FR/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # milieu horizontal +y = 200 # milieu vertical +vitesse = 0 +gravité = 1 +sauter = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Dessiner une grenouille ici + +run() diff --git a/fr-FR/code/starter/project_config.yml b/fr-FR/code/starter/project_config.yml new file mode 100644 index 0000000..77f1791 --- /dev/null +++ b/fr-FR/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - La grenouille qui saute" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/fr-FR/images/banner.png b/fr-FR/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/fr-FR/images/banner.png differ diff --git a/fr-FR/images/step_1.png b/fr-FR/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/fr-FR/images/step_1.png differ diff --git a/fr-FR/images/step_2.png b/fr-FR/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/fr-FR/images/step_2.png differ diff --git a/fr-FR/images/step_3.png b/fr-FR/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/fr-FR/images/step_3.png differ diff --git a/fr-FR/images/step_4.png b/fr-FR/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/fr-FR/images/step_4.png differ diff --git a/fr-FR/images/step_5.png b/fr-FR/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/fr-FR/images/step_5.png differ diff --git a/fr-FR/images/step_6.png b/fr-FR/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/fr-FR/images/step_6.png differ diff --git a/fr-FR/images/step_7.png b/fr-FR/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/fr-FR/images/step_7.png differ diff --git a/fr-FR/images/step_8.png b/fr-FR/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/fr-FR/images/step_8.png differ diff --git a/fr-FR/meta.yml b/fr-FR/meta.yml new file mode 100644 index 0000000..98e7ffc --- /dev/null +++ b/fr-FR/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - La grenouille qui saute +hero_image: images/banner.png +description: Crée une grenouille de dessin animé qui saute, s'étire et s'écrase en parcourant ton code. +meta_title: Apprendre à coder avec Python Wild | La grenouille qui saute +meta_description: Apprends Python avec la Raspberry Pi Foundation. Programme une grenouille animée qui saute et s'étire. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/fr-FR/resources/dataframe.json b/fr-FR/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/fr-FR/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/fr-FR/resources/mentor.md b/fr-FR/resources/mentor.md new file mode 100644 index 0000000..b27792c --- /dev/null +++ b/fr-FR/resources/mentor.md @@ -0,0 +1,32 @@ +# Notes pour les mentor·e·s : Python wild - La grenouille qui saute + +## Aperçu du projet + +Dans ce projet Python Wild, les apprenant·e·s utilisent la bibliothèque p5 pour créer une grenouille de dessin animé qui saute en l'air et s'étire en plein saut. Ils s'exercent au dessin, à l'animation et aux comportements interactifs en utilisant le code Python. + +--- + +## Ce que les apprenant·e·s vont pratiquer + +- Dessin avec `ellipse()` et `circle()` +- Utilisation de variables pour animer le mouvement +- Gestion des entrées de la souris avec `mouse_pressed()` +- Étirer et comprimer des formes avec logique +- Coordination du mouvement avec la gravité et le suivi d'état + +--- + +## Conseils pédagogiques + +- Rappelez que `draw()` fonctionne comme une boucle — elle se répète automatiquement +- Utilisez un langage simple pour décrire le mouvement et l'animation (par exemple « la gravité attire la grenouille vers le bas ») +- Soulignez que `x` et `y` sont réutilisés pour positionner chaque partie de la grenouille +- Expliquez que `etirement` est utilisé pour modifier plusieurs formes avec une seule variable + +--- + +## Idées d'extension + +- Ajouter un insecte à attraper avec la langue +- Donner à la grenouille une couronne, des joues ou des bras animés +- Ajouter des nénuphars ou des éclaboussures d'eau en arrière-plan diff --git a/fr-FR/solutions/main.py b/fr-FR/solutions/main.py new file mode 100644 index 0000000..af55e07 --- /dev/null +++ b/fr-FR/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # milieu horizontal +y = 200 # milieu vertical +vitesse = 0 +gravité = 1 +sauter = False + +def mouse_pressed(): + global saut, vitesse + if not sauter: + sauter = True + vitesse = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, vitesse, sauter + image(bg, 0, 0, width, height) + + etirement = 30 if sauter else 0 + + fill('green') + ellipse(x, y, 100, 80 + etirement) # corps + ellipse(x - 30, y + 30, 30, 20 + etirement * 3) # pied gauche + ellipse(x + 30, y + 30, 30, 20 + etirement * 3) # pied droit + + fill('white') + circle(x - 20, y - 40 + etirement / 2, 25) # œil gauche + circle(x + 20, y - 40 + etirement / 2, 25) # œil droit + + fill('black') + circle(x - 20, y - 40 + etirement / 2, 10) # pupille gauche + circle(x + 20, y - 40 + etirement / 2, 10) # pupille droite + + fill('red') + ellipse(x, y + 20, 10, 30 - etirement / 2) # langue + + if sauter: + y += vitesse + vitesse += gravité + if y >= 200: + y = 200 + vitesse = 0 + sauter = False + +run() diff --git a/fr-FR/step_1.md b/fr-FR/step_1.md new file mode 100644 index 0000000..4cb78fc --- /dev/null +++ b/fr-FR/step_1.md @@ -0,0 +1,76 @@ +

Ajouter un arrière-plan

+ +\--- task --- + +Ajoute une image qui remplit l'écran avec un étang en arrière-plan. 🐸🌿 + +\--- /task --- + +

Planter le décor

+ +Commençons par ajouter un étang en arrière-plan à ton écran. +Tu utiliseras `load_image()` pour charger une image et `image()` pour la dessiner à chaque image. + +L'image est déjà fournie et enregistrée sous le nom **`background.png`** dans le même dossier que ton code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # milieu horizontal +y = 200 # milieu vertical +vitesse = 0 +gravité = 1 +sauter = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Dessiner une grenouille ici + ``` + +run() + +\--- /code --- + +
+ +
+![Un étang en arrière-plan en plein écran](images/step_1.png) +
+ +
+ +### Plus + +La fonction `image()` place l'image à une position.
+Pour remplir l'écran, passe `0, 0, width, height`. + +
+ +
+ +### Déboguer + +Si l'arrière-plan n'apparaît pas :
+ +- `global bg` doit figurer dans la fonction `setup()`.
+- Assure-toi que 'background.png' est entre guillemets.
+- Utilise `image(bg, 0, 0, width, height)` dans `draw()` + +
diff --git a/fr-FR/step_2.md b/fr-FR/step_2.md new file mode 100644 index 0000000..057d730 --- /dev/null +++ b/fr-FR/step_2.md @@ -0,0 +1,60 @@ +

Dessiner la grenouille

+ +\--- task --- + +Utilise des ellipses pour dessiner le corps et les pattes de la grenouille. 🐸🦵 + +\--- /task --- + +

Dessiner le corps et les jambes

+ +Ta grenouille doit avoir un corps et de pattes ! +Tu utiliseras `ellipse()` pour dessiner des ovales. 🥚 + +La fonction `ellipse()` prend **4 arguments** : + +- position x +- position y +- largeur +- hauteur + +Chaque partie de la grenouille est placée **par rapport à `x` et `y`**. +Cela facilitera l'animation plus tard. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Dessiner une grenouille ici + fill('green') + ellipse(x, y, 100, 80) # corps + ellipse(x - 30, y + 30, 30, 20) # patte gauche + ellipse(x + 30, y + 30, 30, 20) # patte droite + ``` + +\--- /code --- + +
+ +
+![Un corps et des pattes de grenouille verte assise sur un nénuphar](images/step_2.png) +
+ +
+ +### Astuce + +Essaie de modifier les chiffres pour voir comment les formes bougent !
+Remarque comment chaque partie est dessinée **après** l'arrière-plan — sinon elle serait cachée. + +
\ No newline at end of file diff --git a/fr-FR/step_3.md b/fr-FR/step_3.md new file mode 100644 index 0000000..deeaae6 --- /dev/null +++ b/fr-FR/step_3.md @@ -0,0 +1,74 @@ +

Dessiner les yeux et la langue

+ +\--- task --- + +Ajoute des yeux blancs à pupilles noires et une langue rouge sous la grenouille. + +\--- /task --- + +

Ajouter du caractère

+ +Rendons ta grenouille plus expressive en lui ajoutant deux yeux blancs, des pupilles noires et une langue rouge. 👀👅 + +Utilise `circle(x, y, taille)` pour les yeux et les pupilles — les cercles sont simplement une version plus simple des ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Dessiner une grenouille ici + + ``` + fill('green') + ellipse(x, y, 100, 80) # corps + ellipse(x - 30, y + 30, 30, 20) # jambe gauche + ellipse(x + 30, y + 30, 30, 20) # jambe droite + + fill('white') + cercle(x - 20, y - 40, 25) # œil gauche + cercle(x + 20, y - 40, 25) # œil droit + + fill('black') + cercle(x - 20, y - 40, 10) # pupille gauche + cercle(x + 20, y - 40, 10) # pupille droite + + fill('red') + ellipse(x, y + 20, 10, 30) # langue + ``` + +\--- /code --- + +
+ +
+![Une grenouille de dessin animé avec des yeux blancs, des pupilles noires et une langue rouge](images/step_3.png) +
+ +
+ +### Astuce + +Essaie de modifier la taille des yeux ou de la langue !
+Que se passe-t-il si tu rapproches ou éloignes les pupilles ? + +
+ +
+ +### Déboguer + +Si tes yeux ou ta langue ne sont pas visibles :
+ +- Assure-toi que chaque forme possède le bon nombre de valeurs
+- Utilise `fill()` avant de dessiner chaque partie
+- Vérifie les fautes de frappe dans `circle()` et `ellipse()` + +
\ No newline at end of file diff --git a/fr-FR/step_4.md b/fr-FR/step_4.md new file mode 100644 index 0000000..2912d79 --- /dev/null +++ b/fr-FR/step_4.md @@ -0,0 +1,100 @@ +

Faire sauter la grenouille vers le haut

+ +\--- task --- + +Utilise une variable pour déplacer la grenouille vers le haut lorsque tu cliques avec la souris. 🖱️⬆️ + +\--- /task --- + +

C'est l'heure de sauter !

+ +Faisons bouger ta grenouille ! 🐸💨 +Tu la feras sauter vers le haut lorsque tu cliques sur la souris. + +Utilise une variable appelée `sauter` pour suivre si la grenouille est en l'air. + +- Quand tu cliques (n'importe où sur l'écran !), nous mettons `sauter = True` +- Si `sauter` est `True`, la grenouille se déplace vers le haut en utilisant une valeur `vitesse` + +Pour faire sauter la grenouille, nous lui donnons une petite `vitesse` négative comme `-15`. +Cela fait monter la position `y` — rappelle-toi, en code, plus petit `y` signifie plus haut sur l'écran ! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravité = 1 +saut = False + +def mouse_pressed(): +global sauter, vitesse +if not sauter: +sauter = True +vitesse = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, vitesse, sauter +image(bg, 0, 0, width, height) + + ``` + # Dessiner une grenouille ici + fill('green') + ellipse(x, y, 100, 80) # corps + ellipse(x - 30, y + 30, 30, 20) # jambe gauche + ellipse(x + 30, y + 30, 30, 20) # jambe droite + + fill('white') + circle(x - 20, y - 40, 25) # oeil gauche + circle(x + 20, y - 40, 25) # oeil droit + + fill('black') + circle(x - 20, y - 40, 10) # pupille gauche + circle(x + 20, y - 40, 10) # pupille droite + + fill('red') + ellipse(x, y + 20, 10, 30) # langue + + if sauter: + y += vitesse + ``` + +\--- /code --- + +
+ +
+![Une grenouille en plein saut après avoir cliqué](images/step_4.png) +
+ +
+ +### Astuce 🧠 + +Essaie de modifier la `vitesse` à `-10` ou `-20` et vois jusqu'où la grenouille saute.
+Nombres plus bas = sauts plus petits. Plus le nombre est élevé = plus le saut est important ! 🐸🚀 + +
+ +
+ +### Déboguer 🛠️ + +Si ta grenouille ne bouge pas :
+ +- Assure-toi que `mouse_pressed()` est correctement orthographié
+- Vérifie que `sauter = True` et `vitesse = -15` sont définis
+- Recherche `y += vitesse` à l'intérieur du bloc `if sauter:` + +
\ No newline at end of file diff --git a/fr-FR/step_5.md b/fr-FR/step_5.md new file mode 100644 index 0000000..246e426 --- /dev/null +++ b/fr-FR/step_5.md @@ -0,0 +1,68 @@ +

Faire retomber la grenouille

+ +\--- task --- + +Utilise la gravité pour ramener ta grenouille au sol après son saut. 🪂 + +\--- /task --- + +

Tomber avec style

+ +Pour l'instant, ta grenouille saute et continue son chemin. Ramenons-la sur terre ! 🌍 +Nous utiliserons la gravité pour la faire descendre progressivement et la faire atterrir en toute sécurité. + +Voici comment ça fonctionne : + +- Tant que `sauter` est `True`, nous ajoutons `gravité` à `vitesse` +- Cela ralentit la grenouille, puis la fait tomber de plus en plus vite +- Lorsque la grenouille touche le sol, nous réinitialisons sa position et arrêtons le saut + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if sauter: + y += vitesse + vitesse += gravité + if y >= 200: + y = 200 + vitesse = 0 + sauter = False + ``` + +\--- /code --- + +
+ +
+![Une grenouille en plein saut retombe sur la terre ferme](images/step_5.png) +
+ +
+ +### Astuce 🌟 + +Essaie de modifier la valeur de `gravité`.
+Un nombre plus élevé fera tomber la grenouille plus vite.
+Un nombre plus petit permettra à ta grenouille d'atterrir en douceur ! 🐸🌬️ + +
+ +
+ +### Déboguer 🧰 + +Si ta grenouille n'atterrit jamais :
+ +- Assure-toi que `vitesse += gravité` se trouve à l'intérieur du bloc `if sauter:`
+- Vérifie que `y >= 200` est la condition d'atterrissage
+- N'oublie pas de réinitialiser `vitesse = 0` et `sauter = False` + +
\ No newline at end of file diff --git a/fr-FR/step_6.md b/fr-FR/step_6.md new file mode 100644 index 0000000..bec1126 --- /dev/null +++ b/fr-FR/step_6.md @@ -0,0 +1,63 @@ +

Étirer la grenouille

+ +\--- task --- + +Étire le corps de ta grenouille lorsqu'elle est en l'air. 🐸📏 + +\--- /task --- + +

Sauter plus haut

+ +Lorsqu'une grenouille saute, elle étire son corps pour donner l'impression qu'elle prend réellement appui sur le sol. +On peut utiliser une variable pour allonger le corps lorsque la grenouille est en l'air. + +Nous allons créer une variable `etirement` et l'ajouter à la hauteur de la grenouille lorsque `sauter = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, vitesse, sauter +image(bg, 0, 0, width, height) +etriement = 30 if sauter else 0 + + ``` + # Dessiner la grenouille ici + fill('green') + ellipse(x, y, 100, 80 + etirement) # corps + ``` + +\--- /code --- + +
+ +
+![Une grenouille au corps étiré en plein air](images/step_6.png) +
+ +
+ +### Astuce + +Essaie de remplacer `30` par `20` ou `40` pour ajuster l'étirement.
+Tu peux même modifier la valeur pendant le saut pour rendre l'étirement plus spectaculaire ! 🎭 + +
+ +
+ +### Déboguer + +Si ta grenouille ne s'étire pas :
+ +- Vérifie que `etrirement = 30 if sauter else 0` précède `ellipse()`
+- Assure-toi d'ajouter de l'étirement à la hauteur du corps + +
\ No newline at end of file diff --git a/fr-FR/step_7.md b/fr-FR/step_7.md new file mode 100644 index 0000000..8147368 --- /dev/null +++ b/fr-FR/step_7.md @@ -0,0 +1,66 @@ +

Étirer les pattes de la grenouille

+ +\--- task --- + +Fais étirer les pattes de la grenouille lorsqu'elle saute. 🐾 + +\--- /task --- + +

Propulser avec puissance !

+ +Maintenant, étirons les pattes de la grenouille pendant qu'elle saute. +Nous allons modifier la **hauteur** des pieds en utilisant la même variable `etirement`. + +Multiplie l'« étirement » par un nombre pour exagérer le mouvement de la jambe. +Essaie `etirement * 2` ou `etirement * 3` ! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, vitesse, sauter +image(bg, 0, 0, width, height) +fill('green') + + ``` + etirement = 30 if sauter else 0 + + ellipse(x, y, 100, 80 + etirement) # corps + ellipse(x - 30, y + 30, 30, 20 + etirement * 3) # jambe gauche + ellipse(x + 30, y + 30, 30, 20 + etirement * 3) # jambe droite + ``` + +\--- /code --- + +
+ +
+![Une grenouille en plein saut, les pattes tendues](images/step_7.png) +
+ +
+ +### Astuce + +Si les jambes s'étirent trop, essaie de multiplier par un nombre plus petit.
+L'étirement par `etirement * 2` paraîtra plus doux que `etirement * 3`. + +
+ +
+ +### Déboguer + +Si les pieds semblent incorrects :
+ +- Assure-toi d'ajouter `etirement * 3` à la **hauteur** de chaque pied
+- Vérifie que la position des jambes est toujours `x - 30` et `x + 30` + +
\ No newline at end of file diff --git a/fr-FR/step_8.md b/fr-FR/step_8.md new file mode 100644 index 0000000..1fc6bd8 --- /dev/null +++ b/fr-FR/step_8.md @@ -0,0 +1,89 @@ +

Étirer les yeux et la langue

+ +\--- task --- + +Fais lever les yeux de la grenouille et rétracter sa langue lorsqu'elle saute ! 👀👅 + +\--- /task --- + +

Touches finales

+ +Allons étirer les yeux pour qu'ils se lèvent pendant un saut, et rétrécissons la langue pour donner l'impression qu'elle se soulève du nénuphar. + +Utilise la même variable `etirement` pour modifier les positions et la hauteur `y`. +Cela donne une touche finale à l'animation ! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + etirement / 2, 25) # oeil gauche + circle(x + 20, y - 40 + etirement / 2, 25) # oeil droit + + fill('black') + circle(x - 20, y - 40 + etirement / 2, 10) # pupille gauche + circle(x + 20, y - 40 + etirement / 2, 10) # pupille droite + + fill('red') + ellipse(x, y + 20, 10, 30 - etirement / 2) # langue + ``` + +\--- /code --- + +
+ +
+![Grenouille aux yeux révulsés et à la langue qui se rétracte en plein saut](images/step_8.png) +
+ +
+ +### Astuce + +Ajouter ou soustraire une partie de l'effet « étirement » à la position des yeux ou de la langue les animera.
+Étirement plus petit = yeux plus bas et langue plus longue.
+Plus l'étirement est grand = yeux plus hauts et langue plus courte ! + +
+ +
+ +### Déboguer + +Si les yeux ou la langue ont une apparence étrange :
+ +- Vérifie bien les parties `+ etirement / 2` ou `- etirement / 2`
+- Assure-toi de mettre à jour les cercles blancs et noirs pour chaque œil
+ +
+ +
+ +### Avis + +Il s'agit d'un projet bêta, ce qui signifie qu'il est tout nouveau et pas encore largement disponible. Si tu as testé ce projet individuellement ou avec ton club, n'hésite pas à nous faire part de ton avis. + + +Donner ton avis + +
diff --git a/hi-IN/code/starter/background.png b/hi-IN/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/hi-IN/code/starter/background.png differ diff --git a/hi-IN/code/starter/main.py b/hi-IN/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/hi-IN/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/hi-IN/code/starter/project_config.yml b/hi-IN/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/hi-IN/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/hi-IN/images/banner.png b/hi-IN/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/hi-IN/images/banner.png differ diff --git a/hi-IN/images/step_1.png b/hi-IN/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/hi-IN/images/step_1.png differ diff --git a/hi-IN/images/step_2.png b/hi-IN/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/hi-IN/images/step_2.png differ diff --git a/hi-IN/images/step_3.png b/hi-IN/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/hi-IN/images/step_3.png differ diff --git a/hi-IN/images/step_4.png b/hi-IN/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/hi-IN/images/step_4.png differ diff --git a/hi-IN/images/step_5.png b/hi-IN/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/hi-IN/images/step_5.png differ diff --git a/hi-IN/images/step_6.png b/hi-IN/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/hi-IN/images/step_6.png differ diff --git a/hi-IN/images/step_7.png b/hi-IN/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/hi-IN/images/step_7.png differ diff --git a/hi-IN/images/step_8.png b/hi-IN/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/hi-IN/images/step_8.png differ diff --git a/hi-IN/meta.yml b/hi-IN/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/hi-IN/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/hi-IN/resources/dataframe.json b/hi-IN/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/hi-IN/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/hi-IN/resources/mentor.md b/hi-IN/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/hi-IN/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/hi-IN/solutions/main.py b/hi-IN/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/hi-IN/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/hi-IN/step_1.md b/hi-IN/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/hi-IN/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/hi-IN/step_2.md b/hi-IN/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/hi-IN/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/hi-IN/step_3.md b/hi-IN/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/hi-IN/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/hi-IN/step_4.md b/hi-IN/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/hi-IN/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/hi-IN/step_5.md b/hi-IN/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/hi-IN/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/hi-IN/step_6.md b/hi-IN/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/hi-IN/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/hi-IN/step_7.md b/hi-IN/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/hi-IN/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/hi-IN/step_8.md b/hi-IN/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/hi-IN/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/it-IT/code/starter/background.png b/it-IT/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/it-IT/code/starter/background.png differ diff --git a/it-IT/code/starter/main.py b/it-IT/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/it-IT/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/it-IT/code/starter/project_config.yml b/it-IT/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/it-IT/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/it-IT/images/banner.png b/it-IT/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/it-IT/images/banner.png differ diff --git a/it-IT/images/step_1.png b/it-IT/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/it-IT/images/step_1.png differ diff --git a/it-IT/images/step_2.png b/it-IT/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/it-IT/images/step_2.png differ diff --git a/it-IT/images/step_3.png b/it-IT/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/it-IT/images/step_3.png differ diff --git a/it-IT/images/step_4.png b/it-IT/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/it-IT/images/step_4.png differ diff --git a/it-IT/images/step_5.png b/it-IT/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/it-IT/images/step_5.png differ diff --git a/it-IT/images/step_6.png b/it-IT/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/it-IT/images/step_6.png differ diff --git a/it-IT/images/step_7.png b/it-IT/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/it-IT/images/step_7.png differ diff --git a/it-IT/images/step_8.png b/it-IT/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/it-IT/images/step_8.png differ diff --git a/it-IT/meta.yml b/it-IT/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/it-IT/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/it-IT/resources/dataframe.json b/it-IT/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/it-IT/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/it-IT/resources/mentor.md b/it-IT/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/it-IT/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/it-IT/solutions/main.py b/it-IT/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/it-IT/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/it-IT/step_1.md b/it-IT/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/it-IT/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/it-IT/step_2.md b/it-IT/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/it-IT/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/it-IT/step_3.md b/it-IT/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/it-IT/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/it-IT/step_4.md b/it-IT/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/it-IT/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/it-IT/step_5.md b/it-IT/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/it-IT/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/it-IT/step_6.md b/it-IT/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/it-IT/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/it-IT/step_7.md b/it-IT/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/it-IT/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/it-IT/step_8.md b/it-IT/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/it-IT/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/ja-JP/code/starter/background.png b/ja-JP/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/ja-JP/code/starter/background.png differ diff --git a/ja-JP/code/starter/main.py b/ja-JP/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/ja-JP/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/ja-JP/code/starter/project_config.yml b/ja-JP/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/ja-JP/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/ja-JP/images/banner.png b/ja-JP/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/ja-JP/images/banner.png differ diff --git a/ja-JP/images/step_1.png b/ja-JP/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/ja-JP/images/step_1.png differ diff --git a/ja-JP/images/step_2.png b/ja-JP/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/ja-JP/images/step_2.png differ diff --git a/ja-JP/images/step_3.png b/ja-JP/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/ja-JP/images/step_3.png differ diff --git a/ja-JP/images/step_4.png b/ja-JP/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/ja-JP/images/step_4.png differ diff --git a/ja-JP/images/step_5.png b/ja-JP/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/ja-JP/images/step_5.png differ diff --git a/ja-JP/images/step_6.png b/ja-JP/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/ja-JP/images/step_6.png differ diff --git a/ja-JP/images/step_7.png b/ja-JP/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/ja-JP/images/step_7.png differ diff --git a/ja-JP/images/step_8.png b/ja-JP/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/ja-JP/images/step_8.png differ diff --git a/ja-JP/meta.yml b/ja-JP/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/ja-JP/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/ja-JP/resources/dataframe.json b/ja-JP/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/ja-JP/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/ja-JP/resources/mentor.md b/ja-JP/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/ja-JP/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/ja-JP/solutions/main.py b/ja-JP/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/ja-JP/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/ja-JP/step_1.md b/ja-JP/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/ja-JP/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/ja-JP/step_2.md b/ja-JP/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/ja-JP/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/ja-JP/step_3.md b/ja-JP/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/ja-JP/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/ja-JP/step_4.md b/ja-JP/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/ja-JP/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/ja-JP/step_5.md b/ja-JP/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/ja-JP/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/ja-JP/step_6.md b/ja-JP/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/ja-JP/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/ja-JP/step_7.md b/ja-JP/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/ja-JP/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/ja-JP/step_8.md b/ja-JP/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/ja-JP/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/nl-NL/code/starter/background.png b/nl-NL/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/nl-NL/code/starter/background.png differ diff --git a/nl-NL/code/starter/main.py b/nl-NL/code/starter/main.py new file mode 100644 index 0000000..c9ddd15 --- /dev/null +++ b/nl-NL/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontaal midden +y = 200 # verticaal midden +snelheid = 0 +zwaartekracht = 1 +springen = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Teken Kikker hier + +run() diff --git a/nl-NL/code/starter/project_config.yml b/nl-NL/code/starter/project_config.yml new file mode 100644 index 0000000..a6f716b --- /dev/null +++ b/nl-NL/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop de kikker" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/nl-NL/images/banner.png b/nl-NL/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/nl-NL/images/banner.png differ diff --git a/nl-NL/images/step_1.png b/nl-NL/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/nl-NL/images/step_1.png differ diff --git a/nl-NL/images/step_2.png b/nl-NL/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/nl-NL/images/step_2.png differ diff --git a/nl-NL/images/step_3.png b/nl-NL/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/nl-NL/images/step_3.png differ diff --git a/nl-NL/images/step_4.png b/nl-NL/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/nl-NL/images/step_4.png differ diff --git a/nl-NL/images/step_5.png b/nl-NL/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/nl-NL/images/step_5.png differ diff --git a/nl-NL/images/step_6.png b/nl-NL/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/nl-NL/images/step_6.png differ diff --git a/nl-NL/images/step_7.png b/nl-NL/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/nl-NL/images/step_7.png differ diff --git a/nl-NL/images/step_8.png b/nl-NL/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/nl-NL/images/step_8.png differ diff --git a/nl-NL/meta.yml b/nl-NL/meta.yml new file mode 100644 index 0000000..c5b547c --- /dev/null +++ b/nl-NL/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop de kikker +hero_image: images/banner.png +description: Maak een cartoonkikker die springt, zich uitrekt en in elkaar zakt terwijl hij door je code huppelt. +meta_title: Leer programmeren met Python Wild | Hop de kikker +meta_description: Leer Python met de Raspberry Pi Foundation. Programmeer een cartoonkikker die huppelt en zich uitrekt met animatie. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/nl-NL/resources/dataframe.json b/nl-NL/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/nl-NL/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/nl-NL/resources/mentor.md b/nl-NL/resources/mentor.md new file mode 100644 index 0000000..4b81a85 --- /dev/null +++ b/nl-NL/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentornotities: Python wild - Hop de kikker + +## Projectoverzicht + +In dit Python Wild-project gebruiken leerlingen de p5-bibliotheek om een cartoonkikker te bouwen die in de lucht springt en zich halverwege de sprong uitrekt. Ze oefenen met tekenen, animatie en interactief gedrag met behulp van Python-code. + +--- + +## Wat de leerlingen zullen oefenen + +- Tekenen met `ellipse()` en `circle()` +- Beweging animeren met behulp van variabelen +- Het verwerken van muisinvoer met `mouse_pressed()` +- Vormen uitrekken en samendrukken met behulp van logica +- Het coördineren van beweging met zwaartekracht en het bijhouden van de toestand + +--- + +## Tips voor het lesgeven + +- Benadruk dat `draw()` als een lus werkt — het herhaalt zich automatisch +- Gebruik eenvoudige taal voor beweging en animatie (bijvoorbeeld: "de zwaartekracht trekt de kikker naar beneden") +- Benadruk dat `x` en `y` hergebruikt worden voor de positionering van elk onderdeel van de kikker +- Leg uit dat `rek` wordt gebruikt om meerdere vormen te veranderen met één variabele + +--- + +## Uitbreidingsideeën + +- Voeg een insect toe dat je met de tong kunt vangen +- Geef de kikker een kroon, wangen of bewegende armen +- Voeg waterlelies of waterspatten toe op de achtergrond diff --git a/nl-NL/solutions/main.py b/nl-NL/solutions/main.py new file mode 100644 index 0000000..7c7b38d --- /dev/null +++ b/nl-NL/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontaal midden +y = 200 # verticaal midden +snelheid = 0 +zwaartekracht = 1 +springen = False + +def mouse_pressed(): + global springen, snelheid + if not springen: + springen = True + snelheid = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, snelheid, springen + image(bg, 0, 0, width, height) + + rek = 30 if springen else 0 + + fill('green') + ellipse(x, y, 100, 80 + rek) # lichaam + ellipse(x - 30, y + 30, 30, 20 + rek * 3) # linkerpoot + ellipse(x + 30, y + 30, 30, 20 + rek * 3) # rechterpoot + + fill('white') + circle(x - 20, y - 40 + rek / 2, 25) # linkeroog + circle(x + 20, y - 40 + rek / 2, 25) # rechteroog + + fill('black') + circle(x - 20, y - 40 + rek / 2, 10) # linkerpupil + circle(x + 20, y - 40 + rek / 2, 10) # rechterpupil + + fill('red') + ellipse(x, y + 20, 10, 30 - rek / 2) # tong + + if springen: + y += snelheid + snelheid += zwaartekracht + if y >= 200: + y = 200 + snelheid = 0 + springen = False + +run() diff --git a/nl-NL/step_1.md b/nl-NL/step_1.md new file mode 100644 index 0000000..fca3416 --- /dev/null +++ b/nl-NL/step_1.md @@ -0,0 +1,76 @@ +

Voeg een achtergrond toe

+ +\--- task --- + +Voeg een afbeelding toe die het hele scherm vult met een vijver op de achtergrond. 🐸🌿 + +\--- /task --- + +

Het opzetten van de scene

+ +Laten we beginnen met het toevoegen van een vijverachtergrond aan je scherm. +Je gebruikt `load_image()` om een afbeelding te laden en `image()` om deze in elk frame te tekenen. + +De afbeelding is al aanwezig en opgeslagen als **`background.png`** in dezelfde map als je code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontaal midden +y = 200 # verticaal midden +snelheid = 0 +zwaartekracht = 1 +springen = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Teken Kikker hier + ``` + +run() + +\--- /code --- + +
+ +
+![Een vijverachtergrond op volledig scherm](images/step_1.png) +
+ +
+ +### Meer + +De functie `image()` plaatst de afbeelding op een bepaalde positie.
+Om het scherm te vullen, geef je `0, 0, width, height` door. + +
+ +
+ +### Foutopsporing + +Als de achtergrond niet verschijnt:
+ +- `global bg` moet in de `setup()`-functie staan.
+- Zorg ervoor dat 'background.png' tussen aanhalingstekens staat.
+- Gebruik `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/nl-NL/step_2.md b/nl-NL/step_2.md new file mode 100644 index 0000000..410084a --- /dev/null +++ b/nl-NL/step_2.md @@ -0,0 +1,60 @@ +

Teken de kikker

+ +\--- task --- + +Teken het lichaam en de poten van de kikker met behulp van ellipsen. 🐸🦵 + +\--- /task --- + +

Teken het lichaam en de poten

+ +Je kikker heeft een lijf en poten nodig! +Je gebruikt `ellipse()` om ovalen te tekenen. 🥚 + +De functie `ellipse()` accepteert **4 argumenten**: + +- x-positie +- y-positie +- breedte +- hoogte + +Elk onderdeel van de kikker is **ten opzichte van de x- en y-as** geplaatst. +Dit maakt het later makkelijker om te animeren. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Teken hier de kikker + fill('green') + ellipse(x, y, 100, 80) # lichaam + ellipse(x - 30, y + 30, 30, 20) # linkerpoot + ellipse(x + 30, y + 30, 30, 20) # rechterpoot + ``` + +\--- /code --- + +
+ +
+![Een groen kikkerlichaam en -poten zittend op een waterlelieblad](images/step_2.png) +
+ +
+ +### Tip + +Probeer de getallen te veranderen om te zien hoe de vormen bewegen!
+Let op hoe elk onderdeel **na** de achtergrond wordt getekend — anders zou het verborgen zijn. + +
\ No newline at end of file diff --git a/nl-NL/step_3.md b/nl-NL/step_3.md new file mode 100644 index 0000000..d8922b0 --- /dev/null +++ b/nl-NL/step_3.md @@ -0,0 +1,74 @@ +

Teken de ogen en de tong

+ +\--- task --- + +Voeg witte ogen met zwarte pupillen toe en een rode tong aan de onderkant van de kikker. + +\--- /task --- + +

Voeg wat karakter toe

+ +Laten we je kikker wat expressiever maken door twee witte ogen, zwarte pupillen en een rode tong toe te voegen. 👀👅 + +Gebruik `circle(x, y, size)` voor de ogen en pupillen — cirkels zijn gewoon een vereenvoudigde versie van ellipsen. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Teken hier de kikker + + ``` + fill('green') + ellipse(x, y, 100, 80) # lichaam + ellipse(x - 30, y + 30, 30, 20) # linkerpoot + ellipse(x + 30, y + 30, 30, 20) # rechterpoot + + fill('white') + circle(x - 20, y - 40, 25) # linkeroog + circle(x + 20, y - 40, 25) # rechteroog + + fill('black') + circle(x - 20, y - 40, 10) # linkerpupil + cirkel(x + 20, y - 40, 10) # rechterpupil + + fill('red') + ellips(x, y + 20, 10, 30) # tong + ``` + +\--- /code --- + +
+ +
+![Een cartoonkikker met witte ogen, zwarte pupillen en een rode tong](images/step_3.png) +
+ +
+ +### Tip + +Probeer de grootte van de ogen of de tong aan te passen!
+Wat gebeurt er als je de pupillen dichter bij elkaar of verder uit elkaar beweegt? + +
+ +
+ +### Foutopsporing + +Als je ogen of tong niet zichtbaar zijn:
+ +- Zorg ervoor dat elke vorm het juiste aantal waarden heeft
+- Gebruik `fill()` voordat je elk onderdeel tekent
+- Controleer op typfouten in `circle()` en `ellipse()` + +
\ No newline at end of file diff --git a/nl-NL/step_4.md b/nl-NL/step_4.md new file mode 100644 index 0000000..7f82810 --- /dev/null +++ b/nl-NL/step_4.md @@ -0,0 +1,100 @@ +

Laat de kikker omhoog springen

+ +\--- task --- + +Gebruik een variabele om de kikker omhoog te bewegen wanneer je met de muis klikt. 🖱️⬆️ + +\--- /task --- + +

Tijd om te springen!

+ +Laten we je kikker in beweging krijgen! 🐸💨 +Je laat het omhoog springen als je met de muis klikt. + +Gebruik een variabele genaamd `springen` om bij te houden of de kikker in de lucht is. + +- Wanneer je klikt (ergens op het scherm!), stellen we `springen = True` in +- Als `springen` `True` is, beweegt de kikker omhoog met een `snelheid`-waarde + +Om de kikker te laten springen, geven we hem een kleine negatieve snelheid, bijvoorbeeld -15. +Hierdoor gaat de `y`-positie omhoog — onthoud dat in code een kleinere `y` hoger op het scherm betekent! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +zwaartekracht = 1 +springen = False + +def mouse_pressed(): +globale springen, snelheid +if not springen: +springen = True +snelheid = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, snelheid, springen +image(bg, 0, 0, width, height) + + ``` + # Teken de kikker hier + fill('green') + ellipse(x, y, 100, 80) # lichaam + ellipse(x - 30, y + 30, 30, 20) # linkerpoot + ellipse(x + 30, y + 30, 30, 20) # rechterpoot + + fill('white') + circle(x - 20, y - 40, 25) # linkeroog + circle(x + 20, y - 40, 25) # rechteroog + + fill('black') + cirkel(x - 20, y - 40, 10) # linkerpupil + cirkel(x + 20, y - 40, 10) # rechter pupil + + vullen('red') + ellips(x, y + 20, 10, 30) # tong + + if springen: + y += snelheid + ``` + +\--- /code --- + +
+ +
+![Een kikker midden in een sprong na het klikken](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Probeer de `snelheid` eens te veranderen naar `-10` of `-20` en kijk hoe hoog de kikker springt.
+Lagere getallen = kleinere sprongen. Hogere getallen = grote sprongen! 🐸🚀 + +
+ +
+ +### Foutopsporing 🛠️ + +Als je kikker niet beweegt:
+ +- Zorg ervoor dat `mouse_pressed()` correct gespeld is
+- Controleer of `springen= True` en `snelheid = -15` zijn ingesteld
+- Zoek naar `y += snelheid` binnen het `if springen:` blok + +
\ No newline at end of file diff --git a/nl-NL/step_5.md b/nl-NL/step_5.md new file mode 100644 index 0000000..782a73b --- /dev/null +++ b/nl-NL/step_5.md @@ -0,0 +1,68 @@ +

Laat de kikker terugvallen

+ +\--- task --- + +Gebruik de zwaartekracht om je kikker na de sprong weer op de grond te krijgen. 🪂 + +\--- /task --- + +

Stijlvol vallen

+ +Op dit moment springt je kikker omhoog en blijft hij springen. Laten we hem weer met beide poten op de grond zetten! 🌍 +We gebruiken de zwaartekracht om hem geleidelijk naar beneden te trekken en veilig te laten landen. + +Zo werkt het: + +- Zolang `springen` `True` is, voegen we `zwaartekracht` toe aan `snelheid` +- Hierdoor vertraagt de kikker, en valt vervolgens steeds sneller +- Wanneer de kikker de grond raakt, zetten we zijn positie terug en stoppen we de sprong + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if springen: + y += snelheid + snelheid += zwaartekracht + if y >= 200: + y = 200 + snelheid = 0 + springen = False + ``` + +\--- /code --- + +
+ +
+![Een kikker midden in een sprong die terugkeert naar de grond](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Probeer de waarde van `zwaartekracht` te wijzigen.
+Een hoger getal zorgt ervoor dat de kikker sneller valt.
+Een kleiner getal zorgt ervoor dat je kikker zachter landt! 🐸🌬️ + +
+ +
+ +### Foutopsporing 🧰 + +Als je kikker nooit landt:
+ +- Zorg ervoor dat `snelheid += zwaartekracht` zich binnen het `if springen:` blok bevindt
+- Controleer of `y >= 200` de landingsvoorwaarde is
+- Vergeet niet om `snelheid = 0` en `springen = False` weer in te stellen + +
\ No newline at end of file diff --git a/nl-NL/step_6.md b/nl-NL/step_6.md new file mode 100644 index 0000000..837497b --- /dev/null +++ b/nl-NL/step_6.md @@ -0,0 +1,63 @@ +

Rek de kikker uit

+ +\--- task --- + +Rek het lichaam van je kikker uit wanneer deze in de lucht is. 🐸📏 + +\--- /task --- + +

Groter tijdens springen

+ +Wanneer een kikker springt, strekt hij zijn lichaam uit zodat het lijkt alsof hij zich echt afzet tegen de grond. +We kunnen een variabele gebruiken om het lichaam langer te maken terwijl de kikker in de lucht is. + +We maken een variabele `rek` aan en tellen die op bij de hoogte van de kikker wanneer `springen = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, snelheid, springen +image(bg, 0, 0, width, height) +rek = 30 if springen else 0 + + ``` + # Teken hier een kikker + fill('green') + ellipse(x, y, 100, 80 + rek) # lichaam + ``` + +\--- /code --- + +
+ +
+![Een kikker met een uitgestrekt lichaam in de lucht](images/step_6.png) +
+ +
+ +### Tip + +Probeer de `30` te veranderen in `20` of `40` om de rek aan te passen.
+Je kunt de waarde zelfs tijdens het springen aanpassen om het effect dramatischer te maken! 🎭 + +
+ +
+ +### Foutopsporing + +Als je kikker zich niet uitrekt:
+ +- Controleer of `rek = 30 if springen else 0` vóór de `ellipse()` komt
+- Zorg ervoor dat je `rek` toevoegt aan de lichaamshoogte + +
\ No newline at end of file diff --git a/nl-NL/step_7.md b/nl-NL/step_7.md new file mode 100644 index 0000000..884ee01 --- /dev/null +++ b/nl-NL/step_7.md @@ -0,0 +1,66 @@ +

Strek de poten van de kikker

+ +\--- task --- + +Laat de poten van de kikker zich strekken terwijl hij springt. 🐾 + +\--- /task --- + +

Zet krachtig af!

+ +Laten we nu de poten van de kikker strekken terwijl hij springt. +We veranderen de **hoogte** van de poten met behulp van dezelfde `rek`-variabele. + +Vermenigvuldig de 'rek' met een getal om de pootbeweging te overdrijven. +Probeer `rek * 2` of `rek * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, snelheid, springen +image(bg, 0, 0, width, height) +fill('green') + + ``` + rek = 30 if springen else 0 + + ellipse(x, y, 100, 80 + rek) # lichaam + ellipse(x - 30, y + 30, 30, 20 + rek * 3) # linkerpoot + ellipse(x + 30, y + 30, 30, 20 + rek * 3) # rechterpoot + ``` + +\--- /code --- + +
+ +
+![Een kikker midden in een sprong met gestrekte poten](images/step_7.png) +
+ +
+ +### Tip + +Als de benen te veel uitrekken, probeer dan te vermenigvuldigen met een kleiner getal.
+Strekken met `rek * 2` zal er zachter uitzien dan met `rek * 3`. + +
+ +
+ +### Foutopsporing + +Als de poten er verkeerd uitzien:
+ +- Zorg ervoor dat je `rek * 3` optelt bij de **hoogte** van elke poot
+- Controleer nogmaals of de positie van de poten nog steeds `x - 30` en `x + 30` is + +
\ No newline at end of file diff --git a/nl-NL/step_8.md b/nl-NL/step_8.md new file mode 100644 index 0000000..574d5dd --- /dev/null +++ b/nl-NL/step_8.md @@ -0,0 +1,89 @@ +

Strek de ogen en de tong

+ +\--- task --- + +Laat de ogen van de kikker omhoog gaan en zijn tong inkrimpen wanneer hij springt! 👀👅 + +\--- /task --- + +

Afwerking

+ +Laten we de ogen uitrekken zodat ze omhoog gaan tijdens een sprong, en de tong inkrimpen zodat het lijkt alsof hij zich uit het waterlelieblad omhoog trekt. + +Gebruik dezelfde `rek`-variabele om de `y`-posities en de hoogte te wijzigen. +Dit geeft de animatie een extra professionele uitstraling! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + rek / 2, 25) # linkeroog + circle(x + 20, y - 40 + rek / 2, 25) # rechteroog + + fill('black') + circle(x - 20, y - 40 + rek / 2, 10) # linkerpupil + circle(x + 20, y - 40 + rek / 2, 10) # rechterpupil + + fill('red') + ellipse(x, y + 20, 10, 30 - rek / 2) # tong + ``` + +\--- /code --- + +
+ +
+![Kikker met opgetrokken ogen en ingetrokken tong midden in een sprong](images/step_8.png) +
+ +
+ +### Tip + +Door een deel van de 'rek' toe te voegen aan of af te trekken van de oog- of tongpositie, worden deze geanimeerd.
+Kleinere rek = lagere ogen en langere tong.
+Grotere rek = hogere ogen en een kortere tong! + +
+ +
+ +### Foutopsporing + +Als de ogen of de tong er vreemd uitzien:
+ +- Controleer de `+ rek / 2` of `- rek / 2` onderdelen nogmaals
+- Zorg ervoor dat je zowel de witte als de zwarte cirkels voor elk oog bijwerkt
+ +
+ +
+ +### Terugkoppeling + +Dit is een bètaproject, wat betekent dat het gloednieuw is en nog niet algemeen beschikbaar. Als je dit project zelf of met je club hebt getest, laat ons dan weten wat je ervan vindt. + + +Geef feedback + +
diff --git a/pt-BR/code/starter/background.png b/pt-BR/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/pt-BR/code/starter/background.png differ diff --git a/pt-BR/code/starter/main.py b/pt-BR/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/pt-BR/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/pt-BR/code/starter/project_config.yml b/pt-BR/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/pt-BR/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/pt-BR/images/banner.png b/pt-BR/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/pt-BR/images/banner.png differ diff --git a/pt-BR/images/step_1.png b/pt-BR/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/pt-BR/images/step_1.png differ diff --git a/pt-BR/images/step_2.png b/pt-BR/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/pt-BR/images/step_2.png differ diff --git a/pt-BR/images/step_3.png b/pt-BR/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/pt-BR/images/step_3.png differ diff --git a/pt-BR/images/step_4.png b/pt-BR/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/pt-BR/images/step_4.png differ diff --git a/pt-BR/images/step_5.png b/pt-BR/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/pt-BR/images/step_5.png differ diff --git a/pt-BR/images/step_6.png b/pt-BR/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/pt-BR/images/step_6.png differ diff --git a/pt-BR/images/step_7.png b/pt-BR/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/pt-BR/images/step_7.png differ diff --git a/pt-BR/images/step_8.png b/pt-BR/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/pt-BR/images/step_8.png differ diff --git a/pt-BR/meta.yml b/pt-BR/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/pt-BR/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/pt-BR/resources/dataframe.json b/pt-BR/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/pt-BR/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/pt-BR/resources/mentor.md b/pt-BR/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/pt-BR/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/pt-BR/solutions/main.py b/pt-BR/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/pt-BR/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/pt-BR/step_1.md b/pt-BR/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/pt-BR/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/pt-BR/step_2.md b/pt-BR/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/pt-BR/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/pt-BR/step_3.md b/pt-BR/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/pt-BR/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/pt-BR/step_4.md b/pt-BR/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/pt-BR/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/pt-BR/step_5.md b/pt-BR/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/pt-BR/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/pt-BR/step_6.md b/pt-BR/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/pt-BR/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/pt-BR/step_7.md b/pt-BR/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/pt-BR/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/pt-BR/step_8.md b/pt-BR/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/pt-BR/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +
diff --git a/uk-UA/code/starter/background.png b/uk-UA/code/starter/background.png new file mode 100644 index 0000000..0988259 Binary files /dev/null and b/uk-UA/code/starter/background.png differ diff --git a/uk-UA/code/starter/main.py b/uk-UA/code/starter/main.py new file mode 100644 index 0000000..dd0523e --- /dev/null +++ b/uk-UA/code/starter/main.py @@ -0,0 +1,18 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): + size(400, 400) + no_stroke() + + +def draw(): + + # Draw Frog here + +run() diff --git a/uk-UA/code/starter/project_config.yml b/uk-UA/code/starter/project_config.yml new file mode 100644 index 0000000..9e8e15d --- /dev/null +++ b/uk-UA/code/starter/project_config.yml @@ -0,0 +1,4 @@ +name: "Python wild - Hop the frog" +identifier: "python-wild-hop-the-frog" +type: python +build: true diff --git a/uk-UA/images/banner.png b/uk-UA/images/banner.png new file mode 100644 index 0000000..5d2c4e9 Binary files /dev/null and b/uk-UA/images/banner.png differ diff --git a/uk-UA/images/step_1.png b/uk-UA/images/step_1.png new file mode 100644 index 0000000..413060c Binary files /dev/null and b/uk-UA/images/step_1.png differ diff --git a/uk-UA/images/step_2.png b/uk-UA/images/step_2.png new file mode 100644 index 0000000..9bff01a Binary files /dev/null and b/uk-UA/images/step_2.png differ diff --git a/uk-UA/images/step_3.png b/uk-UA/images/step_3.png new file mode 100644 index 0000000..92ed9bf Binary files /dev/null and b/uk-UA/images/step_3.png differ diff --git a/uk-UA/images/step_4.png b/uk-UA/images/step_4.png new file mode 100644 index 0000000..b0c0dd1 Binary files /dev/null and b/uk-UA/images/step_4.png differ diff --git a/uk-UA/images/step_5.png b/uk-UA/images/step_5.png new file mode 100644 index 0000000..1561769 Binary files /dev/null and b/uk-UA/images/step_5.png differ diff --git a/uk-UA/images/step_6.png b/uk-UA/images/step_6.png new file mode 100644 index 0000000..91800b2 Binary files /dev/null and b/uk-UA/images/step_6.png differ diff --git a/uk-UA/images/step_7.png b/uk-UA/images/step_7.png new file mode 100644 index 0000000..9b5f852 Binary files /dev/null and b/uk-UA/images/step_7.png differ diff --git a/uk-UA/images/step_8.png b/uk-UA/images/step_8.png new file mode 100644 index 0000000..b373b9a Binary files /dev/null and b/uk-UA/images/step_8.png differ diff --git a/uk-UA/meta.yml b/uk-UA/meta.yml new file mode 100644 index 0000000..dc1eef0 --- /dev/null +++ b/uk-UA/meta.yml @@ -0,0 +1,23 @@ +title: Python wild - Hop the frog +hero_image: images/banner.png +description: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code. +meta_title: Learn to code with Python Wild | Hop the Frog +meta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation. +version: 1 +listed: true +copyedit: false +last_tested: "2025-04-11" +steps: + - title: step_1 + - title: step_2 + completion: + - engaged + - title: step_3 + - title: step_4 + - title: step_5 + - title: step_6 + - title: step_7 + - title: step_8 + completion: + - internal + - external diff --git a/uk-UA/resources/dataframe.json b/uk-UA/resources/dataframe.json new file mode 100644 index 0000000..06c6ed2 --- /dev/null +++ b/uk-UA/resources/dataframe.json @@ -0,0 +1,92 @@ +[ + { + "filename": "main.py", + "path": "en\/code\/starter\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "main.py", + "path": "en\/solutions\/", + "content": "from p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n\n stretch = 30 if jumping else 0\n\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n\nrun()\n" + }, + { + "filename": "project_config.yml", + "path": "en\/code\/starter\/", + "content": "name: \"Hop the Frog\"\nidentifier: \"python-wild-hop-the-frog\"\ntype: python\nbuild: true\n" + }, + { + "filename": "step_1.md", + "path": "en\/", + "content": "

Add a background<\/h2>\n--- task ---\nAdd an image that fills the screen with a pond background. 🐸🌿\n--- \/task ---\n\n

Set the scene<\/h2>\n\nLet’s start by adding a pond background to your screen. \nYou’ll use `load_image()` to load a picture and `image()` to draw it each frame.\n\nThe image is already provided and saved as **`background.png`** in the same folder as your code.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 1\nline_highlights: 12-13, 17\n---\nfrom p5 import *\n\nx = 200 # horizontal middle\ny = 200 # vertical middle\nspeed = 0\ngravity = 1\njumping = False\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n\nrun()\n--- \/code ---\n<\/div>\n\n
\n![A full-screen pond background](images\/step_1.png)\n<\/div>\n\n
\n\n### Tip\n\nThe `image()` function places the image at a position.
\nTo fill the screen, pass in `0, 0, width, height`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the background doesn’t appear:
\n- Make sure `load_image('background.png')` is inside `setup()`
\n- Double-check the spelling of the file name
\n- Use `image(bg, 0, 0, width, height)` in `draw()`\n\n<\/div>" + }, + { + "filename": "step_2.md", + "path": "en\/", + "content": "

Draw the frog<\/h2>\n--- task ---\nUse ellipses to draw the frog’s body and feet. 🐸👣\n--- \/task ---\n\n

Draw the body and feet<\/h2>\n\nYour frog needs a body and feet! \nYou’ll use `ellipse()` to draw ovals. 🥚\n\nThe `ellipse()` function takes **4 arguments**:\n- x position\n- y position\n- width\n- height\n\nEach part of the frog is placed **relative to `x` and `y`**. \nThis will make it easy to animate later on.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 16\nline_highlights: 20-23\n---\ndef draw():\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A green frog body and feet sitting on a lily pad](images\/step_2.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the numbers to see how the shapes move!
\nNotice how each part is drawn **after** the background — otherwise it would be hidden. 🎨\n\n<\/div>" + }, + { + "filename": "step_3.md", + "path": "en\/", + "content": "

Draw the eyes and tongue<\/h2>\n--- task ---\nAdd white eyes with black pupils, and a red tongue underneath the frog.\n--- \/task ---\n\n

Add some character<\/h2>\n\nLet’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅\n\nWe’ll use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 32-34, 36-38, 40-41\n---\ndef draw():\n image(bg, 0, 0, width, height)\n # Draw Frog here\n\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n--- \/code ---\n<\/div>\n\n
\n![A cartoon frog with white eyes, black pupils, and a red tongue](images\/step_3.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the size of the eyes or tongue! \nWhat happens if you move the pupils closer together or further apart?\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your eyes or tongue aren’t showing:
\n- Make sure each shape has the right number of values
\n- Use `fill()` before drawing each part
\n- Check for typos in `circle()` and `ellipse()`\n\n<\/div>" + }, + { + "filename": "step_4.md", + "path": "en\/", + "content": "

Make the frog jump up<\/h2>\n--- task ---\nUse a variable to move the frog upwards when you click the mouse. 🖱️⬆️\n--- \/task ---\n\n

Time to hop!<\/h2>\n\nLet’s get your frog moving! 🐸💨 \nYou’ll make it jump upwards when the mouse is clicked.\n\nWe use a variable called `jumping` to keep track of whether the frog is in the air. \n- When you click, we set `jumping = True` \n- While `jumping` is `True`, the frog moves up using a `speed` value\n\nTo make the frog leap, we give it a small negative `speed` like `-15`. \nThis makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! 🎯\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 6\nline_highlights: 9-13, 24, 44-45\n---\ngravity = 1\njumping = False\n\ndef mouse_pressed():\n global jumping, speed\n if not jumping:\n jumping = True\n speed = -15\n\n\ndef setup():\n size(400, 400)\n no_stroke()\n global bg\n bg = load_image('background.png')\n\n\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80) # body\n ellipse(x - 30, y + 30, 30, 20) # left foot\n ellipse(x + 30, y + 30, 30, 20) # right foot\n\n fill('white')\n circle(x - 20, y - 40, 25) # left eye\n circle(x + 20, y - 40, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40, 10) # left pupil\n circle(x + 20, y - 40, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30) # tongue\n\n if jumping:\n y += speed\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump after clicking](images\/step_4.png)\n<\/div>\n\n
\n\n### Tip 🧠\n\nTry changing the `speed` to `-10` or `-20` and see how high the frog jumps.
\nLower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀\n\n<\/div>\n\n
\n\n### Debugging 🛠️\n\nIf your frog doesn’t move:
\n- Make sure `mouse_pressed()` is spelled correctly
\n- Check that `jumping = True` and `speed = -15` are set
\n- Look for `y += speed` inside the `if jumping:` block\n\n<\/div>" + }, + { + "filename": "step_5.md", + "path": "en\/", + "content": "

Make the frog fall back down<\/h2>\n--- task ---\nUse gravity to bring your frog back to the ground after it jumps. 🪂\n--- \/task ---\n\n

Falling with style<\/h2>\n\nRight now, your frog jumps up and stays there. Let’s bring it back down to earth! 🌍 \nWe’ll use gravity to pull it down over time and land it safely.\n\nHere’s how it works: \n- While `jumping` is `True`, we add `gravity` to `speed` \n- This makes the frog slow down, then fall faster and faster \n- When the frog reaches the ground, we reset its position and stop the jump\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 44\nline_highlights: 46-50\n---\n if jumping:\n y += speed\n speed += gravity\n if y >= 200:\n y = 200\n speed = 0\n jumping = False\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump returning to land](images\/step_5.png)\n<\/div>\n\n
\n\n### Tip 🌟\n\nTry changing the `gravity` value.
\nA higher number will make the frog fall faster.
\nA smaller number will give your frog a gentler landing! 🐸🌬️\n\n<\/div>\n\n
\n\n### Debugging 🧰\n\nIf your frog never lands:
\n- Make sure `speed += gravity` is inside the `if jumping:` block
\n- Check for `y >= 200` as the landing condition
\n- Don't forget to reset `speed = 0` and `jumping = False`\n\n<\/div>" + }, + { + "filename": "step_6.md", + "path": "en\/", + "content": "

Stretch the frog<\/h2>\n--- task ---\nStretch your frog’s body when it’s in the air. 🐸📏\n--- \/task ---\n\n

Leaping taller<\/h2>\n\nWhen a frog jumps, it stretches its body to look like it's really pushing off the ground. \nWe can use a variable to make the body longer while the frog is in the air.\n\nWe’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`.\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 26, 30\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n stretch = 30 if jumping else 0\n \n # Draw Frog here\n fill('green')\n ellipse(x, y, 100, 80 + stretch) # body\n--- \/code ---\n<\/div>\n\n
\n![A frog with a stretched body in mid-air](images\/step_6.png)\n<\/div>\n\n
\n\n### Tip\n\nTry changing the `30` to `20` or `40` to adjust the stretch.
\nYou can even change the value while jumping to make the stretch more dramatic! 🎭\n\n<\/div>\n\n
\n\n### Debugging\n\nIf your frog doesn’t stretch:
\n- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
\n- Make sure you’re using `80 + stretch` for the body height\n\n<\/div>" + }, + { + "filename": "step_7.md", + "path": "en\/", + "content": "

Stretch the frog’s legs<\/h2>\n--- task ---\nMake the frog’s feet stretch as it jumps. 🐾\n--- \/task ---\n\n

Push off with power!<\/h2>\n\nNow let’s stretch the frog’s legs as it leaps. \nWe’ll change the **height** of the feet using the same `stretch` variable.\n\nMultiply the `stretch` by a number to exaggerate the leg movement. \nTry `stretch * 2` or `stretch * 3`!\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 23\nline_highlights: 31-32\n---\ndef draw():\n global y, speed, jumping\n image(bg, 0, 0, width, height)\n fill('green')\n\n stretch = 30 if jumping else 0\n\n ellipse(x, y, 100, 80 + stretch) # body\n ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot\n ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot\n--- \/code ---\n<\/div>\n\n
\n![A frog mid-jump with stretched feet](images\/step_7.png)\n<\/div>\n\n
\n\n### Tip\n\nIf the feet stretch too much, try multiplying by a smaller number.
\nStretching by `stretch * 2` will look gentler than `stretch * 3`.\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the feet look wrong:
\n- Make sure you're adding `stretch * 3` to the **height** of each foot
\n- Double-check the position of the feet is still `x - 30` and `x + 30`\n\n<\/div>" + }, + { + "filename": "step_8.md", + "path": "en\/", + "content": "

Stretch the eyes and tongue<\/h2>\n--- task ---\nMake the frog’s eyes rise and its tongue shrink when it jumps! 👀👅\n--- \/task ---\n\n

Finishing touches<\/h2>\n\nLet’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad.\n\nUse the same `stretch` variable to change the `y` positions and height. \nThis adds polish to the animation! ✨\n\n
\n--- code ---\n---\nlanguage: python\nfilename: main.py\nline_numbers: true\nline_number_start: 34\nline_highlights: 35-36, 39-40, 43\n---\n fill('white')\n circle(x - 20, y - 40 + stretch \/ 2, 25) # left eye\n circle(x + 20, y - 40 + stretch \/ 2, 25) # right eye\n\n fill('black')\n circle(x - 20, y - 40 + stretch \/ 2, 10) # left pupil\n circle(x + 20, y - 40 + stretch \/ 2, 10) # right pupil\n\n fill('red')\n ellipse(x, y + 20, 10, 30 - stretch \/ 2) # tongue\n--- \/code ---\n<\/div>\n\n
\n![Frog with rising eyes and shrinking tongue mid-jump](images\/step_8.png)\n<\/div>\n\n
\n\n### Tip\n\nAdding or subtracting part of `stretch` from the eye or tongue position will animate them.
\nSmaller stretch = lower eyes and longer tongue.
\nBigger stretch = higher eyes and a shorter tongue!\n\n<\/div>\n\n
\n\n### Debugging\n\nIf the eyes or tongue look strange:
\n- Double-check the `+ stretch \/ 2` or `- stretch \/ 2` parts
\n- Make sure you update both the white and black circles for each eye
\n- Try printing the `stretch` value to see what it’s doing\n\n<\/div>" + }, + { + "filename": "mentor.md", + "path": "en\/resources\/", + "content": "# Mentor Notes: Hop the Frog\n\n## Project Overview\n\nIn this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code.\n\n---\n\n## What Learners Will Practise\n\n- Drawing with `ellipse()` and `circle()`\n- Using variables to animate motion\n- Handling mouse input with `mouse_pressed()`\n- Stretching and squashing shapes with logic\n- Coordinating motion with gravity and state tracking\n\n---\n\n## Teaching Tips\n\n- Reinforce that `draw()` runs like a loop — it repeats automatically\n- Use simple language for motion and animation (e.g. “gravity pulls the frog down”)\n- Emphasise that `x` and `y` are reused for positioning every part of the frog\n- Explain that `stretch` is used to change multiple shapes with one variable\n\n---\n\n## Extension Ideas\n\n- Add a bug to catch with the tongue\n- Give the frog a crown, cheeks, or animated arms\n- Add lily pads or water splashes in the background\n" + }, + { + "filename": "meta.yml", + "path": "en\/", + "content": "title: Hop the Frog\nhero_image: images\/step_8.png\ndescription: Make a cartoon frog that jumps, stretches, and squashes as it hops through your code.\nmeta_title: Learn to code with Python Wild | Hop the Frog\nmeta_description: Learn Python with the Raspberry Pi Foundation. Code a cartoon frog that hops and stretches with animation.\nversion: 1\nlisted: false\ncopyedit: false\nlast_tested: \"2025-04-11\"\nsteps:\n - title: step_1\n - title: step_2\n completion:\n - engaged\n - title: step_3\n - title: step_4\n - title: step_5\n - title: step_6\n - title: step_7\n - title: step_8\n completion:\n - internal\n - external\n" + }, + { + "filename": "README.md", + "path": "", + "content": "# Hop the Frog\n\n![A cartoon frog jumping over a pond with lily pads and a flower](en\/images\/banner.png)\n\nMake a cartoon frog that jumps, stretches, and squashes as it hops through your code.\n\nFind the project online at [projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog](https:\/\/projects.raspberrypi.org\/en\/projects\/python-wild-hop-the-frog)\n\n## Resources\nFor project materials and solutions, see [en\/resources](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/resources) and [en\/solutions](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/tree\/master\/en\/solutions).\n\n## Contributing\nSee [CONTRIBUTING.md](CONTRIBUTING.md)\n\n## Licence\nSee [LICENCE.md](LICENCE.md)\n" + }, + { + "filename": "CONTRIBUTING.md", + "path": "", + "content": "# Contributing\n\nAll contributions are assumed to be licensed under the same licence as the source, i.e. [CC BY-SA](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/). This licence must remain in all derivatives of this work.\n\n## Issues\n\nIf you find a mistake, bug, or other problem, please [open an issue](https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog\/issues) in this repository.\n\n## Pull requests\n\nAll edits to a resource should be made to the draft branch or to a fork of the repo. These patches can then be submitted as a pull request.\n\nIf you fix a mistake, bug, or problem or have something to contribute, please create a pull request for each modification. Please consider grouping modifications sensibly, e.g. don't bundle typo fixes in the same pull request as code changes, file them separately instead.\n\nPlease note that sometimes things are done for pedagogical reasons so changes which make sense from a software engineering perspective (reducing duplication or making use of more advanced programming language features) may not be suitable to maintain the intended educational value.\n\n## Derivatives\n\nSee [LICENCE.md](LICENCE.md) for content licence. The licence must remain in all derivatives of this work.\n\n## Translation\n\nYou can help us make this project available to more people around the world by translating it. For more information, please go to [rpf.io\/translate](https:\/\/rpf.io\/translate).\n" + }, + { + "filename": "LICENCE.md", + "path": "", + "content": "# Licence\n\nUnless otherwise specified, everything in this repository is covered by the following licence:\n\n[![Creative Commons licence](http:\/\/i.creativecommons.org\/l\/by-sa\/4.0\/88x31.png)](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/)\n\n**Hop the Frog** by the [Raspberry Pi Foundation](http:\/\/www.raspberrypi.org) is licensed under a [Creative Commons Attribution 4.0 International licence](http:\/\/creativecommons.org\/licenses\/by-sa\/4.0\/).\n\nBased on a work at https:\/\/github.com\/raspberrypilearning\/python-wild-hop-the-frog.\n" + }, + { + "filename": "crowdin.yml", + "path": "", + "content": "files:\n - source: \/en\/**\/.*\n translation: \/%locale%\/**\/%original_file_name%\n" + }, + { + "filename": "banner.png", + "path": "en\/images\/", + "content": "" + } +] \ No newline at end of file diff --git a/uk-UA/resources/mentor.md b/uk-UA/resources/mentor.md new file mode 100644 index 0000000..d45982e --- /dev/null +++ b/uk-UA/resources/mentor.md @@ -0,0 +1,32 @@ +# Mentor Notes: Python wild - Hop the frog + +## Project Overview + +In this Python Wild project, learners use the p5 library to build a cartoon frog that hops into the air and stretches mid-jump. They practise drawing, animation, and interactive behaviours using Python code. + +--- + +## What Learners Will Practise + +- Drawing with `ellipse()` and `circle()` +- Using variables to animate motion +- Handling mouse input with `mouse_pressed()` +- Stretching and squashing shapes with logic +- Coordinating motion with gravity and state tracking + +--- + +## Teaching Tips + +- Reinforce that `draw()` runs like a loop — it repeats automatically +- Use simple language for motion and animation (e.g. “gravity pulls the frog down”) +- Emphasise that `x` and `y` are reused for positioning every part of the frog +- Explain that `stretch` is used to change multiple shapes with one variable + +--- + +## Extension Ideas + +- Add a bug to catch with the tongue +- Give the frog a crown, cheeks, or animated arms +- Add lily pads or water splashes in the background diff --git a/uk-UA/solutions/main.py b/uk-UA/solutions/main.py new file mode 100644 index 0000000..18544f7 --- /dev/null +++ b/uk-UA/solutions/main.py @@ -0,0 +1,51 @@ +from p5 import * + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def mouse_pressed(): + global jumping, speed + if not jumping: + jumping = True + speed = -15 + +def setup(): + size(400, 400) + no_stroke() + global bg + bg = load_image('background.png') + +def draw(): + global y, speed, jumping + image(bg, 0, 0, width, height) + + stretch = 30 if jumping else 0 + + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left foot + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right foot + + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + +run() diff --git a/uk-UA/step_1.md b/uk-UA/step_1.md new file mode 100644 index 0000000..bdb35e9 --- /dev/null +++ b/uk-UA/step_1.md @@ -0,0 +1,76 @@ +

Add a background

+ +\--- task --- + +Add an image that fills the screen with a pond background. 🐸🌿 + +\--- /task --- + +

Set the scene

+ +Let’s start by adding a pond background to your screen. +You’ll use `load_image()` to load a picture and `image()` to draw it each frame. + +The image is already provided and saved as **`background.png`** in the same folder as your code. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 1 +line_highlights: 12-13, 17 +--- + +from p5 import \* + +x = 200 # horizontal middle +y = 200 # vertical middle +speed = 0 +gravity = 1 +jumping = False + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + ``` + +run() + +\--- /code --- + +
+ +
+![A full-screen pond background](images/step_1.png) +
+ +
+ +### More + +The `image()` function places the image at a position.
+To fill the screen, pass in `0, 0, width, height`. + +
+ +
+ +### Debugging + +If the background doesn’t appear:
+ +- `global bg` needs to be in the `setup()` function.
+- Make sure 'background.png' is in quotes.
+- Use `image(bg, 0, 0, width, height)` in `draw()` + +
diff --git a/uk-UA/step_2.md b/uk-UA/step_2.md new file mode 100644 index 0000000..ed7bd48 --- /dev/null +++ b/uk-UA/step_2.md @@ -0,0 +1,60 @@ +

Draw the frog

+ +\--- task --- + +Use ellipses to draw the frog’s body and legs. 🐸🦵 + +\--- /task --- + +

Draw the body and legs

+ +Your frog needs a body and legs! +You’ll use `ellipse()` to draw ovals. 🥚 + +The `ellipse()` function takes **4 arguments**: + +- x position +- y position +- width +- height + +Each part of the frog is placed **relative to `x` and `y`**. +This will make it easy to animate later on. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 20-23 +--- + +def draw(): +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + ``` + +\--- /code --- + +
+ +
+![A green frog body and feet sitting on a lily pad](images/step_2.png) +
+ +
+ +### Tip + +Try changing the numbers to see how the shapes move!
+Notice how each part is drawn **after** the background — otherwise it would be hidden. + +
\ No newline at end of file diff --git a/uk-UA/step_3.md b/uk-UA/step_3.md new file mode 100644 index 0000000..20d646e --- /dev/null +++ b/uk-UA/step_3.md @@ -0,0 +1,74 @@ +

Draw the eyes and tongue

+ +\--- task --- + +Add white eyes with black pupils, and a red tongue underneath the frog. + +\--- /task --- + +

Add some character

+ +Let’s make your frog more expressive by adding two white eyes, black pupils, and a red tongue. 👀👅 + +Use `circle(x, y, size)` for the eyes and pupils — circles are just a simpler version of ellipses. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 16 +line_highlights: 25-27, 29-31, 33-34 +--- + +def draw(): +image(bg, 0, 0, width, height) +\# Draw Frog here + + ``` + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + ``` + +\--- /code --- + +
+ +
+![A cartoon frog with white eyes, black pupils, and a red tongue](images/step_3.png) +
+ +
+ +### Tip + +Try changing the size of the eyes or tongue!
+What happens if you move the pupils closer together or further apart? + +
+ +
+ +### Debugging + +If your eyes or tongue aren’t showing:
+ +- Make sure each shape has the right number of values
+- Use `fill()` before drawing each part
+- Check for typos in `circle()` and `ellipse()` + +
\ No newline at end of file diff --git a/uk-UA/step_4.md b/uk-UA/step_4.md new file mode 100644 index 0000000..ec02b87 --- /dev/null +++ b/uk-UA/step_4.md @@ -0,0 +1,100 @@ +

Make the frog jump up

+ +\--- task --- + +Use a variable to move the frog upwards when you click the mouse. 🖱️⬆️ + +\--- /task --- + +

Time to hop!

+ +Let’s get your frog moving! 🐸💨 +You’ll make it jump upwards when the mouse is clicked. + +Use a variable called `jumping` to keep track of whether the frog is in the air. + +- When you click (anywhere on the screen!), we set `jumping = True` +- If `jumping` is `True`, the frog moves up using a `speed` value + +To make the frog jump, we give it a small negative `speed` like `-15`. +This makes the `y` position go up — remember, in code, smaller `y` means higher up on the screen! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 6 +line_highlights: 9-13, 24, 44-45 +--- + +gravity = 1 +jumping = False + +def mouse_pressed(): +global jumping, speed +if not jumping: +jumping = True +speed = -15 + +def setup(): +size(400, 400) +no_stroke() +global bg +bg = load_image('background.png') + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80) # body + ellipse(x - 30, y + 30, 30, 20) # left leg + ellipse(x + 30, y + 30, 30, 20) # right leg + + fill('white') + circle(x - 20, y - 40, 25) # left eye + circle(x + 20, y - 40, 25) # right eye + + fill('black') + circle(x - 20, y - 40, 10) # left pupil + circle(x + 20, y - 40, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30) # tongue + + if jumping: + y += speed + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump after clicking](images/step_4.png) +
+ +
+ +### Tip 🧠 + +Try changing the `speed` to `-10` or `-20` and see how high the frog jumps.
+Lower numbers = smaller jumps. Higher numbers = big hops! 🐸🚀 + +
+ +
+ +### Debugging 🛠️ + +If your frog doesn’t move:
+ +- Make sure `mouse_pressed()` is spelled correctly
+- Check that `jumping = True` and `speed = -15` are set
+- Look for `y += speed` inside the `if jumping:` block + +
\ No newline at end of file diff --git a/uk-UA/step_5.md b/uk-UA/step_5.md new file mode 100644 index 0000000..b5d0a94 --- /dev/null +++ b/uk-UA/step_5.md @@ -0,0 +1,68 @@ +

Make the frog fall back down

+ +\--- task --- + +Use gravity to bring your frog back to the ground after it jumps. 🪂 + +\--- /task --- + +

Falling with style

+ +Right now, your frog jumps up and keeps going. Let’s bring it back down to earth! 🌍 +We’ll use gravity to pull it down over time and land it safely. + +Here’s how it works: + +- While `jumping` is `True`, we add `gravity` to `speed` +- This makes the frog slow down, then fall faster and faster +- When the frog reaches the ground, we reset its position and stop the jump + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 44 +line_highlights: 46-50 +--- + + ``` + if jumping: + y += speed + speed += gravity + if y >= 200: + y = 200 + speed = 0 + jumping = False + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump returning to land](images/step_5.png) +
+ +
+ +### Tip 🌟 + +Try changing the `gravity` value.
+A higher number will make the frog fall faster.
+A smaller number will give your frog a gentler landing! 🐸🌬️ + +
+ +
+ +### Debugging 🧰 + +If your frog never lands:
+ +- Make sure `speed += gravity` is inside the `if jumping:` block
+- Check for `y >= 200` as the landing condition
+- Don't forget to reset `speed = 0` and `jumping = False` + +
\ No newline at end of file diff --git a/uk-UA/step_6.md b/uk-UA/step_6.md new file mode 100644 index 0000000..680f8b8 --- /dev/null +++ b/uk-UA/step_6.md @@ -0,0 +1,63 @@ +

Stretch the frog

+ +\--- task --- + +Stretch your frog’s body when it’s in the air. 🐸📏 + +\--- /task --- + +

Leaping taller

+ +When a frog jumps, it stretches its body to look like it's really pushing off the ground. +We can use a variable to make the body longer while the frog is in the air. + +We’ll create a `stretch` variable and add it to the frog’s height when `jumping = True`. + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 26, 30 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +stretch = 30 if jumping else 0 + + ``` + # Draw Frog here + fill('green') + ellipse(x, y, 100, 80 + stretch) # body + ``` + +\--- /code --- + +
+ +
+![A frog with a stretched body in mid-air](images/step_6.png) +
+ +
+ +### Tip + +Try changing the `30` to `20` or `40` to adjust the stretch.
+You can even change the value while jumping to make the stretch more dramatic! 🎭 + +
+ +
+ +### Debugging + +If your frog doesn’t stretch:
+ +- Check that `stretch = 30 if jumping else 0` comes before the `ellipse()`
+- Make sure you’re adding `stretch` to the body height + +
\ No newline at end of file diff --git a/uk-UA/step_7.md b/uk-UA/step_7.md new file mode 100644 index 0000000..de7507b --- /dev/null +++ b/uk-UA/step_7.md @@ -0,0 +1,66 @@ +

Stretch the frog’s legs

+ +\--- task --- + +Make the frog’s feet stretch as it jumps. 🐾 + +\--- /task --- + +

Push off with power!

+ +Now let’s stretch the frog’s legs as it jumps. +We’ll change the **height** of the feet using the same `stretch` variable. + +Multiply the `stretch` by a number to exaggerate the leg movement. +Try `stretch * 2` or `stretch * 3`! + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 23 +line_highlights: 31-32 +--- + +def draw(): +global y, speed, jumping +image(bg, 0, 0, width, height) +fill('green') + + ``` + stretch = 30 if jumping else 0 + + ellipse(x, y, 100, 80 + stretch) # body + ellipse(x - 30, y + 30, 30, 20 + stretch * 3) # left leg + ellipse(x + 30, y + 30, 30, 20 + stretch * 3) # right leg + ``` + +\--- /code --- + +
+ +
+![A frog mid-jump with stretched feet](images/step_7.png) +
+ +
+ +### Tip + +If the legs stretch too much, try multiplying by a smaller number.
+Stretching by `stretch * 2` will look gentler than `stretch * 3`. + +
+ +
+ +### Debugging + +If the feet look wrong:
+ +- Make sure you're adding `stretch * 3` to the **height** of each foot
+- Double-check the position of the legs is still `x - 30` and `x + 30` + +
\ No newline at end of file diff --git a/uk-UA/step_8.md b/uk-UA/step_8.md new file mode 100644 index 0000000..be26453 --- /dev/null +++ b/uk-UA/step_8.md @@ -0,0 +1,89 @@ +

Stretch the eyes and tongue

+ +\--- task --- + +Make the frog’s eyes rise and its tongue shrink when it jumps! 👀👅 + +\--- /task --- + +

Finishing touches

+ +Let’s stretch the eyes so they rise during a jump, and shrink the tongue to make it look like it’s pulling up from the lily pad. + +Use the same `stretch` variable to change the `y` positions and height. +This adds polish to the animation! ✨ + +
+--- code --- +--- +language: python +filename: main.py +line_numbers: true +line_number_start: 34 +line_highlights: 35-36, 39-40, 43 +--- + + ``` + fill('white') + circle(x - 20, y - 40 + stretch / 2, 25) # left eye + circle(x + 20, y - 40 + stretch / 2, 25) # right eye + + fill('black') + circle(x - 20, y - 40 + stretch / 2, 10) # left pupil + circle(x + 20, y - 40 + stretch / 2, 10) # right pupil + + fill('red') + ellipse(x, y + 20, 10, 30 - stretch / 2) # tongue + ``` + +\--- /code --- + +
+ +
+![Frog with rising eyes and shrinking tongue mid-jump](images/step_8.png) +
+ +
+ +### Tip + +Adding or subtracting part of `stretch` from the eye or tongue position will animate them.
+Smaller stretch = lower eyes and longer tongue.
+Bigger stretch = higher eyes and a shorter tongue! + +
+ +
+ +### Debugging + +If the eyes or tongue look strange:
+ +- Double-check the `+ stretch / 2` or `- stretch / 2` parts
+- Make sure you update both the white and black circles for each eye
+ +
+ +
+ +### Feedback + +This is a beta projects, which means it is brand new and not widely available. If you've tested this project on your own or with your club, let us know what you think. + + +Give feedback + +