I am also trying to display each angle next to each point of inflexion. In the case of the elbow, I am trying to move the text with the elbow position along with the inflexion point. That works, but I cant find a method to keep the writing horisontal. It rotates with the first segment angle...

here is my function

thanks

void ArmDepiction()

{ ///////////////////////////Base orientation

fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(BaseAngRad), 0, 1)), 630, 1050); //text( "0", 85, 0);

strokeWeight(10); stroke(238,242, 0); noFill ();

// Form: arc(x, y, width, height, start, stop, type); arc(550, 1000, 100, 100, (PI/2), (BaseAngRad+(PI/2)), PIE); //stroke(#71B28F); //arc(100, 1000, 175, 175, 0, 2*PI, 0);

//drawArrow(100,160,50,130);

///////////////////////Arm Depiction strokeWeight(40); stroke(255, 160); strokeCap(ROUND);

float x, y;

x = 550; y = 800;

pushMatrix(); strokeWeight(40); segment(x, y, PI+ShoAngRad); strokeWeight(30); segment1(segLength, 0, PI+ElbowAngRad); // 120 is the starting point segment3(segLength, 0, (2*PI)+ElbowAngRad-0.58); // 100 is the segment length popMatrix();

translate(x, y); strokeWeight(10); strokeJoin(ROUND); beginShape(); vertex(-40, 0);

vertex(-65, segLength); vertex(65, segLength);

vertex(40, 0); endShape(CLOSE);

DisplayElAngle(x, y);

}

void segment(float x, float y, float a) { translate(x, y); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(ShoAngRad), 0, 1)), 30, 0); //text( "0", 85, 0); noFill ();

rotate(a); line(0, 0, segLength, 0); // 100 is the segment length

}

void DisplayElAngle(float x, float y) { translate(x, y); rotate(2PI); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown3 ); text( (nf(degrees(ElbowAngRad), 0, 1)), 20, -10); noFill (); //

} void segment1(float x, float y, float a) { translate(x, y); fill(201, 0, 211); // magenta //text("Y:", LS, spaceDown*3 ); text( (nf(degrees(ElbowAngRad), 0, 1)), 20, -10); noFill (); rotate(a); line(0, 0, segLength, 0); // 100 is the segment length // rotate(a);

}

void segment3(float x, float y, float a) { translate(x, y); rotate(a); line(0, 0, (segLength/5), 0); // 100 is the segment length

}

Circle[] circles;
int numCircles = 50;
int maxDistance;

void setup() {
  size(300, 300);
  smooth();

  // create an array and fill it with circles
  circles = new Circle[numCircles];
  for (int i=0; i< numCircles; i++) {
    circles[i] = new Circle(random(width), random(height), random(20, 90));
  }
}

void draw() {
  // clear background
  background(0, 0, 20);

  // update and display the circles
  for (int i=0; i< numCircles; i++) {
    circles[i].update(); 
    circles[i].display();
  }

  // define maximum distance
  maxDistance = mouseX;

  // look of the lines
  stroke(255, 100);
  strokeWeight(0.5);

  for (int i=0; i< numCircles; i++) {
    // compare circle to other circles
    for (int j=i+1; j< numCircles; j++) {
      // draw line if distance is below 'maxDistance'
      if (dist(circles[i].x, circles[i].y, circles[j].x, circles[j].y) < maxDistance) {
        line(circles[i].x, circles[i].y, circles[j].x, circles[j].y);
      }
    }
  }
}

class Circle {
  float x, y, dia;

  Circle(float x, float y, float dia) {
    this.x =x;
    this.y =y;
    this.dia = dia;
  }

  void update() {
    // code for movement here
    // this is just some random displacement
    x = x + random(-1, 1);
    y = y + random(-1, 1);
  }

  void display() {
    // code for drawing the circles
    noStroke();
    fill(60, 60, 190, 60);
    ellipse(x, y, dia, dia);
  }
}

that thoes this:

this code draws circles and points connected by lines. the position of the circles are defined by specific coordinates. Is it possible that a background image (by its pixels brightness) can place the center of the circles?

maybe something like that

thanks in advance

This is my code:

float inc = 0.04;

void setup() {
  size(640, 500);
}

