Author: Sandy

Project-04: String Art

string artDownload
// Sandy Youssef, syoussef
//Section D
var dx1;
var dy1;
var dx2;
var dy2;
var numLines = 50;
var numLine = 30;

function setup() {
    createCanvas(400, 300);
    background(0);
   
   
}

function draw() {
    stroke("yellow");  // yellow lines 1
    line(0, 300, 50, 0);
    line(0, 0, 150, 150);
    dx1 = (50-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-300)/numLines;
    dx2 = (150-0)/numLines;
    dy2 = (150-0)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 300; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 1
    line(0, 0, 5, 300);
    line(50, 300, 190, 300);
    dx1 = (5-0)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (300-0)/numLines;
    dx2 = (190-50)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 0; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 50;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 2
    line(400, 200, 50, 0);
    line(0, 300, 300, 300);
    dx1 = (50-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 3
    line(400, 200, 250, 0);
    line(0, 300, 300, 300);
    dx1 = (250-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("yellow");  //yellow lines 4
    line(400, 200, 150, 0);
    line(0, 300, 300, 300);
    dx1 = (150-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("yellow");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  //green lines 2
    line(400, 200, 400, 0);
    line(0, 300, 300, 300);
    dx1 = (400-400)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-200)/numLines;
    dx2 = (300-0)/numLines;
    dy2 = (300-300)/numLines;
    var x1 = 400; // x1 of line 1
    var y1 = 200; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 300; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

   
    stroke("green");  // green lines 3
    line(450, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-450)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 450; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green");  // green lines 4
    line(300, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-300)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 300; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }

    stroke("green");  // green lines 5
    line(150, 0, 0, 0);
    line(0, 150, 300, 300);
    dx1 = (0-150)/numLine; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLine;
    dx2 = (300-0)/numLine;
    dy2 = (300-150)/numLine;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 150; //y1 of line 2
    for (var i = 0; i <= numLine; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    stroke("green"); // green lines 6
    line(150, 0, 0, 0);
    line(0, 0, 0, 300);
    dx1 = (0-150)/numLines; //make the lines 1/50th of a step along the reference lines
    dy1 = (0-0)/numLines;
    dx2 = (0-0)/numLines;
    dy2 = (300-0)/numLines;
    var x1 = 150; // x1 of line 1
    var y1 = 0; //y1 of line 1
    var x2 = 0;  //x1 of line 2
    var y2 = 0; //y1 of line 2
    for (var i = 0; i <= numLines; i += 1) {
        stroke("green");
        line(x1, y1, x2, y2);
        x1 += dx1; // draw lines that are 1/50th apart connecting them to other line 
        y1 += dy1;
        x2 += dx2;
        y2 += dy2;
    }
    



    noLoop();
}

I tried to create a loose repetition effect. It took me a while to understand how the code works, but when I did, I was able to achieve what I had in mind.

LookingOutwards-04

Creator’s Name: rgb3
Title of Work: LOOPLEX
Year of Creation: 2009

The project I chose for this week is a physical user interface named LOOPLEX that explores the idea of live sound interaction. It appears as though the different hexagon tiles placed on the table-like interface change the sound made along with a representation of that sound with color. Changing the angle of the hexagon appears also to alter the sound. I think it is fascinating to explore how humans interact with the objects around them, especially in this case where computation is embedded within the object to produce sounds we are capable of processing. The description of this project states that it uses loops to improvise the sound and since we learned about them this week, it is really interesting to see them being used in ways that are more than visual outputs. The creator’s artistic sensibilities portray their creativity and vision that allows the user to change the sound, leading to a unique experience every time.

Here is a demonstration of LOOPLEX in action.

Project-03-Dynamic-Drawing Section D

I enjoyed the freeform in this project which was more open-ended. I had lots of fun playing tricks on the eye in addition to the mouse interaction. Move your mouse left and right and see what happens!!

dynamic drawing sketch
var angle = 0;
var x;
var y;
var w = 80;
var h = 80;
var xe;
function setup() {
    createCanvas(600, 450);
    background(220);
    frameRate(15); 
    
}

function draw() {
    background(204);
    var x = width/2;
    var y = height/2;
    var xe = width/2;
    var ye = height/2;
    

    angle = angle + 1; 
    if (mouseX <= width/2) {  // when mouse moves to left
        background(255); // black background
        // make square bigger
        w = w + 8;
        h = h + 8;

        // bigger white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*20, h*20);
        pop();
        //bigger white circle
        fill(255);
        ellipse(xe, ye, w*17); 
        // big black rectangle 
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (0);
        rect(0, 0, w*10, h*10);
        pop();
        // big white circle
        fill(255);
        ellipse(xe, ye, w*8);  
        // black rectangle
        push();   // this keeps whatever code that is inside push and pop "self contained" without affecting other code/ "undo"
        translate (x,y);
        rotate(-angle); 
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w*4, h*4);
        // draw black ellipse in center of square
        pop(); 
        fill(255);
        ellipse (xe, ye, w*3);  
         // square inside of ellipse that rotates the opposite direction 
        push();
        translate(x,y);  
        rotate(angle);
        rectMode(CENTER);
        fill(0);
        rect(0, 0, w, h);
        pop();
        // small white circle that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle + 8; // used to be 50

        
    } else if (mouseX >= width/2) {  // when mouse moves to right
        background(0); // white background
        // make square bigger
        w = w - 8; 
        h = h - 8;
         // bigger black rectangle
        push();
        translate(x,y);   
        rotate(angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*20, h*20);
        pop();
        // bigger black circle
        fill(0);
        ellipse(xe, ye, w*17); 
        // big white rectangle
        push();
        translate(x,y);   
        rotate(-angle);
        rectMode(CENTER);
        fill (255);
        rect(0, 0, w*10, h*10);
        pop();
        // really big black circle
        fill(0);
        ellipse(xe, ye, w*8);  
        // big white rectangle
        push();
        translate (x,y);  
        rotate(angle); 
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w*4, h*4);
        pop();
        // smaller black circle 
        fill(0);
        ellipse (xe, ye, w*3); 
        // white rectangle that rotates in opposite direction
        fill(255);        
        translate(x,y);  
        rotate(-angle);
        rectMode(CENTER);
        fill(255);
        rect(0, 0, w, h);
        // small black circle with white outline that approaches center
        push();
        translate(300, 225);
        rotate(radians(angle)); 
        stroke(255);
        fill(0);
        ellipse(xe -100, ye - 100, 50);
        pop();
        angle = angle - 8;

    }
}

