2022/11/17 (更新日: 2022/12/29)

【My Study Note】p5.js

JavaScript Programming

Codes

Circle

circle(x, y, d);

» More about this

Rectangle

rect(x, y, w, h);

» More about this

Fill

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220);
  fill(250, 0, 0);
  circle(300, 200, 300);
}

You can type RGB inside the “fILL()”.
» More about this

Triangle

triangle(x1, y1, x2, y2, x3, y3);

» More about this

Quad

quad(x1, y1, x2, y2, x3, y3, x4, y4);

» More about this

TextSize

textSize(theSize);

» More about this

Text

text(str, x, y);
// text('word', 10, 30);

» More about this

noStroke

noStroke();

Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen.
» More about this

Line

line(x1, y1, x2, y2);

» More about this

Text

text(str, x, y);
// text('word', 10, 30);

» More about this

noStroke

noStroke();

Disables drawing the stroke (outline). If both noStroke() and noFill() are called, nothing will be drawn to the screen.
» More about this

Arc

arc(x, y, w, h, start, stop);
// arc(50, 55, 50, 50, 0, PI);

» More about this

Stroke (ラインなどに色をつける)

stroke(255, 255, 255);

You can type the RGB inside the stroke().
» More about this

StrokeWeight

strokeWeight(weight);

» More about this

FrameRate

Specifies the number of frames to be displayed every second. For example, the function call frameRate(30) will attempt to refresh 30 times a second.

Ellipse (楕円)

ellipse(x, y, w, [h])
// ellipse(56, 46, 55, 55);

» More about this

Rotate

rotate(angle);
//rotate(30);

» More about this

Translate

translate(x, y);
// translate(30, 20);

Specifies an amount to displace objects within the display window. The x parameter specifies left/right translation, the y parameter specifies up/down translation.
» More about this

Push and Pop

You can set the individual functions with using “push() and pop()”.
» More about this

Mouse

circle(mouseX, mouseY, 100);
if (mouseIsPressed) {
  //Code
}

How to upload images

var images;

function preload(){
  images = loadImage('images/17.jpeg');
}

function setup() {
  createCanvas(600, 400);
}

function draw() {
  background(220);
  
  image(images, 0, 0, 600, 500);
}

Preload

preload()

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished.
» More about this

keyPressed

function keyPressed() {
// Code is here
}

The keyPressed() function is called once every time a key is pressed.
» More about this

keyCode

if (keyCode == 38) {
    y -= 10;
  }

Key number can be found from here. But also you can use words as well.
» More about this

random

random([min], [max])

» More about this

KeyIsPressed

The boolean system variable keyIsPressed is true if any key is pressed and false if no keys are pressed.
» More about this

dist

dist(x1, y1, x2, y2);

You can measure the distance between pointA and pointB.
» More about this

preload

function preload(){
  table = loadTable("Files/au.csv", "csv", "header");
}

Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way. If a preload function is defined, setup() will wait until any load calls within have finished.
» More about this

loadTable

loadTable(filename, [extension], [header]);

» More about this

get

table.get(i, 7)

You can access the key and get the value stored at that key.

au
例えば、この表だったら例のコードは、iコード目(forループを使用している)の7行目からvalueをgetしている。
» More about this

loadJson

loadJson ("Files/au.json");

Loads a JSON file from a file or a URL, and returns an Object.
» More about this

FrameCount

The system variable frameCount contains the number of frames that have been displayed since the program started. Inside setup() the value is 0, after the first iteration of draw() it is 1, etc.

createSlider

createSlider(min, max, [value], [step])

Creates a slider <input></input> element in the DOM. Use .size() to set the display length of the slider.

• min Number: minimum value of the slider
• max Number: maximum value of the slider
• value Number: default value of the slider (Optional)
• step Number: step size for each tick of the slider (if step is set to 0, the slider will move continuously from the minimum to the maximum value) (Optional)

value()

// Syntax
value()
value(value)

Either returns the value of the element if no arguments given, or sets the value of the element.

position()

position(x, y);

Sets the position of the element. If no position type argument is given, the position will be relative to (0, 0) of the window.

createButton

createButton(label, [value])

Creates a <button></button> element in the DOM. Use .size() to set the display size of the button. Use .mousePressed() to specify behavior on press.

• label String: label displayed on the button
• value String: value of the button (Optional)

mouseClicked

mouseClicked(funcation)

The mouseClicked() method is called once after a mouse button is pressed and released over the element.

createInput

createInput(value, [type])

Creates an <input></input> element in the DOM for text input. Use .size() to set the display length of the box.

• value String: default value of the input box
• type String: type of text, ie text, password etc. Defaults to text. Needs a value to be specified first. (Optional)

hide

hide()

Hides the current element. Essentially, setting display:none for the style.

show

show()

Shows the current element. Essentially, setting display:block for the style.

filter

// Syntax
filter(filterType, [filterParam])

• filterType Constant: either THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, ERODE, DILATE or BLUR. See Filters.js for docs on each available filter
• filterParam Number: an optional parameter unique to each filter, see above (Optional)

Filter Type

• THRESHOLD: Converts the image to black and white pixels depending if they are above or below the threshold defined by the level parameter. The parameter must be between 0.0 (black) and 1.0 (white). If no level is specified, 0.5 is used.
• GRAY: Converts any colors in the image to grayscale equivalents. No parameter is used.
• OPAQUE: Sets the alpha channel to entirely opaque. No parameter is used.
• INVERT: Sets each pixel to its inverse value. No parameter is used.
• POSTERIZE: Limits each channel of the image to the number of colors specified as the parameter. The parameter can be set to values between 2 and 255, but results are most noticeable in the lower ranges.
• BLUR: Executes a Gaussian blur with the level parameter specifying the extent of the blurring. If no parameter is used, the blur is equivalent to Gaussian blur of radius 1. Larger values increase the blur.
• ERODE: Reduces the light areas. No parameter is used.
• DILATE: Increases the light areas. No parameter is used.

loadSound

loadSound(path);

loadSound() returns a new p5.SoundFile from a specified path. If called during preload(), the p5.SoundFile will be ready to play in time for setup() and draw(). If called outside of preload, the p5.SoundFile will not be ready immediately, so loadSound accepts a callback as the second parameter.

play()

play()

Play an HTML5 media element.

volume()

// Syntax
volume()
volume(val)
// val: Number: volume between 0.0 and 1.0

Sets volume for this HTML5 media element. If no argument is given, returns the current volume.

setVolume()

setVolume(volume);

Multiply the output volume (amplitude) of a sound file between 0.0 (silence) and 1.0 (full volume).

createVideo

createVideo(src);

Creates an HTML5 <video> element in the DOM for simple playback of audio/video. Shown by default, can be hidden with .hide() and drawn into canvas using image().

image()

image(img, x, y, [width], [height])

sprit()

split(value, delim)

Parameters

• value String: the String to be split
• delim String: the String used to separate the data

The split() function maps to String.split(), it breaks a String into pieces using a character or string as the delimiter. The delim parameter specifies the character or characters that mark the boundaries between each piece. A String[] array is returned that contains each of the pieces.

JavaScript Programming

• Tweet
• LINE
• facebook