# First Processing Code (Digital Innovation Design)

Digital Innovation Design course is my summer class in my masters of Interaction Design. I was very excited for this class on my first day. I will be learning new codes, new designs, new things about digital and a new professor. After few minutes of lecture, my eyes went wider with all the interest because professor was talking about famous artist paintings and briefed about what we see in it.

Later when professor started talking about coding ‘Java Script’, that caught my interest first. But as minutes ticking, I could hear my heart beat. I don’t understand the code exactly. First we had to download processing medium to write the code, we had to look at the reference of the code to learn and we started to create a bicycle. Coding is not my favorite thing to work on. But this code is completely different from HTML/CSS. I feel like I should be a mathematician to crack the code.

Below is my class code:
void setup() {
size(800, 600); // this is the canvas size
background(255, 206, 13); // background color
fill(3, 3, 23); // this is ellipse fill
noStroke();

float firstWheelX=width*(1.0/3.0); // this is the circle one
float wheelY=300;
float secondWheelX=width*(2.0/3.0);
float gearX=width/2.0;

ellipse(firstWheelX, wheelY, 100, 100);
ellipse(secondWheelX, 300, 100, 100);

stroke(3, 3, 23);
strokeWeight(5);
line(gearX, wheelY, gearX-20, wheelY+20); // pedal #1
line(firstWheelX, topTube, secondWheelX, topTube); // frame
line(firstWheelX, topTube, gearX, wheelY);
line(secondWheelX, topTube, gearX, wheelY);

fill(160, 32, 240);

ellipse(gearX, wheelY, 25, 25);

noStroke();
rect(firstWheelX-20, topTube-45, (secondWheelX-firstWheelX)/3.0, 10);
stroke(3,3,23);
line(gearX, wheelY, gearX+20, wheelY-20); // pedal #1
}

Professor has given us assignment to finish the bicycle for our-self. I referred ‘Processing’ website to learn more how to code shapes with axis. I know I didn’t do a good job in coding but I got the output. I still have to learn how to code in a better with lesser lines.

Below is my in-house coding:
void setup() {
size(800,600); // this is canvas size
background(255); //background of the canvas
// first group — ellipse //
stroke(139, 235, 72); // Green Color Wheel
strokeWeight(15); // Green Stroke Color
ellipse(200, 400, 150, 150); // Green circle one
stroke(231, 230, 41); // yellow color wheel
strokeWeight(10);
fill(255); // this is ellipse fill
ellipse(200, 400, 125, 125); // yellow circle
noStroke();
strokeWeight(10);
fill(173, 171, 132); // this is ellipse fill
ellipse(200, 400, 50, 50); // x-axis, y-axis, size of circle two
// second group — ellipse //
stroke(139, 235, 72); // Green Color Wheel
strokeWeight(15); // Green Stroke Color
ellipse(500, 400, 150, 150); // x-axis, y-axis, size of circle one
stroke(231, 230, 41); // yellow color wheel
strokeWeight(10);
fill(255); // this is ellipse fill
ellipse(500, 400, 125, 125); // x-axis, y-axis, size of circle two
noStroke();
strokeWeight(10);
fill(173, 171, 132); // this is ellipse fill
ellipse(500, 400, 50, 50); // x-axis, y-axis, size of circle two
//line//
stroke(1, 171, 132);
strokeWeight(8);
line(200, 400, 325, 400); // x/y of first circle ; x/y of second circle // back to front wheel
line(200, 400, 400, 300); // back wheel to handle
line(500, 400, 400, 300); // front wheel to handle
line(325, 400, 400, 300); // gear to handle
line(325, 400, 250, 300); // seat tube
line(400, 300, 395, 295); // handle tube
line(395, 295, 395, 225); // handle tube
line(395, 225, 375, 225); // handle tube
//seat//
noStroke();
strokeWeight(5);
fill(87, 84, 63);
rect(235, 295, 40, 15); // seat
//gear//
fill(206, 237, 72);
stroke(87, 84, 63);
strokeWeight(5);
ellipse(325, 400, 40, 40);
//pedal//
line(325, 400, 355, 425);
//footrest//
line(350, 425, 360, 425);
save(“NewBicyle.png”);
}
Like what you read? Give Mounica Reddy a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.