Initial Project

yanyiyi · Aug 14, 2015 · 5e63030 · 5e63030
1 parent 16860a5
commit 5e63030
Show file tree

Hide file tree

Showing 14 changed files with 151 additions and 30,242 deletions.
diff --git a/CNAME b/CNAME
@@ -0,0 +1 @@
+coscupcamera.yannest.com
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-04.png b/coscup-04.png
diff --git a/coscup-05.png b/coscup-05.png
diff --git a/css.css b/css.css
@@ -0,0 +1,55 @@
+ body {padding: 0; margin: 0;}
+input{
+    color: #bab7b1;
+    background-color: rgba(255,255,255,0.4);
+    font-size: 18px;
+    border: 1px #FFF dotted;
+    width: 320px;
+} 
+
+input[type="range"]{
+
+    width: 200px;
+
+}
+
+#print{
+     position: absolute;
+    bottom:  50px;
+    right: 50px;
+
+}
+
+
+iframe{
+    width: 100%;
+    max-width: 1123px;
+    height: 750px;
+    border: 0px;
+     margin: 0 auto;
+}
+
+#all{
+     margin: 0 auto;
+    width: 1123px;
+    height: 750px;
+}
+
+input[type="range"]:nth-child(even){
+   width: 100px; 
+}
+ @media print{
+   input {
+     display:none;
+   }
+
+     iframe{
+       width: 1120px;
+         height: 740px;
+
+     }
+ }
+
+#cameraC{
+    margin: 0 auto;
+}
diff --git a/index.html → p5js.html b/index.html → p5js.html
@@ -3,14 +3,21 @@
   <head>
     <meta charset="UTF-8">
     <title>Untitled</title>
+
     <script src="libraries/p5.js" type="text/javascript"></script>
 
     <!-- Uncomment the lines below to include extra p5 libraries -->
     <script src="libraries/p5.dom.js" type="text/javascript"></script>
     <script src="libraries/p5.sound.js" type="text/javascript"></script>
 
     <script src="sketch.js" type="text/javascript"></script>
+
+
+    <link rel="stylesheet" href="css.css">
   </head>
   <body>
-  </body>
+
+
+
+    </body>
 </html>
diff --git a/sketch.js b/sketch.js
@@ -1,7 +1,92 @@
+var img;
+var fTitle;
+var tName,tSay,camX,camY,camOffsetX,camOffsetY,yearX,nBtn;
+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");
+}
+
 function setup() {
+  createCanvas(1123,750);
+  background('#d4fcd4');
+  capture = createCapture(VIDEO);
+  capture.size(490, 368);
+  capture.hide();
+  tName = createInput("你的暱稱/名字").size(200,24);
+  tName.position(640,232);
+  tSay = createInput("你想說的話").size(200,24);
+  tSay.position(640,455);
+  camX = createSlider(490,720,490);
+  camX.position(250,500);
+  camY = createSlider(368,480,368);
+  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.position(210,700);
+  varX = 0;
 }
-
+var displayName,displaySay,displayX,displayY,ofX,ofY;
 function draw() {
-
+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);
+
+
+ switch(imgX) {
+    case 1:
+        image(img5, 0, 0);
+        break;
+    case 2:
+        image(img4, 0, 0);
+        break;
+    case 3:
+        image(img3, 0, 0);
+        break;
+    case 4:
+        image(img2, 0, 0);
+        break;
+    case 5:
+        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);
+
+}
+
+
+var varX;
+
+function mousePressed() {
+  if (mouseX > 0 && mouseX < 100 && mouseY > 0 && mouseY < 100) {
+    var fs = fullScreen();
+    fullscreen(!fs);
+  }
+  if (mouseX > 1123){ 
+    saveCanvas(canvas,'myCanvas'+varX, 'png');
+    varX++;
+  }
 }
diff --git a/sketch/index.html b/sketch/index.html