LaTurbo Avedon - video
Principa Discordia by Felt Zine
Emphasising the murky boundaries between platform-mediated realities, the diverse range of practices represented in the Dismal Sessions ferment a post-digital conspiracy. Shiny renders clang dissonantly against deep-fried aesthetics in multi-modal works whose variegated roots reach towards cataclysmic and sometimes blasphemous understandings of contemporary culture. Built upon the long and fractalized histories of countless subcultures, subreddits and subterranean secrets, the Dismal Sessions sprout from the disasters and dissociation that define being in the world today.
So far we have been using p5js in the context of the web editor. The web editor makes it easy to code in p5js, host and share your code and sketches online. It abstracts away having to deal with some of the details of presenting the work.
When you pop out the sidebar on the left side of the editor there is a file selector. This is where you can add files such as images, sound, text for example - which we’ve been doing throughout the semester. We’ve noticed the index.html file and the style.css file, but we haven’t used it so far. Today we’ll dive further into those and what they are for.
We have been coding our p5js code in a file called sketch.js. Now let’s look at the index.html and style.css files. Web Design is a huge realm and is covered extensively in the New Media foundation course Intro to Web, so we’ll just touch on the basics, enough to understand the underlying ecosystem supporting our p5js sketches.
HTML stands for HyperText Markup Language.
Hypertext - text that has the ability to link - to make a connection in the page to another webpage elsewhere on the internet.
Markup Language - instructions in standardized notation to specify the structure of a document and its presentation. In text one specifies data or content and how it will be displayed.
If you click on the index.html file inside the web editor, you will see basic webpage.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>
We’ll go through each line.
The first line specifies that our document is HTML. You’ll notice that HTML is written with what are called tags. They are words inside angle brackets (aka greater than, and less than symbols). HTML is written in a branching manner. The whole rest of the document is nested inside of an html tag. The <html> tag starts on the second line. Everything that comes after will be HTML code, which will end with the enclosing </html> tag on the last line. We call tags that begin with / a closing tag. Inside the html section are two main sub-sections on almost every webpage. There is a <head></head> section, and a <body></body> section.
The <head></head> section contains links to the p5js library, a collection of pre-written code with builtin variables, functions, methods for example. This is what allows us to write a preload(), setup() and draw() and the web browser to know to load preload first, setup once at the beginning, and then run draw in a loop, among many other things.
After loading p5js, we load in p5.sound, which lets us work with sound. In other words, this is what allows us to use p5’s sound methods.
We have been coding our projects to visually present on a canvas. A canvas is a digital element on a webpage. It sits in a webpage but it is not the entire web page. This is why if you create a canvas at a set pixel dimension (for example 400 by 400) you’ll see your canvas in the top left corner of a big white screen.
To set your canvas to be the size of the entire window, we have used createCanvas(windowWidth, windowHeight);.
But our canvas is still sitting as an element within the website. We could make a traditional regular website, and then have our canvas as one of the additional elements on the webpage.
The <body></body> section contains all of the content that gets seen visually on a website. In the body section of our index.html page we load up the script sketch.js. Inside this sketch, we create a canvas and draw things to that canvas. We could also add other content outside of the canvas, things like text, video, images that do not have to be just on the canvas.
For this assignment, you are to write up a one paragraph proposal. You are welcome to also include screenshots, links to past projects or projects that inspire you. I will give you feedback and approve projects. –Lee
Our assignments so far have been fairly restrictive. For your final project, I want to open up the field for you to create an artwork of your choice. The project should use skills and tools we developed this semester. You don’t need to use p5.js if there is another library or language that you prefer.
Final Project and presentations/critiques due Monday 12/11 during our 6:30pm session.
So far in this course we have covered:
Consider these elements in the creation of your own work for the final project.
The following projects were created with p5.js.
Check out the online exhibit of works in the p5.js showcase:
ALL OF THE PROJECTS IN THE p5.js SHOWCASE
Some additional projects:
Protest Korpe by Friends of Asya Tulesova (Aisha, Kuat, Irina and Jeff), to create banner images that can be shared on social media
PROTEST KORPE is inspired by quraq körpe, a type of Kazakh quilt. Like a quraq körpe, civic activism and protection of our rights depend on the voices and contributions of each of us. In this work, each square on our “collective quilt” is important to sew a new Kazakh reality. We want: a fair trial for Asya Tulesova, police that do not resort to violence, and just laws which respect peaceful assembly. #JusticeForAsya
Room Me by Kat Zhang
An interactive visual essay/game that explores self-isolation and self-care during quarantine.
Cyber Flowers by JPL
With simple and repeated revolving, I created a new form of text art that I’d like to call Cyberflowers - made of digital typography and grew from the digital texts in the cyberspace. Here you can see how individual letters gradually break their shape-based meaning and become blooming cyberflowers while the curves and lines become cyber-petals and cyber-stamens.
Soundings - Loren Britton and Romi Ron Morrison, a browser extension and sound art piece that interacts with your browser
Here we recite selections of poems some by Black Feminist poets & scholars: Audre Lorde and Alexis Pauline Gumbs, and invite you to read some lines from Claudia Rankine. We will invite you to consider how fully you can feel in your daily doings, how the erotic is a well of everyday affirmation….
Suburbia Life by David Schnitman
suburbia.life is a procedurally generated suburban neighborhood created with p5.js. The sketch features roads, houses, trees and clouds as seen from a bird.
You are welcome to propose your own conceptual idea.
Optionally, here is a theme you are welcome to use:
Hide part of the world
If you adopt this theme as a prompt, you are welcome to interpret this in whichever way you see fit.
Your code should:
Your final project should:
Finish Frogger (starter code built in the linked Frogger tutorial video ):
OPTIONAL BONUS CHALLENGES: