October 2020 – Page 37 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project 6 – Abstract Clock

For Project 6, I created a rather simple 24 hr clock but displayed abstractly. I purposely duplicated multiple clocks into one composition to create visual intrigue and guide the eye through the mesmerizing movement of the seconds, minutes, and hours. I was inspired by the Apple Watch and its demonstration of time through simplicity and color.

sketch

function setup() {
    createCanvas(400, 400);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
    angleMode(DEGREES);
}

function draw() {
    background(38, 84, 124);

    //clock transformation
    //total of nine clocks
    push();
    translate(80, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(80, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 80);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 320);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(200, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(80, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

    push();
    translate(320, 200);
    scale(0.3);
    rotate(-90);
    clock();
    pop();

}

function one() {
    //seconds function
    let s = second();
    strokeCap(SQUARE);
    noFill();
    strokeWeight(50);
    stroke(6, 214, 160);
    //movement
    let secondHand = map(s, 0, 60, 0, 360);
    arc(0, 0, 100, 100, 0, secondHand);
}

function two() {
    //minute function
    let m = minute();
    strokeCap(SQUARE);
    noFill();
    stroke(255, 209, 102);
    //movement
    let minuteHand = map(m, 0, 60, 0, 360);
    arc(0, 0, 200, 200, 0, minuteHand);
}
 function three() {
    //hour function
    let h = hour();
    strokeCap(SQUARE);
    noFill();
    stroke(239, 71, 111);
    //movement
    let hourHand = map(h % 24, 0, 24, 0, 360);
    arc(0, 0, 300, 300, 0, hourHand);

 }

 function clock() {
    //entire clock
    one();
    two();
    three();
    //center of clock
    fill(255);
    noStroke();
    circle(0, 0, 50);
 }

Inspiration:

LO 06 – Randomness

Nervous System: Jessica Rosenkrantz, Jesse Louis-Rosenberg

Growing Objects (2014)

Today, I will be talking about a project called “Growing Objects” (2014), by a design studio, Nervous System (Jessica Rosenkrantz and Jesse Louis-Rosenberg). The project features 3D printed sculptures that encompass the structure and patterns present in nature. To create these mesmerizing objects, the designers used “truly” random numbers, where they adopt the logic of the pattern and formations and translating it into scientific theories and algorithms for a design using computational systems. They used posters to show the algorithmic investigations of nature to explain the math, science, and natural inspiration behind the 3D printed objects. Although the “randomness” is based on true observations from nature, these sculptures do not directly mimic specific phenomena, but rather are open-ended explorations of the mathematics and logic behind them. I admire this project because when looking at the 3D printed objects, you can get a feeling of the natural object that it was inspired by. The subtle personalities are translated to the recreated forms, yet still different in an organized, unorganized way. The creator’s artistic abilities show when they take this a step further, incorporating movement to represent “growth” when in motion to enhance user interaction.

Visit Portfolio here

LookingOutwards-06-Randomness

For this week, the work I will be talking about is ‘Interruptions’ by Vera Molnar. This work was created in 1968-69 on the computer and generates random white space surrounded by many lines tilted at a random angle each time. The reason why I admire this project is because this was created in a time where computers were not fully developed as it is today. Vera Molnar is definitely a pioneer of this creative coded art field. Even though the project is randomized, the placement of the lines and the range of tilt that Molnar set on this project allows the randomness of the project to be beautiful in its own way.

Project – 05 – Wallpaper

sketch

//Dreami Chambers; Section C; dreamic@andrew.cmu.edu; Assignment-05-Project

var x = 0
var y = 0

function setup() {
    createCanvas(400, 600);
}

function draw() {
	background(255, 205, 225)

	//calls the functions with random spacing
	 for (var x = -10; x <= width-100; x += 150) {
        for (var y = 5;y <= height; y+= 170) {
        	push()
            translate(x, y)
            rotate(radians(random(0, 20)))
            cherries()
            pop()
        }
    }

   	for (var x = 70; x <= width-100; x += random(150, 210)) {
        for (var y = 0;y <= height; y+= random(170, 200)) {
        	push()
            translate(x, y)
            rotate(radians(random(0, 20)))
            flowers()
            pop()
        }
    }

	for (var x = 20; x <= width; x += random(100, 150)) {
        for (var y = 20;y <= height; y+= random(100, 170)) {
        	push()
        	rotate(radians(random(0, 10)))
            translate(x, y)
            dots()
            pop()
        }
    }
    noLoop()
} 

//cherries drawing
function cherries() {
    noFill()
	beginShape()
	strokeWeight(2)
	stroke(95, 175, 90)
	curveVertex(80, 20)
	curveVertex(60, 20)
	curveVertex(50, 40)
	curveVertex(50, 40)
	endShape()
	beginShape()
	strokeWeight(2)
	curveVertex(60, 20)
	curveVertex(60, 20)
	curveVertex(75, 31)
	curveVertex(80, 31)
	endShape()
	strokeWeight(1)
	fill(255, 85, 150)
	strokeWeight(0)
	circle(50, 50, 20)
	circle(80, 40, 20)
	fill(95, 165, 90)
	push()
	translate(70, -30)
	rotate(radians(90))
	ellipse(50, 20, 10, 20)
	pop()
	push()
	rotate(radians(-13))
	ellipse(64, 32, 20, 10)
	pop()
} 

//flowers drawing
function flowers(){
	fill(255)
	push()
	noStroke()
	translate(50, 100)
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(80))
	ellipse(0, 2, 20, 30)
	translate(15, 10)
	rotate(radians(65))
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(70))
	ellipse(0, 0, 20, 30)
	translate(15, 10)
	rotate(radians(75))
	ellipse(0, 2, 20, 30)
	translate(15, 10)
	pop()

	fill(255, 140, 180)
	strokeWeight(0)
	ellipse(49, 115, 10, 10)
}

