Graphics

Graphics[{objects__}, opts___]

represents a two-dimensional graphical image. This is a fundamental expression, which is produced by all 2D plotting functions

Graphics[
 Table[{Hue[t/20.0,1., 0.5], Circle[{Cos[2 Pi t/20], Sin[2 Pi t/20]}]}, {t, 20}]]

(*VB[*)(Null)(*,*)(*"1:eJxTTMoPSmNiYGAo5gAS7kWJBRmZycVpIiARFiDhk1lcApGH85hBPBDhUZpaNGsmCKy0L2IAgw8wxgP7NEaQOjYg4ZxZlJyTimYKmMcKJALyy1OLEJIBOaXFCAcFJZZk5ucl5mSCVGaCRBAaQzJzU7EpZcRUCrYDbAYu9UxEyRG0lgWuFOaXzP9AQJ5L8IX4TgpCnFQfMJIdljSJX1CA0ih+sYe4iTEIHB5MaZyGYUDfFIIvjZ+kYxonP5cOtTIMe4hDwvcCySGeCVKEFP/4ctDlASuzwLpHfBynp4HANUpjAVs4jpZtJJZtNwesbBuUeYHudfrZMyBwZ7DnhWHeloWFOcm1Dji9MBAwHZLTHo7G8QDWnPjaA4+HdBk41OtCfOXik8GeZwZZG4G6qQtf6+3ZkG5DD/XyFF8t9oLMvhMiNPDVYi+HTF94eMYxpMZ6PToGNKBlIKR2ejNkxj6Hel2IryZ6N5jywghsQ6MFPvG1Dth0BhTTg0pzUoNBTnDOzyspys8pBrvRLTGnOBUAXPBTTA=="*)(*]VB*)

Graphics[{EdgeForm[Black], Green, Rectangle[{0, -1}, {2, 1}], Red, Disk[], Blue,
   Circle[{2, 0}], Yellow, Polygon[{{2, 0}, {4, 1}, {4, -1}}], Purple, Arrow[{{4, 3/2}, {0, 3/2}, {0, 0}}], Black, 
  SVGAttribute[Line[{{-1, 0}, {4, 0}}], "stroke-dasharray"->"3"]}]

(*VB[*)(Null)(*,*)(*"1:eJyVUstOwzAQdEJ4SSDxC3wAJz4AlUBzyQElEnc3dVKrxovWLqh/y5+AH7IhqRsJH1bayezseJzbFTR9TghRF6ZUSN83vFP9tUUKU2qudJ+F78/rgS0B3zxy6Sf2NftggpuG9CeB2VSPJQhAB3NL94Q8DDas01QOgnko7PL8b3MmeB50EjuivN+RhcEnrrYp+Tmr0a+XOTOl5Ngd+MxnhLLxnZ3QuSkvIPYDSD8R0z2mO8aL6CuBu7wOfCBx5+vB6cXO+zk1ZYEIn7NuirjQCVPNQVLB7Yhzmkj3n/Q/ESX+J8e/MqV9rRZaI1/tNPt94JrLybtMNthgjqY5xpudYO2N7TTClt2tqdpQNHZau+5+QrT3K0EaqlAuyyUViv0A52+gAQ=="*)(*]VB*)

Graphics objects

Please see the corresponding section in Reference section for expression to be used with Graphics.

Mostly all primitives are generated by a high-order functions like Plot, ListLinePlot, ListVectorPlot, BubbleChart and etc

flowchart LR;

subgraph PP[High-order functions]
direction LR
Plot
ContourPlot
ListPlot
BarChart
VectorPlot
MatrixPlot
etc[...]
end

subgraph Primitives
direction LR
Point
Line
Arrow
Polygon
Rectangle
Raster
RGBColor
PrimitivesMisc[...]
end

Plot --> Line
Plot --> RGBColor
ContourPlot --> Polygon
ContourPlot --> RGBColor
ListPlot --> Point
ListPlot --> RGBColor
BarChart --> Rectangle
BarChart --> RGBColor
VectorPlot --> Arrow
VectorPlot --> Line
VectorPlot --> RGBColor
MatrixPlot --> Raster

Point --> Graphics
Line --> Graphics
Arrow --> Graphics
Polygon --> Graphics
Rectangle --> Graphics
Raster --> Graphics
RGBColor --> Graphics
PrimitivesMisc --> Graphics

Methods

EventHandler

Attach an event handler to listen canvas events

EventHandler[Graphics[Disk[]], {"click"->Beep}]

The list of available events is the same as for primitives (see Mouse and keyboard)

• "click"
• "mousemove"
• etc

it is also applicable for all plotting functions

c = {0.,0.};

