What inspired MY design? Well Jose Garcia del Castillo introduced me to an interesting javascript library he created himself. It was built around the workflow of parametricism, so naturally, I was interested.
Having only learned javascript in another class last week, I figured I should take the opportunity to make my gif with this libarary, called sketchpad, so that I can learn javascript animations a lot more thoroughly than I was able to with anitype project. Definitely learned a lot, or at least was confused a lot…
Either way I was looking to get an effect that was mesmerizing and soothing to stare at. The colors are subtle transparent colors of red, green, and blue, and as the shapes rotate they melt together to create hues of gray or overlap with other circle of the same fill to highlight that color more. On top of that I drew some simple but cool-looking lines from a pentagon that I learned to construct using descriptive geometry methods [ergo, parametricism]. It was a lot of fun. I wish I had had more time. It wasn’t at all what I was intending for it to be, as my sketches had shown fully opaque pentagons and circles revolving around a center point from a very close radius and rotating slowly, ideally having pentagons poke out behind circles poking out behind more pentagons, and so on. Unfortunately the library he made was only just released yesterday, and he has a lot left to do with it. It cannot make shapes with fills as far as I can tell yet, so I’ve contacted Jose with some feedback on his library. I felt pretty good about my decision to use it regardless so that I could be put his library to the test and help out with his project while completing my own.
If I could change anything I just would have been able to implement even more basic javascript functionality, as I currently felt quite limited without much knowledge of it and depending heavily on his library, unable to do many work-arounds for any missing functionalities. Things like the layer order so that I could control what covered what directly. Or making basic shapes.
The other failure is that this animation is best at a slow pace and it seems huge when I try to make it into a gif. Instead, I do have a youtube video and a smaller gif.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
<span class="hiddenSpellError" pre="" data-mce-bogus="1">Sketchpad</span>.js - Basic Template
css/styles.css" type="text/css"/>
</head>
<body>
<div id="sketchpadDiv">
sketchpadCanvas">
</div>
<script>
// Sketchpad code goes here
var pad = new Sketchpad('sketchpadCanvas'); // instantiate a new Sketchpad on canvas
var black = new pad.Style({
strokeWidth: 6.0
});
var invis = new pad.Style({
strokeWidth: 0.0001
});
var circleF = new pad.Style({
strokeWidth: 0.1,
fill: 'rgba(100,200,200, .2)'
});
var circleF1 = new pad.Style({
strokeWidth: 0.1,
fill: 'rgba(200,100,200, .2)'
});
var circleF2 = new pad.Style({
strokeWidth: 0.1,
fill: 'rgba(200,200,100, .2)'
});
var styles = [circleF, circleF1, circleF2];
function makeShape(B, ABmid) {
pad.currentStyle(invis);
var ABrad = pad.Measure.distance(ABmid,B);
var ABcir = pad.Circle.centerRadius(ABmid, ABrad);
var ABmidB = pad.Line.between(ABmid, B);
var A = pad.Point.intersection(ABmidB, ABcir).items[0];
var ABlen = pad.Measure.distance(A,B);
var Acir = pad.Circle.centerRadius(A, ABlen);
var Bcir = pad.Circle.centerRadius(B, ABlen);
var ABint = pad.Point.intersection(Acir, Bcir).items[0];
var ABperp0 = pad.Line.between(ABmid, ABint);
var abPerpInt = pad.Point.intersection(ABperp0, ABcir).items[0];
var ABperp = pad.Line.between(ABmid, abPerpInt);
var ABPmid = pad.Point.along(ABperp, .5);
var ABPrad = pad.Measure.distance(ABPmid, ABmid);
var ABPcir = pad.Circle.centerRadius(ABPmid, ABPrad);
var ABPB = pad.Line.between(B, ABPmid);
var ABPBints = pad.Point.intersection(ABPB, ABPcir).items;
var ABPBint0 = ABPBints[0];
var ABPBint1 = ABPBints[1];
var Brad0 = pad.Measure.distance(ABPBint0,B);
var Brad1 = pad.Measure.distance(ABPBint1,B);
var Bcir0 = pad.Circle.centerRadius(B,Brad0);
var Bcir1 = pad.Circle.centerRadius(B,Brad1);
var Bcir0ints = pad.Point.intersection(Bcir0,ABcir);
var Bcir1ints = pad.Point.intersection(Bcir1,ABcir);
var pt1 = Bcir0ints.items[1];
var pt2 = Bcir0ints.items[0];
var pt3 = Bcir1ints.items[0];
var pt4 = Bcir1ints.items[1];
var pts1 = [pt1, pt2, pt3, A, pt4];
// var pts = new Set(pts1);
// pts.type = pad.C.SET;
// pts.subtype = pad.C.POINT;
// var pts = pad.Set.prototype.setItems(pts1, pad.C.POINT);
pad.currentStyle(black);
// var l1 = pad.Line.between(ABmid, pts);
// var l2 = pad.Line.between(pt2, pt3);
// var l3 = pad.Line.between(pt3, A);
// var l4 = pad.Line.between(A, pt4);
// var l5 = pad.Line.between(pt4, pt1);
var midpts = []
for (i = 0; i < 5; i++) {
var ircle = pad.Circle.centerRadius(pts1[i], 100);
ircle.setStyle(styles[(thisStyle+=1)%3]);
pad.currentStyle(black);
}
for (i = 0; i < 5; i++) {
for (j = 0; j < 5; j++) {
if(j > i){
var line = pad.Line.between(pts1[i], pts1[j]);
// for (k = .2; k < 1; k+=.2) {
var x = pad.Point.along(line, .5);
// var y = pad.Point.along(line, .7);
midpts.push(x);
// midpts.push(y);
// }
}
}
}
for (i = 0; i < midpts.length; i++) {
pad.currentStyle(circleF);
rcle = pad.Circle.centerRadius(midpts[i], 100);
pad.currentStyle(black);
}
for (i = 0; i < midpts.length; i++) {
for (j = 0; j < midpts.length; j++) {
if(j > i){
var line = pad.Line.between(midpts[i], midpts[j]);
}
}
}
}
var a1= new pad.Point(pad.width.value/2, pad.height.value/2 + 100);
var b1 = new pad.Point(pad.width.value/2, pad.height.value/2);
var a2= new pad.Point(pad.width.value/2, pad.height.value/2 + 100);
var b2 = new pad.Point(pad.width.value/2, pad.height.value/2);
var a3= new pad.Point(pad.width.value/2, pad.height.value/2 + 100);
var b3 = new pad.Point(pad.width.value/2, pad.height.value/2);
thisStyle = 0;
makeShape(a3,b3);
makeShape(a1,b1);
makeShape(a2,b2);
var d1Y = 300;
var d1X = 3*pad.width.value/4
var d2X = pad.width.value+200;
var d3X = pad.width.value/2;
var dir = 1;
var dir1 = 1;
// pad.tagElementNames(); // create automatic nametags
pad.update = function() {
if(dir == 1 && d1X< =pad.width.value+200) {
a1.setPosition(d1X+=2, d1Y);
if (d1X>=pad.width.value+200) dir = 0;
}
else{
a1.setPosition(d1X-=2, d1Y);
if (d1X< =-200) dir = 1;
}
if(dir == 1 && d2X>=-200) {
a2.setPosition(d2X-=2, d1Y);
}
else{
a2.setPosition(d2X+=2, d1Y);
}
if(dir1 == 1 && d3X< =pad.width.value+200) {
a3.setPosition(d3X+=2, d1Y);
if (d3X>=pad.width.value+200) dir1 = 0;
}
else{
a3.setPosition(d3X-=2, d1Y);
if (d3X< =-200) dir1 = 1;
}
};
</script>
</script></body>
</html>