List_html

Available files (Total=26): Hide listing

./WS02_AsgQ1(solnChallenge).html
./WS02_AsgQ2(soln).html
./WS03_AsgQ1(Soln).html
./WS03_AsgQ2(Soln).html
./WS05_AsgQ1(Soln).html
./WS05_AsgQ2(Soln)1ImageObject.html
./WS05_AsgQ3(Soln).html
./WS06_AsgQ1(solnLevel1)mouseOnGrid.html
./WS06_AsgQ1(solnLevel2)mouseOnGrid.html
./WS06_AsgQ2(soln)bounceGrpsOf3.html
./WS06_AsgQ3(soln)BallsNumberedByFrames.html
./WS06_AsgQ4(soln)randomRoundEllipses.html
./WS09_AsgQ1L1(Soln).html
./WS09_AsgQ1L2(Soln).html
./WS09_AsgQ2L1(Soln).html
./WS09_AsgQ2L2(Soln).html
./WS09_AsgQ3(Soln).html
./WS09_AsgQ4(Soln).html
./WS12_AsgLevel1(Soln).html
./WS12_AsgLevel2(Soln).html
./WS12_AsgLevel3(Soln).html
./WS13_Q1.html
./WS13_Q2.html
./WS13_Q3_noise.html
./WS13_Q4.html
./WS13_Q5.html

./WS02_AsgQ1(solnChallenge).html

run stop and close

./WS03_AsgQ1(Soln).html

<html>

function setup() {
      createCanvas(300, 300);
      background(220);
      frameRate(6); // <== lower frameRate to visualize the effect
    }

function draw() {

if (300 - ballNumber * 10 > 0) {

if (ballNumber % 7 == 0) {
          fill(255, 0, 0);
        } else if (ballNumber % 7 == 1) {
          fill(255, 150, 0);
        } else if (ballNumber % 7 == 2) {
          fill(255, 255, 0);
        } else if (ballNumber % 7 == 3) {
          fill(0, 255, 0);
        } else if (ballNumber % 7 == 4) {
          fill(0, 0, 255);
        } else if (ballNumber % 7 == 5) {
          fill(80, 0, 180);
        } else { // ballNumber%7 is 6
          fill(125, 0, 225);
        }

ellipse(150, 150, 300 - ballNumber * 10, 300 - ballNumber * 10);
        ballNumber++;
      }

}
  </script>

</head>

</html>

run stop and close

./WS03_AsgQ2(Soln).html

run stop and close

./WS05_AsgQ1(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/p5.js
    "></script>
  <script src=
   "http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/addons/p5.dom.js"></script>
  <script>
    var img;
    var x = 0, y = 0;
    var whichCorner = 0; //0: top-left, 1:top-right, 2:bottom-right, 3:bottom-left

function preload() {
      img = loadImage("3.jpg");
    }

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

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

x = lerp(x, width / 2, .1);
      y = lerp(y, height / 2, .1);

var d = dist(x, y, width / 2, height / 2);
      image(img, x, y, d / 2 + 10, d / 2 + 10); //use your own way to shrink the size!

if (d < 10) {
        whichCorner = (whichCorner + 1) % 4; //or whichCorner++; if (whichCorner>3) whichCorner=0;

if (whichCorner == 0 || whichCorner == 3){
          x = 0;
        }
        else {
          x = width;
        }

if (whichCorner >= 2) {
          y = height;
        }
        else {
          y = 0;
        }
      }

}
  </script>
</head>

</html>

run stop and close

./WS05_AsgQ2(Soln)1ImageObject.html

run stop and close

./WS05_AsgQ3(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/p5.js
    "></script>
  <script src=
   "http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.6/addons/p5.dom.js"></script>
  <script>
    var img1, img2, img3, img4, img5, img6, img7, img8, img9;
    var idImg = 1;

function preload() {
      img1 = loadImage("1.jpg");
      img2 = loadImage("2.jpg");
      img3 = loadImage("3.jpg");
      img4 = loadImage("4.jpg");
      img5 = loadImage("5.jpg");
      img6 = loadImage("6.jpg");
      img7 = loadImage("7.jpg");
      img8 = loadImage("8.jpg");
      img9 = loadImage("9.jpg");
    }

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

function draw() {
      var rowToShow = (frameCount - 1) % 10;

i++;
      }

idImg++;
      if (idImg > 9) {
        idImg = 1;
      }
    }
  </script>
