Final Project

For my project I created a game to raise awareness towards mask wearing so the person is trying to move through covid particles to reach the mask. And basically gets saved if he does so without colliding with a covid body. If you reach the mask, the words, “You were saved show up” while if you collide with a cover particle it says, “You’ve been infected, happy recovery!”
If I had more time I would have implemented multiple levels where the speed of the covid particles begin to vary making it more difficult and instead of a generic score the levels would be how many months you have gone without being infected. Thus, again endorsing mask wearing as a norm.


//Aadya Bhartia
//Section A 

/* The objective of the game is for the user to reach the mask and to
avoid the covid particles! Once you reach the mask you win the game and if you 
bang into a particle you lose. The purpose of the game is to encourage mask wearing 

var mask;//parameter for object creation
var rad = 40; // for size of covid particle 
var personX;
var personY;
//array to store covid symbols 
var covidX = [];
var covidY = [];
var dx = [];
var dy = [];
//variables to store images 
var covid;
var person;
var maskImg;

function preload(){
    //preloading images 
	covid = loadImage("");
    person = loadImage("");
    maskImg = loadImage("");

function setup() {
    createCanvas(500, 500);
    //storing covid particles random x and position as well as speed 
    for(var i = 0; i<15; i++){
    	covidX[i] = random(width);
        covidY[i] = random(height);
        dx[i] = random(-5,5);
        dy[i] = random(-5,5);
    mask = makeMask();
    //text formatting
    textFont('New Roman');

function draw() {
	//constraining mouse within canvas 
    var x = constrain(mouseX, 0, width-10);
	var y = constrain(mouseY, 0, height-10);
    //displaying mask and checking if person has touched maks;

	for(var i = 0; i<10; i++){
    	image(covid, covidX[i], covidY[i], rad, rad);
        covidX[i] += dx[i];
        covidY[i] += dy[i];
        //to bounce covid particles off the sides 
        if(covidX[i] >= (width) || covidX[i] <= 0){
            dx[i] = -1*dx[i];
        if(covidY[i] >= (height) || covidY[i] <= 0){
            dy[i] = -1*dy[i];
        //when person bangs into covid particle 
        if(covidY[i]> y-15  & covidY[i]< y+15 ){
            if(covidX[i]> x-15  && covidX[i]< x+15 ){
    //displaying mouse as person
    image(person,x, y, 60,100);

//displaying mask
function maskDisplay(){
    image(maskImg, this.x, this.y, 60,60);

//game won if person reaches the maks 
function achieved(){
    var d = dist(mouseX, mouseY, this.x, this.y);

function makeMask(){
    var m = {x : random(30, width-30),
             y : random(30, height-30),
             show : maskDisplay, check : achieved}
    return m;
//message for when game has been lost 
function finishGame(){
    text("You've been infected, happy recovery!", width/2, height/2);
//message for when game has been won
function wonGame(){
    text("YOU WERE SAVED!!!", width/2, height/2);

Project: 11

I really enjoyed creating this even though it took me a while to understand objects, I feel the birds and pagoda along with the colour tones were extremely soothing!


//Aadya BHartia
//Section A 

/* the program shows a river and mountains as well as pagodas, the birds and pagodas along with the 
variation in landscape help the visuals become more interesting and dynamic */

//variables to store colurs
var c1;
var c2;
//storing birds in an array 
var birds = [];
//pagoda in an array
var pagodas = [];
//water speed
var waterSpeed = 0.0001;

