{"id":2236,"date":"2017-11-14T16:15:31","date_gmt":"2017-11-14T15:15:31","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/?p=2236"},"modified":"2017-11-21T17:55:32","modified_gmt":"2017-11-21T16:55:32","slug":"space-collider","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/?p=2236","title":{"rendered":"SPACE COLLIDER"},"content":{"rendered":"<p><!--more--><\/p>\n<p>L&#8217;objectif de ce projet vid\u00e9o-ludique est de revisiter les fondements du gameplay traditionnel en cr\u00e9ant le jeu via le code (P5.js) et en fabriquant sa propre &#8220;manette de jeu&#8221; (le medium et les moyens mis en oeuvre pour jouer au jeu) \u00e0 l&#8217;aide du syst\u00e8me makey-makey.<\/p>\n<p><a href=\"http:\/\/www.openprocessing.org\/sketch\/474984\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" class=\"alignnone wp-image-2441 size-full\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/start-1.jpg\" alt=\"\" width=\"780\" height=\"347\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/start-1.jpg 780w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/start-1-300x133.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/start-1-768x342.jpg 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/a><\/p>\n[Le jeu est long \u00e0 charger \u00e0 cause du pr\u00e9chargement des sons et images et le syst\u00e8me de reset\/rechargement ne fonctionne pas via la page processing mais est fonctionnel sous firefox]\n\n\t\t<!-- MasterSlider -->\n\t\t<div id=\"P_MS69f2601fcde35\" class=\"master-slider-parent msl ms-parent-id-77\" style=\"max-width:1000px;\">\n\n\t\t\t\n\t\t\t<!-- MasterSlider Main -->\n\t\t\t<div id=\"MS69f2601fcde35\" class=\"master-slider ms-skin-light-3\" >\n\t\t\t\t \t\t\t\t \n\t\t\t\t<div  class=\"ms-slide\" data-delay=\"3\" data-fill-mode=\"fill\"  >\n\t\t\t\t\t<img src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/plugins\/master-slider\/public\/assets\/css\/blank.gif\" alt=\"\" title=\"\" data-src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0059-1.jpg\" \/>\n\n\n\t<div class=\"ms-thumb\" ><div class=\"ms-tab-context\"><div class=&quot;ms-tab-context&quot;><\/div><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div  class=\"ms-slide\" data-delay=\"3\" data-fill-mode=\"fill\"  >\n\t\t\t\t\t<img src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/plugins\/master-slider\/public\/assets\/css\/blank.gif\" alt=\"\" title=\"\" data-src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0056-1.jpg\" \/>\n\n\n\t<div class=\"ms-thumb\" ><div class=\"ms-tab-context\"><div class=&quot;ms-tab-context&quot;><\/div><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div  class=\"ms-slide\" data-delay=\"3\" data-fill-mode=\"fill\"  >\n\t\t\t\t\t<img src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/plugins\/master-slider\/public\/assets\/css\/blank.gif\" alt=\"\" title=\"\" data-src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0057-2.jpg\" \/>\n\n\n\t<div class=\"ms-thumb\" ><div class=\"ms-tab-context\"><div class=&quot;ms-tab-context&quot;><\/div><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div  class=\"ms-slide\" data-delay=\"3\" data-fill-mode=\"fill\"  >\n\t\t\t\t\t<img src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/plugins\/master-slider\/public\/assets\/css\/blank.gif\" alt=\"\" title=\"\" data-src=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0061-1.jpg\" \/>\n\n\n\t<div class=\"ms-thumb\" ><div class=\"ms-tab-context\"><div class=&quot;ms-tab-context&quot;><\/div><\/div>\n<\/div>\n\t\t\t\t<\/div>\n\n\t\t\t<\/div>\n\t\t\t<!-- END MasterSlider Main -->\n\n\t\t\t \n\t\t<\/div>\n\t\t<!-- END MasterSlider -->\n\n\t\t<script>\n\t\t(function ( $ ) {\n\t\t\t\"use strict\";\n\n\t\t\t$(function () {\n\t\t\t\tvar masterslider_de35 = new MasterSlider();\n\n\t\t\t\t\/\/ slider controls\n\t\t\t\tmasterslider_de35.control('arrows'     ,{ autohide:false, overVideo:true  });\n\t\t\t\t\/\/ slider setup\n\t\t\t\tmasterslider_de35.setup(\"MS69f2601fcde35\", {\n\t\t\t\t\t\twidth           : 1000,\n\t\t\t\t\t\theight          : 500,\n\t\t\t\t\t\tminHeight       : 0,\n\t\t\t\t\t\tspace           : 0,\n\t\t\t\t\t\tstart           : 1,\n\t\t\t\t\t\tgrabCursor      : true,\n\t\t\t\t\t\tswipe           : true,\n\t\t\t\t\t\tmouse           : true,\n\t\t\t\t\t\tlayout          : \"boxed\",\n\t\t\t\t\t\twheel           : false,\n\t\t\t\t\t\tautoplay        : true,\n\t\t\t\t\t\tinstantStartLayers:false,\n\t\t\t\t\t\tloop            : true,\n\t\t\t\t\t\tshuffle         : false,\n\t\t\t\t\t\tpreload         : 0,\n\t\t\t\t\t\theightLimit     : true,\n\t\t\t\t\t\tautoHeight      : true,\n\t\t\t\t\t\tsmoothHeight    : true,\n\t\t\t\t\t\tendPause        : false,\n\t\t\t\t\t\toverPause       : true,\n\t\t\t\t\t\tfillMode        : \"fill\",\n\t\t\t\t\t\tcenterControls  : true,\n\t\t\t\t\t\tstartOnAppear   : false,\n\t\t\t\t\t\tlayersMode      : \"center\",\n\t\t\t\t\t\thideLayers      : false,\n\t\t\t\t\t\tfullscreenMargin: 0,\n\t\t\t\t\t\tspeed           : 20,\n\t\t\t\t\t\tdir             : \"h\",\n\t\t\t\t\t\tparallaxMode    : 'swipe',\n\t\t\t\t\t\tview            : \"basic\"\n\t\t\t\t});\n\n\t\t\t\t\n\t\t\t\twindow.masterslider_instances = window.masterslider_instances || [];\n\t\t\t\twindow.masterslider_instances.push( masterslider_de35 );\n\t\t\t });\n\n\t\t})(jQuery);\n\t\t<\/script>\n\n\n<p>Le jeu Space Collider n\u00e9cessite r\u00e9flexe et rapidit\u00e9 pour que notre soucoupe volante puisse \u00e9viter le maximum de m\u00e9t\u00e9orites (et ainsi parcourir le plus de distance possible). L&#8217;\u00e9criture du code de jeu sur langage P5.js (un d\u00e9riv\u00e9 du java script) mettait en place des commandes\/touches que nous avions personnaliser avec le makey-makey avec les solutions de notre choix. Certaines difficult\u00e9s ont \u00e9t\u00e9 rencontr\u00e9 en vu du principe de &#8220;reload&#8221; ou de rafra\u00eechissement du jeu (de la page) et aussi concernant le principe de game over.<\/p>\n<p><img loading=\"lazy\" width=\"900\" height=\"400\" class=\"alignnone size-full wp-image-2444\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/end.jpg\" alt=\"\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/end.jpg 900w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/end-300x133.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/end-768x341.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/p>\n<p>Un &#8220;menu&#8221; demandant une action de d\u00e9marrage de la part du joueur \u00e9tait une solution ergonomique pour ne pas alt\u00e9rer la jouabilit\u00e9 et ainsi ne pas avoir le game over 1 seconde apr\u00e8s le chargement de la page, le syst\u00e8me de reload a \u00e9t\u00e9 mis en place dans le m\u00eame but ne pas g\u00eaner l&#8217;exp\u00e9rience du joueur en restant sur la manette personnalis\u00e9e.<\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1.jpg\"><img loading=\"lazy\" class=\"alignnone wp-image-2262\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-300x207.jpg\" alt=\"\" width=\"366\" height=\"253\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-300x207.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-768x530.jpg 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-1024x707.jpg 1024w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-1739x1200.jpg 1739w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/1-960x662.jpg 960w\" sizes=\"(max-width: 366px) 100vw, 366px\" \/><\/a> <a href=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2.jpg\"><img loading=\"lazy\" class=\"wp-image-2265 alignright\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-300x211.jpg\" alt=\"\" width=\"370\" height=\"260\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-300x211.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-768x539.jpg 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-1024x719.jpg 1024w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-1710x1200.jpg 1710w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/2-960x674.jpg 960w\" sizes=\"(max-width: 370px) 100vw, 370px\" \/>\u00a0 <\/a><\/p>\n<p>Conception de la manette de jeu (en lien avec le makey-makey) tactile ou \u00e0 leviers.<\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0051-1.jpg\"><img loading=\"lazy\" class=\"alignnone wp-image-2383\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0051-1-300x199.jpg\" alt=\"\" width=\"364\" height=\"241\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0051-1-300x199.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0051-1-768x510.jpg 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0051-1.jpg 780w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/a><a href=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1.jpg\"><img loading=\"lazy\" class=\" wp-image-2388 alignright\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-300x199.jpg\" alt=\"\" width=\"364\" height=\"241\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-300x199.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-768x510.jpg 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-1024x680.jpg 1024w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-1800x1196.jpg 1800w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0058-1-960x638.jpg 960w\" sizes=\"(max-width: 364px) 100vw, 364px\" \/><\/a><\/p>\n<p><img loading=\"lazy\" width=\"780\" height=\"518\" class=\"size-full wp-image-2392 aligncenter\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0062-1.jpg\" alt=\"\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0062-1.jpg 780w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0062-1-300x199.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0062-1-768x510.jpg 768w\" sizes=\"(max-width: 780px) 100vw, 780px\" \/><\/p>\n<p>R\u00e9sultat de la cr\u00e9ation de manette (surfaces conductrices en cuivre). Manette reli\u00e9e aux commandes du syst\u00e8me makey-makey (fera office de surfaces tactiles)<\/p>\n<p><a href=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0064-1.jpg\"><img loading=\"lazy\" class=\" wp-image-2393 aligncenter\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0064-1-300x199.jpg\" alt=\"\" width=\"478\" height=\"317\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0064-1-300x199.jpg 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0064-1-768x510.jpg 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/DSC_0064-1.jpg 780w\" sizes=\"(max-width: 478px) 100vw, 478px\" \/><\/a><\/p>\n<p>Enfin pour fermer le circuit il me fallait trouver un moyen de faire contact avec le corps du joueur (la terre). j&#8217;ai donc opt\u00e9 initialement pour un bracelet connect\u00e9 au makey-makey, puis \u00e0 un casque.<\/p>\n<p><img loading=\"lazy\" width=\"1800\" height=\"800\" class=\"alignnone size-full wp-image-2680\" src=\"http:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat.png\" alt=\"\" srcset=\"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat.png 1800w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat-300x133.png 300w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat-768x341.png 768w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat-1024x455.png 1024w, https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/wp-content\/uploads\/sites\/9\/2017\/11\/stat-960x427.png 960w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":2688,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,25],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/posts\/2236"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2236"}],"version-history":[{"count":25,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":2682,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/posts\/2236\/revisions\/2682"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=\/wp\/v2\/media\/2688"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/insituhacklab\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}