Slide 1
Slide 1 text
The other side of Go
Programming Pictures
Anthony Starks
Slide 2
Slide 2 text
Go is great in the back end
Slide 3
Slide 3 text
But sometimes it's about the picture
Slide 4
Slide 4 text
API Design
Client Program Design
Visual Design and Relationships
Why Go?
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Element Arguments
Rect (100,200,250,125)
(100, 200)
250
125
Slide 7
Slide 7 text
Element Arguments CSS Style
Rect (100,200,250,125, "fill:gray;stroke:blue")
(100, 200)
250
125
Slide 8
Slide 8 text
Element Arguments Attributes
Rect (100,200,250,125,
`id="box"`, `fill="gray"`, `stroke="blue"`)
(100, 200)
250
125
Slide 9
Slide 9 text
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()
}
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
Scale
Roundrect Circle
Line Rect
Line
Arc
fill:rgb(164,198,57)
Slide 12
Slide 12 text
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
}
Slide 13
Slide 13 text
clock funnel rotext flower
rshape cube mondrian lewitt
face pacman tux concentric
http://ajstarks.org:1958/{thing}/
Slide 14
Slide 14 text
/pacman/?angle=20
/pacman/?angle=40
/pacman/?angle=70
Slide 15
Slide 15 text
Read/Parse/Draw Pattern
Slide 16
Slide 16 text
Data
Picture
This is small
This is medium
This is large
Slide 17
Slide 17 text
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
}
}
Slide 18
Slide 18 text
Source: AnandTech, April 14, 2015
Slide 19
Slide 19 text
SVGo Clients
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
No content
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
f50 sunset
https://api.flickr.com/services/rest/
?method=flickr.photos.search
&api_key=...
&text=sunset
&per_page=50
&sort=interestingness-desc
...
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
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()
}
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
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
}
Slide 49
Slide 49 text
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)
Slide 50
Slide 50 text
Deck
a Go package for presentations
Slide 51
Slide 51 text
Anatomy of a Deck
![]()
Deck elements
text, list, image
line, rect, ellipse
arc, curve, polygon
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
Slide 52
Slide 52 text
Dreams
Deck elements
text, list, image
line, rect, ellipse
arc, curve, polygon
Slide 53
Slide 53 text
Percent Grid
10 20 30 40 50 60 70 80 90
10
20
30
40
50
60
70
80
90
Slide 54
Slide 54 text
Percentage-based layout
Hello
10%, 50% 50%, 50% 90%, 50%
Slide 55
Slide 55 text
Landscape
Portrait
Scaling the canvas
Slide 56
Slide 56 text
Process deck code
interactive
PDF
SVG
Slide 57
Slide 57 text
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)
Slide 58
Slide 58 text
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)
Slide 59
Slide 59 text
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
}
Slide 60
Slide 60 text
// 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()
Slide 61
Slide 61 text
// 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()
Slide 62
Slide 62 text
// 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()
Slide 63
Slide 63 text
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.
Slide 64
Slide 64 text
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
Slide 65
Slide 65 text
Design Examples
Slide 66
Slide 66 text
Bottom
Top
Left Right
Slide 67
Slide 67 text
10%
10%
30% 70%
Slide 68
Slide 68 text
Footer (bottom 10%)
Header (top 10%)
Summary
(30%)
Detail
(70%)
Slide 69
Slide 69 text
My Story
Section
A. Person, November 2015
One
Two
Three
Four
Five
Six
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
BOS
SFO
Virgin America 351
Gate B38
8:35am
On Time
Slide 72
Slide 72 text
JFK
IND
US Airways 1207
Gate C31C
5:35pm
Delayed
Slide 73
Slide 73 text
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
Slide 74
Slide 74 text
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
Slide 75
Slide 75 text
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
Slide 76
Slide 76 text
This is not a index card
Slide 77
Slide 77 text
Can't buy me love Bliss
Misery We have each other
Better
Worse
Rich
Poor
Slide 78
Slide 78 text
So, the next time you're
about to make a subclass,
think hard and ask yourself
what would Go do
Andrew Mackenzie-Ross
Slide 79
Slide 79 text
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
Slide 80
Slide 80 text
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
Slide 81
Slide 81 text
What is it about Go?
Slide 82
Slide 82 text
fmt
Slide 83
Slide 83 text
func
Slide 84
Slide 84 text
io.Writer
io.Reader
Slide 85
Slide 85 text
net/http
Slide 86
Slide 86 text
encoding/xml
encoding/json
Slide 87
Slide 87 text
cgo
Slide 88
Slide 88 text
The Community
Slide 89
Slide 89 text
From: Russ Cox
Subject: Re: [go-nuts] Visualizing Random Number Generators...
Date: March 5, 2010 1:14:44 EST
To: ajstarks
are you going to share the library
or just tease us with pictures? ;-)
Slide 90
Slide 90 text
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”
Slide 91
Slide 91 text
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
Slide 92
Slide 92 text
Making Tools
Slide 93
Slide 93 text
Fun
Slide 94
Slide 94 text
Reducing the distance from
the idea to the picture
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Picasso Turing
Slide 97
Slide 97 text
Thank you
github.com/ajstarks
@ajstarks
[email protected]
flickr.com/photos/ajstarks
speakerdeck.com/ajstarks
mindchunk.blogspot.com