SlideShare uma empresa Scribd logo
1 de 66
Baixar para ler offline
Programming  Pictures
                        Anthony  Starks
            SVG  Open  2011  Workshop
A  Li=le  Go
Library  Overview
Sketching  with  code
Pictures
A  Li=le  Go
Library  Overview
Sketching  with  code
Pictures
package main
  import (
     "pkg"
  )
  func foo(x, y int) int {
     ...
  }
  // start here
  func main() {
     z := foo(10, 20)
     pkg.Stuff(z)
  }


Go  Fundamentals:  program  structure
var (
     number,i,j int
     big float64 = 12345678.90
     things = []string{"one", "two"}
  )
  foo := 10
  bar := 20.0
  baz := `SVG is "really" cool`




Go  Fundamentals:  variables  and  declaraEons
if SVGisCool {
     ...
  } else {
     ...
  }

  for t:= 0.0; t <= 360.0; t += 60.0 {
     ...
  }




Go  Fundamentals:  if  and  loop
A  Li=le  Go
Library  Overview
Sketching  with  code
Pictures
SVGo workshop
object       arguments                         CSS  style


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



                                    (100,200)
 <rect  x="100"  y="200"  
 width="250"  height="125"                                   125

 style="fill:gray;  stroke:blue"/>
                                                     250




objects,  API  and  output
object       arguments                          a=ributes


 Rect(100,  200,  250,  125,
       `id="box"`,  `fill="gray"`,  `stroke="blue"`)

                                     (100,200)
 <rect  x="100"  y="200"
 width="250"  height="125"                                   125

 id="box"  fill="gray"  stroke="blue"/>
                                                     250




objects,  API  and  output
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

Structure,  Metadata,  Links
Rect(x,  y,  w,  h  int,  s  ...string)              CenterRect(x,  y,  w,  h  int,  s  ...string)




        Roundrect(x,  y,  w,  h,  rx,  ry  int,  s  ...string)        Ellipse(x,  y,  rx,  ry  int,  s  ...string)




 Circle(x,  y,  r  int,    s  ...string)        Square(x,  y,  w  int,  s  ...string)         Polygon(x,  y  []int,    s  ...string)



Shapes
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
Scale(n  float64)                ScaleXY(dx,  dy  float64)




  SkewX(a  float64)
                                         SkewY(a  float64)                SkewXY(ax,  ay  float64)


                                                                Gtransform(s  string)
                                                                TranslateRotate(x,  y  int,  r  float64)
                                                                RotateTranslate(x,  y  int,  r  float64)


  Translate(x,  y  int)
                                         Rotate(r  float64)
Transforms
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)        Textpath(t,  pathid  string,  s  ...string)



Text  and  Image
Offcolor
                                                                              Offset  uint8
                                                                              Color  string
                                                                              Opacity  float64

  LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor)




  RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor)




Gradients
⟶                                                                              ⟶
   44 77 232                                                             44 77 232 .33
     RGB(r,  g,  b  int)                                                 RGBA(r,  g,  b  int,  alpha  float64)




                           Grid(x,  y,  w,  h,  n  int,  s  ...string)




Colors,  Grid
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.js

    function StartUp()
                                     1    Begin  the  document,  load  your  funcEon  
    {
    ...                              2    specify  the  script,  by  reference
    }
                                     3    specify  SVG  elements,  operate  on  these
    function doStuff(element)
    {                                4    end  the  SVG  document
    ...
    }


ScripEng
A  Li=le  Go
Library  Overview
Sketching  with  code
Pictures
SVGo  Hello  world
SVGo workshop
SVGo workshop
SVGo workshop
using  goplay  and  a  browser  to  sketch  with  code
inspecEng  the  generated  code
A  Li=le  Go
Library  Overview
Sketching  with  code
Pictures
Bugdriod
fill:rgb(164,198,57)
Scale

                             Line

                             Arc
Roundrect
               Circle


        Line                 Rect
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
SVGo workshop
Pictures  from  the  Internet
1     $ flickr50 beach


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

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

                                                   4

1   command
2   flickr  request  URL
3   flickr  XML  response
4   Picture
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"
                                        imports
    "github.com/ajstarks/svgo"
)

type FlickrResp struct {
    Stat   string `xml:"attr"`
    Photos Photos
}

