## Lrospigl – Pattern Week 05

I wanted to make something simple and cute that would allow for a bit of an unnaturalness to it too. By putting the smile and adding random circles around it, it creates this uneasiness.

``````//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

var distw = 50; // x spacing
var disth = 50; // y spacing
var circlex = 25; // x start
var circley = 25; // y start
var circle = 10; // number of circles per row
var c = (230, 180, 230);
var angle = 1;

function setup() {
createCanvas(450,450);
}

function draw() {
background(250);

for (var row = 0; row < 9; row++) {
if (row % 2 ===1){
circlex +=25; //spacing of odd rows + start
circle = 8; // number of circles

}
else {
circlex = 25; //start of circles
circle = 9; //
}
for (var col = 0; col < circle; col++) {
var cx = 0;
var cy = row * disth;
lines (cx, cy);
}

for (var col = 0; col < circle; col++) {
var px = circlex + col * distw;
var py = circley + row * disth;
smiley (px, py);
}
noLoop();
}
}

function lines(cx, cy) {
push();
translate (cx, cy);
strokeWeight (10)
stroke (100, 100, 200);
curve (0, 0, 0, 0, 450, 10, 450, 0, 450, 0);
pop();
}

function smiley(px, py) {
push();
stroke (0)
translate(px, py);
fill(255, 255, 0);
ellipse (0, 0, 40, 40);
fill (0);
ellipse (-6,-5, 5, 5);
ellipse (6, -5, 5, 5);
fill (c);
arc(0, 3, 20, 20, 0, PI);
noFill ();
ellipse (-2, 0, 41, 40);
ellipse (2, 0, 40, 39);

pop();
}
``````

## Lrospigl – Looking outwards 05 (Quantum Fluctuations)

As I was looking at 3d computer graphics on Behance (a really cool design portfolio website), I stumbled upon this artist’s page who had a lot of 3d graphics. The video (linked bellow) is very interesting and kind of surreal. He uses proton collision and information from supercomputer simulations to create this visual. He visualizes different events that have to do with these collisions, and inputs that information of the simulation to make a 2d and 3d rendering of them visually.

He also has this project where creates human-body-shapes where the only thing you see are blood vessels that are moving, and rotating to give a sense of dimension and perspective.

## Lrospigl – Looking Outwards – 04 (Bebot)

Bebot is robot synth. It is an iPhone app that allows you to control the effects and the scale, all while a little robot sings at you. While I really like the app, what interested me more is that it doesn’t have a limiting range. It really is up to the suer and how they take it. For example, this man tested the limits of Bebot to make an interesting and complicated song.

Since it’s a multitouch app, the writer of the code cannot assume how many fingers the user is actually going to use. In the video for example, the user here used up to 4 fingers at a time, something that the author took account for.

Official Apple App store bebot site .

## Lrospigl Project 04 line pattern

When I started with this project, I didn’t have a clear idea of what I wanted my image to look like. However, I did know I wanted the to be a play in line quantity that the user was able to have control over. I made it so that if you move your mouse to the top left corner of the canvas, you will see the darkest color possible, as well as the highest concentrations of lines. And if you move your mouse to the bottom right corner, you will see the least amount of lines, and the lightest/ least visible color.

``````//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Project-04-String art

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

function draw () {
background (240);

var r = mouseX;
var g = mouseY;
var x1 = width/2;
var y1 = height/2;
var x2 = width/5;
var y2 = height/5;
var spacing = 5;
strokeWeight (0.5);

//line sequence one
stroke (r, g, 150);
for (x = width/5; x < width/2 + 10; x += spacing) {
line (x, y1, x2, y2);
}
for (y = height/5; y < height/2; y += spacing) {
line (x1, y, x2, y2);
}

push ();
scale (-1, 1);
translate (-400, 0);
for (x = width/5; x < width/2 + 10; x += spacing) {
line (x, y1, x2, y2);
}
for (y = height/5; y < height/2; y += spacing) {
line (x1, y, x2, y2);
}
pop();

push ();
scale (1, -1);
translate (0, -300);
for (x = width/5; x < width/2 + 10; x += spacing) {
line (x, y1, x2, y2);
}
for (y = height/5; y < height/2; y += spacing) {
line (x1, y, x2, y2);
}
pop();

push ();
scale (-1, -1);
translate (-400, -300);
for (x = width/5; x < width/2 + 10; x += spacing) {
line (x, y1, x2, y2);
}
for (y = height/5; y < height/2; y += spacing) {
line (x1, y, x2, y2);
}
pop();

//line sequence two
for (x = 0; x < width/5; x += spacing) {
line (x, y1, x2, y2);
}
for (y = 0; y < height/5; y += spacing) {
line (x1, y, x2, y2);
}

push ();
scale (-1, 1);
translate (-400, 0);
for (x = 0; x < width/5; x += spacing) {
line (x, y1, x2, y2);
}
for (y = 0; y < height/5; y += spacing) {
line (x1, y, x2, y2);
}
pop();

push ();
scale (1, -1);
translate (0, -300);
for (x = 0; x < width/5; x += spacing) {
line (x, y1, x2, y2);
}
for (y = 0; y < height/5; y += spacing) {
line (x1, y, x2, y2);
}
pop();

push ();
scale (-1, -1);
translate (-400, -300);
for (x = 0; x < width/5; x += spacing) {
line (x, y1, x2, y2);
}
for (y = 0; y < height/5; y += spacing) {
line (x1, y, x2, y2);
}
pop();

//curves
var c2 = height;
var c3 = width;
var c4 = height;
var spacing2 = map(mouseX, 0, width, 5, 15);

//curves
noFill();
stroke (0)
strokeWeight (0.5);

for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
curve (0, 0 ,0, 0, c1, c2, c3, c4);
}

