//Anthony Pan
//Section C
//empty variable to hold/load portrait
var img;
//load portrait
function preload() {
img = loadImage("https://i.imgur.com/OZnUWbW.jpg");
}
//set up canvas
function setup() {
createCanvas(420, 280);
}
//create pixelation effect using mouseX position
function draw() {
background(220);
//diplay image
image(img, 0, 0, width, height);
//constrain mouseX position to canvas and change diamter of circles according to mouseX position
var mousePosition = map(constrain(mouseX, 0, 280), 0, width, 0, 20);
//create circles
for(var row = 0; row < 32; row++) {
for(var col = 0; col <= 48; col++){
var x = col * 10;
var y = row * 10;
//sample pixel color
var sampleColor = img.get(x*15, y*15);
noStroke();
fill(sampleColor);
//draw circle
circle(x + 10, y + 10, mousePosition);
}
}
}
I wanted to create a portrait that would get pixelated as you moved the mouse from left to right. It was cool to see it become stylized, almost like I was applying a filter to the image.
This week I decided to look into Caroline Sinders, a machine-learning-design researcher and artist. Her work in recent years has been focused on examining the intersections of technology’s impact in society, interface design, AI, abuse, and politics in digital/conversational spaces. She also is the founder of Convocation Design + Research where they explore and study the intersections of machine learning, user research, and designing for the public good. I wanted to focus on her project “Higher Resolutions” in 2019, a project mainly centered around the state of power and privacy online. They use interactive art installations as well as talks from professionals in the field to educate their audience members about the topic. Some art installations within the space include facial recognition, website tracking, and harmful content recommendation algorithms. Participants can also vote on a feature to ban and view the floor schematic at a closer level. I found her work interesting because I am also working on a data security and privacy research project in my design research class. I found it refreshing to see someone else’s perspective and approach to the problem space.
var compportraitImg;
function preload() {
ImageURL = "https://i.imgur.com/ZTxOcmt.jpg";
compportraitImg = loadImage(ImageURL);
}
function setup() {
// canvas proportional to image size
createCanvas(400, 480);
compportraitImg.loadPixels();
background(220);
frameRate(300);
}
function draw() {
//have the correct color show at right location
var kx = floor(random(compportraitImg.width));
var ky = floor(random(compportraitImg.height));
var colorLoc = compportraitImg.get(kx, ky);
noStroke();
fill(colorLoc);
//scale to size of canvas
x = map(kx, 0, compportraitImg.width, 0, width);
y = map(ky, 0, compportraitImg.height, 0, height);
var j = dist(width/2, height/2, x, y);
j = j % 20;
bubble(x, y, j, 4);
}
function bubble(x, y, radius, npoints) {
angle = PI / npoints;
beginShape();
for (let a = 0; a < PI; a += angle) {
sx = x + cos(a) * radius;
sy = y + sin(a) * radius;
vertex(x + cos(a) * radius, y + sin(a) * radius);
}
endShape();
}
I made my “custom pixel” in the shape of half of a hexagon and made it such that they populate the canvas in a circle pattern and leave some of the background peeking through.
Project Title: Revealing the hidden emotional data contained in videos of U.S. Presidential speeches
Artists: Kim Rees
The feather is quite straight indicating neutrality and the barbs are short indicating relatively more calmness when speaking.
The creators first used the Microsoft Emotion API and then pulled out the second-ranked emotion for each event where ‘neutral’ was first-ranked. I admire the universality of this project, as they chose to focus on emotions that are understood cross-culturally (happiness, fear, etc); I admire this project because it enables even more people to connect with the data in a meaningful way and also takes what some don’t often immediately relate with distinct feelings (besides perhaps hope and pride) and connects the two. I admire how they compared inaugural addresses, not just focusing on one president. I admire this because it’s fascinating to see how some speak with such intensity, which is represented by the length of each barb, and it got me thinking about the speeches I’ve listened to and if I find such information representations to align with my perspective. Rees studied computer science. Rees co-founded Periscopic, which is a data-visualization company and worked there for over a decade. Broadly speaking, Rees focuses on human-centered data and she helped companies and organizations promote information transparency and public awareness by telling their data stories and matching algorithms to values.
/*Name:Camellia(Siyun) Wang;
Section: C;
Email Address: siyunw@andrew.cmu.edu;*/
https://imgur.com/qOtkTrJ
var img;
var i = 0;
var a = 0;
function preload(){
img = loadImage("https://i.imgur.com/qOtkTrJ.jpg");
}
function setup(){
createCanvas(380, 480);
background(0);
img.resize(380, 480);//resize the image to fit into canvas
img.loadPixels();
}
//based on the example code
/*function draw(){
var sw = map(mouseX, 0, width, 1, 5);//
var x = random(img.width); //randomly select pixels of the image
var y = random(img.height);
var pointColor = img.get(x, y); //select the color of the chosen pixel
stroke(pointColor);
strokeWeight(sw);
line(x,y,x+5,y);
}*/
//based on the simple nested loop logic
/*function draw(){
var i = random ()
pointColor = img.get(i, a);
noStroke();
fill(pointColor);
ellipse(i,a,random(1,5),random(3,7));
i += 5;
if(i >= 380){
a += 5;
i = 0;
}
}*/
//based on spiral motion
var angle = 0;
var radius = 0;
var r = 6.2;
function draw() {
var center_x = width / 2;
var center_y = height / 2;
var x = radius *cos(radians(angle));
var y = radius *sin(radians(angle));
pointColor = img.get(width/ 2+x, height/2+y);
//pick color of the chosen pixel from the center of the image
//picking in spiral motion which corresponds to the sipral motion of the drawn ellipses
push();
//translate the canvas to draw the spiral from the center outwards
translate(center_x, center_y);
noStroke();
fill(pointColor);
circle(x, y, r);
radius += 0.1;
angle += 5;
r += 0.01;
pop();
}
I started this project with duplicating the example code, then I used the nested loop logic to do the second trial. However, the way this portrait was drawn did not seem interesting enough, since there’s no change in motion and each drawn square. Therefore, I changed the drawing logic to the spiral motion. In this way, the portrait is drawn from the center in gradually amplifying ellipses, so that the final piece has a clearer shape of face in the center and blurry periphery.
First Trial-Duplicated VersionSecond Trial-Nested LoopFinal Piece-Spiral Version
var babyImg;
var adj;
function preload() {
babyImg = loadImage("https://i.imgur.com/9bQND1O.jpg");
adj = ["cute", "baby", "adorable", "sweet", "lovely", "endearing", "tiny", "cutesy", "kawaii"];
print(adj); //adjectives that describe the baby
}
function setup() {
createCanvas(480, 480);
babyImg.resize(480, 480); //resize the scale of the image to fit the canvas
background(0);
imageMode(CENTER); //positioning the image as center
babyImg.loadPixels(); //loading the adjectives of the baby image
}
function draw() {
var px = floor(random(babyImg.width)); //randomly select pixels of the image
var py = floor(random(babyImg.height));
var pc = babyImg.get(px, py); //bring the color of the chosen pixel
fill(pc, 255);
textSize(12);
textFont('Georgia');
text(adj[Math.floor((Math.random()*adj.length))], px, py);
}
Baby image before and after
While exploring through Imgur in search of images, I found an adorable photo of a smiling baby and I was able to come up with many different adjectives (e.g. cute, adorable, sweet, lovely, etc.) when I first saw this baby. I decided to apply this thought to the project by using the words to render and display this image. It was absolutely delightful watching the rendering process of this cute baby image.
An interactive installation, Computer Orchestra, was first composed by Fragment.in, which is a Switzerland-based artist collective of Laura Nieder, David Colombini, and Marc Dubois. This crowdsourcing platform enables the audience to participate and lead their own orchestra by either uploading their own or downloading music samples to incorporate into the arrangement with the computers. People can simply use their hand gestures to direct and conduct the orchestra. I was really fascinated by how the Kinect motion controller detects the body movements of the conductor and transfers information to Processing through SimpleOpenNI library, where these signals are delivered to the remaining computers with the help of wifi. I think this style of generating art is really creative as it uses each assigned samples to further create an aesthetic visual feedback obtained from the generated sounds. I absolutely admire how this project enriches the experience of the user in both auditory and visual manners. Fragment.in’s artistic sensibilities significantly arises for offering the sense to the audience of being able to take control of the digital technology within one’s hands.
Filipa Valente is an exhibit designer and architect who specializes I the development of designs for experiences, exhibits, and architecture. She has a background in architecture and a practice as a media artist. I think that her work on mobility is particularly intriguing. Mobility is a field that has a lot of potential with innovative design. I’m really interested in how mobility plays a role into redefining spatial design.
Volvo Pure Tensions Pavilion
I was fascinated by Filipa Valente’s “The Pure Tension Pavilion” for Volvo Italia. This project is a design of a portable charger for the new Volvo V6 plug-in hybrid electric car which not only charges the car but also flat-packs to fit in the trunk of the car and assembles in less than one hour. It is also very aesthetically pleasing with its organic design, also serving as a structure that roofs the vehicle.
First reading the instructions for this project, I was reminded of mosaic effect on images.
I proceeded to work with square pixels, but I realized that using a rounded shape like an ellipse could create a more organic jittery effect on my animated portrait.
I started off by playing with different shapes and ways to depict the image. Here are some of the variations I tried.
cross hatching
large circles
star shapes made of circles, controlled by mouse location
squares made of circles, with black shadows
The variation I chose drew the image with randomly bouncing particles. When pressing a key, the color of the particles would be rainbow. When pressing the mouse, larger, black particles moved around the page to act as “erasers”.
//Alana Wu
//ID: alanawu
//Project 09
var img;
var balls = [];
var ballNum = 15;
function preload()
{
img = loadImage ("https://i.imgur.com/2U02mf4.jpg");
}
function makeBall (ax, ay, adx, ady)
{
var a = {
x: ax,
y: ay,
dx: adx,
dy: ady,
dirX: 1,
dirY: -1,
stepFunction: moveBall,
drawFunction: drawBall
}
return a;
}
function moveBall ()
{
//bounce off of walls
if (this.x >= 338 || this.x <= 0)
{
this.dirX *= -1;
}
if (this.y >= 400 || this.y <=0)
{
this.dirY *= -1;
}
this.x += this.dx*this.dirX + random(-3, 3);
this.y += this.dy*this.dirY + random(-3, 3);
}
function drawBall ()
{
//color of ball = pixel from image in that location
var col = img.get(this.x, this.y);
fill (col);
//when key is pressed, taste the rainbow :)
if (keyIsPressed)
{
fill (random(255), random(255), random(255));
}
//draws balls
circle (this.x, this.y, 5, 5);
//when mouse is pressed, black jittery particles that act as erasers
if (mouseIsPressed)
{
fill (0);
circle (this.x + random(40), this.y + random(40), 20);
}
}
function setup()
{
createCanvas(338, 400);
background(0);
noStroke();
//fits image to canvas size
img.resize(width, height);
//makes objects for each ball
for (var i = 0; i < ballNum; i++)
{
a = makeBall (0,0, random(5), random(5));
balls.push(a);
}
}
function draw()
{
for (var i = 0; i < balls.length; i++)
{
balls[i].drawFunction();
balls[i].stepFunction();
}
}
//other shapes and ideas I played with, but didn't use
function ripple2 (size)
{
for (var x = 0; x < size; x+=5)
{
for (var y = 0; y < size; y+=5)
{
fill (0);
circle (mouseX + x + 8, mouseY + y + 8, 5);
circle(mouseX - x + 8, mouseY - y + 8, 5);
}
}
for (var x = 0; x < size; x+=5)
{
for (var y = 0; y < size; y+=5)
{
var col = img.get(mouseX + x,mouseY +y);
fill(col);
circle (mouseX + x, mouseY + y, 5);
var col2 = img.get(mouseX - x, mouseY - y);
fill (col2);
circle(mouseX - x, mouseY - y, 5);
}
}
}
function shape1 (x, y, dx, dy) //diagonal lines
{
for (var y = 0; y < height; y += dy)
{
for (var x = 0; x < width; x += dx)
{
var col = img.get(x, y);
strokeWeight (mouseX/100);
stroke (col);
line (x, y, x + dx, y + dy);
}
}
}
function shape2 (x, y, size) //circles, animated if w/ random
{
for (var y = 0; y < height; y += size)
{
for (var x = 0; x < width; x += size)
{
var col = img.get(x, y);
fill(col);
circle (x, y, size);
}
}
}
function shape3 (x, y, w, h) //moving ellipse in a ripple effect
{
for (var y = 0; y < height; y += h)
{
for (var x = 0; x < width; x += 15)
{
var col = img.get(x, y);
fill(col);
ellipse (x, y, random(35), h);
}
}
}
function shape4 (x, y, size) //triangles that slowly get bigger along the diagonal
{
for (var y = 0; y < height; y += size/3)
{
for (var x = 0; x < width; x += size)
{
var col = img.get(x, y);
fill(col);
triangle (x, y, x + size, y + size, x - size, y + size);
}
size += size/10;
}
}
function ripple ()
{
var x = 0;
var y = 0;
var r = 5;
push();
for (var j = 0; j < count; j++)
{
for (var i = 0; i < count; i++)
{
x = r*cos(radians(i*200));
y = r*sin(radians(i*200));
var col = img.get(mouseX + x, mouseY + y);
fill (col);
circle (mouseX + x, mouseY + y, 5, 5);
}
r += 5;
}
pop();
}
function drawIt () //uncovers image w/ mouse location
{
var col = img.get(mouseX, mouseY);
fill (col);
circle (mouseX, mouseY, 15, 15);
}
![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](../../../../wp-content/uploads/2023/09/stop-banner.png)
