Since working on this project, I was left feeling hugely unsatisfied with the quality of my work. The morning session on Friday (7/9) helped me understand what this assignment was really about, make some fundamental observations about Vera's work and learn what Perlin noise was. Here is my second attempt at interruptions. My original attempt is still available towards the end of this post. Without further ado, Interruptions - The Sequel!
var interval
var lineSize
let redraw = true
function setup() {
createCanvas(720, 720);
//The grid in Vera's version was roughly 55x55
interval = width/55
lineSize = interval * .9
}
function draw() {
if(redraw) {
background(200);
GenerateLines()
redraw=false
}
}
function mouseClicked() {
redraw = true
}
// Helper Methods
function GenerateLines() {
strokeWeight(1.5)
noiseDetail(6, .65)
noiseSeed(random(0, 1000))
var noiseVal = -1
for(var x=2*interval; x<width-2*interval; x+=interval) {
for(var y=2*interval; y<width-2*interval; y+=interval) {
noiseVal = noise(x/150,y/150)
var midPoint = new Point(x,y)
var startPoint = getRandomPointOnCircumference(midPoint, lineSize)
//print(startPoint)
var endPoint = getColinearEndPoint(startPoint, midPoint)
var segment = new Segment(startPoint, endPoint)
fill(noiseVal*255)
// Uncomment this to see the noise values being generated per grid cell
//rect(x,y,x+lineSize,y+lineSize)
if(noiseVal>=.5) {
segment.Draw()
}
}
}
}
function getRandomPointOnCircumference(center, radius) {
var theta = random(0, TWO_PI)
var x = sin(theta)*radius + center.x
var y = cos(theta)*radius + center.y
return new Point(x, y)
}
function getColinearEndPoint(startPoint, midPoint) {
var endPoint = midPoint.Copy()
var directionVector = midPoint.Copy()
directionVector.Subtract(startPoint)
endPoint.Add(directionVector)
return endPoint
}
// Classes
function Point(x, y) {
this.x = x
this.y = y
this.Add = function(addend) {
this.x += addend.x
this.y += addend.y
}
this.Subtract = function(addend) {
this.x -= addend.x
this.y -= addend.y
}
this.Copy = function() {
return new Point(this.x, this.y)
}
}
function Segment(startPoint, endPoint) {
this.startPoint = startPoint
this.endPoint = endPoint
this.Draw = function() {
line(startPoint.x, startPoint.y, endPoint.x, endPoint.y)
}
}
function LineGrid() {
this.lines = []
this.count = 0
this.AddLine = function(_line) {
this.lines.push(_line)
}
this.RemoveLine = function(_line) {
this.lines.pop(_line)
}
} |
var interval
var lineSize
let redraw = true
function setup() {
createCanvas(720, 720);
//The grid in Vera's version was roughly 55x55
interval = width/55
lineSize = interval * .9
}
function draw() {
if(redraw) {
background(200);
GenerateLines()
redraw=false
}
}
function mouseClicked() {
redraw = true
}
// Helper Methods
function GenerateLines() {
strokeWeight(1.5)
noiseDetail(6, .65)
noiseSeed(random(0, 1000))
var noiseVal = -1
for(var x=2*interval; x<width-2*interval; x+=interval) {
for(var y=2*interval; y<width-2*interval; y+=interval) {
noiseVal = noise(x/150,y/150)
var midPoint = new Point(x,y)
var startPoint = getRandomPointOnCircumference(midPoint, lineSize)
//print(startPoint)
var endPoint = getColinearEndPoint(startPoint, midPoint)
var segment = new Segment(startPoint, endPoint)
fill(noiseVal*255)
// Uncomment this to see the noise values being generated per grid cell
//rect(x,y,x+lineSize,y+lineSize)
if(noiseVal>=.5) {
segment.Draw()
}
}
}
}
function getRandomPointOnCircumference(center, radius) {
var theta = random(0, TWO_PI)
var x = sin(theta)*radius + center.x
var y = cos(theta)*radius + center.y
return new Point(x, y)
}
function getColinearEndPoint(startPoint, midPoint) {
var endPoint = midPoint.Copy()
var directionVector = midPoint.Copy()
directionVector.Subtract(startPoint)
endPoint.Add(directionVector)
return endPoint
}
// Classes
function Point(x, y) {
this.x = x
this.y = y
this.Add = function(addend) {
this.x += addend.x
this.y += addend.y
}
this.Subtract = function(addend) {
this.x -= addend.x
this.y -= addend.y
}
this.Copy = function() {
return new Point(this.x, this.y)
}
}
function Segment(startPoint, endPoint) {
this.startPoint = startPoint
this.endPoint = endPoint
this.Draw = function() {
line(startPoint.x, startPoint.y, endPoint.x, endPoint.y)
}
}
function LineGrid() {
this.lines = []
this.count = 0
this.AddLine = function(_line) {
this.lines.push(_line)
}
this.RemoveLine = function(_line) {
this.lines.pop(_line)
}
}
Below you will find my original attempt at Interruptions.
via GIPHY
INITIAL OBSERVATIONS
(1) The lines are all roughly the same length
(2) There's patches where the lines don't appear
(3) The intersections of lines occur roughly towards the ends of the lines
(4) There's no real clumping/pattern; it seems random (as opposed to Perlin?)
(5) There are multiple hundreds of lines here
(6) There is no variance in thickness or transparency
(7) The compositions are all square
(8) Although there are gaps, the work is still densely populated
(9) Contrary to the gaps, there aren't areas that are MORE dense; only less
(10) The background isn't a full white, and that's less harsh on the eyes
Of course I realize now that (4) was flawed and I ended up needing Perlin noise after all. I barely scratched the surface though, and I think that would have been key to getting the look right. I wish I had given myself more time to actually figure out how noise works, as right now I am missing the gaps in the lines and the intersections aren't like what I observed in (3). After I was finished I checked out some of the other
attempts at replicating Interruptions and I was blown away by how much detail and level of control was achieved in some of them. I noticed other
people were making a conscientious effort to preserve the "randomness" and I plan to figure out how that is done next.
let redraw = true
function setup() {
createCanvas(720, 720);
}
function draw() {
if(redraw) {
background(150);
for(var i=0; i<3000; i++) {
noiseSeed()
var x1 = random(50, width-50)
var y1 = random(50, height-50)
var x2 = (noise(x1)-.5)*200+x1
var y2 = (noise(y1)-.5)*200+y1
if(x2>50 && x2<width-50 && y2>50 && y2<height-50) {
line(x1, y1, x2, y2)
}
}
redraw=false
}
}
function mouseClicked() {
redraw = true
} |
let redraw = true
function setup() {
createCanvas(720, 720);
}
function draw() {
if(redraw) {
background(150);
for(var i=0; i<3000; i++) {
noiseSeed()
var x1 = random(50, width-50)
var y1 = random(50, height-50)
var x2 = (noise(x1)-.5)*200+x1
var y2 = (noise(y1)-.5)*200+y1
if(x2>50 && x2<width-50 && y2>50 && y2<height-50) {
line(x1, y1, x2, y2)
}
}
redraw=false
}
}
function mouseClicked() {
redraw = true
}
