/*Aadya Bhartia
Section A
abhartia@cmu.edu*/
//initializing arrays to hold x and y position of candy based on hours
var candyX = [0,0,25,-25,-8,43,-42,15,-21,40,-45,6,12];
var candyY = [0,47,40,40,18,18,18,12,2,-5,-10,-15,-20];
var minX = 90;
var minY = 90;
var secX = 260;
var secY = 380;
var hr = 0;
function setup() {
createCanvas(500, 500);
background(255, 217, 206);
}
function draw() {
background(255, 217, 206);
var s = second();
var m = minute();
var h = hour();
var angle = 0;
var secR = s/60;
var minR = m/60;
//seconds
fill(139, 170, 173,90);
noStroke();
ellipse(secX, secY, 177*secR); //circle increasing in size for seconds
stroke(64, 78, 92);
strokeWeight(1/20*s);
noFill();
arc(secX,secY,200, 200, 0 , 2*PI * secR);
stroke(146, 55, 77);
strokeWeight(1/6*s); //stroke gets thicker based on seconds
noFill();
arc(secX,secY,184, 184, 0 ,2*PI * secR);
fill(221, 117, 150);
noStroke();
rect(secX+82,secY-8,200,10); //bar for seconds
//minutes
fill(221, 117, 150);
noStroke();
rect((minX-3),(minY +62),6,400);//base for the candy ball to count minutes
push();
noFill();
strokeWeight(1/5*m);
stroke(113, 10, 53);
translate(minX,minY);
ellipse(0, 0, 140); //base for the candy ball to count minutes
stroke(0);
strokeWeight(1);
//hour
hr = h%12; // number of candy in the ball count the hours
candy(hr);
pop();
//minutes counted with hearts in a 6 by 10 grid
var ctr = [];
var counter = 0;
for(var i = 0;i<60;i++){ //creating an array to store all possible minutes
ctr.push(i);
}
for(var x = 1;x<7;x++){
for(var y = 1;y<=10;y++){
push();
translate(320,8);
if(counter == m){
fill(255); //white colour for current minute
heart(25*x,25*y);
}
else{
fill(221, 117, 150,random(100,200));
heart(25*x,25*y);
}
pop();
counter+=1;
}
}
}
//candy helps count the hours
function candy(hr){
for(var j = 1; j<=hr;j++){//candy globe effect given by the predefined array counting the hours
fill(random(100,200),random(0,50),random(20,70));
ellipse(candyX[j],candyY[j],35);
}
}
function heart(minX,minY){ //creating hearts which count the minutes
ellipse(minX-4,minY,9);
ellipse(minX+4,minY,9);
triangle(minX-8,minY+2,minX+8,minY+2,minX,minY+10)
}
Author: aadya
Looking Outwards : 06
Perlin noise was created by Ken Perlin in 1983 for a film he was working on, Tron. 35 years ago, Ken Perlin won an academic award for discovering the technique now called “Perlin Noise.” Perlin noise is described as a type of gradient noise that interpolates random values to create smooth transitions through the noise function. It helped him add randomness to CG renderings of natural elements like smoke, fire, and water. Its flexibility in mathematical expressions allowed perlin noise to be used to create a wide variety of textures that imitate the controlled random appearance of textures in nature.
In our architecture studio under Dana Cupkova, we are exploring randomness using keyshotand other rendering tools such as grasshopper and kangaroo and it was extremely interesting to read about a similar concept but in a different perspective altogether. I was extremely inspired by how random yet sophisticated his textures look and surprised that something computer generated could still have that level of detail. In real life we take textures like this for granted and do not realise the amount of work that goes into creating smooth transitions.
Project 5
I really enjoyed making the avocado’s in the project and it reminded me of breakfast!
//Aadya Bhartia
//Section A
function setup() {
createCanvas(600, 400);
background(256,156,155);
//text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
var aX = 70;
var bX = 60;
var aY = 90;
var bY = 60;
for(var y =18;y<=height+20;y+=80){
if(y == 18||y==178||y == 338){//checking for even rows
for(var x = 50;x<=width;x+=100){
avo1(x,y);
}
}
else{
for(var x = 0;x<=width;x+=100){
avo2(x,y)
}
}
}
noLoop();
}
function avo1(a,b){
b = b+2;
//avocado shadow
noStroke();
fill(25, 68, 35, 170);
var a1 = a+10;
beginShape();
curveVertex(a1,b-65);
curveVertex(a1-10,b-63);
curveVertex(a1-19,b-52);
curveVertex(a1-21,b-30);
curveVertex(a1-30,b+12);
curveVertex(a1,b+32);
curveVertex(a1+30,b+12);
curveVertex(a1+21,b-30);
curveVertex(a1+19,b-52);
curveVertex(a1+10,b-63);
endShape(CLOSE);
//the green part of avocado
stroke(25,68,35);
strokeWeight(2);
fill(240,255,196);
beginShape();
curveVertex(a,b-65);
curveVertex(a-10,b-63);
curveVertex(a-19,b-52);
curveVertex(a-21,b-30);
curveVertex(a-30,b+12);
curveVertex(a,b+32);
curveVertex(a+30,b+12);
curveVertex(a+21,b-30);
curveVertex(a+19,b-52);
curveVertex(a+10,b-63);
endShape(CLOSE);
//seed
fill(163, 107, 67);
stroke(69,48,25);
strokeWeight(1);
ellipse(a,b+2,35);
//seed highlight
noFill();
stroke(69,48,25);
strokeWeight(3.5);
arc(a+2, b+2, 20, 20, 0, HALF_PI);
}
function avo2(a,b){
//avocado shadow - whole
var a2 = a-6;
noStroke();
fill(25, 68, 35,100);
beginShape();
curveVertex(a2,b-50);
curveVertex(a2-4,b-49);
curveVertex(a2-9,b-42);
curveVertex(a2-11,b-25);
curveVertex(a2-18,b+5);
curveVertex(a2,b+19);
curveVertex(a2+18,b+5);
curveVertex(a2+11,b-25);
curveVertex(a2+9,b-42);
curveVertex(a2+4,b-49);
endShape(CLOSE);
//Avocado as a whole
stroke(25,68,35);
strokeWeight(2);
fill(25, 68, 35);
beginShape();
curveVertex(a,b-50);
curveVertex(a-4,b-49);
curveVertex(a-9,b-42);
curveVertex(a-11,b-25);
curveVertex(a-18,b+5);
curveVertex(a,b+19);
curveVertex(a+18,b+5);
curveVertex(a+11,b-25);
curveVertex(a+9,b-42);
curveVertex(a+4,b-49);
endShape(CLOSE);
//white specks on the avocado
noStroke();
fill(255,255,255,50);
for(var d = a-15;d<=a+20;d+=2){
ellipse(d,random((b-30), b+30),2);
}
}
Looking Outwards : 05
Alexey Kashpersky has experience in creatingCG artworks, large amounts of 3D models for televisions, and 3D printing studios. His series of Virus artworks are intended to raise awareness while transforming it into something fantastic and something that had its own unique character. These majestic drawings although initially pleasing draw attention to the dangers of these viruses and diseases in the most thoughtful and fantastical way possible. Through VR, attention to detail and clean modelling, he is able to create beautiful forms which morph and grow as they evolve.
He also compares his imagination of these viruses to coral reefs, hoping to live the healthiest and happiest life travelling around the world through his imagination.
Looking Outwards : 4
Meandering Rivers premiered at Funkhaus, Berlin in July, 2018 and is an audiovisual installation that captures the natural forces that have actually shaped landscapes over time. The vibrant and dynamic textures show the unchanged nature with all the transformations going around in life. Based on a bespoke algorithm, the rippling and oscillating movement inherent in the generated imagery, provides a vantage point that transforms an understanding of progress, to examine the rhythm of natural forces.
The “Meandering River” is a multi-channel video with a set generative soundscape and the music has been composed by an A.I. (in collaboration with Kling Klang Klong) playing that shifts in tone when the river and surface patterns shift while this video is playing which further adds on movement through sonic sound and visuals. An interesting harmony is created through the installation creating an audio-visual journey and the the viewer is left with a humbling sense of the unpredictability of change and the beauty of nature.
Project 4 : String Art
//Aadya Bhartia
//Section A
var r = 250;
var g = 10;
var b = 140;
var bg = 80;
var change = 1;
var angle = 0;
function setup() {
createCanvas(400, 300);
background(200);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(bg);
//contraining mouse within canvas
var x = min(mouseX, width);
var y = min(mouseY, height);
//creating a mirror
var mx = width - x;
var my = height - y;
for(var m = 0; m<=width; m+=15){
stroke(170, 90, 100);
//bottom left as a mirror image of the top right
line(0,300 - m,400 - m,300);
line(0,300 - m,400 - m/2,300);
//top right
line(400,m,m,0);
line(400,m,m/2,2);
//creating 4 moveable string based on the mouse
stroke(r+50, g+20, b+10);
line(width-m,y, x,m);
line(m,my, mx,300-m);
line(width - m,my, x,300-m);
line(m,y, mx,m);
}
//background shades as a gradient
bg = bg + change;
if(bg>150){
change = -change;
}
if (bg<=0) {
change = -change;
}
}
Dynamic Drawing
//Aadya Bhartia
//Section A
var t = 0;
var angle = 0;
function setup() {
createCanvas(600, 480);
//background(220);
//text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(120, 200, 220);
//sun to moon
var x1 = 250*cos(PI - t) + 300; // using a curve to map the moon and sun to look like it is rising and setting
var y1 = 480 - 420*sin(t);
//clouds
fill(255);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
push();
translate(380, 30);
scale(2.0);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
pop();
push();
translate(300, 300);
scale(0.75);
ellipse(70, 40, 30, 30, 30);
ellipse(40, 50, 40);
ellipse(60, 70, 45);
ellipse(55, 65, 25);
ellipse(30, 75, 45);
ellipse(90, 75, 45);
ellipse(95, 49, 25);
pop();
fill(250, 250, 0);
ellipse(x1, y1, 120);
if(mouseX>=width/2){ // night time moon and stars
background(72, 91, 115);
ellipse(x1, y1, 120);
var moonC = map(x1, 0, height, 80, 0);
fill(72, 91, 115);
noStroke();
ellipse(x1 - moonC - 30, y1, 120);
//stars
push();
fill(255);
translate(20, 40);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(320, 150);
scale(1.5);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(400, 350);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(500, 240);
scale(0.75);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(560, 70);
scale(1.20);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
push();
fill(255);
translate(150, 80);
scale(0.7);
rotate(radians(mouseX));
ellipse(0, 0, 5, 20);
rotate(radians(mouseX+5));
ellipse(0, 0, 20, 5);
pop();
}
t = mouseX*(PI/600);
//panda figure
noStroke();
fill(0);//ears
ellipse(70, 200, 80,80);
ellipse(230, 200, 80,80);
ellipse(150, 400, 280);//body
fill(255);
ellipse(150, 400, 230, 260);//body
fill(0);
ellipse(150, 340, 0.3*mouseX, 130); // patch on body chnage with mouseX
fill(255);
ellipse(150, 240, 190);//face
//eye rotating with size depending on mouseY
fill(0);
push();
translate(110, 223);
rotate(radians(angle));
ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
pop();
push();
translate(190 , 223);
rotate(radians(angle));
ellipse(5, 5, 5+mouseY/22 , 10+mouseY/14);
pop();
angle += 5;
//face smile when mouse comes with bamboo shoot
if(mouseX>30 & mouseX<=200 && mouseY>=180&& mouseY<=310){
fill(242, 120, 120);
ellipse(110, 250, 20);
ellipse(190, 250, 20);
fill(245, 80, 70);
arc(150, 260, 50, 50, 0, PI);
}
else{ // general smile and nose
fill(0);
beginShape();
curveVertex(150, 180);
curveVertex(130, 270);
curveVertex(170, 270);
curveVertex(130, 190);
endShape();
noFill();
stroke(0);
strokeWeight(3);
arc(138, 280, 25, 20, 0, PI);
arc(161, 280, 25, 20, 0, PI);
}
//bamboo for mouse
noStroke();
fill(20, 220, 100);
rect(mouseX, mouseY, 10, 50);
fill(20, 250, 100);
rect(mouseX, mouseY+55, 10, 20);
fill(10, 220, 20);
push();
translate(mouseX + 25, mouseY + 10);
rotate(radians(-20));
ellipse(0, 0, 15, 5);
ellipse(0, 15, 15, 5);
pop();
}
Looking Outwards – 3
Neri Oxman and MIT developed a collection of Programmable Water-Based Biocomposites for Digital Design and Fabrication across Scales called Aguahoja. This is a project that explored how natural materials that have been put to waste by humans can be digitally designed and computationally fabricated by 3D printers or other robots. Through this project, Oxman and her team hoped to develop a solution to the vicious cycle of material extraction and obsolescence through the creation of biopolymer composites.
This collection is digitally designed and computationally fabricated by 3D printers or other robots made with available materials on earth- materials within trees, insect exoskeletons , apples, and bones- in hopes of avoiding depleting more of Earth’s materials.
https://www.media.mit.edu/projects/aguahoja/overview/
I admire this project for its mindfulness towards the environment and the effort and dedication that has been put into creating each piece and subpart in order to think of a more sustainable tomorrow
Project 2 – Variable Face
//Aadya Bhartia
//Section A
//global variables
var circOp = 150;
var circR = 100;
var faceH = 220;
var faceW = 250;
var eyeWhite = 7;
var mouth = 80;
var blushH = 10;
var earring = 15;
var hairL = 200;
var r = 120;
var g = 120;
var b = 120;
var body = 400;
var ctr = 2;// using a counter for different expressions
function setup() {
createCanvas(600, 480);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
background(84,117,120);
noStroke();
//background circles
fill(62, 140, 220, circOp);//varying circle opacity
ellipse(20,20,circR);
ellipse(560,300,circR);
ellipse(140,270,circR);
ellipse(390,100,circR);
ellipse(500,500,circR);
ellipse(80,4800,circR);
ellipse(80,500,circR);
ellipse(560,30,circR);
//hair
fill(81, 65, 47);
ellipse(302,200, faceW + 90, faceH + 85);
rect(257 - faceW/2, 210, faceW+89, hairL);
//neck
fill(211, 200, 190);
rect(260,250,80,150);
//face
fill(241, 230, 218);
ellipse(300, 210, faceW, faceH);
//fringe
fill(81, 65, 47);
beginShape();
curveVertex(220, 100);
curveVertex(220, 100);
curveVertex(260, 150);
curveVertex(350, 155);
curveVertex(400, 250);
curveVertex(400, 300);
curveVertex(450, 200);
curveVertex(400, 100);
curveVertex(300, 70);
curveVertex(250, 85);
curveVertex(220, 100);
endShape();
//eyes
fill(80);
ellipse(300+50, 200, 20);
ellipse(300-50, 200, 20);
fill(255);
ellipse(300+45, 202, eyeWhite);
ellipse(300-55, 202, eyeWhite);
//blush
fill(250, 154, 120, 100);
ellipse(300-50, 230, 50, blushH);
ellipse(300+50, 230, 50, blushH);
//glass - do not change
stroke(87, 120, 135);
strokeWeight(4);
noFill();
ellipse(300 - 50, 200, 60);
ellipse(300 + 50, 200, 60);
arc(300, 200, 40, 40, PI, TWO_PI);
//hoop colour changing
strokeWeight(2.5);
stroke(r, g, b);
ellipse(305 - faceW/2, 245,15, 30);
//different mouth expressions
if (ctr == 1) {
// draw a frown
stroke(150, 50, 50);
strokeWeight(4);
arc(300, 280, 100, 60, PI, TWO_PI);
}
else if (ctr == 2){
// draw a happy face
stroke(150, 50, 50);
strokeWeight(4);
arc(300, 260, 100, 60, 0, PI);
}
else {
// draw a straight face
stroke(150, 50, 50);
strokeWeight(4);
line(250, 280, 350, 280);
}
//clothes
noStroke();
fill(240, 130, 150);
rect(250, 350, 100, 20);
ellipse(300, 650, body, 600)
}
function mousePressed(){
circOp = random(50,220);
faceW = random(200,250);
faceH = random(200,270);
hairL = random(180,270);
circR = random(30,300);
eyeWhite = random(2,10);
blushH = random(5, 15);
r = random(10,200);
g = random(10,200);
b = random(10,200);
ctr = int(random(1,4));
body = random(250, 400);
}
Looking Outwards – 2
“Quantum Fluctuations: Experiments in Flux,” is a generative art work by artist Markos Kay. The artwork is a collaboration between him and scientists at the CERN research institute in Geneva. Kay aims to represent the quantum world through art and technology, therefore, visualizing processes which otherwise cannot be seen by bare eyes. Kay aims to “measure the spoils of a proton collision and compares the findings with data collected from supercomputer simulations.”
These complex and gorgeous combinations attracted me because there was a language between both Kay and the quantums, almost questioning who the real artist is. Along with that I appreciate how Kay was able to depict so beautifully something the man would most likely never see.
http://www.mrkism.com/quantum.html