function setup() {
    createCanvas(400, 400);
    c1 = color(218, 239, 252);
    c2 = color(240, 198, 196);
    //create an initial collection of birds
    for(var i = 0; i<5; i++){
    	var birdX = random(width);
    	var birdY = random(0, height/3);
    	birds[i] = drawBird(birdX, birdY);
    //create an initial collection of pagodas 
    for(var k = 0; k<2; k++){
    	var pagodaX = random(width);
    	var pagodaY = random(250, 300); 
    	pagodas[k] = drawPagoda(pagodaX, pagodaY);

function draw() {
	gradient(c1, c2);
	drawMountain2(); //background mountains 
	drawMountain();//foreground mountains 
	//pagoda update functions 
	//water level
	//birds in the sky

//background gradient from blue to light orange 
function gradient(c1,c2){
	for(var i = 0; i<height; i++){
		var a = map(i, 0, height, 0, 1);
		var c = lerpColor(c1,c2,a);
		line(0, i, width, i);	
//function to display water in foreground 
function drawWater(){
	var water1 = 0.001;
	var speedW1 = 0.0003;
	fill(189, 210, 222);
	for(var i = 0; i<width; i++){
		var x = i*water1 + millis()*speedW1;
		var y = map(noise(x), 0, 1, 260, 300);
		vertex(i, y);
	vertex(width, height);
	vertex(0, height);
function drawWater2(){
	//function to display second shade water in foreground  
	var water2 = 0.001;
	var speedW2 = 0.0001;
	fill(163, 198, 218);
	for(var i = 0; i<width; i++){
		var x = i*water2 + millis()*speedW2;
		var y = map(noise(x), 0, 1, 290, 350);
		vertex(i, y);
	vertex(width, height);
	vertex(0, height);
function drawMountain(){
	var mount1 = 0.014;
	var speedM1 = 0.0008;
	//foreground mountain
	stroke(249, 224, 226); 
	for(var i = 0; i<width; i++){
		var x = i*mount1 + millis()*speedM1;
		var y = map(noise(x), 0,1.5,height/6, height);
		line(i, y, i, height);
	//shading for foreground mountain 
	for(var k = width/2; k<4*width/5; k++){
		var z = map(k, width/2,4*width/5,0, 255);
		stroke(246, 188, 192,z);
		line(0, k, width, k);
function drawMountain2(){
	var mount2 = 0.009;
	var speedM2 = 0.001;
	//background mountain
	stroke(246, 188, 192); 
	for(var i = 0; i<width; i++){
		var x = i*mount2 + millis()*speedM2;
		var y = map(noise(x), 0,1.5,20, 2*height/3);
		line(i, y, i, height);
	//shading for background mountain	
	for(var k = width/4; k<2*width/3; k++){
		var z = map(k, width/4,2*width/3,0, 255);
		stroke(249, 224, 226,z);
		line(0, k, width, k);

function pagodaMove(){
	//update speed of every pagoda 
	this.x1 -= this.speed; 
function pagodaMake(){
	//making the pagoda 
	line(this.x1, (this.y1+50) , this.x1, (this.y1-40));
	line(this.x1+30, (this.y1+50) , this.x1 +30, (this.y1-40));
	line(this.x1, (this.y1-35), this.x1+30, (this.y1-35));
	line(this.x1-5, (this.y1-42), this.x1+35, (this.y1-42));
function pagodaUpdate(){
	// Update the pagodas's positions, and display them.
	for(var i = 0; i< pagodas.length; i++){
function pagodaAppear(){
	//with a tiny probablilty adding pagodas 
		var pagodaX = width; 
		var pagodaY = random(250, 300 ); 
		pagodas.push(drawPagoda(pagodaX, pagodaY));
function pagodaDisappear(){
	//removing pagodas which have reached the edge 
	var pagodasKeep = [];
	for(var i = 0; i<pagodas.length; i++){
		if(pagodas[i].x1 + pagodas[i].bredth > 0){
	pagodas = pagodasKeep;
function drawPagoda(pagodaX, pagodaY){
	var pagoda = { x1: pagodaX, y1: pagodaY, 
		speed: 4, bredth: 30,
		shift: pagodaMove, display: pagodaMake}
	return pagoda;	

function drawBird(birdX, birdY){
	var bird = { x: birdX, y: birdY, 
		velocity: random(4,8), size: random(6,10),
		move: birdMove, show: birdMake}
	return bird;	

function birdMove(){
	//update speed of every birds 
	this.x -= this.velocity; 
	this.y -= this.velocity/random(5,10);
function birdMake(){
	arc(this.x, this.y, this.size, this. size/2, PI, TWO_PI);
	arc(this.x+ this.size, this.y, this.size, this. size/2 ,PI, TWO_PI);
function birdUpdate(){
	// Update the birds's positions, and display them.
	for(var i = 0; i< birds.length; i++){
function birdAppear(){
	//with a tiny probablilty adding birds 
		var birdX = width; 
		var birdY = random(0, height/3 ); 
		birds.push(drawBird(birdX, birdY));
function birdDisappear(){
	//removing birds which have reached the edge 
	var birdsKeep = [];
	for(var i = 0; i<birds.length; i++){
		if(birds[i].x + birds[i].size > 0){
	birds = birdsKeep;

Looking Outwards: 11

Jenny Sabin is an American architect, designer, artist, a professor in Cornell AAP, and an experimental architect with her own studio based in Ithaca, NY. Her design focuses on cutting-edge technologies and emphasizes computational design, data, visualization, and digital fabrication.


Lumen (2017) by Jenny Sabin is a digitally fabricated architectural work that won the 2017 Museum of Modern Art’s PS1 Young Architect’s Program. The socially and environmentally responsive structure is made of a lightweight knitted fabric that adapts to the densities of bodies, heat, and sunlight. Lumen is a feminine form that offers luminous interiorities, informal networks, social fabrics, and fibrous assemblages that are pliable, transformative, and playful.

I found Jenny’s work particularly interesting as in my architecture studio we are currently working with environmentally responsive structures with algae and this related back to it perfectly and now I am using this particular project as a precedent for my design.

Project : 10

For this project I decided to create the view of a campsite from sunrise to sunset with people, the bonfire, a tent, clouds stars and of course some singing! For the sounds I did try to make them overlap a little so that it sounds more interesting when played.

//Aadya Bhartia 
//Section A 

/*Through my sonic story I wanted to show a view of a campsite where you hear
the birds in the morning and the the head comes to wake you up and then some 
music and bonfire in the evening followed by a lullaby*/

//varibales for sounds 
var bird;
var wakeUp;
var tent;
var guitar;
var bonfire;
var lullaby;
//to store the images 
var Sceneimage = [];
function preload() {
    // call loadImage() and loadSound() for all media files here
    var filenames = [];
    filenames[0] = "";
    filenames[1] = "";
    filenames[2] = "";
    filenames[3] = "";
    filenames[4] = "";
    filenames[5] = "";
    filenames[6] = "";
    filenames[7] = "";
    filenames[8] = "";
    filenames[9] = "";
    //loading images into the array 
    for (var i = 0; i < filenames.length; i++) {
        Sceneimage[i] = loadImage(filenames[i]);
    //load sounds 
    bird = loadSound("");
    wakeUp = loadSound("");
    tent = loadSound("");
    guitar = loadSound("");
    bonfire = loadSound("");
    lullaby = loadSound("");

function setup() {
    createCanvas(614, 345);
function soundSetup() { // setup for audio generation, chnaging volumes 
function draw() {
    //sun rising 
    if(frameCount>=0 & frameCount< 4){
        image(Sceneimage[0], 0,0, 614, 345);;
    //sun up and clouds come in 
    if(frameCount>=4 & frameCount< 8){
        image(Sceneimage[1], 0,0, 614, 345);
        //creating a cloud animation for the different frames 
        if(frameCount== 4){
            image(Sceneimage[9], 0,0, 614, 345);
        if(frameCount== 5){
            image(Sceneimage[9], width/4,0, 614, 345);
        if(frameCount== 6){
            image(Sceneimage[9], width/2,0, 614, 345);
        if(frameCount== 7){
            image(Sceneimage[9], (3*width/4),0, 614, 345);
    //head comes to wake up 
    if(frameCount>=9 & frameCount< 11){
        image(Sceneimage[2], 0,0, 614, 345);;
    //tent open and girls head pops out 
    if(frameCount>=11 & frameCount< 12){
        image(Sceneimage[3], 0,0, 614, 345);;
    //couple playing the guitar 
    if(frameCount>=12 & frameCount< 17){
        image(Sceneimage[4], 0,0, 614, 345);;
    //fire lights up
    if(frameCount>=17 & frameCount< 20){
        image(Sceneimage[5], 0,0, 614, 345);;
    //fire becomes bigger 
    if(frameCount>=20 & frameCount< 25){
        image(Sceneimage[6], 0,0, 614, 345);;;
    //head comes to say time to go to bed 
    if(frameCount>=25 & frameCount< 28){
        image(Sceneimage[7], 0,0, 614, 345);
    //lullaby and stars 
    if(frameCount>=28 & frameCount< 40){
        image(Sceneimage[8], 0,0, 614, 345);;
        //creating jittering stars at night 
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));       
//star code from class lecture : 14 
function star(a,b){
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    fill(255, 255, 0);
    scale(random(0.1,0.5));//scaling the stars at random
    for (var i = 0; i < nPoints; i++) {
    vertex( (x[i]) + random(-3,3), (y[i]) + random(-3,3) ); //random creates jitter effect

Looking Outwards : 10

Weather Thingy by Adrien Kaeser is a project that uses a sound controller that takes weather and climate events and then modifies them into musical notes and the sounds they make.

This real time instrument is made up of two parts, a weather station on a tripod microphone and a custom built controller connected to the weather station. The controller has sensors that collect data from the climate it is in and the controller interprets the data to create different sounds. The machine can collect sophisticated weather data by means of a rain gauge, a wind vane and an anemometer. The user then uses the interface to choose what sensor he is working with and uses a potentiometer to modify the data and create different sounds.

I found this project particularly interesting because of its presence in real time and its ability to act as a diary. It is also possible to use the device in the studio by pre-recording the climate data of a certain place at a certain time. This allows the musicians to capture moments that he/she have found inspiring to create new melodies. I can see the potential of using this to study climate change and begin to review the effects over time.

Project : 09

For this project I decided to create a clearer perception of the image of my aunt for the portrait and the background would start to fade away. Therefore I used smaller rectangles for the main portrait and bigger ones for the background. I also wanted to add a few interactive features so when the mouse is pressed the rectangles become bigger and rotate and when the mouse is moved around the canvas words that describe my aunt start to show up on the screen.

A couple minutes into the animation
Image almost complete without mouse being pressed or on canvas
Image with words being displayed as the mouse is moved around screen
Image with mouse pressed

//Aadya Bhartia
//Section A 

/*The program begins to create more details with smaller rectangles for the main portrait and bigger 
rectnagles for the background. When the mouse is pressed the rectnagles rotated and scaled and when the mouse 
is moved around the screen words that describe my aunt in the portrait show up */

var port = 20; //global avriable to help determine size of portraitwhich is in focus
var img;
var word = ['artist','ritika','mom','loving','fasion']; //words displayed when mouse is on canvas
function preload(){
	var imgURL = "" ;
	img = loadImage(imgURL);

function setup() {
    createCanvas(400, 340);
    img.loadPixels(); //loading pixels from image
function draw() {
	var px = random(width); //x position of rectangles 
	var py = random(height); //y position of rectangles
	var cx = constrain(floor(px), 0, width-1);
	var cy = constrain(floor(py), 0, height-1);
	//colour at current pixel 
	var positionColour = img.get(cx, cy);
	//colour at mouse position 
	var mouseColour = img.get(mouseX, mouseY);
	//varying width of rectangle based on brightness at current pixel 
	var rectL = map(brightness(positionColour),0,200,0,20);
	if(mouseIsPressed){ //when mouse is pressed rectangles becomes twice the size at rotate at 90 degrees 
		fill(positionColour); //setting fill to colour at that pixel
	//for the main portrait the rectangles are smaller while for the background they ae bigger
		if(px > port*4 & px < port*15 && py> port && py < (height- port*2)){ //setting position of the portrait 
			strokeWeight(0.1);//very thin stroke to emphasizse the portrait 
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			rect(px,py,rectL/2,4); //making rectnagles smaller 
		//for the background 
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			fill(positionColour); //fill based on colour at curent pixel location
	//text is displayed based on mouse position and colour
	fill(mouseColour); //text colour based on pixel colour at current location
	text(random(word), mouseX, mouseY); //sectiong random text from arrray and displayiong at mouse position

Looking Outwards : 09

The Looking Outwards from week 4 was about sound art and I am extremely interested in how sound is being visualised today within generative art practices. Nick Wong’s LO on Nanotak Studio’s Daydream was extremely fascinating for me. Although the idea of adding sound visualisation has recently become prevalent in art and design. It does start to allow for a more immersive experience. This installation aimed at establishing a physical connection between the virtual space and the real space, blurring the limits and submerging the audience into a short detachment from reality. Lights generate abstract spaces while sounds define the echoes of virtual spaces. Daydream is an invitation to contemplation, and the frontality of the installation leads the visitors to a passive position, almost overwhelming them with the audiovisual effects. I definitely feel Nick could have added a video which would have helped me better understand the project at first glance.

Nick Wong’s Looking Outwards 4 on 27th September, 2020.

Looking Outwards : 08

Meejin Yoon is an architect and designer, and has been recently appointed as the Dean of Architecture at Cornell University. She graduated from the same with a Bachelor in Architecture, and then completed her graduate studies at Harvard’s GSD. Her work focuses on the intersection between space, technology, and materiality, and is most often acclaimed for its innovative and engaging characteristics.

Yoon’s consideration towards public engagement in her projects, makes them more interactive as she prioritizes human engagement within different spatial qualities of architecture. Working at the intersection of architecture, art, landscape and technology, Yoon’s innovative and interactive light and sound installations across the United States for public spaces often incorporate alternative energy sources, therefore, putting them at the forefront of each of these fields. 

During her talk at the Eyeo Festival, she focuses on her projects regarding interactive public spaces– especially topics such as responsive and interactive technology, smart materials, and the public engagement process. As an Architecture student myself, I found her talk interesting as she began to break down these vast topics into simpler bits, focusing primarily on projects which utilize technology in depth.  Examples of her own work and the process she used as well as the iterations made, helped clearly explain her design objectives.

Project : 07

sketch For this project, I decided to use three different kinds of curves and represent them in different ways in order to create an interesting hierarchy of visuals and different point on the canvas.
//Aadya Bhartia
//Section A 

/*The code aims to use three main types of curves and modify them based on the X and Y position the mouse
Each set of curves are represented in different ways making the code more visually interesting */

var angle = 0;
var numP = 10000;

function setup() {
    createCanvas(480, 480);

function draw() {
	background(245, 211, 200);
	var midX = width/2;
	var midY = height/2;
	var currentX = constrain(mouseX, 0, midX);
	var currentY = constrain(mouseY, 0, midY);
	translate(midX, midY); //transa;lting origin to centre of canvas 
	var m = map(constrain(mouseX, 0, width), 0, width, 0,width/60);
	angle +=mouseY/4; // making the set of curves rotate based on mouse position
//Rose rhodonea curve set mapped with rectangles
function drawRose(m){
	fill(2, 58, 80); //dark blue 
	var roseW = 18;
	for(var i = 0; i < numP/10;i++){ // reducing density of points 
		var roseMap = map(i, 0, numP/10, 0, TWO_PI);
		//The design chnages based on MouseX 
		var n = int(map(mouseX, 0, width, 1, width/15));
		var radius = -m*cos(n*roseMap);
		var x = roseW*radius*cos(roseMap);
		var y = roseW*radius*sin(roseMap);
		rect(x-1,y-1,4,4); // makinf the shape out of smaller rectangles instead of curves 
// Hypotrochoid curve set 1
function drawHypotrochoid1(currentX,currentY){
	var a = 5;
	for(var k = 0;k<=PI*2;k+= PI/10){
		for(var i = 0; i<width/40;i++){
			//every alternate stroke uses a different shade of blue 
			if(i%2 == 0){
				stroke(3, 168, 155);
				stroke(188, 248, 236 );
			ellipse(currentX + a*i, currentY + a*i, 2*mouseX/2, 2*mouseY/2);
// Hypotrochoid curve set 2
function drawHypotrochoid2(){
	stroke(115, 75, 94); //maroon
	var hypoMapY = map(mouseY, 0 , height, 0, width/4); //curve shape evolves based on Mouse Y 
	//Mouse X controls the size of the curve 
	var a = map(constrain(mouseX,0,width), 0 , width , 0, width/2);
	var b = a/20;
	for(var i = 0; i<numP; i++){
		var hypoMap = map(i,0,100,0,PI);
		var x = (a - b) * cos(hypoMap)+ hypoMapY* cos(((a-b)/b)*hypoMap);
		var y = (a-b) * sin(hypoMap) - hypoMapY * sin(((a - b)/b)*hypoMap);

Looking Outwards : 07

Conceived by Refik Anadol Studio “Melting Memories” offers new insights into the representational possibilities emerging from the intersection of advanced technology and contemporary art. A series of artworks are created by visualising different EEG(electroencephalogram) data collected. By representing the EEG data gives it a tactility that emphasises the materiality of memory. EEG data measures changes in brain wave activity and provides evidence of how the brain functions over time.

Anadol showcases his creative vision of “recollection” by translating the elusive process of memory retrieval into data collections. Melting Memories provides the viewer with revealing and contemplative works through the augmented data sculptures and light projections.

I find the way in which he broke down the various components of EEG data to produce these magnificent drawings which start to take on organic forms is fascinating. And how the title too relates back to the artists own experience with unexpected interconnections among seminal philosophical works, academic inquiries and artworks that take memory as their principal themes.