![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
//vertices and edge sets of the individual graphs
var V = [];
var E = [];
//total set of vertices
var vertices = [];
var spacing = 48;
//buttons for coloring vertices
var redbutton;
var bluebutton;
var greenbutton;
var pinkbutton;
var orangebutton
var buttons = [];
var levelnumber = 1;
var mousehasentbeenclicked;
function setup() {
createCanvas(480, 400);
background(255);
resetLevel();
}
function resetLevel() {
mousehasentbeenclicked = true;
background(255);
//create buttons
redbutton = makeButton(width/6, color(209, 90, 90));
bluebutton = makeButton(2 * width/6, color(93, 137, 196));
greenbutton = makeButton(3 * width/6, color(199, 197, 71));
pinkbutton = makeButton(4 * width/6, 'lightpink');
orangebutton = makeButton(5 * width/6, 'orange');
buttons = [redbutton, bluebutton, greenbutton, pinkbutton, orangebutton];
for (i = 0; i < buttons.length; i++) {
buttons[i].isoutlined = false;
buttons[i].draw();
}
//draw grid of small vertices and label them from 0 to 53 in an array
for (i = 0; i < width/spacing - 1; i++) {
for (j = 0; j < 300/spacing - 1; j++) {
vertices[i + ((width/spacing - 1) * j)] =
makeVertex(spacing + i * spacing, spacing + j * spacing);
}
}
}
//OBJECTS: VERTICES, EDGES, BUTTONS////////////////////////////////////////////
//vertices
function vertexboldDraw() {
noStroke();
if (this.isred == true) {
fill(209, 90, 90);
ellipse(this.x, this.y, 16, 16);
} else if (this.isblue == true) {
fill(93, 137, 196);
ellipse(this.x, this.y, 16, 16);
} else if (this.isgreen == true) {
fill(199, 197, 71);
ellipse(this.x, this.y, 16, 16);
} else if (this.ispink == true) {
fill('lightpink');
ellipse(this.x, this.y, 16, 16);
} else if (this.isorange == true) {
fill('orange');
ellipse(this.x, this.y, 16, 16);
} else {
stroke(150);
strokeWeight(1);
fill(255);
ellipse(this.x, this.y, 15, 15);
}
}
function vertexDraw() {
noStroke();
fill(180);
ellipse(this.x, this.y, 1.5, 1.5);
}
function makeVertex(px, py) {
v = {x: px, y: py, draw: vertexDraw, bolddraw: vertexboldDraw,
isred: false, isgreen: false, isblue: false, ispink: false,
isorange: false};
return v;
}
//edges
function edgeDraw(m, n) {
if (this.iscolored == true & this.iscorrect == true) {
strokeWeight(3);
stroke('limegreen');
} else if (this.iscolored == true & this.iscorrect == false) {
strokeWeight(3);
stroke('tomato');
} else if (this.iscolored == false) {
strokeWeight(.5);
stroke(200);
}
line(vertices[this.m].x, vertices[this.m].y,
vertices[this.n].x, vertices[this.n].y);
}
function makeEdge(pm, pn) {
e = {m: pm, n: pn, iscolored: false, iscorrect: true, draw: edgeDraw};
return e
}
//buttons
function buttonDraw() {
rectMode(CENTER);
if (this.isoutlined == true) {
strokeWeight(3);
stroke(255);
fill(this.buttoncolor);
rect(this.x, height - 50, 60, 20);
} else {
noStroke();
fill(this.buttoncolor);
rect(this.x, height - 50, 61.5, 21.5);
}
}
function makeButton(px, color) {
b = {x: px, buttoncolor: color, isoutlined: false, draw: buttonDraw};
return b;
}
//FUNCTIONS TO BE CALLED IN MOUSEPRESSED///////////////////////////////////////
function testEdge() {
//edges are green if the vertices are different color and red if they are
//the same colors
for (i = 0; i < E.length; i++) {
if (vertices[E[i].m].isred == true & vertices[E[i].n].isred == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isblue == true & vertices[E[i].n].isblue == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isgreen == true & vertices[E[i].n].isgreen == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].ispink == true & vertices[E[i].n].ispink == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if (vertices[E[i].m].isorange == true & vertices[E[i].n].isorange == true) {
E[i].iscolored = true;
E[i].iscorrect = false;
}
if ((vertices[E[i].m].isred == true || vertices[E[i].m].isblue == true ||
vertices[E[i].m].isgreen == true || vertices[E[i].m].ispink == true
|| vertices[E[i].m].isorange == true) & (vertices[E[i].n].isred == true
|| vertices[E[i].n].isblue == true || vertices[E[i].n].isgreen == true
|| vertices[E[i].n].ispink == true || vertices[E[i].n].isorange == true)) {
E[i].iscolored = true;
}
if (E[i].iscolored == true & (vertices[E[i].m].isred !== vertices[E[i].n].isred
|| vertices[E[i].m].isblue !== vertices[E[i].n].isblue
|| vertices[E[i].m].isgreen !== vertices[E[i].n].isgreen
|| vertices[E[i].m].ispink !== vertices[E[i].n].ispink
|| vertices[E[i].m].isorange !== vertices[E[i].n].isorange)) {
E[i].iscolored = true;
E[i].iscorrect = true;
}
E[i].draw();
}
}
function colorVertices() {
//change colors of vertices when clicked, depending on which button has
//most recently been clicked
for (i = 0; i < V.length; i++) {
if (dist(mouseX, mouseY, vertices[V[i]].x, vertices[V[i]].y) < 10) {
if (buttons[0].isoutlined == true & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = true;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == true &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = true;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == true && buttons[3].isoutlined == false &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = true;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == true &&
buttons[4].isoutlined == false) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = true;
vertices[V[i]].isorange = false;
}
if (buttons[0].isoutlined == false & buttons[1].isoutlined == false &&
buttons[2].isoutlined == false && buttons[3].isoutlined == false &&
buttons[4].isoutlined == true) {
vertices[V[i]].isred = false;
vertices[V[i]].isblue = false;
vertices[V[i]].isgreen = false;
vertices[V[i]].ispink = false;
vertices[V[i]].isorange = true;
}
}
}
}
function pressButton() {
//select color for vertex coloring
if (mouseX >= buttons[0].x - 30 & mouseX <= buttons[0].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = true;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[1].x - 30 & mouseX <= buttons[1].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = true;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[2].x - 30 & mouseX <= buttons[2].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = true;
buttons[3].isoutlined = false;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[3].x - 30 & mouseX <= buttons[3].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = true;
buttons[4].isoutlined = false;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
if (mouseX >= buttons[4].x - 30 & mouseX <= buttons[4].x + 30
&& mouseY <= height - 40 && mouseY >= height - 60) {
buttons[0].isoutlined = false;
buttons[1].isoutlined = false;
buttons[2].isoutlined = false;
buttons[3].isoutlined = false;
buttons[4].isoutlined = true;
for (i = 0; i < buttons.length; i++) {
buttons[i].draw();
}
}
}
//DESIGN LEVELS AND CALL THEM IN DRAW//////////////////////////////////////////
function levelOne() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level One: Practice', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [25, 24],
[51, 41], [47, 39], [19, 20], [13, 41], [41, 20], [20, 24], [24, 39],
[39, 13]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 13, 19, 20, 24, 25, 39, 41, 47, 51];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelTwo() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Two', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [38, 47], [47, 51],
[51, 42], [42, 38], [38, 51], [42, 47], [42, 19], [25, 38], [4, 38],
[4, 42], [19, 38], [25, 42]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 19, 25, 38, 42, 47, 51];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelThree() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Three', 30, 10);
E = [[4, 31], [31, 17], [31, 53], [31, 45], [31, 9], [12, 14], [14, 33],
[33, 40], [40, 29], [29, 12], [4, 29], [4, 14], [17, 12], [17, 33], [53, 14],
[53, 40], [45, 33], [45, 29], [9, 40], [9, 12]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 9, 12, 14, 17, 29, 33, 40, 45, 53, 31];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelFour() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Four', 30, 10);
E = [[4, 18], [18, 45], [45, 21], [21, 4], [4, 23], [23, 53], [53, 26],
[26, 4], [4, 28], [4, 34], [28, 34], [18, 28], [26, 34], [18, 21],
[23, 26], [28, 21], [34, 23], [21, 23], [28, 34], [23, 45], [21, 53]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 18, 21, 23, 26, 28, 34, 45, 53];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function levelFive() {
textSize(10);
strokeWeight(.4);
fill('grey');
text('Level Five', 30, 10);
E = [[25, 4], [19, 4], [25, 51], [51, 47], [47, 19], [4, 13], [19, 13],
[25, 13], [29, 13], [33, 13], [47, 13], [51, 13], [4, 29], [4, 33],
[19, 29], [25, 33], [29, 51], [33, 47], [29, 47], [33, 51], [25, 29], [19, 33]];
for (i = 0; i < E.length; i++) {
E[i] = makeEdge(E[i][0], E[i][1]);
if (mousehasentbeenclicked) {
E[i].draw();
}
}
V = [4, 19, 25, 47, 51, 13, 33, 29];
for (i = 0; i < V.length; i++) {
vertices[V[i]].bolddraw();
}
}
function draw() {
for (k = 0; k < vertices.length; k++) {
vertices[k].draw();
}
if (levelnumber == 1) {
levelOne();
} else if (levelnumber == 2) {
levelTwo();
} else if (levelnumber == 3) {
levelThree();
} else if (levelnumber == 4) {
levelFour();
} else if (levelnumber == 5) {
levelFive();
}
}
function mousePressed() {
mousehasentbeenclicked = false;
pressButton();
colorVertices();
testEdge();
var is5colored = true;
for (i = 0; i < E.length; i ++) {
if (E[i].iscolored == false || E[i].iscorrect == false) {
is5colored = false;
}
}
if (is5colored == true) {
resetLevel();
levelnumber++;
}
if (levelnumber == 6) {
textSize(90);
fill('lightpink');
noStroke();
text('YOU WIN', 40, height/2);
}
}
My final project is a simple game based on graph coloring. Click on any of the colored boxes to select a color and then click in the vertices to color them with that color. The goal is to color in the graph so that there is no edge between vertices of the same color. When you succeed it will automatically move on to the next level. There are a total of 5 levels and when you complete them all you win!