Programming  Pictures Anthony  Starks SVG  Open  2011  Workshop

A  Li=le  Go Library  Overview Sketching  with  code Pictures

A  Li=le  Go Library  Overview Sketching  with  code Pictures

Go  Fundamentals:  program  structure package main import ( "pkg" ) func foo(x, y int) int { ... } // start here func main() { z := foo(10, 20) pkg.Stuff(z) }

Go  Fundamentals:  variables  and  declaraEons var ( number,i,j int big float64 = 12345678.90 things = []string{"one", "two"} ) foo := 10 bar := 20.0 baz := `SVG is "really" cool`

Go  Fundamentals:  if  and  loop if SVGisCool { ... } else { ... } for t:= 0.0; t <= 360.0; t += 60.0 { ... }

A  Li=le  Go Library  Overview Sketching  with  code Pictures

No content

Rect(100,  200,  250,  125,"fill:gray;  stroke:blue") object arguments CSS  style objects,  API  and  output (100,200) 250 125

Rect(100,  200,  250,  125, object arguments objects,  API  and  output `id="box"`,  `fill="gray"`,  `stroke="blue"`) a=ributes (100,200) 250 125

Structure,  Metadata,  Links New(w  io.Writer) Specify  the  desEnaEon  for  the  generated  code Start(w,  h  int,  opEons  ...string) Begin  the  SVG  document,  with  opEons Startview(w,  h,  minx,  miny,  vw,  vh  int) Begin  the  document  with  a  viewport Group(s  ...string)/Gend() Begin  a  group  with  arbitrary  a=ributes Gid(id  string)/Gend() Begin/end  a  group  with  an  id Gstyle(s  string)/Gend() Begin/end  a  group  style ClipPath(s  ...string)/ClipEnd() Begin/end  ClipPath Def(s  string)/DefEnd() Begin/end  definiEon  block Title(s  string) Specify  the  document  Etle Desc(s  string) Specify  the  document  descripEon Link(href,  Etle  string)/LinkEnd() Link  to  content  between  Link  and  LinkEnd Use(x,  y  int,  link  string,  style  ...string) Use  previously  defined  content End() End  the  SVG  document

Shapes CenterRect(x,  y,  w,  h  int,  s  ...string) Rect(x,  y,  w,  h  int,  s  ...string) Polygon(x,  y  []int,    s  ...string) Ellipse(x,  y,  rx,  ry  int,  s  ...string) Circle(x,  y,  r  int,    s  ...string) Roundrect(x,  y,  w,  h,  rx,  ry  int,  s  ...string) Square(x,  y,  w  int,  s  ...string)

Lines,  Curves,  and  Path Polyline(x,  y  []int,  s  ...string) Line(x1,  y1,  x2,  y2  int,  s  ...string) Arc(sx  sy,  ax,  ay,  r  int,  large,  sweep  bool,  ex  ey  int,  s  ...string) Bezier(sx,  sy,  cx,  cy,  px,  py,  ex,  ey  int,  s  ...string) Path(d  string,  s  ...string) Qbez(sx,  sy,  cx,  cy,  ex,  ey  int,  s  ...string)

Transforms SkewX(a  float64) SkewXY(ax,  ay  float64) SkewY(a  float64) Scale(n  float64) ScaleXY(dx,  dy  float64) Translate(x,  y  int) Rotate(r  float64) RotateTranslate(x,  y  int,  r  float64) TranslateRotate(x,  y  int,  r  float64) Gtransform(s  string)

Textpath(t,  pathid  string,  s  ...string) Text(x,  y  int,  t  string,  s  ...string) Image(x,  y,  w,  h  int,  link  string,  s  ...string) Textlines(x,  y  int,  s  []string,  size,  spacing  int,  fill,  align  string) Text  and  Image

Gradients Offset  uint8 Color  string Opacity  float64 Offcolor LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor) RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor)

Colors,  Grid RGB(r,  g,  b  int) 44 77 232 ⟶ RGBA(r,  g,  b  int,  alpha  float64) .33 ⟶ 44 77 232 Grid(x,  y,  w,  h,  n  int,  s  ...string)

