画像処理についてあれこれ: 2009-10-18

Saturday, October 24, 2009

Processingで円弧を描画する

Processingで円弧を描画するには、以下のコードを実行します。


// キャンバスサイズ
size(400, 400);
// 背景色
background(#ffffee);
// 線の色
stroke(#7799dd);
// 線の太さ
strokeWeight(10);
// 円弧
arc(200, 200, 160, 160, 0, 1.5*PI);
// ファイル保存
save("sample1242a.png");

出力画像(sample1242a.png)

動作環境
Processing 1.0.7/Processing 3.4
〇関連項目
Processingをインストールした仮想マシンを構築するには、以下のページを参照してください。
・https://serverarekore.blogspot.com/search/label/Processing
・Processingに関する他の記事は、こちらを参照してください。

Friday, October 23, 2009

groovyとJOGLで複数の立方体を渦巻状に描画する

groovyとJOGLで複数の立方体を渦巻状に描画するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;

// 出力画像サイズ
width = 300
height = 300

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0xf0/0xff as Float, 
      0xf0/0xff as Float, 
      0xf0/0xff as Float,
      1f)
  },

  display: {
    GLUT glut = new GLUT()
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 60.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(0.0f, 0.0f, -50.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_DEPTH_TEST)
    gl.glEnable(GL_CULL_FACE)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0x77/0xff as float, 
      0x99/0xff as float, 
      0xff/0xff as float
    )

    // Y軸回転
    gl.glRotatef(30.0f, 0.0f, 1.0f, 0.0f)

    cs = 0.01f
    for(li in 0..300-1){
      // Z軸回転
      gl.glRotatef(12.0f, 0.0f, 0.0f, 1.0f)
      // 移動
      gl.glTranslatef(0.0f, cs*1.1f as float, 0.0f)
      // 立方体を描画
      glut.glutSolidCube((cs*=1.02) as float)
    }

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1317a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1317a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

Thursday, October 22, 2009

groovyとJOGLで凹んだポリゴンを描画する

groovyとJOGLで凹んだポリゴンを描画するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import javax.media.opengl.glu.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;


class TessCB extends GLUtessellatorCallbackAdapter 
{
  def gl = null
  def glu = null

  TessCB(GL gla, GLU glua)
  {
    gl = gla
    glu = glua
  }
  void begin(int type)
  {
    gl.glBegin(type)
  }

  void end()
  {
    gl.glEnd()
  }

  void vertex(Object vertexData)
  {
    if( vertexData instanceof double[] ){
      gl.glVertex3dv(vertexData, 0);
    }
  }

  void error(int errnum)
  {
    println(glu.gluErrorString(errnum))
    System.exit(0)
  }
}


// 出力画像サイズ
width = 300
height = 300

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0xf0/0xff as Float, 
      0xf0/0xff as Float, 
      0xf0/0xff as Float,
      1f)
  },

  display: {
    GLU glu = new GLU()
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 40.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(0.0f, 0.0f, -7.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_DEPTH_TEST)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0x77/0xff as float, 
      0x99/0xff as float, 
      0xff/0xff as float
    )

    GLUtessellator tess = glu.gluNewTess()

    tcb = new TessCB(gl, glu)
    glu.gluTessCallback(tess, GLU.GLU_TESS_VERTEX, tcb)
    glu.gluTessCallback(tess, GLU.GLU_TESS_BEGIN, tcb)
    glu.gluTessCallback(tess, GLU.GLU_TESS_END, tcb)
    glu.gluTessCallback(tess, GLU.GLU_TESS_ERROR, tcb)

    va = [
      [1.0, -1.0, 0.0],
      [1.0, 1.0, 0.0],
      [-1.0, 1.0, 0.0],
      [-1.0, -1.0, 0.0],
      [0.0, -0.5, 0.0]
    ]

    glu.gluTessBeginPolygon(tess, null);
    glu.gluTessBeginContour(tess);
    for(al in 0..va.size-1){
      glu.gluTessVertex(tess, va[al] as double[], 0, 
        va[al] as double[])
    }
    glu.gluTessEndContour(tess);
    glu.gluTessEndPolygon(tess);

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1316a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1316a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

