[p5.js] What is p5.js

Get Started

This page walks you through setting up a p5.js project and making your first sketch. If you'd like to start with the new p5.js Web Editor, you can jump down to Your First Sketch.

Download and File Setup


The easiest way to start is by using the empty example that comes with thep5.js complete download.
If you look in index.html, you'll notice that it links to the file p5.js. If you would like to use the minified version (compressed for faster page loading), change the link to p5.min.js.
A sample HTML page might look like this:
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
</html>
You can also start with this template from codepen.

Your First Sketch


Processing users may want to check out the Processing transition tutorial.
In your editor, type the following:
function setup() {

}

function draw() {
  ellipse(50, 50, 80, 80);
}
This line of code means "draw an ellipse, with the center 50 pixels over from the left and 50 pixels down from the top, with a width and height of 80 pixels".
Save your sketch and refresh your page view in your browser. If you've typed everything correctly, you'll see this appear in the display window:

Comments

Post a Comment

Popular posts from this blog

[OpenCV] What is gocv?

Image
GoCV           The GoCV package provides Go language bindings for the  OpenCV 4  computer vision library. The GoCV package supports the latest releases of Go and OpenCV (v4.0.0) on Linux, macOS, and Windows. We intend to make the Go language a "first-class" client compatible with the latest developments in the OpenCV ecosystem. GoCV also supports  Intel OpenVINO . Check out the  OpenVINO README  for more info on how to use GoCV with the Intel OpenVINO toolkit. How to use Hello, video This example opens a video capture device using device "0", reads frames, and shows the video in a GUI window: package main import ( " gocv.io/x/gocv " ) func main () { webcam , _ := gocv. OpenVideoCapture ( 0 ) window := gocv. NewWindow ( " Hello " ) img := gocv. NewMat () for { webcam. Read (&img) window. IMShow (img) window. WaitKey ( 1 ) } } Face detect This is a more complete example that opens a v...
Read more

[OpenCV] Chapter01-05 Working with UI elements such as scrollbars in OpenCV window

Image
Working with UI elements such as scrollbars in OpenCV window Source Code package main import ( "log" "gocv.io/x/gocv" ) func main() { windowForTrackbar := gocv.NewWindow("Trackbar Window") defer windowForTrackbar.Close() trackbarR := windowForTrackbar.CreateTrackbar("R", 255) trackbarG := windowForTrackbar.CreateTrackbar("G", 255) trackbarB := windowForTrackbar.CreateTrackbar("B", 255) trackbarA := windowForTrackbar.CreateTrackbar("A", 10) mat := gocv.NewMatWithSize(300, 300, gocv.MatTypeCV8UC3) log.Println("-----------------------") log.Println("Rows:", mat.Rows()) log.Println("Cols:", mat.Cols()) for { // BGR blue := float64(trackbarB.GetPos()) green := float64(trackbarG.GetPos()) red := float64(trackbarR.GetPos()) alpha := float64(trackbarA.GetPos()) / 10 log.Println("-----------------------") log.Println("blue:", blue) log....
Read more

[OpenCV] How to set up gocv

This page has information on how to install and use GoCV on macOS. Installing Install the GoCV package: go get -u -d gocv.io/x/gocv You can install OpenCV 4.0.0 using Homebrew. If you already have an earlier version of OpenCV (3.4.x) installed, you should probably remove it before installing the new version: brew uninstall opencv You can then install OpenCV 4.0.0: brew install hybridgroup /tools/ opencv This new Homebrew recipe will install only OpenCV 4.0.0 without all of the Python dependencies. pkgconfig Installation pkg-config is used to determine the correct flags for compiling and linking OpenCV. You can install it by using Homebrew: brew install pkgconfig How to build/run code Once you have installed OpenCV, you should be able to build or run any of the command examples: go run ./ cmd /version/main.go The version program should output the following: gocv version : 0 .18 .0 opencv lib version : 4 .0 .0 Cache builds If you are running a ve...
Read more