Category: SectionC

//jiaqiwa2; Jiaqi Wang; Section C
var portrait;
//I learned & referenced how to make a moving sin wave from this example:
//https://p5js.org/examples/math-sine-wave.html
let xspacing = 5; // Distance between each horizontal location
let w; // Width of entire wave
let theta = 0.0; // Start angle at 0
let amplitude = 20.0; // Height of wave
let period = 700.0; // How many pixels before the wave repeats
let dx; // Value for incrementing x
let yvalues; // Using an array to store height values for the wave
var num=8;

function preload(){

	portrait=loadImage("https://i.imgur.com/J6Im42B.jpg");
}


function setup() {
  createCanvas(460,400);   
  w = width + 16;
  dx = (TWO_PI / period) * xspacing;
  yvalues = new Array(floor(w / xspacing));
  frameRate(10);
    
}



function draw() {
  //image(portrait,0,0,460,400);
  background(250);
 //gradually "open" the portrait
 if(num<40){
   num+=0.5;
  }

 for(var i=0;i<num;i++){
 	var yUpper;
  var yLower;
  
  yUpper=height/2-i*5;
  yLower=height/2+i*5;
  amplitude+=1;
  if(amplitude>40){
    amplitude-=1;
  }  

  calcWave();
  renderWave(yUpper);
  renderWave(yLower);


  
  
    }
  
}

function calcWave() {
  // Increment theta (try different values for
  // 'angular velocity' here)
  theta += 0.02;

  // For every x value, calculate a y value with sine function
  let x = theta;
  for (let i = 0; i < yvalues.length; i++) {
    yvalues[i] = sin(x) * amplitude;
    x += dx;
  }
  
}


function renderWave(Start) {
  noStroke();
  
  // draw the wave with an ellipse at each location
  for (let x = 0; x < yvalues.length; x++) {
  	//y postition of the ellipse
  	var y=Start + yvalues[x];
  	//x position of the ellipse
  	var X=x * xspacing;
  	//find the corresponding pixel's location on my portriat
  	var Px=map(X,0,460,0,portrait.width);
    var Py=map(y,0,400,0,portrait.height);
    //check if this pixel is within the canvas.
    if(y>0 & y<400){
    	let pix = portrait.get(Px, Py);
        fill(pix);
        ellipse(X, y, 7, 7);

    }
    
  }
}

//Hayoon Choi
//hayoonc
//Section C

let img;
var click = 0; //initial click status

function preload() {
    img = loadImage('https://i.imgur.com/5Ka0n6z.jpg?1');
}

function setup() {
    createCanvas(330, 440);
    imageMode(CENTER);
    noStroke();
    background(255);
    img.loadPixels();
}

function draw() {
    //pointilizing the picture
    let pointillize = map(mouseX, 0, width, 3, 7);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    fill(pix);
    if (click == 0){ //drawing pumpkin initially
        pumpkin(x, y, pointillize, pointillize);
    } else if (click == 1){ //drawing ghost after one click
        ghost(x, y, pointillize, pointillize);
    } else { //drawing bat after two clicks
        bat(x, y, pointillize, pointillize);
    }
}

function pumpkin(x, y){
    //drawing the pumpkin
    push();
    translate(x, y);
    rect(5, -10, 2, 6, 70);
    ellipse(12, 0, 5, 9);
    ellipse(0, 0, 5, 9)
    ellipse(3, 0, 5, 11);
    ellipse(9, 0, 5, 11);
    ellipse(6, 0, 5, 12);
    pop();
}
function ghost(x, y){
    //drawing the ghost
    push();
    translate(x, y);
    ellipse(0, 0, 9, 10);
    ellipse(-5, 3, 5, 2);
    ellipse(5, 3, 5, 2);
    beginShape();
    curveVertex(-4.5, 0);
    curveVertex(-4.5, 0);
    curveVertex(-3, 4);
    curveVertex(-1, 6);
    curveVertex(2, 9);
    curveVertex(6, 11);
    curveVertex(5, 8);
    curveVertex(4, 4);
    curveVertex(4.5, 0);
    curveVertex(4.5, 0);
    endShape();
    pop();
}
function bat(x, y){
    //drawing the bat
    push();
    translate(x, y);
    ellipse(0, 0, 7, 10);
    wing(); //calling the right wing
    push()
    scale(-1, 1); //flipping the wing to draw the left wing
    wing();
    pop();
    triangle(2, -3, 1.9, -6, 0, -4.6);
    triangle(-2, -3, -1.9, -6, 0, -4.6);
    pop();
}

function wing(){
    //drawing the wing
    beginShape();
    curveVertex(3, -2);
    curveVertex(3, -2);
    curveVertex(6, -2);
    curveVertex(11, -3);
    curveVertex(13, 0);
    curveVertex(11, 0);
    curveVertex(10, 0.3);
    curveVertex(10, 2);
    curveVertex(8, 1);
    curveVertex(6.7, 0.7);
    curveVertex(6, 2);
    curveVertex(5, 1);
    curveVertex(4.3, 0.7);
    curveVertex(3.6, 0.9);
    curveVertex(3, 2);
    curveVertex(3, 2);
    endShape();
}

function mousePressed() {
    //making the shapes to change after mouse click
    if (click == 2) { 
        click = 0;
    } else {
        click += 1;
    }
    if (mouseButton === RIGHT) { //right click restarts the process
        background(255);
    }
}

//function that loads image of my face
function preload() {
    lucas = loadImage("https://i.imgur.com/M9dRkNS.png");
}

function setup() {
    //canvas is the size of the resized image
    createCanvas(850/2.29, 480);
    background(0);
    //stores pixels from the image
    lucas.loadPixels();
    //resizes image to keep proportions
    lucas.resize(850/2.29, 480);
    frameRate(100);
}

function draw() {
    //changes position of the circles and squares in the array
    var modifier = 10;
    //constrains the size of the circles and squares
    var restrict = map(mouseX, 0, width, 5, modifier*2);
    for(var i = 0; i < width; i++){
        for(var j = 0; j < height; j++){
            //obtains the pixel color at a given x and y of the picture
            var pixelColor = lucas.get(i*modifier, j*modifier);
            noStroke();
            //fills with the color from the pixel
            fill(pixelColor);
            //creates circles and squares that will replicate the image
            circle(i*modifier, j*modifier, random(restrict));
            square(i*modifier, j*modifier, random(restrict));
        }
    }
}