- Sep 9, 2022

ICM — Exercises

Updated: Feb 24

INTRO TO COMP MEDIA

SELF-PORTRAIT

Hair and face are not regular ellipses so have to be drawn with vertex. Positions of the vertex is mapped out with Adobe Illustrator first on a same-sized canvas then using mouse and info window to see X & Y values.

Eyes, eyebrows and blush are created in **function eye()** tilted at an angle. The other side is reflected by using scale(-1,1).

The background changes to a random colour when clicked. The random range is between 100-255 for lighter more pastel colours.

OPPOSITES

p5.js code

CHOICES

p5.js code

let studyHrs, socialHrs, workHrs, sleepHrs;
let totalhrs;

let study,social,work,sleep;
let studyImg, workImg, socialImg,sleepImg;

let button;

let x,y;


function setup() {
  createCanvas(400, 450);
  background(220);
  textSize(12);

  sleepHrs = createInput();
  sleepHrs.position(60, 40);
  sleepHrs.size(50);
  

  studyHrs = createInput();
  studyHrs.position(60, 70);
  studyHrs.size(50);
  
  
  socialHrs = createInput();
  socialHrs.position(60, 100);
  socialHrs.size(50);
  
  
  workHrs = createInput();
  workHrs.position(60, 130);
  workHrs.size(50);
  
  button = createButton("submit");
  button.position(150, 85);
  button.mousePressed(drawResult);
  
  textAlign(LEFT,TOP); 
  fill(0);
  text("ENTER THE NUMBER OF HOURS YOU SPEND ON:",20,20);
  
  text("Sleep",20,45);
  text("Study",20,75);
  text("Social",20,105);
  text("Work",20,135);
  
  studyImg = createImg('https://media.makeameme.org/created/clever-cat-it.jpg', 'studyImg');
  socialImg = createImg('http://www.craicindesigns.com/uploads/1/7/7/8/17783147/3529544_orig.jpg', 'socialyImg');
  workImg = createImg('https://c.tenor.com/M-ibWYQzmiIAAAAC/cat-cute.gif', 'workImg');
  sleepImg = createImg('https://imacrazycatlady.com/wp-content/uploads/2017/06/19657221_766908520137329_5023819691267760236_n.jpg', 'sleepImg');
  balanceImg = createImg('https://c.tenor.com/roTBuOK3MeMAAAAC/head-pat-good-boy.gif', 'balanceImg');
  
  studyImg.hide();
  socialImg.hide();
  workImg.hide();
  sleepImg.hide();
  balanceImg.hide();
}

function drawPie(){
  background(220);
  
  textAlign(LEFT,TOP); 
  fill(0);
  text("ENTER THE NUMBER OF HOURS YOU SPEND ON:",20,20);
  
  text("Sleep",20,40);
  text("Study",20,70);
  text("Social",20,100);
  text("Work",20,130);

  sleep = sleepHrs.value();
  totalHrs = 168 - sleepHrs.value();
  study = studyHrs.value();
  social = socialHrs.value();
  work = workHrs.value();
  stuff = totalHrs - study - social - work;
  
  let studyM = map(study, 0, totalHrs, 0, 2*PI);
  let socialM = map(social, 0, totalHrs, 0, 2*PI);
  let workM = map(work, 0, totalHrs, 0, 2*PI);
  
  x = 130;
  y = 280;
  
  fill("rgb(229,95,95)");
  arc(x, y, 200, 200, 0, studyM, PIE);
  rect(260,230,10,10);
  
  
  fill("rgb(187,187,255)");
  arc(x, y, 200, 200, studyM, studyM+socialM, PIE);
  rect(260,260,10,10);
  
  
  fill("rgb(221,221,100)");
  arc(x, y, 200, 200, studyM+socialM, studyM+socialM+workM, PIE);
  rect(260,290,10,10);
  
  
  fill("rgb(117,197,117)");
  arc(x, y, 200, 200, studyM+socialM+workM, 2*PI, PIE);
  rect(260,320,10,10);
  
  studyPer = round(study/totalHrs*100);
  socialPer = round(social/totalHrs*100);
  workPer = round(work/totalHrs*100);
  stuffPer = round(stuff/totalHrs*100);
  
  fill(0);
  text("Study "+studyPer+"%",300,230);
  text("Social "+socialPer+"%",300,260);
  text("Work "+workPer+"%",300,290);
  text("STUFF "+stuffPer+"%",300,320);
  
  // textAlign(CENTER,CENTER);
  // if (studyPer > 40){
  //   text("Chill, you're gonna to graduate",width/2,410);
  // } else if (socialPer > 40){
  //   text("PARTAAAAYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYYY",width/2,410);
  // } else if (workPer > 40){
  //   text("WARK WARK WARK WARK WARK",width/2,410);
  // } else if (stuffPer > 40){
  //   text("What do you have in your basement",width/2,410);
  // } else{
  //   text("Congrats! You're pretty good at time management.",width/2,410);
  // }
}

