Skip to content
Snippets Groups Projects
Commit 79c0fe06 authored by Evan Raskob's avatar Evan Raskob
Browse files

initial fixes to show image etc.

parent 6890701a
Branches
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
pixel_calculator/img/Tastee-Candy-Apple-Red-Caramel-wPeanuts.jpg 0 → 100644
+ 0
− 0
View file @ 79c0fe06
pixel_calculator/img/Tastee-Candy-Apple-Red-Caramel-wPeanuts.jpg

57.5 KiB

pixel_calculator/libraries/p5.min.js 0 → 100644
+ 36
− 0
View file @ 79c0fe06
This diff is collapsed.
pixel_calculator/pixel_calc_p5js.html 0 → 100644
+ 123
− 0
View file @ 79c0fe06
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<!--
For calculating pixel index values based on channels and offsets.
By Evan Raskob, 2020 <e.raskob@gold.ac.uk>
-->
<head>
<title>Pixel Calculator by Evan Raskob</title>
<script src="libraries/p5.min.js" type="text/javascript"></script>
<style type="text/css">
html {
font-size: 10px;
}
body {
margin: 2% 15%;
font-size: 1.6rem;
font-family: Arial, Helvetica, sans-serif;
}
canvas {
vertical-align: top;
margin: 1rem 1rem;
border: 2px double black;
}
.row {
display: flex;
/* border: 1px dotted blue; */
}
.item {
flex: auto;
border: 1px solid grey;
padding: 1.6rem 3.2rem;
margin: 1rem 1rem;
}
.flex2 {
flex: 2;
}
input,
select,
button {
font-size: 1.6rem;
padding: 0.8rem 1.6rem;
}
button {
border-radius: 0.8rem;
}
/* .item:nth-of-type(1) {
flex: 2;
border: 1px dotted red;
} */
</style>
</head>
<body>
<div class="row">
</div>
<div class="row">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions -->
<div class="item">
<h1>Pixels Array index calculator</h1>
<h2>by Evan Raskob, 2020</h2>
<p>
Given an image width, height, and x and y position in the image, and
the channel offset, calculate the index in the array of that channel's
value.
</p>
</div>
</div>
<div class="row">
<div class="item">
channels
<select id="channels" name="channels">
<option value="4" selected>4 (RGBA)</option>
<option value="3">3 RGB</option>
</select>
</div>
<div class="item">
channel:
<select id="channel" name="channel">
<option value="0" selected>R</option>
<option value="1">G</option>
<option value="2">B</option>
<option value="3">A</option>
</select>
</div>
</div>
<div class="row">
<div class="item">
img w: <input id="w" value="410" type="text" size="4" />
</div>
<div class="item">
img h: <input id="h" value="720" type="text" size="4" />
</div>
<div class="item">x: <input id="x" value="0" type="text" size="4" /></div>
<div class="item">y: <input id="y" value="0" type="text" size="4" /></div>
</div>
<div class="row">
<div class="item">
<h1>Code for this channel</h1>
<p>the <span id="channel-result">R</span> channel of this pixel (<span id="coords"></span>) is image.pixels[<span id="result"></span>]</p>
<button name="calculate" id="calculate">calculate</button>
</div>
</div>
<div class="row">
<div class="item">r: <input id="r" value="0" type="text" size="3" /></div>
<div class="item">g: <input id="g" value="0" type="text" size="3" /></div>
<div class="item">b: <input id="b" value="0" type="text" size="3" /></div>
<div class="item">a: <input id="a" value="0" type="text" size="3" /></div>
</div>
<div class="row">
<div class="item">click in the image below to select a pixel</div>
</div>
</body>
<script src="sketch.js" type="text/javascript"></script>
</html>
pixel_calculator/pixel_calculator.html 0 → 100644
+ 127
− 0
View file @ 79c0fe06
<html>
<!--
For calculating pixel index values based on channels and offsets.
By Evan Raskob, 2020 <e.raskob@gold.ac.uk>
-->
<head>
<title>Pixel calculator</title>
<style type="text/css">
html {
font-size: 10px;
}
body {
margin: 2% 15%;
font-size: 1.6rem;
font-family: Arial, Helvetica, sans-serif;
}
.row {
display: flex;
/* border: 1px dotted blue; */
}
.item {
flex: auto;
border: 1px solid grey;
padding: 1.6rem 3.2rem;
margin: 1rem 1rem;
}
.flex2 {
flex: 2;
}
input, select, button {
font-size: 1.6rem;
padding: 0.8rem 1.6rem;
}
button {
border-radius: 0.8rem;
}
/* .item:nth-of-type(1) {
flex: 2;
border: 1px dotted red;
} */
</style>
</head>
<body>
<div class="row">
<!-- https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions -->
<div class="item">
<h1>Pixels Array index calculator</h1>
<h2>by Evan Raskob, 2020</h2>
<p>
Given an image width, height, and x and y position in the image, and
the channel offset, calculate the index in the array of that channel's
value.
</p>
</div>
</div>
<div class="row">
<div class="item">channels <select id="channels" name="channels">
<option value="4" selected>4 (RGBA)</option>
<option value="3">3 RGB</option>
</select></div>
<div class="item">channel: <select id="channel" name="channel">
<option value="0" selected>R</option>
<option value="1">G</option>
<option value="2">B</option>
<option value="3">A</option>
</select></div>
</div>
<div class="row">
<div class="item">img w: <input id="w" value="320" type="text" size="4"></div>
<div class="item">img h: <input id="h" value="240" type="text" size="4"></div>
<div class="item">x: <input id="x" value="0" type="text" size="4"></div>
<div class="item">y: <input id="y" value="0" type="text" size="4"></div>
</div>
<div class="row">
<div class="item"><h1>Pixels array index: <span id="result">0</span></h1>
<button name="calculate" id="calculate">
calculate
</button>
</div>
</div>
<script type="text/javascript">
let channels = document.getElementById("channels");
let channel = document.getElementById("channel");
let result = document.getElementById("result");
let calcButton = document.getElementById("calculate");
const getChannels = () => parseInt(channels.selectedOptions[0].value);
const getChannel = () => parseInt(channel.selectedOptions[0].value);
channels.addEventListener('change', function () {
// let maxOffset = getChannels()-1;
doCalc();
});
channel.addEventListener('change', function () {
doCalc();
});
calcButton.addEventListener("click", doCalc);
document.getElementById('x').addEventListener('change', doCalc);
document.getElementById('y').addEventListener('change', doCalc);
document.getElementById('w').addEventListener('change', doCalc);
document.getElementById('h').addEventListener('change', doCalc);
function doCalc() {
let w = parseInt(document.getElementById("w").value);
let h = parseInt(document.getElementById("h").value);
let x = parseInt(document.getElementById("x").value);
let y = parseInt(document.getElementById("y").value);
let calculation = (y * w + x) * getChannels() + getChannel();
result.innerHTML = calculation;
}
</script>
</body>
</html>
\ No newline at end of file
pixel_calculator/sketch.js 0 → 100644
+ 97
− 0
View file @ 79c0fe06
///
/// by Evan Raskob
let img;
let clr;
let pixelCoord = [0, 0];
//
// do all the pixel calculations
//
function doCalc() {
let w = parseInt(document.getElementById("w").value);
let h = parseInt(document.getElementById("h").value);
let x = parseInt(document.getElementById("x").value);
let y = parseInt(document.getElementById("y").value);
pixelCoord = [x, y];
clr = img.get(x, y); // color at pixel
document.getElementById("r").value = red(clr);
document.getElementById("g").value = green(clr);
document.getElementById("b").value = blue(clr);
document.getElementById("a").value = alpha(clr);
let calculation =
(y * w + x) *
parseInt(document.getElementById("channels").selectedOptions[0].value) +
parseInt(document.getElementById("channel").selectedOptions[0].value);
document.getElementById("result").innerHTML = calculation;
document.getElementById("channel-result").innerHTML = document.getElementById("channel").selectedOptions[0].label;
document.getElementById("coords").innerHTML = x + "," + y;
}
function preload() {
// preload() runs once
// 424x720
img = loadImage("img/Tastee-Candy-Apple-Red-Caramel-wPeanuts.jpg");
}
function setup() {
createCanvas(820, 1440);
clr = color(0, 0, 0);
imageMode(CORNER);
noStroke();
background(255);
img.loadPixels();
let channels = document.getElementById("channels");
let channel = document.getElementById("channel");
let calcButton = document.getElementById("calculate");
//
// setup interactions with drop-down list and button
//
channels.addEventListener("change", function () {
// let maxOffset = getChannels()-1;
doCalc();
});
channel.addEventListener("change", function () {
doCalc();
});
calcButton.addEventListener("click", doCalc);
// update calculation visualisation whenever numbers are changed
document.getElementById("x").addEventListener("change", doCalc);
document.getElementById("y").addEventListener("change", doCalc);
document.getElementById("w").addEventListener("change", doCalc);
document.getElementById("h").addEventListener("change", doCalc);
}
function draw() {
image(img, 0, 0, img.width * 2, img.height * 2);
//noStroke();
stroke(0, 64 * (1.5 + sin(millis() / 150) / 2));
line(pixelCoord[0] * 2 + 1, 0, pixelCoord[0] * 2 + 1, img.height * 2);
line(0, pixelCoord[1] * 2 + 1, img.width * 2, pixelCoord[1] * 2 + 1);
//noStroke();
fill(clr);
rectMode(CENTER);
rect(pixelCoord[0] * 2, pixelCoord[1] * 2, 8, 8);
}
function mouseClicked() {
if (mouseX >= 0 && mouseX < width && mouseY >= 0 && mouseY < height) {
// we're scaling x2
document.getElementById("x").value = round(constrain(mouseX, 0, width) / 2);
document.getElementById("y").value = round(
constrain(mouseY, 0, height) / 2
);
doCalc();
}
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment