From 0ececf8ee308c536fdbe38a183110ae05ceb4516 Mon Sep 17 00:00:00 2001 From: marianaviro Date: Wed, 30 May 2018 10:41:31 -0500 Subject: [PATCH] Escepticism principle almost finished --- facebook_api.js | 16 ++++ first.js | 151 ++++++++++++++++++++++++++++------- fourth.js | 207 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 7 ++ projects.js | 118 +++++++++++++++++++++++++++ second.js | 138 +++++++++++++++++++++++++++++++- third.js | 171 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 779 insertions(+), 29 deletions(-) create mode 100644 facebook_api.js create mode 100644 fourth.js create mode 100644 projects.js create mode 100644 third.js diff --git a/facebook_api.js b/facebook_api.js new file mode 100644 index 0000000..7b79fe6 --- /dev/null +++ b/facebook_api.js @@ -0,0 +1,16 @@ +window.fbAsyncInit = function() { + FB.init({ + appId : '229170604518167', + autoLogAppEvents : true, + xfbml : true, + version : 'v3.0' + }); +}; + +(function(d, s, id){ + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) {return;} + js = d.createElement(s); js.id = id; + js.src = "https://connect.facebook.net/en_US/sdk.js"; + fjs.parentNode.insertBefore(js, fjs); + }(document, 'script', 'facebook-jssdk')); diff --git a/first.js b/first.js index ad8e1f2..0e11b7a 100644 --- a/first.js +++ b/first.js @@ -3,32 +3,61 @@ var firstPrinciple = function(s) { var x; var y; var easing; - var bck; + var arrowColor; + var homeColor; + var principlesColor; + var backgroundColor; + var count; s.setup = function() { x = 0; y = 0; easing = 0.05; - bck = '#04E973'; - arrow = + arrowColor = '#04E973'; + arrowColor2 = '#04E973'; + homeColor = '#04E973'; + principlesColor = '#04E973'; + backgroundColor = '#04E973'; + count = 0; + backwards = 0; //Canvas s.createCanvas(s.displayWidth, s.displayHeight); - s.background('#DAFF7D'); }; s.draw = function() { //Background - s.background(bck); - // s.background('#DAFF7D'); + var from = s.color('#DAFF7D'); + var to = s.color(backgroundColor); + var m = s.map(count, 0, 100, 0, 0.2); + if(count == 100) { + backwards = 1; + } else if(count == 0){ + backwards = 0; + } + if(backwards == 1){ + count --; + } else { + count ++; + } + arrowColor2 = s.lerpColor(from, to, m); + s.background(arrowColor2); + + //Menu + s.fill(homeColor); + s.textStyle(s.BOLD); + s.textSize(12); + s.text('i n i c i o', s.windowWidth/2 - 110, 30); + s.rect(s.windowWidth/2 - 68, 35, 12, 6); + s.fill(principlesColor); + s.text('p r i n c i p i o s', s.windowWidth/2, 30); + s.rect(s.windowWidth/2 + 86, 35, 12, 6); //Rectangle s.fill('#04E973'); - // s.fill('#DAFF7D'); - s.stroke('#DAFF7D'); - // s.stroke(255); + s.text('P R I N C I P I O # 3', s.windowWidth/2 - 75, s.windowHeight/2 - 170); s.strokeWeight(20); s.rect(s.windowWidth/2 - 110, s.windowHeight/2 - 160, 210, 300); @@ -36,7 +65,6 @@ var firstPrinciple = function(s) { s.noStroke(); s.textFont('Futura'); s.fill(255); - // s.fill('#04E973'); s.textStyle(s.NORMAL); s.textSize(35); s.text('EL', s.windowWidth/2 -20, s.windowHeight/2 - 100); @@ -58,13 +86,11 @@ var firstPrinciple = function(s) { var dy = targetY - y; y += dy * easing; s.arrow(s.windowWidth - x, s.windowHeight - y); - }; s.arrow = function(mx, my) { + s.fill(arrowColor); s.noStroke(); - s.fill('#DAFF7D'); - // s.fill('#04E973'); s.beginShape(); s.vertex(mx, my); s.vertex(mx + 20, my); @@ -77,12 +103,7 @@ var firstPrinciple = function(s) { s.endShape(s.CLOSE); }; - s.down = function() { - s.select('#second').show(); - s.select('#first').hide(); - } - - s.mouseClicked = function() { + s.mouseInsideArrow = function() { var mx = s.windowWidth - x; var my = s.windowHeight - y; @@ -90,25 +111,101 @@ var firstPrinciple = function(s) { var dx = s.mouseX - mx; var dy = s.mouseY - my; if(0 < dx && dx < 20 && 0 < dy && dy < 20) { - s.down(); + return true; } else { //Check if the mouse is inside the arrow's left triangle var lx = Math.abs(s.mouseX - mx + 10); var ly = Math.abs(s.mouseY - my - 20); - if(lx < 20 && ly < 20 && lx > ly) { - console.log('entro izq'); - s.down(); + if(lx < 0 && ly < 20 && lx > ly) { + return true; } else { //Check if the mouse is inside the arrow's right triangle var rx = 20 - Math.abs(s.mouseX - mx - 10); var ry = Math.abs(s.mouseY - my - 20); if(rx < 20 && ry < 20 && rx > ry) { - console.log('entro der'); - s.down(); + return true; } + return false; } } - } + }; + + s.mouseInsideHome = function() { + var hx1 = s.windowWidth/2 - 110; + var hx2 = s.windowWidth/2 - 50; + var hy1 = 10; + var hy2 = 50; + if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) { + return true; + } else { + return false; + } + }; + + s.mouseInsidePrinciples = function() { + var hx1 = s.windowWidth/2; + var hx2 = s.windowWidth/2 + 100; + var hy1 = 10; + var hy2 = 50; + if( s.mouseX > hx1 && s.mouseX < hx2 && s.mouseY > hy1 && s.mouseY < hy2 ) { + return true; + } else { + return false; + } + }; + + s.arrowInsideRect = function() { + var mx = s.windowWidth - x; + var my = s.windowHeight - y; + + var rx1 = s.windowWidth/2 - 110; + var rx2 = s.windowWidth/2 + 100; + var ry1 = s.windowHeight/2 - 160; + var ry2 = s.windowHeight/2 + 140; + if( mx > rx1 && mx < rx2 && my > ry1 && my < ry2 ) { + return true; + } else { + return false; + } + }; + + s.mouseClicked = function() { + if(s.mouseInsideArrow()) { + s.down(); + } else if(s.mouseInsideHome()) { + s.home(); + } + }; + + s.mouseMoved = function() { + if(s.mouseInsideArrow()){ + arrowColor = '#FFFFFF'; + backgroundColor = '#DAFF7D'; + s.cursor(s.HAND); + } else if(s.mouseInsideHome()) { + homeColor = '#FFFFFF'; + s.cursor(s.HAND); + } else if(s.mouseInsidePrinciples()) { + principlesColor = '#FFFFFF'; + s.cursor(s.HAND); + } else { + backgroundColor = '#04E973'; + homeColor = '#04E973'; + principlesColor = '#04E973'; + s.cursor(s.ARROW); + if(s.arrowInsideRect()) { + arrowColor = arrowColor2; + } else { + arrowColor = '#04E973'; + } + } + }; + + s.down = function() { + s.select('#second').show(); + s.select('#first').hide(); + }; + } -var one = new p5(firstPrinciple, 'one'); +var one = new p5(firstPrinciple, 'first'); diff --git a/fourth.js b/fourth.js new file mode 100644 index 0000000..328df5e --- /dev/null +++ b/fourth.js @@ -0,0 +1,207 @@ +var fourthPrinciple = function(s) { + + var color; + var privadoColor; + var colectivoColor; + var showArrow; + var count; + + s.setup = function() { + s.background('#FF83FF'); + s.createCanvas(s.displayWidth, s.displayHeight); + privadoColor = '#E61DFF'; + colectivoColor = '#FF43FF'; + color = 0; + count = 0; + s.cursor(s.ARROW); + }; + + s.draw = function() { + + //Background + s.background('#FF83FF'); + + //Rectangle + s.fill('#FF83FF'); + s.stroke(s.lerpColor(s.color('#FF83FF'), s.color('#731DD3'), 1)); + s.strokeWeight(20); + s.rect(s.windowWidth/2 - 110, s.windowHeight/2 - 160, 210, 300); + + //Principle + s.noStroke(); + s.textFont('Futura'); + s.fill('#FFFFFF'); + s.textStyle(s.NORMAL); + s.textSize(41); + s.text('EL FEMINISMO ES', s.windowWidth/2 - 180, s.windowHeight/2 - 100); + s.textStyle(s.BOLD); + s.textSize(60); + s.fill('#FFFFFF'); + if(s.mouseInsideColectivo()) { + s.fill('#217DF4'); + } else { + s.fill(colectivoColor); + } + s.text('COLECTIVO', s.windowWidth/2 - 180, s.windowHeight/2 - 30); + s.textStyle(s.NORMAL); + s.textSize(52); + s.fill('#FFFFFF'); + s.text('Y TAMBIÉN ES', s.windowWidth/2 - 180, s.windowHeight/2 + 35); + s.textStyle(s.BOLD); + s.textSize(72); + if(s.mouseInsidePrivado()) { + s.fill('#217DF4'); + } else { + s.fill(privadoColor); + } + s.text('PRIVADO', s.windowWidth/2 - 183, s.windowHeight/2 + 110); + + if(s.mouseInsidePrivado() || s.mouseInsideColectivo()) { + s.cursor(s.HAND); + } else { + s.cursor(s.ARROW); + } + + //Arrow + if(showArrow) { + var mx = s.windowWidth/2 - 10; + var my = s.windowHeight - 60; + if(s.mouseInsideArrow()) { + s.cursor(s.HAND); + s.fill(255); + } else { + s.fill('#E61DFF'); + } + s.noStroke(); + s.beginShape(); + s.vertex(mx, my); + s.vertex(mx + 20, my); + s.vertex(mx + 20, my + 20); + s.vertex(mx + 30, my + 20); + s.vertex(mx + 10, my + 40); + s.vertex(mx - 10, my + 20); + s.vertex(mx, my + 20); + s.vertex(mx, my); + s.endShape(s.CLOSE); + + //Text + s.fill('#731DD3'); + s.textSize(21.5); + s.textStyle(s.NORMAL); + s.text('¿ Q U I E R E S O T R O R E T O ?', s.windowWidth/2 - 180, s.windowHeight/8 - 20); + s.textSize(20.5); + s.textStyle(s.BOLD); + s.text('H A Z C L I C K D E N U E V O', s.windowWidth/2 - 180, s.windowHeight/8 + 10); + } + + //Color + count++; + s.setColor(); + }; + + s.mouseClicked = function() { + if(s.mouseInsideArrow()) { + s.down(); + } else if(s.mouseInsidePrivado()){ + showArrow = true; + s.go(); + } else if(s.mouseInsideColectivo()) { + showArrow = true; + s.share(); + } else { + return false; + } + }; + + s.mouseInsideArrow = function() { + if(showArrow) { + var mx = s.windowWidth/2 - 10;; + var my = s.windowHeight - 60; + + //Check if the mouse is inside the arrow's rectangle + var dx = s.mouseX - mx; + var dy = s.mouseY - my; + if(0 < dx && dx < 20 && 0 < dy && dy < 20) { + return true; + } else { + //Check if the mouse is inside the arrow's left triangle + var lx = Math.abs(s.mouseX - mx + 10); + var ly = Math.abs(s.mouseY - my - 20); + if(lx < 20 && ly < 20 && lx > ly) { + return true; + } else { + //Check if the mouse is inside the arrow's right triangle + var rx = 20 - Math.abs(s.mouseX - mx - 10); + var ry = Math.abs(s.mouseY - my - 20); + if(rx < 20 && ry < 20 && rx > ry) { + return true; + } + return false; + } + } + } + }; + + s.mouseInsidePrivado = function() { + var privadoX1 = s.windowWidth/2 - 183; + var privadoX2 = s.windowWidth/2 + 185; + var privadoY1 = s.windowHeight/2 + 35; + var privadoY2 = s.windowHeight/2 + 115; + if(s.mouseX > privadoX1 && s.mouseX < privadoX2 && s.mouseY > privadoY1 && s.mouseY < privadoY2) { + return true; + } + return false; + }; + + s.mouseInsideColectivo = function() { + var colectivoX1 = s.windowWidth/2 - 183; + var colectivoX2 = s.windowWidth/2 + 185; + var colectivoY1 = s.windowHeight/2 - 85; + var colectivoY2 = s.windowHeight/2 - 20; + if(s.mouseX > colectivoX1 && s.mouseX < colectivoX2 && s.mouseY > colectivoY1 && s.mouseY < colectivoY2) { + return true; + } + return false; + }; + + s.go = function() { + var project = projects[Math.floor(Math.random() * projects.length)]; + window.open(project.url); + }; + + s.share = function() { + FB.ui({ + method: 'share', + quote: 'Mi reto es: ', + hashtag: '#TOD_S', + href: 'https://developers.facebook.com/docs/' + }, function(response){ + // Debug response (optional) + console.log(response); + }); + }; + + s.setColor = function() { + if(count == 30) { + if(color % 2 == 0) { + privadoColor = '#FF43FF'; + colectivoColor = '#E61DFF'; + color++; + count = 0; + } else { + privadoColor = '#E61DFF'; + colectivoColor = '#FF43FF'; + color++; + count = 0; + } + } + }; + + s.down = function() { + s.select('#fifth').show(); + s.select('#fourth').hide(); + }; + +} + +var four = new p5(fourthPrinciple, 'fourth'); diff --git a/index.html b/index.html index ff8f8f9..b307c9c 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,24 @@ + + + + +
+
+
diff --git a/projects.js b/projects.js new file mode 100644 index 0000000..a123fa5 --- /dev/null +++ b/projects.js @@ -0,0 +1,118 @@ +var projects = [ + { + "name": "Siete Polas", + "url": "https://sietepolas.com/" + }, + { + "name": "Chicas Poderosas", + "url": "https://chicaspoderosas.org/home/" + }, + { + "name": "Niñas sin miedo", + "url": "https://ninassinmiedo.org/" + }, + { + "name": "Fondo lunaria", + "url": "http://www.fondolunaria.org/" + }, + { + "name": "Gordas sin chaqueta", + "url": "https://www.facebook.com/GordaSinChaqueta/" + }, + { + "name": "Colectiva Polimorfas", + "url": "https://www.facebook.com/CPolimorfas/" + }, + { + "name": "Colectiva Libertaria Severas Flores", + "url": "https://www.facebook.com/SeverasFlores/" + }, + { + "name": "Sisma Mujer", + "url": "https://www.sismamujer.org/" + }, + { + "name": "La Mesa por la Vida y la Salud de las mujeres", + "url": "http://www.despenalizaciondelaborto.org.co" + }, + { + "name": "Las Parceras – Línea y Red Feminista de Acompañamiento en Aborto", + "url": "https://www.facebook.com/abortoconlasparceras/" + }, + { + "name": "La Tremenda Revoltosa – Batucada Feminista", + "url": "https://www.facebook.com/LaTremendaRevoltosaBatucadaFeminista/" + }, + { + "name": "La Morada", + "url": "https://www.facebook.com/lamoradacc/" + }, + { + "name": "Atrévete Bogotá Hollback!", + "url": "https://www.facebook.com/AtreveteBogota?fref=ts" + }, + { + "name": "Observatorio Contra el Acoso Callejero", + "url": "https://www.ocac.cl/" + }, + { + "name": "Yerbateras", + "url": "https://www.facebook.com/Yerbateras" + }, + { + "name": "Yela Quim", + "url": "https://www.facebook.com/yelaquimrap/" + }, + { + "name": "MyGRLStory", + "url": "https://mygrlstory.wixsite.com/mygrlstory" + }, + { + "name": "Plataforma de Incidencia Política de Mujeres Rurales Colombianas", + "url": "http://www.yosoymujerrural.com/" + }, + { + "name": "Red Nacional de Mujeres", + "url": "http://www.rednacionaldemujeres.org/" + }, + { + "name": "Casa de la Mujer", + "url": "http://www.casmujer.com/" + }, + { + "name": "Liga de Mujeres Desplazadas", + "url": "http://ligademujeres.org/" + }, + { + "name": "La Liga de las Mujeres", + "url": "https://www.facebook.com/ligamujer/?ref=br_rs" + }, + { + "name": "Mujer Fariana", + "url": "http://mujerfariana.org/" + }, + { + "name": "Colectiva Matamba Acción Afrodiaspórica", + "url": "https://www.facebook.com/colectivamatamba/" + }, + { + "name": "Red Ecofeminista", + "url": "https://www.redecofeminista.org/" + }, + { + "name": "Red Global de Mujeres Constructoras de Paz", + "url": "http://www.gnwp.org/" + }, + { + "name": "Articulación Feminista Marcosur", + "url": "http://www.mujeresdelsur-afm.org.uy/" + }, + { + "name": "Colectivo Histeria Riot GRRL", + "url": "https://www.facebook.com/histeria.riot" + }, + { + "name": "Frente Feminista de Suba – Las Policarpas", + "url": "https://www.facebook.com/Las.Policarpas" + } + ]; diff --git a/second.js b/second.js index 990f3c6..2e581a5 100644 --- a/second.js +++ b/second.js @@ -1,14 +1,148 @@ var secondPrinciple = function(s) { + var letter; + var abc; + var x; + var showArrow; + s.setup = function() { s.background(100); s.createCanvas(s.displayWidth, s.displayHeight); + letter = ''; + abc = 'ABDEFGHJKLMOPQRSTUVXYZ1234567890?*+=@#%&'; + x = 0; }; s.draw = function() { - s.rect(s.mouseX, s.mouseY, 20, 20); + + //Background + s.background('#217DF4'); + // s.background('#21F4F4'); + + //Rectangle + s.fill('#217DF4'); + // s.fill('#21F4F4'); + s.stroke('#21F4F4'); + // s.stroke(255); + s.strokeWeight(20); + s.rect(s.windowWidth/2 - 110, s.windowHeight/2 - 160, 210, 300); + + //Principle + s.noStroke(); + s.textAlign(s.LEFT); + s.textFont('Futura'); + s.fill(255); + // s.fill('#217DF4'); + s.textStyle(s.NORMAL); + s.textSize(35); + s.text('EN EL', s.windowWidth/2 - 50, s.windowHeight/2 - 105); + s.textStyle(s.BOLD); + s.textSize(50); + s.text('FEMINISMO', s.windowWidth/2 - 160, s.windowHeight/2 - 50); + s.textStyle(s.NORMAL); + s.textSize(65); + s.text('CABEMOS', s.windowWidth/2 - 170, s.windowHeight/2 + 25); + s.textStyle(s.BOLD); + s.textSize(85); + s.text('TOD', s.windowWidth/2 - 165, s.windowHeight/2 + 115); + + //Letter + if(letter != '') { + s.fill('#FF83FF'); + // s.fill(255); + s.textAlign(s.CENTER); + s.text(letter, s.windowWidth/2 + 65, s.windowHeight/2 + 115); + } else { + s.textAlign(s.LEFT); + s.frameRate(2); + s.rect(s.windowWidth/2 + 32, s.windowHeight/2 + 50, 60, 65); + if(x == 0) { + s.fill(200); + x = 1; + } else { + s.fill(255); + x = 0; + } + s.rect(s.windowWidth/2 + 45, s.windowHeight/2 + 58, 3, 50); + } + s.fill(255); + s.textAlign(s.LEFT); + s.text('S', s.windowWidth/2 + 100, s.windowHeight/2 + 115); + + //Arrow + if(showArrow) { + var mx = s.windowWidth/2 - 10; + var my = s.windowHeight - 60; + + if(s.mouseInsideArrow()) { + s.cursor(s.HAND); + s.fill('#FFFFFF'); + } else { + s.cursor(s.ARROW); + s.fill('#21F4F4'); + } + s.noStroke(); + s.beginShape(); + s.vertex(mx, my); + s.vertex(mx + 20, my); + s.vertex(mx + 20, my + 20); + s.vertex(mx + 30, my + 20); + s.vertex(mx + 10, my + 40); + s.vertex(mx - 10, my + 20); + s.vertex(mx, my + 20); + s.vertex(mx, my); + s.endShape(s.CLOSE); + } + }; + + s.keyTyped = function() { + s.frameRate(60); + letter = abc.charAt(Math.floor(Math.random() * abc.length)); + if(!showArrow) { + showArrow = true; + } + }; + + s.mouseClicked = function() { + if(s.mouseInsideArrow()) { + s.down(); + } + }; + + s.mouseInsideArrow = function() { + if(showArrow) { + var mx = s.windowWidth/2 - 10;; + var my = s.windowHeight - 60; + + //Check if the mouse is inside the arrow's rectangle + var dx = s.mouseX - mx; + var dy = s.mouseY - my; + if(0 < dx && dx < 20 && 0 < dy && dy < 20) { + return true; + } else { + //Check if the mouse is inside the arrow's left triangle + var lx = Math.abs(s.mouseX - mx + 10); + var ly = Math.abs(s.mouseY - my - 20); + if(lx < 20 && ly < 20 && lx > ly) { + return true; + } else { + //Check if the mouse is inside the arrow's right triangle + var rx = 20 - Math.abs(s.mouseX - mx - 10); + var ry = Math.abs(s.mouseY - my - 20); + if(rx < 20 && ry < 20 && rx > ry) { + return true; + } + return false; + } + } + } + }; + + s.down = function() { + s.select('#third').show(); + s.select('#second').hide(); }; } -var two = new p5(secondPrinciple, 'two'); +var two = new p5(secondPrinciple, 'second'); diff --git a/third.js b/third.js new file mode 100644 index 0000000..cfe79fa --- /dev/null +++ b/third.js @@ -0,0 +1,171 @@ +var thirdPrinciple = function(s) { + + var color; + var pluralColor; + var showArrow; + var count; + + s.setup = function() { + s.background(100); + s.createCanvas(s.displayWidth, s.displayHeight); + pluralColor = '#E61DFF'; + color = 0; + count = 0; + s.cursor(s.ARROW); + }; + + s.draw = function() { + + //Background + s.background('#731DD3'); + + //Rectangle + s.fill('#731DD3'); + s.stroke('#FF83FF'); + s.strokeWeight(20); + s.rect(s.windowWidth/2 - 110, s.windowHeight/2 - 160, 210, 300); + + //Principle + s.noStroke(); + s.textFont('Futura'); + s.fill(255); + s.textStyle(s.NORMAL); + s.textSize(35); + s.text('EL', s.windowWidth/2 -20, s.windowHeight/2 - 100); + s.textStyle(s.BOLD); + s.textSize(58); + s.text('FEMINISMO', s.windowWidth/2 - 180, s.windowHeight/2 -35); + s.textStyle(s.NORMAL); + s.textSize(48.5); + s.text('ES UN ESPACIO', s.windowWidth/2 - 180, s.windowHeight/2 + 20); + s.fill(pluralColor); + s.textStyle(s.BOLD); + s.textSize(92); + if(s.mouseInsidePlural()) { + s.cursor(s.HAND); + s.fill(255); + } else { + s.fill(pluralColor); + s.cursor(s.ARROW); + } + s.text('PLURAL', s.windowWidth/2 - 183, s.windowHeight/2 + 110); + + //Arrow + if(showArrow) { + var mx = s.windowWidth/2 - 10; + var my = s.windowHeight - 60; + if(s.mouseInsideArrow()) { + s.cursor(s.HAND); + s.fill(255); + } else { + s.fill('#E61DFF'); + } + s.noStroke(); + s.beginShape(); + s.vertex(mx, my); + s.vertex(mx + 20, my); + s.vertex(mx + 20, my + 20); + s.vertex(mx + 30, my + 20); + s.vertex(mx + 10, my + 40); + s.vertex(mx - 10, my + 20); + s.vertex(mx, my + 20); + s.vertex(mx, my); + s.endShape(s.CLOSE); + + //Text + s.fill(255); + s.textSize(11.5); + s.textStyle(s.NORMAL); + s.text('¿ T E G U S T A R Í A C O N O C E R O T R A I N I C I A T I V A ?', s.windowWidth/2 - 180, s.windowHeight/8 - 20); + s.textSize(21.5); + s.textStyle(s.BOLD); + s.text('H A Z C L I C K D E N U E V O', s.windowWidth/2 - 180, s.windowHeight/8 + 10); + } + + //Color + count++; + s.setColor(); + }; + + s.mouseClicked = function() { + if(s.mouseInsideArrow()) { + s.down(); + } else if(s.mouseInsidePlural()){ + showArrow = true; + s.go(); + } else { + return false; + } + }; + + s.mouseInsideArrow = function() { + if(showArrow) { + var mx = s.windowWidth/2 - 10;; + var my = s.windowHeight - 60; + + //Check if the mouse is inside the arrow's rectangle + var dx = s.mouseX - mx; + var dy = s.mouseY - my; + if(0 < dx && dx < 20 && 0 < dy && dy < 20) { + return true; + } else { + //Check if the mouse is inside the arrow's left triangle + var lx = Math.abs(s.mouseX - mx + 10); + var ly = Math.abs(s.mouseY - my - 20); + if(lx < 20 && ly < 20 && lx > ly) { + return true; + } else { + //Check if the mouse is inside the arrow's right triangle + var rx = 20 - Math.abs(s.mouseX - mx - 10); + var ry = Math.abs(s.mouseY - my - 20); + if(rx < 20 && ry < 20 && rx > ry) { + return true; + } + return false; + } + } + } + }; + + s.mouseInsidePlural = function() { + var pluralX1 = s.windowWidth/2 - 183; + var pluralX2 = s.windowWidth/2 + 200; + var pluralY1 = s.windowHeight/2 + 35; + var pluralY2 = s.windowHeight/2 + 115; + if(s.mouseX > pluralX1 && s.mouseX < pluralX2 && s.mouseY > pluralY1 && s.mouseY < pluralY2) { + return true; + } + return false; + }; + + s.go = function() { + var project = projects[Math.floor(Math.random() * projects.length)]; + window.open(project.url); + }; + + s.setColor = function() { + if(count == 60) { + if(color % 3 == 0) { + pluralColor = '#217DF4'; + color++; + count = 0; + } else if(color % 3 == 1) { + pluralColor = '#21F4F4'; + color++; + count = 0; + } else { + pluralColor = '#E61DFF'; + color++; + count = 0; + } + } + }; + + s.down = function() { + s.select('#fourth').show(); + s.select('#third').hide(); + }; + +} + +var three = new p5(thirdPrinciple, 'third');