Your SlideShare is downloading. ×
0
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

SVGo workshop

444

Published on

SVGo Workshop from SVG Open 2011

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
444
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Programming  Pictures Anthony  Starks SVG  Open  2011  Workshop
  • 2. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  • 3. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  • 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. 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. if SVGisCool { ... } else { ... } for t:= 0.0; t <= 360.0; t += 60.0 { ... }Go  Fundamentals:  if  and  loop
  • 7. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  • 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. 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. 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. 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. 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. 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. 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. 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. ⟶ ⟶ 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. 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. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  • 19. SVGo  Hello  world
  • 20. using  goplay  and  a  browser  to  sketch  with  code
  • 21. inspecEng  the  generated  code
  • 22. A  Li=le  GoLibrary  OverviewSketching  with  codePictures
  • 23. Bugdriod
  • 24. fill:rgb(164,198,57)Scale Line ArcRoundrect Circle Line Rect
  • 25. Pictures  from  the  Internet
  • 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. define  the  input  data  structures read  the  input parse  the  input  into  the  structures drawread/parse/draw  pa=ern
  • 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. 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. // 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. // 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. 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

×