//random circles
function dots(){
	strokeWeight(0)
	var r = random(0, 15)
	fill(255)
	circle(0, 0, r)
}

// For this assignment, I wanted to make a design that looked similar to a phone wallpaper. 
// I wanted it to look like something I would actually used, so I added colors and shapes that I like a lot. 
// I also didn't want the shapes to have the same spacing between each other, as it makes the design look too symmetrical. So I used random to create some variation.

Looking Outwards – 05

For this Looking Outwards, I decided to cover a 3D character called Eggdog. This character was based off of a real pomeranian that looked quite similar to the shape of an egg after getting a haircut. This video of the dog became very popular over time and led to the creation of a 3D model. I assume that the 3D rendering of the dog and the videos of this character was made using a program like Blender. Within these types of programs, you can create and rig 3D models. You can also record animations and bring in other models to create an environment. What I admire about this work is that Eggdog is such a simple character, but has become so widespread and has made a lot of people laugh due to the silliness of its design.

Example video: https://twitter.com/zotakufilms/status/1242918393331752960?s=20

Original video:

View this post on Instagram

*edited* . For Grooming enquiries please Whatsapp me at 97924608 as instagram doesnt send me notifications for Instagram DMs. . For everyone who found joy in this video, thank you so much for sharing and passing on pompom's happy awwra. I've spoke with the owner and turns out her daughter has created an Instagram account for Pom and their other dog Pixel (a maltese). Do give them a follow and show them some love. . PLEASE DO NOT REPOST THIS VIDEO. Thank you. . Instagram: @Pom_and_Pixel . . So much Zen in such a tiny body. PomPom the Pomeranian Groomed by: Me 😁 Instagram of groomer: groomer_andrea . #dogs #dogstagram #dogsofinstagram #doggram #instadogs #insta_dogs #friends #petgrooming #pet #petsagram #petgram #grooming #groomer #work #friendsatwork #instalove #instadorable #sgig #igsg #shiroro #petgasm #Homegrooming #homegroomer #onlypomeranians #pomeranian #pomeranians#pomgram #pomeraniansofinstagram #pomstagram #bootcutjeans