type Photos struct {                 data  structures
    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"`
}
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
// FlickrAPI calls the API given a method with single name/value pair
        func 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 URI
        func 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 images
        func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) {
            if f.Stat != "ok" {
                fmt.Fprintf(os.Stderr, "%vn", 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)
            }
        }


make  the  image  grid  from  the  XML  response
// fs calls the Flickr API to perform a photo search
   func fs(s string) {
       var f FlickrResp
       r, weberr := http.Get(flickrAPI("flickr.photos.search", "text", s))
       if weberr != nil {
           fmt.Fprintf(os.Stderr, "%vn", 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 grid
   func 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

Mais conteúdo relacionado

Mais procurados

Type classes 101 - classification beyond inheritance
Type classes 101 - classification beyond inheritanceType classes 101 - classification beyond inheritance
Type classes 101 - classification beyond inheritanceAlexey Raga
 
The Ring programming language version 1.7 book - Part 57 of 196
The Ring programming language version 1.7 book - Part 57 of 196The Ring programming language version 1.7 book - Part 57 of 196
The Ring programming language version 1.7 book - Part 57 of 196Mahmoud Samir Fayed
 
λ | Lenses
λ | Lensesλ | Lenses
λ | LensesOpen-IT
 
Modern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapModern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapHoward Lewis Ship
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 CanvasHenry Osborne
 
SAT/SMT solving in Haskell
SAT/SMT solving in HaskellSAT/SMT solving in Haskell
SAT/SMT solving in HaskellMasahiro Sakai
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 CanvasMindy McAdams
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvasGary Yeh
 
Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)Stephen Chin
 
Invertible-syntax 入門
Invertible-syntax 入門Invertible-syntax 入門
Invertible-syntax 入門Hiromi Ishii
 
Metaprogramming in Haskell
Metaprogramming in HaskellMetaprogramming in Haskell
Metaprogramming in HaskellHiromi Ishii
 
Optics with monocle - Modeling the part and the whole
Optics with monocle - Modeling the part and the wholeOptics with monocle - Modeling the part and the whole
Optics with monocle - Modeling the part and the wholeIlan Godik
 
Expand/Collapse animation on Android
Expand/Collapse animation on AndroidExpand/Collapse animation on Android
Expand/Collapse animation on AndroidPavlo Dudka
 

Mais procurados (20)

Type classes 101 - classification beyond inheritance
Type classes 101 - classification beyond inheritanceType classes 101 - classification beyond inheritance
Type classes 101 - classification beyond inheritance
 
The Ring programming language version 1.7 book - Part 57 of 196
The Ring programming language version 1.7 book - Part 57 of 196The Ring programming language version 1.7 book - Part 57 of 196
The Ring programming language version 1.7 book - Part 57 of 196
 
Beyond Scala Lens
Beyond Scala LensBeyond Scala Lens
Beyond Scala Lens
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
λ | Lenses
λ | Lensesλ | Lenses
λ | Lenses
 
Modern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter BootstrapModern Application Foundations: Underscore and Twitter Bootstrap
Modern Application Foundations: Underscore and Twitter Bootstrap
 
Lec2
Lec2Lec2
Lec2
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
 
SAT/SMT solving in Haskell
SAT/SMT solving in HaskellSAT/SMT solving in Haskell
SAT/SMT solving in Haskell
 
Introduction to HTML5 Canvas
Introduction to HTML5 CanvasIntroduction to HTML5 Canvas
Introduction to HTML5 Canvas
 
d3 is cool
d3 is coold3 is cool
d3 is cool
 
Html5 canvas
Html5 canvasHtml5 canvas
Html5 canvas
 
Functional programming in scala
Functional programming in scalaFunctional programming in scala
Functional programming in scala
 
Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)Mary Had a Little λ (QCon)
Mary Had a Little λ (QCon)
 
Invertible-syntax 入門
Invertible-syntax 入門Invertible-syntax 入門
Invertible-syntax 入門
 
Metaprogramming in Haskell
Metaprogramming in HaskellMetaprogramming in Haskell
Metaprogramming in Haskell
 
ProgrammingwithGOLang
ProgrammingwithGOLangProgrammingwithGOLang
ProgrammingwithGOLang
 
Optics with monocle - Modeling the part and the whole
Optics with monocle - Modeling the part and the wholeOptics with monocle - Modeling the part and the whole
Optics with monocle - Modeling the part and the whole
 
Java Fx Tutorial01
Java Fx Tutorial01Java Fx Tutorial01
Java Fx Tutorial01
 
Expand/Collapse animation on Android
Expand/Collapse animation on AndroidExpand/Collapse animation on Android
Expand/Collapse animation on Android
 

Destaque

11 Grade Infinitives
11 Grade   Infinitives11 Grade   Infinitives
11 Grade InfinitivesMaximoff
 
Idioms lessons 28-39 iii bi-monthly
Idioms   lessons 28-39 iii bi-monthlyIdioms   lessons 28-39 iii bi-monthly
Idioms lessons 28-39 iii bi-monthlyMaximoff
 
Webisodes long proposal
Webisodes long proposalWebisodes long proposal
Webisodes long proposalMaximoff
 

Destaque (7)

Processing Portolio
Processing PortolioProcessing Portolio
Processing Portolio
 
Clothing
ClothingClothing
Clothing
 
11 Grade Infinitives
11 Grade   Infinitives11 Grade   Infinitives
11 Grade Infinitives
 
Las Vegas
Las VegasLas Vegas
Las Vegas
 
Economy
EconomyEconomy
Economy
 
Idioms lessons 28-39 iii bi-monthly
Idioms   lessons 28-39 iii bi-monthlyIdioms   lessons 28-39 iii bi-monthly
Idioms lessons 28-39 iii bi-monthly
 
Webisodes long proposal
Webisodes long proposalWebisodes long proposal
Webisodes long proposal
 

Semelhante a SVGo workshop

Raphael JavaScript Library
Raphael JavaScript LibraryRaphael JavaScript Library
Raphael JavaScript LibraryLearningTech
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)zahid-mian
 
