Skip to content

Instantly share code, notes, and snippets.

@shduff

shduff/Inputs and outputs.md

Last active July 18, 2016 02:36
Show Gist options
  • Save shduff/948d4407d0e7d0ec26c52df43f7a9a49 to your computer and use it in GitHub Desktop.
Save shduff/948d4407d0e7d0ec26c52df43f7a9a49 to your computer and use it in GitHub Desktop.
Download ZIP
A few sketches that use input values to affect the display of web pages.
Raw
input-to-background-color.html
<!DOCTYPE html>
<html>
<head>
<title>Input > Background Color</title>
<style>
body {
transition:1s;
background-color:pink;
}
</style>
</head>
<body>
<script>
// This global variable will make the current value of "input" accessible ANYWHERE in your program.
var input;
function generateInput() {
// Write your code here! This function can do anything you want, but should ultimately return the value you want to affect the page's background color. Right now, it is just returning a random number between 0 and 1.
input = Math.random();
return input;
}
// This is the function that will actually change the background color.
function changeBackgroundColor() {
// First it uses the current input value to choose a (grayscale) background color for the page using the CSS rgb() color setting, which expects a number between 0 and 255 for each of a red, green, and blu values.
document.body.style.backgroundColor = "rgb(" + Math.floor(input*255) + "," + Math.floor(input*255) + "," + Math.floor(input*255) + ")";
// Then, it generates a new input number by running our generateInput function.
input = generateInput();
}
// Finally, the background is changed every 1 seconds (or 1000 milliseconds).
setInterval(changeBackgroundColor, 1000);
</script>
</body>
</html>
Raw
input-to-position.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Input > Position</title>
<style>
body {
/*Clear our body's default margin*/
margin: 0;
}
#stage {
/*Make a square stage and center it in on our screen, positioned absolutely*/
height: 100vh;
width: 100vh;
margin-left: auto;
margin-right: auto;
background-color: lightblue;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
#ball, #paddle {
/*Animate our ball and paddle motion over 50ms*/
transition: 50ms;
position: absolute;
}
#ball {
/*Make a ball*/
width: 20px;
height: 20px;
background-color: grey;
border-radius: 50%;
}
#paddle {
/*And a paddle*/
left: 50px;
width: 10px;
height: 50px;
background-color: black;
}
#paddle {
/*Center our paddle on the screen to start*/
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body style='opacity: 1.0;'>
<div id='stage'>
<div id='ball'></div>
<div id='paddle'></div>
</div>
<script>
// Grab our stage and its width and height
var stage = document.querySelector('#stage');
var stageWidth = stage.offsetWidth;
var stageHeight = stage.offsetHeight;
// Create a score variable to keep track of how many times the computer scores on us
var score = 0;
// Create a single ball dictionary with everything we need to move the ball around
var ball = {
div: document.querySelector('#ball'),
width: 20,
height: 20,
radius: 20 / 2,
position: {
x: stageWidth / 2 - 20 / 2,
y: stageHeight / 2 - 20 / 2
},
velocity: {
x: -10 + Math.random()*10,
y: -10 + Math.random()*10
},
distanceTo: function(x, y) {
// A function to measure distance between the ball and a point
var deltaX = (ball.position.x - x);
var deltaY = (ball.position.y - y);
return Math.sqrt(deltaX * deltaX + deltaY * deltaY);
},
moveTo: function(x, y) {
// Move the ball to a point and update its position
ball.position.x = x;
ball.position.y = y;
ball.div.style.left = x - ball.radius + 'px';
ball.div.style.top = y - ball.radius + 'px';
},
updateScore: function() {
// Check if we've lost a point and decrease the opacity of the screen if so, resetting the ball to the middle of the screen with a random velocity
var scored = ball.distanceTo(0, ball.position.y) <= ball.width / 2;
if (scored) {
ball.moveTo(stageWidth / 2, stageHeight / 2);
ball.velocity = {
x: -10 + Math.random() * 10,
y: -10 + Math.random() * 10
};
score++;
document.body.style.opacity = parseFloat(document.body.style.opacity) - 0.1;
}
},
updatePosition: function() {
// Update the position of the ball
ball.updateScore();
// Check if we should bounce off the right edge of the screen
var xBounce = ball.distanceTo(stageWidth, ball.position.y) <= ball.radius;
// And if we should bounce off the top or bottom
var yBounce = ball.distanceTo(ball.position.x, stageHeight) <= ball.radius || ball.distanceTo(ball.position.x, 0) <= ball.radius;
if (xBounce || paddle.shouldBounce(ball)) {
// If we're hitting the right edge or the paddle, flip our x velocity
ball.velocity.x *= -1;
}
if (yBounce) {
// If we're hitting the top or bottom, flip our y
ball.velocity.y *= -1;
}
// Move to a new position defined by our previous position and our x and y velocity
ball.moveTo(ball.position.x + ball.velocity.x, ball.position.y + ball.velocity.y);
}
};
// A dictionary to hold everything we need about our paddle
var paddle = {
div: document.querySelector('#paddle'),
width: 10,
height: 50,
position: {
x: 50,
y: stageHeight / 2
},
shouldBounce: function(ball) {
// Given a ball, check to see if it's running into our right edge
var xBounce = (ball.distanceTo(paddle.position.x + paddle.width / 2, ball.position.y) <= ball.radius)
var withinPaddleY = ((paddle.position.y - paddle.height / 2) <= ball.position.y && ball.position.y <= (paddle.position.y + paddle.height / 2));
return xBounce && withinPaddleY;
},
moveTo: function(x, y) {
// Move to an x and y coordinate and update our position; we'll only be using the y, since the paddle's x will be locked
paddle.div.style.left = x - paddle.width / 2 + 'px';
paddle.div.style.top = y - paddle.height / 2 + 'px';
paddle.position.x = x;
paddle.position.y = y;
},
updatePosition: function() {
// Connect our paddle's position to our input
paddle.moveTo(paddle.position.x, input);
}
}
// Initialize our input
var input = stageHeight / 2;
// Generate an input; in our case randomly— Replace this with your input!
var generateInput = function() {
input = Math.random() * stageHeight;
paddle.moveTo(paddle.position.x, input);
};
// Update and aniamte the ball and paddle, generating a new input each frame
var update = function() {
ball.updatePosition();
paddle.updatePosition();
generateInput();
}
// Start! Update the frame every 50ms
setInterval(update, 50);
</script>
</body>
</html>
Raw
input-to-velocity.html
<!DOCTYPE html>
<html>
<head>
<title>Input > Velocity</title>
</head>
<body>
<script>
// This global variable will make the current value of "input" accessible ANYWHERE in your program.
var input;
function generateInput() {
// Write your code here! This function can do anything you want, but should ultimately return the value you want to affect the page's background color. Right now, it is just returning a random number between 0 and 1.
input = Math.random();
return input;
}
// This function, when run, will generate a random number between the two numbers passed to it as arguments.
function generateRandomNumberBetween(max, min) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Define a new function which, when run, will create a circle of a given radius
var Circle = function(radius) {
// store the radius we're given
this.radius = radius;
// create the div that we're going to use to display the circle
this.div = document.createElement('div');
// set its width
this.div.style.width = 2 * radius + 'px';
// and height to twice our radius
this.div.style.height = 2 * radius + 'px';
// set its border-radius to 50% to make a circle
this.div.style.borderRadius = '50%';
// position it absolutely
this.div.style.position = 'absolute';
// so that we can choose a random % left
this.div.style.left = Math.floor(Math.random() * 100) + "%";
// and then a top to place it
this.div.style.top = Math.floor(Math.random() * 100) + "%";
// choose a random number 0 -> 255 for red, green, and blue values
var red = Math.floor(Math.random() * 255);
var green = Math.floor(Math.random() * 255);
var blue = Math.floor(Math.random() * 255);
// and set the background color to that random RGB triplet
this.div.style.backgroundColor = 'rgba(' + [red, green, blue].join(',') + ',.8)';
// set a transition so they will appear to move smoothly
this.div.style.transition = '1s';
// and then draw a border, just for style
this.div.style.border = 'solid 2px black';
// finally, stick the div we've created in our page;
document.body.appendChild(this.div);
};
// Now, in order to actually make some circles:
// First, make an empty array to hold all my Circles
var myCircles = [];
// Now, make 100 of them
for (var i = 0; i < 100; i++) {
// with random radii from 20 -> 100, sticking them into the myCircles array to keep track of them.
myCircles.push(new Circle(generateRandomNumberBetween(20, 100)));
}
// This function will redraw the circles based on our input variable
function redrawCircles() {
myCircles.forEach(function(circle) {
var lastLeft = Number(circle.div.style.left.replace('%',''));
var lastTop = Number(circle.div.style.top.replace('%',''));
circle.div.style.left = lastLeft + generateRandomNumberBetween(-2, 2) + '%';
circle.div.style.top = lastTop + generateRandomNumberBetween(-2, 2) + '%';
});
input = generateInput();
};
setInterval(redrawCircles, input*1000)
</script>
</body>
</html>
Raw
Inputs and outputs.md

Inputs & Outputs

These are some sketches to demonstrate how inputs — whether physical or digital — can be used in different ways to affect outputs. Each sketch expects an input between 0 and 1 and then uses that input to affect the display of a website. To start, we'll write a function to generate the input digitally. Next time, we'll use Arduinos and some related sensors to generate inputs from the real (e.g. physical) world.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment