Composition, Interactivity, Motion
“In the whole composition there should be no word written, of which the tendency, direct or indirect, is not to the one pre-established design.” – Edgar Allan Poe
“The whole is other than the sum of the parts” – Kurt Koffka
- Shape, Color, Texture
- Scale, Alignment, Proximity, Rhythm, Contrast, Concord
- Figure and Ground, Space
- Speed, Acceleration, Direction, Continuity
- Inactive, Active/Animated, Responsive, Interactive
Children’s Book Crit
- Start with author quiet.
- Describe what you see.
- Describe the illustration style, composition, color.
- What is the interactivity?
- What is the content, meaning, feeling?
- What is working? What is not? Possibilities for improvement?
Interactivity in Various Media
Class activity.
Motion
You already know how to use mouseX and mouseY variables to make your drawing respond and animate based on mouse input. But, if the user stops, your animation stops.
How can we make things move on their own?
Sprite is a common term for an on screen image that moves around. To make a sprite move, we need to change the position every time we draw it. In order to change the position we first need to store it in a variable (so it can vary). Then we will increment (change by a relative amount) the variable in the draw loop, once before each time we draw it. We might want to store the direction or speed in variables so we can change that as well.
Bounce
The following examples show a sprite that moves around the screen, bouncing off walls. Each example builds in complexity.
1
//bounce1.pde
//part of a series of example programs that make a circle bounce on the screen
float spriteX = 200;
float spriteY = 200;
void setup()
{
size(400, 400);
}
void draw()
{
background(0, 50, 50);
//Move the Sprite
spriteX = spriteX + 1;
//Draw the Sprite
noStroke();
fill(255, 50, 50);
ellipse(spriteX, spriteY, 50, 50);
fill(155, 0, 0);
ellipse(spriteX, spriteY, 40, 40);
}
2
//bounce2.pde
//part of a series of example programs that make a circle bounce on the screen
float spriteX = 200;
float spriteY = 200;
float spriteMoveX = 1;
//try changing spriteMoveX to 2. what does it change?
//try changing spriteMoveX to 3. this reveals a bug (or two), how can you fix it?
void setup()
{
size(400, 400);
}
void draw()
{
background(0, 50, 50);
//Move the Sprite
spriteX = spriteX + spriteMoveX;
if (spriteX == 400) {
spriteMoveX = -1;
}
if (spriteX == 0) {
spriteMoveX = 1;
}
//Draw the Sprite
noStroke();
fill(255, 50, 50);
ellipse(spriteX, spriteY, 50, 50);
fill(155, 0, 0);
ellipse(spriteX, spriteY, 40, 40);
}
3
//bounce3.pde
//part of a series of example programs that make a circle bounce on the screen
float spriteX = 150;
float spriteY = 200;
float spriteMoveX = 1;
float spriteMoveY = 1;
void setup()
{
size(400, 400);
}
void draw()
{
background(0, 50, 50);
//Move the Sprite
spriteX = spriteX + spriteMoveX;
spriteY = spriteY + spriteMoveY;
if (spriteX == 400) {
spriteMoveX = -1;
}
if (spriteX == 0) {
spriteMoveX = 1;
}
if (spriteY == 400) {
spriteMoveY = -1;
}
if (spriteY == 0) {
spriteMoveY = 1;
}
//Draw the Sprite
noStroke();
fill(255, 50, 50);
ellipse(spriteX, spriteY, 50, 50);
fill(155, 0, 0);
ellipse(spriteX, spriteY, 40, 40);
}
4
//bounce4.pde
//part of a series of example programs that make a circle bounce on the screen
float spriteX = 150;
float spriteY = 200;
float spriteRadius = 25;
float spriteMoveX = 3;
float spriteMoveY = 8;
void setup()
{
size(400, 400);
background(0, 50, 50);
}
void draw()
{
background(0, 50, 50);
//move the Sprite
spriteX = spriteX + spriteMoveX;
spriteY = spriteY + spriteMoveY;
//check for collisions with the sides
if (spriteX > width - spriteRadius) {
spriteMoveX = -abs(spriteMoveX);
}
if (spriteX < 0 + spriteRadius) {
spriteMoveX = abs(spriteMoveX);
}
if (spriteY > height - spriteRadius) {
spriteMoveY = -abs(spriteMoveY);
}
if (spriteY < 0 + spriteRadius) {
spriteMoveY = abs(spriteMoveY);
}
//draw the Sprite
noStroke();
fill(255, 50, 50);
ellipse(spriteX, spriteY, spriteRadius * 2, spriteRadius * 2);
fill(155, 0, 0);
ellipse(spriteX, spriteY, spriteRadius * 2 - 10, spriteRadius * 2 -10);
}
Mouse Follow
// Follow_Mouse.pde
// This sample code demonstrates a few different ways to make an onscreen element follow the mouse.
// Each method produces a different animation effect, I've given them the made-up names "immediate",
// "zombie", "straight", and "slush". Changing the value of `mode` will change which animation code
// runs.
float spriteX = 200;
float spriteY = 200;
String mode = "slush";
void setup()
{
size(400, 400);
frameRate(60);
}
void draw()
{
background(0, 50, 50);
if (mode == "immediate"){
spriteX = mouseX;
spriteY = mouseY;
}
if (mode == "zombie"){
if (spriteX < mouseX) spriteX = spriteX + 1;
if (spriteX > mouseX) spriteX = spriteX - 1;
if (spriteY < mouseY) spriteY = spriteY + 1;
if (spriteY > mouseY) spriteY = spriteY - 1;
}
if (mode == "straight"){
float over = mouseX - spriteX;
float up = mouseY - spriteY;
float distance = dist(mouseX, mouseY, spriteX, spriteY);
if (distance > 0){
spriteX = spriteX + over / distance;
spriteY = spriteY + up / distance;
}
}
if (mode == "slush"){
float over = mouseX - spriteX;
float up = mouseY - spriteY;
spriteX = spriteX + over * .1;
spriteY = spriteY + up * .1;
}
//Draw the Sprite
noStroke();
fill(255, 50, 50);
ellipse(spriteX, spriteY, 50, 50);
fill(155, 0, 0);
ellipse(spriteX, spriteY, 40, 40);
}
Reading
Read and study the Motion chapter of Getting Started. Take some time to try out the code examples, this chapter covers a variety of material, including some things we haven’t talked about in class.
Homework – Children’s Book, Again
Redo your Children’s book illustration (based on the same line you selected last week, and keep the same general theme) this time incorporating animation. Also consider the feedback you received in the crit.
Begin at the beginning. Develop a composition that includes interactivity and motion. Bring it to life. You may use the same characters and scene you used last week, but you must recreate your project from scratch. Do not reuse the drawings you made last week and do not reuse your code.
Your project must include at least one animating element and at least one interactive element.
Post a screen-shot of your illustration, and a .zip of your sketch to the blog. Bring your sketch to class next week, and have it on your lab station at the start of class.