Hugging Face's logo

Spaces:
tinazone
/
word-to-code
Running

App Files Community
word-to-code
File size: 3,200 Bytes 
21d7fc3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
export const lightReasoning = "For 'light', I'll create particles that emit a soft glow and pulse rhythmically. The particles will be arranged in a pattern that suggests rays or beams of light, with subtle movement and size variations. The color palette will focus on warm, bright tones, and I'll use the screen blend mode to create authentic light-like effects.";

export const lightSketch = `let font;
let fontSize = 200;
let word = "light";
let points;
let particles = [];
let lightCycleSpeed = 0.02;
let particleMinSize = 5;
let particleMaxSize = 5;
let shadowBlurAmount = 30;
let minX, maxX;

let color1 = "#217BFE";
let color2 = "#078BFE";
let color3 = "#AC87EB";
let lightColor;

function preload() {
  font = loadFont('/fonts/GoogleSans-Bold.ttf');
}

function setup() {
  createCanvas(500, 500);
  background(0);

  lightColor = color(255, 255, 255);

  textFont(font);
  textSize(fontSize);
  textAlign(CENTER, CENTER);

  // Get the width of the text
  let textW = textWidth(word);
  
  // If text is too wide, scale down fontSize
  if (textW > width * 0.8) {
    fontSize = fontSize * (width * 0.8) / textW;
    textSize(fontSize);
    textW = textWidth(word);
  }

  points = font.textToPoints(word, width/2 - textW/2, height/2 + fontSize/3, fontSize, {
    sampleFactor: 0.1
  });

  minX = width;
  maxX = 0;
  for (let pt of points) {
    minX = min(minX, pt.x);
    maxX = max(maxX, pt.x);
  }

  for (let i = 0; i < points.length; i++) {
    let pt = points[i];
    particles.push(new Particle(pt.x, pt.y, i));
  }
}

function draw() {
  blendMode(BLEND);  // Reset to default blend mode first
  background(0);     // Clear with black background
  blendMode(SCREEN); // Then set screen blend mode for particles

  for (let particle of particles) {
    particle.update();
    particle.display();
  }
}

class Particle {
  constructor(x, y, index) {
    this.pos = createVector(x, y);
    this.size = random(particleMinSize, particleMaxSize);
    this.alpha = 255;
    this.lightOffset = index * 0.1;
  }

  update() {
    // No position update needed for light animation
  }

  getBaseColor() {
    let normalizedX = map(this.pos.x, minX, maxX, 0, 1);
    let baseParticleColor;

    if (normalizedX < 0.5) {
      baseParticleColor = lerpColor(color(color1), color(color2), normalizedX * 2);
    } else {
      baseParticleColor = lerpColor(color(color2), color(color3), (normalizedX - 0.5) * 2);
    }
    return baseParticleColor;
  }

  display() {
    let brightness = sin(frameCount * lightCycleSpeed + this.lightOffset);
    brightness = map(brightness, -1, 1, 0, 1);
    brightness = constrain(brightness, 0, 1);

    let baseParticleColor = this.getBaseColor();
    let particleColor = lerpColor(baseParticleColor, lightColor, brightness);

    noStroke();

    if (brightness > 0.8) {
      drawingContext.shadowBlur = shadowBlurAmount;
      drawingContext.shadowColor = color(255);
      fill(particleColor);
      ellipse(this.pos.x, this.pos.y, this.size * 1.5, this.size * 1.5);
      drawingContext.shadowBlur = 0;
    } else {
      drawingContext.shadowBlur = 0;
      fill(particleColor);
      ellipse(this.pos.x, this.pos.y, this.size, this.size);
    }
  }
}`;