Pavel+Samsonov+Project+3

Final link: [|link]. Best viewed in Firefox.

Mood board for Project 3. Connotative word: solemn

Solemn means both unassuming and awe-inspiring, impressive and restrained. There is also the connotation of age and weathering (cathedrals are solemn, your iPhone is not). Colours are not the way to go, and neither is texture - size and weight are the main techniques that would have to be employed. Something solemn does not rush, it is methodical and slow, so navigation would have to be something besides quick links on a sidebar. Movement is also not welcome here - even adding elements that weren't there before is iffy. And yet it's not quite serene - there is no connotation of ease.

" From the heights of these pyramids, forty centuries look down on us. " Napoleon Bonaparte

=Visual Explorations=

Setting Canvas objects to different sizes from what was coded messes with the refreshing, apparently. This probably won't be useful, but it looks trippy.

Full screening with CSS makes it blurry. Why? Must be because it scales the thing after it's rendered. Not good.

Whoa, you can right-click, View Image and then the canvas element is saved as a png. Totally awesome. Now if only there was an easy way of getting them into this. http://digital-locker.design.yorku.ca/2005Mw11/Lab1/pavelsamsonov/project%203/html5%20test/index.html [|1] [|2 (links)] [|3 (layout)] [|Load method] [|Penultimate update] [|Final]

Update (April 6th) Implemented backgrounds and footer elements for the different pages, with the menu being worked into the layout in various ways (mostly as a sun, but once as a candle-glow). Each page also has an embedded header font that identifies it while selecting. Processing app has been changed so that it is easier to see what is happening; it is linked [|here]. Pop-up links have been removed.

=What I Did= The menu and four pages are intended to capture different situations that could be considered "solemn". I attempted to follow the circle motif for all of them.

"Eclipse"
The eclipse is based on the code by [|Mr. Doob] and [|Seb Lee-Delisle]. Everything beyond those two elements is my own code. Neither of the source files was commented (or had a tutorial for it) so puzzling out what was what consumed a bit of time. All the comments in the HTML file are me trying to figure out what does what. The initPoints method creates the four circles that will act as links, with each element an array containing X, Y and Z coordinates limited to a 512*512 spread, and three colour values (this was never implemented, even though documentation says that concatenating values like that should work). These points are themselves formed into an array. init creates the actual canvas, then the canvas of the sun, which it places inside the main canvas. Then the loop runs at 30 frames per second. In the loop, first the actual sun is drawn, then the smaller circles are knocked out of it. If the script detects that one circle is in place, through a series of nested ifs, it will change the blend mode from subtraction to addition, drawing instead of erasing the circle (now in a colour). Then this whole thing is duplicated, faded and output on the final canvas, repeating in order to create the gradient effect. The CSS of the header will also change through javascript - the font changes to one I found appropriate for the page, and the colour brightens. When a click is registered, a jquery method loads the element selected, the background and the footer element. This page is largely like I wanted it to be, barring some layout issues due to the fact that the canvas is initialized by Javascript and not in the regular HTML.

"Rain"
On this page, the eclipse is intended to be the sun shining from behind heavy clouds as rain pours in the Flash animation. The code for the rotation is from [|here] but the code is for Flash 5, and took some finagling to get working in CS4. I was considering recycling the code from Project 2 here, as the droplets would have worked nicely as rain, but doubted that the presentation computer would get close to handling the intensive application. This one was the one for which I was most tempted to put sound, but decided against it - I very rarely surf the web with speakers or headphones on, and can't expect everyone to do that either. The layout of the page itself is also aimed at smaller monitors, which is why it fit on the presentation computer's to begin with. I was intending to avoid interactivity and focus on generating visuals, since my menu is constantly part of the layout and commands the user's input, but eventually I decided to think of something the user could interact with on a very simple level nevertheless.

"Church"
This one was done exclusively with live text. The candle flames dance quicker when the mouse is moved, and only do so in Firefox anyway. The rotation code used here also won't work for IE, and the glow effect (a shadow with 0 displacement on the x and y axes) is likewise anybody's guess. It being the only HTML element, layering stuff over it worked properly, allowing me to place it between the background and footer like everything else was supposed to be. All the text in here has embedded fonts, so that it will look the same for everyone viewing it.

"Planets"
Also Flash, this time with images (not just textures). Nested planet movies spin at different speeds around a star or one another. I had tried to get the same effect in Processing, using a procedurally generated "solar system", but I found it difficult to get planets to orbit around the other moving planets properly. One of my attempts to fix this problem crashed Processing, at which point I remembered I hadn't saved. No ActionScript here.

"Tree"
I had to change this sketch drastically to slow it down enough that it was possible to see what was happening, since the entire thing was made of for loops, and there's no way to refresh the screen in Processing other than running an iteration of draw. So now, instead of efficient for loops there's clunky if statements everywhere. Comparison (left: the original, right: various stages of generation in the new one) Still, it works, and how it works is like this: first, it generates ten random branches (a variable controls how many, for easy changing on my side). Each branch consists of around 200 iterations, deciding at random where it will grow. Colours brighten with each new branch to create the illusion of depth. An array keeps track of where the branches end, and after they're done it creates translucent circles originating from them. Colourful smaller circles representing leaves are peppered on at random and then particle code (recycled from the droplets app from Project 2 - looks like particle code has many applications) creates more "leaves" that drift downwards.