Processing_가을(벼는 익을수록 고개를 숙인다.)

그림 위에서 마우스를 움직여보면 벼가 자라 익어가는 모습을 표현하였다.



















소스코드
<head> 
<script src="//cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.js">
</script>
</head>
<body>
<script data-processing-target="mycanvas" type="text/processing">

float x, y;
float angle1 = 0.0;
float angle2 = 0.0;
float segLength = 80;
void setup() {
  size(300, 300);
  strokeWeight(10);
  stroke(181, 160, 45);
  x = width * 0.5;
  y = height * 0.5;
}
void draw() {
  background(165, 246, 255);
 
  angle1 = (mouseX/float(height) - 0.5) * -PI ;
  angle2 = (mouseY/float(height)- 0.5) * PI/2 ;
  pushMatrix();
  segment(x, y+200, angle1);
  segment(segLength, 0, angle2);
  popMatrix();
  pushMatrix();
  segment(x+20, y+200, angle1);
  segment(segLength, 0, angle2);
  popMatrix();
    pushMatrix();
  segment(x+40, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
      pushMatrix();
  segment(x+60, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
  pushMatrix();
  segment(x+80, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
  pushMatrix();
  segment(x+100, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x+120, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x+-140, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x-120, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x-100, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x-80, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
     pushMatrix();
  segment(x-60, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x-40, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
   pushMatrix();
  segment(x-20, y+200, angle1);
  segment(segLength, 0, angle2);
   popMatrix();
 
}
void segment(float x, float y, float a) {
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
}
void keyPressed(){
if (key=='a') saveFrame("line-######.png");
}

</script><canvas id="mycanvas"></canvas></body>

댓글

  1. 컴퓨테이셔널디자인2017년 10월 22일 AM 5:55

    프로그램이 겹쳐서 보이는 현상은 html 문서에서 mycanvas를 mycanvas1으로 바꿔보도록 합시다. 그럼 겹쳐서 보이는 현상이 많이 없어집니다.

    답글삭제

댓글 쓰기

이 블로그의 인기 게시물

움직이는 장난감 스케치

이미지
1. 선풍기를 이용한 비눗방울 생성 장난감 .      # 선풍기 구조 # 스위치 2. 다가가면 열리는 쓰레기통 로봇 #적외선 센서 #캠 구조 3. 핀볼 장난감.       #서브모터 #공을 넣으면 전원(스위치)     4. 두더지 장난감 #캠 구조 #스위치 or 터치 센서 5. 아기가 울면 작동되는 모빌 #회전 #소리센서
자세한 내용 보기

Product Interaction_Trash can light

이미지
(1) 컨셉 설명 판넬 (2) 동영상  쓰레기통을 메타포로한 인터렉션 조명입니다.  틸트센서를 이용하여 뚜껑의 열리면 조명의 색이 파란색에서 초록색으로 변하고  쓰레기통에 물건을 넣으면 보라색 조명으로 바뀝니다.  (3) 코딩 및 설명   int tilt = 3; void setup() {  pinMode(A0, INPUT);  pinMode(A2, INPUT);  Serial.begin(9600);  pinMode(9,OUTPUT);  pinMode(10,OUTPUT);  pinMode(11,OUTPUT);  pinMode(tilt, INPUT); } int j =0; int a = 0; int b = 0; void loop() {    a = analogRead(A0)/4; // 슬라이드 센서(a0)로 밝기를  0~255로 조절하기 위해서는 4로 나누어 줌    Serial.println(a);    analogWrite(9, a);    delay(10);    b=analogRead(A2)/4;       if(analogRead(b)>0) // 만약 내부의 슬라이드 센서의 값이 0이상이면 r(9)g(10)b(11)이 센서의 숫자값을 가짐.  { analogWrite(9, b);    analogWrite(10, b);    analogWrite(11, b);  if(digitalRead(3) == HIGH) // 만약 기울기 센서에 1값이 들어오면  {   digitalWrite(9,LOW); // 빨강 off   digitalWrite(...
자세한 내용 보기