</head>

</html>

run stop and close

./WS06_AsgQ1(solnLevel1)mouseOnGrid.html

run stop and close

./WS06_AsgQ1(solnLevel2)mouseOnGrid.html

run stop and close

./WS06_AsgQ2(soln)bounceGrpsOf3.html

run stop and close

./WS06_AsgQ3(soln)BallsNumberedByFrames.html

run stop and close

./WS06_AsgQ4(soln)randomRoundEllipses.html

<html>

function draw() {
      background(225);

var countSmall = 0, countMedium = 0, countLarge = 0;
      var sumSmall = 0, sumMedium = 0, sumLarge = 0;

for (var i = 0; i < 20; i++) {

var d = random(60);

if (d < 20) {
          countSmall++;
          sumSmall+=d;
          fill(255, 255, 0);
        } else if (d < 40) {
          countMedium++;
          sumMedium+=d;
          fill(255, 0, 0);
        } else {
          countLarge++;
          sumLarge+=d;
          fill(200, 0, 255);
        }

ellipse(random(d, width - d), random(d, height - 100 - d), d, d);
      }

fill(0);
      line(0, height - 100, width, height - 100);

textSize(20);
      textAlign(CENTER);
      text("Small: " + countSmall+" balls; average size: "+(sumSmall/countSmall).toFixed(2), width / 2, height - 70);
      text("Medium: " + countMedium+" balls; average size: "+(sumMedium/countMedium).toFixed(2), width / 2, height - 40);
      text("Large: " + countLarge+" balls; average size: "+(sumLarge/countLarge).toFixed(2), width / 2, height - 10);
    }
  </script>

</head>

</html>

run stop and close

./WS09_AsgQ1L1(Soln).html

run stop and close