A post shared by ❤️💛💙The Colourful Groomer 💙💚💜 (@groomer_andrea) on Jan 29, 2019 at 12:31am PST

LookingOutwards-05

A tech company named Ethmode recently developed a program to design garment in 3D in order to reduce textile waste in the fashion industry. The program is used to build generative designs, visualize material and customize silhouettes through languages such as JavaScript. Beyond providing photo-realistic renders of the garment that help to decide the basic design, the program also offer sophisticated animation on the the movement, drape and stretch of the garments.
Credited to this tech agency, manufacturers in Bangladesh are able to reduce 40% of physical sampling by implementing 3D digital design process. Handful of brands started to work on customized clothing through this digital realm to create gowns and customized sneakers.

Link to the article: https://eco-age.com/magazine/how-3d-digital-design-and-augmented-reality-can-slash-textile-waste-fashion/

Project-05-Wallpaper

sketch Download

//Isabel Xu
//15-104 Section A
const Y_AXIS = 1;
function setup() {
  createCanvas(480,480);
  // Two color in the end of the neon hue
  c1 = color(223,255,0);
  c2 = color(116, 0, 225);

  noLoop();
}

function draw() {
  // background
  setGradient(0, 0, 480, 480, c1, c2, Y_AXIS);
  //ellipseShape
  drawPattern();

}

function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();

    for (let i = y; i <= y + h; i++) {
      let inter = map(i, y, y + h, 0, 1);
      let c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
}

function drawPattern(){
	cirW=150;
  	for (var x = 0; x <= width;x +=150){
  		cirH=150;
  		for (var y = 0;y <= height;y+=150){
  		noStroke();
  		fill(250);
  		ellipseMode(CORNER)
  		ellipse(x,y,cirW,cirH);
  		cirH-=40;
  	}
  	cirW-=40;
  }
}

A study on geometric symbols evolved from circles.

Looking Outwards 05

Looking Outwards 05: 3D Computer Graphics

https://threejs.org/examples/#webgl_animation_keyframes

For this project, I want to discuss a Javascript library called three.js and projects that use this library to create short animatics, motion experiments and virtual worlds. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL. This project by Glenn Fox, is a model of a unit of buildings, shops and culture in Tokyo. Fox’s body of work that shows caricature of the build environment. 3D computer graphics have particular file types like .obj that can be created with code. Algorithms are used to create generic shapes that make up the building blocks of the rendered image. A lot of Fox’s work is used in Game Design environments.

Project-05-WallPaper

I want to create a Christmas vide wallpaper that involves festival elements such as Christmas trees, snowmen, etc. I used the the loop we learned in class to create repetitive patterns of the wallpaper.

wallpaper Download

p5.js vers 0.9.0, Edit index.html to Change This Title

Looking Outwards

Aghori Portrait by Aldo Martínez Calzadilla(2017)
URL: https://fineartamerica.com/featured/3d-aghori-portrait-aldo-martinez-calzadilla.html

The piece looks extraodinarily realistic and detailed. The image has the quality of a photograph as the character in the image looks like a real human-being with well depicted hairs, muscle lines, blood vines, and skin texture. The character is holding a skull with both hands above his head with calm, religious facial expressions, drawing viewers’ attention to this uncommon behavior. The artist impresses the viewers with his expertise in modeling and sculpting. The artist used 3D programs such as Brush, Maya, and Mari, which allows him to first build the models, and then refine the models by adding colors, skin textures, other details, and even shadows and lighting. The artist demonstrates his deep understanding of the human body and observational skills, which makes the piece convincing in terms of anatomy. With the use of technology, algorithms, computational softwares, and data visualization, the artist was able to generate this sophisticated, narrative, and appealing image.