Programming  PicturesAnthony  Starks

SVG  Open  2011  Workshop

A  Li=le  GoLibrary  OverviewSketching  with  codePictures

A  Li=le  GoLibrary  OverviewSketching  with  codePictures

Go  Fundamentals:  program  structure

package mainimport ( "pkg")func foo(x, y int) int { ...}// start herefunc 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 := 10bar := 20.0baz := `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  GoLibrary  OverviewSketching  with  codePictures

Rect(100,  200,  250,  125,"fill:gray;  stroke:blue")

object arguments CSS  style

objects,  API  and  output

<rect  x="100"  y="200"  width="250"  height="125"  style="fill:gray;  stroke:blue"/>

(100,200)

250

125

Rect(100,  200,  250,  125,

object arguments

objects,  API  and  output

`id="box"`,  `fill="gray"`,  `stroke="blue"`)

<rect  x="100"  y="200"width="250"  height="125"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  uint8Color  stringOpacity  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  GoLibrary  OverviewSketching  with  codePictures

SVGo  Hello  world

using  goplay  and  a  browser  to  sketch  with  code

inspecEng  the  generated  code

A  Li=le  GoLibrary  OverviewSketching  with  codePictures

Bugdriod

Arc

Circle

Line

Rect

Roundrect

Line

fill:rgb(164,198,57)Scale

Pictures  from  the  Internet

<?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"  />      <photo  id="6145252600"  owner="29609591@N08"                      secret="306ae87341"  server="6088"  farm="7"                      Etle="Ardnamurchan  Lighthouse"  ispublic="1"  isfriend="0"  isfamily="0"/>                  ....</photos></rsp>

$ flickr50 beach

h=p://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc2

1

3

4

commandflickr  request  URLflickr  XML  responsePicture

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 pairfunc 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 URIfunc 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 imagesfunc 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 searchfunc 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 gridfunc 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 ajstarks@gmail.com

Repository h=ps://github.com/ajstarks/svgo

Examples h=p://flic.kr/s/aHsjpMnssp

Go  Programming  Language h=p://golang.org