Week 8

The Raven feat. Vincent Price

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

• 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?

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);
}