Wednesday, October 21, 2009

groovyとJOGLで複数の球の文字列を描画する

groovyとJOGLで複数の球の文字列を描画するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import java.awt.*;
import java.awt.font.*;
import java.awt.geom.*;
import java.awt.image.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;

// 出力画像サイズ
width = 300
height = 300

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0xf0/0xff as Float, 
      0xf0/0xff as Float, 
      0xf0/0xff as Float,
      1f)
  },

  display: {
    GLUT glut = new GLUT()
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 40.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(-6.0f, 1.0f, -35.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_DEPTH_TEST)
    gl.glEnable(GL_CULL_FACE)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0x77/0xff as float, 
      0x99/0xff as float, 
      0xff/0xff as float
    )

    // X軸回転
    gl.glRotatef(70.0f, 1.0f, 0.0f, 0.0f)
    // Y軸回転
    gl.glRotatef(10.0f, 0.0f, 1.0f, 0.0f)

    /* 文字列描画用イメージを作成 */
    message = "JOGL"
    Font font = new Font(Font.SANS_SERIF, 
      Font.PLAIN, 10)
    FontRenderContext frc = new FontRenderContext(
      new AffineTransform(), false as boolean, 
      false as boolean)
    TextLayout layout = new TextLayout(
      message, font, frc)

    BufferedImage img = new BufferedImage(
      (int)layout.getBounds().getWidth(), 
      (int)layout.getAscent() + 
      (int)layout.getDescent(), 
      BufferedImage.TYPE_INT_ARGB)


    Graphics2D gr = img.createGraphics();
    gr.setColor(new Color(0x00, 0x00, 0x00, 0x00))
    gr.fill(new Rectangle2D.Double(0,0,
      img.getWidth(),img.getHeight()))
    /* 文字列を描画 */
    gr.setColor(new Color(0xff, 0xff, 0xff))
    gr.setFont(font)
    layout.draw(gr, 0, 
      (img.getHeight()-layout.getDescent()) as int)
    gr.dispose()

    rs = 0.25f
    ds = 0.45f
    for(lz in 0..img.getHeight()-1){ 
      for(lx in 0..img.getWidth()-1){ 
        gl.glPushMatrix()
        gl.glTranslatef(ds*lx as float, 0f, ds*lz as float)
        if( img.getRGB(lx, lz) != 0 ){
          glut.glutSolidSphere(rs, 16, 16)
        }
        gl.glPopMatrix()
      }
    }

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1315a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1315a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

Tuesday, October 20, 2009

groovyとJOGLで円柱がウニのように広がった画像を作成する

groovyとJOGLで円柱がウニのように広がった画像を作成するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;

// 出力画像サイズ
width = 300
height = 300

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0xf0/0xff as Float, 
      0xf0/0xff as Float, 
      0xf0/0xff as Float,
      1f)
  },

  display: {
    GLUT glut = new GLUT()
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 40.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(0.0f, -1.0f, -30.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_AUTO_NORMAL)
    gl.glEnable(GL_DEPTH_TEST)
    gl.glEnable(GL_CULL_FACE)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0x77/0xff as float, 
      0x99/0xff as float, 
      0xff/0xff as float
    )

    // X軸回転
    gl.glRotatef(45.0f, 1.0f, 0.0f, 0.0f)
    // Y軸回転
    gl.glRotatef(45.0f, 0.0f, 1.0f, 0.0f)

    slices = 12
    ch = 5f
    cr = 0.25f

    for(lx in 0..slices-1){
      for(ly in 0..slices-1){
        gl.glPushMatrix()
        // X軸回転
        gl.glRotatef(360f/slices*lx as float, 1.0f, 0.0f, 0.0f)
        // Y軸回転
        gl.glRotatef(360f/slices*ly as float, 0.0f, 1.0f, 0.0f)
        // 円柱を描画
        glut.glutSolidCylinder(cr, ch, 16, 4)
        gl.glPopMatrix()
      }
    }

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1314a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1314a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

