-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmouseX.html
More file actions
103 lines (61 loc) · 4.05 KB
/
mouseX.html
File metadata and controls
103 lines (61 loc) · 4.05 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
---
title: Follow Me
description: Make the object follow the mouse around .
notes: "notes.md"
layout: project
new: true
project-type: community
---
# Introduction { .intro }
In this project, you'll use the shapes and make them follow the mouse . You'll be introduced the basics of JavaScript programming to
control the object's movement through mouse .
<iframe src="https://trinket.io/embed/html/36ed50856f?outputOnly=true" width="100%" height="600" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen></iframe>
# 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: <a href="https://trinket.io/embed/html/50ddc249a1" target="_blank">jumpto.cc/makingshapes-intro</a>.
The project should look like this:
+ The code within the <script> </script> 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.
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').
+ Let's draw a rectangle or square shapes.
For rectangle or square shapes the code is :
rect(x , y , width , height ) .
+ 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.
+ 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 ).
Ellipse just like a rectangle has different width and height , while circle has same width and height.
## 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.
For making a camera use rect and ellipse code .
+ Hint For making circles inside the circle use this code:
.
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 )
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.
+ for triangles the code is: triangle(x1 , y1 , x2 , y2 , x3 , y3 )
##Challenge: Make a fish with trangles.
## Save Your Project {.save}