function drawResult(){
  background(220);
  
  textAlign(LEFT,TOP);
  textSize(12);
  fill(0);
  text("ENTER THE NUMBER OF HOURS YOU SPEND ON:",20,20);
  
  text("Sleep",20,40);
  text("Study",20,70);
  text("Social",20,100);
  text("Work",20,130);

  sleep = sleepHrs.value();
  totalHrs = 168 - sleepHrs.value();
  study = studyHrs.value();
  social = socialHrs.value();
  work = workHrs.value();
  
  x = width/2;
  y = 330;
  imageMode(CENTER);
  
  sleepPer = round(sleep/168*100);
  studyPer = round(study/totalHrs*100);
  socialPer = round(social/totalHrs*100);
  workPer = round(work/totalHrs*100);
  
  textAlign(CENTER,CENTER);
  text("Congrats, you are a",width/2,180);
  textSize(36);
  if (studyPer > 40){
    text("nerdy cat",width/2,210);
    image(studyImg, x,y,studyImg.height*width/studyImg.height/2.5, height/2.5);  
  } else if (socialPer > 40){
    text("party cat",width/2,210);
    image(socialImg, x,y,socialImg.height*width/socialImg.height/2.5, height/2.5);   
  } else if (workPer > 40){
    text("workaholic cat",width/2,210);
    image(workImg, x,y,workImg.height*width/workImg.height/2.5, height/2.5);   
  } else if (sleepPer > 40){
    text("sleepy cat",width/2,210);
    image(sleepImg, x,y,sleepImg.height*width/sleepImg.height/2.5, height/2.5);  
  } else {
    text("well balanced cat",width/2,210);
    image(balanceImg, x,y,balanceImg.height*width/balanceImg.height/2.5, height/2.5); 
  }
}

Test what kind of cat you are!

PATTERN

p5.js code

Wave line form using Perlin noise

TIME

p5.js code

let x, y;

function setup() {
  colorMode(HSB);
  createCanvas(600, 400);
  background(255);
}

