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

}

In the middle of the arc (outside the Circle) there should be the Label.

for (Rohtipps g : myRohtipp) {

    //PVector c = randomVector(mapped);
    //draw ellipse
    PVector loc = g.getLocation();
    float dia = g.getDiameter();
    //noFill();

    float[] data={g.getColdlead(), g.getWarmlead(), g.getHotlead()};

    //float[] data={50.0, 50.0, 50.0, 50.0};
    float sumdata=0;
    for (int i=0; i<data.length; i++) {
      sumdata+=data[i];
    }
    //println(sumdata);
    sumdata = 360/sumdata;

    for (int i=0; i<data.length; i++) {
      data[i] = sumdata*data[i];
    }
    float lastAngle=0;

    for (int i=0; i<data.length; i++) {
       float col=map(i, 0, data.length, 20, 255);
       fill(55, 150, col, col+100);
       noStroke();
       arc(loc.x, loc.y, dia, dia, lastAngle, lastAngle+radians(data[i]));
       lastAngle +=radians(data[i]);

    }

    //println(g.getKampagne()+" "+g.getColdlead()+" "+g.getWarmlead()+" "+g.getHotlead());
    //pieChart(dia, loc.x, loc.y, data);
    //ellipse(loc.x, loc.y, dia, dia);
    fill(40, 40, 40);
    //label positionieren
    textSize(11);


    float tw=(textWidth(g.getKampagne()))/2;
    text(g.getKampagne(), loc.x-tw, loc.y+30);

    //println(g.getAnzahl());
    ts=ts-2;
    textSize(ts);
    fill(30, 30, 30);
    text(g.getKampagne()+" "+g.getAnzahl(), 1400, g.getPositionText());
    textSize(24);
    //println(g.getColdlead());
  }

Thanks Theresa

waiting for your suggestions and trying my best for this...

regards ...

var y,x;
var sliderx,slidery;
const GoldenRatio = (1 + Math.sqrt(5)) / 2;


function setup() {
  createCanvas(1920/3*2,1080/3*2);
  background(255, 204, 0);
  sliderx = createSlider(0,1500,1200,1);
  console.log(x);
  console.log(y);
}

function draw() {
  x = sliderx.value();
  y = x / GoldenRatio;
  noFill();
  rect(1,0,x-2,y);
  GoldenRatioDraw(x,y);
}

function GoldenRatioDraw(x,y){
  if(x>0 && y>0){
  push();
  translate(y,y);
  line(0,0,0,-y);
  arc(0,-y,y * 2,y * 2,PI/2,PI);
  rotate(3* PI /2);
  translate(x-y);
  GoldenRatioDraw(y,x-y);
  pop();
  }
}

When I change the x value with the slider, I want it to change the dimension of the rectangle not to draw a new one and overlay the old one.(sorry for bad english :) )

Can you help me?

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

Thanks regardless

i'm trying to do some kind of QTE game with p5.js, i have a question :

How can I check if the red line is touching the black or the white arc ?

To move the red line i'm using the rotate function so i'm not sure how i should proceed.

I think what I want is to have coordinates of everything so i could compare but the rotate function kind of prevent that.

Here's the code : https://pastebin.com/WXvGbT9g

It's my first program using p5.js so sorry if it's a stupid question.

Thanks for your help !

(sorry for my english)

As you can see in this picture the arcs rotation, or start and stop values, change using the code as follows:

