var img;
var words = ['Beijing', 'Kunming', 'Pittsburgh','Alice']
var number = 1;

//preload image
function preload() {
    img = loadImage('https://i.imgur.com/QwF6omd.jpeg');
}

function setup() {
    createCanvas(400, 480);
    //resize image to fit canvas
    img.resize(width, height);
    frameRate(400);

    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
}

//draw image
function draw() {
    if(number==1) {
        drawWord();
    } else {
        drawPolygon(); 
    }
  
} 

function drawPolygon() {
    var x = floor(random(img.width));
    var y = floor(random(img.height));

    //picking color
    var pix = img.get(x, y);
    fill(pix, 128);

    //draw the random shape
    beginShape();
    vertex(x,y);
    vertex(x-(random(4,7)), y+(random(10, 25)));
    vertex(x-(random(4,7)), y+(random(25, 40)));
    vertex(x,y+(random(40, 60)));
    vertex(x+(random(4,7)), y+(random(25, 40)));
    vertex(x+(random(4,7)), y+(random(10, 25)));
    endShape();
    
}

function drawWord() {
    var x = floor(random(img.width));
    var y = floor(random(img.height));

    var pix = img.get(x, y);
    fill(pix, 128);
    textSize(random(3,15))

    //randomly pick words to draw
    text(words[int(random(0,4))], x, y)
}

function mousePressed() {
    //changing between two options
    number++;
    if(number > 2) {
      number = 1
    }
    background(255)
}

var nPoints = 400;

function setup() {
    createCanvas(400, 400); 
}


function draw() {
    background(0);
    
    // draw the curve
    push();
    translate(width/2, height/2);
    drawEpitrochoidCurve();
    pop();

    push();
    translate(width/2, height/2-20)
    drawCardioidCurve();
    pop();
}

//--------------------------------------------------
function drawEpitrochoidCurve() {
    // Epicycloid:
    // http://mathworld.wolfram.com/Epicycloid.html
    noFill();
    strokeWeight(1);

    //change color 
    if (mouseX< width/2) {
        stroke(0, 50, 233);
    } else {
        stroke(81, 211, 255);
    }

    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 50, 150);
    var b = map(y, 0, height, 1, 6);
    var h = constrain(mouseY, 50, 90);
    
    //draw Epicycloid
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h * cos(t * (a + b) / b);
        y = (a + b) * sin(t) - h * sin(t * (a + b) / b);
        vertex(x, y);
    }
    endShape(CLOSE);
    
}


//--------------------------------------------------
function drawCardioidCurve() {
    //Cardioid
    // https://mathworld.wolfram.com/Cardioid.html
    push();
    translate(x, y);
    rotate(radians(-90))
    var x = constrain(mouseX, 0, width);
    var y = constrain(mouseY, 0, height);
    var a = map(x, 0, width, 20, 80);
    var b = a/2;
   
    //change color
    if (mouseY > height/2) {
        fill(233, 50, 50, 200);
    } else {
        fill(169, 22, 22, 200);
    }

    //draw cardioid
    strokeWeight(1)
    stroke(244, 82, 255);
    beginShape();
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);

        x = a*cos(t)*(1-cos(t));
        y = a*sin(t)*(1-cos(t));
        vertex(x, y);
    }
    endShape(CLOSE);
    pop();
    
}

function setup() {
    createCanvas(300, 400);
    background(255);
}



function draw() {

    noStroke();
    background(242, 226, 204);

    //background leaf -- represent second
    if (second()%2 == 0) {
        fill(123, 142, 31);
    } else {
        fill(230, 143, 89)
    }

    push();
    translate(140, 200);
    rotate(radians(30))
    ellipse(-10, 0, 50, 15);
    rotate(radians(-60));
    ellipse(10, 30, 40, 10);
    pop();
    
    //base-flowerpot
    var pX = 150;
    var pY = 250
    var pHeight = 8;
    
    fill(187, 160, 133);
    beginShape();
    vertex(pX-50, pY);
    vertex(pX-60, pY+pHeight);
    vertex(pX-50, pY+2*pHeight);
    vertex(pX+50, pY+2*pHeight);
    vertex(pX+60, pY+pHeight);
    vertex(pX+50, pY)
    endShape();

    fill(170,119, 98)
    beginShape();
    vertex(pX-50, pY+2*pHeight);
    vertex(pX-30, pY+10*pHeight);
    vertex(pX+30, pY+10*pHeight);
    vertex(pX+50, pY+2*pHeight);
    endShape();


    //flower stem -- represents hour
    var sWidth = 10
    var sHeight= 50
    sHeight += hour();
    fill(123, 142, 31)
    beginShape();
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth, pY);
    curveVertex(pX-sWidth/2, pY-sHeight);
    curveVertex(pX-sWidth*2, pY-2*sHeight);
    curveVertex(pX-sWidth, pY-2*sHeight);
    curveVertex(pX+sWidth/2, pY-sHeight);
    curveVertex(pX, pY);
    curveVertex(pX, pY);
    endShape();

    //sunflower petal -- represent minute
    push();
    translate(pX-sWidth, pY-2*sHeight);
    noStroke();
    for (var i=0; i<minute(); i++) {
        rotate(radians(6));
        fill(252, 171, 1);
        ellipse(0, 20, 5, 65);
        fill(228, 121, 1);
        ellipse(0, 20, 3, 35);
    }

    //seeds
    fill(41, 5, 2);
    circle(0, 0, 60);
    fill(37, 22, 1);
    circle(0, 0, 30);
    fill(34, 28, 0);
    circle(0, 0, 20);
    pop();
    
    //Text -- represent second
    if (second() %2 == 0) {
        textSize(25);
        fill(254, 203, 1, 220);
        text('Have A Good Day!', 40, 40);
    } 
   
}

var x
var y
function setup() {
    createCanvas(600, 600);
    background(236, 233, 216);
}
 
function draw() {
    //background
    backgroundLine();

    //blue triangle
    for (var y = 50; y < height-20; y += 100) {
        for (var x = 50; x < width-20; x += 50) {
            BlineTriangle(x, y)
        }
    }  

    //pink triangle
    for (var y = 50; y < height-20; y += 100) {
        for (var x = 50; x < width-20; x += 50) {
            PlineTriangle(x, y)
        }
    } 

    //brown circles
    noStroke();
    for (var b = 50; b < height-20; b += 100) {
        for (var a = 50; a < width-20; a += 50) {
          circle(a, b, 7); 
          fill(167, 105, 54, 170) 
        }
    } 

    
}

function BlineTriangle(x, y) {
    var dist = 4
    for (var i = 0; i<=20; i += 2) {
        stroke(90, 135, 145);
        strokeWeight(0.75)
        dist += 4*sqrt(3)/2;
        line((x-i), (y+dist), (x+i), (y+dist))
    }
}

function PlineTriangle(x, y) {
    var dist = 4
    for (var i = 0; i<=20; i += 2) {
        stroke(232, 163, 147);
        strokeWeight(0.75)
        dist += 4*sqrt(3)/2;
        line((x+i), (y-dist), (x-i), (y-dist))
    }
}

function backgroundLine() {
    noStroke();
    fill(240, 70);
    for(var i = 0; i <= 750; i += 50) {
        rect(0, i, 750, 10);
    }
}