coffeeScript Implementation in html

Question

Actually i am new to Coffeescript and sketch.js. So i wanted to know the way i can implement coffeescript in html.

To be precise i want to implement http://codepen.io/anon/pen/YVxzyJ the sketch.js bubble example in html5 canvas where it includes coffeescript. I tried to search but i didn't found any useful solutions.

 # General Variables
sketch = Sketch.create()
particles = []
particleCount = 750
sketch.mouse.x = sketch.width / 2
sketch.mouse.y = sketch.height / 2
sketch.strokeStyle = 'hsla(200, 50%, 50%, .4)'
sketch.globalCompositeOperation = 'lighter'

# Particle Constructor
Particle = ->
  this.x = random( sketch.width ) 
  this.y = random( sketch.height, sketch.height * 2 )
  this.vx = 0
  this.vy = -random( 1, 10 ) / 5
  this.radius = this.baseRadius = 1
  this.maxRadius = 50  
  this.threshold = 150
  this.hue = random( 180, 240 )

# Particle Prototype
Particle.prototype =
  update: ->
    # Determine Distance From Mouse
    distx = this.x - sketch.mouse.x
    disty = this.y - sketch.mouse.y
    dist = sqrt( distx * distx + disty * disty )

    # Set Radius
    if dist < this.threshold
      radius = this.baseRadius + ( ( this.threshold - dist ) / this.threshold ) * this.maxRadius
      this.radius = if radius > this.maxRadius then this.maxRadius else radius
    else
      this.radius = this.baseRadius

    # Adjust Velocity
    this.vx += ( random( 100 ) - 50 ) / 1000
    this.vy -= random( 1, 20 ) / 10000

    # Apply Velocity
    this.x += this.vx
    this.y += this.vy

    # Check Bounds   
    if this.x < - this.maxRadius || this.x > sketch.width + this.maxRadius || this.y < - this.maxRadius
      this.x = random( sketch.width )      
      this.y = random( sketch.height + this.maxRadius, sketch.height * 2 )
      this.vx = 0
      this.vy = -random( 1, 10 ) / 5
  render: ->
    sketch.beginPath()
    sketch.arc( this.x, this.y, this.radius, 0, TWO_PI )
    sketch.closePath()
    sketch.fillStyle = 'hsla(' + this.hue + ', 60%, 40%, .35)'
    sketch.fill()
    sketch.stroke()

# Create Particles
z = particleCount
while z--
  particles.push( new Particle() )

# Sketch Clear
sketch.clear = ->
  sketch.clearRect( 0, 0, sketch.width, sketch.height )

# Sketch Update
sketch.update = ->
  i = particles.length
  particles[ i ].update() while i--

# Sketch Draw
sketch.draw = ->  
  i = particles.length
  particles[ i ].render() while i--

This is the coffeescript used to create bubble example in sketch.js and it only has css which is as follows:

canvas {
  background: #023;
  display: block; 
}

Your answer would be really helpful for me.

Just [compile](http://coffeescript.org/#try:alert%20%22Hello%20CoffeeScript!%22) the coffeescript.... — Jared Smith, Jul 24 '17 at 17:20

score 0 · Answer 1 · answered Jul 24 '17 at 17:16

If you are looking to implement coffee script in html, take a look at this.

You simple need to add a <script type="text/coffeescript" src="app.coffee"></script> to execute coffee script code in an HTML file.

In other cases, I've seen people use the attributes of type="coffeescript" and type="coffee", so they might work for you as well.

Mohammad Shahnawaz · Answer 2 · 2018-12-06T10:34:20.640

You it is possible by using the cdn coffee script cdn

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
        <title>CoffeScript on browser</title>
      </head>
      <body>
        <canvas id="myChart"></canvas>

        <script type="text/coffeescript">
          alert 'It works!'
          ctx = document.getElementById('myChart').getContext('2d')
          chart = new Chart(ctx,
            type: 'bar'
            data:
              labels: [
                'January'
                'February'
                'March'
                'April'
                'May'
                'June'
                'July'
              ]
              datasets: [ {
                label: 'My First dataset'
                backgroundColor: 'rgb(255, 99, 132)'
                borderColor: 'rgb(255, 99, 132)'
                data: [
                  0
                  10
                  5
                  2
                  20
                  30
                  45
                ]
              } ]
            options: {})
        </script>
      </body>
    </html>

coffeeScript Implementation in html

2 Answers2