## Project-09-Portrait

For this project, I want to convey the feeling of the breeze with the moving waves made of pixels.

sketch
``````//jiaqiwa2; Jiaqi Wang; Section C
var portrait;
//I learned & referenced how to make a moving sin wave from this example:
//https://p5js.org/examples/math-sine-wave.html
let xspacing = 5; // Distance between each horizontal location
let w; // Width of entire wave
let theta = 0.0; // Start angle at 0
let amplitude = 20.0; // Height of wave
let period = 700.0; // How many pixels before the wave repeats
let dx; // Value for incrementing x
let yvalues; // Using an array to store height values for the wave
var num=8;

}

function setup() {
createCanvas(460,400);
w = width + 16;
dx = (TWO_PI / period) * xspacing;
yvalues = new Array(floor(w / xspacing));
frameRate(10);

}

function draw() {
//image(portrait,0,0,460,400);
background(250);
if(num<40){
num+=0.5;
}

for(var i=0;i<num;i++){
var yUpper;
var yLower;

yUpper=height/2-i*5;
yLower=height/2+i*5;
amplitude+=1;
if(amplitude>40){
amplitude-=1;
}

calcWave();
renderWave(yUpper);
renderWave(yLower);

}

}

function calcWave() {
// Increment theta (try different values for
// 'angular velocity' here)
theta += 0.02;

// For every x value, calculate a y value with sine function
let x = theta;
for (let i = 0; i < yvalues.length; i++) {
yvalues[i] = sin(x) * amplitude;
x += dx;
}

}

function renderWave(Start) {
noStroke();

// draw the wave with an ellipse at each location
for (let x = 0; x < yvalues.length; x++) {
//y postition of the ellipse
var y=Start + yvalues[x];
//x position of the ellipse
var X=x * xspacing;
//find the corresponding pixel's location on my portriat
var Px=map(X,0,460,0,portrait.width);
var Py=map(y,0,400,0,portrait.height);
//check if this pixel is within the canvas.
if(y>0 & y<400){
let pix = portrait.get(Px, Py);
fill(pix);
ellipse(X, y, 7, 7);

}

}
}``````

## LookingOutwards-09

I think this project is very performance-oriented in the way it captures the nuance of the changing surroundings from a more philosophical aspect. In creating the garments, the designer was inspired by a patient whose self-identity changes depends on the surroundings. I do agree with Isabel on how this project embodies the complexity and rhythm of the changing environment. To a certain extend, I also agree with her notion on how this project questions the traditional assumptions about clothing with the use of technologies and computation, but I believe the innovative part is not all about combining robotics with fabrication. On a deeper level, it challenges us to reflect on the role of the clothes and the wearer. In the past, human chose what to wear base on their needs, which is constantly changing as the weather, social occasion, and many other variables would be taken into considerations, but this new garment has its judgment, whether rational or not, on how to react to the immediate present.

I would say that the message that the creator wanted to deliver is more about the philosophical relationship between individuals and the changing surrounding, and less on the algorithm and the tools she used.

@Isable Xu LookingOutwards-03: https://courses.ideate.cmu.edu/15-104/f2020/2020/09/19/lookingoutwards-03-4/

## Project 09: Portrait

sketch
``````//Nicholas Wong
//Section A
//nwong1@andrew.cmu.edu
//Assignment 09

var size = 10 //Default size of stroke

{
//A profile picture
}

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

//Set modes
imageMode(CENTER);
rectMode(CENTER);
textAlign(CENTER);

//Set custom framerate
frameRate(120)

}

function draw()
{
//Offset canvas to fit my face in the middle
translate(-100,10)

//Get random x and y coordinates
let x = floor(random(width));
let y = floor(random(height));

//Get color of coordinates
let pix = img.get(x,y);

//Create strokes
drawStrokes(x,y,pix);

drawInstructions();
}

function drawStrokes(x,y,pix)
{
push();
translate(100,0) //Recenter canvas
translate(x,y);
rotate(revolveMouse(x,y));//Rotate strokes around mouse

//Draw stroke
stroke(pix, 128);
strokeWeight(0.25*size + random(0,2)); //Stroke size influenced by mouse scroll
line(0,-size + random(0,2),0,size+ random(0,2)); //Stroke length based on mouse scroll
pop();
}

