Web Design
Portfolio

Teodora Muresan

The two sessions about Processing were led by David Jonas on October 5th and 12th . During these sessions, we were taught the basics: the starting functions (void setup, void draw), how to set the size and background, what variables are and how to use them. He let us create, break and then learn how to fix what was broken. He also strongly recommended documentation, which can be found here: https://processing.org/reference/ . This is my first creation in
Processing:

int posX = 76;
int posY = 68;
int sizeA = 50;
int lineA = 800;
int lineB =500;
void setup()
{size(1000, 800);}
void draw()
{ background(201, 182, 220);
stroke(143, 71, 178);
fill(98, 49, 122);
ellipse(posX, 300, 60, 80);
posX = posX +1;
if (mouseX < 50) {
cursor(CROSS);
line(mouseX, 900, mouseX, 700);}
else
{cursor(HAND);}
stroke(221, 229, 206);
arc(150, posY, sizeA, 50, 0, HALF_PI);
fill(163, 82, 204);
arc(150, posY, sizeA, 90, HALF_PI, PI);
arc(150, posY, sizeA, 100, PI, PI+QUARTER_PI);
arc(150, posY, sizeA, 50, PI+QUARTER_PI, TWO_PI);
posY = posY + 1;
sizeA = sizeA + 2;

stroke(102, 133, 224);
fill(74, 96, 162);
triangle(posX, posX, sizeA, 400, 366, 96);
sizeA = sizeA+6;
posX = posX+1;
posX = posX+3;
stroke(255, 255, 0);
line(30, lineB, 85, lineA);
lineA=lineA-4;
lineB=lineB+2;

PImage img = createImage(66, 66, ARGB);
img.loadPixels();
for (int i = 0; i < img.pixels.length; i++)
img.pixels[i] = color(129, 129, 161, i % img.width * 6);
img.updatePixels();
image(img, 600, 66);
image(img, 600, 96);
textSize(100);
text("hello", 90, 100);
fill(0, 102, 153);
text("hello", 90, 160);
fill(0, 102, 153, 51);
text("hello", 90, 200);
stroke(92, 138, 230);
quad(mouseX, mouseY, 170, 90, 100, 63, 50, 150);
line(150,25, mouseX, mouseY);}

The second session was more theoretical, explaining the importance of vectors, how to use them and conditionals. Every student was allowed to ask as many questions and about any function they didn’t understand and wanted to use. This is the code for what I have created in my second session:

PVector position;
PVector v;
float distance;
void setup()
{size(800,600);
position = new PVector(100,100);
v = new PVector(0,0);}
void draw()
{background(204, 224, 204);
ellipse(position.x, position.y, 40, 40);
v.x= mouseX- position.x;
v.y= mouseY- position.y;
distance = v.mag();
v.normalize();
position.x= position.x + v.x;
position.y= position.y + v.y;
if (distance > 100)
{ fill(random (255), random(255), random(255));}
else
{fill(255); }
pushStyle(); //start a new style
strokeWeight(10);
fill(204, 153, 0);
ellipse((cos(frameCount/50.0)*200) + mouseX, (sin(frameCount/50.0)*200) + mouseY, 80, 80); // Left-middle circle
pushStyle(); // Start another new style
stroke(0, 102, 153);
ellipse(100, 150, 80, 80); // Right-middle circle
popStyle(); // Restore the previous style
popStyle(); // Restore original style
ellipse(100, 50, 33, 33); // Right circle}

And this is another sketch I made during those two weeks:

void setup() {
size(1000, 800, P3D);
}

void draw()
{
background(107, 107, 178);
stroke(151, 151, 201);
translate(300, 300, 0);
rotateX(mouseY * 0.05);
rotateY(mouseX * 0.05);
fill(mouseX * 2, 0, 160);
sphereDetail(mouseX / 10);
sphere(100);

line(mouseX, mouseY, 85, 0);
stroke(209, 117, 163);
line(mouseX, mouseY, 85, 0);
stroke(227, 172, 200);
line(mouseX, mouseY, 30, 0);
line(30, 20, 85, 20);
stroke(209, 117, 163);
line(mouseX, mouseY, 90, 0);
stroke(227, 172, 200);
line(mouseX, mouseY, 70, 0);

noStroke();
lights();
translate(500, 400, 0);
sphere(14);
noStroke();
lights();
translate(mouseX, mouseY, 0);
sphere(30);
}

When I firstly worked in Processing, I didn't have an exact design in mind. What I actually did was just to copy and paste different types of code from the website, change the numbers and try to arrange them so that they don't overlap. Therefore, My First Sketch is rather random than organized.

During my second session of Processing I started to imagine what I wanted to do and then actually tried to write it (with David's help, of course).