arcAngle1 = Math.sin(freq*i) * arcAngle1Span + arcAngle1Start;
arcAngle2 = Math.sin(freq*i) * arcAngle2Span + arcAngle2Start;` 

where:

arcAngle1Start = -HALF_PI;
arcAngle1Span = HALF_PI;
arcAngle2Start = HALF_PI;
arcAngle2Span= HALF_PI;

I am trying to figure out the values needed for it to sync so that the middle of the arc is always pointing in the so called direction of travel. It is possible that something else is wrong entirely and I'm thinking using the wrong method so here is the entire code for that reason: https://pastebin.com/nHFmHtYz

Thank you all in advance for any help.

I'm trying to reproduce this processing sketch in P5 js, how do I put the arc in? The code says an arc but it looks more like square. The processing code for the arc - arc(width/2, height/2, sze, sze, incr, incr+ PI/2.0); Can I use the same line in P5?

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

fill(0);

arc(400, 200, 80, 80, 0, PI); }

Arc[] arc = new Arc[60];

void setup() {
  size(1500, 700);
  for (int i = 0; i < arc.length; i++) {
    arc[i] = new Arc();
  }
}

void draw() {
  background(255);
  for (int i = 0; i < arc.length; i++) {
    arc[i].fall();
    arc[i].show();
  }
}



class Arc {
  float x;
  float y;
  float z;
  float yspeed;

  Arc() {
    x  = random(width);
    y  = random(-500, -50);
    z  = random(0, 20);

    yspeed  = map(z, 0, 20, 1, 20); 
}
void fall() {
    y = y + yspeed;
    if (y > 650) {
      stop();      
      yspeed = map(z, 0, 20, 4, 10);
    }
  }
  void show() {
    float thick = map(z, 0, 20, 1, 3);
    strokeWeight(5);

    stroke(0);
    arc(x, y, 20, 20, 0, PI);
  }
}

Who can make this change to the example on the website? Also, it is not clear which category this post ought to go into.

function draw() { arc(50,55,60,60,PI,PI); }

I thought nothing would appear. but It appears half circle like this.

I understand arc(x,y,width,height,start,stop);

Why start and stop are the same arguments but half circle appears?

    void setup()
    {
      colorMode(HSB, 360, 100, 100);
      background(100, 0, 100);
      ellipseMode(RADIUS);
      noFill();
      frame.setResizable(true);
    }

    void draw()
    {
      float R = 200;
      clear();
      for (int i = 0; i < 360; i++)
      {
        stroke(i, 100, 100);
        rect(5*i, 50, 5, 5);
      }
      pushMatrix();
      translate(width/2, height/2);
      strokeWeight(5);
      int FINE = 360*3;
      for (int i = 0; i < FINE; i++) {
        println(i + ", " + float(i)/FINE*360);
        stroke(float(i)/FINE*360, 100, 100);
        arc(-R/2, 0, R/2, R/2, 0, PI);
        rotate(2*PI*float(i)/FINE);  
      }
      popMatrix();
      //strokes
      strokeWeight(4);
      stroke(0, 0, 0);
      ellipse(width/2, height/2, R, R);
      translate(width/2, height/2);
      arc(-R/2, 0, R/2, R/2, 0, PI);
      rotate(2*PI/3);
      arc(-R/2, 0, R/2, R/2, 0, PI);
      rotate(2*PI/3);
      arc(-R/2, 0, R/2, R/2, 0, PI);

    }

I have been trying to figure out how to detect if my mouse (mouseX and mouseY) are within an arc. Its easy to do for something like a rectangle, where you can just specify the outside boundaries for the width and height in an "if" statement. But how can we do that for an irregular object with a curve in it, such as for an arc? I was thinking of something like a for loop where, since you have a slope of 1, the x and y should correspond in some way. But just comparing along the hypotenuse is too small of a detection range, and a for loop is resource intensive to do continually. I would need it to detect the mouse if it is anywhere within the arc, not just the outer border. I'm a newcomer to programming, so I would appreciate to keep things on the simpler side. Thank you!

Any ideas?

void setup()
{
  size(400,400);
  arc(0,0, 80, 80, 0, TWO_PI);
}

void loop ()
{
  background(140);

  //if(mouseX and mouseY are in the arc, then print something
}

Better yet, how can we detect if the mouse, or anything else for that matter, goes through that narrow opening for the arc, and goes into the arc, as displayed in the picture?

    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'm trying to use the arc() function but I want to make a semi-circle with a dashed or "tick'ed" border. I'm trying to make a digital gauge that is ticked based similar to an AEM digital gauge.

I could make a ton of arc()'s for each tick but that feels like a lot of processing power. Or I could make a colored background image and a single black arc() that works in reverse that covers the colored portion.

The RPM gauge is a good example of what I'm trying to build.

I've currently got a full arc() working as a gauge but I want to add tick marks.

https://github.com/i-make-robots/drawArcs

Designed to closely resemble the gcode G02 an G03 commands. The above sketch includes visualization routines.

void drawArc(float sx,float sy,float ex,float ey,float cx,float cy,boolean cw)

arc starts at (sx,sy) arc ends at (ex,ey) arc center is at (cx,cy) arc direction around center is clockwise if cw=true

start-center does not have to be the same distance as end-center, so sections of ellipses are easy to draw.

I hope you find this useful. Enjoy!

these are some of the results:

code:

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

void draw() {
  noFill();
  translate(width/2, height/2);
  drawEyeArcs(0,0, 50, 12);
}

void drawEyeArcs(int x, int y, int size, int segments) {

    // we draw double the segments, because we want to skip each odd one
    segments *= 2;

    for (int i = 0; i < segments; i++) {
        if (i % 2 == 1) {
            float start = TWO_PI / segments * i;
            float end = TWO_PI / segments * (i + 1);
            arc(0, 0, size, size, start, end);
        }
    }
}

int arcsize=600;
int shrinkorgrow;

 int diameter = 300;
 int[] angle2 = {70,60,100,60,70};
  float lastangle2 = 0;
int i=0;
void setup(){
  size(1000,1000);
  frameRate(5);
}



void draw() {
  //check the size of arc
  if(arcsize>299){
    shrinkorgrow=0;
  }else if (arcsize<101){
    shrinkorgrow=1;
  }arc(width/2, height/2, diameter, diameter, lastangle2, lastangle2+radians(angle2[i]));
 lastangle2 += radians(angle2[i]);  
  fill(9,123,178) ;
      }

Here's the code:

//Up to increase number of levels
//Down to decrease number of levels

int a=500;


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

int nlevels=5;
int ellipse=5;


void draw() {
  translate(0,20);
  background(255);
  noFill();



  if (nlevels<33) {
      strokeWeight(3);
    }
    else if  (nlevels<50) {
      strokeWeight(2);
    }
    else {
      strokeWeight(1);
    }
  print(nlevels);
  float dist=a/nlevels*0.8;
  //1
  line(a/2,(a/2)-dist/2,a/2,(a/2)+dist/2);
  line((a/2)-dist/2,a/2,(a/2)+dist/2,a/2);
  //2
  arc(a/2+dist/4,a/2-dist/2,dist/2,dist/2,PI,TWO_PI);
  for (int i=0;i<nlevels;i++) {
    arc(a/2-dist/2,a/2-dist/2,(dist*i),(dist*i),PI/2,PI);
    arc(a/2+dist/4,a/2-dist/2,(1.5*dist)+(dist*i),(1.5*dist)+(dist*i),PI,TWO_PI);
    arc(a/2+dist/2,a/2-dist/2,dist+(dist*i),dist+(dist*i),0,HALF_PI);
    line(a/2,(a+dist*(i-1))/2,a/2,(a+dist*i)/2);
    if (i%2==0) {
      if (i!=nlevels-1) {
        line(a/2-dist/2,a/2+(i*dist/2),a/2+dist/2,a/2+(i*dist/2));
      } else {
        line(a/2,(a+dist*i)/2,a/2+dist/2,(a+dist*i)/2);
      }
    }
  }

  fill(0);
  ellipse(mouseX,mouseY,20,20);

}

void keyPressed() {
  if (key == CODED) {
    switch (keyCode) {
      case UP:
      nlevels=min(83,nlevels+1);
      ellipse=min(83,ellipse+1);
      break;
      case DOWN:
      nlevels=max(5,nlevels-1);
      ellipse=max(5,ellipse-1);
      break;
    }
  }
}

arc(x1, y1, w1, h1, start1, stop1, PIE);
arc(x2, y2, w2, h2, start2, stop2, PIE);

... and I'd like to find out before I draw them if the arcs intersect/overlap/share pixels (using these terms synonymously). It's not enough to check the two ellipses because the ellipses can overlap long before the arcs overlap.

Would prefer some nice elegant math, but I do have one duct-tape idea:
Draw both arcs to some kind of off screen buffer using semi-transparent fill colors, then scan the buffer for pixels colored to reflect an overlap. Big buffer, so probably check the ellipses first, then just check pixels within the ellipses somehow.

Very grateful for any suggestions!

I need to cut the ellipse() out, but have the region to be transparent afterwards. (substract, cut out, delete region, what ever you would call it).

Is there an easy way to achive this task? The arc()s shall have different colors. What would I look for?

PGraphics parachute;

 void setup()
 {

  size(800,800);
   background(0);

   parachute = createGraphics(500,500);
   parachute.beginDraw();
   parachute.fill(255,0,0);
   parachute.arc(250,250,400,200, radians(180), radians(250));
   parachute.fill(0,255,0);
   parachute.arc(250,250,400,200, radians(250), radians(290));
   parachute.fill(0,0,255);
   parachute.arc(250,250,400,200, radians(290), radians(360));

   //cutout
   parachute.fill(0);
   parachute.ellipse(250,250,400,170);

   parachute.endDraw();

 }

void draw()
{
  image(parachute,200,200);
  image(parachute,150,100);

}

I am a designer not a programmer, so integers and arrays are a little alien to me. I have however got code from the GENERATIVE DESIGN book which I thought might work: http://www.generative-gestaltung.de/P_1_1_2_01 for a colour spectrum, http://www.generative-gestaltung.de/P_1_2_2_01 which loads the colour pixels from the image, however does not really arrange them, and uses the mouse x, y coords to tile the colours. It does seem to group similar hues together, which is perfect.

I think what I need is some kind of a cross between these two projects. So firstly, is something like this possible? And if so, am I looking in the right place? Thanks in advance. R

Is there any way that I can appear a arc just like the appear the line?

Thank a lot！ sorry for my poor processing knowledge and my poor english..