Arc in layer. How to put an arc() in a layer

p5.js Coding Questions
1 
let botonito, indice=-1, segmentos=[], global_layer;
let a,b,c,d,e,f;

function setup() {
  
var ww = windowWidth, wh = windowHeight;
var wwg = ww/20, whg = wh/20;

let uno = [wwg*8,whg*2,wwg*8,whg,3.14,6.28],
    dos = [wwg*12,whg*4,wwg,whg*4,4.71,1.57],
    tres = [wwg*10,whg*5.75,wwg*4.5,whg,0,3.14],
    cuatro = [wwg*10,whg*5.75,wwg*4.5,whg,3.14,6.28],
    cinco = [wwg*12.25,whg*8.35,wwg,whg*5,4.71,1.57],
    seis = [wwg*8.25,whg*11,wwg*8,whg,0,3.14],
    siete = [wwg*4.75,whg*11,wwg,whg*0.75,3.14,6.28],
    ocho = [wwg*5.25,whg*13.5,wwg*0.5,whg*5,4.71,1.57],
    nueve = [wwg*4.75,whg*16,wwg,whg*0.75,0,3.14],
    diez = [wwg*8.5,whg*16,wwg*8.5,whg,3.14,6.28],
    once = [wwg*12.6,whg*17.6,wwg,whg*3.5,4.71,1.57],
    doce = [wwg*7.7,whg*19.25,wwg*10,whg,0,3.14],
    trece = [wwg*2.75,whg*10.5,wwg,whg*17.5,1.57,4.71],
    catorce = [wwg*10.25,whg*1.7,wwg*15,whg,3.14,6.28],
    quince = [wwg*16.65,whg*1.7,wwg*2,whg*1.15,0,3.14],
    dieciseis = [wwg*17.2,whg*1.7,wwg*3,whg,3.14,6.28],
    diecisiete = [wwg*18.6,whg*10.1,wwg,whg*17,4.71,1.57],
    dieciocho = [wwg*17.1,whg*18.65,wwg*2.85,whg,0,3.14],
    diecinueve = [wwg*15.75,whg*10.25,wwg,whg*17.25,1.57,4.71];

segmentos=[uno,dos,tres,cuatro,cinco,seis,siete,ocho,nueve,diez,once,doce,trece,catorce,quince,dieciseis,diecisiete,dieciocho,diecinueve];
  
  createCanvas(ww, wh);
  botonito = createButton('siguiente segmento');
  botonito.position(0,0);
  botonito.mousePressed(etapas);
  stroke(0);
  global_layer = createGraphics(ww, wh);
  global_layer.clear();
}

function draw() {
  background(210);
  noFill();
  noLoop();
  globy();
}

function etapas(){
  indice = (indice + 1) % 19;
  global_layer.strokeWeight(random(1,3));
  a = segmentos[indice][0];
  b = segmentos[indice][1];
  c = segmentos[indice][2];
  d = segmentos[indice][3];
  e = segmentos[indice][4];
  f = segmentos[indice][5];
  global_layer.arc(a,b,c,d,e,f);
}

function globy() {
  image(global_layer, 0, 0);
}

button * homework policy * asking questionsPreformatted text

1 Like
2

Hello @patricio1979,

Do you mean to put an arc on a layer above the createCanvas area/layer?

If so, this YouTube tutorial on Coding Train may be of interest:

:nerd_face:

1 Like
3

I saw that.

The problem might be in the way the variables are declared.
Perhaps each layer works with their specific set of variables. There’s no problem with the front or back. The problem is that it doesn’t draw the arc at all.

4

I could be wrong, but the way I’m reading your code is that your etapas function is being called to the createCanvas area? But shouldn’t etapas be called into the globy function?

5

That does not work either. The etapas function is for step sequencing only.
Perhaps is a nameSpace method…

6

Hmm, not sure what’s going on… I’ll be curious to hear other responses…

1 Like
7

You need to call etapas at the end of setup ()

8

Hello,

Change this:
noLoop();

to this:
// noLoop();

You may also want to use this:
global_layer.noFill();

Reference:
NoLoop() Reference

image
image502Ă—561 31.2 KB

:)

3 Likes
9

Beautiful, don’t understand why, but you nailed it. Thank you!!

2 Likes
10

Hello,

Take a look at the reference for noLoop()

:)