Cosmic Gobstoppers

Cosmic Gobstoppers

This little effect is based on Rainbow Storm by mathisvdr. 

I converted the dweet to p5js. I have NO IDEA how the maths works! For a creative coder, my maths skills leave a lot to be desired! But, with a little bit of tweaking and research, I managed to create a nice sketch.

Dweets are interesting. They're golfed code. Golfed code comes from the game of golf, where you try to complete a hole in as little moves (par) as possible. Golfed code takes a block of code and strips it down to the bare minimum.

This is mathisvdr's golfed code, which would fit in a tweet as it is 138 characters long:



function u(t) {
c.style.filter='invert()';for(i=836;i--;x.fillRect(i%38*50+5,~~(i/38)*52+2,45,45))x.fillStyle=`hsl(${i*S(t)},99%,${S(i**3+t)**33*90+10}%)`
}

This is my code, which is more readable but would not fit in a tweet:



let t = 0;

function setup() {
  createCanvas(400, 415);
  colorMode(HSL, 360, 100, 100);
}

function draw() {
  //background(220);

  for (let i = 836; i > 0; i--) {
    let hue = i * sin(t);
    let light = pow(sin(pow(i, 3) + t), 33) * 90 + 10;

    fill(hue, 99, light);
    ellipse(20+(i % 8) * 50 + 5, 21+floor(i / 38) * 52 + 2, 45, 45);
  }

  t+=0.02;

Comments

Post a Comment

Popular posts from this blog

Tutorial: Hello, world! in Z80 Assembly Language

Image
  I'm feeling kind of nostalgic today so I thought I'd write Hello, world! in Z80 assembly for the ZX Spectrum! The last time I wrote any Z80 assembly was when I was 14 so around 36 years ago! I may be a little rusty! Here it is: org $8000 ld bc, TEXT LOOP ld a, (bc) cp 0 jr z, EXIT rst $10 inc bc jr LOOP EXIT ret TEXT defb "Hello, world!" defb 13, 0 How this works line by line: org $8000 - this line puts the program into memory location $8000 ld bc,TEXT - ld stands for load. We load register bc with the memory location of what comes after the label TEXT LOOP - the beginning of our printing loop. We will be printing each letter at a time. ld a,(bc) - now we load register a with the content of register bc. As register a is a single register and can only take a single byte at a time, then the content of bc loaded into register a will be the letter H (the first letter in Hello, world!) cp 0 - stands for compare 0. We check if ...
Read more

La Isla Bonita

Image
La Isla Bonita Another drawing made using P5JS based on an image I've found online. This one was a bit more difficult as the original has lots of shadows. I decided to forgo some of the shadows to make my image more simple. I think it turned out quite well. I called the sketch "La Isla Bonita" as it reminded me of the Madonna song from my childhood. Here's the original. I think this is an AI pic. It doesn't really matter. And here is my version: And here is the code: function setup() { createCanvas(400, 600); angleMode(DEGREES); } function draw() { background(255); stroke(0); strokeWeight(3); push(); translate(-30,0); // centre whole image /* hat */ push(); noFill(); //brim strokeWeight(6); translate(200,100); rotate(30); ellipse(0,0,60,80); //top strokeWeight(5); arc(-10,-10,40,40,20,320); arc(-10,-5,40,40,10,180); pop(); strokeWeight(3) //crease line(180...
Read more

にゃー、にゃー。(Meow, meow)

にゃー、にゃー。 Today my wife was playing Stray on the PS5. It seems an interesting game where you play the role of a stray cat in the far future that finds itself lost in a city full of robots. Whilst scrolling through Twitter, I came across a wonderful p5js sketch by Senbaku , which inspired me to create this animation. And here is the code: /* After にゃー、にゃー。 (Meow meow) by @Senbaku https://x.com/senbaku/status/2024819224028541210 */ function setup() { createCanvas(400, 400); rectMode(CENTER); angleMode(DEGREES); noStroke(); } function draw() { background(220); drawCat(width / 4, height / 2, false); drawCat(width / 4, height / 4, false); drawCat(width / 4, height / 2+100, false); //mirrored cats drawCat((width / 4) * 3, height / 2, true); drawCat((width / 4) * 3, height/4, true); drawCat((width / 4) * 3, height/2+100, true); textSize(30); text('After センバク', 100,360); } ...
Read more