SectionB – Page 11 – [OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice

Project 05: 1950’s Atomic-Era Wallpaper!

Re-live the Golden Days of American history with this nostalgic throwback Midcentury Atomic-Era Wallpaper!

// Ilia Urgen
// Section B

let shape_width = 90;
let shape_height = 160; 

// I created 4 different designs, which I named Quad 1, Quad 2, Quad 3, and Quad 4.
// Each design is stored in a separate function below.

function setup() {
    createCanvas (600, 600);
    background (200);
}   

function draw() {

    // Quad 1 Coordinates
    let x1 = 60;
    let y1 = 60;

    let x2 = 180;
    let y2 = 220;


    // Quad 2 Coordinates
    let x3 = 60;
    let y3 = 220;

    let x4 = 180;
    let y4 = 60;

    // Quad 3 Coordinates
    let x5 = 0;
    let y5 = -20;

    let x6 = 120;
    let y6 = 140;

    // Quad 4 Coordinates
    let x7 = 0;
    let y7 = 140;

    let x8 = 120;
    let y8 = -20;

    let row_increase = 240;
    let col_increase = 320;

    background (210);
    
    // Prints outer Quad 1
    for (var rowA = 1; rowA <= 10; rowA += 1) {
        for (var colA = 1; colA <= 10; colA += 1) {

            quad_2 (x1, y1);  
            y1 += col_increase;
        } 

        x1 += row_increase; 
        y1 = 60;
    }

    // Prints inner Quad 1
    for (var rowB = 1; rowB <= 10; rowB += 1) {
        for (var colB = 1; colB <= 10; colB += 1) {

            quad_2 (x2, y2);  
            y2 += col_increase;
        } 

        x2 += row_increase; 
        y2 = 220;
    }

    // Prints outer Quad 2
    for (var rowC = 1; rowC <= 10; rowC += 1) {
        for (var colC = 1; colC <= 10; colC += 1) {

            quad_1 (x3, y3);  
            y3 += col_increase;
        } 

        x3 += row_increase; 
        y3 = 220;
    }

    // Prints inner Quad 2
    for (var rowD = 1; rowD <= 10; rowD += 1) {  
        for (var colD = 1; colD <= 10; colD += 1) {

            quad_1 (x4, y4);  
            y4 += col_increase;
        } 

        x4 += row_increase; 
        y4 = 60;
    }
    
    // Prints outer Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x5, y5); 
            y5 += col_increase;
        } 

        x5 += row_increase; 
        y5 = -20;
    }
    
    // Prints inner Quad 3
    for (var rowE = 1; rowE <= 10; rowE += 1) {  
        for (var colE = 1; colE <= 10; colE += 1) {

            quad_3 (x6, y6);  
            y6 += col_increase;
        } 

        x6 += row_increase; 
        y6 = 140;
    }

    // Prints outer Quad 4
    for (var rowF = 1; rowF <= 10; rowF += 1) {  
        for (var colF = 1; colF <= 10; colF += 1) {

            quad_4 (x7, y7); 
            y7 += col_increase;
        } 

        x7 += row_increase; 
        y7 = 140;
    }
    
    // Prints inner Quad 4
    for (var rowG = 1; rowG <= 10; rowG += 1) {  
        for (var colG = 1; colG <= 10; colG += 1) {

            quad_4 (x8, y8);  
            y8 += col_increase;
        } 

        x8 += row_increase; 
        y8 = -20;
    }

    noLoop();
}

function quad_1 (x1, y1) {
    noStroke();
    
    fill (96,149,130);    
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 - shape_width/6, y1 - shape_height/2);
    quad (x1 - shape_width/2, y1,   x1 - shape_width/3, y1,   x1, y1 + shape_height/2,   x1 - shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2,   x1 + shape_width/6, y1 + shape_height/2);
    quad (x1 + shape_width/2, y1,   x1 + shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/6, y1 - shape_height/2);

    fill (114,102,78);
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 - shape_height/2, x1, y1 - shape_height/2);   
    quad (x1 - shape_width/3, y1,   x1 - shape_width/3 - 5, y1,   x1 - 5, y1 + shape_height/2, x1, y1 + shape_height/2);
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 + shape_height/2, x1, y1 + shape_height/2);   
    quad (x1 + shape_width/3, y1,   x1 + shape_width/3 + 5, y1,   x1 + 5, y1 - shape_height/2, x1, y1 - shape_height/2);

    fill (53,98,115);
    quad (x1 - shape_width/3, y1,   x1, y1 - shape_height/2,   x1 + shape_width/3, y1,   x1, y1 + shape_height/2);
    
    fill (32,64,60);
    quad (x1 - shape_width/4.5, y1,   x1, y1 - shape_height/3,   x1 + shape_width/4.5, y1,   x1, y1 + shape_height/3);

    stroke(255);
    strokeWeight(1);
    line (x1 - shape_width/10, y1, x1 + shape_width/10, y1);
    line (x1, y1 - shape_height/10, x1, y1 + shape_height/10);
    line (x1 - shape_width/20, y1 - shape_height/20, x1 + shape_width/20, y1 + shape_height/20);
    line (x1 + shape_width/20, y1 - shape_height/20, x1 - shape_width/20, y1 + shape_height/20);

    circle (x1 - shape_width/10, y1, 3);
    circle (x1 + shape_width/10, y1, 3);
    circle (x1, y1 - shape_height/10, 3);
    circle (x1, y1 + shape_height/10, 3);

    circle (x1 - shape_width/20, y1 - shape_height/20, 3);
    circle (x1 + shape_width/20, y1 + shape_height/20, 3);
    circle (x1 + shape_width/20, y1 - shape_height/20, 3);
    circle (x1 - shape_width/20, y1 + shape_height/20, 3);
}

