Eye Tracking with atan2()

Here's an example from processing.org that uses atan2() to point an object at the cursor. See if you can change the color of your eye and scale with the Eye constructor.

Eye e1, e2, e3, e4, e5;

void setup() 
{
  size(200, 200);
  smooth();
  noStroke();
  e1 = new Eye( 50,  16,  80);
  e2 = new Eye( 64,  85,  40);  
  e3 = new Eye( 90, 200, 120);
  e4 = new Eye(150,  44,  40); 
  e5 = new Eye(175, 120,  80);
}

void draw() 
{
  background(102);
  
  e1.update(mouseX, mouseY);
  e2.update(mouseX, mouseY);
  e3.update(mouseX, mouseY);
  e4.update(mouseX, mouseY);
  e5.update(mouseX, mouseY);

  e1.display();
  e2.display();
  e3.display();
  e4.display();
  e5.display();
}

class Eye 
{
  int ex, ey;
  int size;
  float angle = 0.0;
  
  Eye(int x, int y, int s) {
    ex = x;
    ey = y;
    size = s;
 }

  void update(int mx, int my) {
    angle = atan2(my-ey, mx-ex);
  }
  
  void display() {
    pushMatrix();
    translate(ex, ey);
    fill(255);
    ellipse(0, 0, size, size);
    rotate(angle);
    fill(153);
    ellipse(size/4, 0, size/2, size/2);
    popMatrix();
  }
}

Notice that there are 5 'Eye' variables: e1, e2, e3, e4, e5, which are all instanced from the Eye object. We haven't yet learned how to build our own objects, so don't worry about the syntax for now, just see what you can create by experimenting.

Characters made with Code

We've been coding our own expressive characters with code. Here are some examples of that you can use for reference in your own projects.

Processing Monsters

http://www.rmx.cz/monsters/

From the author:

