Difference between revisions of "Team:Lanzhou"

Line 3: Line 3:
 
<script>
 
<script>
 
$('.page__header').remove();
 
$('.page__header').remove();
−
let index = [0, 2];
+
let index = [0, 0];
 
let nav_list_item = $('.mdc-temporary-drawer__content:not(".sub-nav")').children('.mdc-list-item');
 
let nav_list_item = $('.mdc-temporary-drawer__content:not(".sub-nav")').children('.mdc-list-item');
 
$(nav_list_item[index[0]]).children('.material-icons').eq(0).addClass('mdc-list-item__start-detail-color');
 
$(nav_list_item[index[0]]).children('.material-icons').eq(0).addClass('mdc-list-item__start-detail-color');
−
// $(nav_list_item[index[0]]).next().find('.mdc-list-item').eq(index[1]).css('color', '#ff4081');
+
$(nav_list_item[index[0]]).next().find('.mdc-list-item').eq(index[1]).css('color', '#ff4081');
 
</script>
 
</script>
−
<main class="page__content">
+
 
−
<nav class="page__drawer mdc-persistent-drawer">
+
<main class="page__content home">
−
<ul class="page__drawer-list">
+
−
<template id="temp-page-list">
+
<div class="home__item">
−
<li class="page__drawer-list__item">
+
<canvas id="canvas-1"></canvas>
−
<a href="" class="page__drawer-list__link"></a>
+
<div class="home_text"></div>
−
</li>
+
<script>
−
</template>
+
$(function(){
−
<!-- Use template tag to generate these link -->
+
let c1_WIDTH = $('#canvas-1').width()
−
<li class="page__drawer-list__item">
+
c1_HEIGHT = $('#canvas-1').height()
−
</li>
+
let saw = new Image();
−
</ul>
+
grass = new Image();
−
</nav>
+
function init() {
−
<article class="page__article">
+
saw.src = 'image/home/saw.png';
−
<h1 class="mdc-typography--headline">Project Description</h1>
+
grass.src = 'image/home/grass.png';
−
<p>
+
−
Weeds and pests are most important damages to the crop yield in the world. Traditional ways like using chemical herbicides and pesticides will easily cause resistance and pollution problems. In addressing this challenge we focus on RNA interference (RNAi), a novel molecular technology that used for gene knockdown, which has been showing great potential in agriculture field especially for insects control, Meanwhile we notice that many weeds are the hosts or intermediate hosts of pests. Based on these two observations, we are aimed at using synthetic biology to control weeds and pests at the same time. We selected model organism Arabidopsis as basic plant verification system which has clear genetic background and short growing cycle. Field pests Aphidoidea are chosen to be discussed as well in our experiment.
+
window.requestAnimationFrame(draw);
−
</p>
+
}
−
</article>
+
 +
let is_saw_right = true;
 +
let saw_move = 0;
 +
 +
function draw() {
 +
let ctx1 = document.getElementById('canvas-1').getContext('2d');
 +
ctx1.globalCompositeOperation = 'destination-over';
 +
ctx1.clearRect(0,0,c1_WIDTH,c1_HEIGHT);
 +
 +
ctx1.save();
 +
 +
let time = new Date();
 +
 +
if (saw_move >= 50) {is_saw_right = false}
 +
if (saw_move <= 0)  { is_saw_right = true }
 +
if (is_saw_right) {
 +
saw_move++;
 +
} else {
 +
saw_move--;
 +
}
 +
ctx1.drawImage(saw, saw_move+10, 90-saw_move, 100, 100)
 +
ctx1.save();
 +
 +
ctx1.drawImage(grass, 50, 50, 100, 100);
 +
ctx1.save();
 +
 +
window.requestAnimationFrame(draw);
 +
}
 +
init();
 +
})
 +
</script>
 +
</div>
 +
<div class="home__item">
 +
<div class="home_text"></div>
 +
<canvas id="canvas-2"></canvas>
 +
<script>
 +
