Monday, March 23, 2015

HW06 Class and Object in Processing

1. Trace the code of HW06_pRing to learn class and object in Processing. You can download HW06 in the FB.

2. Modify the code to let each ring have its own color.


3. Extend the code of HW06 to have the following effect. The circle is replaced by the English alphabet.


Tuesday, October 13, 2009

Homework 5: Image Animating Application with Keyboard

HW05-1:
Write a simple image animating system with at least six effects such as horizontal movement, vertical movement, zoom in, zoom out, fade in, and fadeout.

The effects of zoom in and zoom out can be controlled by key "B" and key "S" respectively.
Go to Page 225 to Page 227 to learn methods to interact with the keyboard.

HW05-2: Cat and Mouse Game.




Sunday, October 11, 2009

Homework 4: Image Browsing Application

HW04-1: Storing mouse data in Arrays
Trace the code 33-15 located at Page 307 and Page 308. Extend the code such that the all circles with different colors.



HW04-2: Write a simple image browsing system. Any front image can be concatenated with any back image to produce unexpected results.
A demonstrative example is shown in Page 198 in the PDF file.



Sunday, September 27, 2009

Homework 3: Interaction with mouse

HW03-1: Drawing Board
Write a simple electronic drawing board with size of 500*400. You can draw lines by using your mouse with different five colors and three different stroke size.
The goal of this homework is to learn pmouseX, pmouseY , buttons, and save images in Processing.
*Go to Page 208 in the PDF file and learn the elementary functions of mouse in Processing.



HW03-2: Twelve Eyes
Extend the result of HW02-3. Each cell in the above picture can be considered as an eye. Write a processing program to let these eyes can trace the mouse of your computer, i.e., the locations of ellipse are determined by mouseX, and mouseY which are two keywords of Processing recording the X-coordinate and Y-coordinate of your mouse.
The goal of this homework is to develop a processing program which can interact with your mouse.
*Go to Page 206 in the PDF file and learn the elementary functions of mouse in Processing.


Sunday, September 20, 2009

Homework 2: Repetition

HW02-1:

(a) Write a processing program to create a picture with 100 rectangles whose sizes, colors, and locations are randomly generated by your program.





(b) Write a program to generate the above picture every second.
* Go to Page 176 of the PDF file to learn the continuous structure of Processing.



The goal of HW02-1 is to learn functions of setup(), draw(), loop() and random().


HW02-2:

Run the codes in pages 65-67 and modify them to create your own picture.


The goal of HW02-2 is to learn nested for loops.


HW02-3:



Write a processing program to simulate the following picture. The size of the picture is 800x600 and it can be divided into 12(=4x3) cells with size of 200x200. Each cell includes 3 ellipses with different colors and size.


Monday, August 17, 2009

HW1: Geometric Painting with Processing

1. Draw a picture by using lines, rectangles, circles, or ellipses in the painting tool of Windows.

If you have no idea what to draw, you can search pictures in the Internet by using keyword of geometric paintingSelect a favorite one from the above results. You can simplify the selected picture if it is too complicated to simulate. 



"Spots #2" (24x36) by renowned American artist and sculptor Bruce Gray is done with acrylics on canvas. This bold and impressive colorful abstract modern geometric contemporary painting is currently available at $2400. One of the interesting things about this painting is that various darker colored circles disappear into the black background after you step back 5 feet or so. This effect increases to encompass some lighter tone colors with any additional increased viewing distance. This painting was rented for an episode of the hit series "Six Feet Under" on HBO. (SOLD.)  Referenced from http://www.brucegray.com/htmlfolder/html_subpages/spots2.html.

2. Trace the following processing program.
---------------------------
The referenced files, processing hand book, are located at moodle.

*Go to Page 55 in the PDF file and learn the elementary functions of Processing.
*Search the file with the keyword 'color' and find the way of coloring in Processing.

---------------------------
size(800, 600);
background(255, 255, 255);
noStroke();
fill(255, 255, 0);
ellipse(400, 200, 350, 300);
ellipse(400, 400, 600, 300);
fill(0, 0, 0);
ellipse(300, 180, 50, 100);
ellipse(500, 180, 50, 100);
fill(255, 255, 255);
ellipse(300, 180, 20, 20);
ellipse(500, 180, 20, 20);
fill(255, 0, 0);
ellipse(400, 250, 150, 50);

3. Write a program to depict the following picture



Friday, June 26, 2009

The course of Interactive Media


Processing is a programming language developed for interactive technologies including vector/raster drawing, image processing, color models, mouse and keyboard events, and network communication. Libraries easily extends Processing’s ability to generate sound, 2D or 3D objects.

Arduino is a platform including a hardware and a software. The hardware is a simple input/output board and the software a development environment implemented by Processing. Arduino can be used to develop a standalone interactive objective or can be connected to software on your computer such as Processing, or Flash.


A demonstrative example of Processing and Arduino:
http://hwshow-30.blogspot.tw/2012/05/final-project-anton-carlson-anthony-lee.html
http://hwshow-30.blogspot.tw/2012/05/fishing-game-final-project.html


Referenced Links:
1. http://www.processing.org/
2. arduino.cc

The evaluation of the score:
1. Homework (10%) and participation( 課堂加分) 30%
2. A  test for Processing - 20%
3. A project for  Processing  - 20%
4. A project for Arduino - 20% 
- Team work is encouraged in this course and
two students are allowed in each team.

Please find your partner right now and have a seat with your partner in this semester.

Rules of the course of Interactive Media
1. ‘Learning by coding’ is the distinguishing feature of the course.
- Each class is divided into two sections: Instruction and experiment.

2. Discussions are very much encouraged but ONLY during the section of experiment.

3. No discussion is allowed while broadcasting demonstrations and instructions. For any violation, 10 points will be deducted from your final score each time.

4. Students are asked to be on time in the class. For any violation, 5 points will be deducted from your final score each time.