function quad_2 (x3, y3) {
    noStroke();
    
    fill (53,98,115);    
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 - shape_width/6, y3 - shape_height/2);
    quad (x3 - shape_width/2, y3,   x3 - shape_width/3, y3,   x3, y3 + shape_height/2,   x3 - shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2,   x3 + shape_width/6, y3 + shape_height/2);
    quad (x3 + shape_width/2, y3,   x3 + shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/6, y3 - shape_height/2);

    fill (114,102,78);
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 - shape_height/2, x3, y3 - shape_height/2);   
    quad (x3 - shape_width/3, y3,   x3 - shape_width/3 - 5, y3,   x3 - 5, y3 + shape_height/2, x3, y3 + shape_height/2);
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 + shape_height/2, x3, y3 + shape_height/2);   
    quad (x3 + shape_width/3, y3,   x3 + shape_width/3 + 5, y3,   x3 + 5, y3 - shape_height/2, x3, y3 - shape_height/2);

    fill (96,149,130);
    quad (x3 - shape_width/3, y3,   x3, y3 - shape_height/2,   x3 + shape_width/3, y3,   x3, y3 + shape_height/2);
    
    fill (255);
    quad (x3 - shape_width/4.5, y3,   x3, y3 - shape_height/3,   x3 + shape_width/4.5, y3,   x3, y3 + shape_height/3);

    stroke(32,64,60);
    strokeWeight(1);
    line (x3 - shape_width/10, y3, x3 + shape_width/10, y3);
    line (x3, y3 - shape_height/10, x3, y3 + shape_height/10);
    line (x3 - shape_width/20, y3 - shape_height/20, x3 + shape_width/20, y3 + shape_height/20);
    line (x3 + shape_width/20, y3 - shape_height/20, x3 - shape_width/20, y3 + shape_height/20);

    circle (x3 - shape_width/10, y3, 4);
    circle (x3 + shape_width/10, y3, 4);
    circle (x3, y3 - shape_height/10, 4);
    circle (x3, y3 + shape_height/10, 4);

    circle (x3 - shape_width/20, y3 - shape_height/20, 4);
    circle (x3 + shape_width/20, y3 + shape_height/20, 4);
    circle (x3 + shape_width/20, y3 - shape_height/20, 4);
    circle (x3 - shape_width/20, y3 + shape_height/20, 4);
}

function quad_3 (x5, y5) {
    noStroke();
    
    fill (96,149,130);    
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 - shape_width/6, y5 - shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2,   x5 + shape_width/6, y5 + shape_height/2);

    fill (53,98,115);
    quad (x5 - shape_width/2, y5,   x5 - shape_width/3, y5,   x5, y5 + shape_height/2,   x5 - shape_width/6, y5 + shape_height/2);
    quad (x5 + shape_width/2, y5,   x5 + shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/6, y5 - shape_height/2);

    fill (253,217,181);
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 - shape_height/2, x5, y5 - shape_height/2);   
    quad (x5 - shape_width/3, y5,   x5 - shape_width/3 - 5, y5,   x5 - 5, y5 + shape_height/2, x5, y5 + shape_height/2);
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 + shape_height/2, x5, y5 + shape_height/2);   
    quad (x5 + shape_width/3, y5,   x5 + shape_width/3 + 5, y5,   x5 + 5, y5 - shape_height/2, x5, y5 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (205,91,69);
    quad (x5 - shape_width/3, y5,   x5, y5 - shape_height/2,   x5 + shape_width/3, y5,   x5, y5 + shape_height/2);
    
    strokeWeight (1.5);

    line (x5 - shape_width/10, y5, x5 + shape_width/10, y5);
    line (x5, y5 - shape_height/10, x5, y5 + shape_height/10);
    line (x5 - shape_width/20, y5 - shape_height/20, x5 + shape_width/20, y5 + shape_height/20);
    line (x5 + shape_width/20, y5 - shape_height/20, x5 - shape_width/20, y5 + shape_height/20);

    circle (x5 - shape_width/10, y5, 4);
    circle (x5 + shape_width/10, y5, 4);
    circle (x5, y5 - shape_height/10, 4);
    circle (x5, y5 + shape_height/10, 4);

    circle (x5 - shape_width/20, y5 - shape_height/20, 4);
    circle (x5 + shape_width/20, y5 + shape_height/20, 4);
    circle (x5 + shape_width/20, y5 - shape_height/20, 4);
    circle (x5 - shape_width/20, y5 + shape_height/20, 4);
}