$(function(){
 +
let c2_WIDTH = $('#canvas-2').width()
 +
c2_HEIGHT = $('#canvas-2').height()
 +
let saw = new Image(),
 +
hammer = new Image(),
 +
light = new Image();
 +
function init() {
 +
saw.src = 'image/home/saw.png';
 +
hammer.src = 'image/home/hammer.png';
 +
light.src = 'image/home/light.png';
 +
 +
window.requestAnimationFrame(draw);
 +
}
 +
 +
let is_hammer_rotate = true;
 +
let hammer_degree = 10;
 +
let i = 0;
 +
 
 +
function draw() {
 +
let c2 = document.getElementById('canvas-2');
 +
let ctx2 = c2.getContext('2d');
 +
ctx2.globalCompositeOperation = 'destination-over';
 +
ctx2.clearRect(0,0,c2_WIDTH,c2_HEIGHT);
 +
 
 +
if (is_hammer_rotate) {
 +
hammer_degree = hammer_degree + 5;
 +
} else {
 +
hammer_degree = hammer_degree - 5;
 +
}
 +
if (hammer_degree >= 50) {
 +
is_hammer_rotate = false;
 +
}
 +
if (hammer_degree <=0 ) {
 +
is_hammer_rotate = true
 +
}
 +
 
 +
i++;
 +
if (i >= 100) {
 +
ctx2.drawImage(saw, 50, 30, 100, 100);
 +
 
 +
ctx2.save();
 +
 +
if (i%21 != 2 && i%21 != 5) {
 +
ctx2.drawImage(light, 100, 30, 10, 10);
 +
ctx2.drawImage(light, 70, 50, 10, 10);
 +
}
 +
if (i%21 != 5 && i%21 != 3){
 +
ctx2.drawImage(light, 100, 30, 10, 10);
 +
ctx2.drawImage(light, 70, 50, 10, 10);
 +
ctx2.drawImage(light, 150, 50, 10, 10);
 +
}
 +
if(i%21 != 4 && i%21 != 3){
 +
ctx2.drawImage(light, 120, 90, 10, 10);
 +
ctx2.drawImage(light, 150, 50, 10, 10);
 +
}
 +
 +
 +
 
 +
if (i > 400) {
 +
i = 0;
 +
}
 +
} else {
 +
ctx2.save();
 +
ctx2.translate(150, 130)
 +
ctx2.rotate(Math.PI/360*hammer_degree);
 +
ctx2.translate(-150, -130)
 +
ctx2.drawImage(hammer, 90, 50, 70, 70);
 +
ctx2.restore();
 +
ctx2.drawImage(saw, 50, 30, 100, 100)
 +
}
 +
window.requestAnimationFrame(draw);
 +
}
 +
init();
 +
})
 +
</script>
 +
</div>
 +
 
 +
<div class="home__item">
 +
<canvas id="canvas-3"></canvas>
 +
<div class="home_text"></div>
 +
<script>
 +
$(function(){
 +
let c3_WIDTH = $('#canvas-3').width(),
 +
c3_HEIGHT = $('#canvas-3').height();
 +
let saw = new Image(),
 +
grass = new Image(),
 +
light = new Image();
 +
function init() {
 +
saw.src = 'image/home/saw.png';
 +
grass.src = 'image/home/grass.png';
 +
light.src = 'image/home/light.png';
 +
 +
window.requestAnimationFrame(draw);
 +
}
 +
 +
let is_saw_right = true;
 +
let saw_move = 0;
 +
let i = 0;
 +
function draw() {
 +
let ctx3 = document.getElementById('canvas-3').getContext('2d');
 +
ctx3.globalCompositeOperation = 'destination-over';
 +
ctx3.clearRect(0,0,c3_WIDTH,c3_HEIGHT);
 +
ctx3.save();
 +
 +
i++;
 +
let time = new Date();
 +
if (i > 200) {
 +
ctx3.translate(-20, 30);
 +
ctx3.drawImage(saw, 50, 30, 100, 100);
 +
ctx3.drawImage(light, 100, 30, 10, 10);
 +
ctx3.drawImage(light, 70, 50, 10, 10);
 +
ctx3.drawImage(light, 150, 50, 10, 10);
 +
ctx3.drawImage(light, 120, 90, 10, 10);
 +
ctx3.translate(20, -30);
 +
 
 +
ctx3.save();
 +
ctx3.translate(c3_WIDTH, c3_HEIGHT);
 +
ctx3.rotate((i-200)*0.4*Math.PI/360);
 +
ctx3.translate(-c3_WIDTH + (i-200), -c3_HEIGHT);
 +
ctx3.drawImage(grass, 50, 50, 100, 100);
 +
ctx3.translate(-c3_WIDTH - (i-200), -c3_HEIGHT);
 +
ctx3.restore();
 +
 +
 
 +
if (i >= 300) {
 +
i = 0;
 +
}
 +
 
 +
} else {
 +
if (saw_move >= 20) {is_saw_right = false}
 +
if (saw_move <= -40)  { is_saw_right = true }
 +
if (is_saw_right) {
 +
saw_move = saw_move + 3;
 +
} else {
 +
saw_move = saw_move - 3;
 +
}
 +
 
 +
ctx3.save();
 +
ctx3.translate(saw_move, -saw_move+20);
 +
ctx3.drawImage(saw, 50, 30, 100, 100);
 +
ctx3.drawImage(light, 100, 30, 10, 10);
 +
ctx3.drawImage(light, 70, 50, 10, 10);
 +
ctx3.drawImage(light, 150, 50, 10, 10);
 +
ctx3.drawImage(light, 120, 90, 10, 10);
 +
ctx3.restore();
 +
 +
ctx3.drawImage(grass, 50, 50, 100, 100);
 +
}
 +
 
 +
 +
window.requestAnimationFrame(draw);
 +
}
 +
init();
 +
})
 +
</script>
 +
</div>
 +
 
 
</main>
 
</main>
 
</html>
 
</html>
 
{{Lanzhou/Footer}}
 
{{Lanzhou/Footer}}

Revision as of 02:05, 2 November 2017

Lanzhou

Lanzhou2017