Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around...
-
Upload
alexander-bates -
Category
Documents
-
view
213 -
download
0
Transcript of Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around...
![Page 1: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/1.jpg)
Creative Computing
![Page 2: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/2.jpg)
Creative Computing
\\ aims
By the end of the session you will be able to:
1. Move objects around
2. Write simple interactive programs
3. Use the mouse position to draw points and lines
4. Use if statements to control animation and mouse interaction
5. Use transforms for moving objects
![Page 3: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/3.jpg)
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
![Page 4: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/4.jpg)
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
Variables
![Page 5: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/5.jpg)
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
Happens at the start of the program
Do any initial set up like changing the size of the screen or the background colour
Set the initial values of any variables
![Page 6: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/6.jpg)
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
Happens every time the screen is redrawn (many times a second)
Update any variables
Draw stuff (using the variables)
![Page 7: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/7.jpg)
Creative Computing
\\ Exercise
Look up “random”, make a point move randomly
Both left-right and up-down
Change colour over time
Can you make a point move back and forth?
![Page 8: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/8.jpg)
Creative Computing
\\ aims
By the end of the session you will be able to:
1. Move objects around
2. Write simple interactive programs
3. Use the mouse position to draw points and lines
4. Use if statements to control animation and mouse interaction
5. Use transforms for moving objects
![Page 9: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/9.jpg)
Creative Computing
\\ if statementsvoid draw()
{
background(255);
strokeWeight(10);
if (mousePressed)
{
point(mouseX, mouseY);
}
}
Check if the mouse is pressed
Anything in the curly brackets only happens if the mouse is pressed
![Page 10: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/10.jpg)
Creative Computing
\\ ExerciseMake a point follow the mouse cursor
without a trail
Look up “pmouseX”
draw a line from the previous mouse position to the current one
Look up “rect” and draw a box with the mouse, what about “ellipse”?
Make the mouse change the screen colour
![Page 11: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/11.jpg)
Creative Computing
\\ aims
By the end of the session you will be able to:
1. Move objects around
2. Write simple interactive programs
3. Use the mouse position to draw points and lines
4. Use if statements to control animation and mouse interaction
5. Use transforms for moving objects
![Page 12: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/12.jpg)
Creative Computing
\\ more about if statementsvoid draw()
{
if (mousePressed)
{
background(0);
}
else
{
background(255);
}
}
Happens if the mouse is pressed
Happens if it isn’t pressed
![Page 13: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/13.jpg)
Creative Computing
\\ more about if statementsvoid draw()
{
if (mouseX > 100)
{
background(0);
}
else
{
background(255);
}
}
You can compare thingsIf the mouse position is more than 100
![Page 14: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/14.jpg)
Creative Computing
\\ comparisons
X == Y is X equal to Y?
(not different from X = Y)
X != Y is Y not equal to Y?
X < Y, X > Y is X less/greater than Y
X <= Y, X >= Y is X less/greater than or
equal to Y
![Page 15: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/15.jpg)
Creative Computing
\\ more about if statementsvoid draw()
{
if (mousePressed && mouseX > 100)
{
background(0);
}
else
{
background(255);
}
}
&& (and) combines different tests together
![Page 16: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/16.jpg)
Creative Computing
\\ more about if statementsvoid draw()
{
if (mousePressed && (mouseButton == LEFT) )
{
background(0);
}
else
{
background(255);
}
}
Check which mouse button has been pressed
![Page 17: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/17.jpg)
Creative Computing
\\ exercises
Draw points only if the left button is down
Create a rollover – a box that changes
colour if the mouse is over it
Create a moves that moves and bounces
of the edges of the window
Can you create Pong?
![Page 18: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/18.jpg)
Creative Computing
![Page 19: Creative Computing. \\ aims By the end of the session you will be able to: 1.Move objects around 2.Write simple interactive programs 3.Use the mouse position.](https://reader036.fdocuments.in/reader036/viewer/2022082917/5515c80455034693758b498d/html5/thumbnails/19.jpg)
Creative Computing
\\ aims
By the end of the session you will be able to:
1. Move objects around
2. Write simple interactive programs
3. Use the mouse position to draw points and lines
4. Use if statements to control animation and mouse interaction
5. Use transforms for moving objects