Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Other Side of Go: Programming Pictures

Anthony Starks
November 09, 2015

The Other Side of Go: Programming Pictures

Go has established itself as a superb tool for back-end and cloud-based infrastructure, but sometimes it’s about the picture.

Through a tour of Go libraries for generating SVG, 2D graphics on the Raspberry Pi, and creating and generating presentations, API, program, and visual design are explored. Along the way, the unique features of Go that facilitate design and tool building are explained.

Anthony Starks

November 09, 2015
Tweet

More Decks by Anthony Starks

Other Decks in Design

Transcript

  1. Element Arguments CSS Style Rect (100,200,250,125, "fill:gray;stroke:blue") <rect x="100" y="200"

    width="250" height="125" style="fill:gray;stroke:blue"/> (100, 200) 250 125
  2. Element Arguments Attributes Rect (100,200,250,125, `id="box"`, `fill="gray"`, `stroke="blue"`) <rect x="100"

    y="200" width="250" height="125" id="box" fill="gray" stroke="blue"/> (100, 200) 250 125
  3. package main import ( "os" "github.com/ajstarks/svgo" ) func main() {

    width := 960 height := 540 canvas := svg.New(os.Stdout) canvas.Start(width, height) canvas.Rect(0, 0, width, height, "fill:black") canvas.Circle(width/2, height, width/2, "fill:rgb(44,77,232)") canvas.Text(width/2, height/2, "hello, world", "fill:white;font-size:60pt;font-family:serif;text-anchor:middle") canvas.End() }
  4. const defaultstyle = "fill:rgb(127,0,0)" func circle(w http.ResponseWriter, req *http.Request) {

    w.Header().Set("Content-Type", "image/svg+xml") s := svg.New(w) s.Start(500, 500) s.Title("Circle") s.Circle(250, 250, 125, shapestyle(req.URL.Path)) s.End() } func shapestyle(path string) string { i := strings.LastIndex(path, "/") + 1 if i > 0 && len(path[i:]) > 0 { return "fill:" + path[i:] } return defaultstyle }
  5. clock funnel rotext flower rshape cube mondrian lewitt face pacman

    tux concentric http://ajstarks.org:1958/{thing}/
  6. Data Picture <thing top="100" left="100" sep="100"> <item width="50" height="50" name="Little"

    color="blue">This is small</item> <item width="75" height="100" name="Med" color="green">This is medium</item> <item width="100" height="200" name="Big" color="red">This is large</item> </thing>
  7. Imports Data Structures Flags and Main Read the Input Parse

    and Load Draw package main import ( "encoding/xml" "flag" "fmt" "io" "os" "github.com/ajstarks/svgo" ) type Thing struct { Top int `xml:"top,attr"` Left int `xml:"left,attr"` Sep int `xml:"sep,attr"` Item []item `xml:"item"` } type item struct { Width int `xml:"width,attr"` Height int `xml:"height,attr"` Name string `xml:"name,attr"` Color string `xml:"color,attr"` Text string `xml:",chardata"` } var ( width = flag.Int("w", 1024, "width") height = flag.Int("h", 768, "height") canvas = svg.New(os.Stdout) ) func main() { flag.Parse() for _, f := range flag.Args() { canvas.Start(*width, *height) dothing(f) canvas.End() } } func dothing(location string) { f, err := os.Open(location) if err != nil { fmt.Fprintf(os.Stderr, "%v\n", err) return } defer f.Close() readthing(f) } func readthing(r io.Reader) { var t Thing err := xml.NewDecoder(r).Decode(&t) if err != nil { fmt.Fprintf(os.Stderr, "%v\n", err) return } drawthing(t) } func drawthing(t Thing) { x := t.Left y := t.Top thingfmt := "font-size:%dpx;fill:%s" tfmt := "%s:%s/%s" for _, v := range t.Item { s := fmt.Sprintf(thingfmt, v.Width/2, v.Color) canvas.Circle(x, y, v.Height/4, "fill:"+v.Color) canvas.Text(x+t.Sep, y, fmt.Sprintf(tfmt, v.Name, v.Text, v.Color, s) y += v.Height } }
  8. <barchart title="2015 MacBook Benchmarks"> <note>Source: AnandTech, April 14, 2015</note> <bdata

    scale="0,6000,1000" title="Mozilla Kraken 1.1 (native browser, milliseconds)"> <bitem value="1729.7" name="Lenovo Yoga 3 Pro"/> <bitem value="1997.0" name="ASUS Zenbook UX305"/> <bitem color="steelblue" value="2589.0" name="12 inch MacBook"/> <bitem value="3621.7" name="Google Nexus 9"/> <bitem value="4014.3" name="Apple iPad Air 2"/> <bitem value="4296.7" name="NVIDIA Shield Tablet"/> <bitem value="5028.2" name="Apple iPad Air"/> </bdata> </barchart>
  9. f50 sunset https://api.flickr.com/services/rest/ ?method=flickr.photos.search &api_key=... &text=sunset &per_page=50 &sort=interestingness-desc <?xml version="1.0"

    encoding="utf-8" ?> <rsp stat="ok"> <photos page="1" pages="105615" perpage="50" total="5280747"> <photo id="4671838925" ... secret="b070f3363e" server="4068" farm="5 ... /> <photo id="3590142202" ... secret="c46752e4d8" server="2441" farm="3" .../> ... </photos> </rsp>
  10. ti = 15 ti = 30 ti = 45 func

    main() { width := 200 height := 200 a := 1.0 ai := 0.03 ti := 15.0 canvas := svg.New(os.Stdout) canvas.Start(width, height) canvas.Rect(0, 0, width, height) canvas.Gstyle("font-family:serif;font-size:100pt") for t := 0.0; t <= 360.0; t += ti { canvas.TranslateRotate(width/2, height/2, t) canvas.Text(0, 0, "i", canvas.RGBA(255, 255, 255, a)) canvas.Gend() a -= ai } canvas.Gend() canvas.End() }
  11. package main import ( "bufio" "github.com/ajstarks/openvg" "os" ) func main()

    { width, height := openvg.Init() w2 := openvg.VGfloat(width / 2) h2 := openvg.VGfloat(height / 2) w := openvg.VGfloat(width) openvg.Start(width, height) // Start the picture openvg.BackgroundColor("black") // Black background openvg.FillRGB(44, 100, 232, 1) // Big blue marble openvg.Circle(w2, 0, w) // The "world" openvg.FillColor("white") // White text openvg.TextMid(w2, h2, "hello, world", "serif", width/10) // Greetings openvg.End() // End the picture bufio.NewReader(os.Stdin).ReadBytes('\n') // Pause until [RETURN] openvg.Finish() // Graphics cleanup }
  12. OpenVG Functions Circle Ellipse Rect Roundrect Line Polyline Polygon (x,

    y, r VGfloat) (x, y, w, h VGfloat) (x, y, w, h VGfloat) (x, y, w, h, rw, rh VGfloat) (x1, y1, x2, y2 VGfloat) (x, y []VGfloat) (x, y []VGfloat) Arc Qbezier Cbezier Image Text TextMid TextEnd (x, y, w, h, sa, aext VGfloat) (sx, sy, cx, cy, ex, ey VGfloat) (sx, sy, cx, cy, px, py, ex, ey VGfloat) (x, y VGfloat, w, h int, s string) (x, y VGfloat, s, font string, size int) (x, y VGfloat, s, font string, size int) (x, y VGfloat, s, font string, size int)
  13. Anatomy of a Deck <deck> <canvas width="1024" height="768" /> <slide

    bg="white" fg="black"> <image xp="70" yp="60" width="640" height="480" name="follow.png" sp="1" caption="Dreams"/> <text xp="20" yp="80" sp="5" link="http://goo.gl/Wm05Ex">Deck elements</text> <list xp="20" yp="70" sp="3" type="bullet"> <li>text, list, image</li> <li>line, rect, ellipse</li> <li>arc, curve, polygon</li> </list> <line xp1="20" yp1="10" xp2="30" yp2="10"/> <rect xp="35" yp="10" wp="4" hr="75" color="rgb(127,0,0)"/> <ellipse xp="45" yp="10" wp="4" hr="75" color="rgb(0,127,0)"/> <arc xp="55" yp="10" wp="4" hp="3" a1="0" a2="180" color="rgb(0,0,127)"/> <curve xp1="60" yp1="10" xp2="75" yp2="20" xp3="70" yp3="10" /> <polygon xc=75 75 80" yc="8 12 10" color="rgb(0,0,127)"/> </slide> </deck> Start the deck Set the canvas size Begin a slide Place an image Draw some text Make a bullet list End the list Draw a line Draw a rectangle Draw an ellipse Draw an arc Draw a quadratic bezier Draw a polygon End the slide End of the deck
  14. Percent Grid 10 20 30 40 50 60 70 80

    90 10 20 30 40 50 60 70 80 90
  15. deck/generate text and list functions Text TextBlock TextMid TextEnd Code

    List (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s, font string, size, margin float64, color string, opacity ...float64) (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s, font string, size float64, color string, opacity ...float64) (x, y float64, s string, size, margin float64, color string, opacity ...float64) (x, y, size float64, items []string, ltype, font, color string)
  16. deck/generate graphic functions Image Arc Circle Ellipse Square Rect Curve

    Line Polygon (x, y float64, w, h int, name string) (x, y, w, h, size, a1, a2 float64, color string, opacity ...float64) (x, y, w float64, color string, opacity ...float64) (x, y, w, h float64, color string, opacity ...float64) (x, y, w float64, color string, opacity ...float64) (x, y, w, h float64, color string, opacity ...float64) (x1, y1, x2, y2, x3, y3, size float64, color string, opacity ...float64) (x1, y1, x2, y2, size float64, color string, opacity ...float64) (x, y []float64, color string, opacity ...float64)
  17. func main() { deck := generate.NewSlides(os.Stdout, 1600, 900) // 16x9

    deck to stdout deck.StartDeck() // start the deck deck.StartSlide("rgb(180,180,180)") // ... deck.EndSlide() deck.StartSlide() // ... deck.EndSlide() deck.StartSlide("black", "white") // ... deck.EndSlide() deck.EndDeck() // end the deck }
  18. // Text alignment deck.StartSlide("rgb(180,180,180)") deck.Text(50, 80, "Left", "sans", 10, "black")

    deck.TextMid(50, 50, "Center", "sans", 10, "gray") deck.TextEnd(50, 20, "Right", "sans", 10, "white") deck.Line(50, 100, 50, 0, 0.2, "black", 20) deck.EndSlide()
  19. // List items := []string{"First", "Second", "Third", "Fourth", "Fifth"} deck.StartSlide()

    deck.Text(10, 90, "Important Items", "sans", 5, "") deck.List(10, 70, 4, items, "bullet", "sans", "red") deck.EndSlide()
  20. // Picture with text annotation quote := "Yours is some

    tepid, off-brand, generic ‘cola’. " + "What I’m making is “Classic Coke”" person := "Heisenberg" deck.StartSlide("black", "white") deck.Image(50, 50, 1440, 900, "classic-coke.png") deck.TextBlock(10, 80, quote, "sans", 2.5, 30, "") deck.Text(65, 15, person, "sans", 1.2, "") deck.EndSlide()
  21. capgen slides.txt | pdfdeck ... > slides.pdf # Designing for

    People title A View of User Experience: Designing for People Anthony Starks / [email protected] / @ajstarks section Design gray white caption eames.png Ray Eames What works good is better than what looks good, because what works good lasts.
  22. Deck Web API sex -dir [start dir] -listen [address:port] -maxupload

    [bytes] GET GET GET POST POST POST DELETE POST POST POST POST / /deck/ /deck/?filter=[type] /deck/content.xml?cmd=1s /deck/content.xml?cmd=stop /deck/content.xml?slide=[num] /deck/content.xml /upload/ Deck:content.xml /table/ Deck:content.txt /table/?textsize=[size] /media/ Media:content.mov List the API List the content on the server List content filtered by deck, image, video Play a deck with the specified duration Stop playing a deck Play deck starting at a slide number Remove content Upload content Generate a table from a tab-separated list Specify the text size of the table Play the specified video
  23. Document Links Add web and mailto links with the link

    attribute of the text element. Once rendered as a PDF, clicking on the link opens the default browser or email client. A Guide to Deck Page 10
  24. AAPL 119.08 3.58 (3.10%) AMZN 599.03 35.12 (6.23%) FB 102.19

    2.52 (2.53%) GOOG 702.00 50.21 (7.70%) MSFT 52.87 4.84 (10.08%) 2015-10-24 11:56:35
  25. AAPL 114.55 -0.73 (-0.63%) AMZN 611.01 2.40 (0.39%) FB 103.70

    -0.07 (-0.07%) GOOG 708.49 -4.29 (-0.60%) MSFT 53.69 -0.56 (-1.03%) 2015-10-28 00:39:19
  26. go build compile packages and dependencies clean remove object files

    doc show documentation for package or symbol env print Go environment information fix run go tool fix on packages fmt run gofmt on package sources generate generate Go files by processing source get download and install packages and dependencies install compile and install packages and dependencies list list packages run compile and run Go program test test packages tool run specified go tool version print Go version vet run go tool vet on packages
  27. So, the next time you're about to make a subclass,

    think hard and ask yourself what would Go do Andrew Mackenzie-Ross
  28. FOR, LO, the winter is past, the rain is over

    and gone; The flowers appear on the earth; the time for the singing of birds is come, and the voice of the turtle is heard in our land. Song of Solomon 2:11-12
  29. Good Design is innovative makes a product useful is aesthetic

    makes a product understandable is unobtrusive is honest is long-lasting is thorough down to the last detail is environmentally-friendly is as little design as possible
  30. fmt

  31. cgo

  32. From: Russ Cox Subject: Re: [go-nuts] Visualizing Random Number Generators...

    Date: March 5, 2010 1:14:44 EST To: ajstarks <[email protected]> are you going to share the library or just tease us with pictures? ;-)
  33. Thompson wanted to create a comfortable computing environment constructed according

    to his own design, using whatever means were available. Dennis M. Ritchie, “The Development of the C Language”
  34. Go is not the product of a Whiggish development process.

    We were just trying to get something that worked for us. Rob Pike, “Origin of Go’s interface design”, golang-nuts
  35. Fun