LookingOutwards-03 Section D

Creator’s name: Sanchtv
Title of work: Foldable Fractal 2.0
Year of creation: 2009

This project by Sanchtv is titled Foldable Fractal 2.0. It is made up of laser-cut pentagons that appear to be folded together to create a “pentagonal dodecahedron”. I admire the repetition of the pattern that moves inwards and continues to decrease in size. This piece reminds me of the drawings of an individual painting a picture of themself, painting a picture of themself and so on, making it appear as though it repeats for infinity. These types of visuals are capable of grabbing the attention of the viewer in a quick and unique manner. The description mentions that this was created through a recursive algorithm. After some research, I learned that it is an algorithm that calls itself using a smaller input to return the result for the current input. From that base definition, I suppose such an algorithm is the cause for the repetition in the design. While I do not know much about the creator, it is apparent that this object was created in a very intentional and methodical manner that utilized an algorithm to create three-dimensional art.

This is a computational digital fabrication developed with a recursive algorithm by creator Sanchtv.

Foldable Fractal 2.0 | foldable fractal is a project origina… | Flickr

Project-02-Variable-Face Section D

I created an alien-like girl! I enjoyed the creativity of the process and clicking my mouse to generate well-proportioned ones with a nice color pallet.

sketch- generative artDownload
// Sandy Youssef
// Section D
var eyeSizeW = 10;
var eyeSizeH = 10;
var pupilSize = 10
var faceWidth = 100;
var faceHeight = 120;
var skinR = 255
var skinG = 178
var skinB = 102


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