function quad_4 (x7, y7) {
    noStroke();
    
    fill (53,98,115);    
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 - shape_width/6, y7 - shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2,   x7 + shape_width/6, y7 + shape_height/2);
    
    fill (96,149,130);
    quad (x7 - shape_width/2, y7,   x7 - shape_width/3, y7,   x7, y7 + shape_height/2,   x7 - shape_width/6, y7 + shape_height/2);
    quad (x7 + shape_width/2, y7,   x7 + shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/6, y7 - shape_height/2);

    fill (205,91,69);
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 - shape_height/2, x7, y7 - shape_height/2);   
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 + shape_height/2, x7, y7 + shape_height/2);   
    quad (x7 - shape_width/3, y7,   x7 - shape_width/3 - 5, y7,   x7 - 5, y7 + shape_height/2, x7, y7 + shape_height/2);
    quad (x7 + shape_width/3, y7,   x7 + shape_width/3 + 5, y7,   x7 + 5, y7 - shape_height/2, x7, y7 - shape_height/2);

    stroke (32,64,60);
    strokeWeight (3);

    fill (253,217,181);
    quad (x7 - shape_width/3, y7,   x7, y7 - shape_height/2,   x7 + shape_width/3, y7,   x7, y7 + shape_height/2);

    strokeWeight (1.5);
 
    line (x7 - shape_width/10, y7, x7 + shape_width/10, y7);
    line (x7, y7 - shape_height/10, x7, y7 + shape_height/10);
    line (x7 - shape_width/20, y7 - shape_height/20, x7 + shape_width/20, y7 + shape_height/20);
    line (x7 + shape_width/20, y7 - shape_height/20, x7 - shape_width/20, y7 + shape_height/20);

    circle (x7 - shape_width/10, y7, 4);
    circle (x7 + shape_width/10, y7, 4);
    circle (x7, y7 - shape_height/10, 4);
    circle (x7, y7 + shape_height/10, 4);

    circle (x7 - shape_width/20, y7 - shape_height/20, 4);
    circle (x7 + shape_width/20, y7 + shape_height/20, 4);
    circle (x7 + shape_width/20, y7 - shape_height/20, 4);
    circle (x7 - shape_width/20, y7 + shape_height/20, 4);   
}

Project 5: Wallpaper

I decided to go full floral vintage and make a flower wallpaper! Also thought it would be cute to have a little tear in the corner, revealing the wood paneling underneath.

sketch

function setup() {
    createCanvas(600, 400);
    background(224, 224, 197);
}

