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

first check in with computational portfolio example

parents
No related merge requests found
# License and use
The code examples used here are licensed under the MIT license.
https://opensource.org/licenses/MIT
# Graphics Examples
### For Goldsmiths BSc Creative Computing Graphics IS51030A
* Computational layout
* Colors and color theory
* Basic procedural animation
by Evan Raskob -- e.raskob@gold.ac.uk
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>advanced pixel access</title>
<script src="libraries/p5.min.js" type="text/javascript"></script>
<script src="sketch.js" type="text/javascript"></script>
<style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
</head>
<body>
</body>
</html>
This diff is collapsed.
///
/// Demonstrating a computational layout for a portfolio project page
/// by Evan Raskob, mostly adapted from an example Rune Madsen's online book: https://github.com/runemadsen/programmingdesignsystems.com/blob/master/examples/layout/geometric-composition/composition-strict-3.js
///
/// Tested with p5js v1.0.0
///
function setup() {
createCanvas(450, 600);
}
function draw() {
const margin = height / 20;
const allWidth = width - 3 * margin;
const allHeight = height - 5 * margin;
const moduleWidth = allWidth / 2;
const moduleHeight = allHeight / 4;
background(240);
noStroke();
// SKETCH BOX
// this could contain your sketch's interactive or animated portion.
// Meaning, you can resize-your sketch to draw into this box!
//
translate(margin, margin);
fill(75, 185, 165);
rect(0, 0, 2 * moduleWidth + margin, 3 * moduleHeight + 2 * margin);
/// SKETCH
/// now draw your sketch. Since it's *after* the sketch box, it will draw over it.
/// see drawMySketch() below.
drawMySketch(0, 0, 2 * moduleWidth + margin, 3 * moduleHeight + 2 * margin);
// TITLE BOX
// this could contain the title of your sketch, in text
translate(0, 3 * (moduleHeight + margin));
fill(30, 50, 50);
rect(0, 0, moduleWidth, moduleHeight / 4);
fill(240); // text colour
// let's do computational text margins as well
// Note: you can do this for inner content too
const textHorizontalMargin = moduleWidth / 18;
const textVerticalMargin = moduleHeight / 18;
// text should fit the title box, above
text("My Project Title", textHorizontalMargin, textVerticalMargin, moduleWidth - textHorizontalMargin, moduleHeight / 4 - textVerticalMargin);
fill(120, 155, 155);
rect(moduleWidth + margin, 0, moduleWidth, moduleHeight);
}
///
/// Usually, your sketch is draw inside draw().
/// This time, put *all* your drawing code here so you can draw
/// your sketch at any arbitrary x,y position and width, height (w,h)
/// This means looking at your original drawing code and adding x and y
/// to all coordinates, and replacing width with w and height with h.
///
function drawMySketch(x, y, w, h) {
let numStrips = 16;
// draw a moving vertical strips
fill(255,100);
for (let i = 1; i < numStrips; i++) {
rect(
x + w / 2 + i * w / (2*numStrips) * sin(frameCount / (i*16)),
y, w / (2*numStrips), h);
}
fill(255,100);
for (let i = 1; i < numStrips; i++) {
rect(
x,
y + h / 2 + i * h / (2*numStrips) * cos(frameCount / (i*32)),
w, h / (2*numStrips));
}
}
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