Modifying the example from the reference:

function setup() {
  ellipse(0, 50, 33, 33); // Left circle
  var c = color(204, 153, 0);

  push(); // Start a new drawing state
  strokeWeight(10);
  c.setAlpha(100);
  fill(c);
  translate(50, 0);
  ellipse(0, 50, 33, 33); // Middle circle
  pop(); // Restore original state

  fill(c);
  ellipse(100, 50, 33, 33); // Right circle
}

The right circle fill(c) is also alpha adjusted, even though outside push/pop. Is this by design?

I have this code where I put several images (100) and load them, i've managed to load them in my html page. And as expected they all show after each other. How could I make the appear one by one over time. So that every 10 second I get a new image on the same position. All images are the same size. So the centering should not be a problem.

my sketch.js has this for now

let faces = [];
//var canvas;

function preload(){
  for (let i = 0; i < 3; i++) {
    faces[i] = createImg('images/' + i + '.jpg');
  }
}

function setup() {
  createCanvas(800, 900);
  //canvas = createCanvas(window.innerWidth, window.innerHeight);

  // put setup code here
}

function draw() {

  image(faces, 0, 0);
  // put drawing code here
}
/*
window.onresize = function(){
  var w = window.innerWidth;
  var h = window.innerHeight;
  cansvas.size(w,h);

}
*/

It should be like an automated slideshow. 

function setup(){ createCanvas(600,600); var x = random(0,width); var y = height-50; var speed = 1; } function draw(){ clear(); y -= speed; rect(x,y,200,20); }

Now,as the rect() keeps moving to the top,I want new rect() to appear from the bottom after a certain time say 1000ms. I tried to keep track of the history of the first rect() in a vector and I drew another rect from the vector. but it draw rect() but none of the rect() is moving to top. I am sure I am missing something here,and would like to someone to point that out for me.

Here is what I have tried so far.

function rectangles(x,y,w,h,speed){
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.speed = 1;

this.records = [];

    this.getAllPaths = function(){
       this.records.push(createVector(this.x,this.y));
    }

    this.drawRectangles = function(){
      this.y -= this.speed;
      rect(this.x,this.y,this.w,this.h);
    }
}

function setup(){
  createCanvas(window.innerWidth,window.innerHeight);
 }

function draw(){
   background(255);
   var r = new rectangles(random(0,width) , height-50 , random(50,300) , 10);
   r.getAllPaths();
   r.drawRectangles();
}

var d = dist(v1.x, v1.y ,v2.x, v2.y); i got a error message cannot read property 'x' of undifined

        var bubles=[]; 
        var reached = [];
        var unreached=[];
        function setup() {
           createCanvas(410,410);  
        }

        function mousePressed(){
          var v = createVector(mouseX,mouseY);
          ellipse(v.x,v.y,20,20);
          bubles.push(v);
        }

        function draw() {
            background(200,200,200);

            for(var i=0;i<bubles.length;i++){
              unreached.push(bubles[i]);
            }

            reached.push(unreached[0]);
            unreached.splice(0,1); 

            while(unreached.length>0){
               var min=1000;
              var rIndex;
              var uIndex;
              for(var i=0; i<reached.length;i++){
                for(var j=0; j<unreached.length;j++){
                  var v1 = reached[i];
                  var v2 = unreached[j];
                  var d = dist(v1.x, v1.y ,v2.x, v2.y);
                  if(d<min){
                    min=d;
                    rIndex=i;
                    uIndex=j; 
                  }
                }
              }
              line(reached[rIndex].x,reached[rIndex].y,unreached[uIndex].x,unreached[uIndex].y);  
              reached.push(unreached[uIndex]);
              unreached.splice(0,uIndex);
            }
        }

var ship;
var flowers = [];
var drops = [];

function setup() {
  createCanvas(600, 400)
  ship = new Ship();
  drop = new Drop(width/2, height/2);
  for (var i = 0; i < drops.length; i++) {
    flowers[i] = new Flower(i*80+80, 60);
 }
}
function draw() {
  background(51)
  ship.show();

    for (var i = 0; i < drops.length; i++) {
    drops[i].show();
    drops[i].move();
  }

  for (var i = 0; i < flowers.length; i++) {
    flowers[i].show();
  }
}

function keyPressed() {
  if (key === ' ') {
    var drop = new Drop(ship.x, height);
    drops.push(drop);
  }



  if (keyCode === RIGHT_ARROW) {
    ship.move(1);
  } else if (keyCode === LEFT_ARROW) {
    ship.move(-1);
  }
}



function Ship() {
  this.x = width/2;


  this.show = function() {
    fill(255);
    rectMode(CENTER);
    rect(this.x, height-20, 20, 60);
  }

  this.move = function(dir) {
    this.x += dir*30;
  }
}

