mejoras varias

eadpucv · Jul 17, 2020 · 1eac351 · 1eac351
1 parent d333f3f
commit 1eac351
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 70 deletions.
diff --git a/fonts/Alegreya-Regular.ttf b/fonts/Alegreya-Regular.ttf
diff --git a/fonts/AlegreyaSans-Bold.ttf b/fonts/AlegreyaSans-Bold.ttf
diff --git a/fonts/AlegreyaSans-Light.ttf b/fonts/AlegreyaSans-Light.ttf
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html><html lang="en"><head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="style.css">
     <title>acto del momento simultáneo</title>
     <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
     <script language="javascript" type="text/javascript" src="libraries/matter.js"></script>
@@ -8,7 +9,7 @@
     <script src="note.js"></script>
     <script src="sketch.js"></script>
 
-    <link rel="stylesheet" type="text/css" href="style.css">
+
     <meta charset="utf-8">
 
   </head>

diff --git a/note.js b/note.js
@@ -1,7 +1,7 @@
 class Note {
     constructor(lat, lon, title, text, author) {
-        textSize(22);
-        // textStyle(BOLD);
+        textFont(sans);
+        textSize(16);
         let margin = 50;
         this.x = random(margin, w - margin);//map(lon, minlon, maxlon, margin, w - margin);
         this.y = random(-100, -h * 2);//map(lat, minlat, maxlat, 0, -h * 5);
@@ -12,9 +12,17 @@ class Note {
         this.radius = map(this.text.length, 0, 50, 0, 30);
         this.w = 14 + textWidth(this.label);
         this.h = 6 + textAscent() + textDescent();
-        var options = {
+
+        let ang = random(-2, 2);
+        let force = {
+            x: random(-500, 500),
+            y: 0
+        };
+        let options = {
             friction: 0.3,
-            restitution: 0.6
+            restitution: 0.77,
+            angle: ang,
+            velocity: force
         };
         this.body = Bodies.rectangle(this.x, this.y, this.w, this.h, options);
         World.add(world, this.body);
@@ -29,13 +37,13 @@ class Note {
         translate(pos.x, pos.y);
         rotate(angle);
         strokeWeight(1);
-        stroke(190, 90);
-        fill(255, 90);
+        stroke(190, 30);
+        fill(255, 50);
         rect(0, 0, this.w, this.h, 3, 3, 3, 3);
-        fill(0);
-        textSize(22);
-        //textStyle(BOLD);
-        text(this.label, 0, 7);
+        fill(0, 100);
+        textFont(sans);
+        textSize(16);
+        text(this.label, 0, 5);
         pop();
     }
 }
diff --git a/sketch.js b/sketch.js
@@ -5,31 +5,34 @@
  */
 
 
-let sketch; // el objeto canvas
-let data;   // los datos tomados del JSON
-let notes;
-let w, h;
+let sketch; // html canvas object
+let data;   // JSON data object
+let notes;  // array of visual objects
+let w, h;   // global width and height
 
 // matter aliases : thanks Dan Shiffman and CodingTrain, Nature of Code, etc...
-
 var Engine = Matter.Engine,
   World = Matter.World,
   Bodies = Matter.Bodies,
   Constraint = Matter.Constraint,
   Mouse = Matter.Mouse,
   MouseConstraint = Matter.MouseConstraint;
 
-
+// matter.js main components
 var engine;
 var world;
 var boundaries = [];
 
-
+let serif, sans, sansBold;
 function preload() {
   w = document.getElementById("p5").offsetWidth;
-  h = w / 2;
+  h = document.getElementById("p5").offsetHeight;
   let url = "https://wiki.ead.pucv.cl/api.php?action=ask&format=json&maxlag=2000&uselang=user&errorformat=bc&query=[[Categor%C3%ADa:Acto%20del%20momento%20simult%C3%A1neo]]|%3FNota|%3FAutor|%3FPosici%C3%B3n|%3FImagen";
   data = loadJSON(url, gotData, 'jsonp');
+
+  serif = loadFont("fonts/Alegreya-Regular.ttf");
+  sans = loadFont("fonts/AlegreyaSans-Light.ttf");
+  sansBold = loadFont("fonts/AlegreyaSans-Bold.ttf");
 }
 
 let minlat, maxlat, minlon, maxlon;
@@ -65,67 +68,33 @@ function createObjects() {
     let t = thisResult.printouts['Nota'][0];
     let thisNote = new Note(lat, lon, title, t, autor);
     notes.push(thisNote);
-    /*
-    print("lat = "+lat+"\n"
-          +"lon = "+lon+"\n"
-          +"title = "+title+"\n"
-          +"t = "+t+"\n"
-          +"autor = "+autor+"\n"
-         );
-         */
   }
 }
 
-let count = 0;
-let counting = true;
-
-function createOneByOne() {
-  if(count == 0){
-    print("counting one by one")
-  }
-  print(" "+count);
-
-  let I = 0;
-  for (let key in data.query.results) {
-    I++;
-  }
-
-  if (count < I) {
-    let thisNote = data.query.results[count];
-    console.log(thisNote);
-    let lat = thisNote.printouts['Posición'][0].lat;
-    let lon = thisNote.printouts['Posición'][0].lon;
-    let autor = thisNote.printouts['Autor'][0].fulltext;
-    let title = thisNote.fulltext;
-    let t = thisNote.printouts['Nota'][0];
-    let note = new Note(lat, lon, title, t, autor);
-    notes.push(note);
-    count++;
-    print("pushed n°"+count);
-  } else { counting = false; }
-}
 
 function setup() {
   sketch = createCanvas(w, h);
   notes = [];
   sketch.parent('p5');
-  textFont("Alegreya Sans");
   engine = Engine.create();
   world = engine.world;
   //Engine.run(engine);
 
-  boundaries.push(new Boundary(w / 2, height, width, 50, 0));
+  // limits
+  boundaries.push(new Boundary(w / 2, height + 25, width, 50, 0));
   boundaries.push(new Boundary(-10, h / 2, 20, height * 5, 0));
   boundaries.push(new Boundary(w + 10, h / 2, 20, height * 5, 0));
 
   // top bumps
+  /*
   let n = 8;
   for(let i = 1; i < n; i++){
     let spacer = w/n;
     let tl = new Boundary(spacer * i, -10, 20, 10, random(-1, 1));
     //tl.show();
     boundaries.push(tl);
   }
+  */
   createObjects();
 
   var canvasmouse = Mouse.create(sketch.elt);
@@ -141,7 +110,7 @@ function setup() {
 
 function windowResized() {
   w = document.getElementById("p5").offsetWidth;
-  h = 500; // w / 2;
+  h = document.getElementById("p5").offsetHeight;
   sketch = createCanvas(w, h);
   sketch.parent('p5');
   createObjects();
@@ -155,29 +124,33 @@ function draw() {
   for (let i = 0; i < notes.length; i++) {
     notes[i].display();
 
+    // if a note is being clicked or dragged
     if (mConstraint.body === notes[i].body) {
-      fill(255, 3);
+      fill(255, 7);
       rectMode(CORNER);
       noStroke();
       rect(0, 0, w, h);
       textAlign(LEFT);
+      textFont(sansBold);
       textSize(18);
-      textStyle(BOLD);
-      fill(180, 30, 0)
-      text(notes[i].title, 50, 50);
-      textSize(36);
-      textStyle(NORMAL);
-      fill(30, 15);
-      text(notes[i].text, 50, 100);//, 400, 400);
+      fill(180, 30, 0, 10);
+      text(notes[i].title.toUpperCase(), 0, 20);
+      textFont(serif);
+      textSize(42);
+      fill(0, 10);
+      text(notes[i].text, 0, 45, w, h - 200);
     }
   }
 
   if (mConstraint.body) {
-    var pos = mConstraint.body.position;
-    var offset = mConstraint.constraint.pointB;
-    var m = mConstraint.mouse.position;
+    let pos = mConstraint.body.position;
+    let offset = mConstraint.constraint.pointB;
+    let m = mConstraint.mouse.position;
+    // paint line while dragging object
+    /*
     strokeWeight(3);
-    stroke(0, 75);
+    stroke(180, 30, 0, 90);
     line(pos.x + offset.x, pos.y + offset.y, m.x, m.y);
+    */
   }
 }
diff --git a/style.css b/style.css
@@ -1,4 +1,6 @@
+/*
 @import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@100;700&display=swap');
+*/
 
 html, body {
   margin: 0;
@@ -18,4 +20,8 @@ canvas {
   text-align: center;
   letter-spacing: 1ex;
   font-weight: 100;
+}
+
+#p5{
+  height: 100vh;
 }