void draw() {
  background(255);

  float xoff=0;
  float xoff2=0;

  xoff2 += inc;

  stroke(245, 10, 100);
  strokeWeight(1.5);

  for (float x = 0; x < width; x++) {

    float y = noise(xoff) * 200;
    point(x, y);

    float t = noise(xoff2) * 400;

    //i+=5 = the space between the points vertically
    for (float i = y; i < t; i+=5) {
      point(x, i);
    }

    xoff += inc;
    x = x + xoff + 4;
  }
}

But now I've noticed something weird. I don't know where exactly the problem is, but for some reason, the shapes are not being rendered with a weight 5 border, they render with the default weight of 1.

Here's the sketch and everything: https://jsfiddle.net/Tsskyx/64Lqudm7/ (the strokeWeight function is called at line 23).

(The program so far draws a Rubik's cube with the top layer randomly permuted and you can click to refresh it, though I'm planning to add more features to it.)

I'll be happy if anyone could figure this out for me. I really don't feel like rewriting the program in p5 right now.

Right now I have a sketch with hundreds of lines and they all are angular - I mean they not arcs but not horizontal or vertical either.

When I set a strokeWidth() less than 1, naturally as there is nothing smaller than a pixel they are displayed intermittently.

My sketch size is 1920,1080. I could increase the sketch size by 10 and naturally I could achieve the same visual output but it just feels like I should be able to render really thin lines within a 1920x1080 sketch. I wonder is there a novel way of doing it, really thin lines perfectly smoothly rendered?

Thank you very much.

For example I want my sketch look the same in Java and in Android mode. For this I have to use a strokeWeight that is proportional to displayDensity. Problem is the this variable is only available in Android mode. Similarly I only want to call size(width, height) in Java mode.

I can check for Android ...

if (System.getProperty("java.vendor") == "The Android Project") { strokeWeight(3*displayDensity) }

... but this will not compile because Java. In Javascript/Python this would just work because lazy evaluation and in C++ this could be done with #defines.

How do you do that in Processing/Java. Anybody knows a trick to make it work? Reflection module (looks crazy verbose)?

Let me know, Best,

import processing.video.*;

Capture video;

// A variable for the color we are searching for.
color trackColor; 

void setup() {
  size(640, 480);
  video = new Capture(this, width, height);
  video.start();
  // Start off tracking black
  trackColor = color(0);
}

void captureEvent(Capture video) {
  // Read image from the camera
  video.read();
}

void draw() {
  video.loadPixels();
  image(video, 0, 0);

//more higher more arger chance to find the colour 
  float worldRecord = 500; 

// seek for the closest color
  int closestX = 0;
  int closestY = 0;

// search every pixel
  for (int x = 0; x < video.width; x ++ ) {
    for (int y = 0; y < video.height; y ++ ) {
      int loc = x + y*video.width;
// define and showWhat is current color
      color currentColor = video.pixels[loc];
      float r1 = red(currentColor);
      float g1 = green(currentColor);
      float b1 = blue(currentColor);
      float r2 = red(trackColor);
      float g2 = green(trackColor);
      float b2 = blue(trackColor);

// Using euclidean distance to compare colors
      float d = dist(r1, g1, b1, r2, g2, b2); // We are using the dist( ) function to compare the current color with the color we are tracking.

      // If current color is more similar to tracked color than
      // closest color, save current location and current difference
      if (d < worldRecord) {
        worldRecord = d;
        closestX = x;
        closestY = y;
      }
    }
  }

  // trackcolour not more far than 20 
    if (worldRecord < 20) { 
    // Draw a circle at the tracked pixel
    fill(trackColor);
    strokeWeight(4.0);
    noStroke();
    ellipse(closestX, closestY, 60, 60);
  }
}

void mousePressed() {
  // store the colour from video and keep it tracked
  int loc = mouseX + mouseY*video.width;
  trackColor = video.pixels[loc];
}

let h = 0;
let k = 0;
let step = 0.05;
let r = 200;
let points = [];
let i = 0;
let forward = true;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(81);
  translate(width / 2, height / 2);
  noFill();
  strokeWeight(1);
  stroke(255);

  beginShape();
  for (let theta = TWO_PI; theta > PI; theta -= step) {
    let x = h + r * Math.cos(theta);
    let y = k - r * Math.sin(theta);
    vertex(x, y);
    points.push(createVector(x, y));
  }
  endShape();

  strokeWeight(10);
  stroke(0);
  point(points[i].x, points[i].y);
}

