![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2021/09/stop-banner.png)
For my final project, I wanted to address something we have all been doing a lot
of during quarantine, which is impulsive online shopping. Seeing all the
devastating climate crisis we’ve experienced this year I wanted to do a little
research on how the actual cost of fast fashion and its damage to the environment. It’s easy to purchase a cute shirt when they’re 15 dollars even if
you didn’t need it, but in reality, it’s contributing to so many problems that
we are actually paying for: forest fires, unpaid labor, toxic waste, etc..
The program is very simple, you hover over with your mouse to see the environmental cost of each of these clothing items, and when you click on them it will be placed into your shopping bag. A certain number of the three symbols will pop up on the screen to show you how much you’ve spent. When you’ve used up around 50,000 litres of water (which doesn’t take a lot to achieve), the end screen will pop up. If I had more time I would make the symbols pop up in a more organized manner and add more levels of interactions.
sketchDownload
//keep track of number of runs
var count = 0;
//used for locating each item of clothing
var item;
//array for textbox, textbox is t
var t = [];
var textInfo = [
'COTTON T-SHIRT:\n2,700 litres of water\n15kg of CO2\n200+ years to\ndecompose',
'JEANS:\n7000 litres of water\n33kg of CO2\n50 years to decompose',
'SNEAKERS:\n8500 litres of water\n10kg of CO2\n40 years to decompose'
];
var textY = [30, 165, 355];
var textColor = ["lavender", "DarkSlateBlue"];
function preload(){
rack = loadImage('https://i.imgur.com/YpMqJ3Z.png');
shirt = loadImage('https://i.imgur.com/54EAgyC.png');
jeans = loadImage('https://i.imgur.com/qzkFSXI.png');
shoes = loadImage('https://i.imgur.com/D7paBLS.png');
bag = loadImage('https://i.imgur.com/Xyv6IGe.png');
water = loadImage('https://i.imgur.com/3ONgfhP.png');
co2 = loadImage('https://i.imgur.com/me0Lg0A.png');
clock = loadImage('https://i.imgur.com/gw7QVpQ.png');
}
//draw water
function drawWater() {
image(water, this.x, this.y, 20, 20);
}
//draw co2
function drawCarbon(cx, cy) {
image(co2, this.x, this.y, 20, 20);
}
//draw clock
function drawClock(clx, cly) {
image(clock, this.x, this.y, 20, 20);
}
//create new water bucket object with position
function makeWater(wx, wy) {
w = {x: wx, y: wy,
drawFunction: drawWater
}
return w;
}
//create new co2 object with position
function makeCarbon(cx, cy) {
c = {x: cx, y: cy,
drawFunction: drawCarbon
}
return c;
}
//create new clock object with position
function makeClock(clx, cly) {
cl = {x: clx, y: cly,
drawFunction: drawClock
}
return cl;
}
//arrays to store new symbol
var waters = [];
var carbons = [];
var clocks = [];
function setup() {
createCanvas(400, 500);
background("lightsteelblue");
//set up the base rack
image(rack, 200, 0, 200, 500);
imageMode(CENTER);
image(shirt, 300, 80, 120, 100);
image(jeans, 300, 250, 80, 150);
image(shoes, 300, 450, 100, 60);
//create array of objects of the three info textboxes
for (var i = 0; i < 3; i ++) {
t[i] = new Object();
t[i].info = textInfo[i];
t[i].x = 170;
t[i].y = textY[i];
t[i].w = 110;
t[i].h = 70;
t[i].size = 10;
t[i].c = textColor[i];
t[i].font = 'verdana';
t[i].stroke = "thistle"
t[i].sWeight = 5;
}
//make a water bucket
for (var i = 0; i < 20; i ++) {
var w = makeWater(random(100), random(20, 100));
waters.push(w);
}
//make a co2
for (var i = 0; i < 20; i ++) {
var w = makeCarbon(random(100), random(100, 200));
carbons.push(c);
}
//make a clock
for (var i = 0; i < 20; i ++) {
var cl = makeClock(random(50), random(200, 300));
clocks.push(cl);
}
}
function draw() {
//instruction
textSize(20);
fill("white");
textFont(t[0].font);
text('click to shop, hover to see price!', 20, 18);
//draw textbox
if(mouseX >= 200 & mouseX <= 400) {
if(mouseY >= 3 && mouseY <= 120) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[0].x-5, t[0].y-5, t[0].w+10, t[0].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[0].info, t[0].x, t[0].y, t[0].w, t[0].h);
item = 1;
}
else if(mouseY >= 150 & mouseY <= 300) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[1].x-5, t[1].y-5, t[1].w+10, t[1].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[1].info, t[1].x, t[1].y, t[0].w, t[0].h);
item = 2;
}
else if(mouseY >= 330 & mouseY <= 480) {
stroke(t[0].stroke);
strokeWeight(t[0].sWeight);
fill(t[0].c);
rect(t[2].x-5, t[2].y-5, t[2].w+10, t[2].h+10);
noStroke();
textSize(t[0].size);
fill(t[1].c);
text(t[2].info, t[2].x, t[2].y, t[2].w, t[2].h);
item = 3;
}
}
//place shopping bag
shoppingBag();
//place key
drawKey(0, 400);
//if 50 buckets of water used, display end page
if(count >= 50) {
endPage();
}
}
function mousePressed() {
//when clicked into each area, item goes to shopping bag
if(item == 1) {
buyShirt(120, 450);
//3 water buckets
push();
for (var i = 0; i < 3; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//3 co2
push();
for (var i = 0; i < 3; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//20 clocks
push();
for (var i = 0; i < 20; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
//add 3 to overall count
count += 3;
}
else if(item == 2) {
buyJeans(120, 470);
//7 water buckets
push();
for (var i = 0; i < 7; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//6 co2
push();
for (var i = 0; i < 6; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//5 clocks
push();
for (var i = 0; i < 5; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
//add 7 to overall count
count += 7;
}
else {
buyShoes(120, 450);
//8 water buckets
push();
for (var i = 0; i < 8; i ++) {
var w = waters[i];
w.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//2 co2
push();
for (var i = 0; i < 2; i ++) {
var c = carbons[i];
c.drawFunction();
translate(random(10, 15), random(10, 15));
}
pop();
//4 clocks
push();
for (var i = 0; i < 4; i ++) {
var cl = clocks[i];
cl.drawFunction();
translate(random(5, 10), random(5, 10));
}
pop();
//add 8 to overall count
count += 8;
}
}
function shoppingBag() {
image(bag, 120, 470, 170, 170);
fill("white");
textSize(20);
text('your bag', 75, 480);
}
function drawKey(x, y) {
//key box
stroke("thistle");
strokeWeight(5);
fill("lavender");
rect(x, y, 70, 80);
//symbols
image(water, x+15, y+20, 20, 20);
image(co2, x+15, y+45, 20, 20);
image(clock, x+15, y+65, 20, 20);
//text
textSize(7);
fill("black");
noStroke();
text('1000L water\n\n5kg co2\n\n10 years', x+30, y+15, 40, 80);
stroke("thistle");
}
//clothing item goes into shopping bag
function buyShirt(x, y) {
push();
rotate(radians(random(-2, 2)));
image(shirt, x, y, 120, 100);
pop();
}
function buyJeans(x, y) {
push();
rotate(radians(random(-2, 2)));
image(jeans, x, y, 80, 150);
pop();
}
function buyShoes(x, y) {
push();
rotate(radians(random(-2, 2)));
image(shoes, x, y, 100, 60);
pop();
}
function endPage() {
background("steelblue");
fill("lavender");
noStroke();
textSize(30);
text('Sorry,\nYou have used up \n50 years worth of \ndrinking water.\n\nRefresh to shop again',
50, 100)
}