These monsters are result of my effort to learn Processing and encourage others
to do so by showing the source code. Also, at the end, my plan is to do a short music reactive video using these monsters (UPDATE: The video will happen (sooner or later), I've just been really busy last couple of months). So if you feel like you can make one too and be part of it, rules are simple: Strictly black and white + mouse reactive.

Love Bytes

http://universaleverything.com/#/UE205

Generative creatures created as an identity design for the LoveBytes 2007 Digital Art Festival in the UK

From the project:

Universal Everything's Matt Pyke applied generative principals to create a 'touchable' identity, definiting simple parameters within which the design could mutate: colour, hairtype, weight, 'sex', etc. Programmed Karsten Schmidt built a Processing application that generated more than 20,000 characters as Photoshop Files, which were digitally printed to make 20,000 different postcards.

Generative Patterns

Generative book covers for faberfinds.co.uk - an on-demand print service for classic out-of-print books:

Each book cover is unique and generated from parameters in software.

Some other interactive characters created with code

Flying Spaghetti Monster
Bunch of Eyes
Monster 03 (BLAAH)
Organs without Body
Petes Monster v1
Face Excerces
Drawing Chairs with Parameters

Other Programmatic Design

Vectorpark is not created in Processing, it's created in Flash (ActionScript) but the same code principals apply and are very inspiring: http://vectorpark.com/

Other creative code references

http://openprocessing.org
Open Processing is a website that allows you to log in and upload/share the source code for your visual projects. There are a lot of random, expressive ideas people have made from which you can glean for your own projects.

http://workshop.evolutionzone.com/
Workshop.evolutionzone is an aggregate of processing related content. There's some very interesting projects, tutorials, and techniques you can peruse through.

Any other websites you've found that are useful for designing characters with code? Post them in the comments!

Inspiration: Toby Shelton's blog

I haven't really been keeping up with posting a lot of links this semester. Lots of good stuff out there on the web, but I've been preoccupied with other things. Sorry for the lull in posting.

Just in case you haven't discovered it for yourself yet I want to point everyone towards Toby Shelton's relatively new blog  "Stuff I Did (when I wasn't doing other Stuff)"

Check out the great examples of storyboards and model sheets on Shelton's blog:

(amazing selection of How To Train Your Dragon storyboards)

Drawing tips on things like hands (can never have enough of these reference sheets) -

Model sheets:

(click any image to enlarge)

The above images are just a small sampling to whet your appetite. Go check out Toby Shelton's blog . Add to your bookmarks. Check back often.

Face Functions

void setup() {
  size(400, 400); 
  smooth();
  strokeWeight(6);
}

void draw() {
  background(120);
  face( width/2, height/2, 160 );
}

void face( float x, float y, float size ) {
  fill(255);
  stroke(0);
  ellipse(x, y, size, size);
  eye( x - 50,  y, 20 );
  eye( x + 50,  y, 60 );
  for (int i = 0; i < 18; i+=2) {
    hair( x + i*3 - 30, y - 50, 50, i * 0.8 );
  }
} 

void hair(float x, float y, float len, float craziness )
{
   stroke(198, 90, 6);
   beginShape();
   vertex(x, y);
   vertex(x + craziness, y - len);
   endShape();  
}

void eye(float x, float y, float eyeball_size) {
  fill(255, 245, 180);
  ellipse(x, y, eyeball_size, eyeball_size);
  fill(0);
  ellipse(x, y, 4, 4);
}

Loops and Introduction to Functions

Today we are going over loops and a brief introduction to functional programming.

Loops are the main way of iterating over code. There are various types of loops, but the most complex (and possibly the most useful) is the 'for' loop construct.

for ( int i = 0; i < 10; i++) {
   // do something with variable 'i'
}

Embedded for loops allow us to iterate over two dimensions of information

for (int x = 0; x < 10; x++) {
   for (int y = 0; y < 10; y++) {
      // do something with x and y
   } 
}

For more examples, see:http://www.processing.org/learning/basics/iteration.htmlhttp://www.processing.org/learning/basics/embeddediteration.htmlIn Processing, we are used to calling functions, such as line(), size(), draw(). We will start experimenting with writing our own functions today. Design a character (on paper) that will respond to the mouse clicking and movement. The simplest place to start will be the eyes. Plan on having the eyes respond to the mouseX and mouseY, and maybe have the character blink when you click the mouse button. Be sure to use variables in your character design, and we will explore how to parametrize our character function on Wednesday. Character template:

void setup() {
   size(640, 480);
}

void draw() {
   background(255);
   myCharacter(); // draw your character
}

void myCharacter() {
   // draw character here
}

The Thief & the Cobler - Layout tests and Pencil tests

Rare behind-the-scenes look at raw pencil tests and camera layout tests.






Pencil tests of Zig-Zag (and early version of Zig-Zag pencil test at the end by Art Babbitt) --



Same set of scenes in finished form:

NOCTURNA [English] Part 1 of 8

Part 1 of 8 . See it while you can.

Open Source Philosophy

Revolution OS

An Open Source Philosophy:
- Work with and within the open source community
- Use existing open source code whenever possible
- Give others encouragement and credit when they offer help
- Be open to helping others and to being helped

Some interesting open source projects:
Ubuntu
Processing
Cinder
OpenFrameworks
SuperCollider
ChucK
PHP
Python
Ruby
Mozilla
Webkit
OpenOffice
Apache
Android for Developers

Websites:
wordpress
opensource.org
GPL

Version Control Tools and Project Hosting:
github.com
code.google.com
sourceforge.net

Assignments for next Monday. Pick one:
- Research an open source project to briefly present to the class. What makes the project special? How long has the project been around? What languages are used in the project?
- Research an inspiring project/program/game/artwork that was created with open source software and/or philosophies.

Variables, Data types, Operators, and Value Assignments

Today we learned about different data-types and variables in Processing.

Data Types

The following data types each represent unique ways of storing data in your programs.

Integer
Float
String
Char
Boolean
Color

Debugging / Output

// print information to the console
println("Text printed to the console");

Processing Exercises and Websites

learningprocessing.com
openprocessing.org

Exercises
1. Get current color from an image under mouse, and assign it to a variable that you can use.

2. Find an abstract image or piece of art that you find interesting. Re-create the image in code with shapes, lines, and color.

Introduction to Processing

Our first day in Open Source entailed a brief introduction to the Processing language and IDE (Integrated Development Environment). We learned how to set the scale of our app, the coordinate system, commenting, and basic shape functions.

You can download Processing yourself from processing.org. Remember you can type Command-R to run your app instead of clicking 'run' with the mouse.

Setting the App Size

// this will set our application to be 
// 600 pixels wide by 400 pixels high
size(600, 400);

Commenting Code
Any content within comment will not be read when you compile your code.

// This is an inline comment.

/*
    This is a block comment.
*/

Basic Shapes
Shapes take multiple parameters. Check out the Processing reference for more information.

// x, y
point(23, 34)

// x, y, width, height, start, stop
arc(45, 35, 50, 50, 0, PI/2);

// x, y, width, height
ellipse(56, 46, 55, 55);

// x1, y1, x2, y1
line(30, 20, 85, 20);

// x1, y1, x2, y2, x3, y3, x4, y4
quad(38, 31, 86, 20, 69, 63, 30, 76);

// x, y, width, height
rect(30, 20, 55, 55);

// x1, y1, x2, y2, x3, y3
triangle(30, 75, 58, 20, 86, 75);

Grayscale Colors, Strokes, and Fills

background(0); // sets the background to black
stroke(255); // sets the stroke to white
strokeWidth(10); // sets the stroke width to 10
fill(128); // sets the fill to a medium gray

... and More
We briefly touched on Variables and Data Types, which we will be studying in depth during the next class.

Welcome to Open Source!

The BAVC Digital Pathways Open Source class focuses on building a strong grasp of open source programming in order to create interactive visual applications. Participants will build upon their knowledge to code projects from scratch in ways that address open technologies and approaches. Students will create their own personal apps, as well as code in a group context, starting with the Processing framework. Within this class, students will learn techniques that are applicable to all computer programming, giving them the confidence to explore other languages easily on a multitude of platforms.

Class Details:
Instructor: Gabriel Dunne
Teaching Asst: Joel Buchheim-Moore
Time: M/W 4:30-7:30
Location: Blue Room (BAVC)
Student Survey Link: http://www.surveymonkey.com/s/9V2L35B