That shows a dot moving from one side of an arc to another. When it gets to the end, however it teleports back to the start. I want to make it swing back and forth on the arc. I have tried it using the length of the points array, but that seems to be massively overflowed and it contains duplicate points. Is there a way to do this, or a better way to do what I have done?

Here's a codepen: https://codepen.io/alexdaly/pen/pdjRvx

The objective is to build a function that returns the apprx value of PI, given 3 parameters:

• N (number of points "thrown")
• r (radius of the circumference)
• A boolean variable that determines if the simulation must be drawn or not.

If the simulation is drawn, there must be a circle in the center of the graphic window, and random points, it they land inside the circle, they must be BLUE, otherwise, they'll be RED.

Can someone please help me do this?

When I press the button again though, the code draws a default stroke weight over the thick pink stoke, without 'erasing' this thick pink stroke, whereas I would like the line to simply go back to: 'white' and 'default thickness of 1'.

Why doesn't the previous colored strokeWeight erase after the mousePressed-event? I'm very thankful for any advice!

Here's the code:

    boolean button = false; 
    int x = 50;
    int y = 50;
    int w = 100;
    int h = 75;

    void setup() {
      size(500,500);

    }

    void draw() {
      if (button) {
        stroke(#E55AD5);        
        strokeWeight(4);
        strokeJoin(ROUND);

    } else {
       stroke(255);
       strokeWeight(1); 

      }

      noFill();               
      rect(x,y,w,h);
    }

    void mousePressed() {
      if (mouseX > x && mouseX < x+w && mouseY > y && mouseY < y+h) {
        button = !button;
      }
    }

Here is an example.

How would this class be rewritten to avoid using PVector inheritance?

class Bullet extends PVector {
  PVector vel;

  Bullet(PVector loc, PVector vel) {
    super(loc.x, loc.y);
    this.vel = vel.get();
  }

  void update() {
    add(vel);
  }

  void display() {
    fill(0, 0, 255);
    ellipse(x, y, 3, 3);
  }
}

In the code below I have two observations and I am hopping to figure out if there is a way to solve them.

First {REN =P2D; maskImageNow=false;}

When REN is set to P2D, and maskImageNow=false, a white fill ellipse is drawn on top of a background full of nonFilled mini ellipses (background black and their stroke color is white). What I am observing is that the large main filled ellipse that follows the mouse has an artifact in its fill. You can see the borders of the circles underneath the Pgraphics object. See this image showing the problem:

_

***********EDIT: For the first case, it seems it is related to the order of drawing. In P2D, because of line 67, the white ellipse is drawn first and then the mini-bubbles on top. However, if you use JAVA2D you don't get the same effect. The ellipse and bubbles are on the same level/depth/layer. Or in other words, there is some edge blending between the mini-bubbles edge and the background in the gg (PGraphics) object which is not observed in the JAVA2D renderer version. Consider this part of the question solved and the observation is not an artifact.

Second {REN =JAVA2D; maskImageNow=true;}

When I set the REN to JAVA2D, when I apply the mask (maskImageNow=true), the edges of the ellipses are not smooth. However, when the mask effect is off, the background ellipses do not display that rough edges effect. Next image shows this observation:

Notice that during the screenshot process, the edges of the ellipses do not show that rough edge I was talking about (left image). Hopefully if you run the code you can see it directly on the sketch.

Can you reproduce them and do you know any way to fix them?

Kf

//REFERENCES: https://forum.processing.org/two/discussion/23093/brightness-pixel-doesnt-work#latest

//INSTRUCTIONS:
//         *--   Click to enable or disable the masking effect


//===========================================================================
// FINAL FIELDS:
final int maxTries=9000;
final int nCircles=2000;
final String REN=P2D;


//===========================================================================
// GLOBAL VARIABLES:

ArrayList<CircleStruct> c;
PGraphics pg;
PGraphics gg;
boolean maskImageNow=false;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void settings() {
  size(400, 600, REN);
  smooth(8);
}

void setup() {

  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  ellipseMode(RADIUS);

  fill(255);
  strokeWeight(2);

  pg = createGraphics(width, height, REN);
  //pg.smooth(4);

  c=new ArrayList<CircleStruct>();
  gg=createGraphics(width, height, REN);  
  //gg.smooth(4);
  fillWithCircles(nCircles);
  gg.beginDraw();  
  gg.noFill();
  gg.stroke(255);
  gg.strokeWeight(2);
  gg.clear();
  for (CircleStruct pc : c) {
    pc.draw(gg);
  }
  gg.endDraw();
}



void draw() {
  background(0);

  pg.beginDraw();
  pg.clear();
  pg.ellipse(mouseX, mouseY, 100, 100);
  pg.endDraw();

  image(pg, 0, 0);

  if (maskImageNow) 
    gg.mask(pg);

  image(gg, 0, 0);
}

void keyReleased() {
}

void mouseReleased() {
  maskImageNow=!maskImageNow;  //Toggle action

  if (maskImageNow==false) {
    gg.beginDraw();
    gg.noFill();
    gg.stroke(255); 
    gg.strokeWeight(2);
    gg.clear();
    for (CircleStruct pc : c) {
      pc.draw(gg);
    }
    gg.endDraw();
  }
}



//===========================================================================
// OTHER FUNCTIONS:

void fillWithCircles(int n) {
  noFill();
  stroke(255);
  c.clear();  

  for (int i=0; i<n; i++) {
    CircleStruct cir=new CircleStruct();
    boolean overlap=true;
    int ntries=0;
    while (overlap && ntries<maxTries) {
      overlap=false;
      ntries++;
      for (CircleStruct pc : c) {
        if (cir.overlaps(pc)) {
          overlap=true;
          cir.reGenerateCircle();
          break;
        }
      }
    }

    if (ntries>=maxTries) {
      println("Stop trying placing circles at counter " + i + " out of "+n);
      break;
    }

    c.add(cir);
  }
}


class CircleStruct {

  final static int minRad=3;
  final static int maxRad=12;

  float w;
  float h;
  float rad;

  CircleStruct() {
    generateCircle();
  }

  void generateCircle() {
    w=random(width);
    h=random(height);
    rad=random(minRad, maxRad);
  }

  void reGenerateCircle() {
    generateCircle();
  }

  void draw() {
    ellipse(w, h, rad, rad);
  }

  void draw(PGraphics gg) {
    gg.ellipse(w, h, rad, rad);
  }

  boolean overlaps(CircleStruct ptrC) {
    return overlaps(ptrC.w, ptrC.h, ptrC.rad);
  }

  boolean overlaps(float _w, float _h, float _r) {
    return dist(w, h, _w, _h)<rad+_r;
  }

/** Program description: 27. Make a function myOwnRect(topLeftX, topLeftY, bottomRightX, bottomRightY)
 that only uses point() as output function (i.e. not line() or rect() etc.). 
 Add a parameter for the line thickness.
 */

but I am stuck in the last part. Can someone help me?

void setup()
{
  size(600, 600);
  background(#ff9999);
  stroke(#0000ff);
  noLoop();
}

void myOwnRect(int tx, int ty, int bx, int by, int thickness)//(topLeftX, topLeftY, bottomRightX, bottomRightY(topLeftX, topLeftY, bottomRightX, bottomRightY)
{
  for (int i=tx; i<=bx; i++)   
  {
    for (int j=ty; j<=by; j++)
    {
      if (i==tx || i==bx || j==ty || j==by)
      { 
        point(i, j);
      }
    }
  }
}
void draw()
{
  myOwnRect(10, 10, 20, 20, 1);
  myOwnRect(10, 100, 250, 250, 3);
  myOwnRect(200, 200, 350, 350, 6);
  stroke(#00ff00);
}

How can I stop a random line? I would like to use it as a background when my canvas is filled with colors. After that I would like to draw a ellipse with mouseClicked.

int value = 0;
boolean isEllipse = true;

void setup() {
size(800,600);
noFill();
}

void draw() {
strokeWeight(8);
stroke(59,145,234);
float distance_top = random(800);
line(0,distance_top, 800,distance_top);

if(isEllipse) {
ellipse(650, 650, 20, 20);
}

else{
rect(800, 600, 0, 0);
}
};

void mouseClicked(){
stroke(0);
ellipse(100, 100, 50, 50);
if (value == 0 ) {
value = 255;
}
else {
value = 0;
}
}

If I use strokeCap(ROUND) and then draw lines in P3D mode after I have called "size(1920,1080,P3D);" the line ends are square:

size(1920,1080,P3D);

...

stroke(160 , 30, 155 );

strokeWeight(strokeweight1);

strokeCap(ROUND);

line(x1,y1, Zcoord, x2,y2, Zcoord );

Am I missing a command? Could it be that Round-ended lines are not supported in 3D?

Thanks!

Please have a look at this sketch. http://codepen.io/edhebert/pen/GraYLZ?editors=0010

I'm drawing the stem (line) prior to the petals (which are drawn with a rotation). Yet the line appears atop the petals (but beneath the yellow flower center, which is drawn at the end of sketch.)

Note the noLoop() call that's commented out in setup(). If I uncomment that, the sketch draws as expected, with the stem behind the petals.

Here's the code, for those who don't feel like looking at the codepen:

    var petal_angle = 0;

    function setup() {
        createCanvas(windowWidth, windowHeight);
        background(0);
        // noLoop();
    }

    function draw() {

        //make center of canvas the 0, 0 origin
        translate(width / 2, height / 2);

        var petal_color = color(128, 212, 255);

        //define one petal as an object
        var petal = {
            x: 120,
            y: 0,
            petal_width: 150,
            petal_height: 75
        }

        //draw stem
        stroke(0,128,0);
        strokeWeight(20);
        line(0, 0, 0, height / 2 - 50);

        fill(petal_color);
        noStroke();

        push();
        for (petal_angle; petal_angle < 360; petal_angle += 45) {
            rotate(radians(petal_angle));
            ellipse(petal.x, petal.y, petal.petal_width, petal.petal_height);
        }
        pop();

        //draw center of flower on top of petals
        fill(255, 255, 0);
        ellipse(0, 0, 130, 130);

    }

    var sommet = [];

    function setup() {
      createCanvas(400, 400);
      for(var i = 0; i < 4; i++)
      {
        sommet[i] = new Sommet();
      }
    }
    function draw() {
      background(100);
      for(var j = 0; j < sommet.lenght; j++)
      {
        sommet[j].display();
      }
    }
    function Sommet() {
      this.x = random(0, width);
      this.y = random(0, height);

      this.display = function()
      {
        strokeWeight(10);
        stroke(255);
        point(this.x, this.y);
      }
    }

Thank you for helping me btw.

I modified one of the examples on this page to test it:

https://p5js.org/reference/#/p5/blendMode

Here's my code. Am I doing something wrong or did I discover a bug?

background(0);
blendMode(REPLACE);
strokeWeight(30); // will work with a stroke weight of 1 as well - 30 is easier to see.
stroke(255);
line(25, 25, 75, 75);
stroke(0);
line(25, 25, 75, 75);

New to the forum/community. I have been learning a ton with p5js (and processing)! I have a question about clicking and dragging objects in an array. The click and drag seems to be working, but I'm not getting all my visual feedback. My stroke isn't changing on the click and drag (highlight effect). Am I missing something obvious? Or is this not the best way to get click and drag behavior working? (*This is an adaptation of click and drag from the processing site). Code below:

    var boxes = [];

    function setup() {
      createCanvas(500,500);
      for(var i=0; i<20; i++){
        boxes.push(new Box(random(255),random(10,30)));
      }
    }

    function draw() {
      background(0,200,200);
      for(var i = 0; i<boxes.length; i++){
        boxes[i].show();
      }
    }


    function mousePressed() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].boxover ) {
            boxes[i].locked = true;
            strokeWeight(4);
            stroke(0, 150, 255);
            print("mouse is pressed")
        } else {
            noStroke();
            boxes[i].locked = false;
            print("mouse isn't pressed")
        }
        boxes[i].xoffset = mouseX - boxes[i].xpos;
        boxes[i].yoffset = mouseY - boxes[i].ypos
        print(boxes[i].locked);
      }
    }

    function mouseDragged() {
      for(var i = 0; i<boxes.length; i++){
        if (boxes[i].locked) {
            boxes[i].xpos = mouseX - boxes[i].xoffset;
            boxes[i].ypos = mouseY - boxes[i].yoffset;
        }
      }
    }

    function mouseReleased() {
      for(var i = 0; i<boxes.length; i++){
        boxes[i].locked = false;
      }
    }

//Box Constructor

function Box(tempColor,tempSize) {
    this.c = tempColor
    this.xpos = random(width);
    this.ypos = random(height);
    this.boxsize = tempSize;
    this.boxover = false;
    this.locked = false;
    this.xoffset = 0;
    this.yoffset = 0;
    rectMode(RADIUS);

    this.show = function() {
        if (mouseX > this.xpos - this.boxsize && mouseX < this.xpos + this.boxsize &&
            mouseY > this.ypos - this.boxsize && mouseY < this.ypos + this.boxsize) {
            this.boxover = true;
            fill(255);
        } else {
            this.boxover = false;
            noStroke();
            fill(this.c);
        }
        rect(this.xpos, this.ypos, this.boxsize, this.boxsize,7);
    };
}

Any insights and links to other materials is greatly appreciated. Thanks!

I am pretty new to programming and I'm using p5 so it would be amazing if you could help me out. Basically I would like to create a drawing app, I've managed to create really simple drawing functions but I have a few questions and I'm not sure how to go about it. I know my questions aren't that specific yet - If you could just refer me to the right references to look at, that would help me a lot.

1. Would it be possible to have an image of a Sketchbook laying on a desk as my background and only let the user draw on the actual book (not the rest of the background)?

2. How can I create different drawing tools (like pen, pencil etc.) that can be activated by clicking on an icon/image.

3. Is it possible to let someone draw something and then add filters to it. (editing the finished drawing)

4. Is there a way of including buttons, that let someone share what they've drawn on the canvas on Twitter, Facebook etc.

Thanks a lot, Elisa

void draw() {
  background(#FFFAFA);

strokeWeight(5);
fill(255);
rect(70,60,800,470,0,105,105,0);
//resizes the image and fills a rectangle shape
PImage static1 = loadImage("static.jpg");
static1.resize(700, 463);
image(static1, 73, 64);

}

function preload() { img = loadImage("bubbleimg.png")

} function setup() { createCanvas(600,620)

}

function draw() { image(img,0,0)

img.resize(600,620)

stroke(0) strokeWeight(4); textFont("stencil") fill(255); textSize(46); text(header[0],46,59);

ellipseMode(CENTER); stroke(5,0,0) fill(55,120,260) strokeWeight(5);

var space = dist(mouseX, mouseY,296,194) if (space<100 ) { buttonhover = true;} else { buttonhover = false; }

if (buttonhover === true) {
  fill(0,255,0);}

ellipse(300,200,200,200);
stroke(0)
  textFont("stencil")

strokeWeight(4); fill(255); textSize(45); text(buttontext[0],230,211);

draw2()

}

function draw2() {

ellipseMode(CENTER); stroke(5,0,0) fill(55,120,260) strokeWeight(5);

var space = dist(mouseX, mouseY,296,450) if (space<100 ) { buttonhover2 = true;} else { buttonhover2 = false; }

if (buttonhover2 === true) {
  fill(255,0,0);
}

ellipse(300,450,200,200);

stroke(0)
  textFont("stencil")

strokeWeight(4); fill(255); textSize(45); text(buttontext[1],244,464);

}

function mousePressed() { if (buttonhover == true) { draw3() }

}

function draw3 () { remove() }

    void setup(){
      fullScreen();

    }
    int x1 = 0;
    int x2 = 0;
    int y1 = 0;
    int y2 = 0;


    void draw(){  
     x1 = width/2;
     x2 = 600;
     y1 = height/2;
     y2 = 600;

       stroke(0);
      strokeWeight(5);
      fill(0);
      arc(x1, y1, x2, y2, PI, PI*3.25); //Arc1

  stroke(0);
      strokeWeight(5);
      fill(#FFF700);
      arc(x1, y1, x2, y2, PI*2.25, PI*2.75);//Arc2

 fill(#FF0000);
       stroke(0);
      strokeWeight(5);
      arc(x1, y1, x2, x2, PI*2.75, PI*3.25);//Arc3

stroke(0);
      strokeWeight(5);
      fill(#FFFFFF);
      arc(x1, y1, x2, y2, TWO_PI-PI/4, PI*2.25);//Arc4
    }

    void mouseclicked(){
        x1 = (width/3 + (width/3 + width/4));
      y1 = height/3;
      x2 = 80;
      y2 = 80;
    }

I was surprised by a few things:

When I try to draw a line using a series of point calls, it looks very different than when I use line and neither one always does what I expected. (For example, drawing a simple line segment will look one way in isolation and then the entire line will look different if its drawn so that one of it's ends is adjacent to a different line.)

Can anyone point me to a source where I can learn what's happening on the pixel level with these functions.