I started with 5 ideas (include sketch)
Settled on creating an online anaglyph of the “A.” Anaglyphs are a way to give a 3D aspect to an object; the only drawback is that you need to be wearing red/green or red/cyan glasses. I have both but chose red/cyan glasses.
Started with p5.js but then decided to build this using d3.js which is a technology I’d like to explore this semester
d3.js (which stands for Data Driven Design) is very similar to p5 and other javascript libraries except javascript heavily references the DOM to adjust elements and then outputs as SVG.
I started with drawing a simple black circle. And then added two more and positioned them to match the A I had chosen (three circles). And now for the twist. I thought this shape would give the best 3D effect.
Plus wearing 3D glasses set the mood for a Monday.
Then I just adjusted the circles -20px for red and +20px for cyan (in the X direction (cx) ). Layered red, cyan and black.
That looked pretty good but it needs a background. A simple gray background really didn’t help the 3D effect so looking for something that will work better.
I had taken a cool picture looking up through some aspen trees from last Friday. It has great depth. So…I could create an anaglyph of that picture and place it behind. Should I do that in code or photoshop. Code would load three separate images, so from a performance standpoint, one single anaglyph image would be best but this would be an interesting way to play with blending modes in the future.
I added the background via CSS. At first, during placement, I was not able to see the background.
My original code:
<body style="background-image:url("img/treebg.jpg);">It is missing closing quotes to close the inline style but it’s not working. And it turns out the url does not need quotes. I always forget that.
<body style="background-image:url(img/treebg.jpg);">
That background doesn’t work so well either maybe because of the opacity on the circles.
Changed opacity to 30% and found I could shorten the code a bit.
One thing that was bugging me about this sketch was it used just html and css with some svg coding. No javascript. Upon viewing the console output, I noticed that my d3 js call was not working anyway because of a pathing issue. I decided to add in some proper d3.js script coding. I simply changed added div ids to the three black circles so that I could target them in the DOM. I then added d3.js code to change those colors after. And this is the final result. 47 lines of html, css and d3.js.
Final Result: https://www.terrazoom.com/atlas/cc/proj1/
Final Code:
<html xmlns="html"><head><title>Creative Coding Fall 2020 - Project1</title><link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"><script type="text/javascript" src="https://www.terrazoom.com/atlas/cc/proj1/js/d3.js"></script>
</head><body style="background-image:url(img/treebg.jpg);"><div class="container"><div><h3>Project 1: Draw an ATLAS A </h3></div><!-- This is where we're going to add content with the CSS selector "#content". --><div id="content"></div><svg width="1680" height="1024">
<!-- DRAW RED --><circle id="redCircleLeft" cx="240" cy="600" r="200" fill="red" opacity="0.3" /><circle id="redCircleCenter" cx="490" cy="200" r="200" fill="red" opacity="0.3" /><circle id="redCircleRight" cx="740" cy="600" r="200" fill="red" opacity="0.3" />
<!-- DRAW CYAN --><circle id="cyanCircleLeft" cx="280" cy="600" r="200" fill="cyan" opacity="0.3" /><circle id="cyanCircleCenter" cx="530" cy="200" r="200" fill="cyan" opacity="0.3" /><circle id="cyanCircleRight" cx="780" cy="600" r="200" fill="cyan" opacity="0.3" />
<!-- DRAW BLACK --><circle id="blackCircleLeft" cx="260" cy="600" r="200" style="fill:white;"></circle><circle id="blackCircleCenter" cx="510" cy="200" r="200" style="fill:white;"></circle><circle id="blackCircleRight" cx="760" cy="600" r="200" style="fill:white;"></circle>
</svg> </div>
<script type="text/javascript">var circleLeft = d3.select("#blackCircleLeft");circleLeft.style("fill", "black");var circleCenter = d3.select("#blackCircleCenter");circleCenter.style("fill", "#2f2f2f");var circleCenter = d3.select("#blackCircleRight");circleCenter.style("fill", "#4f4f4f");</script>
</body></html>
