point()

Category:Drawing

Draws a point.

Use stroke() to color a point and strokeWeight() to change it's diameter. A point cannot be filled, therefore the fill() function will not affect the color of a point.

The default stroke() color is black and the default strokeWeight() is 1.

Examples

point(100, 300);

Jackson Pollock

Use the mouse pointer position to place random lines and points.

                            // Use the mouse pointer position to place random lines and points.
function draw() {
  stroke(rgb(randomNumber(0,255),randomNumber(0,255),randomNumber(0,255)));
  if (randomNumber(0,1)==1) {
    strokeWeight(randomNumber(1,5));
    line(World.mouseX, World.mouseY, World.mouseX+randomNumber(-50,50),World.mouseY+randomNumber(-50,50));
  }
  else {
    strokeWeight(randomNumber(10,30));
    point(World.mouseX, World.mouseY);
  }
}

Optical Illusion

Watch the X in the middle very closely. You should start to see a green dot that rotates around the circle - this dot is an illusion; then you should see the pink dots disappear.... but they haven't really gone. It is an after image effect, sometimes called a 'negative retinal afterimage' - move your head slightly, and the dots will reappear... amazing or what?

                            // Optical Illusion with Dots
var angle=0;
World.frameRate=12;
function draw() {
  background("white");
  strokeWeight(5);
  line(200,190,200,210);
  line(190,200,210,200);  
  stroke(rgb(255,0,255,0.5));
  strokeWeight(40);
  for (var i = 0; i <= 330; i=i+30) {
    if (i!=angle) {
      point(200+150*Math.cos(i*Math.PI/180), 200+150*Math.sin(i*Math.PI/180));
    }
  }
  angle=(angle+30)%360;  
}

Bullseye

Draw a bullseye.

// Draw a bullseye.
stroke("black");
strokeWeight(400);
point(200, 200);
stroke("lightgray");
strokeWeight(325);
point(200, 200);
stroke("blue");
strokeWeight(250);
point(200, 200);
stroke("red");
strokeWeight(175);
point(200, 200);
stroke("yellow");
strokeWeight(100);
point(200, 200);

Syntax

point(x, y)

Parameters

NameTypeRequired?Description
x Number The x-location in pixels of the point. Should be a number from 0 to 400, but negative numbers will draw the point to the left of the display and numbers greater than 400 will draw the point to the right of the display (possibly unseen).
y Number The y-location in pixels of the point. Should be a number from 0 to 400, but negative numbers will draw the point above the display and numbers greater than 400 will draw the point below the display (possibly unseen).

Returns

No return value. Outputs to the display only.

Tips

  • If you're having trouble getting a point to show up, make sure that noStroke() hasn't been called, and where you're trying to draw the point fits within the coordinates of the display (400 x 400).
  • Anything you draw will overlap previous things you drew. The sequence of drawing statements is usually important.
  • The default stroke is black, the default stroke weight is 1 pixel. Change the width and color of subsequent points using strokeWeight() and stroke().

Found a bug in the documentation? Let us know at documentation@code.org