November 2020 – Page 29 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

Project-09-Portrait

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

//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 preload(){

	portrait=loadImage("https://i.imgur.com/J6Im42B.jpg");
}


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);
 //gradually "open" the portrait
 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);

    }
    
  }
}

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.

Designer Ying Gao Creates Robotic Clothing That Reacts To The Chromatic Spectrum

Ying Gao, 2019, “flowing water, standing time”.

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

Project 09: Portrait

sketch Download

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


var size = 10 //Default size of stroke

function preload()
{
	//A profile picture
	img = loadImage("https://i.imgur.com/1XXSpjL.png")
}

function setup()
{
	createCanvas(480,480);
	img.loadPixels(); //Load pixels

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

	//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 Download

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

function preload() {
	flora = loadImage("https://i.imgur.com/tXb4FAg.jpg");
}

function setup() {
    createCanvas(480, 480);
    background(255);
    flora.loadPixels();
    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 preload() {
    img = loadImage("https://i.imgur.com/uwh5nXO.jpg");
}

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

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.