Cybertown Mall Cybertown Revival

Tutorial 5 of 10

CREATING a CANVAS

CREATOR NOTEby Morning.star, published with permission

CREATING A SIMPLE CANVAS & FRAME

The easy way to get your painting on a canvas is to make a simple Box & put your texture file on it. Because the sides of your canvas on a box shape will also be displaying the texture but squeezed into a tiny space, there are some improvements that can be made to take care of this problem.

First, unless you have a good reason for doing so, when you are beginning as a creator use a simple Box rather than an Extrusion or IndexedFaceSet ( IFS ) to mount your paintings & posters. Simple Box coding is ... just that - simple, & reliably renders a texture.

Second, unless you have a good reason for not doing so, it is best for rendering reasons to leave your material coding blank ie do not define any materials for the Box ( like material colors, shininess, etc ). The worst thing for a painting is a canvas which is reflecting too much light from a face-on position & not enough light from a side-viewing position. Likewise for material attributes like specularColor - unless you have a good thematic reason for wanting a varying tinted reflection on your painting, it's best to avoid coding that in. Instead, make sure your texture possesses the quality of light/darkness you want.

Third, make your canvas not too thick & not too thin. I recommend anywhere from 0.01 to 0.1 in thickness - a thinner canvas especially for unframed art ( thinner being better than thicker unless you are backing your canvas with some kind of a solid color piece simulating a mat in which case you need a thicker canvas to avoid having the two planes create 'smashing' effects ). Also, a thinner canvas will not have side edges that are as jarring as a thicker one because a whole instance of a texture also occurs on each side of a Box, albeit seriously squished. That's going to show up a lot more on a thicker canvas.

Fourth, when you are making your texture ( the painting or poster ), try to get its overall size a simple number like 250 x 250 pixels rather than something like 247 x 252 pixels. When making your canvas size, depending on the quality of the graphic, you can make the canvas match the size of the graphic - so for example, our 250 x 250 pixel graphic would go on a 2.5 x 2.5 meter Box for a 1 to 1 fit. You'll have to fool around with this to get the best rendering of your graphic. Try to keep the proportions of your canvas the same as the proportions of your graphic to avoid distorting the graphic. For Mall items, the file size of the graphic cannot exceed 80k although you can achieve stunning results nonetheless using much smaller file sizes. However, if your texturec is looking too pixellated on the canvas try reducing the overall size of the canvas proportionally to the texture.

Fifth, as far as overall size is concerned, bear in mind that few houses or clubs in CT have wall surfaces taller than 5 or 6 meters so plan your canvas size accordingly. Likewise, a canvas that is too small are equally limited in terms of use. You don't want your pic disappearing in a room because the canvas is too small now do you? :) A quick guideline to overall size would be to not have a painting smaller than 1 x 1 meters.

Sixth, remember that your artwork must be signed !

Finally, if you can learn how to do this, framing off your canvas & covering the raw edges will produce an art object that will display more nicely in 3D than if the edges of the painting are left unfinished. Here's where that stuff about calculating where to place multiple pieces starting at the bottom of -1.75 that we reviewed earlier comes in.

  • * * * * * * * * * * * * * * * * * * *

THE FRAME

Although there are fancier ways of making a frame for a canvas, here we will just cover the basic frame using Box pieces & placing them to hide those nasty side edges with the texture squished on them ... SO unsightly :) You'll need 4 pieces altogether - 2 for the sides, 1 for the top & 1 for the bottom.

Since, for this example, we want to make just a finishing frame to hide the edges rather than a frame that imposes itself as a big frame for your pic, we will make the pieces as small as possible without risking having them smash against the painting's Box. Here's a step by step example of how to frame a 2 x 2 meter canvas :

  1. Let's start with the bottom piece. Make a piece as wide as your canvas, just a tiny bit thicker than your canvas, & 0.2 meters high. I am choosing 0.2 for the example to make the calculations simpler. A 0.2 high framing piece on a large canvas is not going to impose too much on the overall piece. If 0.2 is too thick for you use 0.1 instead. Code this piece with your painting's texture as well, scaling the texture in TextureTransform { scale 0.001 0.001 }. This will apply the bottom left pixel of your painting to the frame piece in a solid fashion. If you don't like that pixel of color, try rotating the texture in TextureTransform { rotation -1.57 } ( or 1.57 or 3.14, each of which will grab a different corner pixel of your texture ) & use the same scale. If none of those is satisfactory then you can try using TextureTransform { center X X } coding to grab a pixel of color from a spot inside your graphic. The purpose for using the graphic itself to color the frame is so that the framing piece most closely resembles the color scheme of your graphic or choose a basic black or white. In cases where your graphic has a uniform color around all edges, since you are using a border pixel from your texture, the framing pieces may effectively disappear altogether. If you want a larger more visible plain frame, use the same method of coloration rather than material color to create a matching frame for your painting.
  2. Place the frame's bottom piece in at translation 0 -1.65 0 & raise your canvas off the bottom of -1.75 by 0.2 meters. So if your canvas is 2 meters high & you originally placed it in at -0.75, raise it now to -0.55 ( remember that those negative numbers go in reverse to get higher lol ! ). The top of the canvas will now be at 0.45.
  3. Make a second identical piece to go along the top of your canvas. To calculate its placement do the following: figure out where the top of the canvas is ( -0.55 minus 1 = 0.45 ). Then calculate 1/2 of the height of the framing piece ( 1/2 of 0.2 = 0.1 ). Place your top framing piece in at 0.55.
  4. Now make a piece to frame off the left side of your canvas. Use the same coding for this type of piece - Box - and for the material & texture. For the width of the piece use the 0.2. For the depth of the piece use the same thickness as for the top & bottom pieces - just a bit thicker than the canvas. Why do we make the framing pieces a little thicker than the canvas? Because sometimes VRML doesn't render the joins between adjacent pieces in a water-tight fashion & micro-slivers of light can shoot through. To eliminate or minimize this you can either dig one piece in slightly to the other, or thicken one piece in relation to the other - I'm choosing to thicken here to avoid you having to use mini decimal points in your 1st attempt at handcoding VRML. Ya ya, nice guy lol ! Getting back to our frame piece - for the height of the piece use the height of the canvas 2 meters PLUS 0.4 which is 2x the height of the top & bottom framing pieces ( so those will be covered ). Why make the side pieces the long ones? Just looks better :)
  5. Use the same method - only sideways left from center 0 to calculate the placement of the left side piece. Since fortuitously our canvas is a square 2 x 2 meters, the number comes immediately to hand at -1.1 which is half of the width of the canvas ( 1 ) plus half of the width of the frame piece ( 0.1 ). Center this piece vertically at the same height as the canvas. The translation coding of the left side piece now is : -1.05 -0.55 0
  6. Do the same for the right side piece & its translation will be 1.05 -0.55 0 Voila! the sides of the canvas are no longer visible!
  7. If you want to optimize your coding now you can do so by DEF/USEing each of the pairs of frame pieces. On how to do this, consult the part of the Structures tutorial on DEFing single objects.
  8. Make sure you have your WorldInfo & thumb done & that the details of both match. Check with the Mall if you are doing a Hold item or a Special Event item for the details on what is required in WorldInfo & the 2D pic/thumb. Next, check your wrl file using the Mall Scale & if everything is good to go, gzip your wrl file & upload it!
  • * * * * * * * * * * * * * * * * * * *

