White Noise on TV Simulation

Computational Media

Group Members

Amena Hayat

Sofia Luisa

The inspiration for this week’s ICM assignment came a bit late. Me and Sofia were trying different things at first, from pointillism sketches to Eadward Muybridge’s horse. But after not being able to conceptualise an algorithm for either of those, we tried our hand at the white noise TV screen:

You can almost hear it

To build this with for loops was a challenge, because we had to incorporate two different designs in them and nest them together with the same variable.

We got the white noise working, with the stripes on a click, in a separate file:

The next thing was to make it fun and interactive. For that we fit the code onto the dimensions of a TV we created, and made the stripes appear at the click of the button on this TV. If it looks easy, well it was not.

Here’s the final thing, CLICK:

Our Code:

// coordinates
let x = 0
let y = 0

//height and width
let wh = 5

//button coordinates
let bx = 342;
let by = 190;
let bsize = 40;

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

function draw() {
background(237, 170, 37);
print(“X=”, mouseX, ” Y=”, mouseY);

//TV box:
strokeWeight(7);
stroke(137, 136, 134);
line(196, 130, 204, 10);
line(200, 140, 358, 16);
strokeWeight(3);
stroke(186, 184, 180);
line(191, 130, 199, 10);
line(195, 140, 353, 16);
noStroke();
fill(186, 184, 180);
ellipse(204, 10, 15, 15);
ellipse(360, 14, 15, 15);
fill(137, 136, 134);
ellipse(207, 10, 15, 15);
ellipse(362.5, 14, 15, 15);
strokeWeight(10);
stroke(63, 36, 10);
fill(114, 65, 18);
rect(5, 130, width – 10, height – 145, 10);
strokeWeight(4);
fill(0);
rect(18, 135, 280, 245, 10);
strokeWeight(6);
stroke(168, 164, 159);
fill(112, 109, 106);

ellipse(bx, by, bsize, bsize); //button

strokeWeight(6);
stroke(0);
line(307, 242, 378, 242);
line(307, 252, 378, 252);
line(307, 262, 378, 262);
line(307, 272, 378, 272);
line(307, 282, 378, 282);
line(307, 292, 378, 292);
line(307, 302, 378, 302);
line(307, 312, 378, 312);
line(307, 322, 378, 322);
line(307, 332, 378, 332);
//noise:
noStroke();
//how much x coordinate grows
push();
for (x = 25; x <= (293); x += 10) {  //TVscreen limits
for (y = 141; y <= (375); y += 10) {
pop();

if (mouseIsPressed == true){  //&& if (dist(mouseX,mouseY,bx,by)<bsize/2)
fill(random(0, 255), random(0, 255), random(0, 255));
rect(x – 3, y * 6, (width / 6) – 55, -height * 6);
fill(237, 170, 37);
rect(22,0,275,125);
rect(21,390,275,100);
strokeWeight(7);
stroke(137, 136, 134);
line(196, 130, 204, 10);
line(212, 130, 358, 16);
strokeWeight(3);
stroke(186, 184, 180);
line(191, 130, 199, 10);
line(198, 135, 353, 16);
noStroke();
fill(186, 184, 180);
ellipse(204, 10, 15, 15);
ellipse(360, 14, 15, 15);
fill(137, 136, 134);
ellipse(207, 10, 15, 15);
ellipse(362.5, 14, 15, 15);
fill(63, 36, 10);
rect(21,125,275,13);
rect(21,379,275,11);

} else {
fill(random(0, 255), 0, 0);
rect(x, y, wh, wh);
fill(0, 0, random(0, 255));
rect(x + 2, y + 2, wh, wh);
fill(100, random(0, 255), 0);
rect(x – 3, y – 3, wh, wh);
}
}
}
}

 

 

Bye now, sweet dreams.

Leave a Reply

Your email address will not be published. Required fields are marked *