package module
Version: v0.1.1 Latest Latest

This package is not in the latest version of its module.

Go to latest
Published: Apr 27, 2018 License: MIT Imports: 13 Imported by: 1



Call p5.js from Go

To program something with p5.js is real fun, because it shows what happens. gop5js gives you the possibility to use p5.js together with go. You write your code in Go and you can see the results in your browser.


To install just use go get

go get

How to use the package

  • Create function of the type func()
  • Set the gop5js.Draw to the function
  • Start the gop5js server: gop5js.Serve()


func main() {
    gop5js.CanvasHeight = 400
    gop5js.CanvasWidth = 400
    gop5js.Draw = draw

func draw() {
    gop5js.Ellipse(20, 20, 30, 30)
    gop5js.Rect(100, 100, 20, 20)
    gop5js.Text("some text here", 20, 200)




Package gop5js let you use the p5.js library with Go programs. Part of the package is a webserver, which uses websockets to connect with the browser. All the changes inside the Go program will be pushed to the browser.

Mouse events are also send back to the server, so that the Go program can handle these events.

How to use p5.js can be found at

Not all functions inside Go are completely the same like in JavaScript, because Go is a typed language and JS not.

To get this package work you need to define a simple function of type func(). This function should be set to `gpp5js.Draw`.

The second thing is to call gop5js.Serve() at the end of the main function.

A simple example which draws a circle would look like this:

func draw(){
	gop5js.Ellipse(100, 100, 50, 50)
func main() {
	gop5js.Draw = draw // maps the draw Function

The draw() function is the area, were you define all the elements, which will show up inside the web browser. That function is called every frame so you are also able to get some dynamics into the canvas.

If you want to have a moving circle, the example above would look something like this:

var x = float64(0)
func draw(){
	gop5js.Ellipse(100, 100, x, 50)
func main() {
	gop5js.Draw = draw // maps the draw Function

If that package had not implemented some p5.js features you can always use DrawCmd(). That function send direct the JavaScript to the browser. The ellipse function in JavaScript could be also called with 5 parameters


So if you want to set also the detail to the function you can write:

func draw(){
	gop5js.DrawCmd("ellipse(100, 100, 50, 50, 4)")



This section is empty.


View Source
var CanvasHeight = 700

CanvasHeight defines the canvas which is generated inside the browser

View Source
var CanvasWidth = 700

CanvasWidth defines the canvas which is generated inside the browser

View Source
var Draw = func() {}

Draw is called every frame

View Source
var ErrorContainer errorContainer

ErrorContainer collects all errors

View Source
var FilesPath = ""

FilesPath is the path to a folder, which can contain additional files like for example images.

View Source
var PathPrefix = ""

PathPrefix can be used to give all the urls a prefix. The prefix is used for all routes of that package. If you set a prefix ensure that the prefix starts with a backslash "/" For example "/p5js" or "/myprefix"

View Source
var ServerPort = ":2700"

ServerPort defines the port for the communication to the client. You need to change this value, when the default port is already used on your system.

View Source
var SleepPerFrame = time.Millisecond * time.Duration(50)

SleepPerFrame makes the execution a litle slower, beccause the Go implementation is so extrem fast.


func Arc

func Arc(x, y, w, h, start, stop float64, mode string)

Arc Draw an arc to the screen. If called with only x, y, w, h, start, and stop, the arc will be drawn and filled as an open pie segment. If a mode parameter is provided, the arc will be filled like an open semi-circle (OPEN) , a closed semi-circle (CHORD), or as a closed pie segment (PIE).

func Background

func Background(color string)

func Bezier

func Bezier(x1, y1, x2, y2, x3, y3, x4, y4 float64)

Bezier draws a cubic Bezier curve on the screen. These curves are defined by a series of anchor and control points. The first two parameters specify the first anchor point and the last two parameters specify the other anchor point, which become the first and last points on the curve. The middle parameters specify the two control points which define the shape of the curve. Approximately speaking, control points "pull" the curve towards them.

func BezierDetail

func BezierDetail(detail int)

BezierDetail sets the resolution at which Beziers display. The default value is 20.

func Clear

func Clear()

Clear clears the pixels within a buffer. This function only

works on p5.Canvas objects created with the createCanvas()

function; it won't work with the main display window. Unlike the main graphics context, pixels in additional graphics areas created with createGraphics() can be entirely or partially transparent. This function clears everything to make all of the pixels 100% transparent.

func Curve

func Curve(x1, y1, x2, y2, x3, y3, x4, y4 float64)

func CurveDetail

func CurveDetail(detail int)

func DrawCmd

func DrawCmd(cmd string)

DrawCmd takes a JavaScript command, which is added to draw()

func Ellipse

func Ellipse(x, y, w, h float64)

Ellipse Draws an ellipse (oval) to the screen. An ellipse with equal width and height is a circle. By default, the first two parameters set the location, and the third and fourth parameters set the shape's width and height.

func Fill

func Fill(color string)

func Image

func Image(imgName string, x, y, w, h float64)

Image draws a image to the canvas. Before you can use this function you need to call LoadImage(), because all imges needs to be preloaded.

func init() {
	gop5js.FilesPath = "files"
	gop5js.LoadImage("star", "star.png")
func draw() {
	gop5js.Image("star", 10, 10, 30, 30)

func Line

func Line(x1, y1, x2, y2 float64)

Line Draws a line (a direct path between two points) to the screen. The version of line() with four parameters draws the line in 2D. To color a line, use the stroke() function. A line cannot be filled, therefore the fill() function will not affect the color of a line. 2D lines are drawn with a width of one pixel by default, but this can be changed with the strokeWeight() function.

func LoadImage

func LoadImage(imgName, imgFile string)

LoadImage preloads the image. When you want to use a image you first have to load it. Then you are able to call Image() with the defined name. You should not call this function inside the draw() function. The imgFile is the file path inside your file folder. To define that folder you have to set FilesPath

func NoFill

func NoFill()

func NoStroke

func NoStroke()

func Point

func Point(x, y float64)

Point Draws a point, a coordinate in space at the dimension of one pixel. The first parameter is the horizontal value for the point, the second value is the vertical value for the point. The color of the point is determined by the current stroke.

func Quad

func Quad(x1, y1, x2, y2, x3, y3, x4, y4 float64)

Quad Draw a quad. A quad is a quadrilateral, a four sided polygon. It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape.

func Rect

func Rect(vals ...float64)

Rect Draws a rectangle to the screen. A rectangle is a four-sided shape with every angle at ninety degrees. By default, the first two parameters set the location of the upper-left corner, the third sets the width, and the fourth sets the height. The way these parameters are interpreted, however, may be changed with the rectMode() function.

The fifth, sixth, seventh and eighth parameters, if specified, determine corner radius for the top-right, top-left, lower-right and lower-left corners, respectively. An omitted corner radius parameter is set to the value of the previously specified radius value in the parameter list. The JavaScript documentation is: rect(x,y,w,h,[tl],[tr],[br],[bl]) tl Number: optional radius of top-left corner. tr Number: optional radius of top-right corner. br Number: optional radius of bottom-right corner. bl Number: optional radius of bottom-left corner.

func Serve

func Serve() error

Serve starts the server for the communication with the browser

func Stroke

func Stroke(color string)

func Text

func Text(str string, xyWidth ...float64)

Text draws the text onto the canvas. The JS Syntax is: text(str,x,y,[x2],[y2]) x Number: x-coordinate of text y Number: y-coordinate of text x2 Number: by default, the width of the text box, see rectMode() for more info y2 Number: by default, the height of the text box, see rectMode() for more info

func TextSize

func TextSize(size int)

TextSize sets the current font size. This size will be used in all subsequent calls to the text() function. Font size is measured in pixels.

func Triangle

func Triangle(x1, y1, x2, y2, x3, y3 float64)

Triangle draws a triangle. A triangle is a plane created by connecting three points. The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point.


type Data

type Data struct {
	FrameCount    int    `json:"frame_count,omitempty"`
	SketchDraw    string `json:"sketch_draw,omitempty"`
	SketchPreload string `json:"sketch_preload,omitempty"`

type P5Event

type P5Event struct {
	MouseX         int    `json:"mouse_x,omitempty"`
	MouseY         int    `json:"mouse_y,omitempty"`
	PMouseX        int    `json:"p_mouse_x,omitempty"`
	PMouseY        int    `json:"p_mouse_y,omitempty"`
	WinMouseX      int    `json:"win_mouse_x,omitempty"`
	WinMouseY      int    `json:"win_mouse_y,omitempty"`
	PWinMouseX     int    `json:"p_win_mouse_x,omitempty"`
	PWinMouseY     int    `json:"p_win_mouse_y,omitempty"`
	MouseButton    string `json:"mouse_button,omitempty"`
	MouseIsPressed bool   `json:"mouse_is_pressed,omitempty"`
var Event P5Event


Path Synopsis

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL