Computing without computer

Sollewit: Wall drawing

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Example Image

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

Webcam tests

Computing with computer

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Lorem ipsum dolor sit amet
Consetetur sadipscing elitr, sed diam nonumy.
At vero eos et accusam et justo duo dolores et ea rebum.

Week 02 Journal by Kayleigh Waser

GENCG Week 2 – Code Grid Exercise // Variables for animation let angle = 0; let pulseSize = 1; let pulseDirection = 0.01;

function setup() { createCanvas(400, 400); // Set rectangle mode to center for easier positioning rectMode(CENTER); }

function draw() { background(0);

// Create a grid using loops (more efficient than drawing each line individually) drawGrid();

// Animate the shapes animateShapes(); }

function drawGrid() { // Set grid properties stroke(‘purple’); strokeWeight(1);

// Draw horizontal lines for (let y = 0; y <= height; y += 50) { line(0, y, width, y); }

// Draw vertical lines for (let x = 0; x <= width; x += 50) { line(x, 0, x, height); } }

function animateShapes() { // Update animation variables angle += 0.02; pulseSize += pulseDirection;

// Reverse pulse direction when it gets too big or too small if (pulseSize > 1.5 || pulseSize < 0.5) { pulseDirection *= -1; }

// Animated blue circle - rotates and pulses push(); // Save current drawing state translate(100, 100); // Move origin to circle center rotate(angle); // Rotate around the center fill(‘blue’); circle(0, 0, 100 * pulseSize); // Draw circle at new origin pop(); // Restore original drawing state

// Animated red ellipse - moves in a circular path let ellipseX = 300 + cos(angle * 1.5) * 50; let ellipseY = 300 + sin(angle * 1.5) * 50; fill(‘red’); ellipse(ellipseX, ellipseY, 100, 50);

// Animated triangle - bounces vertically let triangleY = 75 + sin(angle * 2) * 25; fill(‘white’); triangle(300, triangleY, 258, triangleY - 55, 286, triangleY + 25);

// Animated square - changes color and size let squareSize = 50 + sin(angle) * 20; let squareColor = color( 150 + sin(angle) * 105, 100 + cos(angle) * 100, 200 + sin(angle * 0.7) * 55 ); fill(squareColor); rect(200, 200, squareSize, squareSize); }

https://editor.p5js.org/KayWa7/full/_pKU21a6k

Week 03 Journal by Kayleigh Waser

GENCG Week 3 Exercise Grid & Time To combine the exercises of this and last week, I tried programming a rough and simple moon phase cycle in the p5-editor. For now, I restrict myself to simple shapes until I have more practise with the new tools. The code used looked as follows:

let angle = 0; // for moon orbit let lineLength = 50; // base line length let t = 0; // time variable for easing

function setup() { createCanvas(500, 500); angleMode(DEGREES); }

function draw() { background(87);

translate(width/2, height/2);

// Ease the line length (sin wave) let easedLength = lineLength + sin(t) * 30; t += 2; // speed of easing

stroke(0); strokeWeight(4);

// Draw radiating lines for (let i = 0; i < 6; i++) { let x = cos(i * 60) * easedLength; let y = sin(i * 60) * easedLength; line(0, 0, x, y); }

// Orbiting moons let orbitRadius = 150; let moonSize = 60;

for (let i = 0; i < 4; i++) { let x = cos(angle + i * 90) * orbitRadius; let y = sin(angle + i * 90) * orbitRadius;

// draw moon base
noStroke();
fill(0);
ellipse(x, y, moonSize);

// add moon phase mask
fill(255);
if (i === 0) {
  // full moon
  ellipse(x, y, moonSize);
} else if (i === 1) {
  // waning (left shadow)
  ellipse(x + 15, y, moonSize);
} else if (i === 2) {
  // new moon (fully black, do nothing extra)
} else if (i === 3) {
  // waxing (right shadow)
  ellipse(x - 15, y, moonSize);
}   }

// make moons orbit angle += 1; }

This experiment gave me some programming ideas while I worked on more experiments of my designs and patterns. Unfortunately, I have no idea how to upload gifs or images onto this journal yet, so the coding strips and descriptions will have to do. What I would like to do is to have a dial animation, meaning the moons move in a circle while the lines ease in and out. My sketches and ideas will be published, as soon as I find out how.

Week 04 Journal by Kayleigh Waser

This week, we yet again look at time as a topic. The first artworks that come to mind are - of course - by Salvador Dalí with his melting clocks and a video installation I have spotted right next to the Paddington Station in London. It shows a man painting, erasing and repainting the minute hand on a regular train station’s clock. A quick online search told me, that said installation is by Maarten Baas and part of the series “Real Time Clock”.

https://www.framedcanvasart.com/wp-content/uploads/2024/12/The-Persistence-of-Memory-Melting-Clocks-Painting-Salvador-Dali.jpg (Salvador Dalí - The Persistence of Memory (Melting Clocks))

https://www.youtube.com/watch?v=TigeOpy5-TA (Marten Baas - Real Time Clock (recording of the installation at the Paddington Station in London,UK))

I, then went online again to research art pieces about time and its passage. During this brief search, I discovered an installation by Maya Lin, titled “Eclipsed Time”. Exhibited in New York, a disk installed in the ceiling causes an eclipse in intervals, demonstrating the passage of time.

https://uploads5.wikiart.org/00109/images/maya-lin/eclipsed-time-1989-95.jpg (Maya Lin - Eclipsed Time)

For my project, I would like to incorporate lunar cycles as a representation of time, ideally combine it with some sort of pendulum, like an old grandfather clock. Another object to draw inspiration from would be sun dials, from those one may find in a garden to the ancient ones created by indigenous tribes such as the Aztecs.

https://www.reddit.com/media?url=https%3A%2F%2Fpreview.redd.it%2Fd9t0yjd55hg61.jpg%3Fwidth%3D640%26crop%3Dsmart%26auto%3Dwebp%26s%3Df860bf3b48f0d15dc8cce429ae663d03cbc92846 (The Aztec Sun Stone displayed at the National Anthropology Museum in Mexico City)

Week 05 Journal by Kayleigh Waser

In today’s lecture, we had a look at automated drawing machines. My immediate train of thought went to paint can artwork, in which a container filled with paint is hung on a rope and released onto a canvas. The released paint creates a seemingly infinte path as as the container swings like a pendulum.

https://lh3.googleusercontent.com/Mv6LgdJedWVizMWZUveLO1pEjBydQ9Njk5KiQf8FivjlnNoDJgQfJC5fdn5GgjC70Tyjk-LxamS3lMCJZYoMBckQssOtukIQDVs8xpLXzSWwC37grEhPQJAMsY5Dj-H9kIMuvgnCHPc0nXu2yfY8Sg_NVpNnbF3KVxqVH6M6PUjrdaG0TgoOycYAew https://i.etsystatic.com/24858016/r/il/86d371/2602609981/il_1588xN.2602609981_r9wp.jpg (a few examples I have spotted on google images)

I took this idea into p5.js and programmed a pendulum there, which creates a flower-like pattern in tones of blue and purple. https://editor.p5js.org/KayWa7/full/knUcwVDIa

The code I used looks as follows: let t = 0; // time variable for pendulum motion let rotation = 0; // overall rotation angle of the figure-eight let hueShift = 200; // color hue (blue start) let cycleCount = 0; let lastSign = 1; let centerX, centerY;

function setup() { createCanvas(800, 800); colorMode(HSB, 360, 100, 100); background(0); noFill(); strokeWeight(2); centerX = width / 2; centerY = height / 2; }

function draw() { // Parameters let swingSpeed = TWO_PI / 2; // 2 seconds per full figure-8 loop let rotateSpeed = radians(0.7); // slow rotation per frame let xAmp = 250; let yAmp = 150;

// Calculate figure-eight path let x = sin(t) * xAmp; let y = sin(t * 2) * yAmp / 2;

// Apply slow rotation to entire pendulum system let rx = x * cos(rotation) - y * sin(rotation); let ry = x * sin(rotation) + y * cos(rotation); let drawX = centerX + rx; let drawY = centerY + ry;

// Draw trail line (connect previous and current positions) stroke(hueShift, 100, 100, 0.8); point(drawX, drawY);

// Color change per full loop let sign = sin(t) > 0 ? 1 : -1; if (sign !== lastSign) { cycleCount++; if (cycleCount % 2 === 0) { hueShift += 10; if (hueShift > 300) hueShift = 200; // cycle blue→purple } lastSign = sign; }

// Advance motion and rotation t += swingSpeed / 60; rotation += rotateSpeed; }

This mandala shape is created one second at a time, with the swings of the pendulum timed to last one second each. After the difficulties I have faced in Visual Studio Code while trying to add images and files to this journal, I am glad to have found a way to combine some of themes and tasks of the past weeks.

I wished to fill the canvas some more and tried to find a simple way to add more depth to the design, so I added a second pendulum behind the first. The second pendulum is larger and changes color randomly every second, making that change with every swing. https://editor.p5js.org/KayWa7/full/M7HkOkjYh

A next step could be to add controls for users to change the velocity in which the pendulum circles.

Week 06 Journal by Kayleigh Waser

In today’s lecture, we formed groups to exchange our ideas and journals. I still could not upload any media properly, so I continue to work with links. It felt inspiring and motivating to see what some of my classmates have been up to during the past weeks. I received tips on the set up for github. As for my research and state of the project, I received positive feedback. My latest “sketch” has been called “hypnotic” and “relaxing”. I am aware that I need to invest some time in my Javascript coding skills to make my ideas a reality. Even though, not everything works the way it should, I feel like I reached a point where I need to put all my energy and effort into the project rather than making github work.