Embed Size (px)
Citation preview
Creative Computing
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
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
Creative Computingint x;
void setup()
{
background(255);
size(200, 200);
x = 0;
}
void draw()
{
x = x + 1;
strokeWeight(4);
point(x, 100);
}
Variables
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
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)
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?
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
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
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
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
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
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
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
Creative Computing
\\ more about if statementsvoid draw()
{
if (mousePressed && mouseX > 100)
{
background(0);
}
else
{
background(255);
}
}
&& (and) combines different tests together
Creative Computing
\\ more about if statementsvoid draw()
{
if (mousePressed && (mouseButton == LEFT) )
{
background(0);
}
else
{
background(255);
}
}
Check which mouse button has been pressed
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?
Creative Computing
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
