ProjectFMS.github.io/tracingShapes.js at master · error2403/ProjectFMS.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

let img; // Declare variable 'img'.
let button;

function setup() {
  createCanvas(852, 480);
  img = loadImage('underwater.jpg'); // Load the image

  starfish = new Clickable();
  starfish.locate(80, 330);
  starfish.resize(70,30);
  starfish.text = "starfish";
  starfish.onPress = function() {
    clickStar();
  }
  starfish.onHover = function () {
    this.color = "#f549c4";
  };
  starfish.onOutside = function () {
    this.color = "#FFFFFF";
  };
  //button = createButton('starfish');
  //button.position(90,330);
  //button.mousePressed(clickStar);

  sandDollar = new Clickable();
  sandDollar.locate(347, 330);
  sandDollar.resize(70,30);
  sandDollar.text = "sand dollar";
  sandDollar.onPress = function() {
    changeBG();
  }
  sandDollar.onHover = function () {
    this.color = "#f549c4";
  };
  sandDollar.onOutside = function () {
    this.color = "#FFFFFF";
  };
  //button = createButton('sand dollar');
  //button.position(340,330);
  //button.mousePressed(changeBG);

  fish = new Clickable();
  fish.locate(667, 330);
  fish.resize(70,30);
  fish.text = "fish";
  fish.onPress = function() {
    changeBG();
  }
  fish.onHover = function () {
    this.color = "#f549c4";
  };
  fish.onOutside = function () {
    this.color = "#FFFFFF";
  };
  //button = createButton('fish');
  //button.position(680,330);
  //button.mousePressed(changeBG);
}

function draw() {
  // Displays the image at its actual size at point (0,0)
  image(img, 0, 0);

  fill(237,142,123)
  beginShape();
  vertex(230,310)
  vertex(150,310)
  vertex(120,225)
  vertex(80,310)
  vertex(2,310)
  vertex(65,365)
  vertex(40,435)
  vertex(115,395)
  vertex(190,435)
  vertex(165,365)
  endShape(CLOSE);

  fill(255,255,255)
  circle(380,340,200);

  fill(235,237,88)
  triangle(620, 340, 530, 410, 530, 280);
  ellipse(700,340,220,135);

  starfish.draw();
  sandDollar.draw();
  fish.draw();
}
function clickStar() {
  window.location.href = "secondPage.html";
}
  function changeBG() {
  let val = random(255);
  background(val);

}


//function setup() {
  //button = createButton("Play Game");
  //button.mouseClicked(moveButton);
  //button.size(50,30);
 // button.position(25,65);
  //button.style("font-family", "Bodoni");
  //button.style("font-size", "12px");
//}
//function moveButton() {
 // button.position (325,65);
   // var val = Math.floor(1000 + Math.random() * 9000);
//console.log(val);
//}