Merge pull request #1 from yanyiyi/gh-pages

Gh pages to Master
yanyiyi · Aug 18, 2015 · 5af5f0c · 5af5f0c
2 parents 11e6bff + 1e597d7
commit 5af5f0c
Show file tree

Hide file tree

Showing 19 changed files with 5,397 additions and 40 deletions.
diff --git a/coscup-01.png b/coscup-01.png
diff --git a/coscup-02.png b/coscup-02.png
diff --git a/coscup-03.png b/coscup-03.png
diff --git a/coscup-05.png b/coscup-05.png
diff --git a/coscup-06.png b/coscup-06.png
diff --git a/coscup-07.png b/coscup-07.png
diff --git a/coscup-08.png b/coscup-08.png
diff --git a/coscup-09.png b/coscup-09.png
diff --git a/coscup-10.png b/coscup-10.png
diff --git a/coscup-11.png b/coscup-11.png
diff --git a/coscup-12.png b/coscup-12.png
diff --git a/coscup-BOB.png b/coscup-BOB.png
diff --git a/coscup-RS-01.png b/coscup-RS-01.png
diff --git a/css.css b/css.css
@@ -7,6 +7,8 @@ input{
     width: 320px;
 } 
 
+
+
 input[type="range"]{
 
     width: 200px;
@@ -23,33 +25,56 @@ input[type="range"]{
 
 iframe{
     width: 100%;
-    max-width: 1123px;
-    height: 750px;
+    max-width: 1173px;
+    height: 800px;
     border: 0px;
      margin: 0 auto;
+    overflow: hidden;
 }
 
 #all{
      margin: 0 auto;
-    width: 1123px;
-    height: 750px;
+    width: 1173px;
+    height: 800px;
+    overflow: hidden;
+    position: relative;
 }
 
 input[type="range"]:nth-child(even){
    width: 100px; 
 }
  @media print{
    input {
-     display:none;
+     display: none;
    }
 
      iframe{
        width: 1120px;
          height: 740px;
 
      }
+     button{
+        display: none; 
+     }
+
+     span{
+        display: none;
+     }
  }
 
 #cameraC{
     margin: 0 auto;
-}
+    position: absolute;
+   top: 650px;
+    left: 640px;
+    color: #FFF;
+}
+
+button{
+    color: #bab7b1;
+    background-color: #3f9;
+    font-size: 18px;
+    border: 1px #FFF dotted;
+    width: 120px;
+    opacity: 0.5;
+}
diff --git a/img_bk-01.png b/img_bk-01.png
diff --git a/index.html b/index.html
@@ -11,19 +11,21 @@
 <!-- Begin
 function varitext(text){
 text=document
-print(text)
+print(text);
+sV();
 }
+  function sV(){      
+        saveCanvas(canvas,'myCanvas'+varX, 'png');
+    varX++;}
 //  End -->
 </script>
 <link rel="stylesheet" href="css.css">
 </head>
 <body>
 <div id="all">
 <iframe src="p5js.html" ></iframe>
-
-<INPUT NAME="print" TYPE="button" id="cameraC" VALUE="拍下此刻"
-ONCLICK="varitext()">
-
+<button NAME="print" TYPE="button" id="cameraC" 
+        ONCLICK="varitext()">Print</button>
 </div>
 
 </body>

diff --git a/sketch.js b/sketch.js
@@ -1,13 +1,22 @@
-var img;
+var img1,img2,img3,img4,img5,img6,img7,img8,img9,img10,img11,img12,imgBK;
 var fTitle;
 var tName,tSay,camX,camY,camOffsetX,camOffsetY,yearX,nBtn;