function draw() {
	background(224, 224, 197);
	for(var y = 0; y < 500; y += 100){
		for(var x = 0; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 800; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }

    strokeWeight(3);
    stroke(250, 245, 237);
    fill(250, 245, 237);
    triangle(500, 350, 500, 400, 600, 350);
}

function drawFlower(x, y) {
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(230, 158, 57); //main flower orange color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(212, 127, 42); //dark orange thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

Blog 05: “PK3D Studio”

By Ilia Urgen
Section B

PK3D Studio is a CGI-based studio in Warsaw, Poland that was founded by Piotr Kosinski. His main speciality of design includes automotive and technology advertisements.

CGI is a field of 3D Computer Graphics that focus on real-life characteristics. I am truly inspired by Kosinski’s work related to automotive advertisements because I am a passionate car enthusiast. He is very good at making cars blend in any background he chooses.

You know when you see in-focused cars speeding down mountains in ads? That’s a huge majority of Kosinski’s portfolio. I really admire how he takes crip, high-quality photos of cars at different angles, and then blends that car with any beautiful landscape using CGI.

His advertising skills definitely work. Kosinski has a good eye for design, as evident through his diverse automotive portfolio. Every time I see his ads, it makes me want to buy that exact car!

Below are 3 of my favorite CGI-designed automotive ads:

LO 05: 3D Computer Graphics

Galleria dell’Accademia – Daniele da Volterra bust 3D model

Exhibitions

(Exhibition page)

https://sketchfab.com/3d-models/the-bronze-effigy-of-michelangelo-fb759e11a7ce470bac5e8e4fe70881c4 <- 3D MODELED BUST

When I was in Italy over the summer, I went to the Galleria dell’Accademia di Firenze, where Michelangelo’s David’s is housed. After looking at David, there was a nearby room that showed a screen with a collection of 3D models made from real life historical sculptures, specifically busts of Michelangelo made by an unidentified artist. These 3D models were created by scanning the bust, and allowed for a greater degree of investigation of technique. On the walls there were many, many iterations of these models along with actual 3D printed busts themselves, and it was really interesting to see the way these digital images existed in the real world. Obviously, the meshes of these models were more complex than, say, stylized Pixar character models, and the detail that was able to be achieved was really interesting. Ultimately, this heightened ability to investigate the bust allowed for it to be attributed to Daniele da Volterra, made in the 16th century. I also find the gap of time between the creation of this piece and digital re-appropriation to be really fascinating, and it really made me think about how the people who would’ve been renowned clay sculptures back in the day likely would’ve made great character modelers within the 3D animated film & game industry (and vice versa).

Michelangelo Busts – Galleria dell’Accademia di Firenze

Blog 05 – 3D Computer Graphics – srauch

A work of 3D computer graphics I find really interesting is a collection of digital furniture called “The Shipping”, designed by Argentinian architect Andrés Reisinger. (Here’s the collection on his website.) The collection includes ten pieces of furniture, each meticulously 3D designed and rendered, and each of which were auctioned off as NFTs for as much as $70,000. The digital furniture can be placed into any digital environment, such as the metaverse or even Minecraft. Five of the ten pieces will be produced physically as well, and one chair – the Hortensia Chair, originally deemed “impossible” to recreate in physical reality – has been put into physical production.

Digital furniture design like this pushes the imagination. Different mediums afford different creative processes, so the opportunity for furniture designers to work in a world without traditional constraints opens up the door to completely new creative mindsets. More than that, it changes the way artists can think about what work is physically possible. Beyond just creating “impossible” digital furniture, the ability to be creative in a digital environment allowed Reisinger to make real furniture that was once considered to be impossible. It’s exciting to see how access to 3D modeling and rendering will continue to develop artistic fields such as furniture design in the future.

LO-05: Human After All

Human After All is a series of photographs that depict everyday people through their circulatory systems. A collaboration between photographer Jan Kriwol and Markos Kay – a digital 3D graphics bio-artist and programmer, these photographs not only explore the interaction between the fragile human body and its rigid environment but also challenge our exterior differences (ie. our skin color) by stripping the subject down to the barebones of human anatomy. This very subject matter is exactly what I admire about this series of work- deep inside, our bodies are so simple and similar, yet so complex. To generate this work, Markos Kay implemented an algorithm that generated 3D circulatory veins and arteries within the constraints of the human body as well as the given environment – this likely involved the use of 3D interactive programming software such as unreal engine and, on the backend, code that mimicked the way our veins spread within our bodies, repeating itself as it generated random patterns that simulated the flow of blood. Markos Kay’s works often blur the lines between art and functional science; Human After All demonstrates this very skill.

Human After All, Jan Kriwol & Markos Kay, 2017

Moments of Inertia / Luke DuBois / Looking Outwards 04 – Sound Art

This week I’m looking at a project by Luke DuBois titled Moments of Inertia. This is a series combining the music of violinist Todd Reynolds and “interactive video”.

To create the images seen, DuBois’ built software that reorganizes and maps Reynolds’ audio loops onto visual imagery. The computer uses analysis of changes in pitch, amplitude, and performance style to re-animate footage of people moving and interacting with the world in various ways (playing a sport, using a phone, etc.). This method of perception can be very uncomfortable and fascinating in its own right. I think the contemporary process of music making that gives this work its roots is also very interesting. I wonder if it would have the same effect if more ‘traditional’ music was used instead.

Moments of Inertia (2010) from R. Luke DuBois on Vimeo.

Project 4

sketch

var dx1; 
var dy1; 
var dx2; 
var dy2; 

var dxOne;
var dyOne;
var dxTwo;
var dyTwo; 

var numLine = 50;
var numLineTwo = 40;

function setup() {
    createCanvas(400, 300);
    background(18, 77, 26);
    
    strokeWeight(2);
    // all lines two pixels wide 

    dx1 = (150-50)/numLine;
    dy1 = (300-50)/numLine;
    dx2 = (350-300)/numLine;
    dy2 = (100-300)/numLine;
    

    dxOne = (400 - 340)/numLineTwo;
    dyOne = (200 - 0)/numLineTwo;
    dxTwo = (50 - 220)/numLineTwo;
    dyTwo = (80 - 0)/numLineTwo;
}

function draw() {

    var x1 = 5;
    var y1 = 115;
    var x2 = 180;
    var y2 = 175;
    // x and y values for left shape and vert lines

    for(i  = 0; i <= numLine; i++) {
        stroke(232, 221, 202);
        line(x1, y1, x2, y2);
            x1 += dx1 + 5;
            y1 += dy1;
            x2 += dx2 - 2;
            y2 += dy2 - 4;
    } // draw left shape, advance by one pixel

    for(i = 0; i <= numLine; i+= 4) {
        stroke(16, 46, 14);
        line(x1, y1, x2, y2);
            x1 += dx2 + 80;
            y1 += dy1 + 120;
            x2 += dx1;
            y2 += dy2;
    } // draw right side vert lines, advance by four pixels

    var xOne = 120;
    var yOne = 0;
    var xTwo = 300;
    var yTwo = 20;
    // x and y values for orange shape

    for(i = 0; i <= numLineTwo; i ++) {
        stroke(122, 65, 15);
        line(xOne, yOne, xTwo, yTwo);
            xOne += dxOne;
            yOne += dyOne;
            xTwo += dxTwo;
            yTwo += dyTwo;
    } // draw orange shape
    
    noLoop();
}

Project-04: String Art

sketch Download

var idx1;
var idx2;
var idy1;
var idy2;
var iNumLines=60;

var ox;
var oy;
var ox2;
var oy2;



function setup() {
    createCanvas(400, 300);
    background(0);
    idx1=100/iNumLines;
    idx2=200/iNumLines;
    idy1=100/iNumLines;
    idy2=200/iNumLines;


    r=70;
    r2=0.3;

    ox=width/2;
    oy=height/2;
    ox2=width;
    oy2=height;

}

function draw() {
    fill(200,0,0)
    
    //lightening
    var ix1=150;
    var ix2=300;
    var iy1=130;
    var iy2=80;
    strokeWeight(1);
    for (var i=0;i<=iNumLines;i+=1){
        stroke(255,20,147); //deep pink
        line(ix1+=idx1,iy1-=idy1,ix2-=idx2,iy2+=idy2);
    }
    noLoop();

    //vertical hole
    //loop over 2pi and the origin circulates.
    for (var t=0;t<=360;t+=4){
        strokeWeight(2.5);
        stroke(255,250,205); //lemon
        line(-30+ox+ox2*r2*Math.cos(radians(t)), 170+oy2*r2*Math.sin(radians(t))-5,
            -30+ox+ox2*r2*Math.cos(radians(t)),150+oy2*r2*Math.sin(radians(t))+5);
    }

    noLoop();
    //horizontal hole
    //loop over 2pi and the origin circulates.
    for (var t=0;t<=360;t+=4){
        stroke(0,206,209); // turquoise
        line(30+ox+5+ox2*r2*Math.cos(radians(t))-5, 170+oy2*r2*Math.sin(radians(t)),
            30+ox+5+ox2*r2*Math.cos(radians(t))+5,150+oy2*r2*Math.sin(radians(t)));
    }

    noLoop();

   
   //middle circle
    strokeWeight(1);
    //loop over 2pi
    for (var theta=0;theta<=360;theta+=10){
        //change origin 10 times
        for (var change=0; change<=10;change+=10){
            stroke(255);
            line(ox+change+r*Math.cos(radians(theta)),oy+r*Math.sin(radians(theta)),
                ox+change-r*Math.cos(radians(theta)),oy-r*Math.sin(radians(theta)));
        }
    }
    noLoop();
    
}

Looking Outwards 04: Sound Art

Sugarcube is a generative art project by Amanda Ghassaei that uses MIDI and MaxMSP. The project uses real life movement and generates sounds. I suppose that the project uses hardware to track the movement of MIDI and generates a certain pattern of sound using algorithm. The creator puts together her artistic sensibility with an existing generative nature of MIDI pad to create a great generative piece. The project also has the same hardware as normal MIDI pads which makes the project very practical. It is also impressive that the MIDI pad connects to MaxMSP, the program and lets you control sound on your computer.

https://vimeo.com/91259876