Difference between revisions of "Team:Erlangen Nuremberg"
| Line 1: | Line 1: | ||
| − | < | + | <style> |
| + | .navbar-default, .navbar-brand { | ||
| + | transition: all 0.5s; | ||
| + | } | ||
| − | + | nav.navbar.navbar-default.navbar-fixed-top.transparent { | |
| − | + | background-color: rgba(0, 0, 0, 0); | |
| − | + | } | |
| + | .transparent .navbar-brand { | ||
| + | background-image: url('../images/T--Erlangen_Nuremberg--Logo_inverted.png') | ||
| + | } | ||
| − | + | @media (max-width: 1024px) { | |
| − | + | div#navbar { | |
| + | background-color: rgba(255, 255, 255, 0.95); | ||
| + | } | ||
| + | } | ||
| − | + | .parallax { | |
| − | + | height: 90vh; | |
| + | /*background: url("images/T--Erlangen_Nuremberg--DNA_String.png.jpeg") no-repeat fixed center;*/ | ||
| + | background-color: #000; | ||
| + | background-size: cover; | ||
| + | position: relative; | ||
| + | margin-top: -100px; | ||
| + | } | ||
| − | + | .parallax-heading { | |
| − | + | top: 40%; | |
| + | position: absolute; | ||
| + | } | ||
| + | .parallax h1 { | ||
| + | margin: 0 8.5%; | ||
| + | color: white; | ||
| + | font-weight: 100 !important; | ||
| + | font-size: 2.5em; | ||
| + | background: none; | ||
| + | padding: 10px; | ||
| − | + | } | |
| − | + | ||
| − | + | p:first-child { | |
| − | + | margin: 0; | |
| − | + | } | |
| − | + | /* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */ | |
| − | + | @media (max-width: 768px) { | |
| − | + | .parallax { | |
| + | background-attachment: scroll; | ||
| + | } | ||
| − | + | .parallax h1 { | |
| − | + | font-size: 180%; | |
| + | font-weight: 100; | ||
| + | } | ||
| + | } | ||
| − | + | .light{ | |
| − | + | text-align: center; | |
| + | } | ||
| − | + | .light p { | |
| − | + | margin-left: 20%; | |
| − | + | margin-right: 20%; | |
| − | + | color: #333230; | |
| − | + | letter-spacing: 0.5px; | |
| + | } | ||
| − | + | .light h2 { | |
| − | + | font-weight: 100; | |
| − | + | letter-spacing: 2px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | } | |
| − | + | ||
| − | + | ||
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | <div class="parallax"> | |
| − | + | <canvas style="width: 100%; height: 100%; z-index: -1;"></canvas> | |
| − | + | <div class="parallax-heading"><h1> Development of Novel Biocompatible Tissue for the Application as Artificial | |
| − | + | Muscles in | |
| − | + | Robotics and | |
| − | + | Medicine </h1> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="light"> | |
| + | <h2>Abstract</h2> | ||
| + | <p> | ||
| + | The development of artificial muscles attracts wide interest for industrial and medical | ||
| + | applications. Regarding manufacturing, robotic devices with synthetic muscles are able to | ||
| + | handle softer materials more precisely. Moreover, artificial musculatures in medical | ||
| + | prostheses can improve the wearing comfort while conveying a rather natural feeling. | ||
| + | Currently, muscle-like contractions can be obtained by capacitor systems or by molecular | ||
| + | machines incorporating tissue. This project aims to replace the common materials in both | ||
| + | branches by biological tissue. While increasing ecological friendliness and the compatibility | ||
| + | with human tissue, those fabricated compositions can compete with human biological | ||
| + | material. <br> <br> | ||
| + | Like a capacitor, the dielectric elastomer actuator (DEA) comprises two lightweight and | ||
| + | flexible electrodes separated by an insulating elastomeric layer. In a first set of experiments, | ||
| + | the elastomer layers in the capacitor-based muscle need to be replaced by appropriate protein | ||
| + | structures. P-Pili with their excellent elastic properties and proteins with high amounts of | ||
| + | helical secondary architecture are to be tested for this approach. In a next step, the currently | ||
| + | used light weighted graphene or carbon nanotube layers need to be replaced by the Pili to | ||
| + | provide conductivity and flexibility comparable to the carbon nanotubes. Both fibril types can | ||
| + | be easily expressed in Geobacter sulflurreducens and Escherichia coli in a large scale, which | ||
| + | makes the overall system extremely feasible since one organism can provide the whole | ||
| + | material. <br> <br> | ||
| + | Another tissue with muscle-like contractions will be fabricated through polymers with | ||
| + | integrated molecular machines. Herein, the latter are based on azo dyes capable of having | ||
| + | their entire network contracted by light irradiation. The biopolymer matrix is fabricated by | ||
| + | Escherichia coli and consists of catcher-tag systems modified with a biotin-accepting anchor. | ||
| + | The molecular machines attach to the biopolymer tissue via biotin and biotin acceptor | ||
| + | interactions. Due to the crosslinking of the single protein strains the stiffness of the resulting | ||
| + | tissue can be adjusted accurately. <br> <br> | ||
| + | In both cases, the achieved tissues are cell-free and can immediately be adapted to the system. | ||
| + | Within the scope of the project, the construction of a DEA-prototype is planned, since the | ||
| + | realization of electrical stimuli is more feasible than through photo-induced signals. | ||
| + | </p> | ||
| + | </div> | ||
| − | + | <script> | |
| − | + | /* CANVAS */ | |
| − | + | /* | |
| − | + | * requestAnimationFrame pollyfill | |
| − | + | */ | |
| − | + | if (!window.requestAnimationFrame) { | |
| − | + | window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { | |
| − | + | return window.setTimeout(callback, 1000 / 60); | |
| + | }); | ||
| + | } | ||
| − | + | /*! | |
| − | + | * Mantis.js / jQuery / Zepto.js plugin for Constellation | |
| − | + | * @version 1.2.2 | |
| − | + | * @author Acauã Montiel <contato@acauamontiel.com.br> | |
| + | * @license http://acaua.mit-license.org/ | ||
| + | */ | ||
| + | (function($, window) { | ||
| + | /** | ||
| + | * Makes a nice constellation on canvas | ||
| + | * @constructor Constellation | ||
| + | */ | ||
| + | function Constellation(canvas, options) { | ||
| + | var $canvas = $(canvas), | ||
| + | context = canvas.getContext('2d'), | ||
| + | defaults = { | ||
| + | star : { | ||
| + | color : 'rgba(255, 255, 255, .5)', | ||
| + | width : 1, | ||
| + | randomWidth : true | ||
| + | }, | ||
| + | line : { | ||
| + | color : 'rgba(255, 255, 255, .5)', | ||
| + | width : 0.2 | ||
| + | }, | ||
| + | position : { | ||
| + | x : 0, // This value will be overwritten at startup | ||
| + | y : 0 // This value will be overwritten at startup | ||
| + | }, | ||
| + | width : window.innerWidth, | ||
| + | height : window.innerHeight, | ||
| + | velocity : 0.1, | ||
| + | length : 100, | ||
| + | distance : 120, | ||
| + | radius : 150, | ||
| + | stars : [] | ||
| + | }, | ||
| + | config = $.extend(true, {}, defaults, options); | ||
| − | + | function Star() { | |
| − | + | this.x = Math.random() * canvas.width; | |
| − | + | this.y = Math.random() * canvas.height; | |
| − | + | ||
| − | + | this.vx = (config.velocity - (Math.random() * 0.5)); | |
| + | this.vy = (config.velocity - (Math.random() * 0.5)); | ||
| − | + | this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; | |
| + | } | ||
| − | + | Star.prototype = { | |
| + | create : function() { | ||
| + | context.beginPath(); | ||
| + | context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); | ||
| + | context.fill(); | ||
| + | }, | ||
| − | + | animate : function() { | |
| + | var i; | ||
| + | for (i = 0; i < config.length; i++) { | ||
| − | + | var star = config.stars[i]; | |
| − | + | if (star.y < 0 || star.y > canvas.height) { | |
| + | star.vx = star.vx; | ||
| + | star.vy = -star.vy; | ||
| + | } else if (star.x < 0 || star.x > canvas.width) { | ||
| + | star.vx = -star.vx; | ||
| + | star.vy = star.vy; | ||
| + | } | ||
| − | + | star.x += star.vx; | |
| + | star.y += star.vy; | ||
| + | } | ||
| + | }, | ||
| − | + | line : function() { | |
| + | var length = config.length, | ||
| + | iStar, | ||
| + | jStar, | ||
| + | i, | ||
| + | j; | ||
| − | + | for (i = 0; i < length; i++) { | |
| + | for (j = 0; j < length; j++) { | ||
| + | iStar = config.stars[i]; | ||
| + | jStar = config.stars[j]; | ||
| − | + | if ( | |
| + | (iStar.x - jStar.x) < config.distance && | ||
| + | (iStar.y - jStar.y) < config.distance && | ||
| + | (iStar.x - jStar.x) > -config.distance && | ||
| + | (iStar.y - jStar.y) > -config.distance | ||
| + | ) { | ||
| + | if ( | ||
| + | (iStar.x - config.position.x) < config.radius && | ||
| + | (iStar.y - config.position.y) < config.radius && | ||
| + | (iStar.x - config.position.x) > -config.radius && | ||
| + | (iStar.y - config.position.y) > -config.radius | ||
| + | ) { | ||
| + | context.beginPath(); | ||
| + | context.moveTo(iStar.x, iStar.y); | ||
| + | context.lineTo(jStar.x, jStar.y); | ||
| + | context.stroke(); | ||
| + | context.closePath(); | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | }; | ||
| − | + | this.createStars = function() { | |
| + | var length = config.length, | ||
| + | star, | ||
| + | i; | ||
| − | + | context.clearRect(0, 0, canvas.width, canvas.height); | |
| − | + | for (i = 0; i < length; i++) { | |
| + | config.stars.push(new Star()); | ||
| + | star = config.stars[i]; | ||
| − | + | star.create(); | |
| + | } | ||
| − | + | star.line(); | |
| + | star.animate(); | ||
| + | }; | ||
| − | + | this.setCanvas = function() { | |
| + | canvas.width = config.width; | ||
| + | canvas.height = config.height; | ||
| + | }; | ||
| − | + | this.setContext = function() { | |
| + | context.fillStyle = config.star.color; | ||
| + | context.strokeStyle = config.line.color; | ||
| + | context.lineWidth = config.line.width; | ||
| + | }; | ||
| − | + | this.setInitialPosition = function() { | |
| + | if (!options || !options.hasOwnProperty('position')) { | ||
| + | config.position = { | ||
| + | x : canvas.width * 0.5, | ||
| + | y : canvas.height * 0.5 | ||
| + | }; | ||
| + | } | ||
| + | }; | ||
| − | + | this.loop = function(callback) { | |
| + | callback(); | ||
| − | + | window.requestAnimationFrame(function() { | |
| + | this.loop(callback); | ||
| + | }.bind(this)); | ||
| + | }; | ||
| − | + | this.bind = function() { | |
| + | $canvas.on('mousemove', function(e) { | ||
| + | config.position.x = e.pageX - $canvas.offset().left; | ||
| + | config.position.y = e.pageY - $canvas.offset().top; | ||
| + | }); | ||
| + | }; | ||
| − | + | this.init = function() { | |
| + | this.setCanvas(); | ||
| + | this.setContext(); | ||
| + | this.setInitialPosition(); | ||
| + | this.loop(this.createStars); | ||
| + | this.bind(); | ||
| + | }; | ||
| + | } | ||
| − | + | $.fn.constellation = function(options) { | |
| + | return this.each(function() { | ||
| + | var c = new Constellation(this, options); | ||
| + | c.init(); | ||
| + | }); | ||
| + | }; | ||
| + | })($, window); | ||
| − | + | // Init plugin | |
| − | + | $('canvas').constellation({ | |
| − | + | star : { | |
| − | + | width : 3 | |
| − | + | }, | |
| − | + | line : { | |
| − | + | color : 'rgba(68, 157, 209, .8)' | |
| − | + | }, | |
| − | + | radius : 250 | |
| − | + | }); | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | /* NAVIGATION STYLING */ | |
| − | </ | + | $(document).ready(function() { |
| + | var navbar = $($(".navbar")[0]); | ||
| + | navbar.addClass("transparent"); | ||
| + | $(window).scroll(function() { | ||
| + | var parallax = $($(".parallax")[0]); | ||
| + | var parallaxBottom = parallax.offset().top + parallax.height(); | ||
| + | var navbarBottom = $(window).scrollTop() + navbar.height(); | ||
| + | if (navbarBottom < parallaxBottom) { | ||
| + | navbar.addClass("transparent"); | ||
| + | } else { | ||
| + | navbar.removeClass("transparent"); | ||
| + | } | ||
| + | }) | ||
| + | }) | ||
| + | </script> | ||
| + | {{Erlangen_Nuremberg/Footer}} | ||
Revision as of 08:30, 10 July 2017
<style> .navbar-default, .navbar-brand { transition: all 0.5s; }
nav.navbar.navbar-default.navbar-fixed-top.transparent { background-color: rgba(0, 0, 0, 0); }
.transparent .navbar-brand { background-image: url('../images/T--Erlangen_Nuremberg--Logo_inverted.png') }
@media (max-width: 1024px) { div#navbar { background-color: rgba(255, 255, 255, 0.95); } }
.parallax { height: 90vh; /*background: url("images/T--Erlangen_Nuremberg--DNA_String.png.jpeg") no-repeat fixed center;*/ background-color: #000; background-size: cover; position: relative; margin-top: -100px; }
.parallax-heading { top: 40%; position: absolute; }
.parallax h1 { margin: 0 8.5%; color: white; font-weight: 100 !important; font-size: 2.5em; background: none; padding: 10px;
}
p:first-child { margin: 0; }
/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed */ @media (max-width: 768px) { .parallax { background-attachment: scroll; }
.parallax h1 { font-size: 180%; font-weight: 100; } }
.light{
text-align: center;
}
.light p { margin-left: 20%; margin-right: 20%; color: #333230; letter-spacing: 0.5px; }
.light h2 { font-weight: 100;
letter-spacing: 2px;
}
</style>
<canvas style="width: 100%; height: 100%; z-index: -1;"></canvas>
Development of Novel Biocompatible Tissue for the Application as Artificial
Muscles in
Robotics and
Medicine
Abstract
The development of artificial muscles attracts wide interest for industrial and medical
applications. Regarding manufacturing, robotic devices with synthetic muscles are able to
handle softer materials more precisely. Moreover, artificial musculatures in medical
prostheses can improve the wearing comfort while conveying a rather natural feeling.
Currently, muscle-like contractions can be obtained by capacitor systems or by molecular
machines incorporating tissue. This project aims to replace the common materials in both
branches by biological tissue. While increasing ecological friendliness and the compatibility
with human tissue, those fabricated compositions can compete with human biological
material.
Like a capacitor, the dielectric elastomer actuator (DEA) comprises two lightweight and
flexible electrodes separated by an insulating elastomeric layer. In a first set of experiments,
the elastomer layers in the capacitor-based muscle need to be replaced by appropriate protein
structures. P-Pili with their excellent elastic properties and proteins with high amounts of
helical secondary architecture are to be tested for this approach. In a next step, the currently
used light weighted graphene or carbon nanotube layers need to be replaced by the Pili to
provide conductivity and flexibility comparable to the carbon nanotubes. Both fibril types can
be easily expressed in Geobacter sulflurreducens and Escherichia coli in a large scale, which
makes the overall system extremely feasible since one organism can provide the whole
material.
Another tissue with muscle-like contractions will be fabricated through polymers with
integrated molecular machines. Herein, the latter are based on azo dyes capable of having
their entire network contracted by light irradiation. The biopolymer matrix is fabricated by
Escherichia coli and consists of catcher-tag systems modified with a biotin-accepting anchor.
The molecular machines attach to the biopolymer tissue via biotin and biotin acceptor
interactions. Due to the crosslinking of the single protein strains the stiffness of the resulting
tissue can be adjusted accurately.
In both cases, the achieved tissues are cell-free and can immediately be adapted to the system.
Within the scope of the project, the construction of a DEA-prototype is planned, since the
realization of electrical stimuli is more feasible than through photo-induced signals.
<script> /* CANVAS */ /* * requestAnimationFrame pollyfill */ if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function(callback) { return window.setTimeout(callback, 1000 / 60); }); }
/*! * Mantis.js / jQuery / Zepto.js plugin for Constellation * @version 1.2.2 * @author Acauã Montiel <contato@acauamontiel.com.br> * @license http://acaua.mit-license.org/ */ (function($, window) { /** * Makes a nice constellation on canvas * @constructor Constellation */ function Constellation(canvas, options) { var $canvas = $(canvas), context = canvas.getContext('2d'), defaults = { star : { color : 'rgba(255, 255, 255, .5)', width : 1, randomWidth : true }, line : { color : 'rgba(255, 255, 255, .5)', width : 0.2 }, position : { x : 0, // This value will be overwritten at startup y : 0 // This value will be overwritten at startup }, width : window.innerWidth, height : window.innerHeight, velocity : 0.1, length : 100, distance : 120, radius : 150, stars : [] }, config = $.extend(true, {}, defaults, options);
function Star() { this.x = Math.random() * canvas.width; this.y = Math.random() * canvas.height;
this.vx = (config.velocity - (Math.random() * 0.5)); this.vy = (config.velocity - (Math.random() * 0.5));
this.radius = config.star.randomWidth ? (Math.random() * config.star.width) : config.star.width; }
Star.prototype = { create : function() { context.beginPath(); context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); context.fill(); },
animate : function() { var i; for (i = 0; i < config.length; i++) {
var star = config.stars[i];
if (star.y < 0 || star.y > canvas.height) { star.vx = star.vx; star.vy = -star.vy; } else if (star.x < 0 || star.x > canvas.width) { star.vx = -star.vx; star.vy = star.vy; }
star.x += star.vx; star.y += star.vy; } },
line : function() { var length = config.length, iStar, jStar, i, j;
for (i = 0; i < length; i++) { for (j = 0; j < length; j++) { iStar = config.stars[i]; jStar = config.stars[j];
if ( (iStar.x - jStar.x) < config.distance && (iStar.y - jStar.y) < config.distance && (iStar.x - jStar.x) > -config.distance && (iStar.y - jStar.y) > -config.distance ) { if ( (iStar.x - config.position.x) < config.radius && (iStar.y - config.position.y) < config.radius && (iStar.x - config.position.x) > -config.radius && (iStar.y - config.position.y) > -config.radius ) { context.beginPath(); context.moveTo(iStar.x, iStar.y); context.lineTo(jStar.x, jStar.y); context.stroke(); context.closePath(); } } } } } };
this.createStars = function() { var length = config.length, star, i;
context.clearRect(0, 0, canvas.width, canvas.height);
for (i = 0; i < length; i++) { config.stars.push(new Star()); star = config.stars[i];
star.create(); }
star.line(); star.animate(); };
this.setCanvas = function() { canvas.width = config.width; canvas.height = config.height; };
this.setContext = function() { context.fillStyle = config.star.color; context.strokeStyle = config.line.color; context.lineWidth = config.line.width; };
this.setInitialPosition = function() { if (!options || !options.hasOwnProperty('position')) { config.position = { x : canvas.width * 0.5, y : canvas.height * 0.5 }; } };
this.loop = function(callback) { callback();
window.requestAnimationFrame(function() { this.loop(callback); }.bind(this)); };
this.bind = function() { $canvas.on('mousemove', function(e) { config.position.x = e.pageX - $canvas.offset().left; config.position.y = e.pageY - $canvas.offset().top; }); };
this.init = function() { this.setCanvas(); this.setContext(); this.setInitialPosition(); this.loop(this.createStars); this.bind(); }; }
$.fn.constellation = function(options) { return this.each(function() { var c = new Constellation(this, options); c.init(); }); }; })($, window);
// Init plugin $('canvas').constellation({ star : { width : 3 }, line : { color : 'rgba(68, 157, 209, .8)' }, radius : 250 });
/* NAVIGATION STYLING */ $(document).ready(function() { var navbar = $($(".navbar")[0]); navbar.addClass("transparent"); $(window).scroll(function() { var parallax = $($(".parallax")[0]); var parallaxBottom = parallax.offset().top + parallax.height(); var navbarBottom = $(window).scrollTop() + navbar.height(); if (navbarBottom < parallaxBottom) { navbar.addClass("transparent"); } else { navbar.removeClass("transparent"); } }) }) </script>
