Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	WhatsApp ft. Daniel T
ID	4960094873665536
Created	4 years ago, 1631107108678
Updated	4 years ago, 1636521379442
Code	/* WhatsApp ft. Daniel T This project is a collaboration between Kevin and Daniel T. Pamela's message is adapted from "A message to the community" written on 4/12/16 by Pamela herself. Read the full message here: https://www.khanacademy.org/computer-programming/a-message-to-the-community/4441295314 Subscribe to Kevin: https://www.khanacademy.org/computer-programming/i/5657327166341120 Subscribe to Daniel T: https://www.khanacademy.org/computer-programming/i/5957400542511104 / var curScene = 1; var contacts = ["Kevin W", "Daniel T", "Pamela", "Mom", "John Doe"]; var Male1 = (function() { background(0,0); var msk = createGraphics(width,height, P2D); msk.rectMode(CENTER); msk.background(0); msk.noStroke(); msk.fill(255); msk.ellipse(26,26,50,50); msk = msk.get(); var bkg = createGraphics(width, height, P2D); bkg.rectMode(CENTER); bkg.noStroke(); bkg.fill(40, 155, 245); bkg.rect(26,26,50,50); bkg.pushMatrix(); bkg.translate(-4,-2); bkg.scale(1.2); bkg.pushMatrix(); bkg.translate(-15, -40); bkg.scale(0.7,0.7); bkg.fill(212, 145, 100); bkg.noStroke(); bkg.beginShape(); bkg.vertex(47, 110); bkg.vertex(38, 113); bkg.bezierVertex(38, 113, 33, 115, 32, 119); bkg.bezierVertex(32, 119, 29, 135, 29, 135); bkg.vertex(87, 134); bkg.vertex(83, 119); bkg.bezierVertex(83, 119, 83, 116, 79, 114); bkg.vertex(69, 110); bkg.endShape(); bkg.popMatrix(); bkg.fill(255); bkg.beginShape(); bkg.vertex(17, 37); bkg.vertex(20, 43); bkg.vertex(22, 42); bkg.bezierVertex(22, 42, 25, 45, 28, 42); bkg.vertex(30, 43); bkg.vertex(33, 37); bkg.vertex(29, 36); bkg.vertex(21, 36); bkg.endShape(); bkg.fill(247, 204, 185); bkg.beginShape(); bkg.vertex(17, 11); bkg.vertex(33, 12); bkg.vertex(34, 21); bkg.bezierVertex(34, 21, 34, 21, 34, 22); bkg.bezierVertex(34, 22, 34, 25, 33, 25); bkg.bezierVertex(33, 25, 32, 29, 28, 32); bkg.vertex(29, 36); bkg.vertex(25, 43); bkg.vertex(21, 36); bkg.vertex(21, 32); bkg.bezierVertex(21, 32, 18, 30, 17, 26); bkg.bezierVertex(17, 26, 15, 25, 15, 23); bkg.bezierVertex(15, 23, 15, 21, 16, 21); bkg.vertex(16, 12); bkg.endShape(); bkg.fill(240, 171, 143); bkg.beginShape(); bkg.vertex(25, 15); bkg.vertex(25, 21); bkg.vertex(23, 26); bkg.vertex(25, 26); bkg.vertex(25, 33); bkg.bezierVertex(25, 33, 29, 33, 31, 29); bkg.bezierVertex(31, 29, 32, 27, 33, 25); bkg.bezierVertex(33, 25, 34, 25, 34, 22); bkg.bezierVertex(34, 22, 34, 21, 33, 21); bkg.vertex(33, 13); bkg.endShape(); bkg.fill(237, 163, 134); bkg.beginShape(); bkg.vertex(21, 32); bkg.bezierVertex(21, 32, 23, 34, 28, 32); bkg.vertex(29, 35); bkg.vertex(21, 33); bkg.endShape(); // hair bkg.fill(239, 159, 38); bkg.beginShape(); bkg.vertex(33, 22); bkg.bezierVertex(33, 22, 38, 9, 29, 8); bkg.bezierVertex(29, 8, 24, 4, 20, 7); bkg.bezierVertex(20, 7, 18, 10, 15, 9); bkg.bezierVertex(15, 9, 14, 12, 16, 13); bkg.bezierVertex(16, 13, 14, 17, 16, 21); bkg.vertex(17, 21); bkg.bezierVertex(17, 21, 16, 16, 17, 15); bkg.bezierVertex(17, 15, 22, 19, 30, 14); bkg.bezierVertex(30, 14, 33, 18, 33, 22); bkg.endShape(); // glasses bkg.fill(67, 67, 80); bkg.beginShape(); bkg.vertex(16, 19); bkg.vertex(17, 19); bkg.bezierVertex(17, 19, 20, 17, 24, 19); bkg.bezierVertex(24, 19, 25, 19, 26, 19); bkg.bezierVertex(26, 19, 29, 18, 32, 19); bkg.bezierVertex(32, 19, 33, 19, 34, 19); bkg.vertex(34, 20); bkg.vertex(32, 20); bkg.bezierVertex(32, 20, 32, 19, 29, 19); bkg.bezierVertex(29, 19, 27, 19, 26, 20); bkg.bezierVertex(26, 20, 24, 20, 23, 20); bkg.bezierVertex(23, 20, 22, 19, 20, 19); bkg.bezierVertex(20, 19, 18, 19, 17, 20); bkg.vertex(16, 20); bkg.endShape(); bkg.beginShape(); bkg.vertex(17, 20); bkg.bezierVertex(17, 20, 16, 23, 18, 23); bkg.bezierVertex(18, 23, 22, 24, 23, 22); bkg.bezierVertex(23, 22, 23, 21, 23, 20); bkg.vertex(24, 20); bkg.bezierVertex(24, 20, 24, 24, 20, 24); bkg.bezierVertex(20, 24, 17, 24, 16, 23); bkg.bezierVertex(16, 23, 16, 22, 16, 20); bkg.endShape(); bkg.beginShape(); bkg.vertex(26, 20); bkg.bezierVertex(26, 20, 26, 23, 28, 23); bkg.bezierVertex(28, 23, 32, 24, 32, 22); bkg.bezierVertex(32, 22, 32, 21, 32, 20); bkg.vertex(33, 20); bkg.bezierVertex(33, 20, 34, 24, 30, 24); bkg.bezierVertex(30, 24, 27, 25, 26, 23); bkg.bezierVertex(26, 23, 25, 21, 26, 20); bkg.endShape(); // eyes bkg.fill(0); bkg.ellipse(21, 21, 3, 3); bkg.fill(255); bkg.ellipse(22, 21, 1, 1); bkg.fill(0); bkg.ellipse(28, 21, 3, 3); bkg.fill(255); bkg.ellipse(29, 21, 1, 1); bkg.fill(255, 85, 85); bkg.beginShape(); bkg.vertex(22, 28); bkg.vertex(28, 28); bkg.bezierVertex(28, 28, 28, 30, 25, 30); bkg.bezierVertex(25, 30, 22, 31, 22, 28); bkg.endShape(); bkg.fill(255); bkg.quad(23, 28, 23, 29, 27, 29, 27, 28); bkg.popMatrix(); bkg = bkg.get(); bkg.mask(msk); image(bkg,0,0); return get(); })(); var Male3 = (function() { background(0,0); var msk = createGraphics(width,height, P2D); msk.rectMode(CENTER); msk.background(0); msk.noStroke(); msk.fill(255); msk.ellipse(26,26,50,50); msk = msk.get(); var bkg = createGraphics(width, height, P2D); bkg.rectMode(CENTER); bkg.noStroke(); bkg.fill(180, 120, 200); bkg.rect(26,26,50,50); bkg.pushMatrix(); bkg.translate(0.7,1); bkg.scale(1); // suit bkg.fill(35, 31, 32); bkg.noStroke(); bkg.beginShape(); bkg.vertex(2, 56); bkg.vertex(3, 51); bkg.bezierVertex(3, 51, 2, 46, 9, 45); bkg.bezierVertex(9, 45, 18, 43, 19, 41); bkg.vertex(31, 40); bkg.bezierVertex(31, 40, 34, 43, 36, 43); bkg.bezierVertex(36, 43, 46, 45, 47, 49); bkg.bezierVertex(47, 49, 48, 50, 47, 51); bkg.vertex(48, 55); bkg.endShape(); bkg.fill(78, 76, 77); bkg.beginShape(); bkg.vertex(20, 56); bkg.vertex(16, 52); bkg.vertex(18, 49); bkg.vertex(15, 47); bkg.vertex(15, 43); bkg.bezierVertex(15, 43, 19, 42, 19, 40); bkg.vertex(31, 40); bkg.bezierVertex(31, 40, 34, 43, 35, 43); bkg.vertex(35, 47); bkg.vertex(33, 49); bkg.vertex(35, 52); bkg.vertex(31, 56); bkg.endShape(); bkg.fill(230, 231, 233); bkg.beginShape(); bkg.vertex(19, 42); bkg.vertex(20, 41); bkg.vertex(30, 41); bkg.vertex(31, 42); bkg.vertex(27, 56); bkg.vertex(23, 56); bkg.endShape(); // tie bkg.fill(28, 91, 152); bkg.beginShape(); bkg.vertex(23, 48); bkg.vertex(25, 46); bkg.vertex(25, 46); bkg.vertex(27, 48); bkg.vertex(27, 49); bkg.vertex(27, 56); bkg.vertex(24, 56); bkg.vertex(24, 49); bkg.endShape(); // face bkg.fill(242, 173, 116); bkg.beginShape(); bkg.vertex(15, 13); bkg.vertex(35, 13); bkg.vertex(36, 23); bkg.bezierVertex(36, 23, 37, 23, 37, 25); bkg.bezierVertex(37, 25, 37, 28, 35, 28); bkg.bezierVertex(35, 28, 35, 34, 30, 37); bkg.vertex(30, 41); bkg.vertex(26, 45); bkg.vertex(25, 45); bkg.vertex(20, 41); bkg.vertex(20, 37); bkg.bezierVertex(20, 37, 16, 35, 15, 28); bkg.bezierVertex(15, 28, 13, 28, 13, 26); bkg.bezierVertex(13, 26, 13, 23, 14, 23); bkg.endShape(); bkg.fill(233, 147, 86); bkg.beginShape(); bkg.vertex(25, 15); bkg.vertex(25, 22); bkg.vertex(23, 30); bkg.vertex(25, 30); bkg.vertex(25, 39); bkg.bezierVertex(25, 39, 34, 37, 35, 28); bkg.bezierVertex(35, 28, 36, 29, 37, 26); bkg.bezierVertex(37, 26, 38, 24, 36, 23); bkg.vertex(35, 14); bkg.endShape(); bkg.fill(239, 151, 96); bkg.beginShape(); bkg.vertex(20, 38); bkg.bezierVertex(20, 38, 25, 41, 30, 38); bkg.vertex(30, 41); bkg.vertex(20, 40); bkg.endShape(); // eyes bkg.fill(0); bkg.ellipse(21, 23.5, 3, 3); bkg.fill(255); bkg.ellipse(21, 22.5, 1, 1); bkg.fill(0); bkg.ellipse(30, 23.5, 3, 3); bkg.fill(255); bkg.ellipse(30, 22.5, 1, 1); // hair and beard bkg.fill(48, 29, 18); bkg.beginShape(); bkg.vertex(15, 28); bkg.vertex(16, 27); bkg.bezierVertex(16, 27, 17, 33, 20, 31); bkg.bezierVertex(20, 31, 25, 30, 31, 31); bkg.bezierVertex(31, 31, 33, 33, 35, 28); bkg.vertex(36, 28); bkg.bezierVertex(36, 28, 36, 40, 25, 40); bkg.bezierVertex(25, 40, 15, 41, 15, 28); bkg.endShape(); bkg.beginShape(); bkg.vertex(16, 28); bkg.bezierVertex(16, 28, 12, 16, 19, 14); bkg.bezierVertex(19, 14, 26, 20, 34, 16); bkg.bezierVertex(34, 16, 36, 21, 35, 28); bkg.vertex(36, 29); bkg.bezierVertex(36, 29, 36, 26, 37, 25); bkg.bezierVertex(37, 25, 39, 19, 36, 14); bkg.bezierVertex(36, 14, 39, 11, 37, 8); bkg.bezierVertex(37, 8, 35, 10, 33, 8); bkg.bezierVertex(33, 8, 24, 0, 18, 7); bkg.bezierVertex(18, 7, 8, 12, 15, 29); bkg.endShape(); // mouth bkg.fill(255, 85, 85); bkg.beginShape(); bkg.vertex(22, 32); bkg.vertex(29, 32); bkg.bezierVertex(29, 32, 29, 35, 25, 35); bkg.bezierVertex(25, 35, 22, 36, 22, 32); bkg.endShape(); bkg.fill(255); bkg.quad(22, 32, 22, 33, 28, 33, 28, 32); // galsses bkg.fill(0); bkg.beginShape(); bkg.vertex(14, 21); bkg.vertex(16, 21); bkg.bezierVertex(16, 21, 19, 19, 24, 22); bkg.bezierVertex(24, 22, 25, 21, 27, 22); bkg.bezierVertex(27, 22, 30, 19, 34, 21); bkg.bezierVertex(34, 21, 36, 21, 36, 21); bkg.vertex(36, 23); bkg.vertex(35, 23); bkg.bezierVertex(35, 23, 34, 21, 30, 21); bkg.bezierVertex(30, 21, 28, 21, 27, 22); bkg.bezierVertex(27, 22, 24, 23, 23, 22); bkg.bezierVertex(23, 22, 22, 21, 19, 21); bkg.bezierVertex(19, 21, 17, 21, 15, 23); bkg.vertex(14, 22); bkg.endShape(); bkg.beginShape(); bkg.vertex(16, 23); bkg.bezierVertex(16, 23, 14, 26, 17, 26); bkg.bezierVertex(17, 26, 21, 27, 23, 25); bkg.bezierVertex(23, 25, 23, 23, 23, 22); bkg.vertex(24, 23); bkg.bezierVertex(24, 23, 25, 28, 20, 27); bkg.bezierVertex(20, 27, 16, 28, 15, 25); bkg.bezierVertex(15, 25, 14, 25, 14, 22); bkg.endShape(); bkg.beginShape(); bkg.vertex(27, 22); bkg.bezierVertex(27, 22, 26, 26, 29, 26); bkg.bezierVertex(29, 26, 34, 27, 35, 25); bkg.bezierVertex(35, 25, 35, 23, 35, 22); bkg.vertex(35, 23); bkg.bezierVertex(35, 23, 37, 27, 32, 28); bkg.bezierVertex(32, 28, 28, 28, 26, 26); bkg.bezierVertex(26, 26, 26, 23, 26, 22); bkg.endShape(); bkg.popMatrix(); bkg = bkg.get(); bkg.mask(msk); image(bkg,0,0); return get(); })(); var DanielTContact = (function() { background(0,0); var msk = createGraphics(width,height, P2D); msk.rectMode(CENTER); msk.background(0); msk.noStroke(); msk.fill(255); msk.ellipse(26,26,50,50); msk = msk.get(); var bkg = createGraphics(width, height, P2D); bkg.rectMode(CENTER); bkg.noStroke(); bkg.fill(150, 225, 150); bkg.rect(26,26,50,50); bkg.pushMatrix(); bkg.translate(0.7,1); bkg.scale(1); // shirt bkg.fill(122, 147, 222); bkg.noStroke(); bkg.beginShape(); bkg.vertex(20, 39); bkg.vertex(9, 43); bkg.bezierVertex(9, 43, 5, 44, 5, 47); bkg.bezierVertex(5, 47, 3, 60, 3, 60); bkg.vertex(48, 59); bkg.vertex(45, 47); bkg.bezierVertex(45, 47, 45, 45, 42, 43); bkg.vertex(30, 39); bkg.endShape(); // face bkg.fill(243, 174, 117); bkg.beginShape(); bkg.vertex(34, 12); bkg.vertex(35, 21); bkg.bezierVertex(35, 21, 36, 22, 36, 24); bkg.bezierVertex(36, 24, 36, 26, 35, 27); bkg.bezierVertex(35, 27, 35, 30, 32, 32); bkg.vertex(29, 35); bkg.vertex(30, 40); bkg.bezierVertex(30, 40, 28, 43, 25, 43); bkg.bezierVertex(25, 43, 21, 43, 20, 40); bkg.vertex(21, 35); bkg.vertex(17, 31); bkg.bezierVertex(17, 31, 16, 30, 16, 27); bkg.bezierVertex(16, 27, 14, 26, 14, 24); bkg.bezierVertex(14, 24, 14, 22, 15, 21); bkg.vertex(15, 14); bkg.endShape(); bkg.fill(236, 147, 91); bkg.beginShape(); bkg.vertex(25, 15); bkg.vertex(25, 21); bkg.vertex(23, 28); bkg.vertex(25, 28); bkg.vertex(25, 36); bkg.bezierVertex(25, 36, 28, 36, 29, 35); bkg.vertex(33, 32); bkg.bezierVertex(33, 32, 35, 30, 35, 27); bkg.bezierVertex(35, 27, 37, 26, 35, 21); bkg.vertex(34, 13); bkg.vertex(29, 12); bkg.endShape(); bkg.fill(234, 132, 75); bkg.beginShape(); bkg.vertex(23, 35); bkg.bezierVertex(20, 35, 22, 36, 25, 36); bkg.bezierVertex(25, 36, 28, 36, 29, 35); bkg.vertex(30, 39); bkg.vertex(20, 36); bkg.endShape(); // hair bkg.fill(46, 28, 18); bkg.beginShape(); bkg.vertex(35, 23); bkg.vertex(34, 24); bkg.bezierVertex(34, 24, 35, 17, 31, 13); bkg.bezierVertex(31, 13, 23, 20, 16, 15); bkg.bezierVertex(16, 15, 15, 17, 15, 23); bkg.vertex(15, 23); bkg.bezierVertex(15, 23, 13, 16, 14, 13); bkg.bezierVertex(14, 13, 12, 11, 13, 8); bkg.bezierVertex(13, 8, 16, 9, 18, 7); bkg.bezierVertex(18, 7, 24, 1, 30, 6); bkg.bezierVertex(30, 6, 38, 7, 36, 17); bkg.bezierVertex(36, 17, 36, 18, 35, 23); bkg.endShape(); // mouth bkg.fill(219, 79, 79); bkg.beginShape(); bkg.vertex(22, 31); bkg.vertex(28, 31); bkg.bezierVertex(28, 31, 29, 32, 25, 32); bkg.bezierVertex(25, 32, 22, 32, 22, 31); bkg.endShape(); // eyes bkg.fill(0); bkg.ellipse(21, 22, 3, 3); bkg.fill(255); bkg.ellipse(20.5, 21.5, 1, 1); bkg.fill(0); bkg.ellipse(29, 22, 3, 3); bkg.fill(255); bkg.ellipse(28.5, 21.5, 1, 1); bkg.popMatrix(); bkg = bkg.get(); bkg.mask(msk); image(bkg,0,0); return get(); })(); var Female1 = (function() { background(0,0); var msk = createGraphics(width,height, P2D); msk.rectMode(CENTER); msk.background(0); msk.noStroke(); msk.fill(255); msk.ellipse(26,26,50,50); msk = msk.get(); var bkg = createGraphics(width, height, P2D); bkg.rectMode(CENTER); bkg.noStroke(); bkg.fill(255, 125, 155); bkg.rect(26,26,50,50); bkg.pushMatrix(); bkg.translate(0.6,1); bkg.scale(1); // shoulders bkg.fill(132, 209, 201); bkg.noStroke(); bkg.beginShape(); bkg.vertex(31, 40); bkg.bezierVertex(32, 40, 42, 40, 43, 50); bkg.bezierVertex(43, 50, 44, 56, 44, 64); bkg.vertex(7, 64); bkg.bezierVertex(7, 64, 7, 51, 8, 48); bkg.bezierVertex(8, 48, 9, 40, 21, 40); bkg.endShape(); // hair bkg.fill(60, 36, 24); bkg.beginShape(); bkg.vertex(17, 26); bkg.bezierVertex(17, 26, 11, 27, 12, 38); bkg.bezierVertex(12, 38, 13, 44, 9, 55); bkg.bezierVertex(9, 55, 19, 52, 18, 45); bkg.bezierVertex(18, 45, 18, 37, 20, 34); bkg.endShape(); // face bkg.fill(245, 202, 183); bkg.beginShape(); bkg.vertex(17, 13); bkg.bezierVertex(17, 13, 35, 11, 36, 12); bkg.bezierVertex(36, 13, 38, 24, 36, 26); bkg.bezierVertex(36, 26, 36, 26, 35, 27); bkg.bezierVertex(35, 27, 35, 32, 30, 36); bkg.vertex(30, 40); bkg.vertex(32, 40); bkg.bezierVertex(32, 40, 33, 48, 26, 49); bkg.bezierVertex(26, 49, 18, 51, 19, 40); bkg.vertex(22, 40); bkg.vertex(22, 36); bkg.bezierVertex(22, 36, 16, 32, 16, 27); bkg.bezierVertex(16, 27, 15, 27, 14, 25); bkg.bezierVertex(14, 25, 14, 22, 15, 21); bkg.endShape(); bkg.fill(238, 171, 144); bkg.beginShape(); bkg.vertex(25, 15); bkg.vertex(26, 23); bkg.vertex(23, 29); bkg.vertex(26, 29); bkg.vertex(26, 37); bkg.bezierVertex(26, 37, 34, 36, 35, 27); bkg.bezierVertex(35, 27, 37, 27, 37, 21); bkg.vertex(32, 14); bkg.endShape(); bkg.fill(237, 162, 133); bkg.beginShape(); bkg.vertex(21, 36); bkg.bezierVertex(21, 36, 25, 39, 29, 36); bkg.vertex(30, 40); bkg.vertex(22, 37); bkg.endShape(); // eyes bkg.fill(0); bkg.ellipse(21, 23, 3, 3); bkg.fill(255); bkg.ellipse(21, 23.5, 1, 1); bkg.fill(0); bkg.ellipse(31, 23, 3, 3); bkg.fill(255); bkg.ellipse(31, 23.5, 1, 1); noFill(); // eyebrows bkg.stroke(60, 36, 24); bkg.strokeWeight(0.8); bkg.strokeCap(ROUND); bkg.strokeJoin(MITER); bkg.beginShape(); bkg.vertex(17, 21); bkg.bezierVertex(17, 21, 18, 22, 18, 22); bkg.bezierVertex(18, 22, 20, 19, 22, 22); bkg.endShape(); bkg.beginShape(); bkg.vertex(34, 21); bkg.bezierVertex(34, 21, 34, 22, 33, 22); bkg.bezierVertex(33, 22, 31, 19, 29, 22); bkg.endShape(); // MOUTH bkg.fill(255, 85, 85); bkg.noStroke(); bkg.beginShape(); bkg.vertex(22, 31); bkg.vertex(29, 31); bkg.bezierVertex(29, 31, 29, 34, 26, 34); bkg.bezierVertex(26, 34, 22, 35, 22, 31); bkg.endShape(); // teeth bkg.fill(255); bkg.quad(23, 31, 23, 32, 28, 32, 28, 31); // earrings bkg.fill(134, 209, 213); bkg.ellipse(36, 27, 2, 2); bkg.ellipse(15, 27, 2, 2); // hair bkg.fill(60, 36, 24); bkg.beginShape(); bkg.vertex(36, 22); bkg.bezierVertex(36, 22, 43, 10, 29, 4); bkg.bezierVertex(29, 4, 24, 2, 19, 5); bkg.bezierVertex(19, 5, 10, 11, 15, 22); bkg.bezierVertex(15, 22, 19, 19, 22, 14); bkg.bezierVertex(22, 14, 24, 18, 28, 19); bkg.bezierVertex(28, 19, 26, 18, 26, 16); bkg.bezierVertex(26, 16, 29, 20, 33, 20); bkg.bezierVertex(33, 20, 31, 18, 31, 17); bkg.bezierVertex(31, 17, 33, 20, 36, 22); bkg.endShape(); bkg.popMatrix(); bkg = bkg.get(); bkg.mask(msk); image(bkg,0,0); return get(); })(); var Female2 = (function() { background(0,0); var msk = createGraphics(width,height, P2D); msk.rectMode(CENTER); msk.background(0); msk.noStroke(); msk.fill(255); msk.ellipse(26,26,50,50); msk = msk.get(); var bkg = createGraphics(width, height, P2D); bkg.rectMode(CENTER); bkg.noStroke(); bkg.fill(255, 175, 120); bkg.rect(26,26,50,50); bkg.pushMatrix(); bkg.translate(0.7,1); bkg.scale(1); // shoulders bkg.fill(66, 64, 77); bkg.noStroke(); bkg.beginShape(); bkg.vertex(9, 52); bkg.bezierVertex(9, 52, 9, 40, 22, 40); bkg.vertex(31, 40); bkg.bezierVertex(31, 40, 39, 40, 42, 52); bkg.endShape(); bkg.fill(49, 49, 56); bkg.beginShape(); bkg.vertex(16, 42); bkg.vertex(21, 40); bkg.vertex(31, 40); bkg.vertex(34, 43); bkg.vertex(30, 44); bkg.vertex(31, 47); bkg.vertex(27, 51); bkg.vertex(23, 51); bkg.vertex(19, 46); bkg.vertex(21, 44); bkg.endShape(); bkg.fill(238, 94, 68); bkg.quad(23, 49, 27, 49, 27, 52, 23, 52); // face bkg.fill(190, 136, 90); bkg.beginShape(); bkg.vertex(18, 14); bkg.vertex(34, 15); bkg.vertex(33, 21); bkg.vertex(33, 23); bkg.bezierVertex(33, 23, 35, 23, 35, 25); bkg.bezierVertex(35, 25, 35, 28, 34, 28); bkg.bezierVertex(34, 28, 33, 34, 29, 36); bkg.vertex(29, 40); bkg.vertex(29, 40); bkg.vertex(27, 49); bkg.vertex(23, 49); bkg.vertex(21, 40); bkg.vertex(22, 40); bkg.vertex(22, 36); bkg.bezierVertex(22, 36, 17, 33, 16, 29); bkg.bezierVertex(16, 29, 15, 28, 15, 26); bkg.bezierVertex(15, 26, 14, 24, 17, 23); bkg.vertex(17, 19); bkg.endShape(); bkg.fill(186, 113, 68); bkg.beginShape(); bkg.vertex(25, 15); bkg.vertex(25, 25); bkg.vertex(24, 30); bkg.vertex(25, 31); bkg.vertex(25, 38); bkg.bezierVertex(25, 38, 32, 37, 34, 28); bkg.bezierVertex(34, 28, 36, 28, 35, 25); bkg.bezierVertex(35, 25, 35, 23, 33, 23); bkg.vertex(34, 19); bkg.endShape(); bkg.fill(184, 107, 59); bkg.beginShape(); bkg.vertex(22, 36); bkg.bezierVertex(22, 36, 23, 39, 29, 36); bkg.vertex(29, 40); bkg.vertex(22, 38); bkg.endShape(); // hair bkg.fill(60, 36, 24); bkg.beginShape(); bkg.vertex(30, 40); bkg.bezierVertex(30, 40, 30, 40, 29, 39); bkg.vertex(29, 39); bkg.bezierVertex(29, 39, 31, 40, 33, 38); bkg.bezierVertex(33, 38, 36, 39, 36, 36); bkg.bezierVertex(36, 36, 37, 35, 37, 34); bkg.bezierVertex(37, 34, 39, 33, 39, 31); bkg.bezierVertex(39, 31, 40, 30, 39, 29); bkg.bezierVertex(39, 29, 42, 28, 40, 25); bkg.bezierVertex(40, 25, 42, 22, 40, 21); bkg.bezierVertex(40, 21, 40, 20, 39, 19); bkg.bezierVertex(39, 19, 41, 17, 38, 15); bkg.bezierVertex(38, 15, 38, 14, 38, 13); bkg.bezierVertex(38, 13, 39, 10, 35, 10); bkg.bezierVertex(35, 10, 36, 6, 32, 8); bkg.bezierVertex(32, 8, 31, 6, 29, 6); bkg.bezierVertex(29, 6, 28, 5, 27, 6); bkg.bezierVertex(27, 6, 25, 2, 21, 6); bkg.bezierVertex(21, 6, 20, 6, 19, 7); bkg.bezierVertex(19, 7, 18, 6, 17, 8); bkg.bezierVertex(17, 8, 13, 8, 14, 11); bkg.bezierVertex(14, 11, 12, 12, 13, 13); bkg.bezierVertex(13, 13, 10, 14, 11, 17); bkg.bezierVertex(11, 17, 10, 17, 11, 18); bkg.bezierVertex(11, 18, 7, 21, 10, 23); bkg.bezierVertex(10, 23, 9, 24, 10, 25); bkg.bezierVertex(10, 25, 9, 27, 11, 28); bkg.bezierVertex(11, 28, 9, 30, 12, 31); bkg.bezierVertex(12, 31, 11, 33, 13, 34); bkg.bezierVertex(13, 34, 13, 36, 15, 36); bkg.bezierVertex(15, 36, 16, 39, 18, 39); bkg.bezierVertex(18, 39, 18, 40, 19, 40); bkg.bezierVertex(21, 40, 22, 40, 22, 40); bkg.vertex(22, 36); bkg.bezierVertex(22, 36, 18, 34, 16, 28); bkg.bezierVertex(16, 28, 15, 28, 15, 25); bkg.bezierVertex(15, 25, 15, 23, 17, 23); bkg.vertex(17, 21); bkg.bezierVertex(17, 21, 20, 22, 21, 19); bkg.bezierVertex(21, 19, 23, 19, 23, 17); bkg.bezierVertex(23, 17, 24, 16, 25, 15); bkg.bezierVertex(25, 15, 26, 17, 27, 17); bkg.bezierVertex(27, 17, 28, 19, 30, 19); bkg.bezierVertex(30, 19, 30, 22, 33, 21); bkg.vertex(33, 23); bkg.bezierVertex(33, 23, 35, 23, 35, 26); bkg.bezierVertex(35, 26, 36, 27, 34, 28); bkg.bezierVertex(34, 28, 33, 33, 29, 36); bkg.vertex(29, 40); bkg.endShape(); bkg.fill(246, 80, 53); bkg.beginShape(); bkg.vertex(22, 32); bkg.bezierVertex(25, 32, 28, 32, 28, 32); bkg.bezierVertex(28, 32, 28, 35, 25, 35); bkg.bezierVertex(25, 35, 22, 35, 22, 32); bkg.endShape(); bkg.fill(255); bkg.quad(23, 32, 23, 33, 27, 33, 27, 32); // eyes bkg.fill(0); bkg.ellipse(21, 25, 3, 3); bkg.fill(255); bkg.ellipse(21.5, 24.5, 1, 1); bkg.fill(0); bkg.ellipse(30, 25, 3, 3); bkg.fill(255); bkg.ellipse(30.5, 24.5, 1, 1); // eyebrows bkg.noFill(); bkg.stroke(60, 36, 24); bkg.strokeWeight(0.7); bkg.strokeCap(ROUND); bkg.strokeJoin(MITER); bkg.beginShape(); bkg.vertex(18, 23); bkg.bezierVertex(18, 23, 18, 24, 19, 24); bkg.bezierVertex(19, 24, 20, 21, 22, 24); bkg.endShape(); bkg.beginShape(); bkg.vertex(32, 23); bkg.bezierVertex(32, 23, 32, 24, 32, 24); bkg.bezierVertex(32, 24, 30, 21, 28, 24); bkg.endShape(); // earrings bkg.fill(222, 84, 73); bkg.noStroke(); bkg.quad(34, 28, 34, 30, 33, 30, 34, 28); bkg.quad(16, 28, 16, 29, 17, 30, 16, 30); bkg.popMatrix(); bkg = bkg.get(); bkg.mask(msk); image(bkg,0,0); return get(); })(); var PhoneIcon = function(x, y, s){ pushMatrix(); translate(x,y); scale(s); noStroke(); fill(4, 138, 125); beginShape(); vertex(-12, -12); vertex(-4, -12); vertex(-3, -4); bezierVertex(-3, -4, -6, -3, -6, -2); bezierVertex(-6, -2, -5, 5, 2, 7); bezierVertex(2, 7, 4, 6, 5, 4); vertex(12, 5); vertex(13, 12); bezierVertex(13, 12, -13, 15, -12, -12); endShape(); popMatrix(); }; function drawCamera (x, y, size, bgCol, ellipseCol) { pushMatrix(); translate(x, y); scale(size); fill(bgCol); noStroke(); rect(0, 0, 30, 22, 5); //main rect rect(30/2 - 16/2, -5, 16, 10, 5); //top rect stroke(ellipseCol); strokeWeight(2); ellipse(30/2, 22/2, 12, 12); //center ellipse popMatrix(); } function drawMic (x, y, size, bgCol) { pushMatrix(); translate(x, y); scale(size); noFill(); stroke(255); strokeWeight(6); ellipse(0, 0, 40, 40); line(0, 20, 0, 35); fill(bgCol); noStroke(); rectMode(CENTER); rect(0, -10, 50, 25); fill(255); ellipse(-20, 2.5, 5.5, 6); ellipse(20, 2.5, 5.5, 6); fill(255); rect(0, -10, 20, 40, 15); rectMode(CORNER); //return rectMode popMatrix(); } function drawProfile (x, y, name) { //background fill(210); noStroke(); ellipse(x, y + 80/2, 50, 50); //image var images = [Male1, DanielTContact, Female1, Female2, Male3]; if (name === "You") { fill(255); ellipse(x, y + 35, 18, 18); ellipse(x, y + 55, 30, 15); } for (var i = 0; i < contacts.length; i++) { if (name === contacts[i]) { image(images[i], x - 26, y + 14); } } } var button = function (config) { this.x = config.x \|\| 5; this.y = config.y \|\| 60; this.w = config.w \|\| width - 10; this.h = config.h \|\| 80; this.message = config.message \|\| "NOT NOW"; this.shape = config.shape \|\| "rect"; this.selected = config.selected \|\| false; this.time = config.time \|\| ""; }; var chatsButton = new button ({x:70, w:100, h: 45, message: "CHATS", selected: true}); var statusButton = new button ({x: 170, w: 100, h: 45, message: "STATUS"}); var callsButton = new button ({x: 270, w: 100, h: 45, message: "CALLS"}); var cameraButton = new button ({x: -0.01, w: 70, h: 45}); var menuButton = new button ({x: 365, y: 30, w: 40, h: 40, shape: "ellipse"}); var cmrNotNowBtn = new button ({x: 215, y: 285, w: 100, h: 35}); var menuBtn = { //menuBtn.y is declared in popup.prototype.menu() linked: new button ({x: 220, w: 170, h: 135/3, message: "Linked devices"}), starred: new button ({x: 220, w: 170, h: 135/3, message: "Starred messages"}), settings: new button ({x: 220, w: 170, h: 135/3, message: "Settings"}) }; var menuBtns = [menuBtn.linked, menuBtn.starred, menuBtn.settings]; var stsCameraBtn = new button ({y: 110}); var stsNotNowBtn = new button ({x: 215, y: 315, w: 100, h: 35}); var calls = { //calls.button is declared in callsScene() button: [], selected: false, randomOnce: true }; var callNotNowBtn = new button ({x: 215, y: 315, w: 100, h: 35}); var backButton = new button ({x: 20 + 45/2, y: 65/2, w: 45, h: 45, shape: "ellipse"}); var linked = { //linked.button.y is declared in linkedScene() button: [new button ({}), new button ({}), new button ({}), new button ({})], time: [floor(random(1, 13)) + ":" + floor(random(10, 60)) + " am", floor(random(1, 13)) + ":" + floor(random(10, 60)) + " pm", floor(random(1, 13)) + ":" + floor(random(10, 60)) + " am", floor(random(1, 13)) + ":" + floor(random(10, 60)) + " am"] }; var profileButton = new button ({y: 75}); var settings = { chats: new button ({y: 175}), notif: new button ({y: 255}), storage: new button ({y: 335}) }; var stgChats = { theme: new button ({y: 115}), media: { btn: new button ({y: 255}), innerX: 0 }, font: new button ({y: 335}), }; var stgNotif = { tone: { btn: new button ({y: 75}), innerX: 0 }, vibrate: [new button ({y: 215}), new button ({y: 355})] }; var stgStorage = { manage: new button ({y: 75}), usage: new button ({y: 175}), data: { btn: new button ({y: 255}), innerX: 0 } }; var chats = { button: [new button ({}), new button ({}), new button ({}), new button ({}), new button ({})], pos: [0, 1, 2, 3, 4] }; var chatsBackBtn = new button ({x: 10 + 45/2, y: 35, w: 45, h: 45, shape: "ellipse"}); var micButton = new button ({x: 368 , y: 462, w: 44, h: 44, shape: "ellipse"}); var micNotNowBtn = new button ({x: 215, y: 315, w: 100, h: 35}); var chatsMenuBtn = new button ({x: 390-45/2, y: 35, w: 45, h: 45, shape: "ellipse"}); var chatsStgBtn = new button ({x: 220, w: 170, h: 135/3, message: "Settings"}); var reply = { btn: [new button ({x: 10, y: 440, w: 158, h: 45}), new button ({x: 177, y: 440, w: 158, h: 45})], message: ["", ""] }; button.prototype.isMouseInside = function() { if (this.shape === "rect") { return mouseX >= this.x && mouseX <= this.x + this.w && mouseY >= this.y && mouseY <= this.y + this.h; } else if (this.shape === "ellipse") { return abs(mouseX - this.x) <= this.w/2 && abs(mouseY - this.y) <= this.h/2; } }; button.prototype.background = function() { if (this.isMouseInside()) { fill(240); noStroke(); rect(this.x, this.y, this.w, this.h, 10); } }; button.prototype.topPanel = function(which) { //button background if (this.isMouseInside()) { fill(255, 255, 255, 15); noStroke(); if (this.shape === "rect") { rect(this.x, this.y, this.w, this.h, 5); } else if (this.shape === "ellipse") { ellipse(this.x, this.y, this.w, this.h); } } if (which === "main") { //bottom white rect if (this.selected) { fill(255); rect(this.x, this.y + this.h - 3, this.w, 5, 10); } //main text if (this.selected) { fill(255); textFont(createFont("sans-serif Bold"), 15); } else { fill(205); textFont(createFont("sans-serif"), 15); } textAlign(CENTER, CENTER); text(this.message, this.x + this.w/2, this.y + this.h/2); } else if (which === "camera") { drawCamera(this.x + 20, this.y + 15, 0.85, color(255), color(10, 95, 85)); } else if (which === "menu") { fill(255); noStroke(); ellipse(this.x, this.y - 6, 5, 5); ellipse(this.x, this.y, 5, 5); ellipse(this.x, this.y + 6, 5, 5); } }; button.prototype.notNow = function() { //background this.background(); fill(30, 190, 165); textFont(createFont("sans-serif Bold"), 15); textAlign(CENTER, CENTER); text(this.message, this.x + this.w/2, this.y + this.h/2); }; button.prototype.menu = function() { //background this.background(); fill(0); textAlign(CORNER, CENTER); textFont(createFont("sans-serif"), 15); text(this.message, this.x + 15, this.y + this.h/2); }; button.prototype.status = function() { //background this.background(); //profile picture drawProfile(this.x + 50, this.y, "You"); //add button fill(35, 210, 100); ellipse(this.x + 65, this.y + 60, 20, 20); fill(255); textFont(createFont("sans-serif Bold"), 15); textAlign(CENTER, CENTER); text("+", this.x + 65, this.y + 62); //text fill(0); textFont(createFont("sans-serif Bold"), 15); textAlign(CORNER, CENTER); text("My Status", this.x + 90, this.y + 30); fill(75); textFont(createFont("sans-serif"), 13); text("Tap to add status update", this.x + 90, this.y + this.h - 30); }; button.prototype.calls = function(num) { //declare date array var currentMonth; var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; if (month() === 1) { currentMonth = 12; } else { currentMonth = months[month() - 2]; } var date = [ "27 " + currentMonth + ", 11:25 am", "26 " + currentMonth + ", 9:30 pm", "24 " + currentMonth + ", 2:00 am", "20 " + currentMonth + ", 7:45 pm" ]; //background this.background(); //profile picture drawProfile(this.x + 50, this.y, this.message); //dial in/out image if (num === 0 \|\| num === 3) { stroke(35, 210, 100); strokeWeight(1.5); line(this.x + 90, this.y + 55, this.x + 100, this.y + 45); line(this.x + 90, this.y + 55, this.x + 90, this.y + 49); line(this.x + 90, this.y + 55, this.x + 96, this.y + 55); } else { stroke(245, 0, 0); strokeWeight(1.5); line(this.x + 90, this.y + 55, this.x + 100, this.y + 45); line(this.x + 100, this.y + 45, this.x + 94, this.y + 45); line(this.x + 100, this.y + 45, this.x + 100, this.y + 51); } //text fill(0); textFont(createFont("sans-serif Bold"), 15); textAlign(CORNER, CENTER); text(this.message, this.x + 90, this.y + 30); fill(75); textFont(createFont("sans-serif"), 13); text(date[num], this.x + 110, this.y + this.h - 30); //phone image PhoneIcon(this.x + this.w - 40, this.y + this.h/2, 1); }; button.prototype.back = function() { if (this.isMouseInside()) { fill(255, 255, 255, 15); noStroke(); ellipse(this.x, this.y, this.w, this.h); } stroke(255); strokeWeight(3); line(this.x - this.w/2 + 12, this.y, this.x + this.w/2 - 12, this.y); line(this.x - this.w/2 + 12, this.y, this.x - this.w/2 + 18, this.y - 6); line(this.x - this.w/2 + 12, this.y, this.x - this.w/2 + 18, this.y + 6); }; button.prototype.linked = function(num) { //background this.background(); //windows logo fill(20, 140, 125); noStroke(); ellipse(this.x + 50, this.y + this.h/2, 50, 50); fill(255); rectMode(CENTER); rect(this.x + 50, this.y + this.h/2, 20, 20); rectMode(CORNER); //return rectMode stroke(20, 140, 125); strokeWeight(2); line(this.x + 50, this.y + this.h/2 - 20, this.x + 50, this.y + this.h/2 + 20); line(this.x + 30, this.y + this.h/2, this.x + 70, this.y + this.h/2); strokeWeight(3); line(this.x + 35, this.y + this.h/2 - 9, this.x + 65, this.y + this.h/2 - 12); line(this.x + 35, this.y + this.h/2 + 9, this.x + 65, this.y + this.h/2 + 12); //text fill(0); textFont(createFont("sans-serif Bold")); text("Windows", this.x + 90, this.y + 30); textFont(createFont("sans-serif")); text("Last active yesterday at " + linked.time[num], this.x + 90, this.y + this.h - 30); }; button.prototype.innerBtn = function(x) { if (this.selected) { fill(30, 190, 165); } else { fill(175); } noStroke(); rectMode(CENTER); rect(this.x + this.w - 27/2 - 30, this.y + this.h/2, 27, 20, 15); rectMode(CORNER); //return rectMode if (this.selected) { fill(20, 140, 125); } else { fill(220); } ellipse(this.x + this.w - 32 - 30 + x, this.y + this.h/2, 30, 30); }; button.prototype.settings = function(title, subtitle) { //background this.background(); //text fill(0); textFont(createFont("sans-serif Bold"), 15); textAlign(CORNER, CENTER); text(title, this.x + 90, this.y + 30); fill(75); textFont(createFont("sans-serif"), 13); text(subtitle, this.x + 90, this.y + this.h - 30); //images if (title === "You") { drawProfile(this.x + 50, this.y, "You"); } else if (title === "Chats") { //main rect fill(20, 140, 125); noStroke(); rectMode(CENTER); rect(this.x + 50, this.y + this.h/2, 30, 20, 5); rectMode(CORNER); //return rectMode //right covers if (this.isMouseInside()) { stroke(240); } else { stroke(255); } strokeWeight(5); line(this.x + 65 - 2, this.y + this.h/2, this.x + 65 - 2, this.y + this.h/2 + 10); strokeWeight(4); line(this.x + 65 - 2, this.y + this.h/2, this.x + 65, this.y + this.h/2 - 5); //middle lines stroke(255); strokeWeight(2); line(this.x + 42, this.y + this.h/2, this.x + 53, this.y + this.h/2); line(this.x + 42, this.y + this.h/2 + 5, this.x + 50, this.y + this.h/2 + 5); } else if (title === "Notifications") { pushMatrix(); translate(this.x + 50, this.y + this.h/2); scale(0.85); fill(20, 140, 125); noStroke(); rectMode(CENTER); rect(0, -1, 21, 22, 25); rect(0, 7, 27, 6, 10); fill(20, 140, 125); ellipse(0, -12, 6, 6); ellipse(0, 11, 8, 8); //rect cover if (this.isMouseInside()) { fill(240); } else { fill(255); } rect(0, 10, 25, 2); rectMode(CORNER); //return rectMode popMatrix(); } else if (title === "Storage and Data" \|\| title === "Network usage") { //main ellipse noFill(); stroke(20, 140, 125); strokeWeight(4); ellipse(this.x + 50, this.y + this.h/2, 22, 22); //cover points if (this.isMouseInside()) { stroke(240); } else { stroke(255); } strokeWeight(5); point(this.x + 50, this.y + this.h/2 - 25/2 + 1); point(this.x + 58, this.y + this.h/2 + 8); } else if (title === "Theme") { pushMatrix(); translate(this.x + 50, this.y + this.h/2 - 1); fill(20, 140, 125); noStroke(); rectMode(CENTER); rect(0, 0, 23, 23); rotate(45); rect(0, 0, 23, 23); popMatrix(); fill(255); ellipse(this.x + 50, this.y + this.h/2 - 1, 14, 14); fill(20, 140, 125); rect(this.x + 50 - 5, this.y + this.h/2 - 1, 10, 22); rectMode(CORNER); //return rectMode } else if (title === "Manage storage") { fill(20, 140, 125); noStroke(); rectMode(CENTER); rect(this.x + 50, this.y + this.h/2, 29, 22, 5); if (this.isMouseInside()) { fill(240); } else { fill(255); } rect(this.x + 58, this.y + this.h/2 - 10, 15, 5); fill(20, 140, 125); rect(this.x + 44, this.y + this.h/2 - 10, 17, 5, 5); rectMode(CORNER); //return rectMode } //inner button if (title === "Media visibility") { //animate if (this.selected) { if (stgChats.media.innerX < 35) { stgChats.media.innerX += 5; } } if (!this.selected) { if (stgChats.media.innerX > 0) { stgChats.media.innerX -= 5; } } //draw this.innerBtn(stgChats.media.innerX); } else if (title === "Use less data for calls") { //animate if (this.selected) { if (stgStorage.data.innerX < 35) { stgStorage.data.innerX += 5; } } if (!this.selected) { if (stgStorage.data.innerX > 0) { stgStorage.data.innerX -= 5; } } //draw this.innerBtn(stgStorage.data.innerX); } }; button.prototype.leftStg = function(title, subtitle) { //background this.background(); //text fill(0); textFont(createFont("sans-serif Bold"), 15); textAlign(CORNER, CENTER); text(title, this.x + 15, this.y + 30); fill(75); textFont(createFont("sans-serif"), 13); text(subtitle, this.x + 15, this.y + this.h - 30); //inner button if (title === "Conversation tones") { //animate if (this.selected) { if (stgNotif.tone.innerX < 35) { stgNotif.tone.innerX += 5; } } if (!this.selected) { if (stgNotif.tone.innerX > 0) { stgNotif.tone.innerX -= 5; } } //draw this.innerBtn(stgNotif.tone.innerX); } }; button.prototype.chats = function(name, hDif) { //background this.background(); //text fill(0); textFont(createFont("sans-serif Bold"), 15); textAlign(CORNER, CENTER); text(name, this.x + 90, this.y + 30); fill(75); textFont(createFont("sans-serif"), 13); text(this.message, this.x + 90, this.y + this.h - hDif, 200, 30); if (this.time === "") { textSize(12); text("yesterday", this.x + this.w - 75, this.y + 23); } else { textSize(12); textAlign(CENTER, CENTER); text(this.time, this.x + this.w - 40, this.y + 23); } //notification ellipse if (!this.selected) { fill(35, 210, 100); ellipse(this.x + this.w - 45, this.y + this.h/2 + 12, 20, 20); fill(255); textFont(createFont("sans-serif Bold"), 12); textAlign(CENTER, CENTER); text("1", this.x + this.w - 45, this.y + this.h/2 + 12); } //image drawProfile(this.x + 50, this.y, name); }; button.prototype.microphone = function() { //main ellipse fill(20, 140, 125); noStroke(); ellipse(this.x, this.y, this.w, this.h); //microphone image drawMic(this.x, this.y + this.h/2 - 23, 0.35, color(20, 140, 125)); //cover if (this.isMouseInside()) { fill(255, 255, 255, 30); ellipse(this.x, this.y, this.w, this.h); } }; button.prototype.reply = function(num) { //change variables when conversation has ended if (num === 1) { if (reply.message[0] === undefined) { this.x = 10; this.w = 325; reply.message[1] = "End of conversation"; } else { this.x = 177; this.w = 158; } } //shadow fill(75); noStroke(); rect(this.x + 1, this.y + 1, this.w, this.h, 25); //main rect fill(255); rect(this.x, this.y, this.w, this.h, 25); //text textFont(createFont("sans-serif"), 15); if (reply.message[0] !== undefined) { fill(0); textAlign(CENTER, CENTER); text(reply.message[num], this.x + this.w/2, this.y + this.h/2); } else { fill(100); textAlign(CORNER, CENTER); text(reply.message[num], this.x + 40, this.y + this.h/2); } //cover if (this.isMouseInside() && reply.message[0] !== undefined) { fill(0, 0, 0, 20); rect(this.x, this.y, this.w, this.h, 25); } }; var popup = function (config) { this.x = config.x \|\| width/2 - 275/2; this.y = config.y \|\| 140; this.w = config.w \|\| 275; this.h = config.h \|\| 220; }; var cameraPopUp = new popup ({y: 110}); var menuPopUp = new popup ({x: 220, y: -140, w: 170, h: 135}); var statusPopUp = new popup ({}); var callsPopUp = new popup ({}); var recordPopUp = new popup ({}); var chatsPopUp = new popup ({x: 220, y: -140, w: 170, h: 135/3}); popup.prototype.camera = function(which) { var message; //background fill(0, 0, 0, 100); noStroke(); rect(0, 0, width, height); //main rect fill(255); rect(this.x, this.y, this.w, this.h, 10); //top green rect fill(30, 190, 165); rect(this.x, this.y, this.w, this.h/2, 10); rect(this.x, this.y + this.h/2 - 10, this.w, 10); //camera image drawCamera(this.x + this.w/2 - (30 1.5)/2, this.y + 45, 1.5, color(255), color(30, 190, 165)); //text if (which === "camera") { message = "To capture photos and videos, allow\nWhatsApp access to your camera."; } else if (which === "status") { message = "To send a status update, allow\nWhatsApp access to your camera."; } fill(0); textFont(createFont("sans-serif"), 13); textAlign(CORNER, CENTER); text(message, this.x + 20, this.y + 145); //close button if (which === "camera") { cmrNotNowBtn.notNow(); } else if (which === "status") { stsNotNowBtn.notNow(); } }; popup.prototype.menu = function() { if (curScene >= 1 && curScene <= 3) { //animate if (menuButton.selected) { if (menuPopUp.y < 10) { menuPopUp.y += 15; } } else { if (menuPopUp.y > -140) { menuPopUp.y -= 15; } } //draw if (menuButton.selected \|\| (!menuButton.selected && menuPopUp.y !== -140)) { //background fill(0, 0, 0, 45); noStroke(); rect(0, 0, width, height); //main rect fill(255); noStroke(); rect(this.x, this.y, this.w, this.h, 5); //buttons for (var i = 0; i < menuBtns.length; i++) { menuBtns[i].y = this.y + this.h/3 * i; menuBtns[i].menu(); } } } if (curScene === 11) { //animate if (chatsMenuBtn.selected) { if (chatsPopUp.y < 10) { chatsPopUp.y += 15; } } else { if (chatsPopUp.y > -140) { chatsPopUp.y -= 15; } } //draw if (chatsMenuBtn.selected \|\| (!chatsMenuBtn.selected && chatsPopUp.y !== -140)) { //background fill(0, 0, 0, 45); noStroke(); rect(0, 0, width, height); //main rect fill(255); noStroke(); rect(this.x, this.y, this.w, this.h, 5); //button chatsStgBtn.y = this.y; chatsStgBtn.menu(); } } }; popup.prototype.microphone = function(which) { var message; //background fill(0, 0, 0, 100); noStroke(); rect(0, 0, width, height); //main rect fill(255); rect(this.x, this.y, this.w, this.h, 10); //top green rect fill(30, 190, 165); rect(this.x, this.y, this.w, this.h/2, 10); rect(this.x, this.y + this.h/2 - 10, this.w, 10); //microphone image drawMic(this.x + this.w/2, this.y + this.h/4 - 2.5, 0.7, color(30, 190, 165)); //text if (which === "call") { message = "To call, allow WhatsApp access to your\nmicrophone."; } else if (which === "record") { message = "To record a Voice Message, allow\nWhatsApp access to your microphone."; } fill(0); textFont(createFont("sans-serif"), 13); textAlign(CORNER, CENTER); text(message, this.x + 20, this.y + 145); //close button if (which === "call") { callNotNowBtn.notNow(); } else if (which === "record") { micNotNowBtn.notNow(); } }; var message = function (config) { this.x = config.x \|\| 35; this.y = config.y \|\| 90; this.w = config.w \|\| 250; this.h = config.h \|\| 40; this.message = config.message; this.time = config.time \|\| 0; this.opacity = [255, 255, 255]; }; var chatTitle = "Kevin W"; var kevin = { curChat: 1, choice: [], bot: [new message ({h: 80, message: "Hi there! Thank you for taking your time to try out this project! How do you like it so far?", time: 2})], user: [] }; var daniel = { curChat: 1, choice: [], bot: [new message ({h: 45, message: "Hey, a quick question for you!", time: 2}), new message ({y: 145, h: 65, message: "What's the most important thing about being a programmer?", time: 2})], user: [] }; var pamela = { curChat: 1, choice: [], bot: [new message ({h: 65, message: "You are my absolute favorite part of KA!", time: 2})], user: [] }; var mom = { curChat: 1, choice: [], bot: [new message ({h: 65, message: "How's your exam today? Do you pass?", time: 2})], user: [] }; var john = { curChat: 1, choice: [], bot: [new message ({h: 65, message: "Do you fancy watching Netflix tonight?", time: 2})], user: [] }; var contactList = [kevin, daniel, pamela, mom, john]; function changeReply() { if (chatTitle === "Kevin W") { if (kevin.curChat === 1) { reply.message = ["It's dope!", "Awful"]; } if (kevin.curChat === 2) { if (kevin.choice[0] === "left") { reply.message = ["Pamela?", "Read it already."]; } else if (kevin.choice[0] === "right") { reply.message = []; } } if (kevin.curChat === 3) { reply.message = []; } } if (chatTitle === "Daniel T") { if (daniel.curChat === 1) { reply.message = ["What?", "You tell me."]; } if (daniel.curChat === 2) { reply.message = []; } } if (chatTitle === "Pamela") { if (pamela.curChat === 1) { reply.message = ["How?", "What?"]; } if (pamela.curChat === 2) { reply.message = ["Awesome!", "Cool!"]; } if (pamela.curChat === 3) { reply.message = []; } } if (chatTitle === "Mom") { if (mom.curChat === 1) { reply.message = ["Yup!", "No.."]; } if (mom.curChat === 2) { if (mom.choice[0] === "left") { reply.message = ["Thanks mom", "Yeah"]; } else if (mom.choice[0] === "right") { reply.message = ["But..", "Yeah"]; } } if (mom.curChat === 3) { reply.message = []; } } if (chatTitle === "John Doe") { if (john.curChat === 1) { reply.message = ["Nah, I'm coding.", "Sure"]; } if (john.curChat === 2) { reply.message = []; } } } message.prototype.drawBot = function() { //animate if (this.time < 2) { this.time += 0.025; } //typing animation if (this.time < 2) { //shadow fill(75); noStroke(); rect(this.x + 1, this.y + 1, 75, 50, 10); //main speech bubble fill(255); rect(this.x, this.y, 75, 50, 10); triangle(this.x + 20, this.y, this.x - 15, this.y, this.x, this.y + 15); //animate loading bubbles this.opacity[0] -= 3.5; this.opacity[1] -= 4.5; this.opacity[2] -= 5.5; for (var i = 0; i < 3; i++) { if (this.opacity[i] < 0) { this.opacity[i] = 255; } fill(0, 0, 0, this.opacity[i]); ellipse(this.x + 22 + 15 * i, this.y + 50/2, 10, 10); } } //main message if (this.time >= 2) { //shadow fill(75); noStroke(); rect(this.x + 1, this.y + 1, this.w, this.h, 10); //main speech bubble fill(255); rect(this.x, this.y, this.w, this.h, 10); triangle(this.x + 20, this.y, this.x - 15, this.y, this.x, this.y + 15); //text fill(0); textFont(createFont("sans-serif"), 14); textAlign(CORNER, CORNER); text(this.message, this.x + 15, this.y + 18, this.w - 30, this.h - 30); } }; message.prototype.drawUser = function() { this.x = 360 - this.w; //shadow fill(75); noStroke(); rect(this.x + 1, this.y + 1, this.w, this.h, 10); triangle(this.x + this.w - 20 + 2, this.y, this.x + this.w + 15 + 2, this.y, this.x + this.w + 2, this.y + 15); //main speech bubble fill(220, 250, 200); noStroke(); rect(this.x, this.y, this.w, this.h, 10); triangle(this.x + this.w - 20, this.y, this.x + this.w + 15, this.y, this.x + this.w, this.y + 15); fill(0); textFont(createFont("sans-serif"), 15); textAlign(CORNER, CORNER); text(this.message, this.x + 15, this.y + 25); }; var sceneCover = { y: [105, 105, 105, 0, 65, 65, 65, 65, 65, 65, 70], opacity: [255, 255, 255, 0, 255, 255, 255, 255, 255, 255, 255] }; function anmFadeIn() { for (var i = 0; i < sceneCover.y.length; i++) { if (curScene === (i + 1)) { //animate if (sceneCover.opacity[i] > 0) { sceneCover.opacity[i] -= 12; } //draw cover fill(255, 255, 255, sceneCover.opacity[i]); noStroke(); rect(0, sceneCover.y[i], width, height - sceneCover.y[i]); } else { //return opacity variable sceneCover.opacity[i] = 255; } } } function topPanel() { //background fill(5, 105, 90); noStroke(); rect(0, 0, width, 105); //whatsapp logo fill(255); textFont(createFont("sans-serif Bold"), 20); textAlign(CORNER, CENTER); text("WhatsApp", 20, 30); //buttons chatsButton.topPanel("main"); statusButton.topPanel("main"); callsButton.topPanel("main"); cameraButton.topPanel("camera"); menuButton.topPanel("menu"); } function menuPanel() { var title; //background fill(5, 105, 90); noStroke(); rect(0, 0, width, 65); //title if (curScene === 5) { title = "Linked devices"; } else if (curScene === 6) { title = "Starred messages"; } else if (curScene === 7) { title = "Settings"; } else if (curScene === 8) { title = "Chats"; } else if (curScene === 9) { title = "Notifications"; } else if (curScene === 10) { title = "Storage and data"; } fill(255); textFont(createFont("sans-serif Bold"), 20); textAlign(CORNER, CENTER); text(title, 95, 65/2); //back button backButton.back(); } function chatsPanel() { var contact; //background fill(5, 105, 90); noStroke(); rect(0, 0, width, 70); //contact name fill(255); textFont(createFont("sans-serif Bold"), 20); textAlign(CORNER, CENTER); text(chatTitle, 125, 30); //text if (reply.message[0] !== undefined) { textFont(createFont("sans-serif"), 15); text("online", 125, 50); } //profile image drawProfile(85, -3, chatTitle); //buttons chatsBackBtn.back(); chatsMenuBtn.topPanel("menu"); } var chatsScene = function() { curScene = 1; chatsButton.selected = true; statusButton.selected = false; callsButton.selected = false; topPanel(); //buttons for (var i = 0; i < contacts.length; i++) { chats.button[i].y = 110 + 77 * chats.pos.indexOf(i); chats.button[i].h = 77; if (contacts[i] !== "Daniel T" \|\| (contacts[i] === "Daniel T" && daniel.curChat !== 2)) { chats.button[i].message = contactList[i].bot[contactList[i].curChat - 1].message; } else { chats.button[i].message = contactList[i].bot[contactList[i].curChat].message; } if (contactList[i].bot[contactList[i].curChat - 1].h <= 50) { chats.button[i].chats(contacts[i], 47); } else { chats.button[i].chats(contacts[i], 40); } } menuPopUp.menu(); }; var statusScene = function() { curScene = 2; chatsButton.selected = false; statusButton.selected = true; callsButton.selected = false; stsCameraBtn.status(); if (stsCameraBtn.selected) { statusPopUp.camera("status"); } menuPopUp.menu(); }; var callsScene = function() { curScene = 3; chatsButton.selected = false; statusButton.selected = false; callsButton.selected = true; if (calls.randomOnce) { for (var i = 0; i < 4; i++) { calls.button[i] = new button ({}); calls.button[i].message = contacts[floor(random(contacts.length))]; calls.button[i].y = 110 + 80 * i; } calls.randomOnce = false; } for (var i = 0; i < 4; i++) { calls.button[i].calls(i); } if (calls.selected) { callsPopUp.microphone("call"); } menuPopUp.menu(); }; var cameraScene = function() { curScene = 4; background(0); //flashlight button var flash = { //starting from top left vertex, moving right x: [0, 15, 10, 15, 5, 5, 0, 0], y: [0, 0, 15, 15, 35, 20, 20, 0] }; pushMatrix(); translate(70, 425); scale(0.8); fill(255); noStroke(); beginShape(); for (var i = 0; i < flash.x.length; i++) { vertex(flash.x[i], flash.y[i]); } endShape(); stroke(0); strokeWeight(5); line(-8, 0, 22, 35); stroke(255); strokeWeight(3); line(-10, 0, 20, 35); popMatrix(); //photo button noFill(); strokeWeight(3); ellipse(width/2, 440, 65, 65); //camera button drawCamera(300, 432, 1, color(255), color(0)); //text fill(255); textAlign(CENTER, CENTER); text("Hold for video, tap for photo", width/2, 490); //main pop up cameraPopUp.camera("camera"); }; var linkedScene = function() { curScene = 5; //text if (linked.button.length !== 0) { fill(75); textFont(createFont("sans-serif Bold"), 15); text("DEVICE STATUS", 20, 100); textFont(createFont("sans-serif")); text("Tap a device to log out.", 20, 125); } //buttons for (var i = 0; i < linked.button.length; i++) { linked.button[i].y = 145 + 80 * i; linked.button[i].linked(i); } }; var starredScene = function() { curScene = 6; //star image fill(20, 140, 125); ellipse(width/2, height/2 - 25, 150, 150); fill(255); beginShape(); //starting from top to left vertex(width/2, height/2 - 50); vertex(width/2 + 10, height/2 - 30); vertex(width/2 + 30, height/2 - 30); vertex(width/2 + 15, height/2 - 15); vertex(width/2 + 20, height/2 + 5); vertex(width/2, height/2 - 5); vertex(width/2 - 20, height/2 + 5); vertex(width/2 - 15, height/2 - 15); vertex(width/2 - 30, height/2 - 30); vertex(width/2 - 10, height/2 - 30); vertex(width/2, height/2 - 50); endShape(); //text fill(0); textFont(createFont("sans-serif"), 15); textAlign(CENTER, CENTER); text("Starring messages\ncannot be done because the feature\nhas been disabled.", width/2, height/2 + 115); }; var settingsScene = function() { curScene = 7; //profile button profileButton.settings("You", "Available"); //line stroke(200); strokeWeight(1); line(0, 165, width, 165); //other buttons settings.chats.settings("Chats", "Theme, media visibility & font size"); settings.notif.settings("Notifications", "Message, group & tones"); settings.storage.settings("Storage and Data", "Network usage, auto-download"); }; var stgChatScene = function() { curScene = 8; //text fill(20, 140, 125); textSize(13); text("Display", 20, 95); text("Chat settings", 20, 235); //line stroke(200); strokeWeight(1); line(0, 205, width, 205); //buttons stgChats.theme.settings("Theme", "System Default"); stgChats.media.btn.settings("Media visibility", "Show downloads in gallery"); stgChats.font.settings("Font size", "Medium"); }; var stgNotifScene = function() { curScene = 9; //text fill(20, 140, 125); textSize(13); text("Messages", 20, 195); text("Groups", 20, 335); //line stroke(200); strokeWeight(1); line(0, 165, width, 165); line(0, 305, width, 305); //buttons stgNotif.tone.btn.leftStg("Conversation tones", "Play sounds for incoming/outgoing messages"); for (var i = 0; i < stgNotif.vibrate.length; i++) { stgNotif.vibrate[i].leftStg("Notification tone", "Default"); } }; var stgStorageScene = function() { curScene = 10; //buttons stgStorage.manage.settings("Manage storage", "1.5 GB"); stgStorage.usage.settings("Network usage", "25 GB sent - 2.0 GB received"); stgStorage.data.btn.settings("Use less data for calls"); //line stroke(200); strokeWeight(1); line(0, 165, width, 165); }; var chatBotScene = function() { curScene = 11; background(235, 230, 220); //buttons micButton.microphone(); reply.btn[0].reply(0); reply.btn[1].reply(1); //top panel chatsPanel(); //messages changeReply(); for (var i = 0; i < contacts.length; i++) { if (chatTitle === contacts[i]) { for (var j = 0; j < contactList[i].bot.length; j++) { contactList[i].bot[j].drawBot(); } for (var k = 0; k < contactList[i].user.length; k++) { contactList[i].user[k].drawUser(); } } } //popup if (micButton.selected) { recordPopUp.microphone("record"); } chatsPopUp.menu(); }; draw = function() { background(255); if (curScene >= 2 && curScene <= 3) { topPanel(); } if (curScene >= 5 && curScene <= 10) { menuPanel(); } switch (curScene) { case 1: chatsScene(); break; case 2: statusScene(); break; case 3: callsScene(); break; case 4: cameraScene(); break; case 5: linkedScene(); break; case 6: starredScene(); break; case 7: settingsScene(); break; case 8: stgChatScene(); break; case 9: stgNotifScene(); break; case 10: stgStorageScene(); break; case 11: chatBotScene(); break; } anmFadeIn(); }; mouseClicked = function() { if (curScene >= 1 && curScene <= 3) { if (!menuButton.selected && !stsCameraBtn.selected && !calls.selected) { if (chatsButton.isMouseInside()) { curScene = 1; } if (statusButton.isMouseInside()) { curScene = 2; } if (callsButton.isMouseInside()) { curScene = 3; } if (cameraButton.isMouseInside()) { curScene = 4; } if (menuButton.isMouseInside()) { menuButton.selected = true; } } else { if (!menuBtn.linked.isMouseInside() && !menuBtn.starred.isMouseInside() && !menuBtn.settings.isMouseInside()) { menuButton.selected = false; } if (menuButton.selected) { if (menuBtn.linked.isMouseInside()) { curScene = 5; } if (menuBtn.starred.isMouseInside()) { curScene = 6; } if (menuBtn.settings.isMouseInside()) { curScene = 7; } } } } if (curScene === 1) { for (var i = 0; i < chats.button.length; i++) { if (chats.button[i].isMouseInside()) { curScene = 11; chats.button[i].selected = true; chatTitle = contacts[i]; chatsMenuBtn.selected = false; chatsPopUp.y = -140; } } } if (curScene === 2) { if (!menuButton.selected && !stsCameraBtn.selected && !calls.selected) { if (stsCameraBtn.isMouseInside()) { stsCameraBtn.selected = true; } } if (stsNotNowBtn.isMouseInside()) { stsCameraBtn.selected = false; } } if (curScene === 3) { if (!menuButton.selected && !stsCameraBtn.selected && !calls.selected) { for (var i = 0; i < calls.button.length; i++) { if (calls.button[i].isMouseInside()) { calls.selected = true; } } } if (callNotNowBtn.isMouseInside()) { calls.selected = false; } } if (curScene === 4) { if (cmrNotNowBtn.isMouseInside()) { if (chatsButton.selected) { curScene = 1; } else if (statusButton.selected) { curScene = 2; } else if (callsButton.selected) { curScene = 3; } } } if (curScene >= 5 && curScene <= 7) { if (backButton.isMouseInside()) { curScene = 1; menuButton.selected = false; menuPopUp.y = -140; } } if (curScene === 5) { for (var i = 0; i < linked.button.length; i++) { if (linked.button[i].isMouseInside()) { linked.button.length--; linked.time.splice(i, 1); } } } if (curScene === 7) { if (settings.chats.isMouseInside()) { curScene = 8; } if (settings.notif.isMouseInside()) { curScene = 9; } if (settings.storage.isMouseInside()) { curScene = 10; } } if (curScene >= 8 && curScene <= 10) { if (backButton.isMouseInside()) { curScene = 7; } } if (curScene === 8) { if (stgChats.media.btn.isMouseInside()) { if (stgChats.media.btn.selected) { stgChats.media.btn.selected = false; } else { stgChats.media.btn.selected = true; } } } if (curScene === 9) { if (stgNotif.tone.btn.isMouseInside()) { if (stgNotif.tone.btn.selected) { stgNotif.tone.btn.selected = false; } else { stgNotif.tone.btn.selected = true; } } } if (curScene === 10) { if (stgStorage.data.btn.isMouseInside()) { if (stgStorage.data.btn.selected) { stgStorage.data.btn.selected = false; } else { stgStorage.data.btn.selected = true; } } } if (curScene === 11) { if (!chatsMenuBtn.selected) { if (micButton.isMouseInside()) { micButton.selected = true; } if (micNotNowBtn.isMouseInside()) { micButton.selected = false; } } if (!micButton.selected) { if (chatsMenuBtn.isMouseInside()) { chatsMenuBtn.selected = true; } if (chatsMenuBtn.selected) { if (!chatsStgBtn.isMouseInside() && chatsPopUp.y === 10) { chatsMenuBtn.selected = false; } if (chatsStgBtn.isMouseInside()) { curScene = 7; } } } if (!micButton.selected && !chatsMenuBtn.selected) { if (chatsBackBtn.isMouseInside()) { curScene = 1; } //LEFT BUTTON if (reply.btn[0].isMouseInside()) { //change variables for (var i = 0; i < contacts.length; i++) { if (chatTitle === contacts[i] && reply.message[0] !== undefined) { //change chat variables contactList[i].curChat ++; contactList[i].choice[contactList[i].curChat - 2] = "left"; //add time if (minute() >= 10) { chats.button[i].time = hour() + ":" + minute(); } else { chats.button[i].time = hour() + ":0" + minute(); } //move button to top chats.pos.splice(chats.pos.indexOf(i), 1); chats.pos.unshift(i); } } //add messages if (chatTitle === "Kevin W") { if (kevin.curChat === 2) { kevin.user[0] = new message ({y: 180, w: 90, message: "It's dope!"}); kevin.bot[1] = new message ({y: 230, h: 65, message: "Glad you liked it! I believe Pamela left you a message."}); } if (kevin.curChat === 3 && kevin.choice[0] === "left" && reply.message[0] !== undefined) { kevin.user[1] = new message ({y: 305, w: 90, message: "Pamela?"}); kevin.bot[2] = new message ({y: 355, w: 110, h: 45, message: "You said it."}); } } if (chatTitle === "Daniel T") { if (daniel.curChat === 2) { daniel.user[0] = new message ({y: 220, w: 70, message: "What?"}); daniel.bot[2] = new message ({y: 270, h: 100, message: "At the end of the day, the votes and the fame don't really matter. I develop programs so people can enjoy my work."}); } } if (chatTitle === "Pamela") { if (pamela.curChat === 2) { pamela.user[0] = new message ({y: 165, w: 70, message: "How?"}); pamela.bot[1] = new message ({y: 215, h: 100, message: "I love checking the hot list first thing in the morning to see what creativity oozed out of your heads into your codes overnight."}); } if (pamela.curChat === 3 && reply.message[0] !== undefined) { pamela.user[1] = new message({y: 325, w: 100, message: "Awesome!"}); pamela.bot[2] = new message ({y: 375, h: 50, message: "Please continue being energetic."}); } } if (chatTitle === "Mom") { if (mom.curChat === 2) { mom.user[0] = new message ({y: 165, w: 60, message: "Yup!"}); mom.bot[1] = new message ({y: 215, h: 65, message: "That's my kid! Told you learning on KA is worth it."}); } if (mom.curChat === 3 && reply.message[0] !== undefined) { if (mom.choice[0] === "left") { mom.user[1] = new message({y: 290, w: 120, message: "Thanks mom"}); mom.bot[2] = new message({y: 340, h: 65, message: "Quick, come home. Let's celebrate with the family!"}); } else { mom.user[1] = new message ({y: 290, w: 65, message: "But.."}); mom.bot[2] = new message ({y: 355, h: 65, message: "Quick, come home. I'll buy some pizza."}); } } } if (chatTitle === "John Doe") { if (john.curChat === 2 && reply.message[0] !== undefined) { john.user[0] = new message ({y: 165, w: 140, message: "Nah, I'm coding."}); john.bot[1] = new message ({y: 215, h: 80, message: "Again? I really envy hard working people like you. It reminds me of Elon Musk."}); } } } //RIGHT BUTTON if (reply.btn[1].isMouseInside()) { //change variables for (var i = 0; i < contacts.length; i++) { if (chatTitle === contacts[i] && reply.message[0] !== undefined) { //change chat variables contactList[i].curChat ++; contactList[i].choice[contactList[i].curChat - 2] = "right"; //add time if (minute() >= 10) { chats.button[i].time = hour() + ":" + minute(); } else { chats.button[i].time = hour() + ":0" + minute(); } //move button to top chats.pos.splice(chats.pos.indexOf(i), 1); chats.pos.unshift(i); } } //add messages if (chatTitle === "Kevin W") { if (kevin.curChat === 2 && reply.message[0] !== undefined) { kevin.user[0] = new message ({y: 180, w: 65, message: "Awful"}); kevin.bot[1] = new message ({y: 230, h: 80, message: "Sorry to hear that. Please leave a comment describing how it can be improved."}); } if (kevin.curChat === 3 && kevin.choice[0] === "left" && reply.message[0] !== undefined) { kevin.user[1] = new message ({y: 305, w: 135, message: "Read it already."}); kevin.bot[2] = new message ({y: height, message: "Read it already."}); //hidden from screen } } if (chatTitle === "Daniel T") { if (daniel.curChat === 2) { daniel.user[0] = new message ({y: 220, w: 110, message: "You tell me."}); daniel.bot[2] = new message ({y: 270, h: 100, message: "At the end of the day, the votes and the fame don't really matter. I develop programs so people can enjoy my work."}); } } if (chatTitle === "Pamela") { if (pamela.curChat === 2) { pamela.user[0] = new message ({y: 165, w: 75, message: "What?"}); pamela.bot[1] = new message ({y: 215, h: 100, message: "I love checking the hot list first thing in the morning to see what creativity oozed out of your heads into your codes overnight."}); } if (pamela.curChat === 3 && reply.message[0] !== undefined) { pamela.user[1] = new message({y: 325, w: 70, message: "Cool!"}); pamela.bot[2] = new message ({y: 375, h: 50, message: "Please continue being energetic."}); } } if (chatTitle === "Mom") { if (mom.curChat === 2) { mom.user[0] = new message ({y: 165, w: 60, message: "No.."}); mom.bot[1] = new message ({y: 215, h: 80, message: "Hey, you can do better next time. You shouldn't have spent too much time on games"}); } if (mom.curChat === 3 && reply.message[0] !== undefined) { if (mom.choice[0] === "right") { mom.user[1] = new message ({y: 305, w: 60, message: "Yeah"}); mom.bot[2] = new message ({y: 355, h: 65, message: "Quick, come home. I'll buy some pizza."}); } else { mom.user[1] = new message ({y: 290, w: 65, message: "Yeah"}); mom.bot[2] = new message ({y: 340, h: 65, message: "Quick, come home. Let's celebrate with the family!"}); } } } if (chatTitle === "John Doe") { if (john.curChat === 2 && reply.message[0] !== undefined) { john.user[0] = new message ({y: 165, w: 65, message: "Sure"}); john.bot[1] = new message ({y: 215, h: 45, message: "Fantastic! See you at 7."}); } } } } } };
Folds	25,201,202,411,412,537,538,689,690,890,892,910,912,925,926,949,950,969,971,980,990,994,1000,1004,1009,1015,1018,1022,1024,1031,1032,1038,1039,1046,1048,1051,1059,1062,1064,1070,1071,1076,1077,1115,1116,1122,1123,1129,1130,1150,1151,1197,1198,1208,1209,1236,1237,1249,1250,1420,1421,1451,1452,1482,1483,1496,1497,1535,1537,1542,1551,1586,1587,1646,1647,1682,1684,1692,1696,1701,1702,1708,1709,1714,1715,1720,1721,1726,1730,1801,1803,1852,1853,1870,1872,1875,1877,1893,1895,1911,1912,1932,1933,1957,1959,1987,1988,2002,2003,2030,2031,2075,2076,2094,2095,2123,2124,2138,2139,2156,2157,2177,2178,2189,2190,2225,2227,2274,2276,2668
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP2n4eXnCAw
Votes	232
Spin-Offs	5
Type	PJS
Width	400
Height	500
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	Kevin W
Author Name	KevinWijaya15
Author ID	kaid_80690558755794815547379
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739372113864
Updated	10 months ago, 1739372124133
Source Deleted	unknown