MAKING AN EXTRUDED CANVAS

OK, so this is awkward ... AND it's the method I use regularly ... BUT ... it's not for everyone. I include it as a matter of info for those who might be interested in following this incredibly convoluted process of creating a 2 x 2 canvas for an artfwork.

Transform { translation 0 -0.75 0 rotation 1.75 0 0 1.57 children [
Group { children [
Transform { translation 0 0 0 children [
Shape { appearance Appearance { material Material { diffuseColor 0 0 0 }}
geometry Extrusion { beginCap TRUE endCap FALSE solid FALSE
crossSection [ 1 -1, 1 1, -1 1, -1 -1, 1 -1, ]
spine [ 0 -0.02 0, 0 0.02 0, ]
scale [ 1 1, 1 1, ]}}
]}
Transform { translation 0 0 0 children [
Shape { appearance Appearance { material Material { emissiveColor 0.3 0.3 0.3 }
texture ImageTexture { url "yourtexture.jpg" }}
geometry Extrusion { beginCap FALSE endCap TRUE solid FALSE
crossSection [ 1 -1, 1 1, -1 1, -1 -1, 1 -1, ]
spine [ 0 0.02 0, 0 0.02 0, ]
scale [ 1 1, 1 1, ]}}
]}
]}
]}
OK, so that doesn't look too bad, but what's the kicker? The kicker is that the texture I use has to be flipped vertically in a graphics programme so it appears up-side-down in order for the art to appear right-side-up on the canvas. Yep, that's right. Where an art has a white border, I color the first piece in the code with diffuseColor 1 1 1; & with 0 0 0 if it has a black border. Otherwise, I use textureTransform TextureTransform { scale 0.001 0.001 } to lift a complimentary pixel off the texture. 'Pond Flora' is an example of an artwork where I used a pixel from the texture to apply color to the sides of the canvas. You'll find it down there in the club.
  • * * * * * * * * * * * * * * * * * * *

MAKING RUGS & WALL DIVIDERS & OTHER OBJECTS with your ARTWORK

The first thing to remember is that not all artwork has to be dealt with as a painting or poster. Creating a rug or wall divider is a nice way to display your art in a more unusual way.

RUGS are really just paintings made horizontal rather than vertical. Use exactly the same method to create them as you do for a painting with 1 exception - you cannot center your rug vertically at -1.75 - the bottom of it must be at -1.75 Everything else goes above that. Framing off rugs to get rid of the unsightly side edges makes for a well-presented piece of art as well. Depending on what you want to do with a rug ( make a circular rug? ), using Extrusion coding sometimes works better. Making a rug out of a Cylinder is not something that I would advise doing because of the way it distorts texture. And whatever you do, do not make your rug 0.001 thick and place it at -1.74 - it will not display well when dropped into a house because the house floor plane & your rug plane will be too close together. Also, we do not move across wall paintings but we do move across rugs. For this reason, it helps to reduce the detail & slightly soften all textures for any kind of floor coverings. Otherwise, the experience of moving across them can become quite jarring. For an example of an artwork I used on a circular Extrusion have a look at the 'Flower Power Rug'. Using this method sidesteps the problems involved in the way texture displays on a Cylinder.

Aren't WALL DIVIDERS perfect opportunities to display your work? Using your artwork on a wall divider is an opportunity to use some other simple coding you have learned - make pillars for the ends, insert mutiple copies of your art on smaller canavases mounted within a larger wall divider, include plants or candles for a more complex presentation. The 'Tiwanaku Divider' in the club is one such piece.

Don't limit yourself to just rugs & wall dividers when thinking of ways to display your original art. Jewellry boxes, vases, candles, furnishings, even couch cushions - just about anything can be used as a base to present your artwork. In the case of these other kinds of objects, it is not required that your texture be signed.

Back to top

Written by Morning.star, reproduced unedited and published with her permission. Eleven documents. Morning.star has written many more and they will be added over time; this is not the complete set and does not claim to be.