Eliza Ludd the Fog and the Shade: Difference between revisions

From Hackers & Designers
No edit summary
No edit summary
Line 29: Line 29:
#version 150
#version 150


// All of the uniform variables are declared in the side control panel
// All of the uniform variables are declared in the side control panel
uniform float time;
uniform float time;
uniform vec2 resolution;
uniform vec2 resolution;


uniform sampler2D texture0;
uniform sampler2D texture0;
uniform sampler2D prevFrame;
uniform sampler2D prevFrame;


// this is part of the pipeline, it doenst really concern us.
// this is part of the pipeline, it doenst really concern us.
in VertexData
in VertexData
{
{
vec4 v_position;
vec4 v_position;
vec3 v_normal;
vec3 v_normal;
vec2 v_texcoord;
vec2 v_texcoord;
} inData;
} inData;


out vec4 nodeStatus; // this is what the output of the node will be
out vec4 nodeStatus; // this is what the output of the node will be


void main(void)
void main(void)
{
{
vec2 nodeID = inData.v_texcoord;
vec2 nodeID = inData.v_texcoord;
// this ^^^^ is all the information we have about our fog node.
// this ^^^^ is all the information we have about our fog node.
//JUST the ID which correlates to a pixel position on screen
//JUST the ID which correlates to a pixel position on screen
// so the node given the ID (0,0) is in the bottom left screen and
// so the node given the ID (0,0) is in the bottom left screen and
// the node with the ID (1,1) is represented by the pixel in the top right
// the node with the ID (1,1) is represented by the pixel in the top right


vec4 prevNodeStatus = texture(prevFrame, nodeID); // if this line isnt working, you have
vec4 prevNodeStatus = texture(prevFrame, nodeID); // if this line isnt working, you have
//a different version of kodelife change the function texture to be texture2D
//a different version of kodelife change the function texture to be texture2D


vec2 i = nodeID*8.0- vec2(20.0); // these are magic numbers that scale it to fit the screen
vec2 i = nodeID*8.0- vec2(20.0); // these are magic numbers that scale it to fit the screen


float intensity = .2;
float intensity = .2;


float t = time;
float t = time;


//these next two lines are where the magic happens! feel free to noodle around with the numbers
//these next two lines are where the magic happens! feel free to noodle around with the numbers
i += vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
i += vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
float fog = 2.0+ (8/length(vec2(i.x / (sin(i.x+t)/intensity),i.y / (cos(i.y+t)/intensity))));
float fog = 2.0+ (8/length(vec2(i.x / (sin(i.x+t)/intensity),i.y / (cos(i.y+t)/intensity))));


//normalizes the (intensity)colors so theyre between 0 and 1
//normalizes the (intensity)colors so theyre between 0 and 1
fog = 1.0-sqrt(fog);
fog = 1.0-sqrt(fog);
fog = fog*fog*fog*fog;
fog = fog*fog*fog*fog;


// if the fog is too bright, copy what it was the previous moment(frame)
// if the fog is too bright, copy what it was the previous moment(frame)
if (fog > 0.3){
if (fog > 0.3){
fog = prevNodeStatus.x * 0.99;
fog = prevNodeStatus.x * 0.99;
}
}


vec4 final = vec4(vec3(fog), 1.0); // casting to a vec4
vec4 final = vec4(vec3(fog), 1.0); // casting to a vec4
//ignore the last number it doesnt matter in this context
//ignore the last number it doesnt matter in this context


nodeStatus = final;
nodeStatus = final;
}
}


