ICM

All things computational media

I wanted to expand on the project that Jamie and I worked on together, an insult machine.

Screen Shot 2015-12-03 at 12.22.39 PM

Screen Shot 2015-12-03 at 12.23.56 PMJamie and I talked about expanding the project towards the idea of using a public google .csv file so that people could add their own insults to be added to the rotation of the sketch.

With that in mind I wanted to work in that direction.

So I knew about this website called the Shakespearean Insult Generator

http://www.pangloss.com/seidel/Shaker/

Screen Shot 2015-12-03 at 12.27.33 PMOn this Website Chris Seidel, has a list of words that can be used to make a Shakespearean Insult.

http://www.pangloss.com/seidel/shake_rule.html

 

Screen Shot 2015-12-03 at 12.29.17 PMSo I made a JSON file out of this list and with a little styling, I have brought the Shakespearean Insult Generator into the mobile domain.

www.jeddwatson.com/Projects%20ICM/Final/insultGenerator

Screen Shot 2015-12-03 at 12.38.09 PM

Inspired by Hans Haake’s institutional critique, I wanted to do something with school data in the hopes that I would eventually be able to mine the data for something interesting with possible correlations between schools attended, degrees earned, and loan repayment.

 

I found a website with an api that may be useful, but under the advisement of Jason, I have tried to do something simple on this go around just to get the data working for me.

 

So in this sketch the aesthetics are more important than the data itself.  The school size is mapped to the ellipse size and that’s about it.  I had some problems getting data from anywhere other than New York, but that is something that I can spend more time on and digging into the data dictionary from the site.

Sketch

 

Change the values of the colors in their relative position to each other at the start on the individual sliders in the dom.

Use value:  slider1.value(), slider2.value(),slider3.value()

I want to get the colors to change in proportion to their initial ratio of rgb.  But  I can’t wrap my head around the logic at the moment.

Code:

var text;
var canvas;
var slider1;
var slider2;
var slider3;

var offsetRotate = 50;
var squares = [];
var square;
var square2;
var square3;

square = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,

move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(this.r += 1, this.g += .1759787, this.b += .5);
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30) + offsetRotate;
rect(this.x – 50, this.y – 50, 30, 30);
pop();

}

};
offsetRotate += 35;

squares.push(square)

square2 = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,

move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(this.r + .001, this.g + 0.1759787, this.b += .555, this.a += 15);
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30);
rect(this.x – 25, this.y – 25, 30, 30);
pop();

}
};

offsetRotate += 35;

squares.push(square2)

square3 = {
x: 55,
y: 55,
a: 255,
r: 0,
g: 0,
b: 0,

move: function() {
this.x++;
this.y++;
},
fillnew: function() {
fill(slider1.value());
},
rotate: function() {
push();
translate(width * 0.2, height * 0.25);
this.fillnew
rotate(frameCount * 30);
rect(this.x – 220, this.y – 220, 30, 30);
pop();

}
}
offsetRotate += 150;

squares.push(square3);

function setup() {
slider1 = createSlider(0, 255, 0);
slider2 = createSlider(0, 255, 0);
slider3 = createSlider(0, 255, 0);

slider1.changed(function() {
print(slider1.value(r + .001, g + 0.15, b += .555, a += 15));
});

slider2.changed(function() {
print(slider2.value());
});

slider3.changed(function() {
print(slider3.value());
});

canvas = createCanvas(1080, 600);
canvas.position(50, 100);
background(0);

}

function draw() {

for (var i = 0; i < squares.length; i++) {
squares[i].move();
squares[i].fillnew();
squares[i].rotate();
}

}

 

 

Since there were a few repeatable items in the code for the last project. I tried to use a for loop which yielded interesting results.

function preload() {
img = loadImage(“./assets/le-logo-du-poing-leve-des-black-panther.png”);
mySound = loadSound(‘./assets/Steel Pulse – Uncle George.mp3’);

}
var x, y;
//word loc is word location x
//worloc2 is word location y
//ts is text size
var wordlocX = -5;
var wordlocY = 400;
var ts = 8;

function setup() {
createCanvas(1920, 1080);
frameRate(60);
mySound.setVolume(0.1);
mySound.play();
}

function draw() {
// On mouse click change bg color for a sexy party
// Display moving text that says “power to the people”
{
background(random(225, 255), 100, random(50, 150));
image(img, 500, 200);

ts++
stroke(0, 10)
//for (start; end; incremment){}
for (var i = 0; i < 10; i++) { fill(255, 50 * i); textSize(ts+10*i); text(“Power to the People”, wordlocX, wordlocY – i * 10); //do something print(i); } if (frameCount >= 127) {
ts = 150
}
}
}

sketch

I had some significant trouble working with some of my variables and conditional logic.  Also for an added bonus I was adding a png file and an audio file to try something that I hadn’t done before.

 

First the image wouldn’t load, but that was down to me referencing the file from the wrong folder path.

Second the music wouldn’t play which was due another error on my part of not using all of the reference code for the loadSound function.

Keep plugging away and asking questions and eventually you come across the answer.

 

Here’s the code. I am not giving out the associated files, I don’t want to ruin the surprise.

function preload() {
img = loadImage(“./assets/le-logo-du-poing-leve-des-black-panther.png”);
mySound = loadSound(‘./assets/Steel Pulse – Uncle George.mp3’);

}

var x, y;
//word loc is word location x
//worloc2 is word location y
//ts is text size
var wordloc = -5
var wordloc2 = 400
var ts = 8

function setup() {
createCanvas(1920, 1080);
frameRate(120)
mySound.setVolume(0.1);
mySound.play();
}

function draw() {
// On mouse click change bg color for a sexy party
// Display moving text that says “power to the people”

{
background(random(225, 255), 100, random(50, 150));
image(img, 500, 200);

textSize(ts);
ts++
stroke(0, 10)
text(“Power to the People”, wordloc, wordloc2 – 1);
fill(150);
text(“Power to the People”, wordloc, wordloc2 – 1);
fill(150);
text(“Power to the People”, wordloc, wordloc2 – 1);
fill(150);
text(“Power to the People”, wordloc, wordloc2 – 1);

if (frameCount >= 127) {
ts = 150
}

}

}

 

I played around with  parameters and variables in p5.js

I have had a fair amount of success working with mouseX and mouseY, I used them to change the color and size of an ellipse.

I am working on changing the frame rate as a variable but with little success.  Probably something I am not thinking about right now that is screwing the pooch.

 

sketch

Screen Shot 2015-09-13 at 4.01.20 PM

As you can see I have been getting some interesting results.

I was working on my ICM homework. To which, surprisingly, I was able to do successfully what I wanted to do on my sketch.  Then I began to research what to do next.  Okay watch the Schiffman video, cool.  Watching and following along, download cyberduck, great! Installed great!  Go to the hosting site and find out the name of the ftp and password, great!  Select sftp, skreeeeech! Screen Shot 2015-09-07 at 5.58.44 PM

What does this mean!

So I am looking through the hosting wiki and I can’t find anything to help.  Meh.

Update:

I was able to successfully post the sketch via ftp but not via sftp
Update:

I figured out  how to switch from ftp to sftp.  It was on the github page for our class homework. Duh.

Update Sept 8 at 12:53pm

I am learning all sorts of things about code just from having to upload my homework to github.  Syntax is very important.

Update Sept 8 at 12:04pm

After playing around with lots more parameters I think I have arrived on something I like. Or at least I hope my classmate likes. 🙂

sketch