function draw() {
    background(180);
    noStroke();
    // hair
    fill(skinR - 70, skinG - 70, skinB - 70);
    ellipse(width/2, height/2, 200, 250); 
    // bow
    fill(255);
    ellipse(width/2, height*0.30, 40, 40); 
    triangle(180, 155, 180, 230, 240, 196); 
    triangle(300, 155, 300, 230, 230, 196);
    fill(skinR - 50, skinG - 50, skinB - 50);
    // ears
    fill(255);
    ellipse(width* 0.38, height/2, 30, 40); 
    ellipse(width* 0.62, height/2, 30, 40);
    // neck
    fill(skinR - 40, skinG - 40, skinB - 40);
    rect(width* 0.45, height/2, 45, 90); 
    // face
    fill(skinR, skinG, skinB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  
    // shirt
    fill(255);
    ellipse(width/2, height* 0.75, 150, 150) 
    // eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(0);
    var pupilL = width/2 - faceWidth * 0.25;
    var pupilR = width/2 + faceWidth * 0.25;
    fill(skinR - 50, skinG - 50, skinB - 50);
    ellipse(pupilL, height/2, pupilSize, pupilSize); // left pupil
    ellipse(pupilR, height/2, pupilSize, pupilSize); // right pupil
    // nose
    var nose1 = width/2 - faceHeight* 0.05;
    var nose2 = width/2 + faceHeight * 0.05;
    var nose3 = width/2 - faceWidth * 0.005;
    fill(skinR - 40, skinG - 40, skinB - 40);
    triangle(nose1, height*0.55, nose2, height*0.55, nose3, height*0.5)
    // mouth
    fill(238, 131, 163); 
    arc(width/2, height* 0.57, 40, 23, radians(0), radians(180));  // lips
    fill(255);
    arc(width/2, height* 0.574, 30, 15, radians(0), radians(180)); // teeth
}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(90, 180);
    faceHeight = random(130, 180);
    eyeSizeW = random(10,35);
    eyeSizeH = random (10,30);
    pupilSize = random(8, 12);
    skinR = random(70,230);
    skinG = random (70,230);
    skinB = random (70,230);
    mouth = random (1,3);
}

LookingOutwards-02 Section D

Creator’s name: Karsten Schmidt

Title of work: Axis

Year of creation: 2008

One of many postcards

Karsten Schmidt’s generative art titled “Axis” is very admirable for its beauty, the feelings it evokes, along with the impressive process of creating it that involved both the physical and digital worlds. This collection consists of sculptural forms that were created through the use of hanging strings whose motion was recorded over time. His portfolio states that “The local differences in velocity for each point along the string are used as a metric to create the subtle shading and cloth-like texture.” This work became postcards used to advertise an installation. This collection is absolutely beautiful to look at. Each design has a floating, soft, and dynamic appearance that resembles fabric and the way it effortlessly contours to create organic patterns. One of my favorite items to draw is fabric due to its unique texture which is one reason I truly love looking at this work. I supposed that the algorithm used to create this work involved some sort of digital camera or motion sensor that took in the information and translated it digitally on a software program. I am not completely sure what the tools and programs required to create this would be. After looking at Kasten Schmidt’s portfolio, he seems to be very interested in motion which also involves physics. We can see his artistic sensibilities and style manifested in this algorithm, especially when knowing a little bit about how it was created.

Axis | Flickr

Project 1: My Self Portrait

