TASK 2: Essential Reading (Hackers and Painters)
"The way to create something beautiful is often to make subtle tweaks to something that already exists, or to combine existing ideas in a slightly new way. This kind of work is hard to convey in a research paper."
Thoughts
I found this essay really interesting as I never saw programmers or 'hackers' as creators. It really changed my insight on what coding is about - the way which coders create are similar to painters, which is through trial and error, and by looking at the source code from good software programmes. It is also about designing software that is user-friendly, and there isn't a complete formula which you can follow, which differentiates a hacker and a scientist. It also highlights the importance of empathy, which is one of the core factors that we, as designers, should consider before starting the design process.
Static Artwork
function setup() {
createCanvas(310,270);
background(250);
}
function draw() {
noStroke();
fill(210,228,236);
beginShape();
vertex(23,246);
vertex(23,258);
vertex(258,251);
vertex(292,251);
vertex(190,161);
endShape();
//
fill(9,20,52);
beginShape();
vertex(23,15);
vertex(190,161);
vertex(23,246);
endShape();
//
fill(228,222,201);
beginShape();
vertex(190,161);
vertex(203,15);
vertex(23,15);
endShape();
//
fill(189,144,114);
beginShape();
vertex(203,15);
vertex(227,105);
vertex(190,161);
endShape();
//
fill(201,217,223);
beginShape();
vertex(227,105);
vertex(289,15);
vertex(203,15);
endShape();
//
fill(252,225,216);
beginShape();
vertex(288,15);
vertex(291,251);
vertex(190,161);
endShape();
//
}
I thought my initial sketch for the Damien Hirst dots artwork was too simple, as it was a simple grid structure and the ellipses were all the same size - all I had to edit was the colour of the dots. That is why I have decided to choose another piece of artwork to work on - it was a piece which I found on Pinterest. Instead of drawing them as individual shapes, I learned from Carol, my coursemate, that I could do it using points. So after putting it under the beginShape function, I mapped out the points that connect the lines together in order to form my artwork.
I would say that this composition is more time-consuming compared to Damien Hirst's dot artwork, and I'm happy I was able to complete the code for this composition.
Interactive Sketch (Glitch Error)
I've decided to use what I have learnt from Sion's 2nd session and combine it with my interactive sketch. After the sessions, I wanted to make sure I understand the basics of parameters, syntax and functions, so rewatched all of the videos by Daniel Shiffman. That really helped me understand how the setup function only runs once, and the draw function runs on a loop.
For my interactive sketch, I chose a geometric art piece from an Etsy shop and adjusted the opacity of each shape using the colour function. I then decided to turn it into glitch art, with the text 'Error' appearing on the screen when the user hovers around the screen. To make it look 'glitchy', I used the random function within the colour parameter so that it keeps changing colour.
Overall, I did enjoy making this sketch, as I feel like I'm in control and I understand how it works. But the only frustrating thing is that I would understand the concept but not actually know how to apply it to the sketch when I have to define my new variables and functions. Perhaps watching Shiffman's videos again will help.
This is the reference image of how I picture my sketch to work. I wanted the word 'ERROR' to pop up when the cursor navigates around the static elements. I also adjusted the parameters for the colour function so that it appears to be 'glitching' but it's just changing colours within the RGB range of 255. I found the mapping function quite helpful in terms of setting the minimum and the maximum range of the colours. Also, the random function helps achieve that purpose.
GITHUB LINK FOR 2nd TASK
Code for Interactive Sketch
function setup() {
createCanvas (400,600);
}
var brush ={
x:20,
y:20,
speed: {x:10,y:20},
draw: function() {
this.x = this.x + this.speed.x;
this.y = this.y + this.speed.y;
if (this.y > height || this.y < 0) {
this.speed.y = this.speed.y * -1;
}
if(this.x > width || this.x < 0) {
this.speed.x = this.speed.x * -1;
}
//mid square left (blue)
noStroke();
fill (17,41,139,5);
rect (brush.x,brush.y,40,40);
//mid square left (blue)
noStroke();
fill (17,41,139,240);
rect (brush.x,brush.y,40,40);
//uppersquare (blue)
fill (17,41,139,240);
rect (160,150,80,80);
//lower rectangle (blue)
fill (17,41,139,235);
rect(200,270,80,160);
//upper rectangle (orange)
fill(255,101,83,200);
rect(125,190,70,160);
//lowersquare(blue)
fill (17,41,139,235);
rect(160,270,40,40);
//lower small square (orange)
fill(255,101,83,200);
rect(195,310,45,40);
//lower left square (orange)
fill(255,101,83,200);
rect(80,348,45,40);
//lower left square (blue)
fill (17,41,139,210);
rect (80,308,80,80);
//right square (orange)
fill(255,101,83,190);
rect(240,230,80,80);
}
};
var a ={
r:23,
g:123,
b:20
};
function draw() {
brush.draw();
background(random(255),random(255),random(255),random(255));
textSize(random(100));
textFont('Futura');
text("ERROR", mouseX, mouseY);
fill(255, 102, random(255));
text("ERROR", mouseX, mouseY);
fill(0, 102, 153, random(255));
text("ERROR", mouseX, mouseY);
}
function mouseDragged(){
//lower orange square
fill(255,101,83,240);
rect(mouseX,mouseY,80,85);
// prevent default
return false;
}
function mousePressed() {
var x = 20;
for (var i=0; i<100; i++) {
noStroke();
fill(255);
//for (var x=40; var<400; x++) {
rect (random(width),random(height),x,40);
}
}