This week, I programmed a scene of moon eclipse based on functions inside objects.
URL: http://sabrinaaa.com/visual_language/moon2/
I created an variable object named “shadow”, and inserted three functions in it:
display: function(){
// Create an ellipse
},
move:function(){
// Let the ellipse move
},
change:function(){
// make the text change by the change of shadow
},
The most difficult part of this project for me is to make the shadow into dark red color, because the creation of this project is like the layers in Adobe photoshop. If I change the color into red, people will see an bigger ellipse passing through the canvas to give the moon a red mask. My goal is to give the move a red shadow, which cannot be seen on other part of canvas. I tried many times to use functions inside the “shadow” to color the moving shadow in red, but I did not find a way to order the layers properly. So I created a very big black circle, with “noFill” but many “strokeWeight”, and two black “rect” to cover the trace of the red shadow ellipse. The order of layers from back to front is: background, moon.png, red shadow ellipse, mask(rect and big black noFill circle), text”MO_N”(actually a typo png made in AI), mask to change “MO_N”.
Below is some screenshots of my project “Moon”, and URL of the project is on the top of this blog.