Super Advanced Python –act1
Super Advanced Python –act1Super Advanced Python –act1
Super Advanced Python –act1Ke Wei Louis
 
Computer graphics lab manual
Computer graphics lab manualComputer graphics lab manual
Computer graphics lab manualUma mohan
 
Refactoring to Macros with Clojure
Refactoring to Macros with ClojureRefactoring to Macros with Clojure
Refactoring to Macros with ClojureDmitry Buzdin
 
The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196Mahmoud Samir Fayed
 
(How) can we benefit from adopting scala?
(How) can we benefit from adopting scala?(How) can we benefit from adopting scala?
(How) can we benefit from adopting scala?Tomasz Wrobel
 
Introduction to Go
Introduction to GoIntroduction to Go
Introduction to GoJaehue Jang
 
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티JaeYeoul Ahn
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video gamedandylion13
 
The Scala Programming Language
The Scala Programming LanguageThe Scala Programming Language
The Scala Programming Languageleague
 
Stupid Awesome Python Tricks
Stupid Awesome Python TricksStupid Awesome Python Tricks
Stupid Awesome Python TricksBryan Helmig
 
Pythonic Graphics
Pythonic GraphicsPythonic Graphics
Pythonic GraphicsKirby Urner
 
An overview of Python 2.7
An overview of Python 2.7An overview of Python 2.7
An overview of Python 2.7decoupled
 

Semelhante a SVGo workshop (20)

Raphael JavaScript Library
Raphael JavaScript LibraryRaphael JavaScript Library
Raphael JavaScript Library
 
Canvas
CanvasCanvas
Canvas
 
Introduction to d3js (and SVG)
Introduction to d3js (and SVG)Introduction to d3js (and SVG)
Introduction to d3js (and SVG)
 
Super Advanced Python –act1
Super Advanced Python –act1Super Advanced Python –act1
Super Advanced Python –act1
 
Computer graphics lab manual
Computer graphics lab manualComputer graphics lab manual
Computer graphics lab manual
 
Refactoring to Macros with Clojure
Refactoring to Macros with ClojureRefactoring to Macros with Clojure
Refactoring to Macros with Clojure
 
The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196The Ring programming language version 1.7 book - Part 48 of 196
The Ring programming language version 1.7 book - Part 48 of 196
 
(How) can we benefit from adopting scala?
(How) can we benefit from adopting scala?(How) can we benefit from adopting scala?
(How) can we benefit from adopting scala?
 