[ https://gist.githubusercontent.com/CharStiles/b3df69a4e4a31a943a2153db550a606f/raw/6fc515c978c6eb86f8e752c0d17f4e9523cde063/theShade.glsl You can also see the raw code here]
[ https://gist.githubusercontent.com/CharStiles/b3df69a4e4a31a943a2153db550a606f/raw/6fc515c978c6eb86f8e752c0d17f4e9523cde063/theShade.glsl You can also see the raw code here]

Revision as of 17:28, 9 January 2020

Eliza Ludd the Fog and the Shade
Name Eliza Ludd the Fog and the Shade
Location NDSM
Date 2019/07/17
Time 9:30-16:30
PeopleOrganisations Ollie George, Char Stiles
Type Meetup
Web Yes
Print No

1. A Luddite is a person who dislikes or is critical of technology, especially technological devices that threaten existing jobs or interfere with personal privacy. 2. Fog Computing is like Cloud Computing, but more local and ubiquitous. 3. Shaders are a way to produce real-time computer graphics. Shaders are written in GLSL which is the OpenGL Shading Language, a C-like programming language that allows you to code powerful graphics programs (aka shaders) directly on your computer’s graphics card.

In this workshop you were introduced to shader programming through a semi-fictional/SciFi narrative. In this journey we were set in the far future meeting as a new breed of Luddites in a post-Fog-Computing world.

We learnt about our roots as Luddites, our relationship with technology in the current situation where Fog Computing has already risen and fallen, and finally we will draft a manifesto, which will establish our take over of the deprecated Fog Network. We will explain Fog Computing as it is “analogous” to shader programming, with the goal of sending our manifesto across the Fog Network, with the help of Eliza Ludd. Who is Eliza Ludd you ask? Well, come to the workshop to find out!

A laptop was needed. No coding experience required Note that this workshop was happening in parallel to another one, you had to sign up!

Tutorial

Greetings Luddites…

Thank you for coming..

Here is the code from Eliza Ludd:

  1. version 150
// All of the uniform variables are declared in the side control panel
uniform float time;
uniform vec2 resolution;

uniform sampler2D texture0;
uniform sampler2D prevFrame;

// this is part of the pipeline, it doenst really concern us.
in VertexData
{
vec4 v_position;
vec3 v_normal;
vec2 v_texcoord;
} inData;

out vec4 nodeStatus; // this is what the output of the node will be

void main(void)
{
vec2 nodeID = inData.v_texcoord;
// this ^^^^ is all the information we have about our fog node.
//JUST the ID which correlates to a pixel position on screen
// so the node given the ID (0,0) is in the bottom left screen and
// the node with the ID (1,1) is represented by the pixel in the top right

vec4 prevNodeStatus = texture(prevFrame, nodeID); // if this line isnt working, you have
//a different version of kodelife change the function texture to be texture2D

vec2 i = nodeID*8.0- vec2(20.0); // these are magic numbers that scale it to fit the screen

float intensity = .2;

float t = time;

//these next two lines are where the magic happens! feel free to noodle around with the numbers
i += vec2(cos(t - i.x) + sin(t + i.y), sin(t - i.y) + cos(t + i.x));
float fog = 2.0+ (8/length(vec2(i.x / (sin(i.x+t)/intensity),i.y / (cos(i.y+t)/intensity))));

//normalizes the (intensity)colors so theyre between 0 and 1
fog = 1.0-sqrt(fog);
fog = fog*fog*fog*fog;

// if the fog is too bright, copy what it was the previous moment(frame)
if (fog > 0.3){
fog = prevNodeStatus.x * 0.99;
}

vec4 final = vec4(vec3(fog), 1.0); // casting to a vec4
//ignore the last number it doesnt matter in this context

nodeStatus = final;
}

[ https://gist.githubusercontent.com/CharStiles/b3df69a4e4a31a943a2153db550a606f/raw/6fc515c978c6eb86f8e752c0d17f4e9523cde063/theShade.glsl You can also see the raw code here]

How this works is that you paste this entirely into Kodelife.

NOW its time to remix the fog code!

Next Steps for if you want to use GLSL for live coding visuals and not just Fog Nodes!!!

These are some specific suggestions from me if you want to continue learning but don’t know how to start.

1. Learn the maths from The Book of Shaders

    • If you haven’t looked at this already, look through it! Its wonderfully paced and has a lot of versatile useful information. [1]

2. Get into 3D!

4. Get involved Online


Thanks a lot to all the folks at Hackers and Designers Summer Academy 2019 to make this workshop: Eliza Ludd, the Fog and the Shade come to life.

http://charstiles.com/shade/

Poem Note by Juliette

remix culture
did ned ludd ever exist?
eliza eliza eliza
how do we resist progress today?
are hackers the new luddites?
it’s very unforgiving
can you redo what you just did but slow
the following are from the book of shaders
If I’m a pixel and I want to know what my color is from the previous frame
that’s how we realise that computers are basically toothpicks 
It’s so loud I wanted to turn down volume, but it’s visual!
FAT glitchhhhhhh
but I don’t want to fat shame glitches though
I just LOVE computers
plug stuff into other stuff
Try values until they work
let’s think about the body of code as the body of Eliza
the same way that Ned Ludd was a collective body
technology replaced religion
Retrieved from "https://wiki.hackersanddesigners.nl//index.php?title=Eliza_Ludd_the_Fog_and_the_Shade&oldid=25031"