function revolveMouse(x,y)
{
//Generates angle from mouse position and (x,y) coordinate
let dx = mouseX - x;
let dy = mouseY - y;
let angle = atan2(dy,dx)
return angle; //Returns angle
}

function mouseWheel(event)
{
//Check if scrolling up
if (event.deltaY < 0)
{
size++; //Increase size
}
else //Scrolling down
{
size -= 1; //Decrease size
}
}

function drawInstructions()
{
//Text box at bottom of canvas
push();
translate(100,10);
noStroke();
fill(0)
rect(width/2,height-50,285,35)
fill(255)
textSize(10)
text('SCROLL MOUSEWHEEL TO CHANGE STROKE SIZE',width/2,height-47)
pop();
}

``````

Strokes radiate and rotate around mouse pointer, mouse scrolling changes the stroke size; scroll up to increase size, scroll down to decrease size. Here are some examples with varying mouse positions, stroke sizes, and durations.

## Project – 09

Here is my self portrait done with circles and words when the mouse is moved. Because the image is filled with color it is hard to see the full image through the code but I like it that way because it adds to the ambiguity of the picture

portrait 09
``````var flora;
var words =['flora' , 'xia' , 'FX' , 'fleur']

}

function setup() {
createCanvas(480, 480);
background(255);
frameRate(2000);
}

function draw() {
//set up variables
var x = random(width);
var y = random(height);
var ix = constrain(floor(x), 0, width-1);
var iy = constrain(floor(y), 0, height-1);
//creating the text at mouse
var colorAtMouse = flora.get(mouseX, mouseY); //color at pixel
fill(colorAtMouse);
textSize(random(2, 15));
text(random(words), mouseX, mouseY);
//creating the shape that appears randomly
var colorAtXY = flora.get(ix, iy);
fill(colorAtXY);
noStroke();
circle(x, y, random(1, 8));
}
``````

## Project 09 – Computational Portrait

sketch
``````/*
* Eric Zhao
* ezhao2
*
* Computational portrait that "draws" an image using
* an existing image. Clicking the mouse changes the
* orientation of the randomly drawn rectangles in
* relation to the center.
*/

let img;
let smallPoint, largePoint;
let rotated = false;

}

function setup() {
createCanvas(400, 600);
axisShort = 10;
axisLong = 30;
imageMode(CENTER);
rectMode(CENTER);
noStroke();
background(255);
}

function draw() {
push();
cursorX = constrain(mouseX, 0, width);
cursorY = constrain(mouseY, 0, height);
let pointillizeX = map(mouseX, 0, width, axisLong/2, axisLong);
let pointillizeY = map(mouseX, 0, width, axisShort/2, axisShort);
//changes width and length of rectangles drawn based on mouse position
let x = floor(random(img.width));
let y = floor(random(img.height));
let pix = img.get(x, y);
fill(pix, 128);

//orients rectangles around center of canvas
translate(width/2, height/2);
x = x-width/2;
y = y-height/2;
rotate(atan2(y, x));
if(rotated == true){
rect(dist(x, y, 0, 0), 0,
pointillizeY, pointillizeX, pointillizeY/2);
} else {
rect(dist(x, y, 0, 0), 0, 50,
pointillizeY, pointillizeY/2);
}
pop();
}

function mousePressed(){
//slightly greys out existing composition
push();
fill(255, 192);
rect(width/2, height/2, width, height);
pop();
//changes rectangle orientation b/t parallel and perpendicular
switch(rotated){
case true:
rotated = false;
print(rotated);
break;
case false:
rotated = true;
print(rotated);
break;
}
}

``````

I wanted to see if there was a way to unify the pointillism example code to make the developing composition feel more cohesive. My portrait draws random strokes (rounded rectangles) of varying width and height based on the mouse position, all oriented towards the center of the canvas. Clicking on the canvas causes the underlying content to be slightly greyed out and the orientation of the rectangles will change (from the short side facing the center to the long side facing the center and vice versa).

Picture is of my friend trying to be fancy while drinking bagged Earl Grey tea, a very unfancy beverage.