unoseistres/aniamtions

## aniamtions
var a;
var button;
var canvas0;

var b;
var button;
var canvas1;

var name = "hugging";
var name2  = "bearhead";

var totalframes = 56;
var totalframes2 = 42;

function preload() {
  a = new Animation(totalframes);
  a.preload(name);//which animation

  b = new Animation(totalframes2);
  b.preload(name2);
}


function setup(){


  canvas0 = createCanvas(500,400);
  canvas0.position(50,50);

  //background(255);

  button = createHTML("<button type=\"button\">play</button>");
  button.position(300,500);
  button.mousePressed(drawing);


  canvas1 = createCanvas(500,400);
  canvas1.position(550,50);

  //background(255);

  button = createHTML("<button type=\"button\">play</button>");
  button.position(600,500);
  button.mousePressed(drawing2);
}

function draw(){
context(canvas0);

  clear();
  //if ()
  background(255);
  a.display();
  a.next();//pass to the next image


  context(canvas1);
  clear();
  //if ()
  background(255);
  b.display();
  b.next();//pass to the next image


}


function drawing(){ //how it draws
  a.playing = !a.playing; //false then go back to the first drawing
  a.imageIndex = 1; //go to the first image


}
function drawing2(){ //how it draws
  b.playing = !b.playing; //false then go back to the first drawing
  b.imageIndex = 1; //go to the first image
}


function Animation(_framex){ //description
  var framex = _framex;//number of frames for the individual animations
  this.maxImages = framex;
  this.imageIndex = 1;
  this.bear=[];
  this.playing = false;

}


Animation.prototype.preload = function(_test) { //load this array of images

var test = _test;

  for (var i = 0; i < this.maxImages; i++){
    this.bear[i] = loadImage( test  + (i)+ ".png"); //test1 allows for a different animation
  }
}

Animation.prototype.next = function() { //go through this loop
  if (this.playing) {
    this.imageIndex = (this.imageIndex + 1)% this.maxImages;
  }
}

Animation.prototype.display = function() { //display like this

  image(this.bear[this.imageIndex], 100, 15, 300, 350);
  }

## html
<html>
<head>
  <title>I love you SOOOOOO much</title>
  <script language="javascript" type="text/javascript" src="sharon.js"></script>
  <script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.7/p5.min.js"></script>

</head>

<body>
<img src="backgroundcomic.jpg" width="1241" height="642">


</body>


</html>
	var a;
	var button;
	var canvas0;

	var b;
	var button;
	var canvas1;

	var name = "hugging";
	var name2 = "bearhead";

	var totalframes = 56;
	var totalframes2 = 42;

	function preload() {
	a = new Animation(totalframes);
	a.preload(name);//which animation

	b = new Animation(totalframes2);
	b.preload(name2);
	}


	function setup(){


	canvas0 = createCanvas(500,400);
	canvas0.position(50,50);

	//background(255);

	button = createHTML("<button type=\"button\">play</button>");
	button.position(300,500);
	button.mousePressed(drawing);


	canvas1 = createCanvas(500,400);
	canvas1.position(550,50);

	//background(255);

	button = createHTML("<button type=\"button\">play</button>");
	button.position(600,500);
	button.mousePressed(drawing2);
	}

	function draw(){
	context(canvas0);

	clear();
	//if ()
	background(255);
	a.display();
	a.next();//pass to the next image




	context(canvas1);
	clear();
	//if ()
	background(255);
	b.display();
	b.next();//pass to the next image


	}


	function drawing(){ //how it draws
	a.playing = !a.playing; //false then go back to the first drawing
	a.imageIndex = 1; //go to the first image


	}
	function drawing2(){ //how it draws
	b.playing = !b.playing; //false then go back to the first drawing
	b.imageIndex = 1; //go to the first image
	}


	function Animation(_framex){ //description
	var framex = _framex;//number of frames for the individual animations
	this.maxImages = framex;
	this.imageIndex = 1;
	this.bear=[];
	this.playing = false;

	}


	Animation.prototype.preload = function(_test) { //load this array of images

	var test = _test;

	for (var i = 0; i < this.maxImages; i++){
	this.bear[i] = loadImage( test + (i)+ ".png"); //test1 allows for a different animation
	}
	}

	Animation.prototype.next = function() { //go through this loop
	if (this.playing) {
	this.imageIndex = (this.imageIndex + 1)% this.maxImages;
	}
	}

	Animation.prototype.display = function() { //display like this

	image(this.bear[this.imageIndex], 100, 15, 300, 350);
	}
	<html>
	<head>
	<title>I love you SOOOOOO much</title>
	<script language="javascript" type="text/javascript" src="sharon.js"></script>
	<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.2.7/p5.min.js"></script>

	</head>

	<body>
	<img src="backgroundcomic.jpg" width="1241" height="642">




	</body>


	</html>