ITP ICM F15 | Week 2 Animation

02_animation.js

//// PART ONE: VARIABLES

// COMMENTS

function setup() {
  createCanvas(300, 200);
}

function draw() {
  background(204);
  fill(165, 57, 57);
  // fill(144, 39, 39);
  // fill(40, 209, 10);
  ellipse(100, 100, 80, 80); // left circle
  ellipse(200, 100, 80, 80); // right circle
}

// VARIABLES

// Example 2-2: variables

var y = 60; // 100
var d = 80; // 130

function setup() {
  createCanvas(480, 120);
}

function draw() {
  ellipse(75, y, d, d);   // left
  ellipse(175, y, d, d);  // middle
  ellipse(275, y, d, d);  // right
}


// VARIABLE MATH
var x = 25;
var h = 20;
var y = 25;

function setup() {
  createCanvas(480, 120);
}

function draw() {
  rect(x, y, 300, h);        // top
  x = x + 100;
  rect(x, y + h, 300, h);    // middle
  x = x - 250;
  rect(x, y + h*2, 300, h);  // bottom
}


// SPECIAL VARS: WIDTH & HEIGHT

function setup() {
  createCanvas(480, 120);
}

function draw() {
  line(0, 0, width, height);  // line from (0,0) to (480, 120)
  line(width, 0, 0, height);  // line from (480, 0) to (0, 120)
  ellipse(width/2, height/2, 60, 60);
}

// SPECIAL VARS: MOUSEX & MOUSEY

// Example 2-5: mouseX and mouseY

function setup() {
  createCanvas(600, 400);
  fill(0, 102);
  noStroke();
}

function draw() {
  background(mouseY); // background color changes based on mouseY
  ellipse(300, 200, mouseX, 50); // width changes based on mouseX
  ellipse(mouseX, mouseY, 10, 10); // ellipse follows mouse
}

// STRING VARIABLES

var quote = "hello icm!";

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(204);
  textSize(12);
  text(quote, 100, 100);
  textSize(20);
  text(quote, 100, 300)
}

// IMAGE VARIABLES

var img;

function preload() {
  img = loadImage("lunar.jpg");
}

function setup() {
  createCanvas(600, 400);
}

function draw() {
  image(img, 0, 0);
}



//// PART TWO: ANIMATION

// RANDOM

function setup() {
  createCanvas(600, 400);
  frameRate(60);
  //frameRate(30);
  //frameRate(10);
  //frameRate(1);
}

function draw() {
  var x = random(width);
  var y = random(height);
  var g = random(255);
  
  background(255);
  fill(g);
  ellipse(x, y, 50, 50);
}

// ANIMATE POSITION
var x = 0;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  ellipse(x, height/2, 50, 50);

  x++;
  // x = x + 1; // this line is same as above
  // x = x + 5; // faster
}

// ANIMATE SIZE
var d = 10;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(0);
  ellipse(width/2, height/2, d, d);

  // Increment variable d
  d++;
}

// ANIMATE COLOR

var r = 0;

function setup() {
  createCanvas(600, 400);
  noStroke();
}

function draw() {
  background(250, 250, 0);
  fill(r, 0, 0);
  ellipse(width/2, height/2, 100, 100);

  // Increment variable r
  r++;
}

// RANDOM MOTION

var x = 300;
var y = 200;

function setup() {
  createCanvas(600, 400);
}

function draw() {
  //background(255);
  ellipse(x, y, 50, 50);

  // change x and y by a small random amount each frame
  x = x + random(-2, 2);
  y = y + random(-2, 2);
}