unoseistres · April 22, 2014 13:57
diff --git a/aniamtions b/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);
  }
diff --git a/html b/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>