/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-07 */
function setup() {
createCanvas(480, 480);
frameRate(100);
}
function draw() {
background(255);
/* mapping the colors so that it changes based on mouseX */
var r = map(mouseX, 0, width, 140, 180);
var g = map(mouseX, 0, width, 160, 190);
/* printing hypotrochoid */
push();
stroke(r, g, 255);
strokeWeight(0.25);
translate(width/2, height/2);
drawHypotrochoid();
pop();
}
function drawHypotrochoid() {
/* naming variables */
var hypoX;
var hypoY;
/* radius of hypotrochoid */
var hypoRadius = 240;
/* hypotrochoid alteration with cursor */
var a = map(mouseX, 0, width, 0, 5);
var b = map(mouseY, 0, height, 0, 3);
beginShape();
for(var i = 0; i < 300; i ++) {
var angle = map(i, 0, 200, 0, 360);
/* equation of hypotrochoid from the link */
hypoX = (a - b) * cos(angle) + hypoRadius * cos((a - b) * angle);
hypoY = (a - b) * sin(angle) - hypoRadius * sin((a - b) * angle);
vertex(hypoX, hypoY);
}
endShape();
}
hypotrochoid chart
Thinking about the project that we did a couple weeks ago on string art, I focused on curves that bring lightness, tranquility, and balance in regards to symmetry and motion. The purpose of picking a hypotrochoid is the many ways in which the control points of each line or curve responds differently but respects the symmetry in balance.
variation with the largest radius
Looking back at the hypotrochoid chart, that moment of the cursor provides the twelfth iteration, producing a modular set of filleted triangular curves.
second variationa similar variation to the above onea similar variation to the above one
Frieder Nake has done a series of matrix multiplications in which all contain various series of squares outlines of different colors. Some lines are thicker than others while some lines are slanted while others are not.
similar code with different generated art
The decisions of which colors and which sides of each squares should be filled are from a mathematic algorithm within a matrix that Nake used for several images. The result produced from it is what is the randomness of it.
For some reason, the background screen for the Google Nexus One popped into my head. It is a pixelated background with a series of primary-colored (and yellow) lines moving through the screen.
Nexus One wallpaper
I replicated that onto my current smart phone and mapped it in a way that the viewer would read the time in an abstract manner. Since most of us look at out phones to look at the time, it was a challenge for me look into way to visually tell time. sketch
Pixar Animation Studio is recognized as one of the leading producers in animation films and design computer graphics. One of their most recent projects I want to look at is “Coco”. Coco goes beyond just the CG animation in their work and instead used VFX (visual effects).
Within this movie, one of the clips of the behind the scenes I found is the computer graphics of the movement of cloth in skeletons. Using a series of meshes, graphic artists simulate those clothing on the skeletal characters.
concept art of clothes on characters
However, the designers issued that the problem is that skeletons are made up of really tiny bones, and because the control points have to match for the clothes and bones, the movement would make some of the bones see through from the clothes. This basically looks like clothes sinking into the cracks of the bones like something falling in quicksand.
concept art of clothes on characters
Their solution is a concept called continuous collision detection, where meshes detect all the collisions of selected objects. This works even if the object is moving really fast, which is prevalent is any characters in animation movies.
/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
project-05 */
function setup() {
createCanvas(640, 400);
background(235, 205, 255);
var varWidth = 100;
var varHeight = 60;
var starty = 0;
var startx = 0;
for (var y = 0; y < 10; y++) {
for (var x = 0; x < 18; x++) {
var py = starty + y * varHeight;
var px = startx + x * varWidth;
/* moving cube to just the right */
if (y%2 == 0) {
px = (startx - 25) + x * varWidth;
}
else {
px = startx + x * varWidth;
}
noStroke();
/* top of the cube */
fill(255, 205, 235);
quad(px, py, px + 25, py - 15, px + 50, py, px + 25, py + 15);
fill(255, 230, 255);
quad(px + 5, py, px + 25, py - 12, px + 45, py, px + 25, py + 12);
/* left side of the cube */
fill(255, 170, 200);
quad(px, py, px + 25, py + 15, px + 25, py + 60, px, py + 45);
fill(255, 200, 225);
quad(px + 5, py + 8, px + 20, py + 18, px + 20, py + 52, px + 5, py + 43);
/* right side of the cube */
fill(255, 145, 180);
quad(px + 25, py + 15, px + 50, py, px + 50, py + 45, px + 25, py + 60);
fill(255, 160, 205);
quad(px + 30, py + 18, px + 45, py + 8, px + 45, py + 43, px + 30, py + 52);
}
}
noLoop();
}
I brought over the color theory from last week’s project and utilized it to make a series of repeating cubes. The inspiration of this popular pattern came from a bus ride back from a haircut I got at Bloomfield. I did a basic sketch on how the variables would be separated and implemented it in code to make a simple pattern that is stress-relieving to the eye.
“Lenses” is an interactive sound art installation by creative agency, Hush, in which the differently shaped prisms refract light in the direction that the user turns. When twisted on the walled surface, the refraction of the light and its composition is translated to a software and projects sound in real time. This allows a calm duality in light projection and soundscape.
the position of the prisms correlate with the direction in which light emitsuser interacting with the installation
The idea from the designers was for an audiovisual installation to reflect the ideas between designers, artists, musicians, and technologists. The end result of this piece is allowing to integrate multiple different fields in crossing boundaries and creating something visually appealing and interacting for the user.
/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-04 */
var x1;
var x2;
var y1;
var y2;
function setup() {
createCanvas(400, 300);
background (0);
}
function draw() {
/* drawing rectangles increasing */
for (var i = 0; i <= 500; i += 5) {
stroke(50);
strokeWeight(0.25);
line(i, 0, i, height);
}
for (var i = 0; i <= 375; i += 10) {
/* curve along the top-right corner */
/* least sloped curve */
stroke(168, 143, 225);
line(i, 0, width + i, i);
/* steeper curve */
stroke(168, 143, 200);
line(i, 0, width, i);
/* slopiest curve along top-right corner */
stroke(168, 143, 175);
line(i, 0, width - i, i);
/* reflection from the previous lines of code along y-axis */
stroke(213, 142, 165);
line(i, i, width - i, 0);
/* long curve along bottom-left corner */
stroke(295, 142, 165);
line(0, i, i, height);
/* long curve along top-left corner */
stroke(200, 125, 165);
line(i, 0, 0, height - i);
/* curves along the diagonal axis */
stroke(154, 89, 140);
line(i, i, 0, height - i);
/* curve symmetry along x-axis */
strokeWeight(0.25);
stroke(200, 50, 140);
line(width, height - i, -i, i);
line(width, i, -i, height - i);
/*
strokeWeight(0.25);
line(0, height - i, width, height);
line(0, height - i, width, 0);
*/
}
}
The purpose of making all my strings a different shade of pink is for a calming effect for myself. Along with that is a bevy of symmetry along multiple axes; however some of these lines of code produces visually asymmetrical results. Combining those together, with an emotionally stressful week, this is a reminder for me that it id okay to be imperfect and to take my day to day life less seriously. Live my life.
Wood-Skin is a fabrication firm that attempts to use ideas of digital fabrication and typical building materials to build new composite materials and technology. It is described as the most flexible 3D surfaces for architecture and design.
Wood-skin can be altered into whatever function and decor is wanted
The process begins with a digital model through a CAD file. What also makes this project unique is the variety of materials that can be utilized such as wood, metal, acrylic, etc. In reality, wood-skin is fabricated with the combination of pliable nylon and polymer mesh.
table made with modules of wood-skin
The composite materials are generated from a digital file to a CNC mill where a series of modules of the same algorithm can be realized by fabricating them. They can also be altered based on thickness, pliability, and even overall shape.
wood-skin can be altered into different triangular patterns
The benefit of this computative fabrication is the elimination of a complex understructure that may be needed for complex forms. One can alter the pattern in however manner they like and can pave the way as using composite materials an option for building material.
/* Anthony Ra
Section-A
ahra@andrew.cmu.edu
Project-03-DynamicDrawing */
/* assigning altering variables */
var tor = 150;
var tot = 3;
var torr = 100;
var tort = 5;
var torrr = 30;
var tortt = 0.5;
var dir = 1;
var speed = 2;
var speedd = 5;
function setup() {
createCanvas(640, 480, WEBGL);
frameRate(100);
noCursor();
}
function draw () {
/* altering color of background */
var r = map(mouseX, 0, height, 220, 215);
var g = map(mouseX, 0, height, 255, 0);
var b = map(mouseX, 0, height, 0, 255);
background(r, g, b);
noStroke();
rotateX(mouseX * 0.01);
rotateY(mouseY * 0.01);
ambientLight(40, 210, 60);
ambientMaterial(90, 200, 100);
speed = mouseX / 20;
torus(tor + speed*dir, tot + speed*dir);
/* movement of larger torus */
noStroke();
rotateX(mouseX * 0.01);
rotateY(mouseY * 0.01);
ambientLight(150, 30, 50);
ambientMaterial(100, 50, 100);
speed = mouseX / 20;
torus(torr + speed*dir, tort + speed*dir);
/* movement of smaller torus */
noStroke();
rotateX(mouseX * 0.01);
rotateY(mouseY * 0.01);
ambientLight(50);
ambientMaterial(150);
speedd = mouseX / 10;
torus(torrr + speedd*dir, tortt + speedd*dir);
}
This process was definitely a bit more challenging than the previous projects because I was thinking more about which lines of code was going to work rather than what I wanted my end product to look like. Something new that I played with is the implementation of 3-dimensional shapes and its movement along the mouse. I felt that toruses best represented the different angles that can be controlled by the mouse.
Instead of a specific installation or project, I decided to look at a singular artist’s collection of works. From his biography, Sergio Albiac plays with the “visual intersection between generative computer code and traditional media. I originally ran across his work while on Pinterest and part of what his work that is especially intriguing is his implementation of two things that I have much interest in – portraits and learning art through code.
Using voice and facial recognition to generate a portrait2016 Internet Age Media Weekend
However, one of his works that stand out the most is “I am”. People sit in a visual portrait studio and, speaking to an audio application program interface, codes those words to create a portrait using those descriptions. It is the type of interactive artwork that does not involve the longevity of sitting through oil paintings or a couple nanoseconds of a flick of a film camera.
generated by sensors from cars
Part of what I really enjoy with his work is that it does not initially seem to have any generative-ness into it. Some of his work seems like oil paintings or watercolor, but upon further look, the ability to put computer programming and coding into a product that is convincingly realistic is something I definitely want to look into in the near future.
![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2020/08/stop-banner.png)
