Code viewer for World: Tutorial Code Train 1-11
// Cloned by Laura Campbell on 19 Aug 2022 from World "Tutorial 1.1" by "Coding Train" project 
// Please leave this clone trail here.
var circleX = 150;
var circleY = 0;
var circleZ = 0;
var r = 0;
var b = 225;
var r = 0;
var b = 225;

function setup() {
    createCanvas(600, 400);
    //background(150, 150, 200);
}

function draw() {
    
    ellipseMode(CENTER);
    rectMode(CENTER);
    
    stroke(255, 204, 0); strokeWeight(4);

    //Add in line 
    line(85, 275, 230, 275);
    
    //Colour in arc 
    let c = color('hsl(160, 100%, 50%)');
    fill(c); 
    //Add arc 
    arc(50, 50, 80, 80, 0, PI + QUARTER_PI);
    //Add in ellispe using ellipsemode
    //RADIUS and CENTER
    ellipseMode(RADIUS);
    fill(255);
    ellipse(50, 50, 30, 30); // Outer white ellipse
    ellipseMode(CENTER);
    fill(c);
    ellipse(50, 50, 30, 30); // Inner gray ellipse

    // Pill shaped rec centered
    rectMode(CORNER);
    fill(255);
    rect(155, 155, 400, 75, 80);
    
    // Add green trianglle
    fill(c);
    strokeWeight(1);
    triangle(430, 475, 458, 420, 486, 475);

    //Add Alien
    ellipseMode(CENTER);
    rectMode(CENTER);
  
    // Body
    fill(255, 0, 0);
    rect(240, 145, 20, 100);
  
    // Head 
    fill(0, 0, 255);
    ellipse(240, 115, 60, 60);
  
    // Eyes
    fill(0, 255, 0);
    ellipse(221, 115, 16, 32);
    ellipse(259, 115, 16, 32);
  
    // Legs
    line(230, 195, 220, 205);
    line(250, 195, 260, 205);
    


// *** Animations
// ellipse  
fill(c);
 
// Tutorial 7
//ellipse(mouseX, mouseY, 50, 50);

ellipse(circleX, circleY, circleZ, 80);
circleX = circleX + 1;
circleY = circleY + 1;
circleZ = circleZ + 0.5;

//Tutorial 10/11
  // background
  //col = mouseX;
  //col = map(mouseX, 0, 600, 0, 255);
  r = map(circleX, 0, 600, 0, 255);
  b = map(circleY, 0, 600, 255, 0);
  // background(col);
  background(r, 0, b);
  
  // ellipse
  fill(250, 118, 222);
  ellipse(circleX, 200, 64, 64);


           
}
// try mousePressed function 
function mousePressed() {
    background(150, 150, 200);
}