Cool illustration. (with those semitransparent surfaces and outlines) How did you make it - is it drawn or really 3D? ...Or a combination of those two?
- Thank you! It was "drawn" in Notepad++ by manually entering the Scalable Vector Graphics code below. The 3D effect is similar to the dimetric projection used in older video games. cmɢʟee☺τaʟκ 18:45, 16 June 2011 (UTC)
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-180 -166 256 384">
<title>Comparison of parallax-barrier and lenticular autostereoscopic displays</title>
<desc>Comparison of two autostereoscopic displays: Parallax barrier and Lenticular, by CMG Lee.</desc>
<defs>
<radialGradient id="grad_eye" cx="50%" cy="50%" r="50%" fx="25%" fy="25%">
<stop offset="25%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#cccccc"/>
</radialGradient>
<linearGradient id="grad_lens" x1="100%" y1="0%" x2="0%" y2="0%">
<stop offset="0%" stop-color="#0099ff" stop-opacity="0.5"/>
<stop offset="100%" stop-color="#ffffff" stop-opacity="0.5"/>
</linearGradient>
<path id="bar" d="M -7 -3 l 14 7 v 40 l -14 -7 Z" fill="#333333"/>
<g id="barrier">
<use transform="translate(-84,-22)" xlink:href="#bar"/>
<use transform="translate(-52,-6)" xlink:href="#bar"/>
<use transform="translate(-20,10)" xlink:href="#bar"/>
<use transform="translate(12,26)" xlink:href="#bar"/>
<use transform="translate(44,42)" xlink:href="#bar"/>
<line x1="-90" y1="-15" x2="-110" y2="-25" stroke-width="0.5"/>
<text x="-110" y="-25" text-anchor="end" stroke="none">
<tspan>Parallax</tspan><tspan x="-115" dy="1em">barrier</tspan>
</text>
</g>
<path id="lens" d="M -16 -8 q 0 16 32 16 v 40 q -32 0 -32 -16 Z" fill="url(#grad_lens)"/>
<g id="lenses">
<path d="M -64 -32 v 40 l 128 64" fill="none"/>
<path d="M -64 8 l -20 10 v -40 l 20 -10 l 128 64 v 40 l -20 10 v -20" fill="url(#grad_lens)"/>
<path d="M 64 32 l -20 10"/>
<use transform="translate(-68,-14)" xlink:href="#lens"/>
<use transform="translate(-36,2)" xlink:href="#lens"/>
<use transform="translate(-4,18)" xlink:href="#lens"/>
<use transform="translate(28,34)" xlink:href="#lens"/>
<line x1="-84" y1="-22" x2="-100" y2="-30" stroke-width="0.5"/>
<text x="-100" y="-25" text-anchor="end" stroke="none">
<tspan>Lenticular</tspan><tspan x="-120" dy="1em">lens</tspan>
</text>
</g>
<g id="col">
<path d="M -10 -5 l 10 -5 l 20 10 v 40 l -10 5 l -20 -10 Z"/>
<path d="M 10 5 l 10 -5 v 40 l -10 5 Z" fill="#000000" fill-opacity="0.6"/>
<path d="M 10 5 l -20 -10 v 40 l 20 10 Z" fill="#000000" fill-opacity="0.5"/>
</g>
<g id="col_r">
<use xlink:href="#col" fill="#ff9999"/>
<text x="10" y="-5" text-anchor="start" stroke="none">R</text>
</g>
<g id="col_l">
<use xlink:href="#col" fill="#99cc66"/>
<text x="10" y="-5" text-anchor="start" stroke="none">L</text>
</g>
<g id="screen">
<use transform="translate(-50,-25)" xlink:href="#col_l"/>
<use transform="translate(-30,-15)" xlink:href="#col_r"/>
<use transform="translate(-10,-5)" xlink:href="#col_l"/>
<use transform="translate(10,5)" xlink:href="#col_r"/>
<use transform="translate(30,15)" xlink:href="#col_l"/>
<use transform="translate(50,25)" xlink:href="#col_r"/>
<line x1="-50" y1="-30" x2="-90" y2="-50" stroke-width="0.5"/>
<text x="-90" y="-50" text-anchor="end" stroke="none">Screen</text>
</g>
<g id="parallax_1" stroke="#669900" fill="#99cc66" fill-opacity="0.75">
<path d="M -60 -30 l -80 60 l 100 -50"/>
<path d="M -20 -10 l -120 40 l 140 -30"/>
<path d="M 20 10 l -160 20 l 180 -10"/>
</g>
<g id="parallax_2" stroke="#cc6666" fill="#ff9999" fill-opacity="0.5">
<path d="M -40 -20 l -20 90 l 40 -80"/>
<path d="M 0 0 l -60 70 l 80 -60"/>
<path d="M 40 20 l -100 50 l 120 -40"/>
</g>
<g id="lenticular_1" stroke="#669900" fill="#99cc66" fill-opacity="0.75">
<path d="M -60 -30 L -84 -20 L -140 30 L -56 -6 L -40 -20"/>
<path d="M -20 -10 L -52 -4 L -140 30 L -24 10 L 0 0"/>
<path d="M 20 10 L -20 12 L -140 30 L 6 26 L 40 20"/>
</g>
<g id="lenticular_2" stroke="#cc6666" fill="#ff9999" fill-opacity="0.5">
<path d="M -40 -20 L -52 -4 L -60 70 L -24 10 L -20 -10"/>
<path d="M 0 0 L -20 12 L -60 70 L 6 26 L 20 10"/>
<path d="M 40 20 L 10 28 L -60 70 L 38 42 L 60 30"/>
</g>
<g id="eye_1" transform="translate(-140,30)">
<ellipse cx="0" cy="0" rx="20" ry="20" fill="url(#grad_eye)"/>
<ellipse transform="translate(14,-5) rotate(-20)" cx="0" cy="0" rx="5" ry="10" fill="#663300"/>
<ellipse transform="translate(16,-6) rotate(-20)" cx="0" cy="0" rx="2" ry="6" fill="#000000"/>
<ellipse cx="15" cy="-9" rx="1" ry="2" stroke="none" fill="#cccccc"/>
<text x="0" y="40" text-anchor="middle" stroke="none">Left eye</text>
</g>
<g id="eye_2" transform="translate(-60,70)">
<ellipse cx="0" cy="0" rx="20" ry="20" fill="url(#grad_eye)"/>
<text x="0" y="40" text-anchor="middle" stroke="none">Right eye</text>
</g>
<g id="main" text-anchor="middle" font-family="sans-serif" font-size="16" stroke="#000000" fill="#000000">
<g transform="translate(0,-100)">
<use xlink:href="#screen"/>
<use xlink:href="#barrier"/>
<use xlink:href="#parallax_1"/>
<use xlink:href="#parallax_2"/>
<use xlink:href="#eye_1"/>
<use xlink:href="#eye_2"/>
</g>
<g transform="translate(0,100)">
<use xlink:href="#screen"/>
<use xlink:href="#lenses"/>
<use xlink:href="#lenticular_1"/>
<use xlink:href="#lenticular_2"/>
<use xlink:href="#eye_1"/>
<use xlink:href="#eye_2"/>
</g>
</g>
</defs>
<use xlink:href="#main" />
</svg>
You must be logged in to post a comment.