function Flower(x, y) {
  this.x = x;
  this.y = y;

  this.show = function() {
    fill(255, 0, 200);
    rectMode(CENTER);
    ellipse(this.x, this.y, 60, 60);
  }
}

function Drop(x, y) {
  this.x = x;
  this.y = y;

  this.show = function() {
    noStroke();
    fill(1, 0, 255);
    rectMode(CENTER);
    ellipse(this.x, this.y, 16, 16);
  }

  this.move = function() {
    this.y = this.y - 5;
  }
}

function mousePressed(){


   for  (var j = bang.length-1; j >= 0; j--) {


       var distance = dist(mouseX, mouseY, bang[j].x, bang[j].y); 

       if  (distance > bang[j].diameter){
          bang.push(new Bigbang(mouseX, mouseY,sounds[Math.round(random(sounds.length-1))]));
         } 
       else if (distance < bang[j].diameter) {
          bang.splice(bang[j], 1);
         }

         console.log("new bubble"+bang);   
    }
}

big cheers to anyone willing to help me solve this...I guess there is a slightly long-winded logical way around the problem but all of my attempts have failed so far.

var Shape;
var value = 0;
var value2 = 0;
var x;
var y;


function setup() {
    colorMode(HSB, width, height, 100);
createCanvas(500, 500);
Shape = new ball();


}

function mousePressed(){
 //If mouse is pressed outside sliding bar, add a shape. 
  if (mouseY > (height/2 + 40)  || ( mouseY < ( height/2 - 20))){
  for(var i = 0; i < 1; i++){
    balls.add(new Shape(mouseX, mouseY));  

    if (balls > 8) {
    balls.remove(0);
println(balls());
  }
}}
}

function draw() {
  background(51);

for (var i = Shape -1; i >= 0; i--) {
   // ball[i].move();
    ball[i].display();


    if(balls[i].isOffScreen()){
      balls.remove[i];

    }
}
}

function ball() {
  //An array for all the shapes
  this.balls = []; //initialize the array
this.x = x;
this.y = y;
this.display = function() {
 // stroke (255);
    fill(200, 252, 70);
    ellipse(this.x, this.y, 50, 50);
  }
}

I'm attempting to use String Lists to create a simple scrolling text display. Below is a test snippet to show the prob I'm having with String Lists. The For Loop moves each line up, starting from the top and moving down. It appears there is a bug or problem with the String List 'get' function. If you break inside the for loop that does the scroll, you see in the variables that 'line' keeps getting a NULL value - and I suspect this is why the scroll doesn't really work.

Are there any known problems with the String lists, or am I just not using it correctly?

Code follows:

String curmsg[];  // Holds current message loaded from data folder
StringList vp;      // Will hold each line to be displayed on the view port
String line;

int i, j, k, vpWdoSize = 21;



void setup() {
  size(500, 440); // Width, Height; X-coord, Y-coord
  vp = new StringList();
  setvp();
  frameRate(5);

}

void draw() {
  background(0);
  for ( i=vpWdoSize-1; i<=0; i--) {
    vp.set(i, vp.get(i-1));  // EG: Line 19 moves to line 20; then line 18 moves to 19, etc...
    text(vp.get(i),30,50);
  }
  vp.set(0,k++ +" new data");
  text(frameCount+" dummy",30,random(30,420));

}

void setvp(){
  for (i=0; i<vpWdoSize; i++) {
    vp.set(i,"mt-"+i );  // initialize the viewport array

  }
  k = 0;

push(); // Start head placement.
    translate( headPosition[0], headPosition[1] );
    rotate(headRotation);
    translate( -headPosition[0], -headPosition[1] );

    push(); // Start Eye1 placement.
      translate( eye1Position[0], eye1Position[1] );
      image(imgEye, 0, 0);
    pop(); // End Eye1 placement.

    push(); // Start Eye2 placement.
      translate( eye2Position[0], eye2Position[1] );
      image(imgEye, 0, 0);
    pop(); // End Eye2 placement.

    image(imgHead, 0, 0);
pop(); // End head placement.

So basically using a chain of push/pop matrix to place layers in relation to each other. Is there an easy way to find my global position?

If you did something like this,

push()
  translate(100, 100);
  a = retrieveGlobalPosition();
  push()
    translate(150, -66);
    push();
      translate(-27, 50);
      b = retrieveGlobalPosition();
    pop();
    c = retrieveGlobalPosition();
  pop();
pop();

then a should be [100, 100]. b should be [223, 84] and c should be [250, 34]. Or something along those lines. Hopefully that makes sense. So I want to be able to easily tell where an eye is located on the canvas and make calculations based on this position.

Is this possible? Or is there a better way to achieve this? Maybe using p5.Vector ?

This is fairly simple arithmetic when all you're doing is translating, and you could probably just keep track of your transforms via a variable. But once you start using rotate() as I did in my first example its going to get very complicated.

Eventually I think it would make sense to start parenting these objects to each other but my programming skills are not there yet.