In our reading, Fisher identified the "weird" as having a particular aesthetic and political power related to worldmaking. Something is weird when it appears in a place we feel it perhaps shouldn't, not because of mere social expectation, but because of an ontological disjuncture. The Weird is a fissure, a portal, that shows our world as connected to another.
The Weird is a realism, not a fantastic or utopian escape from the complexities and legacies of this world. The weird is not "immersive worldbuilding" of Tolkien, or Avatar, or even Ian Cheng. We are not horrified by the weird, we are hesitantly fascinated by it. We would find a much better example of the Lovecraftian weird in James Cameron's The Abyss (1989) or the Detroit Techno group Drexciya .
Do not actually attempt to "make a world" by recreating a world or building it from scratch. James Cameron had 70 million dollars and 140 days of filming to make The Abyss -- We have limited time and resources.
What's more, and this is perhaps the most important point of this exercise, is that for Fisher the Weird does not operate by immersion as we are used to in popular immersive media and interactive art. He writes: "Lovecraft generates a 'reality effect' by only ever showing us tiny fragments of the Necronomicon. It is the very fragmentary quality of his references to the abominable text that induce a belief in readers that it must be a real object."
In other words: make a fragment, make a world, make it weird.
requirements
use a JS object
use an array
use at least one for loop
use a conditional statement
use at least global 4 variables
submit the sketch
zip the sketch and images together
Examples
let w = 10;
let s = 12;
let margin = 20;
let r = 127;
let g = 127;
function setup() {
createCanvas(400, 400);
noStroke();
noLoop();
}
function draw() {
background(220,0,100);
let index = 0;
for (let x = 20; x < width - margin - w; x += w + s) {
for (let y = 20; y < height- margin - w; y += 20) {
// % modulo ! remainder of a division operatio
w+= random(-5,5);
if(w > 20){
w = w;
}
if (w < 0){
w = 0;
}
if (index % 2){
fill(r,0,100);
}
else {
fill(0,g,200);
}
let ran = random(100);
if (ran>50){
r+= random(5,5);
r = constrain(r, 100, 150);
}
else{
g+=random(5,5);
g = constrain(g,100,200);
}
if (y > height/4 ){
square(x, y, w);
}
else {
circle(x + w/2 ,y + w/2,w)
}
}
console.log(index);
index++;
}
}
let jump = 20;
function setup() {
createCanvas(400, 400);
noLoop();
noFill();
}
function draw() {
background(220);
for (let j = 0; j < 50; j++) {
// number of lines
beginShape();
let x = random(width);
let y = random(height);
for (let i = 0; i < 10; i++) {
// vertex or point in the line
x += random(-jump, jump);
if (x > width) {
x = width;
}
if (x < 0) {
x = 0;
}
y += random(-jump, jump);
if (y > height) {
y = height;
}
if (y < 0) {
y = 0;
}
curveVertex(x, y);
}
endShape();
}
}
let margin = 11;
let xSpacing = 4;
let length = 40;
let ySpacing = length + 10;
let gs = 0; // greyscale
function setup() {
createCanvas(400, 400);
strokeWeight(2);
noLoop();
//randomSeed(50); // specify the seed with which all randomness is generated
}
function draw() {
background(128);
for (let y = margin; y < height - margin; y += ySpacing) {
xSpacing = random(1, 10);
strokeWeight(1 + xSpacing / 4);
for (let x = margin; x < width - margin; x += xSpacing) {
stroke(gs, 0, 100);
length = random(30, 50);
line(x, y, x, y + length); // x1, y1, x2,y2
gs += random(-10, 10); // add one! gs += 1; gs = 1 + 1;
if (gs > 255) {
// if conditions inside the parentheses are met
// this code runs
gs = 255;
}
if (gs < 0) {
gs = 0;
}
}
}
}
let num = 100; // number of circles in a row
let spacing; // declare but not define
// - minus
function setup() {
createCanvas(400, 400);
spacing = width / num;
noLoop();
noStroke();
}
function draw() {
background(0);
// index based approacch
// j keeps track of our horizontal rows
for (let j = 0; j < num; j++) {
// i keeps track of our vertical columns
let vShift = 0;
let ran = random(0, 100);
if (ran > 50) {
vShift = random(-20, 20);
}
for (let i = 0; i < num; i++) {
let r = random(0, 100);
if (r > 60) {
circle(
random(-10, 10) + i * spacing + spacing / 2,
j * spacing + spacing / 2 + vShift,
spacing
);
}
}
}
}
let num = 50;
let spacing;
let noiseScale = 0.02;
let w; // width of square
function setup() {
createCanvas(600, 600);
spacing = width / num;
w = spacing;
noLoop();
noStroke();
}
function draw() {
background(0);
for (j = 0; j < num; j++) {
for (let i = 0; i < num; i++) {
// fill(random(0,255));
// noise by default gives values between 0 and 1
let n = noise(i * noiseScale, j * noiseScale);
// fill(n * 255);
square(w / 2 + spacing * i, w / 2 + spacing * j, w * n);
}
}
}
let numCols = 200; // number of columns
let numRows = 40; // number of rows
let xSpacing, ySpacing;
let noiseScale = 0.03;
// - minus
function setup() {
createCanvas(400, 400);
xSpacing = width / numCols;
ySpacing = height / numRows;
noLoop();
}
function draw() {
background(255);
for (let j = 0; j < numRows; j++) {
for (let i = 0; i < numCols; i++) {
let n = noise(i * noiseScale, j * noiseScale);
let x1 = xSpacing * i;
let y1 = ySpacing * j + n * ySpacing;
let x2 = xSpacing * i;
let y2 = ySpacing * (j + 1) - n * ySpacing;
line(x1, y1, x2, y2);
}
}
}
let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square
function setup() {
createCanvas(600, 600);
noLoop();
}
function draw() {
background("#F0D3F7");
stroke("#B98EA7");
fill("#A57982");
let i = 0; // index variable
for (let y = 10; y < height; y += ySpacing) {
for (let x = 0; x < width; x += xSpacing) {
let sw = random(1, 20); // variable to hold a random strokeWeight
strokeWeight(sw);
square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
i++; // the same as writing 'i=i+1' or 'i+=1'
}
}
}
let ySpacing = 25;
let xSpacing = 35;
let startW = 50; // width of first square
function setup() {
createCanvas(600, 600);
noLoop();
noStroke();
}
function draw() {
background("#08010A");
let i = 0; // index variable
for (let y = 10; y < height; y += ySpacing) {
for (let x = 0; x < width; x += xSpacing) {
let r = random(100, 150);
let g = 100;
let b = random(0, 255);
let a = random(0, 255);
fill(r, g, b, a);
square(x, y, startW - i * 0.3); // x, y, w // square or a rectangle -- x and y are top left point
i++; // the same as writing 'i=i+1' or 'i+=1'
}
}
}
let displacement = 2;
function setup() {
createCanvas(400, 400);
noLoop();
rectMode(CENTER); // changes how squares / rects are drawn. it interprets x and y as the center.
}
function draw() {
background(220);
for (let y = 0; y < height; y += 40) {
for (let x = 0; x < width; x += 40) {
let xOffset = random(-displacement, displacement);
let yOffset = random(-displacement, displacement);
for (let i = 0; i < 5; i++) {
square(x + xOffset, y + yOffset, 40 - i * 10);
}
}
}
}
function setup() {
createCanvas(400, 400);
noLoop();
rectMode(CENTER);
}
function draw() {
background(220);
for (let x = 10; x < width; x += 20) {
for (let y = 10; y < height; y += 20) {
let w = 20;
let toggle = random(0, 1);
if (toggle > 0.5) {
circle(x, y, w); // if condition is true, run this
} else {
w = random(20);
square(x, y, w); // if it is false, run this
}
}
}
}
function setup() {
createCanvas(400, 400);
noLoop();
noFill();
}
function draw() {
background(220);
for (let j = 0; j < 10; j++) {
// number of lines
beginShape();
for (let i = 0; i < 10; i++) {
// vertex or point in the line
let x = random(width);
let y = random(height);
curveVertex(x, y);
}
endShape();
}
}