Course Review

This course is one of the best and inspiring courses I have had in my college life. It includes both design and implementation (program coding); the contents of this course are lively which made me active to learn more through out the whole semester.

The things I learned in this course include:
1. Understanding processing and the similarities with the programming languages I have already learned before such as C++ and Java.
2. Exploring the idea of drawing objects and graphics in an easy way.
3. Understanding the circuits and electronic boards by using Arduino.
4. Understanding the connectivity between Processing and Arduino which can be used to make interesting real-world applications.

I have enjoyed most of the class works and assignments of both Processing and Arduino. My favorite homework is the painting board which we made using Processing, I was very amazed how Processing can manipulate the reaction of the mouse movements, controlling the colors and provide the developer with the ability to make a painting board similar to the one which most of Windows-based PCs have (Microsoft Paint).

My comment to this course is that I wish this course can be more consistent in the process. The beginning of the course was faster compare to the end. We learned more about processing than Arduino. We didn’t have enough chance to learn about the connectivity between the both.
Overall, this course is worth taking and I highly recommend it to all my juniors and I will try to learn more about Processing in the future.

HW07

In this homework, I learned how to translate the coordinates and use some mathematics skills in processing to draw some shapes, and then by using our previous knowledge in animation, we could make it move just like a fan.

a sample can be found in the URL below:

http://ss24.mcu.edu.tw/~s5132120/HW07/

The Pi estimation was a bit challenging to me and also the translate() function confused me in the beginning by putting it in the void setup() instead of void draw() so it can translate the coordinates every time the draw function is called.

HW06

In this assignment I use a picture as a sample then provide 5 effects to be applied on the picture simultaneously, the first two effects are related to moving (one horizontally and the other vertically), other two are for fading out and fading in the picture and the last one is increasing the size of the picture.

the link below shows a sample:

http://icac.no-ip.org/dawan/processing/hw06/

I challenged with the size settings, the movement area of the picture and also the fading coloring.

HW5

http://icac.no-ip.org/dawan/processing/HW5_1/

because of the server unavailability, I will be uploading this HW to another server soon.

HW4

We started modifying and adding some cool features into our small electronic board. As you can see the picture below shows that there are more colors now available with texts on the board

in the upper right part, users can also clean the screen to draw a new image or use eraser to correct their mistakes and after all saving their work when it's done.

I learned how to use x and y coordinates in a very tricky way and I found out that mousex and mousey functions are just amazing to work with.

The challenge I faced during this assignment was the clean screen and erasing functions, but in the end I was so amazed how easy to implement they really are!

HW3

The first part of the Homework is an extended version of the last homework's output, but in a very fabulous way : wherever the user moves the mouse on the screen the inner circles follow the movement of the mouse. This example shows the power of processing in mouse interactions. the link below will lead you to my output:

http://icac.no-ip.org/dawan/processing/HW3/


The second part is also related to mouse interaction in processing, the output is very similar with the famous MS paint program which almost every computer user has been using it. It's a very cool idea if we can create our own "paint". It seems like Processing gives us this opportunity, I could add the rectangles to represent the different colors and stroke weights.

a screen shot of the output is as below:

Dawan HW02

This Homework was simply divided to 4 parts and the main focus on creating each assignment was "repetition" in processing language.

First of all, we started with drawing random rectangles in different shape, color and size.

1A) random rectangles

The 2nd part is closely related with the 1st one except we want processing to generate the image very one second. I had some difficulties in the beginning since the output was too fast, but after we were told by the instructor about frameRate() then I could easily control the speed of the output image.

1B) generating every second

we have heard of nested for loops before and we used it in our C and JAVA programming classes, but this time with processing, the syntax is same and the idea of nesting is also similar.

2) nested For loop

The last but not least is to draw 12 ellipses divided to 3 rows in which a row contains 4 ellipses.

3) (4X3) ellipses

I used random colors for the ellipses, this is also done by Nested foor loops, that's why we started with an easy example (3rd) then we made some really cool stuff with it later on.

Homework 1 - Dawan 95132120

The below is the first homework for Interactive Media Techniques class for Applied Computing Junior and Senior students in IC/MCU.

First of all, we are asked to choose a geometric painting image. I chose the following image:






The Original Geometric Painting













it didn't take me long to simulate the above image using Microsoft Paint tool:





Simulating using MS Paint










Here's the main work started, I read the Processing PDF tutorial file and used line() function to draw every single line of the image. However, after I found triangle() function in the tutorial file, I regret using line() all over. I could simply use triangle() several times to simulate the whole image.

I faced some challenges during coloring because I used the fill() function after triangle() which I supposed to put it before.

Below is the output image of the processing code:






Simulating using Processing

Hopefully I will be able to create better images using processing programming language in the future classes.