Monday, October 19, 2009

groovyとJOGLでピラミッドを描画する

groovyとJOGLでピラミッドを描画するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;

// 出力画像サイズ
width = 300
height = 300

def drawTriangle(GL gl, 
  double p1x, double p1y, double p1z,
  double p2x, double p2y, double p2z,
  double p3x, double p3y, double p3z)
{
  gl.glBegin(GL_POLYGON)

  gl.glNormal3d((p1x+p2x+p3x)/3, 
    1, (p1z+p2z+p3z)/3)
  gl.glVertex3d(p1x, p1y, p1z)
  gl.glNormal3d((p1x+p2x+p3x)/3, 
    0, (p1z+p2z+p3z)/3)
  gl.glVertex3d(p2x, p2y, p2z)
  gl.glNormal3d((p1x+p2x+p3x)/3, 
    0, (p1z+p2z+p3z)/3)
  gl.glVertex3d(p3x, p3y, p3z)

  gl.glEnd()
}

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0xf0/0xff as Float, 
      0xf0/0xff as Float, 
      0xf0/0xff as Float,
      1f)
  },

  display: {
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 40.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(0.0f, -1.0f, -12.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_AUTO_NORMAL)
    gl.glEnable(GL_DEPTH_TEST)
    gl.glEnable(GL_CULL_FACE)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0x77/0xff as float, 
      0x99/0xff as float, 
      0xff/0xff as float
    )

    // X軸回転
    gl.glRotatef(40.0f, 1.0f, 0.0f, 0.0f)
    // Y軸回転
    gl.glRotatef(20.0f, 0.0f, 1.0f, 0.0f)

    // ピラミッドサイズ
    ph = 2.0
    ps = 3.0

    drawTriangle(gl, 
      0.0, ph, 0.0,
      ps/2.0, 0.0, -ps/2.0,
      -ps/2.0, 0.0, -ps/2.0)

    drawTriangle(gl, 
      0.0, ph, 0.0, 
      -ps/2.0, 0.0, ps/2.0,
      ps/2.0, 0.0, ps/2.0)

    drawTriangle(gl, 
      0.0, ph, 0.0, 
      -ps/2.0, 0.0, -ps/2.0,
      -ps/2.0, 0.0, ps/2.0)

    drawTriangle(gl, 
      0.0, ph, 0.0, 
      ps/2.0, 0.0, ps/2.0,
      ps/2.0, 0.0, -ps/2.0)

    gl.glBegin(GL_POLYGON)
    gl.glNormal3d(0,-1,0)
    gl.glVertex3d(-ps/2, 0.0, ps/2)
    gl.glVertex3d(-ps/2, 0.0, -ps/2)
    gl.glVertex3d(ps/2, 0.0, -ps/2)
    gl.glVertex3d(ps/2, 0.0, ps/2)
    gl.glEnd()

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1313a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1313a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

Sunday, October 18, 2009

groovyとJOGLで複数の直方体の山を描画する

groovyとJOGLで複数の直方体の山を描画するには、以下のコードを実行します。


import static javax.media.opengl.GL.*;
import java.io.*;
import javax.media.opengl.*;
import com.sun.opengl.util.*;

// 出力画像サイズ
width = 300
height = 300

GLDrawableFactory gldf = 
  GLDrawableFactory.getFactory()
GLCapabilities glc = new GLCapabilities()
glc.setDoubleBuffered(false)
GLPbuffer buf = gldf.createGLPbuffer(
  glc, null, width, height, null)
GL gl = buf.getGL()