function draw() {

  //Color mapping
  let colorHue = map(mouseY, 0, height, 40, 200,true);
  //saturation
  let colorX = map(mouseX, 0, width, 20, 90,true);
  //brightness
  let colorY = map(mouseY, 0, height, 20, 80,true);
  let colorY2 = map(mouseY, 0, height, 0, 100,true);
  
  background(colorHue, 90 - colorX, 100 - colorY);

  let mapH = map(0.5, 0, 1, 5, 200,true);
  let mapH2 = map(0.5, 0, 1, 5, 180,true);

  let mapCorner = map(mouseX, 0, width, 0, 20,true);
  let mapSW = map(mouseY, 0, height, 1, 25,true);


  leading = mapSW / 3;
  x = width / 2 - 220 - leading * 2;
  y = height / 2 - 180;
  w = 0;
  h = mapH + mapH2;
  c = mapCorner;

  sw = strokeWeight(mapSW);
  s = stroke(colorHue, 90 - colorX, 130 - colorY2);
  f = noFill();
  strokeJoin(ROUND);
  

    if (mouseY <= height * (1 / 24)) {
    x += 80 + leading;
    draw1(x, y, w, h, c);
  } else if (mouseY > height * (1 / 24) && mouseY <= height * (2 / 24)) {
    x += 80 + leading;
    draw2(x, y, w, h, c);
  } else if (mouseY > height * (2 / 24) && mouseY <= height * (3 / 24)) {
    x += 80 + leading;
    draw3(x, y, w, h, c);
  } else if (mouseY > height * (3 / 24) && mouseY <= height * (4 / 24)) {
    x += 80 + leading;
    draw4(x, y, w, h, c);
  } else if (mouseY > height * (4 / 24) && mouseY <= height * (5 / 24)) {
    x += 80 + leading;
    draw5(x, y, w, h, c);
  } else if (mouseY > height * (5 / 24) && mouseY <= height * (6 / 24)) {
    x += 80 + leading;
    draw6(x, y, w, h, c);
  } else if (mouseY > height * (6 / 24) && mouseY <= height * (7 / 24)) {
    x += 80 + leading;
    draw7(x, y, w, h, c);
  } else if (mouseY > height * (7 / 24) && mouseY <= height * (8 / 24)) {
    x += 80 + leading;
    draw8(x, y, w, h, c);
  } else if (mouseY > height * (8 / 24) && mouseY <= height * (9 / 24)) {
    x += 80 + leading;
    draw9(x, y, w, h, c);
  } else if (mouseY > height * (9 / 24) && mouseY <= height * (10 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw0(x, y, w, h, c);
  } else if (mouseY > height * (10 / 24) && mouseY <= height * (11 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw1(x, y, w, h, c);
  } else if (mouseY > height * (11 / 24) && mouseY <= height * (12 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw2(x, y, w, h, c);
  } else if (mouseY > height * (12 / 24) && mouseY <= height * (13 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw3(x, y, w, h, c);
  } else if (mouseY > height * (13 / 24) && mouseY <= height * (14 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw4(x, y, w, h, c);
  } else if (mouseY > height * (14 / 24) && mouseY <= height * (15 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw5(x, y, w, h, c);
  } else if (mouseY > height * (15 / 24) && mouseY <= height * (16 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw6(x, y, w, h, c);
  } else if (mouseY > height * (16 / 24) && mouseY <= height * (17 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw7(x, y, w, h, c);
  } else if (mouseY > height * (17 / 24) && mouseY <= height * (18 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw8(x, y, w, h, c);
  } else if (mouseY > height * (18 / 24) && mouseY <= height * (19 / 24)) {
    draw1(x, y, w, h, c);
    x += 80 + leading;
    draw9(x, y, w, h, c);
  } else if (mouseY > height * (19 / 24) && mouseY <= height * (20 / 24)) {
    draw2(x, y, w, h, c);
    x += 80 + leading;
    draw0(x, y, w, h, c);
  } else if (mouseY > height * (20 / 24) && mouseY <= height * (21 / 24)) {
    draw2(x, y, w, h, c);
    x += 80 + leading;
    draw1(x, y, w, h, c);
  } else if (mouseY > height * (21 / 24) && mouseY <= height * (22 / 24)) {
    draw2(x, y, w, h, c);
    x += 80 + leading;
    draw2(x, y, w, h, c);
  } else if (mouseY > height * (22 / 24) && mouseY <= height * (23 / 24)) {
    draw2(x, y, w, h, c);
    x += 80 + leading;
    draw3(x, y, w, h, c);
  } else if (mouseY > height * (23 / 24)) {
    draw2(x, y, w, h, c);
    x += 80 + leading;
    draw4(x, y, w, h, c);
  }
  
  ellipseS = mapSW;
  x += 80;
  drawDot(x, y, w, h, c, ellipseS);
  x += 80 + leading;
  draw0(x, y, w, h, c);
  x += 80 + leading * 2;
  draw0(x, y, w, h, c);
}


function draw1(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  line(60, 0 + y / 3, 60, 460 - y);
  pop();
}

function draw2(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(60, 460 - y);
  vertex(30, 460 - y);
  bezierVertex(10, 460 - y - c, 0, 450 - y - c, 0, 430 - y);
  vertex(0, 210);
  bezierVertex(0, 190 + c, 10 + c, 180, 30, 180);
  vertex(30, 180);
  bezierVertex(50 - c, 180, 60, 170 - c, 60, 150);
  vertex(60, 150);
  vertex(60, 30 + y / 3);
  bezierVertex(60, 10 + y / 3 + c, 50 - c, 0 + y / 3, 30, 0 + y / 3);
  vertex(0, 0 + y / 3);
  endShape();
  pop();
}

function draw3(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(0, 460 - y);
  vertex(30, 460 - y);
  bezierVertex(50 - c, 460 - y, 60, 450 - y - c, 60, 430 - y);
  vertex(60, 210);
  bezierVertex(60, 190 + c, 50 - c, 180, 30, 180);
  vertex(30, 180);
  vertex(10, 180);
  vertex(30, 180);
  bezierVertex(50 - c, 180, 60, 170 - c, 60, 150);
  vertex(60, 150);
  vertex(60, 30 + y / 3);
  bezierVertex(60, 10 + y / 3 + c, 50 - c, 0 + y / 3, 30, 0 + y / 3);
  vertex(0, 0 + y / 3);
  endShape();
  pop();
}

function draw4(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(60, 180);
  vertex(30, 180);
  bezierVertex(10 + c, 180, 0, 170 - c, 0, 150);
  vertex(0, 150);
  vertex(0, 0 + y / 3);
  endShape();
  line(60, 0 + y / 3, 60, 460 - y);
  pop();
}

function draw5(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(0, 460 - y);
  vertex(30, 460 - y);
  bezierVertex(50 - c, 460 - y, 60, 450 - y - c, 60, 430 - y);
  vertex(60, 210);
  bezierVertex(60, 190 + c, 50 - c, 180, 30, 180);
  vertex(30, 180);
  bezierVertex(10 + c, 180, 0, 170 - c, 0, 150);
  vertex(0, 150);
  vertex(0, 30 + y / 3);
  bezierVertex(0, 10 + y / 3 + c, 10 + c, 0 + y / 3, 30, 0 + y / 3);
  vertex(60, 0 + y / 3);
  endShape();
  pop();
}

function draw6(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(30, 460 - y);
  vertex(30, 460 - y);
  bezierVertex(10 + c, 460 - y, 0, 450 - y - c, 0, 430 - y);
  vertex(0, 180);
  endShape();

  beginShape();
  vertex(30, 460 - y);
  bezierVertex(50 - c, 460 - y, 60, 450 - y - c, 60, 430 - y);
  vertex(60, 210);
  bezierVertex(60, 190 + c, 50 - c, 180, 30, 180);
  vertex(0, 180);

  vertex(0, 150);
  vertex(0, 30 + y / 3);
  bezierVertex(0, 10 + y / 3 + c, 10 + c, 0 + y / 3, 30, 0 + y / 3);
  vertex(60, 0 + y / 3);
  endShape();
  pop();
}


function draw7(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();

  vertex(60, 460 - y);
  vertex(60, 30 + y / 3);
  bezierVertex(60, 10 + y / 3 + c, 50 - c, 0 + y / 3, 30, 0 + y / 3);
  vertex(0, 0 + y / 3);
  endShape();
  pop();
}

function draw8(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(30, 460 - y);
  bezierVertex(50 - c, 460 - y, 60, 450 - y - c, 60, 430 - y);
  vertex(60, 210);
  bezierVertex(60, 190 + c, 50 - c, 180, 30, 180);
  vertex(30, 180);
  bezierVertex(10 + c, 180, 0, 170 - c, 0, 150);
  vertex(0, 150);
  vertex(0, 30 + y / 3);
  bezierVertex(0, 10 + y / 3 + c, 10 + c, 0 + y / 3, 30, 0 + y / 3);
  endShape();
  beginShape();
  vertex(30, 460 - y);
  bezierVertex(10, 460 - y - c, 0, 450 - y - c, 0, 430 - y);
  vertex(0, 210);
  bezierVertex(0, 190 + c, 10 + c, 180, 30, 180);
  vertex(30, 180);
  bezierVertex(50 - c, 180, 60, 170 - c, 60, 150);
  vertex(60, 150);
  vertex(60, 30 + y / 3);
  bezierVertex(60, 10 + y / 3 + c, 50 - c, 0 + y / 3, 30, 0 + y / 3);
  endShape();
  pop();
}

function draw9(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord);
  beginShape();
  vertex(60, 180);
  vertex(60, 30 + y / 3);
  bezierVertex(60, 10 + y / 3 + c, 50 - c, 0 + y / 3, 30, 0 + y / 3);
  vertex(30, 0 + y / 3);
  endShape();
  beginShape();
  vertex(60, 460 - y);
  vertex(60, 180);
  vertex(30, 180);
  bezierVertex(10 + c, 180, 0, 170 - c, 0, 150);
  vertex(0, 150);
  vertex(0, 30 + y / 3);
  bezierVertex(0, 10 + y / 3 + c, 10 + c, 0 + y / 3, 30, 0 + y / 3);
  vertex(30, 0 + y / 3);
  endShape();
  pop();
}

function draw0(xCord, yCord, x, y, c) {
  push();
  translate(xCord, yCord)
  beginShape();
  vertex(30, 0 + y / 3);
  bezierVertex(50 - c, 0 + y / 3, 60, 10 + y / 3 + c, 60, 30 + y / 3);
  vertex(60, 430 - y);
  bezierVertex(60, 450 - y - c, 50 - c, 460 - y, 30, 460 - y);
  vertex(30, 460 - y);
  bezierVertex(10 + c, 460 - y, 0, 450 - y - c, 0, 430 - y);
  vertex(0, 30 + y / 3);
  bezierVertex(0, 10 + y / 3 + c, 10 + c, 0 + y / 3, 30, 0 + y / 3);
  endShape();
  line(60, 30 + y / 3, 0, 430 - y);
  pop();
}

function drawDot(xCord, yCord, x, y, c, s) {
  push();
  translate(xCord, yCord);
  let colorHue = map(mouseY, 0, height, 40, 200);
  let colorX = map(mouseX, 0, width, 20, 70);
  let colorY = map(mouseY, 0, height, 20, 80);
  fill(240 - colorHue, 80, colorY);
  strokeWeight(map(mouseY, 0, height, 1, 25));
  ellipse(30, 130 + y / 10, s, s);
  ellipse(30, 280 - y / 2.5, s, s);
  pop();
}

SIMULATION

p5.js code

Tribute (trauma) to Pcomp

PARTS OF A WHOLE

p5.js code

/*
Modified from ml5 Example
Facemesh example using p5.js
https://editor.p5js.org/ml5/sketches/Facemesh_Webcam

Facemesh keypoint diagram, scroll down and zoom in to see the numbers
https://github.com/tensorflow/tfjs-models/tree/master/face-landmarks-detection#keypoint-diagram
*/
let s = 50;
let m = 200;

let video;

let facemesh;
let modelLoaded = false;
let predictions = [];

function preload(){  
  webcam = createCapture(VIDEO);
  webcam.hide();
  // webcam.size(300,200);
}

function setup() {
  createCanvas(640, 480);

  video = createCapture(VIDEO);
  video.size(width, height);
  
    // image(webcam,0,0);
//   img.loadPixels();

  // maxFaces is the maximum number of faces detected in the input. Should be set to the minimum number for performance. Defaults to 10 unless you change it.
  // Other available options:
  // https://learn.ml5js.org/#/reference/facemesh
  let options = {
    maxFaces: 1,
  };

  facemesh = ml5.facemesh(video, options, modelReady);
  console.log("Model loading...");

  // An event that fills the global variable "predictions"
  // with an array every time new predictions are made
  facemesh.on("predict", function (results) {
    predictions = results;
  });

  // Hide the video element
  video.hide();
}

function modelReady() {
  console.log("Model ready!");
  modelLoaded = true;
}

function draw() {
  // background(220);
  image(webcam,0,0);
//   img.loadPixels();
  
//   image(webcam,0,0);
  webcam.loadPixels();

  // Reverse canvas contex to mirror everything
  translate(width, 0);
  scale(-1, 1);

  if (modelLoaded) {
    image(video, 0, 0, width, height);

        // If there are faces
    if (predictions.length > 0) {
      
      // DRAW SELECTION OF KEYPOINTS      
      // Get the first face
      let face = predictions[0];
      // console.log(face)
      
      let nose = face.annotations.noseTip[0];
  
      noseX = nose[0];
      noseY = nose[1];
      
      
      for (let x = 0; x < width; x += 50) {
      for (let y = 0; y < height; y += 50) {
      
      let d = dist(noseX, noseY, x, y);
      let c = webcam.get(x,y);
      fill(color(c));
      s = map(d, 0, m, 60, 0,true);

      noStroke();
      rectMode(CENTER);
      rect(x,y,s,s);
    }
  }

  }
}
  
}

Jane Cheng

ICM — Exercises

SELF-PORTRAIT

OPPOSITES

CHOICES

PATTERN

TIME

SIMULATION

PARTS OF A WHOLE

Recent Posts