ScripEng canvas.Start(500, 500, `onload="Startup()"`) canvas.Script("application/javascript", "http://example.com/myscript.js") canvas.Rect(10, 10, 100, 200) canvas.End() 1 2 3 4 function StartUp() { ... } function doStuff(element) { ... } example.com/myscript.js 1 2 3 4 Begin  the  document,  load  your  funcEon   specify  the  script,  by  reference specify  SVG  elements,  operate  on  these end  the  SVG  document

A  Li=le  Go Library  Overview Sketching  with  code Pictures

SVGo  Hello  world

No content

No content

No content

using  goplay  and  a  browser  to  sketch  with  code

inspecEng  the  generated  code

A  Li=le  Go Library  Overview Sketching  with  code Pictures

Bugdriod

Arc Circle Line Rect Roundrect Line fill:rgb(164,198,57) Scale

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

No content

Pictures  from  the  Internet

                             .... $ flickr50 beach h=p://api.flickr.com/services/rest/? method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc 2 1 3 4 command flickr  request  URL flickr  XML  response Picture 1 3 4 2

define  the  input  data  structures read  the  input parse  the  input  into  the  structures draw read/parse/draw  pa=ern

package main import ( "os" "http" "url" "xml" "fmt" "github.com/ajstarks/svgo" ) type FlickrResp struct { Stat string `xml:"attr"` Photos Photos } type Photos struct { Photo []Photo } type Photo struct { Id string `xml:"attr"` Secret string `xml:"attr"` Server string `xml:"attr"` Farm string `xml:"attr"` Title string `xml:"attr"` } imports data  structures

var ( width = 805 height = 500 canvas = svg.New(os.Stdout) ) const ( apifmt = "http://api.flickr.com/services/rest/?method=%s&api_key=%s&%s=%s&per_page=50&sort=interestingness-desc" urifmt = "http://farm%s.static.flickr.com/%s/%s.jpg" apiKey = "...your key here..." textStyle = "font-family:Calibri,sans-serif; font-size:48px; fill:white; text-anchor:start" imageWidth = 75 imageHeight = 75 ) Variables  and  constants

make  the  image  grid  from  the  XML  response // FlickrAPI calls the API given a method with single name/value pair func flickrAPI(method, name, value string) string { return fmt.Sprintf(apifmt, method, apiKey, name, value) } // makeURI converts the elements of a photo into a Flickr photo URI func makeURI(p Photo, imsize string) string { im := p.Id + "_" + p.Secret if len(imsize) > 0 { im += "_" + imsize } return fmt.Sprintf(urifmt, p.Farm, p.Server, im) } // imageGrid reads the response from Flickr, and creates a grid of images func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) { if f.Stat != "ok" { fmt.Fprintf(os.Stderr, "%v\n", f) return } xpos := x for i, p := range f.Photos.Photo { if i%cols == 0 && i > 0 { xpos = x y += (imageHeight + gutter) } canvas.Link(makeURI(p, ""), p.Title) canvas.Image(xpos, y, imageWidth, imageHeight, makeURI(p, "s")) canvas.LinkEnd() xpos += (imageWidth + gutter) } }

// fs calls the Flickr API to perform a photo search func fs(s string) { var f FlickrResp r, weberr := http.Get(flickrAPI("flickr.photos.search", "text", s)) if weberr != nil { fmt.Fprintf(os.Stderr, "%v\n", weberr) return } defer r.Body.Close() xmlerr := xml.Unmarshal(r.Body, &f) if xmlerr != nil || r.StatusCode != http.StatusOK { fmt.Fprintf(os.Stderr, "%v (status=%d)\n", xmlerr, r.StatusCode) return } canvas.Title(s) imageGrid(f, 5, 5, 10, 5, "s") canvas.Text(20, height-30, s, textStyle) } // for each search term on the commandline, create a photo grid func main() { for i := 1; i < len(os.Args); i++ { canvas.Start(width, height) canvas.Rect(0, 0, width, height, "fill:black") fs(url.QueryEscape(os.Args[i])) canvas.End() } } Call  the  API  from  the  main  funcEon

have  fun  programming  pictures Contact [email protected] Repository h=ps://github.com/ajstarks/svgo Examples h=p://flic.kr/s/aHsjpMnssp Go  Programming  Language h=p://golang.org