diff --git a/en-GB/creating-patterns/index.md b/en-GB/creating-patterns/index.md new file mode 100644 index 0000000..61c63c3 --- /dev/null +++ b/en-GB/creating-patterns/index.md @@ -0,0 +1,23 @@ +--- +title: Creating patterns +description: Using basic shapes creating geometric patterns. +notes: "notes.md" +layout: project +new: true +project-type: community +--- + +# Introduction { .intro } +In this project, you'll create different geometric patterns without repeating code using loops. You'll be introduced the basics of JavaScript loops to make different geometrical patterns. + + + +# Step 1: What is loop? { .activity } +In programming, loops can be used to avoid repetition of same lines of code with slight variations. + +## Activity Checklist { .check } ++ + You'll be using a website called Trinket to write HTML. Open this Trinket: jumpto.cc/creatingpatterns-intro. + + + + diff --git a/en-GB/making-shapes/images/cam1.png b/en-GB/making-shapes/images/cam1.png new file mode 100644 index 0000000..790f579 Binary files /dev/null and b/en-GB/making-shapes/images/cam1.png differ diff --git a/en-GB/making-shapes/images/coordinate.jpg b/en-GB/making-shapes/images/coordinate.jpg new file mode 100644 index 0000000..8d003be Binary files /dev/null and b/en-GB/making-shapes/images/coordinate.jpg differ diff --git a/en-GB/making-shapes/images/coordinate.png b/en-GB/making-shapes/images/coordinate.png new file mode 100644 index 0000000..4345b2b Binary files /dev/null and b/en-GB/making-shapes/images/coordinate.png differ diff --git a/en-GB/making-shapes/images/ellipse.png b/en-GB/making-shapes/images/ellipse.png new file mode 100644 index 0000000..39e3e0c Binary files /dev/null and b/en-GB/making-shapes/images/ellipse.png differ diff --git a/en-GB/making-shapes/images/ellipse1.png b/en-GB/making-shapes/images/ellipse1.png new file mode 100644 index 0000000..7fcdc6d Binary files /dev/null and b/en-GB/making-shapes/images/ellipse1.png differ diff --git a/en-GB/making-shapes/images/fish.png b/en-GB/making-shapes/images/fish.png new file mode 100644 index 0000000..09f0bfa Binary files /dev/null and b/en-GB/making-shapes/images/fish.png differ diff --git a/en-GB/making-shapes/images/image.png b/en-GB/making-shapes/images/image.png new file mode 100644 index 0000000..f288cb3 Binary files /dev/null and b/en-GB/making-shapes/images/image.png differ diff --git a/en-GB/making-shapes/images/java1.png b/en-GB/making-shapes/images/java1.png new file mode 100644 index 0000000..8a0dcf8 Binary files /dev/null and b/en-GB/making-shapes/images/java1.png differ diff --git a/en-GB/making-shapes/images/java2.png b/en-GB/making-shapes/images/java2.png new file mode 100644 index 0000000..748b95d Binary files /dev/null and b/en-GB/making-shapes/images/java2.png differ diff --git a/en-GB/making-shapes/images/javafunc.png b/en-GB/making-shapes/images/javafunc.png new file mode 100644 index 0000000..2b6d4b2 Binary files /dev/null and b/en-GB/making-shapes/images/javafunc.png differ diff --git a/en-GB/making-shapes/images/javafunc1.png b/en-GB/making-shapes/images/javafunc1.png new file mode 100644 index 0000000..3494bdf Binary files /dev/null and b/en-GB/making-shapes/images/javafunc1.png differ diff --git a/en-GB/making-shapes/images/line.png b/en-GB/making-shapes/images/line.png new file mode 100644 index 0000000..ea0c53c Binary files /dev/null and b/en-GB/making-shapes/images/line.png differ diff --git a/en-GB/making-shapes/images/line2.png b/en-GB/making-shapes/images/line2.png new file mode 100644 index 0000000..efcc17d Binary files /dev/null and b/en-GB/making-shapes/images/line2.png differ diff --git a/en-GB/making-shapes/images/radius.png b/en-GB/making-shapes/images/radius.png new file mode 100644 index 0000000..f323450 Binary files /dev/null and b/en-GB/making-shapes/images/radius.png differ diff --git a/en-GB/making-shapes/images/rect.png b/en-GB/making-shapes/images/rect.png new file mode 100644 index 0000000..9dedea6 Binary files /dev/null and b/en-GB/making-shapes/images/rect.png differ diff --git a/en-GB/making-shapes/images/tri.png b/en-GB/making-shapes/images/tri.png new file mode 100644 index 0000000..c93baa4 Binary files /dev/null and b/en-GB/making-shapes/images/tri.png differ diff --git a/en-GB/making-shapes/images/tri2.png b/en-GB/making-shapes/images/tri2.png new file mode 100644 index 0000000..566b316 Binary files /dev/null and b/en-GB/making-shapes/images/tri2.png differ diff --git a/en-GB/making-shapes/index.md b/en-GB/making-shapes/index.md new file mode 100644 index 0000000..4339056 --- /dev/null +++ b/en-GB/making-shapes/index.md @@ -0,0 +1,102 @@ +--- +title: Making shapes +description: Using basic shapes creating objects. +notes: "notes.md" +layout: project +new: true +project-type: community +--- + +# Introduction { .intro } + +In this project, you'll create objects by combining simple shapes. You'll be introduced the basics of JavaScript to make different geometrical shapes using HTML Canvas. + + + +# Step 1: What is Javascript? { .activity } + +Javascript is a programming language used to make webpages interactive.Let's have a look at an example! + +## Activity Checklist { .check } ++ You'll be using a website called Trinket to write HTML. Open this Trinket: jumpto.cc/makingshapes-intro. + The project should look like this: + ![screenshot](images/java1.png) ++ The code within the tag is the Javascript code. ++ Within the script tags their are two functions: + 1- function setup - where the canvas is created and background is set. + 2- function draw - where you can draw shapes. + ++ Now , lets create the canvas and give it a background color.For creating canvas we have to write 'createCanvas',which is written in CAMEL CASE meaning if you have to write 'car wash' it will be written as 'carWash'.Canvas can be as big as the size of the browser window. + + ![screenshot](images/javafunc1.png) + + Here, Canvas is extending the whole width and height of the browser window. + Background color for example red can be specified as 'red' or in RGB format as ('255, 0, 0') or HEX as ('#FF5733'). + + ![screenshot](images/java2.png) + ++ Let's draw a rectangle or square shapes. + For rectangle or square shapes the code is : + rect(x , y , width , height ) . + ![screenshot](images/coordinate.png) + + + The top left corner of the canvas corresponds to x=0 and y=0.The x-coordinates increases left to right ,while y-coordinates increases downwards.So shapes can be made on different places on the canvas according to their x an y coordinates. + + ![screenshot](images/rect.png) + + + The difference between rectangle and square is that square has same width and height whereas rectanlge has different width and height . + + For filing the shapes with color ,write the code " fill('color name or HEX or RGB') " . 'noFill' is used if you don't want any color. + + ++ Let's draw a ellipse or circle shapes. + ellipse(x , y, width and height ). + + ![screenshot](images/ellipse1.png) + + Ellipse just like a rectangle has different width and height , while circle has same width and height. + + ![screenshot](images/ellipse.png) + + + +## Save Your Project {.save} + +__You don't need a Trinket account to save your projects!__ + +If you don't have a Trinket account, click the down arrow and then click 'Link'. This will give you a link that you can save and come back to later. You'll need to do this every time you make changes, as the link will change! + +##Challenge: Make a camera. + + ![screenshot](images/cam1.png) + +For making a camera use rect and ellipse code . ++ Hint For making circles inside the circle use this code: + + ![screenshot](images/radius.png). + +ellipseMode(RADIUS) uses the the x and y parameters of the first circle as the shape's center point, but uses the width and height parameters to change the size of the circle. + +## Save Your Project {.save} + ++ Let's make some lines and triangles. ++ For lines you will be using : line(x1 , y1 , x2 , y2 ) + + ![screenshot](images/line.png) + + Instead, of 'fill' ,here we've used 'stroke' .Stroke is used for making a line or borders of different shapes , while strokeWidth determines the thickness of the stroke.Use 'noStroke' if you don't need any borders. + + ![screenshot](images/line2.png) + ++ for triangles the code is: triangle(x1 , y1 , x2 , y2 , x3 , y3 ) + + ![screenshot](images/tri2.png) + + ![screenshot](images/tri.png) + +##Challenge: Make a fish with trangles. + + ![screenshot](images/fish.png) + + ## Save Your Project {.save} + + diff --git a/en-GB/making-shapes/materials.md b/en-GB/making-shapes/materials.md new file mode 100644 index 0000000..9416037 --- /dev/null +++ b/en-GB/making-shapes/materials.md @@ -0,0 +1,6 @@ +--- +title: ProjectName - Materials +layout: project-materials +volunteer-resources: +project-resources: +--- diff --git a/en-GB/making-shapes/notes.md b/en-GB/making-shapes/notes.md new file mode 100644 index 0000000..8cf3bb4 --- /dev/null +++ b/en-GB/making-shapes/notes.md @@ -0,0 +1,42 @@ +--- +title: ProjectName — Volunteer Notes +--- + +#Introduction: +Explain the project, focusing on what children will learn. Remember that these notes will be read by club leaders and not children. + +#Online Resources + +We recommend using [trinket](https://trinket.io/) to write HTML & CSS online. This project contains the following trinkets: + ++ ['ProjectName' starting point -- URL](URL) + +Children can also make use of this blank trinket [(jumpto.cc/html-blank)](http://jumpto.cc/html-blank) to write their own HTML & CSS, or alternatively they can use this template trinket [(jumpto.cc/html-template)](http://jumpto.cc/html-template). + +There is also a trinket containing a sample solution to the challenges: + ++ ['ProjectName' Finished](URL) + +#Offline Resources +This project can be [completed offline](https://www.codeclubprojects.org/en-GB/resources/webdev-working-offline/) if preferred. You can access the project resources by clicking the 'Project Materials' link for this project. This link contains a 'Project Resources' section, which includes resources that children will need to complete this project offline. Make sure that each child has access to a copy of these resources. This section includes the following files: + ++ ...List files here + +You can also find a completed version of this project's challenges in the 'Volunteer Resources' section, which contains: + ++ ...List files here + +(All of the resources above are also downloadable as project and volunteer `.zip` files.) + +#Learning Objectives +List the skills taught in this project, for example: ++ Variables; ++ Lists. + +Link to Digital Making Curriculum. + +#Challenges ++ "Challenge name" - explain the aim of each challenge - what skills will be used, and what is the outcome? + +#Frequently Asked Questions +You can also add answers to common questions here. This will help club leaders when undertaking your new project with children. This section can be removed if it is not necessary.