Scala in Places API
Scala in Places APIScala in Places API
Scala in Places API
 
Introduction to Go
Introduction to GoIntroduction to Go
Introduction to Go
 
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티
Go 프로그래밍 소개 - 장재휴, DomainDriven커뮤니티
 
How to make a video game
How to make a video gameHow to make a video game
How to make a video game
 
Introduction to-scala
Introduction to-scalaIntroduction to-scala
Introduction to-scala
 
The Scala Programming Language
The Scala Programming LanguageThe Scala Programming Language
The Scala Programming Language
 
Groovy's Builder
Groovy's BuilderGroovy's Builder
Groovy's Builder
 
R graphics
R graphicsR graphics
R graphics
 
Stupid Awesome Python Tricks
Stupid Awesome Python TricksStupid Awesome Python Tricks
Stupid Awesome Python Tricks
 
Pythonic Graphics
Pythonic GraphicsPythonic Graphics
Pythonic Graphics
 
An overview of Python 2.7
An overview of Python 2.7An overview of Python 2.7
An overview of Python 2.7
 
A tour of Python
A tour of PythonA tour of Python
A tour of Python
 

Último

The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)codyslingerland1
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxNeo4j
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxKaustubhBhavsar6
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTxtailishbaloch
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxSatishbabu Gunukula
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingMAGNIntelligence
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Alkin Tezuysal
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptxHansamali Gamage
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3DianaGray10
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIVijayananda Mohire
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdfThe Good Food Institute
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Libraryshyamraj55
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.IPLOOK Networks
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 

Último (20)

The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)The New Cloud World Order Is FinOps (Slideshow)
The New Cloud World Order Is FinOps (Slideshow)
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptxGraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
GraphSummit Copenhagen 2024 - Neo4j Vision and Roadmap.pptx
 
How to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptxHow to become a GDSC Lead GDSC MI AOE.pptx
How to become a GDSC Lead GDSC MI AOE.pptx
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENTSIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
SIM INFORMATION SYSTEM: REVOLUTIONIZING DATA MANAGEMENT
 
Oracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptxOracle Database 23c Security New Features.pptx
Oracle Database 23c Security New Features.pptx
 
IT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced ComputingIT Service Management (ITSM) Best Practices for Advanced Computing
IT Service Management (ITSM) Best Practices for Advanced Computing
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
Design and Modeling for MySQL SCALE 21X Pasadena, CA Mar 2024
 
.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx.NET 8 ChatBot with Azure OpenAI Services.pptx
.NET 8 ChatBot with Azure OpenAI Services.pptx
 
UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3UiPath Studio Web workshop Series - Day 3
UiPath Studio Web workshop Series - Day 3
 
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
My key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAIMy key hands-on projects in Quantum, and QAI
My key hands-on projects in Quantum, and QAI
 
2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf2024.03.12 Cost drivers of cultivated meat production.pdf
2024.03.12 Cost drivers of cultivated meat production.pdf
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
How to release an Open Source Dataweave Library
How to release an Open Source Dataweave LibraryHow to release an Open Source Dataweave Library
How to release an Open Source Dataweave Library
 
Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.Introduction - IPLOOK NETWORKS CO., LTD.
Introduction - IPLOOK NETWORKS CO., LTD.
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 

