![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
For my project, I created a maze with a turtle guiding the path to get out of the maze. My goal was to make this environmentally themed because this is still a persistent issue. The wonderful thing about where technology is headed, however, we can do a lot more to solve some of these issues. For example, electric automobiles replacing gas ones. Another motivator was to continue to bring self awareness. It’s crazy to think that people were freaking out in the 2020 debates/election over the fear that Biden would “force” everyone to get an electric car. Of course I see the issue in getting rid of gas cars all of the sudden, but 1) he isn’t going to do it “all of the sudden” and 2) electric cars should replace gas cars completely, eventually.
Anyway, the difference between this and most standard mazes is that there is always one clear path. However, my maze doesn’t have any clear paths. It does have one distinct path, but it is blocked by obstacles. There are six obstacles that are each a factor of environmental issues. In order to get rid of them, and clear the path for the turtle, you have to click on them once the turtle approaches each obstacle. Once you click on one, a fact will appear at the bottom of the page relating to environmental issues. Once you make it to the end, you are done and there will be an ending page, with a smiling earth. The idea of this project is to continue to bring awareness to the climate crisis/environmental issues and the player gets to “clean up” the messes or “get rid” of the issues along the way.
Some side notes: movement is with the wasd keys, instead of the arrow keys. So, “w” is up, “a” is left, “s” is down, and “d” is right. Also, sometimes the turtle may get stuck, just play around with the movement keys if this happens. I apologize for this, but I couldn’t figure out how to fix it. Of course if I had more time, I would’ve liked to figure out this problem, Overall, it works pretty well, so enjoy!
sketch.slmazeDownload
//Sarah Luongo
//sluongo
//Section A
// This code aims to create a maze with obstacles that are causes of
// environmental problems. As you go through, click on the obstacles to
// clear the path for the turtle and learn some facts along the way.
var walls = [];
var x = 120; // x location of circle
var y = 25; // y location of circle
var obstaclesx = []; // array to hold the x location of the obstacles
var obstaclesy = []; // array to hold the y location of the obstacles
var industry;
var litter;
var light;
var tree;
var car;
var rings;
var obstaclesarealive = [];
var facts = '';
var earth;
var facing = 0;
var turtlecol; // boolean for collision as turtle rotates
function preload() {
industry = loadImage('https://i.imgur.com/kT2IbbF.png');
litter = loadImage('https://i.imgur.com/iQ2mdUY.png');
light = loadImage('https://i.imgur.com/uMRxZlH.png');
tree = loadImage('https://i.imgur.com/vn4OlLX.png');
car = loadImage('https://i.imgur.com/i4iop8I.png');
rings = loadImage('https://i.imgur.com/BAAbVNY.png');
earth = loadImage('https://i.imgur.com/RfrmGyt.png');
}
function setup() {
createCanvas(600, 600);
frameRate(60);
// Maze lines are are drawn somewhat like a grid, so they are separated by
// Row and column and seperated further to make up to rows and columns
// Maze lines (columns) starting from left to right
maze(140, 50, 140, 90, true);
maze(140, 130, 140, 210, true);
maze(140, 250, 140, 330, true);
maze(140, 370, 140, 410, true);
maze(180, 50, 180, 130, true);
maze(180, 170, 180, 250, true);
maze(180, 370, 180, 410, true);
maze(220, 170, 220, 210, true);
maze(220, 250, 220, 330, true);
maze(260, 90, 260, 170, true);
maze(260, 210, 260, 250, true);
maze(260, 290, 260, 330, true);
maze(260, 410, 260, 450, true);
maze(300, 90, 300, 130, true);
maze(300, 250, 300, 330, true);
maze(300, 370, 300, 410, true);
maze(340, 90, 340, 170, true);
maze(340, 330, 340, 370, true);
maze(380, 50, 380, 250, true);
maze(420, 90, 420, 130, true);
maze(420, 170, 420, 250, true);
maze(420, 290, 420, 410, true);
maze(460, 90, 460, 290, true);
maze(460, 330, 460, 370, true);
// Maze lines (rows) starting from top to bottom
maze(220, 90, 260, 90, false);
maze(300, 90, 340, 90, false);
maze(420, 90, 460, 90, false);
maze(140, 130, 220, 130, false);
maze(220, 170, 340, 170, false);
maze(380, 170, 420, 170, false);
maze(180, 210, 340, 210, false);
maze(220, 250, 260, 250, false);
maze(300, 250, 380, 250, false);
maze(140, 290, 220, 290, false);
maze(260, 290, 300, 290, false);
maze(340, 290, 460, 290, false);
maze(100, 330, 180, 330, false);
maze(300, 330, 380, 330, false);
maze(460, 330, 500, 330, false);
maze(140, 370, 300, 370, false);
maze(340, 370, 380, 370, false);
maze(180, 410, 260, 410, false);
maze(300, 410, 460, 410, false);
// Resize images
industry.resize(35, 40);
litter.resize(35, 35);
light.resize(35, 35);
tree.resize(30, 30);
car.resize(35, 35);
rings.resize(60, 60);
earth.resize(300, 300);
obstaclesx = [140, 260, 223, 385, 462, 440]
obstaclesy = [210, 53, 333, 255, 150, 410]
obstaclesarealive = [true, true, true, true, true, true]
}
function draw() {
background(220);
// Maze background
strokeWeight(1);
stroke(0);
fill(255);
square(100, 50, 400);
for (var i = 0; i < walls.length; i++) {
line(walls[i].x1, walls[i].y1, walls[i].x2, walls[i].y2);
}
// Maze start and finish
stroke(255);
strokeWeight(1);
line(101, 50, 139, 50);
line(461, 450, 499, 450);
noStroke();
turtle(x, y);
if (obstaclesarealive[0] == true) {
image(industry, 140, 210);
}
if (obstaclesarealive[1] == true) {
image(litter, 260, 53);
}
if (obstaclesarealive[2] == true) {
image(light, 223, 333);
}
if (obstaclesarealive[3] == true) {
image(tree, 385, 255);
}
if (obstaclesarealive[4] == true) {
image(car, 462, 150);
}
if (obstaclesarealive[5] == true) {
image(rings, 440, 410);
}
// If statements to move and rotate the turtle:
// Key 'w' moves up
if (keyIsDown(87)) {
facing = 180;
turtlecol = false;
y--;
if (collision()) {
y++;
}
// Key 'a' moves left
} else if (keyIsDown(65)) {
facing = 90;
turtlecol = true;
x--;
if (collision()) {
x++;
}
// Key 's' moves down
} else if (keyIsDown(83)) {
facing = 0;
turtlecol = false;
y++;
if (collision()) {
y--;
}
// Key 'd' moves right
} else if (keyIsDown(68)) {
facing = -90;
turtlecol = true;
x++;
if (collision()) {
x--;
}
}
// Text attributes and placement after each obstacle is clicked
textSize(15);
fill(0);
text(facts, 100, 500);
}
function turtle(a, b) {
push();
translate(a, b);
// Rotate based on direction it's traveling
rotate(radians(facing));
// Head
fill(153, 200, 130);
ellipse(0, 9, 7, 8);
// Tail
strokeWeight(3);
stroke(153, 200, 130);
line(0, -10, 0, -8);
// Legs
strokeWeight(4);
line(-7, -8, -6, -7);
line(7, 8, 6, 7);
line(-7, 8, -6, 7);
line(7, -8, 6, -7);
noStroke();
// Eyes
fill(88, 130, 96);
circle(-2, 11, 2);
circle(2, 11, 2);
// Body
fill(204, 223, 156);
circle(0, 0, 16);
pop();
}
// Maze object
function maze(xone, yone, xtwo, ytwo, pos) {
var mz = {x1: xone, y1: yone, x2: xtwo, y2: ytwo, p: pos}
walls.push(mz);
}
// Function that deals with all collision types
function collision() {
var xoffset = (turtlecol)? 12 : 13;
var yoffset = (turtlecol)? 13 : 12;
// Collision against maze border
if (x == 111 || x == 489 || y == 65 || y == 430) {
if (x >= 112 & x <= 128 && y <= 65) {
return false;
}
// End of maze
if (x >= 450 & x <= 488 && y == 430) {
endscreen();
}
return true;
}
// Collision against maze walls
for (var i = 0; i < walls.length; i++) {
if (walls[i].p == true) {
if ((y+yoffset) > walls[i].y1 & (y-yoffset) <= walls[i].y2) {
if ((x+xoffset) >= walls[i].x1 && (x-xoffset) <= walls[i].x1) {
return true;
}
}
} else {
if ((x+xoffset) >= walls[i].x1 & (x-xoffset) <= walls[i].x2) {
if ((y+yoffset) >= walls[i].y1 && (y-yoffset) <= walls[i].y1) {
return true;
}
}
}
}
return obstacleCollision();
}
// Collision against images
function obstacleCollision() {
var xoffset = (turtlecol)? 12 : 13;
var yoffset = (turtlecol)? 13: 12;
for (var i = 0; i < obstaclesx.length; i++) {
if ((x+xoffset) >= obstaclesx[i] & (x-xoffset) <= (obstaclesx[i] + 40)) {
if ((y+yoffset) >= obstaclesy[i] && (y-yoffset) <= (obstaclesy[i] + 40)) {
return obstaclesarealive[i];
}
}
}
return false;
}
// Facts from the industry, electricity, and transportation obstacles come from
// the following website:
// https://www.epa.gov/ghgemissions/sources-greenhouse-gas-emissions
// Litter obstacle fact:
// https://www.metrobinhire.com.au/blog/9-surprisingly-and-alarming-facts-about-littering
// Deforestation obstacle fact:
// https://www.greenmatters.com/p/why-is-deforestation-a-problem
// 6 Pack Ring obstacle fact:
// https://www.nationalgeographic.com/environment/2018/09/news-plastic-six-pack-rings-alternatives-history/#close
function mousePressed() {
if (mouseX >= 140 & mouseX <= 175 && mouseY >= 210 && mouseY <= 250) {
obstaclesarealive[0] = false;
facts = 'Greenhouse gas emissions from industry primarily come \nfrom burning fossil fuels for energy, as well as greenhouse \ngas emissions from certain chemical reactions necessary to \nproduce goods from raw materials.';
}
if (mouseX >= 260 & mouseX <= 295 && mouseY >= 53 && mouseY <= 88) {
obstaclesarealive[1] = false;
facts = 'Some alarming quick facts about littering: almost all litter \nends up in the ocean. The most littered item is fast food \npackaging many animals die from littering. Cigarette butts \nmake up 1/2 the amount of littered objects.';
}
if (mouseX >= 223 & mouseX <= 258 && mouseY >= 333 && mouseY <= 368) {
obstaclesarealive[2] = false;
facts = 'Electricity production generates the second largest share \n(26.9% in 2018) greenhouse gas emissions. Approximately \n63 percent of our electricity comes from burning fossil fuels, \nmostly coal and natural gas.';
}
if (mouseX >= 385 & mouseX <= 415 && mouseY >= 255 && mouseY <= 285) {
obstaclesarealive[3] = false;
facts = 'Deforestation has many major (and way too often unforeseen) \nimpacts on the environment. There’s soil erosion, water cycle \ndisruption, greenhouse gas emissions, and biodiversity \nlosses with every tree that is chopped, and the planet feels its \nimpact.';
}
if (mouseX >= 462 & mouseX <= 499 && mouseY >= 150 && mouseY <= 185) {
obstaclesarealive[4] = false;
facts = 'The transportation sector generates the largest share (28.2%\nin 2018) of greenhouse gas emissions. Greenhouse gas \nemissions from transportation primarily come from burning \nfossil fuel for our cars, trucks, ships, trains, and planes.';
}
if (mouseX >= 440 & mouseX <= 500 && mouseY >= 410 && mouseY <= 440) {
obstaclesarealive[5] = false;
facts = 'Almost 700 species are now known to have been harmed \nby ocean plastic, and every year, around 18 billion pounds \nof plastic flows into the ocean. Producing plastic rings also \nrequires using petroleum—around eight percent of global \noil production is to make plastic.';
}
}
function endscreen() {
facts = '';
fill(0, 0, 102);
push();
translate(width/2, height/2);
square(-300, -300, 600);
image(earth, -150, -200);
textSize(50);
fill(255);
textAlign(CENTER);
text('THE END', 0, 200);
pop();
noLoop();
}
// Code used to make the building/first obstacle
/*function industry() {
// Building
fill(139, 69, 19);
rect(145, 225, 8, 20);
rect(153, 234, 20, 11);
//CO2
fill(70);
circle(149, 222, 5);
circle(153, 220, 8);
circle(159, 214, 11);
}*/
