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

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

On 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

So 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

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();
}

}

I was playing around with some stuff using the function and the .this scenario that was discussed in class. Still having trouble with the for loops, and I want to put a gradient on the background but I like the results so far.

Sketch

Update…

new sketch 10_7

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

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!

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