SVGo workshop

  • 1. Programming  Pictures Anthony  Starks SVG  Open  2011  Workshop
  • 2. A  Li=le  Go Library  Overview Sketching  with  code Pictures
  • 3. A  Li=le  Go Library  Overview Sketching  with  code Pictures
  • 4. package main import ( "pkg" ) func foo(x, y int) int { ... } // start here func main() { z := foo(10, 20) pkg.Stuff(z) } Go  Fundamentals:  program  structure
  • 5. var ( number,i,j int big float64 = 12345678.90 things = []string{"one", "two"} ) foo := 10 bar := 20.0 baz := `SVG is "really" cool` Go  Fundamentals:  variables  and  declaraEons
  • 6. if SVGisCool { ... } else { ... } for t:= 0.0; t <= 360.0; t += 60.0 { ... } Go  Fundamentals:  if  and  loop
  • 7. A  Li=le  Go Library  Overview Sketching  with  code Pictures
  • 9. object arguments CSS  style Rect(100,  200,  250,  125,"fill:gray;  stroke:blue") (100,200) <rect  x="100"  y="200"   width="250"  height="125"   125 style="fill:gray;  stroke:blue"/> 250 objects,  API  and  output
  • 10. object arguments a=ributes Rect(100,  200,  250,  125, `id="box"`,  `fill="gray"`,  `stroke="blue"`) (100,200) <rect  x="100"  y="200" width="250"  height="125" 125 id="box"  fill="gray"  stroke="blue"/> 250 objects,  API  and  output
  • 11. 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 Structure,  Metadata,  Links
  • 12. Rect(x,  y,  w,  h  int,  s  ...string) CenterRect(x,  y,  w,  h  int,  s  ...string) Roundrect(x,  y,  w,  h,  rx,  ry  int,  s  ...string) Ellipse(x,  y,  rx,  ry  int,  s  ...string) Circle(x,  y,  r  int,    s  ...string) Square(x,  y,  w  int,  s  ...string) Polygon(x,  y  []int,    s  ...string) Shapes
  • 13. 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
  • 14. Scale(n  float64) ScaleXY(dx,  dy  float64) SkewX(a  float64) SkewY(a  float64) SkewXY(ax,  ay  float64) Gtransform(s  string) TranslateRotate(x,  y  int,  r  float64) RotateTranslate(x,  y  int,  r  float64) Translate(x,  y  int) Rotate(r  float64) Transforms
  • 15. 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) Textpath(t,  pathid  string,  s  ...string) Text  and  Image
  • 16. Offcolor Offset  uint8 Color  string Opacity  float64 LinearGradient(id  string,  x1,  y1,  x2,  y2  uint8,  sc  []Offcolor) RadialGradient(id  string,  cx,  cy,  r,  fx,  fy  uint8,  sc  []Offcolor) Gradients
  • 17. ⟶ 44 77 232 44 77 232 .33 RGB(r,  g,  b  int) RGBA(r,  g,  b  int,  alpha  float64) Grid(x,  y,  w,  h,  n  int,  s  ...string) Colors,  Grid
  • 18. 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.js function StartUp() 1 Begin  the  document,  load  your  funcEon   { ... 2 specify  the  script,  by  reference } 3 specify  SVG  elements,  operate  on  these function doStuff(element) { 4 end  the  SVG  document ... } ScripEng
  • 19. A  Li=le  Go Library  Overview Sketching  with  code Pictures
  • 24. using  goplay  and  a  browser  to  sketch  with  code
  • 26. A  Li=le  Go Library  Overview Sketching  with  code Pictures
  • 28. fill:rgb(164,198,57) Scale Line Arc Roundrect Circle Line Rect
  • 59. Pictures  from  the  Internet
  • 60. 1 $ flickr50 beach h=p://api.flickr.com/services/rest/? 2 method=flickr.photos.search&api_key=...&text=beach&per_page=50&sort=interesEngness-­‐desc <?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"  /> 3      <photo  id="6145252600"  owner="29609591@N08"                      secret="306ae87341"  server="6088"  farm="7"                      Etle="Ardnamurchan  Lighthouse"  ispublic="1"  isfriend="0"  isfamily="0"/>                  .... </photos> </rsp> 4 1 command 2 flickr  request  URL 3 flickr  XML  response 4 Picture
  • 61. define  the  input  data  structures read  the  input parse  the  input  into  the  structures draw read/parse/draw  pa=ern
  • 62. package main import ( "os" "http" "url" "xml" "fmt" imports "github.com/ajstarks/svgo" ) type FlickrResp struct { Stat string `xml:"attr"` Photos Photos } type Photos struct { data  structures 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"` }
  • 63. 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
  • 64. // FlickrAPI calls the API given a method with single name/value pair func 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 URI func 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 images func imageGrid(f FlickrResp, x, y, cols, gutter int, imgsize string) { if f.Stat != "ok" { fmt.Fprintf(os.Stderr, "%vn", 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) } } make  the  image  grid  from  the  XML  response
  • 65. // fs calls the Flickr API to perform a photo search func fs(s string) { var f FlickrResp r, weberr := http.Get(flickrAPI("flickr.photos.search", "text", s)) if weberr != nil { fmt.Fprintf(os.Stderr, "%vn", 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 grid func 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
  • 66. 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