1. programming pictures withAnthony J. Starks ajstarks@gmail.com @ajstarks

2. The views and opinions presented here are personal views and do not necessarily reect the views of Sano 3. mo@va@on 4. inspira@on: Processing 5. 0. Install Go1. goinstall github.com/ajstarks/svgo2. Make picturesgeKng started with 6. interfaces variadic arguments composite literals and types format, string, xml, ag libraries fast compiles goinstall goplay func@ons as the unit of graphics workGo Language features in 7. object arguments CSS style Rect(100, 200, 250, 125,"ll:gray; stroke:blue")(100,200) 250objects, API and output 8. object argumentsaZributes Rect(100, 200, 250, 125, `id="box"`, `ll="gray"`, `stroke="blue"`) (100,200) 250objects, API and output 9. New(w io.Writer) Specify the des@na@on for the generated codeStart(w, h int, op@ons ...string) Begin the SVG document, with op@onsStartview(w, h, minx, miny, vw, vh int) Begin the document with a viewportGid(id string)/Gend()Begin/end a group with an idGstyle(s string)/Gend()Begin/end a group styleDef(s string)/DefEnd() Begin/end deni@on blockTitle(s string)Specify the document @tleDesc(s string) Specify the document descrip@onLink(href, @tle string)/LinkEnd() Link to content between Link and LinkEndUse(x, y int, link string, style ...string) Use previously dened contentEnd() End the SVG documentStructure, Metadata, Links 10. 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 11. Scale(n oat64)ScaleXY(dx, dy oat64)SkewX(a oat64) SkewY(a oat64)SkewXY(ax, ay oat64)Gtransform(s string)TranslateRotate(x, y int, r oat64)RotateTranslate(x, y int, r oat64)Translate(x, y int) Rotate(r oat64)Transforms 12. 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, ll, align string)Textpath(t, pathid string, s ...string)Text and Image 13. OcolorOset uint8Color stringOpacity oat64LinearGradient(id string, x1, y1, x2, y2 uint8, sc []Ocolor)RadialGradient(id string, cx, cy, r, fx, fy uint8, sc []Ocolor)Gradients 14. 44 77 232 44 77 232 .33 RGB(r, g, b int) RGBA(r, g, b int, alpha oat64) Grid(x, y, w, h, n int, s ...string)Colors, Grid 15. 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.jsfunction StartUp() 1Begin the document, load your func@on {...2specify the script, by reference} 3specify SVG elements, operate on thesefunction doStuff(element){4end the SVG document...}Scrip@ng 16. fill:rgb(164,198,57)Scale Line ArcRoundrect CircleLine Rect 17. SVGo Hello world 18. using goplay and a browser to sketch with code 19. inspec@ng the generated code 20. imports, constants, agsmain func@on; use the circle func@on to handle the URLin the circle func@on, write the generated SVG to the web clientif the URL contains a color, use itdrawing in a web server 21. dene the input data structuresread the input parse the input into the structures drawread/parse/draw paZern 22. pmap -stagger -p -g 100 -bg lightsteelblue -t "Browser Market Share" -show@tle bs.xml > bs.svg 23. rr: radar roadmap servermap: compx: component infrastructure modelsdiagramsroadmap: roadmaps pmap: percentage maps techstack: technology and @melines stack and standardsIT architecture tools using 24. Tools - con@nuedpv: porjolio view bulletgraph: qualita@ve Nmeline: @meline/milestonesand compara@ve measures arch9: 9-box 25. Principle: Automate the crea@on of consistently-styled views from standardized data data 26. Visio Chrome FirefoxXML Tool SVG PNG Word JPG PowerPoint PDF Adobe Readertool workow 27. compx w 1200 h 900 t "Title" le.xml > le.svg Tool nameCommand op@ons Input Output 28. Browser EditorCommand lines 29. Visio EditorCommand lines 30. compx: components on a grid 31. top guZerles01row230 1 2 3colcompx grid 32. Componentopera@ng systemsoswarennw nnne nwnewnwene w ewswese swsessw ssse 33. Thing 1 Thing 2 Stu ew Stu 34. = 10 = 30 = 60 = 90varia@ons on the leZer i 35. ickr50 and twiZer update frequency 36. tumblrpic 37. google webfonts 38. layer tennis remixes 39. layer Tennis: all of season 3 40. Have fun programming pictures Contact@ajstarks, ajstarks@gmail.com Repository hZp://github.com/ajstarks/svgo Examples hZp://ic.kr/s/aHsjpMnssp