README
¶
gop5js
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.
Installation
To install just use go get
go get github.com/as27/gop5js
How to use the package
- Create function of the type
func() - Set the gop5js.Draw to the function
- Start the gop5js server:
gop5js.Serve()
Example
func main() {
gop5js.CanvasHeight = 400
gop5js.CanvasWidth = 400
gop5js.Draw = draw
gop5js.Serve()
}
func draw() {
gop5js.Background("127")
gop5js.Ellipse(20, 20, 30, 30)
gop5js.Rect(100, 100, 20, 20)
gop5js.Text("some text here", 20, 200)
}
Documentation
¶
Overview ¶
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 https://p5js.org/
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
gop5js.Serve()
}
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)
x++
}
func main() {
gop5js.Draw = draw // maps the draw Function
gop5js.Serve()
}
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
ellipse(x,y,w,h,detail)
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)")
}
Index ¶
- Variables
- func Arc(x, y, w, h, start, stop float64, mode string)
- func Background(color string)
- func Bezier(x1, y1, x2, y2, x3, y3, x4, y4 float64)
- func BezierDetail(detail int)
- func Clear()
- func Curve(x1, y1, x2, y2, x3, y3, x4, y4 float64)
- func CurveDetail(detail int)
- func DrawCmd(cmd string)
- func Ellipse(x, y, w, h float64)
- func Fill(color string)
- func Image(imgName string, x, y, w, h float64)
- func Line(x1, y1, x2, y2 float64)
- func LoadImage(imgName, imgFile string)
- func NoFill()
- func NoStroke()
- func Point(x, y float64)
- func Quad(x1, y1, x2, y2, x3, y3, x4, y4 float64)
- func Rect(vals ...float64)
- func Serve() error
- func Stroke(color string)
- func Text(str string, xyWidth ...float64)
- func TextSize(size int)
- func Triangle(x1, y1, x2, y2, x3, y3 float64)
- type Data
- type P5Event
Constants ¶
This section is empty.
Variables ¶
var CanvasHeight = 700
CanvasHeight defines the canvas which is generated inside the browser
var CanvasWidth = 700
CanvasWidth defines the canvas which is generated inside the browser
var Draw = func() {}
Draw is called every frame
var ErrorContainer errorContainer
ErrorContainer collects all errors
var FilesPath = ""
FilesPath is the path to a folder, which can contain additional files like for example images.
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"
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.
var SleepPerFrame = time.Millisecond * time.Duration(50)
SleepPerFrame makes the execution a litle slower, beccause the Go implementation is so extrem fast.
Functions ¶
func Arc ¶
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 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 Image ¶
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 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 Text ¶
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
Types ¶
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
Source Files
Directories