Anthony  J.  Starks                                             [email protected]                 @ajstarks programming  pictures  with

The  views  and  opinions  presented  here  are  personal  views  and   do  not  necessarily  reflect  the  views  of  Sanofi

mo@va@on

inspira@on:  Processing

0.  Install  Go 1.  goinstall  github.com/ajstarks/svgo 2.  Make  pictures geKng  started  with

Go  Language  features  in   ‣ interfaces ‣ variadic  arguments ‣ composite  literals  and  types ‣ format,  string,  xml,  flag  libraries ‣ fast  compiles   ‣ goinstall ‣ goplay ‣ func@ons  as  the  unit  of  graphics  work

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"`) aZributes (100,200) 250 125

Structure,  Metadata,  Links New(w  io.Writer) Specify  the  des@na@on  for  the  generated  code Start(w,  h  int,  op@ons  ...string) Begin  the  SVG  document,  with  op@ons Startview(w,  h,  minx,  miny,  vw,  vh  int) Begin  the  document  with  a  viewport Gid(id  string)/Gend() Begin/end  a  group  with  an  id Gstyle(s  string)/Gend() Begin/end  a  group  style Def(s  string)/DefEnd() Begin/end  defini@on  block Title(s  string) Specify  the  document  @tle Desc(s  string) Specify  the  document  descrip@on Link(href,  @tle  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

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)

Scrip@ng 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  func@on   specify  the  script,  by  reference specify  SVG  elements,  operate  on  these end  the  SVG  document

No content

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

SVGo  Hello  world

No content

No content

No content

using  goplay  and  a  browser  to  sketch   with  code

inspec@ng  the  generated  code

drawing  in  a  web  server imports,  constants,  flags main  func@on;  use  the   circle  func@on  to  handle   the  URL in  the  circle  func@on,   write  the  generated  SVG   to  the  web  client if  the  URL  contains  a   color,  use  it

define  the  input  data  structures read  the  input parse  the  input  into  the  structures draw read/parse/draw  paZern

No content

pmap  -­‐stagger  -­‐p  -­‐g  100  -­‐bg  lightsteelblue  \ -­‐t  "Browser  Market  Share"  -­‐show@tle  bs.xml  >  bs.svg

servermap:   infrastructure  models roadmap:  roadmaps   and  @melines pmap:  percentage  maps techstack:  technology   stack  and  standards compx:  component   diagrams IT  architecture  tools  using rr:  radar  roadmap

Tools  -­‐  con@nued pv:  porjolio  view bulletgraph:  qualita@ve   and  compara@ve  measures arch9:  9-­‐box Nmeline:  @meline/milestones

Principle:  Automate  the  crea@on  of   consistently-­‐styled  views  from   standardized  data data

Tool   SVG   Word PowerPoint Adobe  Reader Visio   Chrome Firefox XML   tool  workflow PDF PNG JPG

compx    –w  1200  –h  900  –t  "Title"  file.xml  >  file.svg     Command  op@ons Input Output Tool  name

Browser Editor Command  lines

Command  lines Visio Editor

compx:  components  on  a  grid

top les guZer 0 0 1 1 2 3 2 3 row col compx  grid

n s e w ne se nnw nne ene ssw sse nw sw ese wnw wsw Component sosware opera@ng  system

Thing  1           Stuff Thing  2 Stuff e w

ϴ  =  10 ϴ  =  30 ϴ  =  60 ϴ  =  90 varia@ons  on  the  leZer  i

flickr50  and  twiZer  update  frequency

tumblrpic

google  webfonts

layer  tennis  remixes

layer  Tennis:  all  of  season  3

“Have  fun  programming  pictures” Contact @ajstarks,  [email protected] Repository hZp://github.com/ajstarks/svgo Examples hZp://flic.kr/s/aHsjpMnssp