INFO247 / Lab 5 / #2

_.md

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

config.json

{"description":"INFO247 / Lab 5 / #2","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               

var y = 100,
    radius = 20;

for (var i = 0; i < 10; i++) {

  // draw each circle 50 pixels away from the previous one
  var x = 100 + i * 50;

  var circle = paper.circle(x, y, radius)

  // style this circle
  var attributes = {
    "fill": "#8C3AF3",
    "stroke": "#C0C0C0",
    "stroke-width": 5
  };
  circle.attr(attributes);
  
}