+
+var tag1,tag2,tag3,tag4,tag5;
 function preload() {
   img1 = loadImage("coscup-01.png");
   img2 = loadImage("coscup-02.png");
   img3 = loadImage("coscup-03.png");
   img4 = loadImage("coscup-04.png");
-  img5 = loadImage("coscup-05.png");
-//  fTitle = loadFont("NotoSansCJKtc-Bold.otf");
+  img5 = loadImage("coscup-06.png");  
+  img6 = loadImage("coscup-05.png");
+    img7 = loadImage("coscup-07.png");
+    img8 = loadImage("coscup-08.png");
+     img9 = loadImage("coscup-09.png");
+     img10 = loadImage("coscup-10.png");
+    img11 = loadImage("coscup-11.png");
+    img12 = loadImage("coscup-12.png");
+ imgBK = loadImage("img_bk-01.png");
 }
 
 function setup() {
@@ -16,65 +25,96 @@ function setup() {
   capture = createCapture(VIDEO);
   capture.size(490, 368);
   capture.hide();
-  tName = createInput("你的暱稱/名字").size(200,24);
+  tName = createInput("你的暱稱/名字").size(320,24);
   tName.position(640,232);
-  tSay = createInput("你想說的話").size(200,24);
+  tSay = createInput("你想說的話").size(320,24);
   tSay.position(640,455);
-  camX = createSlider(490,720,490);
+  camX = createSlider(490,720,605);
   camX.position(250,500);
-  camY = createSlider(368,480,368);
+  camY = createSlider(368,480,424);
   camY.position(40,285);
 
   camOffsetX = createSlider(-150,150,0);
   camOffsetX.position(250,525);
   camOffsetY = createSlider(-50,50,0);
   camOffsetY.position(40,310);
-  yearX = createSlider(1,5,5);
+  yearX = createSlider(1,12,12);
   yearX.position(210,700);
-  varX = 0;
+    nBtn = createButton("Save",0);
+    nBtn.position(640,600);
+  tag1 = createElement("span","高矮");
+    tag2 =  createElement("span","寬瘦");
+    tag3 = createElement("span","上下");
+    tag4 = createElement("span","左右");
+    tag5 = createElement("span","年");
+    tag1.position(5,285);
+    tag2.position(215,500);
+    tag3.position(5,310);
+    tag4.position(215,525);
+    tag5.position(188,700);
+    varX = 0;
 }
 var displayName,displaySay,displayX,displayY,ofX,ofY;
 function draw() {
+ image(imgBK, 0, 0);   
 displayName = tName.value();
 displaySay = tSay.value();
 displayX = camX.value();
 displayY = camY.value();
 ofX = camOffsetX.value();
 ofY = camOffsetY.value();
 imgX = yearX.value();
- image(capture, 150+ofX, 140+ofY, displayX, displayY);
+image(capture, 350+ofX-displayX/2, 315+ofY-displayY/2, displayX, displayY);
 
 
  switch(imgX) {
     case 1:
-        image(img5, 0, 0);
+        image(img12, 0, 0);
         break;
     case 2:
-        image(img4, 0, 0);
+        image(img11, 0, 0);
         break;
     case 3:
-        image(img3, 0, 0);
+        image(img10, 0, 0);
         break;
     case 4:
-        image(img2, 0, 0);
+        image(img9, 0, 0);
         break;
     case 5:
+        image(img8, 0, 0);
+        break;
+   case 6:
+        image(img7, 0, 0);
+        break;
+    case 7:
+        image(img6, 0, 0);
+        break;
+     case 8:
+        image(img5, 0, 0);
+          break;
+     case 9:
+        image(img4, 0, 0);
+          break;
+     case 10:
+        image(img3, 0, 0);
+        break;
+    case 11:
+        image(img2, 0, 0);
+        break;
+     case 12:
         image(img1, 0, 0);
         break;
-
  }
-
-
-
- fill('#545046');
- textSize(28);
- textFont("CSong3HK-Medium");
- text(displayName,640, 190,320,50);
-fill('#2d2b27');
- textSize(21);
- textFont("NotoSansCJKtc-Light");
- text(displaySay,640,270,320,200);
-
+ if(imgX > 5){
+     fill('#545046');
+     textSize(28);
+     textFont("CSong3HK-Medium");
+     text(displayName,640, 190,320,50);
+    fill('#2d2b27');
+     textSize(21);
+     textFont("NotoSansCJKtc-Light");
+     text(displaySay,640,270,320,200);
+ }
 }
 
 
@@ -85,8 +125,9 @@ function mousePressed() {
     var fs = fullScreen();
     fullscreen(!fs);
   }
-  if (mouseX > 1123){ 
-    saveCanvas(canvas,'myCanvas'+varX, 'png');
+  if (mouseX > 590 && mouseX < 960  && mouseY > 590 && mouseY < 700){ 
+
+    saveCanvas(canvas,'COSCUP10yrs'+displayName+'-'+varX, 'png');
     varX++;
   }
 }