EventHandler[
  Plot[x, {x,0,1}, Epilog->Point[c//Offload]], 
  {"mousemove"->((c=#)&)}
]

c = {0.,0.};

Plot[x, {x,0,1}, Epilog->{
  Point[c//Offload], 
  EventHandler[Null, {"mousemove"->((c=#)&)}]
}]

Context symbols

Here is a list of utility symbols used in Graphics context

Graphics`DPR

Returns device density pixel ratio (for retina-like displays it is more than 1.0). It comes handy when working with raster graphics - Image placed on graphics canvas.

FrontFetch[Graphics`DPR[]]

Evaluate it on the frontend using FrontFetch or FrontFetchAsync like functions.

Options

PlotRange

manually specifies, where the borders of the visible area (viewport) are

PlotRange->{{-1,1}, {-1,1}}

ImageSize

specifies the actual size in pixels of a canvas

ImageSize->300 or ImageSize->{300,200}

ImageSizeRaw

specifies the size of drawing area in pixels considering pixel density ratio. It comes handy when combining Graphics with Image using Inset. HighlightImage uses this approach

ImagePadding

removes or adds the spacing between the plotted range and the canvas border

ImagePadding->None

ImagePadding->10

PlotRangeClipping

Defines if plot range has to be clipped. By the default is True, that hides all graphics objects outside the plotting range

PlotLabel

Specifies a label for a plot

Plot[Sin[x], {x, 0, 10}, PlotLabel -> Sin[x]]

Plot[Sin[x], {x, 0, 10}, PlotLabel -> "Sin[x]", LabelStyle -> Directive[Orange, FontSize->14]]

Axes

Show or hide axes

Axes->True

Example

Graphics[{EdgeForm[Black], Green, Rectangle[{0, -1}, {2, 1}], Red, Disk[], Blue,
   Circle[{2, 0}], Yellow, Polygon[{{2, 0}, {4, 1}, {4, -1}}], Purple, Arrow[{{4, 3/2}, {0, 3/2}, {0, 0}}], Black, 
  SVGAttribute[Line[{{-1, 0}, {4, 0}}], "stroke-dasharray"->"3"]}, Axes->True ]

AxesLabel

Place labels on your axes

AxesLabel -> {"xxx", "yyy"}

for example

Labels accepts only strings or numbers unlike Mathematica, where you can put everything.

Since it is translated into Text, one can use sort of TeX math input

Graphics[Circle[], Axes->True, AxesLabel -> {"x-axis (cm^{-1})", "y-axis \\alpha"}]

You can offset the labels using the following pattern

Graphics[Circle[], Axes->True, AxesLabel -> {{"x-axis (cm^{-1})", {-20,-20}}, "y-axis"}]

Ticks

Customize ticks by providing an array of numbers for both axes

Graphics[Circle[], Axes->True, Ticks->{{0, 0.5, 1}, {}}]

Or by providing as pairs {Number, String} one can specify the displayed text

Graphics[Circle[], Axes->True, Ticks->{{{0, "Zero"}, {0.5, "Half"}, {1,"One"}}, {}}]

"Controls:

The features allows to pan and zoom your plots, that was never possible in Mathematica

"Controls"->True

Frame

Turns plot into the journals-like styled graph. In general it has much more options to customize the look

Graphics[Circle[], Axes->True, Frame->True]

FrameTicks

The same as Ticks, but for this regime.

FrameLabel

The same as AxesLabel

FrameLabel->{{"yy", None}, {"xx", None}}

to specify an absolute offset for each label, provide a list instead of a string

FrameLabel->{{{"yy", {xoffset, yoffset}}, None}, {"xx", None}}

FrameStyle

Affects the style of FrameLabels. Use Directive for changing the style

FrameStyle->Directive[FontSize->16]

FrameTicksStyle

Affects the style of FrameTicks

FrameTicksStyle->Directive[FontSize->16]

TickLabels

To remove unnecessary ticks, use

TickLabels->{{True, False}, {True, False}}

Epilog

Puts any graphics object on top

Epilog->{Red, Line[{{-1,-1}, {1,1}}]}

It opens up many possibilities, since it provides low-level access to the Graphics canvas.

Example

One can use it on a high-level function like Plot to add low-level primitives

Plot[Sin[x], {x,0,Pi}, Epilog->{Red, Line[{{-1,-1}, {1,1}}]}]

or together with FrontInstanceReference

Prolog

The same as Epilog, but acts before plotting the data.

"TransitionType"

See Transitions. The possible values

"Linear"

This one is used by the default

For example

pt = {-1,0};
Graphics[{PointSize[0.3], Point[pt // Offload]}, ImageSize->350, PlotRange->{{-1,1}, {-1,1}}, "TransitionType"->"Linear"]

pt = RandomReal[{-1,1}, 2];

"CubicInOut"

pt = {-1,0};
Graphics[{PointSize[0.3], Point[pt // Offload]}, ImageSize->350, PlotRange->{{-1,1}, {-1,1}}, "TransitionType"->"CubicInOut"]

None

No transition. Works great for fast animations

"TransitionDuration"

Sets the duration of any transitions of graphics objects on canvas in milliseconds. The default value is 300.

Combining two graphics plots

One can put Graphics into another Graphics canvas using Inset or merge them using Show.

Transitions

Updates are supported with Offload on the level of graphics primitives such as Line, Point, Rectangle, Text and etc...

The full reevaluation of Graphics does not happen, that allows to gain much more performance. However, since the dynamic binding is established between individual primitives and symbols, one can make nested constructions like this one

radius = 1.;
angle = 0.;
tpos = 0.

group = {
  LightBlue, Disk[{0,0}, radius // Offload],
  LightBlue, AbsoluteThickness[25], Line[{{-1,1}, {1,-1}}],
  Red, Directive[FontSize->24],
  Text["Hello World", {Offload[-0.23 + tpos],0}]
};

Graphics[Rotate[group, angle // Offload], "TransitionType"->"Linear", "TransitionDuration"->100]

Here

• an update of angle will not cause reevaluation of group
• and update of radius will only update the radius of Disk
• and update of tpos will reevaluate an expression -0.23 + tpos and change the text position

Let us animate this example

Do[
  radius = 1+0.5 Sin[x];
  tpos = 0.5 Cos[4x];
  angle = x;
  Pause[0.1];
, {x, 0. , 2Pi, 0.1}];

Supported output forms

• StandardForm
• WLXForm