SVGo workshop

671 views

Published on

SVGo Workshop from SVG Open 2011

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
671
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

SVGo workshop

  1. 1. Programming  Pictures Anthony  Starks SVG  Open  2011  Workshop
  2. 2. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  3. 3. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  4. 4. package main import ( "pkg" ) func foo(x, y int) int { ... } // start here func main() { z := foo(10, 20) pkg.Stuff(z) }Go  Fundamentals:  program  structure
  5. 5. 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:  variables  and  declaraEons
  6. 6. if SVGisCool { ... } else { ... } for t:= 0.0; t <= 360.0; t += 60.0 { ... }Go  Fundamentals:  if  and  loop
  7. 7. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  8. 8. object arguments CSS  style Rect(100,  200,  250,  125,"fill:gray;  stroke:blue") (100,200) <rect  x="100"  y="200"   width="250"  height="125"   125 style="fill:gray;  stroke:blue"/> 250objects,  API  and  output
  9. 9. object arguments a=ributes Rect(100,  200,  250,  125, `id="box"`,  `fill="gray"`,  `stroke="blue"`) (100,200) <rect  x="100"  y="200" width="250"  height="125" 125 id="box"  fill="gray"  stroke="blue"/> 250objects,  API  and  output
  10. 10. New(w  io.Writer) Specify  the  desEnaEon  for  the  generated  codeStart(w,  h  int,  opEons  ...string) Begin  the  SVG  document,  with  opEonsStartview(w,  h,  minx,  miny,  vw,  vh  int) Begin  the  document  with  a  viewportGroup(s  ...string)/Gend() Begin  a  group  with  arbitrary  a=ributesGid(id  string)/Gend() Begin/end  a  group  with  an  idGstyle(s  string)/Gend() Begin/end  a  group  styleClipPath(s  ...string)/ClipEnd() Begin/end  ClipPathDef(s  string)/DefEnd() Begin/end  definiEon  blockTitle(s  string) Specify  the  document  EtleDesc(s  string) Specify  the  document  descripEonLink(href,  Etle  string)/LinkEnd() Link  to  content  between  Link  and  LinkEndUse(x,  y  int,  link  string,  style  ...string) Use  previously  defined  contentEnd() End  the  SVG  documentStructure,  Metadata,  Links
  11. 11. Rect(x,  y,  w,  h  int,  s  ...string) CenterRect(x,  y,  w,  h  int,  s  ...string) Roundrect(x,  y,  w,  h,  rx,  ry  int,  s  ...string) Ellipse(x,  y,  rx,  ry  int,  s  ...string) Circle(x,  y,  r  int,    s  ...string) Square(x,  y,  w  int,  s  ...string) Polygon(x,  y  []int,    s  ...string)Shapes
  12. 12. Line(x1,  y1,  x2,  y2  int,  s  ...string) Polyline(x,  y  []int,  s  ...string) Qbez(sx,  sy,  cx,  cy,  ex,  ey  int,  s  ...string) Bezier(sx,  sy,  cx,  cy,  px,  py,  ex,  ey  int,  s  ...string)Arc(sx  sy,  ax,  ay,  r  int,  large,  sweep  bool,  ex  ey  int,  s  ...string) Path(d  string,  s  ...string) Lines,  Curves,  and  Path
  13. 13. Scale(n  float64) ScaleXY(dx,  dy  float64) SkewX(a  float64) SkewY(a  float64) SkewXY(ax,  ay  float64) Gtransform(s  string) TranslateRotate(x,  y  int,  r  float64) RotateTranslate(x,  y  int,  r  float64) Translate(x,  y  int) Rotate(r  float64)Transforms
  14. 14. 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) Textpath(t,  pathid  string,  s  ...string)Text  and  Image
  15. 15. Offcolor Offset  uint8 Color  string Opacity  float64 LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor) RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor)Gradients
  16. 16. ⟶ ⟶ 44 77 232 44 77 232 .33 RGB(r,  g,  b  int) RGBA(r,  g,  b  int,  alpha  float64) Grid(x,  y,  w,  h,  n  int,  s  ...string)Colors,  Grid
  17. 17. 1 canvas.Start(500, 500, `onload="Startup()"`) 2 canvas.Script("application/javascript", "http://example.com/myscript.js") 3 canvas.Rect(10, 10, 100, 200) 4 canvas.End() example.com/myscript.js function StartUp() 1 Begin  the  document,  load  your  funcEon   { ... 2 specify  the  script,  by  reference } 3 specify  SVG  elements,  operate  on  these function doStuff(element) { 4 end  the  SVG  document ... }ScripEng
  18. 18. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  19. 19. SVGo  Hello  world
  20. 20. using  goplay  and  a  browser  to  sketch  with  code
  21. 21. inspecEng  the  generated  code
  22. 22. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  23. 23. Bugdriod
  24. 24. fill:rgb(164,198,57)Scale Line ArcRoundrect Circle Line Rect
  25. 25. Pictures  from  the  Internet
  26. 26. 1 $ flickr50 beach h=p://api.flickr.com/services/rest/?2 method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc <?xml  version="1.0"  encoding="ug-­‐8"  ?> <rsp  stat="ok"> <photos  page="1"  pages="377728"  perpage="50"  total="18886368">      <photo  id="6161689323"  owner="30858303@N04"                      secret="62b5d50e76"  server="6171"  farm="7"                      Etle="Los  Urros  (Sunrise)"  ispublic="1"  isfriend="0"  isfamily="0"  />3      <photo  id="6145252600"  owner="29609591@N08"                      secret="306ae87341"  server="6088"  farm="7"                      Etle="Ardnamurchan  Lighthouse"  ispublic="1"  isfriend="0"  isfamily="0"/>                  .... </photos> </rsp> 41 command2 flickr  request  URL3 flickr  XML  response4 Picture
  27. 27. define  the  input  data  structures read  the  input parse  the  input  into  the  structures drawread/parse/draw  pa=ern
  28. 28. package mainimport ( "os" "http" "url" "xml" "fmt" imports "github.com/ajstarks/svgo")type FlickrResp struct { Stat string `xml:"attr"` Photos Photos}type Photos struct { data  structures 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"`}
  29. 29. 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
  30. 30. // 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, "%vn", 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) } }make  the  image  grid  from  the  XML  response
  31. 31. // 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, "%vn", 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
  32. 32. have  fun  programming  picturesContact ajstarks@gmail.comRepository h=ps://github.com/ajstarks/svgoExamples h=p://flic.kr/s/aHsjpMnsspGo  Programming  Language h=p://golang.org

×