./WS09_AsgQ1L2(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var x = [];
    var y = [];

function setup() {
      createCanvas(500, 500);
      textAlign(CENTER, CENTER);
      textSize(15);

for (var i = 0; i < 20; i++) {
        x[i] = random(20, width - 20);
        y[i] = random(20, height - 40);
      }
    }

function draw() {
      background(225);

var minDist=1000;
      var iMinDist;

for (var i = 0; i < 20; i++) {
        stroke(0);
        fill(255,100);
        ellipse(x[i], y[i], 40, 40);

var d = dist(x[i], y[i], mouseX, mouseY);
        fill(0);
        text(d.toFixed(1), x[i], y[i]+30);

stroke(125);
        line(mouseX,mouseY,x[i],y[i]);

if(d<minDist) {
          minDist=d;
          iMinDist=i;
        }
      }

fill(255,100,100,100);
      ellipse(x[iMinDist], y[iMinDist], 40, 40);

fill(0);
      text(minDist.toFixed(1), x[iMinDist], y[iMinDist]+30);

stroke(255,0,0);
      line(mouseX,mouseY,x[iMinDist],y[iMinDist]);
    }
  </script>
</head>

</html>

run stop and close

./WS09_AsgQ2L1(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js">
  </script>
  <script>
    var x = [];
    var step = [];
    var direction = [];
    var totBounces = [];

function setup() {
      createCanvas(200, 200);
      textAlign(CENTER, CENTER);
      textSize(20);
      for (var i = 0; i < 5; i++) {
        x[i] = random(width);
        step[i] = random(2, 5);
        direction[i] = 1;
        totBounces[i] = 0;
      }
    }

</html>

run stop and close

./WS09_AsgQ2L2(Soln).html

<html>

var maxBounce = 0;

function setup() {
      createCanvas(200, 200);
      textAlign(CENTER, CENTER);
      textSize(20);

for (var i = 0; i < 5; i++) {
        x[i] = random(width);
        step[i] = random(2, 5);
        direction[i] = 1;
        totBounces[i] = 0;
      }
    }

function draw() {
      background(225);

for (var i = 0; i < 5; i++) {

if (totBounces[i] == maxBounce) {
          fill(255, 0, 0);
        } else {
          fill(225);
        }

ellipse(x[i], 20 + i * 40, 40, 40);

fill(0);
        text(totBounces[i], x[i], 20 + i * 40);

x[i] += direction[i] * step[i];

if (x[i] > width - 20 || x[i] < 20) {
          step[i] = random(2, 5);
          direction[i] *= -1;
          totBounces[i]++;

if (x[i] > width - 20) {
            x[i] = width - 20;
          } else if (x[i] < 20) {
            x[i] = 20;
          }

if (totBounces[i] > maxBounce){
            maxBounce = totBounces[i];
          }
          
        }
      }
    }
  </script>
</head>

</html>

run stop and close

./WS09_AsgQ3(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var contents = ["Gift", "Gift", "Gift", "Money", "Money", "Money", "Blank", "Blank"];
    var show = [false, false, false, false, false, false, false, false];

function setup() {
      createCanvas(641, 300);
      textAlign(CENTER, CENTER);
      rectMode(CENTER);
      textSize(25);
      stroke(200,0,0);

for (var i = 0; i < 50; i++) {
        var i1 = floor(random(8));
        var i2 = floor(random(8));
        var temp = contents[i1];
        contents[i1] = contents[i2];
        contents[i2] = temp;
      }
    }

function draw() {
      background(225);

var countGift = 0;
      var countMoney = 0;
      var countBlank = 0;

for (var i = 0; i < contents.length; i++) {
        rect(40 + i * 80, height / 2, 80, 40);

if (show[i] == true) {
          text(contents[i], 40 + i * 80, height / 2);

if (contents[i] == "Gift") {
            countGift++;
          } else if (contents[i] == "Money") {
            countMoney++;
          } else {
            countBlank++;
          }

}
      }

if (countGift == 3 && countBlank == 0 && countMoney == 0) {
        text("CONGRATULATIONS!", width / 2, height - 80);
      } else if (countGift == 0 && countBlank == 0 && countMoney == 3) {
        text("CONGRATULATIONS!", width / 2, height - 80);
      }
    }

function mousePressed() {

for (var i = 0; i < contents.length; i++) {
        var x = 40 + i * 80;
        var y = height / 2;

if (mouseX > x - 40 && mouseX < x + 40 && mouseY > y - 20 && mouseY < y + 20) {
          show[i] = !show[i];
        }

}
    }
  </script>
</head>

</html>

run stop and close

./WS09_AsgQ4(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var names = [];
    var img = [];
    var display = [];

function preload() {
      names = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];

for (var i = 0; i < names.length; i++) {
        img[i] = loadImage(names[i]);
        display[i] = i;
      }

}

function setup() {
      createCanvas(520, 300);
      background(0);
      imageMode(CENTER);
      rectMode(CENTER);
    }

function draw() {

for (var i = 0; i < img.length; i++){
        image(img[display[i]], 100 * i + 55, height / 2, 100, 100);
      }

fill(255, 255, 0);
      rect(width / 2 - 25, height - 50, 50, 30);
      rect(width / 2 + 25, height - 50, 50, 30);
      fill(120);
      textAlign(CENTER);
      textSize(20);
      text("left", width / 2 - 25, height - 42);
      text("right", width / 2 + 25, height - 42);
    }

function mousePressed() {

if (mouseX > width / 2 + 25 - 25 && mouseX < width / 2 + 25 + 25 &&
        mouseY > height - 50 - 15 && mouseY < height - 50 + 15) {

for (i = 0; i < img.length; i++) {
          display[i] = display[i] - 1;
          if (display[i] < 0) {
            display[i] = img.length - 1;
          }
        }
      }

if (mouseX > width / 2 - 25 - 25 && mouseX < width / 2 - 25 + 25 &&
        mouseY > height - 50 - 15 && mouseY < height - 50 + 15) {

for (i = 0; i < img.length; i++) {
          display[i] = (display[i] + 1) % img.length;
        }
      }

}
  </script>
</head>

</html>

run stop and close

./WS12_AsgLevel1(Soln).html

run stop and close

./WS12_AsgLevel2(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var carsInTrains = []; //number of cars of each train i

function setup() {
      createCanvas(500, 300);
      for (var i = 0; i < 5; i++) {
        carsInTrains[i] = floor(random(2, 6)); //random number from 2 to 5
      }
    }

function draw() {
      background(200);
      rectMode(CENTER);
      textAlign(CENTER, CENTER);

for (var i = 0; i < 5; i++) {
        drawTrain(carsInTrains[i], 50 + i * 50); //given count of cars and y-coordinate on Canvas
      }
    }

function drawCar(x, y) {
      rect(x, y, 50, 20);
      ellipse(x - 10, y + 10, 10, 10);
      ellipse(x + 10, y + 10, 10, 10);
    }

function drawTrain(totCars, y) {

var x = totCars * 50 / 2 + width / 2 - 25; //center point of the head car (i.e. the rightmost car)

for (var i = 0; i < totCars; i++) {
        drawCar(x, y);
        text(i + 1, x, y);
        x -= 50; //adjust x for the next car
      }
    }
  </script>
</head>

</html>

run stop and close

./WS12_AsgLevel3(Soln).html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var carsInTrains = []; //number of cars of each train i
    var spdTrains = []; //speed of each train i
    var xTrainHeads = []; //beginning point (i.e. right) of the head car (i.e. rightmost car) of each train i

function setup() {
      createCanvas(500, 300);
      for (var i = 0; i < 5; i++) {
        carsInTrains[i] = floor(random(2, 6)); //random number from 2 to 5
        spdTrains[i] = floor(random(2, 6)); //random number from 2 to 5
        xTrainHeads[i] = 0;
      }
    }

function draw() {
      background(200);
      rectMode(CENTER);
      textAlign(CENTER, CENTER);

for (var i = 0; i < 5; i++) {
        drawTrain(carsInTrains[i], xTrainHeads[i], 50 + i * 50); //totCars, xHead, y
        xTrainHeads[i] += spdTrains[i];
        if (xTrainHeads[i] - carsInTrains[i] * 50 > width) {
          carsInTrains[i] = floor(random(2, 6)); //random number from 2 to 5
          spdTrains[i] = floor(random(2, 6)); //random number from 2 to 5
          xTrainHeads[i] = 0;
        }
      }
    }

function drawCar(x, y) {
      rect(x, y, 50, 20);
      ellipse(x - 10, y + 10, 10, 10);
      ellipse(x + 10, y + 10, 10, 10);
    }

function drawTrain(totCars, xHead, y) {

var x = xHead - 25; //center point of the head car (i.e. the rightmost car)

for (var i = 0; i < totCars; i++) {
        drawCar(x, y);
        text(i + 1, x, y);
        x -= 50; //adjust x for the next car
      }
    }
  </script>
</head>

</html>

run stop and close

./WS13_Q1.html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var x = [];
    var y = [];
    var d = [];

function setup() {
      createCanvas(400, 400);
      for (var i = 0; i < 15; i++) {
        x[i] = floor(random(100, 300));
        y[i] = floor(random(100, 300));
        d[i] = 50;
      }
    }

function draw() {
      background(200);

textAlign(CENTER);
      textSize(30);
      fill(0);
      noStroke();
      text("Click an ellipse to enlarge it", width / 2, height - 30);

noFill();
      stroke(0);
      for (var i = 0; i < x.length; i++) {
        var distance = dist(mouseX, mouseY, x[i], y[i]);
        if (distance < d[i] / 2) {
          fill(255);
        } else {
          noFill();
        }
        ellipse(x[i], y[i], d[i], d[i]);
      }
    }

</html>

run stop and close

./WS13_Q2.html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var x = [];
    var y = [];
    var d = [];

function setup() {
      createCanvas(400, 400);
      for (var i = 0; i < 15; i++) {
        x[i] = floor(random(100, 300));
        y[i] = floor(random(100, 300));
        d[i] = floor(random(10, 100));
      }
    }

function draw() {
      background(200);

textAlign(CENTER);
      textSize(14);
      fill(0);
      noStroke();
      text("Click to swap the sizes of the largest and smallest ellipses", width / 2, height - 30);

noFill();
      stroke(0);
      for (var i = 0; i < x.length; i++) {
        ellipse(x[i], y[i], d[i], d[i]);
      }

var iLargest = findLargest();
      fill(255, 0, 0);
      ellipse(x[iLargest], y[iLargest], d[iLargest], d[iLargest]);

var iSmallest = findSmallest();
      fill(0, 0, 255);
      ellipse(x[iSmallest], y[iSmallest], d[iSmallest], d[iSmallest]);
    }

function mousePressed() {
      var i1 = findLargest();
      var i2 = findSmallest();

var store = d[i1];
      d[i1] = d[i2];
      d[i2] = store;
    }
  </script>
</head>

</html>

run stop and close

./WS13_Q3_noise.html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var x = [];
    var y = [];
    var c = [];
    var d = [];

function setup() {
      createCanvas(400, 400);
      background(200);
      noFill();

for (var i = 0; i < 15; i++) {
        x[i] = floor(random(100, 300));
        y[i] = floor(random(100, 300));
        c[i] = color(random(255), random(255), random(255));
        d[i] = 50;
      }
    }

function draw() {

background(200);

drawRegion();

noFill();
      for (var i = 0; i < 15; i++) {
        stroke(c[i]);
        d[i] += noise(i * 100 + 0.02 * frameCount) - 0.5;
        d[i] = max(1, d[i]); //make sure d>=1
        ellipse(x[i], y[i], d[i], d[i]);
      }
    }

function drawRegion() {
      var top = y[0] - d[0] / 2; //alternative: height
      var bottom = y[0] + d[0] / 2; //alternative: 0
      var left = x[0] - d[0] / 2; //alternative: width
      var right = x[0] + d[0] / 2; //alternative: 0

for (var i = 0; i < x.length; i++) {
        if (x[i] - d[i] / 2 < left) {
          left = x[i] - d[i] / 2;
        }
        if (x[i] + d[i] / 2 > right) {
          right = x[i] + d[i] / 2;
        }
        if (y[i] - d[i] / 2 < top) {
          top = y[i] - d[i] / 2;
        }
        if (y[i] + d[i] / 2 > bottom) {
          bottom = y[i] + d[i] / 2;
        }
      }

fill(255);
      stroke(255);
      rect(left, top, right - left, bottom - top);
    }
  </script>
</head>

</html>

run stop and close

./WS13_Q4.html

<html>

<head>
  <meta charset="UTF-8">
  <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
  <script>
    var x = [];
    var y = [];
    var d = 50;
    var pick = [];
    var xPressed, yPressed;

function setup() {
      createCanvas(400, 400);
      for (var i = 0; i < 15; i++) {
        x[i] = floor(random(100, 300));
        y[i] = floor(random(100, 300));
        pick[i] = false;
      }
    }

function draw() {

background(200);

textAlign(CENTER);
      textSize(30);
      fill(0);
      noStroke();
      text("Pan and drag ellipses", width / 2, height - 30);

fill(255, 0, 0, 100);
      noStroke();
      ellipse(mouseX, mouseY, 150, 150);

stroke(0);
      for (var i = 0; i < x.length; i++) {
        if (mouseIsPressed) {
          if (pick[i] == true) {
            fill(255, 0, 255);
            ellipse(x[i] + mouseX - xPressed, y[i] + mouseY - yPressed, d, d);
          } else {
            noFill();
            ellipse(x[i], y[i], d, d);
          }
        } else {
          var distance = dist(mouseX, mouseY, x[i], y[i]);
          if (distance < 50) {
            fill(255);
          } else {
            noFill();
          }
          ellipse(x[i], y[i], d, d);
        }
      }
    }

function mouseReleased() {
      for (var i = 0; i < x.length; i++)
        if (pick[i] == true) {
          pick[i] = false;
          x[i] = x[i] + mouseX - xPressed;
          y[i] = y[i] + mouseY - yPressed;
        }
    }
  </script>
</head>

</html>

run stop and close

./WS13_Q5.html

<html>

<head>
    <meta charset="UTF-8">
    <script src=
   "https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.3/p5.js"></script>
    <script>
        var scoringTeam = ""; //The team who has just got a score.
        var scoreA = 0;
        var scoreB = 0;

function setup() {
            createCanvas(500, 300);
            textAlign(CENTER, CENTER);
            rectMode(CENTER);
        }

function draw() {
            background(230);

//The centers of the rectangles for the teams are (150,150) and (350,150)
            //The sizes of the rectangles are 100x100
            drawTeam("A", 150, 150, 100, 100, scoreA);
            drawTeam("B", 350, 150, 100, 100, scoreB);

textAlign(CENTER); textSize(18); fill(255,0,0); noStroke();
            text("Press letter 'A' or 'B' to add the scores", width / 2, 15);
        }

function drawTeam(name, x, y, w, h, score) {

if (scoringTeam == name) {
              fill(255, 100, 100);
            }
            else {
              fill(255);
            }
            stroke(0);
            rect(x, y, w, h);

noStroke();
            fill(0);
            textSize(20);
            text("Team " + name, x, y - 80);
            textSize(60);
            text(score, x, y);

textSize(30);
            if (score == 21) {
              text("Team " + name + " is the winner", width / 2, height - 30);
            }
        }

</html>

run stop and close

Example Usage 1 (basic):
Example Usage 2 (add filter:CHAN):
Example Usage 3 (set the defaultShowInFrame parameter to true):