## Aysha’s Avatar

For this project, we were supposed to use coding to make a portrait of ourselves, or other versions of ourselves (cartoon, anime, avatars, etc). I call her Avatar Aysha.

I started off with a simple sketch for my simple portrait. I just wanted it to be an avatar that I could play with in a video game. I think that growing up, I got used to my xbox avatar, which is where I got some of my inspiration from.

This is my avatar in her NYUAD violet T-shirt. It may not look on camera, but my eye color matches both my eyebrow and hair color so I added that to my portrait. I  would also NEVER forget my glasses. I added some freckles, nostrils, and teeth.

I also wanted to add a simple interaction for the sake of experimenting and having fun. By pressing the keys from 1-7, a background from NYUAD campus appears, considering we’re all in quarantine :(. Choose your background and say cheese!

Here’s a simple demonstration.

This project really helped me improve my visual skills and visual imagination. At the beginning, I  mainly struggled with drawing a line and with the function beginShape(). I mostly nailed the shapes by multiple trial and errors. However, later on, with enough practice I started to understand the x and y axes and their four quadrants. Moreover, creating the nostrils was a challenge for me as I needed to fully understand the angles in radians for the arcs. I also learned new functions such as arc(), strokeWeight(), beginShape() and endShape().

Personally, “Find in Reference” was a life-saver. I was also often inspired from the processing website itself, and its option for finding “related” functions.

Overall, I had so much fun doing this assignment! Hopefully more is yet to come!

This is my code!

```int x;
int y;

void setup(){
size(640, 480);
x = width/2;
y = height/2;
PImage img;
img.resize(640, 480);
background(img);
}

void draw(){

//hair:
fill(203, 105, 0);
noStroke();
beginShape();
vertex(x+70, y-175);
vertex(x+40, y-185);
vertex(x-130, y-130);
vertex(x-190, y+150);
vertex(x-160, y+110);
vertex(x-180, y+190);
vertex(x+180, y+190);
vertex(x+160, y+110);
vertex(x+190, y+150);
vertex(x+130, y-140);
vertex(x+70, y-175);
endShape ();

//neck:
fill(255,224,189);
stroke(0,50,50,70);
beginShape();
vertex(x+33, y+130);
vertex(x+22, y+170);
vertex(x+35, y+200);
vertex(x+5, y+205);
vertex(x-35, y+200);
vertex(x-22, y+170);
vertex(x-33, y+130);
endShape();

noStroke();
fill(176, 101, 193);
beginShape();
vertex(x-35, y+200);
vertex(x-110, y+197);
vertex(x-125, y+250);
vertex(x+125, y+250);
vertex(x+110, y+197);
vertex(x+35, y+200);
endShape();

//Face:
stroke(0,50,50,40);
fill(255,224,189);
ellipse(x, y, 230, 270);

//Eyes:
noStroke();
fill(255);
ellipse( x-52.5, y-50, 40, 25);
ellipse( x+52.5, y-50, 40, 25);
noStroke();
fill(203, 105, 0);
ellipse( x-52.5, y-50, 22.5, 24);
ellipse( x+52.5, y-50, 22.5, 24);

//eyebrows:
strokeWeight(7);
stroke(203, 105, 0);
line(x+30, y-87, x+75, y-82);
line(x-30, y-87, x-75, y-82);

//glasses:
noFill();
strokeWeight(1);
stroke(116,70, 25, 1000);
ellipse( x-52.5, y-52.5, 80, 70);
ellipse( x+52.5, y-52.5, 80, 70);
line(x-15, y-50, x+15, y-50);

//nose and nostrils:
strokeWeight(2);
stroke(234,192,134, 1000);
line(x-10, y+10, x-6, y-20);
line(x+10, y+10, x+6, y-20);
stroke(234,192,134, 1000);
noFill();
arc(x-6, y+10, 21, 21, HALF_PI, PI);
arc(x+6, y+10, 21, 21,  0, HALF_PI);

//mouth:
noStroke();
fill(229, 65, 65);
arc(x, y+53, 100, 65, 0, PI, CHORD);

//teeth:
fill(255);
rect(x-40, y+53, 80, 9);

//freckles:
noStroke();
fill(242, 143, 44);
//right side
ellipse(x+51, y+10, 4.5, 4.5);
ellipse(x+41, y+5, 4.5, 4.5);
ellipse(x+52, y+1, 4.5, 4.5);
ellipse(x+63, y+5, 4.5, 4.5);
ellipse(x+63, y+15, 4.5, 4.5);

//leftside
ellipse(x-51, y+10, 4.5, 4.5);
ellipse(x-41, y+5, 4.5, 4.5);
ellipse(x-52, y+1, 4.5, 4.5);
ellipse(x-63, y+5, 4.5, 4.5);
ellipse(x-63, y+15, 4.5, 4.5);

}

//You are welcome to change you're background, ready? cheese!!! Press 1-7
void keyPressed(){
if (key == '1') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '2') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '3') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '4') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '5') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '6') {
PImage img;
img.resize(640, 480);
background(img);
}
if (key == '7') {
PImage img;
img.resize(640, 480);
background(img);
}
}
```

## Serial Communication Project: Abu Dhabi From Day to Night

For this week’s assignment, we were asked to create a project that combines both Arduino and Processing by allowing them to perform a serial “handshake”.

To do this, I used my OOP processing project and replaced the mouse interaction with a rotary potentiometer. This was, for the most part, easy to do. We completed an in-class example where we controlled a basic ellipse shape across the X-axis as well, and I was surprised that I could apply the same simple code (with a few minor tweaks) to a processing sketch that was a bit more complex, without breaking the code.

Here is a video demonstration:

I created a box for the potentiometer, in an attempt to make it a little bit more visually appealing.

Here’s my code:

Arduino:

```void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
Serial.println('0');
}

void loop() {
if(Serial.available()>0){
delay(0);
Serial.println(sensor);

}
}```

Processing:

```//arrayList to hold all stars
ArrayList<Star> stars = new ArrayList<Star>();

import processing.serial.*;
Serial myPort;
int xPos=0;
int State = 0;
//instantiate new moon object
Moon moon = new Moon();
int modifier;
float raindrop;
int red, green, blue;

void setup()
{
size(585,430);
background(0);
raindrop= 0;

printArray(Serial.list());
String portname=Serial.list()[1];
println(portname);
myPort = new Serial(this,portname,9600);
myPort.clear();
//myPort.bufferUntil('\n');

//generate 30 random stars
for (int i = 0; i < 30; i++)
{
//adds them to star ArrayList for easy access
}
}

void draw()
{

//move raindrop down screen
raindrop = raindrop + 4; //speed

//if raindrop falls below canvas, reset to zero
if (raindrop >= height)
raindrop = 0;

//map xPos to rgb values of background
red = int(map(xPos, 0, width, 83, 0));
green = int(map(xPos, 0, width, 157, 0));
blue = int(map(xPos, 0, width, 253, 0));

modifier = int(map(xPos, width/2, width, 29, 0));

background(red, green, blue);

if (xPos > width/2)
{
for (int i = 0; i < stars.size() - modifier; i++)
{
Star s = stars.get(i);
s.drawStar();
}
}

moon.update();
moon.drawMoon();
//rainfall

fill(211,211,211);
rect(10, raindrop, 2, 5);
rect(50, raindrop+20, 2, 5);
rect(80, raindrop, 2, 5);
rect(110, raindrop+100, 2, 5);
rect(140, raindrop+150,2, 5);
rect(180, raindrop-200, 2, 5);
rect(200, raindrop-150, 2, 5);
rect(240, raindrop-50, 2, 5);
rect(240, raindrop, 2, 5);
rect(300, raindrop+20, 2, 5);
rect(440, raindrop, 2, 5);
rect(440, raindrop, 2, 5);
rect(550, raindrop+100, 2, 5);
rect(530, raindrop-250, 2, 5);
rect(530, raindrop-200, 2, 5);
rect(580, raindrop-300, 2, 5);
rect(300, raindrop-400, 2, 5);
rect(140, raindrop-350, 2, 5);
rect(400, raindrop-300, 2, 5);
rect(400, raindrop-250, 2, 5);
rect(400, raindrop-200, 2, 5);
rect(550, raindrop, 2, 5);

//this part of my code uses & adapts from "skyline" by Shiwen Qin on OpenProcessing

//building 1
fill(250);
rect(35,255,5,55);
fill(250);
rect(40,250,40,60);
fill(51, 51, 51);
fill(106,106,71);
for (int y=258; y<310; y+=8){
fill(106,106,71);
rect(36,y,2,2);
}
for (int y=258; y<300;y+=10){
for(int x=44; x<78; x+=10){
fill(106,106,71);
rect(x,y,3,3);
}
}

//building 2
fill(51, 51, 51);
rect(93,265,40,60);
for (int y=270; y<300;y+=10){
for(int x=96; x<130; x+=10){
fill(165,160,102);
rect(x,y,5,3);
}
}

//building 3
fill(220,220,220);
rect(150,225,15,120);
fill(220,220,220);
rect(164,215,10,140,6);
fill(169,169,169);
rect(166,218,2,140,7);
fill(105,105,105);
arc(170,250,70,70,-PI/2,0);
rect(170,250,35,140);
fill(192,192,192);
arc(170,250,60,60,-PI/2,0);
rect(170,250,30,140);
fill(192,192,192);
arc(170,250,40,40,-PI/2,0);
rect(170,250,20,140);

//fourth building
fill(250);
fill(250);
rect(235,225,5,75);
fill(250);
rect(240,225,40,80);
fill(106,106,71);
for (int y=258; y<310; y+=8){
fill(106,106,71);
rect(236,y,2,2);
}
for (int y=258; y<300;y+=10){
for(int x=244; x<278; x+=10){
fill(106,106,71);
rect(x,y,3,3);
}
}

// fifth building
fill(102, 102, 102);
rect(300,185,36,120);
fill (51, 51, 51);
rect (295, 185, 5, 120);
rect (305, 185, 5, 120);

//sixth building
fill(51, 51, 51);
rect(376,172,2,10);
rect(375,180,3,15);
fill(102, 102, 102);
fill(51, 51, 51);
rect(387,215,1,115);
rect(396,215,1,115);

//seventh building
fill(51, 51, 51);
rect(430,200, 40 ,150);
fill(250);
rect(430,200, 40 ,5);
rect(470,200, 2 ,150);

//seventh building .2
fill(192,192,192);
rect(490,200, 40 ,150);
fill(250);
rect(490,200, 40 ,5);
rect(500,200, 2 ,150);

//eighth building
fill(51, 51, 51);
rect(225,225,10,120);
rect(270,225,10,120);
//building 8
arc(540,190,70,70,-PI*4/6,-PI*1/6,CHORD);
for(int y=170;y<325 ;y+=5){
fill(106,106,71);
}

//ninth building
fill(51, 51, 51);
fill(31,30,72);
triangle(614,155,622,158,619,325);
for(int y=210;y<325 ;y+=5){
fill(106,106,71);
}
for(int y=210;y<325 ;y+=5){
fill(64,64,34);
}

//shore
fill(69, 137, 163);
rect(0,310,900,400);

//mangroves, forloop
for(int x=0;x<900;x+=20){
mangroves(x,310,10,10,3,28,5,255);
//varying parameters for mangroves
mangroves(x+10,305,8,8,6,41,8,255);
mangroves(x+5,300,5,4,14,62,17,255);

}
}

void cloud(int x,int y,int w,int h,int red,int green,int blue,int a){
fill(red,green,blue,a);
ellipse(x,y,w,h);
}

//sets variables they're being created in
void mangroves(int x,int y,int w,int h,int red,int green,int blue,int a){
fill(red,green,blue,a);
ellipse(x,y,w,h);
ellipse(x+5,y+5,w,h);
ellipse(x-5,y-3,w,h);
ellipse(x+3,y-5,w,h);
ellipse(x-3,y+5,w,h);
}

void serialEvent(Serial myPort){
s=trim(s);
if (s!=null)
xPos=(int)map(int(s),0,650,0, width); //jere
println(xPos);
myPort.write(State);
}```
```class Moon
{
int x;
int y;
int sizeMod = 0;

Moon()
{
//instantiate moon at x = 60, y = 90
this.x = 60;
this.y = 90;
}

void drawMoon()
{
int blue, green;

//map xPos to green and blue rgb values for moon
green = int(map(xPos, 0, width, 221, 250));
blue = int(map(xPos, 0, width, 0, 205));

noStroke();
fill(255, green, blue);

//map Pos X to rgb values for background/sky
int bg_red = int(map(xPos, 0, width, 83, 0));
int bg_green = int(map(xPos, 0, width, 157, 0));
int bg_blue = int(map(xPos, 0, width, 253, 0));

//map xPos to variable sizeMod, starting at 0, ending at 20
sizeMod = int(map(xPos, 0, width/6, 0, 20));

//width/6 divides canvas into 6, for each moon/sun phase
if (xPos <= width/6)
{
//sizeMod decreases size of moon, starts at 80, ends at 80 - 20 = 60
ellipse(x, y, 80 - sizeMod, 80 - sizeMod);
}
else if (xPos > width/6 && xPos <= 2 * (width/6))
{
arc(x, y, 60, 60, HALF_PI, 3 * HALF_PI, OPEN);
}
else if (xPos > 2 * width/6 && xPos <= 3 * width/6)
{
ellipse(x, y, 60, 60);
//draw two overlapping circles to give illusion of crescent moon
fill(bg_red, bg_green, bg_blue);
ellipse(x + 10, y, 50, 50);
}
else if (xPos > 3 * width/6 && xPos <= 4 * width/6)
{
ellipse(x, y, 60, 60);
//can't figure out how to flip arc, just cover with rectangle
fill(bg_red, bg_green, bg_blue);
rect(x - 30, y - 30, 30, 60);
}
else if (xPos > 4 * width/6 && xPos <= 5 * width/6)
{
ellipse(x, y, 60, 60);
//draw two overlapping circles to give illusion of crescent moon
fill(bg_red, bg_green, bg_blue);
ellipse(x - 10, y, 50, 50);
}
else
{
ellipse(x, y, 60, 60);
}
}

void update()
{
x = xPos;
}
}```
```class Star
{
int x;
int y;

Star()
{
//instantiate star with random x and random y values, every time you restart sketch it' random
this.x = int(random(0, width));
this.y = int(random(0, height/3));
}

void drawStar()
{
fill(255);
ellipse(x, y, -1.5, -1.5);
}
}```

## Recreation on Computer Graphics & Art

For the following exercise, I have chosen to recreate “Structured Square Series — Inwards” featured in Computer Graphics and Art for August, 1976.

In the computer generated art below, the title of the piece gave me the biggest clue of how this operates as well as how the piece was designed. In the piece, the outer layer has total of 8 lines within the box (horizontal, vertical, diagonal [R-L], diagonal [L-R], and four lines triangulating the square  into total of 16 equal triangles. And, as each you approach the middle of all the layers, a line is omitted – when you reach the middle, all the lines are omitted.

So, I have recreated the above artwork using processing and the results are show in the images below. For the recreation process, I have used an ArrayList and an IntList, where the arrayList contains eight arrays of quads that represent the coordinates for the triangulating lines and the IntList containing integers from 0 to 7 to represent the indexes for accessing the arrays in the arrayList.

The inner loop for k runs from k=0 to k=7 with incrementing k for every loop, and I have utilized this with a conditional check depending on the location of the squares. For instance, if the location of the square is at the third layer from the outside, it should have 6 lines drawn – and I was able to do this by adding a conditional statement that it should draw the line when k < 6. This was done for each layer to recreate the art piece correctly. Also, to create the random configuration of strokes, I have used the shuffle function of the IntList to mix the order of the stroke quads for each squares.

A version with added fill color:

<Source Code>

```int w = 40;
int h = 40;
IntList indexes;
ArrayList<int[]> coords;

void setup() {
size(680, 680);
rectMode(CENTER);
coords = new ArrayList<int[]>();
indexes = new IntList();

for (int i = 0; i < 8; i++) {
indexes.append(i);
}

indexes.shuffle();

int[] coords1 = {-15, 0, 15, 0};
int[] coords2 = {-15, 0, 0, -15};
int[] coords3 = {-15, 0, 0, 15};
int[] coords4 = {-15, -15, 15, 15};
int[] coords5 = {0, -15, 0, 15};
int[] coords6 = {0, -15, 15, 0};
int[] coords7 = {0, 15, 15, 0};
int[] coords8 = {15, -15, -15, 15};

}

void draw() {
background(255);
for (int i=0; i < height; i += h) {
for (int j=0; j < width; j += w) {
pushMatrix();
translate(i+w/2, j+h/2);
for(int k = 0; k < 7; k++) {
if (i+w/2 < 40 || j+h/2 < 40 || i+w/2 > 640 || j+h/2 > 640) {
fill(255, 240, 240);
if (k == 0) {
rect(0, 0, 30, 30);
line(-15, 0, 15, 0);
line(-15, 0, 0, -15);
line(-15, 0, 0, 15);
line(-15, -15, 15, 15);
line(0, -15, 0, 15);
line(0, -15, 15, 0);
line(0, 15, 15, 0);
line(15, -15, -15, 15);
}
}
else if (i+w/2 < 80 || j+h/2 < 80 || i+w/2 > 600 || j+h/2 > 600){
fill(255, 210, 210);
if (k == 0) {
rect(0, 0, 30, 30);
}
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
else if (i+w/2 < 120 || j+h/2 < 120 || i+w/2 > 560 || j+h/2 > 560){
fill(255, 180, 180);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 6) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else if (i+w/2 < 160 || j+h/2 < 160 || i+w/2 > 520 || j+h/2 > 520){
fill(255, 150, 150);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 5) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else if (i+w/2 < 200 || j+h/2 < 200 || i+w/2 > 480 || j+h/2 > 480){
fill(255, 120, 120);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 4) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else if (i+w/2 < 240 || j+h/2 < 240 || i+w/2 > 440 || j+h/2 > 440){
fill(255, 90, 90);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 3) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else if (i+w/2 < 280 || j+h/2 < 280 || i+w/2 > 400 || j+h/2 > 400){
fill(255, 60, 60);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 2) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else if (i+w/2 < 320 || j+h/2 < 320 || i+w/2 > 360 || j+h/2 > 360){
fill(255, 30, 30);
if (k == 0) {
rect(0, 0, 30, 30);
}
if (k < 1) {
int coordArr[] = coords.get(indexes.get(k));
line(coordArr[0], coordArr[1], coordArr[2], coordArr[3]);
}
}
else
{
fill(255, 0, 0);
rect(0, 0, 30, 30);
}
}
indexes.shuffle();
popMatrix();
}
}
delay(50);
}

void mousePressed() {
noLoop();
}

void mouseReleased() {
loop();
}```