A fake command line interface written in p5.js and Processing 3 https://www.victorgiers.com/cwi
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

console.js 7.9KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. var commandLine;
  2. function setup() {
  3. createCanvas(window.innerWidth,window.innerHeight);
  4. textFont("Courier New");
  5. textSize(14);
  6. frameRate(12);
  7. loadAnimationTexts();
  8. commandLine = new CommandLine();
  9. }
  10. function draw() {
  11. background(0);
  12. stroke(255);
  13. strokeWeight(0);
  14. fill(255);
  15. push();
  16. translate(translateX, translateY);
  17. scale(scaleFactor);
  18. // image(fingers,0,0, gwidth, gheight); // draw the video frame to canvas
  19. pop();
  20. if(busy) runSequence();
  21. commandLine.show();
  22. }
  23. function CommandLine(){
  24. this.userInput = "";
  25. this.presentedLines = Array(60).fill("");
  26. this.getUserInput = function(code,c){
  27. if(!busy){
  28. if (code != 8 && code != 10 && code != 16 && code != 17 && code != 18 && code != 20) {
  29. this.userInput = this.userInput + c.toLowerCase();
  30. }
  31. if (code == 8 && this.userInput.length > 0) { //backspace
  32. this.userInput = this.userInput.substr(0, this.userInput.length-1);
  33. } else if (code == 13) { //enter
  34. this.compareUserInput(this.userInput);
  35. this.userInput = "";
  36. }
  37. }
  38. }
  39. this.pushLineStrings = function(bottomLines){
  40. for(var i = 0; i < bottomLines.length; i ++){
  41. this.presentedLines.splice(0, 0, bottomLines[i]);
  42. }
  43. }
  44. this.pushLineString = function(bottomLine) {
  45. for (var i = this.presentedLines.length-1; i > 0; i--) {
  46. this.presentedLines[i] = this.presentedLines[i-1];
  47. }
  48. this.presentedLines[0] = bottomLine;
  49. }
  50. this.changeLineString = function(bottomLine) {
  51. this.presentedLines[0] = bottomLine;
  52. }
  53. this.getInputLine = function(){
  54. if(!busy){
  55. this.inputString = frameCount % 2 == 0 ? "guest@iris ~ $ " + this.userInput + "_" : "guest@iris ~ $ " + this.userInput;
  56. this.presentedLines[0] = this.inputString;
  57. }
  58. }
  59. this.show = function(){
  60. console.log(this.presentedLines[0]);
  61. this.getInputLine();
  62. for (var i = 0; i < this.presentedLines.length; i++) {
  63. text(this.presentedLines[i], 13, window.innerHeight-150-(i*13));
  64. }
  65. }
  66. this.compareUserInput = function(userin){
  67. userin=userin.trim()
  68. if(this.presentedLines[0].charAt(this.presentedLines[0].length-1) == '_'){
  69. this.presentedLines[0] = this.presentedLines[0].substring (0, this.presentedLines[0].length-1);
  70. }
  71. if (userin === "gerkzeuk"){
  72. this.pushLineString("");
  73. PopupCenter('gerkzeuk/', 'gerkzeuk', 1024, screen.height);
  74. } else if (userin === "info"){
  75. printInfo();
  76. } else if (userin === "laserharp" || userin === "laserharfe"){
  77. this.pushLineString("");
  78. PopupCenter('laser/', 'laserharfe', screen.width, screen.height);
  79. } else if (userin === "dance"){
  80. this.pushLineString("");
  81. pfc = frameCount;
  82. busy = true;
  83. seqDance_b = true;
  84. } else if (userin === "fire"){
  85. this.pushLineString("");
  86. pfc = frameCount;
  87. busy = true;
  88. seqFire_b = true;
  89. } else if (userin === "t"){
  90. window.location.href = "t/index.html"
  91. } else if (userin === "electronic art"){
  92. this.pushLineString("");
  93. PopupCenter("https://www.youtube.com/watch?v=3-zyXnc2Xls", "Walter Giers - Electronic Art", screen.width, screen.height);
  94. } else if (userin === "genome"){
  95. pfc = frameCount;
  96. busy = true;
  97. seqGenome_b = true;
  98. } else if (userin === "blog"){
  99. this.pushLineString("");
  100. PopupCenter('http://giers.wordpress.com/', 'Neugier & Ästhetik', screen.width, screen.height);
  101. } else if (userin === "constructivism2"){
  102. pfc = frameCount;
  103. busy = true;
  104. seqConstructivism_b = true;
  105. } else if (userin === "go outside" || userin === "outside" || userin === "go" || userin === "street"){
  106. this.pushLineString("");
  107. pfc = frameCount;
  108. busy = true;
  109. seqOutside_b = true;
  110. } else if (userin === "maria"){
  111. this.pushLineString("");
  112. pfc = frameCount;
  113. busy = true;
  114. seqMaria_b = true;
  115. } else if (userin === "skip"){
  116. this.pushLineString("");
  117. pfc = frameCount;
  118. busy = true;
  119. seqSkip_b = true;
  120. } else if (userin === ""){
  121. this.pushLineString(this.inputString);
  122. } else {
  123. this.pushLineString("Unavailale or forbidden command.");
  124. this.pushLineString("Available commands are: [info] [maria] [gerkzeuk] [laserharp] [electronic art] [street] [dance] [t] [genome] [fire] [blog] [constructivism2] and [skip]");
  125. this.pushLineString("");
  126. }
  127. }
  128. }
  129. function PopupCenter(url, title, w, h) {
  130. // Fixes dual-screen position Most browsers Firefox
  131. var dualScreenLeft = window.screenLeft != undefined ? window.screenLeft : screen.left;
  132. var dualScreenTop = window.screenTop != undefined ? window.screenTop : screen.top;
  133. var width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
  134. var height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;
  135. var left = ((width / 2) - (w / 2)) + dualScreenLeft;
  136. var top = ((height / 2) - (h / 2)) + dualScreenTop;
  137. var newWindow = window.open(url,title,'scrollbars=yes,width=' + w + ',height=' + h + ',top=' + top + ', left=' + left + ',resizable,scrollbars,toolbar,menubar');
  138. // Puts focus on the newWindow
  139. if (window.focus) {
  140. newWindow.focus();
  141. }
  142. }
  143. function runSequence(){
  144. if(busy){
  145. if (seqIntro_b){
  146. seqIntro();
  147. } else if(seqDance_b){
  148. seqDance();
  149. } else if(seqFire_b){
  150. seqFire();
  151. } else if(seqOutside_b){
  152. seqOutside();
  153. } else if(seqMaria_b){
  154. seqMaria();
  155. } else if(seqSkip_b){
  156. seqSkip();
  157. } else if(seqGenome_b){
  158. seqGenome();
  159. } else if(seqConstructivism_b){
  160. seqConstructivism();
  161. }
  162. }
  163. }
  164. var gwidth = window.innerWidth;
  165. var gheight = window.innerHeight;
  166. var zoomedState = false;
  167. var scaleFactor = 1.0;
  168. var translateX = 0.0;
  169. var translateY = 0.0;
  170. function reset() {
  171. scaleFactor = 1;
  172. translateX = 0.0;
  173. translateY = 0.0;
  174. }
  175. function collisionDetection() {
  176. while (translateX > 0.0) translateX--;
  177. while (translateY*scaleFactor > 0.0) translateY--;
  178. while (translateX+gwidth*scaleFactor < gwidth) translateX++;
  179. while (translateY+gheight*scaleFactor < gheight) translateY++;
  180. }
  181. function zoom(delta) {
  182. translateX -= mouseX;
  183. translateY -= mouseY;
  184. scaleFactor *= delta;
  185. translateX *= delta;
  186. translateY *= delta;
  187. translateX += mouseX;
  188. translateY += mouseY;
  189. collisionDetection();
  190. }
  191. function keyPressed(){
  192. commandLine.getUserInput(keyCode, key);
  193. return false;
  194. }
  195. function mousePressed() {
  196. if (mouseButton == CENTER) {
  197. if (!zoomedState && scaleFactor == 1.0) {
  198. zoom(3);
  199. } else {
  200. reset();
  201. }
  202. zoomedState = !zoomedState;
  203. }
  204. }
  205. function mouseDragged() {
  206. if (zoomedState) {
  207. translateX += (mouseX - pmouseX)/3; //this /3 shit is shit, drag n drop moves too fast, why
  208. translateY += (mouseY - pmouseY)/3;
  209. collisionDetection();
  210. }
  211. }
  212. function mouseWheel(event) {
  213. if(event.deltaY > 0){
  214. zoom(1.0/1.05);
  215. } else if(event.deltaY < 0){
  216. zoom(1.05);
  217. } else {
  218. zoom(1.0);
  219. }
  220. zoomedState = true;
  221. if (scaleFactor <= 1.0 && event.deltaY > 0){
  222. reset();
  223. }
  224. }
  225. //on backspace down + optional callback
  226. function onBackspace(e, callback){
  227. var key;
  228. if(typeof e.keyIdentifier !== "undefined"){
  229. key = e.keyIdentifier;
  230. }else if(typeof e.keyCode !== "undefined"){
  231. key = e.keyCode;
  232. }
  233. if (key === 'U+0008' ||
  234. key === 'Backspace' ||
  235. key === 8) {
  236. if(typeof callback === "function"){
  237. callback();
  238. }
  239. return true;
  240. }
  241. return false;
  242. }
  243. //event listener
  244. window.addEventListener('keydown', function (e) {
  245. switch(e.target.tagName.toLowerCase()){
  246. case "input":
  247. case "textarea":
  248. break;
  249. case "body":
  250. onBackspace(e,function(){
  251. e.preventDefault();
  252. });
  253. break;
  254. }
  255. }, true);