push ();
scale (1, -1);
translate (0, -300)
for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
curve (0, 0 ,0, 0, c1, c2, c3, c4);
}
pop();

push ();
scale (-1, 1);
translate (-400, 0);
for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
curve (0, 0 ,0, 0, c1, c2, c3, c4);
}
pop();

push ();
scale (-1, -1);
translate (-400, -300);
for (c1 = width/10; c1 < width*(2/3); c1 += spacing2) {
curve (0, 0 ,0, 0, c1, c2, c3, c4);
}
pop();

}``````

## Laura Rospigliosi (Lrospigl) Project 3

``````var r;
var t;
var a = 100;
var discox;
var p;

function setup() {
createCanvas(640, 480)

}

function draw() {
var x = mouseX + (width / 2);
var y = mouseY;

background(230, x, y);

strokeWeight(0);
fill(a, 200, 200);
ellipse(r, t, 20, 20);
ellipse(r * 2, t, 20, 20);
ellipse(r / 2, -t, 20, 20);
ellipse(r, t / 2, 20, 20);

if (mouseIsPressed) {
ellipse(r, t, 50, 50);
r = random(20, 500);
t = random(20, 460);
a = random(1, 250);
}

//disco man
//shirt
fill(255);
rect (headx - 15, 360, 130, 100, 20);

//hair
fill(40);
arc(headx + 50, 250, 200, 200, PI-QUARTER_PI, TWO_PI+QUARTER_PI, CHORD);
//neck
fill(254, 213, 192);
rect(headx + 35, 300, 30, 80, 20);
//face
fill(254, 213, 192)
//glasses
fill(0)
arc(headx + 30, 290, 30, 30, TWO_PI, PI, CHORD);
arc(headx + 70, 290, 30, 30, TWO_PI, PI, CHORD);
rect (headx + 30, 290, 40, 5);

fill(0, 102, 153, 51);
text("click and drag mouse accross canvas", 5, 480);

if (100 < mouseX & mouseX < (width - 100)) {
}
strokeWeight (0.5)
fill (255, mouseX)
ellipse (p, 50, discox, discox)

if (100 < mouseX & mouseX < (width/2)) {
p = mouseX;
discox = mouseX/3
}
if ((width/2) < mouseX & mouseX < (width - 100)) {
p = mouseX;
discox = (width - mouseX)/3
}
}``````

## Laura Rospigliosi (Lrospigl) Looking Outwards 03 (GROMPIES)

The project I found is titled GROMPIES. It was created by a group of students that were experimenting with liquid plaster set in stitched lycra moulds. They made the made the model through a virtually generated model, and transferring the textile through sowing by hand and sowing with a machine following the pattern of the embroidery of the lycra. By puling and stretching the fabric in different ways, and by pouring the plaster onto it, they realized these odd forms.

I assume that the algorithms consisted of some random variables that helped achieve these curvilinear forms.

While the group did use a computer generated model, they took a lot of control once they used the patterns and shapes generated by the forms, to actually make the 3d model by hand.

Tumblr site (in Spanish)

Dezeen Article

Creators: Brendon Carlin – USA; Kyle Chou – Taiwan/Usalluis Enrique Monzo – Spain; Carlos Piles – Spain; Faysal Tabbarah – Syria

## Lrospigl-LookingOutwards-02

The project I looked at was Flight Patterns by Aaron Koblin. As I was scrolling through the list of projects, this one stood out to me. There was so much happening I couldn’t look away. Unfortunately, there wasn’t much information on the site to let me know how this project came to be. From what I found on the site, they put in information from the FAA into a program that allowed them to visualize the information. This to me is really interesting, mostly because it resembles the most to what we are taught in design about being able to translate quantitive information visually to communicate a certain aspect of it.

