//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Final Project
//This project is an interactive exploration of the psychological phenomenon
//of random association. Basically it is a random word generator that provides
//a response to user input
//I used Donald Trump Tweets as the source text
var trumpTweets = ["beautiful","important","evening","man",
"woman","never","forgotten","again","together","never","happy","birthday",
"service","fantastic","first","time","really","good","meeting","great",
"chemistry","very","open","successful","professional",
"protesters","incited","media","very","unfair","love","fact","small",
"groups","protesters","last","night","passion","great","country","together","proud",
"busy","planned","soon","making","important","decisions","people",
"running","government","express","deepest","gratitude","served","armed","force",
"prove","great","time","unite","losing","subscribers","poor",
"inaccurate","coverage","letter","subscribers","apologizing","coverage","wonder",
"change","doubt","congratulate","very","nice","express","best","wishes","very",
"nice","great","great","great","people","incredible","states","believe",
"countries","acquire","nuclear","weapons","dishonest","never","interview","tonight",
"game","enjoy","especially","second","third","speeches","intensity",
"large","rallies","great","supporters","election","total","popular",
"campaign","bigger","easily","actually","genius","including","smaller","play",
"different","very","organized","process","decide","positions","finalist","trying",
"children","typically","news","story","failing","totally","wrong","transition",
"foreign","leaders","always","available","upset","fools","coverage","transition",
"team","hours","fantastic","call","advised","plant","great","confidence",
"working","weekend","great","women","helping","make","America","great","again",
"settled","lawsuit","small","fraction","potential","award","focus","country",
"winning","trial","wonderful","future","harassed","night","theater","cast","cameras",
"blazing","safe","special","place","very","rude","very","good","apologize",
"producers","overrated","immediately","apologize","terrible","behavior","numerous",
"patriots","various","positions","necessary","make","America","great","again",
"totally","one-sided","biased","show","nothing","funny","equal","time","considered",
"impressive","yesterday","good","relationship","smarter","ability","news","update",
"policy","prior","interests","properties","world","crooked","media",
"deal","people","represent","nasty","meantime","complaints","formation","talented",
"terrible","beautiful","exciting","working","scam","defeated","demoralized",
"tabulation","victory","people","illegally","convincingly","serious","fraud","media",
"terminate","embarrassed","burn","consequences","wildfires","terrible","business",
"tragic","wonderful","history","interesting","billions","unwatchable","funny",
"impersonation","worse","regulations","employees","retribution","expensive",
"mistake","losing","scam","massive","complex","thrilled","press","cancel","invest"];
var instrtText0 = "You are here to find the meaning.";
var instrtText1 = "I am here to help you find the meaning";
var instrtText2 = "So this is how this is going to work:";
var instrtText3 = "You give me a word, then I give you a word.";
var instrtText4 = "This will happen six times, after which you must tell me what it all means.";
var instrtText5 = "Got it? Good.";
var sourceWords1 = []; var sourceWords2 = []; var sourceWords3 = [];
var inputWords; var ar = [];
var inputCt = 0; var currentWord; //variables for keeping up with current input words
var jBiebs; //holds song
var myWord; var myGenWords = []; //variables for generator words
var landImgs = [];
var usedImgs = [];
var randNum;
var wordX; var wordY; //controls word position
var font;
var scaler8; // controls rate of scaling
var instruction = [instrtText0,instrtText1,instrtText2,instrtText3,
instrtText4,instrtText5];
var explaination = ["This program was testing the psychological phenomenon of random association.",
"Random association is the propensity for humans to try to find",
"meaning or connection among random events. All of the words displayed",
"were generated randomly, so any connection you found was coincedental."]
var realExplain = ["So, if you guessed Donald Trump you're not entirely wrong.",
"All words were sourced from Trump's tweets since the election.",
"However, words were still generated randomly, but the majority of",
"what he says is random and has no meaning, so it's still fitting."]
function preload(){
var landURLs = [];
landURLs[0] = "http://i.imgur.com/yfhTfHG.jpg";
landURLs[1] = "http://i.imgur.com/VvhFDxD.jpg";
landURLs[2] = "http://i.imgur.com/AuLBi3f.jpg";
landURLs[3] = "http://i.imgur.com/rcqJJjl.jpg";
landURLs[4] = "http://i.imgur.com/nDdVmCQ.jpg";
landURLs[5] = "http://i.imgur.com/JrSGcKa.jpg";
landURLs[6] = "http://i.imgur.com/k2eT8Em.jpg";
landURLs[7] = "http://i.imgur.com/VzoUiOv.jpg";
landURLs[8] = "http://i.imgur.com/ck0OEfD.jpg";
jBiebs = loadSound("WDYM.wav");
for(var i = 0; i < landURLs.length; i++){ //loads images into array
landImgs[i] = loadImage(landURLs[i]);
}
}
function setup() {
createCanvas(640, 480);
textAlign(CENTER);
for(var i = 0; i < trumpTweets.length; i++){
if(trumpTweets[i].length % 2 === 0){ //breaks up source words based on wordlength
sourceWords2.push(trumpTweets[i]);//even length words
} else if(trumpTweets[i].length % 2 === 1){ //breaks up source words based on wordlength
sourceWords3.push(trumpTweets[i]);// odd length words
}
}
for(var i = 0; i < landImgs.length; i++){
landImgs[i].filter("gray"); //puts all images in grayscale
landImgs[i].loadPixels();
}
jBiebs.play(); //play justin bieber song
}
function draw() {
background(0);
scaler8 = frameCount;
//--------------------page reloads based on the number of times input entered
if(inputCt == 0){
start();
}
if(inputCt == 1){
background(0);
instructions();
}
if(inputCt >= 2){
for (var i = 0; i < ar.length; i++){ //displays generated words
background(220);
image(landImgs[randNum],0,0);
fill(255);
textSize(12);
textFont("Helvetica");
textStyle(ITALIC);
text("Your word: " + currentWord, width/2, 20);
textSize(72);
textStyle(NORMAL);
textFont(str(font));
push();
fill(0);
translate(wordX,wordY)
scale(scaler8/2000);
text(myGenWords[i],0,0);
fill(255);
text(myGenWords[i],4,0);
pop();
textSize(18);
textStyle(ITALIC);
textFont("Helvetica")
text("Press ENTER to continue", width/2, height-40);
}
}
if(inputCt == 8){ //page for getting last user input
background(0);
finale();
}
if(inputCt > 8){ //final pages
background(0);
explain();
}
if(inputCt == 10){
background(255);
fill(0);
textSize(64);
text("*",100,100);
textSize(16);
for(var i = 0; i < realExplain.length; i++){ //displays text line by line
text(realExplain[i],width/2,height/2+(30*i));
}
}
}
//---------does a lot based on user hitting enter
function keyPressed(){
if (keyCode === ENTER){
inputCt = inputCt + 1; //incraments input count by one
if((inputCt >= 2) & (inputCt < 8)){
inputWord = prompt("Please type a word"); //asks for user input
while(inputWord.length < 2){
inputWord = prompt("You must type a word");
}
currentWord = inputWord;
currentWordL = inputWord.length;//used in other functions to compare
ar.push(inputWord);
backgroundChooser();//changes background every time enter is pressed
wordCheck();
wordPosition();
fontSelect();
}
if(inputCt == 9){
inputWord = prompt("Tell me what it means");
while(inputWord.length < 2){
inputWord = prompt("You must type a word");
}
}
}
}
//------------chooses background image randomly
function backgroundChooser(){
randNum = int(random(0,landImgs.length-1));
var radIndex = usedImgs.indexOf(randNum); //searches used imgaes to see if new random number has been used
if(radIndex == -1){
usedImgs.push(randNum); //if not add it to the array and use it
} else{
backgroundChooser(); //if it is repeated num, recursively call
//function to generate another word
}
println(usedImgs);
}
//-------------checks to make sure the generated word has not been used already
function wordCheck(){
if(currentWordL % 2 === 0){
myWord = sourceWords2[int(random(0,sourceWords2.length))];
for(var i = 0; i < myGenWords.length; i++){
if(myWord === myGenWords[i]){
myWord = sourceWords2[int(random(0,sourceWords2.length))];
}
}
}else {
myWord = sourceWords3[int(random(0,sourceWords3.length))];
for(var i = 0; i < myGenWords.length; i++){
if(myWord === myGenWords[i]){
myWord = sourceWords3[int(random(0,sourceWords3.length))];
}
}
}
myGenWords.push(myWord); //adds word to array if it hasnt been used yet
}
//--------------selects font based on whether position in array is even or odd
function fontSelect(){
var idx = trumpTweets.indexOf(myWord);
if((idx < 100) & (idx % 2 == 0)){ //if in first half and even position
font = "Copperplate";
}else if((idx < 100 ) & (idx % 2 == 1)){ //in first half and odd position
font = "Impact";
}else if ((idx >=100) & (idx % 2 == 0)){// in second and even position
font = "Arial";
}else if ((idx >=100) & (idx % 2 == 1)){ //in second and odd position
font = "Georgia";
}
}
//----------choose random position of generated word
function wordPosition(){
wordX = int(random(200,width-200));
wordY = int(random(100,height-175));
}
//----start page-------------------
function start(){
background(landImgs[8]);
textFont("Palatino");
textStyle(NORMAL);
textSize(80);
fill(0);
text("What does it",width/2-4, 120);
fill(255);
text("What does it",width/2, 120);
textSize(145);
push();
fill(0);
textFont("Helvetica")
translate(width/2,240);
text("mean",0, 0);
fill(255);
text("mean",4, 0);
pop();
textFont("Palatino");
for(var i = 0; i < width - 180; i = i + 50){
textSize(96);
fill(0);
text("?", 95 + i, 360);
fill(255);
text("?", 99 + i, 360);
}
textSize(28);
textStyle(ITALIC);
textFont("Helvetica");
text("Press ENTER to find meaning",width/2, 420);
}
// ----- displays instructions ---------------------
function instructions(){
fill(255);
textSize(18);
textStyle(NORMAL);
for(var i = 0; i < instruction.length; i++){
text(instruction[i],width/2,(25*i)+(height/2-80));
}
textSize(28);
textStyle(ITALIC);
text("Press ENTER to begin",width/2,height-80);
}
//-----displays all generated words and asks for final input
function finale(){
fill(255);
textStyle(NORMAL)
textSize(44);
textFont("Helvetica");
textStyle(BOLD);
text("So, what does it all mean?",width/2, 120);
textStyle(NORMAL);
textSize(32);
for(var i = 0; i < 6; i++){
text(myGenWords[i],width/2,190+(40*i));
}
textStyle(ITALIC);
textSize(18);
text("(Press ENTER)",width/2,height-40);
}
//---------displays final explaination of project
function explain(){
textStyle(BOLD);
textSize(44);
text("Nothing. It means nothing.",width/2, 100);
textSize(16);
for(var i = 0; i < explaination.length; i++){ //loads sentences by line
text(explaination[i],width/2,height/2+(30*i));
}
textFont("TimesNewRoman");
text("*Press ENTER for more information",width/2,height-20);
}For this final project I wanted to bring in some sort of perspective with my primary major. After meeting with Roger I decided to work with the concept of random association — a phenomenon which illustrates our propensity for finding meaning or connection even when events are entirely random. So in its simplest form this is project a random word generator based on user input. For every word a user inputs, the program generates one in response. At the end the user is asked say what is the meaning behind all of the words. The words are displayed to look like the those motivation landscape photos you see on Facebook all of the time. This program is unable to be displayed because it requires running a local server for playing a song file.
The photos I used are not my. They were all sourced from the internet. You can find the photos 1, 2, 3, 4, 5, 6, 7, 8, 9, at the corresponding links.
The song is also not mine. The song I used belongs the new and improved Justin Bieber. No copyright infringement intended.
Lastly, all of the words I used in my source text belong to the president-elect Donald Trump.
]]>//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 3
//*This Program is a dynamic drawing that responds to the mouseX and mouseY position
function setup() {
createCanvas(640,480);
}
function draw() {
background("lavender");
noStroke();
rectMode(CENTER);
var boxColor = map(mouseX,0,width,0,180);
var boxTrans = map(mouseX,0,width,100,255);
//top row
fill(boxColor);
push();
translate(width*.15,100);
rotate(radians(mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.38,100);
rotate(radians(-mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.62,100);
rotate(radians(mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.85,100);
rotate(radians(-mouseX));
rect(0,0,50,50);
pop();
//middle row
fill(255,255,255,boxTrans);
push();
translate(width*.12,height/2);
scale(1 + mouseY/80);
rect(0,0,25,25);
pop();
push();
translate(width*.30,height/2);
scale(1 - mouseY/80);
rect(0,0,25,25);
pop();
push();
translate(width*.50,height/2);
scale(1 + mouseY/80);
rect(0,0,25,25);
pop();
push();
translate(width*.70,height/2);
scale(1 - mouseY/80);
rect(0,0,25,25);
pop();
push();
translate(width*.88,height/2);
scale(1 + mouseY/80);
rect(0,0,25,25);
pop();
//rect(width*.25,height/2,25,25);
//rect(width*.47,height/2,25,25);
//rect(width*.69,height/2,25,25);
//rect(width*.86,height/2,25,25);
//bottom row
fill(boxColor);
push();
translate(width*.15,380);
rotate(radians(mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.38,380);
rotate(radians(-mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.62,380);
rotate(radians(mouseX));
rect(0,0,50,50);
pop();
push();
translate(width*.85,380);
rotate(radians(-mouseX));
rect(0,0,50,50);
pop();
}
For this project I focused on making the mouseX & mouseY interaction feel intuitive. As you move mouseX left to right, the boxes in the first and third row rotate alternatively based on the mouseX position. The shade of the boxes also get lighter as you increase mouseX. The transparency of the the smaller white boxes in the middle row also decrease as mouseX decreases. MouseY controls the scale of the middle boxes as well.
]]>For this project I was trying to create a underwater landscape. I was rather scared to work with objects, so I kept concept rather simple in order to focus on really learning to work with objects. I definitely feel more comfortable working with objects after this project, actually I think its makes simple animation like this a lot easier.
var redFishies = [];
var yelFishies = [];
var tSpeed = 0.0001;
var tDetail = 0.003;
function setup() {
createCanvas(600, 400);
// create an initial collection of fish
for (var i = 0; i < 10; i++){
redFishies[i] = makeRedFish(random(width),random(height-100));
yelFishies[i] = makeYelFish(random(width),random(height-100));
}
frameRate(12);
}
function draw() {
var cB = 20;
x = map(cB,0,height,255,0);
background(100,173,193);
updateAndDisplayRedFish();
removeRedFish();
addNewRedFish();
updateAndDisplayYelFish();
removeYelFish();
addNewYelFish();
//dark purple
noStroke();
beginShape();
fill(56,30,81);
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * tDetail) + (millis() * tSpeed);
var y = map(noise(t), 0,1,300, height+50);
vertex(x, y);
}
vertex(width,height);
endShape(CLOSE);
//light purple
noStroke();
beginShape();
fill(98,79,119);
vertex(0,height);
for (var x = 0; x < width; x++) {
var t = (x * tDetail) + (millis() * tSpeed);
var y = map(noise(t), 1,0,320, height);
vertex(x, y);
}
vertex(width,height);
endShape(CLOSE);
}
//red fish
function updateAndDisplayRedFish(){
for (var i = 0; i < redFishies.length; i++){
redFishies[i].move();
redFishies[i].display();
}
}
function removeRedFish(){
var redFishToKeep = [];
for (var i = 0; i < redFishies.length; i++){
if (redFishies[i].x + redFishies[i].bodySize > 0) {
redFishToKeep.push(redFishies[i]);
}
}
redFishies = redFishToKeep; // only keeps fish on screen
}
function addNewRedFish() {
// adds new red fish with randomization
var newRedFishLikelihood = 0.02;
if (random(0,1) < newRedFishLikelihood) {
redFishies.push(makeRedFish(width,random(2,height-100)));
}
}
// updates postion of red fish
function redfishSwim() {
this.x += this.speed;
}
// draw the building and some windows
function redfishDisplay() {
fill(this.colorR,this.colorG,0);
noStroke();
push();
translate(this.x, this.y);
ellipse(0, 0, this.bodySize, this.bodyWidth);
triangle(this.bodyWidth+9,-10,
this.bodyWidth+9,10,
this.bodyWidth-3,0)
pop();
}
function makeRedFish(LocationX,LocationY) {
var redfish = {x: LocationX,
y: LocationY,
bodyWidth: random(12,25),
bodySize: random(40,80),
speed: random(-3.0,-1.0),
colorR: random(130,240),
colorG: random(20,80),
move: redfishSwim,
display: redfishDisplay}
return redfish;
}
// yellow fish
function updateAndDisplayYelFish(){
for (var i = 0; i < yelFishies.length; i++){
yelFishies[i].move();
yelFishies[i].display();
}
}
function removeYelFish(){
var yelFishToKeep = [];
for (var i = 0; i < yelFishies.length; i++){
if (yelFishies[i].x + yelFishies[i].bodySize > 0) {
yelFishToKeep.push(yelFishies[i]);
}
}
yelFishies = yelFishToKeep; // only keeps yellow fish on screen
}
function addNewYelFish() {
// adds new yellow fish with randomization
var newYelFishLikelihood = 0.02;
if (random(0,1) < newYelFishLikelihood) {
yelFishies.push(makeYelFish(width,random(2,height-100)));
}
}
// updates postion of yel fish
function yelfishSwim() {
this.x += this.speed;
}
// draw the building and some windows
function yelfishDisplay() {
fill(220,this.colorG,0);
noStroke();
push();
translate(this.x, this.y);
ellipse(0, 0, this.bodySize, this.bodyWidth);
triangle(this.bodyWidth+9,-10,
this.bodyWidth+9,10,
this.bodyWidth-3,0)
pop();
}
function makeYelFish(LocationX,LocationY) {
var yelfish = {x: LocationX,
y: LocationY,
bodyWidth: random(12,25),
bodySize: random(40,60),
speed: random(-3.0,-1.0),
colorG: random(190,255),
move: yelfishSwim,
display: yelfishDisplay}
return yelfish;
}
For this project I used an old photo of my roommate Julia. I would like to think this is Julia in her prime. I wanted to recreate the photo with an object that was also representative of the photo- that is why I decided to make this picture of my little star out of little stars. While accidental, I like how the stars in end give the picture a distressed look especially since this is an older photo.
Original:
Half-way:
Final result:
//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 9
var imgJulz;
var starSize;
function preload() {
var myImageURL = "http://i.imgur.com/RhNrs1N.jpg";
imgJulz = loadImage(myImageURL);
}
function setup() {
createCanvas(487, 867);
background(0);
imgJulz.loadPixels();
frameRate(100);
}
function makeStar(radSize) {
var angle = TWO_PI/5;
var x = 0;
var y = 0;
beginShape(); // I referenced p5js.org to learn how to draw a star
for (var i = 0; i < TWO_PI; i += angle) { //this is a simplified version of their practice code
var sx = x + cos(i) * radSize;
var sy = y + sin(i) * radSize;
vertex(sx, sy); //makes point at sx,sy
sx = x + cos(i+(angle/2) * radSize);
sy = y + sin(i+(angle/2) * radSize);
vertex(sx, sy);
}
endShape(CLOSE);
}
function draw() {
var px = random(width); //pixel x val
var py = random(height); //pixel y val
var ix = constrain(floor(px), 0, width-1);
var iy = constrain(floor(py), 0, height-1);
var locXYcolor = imgJulz.get(ix, iy); //gets color of pixel
starSize = 5;
noStroke();
fill(locXYcolor);
push();
translate(px,py); //moves star to the pixel location
rotate(frameCount/ 50); // makes stars in different directions
makeStar(starSize);
pop();
}
(still of interactive piece Project Ukko)
This is interactive data visualization, entitled Project Ukko, was created by Moritz Stefaner as a representation of the wind patterns across the world. What I find rather amazing about this piece is predictive power. In addition to being a easy to follow visualization of the wind patterns it can also predict future wind patterns based on the data set. I also appreciate how intuitive and simple the design is. The thickness of the lines represents strength while color and tilt represent increase/decrease in speed. It is very user friendly, which when looking at other visualizations wasn’t always the case. This visualization has practical applications for energy farmers and others in the energy sector, and I think when it comes to these types of data visualizations, practicality translates well into ease of use. For less practical data sets I think artists can make the visualizations a little more abstract.
]]>//Alison Hoffman
//Section D
//achoffma@andrew.cmu.edu
//Project 7 - Curves
var points = 1000; // number of points
function setup() {
createCanvas(420,420);
}
function draw() {
background(7,26,85);
push(); // medium curve
translate(75,75);
rotate(radians(230));
drawCurve(85,4,200);
pop();
push();
translate(width/6*5,height/3*2); // lightest
rotate(radians(90));
drawCurve(100,2,100);
pop();
push();
translate(width/2,height/2-15); //thicker curve
rotate(radians(65));
drawCurve(30,8,60);
drawCurve(45,8,60);
pop();
}
function drawCurve(h,w,c) { //takes parameters, h (height variant), w(stroke Weight), and c (value of Green)
var a = constrain(mouseY/5,0,height); // constrains a to mouseY
var b = constrain(mouseX/15,0,width); // constrains mouseX to b
var h = h; // variant degree of curve
var x;
var y;
stroke(mouseX,c,mouseY); // color of stroke depends on input and mouse postions
strokeWeight(w);
//
beginShape();
noFill();
for(var i = 0; i < points; i++){
var t = map(i,0,points,0,TWO_PI); // maps theta to the size of the circle
x = ((a+b)*cos(t))-(h*cos(((a+b)/b)*t)); // I reversed the signs of the orginal formula in order to invert the curve
y = ((a+b)*sin(t))-(h*sin(((a+b)/b)*t)); // reversed signs to invert the curve
curveVertex(-x,-y);
}
endShape();
}
This project was really intimidating at first, but once I found a curve that I thought I could replicate it became easier to understand the math behind it. I chose to create a Epicycloid (pictured below). However, I didn’t really like how it created a flower like curve, so I inverted the signs of the formula (- to + and + to -) in order to have the ‘petals’ point inward. I also made the color of the curve depend on the position of the mouse and an input parameter. I chose to do multiple curves to show how the shape changed with varying stroke weight. Overall, once I got started and playing around, I actually ended up really enjoying this project.
For this project I wanted to create an abstract clock that still maintained intuitive function for the user. I stuck with simple forms and color in order to make the representation of time more apparent. The outer circle represents the hour of the day. The weight of the circle changes based on the hour, so, for example, the weight of the circle is greater at 6 than at 2. The shade of the background is also based on the hour of the day such that the background is lighter at 6 am than at 6pm. The middle circle represents the minute of the hour. Like with the hour, the weight of the circle increases with the minutes passed. The innermost circle represents the seconds in the minute. With each second passed, the arc of the circle gets bigger and the color of the stroke gets darker.
//Alison Hoffman
//section D
//achoffma@andrew.cmu.edu
//Project 06 - Abstract Clock
var bg_color = 0; //intialize color to white
function setup() {
createCanvas(600,600);
}
function draw() {
var h = hour();
var bg_color = map(h,0,23,255,0); // map the hour of day to the color of the canvas
background(bg_color); // the later the hour the darker the background
//hour circle
var h_stroke = h*4;
if (h > 12){ //since hour() works from 0-23, this makes it so noon and midnight are the same size,
h_stroke = h*2;
} else if (h==0){
h_stroke == 24;
}
noFill();
stroke(106,193,196);
strokeWeight(h_stroke); //maps hour of the day to the weight of the stroke
ellipse(width/2,height/2,width/4*3);
// minute circle
var m = minute();
var m_stroke = m;
stroke(69,152,155);
strokeWeight(m_stroke); //maps minute to the weight of the stroke
ellipse(width/2,height/2, width/2);
//second circle
var s = second();
var s_map = map(s,0,59,0,359); // map seconds to the degrees of a circle
s_map = radians(s_map); // turn degrees into radians
stroke(197,221,221);
strokeWeight(12);
ellipse(width/2,height/2,width/4); // circle that is always visible
noFill();
var sec_colR = map(s,0,59,234,0);
var sec_colG = map(s,0,59,255,127);
var sec_colB = map(s,0,59,255,130);
push();
translate(width/2,height/2);
rotate(radians(270));
stroke(sec_colR,sec_colG,sec_colB);
strokeCap(SQUARE);
arc(0,0,width/4,height/4,0,s_map);
pop();
}
While researching computational art that uses randomness I stumbled upon the blog of Fletcher Bach. I was immediately mesmerized by his generative terrain pieces (screenshot above). He has created this interesting pieces with Processing and random lines that get added in the background. What I admire most about this piece is that the gray scale and rather simple composition allow the randomness to speak for itself. While simple in form (its lines and color), it is complex and dimensional in scope. The randomness makes this piece dynamic and visually appealing. To see his pieces check out his blog. http://fletcherbach.com/filter/processing/COMPUTATIONAL-ART
]]>
This piece is a 3D model of a Chameleon by Aram Vardazaryan done in completely in photoshop. Even though it is incredible that this piece only took him a week to complete, what I find more fascinating is how it not only is a 3D render in 2D, but that it is also completely sculpture-like. I would expect to find a piece like this in a sculpture garden, crafted from mixed metals and wire, yet it is completely done on the computer with software. It amazes me how realistic the metallic elements are. Recreating such effects must have required a lot of consideration when it came to lighting sources, especially given the fact that there is so much curvature in the shapes.
]]>
var petalD = 65; // petal depth
var petalW= 60; // petal width
var rotation = 60; // standard rotation
var xspacing = 380; // space between flowers
var yspacing = 270;
function setup() {
createCanvas(800, 400);
background(0);
}
function draw() {
// draw white stripes
for(var i = 40; i <height; i +=100){
stroke(255);
strokeWeight(50);
line(0,i,width,i);
}
//draw the flowers
for(var y = 0; y < height; y+= yspacing){
for(var x = 0; x < width; x+= xspacing){
flower(x,y);
}
}
noLoop();
}
function flower(x,y){ // function to make flower
noStroke();
push();
translate(x,y);
// leaves
fill(179,253,181);
ellipse(petalD,0,120,20);
rotate(radians(143));
ellipse(petalD,0,120,20);
rotate(radians(230));
ellipse(petalD,0,120,20);
rotate(radians(195));
ellipse(petalD,0,120,20);
rotate(radians(0)); // reset to no rotation
for (var i=0; i<9; i++){ // makes up to nine petals
if(i%2==0){
fill(255,191-i,229-i); // make every other petal darker
petalW = 90; // vary petal width
petalD = 80; //vary petal depth
}else{
fill(255,200+i,230+i); // make every other petal lighter
petalD = 75; // vary petal depth
petalW = 90; // vary petal width
}
rotate(radians(rotation));
ellipse(petalD/2,0,petalD,petalW); // makes a petal
rotation += i; // makes rotations less uniform and circular
fill(0);
ellipse(10,0,15); // center circles
}
pop();
}
For this project I wanted to try to create a wallpaper that combined geometric elements and more organic one. I have been seeing a lot of designs that have been combining stripes with florals, so I decided to try to recreate that in this project.
]]>