sketch (self portrait) 
function setup() {
    createCanvas(300, 300);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(186, 215, 190);
    fill(0);
    ellipse(150, 155, 170, 190); 
    fill(239, 222, 205);
    fill(239, 222, 205);
    rect(125, 150, 50, 100);  //neck
    ellipse( (width/2), (height/2) , 100, 120);
    fill(252, 252, 252);
    ellipse(130, 140, 15, 9); // left socket
    fill(102, 51, 0);
    circle(130, 140, 7);  // Pupil (left)
    fill(0);
    circle(130, 140, 2);  // iris (right)
    fill(252, 252, 252); 
    ellipse(170, 140, 15, 9);  // right socket
    fill(102, 51, 0);
    circle(170, 140, 7);   // pupil (right)
    fill(0);
    circle(170, 140, 2);  // iris(right)
    arc(130, 130, 22, 5, radians(180), radians(360));  // left eyebrow. I learned this by looking it up. by wrapping degrees in radians I can work in degrees!
    arc(170, 130, 22, 5, radians(180), radians(360));
    fill(232, 214, 197);
    triangle(150, 148, 145, 170, 155, 170);
    point(131, 150); // freckles!!
    point(135, 154);
    point(127, 152);
    point(123, 150);
    point(119, 152);
    point(116, 158);
    point(126, 156);
    point(130, 158);
    point(171, 150);
    point(175, 154);
    point(167, 152);
    point(163, 150);
    point(159, 152);
    point(156, 158);
    point(166, 156);
    point(170, 158);
    fill(238, 131, 163); 
    arc(150, 180, 40, 23, radians(0), radians(180)); // lips!
    fill(255);
    arc(150, 182, 30, 15, radians(0), radians(180));
    // arc(150, 100, )
    fill(0);
    ellipse(150, 86, 60,32);
    fill(0);
    arc(130, 100, 40, 23, radians(0), radians(180));
    fill(0);
    arc(170, 100, 40, 23, radians(0), radians(180));
    circle(130, 90, 32);
    circle(170, 90, 32);
    fill(112, 171, 149);        //shirt
    ellipse(150,305, 130, 160);
    fill(0);
    ellipse(70, 130, 20, 30); //HAIR
    ellipse(80, 110, 20, 30);
    ellipse(90, 100, 20, 30);
    ellipse(100, 90, 20, 30);
    ellipse(68, 150, 20, 30);
    ellipse(68, 170, 20, 30);
    ellipse(70, 190, 20, 30);
    ellipse(80, 210, 20, 30);
    ellipse(90, 230, 20, 30);
    ellipse(100,240, 20, 30);
    ellipse(230, 130, 20, 30);
    ellipse(220, 110, 20, 30);
    ellipse(210, 100, 20, 30);
    ellipse(100, 90, 20, 30);
    ellipse(230, 150, 20, 30);  // 230- 68= 162 (+162)
    ellipse(230, 170, 20, 30);
    ellipse(230, 190, 20, 30);
    ellipse(220, 210, 20, 30);
    ellipse(210, 230, 20, 30);
    ellipse(200, 240, 20, 30);
}

Lo: My Inspiration

Minecraft, a game developed by Mojang Studios and created by Markus Persson to be fully launched in 2011, broke previous standards of what a videogame should be, making its way to becoming the best-selling game of all time. Before the creation of Minecraft, video games followed a precise template where players had to always be directed through a story or adventure. Instead, this game provided a free-range platform that allowed players to create and customize their worlds. Its tremendous popularity in the game industry, along with its far-reaching influence on design, culture, and education, leads me to admire it.

The simple nature of this game is what makes it so astounding. Through large pixelated blocks, players can build endless structures, craft tools, and mine for materials. Engaging in this game allows the user to exercise and improve their spatial awareness, concepts of symmetry and geometry, along with problem-solving skills. It took Markus Persson just a week to create the first version of considerably what is one of the most popular games in history. I believe it was coded through JAVA. Markus was inspired by an existing game called Infiniminer which also used pixelated blocks allowing players to mine and build. I see this computational project evolving into immersive technology such as VR/AR that allows the player to explore their world more actively. With certain adjustments, it can even potentially become a type of immersive 3D modeling experience that may be used professionally!

Work Cited

Fulton, Michael. “Why Is Minecraft So Important?” Lifewire, Lifewire, 19 Feb. 2020,
https://www.lifewire.com/why-is-minecraft-so-important-4027563.
“The Cultural Impact of Minecraft (10 Years) – H20 Esports.” H20 Esports Campus
Amsterdam, 24 May 2019, https://h20.gg/the-cultural-impact-of-minecraft/.