It is also incredible how beautiful the outcome of these numbers and patterns are. By giving a visual aspect of the information, it also gives a better understanding of exactly how much america uses planes in concentrated areas.

## Lrospigl-Project02-VariableFaces

``````  var eyeSize = 20;
var faceWidth = 170;
var faceHeight = 170;
var eyeColor = 150;
var shirtColor = 150;

function setup() {
createCanvas(400, 400);
}

function draw() {

background(127, 155, 245);

//hair
strokeWeight(0);
fill (138,109,90);
rect (width/2 - (faceWidth/2) - 10,
height/2 - (faceHeight / 2) - 10,
faceWidth + 20,
faceHeight + 40, 30);

strokeWeight(0);
fill (121,96,79);
rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2) - 10,
faceWidth, faceHeight + 40, 15);

//neck
strokeWeight(0);
fill(239, 205, 182);
rect (width/2 - 10, 200, 20, 200, 10);

strokeWeight(0);
fill(211, 179, 158);
rect (width/2 - 10, 150 + (faceHeight / 3), 20, 100, 10);

strokeWeight(0);
fill(239, 205, 182);
rect (width/2 - (faceWidth/2), height/2 - (faceHeight / 2),
faceWidth, faceHeight, 30);

var eyeXpos = (width / 2 - faceWidth * 0.25);
var eyeYpos = (width / 2 + faceWidth * 0.25);

//eyes
strokeWeight(1);
arc(eyeXpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);
arc(eyeYpos, height / 2, eyeSize, eyeSize, 0, 2*HALF_PI);

//shirt
strokeWeight(0);
fill(76, shirtColor, 91);
rect (width/2 - (faceWidth*1.2 / 2), 340,
(faceWidth * 1.2), 80, 10);

//smile

fill (246,180,211);
arc(200, 200 + (faceHeight / 4),
(faceWidth/3), faceHeight/4, 0, 2*HALF_PI);

//teeth
fill (255,255,255);
arc(200, 200 + (faceHeight / 4),
(faceWidth/3), faceHeight/10, 0, 2*HALF_PI);

//eyebrows
noFill ();
strokeWeight(0.2);
bezier(eyeXpos - 17, height / 2 - 10,
eyeXpos + 10, height / 2 - 20,
eyeXpos + 10, height / 2 - 12,
eyeXpos + 15, height / 2 - 10);

bezier(eyeYpos - 17, height / 2 - 10,
eyeYpos + 10, height / 2 - 20,
eyeYpos + 10, height / 2 - 12,
eyeYpos + 15, height / 2 - 10);

//bangs
strokeWeight(0);
fill (138,109,90)
rect (width/2 - (faceWidth/2) + 2,
height/2 - (faceHeight / 2) - 10,
faceWidth - 4,
faceHeight - (faceHeight/1.6), 10);

}

function mousePressed() {
faceWidth = random(100, 200);
faceHeight = random(100, 250);
eyeSize = random(15, 30);
shirtColor = random(0,150);
}
``````

## Laura Rospigliosi Looking Outwards (week 1 – Portrait)

``````//Laura Rospigliosi
//Section C
//lrospigl@andrew.cmu.edu
//Assignment-01
function setup() {
createCanvas(600,600)
background (125,155,245);
}

function draw() {
background (125,155,245);
//hair
strokeWeight(0)
fill (110,72,39)
rect(140,140,320,400,70);

strokeWeight(0)
fill (110,72,39)
rect(140,190,320,350,20);

strokeWeight(0)
fill (95,60,39)
rect(180,190,240,350);

//shirt
strokeWeight(0)
fill (0,0,0)
rect(130,500,340,280,70);

//neck
strokeWeight(0)
fill (254,213,192)
rect(257,300,90,230,40);

strokeWeight(0)
fill (224,192,176)
rect(257,300,90,170,50);

//face
strokeWeight(0)
fill (254,213,192)
rect(160,160,280,280,70);

//eyes
strokeWeight(0)
fill (109,120,72)
rect(230,240,20,35,10);

strokeWeight(0)
fill (109,120,72)
rect(350,240,20,35,10);

//nose
fill (224,192,176)
triangle(285, 320, 320, 320, 303, 305)
/*
//inner eyes
strokeWeight(0)
fill (0,0,0)
rect(235,245,10,10,10);

strokeWeight(0)
fill (0,0,0)
rect(355,245,10,10,10);
*/

//mouth
fill (246,180,211)
//arc(300, 360, 70, 70, 0, HALF_PI+HALF_PI);
arc(mouseX, mouseY, 70, 70, 0, HALF_PI+HALF_PI);

}``````