INFO247 / Lab 5 / #4

_.md

[ Launch: INFO247 / Lab 5 / #1 ] 5007146 by poezn
[ Launch: lab5_1 ] 5001505 by poezn

config.json

{"description":"INFO247 / Lab 5 / #4","endpoint":"","display":"div","public":true,"require":[{"name":"raphael.js","url":"http://poezn.github.com/raphael/raphael.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":15},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":15},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":15}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

// School of Information, UC Berkeley
// INFO 247 Lab 5: Raphaël.js
// http://blogs.ischool.berkeley.edu/i247s13/lab-5-raphael-js/ 

// Get the dimensions of the content window. This is something specific to Tributary
//   and has nothing to do with Raphaël.js
var contentHeight = tb.sh,
    contentWidth  = tb.sw;

// HTML element to use for visualization
var contentElement = "display";

// Finally, let's create a "paper": A canvas you can draw on.
var paper = Raphael(contentElement, contentWidth, contentHeight);

// ===========================================================
// START DRAWING HERE               

// initial values for the circle
var initialX = 300,
    initialY = 300,
    initialRadius = 50;

// draw the circle
var circle = paper.circle(initialX, initialY, initialRadius);

// draw a button (background and label)
var button = paper.set();

var buttonBackground = paper.rect(10, 11, 150, 40, 5);
buttonBackground.attr({
  "fill": "#4B3A04",
  "stroke-width": 0
});
button.push(buttonBackground);

var buttonLabel = paper.text(85, 30, "Click me");
buttonLabel.attr({
  "text-anchor": "middle",
  "font-family": "'Helvetica Neue', Arial, sans-serif",
  "font-weight": 300,
  "font-size": 25 + "px",
  "fill": "#D3D2C5"
})

button.push(buttonLabel);

// ===========================================================
// ANIMATION FUNCTION               

// sets initial values of the circle
// we use this for the very initial rendering
// and also every time a button is clicked
var initializeCircle = function() {
  circle.attr({
    "cx": initialX,
    "cy": initialY,
    "r":  initialRadius,
    "fill":   "#8C3AF3",
    "stroke": "#C0C0C0",
    "stroke-width": 15,
  })
};

// this is where the magic happens!
var animateMe = function() {
  initializeCircle();

  alert("You clicked me! That means it worked.\nNow delete this line from the code");
  
  // animation properties
  var duration = 500; // in ms
  var animationAttributes = {
  };
  
  // and now - animate!
  circle.animate(animationAttributes, duration);
};


// ===========================================================
// MAKE BUTTON CLICKABLE AND START

button.click(animateMe);
initializeCircle();