buf.addGLEventListener(
[ init: {
    // 背景色
    gl.glClearColor(
      0x58/0xff as Float, 
      0x50/0xff as Float, 
      0x50/0xff as Float,
      1f)
  },

  display: {
    GLUT glut = new GLUT()
    gl.glViewport(0, 0, width, height)

    // 透視投影
    gl.glMatrixMode(GL_PROJECTION)
    gl.glLoadIdentity()
    float ratio = height/width as Float
    gl.glFrustum(-1.0f, 1.0f, -ratio, ratio,
      5.0f, 40.0f)

    gl.glMatrixMode(GL_MODELVIEW)
    gl.glLoadIdentity()
    gl.glTranslatef(-3.0f, -1.5f, -7.0f)

    gl.glEnable(GL_LIGHTING)
    gl.glEnable(GL_LIGHT0)
    gl.glEnable(GL_COLOR_MATERIAL)
    gl.glEnable(GL_NORMALIZE)
    gl.glEnable(GL_DEPTH_TEST)
    gl.glEnable(GL_CULL_FACE)

    // フォグの設定
    fog=[0.2f,0.2f,0.3f,1.0f]
    gl.glFogfv(GL_FOG_COLOR,fog as float[], 0)
    gl.glFogi(GL_FOG_MODE,GL.GL_EXP)
    gl.glFogf(GL_FOG_DENSITY, 0.04f)
    gl.glFogf(GL_FOG_START, 0.0f)
    gl.glFogf(GL_FOG_END,20.0f)
    gl.glEnable(GL_FOG)

    // 光源の位置
    l1pos = [-5.0f, 10.0f, 0.0f, 1.0f]
    gl.glLightfv(GL_LIGHT0, GL_POSITION, l1pos as float[], 0)
    // 環境光
    l1amb = [0.1f, 0.1f, 0.1f, 1.0f]
    gl.glLightfv(GL_LIGHT0, GL_AMBIENT, l1amb as float[], 0)
    // 拡散光
    l1dif = [0.9f, 0.9f, 0.9f, 1.0f]
    gl.glLightfv(GL_LIGHT0, GL_DIFFUSE, l1dif as float[], 0)
    // 鏡面光
    l1spe = [1.0f, 1.0f, 1.0f, 1.0f]
    gl.glLightfv(GL_LIGHT0, GL_SPECULAR, l1spe as float[], 0)

    gl.glClear(GL_COLOR_BUFFER_BIT
      | GL_DEPTH_BUFFER_BIT )

    gl.glPushMatrix()

    // 面の色を設定
    gl.glColor3f(
      0xff/0xff as float, 
      0xff/0xff as float, 
      0xff/0xff as float
    )

    // X軸回転
    gl.glRotatef(15.0f, 1.0f, 0.0f, 0.0f)
    // Y軸回転
    gl.glRotatef(30.0f, 0.0f, 1.0f, 0.0f)

    cs = 0.25f
    gs = 0.3f
    for(lz in -10..60){
      for(lx in -10..100){
        gl.glPushMatrix()
        de = (gs*lx-5)*(gs*lx-5)+(gs*lz-3)*(gs*lz-3)+9
        ch = 27/(de==0f?0.001f:de)
        gl.glScalef(1f, ch as float, 1f)
        gl.glTranslatef(lx*gs as float, 
          cs*ch/2 as float, -1*lz*gs as float)
        glut.glutSolidCube(cs)
        gl.glPopMatrix()
      }
    }

    gl.glPopMatrix()
  },

  reshape: {},
  displayChanged: {}
] as GLEventListener
)
GLContext context = 
  buf.createContext(null)
context.makeCurrent()
buf.display()
Screenshot.writeToFile(
  new File("sample1312a.png"), 
  width, height, true)
context.release()
context.destroy()

出力画像(sample1312a.png)

動作環境
JDK1.6 Update14, Groovy 1.6.3, JOGL 1.1.1a

関連情報
groovyとJOGLのまとめ

画像処理についてあれこれ

Saturday, October 24, 2009

Processingで円弧を描画する

Friday, October 23, 2009

groovyとJOGLで複数の立方体を渦巻状に描画する

Thursday, October 22, 2009

groovyとJOGLで凹んだポリゴンを描画する

Wednesday, October 21, 2009

groovyとJOGLで複数の球の文字列を描画する

Tuesday, October 20, 2009

groovyとJOGLで円柱がウニのように広がった画像を作成する

Monday, October 19, 2009

groovyとJOGLでピラミッドを描画する

Sunday, October 18, 2009

groovyとJOGLで複数の直方体の山を描画する

About Me

Labels